WDE. Manual de usuario v1.0
Contents
1. Eusko Jaurlaritzaren Informatika Elkartea i Sociedad Informatica del Gobierno Vasco Web Developer Extension Manual de usuario Fecha 30 08 2007 Referencia EJIE S A Mediterraneo 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 prop sitos 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 utilizaci n estar limitada a lo expresamente autorizado en dicho contrato EJIE S A no podr ser considerada responsable de eventuales errores u omisiones en la edici n del documento Eusko Jaurlaritzaren Informatika Elkartea Sociedad Inform tica del Gobierno Vasco Control de documentaci n C digo Versi n 1 0 Fecha 30 08 2007 Resumen de cambios Primera versi n Responsable Ander Mart nez Aprobado por Ander Mart nez Firma Fecha Distribuci n Autor Consultor a de reas de conocimiento Nombre archivo WDE Manual de usuario v1 0 doc Localizacion WDE Manual de usuario 2 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco Cap tulo secci n P gina gt 3 1 Inicio y activa2. gina cumple los est ndares e Deshabilitar m ltiples aspectos como pueden ser javascript imagenes colores para probar la navegabilidad de la p gina en los casos m s desfavorables e Testear extensivamente los formularios tanto desde el punto de vista de interacci n cliente servidor como de seguridad e Comprobar que no contiene ningun enlace roto ya sean links o im genes de servidores externos e Simular que estamos visualizando la pagina desde un dispositivo m vil o ver cu l ser a su aspecto al imprimirla Por otra parte la barra de herramientas cuenta con utilidades enfocadas m s bien a examinar p ginas ajenas para observar su estructura y aprender de ellas Es el caso de toda la gama de opciones disponibles en los men s Information Outline y View Source gracias a los cuales podemos observar sobre la propia p gina renderizada cu les son los componentes que subyacen as como examinar el c digo fuente por separado de cada uno de los frames c modamente Por supuesto todas las utilidades listadas anteriormente tambi n resultan tiles para este objetivo 12 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco 5 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 seran los siguientes Mostrar informacion de los formularios Mostrar tamanos de l
3. en una nueva ventana la informaci n de la opci n del men que hayamos solicitado Miscellaneous Est compuesto por varias opciones diferentes 8 16 3 2 8 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco Miscellaneous Clear Private Data d Display Line Guides Display Ruler Show Comments Show Hidden Elements Show Window Chrome Edit HTML Linearize Page Make Frames Resizable Small Screen Rendering Visited Links d Clear Private Data elimina los datos privados de la cache de la sesi n del historial etc Display Line Guides y Display Ruler muestra las l neas gu a y nos permite crear nuestras reglas para nuevas l neas gu a 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 c digo 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 p gina Web en una ventana peque a Visited Links nos permite marcar todos los links como visitados o no visitados Outline Remarca las distintas opciones del documento A Outline Cutline Frames Cutline Headings Outline Table Cells Outline Tables Outline Block Level Elements Outline Deprecated Elements Outline Positioned Eleme
4. S nos muestra en una nueva ventana los errores que tienen nuestras hojas de estilo 10 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco respecto a los criterios generales del W3C http iqsaw w3 org css validator validator Validate Feed nos muestra en una nueva ventana los errores que tiene nuestra p gina respecto a las especificaciones RSS hitp validator w3 org feed Validate HTML nos muestra en una nueva ventana los errores que tiene nuestra p gina 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 p gina Web http validator w3 org checklink Validate Section 508 nos muestra en una nueva ventana los detalles de nuestra p gina que cumplen las especificaciones de esa secci n http www cynthiasays com fulloptions asp Validate WAI nos muestra en una ventana los detalles de nuestra p gina 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 validaci n anteriores DOM inspector abre la utilidad para inspeccionar el c digo fuente de la p gina 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 C
5. SS igual que Validate CSS Validate Local HTML igual que Validate HTML 3 2 11 View Source Muestra el codigo de la pagina Web TA View Source iP Options View Source Chrl Mayis 11 View Frame Source View Generated Source Edit View Source With Applications View Source y View Generated Source veremos el c digo fuente del documento HTML Edit View Source With Applications abrir una ventana para poder a adir la aplicaci n con la que se quiere visualizar el c digo fuente por ejemplo notepad ultraedit 3 2 12 Options Nos permite modificar las opciones de la barra y acceder a la ayuda Te T l Options Persist Styles Reset Page Options Help About 11 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco Reset Page nos muestra la p gina 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 informaci n de Web Developer 4 Utilidad Pr ctica Se trata de una barra de herramientas muy completa que puede ayudarnos a comprobar m ltiples en Mozilla Firefox aspectos que no debemos pasar por alto como e Validaci n de nuestro c digo HTML estilos CSS feeds RSS etc contra las especificaciones del W3C para asegurarnos que hacemos todo cuanto podemos para que nuestra p
6. al size of all your images is 4728 bytes which is less than 15K Ideally each image should be less than 1160 bytes to easily fit into one TCP IP packet MULTI SIZE Congratulations the total size of all your external multimedia files is O bytes which is less than 4K WDE Manual de usuario 15 16
7. as imagenes Mostrar detalles de los enlaces Mostrar datos de tiempo de acceso 5 1 Resoluci n 5 1 1 Mostrar informacion de los formularios Se seleccionar la opci n de menu Forms gt View Form Information para mostrar informaci n de los formularios incluidos en la p gina Se podr acceder a la informaci n de todos los elementos que componen cada formulario encontrado y se ofrecer en una nueva ventana Ka Form Information http fwww sygel com petstore jsp shop main jsp NAME METHOD ACTION T sE 3 o 3 Elements INDEX ID NAME TYPE VALUE LABEL SIZE MAXIMUM LENGTH STATE CE f COMPONENT com sygel petstore frontend wmee StoreControllerProduct oo f peme p SSS O e pe IO a AOS FS 5 1 2 Mostrar tama os de las im genes Se seleccionar la opci n de men Images gt Display Image File Sizes para mostrar el tama o de todas las im genes de la p gina 13 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco pea Beep roo File Size 46 bytes File Size 35 KB File Size 439 Fis h Saltwater Freshwater EIA Various Breeds File Size 000 putes REPENeS Py Lizards Turtles Snakes File Size aos bytes CES Various Breeds Exotic Varieties Exotic Varieties POWERED BY SYGEL File Size 2 KB 5 1 3 Mostrar detalles de los enlaces Se seleccionar la opci n de men Information gt Display Link Details pa
8. bilita o habilita los Popup Disable Referrers deshabilita o habilita las referencias 3 2 2 Cookies Permite trabajar con las cookies del navegador A Cookies Disable Cookies d Clear Session Cookies Delete Domain Cookies Delete Path Cookies View Cookie Information Add Cookie Disable Cookies deshabilita o habilita todas las Cookies o solo las Cookies externas a la pagina Clear Session Cookies limpia las Cookies de la sesi n actual Delete Domain Cookies elimina las Cookies del dominio Delete Path Cookies elimina las Cookies de la ruta View Cookie Information muestra informaci n de las Cookies Add Cookie permite crear una Cookie 5 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco 3 2 3 CSS Trabaja con las hojas de estilo del documento Th css Disable Styles Display C55 By Media Type d view C55 Ckrl Shift Z View Style Information Chrl ShiFk Add User Style Sheet Edit 255 Ctrl S5hiFt E Use Border Box Model Disable Styles deshabilita parcial o totalmente los estilos del documento Display CSS by Media Type nos permite visualizar la p gina tal como se imprimir a o tal como la ver amos en un dispositivo de pantalla reducida View CSS muestra el c digo de la hoja de estilos del documento en una nueva p gina View Style Information muestra el estilo que se est aplicando al elemento sobre el que posiciona
9. ci n desactivaci n Operativa b sica Disable Cookies CSS Forms Images Information CO CON OD O Ol A Miscellaneous Outline Resize Tools View Source Options Resoluci n Mostrar informaci n de los formularios Mostrar tama os de las im genes Mostrar detalles de los enlaces Mostrar datos de tiempo de acceso WDE Manual de usuario 3 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco 1 Introducci n El presente documento describe cu les son las tareas b sicas que se pueden ejecutar en la explotaci n de la herramienta Web Developer 2 Conceptos b sicos Web Developer es una extensi n para el navegador Mozilla Firefox que consta de una barra de herramientas que ha sido desarrollada para ayudar a examinar las p ginas Web de forma manual contemplando una gran variedad de aspectos de accesibilidad Entendemos por accesibilidad el acceso a la informaci n contenida en los sitios Web sin limitaci n alguna por raz n de deficiencia minusval a o tecnolog a utilizada sin que interfieran por ejemplo Problemas de o do visi n movilidad Dificultades de lectura o comprensi n cognitiva Imposibilidad de utilizaci n del teclado o el rat n Lector de s lo texto pantalla peque a o conexi n lenta La accesibilidad mejora el acceso a la Web en general no es de inter s nicamente para personas con discapacidad Las funcionalidades de esta her
10. im genes a sus dimensiones originales Make Image Invisible elimina las im genes del documento Replace Images With Alt Attribute reemplaza las im genes por su atributo alt 3 2 6 3 2 7 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco Information Muestra informaci n de la p gina Web actual a Information Display Access Keys Display Anchors Display Block Size Display Div Order Display Element Information Ctrl Shift F Display Id amp Class Details Display Link Details Display Object Information Display Stack Levels Display Tab Index Display Table Depth Display Table Information Display Title Attributes Display Topographic Information View Anchor Information View Color Information View Document Outline view Document Size View Javascript View Link Information View Meta Tag Information View Page Information View Response Headers Display Access Key Anchors Block Size Div Order Element Information Id amp 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 menu View Anchor Information Color Information Document Outline Document Size JavaScript Link Information Meta Tag Information Page Information y Response Headers muestra
11. mos el icono del rat n Add User Style Sheet a adimos 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 4 Forms Display Form Details Show Passwords Mew Form Information Convert Form Methods d Convert Select Elements To Text Inputs Enable Auto Completion Enable Form Fields Clear Radio Buttons Make Form Fields writable Populate Form Fields Remove Maximum Lengths Display Form Details resaltar los formularios haciendo visible el c digo html junto a cada elemento de los mismos Show Passwords cambiar los input HTML password por campos de texto normales las contrase as ser n visibles para cualquier persona que utilice el navegador con esta opci n 6 16 3 2 5 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco activa View Form Information mostrar informaci n de los formularios nombre y atributos en una nueva ventana Conver Form Methods convertir los m todos 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 est n habilitados Enable Form Fields habilitar los campos del formulario que no est n habilitados Clear Radios Buttons quitar la opci n marcada en los eleme
12. ntos 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 r pidamente si estamos haciendo pruebas Remove maximum lenghts elimina la longitud m xima de los campos de los formularios del documento Images Permite trabajar con las im genes del documento a Images Disable Images d Display Alt Attributes Display Image Dimensions Display Image File Sizes Display Image Paths Find Broken Images Cutline Images d view Image Information Hide Background Images Hide Images Make Images Full Size Make Images Invisible Replace Images With Alt Attributes Disable Images deshabilita las imagenes del documento Podemos elegir desactivar las im genes animadas las im genes externas o todas las im genes 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 tama o y ruta del fichero de la imagen Find Broken Images muestra los enlaces rotos View Image Information muestra en una nueva ventana informacion de las im genes Hide Background Images esconde las im genes de fondo del documento Hide Images esconde las imagenes del documento Make Image Full Size cambia las
13. nts d Outline External Links Cutline Links Without Title Attributes Outline Current Element Cutline Custom Elements Show Element Mames When Outlining 9 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco 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 p gina Web con cuadros de distintos colores seg n las opciones que marquemos en el men 3 2 9 Resize Redimensiona la p gina Web Ca Resizer Display Window Size Display Window Size In Title Resize Window a00 600 Zor d Display Windows Size muestra en un mensaje el tama o de la ventana Display Windows Size In Title muestra en el t tulo el tama o de la ventana Resize Windows nos permite redimensionar la p gina introduciendo los valores deseados Zoom aumenta o disminuye el tama o de la p gina 3 2 10 Tools Muestra las utilidades y servicio Web que contiene esta barra gt Tools 3 View Source Ee Options Validate 255 Validate Feed Validate HTML Ctrl Mayis H Validate Links Validate Section 508 Validate 44 Edit Tools DOM Inspector Error Console Ctrl Mayvis Java Console Chrl hayus 0 Display Page Validation Validate Local C55 Validate Local HTML Ctrl Mayis 4 Validate CS
14. ownload T1 seconds HTML pee 1 a4 0 25 HTML Images 4728 4728 B 2 24 2 03 ese Images 0 boo AAA Total Images 4728 2 94 2 03 Javascript 0 0 00 0 00 OSS D 0 00 0 00 Multimedia 0 0 00 0 00 other 0 0 00 0 00 Analysis and Recommendations TE Congratulations the total number of HTML files on this page including the main HTML file is 1 which most browsers can multithread Minimizing HTTP requests is key for web site optimization SOS Warning The total number of objects on this page is 11 consider reducing this to a more reasonable number Combine refine and optimize your external objects Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests Caution You have a moderate amount of images on this page 10 Consider using fewer images on the site or try reusing the same image in multiple ages to take advantage of caching Congratulations the total size of this page is 13477 bytes This page should load in less than eight seconds on a 56Kbps connection or 4 89 seconds But there s always room for improvement Miss Congratulations the total size of this HTML file is 8749 bytes which less than 20K Assuming that you specify the HEIGHT and WIDTH of your images this size allows your page to display content in well under 8 seconds the average time users are willing to wait for a page to display without feedback IMAGES SIZE Congratulations the tot
15. ra mostrar la informaci n relativa al destino de cada enlace de la p gina Href ipetstoresispishopimain jsp VIT demo zi Href p etstore wmeeaction do COMPONENT com sygel petsto e frontend wmee StoreControllerC ateqor amp ACTION showl atego agon Fish Saltwater Freshwater Various Breeds Exotic Varieties Href petstoreAwmeeaction do 7COMPONENT com sygel petstore frontend wmee StoreC ontrollerC ate gon amp AC TION sh owl ate gor amp F ORWARD isp shop categony jsp amp C atego Id BIRDS Birds Exotic Varieties 5 1 4 Mostrar datos de tiempo de acceso Se seleccionar la opci n de men Tools gt View Speed Report para mostrar datos de tiempo de acceso a WDE Manual de usuario 14 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco nuestro documento actual reflejando el peso de dicho documento Se presentar un completo informe en una nueva p gina mostrando informaci n relativa a tiempos de descarga de la p gina y por cada tipo de objeto adem s de mostrar recomendaciones de uso para la optimizaci n de la misma Web Page Speed Report URL http www sygel comypetstore jspshop main jsp Title Welcome to Java Pet Store Demo Date Report run on Fri Sep 21 02 02 0 CDT200 Diagnosis Global Statistics Se LLN Total HTTP Requests 11 Total Size 113477 bytes Object Size Totals Object type Size bytes Download 56K seconds D
16. ramienta son Informacion de los elementos Corregir HTML Ver el tama o del documento Visualizar las reglas Simular experiencias del usuario Para obtener informaci n adicional sobre el producto acceder a su sitio web http chrispederick com work webdeveloper Nota La barra de herramientas no contiene ning n Adware ni Spyware 3 Funciones elementales 3 1 Inicio y activaci n desactivaci n La barra de herramientas se inicia cuando arrancamos el navegador Mozilla Firefox Podemos activar o desactivar la barra de herramientas desde el menu Ver gt Barra de herramientas gt Web Developer Toolbar 3 2 Operativa b sica 4 16 Eusko Jaurlaritzaren Informatika Elkartea e Sociedad Inform tica del Gobierno Vasco 3 2 1 Disable Habilita o deshabilita diferentes opciones del navegador e Disabler Disable Cache Disable Java Disable JavaScript Disable Meta Redirects Disable Minimum Font Size Disable Page Colors Disable Popup Blocker Disable Referrers 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 tama o m nimo de fuente Disable Page Colors deshabilita o habilita el color de la p gina Disable Popup Blocker desha
Download Pdf Manuals
Related Search