Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:
<div class="clear"></div>
existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.
Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.
A simple jQuery plugin to get albums and images from Picasa without the need for PHP, Ruby, or any other server side language. Makes it easy to create a simple, dynamic, free, client-side-only image gallery. …
Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.
Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:
Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.
Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.
Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.
Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:
Una de las cosas que más me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.
Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaño original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.
Para hacerlo es sencillo, creas una capa con un tamaño especÃfico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que será el thumbnail en sÃ.
Dentro de la capa incluyes un enlace que se mostrará como un bloque (display: block) y que no mostrará nada, bueno, en este caso si mostrará un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verá, esto lo hacemos asà para que los dispositivos que no admitan estilos puedan ver algo.
Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.
Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.
Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente. JIT