La propiedad background-size permite establecer un tamaño a la imagen de fondo. Para ello se pueden utilizar tanto medidas en pixels, porcentajes, como lo valores cover o contain.
El valor cover, escala el tamaño de la imagen para cubrir el area de fondo, sin deformarla, de tal manera que puede haber partes que queden fuera del area de fondo.
Por otro lado el valor contain lo que permite es escalar la imagen de forma que encaje en ancho y alto en el area de fondo.
Las propiedades column-count, column-gap, column-width y column-rule
La propiedad Column Count resulta muy interesante ya que permite dividir un elemento en el numero de columnas que le indiquemos.
Su valor por defecto es auto, ajustandose al tamaño elemento.
Para indicar el número de columnas que deseamos unicamente tenemos que indicarlo introduciendo el valor numérico a continuación de la etiqueta de la siguiente forma:
Introducción al Canvas de HTML5
Una de las etiquetas con mas posibilidades de HTML5 es la etiqueta canvas. Es compatible con todos los navegadores actuales y con IE a partir de la version 9.
Esta etiqueta nos permite dibujar mediante javascript y mostrarlo en el navegador. La parte de HTML es muy sencilla, unicamente se ponen las etiquetas de apertura y cierre, del resto se encarga Javascript. Aunque es conveniente escribir un texto entre las etiquetas para usuarios con navegadores no compatibles con Canvas.
Filtros de imagenes con CSS3
La propiedad filter es una de las mas llamativas de la especificaciones de CSS3, aunque por ahora solo esta implementada en los navegadores webkit.
Con esta propiedad lo que conseguimos es poner filtros específicos a las imagenes. La manera de aplicarlos es mediante la propiedad filter seguido del tipo de efecto a aplicar y entre parentesis el valor del filto.
Continue reading…
Atributos DATA en HTML5
Hace unos años se usaba como recurso el crear atributos personalizados en los elementos HTML para guardar información relativa al elemento. Esta información nos era muy útil ya que mediante javascript podíamos tener acceso a los datos o modificarlos. Esto nos servia pero tenia un pequeño problema a la hora de validar el código, la W3C no lo tenía el la especificación de HTML y por lo tanto la validación fallaba.
History API
La APi History proveé de forma nativa la opción de acceder al Historial de Navegación sin tener que recargar la página.
Su funcionamiento es similar al de los botones que poseén los navegadores para avanzar o retroceder en el historial pero mediante acciones dentro de la misma página.
Aparte permite indicar el numero de paginas que se quiere navegar hacia delante o hacia atras.
Otra de la opciones que tiene es la de permitir ver el numero de paginas guardadas en el historial o la de agregar anotaciones a una página en concreto para luego poder acceder a ellas de manera automatica al volver a esa página.
HTML5 Web Storage
La API Web Storage de HTML5 nos trae una ventaja importante que es la posibilidad de almacenar datos del lado del cliente. Anteriormente se usaban la cookies para este cometido, pero Web Storage ofrece varias ventajas respecto a las cookies. Una de ellas es la capacidad, ahora tenemos 5 Mb frente a los 4 Kb que tienen las cookies. A diferencia de las cookies, que se puede acceder a ellas tanto desde el servidor como el cliente, en Web Storage se hace exclusivamente desde el lado del cliente.
Ademas al contrario de las cookies los datos no se envian al servidor en cada petición HTTP, mejorando el rendimiento.
Animación Básica en CSS3
Esta vez mostrare las opciones de animacion que tiene CSS3 mediante una animación básica y mas adelante iremos profundizando en el tema.
Para empezar creamos un documento HTML básico con un DIV con un id, en este caso id=”main”. Y dentro de esta capa pondremos una imagen, en este caso es una nube que haremos que se desplace por la pantalla de izquierda a derecha.
Geolocalización con la API de Google Maps
El otro día vimos como utilizar la Geolocalización de HTML5 para que nos diese la Longitud y la Latitud en la que nos encontramos.
Ahora vamos a utilizar estos datos y con la API de Google Maps vamos a mostrar nuestra posición en el Mapa partiendo del ejemplo del día anterior.
Para ello lo primero que vamos a hacer es llamar a la API desde nuestro código introduciendo el siguiente script.
Geolocalización en HTML5
Una de las API´s mas usadas en HTML5 es la Geolocalización la cual nos permite determinar la posición en la que estamos a través del navegador y para ello utilizaremos Javascript.
Lo primero seria crear una función que nos localice la posición. La función la llamanos Localizar a la cual le añadimos el siguiente código para que a través del navegador nos de la posición.