Estrutura de Documentos HTML

2/42

• O que é internet?

• Quais serviços utilizamos na internet?

• Qual a diferença entre liguagens do lado servidor

e linguagens do lado cliente?
3/42
 4/42

• O processo de desenvolvimento WEB podem ser

dividir em três categorias:

Ø Design;

Ø Fornt-end;

Ø Back-end.
4/42
4/42
 4/42

• O design da experiência do usuário (ou UX design)

é o processo que visa melhorar a satisfação do
usuário com um produto ou serviço, melhorando a
usabilidade, a acessibilidade e até mesmo a
satisfação proporcionada na interação;

• Trata-se de um campo amplo, que abrange o

design tradicional de interações homem-máquina e
o prolonga, abordando todos os aspectos pelos
quais um serviço ou produto é percebido pelo
usuário.
 4/42

• O principal objetivo da UX design nos negócios é

melhorar a satisfação e a lealdade do cliente,
tornando suas interações com produtos ou
serviços mais simples e prazerosas;

• Podemos entender, então, que esse é o processo

de concepção (digital ou física) de mercadorias
úteis, fáceis de utilizar e prazerosas de se
interagir.
 4/42

• O termo experiência de usuário, abreviado como

UX (User eXperience), refere-se ao que uma
pessoa sente ao interagir com um sistema – que
pode ser um site, aplicativo web ou software
desktop;

• Mas pode ir para o mundo offline também, pense

na última vez que você entrou em uma
determinada rede de supermercados ou como foi
atendido por um médico, tudo isso envolve UX.
 4/42

• No contexto moderno, UX diz respeito a todas as

interações homem-máquina possíveis: desde os
comandos de voz que um usuário dá para seu
celular excutar determinada função, até a posição
dos botões em um aplicativo;
 4/42

• Aqueles que trabalham com UX estudam e avaliam

como os usuários se sentem a respeito de um
determinado sistema, olhando para questões como a
facilidade de uso e percepção de valor, utilidade e
eficiência na execução de tarefas, entre outros;

• UX designers também se dedicam aos subsistemas

e processos de um sistema, como o checkout de um
e-commerce, para garantir que os usuários
considerem o processo de compra fácil e agradável.
 4/42

• Até pouco tempo atrás – costumávamos fazer

interfaces de uma maneira bem diferente. Pense no
sites dos primódios da internet. Antes de
compreendermos o valor do usuário, tomávamos
decisões coom base em dois itens: o que
achávamos bonito e o que o cliente queria ver;

• Construíamos interações a partir do que

pensávamos que funcionava, desenhando para nós
mesmos.
 4/42

• Mas depois que a web se tornou onipresente (e os sites,

ambientes complexos), os projetos tiveram que mudar o foco.
Passamos a nos conscientizar da importância de caracterísiticas
como acessibilidade não só para aqueles que têm necessidades
especiais, mas também para quem acessa um site de um
dispositivo que não seja o computador;

• As mudanças no acesso, como a popularização da banda larga

e do smartphone, fizeram com que sites bonitos fossem
substituídos pelos agradáveis de usar, independente da
plataforma escolhida para receber tal conteúdo;

• O fator impulsionador para construirmos páginas hoje é a

experiência que queremos dar aos nossos usuários.
 5/42

• O core do trabalho do front-end se resume em duas

partes:

Ø Implementação de layout: produção da primeira

camada do código, onde replicamos o layout criado
em algum programa gráfico, para código estático em
HTML, CSS e JS;
Ø Integração com API: depois (ou junto, tanto faz) de
feito o código estático, a interface é integrada com a
API, que geralmente carrega boa parte da lógica, já
que essa mesma API é usada para alimentar outras
plataformas como mobile, robôs etc.
 6/42

• Navegador

• Editor de Texto
Ø Notepad++, Sublime Text, Bloco de Notas,
vim, gedit, Visual Studio Code, Atom…

• Extensão
Ø .html ou .htm
Ø pagina_principal.htm
 7/42

• Software colaborativo;

• Figma: www.figma.com

• Sketch: www.sketchapp.com
 8/42

• Photoshop

• Adobe XD
9/42
 10/42

• http://uidb.io/

• https://uimovement.com/
 11/42

• SemanticUI: www.semantic-ui.com

• Bootstrap: www.getbootstrap.com
 14/42

• Criar logo: www.seeklogo.com

 20/42

<html>
<head>
<title>Autoria WEB</title>
</head>
<body>
Olá Mundo!!!
</body>
</html>
21/42
 22/42

www.w3c.br
23/42
 23/42

• Instalação VS Code
• Configurando ambiente HTML
• Instalação Plugin
Ø Live Server
- botão direito no código e clicar em Live Server
Ø HTML Snippets
- autocompletar código html
Ø vscode-icons
- executar >File icon Theme
- selecionar VSCode Icons
 23/42

• Instalação Plugin
Ø Rainbow Brackets
- marcação de colchetes
Ø Bookmarks
- marcador de código
- executar >Bookmarks: Toggle Labeled
- Informar nome do marcador
Ø Beautify
- Formatação de código
- executar >Beautify File
 23/42

• Instalação Plugin
Ø Color Highlight
- auxiliar em mostrar as cores css
Ø Beautify
- Formatação de código
- executar >Beautify File
Ø Dracula Official ou Winter is Coming
- alteração do tema
- menu >preferences >color theme
 23/42

• Instalação Plugin
Ø Git History
- Executar >Git History
- histórico de alterações no git
Ø GitLens
- Executar >GitLens
- histórico de alterações no git
Ø Guides
- auxiliar na identação
 23/42

• Instalação Plugin
Ø Path Intellisense
- auxilia em encontrar path de maneira rápida e
dinâmica
Ø Live Share
- edite e depure colaborativamente com outras
pessoas
- live share extension pack
 23/42

• Quebra de linha automaticamente

Ø >preferences >settings >Editor: Word Wrap = on
Ø Menu - View > Ativar - Toggle Word Wrap
 24/42

• Declaração do tipo

Ø Antiga:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN”
"http://www.w3.org/TR/html4/loose.dtd">

Ø Nova:
<!DOCTYPE HTML>
 25/42

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Autoria WEB</title>
</head>
<body>
Olá Mundo!!!
</body>
</html>
 26/42

<!DOCTYPE HTML>
<html>
<head>
<title>Autoria WEB</title>
</head>
<body>
Olá Mundo!!!
</body>
</html>
 27/42

<html> </html>
<html> Ø Descrevem a página Web
<head> Ø Delimitam a página Html

<title>Autoria <head> </head>

WEB</title> Ø Definem o cabeçalho
</head> <title> </title>
<body> Ø Definem o título do documento
Olá Mundo!!! <body> </body>
</body> Ø Definem o corpo do documento
</html> Ø Conteúdo visível da página
 28/42

Errado
Tags em letras maiúsculas
<P> Aqui é um texto de parágrafo </P>
 29/42

Tags em letras minúsculas

Ø Certo: <p> Aqui é um texto de parágrafo </p>
 30/42

Errado: <em> <p> Parágrafo em itálico </em> </p>

Certo: <em> <p> Parágrafo em itálico </p> </em>

 31/42

Todas as tags devem ser fechadas

Errado:

<p>Aqui é um texto de parágrafo.

<p>Este é outro paragrafo de texto.

Certo:

<p>Aqui é um texto de parágrafo.</p>

<p>Este é outro paragrafo de texto.</p>
 32/42

Mesmo as tags vazias devem ser fechadas

Errado:
<br>
<hr>
<img src=”imagem.gif” alt=”minha imagem”>

Certo:
<br />
<hr />
<img src=”imagem.gif” alt=”minha imagem” />
 33/42

Ø Definição de atributos

Errado: <img SRC=”imagem.gif” ALT=”minha imagem”>

Certo: <img src=”imagem.gif” alt=”minha imagem” />

Ø Sempre entre aspas duplas (“ ”)

Errado: <img src=imagem.gif alt=minha imagem>

Certo: <img src=”imagem.gif” alt=”minha imagem” />

 34/42

Ø Sempre devem ter valores

Errado: <input checked />

Certo: <input checked=”checked” />

 35/42

Tag Descrição

<b> Define texto em negrito

<big> Define texto grande

<em> Define texto enfatizado

<i> Define texto em itálico

<small> Define texto pequeno

<strong> Define texto com efeito forte

<sub> Define texto subscrito

<sup> Define texto sobrescrito

 36/42

<p><b>Texto em negrito</b></p>
<p><strong>Texto com efeito forte</strong></p>
<p><big>Texto grande</big></p>
<p><em>This text is enfatizado</em></p>
<p><i>Texto em itálico</i></p>
<p><small>Texto pequeno</small></p>
<p>Aqui um texto_subscrito e
^sobrescrito</p>
37/42
38/42
 39/42

Ø http://pt-br.html.net/tutorials/html/

Ø http://htmldog.com
 40/42

Ø Criar uma página HTML com:

ü Título da página = “Criando o mundo WEB”

Ø Conteúdo
§ Título com o texto “Aula de Autoria WEB”
§ Parágrafos com:
§ Nome do Aluno
§ Ideia de páginas que podem ser
criadas com HTML (Um parágrafo por
ideia e uma ideia para cada tipo de
formatação de texto)