SlideShare una empresa de Scribd logo
1 de 71
Descargar para leer sin conexión
Minicurso Intel XDK®
POR DIEGO CAVALCA
AGENDA
1. Apresentação do curso
2. Introdução ao HTML5
3. Bibliotecas Cordova, jQueryMobile e Bootstrap
4. Intel Developer Zone
5. Conhecendo a IDE
6. Construindo nossa UI
7. Notificações e informações do dispositivo móvel
8. Agenda de Contatos e arquivos
9. GPS e Conexões à internet
10. Câmera
11. Banco de dados local (offline)
12. Testes, compilação e publicação do aplicativo
Diego Cavalca
Analista de Sistemas
• Professor
Centro Paula Souza (ETEC)
Minicurso Intel XDK®
Sobre o curso
• Expresso
• Abrangente
• Direto
Motivação
• Espalhar o conhecimento da tecnologia
• Falta de materiais em português sobre o tema
• Difusão de nova tecnologia de desenvolvimento
Referências
• https://software.intel.com/html5
• https://software.intel.com/en-us/node/492826
• http://cordova.apache.org/
• http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
www.diegocavalca.com
ARTIGOS E TUTORIAIS SOBRE DESENVOLVIMENTO DE SOFTWARE.
Minicurso Intel XDK®
POR DIEGO CAVALCA
Introdução ao HTML5
Entenda os conceitos básicos do HTML5 e veja a sua real importância no desenvolvimento de aplicativos híbridos.
HTML – Evolução histórica
 1991 – HTML
 1994 – HTML2
 1996 – CSS1 + Javascript
 1997 – HTML4
 1998 – CSS2
 2000 – XHTML
 2002 – Tableless
 2005 – AJAX
2009
HTML5 – Aplicação
HTML5 – Quem utiliza
HTML5 - Recursos
SEMÂNTICA
API
(Application Programming Interface)
• Padrões de estrutura do
documento
• Variações do elemento INPUT
• Novos elementos:
• Audio
• Video
• Canvas
• Acesso ao dispositivo
• Geolocalização
• Armazenamento local
• Conectividade
HTML5 – Padrões de estrutura
 A estruturação de páginas em HTML 4.0 é basicamente constituída
pelo elemento <div>, com classes e IDs diferentes;
 Novas tags facilitam a semântica no documento HTML;
 Há uma maior visibilidade aos mecanismos de busca;
 Fim da “sopa de DIVs”;
 Fim das grandes quantidades de IDs e classes.
HTML5 – Padrões de estrutura
ANTES
AGORA
AGORA
HTML5 – Inputs
 Fim dos plugins e “gambiarras”
 Padronização definitiva em qualquer plataforma
 Experiência do usuário otimizada (de acordo com a região!)
 Demonstrações:
http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-
form-input-types.html
HTML5 – Mídias (áudio/vídeo)
 Com o HTML4 era impossível anexar áudio ou vídeo na página, e para suprir
essa necessidade surgiram as tecnologias proprietárias (Flash, Silverlight);
 No HTML5 foram, incluídas as tags <audio> e <video>, permitindo anexar
mídias sem a necessidade de nenhum plugin.
 YouTube adotou o HTML5 como tecnologia padrão para o processamento de
seus vídeos.
Mais informações em: http://www.youtube.com/html5
HTML5 – Audio
HTML5 – Video
HTML5 – Canvas
 O elemento <canvas> consiste na utilização de elementos
JavaScript para a criação de gráficos no navegador, sem a
necessidade de nenhum plugin instalado;
 Motivo principal pra ser considerado para os RIA proprietários
(Flash, Silverlight e JavaFX);
HTML5 – Canvas
Demonstrações da capacidade do elemento <canvas>
◦ http ://html5demos.com/canvas
◦ http://html5demos.com/canvas-grad
◦ http://9elements.com/io/projects/html5/canvas/
◦ http://davidwalsh.name/canvas-demos
◦ http://sketch.io/sketchpad/
HTML5 – API’s
◦ Contenteditable (conteúdo editável)
◦ http://html5demos.com/contenteditable
◦ Geolocation (localização geográfica)
◦ http://html5demos.com/geo
◦ Network status (online/offline)
◦ http://html5demos.com/offline
◦ Armazenamento de dados
◦ http://html5demos.com/storage
HTML5 - Benefícios
 Desenvolvedores:
 Semântica facilitada;
 Padronização global de código (menos“gambiarras”);
 Otimiza o posicionamento do site nos motores de buscas;
 Inserir mídia (áudio/vídeo) sem usar componentes externos (como plugins);
 Aproveitamento da sintaxe Javascript para acessar suas API’s (canvas, geo, etc.);
 Usuários:
 Navegação mais rápida e simples (arquivos menores);
 Otimização da experiência do usuário (UX) multiplataforma (inputs);
 HTML5 está disponível em várias plataformas diferentes e funciona com a mesma
eficiência em PC’s, smartphones e tablets.
HTML5 - Referências
 http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
 http://www.w3schools.com/html/html5_intro.asp
diegocavalca.ti@gmail.com
Minicurso Intel XDK®
POR DIEGO CAVALCA
Bibliotecas Cordova,
jQueryMobile e Bootstrap
Conheça algumas das bibliotecas mais utilizadas, entenda o papel de cada uma e como são usadas no
desenvolvimento mobile.
<style>
</style>
LAYOUT (User Interface)
Intel XDK (IDE)
Arquitetura da IDE Intel XDK
HARDWARE
<script>
</script>
Bootstrap
• “Bootstrap é o framework – baseado em HTML, CSS e JS - mais popular para o
desenvolvimento de interfaces para projetos web e mobile.”
• Fácil utilização (baixar arquivos e referenciar);
• Torna o desenvolvimento front-end (UI) mais rápido e fácil;
• Feito para pessoas de todos os níveis, dispositivos de todas as formas e os projetos de todos
os tamanhos;
• Componentes visuais pré-definidos (button, input, dialog, menu, etc);
• Distribuído sob licença Open-source;
• Site: http://getbootstrap.com
jQuery Mobile
• Sistema de interface de usuário baseada em HTML5;
• Oriundo das bibliotecas jQuery e jQuery UI;
• Projetado para fazer sites e aplicativos que são acessíveis em todos os dispositivos
smartphone, tablet e desktop responsivos;
• Oferece navegação Ajax com transições de página, captura de evento “toque” (touch), e
vários widgets pré-definidos (inputs, selects, datepicker, etc.);
• Seu código (leve) é constantemente atualizado, e tem um design facilmente customizável;
• Site: http://jquerymobile.com
Apache Cordova
• Biblioteca para desenvolvimento de aplicações híbridas (HTML, CSS e JS);
• Fornece acesso ao hardware do dispositivo (GPS, Camera, Acelerômetro, etc.);
• Conjunto de API’s baseado em Javascript;
• Um código, várias plataformas (Android, iOS, WP, etc.) com o mínimo de alterações;
• Mantido pela Apache sob distribuição Open-source;
• Site: http://cordova.apache.org
Minicurso Intel XDK®
POR DIEGO CAVALCA
Intel Developer Zone®
Nesta aula você irá conhecer o espaço do desenvolvedor Intel, aprender a encontrar materiais de apoio e dar os
primeiros passos para se trabalhar com Intel XDK.
Resumo
Um programa global que conecta os desenvolvedores com a Intel em tudo que se relaciona com
a área de software - do desenvolvimento à distribuição:
 Recursos para o desenvolvedor
 Recursos para a empresa
 Comunidade envolvida
Como acessar?
http://software.intel.com/pt-br
Benefícios
 Manter-se atualizado sobre novos recursos das IDE’s;
 Informar-se sobre eventos oficiais;
 Conhecer novas tecnologias Intel;
 Suporte técnico através de fórum oficial (comunidade ativa!);
 Integrar diversas ferramentas (e projetos) através de uma conta.
Minicurso Intel XDK®
POR DIEGO CAVALCA
Conhecendo a IDE
A aventura começa agora! Você irá conhecer a ferramenta Intel XDK em seus detalhes, explicando de uma maneira
ampla como funciona cada recurso da IDE para a criação de aplicativos mobile híbrido.
Recursos
Como baixar?
Intel Developer Zone
http://software.intel.com/pt-br/html5
Resumo
 Conhecemos a arquitetura e recursos da IDE;
 Como se cria um novo projeto;
 Vimos que o Intel XDK possui alguns templates e projetos prontos (demonstrações);
 DICA: Fique atento a versão da ferramenta Intel XDK, pois ela atualiza constantemente!
Minicurso Intel XDK®
POR DIEGO CAVALCA
Construindo nossa UI
Agora sim! Vamos aprender a construir layouts de maneira fácil no intel XDK, dando vida para o nosso aplicativo com
uma interface matadora para qualquer plataforma utilizando as opções de UI da ferramenta.
Referências
 Lista de componentes UI: http://app-framework-software.intel.com/af22/components.php
 Ferramenta Style Builder: http://app-framework-software.intel.com/af22/style.php
Minicurso Intel XDK®
POR DIEGO CAVALCA
Notificações e Informações do
dispositivo
Nesta aula você irá aprender a interagir com o usuário, através de mensagens, alertas, vibração e sons. Também vamos
ver como acessar as informações de hardware e software (como IMEI, sistema operacional e outros) do dispositivo
móvel em que o aplicativo está instalado.
Resumo
 NOTIFICAÇÕES: Recursos audio-visuais para interação com o usuário;
 Popup;
 Caixa de diálogo informativa;
 Beep;
 Vibração;
 INFORMAÇÕES: Dados do dispositivo no qual o aplicativo está instalado;
 Modelo;
 Plataforma (S.O.);
 Versão do S.O.;
 UUID (IMEI);
Referências
 Documentação Apache Cordova:
 INFORMAÇÕES: http://plugins.cordova.io/#/package/org.apache.cordova.device
 DIALOGS: http://plugins.cordova.io/#/package/org.apache.cordova.dialogs
 VIBRATION: http://plugins.cordova.io/#/package/org.apache.cordova.vibration
Minicurso Intel XDK®
POR DIEGO CAVALCA
Agenda de Contatos e Arquivos
Aprenda a acessar informações da agenda de contatos e o sistema de arquivos do smartphone com seu aplicativo.
Resumo
 CONTATOS: Acesso e manipulação completa da agenda:
 Inserir;
 Excluir;
 Listar;
 Detalhes;
 ARQUIVOS: Gerenciamento dos arquivos salvos no dispositivo (memória interna) ou em seus
adjacentes (memória ‘externa’ – SD’s, etc.);
Referências
 Documentação Apache Cordova:
 CONTACTS: http://plugins.cordova.io/#/package/org.apache.cordova.contacts
 FILESYSTEM: http://plugins.cordova.io/#/package/org.apache.cordova.file
Minicurso Intel XDK®
POR DIEGO CAVALCA
GPS e Conexões à internet
Nesta aula você irá aprender a utilizar os recursos do GPS e também a checar o estado da conexão à
internet do aparelho, seja rede Edge, 3G ou Wi-fi.
Resumo
 GEOLOCALIZAÇÃO (GPS): Captura da localização real do dispositivo:
 Posição Atual;
 Monitoramento contínuo da posição geográfica;
 CONECTIVIDADE (REDE/INTERNET): Acesso e verificação da rede de internet do aparelho;
Referências
 Apache Cordova:
 GEOLOCATION: http://plugins.cordova.io/#/package/org.apache.cordova.geolocation
 CONNECTION (Network Information):
http://plugins.cordova.io/#/package/org.apache.cordova.network-information
 Google Maps (v3): https://developers.google.com/maps/documentation/javascript/?hl=pt-br
Minicurso Intel XDK®
POR DIEGO CAVALCA
Câmera
Fotos e vídeos são o tema dessa aula, na qual iremos abordar como se utiliza todos os recursos de
acesso a câmera do dispositivo móvel.
Resumo
 Através dos plugins do Apache Cordova, utilizando os recursos de hardware do dispositivos,
podemos capturar arquivos de mídia, como:
 Imagem (foto);
 Vídeo;
 Áudio.
Referências
 Apache Cordova:
 CAMERA: http://plugins.cordova.io/#/package/org.apache.cordova.camera
 CAPTURE: http://plugins.cordova.io/#/package/org.apache.cordova.media-capture
Minicurso Intel XDK®
POR DIEGO CAVALCA
Banco de dados local
(Offline)
Nesta aula vamos aprender a criar um banco de dados local, gravando, atualizando, acessando e
excluindo dados quando necessário em nossa aplicação.
 WebStorage: simplesmente fornece um mapeamento de valores-chave,
como localStorage["name"] = username;. Infelizmente, as implementações atuais oferecem
suporte apenas a mapeamentos pelo método string-to-string, então é necessário que você
serialize e desserialize outras estruturas de dados. Você pode fazer isso usando
JSON.stringify() e JSON.parse().
 WebSQL: oferece a você o poder - e a realização - de um banco de dados relacional SQL
estruturado.
 IndexedDB: é algo entre o WebStorage e WebSQL. Como o WebStorage, é um mapeamento
por valores-chave simples, mas suporta índices como os de bancos de dados relacionais.
Assim, pesquisas por objetos correspondentes a um determinado campo são rápidas, pois
não é necessário percorrer manualmente cada objeto armazenado.
Armazenamento offline (HTML5)
Referências
 Armazenamento offline em HTML5: http://www.html5rocks.com/pt/features/storage
 Mergulhando em HTML5 – Armazenamento: http://diveintohtml5.info/storage.html
 WebSQL no HTML5: http://www.tutorialspoint.com/html5/html5_web_sql.htm
 Conhecendo o WebSQL: http://elemarjr.net/2010/10/19/html-5-parte-6-armazendando-
dados-com-web-sql-databases/
Minicurso Intel XDK®
POR DIEGO CAVALCA
Teste, compilação e publicação do aplicativo
(Android, iOS e Windows Phone)
Chegamos na reta final! É hora de testar, compilar e publicar o aplicativo nas lojas. Aprenda a utilizar todos os recursos
de teste e 'build' da ferramenta Intel XDK, além de conhecer os passos necessários para distribuir seu aplicativo para o
público.
Arquitetura da IDE Intel XDK
Desenvolvimento Teste Compilação
(Publicação)
Desenvolvimento
 Bibliotecas de Interface (App Framework, Ionic Framework, jQuery Mobile, etc.)
 Integração nativa com Apache Cordova e suas bibliotecas de acesso ao hardware do
dispostivo
 Editor de texto (baseado no Brakets)
 App Designer
Teste
 Emulação “embarcada” do aplicativo na própria IDE
 Console de depuração javascript
 App Preview
Teste – Emulação embarcada
 Visualiza o aplicativo, de maneira ágil, em um emulador, dentro da própria IDE
 Não necessita de configurações adicionais e complexas
 Simula o tamanho e o visual de vários modelos de tablets e smartphones
 Criação de cenários de hardware (falta de GPS, conexão à internet, etc.)
Teste – Console Javascript
 Valida ações e comandos escritos linguagem javascript
 Verifica erros em tempo de execução
 Permite depuração completa, de acordo com nossas necessidades
Teste – App Preview
 Aplicativo para dispositivo móvel (Android, iPhone e Windows Phone) da Intel
 Permite emular o aplicativo no próprio dispositivo
 Ver o aplicativo “rodando” no aparelho sem a necessidade de instalação ou publicação nas lojas
App Preview – arquitetura
Computador
com
Intel XDK®
Cloud Intel
(Conta Intel Developer Zone)
Dispositivo Android
com
App Preview
Dispositivo iOS
com
App Preview
Dispositivo Windows
com
App Preview
App Preview – Instalação do aplicativo
 Acesse a loja de aplicativos de seu aparelho (Android, iOS ou Windows) e busque pelo
aplicativo “App Preview”
 Baixe o aplicativo e instale-o em seu dispositivo.
App Preview
Conhecendo e utilizando
Minicurso Intel XDK
Minicurso Intel XDK
Minicurso Intel XDK
Minicurso Intel XDK
Compilação (publicação)
 Configuração de instalação do aplicativo (ícones, imagens e etc.)
 Geração prática do pacote de instalação do app para publicação nas lojas de aplicativos
Resumo
 Ferramentas de testes
 Configuração das informações do aplicativo
 Geração do pacote de instalação, de acordo com a plataforma que iremos distribuir
Dúvidas ou problemas técnicos
Utilize o fórum oficial Intel XDK®
https://software.intel.com/pt-br/forums/intel-software-network-brasil
Referências
• http://software.intel.com/html5
• http://app-framework-software.intel.com/documentation.php
• https://software.intel.com/pt-br/forums/intel-software-network-brasil
• http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
• http://jquerymobile.com/
• http://cordova.apache.org/
• http://www.sqlite.org/
Mais dicas e informações sobre Intel XDK
www.diegocavalca.com

Más contenido relacionado

La actualidad más candente

Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Luiz Gavinho
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapMayron Cachina
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidRafael Sakurai
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchRafael Neri
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Wennder Santos
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkCristian Dean
 
Minicurso "Jogos Multiplataforma com Javascript"
Minicurso "Jogos Multiplataforma com Javascript"Minicurso "Jogos Multiplataforma com Javascript"
Minicurso "Jogos Multiplataforma com Javascript"Felipe Pedroso
 
Marketing digital tecnologia da informação
Marketing digital   tecnologia da informaçãoMarketing digital   tecnologia da informação
Marketing digital tecnologia da informaçãoAna Paula Coelho Barbosa
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Cássio Nandi Citadin
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5Rafael Sakurai
 
Desenvolvimento Mobile - Rio Info 2012
Desenvolvimento Mobile - Rio Info 2012Desenvolvimento Mobile - Rio Info 2012
Desenvolvimento Mobile - Rio Info 2012Diego Dukão
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
Minicurso RealSense SDK
Minicurso RealSense SDKMinicurso RealSense SDK
Minicurso RealSense SDKFelipe Pedroso
 
UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...
UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...
UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...Édipo Souza
 
Desenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis MultiplataformaDesenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis MultiplataformaJose Augusto Cintra
 

La actualidad más candente (20)

Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!
 
Phonegap
PhonegapPhonegap
Phonegap
 
Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
 
Minicurso "Jogos Multiplataforma com Javascript"
Minicurso "Jogos Multiplataforma com Javascript"Minicurso "Jogos Multiplataforma com Javascript"
Minicurso "Jogos Multiplataforma com Javascript"
 
Marketing digital tecnologia da informação
Marketing digital   tecnologia da informaçãoMarketing digital   tecnologia da informação
Marketing digital tecnologia da informação
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
Desenvolvimento Mobile - Rio Info 2012
Desenvolvimento Mobile - Rio Info 2012Desenvolvimento Mobile - Rio Info 2012
Desenvolvimento Mobile - Rio Info 2012
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Minicurso RealSense SDK
Minicurso RealSense SDKMinicurso RealSense SDK
Minicurso RealSense SDK
 
Adobe Flex e Playbook
Adobe Flex e PlaybookAdobe Flex e Playbook
Adobe Flex e Playbook
 
RealSense SDK
RealSense SDKRealSense SDK
RealSense SDK
 
UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...
UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...
UMA ANÁLISE COMPARATIVA DE FERRAMENTAS DE DESENVOLVIMENTO MULTIPLATAFORMA PAR...
 
Desenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis MultiplataformaDesenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis Multiplataforma
 

Destacado

Desenvolvimento de Aplicativo Multiplataforma com Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com  Intel® XDKDesenvolvimento de Aplicativo Multiplataforma com  Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDKEvandro Paes
 
Desarrollo de aplicaciones moviles con Intel XDK
Desarrollo de aplicaciones moviles con Intel XDKDesarrollo de aplicaciones moviles con Intel XDK
Desarrollo de aplicaciones moviles con Intel XDKSoftware Guru
 
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Intel Software Brasil
 
Developing cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache CordovaDeveloping cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache CordovaMahmoud Tolba
 
A web como unificação das plataformas mobile
A web como unificação das plataformas mobileA web como unificação das plataformas mobile
A web como unificação das plataformas mobileAllan Marques Baptista
 
Mobile first - Como pensar mobile
Mobile first - Como pensar mobileMobile first - Como pensar mobile
Mobile first - Como pensar mobileDiogo Souza Machado
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapDiogo Souza Machado
 
The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...
The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...
The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...Paulo Cesar Ortins Brito
 
Desarrollo de apps híbridas HTML5 con intel XDK
Desarrollo de apps híbridas HTML5 con intel XDKDesarrollo de apps híbridas HTML5 con intel XDK
Desarrollo de apps híbridas HTML5 con intel XDKSoftware Guru
 
Empreendedorismo no mercado mobile
Empreendedorismo no mercado mobileEmpreendedorismo no mercado mobile
Empreendedorismo no mercado mobileDiogo Souza Machado
 
Intel XDK in Brief
Intel XDK in BriefIntel XDK in Brief
Intel XDK in BriefCamilo Corea
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionicJoelmir Ribacki
 
Desenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x NativoDesenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x NativoLetticia Nicoli
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapThiago Colares
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 

Destacado (18)

Desenvolvimento de Aplicativo Multiplataforma com Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com  Intel® XDKDesenvolvimento de Aplicativo Multiplataforma com  Intel® XDK
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDK
 
Desarrollo de aplicaciones moviles con Intel XDK
Desarrollo de aplicaciones moviles con Intel XDKDesarrollo de aplicaciones moviles con Intel XDK
Desarrollo de aplicaciones moviles con Intel XDK
 
INTEL XDK
INTEL XDKINTEL XDK
INTEL XDK
 
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
 
Developing cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache CordovaDeveloping cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache Cordova
 
A web como unificação das plataformas mobile
A web como unificação das plataformas mobileA web como unificação das plataformas mobile
A web como unificação das plataformas mobile
 
Mobile first - Como pensar mobile
Mobile first - Como pensar mobileMobile first - Como pensar mobile
Mobile first - Como pensar mobile
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
 
The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...
The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...
The Developer's Conference 2015 - Florianópolis - Use o Xamarin.Forms e surpr...
 
Desarrollo de apps híbridas HTML5 con intel XDK
Desarrollo de apps híbridas HTML5 con intel XDKDesarrollo de apps híbridas HTML5 con intel XDK
Desarrollo de apps híbridas HTML5 con intel XDK
 
Empreendedorismo no mercado mobile
Empreendedorismo no mercado mobileEmpreendedorismo no mercado mobile
Empreendedorismo no mercado mobile
 
Intel XDK in Brief
Intel XDK in BriefIntel XDK in Brief
Intel XDK in Brief
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Desenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x NativoDesenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x Nativo
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
Arduino Overview
Arduino OverviewArduino Overview
Arduino Overview
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 

Similar a Minicurso Intel XDK

Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4Rodrigo Kono
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
Como publicar um projeto open hardware?
Como publicar um projeto  open hardware?Como publicar um projeto  open hardware?
Como publicar um projeto open hardware?Fabio Souza
 
Introdução à plataforma Android
Introdução à plataforma AndroidIntrodução à plataforma Android
Introdução à plataforma AndroidNatanael Fonseca
 
Como publicar um projeto open hardware?
Como publicar um projeto  open hardware?Como publicar um projeto  open hardware?
Como publicar um projeto open hardware?Fabio Souza
 
Assistive Context-Aware Toolkit (Portuguese)
Assistive Context-Aware Toolkit (Portuguese)Assistive Context-Aware Toolkit (Portuguese)
Assistive Context-Aware Toolkit (Portuguese)Felipe Pedroso
 
Desenvolvendo Soluções com Android
Desenvolvendo Soluções com AndroidDesenvolvendo Soluções com Android
Desenvolvendo Soluções com Androidjgbirk
 
Treinamento Android Embarcado
Treinamento Android EmbarcadoTreinamento Android Embarcado
Treinamento Android EmbarcadoOdair Sousa
 
Azure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / Goiânia
Azure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / GoiâniaAzure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / Goiânia
Azure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / GoiâniaRodrigo Marques Teixeira
 
Resumo Desenvolvimento Mobile
Resumo Desenvolvimento MobileResumo Desenvolvimento Mobile
Resumo Desenvolvimento MobileCícero Moura
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesWilliam S. Rodriguez
 
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Daniel Semedo
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Fábio Flatschart
 
TDC2016SP - Trilha .NET
TDC2016SP - Trilha .NETTDC2016SP - Trilha .NET
TDC2016SP - Trilha .NETtdc-globalcode
 
Adobe flash platform fabricio
Adobe flash platform fabricioAdobe flash platform fabricio
Adobe flash platform fabricioFabricioManzi
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
Android: Conheça o Futuro Inevitável
Android: Conheça o Futuro InevitávelAndroid: Conheça o Futuro Inevitável
Android: Conheça o Futuro InevitávelCampus Party Brasil
 
ASP NET CORE DOCKER LINUX AZURE
ASP NET CORE DOCKER LINUX AZUREASP NET CORE DOCKER LINUX AZURE
ASP NET CORE DOCKER LINUX AZUREIvan Martinez
 

Similar a Minicurso Intel XDK (20)

Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4Silverlight 4 e Expression Blend 4
Silverlight 4 e Expression Blend 4
 
Tecnologias ria2
Tecnologias ria2Tecnologias ria2
Tecnologias ria2
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Como publicar um projeto open hardware?
Como publicar um projeto  open hardware?Como publicar um projeto  open hardware?
Como publicar um projeto open hardware?
 
Introdução à plataforma Android
Introdução à plataforma AndroidIntrodução à plataforma Android
Introdução à plataforma Android
 
Como publicar um projeto open hardware?
Como publicar um projeto  open hardware?Como publicar um projeto  open hardware?
Como publicar um projeto open hardware?
 
Assistive Context-Aware Toolkit (Portuguese)
Assistive Context-Aware Toolkit (Portuguese)Assistive Context-Aware Toolkit (Portuguese)
Assistive Context-Aware Toolkit (Portuguese)
 
Desenvolvendo Soluções com Android
Desenvolvendo Soluções com AndroidDesenvolvendo Soluções com Android
Desenvolvendo Soluções com Android
 
Treinamento Android Embarcado
Treinamento Android EmbarcadoTreinamento Android Embarcado
Treinamento Android Embarcado
 
Azure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / Goiânia
Azure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / GoiâniaAzure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / Goiânia
Azure Bootcamp 2018 - DevOps para profissionais de Infra - Infomach / Goiânia
 
Resumo Desenvolvimento Mobile
Resumo Desenvolvimento MobileResumo Desenvolvimento Mobile
Resumo Desenvolvimento Mobile
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
 
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
Win302 daniel semedo_10 motivos para utilizar apache cordova (1)
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
 
TDC2016SP - Trilha .NET
TDC2016SP - Trilha .NETTDC2016SP - Trilha .NET
TDC2016SP - Trilha .NET
 
Adobe flash platform fabricio
Adobe flash platform fabricioAdobe flash platform fabricio
Adobe flash platform fabricio
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Worklight exemplo
Worklight exemploWorklight exemplo
Worklight exemplo
 
Android: Conheça o Futuro Inevitável
Android: Conheça o Futuro InevitávelAndroid: Conheça o Futuro Inevitável
Android: Conheça o Futuro Inevitável
 
ASP NET CORE DOCKER LINUX AZURE
ASP NET CORE DOCKER LINUX AZUREASP NET CORE DOCKER LINUX AZURE
ASP NET CORE DOCKER LINUX AZURE
 

Más de Diego Cavalca

Palestra USC/2018 - Carreira em Ciência de Dados
Palestra USC/2018 - Carreira em Ciência de DadosPalestra USC/2018 - Carreira em Ciência de Dados
Palestra USC/2018 - Carreira em Ciência de DadosDiego Cavalca
 
Máquina de Turing reconhecedora de número primo
Máquina de Turing reconhecedora de número primoMáquina de Turing reconhecedora de número primo
Máquina de Turing reconhecedora de número primoDiego Cavalca
 
Árvores Espalhadas Mínimas
Árvores Espalhadas MínimasÁrvores Espalhadas Mínimas
Árvores Espalhadas MínimasDiego Cavalca
 
Computação Cognitiva: conceitos e aplicações
Computação Cognitiva: conceitos e aplicaçõesComputação Cognitiva: conceitos e aplicações
Computação Cognitiva: conceitos e aplicaçõesDiego Cavalca
 
Sistema de Automação da Irrigação do Plantio - Apresentação
Sistema de Automação da Irrigação do Plantio - ApresentaçãoSistema de Automação da Irrigação do Plantio - Apresentação
Sistema de Automação da Irrigação do Plantio - ApresentaçãoDiego Cavalca
 
Sistema de Automação da Irrigação do Plantio - Artigo
Sistema de Automação da Irrigação do Plantio - ArtigoSistema de Automação da Irrigação do Plantio - Artigo
Sistema de Automação da Irrigação do Plantio - ArtigoDiego Cavalca
 
Gerenciamento de Projetos com PRINCE2
Gerenciamento de Projetos com PRINCE2Gerenciamento de Projetos com PRINCE2
Gerenciamento de Projetos com PRINCE2Diego Cavalca
 

Más de Diego Cavalca (7)

Palestra USC/2018 - Carreira em Ciência de Dados
Palestra USC/2018 - Carreira em Ciência de DadosPalestra USC/2018 - Carreira em Ciência de Dados
Palestra USC/2018 - Carreira em Ciência de Dados
 
Máquina de Turing reconhecedora de número primo
Máquina de Turing reconhecedora de número primoMáquina de Turing reconhecedora de número primo
Máquina de Turing reconhecedora de número primo
 
Árvores Espalhadas Mínimas
Árvores Espalhadas MínimasÁrvores Espalhadas Mínimas
Árvores Espalhadas Mínimas
 
Computação Cognitiva: conceitos e aplicações
Computação Cognitiva: conceitos e aplicaçõesComputação Cognitiva: conceitos e aplicações
Computação Cognitiva: conceitos e aplicações
 
Sistema de Automação da Irrigação do Plantio - Apresentação
Sistema de Automação da Irrigação do Plantio - ApresentaçãoSistema de Automação da Irrigação do Plantio - Apresentação
Sistema de Automação da Irrigação do Plantio - Apresentação
 
Sistema de Automação da Irrigação do Plantio - Artigo
Sistema de Automação da Irrigação do Plantio - ArtigoSistema de Automação da Irrigação do Plantio - Artigo
Sistema de Automação da Irrigação do Plantio - Artigo
 
Gerenciamento de Projetos com PRINCE2
Gerenciamento de Projetos com PRINCE2Gerenciamento de Projetos com PRINCE2
Gerenciamento de Projetos com PRINCE2
 

Minicurso Intel XDK

  • 2. AGENDA 1. Apresentação do curso 2. Introdução ao HTML5 3. Bibliotecas Cordova, jQueryMobile e Bootstrap 4. Intel Developer Zone 5. Conhecendo a IDE 6. Construindo nossa UI 7. Notificações e informações do dispositivo móvel 8. Agenda de Contatos e arquivos 9. GPS e Conexões à internet 10. Câmera 11. Banco de dados local (offline) 12. Testes, compilação e publicação do aplicativo
  • 3. Diego Cavalca Analista de Sistemas • Professor Centro Paula Souza (ETEC) Minicurso Intel XDK® Sobre o curso • Expresso • Abrangente • Direto Motivação • Espalhar o conhecimento da tecnologia • Falta de materiais em português sobre o tema • Difusão de nova tecnologia de desenvolvimento
  • 4. Referências • https://software.intel.com/html5 • https://software.intel.com/en-us/node/492826 • http://cordova.apache.org/ • http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
  • 5. www.diegocavalca.com ARTIGOS E TUTORIAIS SOBRE DESENVOLVIMENTO DE SOFTWARE.
  • 6. Minicurso Intel XDK® POR DIEGO CAVALCA Introdução ao HTML5 Entenda os conceitos básicos do HTML5 e veja a sua real importância no desenvolvimento de aplicativos híbridos.
  • 7. HTML – Evolução histórica  1991 – HTML  1994 – HTML2  1996 – CSS1 + Javascript  1997 – HTML4  1998 – CSS2  2000 – XHTML  2002 – Tableless  2005 – AJAX 2009
  • 9. HTML5 – Quem utiliza
  • 10. HTML5 - Recursos SEMÂNTICA API (Application Programming Interface) • Padrões de estrutura do documento • Variações do elemento INPUT • Novos elementos: • Audio • Video • Canvas • Acesso ao dispositivo • Geolocalização • Armazenamento local • Conectividade
  • 11. HTML5 – Padrões de estrutura  A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes;  Novas tags facilitam a semântica no documento HTML;  Há uma maior visibilidade aos mecanismos de busca;  Fim da “sopa de DIVs”;  Fim das grandes quantidades de IDs e classes.
  • 12. HTML5 – Padrões de estrutura ANTES AGORA AGORA
  • 13. HTML5 – Inputs  Fim dos plugins e “gambiarras”  Padronização definitiva em qualquer plataforma  Experiência do usuário otimizada (de acordo com a região!)  Demonstrações: http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5- form-input-types.html
  • 14. HTML5 – Mídias (áudio/vídeo)  Com o HTML4 era impossível anexar áudio ou vídeo na página, e para suprir essa necessidade surgiram as tecnologias proprietárias (Flash, Silverlight);  No HTML5 foram, incluídas as tags <audio> e <video>, permitindo anexar mídias sem a necessidade de nenhum plugin.  YouTube adotou o HTML5 como tecnologia padrão para o processamento de seus vídeos. Mais informações em: http://www.youtube.com/html5
  • 17. HTML5 – Canvas  O elemento <canvas> consiste na utilização de elementos JavaScript para a criação de gráficos no navegador, sem a necessidade de nenhum plugin instalado;  Motivo principal pra ser considerado para os RIA proprietários (Flash, Silverlight e JavaFX);
  • 18. HTML5 – Canvas Demonstrações da capacidade do elemento <canvas> ◦ http ://html5demos.com/canvas ◦ http://html5demos.com/canvas-grad ◦ http://9elements.com/io/projects/html5/canvas/ ◦ http://davidwalsh.name/canvas-demos ◦ http://sketch.io/sketchpad/
  • 19. HTML5 – API’s ◦ Contenteditable (conteúdo editável) ◦ http://html5demos.com/contenteditable ◦ Geolocation (localização geográfica) ◦ http://html5demos.com/geo ◦ Network status (online/offline) ◦ http://html5demos.com/offline ◦ Armazenamento de dados ◦ http://html5demos.com/storage
  • 20. HTML5 - Benefícios  Desenvolvedores:  Semântica facilitada;  Padronização global de código (menos“gambiarras”);  Otimiza o posicionamento do site nos motores de buscas;  Inserir mídia (áudio/vídeo) sem usar componentes externos (como plugins);  Aproveitamento da sintaxe Javascript para acessar suas API’s (canvas, geo, etc.);  Usuários:  Navegação mais rápida e simples (arquivos menores);  Otimização da experiência do usuário (UX) multiplataforma (inputs);  HTML5 está disponível em várias plataformas diferentes e funciona com a mesma eficiência em PC’s, smartphones e tablets.
  • 21. HTML5 - Referências  http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf  http://www.w3schools.com/html/html5_intro.asp
  • 23. Minicurso Intel XDK® POR DIEGO CAVALCA Bibliotecas Cordova, jQueryMobile e Bootstrap Conheça algumas das bibliotecas mais utilizadas, entenda o papel de cada uma e como são usadas no desenvolvimento mobile.
  • 24. <style> </style> LAYOUT (User Interface) Intel XDK (IDE) Arquitetura da IDE Intel XDK HARDWARE <script> </script>
  • 25. Bootstrap • “Bootstrap é o framework – baseado em HTML, CSS e JS - mais popular para o desenvolvimento de interfaces para projetos web e mobile.” • Fácil utilização (baixar arquivos e referenciar); • Torna o desenvolvimento front-end (UI) mais rápido e fácil; • Feito para pessoas de todos os níveis, dispositivos de todas as formas e os projetos de todos os tamanhos; • Componentes visuais pré-definidos (button, input, dialog, menu, etc); • Distribuído sob licença Open-source; • Site: http://getbootstrap.com
  • 26. jQuery Mobile • Sistema de interface de usuário baseada em HTML5; • Oriundo das bibliotecas jQuery e jQuery UI; • Projetado para fazer sites e aplicativos que são acessíveis em todos os dispositivos smartphone, tablet e desktop responsivos; • Oferece navegação Ajax com transições de página, captura de evento “toque” (touch), e vários widgets pré-definidos (inputs, selects, datepicker, etc.); • Seu código (leve) é constantemente atualizado, e tem um design facilmente customizável; • Site: http://jquerymobile.com
  • 27. Apache Cordova • Biblioteca para desenvolvimento de aplicações híbridas (HTML, CSS e JS); • Fornece acesso ao hardware do dispositivo (GPS, Camera, Acelerômetro, etc.); • Conjunto de API’s baseado em Javascript; • Um código, várias plataformas (Android, iOS, WP, etc.) com o mínimo de alterações; • Mantido pela Apache sob distribuição Open-source; • Site: http://cordova.apache.org
  • 28. Minicurso Intel XDK® POR DIEGO CAVALCA Intel Developer Zone® Nesta aula você irá conhecer o espaço do desenvolvedor Intel, aprender a encontrar materiais de apoio e dar os primeiros passos para se trabalhar com Intel XDK.
  • 29. Resumo Um programa global que conecta os desenvolvedores com a Intel em tudo que se relaciona com a área de software - do desenvolvimento à distribuição:  Recursos para o desenvolvedor  Recursos para a empresa  Comunidade envolvida
  • 31. Benefícios  Manter-se atualizado sobre novos recursos das IDE’s;  Informar-se sobre eventos oficiais;  Conhecer novas tecnologias Intel;  Suporte técnico através de fórum oficial (comunidade ativa!);  Integrar diversas ferramentas (e projetos) através de uma conta.
  • 32. Minicurso Intel XDK® POR DIEGO CAVALCA Conhecendo a IDE A aventura começa agora! Você irá conhecer a ferramenta Intel XDK em seus detalhes, explicando de uma maneira ampla como funciona cada recurso da IDE para a criação de aplicativos mobile híbrido.
  • 34. Como baixar? Intel Developer Zone http://software.intel.com/pt-br/html5
  • 35. Resumo  Conhecemos a arquitetura e recursos da IDE;  Como se cria um novo projeto;  Vimos que o Intel XDK possui alguns templates e projetos prontos (demonstrações);  DICA: Fique atento a versão da ferramenta Intel XDK, pois ela atualiza constantemente!
  • 36. Minicurso Intel XDK® POR DIEGO CAVALCA Construindo nossa UI Agora sim! Vamos aprender a construir layouts de maneira fácil no intel XDK, dando vida para o nosso aplicativo com uma interface matadora para qualquer plataforma utilizando as opções de UI da ferramenta.
  • 37. Referências  Lista de componentes UI: http://app-framework-software.intel.com/af22/components.php  Ferramenta Style Builder: http://app-framework-software.intel.com/af22/style.php
  • 38. Minicurso Intel XDK® POR DIEGO CAVALCA Notificações e Informações do dispositivo Nesta aula você irá aprender a interagir com o usuário, através de mensagens, alertas, vibração e sons. Também vamos ver como acessar as informações de hardware e software (como IMEI, sistema operacional e outros) do dispositivo móvel em que o aplicativo está instalado.
  • 39. Resumo  NOTIFICAÇÕES: Recursos audio-visuais para interação com o usuário;  Popup;  Caixa de diálogo informativa;  Beep;  Vibração;  INFORMAÇÕES: Dados do dispositivo no qual o aplicativo está instalado;  Modelo;  Plataforma (S.O.);  Versão do S.O.;  UUID (IMEI);
  • 40. Referências  Documentação Apache Cordova:  INFORMAÇÕES: http://plugins.cordova.io/#/package/org.apache.cordova.device  DIALOGS: http://plugins.cordova.io/#/package/org.apache.cordova.dialogs  VIBRATION: http://plugins.cordova.io/#/package/org.apache.cordova.vibration
  • 41. Minicurso Intel XDK® POR DIEGO CAVALCA Agenda de Contatos e Arquivos Aprenda a acessar informações da agenda de contatos e o sistema de arquivos do smartphone com seu aplicativo.
  • 42. Resumo  CONTATOS: Acesso e manipulação completa da agenda:  Inserir;  Excluir;  Listar;  Detalhes;  ARQUIVOS: Gerenciamento dos arquivos salvos no dispositivo (memória interna) ou em seus adjacentes (memória ‘externa’ – SD’s, etc.);
  • 43. Referências  Documentação Apache Cordova:  CONTACTS: http://plugins.cordova.io/#/package/org.apache.cordova.contacts  FILESYSTEM: http://plugins.cordova.io/#/package/org.apache.cordova.file
  • 44. Minicurso Intel XDK® POR DIEGO CAVALCA GPS e Conexões à internet Nesta aula você irá aprender a utilizar os recursos do GPS e também a checar o estado da conexão à internet do aparelho, seja rede Edge, 3G ou Wi-fi.
  • 45. Resumo  GEOLOCALIZAÇÃO (GPS): Captura da localização real do dispositivo:  Posição Atual;  Monitoramento contínuo da posição geográfica;  CONECTIVIDADE (REDE/INTERNET): Acesso e verificação da rede de internet do aparelho;
  • 46. Referências  Apache Cordova:  GEOLOCATION: http://plugins.cordova.io/#/package/org.apache.cordova.geolocation  CONNECTION (Network Information): http://plugins.cordova.io/#/package/org.apache.cordova.network-information  Google Maps (v3): https://developers.google.com/maps/documentation/javascript/?hl=pt-br
  • 47. Minicurso Intel XDK® POR DIEGO CAVALCA Câmera Fotos e vídeos são o tema dessa aula, na qual iremos abordar como se utiliza todos os recursos de acesso a câmera do dispositivo móvel.
  • 48. Resumo  Através dos plugins do Apache Cordova, utilizando os recursos de hardware do dispositivos, podemos capturar arquivos de mídia, como:  Imagem (foto);  Vídeo;  Áudio.
  • 49. Referências  Apache Cordova:  CAMERA: http://plugins.cordova.io/#/package/org.apache.cordova.camera  CAPTURE: http://plugins.cordova.io/#/package/org.apache.cordova.media-capture
  • 50. Minicurso Intel XDK® POR DIEGO CAVALCA Banco de dados local (Offline) Nesta aula vamos aprender a criar um banco de dados local, gravando, atualizando, acessando e excluindo dados quando necessário em nossa aplicação.
  • 51.  WebStorage: simplesmente fornece um mapeamento de valores-chave, como localStorage["name"] = username;. Infelizmente, as implementações atuais oferecem suporte apenas a mapeamentos pelo método string-to-string, então é necessário que você serialize e desserialize outras estruturas de dados. Você pode fazer isso usando JSON.stringify() e JSON.parse().  WebSQL: oferece a você o poder - e a realização - de um banco de dados relacional SQL estruturado.  IndexedDB: é algo entre o WebStorage e WebSQL. Como o WebStorage, é um mapeamento por valores-chave simples, mas suporta índices como os de bancos de dados relacionais. Assim, pesquisas por objetos correspondentes a um determinado campo são rápidas, pois não é necessário percorrer manualmente cada objeto armazenado. Armazenamento offline (HTML5)
  • 52. Referências  Armazenamento offline em HTML5: http://www.html5rocks.com/pt/features/storage  Mergulhando em HTML5 – Armazenamento: http://diveintohtml5.info/storage.html  WebSQL no HTML5: http://www.tutorialspoint.com/html5/html5_web_sql.htm  Conhecendo o WebSQL: http://elemarjr.net/2010/10/19/html-5-parte-6-armazendando- dados-com-web-sql-databases/
  • 53. Minicurso Intel XDK® POR DIEGO CAVALCA Teste, compilação e publicação do aplicativo (Android, iOS e Windows Phone) Chegamos na reta final! É hora de testar, compilar e publicar o aplicativo nas lojas. Aprenda a utilizar todos os recursos de teste e 'build' da ferramenta Intel XDK, além de conhecer os passos necessários para distribuir seu aplicativo para o público.
  • 54. Arquitetura da IDE Intel XDK Desenvolvimento Teste Compilação (Publicação)
  • 55. Desenvolvimento  Bibliotecas de Interface (App Framework, Ionic Framework, jQuery Mobile, etc.)  Integração nativa com Apache Cordova e suas bibliotecas de acesso ao hardware do dispostivo  Editor de texto (baseado no Brakets)  App Designer
  • 56. Teste  Emulação “embarcada” do aplicativo na própria IDE  Console de depuração javascript  App Preview
  • 57. Teste – Emulação embarcada  Visualiza o aplicativo, de maneira ágil, em um emulador, dentro da própria IDE  Não necessita de configurações adicionais e complexas  Simula o tamanho e o visual de vários modelos de tablets e smartphones  Criação de cenários de hardware (falta de GPS, conexão à internet, etc.)
  • 58. Teste – Console Javascript  Valida ações e comandos escritos linguagem javascript  Verifica erros em tempo de execução  Permite depuração completa, de acordo com nossas necessidades
  • 59. Teste – App Preview  Aplicativo para dispositivo móvel (Android, iPhone e Windows Phone) da Intel  Permite emular o aplicativo no próprio dispositivo  Ver o aplicativo “rodando” no aparelho sem a necessidade de instalação ou publicação nas lojas
  • 60. App Preview – arquitetura Computador com Intel XDK® Cloud Intel (Conta Intel Developer Zone) Dispositivo Android com App Preview Dispositivo iOS com App Preview Dispositivo Windows com App Preview
  • 61. App Preview – Instalação do aplicativo  Acesse a loja de aplicativos de seu aparelho (Android, iOS ou Windows) e busque pelo aplicativo “App Preview”  Baixe o aplicativo e instale-o em seu dispositivo.
  • 67. Compilação (publicação)  Configuração de instalação do aplicativo (ícones, imagens e etc.)  Geração prática do pacote de instalação do app para publicação nas lojas de aplicativos
  • 68. Resumo  Ferramentas de testes  Configuração das informações do aplicativo  Geração do pacote de instalação, de acordo com a plataforma que iremos distribuir
  • 69. Dúvidas ou problemas técnicos Utilize o fórum oficial Intel XDK® https://software.intel.com/pt-br/forums/intel-software-network-brasil
  • 70. Referências • http://software.intel.com/html5 • http://app-framework-software.intel.com/documentation.php • https://software.intel.com/pt-br/forums/intel-software-network-brasil • http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf • http://jquerymobile.com/ • http://cordova.apache.org/ • http://www.sqlite.org/
  • 71. Mais dicas e informações sobre Intel XDK www.diegocavalca.com