Tècniques CSS de sempre

En Jordi em passa un post de noupe força interessant que recull tècniques CSS de tota la vida. De moment només han publicat la primera part de l’article i inclou:

  • CSS Sprites
  • CSS Rounded Corners
  • Image Replacements techniques
  • Sliding Doors
  • Image Text Wrap techniques
  • Equal Height techniques
  • Turning a list into a navigation bar
  • Marking headlines with CSS
  • CSS Shadows techniques
  • CSS Transparency
  • Various link techniques

Esperarem les properes parts a veure què hi ha de nou 😉

10 tips per fer pàgines accessibles

El W3C dona 10 tips per fer pàgines accessibles:

  1. Images & animations: Use the
    alt attribute to describe the function of each visual.
  2. Image maps. Use the client-side map and text for hotspots.
  3. Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
  4. Hypertext links. Use text that makes sense when read out of context. For example, avoid “click here.”
  5. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  6. Graphs & charts. Summarize or use the longdesc attribute.
  7. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
  8. Frames. Use the noframes element and meaningful titles.
  9. Tables. Make line-by-line reading sensible. Summarize.
  10. Check your work.
    Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

Una pàgina que no satisfà un d’aquests tips no segueix totes les recomanacions del W3C pel que fa a l’accessibilitat web.

Accessibilitat web per a l’Administració Pública

Interessant sessió la que munta Infonomía per entendre l’accessibilitat web:

Objetivos

  • Comprender el por qué de una web accesible.
  • Ver ejemplos y problemas de la implementación de las pautas exigidas a los Organismos Públicos en su presencia en internet.
  • Comprender cómo intervienen el diseño gráfico, la maquetación y la usabilidad en el momento de plantear una web accesible.

A quién interesa

  • A personal de la Administración Pública relacionada con proyectos web.
  • A consultores de usabilidad.
  • A diseñadores gráficos y de interacción.
  • A maquetadores web.

Microformat VoteLinks o el motor del Barça – Madrid

El post de divendres en el que marcava un espectacular gol contra el Madrid no sembla que tingui res d’especial, però és ben al contrari.

Es tracta d’un exemple de Microformat, en particular del VoteLink, que va muntar per a les jornades ‘Microformatos en acción’ de finals d’octubre.

Tal i com comenta en Manu detalladament, es tracta d’un tros de codi XHTML que conté dos enllaços:

<a rev="vote-for" href="http://fcbarcelona.com">Sóc el 9 del Barça</a>
i
<a title="Clica per a fer la teva jugada" href="http://simplelogica.net/mfutbol/arbitro.php">
¡i faig un col contra el Madrid!</a>

El primer, tot i està formatat per a passar desapercebut, conté la informació de la jugada rev="vote-for" (gol), el segon activa un procés al servidor de Simplelogica que visitarà el post i recollirà el resultat de la jugada.

Tot plegat un petit detall del que permet el següent pas cap a la web semàntica.

[tags]Microformats, VoteLink[/tags]

Formularis amb CSS

Quelcom del més fragós quan maquetes un seti són els formularis i els pertinents avisos de validació. Via Ajaxian m’arriba un post en forma de recull de diferents maneres de dur a terme aquesta tasca.

Els articles recollits són:

[tags]CSS, Forms[/tags]

Web del Departament de Cultura: XHTMLCAT 2.0

Seguint amb el I+D català, la nova web del Departament de Cultura incorpora grans novetats al codi XHTML, com:


<page:include-page urlContext="/vgn-ext-templating" pagePath="/in-line/contentRegion.jsp"/>

Val la pena mirar-se a fons el codi font del web per veure els esforços que fa la Generalitat de Catalunya per reinventar la roda. Ànims!

[tags]Generalitat, XHTML[/tags]

Nou navegador de Microsoft, nou full d’estils

Sort que Microsoft només treu navegadors cada 5 anys, si fessin actualitzacions més sovint hauríem de retocar els nostres CSS cada dos per tres!

I és que amb cada versió nova de Internet Explorer toca afegir hacks o porqueria al CSS estàndard i suportat per la resta de navegadors.Així doncs, avui he afegit el tercer full d’estil al meu blog:

  1. Full estàndard: style.css
  2. Full per IE < 7: style_ie.css
  3. Full per IE7: style_ie7.css

I tot per aconseguir que amb IE el blog es vegi de forma decent, ja que hi ha coses que directament desestimo que es vegin bé amb IE.

Per cert, és correcte dir fulla d’estils o hauria de ser full d’estils?: el correcte és full d’estils 😉

Treball i Indústria: nova web, nou llenguatge de marcatge

Qui diu que a Catalunya no invertim amb I+D?

La gent de Treball i Indústria anuncien el seu nou web, dins del web de Gencat.cat el super-site accessible de la Generalitat, una mostra important de la inversió en I+D al nostre país.

I és que la gent de Treball i Indústria ha decidit que els llenguatges de marcatge del W3C no són prou bons i ha desenvolupat el seu propi XHTMLCAT, on podem trobar l’atribut false, per exemple:


<li>
<a href="/treballiindustria/departament/conseller/index.html" title="Conseller de Treball i Indústria" class="enlacecaja_nivell3"
false >Conseller de Treball i Indústria</a> </li>

Llàstima que no he trobat la documentació on explica el funcionament d’aquest nou element.

Així mateix, també han decidit que els identificadors únics dels elements (id), no cal que siguin únics, de manera que tenim elements amb personalitats duals o alguna cosa així.

De moment només he pogut dedicar temps a examinar la home del seti, però segur que en altres pàgines podem veure més dades sobre aquest esforç en el desenvolupament del XHTMLCAT, el nou llenguatge de marcatge de la Generalitat de Catalunya.