Upload
viogoalmeida
View
223
Download
0
Embed Size (px)
Citation preview
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
7/28/2019 HTML5 e Mobile-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.
www.jhonatanjacinto.com 2
7/28/2019 HTML5 e Mobile-1
3/32
INTRODUOUma viso geral do mercado Mobile
www.jhonatanjacinto.com 3
7/28/2019 HTML5 e Mobile-1
4/32
www.jhonatanjacinto.com 4
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
7/28/2019 HTML5 e Mobile-1
5/32
www.jhonatanjacinto.com 5
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-maio20127/28/2019 HTML5 e Mobile-1
6/32
Plataformas e TecnologiasOpes de desenvolvimento
www.jhonatanjacinto.com 6
7/28/2019 HTML5 e Mobile-1
7/32
www.jhonatanjacinto.com 7
No Brasil (Setembro/2012):
1 Android (47%);
2 Nokia Symbian (22%);
3 Windows Phone (15%);4 iOS (10%);
5 Outros (6%);
Smartphones no Brasil
7/28/2019 HTML5 e Mobile-1
8/32
www.jhonatanjacinto.com 8
Android Java / HTML5 / Flash (Adobe Air)
Windows Phone - .NET Framework (C#, VB.net) / HTML5
iOS Objective C / HTML5 / Flash (Adobe Air)
Tecnologias para desenvolvimento
7/28/2019 HTML5 e Mobile-1
9/32
www.jhonatanjacinto.com 9
Adobe Dreamweaver / Adobe PhoneGap;
Adobe Flash / Adobe Flex
Xcode;
Visual Studio;
Xamarin Studio (iOS, Android, Windows Phone, etc); NetBeans, Eclipse (Android SDK);
Ferramentas
7/28/2019 HTML5 e Mobile-1
10/32
www.jhonatanjacinto.com 10
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
7/28/2019 HTML5 e Mobile-1
11/32
www.jhonatanjacinto.com 11
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
7/28/2019 HTML5 e Mobile-1
12/32
www.jhonatanjacinto.com 12
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
7/28/2019 HTML5 e Mobile-1
13/32
HTML5 = HTML5 + CSS3 + JS + APIs
www.jhonatanjacinto.com 13
7/28/2019 HTML5 e Mobile-1
14/32
NOVIDADESNovas tags... novas formas de pensar na estrutura do site.
www.jhonatanjacinto.com 14
7/28/2019 HTML5 e Mobile-1
15/32
www.jhonatanjacinto.com 15
DOCTYPE
CHARSET
ESTRUTURA BSICA
Titulo da Pgina
Simplicidade...
7/28/2019 HTML5 e Mobile-1
16/32
www.jhonatanjacinto.com 16
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...
7/28/2019 HTML5 e Mobile-1
17/32
www.jhonatanjacinto.com 17
Novos tipos para formulrios e atributos...
7/28/2019 HTML5 e Mobile-1
18/32
www.jhonatanjacinto.com 18
Vdeo e udio...
7/28/2019 HTML5 e Mobile-1
19/32
APPsDesenvolvimento de aplicaes mobile usando HTML5.
www.jhonatanjacinto.com 19
7/28/2019 HTML5 e Mobile-1
20/32
www.jhonatanjacinto.com 20
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
7/28/2019 HTML5 e Mobile-1
21/32
www.jhonatanjacinto.com 21
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...
7/28/2019 HTML5 e Mobile-1
22/32
www.jhonatanjacinto.com 22
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?
7/28/2019 HTML5 e Mobile-1
23/32
www.jhonatanjacinto.com 23
As principais plataformas que oferecem suporte a aplicativos Mobile feitos em HTML5so as seguintes:
iOS;
Android;
BlackBerry;
webOS;
Windows Phone;
Bada.
Principais plataformas
7/28/2019 HTML5 e Mobile-1
24/32
7/28/2019 HTML5 e Mobile-1
25/32
www.jhonatanjacinto.com 25
Exemplo App Metro Windows 8
7/28/2019 HTML5 e Mobile-1
26/32
www.jhonatanjacinto.com 26
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.htm7/28/2019 HTML5 e Mobile-1
27/32
www.jhonatanjacinto.com 27
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
7/28/2019 HTML5 e Mobile-1
28/32
www.jhonatanjacinto.com 28
Alguns aplicativos mobile em HTML5...
7/28/2019 HTML5 e Mobile-1
29/32
Links de RefernciaInformaes e exemplos de implementao do HTML5.
www.jhonatanjacinto.com 29
7/28/2019 HTML5 e Mobile-1
30/32
www.jhonatanjacinto.com 30
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/7/28/2019 HTML5 e Mobile-1
31/32
Muito obrigado!E bom desenvolvimento...
www.jhonatanjacinto.com 31
7/28/2019 HTML5 e Mobile-1
32/32
www jhonatanjacinto com 32
http://www.facebook.com/jhonatanjacinto
@jhonatanjacinto
E-mails
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