Souza naves

381 visualizações

Publicada em

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

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

Nenhuma nota no slide

Souza naves

  1. 1. TENDÊNCIAS PARA O DESENVOLVIMENTO WEB Prof. Fernando Henrique Gaffo contato@fernandogaffo.com.br
  2. 2. Fernando Quem? # Fernando Henrique Gaffo # 2006 – Graduação em Tecnologia em Análise e Desenvolvimento de Sistemas na FACCAR # 2009 – Especialização em Engenharia de Software e Banco de Dados na UEL # 2013 – Mestrado em Ciência da Computação na UEL
  3. 3. O quê você Faz da Vida? # 2004 – Estágio em Desenvolvimento na COROL # 2005 – Contrato CLT com a FACCAR para Desenvolvimento do Site da Instituição # 2009 – Fundação de uma empresa de criação de sites # 2010 – Docente no curso de TADS da FACCAR # 2013 – Docente em cursos de especialização
  4. 4. Qual sua Experiência? # 10 anos de experiência na programação: ## HTML, CSS, Javascript, PHP, ASP.NET, C#, Java, Bancos de Dados SQL, Delphi # Empresa de criação de sites e marketing digital # Consultorias realizadas na região de Londrina # Viagens para Colômbia, Estados Unidos e João Pessoa (PB) para apresentar trabalhos
  5. 5. Colômbia # 38ª Conferência Latino-americana em Informática # Medellín, Antioquia # Universidade EAFIT # Universidade da Antioquia # 01/10/2012 à 05/10/2012
  6. 6. Medellín, Antioquia
  7. 7. Universidade EAFIT
  8. 8. Universidade da Antioquia
  9. 9. EUA # 25ª Conferência Internacional em Aplicações Computacionais na Indústria e Engenharias # New Orleans, Louisiana # Hotel Holliday Inn Downtown Superdome # 14/11/2012 à 16/11/2012
  10. 10. New Orleans, Louisiana
  11. 11. Louisiana = Pântanos
  12. 12. New Orleans = Katrina
  13. 13. João Pessoa # 8º Simpósio Brasileiro de Sistemas de Informação # João Pessoa, Paraíba # Estação Cabo Branco # 16/05/2013 à 18/05/2013
  14. 14. João Pessoa, PB
  15. 15. Estação Cabo Branco
  16. 16. Tendências para a Web # HTML5 # CSS3 # Web Semântica # Design Responsivo # Marketing Digital
  17. 17. HTML5 # Para criar um website utiliza-se uma linguagem chamada Hypertext Markup Language (HTML) # O HTML é utilizado para definir a estrutura e os elementos de uma página web por meio de tags # Não é uma linguagem de programação e sim uma linguagem de marcação de hipertextos # Atualmente encontra-se em sua 4ª versão, ou seja, HTML4
  18. 18. HTML5 # Os arquivos que contém o conteúdo HTML possuem a extensão .htm ou .html # A evolução para o HTML5 irá padronizar a linguagem e incluir novos recursos: ## Nova forma de declarar o Doctype ## Nova forma de declarar a codificação da página ## Novos elementos (section, header, footer, nav, article, aside, figure, canvas, video, audio, etc)
  19. 19. HTML5 ## Suporte à páginas dinâmicas (details, datagrid, menu, command, atributo async) ## Novos elementos para formulários (datetime, datetime-local, time, number, range, email, url, etc)
  20. 20. Estrutura da Página
  21. 21. Novos Elementos
  22. 22. HTML5 # Outro recurso interessante do HTML5 é a capacidade que a linguagem tem de trabalhar desconectada da internet, por um espaço de tempo.
  23. 23. HTML5 # Teste o suporte do seu browser ao HTML5 ## http://bit.ly/1gvBE6I # Veja alguns exemplos do HTML5 em ação ## http://bit.ly/14gnQup # Introdução ao HTML5 (em inglês) ## http://bit.ly/1aRpUOB # Guia de referência ao HTML5 (em inglês) ## http://bit.ly/1a20nh6
  24. 24. CSS3 # Os elementos HTML podem ter estes parâmetros visuais alterados por meio de uma linguagem chamada Cascading Style Sheets (CSS) # Para que um site se torne atrativo ele precisa conter cores, imagens e fontes personalizadas # Esta linguagem existe desde 1994, no entanto só se popularizou a partir e 2001, quando os navegadores começaram a oferecer suporte a ela
  25. 25. CSS3 # Na 3ª versão desta linguagem existem novos seletores que permitem adicionar efeitos, os quais eram conseguidos apenas com imagens: # A versão utilizada atualmente é a 2.1 ## Transparência, cantos arredondados, sombras, múltiplos backgrounds, rotação de objetos, troca de cor da seleção, quebra de páginas, entre outras
  26. 26. CSS3 # Documentação do CSS3 (em inglês) ## http://bit.ly/1f3jpaU # Teste o suporte de seu browser ao CSS3 ## http://bit.ly/1encqdZ # Veja alguns exemplos de efeitos em CSS3 ## http://bit.ly/18wsVC5 e http://bit.ly/14gsyID # Guia de referência do CSS3 (em inglês) ## http://bit.ly/18wutMp
  27. 27. Mas porque estudar Tudo isso? # Web semântica # Design Responsivo # Marketing Digital
  28. 28. # Com o aumento do número de páginas na internet é necessário que as buscas tragam resultados relevantes ao que o usuário está procurando Web Semântica # Desta forma, utilizar as tecnologias mais recentes (HTML5 e CSS3) tornará o site cada vez mais interpretáveis pelos mecanismos de busca, tornando as informações “compreensíveis” para o computador
  29. 29. # Além do número de sites na internet o número de dispositivos também aumentou Design Responsivo # Atualmente sites atraem visitas de computadores desktop, tablets, smartphones e até televisores # Nada mais natural do que fazer o site se adaptar ao tamanho da tela do dispositivo que está realizando o acesso
  30. 30. # Consiste em identificar a resolução de tela do navegador do usuário e apresentar um código CSS específico para este dispositivo Design Responsivo @media only screen and (max-width: 959px) {} @media only screen and (max-width: 767px) {} @media only screen and (max-width: 479px) {}
  31. 31. # Esta tarefa pode se tornar muito árdua Design Responsivo # Por isso existem empresas que já disponibilizam arquivos CSS prontos para utilizar o design responsivo, os frameworks CSS. ## Twitter Bootstrap: http://bit.ly/1f5VhEq ## Zurb Foundation: http://bit.ly/1dowyt6 ## Skeleton CSS: http://bit.ly/188fNRz
  32. 32. # Uma vez que o número de sites é muito grande e o anseio dos clientes é muito grande, é preciso utilizar algumas técnicas para melhorar o posicionamento do site nos resultados das buscas (técnica chamada de SEO) ou comprar palavras-chave para aparecer em destaque (prática chamada SEM) Marketing Digital
  33. 33. # Search Engine Optimization (Otimização para Mecanismos de Busca) SEO # Os mecanismos de busca baseiam-se no HTML da página, por isso é necessário torná-lo atraente para os buscadores ## Respeitar títulos (h1, h2, ...), criar um texto que seja relevante ao assunto do título, imagens com nome e texto alternativo relevantes, entre outros
  34. 34. # Search Engine Marketing (Marketing para Mecanismos de Busca) SEM # Consiste na compra de palavras-chave para exibição em destaque nos mecanismos de busca # A compra de palavras-chave pode ser feita no próprio site do Google AdWords: ## http://bit.ly/14gyHoh
  35. 35. SEM SEM SEO
  36. 36. # Para estender o SEM, os mecanismos de busca também fazem parcerias com portais e blogs, o chamado AdSense: Marketing Digital ## Redes Sociais ## Banners em sites com grande volume de acessos
  37. 37. # As empresas estão loucas atrás de profissionais capacitados ## Conheçam mais de uma tecnologia ## Falem mais de um idioma E o Mercado? ## Saibam trabalhar em equipe ## Sejam comunicativos ## Estejam por dentro das tendências ## Sejam proativos
  38. 38. Onde se Capacitar? # Curso técnico é um passo importante # Curso superior também é muito importante ## Tecnologia em Análise e Desenvolvimento de Sistemas, Sistemas de Informação e Ciências da Computação são os cursos mais procurados # Especialização hoje é fundamental # Pode-se cursar também mestrado, doutorado e pós-doutorado
  39. 39. Onde se Capacitar? # Inglês tem que ser o segundo idioma # Também é preciso ter um terceiro idioma. Na américa latina o espanhol pode proporcionar algumas vantagens # Ser um pouco autodidata # Existem boas escolas de inglês em nossa cidade e alguns colégios também oferecem o curso
  40. 40. Onde se Capacitar? # Nossa região tem excelentes universidades e faculdades, públicas e particulares # O governo também oferece muitos incentivos para o aluno ingressar em um curso superior, com o FIES ## Dá para estudar com R$ 17,00/mês com o FIES ## Só vai começar a pagar depois de 18 meses de formado e terá 3x a duração do curso para quitar o financiamento.
  41. 41. Onde se Capacitar? # O Juros é de apenas 3.3% a.a., menor que o Minha Casa Minha Vida # Por exemplo, para cursar TADS na FACCAR, pelo FIES, depois de formado, o aluno vai pagar aproximadamente de R$ 240,00/mês # Enquanto estiver estudando, o valor é de R$ 50,00 a cada três meses, ou seja, R$ 17 por mês
  42. 42. Prof. Fernando Henrique Gaffo Obrigado! www.fernandogaffo.com.br /fgaffo @fgaffo

×