Poodwaddle es un sitio que con herramientas que nos permiten crear páginas de incio, buscadores que uno puede personalizar a su gusto y muchas otros procedimientos que podemos utilizar en línea.   También han creado herramientas para que podamos utilizar como por ejemplo un corrector ortográfico.

Entre esas herramientas crearon una que nos permite crear una hoja de estilos CSS en poco tiempo y de una manera más que facil.  La misma se llama CSS Gizmo.

Consiste en un formulario que vamos llenando con los valores que necesitamos para nuestro proyecto.  Una vez que terminamos de llenar los campos, presionamos el logo de CSS Gizmo y  en el menú que nos aparece, vamos al final y presionamos  Build CSS.  A continuación aparece un pop-up con el código.

Por supuesto que para utilizar este editor CSS uno tiene que tener algo de experiencia en CSS pues si nó, no servirá de nada, ya que no sabrán lo que están haciendo.

Una herramienta que a la hora de crear una hoja de estilos nos permite ahorrar mucho tiempo.

htmlPlayground es una herramienta en línea muy útil, que ayuda a aprender HTML y CSS mediante ejemplos que podemos ir transformando en tiempo real y así, de esa manera nos permite ver como trabaja cada etiqueta, cada atributo y cada propiedad utilizados para el desarrollo de sitios webs.

También sirve para cualquier nivel de desarrolladores de sitios web, ya que es una herramienta que puede servir de referencia rápida y de la cuál podemos copiar código y además modificarlo para ver el resultado antes de implementarlo en un proyecto.

Elegimos que tipo de referencia queremos ver: Etiquetas XHTML, Atributos XHTML o Propiedades CSS.

Elegimos el item y a la derecha aparece una descripción del mismo, un ejemplo, el cuál se puede editar y cambiar para ver el resultado que produce ese cambio y como último tenemos un cuadro que nos muesta una preview de como se vería en un navegador.

El ejemplo del código viene en colores: etiquetas=verde, atributos=rojo y el texto en negro.

Excelente heramienta para aprender y también como referencia para desarrolladores.

También agrega: Los motores de búsqueda no ven tu diseño, solo las palabras.

Esto nos dice que por más bonitos que se vean nuestros blogs, a los buscadores no les importa, por eso debemos de tener presente que cuando diseñamos un sitio, debemos hacerlo pensando primero en los buscadores, ya que lo más importante del SEO es eso, crear un blog con código que permita a los motores de búsqueda, acceder a cualquier parte de tu blog, sin ningún tipo de inconvenientes.

Tengan en claro que no siempre es posible lograr un código completamente limpio y a veces debemos de sacrificar algo del código por el diseño en sí.

Cuando hablo de código limpio, estoy hablando de evitar todo aquello que ponga una barrera a los web crawlers cuando visitan tu sitio y les impida indexar el blog en forma correcta.

Por eso es crucial que evitemos algunas malas prácticas, especialmente esas que vienen de tiempo atrás como por ejemplo cuando desarrollamos un blog, debemos de evitar por todos los medios posibles de incluir Frames, Iframes y Tablas.  Ya que estos bloquean a los buscadores y no les permiten encontrar el contenido que nosotros deseamos aparezca en los motores de búsqueda.

Supongamos que utilizamos un theme de WordPress que el autor define como SEO friendly (amigable) o sea con código claro y facilmente entendible por los crawlers, para que puedan indexar el sitio sin ninguna traba.  Pero, no contentos con el diseño de ese theme, metemos manos a la obra y reposicionamos algunas cosas o incluímos nuevas.  Cuando tomamos la desición de cambiar algo, debemos de hacerlo con cuidado y tratar de no cometer errores, ya que esos errores pueden llegar a evitar que un motor de búsqueda nos visite o no cumpla su tarea en forma completa y eficaz.  Especialmente cuando realizamos algunos cambios al código HTML/XHTML.

Por ahí veo desarrolladores que siguen insistiendo en colocar algún efecto flash, DHTML o mismo algún Javascripts sin descripciones, reemplazando a un texto, el cuál nos interesa que sea indexado.  No lo hagan, los crawlers los ignoran completamente y ese texto no aparecerá en las búsquedas.

Una buena práctica, en algunos casos, es tratar de que el contenido importante de nuestro blog se encuentre bien arriba de la página, no en la parte de abajo.  Con esto, por decirlo de alguna manera, evitamos que algunos errores, que normalmente tenemos en espacios que no tienen nada que ver con el contenido, no sean la causa por la cuál los bots no continuen con su trabajo de indexar el blog.

Tengan presente que no siempre podemos contar con un código perfecto, algún error podemos tener y quizás nunca lo sepamos, pero si debemos de ser concientes y tratar de evitarlos.

En la web existen muchas herramientas de optimización que en parte nos ayudan a eliminar algunos errores del código y si recuerdan, no hace mucho les hablé de una herramienta de este tipo que nos ayuda en esa tarea.  Se trata del servicio WordOff que nos ayuda a limpiar el código HTML.

Para usarlo solo ingresamos un texto, modificamos las propiedades CSS y listo, podemos probar varias fuentes y cuando obtenemos lo que deseamos o mejor dicho el estilo que más nos gusta, presionamos el botón Get CSS Code y así generamos el código CSS necesario para incorporar esos estilos en nuestro sitio o blog.

Este servicio nos da la posibilidad de probar en tiempo real, todas las propiedades posibles de CSS de fuentes y también incluye ua herramienta para elegir el color de las fuentes y del fondo, la cual soporta la edición de valores HSV y RGB y tiene mas de 1000 coloreres predefinidos para que podamos elegir.

Otra cosa importante es que tiene un mapa de caracteres que nos permite averiguar el valor HTML de cada caracter.

Muy buen servicio, que nos ahorra mucho tiempo al momento de definir fuentes en una hoja de estilos.

Enlace: Font Tester

Solo tenemos que configurar 4 parámetros: Color del fondo del box, color del fondo de la página, el radio de las esquinas redondeadas y por último si queremos que el fondo o el frente sean transparentes.

Luego de configurar lo anterior presionamos Create Graphics y automáticamente obtenemos los gráficos de las 4 esquinas, más el codigo CSS y HTML.

Para incluírlos en el sitio aplican el código CSS a las hojas de estilo y el código HTML dentro del código de la pagina y listo.

Recurso sencillo y útil que nos puede ayudar a mejorar nuestro sitio.

Enlace: CornerShop

Muchas veces comenzar a generar código desde cero y en forma manual es agobiante.  Muchos vuelven a reutilizar código y lo transforman a las nuevas necesidades, pero en la web y en forma gratuita, existen muchos generadores de código CSSS para distintos elementos que componen una página web.  Es por eso que realizé una compilación de 10 generadores de código CSS para facilitarles la existencia a los programadores y para aquellos que no lo son tanto

CSS Layout Generator

Con este generador de código CSS podemos generar una plantilla de ancho fijo o variable, con cabecera, hasta 3 columnas y pié de página.

CSS Menu Generator

Con este generador podemos crear menús de navegación de texto para un sitio web y para ello nos proporciona 4 estilos.  Además nos genera el código HTML necesario para publicar el menú.

Button Maker Online

Esta herramienta nos permite crear micro botones  de 80×15 ou 80×31, XHTML valido.

CSS Generator

Este generador de código CSS nos permite crear el estilo de un sitio web.   Este generador nos presenta un formulario muy simple que nos permite configurar las propiedades de las hojas de estilo.

Firdamatic

Firdamatic es un generador de plantillas sin tablas.  El mismo nos permite crear una plantilla en cuestión de segundos, aunque dependiendo de la complejidad de la misma.  Es gratuito para uso personal.

Rounded Cornr

Este es un simple generador de código CSS y HTML para tener cajas o botones con esquinas redondeadas, como bien vemos en la ilustración anterior.

Sky CSS Tool

Sky CSS Tool nos permite generar CSS Classes, con el menor esfuerzo de nuestra parte.  Para usar este generador debemos de tener un navegador compatible con Javascript.

QuickCSS - Online CSS Generator

Este es un generador muy rápido, completo y simple de entender de código CSS.

The Generator Form

Otro formulario para crear plantillas de hasta 3 columnas.  Muy completo y simple de usar.

Spiffy Corners

Este generador nos permite crear código CSS y HTML para obtener corners con anti-alias (anti-aliased corners) sin necesidad de usar imágenes o javascript.

Estas plantillas están diseñadas cumpliendo con el standard de la W3C, lo que nos asegura que prácticamente no darán problemas, además de ser amigables para los buscadores, ya que no poseen tablas.  Otra característica importante es que son son livianas, lo que significa que la carga de la página se realiza en forma rápida.

Algunas de estas plantillas traen imágenes, pero como son imágenes de dominio público, las podemos utilizar sin restricciones.  Estas imágenes tienen licencias provistas por Wikimedia Commons y por PDPhoto.Org.

Las plantillas poseen una licencia de Creative Commons Distribution 2.5.

Todas las plantillas se pueden utilizar en forma comercial y/o personal, colocando la licencia y un enlace a Free CSS Templates. 

Un muy buen directorio, que a cualquiera que se dedique al diseño web, le puede resultar muy útil.

Enlace: Free CSS Templates

Este libro es uno de los libros más vendidos que tratan el tema de hojas de estilo y muchos programadores tienen una copia de este libro.

Sus autores son muy conocidos en el campo de diseño CSS y los mismos son  Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams y David Johnson.  Este libro, en su edición de papel, se vende en librerias por 29.95 dolares.

Ahora no siempre todo lo gratis es totalmente gratis, para poder descargar este libro debemos de hacer algo.  Ese algo no es nada del otro mundo, ya que solamente nos tenemos que convertir en seguidores del usuario de Twitter sitepointdotcom.  Una vez hecho esto, a los pocos minutos recibiremos un mensaje proveniente de Twitter que contendrá el enlace para la descarga del libro, que viene comprimido en formato Zip.

Como ven, no es mucho, seguimos a tantos en Twitter que uno mas no nos va a hacer daño, al contrario, obtendremos un muy buen libro.

Enlace: @sitepointdotcom