13 maneras de probar el navegador y validar su trabajo

Todos los días, al revisar plantillas en ThemeForest, pruebo los envíos para validación y compatibilidad con el navegador, sin mencionar mi propio trabajo. Con el tiempo, he buscado en la web las mejores herramientas de validación y pruebas de compatibilidad del navegador. Aquí están mis favoritos.

Validación de HTML y CSS

Primero echemos un vistazo a algunos métodos para verificar la validación de HTML y CSS. Debo mencionar que trabajo en una Mac, por lo que estos estarán más predispuestos por Mac. Sin embargo, no se preocupe, hay muchas soluciones independientes de la plataforma..

Junto con la validación de sus archivos, también debe formatear su marca muy bien. "Ejemplos y consejos para un gran formato HTML / CSS" es un artículo para leer más sobre ese tema.

1. Validación W3C - HTML

Probablemente el más comúnmente conocido es el Servicio de Validación de W3C en línea. Puede validar por URI, subir archivos o ingresar directamente el marcado. Hay varias opciones de validación disponibles, aunque la mayoría de las veces no necesitarás meterte con ellas.

2. Validación W3C - CSS

W3C también tiene un servicio de validación de CSS con el que probablemente esté familiarizado. Al igual que con el servicio de validación HTML, la versión CSS tiene opciones adicionales si es necesario y permite la validación a través de URI, carga de archivos y entrada de marcado directo.

3. [Firefox] Web Developer Toolbar

La extensión de la barra de herramientas para desarrolladores web para Firefox es muy popular y tiene un montón de excelentes funciones, junto con algunas herramientas excelentes para verificar la validación de HTML y CSS. Puede verificar rápidamente la validación del sitio que está viendo actualmente o el archivo local que está viendo. Enviará el URI o el archivo que se revisará a W3C y mostrará los resultados en una nueva pestaña.

También puede activar "Mostrar validación de página" para mostrar información de validación rápida para HTML y CSS sin necesidad de abrir una nueva pestaña. Muy útil si estás trabajando en un proyecto. También puedes validar mucho más que solo HTML y CSS.

4. [Independiente del navegador] W3C Validator Favelets

Utilizo Safari como mi navegador web principal, pero Firefox me ha echado a perder antes de cambiar con la gran selección de extensiones como la barra de herramientas para desarrolladores web y Firebug. Safari tiene el Inspector Web, una herramienta similar a Firebug pero no te permite verificar la validación de archivos.

Una forma rápida y fácil de dar a casi cualquier navegador principal una forma de validar HTML y CSS es mediante el uso de favelets. Los Favelets son fragmentos de JavaScript marcados para agregar funcionalidad adicional. W3C proporciona varios favelets de validación que uso con frecuencia con Safari.

5. Su editor de desarrollo

La mayoría de los editores de desarrollo ofrecen algún tipo de herramienta de validación. Coda y CSSEdit son actualmente mis editores de elección y ambos proporcionan herramientas de validación.

6. Validador S.A.C.

Si necesita verificar la validación de una gran cantidad de documentos rápidamente, puede ser una molestia abrirlos todos en su editor favorito o mediante el navegador. Esta aplicación lo hace rápido y fácil..

Validador S.A.C. es una aplicación autónoma de OS X que puede validar documentos HTML (con W3C) usando un favelet, arrastrar y soltar, con URL o solo con el Archivo> Abrir de la aplicación. Utilizo el método de arrastrar y soltar particularmente a menudo. ;-)

Reflexiones finales sobre la validación

Si bien la validación es muy importante, es solo una herramienta para ayudar a asegurar que su código cumple con los estándares y todas esas cosas buenas. Si está utilizando algunas nuevas tecnologías web, es posible que no se valide, pero eso no significa que no deba usarlas. La innovación suele nacer rompiendo las reglas..

Dicho esto, si va a enviar una plantilla a la venta en Theme Forest, asegúrese de que TODOS sus archivos se validen antes de sumisión. Si hay errores de validación debido a cosas como CSS3, solo asegúrese de mencionarlo en las notas para el revisor. ;-)

Pruebas de compatibilidad del navegador

Si todo el mundo usara versiones actualizadas de Firefox o Safari, la prueba del navegador sería muy fácil. Enfrentémoslo, eso no va a suceder y nos ocuparemos de los problemas de Internet Explorer durante los próximos años (no solo IE6).

Estas son algunas de las herramientas que utilizo y otras que no, para probar la compatibilidad en Internet Explorer, Safari, Firefox y otros navegadores..

Actual IE, Firefox y Safari

Obviamente, tendremos los navegadores actuales instalados en nuestros sistemas como Firefox 3.5, Safari 4, Opera e Internet Explorer si está en Windows.

7. Versiones anteriores de Firefox

Si necesitas probar versiones anteriores de Firefox, existen varias formas de hacer esto que he encontrado, pero estas son las más fáciles que he encontrado..

  • Windows: Firefox independiente (versiones anteriores) a través de Portableapps.com
  • Mac: MultiFirefox 2.0

Portableapps en Windows ejecuta Firefox como una aplicación independiente, por lo que la instalación no es necesaria y no afectará a su instalación actual de Firefox.

MultiFirefox 2.0 en Mac te permite ejecutar varias versiones de Firefox lado a lado al administrar los perfiles de Firefox.

Para descargar otras versiones de Firefox, puede visitar http://releases.mozilla.org/pub/mozilla.org/firefox/releases/

8. Versiones anteriores de Safari

Desafortunadamente para los desarrolladores web basados ​​en Windows, no tengo una solución fácil para probar varias versiones de Safari. Para nosotros, los usuarios de Mac, hay una buena colección de versiones independientes de Safari proporcionada por Michel Fortin.

9 y 10. Versiones anteriores de Internet Explorer

No hay una manera fácil de probar interactivamente IE en Mac, así que uso Parallels para ejecutar una Máquina Virtual de Windows XP con IETester instalado. Esta aplicación le permite probar versiones de IE desde 5.5 en Windows XP, Vista y 7.

De vez en cuando notará una rareza en IETester que no estoy seguro de que ocurra en una versión nativa de IE6 o 7, por lo que también instalé versiones independientes de IE6, 7 y 8 con Internet Explorer Collection..

Servicios de instantáneas

Si no necesita interactuar realmente con su sitio en estos navegadores, también puede usar varios servicios de instantáneas del navegador que solo mostrarán una imagen de cómo el sitio buscará una amplia gama de navegadores..

11. Adobe BrowserLab

Adobe recientemente lanzó un nuevo servicio llamado BrowserLab que le permite ver una instantánea de un sitio web a través de una URL en diferentes navegadores. Es rápido, gratis y te ofrece un par de opciones de visualización diferentes para comparar diferentes versiones de navegador..

12. Browsershots.org

Browsershots.org es la misma idea que tiene Adobe BrowserLab pero con varias diferencias. Puede probar más navegadores en más plataformas con más opciones como tamaño de pantalla, profundidad de color, javascript, flash, etc. El inconveniente es que el servicio es un poco más lento (a veces demasiado lento) y no es tan bueno como una interfaz de usuario.

13. Browsercam

Si no has leído "25 servicios web esenciales para diseñadores", deberías. Tiene algunos excelentes servicios que es como me enteré de Browsercam.

Browsercam es básicamente lo mismo que Browsershots pero es un servicio de pago, pero ofrece algunas características más profundas y asumo resultados más rápidos, aunque todavía no lo he usado..

Pensamientos finales

Así que ahí lo tienen. Varias formas de validar y probar su trabajo tanto en Windows como en Mac. Si está enviando una plantilla a Theme Forest, ahora no tiene excusa para errores de validación o incompatibilidades del navegador. La gran mayoría de las plantillas que reviso se rechazan debido a errores de validación y problemas del navegador que deberían haberse solucionado antes de enviarse.

Si utiliza o conoce una herramienta (o herramientas) para la validación o la prueba del navegador, háganoslo saber en los comentarios..

  • Síganos en Twitter o suscríbase a la Fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios.