Dimarts 18 setembre 2012 per Sílvia Vila Brustenga
Recursos web: iniciant-nos a l’HTML5 i al CSS3
HTML5 (HyperText Markup Language, cinquena versió) i CSS3 (Cascading Style Sheets, tercera versió), dues tecnologies que ens facilitaran molt la vida als maquetadors i desenvolupadors web. Parlo en futur, perquè tot i que ja es comença a implementar, els navegadors encara no estan totalment preparats per reconèixe’ls (és per això que es recomana actualitzar el navegador per tenir l’última versió). La mateixa W3C indica que està en mode experimental.
Què són i quines diferències ofereixen respecte la seva versió anterior?
- HTML5: és el codi que s’utilitza per presentar la informació al nostre navegador web i poder-hi interactuar. A diferència de la seva versió anterior, implementa noves etiquetes que s’ajusten a la web semàntica. És a dir, en comptes d’utilizar <div> a tots els contenidors, tenim la possibilitat de definir-ho amb <head>, <footer>, <nav>… Una altra novetat important, és l’aparició de les etiquetes <video> i <audio>, pel que ens estalviarem crear l'<embed> i l'<object> i disminuirem considerablement la quantitat de memòria utilitzada.
- CSS3: la part gràfica del lloc és definida per aquesta tecnologia. Les principals millores que ens aporta aquesta versió són:
- Animacions
- Ombra als elements
- Requadres rodons
- Web Fonts
Després d’aquesta breu introducció, no et perdis The Expressive Web, on trobaràs els efectes que es poden fer unint aquestes dues tecnologies i la compatibilitat d’aquestes suportada en els navegadors.
Disseny web utilitzant HTML5 i CSS3
I a més…
- HTML5 Test: Per saber quins elements de l’HTML5 soporta el teu navegador
- CSS3 Generator: Et genera codi CSS3 indicant què necessites
- Tutorial: Guia definitiva de les animacions i transicions
- Guia d’ús HTML5: Llistat etiquetes
- Demo d’un joc HTML5 i CSS3: Guanyador concurs No Javascript de Mozilla Developer Network