Post on 22-Dec-2015
description
05/03/2015
1
Programação WebProf. MSc. Alan Souza
alan.souza@unama.br
2014
Situe-seProgramação Web
Disciplina do 4º semestre (+4 para completar)
Pré-requisitos:
• Lógica de Programação |||||
• Programação Orientada a Objetos |||||
• Banco de dados |||
• Idioma inglês |||
Vai ser importante para:
• Desenvolvimento de Sistemas: web;
• Projeto de Interfaces Web.
05/03/2015
2
#Avisos
1. Você vai precisar praticar (sozinho)!
2. Não se iluda somente assistindo aulas;
3. Presença em sala escada;
4. Primeiro prestar atenção na explicação e depois fazer;
05/03/2015
3
Conteúdo resumido
1. HTML(5)
2. CSS(3)
3. Javascript
4. JEE (Java Enterprise Edition)
1. Servlets
2. Java Server Pages (JSP)
3. Integração com Banco de Dados (JDBC)
Internet
05/03/2015
4
Internet
Internet
05/03/2015
5
Internet
Internet
05/03/2015
6
Internet
Internet
05/03/2015
7
Internet
Internet
05/03/2015
8
Outros acontecimentos...
2012 Microsoft reformula o SkyDriveGoogleDrive também reformulado
2012/2013 Crescimento do Whatsapp
junho/2013 Waze – status do trânsito em tempo real
abril/2014 Marco Civil da Internet
setembro/2014 Fim do Orkut
janeiro/2015 Whatsapp também pode ser usado através do computador
Fonte: Pesquisa Anual do Uso de TI – FGV-SP, 2014.Link: http://eaesp.fgvsp.br/ensinoeconhecimento/centros/cia/pesquisa
05/03/2015
9
Fonte: Pesquisa Anual do Uso de TI – FGV-SP, 2014.Link: http://eaesp.fgvsp.br/ensinoeconhecimento/centros/cia/pesquisa
Fonte: Pesquisa Anual do Uso de TI – FGV-SP, 2014.Link: http://eaesp.fgvsp.br/ensinoeconhecimento/centros/cia/pesquisa
05/03/2015
10
Fonte: Pesquisa Anual do Uso de TI – FGV-SP, 2014.Link: http://eaesp.fgvsp.br/ensinoeconhecimento/centros/cia/pesquisa
Aplicações Web estão em alta;
Aplicações Web x Aplicações Standalone
Por que aprender HTML e CSS?
05/03/2015
11
Por que aprender HTML e CSS?
APLICAÇÕES WEB
Vantagens Desvantagens
Só precisaria de um navegador de
internet (browser) para usar.
É necessário possuir uma conexão
ativa com internet/intranet.
Escalabilidade no processamento.
Se for necessário aumentar o poder
de processamento, basta fazer no
servidor.
Incompatibilidade entre navegadores
de diferentes fabricantes.
Manutenção e atualização
facilitada, pois estaria centrada
somente no servidor.
Desenvolvimento de interface
complexa.
Multiplataforma (Windows, Linux,
Apple, Smartphones, Tablets...) Segurança: exposição mundial.
Por que aprender HTML e CSS?
APLICAÇÕES DESKTOP
Vantagens Desvantagens
Velocidade de resposta maior.
Dificuldade para distribuir a aplicação
e as atualizações (manutenção em
cada cliente).
Permite acessar recursos da
máquina cliente (porta USB, porta
serial...).
Desenvolvimento de interface
simplificado.
Segurança: exposição somente
local.•Chave de ativação do produto
05/03/2015
12
Por que aprender HTML e CSS?
• Boa parte ou 100% dos seus futuros projetos irá rodar no Navegador de Internet (projetos web);
• É importante ter uma base de conhecimento sólida em relação às tecnologias front-end;
• Imagine trabalhar em uma gráfica, sem ter noção de tipos de papel, tonalidade de cores, etc...
Navegadores de Internet
• Códigos HTML e CSS ganham vida através do Navegador de Internet(conhecido como browser também);
• INCOMPATILIBIDADE ENTRE OS DIVERSOS NAVEGADORESEXISTENTES
05/03/2015
13
HTML – Estrutura básica do arquivo HTML
<!doctype html>
<html>
<head>
<title>Estrutura do arquivo HTML</title>
</head>
<body>
<p>Exemplo de parágrafo HTML</p>
</body>
</html>
HTML – Principais Tags
Exemplo de Tag Descrição
<h1> Isto é um cabeçalho </h1>
<h2> Isto é um cabeçalho </h2>
<h3> Isto é um cabeçalho </h3>
Tag de cabeçalho. Pode ir de <h1> até <h6>. À
medida que o número cresce, a letra na tela
diminui.
<p> Isto é um parágrafo. </p>
<p> Isto é outro parágrafo. </p>
Tag para formar parágrafo.
<a
href="http://www.google.com.br">Isto
é um link para o site Google</a>
Tag para formar hiperlinks para outras páginas,
para um arquivo ou para uma determinada parte
da página web (âncora).
O conteúdo de um link também pode ser uma
imagem.
<img src="casa.jpg" width="104"
height="142" alt=”Imagem de casa”/>
Tag para mostrar uma imagem na página HTML.
05/03/2015
14
Tag Descrição
<br> ou <br/> Quebra de linha no texto.
<hr> ou <hr/> Desenha uma linha separadora.
<!-- Isto é um comentário --> Insere comentário no código HTML.
São ignorados pela interpretação do
browser.
<b> Texto em negrito </b> Define o texto em negrito.
<i> Texto em itálico </i> Define o texto em itálico.
<sub> Texto subscrito </sub> Mostra o texto subscrito.
<sup> Texto sobrescrito </sup> Mostra o texto sobrescrito.
HTML – Principais Tags
HTML – Principais Tags do HEAD
Tag Descrição
<head> Define informações sobre o documento HTML.
<title> Define o título do documento HTML.
<base> Define o endereço padrão ou um alvo padrão para todos os
links da página.
<link> Realiza uma relação entre um documento HTML e outros
documentos externos.
<meta> Define metadata para um documento HTML.
<script> Define um script do tipo client-side (lado do cliente).
<style> Define informação de estilo para o documento.
05/03/2015
15
HTML – Principais Atributos HTML
Atributo Descrição
class Especifica um ou mais nome de classe para um elemento.
Serve para referir classes de estilo CSS.
id Especifica um único identificador para um elemento. Em
XHTML, não se pode repetir IDs.
style Especifica um estilo CSS para um elemento.
title Especifica informação extra sobre um determinado
elemento. Pode mostrar esta informação em um tool tip.
tabindex Especifica a ordem de TAB de cada elemento.
HTML – Tags de Tabelas HTML
Tag Descrição
<table> Cria a tabela.
<th> Define uma célula de cabeçalho na tabela
<tr> Cria uma linha na tabela.
<td> Cria uma célula na tabela.
<caption> Cria um título para a tabela.
<colgroup> Especifica um ou mais grupos de colunas na tabela para formatação.
<col> Especifica propriedades para cada coluna dentro do elemento
<colgroup>
<thead> Agrupa o conteúdo do cabeçalho da tabela.
<tbody> Agrupa o conteúdo do corpo da tabela.
<tfoot> Agrupa o conteúdo do rodapé da tabela.
05/03/2015
16
HTML – Atributos de tabelas HTML
Atributo Descrição
align Alinhamento da tabela.
border Adiciona borda na tabela.
colspan Mescla células dispostas em colunas.
rowspan Mescla células dispostas em linhas.
HTML – Tags de Listas HTML
Tag Descrição
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item de uma lista
<dl> Cria uma lista definida
<dt> Cria um item da lista definida
<dd> Cria uma descrição de um item de lista definida
05/03/2015
17
HTML – Caracteres Especiais
á á Á Á ã ã Ã Ã â â Â Â
à à À À é é É É ê ê Ê Ê
í í Í Í ó ó Ó Ó õ õ Õ Õ
ô ô Ô Ô ú ú Ú Ú ç ç Ç Ç
• Os problemas de caracteres especiais se dão em virtude do tipo decodificação de cada navegador de internet.
• O ideal é configurar o parâmetro charset com o valor UFT-8 dentro do head:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
HTML – O elemento DIV
1.Trata-se de uma tag, escrita como <div> conteúdo... </div>,
que serve para criar blocos no arquivo HTML;
2.Hoje em dia, é muito utilizada para criar layouts, pois se
integra facilmente com folhas de estilo;
3.É a base do conceito de “tabless”, que significa a utilização
unicamente de divs para construir o layout de um site;
05/03/2015
18
HTML – O elemento DIV - Exemplo
Código-fonte: <div id=”div1” class=”classDiv1”> <p> <b> Conteúdo da div </b> </p> <a href=”http://www.google.com.br/”>link para o Google</a> </div>
Resultado: Conteúdo da div link para o Google
HTML – Exercício 1
Gerar o código HTML que
produz a tela ao lado:
05/03/2015
19
HTML – Exercício 2
A partir do código HTML mostrado, desenhe/escreva o que
será mostrado no browser.
Link para o código