martes, diciembre 27, 2005

Herramientas para Diseñadores y Desarrolladores


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).

  • Toolbars:

    • 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 (800x600, 1024x768, etc.).

    • Web Accessibility Toolbar (Internet Explorer y Opera )
      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.

  • Add-Ons:

    • 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.

    • Accessibility Extensions (Firefox y Mozilla)
      Revisa tu sitio cómo lo navegarian personas con discapacidades.

    • 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.

    • Fangs Extension (Firefox y Mozilla)
      Esta excelente extensión crea una representación textual de tu página de manera similar a cómo sería leeída en un lector de pantalla.

    • Firebug Extension (Firefox)
      Un explorador del DOM. Te permite revisar tu JavaScript, CSS, HTML y Ajax.

    • 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.

    • LiveHTTPHeaders Extension (Firefox)
      Revisa al vuelo los headers que envía tu servidor.

    • MozBraille Extension (Mozilla y Firefox)
      Esta extensión te tranforma el navegador en un navegador accesible para ciegos o personas con ceguera parcial. Te ofrece tres salidas: mediante una terminal braille, auditiva o por aumento del tamaño de los textos.

    • SIDAR and HERA Extension (Netscape, Firefox, Flock y Safari)
      Por un lado la Extensión Sidar te facilita el acceso a las distintas secciones y recursos en web del Sidar. Por el otro lado, la HERA-Extension te permite revisar la página web que visitas mediante HERA (validador disponible en los Validadores de Accesibilidad).

    • TAW3 with a Click (Firefox)
      Otra excelente extensión para verificar la accesibilidad de tu sitio. Esta vez mediante el servicio del TAW3.

    • View Source Chart Extension (Firefox)
      Esta extensión crea un gráfico a colores con la estructura del sitio. Una versión muy mejorada de la X-Ray Extension. Totalmente recomendada.

    • X-Ray Extension (Firefox)
      Esta sencilla extensión te permite ver los tags de la página sin tener que ver su código fuente. Excelente para evaluar la semántica de tu página.

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.

  • TAW3 Standalone
    En este sitio se ofrecen excelentes herramientas para análisis de accesbilidad. Esta es una de ellas. Una herramietnas que puedes descargar en tu computador. Igualmente tienen una extensión para Firefox y un validador Online
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.

  • Simpletidy 2.2: HTML to XHTML Converter
    Convierte tu web hecha en HTML a XHTML. Dentro de las características de esta interesante app está el que limpia y depura el código (incluído el que general Microsoft Word).

  • 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
  • Amaya
    Hecho por los mismos W3C, este navegador te permite probar tu sitio contra todos los estándares Web.

  • BrailleSurf
    Este navegador, hecho especialmente para personas con problemas en la visión, te permitirá revisar la accesibilidad de su sitio.

  • 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.

  • IEs 4 Linux - Internet Explorers for Linux
    Ya puedes tener Internet Explorer 6, 5.5 y 5 en Linux (usando Wine). Apenas para los diseñadores web que trabajan en Linux y deseen probar sus sitios con el tradicional IE.

  • 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.

  • Nokia Mobile Browser Simulator
    El emulador del navegador en los moviles Nokia.

  • Opera
    Este conocido navegador te ofrece varias vistas para que pruebes la accesibilidad y usabilidad de tu sitio. Te vas por el menú VIEW > User Mode y "juega" con las diferentes opciones preestablecidas.

  • 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.

  • The MSN TV Viewer
    Descarga esta aplicación y emula cómo se verán tus páginas a través de WebTV.

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

  • korhoen typeviewer
    Este excelente simulador te permite configurar la fuente que deseas en tu CSS, gracias a que te permite jugar con las opciones : size, family, weight, style, variant, align, etc.

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

  • STC Font Browser 2.0
    Esta aplicación en Flash te permitirá previsualizar rápidamente las fuentes activas en tu sistema.

  • 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 Compressor
    Así de sencillo: Comprime tu CSS.

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

  • CSS Form Code Maker
    Este generador de formularios en HTML y CSS es único en su colorido, sin embargo genera los formularios sin tablas. Puede ser útil.

  • 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.

  • CSS Link Creator
    Genera los estilos necesarios para los efectos rollover en tu CSS.

  • Dynamic Form Builder
    Otro creador de formularios.. Muy elegante!

  • 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.

  • JotForm
    JotForm es el primer constructor de formas con un editor online y WYSIWYG. Una vez hayas creado tu formulario, puedes copiar el HTML generado y pegarlo en tu sitio web. O si lo deseas te ofrecen el servicio de hospedarlo y manejarte los resultados.

  • 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.

  • QrONE CSS Designer - CSS Style Editor
    Un muy buen editor en línea de hojas de estilos.

  • Stylesheet Generator
    Un generador de hojas de estilo. Para usuarios novatos está excelente.

  • 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.

  • Wufoo
    Esta herramienta te permite, al igual que JotForm (unos renglones arriba reseñada), construir y hospedar formularios.

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.

  • Colour Check
    Determinar la diferencia de color y contraste entre dos colores para maximizar la lectura (compara el color de tu fondo con el de tus fuentes).

  • Color Harmonies
    Busca los colores complementarios a un RGB y crea armonías, combinaciones y hasta temas con base en ellos.

  • Color Laboratory
    Selecciona una gama de colores y revísalos cómo los vería una persona con problemas visuales.

  • 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.

  • Color Tool 2
    Otre excelente creador de paletas de colroes.

  • 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.

  • Colour Blindness Simulator
    Con este simulador de problemas visuales podrás revisar los colores de tus imágenes (o tu sitio mediante un Screenshot).

  • 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.

  • 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).

  • WebTV Color Picker
    Revisa tu paleta de colores para WebTV.

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.

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

  • 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.

  • html2txt
    Tu sitio web en un navegador de sólo texto.

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

  • 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

  • Accessibility Wizard
    Excelente herramienta para desarrolladores y equipos web. Según el rol en el proyecto le asigna las respectivas tareas apra hacer del proyecto uno accesible.

  • FavIcon from Pics
    Haz el icono de tu sitio con cualquier tipo de imagen y resolución.

  • FavIcon Generator
    Este generador te recibe gif, jpg y pngs con transparencias.

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

  • URL Rewriting Tool
    Si tu sitio está hospedado en un servidor Linux y tienes acceso al archivo .htaccess, con esta herramienta puedes convertir tus URLs dinámicas como http://www.sitio.com/producto.php?id=1 a URLs estáticas como http://www.sitio.com/producto-id-1.htm. Es lo mejor que puedes hacer para ser indexado eficientemente por los buscadores.

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

  Abr 11:
      Nuevo en Add-ons para tu Navegador: View Source Chart Extension
      Nuevo en Herramientas Online > Manejo del Color: Color Tool 2
      Nuevo en Herramientas Online > SEO: Seekbot
      Nuevo en Add-ons para tu Navegador: Firebug Extension
      Nuevo en Add-ons para tu Navegador: LiveHTTPHeaders Extension

  Abr 6:
      Nuevo en Herramientas Online > Manejo del Color: Colour Blindness Sim.
      Nuevo en Herramientas Online > Manejo del Color: Colour Check
      Nuevo en Herramientas Online > Otras: Accessibility Wizard
      Nuevo en Validadores de Accesibilidad: ART Guide
      Nuevo en Validadores de Accesibilidad: ART Simulator
      Nuevo en Herramientas Online > Manejo del Color: Color Laboratory

  Abr 5:
      Nuevo en Herramientas Online > SEO: Alexaholic
      Nuevo en Herramientas Online > SEO: Alexa Traffic Ranking
      Nuevo en Add-ons para tu Navegador: X-Ray Extension
      Nuevo en Add-ons para tu Navegador: X-SIDAR and HERA Extension
      Nuevo en Herramientas para Descargar: Accesabilidad: TAW3 Standalone
      Nuevo en Add-ons para tu Navegador: TAW3 with a Click
      Nuevo en Usabilidad > Evaluación Heurística: Checkpoint Checker
      Nuevo en Herramientas Online > Simulación de Navegadores: html2txt
      Nuevo en Para Descargar > Navegadores: The MSN TV Viewer
      Nuevo en Herramientas Online > Manejo del Color: WebTV Color Picker
      Nuevo en Usabilidad > Evaluación Heurística: Tabla de Verificación
      Nuevo en Para Descargar > Navegadores: BrailleSurf
      Nuevo en Add-ons para tu Navegador: MozBraille Extension
      Nuevo en Para Descargar > Navegadores: Opera
      Nuevo en Para Descargar > Navegadores: Amaya
      Nuevo en Validadores de Accesibilidad: AccMonitor Accessibility
      Nuevo en Para Descargar > Navegadores: Nokia Mobile Browser Simulator
      Nuevo en Otros Recursos > Sitios: Complete List of W.A.E.T.
      Nuevo en Validadores de Accesibilidad: Accessibility Check

  Mar 24:
      Nuevo en Otros Recursos > Sitios: Tools - WebSiteTips
      Nuevo en Otros Recursos > Sitios: El Utilitario
      Nuevo en Para Descargar > Navegadores: IEs 4 Linux
      Nuevo en Add-ons para tu Navegador: Accessibility Extensions
      Nuevo en Herramientas Online > Manejo del Color: Color Harmonies

  Mar 22:
      Nuevo en Herramientas Online > SEO: Summit Media Spider Simulator
      Nuevo en Herramientas Online > HTML & CSS: QrONE CSS Designer
      Nuevo en Herramientas Online > SEO: ROR Sitemap Generator
      Nuevo en Para Descargar > Patrones: WebPatterns.org
      Nuevo en Add-ons para tu Navegador: Fangs Extension

  Mar 13:
      Nuevo en Herramientas Online > Otras: FavIcon Generator
      Nuevo en Herramientas Online > HTML & CSS: CSS Compressor
      Nuevo en Herramientas Online > HTML & CSS: CSS Link Creator
      Nuevo en Herramientas Online > HTML & CSS: CSS Form Code Maker
      Nuevo en Validadores > Otros: Rex V
      Nuevo en Herramientas Online > HTML & CSS: Stylesheet Generator
      Nuevo en Herramientas Online > HTML & CSS: Dynamic Form Builder

  Mar 8:
      Nuevo en Validadores > Otros: Search Engine Friendly Redirect Checker
      Nuevo en Validadores de Accesibilidad: Functional Accessibility Evaluator
      Nuevo en Herramientas Online > Otras: URL Rewriting Tool

  Mar 3:
      Nuevo en Validadores > Otros: JSLint (The JavaScript Verifier)
      Nuevo en Herramientas Online > Fuentes: korhoen typeviewer
      Nuevo en Herramientas Online > Fuentes: STC Font Browser 2.0
      Nuevo en Herramientas Online > Otras: FavIcon from Pics
      Nuevo en Herramientas Online > HTML & CSS: JotForm
      Nuevo en Herramientas para Descargar > HTML & CSS: Simpletidy 2.2
      Nuevo en Herramientas Online > HTML & CSS: Wufoo

  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

23 comentarios:

Gonzalo dijo...

Fantástica recopilación :)

Anónimo dijo...

Muchas felicidades por la lista, y gracias por la info. Va directa a mis favoritos para analizarla con detenimiento. ;)

Conectada dijo...

muchas, muchas gracias!

José Luis dijo...

Buen trabajo. Sabes, yo añadiría una herramienta: Xenu. Se trata de una herramienta que chequea vínculos. A diferencia de las herramientas que tu tienes listadas en la categoría "validadores: vínculos" Xenu te chequea todas los vínculos de tu sitio. Es decir, no tienes que revisar cada página por separado.
Xenu, además, te crea un mapa de tu sitio, te muestra el anchor text de cada vínculo, te dice si los vículos externos han sido redirecionados, e incluso te indica si tienes archivos huerfanos en tu servidor.
Esta herramienta es gratis pero lamentablemente no es Open Source.

Gabriel Porras dijo...

Muchas gracias José Luis.. Te cuento que el Xenu's Link Sleuth ya lo tengo referenciado en Herramientas para Descargar > Vínculos!

lhuis dijo...

hey! ojalá existan más blogs como estos, información interesante

Cruzul dijo...

Gracias Gabriel, estás ya entre mis imprescindibles.

Saludos:
Ricardo Lago

Anónimo dijo...

Muchisimas gracias por esa recopilacion, acabo de echar un vistazo y acabas de subir al puesto 1 de mis favoritos

Tere

Anónimo dijo...

Chapeau, oiga... tremendo recurso de recursos...

Patricia Galvis dijo...

Como siempre Gabito, gracias y mil gracias. Son maravillosos todos tus enlaces. Sabes me has enseñado mucho desde hace mucho tiempo, y ahora no es la exepción. LaGalvis

Anónimo dijo...

Hola Gabriel, es Felix Alvarez de Caracas ( no se si te acordaras de mi?), el caso es que estoy montando un site nuevo de ayudas para diseñadores y desarrolladores web y si me lo permites, colocare varios de estos programas como programas recomendados (con la correspondiente acotacion de donde lo consegui) .. y por supuesto, tu Blog tendra un lugar destacado dentro de mi website.

Una vez mas felicitaciones por el contenido y que continuen los exitos.

Saludos

Felix Alvarez.

Gabriel Porras dijo...

Que tal Felix... Mil gracias por tus palabras... Por supuesto que puedes referenciar mi blog o mis post o lo que necesites de aquí. Para eso lo he hecho! ;)
Espero que me cuentes cuando tengas tu sitio publicado.
Saludos!

Anónimo dijo...

¡Hola, enhorabuena por el artículo!

Una duda para el autor y público en general: ¿os funciona torquemada cuando intentáis hacer un análisis? ¿sabe alguien algo sobre este tema?.
Gracias, un saludo

Gabriel Porras dijo...

Efectivamente el torquemada no funciona.
Lo probé desde la oficina y desde mi casa y nada.. Sorry...
Te recomendaría que les escribieras directamente a ver qué te dicen.
Saludos!!

Anónimo dijo...

Ok, muchas gracias. Escribí hace un par de días y todavía no he tenido respuesta. Era para ver si alguien sabía algo. Cuando contesten os informo :)

Un saludo, Bea.

raherrera1 dijo...

Buenisimas herramientas, habia buscado mucho por algunas de ellas. Gracias.

Picatrix dijo...

Sencillamente en dos palabras "im - presionante" eres un genio.

la bloga dijo...

excelente post, más información de la que se puede digerir en una lectura de blog.

saludos

ann dijo...

By the way, I have been looking up on the Internet and I have found some tools which are really cools to monitor the positioning of the competition, as well as seeing their tips and tricks. If you are interested, I advised to you have a look. It seems they are free: http://www.lineared.com/es/recuperar/datos-posiciones-google-msn-yahoo.htm

Itakora dijo...

Yo añadiría el validador PISTA de accesibilidad. Más info en http://www.itakora.com/?p=50

Saludos y gran post!

Pedro dijo...

Ótimo post. Parabéns!!!!

Anónimo dijo...

Gracias por el articulo voy a entrar`para saber de que va.

Anónimo dijo...

No lo sabia gracias.