Mobile, por onde começar
23
Paulo Afonso web developer @ Isobar Mobile Website
-
Upload
paulo-afonso -
Category
Technology
-
view
274 -
download
0
description
Introdução ao desenvolvimento mobile com focus em websites responsivos
Transcript of Mobile, por onde começar
Paulo Afonso web developer @ Isobar
Mobile Website
Dentsu Aegis Network
http://dentsuaegisnetwork.com/
Ajudamos os clientes a construir relacionamentos e comunicar com os
consumidores em torno de seus produtos e marcas
Dentsu Aegis Network
5 Continentes
24 Time Zones
110 países
+23,000 pessoas
http://dentsuaegisnetwork.com/
Dentsu Aegis Network
http://dentsuaegisnetwork.com/
+55 marcas locais
Certo!Mas e o Mobile?
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
Programar para Mobile
mas?
Mobile
Site
Responsivo
Html5
Todas as plataformas
App
Nativa Híbrida Personalizado
iOS Android Windows
ObjC Java C#… Html5, AS, …
Website ResponsivoO que é?
Um website onde o conteúdoadapta-se a diferentes dispositivos
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
Website Responsivo Nem sempre será a melhor solução
• Jogos
• Funcionalidades nativas
• Poder processamento
• Funcionamento offline “limitado”
• App Store
• …
Website ResponsivoComo se faz?
O Básico
• HTML 5
• CSS 3
• JS
HTML 5
A 5ª revisão da linguagem de Marcação de Hipertexto (HyperText Markup Language).
!
HTML 5 Novidades
• Gráficos & Multimédia <canvas>, <video>, <audio>, ..
• ConectividadeWeb 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
!
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.
!
CSS 3Novidades
• Colunas
• Transparências
• Gradients
• Bordas
• Selectores
• Transições
• Animações
• …
• Media Queries
Juntar sal e mexer• HTML - doc.html
• CSS 3 - estilos.cssbody { 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.jsif ( document.ontouchstart !== null ){ alert(“touch’s enabled”);}
• e depois? SVG, Sass, Bootstrap, Foundation, Jquery, Underscore, Backbone, Angular, Sql, …
a recrutarFrontend Developers com...
!Experiência de pelo menos
2 anos e conhecimentos sólidos de HTML, CSS e
Javascript.
facebook.com/IsobarPortugal
