Para começar, precisamos de algumas ferramentas:
- se você ainda não tem um servidor instalado para testes, procure como instalar Apache + PHP + algum banco de dados (MySQL ou PostreSQL) na sua distribuição. Vamos precisar disso mais para frente.
- procure conhecer alguns Frameworks Javascript. Existem alguns muito utilizados que é praticamente impossível não conhecer.
- habitue-se com as ferramentas de desenvolvedor do seu navegador. No Chrome/Chromium, um conjunto completo de ferramentas já vem instalado. No Firefox, uma excelente alternativa é o Firebug.
Entre os frameworks Javascript, nessa série de posts pretendo utilizar inicialmente jQuery, por ser atualmente o mais utilizado no mundo. Você pode baixá-lo aqui e acessar a documentação aqui.
Para incluir a biblioteca jQuery na sua página, o código mais simples possível é esse:
1 2 3 4 5 6 7 | <html> <head> <script src="/path/to/jquery-1.7.1.min.js" type="text/javascript"></script> <!-- OU --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head></html> |
Dentro da tag <head>, temos duas opções: adicionar o caminho do script que você baixou (ideal para desenvolvimento local), ou utilizar o acesso que a Google fornece livremente (e que muitos sites utilizam, sendo provável que o usuário já tenha uma cópia em cache desse arquivo e sua página deve carregar mais rápido).
Depois de incluir o jQuery na nossa página, vamos fazer alguma coisa com ele. Algo simples, como acessar a API do Youtube e pesquisar pelos 5 vídeos mais recentes sobre Linux:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html> <head> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> // isso será executado ao carregar a página $(document).ready(function() { // acessa a API do Youtube e pesquisa por vídeos sobre Linux // vamos usar o formato JSON para receber os resultados (o padrão é XML) $.get('http://gdata.youtube.com/feeds/api/videos?q=Linux&alt=json&max-results=5', function(result) { // esses são os resultados retornados na pesquisa var entries = result.feed.entry; // vamos exibir os dados de cada um $.each(entries, function(index, item) { var title = item.title.$t, // o título desc = item.content.$t, // a descrição link = item.link[0].href; // o link // exibindo os dados na página // aqui você poderia formatar a saída, adicionar estilos CSS, etc. // vamos só exibir de forma básica $('body').append('<h3><a href="' + link + '">' + title + '</a></h3><p>' + desc + '</p>'); }); }); }); </script> </body></html> |
Esse é um exemplo bem simples. Repare que ao exibir os dados nós não formatamos nada. Apenas exibimos o título com link para o vídeo e a descrição. Mas a API do Youtube retorna muito mais dados, como nome do usuário que postou o vídeo, data de publicação, e muito mais! Não é o nosso objetivo aprender a API do Youtube aqui, mas eu recomendo acessar diretamente a URL que utilizamos na requisição GET e estudar o retorno do Youtube para ver o que mais é possível (caso esteja interessado).
Espero que tenham entendido o exemplo. Caso algo não tenha ficado muito claro, comentem. Se tiverem alguma ideia, comentem também! Até o próximo post.
Postar um comentário