Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Visão Geral Front End
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
*
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
@Override
protected 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 exibidoMateriais relacionados
3 pág.
Perguntas relacionadas
Compartilhar