Redes
http://robinparadise.github.io/redes/
====================================================
2013 Robin Giles Ribera
Desarrolo de aplicaciones telemáticas 2013
Nombre de su cuenta en el laboratorio: robin
Práctica: "Redes" DAT URJC 2013
Básico URL => http://youtu.be/fzIChVypGCs
Opcional URL => http://youtu.be/onScX7KMIXQ
===================================================
PARTE BÁSICA
En principio el usuario empieza viendo una cortina con el logotipo "Redes"
dando click en cualquier parte de la pantalla pasará a proceso del "logueo".
La panatalla se divide en tres secciones: PeopleBar, ActivityBar, Content.
COLUMNA PEOPLE BAR
Tenemos dos iconos: People y Search.
En "Search" se debería buscar un ID y encontrar perfiles para añadir a nuestra lista People, donde podemos eliminarlos. Todo estos cambios interactúan con LocalStorage.
COLUMNA ACTIVITY
Tenemos los botones: "Home", "Messages", el título "Timeline" y "Back"
El botón "Home" nos muestra nuestro perfil de google+.
El botón "Messages" deselecciona todos mensages.
El botón "Toggle" oculta la columna activity, e inmediatamente aparece el botón opuesto a esta acción
Luego podemos observar la lista de mensages.
Todo estos cambios interactúan con LocalStorage en "paralelo" con la api de google plus.
CONTENT
Podemos observar el "Mapa", y acontinuación de éste observaríamos las fotos de flickr ( si están disponibles con un scroll horizontal).
Si seleccionamos una persona, inmediatamente se nos muestra en el mapa todos los mensajes
que lleven coordenas de localización tal y como se describe en la parte básica.
Además deberíamos observar popups con el mensaje en cuestión. Solo
si damos click en un mensaje se ajusta el zoom del mapa al máximo.
Las fotos de flickr aparecen al lado del mapa, se muestran de forma horizontal. La
información dada por nominatim la utilizamos para nuestra búsqueda con flickr.
Cuando miramos las fotos de flickr aparece un botón para volver al mapa.
URL => http://youtu.be/fzIChVypGCs
=========================================================
PARTE ADICIONAL
Podríamos diferenciar 4 partes:
1. La diseño de la interfaz, tanto css3 y jquery, La idea es que los elementos se adapten
a la pantalla (Responsive Design) y que todas las características se puedan observar en la
dimensión actual de la pantalla.
Para este objetivo hemos usado las siguientes herramientas:
- PerfectScrollBar y mousewheel jquery: (http://noraesae.github.io/perfect-scrollbar/)
(http://archive.plugins.jquery.com/project/mousewheel)
Además de dar un todo de distinción a nuestro scrollbar, nos ayuda a tener elementos "fijos"
y siempre visibles, pero con scrollbar.
Con mousewheel conseguimos que nuestro conenido de imágenes se pueda observar de forma horizontal.
- La barra de Mensajes se puede ocultar, esto obliga al mapa a "Adaptarse" tanto en tamaño
como en la posición relativa de su funcionamiento, por ello constantemente usamos la función "render" de openlayer (http://openlayers.org/dev/examples/teleportation.html).
- Si hay fotos servidas con flickr y por ejemplo la lista es inacabable, podemos dar al
botón que aparecerá cuando miramos las fotos en la parte superior derecha <-(La flecha) para
volver al mapa.
- Luego usamos las fuentes "Lobster" (para el logotipo) e "iconFont" (un pack que nos funciona
como iconos, además de la ventaja de ser más fácil y muy escalables).
- Por último tenemos "La Cortina", Cuando no estamos logueados la veremos todo el tiempo,
mostrando una transición infinita con CSS3 (rotar Xdeg, escalado y con un pegueño
efecto opacity).
2. People Search. Si en lugar de buscar por ID buscamos por algún nombre (pej, NASA) mostramos
también usuarios relacionados (Usamos la propia API de google+).
Luego tenemos una funcionalidad menor y es que tanto la lista de personas como las actividades
usan "LocalStorage" en paralelo con la api, así conseguimos una mejor sensasión de rendimiento.
3. Street View V3 ("El icono Ojo del mapa"). Cuando tenemos mensajes con infomación de localización
podemos utilizar street View para observar "lugares cercanos" a esta dirección. Pero solo se
debería usar cuando tenemos un mensaje, marker o popup activado, cuando hay varios seleccionados
simplemente muestra la última dirección seleccionada. Si no hay ningún mensaje nos manda al Gran
Cañon del Colorado.
Además el panorama streetView es redimensionable, en la esquena Sur Oeste tenemos el icono
que redimensiona el mapa.
* El uso de esta funcionalidad obligó a borrar las capas de google maps con open layer por conflictos que no he podido resolver.*
* La versión 2 de los mapas de google la he eliminado (en el archivo está comentado el código de
la versión 2 que antes usaba, no he querido elimnarlo porque llevó mucho tiempo):
- La V2 tenía la desventaja de usar flash.
- Pero con la V3 la funcionalidad que perdemos es el poder usarlo en fullscreen, después
ganamos en sencillez y rendimiento.
- Además la v3 es más preciso en cuanto a las coordenas de localización.
4. Por último usamos Oauth para la autentificación con googleplus (conectarse y desconectarse).
En el objeto "googleG" tenemos toda la iteración con la API de googleplus.
No he podido encontrar la manera de usar streetview con oauth, por eso el código de streetview
está aparte.
URL => http://youtu.be/j3Vc9WF3hpo
==============================================================
Tenemos Los siguientes ficheros javascript:
js/people.js -> Toda la lógica y funciones de la barra People y el Login.
js/activity.js -> Toda la lógica de la Actividad.
js/content.js -> Redimensionado de elementos, mapa, scroll, steetview, etc.
js/gapi.js -> La api de google.
js/openlayer.js -> Openlayer, nominatim, flickr.
streetview/streetview.js -> La funciones de Street View
Estilos css:
css/style.css
css/openlayer.css
streetview/streetview.css
