The document discusses the development of web applications using APIs and distributed data. It explains how web applications are built by combining data, manipulation, and presentation layers. APIs provide access to data from external sources, and technologies like YQL and Yahoo services can be used to retrieve and format data. Sharing tools and data can help improve applications and reach more users.

1. desenvolvimento+web
Bruno Atrib Zanchet
@bzanchet

2. Meu nome é Bruno
Eu trabalho com a web

4. A web talvez sirva pra
vocês também

5. http://en.wikipedia.org/wiki/File:WorldWideWebAroundWikipedia.png

6. Está ficando cada vez
mais fácil

7. O segredo é construir
usando partes que já
funcionem

8. http://www.flickr.com/photos/world_waif/2176869173/

9. (e essas partes estão
disponíveis aí fora)

10. Aplicação

15. Dados
+
Manipulação
+
Apresentação

16. Simples, huh?

17. http://www.flickr.com/photos/danquah/3100665365/
Paixão e
colaboração

18. chapter 1.
once upon a time,
in a data-full web...

19. A web não se trata de
sites e códigos

21. “The World-Wide Web (W3) was
developed to be a pool of human
knowledge, which would allow
collaborators in remote sites to share
their ideas and all aspect”

22. A web são dados

23. Dados?

24. Web 1.0

25. “Web 1.0 is a retronym which refers to
the state of the World Wide Web, and any
website design style used before the
advent of the Web 2.0 phenomenon”

27. Conteúdo editorial

32. Web 2.0

33. “A Web 2.0 site allows its users to interact
with other users or to change website
content, in contrast to non-interactive
websites where users are limited to the
passive viewing of information”

34. Conteúdo do usuário

39. Organização?

40. Vovô

41. Vovô viu a uva

42. Vovô tagueou a uva

44. Editorial
+
Usuário
+
Organização

47. Suficiente?

50. ...

51. Como acessar esses
dados?

52. chapter 2.
in a land of abstractions...

53. API

54. Application programing
interface

55. API é o balcão da
padaria

57. API

58. API Aplicação

59. Ei, 300g de
mortadela, por
favor!
API Aplicação

60. http://www.flickr.com/photos/koluso/3878396868/

61. Aqui está!
API Aplicação

62. Mas quem faz o
sanduíche é você

63. http://www.flickr.com/photos/eli_k_hayasaka/3363169377/

64. Formatar a saída

65. http://www.flickr.com/photos/dwz/65456745/

66. <?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng" yahoo:count="10" yahoo:created="2009-11-13T03:05:51Z" yahoo:lang="en-US"
yahoo:updated="2009-11-13T03:05:51Z" yahoo:uri="http://query.yahooapis.com/v1/yql?q=select+*+from+flickr.photos.search+where+text
%3D%22Cat%22+limit+10">
<diagnostics>
<publiclyCallable>true</publiclyCallable>
<url execution-time="166"><![CDATA[http://api.flickr.com/services/rest/?
method=flickr.photos.search&text=Cat&page=1&per_page=10]]></url>
<user-time>169</user-time>
<service-time>166</service-time>
<build-version>3694</build-version>
</diagnostics>
<results>
<photo farm="3" id="4099857124" isfamily="0" isfriend="0" ispublic="1" owner="71311046@N00" secret="8407d3b409"
server="2572" title="sherlock"/>
<photo farm="3" id="4099098491" isfamily="0" isfriend="0" ispublic="1" owner="31410040@N06" secret="5967c7ff68"
server="2521" title=" "/>
<photo farm="3" id="4099099555" isfamily="0" isfriend="0" ispublic="1" owner="71311046@N00" secret="06faed8b3c"
server="2425" title="sherlock"/>
<photo farm="3" id="4099096693" isfamily="0" isfriend="0" ispublic="1" owner="24916619@N00" secret="b262eb4e22"
server="2605" title="cat by lomo"/>
<photo farm="3" id="4099853922" isfamily="0" isfriend="0" ispublic="1" owner="71311046@N00" secret="922c467162"
server="2762" title="sherlock"/>
<photo farm="3" id="4099854346" isfamily="0" isfriend="0" ispublic="1" owner="31410040@N06" secret="5c30c33255"
server="2740" title=" "/>
<photo farm="3" id="4099097217" isfamily="0" isfriend="0" ispublic="1" owner="11803537@N00" secret="341c4bc76a"
server="2728" title="DSC_2145"/>
<photo farm="3" id="4099847640" isfamily="0" isfriend="0" ispublic="1" owner="7339712@N08" secret="293a1efa9d"
server="2702" title="Ari Chicken Wings"/>
<photo farm="3" id="4099842272" isfamily="0" isfriend="0" ispublic="1" owner="21561428@N03" secret="a7dd912414"
server="2524" title="Can I Have a Shower?"/>
<photo farm="3" id="4099083751" isfamily="0" isfriend="0" ispublic="1" owner="43679955@N05" secret="7dd29d534d"
server="2748" title="this is my rug"/>
</results>
</query>

71. (marketing)

72. Yahoo! Query Language

74. dev

75. dev

76. dev

77. dev

78. dev

79. var map = new
YMap(document.getElementById('map'));
…
dev var currentGeoPoint = new
YGeoPoint( _c.Lat, _c.Lon );
map.addMarker(currentGeoPoint);
…
…
if (flickcurl_prepare(fc,
"flickr.photos.geo.correctLocation",
parameters, count)) { … }
…
http://search.yahooapis.com/
ImageSearchService/V1/imageSearch?
appid=YahooDemo&query=Corvette&results=2
http://weather.yahooapis.com/
forecastrss?p=FRXX0076&u=c

80. var map = new
YMap(document.getElementById('map'));
…
dev var currentGeoPoint = new
YGeoPoint( _c.Lat, _c.Lon );
map.addMarker(currentGeoPoint);
…
…
if (flickcurl_prepare(fc,
"flickr.photos.geo.correctLocation",
parameters, count)) { … }
…
http://search.yahooapis.com/
ImageSearchService/V1/imageSearch?
appid=YahooDemo&query=Corvette&results=2
http://weather.yahooapis.com/
forecastrss?p=FRXX0076&u=c

81. var map = new
YMap(document.getElementById('map'));
…
dev var currentGeoPoint = new
YGeoPoint( _c.Lat, _c.Lon );
map.addMarker(currentGeoPoint);
?
…
…
if (flickcurl_prepare(fc,
?
"flickr.photos.geo.correctLocation",
parameters, count)) { … }
…
? http://search.yahooapis.com/
ImageSearchService/V1/imageSearch?
appid=YahooDemo&query=Corvette&results=2
?
http://weather.yahooapis.com/
forecastrss?p=FRXX0076&u=c

82. var map = new
YMap(document.getElementById('map'));
…
dev var currentGeoPoint = new
YGeoPoint( _c.Lat, _c.Lon );
map.addMarker(currentGeoPoint);
…
…
if (flickcurl_prepare(fc,
"flickr.photos.geo.correctLocation",
parameters, count)) { … }
…
http://search.yahooapis.com/
ImageSearchService/V1/imageSearch?
appid=YahooDemo&query=Corvette&results=2
http://weather.yahooapis.com/
forecastrss?p=FRXX0076&u=c

83. dev
YQL

84. dev
YQL

85. dev
YQL

86. dev
select
YQL
desc
show

87. select * from flickr.photos.info where
photo_id in (select id from
flickr.photos.search where woe_id in (select
woeid from geo.places where text='rio de
janeiro, brazil'))

88. select * from flickr.photos.info where
photo_id in (select id from
flickr.photos.search where woe_id in (select
woeid from geo.places where text='rio de
janeiro, brazil'))

89. select * from flickr.photos.info where
photo_id in (select id from
flickr.photos.search where woe_id in (select
woeid from geo.places where text='rio de
janeiro, brazil'))

90. select * from flickr.photos.info where
photo_id in (select id from
flickr.photos.search where woe_id in (select
woeid from geo.places where text='rio de
janeiro, brazil'))

92. http://developer.yahoo.com/yql/console/

93. http://datatables.org/

94. http://meme.yahoo.com/

95. got it?

98. ...

99. chapter 3.
The pain passes, but the
beauty remains...

100. Desenvolvedor Interface
Lógica
Persistência

101. Usuário Interface
Magica!

102. http://www.flickr.com/photos/ameotoko/3705874238/

104. http://developer.yahoo.com/ypatterns/

105. http://developer.yahoo.com/yui/

107. http://developer.yahoo.com/yui/reset/

108. http://developer.yahoo.com/yui/fonts/

109. http://developer.yahoo.com/yui/grids/

110. http://developer.yahoo.com/yui/grids/builder/

111. chapter 4.
Last but not least.

112. Empresas e pessoas estão
descobrindo o poder de
distribuir coisas para o público

113. Distribuir seus produtos - e
manter os ouvidos abertos
é uma ótima forma de
melhorá-los

114. (é o que fazemos no
YDN)

115. Reusar ferramentas de
outras pessoas não é
trapacear

116. Se você tem dados,
exponha uma API;

117. Se você quer dados,
procure por uma;

118. E se fizer alguma coisa,
distribua de graça!

119. (você vai atingir mais pessoas e receber
feedback que nunca imaginaria)

121. (desculpe o cliché)

123. desenvolvimento+web
Bruno Atrib Zanchet
@bzanchet