Este documento resume as vantagens de se criar um site responsivo para dispositivos móveis. Explica que um site responsivo se adapta a diferentes telas sem necessidade de instalação de aplicativo, é compatível em todas as plataformas, fácil de atualizar e compartilhar. Também discute quando uma abordagem nativa pode ser melhor que um site responsivo.

1. Paulo Afonso
web developer @ Isobar
Mobile Website

2. Dentsu Aegis Network
http://dentsuaegisnetwork.com/
Ajudamos os clientes a construir
relacionamentos e comunicar com os
consumidores em torno de seus
produtos e marcas

3. Dentsu Aegis Network
5 Continentes
24 Time Zones
110 países
+23,000 pessoas
http://dentsuaegisnetwork.com/

4. Dentsu Aegis Network
http://dentsuaegisnetwork.com/
+55 marcas locais

5. 67 Escritórios 37 países
+3,000 pessoas
http://isobar.com
40 Mercados

6. http://isobar.com
Portugal

7. Certo!
Mas e o Mobile?

8. Factos
• Penetração banda larga móvel 32% (chegando aos
84% em países desenvolvidos)
• Explosão de Smarthphones e tablet’s
• Experiência incomparável
• Ubiquidade
• Mercado
• Facebook paga bem

9. Programar para
Mobile
mas?

10. Mobile
Site
Responsivo
Html5
Todas as plataformas
App
Nativa Híbrida Personalizado
iOS Android Windows
ObjC Java C#… Html5, AS, …

11. Website Responsivo
O que é?

12. Um website onde o conteúdo
adapta-se a diferentes dispositivos

13. Website Responsivo
Vantagens
• Não necessita instalação
• Compatibilidade
• Actualização
• Facilidade de pesquisa
• Partilha ( url )
• Alcance
• Vida útil
• Pode ser transformado em app
• Custos
• Suporte e Sustentabilidade

14. Website Responsivo
Nem sempre será a melhor solução
• Jogos
• Funcionalidades nativas
• Poder processamento
• Funcionamento offline
“limitado”
• App Store
• …

15. Website Responsivo
Como se faz?

16. O Básico
• HTML 5
• CSS 3
• JS

17. HTML 5
A 5ª revisão da linguagem de
Marcação de Hipertexto
(HyperText Markup Language).
!

18. HTML 5
Novidades
• Gráficos & Multimédia
<canvas>, <video>, <audio>, ..
• Conectividade
Web Sockets, Server-sent events, …
• Acesso Hardware
Geolocation, device orientation, …
• Offline & Armazenamento
Armazenamento do lado do cliente, Offline/Online events, App
Cache
• Semântica
<header>, <footer>, <nav>, <figure>,<input type=“???”>, …
• Performance & more…
Web Workers, Drag and Drop, Fullscreen
!

19. CSS 3
Cascading Style Sheets (CSS)
serve para formatar o conteúdo,
isto é, serve para definir o estilo
ou a aparência de documentos
web.
!

20. CSS 3
Novidades
• Colunas
• Transparências
• Gradients
• Bordas
• Selectores
• Transições
• Animações
• …
• Media Queries

21. Juntar sal e mexer
• HTML - doc.html
• CSS 3 - estilos.css
body { background-color: white; }
@media only screen and (min-width: 720px) {
body { background-color: blue; }
}
@media only screen and (min-width: 1024px) {
body { background-color: red; }
}
• JS - script.js
if ( document.ontouchstart !== null ){
alert(“touch’s enabled”);
}
• e depois? SVG, Sass, Bootstrap, Foundation, Jquery, Underscore, Backbone,
Angular, Sql, …

22. a recrutar
Frontend Developers com...
!
Experiência de pelo menos
2 anos e conhecimentos
sólidos de HTML, CSS e
Javascript.
facebook.com/IsobarPortugal

23. Obrigado
Paulo Afonso | paulo.afonso@isobar.com
!
linkedin.com/in/semmais