Introducció al CSS
Des de ja fa algun temps estem acostumats a veure tendències de disseny web plasmades a la web d'una manera molt elaborada, aquesta impressió visual pot resultar molt atractiva per a la vista (i normalment només si empres Internet Explorer i un sistema Hasefroch) però extremadament "perilloses" pels navegadors que no siguin IE, com ara Mozilla, Opera, Konqueror ... entre d'altres. En la majoria de casos es degut a l'utilització equivocada d'elements a l'hora de l'estructuració i maquetació de les planes web, utilitzant recursos unicament disponibles per als usuaris de Hasefroch.
Les fulles d'estil, CSS (Cascade Style Sheets), és un llenguatge creat per a definir els estils per als nostres "<tags>" d'HTML o XHTML. Així doncs podem definir tota una sèrie de característiques que aporten contingut visual a la plana, com ara el tipus de fonts, el seu tamany, colors, formularis, enllaços així com blocs d'informació. I podem fer-ho a la mateixa plana HTML (o XHTML) o en un arxiu apart que podem incloure fàcil i ràpidament dins el nostre arxiu HTML. CSS, i concretament, CSS 2.0 té un munt de possibilitats per a gaudir d'un disseny altament qualificat i d'una accesibilitat més elaborada.
Des del W3C (World Wide Web Consortium, el consorci encarregat de llençar a la xarxa els estàndards HTML, XHTML i CSS entre d'altres) escriu en contra d'emprar les taules per a distribuir les pàgines, ja que afirmen que les taules només han de ser utilitzades per a mostrar dades tabulars. Així doncs recomana obertament l'l'ús del CSS i en concret dels elements "<div>", "<span>" o "<style>", per crear una web una mica més senzilla o menys carregada d'elements extranys però que sigui visible des de qualsevol navegador (inclosos els navegadors en mode text com ara Lynx o Links). La principal raó a l'hora d'estructurar una plana web i a l'hora de dissenyar amb taules és el temps de processament que necessita el nostre navegador per a "dibuixar" tot aquest HTML. No sols les nostres pàgines seràn més portables, també més ràpides.
La principal aventatja d'emprar CSS és a més la facilitat en quant a l'hora de canviar el disseny ja fet, ja que permet definir tots els estils a un arxiu apart, amb el que tindrem més facilitats a l'hora de realitzar canvis en la nostra estructuració, ja siguin colors o tamanys. ÿs important recordar a aquestes alçades que amb l'implementació de fulles d'estil a les nostres pàgines els hi estem donant estandarització i a la vegada una accesibilitat més àmplia.
Per a començar a jugar en aquest món no necesitem massa cosa, simplement un editor de text i un navegador en el qual previsualitzar el disseny abans de llençar-ho per a tots els usuaris, també existeixen programes comunment coneguts com a WYSIWYG ("What You See Is What You Get" - "allò que veus és el que aconsegueixes") que faciliten molt més la feina de fer les etiquetes de CSS. També és important mencionar que amb CSS podem canviar els atributs propis d'HTML com poden ser "<a>" "<p>" o "<body>", entre d'altres, o crear-ne estils propis i fins i tot "classes" pròpies i aixi gaudir de més opcions pels usuaris.
Així que finalment, podem parlar de CSS (Cascade Style Sheets) com una alternativa interessant a l'hora d'una estructuració estandaritzada de webs, amb interesants trucs i una atracció visual molt efectiva a l'hora que simplificada. Tanmateix sembla que és un bon començament a que les coses siguin emprades per allò que van ser dissenyades. Cada cop existeixen més recursos a internet per a que l'usuari aprengui amb facilitat tècniques més que necessàries en els camins actuals del disseny Web.
Per concluir l'article també comentar que és important començar a usar XHTML ja que estandaritza molt més la web, fent seguir unes etiquetes precises i comuns en molts aspectes, mesclant conceptes com son el XML (eXtensible Markup Language) i HTML (HyperText Markup Language), utilitzant les etiquetes HTML i compatibilitzant-les totalment al sistema XML de mode que compleixin un estàndard més elaborat.
Us recomano algunes webs útils per l'ús de CSS:
· Especificació Oficial CSS de W3C (en anglès)
· Estructura sense taules HOWTO (en anglès)
· Tècniques HTML per l'accesibilitat a contingut web 1.0 (en anglès)
· Guia Bàsica de CSS + Exemples(es comenta per què usar CSS i no taules - en castellà)
· W3Schools (pàgina amb un tutorial molt bo, així com exemples i tests sobre CSS - en anglès)
· Dissenys basats en CSS (en anglès)
· Més exemples en CSS 2.0 (en anglès)
· Open Source Web Designs (dissenys opensource - en anglès)
Espero que aquest article hagi aclarit alguns conceptes sobre les fulles d'estil i que us hagi motivat a emprar-les a les vostres planes web i així conseguir que internet sigui una mica més accesible per a tots.
Podeu emprar els titulars de PUNTBARRA mitjançant aquesta sortida RSS.
Aquesta pàgina funciona amb Drupal.
Comentaris
Comentaris...
Hola sirk,
Bé, estic força dacord amb el que comentes, de totes maneres, hi ha un punt en el que aquest tema dels CSS hem deixa una mica fora de joc. I es la mania de intentar separar sempre el contingut del diseny. M'explico avans que ningú no s'espanti.
Aném a veure que penso sobre el tema :
1) Els CSS no solucionen la tasca al 100% de separar contingut de disseny.
2) No te cap sentit separar contingut de disseny, sobretot en els casos en que es dona més pes al disseny que al contingut. Entenc que per un weblog els CSS son la bomba, pero ... per altres tipus de pàgines... ???
3) No vull defensar a Microxof, pero no va se netscape la primera en trencar estandards???
4) Respecte a CSS 2.0. Despertem!!! Fins que Microxof no inclogui CSS 2.0 al Exploiter, es mes perillos usar CSS 2.0 que imprimir un diari amb tinta transparent.
5) Reflexió personal... No ens obsessionem, quan només existien martells el tio que va inventar la maquina de foradar va fer una gran proesa, pero, intenta clavar un clau amb una maquina de foradar... (Tot son eines, pero hi ha casos en que el CSS no es la millor solució, jo m'hi he trobat).
Envia un nou comentari