Programando o Intentándolo

2 Dic 2013

Geolocalización con HTML5

El API de geolocalización de HTML5 permite obtener la ubicación del usuario para usarlo en cualquier aplicación web. Como es normal, por motivos de privacidad el usuario debe de dar su consentimiento para poder usar esta información, por lo que si el usuario no quiere no podremos obtener esa información.

1. Comprobar si el navegador soporta la geolocalización

Aunque los navegadores modernos lo soportan sin problemas nunca esta de más hacer esta comprobación para poder indicar al usuario si su navegador no soporta esta característica para que se de cuenta de que es problema de su navegador y no de la aplicación. Además es tan sencillo como hacer la siguiente comprobación:

[crayon-5781ce9843d5e202609277/]

2. Obtener la ubicación

El primer método que veremos es getCurrentPosition() que como su nombre indica nos devuelve la posición actual. Esta función devuelve el valor de la posición tan pronto como le sea posible, por lo que ...

15 Nov 2013

Nuevas Etiquetas Semánticas de HTML5

Logo HTML5 Semantics

En HTML5 se han introducido un conjunto de nuevas etiquetas semánticas para que la estructura de una web tenga sentido por si sola y permita marcar las partes de la pagina como la cabecera, el contenido o contenidos, el pie, los menús, etc. y esto unido a los fragmentos enriquecidos o rich snippets hace que se puedan interpretar mejor los contenidos con el consiguiente beneficio para los usuarios, ya que los buscadores podrán ofrecerles contenidos más relevantes en sus búsquedas, pero de cara a lo que ve el usuario no hay ninguna diferencia.

Las nuevas etiquetas

Estas nuevas etiquetas como decía no aportan nada desde el punto de vista estructural (son como un div), ni tampoco desde el punto de vista visual porque para eso están las hojas de estilo, vamos a verlas y casi con el nombre se puede ver para que se ...

12 Abr 2013

Ejemplos de localStorage y sessionStorage en HTML5

Las cookies eran bastante mejorables así que se decidieron a incluir en HTML5 localStorage y sessionStorage que podríamos decir que es la evolución de las cookies.

Las características tanto para localStorage como para sessionStorage son:

La capacidad es de 5Mb mientras que la de las cookies era de tan solo 4Kb. La información no es incluida en cada petición al servidor como sucede con las cookies, sino que solo se obtiene cuando se quiere usar. La información es almacenada en pares clave-valor por lo que se puede usar como si se tratase de variables. Una página web únicamente puede acceder a la información que ha almacenado ella por lo que es más seguro.

La diferencia entre localStorage y sessionStorage es que la información almacenada con localStorage se guarda indefinidamente hasta que sea eliminada mediante código o bien borrada desde el navegador y con sessionStorage la ...

15 Mar 2013

Crear Tooltip usando javaScript

En el post anterior puse un ejemplo de como crear tooltips personalizados usando únicamente CSS para los que no saben javaScript o no lo quieren usar. En esta ocasión os comparto el código necesario para que lo puedas usar si te gusta y las explicaciones de que es lo que he hecho.

Como comentaba en el post anterior en HTML se pueden crear tooltips usando el atributo title, aunque no se puede personalizar su estilo y solo pueden tener texto plano.

Para crear el tooltip de esta forma es necesaria una función javaScript, un CSS y un elemento de HTML que llame a la función.

El CSS pues puede ser como quieras, lo único obligatorio es que el posicionamiento sea absoluto, para que se muestre por encima del resto de la página y no descoloque todo. El z-index lo he dejado de la ...

15 Mar 2013

Crear tooltips usando CSS

Los tooltips son esos cuadraditos de texto que aparecen al dejar el ratón sobre algún elemento ya sea de una pagina web o de cualquier programa y dan alguna información de que es o de como usarlo.

En HTML se pueden crear estos mensajes usando el atributo title y poniéndole el texto que se quiera, en la palabra tooltip en negrita puedes ver el ejemplo del uso de este atributo.

[crayon-5781ce9847c00394204009/]

Así de sencillo es pero el aspecto tampoco es que sea muy bueno y es probable que no quede bien con el estilo de tu web o que quieras introducir un enlace, una imagen o cualquier elemento en el tooltip y esto con el atributo title no se puede hacer. Vamos a ver lo se sencillo que es hacerlo usando solo CSS (Aquí puedes ver como hacerlo usando javaScript para generar el tooltip y hacerlo ...