Aula_1._Introducao_ao_curso.ppt

Tópicos Especiais em Desenvolvimento para Web
Marco A. Gerosa 1 / 52 IME / USP
Introdução ao Desenvolvimento
para Web
MAC0416 e MAC5855
Marco A. Gerosa
gerosa@ime.usp.br

Histórico
• Ted Nelson concebe o hipertexto (1963)
• Douglas Engelbart desenvolve o primeiro sistema de hipertexto
(1966)
• Surgimento da Web – Tim Berners-Lee (CERN - European
Organization for Nuclear Research/Suiça) (1990/1991)
• A CERN anuncia que a Web iria ser aberta e gratuita para todos.
Como o protocolo do Gopher deixou de ser gratuito, ocorreu rápida
migração para tecnologia Web (1993)
• Surgimento do Mosaic – navegador Web (1993)
• Estabelecimento do W3C (World Wide Web Consortium) (1994)
• Netscape 1.0 primeiro browser comercial (Final de 1994)
• O tráfego de Web na rede supera o de outros protocolos, como
Telnet e FTP (1995)
• Lançamento do Microsoft Internet Explorer (1995)
• Liberação do código do Netscape Navigator (1998)
• Estouro da Bolha Dot Com (2001)
• Popularização da banda larga
• Surgimento do termo Web 2.0 (O’Reilly Media) (2003)

História da Web dinâmica
http://royal.pingdom.com/2007/12/07/a-history-of-the-dynamic-web/

Evolução da tecnologia
• Processamento de dados
Sistemas de Informação
Sistemas de comunicação
• Douglas Engelbart [1968] já
previu
• Software hoje é social.

As gigantes estão atentas
“Rapid prototyping”
“Social interactions”

“methods for harvesting the collective intelligence of groups of people”

“Humans are fundamentally social creatures.”

Google

Evolução da Web
• Hoje a Web é a plataforma padrão para execução de sistemas
• Web Estática => Web Dinâmica => Web colaborativa!
• Web 1.0 (read-only) x Web 2.0 (read-write)
• Conteúdo criado por empresas e anunciantes (comunicação
um-para-vários) => Conteúdo gerado, organizado, mesclado,
criticado e atualizado por usuários organizados em
comunidades e redes sociais (comunicação todos-todos)
– Ex: MySpace, Flickr, YouTube, Wikipedia etc. Os sites são plataformas
sem conteúdo que são alimentadas pelos usuários
• Junção de informação, funcionalidade e colaboração
• Wikis, blogs, redes sociais, online games, feeds etc.
• A Web 2.0 não é uma revolução técnica, mas sim na forma
como é encarada por usuários e desenvolvedores.

A Nova Economia da Web (Enterprise 2.0)
• Modelo de negócio leve
• Cenário de competição global
• Rapidez na disseminação de informações
• Potencial de rápida ascensão
• Alta necessidade de escalabilidade
• Baseada em software livre – menor custo e maior velocidade para iniciar um
negócio e implantar uma idéia
• Menor necessidade de investimento (pequena porcentagem do custo para
desenvolver e manter um site se comparado com a década de 90)
• Mercado para itens que não representam sucesso de vendas (grande
quantidade de itens com baixo volume de vendas x pouca quantidade de itens
com alto volume de vendas)
– [Anderson, C. “The long tail: why the future of business os selling less of more. Hyperion, 2006]
• Aumento de exposição de produtos menos conhecidos
• Integração de serviços (Mashups)
• O valor de um site está na sua quantidade de usuários e em seu banco de
dados
• Economia da atenção
– “O problema não é a banda larga das telecomunicações, mas sim a banda larga humana”, Davenport & Beck
em “The attention economy”
– Volume abundante de fontes de informações e tempo limitado
– Necessidade de localizar e filtrar informações rapidamente

A nova Web
• “The new Web is a very different thing. It's a tool for bringing together
the small contributions of millions of people and making them matter.
Silicon Valley consultants call it Web 2.0, as if it were a new version
of some old software. But it's really a revolution. (...) We're looking at
an explosion of productivity and innovation, and it's just getting
started, as millions of minds that would otherwise have drowned in
obscurity get backhauled into the global intellectual economy. ”
– “Time's Person of the Year: You”
http://www.time.com/time/magazine/article/0,9171,1569514,00.html
• A comunidade discute tópicos, constrói ambientes tri-dimensionais,
revisão livros, gravam podcasts, comentas assuntos em blogs,
gravam e compartilham vídeos, colocam tags em produtos,
contribuem para projetos open source etc.
• Os sites se tornam melhores à medida que mais pessoas usam
– Lei de Metcalfe – o valor da rede é proporcional ao quadrado do número de
usuários (http://pt.wikipedia.org/wiki/Lei_de_Metcalfe)
– Exs: eBay, Amazon, redes sociais, sistemas de mensagem
– Massa crítica de utilização

Inteligência Coletiva
• Idéias “inteligentes” e informações úteis podem emergir da
colaboração
• Uso de informações produzidas socialmente direta ou indiretamente
(número de links para uma página, compras similares, votos,
comentários etc.)
• Tagging, filtros colaborativos, sistemas de recomendação, sistemas
de reputação, feeds etc.
• Goldcorp inc., empresa de extração de ouro, liberou suas
informações geológicas e ofereceu prêmios para quem ajudasse a
empresa a usar estas informações para localizar ouro no solo. A
comunidade ajudou a localizar 225 toneladas de ouro, aumentando
em 90x o valor das ações da empresa.
• O algoritmo PageRank da Google, os sistemas de recomendações
da Amazon e do Last.fm, e os sistemas de reputação do eBay e
MercadoLivre, a Wikipedia são produtos da inteligência coletiva
• O livro “Wisdom of crowds” sugere que um grupo grande de
pessoas, não necessariamente especialistas, pode ser mais
inteligente que um pequeno grupo de especialistas.

Exemplos de sistemas da Web 2.0
• Netfix (locadora de filmes)
– Além dos filmes populares, possui uma grande quantidade de itens “long
tail” – possível visto que possui milhões de clientes e não tem restrições
de espaço físico (lojas)
– Uso da inteligência coletiva (sistema de recomendação)
• CraigsList (classificados)
– Anúncios em jornais vem decaindo
– Conecta as necessidades únicas e às vezes incomuns dos usuários
– Filtragem colaborativa para eliminar anúncios indevidos
• del.icio.us (bookmark social)
– Combina tagging, rede social, conteúdo gerado pelo usuário, sistemas
de recomendação e disponibiliza serviços web

Exemplos de sistemas da Web 2.0
Compartilhamento de fotos
Recomendação (o que outros
compraram depois
de ver o produto, produtos
similares)
Tagging
Avaliação do produto
Resenha
Troca de mensagens
Wiki (Amapedia)
Mídia social
Vídeos sendo vistos
Avaliação
Recomendação
Compartilhar em redes sociais
Comentário
Sites com links para o vídeo

Aplicações na Web 2.0
• Busca
• Compartilhamento de conteúdo
• Blogging
• Redes Sociais
• Mídia social
• Mashups
• etc.

Busca
• Estudo nos EUA [CNNMoney, 16 jul 2007]:
– 8 bilhões de busca por mês
– Google (49,5%), Yahoo! (25,1%), Microsoft (13,2%), Ask (5%), Time
Warner (4,2%)
• Economia da atenção ajuda aos mecanismos de busca ganharem
popularidade
• World Wide Web Wanderer (1993), criado por um estudante do MIT,
foi o primeiro robot que percorria a web
• Excite (Stanford University, 1993) foi o primeiro a utilizar análise
estatística de palavras para melhorar os resultados
• WebCrawler (1994) indexava todo o texto da página
• Lycos (Carnegie Mellon University, 1994) indexava na época mais
de 60 milhões de documentos
• Alta Vista (Digital Equipment Corporation, 1995) possibilitava
pesquisas em linguagem natural, em vários idiomas, tradutor,
recursos avançados e busca em imagens e vídeos
Fonte: http://www.hitwise.com/datacenter/main/dashboard-10133.html

Busca
• Yahoo!
– Fundado em 1994 por Jerry Yang e David Filho, estudantes de PHD de Stanford
– Inicialmente era um diretório Web
• Google
– Fundado por Larry Page e Sergey Brin em 1997, quando eram estudantes de PHD na
Stanford University)
– Tão popular que o verbo “to google” foi adicionado ao Oxford English Dictionary”
– O nome vem de googol (10100)
– Sucesso atribuído ao algoritmo PageRank e à infra-estrutura distribuída de servidores
(estima-se mais de 1 milhão de servidores)
• MSN
– Lançado em 1998, a Microsoft atribuiu alta prioridade para tentar alavancar seu serviço de
busca
• Sites de busca vertical (especializados em um assunto), como livros, músicas,
empregos etc.
Leitura adicional:
- Battelle, J. “The search: how Google and its rivals
rewrote the rules of business and transformed our culture”
- Underwood, L. “A brief history of search engines”
http://www.webreference.com/authoring/search_history

Conteúdo gerado pelos usuários
• Geração de informação agregada (Amazon.com)
• Bookmark social (del.icio.us, ma.gnolia, StumbleUpon)
• Wikis (Wikipedia, wikis internos em empresas)
• Blogs
– Termo vem de Weblogs que eram utilizados originalmente para postar
sites, com pequenos comentários ou manifestações.
– Se tornou um fenômeno social, facilitando ter um “site pessoal” ou fazer
jornalismo
– Blogs competem com canais de informação tradicionais
– As entradas permitem comentários, que geram debates e discussões
– Jornalistas, executivos e empregados de empresas viraram blogistas
(ex. blogs.sun.com)
– Companhias anunciam suas novidades através de blogs

Redes sociais
• Um estudo em 2006 mostrou que 1 em cada 20 visitas na Web
foram a uma das 20 principais redes sociais
– Frindster foi um dos primeiros sites (2002)
– MySpace é uma das redes sociais mais populares
– Facebook (175 milhões) comum principalmente entre os universitários norte-
americados
– LinkedIn (35 milhões) e Xing (7 milhões) mais voltado para contatos profissionais
– Orkut (70 milhões) se tornou predominantemente brasileiro (no Brasil é o
segundo site mais acessado, perdendo apenas para o Google)
– fonte:http://www.alexa.com/site/ds/top_sites?cc=BR&ts_mode=country&lang=non
e
• Um estudo de 2005 mostrava que 85% dos estudantes das
universidades americanas estavam no Facebook e que 60% deles
acessavam o sistema diariamente
• Second Life – Ambiente 3D
• DodgeBall – Mobile Social Software
• Gaia Online – Rede social voltada para games

Redes sociais
Fonte: http://www.hitwise.com/datacenter/main/dashboard-10133.html

Redes Sociais
http://www.orkut.com.br/Main#MembersAll.aspx
* Em 2008, o Orkut passou para a Google Brasil

Redes Sociais
• Algumas estatísticas do Facebook:
http://static.ak.facebook.com/press/info.php?statistics

Mídia Social
• Compartilhamento de filmes, fotos, música, notícias etc.
• Impulsionado pela larga disponibilidade de dispositivos
multimídia, como WebCams, telefones celulares, câmeras
digitais etc.
• YouTube (lançado no final de 2005) e menos de um ano
depois adquirido pela Google por 1,6 bilhões de dólares
• Digg – possibilita os usuários “cavar” ou “enterrar” notícias
• Flickr – compartilhamento de fotos
• Last.fm – Site de rádio com comunidades e recomendações
• Podcasting – áudios acessados através dos feeds RSS
• Potencial de sucesso imediato de algo dado o efeito viral de
disseminação

RIA (Rich Internet Application)
• Ajax (Asynchronous JavaScript and XML)
• Dojo – componentes JavaScript
• Flex – framework RIA para aplicações Flash
• JavaFX – Produto da Sun para competir com o Flex e o
Silverlight
• Script.aculo.us – biblioteca para criação de efeitos visuais
• JSF – componentes de interface em Java
• ASP.Net Ajax
• Adobe Integrated Runtime e Google Gears possibilita utilizar
aplicações Web mesmo desconectado

Interoperabilidade e integração
• Web Services
• API (Application Programming Interface)
– eBay, Amazon, Google, Yahoo!, Flickr etc.
• Mashups
– Combinação de serviços web, sites e RSS feeds
• www.programmableweb.com
• Exemplos
– www.chicagocrime.com – combina Google Maps e dados sobre crimes
do Citizen ICAM
– www.feedmashr.com – combina dados de várias fontes para criar uma
listagem das histórias mais populares
– www.secretprices.com – combina Amazon, Epinions.com e
Shopping.com para comparar preços

Widgets e Gadgets
• Componentes de interface – São pequenas aplicações que
rodam em uma plataforma específica (Web ou desktop)
• http://www.widgipedia.com
• Podem valer-se das APIs e serviços web para favorecer a
integração de sistemas
• Programadores casuais para plataformas sociais
• Zembly

Programadores casuais
• Não se identificam como engenheiros
• Maioria composta de estudantes menores do que 30
• Muitas vezes são usuários avançados de tecnologia
– Tem computador, banda larga, celular de ponta, blog, mensageiro, perfil em rede
social etc.
• Tem visões personalizadas do mundo, muitas idéias e não são
presos a vícios e tradições da área
• Massa muito grande de programadores casuais e canal de
distribuição viral que pode atingir milhões de pessoas
– Exemplo: iLife (widget do Facebook) lançado em 24 de maio de 2007
– 24 horas depois – 180 mil usuários
– 2 semanas depois 680 mil usuários
– 3 semanas depois 2 milhões de usuários (fonte Fast, T. Slides Java One 2008)
• Grande potencial de criatividade e inovação
• Agregação de serviços (desenvolvimento baseado em componentes)
• Software se torna plataforma para construção de aplicativos
– As aplicações enriquecem a plataforma

Aplicativos no Facebook
• 57 mil aplicativos, 200 mil desenvolvedores.
• Os aplicativos foram usados 34 milhões de vezes nas últimas
24h
• Fonte: http://adonomics.com/

Espectro de aplicações

Força de trabalho

Outros Serviços
• Serviços baseados em localização
– Sistemas baseados em GPS e dispositivos móveis
– Serviços de mapeamento (Google Maps, Google Warth, MapQuest etc.)
– Com o uso de APIs estes serviços estão sendo mesclados às aplicações
• VoIP

Aplicação desktop x Web
Desktop Web
Saída do programa Impressão direta na tela Renderizada em um
navegador
Arquitetura Centralizada Cliente-Servidor
Portabilidade Sistemas operacionais Navegadores (Internet
Explorer, Firefox, Chrome,
Opera, Safari etc.) e suas
múltiplas versões
Abrangência limitadas à estação de
trabalho ou a uma rede
local de computadores
Acessos providentes de
qualquer lugar
Interação Monousuário Colaborativa

Tecnologias
• Lado Cliente
– JavaScript
– Java (applets)
– Adobe Flash
– Adobe Flex
• Lado Servidor
– Java (servets)
– Porlets
– ASP.Net
– PHP
– Ruby on Rails
– Python

Qual linguagem usar?
• Perl
• Python
• PHP
• ColdFusion
• ASP e ASP.NET
• Java e JSP
• Lasso
• Ruby on Rails

Metodologia
• KIS (Keep it simple; keep it small)
– 37signals (empresa que desenvolveu aplicações colaborativas para Web
2.0 como Basecamp, Campfire, Backpack, Writeboard e Ta-da List e o
framework Ruby on Rails): “We’re a privately-held Chicago-based
company committed to building the best web-based software products
possible with the least number of features necessary. Our products do
less than the competition — intentionally.”
http://gettingreal.37signals.com
• Software as a Service (SaaS)
– Aplicativos da Google, Microsoft
Office Live
• Beta perpétuo e desenvolvimento
ágil
• Open source
http://pt.wikipedia.org/wiki/Orkut

Cloud computing
• Plataform as a Service (PaaS)
• A infra-estrutura é oferecida como serviço
• Baseada em virtualização
• Grandes vantagens são a escalabilidade, redução de custo,
disponibilidade
• Permite ajustar a capacidade de processamento para cima ou
para baixo e o valor pago é o que é realmente usado
• Vídeo explicativo sobre Cloud Computing -
http://videos.techielife.com/what-is-cloud-computing/video-
online/2008/11/13

Exemplo de Cloud Computing
• Amazon Elastic Compute Cloud (Amazon EC2)
• Para utilizar:
– Cria-se uma Amazon Machine Image (AMI) ou utiliza-se um dos templates pré-
configurados e faz o upload para a Amazon
– Utiliza-se os web services ou as ferramentas para configurar segurança, firewall,
iniciar, parar e monitorar instâncias de servidores
– Pode-se posicionar instâncias em múltiplas localizações (atualmente EUA e
Europa)
– O serviço é tarifado por horas de instância e volume de transferência
• A própria aplicação pode escalar automaticamente
• Cada instância pode ser remotamente acessada como administrador
• Exemplos de instâncias:
– Small Instance (Default) 1.7 GB of memory, 1 EC2 Compute Unit (1 virtual core
with 1 EC2 Compute Unit), 160 GB of instance storage, 32-bit platform
– Large Instance 7.5 GB of memory, 4 EC2 Compute Units (2 virtual cores with 2
EC2 Compute Units each), 850 GB of instance storage, 64-bit platform
– High-CPU Medium Instance 1.7 GB of memory, 5 EC2 Compute Units (2 virtual
cores with 2.5 EC2 Compute Units each), 350 GB of instance storage, 32-bit
platform
• EC2 Compute Unit (ECU) – One EC2 Compute Unit (ECU) provides the
equivalent CPU capacity of a 1.0-1.2 GHz 2007 Opteron or 2007 Xeon processor.

Exemplo de Cloud Computing
• Sistemas operacionais disponíveis:
• Red Hat Enterprise Linux , Windows Server 2003, Oracle Enterprise
Linux, OpenSolaris, openSUSE Linux, Ubuntu Linux, Fedora, Gentoo
Linux, Debian
• Aplicativos disponíveis:
• Banco de dados (Oracle, SQL Server, MySQL etc.), Web Server
(Apache, JBoss, IIS), Vídeo encoding e streaming (Wowza Media Server
Pro, Windows Media Server) etc.
• Tarifação
Fonte: http://aws.amazon.com/ec2

Outros serviços da Amazon
• Amazon Simple Storage Service (S3)
– Provê um banco de dados acessível via Web Services
• Amazon Simple Queue Service (SQS)
– Implementa uma fila de requisições. Facilita a implementação de sistemas distribuídos ($0.01
per 10,000 Amazon SQS Requests)

Distribuição de tarefas

O futuro da Web
• Lei de Moore (1965) – O poder do hardware dobra a cada dois anos,
enquanto o preço permanece o mesmo.
• Web Semântica
– RDF (Resource Description Framework) – padronizado pelo W3C. Representa
triplas do tipo X vinculante Y
– O projeto DBPedia.org visa codificar as informações presentes na Wikipedia. Já
conta com informações sobre 2,6 milhões de objetos conectadas em 274 milhões
de triplas possilitando queries semânticas
– OWL (Web Ontology Language) descreve ontologias
• Sistemas inteligentes
• Integração de mídias (texto, imagem, animação, vídeo, áudio,
ambiente 3D etc.) e dispositivos (Computador, Smart Phone, TV etc.)
• Microformatos
– Padronizam blocos de informações (exemplo: cartão pessoal, currículo, evento,
endereço, bookmarks etc.
– http://microformats.org/wiki/Main_Page
• Linguagens dinâmicas e DSL
• Rich Internet Application

Mais informações
• O’Reilly Media Web 2.0 Summit
• http://www.deitel.com/ResourceCenters/ResourceCenterList/ta
bid/56/Default.aspx
• http://web2.socialcomputingmagazine.com/
• http://www.techcrunch.com/2006/08/08/web-20-the-24-minute-
documentary/
• Deitel, P.J. & Deitel, H.M. (2008), Ajax, Rich Internet
Applications e Desenvolvimento Web para Programadores.
OBS: O primeiro capítulo está disponível em
http://www.deitel.com/Web2eBook/tabid/2478/Default.aspx

A Disciplina

A disciplina
• Unidades:
– Introdução ao Desenvolvimento Web
– Tecnologias para o Desenvolvimento Web
– Inteligência Coletiva e Web 2.0
• Perfil do aluno:
– Alunos de graduação (fim de curso) e pós-graduação em ciência da
computação
• São desejáveis conhecimento de orientação a objetos e Java
• Ter tempo extra-classe para se dedicar às atividades do curso (cerca de 4h
por semana).

Metodologia
• Enfoque da disciplina
– Entregar informação aos alunos (pizza delivery) x fazer os alunos aprenderem
• “Escutei e esqueci,
li e entendi,
fiz e aprendi.”
– Implementação
– Várias atividades
• Os alunos são tão ou mais responsáveis que o professor pelo
sucesso do curso
• Atividades em grupo realizadas de forma colaborativa
• Competências a serem exercitadas:
– Pesquisa
– Trabalho em grupo
– Apresentação em público
– Coordenação de equipe de desenvolvimento
– Avaliação e utilização de código produzido por terceiros

Os trabalhos
• Trabalho 1 – Implementação de um sistema Web utilizando
tecnologias básicas
• Trabalho 2 – Estudo e implementação no sistema de
tecnologias modernas de desenvolvimento
• Trabalho 3 – Implementação de algoritmos de inteligência
Coletiva e Web 2.0 no sistema.

Avaliação
• Graduação:
– Nota_Trabs = 0.2 * T1 + 0.4 * T2 + 0.4 * T3
– Nota_Provas = 0.5 * P1 + 0.5 * P2
– Se Min (Nota_Trabs, Nota_Provas) <= 5, NF = Min (Nota_Trabs,
Nota_Provas)
– Caso contrário, NF = 0.6 * Nota_Trabs + 0.4 * Nota_Provas
• Pós-Graduação:
– Nota_Trabs = 0.2 * T1 + 0.4 * T2 + 0.4 * T3
– Nota_Provas = 0.5 * P1 + 0.5 * P2
– Se Min (Nota_Trabs, Nota_Provas) <= 6, NF = Min (Nota_Trabs,
Nota_Provas)
– Caso contrário, NF = 0.6 * Nota_Trabs + 0.4 * Nota_Provas
– Conceito final:
• Se NF >= 9.0, nota A
• Se 7.5 <= NF < 9.0, nota B
• Se 6.0 <= NF < 7.5, nota C
• Se NF < 6.0, Reprovado

Cronograma
• 03/03 e 05/03 - Introdução ao curso e tecnologias básicas
• 10/03, 12/03 e 17/03 – Implementação em sala do Trabalho 1
• 19/03 a 30/04 – Apresentações Trabalho 2
• 05/05 – Prova 1
• 07/05 - Aula sobre inteligência coletiva e web 2.0
• 12/05 a 28/05 – Apresentações Trabalho 3
• 02/06 e 04/06 – Implementação em sala da versão final do
sistema
• 09/06 a 18/06 – Apresentação da versão final do sistema
• 23/06 – Prova 2
• * Sujeito a pequenas alterações

Bibliografia
• Unidade 1 – Introdução ao Desenvolvimento Web
– Basham, B., Sierra, K. & Bates, B. (2005), Use a Cabeça! Servlets &
JSP.
– Deitel, P.J. & Deitel, H.M. (2008), Ajax, Rich Internet Applications e
Desenvolvimento Web para Programadores.
• Unidade 2 – Tecnologias para o Desenvolvimento Web
– Google
– Revistas Mundo Java e Java Magazine
– Livros específicos
• Unidade 3 – Inteligência Coletiva e Web 2.0
– SEGARAN, T. (2007), Programming Collective Intelligence: Building
Smart Web 2.0 Applications, O’Reilly, ISBN 0596529325.
• OBS: Há uma versão traduzida do livro, de nome “Programando a
Inteligência Coletiva: Desenvolvendo Aplicativos Inteligentes Web 2.0”
– ALAG, S. (2009), Collective Intelligence in Action, ISBN 1933988312.

Questionário
1. Qual o seu curso e período?
2. Você está trabalhando no momento? Onde e com que?
3. Por que você está cursando esta disciplina?
4. O que você espera aprender nesta disciplina?
5. Qual o seu grau de familiaridade com as tecnologias abaixo (nota
de 0 a 5)?
1. Orientação a objetos
2. UML
3. HTML
4. Desenvolvimento para Web
5. Java
6. JSP

Próximos passos
• Cadastrar-se em http://paca.ime.usp.br e
http://www.academos.com.br/aulas
• Escolher os temas dos trabalhos no site Academos
• Responder ao questionário no Academos
• Começar a trabalhar! O tempo é curto...

Aula_1._Introducao_ao_curso.ppt

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Aula_1._Introducao_ao_curso.ppt

Semelhante a Aula_1._Introducao_ao_curso.ppt (20)

Aula_1._Introducao_ao_curso.ppt