Embed Size (px)
Citation preview
Visão Geral de Desenvolvimento Web Front End
Tecnologias
Projeto de Monitoramento de Objetos Moveis• Esquema geral de um sistema Web
Clientes Servidor Banco de dados
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– ...
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/
HTML - Estrutura<html>
<head><title>Titulo Aqui<title>
<head>
<body><!– Comentario -->
</body>
</html>
HTML – Tags Gerais de Layout• http://www.w3schools.com/html/html_layout.asp
• <div> (http://www.w3schools.com/tags/tag_div.asp)– HTML 5:
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>
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)
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”/>
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>
• ...
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!
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);}
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
CSS– Seletores (http://www.w3schools.com/cssref/css_selectors.asp)
• .class• #id• *• element – div• element, elemento – div, p• element• :hover• ...
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;
}
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.
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
