Programacao Web Parte1

05/03/2015
Programao Web
Prof. MSc. Alan Souza
alan.souza@unama.br
2014
Situe-se
Programao Web
Disciplina do 4 semestre (+4 para completar)
Pr-requisitos:
Lgica de Programao
|||||
Programao Orientada a Objetos |||||
Banco de dados
|||
Idioma ingls
|||
Vai ser importante para:
Desenvolvimento de Sistemas: web;
Projeto de Interfaces Web.
05/03/2015
#Avisos
1. Voc vai precisar praticar (sozinho)!
2. No se iluda somente assistindo aulas;
3. Presena em sala escada;
4. Primeiro prestar ateno na explicao e depois fazer;
05/03/2015
Contedo resumido
1. HTML(5)
2. CSS(3)
3. Javascript
4. JEE (Java Enterprise Edition)
1. Servlets
2. Java Server Pages (JSP)
3. Integrao com Banco de Dados (JDBC)
Internet
05/03/2015
Internet
Internet
05/03/2015
Internet
Internet
05/03/2015
Internet
Internet
05/03/2015
Internet
Internet
05/03/2015
Outros acontecimentos...
2012
2012/2013
junho/2013
abril/2014
setembro/2014
janeiro/2015
Microsoft reformula o SkyDrive

GoogleDrive tambm reformulado
Crescimento do Whatsapp
Waze status do trnsito em tempo real
Marco Civil da Internet
Fim do Orkut
Whatsapp tambm pode ser usado atravs
do computador
Fonte: Pesquisa Anual do Uso de TI FGV-SP, 2014.

Link: http://eaesp.fgvsp.br/ensinoeconhecimento/centros/cia/pesquisa
05/03/2015


05/03/2015

Por que aprender HTML e CSS?

Aplicaes Web esto em alta;
Aplicaes Web x Aplicaes Standalone
10
05/03/2015

APLICAES WEB
Vantagens
S precisaria de um navegador de
internet (browser) para usar.
Escalabilidade no processamento.
Se for necessrio aumentar o poder
de processamento, basta fazer no
servidor.
Manuteno
e
atualizao
facilitada, pois estaria centrada

somente no servidor.
Multiplataforma (Windows, Linux,
Apple, Smartphones, Tablets...)
Desvantagens
necessrio possuir uma conexo
ativa com internet/intranet.
Incompatibilidade entre navegadores
de diferentes fabricantes.
Desenvolvimento de interface
complexa.
Segurana: exposio mundial.

APLICAES DESKTOP
Vantagens
Desvantagens
Dificuldade para distribuir a aplicao
Velocidade de resposta maior.
e as atualizaes (manuteno em
cada cliente).
Permite acessar recursos da Desenvolvimento
de
interface
mquina cliente (porta USB, porta simplificado.
serial...).
Segurana:
local.
exposio
somente
Chave de ativao do produto
11
05/03/2015

Boa parte ou 100% dos seus futuros projetos ir rodar no
Navegador de Internet (projetos web);
importante ter uma base de conhecimento slida em relao s
tecnologias front-end;
Imagine trabalhar em uma grfica, sem ter noo de tipos de papel,
tonalidade de cores, etc...
Navegadores de Internet
Cdigos HTML e CSS ganham vida atravs do Navegador de Internet
(conhecido como browser tambm);
INCOMPATILIBIDADE ENTRE OS DIVERSOS NAVEGADORES

EXISTENTES
12
05/03/2015
HTML Estrutura bsica 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
<h1> Isto um cabealho </h1>
<p> Isto um pargrafo. </p>
<p> Isto outro pargrafo. </p>
<a
href="http://www.google.com.br">Isto
um link para o site Google</a>
Descrio
Tag de cabealho. Pode ir de <h1> at <h6>.
medida que o nmero cresce, a letra na tela
diminui.
Tag para formar pargrafo.
Tag para formar hiperlinks para outras pginas,

para um arquivo ou para uma determinada parte
da pgina web (ncora).
O contedo de um link tambm pode ser uma
imagem.
<img
src="casa.jpg"
width="104" Tag para mostrar uma imagem na pgina HTML.
height="142" alt=Imagem de casa/>
13
05/03/2015
HTML Principais Tags

Tag
Descrio
<br> ou <br/>
Quebra de linha no texto.
<hr> ou <hr/>
Desenha uma linha separadora.
 Insere comentrio no cdigo HTML.
So ignorados pela interpretao do
browser.
<b> Texto em negrito </b>
Define o texto em negrito.
<i> Texto em itlico </i>
Define o texto em itlico.
<sub> Texto subscrito </sub> Mostra o texto subscrito.
<sup> Texto sobrescrito </sup> Mostra o texto sobrescrito.
HTML Principais Tags do HEAD

Tag
<head>
<title>
<base>
<link>
<meta>
<script>
<style>
Descrio
Define informaes sobre o documento HTML.
Define o ttulo do documento HTML.
Define o endereo padro ou um alvo padro para todos os
links da pgina.
Realiza uma relao entre um documento HTML e outros
documentos externos.
Define metadata para um documento HTML.
Define um script do tipo client-side (lado do cliente).
Define informao de estilo para o documento.
14
05/03/2015
HTML Principais Atributos HTML

Atributo
Descrio
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, no se pode repetir IDs.
style
Especifica um estilo CSS para um elemento.
title
Especifica informao extra sobre um determinado

elemento. Pode mostrar esta informao em um tool tip.
tabindex Especifica a ordem de TAB de cada elemento.
HTML Tags de Tabelas HTML

Tag
<table>
<th>
<tr>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>
Descrio
Cria a tabela.
Define uma clula de cabealho na tabela
Cria uma linha na tabela.
Cria uma clula na tabela.
Cria um ttulo para a tabela.
Especifica um ou mais grupos de colunas na tabela para formatao.
Especifica propriedades para cada coluna dentro do elemento
<colgroup>
Agrupa o contedo do cabealho da tabela.
Agrupa o contedo do corpo da tabela.
Agrupa o contedo do rodap da tabela.
15
05/03/2015
HTML Atributos de tabelas HTML

Atributo
align
border
colspan
rowspan
Descrio
Alinhamento da tabela.
Adiciona borda na tabela.
Mescla clulas dispostas em colunas.
Mescla clulas dispostas em linhas.
HTML Tags de Listas HTML

Tag
<ol>
<ul>
Descrio
Define uma lista ordenada
Define uma lista no ordenada
<li>
Define um item de uma lista
<dl>
Cria uma lista definida
<dt>
Cria um item da lista definida
<dd>
Cria uma descrio de um item de lista definida
16
05/03/2015
HTML Caracteres Especiais
à
í
ô
á
Á
À
Í
Ô
é
ó
ú
ã
Ã
É
Ó
Ú
ê
õ
ç
â
Â
Ê
Õ
Ç
Os problemas de caracteres especiais se do em virtude do tipo de

codificao de cada navegador de internet.
O ideal configurar o parmetro 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> contedo... </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 utilizao
unicamente de divs para construir o layout de um site;
17
05/03/2015
HTML O elemento DIV - Exemplo

Cdigo-fonte:
Resultado:
<div id=div1 class=classDiv1>

Contedo da div
<p> <b> Contedo da div </b> </p>
link para o Google
<a href=http://www.google.com.br/>link
para o Google</a>
</div>
HTML Exerccio 1
Gerar o cdigo HTML que
produz a tela ao lado:
18
05/03/2015
HTML Exerccio 2
A partir do cdigo HTML mostrado, desenhe/escreva o que
ser mostrado no browser.
Link para o cdigo
19

Programacao Web Parte1

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programacao Web Parte1

Enviado por

Direitos autorais:

Formatos disponíveis

05/03/2015

Microsoft reformula o SkyDrive

Fonte: Pesquisa Anual do Uso de TI FGV-SP, 2014.

Fonte: Pesquisa Anual do Uso de TI FGV-SP, 2014.

Fonte: Pesquisa Anual do Uso de TI FGV-SP, 2014.

Fonte: Pesquisa Anual do Uso de TI FGV-SP, 2014.

Por que aprender HTML e CSS?

Por que aprender HTML e CSS?

facilitada, pois estaria centrada

Apple, Smartphones, Tablets...)

Por que aprender HTML e CSS?

Chave de ativao do produto

Por que aprender HTML e CSS?

INCOMPATILIBIDADE ENTRE OS DIVERSOS NAVEGADORES

HTML Estrutura bsica do arquivo HTML

HTML Principais Tags

Tag para formar hiperlinks para outras pginas,

HTML Principais Tags

HTML Principais Tags do HEAD

HTML Principais Atributos HTML

Especifica informao extra sobre um determinado

HTML Tags de Tabelas HTML

HTML Atributos de tabelas HTML

HTML Tags de Listas HTML

Define um item de uma lista

Cria uma lista definida

Cria um item da lista definida

Cria uma descrio de um item de lista definida

HTML Caracteres Especiais

Os problemas de caracteres especiais se do em virtude do tipo de

HTML O elemento DIV

HTML O elemento DIV - Exemplo

<div id=div1 class=classDiv1>

Link para o cdigo

Você também pode gostar