Vamos con el tema de hoy, detección de errores (la corrección la dejo para la pericia de cada uno, y para consultas me tenéis aquí!) . Muchas veces hay errores en nuestras páginas web, que a simple vista son indetectables, pero hacen que algunos navegadores no enseñen correctamente el contenido, haciendo que la experiencia de usuario no sea la esperada y en definitiva que no tengamos una web perfecta, que supongo que todos deseamos.
A parte de eso, como programador hay ocasiones en las que es necesario usar estas herramientas para mejorar el funcionamiento de una página web, o para retocarla. En el articulo de hace dos semanas, Kit de programación web, hablé de algunas de las herramientas que hoy trataré con más profundidad.
Detección de errores JavaScript y CSS:
Los errores JavaScript son los que a los programadores nos tocan más las narices, ya que hacen que el funcionamiento del alguna parte importante de la web no sea el correcto: pulsar botones, movimiento de objetos, etc… Por suerte jQuery (librería JavaScript) nos esta poniendo las cosas cada vez más fáciles.
Los de CSS suelen ser más problema de los diseñadores o maquetadores, en mi caso somos la misma persona todos, y hacen que se muevan elementos por la pantalla, que no aparezcan, etc.
Para ambos casos, se pueden detectar esta clase de errores con el complemento “Web Developer” para Firefox. Cómo ya expliqué añade varias funcionalidades, y una de ellas son 3 marcadores en la derecha que indican (de izquierda a derecha):
- Modo de compatibilidad: Siguiendo estrictamente o no los estándares.
- Errores en el CSS.
- Errores de JavaScript.
La imagen de la derecha muestra el resultado de la página de Google, cómo veis tienen errores de CSS (habrá que proporcionarles mis servicios) aunque no siempre es fiable este indicador, ya que a veces hay formas de evadir errores de navegador, y hacer “trampas” para que algunas funcionalidades estén disponibles en todos los navegadores, y esas “trampas” pueden provocar errores por otro lado. Bien una vez hemos detectado los errores, si pulsamos encima del indicador que deseamos, se nos abrirá la consola de web developer, que proporciona toda la información necesária para corregir los posibles errores. Hay que tener en cuenta que no nos proporcionará la solución, pero da información detallada sobre errores:
- Falta de paréntesis: Se nos pasa por alto cerrar uno.
- Declaración incorrecta de variables: No hemos definido una variable en JavaScript
- Elementos no deseados: El típico error de escritura.
- Demás errores.
En esta consola nos separa los errores, advertencias y los mensajes. Los Errores como su nombre indica, son puramente errores de programación, las advertencias son errores leves, y elementos atener en cuenta si el funcionamiento no es el correcto, ya que normalmente son elementos ignorados por el propio navegador. Por ultimo en mensajes (realmente no lo he utilizado mucho) pero son elementos de salida generados por la consola de javascript. El botón limpiar, elimina todo el contenido. Con estos elementos tendríamos que ser capaces de detectar cualquier posible error de nuestra web, queda en las manos de cada uno encontrar soluciones cómo ya he dicho.
Estándar HTML y CSS:
Con el HTML generamos todo el contenido de nuestra web y con CSS le damos el estilo, esto no se hace al azar y hay que seguir unos estándares que se han ido mejorando y retocando con el paso de los años. Actualmente usamos la versión 4 de HTML y el CSS2 aunque desde hace un par de años hasta ahora, se ha empezado la estandarización de CSS3 y HTML5, que aportarán grandes funcionalidades al mundo web, entre las más destacables el poder tener pequeñas bases de datos en el navegador, la manipulación de gráficos, y la mejora de las partes y tags HTML.
Dicho esto, es de esperar que de alguna manera podamos saber si nuestra página web sigue o no los estándares de HTML y CSS, para ello podemos ir directamente a:
-Valicación HTML http://validator.w3.org/ : Pertenece al W3 que es el organismo que establece el estándar.
Si introducimos nuestra url en la casilla que hay en la web, nos dirá si tenemos o no errores. Yo tengo que revisar código ya que tengo algunos errores y advertencias. Una vez superada la validación podemos poner el sello de validado por el w3 si queremos en nuestra web. Antes estaba más de moda, ahora ya a penas se utiliza. A parte de decirnos si está bien o no, nos proporciona ideas y posibles soluciones a nuestros errores.
– Valicadición CSS http://jigsaw.w3.org/css-validator/: Al igual que con el HTML esta web nos dirá si tenemos o no errores CSS y ideas de cómo solucionarlos. Si usáis Temas de wordpress que sean compatibles con todos los navegadores, puede ser que obtengais muchos errores de css, pero es normal, hay propiedades que son correctas en unos navegadores y en otros no, no hay que preocuparse, simplemente revisar la lista y ver los que realmente hay que corregir y ya esta.
Pues hasta aquí el artículo de hoy. Espero haber sido claro en las explicaciones como siempre intento, y que nos sigamos viendo por aquí!