Introdução ao Desenvolvimento para Web
MAC0416 e MAC5855
Tópicos Especiais em Desenvolvimento para Web
Marco A. Gerosa
[email protected]
Histórico 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 História da Web dinâmica
http://royal.pingdom.com/2007/12/07/a-history-of-the-dynamic-web/
Evolução da tecnologia 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 As gigantes estão atentas
“Rapid prototyping”
“Social interactions”
As gigantes estão atentas
As gigantes estão atentas
As gigantes estão atentas As gigantes estão atentas
“Humans are fundamentally social creatures.”
As gigantes estão atentas
As gigantes estão atentas
Evolução da Web 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)
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 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 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 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 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 Aplicações na Web 2.0
• Busca
• Compartilhamento de conteúdo
• Blogging
• Redes Sociais
• Mídia social
• Mashups
• etc.
Busca 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 Busca
• Yahoo!
– Fundado em 1994 por Jerry Yang e David Filho, estudantes de PHD de Stanford – Inicialmente era um diretório Web
– 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 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 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=none
• 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 Redes sociais
Fonte: http://www.hitwise.com/datacenter/main/dashboard-10133.html
Redes Sociais Redes Sociais
http://www.orkut.com.br/Main#MembersAll.aspx
Redes Sociais Redes Sociais
• Algumas estatísticas do Facebook:
http://static.ak.facebook.com/press/info.php?statistics
Mídia Social 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) 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 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 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 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
Aplicativos no Facebook 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
Espectro de aplicações
Força de trabalho
Força de trabalho
Outros Serviços 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 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 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?
Qual linguagem usar?
• Perl
• Python
• PHP
• ColdFusion
• ASP e ASP.NET
• Java e JSP
• Lasso
• Ruby on Rails
Metodologia 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
Cloud computing 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 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 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 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
Distribuição de tarefas
O futuro da Web 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 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
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 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 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 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 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 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
– 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 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
