20 Años apostando por la TRANSFORMACIÓN DIGITAL
05 May

Introducción y consejos sobre HTML5 y CSS3 – Parte 1

Escrito por Elías Zreik en . Publicado en Diseño, Web

HTML5 & CSS3

Últimamente muchos clientes, amigos diseñadores y usuarios de este blog me preguntan sobre HTML5 y CSS3, sus usos y compatibilidades, cuando usarlas y cuando no, si van a tener problemas con algunos navegadores, los posibles parches, etc… Entonces decidí escribir este «pequeño» resumen con algunas explicaciones y descripciones sobre los códigos en si y su uso.

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQueryjQuery UISproutcore, entre otros.

Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

Nuevas etiquetas de HTML5

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:

Código :

<!DOCTYPE html>

Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.

Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un simple div o span.

<header>

Hacer cosas como <div id=»header»> ya no es muy aconsejable cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.

<hgroup>

Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

<nav>

Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.Sólo puedes tener un <nav> por página.

<section>

Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios.

<article>

Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside>

Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.

<footer>

Este es obvio. Es el pie de página y todo lo que lo compone.

Atención: div no está muerto :

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.

Ejemplo de blog hecho con HTML5

 

Código :

<header>
   <hgroup>
      <h1>El blog de epoint.es</h1>
      <h2>Este es el blog de epoint.es</h2>
   </hgroup>
</header>
<nav>
   Aquí va la botonera/menú de navegación
</nav>
<section>
   <article>Aquí va un post, con su titulo en h2</article>
   <article>Aquí va un post, con su titulo en h2</article>
   <article>Aquí va un post, con su titulo en h2</article>
</section>
<aside>
   Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.
</aside>
<footer>
   Pie de pagina, amenazas de copyright, etc.
</footer>

O simplemente haga click con el botón derecho del ratón en nuestro blog y selecciona la opción «Ver codigo fuente«.

Las etiquetas nuevas «importantes» de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son:

<video>

Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.

<audio>

Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

<input *>

Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo «email» que se autovalidan, calendarios tipo «date», sliders, números, entre otras.

<canvas>

Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

<svg>

Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

La segunda revolución de la web y el soporte de HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener. Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio de internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el objeto XmlHttpRequest, más conocido como AJAX.

¡¡Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999!! , el navegador responsable de detener la innovación en los estándares web también es el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían sido inviables.

Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE. CSS Level 3 trae consigo algunos elementos de diseño increíblemente poderosos. Esquinas redondeadas, sombras paralelas suaves rellenos de degradado, y así sucesivamente. Estos son los tipos de elementos de diseño que a nuestros amigos les encanta usar porque hacen que los sitios sean atractivos, pero es difícil y requiere mucho tiempo para poner en práctica, con la participación de sprites de imágenes complejas, el marcado adicional de no-semántico, las grandes bibliotecas de JavaScript, y otros hacks encantadores. Gracias a los parches, librerías javascript de adaptación de estándares:
  • HTML5 Enabling Script: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible agregarles diseño a ellas o cualquier elemento dentro de ellas.
  • IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8.
  • Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o alternativa.
  • css3pie: PIE es sinónimo de Internet Explorer Progresista. Es un comportamiento adjunto para IE que, cuando se aplica a un elemento, permite a IE reconocer y renderizar (mostrar) una serie de propiedades de CSS3.

Gracias a estos scripts y a los valientes desarrolladores que los escribieron, podemos ser unos desarrolladores más felices.

 

Nuevas capacidades de Javascript

Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas. Esta es una lista de las más importantes.

Web Storage

Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor. Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que subir los KB que pesan todas las cookies que le hemos dado.

Las cookies apestan :).

Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier tipo de datos cabe en un Storage.

Web SQL

Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. PeroInternet Explorer 9 declaró que no implementará Web SQL y la realidad es que Web Storage es más que suficiente para la mayoría de usos. Así que nada, esto por ahora no sirve.

Web Workers

¿Vosotros sabíais que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso. Web Workers permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas complejas más veloces gracias al multithreading.

Web Sockets

Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiuser en Javascript como PubSubHubBub.

Arrastrar y soltar

Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros.

Geolocalización

Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona en cualquier PC, no sólo en teléfonos ¿No me crees? Prueba esta demo y dime en los comentarios qué donde tan cerca de ti te encontró.
Ps: Si tienes wifi encendido, tiene mejores posibilidades de encontrarte.

Nuevas capacidades de CSS3

Diseñar en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No sólo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaños dinámicos requiere múltiples divs, estilos y cuatro PNGs diferentes (o un sprite) en el mejor de los casos. Ya no más, CSS3 es hermoso y trae para ti opciones que hacen el diseño mucho más fácil.

@font-face, @fucking-font-face

Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas de hippies. ¿Saben qué otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba ¿Y saben qué más? NADIE LO USA.
¿Como funciona? Pilla un archivo de tipo de fuente ttf o otf, mételo aquí fontface.codeandmore.com o aquí www.fontsquirrel.com/fontface, coge los archivos adaptables que te genere, súbelos a tu web y mediante este código:

@font-face {
	font-family: 'BebasNeueRegular';
	src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('BebasNeue-webfont.woff') format('woff'),
		 url('BebasNeue-webfont.ttf') format('truetype'),
		 url('BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
	font-weight: normal;
        font-style: normal;
}

Luego usando los selectores CSS, asigna un estilo font-family con los atributos ‘BebasNeueRegular’, arial (incluimos arial por si por alguna casualidad no funciona el font-face, la fuente para el elemento asignado sería la arial), esto se quedaría así: font-family: ‘BebasNeueRegular’, arial;.

Podéis ver los navegadores compatibles con @font-face aquí.

Selectores CSS

¿Te ha tocado hacer un diseño donde una lista o tabla tiene algunas líneas o celdas en fondo blanco y los otros en fondo gris? Como una cebra. Antes, la única forma era hacerlo a mano o con un script del lado del server. Ahora, con CSS3, sólo tienes que especificar un color para «odd» y otro para «even» y listo, usando el selector :nth-child(elementos):

ul.cebra li:nth-child(2n+2),
table.cebra tr:nth-child(2n+2) {
  background: #ccc;
}
ul.cebra li:nth-child(2n-1),
table.cebra tr:nth-child(2n-1) {
  background: #fff;
}

Con este CSS haremos que las tablas o listas con la clase cebra asignada salgan todas con la primera linea con fondo blanco, la segunda con fondo gris, la tercera con fondo blanco, la quarta con fondo gris etc…

Igualmente, puedes crear estilos para el primer elemento y otro para el último (:first-child y :last-child respectivamente). O estilos para etiquetas iguales con ciertos atributos diferentes en HTML (elemento[id=»loquesea»] o elemento[id^=»loque»] para seleccionar elementos que tengan el atributo id que empiece con loque). Y esto es muy compatible desde IE8.

Columnas de texto

¿Sabes cómo se hacía antes que varios párrafos de texto se dividiera en columnas con HTML?No se podía. Ahora sólo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, lineas de separación, etc.

div.columnas {
      column-count: 3; /* Cantidad de columnas */
      column-gap: 1em; /* Separación entre columnas */
      column-rule: 1px solid black; /* Linea de separación entre columnas */
      -o-column-count: 3; /* -o- lo hace compatible en algunas versiones del navegador Opera */
      -o-column-gap: 1em; 
      -o-column-rule: 1px solid black;
      -moz-column-count: 3; /* -moz- lo hace compatible con algunas versiones de Mozilla Firefox */
      -moz-column-gap: 1em; 
      -moz-column-rule: 1px solid black; 
      -webkit-column-count: 3; /* -webkit- lo hace compatible con algunas versiones de Google Chrome y Safari (Safari también en iPhone, iPad etc...) */
      -webkit-column-gap: 1em; 
      -webkit-column-rule: 1px solid black;
}

Opacidad, transparencia, canales alpha, contraste, saturación y brillo

Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instrucción. Imágenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con sólo CSS.

img.opacidad50 {
      opacity: 0.5; /* Tendremos una imagen con un 50% de transparencia en su relleno */
}
div.fondotransparente {
      background: rgba(0,0,0,0.5); /* Tendremos un contenedor donde el fondo será un negro con 50% de transparencia */
}

Estos dos ejemplos pueden ser adaptables a muchos navegadores (Opacidad, transparencia y canales alpha), los que indico a continuación son bastante nuevos y solo funcionan (de momento) con WebKit Nightly (Google Chrome Canary 18.0.976.0 +):

-webkit-filter: blur(2px); -> Aplica un desenfoque gausiano de 2px al elemento, por defecto es 0. (Ver ejemplo)
-webkit-filter: brightness(-30%); -> Maneja la cantidad de brillo de un elemento, en este caso reduce un 30% de brillo del elemento, por defecto es 0 y se puede manejar desde -100% (sin brillo) a 100% (brillo total). (Ver ejemplo)
-webkit-filter: contrast(30%); -> Maneja el contraste de un elemento, en este caso reduce hasta 30% el contraste de un elemento, por defecto es 100% y se puede manejar tantos valores de porcentaje positivos como negativos. (Ver ejemplo)
-webkit-filter: grayscale(); -> Transforma los colores del elemento a colores de la escala de grises, o sea, negro y blanco. El valor por defecto es 100%. (Ver ejemplo)
-webkit-filter: sepia(); -> Transforma los colores de un elemento a colores de una escala de marrones o «tonos envejecidos». El valor por defecto es 100% y se maneja desde 0% a infinito. (Ver ejemplo)
-webkit-filter: invert(); -> Invierte los colores de un elemento, el valor por defecto es 100%. (Ver ejemplo)
-webkit-filter: opacity(30%); -> Maneja el grado de opacidad de un elemento (lo mismo que el estilo opacity), por defecto es 100% y se puede manejar desde 0% (completamente transparente) a 100% (completamente opaco). (Ver ejemplo)
-webkit-filter: saturate(50%); -> Maneja el grado de saturación de los colores de un elemento, desde 0% (sin color, o sea, negro y blanco) a infinito (cuanto mas añadas, mas serán intensos los colores del elemento). (Ver ejemplo)
-webkit-filter: hue-rotate(90deg); -> Maneja el equilibrio de los colores de un elemento en grados (Parecido al Hue/saturation de Photoshop), desde 0deg a 360deg. (Ver ejemplo)
-webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px); -> Aplica sombra a un elemento, en este caso, aplica un sombra de color negro 50% transparente posicionado arriba del todo y a 5px desde la izquierda a derecha con un 5px de desenfoque en la sombra (funciona como el estilo box-shadow). (Ver ejemplo)

Animaciones de transición y transformación

Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados sólo con CSS. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrán aceleradas por hardware. Mucho más veloces, sobre todo en dispositivos móviles.

a {
      color: #fff;
      transition: color 0.4s ease-in 0s;
      -moz-transition: color 0.4s ease-in 0s;
      -webkit-transition: color 0.4s ease-in 0s;
      -o-transition: color 0.4s ease-in 0s;
      -ms-transition: color 0.4s ease-in 0s; /* IE 9 */
}
a:hover {
      color: #000;
}

Este ejemplo aplicaría una transición de color en todos los enlaces al poner el ratón por encima que duraría 0.4 segundos en cambiar de color entre el blanco (#fff) y el negro (#000).

div.rotar {
      -webkit-transform: rotate(30deg);
      -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -o-transform: rotate(30deg);
      transform: rotate(30deg);
}

Este ejemplo rotaría el elemento 30 grados siguiendo las agujas del reloj. A continuación detallo los estilos mas relevantes relacionados:

transition-property: left, top, background, -webkit-transform;
transition-duration: 2s, 2s, 1s, 1s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-delay: 0, 0, 0, 1s; (de momento no funciona en algunas versiones de Firefox)
transform: translate(3em,0);
transform: scale(2);

Bordes redondeados

Sí. Con una instrucción puedes hacer que cualquier caja tenga bordes redondeados como quieras. Olvídate de crear múltiples divs, cortar pngs y otros temas arcaicos.

div.bordesredondeados {
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px;
      -o-border-radius: 10px 10px 10px 10px;
      -ms-border-radius: 10px 10px 10px 10px;
      border-radius: 10px 10px 10px 10px;
}

Con este ejemplo, añadiríamos bordes redondeados a todos los 4 bordes de una caja. Añadiendo distintos valores podríamos dibujar círculos o hacer cada borde con un grado distinto de curvatura.

Reflecciones, gradientes y sombras

Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de código y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

div.ejemplo {
      -webkit-box-reflect: right 1px; /* right quiere decir que se reflectará a la derecha con y 1px que tendrá un separación entre el elemento y su reflejo de 1px */
      -moz-box-reflect: right 1px;
      -ms-box-reflect: right 1px;
      -o-box-reflect: right 1px;
      box-reflect: right 1px;
      background-color: #4381EC; /* Añadimos un color plano de fondo por si en algún navegador no funciona el degradado */
      background-image: -moz-linear-gradient(top,#4397EC,#435FEC); /* Degradado desde arriba hacia abajo, desde el primer color hacia el segundo */
      background-image: -ms-linear-gradient(top,#4397EC,#435FEC);
      background-image: -webkit-gradient(linear,0 0,0 100%,from(#4397EC),to(#435FEC)); /* Para algunas versiones de Google Chrome */
      background-image: -webkit-linear-gradient(top,#4397EC,#435FEC); /* Para otras versiones de Google Chrome */
      background-image: -o-linear-gradient(top,#4397EC,#435FEC); /* Para Opera */
      background-image: linear-gradient(top,#4397EC,#435FEC);
      background-repeat: repeat-x; 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4397ec',endColorstr='#435fec',GradientType=0); /* Para algunas versiones de IE */
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); /* Para otras versiones de IE */
}

Este ejemplo añadiría un fondo degradado desde arriba hacia abajo entre dos colores y en la gran mayoría de los navegadores. Haced variaciones entre top, left, radial y circle para modificar el sentido del degradado.

Sitios de uso general que ya están usando HTML5

Esta es una lista corta de sitios que ahora mismo, en producción, usan HTML5. Si conoces más,por favor compartelos en los comentarios y los voy agregando a la lista, con tus créditos.

Twitter y m.twitter.com

Casi todo el diseño de las versiones desktop y móvil de Twitter usan intensivamente CSS3. En especial por los bordes redondeados. En la versión móvil de Twitter se usa geolocalización sumado a Google Geolocation Services para geolocalizar los tweets.

Vimeo/m/ y m.youtube.com

Las versiones móviles de Vimeo y Youtube para teléfonos, así como sus versiones para tablets (iPad, Samsung Galaxy Tab, Playbook, etc) están hechas sólo con HTML5. CSS3 para los diseños y obviamente la etiqueta <video> para servir los videos, sin necesidad de Flash.

Gmail.com

Gmail usa Web Storage para guardar en el disco del usuario los corres más recientes. Así puedes acceder a ellos temporalmente si se cae la conexión. También usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para diseño.

Scribd.com

Scribd es un servicio que convierte cualquier PDF, PPT o PSD en HTML plano, con texto seleccionable y rendereado en el navegador, gracias en especial a @font-face y SVG.

Facebook

Las versiones móviles y desktop de Facebook hacen un uso intensivo de CSS3 para diseño y animaciones, así como de Web Sockets (o Pubsubhubbub) para las notificaciones de actividad y el chat. Muchas apps de Facebook usan otras capacidades.

TiaXime.com

El diseño de Tia Xime sería infernal de implementar si no fuera por CSS3. Que se joda la gente que usa IE6.

¿Pero esto en serio lo puedo usar ahora mismo?

El mejor sitio que puede responderte eso es CanIUSe.com. Donde encontrarás una lista de todas las capacidades de HTML5, CSS3 y el nuevo Javascript, junto a una tabla de compatibilidad. Sin embargo, no te asustes demasiado si ves muchos cuadros rojos. Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5 Enabling Script. Gracias a ellos, muchos de esos rojos se convierten en verdes.

Aun así, muchos dirán que IE6 sigue siendo la razón por la que no usan HTML5. Bueno, quiero mostrarles las estadísticas de una semana de un sitio que no es epoint.es, sino una web de audiencia genérica, gente normal que usa la web. El público más general posible:

¿Parece que IE tiene mucho mercado, a pesar de estar cediendo, verdad? Bueno, miremos más de cerca a IE a ver quién usa realmente IE6:

Sólo el 14% usa IE6. Y si el total de usuarios de IE es del 49%, eso significa que los usuarios de IE6, en total, son solamente el 6.8% de las visitas.

No tienen por qué sufrir. Dar soporte a IE6 es más caro que las visitas que aporta. Vivan el feliz mundo de HTML5.

Para cualquier duda o aclaración que podáis tener, dejar un comentario y os contestaré lo antes posible.

¿A qué estás esperando?

Etiquetas: , , , ,

Trackback desde su página web.

" Servicios epoint.es: Diseño Web | CRM | Marketing online | Casos de éxito
Hacemos rentable tu negocio online. Consúltenos "

Déjenos un comentário

He leído y acepto la política de privacidad

Featuring Recent Posts WordPress Widget development by YD

Cerrar