Herramientas para diseñadores y desarrolladores

Publicado el por

herramientas.jpg 

Desde el blog user experience en español les adjunto este post, de gran utilidad para diseñadores en general. Una gran recopilación de herramientas que definitivamente solucionarán más de un problema. Ojo que la lista se sigue actualizando.

"Definitivamente si deseas tener un sitio usable, accesible, encontrable, etc. necesitas hacer pruebas una vez tengas tus páginas listas. Por ejemplo unas pruebas de usabilidad (las cuales no son para proyectos Web inmensos ni tampoco necesitan ser pruebas dispendiosas y complejas como lo muestra Nielsen: Con tan sólo 5 usuarios puedes hacer tus pruebas de usabilidad).

Pero si crees que tienes que esperar estas pruebas para revisar tu sitio estás muy equivocado. Existen herramientas que te ayudarán desde la etapa de diseño y programación a montar y revisar una variedad de aspectos que ni te alcanzas a imaginar. Herramientas que te servirán a montar tu sitio o mejorar el que ya tienes montado.

Por ejemplo puedes hacer cosas tan triviales como deshabilitar el JavaScript, las hojas de estilos o los colores para revisar cómo carga tu sitio sin ellos. Puedes revisar tu página contra validadores de CSS, (X)HTML o contra las recomendaciones de accesibilidad WAI o Section 508. Puedes crear automáticamente un menú usable y accesible basado en estilos. Puedes llegar hasta simulaciones tan complejas como ver tu página como la verí­a una persona con daltonismo.

¿Te suena interesante? Lo mejor es que no te he mencionado que todo esto es gratuito".

A continuación encontraras un gran listado de herramientas clasificadas por:

  1. Add-ons para tu Navegador (Browser Add-ons)

  2. Herramientas para Descargar (Tools)

  3. Herramientas Online (Online Tools)

  4. Validadores (Validators)

  5. Otros recursos (Other resources)

  6. Actualizaciones a este Post (Updates to this post)

Si consideras que falta alguna herramienta o si hay un ví­nculo muerto o desactualizado por favor escrí­beme. Mi interés es mantener este post como una referencia actualizada y de obligatoria visita para quienes trabajamos montando Sitios Web.

1. Add-ons para tu Navegador
Estos add-ons son la mejor compañí­a para todo desarrollador y diseñador Web. Básicamente facilitan el acceso a muchas herramientas y validadores desde el navegador (IE o Firefox).

  • Aardvark Extension (Firefox, Flock y Mozilla)
    Esta práctica extensión te permitirá revisar cómo están diseñados los sitios que visitas bordeando e identificando cada parte de la página con un color rojo. Te permite identificar divs, p, etc.

  • CheckIE Plug-in (Internet Explorer)
    CheckIE es un plug-in para Microsoft Internet Explorer que reune diversos servicios de evaluación y reparación disponibles en lí­nea, a los que permite acceder a través del menú contextual del navegador (botón derecho). Es posible revisar cualquier página mediante alguno de los 17 servicios de validación y análisis en lí­nea disponibles. Nació como contra-propuesta al Checky que sólo funciona para Firefox.

  • Checky Extension (Firefox, Flock y Mozilla)
    Esta extensión está especializada en la validación y análisis de páginas web. Ví­ncula gran cantidad de validadores y servicios de análisis online. Valida, analiza, revisa e inspecciona todo documento que contenga HTML, XHTML, CSS, RDF, RSS, XML, P3P, ví­nculos, metadata y mucho más. De obligatoria instalación.

  • HTML Validator Extension (Firefox y Mozilla)
    Esta es una extensión que válida el HTML directamente en tu navegador aprovechando el progama HTML Tidy (el cual reseño más adelante en las 2. Herramientas para Descargar : HTML & CSS) y que viene embebido en los navegadores Firefox y Mozilla.

  • Internet Explorer Developer Toolbar (Internet Explorer)
    Esta toolbar es la homóloga a la Web Developer Toolbar para Firefox pero con menos funciones. Trae una gran variedad de caracterí­sticas para explorar y, sobretodo, entender cualquier página Web. Por ejemplo puedes:
    • Localizar, seleccionar y mostrar información de los diferentes elementos de la página.
    • Bordear tablas, celdas, imágenes, etc.
    • Validar la página.
    • Cambiar el tamaño de tu navegador (800×600, 1024×768, etc.).

  • Web Accessibility Toolbar (Internet Explorer)
    De obligatoria instalación, esta toolbar ha sido desarrollada para ayudar en las pruebas manuales de páginas Web en una variedad de aspectos de accesibilidad. Te permite:
    • Identificar los componentes de una página.
    • Usar otras aplicaciones online (como validadores).
    • Simular experiencias de usuario.
    • Tener acceso a referencias y otro tipo de recursos.

  • Web Developer Toolbar (Firefox, Flock y Mozilla)
    Otro excelente complemento para Firefox y similares. Tiene una variedad impresionante de funciones para revisar tus páginas, tus CSS, formularios e imágenes. Permite bordear elementos, cambiar el tamaño de tu navegador, deshabilitar funciones del navegador, etc. Si utilizas Firefox es de obligatoria instalación.

2. Herramientas para Descargar

Accesabilidad

  • A-Prompt
    Esta aplicación examina tus páginas en busca de barreras para la accesibilidad. Frente a los errores que encuentra hace las reparaciones automáticamente (cuando es posible) o te permite que tu las corrijas mediante un asistente.

  • MAGpie
    Esta herramienta te facilita la adición de notas, tí­tulos y descripciones audibles a tu multimedia en Web. Hecha especialmente para facilitar el acceso a personas con discapacidades.

HTML & CSS

  • Bullet-Proof Rounded Corners
    ¿Deseas bordes redondeados en tus diseños sólo con CSS? Aquí­ está el código que te lo hará y compatiblemente con "todos" los navegadores. Además he aquí­ un listado completo con todas(?) las técnicas conocidas. Mucho ojo: "Los bordes redondeados en CSS no incrementan la accesibilidad". Lo dijo Christian Heilmann y yo le creó. ;)

  • CSE HTML Validator Lite
    Esta aplicación para Windows te permite revisar y arreglar el HTML que generas. Además trae un completí­simo Editor de HTML.

  • CSS Starter
    Faruk Ates te facilita un CSS inicial para tu sitio. Con el arrancarás más fácilmente tus sitios diagramados con CSS. Ya tiene el truco para que las fuentes de tu sitio sean escalables y que se vean de igual tamaño en todos los navegadores, incluidos en IE4 e IE5 (Recuerda trabajar el tamaño de las fuentes en em).

  • CSS Vista
    Esta magní­fica herramienta te permite editar tus hojas de estilo en vivo, así­ que cada cambio que vas haciendo lo ves reflejado simultáneamente en dos paneles que muestran el Internet Explorer y Firefox.

  • Evrsoft First Page 2006
    Este es básicamente un editor que fácilmente reemplaza a Dreamweaver. Trabaja con los estándares Web e incorpora a HTML Tidy. Más de 3 millones de descargas deben significar algo. ;)

  • HTML Tidy
    Esta es una pequeña aplicación que permite limpiar el HTML que generas en tus páginas. Corrige errores sintácticos al igual que hace recomendaciones para hacer las páginas más accesibles. Trabaja bajo la lí­nea de comandos y hay una versión para cada sistema operativo. No te recomendarí­a descargarla ya que hay versiones online en la sección de 4. Validadores : HTML, además de una extensión para Firefox y Mozilla llamada HTML Validator en la sección de 1. Add-ons para tu navegador y el editor Evrsoft First Page 2006 que acabo de reseñar.

  • Nice Forms
    Mejora el diseño tradicional de tus formularios HTML con este excelente código de BadBoy.

  • Simple Tricks for More Usable Forms
    En este artí­culo Simon Willison nos regala unos excelentes códigos para hacer nuestros formularios más usables. Totalmente recomendable.

  • sIFR 2.0: Rich Accessible Typography for the Masses
    ¿Has oido hablar de las técnicas para reemplazar textos por imágenes? Esta técnica es un éxito: compatible con todos los navegadores y totalmente accesible. Ya podrás utilizar la fuente que quieras en tus diseños. He aquí­ un manual en español.

  • Zebra Tables
    Este excelente código te permitirá pintar intercaladamente las celdas de tus tablas sin tener que pintarlas manualmente. Ya no mas clases "celda par" y "celda impar".

Manejo del Color

Menús y Navegación

  • Accessible Website Menu
    ElUltimate Drop Down Menu (UDM) es un menú accessible en DHTML, el cual provee contenido usable para todo tipo de navegador, incluyendo screenreaders (lectores de pantalla), buscadores y navegadores de modo texto. Es gratuito para uso no comercial y a cambio piden un enlace a su página.

  • TemaTres: Gestión de Lenguajes Documentales
    TemaTres es una aplicación Web para la gestión de lenguajes documentales. Se encuentra orientada especialmente el desarrollo de tesauros jerárquicos y también puede utilizarse para desarrollar estructuras de navegación web.

Navegadores

  • Hal Screen Reader
    Este programa te servirá para revisar tu sitio como lo leerí­a una persona ciega, ya que genera un acceso auditivo y mediante Braille. Sirve para acceder todo tipo de programas de Windows, por lo tanto incluye los navegadores. Aunque el programa no es gratuito se puede descargar un DEMO sin caducidad para sesiones de 30 minutos.

  • Navegador Lynx
    Este navegador de sólo texto es usado por mucha gente que no puede usar un navegador tradicional gráfico. Por ejemplo personas con problemas en la vista que utilizan lectores de pantalla. Si no deseas descargar este navegador, en la categorí­a 3. Herramientas Online : Simulación de Navegadores hay algunos simuladores de Lynx.

  • Navegador pwWebSpeak
    Este navegador ha sido diseñado para quienes deseen acceder Internet de una manera no-visual o combinando audio y gráficas. Es utilizado por personas ciegas o con problemas de ceguera parcial, con dislexia, dificultades de aprendizaje o que están aprendiendo un nuevo idioma. Este navegador “pronuncia” los textos que va encontrando en la página al igual que la muestra gráficamente. Puedes usarlo gratuitamente para revisar la accesibilidad de su sitio.

Patrones de Diseño

Usabilidad

Ví­nculos

  • REL Link Checker Lite
    Esta aplicación te permite revisar los ví­nculos rotos de TODO tu sitio, incluyendo los de Javascript y Flash.

  • Xenu’s Link Sleuth
    Otra aplicación que te permite verificar los ví­nculos de tu sitio, los tradicionales, al igual que los ví­nculos a imágenes, scripts, etc.

Para facilitar la comparación entre los 1. Add-ons para tu navegador, a partir de esta categorí­a se especificará la disponibilidad de la herramienta en los Add-ons.

3. Herramientas Online

Fuentes

  • Identify a Font
    Identifica una fuente simplemente respondiendo una serie de sencillas preguntas.

  • TypeTester
    Esta es una aplicación que básicamente te permitirá comparar las fuentes en pantalla. Si utilizas el CSS Starter (en 2. Herramientas para Descargar: HTML & CSS) y/o das los tamaños a tus fuentes en em es imprescindible.

  • What The Font?!
    Identifica una fuente por medio de una imagen. Sube tu imagen y listo!

HTML & CSS

  • Accessibility Tools & Wizards
    En esta página hay varias herramientas entre las cuales se destacan:
    • Accessible Form Builder: Un Constructor de formas accesibles.
    • Acrobot: Automáticamente convierte las abreviaturas y acrónimos en tus textos.
    • List-o-matic: La mejor de ellas. Permite crear CSS menús con base en listas ordenadas. Esta es la forma de hacer menús usables y accesibles.
    • Pop-up Window Generador: Para crear pop-ups accesibles y visibles para los buscadores.
    • Yes No Now!: Genera radio buttons accesibles.

  • Colly’s CSS Rollover Generator
    Genera botones con efecto "rollover" usando CSS y sólo una imagen.

  • CSS Cascading Style Sheet Optimiser
    Optimiza tus CSS.

  • CSS Creator
    Genera las plantillas en CSS para la diagramación de tu sitio. Totalmente recomendado.

  • CSS Formatter and Optimiser
    Optimiza y formatea tus CSS. Excelente su variada configuración y la posibilidad de devolverse de un CSS super optimizado a uno legible.

  • CSS Information
    Revisa todos los estilos internos, externos, importados… de tu sitio.

  • formArchitect
    Crea cualquier tipo de formulario: ¡sin tablas, basado en los estándares web, separando las capas de presentación, contenido y comportamiento, compatible con cualquier navegador y gratis!

  • Format CSS Online
    Otro formateador de CSS. Excelente la gran variedad de opciones que tiene.

  • Free CSS Navigation Menu Designs
    Descarga unos excelentes menús en CSS basados en la técnica Sliding Doors de A List Apart.

  • Inknoise Tools
    Poseen dos magní­ficas herramientas:
    • The Amazing Rolloverer: Una herramienta para generar botones de menús sin JavaScript y accesibles.
    • Layout-o-Matic: Genera plantillas de diagramación con hojas de estilos (CSS layouts) y con sólo tocar un botón. No tan bueno como el CSS Creator pero te puede servir.

  • List-u-Like CSS Generator
    Como el Layout-o-Matic te permite crear CSS menús con base en listas ordenadas. Increiblemente configurable.

  • W3C Tablin: An HTML Table Linearizer (CHY)
    Este programa de la W3C te permite "linearizar" las tablas que tengas en HTML para así­ presentarlas de acuerdo a las preferencias que se tengan en la capa de presentación (por ejemplo para un usuario final con un lector de pantalla).

  • Webmaster Toolkit CSS Menu Generator
    Te generará un menú de navegación basado en CSS.

  • Website Contact Form Generator
    Crea un formulario de Contacto para tu sitio en ASP, PHP o Perl.

Manejo del Color

  • CBC: Color Blindness Check (WAT)
    Esta herramienta "re-coloriza" tu página con los colores que verí­a una persona con deficiencias de rojo y verde.

  • ColorBlender
    Esta herramienta de evaluación de colores es excelente para la creación de paletas: una vez hayas seleccionado tus colores puedes descargar tu paleta para Photoshop (en formato ACT), para Illustrator (en formato EPS) o enviártela por correo.

  • Color Palette Generator
    Genera tu paleta de colores con base en una imagen.

  • Color Schemer Online
    Esta herramienta te permite seleccionar una gama de colores adecuada para tu sitio. Antes de utilizarla te recomendarí­a leer el artí­culo Color Tutorial. El obtener una gama de colores accesibles en realidad depende de ti, por lo cual te recomendarí­a que utilizaras posteriormente otra de las herramientas aquí­ listadas para revisar tu Manejo del Color.

  • Color Scheme Generator 2
    Mi herramienta favorita para seleccionar colores era el Color Schemer Online hasta que conocí­ este Generator. Además de que tienes la posibilidad de generar tus paletas de colores, con un solo clic puedes revisar otras armoní­as posibles, crear variaciones a cada paleta y lo mejor: revisar tu paleta frente a problemas de visión que pudieran tener tus visitantes. Todo en esta harramienta. Totalmente recomendada. Si es de tu interés todaví­a está disponible la primera versión de esta magní­fica herramienta. Aún te recomiendo el Color Tutorial para entender el manejo de las armoní­as de colores.

  • Colour Contrast Check
    Esta herramienta te permitirá especificar dos colores y determinar si tienen el suficiente contraste para ser vistos por alguien con problemas visuales o en una pantalla en blanco y negro.

  • Colour Lovers
    Otra galerí­a de colores y paletas.

  • Colorblind Web Page Filter (CHY)
    Otra herramienta para revisar los colores de tu página y cómo los verí­an personas con problemas visuales. Ofrece gran variedad de simulaciones.

  • Considering the Color Blind Design Evaluation
    Otra página para revisar tu HTML y tus colores.

  • Juicy Studio
    He aquí­ dos herramientas para evaluar colores:

  • VisCheck (CHIE, CHY, WAT)
    Esta herramienta te permite simular cómo verí­a tu página o tus imágenes una persona con problemas visuales (diferenciación de colores). Es recomendable que utilices el revisor de imágenes más que el de sitios (utiliza una captura de pantalla de tu sitio).

Meta Tags

SEO (Search Engine Optimization)
Gran diversidad de sitios ofreciendo herramientas muy similares… mira con cuáles te quedas.

Simulación de navegadores

  • 1 Hit Screen Size Emulator
    Mira tu sitio en diferentes tamaños de pantalla.

  • 640×480 Test Frame
    Revisa tu sitio en una pantalla de 640×480.

  • BrowserShots
    Pantallas de su sitio bajo Linux en los navegadores Epiphany, Firefox, Galeon, Konqueror, Mozilla y Opera. El servicio se te puede demorar un dí­a o más.

  • Browser Emulator
    Revisa tu sitio en los navegadores: Mosaic, Netscape, Lynx, IE y HotJava.

  • Delorie Lynx Viewer (CHIE, CHY)
    Visor de Lynx para que veas tus páginas con este navegador en modo texto.

  • iCapture
    La pantalla de tu sitio en un MAC ví­a Safari.

  • ieCapture
    La pantalla de tu sitio en un Internet Explorer.

  • Mac Screenshot Service
    La pantalla de tu sitio en un MAC. Visto con Safari, IE, Camino o Mozilla.

  • Public Lynx Access
    Navega tu página en Lynx via Telnet.

  • SafariTest
    Otro visor de Safari. Excelente la posibilidad de seleccionar el ancho de pantalla en la cual se puede ver tu sitio: 800, 832, 1024 y 1280.

  • Screen Size Tester
    Tu página en infinidad de tamaños estándares.

  • Total Validator
    Este excelente validador te hace la captura de pantalla en diversidad de navegadores de Windows y Linux (17 en total). El Screeshot te llega a tu correo.

  • Yellow Pipe Lynx Viewer (WAT)
    Otro visor de Lynx.

Usabilidad

Otras

  • Favicon.ico Maker
    Haz el icono de tu sitio fácilmente con base en un PNG. De lo mejor!!!


4. Validadores

Accesibilidad

CSS

Feed (RSS, Atom y OPML)

HTML

Peso y Velocidad de Carga

Ví­nculos

XML

Otros


5. Otros recursos

Libros

Sitios

6. Actualizaciones a este Post

  Feb 16:
      Categorización de las Herramientas para Descargar > Usabilidad
      Nuevos Herramientas para Descargar > Usabilidad > Evaluación Heurí­stica
      Nuevo en Para Descargar > Patrones: Patrones de Accesabilidad
      Nuevo en Para Descargar > Navegadores: Hal Screen Reader

  Feb 14:
      Nuevo en Para Descargar > Patrones: Yahoo! Design Pattern Library

  Feb 10:
      Nuevo en Herramientas Online > HTML & CSS: Website Contact Form
      Nuevo en Herramientas Online > SEO: Talk Digger

  Feb 2:
      Nuevo en Otros Recursos > Sitios: Resources for Web Design
      Nuevo en Herramientas Online > HTML & CSS: Format CSS Online
      Nuevo en Herramientas para Descargar > Usabilidad: uzCardSort
      Nuevo en Herramientas para Descargar > Usabilidad: WebCAT
      Nuevo en Herramientas para Descargar > Usabilidad: CardSword

  Ene 27:
      Nuevo en Para Descargar > Patrones: UI Patterns and Techniques
      Nuevo en Validadores de HTML: NetMechanic Toolbox

  Ene 23:
      Nuevo en Add-ons para tu Navegador: Aardvark Extension
      Nuevo en Herramientas para Descargar > Usabilidad: CardSword
      Nuevo en Herramientas para Descargar > HTML & CSS: First Page 2006

  Ene 20:
      Nuevo en Herramientas Online > Simulación de Navegadores: Public Lynx
      Nuevo en Validadores de HTML: Doctor HTML
      Nuevo en Validadores de Ví­nculos: LinkScan
      Nuevo en Validadores de HTML: Dr. Watson
      Nuevo en Validadores > Otros: LinkPopularity.com
      Nuevo en Validadores de Accesibilidad: Total Validator
      Nuevo en Herramientas Online > Simulación de Navegadores: Total Validator

  Ene 19:
      Nuevo en Herramientas para Descargar > HTML & CSS: sIFR 2.0
      Nuevo en Herramientas Online > Manejo del Color: Colour Lovers
      Nuevo en Herramientas para Descargar > HTML & CSS: Zebra Tables

  Ene 17:
      Nuevo en Herramientas Online > Fuentes: What The Font?!
      Nuevo en Herramientas Online > HTML & CSS: formArchitect

  Ene 12:
      Nuevo en Otros Recursos > Sitios: ñblog
      Nuevo en Otros Recursos > Sitios: Tooler

  Ene 11:
      Nuevo en Herramientas para Descargar > HTML & CSS: CSS Vista
      Nuevo en Herramientas Online > Fuentes: Identify a Font
      Nuevo en Herramientas para Descargar > HTML & CSS: Nice Forms
      Nuevo en Herramientas Online > Manejo del Color: ColorBlender
      Nuevo en Herramientas para Descargar: Bullet-Proof Rounded Corners
      Nuevo en Herramientas para Descargar: Simple Tricks for Usable Forms

  Ene 6:
      Nuevo en Herramientas Online > Otras: Favicon.ico Maker
      Nuevo en Herramientas Online > Manejo del Color: Color Palette Generator

  Ene 5:
      Nuevo en Validadores de Ví­nculos: Links Recí­procos
      Nuevo en Validadores de Ví­nculos: Links Rotos

  Ene 3:
      Nuevo en Validadores de HTML y XML: HTML/XHTML/DocBook XML
      Nuevo en Validadores de HTML: HTML 3.2 Validator
      Nuevo en Validadores de Feeds: Experimental Online RSS 1.0
      Nuevo en Otros Validadores: Favicon Validator
      Nuevo en Otros Validadores: OPML Validator
      Nuevo en Herramientas para Descargar: REL Link Checker Lite
      MAGpie ahora en Herramientas para Descargar: Accesabilidad

  Dic 30:
      Nuevo en Otros Validadores: Web 2.0 Validator

  Dic 29:
      1 Hit Screen Size Emulator ahora en Simulación de Navegadores

  Dic 28:
      Nuevo en Validadores de Accesabilidad: Examinator
      Patrones y Usabilidad ahora en Herramientas para Descargar
      Nuevo en Menús y Navegación: TemaTres
      Categorización de las Herramientas para Descargar
      Nuevo en Validadores HTML: Relaxed – The HTML Validator

  Dic 27:
      Menú del listado

 

Los comentarios están cerrados.