Your SlideShare is downloading. ×
Intro desenvolvimento-web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro desenvolvimento-web

612
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
612
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for 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
  • Transcript

    • 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