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.
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?.
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
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:
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?
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 <select> requiriéndonos únicamente que les demos un atributo name, nada de divs extras ni cosas raras. La apariencia se controla mediante hojas de estilo y no perdemos ninguna funcionalidad propia de los dropdowns (si añadimos el tabindex se pueden seguir navegando con el tabulador).
Uno de los “problemas” que ha enfrentado el diseño web desde sus comienzos es el de adaptarse al dispositivo desde el que se visualizan las páginas.
No hace tanto era suficiente contar con la resolución de pantalla más típica para asegurarnos, hasta cierto punto, de que nuestros diseños se mostrarían correctamente en todos los ordenadores. Pero ahora, que ya no se accede a ellas desde un solo tipo de dispositivo y las resoluciones son cada vez más dispares, esta labor se hace realmente compleja. Puedes optar por hacer diferentes versiones de tus sitios pero el gasto de tiempo y esfuerzo no es realmente práctico y rompe un poco con la siempre apreciada adaptabilidad de la web.
Initializr es una plantilla con la que te será más cómodo crear diseños responsivos, es decir, adaptables al dispositivo en que se visualizan. Una suma de diseño líquido basado en porcentajes y media-queries será todo lo que necesites.
Con Initializr dispondrás de una base para crear sitios que se verán bien en móviles, tablets, ordenadores con pantallas “normales” y ordenadores con pantallas enormes.
Puedes descargarlo desde la web del autor, donde además podrás leer una explicación exhaustiva del tema. Y, si el inglés no es tu fuerte, podrás leer una traducción cortesía de Diego Ante.
Vía Think Vitamin
A pesar que todavía está muy verde la especificación de CSS3, ya podemos usar algunas reglas como, transform, box-shadow o border-radius. Eso si, dándole a cada navegador que lo soporte sus propias reglas. A través de Web Resources Depot conozco CSS3, Please!
CSS3, please! es un generador de propiedades CSS3 para todos los navegadores. Al entrar se nos presenta una hoja de estilo que podremos editar para adaptar a nuestras necesidades y ver los cambios aplicados a un cuadrado resaltado. Incluso incluye propiedades para Internet Explorer en los casos que la transformación esté soportada mediante filtros.
No deja de ser un asco tener que duplicar o triplicar una regla de estilo para que funcione en casi todos los navegadores pero, por lo menos, ahora es más rápido.
Si hay algo que hace sencillo usar jQuery es lo fácil que es encontrar plugins desde la misma página del framework.
Ahora, los que prefieren MooTools disponen de un directorio propio donde ir a buscar plugins: MooTools Forge.
Allí podrás encontrar plugins categorizados por tipo y, si eres desarrollador, también podrás subir los tuyos.
Sin duda, un gran recurso para los usuarios de esta fantástica librería.
De un tiempo a esta parte empiezo a ver por muchos sitios una barra de herramientas en la parte inferior de las páginas con utilidades como enviar enlaces a redes sociales, suscribirse al feed o abrir una ventana de chat. Muy al estilo de la que emplea, por ejemplo, Facebook.
Existen algunos servicios como Wibiya con los que generar nuestra propia barrita de forma cómoda y sencilla pero, si buscamos ese punto extra de personalización nos toca ponernos manos a la obra y crear la nuestra propia.
En pvmgarage nos enseñan a hacer una gracias a jQuery y CSS3, lo malo es que no se lleva nada bien con Explorer 6 o 7 – y en el 8 se ve ligeramente fea – así que, al menos de momento, queda relegada a proyectos donde no te importe perder unos cuantos visitantes por culpa de su navegador. O eso, o te toca ponerte a trabajar un poco más para adaptar algunas cosas ya que el autor no considera esos navegadores porque “están pasados” (sic).
No hace demasiado, preopuparse por los navegadores móviles en según que tipo de sitios era esfuerzo extra y generalmente servia para poco.
Hoy, con el boom de teléfonos que ofrecen una experiencia bastante buena de internet y la llegada, por fin, de tarifas planas medianamente decentes. Empieza a ser una cuestión importante, redirigir a nuestros visitantes móviles a sitios más acordes a sus dispositivos.
Detect Mobile Browser es un proyecto Open Source que nos ofrece código en diferentes lenguajes (.htaccess de Apache, JSP, PHP, Rails, ASP, Javascript y ColdFusion) listo para descargar e incorporar a nuestros proyectos. Además, en su web podremos crear enlaces del tipo http://detectmobilebrowser.com/www.webmasterlibre.com|m.webmasterlibre.com (ojo, a dirección “móvil” no existe al menos de momento) con el que pasar un enlace que llevará a los usuarios a distintas versiones de la web dependiendo de su dispositivo.
Enlace: Detect Mobile Browser
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
