Backstage
blogger
Backstage: A Saga Layout Squad (ou como o layout do CC foi mudado)
20.6.15Dana Martins
Então, vamos começar isso de uma vez. Você viu o layout mudar, mas como isso aconteceu? Eu não tenho certeza se esse texto é a história de uma aventura de super-heróis, dicas diretas pra quem quer aprender a mudar layout de blog sem saber html ou nossas impressões sobre o que aconteceu. Talvez um pouco de tudo. Aproveite. :D
PRÓLOGO - Elilyan
Os pitacos
Não sei pelos outros, mas não sou boa com layout. Tenho problemas de imaginar do nada como algo será visualmente. Tenho zero talento com design, todo mundo vivia dando pitaco como imaginava que deveria ser o novo CC. “Tem que ter isso, mas não gosto daquilo. OMG! Olha só o layout desse site!!!” Os pitacos duraram meses e meses. Toda vez que tínhamos uma reunião de pauta lá estava o bendito do layout como tópico para ser debatido. Chegou uma hora que ninguém aguentava mais falar no assunto. Então a gente colocou o assunto de lado em prol da sanidade mental.
Os vigilantes
Apesar da maioria da equipe (eu inclusa) ter abandonado o layout do CC de lado, os vigilantes, João e Dana, continuaram na calada da noite a pesquisar, e pensar e repensar como o novo blog deveria ser.
Enquanto os vigilantes trabalhavam algumas pessoas se irritavam...
“Não suporto mais a Emma Stone. Não suporto mais a van do John Green. Não suporto mais o zumbi. Não suporto… etc… etc...” Se você acessa o CC semanalmente, ou até diariamente provavelmente se deparou com esses ícones do layout anterior e provavelmente os amava. Agora se você faz parte da equipe, e acessa ao blog 3 ou 4 vezes ao dia, é fácil criar abuso dos banners. Vire e mexe estou divulgando posts no Facebook, Google Plus, Tumblr e Twitter, ou seja, chegou uma hora que criei um ódio enorme da imagem da Emma Stone agarrada a pelúcia do Homem-Aranha.
Mesmo odiando a Emma, a única coisa que fiz para mudar a situação do layout anterior foi reclamar, reclamar e reclamar.
Os vigilantes encontram a Arca da Aliança...
Um dia a Dana me aparece no Facebook e pergunta: o que acha desse layout para o CC? Disse que curti, perguntei se ele era SEO Friendly e quando menos esperei estava no Layout Squad, juntamente com o João.
(a partir daqui é a Dana)
CAPÍTULO 1 - Então, de onde saiu a layout squad?
Nas peregrinações da equipe ao longo dos anos atrás de um novo layout encontramos alguns sites de template. E, cara, é muito difícil arranjar um template bom pra Blogger. Todo mundo que faz algo legal faz pra WordPress. (Se eu fosse começar agora, talvez eu começasse lá e evidentemente meu blog de rascunhos eu fiz lá pra ver como era. Ainda tá em avaliação, tem os pontos negativos, mas apenas digo que todas as mudanças que nós construímos recentes aqui, já vêm como padrão lá.) Foi até considerada a possibilidade de mudar o CC pra lá. Mas se a gente não tem segurança pra mudar layout, imagina mudar um site de plataforma.
Enfim, nesse vai e vem chegou um ponto que até escolhemos um template pra comprar barato. O Diego também entrou em contato com gente pra fazer. Nada foi pra frente.
Até que um dia no mês passado eu estava vagando por aí quando num momento impetuoso revisitei um site de templates e, dessa vez, as opções não pareceram tão ruins.
Listei uns recursos necessários e fiz uma análise de acordo com isso. Depois mandei as minhas escolhas pra o João, o único da equipe que não tinha desistido da mudança de layout e gosta de conversar essas coisas comigo <3 <3 <3. Ele fez a própria análise de cada e escolheu.
Eu devia estar aventureira porque eu pensei: OK.
Ele nem escolheu o meu preferido e que tinha mais recursos, mas quer saber? Eu confio nele. Vamos fazer isso.
Aí fui falar com a Elilyan, que tava na sala de controle do CC com sua prancheta fazendo outras melhorias. Eu sentia uma sensação de dever com ela, que tem se dedicado tanto a melhorar o CC e implementou as propagandas aqui recentemente. Não ia simplesmente mudar sem a opinião dela.
Daí eu nem lembro como fomos parar no Slack.
Enfim, a layout squad estava reunida.
CAPÍTULO 2 - Antes da tempestade
E, como somos muito sérios, descobrimos um recursos de gifs no Slack e fizemos uma GIF party.
No início eu e João tipo:
E a Elilyan tava bem:
PRODUTIVIDADE. TERMINAR COISAS. FAZER COISAS. TRABALHO SÉRIO.
Depois de eu quase ir até a casa dela pra arrastar a Elilyan até a GIF party, ela entrou no clima.
E o negócio de gifs é aleatório, então TODA hora a gente mandava um dizendo o contrário do que queríamos (a história de como eu beijei o joão enquanto fui tentar dizer que ele era burro). Elilyan ainda está a procura do Alejandro Sanz. E eu fui comemorar a chegada dela com um /niceass até me dar conta de que isso parecia pornô.
Eu salvei isso pra dividir com vocês, porque eu fui dormir aquela noite rindo muito. Primeiro eu achei que era um pornô muito grotesco. Quase morri de vergonha e tudo junto. E depois eu percebi que era isso e... WTF DE GIF É ESSE? HAHHAHHAHAHAHAHAA
 |
| João ficou empolgado com a Shakira, mas eu (Elilyan) fiquei indignada! ¿Dónde está Alejandro? |
Enfim, festa feita, tínhamos template, estávamos juntos e só faltava a mudança. O primeiro passo foi fazer o passeio histórico porque sou emocional, óbvio. E salvar tudo / limpar tudo pra preparar pra mudança.
 |
| você sente falta do layout anterior? |
Eu tava gostando tanto que fui parar no twitter anunciando as mudanças, coloquei Taylor Swift nos blank space e parece que eu só enrolo, mas você tem que aproveitar a jornada... Né?
Olha. Eu só tenho algo a dizer sobre o que veio a seguir:
"Eu finalmente saí para deixar a minha marca; para encontrar aventurar. Mas, em vez disso, a aventura me encontrou."
CAPÍTULO 3- FUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU
Eu não sabia onde tava metendo o meu little pony. Se não fossem o João e Elilyan eu não sei nem o que teria acontecido.
Tinha uma tarefa no trello que eu coloquei de última hora chamada: testar layout em blog de teste. Era algo rapidinho pra fazer num piscar de olhos. Levou uma semana de trabalho diário.
Primeiro porque logo de cara descobrimos que o layout não funcionava. E eu descobri que tenho uns 30 blogs de teste privados que eu criei ao longo dos anos, porque sei lá. Testei de várias formas e dava um problema de não aparecer imagem. Elilyan criou um blog novo de teste. Não bastasse esses problemas, começamos a falar em línguas diferentes. Conflitos, muito conflitos, pra gente se entender.
Acabou que: mudança anunciada, tudo pronto e não tínhamos um template certo.
Fui pegar a lista e ir pra segunda opção de template (a minha hahaha). Mas a Elilyan não sabia da lista e encontrou outras opções que ela gostava no mesmo site.
Inclusive um que eu tinha olhado e descartado.
*olha com nojinho*
Mas taí uma das dádivas de não passar nenhuma informação: dá a oportunidade das pessoas se expressarem sem o seu filtro.
João gostou da opção, ela já tava testando e eu *agarra minha opção*
Mas quer saber: por que não?
Vambora.
E acho divertido que mesmo com 2 contra 1, se eu tivesse enchido o saco era capaz de não ter sido esse template.
Mas estamos aqui. E eles estavam certos: é lindo. Muito melhor do que as outras opções.
Esse novo ainda vinha com uma documentação muito melhor, ensinando como instalar e tudo funcionava direitinho.
Uma lição de ouro: Não sei descrever o quão eu fiquei aliviada quando colocamos esse novo template. Ele funcionava muuuito melhor e a gente tinha um controle melhor das coisas. Se a gente insistisse em ficar com o outro seria trocar algo com muito problema por algo com menos problema. Então às vezes a gente nem sabe que existe uma opção melhor (que torna sua vida muito mais fácil) a um passo de distância. Como se descobre? Experimentando.
CAPÍTULO 4 - Perdidos no tempo e espaço
“- Falta só fazer uma coisa.
- O quê?
- Todo o resto.”
Acabou? Não. Isso era tipo segunda e a mudança foi na sexta a noite. Primeiro precisávamos sincronizar nossos horários. Não queria mudar sem o João aqui pra segurar minha mão e, como tava ficando claro, Elilyan tava no controle.
Enquanto ela experimentava e ~instalava~ as coisas no layout eu ia fazer merda, porque é o que eu faço. Descobri o que eu podia ou não fazer mexendo no HTML (Independência!!!) e foi basicamente uma aula prática de CSS.
Horas olhando pra o código, mudando valores e vendo a merda que tava.
Meu lema de vida: não sei o que to fazendo, mas to fazendo e, olha, coisas acontecem!
Aos poucos a gente foi determinando onde ficava o que. A ideia era mudar na quarta, mas nosso horário pro dia ficou tipo: um pode de dia, outro à noite. Eu tinha que assistir Mad Max, gente. Eu prometi pra minha amiga. Eu esperei a semana inteira pra ir com ela (e ela não foi, mas).
Enfim, entre fazer correndo ou pular pra sexta, escolhemos a sexta.
Acho que a parte mais tensa foi decidir o que ficava no menu. O CC tem uma 737372 categorias e divisões que nós nem sabemos direito. O João fez uma lista. Eu e a Elilyan sofremos pra aplicar. Eu não sei nem descrever, porque a gente não se entendia. SOFRIMENTO. FRUSTRAÇÕES. GUEEERRA. Foi uns 2 dias disso e finalizou com ajuda do Diego. (Ajuda? Mais pra: intervenção divina).
Enfim, foi dessa experiência que ficou claro que nós éramos praticamente o Magneto (Elilyan) e Xavier (eu) do CC em todo sentido.
Então tudo quase pronto.
Na sexta faltava apenas: definir o que cada um ia fazer porque 3 pessoas mexendo ao mesmo tempo é potencial de destruição. Mais do que o normal.
Marcamos 1 da tarde. VAMBORA.
*começa realmente só meia noite*
Acho que o maior problema de se organizar é que a gente subestima o tempo que uma tarefa leva. Nós passamos o dia inteiro só pra montar o passo a passo do que seria feito. Salvar códigos, dividir ordem e o que mais demorou: definir quais resenhas seriam mostradas, quais posts iam pra o slider e o que ficaria escrito embaixo da capa da semana.
A primeira lista do slider, por exemplo, tinha só post meu. Aí decidimos colocar de pessoas diferentes. E capas que combinassem. E coisas que fossem relevantes. E capas bonitas. E posts de partes diferentes do CC.
Olha, pode ter certeza de que cada detalhe do layout novo foi decidido com muito carinho e conversa. Nada é por acaso. E agora nossa barra lateral e a parte lá embaixo (rola a pagina até o fim) estão vivas. Isto é, com conteúdo que é renovado semanalmente pensando em tornar a sua experiência no CC mais legal. Peço muito que você fique de olho no textinho ao lado embaixo da capa e no quote lá no final, que são mensagens nossas pra você. O CC não existe fora do tempo e espaço, nós estamos aqui diariamente compartilhando parte de nossas vidas com você. Quem sabe você se encontra nelas?
CAPÍTULO 5 - DRAMAS DE UMA SEASON FINALE
Enfim, acabou que já ia dar meia noite, o João desapareceu pra casar em Las Vegas com o entregador do sanduíche dele e eu tava exausta. Comecei a ficar com medo da Elilyan desistir. Existe algo mágico sobre deadlines e elas só funcionam se você levar a sério, não importa o que aconteça. Mas Elilyan estava preparada pra tudo. Nós temos um super-poder em comum: super resistência (aka. teimosia e trabalho duro. Ler Capitã Marvel vol. 2 para mais informações).
E eu me senti muito mal em deixar o João pra trás. Mas acho que esse é um daqueles momentos tipo Harry Potter que o Rony se sacrifica pra o Harry completar a jornada. Nós vamos.
Mas acabou que a aventura romântica do João foi interrompida por um drama de família e ele retornou com a bomba-relógio. OK, vamos fazer os 3 juntos. Mas em 1 hora ou ele perde a cabeça.
Depois de uma semana de trabalho constante, conseguiríamos fazer tudo em 1 hora?
*pausa pra preparar trilha sonora da mudança*
*preparando decolagem*
*todos a postos*
*Elilyan, você controla a acoplagem. João, assume a artilharia. Eu lido com os motores.*
VAMOS.
E...
Olha, não aconselho fazer essas coisas com esse tipo de música. Eu juro que quase comecei a chorar. Teoricamente, eu tava sentada no meu quarto olhando pra uma tela em branco, mas depois de uma semana de preparação e um dia exaustivo: estava acontecendo. E essa música já é poderosa por si só.
A mudança aconteceu sem maiores problemas. Eu fui colocando as partes do código que eu tinha alterado. Elilyan e João estavam colocando os conteúdos em seus devidos lugares. O máximo que aconteceu foi que alguns recursos do layout só apareciam quando o blog tava com visualização pública, o que nós esquecemos e eu já tinha desfeito todas as alterações quando lembramos desse detalhe. Também rolou um medo porque no blog de teste na sexta o slider parou de funcionar. Nossa solução: finge que não viu e testa as imagens no outro blog de testes. Conforme a gente implementasse passo a passo daria pra ver o que causou isso. Porém, o slider era uma das coisas que não aparecia até o blog ficar público. Ou seja: segura na mão de Deus e vai. O que era o problema no fim das contas? Ninguém descobriu. Não aconteceu. Esquece. Vamos em frente.
Também deu uns retardamentos porque o João e a Elilyan estavam mexendo ao mesmo tempo, mas eles se sincronizaram e foi. Elilyan também teve uma crise de dor de cabeça no meio do negócio. Ai senhor.
Aliás: parecia cena de luta coreografada. Eu me surpreendi que até a checklist que eu fiz pra me guiar passo a passo eles foram atualizando (eu nem sabia que eles sabiam dela? Eu não falei nada?). Tava todo mundo tão no mesmo ritmo que foi.
Em uma hora algo que estávamos enrolando há anos aconteceu. A layout squad é super-poderosa.
Depois ainda rolou GIF party, mais outra em post porque apenas imagens podiam expressar nossos sentimentos e ainda fizemos a ronda pelo blog pra ver se tudo tinha sobrevivido.
Alguns posts pra alterar, algumas coisas pra resolver e alguns problemas pra ver, mas finalmente: feito.
Toda a layout squad estava acabada, eu fiquei até doente e a Elilyan também. Coloquei uma regra de uma semana de férias, o que todo nós desobedecemos, mas foi mais moderado. Alguns ajustes finais. Momentos pra admirar a beleza do novo CC. Essas coisas.
Mas essa história não acabou. A parte 2 está acontece agora. Se preparem para conhecer em breve: Eduardo, The Emma Stone Slayer.
EPÍLOGO
Enquanto isso, fiquem aqui com algumas lições aprendidas:
1 - Pessoas interessadas e que estão do seu lado pra fazer as coisas. É tudo o que você precisa.
2 - Na internet tem muita opção de template bom. Procure com carinho, esteja aberto a experimentar e arrisque.
3 - Você pode ter um template legal sem gastar dinheiro.
4 - O modo como você se comunica muda tudo. Usar slack + trello deu uma sensação tão libertadora quanto banho gelado no verão. Diferente do inferno do fb, muito mais fácil da gente conversar sem alguém perder uma parte.
5 - Blog de testes. 1, 2, 3 ou quinhentos, use e abuse.
6 - Teste o que acontece publicando textos com contas diferentes.
7 - Essa organização no trello:
 |
| Já falei sobre organização do Trello nesse post |
8 - Quando for procurar um template, saiba o que você quer.
9 - Google. Google é a solução.
10 - Fazer guia passo a passo do que fazer na mudança.
11 - Escute os outros. Ou melhor: deixe os outros decidirem também.
12 - Vá com calma. Melhor que sobre tempo. (Nunca sobra)
13 - Mas coloque uma fucking deadline.
14 - Saber jogar ideias fora para focar no necessário.
15 - E saber quais ideias guardar pra mais tarde.
 |
| Separar "ideias" do que realmente deve ser feito "to-do", muito importante. Assim como reconhecer que depois de algum tempo algumas ideias não são tão necessárias e é melhor tirar do caminho. |
16 - Experimente com código. É igual interruptor. Aperta o botão a luz acende, aperta outra vez a luz apaga. Você pode não entender como, mas sabe o que faz e o que pode alterar.
17 - Bem, lembre de olhar todo o layout pra ver se você não acendeu a luz da casa inteira sem querer.
18 - Acidentes são ótimos. Na barra lateral você passa o mouse nas tags e fica amarelo: foi sem querer e nós gostamos. Os links não clicados agora são verdes, mas como reflexo o botão “continue reading" da página principal também fica. Achei que seria uma forma legal de saber quais posts você já leu no blog. Tá verde: ainda não clicou.
19 - Salve tudo. Layout, blog, códigos da barra lateral, códigos que você testa no processo, etc.
20 - É LEGAL QUANDO ESPERAM ALGUNS DIAS PRA DIZER O QUE NÃO GOSTARAM CONSIDERANDO O ESTADO MENTAL PRECÁRIO DEPOIS DE UM TRABALHO EXAUSTIVO.
21 - É legal lembrar que a intenção é ajudar e segurar o impulso de matar a pessoa.
22 - É muito importante quando as pessoas dizem o que acharam e o que mudando facilitaria usar o CC melhor.
23 - Você não precisa saber fazer as coisas pra fazer.
24 - Se divirta. Muito. Faça merda. Procrastine. Divague. Brigue.
25 - Coloque pontos finais.
23 - 3 é um número mágico. E a forma mais tranquila de tomar decisões em equipe.
E vou acrescentar: se você não pode fazer isso com uma equipe, lembre que a maioria dos superheróis salvam o dia sozinhos.
TAGS:
Backstage,
blogger,
ConversaCult,
Dana Martins,
diário,
Elilyan Andrade,
equipe do CC,
João Pedro Gomes,
layout,
slack,
trello
2 comentários
Oi tudo bem?! Vi um post de vocês do ano de 2013 sobre os contos infantis e adorei. Qual foi o livro que vocês leram os contos de fadas verdadeiros? Procurei e vi muitos mas queria saber qual que vocês utilizaram?
ResponderExcluirAguardo. Obrigada
Oi, Grabryelle. Aqueles posts foram escritos por várias pessoas, então não temos uma fonte única. Foi um misto de pesquisas na internet/conhecimento prévio / fonte pessoal. Eu tenho um livro, mas não to com ele agora pra ver as informações certas. Mas se eu fosse procurar/comprar um agora pra pesquisar sobre isso, usaria o sobre Contos de Fadas da editora Zahar: http://www.livrariacultura.com.br/p/contos-de-fadas-edicao-comentada-60288421?id_link=8787&adtype=pla&gclid=CjwKEAjw5J6sBRDp3ty_17KZyWsSJABgp-OaqHbOzItFKjUDKITBrwNOBOfnx4yjiCqZ5xUUIpRksBoC7Ezw_wcB
Excluir