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

318 visualizações

Publicada em

O que faz o setor de Desenvolvimento Web da e-Tools, e o que eles não fazem e os motivos.

Vocês sabe o que é um Browser? Google Chrome, Firefox, Opera, Internet Explorer... Por quê entender as diferenças deles é importante?
Entenda o que é Front-End e Back-End, as principais linguagens de cada um deles.
Porque um e-mail marketing não é tão simples de ser feito?
Saiba as diferenças entre um Site, um Portal, um Hostsite, um mini site, e uma Landing Page.
Design Responsivo, design fluído e mobile first, já ouviu falar?
Aplicativos, banco de dados, linguagens, servidor, domínio, hospedagem, e diversos outros termos que você já ouviu, mas não sabe o que são e nem quão complexo são.

E no fim das contas, demora muito para fazer um site? E quanto custa? Demora para orçar?
Conseguimos fazer para hoje?

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
318
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. WTF Day DESENVOLVIMENTO Conseguimos pra hoje ? quinta-feira, 13 de novembro de 14
  2. 2. O que fazemos ? . E-mails Marketing; . Landing Pages; . Hotsites; . Sites; . Sistemas; .Webapps; .Aplicativos Híbridos; .Aplicativos para Facebook. quinta-feira, 13 de novembro de 14
  3. 3. O que NÃO fazemos ? . E-Commerces; .Aplicativos Nativos; . Ferramentas de Chat Online; . Disparos de SMS. quinta-feira, 13 de novembro de 14
  4. 4. Browsers quinta-feira, 13 de novembro de 14
  5. 5. 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. quinta-feira, 13 de novembro de 14
  6. 6. Browsers - Utilização quinta-feira, 13 de novembro de 14
  7. 7. 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. quinta-feira, 13 de novembro de 14
  8. 8. Diferenças entre Front-End e Back-End quinta-feira, 13 de novembro de 14
  9. 9. 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; quinta-feira, 13 de novembro de 14
  10. 10. Front-End: HTML/CSS/Javascript HTML: diagramação das páginas. CSS: estilização (posicionamento, tamanho, cores, etc). Javascript: interações, animações. quinta-feira, 13 de novembro de 14
  11. 11. 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) quinta-feira, 13 de novembro de 14
  12. 12. Exemplos de Front e Back-End quinta-feira, 13 de novembro de 14
  13. 13. E-mails marketing quinta-feira, 13 de novembro de 14
  14. 14. 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. quinta-feira, 13 de novembro de 14
  15. 15. 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). quinta-feira, 13 de novembro de 14
  16. 16. 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 ? quinta-feira, 13 de novembro de 14
  17. 17. E-mails marketing - Tempo de Desenvolvimento Itens considerados no desenvolvimento: . Pauta da equipe; .Análise; . Montagem; . Otimização; .Testes; . Disparo. quinta-feira, 13 de novembro de 14
  18. 18. E-mails marketing - Exemplo de código quinta-feira, 13 de novembro de 14
  19. 19. 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. quinta-feira, 13 de novembro de 14
  20. 20. 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. quinta-feira, 13 de novembro de 14
  21. 21. 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). quinta-feira, 13 de novembro de 14
  22. 22. 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. quinta-feira, 13 de novembro de 14
  23. 23. Design Fluído vs Design Responsivo quinta-feira, 13 de novembro de 14
  24. 24. Mobile First Neste formato, planejamos e desenvolvemos projetos web primeiramente para dispositivos móveis e somente depois para desktops/notebooks. quinta-feira, 13 de novembro de 14
  25. 25. Tipos de Aplicativo App Facebook: site desenvolvido para rodar dentro do Facebook, geralmente dentro de uma Fanpage. quinta-feira, 13 de novembro de 14
  26. 26. 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. quinta-feira, 13 de novembro de 14
  27. 27. 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; quinta-feira, 13 de novembro de 14
  28. 28. 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. quinta-feira, 13 de novembro de 14
  29. 29. Banco de Dados São coleções de dados interligados entre si e organizados para fornecer informações. Exemplos: . MySQL; . SQL Server; . Oracle. quinta-feira, 13 de novembro de 14
  30. 30. Banco de Dados Exemplos de Estrutura e Organização dos Dados quinta-feira, 13 de novembro de 14
  31. 31. 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. quinta-feira, 13 de novembro de 14
  32. 32. 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. quinta-feira, 13 de novembro de 14
  33. 33. 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. quinta-feira, 13 de novembro de 14
  34. 34. 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. quinta-feira, 13 de novembro de 14
  35. 35. Que informações precisamos para montar 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). quinta-feira, 13 de novembro de 14
  36. 36. 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. quinta-feira, 13 de novembro de 14
  37. 37. Quanto tempo precisamos para fazer um e-mail marketing, landing page, site, aplicativo ? quinta-feira, 13 de novembro de 14
  38. 38. Quanto tempo precisamos para fazer um e-mail marketing, landing page, site, aplicativo ? DEPENDE! quinta-feira, 13 de novembro de 14
  39. 39. Conseguimos pra hoje ? quinta-feira, 13 de novembro de 14
  40. 40. Conseguimos pra hoje ? . Complexidade da atividade quinta-feira, 13 de novembro de 14
  41. 41. Conseguimos pra hoje ? . Complexidade da atividade . Disponibilidade da Equipe (Pauta) quinta-feira, 13 de novembro de 14
  42. 42. Obrigado! quinta-feira, 13 de novembro de 14

×