Filma eu Galvão!

Resumo: Quer saber como é a rotina de um programador de software? É só assistir o vídeo: http://www.vimeo.com/11681463

Sempre achei muito massa ver aqueles vídeos bacanas que mostram a tela do computador e o cara vai narrando o que está fazendo. Você ouve os cliques do mouse, as teclas do teclado e vê o resultado ali na tela. Parece que você está ali do lado, acompanhando tudo ao vivo. Acho essa uma das maneiras mais eficientes de se ensinar algo nerd.

Eu era afinzão de fazer um vídeo desses, mas é tanto trabalho que só de pensar já dá preguiça.

Ano passado até fiz uma tentativa tímida: um vídeo ensinando AppleScript, porém era somente vídeo, sem narração. Sabe como é, cara envergonhado fica quieto mesmo, só olhando :)

Agora, bem descansado das férias, resolvi perder a virgindade (epa!) e fazer minha primeira tentativa de um vídeo nerd com narração. Fiquei na dúvida do que exatamente gravar. Só me vinham ideias sem graça na cabeça.

Até que durante o banho deu um estalo.

Eu já estava me programando para um dia mexer no MoneyLog, pois um usuário havia mandado uma tradução e eu tinha que inclui-la no código. Seria algo rápido: colar as mensagens, testar, mandar pro SVN e pronto. (ãrran…)

Ei, eu poderia gravar tudo isso!

Pensei comigo: dará um vídeo rápido (ãrran…) e pode ser interessante para as pessoas que nunca viram como é a rotina programar. Aí na narração eu poderia dar dicas de uso das ferramentas e sistemas envolvidos no processo.

É, parece legal.

Legal para nerds, claro :)

Bem, sem muitonenhum planejamento e sem ter muito claro qual era meu objetivo com aquela gravação, resolvi fazer e ver no que dá.

Ontem foi o dia.

Abri o Snapz Pro X aqui, botei minha tela em 800×600 e depois de mais de uma hora de testes de resolução, posição do microfone e qualidade final, começou a gravação oficial.

Eu comprei o Snapz Pro X numa promoção (bundle) e ele veio com um preço irrisório, só por isso o uso. Mas não recomendo. Seu preço normal é caro demais e não tem aquelas opções bacanas de mostrar as teclas na tela, mostrar os cliques do mouse, zoom estiloso, etc. Aliás, aceito sugestões de programas legais de gravação de tela.

Gravei todo o processo, desde o início até a atualização do SVN.

Não fiz ensaio para que o vídeo fosse o mais realista possível.

Eu achei que daria só uns 5 minutos, mas aconteceram problemas, quebrei o programa e me bati um pouco para arrumar. Nada mais realista do que isso! Afinal, programar é, na maior parte do tempo, resolver problemas. O “glamour” da criação dos algoritmos perfeitos fica apenas para momentos especiais.

Como já fazia nove meses que eu não mexia no código do MoneyLog, penei para lembrar de todos os detalhes envolvidos no processo. Programar é complexo, tem que ter muita coisa na cabeça ao mesmo tempo.

Também decidi filmar de uma só vez, sem cortes e sem edição posterior, para registrar a realidade do programador. Uma música seria legal, talvez retirar algumas partes deixaria o vídeo mais animado, mas eu não queria um videoclipe, queria realidade. Programar não é uma aventura agitada, é um trabalho de concentração extrema.

Para vídeos agitados e repletos de emoção, veja o site do meu amigo e ex-chefe Rodrigo Stulzer, o transpirando.com. O Rodrigo é atleta e leva a câmera em suas aventuras, faz entrevistas enquanto corre, mostra o sofrimento do esporte com o olho de quem participa. Prepare-se para suar junto :)

A pressão de estar sendo filmado e saber que eu só teria uma chance de ir até o final, além da pressão de querer fazer tudo rápido para o vídeo não ficar muito longo, me estressaram. Cometi erros e em alguns momentos não enxerguei a resposta que estava ali na minha frente.

Bem, até que isso foi divertido :)

Com erros, brancos e indecisões, os 5 minutos previstos tornaram-se 25. Sim, vídeo longo no fim das contas. Mas são 25 minutos de realidade na rotina de um programador. Era o que eu queria. Um resumo de 3 minutos somente com as partes boas (os acertos) não seria honesto, nem passaria o clima de atenção e tensão que a programação exige.

Preparado(a)? Então, aqui está:

  • Sem ensaio.
  • Sem cortes.
  • Sem edição.
  • Praticamente um Reality Show nerd :)

Dica: Você pode assistir direto no site do Vimeo. Acho que fica melhor, e na descrição do vídeo tem o roteiro completo com links.

Roteiro: (espere o vídeo carregar)

  • 0:55 — O eterno problema das aspas. Elas SEMPRE incomodam!
  • 1:40 — O terminal nunca morre.
  • 2:18 — TextMate: Command-{ para mover o bloco para a esquerda.
  • 2:53 — Mudando o idioma no config.js.
  • 3:28 — BUG: Em catalão, não mostrou os dados nem as tags.
  • 4:10 — Pescando menus nos Opera…
  • 4:41 — Procurei a linha 1596 no arquivo errado, era pra ser no moneylog.js.
  • 5:00 — Olha a linha 1596 ali! E eu nem vi… Acabei acertando sem querer.
  • 5:34 — Chutando: coloquei o DIV novo no HTML pra ver se funciona.
  • 5:55 — Não funcionou.
  • 6:19 — Linha 510 – Dessa vez achei rápido o erro (msgLoading).
  • 6:42 — TextMate: Command-F2 (ou clique) marca a linha. F2 pula até ela.
  • 7:16 — Testando mais uma vez. Agora apareceu as tags no rodapé pelo menos.
  • 7:36 — Linha 353 – Tava na cara o dateFormat e eu não vi…
  • 8:06 — Fui mexer na data padrão, mas quando vi o showLocaleDate deu o clique.
  • 9:05 — Testando de novo e agora funcionou! Viva!
  • 9:36 — Comparando lista de nomes com expressões regulares e diff.
  • 9:55 — “tudo o que vem depois do DOIS-PONTOS” (errei a fala).
  • 10:18 — TextMate: ordena linhas com F5.
  • 10:44 — Textmate: Control-Shift-Comand-D para comparar dois arquivos (diff).
  • 11:33 — TextMate: Command-E para usar o texto na pesquisa, Command-G para buscar.
  • 11:56 — Avisando no twitter sobre a gravação do vídeo.
  • 12:35 — Agora vou colocar o texto de ajuda (help).
  • 12:59 — SILÊNCIO. Enquanto isso, no pensamento: Droga! Não era pra apertar essa tecla, eu não queria mostrar meu Desktop no vídeo. E agora? Paro o vídeo? Depois corto e emendo? Mas tem o relógio ali em cima, vai aparecer. Droga, droga. Dane-se, agora já foi, depois eu vejo o que eu faço… Vamo lá.
  • 13:20 — Trecho muuuuuuito chato editando HTML, colocando tags, um saco.
  • 14:29 — TextMate: Control-Shift-W para colocar um {tag}…{/tag} em volta do texto.
  • 14:40 — TextMate: Control-Shift-Command-W para colocar um {tag}…{/tag} em cada linha do texto.
  • 16:55 — “Vamos ver como ficou”, mas mudei de ideia sem perceber e continuei editando :)
  • 17:40 — TextMate: Option-Command-. para fechar uma tag HTML aberta.
  • 18:52 — Help em catalão agora está OK.
  • 19:36 — TextMate: Shift-Command-↓ move a linha para baixo e Command-Enter para quebrar a linha (sem precisar ir ao fim dela).
  • 20:03 — SVN na linha de comando. Deu branco, pensa, pensa… Não lembrei do bendito -m.
  • 20:13 — TextMate: Abre pasta, clica arquivo, Control-Shift-A para comandos SVN.
  • 20:32 — Conferindo todas as mudanças no código (diff colorido).
  • 21:18 — Outro trecho chato e demorado só porque esqueci do comando svn log… Patetando no Google pra tentar achar o endereço do SVN.
  • 21:52 — CEGO! Tá ali já no 1º resultado, moneylog-dev!
  • 22:47 — Galera do twitter, digam oi!
  • 23:20 — Ufa! Gelei quando vi a mensagem de “read-only”. Só faltava essa no meio do vídeo :)
  • 23:39 — Finalmente escrevendo a mensagem que resume as mudanças (changelog).
  • 25:00 — Commit.
  • 25:12 — SVN no Google Code, última atualização foi em agosto de 2009.
  • 25:30 — Conferência final e resumo das mudanças (diff colorido).

Bem, eu fiz minha parte. Agora é contigo, preciso saber sua opinião!

  • O que achou?
  • Curtiu?
  • Faltou algo?
  • Tem alguma sugestão?
  • Quer ver mais vídeos desse tipo?
Related Posts Plugin for WordPress, Blogger...
Publicado em por Aurelio Jargas e arquivado em Nerd, Vídeo-aula (screencast) com as tags , , , , , , , , , .

36 respostas a Filma eu Galvão!

  1. Pingback: MoneyLog em Catalão 2 – O Retorno « Blog do Aurélio (verde)

  2. Pingback: E agora pra variar… um vídeo! :) « Blog do Aurélio (verde)

  3. Sandro M. Silva disse:

    Achei muito interessante o vídeo é muito bom mesmo acho que esse deveria e espero que seja o primeiro de muitos que ainda virão, é sempre muito interessante ver outras pessoas programando como se estivesse na sua frente e até aprender vendo tudo, alem do mais é muito mais interessante assistir a pessoa fazendo na hora o codigo aprendendo com os erros do que ficar só lendo os sources.

  4. Muito bom e espontâneo, Aurélio! Pode continuar a fazer. ;-)

  5. Renato disse:

    Aurélio, muito bom, mas concordo com o Stulzer: ficou muito longo. Por outro lado, como editar se tudo o que você fez é interessante? É programação, mais ainda, é como pensa a cabeça de um programador. Pensando bem, não cortaria nada!

  6. Rudá Moura disse:

    Parabéns pela iniciativa, como primeiro ficou bom mesmo. Para os outros, eu sugiro tu fazer sim uma edição, dar um pequeno corte pra que o vídeo flua mais e seja menor. Valeu!

  7. Rudá Moura disse:

    Esqueci de dizer… Fiquei atento ao vídeo até o 10min, depois fiquei tentando a fazer outra coisa, mas procurei focar.

  8. Lobão disse:

    Continua sim, faz outros aí que terá público ;)

    Assistindo seu vídeo me deu um vigor a mais pra já escolher uma IDE mais apropriada pras minhas necessidades e aprender a usar o SVN ;^)

    P.S.: Tenho a 3ª edição do Piazinho e pretendo comprar uma conchinha pra presentear um amigo meu que é fera em shell mas que sempre deseja aprender mais.

  9. Lobão disse:

    Que absurdo, esqueci de colocar o @lobao_ no link pro meu “site”. Hahaha #fail

  10. Fala Aurelio,

    Precisamos conversar sobre esses screencasts :D Já comentei contigo que estamos trabalhando num site pra hospedar esse tipo de aula, né? :D

    Bom… eu estou fazendo vários screencasts aqui e estou usando o Screenflow. É *bem* carinho ($99) mas te digo uma coisa: é perfeito. E não é só perfeito. Tive um probleminha com um arquivo corrompido e recorri ao suporte dos caras e eles me ajudaram prontamente a recuperar o trabalho. Chegaram ao ponto de me enviar um build do software com o bugfix só pra eu usar :D

    Ele tem todas essas funcionalidades que você citou *e* tem um mini-editor de vídeo (permite corte, destacar o ponteiro do mouse, exibir as teclas que estão sendo usadas, inserir textos e legendas, aplicar alguns filtros de áudio e gravar o seu rosto a partir da iSight, …)

    Quanto ao teu vídeo: sim, ficou longo se você considerar que não era um curso de algo. Era mais uma demonstração de como você trabalha.

    Mas nos cursos que estou gravando os vídeos com cada parte ocupam de 20min a 30min. Acho que teremos uns 12 vídeos no total. Será um curso completo de Python e Django (o curso normal tem carga horária de 40hs).

    • Grande Osvaldo,

      Valeu a dica do Screenflow. Como isso ainda é um hobbie que não sei onde vai dar, não rola um investimento desse tamanho. Mas ficarei ligado nele.

      Estou ansioso pra ver seus cursos, se eu realmente me encanar nessa brincadeira de fazer vídeos, vamos conversar sim, de repente sai um curso de shell ou regex. Já tá com o site no ar? Faz o spam aí pra galera conhecer! :)

      Abração!

    • Fala Verdão…

      Então.. o site já tá no ar sim, mas está “vazio” (sem lojas e sem cursos) porque ainda estamos naquela fase de aparar arestas. Acho que na semana que vem ele entra no ar já com a parte 1 de 5 do curso de Python e Django e aí vai rolar ver ele com tudo funcionando direitinho :)

      O site é http://www.ludeos.com.br/

  11. maru disse:

    Legal… eu vi o vídeo, comentei no twitter… show de bola ver a rotina de programação do moneylog… aliás… isso me lembra de baixar denovo… pois perdi no ultimo pau do meu hd antigo haha (geek que não faz backup é foda… o pior: lembrei do backup 2 dias antes de perder tudo xD).

    excelente vídeo, aurélio =]

  12. Bruno Assis disse:

    Cara, pra um primeiro vídeo ficou bem legal!

    Continue com o ótimo trabalho :D

  13. Parabéns pelo vídeo! Foi bem legal assistir como funciona uma atualização no MoneyLog!

    Espero poder ver isso outras vezes! =D

  14. Ficou muito bom!

    É muito lega poder ver o estilo de trabalho de outra pessoa. Sempre se aprende algo.

    Tou esperando outros!

    Abraço!!!

  15. Acho que você deveria fazer os vídeos no estilo iTalkApple.

    http://www.youtube.com/user/iTalkApple

    Abraço !!!

  16. Fabricio disse:

    muito bom mesmo …..
    otima iniciativa

  17. O negócio é ir fazendo um vídeo atrás do outro. Com a experiência você vai ver o que funciona e o que tem que deixar de lado. Pelo menos foi assim que aprendi o que faço agora. Se é bom ou não, daí a galera vai decidir.

    Abraços!

  18. Anonymous disse:

    Olá Aurélio!

    Agora falta você fazer um vídeo mostrando como usar o TextMate (e as principais teclas de atalho) e como fazer uma conta SVN no Google Code (com os principais comandos de utilização do SVN).

    []‘s

    P.S. Abandonaste completamente o Vim? :~

  19. Felipe disse:

    Ótimo vídeo!
    Pensa numa música pra intro hehe
    programar é divertido.
    Thanks for share!

  20. Israel disse:

    Quem diria abandonar o belo e velho Vim…
    O mundo está mudando mesmo.
    heehhehe

  21. Andre Luiz disse:

    Oi Aurélio,

    Por que não faz um post comparando o Vim e o TextMate, e falando mais sobre esta troca de editores? Acho que seria uma boa idéia!

  22. Salve, Aurélio!

    O que achou? Quase chorei! Concordo que pra programação e coisas nerds, nada melhor que um video gravado da tela, e sem cortes!

    Curtiu? Pacas!

    Faltou algo? rsrs, detalhar ainda mais o teu localhost e o uso do tm!

    Tem alguma sugestão? Fazer um video dum programa criado do zero, e também das atualizações dos teus programas (não apenas do “localization”). É um video de recordação (pra nós e pra ti) e pros curiosos que querem aprender, e, não, pra dar aula/curso! Quem achou o video grande é quem já tem experiência e contato com essas nerdices!

    2. Acho que deve dar muito trabalho colocar os links com os tempos! Acho que não é necessário, quase não tem uso (ou tem?)!

    Quer ver mais vídeos desse tipo? Sim, e várias vezes por mês, :-)

    • Valeu Daniel!

      Putz, programa criado do zero acho impraticável, pois são muitas e muitas e muitas horas até ter algo mais ou menos pronto. Daria para fazer uma série de vídeos, mas mesmo assim, teria que ter cortes, pois é muita coisa. Mas é uma ideia a se pensar, obrigado!

      Você citou recordação, é bem isso, vou gostar de ver isso quando não programar mais. É tipo hoje ver os antigos shows da banda, dá saudade.

      Muito obrigado pelo retorno positivo, eu pretendo fazer mais vídeos quando for programar novamente.

      2. Eu só faço o resumo dos tópicos pra me achar dentro do vídeo, os link é o YouTube/Vimeo que colocam automaticamente :)

      Falou!

  23. Fernando disse:

    Muito show!!!!
    Tinha visto apenas os outros vídeos menores mas agora vi esse e com certeza muita gente se identificou com as situações inesperadas que sempre aconecem.

    Vlw.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>