HTML 5

HTML 5: cómo estructurar, ahora, una página

Hace unos días os explicaba algunos de los cambios genéricos en el HTML 5, y después cómo ha de ser la cabecera del sitio. Pero si una cosa ha cambiado mucho en cuando al diseño de las distintas páginas del sitio es la introducción de lo que se puede llamar «los tags de la estructura web». Hace unos 10 años, cuando se quería hacer una página, te podías plantear el uso de los frames que eran la forma más sencilla de no tener que repetir y repetir infinidad de veces el mismo código. Con la entrada de los lenguajes de programación esto comenzó a variar y se usaban tablas para dar formato al sitio… La aparición de los CSS hizo que los div se convirtieran en la mejor … Leer más

HTML 5: cómo es la cabecera de una página

Hoy comienzo un repaso de las nuevas etiquetas del HTML 5, aunque también hablaré, claro está de las etiquetas que ya existen, y si han cambiado o no con respecto a las versiones anteriores. Y como no me quiero enrollar mucho, porque no es lo que toca, voy a empezar con algunos de estos tags… doctype Para empezar cualquier página toca el doctype. La verdad es que históricamente este elemento nunca ha tenido un buen acompañamiento, ya que había que indicarle algunos parámetros y versiones que normalmente nunca se ajustaban a la realidad. Ahora, con el HTML 5 esto queda reducido a una única opción muy simple: <!DOCTYPE HTML> Y ya está… no hay que indicar si es HTML 4, XHTML, si es estricto, ni versión ni nada … Leer más

HTML 5: atributos globales

Antes de empezar a hablar de las etiquetas en el HTML 5, hay que tener presente una serie de elementos globales que sirven para la gran mayoría de etiquetas y que hay que tener en cuenta a la hora de comenzar a desarrollar, sobre todo por la gran posibilidades de acción que nos permiten. Estos elementos que os comentaré ahora son atributos de los tags, de forma que se pueden añadir dentro del tag como un parámetro más. Y, una vez explicado esto, vamos a comenzar con cada uno de ellos: accesskey Este atributo accesskey básicamente lo que permite es una mejora en la accesibilidad del sitio, pudiendo llegar a esa zona de la página pulsando una letra o número del teclado. Un ejemplo podría ser el de … Leer más

Primeros datos SEO del nuevo Tumanitas

Hace ya unos días que hemos lanzado la nueva versión de TuManitas y la verdad es que los datos que puedo extraer de tan pocos días son bastante espectaculares. Voy a intentar poner un resumen de la mayor cantidad de gráficas y datos que tenemos… Para empezar os dejo la gráfica de Rendimiento del sitio que da Webmaster Tools: También os dejo las Páginas rastreadas al día: El siguiente es el de los Kilobytes descargados al día: Y el que más nos está gustando al equipo, el de Tiempo de descarga de una página: Finalmente, os dejo el histórico de tráfico SEO (según analytics, tráfico de buscadores sin pagar): Y ya sí, para acabar, una comparativa entre los mismos días de la semana de estas dos últimas semanas, … Leer más

HTML 5: algunas novedades antes de empezar

Sin duda HTML 5 es el futuro presente, y un claro ejemplo ha sido el lanzamiento de este mismo blog en HTML desde Octubre de 2009 y algo comercial como es TuManitas en Abril de 2010. Para empezar he de decir que uno de los detalles que más me ha gustado es que los tags «únicos» ya no sea obligatorio cerrarlos. Esto significa que podemos poner cosas como <br> o <img src=»http://example.com/example.jpg»> sin necesidad de incluir la barra «/» final. Otro detalle es que se va a poder tener acceso a dispositivos externos como una cámara web gracias al tag device. Ahora mismo nadie da soporte a este elemento, pero básicamente tendrá 3 opciones gracias al parámetro type: media (una cámara web), fs (un USB o similar) y … Leer más

TuManitas, ¿primera web comercial en HTML 5?

Sí, el gran proyecto en el que he estado trabajando estos últimos 4 meses es TuManitas. Ya os comenté hace tiempo que me incorporé al proyecto como CTO, y desde principios de año que «unos arreglillos» se convirtieron en el desarrollo del producto completamente nuevo. Los cambios no han sido sólo estéticos (algo bastante evidente) sino sobretodo en funcionalidades y usabilidad. Que conste que sé que hay cosas a arreglar, así que ahora no me bombardeéis de mensajes diciendo que tal o pascual… los conozco casi todos los fallos. Con respecto a la usabilidad, pues básicamente las mejoras han ido en la dirección de poder encontrar trabajos más rápidamente, ya que hasta ahora podías filtrar por categorías pero no por provincias, algo que hacía el sistema complejo para … Leer más

Las nuevas etiquetas del HTML5

Y este, por ahora, será el último artículo que escriba en referencia al HTML5. Hasta ahora he hablado de cómo hacer que funcione en Explorer 8, y de las novedades en cuanto a los enlaces internos y externos. Ahora lo que toca es enseñar algunos de estos nuevos «tags» que considero que tiene cierto sentido a la hora de dar formato a un sitio, o cierto peso a la hora de organizar la información. <article> El significado principal es sencillo: aquí se encuentra el contenido importante de la página. Si hablásemos en términos de SEO, esto sería lo que hay que posicionar. <aside> Este bloque viene a ser los contenidos relacionados con el «article» principal… habitualmente harían referencia a esa «columna lateral» en la que hay tags o … Leer más

Los enlaces en HTML5 y el SEO

El otro día os comentaba cómo hacer que Internet Explorer 8 detecte el HTML5 y ahora os traigo un poco de información y lucidez sobre el peso de los enlaces en HTML5 y las relaciones entre contenidos, lo que algunos llaman el «linkbuilding» y el «linkjuice». Existe un elemento que desde hace un tiempo se ha ido creando de forma autónoma que son los «rel=». Seguro que a los SEO les suena el «rel=nofollow» como un gran clásico, pero existen algunos más y HTML5 los ha incorporado de serie. Para los CSS Un gran clásico es que los CSS sean algo como: <link rel=»stylesheet» href=»estilo.css» type=»text/css» /> pero, ahora, directamente en HTML5 tan sólo será necesario indicar: <link rel=»stylesheet» href=»style-original.css» /> Para los fav-iconos Otro gran clásico de … Leer más

JavierCasares.com en HTML5

Por fin lo he hecho… ha costado, no voy a negarlo, tenía mis dudas sobre si sabría hacerlo más o menos bien, pero como ha sido la primera vez, creo que no ha salido mal del todo… Acabo de lanzar mi template en HTML5. Por lo poco que he podido ver, una de dos, el HTML5 está bastante bien soportado, pero el CSS no lo aguanta muy bien, o los «nuevos tags» no pueden «tener formato», porque al final he acabado poniendo ID y CLASS a la mayoría de los elementos, y dándoles formatos a todos ellos… También sé, por lo que he podido ver, que Internet Explorer no muestra bien el menú superior, pero la verdad, como es un problema de Exploter, pues como que paso de … Leer más

El HTML5 ya está aquí

Falta muy poco para que el HTML 5 salga a la luz y ya está disponible prácticamente toda la documentación posible sobre su estándar. Hace unos días que vengo leyendo cosas sobre el HTML… bueno, quien dice días dice meses, y me gustó principalmente lo que ya es vox pupuli con estos maravillosos gráficos comparativos… Versión HTML 4 / XHTML 1 Versión HTML 5 Además de esto, hay una serie de cambios a tener en cuenta, entre los que cabe destacar: El DOCTYPE se reduce a:<!doctype html> La codificación se sustituye por:<meta charset=»UTF-8″> Los DIV y LI podrán contener elementos estructurales como P En las tablas con THEAD aparecerá TFOOT Aparecen una serie de elementos nuevos: SECTION: será una zona de un elemento ARTICLE: zona independiente del documento … Leer más