O documento fornece informações sobre registro de domínios, hospedagem de sites e introdução ao HTML:
1) Explica os passos para registrar um domínio no Registro.br, escolher um provedor de hospedagem e publicar arquivos no site usando FTP.
2) Discutem conceitos básicos de HTML como estrutura de páginas web, uso de tags, estilos CSS e separação de conteúdo, layout e comportamento.
3) Aborda testes de usabilidade, métricas de desempenho e dicas para
14. O domínio só garante seu
endereço. Você precisa de
uma hospedagem para
armazenar seus arquivos.
15. E O REGISTRO.BR PEDIRÁ O DNS
É o equipamento responsável por permitir
que seu domínio esteja ativo na internet. É
um endereço fornecido pelo seu provedor.
16. CONTRATE HOSPEDAGEM EM LINUX
Hospedagens em Linux são ideais para trabalhar
com banco de dados (php). Uma hospedagem em
Windows é boa somente para a linguagem da
microsoft: ASP.net
19. Celular
Mantém o mesmo domínio. A diferença é que
um código redirecionador identifica que o
acesso é via celular e lhe encaminha para a
versão mobile.
20. Celular
Mas, quando uma versão específica é
necessária, é comum criar um subdomínio
para armazenar o site via celular. O mais
comum é registar um subdomínio chamado
“m”, ficando, por exemplo, m.facebook.com
21. Subdomínio
Você pode criar um subdomínio também para
outros sites independentes, como o google,
que criou um subdomínio chamado
“translate” para abrigar o google tradutor.
22. Oportunidade
Fique atento a um domínio estratégico para o
seu negócio ou para um negócio novo. Um
exemplo é o brejas, uma rede social só para
cervejas.
24. Muito longos
Evite domínios muito longos. O site
deste festival ficou como
festludi.com.br para ficar curto e
de fácil interpretação.
25. Ao criar uma empresa
Se você está criando uma empresa, faça uma
busca no registro.br e veja se o nome está
disponível. As pessoas sempre vão digitar
nomedasuaempresa.com.br quando não
procuram no google.
26. E....
Mesmo se você optar por outro domínio,
registre sempre o domínio com o nome da sua
empresa para proteção de marca. O provedor
de hospedagem pode redirecionar o site e você
ter mais de um domínio para o mesmo site.
27. anatel.gov.br
Um exemplo é a Anatel, que não
comprou o domínio .com.br. Ao
acessar este endereço, você é
redirecionado para a página da
empresa Terra Preta.
28. E como meu site vai pro ar?
Como eu mando meus arquivos?
43. SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e
Comportamento “aninhados”
✗ Código Incompreensível
44. COM PADRÕES
✔ Acessível de qualquer
dispositivo
✔ Layout baseado em CSS
✔ Separação entre
Conteúdo, Apresentação e
Comportamento
✔ Código Acessível
45. VANTAGENS
Carregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos
Mecanismos de Buscas
Maior acessibilidade
62. UX Design é o processo
de aumentar a
satisfação e lealdade
do cliente.
Como?
Melhorando a
usabilidade, facilidade
do uso e o prazer
proporcionado com a
interação entre
consumidor e produto.
81. #5 – Tráfego
SEO, Google Adwords e Redes Sociais vão
aumentar o seu tráfego. Mas eles irão sair
se o site não tiver um layout que prenda
sua atenção e converta.
83. UI é o processo de
guiar visualmente o
usuário através da
interface de um
produto, utilizando
elementos interativos e
em todos os
tamanhos /
plataformas.
O UI é o
responsável
pela UX
97. até 0,1s: ideia de
continuidade
até 1s: delay
percebido, mas ok
depois de 10s: o
usuário muda de
tarefa.
O USUÁRIO NÃO
QUER ESPERAR!
98. A CADA 100 MILISSEGUNDOS DE TEMPO DE
CARREGAMENTO DE PÁGINA REDUZ 1% DE
VENDAS NA AMAZON.
AMAZON
99. AO AUMENTAR O CARREGAMENTO DO SITE
DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA
RECEITA EM PUBLICIDADE,
GOOGLE
100. 2) PÁGINAS DE ERRO
O usuário deve saber o que está acontecendo
em uma linguagem fácil.
O usuário deve saber que a culpa não foi dele.
O usuário deve conseguir voltar para o site.
101. 3) ERROS DE FORMULÁRIO
Nome:
Endereço:
CEP:
CPF:
Telefone:
Renato Melo
Rua dos Bobos, número zero
01234-000
12345678900
48 6666-6666
Houve um erro no preenchimento do formulário.
Onde?
Não use espaços ou hifens no
telefone. Utilize somente números.
13 6666-6666
102. 3) DADOS DO FORMULÁRIO
Remover um único campo do formulário (telefone) foi capaz
de aumentar as conversões em 167%. A taxa média de
conversão da página foi de 20,18% para 53,90%.
Pense que para cada R$ 100 investidos em mídia
anteriormente, agora conseguiríamos o mesmo resultado
investindo apenas R$37,45, ou então teríamos quase três
vezes esse resultado se investíssemos o mesmo valor.
107. Maior controle de dados e
variáveis;
Mais fácil de envolver o
cliente;
Maior custo
Usuário pode se sentir
desconfortável
Comportamento distante
do seu universo real
LABORATÓRIO
108. Mais barato;
Usuário se sente mais a
vontade;
Mais próximo de seu uso
real;
Menor controle dos dados
e variáveis
Dificuldade de envolver o
cliente (quem contrata)
AMBIENTE DO USUÁRIO
109. Laboratório
Medir performance
(tempo, número de
erros)
Produção acadêmica
(maior “aceitação”
científica para teses,
artigos e dissertações)
Estudos permanentes
com equipe dedicada
(Globo, Nokia)
Ambiente do Usuário
Obter feedback rápido
Projetos com recursos
reduzidos
Testar conceitos e
interfaces em fases
iniciais de design
111. Perguntas abertas são aquelas que permitem
ao participante responder da forma que quiser,
no formato que quiser, e com a profundidade e
duração que quiser.
Perguntas abertas vs.
Perguntas fechadas
112. Perguntas fechadas são aquelas que podem ser
respondidas com um “Sim? ou “Não”, ou outra
opção sugerida.
Perguntas abertas vs.
Perguntas fechadas
113. Perguntas fechadas funcionam melhor para
questionários quantitativos (porcentagem de
sim ou não). Já para usabilidade, o melhor é
utilizar questões abertas.
Perguntas abertas vs.
Perguntas fechadas
120. • Planejar o teste: com quantas pessoas?
• Criar um roteiro: como devem ser as
perguntas?
• Moderação do teste: o que fazer e o que não
fazer, exercício prático
• Como analisar: o que observar, o que fazer
com as informações obtidas
• Como adaptar: teste mobile, teste caseiro,
teste em contexto de uso
126. As imagens são encaixadas numa espécie de “box
invisível”, com altura máxima de 394px e largura
máxima de 470px. Se a imagem estiver no tamanho
errado, ela ficará com espaço branco (foto).
127. O tamanho ideal é 700x522 pixels. Para imagens com
melhor definição, você pode ampliar o tamanho
mantendo a mesma escala.
128. Na hora de postar um link, crie uma imagem com
1200x628, porém será exibido com a medida de
246x470 px
129. Link de vídeos externos ou páginas que tenham
imagens menores do que 246x470px serão exibidas
como miniaturas de 150x150px.
130. FOTOS PROIBIDAS:
LOGOS E MENÇÕES AO FACEBOOK (LIKE, ETC)
NUDEZ E FOTOS VIOLENTAS
BELEZA PERFEITA (EMAGRECER)
RACISMO/PRECONCEITOS/ÓDIO
131. O Facebook permite apenas 20% de texto, por isso
construa uma grade com linha guia, criando 25
quadrados. Assim, apenas 5 poderão conter texto.
132. O Facebook permite apenas 20% de texto, por isso
construa uma grade com linha guia, criando 25
quadrados. Assim, apenas 5 poderão conter texto.
133. A mesma coisa serve para anúncios de curtidas ou
cliques no site.
Curtidas: 1200x444px
Cliques no site: 1200x628px
136. Solução para o problema dele
Um site horrível!
Prazo: Ontem
Preço
Barato, pois o sobrinho
sabe fazer um igual
Atendimento
Tratar o cliente como a
mãe dele o trataria
146. VALOR HORA – Iniciando:
Valor Hora
Custo + patrimônio R$ 2,22
Mão de obra (salário base
de R$2.500,00)
R$ 14,57
Valor Hora R$ 16,79
147. LUCRO HORA:
Valor Hora
Custo + patrimônio R$ 2,22
Mão de obra (salário base
de R$2.500,00)
R$ 14,57
Valor Hora R$ 16,79
Lucro de 30% R$ 21,83
148. Ajustes Tempo:
Valor Hora
Custo + patrimônio R$ 2,22
Mão de obra (salário base
de R$2.500,00)
R$ 14,57
Valor Hora R$ 16,79
Lucro de 30% R$ 21,83
20% para e-mails,
estudos, etc
R$ 26,19
149. Ajustes Cliente:
Valor Hora
Valor Hora R$ 16,79
Lucro de 30% R$ 21,83
20% para e-mails,
estudos, etc
R$ 26,19
10% margem de erro R$ 28,81
10% margem de choro R$ 31,68
153. A primeira regra da SEO na página é pensar sobre
o que seus usuário possam estar procurando e
garantir que essas palavras-chave estejam
na página.
154. 1. Escolher as melhores palavras-chave
em torno das quais serão baseadas
suas páginas
2. Deixar claro aos mecanismos de
pesquisa de que sua página gira em
torno dessas palavras-chave
155. Lugares para inserir as
palavras-chave:
•URL
•Título da página
•Tag de meta descrição
•Cabeçalhos e
subtítulos na página
•Usar em todo o
conteúdo da página de
modo inteligente (não
escreva como um robô)
156. Tag de meta descrição: Não conta para o ranking,
Mas, Você quase sempre lê (ou pelo menos dá
uma olhada) na descrição de cada link antes
de decidir em qual clicar, não é?
157. O GOOGLE MOSTRA SOMENTE 61 CARACTERES,
MAIS DO QUE ISSO ELE COLOCARÁ “...”
COLOQUE SEMPRE O NOME DA SUA EMPRESA
DEPOIS DA SENTENÇA CHAVE
161. O TÍTULO INFORMA AOS MECANISMOS
DE BUSCAS O TEMA DA PÁGINA. ALÉM
DISSO, É ESSENCIAL QUE ELE SEJA
TAMBÉM PARTE DA URL.
Título: “Aula de Renato Melo na ESAMC”
url: esamc.br/aula-renato-melo-esamc
163. • SEO na página = palavras-chave
• SEO fora da página = links
164. 1. Os links aumentam a autoridade e
confiabilidade de uma página
para os mecanismo de busca
2. Os links ajudam os mecanismos de
pesquisa a conectar a relevância
de uma página a palavras-chave
específicas
165. MARKETING POR CONTEÚDO!
Aposte em artigos explicativos e que, de
preferência, seja inédito e respondam questões
“Como?”