Webmaster Libre » Codigo

Paneles de imágenes deslizantes sólo con CSS3

Alma Fernández — Thu, 26 Jan 2012 14:56:17 +0000

No creo equivocarme demasiado si digo que todos los desarrolladores de front-end están como niño con zapatos nuevos con CSS3 y HTML5. Por lo que podemos ir viendo, las posibilidades de darle un toque especial a un sitio web no hacen más que aumentar y buena muestra de ello son estos paneles deslizantes con imágenes realizados sin mediar javascript.

Su aspecto es inmejorable y, cuando la gente decida por fin librarse de los navegadores obsoletos, seguro que es sólo una parte de lo que se podrá lograr.

En el artículo que enlazo, además de unos cuantos ejemplos de las diversas transiciones que podemos realizar obtendrás el código fuente para poder hacerlo tu mismo.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Paneles de imágenes deslizantes sólo con CSS3 was first posted on enero 26, 2012 at 3:56 pm.

Scrollorama, haz locuras con el scroll de tu página

Alma Fernández — Thu, 26 Jan 2012 14:40:51 +0000

Scrollorama es un plugin para jQuery que te permitirá hacer cosas increibles con tus páginas cuando el usuario haga scroll.

Podrás hacer efectos parallax, animar y transformar texto (rotarlo, incrementar el zoom, girarlo, hacerlo desaparecer o aparecer suavemente…), mantener texto fijo en pantalla…

Visita la página del proyecto para ver un ejemplo pero, recuerda, estas cosas mejor cuando no las exageras demasiado. No queremos que a base de hacer efectos alucinantes tus usuarios se pierdan el contenido de la página ¿no?.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Scrollorama, haz locuras con el scroll de tu página was first posted on enero 26, 2012 at 3:40 pm.

Guía para desarrolladores de las APIs de HTML5

Alma Fernández — Tue, 24 Jan 2012 19:56:39 +0000

Además de las numerosas mejoras en la semántica de nuestro código, HTML5 trae bajo el brazo una serie de APIs que forman una gran parte de esta nueva especificación. Muchos de estos APIs llevaban tiempo dando vueltas por ahí, sin apenas documentarse y otras son totalmente nuevas.

EN .NetMagazine hacen un repaso a las APIs mantenidas en la especificación oficial del W3C y también a aquellas que todavía están sólo en la especificación del WHATWG. Además, recopilan otros APIs que se consideran incorrectamente parte de HTML5 y enlaces a demos y muestras del soporte actual de los navegadores de estas APIs e incluso ejemplos de polyfills con los que empezar a utilizar algunas de estas funcionalidades sin perder la compatibilidad entre navegadores.

No te lo pierdas en .netMagazine: The Developer’s Guide to the HTML5 APIs

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Guía para desarrolladores de las APIs de HTML5 was first posted on enero 24, 2012 at 8:56 pm.

Un vistazo al rendimiento de nuestras hojas de estilo

Alma Fernández — Tue, 24 Jan 2012 19:46:40 +0000

Con CSS3 trayéndonos grandes mejoras y muchas cosas bonitas que hacer con las hojas de estilo, puede suceder que sobrecarguemos nuestros CSS y, casi sin darnos cuenta, hagamos que nuestros sitios carguen más lento.

A la hora de optimizar la carga, sobre todo de sitios o aplicaciones grandes, solemos mirar primero a otros sospechosos habituales: imágenes, vídeos, javascript… Pero, a pesar de que confío que todos minimicemos en mayor o menor medida nuestros ficheros CSS existen más factores que pueden afectar a los tiempos de carga de un sitio web.

En Perfection Kills hacen un repaso al rendimiento de las hojas de estilo, aprovechando las herramientas que nos ofrecen los navegadores Opera y Chrome (WebKit). El artículo es largo y realmente interesante, no deberías dejarlo pasar pero, por si no tienes mucho tiempo aquí te dejo traducidas las conclusiones:

Reduce el número de selectores, incluso los destinados a IE (por ejemplo: .ie7 .foo .bar {})
Evita los selectores universales (‘*’), incluso los selectores de atributo inespecíficos ([type="url"]).
El zoom de la página afecta al rendimiento (ej. Opera)
En algunos navegadores el tamaño de la ventana afecta al rendimiento (ej. Chrome)
Los refrescos de página pueden afectar negativamente al rendimiento de las hojas de estilo en algunos navegadores (ej. Opera).
“border-radius” y “transform” son dos de las propiedades más “caras” (al menos en WebKit y Opera)

Como siempre, lo mejor es utilizar las herramientas de las que disponemos para comprobar caso por caso la eficiencia de nuestras hojas de estilo, en ocasiones no utilizar selectores universales o utilizar menos selectores puede suponernos un inconveniente y, dependiendo de como hayamos estructurado el resto de los estilos, algo que podemos dejar pasar.

¿Has notado algún otro agujero de rendimiento al generar tus estilos?

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Un vistazo al rendimiento de nuestras hojas de estilo was first posted on enero 24, 2012 at 8:46 pm.

Dropkick, dropdowns más bonitos

Alma Fernández — Fri, 13 Jan 2012 13:23:10 +0000

Personalizar los menús desplegables de un formulario es una labor que no suele ser ni cómoda ni fácil.

Existen múltiples plugins y scripts para hacerlo pero, en la mayoría de los casos, requiere sacrificar alguna funcionalidad o añadir toneladas de código extra.

Ojeando Criterion me encuentro con Dropkick, un plugin para jQuery con el que la tarea se convierte en algo sencillo y flexible.

Dropkick nos permite dar estilo a los elementos