SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
Curso de Java
PARTE 06
Front-End Web
Uma Introdução
HTML: principais tags / forms / request method
Request/Response
Conteúdo Estático vs Dinâmico
CSS
Java Script
por: Mário Sergio
mariosergio30@gmail.com
linkedin.com/in/mario-sergio-a1125831
Arquivos de Exemplo
GIT: https://github.com/mariosergio30/front_end.git
3
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#JavaScript_running_order
Referência:
Front-End: HTML – CSS – Java Script
Front-End: HTML – CSS – Java Script
4https://www.quora.com/What-is-the-best-way-to-learn-HTML-CSS-and-JavaScript
Referência:
Estrutura
e
Conteúdo
Formatação
Linguagem de
programação
no lado Cliente
(Interpretada pelo browser)
HTML
5
HTML é a linguagem base para desenvolver
websites. O acrônimo HTML vem do inglês e
significa Hypertext Markup Language.
- É uma linguagem de Marcação de Texto
- Utiliza TAG´s para definir a Estrutura da Página < />
- É Interpretada diretamente pelo Browser
- Não é uma Linguagem de Programação !
(pois não possui variáveis, estrutura de decisão, repetição)
HTML – Estrutura Básica
6
HTML – Exemplo Mínimo
7
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Título da página</title>
</head>
<body>
<h1>Aqui vai o texto do título</h1>
<p>Aqui vai o texto do parágrafo. Geralmente parágrafos tem muitas palavras, letras menores que as do título</p>
</body>
</html>
Abertura da Tag head
Fechamento da Tag head
Algumas tags não exigem fechamento (são exceções)
ATRIBUTO lang da Tag html (notação: atributo=“valor”)
- HTML não possui um analisador sintático rígido como nas linguagens de
programação.
- Caso você esqueça de “fechar” uma TAG, o navegador tentará resolver, mas
não haverá garantia do resultado desejado.
HTML – Ferramental Didático
8
https://www.w3schools.com/
Praticaremos HTML/CSS/JS utilizando:
https://www.mozilla.org/pt-BR/firefox/developer/
Mãos à Obra
9
Utilizaremos o w3School para conhecer e treinar os
principais elementos HTML
HTML – Table
HTML – Lista de Tags
11https://nathaliaolveira.wordpress.com/2012/01/19/htm5/
Referência:
HTML – Atributos de Manipulação de Eventos
12
Request/Response
13
Request/Response
14
Request/Response
15
Conteúdo Estático vs Conteúdo Dinâmico:
Aplicações WEB
Páginas WEB
Conteúdo Estático Conteúdo Dinâmico
java
asp.net
PHP
...
Request/Response: Chamando uma Página Dinâmica
16
Request a uma aplicação WEB em Java:
URL: http://localhost:8080/basico/startlogin?aluno=José
Request/Response: Chamando uma Página Dinâmica
17
Request a uma aplicação WEB em Java:
URL: http://localhost:8080/basico/startlogin?aluno=José&idade=5
Servidor porta mapeamento recurso parametro=valor
início dos parametros
separador
dos parametros
Quando a porta é omitida
o navegador considera a porta 80
(padrão do protocolo http)
Domínio ou IP
ex:
google.com
192.168.1.2
Protocolo
de
Comunicação
OBS: Veremos esta aplicação de BackEnd em detalhes no curso de 07 Java Web Backend
18
Request a uma aplicação WEB em Java: dados provenientes de uma consulta ao banco de dados.
Request/Response: Chamando uma Página Dinâmica
OBS: Veremos esta aplicação de BackEnd em detalhes no curso de Java Web Back-end
HTML – Forms
19
Tags HTML que permitem entrada de dados do usuário:
HTML – Elementos de um Form
20
HTML – Tag input: Atributo Type
21
URL que será chamada quando o formulário for SUBMETIDO
(destino dos dados do formulário)
Nome do parâmetro a ser passado na URL
HTML – Request Method
22https://www.javatpoint.com/get-vs-post
Saber mais:
GET:
Os dados do formulário (parâmetros)
são todos passados no cabeçalho (header)
da requisição HTTP
POST: (Mais Seguro)
Os dados do formulário (parâmetros)
são todos passados no corpo (body)
da requisição HTTP
HTML – Forms
23
Conteúdo textual da página anterior:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="../aluno/salvar" method=“POST" target="_blank">
Nome:<br>
<input type="text" name="primeiro_nome" value="Mickey">
<br>
Sobrenome:<br>
<input type="text" name="segundo_nome" value="Mouse">
<br>
Profissão:<br>
<select name="profissao">
<option value="1">Administrador</option>
<option value="2">Programador</option>
<option value="3">Médico</option>
<option value="4">Advogado</option>
</select>
<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Mãos à Obra
24
Com base no exercício anterior,
melhore seu “Sistema Escolar”:
1- Crie uma interface WEB para capturar os dados
necessários para matrícula do Aluno (use o elemento form)
2-Utilize o atributo action para direcionar os dados do
formulario para:
http://enderecodamaquinadoprofessor:8080/site/aluno/salvar
25
Front-end vs Back-end
CSS
26
Web Design: “O que o usuário vê” !!!
https://templated.co/Templates:
CSS
27
Enquanto HTML descreve “O QUE” será exibido na pagina (conteúdo), CSS descreve
“COMO” esse conteúdo deverá ser exibido (cores, posicionamento, fonts...)
CSS é a sigla para o termo em inglês
Cascading Style Sheets, que traduzido
para o português significa Folha de Estilo
em Cascatas.
Sintaxe:
Um html com múltiplos Estilos, exemplo: https://www.w3schools.com/css/css_intro.asp
CSS
28
Dentro da tag
<style>
haverá apenas
código CSS
CSS
29
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
font-family: verdana;
font-size: 300%;
}
h1, h2 {
color: blue;
}
p {
color: red;
font-family: courier;
font-size: 160%;
border: 1px solid navy;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a topic</h2>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>
Conteúdo textual da página anterior:
CSS – Onde deve ficar o Código ?
30
Há 3 maneiras diferentes de incluir código CSS:
•Internal - usando o elemento <style> dentro do elemento <head>
<head>
<style>
.....
</style>
</head>
•Inline - usando o atributo style dentro de um elemento HTML
<body style="background-color: powderblue;">
•External - usando um arquivo externo com extensão .css para incluir
apenas o código CSS.
- É preciso importar o arquivo CSS dentro do arquivo html, usando a
tag link
- Ex.: <link rel="stylesheet" type="text/css" href="css/styles.css">
CSS - Seletores
31
elemento: referencia o nome do elemento html (body, div, li, ul, ol, p...)
p {
text-align: center;
color: red;
}
classe: referencia o atributo class do elemento html
.destaque {
text-align: center;
color: red;
}
id: referencia o atributo id do elemento html
#topico1 {
text-align: center;
color: red;
}
Em CSS temos seletores de:
<h1 class="destaque">Red and center-aligned heading</h1>
<p class="destaque">Paragrafo 1.</p>
<p class="destaque" id="topico1">Paragrafo 2.</p>
Obs: o valor do id de um elemento deve ser único na página.
Conteúdo HTML
CSS/HTML - Cores
32https://www.w3schools.com/html/html_colors.aspReferência:
Atributos style Inline, para incluir código CSS
diretamente dentro do elemento
CSS/HTML - Cores
33
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:rgb(255, 255, 255);">RGB Branco</h1>
<h1 style="background-color:rgb(0, 0, 0); color: rgb(255, 255, 255">RGB Preto</h1>
<h1 style="background-color:rgb(255, 0, 0);">RGB Vermelho</h1>
<h1 style="background-color:rgb(0, 255, 0);">RGB Verde</h1>
<h1 style="background-color:rgb(0, 0, 255);">RGB Azul</h1>
<h1 style="background-color:#0000FF;">Cor HEXA</h1>
</body>
</html>
Conteúdo textual da página anterior:
CSS – Exemplo Table
34
Exemplo - Formatação de Tabelas:
CSS – Exemplo Table
35
Conteúdo textual da página anterior:
exemplo_table.css
exemplo_table.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/exemplo_table.css">
<script charset="UTF-8" src="js/aprendendo.js"></script>
</head>
<body onload="carregou()">
<h2>HTML Table</h2>
<strong>Empresa Selecionada:</strong> <span id="empresa_sel"></span>
<br>
<table id="myTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="exibe(1,0)">
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr onclick="exibe(2,0)">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr onclick="exibe(3,0)">
<td onclick="exibe(3,0)">Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr onclick="exibe(4,0)">
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr onclick="exibe(5,0)">
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr onclick="exibe(6,0)">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
#empresa_sel {
color: #0000FF;
font-weight: bold;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
text-align: center;
}
td {
text-align: left;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
CSS – Definindo Layouts
36
https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_colsReferência:
exemplo_layout.html
CSS – Definindo Layouts
37
Conteúdo CSS textual da página anterior: <style>
* {
box-sizing: border-box;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
CSS – Display
38
https://www.w3schools.com/css/css_display_visibility.aspReferência:
Faz o bloco desaparecer
CSS – Display
39
https://gridbyexample.com/examples/example1/
https://www.w3schools.com/css/css_grid.asp
Referências:
Mãos à Obra
40
Você pode utilizer o w3School para conhecer e treinar os
principais recursos CSS
Java Script
41
JavaScript uma linguagem de programação orientada a objetos
que é executada no browser (lado cliente), permitindo transformar
páginas web estáticas (html puro), em páginas dinâmicas,
complexas e ricas.
Java Script
42
- Interação com o usuário sem necessidade de processamento no lado servidor.
- Consegue manipular código html e css (DOM- Document Object Model).
Principais Vantagens:
Exemplo:
Java Script
43
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
Entendendo…
Java Script
44
https://www.seguetech.com/java-vs-javascript-difference/
Referências:
LEITURA:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript
JS – Ferramental Didático
45
https://www.w3schools.com/js/
Praticaremos Java Script utilizando:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Vis%C3%A3o_Geral
JS – Saída de Dados
46
Um simples exemplo que aborda: saída de dados, variáveis, funções, eventos e DOM
Praticar: https://www.w3schools.com/js/js_output.asp
exemplo_saidas_4maneiras.html
JS – Saída de Dados
47
Código do exemplo anterior:
<!DOCTYPE html>
<html>
<body>
<h2>No JS há 4 maneiras de exibir uma saida</h2>
<p id="resultado"></p>
<br>
<button type="button" id="botao1">Saidas com InnerHTML, alert e log</button>
<br>
<br>
<button type="button" onclick="saidaComWrite()">Saida Com documento.write()</button>
<script>
var calculo = 10 + 20;
c = "Resultado do Calculo foi: ";
function saidaComWrite() {
document.write("<h1>Saída com documento.write(), substitui todo o conteúdo existente pelo Novo</h1>!");
}
function saidaComInnerAlertLog() {
document.getElementById("resultado").innerHTML = c + calculo;
window.alert(c + calculo);
console.log(c + calculo);
}
document.getElementById("botao1").addEventListener("click", saidaComInnerAlertLog);
</script>
</body>
</html>
JS: DOM- Document Object Model
48
Recursos que permitem manipular código html e css apartir do código Java Script
JS: HTML DOM EventListener
49
Elemento HTML Evento Função a ser chamada quando o evento ocorrer
Propagação (opcional)
Exemplo:
var botao = document.getElementById("myBtn");
botao.addEventListener("mouseover", myFunction);
botao.addEventListener("click", mySecondFunction);
botao.addEventListener("mouseout", myThirdFunction);
Exemplo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_add_many2
JS: HTML DOM EventListener
50Saber mais: https://developer.mozilla.org/en-US/docs/Web/Events
Tipos de Eventos:
JS – Ferramental Didático
51
Um exemplo no https://jsfiddle.net/
Saber mais: https://developer.mozilla.org/en-US/docs/Web/Events
JS – Exemplo: DOM + Events
52
Um exemplo no https://jsfiddle.net/
function exibe(line,col) {
valor = document.getElementById("myTable").rows[line].cells.item(col).innerHTML;
document.getElementById("empresa_sel").innerHTML = valor;
alert('Você selecioneou a empresa: ' + valor);
}
function carregou() {
alert('A página foi carregada com sucesso !’);
}
Código Java Script do exemplo anterior:
Código fonte completo:
exemplo_table.html
exemplo_table.css
aprendendo.js
<body onload="carregou()">
<span id="empresa_sel"></span>
<tr onclick="exibe(1,0)">
<table id="myTable">
Manipuladores
de Evento
JS – Exemplo Avançado: DOM + Events
53
fonte completo:
exemplo_table_avancado.html
exemplo_table.css
exemplo_table_avancado.js
JS – Frameworks / Libraries / Tools
Desenvolver escrevendo código diretamente em JavaScript nos dias atuais,
considerando o nível de complexidade que as aplicações web alcançaram,
demandaria um trabalho quase que impossível de se realizar.
Com a evolução dos frameworks e libraries
para Java Script, passou a ser possível o
desenvolvimento de Rich Client Web
Applications com maior velocidade e
produtividade.
54
Obrigado

Mais conteúdo relacionado

Mais procurados

Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e ServletsJava Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
Eduardo Mendes
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Allyson Barros
 
JSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.javaJSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.java
Eduardo Bregaida
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1
Eduardo Mendes
 

Mais procurados (20)

Programação para Web II: JavaServer Pages
Programação para Web II:  JavaServer PagesProgramação para Web II:  JavaServer Pages
Programação para Web II: JavaServer Pages
 
Curso de JSP
Curso de JSPCurso de JSP
Curso de JSP
 
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e ServletsJava Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
 
JSF com Primefaces
JSF com PrimefacesJSF com Primefaces
JSF com Primefaces
 
Cake Php
Cake PhpCake Php
Cake Php
 
Java Web 1 Introducao
Java Web 1 IntroducaoJava Web 1 Introducao
Java Web 1 Introducao
 
Introdução à programação para web com Java - Módulo 03: Conceitos básicos de...
Introdução à programação para web com Java -  Módulo 03: Conceitos básicos de...Introdução à programação para web com Java -  Módulo 03: Conceitos básicos de...
Introdução à programação para web com Java - Módulo 03: Conceitos básicos de...
 
Spring Framework
Spring FrameworkSpring Framework
Spring Framework
 
Aula 1 - curso java web - JSP Java Server Page
Aula 1 - curso java web - JSP Java Server PageAula 1 - curso java web - JSP Java Server Page
Aula 1 - curso java web - JSP Java Server Page
 
Introdução à programação para web com Java - Módulo 01: Conexão com bamco de...
Introdução à programação para web com Java -  Módulo 01: Conexão com bamco de...Introdução à programação para web com Java -  Módulo 01: Conexão com bamco de...
Introdução à programação para web com Java - Módulo 01: Conexão com bamco de...
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
 
Monografia restful -_2013_-_desenvolvimento_v17-final-2014[1]
Monografia restful -_2013_-_desenvolvimento_v17-final-2014[1]Monografia restful -_2013_-_desenvolvimento_v17-final-2014[1]
Monografia restful -_2013_-_desenvolvimento_v17-final-2014[1]
 
JSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.javaJSF e outras tecnologias Java Web - IMES.java
JSF e outras tecnologias Java Web - IMES.java
 
JSPs Introdução Parte 1
JSPs Introdução Parte 1JSPs Introdução Parte 1
JSPs Introdução Parte 1
 
Tutorial +login+mvc
Tutorial +login+mvcTutorial +login+mvc
Tutorial +login+mvc
 
Bancos de dados e jdbc java para desenvolvimento web
Bancos de dados e jdbc   java para desenvolvimento webBancos de dados e jdbc   java para desenvolvimento web
Bancos de dados e jdbc java para desenvolvimento web
 
Curso jsf
Curso jsfCurso jsf
Curso jsf
 
Construindo APIs RESTful com Spring
Construindo APIs RESTful com SpringConstruindo APIs RESTful com Spring
Construindo APIs RESTful com Spring
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1
 

Semelhante a Curso de Java (Parte 6) Introdução a Front-end

Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Eduardo Bertolucci
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
LuisFalco8
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Marcelo Mattos
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 

Semelhante a Curso de Java (Parte 6) Introdução a Front-end (20)

Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
HTML
HTMLHTML
HTML
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Aula html5
Aula html5Aula html5
Aula html5
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento Web
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Manual_html.pptx Curso_Técnico Informática de Sistemas
Manual_html.pptx Curso_Técnico Informática de SistemasManual_html.pptx Curso_Técnico Informática de Sistemas
Manual_html.pptx Curso_Técnico Informática de Sistemas
 

Mais de Mario Sergio

Mais de Mario Sergio (11)

Curso de Java (Parte 4)
Curso de Java (Parte 4)Curso de Java (Parte 4)
Curso de Java (Parte 4)
 
Curso de Java (Parte 2)
 Curso de Java (Parte 2) Curso de Java (Parte 2)
Curso de Java (Parte 2)
 
Introdução a Banco de Dados (Parte 3)
Introdução a Banco de Dados (Parte 3)Introdução a Banco de Dados (Parte 3)
Introdução a Banco de Dados (Parte 3)
 
Introdução a Banco de Dados (Parte 2)
Introdução a Banco de Dados (Parte 2)Introdução a Banco de Dados (Parte 2)
Introdução a Banco de Dados (Parte 2)
 
Introdução a Banco de Dados (Parte 1)
Introdução a Banco de Dados (Parte 1)Introdução a Banco de Dados (Parte 1)
Introdução a Banco de Dados (Parte 1)
 
Comparação Sintaxe Portugol vs Java
Comparação Sintaxe Portugol vs JavaComparação Sintaxe Portugol vs Java
Comparação Sintaxe Portugol vs Java
 
Curso de Java (Parte 3)
 Curso de Java (Parte 3) Curso de Java (Parte 3)
Curso de Java (Parte 3)
 
Curso de Java (Parte 1)
Curso de Java (Parte 1)Curso de Java (Parte 1)
Curso de Java (Parte 1)
 
Introdução à Programação
Introdução à ProgramaçãoIntrodução à Programação
Introdução à Programação
 
Bancode dados modelagem conceitual
Bancode dados modelagem conceitualBancode dados modelagem conceitual
Bancode dados modelagem conceitual
 
Educação Tecnológica com Raspberry Pi
Educação Tecnológica com Raspberry PiEducação Tecnológica com Raspberry Pi
Educação Tecnológica com Raspberry Pi
 

Último

Último (9)

ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 

Curso de Java (Parte 6) Introdução a Front-end

  • 1. Curso de Java PARTE 06 Front-End Web Uma Introdução HTML: principais tags / forms / request method Request/Response Conteúdo Estático vs Dinâmico CSS Java Script por: Mário Sergio mariosergio30@gmail.com linkedin.com/in/mario-sergio-a1125831
  • 2. Arquivos de Exemplo GIT: https://github.com/mariosergio30/front_end.git
  • 4. Front-End: HTML – CSS – Java Script 4https://www.quora.com/What-is-the-best-way-to-learn-HTML-CSS-and-JavaScript Referência: Estrutura e Conteúdo Formatação Linguagem de programação no lado Cliente (Interpretada pelo browser)
  • 5. HTML 5 HTML é a linguagem base para desenvolver websites. O acrônimo HTML vem do inglês e significa Hypertext Markup Language. - É uma linguagem de Marcação de Texto - Utiliza TAG´s para definir a Estrutura da Página < /> - É Interpretada diretamente pelo Browser - Não é uma Linguagem de Programação ! (pois não possui variáveis, estrutura de decisão, repetição)
  • 6. HTML – Estrutura Básica 6
  • 7. HTML – Exemplo Mínimo 7 <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Título da página</title> </head> <body> <h1>Aqui vai o texto do título</h1> <p>Aqui vai o texto do parágrafo. Geralmente parágrafos tem muitas palavras, letras menores que as do título</p> </body> </html> Abertura da Tag head Fechamento da Tag head Algumas tags não exigem fechamento (são exceções) ATRIBUTO lang da Tag html (notação: atributo=“valor”) - HTML não possui um analisador sintático rígido como nas linguagens de programação. - Caso você esqueça de “fechar” uma TAG, o navegador tentará resolver, mas não haverá garantia do resultado desejado.
  • 8. HTML – Ferramental Didático 8 https://www.w3schools.com/ Praticaremos HTML/CSS/JS utilizando: https://www.mozilla.org/pt-BR/firefox/developer/
  • 9. Mãos à Obra 9 Utilizaremos o w3School para conhecer e treinar os principais elementos HTML
  • 11. HTML – Lista de Tags 11https://nathaliaolveira.wordpress.com/2012/01/19/htm5/ Referência:
  • 12. HTML – Atributos de Manipulação de Eventos 12
  • 15. Request/Response 15 Conteúdo Estático vs Conteúdo Dinâmico: Aplicações WEB Páginas WEB Conteúdo Estático Conteúdo Dinâmico java asp.net PHP ...
  • 16. Request/Response: Chamando uma Página Dinâmica 16 Request a uma aplicação WEB em Java: URL: http://localhost:8080/basico/startlogin?aluno=José
  • 17. Request/Response: Chamando uma Página Dinâmica 17 Request a uma aplicação WEB em Java: URL: http://localhost:8080/basico/startlogin?aluno=José&idade=5 Servidor porta mapeamento recurso parametro=valor início dos parametros separador dos parametros Quando a porta é omitida o navegador considera a porta 80 (padrão do protocolo http) Domínio ou IP ex: google.com 192.168.1.2 Protocolo de Comunicação OBS: Veremos esta aplicação de BackEnd em detalhes no curso de 07 Java Web Backend
  • 18. 18 Request a uma aplicação WEB em Java: dados provenientes de uma consulta ao banco de dados. Request/Response: Chamando uma Página Dinâmica OBS: Veremos esta aplicação de BackEnd em detalhes no curso de Java Web Back-end
  • 19. HTML – Forms 19 Tags HTML que permitem entrada de dados do usuário:
  • 20. HTML – Elementos de um Form 20
  • 21. HTML – Tag input: Atributo Type 21 URL que será chamada quando o formulário for SUBMETIDO (destino dos dados do formulário) Nome do parâmetro a ser passado na URL
  • 22. HTML – Request Method 22https://www.javatpoint.com/get-vs-post Saber mais: GET: Os dados do formulário (parâmetros) são todos passados no cabeçalho (header) da requisição HTTP POST: (Mais Seguro) Os dados do formulário (parâmetros) são todos passados no corpo (body) da requisição HTTP
  • 23. HTML – Forms 23 Conteúdo textual da página anterior: <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="../aluno/salvar" method=“POST" target="_blank"> Nome:<br> <input type="text" name="primeiro_nome" value="Mickey"> <br> Sobrenome:<br> <input type="text" name="segundo_nome" value="Mouse"> <br> Profissão:<br> <select name="profissao"> <option value="1">Administrador</option> <option value="2">Programador</option> <option value="3">Médico</option> <option value="4">Advogado</option> </select> <br><br> <input type="submit" value="Enviar"> </form> </body> </html>
  • 24. Mãos à Obra 24 Com base no exercício anterior, melhore seu “Sistema Escolar”: 1- Crie uma interface WEB para capturar os dados necessários para matrícula do Aluno (use o elemento form) 2-Utilize o atributo action para direcionar os dados do formulario para: http://enderecodamaquinadoprofessor:8080/site/aluno/salvar
  • 26. CSS 26 Web Design: “O que o usuário vê” !!! https://templated.co/Templates:
  • 27. CSS 27 Enquanto HTML descreve “O QUE” será exibido na pagina (conteúdo), CSS descreve “COMO” esse conteúdo deverá ser exibido (cores, posicionamento, fonts...) CSS é a sigla para o termo em inglês Cascading Style Sheets, que traduzido para o português significa Folha de Estilo em Cascatas. Sintaxe: Um html com múltiplos Estilos, exemplo: https://www.w3schools.com/css/css_intro.asp
  • 29. CSS 29 <!DOCTYPE html> <html> <head> <style> body { background-color: powderblue; } h1 { font-family: verdana; font-size: 300%; } h1, h2 { color: blue; } p { color: red; font-family: courier; font-size: 160%; border: 1px solid navy; padding: 30px; } </style> </head> <body> <h1>This is a heading</h1> <h2>This is a topic</h2> <p>This is paragraph 1.</p> <p>This is paragraph 2.</p> <p>This is paragraph 3.</p> </body> </html> Conteúdo textual da página anterior:
  • 30. CSS – Onde deve ficar o Código ? 30 Há 3 maneiras diferentes de incluir código CSS: •Internal - usando o elemento <style> dentro do elemento <head> <head> <style> ..... </style> </head> •Inline - usando o atributo style dentro de um elemento HTML <body style="background-color: powderblue;"> •External - usando um arquivo externo com extensão .css para incluir apenas o código CSS. - É preciso importar o arquivo CSS dentro do arquivo html, usando a tag link - Ex.: <link rel="stylesheet" type="text/css" href="css/styles.css">
  • 31. CSS - Seletores 31 elemento: referencia o nome do elemento html (body, div, li, ul, ol, p...) p { text-align: center; color: red; } classe: referencia o atributo class do elemento html .destaque { text-align: center; color: red; } id: referencia o atributo id do elemento html #topico1 { text-align: center; color: red; } Em CSS temos seletores de: <h1 class="destaque">Red and center-aligned heading</h1> <p class="destaque">Paragrafo 1.</p> <p class="destaque" id="topico1">Paragrafo 2.</p> Obs: o valor do id de um elemento deve ser único na página. Conteúdo HTML
  • 32. CSS/HTML - Cores 32https://www.w3schools.com/html/html_colors.aspReferência: Atributos style Inline, para incluir código CSS diretamente dentro do elemento
  • 33. CSS/HTML - Cores 33 <!DOCTYPE html> <html> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:LightGray;">LightGray</h1> <h1 style="background-color:rgb(255, 255, 255);">RGB Branco</h1> <h1 style="background-color:rgb(0, 0, 0); color: rgb(255, 255, 255">RGB Preto</h1> <h1 style="background-color:rgb(255, 0, 0);">RGB Vermelho</h1> <h1 style="background-color:rgb(0, 255, 0);">RGB Verde</h1> <h1 style="background-color:rgb(0, 0, 255);">RGB Azul</h1> <h1 style="background-color:#0000FF;">Cor HEXA</h1> </body> </html> Conteúdo textual da página anterior:
  • 34. CSS – Exemplo Table 34 Exemplo - Formatação de Tabelas:
  • 35. CSS – Exemplo Table 35 Conteúdo textual da página anterior: exemplo_table.css exemplo_table.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/exemplo_table.css"> <script charset="UTF-8" src="js/aprendendo.js"></script> </head> <body onload="carregou()"> <h2>HTML Table</h2> <strong>Empresa Selecionada:</strong> <span id="empresa_sel"></span> <br> <table id="myTable"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr onclick="exibe(1,0)"> <td >Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr onclick="exibe(2,0)"> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr onclick="exibe(3,0)"> <td onclick="exibe(3,0)">Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr onclick="exibe(4,0)"> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr onclick="exibe(5,0)"> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr onclick="exibe(6,0)"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </body> </html> #empresa_sel { color: #0000FF; font-weight: bold; } table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } th { text-align: center; } td { text-align: left; } td, th { border: 1px solid #dddddd; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
  • 36. CSS – Definindo Layouts 36 https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_colsReferência: exemplo_layout.html
  • 37. CSS – Definindo Layouts 37 Conteúdo CSS textual da página anterior: <style> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } </style>
  • 40. Mãos à Obra 40 Você pode utilizer o w3School para conhecer e treinar os principais recursos CSS
  • 41. Java Script 41 JavaScript uma linguagem de programação orientada a objetos que é executada no browser (lado cliente), permitindo transformar páginas web estáticas (html puro), em páginas dinâmicas, complexas e ricas.
  • 42. Java Script 42 - Interação com o usuário sem necessidade de processamento no lado servidor. - Consegue manipular código html e css (DOM- Document Object Model). Principais Vantagens: Exemplo:
  • 45. JS – Ferramental Didático 45 https://www.w3schools.com/js/ Praticaremos Java Script utilizando: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Vis%C3%A3o_Geral
  • 46. JS – Saída de Dados 46 Um simples exemplo que aborda: saída de dados, variáveis, funções, eventos e DOM Praticar: https://www.w3schools.com/js/js_output.asp exemplo_saidas_4maneiras.html
  • 47. JS – Saída de Dados 47 Código do exemplo anterior: <!DOCTYPE html> <html> <body> <h2>No JS há 4 maneiras de exibir uma saida</h2> <p id="resultado"></p> <br> <button type="button" id="botao1">Saidas com InnerHTML, alert e log</button> <br> <br> <button type="button" onclick="saidaComWrite()">Saida Com documento.write()</button> <script> var calculo = 10 + 20; c = "Resultado do Calculo foi: "; function saidaComWrite() { document.write("<h1>Saída com documento.write(), substitui todo o conteúdo existente pelo Novo</h1>!"); } function saidaComInnerAlertLog() { document.getElementById("resultado").innerHTML = c + calculo; window.alert(c + calculo); console.log(c + calculo); } document.getElementById("botao1").addEventListener("click", saidaComInnerAlertLog); </script> </body> </html>
  • 48. JS: DOM- Document Object Model 48 Recursos que permitem manipular código html e css apartir do código Java Script
  • 49. JS: HTML DOM EventListener 49 Elemento HTML Evento Função a ser chamada quando o evento ocorrer Propagação (opcional) Exemplo: var botao = document.getElementById("myBtn"); botao.addEventListener("mouseover", myFunction); botao.addEventListener("click", mySecondFunction); botao.addEventListener("mouseout", myThirdFunction); Exemplo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_add_many2
  • 50. JS: HTML DOM EventListener 50Saber mais: https://developer.mozilla.org/en-US/docs/Web/Events Tipos de Eventos:
  • 51. JS – Ferramental Didático 51 Um exemplo no https://jsfiddle.net/ Saber mais: https://developer.mozilla.org/en-US/docs/Web/Events
  • 52. JS – Exemplo: DOM + Events 52 Um exemplo no https://jsfiddle.net/ function exibe(line,col) { valor = document.getElementById("myTable").rows[line].cells.item(col).innerHTML; document.getElementById("empresa_sel").innerHTML = valor; alert('Você selecioneou a empresa: ' + valor); } function carregou() { alert('A página foi carregada com sucesso !’); } Código Java Script do exemplo anterior: Código fonte completo: exemplo_table.html exemplo_table.css aprendendo.js <body onload="carregou()"> <span id="empresa_sel"></span> <tr onclick="exibe(1,0)"> <table id="myTable"> Manipuladores de Evento
  • 53. JS – Exemplo Avançado: DOM + Events 53 fonte completo: exemplo_table_avancado.html exemplo_table.css exemplo_table_avancado.js
  • 54. JS – Frameworks / Libraries / Tools Desenvolver escrevendo código diretamente em JavaScript nos dias atuais, considerando o nível de complexidade que as aplicações web alcançaram, demandaria um trabalho quase que impossível de se realizar. Com a evolução dos frameworks e libraries para Java Script, passou a ser possível o desenvolvimento de Rich Client Web Applications com maior velocidade e produtividade. 54