O documento apresenta uma introdução ao desenvolvimento web, cobrindo tópicos como: a história da web desde seu surgimento até os navegadores atuais; linguagens como HTML, CSS e JavaScript; e novas tecnologias como AJAX que tornaram os sites mais dinâmicos. O autor também discute as novas oportunidades de emprego geradas por essas tecnologias e dá dicas sobre como iniciar uma carreira em desenvolvimento web.

1. Desenvolvimento WebDesenvolvimento Web
Introdução à codificação para WebIntrodução à codificação para Web
Carlos Eduardo AlvesCarlos Eduardo Alves
Outubro de 2010Outubro de 2010
I SEMINFO - Semana Acadêmica do Curso Técnico em Manutenção e Suporte em InformáticaI SEMINFO - Semana Acadêmica do Curso Técnico em Manutenção e Suporte em Informática
E.T.E. João XXIIIE.T.E. João XXIII

2. Desenvolvimento Web 2
WebWeb
● Transporte de informações entre uma rede
mundial, exibidas através de um navegador
● Endereço
● Internet
● Conteúdo – desenvolvedor Web
● Três padrões base: URI, HTTP, HTML

3. Desenvolvimento Web 3
Breve HistóricoBreve Histórico
● Nascimento da Web
● Função de transportar informações pela rede
● Tecnologia simples e flexível
● Disseminação dos navegadores
● 1993: Mosaic (X Window System do Unix)
● 1994: adaptação para Windows
● ~1995: Criadores fundam a Netscape
Communications e o navegador Netscape se torna
líder de mercado

4. Desenvolvimento Web 4
Breve HistóricoBreve Histórico
● Guerra dos Browsers
● 1995 a 1999 - Netscape perde sua liderança

5. Desenvolvimento Web 5
Breve HistóricoBreve Histórico
● A partir de certo ponto, apresentar o conteúdo
já não era suficiente, era necessário formatá-lo
● Soluções começaram a se tornar complexas e
inviáveis
● Surgem novas tecnologias para resolver
problemas antigos
● Facilidades
● Poder, controle e menor flexibilidade
● Riqueza de recursos

6. Desenvolvimento Web 6
HTMLHTML
● Tecnologia central
● Linguagem de marcação
● Interpretada pelos navegadores
● Inicialmente formada de regras sintáticas
flexíveis

7. Desenvolvimento Web 7
HTMLHTML
● Exemplo de código HTML

8. Desenvolvimento Web 8
Novas TecnologiasNovas Tecnologias
● Meios de estender as capacidades da
linguagem HTML
● Ampliaram os recursos das páginas Web
● Proporcionaram sites mais dinâmicos,
ferramentas mais úteis, como:
● Youtube
● Facebook e Orkut
● GoogleDocs e GoogleMaps
● Acesso a partir de dispositivos móveis

9. Desenvolvimento Web 9
Novas TecnologiasNovas Tecnologias
● LiveScript + Java → JavaScript
● Validação de formulários
● Interação com a página
● Modificação dinâmica de elementos e estilos
● http://mozilla.org/js

10. Desenvolvimento Web 10
Novas TecnologiasNovas Tecnologias
● Exemplo de código JavaScript

11. Desenvolvimento Web 11
Novas TecnologiasNovas Tecnologias
● CSS – Cascading Style Sheets
● Folha de estilos em cascata
● Linguagem de estilos
● Define a apresentação de documentos Web
● Provê separação entre formatação e
conteúdo

12. Desenvolvimento Web 12
Novas TecnologiasNovas Tecnologias
● Exemplo de código CSS

13. Desenvolvimento Web 13
Novas TecnologiasNovas Tecnologias
● Flash
● Criada pela Macromedia, comprada pela Adobe
● É uma tecnologia proprietária (fechada e/ou paga)
● Animações interativas
● Vídeos e jogos
● Executado no navegador através de plugin

14. Desenvolvimento Web 14
Novos empregos para as novasNovos empregos para as novas
tecnologiastecnologias
● Páginas web dinâmicas
● Comunicação entre cliente e servidor automática
● Atualização de conteúdo dinamicamente
● Oferta de produtos baseada nas ações do usuário
● A Web não é mais a mesma: o usuário também
gera conteúdo

15. Desenvolvimento Web 15
Novos empregos para as novasNovos empregos para as novas
tecnologiastecnologias
● Ferramentas com recursos prontos para uso
● AJAX
● jQuery (http://jqueryui.com/demos/)
– Criação e manipulação de recursos gráficos
– Páginas web ricas
● Yahoo (http://developer.yahoo.com/)
– YUI – Yahoo User Interface Library – utilitários e
controles
– YUI compressor
– YSlow – sugestões para aumento de performance

16. Desenvolvimento Web 16
Embutindo novas soluções nasEmbutindo novas soluções nas
linguagens principaislinguagens principais
● HTML5
● Áudio, vídeo, novos campos de formulário
● CSS3
● Transparência, bordas arredondadas
● SVG e canvas

17. Desenvolvimento Web 17
FuturoFuturo
● Internet Explorer 9+ (http://microsoft.com/ie9)
● Firefox 4 (http://mozilla.com/firefox/beta/)
● Opera 10 (http://opera.com/browser/)
● Google Chrome (http://google.com/chrome)

18. Desenvolvimento Web 18
O que é preciso para começarO que é preciso para começar
●Disposição
●Atualização constante

19. Desenvolvimento Web 19
Por onde começarPor onde começar
● www.Apostilando.com
● maujor.com
● w3schools.com
● http://tinyurl.com/modelo-de-padroes (modelo de
padrões web)
● tinyurl.com/jquery-design (tutorial para designers)
● jQueryUI.com
● flowplayer.org/tools

20. Desenvolvimento Web 20
ExemplosExemplos
● http://tinyurl.com/html5-video-controls
● http://tinyurl.com/css3-show-and-hide
● http://tinyurl.com/css3-ui-win7
● http://tinyurl.com/pseudo-3d-games

21. Desenvolvimento Web 21
ObrigadoObrigado
http://slideshare.net/kmiksihttp://slideshare.net/kmiksi