En Web and Designers comparten con nosotros una excelente recopilación de hojas con etiquetas para que las podamos usar durante nuestro desarrollo.

Entre las hojas podremos encontrar de todo tipo, como WordPress, jQuery y demás cosas que están muy de moda últimamente, y que estoy seguro que a todo diseñador le van a caer de maravilla. Me incluyo entre ellos.

Enlace | Webs and Designers.

Ahora que si en realidad quieres comenzar a aprender con este método, lo mejor sería que contaras con un editor que te permita ver cómo va quedando tu diseño en vivo, al menos mientras estás practicando para ir viendo cómo es que sirven las funciones que podamos aplicar con HTML + CSS.

Con Rendera nosotros podremos ir escribiendo código HTML en línea para después aplicarle estilos e ir viendo en tiempo real lo que estamos haciendo, por si tenemos algún error en una línea no tengamos que quebrarnos la cabeza después buscando donde está nuestra falla, sino simplemente modificando directamente la línea que acabamos de escribir.

Para usarlo no tendremos que hacer otra cosa más que entrar a la página y comenzar a escribir, no necesitaremos registrarnos ni instalar nada.

Entre las características de Rendera está la de dejarnos ver nuestro código “compilado” con opción para descargarlo a nuestra computadora, y también nos ofrece botones rápidos para agregar imágenes, formularios y más, para no perder tiempo subiendo la que nosotros queramos.

Además del HTML y el CSS también podremos meter Javascript apoyándonos de la librería jQuery, también pudiendo descargarla junto con nuestro código de fuente una vez que hayamos terminado.

Enlace | Rendera.

Zurb tiene una sección llamada Playground en donde nos muestran sus experimentos con CSS3 que nosotros podríamos incluir en nuestros diseños de una manera sencilla. Nos muestran un demo de lo que hacen y nos explican como lo hacen. Si esto fuera poco, también cabe destacar que dejan completamente libre el código que nosotros podríamos usar en nuestros diseños.

Hay algunos efectos muy curiosos, como algunos marcos transparentes que nos podrían servir en algún momento, algunas capas ocultas que podemos ver cuando le damos clic a algún botón y demás cosas.

En la mayoría de sus experimentos trabajan de mejor manera sobre Safari, es decir, con el motor de renderizado Webkit, lo que se traduce a que se debería ver bien también sobre el navegador Google Chrome.

Sinceramente sobre Internet Explorer no probé nada, y sin ganas de hacerlo, ya que cada segundo que pasa me entra más odio a ese navegador. De igual manera prometo no entrar en detalles.

Enlace | Zurb Playground.

Seguramente han escuchado que los diseñadores odian a Internet Explorer, yo me decía: “Pero no puede ser tan malo… ¿O sí?” Pues he de decirles que descubrí que sí, hay veces que los diseños se ven bien en todos los navegadores, pero adivinen… En Internet Explorer no.

Además otro de los problemas era revisar que funcione en todas las versiones de Internet Explorer, porque la mayoría de los usuarios aún usa versiones viejas del navegador, lo que también era un serio problema, porque no se puede instalar varias versiones al mismo tiempo.

IETester es un programa que nos ayudará con esta tarea, ya que este se encargará de probar nuestra página web en las versiones de Internet Explorer desde la 5.5 hasta la actual versión 8. Nos mostrará como se ve y entonces nosotros podremos ver que son las cosas que debemos de corregir para que este se vea correctamente.

El programa funciona con Windows XP, Windows Vista y Windows 7, pero para que en Windows XP no tenga problemas deberás tener instalado al menos Internet Explorer 7.

Enlace | IETester.

Typechart es una página web en la que nosotros podremos ver cientos de formas para colocar una fuente tipográfica en una página web, una vez que elegimos la que nos gusta podremos darle clic para que nos muestre tal cual el código CSS que debemos usar, y si queremos, colocarlo así, o modificarle algunas cosas, como el color, el tamaño o algún que otro efecto.

Con Typechart también podremos ver si se verá correctamente en todos los navegadores y qué es necesario para que se vea. Para esto usan una simbología sencilla de entender: Los que tienen un ^ al lado del título quiere decir que se verá únicamente en Sistemas Windows. Si vemos un * (asterisco) al lado del nombre, quiere decir que solo usuarios con Office 07/08 instalado lo podrán ver correctamente. Si vemos una † entonces eso lo traducimos como que solamente sobre sistemas Mac se verá correctamente. Los que no tienen ningún símbolo a la derecha del nombre se verá sin problemas bajo cualquier sistema.

Para obtener el código CSS tendremos que darle al botón que está hasta la derecha del bloque de texto que dice “Get CSS”, una vez que le damos clic saldrá el código que nosotros tenemos que copiar y pegar en nuestra hoja de estilos para que la podamos aplicar a nuestro diseño web.

Esta herramienta es realmente útil, la verdad es que a mí me ha ayudado bastante con los diseños y además de que es 100% gratuita.

Enlace | Typechart.