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
Próximos SlideShares
Carregando em…5
×

Intro desenvolvimento-web

777 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
777
No SlideShare
0
A partir de incorporações
0
Número de incorporações
267
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Carlos Eduardo Alves é formado em Tecnologia de Sistemas para Internet pelo Instituto Sul-Rio-Grandense campus Pelotas
  • 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
  • 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
  • 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
  • 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

    ×