El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Paneles de imágenes deslizantes sólo con CSS3

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.

CSS

Comenta

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

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?.

Javascript

Comenta

Guía para desarrolladores de las APIs de HTML5

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

(x)HTML

Comenta

Un vistazo al rendimiento de nuestras hojas de estilo

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?

CSS

Comenta

RedCoruna se une al Grupo Host Europe

Hoy nos hemos despertado con una noticia estupenda: RedCoruna, la empresa de hosting que nos da alojamiento y a los que considero ya auténticos amigos, ha pasado a formar parte del Grupo Host Europe.

Sin duda, es una excelente noticia para todos. Para ellos porque con esta unión pasan a formar parte del mayor grupo de host privado de europa, con todo lo que eso conlleva y para nosotros, sus usuarios, porque esta unión les permitirá seguir creciendo, mejorando su servicio y, seguro, ampliando su oferta.

Esta unión no supondrá modificaciones de los actuales compromisos con sus clientes, ya que el Grupo Host Europe ha apostado por ellos como empresa, con su propia filosofía y permitiéndoles seguir trabajando a su manera. Eso si, ahora tienen un gran respaldo y se les abren datacenters en UK y Alemania.

Citando desde su blog:

Todas y cada una de vuestras ideas, sugerencias y peticiones forman parte de nuestros objetivos, y nuestra integración en el Grupo Host Europe nos permitirá cumplirlos de forma más rápida y eficaz potenciando un crecimiento responsable.
.
Se trata de una gran noticia para todos los que formamos parte de este equipo, ya que continuaremos trabajando bajo la dirección del fundador de RedCoruna, Luis Veiga, y el Grupo Host Europe nos permitirá contar con más recursos para poder seguir creciendo con nuestros valores.

Desde aquí, mi mas sincera enhorabuena.

Noticias

Comenta

El cierre de Megaupload y la defensa de la “cultura”

Dudo que a estas horas haya alguien que no se haya enterado de lo de Megaupload. Los norteamericanos siempre tan espectaculares, detenciones internacionales, mega conspiraciones, todo muy suyo…

Personalmente me importa bien poco que le hayan cerrado el chiringuito al señor DotCom, a fin de cuentas se estaba lucrando ampliamente con el trabajo de otros y eso, en mi mundo, no es ser un adalid de los derechos civiles si no un caradura con todas las letras.

Lo que si es preocupante es el trasfondo del tema. Sin necesidad de aprobar la SOPA/PIPA, los Estados Unidos pueden y de hecho meten mano a cualquier ciudadano del mundo. No sé si deberíamos sorprendernos ya que son capaces de invadir paises para forzarles su paz, pero lo que si es cierto es que este tipo de acciones pueden suponer un retroceso en la confianza del usuario en los servicios online, sobre todo cuando lo que se quiere almacenar son ficheros importantes o con información confidencial.

Leyendo el extenso escrito de acusación (algo que he hecho esta tarde, con calma) si parece probado que MU tiene todas las de perder, no se trata de un cierre porque si. Es algo que se ha hecho a conciencia, una investigación que buscaba tumbar a este conglomerado de empresas. Ojalá pusieran el mismo interés en tumbar las redes de pornografía infantil o las mafias de explotación humana, ojalá le dieran el mismo valor a los derechos humanos que a los derechos de autor.

Ahora la pelota, una vez más, está en el tejado de la industria. Queda probado que la gente está dispuesta a pagar y modelos como el de Spotify son plenamente viables, sólo falta que se bajen de la burra de sus inflados egos y den a lo que hacen el valor que realmente tiene, que no es más que el que el mercado les permita. No creo que, con la que está cayendo, nadie queramos financiar los chalets en Miami de nadie, sea el dueño de MU o el cantante de la machacona canción del verano.

Noticias, Opinión

2 Comentarios

Dropkick, dropdowns más bonitos

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).

Javascript, Recursos

2 Comentarios

Initializr, una buena base para tus diseños adaptables

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

(x)HTML, Recursos

3 Comentarios

¡Feliz año nuevo!

Un año más, que cosas, parece que fue ayer cuando comenzó este blog pero el tiempo pasa y casi sin darme cuenta estamos en 2012. Aunque por aquí no me hayáis visto demasiado, este año ha estado lleno de trabajo, proyectos e ilusiones. Poco a poco espero poder ir contando más pero, de momento, dejémoslo ahí.

El principio de año es un gran momento para hacer una revisión de como están las cosas y empezar o darle nuevos ánimos a nuestros proyectos ¿verdad?

Los que no paran y empiezan el año con fuerzas y ánimos renovados son nuestros amigos de RedCoruna. Como sabréis y habréis visto, no dejan de ofrecernos cupones de descuento para que todos podamos disfrutar de un gran alojamiento al mejor precio. Ahora, para celebrar el año nuevo reactivan el cupón descuento con el doble de descuento que nos facilitaron para que, si todavía no lo habéis hecho, os aprovechéis de la promoción.

El cupón RCwebmasterlibre estará disponible hasta el 29 de febrero (que suerte de año bisiesto). Así que si necesitas un alojamiento de calidad, a un precio asequible y con un equipo de profesionales excelente detrás no dejes pasar la ocasión. Recuerda, el cupón hasta el 29 de febrero te da unos descuentos de:

*al contratar 6 meses se obtienen 2 meses gratis
*al contratar 1 año se obtienen 6 meses gratis
*al contratar dos años se obtiene 1 año gratis

Así que no lo dudes, con estos descuentos ¿quién puede resistirse?

Lo dicho, feliz año a todos y que este nuevo año nos traiga la fuerza e ilusión necesaria para hacer de estos 12 meses que tenemos por delante los mejores de nuestras vidas.

General

1 Comentario

Actualización de cupones descuento con RedCoruna

Como recordaréis (y podéis ver en el archivo del blog), los amigos de RedCoruna hace tiempo que vienen ofreciéndonos un cupón descuento muy interesante para alojar nuestros sitios web. Este cupón, en principio, iba a ser algo temporal pero, como habéis podido comprobar, han sido generosos y nos lo han mantenido de forma permanente, incluso tirando la casa por la ventana con descuentos excepcionales.
Ahora, con este nuevo curso, nos siguen facilitando el cupón con las condiciones originales, consigue hasta 6 meses de alojamiento web gratis introduciendo en tu proceso de compra el cupón descuento RCwebmasterlibre.

Más información

General

2 Comentarios

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna