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

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

Post on 08-Jul-2015

103 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

O que faz o setor de Desenvolvimento Web da e-Tools, e o que eles no fazem e os motivos. Vocs sabe o que um Browser? Google Chrome, Firefox, Opera, Internet Explorer... Por qu entender as diferenas deles importante? Entenda o que Front-End e Back-End, as principais linguagens de cada um deles. Porque um e-mail marketing no to simples de ser feito? Saiba as diferenas entre um Site, um Portal, um Hostsite, um mini site, e uma Landing Page. Design Responsivo, design fludo e mobile first, j ouviu falar? Aplicativos, banco de dados, linguagens, servidor, domnio, hospedagem, e diversos outros termos que voc j ouviu, mas no sabe o que so e nem quo complexo so. E no fim das contas, demora muito para fazer um site? E quanto custa? Demora para orar? Conseguimos fazer para hoje?

TRANSCRIPT

  • WTF DayDESENVOLVIMENTOConseguimos pra hoje ?

    quinta-feira, 13 de novembro de 14

  • O que fazemos ?

    . E-mails Marketing;

    . Landing Pages;

    . Hotsites;

    . Sites;

    . Sistemas;

    . Webapps;

    . Aplicativos Hbridos;

    . Aplicativos para Facebook.

    quinta-feira, 13 de novembro de 14

  • O que NO fazemos ?

    . E-Commerces;

    . Aplicativos Nativos;

    . Ferramentas de Chat Online;

    . Disparos de SMS.

    quinta-feira, 13 de novembro de 14

  • Browsers

    quinta-feira, 13 de novembro de 14

  • Browsers - Comportamentos

    . Chrome - Atualizaes automticas; - Compatibilidade com CSS3 e HTML5.

    . Firefox - Atualizaes automticas; - Grande compatibilidade com CSS3 e HTML5; - Vrios plugins.

    . Internet Explorer - As verses mais antigas no possuem atualizaes automticas;- Muitos problemas de compatibilidade, principalmente nas verses

    8 e 9.

    quinta-feira, 13 de novembro de 14

  • Browsers - Utilizao

    quinta-feira, 13 de novembro de 14

  • Browsers - Cache

    Tipos:

    . Cliente (browser): pode ser removido pelo usurio;

    . Servidor: usurio no tem controle sobre ele;

    um armazenamento temporrio no disco rgido de pginas web, imagens e outros documentos, com o objetivo de aumentar a velocidade de carregamento dos contedos e reduzir a utilizao da banda de internet.

    quinta-feira, 13 de novembro de 14

  • Diferenas entre Front-End e Back-End

    quinta-feira, 13 de novembro de 14

  • Front-End: Back-End:

    Reproduzir o Design para algo que o browser consiga interpretar;

    Interface entre o usurio e o site/sistema;

    HTML/CSS.

    PHP/.NET.

    Integrao com o Banco de Dados;

    Torna sites/sistemas dinmicos;

    Contm toda a lgica do site/sistema;

    quinta-feira, 13 de novembro de 14

  • Front-End: HTML/CSS/Javascript

    HTML: diagramao das pginas.CSS: estilizao (posicionamento, tamanho, cores, etc).Javascript: interaes, animaes.

    quinta-feira, 13 de novembro de 14

  • Back-End: C#.NET/PHP

    C# .NET: linguagem compilada da Microsoft, utilizada em CMS* como o Sharepoint.

    PHP: linguagem interpretada, utilizada por vrios CMS* conhecidos como Wordpress e Drupal.

    *CMS: Content Management System (Sistema de Gerenciamento de Contedo)

    quinta-feira, 13 de novembro de 14

  • Exemplos de Front e Back-End

    quinta-feira, 13 de novembro de 14

  • E-mails marketing

    quinta-feira, 13 de novembro de 14

  • E-mails marketing - Informaes necessrias

    Disparo interno:

    . Ferramenta de Disparo;

    . Lista de E-mails;

    . Variveis 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 editveis;

    . Links.

    quinta-feira, 13 de novembro de 14

  • E-mails marketing - O que no suportam ?

    . Formulrios;

    . Multimdia (udios e vdeos);

    . Scripts e animaes de CSS;

    . Interaes em Geral (Slider, dropdown, etc).

    quinta-feira, 13 de novembro de 14

  • E-mails marketing - SPAM

    Como evitar cair no SPAM ?

    . Evitar a utilizao de muitas imagens;

    . No montar e-mails muito longos;

    . Utilizar remetente confivel;

    . Higienizar base de e-mails.

    Por que e-mails caem no SPAM ?

    quinta-feira, 13 de novembro de 14

  • E-mails marketing - Tempo de Desenvolvimento

    Itens considerados no desenvolvimento:

    . Pauta da equipe;

    . Anlise;

    . Montagem;

    . Otimizao;

    . Testes;

    . Disparo.

    quinta-feira, 13 de novembro de 14

  • E-mails marketing - Exemplo de cdigo

    quinta-feira, 13 de novembro de 14

  • Landing Page

    O que ?

    Pgina de destino ou pgina de entrada, por onde o visitante chega a um site, geralmente atravs de cliques em Banners ou Links Patrocinados.

    A Landing page otimizada estrategicamente para vender um produto ou servio, o seu contedo confeccionado em forma de funil, que direciona o usurio para uma outra pgina final, onde o usurio efetuar uma compra ou assinar um servio.

    quinta-feira, 13 de novembro de 14

  • Hotsite

    O que ?

    Site elaborado para destacar uma ao de comunicao e marketing pontual.

    Caractersticas:

    . Tempo de vida determinado;

    . Ligados uma ao de marketing ou comunicao especfica (lanamento de produtos, eventos, etc);. Apelo visual maior;. Foco em pblicos especficos.

    quinta-feira, 13 de novembro de 14

  • Site

    O que ?

    Conjunto de pginas web disponveis na internet.

    Propsitos:

    . Institucional (ex.: etools.com.br);

    . Informaes (ex.: g1.globo.com);

    . Aplicaes (ex.: gmail.com);

    . Armazenagem de Informaes (ex.: google.com);

    . Comunitrio (ex.: wikipedia.org);

    . Portal (ex.: terra.com.br).

    quinta-feira, 13 de novembro de 14

  • Design Fludo vs Design Responsivo

    Fludo

    Utiliza medidas relativas para que o layout de um site possa aumentar ou diminuir de tamanho de acordo com o tamanho da rea de visualizao.

    Responsivo

    No se trata apenas de esticar ou encolher os elementos visuais do site, e sim de adaptar a experincia de navegao de acordo com as necessidades de cada tipo de mdia.

    quinta-feira, 13 de novembro de 14

  • Design Fludo vs Design Responsivo

    quinta-feira, 13 de novembro de 14

  • Mobile First

    Neste formato, planejamos e desenvolvemos projetos web primeiramente para dispositivos mveis e somente depois para desktops/notebooks.

    quinta-feira, 13 de novembro de 14

  • Tipos de Aplicativo

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

    quinta-feira, 13 de novembro de 14

  • 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;

    . Atualizaes so mais complexas de fazer e exigem que o usurio atualize o aplicativo no seu aparelho.

    quinta-feira, 13 de novembro de 14

  • Tipos de Aplicativo

    Aplicativo Hbrido: aplicao web que pode aproveitar as funcionalidades do dispositivo (cmera, GPS, acelermetro, 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;

    quinta-feira, 13 de novembro de 14

  • Tipos de Aplicativo

    Webapp: basicamente um site mobile, envelopado para ser baixado como um Aplicativo Nativo.

    Vantagens:

    . Atualizaes mais simples;

    . Custo de desenvolvimento mais baixo.

    Desvantagens:

    . No possibilita a utilizao de recursos nativos do aparelho (Push notification, execuo em segundo plano, etc);. Performance inferior ao aplicativo nativo;. No funciona offline.

    quinta-feira, 13 de novembro de 14

  • Banco de Dados

    So colees de dados interligados entre si e organizados para fornecer informaes.

    Exemplos:

    . MySQL;

    . SQL Server;

    . Oracle.

    quinta-feira, 13 de novembro de 14

  • Banco de Dados

    Exemplos de Estrutura e Organizao dos Dados

    quinta-feira, 13 de novembro de 14

  • Hospedagem e Domnios

    . Todo site/hotsite/landing page precisa de um servidor e de um domnio para ficar acessvel na internet;

    . E-mails marketing tambm precisam de domnio e servidor para hospedar as imagens;

    . Exemplos de domnios: etools.com.br, gpac.com.br, genericka.com.br, grupogpac.com.br.

    quinta-feira, 13 de novembro de 14

  • Hospedagem

    Compartilhada: o site alocado em um servidor com dezenas ou centenas de outros sites.

    Vantagens:

    . Custo mais baixo;

    . No necessrio entender de configurao de servidores.

    Desvantagens:

    . No h liberdade para alterar configuraes do servidor;

    . Acesso aos dados geralmente mais lento;

    . Outros sites podem prejudicar o servidor e consequentemente o site que hospedamos.

    quinta-feira, 13 de novembro de 14

  • 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 rpido.

    Desvantagens:

    . Custo mais alto;

    . Necessidade de conhecimento em configurao de servidores.

    quinta-feira, 13 de novembro de 14

  • Processos da Equipe de Desenvolvimento

    . Anlise;

    . Modelagem do Banco de Dados;

    . Desenvolvimento Front-End;

    . Desenvolvimento Back-End;

    . Testes em vrios browsers;

    . Testes de funcionamento e performance;

    . Configurao de Domnio;

    . Configurao de Servidor;

    . Publicao.

    quinta-feira, 13 de novembro de 14

  • Que informaes precisamos paramontar um oramento ?

    . Briefing;

    . Descrio da mecnica (se for o caso);

    . Sitemap;

    . Referncias de funcionalidades;

    . Wireframe (IDEAL!!!);

    . Hospedagem, devemos orar ou ficar com o cliente ?;

    . Existem restries de linguagens de programao ?;

    . Tempo de durao (Hotsites).

    quinta-feira, 13 de novembro de 14

  • Quanto tempo precisamos para montar um oramento ?

    . E-mails Marketing, Landing Pages e Hotsites (1 dia);

    . Sites, sistemas e aplicativos: em mdia 3 dias, pois precisamos avaliar vrios fatores para chegar nas horas e temos que considerar a pauta atual.

    quinta-feira, 13 de novembro de 14

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

    aplicativo ?

    quinta-feira, 13 de novembro de 14

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

    aplicativo ?

    DEPENDE!

    quinta-feira, 13 de novembro de 14

  • Conseguimos pra hoje ?

    quinta-feira, 13 de novembro de 14

  • Conseguimos pra hoje ?

    . Complexidade da atividade

    quinta-feira, 13 de novembro de 14

  • Conseguimos pra hoje ?

    . Complexidade da atividade. Disponibilidade da Equipe (Pauta)

    quinta-feira, 13 de novembro de 14

  • Obrigado!

    quinta-feira, 13 de novembro de 14