Desenvolvimento WebDesenvolvimento Web
Introdução à codificação para WebIntrodução à codificação para Web
Carlos Eduardo A...
Desenvolvimento Web 2
WebWeb
● Transporte de informações entre uma rede
mundial, exibidas através de um navegador
● Endere...
Desenvolvimento Web 3
Breve HistóricoBreve Histórico
● Nascimento da Web
● Função de transportar informações pela rede
● T...
Desenvolvimento Web 4
Breve HistóricoBreve Histórico
● Guerra dos Browsers
● 1995 a 1999 - Netscape perde sua liderança
Desenvolvimento Web 5
Breve HistóricoBreve Histórico
● A partir de certo ponto, apresentar o conteúdo
já não era suficient...
Desenvolvimento Web 6
HTMLHTML
● Tecnologia central
● Linguagem de marcação
● Interpretada pelos navegadores
● Inicialment...
Desenvolvimento Web 7
HTMLHTML
● Exemplo de código HTML
Desenvolvimento Web 8
Novas TecnologiasNovas Tecnologias
● Meios de estender as capacidades da
linguagem HTML
● Ampliaram ...
Desenvolvimento Web 9
Novas TecnologiasNovas Tecnologias
● LiveScript + Java → JavaScript
● Validação de formulários
● Int...
Desenvolvimento Web 10
Novas TecnologiasNovas Tecnologias
● Exemplo de código JavaScript
Desenvolvimento Web 11
Novas TecnologiasNovas Tecnologias
● CSS – Cascading Style Sheets
● Folha de estilos em cascata
● L...
Desenvolvimento Web 12
Novas TecnologiasNovas Tecnologias
● Exemplo de código CSS
Desenvolvimento Web 13
Novas TecnologiasNovas Tecnologias
● Flash
● Criada pela Macromedia, comprada pela Adobe
● É uma te...
Desenvolvimento Web 14
Novos empregos para as novasNovos empregos para as novas
tecnologiastecnologias
● Páginas web dinâm...
Desenvolvimento Web 15
Novos empregos para as novasNovos empregos para as novas
tecnologiastecnologias
● Ferramentas com r...
Desenvolvimento Web 16
Embutindo novas soluções nasEmbutindo novas soluções nas
linguagens principaislinguagens principais...
Desenvolvimento Web 17
FuturoFuturo
● Internet Explorer 9+ (http://microsoft.com/ie9)
● Firefox 4 (http://mozilla.com/fire...
Desenvolvimento Web 18
O que é preciso para começarO que é preciso para começar
●Disposição
●Atualização constante
Desenvolvimento Web 19
Por onde começarPor onde começar
● www.Apostilando.com
● maujor.com
● w3schools.com
● http://tinyur...
Desenvolvimento Web 20
ExemplosExemplos
● http://tinyurl.com/html5-video-controls
● http://tinyurl.com/css3-show-and-hide
...
Desenvolvimento Web 21
ObrigadoObrigado
http://slideshare.net/kmiksihttp://slideshare.net/kmiksi
Upcoming SlideShare
Loading in …5
×

Intro desenvolvimento-web

778 views

Published on

Published in: Technology
  • Be the first to comment

Intro desenvolvimento-web

  1. 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. 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. 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. 4. Desenvolvimento Web 4 Breve HistóricoBreve Histórico ● Guerra dos Browsers ● 1995 a 1999 - Netscape perde sua liderança
  5. 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. 6. Desenvolvimento Web 6 HTMLHTML ● Tecnologia central ● Linguagem de marcação ● Interpretada pelos navegadores ● Inicialmente formada de regras sintáticas flexíveis
  7. 7. Desenvolvimento Web 7 HTMLHTML ● Exemplo de código HTML
  8. 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. 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. 10. Desenvolvimento Web 10 Novas TecnologiasNovas Tecnologias ● Exemplo de código JavaScript
  11. 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. 12. Desenvolvimento Web 12 Novas TecnologiasNovas Tecnologias ● Exemplo de código CSS
  13. 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. 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. 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. 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. 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. 18. Desenvolvimento Web 18 O que é preciso para começarO que é preciso para começar ●Disposição ●Atualização constante
  19. 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. 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. 21. Desenvolvimento Web 21 ObrigadoObrigado http://slideshare.net/kmiksihttp://slideshare.net/kmiksi

×