Visão Geral de Desenvolvimento Web Front End Tecnologias.

Apresentação em tema: "Visão Geral de Desenvolvimento Web Front End Tecnologias."— Transcrição da apresentação:

1 Visão Geral de Desenvolvimento Web Front End Tecnologias

2 Projeto de Monitoramento de Objetos Moveis Esquema geral de um sistema Web ClientesServidorBanco de dados

3 Browsers Principal Cliente do nosso sistema Web – Navegadores Tecnologias estudadas –HTML, para definir o conteúdo da página –CSS, para especificar o layout da página –Javascript, para programar o comportamento da página Outras Tecnologias –Flash –Silverlight –Applet –...

4 HTML – HyperText Markup Language XML vs HTML –Ambos são feitos a partir do conceito de Tags –XML foi criado para descrever dados Ex.: web.xml, pom.xml –HTML foi criado para apresentar dados W3C –http://www.w3schools.com/

5 HTML - Estrutura Titulo Aqui

6 HTML – Tags Gerais de Layout http://www.w3schools.com/html/html_layout.asp (http://www.w3schools.com/tags/tag_div.asp) –HTML 5:

7 HTML – Tags Gerais de Layout conteudo (http://www.w3schools.com/tags/tag_p.asp) conteudo (http://www.w3schools.com/tags/tag_span.asp) (http://www.w3schools.com/tags/tag_table.asp) Name Bill Gates

8 HTML – Tags Gerais de Layout (http://www.w3schools.com/tags/tag_ul.asp) item texto (http://www.w3schools.com/tags/tag_strong.asp) conteudo (http://www.w3schools.com/tags/tag_hn.asp) –h1 até h8 (http://www.w3schools.com/tags/tag_br.asp)

9 HTML – Tags Gerais de Entrada do Usuário –http://www.w3schools.com/tags/tag_input.asphttp://www.w3schools.com/tags/tag_input.asp –HTML 4 check

10 HTML – Tags Gerais de Entrada do Usuário –HTML 4 masculino feminino Label Opcao1 Label Opcao2...

11 HTML – Tags Gerais de Entrada do Usuário –HTML 5... –Ficar atento ao suporte dos Browsers!

12 HTML – Tags Gerais de Entrada do Usuário –FORM Nome: –Servlet @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String nome = req.getParameter("nome"); System.out.println(nome); }

13 CSS –3 formas de definir o estilo de um elemento do HTML div{ color: red; } –Conteudo do arquivo: div{ color: red; } Atributo style Usar o !important para sobrescrever um estilo

14 CSS –Seletores (http://www.w3schools.com/cssref/css_selectors.asp).class #id * element – div element, elemento – div, p element :hover...

15 CSS3 –Animações com transition div{ width: 100px; height: 100px; transition: width 2s, height 2s; } div:hover{ width: 300px; height: 300px; transition: width 2s, height 2s; }

16 Javascript -Netscape Communication Corporation. -Primeiro nome foi LightScript. -Motivação foi o surgimento de applets -Netscape queria uma linguagem leve e interpretada para complementar o Java -Mudança do nome para Javascript, foi meramente comercial, para embarcar na onda do sucesso do Java na época.

17 Javascript -Linguagem de programação dinâmica -Fracamente tipada -Uso mais comum? Web Browsers!! -Engine javascript nativa que permite rodar código no cliente para interagir com o usuário -Permite: -Controlar o Browser -Comunicação assíncrona -Alterar o documento exibido