Download Day 2008

Publicado em Publicado por gserrano

"Queremos estabelecer um Recorde Mundial no Guinness para o software mais baixado em 24 horas. Com o auxilio da nossa comunidade e a sua ajuda temos certeza de que conseguiremos. Quer saber como você pode nos ajudar ainda mais?"

Firefox Download Day

A Mozilla Foundation continua na sua batalha de popularizar o Firefox. Em breve, uma nova versão do browser, a 3, será lançada – por enquanto, está disponível a versão 3 Release Candidate 1 (3RC1).

E, como campanha de marketing, foi lançada o Download Day.

O que é?
A idéia é bater o recorde mundial de downloads de um mesmo software no mesmo dia. Para isso, você vai até o site e se cadastra. Você será avisado sobre a data – que segundo o site já foi definida, só falta se divulgada.

Mande o link, avise seus amigos, divulgue. Como a própria Mozilla Foundation diz: não estamos pedindo que você engula uma espada ou equilibre 30 colheres no rosto ao mesmo tempo – apesar de que isso seria incrível

Referência: http://www.brainstorm9.com.br/2008/05/29/firefox-3-quer-se-tornar-o-software-mais-baixado-em-24-horas/

SEO e como o Google posiciona seus resultados de busca

Publicado em Publicado por gserrano

SEO é o conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais nos sites de busca, segundo definição da Wikipedia.



Quando um robo de busca faz o seu trabalho, os principais levados em conta são:

– escrita semântica do código html entregue a eles, conhecido como Web standard

– uso das metatags description e keywords, aplicando conteúdo significativo para as mesmas (obs.: o Google possui o serviço, https://adwords.google.com/select/KeywordToolExternal, que analisa o conteúdo da página e sugere keywords, e o http://www.google.com/trends, onde pode-se pesquisar o histórico de busca de qualquer palavra-chave ou termo, fazendo um comparativo)

– evitar ao máximo referências inexistentes, ou link quebrados

– atualização constante do conteúdo

– termos relevantes no conteúdo da página (usar no conteúdo termos que os buscadores associam como sendo relacionados ao tema principal da página)





Google

O mais famoso sistema de buscas de site, o Google, se utiliza além desses fatores previamente citados, do conceito de Page Rank para posicionar um determinado site nos resultados das suas buscas. O Page Rank é um cálculo complexo que o Google (definidora do conceito de Page rank) não expõe, mas que se sabe que é calculado a partir da quantidade de referências (links) existentes em outras páginas e dos seus respectivos Page Ranks. Ou seja, quanto mais referências em páginas com bons Page Ranks o site tiver, melhor será o seu Page Rank, como se fosse uma espécie de votação.





Estratégias para aumentar referências ao site:

  • disponibilização de feeds (RSS): com isso, qualquer pessoa que visita o Portal CI pode assinar o feed e receber automaticamente no seu leitor de feeds as últimas notícias (ter em mente que a atualização deve ser constante, caso contrário o usuário perderá interesse em assinar o feed)
  • marketing viral: uso de redes sociais (Orkut, Facebook, Twitter, ) blogs e/ou outros serviços (Youtube) para disseminar a informação disponibilizada em um site ou ou um serviço (e consequentemente disseminam-se referências). Com isso, escolhem-se pontos estratégicos para divulgar uma determinada informação e esses próprios meios (os usuários) começam a disseminar essa informação, passando-a para frente (daí vem o uso do termo vírus, fazendo alusão de que a informação se auto-dissemina, semelhante a uma epidemia)
  • parcerias com demais sites da mesma área: contribuir com a publicação de conteúdo em outros sites e aceitar publicações dos outros sites (com isso, tem-se troca de referências entre sites que tratam de assuntos similares, agregando valor ao Page Rank)
  • facicitar a inclusão das páginas em redes sociais: possibilitar ao usuário, através de links de fácil acesso, incluir um conteúdo específico em serviços como del.icio.us, Digg, Technoratti, etc…
  • ações através de e-mail marketing direcionado a um público-alvo (que deve ser definido qual é após um estudo dizendo qual o perfil que a campanha deve atingir), hotsites, exposições pagas em outros sites, estimulando o acesso dos usuários e fomentando o marketing viral
  • disponibilização de widgets: uma nova tendência na web é a possibilidade dos usuários adicionar, a uma rede social (Orkut, Open Social, Facebook, etc…) ou start-page (hNetvibes, iGoogle) que ele participa, um determinado serviço de um site ou de outra rede social. Por exemplo, a American Airlines disponibilizou um widget, disponível para o Open Social (e em breve Orkut) com o qual o usuário pode fazer buscas de passagens aéres (http://www.google.com/ig/directory?url=www.labpixies.com/gadgads/aa/aa_ie_link_site.xml).



Google Adwords

É o serviço do Google onde palavras-chave são vendidas e, quando uma busca é efetuada se utilizando de uma dessas palavras-chave, um anúncio ( com conteúdo definido pelo cliente) é exibido na página de resultado. Usar a combinação do Google Trends (que analisa quais as palavras mais procuradas), Google Keyword Tool (que sugere palavras-chave) e o Google Analytics (serviço de análise do comportamento dos usuários que chegaram ao seu site) são importantes para definir o ponto de partida da campanha, ou seja, definir quais as palavras-chave que devem ser compradas e o formato do anúncio, bem como devem ser utilizadas no decorrer da campanha para efetuar qualquer alteração necessária.

 

Existem vários sites e blogs especializados no assunto. Indico uma boa pesquisa (nos sites buscadores! hehe) para ler mais a fundo a respeito 😉

Ajax Libraries API

Publicado em Publicado por gserrano

Mais uma vez, está lá o Google oferecendo serviços para facilitar a vida dos desenvolvedores.

Dessa vez, lançaram um serviço no qual hospedam algumas famosas bibliotecas javascript no servidor e que você pode usá-las de lá. Nesse momento, as bibliotecas disponíveis são: jQuery, prototype, script.aculo.us, MooTools e Dojo.



A forma de se utilizar é simples: primeiro você referencia a biblioteca javascript do Google:

<script src="http://www.google.com/jsapi"></script>

Depois, você precisa (1) carregar a biblioteca quer utilizar e, (2) dentro da função de callback dela, poderá utilizar a sua biblioteca normalmente, como se tivesse carregado da forma tradicional.

No exemplo abaixo, eu criei uma página que usa as bibliotecas prototype e script.aculo.us e faz uma div ser arrastável pela tela – um exemplo simples de como começar o uso da AJAX Libraries API do Google:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Libraries API</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	//1 - carrega bibliotecas prototype e scriptaculous
	google.load("prototype", "1.6");
	google.load("scriptaculous", "1.8.1");
	//2 - na função de callback, crio uma div que pode ser arrastada usando um objeto da script.aculo.us
	google.setOnLoadCallback(function() {
		new Draggable($("drag"));
	});
</script>
<style type="text/css">
	div#drag {
		width:100px; height:50px; cursor:pointer; border:1px solid #FF0000;
	}
</style>
</head>
<body>
<div id="drag">drag me</div>
</body>
</html>

 

Qual a vantagem?

Você não precisa se preocupar em estar sempre com a última versão de cada biblioteca – o Google hospedará sempre a última versão estável, e caso você não especifique qual você quer usar, ele disponibilizará essa -, terá sempre acesso às últimas (e mais bacanas) bibliotecas javascript que estão disponíveis na web e não precisar se preocupar em setar cabeçalhos de cachê, entre outras vantagens.

No site do AJAX Libraries API, há explicações de como carregar todas as bibliotecas, e referências mais específicas. Vale a pena 🙂

Fonte: http://googlesystem.blogspot.com/2008/05/google-hosts-popular-javascript.html

Como usar o Syntax Highlighter?

Publicado em Publicado por gserrano

O que é Syntax Highlighter

O Syntax Highlighter é uma ferramenta em javascript[bb] que permite que você ajude seus usuários a entenderem códigos publicados em seu blog ou site, ideal para quem quer compartilhar programações ou exemplificar e explicar alguns códigos.

O que ele faz é entender a sintaxe da programação como se fosse um editor, deixando o código mais "amigável", veja esse exemplo em funcionamento ou a imagem exemplificando o resultado.

 

Para o leitor a vantagem é óbvia: "código colorido" é mais fácil de entender, as linhas contadas facilitam o autor (no caso você)  a explicar a programação e para os leitores que querem copiar o código existe um botão específico para isso.

 

Como aplicar o Syntax Highlighter?

A aplicação é muito simples, primeiro você precisa baixar os arquivos (aqui a v versão 1.51) e pode fazer isso no Google Code.

Com os arquivos já dentro da pasta do seu site ou blo você precisa inseri-los na página que irá ter o código, segue o código:

 

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = ´/flash/clipboard.swf´;
dp.SyntaxHighlighter.HighlightAll(´code´);
</script>

 

Dica básica: cuidado com o caminho dos arquivos, qualquer caminho errado prejudicará a exibição correta do código.

Com os arquivos já inseridos na página o único trabalho que você precisa fazer é definir no seu conteúdo onde está o bloco (ou blocos) de código a serem interpretados e qual a linguagem de programação utilizada.

Para isso você pode usar textarea ou pre, eu utilizo pre, e aqui vai um exemplo do html utilizado para exibir a inclusão dos arquivos (que aparece aí em acima).

 

<pre name="code" class="html">
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/SyntaxHighlighter.css&quot;&gt;&lt;/link&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shCore.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shBrushCSharp.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shBrushXml.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
dp.SyntaxHighlighter.ClipboardSwf = ´/flash/clipboard.swf´;
dp.SyntaxHighlighter.HighlightAll(´code´);
&lt;/script&gt;
</pre>

 

O nome da tag (textarea ou pre) sempre deve ser code, e a class é que define a linguagem de programação utilizada, que pode ser:

C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Exemplo:

<pre name="code" class="vb">

Programação aqui

</pre>

Você também pode fazer algumas personalizações, selecionar o número de contagem inicial das linhas (para exibir códigos grandes, segmentados por exemplo)…

Simples e útil, né? Mais informações aqui. 😉

Traçar um ponto-a-ponto usando o Google Maps

Publicado em Publicado por gserrano

Usando a API do Google Maps como referência, fiz um html simples e funcional onde o usuário pode digitar dois endereços e traçar um ponto-a-ponto (muito semelhante ao que o Apontador disponibilizava e que lhe gerou muita fama) entre os mesmos.

O html é bem simples, contêm duas divs que receberão o mapa e as informações do ponto-a-ponto, e um formulário com os campos

<div id="map"></div>
<form action="#" method="POST">
    <fieldset>
        <label for="from">ponto de partida:</label>
        <input type="text" name="from" id="from" />
    </fieldset>
    <fieldset>
        <label for="from">ponto final:</label>
        <input type="text" name="to" id="to" />
    </fieldset>
    <input type="button" class="button" id="trace-route" value="traçar rota" />
</form>
<div id="route"></div>

O javascript, comentado, é o seguinte:

<script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>
<script type="text/javascript">
    //cria variáveis globais a serem usadas
    var map;
    var directionsPanel;
    var directions;
    //cria mapa quando página carregar
    window.onload = function() {
        //define que o mapa será desenhado dentro do elemento ´map´
        map = new GMap2(document.getElementById("map"), { size: new GSize(710,480) })
        //insere o controle que possibilita usuário aumentar/diminuir zoom
        map.addControl(new GLargeMapControl());
        //usando as coordenadas de latitude e longitude para São Paulo/SP
        map.setCenter(new GLatLng(-23.547779, -46.639366), 12);
        //define que o ponto-a-ponto será mostrado dentro do elemento ´route´
        directionsPanel = document.getElementById("route");
        directions = new GDirections(map, directionsPanel);
        //efetua a busca, quando usuário clicar no botão
        document.getElementById("trace-route").onclick = function() {
            var fromAddress = document.getElementById("from").value;
            var toAddress = document.getElementById("to").value;
            /*
            "locale":"pt_BR" é necessário ser colocado para forçar uma busca usando os maapas brasileiros
            se não for definido, será usado o padrão da conta do usuário que está usando o browser, o que
            pode provocar erros na busca
            */
            directions.load(fromAddress + " to " + toAddress, {"locale":"pt_BR"});
        }
   
    }
</script>

Observação: na primeira linha, há a chamada o javascript da API do Google Maps. Se você só for testar em um html na sua máquina, funcionará corretamente. Quando for colocar em produção, ou seja, passando por webserver, você terá que gerar uma chave pública do Google. Troque essa chamada pela chamad que será fornecida a você.

Se quiser, faça o download do html já pronto.

E não se esqueça de ver os exemplos do Google Maps, para que você possa ter mais idéias 😉