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
en certa manera tens raó
Altres tipus de pàgines potser el mateix, albert, vull dir, una empresa que hagi de llistar productes (com una mena de catalog) en línia o una pàgina que es dediqui als articles llargs ... potser tens la seva estructuració en un CSS i canviar el disseny i canviar la vista dels productes o dels articles és un gran pas que es pot més ràpidament.
IE sí que suporta CSS 2.0, potser no del tot, pero en moltes coses les suporta. Parlo del IE 6.x, ja que el 5.0 i 5.5 donaven problemes amb el tema "margin".
De totes maneres, el CSS per mi ha estat un invent molt útil i aplicable a totes les pàgines o gairebé totes, és una gran eina que encara que no l'utilitzem nosaltres podria esser molt interesant aprendre ja que moltíssimes pàgines d'internet utilitzen aquest sistema i seria bo saber el perquè i el com ho fan d'una forma o altre.
En quant deia als "tips" de disseny que només funcionen a Windows i IE em referia a les "chromeless windows" obra de microbians o algunes especificacions de JavaScript que només funcionen amb l'IE, a més, en quant a la maquetació ens trobem pàgines que visualitzades amb IE queden correctes, en canvi a Mozilla o Opera ... no es veuen massa bé ...
Envia un nou comentari