Upload
renato-melo
View
444
Download
0
Embed Size (px)
Citation preview
WEBDESIGN:PROGRAMAÇÃO, WEBSITESE REDES SOCIAIS
RENATO MELO - 2015
REGISTRANDO UM SITEE INTRODUÇÃO AO HTML
Registro.brPortal oficial de domínios do Brasil.Domínios para pessoas físicas e jurídicas.
Para os BuscadoresDomínios do Brasil também contam pontos no ranking dos motores de busca
Evite Dor de CabeçaEvite registrar domínios diretamenteno Provedor de Hospedagem.
Domínios reservadosO Comitê Gestor pode reservar nomes de acordo com o critério constante na regulamentação vigente
CategoriasUma pessoa ou empresa pode registrar o mesmo domínio em categorias diferentes:Ex: seusite.com.br e seusite.net.br
PesquiseAntes de registrar, você pode pesquisar se o domínio já existe. Senão, busque alternativas que estejam disponíveis.
Faça seu cadastrocomo usuário e registro do domínio
Quanto custa?R$ 30 no primeiro anoR$ 27 para os restantes
O pagamento é feito via boleto ou cartão de crédito
O domínio só garante seu endereço. Você precisa de uma hospedagem para armazenar seus arquivos.
E O REGISTRO.BR PEDIRÁ O DNSÉ o equipamento responsável por permitirque seu domínio esteja ativo na internet. Éum endereço fornecido pelo seu provedor.
CONTRATE HOSPEDAGEM EM LINUXHospedagens 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
Outros domíniosEmpresas utilizam também o registro .com para preservar a marca.
Outros domíniosEleito o melhor site de registros do mundo
CelularManté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.
CelularMas, 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
SubdomínioVocê 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.
OportunidadeFique 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.
OportunidadeOutro bom exemplo é o site Pizzaria em Santos.
Muito longosEvite domínios muito longos. O site deste festival ficou como festludi.com.br para ficar curto e de fácil interpretação.
Ao criar uma empresaSe 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.
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.
anatel.gov.brUm 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.
E como meu site vai pro ar? Como eu mando meus arquivos?
Você transfere os arquivos via FTP
Pode ser feito no site da sua hospedagem, via windows explorer ou de um programa
Filezilla: o mais usado
Você precisa de:Endereço do FTPUsuárioSenha
AGORA, O HTML...
Internet, como é composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica
HTMLNão é grego, nem coisa
de nerd.
É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
INTERFACE GRÁFICAA parte legal da história...
Mas antes, vem a
teoria...Antigamente: Interface com computadores era negócio para gênios da informática
Hoje: O desenvolvimento de interfaces gráficas permite o
uso por não especialistas
Os opostos
se atraemO desenvolvimento das interfaces
gráficas permitiu a criação de programas WYSIWYG
What You See Is What You
Get
HTMLHtml é um arquivo que pode ser interpretado por navegadores.
HTMLE pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
Bloco de notasSomente a linha de código contendo sua programação
DreamweaverEdição do html na linha de código ou no design.
INTRODUÇÃO AOE-MAIL MKT E HTML
E-mail MKTNão deixe que sua empresa seja igual ao seu “Tio chato”
Se você não gosta de receber, por
que enviar?
LegislaçãoCompra de dados é ilegal! Tanto para e-mail, quanto para SMS, você precisa ter autorização da pessoa para enviar e-mail marketing.
LegislaçãoMesmo com autorização, você tem que disponibilizar um link de opt-out, caso o cliente não queira mais suas mensagens.
SPAMQuanto mais marcação como SPAM no seu domínio, pior para você
INTRODUÇÃO DO CSS NO
WEBDESIGN
Antigamente: Site com
emaranhado de tags, estilos e
formatações
Se o cliente pedisse alteração
você tinha que alterar página
por página.
Programação em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: Inteligência
SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e Comportamento “aninhados”
✗ Código Incompreensível
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
VANTAGENSCarregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos Mecanismos de Buscas
Maior acessibilidade
Prazer CSS
nomeDefine um estilo único para um elemento: body, h1...
TÉCNICOParte mais importante
#nomeDefine um estilo único para um identificador
#TIMESeguem as ordens do técnico
.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.
.jogadorJoga para o #time
Exemplobody{background: #ccc;font: 12pt Arial, Sans-Serif;color: #000;
}
#topo{width: 780px;background: #ccc url(bgtopo.jpg) repeat-x;font-size: 20pt;color: #ff0000;
}
.produto{float: right;text-align: center;font-size: 16pt;color: #ff0000;
}
PADRÃO DE
CORES
COR HEXÉ a cor do #
As Fontes também merecem atenção
Exemplos de fontes:Arial, Calibri, VerdanaTrebuchet, Times New Roman...
Pode-se colocar mais de uma fonte + opção de “Sans-serif” ou “Serif”
O UX e Usabilidade
“Você deve começar com a experiência do usuário e depois ir para a tecnologia”
O USUÁRIO NÃO QUER ESPERAR!
A CADA 100 MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON.
AMAZON
AO AUMENTAR O CARREGAMENTO DO SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA RECEITA EM PUBLICIDADE,
INTERNET ONTEM
Anúncios Sites Institucionais
INTERNET HOJE
Anúncios Sites Institucionais SEO Mobile
RedesSociais
Geo localização ConversãoNo PDV
Logística
USUÁRIO TEM QUE POSSUIR UMA EXPERIÊNCIA POSITIVA EM TODOS OS CANAIS
O QUE PRECISA SER PENSADO
CONTEXTO
USUÁRIOCONTEÚDO
LEMBRE-SE: O FOCO É NAS PESSOAS!
CHECKLIST DO UX
TAMANHO DA TELA
CONECTIVIDADE
OBJETIVOS DO USUÁRIO
AMBIENTES DO
USUÁRIO
CAPACIDADE DO
USUÁRIO
EXPERIÊNCIA NO CELULAR
NÃO ESTAR NO MOBILE É COMO FECHAR SUA LOJA UMA VEZ POR SEMANA.Fonte: Google
DETALHES
NÃO CONFUNDA O USUÁRIO!!!
O QUE PRECISA TER?
PÃOMAIONESETOMATEALFACEMUSSARELACHEDDARCARNEOVOONION RINGSBACONKETCHUPMOSTARDA
O HAMBURGUER
O QUE PRECISA TER?
PÃOCARNE
O HAMBURGUER
VALIDAÇÃODA IDEIA
A ARTE DA VALIDAÇÃO:PIADAS ERAM CONTADAS ATÉ PARA AS FAXINEIRAS
A MAIORIA É BURRA
FEZ TESTE?
LANÇOU BETA?
FEZ UM PROTÓTIPO?ENTÃO O BURRO É VOCÊ!
LEP
O L
EP
O N
O T
WIT
TER
MODELO ANTIGO
IDEIADESENVOLVIMENTO
LANÇAMENTO
MAIS CHANCE DE ERROSEM APRENDIZADOSEM CONTINUIDADE
MODELO NOVO
IDEIADESENVOLVIMENTO
LANÇAMENTO
VALIDAÇÃO
ITERAÇÃO
MENOS CHANCE DE ERROAPRENDIZADOCONTINUIDADE
NÃO SE PODE MELHORAR O QUE NÃO SE MEDE
ConversãoUX e Usabilidade
O BÁSICO: O QUE FAZER E O QUE NÃO
FAZER
1 – DEIXAR CLARO DOQUE SE TRATA O SITE
2 – FONTE BACANA, MAS
LEGÍVEL
3 – NÃO USE POP-UP
4 – NÃO USE URLS DISCONEXAS OU DESPROTEGIDAS
5 – NÃO TOQUE
MÚSICA
6 – BOTÃO VOLTAR SEMPRE
FUNCIONANDO E NAVEGAÇÃO FACILITADA
7 – LINKS COM COR E QUE TROQUEM DE COR
DEPOIS QUE SÃO VISITADOS
TESTES
1) FEEDBACK
até 0,1s: ideia de continuidade
até 1s: delay percebido, mas ok
depois de 10s: o usuário muda de tarefa.
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.
Nome:
Endereço:
Telefone 1:
Celular:
Telefone da Mãe:
CPF:
RG:
Nome do Cachorro:
Estado Civil:
3) FORMULÁRIO
3) 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
4) CAIXA DE BUSCA
5) ETAPAS DO SEU SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento
Testes de Usabilidade
TESTE COM USUÁRIOS!Nunca mencione a palavra teste, ela assusta as pessoas.
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
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
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
SÉRIES AMERICANASNOVELAS BRASILEIRAS
CASES
EFICÁCIA:
Novo Design e Disposição:Passou de
500 inscrições para 1200 por
mês
EFICIÊNCIA:
35% da operação do Call Center
existia apenas para responder uma demanda: Onde encontrar
a 2ª via do boleto.
ConversãoFazer seu usuário agir da forma
desejada e mensurável
WEBDESIGNNAS REDESSOCIAIS
AS AGÊNCIAS DE PUBLICIDADE E A
GUERRA ENTRE ON E OFF
PESQUISA MAIS RECENTE: 2013
BRASIL ATRASADO!52% TV ABERTA16.4% JORNAL E IMPRESSOS7.7% TV FECHADA6.5% INTERNET
EUA:42 BILHÕES – MKT DIGITAL
40 BILHÕES – TV ABERTA
AGÊNCIAACOMODADA
MERCADODESESPERADO
REPRESENTANTE COMERCIALDE JORNAIS, REVISTAS E EMISSORAS DE RÁDIO E TV.
MOBILE MARKETINGMARKETING DIGITALTUDO MUDANDO A CADA TRIMESTRE
COMERCIANTEACOMODADO
MERCADOALIENADO
ANÚNCIOS EM JORNAIS, REVISTAS E EMISSORAS DE RÁDIO E TV, ALÉM DE FLYERS, FOLDERS E MÍDIA IMPRESSA.
NÃO SABE O QUE FAZERNÃO SABE COMO PEDIRAGÊNCIA NÃO SABE COMO OFERECER
PÚBLICOCONECTADOFACEBOOKWHATSAPPTWITTERSNAPCHATINSTAGRAMWE HEART ITPINTERESTLINKEDINGOOGLE+GOOGLEANGRY BIRDSCANDYCRUSH
E O DIA CONTINUATENDO 24H...
AGÊNCIA DE PUBLICIDADE
Remuneração: 20% do investimento
Resultado: você fala e os outros escutam. Ponto final!
AGÊNCIA DE PUBLICIDADE
ROI: baseado na audiência.
No fim, quantas ficaram no canal até o comercial do seu anúncio? Quantas viram o seu anúncio?
HOJE, MÍDIA TRADICIONAL ESTÁ
SAINDO MUITO CARO PARA AS
PME’S
INSTAGRAM:1 MILHÃO DE NOVOS USUÁRIOS POR DIA
FOTOS NO FORMATO SQUARE (QUADRADO). EXIBIDA COM 612X612
pixels. TAMANHO MÁXIMO: 2048x2048 px
YOUTUBE
IMAGENS THUMB:1366X709px
POST: A IMPORTÂNCIA
DA FOTO
Publicações com foto!Chamam atenção e aumentam em 180% as chances de engajamento.
O número de cliques na foto é o maior
índice de engajamento.
Faça posts “humanos”, mostrando as pessoas e equipes que estão por trás da fanpage/empresa.
SÓ USE GATINHO EM IMAGEM SE VOCÊ FOR SOCIAL MEDIA DA WHISKAS.SÉRIO, NÃO USE!!!
NEM SE ELE FOR MEIGUINHO?NÃÃÃÃÃOOOO!!!
NEM SE ELE FOR CUTI-CUTI?NÃÃÃÃÃÃOOOOO!!!!
TER UMA REDE SOCIAL HOJE É
O CAMINHO MAIS FÁCIL DE
CONSEGUIR VISITANTES PARA O SEU
SITE
PRIMEIRA DICA E REGRA DE OURO NO FACEBOOK:
SÓ USE IMAGENS EM PNG!
IMAGEM PARA POST
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).
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).
O tamanho ideal é 700x522 pixels. Para imagens com melhor definição, você pode ampliar o tamanho mantendo a mesma escala.
Na hora de postar um link, crie uma imagem com 1200x628, porém será exibido com a medida de 246x470 px
Link de vídeos externos ou páginas que tenham imagens menores do que 246x470px serão exibidas como miniaturas de 150x150px.
FACE ADS
FOTOS PROIBIDAS:LOGOS E MENÇÕES AO FACEBOOK (LIKE, ETC)NUDEZ E FOTOS VIOLENTASBELEZA PERFEITA (EMAGRECER)RACISMO/PRECONCEITOS/ÓDIO
POST PATROCINA
DO
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.
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.
ANÚNCIOS
A mesma coisa serve para anúncios de curtidas ou cliques no site.Curtidas: 1200x444pxCliques no site: 1200x628px
WEBDESIGN HOME OFFICEFREELAS
Meu primeiro JOB vai nascer! Quanto cobro?
1º O que o cliente quer?
Solução para o problema dele
Um site horrível!
Prazo: OntemPreço
Barato, pois o sobrinho sabe fazer
um igual
Atendimento
Tratar o cliente como a mãe dele o trataria
Não fale grego e facilite a
comunicação
Como cobrar?
Por insumo (fotos, páginas)
1)Prefira estipular um valor para a identidade visual.
2)Só depois, estipule um valor por página.
Como cobrar?
Preço Fechado
1)Entendeu o que o cliente quer.
2)Notou que o cliente não trará grandes problemas ou já conhece o cliente.
Como cobrar?
Preço por Hora
1)Fazer o Mapa do Site
2)Calcular seus custos
3)Calcular quanto tempo irá levar
MONTANDOO MEU HOME OFFICE
Custos Fixos
InternetLuzTelefone
Custos Variáveis
DomínioHospedagemBanco de ImagemProfissional Extra
Custos Variáveis
Não esqueça dos extras:
-Pizza para comer rápido pois o prazo está curto
-Café para manter acordado, etc
Patrimônio
ComputadorLivroSoftwareCursos
Quer ganhar quanto?
Salário13ºFériasDias da semana trabalhados
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
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
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
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
Ajustes para Tipo de Cliente:
Cliente Valor Hora
Pequeno comércio R$ 633,60
PME 50% R$ 950,40
Grandes Empresas
250%R$ 3326,40
FACEBOOK.COM/RENATOMELOMKT