WTF Day #005 - Desenvolvimento Web: conseguimos pra hoje? | by Rafael Medeiros

WTF Day
DESENVOLVIMENTO
Conseguimos pra hoje ?
quinta-feira, 13 de novembro de 14

O que fazemos ?
. E-mails Marketing;
. Landing Pages;
. Hotsites;
. Sites;
. Sistemas;
.Webapps;
.Aplicativos Híbridos;
.Aplicativos para Facebook.

O que NÃO fazemos ?
. E-Commerces;
.Aplicativos Nativos;
. Ferramentas de Chat Online;
. Disparos de SMS.

Browsers

Browsers - Comportamentos
. Chrome
- Atualizações automáticas;
- Compatibilidade com CSS3 e HTML5.
. Firefox
- Atualizações automáticas;
- Grande compatibilidade com CSS3 e HTML5;
-Vários plugins.
. Internet Explorer
- As versões mais antigas não possuem atualizações automáticas;
- Muitos problemas de compatibilidade, principalmente nas versões
8 e 9.

Browsers - Utilização

Browsers - Cache
Tipos:
. Cliente (browser): pode ser removido pelo usuário;
. Servidor: usuário não tem controle sobre ele;
É um armazenamento temporário no disco rígido de páginas web,
imagens e outros documentos, com o objetivo de aumentar a
velocidade de carregamento dos conteúdos e reduzir a utilização
da banda de internet.

Diferenças entre Front-End e Back-End

Front-End: Back-End:
Reproduzir o Design para algo que
o browser consiga interpretar;
Interface entre o usuário e o
site/sistema;
HTML/CSS.
PHP/.NET.
Integração com o Banco de Dados;
Torna sites/sistemas dinâmicos;
Contém toda a lógica do site/sistema;

Front-End: HTML/CSS/Javascript
HTML: diagramação das páginas.
CSS: estilização (posicionamento, tamanho, cores, etc).
Javascript: interações, animações.

Back-End: C#.NET/PHP
C# .NET: linguagem compilada da Microsoft, utilizada
em CMS* como o Sharepoint.
PHP: linguagem interpretada, utilizada por vários CMS*
conhecidos como Wordpress e Drupal.
*CMS: Content Management System (Sistema de
Gerenciamento de Conteúdo)

Exemplos de Front e Back-End

E-mails marketing

E-mails marketing - Informações necessárias
Disparo interno:
. Ferramenta de Disparo;
. Lista de E-mails;
.Variáveis no corpo do e-mail;
.Assunto do E-mail.
Montagem:
. PSD com o layout;
. Deﬁnir o que será texto e o que será imagem;
. Deﬁnir quais textos precisam ser editáveis;
. Links.

E-mails marketing - O que não suportam ?
. Formulários;
. Multimídia (áudios e vídeos);
. Scripts e animações de CSS;
. Interações em Geral (Slider, dropdown, etc).

E-mails marketing - SPAM
Como evitar cair no SPAM ?
. Evitar a utilização de muitas imagens;
. Não montar e-mails muito longos;
. Utilizar remetente conﬁável;
. Higienizar base de e-mails.
Por que e-mails caem no SPAM ?

E-mails marketing - Tempo de Desenvolvimento
Itens considerados no desenvolvimento:
. Pauta da equipe;
.Análise;
. Montagem;
. Otimização;
.Testes;
. Disparo.

E-mails marketing - Exemplo de código

Landing Page
O que é ?
Página de destino ou página de entrada, é por onde o
visitante chega a um site, geralmente através de cliques
em Banners ou Links Patrocinados.
A Landing page é otimizada estrategicamente para
vender um produto ou serviço, o seu conteúdo é
confeccionado em forma de funil, que direciona o
usuário para uma outra página ﬁnal, onde o usuário
efetuará uma compra ou assinará um serviço.

Hotsite
O que é ?
Site elaborado para destacar uma ação de comunicação
e marketing pontual.
Características:
.Tempo de vida determinado;
. Ligados à uma ação de marketing ou comunicação
especíﬁca (lançamento de produtos, eventos, etc);
.Apelo visual maior;
. Foco em públicos especíﬁcos.

Site
O que é ?
Conjunto de páginas web disponíveis na internet.
Propósitos:
. Institucional (ex.: etools.com.br);
. Informações (ex.: g1.globo.com);
.Aplicações (ex.: gmail.com);
.Armazenagem de Informações (ex.: google.com);
. Comunitário (ex.: wikipedia.org);
. Portal (ex.: terra.com.br).

Design Fluído vs Design Responsivo
Fluído
Utiliza medidas relativas para que o layout de um site
possa aumentar ou diminuir de tamanho de acordo com
o tamanho da área de visualização.
Responsivo
Não se trata apenas de esticar ou encolher os
elementos visuais do site, e sim de adaptar a experiência
de navegação de acordo com as necessidades de cada
tipo de mídia.

Design Fluído vs Design Responsivo

Mobile First
Neste formato, planejamos e desenvolvemos projetos
web primeiramente para dispositivos móveis e somente
depois para desktops/notebooks.

Tipos de Aplicativo
App Facebook: site desenvolvido para rodar dentro
do Facebook, geralmente dentro de uma Fanpage.

Tipos de Aplicativo
Aplicativo Nativo: aplicativo desenvolvido
especiﬁcamente para o sistema operacional que irá
rodar (iOS,Android ou Windows Phone).
Vantagens:
. Performance superior aos demais;
. Funciona ofﬂine (uma vez feito o download).
Desvantagens:
. Custo de Desenvolvimento elevado;
.Atualizações são mais complexas de fazer e exigem que o usuário
atualize o aplicativo no seu aparelho.

Tipos de Aplicativo
Aplicativo Híbrido: aplicação web que pode
aproveitar as funcionalidades do dispositivo (câmera,
GPS, acelerômetro, etc).
Vantagens:
. Custo de desenvolvimento mais baixo;
. Desenvolvimento feito apenas em uma plataforma, que funciona
para Android, iOS e Windows Phone.
Desvantagens:
. Performance inferior ao aplicativo nativo;

Tipos de Aplicativo
Webapp: basicamente um site mobile, envelopado
para ser baixado como um Aplicativo Nativo.
Vantagens:
.Atualizações mais simples;
. Custo de desenvolvimento mais baixo.
Desvantagens:
. Não possibilita a utilização de recursos nativos do aparelho (Push
notiﬁcation, execução em segundo plano, etc);
. Performance inferior ao aplicativo nativo;
. Não funciona ofﬂine.

Banco de Dados
São coleções de dados interligados entre si e
organizados para fornecer informações.
Exemplos:
. MySQL;
. SQL Server;
. Oracle.

Banco de Dados
Exemplos de Estrutura e Organização dos Dados

Hospedagem e Domínios
.Todo site/hotsite/landing page precisa de um servidor e
de um domínio para ﬁcar acessível na internet;
. E-mails marketing também precisam de domínio e
servidor para hospedar as imagens;
. Exemplos de domínios: etools.com.br, gpac.com.br,
genericka.com.br, grupogpac.com.br.

Hospedagem
Compartilhada: o site é alocado em um servidor
com dezenas ou centenas de outros sites.
Vantagens:
. Custo mais baixo;
. Não é necessário entender de conﬁguração de servidores.
Desvantagens:
. Não há liberdade para alterar conﬁgurações do servidor;
.Acesso aos dados geralmente é mais lento;
. Outros sites podem prejudicar o servidor e consequentemente o
site que hospedamos.

Hospedagem
Dedicada: o site é alocado em um servidor exclusivo.
Vantagens:
. Possibilidade de conﬁgurar o servidor para otimizar o site;
. O site pode utilizar todos os recursos do servidor só para ele;
.Acesso aos dados é mais rápido.
Desvantagens:
. Custo mais alto;
. Necessidade de conhecimento em conﬁguração de servidores.

Processos da Equipe de Desenvolvimento
.Análise;
. Modelagem do Banco de Dados;
. Desenvolvimento Front-End;
. Desenvolvimento Back-End;
.Testes em vários browsers;
.Testes de funcionamento e performance;
. Conﬁguração de Domínio;
. Conﬁguração de Servidor;
. Publicação.

Que informações precisamos para
montar um orçamento ?
. Brieﬁng;
. Descrição da mecânica (se for o caso);
. Sitemap;
. Referências de funcionalidades;
.Wireframe (IDEAL!!!);
. Hospedagem, devemos orçar ou ﬁcará com o cliente ?;
. Existem restrições de linguagens de programação ?;
.Tempo de duração (Hotsites).

Quanto tempo precisamos para montar
um orçamento ?
. E-mails Marketing, Landing Pages e Hotsites (1 dia);
. Sites, sistemas e aplicativos: em média 3 dias, pois
precisamos avaliar vários fatores para chegar nas horas
e temos que considerar a pauta atual.

Quanto tempo precisamos para fazer
um e-mail marketing, landing page, site,
aplicativo ?

Quanto tempo precisamos para fazer
um e-mail marketing, landing page, site,
aplicativo ?
DEPENDE!

. Complexidade da atividade

. Complexidade da atividade
. Disponibilidade da Equipe (Pauta)

Obrigado!

WTF Day #005 - Desenvolvimento Web: conseguimos pra hoje? | by Rafael Medeiros

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

WTF Day #005 - Desenvolvimento Web: conseguimos pra hoje? | by Rafael Medeiros