Quin o quins navegadors web coneixeu? Quin o quins utilitzeu habitualment?

És molt comú identificar el concepte de navegador o explorador web amb un, o com a molt, dos programes: l’Internet Explorer i el Mozilla Firefox. Hi han molts més de navegadors i és convenient que els tingueu instal·lats per comprobar la funcionalitat del projecte en tots els navegadors:

• Mozilla Firefox
• Internet Explorer
• Opera
• Apple Safari
• Google Chrome

Abans de poder analitzar i presentar les possibilitats de les eines de creació Web, convé repassar alguns dels conceptes tècnics sobre la Web i les tecnologies relacionades. Existeixen moltes eines que permeten desenvolupar portals amb un aspecte i prestacions professionals, encara que la majoria requereixen una fase inicial d’aprenentatge amb una duració variable segons els casos.

Exemples d’editors d’HTML del tipus WYSIWYG són:

• Adobe Dreamweaver: originalment creat per Macromedia, és una eina professional de desenvolupament de projectes web. Les versions inicials de l’aplicació servien d’editors d’HTML WYSIWYG simples, però versions més recents han incorporat un notable suport per a moltes altres tecnologies com CSS, JavaScript, entre d’altres. El programari està disponible per a les plataformes de Mac i Windows, però també pot ser utilitzat en sistemes operatius basats en Unix, sempre que funcionin mitjançant una emulació virtual de la plataforma de l’MS Windows. Des del 2005 el Macromedia Dreamweaver és propietat de l’Adobe Systems.
• Amaya: és una eina combinada del W3C composta per un navegador web i una eina d’autor. Qualsevol pàgina web que s’obri pot ser editada immediatament. Permet veure i generar pàgines HTML i XHTML amb fulls d’estil CSS, etc.

Un editor de text/codi font és una aplicació especialitzada en facilitar la tasca d’escriure codi de diferents llenguatges de programació.

Els editors de codi font poden tenir trets específicament dissenyats per simplificar i accelerar l’entrada del codi tals com:

• Realçament de la sintaxi d’un elevat nombre de llenguatges de programació mitjançant colors personalitzables.
• Funció d’autocompletat.
• Eines de cerca i reemplaçament de text mitjançant expressions regulars.
• Integració amb eines de compilació i depuració del codi font.
• Autocompletat d’expressions i funcions reservades de les sintaxis dels llenguatges de programació.
• Creació i edició de macros.

Per a la realització de prototips visuals de la pàgina web fareu servir el programa de dibuix Inkscape. L'Inkscape és:

un sofisticat programa de dibuix basats en gràfics vectorials que fa servir el format estàndard SVG definit pel W3C. (…) Si encara no us heu fet una idea, us podem dir que és un programa similar als programes de dibuix propietaris CorelDraw™ o Adobe FreeHand™, però l'Inkscape és lliure i gratuït. La interfície d'usuari és molt intuïtiva, el programa és molt potent i estable, i el seu ritme de desenvolupament és trepidant.¹⁾

Podeu descarregar l'Inkscape a la pàgina wiki del Rebost de Softcatalà: http://www.softcatala.org/wiki/Inkscape

El W3C ofereix un servei gratuït de validació de documents HTML, XHTML i CSS. Aquest servei conegut com a Markup Validation Service inclou tres variants:

• Per mitjà d’una URI vàlida.
• Pujant un arxiu.
• Entrada directa del codi a validar.

Validar correctament els documents HTML i XHTML és bàsic. Una validació correcta permet als navegadors interpretar adequadament el document. Un document no vàlid comporta errors de sintaxi que repercuteixen tant en el seu significat (la part semàntica del document) como a la seva presentació i visualització (un document no vàlid presentarà problemes al full d’estil associat).

El validador llegeix el codi del document i localitza els possibles errors, sempre tenint com a referència les especificacions del DOCTYPE associat al document.

Quan la validació és correcta, apareix el següent missatge:

Si la validació no és correcta, apareix el següent missatge d’error seguit de la llista d’errors del document.

Encara que l’informe està en anglès, no és difícil desxifrar quin és l’origen de cada error, ja que especifica la línia i la columna de l’origen de cada un d’ells i mostra un fragment del codi al que apunta.

Si el document ha passat amb èxit la validació, el W3C ofereix un fragment de codi XHTML que mostra la icona de validació del document.

El W3C també disposa d’una utilitat web gratuïta que permet validar la sintaxi dels fulls d’estil (CSS) associades als documents HTML/XHTML. Inclou igualment tres variants:

• Mitjançant una URI vàlida
• Pujant un arxiu
• Entrada directa

L’eXaminator és una eina gratuïta que permet avaluar l’accessibilitat de les pàgines web seguint les Pautes d’Accessibilitat al Contingut a la Web 1.0 (WCAG 1.0). L’eXaminator avalua de l’1 al 10 el resultat de l’anàlisi, sent el 10 un indicador d’un resultat excel·lent.

L’eXaminator ofereix un resultat analític a més de la puntuació de l’1 al 10. En el següent exemple s’ha fet l’anàlisi d’una pàgina personal d’un usuari de la XTEC. Un cop introduïda la URL al formulari i analitzada la pàgina, s’ha mostrat el següent resultat:

És important remarcar que l’eXaminator fa un procés previ de verificació del codi HTML del document i del codi CSS associat. Numèricament, el resultat obtingut a l’exemple és un aprovat, un cinc:

L’eXaminator fa l'advertiment:
"La pàgina cumple parcialmente con los principios generales del diseño accesible recomendados por las Pautas de Accesibilidad pero hay incorrecciones que se deberán revisar".
Per això ofereix la possibilitat de consultar l’informe analític de l’examinator. Prement aquest botó s’obté un informe detallat sobre quines són les referències d'accessibilitat que són correctes, quines són millorables i quines incorrectes que l’eXaminator agrupa en tres apartats:

• Barreres a l’accessibilitat
• Obstacles a la accessibilitat
• Sorolls a l'accessibilitat

https://addons.mozilla.org/ca/firefox/addon/60

El Firebug és un potent complement per al navegador Mozilla Firefox que permet avaluar i supervisar el CSS, l’HTML i les accions per part de codi Javascript a temps real.

Instal·lar el complement Firebug al navegador Mozilla Firefox és molt senzill. Aneu a la pàgina oficial de Firebug²⁾ i feu clic sobre la gran icona taronja que trobareu a la part dreta de la pàgina. Una altra possiblitat és descarregar i instal·lar el Firebug des del repositori de complements (Add-ons) del Mozilla Firefox.

Durant el procés d’instal·lació apareixerà la següent pantalla on es demana autorització per instal·lar el Firebug com a complement del Mozilla Firefox. Confirmeu l’operació i reinicieu el navegador per activar-lo.

• Obrir el Firebug: Premeu la tecla F12 o la icona icona d’obrir/tancar ubicada en el marc inferior del navegador.
• Tancar el Firebug: Premeu la tecla F12 o la icona icona d’obrir/tancar ubicada en el marc inferior del navegador. També podeu tancar el Firebug fent clic sobre la icona de tancar situada a la cantonada superior dreta de la finestra del complement.
• Obrir el Firebug en una finestra separada del navegador: Un cop obert el Firebug feu clic sobre la icona icona de finestra nova del complement ubicada a la cantonada superior dreta o bé premeu Ctrl+F12.

• Pestanya Console: Conté la línia d’ordres i instruccions d’avaluació, depuració i edició al vol de codi Javascript.
• Pestanya HTML: Mostra el codi HTML indentat i en forma d’arbre de nodes, que es poden desplegar, tancar i editar al vol.
• Pestanya CSS: Inspecciona els fulls d’estil associats al document. Permet seleccionar d'entre els diferents fulls d’estil associats al document (per mitjà de l’opció Edit) i modificar-ne el contingut al vol.
• Pestanya Script: Mostra els arxius de codi Javascript associats al document.
• Pestanya DOM: Mostra tots els objectes del document i les seves propietats.
• Pestanya Net: Mostra els temps de descàrrega de cada element associat a la pàgina. És enormement útil per a avaluar i depurar procediments AJAX.