UNIVERSIDAD CATLICA SANTO TORIBIO DE MOGROVEJO

ESCUELA: Ing. Sistemas y Computacin CURSO: Teleinformtica DOCENTE: Ing. Luis Zue Bispo ALUMNA: Luz Milagros Chafloque Capuay CICLO: VII

INFORME FINAL
En el presente proyecto se ha desarrollado un paquete de aplicaciones que estn desarrolladas en diferentes lenguajes de programacin como HTML, PHP y JavaScript, adems se ha requerido utilizar libreras de JQuery y algunas Apis de Google, entre otras herramientas, se debe tener en cuenta que para poder ejecutar estas aplicaciones y compartirlas se ha habilitado el puerto 80 del router de la computadora. A continuacin se dar a conocer las aplicaciones que han sido desarrolladas para este proyecto: 1) GEOLOCALIZACION 1.1 Clima La aplicacin consiste en la Geolocalizacion del Clima, esta funciona de la siguiente manera: primero se ingresa a la aplicacin, sta automticamente detecta la ciudad donde te encuentras y da a conocer el clima y temperatura de la ciudad hallada. sta aplicacin est desarrollada en HTML, adems se utiliz la Apis de Yahoo con la cual se realiza la Geolocalizacion y la Apis de Google Fonts fue para darle un mejor estilo al texto. Apis de Yahoo: http://developer.yahoo.com/geo/placefinder/ , pgina web de referencia para descargar la Api. Apis de Google Fonts: http://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensed:300, 700 1.2 Mapas con CartoDB Es una aplicacin que consiste en localizar determinados lugares en mapas geoespaciales que se gestionan mediante la herramienta de open source llamada CartoDB, adems para ubicar cada uno de los lugares debemos de crear una tabla de una base de datos en PostgreSQL, adems de colocar cada una de las coordenadas de estos lugares, as mismo para esta aplicacin se trabaja con la apis de SQL y CartoDB, por ultimo tenemos que el lenguaje de programacin empleado fue HTML. Ahora se dar a conocer como se crea los mapas en CartoDB: a) 1: Ingresar a www.cartodb.com b) 2: Registrar en CartoDB

c) 3: Se crea una nueva tabla

d) 4: Hay tres modalidades para crear una tabla en este caso utilice un archivo con extensin .csv en donde tena una tabla de una base de datos que se trataba sobre los pases con nmero de muertos luego de un terremoto.

e) 5: Luego se crea la tabla y posteriormente se puede visualizar el mapa.

f)

Luego una vez que tenemos el mapa creado utilizamos la apis de SQL en la pgina donde estar la aplicacin.
Apis SQL: http://{account}.cartodb.com/api/v2/sql?q={SQL statement}

Luego en el archivo de HTML se comienza a declarar variables y se dibuja el mapa creado para poder integrarlo con el apis de Google Maps.

Luego, de toda la explicacin se muestra la aplicacin:

1.3 Captura de Wireshark

Los protocolos que trabajan son HTTP, TCP,TLSv1 pero el protocolo que nos permite ver de una mejor manera el funcionamiento de la aplicacin es el HTTP ya que en la captura se puede evidenciar que captura una pgina que referencia a Yahoo y el tipo de contenido as mismo se observa que captura una consulta en el momento de cargar el mapa creado en CartoDB . 2) JUEGO EN HTML5 Esta aplicacin consiste en un juego sencillo basado en la nueva versin del lenguaje HTML que es HTML5, adems se emple la librera box2d, box2dutils y game las cuales sirvieron para construir los objetos y para colocar las funciones, as mismo en el archivo HTML se utiliz un elemento que recin est incorporado en HTML5 canvas para generar los grficos estticos y las animaciones. Por ultimo para el ttulo de la aplicacin se utiliz el Apis de Google Fonts.

Captura de Wireshark Los protocolos que aparecen en la captura son TCP e IGMP los cuales cuando se corre la aplicacin capturan los tipos de contenido de la aplicacin.

3) Generador de Archivos TXT Esta aplicacin est diseada para que el usuario en un determinado cuadro de texto pueda escribir sus apuntes o alguna otra cosa de manera online y tenga la facilidad de poder descargar en un archivo con extensin .txt todo lo que escribi en el cuadro de texto. Para ello se ha utilizado libreras de Jquery y si se han elaborado funciones en PHP que nos permiten realizar la descarga del archivo, a continuacin se darn a conocer algunas de las libreras utilizadas: http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js assets/js/jquery.generateFile.js Las funciones realizadas en PHP estn enlazadas con la librera de generateFile.

 Captura de Wireshark

En esta captura que se realiz mientras la aplicacin se ejecutaba muestra que aparte del protocolo TCP, participa otro protocolo importante que es TLSv1, ste se encarga de la seguridad de capa de transporte, en la captura este protocolo reconoce al protocolo de la aplicacin http y encripta los datos en el proceso cuando se realiza la descarga de los archivos de tal manera que el usuario lo pueda comprender. 4) Personalizacin de Videos Esta aplicacin muestra como los videos de YouTube pueden ser personalizados de acuerdo al criterio y gusto del usuario haciendo uso del api de YouTube y las libreras de Jquery.

 Api de Youtube: http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc Libreras de Jquery: youTubeEmbed-jquery-1.0 , jquery.swfobject.1-1-1.min Funcin para personalizar los videos hecho en javascript: $(document).ready(function(){ $('#player').youTubeEmbed("http://www.youtube.com/watch?v=0NcJ _63z-mA") .youTubeEmbed('http://www.youtube.com/watch?v=quwebVjAEJA'); $('form').submit(function(){ $('#player').youTubeEmbed($('#url').val()); $('#url').val(''); return false; }); }); A continuacin se mostrara la aplicacin:

 Captura de Wireshark

En esta captura se observa que mientras la aplicacin de los videos personalizados con el api de YouTube se ejecuta, los protocolos que capturan informacin son el DNS y HTTP, el DNS es el que captura de forma automtica el api de YouTube. Mientras el HTTP recibe la direccin del api mas los videos que se van a reproducir y tambin captura el tipo de contenido de la aplicacin que es JavaScript. LINKOGRAFIA
http://cartodb.com/ http://docs.jquery.com/Tutorials http://code.google.com/intl/es-419/ http://www.adictosalared.com/2011/01/google-apis-developer-todas-las-herramientaspara-desarrolladores-en-un-solo-sitio/ http://shiftf12.wordpress.com/2009/02/04/box2d-tutorial-para-novatos-en-el-manejo-delibrerias-de-fisica-con-as3/ http://www.desarrolloweb.com/manuales/manual-canvas-html5.html http://developer.yahoo.com/geo/placefinder/ https://github.com/Vizzuality/cartodb-r/blob/master/CartoDB/man/CartoDB-package.Rd https://developers.google.com/maps/documentation/javascript/examples/ http://www.tucamon.es/contenido/cartodb-base-de-datos-geoespacial-en-javascripts https://developers.google.com/youtube/getting_started?hl=es#data_api http://web.ontuts.com/tutoriales/aplicaciones-de-mapas-con-cartodb/ https://developers.google.com/youtube/js_api_reference?hl=es