Esta charla tiene por objetivo discutir los patrones de diseño de la web 2.0 y las nuevas tendencias de la web semántica. Los 12 patrones que dirigen la presentación son: Information sharing, User-centered design, MVC architecture, Participation & collaboration, Social networking, Search & recommendation engines, Folksonomy, Community & collective intelligence, Inter-operability & data portability, Rich user experience, Separation of content and presentation, Web as a platform (ubiquity). Junto con esto se presentan brevemente algunos frameworks y módulos de Python que permiten el desarrollo de este tipo de aplicaciones web. Asimismo, se muestran ejemplos de consumo de APIs de servicios web populares (JSON, XML, feeds y HTML scraping) y un ejemplo de procesamiento de contenido a través de herramientas semánticas. More info at: http://ar.pycon.org/2009/conference/schedule/event/30/ Download original slideshow in PDF format at: http://ar.pycon.org/2009/conference/schedule/event/30/ Licensing and Acknowledgements at: http://ar.pycon.org/2009/conference/schedule/event/30/ Python en la Web Semántica by Santiago Andrés Coffey is licensed under a Creative Commons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 Argentina License. http://creativecommons.org/licenses/by-nc-sa/2.5/ar/

1. en la Web Semántica
Santiago Coffey - PyCon 2009 - Buenos Aires

2. WEB

3. WEB

4. Global Internet traffic estimates (TB/month)
9.000.000
7.500.000
6.000.000
4.500.000
3.000.000
1.500.000
0
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008
Source: Cisco Visual Networking Index Forecast. http://www.cisco.com/go/vni

5. LA MUERTE DE LA WEB 2.0

6. QUÉ fue LA
ES
WEB
2.0

7. La web 2.0 es la
segunda generación del
desarrollo y diseño web

8. ¿Cuál es la receta para esa nueva forma
de hacer la web?

10. 12 patrones

11. PATTERN #1 
INFORMATION
SHARING

12. 1.0 2.0
FUENTE FUENTE Y SUMIDERO
DE INFORMACIÓN DE INFORMACIÓN

13. WEB SITES
WEB APPLICATIONS
WEB SERVICES
3.0 SEMANTIC WEB
USERS

14. PATTERN #2 
USER-CENTERED
DESIGN

15. WEB 1.0 WEB 2.0
CENTRADO EN RECURSOS CENTRADO EN USUARIOS

17. http email
socket xmlrpc xml
cgi PYTHON 3.0 ssl
BATTERIES INCLUDED
smtpd
hashlib
urllib smtplib json
wsgiref codecs html

18. Babel lxml Paste Beaker
boto NumPy nltk WebHelpers
PIL
PYTHON MODULES
Twisted SWISS ARMY KNIFE PyYAML
FormEncode
SQLAlchemy
BeautifulSoup feedparser
python-memcached pycrypto

19. PATTERN #3 
MODEL-VIEW-
CONTROLLER
ARCHITECTURE

20. HTTP://WWW.E-XAMPLE.COM http://examp.le
BROWSER
 DIRECTORY
 DIRECTORY WEB SERVER
 DIRECTORY
 JPG ROUTE DISPATCHER
 GIF
CONTROLLER
 JS
 HTML
 HTML MODEL VIEW
 HTML
 HTML DATA
BASE
SITIO WEB: REPOSITORIO APLICACIÓN WEB:
DE PÁGINAS ESTÁTICAS MULTI-CAPA, CON ESTADO

21. Python Web Frameworks
• Django • Zope
• Pylons • Plone
• TurboGears • MoinMoin
• Google App • Python Paste
Engine
• CherryPy

22. Alternative DBMS
• memcachedb • Key-value
storage
• HBase + Thrift
• No joins, non-
• flat files (CSV)
transactional
• BerkeleyDB
• Scalable,
• Map Reduce fault-tolerant

23. PATTERN #4 
PARTICIPATION &
COLLABORATION

24. WEB 1.0 WEB 2.0
PUBLICACIÓN INDIVIDUAL EDICIÓN COLABORATIVA

26. PATTERN #5 
SOCIAL
NETWORKING

27. 1.0 2.0
RED DE COMPUTADORAS RED DE AMIGOS

28. IDEA SIMPLE
GRANDES
RESULTADOS

30. PATTERN #6 
SEARCH &
RECOMMENDATION
ENGINES

31. WEB 1.0: NAVEGAR TODO PARA DESCUBRIR
WEB 2.0: TEORÍA DEL ICEBERG
(SÓLO SE VE EL 10%)

33. ¿Qué hace una web semántica?
• Integración (aggregation)
• Definición de ontologías
• Análisis semántico
• Agregado de valor (filtrado,
asociación, recomendación, etc.)

34. ¿Cuál es la misión
de la web semántica?

35. ¿De qué habla (cuál es el significado)
el contenido de un determinado
documento HTML?
¿Cuál es el contenido
relevante de un determinado
documento HTML?
¿En qué idioma está un
texto determinado?

36. ¿Qué palabras son equivalentes
entre sí? (stemming)
¿Se pueden inferir tags
automáticamente a partir
de un texto?
¿Cómo se pueden eliminar palabras
comunes como artículos y
preposiciones (stop words)?

37. ¿Cuál es la estructura sintáctica
de una oración o proposición?
(part of speech)
¿Cómo se puede eliminar la
ambigüedad entre los distintos
significados de una misma palabra?
¿Es posible agregar
información del contexto
eficientemente?

38. ¿Cómo se puede mejorar la relación
señal-ruido (signal to noise ratio) de la
información que consume un usuario?
¿Cómo se pueden identificar
digramas en un texto?
¿Cuántas y cuáles son las categorías
apropiadas para clasificar contenidos
en una determinada ontología?

40. PATTERN #7 
FOLKSONOMY

41. WEB 1.0 WEB 2.0
TAXONOMY FOLKSONOMY
(HIERARCHICAL CLASSIFICATION) (COLLABORATIVE TAGGING)

43. PATTERN #8 
COMMUNITY &
COLLECTIVE
INTELLIGENCE

44. WEB 1.0 WEB 2.0
CONSTRUIR PORTALES CONSTRUIR COMUNIDADES

46. PATTERN #9 
INTER-OPERABILITY &
DATA PORTABILITY

47. RSS
Atom
{json}
Widgets
JSON
<xml/>
RDF
 XML-RPC
WEB CRAWLERS / SPIDERS / BOTS WEB SYNDICATION, WIDGETS,
(HTML SCRAPING) OPEN APIs, AGGREGATION

49. Ejemplo: Atom feed
from feedparser import parse
url = 'http://blog.ianbicking.org/'
'feed/atom/'
feed = parse(url)
titles = [i['title'] for i in
feed['entries']]
print 'n'.join(titles)

50. Ejemplo: Twitter API
from urllib2 import urlopen
from simplejson import loads
url = 'http://twitter.com/statuses/'
'user_timeline/JohnCLeese.json'
raw_data = urlopen(url).read()
tweets = [i['text'] for i in
loads(raw_data)]
print 'n'.join(tweets)

51. Ejemplo: GData API
from gdata.service.youtube import
YoutubeService
url = 'http://gdata.youtube.com/feeds/'
'api/users/MontyPython/uploads'
client = YouTubeService()
feed = client.GetYouTubeVideoFeed(url)
titles = [i.title.text for i in
feed.entry]
print 'n'.join(titles)

52. Ejemplo: HTML Scraping
from urllib2 import urlopen
from lxml.html import fromstring
url = ...
html = urlopen(url).read()
root = fromstring(html)
• Demo con Microformats en LinkedIn

53. PATTERN #10 
RICH USER
EXPERIENCE

54. CLIENT-SIDE SCRIPTING CON
INTERACCIÓN POR FORMULARIOS
INTERACCIÓN ASINCRÓNICA
(CON RECARGA DE PÁGINA)
(e.g.: AJAX)

55. Web OS?

56. PATTERN #11 
SEPARATION OF
CONTENT AND
PRESENTATION

57. <HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
 STRUCTURE &
CONTENT
<BODY BGCOLOR="YELLOW"> XHTML
<SCRIPT>window.status="Hello!"</SCRIPT>
+
<TABLE WIDTH="640">
<TR><TD>

<CENTER>
<MARQUEE>Welcome to my homepage!</MARQUEE>
PRESENTATION
<IMG SRC="animation.gif" WIDTH="180"
HEIGHT="31" BORDER="1">
</CENTER>
CSS
+
<P><FONT COLOR="blue">This is a <BR>
<FONT FACE="Arial"><U>fake link</U>!
</FONT></P>
</TD>
<TD ALIGN="RIGHT">
<P>Sign my <A HREF="/cgi-bin/sign"
TARGET="_parent">guestbook</A></P>
<BLINK>Under <B>construction</B>!</BLINK>
 CLIENT-SIDE
SCRIPTING
JS
</TD></TR>
</TABLE>
</BODY>
</HTML>
STRUCTURE & CONTENT
CLUTTERED HTML
≠ PRESENTATION

59. PATTERN #12 
WEB AS A
PLATFORM
(UBIQUITY)

60. 
WEB
TV

YOUR SYSTEM
IS THE
PLATFORM


THE WEB

IS THE
PLATFORM
PROPRIETARY SPECIFICATIONS WEB STANDARDS
PLATFORM DEPENDENCE DEVICE INDEPENDENCE
BROWSER WARS CROSS-PLATFORM DESIGN

61. OMNIPRESENCIA (UBIQUITY)
THE WEB IS WATCHING YOU!

62. • Robot no exactamente
electro-mecánico
• Sensores:
Humanos-Máquinas
• Actuadores:
Humanos-Máquinas
• Entorno: Mundo
• AI: Webapps +
Semantic Web + ...

63. • Procesa datos y
responde a estímulos
• ¿Es autónomo?
• ¿Es consciente?
• Es tolerante a fallas
• Es “inteligente”
• Aprende
• Evoluciona
© John W Liberto

64. Suena ilusorio ¿no?
¿Pero podíamos imaginar hace 20 años
una web como la que hoy conocemos?
Además, ya hay aplicaciones...

66. Resumen: Los 12 patrones
• Information sharing • Folksonomy
• User-centered design • Community & collective
intelligence
• MVC Architecture
• Inter-operability & Data
• Participation & portability
collaboration
• Rich User Experience
• Social networking
• Content ≠ Presentation
• Search & recommendation
engines • Web as a Platform

67. Conclusiones
• Web como AI (como un robot)
• Misión de la web semántica:
Agregar valor a la información
• ¿Tecnología? No, patrones

68. ¡Gracias!
santiago.coffey@popego.com
http://twitter.com/scoffey
http://scoffey.popego.com