O documento resume as principais tendências para o desenvolvimento web, incluindo HTML5, CSS3, web semântica, design responsivo e marketing digital. O autor discute cada uma dessas tecnologias e suas aplicações, além de apresentar sua experiência profissional e educacional.

1. TENDÊNCIAS
PARA O DESENVOLVIMENTO
WEB
Prof. Fernando Henrique Gaffo
contato@fernandogaffo.com.br

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. 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. 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. 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. Medellín, Antioquia

7. Universidade EAFIT

8. Universidade da Antioquia

10. 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

11. New Orleans, Louisiana

13. Louisiana = Pântanos

15. New Orleans = Katrina

17. 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

18. João Pessoa, PB

19. Estação Cabo Branco

20. Tendências para a
Web
# HTML5
# CSS3
# Web Semântica
# Design Responsivo
# Marketing Digital

21. 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

22. 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)

23. 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)

24. Estrutura da Página

25. Novos Elementos

26. HTML5
# Outro recurso interessante do HTML5 é a
capacidade que a linguagem tem de trabalhar
desconectada da internet, por um espaço
de tempo.

27. 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

28. 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

30. 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

31. 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

32. Mas porque estudar
Tudo isso?
# Web semântica
# Design Responsivo
# Marketing Digital

33. # 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

34. # 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

36. # 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) {}

37. # 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

38. # 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

39. # 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

40. # 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

42. SEM
SEM
SEO

43. # 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

47. # 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

48. 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

49. 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

50. 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.

51. 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

52. Prof. Fernando Henrique Gaffo
Obrigado!
www.fernandogaffo.com.br
/fgaffo @fgaffo