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
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
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
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 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
Desenvolvimento Web 6
HTMLHTML
● Tecnologia central
● Linguagem de marcação
● Interpretada pelos navegadores
● Inicialmente formada de regras sintáticas
flexíveis
Desenvolvimento Web 7
HTMLHTML
● Exemplo de código HTML
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
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
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
● Linguagem de estilos
● Define a apresentação de documentos Web
● Provê separação entre formatação e
conteúdo
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 tecnologia proprietária (fechada e/ou paga)
● Animações interativas
● Vídeos e jogos
● Executado no navegador através de plugin
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
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
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
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)
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://tinyurl.com/modelo-de-padroes (modelo de
padrões web)
● tinyurl.com/jquery-design (tutorial para designers)
● jQueryUI.com
● flowplayer.org/tools
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
Desenvolvimento Web 21
ObrigadoObrigado
http://slideshare.net/kmiksihttp://slideshare.net/kmiksi

Intro 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 BreveHistó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 BreveHistóricoBreve Histórico ● Guerra dos Browsers ● 1995 a 1999 - Netscape perde sua liderança
  • 5.
    Desenvolvimento Web 5 BreveHistó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 NovasTecnologiasNovas 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 NovasTecnologiasNovas 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 NovasTecnologiasNovas Tecnologias ● Exemplo de código JavaScript
  • 11.
    Desenvolvimento Web 11 NovasTecnologiasNovas 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 NovasTecnologiasNovas Tecnologias ● Exemplo de código CSS
  • 13.
    Desenvolvimento Web 13 NovasTecnologiasNovas 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 Novosempregos 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 Novosempregos 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 Embutindonovas 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 Oque é preciso para começarO que é preciso para começar ●Disposição ●Atualização constante
  • 19.
    Desenvolvimento Web 19 Poronde 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.

Notas do Editor

  • #2 Carlos Eduardo Alves é formado em Tecnologia de Sistemas para Internet pelo Instituto Sul-Rio-Grandense campus Pelotas
  • #10 A empresa Sun (desenvolvedora da plataforma Java), após algum auxílio para aperfeiçoar a linguagem LiveScript, permitiu o uso do prefixo Java no nome da linguagem JavaScript
  • #17 Até o presente momento (outubro de 2010) poucos recursos da tecnologia HTML versão 5 foram implementados na maioria dos navegadores. Incompatibilidades também são encontradas no suporte à CSS e SVG
  • #18 A incompatibilidade do IE com a Internet sempre foi a maior aflição dos desenvolvedores web. O IE9 vai ser mais compatível com padrões Web (acredita-se), e espera-se que a tendência seja a de a Microsoft continuar trabalhando na compatibilidade com padrões Web