Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web – AlmacenPlantillasWeb Blog

Recopilación de herramientas gratuitas para el desarrollo de nuestras hojas de estilo CSS y diversos elementos HTML basados en ellas.

COLORES

• Permite subir un fichero CSS, modificar los colores y descargarlo modificado a nuestro gusto - http://css-color-replace.orca-multimedia.de/
• Ribbon Rules Generator (Permite colorear reglas horizontales con CSS) – http://tools.dynamicdrive.com/ribbon/

BOTONES

• Generador de microbotones (80×15) – http://tools.dynamicdrive.com/button/

FUENTES Y TIPOGRAFÍA

• Generador de fuentes CSS – http://csstypeset.com/
• Previsualizador de fuentes – http://www.typechart.com/
• Matriz  y generador de código para tipografía – http://www.jan-quickels.de/tools-web-typography/
• Conversor de tamaños de texto en pixeles (px) a unidades relativas (em) – http://riddle.pl/emcalc/
• Otro conversor de unidades absolutas a relativas - http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/
• PX to EM – http://pxtoem.com/

GENERADORES DE GRIDS

• Grid Designer – http://grid.mindplay.dk
• YUI (Constructor de grids con CSS) – http://developer.yahoo.com/yui/grids/builder/

GENERADORES DE SPRITES CSS

Los sprites CSS son una manera de reducir el número de llamadas HTTP realizadas por los recursos de imagen referenciados de tu sitio web. Las imágenes se combinan en una única gran imagen con coordenadas X e Y definidas. Teniendo asignada la imagen generada a los elementos de página necesarios, la propiedad CSS background-position puede usarse para hacer visible el área requerida de la imagen sprite.

Esta técnica puede ser muy efectiva para mejorar el rendimiento, particularmente en situaciones dónde se utilizan muchas imágenes pequeñas (como iconos de menú). La página inicial de Yahoo!, por ejemplo, utiliza esta técnica exactamente para eso.

• http://es.spritegen.website-performance.org/
• http://www.csssprites.com/

VALIDADORES

• Validador de CSS del W3C – http://jigsaw.w3.org/css-validator/

COMPRESORES

• CSS Drive – http://www.cssdrive.com/index.php/main/csscompressor/
• Compresor de Mabblog – http://mabblog.com/cssoptimizer/compress.html

GENERADORES DE CÓDIGO CSS

• Simple CSS (Generador de código CSS) – http://www.hostm.com/css/
• CSS Generator – http://csscreator.com/?q=version1/index.php
• PSD2CSS (generador de CSS desde PSD) – http://psd2cssonline.com/
• Clear CSS Generator – http://matrixsoftware.virtualave.net/
• Conditional CSS – http://www.conditional-css.com/
• CSS Creator – http://csscreator.com/?q=tools/layout
• More CSS (librería Javascript que genera código CSS con funcionalidades gráficas avanzadas) – http://yellowgreen.de/morecss
• Quick CSS -http://www.xmldir.de/quickcss/
• QrONE CSS Designer - http://www.qrone.org/cssdesigner.html
• Sky CSS Tool – http://skycsstool.sourceforge.net/

FORMATEADORES Y OPTIMIZADORES DE CSS

• Basado en csstidy 1.3 – http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en
• Depurador de CSS – http://isnoop.net/tools/css.php
• Firebug (plugin de Firefox) – http://getfirebug.com/
• CSS Redundancy Checker - http://services.immike.net/css-checker/
• CSSEvolve (CSS alternativos de una página) – http://iterationprojects.com/evolve/
• CSS Text Wrapper – http://www.csstextwrap.com/
• SelectOracle (explicación de selectores CSS) - http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

GENERADORES DE ELEMENTOS HTML

• Botones y cajas de texto – http://www.devdude.com/tools/css/button_text/
• Generador de capas de cssportal – http://www.cssportal.com/generators/layout.htm
• Generador de textos que rodean imágenes con formas mediante el uso de CSS y XHTML - http://www.theboxoffice.be/
• CSS Template Generator – http://www.ibdjohn.com/csstemplate/
• HTML and CSS Table Border Style Wizard – http://somacon.com/p141.php
• List-O-Matic – http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
• JotForm (Generador de formularios) – http://www.jotform.com/
• The Generator Form (creador de páginas divididas en columnas) – http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
• Style Sheet (Generador de plantillas PHP – HTML – CSS) – http://www.maketemplate.com/

GENERADORES DE MENÚS DE NAVEGACIÓN

• CSS Menu Generator - http://www.webmaster-toolkit.com/css-menu-generator.shtml

This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.