Este complemento de Firefox ayuda a verificar la calidad del desarrollo de una página Web durante el proceso de creación. Con esta herramienta, se puede comprobar varios aspectos de una página Web en un solo paso, como la validez del código, la accesibilidad, errores gramaticales, enlaces rotos y capturas de pantalla para apreciar el sitio Web que estamos trabajando en los distintos navegadores.

Es importante ir validando el trabajo del sitio a medida que se avanza, si lo hacemos al final nos podemos dar con la sorpresa que por un pequeño error tendremos que hacer grandes cambios que se pudieron haber ahorrado.

Las funciones del Total Validator son:

· Validador HTML.

Permite depurar los errores en el código y corregir la estructura de la Web. La Web puede ser incompatible con algunos navegadores o versiones anteriores de estos, el validador entonces nos permite estandarizar la Web para que sea compatible con varios navegadores y dispositivos que en los últimos años ha crecido notoriamente y desde los cuales acceden los internautas a la red. Así también, facilita la indexación de la Web por los buscadores por la óptima estructuración del código.

El validador HTML comprueba el cumplimiento de las recomendaciones para estandarizar la página Web que dan la World Wide Web Consortium (W3C) y otras organizaciones internacionales.

· Validación de la accesibilidad.

Esta función es para no limitar que la página sea vista solo por un medio –navegador, dispositivos-. Esta función promueve la capacidad de uso para todos los usuarios que acceden a través de la red y de otros dispositivos; además se refiere a la capacidad para presentar los contenidos a personas que cuentan con discapacidades físicas, que les impiden usar la información disponible de una manera tradicional y por ello emplean ayudas técnicas.

· Comprobar los enlaces rotos

Es un proceso que no se puede olvidar al final de la construcción de la página Web. Los enlaces rotos son un indicador de que la Web está mal construida o no se actualiza, cualquiera de los dos casos no permite optimizar una página Web porque dificulta la indexación de la página.

· Corrector ortográfico

Así como la construcción, el desarrollo y el diseño de la página, también es importante el contenido de calidad tanto en la información como en la redacción de la página. Si la redacción no es de calidad la interpretación de los motores de búsqueda no será bien interpretada, no lo indexará o lo indexará mal, lo que afecta a la optimización.

Es otra extensión de Firefox diseñada para desarrolladores y diseñadores Web. integra funciones del JS-Console y Web Developer.

Alfunas de sus funciones son:

• Edición de HTML, CSS y JavaScript en tiempo real

Con Firebug se puede visualizar y editar el código fuente del HTML, CSS y JavaScript de una página Web en la pantalla del monitor, observando los cambios que hemos realizado de forma inmediata, pero temporal; es decir, los cambios que hemos hecho en el código de fuente son resaltados por Firebug y lo visualizamos en la página Web que estamos trabajando, pero solo veremos estos cambios hasta que actualicemos la página Web o salgamos de ella.

Por lo tanto al igual que Web Developer si queremos guardar los cambios –que hemos visualizado en la pantalla del monitor cuando trabajamos con este plugin- debemos ir al código de fuente real que está en el servidor. Además, la interfaz del Firebug es muy intuitiva

• Buscador Integrado

Facilita hallar los códigos de fuente con mayor rapidez y nos permite exportar los cambios fácilmente para aplicarlos en el código de fuente real. También, se puede filtrar la consola para que muestre sólo los errores que coinciden con el texto buscado.

• Red de vigilancia

Algunas páginas Web se demoran en cargar, el motivo puede ser, que colocó demasiado JavaScript, las imágenes de la página no han sido comprimidas, o problemas con el servidor o conexión. En caso de ser un problema de programación, la red de vigilancia le indica el peso y tiempo de carga de cada elemento, para que luego haga los cambios que desee. También puede visualizar el peso y tiempo de carga por tipo de elemento. Ej. Solo CSS o HTML.

• Exploración del DOM

El DOM define la estructura lógica de los objetos y sus funciones, y el modo en que accedemos y manipulamos cada objeto. Existen dos tipos de objetos y funciones, los que pertenecen al DOM estándar y los que son del código JavaScript y para saber cual es cual ésta función muestra qué archivos son DOM.

Si quiere editar los archivos solo se debe hacer doble clic en el espacio en blanco de la fila que se quiere modificar.

• depurador de JavaScript:

En la consola de Firebug usted puede visualizar si la página tiene errores, para ello aparecerá una aspa de color roja “X” en la parte inferior derecho del navegador. Para visualizar cuáles son los errores haga clic en el aspa roja.

Para solucionar el problema solo debe clicar vínculo, que tiene cada informe de error –está ubicado en el lado derecho y apunta al archivo y número de línea. Cuando haga clic lo llevará al depurador del JavaScript para que solucione el problema.

Semejanzas y diferencias del Firebug con la Web Developer

Tanto al Firebug como el Web Developer ayudan a desarrollar mejor los sitios Web. Cuándo emplear uno u otro depende mucho de si lo que queremos tiene que ver con el diseño o desarrollo del sitio Web. Si nuestro trabajo está más orientado al diseño de la página Web Developer es lo más recomendado porque permite trabajar más la maquetación y la semántica de la Web, así como los estilos.

Firebug, en cambio, está más orientado al desarrollo Web porque permite capturar y depurar errores en el instante y visualizarlos en la pantalla, aunque temporalmente, además permite saber la cantidad de transferencia y tiempo de carga de la Web.

La diferencia entre el JS-Console y la consola de Firebug, radica principalmente en que la consola de Firebug permite captar errores que solo son percibidos cuando la máquina se está descargando, y poder corregirlos en el acto.

Acerca del diseño web experimental: ocupación de pantalla y control del usuario

Uno de los principios de usabilidad es que el usuario mantenga el control sobre el sistema. Determinados diseños se presentan a pantalla completa o fullscreen eliminando controles de navegación y la barra de tareas del sistema operativo desconcertando al usuario.

Algunos sitios web pecan de tener un diseño demasiado avanzado y buscan encerrar al usuario a través de la invasión completa de la pantalla, eliminando el acceso a funciones del navegador (botones y barra de navegación) y del sistema operativo (barra de tareas). Los usuarios de internet no suelen tener como objetivo pasar el rato en nuestro sitio. Un sitio web suele ser una herramienta, un medio para conseguir un objetivo concreto: informarse, adquirir productos o servicios, comunicarse. En raras ocasiones, excepto en sitios en los que el usuario va a pasar un tiempo, como sitios de juegos o sitios experimentales de caracter inmersivo el usuario hará de la mera estancia en nuestro sitio un objetivo. Una de las premisas de las aplicaciones usables es que el usuario ha de mantener siempre el control se rompe. Este tipo de usuarios sorprenden negativamente creando un entorno en el que el usuario queda “cautivo” y en el que los comandos básicos no funcionan, entre ellos el de ESCAPE. Es decir, tratamos de ser nosotros quienes controlamos al usuario y el uso que hace de su equipo. La opciones para el desconcertado usuario no son precisamente “naturales” y usuales en la navegación web: desde activar el Administrador de Tareas (CTRL+ALT+SUPR) y anular tarea hasta presionar ALT+TAB y alternar con otra tarea. Por otro lado, se rompe el principio de retroalimentación del interfaz: una pista básica como el símbolo de Windows en la esquina superior derecha del navegador que nos indica si la descarga de páginas está en marcha se nos oculta: no podemos saber si estamos navegando, la conexión ha fallado o hemos descargado al totalidad de la página.

Este diseño arrebata el control y no permite el trabajo multitarea

Este artículo no trata de criticar la experimentación en el diseño de interfaces web y las propuestas atrevidas, sino que intenta hacer tener en cuenta una serie de puntos básicos a la hora de decantarse por este diseño: Los usuarios no deben ser soprendidos ni arrebatárseles el control del sistema. Muchos usuarios ni entienden este tipo de diseños, ni si su equipo está funcionando correctamente. Una vez dentro de una de estas pantallas, si no encuentran la salida, tratarán de salir inmediatamente con acciones como CTR+ALT+SUPR… Los usuarios suelen realizar varias tareas simultáneamente cuando navegan: desde navegar en varios sitios a la vez, a comunicación por mensajería instantánea, hasta lectura y redacción de emails o uso de aplicaciones informáticas.

Algunas recomendaciones

Sé estándar: La navegación en internet, por lo defectuoso del diseño de la navegación de muchos sitios se basa en el navegador. No anules ni ocultes los controles de navegación. El usuario controla: Sorprender no es malo si es agradable. Jamás sorprendas a los usuarios con acciones imprevistas que les arrebaten el control de su equipo. Si igualmente, optas (o te hacen optar) por este tipo de acciones en tu diseño: Avisa antes de abrir la ventana: muestra un mensaje que indique al usuario que va a acceder a una navegación sin navegador a pantalla completa.

Hola a todos los que leen este blog y a los que estan a punto de hacerlo. Hace unos dias me encontraba navegando por la web, quería investigar un poco más para ver que hacer para que una página web propiamente dicha pudiera ser visto en todo el mundo tal y como yo quiero que la vean, tal y como yo la diseñe.

Bueno por un instante pense que era solo cosa de que mi diseño fuera agradable a la vista de todos pero apareció un nueva palabrita : “ESTANDARIZACION”, bueno palabra que ya conocia, pero que no sabia que ya se estaba empezando a emplear y no solo eso sino que se estaba empezando a exigir en EE.UU, Australia, y paises Europeos.

Este nuevo concepto (almenos para mi) siginificaba que si mi pagina web cumplia con ciertos requerientos lo que podrí hacer con mi pagina web era impresionante, por ejemplo:

Me garantizaba que absolutamente todos podran ver mi WEB sin importar el sistema, la computadora usada(ya que en otros paises es muy usada la MAC muy diferente a una PC), etc.

La dependencia que yo pudiera tener a mi programador ya no existirá, osea ya no hay esos gastitos que siempre aparecen cuando quiero cambiar algo en mi web y yo no puedo hacerlo sino que tengo que recurrir al que hizo todo el bendito sistema.

En pocas palabras me va a resultar económico  ya que yo mismo podré hacer los cambios, y no solo eso, se hace más facil que buscadores dela talla de google me encuentren altoque.

EN CONCLUSION Y YA PARA TERMINAR ESTANDARIZAR MI PAGINA WEB HARA QUE AHORRE DINERO A LA LARGA Y QUE LOS QUE YO QUIERO QUE ME VEAN ME VAN A VER PERO OTROS MUCHOS MAS TAMBIEN ME VAN A VER.

SALUDOS A TODOS….Levito…                               

Las  paginas  web para que    sean de alta calidad  deben  estar  hecho  bajo estandares de la W3C   y  optimizado bajo SEO  para  posicionamiento natural,  estructurado de  tal menera que  tenga  un sentido de accesibilidad,  una de las tareas  mas importantes es  el digrama de flujo  para  la  estructura general de manera que el cliente  pueda saber todos  los procesos que se generara,  de   esa manera se   elimina  posibles  errores o cambios  que  se produscan en el camino,   utilizar  algun software para  hacer los  diagramas de flujo seria  importante ,   tambien  es importante que su  pagina web tenga los  colores adecuados que no cansen  a  la vista, no incluya  mucha animación  ya que ve bien pero  cansa.

La mayoria de los  opstaculos  es  caudno los que dominan  el  dreamweaver,   hace que  se limite  en el diseño de pagians  mas  atractivas, lo ams recomendable  es  manejar  Divs,  con ello  puedes hacer lo qeu ams te apresca a tu  diseño   sin depender de las  tablas y las posiciones son mas exactas en comparacion de las tablas.

una de  los ejmplos echos con Divs es  www.elimap.com , una vez   aprendido el manejo   las cosas  se hacen mucho mas  sencillas, el codigo sera mas limpio    mas rapido etc

los  desarrolladores  profesionaels dominan bien estos  temas     , tomar un curso de los mismos  les caeria bien.

lo  que puede  tomar  en desarrollar   4 semanas  lo puedes hacer en al mitad,  busca ams informacion sobre desarrollo  con Divs   con grillas  o consulta  alguno de nuestros articulos  que publicamos   tips de desarrollo profesional.

Desde hace   un buen tiempo estuve revisando sitios  web de  importancia en peru,  por lo  general el diseño de paginas  web no son    profesionales, estan basdo en  otras o adecuadas algun sistema ya hecho,  otra de las  caracteristicas encontradas es el costo  por  los  servicios de diseño  web,  la oferta  es alta  pero   el precio de pagar por  ellas esta orientado mas  a un bajo precio,  la mayoria de  empresas no estan invirtiendo mucho en desarrollar paginas web que en el tiempo se mantengan  solidas  con una imagen corporativa ganada en la red, en menos  de  2 años  el crecimiento acelerado  del ingreso de nuevos  usuarios  al acceso  a internet nos ahce pensar que en 2 años   las ventas  superaran amplimente a las  hechas el 2007, es moento  entonces de  invertir en sitios  web de    alta calidad  desarrollada  bajo estandares y proyectadas  al futuro.

El  objetivo de todo webmaster debe  ser  que  el diseño  de paginas web debe   estar  optimizada para buscadores especialmente  para google  el buscador  por excelencia,  una vez  estructurada  el sitio web  debemos ver  la optimizacion  , ahora al utilizar  un editor  se recomienda   hacerlo en php o html  de manera que google  pueda   indexar mas facilmente,  los  titulos  no deben superar los 60 caracteres,  por cada  pagina web generada debe tener  su propio  titulo y sus propios  keywords,  los  pasos  para  acceder a un servicio   o producto en la pagina web deben ser los mas   simples, evitar poner distractores,  los  diseñadores de paginas web  se  les sugiere  hacer una combinacion adecuada de manera  que el usuario no se canse por los colores  y se vaya de la  web, al final de   estas  pequeñas  recomendaciones   se sugiere generar su  Mapa site en Xml y enviarlo  a Google Webmaster  para  que tengan en cuenta  que lugares  va a indexar.

La calidad  de  diseño  web esta en la estructura, muchas  personas  que hacen  diseño de paginas web pero   poco de ellos  lo hacen de manera profesional , uno de los  elemento mas importantes  es la estructura  se recomienda no tarabajarlo con   un editor  web si no  un editor como corel  en  2 colores  blanco y negro  una vez que   pongas los elementos ordenas de tal manera  que sea vea muy atractivo  a  la vista  no cargado   ,  evitar poner   demaciadas animaciones    solo las  necesarias, logrado  ello  recien  pueden utilizar un editor  basandose   en las imagenes  generadas  previas en blanco y negro.

Estando en el editor   trabajar con colores   suaves    no saturar  ya que podrias   cansarlo   rapidamente a la vista del usuario  , diseño web  profesional debe  estar  ordenado claro  simple no complicado  siempre  poner  en portada lo que  quieres  resaltar  y si  desean vender algo que no supere  los  4 pasos o  4 clicks  , eliminar los distractores  como anuncios  imagen cargada   en el proceso de compra   es  fatal  , podrias  esatr perdiendo  clientes…

Cada ves que aparecen nuevas webs el 90% no Tienen buen ROI y no son tan atractivos para el usuario debido a que no utilizan diseños profesinales como es el caso de las GRILLAS , es muy utilizado en los medios tradicionales como Periodicos revistas etc. ejemlpos de sitios web diseñados con grillas Yahoo AOl Elimap.

Grilla (grid): es un instrumento para ordenar elementos gráficos del texto y de las imágenes, algunas personas piensan que diseñar con grillas limita la creatividad cosa que no es cierto, es más bien porque la técnica de diseñar sitios web con grillas aún es desconocida por muchos diseñadores web ya que cada vez los diseñadores web solo tienen el objetivo de cobrar entregar un diseño sin previo estudio etc.

Aqui hay Algunos recursos para diseñar con grillas que les servira de Mucho.. Recursos Grillas

• Design by Grid hechos con CSS Aqui puedes encontrar galerias de ejemplos.
• Grid Calculator crea una retícula basada en un tamaño de la letra, el número de columnas, el ancho de la columna y el ancho de canal con el cual puedes Estructurar muchismo mejor tu sitio web.
• Grid Generator generador de cuadrículas para guiarnos a la hora de diseñar, esto lo puedes Utilizar con un editor de png para qeu tenga un entorno mas agradable.
• Phiculator una calculadora que puedes descargar apra utilizar desde tu Pc
• Grid s imagen genérica para guíarnos util para los diseños web, creada por Cameron Moll.
• GridFox Mozilla es un complemento que desde el navegador puedes ejecutarlo y utilizarlo