Webdesign: Programação, Website e Redes Sociais

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,

GOOGLE

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

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

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

FACEBOOK

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).

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.

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



Valor Hora R$ 16,79

Lucro de 30% R$ 21,83

Ajustes Tempo:

Valor Hora



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

[email protected]

Webdesign: Programação, Website e Redes Sociais

Design

Transcript of Webdesign: Programação, Website e Redes Sociais