Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 5 - 02-07-2011

808 views
755 views

Published on

Slide da disciplina de Introdução aos Padrões Web e Tecnologias para o Ambiente Digital, ministrada pelo professor Thiago Prado Campos - Aula 05 - 02/07/2011

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
808
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Thiago Prado de Campos - http://www.thiagotpc.com
  • Thiago Prado de Campos - www.thiagotpc.com
  • Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 5 - 02-07-2011

    1. 1. Introdução aos Padrões Web e Tecnologias para o Ambiente Digital Aula 5 2/julho/2011 Thiago Prado de Campos
    2. 2. Conteúdo Programático <ul><li>Redes Sociais </li></ul><ul><li>Exemplos </li></ul><ul><ul><li>Youtube, Vimeo, Slideshare, Scribd </li></ul></ul><ul><ul><li>Flickr, Picasa </li></ul></ul><ul><ul><li>Delicious </li></ul></ul><ul><ul><li>Facebook, Google+ </li></ul></ul><ul><ul><li>LinkedIn, Twitter </li></ul></ul>
    3. 3. REDES SOCIAIS <ul><li>Introdução aos Padrões Web e Tecnologias para Ambiente Digital </li></ul>
    4. 4. Redes Sociais <ul><li>São sites onde conteúdo (textos, imagens, vídeos, arquivos) é em geral criado e mantido pelos próprios usuários. </li></ul><ul><li>Por usuários entende-se pessoas e empresas não detentoras da autoria do próprio site. </li></ul><ul><li>Os usuários formam redes de relacionamento através de recursos proporcionados pelo site, como grupos, comunidades, círculos, página, mural, etc. </li></ul>
    5. 5. Redes Sociais <ul><li>Existe muito mais teoria que envolve filosofia, marketing e até matemática para definir uma rede social, mas não é escopo desta disciplina. </li></ul><ul><li>Exemplos: </li></ul><ul><ul><li>Orkut, Facebook, QZone, Google+, ... </li></ul></ul><ul><ul><li>Picasa, Flickr, Youtube, ... </li></ul></ul><ul><ul><li>http://en.wikipedia.org/wiki/List_of_social_networking_websites </li></ul></ul>
    6. 6. O que as redes costumam oferecer? <ul><li>Conteúdo (notícias, artigos, imagens, vídeos, stream, arquivos); </li></ul><ul><li>Comunicação (mensagens, mural, chat, e-mail, hangout) </li></ul><ul><li>Serviços (cursos, árvore genealógica, citações, hospedagem, agregador, etc.); </li></ul><ul><li>Diversão (jogos, etc.) </li></ul><ul><li>Conexão entre Pessoas (comunidades, grupos, círculos, amizades, seguidores, etc.) </li></ul>
    7. 7. Como posso usar? <ul><li>Embutindo conteúdo </li></ul><ul><ul><li>Inserindo no seu site código HTML que remete a conteúdo existente na rede social. </li></ul></ul><ul><ul><ul><li>Embed de áudio, vídeo, imagens, etc. </li></ul></ul></ul><ul><li>Acessando APIs </li></ul><ul><ul><li>Utilizando de javascript ou programação servidor para consultar e inserir conteúdo no seu próprio site; </li></ul></ul><ul><ul><ul><li>Exibindo quem curte uma página, quem segue alguém, etc. </li></ul></ul></ul><ul><li>Ancorando ações </li></ul><ul><ul><li>Criando hiperlinks ou scripts que acionam recursos ou inserem conteúdos nas redes sociais. </li></ul></ul><ul><ul><ul><li>Curtir, +1, Comentários </li></ul></ul></ul>
    8. 8. EXEMPLOS
    9. 9. Youtube <ul><li>Vídeos, Comentários, Ratings </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><ul><li>Embute no seu site um video do Youtube com o player básico fornecido pelo próprio site; </li></ul></ul></ul><ul><ul><ul><ul><li>http://code.google.com/intl/pt-BR/apis/youtube/player_parameters.html </li></ul></ul></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>Data – permite executar as principais operações de um usuário comum no site; </li></ul></ul></ul><ul><ul><ul><li>Player – permite controlar o player de maneira customizada. </li></ul></ul></ul><ul><ul><ul><li>http://code.google.com/intl/pt-BR/apis/youtube/getting_started.html </li></ul></ul></ul><ul><ul><ul><li>http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed </li></ul></ul></ul>
    10. 10. Vimeo <ul><li>Vídeos, Galerias de Vídeos, Comentários, etc. </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>http://vimeo.com/api </li></ul></ul></ul>
    11. 11. Picasa <ul><li>Fotos, Álbuns </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>http://code.google.com/intl/pt-BR/apis/picasaweb/overview.html </li></ul></ul></ul>
    12. 12. Flickr <ul><li>Fotos, Álbuns </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>http://www.flickr.com/services/api/ </li></ul></ul></ul><ul><ul><ul><li>http://www.flickr.com/services/developer/ </li></ul></ul></ul><ul><ul><ul><li>http://code.flickr.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.flickr.com/services/ </li></ul></ul></ul>
    13. 13. Slideshare <ul><li>Apresentações </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>Consultar e fazer upload de apresentações e informaçõe sobre usuários; </li></ul></ul></ul><ul><ul><ul><li>Controlar o player </li></ul></ul></ul><ul><ul><ul><ul><li>http://www.slideshare.net/developers/playerapi/demo </li></ul></ul></ul></ul><ul><ul><ul><li>http://www.slideshare.net/developers </li></ul></ul></ul>
    14. 14. Scribd <ul><li>Documentos PDF </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>http://pt.scribd.com/developers </li></ul></ul></ul>
    15. 15. Facebook <ul><li>A maior rede social do mundo, com cerca de 600 milhões de usuários. </li></ul><ul><ul><li>https://developers.facebook.com/ </li></ul></ul><ul><ul><li>https://developers.facebook.com/docs/guides/web/ </li></ul></ul><ul><li>Perfil x Página </li></ul><ul><ul><li>https://www.facebook.com/help/?faq=217671661585622 </li></ul></ul><ul><li>Botão “Curtir” </li></ul><ul><li>Plugin de Comentários no Wordpress </li></ul>
    16. 16. Google+ <ul><li>Botão +1 </li></ul><ul><ul><li>http://www.google.com/webmasters/+1/button/ </li></ul></ul><ul><ul><li>http://code.google.com/intl/pt-BR/apis/+1button/ </li></ul></ul>
    17. 17. LinkedIn <ul><li>Currículo, Rede Profissional </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><ul><li>Currículo, Rede de Empresa </li></ul></ul></ul><ul><ul><li>Compartilhar Conteúdo </li></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>http://developer.linkedin.com/index.jspa </li></ul></ul></ul>
    18. 18. Twitter <ul><li>Micropost </li></ul><ul><ul><li>Seguir </li></ul></ul><ul><ul><ul><li>http://twitter.com/about/resources/followbutton </li></ul></ul></ul><ul><ul><li>Twettar </li></ul></ul><ul><ul><ul><li>http://dev.twitter.com/pages/tweet_button </li></ul></ul></ul><ul><ul><li>APIs </li></ul></ul><ul><ul><ul><li>http://dev.twitter.com/ </li></ul></ul></ul><ul><ul><ul><li>http://twitter.com/status/user_timeline/thiagotpc.json?count=5 </li></ul></ul></ul><ul><ul><ul><li>http://tweetauditor.in/ </li></ul></ul></ul>
    19. 19. Delicious <ul><li>URLs </li></ul><ul><ul><li>Incorporar </li></ul></ul><ul><ul><ul><li>Salvar no Delicious </li></ul></ul></ul><ul><ul><ul><li>Últimas urls </li></ul></ul></ul><ul><ul><ul><li>Perfil </li></ul></ul></ul><ul><ul><ul><li>http://www.delicious.com/help/tools </li></ul></ul></ul><ul><li>APIs </li></ul><ul><ul><li>http://www.delicious.com/help/api </li></ul></ul>
    20. 20. APIs de Produtos Google <ul><li>http://code.google.com/intl/pt-BR/more/table </li></ul>
    21. 21. Outras APIs na Web <ul><li>http://www.programmableweb.com/apis </li></ul>
    22. 22. Exercício <ul><li>Crie uma página HTML sobre a Copa América e incorpore conteúdos de redes sociais sobre o tema. </li></ul><ul><ul><li>Um vídeo do Youtube ou Vimeo </li></ul></ul><ul><ul><li>Foto ou Album do Flickr ou Picasa </li></ul></ul><ul><ul><li>Link para Curtir ou +1 na página </li></ul></ul><ul><ul><li>Botão para Twettar! </li></ul></ul><ul><li>Envie para [email_address] </li></ul>

    ×