PRACTICA 002:  CONSUMIR UN WEB SERVICE CON JQuery y HTML5

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de páginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

Lenguaje de Programación Interpretado: JavaScript

Herramientas y Tecnología: JQuery, JSON

INTRODUCCION

JavaScript es el lenguaje de programación Interpretado, basado en prototipos, imperativo y débilmente tipado. Nos permite hacer las paginas de estáticas a paginas dinámicas de html.

JQuery es una biblioteca de JavaScript para simplificar el desarrollo de código en html, agregando efectos visuales en menos tiempo.

Java script en esta practica se utilizara para CONSUMIR un SERVICIO WEB gratuito de la página Flickr. Utilizaremos la librería de JQuery para extraer los datos del archivo JSON que se genera.

La página inicio.html se utilizará para mostrar los resultados en el navegador.

Podremos ejecutar la línea de generación del JSON directamente en el navegador.

ACTIVIDADES

    PASO 1.- Ejecutar la siguiente línea que crea el JSON  directamente en el navegador 

          (Cambiar la palabra perro por uno  de tus apellidos y ejecutar):

https://api.flickr.com/services/feeds/photos_public.gne?tags= perro  &tagmode=any&format=json&jsoncallback=?

            1.1  Describir las características que te muestra el JSON creado:

    PASO 2.- Se trabajará con la pagina (inicio.html)

Agregar la siguiente sección de búsqueda. (En este caso esta dentro de un article en la posicion_2_2_1)

(Agregar líneas sombreadas)

Paso 3. Bajar la librería jquery.js de https://jquery.com

3.1 Crear una carpeta llamada “js”

            Copiar el jquery en la carpeta js

3.2 En inicio.html agregar el link hacia la carpeta del JQuery (entre la etiqueta head) (línea sombreada)

Paso 4.- Crear un archivo miscript.js en la carpeta “js”

4.1.- Captura el siguiente código en el archivo miscript.js

Paso 5.- En el archivo inicio.html: Agregar las líneas que enlazan al script antes de la etiqueta </body>

Paso 6.- Ejecutar inicio.html desde el explorador con enter

Paso 7.- Agregar estilo a las secciones en el archivo "miestilo.css" que esta en la carpeta “css” (líneas sombreadas)

Paso 8.- Ejecutar inicio.html desde el explorador con enter

Nota: Observar la información como la ordena(características  de un JSON, y estilos aplicados)

--------------------------------0----0------------------------------------------------

----------------------------------~---------------------------------------------------

---------------------------000-----000---------------------------------------------