Leandro Garcia

localStorage, armazenar informações do usuário no front-end sem cookies

leandro garcia — Tue, 24 Apr 2012 17:42:06 +0000

Vocês já se depararam com a necessidade de armazenar algum tipo de informação do usuário, como o nome, por exemplo (No Front-end)?

É uma pergunta que acredito que a maioria das pessoas deve dizer que sim, afinal, nada mais comum, que o front-end de uma aplicação precise mostrar algum conteúdo repetidamente em várias páginas do site. Pode-se pegar essa informação do próprio back-end a cada necessidade, mas se estiver no front-end, é bem mais rápido e menos custoso.

Para fazer isso, geralmente usamos o um cookie. Funciona corretamente, nada contra, mas o HTML5 trouxe uma ferramenta melhor e mais rápida, o localStorage. Que nada mais é do que o armazenamento de uma string no cache do navegador.

Chave -> Valor

Essa é a idéia, ou seja, passamos uma chave, que é a que podemos requisitar e o conteúdo que desejamos armazenar, simples, não??

Inserir um item

localStorage.setItem('chave', 'valor');

Recuperar um item

var conteudo = localStorage.getItem('chave'); //Inserindo como o exemplo acima, a variável conteúdo receberá o conteúdo valor.

Excluir a chave

localStorage.removeItem(çhave')

Para excluir todo storage para o site

localStorage.clear();

Além da velocidade de gravação e recuperação de conteúdo, há uma outra vantagem em relação ao cookie, a quantidade de dados que se pode armazenar. Em um cookie pode-se armazenar cerca de 4KB de dados e em localStorage, embora varie de navegador para navegador, temos geralmente alguns megas. O local Storage fica armazenado no navegador até limparmos o cache ou a aplicação solicitar a exclusão do mesmo.

Javascript para principiantes ou esquecidinhos. Aula 8 – Criando ou excluindo um elemento

leandro garcia — Mon, 23 Apr 2012 18:10:24 +0000

As vezes a gente se depara com a necessidade de se criar um elemento dentro de um DOM, como por exemplo uma nova linha dentro de uma tabela, para isso existe um comando, o ‘createElement’. Ja quando precisamos remover um elemento usamos o ‘removeChild’.

Inserindo um Elemento

Com o createElement conseguimos criar qualquer elemento dentro de um alvo, que pode ser uma div identificada (id), por exemplo ou até no corpo do documento.

var elemento = document.createElement(tagName);

a variável elemento recebe o novo elemento criado (tagName), por exemplo, uma div.

var novaDiv = null; //Inicia a variável div

function adicionarElemento(){
  novaDiv = document.createElement("div");
  novoConteudo = document.createTextNode("Olá mundo!");
  novaDiv.appendChild(novoConteudo); //Adiciona o conteúdo da variável novoConteudo para a div que criamos

  alvo = document.getElementById("divAlvo"); //Seleciono a div com o id 'divAlvo'
  document.body.insertBefore(novaDiv, alvo); //Adiciona a nova div antes da div alvo 'insertBefore'.
}


   O texto acima foi adicionado dinamicamente

Removendo um elemento

Para remover um elemento, precisamos selecionar o alvo e o elemento pai deste alvo, por exemplo a div id pai, e a div id filho.

elemento.removeChild(filho);

function removerElemento(){
   var d_pai = document.getElementById("pai"); //Seleciona o elemento pai
   var d_filho = document.getElementById("filho"); // Seleciona o elemento filho
   var excluir = d_pai.removeChild(f_filho); //Exclui o elemento
}


   
     Div Filho
   


Remover

Continuando a falar sobre desenvolvimento mobile, por que IOS?

leandro garcia — Fri, 30 Mar 2012 22:48:13 +0000

Tem uma coisa que percebi desde que comecei a desenvolver mobile, a maioria, ou melhor a enorme maioria dos layouts das páginas mobile contemplam apenas IOS ou iPhone.

Eu vejo isso como uma falta de visão do todo. IOS é uma enorme parcela dos acesso por mobile, mas não é o único, Android está crescendo bastante. Seria interessante pensar no site também para Android, Symbian ou Blackberry. É fato que não faz sentido ter uma versão para cada aparelho, até porque seria impossível, mas da para se trabalhar com layouts mais genéricos que se adaptam à resolução dos aparelhos.

Um layout fluido, funciona perfeitamente para a grande maioria dos aparelhos, e as funcionalidades também, mas deve-se prestar atenção no que colocamos no site, afinal nem todas as plataformas trabalham bem com javascript ou são otimizadas para isso.

O mundo está conectado, então porque seu site ainda não é mobile?

leandro garcia — Fri, 30 Mar 2012 22:39:04 +0000

É comum caminhar na rua, shoppings, praia, ou até no transito e ver pessoas navegando na internet através de notebooks, tablets e principalmente celulares smartphones, mas a maioria dos sites não estão preparados para isso, porque?

Não sei, mas desconfio que isso se deve à falta de visão dos donos dos site e dos desenvolvedores. Já me deparei com vários projetos em que a versão do site mobile não é contemplada, sempre que eu questionei tie respostas como, não é necessário, não terá retorno, ou nosso público não se interessa, é verdade? Talvez até seja, mas você vai perder acessos apenas por não ter uma versão mobile?

Não sou dono da verdade, tenho apenas minha opinião, afinal, por que não fazer uma versão mobile mais leve, ou pelo menos que a versão web se adapte a telas menores.eu proponho que todos os sites tenham uma versão mobile, ou que todos os projetos tenham em sua proposta a versão mobile. No custo geral, não vai aumentar muito e os ganhos podem ser bem interessantes.

Basta caminhar na rua para ver que a tendência é cada vez mais as pessoas estarem conectadas e com certeza isso vai aumentar, uma vez que o valor pelo acesso a internet 3G está diminuindo, assim como o valor dos smartphones.

Você já testou seu site em um celular?

leandro garcia — Fri, 17 Feb 2012 19:05:43 +0000

Para quem está desenvolvendo uma versão mobile de um site é uma ferramenta bem interessante.

As vezes não temos um celular na mão pra testar um site que estamos desenvolvendo ou apenas temos curiosidade para ver como um site se sai em um dispositivo desses.

O Google lançou uma página com informações sobre a importância de ter uma versão mobile dos sites.

Aqui em baixo uma imagem do teste que fiz com este blog.

http://www.howtogomo.com/en/#test-your-site

Tenha uma versão mobile do seu site

leandro garcia — Fri, 17 Feb 2012 18:25:49 +0000

O Google lançou um site com diversas dicas e informações sobre o porque ter uma versão mobile de seu site.

Está em inglês, mas mesmo para qeum não domina o idioma vale muito a pena das uma conferida.

http://www.howtogomo.com/en/

HTML5

leandro garcia — Wed, 15 Feb 2012 20:51:13 +0000

Muito se fala nos dias atuas sobre o HTML5, esta versão trará grandes evoluções na maneira de se escrever internet, eu digo trará, pois a especificação ainda não está completa, mas já é possível usar muitas funcionalidades.

Um dos intuitos do HTML5 é deixar a web mais semantica, mas o que é web semantica? A web semantica ainda não existe, está a caminho. É uma maneira com que os computadores possam entender sobre o que se trata um deerminado site, por exemplo. Hoje a categorização de um site é feito através, entre outras coisas, de link building, ou seja, sites que linkam um site tem algum tipo de relação com esse site e sites que este site linka tem uma relação de cnteúdo com este site, mais ou menos isso. Com a websemantica, um buscador, digamos o Google, conseguirá entender o conteúdo de um site pela forma como é escrita. Temos ums página da web com uma receita de bolo da cenoura. Com a web semantica o Google conseguirá entender, por exemplo que 1 xicará de farinha é um ingrediente de uma receita e não um texto, dará sentido a coisa.

Passada essa explicação da web semantica, vamos a algumas das vantagens.

Consegue-se o que é um cabeçalho de página

, o que é uma seção do site

, um artigo

, uma barra lateral, como está aqui ao lado

, o que é um rodapé

Tem diversos outros pontos em que o HTML5 melhora a vida do desenvolvedor front-end, podendo tornar a web mais interativa, agradável, etc. No Post anterior, há um exemplode um jogo feito com HTML5, muito legal. mas não é HTML5 por si só, mas as possibilidades que ele trás para usar Javascript.

Muitos desenvolvedores front-end, inclusive eu, vislumbramos com o HTML5 uma internet mais leves, com poucas imagens, mas acessível à pessoas com deficiência.

Hoje já é possível utilizar HTML5 na maioria dos browsers, Firefox, Chrome e até IE, mas à partir da versão 9, para as versões anteriores temos um truque que faz funcionar, um código Javascript que adicionado ao head do HTML permite o uso dos elementos no ie7 por exemplo.



O HTML 5 não está completo ainda,mas já está revolucionando a WEB.

Cut the Rope em HTML5

leandro garcia — Wed, 11 Jan 2012 13:31:14 +0000

Para quem não conhece, Cut The Rope é um Jogo de culular muito bacana. Laçaram em HTML5, muito legal.

vi no Webappers

http://www.cuttherope.ie/

Conhecendo São Paulo

leandro garcia — Thu, 05 Jan 2012 12:57:41 +0000

Há alguns anos, tive uma idéia de fazer um site que mostrasse locais de São Paulo, coisas a ser fazer na cidade de São Paulo.

Deixei o projeto de lado por um bom tempo e no fim do ano passado resolvi retomá-lo. Decidi usar o wordpress como publicador de conteúdo, organizei as coisas, consgui os textos, etc.

O resultado pode ser visto aqui abaixo.

Link: www.conhecendosaopaulo.com

App Mobile, Lista de Supermercado

leandro garcia — Mon, 02 Jan 2012 18:13:02 +0000

Em 2011 eu participei de um projeto para desenvolvimento de páginas mobile para iPhone e Android, desde lá, busquei alguas informações sobre o assunto e me bateu uma vontade de criar um aplicativo mobile.

Seria interessante escrever um aplicativo em Objective-C para iPhone, mas a curva de aprendizado é grande e é necessário um mac para isso, eu não tenho Mac, trabalho com Linux. A solução foi fazer um aplicativo web mobile, aqueles que são acessados via web.

Comecei a pensar em o que fazer, fiz um brainstorm comigo mesmo, se é que isso é possível, e acabei decidindo por fazer uma lista de supermercado. Tive várias idéias, que ainda serão finalizadas, mas para terminá-las demandaria um bom tempo, pensei numa forma de lançar uma versão inicial, apenas com programação front-end, em PHP ou banco de dados, mas como armazenar a lista sem banco de dados? Lembrei, local Storage (ainda vou escrever sobre isso). Estudei um pouco e acabei conseguindo usar, bem fácil por sinal.

Lancei o Alpha para os amigos testarem, mas eu não estava contente ainda, pois para funcionar depende de internet.

Já tinha ouvido falar de appcache, dei uma estudada e implementei. Pelo que testei funcionou bem, não fica fazendo requisições cada vez que entra no app, demanda mais testes.

Uma vez feito isso, pensei, por que não usar um framework mobile, que traria mais funcionalidades para o APP, pesquisando, achei mais de 10, fiquei entre o sencha touch e o jquery mobile, acabei optando pelo jquery mobile, pelo conhecimento que tenho em jquery. Implemente e acho que o resultado foi bem positivo. Acessem o link aqui em baixo, usem o APP e me digam o que acharam, me deem sugestões.

Link do APP