FUNDAMENTOS DA

WEB
(Design para WEB)
Prof Silvano Oliveira
prof.silvano.oliveira@gmail.com
Objetivos
 Objetivo da disciplina:
 Aprender a desenvolver sites para a internet
 Como os sites são feitos?
 HTML
 CSS
 JavaScript
 O que é Web Design?
 Ramo do Design Gráfico voltado para a Web
 Não é só interface, envolve muito mais!
FW02 Web Design (Prof Silvano Oliveira)
Web Design
 Alerta sobre itens:
 Navegadores desconhecidos
 Usar padrão W3C
 Plataformas desconhecidas
 Não usar recursos específicos
 Preferências de usuários desconhecidas
 Usar de forma opcional preferências de usuários
 Tamanho de janela desconhecido
 Procurar usar o espaço disponível ou avisar o usuário
 Velocidade de conexão desconhecida
 Cuidado com imagens grandes
FW02 Web Design (Prof Silvano Oliveira)
Planejando o site

FW02 Web Design (Prof Silvano Oliveira)

Planejando o site com diferentes assuntos

FW02 Web Design (Prof Silvano Oliveira)

Layout e aparência
 Usabilidade é um atributo de qualidade relacionado a facilidade
de uso de algo.
 Navegabilidade é uma propriedade da organização das
informações que nos remete a capacidade de navegação.
 A legibilidade é uma qualidade que determina a facilidade de
leitura de alguma coisa.
 Acessibilidade, no contexto da internet, e a propriedade que um
site tem para permitir que portadores de necessidades especiais
se utilizem dos recursos que oferece.

FW02 Web Design (Prof Silvano Oliveira)

Anatomia de um site
 1. Logotipo
 2. Banner padrão, área de busca, anúncios
externos
 3. Menu administrativo
 informações sobre a empresa, identificação
(login) ou cadastro de usuários, contato,
ajuda, etc.
 4. Menu de navegação
 opções do menu sejam curtas e claras,
 5. Área de destaque
 6. Conteúdo
 7. Anúncios
 8. Rodapé
 informações sobre o portal. (anunciar,
trabalhe conosco, politica de privacidade,
termos de uso, etc.).
FW02 Web Design (Prof Silvano Oliveira)
Exemplo

FW02 Web Design (Prof Silvano Oliveira)

O que é HTML?
 HiperText Markup Language
 É a base das páginas Web
 Dentro do HTML há outras linguagens
 O HTML é interpretado por navegadores
 Pode ser editado por qualquer editor de texto
 Contém texto, imagens, animações, vídeos, scripts, applets, apps e
tudo o mais que vemos na internet

FW02 Web Design (Prof Silvano Oliveira)

O que é HTML?
 HTML (HiperText Markup Language)
 Linguagem de marcação usada pra descrever o formato de
páginas web
 Uso de tags
 <nome da tag> texto </nome da tag>
 XHTML (eXtensible HTML)
 Extensão do HTML com a rigidez do XML

FW02 Web Design (Prof Silvano Oliveira)

O que é HTML?
 Os documentos escritos em HTML são textos simples (ASCII), e
contém duas coisas: informação do próprio documento e tags de
HTML que indicam que elementos do documento (estrutura,
formato, ligações de hipertexto).
 As tags encontram-se entre sinais de maior e menor e contém
atributos, onde esses são atribuições adicionais.

FW02 Web Design (Prof Silvano Oliveira)

Exemplo de código HTML

FW02 Web Design (Prof Silvano Oliveira)

O que é CSS?
 Significa Cascading Style Sheets
 São arquivos que definem o estilo do HTML
 Formatação da página de forma separada para fácil alteração e
manutenção
 As cores, posicionamento dos objetos e estilo das páginas HTML
são definidos no CSS
 São documentos inseridos no HTML diretamente ou salvos em um
arquivo separado e importados dentro do HTML

FW02 Web Design (Prof Silvano Oliveira)

Exemplo de código CSS

FW02 Web Design (Prof Silvano Oliveira)

O que é JavaScript?
 Não é Java!
 É uma linguagem de Script utilizada para prover páginas HTML de
funções mais complexas
 É fracamente tipada e pode estar contida dentro do HTML ou em
um documento separado, parecido com o CSS

FW02 Web Design (Prof Silvano Oliveira)

Exemplo de código JavaScript

FW02 Web Design (Prof Silvano Oliveira)

Exemplo de código JavaScript

FW02 Web Design (Prof Silvano Oliveira)

Resumindo
 A internet é formada por páginas Web
 Cada página tem uma estrutura básica escrita em HTML
 O HTML pode conter imagens, animações, scripts, apps, applets e
muito mais
 O estilo de cada página é escrito em CSS
 As funções mais complexas são escritas em JavaScript, por
exemplo, mas não só nela

FW02 Web Design (Prof Silvano Oliveira)

Prática 01
<html>
<head>
<title>Exemplo 1</title>
</head>
<body>
Olá Mundo!!!
</body>
</html>

Digite isso em um editor de texto puro, salve o arquivo como PRATICA01.HTML e

abra no navegador

FW02 Web Design (Prof Silvano Oliveira)