Sabtu, 29 Agustus 2009

Vagando pelo Mundo - Entrevista com JMiur

Rivais no futebol, Brasil e Argentina se entendem muito bem quando o assunto é blog. Nas palavras de JMiur, autor do imperdível Vagabundia: 'Por lo que veo al navegar, la comunidad de blogs en Brasil es muy importante y en realidad, no es de extrañar porque toda la web brasilera es de buena calidad, de las mejores en cuanto a diseño y a creatividad.'. De minha parte (e sei que de muitos leitores brasileiros) só posso tecer elogios ao conteúdo excelente que JMiur compartilha com os usuários do Blogger, com tutoriais muito bem explicados, dicas e idéias criativas, mostrando um grande conhecimento em diversas linguagens, como HTML, CSS, PHP, JavaScript... Apesar de Vagabundia não ser um blog de ajuda, devo confessar que ali tenho aprendido muito e que admiro a atenção que o autor dispensa aos comentários, respondendo pacientemente todas as questões, agradecendo todas as visitas.

Com a mesma gentileza com que trata seus leitores, JMiur concedeu-me uma 'entrevista' que disponibilizo para vocês em duas versões: traduzido para o português (e aqui já me desculpo por possíveis erros, pois compreendo perfeitamente a idéia mas escorrego na tentativa de traduzir algumas palavras/expressões e também usei um tradutor online para algumas expressões) e na versão original.



Quem é JMiur?
Entendi bem a pergunta? Quem sou? Pois esta é a pergunta mais difícil de responder. Digamos que na web sou apenas um usuário sem maiores pretensões além de me divertir e fazer com que os neurônios se exercitem. Na web encontrei uma síntese quase perfeita para expressar-me e para criar. Fora da web sou um senhor casado, chamado Jorge, que trabalha como qualquer outro e que não se parece nada com seu avatar :D

Por que Vagabundia?
O nome é um erro de tipografia :$ Me enganei ao registrá-lo, supostamente seria Vagamundia, uma palavra inventada que mesclava Vagar e Mundo. É que quando pensava num nome, via que os sites sempre indicavam de que se tratava, qual era o tema e, como não tinha a menor ideia do que seria,  me ocorreu isso de vagar, de ir sem rumo a ver que se encontra no caminho.

Quantos blogs você tem?
Só dois. Um no Blogger e outro hospedado em um hosting que usa WordPress e que é um subdomínio de uma rede. Na realidade, tenho muito outros que são apenas demos, provas e experimentos, que não são blogs e sim páginas soltas. Também tenho um  Tumblr mas não o considero um blog só...um Tumblr :D

Quando criou seu primeiro blog e com qual objetivo?
A 30 de agosto do 2006 mas, quem recorda as datas? e o objetivo era claro: NENHUM
Criei-o porque fiz click no últmo passo depois de ter entrado vinte vezes e ter saído outras tantas. Não sabia que era um blog nem qual era a diferença entre uma página site "normal" e um blog. Não entendia de que se tratava o assunto e ainda estou averiguando. Se tenho sorte, não saberei nunca mas enquanto isso, me divirto procurando!

Você usa tanto o Blogger quanto o WordPress para publicar seus textos. Poderia nos falar um pouco sobre sua experiência com estes dois serviços?
Tecnicamente são completamente diferentes, Blogger é um serviço "fechado" onde as opções estão estabelecidas por quem brinda o serviço e WorPress (falamos de wordpress.org) é mais aberto, assim  as possibilidades são maiores. Nenhum dos dois é perfeito e minha lista de queixas se amplia tanto para um como para outro. Em ambos os casos, os usuários estão dependendo sempre dos desenvolvedores dos sistemas.
Para quem começa, Blogger ou seu equivalente wordpress.com são a melhor forma de aprender já que, em ambos casos, teremos algo que funcione com um par de clicks e depois, com paciência, poderemos ir aprendendo e  adaptando a nosso gosto. Colocar uma página num hosting próprio e fazê-la funcionar já requer um pouco mais de conhecimentos, não muitos mas um pouco mais. No blog pessoal me agrada sair da estrutura dos blogs e estou apaixonado por PHP que recentemente começo a compreender mas, para um usuário, para alguém que quer ter um blog, superadas as dificuldades técnicas, qualquer dos dois serviços é indiferente porque (sempre repito o mesmo)  são só ferramentas e são tão boas ou más como quem as usa, assim a qualidade de um blog depende exclusivamente de quem o faz e não de onde está alojado.

Apesar de prestar um enorme serviço para quem usa a plataforma Blogger, Vagabundia.blogspot não é exatamente um blog de ajuda; podemos encontrar lá assuntos diversos, além de textos pessoais. Qual era o seu objetivo quando criou o blog?

Definitivamente não é um blog de ajuda. Digo e repito quantas vezes seja necessário. É um blog "pessoal" e vá um a saber que significa isso. Acho que "pessoal" porque coloco o que quero, o que gosto, o que me parece interessante sem pensar em nada mais. Eu não escrevo para outros, escrevo para mim. Se fizesse o contrário, seria um vendedor. Não, não é um blog de ajuda porque não sou mestre nem professor de nada. Só conto o que faço, como  faço e  mostro; saia bem ou mau, dá no mesmo, algo terei aprendido no processo. Em todo caso, um blog só é isso, um lugar onde se compartilham experiências ou vivências e às vezes, nem sequer se compartilham, se escreve e se publica como uma forma de remover de cima. Para mim, um blog é uma mistura estranha de bookmark com psicólogo gratuíto :D

Você demostra um grande conhecimento em HTML, CSS, JavaScritp, PHP...Quando e como você entrou em contato pela primeira vez com estas linguagens?
Não tenho nenhuma formação acadêmica no tema informática. Sou autodidata. O primeiro que aprendi foi Basic para Commodore 64, lendo revistas. Depois, copiava em disketes os códigos fontes das páginas da web e as colocava em meu PC 286 sem Windows e sem Internet para tratar de entendê-las. Quando me 'modernizei' e acessei a Internet, um dia encontrei um manual online, imprimi e ali comecei com isto de HTML, mas sempre offline. Neste manual (da época dos dinossauros) no último capítulo falava de algo novo: do CSS e quando entendi a idéia, me pareceu que era a chave de tudo. Como te disse, só faz 3 anos que criei um blog. Pouco antes havia criado uma conta no Flickr e essa havia sido toda a minha experiência com a Web 2.0. Não tinha idéia de nada e como não tinha idéia, ao criar o blog em Blogger, o primeiro que fiz (talvez para não publicar) foi me pôr a tratar de entender o template. Como isso me tomava muito tempo e, ainda que ninguém visitava o blog me sentia na obrigação de pôr conteúdo, comecei a escrever o que fazia, o que descobria dos códigos, de como haviam  mudado quando saiu o Blogger Beta. Suponho que ao ter poucos lugares em espanhol que falassem do tema, isso trouxe visitas, não sei a razão, creio nas casualidades. O PHP é novo. Ainda que faz um par de anos que uso WordPress e sua linguagem é essa, nunca me atrevi a ir demasiado longe e  nestes últimos meses estou "a jogar" com essa linguagem e confesso que me fascina. Talvez, por que me recorda um pouco o Basic, não sei. Parece-me muito completo e até simples de compreender, bem mais simples que JavaScript, mais claro, menos pesado e muito mas muito mais poderoso porque pode se fazer qualquer coisa.
Não ter uma educação formal nestes temas tem seus pró e seus contras. O mau é que há certos conceitos básicos que não tenho claros ou que devo assimilar à custa de erros; o bom é que não tenho escrúpulos :D Isto é, não sigo as regras e isso me permite encontrar soluções inesperadas mas também cometer erros elementares. De qualquer jeito, como é algo que não posso mudar, devo me adaptar a minhas limitações e seguir adiante.


O que é o Bolsanegra?
Essa é a segunda pergunta difícil . Que sei eu!! Como rede é um conjunto de pessoas que se foram juntando durante estes anos e que só crêem em fazer o que se lhes dá a vontade. O meu é só outro blog dentro da rede (um dos dois blogs idosos) e no último ano decidi lhe mudar a cara e o fazer ainda mais "pessoal" do que era e sobretudo ver se era possível escapar desse esquema de blog que empilha entradas uma embaixo da outra. Não consegui e por isso, continuo.
Se o blog de Blogger defino sempre como um pátio de jogos, bolsanegra é outro pátio de jogo mas sem o olhar vigilante de algum adulto, compartilhando projetos que jamais irão se realizar com pessoas  que o tempo transformou em afetos e que se tornaram uma parte importante de minha vida.

Quanto tempo você dedica aos seus blogs?
Nunca medi o tempo porque é difícil fazer isso, e o cúmulo: não uso relógio. Às vezes, me ocorre que 24 horas diárias mas não mais :D Quando leio ou navego pela internet, de alguma maneira, meu cérebro pensa em termos de blog: 'isto seria algo interessante para provar', 'isto eu gostaria de ver se funciona', 'este é um tema interessante'...logo, o tempo real de escrever ou montar um artigo pode variar. Esses que ninguém lê e que passam despercebidos costumam levar dias e dias de trabalho. Outros que tem 100 comentários e saem em Menéame  foram escritos em cinco minutos e se publicaram porque por acaso não os apaguei. Não, não há medidas para isso. Se tenho que dar uma cifra, diria que entre uma coisa e outra devo empregar três ou quatro horas diárias, facilmente e às vezes mais. Costumo trabalhar de noite e são muitos os dias que amanheço em frente ao teclado e depois, em lugar de dormir, simplesmente caio desmaiado sobre a cama :)

Como escolhe os temas que irá publicar? Comentários e pedidos de leitores influenciam nos temas escolhidos?

Oh sim, os comentários ou consultas costumam ser uma fonte de "inspiração", seja porque há um tema específico que me interessa pesquisar ou  porque esse comentário me convida a refletir sobre alguma coisa. São fundamentais mas não quando só se limitam a ser um conjunto de perguntas e respostas, para isso, melhor um fórum. Prefiro a palavra conversa à palavra comentário e as conversas sempre são enriquecedoras.

Recentemente você passou a moderar os comentários no Vagabundia.blogspot por conta de um episódio desagradável com um comentarista anônimo. Poderia nos passar sua experiência com os comentários que recebe e sua visão do comportamento de algumas pessoas que se protegem no anonimato? Como um defensor da liberdade de expressão, como é ter que tomar uma medida como esta?
Esta experiência foi realmente feia, muito feia.
Não foi a primeira vez mas sim a mais chata e que me levou a tomar esta resolução depois de consultar outros blogs  e chegar à conclusão de que não tinha outro remédio porque Blogger não nos dá as ferramentas mínimas necessárias para nos proteger.
Anteriormente, situações parecidas solucionaram-se bloqueando alguém ou fechando os comentários temporariamente até que o imbecil da vez se cansasse, mas este útltimo foi opressor porque evidentemente , não o estava fazendo manualmente. Eram dezenas de comentários por minuto. Sempre me envergonho ao recordar que quem havia subscrito um comentário para esperar uma resposta, logo se viu inundado por centenas de emails com esses comentários absurdos e insultantes. O primeiro que me ocorreu foi não aceitar comentários anônimos mas não serviu de nada porque quem fazia isso entrava com sua conta de GMail ainda que não tinha perfil disponível. Denunciei-o ao Google mas foi inútil porque do outro lado costuma não ter ninguém que escute. Para Google/Blogger seria fácil saber que o que estava acontecendo era real, eles manejam os comentários e deviam notar que algo raro acontecia, que não era lógico mas, me ignoraram completamente, assim não me restou outro remédio que moderar.
Ainda que isto já tenha ocorrido faz um tempo, decidi os deixar assim simplesmente porque não posso estar presente as 24 horas e não gosto que sujem minha casa. É chato mas inevitável.
O do anonimato era algo que vinha pensado fazia um momento. Parece-me uma descortesia e não vejo nenhum motivo para não se apresentar. O nick que usamos é suficiente para sermos anônimos e na vida "real" (ainda que a web TAMBÉM é vida real) as pessoas saúdam-se, apresentam-se e conversam. Por que devo falar com alguém que se esconde dessa maneira? De que me serve? Que me contribui?
A liberdade de expressão não tem nada que ver com isto, eu não te impeço que se expresse, faça em teu blog e seja responsável disso. Eu defendo a liberdade de expressão de absolutamente todos e sobretudo, de quem me causa aversão porque os direitos humanos (e este é um deles) se fizeram para proteger a meus inimigos, não a meus amigos. Isso não seria liberdade de expressão apenas autoritarismo.

Em seus blogs é possível encontrar muitos artigos sobre música (por exemplo, as categorias música e beatlemania). Qual é a importância da música para você?
Que importância tem a música? TODA, absolutamente toda :É meu maior prazer e escuto música o tempo todo. Cada lembrança está associada a uma música e cada canção traz-me uma recordação; boas e ruins, tristes e alegres. Adoraria ter sido músico mas desafino no chuveiro e não sei distinguir uma nota de outra, talvez seja por isso que lhe dou tanta importância. Algum dia farei um site de música, é algo que sempre desejei.

Mais de uma vez você alertou sobre os perigos de expor dados e imagens pessoais na Internet. Poderia dissertar sobre o assunto?
Esse é o problema mais grave que tem na web e não há forma de o solucionar através da própria web. A única maneira possível se chama educação e essa educação deve começar pelos pais e não pelos filhos. Nós, os adultos, somos os que devemos tomar consciência e aprender.
Como te dizia antes, internet é uma ferramenta. A nenhum pai ocorreria dar a um menino um martelo ou uma furadeira elétrica para que brinque e no entanto, lhes damos um computador. Há algo básico: o publicado é público. Não é um problema moral, filosófico ou legal, é assim e não há maneira do mudar, não há leis possíveis, não há controles estatais possíveis. Tudo se resume em DEVO PROTEGER a meus filhos e para isso devo aprender, devo escutar, devo me envolver, devo compartilhar isto com eles e não os deixar sozinhos.
Jamais, nunca, jamais se deve dar dados nem informações pessoais de nenhuma classe. Se não quer que essa foto "graciosa" de tua noiva seja vista por um chinês em Shangai dentro de um par de dias, NÃO A PUBLIQUE porque inevitavelmente, ele verá. Em internet, nada é totalmente privado: NADA. Internet É isso. Há que entender, há que aceitar e a partir daí, tudo é mais simples e não teremos problemas.

Muitos textos seus são copiados por outros blogs, muitas vezes sem nenhuma referência à sua autoria. Como você encara este tipo de atitude? Independente da questão ética, a duplicidade de textos pode causar algum problema real ao autor do blog?
Isso é inevitável e tem a mesma raiz que o anterior. Até mandaram-me emails contando-me que em tal lado há um artigo de um truque interessante e resultou ser uma cópia de algo que tinha publicado faz anos!!!
Na prática, nada pode se fazer. Se trata-se de outros blogs, parece-me que o melhor é os ignorar porque inevitavelmente, desaparecem. Muito piores são os sites que roubam conteúdos sistematicamente através dos feeds mas, disso deveriam se encarregar Google e os demais buscadores. É absurdo que um artigo teu apareça nos resultados numa posição secundária e um agregador de notícias esteja em primeiro termo; isso sim é um problema sério porque nos prejudica e eles lucram com o trabalho alheio.
Mas nada posso fazer salvo utilizar dois ou três técnicas manuais, pôr assinaturas nos feeds, bloquear as imagens se estão num hosting, não muito mais.
Em todo caso limito-me a seguir pregando que linkar é bom e que isso, ao invés do que muitos crêem, gera visitas e não o contrário. Sem links os blogs deixam de existir; a rede deixa de existir e se transforma em uma plataforma com um discurso único.

O que faz com você não volte a visitar uma página? Especificamente em relação aos blogs, o que você não aprecia em um blog?
O destino :D Quem sabe por que gostamos ou não gostamos de algo? Primeiro que nada, algo geral, o aspecto, a cor, a forma em que está diagramado; não é o fundamental mas é o primeiro que percebemos. Depois, se as páginas são comprensiveis isto é, se está claro como as navegar, se os links funcionam, se se pode seguir uma ordem com facilidade.
Em todo o caso, poderia dizer por que NÃO leio.
Porque publica demasiadas coisas todos os dias e me agonia; porque isso do que falam é o mesmo que li 100 vezes antes, porque os feeds estão incompletos, porque o site contém centos de imagens ou videos e navegá-lo é uma tortura; porque o que publica  são só listas de links sem nenhuma avaliação pessoal; porque falam-me de algo "maravilhoso" mas não há um só exemplo de que o tenham tentado aplicar; porque só são artigos que me dizem "vão a tal outro lugar e leiam isto"; porque vejo que os comentários estão cheios de spam e que jamais há uma resposta pessoal; porque têm música de fundo (uso os fones de ouvido e me aborrece que me distraiam); porque forçam-me a instalar plugins para vê-los ou a registar-me para seguir lendo; porque têm pop-ups ou publicidades intrusivas que abrem essas janelinhas que ficam na barra de tarefas.
Bom, como vê, é mais difícil explicar o que  gosto do que o que não gosto.Em todo caso, tudo isso é absolutamente subjetivo e até suportável mas, um lugar a que jamais regresso é aquele que pretende me enganar ou que expressa discriminação de qualquer tipo.

Mais de uma vez, lendo suas opiniões, constatei que você defende o direito irrestrito à liberdade de expressão. Poderia falar à respeito?
Como te disse, liberdade absoluta e responsabilidade absoluta. Assumir as consequências da cada ato e de cada palavra. Só exijo algo em troca, que não me obrigue a escutar. Você decide o que escreve e eu decido o que leio. Assim, ambos somos felizes.
No caso dos blogs ou dos fóruns onde há uma ida e volta, em alguns casos, essa liberdade está mal entendida. Liberdade de expressão não é deixar um comentário insultante ou agressivo no site/blog de outro. Isso só é má educação e assim o administrador do lugar o elimina: não há censura, só limpeza. Censura é: não há nenhum lugar onde pode expressar-se e, em todo caso, basta abrir um blog em cinco minutos e ali escrever as barbaridades que lhe ocorrerem. Não deve haver restrições. A única restrição aceitável é a lei e muitas vezes nem isso por que como membros de uma sociedade podemos questionar essas leis.
De fato, se a humanidade não as tivesse questionado desde o início dos tempos, ainda estaríamos a saltar de árvore em árvore. Questionar, duvidar e expressar-se são as únicas características que nos diferenciam dos demais animais.
Na prática, basta fazer click e ir a outro lado, apagar a TV ou fechar o livro e procurar outro. Não é necessário um Irmão Maior que nos diga o que é bom ou o que é mau. Há algum deus terreno imaculado que esteja livre de pecados para  decidir? Quem estabelece as regras? Quem as cumprirá? Só se precisa educação para poder conviver com o diferente e o aceitar como parte da diversidade.
E quando se trata de menores de idade, a responsabilidade é dos pais e não devemos delegar essa responsabilidade. Devemos assumí-la.

Com qual objetivo você publica suas opiniões em seus blogs? Como lida com opiniões contrárias?
Escrevo para tirá-las de cima, para que não me molestem, para que não estejam aí dando voltas na cabeça e não me deixem dormir.
As opiniões divergentes não me desagradam, só me desagradam os maus tons e a descortesia. As discussões francas são bem-vindas; os argumentos são bem-vindos;os panfletos, os discursos e as frases feitas não são bem-vindos.
Creio nas diferenças. Não as "tolero" porque tolerar me soa a "suportar"; aceito-as e aplaudo-as. Definitivamente, as opiniões divergentes são o sal desta vida.
Creio firmemente no brainstorming, nessa tormenta de idéias que gera algo que em princípio, tivesse sido inimaginável e que não é a soma de duas ou três senão a potência de duas ou três. Para que isso funcione basta fazer algo bastante difícil nestes tempos: ESCUTAR o outro e não se apaixonar de nossas próprias palavras.

Qual é o seu maior prazer mantendo um blog?
Exercitar o cérebro :D Conseguir que isso que imagino se veja tal como o imagino. Imaginar essa cor, essa linha de pontos num lugar preciso e ohhhhhh ali está ¡Ao FIM!
É um prazer que dura pouco. Sorrio como se tivesse descoberto a roda e pouco depois ... tenho que pensar em outra coisa. Não há nada mais chato que um lugar "terminado".

Sobre o Twitter: o que você acha do Twitter? O que pensa sobre o modo como as pessoas utilizam o serviço?
Vou repetir-me: HÁ DE TUDO e está bem que seja assim. Como ferramenta de comunicação me parece fantástica. Gosto que seja um pouco anárquico, um pouco irresponsável, isto é, que simplesmente seja uma maneira rápida e simples de informar algo, de mostrar algo, de compartilhar algo mas nada mais. Quando se transforma numa carreira de ver quem te segue ou quem não te segue, de quantos RT há ou não há, então já deixa de me agradar. O site está a transformar numa espécie de concurso de popularidade?
Por agora me resulta útil mas se termina sendo só outra passarela de egos, adios.

Você já demostrou em seus textos uma certa aversão por redes sociais. Poderia falar sobre?
Por isso mesmo que dizia de Twitter. Não creio nas redes sociais tal como é proposto no site. No meu ponto de vista, as redes sociais significam carne e osso, lágrimas, um ombro onde chorar, uma mão que se tende, calor de pele, olhos onde se olhar, coisas bastante mais profundas que uma série de mensagens, saludos e presentes virtuais.
O que vejo em lugares como Facebook é muita gente falando ao mesmo tempo e pouca gente escutando. Como pode se criar uma rede se só há monólogos? De que serve uma campanha à favor ou contra  algo se a realidade está em outro lado? Bem mais perto mas também bem mais complexa e bem mais difícil de mudar.
Seguramente, como em tudo, há exceções mas, no geral as vejo como cascas sem conteúdo, como essas reuniões de adolescentes onde se discute até saturar como mudar o mundo mas que não conduzem a nada. Uma vez que se acaba o café, cada um volta a sua casa e mais nada. Não sei como se chama meu vizinho mas tenho 500 amigos no Facebook. Inclusive as palavras que se usam são pouco felizes e criam sensações irreais: fans? amigos? Eu não quero um milhão de amigos (perdão, Roberto Carlos) eu quero um só: UM PARA VALER!!!
Bom, confesso, também que há algo pessoal nesta aversão: sou antisocial, não mordo mas rosno :D

Você lê blogs ou sites brasileiros? Conhece algo sobre a blogosfera brasileira? em caso afirmativo, qual sua opinião sobre os blogs do Brasil?
Leio blogs brasileros. Tenho vários deles nos feeds e são eles os que me levam a outros lugares mas, até agora os que sigo regularmente têm que ver com a parte técnica. Meu problema é simples: o idioma. Posso entender a idéia geral de um escrito mas perco a essência, o sabor da palavra, os matizes. Essa é uma limitação importante quando um não conhece a linguagem do outro; as traduções não ajudam muito. É uma pena que até agora não se tenha imposto a educação bilingue como algo obrigatório porque há demasiadas coisas que nos unem.
Pelo que vejo ao navegar, a comunidade de blogs em Brasil é muito importante e em realidade, não é de estranhar porque todo o site brasilero é de boa qualidade, das melhores quanto a desenho e a criatividade. Muitos sites de pessoas que fazem arte gráfica e animações incríveis. Outra confissão: à cada tweet que você coloca com um link à uma página do Brasil, faço click e vou olhar :$
Não sei se pensa o mesmo mas, de um tempo pra cá, me parece que, pelo menos no que se refere ao Blogger, há muita mais interação que antes. Faz um par de anos, as visitas do Brasil eram escassas e hoje está entre os 10 primeiros países com uma média de tempo no blog muito alto, dos mais altos. Acho que o esforço de entender-se e de comunicar-se ainda que seja por sinais, vale a pena e oxalá continue.

Para terminar uma pergunta sobre o Blogger: me parece que o Blogger está prometendo mudanças para o próximo ano, com novas funcionalidades. O que você gostaria de ver no Blogger?
Algo li dessas promessas. Há que lhes crer? Terá algo que ver com todos esses códigos misteriosos que você sempre encontra?
Dizem que "a esperança é a última que morre" mas, também dizem que "aquele que se queimou com leite, vê uma vaca e chora" e, até agora, são poucos os acertos do Blogger, acho que, simplesmente, não sabem que fazer com o serviço. Deveriam vir ao sul a escutar o que dizemos. Serão surdos?
Gostaria que de uma vez por todas resolvessem o problema do alojamento de arquivos, é vergonhoso que não  tenha e que  quando  tem são outros serviços do mesmo Google como essa aberração chamada Google Sites.
Gostaria que a gestão de comentários mudasse absolutamente porque isto que fizeram e que quiseram nos vender como a resposta a nossos pedidos é abominável. Funciona mal (quando funciona) e carece das ferramentas elementares que deveria ter um administrador de um site/blog para os controlar. Não é difícil fazer, só deveriam copiar o que tem qualquer outro serviço medíocre.
Gostaria que voltassem às raízes e que deixassem de agregar coisas inúteis, complexas e incontroláveis, não quero que ponham mais scripts automáticos nem iframes nem códigos escondidos e que deixem de sublinhar todos os links XD
Gostaria que trabalhassem para criar uma ajuda real onde se descreva cada codigo interno para não ter que ficar adivinhando.
Algo mais técnico (já que estamos pedindo, peçamos para valer) gostaria que os dados fossem acessíveis desde o header  do blog e não depois; que tivesse alguma forma de combinar condicionais com JavaScript; que o CSS estivesse num arquivo separado; que tivesse dados estatísticos internos mais precisos.
Gostaria ... melhor parar porque não terminaria nunca. Se cumprirem com uma das duas primeiras, me contento e os deixo descansar até o ano que vem.

**************************************************************

Mais uma vez saliento que possivelmente posso ter 'escorregado' em alguns detalhes da tradução e se encontrarem erros, por favor me avisem para que eu possa corrigir o texto.

Quero agradecer novamente ao JMiur pela paciência em responder todas estas perguntas e reafirmar que gostei muito e me senti honrada com sua participação. :)


Kamis, 20 Agustus 2009

Hospedar JavaScript no Google Site

Através do Twitter, Pizcos avisou que é possível hospedar JavaScipt no Google Site e BanakaBanaka fez um post à respeito, explicando como hospedar os scripts. Eu mesma testei e o slide aqui do blog está funcionando com os scripts hospedados por lá.

1- Crie um site no Google Site:


2- Clique em criar página:


3- Escolha a opção Arquivos, dê um nome à nova página e escolha a opção Colocar Página no Nível Superior:

4- Clique em Adicionar Arquivo, procure o arquivo JavaScript no seu computador e clique em Fazer Upload:

 

5- Clique com o botão direito do mouse sobre o nome do arquivo e escolha copiar link:


6- O link deve ser parecer com este: http:// sites.google.com/site/meuscodigos73/scripts/jquery%282%29.js?attredirects=0.
Exclua do link o trecho em vermelho e coloque no blog (acima da tag </head> ) desta maneira:

<script src='http://sites.google.com/site/codigos1673/scripts2/s3Slider.js' type='text/javascript'/>
Por enquanto tudo está funcionando perfeitamente e esta é uma ótima opção para hospedar scripts depois que o Google Pages fechou suas portas.Esperamos que desta vez não aconteça o mesmo.

Jumat, 14 Agustus 2009

Como fazer um template para o Blogger VI - Post

Continuando a série de artigos sobre Como criar um template para o Blogger, nesta sexta parte mostrarei uma idéia geral sobre as colunas do template Mínima e como dar estilo ao post.

Antes, vamos recapitular um pouco do conteúdo da primeira parte:

Um documento HTML se compõe da seguinte estrutura básica:
<html>
<head>
cabeçalho: aqui está contido o estilo da página - CSS
<head/>
<body>
corpo - aqui está contida a estrutura da página, seus elementos.
</body>
</html>
O código CSS, que dá estilo à página, começa com : <b:skin><![CDATA[/* e sua tag de fechamento é ]]></b:skin>. Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.
Imediatamente após o fechamento da tag do CSS, encontra-se </head>, fechando o cabeçalho da página e imediatamente após </head> está <body>, dando início ao corpo do documento:



Se entre <head> e </head> está contido o estilo da página com o código CSS, entre <body> e </body> encontra-se a estrutura do template.

Visão do conteúdo de body no template Mínima (sem expandir modelo de widget):

<body>

<div id='outer-wrapper'>
<div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Toda Cute (Cabeçalho)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>
</b:section>
</div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div>

</div> <!-- end outer-wrapper -->
</body>

</html>

Colori as tags de abertura e fechamento das divs principais para que possam perceber a 'hierarquia', ou ainda, como alguns blocos estão contidos em outros. Entre <body> e </body> a maior div que engloba todas as outras é outer-wrapper, seguida de wrap2 (que não tem estilo definido no CSS) e dentro destes 2 blocos encontra-se:

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Skiplinks são links com âncoras que levam diretamente para o conteúdo da página, pulando qualquer outro menu ou links que possam existir entre o topo da página e os textos, ou sidebar. É uma alternativa para quem tem deficiência visual e usa um leitor de tela. Você pode obter informações detalhadas sobre Skip Navigation aqui. No template Mínima o trecho style='display:none' esconde estes links e para que apareçam em seu blog, basta deletar este mesmo trecho.
Cabeçalho
O trecho do HTML que corresponde ao cabeçalho da página é este:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Toda Cute (Cabeçalho)' type='Header'/>
</b:section>
</div>
O correspondente no CSS é #header-wrapper, #header-inner, #header, #header h1 (título do blog), #header a, #header a:hover (links do cabeçalho - título) , #header .description (descrição do blog)

Content-Wrapper - Esta é a div que engloba as colunas do post e sidebar do blog. No template Mínima não há estilo para content-wrapper. Se você quiser dar algum estilo à esta div terá que acrescentar no CSS:

#content-wrapper{ ....estilo......}

Crosscol-wrapper
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Esta é uma div que fica acima das colunas e que também não tem estilo definido no CSS, apenas dentro do código html, em style='text-align:center' (que centraliza qualquer widget). Para fazer com que esta div apareça na página Layout e possa receber um widget, troque onde está no por yes e salve a modificação. Para dar estilo a crosscol-wrapper, acrescente no CSS:

#crosscoll-wrapper {....estilo...}

Main-wrapper, coluna do post
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
Main-wrapper é a div que recebe o widget Blog1, o widget de postagens do Blogger. Para que a div main-wrapper possa receber outros widgets, troque no por yes e será possível acrescentar widgets antes ou depois dos posts. Para destrancar o widget de posts (pois ele é fixo no template), troque onde está locked='true' por locked='false' e você poderá arrastar os posts para a sidebar, por exemplo. Não que mover os posts para a sidebar possa ser interessante, mas este é mais um dado que se pode anotar: para destrancar (e remover) um widget fixo (muitos templates convertidos e modificados vem com widgets fixas), basta trocar true por false.

O correspondente no CSS para a div main-wrapper é este trecho do código:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Entre { e } você poderá acrescentar os estilos que deseja para a coluna de postagem, como background, largura, borda, flutuação (lembrando: float:left, a coluna flutua à esquerda - float:right, a coluna flutua à direita). Todo estilo aqui determinado servirá para a coluna, para a div que recebe o widget de posts (Blog1).

Blog1

Blog1 é o widget fixo em main-wrapper que engloba tudo o que contém o post, da data do artigo à post-footer, o rodapé da postagem, além dos comentários. Para conhecer todas as divs e classes contidas em Blog1 é preciso clicar em Expandir Modelo de Widget, quando todos os códigos 'ocultos' se revelam (o que geralmente desespera um pouco na primeira vez).

Ultimamente muitos códigos novos tem surgido nos templates do Blogger (pelo menos no Mínima, que é o que acompanho), por isso, eu realmente não sei tudo sobre as funções de cada um deles. Também não tenho como explicar aqui cada linha do código que se revela ao expandir o widget, por isso farei um resumo. Daqui em diante sugiro que você acompanhe o texto ao mesmo tempo que observa os códigos que serão mencionados. Crie um blog de testes, escolha o template Mínima, vá em Editar HTML e clique em Expandir Modelo de Widget. Vá procurando a localização dos códigos mencionado. Mostrarei o código html de determinados elementos e seu correspondente no CSS.

Data da postagem - HTML:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Data da Postagem - CSS

h2.date-header {
margin:1.5em 0 .5em;}
e
h2 {
margin:1.5em 0 .75em;
font-size:15px;
line-height: 1.4em;
text-transform:capitalize;
letter-spacing:.2em;
color:$sidebarcolor;}

Para o que não for especificado em h2.date-header valerá o que consta em h2.

Título do Post - HTML

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Título do Post -CSS

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Como o título do post é um link, no CSS você encontra estilo para o título (post h3), para o título- link no estado normal (.post a...) e para o título-link no estado hover (quando passa o cursor do mouse sobre).

Post - HTML

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Post- CSS

.post { /* área ocupada pelo post, o que inclue a data, título, texto e post-footer */
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

.post-body { /* estilo para o texto, área ocupada apenas pelo texto */
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote { /* estilo das citações /*
line-height:1.3em;
}

.post img { /* estilo das imagens do post */
padding:4px;
border:1px solid $bordercolor;
}

Post-Footer - HTML

tag de abertura:
<div class='post-footer'>

tag de fechamento:
</div>

Post-Footer - CSS

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

A div class Post-Footer engloba:

Autor do Post - HTML:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Não há estilo no CSS. Para dar estilo ao link do autor do texto, acrescente no CSS:

.post-author{...aqui os estilos....}

Data do Post - HTML

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Data do Post - CSS

Não há estilo para a data no template Mínima. Acrescente no CSS:

.timestamp-link{ .... estilo .....}

Link Comentários - HTML

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Link Comentários - CSS

.comment-link {
margin-$startSide:.6em;
}

Marcadores - HTML

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Marcadores - CSS

Acrescente no CSS:
.post-labels{ ....estilo ....}

Não vou me estender para além destes elementos ou o post ficará enorme e também confuso, com excesso de informações. Para os outros elementos elaborarei novos tutoriais.

Agora que você conhece o significado destes códigos do HTML, poderá modificar suas posições no template de acordo com sua vontade. Basta selecionar, por exemplo, todo o trecho do html referente aos marcadores, recortar e colar abaixo do trecho para o título do post. Faça diversas experiências, modificando as posições dos códigos e acrescentando estilos diversos (como backgrounds coloridos) para cada um, aumentando a visibilidade do espaço que cada um ocupa na coluna main-wrapper. O interessante é destacar cada item com imagens diferentes, por exemplo, um background para os títulos dos posts e um ícone para os marcadores. Se você destacar um trecho, colar em outro local e receber uma mensagem de erro ou ser impedido de visualizar o blog, provavelmente você nã destacou o trecho completo (que deve ir de <span...> até </span>).

Para colocar um pequeno ícone ao lado de qualquer link (como marcadores ou o link comentários), basta acrescentar no CSS:

.post-labels{background: url(link da imagem do ícone)   no-repeat bottom left; padding-left:20px; } (para o ícone aparecer à esquerda do link)

para modificar a posição do link comentários:

.comment-link{float:right} o link aparecerá à direita no final do post.

Você pode ainda dar estilo às listas que criar nos seus textos:

.post ul{ ....estilo ....}
.post li{....estilo .....}


item de uma lista no post com imagem como marcador:

.post li {background: url(link da imagem ) no-repeat center left; padding-left:20px;} (a imagem aparecerá à esquerda do item, como eu uso aqui no meu blog).


Exemplo1 :


(clique para ampliar a imagem)

Neste exemplo eu coloquei uma imagem na coluna #main-wrapper (uma imagem que se repete indefinidamente) e uma cor para o background de post, ficando assim o código:

#main-wrapper {
  width: 700px;
  background: url(http://i30.tinypic.com/kcm36a.jpg)  repeat;
  border: 2px solid $bordercolor;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

.post {
  margin:15px 10px;
  background: #f5f5f5;
  padding:1.5em;
  border: 4px solid #c373a4
  }
Veja que em post eu estipulei uma margin de 15px para o topo e para a base (o que afasta um post do outro e cria o efeito de 'caixas' onde os posts aparecem), além de uma margem de 10px para a esquerda e direita, o que possibilita visualizar a imagem de fundo colocada em main-wrapper. Se a margem de post for 0 (margin:0px) o efeito é completamente diferente:


Veja que sem margin, o background de main-wrapper não pode ser visto nas laterais do post e um texto aparece imediatamente após o outro, sem nenhum espaço.

Note também que em .post, padding afasta o conteúdo (texto) das bordas:

.post {
  margin:15px 10px;
  background: #f5f5f5;
  padding:1.5em;
  border: 4px solid #c373a4
  }

Padding com um valor 0em ficaria assim:



Exemplo2: degrade (gradiente) no background de main-wrapper:

 

#main-wrapper {
width: 700px;
background: #fff url(http://i25.tinypic.com/29cph8n.jpg) repeat-x;
border: 2px solid $bordercolor;
float: $startSide;

Veja que neste exemplo, criei uma imagem dregrade rosa/branco, que se repete na horizontal (repeat-x) e antes do link da imagem coloquei o valor da cor (#fff - branco) do final da imagem:




Use a criatividade e crie estilos diferentes para #main-wrapper e para .post, além dos elementos contidos em Blog1. Recomendo o site do Maujor para aprender noções de CSS e dar estilo aos links e blocos.

Leia também:

Diferença entre margin e padding

Sabtu, 01 Agustus 2009

isFirstPost - Exemplo 2


Continuando o post anterior, explicarei aqui como deixar o seu blog como o Exemplo 2. Neste exemplo, os posts aparecem resumidos na página inicial e em formato de lista nos marcadores e arquivos (como uso aqui no meu blog). Além disso, usei jQuery no primeiro post, que esconde e revela parte do conteúdo sem sair da página.
Como lembrar nunca é demais, lá vai o conselho da titia: Nunca faça modificações diretamente no seu blog 'oficial'. Crie um blog de  testes para isso, evitando desesperos e dores de cabeça.
Atenção: se você seguiu o tutorial anterior e colocou os códigos para o Exemplo 1, substitua tudo pelo que se segue:

1- Clique em Expandir Modelo de Widget, procure por <b:include data='post' name='post'/> e substitua por:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div id='first'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

<p><data:post.body/></p>

<br/>
<span class='commentlink'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
</b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='first'>
<ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div></b:if></b:if></b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>

<b:else/>

<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

</b:if>

O que fiz aqui foi basicamente isso: Se a condição for o primeiro post na home page, o post aparecerá dentro da div First, exibindo título, texto e link para comentários, caso contrário, os posts aparecem normalmente nas páginas internas. E ainda, se for diferente das páginas internas e diferente da home page, o primeiro post deve aparecer em forma de lista ( <ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul> ). Se os posts não estiverem contidos em First (ou seja, todos os outros posts), também devem, nestas condições, aparecer em forma de lista (<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>) e fora de todas estas condições, os posts devem aparecer normalmente.

Provavelmente existe uma maneira mais simples e enxuta de organizar estas condições (e espero mesmo que sim!) mas confesso que passei muitas horas até conseguir organizar os códigos desta maneira e foi a única sequência lógica que realmente funcionou comigo. Prometo que assim que descobrir uma maneira mais simples ou direta de dispor as condicionais, volto aqui e explico para vocês.

Salve as modificações. Se você está começando agora, siga os passos do primeiro tutorial  para ver como aplicar o hack de resumos automáticos e esconder as informações de post-footer e data dos resumos, além do estilo para os resumos da página inicial. Lembre-se de modificar as medidas para que acompanhem a largura do primeiro post.

Se você já seguiu anteriormente o primeiro tutorial, a diferença aqui é que os estilos para First (tanto na página inicial quanto nas listas) serão colocados abaixo da tag ]]></b:skin>, dentro de uma condicional:

Estilo para First em forma de lista:

<style>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#first{margin:6px 0px;background:#fff;padding:6px;border:1px solid #e3e2e3; clear:both;}
#first ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;}
#first li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold}
</b:if></b:if></style>

<style>

Aqui estilo para First na home page:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
#first{ /* altere os estilos da forma que achar melhor */
float: left;
margin: 0px 0px 10px 5px;
width: 580px;
text-align:justify;
padding:0px 12px 12px;
font-size: 14px;
line-height: 1.4em;
font-family: &#39;Trebuchet MS&#39;;
color: #3b3b3b;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-right: 2px solid #E9E9E9;
border-bottom: 2px solid #E9E9E9;
background: #f8f8f8
}
#first h1 {margin: 10px 0 0 0; padding: 3px 20px 6px 20px;font-size: 24px;font-family: Verdana;color:#fff;border-bottom:1px dotted #aeb4af} /* estilo para o título */

#first h1 a{margin: 0px auto; padding: 0px;font-size: 24px;font-family: &#39;Palatino Linotype&#39;;font-weight:normal;color:#e71ea7;letter-spacing:1px; } /* estilo para o título */

#first img{margin: 0 5px 5px 0px;padding: 5px; background: #fff; border: 1px solid #dfc8d1; float:left;width: 150px;height:180px; } /* estilo para as imagens em first-post */
#first .commentlink{float:right} /* estilo para o link de comentários */

#first .date-header{float:right} /* estilo para a data */

</b:if></style>

Agora acima de ]]></b:skin> os estilos para a div 'títulos' que apresenta os outros posts em forma de lista nos arquivos e marcadores:

#titulos{margin:10px 0px 6px;background:#fff;padding:6px;border:1px solid #e3e2e3} /* estilo para a div */
#titulos ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;} /* estilo para a lista */
#titulos li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold} /* estilo para os itens da lista */

Para ver o resultado, entre neste blog e clique em algum marcador ou no mês de julho dos arquivos.

Para colocar o efeito de revelar/esconder no primeiro post, siga este tutorial   no Empório Digital. O efeito também aparecerá nos posts internos, não apenas na página inicial.

O exemplo 3 dispensa um novo tutorial, pois a diferença está apenas na medida dos posts resumidos, que ocupa toda a largura da coluna, ao contrário do exemplo dois, onde cada resumo ocupa metade da medida, ficando dispostos lado a lado.