11/01/2012 - 11:31

Cut the Rope em HTML5

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/

Enviado por: leandro garcia - Categoria(s): HTML5 Tags relacionadas:
05/01/2012 - 10:57

Conhecendo São Paulo

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

Enviado por: leandro garcia - Categoria(s): Projetos Tags relacionadas:
02/01/2012 - 16:13

App Mobile, Lista de Supermercado

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

http://mercado.leandrogarcia.com/

 

Enviado por: leandro garcia - Categoria(s): mobile Tags relacionadas:
02/01/2012 - 15:47

Meus projetos para 2012

Toda virada de ano, muitos de nós, pelo menos eu, costumo planejar coisas a fazer nesse novo ano que se inicia.

Em 2012 não é diferente. Tenho projetos, que quero terminar, coisas que quero aprender. Decidi compartilhar alguns dos meus Projetos para este ano.

1. Quero compartilhar mais conhecimento no blog, conseguir postar mais coisas, mais informações, mais tutoriais;

2. Quero aprender Ruby on Rails;

3. Quero aprender a trabalhar com os frameworks CakePHP e CodeIgniter, ambos em PHP;

4. Quero ter noções de pyton;

5. Quero trabalhar mais com mobile.  Tive uma experiência bem legal ano passado, quero melhorar;

6. Quero ler mais, ano passado li bastantes livros, mas poucos da área técnica;

7. Quero Melhorar o template mobile do blog;

8. Quero trabalhar mais com responsive Webdesign (escreverei um post em breve);

9. Quero tentar escrever um livro à partir da série de posts com as aulas para começar em Javascript (publicarei no blog, gratuito);

10. Quero fazer mais coisas com HTML5 e o que ele disponibiliza;

11. Quero Conhecer Canvas;

12. Quero principalmente, terminar mais coisas pessoais (sempre planejo bastante, começo, mas nunca termino as coisas) rs.

São Algumas coisas que quero para o este ano. Espero conseguir.

Enviado por: leandro garcia - Categoria(s): Descategorizado Tags relacionadas:
23/11/2011 - 11:14

TortoiseGit

O leitor http://leocaseiro.com.br/ sugeriu o uso do tortoiseGit para versionar códigos no gitHub ou qualquer versionado git.

Eu ainda não usei, mas pelo que li, parece promissor. Utilizar Git, costuma ser um problema, pois é necessário utilizar linha de comando e com o Windows, praticamente impossível.

Com o TortoiseGit, verionar com github, se tornaria bem masi fácil

Enviado por: leandro garcia - Categoria(s): versionamento Tags relacionadas:
01/11/2011 - 12:05

Comprimir O JS

 

Uma das boas práticas que podemos adotar para agilizar o carregamento de  uma página é comprimir o css e o js. Essas compressões, costumam, retirar os comentários. as quebras de linha e às vezes até alterar o nome de variáveis de escopo, alterando as para por exemplo “a”.

Uma das principais ferramentas que conheço é o YUI compressor. Tem um site que utiliza essa ferramenta para comprimir o JS. Aconselho o uso, mas devemos sempre ter a versão sem otimização para alterar caso necessário.

O site é o http://jscompress.com/.

Fica a Dica!

Enviado por: leandro garcia - Categoria(s): dicas Tags relacionadas:
28/10/2011 - 18:14

Programador Front-End, por onde começar?

Recebi um e-mail do Rodrigo Pereira me pedindo dicas para começar a trabalhar com desenvolvimento front-end.

O front-end é algo que muito aprecio e ao responder para ele me empolguei e acabei escrevendo um post e colo aqui abaixo.

O que um programador front-end deve saber?

 

São três itens básicos que um programador front-end deve saber.

HTML

Um programador front-end deve saber bem HTML, o HTML 5 ainda não é necessário saber bem, mas em pouco tempo será. Ainda não é, pois depende dos navegadores e o principal ainda é o ie e apenas a versão 9 do ie aceita HTML 5, embora tenha como burlar nas demais. Mas atente-se a aprender bem HTML.

CSS

CSS é necessário, pois é onde a “beleza” da página acontece. Saber é necessário.

Javascript

Dos 3 o javascript é o menos importante, mas é de extrema importância, uma vez que é com javascript que fazemos as interações da página.

Isso é o básico.

Agora vem coisas importantes:

 

Tableless

Tableless é primordial, pois não dá pra codificar um layout com tabelas, elas não foram feitas para isso.

Quando alguma pessoas lêem tableless acreditam que não se deve usar tabela em hipotese alguma, não é isso. Pode usar sim, mas pra fazer uma tabela e não um layout. Ex A tabela de medalhas do Pan, se usa tabela. Errado seria usar outra coisa.

DivLess

É comum quando as pessoas migram a programação de tabela para tableless sairem colocando div em tudo, não se deve fazer isso, embora seja menos ruim que tabela, existem diversas tags em html para diversas coisas nas quais se encaixam melhor. O HTML 5 tem tags melhores, mas semânticas, mas não temos que nos atentar a apenas essas, por exemplo se você tem um título de uma notícia, deve se usar os Hs h1, h2, h3, h4, h5, h6, Um texto deve conter parágrafos <p> e assim por diante.

SEO

Não precisa se aprofundar nisso se não for a área com que você vai trabalhar, mas uma noção é importante, por exemplo saber onde colocar as tags, o que se deve fazer para melhora e o que não se deve fazer em hipótese alguma.

WebSemantica

Websemantica é uma coisa que ainda não existe, no sentido que a idéia original da web semantica é o computador entender o conteúdo e conseguir dar opções semelhantes. Mas não devemos nos atentar a isso. Devemos trabalhar a semantica da página no sentido de melhorar o fluxo da informação. A semantica é dizer ao computador o que é cada coisa e para isso devemos escrever nosso código o melhor possível. Isso quer dizer, usar as tags certas para a coisa certa, nomear corretamente as classes e ids, um id deve ser único em uma página, etc.

jQuery

Veja, o que vou escrever aqui, é a minha idéia, mas conheço outros progrmadores que pensam diferente.

Primeiro, conhecer bem javascript normal antes de usar um framework, pois se de cara você aprender um frameworks, pode se tornar complicado aprender outros frameworks, aliado à isso, você pode ter que participar de algum projeto em que não se possa usar qualquer framework e ai? Ou ter que usar o mootoos ao invés de jquery, são muitas variantes.

Na minha opinião, você não precisar ser um expert em javascript pra usar jquery, mas conhecer bem o básico.

Fora isso, usar jQuery é mais do que recomendado.

Lógica de programação

Embora para front-end não seja um pré-requisito ou não tão necessário quanto para back-end, eu acredito que ter uma boa lógica de programação auxilia o fronten dev na execução de um melhor trabalho, principalmente com JavaScript.

Ler

Um bom programador Front-end deve estar sempre antenado no que está acontecendo na área. Ler é fundamental. Há alguns livros bons, mas eu considero que se você tiver que escolher entre ler um liro ou blogs de programação, leia os blogs, costumam ser mais atuais.

Fazer

Não existe melhor escola para aprender do que fazer. Quando eu estava aprendendo, eu costumava escolher um site que eu gostasse e tentava refazê-lo. Outra coisa que eu costumava fazer e ainda faço, é ver o código dos outros. Abro o fonte dos sites e tento entender o que o front-end que desenvolveu fez. Aprendemos bastante assim.

Faça diferente

Se você já fez uma coisa, se der tempo refaça, você vai se surpreender como você pode melhorar o que você fez antes. Se não tem tempo, mas tem que fazer uma coisa parecida, não tenha preguiça, refaça o código ou ao menos tente melhorá-lo.

FireBug.

Firbug, é um complemento do firefoz que auxilia o front-end dev a fazer o site, uma vez que com ele conseguimos simular situações conforme vamos fazendo. tipo almentar o texto e ver o que aontece, mudar cor tamanho de fonte, essas coisas direto no navegador, é excelente. Existem equivalentes para chrome, Safari, Opera e até IE, mas o melhor é o FireBug, só que é um pouco pesado.

Navegadores

Você deve conhecer os principais navegadores, não que dizer que você tenha que usá-los, mas deve conhece-los, pois toda interface programada deve ser testada nos navegadores, IE, FireFox,Chrome, Safari e se possível no Opera. Pois são os mais utilizados, inclusive em versões anteriores do ie, pelo menos até a versão 7, já que a maioria das empresas pararam de dar suporte à versão 6.

De todos os navegadores, a maior diferença dá entre o ie e os demais. Os demais não mudam muita coisa.

Concluindo

A área de desenvolvimento web está em alta, está muito boa para trabalhar, desde que você não tenha medo de ter que trabalhar de fim de semana as vezes e até ter que virar a noite. É raro, mas acontece.

Eu programo PHP, já programei outras linguagens, mas o que eu gosto mesmo é do front-end é onde me sinto realizado. Onde eu consigo ser diferente, fazer coisas diferentes.

Nunca se atenha só a seu trabalho. Faça coisas deiferentes do seu trabalho, exemplo se você nunca programou um blog, programe um fora do trabalho.

Saia da Zona de Conforto.

Enviado por: leandro garcia - Categoria(s): dicas Tags relacionadas:
14/10/2011 - 18:28

Blog do Garcia na Chrome Web Store

Acabei de publicar um aplicativo na Chrome Web Store. Agora vocês conseguem colocar o blog do Garcia para acessar direto do seu navegador Chrome.

 

Para instalar é só acessar o endereço: https://chrome.google.com/webstore/detail/fahinlhmlookaaafkfolpdpfgbipieba?hl=pt-BR&hc=search&hcp=main

Enviado por: leandro garcia - Categoria(s): dicas Tags relacionadas:
14/10/2011 - 17:21

A melhor maneira de aprender Javascript

Tem um site que acompanho chamado nettuts, que possui diversos tutoriais sobre diversas coisas, uma dessas é sobre  a melhor maneira de aprender javascript. Vou tentar sintetizar o eles recomendam. Eu recomendo seguir este site. :)

Item 0: Entender o que JavaScript é e não é

Javascript não é jQuery, Java ou flash. JavaScript é uma linguagem do navegador. Sua primeira proposta é adicionar interatividade à páginas estáticas. Não substitui PHP ou Ruby. Nem mesmo HTML ou CSS, é usado em conjunto. Talvez você tenha ouvido falar em jQuery jQuery não é Javascript ou não substiui o javascript. jQuery é uma ferramenta de trabalho escrita em Javascript, ou seja, você programa javascript sem jquery, ams o jQuery pode facilitar sua vida.

Item 1: Aprender através de screencasts

O site http://learn.appendto.com/ tem uma série de screencasts interessantes para iniciantes.

Item 2: Ler uma boa introdução de JavaScript

Uma introdução ao Java Script – Mozzila

Eloquent JavaScript: A Modern Introduction to Programming

http://rockablepress.com/books/getting-good-with-javascript/

Item 3: Instalar e aprender FireBug ou Devlopers Tools

Uma vez que você começou à trabalhar com javascript no navegador, instale o firebug para aprimorar seus conhecimentos. Tempos atrás eu fiz um post sobre Firebug, leia-o, é interessante. Leia o wiki do Firebug, leia sobre o developer tools.

Item 4: Ler um livro

Presumindo que você já está familiarizado com a linguagem, agora é hora de ler um livro à respeito. Os que acho mais interessantes são da editora O’reilly

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)

JavaScript 24-Hour Trainer (Wrox Programmer to Programmer)

JavaScript Patterns

Item 5: Construa alguma coisa

Este item eu acho o mais importante. Para você ser bom, você tem que fazer. Faça uma lista de tarefas, uma galeria de fotos, uma caixa que se move, sei lá, faça algo e depois tente melhorar o código

Item 6: Aprenda alguma biblioteca JS

Usar uma bilbioteca ou framework traz uma agilidade enorme para o desenvolvimento das coisas, mas acredito que para você ser bom em alguma biblioteca você deve aprender Javascript tradicional, pois em algum momento você pode ser desafiado à fazer alguma coisa sem a biblioteca que você está acostumado.

Item 7: Acompanhe os melhores

Ler é a melhor maneira de você evoluir na programação e para ler, nada melhor do que ler o que os melhores postam. no post http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/, há uma série de excelentes programadores que tem muito a ensinar. Leiam seus blogs.

Enviado por: leandro garcia - Categoria(s): dicas, JavaScript Tags relacionadas:
11/10/2011 - 17:37

Otimização de Script – Utilize Switch à if else

Olá, há tempos li em um livro da oreilly sobre otimização que devemos preferir o uso de switch à if else sempre que possível. Comentei isso com o @gserrano tempos atrás e ele fez um teste, está no blog dele. Dêem uma olhada vale a pena.

http://andafter.org/blogs/odesenvolvedor/publicacoes/switch-no-javascript.html

Enviado por: leandro garcia - Categoria(s): Otimização, Praticas Tags relacionadas: