SlideShare uma empresa Scribd logo
Planejando e Desenvolvimento web sites
Ensino IP
Quem sou eu…?
|| Renato Bongiorno Bonfanti
» Web, Consultor SEO e Analista de Social Media

|| Bongiornoweb - Web | SEO | Social Media
» (11) 97088-3781 | (11) 97688-8824
» http://www.bongiornoweb.com.br/
» https://www.facebook.com/bongiornoweb
» https://twitter.com/bongiornoweb
» http://instagram.com/bongiornoweb
» http://www.pinterest.com/bongiornoweb/

» http://www.linkedin.com/in/bongiornoweb
» https://plus.google.com/u/0/+RenatoBongiorno-bongiornoweb
» contato@bongiornoweb.com.br
Agenda - Parte I
•
•
•
•
•
•
•
•
•

A Internet
Internet vs Web
Segurança na Internet
Planejando Web Sites
Como conquistar clientes na era digital
Briefing
Atividade Prática - Criando Briefings
Definição do Mapa do Site – Sitemap
Desenvolvendo um Mapa do Site

•
•
•
•
•

Wireframe
Desenvolvimento do Wireframe - Home

Produtividade em Wireframes
Lorem Ipsum
Atividade Prática - Finalizando Wireframes
Agenda - Parte II
•
•
•
•
•
•
•

O Protótipo
Desenvolvendo o Protótipo
Selecionando as cores para o design do site
Imagens
Flat Design – Design Plano
Criando o protótipo
Atividade Prática - Finalizando Arte Restaurante
De onde partimos, para onde vamos?
1. Planejamento
De onde partimos, para onde vamos?

1. Estruturação
2. Criação
A Internet
A Internet – do ponto de vista tecnológico – é uma
imensa rede de computadores interligados de alcance
mundial...
A Internet
Desde seu surgimento facilitou a
comunicação mundial entre empresas e
pessoas, gerando oportunidades de
negócios, facilitando o relacionamento
com clientes através de uma nova
forma de comunicação.
A Internet
A internet é um passaporte de cidadania do mundo. Não
tem nacionalidade. Não tem fronteira. Não tem dono,
nem governo. Nela cabem todas as ideologias. Nela o
homem é livre. E a mensagem, verdadeira.
Internet para Pequenos Negócios – Sebrae
O que é Internet e o que é a Web?
A Internet corresponde ao meio físico (cabos, servidores,
roteadores, modens) pelas quais os computadores ao
redor do mundo são interligados.
O que é Internet e o que é a Web?
A Web corresponde aos sites que
navegamos, aos e-mails que enviamos,
as ferramentas de chat que utilizamos
em nosso dia a dia, resumindo,
corresponde a forma de comunicação
que utilizamos através da Internet.
Segurança na Internet
Navegar na Internet requer muito cuidado e atenção, pois
sabemos que dentro desse fascinante universo, existem
também, muitos perigos.
Segurança na Internet
Cartilha de Segurança para Internet
http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf
Segurança na Internet
Navegar é preciso - http://www.youtube.com/watch?v=QyOhW-cOpT0

Os Invasores - http://www.youtube.com/watch?v=0Zxt7kS5miQ
Spam - http://www.youtube.com/watch?v=DFL5TbyfhrU
A Defesa - http://www.youtube.com/watch?v=xwJkQKJGlnA
Planejando Web Sites
Como conquistar clientes na era digital
Atualmente, empresas não mais devem
oferecer web sites a seus clientes, e sim

uma proposta de comunicação digital
para empresas no mundo virtual.
Planejando Web Sites
Briefing
Quero fazer um site… só isso?!
Planejando Web Sites
Briefing - Mais que um site…
VIDEO

Cada etapa é um
projeto que
contempla um site...

LANDING
PAGE

SOCIAL
MEDIA

SITE
LOJA
VIRTUA
L

GOOGLE
SEO/SEM

BLOG
Planejando Web Sites
Briefing - Mais que um site…
Um pouco do que vem por aí...
Social Media Revolution
http://www.youtube.com/watch?v=9SBKtdYLRUM

Mobile Mkt
http://www.youtube.com/watch?v=xzmQm-hRgTg
Planejando Web Sites
Briefing
O briefing corresponde ao
levantamento de requisitos e

objetivos necessários para
realização do web site.
Planejando Web Sites
Briefing

O Principal objetivo
é entender o que o
cliente quer….
Planejando Web Sites
Briefing
O briefing pode ser feito através de reuniões presenciais,
conversas online via ferramentas de chats (ex.: Skype) ou até
mesmo através de formulários enviados por e-mail
com perguntas básicas sobre as necessidades do
cliente.
Planejando Web Sites
Briefing
Dica - Google Forms
Planejando Web Sites
Briefing
1) Qual o ramo de atuação da empresa?
2) Quais os produtos e serviços oferecidos?
3) O site já possui em endereço atual?
4) Existe alguma objeção de conteúdo e layout para o site? (Ex.: não utilizar as cores x,y,z)
5) Quais são os principais objetivos do site?
6) Quais são as mensagens mais importantes que o site deve passar aos visitantes?
Planejando Web Sites
Briefing
7) Quais são os planos para promover o site? Google, Midias Sociais,
E-mail Marketing?
8) Há uma data aproximada para o site tenha que estar pronto?

9) É necessário obter dados dos visitantes em formulários? O que é preciso saber? Por quê?
10) Quais as páginas que deverá ter no site? Como: Sobre Nós / Contato / etc. Favor especificar.
11) Qual o conhecimento que os visitantes do site tem de internet/web?
Planejando Web Sites
Briefing
12) O site terá atualização constante?
13) Tem em mente alguma aparência para o web site?
14) Existem padrões existentes, como logotipos e cores, que devem estar presentes?
15) Quais são alguns outros sites da web que você gosta? O que você gosta a respeito deles? Se
possível, envie links de referência.
16) Quem será o responsável pelo contato com para eventuais esclarecimentos sobre o projeto e
envio de materiais?
1) O que não pode haver no web site, em função dos concorrentes?
Planejando Web Sites
Briefing

IMPORTANTE
Não existe um briefing padrão para todos os projetos.

A reunião presencial ainda é o melhor método para alinhar
as métricas e expectativas de um web site.
Cuidado com os rabiscos em reunião...
Planejando Web Sites
Briefing
Planejando Web Sites
Briefing
Planejando Web Sites
Briefing
Rabisque e crie em
seguida, a chance de
você esquecer o que
pensou com os rabiscos
de um briefing são
grandes...
Planejando Web Sites
Briefing
Planejando Web Sites
Briefing - Atividade Prática
O que fazer?!

Imagine que você é dono de
uma floricultura e deseja
realizar um site, para isso você

irá contratar um colega para
desenvolver o site para você.
Planejando Web Sites
Briefing - Atividade Prática
O que fazer?!
Nessa atividade você irá
desempenhar dois papéis,
de cliente e de web
designer.
Planejando Web Sites
Briefing
Em dupla, vocês irão definir

Cada

integrante

da

dupla

deverá

um questionário (briefing) para

inicialmente fazer o seu questionário e, ao

o desenvolvimento de um site

finalizar todas as questões que achar

de uma floricultura.

relevante, cada um deverá responder ao
questionamento do outro, obtendo assim o
briefing e a resposta para suas perguntas.
Planejando Web Sites
Briefing
Dica - USE Google Forms
Planejando Web Sites
Definição do Mapa do Site – Sitemap

O Mapa do Site corresponde a
estrutura e todas as ligações entre

si que o site deverá conter.
Planejando Web Sites
Definição do Mapa do Site – Sitemap

Exemplos de Sitemap
Planejando Web Sites
Definição do Mapa do Site – Sitemap
Planejando Web Sites
Desenvolvendo um Mapa do Site
O mapa do site é muito semelhante a um fluxograma ou

organograma empresarial, diferenciando apenas por se
tratar da hierarquia entre as páginas da web.
Planejando Web Sites
Desenvolvendo um Mapa do Site
Para esta atividade, utilizaremos a ferramenta online Cacoo

Acesse e crie uma conta - https://cacoo.com/
Planejando Web Sites
Atividade Prática - Criando o Mapa do Site
Criando o Mapa do Site de um Restaurante Mexicano com as seguintes seções:

Vamos
trabalhar!
Planejando Web Sites
Atividade Prática - Criando o SEU Mapa do
Site
Agora que você já sabe como estruturar

um mapa do site, estruture o mapa do
site da floricultura do seu colega

baseado nas respostas obtidas pelo
briefing.
Atividade a ser entregue - compartilhar no grupo do Facebook

Vamos
trabalhar!
Planejando Web Sites
Wireframe
O Wireframe é a representação das áreas úteis de cada
elemento do seu site, servirá para definir em qual lugar da

página irá ficar o menu, as imagens, os textos, vídeos e
todos os outros elementos gráficos a serem exibidos em sua

página.
Planejando Web Sites
Wireframe
O Wireframe deverá ser composto por formas geométricas que
irão representar os elementos do seu site e deverá ser produzido

em tons de cinza para que o cliente no momento que visualizar o
wireframe visualize a disposição e orientação dos objetos como

um todo, e não foque sua atenção em um único objeto ou texto
que lhe chamar mais atenção.
Planejando Web Sites
Wireframe - Estrutura
A maioria das páginas que compõem um web site contam com uma definição de
áreas úteis reutilizáveis em todas as páginas, no nosso caso, da seguinte forma:

- Topo: com a representação da identidade visual (logotipo),
contatos, menu;

- Banner: Informações sobre a empresa de forma dinâmica
- Área de conteúdo: Informações que irão contemplar a página
- Rodapé: Contatos e redes sociais
Planejando Web Sites
Wireframe - Estrutura
Qual o tamanho que devo
criar o wireframe do meu
site?
Qual resolução mais utilizada
atualmente?
http://gs.statcounter.com
Planejando Web Sites
Wireframe - Estrutura

E para celular ou tablet?
Sites para mobile/tablets =
Outro projeto, outro sitemap, outro
wireframe …outro tudo!
Planejando Web Sites
Criando o Wireframe utilizando o Cacoo

Vamos trabalhar?

Criando o
Wireframe da
página home...

Vamos
trabalhar!
Planejando Web Sites
Criando o Wireframe utilizando o Cacoo
Planejando Web Sites
Wireframe & Usabilidade
Usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à
interação do usuário, considerando as seguintes habilidades, de acordo com a norma ISO 9241:

•
•

Facilidade de aprendizado: a utilização do sistema requer pouco
treinamento;
Fácil de memorizar: o usuário deve lembrar como utilizar a interface
depois de algum tempo;
Planejando Web Sites
Wireframe & Usabilidade
Usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à
interação do usuário, considerando as seguintes habilidades, de acordo com a norma ISO 9241:

•
•
•

Maximizar a produtividade: a interface deve permitir que o usuário realize a tarefa de
forma rápida e eficiente;
Minimizar a taxa de erros: caso aconteçam erros, a interface deve avisar o usuário e
permitir a correção de modo fácil;
Maximizar a satisfação do usuário: a interface deve dar-lhe confiança e segurança.
Planejando Web Sites
Wireframe & Usabilidade
Planejando Web Sites
Wireframe & Acessibilidade
Acessibilidade Web refere-se a prática inclusiva de fazer websites que possam ser
utilizados por todas as pessoas que tenham deficiência ou não.
Segundo a pesquisa "Dimensões e características da
Web brasileira: um estudo do .gov.br" realizada pelo
W3C.br/NIC.br, somente 2% das páginas web
governamentais são acessíveis.
Planejando Web Sites
Wireframe & Acessibilidade
Planejando Web Sites
Lorem Ipsum

Lorem Ipsum é um texto em latim que
na área de web design e design
gráfico é utilizada para preencher
áreas de textos que o cliente
precisará informar o texto correto
Planejando Web Sites
Lorem Ipsum
Sua utilização se dá para que a
diagramação do texto fique correta
(posicionamento das letras, alinhamento
das palavras, etc.) porém sua leitura não
distraia o cliente, fazendo com que o

mesmo foque sua atenção ao design e não
ao texto.
Planejando Web Sites
Lorem Ipsum
http://br.lipsum.com/
Planejando Web Sites
Criando o Wireframe utilizando o Cacoo
Agora que você já sabe quais as
ferramentas necessárias para estruturar
um Wireframe, finalize o Wireframe da
página Home estruture o exemplo do
restaurante conforme as telas a seguir.
Atividade a ser entregue - compartilhar no grupo do Facebook

Vamos
trabalhar!
Planejando Web Sites
Criando o Wireframe utilizando o Cacoo
Cardápio

Quem somos

Fotos

Contato

Onde Estamos?
Planejando Web Sites
Quer ver mais Wireframes..?

http://wireframes.tumblr.com/
Planejando Web Sites
Precisou de ícones, eis a solução!

https://www.iconfinder.com/

http://www.iconarchive.com/

http://www.flaticon.com/
Planejando Web Sites
Atividade Prática - Wireframe
Agora que você já sabe estruturar um

Wireframe, estruture o da floricultura de
seu colega a partir das informações

obtidas no mapa do site.

Atividade a ser entregue - compartilhar no grupo do Facebook

Vamos
trabalhar!
Planejando Web Sites
Atividade Prática - Wireframe

Bom trabalho!

Mais conteúdo relacionado

Mais procurados

Proposta Website
Proposta WebsiteProposta Website
Proposta Website
Chris Robers
 
Proposta web site2
Proposta web site2Proposta web site2
Proposta web site2
Diego Silva Soares
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
Carla Suelen
 
Produção de website
Produção de websiteProdução de website
Produção de website
Lauren Piana
 
Como preparar orçamento Gestão Redes Sociais 2015
Como preparar orçamento Gestão Redes Sociais 2015Como preparar orçamento Gestão Redes Sociais 2015
Como preparar orçamento Gestão Redes Sociais 2015
Ana Mendes
 
Work Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes SociaisWork Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes Sociais
João Roberto Magalhães Lima
 
Como gerar negócios com seu website.
Como gerar negócios com seu website.Como gerar negócios com seu website.
Como gerar negócios com seu website.
Brinomi Web Design
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web Design
Sandra Oliveira
 
Webwriting: Dicas e técnicas para escrever de forma mais eficiente para a Web
Webwriting: Dicas e técnicas para escrever de forma mais eficiente para a WebWebwriting: Dicas e técnicas para escrever de forma mais eficiente para a Web
Webwriting: Dicas e técnicas para escrever de forma mais eficiente para a Web
Resultados Digitais
 
Artigos 10 Dicas Para Marketing Digital
Artigos  10 Dicas Para Marketing DigitalArtigos  10 Dicas Para Marketing Digital
Artigos 10 Dicas Para Marketing Digital
ana
 
Webwriting como ferramenta de construção da reputação na web
Webwriting como ferramenta de construção da reputação na webWebwriting como ferramenta de construção da reputação na web
Webwriting como ferramenta de construção da reputação na web
Enrico Cardoso
 
Escrever é Fazer Sexo e os Princípios do Webwriting
Escrever é Fazer Sexo e os Princípios do WebwritingEscrever é Fazer Sexo e os Princípios do Webwriting
Escrever é Fazer Sexo e os Princípios do Webwriting
posgraduacaorj
 
Profissão: internet
Profissão: internetProfissão: internet
Profissão: internet
Gustavo Freitas
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
Horácio Soares
 
WEBDESIGN P1 Resumo
WEBDESIGN P1 ResumoWEBDESIGN P1 Resumo
WEBDESIGN P1 Resumo
Renato Melo
 
Posicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJCPosicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJC
Fabio Ricotta
 
SEO: Noções Básicas
SEO: Noções BásicasSEO: Noções Básicas
SEO: Noções Básicas
Renato Melo
 
Webwriting: a Redação para Web
Webwriting: a Redação para WebWebwriting: a Redação para Web
Webwriting: a Redação para Web
Luiz Agner
 
8 Táticas Para Divulgar Sua Marca Na Internet
8 Táticas Para Divulgar Sua Marca Na Internet8 Táticas Para Divulgar Sua Marca Na Internet
8 Táticas Para Divulgar Sua Marca Na Internet
Bruno Capanema
 
Curso Marketing no Facebook - ESPM (Fevereiro 2012)
Curso Marketing no Facebook - ESPM (Fevereiro 2012)Curso Marketing no Facebook - ESPM (Fevereiro 2012)
Curso Marketing no Facebook - ESPM (Fevereiro 2012)
Glebe Duarte
 

Mais procurados (20)

Proposta Website
Proposta WebsiteProposta Website
Proposta Website
 
Proposta web site2
Proposta web site2Proposta web site2
Proposta web site2
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Produção de website
Produção de websiteProdução de website
Produção de website
 
Como preparar orçamento Gestão Redes Sociais 2015
Como preparar orçamento Gestão Redes Sociais 2015Como preparar orçamento Gestão Redes Sociais 2015
Como preparar orçamento Gestão Redes Sociais 2015
 
Work Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes SociaisWork Shop Ferramentas De Marketing Digital Redes Sociais
Work Shop Ferramentas De Marketing Digital Redes Sociais
 
Como gerar negócios com seu website.
Como gerar negócios com seu website.Como gerar negócios com seu website.
Como gerar negócios com seu website.
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web Design
 
Webwriting: Dicas e técnicas para escrever de forma mais eficiente para a Web
Webwriting: Dicas e técnicas para escrever de forma mais eficiente para a WebWebwriting: Dicas e técnicas para escrever de forma mais eficiente para a Web
Webwriting: Dicas e técnicas para escrever de forma mais eficiente para a Web
 
Artigos 10 Dicas Para Marketing Digital
Artigos  10 Dicas Para Marketing DigitalArtigos  10 Dicas Para Marketing Digital
Artigos 10 Dicas Para Marketing Digital
 
Webwriting como ferramenta de construção da reputação na web
Webwriting como ferramenta de construção da reputação na webWebwriting como ferramenta de construção da reputação na web
Webwriting como ferramenta de construção da reputação na web
 
Escrever é Fazer Sexo e os Princípios do Webwriting
Escrever é Fazer Sexo e os Princípios do WebwritingEscrever é Fazer Sexo e os Princípios do Webwriting
Escrever é Fazer Sexo e os Princípios do Webwriting
 
Profissão: internet
Profissão: internetProfissão: internet
Profissão: internet
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
 
WEBDESIGN P1 Resumo
WEBDESIGN P1 ResumoWEBDESIGN P1 Resumo
WEBDESIGN P1 Resumo
 
Posicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJCPosicionando o seu site para o Google e para Clientes #GBGSJC
Posicionando o seu site para o Google e para Clientes #GBGSJC
 
SEO: Noções Básicas
SEO: Noções BásicasSEO: Noções Básicas
SEO: Noções Básicas
 
Webwriting: a Redação para Web
Webwriting: a Redação para WebWebwriting: a Redação para Web
Webwriting: a Redação para Web
 
8 Táticas Para Divulgar Sua Marca Na Internet
8 Táticas Para Divulgar Sua Marca Na Internet8 Táticas Para Divulgar Sua Marca Na Internet
8 Táticas Para Divulgar Sua Marca Na Internet
 
Curso Marketing no Facebook - ESPM (Fevereiro 2012)
Curso Marketing no Facebook - ESPM (Fevereiro 2012)Curso Marketing no Facebook - ESPM (Fevereiro 2012)
Curso Marketing no Facebook - ESPM (Fevereiro 2012)
 

Destaque

8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sites
Isaac Batista
 
Etapas de desenvolvimento de um website
Etapas de desenvolvimento de um websiteEtapas de desenvolvimento de um website
Etapas de desenvolvimento de um website
Rafael Marques
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Wire frame e mapa do site
Wire frame e mapa do siteWire frame e mapa do site
Wire frame e mapa do site
Elisângela X. P. dos Santos
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
Renato Bongiorno Bonfanti
 
Usuarios Mobile
Usuarios MobileUsuarios Mobile
Usuarios Mobile
Renato Bongiorno Bonfanti
 
Browser Mobile - IE
Browser Mobile - IEBrowser Mobile - IE
Browser Mobile - IE
Renato Bongiorno Bonfanti
 
Atividade de web design
Atividade de web designAtividade de web design
Atividade de web design
ViniciusGuedes
 
Criação de páginas web 1
Criação de páginas web 1Criação de páginas web 1
Criação de páginas web 1
arturramisio
 
Apresentação sobre a WEB 2.0
Apresentação sobre a WEB 2.0Apresentação sobre a WEB 2.0
Apresentação sobre a WEB 2.0
Fernando Delgado
 
Briefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestreBriefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestre
Paulo Vinicius
 
Slideaula ilza
Slideaula ilzaSlideaula ilza
Slideaula ilza
dirceilza
 
CRP- 0420: Comunicação Digital - Aula 1: Contexto
CRP- 0420: Comunicação Digital - Aula 1: ContextoCRP- 0420: Comunicação Digital - Aula 1: Contexto
CRP- 0420: Comunicação Digital - Aula 1: Contexto
Cauê de Souza
 
Mobile First
Mobile FirstMobile First
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
David Arty
 
Pacote de Valores - Prosit
Pacote de Valores - PrositPacote de Valores - Prosit
Pacote de Valores - Prosit
Matheus Farias
 
Apresentação Literato Comunicação
Apresentação Literato ComunicaçãoApresentação Literato Comunicação
Apresentação Literato Comunicação
literatocomunicacao
 
Apresentao espelunca chic
Apresentao espelunca chicApresentao espelunca chic
Apresentao espelunca chic
marybrito
 
Kim Japa Food
Kim Japa FoodKim Japa Food
Kim Japa Food
Mediaalta
 
SPETACOLLO Restaurante e Botequim
SPETACOLLO Restaurante e BotequimSPETACOLLO Restaurante e Botequim
SPETACOLLO Restaurante e Botequim
Cia de Franchising
 

Destaque (20)

8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sites
 
Etapas de desenvolvimento de um website
Etapas de desenvolvimento de um websiteEtapas de desenvolvimento de um website
Etapas de desenvolvimento de um website
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Wire frame e mapa do site
Wire frame e mapa do siteWire frame e mapa do site
Wire frame e mapa do site
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Usuarios Mobile
Usuarios MobileUsuarios Mobile
Usuarios Mobile
 
Browser Mobile - IE
Browser Mobile - IEBrowser Mobile - IE
Browser Mobile - IE
 
Atividade de web design
Atividade de web designAtividade de web design
Atividade de web design
 
Criação de páginas web 1
Criação de páginas web 1Criação de páginas web 1
Criação de páginas web 1
 
Apresentação sobre a WEB 2.0
Apresentação sobre a WEB 2.0Apresentação sobre a WEB 2.0
Apresentação sobre a WEB 2.0
 
Briefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestreBriefing oppi 2011_2_semestre
Briefing oppi 2011_2_semestre
 
Slideaula ilza
Slideaula ilzaSlideaula ilza
Slideaula ilza
 
CRP- 0420: Comunicação Digital - Aula 1: Contexto
CRP- 0420: Comunicação Digital - Aula 1: ContextoCRP- 0420: Comunicação Digital - Aula 1: Contexto
CRP- 0420: Comunicação Digital - Aula 1: Contexto
 
Mobile First
Mobile FirstMobile First
Mobile First
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
 
Pacote de Valores - Prosit
Pacote de Valores - PrositPacote de Valores - Prosit
Pacote de Valores - Prosit
 
Apresentação Literato Comunicação
Apresentação Literato ComunicaçãoApresentação Literato Comunicação
Apresentação Literato Comunicação
 
Apresentao espelunca chic
Apresentao espelunca chicApresentao espelunca chic
Apresentao espelunca chic
 
Kim Japa Food
Kim Japa FoodKim Japa Food
Kim Japa Food
 
SPETACOLLO Restaurante e Botequim
SPETACOLLO Restaurante e BotequimSPETACOLLO Restaurante e Botequim
SPETACOLLO Restaurante e Botequim
 

Semelhante a Planejamento e Desenvolvimento de Web Sites

Como fazer um site
Como fazer um siteComo fazer um site
Marketing Online Elementa
Marketing Online ElementaMarketing Online Elementa
Marketing Online Elementa
BNI
 
3 erros comuns na criação de sites
3 erros comuns na criação de sites3 erros comuns na criação de sites
3 erros comuns na criação de sites
Senior Consultoria em Gestão e Marketing
 
Questionário Empresa Webvix
Questionário Empresa WebvixQuestionário Empresa Webvix
Questionário Empresa Webvix
gueste3d3ab
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
Horácio Soares
 
Construa o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêConstrua o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquê
Cady Bocum
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
Ponto Final Design
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro Gomes
 
Como criar um site inteligente e que ajuda sua empresa a vender?
 Como criar um site inteligente e que ajuda sua empresa a vender? Como criar um site inteligente e que ajuda sua empresa a vender?
Como criar um site inteligente e que ajuda sua empresa a vender?
Silvio César de Oliveira
 
Apresentação somoscom
Apresentação somoscomApresentação somoscom
Apresentação somoscom
somoscom
 
Portfolio_apresentaçãoSomoscom
Portfolio_apresentaçãoSomoscomPortfolio_apresentaçãoSomoscom
Portfolio_apresentaçãoSomoscom
JULIANA REZENDE
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
Israel Degasperi
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
Alan Pereira
 
8 passos para o sucesso digital da sua empresa águas de lindóia
8 passos para o sucesso digital da sua empresa   águas de lindóia8 passos para o sucesso digital da sua empresa   águas de lindóia
8 passos para o sucesso digital da sua empresa águas de lindóia
Denis Zanini
 
Senac Bauru - Marketing na Web - Aula 2
Senac Bauru - Marketing na Web - Aula 2Senac Bauru - Marketing na Web - Aula 2
Senac Bauru - Marketing na Web - Aula 2
Paulo César Silva
 
PROPOSTA CLIENTES PREMIUM
PROPOSTA CLIENTES PREMIUMPROPOSTA CLIENTES PREMIUM
PROPOSTA CLIENTES PREMIUM
goocloud
 
Marketing jurídico digital
Marketing jurídico digitalMarketing jurídico digital
Marketing jurídico digital
Marco Antonio P. Gonçalves
 
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginersIBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
Fabio Ricotta
 
Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmaster
Jeferson Souza
 

Semelhante a Planejamento e Desenvolvimento de Web Sites (20)

Como fazer um site
Como fazer um siteComo fazer um site
Como fazer um site
 
Marketing Online Elementa
Marketing Online ElementaMarketing Online Elementa
Marketing Online Elementa
 
3 erros comuns na criação de sites
3 erros comuns na criação de sites3 erros comuns na criação de sites
3 erros comuns na criação de sites
 
Questionário Empresa Webvix
Questionário Empresa WebvixQuestionário Empresa Webvix
Questionário Empresa Webvix
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
 
Construa o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêConstrua o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquê
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Como criar um site inteligente e que ajuda sua empresa a vender?
 Como criar um site inteligente e que ajuda sua empresa a vender? Como criar um site inteligente e que ajuda sua empresa a vender?
Como criar um site inteligente e que ajuda sua empresa a vender?
 
Apresentação somoscom
Apresentação somoscomApresentação somoscom
Apresentação somoscom
 
Portfolio_apresentaçãoSomoscom
Portfolio_apresentaçãoSomoscomPortfolio_apresentaçãoSomoscom
Portfolio_apresentaçãoSomoscom
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
 
8 passos para o sucesso digital da sua empresa águas de lindóia
8 passos para o sucesso digital da sua empresa   águas de lindóia8 passos para o sucesso digital da sua empresa   águas de lindóia
8 passos para o sucesso digital da sua empresa águas de lindóia
 
Senac Bauru - Marketing na Web - Aula 2
Senac Bauru - Marketing na Web - Aula 2Senac Bauru - Marketing na Web - Aula 2
Senac Bauru - Marketing na Web - Aula 2
 
PROPOSTA CLIENTES PREMIUM
PROPOSTA CLIENTES PREMIUMPROPOSTA CLIENTES PREMIUM
PROPOSTA CLIENTES PREMIUM
 
Marketing jurídico digital
Marketing jurídico digitalMarketing jurídico digital
Marketing jurídico digital
 
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginersIBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
 
Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmaster
 

Mais de Renato Bongiorno Bonfanti

Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
Renato Bongiorno Bonfanti
 
Responsive Web Design - UX
Responsive Web Design - UXResponsive Web Design - UX
Responsive Web Design - UX
Renato Bongiorno Bonfanti
 
Responsive Web Design - AI
Responsive Web Design - AIResponsive Web Design - AI
Responsive Web Design - AI
Renato Bongiorno Bonfanti
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
Renato Bongiorno Bonfanti
 
Coding Dojo
Coding DojoCoding Dojo
Browsers Mobile
Browsers MobileBrowsers Mobile
Browsers Mobile
Renato Bongiorno Bonfanti
 
Browser Mobile - Safari
Browser Mobile - SafariBrowser Mobile - Safari
Browser Mobile - Safari
Renato Bongiorno Bonfanti
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
Renato Bongiorno Bonfanti
 
Browser Mobile - Firefox
Browser Mobile - FirefoxBrowser Mobile - Firefox
Browser Mobile - Firefox
Renato Bongiorno Bonfanti
 
Browser Mobile - Chrome
Browser Mobile - ChromeBrowser Mobile - Chrome
Browser Mobile - Chrome
Renato Bongiorno Bonfanti
 
Aula de Ambiente Mobile
Aula de Ambiente MobileAula de Ambiente Mobile
Aula de Ambiente Mobile
Renato Bongiorno Bonfanti
 
Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]
Renato Bongiorno Bonfanti
 
SEO - Relatório On Page - Otimização
SEO - Relatório On Page - OtimizaçãoSEO - Relatório On Page - Otimização
SEO - Relatório On Page - Otimização
Renato Bongiorno Bonfanti
 
Relatório de performance para Social Media
Relatório de performance para Social MediaRelatório de performance para Social Media
Relatório de performance para Social Media
Renato Bongiorno Bonfanti
 
Relatório de performance Web
Relatório de performance WebRelatório de performance Web
Relatório de performance Web
Renato Bongiorno Bonfanti
 
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Renato Bongiorno Bonfanti
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Renato Bongiorno Bonfanti
 
SEO - Vantagens que a Web Semântica ira trazer ao seu site
SEO - Vantagens que a Web Semântica ira trazer ao seu siteSEO - Vantagens que a Web Semântica ira trazer ao seu site
SEO - Vantagens que a Web Semântica ira trazer ao seu site
Renato Bongiorno Bonfanti
 
Road Show TI SENAC - Redes sociais e web semântica, qual a relação?
Road Show TI SENAC - Redes sociais e web semântica, qual a relação?Road Show TI SENAC - Redes sociais e web semântica, qual a relação?
Road Show TI SENAC - Redes sociais e web semântica, qual a relação?
Renato Bongiorno Bonfanti
 
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Renato Bongiorno Bonfanti
 

Mais de Renato Bongiorno Bonfanti (20)

Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
 
Responsive Web Design - UX
Responsive Web Design - UXResponsive Web Design - UX
Responsive Web Design - UX
 
Responsive Web Design - AI
Responsive Web Design - AIResponsive Web Design - AI
Responsive Web Design - AI
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
 
Coding Dojo
Coding DojoCoding Dojo
Coding Dojo
 
Browsers Mobile
Browsers MobileBrowsers Mobile
Browsers Mobile
 
Browser Mobile - Safari
Browser Mobile - SafariBrowser Mobile - Safari
Browser Mobile - Safari
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
 
Browser Mobile - Firefox
Browser Mobile - FirefoxBrowser Mobile - Firefox
Browser Mobile - Firefox
 
Browser Mobile - Chrome
Browser Mobile - ChromeBrowser Mobile - Chrome
Browser Mobile - Chrome
 
Aula de Ambiente Mobile
Aula de Ambiente MobileAula de Ambiente Mobile
Aula de Ambiente Mobile
 
Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]
 
SEO - Relatório On Page - Otimização
SEO - Relatório On Page - OtimizaçãoSEO - Relatório On Page - Otimização
SEO - Relatório On Page - Otimização
 
Relatório de performance para Social Media
Relatório de performance para Social MediaRelatório de performance para Social Media
Relatório de performance para Social Media
 
Relatório de performance Web
Relatório de performance WebRelatório de performance Web
Relatório de performance Web
 
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
SEO - Vantagens que a Web Semântica ira trazer ao seu site
SEO - Vantagens que a Web Semântica ira trazer ao seu siteSEO - Vantagens que a Web Semântica ira trazer ao seu site
SEO - Vantagens que a Web Semântica ira trazer ao seu site
 
Road Show TI SENAC - Redes sociais e web semântica, qual a relação?
Road Show TI SENAC - Redes sociais e web semântica, qual a relação?Road Show TI SENAC - Redes sociais e web semântica, qual a relação?
Road Show TI SENAC - Redes sociais e web semântica, qual a relação?
 
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
 

Último

the_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdfthe_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdf
CarinaSoto12
 
UFCD_10949_Lojas e-commerce no-code_índice.pdf
UFCD_10949_Lojas e-commerce no-code_índice.pdfUFCD_10949_Lojas e-commerce no-code_índice.pdf
UFCD_10949_Lojas e-commerce no-code_índice.pdf
Manuais Formação
 
Livro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo FreireLivro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo Freire
WelberMerlinCardoso
 
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptxA dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
ReinaldoSouza57
 
UFCD_5420_Integração de sistemas de informação - conceitos_índice.pdf
UFCD_5420_Integração de sistemas de informação - conceitos_índice.pdfUFCD_5420_Integração de sistemas de informação - conceitos_índice.pdf
UFCD_5420_Integração de sistemas de informação - conceitos_índice.pdf
Manuais Formação
 
Especialidade - Animais Ameaçados de Extinção(1).pdf
Especialidade - Animais Ameaçados de Extinção(1).pdfEspecialidade - Animais Ameaçados de Extinção(1).pdf
Especialidade - Animais Ameaçados de Extinção(1).pdf
DanielCastro80471
 
759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf
759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf
759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf
MessiasMarianoG
 
Estrutura Pedagógica - Laboratório de Educação a Distância.ppt
Estrutura Pedagógica - Laboratório de Educação a Distância.pptEstrutura Pedagógica - Laboratório de Educação a Distância.ppt
Estrutura Pedagógica - Laboratório de Educação a Distância.ppt
livrosjovert
 
BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...
BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...
BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...
Escola Municipal Jesus Cristo
 
O sentimento nacional brasiliero, segundo o historiador Jose Murlo de Carvalho
O sentimento nacional brasiliero, segundo o historiador Jose Murlo de CarvalhoO sentimento nacional brasiliero, segundo o historiador Jose Murlo de Carvalho
O sentimento nacional brasiliero, segundo o historiador Jose Murlo de Carvalho
analuisasesso
 
Fernão Lopes. pptx
Fernão Lopes.                       pptxFernão Lopes.                       pptx
Fernão Lopes. pptx
TomasSousa7
 
0002_matematica_6ano livro de matemática
0002_matematica_6ano livro de matemática0002_matematica_6ano livro de matemática
0002_matematica_6ano livro de matemática
Giovana Gomes da Silva
 
Funções e Progressões - Livro completo prisma
Funções e Progressões - Livro completo prismaFunções e Progressões - Livro completo prisma
Funções e Progressões - Livro completo prisma
djincognito
 
Atividade letra da música - Espalhe Amor, Anavitória.
Atividade letra da música - Espalhe  Amor, Anavitória.Atividade letra da música - Espalhe  Amor, Anavitória.
Atividade letra da música - Espalhe Amor, Anavitória.
Mary Alvarenga
 
Atividades de Inglês e Espanhol para Imprimir - Alfabetinho
Atividades de Inglês e Espanhol para Imprimir - AlfabetinhoAtividades de Inglês e Espanhol para Imprimir - Alfabetinho
Atividades de Inglês e Espanhol para Imprimir - Alfabetinho
MateusTavares54
 
Sinais de pontuação
Sinais de pontuaçãoSinais de pontuação
Sinais de pontuação
Mary Alvarenga
 
Famílias Que Contribuíram Para O Crescimento Do Assaré
Famílias Que Contribuíram Para O Crescimento Do AssaréFamílias Que Contribuíram Para O Crescimento Do Assaré
Famílias Que Contribuíram Para O Crescimento Do Assaré
profesfrancleite
 
.Template .padrao .slides .TCC .2024 ppt
.Template .padrao .slides .TCC .2024 ppt.Template .padrao .slides .TCC .2024 ppt
.Template .padrao .slides .TCC .2024 ppt
IslanderAndrade
 
Caça-palavras ortografia M antes de P e B.
Caça-palavras    ortografia M antes de P e B.Caça-palavras    ortografia M antes de P e B.
Caça-palavras ortografia M antes de P e B.
Mary Alvarenga
 
Redação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptxRedação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptx
DECIOMAURINARAMOS
 

Último (20)

the_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdfthe_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdf
 
UFCD_10949_Lojas e-commerce no-code_índice.pdf
UFCD_10949_Lojas e-commerce no-code_índice.pdfUFCD_10949_Lojas e-commerce no-code_índice.pdf
UFCD_10949_Lojas e-commerce no-code_índice.pdf
 
Livro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo FreireLivro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo Freire
 
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptxA dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
 
UFCD_5420_Integração de sistemas de informação - conceitos_índice.pdf
UFCD_5420_Integração de sistemas de informação - conceitos_índice.pdfUFCD_5420_Integração de sistemas de informação - conceitos_índice.pdf
UFCD_5420_Integração de sistemas de informação - conceitos_índice.pdf
 
Especialidade - Animais Ameaçados de Extinção(1).pdf
Especialidade - Animais Ameaçados de Extinção(1).pdfEspecialidade - Animais Ameaçados de Extinção(1).pdf
Especialidade - Animais Ameaçados de Extinção(1).pdf
 
759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf
759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf
759-fortaleza-resultado-definitivo-prova-objetiva-2024-05-28.pdf
 
Estrutura Pedagógica - Laboratório de Educação a Distância.ppt
Estrutura Pedagógica - Laboratório de Educação a Distância.pptEstrutura Pedagógica - Laboratório de Educação a Distância.ppt
Estrutura Pedagógica - Laboratório de Educação a Distância.ppt
 
BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...
BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...
BULLYING NÃO É AMOR.pdf LIVRO PARA TRABALHAR COM ALUNOS ATRAVÉS DE PROJETOS...
 
O sentimento nacional brasiliero, segundo o historiador Jose Murlo de Carvalho
O sentimento nacional brasiliero, segundo o historiador Jose Murlo de CarvalhoO sentimento nacional brasiliero, segundo o historiador Jose Murlo de Carvalho
O sentimento nacional brasiliero, segundo o historiador Jose Murlo de Carvalho
 
Fernão Lopes. pptx
Fernão Lopes.                       pptxFernão Lopes.                       pptx
Fernão Lopes. pptx
 
0002_matematica_6ano livro de matemática
0002_matematica_6ano livro de matemática0002_matematica_6ano livro de matemática
0002_matematica_6ano livro de matemática
 
Funções e Progressões - Livro completo prisma
Funções e Progressões - Livro completo prismaFunções e Progressões - Livro completo prisma
Funções e Progressões - Livro completo prisma
 
Atividade letra da música - Espalhe Amor, Anavitória.
Atividade letra da música - Espalhe  Amor, Anavitória.Atividade letra da música - Espalhe  Amor, Anavitória.
Atividade letra da música - Espalhe Amor, Anavitória.
 
Atividades de Inglês e Espanhol para Imprimir - Alfabetinho
Atividades de Inglês e Espanhol para Imprimir - AlfabetinhoAtividades de Inglês e Espanhol para Imprimir - Alfabetinho
Atividades de Inglês e Espanhol para Imprimir - Alfabetinho
 
Sinais de pontuação
Sinais de pontuaçãoSinais de pontuação
Sinais de pontuação
 
Famílias Que Contribuíram Para O Crescimento Do Assaré
Famílias Que Contribuíram Para O Crescimento Do AssaréFamílias Que Contribuíram Para O Crescimento Do Assaré
Famílias Que Contribuíram Para O Crescimento Do Assaré
 
.Template .padrao .slides .TCC .2024 ppt
.Template .padrao .slides .TCC .2024 ppt.Template .padrao .slides .TCC .2024 ppt
.Template .padrao .slides .TCC .2024 ppt
 
Caça-palavras ortografia M antes de P e B.
Caça-palavras    ortografia M antes de P e B.Caça-palavras    ortografia M antes de P e B.
Caça-palavras ortografia M antes de P e B.
 
Redação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptxRedação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptx
 

Planejamento e Desenvolvimento de Web Sites

  • 1. Planejando e Desenvolvimento web sites Ensino IP
  • 2. Quem sou eu…? || Renato Bongiorno Bonfanti » Web, Consultor SEO e Analista de Social Media || Bongiornoweb - Web | SEO | Social Media » (11) 97088-3781 | (11) 97688-8824 » http://www.bongiornoweb.com.br/ » https://www.facebook.com/bongiornoweb » https://twitter.com/bongiornoweb » http://instagram.com/bongiornoweb » http://www.pinterest.com/bongiornoweb/ » http://www.linkedin.com/in/bongiornoweb » https://plus.google.com/u/0/+RenatoBongiorno-bongiornoweb » contato@bongiornoweb.com.br
  • 3. Agenda - Parte I • • • • • • • • • A Internet Internet vs Web Segurança na Internet Planejando Web Sites Como conquistar clientes na era digital Briefing Atividade Prática - Criando Briefings Definição do Mapa do Site – Sitemap Desenvolvendo um Mapa do Site • • • • • Wireframe Desenvolvimento do Wireframe - Home Produtividade em Wireframes Lorem Ipsum Atividade Prática - Finalizando Wireframes
  • 4. Agenda - Parte II • • • • • • • O Protótipo Desenvolvendo o Protótipo Selecionando as cores para o design do site Imagens Flat Design – Design Plano Criando o protótipo Atividade Prática - Finalizando Arte Restaurante
  • 5. De onde partimos, para onde vamos? 1. Planejamento
  • 6. De onde partimos, para onde vamos? 1. Estruturação 2. Criação
  • 7. A Internet A Internet – do ponto de vista tecnológico – é uma imensa rede de computadores interligados de alcance mundial...
  • 8. A Internet Desde seu surgimento facilitou a comunicação mundial entre empresas e pessoas, gerando oportunidades de negócios, facilitando o relacionamento com clientes através de uma nova forma de comunicação.
  • 9. A Internet A internet é um passaporte de cidadania do mundo. Não tem nacionalidade. Não tem fronteira. Não tem dono, nem governo. Nela cabem todas as ideologias. Nela o homem é livre. E a mensagem, verdadeira. Internet para Pequenos Negócios – Sebrae
  • 10. O que é Internet e o que é a Web? A Internet corresponde ao meio físico (cabos, servidores, roteadores, modens) pelas quais os computadores ao redor do mundo são interligados.
  • 11. O que é Internet e o que é a Web? A Web corresponde aos sites que navegamos, aos e-mails que enviamos, as ferramentas de chat que utilizamos em nosso dia a dia, resumindo, corresponde a forma de comunicação que utilizamos através da Internet.
  • 12. Segurança na Internet Navegar na Internet requer muito cuidado e atenção, pois sabemos que dentro desse fascinante universo, existem também, muitos perigos.
  • 13. Segurança na Internet Cartilha de Segurança para Internet http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf
  • 14. Segurança na Internet Navegar é preciso - http://www.youtube.com/watch?v=QyOhW-cOpT0 Os Invasores - http://www.youtube.com/watch?v=0Zxt7kS5miQ Spam - http://www.youtube.com/watch?v=DFL5TbyfhrU A Defesa - http://www.youtube.com/watch?v=xwJkQKJGlnA
  • 15. Planejando Web Sites Como conquistar clientes na era digital Atualmente, empresas não mais devem oferecer web sites a seus clientes, e sim uma proposta de comunicação digital para empresas no mundo virtual.
  • 16. Planejando Web Sites Briefing Quero fazer um site… só isso?!
  • 17. Planejando Web Sites Briefing - Mais que um site… VIDEO Cada etapa é um projeto que contempla um site... LANDING PAGE SOCIAL MEDIA SITE LOJA VIRTUA L GOOGLE SEO/SEM BLOG
  • 18. Planejando Web Sites Briefing - Mais que um site… Um pouco do que vem por aí... Social Media Revolution http://www.youtube.com/watch?v=9SBKtdYLRUM Mobile Mkt http://www.youtube.com/watch?v=xzmQm-hRgTg
  • 19. Planejando Web Sites Briefing O briefing corresponde ao levantamento de requisitos e objetivos necessários para realização do web site.
  • 20. Planejando Web Sites Briefing O Principal objetivo é entender o que o cliente quer….
  • 21. Planejando Web Sites Briefing O briefing pode ser feito através de reuniões presenciais, conversas online via ferramentas de chats (ex.: Skype) ou até mesmo através de formulários enviados por e-mail com perguntas básicas sobre as necessidades do cliente.
  • 23. Planejando Web Sites Briefing 1) Qual o ramo de atuação da empresa? 2) Quais os produtos e serviços oferecidos? 3) O site já possui em endereço atual? 4) Existe alguma objeção de conteúdo e layout para o site? (Ex.: não utilizar as cores x,y,z) 5) Quais são os principais objetivos do site? 6) Quais são as mensagens mais importantes que o site deve passar aos visitantes?
  • 24. Planejando Web Sites Briefing 7) Quais são os planos para promover o site? Google, Midias Sociais, E-mail Marketing? 8) Há uma data aproximada para o site tenha que estar pronto? 9) É necessário obter dados dos visitantes em formulários? O que é preciso saber? Por quê? 10) Quais as páginas que deverá ter no site? Como: Sobre Nós / Contato / etc. Favor especificar. 11) Qual o conhecimento que os visitantes do site tem de internet/web?
  • 25. Planejando Web Sites Briefing 12) O site terá atualização constante? 13) Tem em mente alguma aparência para o web site? 14) Existem padrões existentes, como logotipos e cores, que devem estar presentes? 15) Quais são alguns outros sites da web que você gosta? O que você gosta a respeito deles? Se possível, envie links de referência. 16) Quem será o responsável pelo contato com para eventuais esclarecimentos sobre o projeto e envio de materiais? 1) O que não pode haver no web site, em função dos concorrentes?
  • 26. Planejando Web Sites Briefing IMPORTANTE Não existe um briefing padrão para todos os projetos. A reunião presencial ainda é o melhor método para alinhar as métricas e expectativas de um web site. Cuidado com os rabiscos em reunião...
  • 29. Planejando Web Sites Briefing Rabisque e crie em seguida, a chance de você esquecer o que pensou com os rabiscos de um briefing são grandes...
  • 31. Planejando Web Sites Briefing - Atividade Prática O que fazer?! Imagine que você é dono de uma floricultura e deseja realizar um site, para isso você irá contratar um colega para desenvolver o site para você.
  • 32. Planejando Web Sites Briefing - Atividade Prática O que fazer?! Nessa atividade você irá desempenhar dois papéis, de cliente e de web designer.
  • 33. Planejando Web Sites Briefing Em dupla, vocês irão definir Cada integrante da dupla deverá um questionário (briefing) para inicialmente fazer o seu questionário e, ao o desenvolvimento de um site finalizar todas as questões que achar de uma floricultura. relevante, cada um deverá responder ao questionamento do outro, obtendo assim o briefing e a resposta para suas perguntas.
  • 35. Planejando Web Sites Definição do Mapa do Site – Sitemap O Mapa do Site corresponde a estrutura e todas as ligações entre si que o site deverá conter.
  • 36. Planejando Web Sites Definição do Mapa do Site – Sitemap Exemplos de Sitemap
  • 37. Planejando Web Sites Definição do Mapa do Site – Sitemap
  • 38. Planejando Web Sites Desenvolvendo um Mapa do Site O mapa do site é muito semelhante a um fluxograma ou organograma empresarial, diferenciando apenas por se tratar da hierarquia entre as páginas da web.
  • 39. Planejando Web Sites Desenvolvendo um Mapa do Site Para esta atividade, utilizaremos a ferramenta online Cacoo Acesse e crie uma conta - https://cacoo.com/
  • 40. Planejando Web Sites Atividade Prática - Criando o Mapa do Site Criando o Mapa do Site de um Restaurante Mexicano com as seguintes seções: Vamos trabalhar!
  • 41. Planejando Web Sites Atividade Prática - Criando o SEU Mapa do Site Agora que você já sabe como estruturar um mapa do site, estruture o mapa do site da floricultura do seu colega baseado nas respostas obtidas pelo briefing. Atividade a ser entregue - compartilhar no grupo do Facebook Vamos trabalhar!
  • 42. Planejando Web Sites Wireframe O Wireframe é a representação das áreas úteis de cada elemento do seu site, servirá para definir em qual lugar da página irá ficar o menu, as imagens, os textos, vídeos e todos os outros elementos gráficos a serem exibidos em sua página.
  • 43. Planejando Web Sites Wireframe O Wireframe deverá ser composto por formas geométricas que irão representar os elementos do seu site e deverá ser produzido em tons de cinza para que o cliente no momento que visualizar o wireframe visualize a disposição e orientação dos objetos como um todo, e não foque sua atenção em um único objeto ou texto que lhe chamar mais atenção.
  • 44. Planejando Web Sites Wireframe - Estrutura A maioria das páginas que compõem um web site contam com uma definição de áreas úteis reutilizáveis em todas as páginas, no nosso caso, da seguinte forma: - Topo: com a representação da identidade visual (logotipo), contatos, menu; - Banner: Informações sobre a empresa de forma dinâmica - Área de conteúdo: Informações que irão contemplar a página - Rodapé: Contatos e redes sociais
  • 45. Planejando Web Sites Wireframe - Estrutura Qual o tamanho que devo criar o wireframe do meu site? Qual resolução mais utilizada atualmente? http://gs.statcounter.com
  • 46. Planejando Web Sites Wireframe - Estrutura E para celular ou tablet? Sites para mobile/tablets = Outro projeto, outro sitemap, outro wireframe …outro tudo!
  • 47. Planejando Web Sites Criando o Wireframe utilizando o Cacoo Vamos trabalhar? Criando o Wireframe da página home... Vamos trabalhar!
  • 48. Planejando Web Sites Criando o Wireframe utilizando o Cacoo
  • 49. Planejando Web Sites Wireframe & Usabilidade Usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário, considerando as seguintes habilidades, de acordo com a norma ISO 9241: • • Facilidade de aprendizado: a utilização do sistema requer pouco treinamento; Fácil de memorizar: o usuário deve lembrar como utilizar a interface depois de algum tempo;
  • 50. Planejando Web Sites Wireframe & Usabilidade Usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário, considerando as seguintes habilidades, de acordo com a norma ISO 9241: • • • Maximizar a produtividade: a interface deve permitir que o usuário realize a tarefa de forma rápida e eficiente; Minimizar a taxa de erros: caso aconteçam erros, a interface deve avisar o usuário e permitir a correção de modo fácil; Maximizar a satisfação do usuário: a interface deve dar-lhe confiança e segurança.
  • 52. Planejando Web Sites Wireframe & Acessibilidade Acessibilidade Web refere-se a prática inclusiva de fazer websites que possam ser utilizados por todas as pessoas que tenham deficiência ou não. Segundo a pesquisa "Dimensões e características da Web brasileira: um estudo do .gov.br" realizada pelo W3C.br/NIC.br, somente 2% das páginas web governamentais são acessíveis.
  • 53. Planejando Web Sites Wireframe & Acessibilidade
  • 54. Planejando Web Sites Lorem Ipsum Lorem Ipsum é um texto em latim que na área de web design e design gráfico é utilizada para preencher áreas de textos que o cliente precisará informar o texto correto
  • 55. Planejando Web Sites Lorem Ipsum Sua utilização se dá para que a diagramação do texto fique correta (posicionamento das letras, alinhamento das palavras, etc.) porém sua leitura não distraia o cliente, fazendo com que o mesmo foque sua atenção ao design e não ao texto.
  • 56. Planejando Web Sites Lorem Ipsum http://br.lipsum.com/
  • 57. Planejando Web Sites Criando o Wireframe utilizando o Cacoo Agora que você já sabe quais as ferramentas necessárias para estruturar um Wireframe, finalize o Wireframe da página Home estruture o exemplo do restaurante conforme as telas a seguir. Atividade a ser entregue - compartilhar no grupo do Facebook Vamos trabalhar!
  • 58. Planejando Web Sites Criando o Wireframe utilizando o Cacoo Cardápio Quem somos Fotos Contato Onde Estamos?
  • 59. Planejando Web Sites Quer ver mais Wireframes..? http://wireframes.tumblr.com/
  • 60. Planejando Web Sites Precisou de ícones, eis a solução! https://www.iconfinder.com/ http://www.iconarchive.com/ http://www.flaticon.com/
  • 61. Planejando Web Sites Atividade Prática - Wireframe Agora que você já sabe estruturar um Wireframe, estruture o da floricultura de seu colega a partir das informações obtidas no mapa do site. Atividade a ser entregue - compartilhar no grupo do Facebook Vamos trabalhar!
  • 62. Planejando Web Sites Atividade Prática - Wireframe Bom trabalho!