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?

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.

Primeiro presciso guardar em uma tag segura a minha vida.

Agora, criar um branch novo. Vazio.

Sim, meus caros, hoje é meu último dia na família Visie. Uma empresa que tem ótimos profissionais, alguns são os melhores que eu já vi em qualquer outro lugar. Sempre tratei a visie e seus funcionários não como uma empresa e funcionários mas como uma grande equipe, talvez como um monte de piratas, onde cada um tinha um papel importante para o bom funcionamento com o barco. E caso algo desse errado, poderíamos contar uns com os outros para o der e vier. Quando ainda morava no Rio, a minha visão de empresa ideal era exatamente essa. Minha visão ainda não mudou, acho que o trabalho e o comprometimento da equipe é o mais importante para que um projeto seja um sucesso.

Neste final de ano eu completaria meus três anos de casa e vi algumas pessoas entrando e saindo da empresa e chegou a minha vez. Todas as pessoas que conhecemos alteram a nossa vida, independentemente da quantidade. Podemos aprender com os acertos e erros dos outros e adaptar o nosso aprendizado em nossa vida. Eu sou uma pessoa que gosta muito de ouvir e falar só quando é necessário. Na visie aprendi com cada pessoa que falou um “a” para mim. Não só da equipe como um todo – inclusive o pessoal de financeiro, alimentação, vendas e todos os outros setores, mas também dos clientes.

É legal ver o crescimento de profissionais como Luciano e Daniela, que chegaram com pouca ou quase nenhuma bagagem de experiência e agora pegam grandes projetos sozinhos. É legal ver a garra de um pai de família como o Fernando Sergio e inspirar-se nele para preparar a minha. É muito legal ver o Peka vivendo a vida no seu estilo único de ver o lado bom da vida. É legal pra caramba ver como o Julio lida com os problemas sempre de uma forma amena de ser, lembrando-se sempre que para tudo existe uma solução. Legal também é ver o crescimento de Zamana – meu parceiro de longas datas, começar a entender melhor JavaScript e Python e aprender novos conceitos e mesmo me ensinar novos conceitos. É legal ver como o Ricardo passou a ter mais experiência na área de front end, mesmo trabalhando há pouco tempo na visie. E é claro, é muito legal ver o Eduardo trabalhando com o seu emacs (maluco!) e ainda assim escrever ótimos códigos.

Fora o pessoal de desenvolvimento, existe a equipe que dá todo o suporte necessário para que o nosso trabalho seja bem feito. A Paloma sempre fez o seu trabalho como uma mestra e não acredito que encontrarei outra pessoa com tanta boa vontade para fazer o que ela faz, nunca deixando a peteca cair. Lana faz o trabalho mais complicado da empresa, a meu ver, e mesmo assim consegue concluir o esperado todos os meses a fio, isso deixa qualquer um orgulhoso. A Berê sempre está disposta a ajudar quem seja e a fazer mágica as mãos. Inclusive tirei a Berê duas vezes seguidas no amigo secreto, rsss… O Paradela trabalha sempre escondido, mas sei bem como o cara consegue resolver os maiores problemas de forma simples e direta, e ainda fazer faculdade.

Bom, das pessoas que passaram pela Visie posso destacar conhecimentos como corrida de F1 ou tracking. Pude ver o lado feliz de viver a vida através de um carioca que apareceu por lá. Lembro-me bem de um carinha que tinha um conhecimento grande de matemática, mas que teve que sair para concluir seu mestrado e aprendi que existe muita coisa para ver no mundo do que só o que vemos à nossa frente. Tive a oportunidade de conhecer um nerd com bagagem de conhecimento como nenhum outro que me ensinou uma forma diferente de ver o twitter. Também tive a oportunidade de ver um ótimo programador PHP que leva uma vida social muito louca (tem colegas dos mais inimagináveis possíveis, inclusive um ex-nicaraguense) e mais normal (ou anormal) que muitas outras pessoas que não se dizem nerds. Pude trabalhar ao lado de uma pessoa ímpar que teve paciência de levar o conhecimento de git para a equipe, mas que devido à distância teve que sair da empresa. No meio de tantos, gostaria de destacar os três parceiros que tive a oportunidade de trabalhar na ACSP que deixam um vazio no peito: um japonês, um pai de família e um porra-louca!

Pela empresa, ainda palestrei ao lado dos meus ídolos no CodeShow 2010. Basicamente foi no primeiro CodeShow que conheci a Visie de verdade e alguns meses depois ingressaria na empresa. Antes de entrar, já dava aula de informática, mas na Visie tive a oportunidade de lecionar de verdade, com tecnologia de verdade, para pessoas com grande porte como o pessoal do Metro-SP. Também lecionei para grandes parceiros como o Bruno Rocha, que me mostrou o vegan e ainda o linux de uma forma diferente do que eu conhecia, começava a ver linux como linux e não como ubuntu.

Como profissional, ainda tive a oportunidade de estar dentro do complexo do UOL e de outras empresas grandes, vendo como as empresas de grande porte trabalham no dia-a-dia e desenvolver os mais variados aplicativos em mais variadas linguagens e ambientes. Pude colocar a mão em bancos de dados que eu só tinha ouvido em teoria: Oracle, Postgree, Firebird, DB2, sqlite. Tive a experiência de trabalhar em pair programing com técnicas de XP e ter conhecimento do que se chama de scrum.

Em suma, dava para escrever um ótimo livro sobre todas as minhas experiências como programador/desenvolvedor da visie. Mas chega um momento no qual precisamos dar prioridades a algumas coisas – nas quais não convém falar, e como consequência precisaremos fazer escolhas.

Gostaria de agradecer ao Elcio Ferreira e ao Diego Eis pela oportunidade de trabalhar e crescer absurdamente como profissional dentro da sua empresa. Aprendendo sempre a cada palavra que saia da boca de cada um de vocês. Quando estava no Rio, um dos meus sonhos era trabalhar na Visie. Não em uma startup, ou em uma multinacional ou mesmo em uma empresa de renome nacional ou mesmo na google. Eu queria trabalhar na Visie. Eu queria trabalhar com as pessoas que me ensinaram o que é HTML, CSS e JavaScript. Obrigado por me ajudar a realizar este sonho. Saio da Visie não com raiva ou culpa ou mesmo desanimado. Saio de lá com orgulho de ter sido um funcionário da Visie.

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

Sim, python é um tipo de cobra e também o nome de uma linguagem de programação muito poderosa.

Para quem não sabe, o CodeShow teve sua primeira versão em 2007, quando eu ainda não era funcionário da #visie. Lá, o Diego Eis e o Elcio Ferreira mostraram como fazer um aplicativo web2.0, uma biblioteca online.

Este ano, faremos o novo campus online (diga-se de passagem que o campus online foi o meu segundo projeto em python) com recursos de programação e desenvolvimento ágil. Falaremos como é a parceria entre designer e programador, como é trabalhar em equipe, o que fazer para não ter dores de cabeça. Tudo mostrando, ao vivo, como uma aplicação deve ser montada e publicada.

Funcionará assim: teremos o inicio do projeto, mostrando como a aplicação deve ficar, exibiremos as ferramentas que serão usadas: Git, HTML5, web2py e MongoDB entre outras. Depois faremos uma pausa e iremos para o coffe break – a melhor parte. Conselho: faça um bom networking. Eu entrei na empresa logo após o primeiro CodeShow. Se quiser, vamos bater um papo sobre PHP, Padrões de codificação, python, html5, pagseguro ou é claro, sobre os episódios clássicos do chaves/chapolin. (“Pepe! Já tirei a vela!”).

Logo após o coffe, os programadores irão para uma sala e os designers para outra. Pergunta: Posso estar nas duas salas ao mesmo tempo? Acho que não, mas tente… talvez a força esteja com você. Lá teremos o desenvolvimento em si. Como teremos programadores em apenas uma sala, poderemos não nos importar com termos técnicos que normalmente designers não entenderiam, como “pedra, papel, tesoura, lagarto, spock“.

No final do dia, iremos juntar as duas “equipes” para finalizar o projeto. E então enviar por ftp para o servidor publicar o novo campus online. O evento é um apoio do PagSeguro e demonstraremos, na prática, como implementar essa ferramenta usando python.

No twitter

Para quem quiser, pode acompanhar a hashtag #codeshow para saber o que está acontecendo no evento. Se quiser, fique à vontade para me seguir.

mp3

ipod

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.

Espero que ajude. Candidate-se e boa sorte

http://under-linux.org/f111/4-vagas-136137/

http://vagasnaweb.blogspot.com/2010/03/vaga-para-web-developer.html

http://vagasnaweb.blogspot.com/2010/03/estagio-em-programacao-phpmysql-sp.html

http://minascom.blogspot.com/2010/03/webdesigner-ii.html

http://informativodevagas.blogspot.com/2010/03/fbits-contrata-webdesigner.html

banco de dados

Gerar dados de forma simples como se fossem várias máquinas

É muito chato quando precisamos inserir no banco de dados vários registros para teste, você passa horas e horas apenas inserindo informações que você deve gerar de sua própria cabeça. Para resolver esse problema, existe um bom aplicativo web chamado Generate Data, onde você define a tabela e os campos e o que cada campo irá possuir.

Por exemplo, você está escrevendo um aplicativo de agenda pessoal com as seguintes tabelas:

usuario:
    id: int auto_increment
    nome: varchar(50)
 
telefone:
    id: int auto_increment
    id_usuario: int
    tipo: enum(celular,residencial,trabalho)
    numero: varchar(14)

Então, você só precisa inserir 30 registros para usuário, dizendo que o campo nome é um “full name” e ele gera vários nomes aleatórios para você não ter problemas de repetir dados.

Para a tabela telefone, coloque o “id_usuario” como um número inteiro entre 1 e 30. Para o campo tipo um valor string entre “celular”, “residencial” ou “trabalho”. E o campo numero ganhará um telefone no formato (XX) XXXX-XXXX. O legal é que o generate data dificilmente vai te deixar na mão, mas na maioria das vezes você consegue gerar registros de testes para seus projetos. Ele ainda consegue exportar os dados em vários – SQL, CSV, Excel, XML ou HTML e anda existe uma versão para download que você pode fazer rodar em sua máquina sem precisar estar online ou modificá-lo para alterar os dados que serão gerados como por exemplo, cidades e estados brasileiros. Fica a dica para aumentar sua produtividade.

Quanto um técnico ganha? Quanto você ganha? Pense nisso.

O sujeito comprou um equipamento caríssimo, que iria agilizar a produção em sua fábrica.

Após 1 mês de uso, o equipamento parou de funcionar.

Chamou todos os seus engenheiros, e nenhum deles conseguiu detectar o problema.

Desesperado, resolveu chamar um técnico de fora da empresa.

O técnico, examinando o equipamento, descobre o problema: um parafuso solto.

Apertou o parafuso, ligou a máquina e esta voltou a funcionar normalmente.

Apresentou a conta de Dez mil dólares.

O dono da empresa ficou espantado, alegou que não tinha como justificar esse preço absurdo, mas mesmo assim resolveu pagar, mediante descrição do serviço na nota fiscal.

O técnico então apresentou a nota fiscal com a seguinte descrição do serviço prestado:

Visita técnica: valor – cortesia

Apertar parafuso: US$ 10,00

Saber qual parafuso apertar: US$ 9.990,00

Recentemente meu apartamento tem passado por modificações, pintura, armário embutido, televisão acoplada e você sabe que quando tem mudança muitas coisas acabam quebrando. Bem, a hélice do meu ventilador de parede quebrou e eu tive que chamar a assistência técnica para arrumar outra hélice e colocá-la no lugar.

Como no meio do caminho estávamos pintando o quarto, decidi pedir para o técnico que veio em casa para colocar a hélice para passar o fio da tomada para o ventilador – menos de um metro, e fazer a instalação (passar o fio por dentro do tubo do ventilador. Não precisava nem fazer instalação elétrica, o ventilador já estava instalado, bastava apertar os parafusos na parede e passar o fio. Eis que ele me solta: “O custo desse serviço é de R$ 50,00 e eu precisarei voltar aqui outro dia para fazê-lo.” Claro que ele não falou com essas palavras, mas o resumo é esse. Respirei fundo e falei: “Não, ok! Pode deixar que eu faço.”

Bem, isso me fez refletir muito sobre o meu trabalho. E a pergunta inicial é “quanto devo cobrar sobre o meu trabalho“. Procurei, pesquisei, me informei com pessoas mais experientes e descobri o seguinte: não existe formula certa para o cálculo. Conversei com algumas pessoas e cheguei a um consenso de como fazer um orçamento sem ter prejuízos e o cliente ainda sair satisfeito pagando um valor justo.

Imagine a seguinte situação: A vizinha – dona de um restaurante, pergunta para você: “quanto custa fazer um site?” (isto já me aconteceu algumas vezes) e a pessoa não espera que você diga, “Passa na minha empresa depois para tomarmos um café e analisarmos sua situação, talvez cheguemos a um consenso comum em que você e eu sairemos satisfeitos com a proposta.” Muitas pessoas que recebem esse tipo de pergunta nem tem empresa para poder dar essa resposta – apesar de parecer a resposta mais sensata, então acabam soltando um numero aleatório qualquer, “sei lá… mil reais”. É aí que está a falha, você não sabe quanto trabalho vai levar, então quanto você deve cobrar? O que acontece é que depois de fechado o trabalho você se vê na condição de fazer tudo o que o cliente deseja: barba, cabelo e bigode. Tudo pelo preço já embutido. Oras, um site é um site, né?

Bom, não é uma fórmula nem a pura verdade. Cada um faz seus orçamentos como achar melhor, mas da forma como vou explicar talvez ajude você a não entrar em enrascadas ou a … Por incrível que pareça e mesmo parecendo chato, peça um tempo para orçar qualquer que seja o projeto. Analise o que será feito, o que deve ser implementado e comece a somar. Somar horas.

Encontre a solução que o cliente precisa e faça um projeto e leve menos de um dia para fazer isso, afinal você ainda não está sendo pago para trabalhar e mantenha uma boa aparência para o cliente, aparente ser ágil assim ele começa a pegar confiança em você. E estime por alto quanto você pode demorar a cada tarefa. Imaginemos a seguinte situação:

Quero implementar PagSeguro em minha loja. Minha loja só vende três produtos e não pretendo vender mais do que isso tão cedo.

Ok, uma implementação dessas não precisa de integração com o retorno automático nem implementação com uma linguagem server-side, podemos usar o PagSeguro com carrinho PagSeguro sem problemas. Quanto tempo para implementar? Um design de um botão, html simples para três produtos, jogar no ftp: trinta minutos. Coloquemos um nível de dificuldade que pode-se encontrar como o cliente não gostou do botão, o ftp que o cliente passou não funciona, mapear a URL de onde fica o botão, problemas de conexão… esta tarefa na verdade pode gerar um trabalho de uma hora. Então é isso, o trabalho terá o custo de uma hora.

Com as horas contadas, verifiquemos o valor que você deve cobrar, um valor justo, em cima do tempo que você vai gastar e não um chute de quanto você acha que o projeto inteiro leva.

Para gerar o valor de cada hora, precisamos saber, quanto você pretende ganhar em um mês? Digamos, R$ 5.000,00. Em um mês existem 26 dias úteis (30 menos 4 sábados menos 4 domingos) e cada dia possui 8 horas úteis o que totaliza em 208 horas. Peguemos esse valor de R$ 5.000,00 e dividimos pelos 208 horas, total de R$ 24,00.

Achamos um valor médio de trabalho, mas isso não é o valor ideal, ainda. Você não consegue pegar clientes todos os meses, existem meses em que você passa fome sem cliente algum, então você deve fazer uma média de tempo de vacas magras, digamos adicionar 10% no valor de cada hora. Também precisa adicionar os gastos que você terá durante o projeto, gastos que muitas vezes você não percebe que está tendo como por exemplo, energia elétrica ou desgaste de máquina, mais 10% dá conta do recado. E ainda temos o fato que você precisar de uma emergência como o fato de você adoecer e precisar contratar alguém para terminar o projeto no seu lugar, 20% deve resolver. Logo, os R$ 24,00 por hora ganham 50% de juros e temos o valor final de R$ 36,00 a cada hora de trabalho.

Imaginemos que você leve 4 dias para fazer aquele site da vizinha e você cobrou um valor de R$ 1.000,00 na lata. Para cada dia você trabalhou o equivalente a dez horas para conseguir manter o prazo, então você levou na verdade 40 horas de trabalho. Na ponta do lápis, você gastou R$ 1.440,00 e ganhou R$ 1.000,00 então você tomou um prejuízo de R$ 440,00. Quase 50% do projeto. Se você tivesse adoecido ou tivesse tido problemas com a familia você não conseguiria bancar as despesas e você ganhou apenas o que trabalhou, sem lucro algum. Isso quer dizer que você trabalhou de graça e não poderá tomar um sorvete por isso.

Na faculdade eu aprendi a ter ódio por “sobrinhos” porque eles cobravam o valor muito abaixo do que um projeto pode ter, por exemplo, minha vizinha conseguiu fazer um site para ela no valor de R$ 300,00. Impossível competir com meu valor de quase R$ 1.500,00. A diferença é estupidamente alta. Mas (!) mesmo não gostando desses pré-profissionais, depois que terminei a faculdade acabei cobrando o valor de um sobrinho para muitos projetos e em todos eles acabei tendo mais despesas do que lucros.

Coloque no orçamento que enviará ao cliente um descritivo de cada trabalho que você irá fazer, mostrando que cada pequeno pedaço do software dele tem um custo para você e quanto isso vale. Descreva bem, este documento poderá ser usado como base para que o cliente não te peça coisas a mais e você tenha um resaldo do que foi acordado. O fatorW tem escrito bastante coisa interessante sobre orçamentos e dicas para orçar seus projetos, vale a pena dar lida no que ele tem a dizer sobre o mercado na internet.

Hoje consigo montar um orçamento que me agrade um pouco mais e é justo – assim como o técnico, que eu consigo ficar satisfeito com o quanto estou trabalhando. E se o cliente dizer “você cobra muito caro”, na verdade ele não está querendo o meu serviço, que posso dizer que é de qualidade e vale o preço que cobro (ah, aprendi isso a duras penas) e nesse caso, é preferível que ele fique com o sobrinho e não comigo. Muitas vezes esses clientes depois de tentar abaixar o preço ao máximo se acham no direito de implicar com tudo e dizer que está pagando por isso, mas isso é outra conversa.

E você, como faz o orçamento para seus clientes?