Uso e inconvenientes de fuentes embebidas en el diseño web

Hoy voy a hablar sobre el uso de fuentes embebidas con la propiedad CSS @font-face y los inconvenientes con los que nos podemos encontrar en la maquetación de una web si usamos esta propiedad.

Para aquellos que no lo sepan, con la propiedad CSS @font-face es posible utilizar fuentes en nuestros diseños sin necesidad de tenerlas instaladas en el equipo cliente. Hasta no hace tanto esto no era posible, y limitaba bastante el diseño web, por lo tanto, esta propiedad supone un gran avance.

Esta propiedad no es nueva, ya existía en la especificación de CSS 2, se eliminó en CSS 2.1 (que usaban la mayoría de los navegadores) y ha vuelto con CSS 3.

El W3C anuncia nuevos niveles para las Hojas de Estilo (CSS)

El W3C anuncia nuevos niveles para las Hojas de Estilos (CSS), el lenguaje que permite dotar de estilo a la Web. Gracias al esfuerzo del Grupo de Trabajo de CSS de la W3C ha conseguido hacer de CSS una tecnología interporable.

CSS lleva más de una década usandose en la web, pero ha sido necesario algo de tiempo más para que las especificaciones y las implementaciones convergiesen, demostrando de la excelente salud de la que goza esta tecnología actualmente.

Entorno de desarrollo moderno PHP, MySQL en Ubuntu

Me voy a dejar una guía escrita, para mi yo del futuro, de cómo preparar un entorno de desarrollo (no es para producción) PHP y MySQL sobre Ubuntu, y que pueda tenerlo preparado en menos de 20 minutos.

Las herramientas que voy a necesitar para un desarrollo más o menos moderno son las siguientes:

  1. PHP
  2. MySQL Server (u otro gestor de base de datos)
  3. Composer (gestionar dependencias PHP)
  4. Nodejs y npm (gestionar dependencias JavaScript)
  5. Git
  6. Xdebug
  7. ¿Apache? (ya no es necesario)

Uso CSS3 - Transiciones

Para dar dinamismo a nuestras páginas web vamos a ver como se crean transiciones usando la tecnología de CSS3.

Podemos ver en este ejemplo si estáis usando las últimas versiones de navegadores como Firefox, Chrome o Safari.

Para empezar vamos a ver el código HTML que he usado para la creación de este menú social con esta transición y que da un efecto de rotación a las imágenes usadas.