Ha habido muchos artículos sobre HTML5, como "¿Qué esperar de HTML5?" ” y “¿Cómo cambiará HTML5 la web?” y así sucesivamente, pero para los desarrolladores web, lo principal que deben saber es: ¿Qué puedo hacer con HTML5 ahora y cómo empiezo a usarlo? La buena noticia es que ya hay muchas cosas disponibles en HTML5.
Sin embargo, debes entender una cosa desde el principio: necesitas conocer a tu audiencia; de lo contrario, no deberías utilizar HTML5. Si la mayoría de las personas que visitan su sitio utilizan IE6, entonces no hay absolutamente ninguna razón para que utilice HTML5. Por otro lado, si todos los visitantes de su sitio utilizan navegadores móviles, como iPhones y iPads, ¿a qué está esperando? ¡Puedes empezar ahora! Espera, aquí tienes algunas pautas, no es demasiado tarde para empezar después de leerlas.
¿Qué características de HTML5 puedes usar ahora?
Aunque el estándar HTML5 es todavía un borrador y todavía se está discutiendo en manos de organizaciones de estándares, muchos navegadores modernos han implementado partes importantes. Apple Safari, Google Chrome, Mozilla Firefox, Opera y Microsoft IE9 ya admiten algunas funciones de HTML5.
Primero echemos un vistazo a la puntuación de cada navegador en el sitio web de PRUEBA HTML5:
*Apple Safari 5.0: 208
* Google Chrome 5.03: 197
*Microsoft IE7: 12
*Microsoft IE8: 27
*Mozilla Firefox 3.66: 139
* Ópera 10.6: 159
Parece obvio que la mayoría de los navegadores convencionales que no son el núcleo de IE tienen un buen soporte para HTML5 y pueden hacer que los "sitios web que utilizan el borrador de HTML5" funcionen muy bien.
Volviendo al principio, ahora puedes usar el tipo de documento HTML5, no hay razón para no usarlo, incluso puedes consultar y reemplazar en todo el sitio web:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
se convierte en:
<!DOCTYPE html> <html> |
El siguiente código parece más limpio y sencillo, ¿no es así? Si los navegadores representaran sus páginas web de manera compatible con los estándares, aún así lo harían.
Hablemos del vídeo. Muchas publicaciones sobre HTML5 mencionarán a los competidores actuales, cuatro en total: Flash, H.264, OGG y WebM. Es posible que todos estos se conviertan en un formato estándar en el futuro y ninguno de ellos se reproducirá correctamente en todos los navegadores y en todas las plataformas. Lamentablemente, parece que los patrocinadores del navegador no han preparado uno para esta función en el corto plazo.
Entonces, es obvio que la etiqueta Video aún no ha llegado a la etapa en la que se puede aplicar. Pero espera, uno debería esperar que la etiqueta de video HTML5 sea independiente del formato. De hecho, dado que un vídeo puede contener varias etiquetas de origen, tiene que funcionar de esta manera. Si tu navegador no soporta la primera opción, probará con la segunda, luego la tercera, la cuarta, la quinta…
HTML para manejar situaciones como esta es un proyecto de código abierto que admite videos basados en web sin utilizar scripts ni rastreo de navegador y se puede encontrar aquí .
Semánticamente hablando, un gran cambio en HTML5 son las etiquetas con una semántica clara. El cambio que puede ver es que su sitio ahora está lleno de código similar a este:
<div id="encabezado"> <span class="nav"> |
En HTML5, puedes expresarlo así:
<encabezado> <navegación> |
¿Es la semántica más clara? Por supuesto, todavía tenemos que usar CSS [Hojas de estilo en cascada] para formatear estos elementos. Pero espera, ¡ninguna versión de IE admite estas etiquetas! ¡Este es un gran problema para la gente! ¿Realmente tenemos tanta mala suerte? Afortunadamente, tenemos una solución: todo lo que necesitas hacer es pegar el siguiente código en la etiqueta HEAD de tu página:
<!—[si es IE 9]> |
HTML5 Shiv es un proyecto de código abierto basado en un descubrimiento simple: si crea un elemento DOM en IE, puede usar ese nombre en estilos. Por ejemplo, si usas
document.createElement("foo") |
Cree un elemento DOM, luego puede agregar cualquier cantidad de etiquetas foo a la página actual e IE las formateará. HTML5 Shiv contiene algunos elementos HTML5 que IE no puede reconocer y luego los crea uno por uno. De esta forma puedes utilizar estas etiquetas HTML5, por ejemplo:
| Artículo, sección, encabezado, pie de página, navegación |
Smart Forms, otra característica que hace que HTML5 sea más inteligente. Si está cansado de escribir el mismo guión cada vez para comprobar la validez de una dirección de correo electrónico o algo así como un número de teléfono, dirección de Internet, etc., ¡no está solo! Hay una razón para dejar que el navegador haga todo este molesto trabajo, ¿no es así? Muy cierto.
Aquí está la sintaxis:
| <tipo de entrada="correo electrónico"> <tipo de entrada="url"> <tipo de entrada="número"> <tipo de entrada="tel"> |
¿Qué pasará con esos navegadores más antiguos? La parte más inteligente: si ven un atributo TYPE con un valor que no reconocen, representarán el elemento con el valor predeterminado de Texto, que es exactamente el resultado de compatibilidad con versiones anteriores que esperamos. Los navegadores que soportan HTML5 verificarán automáticamente este tipo de campo, pero será mejor que no deseche sus scripts anteriores, al menos no hasta que IE9 se vuelva popular.
Si se pregunta qué hacen los navegadores que admiten este tipo de acciones más allá de la validación, puede probar estos formularios en su iPhone. Notarás que el tipo de teclado asociado con el formulario cambia, a veces es numérico, a veces es alfanumérico pero con un símbolo @ agregado, y algunos incluso tienen una tecla.com directamente, y eso es lo que estos elementos son mágicos. Todo lo que necesitas hacer es cambiar el valor del atributo de tipo.
También puede ser un poco más inteligente, aquí hay un nuevo atributo:
marcador de posición |
Este valor puede simplemente especificar un fragmento de texto, que es el efecto que se ve a menudo en Internet. Este texto se muestra cuando no hay ningún valor. Cuando hace clic, el valor queda vacío y vuelve al texto cuando lo deja. En el pasado, se usaba Javascript para procesarlo, pero ahora el navegador lo hará por usted.
<input type="email" placeholder="Su dirección de correo electrónico"> |
¿Qué funciones HTML5 puedes utilizar de inmediato?
No todos los elementos HTML5 están listos para usar todavía, por varias razones (ninguna de las cuales está abreviada como IE), la compatibilidad con el navegador llegará pronto y, en un futuro no muy lejano, tendrá dos elementos listos para usar de inmediato.
Fuentes mágicas, todo diseñador tiene un sueño, con la esperanza de que todos los visitantes del sitio instalen las fuentes que necesitan para el diseño. Para hacer esto, solía haber una variedad de métodos, como el uso de imágenes, Flash, etc., pero ahora. , ellos tienen este derecho y usted puede obligar a sus visitantes a instalar las fuentes que especifique. Esto es lo que admite CSS3: atributo @font-face. Las versiones de Firefox anteriores a la 3.5 y las versiones móviles de Safari (anteriores a iOS 4) no admiten este atributo. Si su sitio tiene muchas visitas similares, es posible que deba esperar.
De todos modos, no existe una razón real para que todos los navegadores utilicen la misma fuente. Si desea proporcionar fuentes personalizadas a los navegadores que admiten este atributo y luego proporcionar una fuente alternativa a los navegadores que no admiten este atributo, también es una buena solución en este momento, http://www.fontsquirrel. fontface/generator es un buen lugar al que acudir.
Las sombras y las esquinas redondeadas son cosas que hacen felices a muchos diseñadores. Las sombras de texto, las sombras de bloques, las esquinas redondeadas de bloques, etc. ahora son estándares compatibles con CSS3. Nuevamente, si no desea medir la representación en diferentes navegadores en función de la perfección de píxeles, puede comenzar a usar estas funciones ahora. Los generadores CSS3 te ayudarán a hacer esto.
Esquinas redondeadas (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+) |
-webkit-border-radio: 10px; |
Sombra de texto (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+) |
sombra de texto: 5px 5px 3px #CCC; |
Bloquear sombra (Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+): |
-webkit-box-sombra: 10px 10px 5px #666; |
¿Qué funciones podrías utilizar algún día?
Este catálogo contiene características en las que los desarrolladores y diseñadores han estado pensando durante años. Desafortunadamente, pueden pasar varios años más antes de que puedan usarse en el mundo real.
Los formularios inteligentes se han mencionado antes, pero de hecho hay muchos más elementos útiles que no se han mencionado, pero antes de un soporte más amplio, no hay forma de utilizarlos.
Selector deslizante:
<tipo de entrada="rango" min="0" max="100" paso="2" valor="50"> |
Selector de color:
| <tipo de entrada="color"> |
Selector de fecha:
| <tipo de entrada="fecha"> |
Cuadro de entrada con validación periódica:
| <tipo de entrada="texto" patrón="[0-9]{13,16}"> |
Cuadros de entrada requeridos:
<tipo de entrada="texto" requerido> |
Ninguna de estas etiquetas tiene soporte para varios navegadores o plataformas, pero cuando llegue ese día, definitivamente estará ansioso por usarlas.
Los diseños impresos, otra característica de CSS3, aún tardarán años en implementarse por completo. Proporciona a los diseñadores funciones de diseño de varias columnas. Actualmente sólo se puede implementar en los casos de prueba de Firefox y Safari.
| -moz-columna-count: 3; -moz-column-gap: 20px; -webkit-columna-count: 3; -webkit-columna-brecha: 20px; |
La detección de geolocalización, con el crecimiento de los servicios basados en la ubicación como Gowalla y Foursquare, es útil para que los navegadores sepan dónde se encuentra el usuario. Por tanto, no es de extrañar que los navegadores móviles basados en teléfonos móviles sean los primeros en implementar esta característica. Firefxo 3.5 y Safari 5 han comenzado a ofrecer soporte para la geolocalización. (Un servicio similar de Chrome se implementa a través de Gears, pero gradualmente se está trasladando a HTML5).
Trabajar sin conexión y almacenar datos localmente en la nube es una gran idea cuando no te das cuenta de que no tienes una conexión a Internet o tienes una aplicación que necesita procesar grandes cantidades de datos y debe ejecutarse con frecuencia; servidor. La comunicación con los clientes es más fácil de lo que piensas. Por ejemplo, obtienes más; o tal vez tus datos móviles son limitados y deseas almacenar más datos en tu teléfono para evitar una pérdida excesiva de datos. La respuesta en este momento es utilizar el almacenamiento local para que la aplicación funcione sin conexión. a la nube cuando esté conectado.
Los navegadores que admiten esta función son: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.
Mesas de trabajo, animaciones y efectos de transformación, una de las promesas de HTML5 se puede lograr utilizando el elemento Canvas y algunas propiedades de CSS3 para lograr un sitio web completamente ilustrado y animado. Esto es del estándar del 12 de julio de 2010.
Verde = Logrado, Rojo = No planeado
Accesos directos al HTML5 de vanguardia
Si no puede esperar a que IE8 muera, hay muchas maneras de omitirlo y seguir adelante; nuevamente, todo depende de sus visitantes. Eche un vistazo a los registros de acceso de su sitio para ver qué encabezados de navegador son los más visitados. Una forma de hacerlo es, por ejemplo, utilizar Chrome Frame de Google para incrustar una instancia de Chrome en IE. Si comprende que los visitantes de su sitio pueden haber instalado GCF [Google Chrome Frame], puede agregarlo a su HEAD. La etiqueta META en la línea anterior obliga a IE a usar GCF para mostrar su sitio web:
| <meta http-equiv="X-UA-Compatible" content="chrome=1"> |
[Editor: Pero me gustaría recordarle que hacer esto invalidará el modo de compatibilidad original de IE7 de IE=7. Si lo desea, péselo usted mismo. ]
Junto con un breve script proporcionado por Google, que permite a los usuarios que no han instalado GCF saltar a la página de instalación de GCF, es posible que pueda omitir las restricciones de IE. [Editor: Estoy loco, parece publicidad gratuita para que GCF genere tráfico gratuito...]
Los elementos enumerados en este artículo son solo una pequeña parte de los borradores actuales de HTML5 y CSS3. Si tiene que utilizar otras funciones nuevas, es necesario verificar los proyectos de código abierto existentes para que pueda navegar. Los problemas de compatibilidad del servidor se minimizan.
Al informar sobre HTML, muchos medios se centran en su postura, como "no hasta 2022" y "Flash Killer". La realidad es que HTML5 es una actualización muy esperada y completamente nueva del tan esperado HTML4, por lo que puede comenzar a usarlo hoy.