8º Encontro FEMUG SP + 8º Encontro Mobile Dev Group São Paulo

Olá pessoal venho anunciar o nosso primeiro encontro do ano, esse encontro será uma parceria com o grupo FEMUG-SP. O grupo organizado pelo Daniel Filho, para quem não conhece o grupo vai uma breve descrição:

O “Front-End Meet-Up Group” é um projeto que nasceu da necessidade de unir os desenvolvedores Front-End de São Paulo, e então tornou-se uma idéia coletiva, para que o acesso à informação seja feito em qualquer lugar que haja interesse do aprendizado.

 

O FEMUG realiza encontros periódicos sem um local fixo cada mês uma empresa fica responsável por seder o espaço para o evento, neste mês o encontro será realizado na BlackBerry. O Tema ainda não foi definido, ele é fechado dias antes do evento, para acompanhar a discussão sobre o encontro acesse a lista no seguinte link: http://bit.ly/FEMUG-SP

As conversas sobre o encontro começaram no ano passado Demian Borba, conheceu Daniel Filho no FEEC Brasil em Recife, isso mesmo em Recife nós conhecemos o grupo de São Paulo. E nesse mês será um prazer receber o FEMUG nas instalações da BlackBerry Brasil, também convidamos os integrantes do Mobile Dev Group São Paulo participarem do encontro. Quem não acompanha o nosso Dev Group no Facebook vai perguntar “Que grupo é esse?”. No final do ano passado em uma reunião realizada entre os managers do Brasil decidimos mudar o nome dos grupos de “BlackBerry Dev Group” para “Mobile Dev Group”.

Essa mudança visa abrir os grupos para desenvolvedores de outras plataformas, com o foco no enriquecimento do conhecimento entre os desenvolvedores independente da plataforma, atualmente temos muitas tecnologias convergentes em várias plataformas, por exemplo, AIR, Unity e Phone Gap. O Apoio da BlackBerry aos grupos continua com o mesmo foco os desenvolvedores.

E agora chega de “Blá Blá Blá” vamos ao que interessa o encontro será nesta Quarta-feira, 15 de Janeiro de 2014 às 20:00h no Escritório da BlackBerry Brasil:

Centro Empresarial Nações Unidas, Torre norte – 35º andar
Av. das Nações Unidas, 12901 – Itaim Bibi
São Paulo

Interessado em participar do evento por favor se inscrever no seguinte link: http://www.eventick.com.br/femug-sp-8

E até lá pessoal.

 

 

 

Limites do LocalStorage

Sempre quando falo de localStorage as pessoas me perguntam: “Qual o limite do LocalStorage?” sempre respondia o valor padrão de 5MB, mas esse valor é apenas uma especificação da W3C. Segundo ela:

A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future.

Ela sugere(não é obrigatório) que o espaço reservado por origem seja de 5MB e no futuro esse limite pode ser atualizado, a origem citada anteriormente no caso é por cada domínios. As variações a1.exemplo.com , a2.exemplo.com , a3.exemplo.com são considerada a mesma origem.

Em nosso caso o espaço disponível para o localStorage em aplicações em HTML5 na plataforma BlackBerry 10 é de 25MB, para armazenamento de texto 25MB é muita informação. Caso chegue ao limite do armazenamento será levantada uma exceção : QUOTA_EXCEEDED_ERR.

Caso queria saber o limite de armazenamento do seu browser, existe esse teste online: http://arty.name/localstorage.html

Segundo o site citado acima podemos modificar o limite de armazenamento no Opera, Firefox e no Chrome/Safari/IE

Utilizando localStorage para armazenar dados no Device

localstorage

No HTML5 uma features mais utilizada para aplicações móveis é o armazenamento local. Ou DOM Storage como é chamado, ele foi introduzido na especificação da Web Applications 1.0 depois também adicionada na especificação da W3C Web Storage. Com o DOM Storage podemos armazenar dados do usuário no device de forma fácil e segura, em comparação aos cookies, esse recurso era a única opção de armazenamento local sem o uso de plugin foi fortemente utilizado quando o HTML era somente para Desktop.

LocalStorage é um dos recursos do DOM Storage que vamos abordar nesse post, com ele podemos armazenar dados apenas em formato de texto, mas claro podemos contornar essa limitação. Vamos a um exemplo básico de armazenamento.

No código acima adicionamos uma variável com nome “device” que irá armazenar a String “BlackBerry”. Para visualizar se a informação foi realmente salva, vamos em developer tools em seu browser ou no “debug mode” caso esteja “buildando” em seu device, depois Resources > LocalStorage e procuramos a informação device no painel. Como podemos ver na imagem abaixo:

Captura de Tela 2013-12-22 às 13.36.22

Agora que sabemos que a informação foi salva vamos resgatar esse valor com o seguinte código:

No código acima passamos a função getItem e como parâmetro passamos a key do dado que queremos resgatar, na linha seguinte apenas damos um alert para exibir a informação.

Caso queria remover essa informação do localStorage utilizamos o seguinte código:

Agora vamos para um exemplo prático aplicando essas três funções que virmos acima, no caso: salvar, ler e excluir os dados no localStorage.

O Exemplo é bem simples ele verifica se tem o dado “name”, caso tenha, exibe o nome. Caso contrário adiciona um input para cadastrar o dado. Quando o nome é exibido também adicionamos um button para chamar a função de excluir os dados. Nos Exemplos anteriores apenas adicionamos e removemos algumas strings, para trabalhar com objetos no localStorage precisamos usar a Classe JSON, com ela é possível fazer a ponte entre texto e objetos.

No código acima verificamos se existe um dado com uma key “user”, caso exista ele resgata a informação na variável “texto” em seguida converte o texto em objeto com a classe JSON através da função parse que passamos como parâmetro o nosso texto armazenado no localStorage, na sequência adicionamos o conteúdo no body do nosso arquivo. Caso o usuário não tenha nenhuma informação salva, o código irá criar um objeto “user” e em seguida “stringificar” o nosso objeto assim salvado os dados em nosso localStorage. Esse exemplo não é muito funcional apenas exemplifica como é salvar um objeto em nosso localStorage.

Agora vamos partir para um exemplo mais funcional, vamos montar uma todo-list utilizando localStorage, desta vez vamos separar o código no arquivo todo-list.html, js/app.js e css/style.css. Caso queira baixar o exemplo ele e os anteriores estão disponíveis no gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/localstorage

Inicialmente nosso HTML:

Nosso CSS:

Detalhe para o ultimo seletor que trata quando o item da lista possui o atributo data-done igual a true, ele vai adicionar uma linha sobre o texto.

Agora o nosso JS:

Tentei comentar os pontos mais importantes do código, no exemplo acima o usuário pode cadastrar as tasks que serão vinculadas uma data, quando o usuário clica no item da lista a propriedade “data-done” muda entre true ou false. caso o usuário queira limpar sua listas de task clica no botão “Limpar tarefas…” o código irá varrer da lista os itens com valor da propriedade data-done igual a true e retirar da lista.

Além do LocalStorage temos o SessionStorage, a diferença entre os dois é que o sessionStorage como o nome sugere ele guarda as informações apenas na seção ou seja no caso de um app mobile, quando o app é finalizado a informação é removida.

Use o Input type apropriado para cada tipo de dado

Com o HTML5 foram introduzidos os novos inputs types isso representou um ganho enorme para os usuários mobile que utilizam formulários em seu app e site, utilizar o input type correto é muito importante para experiência do usuário. Nesse tutorial vou listar os principais inputs type para você utilizar em sua aplicação.

date

Este campo é preparado para receber uma data, será exibido para o usuário um calendário para cadastrar a informação. O resultado da utilização do input é o seguinte:

IMG_00000575

time

Este campo campo é utilizado para realizar cadastro de hora. Da mesma forma do date ele irá habilitar um interface adaptada para cadastro da informação.

IMG_00000576

month

Campo é similar ao date mas resgata apenas a entrada de mês e ano sem o time zone.

IMG_00000572

number

Input para cadastro específico de números, para o usuário mobile ele exibe apenas o teclado numérico como a imagem a seguir:
input_number

range

Cria um elemento slide para receber um valor dentro de um intervalo especificado pelas propriedades min e max.

range

color

Permite ao usuário selecionar uma cor específica retornando um valor hexadecimal.

IMG_00000571

url

Este elemento cria uma validação para url em invoca um teclado específico para o cadastro da info.

email

Assim como o type url esse item realiza uma validação esperando uma info com @. Caso o usuário tente cadastrar uma informação inválida teremos o seguinte alerta:

IMG_00000582

tel

Input Similar ao number com apenas números, mas com o teclado semelhante ao discador:

IMG_00000581

search

Neste campo é adicionado um “x” no canto esquerdo quando é adicionado algum conteúdo, o “x” tem a função de limpar o conteúdo. Como o nome sugere este Input é utilizado em campos de busca.

search

Esse itens além de ter o suporte no Blackberry 10 também tem suporte nas maiorias dos browsers e muito coisa nova esta vindo por ai. Além de novos inputs temos novas propriedades que será o tema do próximo post sobre input.

O código dos exemplos confere aqui :

https://github.com/fellyph/Tutorial-bbUI/tree/master/tutorial-input/www

O último encontro do ano – Dev Group São Paulo

E lá se foi mais um ano e nós do dev group São Paulo vamos comemorar mais um que se passa, muito cliche essa frase mas sempre bom confraternizar. E vamos fechar o ano com um Happy Hour especial no dia 19 de dezembro as 19h e todos estão convidados.

E o local do nosso encontro será no Ibotirama 2004:
Rua Augusta, 1236
Consolação
São Paulo

Mapa:

http://www.ibotiramabar.com.br/mapa_acesso3.html?f=q&source=s_q&hl=pt-BR&geocode=&q=rua+augusta,+1236,+consola%E7%E3o,+s%E3o+paulo&sll=-14.179186,-50.449219&sspn=104.33955,228.339844&ie=UTF8&z=17&iwloc=A

25 Days of Gifts – Décimo dia: PAC-MAN

A BlackBerry está com uma promoção de natal em sua loja, durante o mês de dezembro do dia 01 ao dia 25 a loja trará um presente por dia, e seu presente será um dos apps ou games top downloads da loja totalmente free. Então visite diariamente a loja e aproveite essa temporada.

Hoje dia 10 de dezembro temos um clássico: PAC-MAN, o game que fez parte da infância de muita gente um clássico do Atari que fez muita gente jogar até quebrar o controle em formato de manche, para os gamers novatos pode ser apenas uma lenda. Agora em sua versão mobile adaptada para touch mantém os seus sons e gráficos clássicos. Continua sendo um game obrigatório para todas as idades, atualmente licenciado pela Bandai o game normalmente custa $3,99 dólares hoje está totalmente free.

http://appworld.blackberry.com/webstore/content/40718889/?lang=pt_br&countrycode=BR

png-2

png

Para ter acesso a promo o usuário precisa acessar o game via device. Não perca essa oportunidade e boa jogatina.

Conferência web.br 2103 – Dia 01

Nos dias 18 e 19 de novembro de 2013 aconteceu em São Paulo a Web.br 2013, 5º edição conferência organizada pela W3C Brasil, o evento reuniu os principais nomes do desenvolvimento Web no Brasil. O evento aguardados por muitos, no ano passado tive a oportunidade de participar como ouvinte, com 4 trilhas durante os dois dias, cada seção com nomes bem peculiares, header, section, canvas e input. No início de cada dia, contava com um keynote principal. No primeiro dia contou com Fernanda Weiden(Facebook), falando sobre:A evolução dos sistemas de informática e Web no Brasil.

Após o Keynote principal tive a oportunidade de representar a BlackBerry com a palestra Criando aplicações de alta performance em HTML5 . A palestra foi baseada na apresentação do Demian Borba no Brazil JS, onde falei sobre o trabalho que a BlackBerry vem fazendo junto aos Tech Centers, projeto que faço parte e listei 20 dicas sobre performance para aplicações em HTML5.

Palestra de Fellyph Cintra - Foto: Peu Robles/W3C Brasil
Palestra de Fellyph Cintra – Foto: Peu Robles/W3C Brasil

Após a minha palestra foi a vez da Talita Pagani entrar no palco canvas, com a palestra sobre Jogos com HTML5, foi uma palestra esclarecedora para quem deseja entrar no mercado de games e utilizar HTML5 como ferramenta, falou um pouco sobre o cenário atual do mercado, sobre suas experiências no dia-a-dia de como é trabalhar com HTML5 para jogos, listou as novas features que se encaixam como uma luva no desenvolvimento de jogos e alguns frameworks que ajudam bastante no desenvolvimento de jogos.

Os slides da apresentação da Talita você confere aqui:

A primeira palestra que tive oportunidade do conferir após o almoço foi com Bruno Azevedo, com o tema Responsivo na prática. O palestrante trabalhou um bom tempo no terra, hoje encara o desafio de empreender a frente da empresa Marimbondo. A palestra teve o foco na web responsiva, o tema é coisa séria não é simplesmente moda. “Entregar a melhor experiência possível ao teu usuário, independente do seu dispositivo” essa foi uma citação que resume o nosso cenário atual. Com o terreno preparado o Bruno entrou na parte técnica da coisa e os slides da apresentação você pode conferir aqui:

 

Talita Pagani falando sobre jogos em HTML5 - foto de Peu Robles/W3C Brasil
Talita Pagani falando sobre jogos em HTML5 – Foto: Peu Robles/W3C Brasil

A segunda palestra da tarde foi com Diego Eis e Deivid Marques falaram sobre WAI-ARIA.

A palestra começou com uma introdução sobre as novas tags do HTML5 e seu significado semântico, tema até abordado na palestra do Diego Eis no webbr 2012, mas é sempre bom relembrar. Após a introdução sobre semântica foi a vez de abordar o tema principal WAI-ARIA, segundo um resumo da palestra do Diego:

“A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout. Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém.”

Isso estamos em uma época de muita interação online e como adaptar isso para os usuários que necessitam de acessibilidade? O Diego levantou alguns tópicos sobre o assunto algumas features e em seguida o Deivid mostrou a parte prática como implementar e como testar. Durante a palestra um deficiente visual comentou sobre a qualidade dos leitores de tela disponíveis no mercado, e falou um pouco sobre a experiência de acessar conteúdo na web hoje.

Após a palestra Diego rolou um coffee break momento para encontrar alguns amigos. Depois de recarregar as baterias com o coffee foi a vez da dobradinha da galera do loop infinito Caio Gondim e Almir Filho. Primeiro a se apresentar foi o Caio Gondim com a palestra com HTML5 Sensitivo: Seu browser no plano astral. As duas palestras foram temas em outros front ins esse ano, mas particularmente ainda não tinha visto as duas palestras, o loop infinito sempre levam apresentações bem acabas, com o assuntos bem amarrado e experimentos que deixa a galera impressionada. A palestra abordou o uso dos sensores do seu browser e como criar uma nova experiência do usuário, ou seja, não tenho muito o que comentar é ver para crer.

 

A última palestra que conferir no primeiro dia foi com Almir Filho, Com a palestra CSS Layout: ontem, o hoje e o depois.. A apresentação mostrou toda a história de como os layout eram montados, o processo de “destabelização” da web para uma pseudo “tabelização” com div’s fatiando o layout em forma de tabelas. E os novos recursos do CSS3 e o futuro do CSS3. Os novos recurso otimizam bastante a programação da amostragem do conteúdo na tela. Como dividir a informações em colunas ou porcentagens, de uma forma inteligente. Muito recurso bom já está implementado e muita coisa boa estar por vir. A palestra focou bastante nas features do CSS3 mostrando planejar e aplicar esses novos recursos, a palestra do Almir filho você confere aqui:

 

CSS Layout: o ontem, o hoje e o depois com Almir Filho - Foto: Luíza Troina / W3C Brasil
CSS Layout: o ontem, o hoje e o depois com Almir Filho – Foto: Luíza Troina / W3C Brasil

Muita gente veio de longe conferir o evento, exemplo, Qaiq Alves estudante da UFMG deu o seguinte depoimento:

“A organização do evento está realmente de parabéns pois conseguiram fazer com houvessem diversas dúvidas sobre qual palestra assistir. Com tanto conteúdo de qualidade e palestrantes daquele gabarito não tinha como ser diferente. Foi fantástico!“

Qaid Alves estudante da UFMG veio de BH conferir o evento
Qaid Alves estudante da UFMG veio de BH conferir o evento

O primeiro dia foi bem intenso todas as palestras foram de alto nível, a W3C criou uma grade perfeita, queria muito ter acompanhado todas as palestras. Espero que role alguma gravação para ver as demais apresentações.

fotos do evento você confere aqui: http://www.flickr.com/photos/nicbr/sets/72157637797171915/