Post on 29-Jun-2015
description
DESENVOLVIMENTO HTML5 PARA SMARTPHONES E TABLETS BLACKBERRYBruno Mota e Felipe Andrade
vídeo exibido em 26 de Agosto de 2012
Exemplos• Cute the Rope: jogo criado em HTML 5 com uso
intenso de física e gráficos dinâmicos
• Games em HTML5: agregador de games em HTML5
• Red Hot Chili Peppers: clipe interativo muito bacana!
• Draw a Stick Man: interaja com o desenho!
HTML5 no seu BlackBerry• Uma das principais apostas da RIM para acelerar
o crescimento no número de aplicativos na promissora plataforma BlackBerry 10
• Roda como um aplicativo nativo
• O navegador apresenta um dos melhores suportes ao padrão HMTL5 entre os líderes de mercado
Quais as vantagensde desenvolver apps nativos com HTML5?
HTML5 no seu BlackBerry• Roda como um aplicativo standalone
• Utilize frameworks como o Sencha®, PhoneGap®, jQuery® ou Dojo®
• Adicione funcionalidades nativas em seu aplicativo HTML5 (ex: BBM, PIM, etc)
• Desenvolva apps apenas com HTML5, JavaScript e CSS
• Distribuição e venda através da loja App World
BlackBerry® WebWorks™
É a plataforma de desenvolvimento para criação de aplicativos para o tablet BlackBerry PlayBook e para os smartphones BlackBerry usando HTML5, JavaScript e CSS.
BlackBerry® WebWorks™
• Permite que os desenvolvedores escolham as próprias ferramentas para testar e desenvolver. Se encarrega de empacotar aplicativos para tablets e smartphones BlackBerry.
• Plataforma web aberta em todos os sentidos possíveis.
• Principal objetivo? Avançar ao estado da arte todos os aplicativos mobile com HTML5.
Como testar o seu aplicativo?
• É mais simples do que você imagina.
• Basta digitar o endereço de um site que está rodando o seu app BlackBerry WebWorks no Ripple Emulator
Como começar?
BB10 WebWorks SDK: crie apps para o BlackBerry Alpha 10 Dev ou BlackBerry Simulator 10.
Ripple: emule os seus aplicativos utilizando o Google Chrome.
BlackBerry Graphical Aid: instale e crie aplicativos para a plataforma BlackBerry.
WebWorks Samples: exemplos de projetos HTML5 para você testar a integração com características nativas (GPS, Acelerometro, in-app-purchase).
É FÁCIL COMEÇAR!<!DOCTYPE html>
O que é o HTML5?
• Evolução incremental do padrão HTML
• Linguagem melhor preparada para criação de aplicações web e multiplataforma
• Independente de plugins
• Empresas como a Apple, Mozilla, Opera e Microsoft apoiam o projeto
O que posso utilizar?
• WebGL (3D)
• Canvas (2D)
• Gráficos Vetoriais (SVG)
• Áudio e Vídeo
• Geolocalização
• Orientação do dispositivo
• Detecção de Modo Offline
• Armazenamento local
• Novas tags
NOSSAS DICASque vão te custar R$ 1 milhão!!! :)
Singleton Pattern
Organize o seu projeto em um “JSON”
Benefícios
• Organização de dados e padrão de projeto
• Agrupamento de Atributos e Métodos
• Ótimo para Iniciantes
Exemplo
var APP = APP || {};
App.Home: {
setUp: function() {
}
}
CCS3• Media Queries
• Seletores
@media (orientation: portrait) { background-image: url(bg.png);}
.item:checked { background-color: #FF0000;};
CASE: APP SEBRAE LIKE A BOSS
• É possível desenvolver e publicar aplicativos para BlackBerry PlayBook em menos de 12 horas
• Instalado em 16 tablets BlackBerry PlayBook na ação SEBRAE LIKE A BOSS que aconteceu na Campus Party Recife 2012
• Cadastro de dados de participantes da Campus Party, Armazenamento Offline com Local Storage, Cache de arquivos e Sincronização de dados com Servidor WEB
Anatomia de um App
Obrigado!!!
Bruno Mota @bruno_motaFelipe Andrade @felipeandrade