¿Qué son las Variable Fonts? Variable Fonts son la nueva revolución en lo tocante a diseño tipográfico. Han sido desarrolladas por un grupo de expertos de Apple, Google, Microsoft y Adobe. Se empezaron a dar a conocer en eventos mundiales…

Bootstrap, un sistema de 12 columnas para construir webs responsive Bootstrap es un framework o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación…

Ddsign estrena nuevo diseño. Le he dado un giro visual bastante importante. Aunque conservando la misma estructura digamos clásica y manida de un blog con sidebar, he cambiado totalmente el aspecto. Ddsign era antes un blog dorado y negro, tenía…

La moda del el triángulo en diseño web de los últimos años ya pasó. Ahora es el momento del círculo. Un círculo es un elemento que puede conseguir una composición limpia y equilibrada. El círculo parece encajar bien casi en…

Desde mi entrada Sticky footer, pie de página fijo al final de la página de 2011, podemos decir que el uso de un pie de página fijo es una constante en la mayoría de las webs de hoy en día.…

Leo esta tarde en Genbeta que ya es oficial que Internet Explorer 8, 9 y 10 se quedarán sin soporte la semana que viene. Microsoft lo ha anunciado el pasado 6 de enero. Advierte que el próximo 12 de enero…

Icomoon.io es una herramienta que nos ayuda a gestionar y crear icon fonts. Icomoon ofrece bibliotecas de fuentes de uso libre y también nos permite combinar las diferentes fuentes y también nos da la oportunidad de crear y modificar nuestra…

Bienvenidos, icon fonts Los icon fonts se tratan de iconos que en realidad forman parte de una fuente tipográfica. Esta fuente en lugar de letras contiene iconos. Esta idea ya existía hace años en fuentes llamadas dingbat , que quizás…

Esta es para mí la mejor recopilación de galerías de inspiración web. En estos sitios se recopilan las mejores webs del momento para admirarlas, inspirarnos y conocer las tendencias actuales en diseño web. Awwwards Son los premios que reconocen el…

Un triángulo, en geometría, es la reunión de tres segmentos que determinan tres puntos del plano y no colineales. Cada punto dado pertenece a dos segmentos exactamente. Los puntos comunes a cada par de segmentos se denominan vértices del triángulo…

Long shadows son las (relativamente) nuevas sombras que se extienden desde el objeto formando un ángulo de 45 grados y cuyo tamaño es de 2,5 veces el objeto. Esta tendencia se está usando actualmente entre los diseñadores gráficos y web…

Desde que utilizamos el método @font-face podemos incluir mucha más variedad de fuentes tipográficas en nuestras creaciones web. En este post quiero reunir una serie de galerías en las que podemos ver estas webfonts en uso. The Web Fonts Gallery…

Esta es mi selección de libros y ebooks sobre diseño web. Algunos son gratuitos y se pueden leer online, otros incluso permiten la descarga, otros son de pago y se pueden conseguir en formato físico y/o digital. Diseño Web Designing…

"CSS Animations", una guía sobre las animaciones y transiciones CSS escrito por Val Head. Es un libro dedicado a diseñadores y desarrolladores web, los cuales quieren conocer las novedades de las animaciones CSS, quienes quieren comenzar a utilizarlas y a…

Esta es una pequeña recopilación de tutoriales y demostraciones de menús off-canvas. Foundation Off-canvas El framework Foundation viene preparado con componentes para crear menús Off-canvas de una forma sencilla. Pushy Pushy es un menú off-canvas responsive creado con trasiciones y…

Quería compartir con vosotros los recursos sobre CSS3 que he conocido esta semana. Se trata de un generador de efectos CSS3: gradientes, bordes redondeados, texturas y sombras. Y otro generador online muy potente para dar estilos a botones, formularios, iconos…

Dos de los sistemas más famosos para embeber fuentes tipográficas en la web son Google Fonts y, ya más reciente, Adobe Edge Fonts. Podemos necesitar combinar dos o más tipografías para nuestros diseños web y resulta difícil decidirse por el…

El pasado 28/02/2013 este vídeo sobre Preprocesadores CSS fue emitido en directo por HTML5 Spain. Naiara Abaroa en su charla instructiva y amena nos habló de los principales preprocesadores CSS: less, sass y stylus. El modo de maquetar web y…

Me han recomendado ver este video sobre Responsive Web Design. Es acerca de la idea de que el diseño web no debería ceñirse a un dispositivo o resolución concreto, sino pensar la web de forma global.

Vitaly Friedman es el autor de esta presentación tan interesante sobre RWD (Responsive Web Design)

Adobe ha lanzado recientemente una nueva familia de productos centrados en las tecnologías webs emergentes. Entre ellos destaca Adobe Edge Web Fonts con el cual Adobe nos ofrece la posibilidad de utilizar tipografías gratis y de open source. Este es…

Hacks para Internet Explorer Hacks para Firefox: Hacks para Chrome y Safari FUENTES: ww.fix-css.com

Los botones (input, button) en el iPad se muestran con bordes redondeados y sombras. Esta apariencia puede no convenirnos en el diseño de alguna web determinada. Estos estilos se pueden anular con CSS. Defiendo que no queremos utilizar la apariencia…

Initializr es una herramienta de HTML5 Boilerplate, un conjunto de plantillas HTML, CSS y JS para el inicio de sitios web, de un modo rápido, robusto y profesional, apto ya para HTML5. Con Initializr podrás generar tu sitio web totalmente…

Dar transparencia o opacidad a un elemento mediante CSS es una estas propiedades que para que funcionen bien en todos los navegadores requiere de varios trucos. Lo normal sería opacity: 0.5; pero hay varios hacks a tener en cuenta. Apunto…

Con HTML y CSS simplemente no podemos personalizar como nos gustaría ciertos elementos de los formularios, como por ejemplo los select o los input type file. Para esto podemos utilizar jQuery. Hay muchas soluciones jQuery que podríamos utilizar. A mí…

En el blog Code Poet ofrecen la descarga de un libro digital (PDF, EPUB, KINDLE) titulado "WordPress Meet Responsive Design" acerca de cómo Wordpress puede ser Responsive . Este libro recoge una serie de entrevistas a los pioneros del Responsive…

"Responsive Web Design" de Ethan Marcotte y "Mobile First" de Luke Wroblewski son los últimos libros que he comprado. Son sobre temas actuales como el diseño adaptable y el diseño de webs para dispositivos móviles. Tratan el tema de forma…

actualización Tengo que decir que aunque el truco funciona bien (suaviza las fuentes) puede que haga que la página se cargue más lento. Han descolgado la página a la que hago mención Aunque embeber tipografías en nuestras webs es una…

Las media queries son unas técnicas mediante las cuales gracias a la evaluación previa de unas características del navegador, podemos variar ciertas especificaciones de estilos para ellos. En la práctica funcionan como condicionales. Son verdaderamente útiles a la hora de…

Si al maquetar una web nos encontramos con que una serie de elementos no se ven bien en Explorer, nos veremos obligados a crear una hoja de estilos para este navegador para definir esas diferencias. Entonces dispondremos un Hack condicional…

En esta web, Best Google Web Fonts, podemos ver qué tal se muestran en pantalla varias tipografías del directorio de Google Fonts, además de ver qué tal quedan con muchos de los efectos de CSS3 para texto. Posteriormente podemos importar…

Esta es la traducción libre del maravilloso artículo de Elliot Jay Stocks Choose your web fonts wisely. He perdido la cuenta de cuantas veces he utilizado la frase, “ahora es un excelente momento para la tipografía en al web”, pero…

En este artículo CSS pitfalls and how to overcome them recogen una serie de problemas que se nos suelen presentar cuando estamos diseñando con CSS y nos dan buenas soluciones para resolverlos. Os recomiendo echar un vistazo.

Cuando diseñamos webs cada vez deseamos poder usar los nuevos efectos que el CSS3 nos permite. Esto puede convertirse en un reto sobre todo si no queremos utilizar JavaScript o queremos intentar que nuestro código sea compatible con la mayoría…

En CSS3 existe una propiedad llamada "text-shadow" que permite añadir una sombra a cada letra de un texto. En su forma más simple, sería así: El código anterior le está dando este estilo de sombra al texto de un H3.…

Me interesaba integrar mis últimos tweets en mi blog sin utilizar un plugin para poder tener mayor control sobre este elemento e intentar recargar menos mi wordpress. Así que me pareció muy buena la opción de cargarlo con jQuery y…

"Conforme la tipografía para web va mejorando, los diseñadores web quieren tener el mismo control que los diseñadores gráficos tienen sobre las fuentes." Esto es una traducción libre sobre una de las diapositivas de esta presentación de Trent Walton. Es…

Es frecuente en maquetación web que necesitemos centrar una capa o div de modo horizontal y vertical . Además esta capa debe quedar centrada siempre, aunque redimensionemos la ventana, incluso para diferentes tamaños de pantalla. Se consigue del modo siguiente…

Post actualizado Sticky footer. Buenas prácticas. Un pie de página fijo (sticky footer) es muy útil a la hora de maquetar webs que pensemos que tengan páginas con poco contenido. Es una buena solución para que el pie permanezca en…

Post actualizado a 15 de noviembre @font-face es un método mediante el cual podrías utilizar, en teoría, cualquier fuente tipografía en un sitio web. Este método consiste en subir al servidor el fichero de la fuente (embeber). No podemos embeber…

WP Google Fonts es un plugin de Wordpress que nos facilita mucho a la hora de embeber en nuestra web fuentes de Google Font. El plugin nos facilita un desplegable en el cual podemos elegir las fuentes deseadas, con la…

El plugin WP Maintenance Mode para Wordpress nos permite que mientras tenemos nuestro blog wordpress en construcción que el usuario pueda ver otra página diferente (que nosotros podemos personalizar totalmente) y nosotros mientras tanto vamos construyendo el blog por debajo…

Recientemente por razones de trabajo he tenido que abordar el tema del diseño de una página web para niños . A la hora de diseñar un website infantil hay que tener en cuenta ciertas características relacionadas con este target, los…

Initializr es una herramienta de HTML5 Boilerplate, un conjunto de plantillas HTML, CSS y JS para el inicio de sitios web, de un modo rápido, robusto y profesional, apto ya para HTML5. Con Initializr podrás generar tu sitio web totalmente…

Esta presentación de Rafael Poveda para el WordCamp Spain 2010 nos resume la historia de los temas en WordPress. Fuentes Ayuda Wordpress

Introducción: ¿qué es CSS? CSS, Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a…

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en la Web. El objetivo es crear una Web que trabaje mejor…