Firefox OS/ Phonegap

Até 2016 metade de todos Apps no mundo será Híbrido com HTML5/CSS3/Javascript

gartner-logo

Quando o instituto de pesquisas avançadas com foco em tecnologia Gartner fala, todo mundo presta atenção, já que seus releases tem alto grau de acerto.

Hoje eles liberaram mais um release sobre o relatório apontando que devido ao alto grau de complexidade e o curto prazo de tempo para desenvolvimento (aka Prazo Jack bauer), empresas estão adotando soluções híbridas com HTML em um container Web que dão acesso à certos recursos do dispositivo.

Até 2016 metade de todos os Apps escritos e publicados serão híbridos.

Ou seja, Phonegap chegou para ficar.

Phonegap ROCKS!

Apache Cordova/ Mobile/ Phonegap

Obrigado Brasil, Diretório de desenvolvedores Phonegap

cordova_logo

phonegap_diretorio

Eu pedi e vocês atenderam, vocês são realmente fantásticos e gostam de colaborar, e esse post é para lhe agradecer desenvolvedor que acredita no potêncial do Phonegap e aplicações de padrão aberto como HTML/CSS e Javascript.

O Diretório de desenvolvedores Phonegap hoje conta com [highlight bg=”#DDFF99″ color=”#000000″] 607 [/highlight] registros entre pessoas e empresas e o Brasil saiu de [highlight bg=”#aa0000″ color=”#ffffff”] 8 [/highlight] desenvolvedores cadastrados para [highlight bg=”#ff9900″ color=”#000000″] 29 [/highlight], que é o atual status enquanto escrevo esse artigo.

Esse número pode aumentar, divulgue ao pessoal que você conhece, estude Phonegap, HTML, CSS, Javascript e começe a compartilhas suas idéias junto com seus amigos, empresas empregadoras, aceleradoras, vamos crescer.

 

Confira o Ranking :

[table style=”1″]
País N. Inscritos
Estados Unidos 123
India 79
Reino Unido 44
Brasil 29
Canadá 29
Itália 29
[/table]

Aproveite também e junte-se ao grupo PhoneGap Brasil para discutir e postar dúvidas.

Cadastre-se no diretório de desenvolvedores Phonegap

Grupo PhoneGap Brasil

[quote style=”2″]Obrigado!!!![/quote]
frameworks/ HTML 5/ HTML5 / CSS3/ JQuery/ Mobile/ Phonegap/ Web 2.0

Os mitos do desenvolvimento Front-end com HTML, CSS e Javascript

openweb

Eu já havia comentado em outro post aqui no blog sobre os 10 mitos de que tecnologias web não eram tão boas para fazer sistemas. Hoje me deparei com os slides de uma apresentação do Zeno Rocha que traduz tudo aquilo que eu escrevi em texto em imagens e razões para você acreditar que a semântica web está forte e cheia de recursos, navegue pelos slides e veja a variedade de possibilidades.

Sem mencionar que nos slides faltou só as soluções da empresa Sencha e o SDK da Blackberry para dispositivos móveis o Webworks.

Os sdks e bibliotecas para desenvolvimento Web amadureceram tão rápido em pouco mais de 2 anos que eu nem imagino o que estará por vir daqui a 2 anos à frente.

Notícias/ Phonegap

Campus party 2013 – Phonegap e depois do Flash Player

campusparty2013

E pela terceira vez consecutiva vou palestrar no Campus Party 2013, sempre na arena pitágoras as palestras desse ano vou falar de dois assuntos que tem dominado minha atenção nos últimos 14 meses, que é Phonegap e as reviravoltas da Adobe com o Flash Player.

O Campus party tem uma energia muito positiva e que todo desenvolvedor/geek/ fantático por informática é aconselhado ir sempre. Tem de tudo um pouco, esse ano eles inovaram mais ainda com vários desafios de programação, pitch para apresentação de sua start-up, é o lugar ideal para se começar o ano de 2013.

São várias arenas, e mais de 500 horas de atividades durante o período de 28 de Janeiro à 02 de Fevereiro.

Galileu (Astronomia, Hardware, Modding, Eletrônica, Robótica, Biotecnologia, Nanotecnologia e GreenTech)
Michelangelo (Design, Fotografia, Vídeo e Música)
Gutenberg (Mídias Sociais e Blog)
Pitágoras (Desenvolvimento)
Sócrates (Software Livre e Sistemas operacionais)
Arquimedes (Segurança, Redes e Hack)
Hypatia (Empreendedorismo)
Stadium (Games e Simulação)

As palestras serão no palco Pitágoras, sendo essas:

Criando Apps para várias plataformas e mantendo a lucidez ( 1 de Fevereiro as 21:20)
Descrição: Com tanta plataforma mobile disponível no mercado e o poder de compra do brasileiro aumentando vários ninchos de públicos foram nascendo.
Tendo mais da metade da população brasileira subindo de classe C para B, esses ninchos trazem um público totalmente novo para a plataforma móvel.
O Brasil hoje tem cerca de 25% de sua população usando smartphones de diversas marcas e consequentemente diversas plataformas.
Manter um App apenas para uma plataforma é o primeiro passo para cometer erro de estratégia, outro erro bastante comum é esquecer as escolhas de futuros
clientes de seu negócio que não usam a plataforma que você tem disponível para seu App.
Vamos ver juntos cada detalhe de como o PhoneGap pode ajudar seu time pequeno e com pouco recurso alavancar novas Apps para N Lojas em um intervalo de tempo
comercialmente viável. Compartilharemos cada acerto e erro que aprendemos em nosso dia-a-dia.


Depois do Flash Player, o navegador se tornou nossa segunda caixa de areia
( 1 de Fevereiro as 11:15)
Descrição: Com o avançado dos navegadores impulsionados pela frenética atualização que o Google Chrome possui, a internet ficou mais dinâmica, linda e mais aberta.
A Adobe mudou toda sua estratégia de negócio, abandando literalmente o Flash Player da plataforma Móvel e seguindo o futuro da escolha do mercado o HTML5.
Essa palestra é voltada para você desenvolvedor Actionscript 3.0/Flash/Flex que usou e usa até hoje seus conhecimentos para essa plataforma, Depois de passar 10 anos escrevendo software para o Flash Player, irei mostrar como você pode tirar proveito de toda essa mudança e reviravolta, adaptando-se as novas escolhas do mercado e usando seu conhecimento adquirido para implementar seus novos produtos com HTML5.

Mais detalhes você pode acessar aqui.

 

Phonegap

Chamando todos para conhecer o diretório de desenvolvedores Phonegap

2013-01-14_0007

phonegap_diretorio

Aqui vai meu pedido para todos os desenvolvedores de apps móveis com Phonegap, cadastrem-se no diretório de desenvolvedores e seja conhecido. A grande vantagem desses diretórios de desenvolvedor é empresas contratarem sua empresa ou você para criar Apps com a ferramenta, e até a própria empresa a Nitobi te indica para clientes locais no Brasil.

Esse é o caso da A RIACycle que acabamos de fechar mais 1 projetinho móvel através do diretório, e tudo que funciona nós indicamos. Porém a presença brasileira ainda é tímida, faça parte da lista e ajude-se a ser visto.

Você só é visto se faz propaganda, essa é sua hora de fazer seu jabá para o mundo todo aproveitando o canal dado pelo Phonegap. Quero ver aquilo ali ficar cheio de brasileiro.

Cadastre-se people.phonegap.com

Aproveite e cadastre-se no grupo de discussão Phonegap Brasileiro

Apache Cordova/ Mobile/ Notícias/ Phonegap

Apache Cordova | Phonegap 2.3 liberado para download

cordova_logo

Acabaram de lançar a última versão do Apache Cordova ou em resumo Phonegap 2.3. Quem entrar pelo site do projeto Apache Cordova ainda vai encontrar apenas a versão 2.2, até o final do dia a última release estará no site.

Quem não pode esperar, pode entrar direto no site do projeto Phonegap e baixar.

Das grandes novidades foi o total suporte ao Windows Phone 8, com o novo Internet Explorer 10. Contando com 5x mais rápido do que para a versão 7.x

Faça o Download.

A lista completa de mudanças você encontra aqui.

ios/ iPad/ Iphone/ Mobile/ Negócios/ Notícias/ Phonegap

As plataformas preferidas do desenvolvedor Mobile esse ano e no próximo

mobile_war

Dizem que uma foto vale mais do que mil palavras, e uma foto mostrando um gráfico vale mais do que mil argumentos sem cabimentos.

Eu gosto de acreditar nesses fatos já que está ai com o tempo provando que é o que é.

grafico_mobile_2013

 

 

O gráfico acima, pertence a empresa AppCelerator, que faz uma pesquisa a cada quatro meses para medir a confiabilidade do desenvolvedor ao mercado e predicar onde o desenvolvedor está atento.

iOS e Android continuam sendo os mercados onde desenvolvedores utilizam suas habilidades para ganhar dinheiro. E um fato bem importante é que nesse relatório, o Google Nexus que é o Tablet do Google ganhou bastante na disparada para competir com o Tablet da Apple.

A Blackberry está cambaleando com seus 9% de preferência, perdendo para o estreante Windows Phone, que em 2013 será alvo de grande especulação na competição.

Veja na íntegra aqui o relatório.

Phonegap

Arquitetura de uma aplicação em Apache Cordova “Phonegap” para Multiplos projetos Mobile

cordova_logo

Criar uma App móvel com tecnologia Web parece tirar leite de pedra quando se tem disponível um SDK inteiro para você explorar. E eu concordo com você quando pensa nisso. Já que existe aquela grande batalha entre “O que devo usar App Web ou App Nativo?”. Não tenha dúvida que quem lhe escreve também tem esse tipo de dúvida, afinal assim como você eu sou desenvolvedor. E é gostoso compartilhar aquilo que você desbrava, especialmente em português; Em fim, é uma gama de dúvidas e arrodeios que você faz para chegar a uma solução final e entregar o produto para seu cliente.

Esse é mais um post com uma abrangência geral do que um bem específico, já que isso é um divisor de opiniões, eu preferir expor as minhas escolhas e de uma maneira geral ver como eu encaro isso.

Para esclarecer melhor algumas questões que eu tive e provavelmente você terá, faça um check-list do que é importante na hora de partir para as discussões móveis dentro de sua empresa ou dentro de si mesmo, eis algumas de suas perguntas.

– Quero expor minha App que extende um serviço Web.
– Quero criar uma App que use serviços Web e seja disponível para todas as plataformas populares “ios e Android”.
– Minha empresa precisa criar uma App especialmente para tomadores de decisão.
– Minha App precisa comunica-se com um dispositivo feito pela minha empresa
– Preciso criar um Jogo em 3D que não consuma tanto a bateria do aparelho.
– Quero criar uma App responsiva que funcione para N telas e N resoluções “Ninja Style”.
– Etc.

Dentre várias outras Apps, a sua não é diferente da Maioria, o que importa para quem usa sua App é a qualidade final do produto, se ela atinge o objetivo principal e se a UX é bacana.

É uma área bem ampla que gera horas e horas de discussões, o melhor a fazer nesses casos é usar o bom senso e uma rápida pesquisa na internet para ver o que é tendência e assim tirar melhor proveito do que já foi discutido.

Por hora, essas são as dicas que você pode aproveitar para planejar sua estratégia móvel daqui para frente. “Vamo sí bora” ao que interessa.

Arquitetar um projeto é simplesmente organizar o que você precisa e aonde você quer chegar, simplesmente é seguir a planta de uma casa antes de você construir uma, esboçar o que você precisa para concluir o projeto.

No Apache Cordova “PhoneGap”, você precisa tomar uma decisão quanto a utilizá-lo, eu já comentei antes sobre qual a real vantagem do PhoneGap. O que parece moleza à primeira vista, pode-se levar um bom tempo para concluir.

Faça um check-list do que você precisa, digamos que eu tenho um App que precisa dos seguintes itens:

  • App para Android
  • App para iOS
  • Formulários e Relatórios em gráficos
  • Efeitos de transição de tela
  • Chamar metodos em um serviço Restful
  • Fazer persistência local
  • Guardar informações de posição geográfica

O Apache Cordova consegue atingir todas essas funções, e você sabendo programar em CSS3, HTML5 e JS você consegue com facilidade atingir esse objetivo. A produtividade pode competir diretamente com o SDK nativo, isso pode virar assunto para outro post de pos e cons, por hora ficamos com a arquitetura.

Feito a checagem do que preciso, é hora de começar a criar o projeto, as bibliotecas que preciso são “Gestos, Web Storage/SQLite, GPS, RestFul”. Biblioteca para isso é que não falta. As que eu gostei bastante foram.  HammerJS, jStorage, ZeptoJS, AngularJS.

Bibliotecas em seus devidos lugares, agora é partir para a estrutura necessária. Compartilho aqui com você a estrutura usei em um projeto recente.

 Estrutura de pastas

 Configurações da plataforma

Se você seguiu o get Started to Cordova, provavelmente você terá todas as funções do aparelho habilitadas, isso pode assustar um pouco seu usuário e isso vai levar mais tempo para ser analisado por algumas lojas se sua App precisa daquilo ou não, como no caso da Apple Store. O segredo é deixar apenas habilitado o que realmente você precisa na App.

 

Prototipar ou criar o Wireframe de sua App

Elaborar uma App, não vai só de uma boa idéia, é necessário planejar o que ela vai ter, navegação, carregamentos, efeitos, reposição. E isso demanda um workflow que só vai ser possível se você prototipar ou fazer o wireframe dela. Ferramentas boas para isso tem diversas, eu gosto muito de utilizar o Adobe Fireworks, e caso você não tenha o Fireworks, você pode usar o Moqups, Porém se em seu caso essa App, demanda muita gente e muitas reuniões, sugiro os templates que a Smashing Magazine disponibilizou.

Inspire-se

Seja em um copo de vinho, ou na música do Michel Té logo, a inspiração tem que vim, o Dribbble e o Behance é uma baita fonte de inspiração. Para aquelas dúvidas de como apresentar a informação.

Testes outras Apps e veja como elas deram com um problema em particular que você vai enfrentar na sua.

Pratique

Depois que criar a App, dê a alguém que não tem muita habilidade na tela de um celular, em especial a uma criança, eu uso minha sobrinha como cobaia sempre que possível, e os insights que ela me fornece não tem preço, especialmente quando se fala em joguinho.

Tenha em mente que sua App se não for jogo, precisa funcionar com 1 dedo e que se encaixe em um denominador comum dos dedos em 44px. Assim como as fontes, no máximo 1.5em é o suficente para que seu App saia ganhando a atenção do usuário.

 

Colabore com os bugs

Apache Cordova é um projeto Open-source e você desenvolvedor tem a obrigação moral de devolver aquilo que você descobre, se achar erro, divulgue na lista oficial, se achou uma solução para o erro comite ela. Assim como em qualquer outro projeto open-source você está tornando seu trabalho um pouco mais fácil, devido o esforço de uns, então nada mais justo do que ajudar outros também a terem menos problemas, torne o mundo um pouco melhor.

 

Até o próximo.

 

 

HTML 5/ ios/ JQuery/ JQuery Mobile/ Phonegap

Phonegap só resolve 50% do problema, o resto é contigo

cordova_logo_problem

Ok, eu já falei das vantagens e desvantagens do phonegap em comparação ao Adobe AIR, e eu acho que faltou um post mais completo sobre a maior dificuldade que se tem em criar uma solução mobile completa fora da caixa de areia do SDK nativo.

Phonegap resolve parte do problema em suportar Apps escritos em HTML5/JS/CSS, depois que você cria seu primeiro Hello World, você se pergunta, “Ok, e agora o que eu faço?”.

É ai, onde seus problemas começam, definir uma interface fluída, que funcione em diversos dispositivos é tarefa ultra complicada, já que temos dispositivos de diferentes densidades.

Resolver esses problemas sem o SDK nativo é um baita desafio, em especial quando se tem em mente que grande parte de Apps móveis, são customizáveis, já que você vai enfrentar isso, é bom se preparar, eis algumas ferramentas e frameworks para JS que ajudam a encurtar esse caminho.
Se você é do tipo que gosta de frameworks, com tudo prontinho, essa é a lista que eu sugiro para você.

Sencha Touch – O melhor entre todos

JQuery Mobile – Funciona para apps nativas também, só que não é tão bom para diferentes telas.

LungoJS – Biblioteca bem interessante e completa que imita um pouco do jQuery Mobile, mas trabalha com a idéia de componentização.

KendoUI – Igual ao JQueryMobile, poucos componentes.

Agora se você está em um nível que prefere fazer tudo do zero já que sua App demanda isso, devido seu nível de complicação e elementos gráficos, então aqui vai algumas dicas bem interessantes.

Zepto.js – Biblioteca igual ao jQuery, só que mais leve e compatível com o Phonegap, muito rápida por sinal na hora do loop para montagem de listas.

Foundation da ZURB – Eu uso os media-queries do framework Foundation em meu CSS próprio, já que eu não quero gastar tempo calculando o tamanho exato da fluidez das coisas, eles são os melhores e coloca o Twitter bootstrap no bolso nessa questão.

Abuse e reuse bastante de Media queries, aqui vai uma maneira de como eu resolvi meus problemas nessa questão.

 

Separando cada CSS com suas particularidades e aplicando o estilo quando for necessário em cada tela. Dica Javascript Desabilite o Touch Move no body do documento, ou você vai ter problemas de redimensionamento com o conteúdo sambando para um lado e para outro, caso o usuário toque e arraste na tela.

 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

Precisa controlar melhor os gestos que são usados em sua aplicação? Você pode usar os padrões ‘touchmove’,’touchTap’,’swipeLeft’,’swipeRight’, mas você está acostumado com a sintaxe do JQuery ou ZeptoJS, por que não continuar com isso?

O HammerJS é uma biblioteca para isso, muito útil nas dificuldades de implementar gestos em containers que possuem gestos internos já existentes.

O que o phonegap se propoe é lhe ajudar a acessar recursos nativos do aparelho, e isso ele faz com louvor. O que ele não faz é te dar de mão beijada a interface ou componentes que serão usados para criar uma app móvel. É nessa parte que você se pergunta o por que.

Então, da próxima vez que você for criar Apps móveis com tecnologia HTML, leia esse post ou indique à um amigo. Vai salvar alguns dias em seu calendário apertado de entregas.