Generador de Sprites CSS

Cuando se está haciendo un sitio web, uno de los factores que hacen que el sitio cargue más lento es la cantidad de peticiones al servidor, por lo tanto, cada imagen que se utilice para un enlace genera una petición y se hace un poco más lenta la carga. La solución: sprites CSS.

Un sprite es una imagen que contenga a todos los botones que se van a utilizar y se incluye como background en los objetos (en este caso los enlaces) y se cambia la posición del background para utilizar la ubicación correcta del botón.

Aquí hay una liga donde subes las imágenes y genera la imagen grande y su css: http://css.spritegen.com/

 

CSS para verificar markup erroneo

Con este código css insertado en tu sitio web, van a resaltar en diferentes colores los bloques donde haya algún error de markup y así podremos corregirlos.

/*
VERIF etiquetas

*/
div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}

*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}

img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}

table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}

a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

Tags:

Social Media Revolution 2011

Está chido este video de Social Media Revolution

 

Nostalgia 8 bits en video

8 bit Invader (maping) from Darkfejzr on Vimeo.

 

Ahhh que grandes eran esos videojuegos!!!

Tags:

Sencha Touch

El sencha touch es un framework javascript que puedes utilizar para tus aplicaciones en móviles (iphone, ipad, etc). Lo interesante es que utiliza javascript para manejar todos los eventos de touch en este tipo de dispositivos.

sencha touch

Si tienes uno de estos dispositivos, puedes ver una demostración con el juego de solitario aquí: http://touchsolitaire.mobi/app/

Identation!

Identation

Fondo Full Screen CSS

Aquí escribo sobre cómo hacer una página que tenga un fondo que abarque toda la pantalla, no importando la resolución del monitor.

full screen css

Para ver el demo y descargar el ejemplo ve a: http://killerpixel.com.mx/demos/fullpagebackground/

Obtener último tweet con PHP

Este código sirve para obtener el último tweet de una cuenta específica con PHP:

$username="el_nombre_de_usuario";
$format="xml";
$tweet=simplexml_load_file("http://api.twitter.com/1/statuses/user_timeline/{$username}.{$format}");
echo $tweet->status[0]->text;

Tags: , ,

Validación de formularios

Aquí otro plugin de jquery, sirve para hacer la validación de los formularios antes de que sean enviados.

jquery validate

Página: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Cualquier fuente para tu sitio web!

Que jodienda es tener que escribir todos tus sitios web sólamente con fuentes de sistema no, pues aquí está la solución. Lo único que tienes que hacer es subir la fuente que tienes en tu computadora, y el generador realiza la conversión y te da todos los archivos que necesitas, incluyendo el css y los archivos de fuentes.  Pruébenlo y me dicen como les va.

fontsquirrel

Página: http://www.fontsquirrel.com/fontface/generator

Tags: , ,