A estas alturas de la película, todavía hay gente que usa HTML mal y hace cosas como escribirlo todo con etiquetas <div> en vez de usar las etiquetas semánticas que existen. Esto siempre ocurrirá, porque siempre habrá gente nueva que aprenda HTML y lo aprenda mal. Para los que estén en esta situación, un par de páginas en las que explican qué es y para qué sirve el etiquetado semántico:
Tag: HTML
Referencia de HTML
¿Cuál es el mejor: HTML, XHTML, HTML5?
[kml_flashembed movie=”http://www.youtube.com/v/vay6y6exqfg” width=”560″ height=”315″ wmode=”transparent” /]
Historia de HTML
[kml_flashembed movie=”http://www.youtube.com/v/EEttUcYhv30″ width=”560″ height=”315″ wmode=”transparent” /]
La divitis no ha sido erradicada
Hace tiempo que escribí sobre este tema, Divitis: abuso de div y span. Desgraciadamente, es una enfermedad que no ha sido erradicada y de vez en cuando aparece.
Hace unas semanas, un alumno del curso iDESWEB me dijo que no había explicado cómo usar la etiqueta <div>. Le recomendé que leyera el siguiente artículo, Divitis: what it is, and how to cure it.
No seas vago y utiliza la etiqueta label
Muy directo el pequeño artículo Don’t be lazy, use HTML labels correctly, en el que se critica que no se use la etiqueta <label> para mejorar la usabilidad de los formularios web.
Bootsnipp
Bootsnipp es un conjunto de elementos de diseño y de código para Twitter Bootstrap basados en HTML, CSS y jQuery.
Por ejemplo, a continuación tenemos un ejemplo de fragmento de código para representar lecciones:
Y un ejemplo de interfaz similar al de Gmail:
Lo que va a venir de HTML y CSS
…quizás, porque luego puede ser que nunca llegue.
En el artículo 2012 into 2013: web standards in perspective, nos cuentan lo último de lo último de HTML y CSS en lo que se está trabajando.
Como de costumbre, ahora falta que todos los navegadores lo soporten correctamente, de la misma forma, y entonces sí que valdrá la pena usarlo.
Las mejores universidades de Estados Unidos también cometen errores
Acabo de encontrar la infografía Best Education Sites, en la que podemos encontrar mucha información sobre la presencial en la Web de las universidades de Estados Unidos más importantes.
Me ha llamado la atención un par de datos que ofrece sobre los errores que tienen las páginas web. La University of Phoenix, una universidad online con más de 200 centros distribuidos por todo el mundo, tiene una página principal con casi 200 errores de CSS:
Por otro lado, entre las 10 principales escuelas de ingeniería hay algunas con numerosos errores en su página principal, y destaca Caltech con 51 errores, demasiados errores para una universidad en la que enseñan a hacer cohetes espaciales:
Nota: en la infografía se indica que la fecha de realización fue el año 2011, así que las versiones actuales de estos sitios web puede ser que ya no presenten estos errores.
Referencia de entidades de HTML
En la página web HTML Entity Reference for Common Characters podemos encontrar una lista de las entidades de HTML que más nos pueden interesar. Existen otras páginas en las que podemos encontrar listas más largas, como List of XML and HTML character entity references, pero muchas veces se tarda mucho tiempo en encontrar aquellos caracteres que estamos buscando.
Aquí tenemos la lista:
| Nombre | Carácter | Entidad | Numérico |
|---|---|---|---|
| Copyright | © | © | © |
| Registered | ® | ® | ® |
| Trademark | ™ | ™ | ™ |
| Curly Open Double Quote | “ | “ | “ |
| Curly Closed Double Quote | ” | ” | ” |
| Curly Open Single Quote | ‘ | ‘ | ‘ |
| Curly Closed Single Quote | ’ | ’ | ’ |
| Big Bullet/Dot | • | • | • |
| Small Bullet/Dot | · | · | · |
| Square Dot | ⋅ | ⋅ | ⋅ |
| En Dash | – | – | – |
| Em Dash | — | — | — |
| Cents | ¢ | ¢ | ¢ |
| Pound (Currency) | £ | £ | £ |
| Euro (Currency) | € | € | € |
| Not Equal To | ≠ | ≠ | ≠ |
| Half (Fraction) | ½ | ½ | ½ |
| Quarter (Fraction) | ¼ | ¼ | ¼ |
| Three-Quarters (Fraction) | ¾ | ¾ | ¾ |
| Degrees | ° | ° | ° |
| Left Arrow | ← | ← | ← |
| Right Arrow | → | → | → |
| Up Arrow | ↑ | ↑ | ↑ |
| Down Arrow | ↓ | ↓ | ↓ |
| Lowercase “e”, Grave Accent | è | è | è |
| Lowercase “e”, Acute Accent | é | é | é |
| Lowercase “c”, Cedilla | ç | ç | ç |
| Ellipse | … | … | … |
| Triangle Down | ▼ | (none) | ▼ |
| Triangle Up | ▲ | (none) | ▲ |
| Triangle Left | ◀ | (none) | ◀ |
| Triangle Right | ▶ | (none) | ▶ |
| Nombre | Carácter | Entidad | Numérico |