Web Developer Extension

Manual de usuario

Fecha: 30/08/2007

Referencia:

EJIE S.A. Mediterrneo, 3 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080 Vitoria-Gasteiz www.ejie.es

Este documento es propiedad de EJIE, S.A. y su contenido es confidencial. Este documento no puede ser reproducido, en su totalidad o parcialmente, ni mostrado a otros, ni utilizado para otros propsitos que los que han originado su entrega, sin el previo permiso escrito de EJIE, S.A.. En el caso de ser entregado en virtud de un contrato, su utilizacin estar limitada a lo expresamente autorizado en dicho contrato. EJIE, S.A. no podr ser considerada responsable de eventuales errores u omisiones en la edicin del documento.

Control de documentacin
Ttulo de documento: Web Developer Extension

Histrico de versiones
Cdigo: Versin: Fecha: 1.0 30/08/2007

Resumen de cambios:

Cambios producidos desde la ltima versin

Primera versin.

Control de difusin
Responsable: Ander Martnez Aprobado por: Ander Martnez Firma: Distribucin: Fecha:

Referencias de archivo
Autor: Consultora de reas de conocimiento Nombre archivo: Localizacin: WDE. Manual de usuario v1.0.doc

WDE. Manual de usuario

2/16

Contenido
Captulo/seccin Pgina

1 2 3 3.1 3.2

Introduccin Conceptos bsicos Funciones elementales Inicio, y activacin/desactivacin Operativa bsica

4 4 4 4 4 5 5 6 6 7 8 8 9 10 10 11 11 12 13 13 13 13 14 14

3.2.1. Disable 3.2.2. Cookies 3.2.3. CSS 3.2.4. Forms 3.2.5. Images 3.2.6. Information 3.2.7. Miscellaneous 3.2.8. Outline 3.2.9. Resize 3.2.10. Tools 3.2.11. View Source 3.2.12. Options 4 5 5.1 Utilidad Prctica Anexo 1: Ejemplo Resolucin

5.1.1. Mostrar informacin de los formularios 5.1.2. Mostrar tamaos de las imgenes 5.1.3. Mostrar detalles de los enlaces 5.1.4. Mostrar datos de tiempo de acceso

WDE. Manual de usuario

3/16

Introduccin

El presente documento describe cules son las tareas bsicas que se pueden ejecutar en la explotacin de la herramienta Web Developer.

Conceptos bsicos

Web Developer es una extensin para el navegador Mozilla Firefox, que consta de una barra de herramientas que ha sido desarrollada para ayudar a examinar las pginas Web de forma manual contemplando una gran variedad de aspectos de accesibilidad. Entendemos por accesibilidad el acceso a la informacin contenida en los sitios Web sin limitacin alguna por razn de deficiencia, minusvala o tecnologa utilizada sin que interfieran, por ejemplo: Problemas de odo, visin, movilidad. Dificultades de lectura o comprensin cognitiva. Imposibilidad de utilizacin del teclado o el ratn. Lector de slo texto, pantalla pequea o conexin lenta. La accesibilidad mejora el acceso a la Web en general, no es de inters nicamente para personas con discapacidad. Las funcionalidades de esta herramienta son: Informacin de los elementos. Corregir HTML. Ver el tamao del documento. Visualizar las reglas. Simular experiencias del usuario. Para obtener informacin adicional sobre el producto acceder a su sitio web: http://chrispederick.com/work/webdeveloper/ Nota: La barra de herramientas no contiene ningn Adware ni Spyware.

3
3.1

Funciones elementales
Inicio, y activacin/desactivacin

La barra de herramientas se inicia cuando arrancamos el navegador Mozilla Firefox. Podemos activar o desactivar la barra de herramientas desde el men Ver Barra de herramientas Web Developer Toolbar. 3.2 Operativa bsica

WDE. Manual de usuario

4/16

3.2.1.

Disable Habilita o deshabilita diferentes opciones del navegador.

Disable Cache deshabilita o habilita el uso de memoria cache. Disable Java y Disable JavaScript deshabilita o habilita el uso del lenguaje Java y JavaScript, respectivamente. Disable Meta Redirects deshabilita o habilita las redirecciones. Disable Minimun Font Size deshabilita o habilita el uso de un tamao mnimo de fuente. Disable Page Colors deshabilita o habilita el color de la pgina. Disable Popup Blocker deshabilita o habilita los Popup. Disable Referrers deshabilita o habilita las referencias. 3.2.2. Cookies Permite trabajar con las cookies del navegador.

Disable Cookies deshabilita o habilita todas las Cookies o solo las Cookies externas a la pgina. Clear Session Cookies limpia las Cookies de la sesin actual. Delete Domain Cookies elimina las Cookies del dominio. Delete Path Cookies elimina las Cookies de la ruta. View Cookie Information muestra informacin de las Cookies. Add Cookie permite crear una Cookie.

WDE. Manual de usuario

5/16

3.2.3.

CSS Trabaja con las hojas de estilo del documento.

Disable Styles deshabilita parcial o totalmente los estilos del documento. Display CSS by Media Type nos permite visualizar la pgina tal como se imprimira, o tal como la veramos en un dispositivo de pantalla reducida. View CSS muestra el cdigo de la hoja de estilos del documento en una nueva pgina, View Style Information muestra el estilo que se est aplicando al elemento sobre el que posicionamos el icono del ratn. Add User Style Sheet aadimos una hoja de estilos creada por el usuario. Edit CSS editamos la hoja de estilos del documento. 3.2.4. Forms Muestra los detalles de los formularios.

Display Form Details resaltar los formularios haciendo visible el cdigo html junto a cada elemento de los mismos. Show Passwords cambiar los input HTML password por campos de texto normales (las contraseas sern visibles para cualquier persona que utilice el navegador con esta opcin

WDE. Manual de usuario

6/16

activa). View Form Information mostrar informacin de los formularios (nombre y atributos) en una nueva ventana. Conver Form Methods convertir los mtodos Post a Get y los Get a Post. Convert Select Elements To Text Inputs convertir el elemento seleccionado a una entrada de texto. Enable Auto Completion habilitar el autocompletar en los elementos del formulario que no estn habilitados. Enable Form Fields habilitar los campos del formulario que no estn habilitados. Clear Radios Buttons quitar la opcin marcada en los elementos de tipo Radio Button. Make Forms Fields Writable hacer posible que se escriban en algunos campos del formulario. Populate Form Fields rellena el formulario con los valores por defecto, o con el name del elemento. til para rellenar un formulario rpidamente si estamos haciendo pruebas. Remove maximum lenghts elimina la longitud mxima de los campos de los formularios del documento. 3.2.5. Images Permite trabajar con las imgenes del documento.

Disable Images deshabilita las imgenes del documento. Podemos elegir desactivar las imgenes animadas, las imgenes externas o todas las imgenes. Display Alt Attributes, Display Image Dimensions, Display Image File Sizes y Display Image Paths son opciones parecidas que muestran en color amarillo el atributo alt, dimensiones de la imagen, tamao y ruta del fichero de la imagen. Find Broken Images muestra los enlaces rotos. View Image Information muestra en una nueva ventana informacin de las imgenes. Hide Background Images esconde las imgenes de fondo del documento. Hide Images esconde las imgenes del documento. Make Image Full Size cambia las imgenes a sus dimensiones originales. Make Image Invisible elimina las imgenes del documento. Replace Images With Alt Attribute reemplaza las imgenes por su atributo alt.

WDE. Manual de usuario

7/16

3.2.6.

Information Muestra informacin de la pgina Web actual.

Display Access Key, Anchors, Block Size, Div Order, Element Information, Id & Class Details, Link Details, Object Information, Stack Level, Tab Index, Table Depth, Table Information, Display title Attributes y Display Topographic Information resalta en color amarillo cada uno de los elementos que hemos elegido en las opciones del men. View Anchor Information, Color Information, Document Outline, Document Size, JavaScript, Link Information, Meta Tag Information, Page Information y Response Headers muestra en una nueva ventana la informacin de la opcin del men que hayamos solicitado. 3.2.7. Miscellaneous Est compuesto por varias opciones diferentes.

WDE. Manual de usuario

8/16

Clear Private Data elimina los datos privados de la cache, de la sesin, del historial, etc. Display Line Guides y Display Ruler muestra las lneas gua y nos permite crear nuestras reglas para nuevas lneas gua. Show Comments y Show Hidden Elements resalta en color amarillo los comentarios y los elementos ocultos del documento actual. Edit HTML nos permite ver el cdigo HTML, modificarlo y visualizarlo. Linearize Page muestra de forma diferente el documento actual. Make Frames Resizable convierte las ventanas en redimesionables si se permite. Small Screen Rendering muestra la pgina Web en una ventana pequea. Visited Links nos permite marcar todos los links como visitados o no visitados. 3.2.8. Outline Remarca las distintas opciones del documento.

WDE. Manual de usuario

9/16

Outline Frames, Headings, Table Cells, Tables, Block Level Elements, Deprecated Elements, Postitioned Elements, External Links, Links Without Title Attributes, Current Element, Custom Elements y Show Element Names When Outlining remarca en la pgina Web con cuadros de distintos colores segn las opciones que marquemos en el men. 3.2.9. Resize Redimensiona la pgina Web.

Display Windows Size muestra en un mensaje el tamao de la ventana. Display Windows Size In Title muestra en el ttulo el tamao de la ventana. Resize Windows nos permite redimensionar la pgina introduciendo los valores deseados. Zoom aumenta o disminuye el tamao de la pgina. 3.2.10. Tools Muestra las utilidades y servicio Web que contiene esta barra.

Validate CSS nos muestra en una nueva ventana los errores que tienen nuestras hojas de estilo

WDE. Manual de usuario

10/16

respecto a los criterios generales del W3C (http://jigsaw.w3.org/css-validator/validator). Validate Feed nos muestra en una nueva ventana los errores que tiene nuestra pgina respecto a las especificaciones RSS (http://validator.w3.org/feed). Validate HTML nos muestra en una nueva ventana los errores que tiene nuestra pgina respecto a las especificaciones XHTML (http://validator.w3.org/check ). Validate Links nos muestra en una nueva ventana los enlaces que no funcionan en nuestra pgina Web (http://validator.w3.org/checklink). Validate Section 508 nos muestra en una nueva ventana los detalles de nuestra pgina que cumplen las especificaciones de esa seccin (http://www.cynthiasays.com/fulloptions.asp). Validate WAI nos muestra en una ventana los detalles de nuestra pgina que no cumplen las especificaciones de accesibilidad WCAG (http://www.cynthiasays.com/fulloptions.asp). Edit Tools muestra una pantalla con opciones para modificar las utilidades de validacin anteriores. DOM inspector abre la utilidad para inspeccionar el cdigo fuente de la pgina (requiere que la herramienta DOM Inspector est instalada). Java Console muestra la consola de Java. JavaScript Console muestra los errores de JavaScript en su consola. Validate Local CSS igual que Validate CSS. Validate Local HTML igual que Validate HTML. 3.2.11. View Source Muestra el cdigo de la pgina Web.

View Source y View Generated Source veremos el cdigo fuente del documento HTML. Edit View Source With Applications abrir una ventana para poder aadir la aplicacin con la que se quiere visualizar el cdigo fuente (por ejemplo: notepad, ultraedit). 3.2.12. Options Nos permite modificar las opciones de la barra y acceder a la ayuda.

WDE. Manual de usuario

11/16

Reset Page nos muestra la pgina inicial sin los cambios realizados con la barra de herramientas. Options... nos muestra las opciones de la barra de herramientas. Help nos muestra la ayuda de la barra de herramientas. About nos muestra informacin de Web Developer.

Utilidad Prctica

Se trata de una barra de herramientas muy completa que puede ayudarnos a comprobar mltiples en Mozilla Firefox aspectos que no debemos pasar por alto como: Validacin de nuestro cdigo HTML, estilos CSS, feeds RSS, etc contra las especificaciones del W3C para asegurarnos que hacemos todo cuanto podemos para que nuestra pgina cumple los estndares. Deshabilitar mltiples aspectos como pueden ser javascript, imgenes, colores para probar la navegabilidad de la pgina en los casos ms desfavorables. Testear extensivamente los formularios, tanto desde el punto de vista de interaccin clienteservidor como de seguridad. Comprobar que no contiene ningn enlace roto, ya sean links o imgenes de servidores externos. Simular que estamos visualizando la pgina desde un dispositivo mvil o ver cul sera su aspecto al imprimirla.

Por otra parte la barra de herramientas cuenta con utilidades enfocadas ms bien a examinar pginas ajenas, para observar su estructura y aprender de ellas. Es el caso de toda la gama de opciones disponibles en los mens Information, Outline y View Source, gracias a los cuales podemos observar sobre la propia pgina renderizada cules son los componentes que subyacen, as como examinar el cdigo fuente por separado de cada uno de los frames cmodamente. Por supuesto todas las utilidades listadas anteriormente tambin resultan tiles para este objetivo.

WDE. Manual de usuario

12/16

Anexo 1: Ejemplo

Se toma como referencia a la hora de realizar los ejemplos el sitio Web Java PetStore cuya URL es http://www.sygel.com/petstore/jsp/shop/main.jsp. Los ejemplos sern los siguientes: 5.1 Mostrar informacin de los formularios. Mostrar tamaos de las imgenes. Mostrar detalles de los enlaces. Mostrar datos de tiempo de acceso.

Resolucin

5.1.1.

Mostrar informacin de los formularios

Se seleccionar la opcin de men Forms > View Form Information para mostrar informacin de los formularios incluidos en la pgina. Se podr acceder a la informacin de todos los elementos que componen cada formulario encontrado y se ofrecer en una nueva ventana.

5.1.2.

Mostrar tamaos de las imgenes

Se seleccionar la opcin de men Images > Display Image File Sizes para mostrar el tamao de todas las imgenes de la pgina.

WDE. Manual de usuario

13/16

5.1.3.

Mostrar detalles de los enlaces

Se seleccionar la opcin de men Information > Display Link Details para mostrar la informacin relativa al destino de cada enlace de la pgina.

5.1.4.

Mostrar datos de tiempo de acceso Se seleccionar la opcin de men Tools > View Speed Report para mostrar datos de tiempo de acceso a

WDE. Manual de usuario

14/16

nuestro documento actual (reflejando el peso de dicho documento). Se presentar un completo informe en una nueva pgina mostrando informacin relativa a tiempos de descarga de la pgina y por cada tipo de objeto adems de mostrar recomendaciones de uso para la optimizacin de la misma.

WDE. Manual de usuario

15/16