HTML5-Gestionando datos

logoRF_HTML5Sabemos que una web ha de ser dinámica, ha de poder cambiar, contra mas continuo sea el cambio, mejor, y de eso se encargan las bases de datos, y los lenguajes de servidor, pero esos temas los tendremos que dejar para mas adelante; sin embargo, ahora y con solo HTML5, y un poquito de javascript, podemos llamar la atención de nuestro visitante….

HTML5 aporta 2 atributos nuevos que se pueden utilizar dentro de cualquier etiqueta, y que nos permiten cambiar cualquier zona de nuestra pagina en un campo de entrada, y ademas, revisar la ortografía, se trata de:

contenteditable

Este atributo, lo podemos indicar dentro de cualquier etiqueta, y puede tener dos valores:

  • true : si se indica “true”,  todo lo que este dentro de la etiqueta, y todas las etiquetas contenidas dentro de esta, pasa a ser editable
  • false; si se indica “false”,  esa etiqueta, y todas las contenidas dentro de ella, pasan a ser no editables.

Para hace la primera prueba, podéis crear en vuestra zona de trabajo una carpeta llamada, por ejemplo, contenteditable, y dentro de la misma, los dos ficheritos de siempre (index.html y estilo.css)

Si ahora, dentro de index.html escribís:contenteditable_base

Hasta aquí, solo hay dos novedades, una es la etiqueta “fieldset”, que genera una caja con su contenido, y que si se indica la etiqueta “legend”, aparece lo escrito, interrumpiendo el borde de la caja, lo que deberia verse como esta imagen.contenteditable_base_visto

y la segunda novedad es la utilizacion del atributo “contenteditable” dentro de la etiqueta “ul”, que era la que iniciaba la lista desordenada, y por eso se ve el marcador antes de los tres puntitos…

Lo curioso empieza ahora, escribid las lineas que os indico, y lanzar la visualización:visualizarFichero

y cuando aparezca la imagen en vuestro navegador, si hacéis un click con el ratón al lado del punto, veréis que el cursor pasa a modo de entrada, y que podéis ir escribiendo lo que queráis.

De momento, no se guarda en ningún sitio, pero si imprimís, veras que aparece impreso….¿empezáis a imaginaros las posibilidades?

spellcheck

Este atributo también lo podemos indicar en cualquier sitio…que hayamos indicado contenteditable, o en campos input, tiene dos posibles valores:

  • true: recomienda el análisis ortográfico
  • false: impide el análisis ortográfico.

El análisis ortográfico, es una responsabilidad del navegador, por lo que se realizará en el idioma configurado en el navegador, y siempre que el usuario no lo haya bloqueado.

2014-08-19_17h59_15

hidden

Este atributo, hace que quede oculta la etiqueta en donde aparece y todas sus descendientes

Nuestro mini TODO

Para practicar todo esto ,  vamos a escribir una miniaplicacion… de poca utilidad en el mundo real, pero creo que os puede ayudar a entender todo esto.

Primero de todo, tenemos que saber que en HTML5 aparece algo que se llama “localStorage” y que es una optimización de las “cookies”; asi como ellas, viajaban en cada llamada que hacíamos, y tenían una capacidad máxima de 4k, “localStorage, acepta hasta 400Mb, y queda residente en el ordenador del usuario.

Esto significa, que lo que un usuario guarde en su ordenador no podrá ser accedido por nadie mas fuera de esa maquina, ni siquiera por otro navegador distinto al que lo creo, pero….la pagina que lo creó, dispondrá siempre de esa información, aunque se cierre el navegador, o se apague la maquina; cada vez que se llame a esa pagina, con el mismo navegador, toda la información guardada, quedara disponible.

Bien, vamos a hacer que aquellas lineas que podíamos escribir antes, se guarden en nuestro “localStorage”, y luego las volvamos a ver, para ello, deberemos añadir a la pagina anterior, un poco de javascript, y para simplificarlo mas, utilizaremos una librería muy común, como es jQuery.

Para poder utilizar los recursos de esa librería, debemos incorporar en nuestro head una linea, para que nos cargue el código fuente. Esta librería la podemos bajar y guardar en nuestra web, pero…también la podemos leer directamente del repositorio de Google, por lo que, para que vamos a ocupar espacio en nuestro sitio, y consumir nuestro ancho de banda?

Incluyamos en nuestro head la carga:

carga_de_jquery

Y a continuación, tenéis el uso. Aunque el tema de javascript y jQuery, no es el objeto de este articulo, os voy a intentar describir lo que se hace en esas lineas.

Fijaros que están rodeadas por la etiqueta “script”, que indica que todo lo que hay dentro, no se va a ver como HTML, si no como javascript.

2014-08-19_18h33_48

En la linea 25 creamos una función, que serán todas las lineas, hasta la 32, y decimos que solo se ejecute cuando todos los componentes de la pagina se hayan cargado.

En las lineas 26 y 27, preparamos una función para que cuando la caja “tareas”, definida en la linea 14, pierda el foco, (salgamos del área de edición) se grabe todo lo que haya en el área en localStorage, dentro de una clave que he llamado misTareas.

Las lineas 29 y 30, se encargan de que cuando se inicie la página, se compruebe si existe una clave llamada “misTareas”, y si es así, se mueva todo su contenido a la caja “ul” llamada tareas, con lo que se visualizara.

Solo con eso, todo funciona. Acordaros que siempre se ha de abrir con el mismo navegador….

Este es el código en Fiddle, en donde le he añadido un poco de CSS, lo que nos permitirá cambiar el estilo del body, pero no hemos programado el guardar los cambios de estilo….aunque se podría.

El siguiente articulo, nos recordara todo lo que hemos dejado atrás, y como podemos seguir haciendo lo que ya hacíamos,…..pero bien.

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en CSS, Desarrollo Web, Diseño, Formacion, HTML5 y etiquetada , , . Guarda el enlace permanente.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.