Tooler | Herramientas web y Recursos

RoundedCornr es otro generador online de código HML/CSS e imágenes que permite construir cajas con bordes curvos o redondeados, muy utilizados últimamente. Basta con insertar el grado de angulación que tendrá la esquina (Corner radius in pixels), el color de fondo donde estará ubicada la caja (Background color), el color de la misma (Box color) y hacer clic en “Create”. Nos generará un código HTML con un texto ejemplo, que deberás reemplazar por el que quieras, un código CSS que deberás introducir en tu hoja de estilos y las 4 imágenes que debes descargar y colocar en la mismo directorio de la página html.

Importante: Si colocás las imágenes en un directorio distinto de donde se encuentra la página html, deberás actualizar dichas localizaciones en el código css generado.

Si observamos un poco más abajo en la página del generador verán que también nos brinda la posibilidad de crear boxes con fondo degradado, con bordes y también de generar sólo una imagen GIF con los bordes (ya sea curvos o cuadrados), los colores de fondo, texto y otras opciones a nuestra elección, ideal para hacer pestañas, botones, imágenes de fondo sólido/degradado, etc. ¿Algo más?.

Ejemplos realizados por mí (Básico/Con degradado/Con borde/Imagen sola).

Vía: Digg.

CSSFly es una herramienta online y gratuita que te permite editar sitios fácilmente y en tiempo real desde tu navegador. Puedes editar tanto el código HTML como las hojas de estilo externas asociadas al sitio. Lo que escribes en el código es lo que se muestra en la página. Las modificaciones que realices no se pueden guardar por razones obvias, sino modificaríamos los sitios de otras personas a nuestro antojo, pero de todas formas puedes copiar y guardar el código que hayas creado o modificado.

No me parece apropiada para desarrollar sitios desde 0 pero sí para realizar pruebas y modificaciones de poca magnitud en nuestras páginas ya construidas, o para curiosear el código fuente de otros sitios reemplazando a la función “Ver código fuente” de los navagadores por una un poco más sofisticada.

Nota: Puedes usar la barra de marcadores para editar rápidamente el sitio que estas visitando. Para esto debes arrastrar el siguiente enlace a tu barra de marcadores: CssFly.

Vía: Digg.

Para los que aún no lo conozcan Listamatic es un excelente sitio que muestra, a través de sus ejemplos, cómo crear diferentes estilos de menús con CSS partiendo de una simple lista:

• Lista de menús verticales y horizontales sin anidamiento (Compatibilidad)
• Lista de menús verticales y horizontales con anidamiento (Compatibilidad)
  

Además puedes visitar este tutorial (en inglés pero muy didáctico), del mismo sitio, donde enseñan de una forma extremadamente práctica cómo crear:

• Menús con imágenes de fondo como viñetas.
• Efecto rollover.
• Menús anidados.
• Menús horizontales.

Otra opción muy buena es CSS Library con menús verticales y horizontales (tipo pestañas) con uso de imágenes con degradado.

En smashingmagazine publicaron una excelente recopilación de sitios con galerías de plantillas web (templates) de alta calidad gratuitas para descargar y usar en tu sitio. Puedes descargar plantillas basadas en css o en flash, con interfaces gráficas realizadas en fireworks o photoshop. Cada sitio posee una breve descripción del tipo de plantillas que ofrece y la lista también incluye sitios con plantillas para blogs y específicamente para sistemas de gestión de contenidos como wordpress y servicios como Blogger.

En Cheat Sheets puedes encontrar machetes de html, css, JavaScript y php, entre otros, en formato PNG y PDF diseñados para ser impresos en una sola hoja y llevarlos contigo a modo de referencia rápida sobre el lenjuaje o tema en cuestión.

Puedes acceder directamente a los cheat sheets desde los enlaces a continuación y elegir el formato para guardarlo, imagen PNG o documento PDF:

Cheat Sheet de Html

Cheat Sheet de Css

Cheat Sheet de JavaScript

Cheet Sheet de caracteres Html y sus equivalencias

Cheet Sheet de PHP

Otros:

Cheat Sheet de Expresiones regulares
Cheat Sheet de Microformatos
Cheat Sheet de Tabla de colores Hex
Cheat Sheet de Asp
Cheet Sheet de MySQL
Cheet Shett de mod_rewrite

Vía: Menéame

En Smashing Magazine han publicado una excelente colección denominada 53 CSS-Techniques You Couldn’t Live Without. Constituye un repositorio de técnicas basadas puramente en CSS, aunque sólo en algunas también incorpora algo de JavaScript.
A continuación voy a nombrar algunas de las técnicas citadas, pero para conocer la lista completa (53 técnicas) y los enlaces correspondientes deberán visitar la fuente original.

• Navegación basada en css.
• Pestañas en css.
• Gráficos de barra en css.
• Tablas colapsables.
• Método de personalización de los radioboxes y checkboxes.
• Reemplazo de imágenes.
• Sombras en css.
• Esquinas redondeadas con css.
• Letras capitales.
• Definir la opacidad de una imagen con css.
• Diagramas con css.
• Curvas con css.
• Mapas de imagen.
• Precarga de imágenes con css.
• Técnicas css en formularios y tablas.
• Páginas de impresión con css.
• Trucos para personalizar las viñetas.
• Técnica de Zoom en css.
• Tablas al estilo zebra con JavaScript y css.
• Formateo de pie de notas con css.

Vía: Menéame

Listible pretende ser un sitio innovador que combina el uso de listas, tags (etiquetas) y un sistema de votación, para agrupar gran cantidad de recursos y determinar la relevancia de cada uno, así como también facilitar la accesibilidad a los mismos. Los recursos más relevantes y populares de cada lista estarán ubicados en el tope de la misma gracias al sistema de votación.
Todo esto con el objetivo de encontrar lo que te interesa lo más rápido posible.

Los tópicos de las listas abarcan temas muy variados, desde herramientas, tutoriales, trucos, galerías, css, programación hasta recursos sobre música, video, etc, etc y hasta el infinito y mas allá.

Pero el principal motivo de este post es citar una de las listas que me pareció muy afín a la temática de este blog:

Resources on Online Tools, Generators, Checkers:
Como indica la descripción correspondiente, es una lista con gran cantidad de herramientas gratuitas de uso online (muchas de ellas citadas en Tooler) relacionadas con la programación, diseño, desarrollo y optimización de sitios.
Incluye entre otras, generadores (de imágenes, iconos, botones, css, formularios, rss, robots.txt, .htaccess, etc), validadores, herramientas SEO, y otros chiches muy interesantes.

Me gustaría citar 3 herramientas que me llamaron la atención a simple vista:

• Typogenerator:
  Escribimos un breve texto y Typogenerator busca imágenes en google con el texto citado y crea un background con las imágenes encontradas, usando efectos generados al azar. Luego agrega el texto también con efectos. El resultado es un bonito collage de imágenes, textos y efectos. Ejemplo insertando palabra “rock“: click aquí
• Blibs animation factory:
  Una especie de herramienta de edición online de imágenes pero con características propias que no vi en las otras utilidades citadas en este blog, como por ejm la posibilidad de agregar animaciones a las imágenes entre otras interesantes características. Ejemplo: click quí.
• Tilemachine:
  Al estilo de bgmaker, permite generar imágenes de 8×8, 16×16 y 32×32 pixeles, pero con una interfaz muy atractiva realizada en flash con animación y sonido. Útil para usarlas en fondos de página o como iconos.

Los invito a explorar la lista y comentar las herramientas que consideren más relevantes.

Creo que la mejor forma de aprender a maquetar con Css es explorar hasta el último detalle el código fuente de estos diseños ya fabricados para aprender y realizar luego nuestros propios diseños.

Si conoces otro sitio con plantillas, por favor, no dudes en postearlo en los comentarios.

• Galería de plantillas css 1
• Galería de plantillas css 2
• Galería de plantillas css 3
• Galería de plantillas css 4
• Galería de plantillas css 5 (Vía: Erola )
• Galería de plantillas css 6

La gente de exploding-boy ha diseñado 3 galerías de menús de navegación CSS muy bien trabajados, y lo mejor es que están disponibles para descargar en forma gratuita para uso comercial y personal.

Las dos primeras son galerías de menús horizontales y la última de verticales. Espero les sea de utilidad.

Menús horizontales tipo Tabs (pestañas):

Galería 1

Demostración: Set Menús CSS horizontal 1
Descargar: Set Menús CSS horizontal 1

Galería 2

Demostración: Set Menús CSS horizontal 2
Descargar: Set Menús CSS horizontal 2

Menús verticales:

Galería 3

Demostración: Set Menús CSS vertical
Descargar: Set Menús CSS vertical

Vía: MateriaGris

CSS Formatter and Optimiser es otra herramienta online al estilo de Online CSS Optimizer para optimizar y reducir el peso de nuestras hojas de estilo CSS.
Es más sofisticada que la primera, destacandose una importante función que nos permite seleccionar el grado de compresión de la hoja de estilo sacrificando la capacidad de lectura de la misma una vez optimizada (A mayor compresión, más ilegible el código resultante).