Este documento proporciona una introducción a JavaScript y el depurador Firebug. Explica conceptos clave como qué es JavaScript, el DOM y los intérpretes. Luego describe las funcionalidades de Firebug como inspeccionar el DOM, depurar código JavaScript y modificar dinámicamente la página web. Finalmente, ofrece ejemplos prácticos de cómo usar Firebug para depurar una página web real.
Aprendiendo php my sql, javascript, css, html5 capitulo 3 (introduccion a php luigiacarigua
CAPITULO 3 TOTALMENTE TRADUCIDO DEL MARAVILLO LIBRO A APRENDIENDO PHP, MYSQL, CSS, HTML 5 UN EXCELENTE CAPITULO DONDE PODEMOS ADQUIRI UN SOLIDO CONOCIMIENTO SOBRE UNA DE LAS PARTES MAS INTERESANTE SOBRE APRENDER O ADQUIRIR LAS DESTREZAS DE PROGRAMACION COMO SON EL CONOCIMIENTO DE LAS VARIABLES TIPOS, OPERADORES FUNCIONES ENTRE OTRAS DE GUARDAR VALORES EN MEMORIA
Aprendiendo php my sql, javascript, css, html5 capitulo 2luigiacarigua
Hoy luego de haber realizado la traduccion del capitulo2 del Maravilloso Libro Aprendiendo PHP, MySQL, JavaScript, CSS, HTML5 en perfecto español pogo a disposicion de todos los usuarios esta maravillosa y fabolosa pieza de programacion un invaluable aporte para aquellos que tienen ciertas dificultades con el idioma ingles
● Introducción.
● Distribución de midlets.
– OTA.
– Flujo de eventos.
● Herramientas.
● Servidor de páginas: XAMPP.
– Instalación.
– Configuración.
● Creación del sitio web.
● Despliegue del midlet.
● Instalación de la aplicación.
● Distribución a través de Internet.
● Enlaces de interés.
Aprendiendo php my sql, javascript, css, html5 capitulo 3 (introduccion a php luigiacarigua
CAPITULO 3 TOTALMENTE TRADUCIDO DEL MARAVILLO LIBRO A APRENDIENDO PHP, MYSQL, CSS, HTML 5 UN EXCELENTE CAPITULO DONDE PODEMOS ADQUIRI UN SOLIDO CONOCIMIENTO SOBRE UNA DE LAS PARTES MAS INTERESANTE SOBRE APRENDER O ADQUIRIR LAS DESTREZAS DE PROGRAMACION COMO SON EL CONOCIMIENTO DE LAS VARIABLES TIPOS, OPERADORES FUNCIONES ENTRE OTRAS DE GUARDAR VALORES EN MEMORIA
Aprendiendo php my sql, javascript, css, html5 capitulo 2luigiacarigua
Hoy luego de haber realizado la traduccion del capitulo2 del Maravilloso Libro Aprendiendo PHP, MySQL, JavaScript, CSS, HTML5 en perfecto español pogo a disposicion de todos los usuarios esta maravillosa y fabolosa pieza de programacion un invaluable aporte para aquellos que tienen ciertas dificultades con el idioma ingles
● Introducción.
● Distribución de midlets.
– OTA.
– Flujo de eventos.
● Herramientas.
● Servidor de páginas: XAMPP.
– Instalación.
– Configuración.
● Creación del sitio web.
● Despliegue del midlet.
● Instalación de la aplicación.
● Distribución a través de Internet.
● Enlaces de interés.
Documento Formativo de Symfony2 en el que explica desde qué es Symfony hasta los primeros pasos básicos: instalación, configuración, entidades, Twig, YAML...
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
CRUD básico con Symfony. Esta presentación es una continuación de lo contado en la II Symfony Zaragoza. Explica un ejemplo sencillo de un CRUD para mostrar como realizar modelos, controladores, vistas, formularios, etc.
Las buenas prácticas oficiales para aplicaciones Symfonysymfony_bcn
La primera versión del framework Symfony2 se publicó hace más de tres años. Durante este tiempo, la comunidad de programadores Symfony ha originado una serie de buenas prácticas oficiosas que han sido adoptadas por la mayoría de aplicaciones.
Lamentablemente muchas de estas prácticas tienen poco que ver con la visión original de los creadores de Symfony y complican en exceso el desarrollo de las aplicaciones.
En esta sesión se presentarán muchas de las buenas prácticas oficiales recomendadas por Fabien Potencier, creador de Symfony. Sorpréndete con una visión totalmente renovada y pragmática del desarrollo de aplicaciones Symfony profesionales.
WARE: a tool for the Reverse Engineering of Web Applications Porfirio Tramontana
The development of Web sites and applications is increasing dramatically to satisfy the market requests. The software industry is facing the new demand under the pressure of a very short time-to-market and an extremely high competition. As a result, Web sites and applications are usually developed without a disciplined process: Web applications are directly coded and no, or poor, documentation is produced to support the subsequent
maintenance and evolution activities, thus compromising the quality of the applications.
This paper presents a tool for reverse engineering Web applications. UML diagrams are used to model a set of views that depict several aspects of a Web application at different abstraction levels. The recovered diagrams ease the comprehension of the application and support its maintenance and evolution. A case study, carried out with the aim of assessing the effectiveness of the proposed tool, allowed relevant information about some real Web applications to be successfully recovered and modeled by UML diagrams.
Es un lenguaje de programación de código abierto cuyo objetivo principal no es reemplazar a Javascript como lenguaje de programación para la web, sino ofrecer una alternativa más moderna.
Demo en GitHub -> https://github.com/Wilo/HeartOnDart
Resumen de la sección “3.2.7 WAI-ARIA” del estándar HTML5, sobre elementos de accesibilidad para para aplicaciones web cliente.
Video de la presentacion disponible en:
https://youtu.be/YP1KJPgLoRI
Documento Formativo de Symfony2 en el que explica desde qué es Symfony hasta los primeros pasos básicos: instalación, configuración, entidades, Twig, YAML...
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
CRUD básico con Symfony. Esta presentación es una continuación de lo contado en la II Symfony Zaragoza. Explica un ejemplo sencillo de un CRUD para mostrar como realizar modelos, controladores, vistas, formularios, etc.
Las buenas prácticas oficiales para aplicaciones Symfonysymfony_bcn
La primera versión del framework Symfony2 se publicó hace más de tres años. Durante este tiempo, la comunidad de programadores Symfony ha originado una serie de buenas prácticas oficiosas que han sido adoptadas por la mayoría de aplicaciones.
Lamentablemente muchas de estas prácticas tienen poco que ver con la visión original de los creadores de Symfony y complican en exceso el desarrollo de las aplicaciones.
En esta sesión se presentarán muchas de las buenas prácticas oficiales recomendadas por Fabien Potencier, creador de Symfony. Sorpréndete con una visión totalmente renovada y pragmática del desarrollo de aplicaciones Symfony profesionales.
WARE: a tool for the Reverse Engineering of Web Applications Porfirio Tramontana
The development of Web sites and applications is increasing dramatically to satisfy the market requests. The software industry is facing the new demand under the pressure of a very short time-to-market and an extremely high competition. As a result, Web sites and applications are usually developed without a disciplined process: Web applications are directly coded and no, or poor, documentation is produced to support the subsequent
maintenance and evolution activities, thus compromising the quality of the applications.
This paper presents a tool for reverse engineering Web applications. UML diagrams are used to model a set of views that depict several aspects of a Web application at different abstraction levels. The recovered diagrams ease the comprehension of the application and support its maintenance and evolution. A case study, carried out with the aim of assessing the effectiveness of the proposed tool, allowed relevant information about some real Web applications to be successfully recovered and modeled by UML diagrams.
Es un lenguaje de programación de código abierto cuyo objetivo principal no es reemplazar a Javascript como lenguaje de programación para la web, sino ofrecer una alternativa más moderna.
Demo en GitHub -> https://github.com/Wilo/HeartOnDart
Resumen de la sección “3.2.7 WAI-ARIA” del estándar HTML5, sobre elementos de accesibilidad para para aplicaciones web cliente.
Video de la presentacion disponible en:
https://youtu.be/YP1KJPgLoRI
Charla para el evento Sevilla Mobility Day.
Desde hace pocos años, desarrollar sitios y aplicaciones web aplicando diseños responsive ha dejado de ser opcional.
Para dispositivos móviles, empieza a ser necesario ir más allá y crear experiencias de usuario dedicadas a estos entornos.
Nuestro compañero @willirocker nos platicó sobre "Uso de html5 + webcomponents" durante el primer #AvanetTechIO, celebrado en la Universidad de Guayaquil.
Mejora tus US con UX y modelos de satisfaccióndnmoncada
Este es el slide de la conferencia que compartí en agiles2014 el viernes 24 de octubre de 2014 en la ciudad de Medellín(Colombia)
Es una presentación de una unión de practicas UX para la mejora de las historias de usuario en Scrum
Casper JS - Asegurando la calidad en front-end DrupalDavid Gil Sánchez
En esta sesión presentaremos como estamos utilizando CasperJS (http://casperjs.org/) para asegurar la calidad de algunos de nuestros desarrollos y evitar los tan temidos (y comunes) bugs de regresión.
Mostraremos el uso básico de CasperJS y veremos un caso real en el que estamos testando la lógica principal de un portal con procesos complejos que involucran submits de formularios multipaso, testeo con multiples roles, etc...
PAUTAS W3C DE ACCESIBILIDAD PARA HERRAMIENTAS DE EDICIÓN WEB (ATAG 2.0)Jose R. Hilera
Resumen de ATAG 2.0 (Authoring Tool Accessibility Guidelines).
Son pautas del W3C sobre los requisitos de accesibilidad que deben cumplir las herramientas para la edición de contenido web.
Video de la presentacion disponible en:
https://youtu.be/05YRbtAgWB4
Desarrollo de aplicaciones web 3.0 (linked data + bpm + cloud) Software Guru
En esta sesión veremos como se puede utilizar la herramienta open source SemanticWebBuilder para acelerar el desarrollo e implementación de aplicaciones web 3.0, con las que puedes realizar tareas como construcción de portales web semánticos, así como diseño e implementación de procesos de negocio y todo esto en ambientes tradicionales o distribuidos.
Aplicaciones y juegos para móbiles 2011: iOS, Android, Bada, PalmJuan Belón Pérez
These are some of my personal and enterprise projects for the mobile platform for this year 2011.
--
Estos son los proyectos para la plataforma móbil que he hecho este año 2011.
2 juegos en desarrollo.
Una aplicación para grandes empresas.
Una aplicación como proyecto personal para usuarios de todo el mundo.
Yahoo! pipes + Wordpress plugin - RSS POWER to your blogJuan Belón Pérez
Cómo construir un plugin para Wordpress que permita obtener contenido (fetching) de todos los sitios que queramos utilizando Yahoo! Pipes, pre y post-procesado :)
http://programadorphp.org
La siguiente presentación de la mano de Pablo García Sánchez nos da las nociones básicas de ESB y JBI, para la integración empresarial de aplicaciones compuestas que generan un flujo de trabajo dinámico, además de dar algunas ventajas, vocabulario, y ejemplos de BPEL.
PHP, una introducción a modo de presentación como tutorial básico llegando hasta clases y pasando por la conexión con una oferta de servicios web mediante protocolo SOAP con WSDL.
http://programadorphp.org
--
Se trata de un tutorial para construir servicios web con Java en NetBeans sobre un servidor como Glassfish utilizando un Modelo de Datos complejo con operaciones implementadas para usar el protocolo SOAP con ficheros XML : WSDL.
http://programadorphp.org
En esta presentación que hice para la Asociación de Webmasters de Granada y como parte de un trabajo para Redes de Computadores en la ETSIIT he explicado qué es un servidor, concretamente un servidor web, la evolución de este tipo de software hasta hoy en día desde que apareció, además de abordar otros temas relacionados: qué software usar para reconocer un webserver: apache, iis, cherokee, django, lighttpd, zeus, google web server, etc. Además de un pequeño análisis del gestor de difusión de contenidos de tuenti utilizado para compensar la carga del sistema a través de la división entre varios servidores con su caché, etc.
Gracias a http://programadorphp.org/
Ensayo dirigido a investigar los beneficios de la meditación en el trabajo, práctica en la que se basa el framework zenphp.es
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Telefónica
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0xWord escrito por Ibón Reinoso ( https://mypublicinbox.com/IBhone ) con Prólogo de Chema Alonso ( https://mypublicinbox.com/ChemaAlonso ). Puedes comprarlo aquí: https://0xword.com/es/libros/233-big-data-tecnologias-para-arquitecturas-data-centric.html
3. CONCEPTOS
¿Qué es JavaScript?
es un lenguaje interpretado, es decir, que no requiere
compilación, se usa fundamentalmente en páginas web,tiene
una sintaxis parecida al lenguaje Java y C.
No es un lenguaje orientado a objetos como tal ya que no
dispone de herencia (mecanismo para que una clase derive
hacia otra compartiendo y extendiendo su funcionalidad),sino
que se basa en prototipos, donde no existen “clases”,la
reutilización de las funciones se hace a través de la clonación
de los objetos existentes, que sirve de prototipos , sobre los
que se extienden sus funcionalidades. También se le llama
programación basada en instancias ( ver lenguaje Self).
Es una implementación del DOM.
4. CONCEPTOS
¿Qué es el DOM?
DOM viene de Document Object Model, que traducido viene a
ser el Modelo de Objetos de Documento y contiene todas las
estructuras de datos del documento de la página web, es una
forma de representar los elementos de un documento
estructurado (tal como una página web HTML o un
documento XML) como objetos que tienen sus propios
métodos y propiedades. El responsable del DOM es el World
Wide Web Consortium (W3C). En efecto, el DOM es una API
para acceder, añadir y cambiar dinámicamente contenido
estructurado en documentos con lenguajes como ECMAScript
(Javascript).
Éste lenguaje es interpretado por el programa utilizado para
navegar…Firefox, Internet Explorer, Opera,Safari,etc.
5. CONCEPTOS
¿Qué es un intérprete?
Es un programa capaz de analizar y ejecutar otros
programas, escritos en un lenguaje de alto nivel.
Los intérpretes no son compiladores, ya que éstos
se encargan de traducir un programa desde su
descripción ,en un lenguaje de programación, al
código máquina del sistema destino, i.e., un
compilador transforma un programa en lenguaje de
alto nivel en un programa en lenguaje de bajo nivel:
7. CONCEPTOS: diferencias
Los intérpretes sólo realizan la traducción a
medida que sea necesario y normalmente,
no guardan el resultado de dicha traducción,
i.e., es un programa ,ej. el navegador en el
caso de JavaScript ,que toma el código con
el texto fuente del fichero .HTML o .JS y lo
analiza para después ejecutarlo. Esto hace
que se modifique el árbol DOM ,la estructura
de una página web que contiene el
navegador internamente y que gracias a
plugins como DOM Inspector puede ser
inspeccionado y por medio de FireBug
,depurado.
8. CONCEPTOS: diferencias
Los programas interpretados suelen ser más lentos que los
compilados debido a la necesidad de traducir el programa
mientras se ejecuta, pero a cambio son más flexibles como
entornos de programación y depuración (lo que se traduce,
por ejemplo, en una mayor facilidad para reemplazar
partes enteras del programa o añadir módulos
completamente nuevos), y permiten ofrecer al programa
interpretado un entorno no dependiente de la máquina
donde se ejecuta el intérprete, sino del propio intérprete
(lo que se conoce comúnmente como máquina virtual).
Comparando su actuación con la de un ser humano, un
compilador equivale a un traductor profesional que, a
partir de un texto, prepara otro independiente traducido a
otra lengua, mientras que un intérprete corresponde al
intérprete humano, que traduce de viva voz las palabras
que oye, sin dejar constancia por escrito.
En la actualidad, uno de los entornos más comunes de uso
de los intérpretes informáticos es Internet, debido a la
posibilidad que estos tienen de ejecutarse
independientemente de la plataforma.
9. DEPURACIÓN
JScript
Texto fuente
Firebug Otros
Es un depurador depuradores
integrado en el No disponen de las
navegador que se capacidades de
mejora periódicamente Firebug, no están
y dispone de un alto incrustados en el
número de navegador ni son
componentes… multiplataforma…
10. FIREBUG
WEB
Consola
Inspector
Log &
Monitor Navegador
CSS &
DOM
Profiler &
Depurador
11. FIREBUG: INSTALACIÓN
Primero debemos tener instalado el
navegador con la extensión “DOM –
Inspector” o también comúnmente llamado:
Inspeccionador del árbol DOM. Después
pasamos a abrir el navegador e instalar el
componente Firebug desde “Herramientas->
Complementos” -> “Obtener
extensiones”…donde buscaremos dicho
plugin y lo instalaremos, tras esto
reiniciaremos el navegador y
comprobaremos que está funcionando
pulsando la tecla de acceso al plugin “F12” o
el nuevo icono alojado en la parte inferior
derecha de Firefox: .
Y debe de aparecer la siguiente “ventana”
en la parte inferior:
12. FIREBUG: INSTALACIÓN
Firebug recién instalado:
Para las demostraciones y capturas he utilizado la versión 2.0.0.3 de Firefox
y 1.05 de Firebug (http://www.getfirebug.com/ )
Adicionalmente se pueden instalar otras herramientas útiles para
desarrollar en la web como pueden ser WebDeveloper 1.1.3
(http://chrispederick.com/work/webdeveloper/ ) y otras…
13. EJEMPLOS
Tomaremos como ejemplo la página de la
escuela para depurar contenido JavaScript
que se ejecuta en ella: (http://etsiit.ugr.es/
)
Pulsamos sobre “Enable Firebug” y una vez
cargada la página podremos inspeccionar el
contenido del árbol DOM ,de la estructura
HTML de ésta página web en concreto, si
pulsamos sobre inspect podremos ir
resaltando mediante cuadros de color azul
las diferentes metaetiquetas que componen
los nodos del árbol de la estructura.
15. EJEMPLOS : FIREBUG
De forma que en la ventana de Firebug
aparece coloreado con fondo azul claro el
contenido del marco que estamos
apuntando en la página web. Al igual que
aparece el estilo CSS utilizado en dicho
nodo, en la parte derecha del componente,
podemos seleccionar la pestaña “Layout”
que viene a ser la disposición de dicho
elemento HTML o nodo y sus
bordes,establecidos por parámetros de
estilo.
16. EJEMPLOS : FIREBUG
La pestaña DOM es la más interesante de esta parte ya que nos
muestra la información referente a dicho nodo seleccionado
17. EJEMPLOS : FIREBUG
En éste caso podemos ver que el enlace es
un enlace que contiene un evento “onclick”
(en lenguaje JavaScript) que realiza una
llamada a varias funciones “selectRSS();
ajaxManager(); return false;” y devuelve
falso para no “navegar” a otra página…
Para no tener que buscar dichas funciones
haremos uso del Profiler que viene en la
pestaña Console, y existen dos casos para
hacer uso del mismo, el primero, si
pulsamos en la web sobre “ETSIIT
NOTICIAS” sin hacer uso del botón “profile”,
debe de aparecer una llamada en segundo
plano en JavaScript …
18. EJEMPLOS : FIREBUG
…donde podemos comprobar los datos de la petición: el fichero
que se ha llamado, el método de transporte de datos, las
cabeceras de la respuesta,tiempo de la misma en
milisegundos,etc. Observar que aparece la línea del fichero fuente
que se ha ejecutado al llamar al evento…
19. EJEMPLOS : FIREBUG
El segundo caso de uso del profiler: Si
usamos en el botón “Profile” y luego
pinchamos en un enlace de la web,
por cambiar que sea una noticia, por
ejemplo “Premios al mejor proyecto
informático y a la mejor aplicación”,
al cambiar el contenido de la página
deberemos volver a pulsar “Profile”,
para que deje de analizar las llamadas
JavaScript que se están ejecutando.
Debe aprecer algo como lo siguiente:
20. EJEMPLOS : FIREBUG
Si miramos el enlace sobre el que
pinchamos anteriormente con “inspect”
sobre éste, podemos ver que el contenido de
la llamada en el evento era :
`onclick="openNews(1)"´, pero no
sabíamos que más se ejecutaba puesto que
no habiamos mirado el código JavaScript de
dicha función o llamada…,ahora vemos qué
más se está ejecutando y se adjunta una
tabla de estadísticas que informan acerca de
la ejecución del código en la máquina virtual
de dicho lenguaje. Se han realizado 3
llamadas a funciones que en principio no
tienen que ver con la primera “openNews”
,para saber qué es lo que hace esa función
pinchamos en “ajax.js (line 143)” de la
columna File.
21. EJEMPLOS : FIREBUG
Y hemos entrado al modo depurador ,es la pestaña
Script del componente Firebug de Firefox, en la parte
izquierda tenemos las listas de inspecciones y puntos
de ruptura para la página actual, podemos añadir una
inspección pinchando en el cuadro derecho de fondo
amarillo “New watch expression…” y escribiendo el
nombre de la variable. El modo de funcionamiento en
éste punto es igual a un depurador de cualquier otro
lenguaje.
22. EJEMPLOS : FIREBUG
Para comprobar su funcinamiento añadiremos
“noticia” a las inspecciones y un breakpoint,
pinchando en la línea 144 del código fuente para éste
fichero “ajax.js” donde nos encontramos en éste
momento.Antes de probar que funciona ,si leemos el
contenido de la función , aparece toggleDiv()
,podemos buscar dicha función en el minibuscador
del componente en la parte superior derecha del
mismo, “function toggleDiv” y asi mismo
comprobaremos por qué se han hecho 3 llamadas a
ésta función y otras 3 a “MM_findObj()” que se llama
una vez dentro de “toggleDiv()”.
Ahora podemos ir a la página y pinchar en “Volver”
que no es más que una llamada a returnNews() ,la
función justo por encima de openNews() que
acabamos de analizar, y ahora al pinchar sobre la
misma noticia anterior veremos que salta el punto de
ruptura y tenemos los valores de las inspecciones
rellenos:
24. EJEMPLOS : FIREBUG
“noticia” está a 0 , “this” es la única
variable global en éste punto,con toda la
información del objeto disponible y “not” es
el parámetro de la función con valor
1.Vamos pulsando F11 (StepInto) para ir
ejecutando paso a paso cada instrucción y
entrando en las posibles llamadas que haya
dentro de ésta función. En la primera línea
que se ejecuta comprobamos que noticia se
pone a 1 en la ventana de “Watch” ,la
inspección está funcionando correctamente.
La segunda línea es una llamada a la función
toggleDiv() a la que entra por usar StepInto
(F11)
25. EJEMPLOS : FIREBUG
y para darle el valor a “e” necesita entrar en la
función MM_findObj() con el parámetro pasado
“pagNot0”, en éste punto antes de continuar
deberíamos saber qué es “pagNot0”, se encuentra en
el árbol DOM pero si nos perdemos en él pasamos a
la pestaña HTML y utilizando el buscador
encontraremos que se trata de una división donde se
colocan las noticias:
27. EJEMPLOS : FIREBUG
Coloreada en azul está la división “pagNot0”, ahora
podemos pasar de nuevo a la pestaña Script porque
sabemos qué es lo que va a cambiar el código
JavaScript ,la función MM_findObj() buscará dicho
nodo asi que no vamos a iterar toda ésta sino que
añadiremos un breakpoint al final en la línea 34
donde dice “return x” (comprendiendo la lógica de la
función previamente) y pulsando sobre “Continue”
(F8) seguimos con F11 y volvemos a la llamada a
“toggleDiv()” y “e” tiene ya el valor del nodo del
DOM “div#pagNot0.paginaNoticias…” vemos que
desaparece el contenido porque se cambia el estilo
de la división haciéndose invisible y que se hace
visible el contenido de la noticia seleccionada (y que
se cargó al cargarse la página) para mostrar,en éste
caso la noticia 1 ;se oculta la división del listado de
las noticias en “pagNot0” y se muestra la división de
la noticia seleccionada: “noticia1” al igual que los
enlaces para volver al estado anterior
“toggleDiv("newsvolver");”.
28. EJEMPLOS : FIREBUG
Para hacer ahora algo más práctico y demostrar la potencia del
depurador modificaremos el árbol DOM de la página ,
inspeccionando (pestaña Console -> botón “Inspect” ) llendo a la
división “pagNot0” y pulsando en `<div id=”pagNot0”… ´
Pulsaremos sobre “EDIT” justo encima de las pestañas ,dentro del
componente e iremos al final del código mostrado añadiendo un
enlace nuevo al HTML de la división con éste contenido al final del
texto ,pero antes del último </div>:
<br/><a onclick="openNews(27)" href="#" style="border-
bottom-style: groove;">Enlace creado por mi para probar el
depurador Firebug</a>
Repetimos la operación pero ahora cambiamos la división
“contenedorNoticias” añadiéndole otra división nueva con ID 27.
<div style="display: none;" class="noticia" id="noticia27"><div
class="tituloNot"><a href="javascript:windowalert('Noticia
creada por mi');">Noticia creada por mi</a><br/></div><span
class="fechaNot">Publicada el:<strong>
23/04/2007</strong></span><span class="enlaceNot"><a
href="javascript:windowalert('Noticia creada por mi');"> Leer
</a></span><div class="descNot"/></div>
29. EJEMPLOS : FIREBUG
Nota: Le he puesto de ID noticia27
porque la última noticia es la
noticia18, por poner un número
alto.Además no hace falta meter la
división noticia27 dentro del
contenedor del resto porque el código
busca por todo el árbol DOM para
encontrar el elemento con dicho ID.
Comprobamos que al no insertar el
enlace dentro de una división donde
se aplican los estilos CSS para enlaces
aparecerá ,con una fuente y un color
distintos, lógicamente:
31. EJEMPLOS : FIREBUG
Así podemos crear nuestra propia noticia sin
tener que cambiar el código fuente que genera
el servidor http Apache meditante el script PHP.
Podemos llamar directamente a las
funciones,por ejemplo a “returnNews()” sin
tenerque hacer uso de los eventos, mediante la
pestaña “Console” ,escribimos el nombre de la
función o cualquier otra instrucción y pulsamos
en “Run” justo debajo del panel derecho que es
el hueco para insertar las líneas a ejecutar…
Ésta parte es de la más útiles que tiene el
depurador ya que podemos utilizar código para
modificar la página, podemos llamar a
openNews(numero) donde numero es la noticia
a mostrar, o podemos ver el valor de noticia en
un momento concreto e inspeccionar un objeto
de la página, como por ejemplo un elemento,un
nodo del DOM, por medio del uso de funciones,
para acortar se suele utilizar
document.getElementById(„id‟) ,que localiza
elementos del árbol por su id , por medio de una
función llamada $(„id‟) , de forma que
$(„examenes‟) nos devuelve el elemento (lista
en este caso) correspondiente:
<li id="examenes">
32. EJEMPLOS : FIREBUG
La última pestaña pero no menos
importante es “Net” y sirve para
comprobar que todos los ficheros de
la web han sido descargados ,muestra
lo que tardaron en hacerlo.