DGmike

Estava com um tempinho sobrando e estudando sobre html5, css3 e vi que algumas pessoas já começaram a desenhar com as técnicas de cantos arredondados do css3. Decidi fazer a minha versão do logo daqui do vírgula.

O portal vírgula ganhou uma versão do seu símbolo em HTML5 e CSS3

Claro que não funciona no Internet Explorer, mas funcionou em google Chrome, Opera e Firefox no meu linux ubuntu. Também não testei no IE9, mas quem se importa?. E aí na sua máquina, funcionou?

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.

Comecei agora há pouco no meu novo emprego. Conheci a equipe e o ambiente de trabalho. Parece ótimo. Nada melhor para começar um novo emprego que algumas linhas de comando no git.

Primeiro presciso guardar em uma tag segura a minha vida.

Agora, criar um branch novo. Vazio.

Desde que o Ederson @peka me apresentou o meadiciona.com adotei como ferramenta de gerenciamento de contas e sempre passei, nos meus e-mails e contatos, o meu perfil do programa. Mas como desenvolvedor, sempre achei que deveria existir uma maneira de conseguir resgatar esses dados de forma fácil.

O meAdiciona.com é uma ferramenta desenvolvida com o intuito de facilitar sua vida. Tudo que você precisa dizer é meadiciona.com/voce.

Não aguentando mais esperar por uma API definitiva, resolvi escrever uma própria parseando o código html do meu perfil e verificando o perfil de alguns amigos, que poderiam ter menos ou mais informações diversas. Descobri também que os contatos como e-mail e texto puro são trabalhados de forma diferente no html gerado no site, sendo que o e-mail simplesmente não é gerado. Ele é passado por um protocolo de segurança não fácil de interpretar (a partir de AJAX) para que robôs (como o meu) não peguem facilmente. Decidi deixar de lado em prol da segurança do meadiciona. Então esta API não foi projetada para pegar os e-mails, ok?!

Para usar, basta requisitar a URL http://util.dgmike.com.br/meadiciona/[perfil].json. Hoje estou liberando apenas JSON e não pretendo liberar outra forma por enquanto, já que esta me serve com bastante tranquilidade. Veja como é fácil pegar essa informação via PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13

$saida = file_get_contents('http://util.dgmike.com.br/meadiciona/dgmike.json');
$perfil = json_decode($saida);
if ($perfil->r) {
    echo '<h3>'.$perfil->data->nome.'</h3>';
    echo '<p>'.$perfil->data->desc.'</p>';
    foreach ($perfil->data->servicos as $servico) {
      if (!$servico->url) continue;
      echo "<a href='{$servico->url}' style='float:left; width: 190px; height:35;text-align:center'>";
      echo "<img src='{$servico->img}' title='{$servico->title}' height='32' />";
      echo "</a>";
    }
    echo '<br style="clear:both;" /><small>Powered by <a href="http://meadiciona.com/dgmike">meadiciona.com</a></small>';
}

O código de como usar a API do meadiciona.com não oficial está disponível no gist do github, caso você queira passá-lo adiante. O resultado está logo abaixo, com o meu perfil, é claro!

Michael Granados (dgmike)

Falar de mim é como falar de você, só que um pouco diferente…

Powered by meadiciona.com

Nota: Este desafio não tem o intuito de dar qualquer prêmio. Se você chegou aqui querendo levar um mp3, um ipod, um carro, uma assinatura no campus online da Visie, um código promocional do PagSeguro que faça você ganhar porcentagem de vendas. Nada disso! Quero apenas estigar a comunidade JavaScript.

O meu amigo Rafael Zamana estava vendo suas novas aquisições da apple store e resolveu me mostrar o novo “brinquedinho” que ele tinha acabado de comprar. Quando vi não resisti e falei: “A-NI-MAL”. E ele falou, também acho. E eu retruquei, “não, animal é essa forma como a apple mostra o produto”. NERD é #phoda.

É uma solução mais interessante que a lightbox comum que vem sendo usada por várias soluções web. Como estou sem tempo algum para fazer qualquer script bacana como este, resolvi deixar a comunidade fazer um e dar os “louros” para a melhor solução. Então, resolva o problema e faça uma galeria de imagens como esta e quem sabe um dia os novos e-commerces saiam do forno com sua solução ;D

Update: O @_inside fez uma versão muito legal do desafio. Ele disse que vai tentar fazer uma versão para virar plugin. Hoje, o Gabriel, do souagil.com.br enviou sua versão com mais alguns detalhes. Os dois estão de parabéns, as versões ficaram ótimas, espero que a partir deste desafio nasça uma nova forma de fazer lightbox.