![Page 1: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/1.jpg)
Visão Geral de Desenvolvimento Web Front End
Tecnologias
![Page 2: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/2.jpg)
Projeto de Monitoramento de Objetos Moveis• Esquema geral de um sistema Web
Clientes Servidor Banco de dados
![Page 3: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/3.jpg)
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– ...
![Page 4: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/4.jpg)
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/
![Page 5: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/5.jpg)
HTML - Estrutura<html>
<head><title>Titulo Aqui<title>
<head>
<body><!– Comentario -->
</body>
</html>
![Page 6: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/6.jpg)
HTML – Tags Gerais de Layout• http://www.w3schools.com/html/html_layout.asp
• <div> (http://www.w3schools.com/tags/tag_div.asp)– HTML 5:
![Page 7: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/7.jpg)
HTML – Tags Gerais de Layout• <p>conteudo</p> (http://www.w3schools.com/tags/tag_p.asp)
• <span>conteudo</span> (http://www.w3schools.com/tags/tag_span.asp)
• <table> (http://www.w3schools.com/tags/tag_table.asp) <tr><th>Name</th></tr><tr><td>Bill Gates</td></tr></table>
![Page 8: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/8.jpg)
HTML – Tags Gerais de Layout• <ul> (http://www.w3schools.com/tags/tag_ul.asp)
<li>item</li></ul>
• <strong>texto</strong> (http://www.w3schools.com/tags/tag_strong.asp)
• <h1>conteudo</h1> (http://www.w3schools.com/tags/tag_hn.asp)–h1 até h8
• <br/> (http://www.w3schools.com/tags/tag_br.asp)
![Page 9: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/9.jpg)
HTML – Tags Gerais de Entrada do Usuário• <input>
– http://www.w3schools.com/tags/tag_input.asp
– HTML 4• <input type=“button” value=“OK”/>
• <input type=“text”/>
• <label for=“check”>check</label> <input type=“checkbox” id=“check”/>
• <input type=“password”/>
![Page 10: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/10.jpg)
HTML – Tags Gerais de Entrada do Usuário– HTML 4
• <label for=“m”>masculino</label> <input type=“radio” name=“sexo” id=“m” value=“masculino”/> <label for=“f”>feminino</label> <input type=“radio” name=“sexo” id=“f” value=“feminino”/>
• <input type=“submit” value=“Salvar”/>
• <select><option value=“opcao1”>Label Opcao1</option><option value=“opcao2”>Label Opcao2</option>
<select>
• ...
![Page 11: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/11.jpg)
HTML – Tags Gerais de Entrada do Usuário– HTML 5
• <input type=“color”/>• <input type=“email”/>• <input type=“number”/>• <input type=“range”/>• ...
– Ficar atento ao suporte dos Browsers!
![Page 12: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/12.jpg)
HTML – Tags Gerais de Entrada do Usuário– FORM
<form action="exemplo" method="post”>Nome:<input type="text" name="nome"/><br/><input type="submit" value="Cadastrar"/> </form>
– Servlet@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {String nome = req.getParameter("nome");System.out.println(nome);}
![Page 13: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/13.jpg)
CSS– 3 formas de definir o estilo de um elemento do HTML
• <style>div{ color: red;}</style>
• <link href=“arquivo.css” rel=“stylesheet”/>–Conteudo do arquivo:div{ color: red;}
• Atributo style<div style=“color:red”>
Usar o !important para sobrescrever um estilo
![Page 14: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/14.jpg)
CSS– Seletores (http://www.w3schools.com/cssref/css_selectors.asp)
• .class• #id• *• element – div• element, elemento – div, p• element• :hover• ...
![Page 15: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/15.jpg)
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;
}
![Page 16: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/16.jpg)
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.
![Page 17: Visão Geral de Desenvolvimento Web Front End Tecnologias](https://reader035.vdocuments.com.br/reader035/viewer/2022062411/5706386a1a28abb823904859/html5/thumbnails/17.jpg)
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