jmocana.eu

Maquetador web

contactar

Blog

¿sobre que escribo?

Archivo de Enero de 2011

Web Storage

5 comentarios »

Ene26

Web storage es un API de HTML5 que nos permite guardar datos estructurados en el cliente. Sustituye a las famosas cookies que son enviadas en las cabeceras HTTP. Los datos almacenados en disco solo podrán ser accedidos desde el cliente y no desde el servidor, se busca con esto aumentar la seguridad de la información enviada, además el tamaño de los datos almacenados en disco podrá ser mayor, aproximadamente de 5 Mb.

Web Storage define dos tipos de almacenamiento: sessionStorage y localStorage

sessionStorage

La información manejada mediante este mecanismo podrá ser accedida solo durante la sesión y en caso de tener varias ventanas abiertas la información mostrada en cada una de ellas podrá ser distinta. Los datos se perderán una vez se cierre el navegador.

localStorage

Permite guardar datos que podrán ser accedido una vez cerremos el navegador. La información será la misma en todas las ventanas abiertas dentro de una misma sesión.

Tanto sessionStorage como localStorage pueden hacer uso de los siguientes métodos y atributos:

  • setItem (setItem(key, value)): Permite almacenar un valor para una clave dada
  • geItem (geItem(key)): Permite recuperar un valor de clave dada
  • removeItem (removeItem(key)): Bora una clave y su valor
  • clear (clear()): Borra todas las claves almacenadas
  • length Este atributo nos permite calcular el número de claves guardadas
  • key (key(index)): Permite recuperar una clave pasándole un índice determinado. Mediante un bucle y el uso de este método podremos recuperar todas las claves guardadas en nuestro disco.

    Código JavaScript

    
for (var i= 0; i < localStorage.length; ++ i){
    claves[i] = localStorage.key(i)
}

Respecto al soporte que ofrecen los navegadores web para esta API lo podéis ver en la siguiente tabla: Fuente: caniuse.com

Soporte de los navegadores de la API Web Storage

Leer el resto de esta entrada »

Referencia HTML5

1 comentario »

Ene07

Si estáis pensando en empezar a maquetar vuestras páginas con HTML5 quizás os pueda interesar esta guía de referencia.

  1. 1. Breve presentación de HTML5. Se nos muestra resumidamente mediante diapositivas todas las novedades que nos ofrece HTML5: Presentación HTML5
  2. 2. Podéis encontrar toda la documentación de la W3C sobre HTML5 en http://dev.w3.org/html5/spec/Overview.html
  3. 3. Os paso dos manuales bastante completos sobre HTML5: Dive Into HTML5html5doctor.com
  4. 4. Hoja de estilos de partida “reset.css” para HTML5: html5reset.org/
  5. 5. El gran problema con el que nos vamos a encontrar a la hora de implementar nuestras webs con HTML5 consiste en que no todos los navegadores web dan soporte HTML5. Os paso a continuación una tabla con el soporte HTML5, CSS3, etc de los principales navegadores. Tabla soporte HTML5, CSS3 de los navegadores
    Si nos fijamos en la tabla “New semantic elements” veremos que tan solo Google Chrome nos ofrece un soporte completo mientras que internet Explorer ni en su versión 8.0 es capaz de reconocer etiquetas de HTML5. Por desgracia un gran porcentaje de los usuarios que entran a nuestras webs utilizan Internet Explorer por lo que se hace necesario buscar una solución a esta falta de soporte en algunos navegadores.
  6. 6. Cómo hacer que todos los navegadores rendericen HTML5 (incluso IE6)
  7. 7. Otra forma de renderizar nuestro código HTML5 es mediante la librería de javascript “Modernizr”
    Modernizr no solo nos permite usar elementos de HTML5 sino que además se encarga de crear clases en la etiqueta con las propiedades que soporta y las que no nuestro navegador, lo cual nos da mayor liberatad a la hora de dar estilo a nuestra página. Por ejemplo accediendo a la página de Modernizr desde mi navegador Firefox 3.6.13, se me genera en la etiqueta la siguiente clase:

    Código HTML5

    <html class="js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths"><7span>
  8. 8. HTML5Rocks: Página para formación de HTML5 ofrecida por Google
  9. 9. Validador de HTML5
  10. 10. HTML5 for Web Designers

Nuevo rediseño de: jmocana.eu – maquetador web

0 Comentarios

Ene05

Después de mucho tiempo sin escribir me he dignado por fin a quitar las enormes telarañas que rondaban por todo el blog y le he dado un nuevo lavado de diseño con la intención de empezar a utilizar tecnologías más modernas, así como de conseguir un diseño más sencillo que favorezca la experiencia de usuario y la accesibilidad.

Principalmente he integrado tres cambios en el blog:

  1. Cambio radical del diseño buscando unos contenidos mejor estructurados y usando unos colores pastel que le aporten sencillez y que permitan una fácil lectura de todos los contenidos del blog
  2. Uso de HTML5:

    Código HTML5

    <!DOCTYPE html>
<html lang="es">
  3. Por último he abierto cuentas en twitter, Linkedin y Bitacoras, con la intención de realizar un seguimiento de todos los artículos interesantes que vaya encontrando, mostrar mi perfil profesional y disponer de una zona donde se resuma toda mi acividad en el blog respectivamente. Las cuentas son las siguientes:

Sin más, os deseo a todos un feliz año 2011, haber si en este año que entra me lo curro un poquito más y os puedo ofrecer algún que otro post de interés ;)