(PET) Desenvolvimento Web I

Desenvolvimento Web I
Kelyson Nunes dos Santos

PET-CC
Conteúdo
1. Introdução ao Desenvolvimento Web;
2. Páginas Estáticas e Páginas Dinâmicas;
3. Padronização em Construção de Páginas Web;
4. Introdução ao (X)HTML;
5. Introdução a Folhas de Estilo e CSS;
6. Introdução a Javascript;
7. Apresentação de Ferramentas para Construção de
Páginas Web;
8. Construção de Aplicação integrando as
tecnologias abordadas.
Objetivos
 Introdução
 Prática
 Exemplo
Desenvolvimento Web
 Arquitetura Cliente-Servidor
• Requisição e Resposta
• Destinatário Correto
 Identificação de Portas
 Resolução de Nomes
• Serviço “Desnecessário”
Páginas Estáticas e Dinâmicas
 Páginas Estáticas
• Conteúdo Imutável
• Layout Igual
 Páginas Dinâmicas
• Conteúdo Dinâmico e Personalizável
• Layout Dinâmico
• Funcionalidades
 Clientes Gordo e Magro
Tecnologias
 HTML;  Perl;
 XHTML;  Ruby;
 XML;  ASP.NET;
 CSS;  MySQL;
 Javascript;  SQL Server;
 PHP;  PostgreSQL;
 Java; ...
 C;
Padronização
 Órgãos de Padronização Web

 W3C
• Bons Tutoriais!
• Ótimos Guias de Referência!
• www.w3schools.com
Validação
 Possível para as Linguagens de Marcação

• (X)HTML
 http://validator.w3.org/
• CSS
 http://jigsaw.w3.org/css-validator/
 Vários Parâmetros para Validação

HTML
 HyperText Markup Language

 Linguagem de Marcação Baseada em Texto
 Interpretada
 Nascida da Junção de dois padrões
• HyTime
• SGML
 Objetivo?
• Informar dados de pesquisa!
HTML: Linguagem de Hipertexto
 O HTML foi concebido para viabilizar

ligações entre dados.
 Hipertextos e Hiperdocumentos
HTML: O que é preciso?
 Editor de Texto;
 Navegador Web;
 Protocolos de Rede.
 Ferramentas para auxiliar na construção de
HTML
• Adobe DreamWeaver; • Kate;
• NVU; • Microsoft Frontpage;
• Notepad++; • Namo Web Editor;
• Bloco de Notas; • Microsoft Visual
Studio;
• Bluefish;
• Vim etc.
Porque não vamos usar?
 Introdução
 Liberdade no Desenvolvimento
 Conhecimento Aprofundado
• Gambiarras!! xD
 Mas...
• É indicado usar essas ferramentas!
Convenções do HTML
 Tags
<tag att=“value”> ... </tag>
 tag: Marcação a ser definida
 att: Atributo
 value: valor do atributo
• É quem realmente manda!
Primeiro HTML
<html>
<head>
<title>Primeiro HTML</title>
</head>
<body>
<h1>Primeiro HTML!</h1>
</body>
</html>
Divisões do HTML
<html>
<head>
Delimitação do HTML
Cabeçalho
</head>
<body>
Corpo
</body>
</html>
Padronização do Primeiro HTML
 Indicado!
 Por quê?
• Facilidade de Extensão
• Facilidade de Compreensão e Manutenção
 O que é necessário?
• Definição do Tipo de Arquivo
• Codificação dos Caracteres

XHTML/XML
 XML é uma linguagem para Definir Dados.

 HTML é uma linguagem para Exibir Dados.
 Hoje, a web tende a entender os dados.
 E os dados, para fazerem sentido, devem ser
exibidos.
 Nada melhor do que unir as forças do HTML
com o XML.
 Então surge o XHTML.
XHTML
 Além de computadores convencionais, mais

dispositivos móveis exibem páginas web.
 É importante que o designer se preocupe com
esses aparelhos.
 Normalmente, esses dispositivos não tem
recursos ou poder para processar HTML ruim.
 Por isso, com a definição de dados, é mais
fácil para o dispositivo exibir os dados.
Requisitos de XHTML
 Tags abertas devem ser fechadas;

<br />
 Tags devem conter outras;
<b><i>Texto em Negrito e Itálico.</i></b>
<b><i>Esse texto não está em XHTML.</b></i>
 TUDO deve estar em minúsculo;
 Só deve haver um elemento raiz HTML.
Primeiro HTML [de verdade!]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>
Doctype
 Não é necessariamente uma tag HTML.

 Instrução ao navegador sobre a versão do
HTML utilizado para a construção da página.
 Versões Recomendadas
• HTML 4.01 (Strict, Transitional e Frameset)
• XHTML 1.0 (Strict, Transitional e Frameset)
• XHTML 1.1
Principais Tags
Head
 Algumas tags podem ser definidas no

cabeçalho do arquivo.
 Outras DEVEM ser definidas no HTML 4.0.
 Pode conter a definição das seguintes tags:
• base • script
• link • meta
• style • title
Head
 Título:
<title>Título da Página</title>
 meta: informa metadados sobre o arquivo.
• Atributos:
 content
 http-equiv
 name
 schema (esquema de interpretação de dados)

Body
 background
background=“background.jpg”
 bgcolor
 text
 link
 alink
 vlink
att=“#RRGGBB”
Cabeçalho
 Pode Variar de 1 a 6
 Indica o tamanho e formatação da fonte
<hn> Cabeçalho Aqui! </hn>
 Atributo: align
 Center
 Left
 Right
 Justify
Parágrafo
 Delimita um parágrafo
 Espaço após o parágrafo.
<p> Seu parágrafo Aqui </p>
 Quebra de linha
• Quebra forçada
Texto.<br>Esse texto irá para outra linha.

 No XHTML, é necessário usar <br />.
Fontes
 Formata o texto da página.

 Atributos:
• face
 Indica o estilo da fonte
• size
 Indica o tamanho da letra
• color
 Em RGB: #RRGGBB
Links
 Documentos fazem ligação semântica com

outros
 Os hiperlinks do HTML viabilizam essa
ligação!
<a href=“ligacao.html” />
 Atributos
• href
• name
• target (onde abrir o documento)

Imagens
 Image
 Atributos:
• src: fonte
• alt: texto alternativo (obrigatório no XHTML)
• height
• width
<img src=“bola.jpg” alt=“Bola”

height=“120px” width=“15%” />
Listas
 Inevitavelmente, é necessário listar algo.

 HTML dá suporte!
• Listas Ordenadas: <ol>
• Listas Não-Ordenadas: <ul>
• Listas de Definições: <dl>

Lista Ordenada
<ol>
<li>Item 1</li>
...
<li>Item n</li>
</ol>
Lista Não-Ordenada
<ul>
<li>Item 1</li>
...
<li>Item n</li>
</ul>
Lista de Definições
<dl>
<dt>Goiaba</dt>
<dd>Fruta tropical de sabor
característico</dd>
...
</dl>
Outras Tags Interessantes
 Linha horizontal: <hr>

 Negrito: <b>Negrito</b>
 Itálico: <i>Itálico</i>
 Sublinhado: <u>Sublinhado</u>
 Código-Fonte:
<code><? echo “Hello, World!”?>;</code>
 Delimitação Lógica:
• fieldset/div
Exemplo
 Suponha que uma loja da cidade está lhe

contratando para o desenvolvimento de uma
página web e o modelo adotado para o
desenvolvimento será incremental.
 A empresa exige que a cada etapa da
construção, seja apresentado um protótipo
do projeto e algumas exigências são feitas:
• Página Inicial
• Página de Produtos
• Páginas dos Produtos (Descrição detalhada)
• Formulário para Contato

Exemplo
 No primeiro momento, a empresa pede uma

simples página inicial com a descrição dos
serviços da empresa.
 É de sua responsabilidade a criação da
identidade visual da empresa. Devem ser
escolhidas cores que não sejam cansativas à
vista do usuário e que prendam a atenção do
mesmo aos serviços.
 Assim, é importante que seja mantido um
esquema de cores para todas as páginas.
Mãos À Obra!
Melhorando o Design
 Até agora, não temos nada demais na página.

 Mas já conseguimos tudo que é possível
fazer com o que sabemos.
 Tabelas!
Tabelas
 Em HTML, o conceito é um pouco diferente:

• Ao invés de colunas, temos apenas células.
 Títulos de Colunas (th)

Tabelas
<table>
<tr>
<th>Título01</th><th>Título02</th>
</tr>
<tr>
<td>Célula01</td><td>Célula02</td>
</tr>
</table>
Tabelas
 Atributos
• border
• align
• bgcolor
• frame (bordas externas)
• rules (bordas internas)
• summary (índice de conteúdo)
• width
• cellpadding (espaço interno da célula)
• Cellspacing (espaço entre células)
Tabelas
 Linhas
• align
• valign
 Células
• rowspan: linhas mais largas
• colspan: colunas mais largas
• height
• Width
Tabelas
 Cabeçalho
<thead> ... </thead>
 Corpo
 Rodapé
 Não afetam o layout

 Mas são importantes para definir o estilo!
Exemplo
 O seu chefe gostou da primeira versão da

página web. Mas ele sabe que você está
aprendendo novas tecnologias e quer algo
mais organizado no que já existe.
 Aprimore a versão atual da sua página e
surpreenda seu chefe com algumas novidades
na página.
 Utilize tabelas para alterar o layout.
 Crie ligações com outras páginas através de
um menu.
Formulários
 Internet: Transmissão de Informações

 As informações precisam surgir!
 Formulários: entrada de dados para a
internet.
 Possuem a mesma ideia de formulários
impressos.
 Vários tipos de dados podem ser informados
através de um formulário das mais variadas
formas possíveis.
Formulários
 Form
• Atributo Obrigatório: action
• Atributos Opcionais:
 accept-charset
 Accept (filtro de arquivos)
 enctype
 method (padrão: get)
 name
Entrada de Dados
 Tipos de Entrada <input type=
• Texto “text” />
• Checkbox “checkbox” />
• Arquivo “file” />
• Senha “password” />
• Submissão “submit” />
• Escolha Única “radio” />
• Apagar Campos “reset” />

Entrada de Dados
 Atributos
• Checked
• Maxlength
• Name
• Readonly
• Size
• Src
• Value
Entrada de Textos
 Texto de Uma Linha

Nome: <input type=“text” name=“nome” />
 Área de Texto
<textarea cols=“15” rows=“5”>Insira seu
texto aqui...</textarea>
 Senha
<input type=“password” name=“senha” />
Listas de Única Opção
 Também conhecidos como Radio Buttons.

<input type=“radio” name=“sexo” value=“M” />
<input type=“radio” name=“sexo” value=“F” />
 Faz mais sentido quando possui mais de uma

opção!
Listas para Múltipla Escolha
 Também conhecidos como Checkboxes.

<input type=“checkbox” name=“musica”
value=“Samba” />
value=“Bossa Nova” />
value=“Pop” />
 Podem aparecer sozinhos.

Submissão de Formulários
 Botão para Submissão

<input type=“submit” value=“Enviar” />
 Campo Oculto
• Útil para identificar um conteúdo de
formulário “desnecessário” ao usuário final ou
sem opções (páginas dinâmicas)
<input type=“hidden” value=“root” />

Listas de Seleção
 Também conhecidas como Combobox.

 Apresentam uma lista de opções:
<select name=“frutaPreferida”>
<option>Maçã</option>
<option>Goiaba</option>
<option>Uva</option>
<option>Jaca</option>
</select>
Listas de Seleção
 Também aceitam outros atributos.

 Atributos opcionais:
• Disabled
• Multiple
• Size (Quantidade de Opções Visíveis)

Exercício
 Sua página web está fazendo sucesso. Tanto

que mais funcionalidades estão sendo
requisitadas.
 A mais nova requisição foi um formulário de
pedidos e mensagens para os funcionários da
empresa. Mas cada envio de formulário
apenas enviará um tipo de requisição.
 Deve haver uma caixa de seleção para
pedidos e mensagens. Os cargos devem ser
exibidos para escolha em lista e os
produtos em escolha múltipla.
HTML 4.0
 HTML não foi concebido para realizar a

formatação de documentos, mas sim para
defini-los.
 Na nova versão, TODOS os elementos de
formatação foram retirados.
 A ideia é utilizar arquivos externos para
realizar a formatação.
 Solução?
CSS
Cascade StyleSheet
Na próxima semana...
 CSS
• Retirando a formatação e aplicando o HTML 4.0!
• Criando classes de elementos
• Identificando elementos específicos
 Javascript
• A programação do lado do cliente
• Introduzindo dinamicidade e interação à página
• Programando com um Navegador Web

Contato
Kelyson Nunes dos Santos

kelyson@gmail.com
Ciência da Computação - UFRN – 2006
Bolsista do PET-CC

(PET) Desenvolvimento Web I

Enviado por

Dados do documento

Título original

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

(PET) Desenvolvimento Web I

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento Web I

Kelyson Nunes dos Santos

 Órgãos de Padronização Web

• Ótimos Guias de Referência!

 Possível para as Linguagens de Marcação

 Vários Parâmetros para Validação

 HyperText Markup Language

 O HTML foi concebido para viabilizar

• Facilidade de Compreensão e Manutenção

• Codificação dos Caracteres

 XML é uma linguagem para Definir Dados.

 Além de computadores convencionais, mais

 Tags abertas devem ser fechadas;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

 Não é necessariamente uma tag HTML.

• XHTML 1.0 (Strict, Transitional e Frameset)

 Algumas tags podem ser definidas no

 schema (esquema de interpretação de dados)

Texto.<br>Esse texto irá para outra linha.

 Formata o texto da página.

 Documentos fazem ligação semântica com

• target (onde abrir o documento)

• alt: texto alternativo (obrigatório no XHTML)

<img src=“bola.jpg” alt=“Bola”

 Inevitavelmente, é necessário listar algo.

• Listas Não-Ordenadas: <ul>

• Listas de Definições: <dl>

 Linha horizontal: <hr>

 Suponha que uma loja da cidade está lhe

• Páginas dos Produtos (Descrição detalhada)

• Formulário para Contato

 No primeiro momento, a empresa pede uma

 Até agora, não temos nada demais na página.

 Em HTML, o conceito é um pouco diferente:

 Títulos de Colunas (th)

• colspan: colunas mais largas

 Não afetam o layout

 O seu chefe gostou da primeira versão da

 Internet: Transmissão de Informações

 Accept (filtro de arquivos)

 method (padrão: get)

 Tipos de Entrada <input type=

• Texto “text” />

• Checkbox “checkbox” />

• Arquivo “file” />

• Senha “password” />

• Submissão “submit” />

• Escolha Única “radio” />

• Apagar Campos “reset” />

 Texto de Uma Linha

 Também conhecidos como Radio Buttons.

 Faz mais sentido quando possui mais de uma

 Também conhecidos como Checkboxes.

 Podem aparecer sozinhos.

 Botão para Submissão

<input type=“hidden” value=“root” />

 Também conhecidas como Combobox.

 Também aceitam outros atributos.

• Size (Quantidade de Opções Visíveis)

 Sua página web está fazendo sucesso. Tanto

 HTML não foi concebido para realizar a

• Criando classes de elementos

• Identificando elementos específicos