Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

EXTENSIONES TILES (3H)

EXTENSIONES TILES (3H)......................................................................................... 1 WEBDEVELOPER.......................................................................................................... 2 Qu es ..................................................................................................................... 2 Cmo instalarlo........................................................................................................ 2 Su uso ..................................................................................................................... 3 FIREBUG...................................................................................................................... 11 Qu es? .................................................................................................................. 11 Cmo instalarlo? ..................................................................................................... 11 Su uso ....................................................................................................................... 11 Inspeccionar y editar HTML ...................................................................................... 12 Para escribir y ejecutar comandos............................................................................ 15 Inspeccionar y editar CSS......................................................................................... 16 Inspeccionar y editar JavaScript ............................................................................... 16 Me paro ante un error............................................................................................ 18 Vigilar las expresiones........................................................................................... 19 Variable tooltip....................................................................................................... 19 Perfil de la ejecucin de JavaScript....................................................................... 20 Tala en funcin de las llamadas ............................................................................ 20 Ir a una lnea directamente.................................................................................... 20 Exploracin DOM ...................................................................................................... 20 NET: Monitorizando la red ........................................................................................ 21 Cach o no en cach............................................................................................. 22 Examinar las cabeceras HTTP ................................................................................. 22 XMLHttpRequest vigilancia ................................................................................... 22 EJERCICIOS: ............................................................................................................... 23 1.- Sobre CSS. ...................................................................................................... 23 2.- Sobre JavaScript y DOM.................................................................................. 23 ENLACES RELACIONADOS. ...................................................................................... 24

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

WEBDEVELOPER
Qu es
Web Developer Toolbar es un plugin de Firefox que nos aade una barra de utilidades para habilitar, desabilitar, editar, etc. los CSS, JavaScript, formularios, etc. que contenga la pgina que estamos visualizando.

Cmo instalarlo
Podemos buscarlo en la pgina oficial de plugins de Firefox (https://addons.mozilla.org/en-US/firefox/addon/60?id=60) o mejor an en la oficial del plugin: http://chrispederick.com/work/web-developer/

Elegimos Other languages y vamos a otra pgina muy parecida.

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Su uso
1 En Desactivar podremos desactivar JavaScript, Java, popup blocker, etc.

Ejemplo: En la pgina de ejemplo http://127.0.0.1/tema1/ejercicios/servervar.html podemos eliminar el color rojo del enlace Desactivando colores.

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Podemos desactivar el javascript y comprobar como ya no da ms la bienvenida. Podemos desactivar los referrers. Al pinchar sobre aqu se abrir una ventana de ASP que nos informa que desconoce desde donde venimos. NOTA: La situacin en que dejemos estos valores sern los que perduren en la navegacin, por lo que conviene desactivarlos una vez probados. Otra opcin es opciones >> reestrablecer pgina.

2 En Cookies podremos deshabilitar, visualizar, eliminar o modificar los valores de las cookies.

Ejemplo: En la pgina de ejemplo http://127.0.0.1/tema1/ejercicios/servervar.html podemos jugar con las cookies. En concreto vamos a ver informacin de las cookies. Vemos que hay 2. Podemos jugar con ellas editandolas y cambiando la informacin que contienen.

3 En CSS podremos deshabilitar las hojas de estilos, visualizar las correspondientes a otros tipos de medios (impresora, handheld, etc.), visualizar y editar las hojas de estilo, etc.

Ejemplo: Podemos intentar destripar cmo se http://127.0.0.1/tema1/ejercicios/urgencia.html.

ha

hecho

est

pgina

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Si desactivamos el CSS no veremos nada pues la pgina est hecha integramente en CSS. Si usamos el modelo de borde de caja y hacemos clic en una posicin de la tira podremos ver el CSS de ese punto formateado. Pero no nos deja experimentar cambiando los parmetros. Podemos editar el cdigo CSS y cambiar los parmetros. Por ejemplo podemos cambiar la primera lnea por #streak {width:485px; height:170px; background:url(streaky.gif); margin:3em auto;}

4 En Formularios podremos ver informacin detallada de los formularios de la pgina, habilitar campos o visualizar passwords, cambiar el mtodo de envo, hacer editables campos readonly, etc.

Ejemplo: Tenemos una pgina web (http://127.0.0.1/tema1/ejercicios/ajax.html) que consta de un formulario de asignacin de test a grupos. En el momento que damos a Enviar consulta se hara una grabacin haciendo una llamada Ajax a un ASP en la base de datos. Podemos jugar a ver los detalles del formulario. Observamos como los que estn con un estilo de visibility none no aparecen. OJO: Podemos modificar los valores de los campos ocultos. Podemos probar que hace rellenar los campos del formulario. Podemos borrar los botones radio, escribir en campos y eliminar la restriccin de caracteres.

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

5 Imgenes.

Ejemplo: Qu ocurre cuando desactivamos las imgenes de http://127.0.0.1/tema1/ejercicios/urgencia.html? Y si vemos las imgenes a tamao completo? Podemos observar que como esta imagen est en un CSS apenas nos ofrece informacin. Probemos con http://cv1.cpd.ua.es/album/segunda.asp?menu=162 a encontrar imgenes perdidas, ver las propiedades Alt y resaltar aquellas imgenes que nos las tiene la propiedad Alt.

6 Informacin. De aqu destacamos la opcin de Mostar la informacin de los elementos. Detacamos tambin la opcin que permite ver el cdigo JavaScript, pero no modificarlo. Veremos como modificarlo con la barra de Firebug.

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

7 Varios. A destacar las lneas gua y mostrar reglas. Son dos opciones fundamentales para diseo CSS. Cuando seleccionamos mostrar reglas pincha y arrastra y aparece una rejilla. Tambien podemos modificar el html y guardar el resultado. Ejemplo: Medicin de movimiento en http://127.0.0.1/tema1/ejercicios/css.html. Traducir con esta herramienta la frase central.

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

8 Resaltar (outline). Sirve para encontrar las cosas del cdigo.

Por ejemplo en http://127.0.0.1/tema1/ejercicios/css.html# podemos encontrar los div, los tables, etc. 9 Tamao. Para ver cmo quedan nuestros diseos en distintas resoluciones de pantalla.

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Ejemplo: Cmo queda http://127.0.0.1/tema1/ejercicios/css.html# con una resolucin de pantalla menor?

10 Herramientas. Con ellas podemos validar el CSS, el HTML, links, etc. Podemos configurarlo desde Editar Herramientas.

Ejemplo: Podemos pasarle los distintos validadores a: http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/css.html incluyendo el de Speed Report. Puedes probar con validar archivo local HMTL para probar un html de tu PC que no cuelga de un servidor: vemos como http://127.0.0.1/tema1/ejercicios/css.html es tentatively valid HTML 4.01 Transitional

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

11 Cdigo fuente. Desde Opciones >> Ver cdigo fuente podemos marcar Ver cdigo fuente en una pestaa nueva. De esta manera cuando pulsemos control + mayus + U habr una diferencia con el Control + U de Mozilla. Podemos ver el cdigo generado para ver las alteraciones que se hacen desde JavaScript en el DOM.

Con control + May + U podemos ver http://127.0.0.1/tema1/ejercicios/ajax.html que el cdigo que vemos es el original, aunque no es el realmente mostrado. En cocreto hay 10 checkbox y solo vemos 5. Pero podemos ver el cdigo generado desde Ver cdigo generado y observamos como algunos inputs tienen la propiedad CSS de display a none.

10

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

12 Opciones. Opciones persistentes para que las opciones que hemos marcado permanezcan en la navegacin. O podemos usar restablecer pgina para hacer desaparecer todas nuestras selecciones.

FIREBUG
Qu es?
Firebug es una extensin de Firefox que nos brinda un paquete de utilidades para el desarrollo de pginas y aplicaciones Web. Nos permite debugear, monitorizar y modificar el CSS, HTML y JavaScript en caliente, es decir, a medida que lo visualizamos. Como ejemplo casi siempre vamos a usar un fichero llamado ajax.html

Cmo instalarlo?
Podemos buscarlo en la pgina oficial de plugins de Firefox (https://addons.mozilla.org/en-US/firefox/browse/type:1) o mejor an en la oficial del plugin: http://www.getfirebug.com/

Su uso
Activamos el plugin presionando F12 o el icono nuevo que aparece en la barra de estado.

11

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Inspeccionar y editar HTML

Muestra el HTML en forma jerrquica (no como viene formateado en el HTML original). A medida que abrimos el rbol podemos ver todos los elementos. Es el HTML transformado por DOM

Si nos posicionamos sobre ellos, se indicar con un gris sobre la pgina web el elemento que corresponde y veremos sus atributos.

Adems podremos editar los atributos.

12

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Y podemos hacer el camino inverso: seleccionar un elemento de la pgina y con el botn derecho seleccionar InspectElement para ver el cdigo fuente correspondiente.

Para conseguir el mismo efecto tambin podemos usar la barra de herramientas superior:

Con Inspect: Con Edit: Con etiqueta:

Si seleccionamos en la pgina web veremos resaltado el cdigo HTML correspondiente. Editamos el cdigo HTML que tenemos seleccionado. Seleccionamos lo que incluye la etiqueta, cuanto ms a la derecha ms cdigo engloba.

En la parte derecha podemos cambiar los valores de CSS.

13

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Si seleccionamos un elemento (por ejemplo una capa) y seleccionamos la pestaa Layout (bajo la lupa) podremos ver, adems de las reglas:

a medida que nos desplazamos por las cajas concntricas podemos ver los valores de padding, border, margin, etc. junto a reglas que nos ayudan a visualizarlo en la pgina y la posibilidad de cambiar los valores.

Con la pestaa DOM podremos recorrer el Document Object Model de la pgina y visualizar sus valores. Si queremos cambiarlos deberemos recurrir al botn derecho del ratn.

14

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Para escribir y ejecutar comandos

Si seleccionamos Console podremos ver los errores y warnings de javascript segn tengamos configurado desde Options

Haciendo click sobre un error el programa nos lleva a la opcin de Script y seala la lnea causante del error. A la derecha nos permite escribir y ejecutar comandos:

En caso de usar AJAX, en este apartado veremos lo que carga (en AJAX.HTML al dar a guardar):

Pero tendremos que XMLHttpRequest:

comprobar

que

Options

tiene

seleccionado

Show

15

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Inspeccionar y editar CSS

Con la pestaa CSS visualizamos y editamos CSS.

Podemos desde cambiar los parmetros desde esta opcin, hasta desactivar ( pasando por aadir nuevas propiedades usando el botn derecho del ratn.

Tambin podemos editar el CSS de una forma ms cmoda usando el botn de arriba Edit.

Inspeccionar y editar JavaScript

Con la pestaa Script podemos visualizar los JS, ponerle breakpoints y ver las variables:

16

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Primero podremos elegir el js que queremos analizar:

En este caso hemos seleccionado el js embebido en la pgina html. Podemos elegir una lnea donde interrumpir el cdigo haciendo click sobre la misma:

Podemos ver en los breakpoints una relacin de los puntos que hemos puesto.

Si quitamos la marca del checkbox dormimos el breakpoint:

Podemos crear un breakpoint condicional usando el botn derecho del ratn sobre el nmero de interrupcin:

17

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Una vez que se ha parado podemos ejecutar el cdigo una lnea por vez, moviendo el triangulo con :

El primero continua la ejecucin. El segundo avanza lnea a lnea. El tercero retrocede lnea a lnea. El cuarto elimina el breakpoint.

Me paro ante un error

A veces el debugger te da la opcin de que crees un breakpoint automticamente cuando un error ocurre y que puedas as analizar detenidamente el error (de Ajax_error.html).

Firebug tambin te muestra donde se ha interrumpido y cmo se ha llegado a esa interrupcin. En el ejemplo se ha interrumpido la funcin seltodo que se ha lanzado desde un onclik.

18

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Vigilar las expresiones

Mientras estas depurando, Firebug te ofrece ver el valor de las expresiones o objetos que estn enterrados en el DOM. Estos valores se actualizarn cada vez que des un paso en el depurador.

Tambin se puede usar New watch expression para escribir una expresin javascript que ser ejecutada en ese momento. Y es aqu donde se puede usar la tecla Tab para autocompletar las propiedades de los objetos. Usar la tecla entrar para ejecutar las expresin. Podemos controlar que variables queremos ver desde opciones:

Variable tooltip

Mientras que el depurador est detenido, puede mover el ratn encima de cualquier variable para ver el valor de esa variable.

19

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Perfil de la ejecucin de JavaScript

Con Firebug, sabremos si nuestro cdigo es lento: usando el profile. 1.- Ir a la consola. 2.- Pulsar profile. 3.- Ejecutar cdigo JavaScript o recargar la pgina. 4.- Volver a pulsar sobre profile.

A continuacin veremos un informe detallado que muestra las funciones y cunto tiempo cada una de ellas ocupa.

Tala en funcin de las llamadas

A veces una funcin problemtica se llama muchas veces y no se puede parar el depurador cada vez. Slo queremos saber cundo se llama y qu parmetros se pasan.

Para ello haga clic derecho sobre la funcin la pestaa script y seleccione "Log calls to. Cuando ejecute el JavaSript saltar a la consola y ver el flujo de las llamadas a esa funcin.

Ir a una lnea directamente

Basta con escribir #N desde la pestaa script en la lupa de bsqueda rpida.

Exploracin DOM
Firebug te ayuda a encontrar objetos DOM rpidamente y luego editarlos en el momento.

20

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Hay dos tipos de objetos y funciones: las que forman parte del estndar DOM, y las que son de su propio cdigo JavaScript. Firebug conoce la diferencia, y le muestra los comandos y funciones de Javascript en negrita arriba de la lista. En cualquier caso desde opciones podemos elegir que queremos ver:

El DOM es un pequeo editor de lnea de comandos JavaScript, es decir, podemos escribir cualquier expresin de JavaScript. Cuando se pulsa enter se evalua y el resultado ser asignado a la variable . Haciendo click sobre una funcin de la columna derecha esta aparecer marcada automticamente en la pestaa script.

NET: Monitorizando la red

Con Net podemos ver todos los recursos que carga la pgina, en qu orden, cunto tarda y lo ms importante: seala en rojo aquellos que no pudo encontrar (esto quita muchos dolores de cabeza). Adems nos ofrece un pequeo preview de la imgen y/o datos del recurso. Con las pestaas a derecha de ALL podemos filtrar los tipos de peticiones y lo mejor: captura tambin las peticiones AJAX con lo que podemos ver tanto lo que se enva como lo que se recibe:

(Probando con css.html)

21

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

Cach o no en cach
No todas las peticiones de red son iguales: algunas se cargan desde la cach en lugar de la red. Firebug usa cdigos de color para saber que se carga desde la cach con un color gris mas claro. Para ver la diferencia: css.html tiene establecida la etiqueta
<META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache">

que impide que la carga sea desde la cache, siempre se har por red. Elimina esta etiqueta y observa la diferencia.

Examinar las cabeceras HTTP

Las cabeceras HTTP contiene informacin interesante, como el tipo de MIME del archivo, el tipo de servidor web, cach de las directivas, la cookie, y ms.

XMLHttpRequest vigilancia
El fenmeno que gira en torno a Ajax es una pequea cosa llamada XMLHttpRequest. Firebug muestra por cada XMLHttpRequest, tanto en la pestaa de Net como en la pestaa de la consola, el texto que public y el texto de la respuesta.

22

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

EJERCICIOS:
1.- Sobre CSS.
Pgina http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/ejercicios/capas.html Contesta estas preguntas: 1.- (Web Developer) En caso de desactivar el CSS el html se mostrar de forma lineal de manera que se pueda leer de una forma lgica? 2.- (Web Developer) Serias capaz a travs de la edicin de CSS arreglar el que la columna derecha salga debajo?. 3.- (Web Developer) Resalta los elementos de bloque, pero mostrando los nombres de los elementos de bloque a mostrar Cuntos DIV se han usado?. 4.- (Web Developer) Al redimensionar la pgina a una pantalla de 800x600 las capas se mueven de sitio? 5.- (Web Developer) Valida el CSS Cuntos elementos de enlace o instruccin de procesamiento de hoja de estilo xml hay no reconocidas? 6.- (Web Developer) Es una pgina HTML 4.01 Transitional vlida? por cuantos errores?

2.- Sobre JavaScript y DOM

Pginas: http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/ejercicios/carrusel_A.html http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/ejercicios/carrusel_B.tml 1.- (Firebug) Alguna de esas pginas usa AJAX? 2.- (Web Developer) Observa como los informes de view speed report son iguales para ambas pginas. 3.- (Firebug) Aunque se trata de pginas que aparentemente hacen lo mismo hay una diferencia. Una carga las imgenes segn le va haciedo falta mientras que la otra hace una carga total. Con ayuda de NET de Firebug podras decir cal es la que carga todas de golpe?. 4.- (Firebug) Calcula cual es ms rpida (hay que esperar a que se pare la rotacin de las imgenes). OJO para poder probar la velocidad primero hay que usar Web Developer para vaciar la cach. 5.- Cul dar mayor sensacin de velocidad de carga al usuario?. 6.- (Firebug) Usa la opcin DOM para contestar qu funciones se han usado en cada pgina?.

23

Curso AJAX Y DOM 2007

Marcos A. San Martn Calera Septiembre 2007

7.- (Firebug) Vacia la cach y mira las estadsticas de carga desde Consola >> Profile Cuntas veces se llama a opacidad? Encarga es la funcin que se carga nada ms arrancar esas pginas verifica tu respuesta a la pregunta 3?. 8.- (Firebug) Observa que cambia en la pgina cuando la recargas con la solapa HTML. Cambia alguna position de absolute a relative y observa la diferencia. 9.- (Firebug) En carrusel_A.html vamos a observar el comportamiento del jasvascript a travs de la ficha Script Qu vale imgs[indice] en la funcin cambiafoto() cuando indice vale 4? Averigua con un log to call a cambiafoto() para que se usa esta funcin. 10.- (Firebug) Compara la pgina HTML original con la que luego se dibuja en carrusel_A.html y en carrusel_B.html

ENLACES RELACIONADOS.
http://www.getfirebug.com/ http://www.sidar.org/recur/desdi/traduc/es/css/box.html http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=FireBug

24