Aplicaciones Web

#Estoesgoogle día 1: HTML5 en la actualidad

Hola amigos, ‘Usos prácticos de HTML5 en la actualidad’ , fue una de las conferencias del día 1 en Esto es Google, el 9 de Agosto. El ponente fué Pete Lepage, Developer Advocate en Google Inc, trabajando desde el 2001 específicamente en la Chrome Web Store.

Pete nos habló de la diferencia entre Feature Detection y Browser Detection, siendo esta última la más utilizada desde los inicios de HTML, para poder identificar el navegador en la que se está presentando nuestro sitio web, para que se presente de igual forma en la mayoría de los navegadores y que el usuario no note los cambios al pasar de un navegador a otro.

Ahora se propone una nueva forma para habilitar o no funciones que hemos agregado a nuestro sitio, ya que los navegadores actualmente ya no están solamente en los dispositivos de escritorio sino en dispositivos móviles como smartphones y tablets, es por eso que feature detection se hace presente para detectar el navegador en donde se está presentando el sitio y así verificar si la funcionalidad que queremos ejecutar es compatible con el navegador, de lo contrario avisar al usuario de la incompatibilidad de su navegador y tratar, si es posible, de simular la funcionalidad para que el usuario no se pierda de la misma al visitar nuestro sitio web.

Habló de una herramienta llamada Modernizr, la cual es una librería en javascript que nos ayuda a construir más facilmente en HTML5 y CSS3, ayudando enormemente a la detección de funcionalidades, les dejo un link con un video hecho por Monito Joomla con el título “Tip – HTML5 y CSS3 con Modernizr”, es un pequeño ejemplo que explica en que consiste dicha herramienta.

Por otro lado nos mostró algunas etiquetas y propiedades de HTML5 que a continuación describo más a detalle:

  • Etiqueta Speech input: etiqueta cuya funcionalidad estriba en un campo de texto donde la forma de introducir texto en el es por medio de audio, es decir cuenta con un pequeño ícono de micrófono de lado derecho lo que permite hablar y que se realice alguna funcionalidad con dicho texto, comúnmente es utilizado para búsquedas.
    <input type="text" x-webkit-speech />

  • Propiedad requiered: propiedad para los campos de texto, que nos ayuda bastante en los formularios donde necesitamos validar que algunos campos sean obligatorios, pues esta propiedad realiza el trabajo que antes hacíamos en javascript al igual de los engorrosos estilos para mostrar al usuario donde se encuentra el campo que es obligatorio.
    <input type="text" requiered />

  • Etiqueta Search: campo de texto compuesto por un ícono de una pequeña lupa del lado izquierda, utilizada para desplegar el historial de búsqueda que se haya realizado, el campo de texto y un ícono de un tache al lado derecho para limpiar la búsqueda.
    <input type=”search” results=”5” name=”searchbox” />

Nos habló de una herramienta interesante, Application Cache, la cual nos permite 3 ventajas:

  1. Navegación offline, ya que los archivos necesarios para navegar a través del sitio, se descargan en el cliente.

  2. Mejora la velocidad de navegación, ya que sólo se descargan los archivos una vez.

  3. Reduce la carga al servidor, ya que solamente descarga los archivos que han sido modificados.

Otra herramienta fue el uso de IndexedDB, la cual su funcionamiento estriba en almacenar de manera local, es decir del lado del cliente la información del usuario, esto se esta usando actualmente y creo que todo desarrollador debería implementar para evitarnos la molesta configuración y manipulación de los famosos cookies.

Una de las mejoas en javascript que nos menciona es la de los Web Wrokers, que nos permiten ejecutar scripts en paralelo o en background, para evitar que el navegador se cuelgue mientras un proceso algo pesado que no se pueda interrumpir, no interfiera con la funcionalidad normal del sitio.

var worker = new Worker("worker.js"); 

Les dejo algunas ligas que nos recomendó así como su twitter personal, espero les haya gustado, ¡¡ un saludo!! :)

Web Platform Status

HTML5 rocks updates stream

Twitter personal de Pete Lepage @petele

Slides de la conferencia

Comments
To Top