DGmike

Você se lembra quando inserir um video em uma página web era complicado? Você prescisava usar a tag embed e colocar um arquivo .wma que muitas vezes prescisava de um plugin da microsoft para conseguir rodar. Consequentemente, o player do tio Bill carregava no Internet Explorer e deixava o usuário furioso com o consumo de memória que ele consumia.

Apesar dos pesares, era relativamente fácil inserir um video com o html4 que tinhamos na época:

1

<embed autoplay="false" src="VIDEO.wma" width="50" height="50></embed>

Videos online, assim foi que o youtube conseguiu a maior audiência do mercado web do mundo

Ainda bem que o tempo passa e, com ele, a tecnologia só melhora. Inventaram o flash e com ele o player personalizado. Pouco tempo depois nascia um dos mais visitados sites do mundo: Youtube. Mas, infelizmente se tornaria mais complicado inserir um video no seu site. Agora era necessário usar o embed de flash, que não decorei até hoje.

1
2
3
4
5
6

<object width="640" height="385">
  <param name="movie" value="http://www.youtube.com/v/ID_VIDEO"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/ID_VIDEO" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

O pior veio quando, em alguns casos, o browser bloqueava o embed e precisou-se usar algum hack em javascript para conseguir “embebedar” o flash player com suas trocentas variáveis.

Com a chegada do html5 tudo ficou mais fácil. Eu já havia explicado por aqui como se faz para inserir um video em formato .ogg em sua página. Isso foi um pouco antes do html5 estourar nas paradas de sucesso. Algum tempo depois o Youtube aderiu a essa novidade.

Mas infelizmente nem tudo são flores na vida de Joseph Climber, e agora nos deparamos com uma pergunta básica: usar video com html5 ou embed de flash player. O caso é que, dependendo da máquina/browser do usuário, o html5 (que tem muito mais vantagens) simplesmente não funciona. O youtube está convertendo, pouco a pouco os videos em formato .flv para o formato .ogg aos poucos, então quando saber que está na hora de atualizar os videos do seu blog?

Para resolver o problema, o youtube decidiu tomar as redias e “inventou” uma nova forma de colocar os videos dele no seu site/blog: através de iframes. Veja como a sintaxe fica mais interessante.

1
2
3
4

<iframe class="youtube-player" type="text/html" frameborder="0"
    src="http://www.youtube.com/embed/VIDEO_ID"
    width="640" height="385"
></iframe>

Apenas trocando o ID do video. E voilà, seu video está em seu site sem você precisar se preocupar com atualizações de versão, compactibilidade, etc, etc.

Vocês já devem ter ouvido falar no google charts. Com ele, é possivel criar ótimos gráficos para suas aplicações. Como por exemplo este aqui:

Bastando para isso, colocar uma imagem eu seu site com uma URL específica que você pode configurar facilmente.

Tá, você tem os dados e os converteu em um gráfico do google. E se você quiser um gráfico mais atraente? Talvez como este:

Talvez você não tenha ouvido falar ainda, mas o Open-Flash-Chart é o mesmo que o WordPress usa em sua tela de administração. O código não é tão complicado de entender e você ainda pode passar os parâmetros por URL. Ele também vem com um aplicador em PHP e em JavaScript para que você não se mate fazendo o código Flash que é uma meleca, sempre.

Aprofundando um pouco mais, ainda é possivel substituir o chart do google (para quem não tem javascript na máquina) para o Open-Flash-Chart facil, facil. Basta apenas um getElementById da vida, um replace e pronto você tem o seu chart turbinado. Este é um POST rápido, apenas uma explosão de idéias, então não vou codificar nada. Vou deixar vocês pensando na solução e quando eu precisar, irei desenvolver a solução e postar aqui mesmo

Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os estados e cidades nacionais. Sempre tenho que explicar uma serie de coisas como objeto httpRequest ou mesmo um mínimo de jQuery.

Pensando nos programadores do Brasil, desenvolvi este script de selects de estado e cidades do Brasil

Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (JavaScript, hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Outra vantagem é que o arquivo possui os estados e cidades no próprio core, assim não é necessário de interação com o servidor, o que deixa a resposta ao usuário mais rápida, deixando-o satisfeito. Ah, e sem falar que ele é crossbrowser e funciona com (ou sem) todas as bibliotecas conhecidas (como jQuery, prototype, dojo ou mootools) por trabalhar com apenas as funções que já existem no javascript.

Decidi hospedá-lo no servidor do google porque assim é mais improvável que hajam problemas de servidor em qualquer servidor que eu hospede. Para instalá-lo em seu site, coloque a seguinte instrução entre suas tags head.

1

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script>

Coloque este código (ou algo parecido) no seu html, para poder referenciar para a biblioteca.

1
2

Estado: <select id="estado" name="estado"></select>
Cidade: <select id="cidade" name="cidade"></select>

A forma mais simples de ativar a biblioteca é esta, usando o objeto dgCidadesEstados passando os objetos que serão serão usados como select de estados e cidades respectivamente. Veja um exemplo.

1
2
3

window.onload = function() {
  new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}

O projeto é opensource, então se sua cidade não está na biblioteca, por favor me informe que eu mesmo colocarei no projeto.

[update]

No total, são 5.560 cidades cadastradas na biblioteca, a diferença é que não está colocado cada um em uma linha (como em instruções SQL) e sim cada estado em uma linha, o que diminui consideravelmente o tamanho do arquivo, se o seu Banco de Dados tiver mais que isso, por favor envie um comentário que procurarei atualizar o banco o mais breve possível.

[update 21/06/2009]

Vi que o pessoal está com dificuldades no retorno dos dados do servidor para o JavaScript, acontece que na versão encontrada no google code existiam exemplos e documentação necessário. Então decidi “puxar” essa informação para cá, afim de ajudar quem cai aqui de pará-quedas.

Recuperando os dados

Para fazer o sistema recuperar uma informação dada anteriormente, basta passar os parâmetros estadoValue e cidadeValue dentro do construtor.

1
2
3
4
5
6

new dgCidadesEstados({
  cidade: document.getElementById('cidade2'),
  estado: document.getElementById('estado2'),
  estadoVal: 'SP',
  cidadeVal: 'São Paulo'
});

Ou então passando como atributo value em sua tag select (ou input como descrito mais abaixo).

1
2

<select id="estado1" value="TO"></select>
<select id="cidade1" value="Araguaína"></select>

1
2
3
4

new dgCidadesEstados({
  cidade: document.getElementById('cidade1'),
  estado: document.getElementById('estado1')
});

Obstrusividade?! Não!

Não é preciso que você escreva uma tag select, você pode executar usando um input que será substituido pelo select necessário. Para ativar esta opção, basta passar o parâmetro change.

1
2

<input type="text" name="estado3" id="estado3" value="MG" />
<input type="text" name="cidade3" id="cidade3" value="Viçosa" />

1
2
3
4
5

new dgCidadesEstados({
  cidade: document.getElementById('cidade3'),
  estado: document.getElementById('estado3'),
  change: true
});

Charset?!

Você não precisa se preocupar em codificação de caracteres, o cidades-estados-js é disponibilizado nas versões Latin (ANSII) e UTF-8. Para isso, basta alterar a forma como você chama a biblioteca.

1
2

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0-utf8.js"></script>
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0.js"></script>

Dê preferencia a usar o charset utf-8, mas se seu sistema não aceitar essa codificação ou você usa DreamWeaver? e nem sabe o que é isso, provavelmente você vai precisar da versão em ASCII. ;D

Nota: Vale a pena ler o artigo sobre intercacionalização de caracteres da w3c que explica mais sobre codificação, inclusive o utf-8.

Não! Não vou contar nenhuma novidade sobre o google ter lançado um novo browser no mercado. Ou fazer uma resenha do tipo “Minhas impressões sobre o Google Chrome“. Tem muita gente fazendo isso na grande web. Quero colocar minha visão atual sobre o software que pegou quase três por cento do mercado em no seu primeiro dia de vida.

O Google Chrome é um bom navegador e me ensinou algumas verdades

Tem gente dizendo por aí que o chrome não quer dizer nada para os desenvolvedores porque eles vão ter que, na verdade desenvolver para mais um browser ao invés de acabar com o problema de verdade.

Para mim, que trabalho com padrões tenho uma visão mais radical disso. Hoje sou 98% programador back end (programação PHP, MySQL, Python e outras coisas que só maluco entende), mas quando pego um projeto para fazer o front end procuro esquecer que o IE6 existe e desenvolvo para browsers. Acho que só vamos conseguir fazer o usuário ou empresas atualizarem seus browser quando ficar impossivel navegar no IE6. Sempre pensei que a necessidade faz milagres e acredito que no mundo da web isso não seja tão diferente, veja como as ferramentas evoluiram de uns três anos para cá. Mas isso é outro assunto.

Quero me focar no fato de “O BROWSER” ser uma solução inteligente para quase todos os problemas. Como qualquer desenvolvedor eu ainda uso o Firefox devido às suas extensões – pelas quais virei escravo, mas sempre que posso abro chrome para navegar.

Ele é rápido demais, minha forma de navegar na web mudou consideravelmente depois dele. Não sei como eles fizeram, mas o bixinho voa na web. E os aplicativos google então? Nooooosa! Agora sim eu posso utilizar os recursos do docs, gmail, reader, etc da forma como deveria usar há um bom tempo. O que me assusta é o fato de não poder inserir plugins, mas ele já vem com um bom gerenciador de downloads e uma “firebug” muito mais bacana (limitada em recursos, mas mais agradável) que a original.

É nesse momento que eu penso de novo na forma como virei escravo dos Add-ons do firefox, se eu parar para contar, uso mais de 40 plugins que eu considero essenciais. Isso, além de deixar meu firefox lento me faz pensar duas vezes quando penso em abrir um site mais pesado no meio de um download. Então eu me volto para o browser pokebola e percebo que dá para viver sem eles, tendo só o essencial, o que é indispensavel em um browser e ele continuar sendo rápido pra caramba!

O símbolo do Chrome é a mistura de um brinquedo dos anos 80 com uma pokebola

Bem, eu vou continuar usando os meus dois browsers preferidos como padrão, sendo um para navegar e outro para trabalhar. Ainda não vi diferenças consideráveis na renderização do CSS de um browser com outro. Encontrei uma ou troa diferença que era ajustável com no máximo duas linhas de código devido à falha do próprio desenvolvedor então acho que migrar o leque de trÊs para quatro browsers para desenvolver não vai ser tão complicado assim.

Estava vendo no deconcept um artigo muito interessante sobre a técnica de colocar flash em sites e o google conseguir ler o conteúdo, indexando-o. [update] Sei, o google agora indexa o conteúdo em flash, mas tenho bons motivos para não confiar nele ainda…

O interessante é o seguinte:

1. Os sitesearchs como o google e o Yahoo! indexarão normalmente pois o conteúdo é HTML normal.
2. Quem não tiver javascript verá o site em sua versão HTML, sem problemas.

Mas… cuidado! A pratica de SEO (Search Engine Optimization), se usado de forma incorreta, pode gerar dores de cabeça, como o banimento do Google. E não importa se você é famoso, o google não perdoa.

Enfim… vamos ao que interessa, eis o código:

<div id="flashcontent">
This is replaced by the Flash content if the user has the correct version of the
Flash plugin installed. Place your HTML content in here and Google will index
it just as it would normal HTML content (because it is HTML content!) Use HTML,
embed images, anything you would normally place on an HTML page is fine.
</div>

E, logo em seguida, o javascript.

var fo = new FlashObject("flashmovie.swf", "flashmovie", "300", "300", "8", "#FF6600");
fo.write("flashcontent");