Internet del Futuro: Internet de las Cosas, Computación en la Nube y la Web de Datos

Internet del Futuro: Internet de las Cosas,
Computación en la Nube y la Web de Datos
6 de Noviembre 2013, 9:00-12:30, Araba Enpresa Digitala
Parque Tecnológico de Álava (Miñano) - Edificio Central

Dr. Diego López-de-Ipiña González-de-Artaza
dipina@deusto.es
http://paginaspersonales.deusto.es/dipina
http://www.morelab.deusto.es
1

Agenda
1. La Internet del Futuro
–
–
–
–

La internet del futuro: definición, objetivos, limitaciones y desafíos.
Los pilares de la internet del futuro.
Internet de las cosas
Los nuevos protocolos de internet: IPv6 y HTTP 2.0.

2. La Web del Futuro
–
–
–
–

Evolución de la web: Web 3.0
El futuro de los navegadores web: HTML5, CSS3, RWD.
El futuro de los buscadores web.
La web como plataforma de servicios: REST, Comet, …

2

Agenda
3. Cloud Computing
–
–
–
–
–

Definición.
Manifestaciones de cloud computing: SaaS, PaaS y IaaS.
Aplicaciones cloud más significativas.
Infraestructura cloud: Amazon Web Services.
Plataformas cloud: Google App Engine.

4. Web de Datos y Big Data
–
–
–
–

Web Semántica: principios.
Anotación de contenidos, lenguajes, y mash-ups semánticos.
Linked Data: tecnologías, aplicaciones y LOD-Cloud.
Big Data: definición, tecnologías y aplicabilidad.

5. Conclusión y Preguntas
3

Limitaciones de la Internet Actual (1)
• Internet tiene más de 1500 millones de usuarios
– Es un éxito comunicando personas y sistemas de información

• PERO …
– ha crecido mucho más allá de sus expectativas y objetivos de diseño
en los 70s:
• Varios parches han permitido aplicaciones novedosas sin cambiarse su
arquitectura subyacente

– debe superar sus limitaciones tecnológicas para usarse como una
infraestructura global crítica
• Las aplicaciones web del futuro requerirán más movilidad, seguridad,
ancho de banda, robustez e interactividad

4

Limitaciones de la Internet Actual (2)
• Varios “parches” han sido desarrollados y desplegados para
permitir a Internet hacer frente a las demandas
incrementales de conectividad y capacidad
• La Internet actual ha alcanzado un punto de saturación para
alcanzar las expectativas funcionales del usuario y los
desafíos tecnológicos en tiempo y precio
– En términos de seguridad, escalabilidad, movilidad, disponibilidad o
aspectos socioeconómicos

5

¿Qué es la Internet del Futuro?
• Término que resume los esfuerzos para progresar a una
mejor Internet, bien mediante:
– Pequeños pasos evolutivos incrementales o
– Un rediseño completo (clean slate) y nuevos principios arquitectónicos

• Agentes clave:
– Global
Environment
http://www.geni.net/

for

Network

Innovations

(GENI):

• Más basado en redes

– Proyecto AKARI en Japón, http://akari-project.nict.go.jp/eng
– Future Internet – http://www.future-internet.eu/ y http://www.fippp.eu/about/
6

Misión de la Future Internet (FI)
• Ofrecer a todos los usuarios un entorno
seguro, eficiente, confiable y robusto, que:
– Permita un acceso abierto, dinámico y
descentralizado a la red y a su información y
– Sea escalable, flexible y adapte su rendimiento a
las necesidades de los usuarios y su contexto

7

Los Pilares de la Internet del Futuro
• La Internet del Futuro consta de 4 pilares apoyados
en una nueva infraestructura de red como base:
–
–
–
–

Internet Por y Para la Gente
Internet de los Contenidos y del Conocimiento
Internet de los Servicios
Internet de las Cosas

8

Arquitectura de la Internet del Futuro

9

Internet de las Redes
• Aunque existen proyectos que están trabajando en cambios
radicales a la manera de establecer conexiones con Internet
– http://www.fi-ppp.eu/
• FI-WARE: http://www.fi-ware.eu/about/

• Nos vamos a centrar en una serie de innovaciones en
protocolos que se están imponiendo y serán la norma en un
futuro cercano:
–
–
–
–

IPv6
HTTP 2.0
NFC
Bluetooth Low Energy (BLE)

10

IPv6
• Latest revision of the Internet Protocol (IP), the communications protocol
that provides an identification and location system for computers on
networks and routes traffic across the Internet.
– Developed by the Internet Engineering Task Force (IETF) to deal with the longanticipated problem of IPv4 address exhaustion
• IPv6 is intended to replace IPv4, which still carries the vast majority of Internet
traffic as of 2013
– As of September 2013, the percentage of users reaching Google services over IPv6
surpassed 2%

• To make the switch, software and routers will have to be changed to support this
more advanced network

• IPv6 uses a 128-bit address, allowing 2128, or approximately 3.4×1038
addresses, or more than 7.9×1028 times as many as IPv4, which uses 32-bit
addresses.
• IPv6 addresses are represented as eight groups of four hexadecimal digits
separated by colons
– E.g. 2001:0db8:85a3:0042:1000:8a2e:0370:7334
11

IPv6 vs. IPv4

•

Other important changes:
•

No more NAT (Network Address Translation), Auto-configuration, no
more private address collisions, better multicast routing, simpler header
format, simplified, more efficient routing, true quality of service (QoS), also
called "flow labeling“, built-in authentication and privacy support, flexible
options and extensions, easier administration (say good-bye to DHCP)
12

HTTP 2.0
• HTTP 2.0 is the next planned version of the HTTP network protocol
used by the World Wide Web.
– HTTP 2.0 is being developed by the Hypertext Transfer Protocol Bis
(httpbis) working group of the IETF.
– Based on Google's SPDY protocol, Microsoft's HTTP Speed+Mobility
proposal (SPDY based)

• HTTP 2.0 would be the first new version of the HTTP protocol since
HTTP 1.1 was described by RFC 2616 in 1999.
• Goals:
– Include asynchronous connection multiplexing, header compression,
and request-response pipelining, while maintaining full backwards
compatibility with the transaction semantics of HTTP 1.1
– Enable Server-Push

• Documentation:
– http://chimera.labs.oreilly.com/books/1230000000545/ch12.html
13

HTTP 2.0 streams, messages and frames
Stream, Messages & Frames

Binary Framing Layer

A connection carries any number of bidirectional
streams. In turn, each stream communicates in
messages, which consist of one or multiple frames,
each of which may be interleaved and then
reassembled via the embedded stream identifier in
the header of each individual frame

Request & Response Multiplexing

14

Near Field Communication (NFC)
•

Near field communication (NFC) is a set of standards for smartphones and
similar devices to establish radio communication with each other by touching
them together or bringing them into close proximity, usually no more than a few
centimetres
– Operates at 13.56 MHz, has data transfer rate ranging from 106 kbit/s to 424 kbit/s
– NFC tags contain data and are typically read-only, but may be rewriteable

•

Uses RFID (Radio Frequency Communication) chips that enable devices to
communicate between them, bi-directionally.
– Application examples:
• NFC headsets and electronic wallets, eliminates the need to pair devices in Bluetooth
or WiFi Direct (e.g. Android Beam / S-Beam), data exchange through NFC tags

•

Wider availability of NFC-enabled SmartPhones is propelling its usage:
http://www.nfcworld.com/nfc-phones-list/
– When will the iPhone support it?

15

NFC in Use
• Get info from posters,
make payments,
exchange connections

16

Bluetooth Low Energy (BLE)
• Bluetooth low energy (BLE) is a wireless computer network technology
which is aimed at novel applications in the healthcare, fitness, security,
and home entertainment industries.
– Compared to "Classic" Bluetooth, it is intended to provide considerably
reduced power consumption and lower cost, while maintaining a similar
communication range
• Power consumption is drastically reduced via a low pulsing method that keeps
devices connected without the need of a continuous information stream

• Features:
– Operates inn the same spectrum range (the 2.400 GHz-2.4835 GHz ISM band)
as Classic Bluetooth technology, but uses a different set of channels.
– Uses a star topology
– Nodes act as presence/state indicators
– Internet enabled devices as Gateways

• Available devices supporting BLE (Nokia Lumia, Android 4.3+, iPhone 4S+)
17

• In the market, we can encounter two types of BLE devices:
– Bluetooth Smart Ready refers to devices that use a dual-mode radios, which
can handle both the 4.0 technology, as well as classic Bluetooth abilities, such
as transferring files, or connecting to a hands-free device.
– Bluetooth Smart represents a new breed of Bluetooth 4.0 peripherals: sensortype devices like heart-rate monitors or pedometers that run on small
batteries and are designed to collect specific pieces of information.
• Only connect to BT Smart Ready devices

18

Internet Por y Para la Gente
• Nueva visión del usuario en Internet que implica:
– Mejor experiencia de usuario: desarrollo de nuevos interfaces
ergonómicos y modelos de interacción multi-modal
– Usuarios activos (prosumers): nuevas herramientas que permitan a
los usuarios finales crear y compartir servicios personalizados
– Sensible al Usuario y Contenido: personalización de contenido y
servicios de acuerdo al contexto y preferencias personales
– Conocimiento de usuarios: extraer información de los usuarios,
monitorizar su comportamiento sin comprometer su privacidad

19

Desafíos de la
Internet por y para la Gente
1.

Saber más del usuario – conociendo sus hábitos y necesidades para
diseñar mejor las aplicaciones, interfaces y servicios futuros
– Conocimiento de usuarios – los servicios y la web deberían ser adaptables y
personalizables al usuario
– Consciencia del usuario y del conocimiento – para generar sistemas de
recomendación, para la web móvil y los servicios sensibles a la localización

2.

Dar más poder al usuario – más y mejores servicios personalizados y
creados por los propios usuarios (enfoque Do It Yourself – DIY)

3.

Mejorar la experiencia de usuario – nuevas interfaces ergonómicas y
mecanismos de interacción incluyendo multi-modalidad y combinación y
adaptación semántica de la información desde diferentes fuentes
20

Open Innovation
• Nueva estrategia de innovación bajo la cual las empresas van más allá de
los límites internos de su organización y donde la cooperación con
profesionales externos pasa a tener un papel fundamental.
– La inteligencia colectiva surge de la colaboración y concurso de
muchos individuos o seres vivos de una misma especie.
– Término generalizado de la cibercultura o la sociedad del
conocimiento
• Los usuarios como PROSUMERS

• Algunos proyectos/conceptos en esta área:
– Kick starter –sitio web de financiación en masa (CrowdFunding) para
proyectos creativos http://www.kickstarter.com/
– Crowdsourcing se define como “the practice of obtaining needed
services, ideas, or content by soliciting contributions from a large
group of people and especially from the online community rather than
from traditional employees or suppliers”
21

Internet de los Contenidos y del
Conocimiento
• Nueva visión del contenido en Internet que implica:
– Nuevos dispositivos/players: dispositivos multimedia con más
funcionalidad integrada, escalables, auto-configurables, programables
– Aplicaciones multimedia sociales: software y herramientas para
integrar contenidos multimedia orientados a relaciones sociales.
– Contenido digital: herramientas para crear contenidos por el propio
usuario y su distribución a través de diferentes localizaciones.
– Contenido etiquetado semánticamente: para permitir que las
aplicaciones puedan procesar información de modo inteligente
– Inteligencia cognitiva: la evolución de la web a Web 3.0 permitirá
motores de búsqueda multimedia avanzados.

22

Desafíos de la Internet de los
Contenidos y Conocimiento
• Generación y procesamiento de contenido y su transformación en
información útil, teniendo en cuenta su relación con el usuario:
1. Contenido digital inteligente – información comprensible disponible al
usuario, incluyendo tanto datos (esencia) como metadatos (facilitando su
búsqueda, procesamiento, consumo, etc.)
2. Aplicaciones multimedia distribuidas sensibles al contexto – los prosumers
permitirán una selección automática de contenidos, sin importar ya tanto
cómo originariamente fueron provistos los contenidos
3. Nuevos dispositivos de usuarios y terminales ubicuos – los usuarios deben
poder acceder a contenido allí donde estén, desde cualquier terminal y sin
importar los cambios de terminal que efectúen.

23

Ejemplo Internet de la Gente y
Contenidos

24

Google Glass
•

Su misión es producir un ubiquitous computer de venta
masiva
– Lanzadas para los desarrolladores de Google I/O por
1500$ el año 2013

•

Muestra información disponible sin utilizar las manos,
accede a Internet mediante órdenes de voz, de manera
comparable a Google Now

25

Wearable Devices: SmartWatch & Healthpromoting Personal Data Devices

26

Internet of Things (IoT) Promise
• There will be around 25 billion devices connected to the
Internet by 2015, 50 billion by 2020
– A dynamic and universal network where billions of identifiable
“things” (e.g. devices, people, applications, etc.) communicate
with one another anytime anywhere; things become contextaware, are able to configure themselves and exchange
information, and show “intelligence/cognitive” behaviour

27

Internet de las Cosas
• Red universal de objetos interconectados y direccionables
basada en protocolos de comunicación estándar.
– IoT exhibirá un alto nivel de heterogeneidad, combinando objetos de
distinta funcionalidad, tecnología o campos de aplicación.
– Protocolos semánticos noveles serán desarrollados para permitir a IoT
escalar y coordinar a los millones de objetos que nos rodean
– RFID y redes de sensores proporcionan un mecanismo de bajo coste y
robusto de identificación y sensibilidad al contexto
• El uso de Internet pasará de modelo request/reply a push-and-process

28

Desafíos de Internet de las Cosas
1. Procesar grandes cantidades de información de “cosas
conectadas” y ofrecer servicios en respuesta
2. Investigar en nuevos modos y mecanismos de encontrar,
recuperar y transmitir datos dinámicamente
– Descubrimiento de datos sensoriales — en tiempo y espacio
– Comunicación de datos sensoriales: consultas complejas (síncronas),
publish/subscribe (asíncronas)
– Procesamiento de gran variedad de streams de datos sensoriales:
correlación, agregación y filtrado

3. Dimensión ética y social: mantener el equilibrio entre
personalización, privacidad y seguridad
30

IoT Enabling Technologies
• Low-cost embedded computing and communication
platforms, e.g. Arduino or Rapsberry PI
• Wide availability of low-cost sensors and sensor networks
• Cloud-based Sensor Data Management Frameworks:
Xively, Sense.se
 Democratization of Internet-connected Physical Objects

31

IoT impulse: Smart Cities, consumer
objects, mobile sensing, smart metering

32

Human-mediated Mobile Sensing
• La combinación de humanos, SmartPhones y
dispositivos de sensorización da lugar a Mobile
Sensing y CrowdSensing

33

Nature of Data in IoT
• Heterogeneity makes IoT devices hardly interoperable
• Data collected is multi-modal, diverse, voluminous
and often supplied at high speed
• IoT data management imposes heavy challenges on
information systems

34

Internet of Everything
• CISCO view: “From the Internet of Things (IoT), where we are today, we
are just beginning to enter a new realm: the Internet of Everything (IoE),
where things will gain context awareness, increased processing power,
and greater sensing abilities”
– IoE (four pillars: people, process, data, and things) builds on top of IoT (one
pillar: things).

35

Web of Things
• The Web of Things (WoT) is a computing concept that
describes a future where everyday objects are fully
integrated with the Web.
– The prerequisite for WoT is for the "things" to have embedded
computer systems that enable communication with the Web, i.e. HTTP
microserver
– Such smart devices would then be able to communicate with each
other using existing Web standards: HTTP & REST
– http://www.webofthings.org/

36

Protocolos para IoT
• NFC y BLE también entran en esta categoría:
Protocol

CoAP

XMPP

RESTful HTTP

MQTT

Transport

UDP

TCP

TCP

TCP

Messaging

Request/Response

Publish/Subscribe
Request/Response

Request/Response

Publish/Subscribe
Request/Response

Excellent

Excellent

Excellent

Excellent

LLN Suitability
(1000s nodes)

Excellent

Fair

Fair

Fair

Compute
Resources

10Ks RAM/Flash

10Ks RAM/Flash

10Ks RAM/Flash

10Ks RAM/Flash

Utility Field Area
Networks

Remote
management of
consumer white
goods

Smart Energy
Profile 2 (premise
energy
management/hom
e services)

Extending
enterprise
messaging into IoT
applications

2G, 3G, 4G
Suitability (1000s
nodes)

Success Stories

37

Internet of Things example: SmartVase

38

Internet of Things example:
Social Sustainable Coffee Machine

39

Una multitud de servicios IT conectados,
que son ofrecidos, comprados,
vendidos, utilizados, adaptados y
compuestos por una red universal de
proveedores, consumidores y
agregadores de servicios o brokers
- resultando en una nueva manera de ofrecer, utilizar, y
organizar funcionalidad soportada
por IT
Adapted from SAP Research, 2008, and SEEKDA, 2008

40

• Define cómo los servicios serán provistos y operados en la
Internet del Futuro
– http://services.future-internet.eu/index.php/Main_Page

• Tres principales áreas de investigación:
1. Internet-scale service oriented computing –permite el acceso a
recursos computacionales, datos o software, como servicios
2. Acceso a servicios contextualizado, proactivo y personalizado –
context-awareness, interacción multi-modal, end-user
empowerment, colaborativo
3. Orquestación de servicios y servicios base – diferentes capas de
servicios, desde servicios de infraestructura a servicios específicos
con interfaz de usuario.
41

Desafíos de la Internet de los
Servicios
1.

2.

3.

Permitir el acceso a servicios en base a las características técnicas
(localización IP o identificador) de servicios web, pero también en base a
información contextual (e.j. usando contexto geográfico o de negocio).
Los servicios deben ser buscados, identificados y compuestos en
componentes de procesos de negocio
Progresar hacia la “interactividad perfecta” de los consumidores:
– Permanente – interactividad sin límites temporales
– Transparente – el consumidor se concentra en los beneficios del servicio (en el qué)
permitiendo la movilidad del usuario entre diferentes dispositivos sin interrupción
– Sensible al contexto – la interacción se adapta al contexto incluyendo características de
los dispositivos, localización, preferencias de usuarios o sus redes sociales
– Enriquecedor – los usuarios configuran la manera en la que acceden a los servicios y
– Confiable – los usuario confían en que sus interacciones con servicios son seguras

42

La Web del Futuro
• Web Semántica:
o

Las máquinas entienden el contenido que han estado alojando y pueden
obtener información de la semántica de los documentos
o

Tecnologías: XML, RDF, SPARQL, OWL, µFormats...

• Web Ubicua:
o
o

Provee una framework para exportar capacidades de coordinación de
dispositivos a las aplicaciones web
Pretende mejorar las capacidades de los navegadores para habilitar
nuevos tipos de aplicaciones contextuales
o

•

Conectar un móvil con cámara con una impresora cercana, usar un móvil
para dar una presentación en un proyector inalámbrico, etc.

Web Semántica + Web Ubicua = ¡Web 3.0 y más allá!

43

La Evolución de la Web
•

Según Nova Spivack, el desarrollo de la Web se mueve en ciclos de 10 años:
– En la 1ª década, todo el desarrollo centrado en la infraestructura de la Web.
• Los programadores crearon los protocolos y lenguajes que utilizamos en la Web actual

– En la 2ª década, el foco se ha movido al front end y comenzó la era Web 2.0
• Ahora, se utilizan páginas Web como plataformas para otras aplicaciones.
• Se crean mash-ups y experimenta con nuevos modos de hacer la web más interactiva
• Web 2.0: web social y web como plataforma  estamos al final del ciclo!!

– El 3er ciclo será la Web 3.0, y el foco será de nuevo el back-end
• Los programadores redefinirán la infraestructura de Internet para dar apoyo a las avanzadas
capacidades de los navegadores y buscadores Web 3.0.

– La 4ª y subsiguientes fases corresponderán a la Web 4.0 y Web X.0
• Se volverá a dar importancia al front-end, nuevas y novedosas aplicaciones harán uso de la
infraestructura generada en la Web 3.0

•

Fuente:
–

http://www.howstuffworks.com/framed.htm?parent=web30.htm&url=http://www.intentblog.com/archives/2007/02/nova_spivack_th.html

45

Web 1.0 vs. Web 2.0 vs. Web 3.0
• Web 1.0 es como una librería. Puedes consultar información
pero no puedes contribuir con o cambiar la información.
• Web 2.0 es la web social colaborativa que pone en contacto a
gente y permite entrada y salida (input/output web)
• Web 3.0 usa la Internet para conectar información. Hace la
web más inteligente, teniendo en cuenta (enchufando)
nuestras preferencias, hábitos y contexto

46

Características de la Web 3.0
• Asistente personal que nos conoce y puede acceder a
información en Internet para responder a nuestras preguntas
• Cada usuario dispondrá de un único perfil de Internet basado
en la historia de navegación del usuario
– Si dos usuarios realizan la misma búsqueda por Internet recibirán
resultados diferentes acordes con su perfil y contexto

• Proveerá a los usuarios experiencias más ricas y relevantes
• Su bloque funcional serán las Open APIs
– Crear mash-ups será tan sencillo que cualquiera podrá hacerlo
• Se podrán mezclar widgets para hacer mashups usando drag&drop

47

El Futuro de las Búsquedas:
Personalizadas y en Tiempo Real

48

Futuro de las Búsquedas
•

The early days of search required that users query a search engine in database
format.
– Users phrase the query in such a way that the machine understands the request, query
the database, and return results.

•

Now, we are trying to talk to the machine and get back relevant results:
– Google' Glass and Now, and Apple's Siri are good examples of concept services
– Hummingbird replaces the old Google search algorithm that sought to map words in a
query to content with the same terms, to a new engine that seeks to actually
understand the meaning behind the query and (hopefully) return more relevant results

•

Our data is organized in the most accessible ways possible, conforming to
relevant data conventions and organized logically so the ever evolving spiders can
access and make sense of it.

Google's Amit Singhal states that
“Future Search will need to:

Answer & Converse&
Anticipate”
49

Wolfram|Alpha
•

Es un motor de conocimiento que genera salidas realizando cómputos a partir de
su propia base de conocimiento, en vez de hacer búsquedas en la web y devolver
vínculos.
– Contiene algoritmos que permiten obtener datos sobre hechos y fórmulas planteados
en lenguaje natural, apoyándose en la infraestructura de Mathematica
– Los resultados vienen como gráficos, mapas, hechos y tablas

•

¿Para qué sirve Wolfram|Alpha?
– Para mostrar información o realizar computaciones sobre hechos
– El servicio conoce mucho del mundo:
• Geografía, economía y datos socioeconómicos, física, química, ingeniería, deportes, unidades
de medida, tiempo e incluso música.

•

Diferencia con los buscadores:
– Todos los hechos, fórmulas y relaciones han sido preparados por usuarios humanos
– Wolfram|Alpha intenta determinar el significado real de una pregunta realizada
• Procesadores de lenguaje natural determinan el dominio de la pregunta para así facilitar el
cómputo de la respuesta

50

Siri
• Asistente personal para iOS que utiliza procesamiento del
lenguaje natural para responder preguntas, hacer
recomendaciones y realizar acciones delegando a servicios
web
• Es capaz de adaptarse con el paso del tiempo a las
preferencias individuales de cada usuario, personalizando
las búsquedas web y la realización de algunas tareas
• Las acciones y respuestas que es capaz de proveer Siri
descansan en un creciente ecosistema de proyectos
acompañantes:
– OpenTable, CitySearch, Yelp, Yahoo, ReserveTravel, Localeze
para preguntas sobre restaurantes, negocios y acciones;
– Eventful, StubHub, y LiveKick para información sobre eventos y
conciertos;
– True Knowledge, Bing Answers, y Wolfram Alpha para las
respuestas acerca de información sobre hechos y lugares

• URL: http://www.apple.com/ios/siri/
52

Google Now
•
•

•

•

•

•

Asistente personal inteligente disponible para los sistemas
operativos Android y iOS
Usa una interfaz de usuario de lenguaje natural para responder
preguntas, hacer recomendaciones, y actuar al delegar las solicitudes
a un conjunto de servicios web.
Reconoce acciones repetidas que un usuario realiza en el dispositivo
(ubicaciones comunes, citas repetidas del calendario, consultas de
búsqueda, etc.) para mostrar información más relevante al usuario a
manera de "tarjetas".
El sistema aprovecha el proyecto Knowledge Graph de Google, un
sistema usado para ensamblar resultados de búsquedas más
detallados mediante el análisis de su significado y conexiones
Las tarjetas especializadas actualmente incluyen: cumpleaños,
monedas, Gmail eventos, etc.
URL: http://www.google.com/landing/now/

53

Google HummingBird
•

Google Hummingbird es el nuevo algoritmo de búsqueda de Google:
– En Septiembre 27, 2013, el 15 cumpleaños de Google se lanzó este algoritmo que
pretende hacer las búsquedas en Google más cercanas al usuario (“human friendly”) y
ofrecer respuestas directas
• “Hummingbird looks at PageRank — how important links to a page are deemed to be — along
with other factors like whether Google believes a page is of good quality, the words used on it
and many other things”

•
•

Permite hacer consultas más complejas y entender mejor el lenguaje humano, en
vez de un conjunto de palabras.
Permite a Google gestionar mejor “búsquedas conversacionales”
– Cada vez se van a hacer mas “vocal search”
– Google quiere procesar consultas en lenguaje natural

•

Ejemplo:
– “give me some pictures of the transamerica building”
– “how tall is it” / “how tall is the transamerica building?”
– “pomegranate vs cranberry juice”

•
•

Explota internamente el contenido recogido en Knowledge Graph, con servicios
que lo explotan como Google Now quiere anticiparse, leer nuestra mente
URL: http://www.copyblogger.com/google-hummingbird/
54

Google Knowledge Graph
• Knowledge Graph es una base de conocimiento usada por Google para
mejorar los resultados obtenidos con su motor de búsqueda mediante
información de búsqueda semántica recolectada de una amplia gama de
recursos.
– Se añadió al motor de búsqueda de Google en 2012

• Provee información estructurada y detallada acerca de un tema además
de una lista de enlaces a otros sitios.
• Esta información se deriva de muchos recursos, que incluyen el CIA World
Factbook, Freebase y Wikipedia
– Su red semántica contenía más de 570 millones de objetos y más de 18 mil
millones de sucesos acerca de –y relaciones entre– esos diferentes objetos
que se usan para entender el significado del término índice ingresado en la
búsqueda

• URL:
– Knowledge Graph
http://www.google.com/insidesearch/features/search/knowledge.html
– Freebase: http://wiki.freebase.com/wiki/Main_Page
55

Evolución de los Navegadores
• Tradicionalmente los navegadores web se ejecutan en ordenadores
conectados a Internet, PERO …
• Los SmartPhones, SmartTVs (y otros dispositivos) incluyen también acceso a
servicios de datos mediante pequeños navegadores web
• Las aplicaciones web deben poder ejecutarse en todo tipo de dispositivos

• Los lenguajes HTML5/CSS3 y JavaScript no son ya sólo utilizados para
acceder a la World Wide Web
o

Pueden definir interfaces de usuario para muchos tipos de aplicaciones
locales y remotas, reduciendo el ciclo de desarrollo

• Los navegadores están emergiendo como habilitadores de interacción
global y players de aplicaciones web

57

Navegadores Futuros
• ¿Cuál será el rol de los navegadores en el futuro?
– Mozilla, Opera, Google y otros se están moviendo hacia un
modelo donde el navegador es el sistema operativo – bien
denominándolo navegador como SO o cloud SO
• Todas las aplicaciones, documentos, ficheros y servicios accedidos a través
de una interfaz web y se comportan de igual modo independientemente
del SO (Windows, Linux, Android, Chrome …)

58

Chrome OS
• Proyecto para desarrollar un sistema operativo basado en web.
– Realizado con base en código abierto (Núcleo Linux) y orientado inicialmente
para mini portátiles sobre microprocesadores con tecnología x86 o ARM
– Chrome OS fue liberado en noviembre de 2009 bajo el proyecto «Chromium
OS»
– Dispositivos existentes: Chromebooks y ChromeCast

59

El Browser como App Player

61

Características de los Navegadores
del Futuro
• Serán reproductores (players) de aplicaciones web y
catalizadores de interacciones con servicios:
–
–
–
–
–
–
–
–

Caché de aplicaciones
Modo de operación offline y online
Capacidad de almacenamiento
Soporte multi-hilo
Integración con escritorio
Interacción multi-modal
Interacción con el entorno
Motores de ejecución de servicios
62

El Browser como Broker de
Información
• Nuevo rol de los navegadores web: de renderizar HTML a broker de información
– Detectan información en páginas web y la transfieren a otras aplicaciones

• La detección de microformatos y contenido semántico debería ser diseñado
como una plataforma abierta y extensible
– Gestión de contactos, calendario y aplicaciones de mapas usan APIs del navegador
para integrarse con la capacidad de detección de microformatos y contenido
semántico del browser
• Ejemplo: Mozilla Operator (http://microformats.org/wiki/geo)

63

Greasemonkey
•

Greasemonkey es una extensión para el navegador Mozilla Firefox que permite, por
medio de pequeñas porciones de código creadas por usuarios, modificar el
comportamiento de páginas web específicas
– Instala porciones de código llamadas user scripts que, por medio de JavaScript, realizan
acciones muy concretas; muchas de estas porciones de código son creadas para sitios
concretos, otras sirven para cualquier página web.

•
•

El portal http://userscripts.org/ contiene muchos scripts para mejorar los sites que
visitas
Ejemplo:
– Instala el siguiente Script para añadir enlace a versión “Simple English” de toda página web
en http://en.wikipedia.org/wiki/. Por ejemplo: http://en.wikipedia.org/wiki/WebRTC

64

La Web como Plataforma: Parte Servidora
SOA: Service Oriented Architecture
•
•

•

•

•
•

WOA: Web Oriented Architecture

Define la utilización de servicios para dar soporte a
los requisitos del negocio
Sistemas altamente escalables, estándar de
exposición e invocación de servicios (comúnmente
pero no exclusivamente servicios web), lo cual
facilita la interacción entre diferentes sistemas
propios o de terceros.
Éxito de SOA depende de que los desarrolladores
de software se orienten a esta mentalidad de crear
servicios comunes que son orquestados por
clientes o middleware para implementar los
procesos de negocio
Hablar de SOA significa generalmente hablar de un
juego de servicios residentes en Internet o una
intranet, usando tecnologías como (XML, HTTP,
SOAP, WSDL, UDDI)
Características: Modular, distribuido, autodescriptivo, compartible y desacoplado
Dos estilos: objetos distribuidos (WS*-Style) y
WOA Style
65

•
•
•

•
•

•

•
•

WOA = SOA + REST + WWW
Arquitectura de software que extiende SOA a
aplicaciones basadas en web
La información se representa en forma de recursos
en la red y es accedida y manipulada mediante el
protocolo especificado en la URI.
Los recursos se manipulan mediante CRUD HTTP
(POST, GET, PUT, DELETE) usando REST.
Estos recursos sólo son manipulados por
componentes
pertenecientes
a
la
red
(esencialmente browsers & web servers).
Es responsabilidad de los componentes entender la
representación y estados de transición válidos de
los recursos.
Los recursos tienen embebidas URIs que construyen
una red más grande de recursos
Más flexibles, ágiles al cambio y evolución de los
sistemas de información.

La Web como Plataforma: Parte Servidora
SOAP: Simple Object Access Protocol
•

REST: Represantional State Transfer
•

Define cómo dos objetos en diferentes
procesos pueden comunicarse por medio de
intercambio de datos XML.
•

Estilo de arquitectura software para
sistemas de hypermedia distribuidos como
la WWW.
•

Deriva de un protocolo creado por David
Winer en 1998, llamado XML-RPC.

Introducido en la tésis doctoral de Roy
Fielding en el año 2000.

•

Fue creado por Microsoft, IBM, y otros y
actualmente se encuentra bajo el auspicio
de la W3C.

•

Se refiere a una colección de principios de
arquitectura de red, que marcan cómo
definir e invocar los recursos.

•

Su arquitectura consiste en varias capas de
especificaciones para formato de mensajes:

•

El término se usa a veces para describir una
simple interfaz que transmite datos de un
dominio específico por HTTP sin capas
adicionales como SOAP o uso de cookies.

•

Los sistemas que cumplen los principios
marcados por Fielding suelen ser referidos
como sistemas RESTful.

•

Message Exchange Patterns (MEP)

•

Protocolos de transporte (SMTP y
HTTP/S)

•

Modelos de procesado de mensajes

•

Protocolo de extensibilidad

•

WS-*
66

Understanding REST (1)
•

Representational State Transfer (REST) is an architectural style for creating,
maintaining, retrieving, and deleting resources
– REST is an information-driven, resource-oriented approach to building Web services
• Whilst SOAP is mostly useful for invoking behaviour, REST is good for managing information

– A resource can be anything (a file, query, calculation, or concept) of potential interest
that is serializable (represented) in some form
– A representation is the transfer format of information or application state from a server
to a client or back again.

•

When to use SOAP and when to use REST?
– When you need to invoke behavior in standard contract-bound ways between disparate
partners, SOAP is a good approach.
– If you are looking to share information in flexible, scalable, reusable, loosely-coupled
ways, then REST is a great approach

•

The HTTP protocol and its verbs are the most common implementation of REST,
but other bindings are possible

67

• REST identifies resources by URLs
–
–
–
–

URLs are logical paths through information spaces
Uniquely identify one or more resources in a resolvable context
Specifies a path toward an answer that encourages caching
Allows you to pass references to data, rather than the data itself

• Some example URLs could be:
– http://someserver/book  returns a index of book categories
– http://someserver/book/genre/horror  returns a book collection of
genre horror

– http://someserver/author/Diego/Ipiña  returns info about author
Diego Ipiña
68

• REST is an architectural style, where the ‘R’ stands for
representation.
– A representation is the structural form of the resource as it
moves back and forth from client to server

• Resources are given logical names
– There is no strict binding between an information consumer and
producer

• Unlike SOAP, in REST result negotiation allows for different
representation selection:
– XML may be a great format in the business tier
– In a browser-based API, you might like to refer to the same
resource but ask for it back as JavaScript Object Notation (JSON)
69

• In summary, the REST architectural style is based on the
following separation of concerns:
–
–
–
–

The things we care about (resources)
How we refer to them (URIs)
How we manipulate them (verbs)
How we choose to represent them for creation, updates, and retrieval
(Representations)

• REST concepts are the foundation for dynamic, scalable,
sharable and loosely-coupled resource-oriented
architectures (WOA)

70

Behaviour of a REST Application

71

JAX-RS: Java API for RESTful Web
Services
• A Java programming language API that provides
support in creating web services according to the
Representational State Transfer (REST) architectural
pattern.
– Uses annotations, introduced in Java SE 5, to simplify the
development and deployment of web service clients and
endpoints.

• Implementations of JAX-RS include:
– Apache CXF, an open source Web service framework.
– Jersey, the reference implementation from Sun (now
Oracle).
– Restlet, created by Jerome Louvel, a pioneer in REST
frameworks
72

JAX-RS Annotations
•

JAX-RS provides some annotations to aid in mapping a resource class (a POJO) as a web resource:
–
–
–
–

•

@Path specifies the relative path for a resource class or method.
@GET, @PUT, @POST, @DELETE and @HEAD specify the HTTP request type of a resource.
@Produces specifies the response Internet media types (used for content negotiation).
@Consumes specifies the accepted request Internet media types.

In addition, it provides further annotations to method parameters to pull information out of the
request. All the @*Param annotations take a key of some form which is used to look up the
value required.
–
–
–

@PathParam binds the method parameter to a path segment.
@QueryParam binds the method parameter to the value of an HTTP query parameter.
@MatrixParam binds the method parameter to the value of an HTTP matrix parameter.
• E.g.: Matrix parameters apply to a particular path element while query parameters apply to the request as a whole
http://example.com/res/categories;name=foo/objects;name=green/?page=1

–
–
–
–
–

@HeaderParam binds the method parameter to an HTTP header value.
@CookieParam binds the method parameter to a cookie value.
@FormParam binds the method parameter to a form value.
@DefaultValue specifies a default value for the above bindings when the key is not found.
@Context returns the entire context of the object.(for example @Context HttpServletRequest
request)
73

Jersey: an implementation of JAX-RS
•

Jersey is the reference implementation of JAX-RS, it contains basically a REST
server and a REST client.
– The core client can be used provides a library to communicate with the server.
– On the server side Jersey uses a servlet which scans predefined classes to identify
RESTful resources
• Via the web.xml configuration file for your web application, registers this servlet which is
provided by the Jersey distribution
• The base URL of this servlet is: http://your_domain:port/display-name/urlpattern/path_from_rest_class

•

This servlet analyzes the incoming HTTP request and selects the correct class and
method to respond to this request.
– This selection is based on annotations in the class and methods.

•

Download from: https://jersey.java.net/download.html

74

OpenID
•

•

Single sign-on es un procedimiento de autenticación que habilita al usuario para
acceder a varios sistemas con una sola instancia de identificación
OpenID is an open standard that allows users to be authenticated by certain cooperating sites (known as Relying Parties or RP) using a third party service,
eliminating the need for webmasters to provide their own ad hoc systems and
allowing users to consolidate their digital identities
–

•

•

An extension to the standard (the OpenID Attribute Exchange) facilitates the
transfer of user attributes, such as name and gender, from the OpenID identity
provider to the relying party
OpenID authentication is now used and provided by several large websites.
–

•

Users may create accounts with their preferred OpenID identity providers, and then use those
accounts as the basis for signing on to any website which accepts OpenID authentication.

Providers include Google, Yahoo!, PayPal, BBC, AOL, LiveJournal, MySpace, IBM, Steam, Sherdog,
Orange and VeriSign

Facebook Connect is a good alternative to OpenID
–

Allows users to "connect" their Facebook identity, friends and privacy to any site.

75

OAuth
• OAuth is an open standard for authorization
– Provides a method for clients to access server
resources on behalf of a resource owner (such as
a different client or an end-user).
– Provides a process for end-users to authorize
third-party access to their server resources
without sharing their credentials (typically, a
username and password pair), using user-agent
redirections.
• Complementary to OpenID
77

Flujo de Autenticación OAuth
Sucesivamente

Primera vez

78

Concepto AJAX
• AJAX (Asynchronous Javascript and XML) es una técnica de
desarrollo web que genera aplicaciones web interactivas
combinando:
– XHTML y CSS para la presentación de información
– Document Object Model (DOM) para visualizar dinámicamente e
interactuar con la información presentada
– XML, XSLT para intercambiar y manipular datos
• JSON y JSON-RPC pueden ser alternativas a XML/XSLT

– XMLHttpRequest para recuperar datos asíncronamente
– Javascript como nexo de unión de todas estas tecnologías

• AJAX es un patrón de diseño que propone un nuevo modelo de
interacción Web combinando las tecnologías anteriores
• Los navegadores que soportan las tecnologías mencionadas son
las plataformas en las que se ejecutan las aplicaciones AJAX
(Firefox, Iexplorer, Opera, Chrome y Safari)
79

La Web como Plataforma:
Parte Cliente  HTML 5.0
•

El Web Hypertext Application Technology Working Group (WHATWG) ha dado
lugar a la especificación de HTML 5.0 (www.w3.org/html/wg/html5):
– “The main area that has not been adequately addressed by HTML is Web Applications.
This specification attempts to rectify this, while at the same time updating the HTML
specs to address issues raised in the past few years”
• El enfoque predominante de WebApps basado en plug-ins debe quedar obsoleto

•

HTML 5 proporciona un conjunto de nuevos elementos y atributos que reflejan el
uso típico en portales Web modernos:
– Reemplazos semánticos para usos de elementos genéricos como (<div>) o (<span>)
elements, por ejemplo <nav> (bloque de navegación de website) y <footer>.
– Otros elementos proveen nueva funcionalidad a través de una interfaz estándar, como
los elementos <audio> o <video>
– Elimina elementos de HTML 4. Por ejemplo, elementos presentacionales como <font> y
<center>, cuyos efectos son mejor logrados mediante CSS
– Hay un nuevo énfasis en la importancia de scripting DOM para comportamiento Web

80

Características de HTML 5.0
•

Introduce nuevos elementos de estructura como: header, nav, article, section,
aside, y footer.
–

•

El gran potencial de HTML 5 viene de sus nuevas APIs para la autoría de aplicaciones
basadas en la Web :
–
–
–

•
•
•
•
•

•

aside – ofrece soporte para barras laterales, datagrid, dialog, figure, Web Forms 2.0

El interfaz WebSocket permite crear sockets TCP/IP bidireccionales entre la aplicación y el servidor
El servicio Server-sent Events permite a los servidores enviar eventos document-objet-model
(DOM) a aplicaciones
Nueva API de almacenamiento local que permite a los agentes de usuario guardar y recuperar
más información de la que podría crearse como un conjunto de pares nombre-valor como en las
cookies.

HTML 5.0 incluye soporte explícito para la ejecución offline de aplicaciones web: la caché
de aplicaciones y application cache manifest
Nuevas características multimedia como gráficos 2D y APIs de control de audio y video
Mecanismos para permitir el drag&drop
Webworkers (multithreading) y geolocation
CSS3 añade fondos y bordes, efectos de texto, múltiples columnas, transformaciones 2D y
3D, animaciones
Ejemplos de uso: http://www.w3schools.com/html/
81

CSS3
• CSS is used to control the style and layout of Web pages.
– CSS3 is the latest standard for CSS.

• The old specification has been split into smaller pieces, and new
ones are also added
–
–
–
–
–
–
–
–

Selectors
Box Model
Backgrounds and Borders
Text Effects
Multiple Column Layout
User Interface
2D/3D Transformations
Animations

• Some good examples: http://www.w3schools.com/css/
83

• JavaScript (sometimes shortened to JS) is a lightweight, interpreted,
object-oriented language with first-class functions, most known as the
scripting language for Web pages, but used in many non-browser
environments as well such as node.js or MongoDB
– It is a multi-paradigm language, supporting object-oriented, imperative,
and functional programming styles.

• JavaScript uses syntax influenced by that of C
– JavaScript copies many names and naming conventions from Java, but the two
languages are otherwise unrelated and have different semantics

• Netscape shipped it in 1995 as Mocha, renamed it to LifeScript then to
JavaScript for marketing purpose.
– From 1997 submitted to Ecma International, as ECMAScript
• As of 2012, all modern browsers fully support ECMAScript 5.1
• Officially managed by Mozilla Foundation
– Current version is 1.8.5

84

• jQuery is a lightweight, "write less, do more", JavaScript library.
– The purpose of jQuery is to make it much easier to use JavaScript on your
website.

• jQuery seems to be the most popular and extendable JavaScript framework
– jQuery takes a lot of common tasks that requires many lines of JavaScript code
to accomplish, and wraps it into methods that you can call with a single line of
code.
• Simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.

• The jQuery library contains the following features:
–
–
–
–
–
–

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

• Site: http://jquery.com/

85

jQuery Syntax
• With jQuery you select (query) HTML elements and perform "actions" on
them.
• Basic syntax is: $(selector).action()
– A $ sign to define/access jQuery
– A (selector) to "query (or find)" HTML elements
– A jQuery action()to be performed on the element(s)

• Examples:
–
–
–
–

$(this).hide() – hides the current element.
$("p").hide() – hides all <p> elements.
$(".test").hide() – hides all elements with class="test".
$("#test").hide() – hides the element with id="test"

• jQuery defines a document’s ready event to prevent any code from
running before the document is finished loading (is ready).
$(document).ready(function(){
// jQuery methods go here...
});

• Demos: http://www.w3schools.com/jquery/
86

jQuery UI
• jQuery UI is a widget and interaction library built on top of
the jQuery JavaScript Library
– It can be used to build highly interactive web applications

• The following site offers demos of all the controls provided
in Iterations, Widgets or Effects
– http://jqueryui.com/demos/

• jQuery UI's download builder allows you to choose the
components you would like to download and get a custom
version of the library for your project
– http://jqueryui.com/download/
• The result will be a file named jquery-ui1.8.24.custom.min.js
• The ThemeRoller app allows you to customize your controls:
– http://jqueryui.com/themeroller/

• Documentation:
http://docs.jquery.com/UI/Getting_Started
87

jQuery Mobile UI
• jQuery Mobile is to mobile what jQuery UI is to desktop.
– jQuery mobile is a mobile first framework and works just as well to help build
apps for desktop browsers.
• Platform support can be reviewed at: http://jquerymobile.com/gbs/

• A Touch-Optimized Web Framework for Smartphones & Tablets
– A unified, HTML5-based user interface system for all popular mobile device
platforms, built on the rock-solid jQuery and jQuery UI foundation
• Although you can use HTML and JavaScript to develop mobile optimized sites, you’ll
quickly run into some serious problems…mainly that different devices and browsers
treat your code differently.
– Latest stable version 1.2.0
– Site: http://jquerymobile.com and demos:
http://view.jquerymobile.com/master/demos/

• All pages in jQuery Mobile are built on a foundation of clean, semantic
HTML to ensure compatibility with pretty much any web-enabled device
– jQuery Mobile uses the custom data-* attribute to assign roles to
elements.
• More info at: http://html5doctor.com/html5-custom-data-attributes/
88

CSS3 Media Queries
•
•

Media queries, added in CSS3, let the presentation of content be tailored to a specific
range of output devices without having to change the content itself.
Syntax:
– A media query consists of a media type and one or more expressions, involving media
features, which resolve to either true or false.
– The result of the query is true if the media type specified in the media query matches the type
of device the document is being displayed on and all expressions in the media query are true.
– When a media query is true, the corresponding style sheet or style rules are applied,
following the normal cascading rules.
– A media type can be declared in the head of an HTML document using the "media" attribute
inside of a <link> element.
– The value of the "media" attribute specifies on what device the linked document will be
displayed
• braille, embossed, handheld, print, projection, screen, speech, tty, tv,
all

•

Example:
– @media (min-width: 700px), handheld and (orientation:
landscape) { ... }
– @media screen and (min-width:500px) { ... }

•

Documentation: https://developer.mozilla.org/enUS/docs/Web/Guide/CSS/Media_queries89

Responsive Web Design (RWD)
•

Responsive web design (RWD) is a web design approach aimed at crafting sites to
provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices (from
mobile phones to desktop computer monitors).
– Coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements
and images, by leveraging media queries to support various device display properties.

•

A site designed with RWD adapts the layout to the viewing environment by using:
– The fluid grid concept calls for page element sizing to be in relative units like
percentages, rather than absolute units like pixels or points.
– Flexible images are also sized in relative units, so as to prevent them from displaying
outside their containing element.
– Media queries allow the page to use different CSS style rules based on characteristics of
the device the site is being displayed on, most commonly the width of the browser.
– Server-side components (RESS) in conjunction with client-side ones such as media
queries can produce faster-loading sites for access over cellular networks and also
deliver richer functionality/usability avoiding some of the pitfalls of device-side-only
solutions
91

Responsive Web Design (RWD)

92

HTML5 vs. Native Apps
• Las aplicaciones nativas son
mejores en experiencia de
usuario, rendimiento y
monetization
• Las HTML5 en portabilidad,
base de desarrolladores,
resolver problemas de
fragmentación, etc.

93

HTML5 for Hybrid Native Mobile
Apps
• “Write once, run everywhere” this is the mantra of HTML5
technology.
• HTML5 is popular with software application programmers due
to its "familiar" use of HTML, JavaScript and CSS
– "consistent user experience" across all devices in any usage scenario
– BUT:
• Performance poorer, particularly when accessing device resources
• Uneven support of HTML5 across browsers

• Hybrid app approach where elements of native code are
presented in an HTML5 wrapper.
– Some frameworks: Sencha Touch, jQuery Mobile, The M-Project,
DaVinci Studio, Wink and PhoneGap
94

PhoneGap / Apache Cordova
• PhoneGap es un framework para el desarrollo de aplicaciones móviles
producido por Nitobi, y comprado posteriormente por Adobe Systems.
– Permite a los programadores desarrollar aplicaciones para dispositivos
móviles utilizando herramientas genéricas tales como JavaScript, HTML5 y
CSS3.
• Las aplicaciones resultantes son híbridas

– Maneja APIs que permiten tener acceso a elementos como el acelerómetro,
cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, etc.

• PhoneGap es una distribución de Apache Cordova
– La diferencia es que PhoneGap tien acceso a servicios de compilacion en la
nube proporcionados por Adobe Creative Cloud
• https://build.phonegap.com/apps

– The use of web-based technologies leads many PhoneGap applications to run
slower than native applications with similar functionality

• URL: http://cordova.apache.org/
95

Node.js: Server-side JavaScript
• La mayoría de nosotros ha usado JavaScript como un
mecanismo para añadir interactividad a las páginas web
• Con la aparición de jQuery, Prototype y otros nos hemos
dado cuenta que es un lenguaje que sirve para algo más
que hacer un window.open()
– Sin embargo, todas estas innovaciones eran para JavaScript
como lenguaje en la parte cliente

• Node.js nace para permitir usar JavaScript también en la
parte servidora
– Sin embargo, tu enfoque de desarrollo tiene que cambiar
radicalmente
• Va a estar basado en un enfoque asíncrono guiado por eventos

• URL: http://nodejs.org/
99

Node.js: Server-side JavaScript
• JavaScript es un lenguaje completo con el que
puedes hacer cualquier cosa que puedes hacer con
otros lenguajes
• Node.js te permite ejecutar código en el back-end,
fuera del navegador
• Node.js utiliza Google V8 VM, el mismo entorno de
ejecución para JavaScript de Chrome
– Además incorpora varios módulos para no hacer todo de
fuera, por tanto …
• Node.js = entorno de ejecución + librería
100

Full-Stack JavaScript
• Todos los navegadores (Opera, Chrome, Firefox, Iexplorer) pelean por
incorporar las últimas capacidades de HTML5
• La combinación HTML5+JavaScript se está configurando como “la
plataforma de aplicaciones web” para el front-end e incluso back-end
– Con JavaScript se puede ya programar tanto la parte cliente que se ejecuta en
el navegador como la parte servidora alojada en el servidor Web con
frameworks como Node.js o motores de BBDD NoSQL como MongoDB

101

Full-Stack JS Mobile Web App
• Conversor de números romanos a Árabes
– Interfaz HTML5/CSS generada con jQueryMobile Codiqa
– Parte servidora realizada con Node.js
– Conversión en aplicación móvil con la ayuda de
PhoneGap Build https://build.phonegap.com/

102

Real-Time Web & Search Engines
• Servicios como Facebook o
Twitter generan información
en tiempo real
• Los buscadores actuales
deben adaptarse para indexar
este tipo de contenidos en
tiempo real
– Real-time search

• Algunos ejemplos:
– Optimización Google Caffeine
103

¿Qué ocurre en la Web en 60’?

104

Real Time Web: Publish/Subscribe
• La web en tiempo real requiere un comportamiento PUSH de
la web en vez de PULL como hasta ahora
• Diferentes soluciones están apareciendo en el mercado para
resolver esto:
– Comet – a web application model in which a long-held HTTP request
allows a web server to push data to a browser, without the browser
explicitly requesting it
(http://en.wikipedia.org/wiki/Comet_(programming))
– PubSubHubbub – A simple, open, server-to-server web-hook-based
pubsub (publish/subscribe) protocol as an extension to Atom and RSS
(http://code.google.com/p/pubsubhubbub/)

105

PubSubHubbub
• PubSubHubbub is an open protocol for distributed
publish/subscribe communication on the Internet.
– Initially designed to extend the Atom (and RSS) protocols for
data feeds can be applied to any data type(i.e text, pictures,
audio, video) as long as its accessible via HTTP

• Aims to provide near-instant notifications of change
updates, which would improve on the typical situation
where a client periodically polls the feed server at some
arbitrary interval.
– Pushed HTTP notifications instead of requiring clients to poll
whole resources to monitor change

• PubSubHubbub is used by many content providers,
including all blogs served by blogger.com and
WordPress.com, news sites including CNN and Fox news.
106

•

Comet is a web application model in which a longheld HTTP request allows a web server to push
data to a browser, without the browser explicitly
requesting it
– Umbrella term, encompassing multiple techniques
for achieving this interaction.
• Relies on features included by default in browsers,
such as JavaScript, rather than on non-default
plugins
• Known by several other names, including Ajax
Push, Reverse Ajax, Two-way-web, HTTP
Streaming, and HTTP server push among others

•

Attempts to eliminate the limitations of the pageby-page web model and traditional polling by
offering real-time interaction, using a persistent or
long-lasting HTTP connection between the server
and the client
– The biggest hurdle is the HTTP 1.1 specification,
which states that a browser should not have more
than two simultaneous connections with a web
server
• May be worked around by creating a distinct
hostname for real-time information (domain
sharding)

•

Specific methods of implementing Comet fall into
two major categories: streaming and long polling.
108

Comet

HTML5 Server-sent events
•
•
•
•

HTML5 Server-Sent Events allow a web page to get updates from a server.
A server-sent event is when a web page automatically gets updates from a server.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
The EventSource object is used to receive server-sent event notifications:
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br>";
};

•

You need a server capable of sending data updates
–

The server-side event stream syntax is simple. Set the "Content-Type" header to "text/eventstream".

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

•

Demo: http://www.w3schools.com/html/html5_serversentevents.asp
109

WebSocket
•

WebSocket is a web technology providing full-duplex communications channels
over a single TCP connection
– standardized by the IETF as RFC 6455 in 2011

•
•

WebSocket is designed to be implemented in web browsers and web servers
The WebSocket Protocol is an independent TCP-based protocol.
– Its only relationship to HTTP is that its handshake is interpreted by HTTP servers as an Upgrade
request

•

Makes possible more interaction between a browser and a web site, facilitating
live content and the creation of real-time games
– standardized way for the server to send content to the browser without being solicited by the
client

•

Communications are done over TCP port number 80, which is of benefit for those
environments which block non-standard Internet connections using a firewall
– Supported in several browsers including Google Chrome, Internet Explorer, Firefox, Safari and
Opera

•

It is expected that HTML5 WebSockets will replace the existing XHR approaches as
well as Comet services by a new flexible and ultra high speed bidirectional TCP
socket communication technology.
110

WebSocket Features
• Technical details about WebSocket
– Uses WebSocket protocol instead of HTTP
– True full duplex communication channel; UTF8 strings and binary data can be
sent in any direction at the same time.
– It is not a raw TCP socket
– Connection established by "upgrading" (handshake) from HTTP to WebSocket
protocol
– Runs via port 80/443 and is firewall/proxy friendly
– Supports WebSocket ws:// and secure WebSocket wss://

• Benefits of using WebSockets
–
–
–
–

Reduces network traffic. each message has 2 bytes of overhead
Low latency
No polling overhead
WebSocket connections are terminated in the same rich application space
provided by HTTP servers, thus a WebSocket enabled web application can be
developed in a single environment rather than by collaboration between a
HTTP server and a separate WebSocket server
111

WebSocket in detail
•

Differs from TCP in that it enables a stream of messages instead of a stream of
bytes
– Before WebSocket, port 80 full-duplex communication was attainable using Comet channels

•

WebSocket protocol handshake:
– Client request:
GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

– Server response:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

112

AJAX Polling vs. AJAX Long Polling vs. HTML5
Server-sent Events vs. HTML WebSockets
Regular HTTP

HTML5 SSE

AJAX Polling

HTML5 WebSockets

AJAX Long-Polling

113

IFTTT
• IFTTT is a service that lets you create powerful connections
with one simple statement:
– IFTTT is pronounced like “gift” without the “g.”

• Channels are the basic building blocks of IFTTT: Facebook,
Evernote, Email, Weather, LinkedIn
• Each channel has its own Triggers and Actions:
– The this part of a Recipe is a Trigger, e.g. “I’m tagged in a photo on
Facebook”
– The that part of a Recipe is an Action, e.g. “send me a text message”
– Pieces of data from a Trigger are called Ingredients

• Demos: https://ifttt.com/myrecipes/personal
115

SmartThings
• Allows users to control everything surrounding them in their life on their
smartphone.
– Lights, air conditioning, even your house’s security system.

• Creates a service out of all of your existing hardware
– You can connect them to each other using real world apps

116

Atooma
• Es como un IFTTT pero para
SmartPhones
• Permite definir eventos
condicionales (IF) que lanzan
automáticamente tareas (DO)
asociadas actividades que pueden
ser detectadas por tu móvil (hora,
localización, estado de la batería,
etc.)
– URL: http://www.atooma.com/
117

The Programmable World
• Los siguientes pasos para alcanzar la quimera de
Programmable World:
1. Transformar los objetos cotidianos en inteligentes
2. Conectar estos objetos entre ellos y hacer que
“conversen”, algo de lo que productos como SmartThings
están tratando
3. Construir aplicaciones basadas en esta conectividad,
interconectándolas con datos externos para predecir, por
ejemplo, patrones de tiempo o consumo eléctrico..

•

Soluciones como IFTTT facilitan esa conectividad
entre diferentes canales de datos
118

El Futuro del Desarrollo Software

119

Latest Software Development
Methodologies

SCRUM Agile Methodology

Test-driven development

120

Continuous integration

Infraestructura Virtualizada:
Cloud Computing
Un paradigma de computación emergente donde los datos y servicios
residen en centros de datos muy escalables que pueden ser accedidos
ubicuamente desde cualquier dispositivo conectado a Internet1
Merrill Lynch:
Cloud computing market
opportunity by 2011 =
$95bn in business and
productivity apps +
$65bn in online advertising =
$160bn

(1) Source: IBM

121

Cloud Computing es …
• …
capacidad
computacional
y
almacenamiento
virtualizada
expuesta
mediante infraestructura agnóstica a la
plataforma y accedida por Internet
– Recursos IT compartidos en demanda, creados y
eliminados eficientemente y de modo escalable a
través de una variedad de interfaces programáticos
facturados en base a su uso

122

The “Cloud” = 10X Improvement
• Fácil de usar: hazlo tu mismo remotamente de cualquier
lugar en cualquier momento
• Escalable: controla tu infraestructura con tu aplicación
• Riesgo: nada que comprar, cancela inmediatamente
• Robustez: basado en gran hardware empresarial
• Coste: paga sólo por lo que uses

123

Evolución hacia Cloud Computing
• La coexistencia y limitaciones de cluster
computing y supercomputing dieron
lugar a grid computing
• De grid computing progresamos hacia
utility computing, i.e. Servicios
computacionales empaquetados como
agua, electricidad, etc.
• Esto derivó en Cloud Computing, es
decir, todo como servicio (XaaS) :
• Plataforma como Servicio
• Software como Servicio
• Infraestructura como Servicio

124

Evolución de Tecnologías de Cloud
Computing
• Maduración de tecnología de virtualización
• La virtualización permite nubes de computación
• Las nubes de computación demandan nubes de
almacenamiento
• Las nubes de almacenamiento y computación crean
infraestructura cloud
• La infraestructura cloud da lugar a plataformas y aplicaciones
cloud
• Diferentes tipos de cloud dan lugar a Cloud Aggregators
• Nichos de requisitos dan lugar a Cloud Extenders
125

Características de Cloud
Tipos de despliegue
• Cloud privada

Manifestaciones
• Cloud Software as a Service (SaaS)

– Propiedad de o alquilada por una
empresa (centros de datos,…)

• Cloud comunitaria

– Uso de la aplicación del proveedor sobre
la red, e.j., Salesforce.com,…

• Cloud Platform as a Service (PaaS)

– Infraestructura compartida por
una comunidad específica

• Cloud pública
– Vendida al público, gran escala
(ec2, S3,…)

– Despliega aplicaciones creadas por los
clientes a la nube, e.j. Google App Engine,
Microsoft Azure, …

• Cloud Infrastructure as a Service (IaaS)
– Alquilar procesamiento, almacenamiento,
capacidad de red y otros recursos
computacionales e.j., EC2 – Elastic
Compute Cloud, S3 – Simple Storage
Service, Simple DB,…

• Cloud híbrida
– Composición de dos o más
clouds

126

Arquitectura Cloud Computing

127

Aplicaciones Cloud
• Corresponden con lo que se denomina como SaaS
• Manifestación de cloud más popular
• Ejemplos: SalesForce, Gmail, Yahoo! Mail, rememberthemilk,
doodle, Google Docs, DropBox, picnik, Panda Cloud Antivirus,
scribd, slideshare
• Ventajas: Libre, Fácil, Adopción de consumo
• Desventajas: funcionalidad limitada, no hay control de acceso
a la tecnología subyacente

128

Plataformas Cloud
• Contenedores de aplicaciones
• Entornos cerrados
• Ejemplos: Google App Engine, Microsoft Azure, Heroku,
Mosso, Engine Yard, Joyent o Force.com
• Ventajas: buenas para desarrolladores, más control que en las
aplicaciones cloud, configuradas estrechamente
• Desventajas: restringidas a lo que está disponible, otras
dependencias, dependencia tecnológica

129

Infraestructura Cloud
• Proveen nubes de computación y almacenamiento
• Ofrecen capas de virtualización (hardware/software)
• Ejemplos: Amazon EC2, GoGrid, Amazon S3, Nirvanix, Linode,
Arsys Cloud Flexible, EyeOS
• Ventajas: control completo del entorno y la infraestructura
• Desventajas: precio premium, competencia limitada

130

Amazon Web Services (AWS)
•

AWS proporciona una infraestructura de servicios elástica donde alojar
computación, almacenamiento o sistemas empresariales
– Amazon Elastic Cloud (EC2) – permite configurar y ejecutar un Amazon Machine
Instance (AMI) – servidores en demanda
– Amazon Simple Storage Service (S3) – permite guardar y recuperar datos en la nube
– Amazon SimpleDB – proporciona la funcionalidad de una base de datos sobre S3 –
basada en pares clave-valor
– Amazon Simple Queue Service (SQS) – servicio de mensajería para encolar tareas y
mensajes
– Amazon Relational Database Service (RDS) – servicio web para crear, operar y escalar
una base de datos en la nube
– Amazon CloudFront – copias de tus objetos más populares son cacheados en una red de
nodos alrededor del mundo
– …

• Documentación: http://aws.amazon.com/documentation/

131


132


133

Amazon Elastic Compute Cloud: EC2
•

•
•

•

Permite ejecutar varios servidores Linux o Windows virtuales en demanda,
facilitando tantos ordenadores como necesites para procesar tus datos o ejecutar
una aplicación
Otorga acceso root al sistema operativo de cada servidor, un cortafuegos para
gestionar el acceso a la red y la libertad para instalar cualquier software
Una vez configurado un servidor adecuadamente, se guarda como Amazon Machine
Image (AMI) que puede ser lanzada para crear máquinas virtuales en demanda
La EC2 API (Query o SOAP) ofrece funcionalidad para empezar y parar instancias de
servidor, aplicar permisos de acceso y red o gestionar tus imágenes de servidor.
– Cada servidor individual se gestiona usando herramientas Linux o Windows sobre una
sesión de shell segura.

•
•

Se factura en función de los recursos consumidos : CPU y datos transferidos
Más información en: http://aws.amazon.com/products/ec2

134

Amazon Simple Storage Service: S3
• Ofrece espacio de almacenamiento seguro para cualquier
tipo de datos en los data centers de Amazon
– Es una alternativa a construir, mantener y utilizar tus propios sistemas
de almacenamiento
– No tiene límites sobre cuánta información, por cuánto tiempo y con
qué ancho de banda puede transferirse.

• Ofrece una simple API agnóstica a la información a guardar
– Depende de ti qué datos y qué representación interna tienen
– El modelo de datos interno consta de dos tipos de recursos de
almacenamiento:
• Objects: guardan datos y metadatos
• Buckets: contenedores que pueden contener infinidad de objetos

– Incorpora mecanismos de control de acceso (ACL) que pueden
aplicarse a objetos y buckets
135

Amazon Simple Storage Service: S3
•

Los recursos en S3 se identifican mediante URIs:
– http://s3.amazonaws.com/bucket-name/object-name
– https://s3-eu-west-1.amazonaws.com/dipinaimages/image1.png

•

Algunas características de su arquitectura son:
–
–
–
–
–
–
–

•

Los objetos S3 no pueden ser manipulados como ficheros estándar
Los cambios sobre ellos tardan en propagarse
Las peticiones a objetos pueden fallar ocasionalmente
Permite guardar versiones
Se deben resolver las direcciones IP de los nombres DNS de S3 periódicamente
Se pueden guardar infinitos objetos de hasta 5GB en tamaño
Se paga por almacenamiento, transferencia y operaciones

Algunos posibles usos de S3:
– Compartir grandes ficheros
– Como repositorio de back-up de tus ficheros
– Sistema de ficheros mapeado sobre S3 (ElasticDrive)

•

Más información en:
– http://aws.amazon.com/s3/,

136

Amazon CloudFront
• Mientras que en Amazon S3 se guardan contenidos (ficheros) con
CloudFront se garantiza que tus objetos en S3 buckets son servidos
rápidamente.
– Lo hace copiando los ficheros en buckets S3 a diferentes edge locations que sirven
contenidos a los usuarios finales.
– Tales edge locations se distribuyen por el planeta asegurándose que los contenidos son
servidos del servidor Amazon más cercano

• Es ventajoso porque el 80-90% del tiempo invertido esperando a una
respuesta web se debe a la descarga de los componentes de la página:
imágenes, hojas de estilo, scripts, Flash, etc.
– La clave es colocar la parte estática de nuestra web en una red de distribución
de contenidos como Akamai.

• Con CloudFront hay que pagar las transferencias desde S3 a las
localizaciones de los bordes.
• Más información en: http://aws.amazon.com/cloudfront/
137

Amazon SimpleDB
•
•
•

Almacén de claves/valor: trabaja con los conceptos domain, item y attribute
Diseñado para minimizar la complejidad y el coste de mantenimiento de tus datos
Guarda pequeñas piezas de información textual en una estructura de base de datos sencilla
simple de gestionar, modificar y buscar
–
–

Ofrece su propio lenguaje de consultas de datos
Ejemplos de consultas sencillas:
•
•

•
•
•
•
•
•

['Date' > '2007-07-01' and Not 'Date' starts-with '2007-07-04']
['Suburb' = 'Newtown'] or['Price' < '100000'] intersection ['Bedrooms' =
'3']

Si tus aplicaciones están basadas en bases de datos simples, este servicio puede reemplazar a
tu RDBMS dejándote con una pieza de infraestructura menos que comprar y mantener
No exige la especificación de un schema previo, tú puedes modificar la estructura y
contenidos de tu base de datos cuando quieras
Indexa cada pieza almacenada
Guarda tu información de modo seguro, y redundante en la red de data centers de Amazon
Pagas por almacenamiento, datos transferidos y operaciones
Más información en: http://aws.amazon.com/simpledb/
138

Amazon Relational Database
Service (Amazon RDS)
• Es un servicio web que facilita la instalación, operación y escalabilidad de
una base de datos relacional en la nube
– Te da completo acceso a las capacidades de una base de datos MySQL
• Las aplicaciones que ya funcionan con MySQL también lo harán con Amazon RDS

– Amazon RDS modifica el software MySQL para programar la creación de back-ups o
garantizar la escalabilidad, todo ello controlado a través de una API sencilla.

• Solamente se paga por los recursos utilizados.
• Más información en: http://aws.amazon.com/rds
• Herramienta: Amazon RDS Command Line Toolkit
– http://developer.amazonwebservices.com/connect/entry.jspa?externalID=2928&catego
ryID=294

• Tutorial en:
http://docs.amazonwebservices.com/AmazonRDS/latest/GettingStartedG
uide/
139

Amazon SQS
• Implementa el servicio de mensajería basado
en colas
• Los mensajes son siempre strings
• Útil para crear trabajos asíncronos y descargar
de actividad a un web server
• Se paga por mensajes y datos transferidos
• Más información en:
http://aws.amazon.com/sqs
140

Registro y Documentación
• Se puede ver en detalle cómo acceder a AWS:
– http://www.slideshare.net/ronaldbradford/getting
-started-with-mysql-in-amazon-webservices?src=related_normal&rel=3462501
– http://docs.amazonwebservices.com/AWSEC2/20
09-11-30/GettingStartedGuide/
– http://aws.amazon.com/free/ (Free usage tier)

141

Calculadora de Costes en Amazon
• La siguiente herramienta te permite estimar
costes de consumo de servicios en Amazon:
– http://calculator.s3.amazonaws.com/calc5.html

• Además, desde la página
http://aws.amazon.com/account, se puede
acceder al menú “Account Activity” que ilustra
el gasto actual incurrido.

143

APIs Disponibles por Servicio AWS
Service

REST API

Query API

SOAP API

S3

Yes

No

Yes

EC2

No

Yes

Yes

SQS

Yes

Yes

Yes

FPS

No

Yes

Yes

SimpleDB

No

Yes

Yes

RDS

No

Yes

Yes

144

Usando AWS SDK for Java
• Se puede obtener documentación detallada en:
– http://docs.amazonwebservices.com/AWSJavaSDK/latest/javadoc/

• Antes de empezar, debes registrarte en cada servicio que
quieras utilizar.
• Necesitas obtener tus credenciales de seguridad de:
http://aws.amazon.com/security-credentials
– Previamente puede que tengas que firmar en
http://aws.amazon.com/products
– Los credenciales son un par de claves públicas y privadas que
contienen:
• Access Key ID
• Secret Access Key
145

Caso práctico de Álbum de Fotos
• Solución Cloud con: S3, SDB, SQS y CloudFront

• Ejemplo descrito en:
– http://www.slideshare.net/javasymposium/developing-with-amazonweb-services-highly-scalable-services-that-are-someone-elsesheadache-to-maintain-and-develop
146

Google Cloud Platform
• Consiste de los siguientes componentes:
– Google App Engine – platform as a service that uses familiar technologies to
build and host applications on the same infrastructure used at Google.
– Google Compute Engine – an infrastructure as a service that lets you run your
large-scale computing workloads on Linux virtual machines hosted on Google's
infrastructure.
• https://cloud.google.com/products/compute-engine

– Google Cloud Storage – store, access and manage your data on Google’s
storage infrastructure.
• https://developers.google.com/storage/docs/hellogooglestorage

– Google BigQuery – analyze Big Data in the cloud using SQL and get real-time
business insights in seconds using Google BigQuery. Use a fully-managed data
analysis service with no servers to install or maintain
• https://developers.google.com/bigquery/sign-up

– Google Cloud SQL – run MySQL databases in Google's cloud. Use a fully
managed service to maintain and administer your databases.
• https://cloud.google.com/products/cloud-sql

– Google Cloud Datastore – fully managed, NoSQL, schemaless database for
storing non-relational data.
• https://developers.google.com/datastore/
147

Ejemplo Plataforma Cloud:
Google App Engine
• Google App Engine es una herramienta para el alojamiento de
aplicaciones web escalables sobre la infraestructura de Google
– Su misión es permitir al desarrollador web crear fácilmente aplicaciones web
escalables sin ser un experto en sistemas

• Aporta las siguientes características a los desarrolladores:
– Limita la responsabilidad del programador al desarrollo y primer despliegue
• Google App Engine provee recursos computacionales dinámicamente según son
necesarios

– Toma control de los picos de tráfico – si nuestro portal crece en popularidad
no es necesario actualizar nuestra infraestructura (servidores, BBDD)
• Ofrece replicación y balanceo de carga automática apoyado en componentes como
Bigtable

– Fácilmente integrable con otros servicios de Google – los desarrolladores
pueden hacer uso de componentes existentes y la librería de APIs de Google
(email, autenticación, pagos, etc.)
148

Google App Engine:
Características
•

Ofrece una plataforma completa para el alojamiento y escalado automático de
aplicaciones, consistiendo en:
– Servidores de aplicaciones Python y Java
– La base de datos BigTable
– El sistema de ficheros GFS

•
•

Como desarrollador simplemente tienes que subir tu código Python o Java
compilado a Google, lanzar la aplicación y monitorizar el uso y otras métricas
Google App Engine incluye la librería estándar de Python 2.7 y soporta Java 7
– No todas las acciones se permiten (acceso a ficheros, llamadas al SO, algunas llamadas
de red)
• Se ejecuta en un entorno restringido para permitir que las aplicaciones escalen

•

Ejemplo:
–
–
–

https://appengine.google.com
http://enpresadigitala.appspot.com/encuestas
http://code.google.com/intl/en/appengine/docs/

149

App Engine para Java
• Crea aplicaciones web a través de tecnologías estándar de
Java y las ejecuta en la infraestructura escalable Google
– Usa JVM Java 7, interfaz de servlets Java y la compatibilidad de
interfaces estándar como JDO, JPA, JavaMail y JCache

• App Engine utiliza el estándar Java Servlet para aplicaciones
web
– JVM se ejecuta en un entorno seguro de la "zona de pruebas" para
aislar tu aplicación por servicio y seguridad.
• Una aplicación en GAE sólo pueda realizar acciones que no interfieran con
el rendimiento ni con la escalabilidad de otras aplicaciones.

151

Funcionalidad de AppEngine
for Java
•

App Engine proporciona un conjunto de servicios escalables que pueden utilizar
las aplicaciones para:
– Almacenar datos persistentes. En Java, el almacén de datos admite 2 interfaces Java
estándar: los objetos de datos Java (JDO) 2.3 y el API de persistencia de Java (JPA) 1.0.
– Acceder a recursos en la red. A través de la URL Fectch API.
– Cachear información. Memcache de App Engine proporciona un almacenamiento en
caché distribuido, transitorio y rápido de los resultados de cálculos y consultas de
almacén de datos. La interfaz Java implementa JCache (JSR 107).
– Enviar email. Da soporte de JavaMail para el envío de correos
– Procesar imágenes. A través de la Images Java API, permite a las aplicaciones
transformar y manipular datos de imágenes en varios formatos.
– Gestionar usuarios. A través de la Users Java API permite utilizar Cuentas de
Google para la autenticación del usuario.
– Lanzar tareas planificadas o en background. Mediante la Task Queue Java API y la
gestión de tareas por Cron.
152

Instalación de AppEngine for Java
1. Descargar el fichero de:
– http://code.google.com/intl/es/appengine/downloads.ht
ml#Google_App_Engine_SDK_for_Java

2. Descomprimir el fichero .zip
3. Crear una variable de entorno
APPENGINE_JAVA_SDK que apunte al directorio
raíz de instalación de la SDK
4. Incluir el directorio
%APPENGINE_JAVA_SDK%bin en la variable
de entorno PATH
153

Guardando datos en GAE
• App Engine ofrece diferentes opciones para guardar
datos:
– App Engine Datastore ofrece un almacén de objetos sin
esquema NoSQL, con un motor de consultas y
transacciones atómicas
– Google Cloud SQL provee una base de datos relacional SQL
para tu aplicación sobre App engine, basada en MySQL
• https://developers.google.com/cloud-sql/

– Google Cloud Storage provee almacenamiento para
objetos y ficheros de hasta terabytes accesibles desde
aplicaciones Python y Java
• https://developers.google.com/storage/
154

Pasos para crear una Aplicación
con Google App Engine para Java
1. Crear el proyecto de la aplicación
2. Crear la clase servlet
3. Crear el fichero de despliegue de la aplicación:
web.xml
4. Crear el archivo appengine-web.xml
5. Ejecutar el proyecto
6. Probar el proyecto: http://localhost:8080/<nombreaplicación>
7. Subir la aplicación al dominio appspot.com
155

Paso 1: Creando la estructura del proyecto
•

Dos opciones:
–
–

•

Las aplicaciones Java de App Engine utilizan el API Java Servlet para interactuar con el
servidor web.
–

•

Usar el plug-in para Eclipse: http://code.google.com/intl/es/appengine/docs/java/tools/eclipse.html
Usar la plantilla de proyecto disponible en
%APP_ENGINE_HOME%demosnew_project_template

Un servlet HTTP es una clase de aplicación que puede procesar y responder solicitudes web. Esta
clase amplía la clase javax.servlet.GenericServlet o a la
clase javax.servlet.http.HttpServlet.

La estructura del directorio de trabajo será la siguiente:
Guestbook/
src/
...Java source code...
META-INF/
...other configuration...
war/
...JSPs, images, data files...
WEB-INF/
...app configuration...
classes/
...compiled classes...
lib/
156
...JARs for libraries...

Paso 2: Creando la clase Servlet
•

Crear en el directorio src/guestbook/ un fichero
denominado GuestbookServlet.java con el siguiente contenido:
package guestbook;
import java.io.IOException;
import javax.servlet.http.*;
public class GuestbookServlet extends HttpServlet {
public void doGet(HttpServletRequest req,
HttpServletResponse resp) throws IOException {
resp.setContentType("text/plain");
resp.getWriter().println("Hello, world");
}
}

157

Paso 3: Creando el fichero de
despliegue – web.xml
•

Cuando el servidor web recibe una solicitud, decide qué clase de servlet ejecutar mediante
un archivo de configuración conocido como "descriptor de implementación de la aplicación
web".
–

Este archivo se denomina web.xml y se ubica en el directorio war/WEB-INF/ del directorio que
contiene los ficheros de una aplicación web en Java

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">
<servlet>
<servlet-name>guestbook</servlet-name>
<servlet-class>guestbook.GuestbookServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>guestbook</servlet-name>
<url-pattern>/guestbook</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
158

Paso 4: Crear el fichero de
configuración de aplicación GAE:
appengine-web.xml
•

App Engine necesita un archivo de configuración adicional para poder desarrollar y ejecutar
la aplicación, denominado appengine-web.xml
–
–

•

Se ubica en WEB-INF/ junto a web.xml.
Incluye la ID registrada de la aplicación, el número de versión de la aplicación y listas de archivos que
se deben tratar como archivos estáticos (por ejemplo, imágenes y CSS) y archivos de recursos (por
ejemplo, JSP y otros datos de aplicación).

El directorio war/WEB-INF/ incluye un archivo denominado appengineweb.xml que contiene lo siguiente:
<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
<application>librocitas</application>
<version>1</version>
</appengine-web-app>

159

Paso 5: Ejecución del Proyecto
• El SDK de App Engine incluye un servidor web de
pruebas para depurar tu aplicación.
• El servidor simula los servicios y el entorno App
Engine, que incluyen restricciones en la zona de
pruebas, el almacén de datos y los servicios.
• Con el fichero ant ejecuta: ant runserver
– Puedes detenerlo con Ctrl-C

160

Paso 6: Subiendo la aplicación
1. Puedes crear y administrar aplicaciones web App Engine con
la consola de administración de App Engine a través de la
siguiente URL: http://appengine.google.com/
2. Para crear una nueva aplicación, haz clic en el botón "Create
an Application" (Crear aplicación)
3. Edita el archivo appengine-web.xml y, a continuación,
cambia el valor del elemento <application> para que
sea la ID registrada de tu aplicación (librocitas).
4. Ejecuta el siguiente comando en línea de comandos para
subir la aplicación: $ appcfg update www
5. Vete a: http://librocitas.appspot.com/
161

Registrando la aplicación

162

Verificación de tu cuenta

163

Verificación de tu Cuenta

164

Registrando la aplicación en
appengine.google.com

165

Registrando la applicación

166

Características Avanzadas de Google
App Engine
• Acceso a datos mediante JDO
– http://code.google.com/appengine/docs/java/gettingstarted/usingdatastore.html

• Gestión de usuarios
– http://code.google.com/appengine/docs/java/users/

• Planificación de tareas con Cron for Java
– http://code.google.com/appengine/docs/java/config/cron.html

• Memcache Java API
– http://code.google.com/appengine/docs/java/memcache/overview.html

• URL Fech Java API
– http://code.google.com/appengine/docs/java/urlfetch/overview.html

• Envío de mensajes instantáneos con XMPP e email
– http://code.google.com/appengine/docs/java/xmpp/overview.html

• Colas de tareas – permite ejecutar asíncronamente tareas
– http://code.google.com/appengine/docs/java/taskqueue/overview.html
167

Google App Engine vs. Amazon
Web Services

168

Mobile Cloud Computing
• Combinación e integración de aplicaciones
móviles con front-end HTML5 con back-end
en la Nube: ubicuidad, buen rendimiento, etc.

169

Web Semántica
• Problema de la Web Actual:
– El significado de la web no es comprensible por máquinas

• Web Semántica  crea un medio universal de
intercambio de información, aportando semántica a
los documentos en la web
– Añade significado comprensible por ordenadores a la Web
– Usa técnicas inteligentes que explotan esa semántica
– Liderada por Tim Berners-Lee del W3C

• Misión  “turning existing web content into
machine-readable content“
170

La Pila de la Web Semántica
• La Web Semántica está compuesta de:
– XML, sintaxis para documentos estructurados
– XML Schema, restringe la estructura de
documentos XML
– RDF es un modelo de datos que hace referencia
a objetos y sus relaciones
– RDF Schema, vocabulario para definir
propiedades y clases de recursos RDF
– OWL, añade más vocabulario que RDFS,
relaciones entre clases, cardinalidad, igualdad …

171

RDF: Recurso, Propiedad y Valor
• RDF identifica conceptos usando identificadores Web (URIs), y
describe recursos con propiedades y valores de las mismas
• Definiciones:
– Un Recurso es cualquier cosa que puede tener una URI, como por
ejemplo "http://www.w3schools.com/RDF"
– Una Propiedad es un Recurso que tiene un nombre, como “autor" o
“páginaweb"
– Un Valor de propiedad es el valor de una Propiedad, tal como “Diego
Ipiña" o "http://www.w3schools.com" (un valor de propiedad puede
corresponder a un recurso)

172

Resource Description Framework
(RDF)
• Un grafo RDF crea una web de conceptos distribuidos
–
–
–
–

Realiza aserciones sobre relaciones lógicas entre entidades
La información en RDF puede ligarse con grafos en otros lugares
Mediante software se pueden realizar inferencias
Existen lenguajes de consulta sobre triple stores como SPARQL

• Mediante RDF hacemos que la información sea procesable
por máquinas
– Agentes software pueden guardar, intercambiar y utilizar metadatos
sobre recursos en la web

• Ontología  jerarquía de términos a utilizar en etiquetado de
recursos  formalización de los metadatos de un domino/s
173

Formatos de Serialización RDF
•

Formato RDF/XML:

1: <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
2:
xmlns:dc="http://purl.org/dc/elements/1.1/"
3:
xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos/"
4:
xmlns:edu="http://www.example.org/">
5:
<rdf:Description rdf:about="http://www.deusto.es">
6:
<geo:lat>43.270737</geo:lat>
7:
<geo:long>-2.939637</geo:long>
8:
<edu:hasFaculty>
9:
<rdf:Bag>
10:
<rdf:li rdf:resource="http://www.eside.deusto.es" dc:title="Facultad de Ingeniería"/>
11:
<rdf:li rdf:resource="http://www.lacomercial.deusto.es" dc:title="Facultad de Empresariales"/>
12:
</rdf:Bag>
13:
</edu:hasFaculty>
14:
</rdf:Description>
15: </rdf:RDF>

•

Formato: N3/Turtle:
1:
2:
3:
4:
5:
6:
7:

@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix dc: <http://purl.org/dc/elements/1.1/> .
@prefix geo: <http://www. w3.org/2003/01/geo/wgs84_pos#> .
@prefix edu: <http://www.example.org/> .
<http://www.deusto.es> geo:lat "43.270737" ; geo:long "-2.939637" .
<http://www.eside.deusto.es> dc:title “Facultad de Ingeniería" .
<http://www.deusto.es> edu:hasFaculty <http://www.eside.deusto.es> .

174

Ejemplo de Grafo RDF
• Generador de grafos RFD: http://www.w3.org/RDF/Validator/
• Conversor entre formatos RDF:
http://www.mindswap.org/2002/rdfconvert/

175

¿Qué es una Ontología?
• Una ontología define conceptos de un dominio y relaciones
entre ellos
• Los bloques básicos que componen el diseño de una ontología
son:
– clases o conceptos
– propiedades de cada concepto describiendo varias características y
atributos del concepto
– restricciones sobre las propiedades

• Una ontología junto con las instancias de sus clases
individuales constituyen un knowledge base

176

Características del Ontology Web
Language (OWL)
• Una ontología difiere de un esquema XML en que es una
representación de conocimiento, no un formato de mensaje
• La principal ventaja de una ontología escrita en OWL es que
hay disponibles herramientas que pueden razonar sobre ella
• La sintaxis de intercambio de información en OWL es
normalmente RDF/XML.
• OWL es una extensión del vocabulario de RDF
• Las ontologías Web son distribuidas
• Pueden ser importadas y extendidas para crear ontologías
derivadas
• Se pueden alinear unas ontologías con otras
177

Ejemplo OWL Ontology Reasoning
•

Supongamos el siguiente modelo RDF en N3:
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
<http://www.ipina.org/> foaf:author
<http://www.ipina.org/osgi/> .
<http://www.deusto.es/dipina/> foaf:author
<http://www.deusto.es/dipina/ajax/> .
<http://www.eside.deusto.es/dipina/> foaf:author
<http://paginaspesonales.deusto.es/dipina/> .

•

Aunque pertenecen al mismo autor, no están relacionadas entre ellas, con la
ayuda de OWL podemos mapear estas URIs
@prefix owl: <http://www.w3.org/2002/07/owl#> .
<http://www.deusto.es/dipina/> owl:sameAs
<http://www.ipina.org/> .
<http://www.eside.deusto.es/dipina/> owl:sameAs
<http://www.ipina.org/> .

•

Si mezclamos ambos modelos y ejecutamos un razonador podríamos responder a
“dime todo lo que ha escrito “<http://www.ipina.org>”:
<http://www.ipina.org/osgi/>,<http://www.deusto.es/dipina/aja
x/> y <http://paginaspesonales.deusto.es/dipina/>
178

SPARQL
• SPARQL (http://www.w3.org/TR/rdf-sparql-query/) permite la
consulta de grafos RDF a través de un lenguaje sencillo
• SPARQL es idóneo para extraer y consultar información
mantenida por aplicaciones, servicios o repositorios ad-hoc de
terceras partes expresados en RDF
• Consta de 3 elementos:
– Lenguaje de consultas.
– Mecanismo para transmitir una consulta a un servicio de
procesamiento de consultas remoto
– Formato XML en el que devolver los resultados

179

Ejemplo SPARQL
PREFIX table: <http://www.daml.org/2003/01/periodictable/PeriodicTable#>
SELECT ?symbol ?number
FROM <http://www.daml.org/2003/01/periodictable/PeriodicTable#>
WHERE
{
{
?element table:symbol ?symbol;
table:atomicNumber ?number;
table:group table:group_17.
OPTIONAL { ?element table:color ?color. }
}
UNION
{
?element table:symbol ?symbol;
table:atomicNumber ?number;
table:group table:group_18.
}
}
ORDER BY DESC(?number)
LIMIT 10
OFFSET 10
180

Metadatos empotrados
• Necesitamos que nuestros datos estén
preparados para responder adecuadamente a las
preguntas de los navegadores y agentes
software
– “Embedded metadata” son datos sobre datos
empotrados en una página web

• Tres opciones principales:
– RDFa – sistema complejo conectado a XHTML
– Microformats – ampliamente usado y apollado,
usan etiquetas XHTML antiguas
<a href="http://jane-blog.example.org/"
rel="sweetheart date met">Jane</a>

– Microdata – bastante nuevo, soportado por los
buscadores, nivel de complejidad intermedio

• ¡¡Todas juntas nos ayudarán a alcanzar la visión
de una web con más significado, pero todavía
comprensible tanto a humanos como
181
máquinas!!

Internet del Futuro: Internet de las Cosas, Computación en la Nube y la Web de Datos

Internet del Futuro: Internet de las Cosas, Computación en la Nube y la Web de Datos

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to Internet del Futuro: Internet de las Cosas, Computación en la Nube y la Web de Datos

Similar to Internet del Futuro: Internet de las Cosas, Computación en la Nube y la Web de Datos (20)

More from Diego López-de-Ipiña González-de-Artaza

More from Diego López-de-Ipiña González-de-Artaza (20)

Recently uploaded

Recently uploaded (17)

Internet del Futuro: Internet de las Cosas, Computación en la Nube y la Web de Datos