Hola a todos!

Antes que nada, gracias a todos los que semana a semana hacéis engordar las estadísticas de la web,  aún que la semana pasada fue una semana complicada con puentes y acueductos por medio, estoy muy contento ya que llegamos hasta las 102 visitantes únicos, mil gracias a todos y a seguir creciendo juntos.

Portada cristianmunoz.es

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.web developer indicadores
  • 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.Consola Web Developer

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

– 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í!

 

Saludos

Kristian Muñoz Muñoz
Programador Web

 



5 Comments

  1. Funo Says Responder

    Bon artícle Kitya!!
    No coneixia la pàgina aquesta de validadod w3, està guai!!!
    Jo per mirar errror de JavaScript faig servir el firebug, en el mode consola. T’informa dels errors, i pots debugar també si vols!
    Per trobar errors/millorar la web, fem servir el PageSpeed pel firebug, i t’informa de la velocitat de càrrega de la pàgina, així com de les coses a millorar per fer-la mès ràpida, com ara redimensionar imatges, compresió de css, optimització del codi html, etc…. Una de les coses bones que té és que si per exemple t’informa de que una imatge hauria de ser de 100×100 i tu carregues una de 300×300, inmediatament ja et pots descarregar la imatge amb el tamany bo i simplement substituir-la. Exactament igual passa amb els css i js, on t’informa del % de compresió que pots tenir i tù nomès has de descarregar i pujar per ftp 😉
    Felicitats pel blog!

    • Kristian Muñoz Muñoz
      retek2005 Says Responder

      Eis Funo!
      A part del que dius del PageSpeed del firebug, hi ha la web de Google Page Speed Online, que dona la mateixa informació i poder una mica mñes ampliada i tot. No se si ofereix la possibilitat de descarregar les imatges en la mida correcte, i lo del js i css tampoc… ho investigaré!
      Lo de debugar amb el Firebug no ho he fet mai, per la propera no dubtis que ho faré servir.

      Hem de quedar per parlar d’aquestes coses… tot i que si seguim així no parlarem mai jaja!

      Merci per les felicitacions!!

      • Funo Says Responder

        Si, ja coneixia la web de Page Speed de Google. Per mi és mès completa la del plugin de page speed del firebug 😉

        Eso eso! A veure si kedem un dia tiu!

        Salut!

  2. Jamie Arjona Says Responder

    Buf, me viene de perlas esta entrada :D!!!!!!!!!!!!

Dejar un comentrario:

¿Eres humano? * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.