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

67 Escritórios 37 países

+3,000 pessoas

http://isobar.com

40 Mercados

http://isobar.com

Portugal

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

ObrigadoPaulo Afonso | [email protected]

!linkedin.com/in/semmais