ProgramandooIntentándolo

2 Nov 2017

Imágenes responsive con HTML y CSS

reset css

Las imágenes y el diseño web responsive parece que no se llevan muy bien, porque encajar elementos con tamaños fijos en otros con tamaños relativos no siempre es sencillo, pero por suerte tenemos varias posibles soluciones para las imágenes.

Hay dos formas distintas de afrontar el problema, que la imagen tenga un tamaño relativo en lugar de uno fijo y así se adaptará a los diferentes tamaños de pantalla o bien tener distintas versiones de las imágenes para los distintos tamaños posibles.

Como suele ser habitual dependerá de cada caso concreto cual es la mejor solución. Por ejemplo en una página en la que tengamos 20 imágenes de alta resolución sería conveniente tener diferentes versiones de las imágenes para que el tiempo de carga sea más rápido en dispositivos en los que no vamos a poder aprovechar tanta resolución y que ...

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:

if (navigator.geolocation) { // Obtenemos la ubicacion } else { alert("Tu navegador no soporta la geolocalización, actualiza tu navegador."); } 2. Obtener la ubicación

El primer método que veremos es getCurrentPosition() que como su nombre indica nos devuelve la ...

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 información se guarda hasta que ...

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 versión con solo ...