HTML5 & CSS3

En estos momentos en los que los fabricantes de navegadores compiten para ver cuál es el más “moderno” y que cada vez parece que tenemos más cerca la publicación del nuevo estándar de html los desarrolladores web debemos ponernos al día y comenzar a implementar los nuevos estándares en nuestras webs. Para ello es importante tener a mano algunas buenas guías, presentaciones y algún libro que nos ayuden a mejorar nuestras webs mientras siguen funcionando en los navegadores más antiguos (lease IE6).

HTML5 and CSS3 de Brian P. Hogan hace un recorrido por el nuevo estándar dando para cada caso ejemplos de uso y soluciones alternativas (normalmente basadas en jQuery) que nos permitan usarlas en navegadores que actualmente no tienen suporte para ellas.

Haciendo un repaso rápido de los temas que se tocan en el libro y que forman parte de HTML5:

Nuevos elementos estructurales: Para hacer nuestros documentos más semánticos se han incorporado muchas etiquetas nuevas y se han eliminado muchas otras que aún seguían haciendo referencia a presentación. Algunas de estas nuevas etiquetas son header, footer, nav, section, article.

Web forms: Una de mis partes preferidas son los nuevos campos para formularios que nos van a ahorrar gran cantidad de javascript y nos va a permitir crear formularios muy complejos de una manera muy sencilla. Algunos de los nuevos elementos son: email, search, slider(type=range), date, color, number. Además se han añadido attributos muy interesantes como placeholder, autofocus y contenteditable.

CSS3: Para permitirnos mejorar visualmente nuestras webs sin necesidad de añadir clases o ids a cada elemento se han añadido montones de selectores y pseudo-selectores, entre ellos destacaría :nth-child(n) que nos permite crear tablas cebreadas sin necesidad de añadir las típicas clases odd y even.

Canvas: Nos permite crear imágenes complejas o gráficos programaticamente con javascript y sin necesidad de liberías externas como Flash.

Audio y video: Una de las características más conocidas es la inclusión de las etiquetas para audio y video que nos darán soporte nativo en el navegador, después, por supuesto, de que se resuelva la batalla sobre formatos que hay abierta entre los distintos navegadores.

Eye Candy (border-radius, shadows, gradients y transformations): Por supuesto, también se hablan de las nuevas propiedades de CSS que nos va a permitir crear bordes redondeados, sombras, gradientes y mucho más sin necesidad de añadir imágenes como fondos.

Por otro lado, se encuentran algunas API’s javascript que aunque no pertenecen directamente al estándar, está asociadas al él y que habrá que tener en cuenta en el futuro. Las más destacadas son:

Local Storage: Que nos permite guardar cosas como la configuración de la aplicación sin necesidad de usar para ello cookies.

Session Storage: Que permite guardar datos en el navegador que se borran automáticamente al cerrar la sesión.

Web SQL databases: Bases de datos relacionales asociadas a un dominio y persistente entre sesiones.

Offline applications: Permite definir archivos que deben ser cacheados para que la aplicación pueda ejecutarse sin necesidad de conexión a internet.

History: Permite manejar el historial del navegador.

Cross-documents messages: Nos da la posibilidad de enviar mensajes entre ventanas con contenido cargado desde diferentes dominios.

Websockets: Crean una conexión con estado entre un navegador y un servidor.

Geolocation: Permite obtener la latitud y la longitud de un navegador web.

Por otro lado, existen otro montón de tecnologías que aún no se encuentran suficientemente maduras para usar en ningún navegador y por las cuales todavía tendremos que esperar un tiempo. Entre ellas se encuentran las siguientes:

CSS3 Transitions: Animaciones sobre interacciones directamente en CSS.

WebWorkers: Ejecución de javascript en segundo plano.

3D canvas con WebGL: Creación de imágenes 3D sobre el objeto canvas.

IndexedDB: Bases de datos de tipo clave/valor en el navegador similares a las NoSQL.

Drag & Drop: Api para arrastrar y soltar elementos entre el sistema operativo y el navegador.

Client-side form validations: Validaciones de formularios en el navegador sin usar javascript.

En resumen, nos esperan unos años muy prometedores en lo que ha desarrollo web se refiere con montones de tecnologías nuevas que vienen a facilitarnos el trabajo y a abrirnos un montón de posibilidades nuevas. Creo que es importante que comencemos a usar esas tecnologías desde ya para que los usuarios más avanzados puedan comenzar a beneficiarse de ellas, sin dejar de lado a los usuarios de navegadores sin soporte, y para que cuando llegue el resto de usuarios todas esas tecnologías se encuentren maduras y todos podamos disfrutar de una web mejor.

Publicado por

arctarus

Desarrollador web residente en Madrid

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s