SlideShare uma empresa Scribd logo
1 de 79
Tecnologias Web
1
About me
• Carlos Rangel (chame Rangel)
• Sistemas de Informação | FJN
• Aluno Mestrando | C.E.S.A.R – Recife
• Design há 7 anos;
• Desenvolvedor Joomla! há 5 anos;
• Desenvolvedor PHP há 3 anos;
2
Contatos
flavors.com/rangeljavier
carlosrangelxavier@gmail.com
3
Objetivos da Disciplina
• Mostrar os conceitos e técnicas das
Tecnologias Web no ambiente web.
• Formar webdesigners
4
O que iremos utilizar
• Softwares
– Aptana
• Ambiente de Desenvolvimento
– Google Chrome/Firefox
• Navegador
– Tecnologias e Ferramentas Webs
5
Como funciona uma página web?
6
Como funciona um website?
• Uma página é solicitada, via navegador;
• Está página encontra-se em algum servidor na
internet;
• Assim que o servidor recebe as informações
solicitadas pelo navegador, ele faz uma busca
de onde está e retorna para o seu cliente.
• A página é visualizada no navegador;
Como funciona um website?
O que é necessário criar um website?
• Linguagem para marcação: HTML;
• Linguagem para estilização: CSS e JS;
• Linguagem de programação: PHP;
• Banco de Dados;
Podemos entender por banco de dados qualquer sistema
que reúna e mantenha organizada uma série de informações
relacionadas a um determinado assunto em uma
determinada ordem.
O que é HTML e CSS?
• São tecnologias para criação de páginas web;
• Enquanto o HTML fica responsável por criar a
estrutura da página, o CSS é responsável por
estilizar o HTML, colocar cores, margens,
estilizar fontes e etc...
10
W3C
• O World Wide Web Consortium (W3C) é a principal
organização de padronização da World Wide Web.
Consiste em um consórcio internacional com quase
400 membros (empresas, órgãos governamentais e
organizações independentes) com a finalidade de
estabelecer padrões para a criação e a interpretação
de conteúdos para a Web.
11
O que podemos fazer?
• Utilizando HTML e CSS podemos criar a
interface para:
– Websites
– Portais
– Hotsites
– Landing Pages
– Etc...
12
Hotsites? Landing Pages?
• Hotsites e Landing Pages, são “mini-sites”
com a finalidade de vender um determinado
produto por curto espaço de tempo.
13
Diferença: Hotsite e Landing Pages?
Landing Pages costumam ser páginas isoladas
com o objetivo de passar a mensagem mais
importante sobre um produto ou serviço
oferecido. Geralmente, encontram-se dentro
site principal e é comum que direcionem os
clientes a esse site. Hotsites costumam ser
independentes focados em um produto, sem
necessariamente direcionarem clientes para o
site principal.
14
Exemplos
• Com o conceito passado anteriormente,
utilizando apenas as URL poderíamos
entender que se fossemos criar uma Landing
Page do vestibular da FJN, uma boa sugestão
seria: www.fjn.edu.br/vest2013.
• Já um hotsite, poderia ter seu próprio site,
com vários links internos:
www.vest2013fjn.com.br
15
Objetivo da Landing Page
• Fazer com que simples
navegantes da internet,
tornem-se clientes
16
HTML
Senta que lá vem a história...
17
O que são Tags HTML?
• É a estrutura utilizada para criar páginas
HTML. As tags são responsáveis pelo
navegador interpretar o que estão entre
elas. Sem elas não seria possível
interpretar um website.
Browser ou Navegador
FIREFOX
Tags Básicas (importantes)
• <html> - abertura do documento
• <head> - cabeçalho
• <title> - titulo da página
• <body> - corpo da página
Tag <head>
• Dentro do cabeçalho podemos encontrar
os seguintes comandos:
• <title>: define o título da página, que é
exibido na barra de título dos navegadores.
• <style>: define formatação em CSS
Tag <body>
• Dentro do corpo podemos encontrar outras
várias etiquetas que irão moldar a página,
como por exemplo:
• <h1>, <h2>,... <h6>: cabeçalhos e títulos no
documento em diversos tamanhos.
• <p>: novo parágrafo.
• <img>: imagem
Simples Documento
• <html>
• <head><title>Meu site</title>
• </head>
• <body>
• Aqui ficam as imagens, links, textos, vídeos,
etc.
• </body>
• </html>
Simples Documento
• <html>
• <head><title>Meu site</title>
• </head>
• <body>
• <p>Navegador interpreta um parágrafo</p>
• </body>
• </html>
Cabeçalhos
Obs: Os cabeçalhos vão do NÍVEL H1 AO H6
Tags sem
fechamento
• Geralmente Inserem um elemento na página.
• <br/> Insere uma quebra de linha
• <hr/> Insere uma linha horizontal
Tags sem
fechamento
• Note que a tag é escrita como se fosse
uma mistura de tag de abertura e de
fechamento com uma barra "/" no final:
• <br/> Insere uma quebra de linha
• <hr/> Insere uma linha horizontal
Links
• É uma propriedade
importante dos
documentos HTML é a
possibilidade de fazer
hiperligações.
Para isso usa-se a
etiqueta <a> (do inglês,
anchor).
Links
• Para inserir um link em um documento, utilizamos a
etiqueta <A>, da seguinte forma:
• <A HREF = “contato.html">âncora</A>
• onde:
• Contato.html -> é a URL do documento de destino;
• Âncora-> é o texto ou imagem que servirá de ligação do
documento apresentado para o documento de destino.
href -> é abreviação para "hypertext reference" -
referência a hypertexto - e especifica o destino do link
– que normalmente é um endereço na Internet ou um
arquivo.
Links
• <A HREF = “http://www.fjn.edu.br">
Visitar site da FJN</A>
Visitar site da FJN
O que aparece para o usuário:
Página de Destino
Links
• <A HREF = http://www.fjn.edu.br
target=“_blank”>Visitar site da FJN</A>
Página de Destino
target-> O atributo target permite-nos abrir o link em
uma nova janela diferente daquela em que se clicou.
O target _blank é útil em especial para links externos
ou seja, o visitante abre o link de outro site, mas a
janela atual não se fecha.
Tags (Fontes)
Aumentar o tamanho da Fonte:
<font size=“+1”>Texto</font>
Alterar a cor da Fonte
<font color=“yellow”</font>
Alterar a Fonte(letra)
<font face=“verdana”</font>
Atributos e Valores
• Uma etiqueta/tag é formada por
atributos e valores. Os atributos
modificam os resultados padrões e os
valores caracterizam essa mudança.
Atributos e Valores
(Exemplo)
• <font color=“red">Meu Texto</font>
• No qual:
• font = Tag utilizada para alterar opções de uma
palavra ou texto.
• color = atributo que especifica a cor da palavra
ou texto.
• red = valor do atributo color, que é a cor do
texto que será apresentado (neste caso
vermelho).
Atributos e Valores
• Cada etiqueta tem seus atributos possíveis e
seus valores.
• Um exemplo, é o atributo size que pode ser
usado com a tag FONT, com a HR mas que
não pode ser usado com a tag BODY.
• Isso quer dizer que devemos saber exatamente
quais os atributos e valores possíveis para
cada comando.
Tags - Listas
• <ul>
• <li>Texto 1</li>
• <li>Texto 2</li>
• </ul>
• Texto 1
• Texto 2
Resultado:
*Listasdesordenadas.
Tags - Listas
• <ol>
• <li>Texto 1</li>
• <li>Texto 2</li>
• </ol>
• Listas Ordenadas.
1. Texto 1
2. Texto 2
Resultado:
Negrito e itálico
• <b>
• Meu Texto
• </b>
• <i>
• Meu Texto
• </i>
Meu Texto
Resultado:
Meu Texto
Resultado:
Tags Aninhadas
• <b>
• <i>
• Meu Texto
• </i>
• </b>
Meu Texto
Resultado:
Tags Aninhadas
• <h1>
• <b>
• <i>
• Meu Texto
• </i>
• </b>
• </h1>
Meu Texto
Resultado:
Tags Aninhadas
• Conclusão:
• As últimas tags a serem abertas têm que
ser as primeiras a serem fechadas, e as
primeiras a serem abertas terão de ser as
últimas a serem fechadas.
Mais Tags - Imagens
• <IMG>: Tag para inserir uma imagem.
• Src: Local de origem da imagem
• Alt: Atributo para descrever a imagem.
• Width: Atributo para definir a largura da imagem.
• Height: Atributo para definir a altura da imagem.
• Border: Inserir uma borda na imagem.
• Align: Alinhamento da Imagem.
Código para inserir uma imagem:
<img src=“imagens/brasil.jpg” alt=“Brasil”/>
Mais Tags - Imagens
Código para inserir uma imagem:
<img src=“img1.jpg” alt=“Desc” align= “left” border=“1” />
Seu texto irá ficar alinhado
a esquerda da imagem.
A imagem tem uma borda
que foi definida pelo
atributo BORDER=“1”.
Mais Tags - Tabelas
Tabelas são usadas para apresentar
"dados tabulares", isto é, informação que
deva ser apresentada em linhas e
colunas, de forma lógica e organizada.
Mais Tags - Tabelas
Código para inserir uma tabela:
<table>
<tr><td>Célula 1 </td></tr>
<tr>
<td>Célula 2</td>
</tr>
</table>
Célula 1
Célula 2
Resultado:
Mais Tags - Tabelas
Código para inserir uma tabela:
<table border=“1”>
<tr><td>Célula 1 </td></tr>
<tr>
<td>Célula 2</td>
</tr>
</table>
Célula 1
Célula 2
Resultado:
<table border=“1”>
<tr>
<td>Célula 1 </td><td>Célula 2 </td>
</tr>
<tr>
<td>Célula 3 </td><td>Célula 4 </td>
</tr>
</table>
Célula 1
Célula 3
Resultado:
Célula 2
Célula 4
Blocos de Divisões
• A tag <div> define uma divisão ou uma seção
em um documento HTML.
• A tag <div> é usada para agrupar blocos-
elementos, e assim formatá-los com nossa
folha de estilo.
49
Blocos de Divisões
<div>
<h1>Este é meu bloco acima</h1>
</div>
<div>
<p>Este é meu bloco abaixo</p>
</div>
50
Blocos de Divisões
• ID: Faz referência a um elemento único e
exclusivo. (No CSS é utilizado com “#”)
• CLASS: É usado para especificar um modelo
para um grupo de elementos. Ao contrário do
seletor id, o seletor de classe é mais
frequentemente usado em vários elementos.
(No CSS é utilizado com “.”)
51
Bloco de Divisões
<div id=“superior”>
<h1>Este é meu bloco acima</h1>
</div>
<div id=“inferior”>
<p>Este é meu bloco abaixo</p>
</div>
52
CSS
53
CSS
• Cascading Style Sheets (ou simplesmente CSS) é
uma linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma
linguagem de marcação, como HTML ou XML.
• É uma tecnologia criada para definir estilos
(cores, tipologia, posicionamento, etc...);
• CSS facilitam a criação, formação e manutenção
da páginas web.
54
HTML + CSS
Inline: CSS diretamente nas tags HTML
<p style="color:#B000FF;">CSS dentro das tags HTML</p>
Embutido: CSS dentro do Head de sua página
<head>
<style type="text/css">
.texto {color:#B000FF;}
</style>
</head>
Externo: CSS dentro do Head de sua página vindo de um arquivo
externo
<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
55
CSS
A estrutura básica (“fórmula”)
seletor{
propriedade: valor;
}
56
Sintaxe do CSS
• Seletor = elemento contido na estrutura
HTML.
• Você irá selecionar pelo seu nome ou tipo de
TAG então indicará isso em primeiro lugar.
P {
color: green;
}
Sintaxe do CSS
• Propriedade = É a propriedade que você irá
manipular desse elemento. Cor de fundo,
tamanho do texto, cor de texto, posição,
largura, altura etc.
P {
color: #CCCCCC;
}
Sintaxe do CSS
• Valor = É o valor referente a propriedade
escolhida. Se você quer mudar a cor do texto,
o valor da propriedade será o nome da cor.
P {
color: white;
}
Todas as propriedades
Aqui veremos a listagem de todas as possibilidade
possíveis de propriedades CSS e usa-las.
http://www.w3c.br/divulgacao/guiasreferencia/css2/
60
61
HTML5 e CSS3
• São as novas versões das tecnologias para
criação web. Houveram mudanças e
62
DocType
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Isto é o doctype! Deve ser sempre a primeira
linha de qualquer documento HTML e serve para
indicar ao browser qual a versão do HTML em
que o documento está escrito. Existem dezenas
de doctypes, que podem fazer o browser
“entender” o HTML de diferentes formas.
63
DocTypes
É importante usar um doctype que faça o
browser correr num modo padrão. Por
exemplo, o doctype acima – XHML 1.0 Strict –
contem todos os elementos e atributos HTML,
mas NÃO INCLUI elementos de apresentação
ou obsoletos (como tag font).
64
DocTypes
O HTML padronizou um novo DocType que é
menor, legível e faz os todos os browsers
recentes correr em modo padronizado:
<!DOCTYPE HTML>
65
HTML5
66
Dicas para sua Landing Page
67
1. Use fotos
• Estudos comprovam
que fotos reais são
mais eficientes até
mesmo que ilustração.
• Chamam mais atenção
e são mais elegantes
68
• Compre fotos, contrate fotografo ou prepare
você mesmo.
69
2. Claro e simples
• Você tem 5 segundos, CINCO SEGUNDOS para
convencer seu usuário a ficar na página e se
interessar. Não tente explicar como o produto
funciona em seus devidos detalhes.
70
3. Destaque quem merece
• Use sempre texto de vários
tamanhos, dando destaque
para quem merece.
71
4. O foco é o produto
• A marca de sua empresa não deve aparecer
mais do que o produto – ou você quer que ele
fique clicando em seu logotipo ao invés do
botão comprar?
• Foco é o produto e não sua empresa!
72
5. Nada de pop-ups
• Não seja chato com o usuário. Hoje, temos
diversos browsers com bloqueador de pop-up
e pop-under – o que pode prejudicar a taxa de
conversão de sua página.
73
6. Mostre depoimentos
• Uma grande parcela
de visitantes mais
desconfiados só
tomam a decisão
quando lêem reviews
de outros
consumidores, ou
especialistas da área
(veículos, blogueiros e
outros formadores de
opinião) dão seu
testemunho sobre o
produto ou serviço.
74
7. Senso de urgência
• O senso de urgência é capaz de fazer o usuário
tomar uma decisão por impulso, seja pelo
título impressionante, pela foto impactante do
produto, botão imponente, e principalmente
pela oferta que está próxima do botão.
75
8. Não use navegação
• Lembre-se que você tem uma única missão –
vender seu produto. Navegação foi feita para
websites e não para Landing Pages. Leve o seu
visitante para percorrer o mais rápido possível
o caminho entre TÍTULO > TEXTO > OFERTA >
CALL TO ACTION (botão).
76
9. Cuidado com cores
• O visitante pode até não ser designer, mas
sem perceber, ele ficará desconfiado ao entrar
em uma Landing Page preta para vender
serviços médicos, ou uma branca/verde/azul
para uma pizzaria. Aplicação de cores é
importantíssimo para usabilidade assim como
é para a conversão.
77
10. Call to Action
• Este é o seu objetivo. Ele deve ter um lugar de destaque
na sua página e ser um elemento com contraste forte e
que chame a atenção do usuário. Inclua-o duas, três vezes,
quantas vezes achar necessário (sem exagero!).
78
Apps
79
Registro no Lander
80

Mais conteúdo relacionado

Mais procurados (20)

Html Básico
Html BásicoHtml Básico
Html Básico
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
W3 c
W3 cW3 c
W3 c
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Html básico
Html básicoHtml básico
Html básico
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Html iniciante
Html inicianteHtml iniciante
Html iniciante
 
Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Aula 04
Aula 04Aula 04
Aula 04
 
HTML Básico 2
HTML Básico 2HTML Básico 2
HTML Básico 2
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 

Destaque

Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Rildo (@rildosan) Santos
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websitesIntrus
 
Responsive web design
Responsive web designResponsive web design
Responsive web designTersis Zonato
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersLeonardo Pereira
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosDaniel Afonso
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website designLijo M Loyid
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDra. Camila Hamdan
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)Felipe Fernandes
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de InteraçãoClaudia Bordin Rodrigues
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leisFelipe Fernandes
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Jornalismo Digital
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.Renata_Vasconcelos
 

Destaque (20)

Lab Integrado de Design IED SP
Lab Integrado de Design IED SPLab Integrado de Design IED SP
Lab Integrado de Design IED SP
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
 
Haccp
HaccpHaccp
Haccp
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 
Introdução a experiência e design de Interação
Introdução a experiência e design de InteraçãoIntrodução a experiência e design de Interação
Introdução a experiência e design de Interação
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2Planejamento de produtos digitais - 2
Planejamento de produtos digitais - 2
 
WEBDESIGN - P1
WEBDESIGN - P1WEBDESIGN - P1
WEBDESIGN - P1
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
Elementos da linguagem visual.
Elementos da linguagem visual.Elementos da linguagem visual.
Elementos da linguagem visual.
 

Semelhante a Tecnologias Web com foco na criação de Landing Pages

Semelhante a Tecnologias Web com foco na criação de Landing Pages (20)

Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Aplicativo aula04
Aplicativo aula04Aplicativo aula04
Aplicativo aula04
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
HTML
HTML HTML
HTML
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Aula
AulaAula
Aula
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Disciplina de Laboratório WEB
Disciplina de Laboratório WEBDisciplina de Laboratório WEB
Disciplina de Laboratório WEB
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
1ª aula php
1ª aula php1ª aula php
1ª aula php
 

Mais de Rangel Javier

Banco de Dados - MySQL Basico
Banco de Dados - MySQL BasicoBanco de Dados - MySQL Basico
Banco de Dados - MySQL BasicoRangel Javier
 
PyroCMS - Conhecendo o CMS - Sistema Gerenciador de Conteúdo
PyroCMS - Conhecendo o CMS - Sistema Gerenciador de ConteúdoPyroCMS - Conhecendo o CMS - Sistema Gerenciador de Conteúdo
PyroCMS - Conhecendo o CMS - Sistema Gerenciador de ConteúdoRangel Javier
 
Banco de Dados - Introdução - Projeto de Banco de Dados - DER
Banco de Dados - Introdução - Projeto de Banco de Dados - DERBanco de Dados - Introdução - Projeto de Banco de Dados - DER
Banco de Dados - Introdução - Projeto de Banco de Dados - DERRangel Javier
 
Tecnologias Web - Tabelas
Tecnologias Web - TabelasTecnologias Web - Tabelas
Tecnologias Web - TabelasRangel Javier
 
Banco de Dados - Part01
Banco de Dados - Part01Banco de Dados - Part01
Banco de Dados - Part01Rangel Javier
 
Apresentação jasmine
Apresentação jasmineApresentação jasmine
Apresentação jasmineRangel Javier
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHPRangel Javier
 
Apresentação formação web - up marketing digital - módulo ii - 2º fds
Apresentação   formação web - up marketing digital - módulo ii - 2º fdsApresentação   formação web - up marketing digital - módulo ii - 2º fds
Apresentação formação web - up marketing digital - módulo ii - 2º fdsRangel Javier
 
Apresentação formação web - up marketing digital - módulo ii
Apresentação   formação web - up marketing digital - módulo iiApresentação   formação web - up marketing digital - módulo ii
Apresentação formação web - up marketing digital - módulo iiRangel Javier
 

Mais de Rangel Javier (9)

Banco de Dados - MySQL Basico
Banco de Dados - MySQL BasicoBanco de Dados - MySQL Basico
Banco de Dados - MySQL Basico
 
PyroCMS - Conhecendo o CMS - Sistema Gerenciador de Conteúdo
PyroCMS - Conhecendo o CMS - Sistema Gerenciador de ConteúdoPyroCMS - Conhecendo o CMS - Sistema Gerenciador de Conteúdo
PyroCMS - Conhecendo o CMS - Sistema Gerenciador de Conteúdo
 
Banco de Dados - Introdução - Projeto de Banco de Dados - DER
Banco de Dados - Introdução - Projeto de Banco de Dados - DERBanco de Dados - Introdução - Projeto de Banco de Dados - DER
Banco de Dados - Introdução - Projeto de Banco de Dados - DER
 
Tecnologias Web - Tabelas
Tecnologias Web - TabelasTecnologias Web - Tabelas
Tecnologias Web - Tabelas
 
Banco de Dados - Part01
Banco de Dados - Part01Banco de Dados - Part01
Banco de Dados - Part01
 
Apresentação jasmine
Apresentação jasmineApresentação jasmine
Apresentação jasmine
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Apresentação formação web - up marketing digital - módulo ii - 2º fds
Apresentação   formação web - up marketing digital - módulo ii - 2º fdsApresentação   formação web - up marketing digital - módulo ii - 2º fds
Apresentação formação web - up marketing digital - módulo ii - 2º fds
 
Apresentação formação web - up marketing digital - módulo ii
Apresentação   formação web - up marketing digital - módulo iiApresentação   formação web - up marketing digital - módulo ii
Apresentação formação web - up marketing digital - módulo ii
 

Último

COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASMarcio Venturelli
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfInocencioHoracio3
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx2m Assessoria
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx2m Assessoria
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoMarcio Venturelli
 

Último (8)

COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 

Tecnologias Web com foco na criação de Landing Pages

  • 2. About me • Carlos Rangel (chame Rangel) • Sistemas de Informação | FJN • Aluno Mestrando | C.E.S.A.R – Recife • Design há 7 anos; • Desenvolvedor Joomla! há 5 anos; • Desenvolvedor PHP há 3 anos; 2
  • 4. Objetivos da Disciplina • Mostrar os conceitos e técnicas das Tecnologias Web no ambiente web. • Formar webdesigners 4
  • 5. O que iremos utilizar • Softwares – Aptana • Ambiente de Desenvolvimento – Google Chrome/Firefox • Navegador – Tecnologias e Ferramentas Webs 5
  • 6. Como funciona uma página web? 6
  • 7. Como funciona um website? • Uma página é solicitada, via navegador; • Está página encontra-se em algum servidor na internet; • Assim que o servidor recebe as informações solicitadas pelo navegador, ele faz uma busca de onde está e retorna para o seu cliente. • A página é visualizada no navegador;
  • 8. Como funciona um website?
  • 9. O que é necessário criar um website? • Linguagem para marcação: HTML; • Linguagem para estilização: CSS e JS; • Linguagem de programação: PHP; • Banco de Dados; Podemos entender por banco de dados qualquer sistema que reúna e mantenha organizada uma série de informações relacionadas a um determinado assunto em uma determinada ordem.
  • 10. O que é HTML e CSS? • São tecnologias para criação de páginas web; • Enquanto o HTML fica responsável por criar a estrutura da página, o CSS é responsável por estilizar o HTML, colocar cores, margens, estilizar fontes e etc... 10
  • 11. W3C • O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um consórcio internacional com quase 400 membros (empresas, órgãos governamentais e organizações independentes) com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web. 11
  • 12. O que podemos fazer? • Utilizando HTML e CSS podemos criar a interface para: – Websites – Portais – Hotsites – Landing Pages – Etc... 12
  • 13. Hotsites? Landing Pages? • Hotsites e Landing Pages, são “mini-sites” com a finalidade de vender um determinado produto por curto espaço de tempo. 13
  • 14. Diferença: Hotsite e Landing Pages? Landing Pages costumam ser páginas isoladas com o objetivo de passar a mensagem mais importante sobre um produto ou serviço oferecido. Geralmente, encontram-se dentro site principal e é comum que direcionem os clientes a esse site. Hotsites costumam ser independentes focados em um produto, sem necessariamente direcionarem clientes para o site principal. 14
  • 15. Exemplos • Com o conceito passado anteriormente, utilizando apenas as URL poderíamos entender que se fossemos criar uma Landing Page do vestibular da FJN, uma boa sugestão seria: www.fjn.edu.br/vest2013. • Já um hotsite, poderia ter seu próprio site, com vários links internos: www.vest2013fjn.com.br 15
  • 16. Objetivo da Landing Page • Fazer com que simples navegantes da internet, tornem-se clientes 16
  • 17. HTML Senta que lá vem a história... 17
  • 18. O que são Tags HTML? • É a estrutura utilizada para criar páginas HTML. As tags são responsáveis pelo navegador interpretar o que estão entre elas. Sem elas não seria possível interpretar um website.
  • 20. Tags Básicas (importantes) • <html> - abertura do documento • <head> - cabeçalho • <title> - titulo da página • <body> - corpo da página
  • 21. Tag <head> • Dentro do cabeçalho podemos encontrar os seguintes comandos: • <title>: define o título da página, que é exibido na barra de título dos navegadores. • <style>: define formatação em CSS
  • 22. Tag <body> • Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo: • <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. • <p>: novo parágrafo. • <img>: imagem
  • 23. Simples Documento • <html> • <head><title>Meu site</title> • </head> • <body> • Aqui ficam as imagens, links, textos, vídeos, etc. • </body> • </html>
  • 24. Simples Documento • <html> • <head><title>Meu site</title> • </head> • <body> • <p>Navegador interpreta um parágrafo</p> • </body> • </html>
  • 25. Cabeçalhos Obs: Os cabeçalhos vão do NÍVEL H1 AO H6
  • 26. Tags sem fechamento • Geralmente Inserem um elemento na página. • <br/> Insere uma quebra de linha • <hr/> Insere uma linha horizontal
  • 27. Tags sem fechamento • Note que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: • <br/> Insere uma quebra de linha • <hr/> Insere uma linha horizontal
  • 28. Links • É uma propriedade importante dos documentos HTML é a possibilidade de fazer hiperligações. Para isso usa-se a etiqueta <a> (do inglês, anchor).
  • 29. Links • Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: • <A HREF = “contato.html">âncora</A> • onde: • Contato.html -> é a URL do documento de destino; • Âncora-> é o texto ou imagem que servirá de ligação do documento apresentado para o documento de destino. href -> é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link – que normalmente é um endereço na Internet ou um arquivo.
  • 30. Links • <A HREF = “http://www.fjn.edu.br"> Visitar site da FJN</A> Visitar site da FJN O que aparece para o usuário: Página de Destino
  • 31. Links • <A HREF = http://www.fjn.edu.br target=“_blank”>Visitar site da FJN</A> Página de Destino target-> O atributo target permite-nos abrir o link em uma nova janela diferente daquela em que se clicou. O target _blank é útil em especial para links externos ou seja, o visitante abre o link de outro site, mas a janela atual não se fecha.
  • 32. Tags (Fontes) Aumentar o tamanho da Fonte: <font size=“+1”>Texto</font> Alterar a cor da Fonte <font color=“yellow”</font> Alterar a Fonte(letra) <font face=“verdana”</font>
  • 33. Atributos e Valores • Uma etiqueta/tag é formada por atributos e valores. Os atributos modificam os resultados padrões e os valores caracterizam essa mudança.
  • 34. Atributos e Valores (Exemplo) • <font color=“red">Meu Texto</font> • No qual: • font = Tag utilizada para alterar opções de uma palavra ou texto. • color = atributo que especifica a cor da palavra ou texto. • red = valor do atributo color, que é a cor do texto que será apresentado (neste caso vermelho).
  • 35. Atributos e Valores • Cada etiqueta tem seus atributos possíveis e seus valores. • Um exemplo, é o atributo size que pode ser usado com a tag FONT, com a HR mas que não pode ser usado com a tag BODY. • Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.
  • 36. Tags - Listas • <ul> • <li>Texto 1</li> • <li>Texto 2</li> • </ul> • Texto 1 • Texto 2 Resultado: *Listasdesordenadas.
  • 37. Tags - Listas • <ol> • <li>Texto 1</li> • <li>Texto 2</li> • </ol> • Listas Ordenadas. 1. Texto 1 2. Texto 2 Resultado:
  • 38. Negrito e itálico • <b> • Meu Texto • </b> • <i> • Meu Texto • </i> Meu Texto Resultado: Meu Texto Resultado:
  • 39. Tags Aninhadas • <b> • <i> • Meu Texto • </i> • </b> Meu Texto Resultado:
  • 40. Tags Aninhadas • <h1> • <b> • <i> • Meu Texto • </i> • </b> • </h1> Meu Texto Resultado:
  • 41. Tags Aninhadas • Conclusão: • As últimas tags a serem abertas têm que ser as primeiras a serem fechadas, e as primeiras a serem abertas terão de ser as últimas a serem fechadas.
  • 42. Mais Tags - Imagens • <IMG>: Tag para inserir uma imagem. • Src: Local de origem da imagem • Alt: Atributo para descrever a imagem. • Width: Atributo para definir a largura da imagem. • Height: Atributo para definir a altura da imagem. • Border: Inserir uma borda na imagem. • Align: Alinhamento da Imagem. Código para inserir uma imagem: <img src=“imagens/brasil.jpg” alt=“Brasil”/>
  • 43. Mais Tags - Imagens Código para inserir uma imagem: <img src=“img1.jpg” alt=“Desc” align= “left” border=“1” /> Seu texto irá ficar alinhado a esquerda da imagem. A imagem tem uma borda que foi definida pelo atributo BORDER=“1”.
  • 44. Mais Tags - Tabelas Tabelas são usadas para apresentar "dados tabulares", isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica e organizada.
  • 45. Mais Tags - Tabelas Código para inserir uma tabela: <table> <tr><td>Célula 1 </td></tr> <tr> <td>Célula 2</td> </tr> </table> Célula 1 Célula 2 Resultado:
  • 46. Mais Tags - Tabelas Código para inserir uma tabela: <table border=“1”> <tr><td>Célula 1 </td></tr> <tr> <td>Célula 2</td> </tr> </table> Célula 1 Célula 2 Resultado:
  • 47. <table border=“1”> <tr> <td>Célula 1 </td><td>Célula 2 </td> </tr> <tr> <td>Célula 3 </td><td>Célula 4 </td> </tr> </table> Célula 1 Célula 3 Resultado: Célula 2 Célula 4
  • 48. Blocos de Divisões • A tag <div> define uma divisão ou uma seção em um documento HTML. • A tag <div> é usada para agrupar blocos- elementos, e assim formatá-los com nossa folha de estilo. 49
  • 49. Blocos de Divisões <div> <h1>Este é meu bloco acima</h1> </div> <div> <p>Este é meu bloco abaixo</p> </div> 50
  • 50. Blocos de Divisões • ID: Faz referência a um elemento único e exclusivo. (No CSS é utilizado com “#”) • CLASS: É usado para especificar um modelo para um grupo de elementos. Ao contrário do seletor id, o seletor de classe é mais frequentemente usado em vários elementos. (No CSS é utilizado com “.”) 51
  • 51. Bloco de Divisões <div id=“superior”> <h1>Este é meu bloco acima</h1> </div> <div id=“inferior”> <p>Este é meu bloco abaixo</p> </div> 52
  • 53. CSS • Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. • É uma tecnologia criada para definir estilos (cores, tipologia, posicionamento, etc...); • CSS facilitam a criação, formação e manutenção da páginas web. 54
  • 54. HTML + CSS Inline: CSS diretamente nas tags HTML <p style="color:#B000FF;">CSS dentro das tags HTML</p> Embutido: CSS dentro do Head de sua página <head> <style type="text/css"> .texto {color:#B000FF;} </style> </head> Externo: CSS dentro do Head de sua página vindo de um arquivo externo <link rel=”stylesheet” type=”text/css” href=”estilo.css” /> 55
  • 55. CSS A estrutura básica (“fórmula”) seletor{ propriedade: valor; } 56
  • 56. Sintaxe do CSS • Seletor = elemento contido na estrutura HTML. • Você irá selecionar pelo seu nome ou tipo de TAG então indicará isso em primeiro lugar. P { color: green; }
  • 57. Sintaxe do CSS • Propriedade = É a propriedade que você irá manipular desse elemento. Cor de fundo, tamanho do texto, cor de texto, posição, largura, altura etc. P { color: #CCCCCC; }
  • 58. Sintaxe do CSS • Valor = É o valor referente a propriedade escolhida. Se você quer mudar a cor do texto, o valor da propriedade será o nome da cor. P { color: white; }
  • 59. Todas as propriedades Aqui veremos a listagem de todas as possibilidade possíveis de propriedades CSS e usa-las. http://www.w3c.br/divulgacao/guiasreferencia/css2/ 60
  • 60. 61
  • 61. HTML5 e CSS3 • São as novas versões das tecnologias para criação web. Houveram mudanças e 62
  • 62. DocType <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Isto é o doctype! Deve ser sempre a primeira linha de qualquer documento HTML e serve para indicar ao browser qual a versão do HTML em que o documento está escrito. Existem dezenas de doctypes, que podem fazer o browser “entender” o HTML de diferentes formas. 63
  • 63. DocTypes É importante usar um doctype que faça o browser correr num modo padrão. Por exemplo, o doctype acima – XHML 1.0 Strict – contem todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou obsoletos (como tag font). 64
  • 64. DocTypes O HTML padronizou um novo DocType que é menor, legível e faz os todos os browsers recentes correr em modo padronizado: <!DOCTYPE HTML> 65
  • 66. Dicas para sua Landing Page 67
  • 67. 1. Use fotos • Estudos comprovam que fotos reais são mais eficientes até mesmo que ilustração. • Chamam mais atenção e são mais elegantes 68
  • 68. • Compre fotos, contrate fotografo ou prepare você mesmo. 69
  • 69. 2. Claro e simples • Você tem 5 segundos, CINCO SEGUNDOS para convencer seu usuário a ficar na página e se interessar. Não tente explicar como o produto funciona em seus devidos detalhes. 70
  • 70. 3. Destaque quem merece • Use sempre texto de vários tamanhos, dando destaque para quem merece. 71
  • 71. 4. O foco é o produto • A marca de sua empresa não deve aparecer mais do que o produto – ou você quer que ele fique clicando em seu logotipo ao invés do botão comprar? • Foco é o produto e não sua empresa! 72
  • 72. 5. Nada de pop-ups • Não seja chato com o usuário. Hoje, temos diversos browsers com bloqueador de pop-up e pop-under – o que pode prejudicar a taxa de conversão de sua página. 73
  • 73. 6. Mostre depoimentos • Uma grande parcela de visitantes mais desconfiados só tomam a decisão quando lêem reviews de outros consumidores, ou especialistas da área (veículos, blogueiros e outros formadores de opinião) dão seu testemunho sobre o produto ou serviço. 74
  • 74. 7. Senso de urgência • O senso de urgência é capaz de fazer o usuário tomar uma decisão por impulso, seja pelo título impressionante, pela foto impactante do produto, botão imponente, e principalmente pela oferta que está próxima do botão. 75
  • 75. 8. Não use navegação • Lembre-se que você tem uma única missão – vender seu produto. Navegação foi feita para websites e não para Landing Pages. Leve o seu visitante para percorrer o mais rápido possível o caminho entre TÍTULO > TEXTO > OFERTA > CALL TO ACTION (botão). 76
  • 76. 9. Cuidado com cores • O visitante pode até não ser designer, mas sem perceber, ele ficará desconfiado ao entrar em uma Landing Page preta para vender serviços médicos, ou uma branca/verde/azul para uma pizzaria. Aplicação de cores é importantíssimo para usabilidade assim como é para a conversão. 77
  • 77. 10. Call to Action • Este é o seu objetivo. Ele deve ter um lugar de destaque na sua página e ser um elemento com contraste forte e que chame a atenção do usuário. Inclua-o duas, três vezes, quantas vezes achar necessário (sem exagero!). 78