HTML 5: imagen grande, ande o no ande

Ahora que ya tenemos la mayor parte del HTML formateado, toca hacer revisión del resto de elementos más detallados. Y, al igual que pasó con los enlaces, con las imágenes voy a dedicar un capítulo entero para ello ya que aunque la configuración no es tan compleja, se lo merece. Las imágenes se representan con el elemento img. Una imagen puede ser un mapa estático (png, gif, jpg…), vectorial (pdf, xml con svg…), imágenes anmadas (gif, apng…) y otra serie de elementos que cada navegador soporte, pero que el propio HTML 5 no especifica, ya que queda en manos de cada uno de ellos. src Este atributo es obligatorio al añadir una imagen e indica la dirección URL donde se encuentra el elemento a mostrar. alt Este elemento … Leer más

Para qué navegador he de programar

En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20. ¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone de una pequeña gráfica que viene a explicar qué navegadores son los que hay que utilizar, y lo lanza una vez por quarter (cada 4 meses). En este … Leer más

Mejora tu sitio, sólo cambiando el .htaccess

En muchas ocasiones los desarrolladores web no disponen de servidores dedicados sino que sólo tienen acceso a su propia cuenta a través de FTP o similar. Es por esto que estaría bien preparar un fichero de configuración que ya esté configurado a la hora de desarrollar un sitio… <IfModule mod_deflate.c>   SetOutputFilter DEFLATE   BrowserMatch ^Mozilla/4 gzip-only-text/html   BrowserMatch ^Mozilla/4\.0[678] no-gzip   BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html   SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip </IfModule> <IfModule mod_rewrite.c>   RewriteEngine on   RewriteRule ^(.*)\.(\d+)(_m_\d+)?\.([^\.]+)$ $1.$4 [L,QSA] </IfModule> <IfModule mod_expires.c>   ExpiresActive On   ExpiresByType image/png «access plus 1 year»   ExpiresByType image/gif «access plus 1 year»   ExpiresByType image/jpeg «access plus 1 year»   ExpiresByType image/vnd.microsoft.icon «access plus 1 year»   ExpiresByType text/css «access plus 1 year»   ExpiresByType application/x-javascript «access plus 1 year»   ExpiresByType application/javascript «access plus 1 year»   ExpiresByType text/javascript «access plus 1 year» … Leer más

Categorías WPO

HTML 5: dándole color a lo que escribimos

Si por algo se inventó el HTML en su día fue para hacer «markup» de los textos, lo que, en el fondo, significa que se inventó para hacer que los textos de la red de redes tuvieran una forma de darles color, formato y, sobretodo, vinculación. Pero como ya he hablado de la vinculación de los elementos, ahora toca hablar de los elementos que hacen que podamos tener negritas, cursivas, y una serie de cosas que cualquier texto debería poder tener. em Aunque muchos asocian el elemento em a las cursivas, no es así. Habitualmente se representa como una cursiva pero el elemento em básicamente lo que implica es dar énfasis a una palabra para que, dentro de una frase, se haga un mayor esfuerzo en ello. Es … Leer más

Usa el tipo de letra que quieras en tu sitio

Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de «incrustar tu fuente» en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales. Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer. <!DOCTYPE html> <html> <head>   <meta charset=»utf-8″>   <title>Font Face Demo</title>   <style type=»text/css» media=»screen»>     @font-face {       font-family: ‘AaarghNormal’;       src: url(‘Aaargh-webfont.eot’);       src: local(‘☺’), url(‘Aaargh-webfont.woff’) format(‘woff’), url(‘Aaargh-webfont.ttf’) format(‘truetype’), url(‘Aaargh-webfont.svg#webfont’) format(‘svg’);       font-weight: normal;       font-style: normal; … Leer más

Cómo precargar elementos CSS, JS y similares

Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando. La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador. Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores. window.onload = function () { var i = 0, max = 0, o … Leer más

HTML 5: enlaces que cobran vida

Si hay un elemento que hace que Internet sea lo que es son los hipervínculos, los enlaces o, en definitiva en elemento anchor. Y es que la importancia de los enlaces en la red de redes no es trivial, ya que es lo que hace que Internet se distinga de la mayor biblioteca del mundo: el poder saltar de una información a otra sin necesidad de ir al final del libro y buscar en la bibliografía. Los enlaces, hasta ahora, simplemente eran eso, enlaces. Poco a poco en los últimos años se han ido creando elementos suplementarios, pero que al no ser estándar cada uno hacía un poco lo que le daba la gana. Y digo «cada uno» haciendo referencia a los seres humanos, a los navegadores y … Leer más

HTML 5: los bloques de contenido textual

Hace unos días os comentaba los bloques genéricos que contienen la estructura de las páginas en HTML 5, y ahora toca los bloques que contienen texto, y su forma de organizarse… Parece que no, pero aunque muchos elementos de organización de textos son muy parecidos, no se han de utilizar para las mismas cosas… y el objetivo de esta entrada es ver esos elementos y los pocos nuevos que se han añadido… ¿comenzamos? p El elemento p es sencillo de definir: es un parágrafo. Se podría decir que es el elemento básico a la hora de escribir un contenido… Y poco más a decir… hr El hr históricamente se ha utilizado como «barra». Su uso real es el de separar párrafos o contenidos temáticos, de forma que si … Leer más

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