wtf day #005 - desenvolvimento web: conseguimos pra hoje? | by rafael medeiros

WTF DayDESENVOLVIMENTOConseguimos 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


http://dunloppneus.com.br

http://dunloppneus.com.br

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;

. Definir o que será texto e o que será imagem;

. Definir 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 confiá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


http://cliente.mobvox.com.br/FOB/2014/emkt/boletim-ago/v2/envio.html



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 final, 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ífica (lançamento de produtos, eventos, etc);. Apelo visual maior;. Foco em públicos específicos.


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 especificamente para o sistema operacional que irá rodar (iOS, Android ou Windows Phone).

Vantagens:

. Performance superior aos demais;

. Funciona offline (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 notification, execução em segundo plano, etc);. Performance inferior ao aplicativo nativo;. Não funciona offline.


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 ficar 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 configuração de servidores.

Desvantagens:

. Não há liberdade para alterar configuraçõ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 configurar 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 configuraçã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;

. Configuração de Domínio;

. Configuração de Servidor;

. Publicação.


Que informações precisamos paramontar um orçamento ?

. Briefing;

. Descrição da mecânica (se for o caso);

. Sitemap;

. Referências de funcionalidades;

. Wireframe (IDEAL!!!);

. Hospedagem, devemos orçar ou ficará 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 fazerum e-mail marketing, landing page, site,

aplicativo ?


Quanto tempo precisamos para fazerum e-mail marketing, landing page, site,

aplicativo ?

DEPENDE!


Conseguimos pra hoje ?



. Complexidade da atividade



. Complexidade da atividade. Disponibilidade da Equipe (Pauta)


Obrigado!


wtf day #005 - desenvolvimento web: conseguimos pra hoje? | by rafael medeiros

Technology