Com a navegador Firefox, per descomptat, amb els següents complements:

• Web Developer: Imprescindible! Si no la coneixes, a què esperes?
• Firebug: També imprescindible
  • Firecookie: Una extensió per gestionar les cookies
  • YSlow: Per treballar temes de rendiment a la part del client
• ColorZilla: Captura colors de qualsevol pàgina
• Screen grab!: Captures de pantalles en 2 clicks
• SearchStatus: Temes de SEO

Com a IDE, Eclipse, amb els següents plugins:

• PHPEclipse: Per a treballar amb PHP amb Eclipse. Si no et convenç pots provar el PDT com a alternativa.
• JSEclipse: Per treballar amb JS. Aquest plugin l’ha comprat Adobe, i ara és de pagament. Podeu descarregar-ne una versió anterior i gratuïta.

Per treballar amb el MySQL:

• MySQL GIU Tools: Eines gràfiques per a gestionar un servidor MySQL
• MySQL Workbench: Eina visual per a dissenyar bases de dades
• Navicat (de pagament): Client gràfic per a MySQL amb multitud de funcionalitats

Com a servidor local MoWeS Portable (instal·lació de Apache, MySQL, PHP i d’altres de manera senzilla).

Editors de codi:

• TopStyle (de pagament): Editor de CSS i HTML. El millor editor de CSS que he trobat fins al moment. Les noves versions les podeu trobar al web de l’autor.
• Notepad++: Un substitut molt potent per al Notepad

Altres eines:

• KeePass Password Safe: Gestor de contrasenyes
• WinSCP: Client FTP. Molt interessant la integració amb PuTTy.
• Multiple IEs: Per desgràcia encara s’han de comprovar les pàgines amb versions antigues de Internet Explorer

Soc l’únic que està tenint aquest problemes o es que se m’ha passat alguna cosa per alt?

• Aplicando la programación a finanzas [Via Refactoring]
• UTF-8 tips
• Arquitectura de la información
• Wicked Worn + Bulletproof Liquid [Via Simplebits]
• Guia de Referència CSS 2.1 [Via a.css]
• Long tail: la larga cola de un nuevo modelo de negocio
• Pon un controlador en tus desarrollos web
• In Search of the Holy Grail
• Expresiones regulares
• Serie: The I.T. Crowd [Via microsiervos]
• Plantilla para convertir Atom a RSS 1.0
• Web Developer’s Handbook [Via torresburriel]

A partir d’ara aniré guardant aquests enllaços al meu blog de Bloglines, així que si a algú li interessa s’hi pot subscriure.

I seguint la font original també descobreixo devboi, una extensió per Firefox que també té molt bona pinta.

• CSS Swag: Multi-Column Lists: Molt útil, sobretot per muntar una estructura tipus directori.
• Introducing the CSS3 Multi-Column Module: Per posar-nos les dents llargues amb el CSS3 ;)

I això és tot amics!

Així que vaig decidir intentar fer quelcom útil a partir d’aquestes dades i alhora aprendre una mica de XSL. El resultat final és aquest: TERMCAT, de XML a XHTML (770 Kb).

A continuació poso a la vostra disposició els diferents fitxers que he utilitzat per a transformar el XML del TERMCAT a XHTML:

• Dades en XML (idèntic al proporcionat pel TERMCAT però sense Doctype, ja que donava problemes amb l’intèrpret de XSL)
• Full d’estils XSL
• Script en PHP que crida a l’intèrpret de XSL
• Full d’estils CSS

Si us interessa el XSL podeu trobar més informació a Recursos per a iniciar-se al XSL.

Tot i ser una beta m’ha sorprès el seu bon funcionament. Les millores en les funcionalitats que he vist a simple vista són que:

• La barra de progrés s’inclou dins la barra de direccions per defecte.
• S’eliminen tot tipus de barres inútils i només es mantenen la barra de les pestanyes i la de direccions.
• Notificació de rss en les webs que tinguin aquest servei, amb possibilitat de subscripció inmediata mitjançant el lector integrat de feeds de l’Opera.
• Ja es pot utilitzar el Gmail webmail i espero que el POP també funcioni.
• Opció d’adaptar a la pantalla, per les webs que tinguin scroll horitzontal.
• Separació de les utilitats de CSS i de les imatges.
• Accepta comandes per veu

També hi ha coses que crec que han empitjorat per a un usuari avançat, però millorat per a un usuari mig o baix. Es tracta de l’addició d’un click més per a navegar sense imatges, deshabilitar el CSS i el Zoom, encara que el zoom es pot canviar via combinació de tecles i ratolí.

En general estic molt content dels canvis que han aportat, l’accessibilitat i usabililtat l’han tornat a millorar i es més facil daptar-se als canvis del opera 7.54 al 8 que del 6 al 7.

Fora de tema: M’ha sorprès veure que hi havia el Mozilla instalat, amb la seva configuració de proxy i tot!! Espero que sigui un indici de canvi, i que a partir d’ara hi hagi una alternativa al internet explorer que no sigui el netscape 4.7 en català. Una de les altres sorpreses dels ordinadors de la UPF es que tenen el FileZilla. I el més sorprenent de tot és que a la UB hi havia ordinadors amb el firefox de serie. Deuen estar madurant les universitats?

1. Introduction
2. Definitions
3. Declaring the language of a page
4. Documents with more than one primary language
5. Declaring language changes in a page
6. Specifying language
7. Specifying the language of a link destination

Per als qui no ho sapigueu, hi ha motius per a especificar l’idioma.

[Via W3C]

El Dreamweaver és una eina molt potent per treballar, però una mala eina per a l’aprenentatge. Després de l’experiència com a professor en un curs de creació de pàgines web utilitzant aquesta eina he pogut comprovar que incita als usuaris novells a utilitzar mètodes i tècniques incorrectes:

• Composició de la pàgina mitjançant taules.
• ??s de l’etiqueta font i d’altres en detriment de les fulles d’estil externes.
• Marcat semanticament incorrecte (per exemple blockquote per sagnar el text).
• Etc.

El procés per corregir tots aquests errors ha resultat força senzill. He basat tot el treball en el home, per després ampliar-ho a la resta del lloc.

Comencem amb el HTML (veure original):

1. Convertir la composició de taules en capes.
2. Millorar la semàntica: utilitzar els hn per marcar els títols, transformar el menú en una llista i eliminar els blockquote utilitzats per sagnar.
3. Eliminar tots els estils en línia i les etiquetes font.

D’aquesta manera comencem a tenir un HTML semanticament correcte, molt més simple i lleuger que l’original. En molts casos és millor començar el document de nou enlloc d’editar l’existent.

Un cop fet això convertim el document a XHTML especificant el corresponent DOCTYPE, creem uns metatags adequats i acabem de polir alguns petits detalls abans de comprovar que el document valida.

Ara doncs ja tenim un XHTML ben format, semanticament correcte i millorat respecte a l’original. Veure resultat.

Només ens queda crear un CSS que torni a donar l’aspecte original al document. Segons anem creant el CSS anirem veient la necessitat d’afegir alguns ID’s i classes al XHTML.

En aquest cas en concret he aprofitat per fer unes petites modificacions al disseny: adaptar-lo per a resolucions de 800×600 o superiors, canviar la tipografia del cos de la pàgina per facilitar-ne la lectura i altres petits detalls (veure CSS resultant).

El resultat ha sigut molt satisfactori:

• El pes del document s’ha reduït en un 58%.
• El codi és més net, la presentació i el contingut estan separats: més fàcil de mantenir.
• El lloc és més accessible i està més preparat per als cercadors.

Després només manca estendre tots els canvis realitzats a la resta del lloc (pot implicar petites modificacions al CSS). Per fer-ho més fàcil, i pensant en el manteniment, he dividit el document en trossos per aprofitar la comanda include de SSI i de pas poder prescindir de les plantilles de Dreamweaver.

Per a fer regles complexes és necesari l’ús de combinatoris com l’espai en blanc, el signe +, i > i/o també l’ús de pseudo-elements com first-child, first-letter…

Els exemples contenen elements, ID’s i classes, que és el que permeten els selectors. Aquests exemples són iguals o similars als que conté paparra.net + evolution.css. Per una informació més completa sobre cada selector visiteu la traducció al castellà de les especificacions del W3C.

Selector de qualsevol element.
*

CSS:
blockquote * {color:red}
Afecta a totes les etiquetes que estiguin dins d’un blockquote

Selector d’un element en concret
X

CSS:
h2 {color:red}
HTML:
<h1> paparra.net </h1>
<p> hola món </p>
<h2> secció musical </h2>

Selector de l’element Y quan és descendent de X
X Y

Seleccionar els h3 que estiguin dins de la ID contingut.
CSS:
#contingut h3{color:red}
HTML:

<div id="menu">
     <div class="reduit">
          <h3> seccions </h3>
     </div>
</div>
<div id="contingut">
     <div class="post">
          <h3> titol </h3>
     </div>
</div>

Selector de l’element Y quan és fill de X
X > Y

Seleccionar els h3 que estiguin dins de la ID contingut.
CSS:
#contingut > h3
HTML:

<div id="menu">
     <div class="reduit">
          <h3> seccions </h3>
     </div>
</div>
<div id="contingut">
     <div class="post">
          <h3> titol </h3>
     </div>
</div>
<div id="contingut">
     <h3> titol </h3>
</div>

Selector d’X quan és el primer fill de l’element pare
X:first-child

CSS:
li:first-child{color:red}
HTML:

<ul>
     <li> dia 1 </li>
     <li>dia 2</li>
     <li>dia 3</li>
     <li>dia 4</li>
</ul>

X:link
X:visited

Afecta als links abans i després de ser pitjats.

Selector d’X quan esta actiu, a sobre i en ús, respectivament.
X:active
X:hover
X:focus

CSS:
fieldset:hover, fieldset:focus {background:red}

Selector de l’element Y adjacent a X
X + Y

CSS:
p + p + p{color:red}
HTML:

<div>
<p> paràgraf 1 </p>
<p> paràgraf 2 </p>
<p> paràgraf 3 </p>
<p> paràgraf 4 </p>
<p> paràgraf 5 </p>
</div>

Selectors dels elements X que tenen la propietat J
X[J]

CSS:
a[hreflang]{color:red}
HTML:

<a href="http..."> link </a>
<a href="http..." hreflang="es-ES"> link </a>

Selector d’aquells elements X que tenen la propietat J amb el valor I
X[J="I"]

CSS:
Input[value="Enviar"]{color:red}
HTML:

<textarea name="cos" cols="30" rows="10"></textarea>
<input name="Submit" type="submit"  value="Enviar" class="boto" />
<input name="guardar" type="checkbox" value="1" checked="checked />

Selector d’aquells elements X que tenen la propietat J i contenen la paraula I en el valor i separat per espais.
X[J~="I"]

CSS:
table[summary~="publicats"]{color:red}
HTML:
<table cellpadding="0" cellspacing="0" summary="Recull de tots els posts publicats desde la creació de paparra.net">

Selector d’aquells elements X que tenen la propietat J amb un valor que comença per K
X[J|="K"]

CSS:
a:hover[hreflang|="es"]{background:red}
HTML:
<a href="http..." hreflang="es-ES"> link </a>