DailyCosas 2.0

Una cosa que me preocupa sobremanera es lograr un marcado correcto en las webs que realizo (este blog tiene “XHTML valido, mientras no metamos la pata”). Lo malo es que cuando voy a insertar un video de YouTube o Google video se me facilita un código en sus web que no es válido. Así que toca trabajar un poco mas allá (y si, muchas veces la pereza hace que no lo haga).

La solución que normalmente aplico es la doble definición: embed y object. Anidadas y con algún parámetro repetido.

Hay un artículo de Noviembre 2002 (recalco la fecha para que se vea que de esto hace mucho que se lleva hablando) en el que hacen la solución del twice cooked (doblemente cocinado): A List Apart: Flash Satay: Embedding Flash While Supporting Standards.

Hace poco sacaron un artículo fantástico: Flash Embedding Cage Match que resume la caótica situación de la incrustación de flash para los distintos navegadores.

Hace un tiempo vi en Microsiervos que pusieron las cadenas maravillosas que has de utilizar de ahora en adelante para ser un niño bueno con código válido al incrustar tus videos:

Código XHTML para YouTube
<object type="application/x-shockwave-flash" style="width:425px;height:350px" data="http://www.youtube.com/v/xxxxxxxxxx"><param name="movie" value="http://www.youtube.com/v/xxxxxxxxxx" /></object>

Código XHTML para Google Video
<object width="400" height="326" type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=xxxxxxxxxx" ><param name="wmode" value="transparent" /></object>

Microsiervos también nos ofrece una manera de que los que visitan desde dispositivos portátiles con navegadores que no pueden ver flash (pero con programas externos que si lo permite), como los iPhone/iPod touch puedan ver también los videos: añadir un enlace dentro de del <object>

Bola Extra: Reflexiones paralelas sobre la incrustación de videos

YouTube es el rey de los videos incrustados, nadie lo duda. Por eso Google lo compró. Pero aconsejo leer una interesante reflexión sobre que pasaría si YouTube desapareciese [Noticiasdot.com]. Tengamos en cuenta que todos estos videos incrustados, que tanto aportan a nuestros artículos desaparecerían.

Una solución, parcial, es utilizar sustitutos a YouTube, pero aún así el control final de los videos sería de estos servicios y no del que los publique.

Hoy quiero hablar de cosas que un usuario normal no ve, pero que cualquier persona con alguna discapacidad agradece tener a mano para reforzar por otro lado.

alt de una imagen

Puede parecer una tontería (incluso hay gente que se dedica a dejar mensajes jococos), pero este texto alternativo no solo ayuda a personas que no ven sepan que contiene la imagen y así no se pierdan la información completa, sino que es una pieza calve para que la imagen sea legible para buscadores.
Mas info: W3Schools – IMG ALT atribute

title de un a (anchor, enlace)

Sinceramente, este lo uso mas bien poco, ya que delego la potencia del anchor (enlace) en el texto que dejo marcado.
Mas info: W3Schools – TITLE atribute

label de un formulario

Seamos sinceros, puede resultar engorroso poner bien los labels, pero un poquito de esfuerzo ayuda a mucha gente a no encontrarse una barrera.
Mas info: W3Schools – <LABEL> tag

[Inspirado por: ElPais]
Esta mujer sabe lo que es XHTML y CSS, y si no haces tu web siguiendo los estándares no tienes ninguna oportunidad con ella.

Larissa Meek, después de pasar por Miss USA 2001 representando a Missouri [YouTube 3:59], quedando finalista, se recicló de diseñadora 3D en diseñadora web, comenzando por el diseño flash, pero pronto se dio cuenta que había que cumplir estándares y hacer las webs accesibles. Trabaja actualmente para Agencynet

Aunque por ahí en medio también participó en un reality show llamado Average Joe, donde debía elegir a un hombre entre muchos candidatos. Y, bueno, también es modelo.

Podeis seguirla en su blog en LarissaMeek.com o ver su ficha de modelo en Bikini.com.

Pues nada, chicos, si haceis webs accesibles a lo mejor teneis una oportunidad con ella y chicas, si diseñais webs respetando los estándares quizás termineis estando tan lozanas como Larissa Meek.

BOLA EXTRA: Macenstein’s chick of the month

Si quereis alegraros la vista conociendo a preciosas usuarias de productos Apple, pasaros por MacEnstein y babead malditos!

Los menús son una parte muy vistosa de una web, y mientras hay muchos que confunden vistoso con “enmarañadisimo conjunto de imágenes y tablas sin sentido” aqui vamos a ver tres consejillos que harán vuestros menús algo bonito, personal y accesible.

Ahora que hemos iniciado una pequeña (mu pequeñita) remodelación de DailyCosas, me ha tocado pelearme un poquito con el CSS (el WordPress es una gozada para editar plantillas e instalar plugins) y me he encontrado de frente con los problemas que tiene IExplorer para dibujar lo que dice el CSS.

Y mira que no me gusta tirar de los llamados “ie hacks”, cosas raras que hay que escribir en medio del CSS para que el Internet Explorer haga lo que debería hacer si hubiesen interpretado la especificación como es debido. Pero bueno, si alguien quiere hacer su web con CSS (que es lo que debe: dejar la presentación aislada del contenido), se tiene que acomodar a que mas del 80% del mercado usa eso que llaman navegador, aunque a mi me parece una barca sin remos que va a la deriva.

Recordemos el primer axioma de la accesibilidad web: el estilo no importa.

A la hora de enfrentarse con una web, los diseñadores que entraban en el mundo de la web hace unos años se veían maniatados por un código infernal que no era tan cómodo como esos programas de maquetación que usaban. Así, cuando la web llamo la atención de los que tenían el dinero, contrataron a diseñadores y les dijeron que querían lo mismo que hacian en papel o en las aplicaciones…. y comenzaron a usar lo mas rígido que tenían a mano y que les permitía fijar los contenidos como los habían diseñado: TABLAS.
Bueno, también había algunos bestias que usaban TABLAS + imagenes (cortadas en trocitos), lo cual no tiene mucha lógica… o ¿que código alt le pondrías a cada imagen?)
Lo peor de todo es que aun se diseña mucho de esta manera… tomemos unas nociones del tema y no repitamos este error.

Esta lección va dedicada a la gente de Tableless (sin tablas), que nos van avisando de la gente que ha dejado el lado oscuro.

La primera idea que tenemos que tener cuando surtimos de contenido a una página web es que no nos importa como se presentará finalmente en pantalla. Lo mas importante es ser simples y pensar de manera ordenada que tag representa mejor la idea que queremos desarrollar.

“El HTML nació como un lenguaje de marcado, no como un lenguaje de presentación de contenidos, lo que pasó a lo largo de su vida es que las necesidades de la web crecieron de manera exponencial, arrollando y desvirtuando el HTML a su paso.” (Extraído de XHTML2 Comentarios sobre el borrador)