Con htmlPlayground podrás aprender del modo más sencillo y visual tanto HTML como CSS a cualquier nivel. Esta interesante página es definitivamente un buen punto de referencia para desarrolladores de webs o curiosos por igual. Su funcionamiento es bien sencillo, selecciona una tag HTML, lee su descripción si quieres, haz clic sobre cualquier tag en el código de ejemplo y modifica los atributos para ver el resultado en tiempo real.

Enlace: htmlPlayground

Lo bueno y gratis dos veces bueno. Gracias a El Imperio Cordobés descubro una colección de libros gratuitos en línea ofrecidos por LibrosWeb.es y que después de echarles un buen vistazo he de clasificar como muy buenos. En estos momentos se ofrecen sólo unos cuantos libros de introducción a Javascript, AJAX, CSS, XHTML y una guía completa de la framework para PHP Simfony. También se incluye la opción de descargarlos en formato pdf, y que más se puede pedir..., ¿he mencionado que son gratuitos?

Enlace: LibrosWeb.es | Vía: El Imperio Cordobés

Con este sencillo truco podrás analizar los márgenes de todas las capas definidas en tu CSS mostrando un borde coloreado en cada una de estas, esta técnica puede ser de gran ayuda para encontrar esos problemas que nos vuelven locos causados por márgenes mal definidos. Para usarlo copia el código tal y como está en cualquier parte del fichero CSS.

Hace poco os mostré como rotar imágenes aleatorias en la cabecera de Wordpress a través de PHP. En este tutorial os mostraré otra técnica en la que con una pequeño y rápido cargador en PHP podréis mostrar cualquier imagen al azar directamente desde CSS. Para empezar deberás agrupar y nombrar las imágenes que deseas rotar con el mismo nombre y seguidas de un número secuencial. Por ejemplo:

logo_1.png, logo_2.png, logo_3.png, ...
borde_1.png, borde_2.png, borde_3.png, ...
foto_1.png, foto_2.png, foto_3.png, ...
......

 (...seguir leyendo el resto del artículo  » ) 

Aquí tenéis una corta lista de recursos gratuitos para hacer vuestro diseño de webs más ameno.

Enlaces:

Browsershots – Visualiza una página en varias versiones de distintos navegadores. Una vez suministres el enlace sólo se trata de esperar un rato y actualizar la página para ver varias capturas expandibles. Dale algo de tiempo.

Creative Commons – Obtén de modo muy sencillo una verdadera licencia para proteger los contenidos de tu página.

Css-Ref – Fácil referencia de elementos CSS.

Emezeta Rank – Obtén un análisis completo del estado de tu web, con una explicación de cada parámetro evaluado fácil de entender.

Robots.txt Checker – Analiza tu fichero robots.txt exhaustivamente.

Colorschemer – Excelente buscador de esquemas de colores.

Typetester –  Página donde podrás visualizar y comparar distintas fuentes de texto.

W3C CSS Validator – La madre de todas, indispensable para chequear problemas con tu CSS y conformidad con el estándar propuesto por W3C.

W3C HML Validator – Y el padre de todos, chequea que tu HTML/XHTML siga el estándar W3C. Os recomiendo que cada vez que publiquéis un artículo uséis este enlace.

Webdevout – Tablas comparativas de HTML/XHTML, CSS y DOM entre los mayores navegadores. Bastante interesante para encontrar porque lo que se funciona en un navegador no funciona en otro.

Extensiones para Firefox:

Colorzilla – Sencilla utilidad para la selección de cualquier color HTML y RGB que aparezca en pantalla.

Firebug – Una buena colección de herramientas integradas que entre otras opciones permite editar y testear CSS, HTML y Javascript dinámicamente.

MeasureIt – Permite medir en píxeles cualquier dimensión en la pantalla.

Web Developer – Absolutamente esencial para todo Webmaster, ofrece una larga lista de herramientas para poder chequear y probar alteraciones en tu diseño.

Aplicaciones:

Aptana – Un completísimo editor para desarrollo de webs. Como nota, la edición de CSS es excelente ya que al teclear un elemento este muestra que navegadores lo soportan.

FileZilla – Mi cliente de FTP favorito, sencillo, completo y rápido.

Manuales:

Tutorial XHTML y CSS – Aquí podreis descargar el excelente tutorial en formato PDF de Belén Albeza. Con explicaciones claras y concisas este manual es perfecto para todo aquel que quiera aprender XHTML y CSS. (gracias Kosako)

Hasta que llegue el estándar CSS 3 los usuarios de Firefox y Safari tenemos una sencilla alternativa para crear bordes redondeados sin necesidad de usar gráficos. Para los que sepáis ya algo de CSS 3 sabréis que los bordes redondeados se implementarán a través del elemento Border-Radius. Firefox y Safari usan su propia implementación a través de los prefijos moz y webkit, así que lo único que tenemos que hacer es declararlos en nuestro fichero CSS y listo. Esta es la lista con las sintaxis a seguir para realizar la implementación:

 (...seguir leyendo el resto del artículo  » )