Andreas Creten is the lead developer of My Name is E, a social networking service. E uses open web standards like PHP, MySQL, jQuery, and open protocols like HTTP, SMS and Bluetooth. E's architecture includes web servers, static storage, and a sync service for sharing social network information across devices. Creten emphasizes using open standards to promote competition and data portability.

1. My Name is E
& Open Standards
Wednesday 27 May 2009
Noordelijke Hogeschool Leeuwarden Andreas Creten

2. Hi, I’m Andreas

3. Lead Development at

4. My Name is E
& Open Standards
Wednesday 27 May 2009
Noordelijke Hogeschool Leeuwarden Andreas Creten

11. Social Networks

13. Online Service

18. Card sharing on
any mobile phone.

19. All you need is
an internet
connection.

20. E for iPhone

23. Available for free.

24. Connector

28. Status
Launched last month.
Winners of the Next
Web Award.

29. E’s Architecture.
PHP 5
MySQL
jQuery
Pongo
Artoo

30. E’s Architecture.
PHP 5
MySQL
jQuery
Pongo
Artoo

31. Pongo
Model-View-
Controller Framework

32. Artoo
Sync Service app for
pushing and pulling
social network
contact information.

33. Artoo

34. Webserver 1 Static Storage
Amazon EC2 Amazon S3
E • Mobile 1
E • Desktop 1 Profile images
Artoo UI customization images
r
Load balance
2
Am azon EC
Webserver 2 Database Server EBS Volume
Amazon EC2 Amazon EC2 Amazon EBS
E • Mobile 2
E • Desktop 2 Database EBS Access MySQL Data
Artoo MySQL
Server Setup

35. E is about bridging
the gap between
the virtual and
physical.

36. Sharing cards is
the first step.

37. E knows who you
are and what’s
around you.

38. You decide how you
connect and what
you share.

41. My Name is E
& Open Standards
Wednesday 27 May 2009
Noordelijke Hogeschool Leeuwarden Andreas Creten

42. Do you use open
standards?

44. IEEE 802.11 (WiFi) vCal
International Mobile Telecommunications-2000 (IMT-2000)
Bluetooth
Short Message Service (SMS)
JPEG
MPEG-4 Part 14,
ISO/IEC 14496-14:2003 (MP4)
MPEG-1 Audio Layer 3 (MP3)
SQLite, TXT
vCard, etc
HTTP, CSS, JS, etc
SMTP, IMAP
Image credits: Chris Messina

45. “Standards change competition for a
market to competition within a market”
Hall Varian - Information Rules, 1998

46. Data Portability

49. RSS
Really Simple Syndication

50. APML
Attention Profile Markup Language

52. RDF
Resource Description Framework

53. <rdf:RDF
xmlns:rdf=quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#quot;
xmlns:foaf=quot;http://xmlns.com/foaf/0.1/quot;
xmlns:dc=quot;http://purl.org/dc/elements/1.1/quot;>
<rdf:Description rdf:about=quot;http://en.wikipedia.org/wiki/
Tony_Bennquot;>
<dc:title>Tony Benn</dc:title>
<dc:publisher>Wikipedia</dc:publisher>
<foaf:primaryTopic>
<foaf:Person>
<foaf:name>Tony Benn</foaf:name>
</foaf:Person>
</foaf:primaryTopic>
</rdf:Description>
</rdf:RDF>

54. XMPP
Extensible Messaging and Presence Protocol

55. OpenSocial
opensocial.org - OpenSocial Foundation

56. A common API for social
applications across
multiple websites

57. Image credits: Patrick Chanezon, Kevin Marks & Christian Schalk

58. Image credits: Patrick Chanezon, Kevin Marks & Christian Schalk

59. Image credits: Patrick Chanezon, Kevin Marks & Christian Schalk

60. Image credits: Patrick Chanezon, Kevin Marks & Christian Schalk

61. OpenSocial applications

62. Based on standards:
HTML, Javascript, REST, oAuth

63. Access to:
People, friends, Activities, ...

65. REST endpoints:
/people/{uid}/@friends
/people/{uid}/@self
/activities/{uid}/@friends
/activities/{uid}/@self

66. Additional parameters:
format={format}
format desired - options: atom, json (default)
fields={field+}
List of fields to include in request
count={number}
Set number of items/page
startPage={startPage}
Select a page from a paged collection

67. OpenSocial containers

68. Microformats
microformats.org

69. How do we extract content?

70. Travel Network User Experience | sabreux.com 16

71. <h1>Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p>
<strong>overage rating:</strong>
<img src=quot;5stars.jpgquot; alt=quot;5 starsquot; />
</p>
<img src=quot;canon5d.jpgquot; alt=quot;camera bodyquot; />
<p>The 12.8 megapixel Canon EOS 5d ... alloy body.</p>
<ul>
<li>35.8 x 23.9-millimeter CMOS sensor</li>
<li>3 frame-per-second burst</li>
<li>0.2 second start-up time operation</li>
</ul>

72. Title <h1>Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p>
<strong>overage rating:</strong>
<img src=quot;5stars.jpgquot; alt=quot;5 starsquot; />
</p>
<img src=quot;canon5d.jpgquot; alt=quot;camera bodyquot; />
<p>The 12.8 megapixel Canon EOS 5d ... alloy body.</p>
<ul>
<li>35.8 x 23.9-millimeter CMOS sensor</li>
<li>3 frame-per-second burst</li>
<li>0.2 second start-up time operation</li>
</ul>

73. <h1>Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p>
<strong>overage rating:</strong>
<img src=quot;5stars.jpgquot; alt=quot;5 starsquot; />
</p>
<img src=quot;canon5d.jpgquot; alt=quot;camera bodyquot; />
Paragraph <p>The 12.8 megapixel Canon EOS 5d ... alloy body.</p>
<ul>
<li>35.8 x 23.9-millimeter CMOS sensor</li>
<li>3 frame-per-second burst</li>
<li>0.2 second start-up time operation</li>
</ul>

74. <h1>Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p>
<strong>overage rating:</strong>
<img src=quot;5stars.jpgquot; alt=quot;5 starsquot; />
</p>
<img src=quot;canon5d.jpgquot; alt=quot;camera bodyquot; />
<p>The 12.8 megapixel Canon EOS 5d ... alloy body.</p>
<ul>
<li>35.8 x 23.9-millimeter CMOS sensor</li>
List <li>3 frame-per-second burst</li>
<li>0.2 second start-up time operation</li>
</ul>

75. Useless

76. Must be split into:
Title, Rating, Image,
Description, Features

77. <div class=quot;hreviewquot;>
<h1 class=quot;item fnquot;>Canon EOS 5D 12.8 MP Digital SLR Camera</h1>
<p>
<strong>overage rating:</strong>
<span class=quot;ratingquot; title=quot;5quot;>
<img src=quot;5stars.jpgquot; alt=quot;5 starsquot; />
</span>
</p>
<img src=quot;canon5d.jpgquot; alt=quot;camera bodyquot; />
<p class=quot;descriptionquot;>
The 12.8 megapixel Canon EOS 5d ... alloy body.
<ul>
<li>35.8 x 23.9-millimeter CMOS sensor</li>
<li>3 frame-per-second burst</li>
<li>0.2 second start-up time operation</li>
</ul>
</p>
</div>

78. Compound microformats
hReview, hCalendar, hCard,
hListing, hAtom, hResume

79. Element microformats
defining the relation of an
object with the page

80. Demo time: Examples
hCalendar:
http://microformats.org/code/hcalendar/creator
hCard:
http://microformats.org/code/hcard/creator
hReview:
http://microformats.org/code/hreview/creator
hResume:
http://hresume.weblogswork.com/hresumecreator/
hAtom:
http://dichotomize.com/uf/hatom/creator.html

81. Firefox plugin: Operator

82. openid.net - OpenID foundation

83. Images source: http://konstruktors.com/blog/understanding-web/259-how-to-be-your-own-openid-provider-and-use-your-blogs-url-for-identification/

84. oauth.net

86. en
tok
ss
ce
ac

88. oAuthX Flow
Second consumer First consumer Service provider
Request Request Grant
Exchange token Exchange token Exchange token
Passes
Exchange token
Request Grant
Access token Access token
Access Protected
Resources

89. JS-Kit

90. Exchange token
JS-Kit

91. Exchange token
JS-Kit

92. Exchange token
JS-Kit

93. Data Portability
are the tools to make
the internet more like real life

94. We are looking for interns
In Amsterdam And Antwerp

95. Questions?
andreascreten.be
@andreascreten
mynameise.com/andreas