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
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
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
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
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