1

Temas 16-18

Lilian Paloma Carbajal Ida - 10410592

Jesús Guerrero Vargas García - 10410568

9 de Mayo del 2014

Tópicos de Programación Web

2

ÍNDICE1) 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

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)

4

EJEMPLO:

http://loldb.gameguyz.com/

5

También se puede en aplicaciones de escritorio:

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»

7

pagina.html

8

estilos.css

9

funciones.js

Cuenta con 8 funciones:

inicializarEventos

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

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.

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.

13

Función: procesarEventos

14

Función: ocultarTooltip

Oculta el div del mensaje

15

Funciones comunes:

16

pagina.php

Genera un trozo de HTML dependiendo del código del div enviado

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:

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»

20

pagina1.html

21

estilos.css

22

funciones.js

Función: inicializarEventos

Manda a llamar la función presionTecla cuando ocurre el evento keyup

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.

24

Función: procesarEventos

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

26

pagina1.php

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

28

Se genera una cadena cuyo contenido es XML

Informamos al navegador que enviaremos un archivo XML

Indicamos lo que se va a enviar

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:

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»

31

pagina1.html

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.

33

Función enviarDatos

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

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

35

Función procesarEventos

Crea la imagen generada en el servidor , esto cuando se nos informa que los datos fueron generados correctamente

36

pagina1.php

37

38

39

40

41

42

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:

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. 

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

 

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