Enlaces interesantes sobre diseño y desarrollo web

Hoy en día, con la cantidad de información que hay en Internet, ya no es necesario estar constantemente comprando libros para estar al día de los temas que a uno le interesan. De hecho, no es que no sea necesario, es que sería imposible pretender estar bien informado de algo contando únicamente con la ayuda de los libros que se publican, especialmente en temas relacionados con Internet y las nuevas tecnologías.

Aquí van, como referencia y sin ningún orden en particular, algunos enlaces útiles relacionados con el diseño y desarrollo de páginas web, para tener a mano y consultar.

La mayoría de estos enlaces los he ido publicando en Twitter, pero he pensado que estaría bien ir recopilándolos para poder acceder a ellos más fácilmente.

HTML5 for Web Designers

En 2010 A Book Apart publicó HTML5 For Web Designers, un libro conciso y fácil de leer especialmente interesante para entender la evolución de este lenguaje y conocer las posibilidades de la última versión, particularmente desde el punto de vista del diseñador web, ya que incluye consejos de utilización, novedades a nivel semántico, nuevas etiquetas y elementos, mejoras en formularios, etc.

Ahora el libro está disponible para leer online de manera totalmente gratuita:

http://html5forwebdesigners.com/

WhatFont: inspecciona fácilmente las tipografías de una web

WhatFont es una extensión para Google Chrome gracias a la cual podemos averiguar fácil y rápidamente las tipografías que vemos en cualquier página web, y encontrar información relacionada: tamaño, interlineado, color, etc.

Es mucho más rápido que utilizar Firebug o el inspector de Webkit. Además, detecta tanto fuentes comunes como servicios externos como Typekit o Google Web Fonts:

http://chengyinliu.com/whatfont.html

pShadow: sombras con jQuery

Con esta extensión de jQuery podemos añadir sombras a cualquier elemento HTML. Funciona en los navegadores principales y se puede usar libremente.

Como se ve en la página de demostración, las sombras que consigue pShadow son bastante convincentes, aunque lo que hace esta extensión es añadir una imagen de la sombra en PNG en la parte inferior del elemento y posicionarla mediante Javascript, no crear la sombra en sí:

http://www.matthewdawkins.co.uk/2011/10/pshadow-a-jquery-extension-for-gorgeous-drop-shadows/

Cursos de programación online con Codecademy

Codecademy es un servicio de aprendizaje online. A través de su web nos ofrece cursos de programación con los que podemos aprender a programar de forma gratuita, interactiva y entretenida directamente desde el navegador.

Hace unos días publiqué un pequeño artículo sobre Codecademy, por lo interesante que me pareció:

https://www.danielnabil.com/blog/cursos-programacion-online-codecademy/

Herramientas SEO gratuitas de Google

Un estudio de las principales herramientas y aplicaciones gratuitas enfocadas al posicionamiento en buscadores que Google pone a nuestra disposición para analizar, monitonizar y optimizar el posicionamiento en buscadores de una web.

En esta lista se habla de Google Analytics, Alerts, Insights for Search, Webmaster Tools, Trends, Adwords Keyword Tool, Website Optimizer y algunas herramientas más:

http://blueblots.com/tools/google-seo-tools/

Animatable, galería de animaciones CSS

Animatable es una guía de transiciones CSS básicas en la que podemos ver, desde una misma página, varios tipos de animaciones y la gran cantidad de posibilidades que ofrece CSS a través de una solo propiedad. Es una buena manera de ver cuales son las propiedades que permiten animaciones.

Lógicamente, estas transiciones solo funcionan en los navegadores en los que está incorporada esta tecnología:

http://leaverou.github.com/animatable/