1. Temas 16-18
Lilian Paloma Carbajal Ida - 10410592
Jesús Guerrero Vargas García - 10410568
1
9 de Mayo del 2014
Tópicos de Programación Web

2. ÍNDICE
1) Mostrar un tooltip con datos recuperados del servidor en forma
asincrónica
1.1 Conceptos
1.2 Ejemplos
1.3 Elaboración
2) Autocompletar un control de tipo text
2.1 Conceptos
2.2 Ejemplos
2.3 Elaboración
3) Encuesta con AJAX
2.1 Conceptos
2.2 Ejemplos
2.3 Elaboración
4) Conclusiones
2

3. 1) MOSTRAR UN TOOLTIP CON DATOS RECUPERADOS
DEL SERVIDOR EN FORMA ASINCRÓNICA
¿Qué es un tooltip?
Un tooltip (también llamada descripción emergente) es una
herramienta de ayuda visual, que funciona al situar el cursor
sobre algún elemento gráfico, mostrando una ayuda adicional
para informar al usuario de la finalidad del elemento sobre el que
se encuentra. (1)
3

4. EJEMPLO:
http://loldb.gameguyz.com/
4

5. También se puede en aplicaciones de escritorio:
5

6. Elaboración:
Se necesitan 4 archivos:
1) Un archivo html llamado «pagina1.html»
2) Una hoja de estilo llamada «estilos.css»
3) Un archivo JavaScript denominado «funciones.js»
4) Un programa en php llamado «pagina.php»
6

7. pagina.html
7

8. estilos.css
8

9. funciones.js
Cuenta con 8 funciones:
inicializarEventos
9

10. Se obtiene referencia a todos los «divs» de la página
Se definen las funciones que se llamarán para los eventos
«mouseover», «mouseout», «mousemove»
Crea un div que servirá para mostrar el mensaje
10

11. Función: mostrartooltip
Toma como referencia el div que muestra el mensaje y lo cambia
a visible.
Después llama la función recuperarServidorTooltip.
11

12. Función: recuperarServidorTooltip
Recibe el valor del atributo id del div donde se encuentra la
flecha del mouse.
Se crea un objeto de la clase XMLHttpRequest y se envía el
código del div respectivo.
12

13. Función: procesarEventos
13

14. Función: ocultarTooltip
Oculta el div del mensaje
14

15. Funciones comunes:
15

16. pagina.php
Genera un trozo de HTML dependiendo del código del
div enviado
16

17. 2) AUTOCOMPLETAR UN CONTROL DE
TIPO TEXT
También llamada como lista de sugerencias, a la vez que
tecleemos en un campo de texto se mostrarán resultados de
palabras que comienzan con los caracteres ingresados.
Ejemplo:
17

18. 18

19. Elaboración:
Se necesitan 4 archivos:
1) Un archivo html llamado «pagina1.html»
2) Una hoja de estilo llamada «estilos.css»
3) Un archivo JavaScript denominado «funciones.js»
4) Un programa en php llamado «pagina.php»
19

20. pagina1.html
20

21. estilos.css
21

22. funciones.js
Función: inicializarEventos
Manda a llamar la función presionTecla cuando ocurre el
evento keyup
22

23. Función: presionTecla
Crea un objeto XMLHttpRequest, extrae el contenido del campo
de texto y envía al servidor mediante el método GET la cadena
ingresada hasta el momento.
23

24. Función: procesarEventos
24

25. Una vez que la propiedad readyState informa que los datos
llegaron y además la propiedad status retorna 200 se procede a
rescatar los datos mediante responseXML
25

26. pagina1.php
26

27. Las palabras para autocompletar se guardan en un vector (en
este caso debido a que generalmente se extraen de una bd)
Se almacenan en un vector todas las palabras que comiencen
con la cadena ingresada hasta el momento
27

28. Se genera una cadena cuyo contenido es XML
Informamos al navegador que enviaremos un archivo XML
Indicamos lo que se va a enviar
28

29. 3) ENCUESTA CON AJAX
Concepto:
Es un estudio observacional en el que el investigador busca
recaudar datos por medio de un cuestionario previamente
diseñado. (2)
Ejemplo:
29

30. Elaboración:
Se necesitan 4 archivos:
1) Un archivo html llamado «pagina1.html»
2) Una hoja de estilo llamada «estilos.css»
3) Un archivo JavaScript denominado «funciones.js»
4) Un programa en php llamado «pagina.php»
30

31. pagina1.html
31

32. funciones.js
Función inicializarEventos
Se captura el evento submit.
Cuando se presiona el botón submit se llama a la función enviarSeleccion
con el número de opción seleccionada.
32

33. Función enviarDatos
Esta función manda
a llamar la función
enviarSeleccion con
el número de
opción
seleccionada
33

34. Función enviarSeleccion
Crea un objeto de la clase XMLHttpRequest y envía el número de opción
seleccionada de la encuesta y un valor aleatorio para evitar interferencias
con el cache
34

35. Función procesarEventos
Crea la imagen generada en el servidor , esto cuando se nos
informa que los datos fueron generados correctamente
35

36. pagina1.php
36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. La clase barra permite crear una gráfica de barras creando un
objeto de dicha clase y pasando como parámetro los datos
respectivos:
44

45. CONCLUSIONES:
Conclusiones generales acerca de lo aprendido
se aprendió que gracias a la herramienta de Tooltip se puede mostrar información
clara sobre algún elemento que se coloque en un sitio web
como lo es por ejemplo una imagen en donde al pasar el cursos del mouse
encima de la misma se de información acerca de porque esa imagen
se encuentra en el sitio o lo que representa. También se aprendió sobre
autocompletar algún control de tipo text que ayuda a los usuarios en la
navegación por el sitio web donde se aplique esta función pues al momento de
que ellos quieran realizar una búsqueda esta lo hará mas fácil al
autocompletar los textos que se vallan indicando por el usuario, por ultimo el uso
de la aplicación para la creación de una encuesta en AJAX
nos permite crear un sitio web con la opción de encuestas lo que ayuda a que el
sitio se pueda actualizar y modificar su contenido conociendo
los intereses de los usuarios. Cada una de estas aplicaciones nos proporcionan
conocimientos clave que nos permiten crear un sitio web mas atractivo
y de fácil uso para los usuarios de la Internet.
45

46. Contratiempos presentados al realizar la actividad
Las actividades no funcionaron al momento de querer abrirlas con
Netbeans, existe algún problema con php que no se pudo solucionar.
Debido a desconocer mucho de las tecnologías utilizadas para los
ejemplos, en momentos hubo desorientación.
Opinión acerca de la dificultad de la actividad y el tiempo y
formato de entrega
La dificultad fue alta ya que en los ejemplos hay mucho código que
interpretar.
Tiempo aproximado de realización
6 horas
46

47. REFERENCIAS
1. Información sobre herramientas. Wikipedia. [Online] [Cited: 05
2014, 08.]
http://es.wikipedia.org/wiki/Informaci%C3%B3n_sobre_herramientas.
2. Users. Encuesta. Wikipedia. [Online] [Cited: 05 08, 2014.]
http://es.wikipedia.org/wiki/Encuesta
47