html5 e mobile-1

7/28/2019 HTML5 e Mobile-1

1/32

HTML5 e Mobile

Desenvolvimento de aplicaes modernas para web e paraplataformas mobile.

www.jhonatanjacinto.com 1


2/32

Jhonatan Rosa Jacinto

Consultor, Instrutor e Palestrante independente nas reas de design edesenvolvimento para web e mobile.

No mercado WEB desde os 14 anos, quando aprendeu a programar em JS, autodidata e desenvolve solues utilizando, entre outras tecnologias, HTML5, CSS3,

jQuery, PHP e ColdFusion para empresas dos mais variados portes.

defensor do Fireworks e do Illustrator, porm abomina o Photoshop (que nuncaconseguiu aprender a usar bem, apesar das vrias tentativas, para criar layouts).

Adobe Certified Expert, apaixonado por programao, ilustrao digital, surf,atividades fsicas em geral, caf (nos mais variados tipos e implementaes) eenergtico.



3/32

INTRODUOUma viso geral do mercado Mobile



4/32


39% usam o smartphone enquanto esto no banheiro (quem nunca?) 33% enquanto assistem TV 22% enquanto leem jornal 1 em cada 3 abririam mo de comer chocolate s para continuar usando seus

smartphones 79% usam o smartphone como auxlio na hora de fazer compras (70% dentro da loja)

54% para procurar o endereo de uma loja 49% para comparar preos 44% para ler reviews de produtos 74% tomam a deciso de compra baseados em informaes obtidas no smartphone 35% dos que pesquisam no smartphone compram o produto no smartphone 88% que encontram informaes no smartphone tomam a iniciativa no mesmo dia

71% dos que buscam algo em um smartphone o fazem aps verem um anncio 79% dos anunciantes ainda no tm um site otimizado para mobile

Dados de 2011fonte: http://arquiteturadainformacao.com/

Mobile nos EUA Estatsticas de Uso


5/32


40% usaram seu smartphone todos os dias nas mais variadas situaes

73% no saem de casa sem seu dispositivo mvel

Os locais onde as pessoas mais usam seu smartphone so: Casa (96%), Trabalho(82%) e Restaurante(69%)

42% usam a internet pelo menos 1 vez por dia

51% esperam usar mais seus smartphones para acessar a internet no futuro 27% prefere ficar sem TV do que sem seu Smartphone

50% fazem pesquisas gerais em seus smartphones

Itens mais pesquisados: Produtos (48%), Restaurantes (29%), Viagens (28%),Emprego (22%), Moradia (16%)

Uso de aplicativos (mdia): 14 (instalados), 6 (usados), 2 (pagos)

64% procuram informaes locais (1 vez por semana pelo menos) 63% entraram em contato com a empresa (aps obteno das informaes locais)

Dados de Maio de 2012 Google.fonte: http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012

Mobile no Brasil Estatsticas de Uso
http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012http://www.slideshare.net/ivilabessa/relatrio-google-sobre-uso-de-smartphone-no-brasil-maio2012


6/32

Plataformas e TecnologiasOpes de desenvolvimento



7/32


No Brasil (Setembro/2012):

1 Android (47%);

2 Nokia Symbian (22%);

3 Windows Phone (15%);4 iOS (10%);

5 Outros (6%);

Smartphones no Brasil


8/32


Android Java / HTML5 / Flash (Adobe Air)

Windows Phone - .NET Framework (C#, VB.net) / HTML5

iOS Objective C / HTML5 / Flash (Adobe Air)

Tecnologias para desenvolvimento


9/32


Adobe Dreamweaver / Adobe PhoneGap;

Adobe Flash / Adobe Flex

Xcode;

Visual Studio;

Xamarin Studio (iOS, Android, Windows Phone, etc); NetBeans, Eclipse (Android SDK);

Ferramentas


10/32


HTML5 a quinta verso da linguagem de marcao de hypertexto (HTML) utilizadapara estruturao e apresentao de contedo na internet.

Seu foco principal de trazer para o ambiente online novas funcionalidades quepermitam a criao de sites mais modernos, acessveis, semnticos e acima de tudo

buscar a padronizao na exibio de contedo independentemente do dispositivoutilizado pelo usurio ou navegador.

Sua especificao gerenciada pela W3C (World Wide Web Consortium) e est emfase de desenvolvimento, contudo, a maioria dos browsers mais modernos j

implementam algumas de suas funcionalidades.

HTML5


11/32


CSS3 a mais recente verso das amplamente conhecidas Cascading Style Sheets(Folhas de estilo em cascata), responsveis pela formatao (aparncia) das pginasweb atuais. Enquanto o HTML5 tem responsabilidades semnticas e de estruturaodo contedo, as CSS so incumbidas de organizar a maneira como esse contedo serexibido, focando na aparncia da pgina que ser apresentada ao usurio.

Nesta verso, vrias funcionalidades foram implementadas na especificao das folhasde estilo as quais iro auxiliar, e muito, na qualidade dos sites e aplicaesdesenvolvidas. Dentre as novidades, destacam-se:

Bordas arredondadas, mltiplos backgrounds, organizao do contedo emcolunas e transparncia independente;

Efeitos de sombreamento para textos e blocos (box-shadow e text-shadow);

Animaes, transies e transformao de objetos (distores e rotaes).

CSS3


12/32


JavaScript a principal linguagem client-side da atualidade, sendo responsvel pelogerenciamento das interaes feitas pelos usurios com uma pgina web e tambmpelo comportamento dos elementos visuais dessas pginas (animaes, alertas,mudana de status e aparncia, etc).

Com o advento do HTML5, vrias APIs foram criadas para potencializar asfuncionalidades desta linguagem e oferecer mais opes de desenvolvimento deaplicativos modernos aos programadores. Dentre as APIs presentes na HTML5destacam-se:

Storage, Geolocation, Web SQL Database, WebGL, ApplicationCache, Workers,Notifications, WebSockets, Server-Events, Drag-Drop, FileSystem API, etc.

JS + APIs


13/32

HTML5 = HTML5 + CSS3 + JS + APIs



14/32

NOVIDADESNovas tags... novas formas de pensar na estrutura do site.



15/32


DOCTYPE

CHARSET

ESTRUTURA BSICA

Titulo da Pgina

Simplicidade...


16/32


Com o HTML5, novas tags foram adicionadas linguagem, permitindo a criao de uma estruturamais especfica de uma pgina HTML. Agora no so necessrios vrios para definir, umcabealho, um rodap ou uma barra lateral. Todos estes blocos, j possuem tags bem definidas.

Semntica...


17/32


Novos tipos para formulrios e atributos...


18/32


Vdeo e udio...


19/32

APPsDesenvolvimento de aplicaes mobile usando HTML5.



20/32


Sim... Voc pode desenvolver um aplicativo mobile utilizando HTML5, CSS3 eJavaScript sem problemas! H vrias bibliotecas de scripts e solues de conversopara aplicaes mobile disponveis na internet, que empacotam seus arquivos dentrode uma aplicao nativa (seja Android, iOS, Windows Phone, etc.) e o disponibilizapara ser instalado em seus respectivos dispositivos ou mesmo publicado nas App

Stores de cada plataforma.

Um dos conversores mais conhecidos hoje o PhoneGap (adquirido pela Adobe), quealis integrado ao Dreamweaver CS6. Com ele voc pode pegar um site mobileinteiro e convert-lo para um aplicativo Mobile.

CONHEA O ADOBE PHONEGAPhttps://build.phonegap.com/

HTML5 for Mobile


21/32


No menu Site do Adobe Dreamweaver CS6, h a opo PhoneGap Build Service queempacota todos os arquivos da configurao de Site atual e envia para a nuvem paraser transformado em aplicativo...

PhoneGap no Dreamweaver CS6...


22/32


Para criar aplicaes mobile em HTML5 voc pode usar:

Qualquer tag do HTML5 ou verses anteriores;

CSS3 (com nfase especial nas funcionalidades dowebkit, pois Android e iOSutilizam este padro para renderizao em seus navegadores);

JavaScript e bibliotecas de script JS como: jQuery, jQuery Mobile, Sencha, jQTouch,etc.;

Imagens e recursos para criao de animaes e vetores (Canvas e SVG).

O que posso usar?


23/32


As principais plataformas que oferecem suporte a aplicativos Mobile feitos em HTML5so as seguintes:

iOS;

Android;

BlackBerry;

webOS;

Windows Phone;

Bada.

Principais plataformas


24/32


25/32


Exemplo App Metro Windows 8


26/32


O Adobe AIR um runtime multi-plataforma criado pela Adobe Systems paraprincipalmente executar aplicaes Flash em desktops, tablets, celulares e at TVs.

Porm, o foco do Adobe AIR no somente o FLASH! Ele tambm aceita HTML. Sendoassim, voc pode criar uma aplicao HTML no seu Dreamweaver e utilizar o AIR para

empacotar esta aplicao e rod-la em diferentes dispositivos.

O nico requisito para que seu aplicativo rode a instalao obrigatria do Adobe AIRno dispositivo que ir executar sua aplicao.

Para maiores informaes sobre o Adobe AIR, visite:http://www.adobe.com/br/products/air.htm

l

Adobe AIR
http://www.adobe.com/br/products/air.htmhttp://www.adobe.com/br/products/air.htm


27/32


O Adobe Edge Animate a resposta da Adobe para a necessidade do mercado webatual de dar um maior foco ao HTML5 e CSS3 (padres W3C) e a reduo no uso deplugins.

Com esta ferramenta voc pode criar animaes (na maioria das vezes, os famosospainis rotativos) com uma ferramenta visual, isto , sem a necessidade de saber

JavaScript/jQuery (e escrever extensas linhas de cdigo).

Adobe Edge Animate


28/32


Alguns aplicativos mobile em HTML5...


29/32

Links de RefernciaInformaes e exemplos de implementao do HTML5.



30/32


HTML5 and CSS3 - The Expressive Webhttp://beta.theexpressiveweb.com/

Slides HTML5 Rocks

http://slides.html5rocks.com/

Font Squirrel (Converso de Fontes para a Web);

http://fontsquirrel.com/

W3C Brasil

http://www.w3c.br/

Links interessantes...
http://beta.theexpressiveweb.com/http://slides.html5rocks.com/http://fontsquirrel.com/http://www.w3c.br/http://www.w3c.br/http://fontsquirrel.com/http://slides.html5rocks.com/http://beta.theexpressiveweb.com/


31/32

Muito obrigado!E bom desenvolvimento...



32/32

www jhonatanjacinto com 32

Facebook

http://www.facebook.com/jhonatanjacinto

Twitter

@jhonatanjacinto

E-mails

[email protected]

[email protected]

Site

www.jhonatanjacinto.com

Meus contatos
http://www.facebook.com/jhonatanjacintomailto:[email protected]:[email protected]://www.jhonatanjacinto.com/http://www.jhonatanjacinto.com/mailto:[email protected]:[email protected]://www.facebook.com/jhonatanjacinto

html5 e mobile-1

Documents