![\"thumb-apresentacao-ppt-para-locacao\"](\"https:\/\/i0.wp.com\/2014.riodejaneiro.wordcamp.org\/files\/2014\/09\/thumb-apresentacao-ppt-para-locacao.jpg?resize=700%2C270&ssl=1\")
<\/p>\nBrincadeira, vou contar pra voc\u00eas um pouco de como foi o meu processo de estudo, concep\u00e7\u00e3o e cria\u00e7\u00e3o do layout do site WordCampRJ, que foi codificado pelo Gustavo Bordoni, um dos organizadores do evento.<\/p>\n
Muito antes de pensar em HTML e CSS os amigos da organiza\u00e7\u00e3o me pediram para criar o PPT da apresenta\u00e7\u00e3o da proposta de loca\u00e7\u00e3o no come\u00e7o desse ano. Ainda n\u00e3o t\u00ednhamos conversado com o Senac na \u00e9poca e est\u00e1vamos prospectando pela cidade e esse PPT foi a porta de entrada para o layout.<\/p>\n
<\/p>\n
Por causa dele eu fiz uma pesquisa bem profunda nos sites das outras cidades l\u00e1 na Central WordCamp dos \u00faltimos 2 anos, e que me gerou um “DOC XICANTE<\/a>“, e dele a estrutura de p\u00e1ginas para o projeto.<\/p>\n Mas a\u00ed voc\u00ea diria: “u\u00e9, n\u00e3o \u00e9 esse o conceito dos padr\u00f5es web, igual como faz\u00edamos no saudoso CSS Zen Garden?<\/strong><\/em>” Sim, \u00e9. Mas ainda sim, limitar o XHTML e se diferenciar dos demais WordCamps era o grande desafio, e n\u00e3o “layoutar” pelo CSS. Mesmo porque, o Bordoni \u00e9 um verdadeiro Neymar como front\/back-end, e isso n\u00e3o foi um problema pra ele! \ud83d\ude00<\/p>\n Depois de conversar um bocado com ele sobre as ‘Custom post Types<\/em>‘ e ‘Custom post Taxonomy<\/em>‘ do tema (‘Speakers<\/em>‘, ‘Sponsors<\/em>‘, ‘Organizers<\/em>‘, etc.), eu parti para a cria\u00e7\u00e3o das duas telas de ‘wireframes<\/em>‘ conceituais, que uma vez aprovadas pelos amigos da organiza\u00e7\u00e3o, eu finalizei as p\u00e1ginas restantes e ent\u00e3o comecei a desenhar o layout em PSD.<\/p>\n O apelo mais forte do layout \u00e9 a identifica\u00e7\u00e3o da cidades pelos seus cart\u00f5es-postais. Ok, \u00e9 um pouco clich\u00ea sim, mas como o evento \u00e9 internacional, fugir desse conceito seria um tiro no p\u00e9, basta ver o resultado da pesquisa que eu fiz nos outros sites. <\/p>\n O principal diferencial seria mostrar nitidamente as caracter\u00edsticas da cidade no layout em si. E coube \u00e0s imagens dos principais pontos tur\u00edsticos esse papel. Esse conceito ficou t\u00e3o emblem\u00e1tico para n\u00f3s, que o utilizamos inclusive nas cotas de patroc\u00ednios que receberam nomes com esse tema. Para cada p\u00e1gina, uma imagem aleat\u00f3ria de um foto do Rio de Janeiro seria exibida no ‘background<\/em>‘, com exce\u00e7\u00e3o da “Home” que tem a imagem fixa da est\u00e1tua do mestre Carlos Drummond de Andrade<\/strong>. <\/p>\n Dentre as fotos n\u00f3s escolhemos a praia de Copacabana<\/strong>, o P\u00e3o de A\u00e7\u00facar<\/strong>, Corcovado<\/strong>, Maracan\u00e3<\/strong> e os Arcos da Lapa<\/strong> como atra\u00e7\u00f5es visuais para o site.<\/p>\n Um tema bastante discutido entre a galera da organiza\u00e7\u00e3o foi a paleta de cores do projeto. O bicho pegou nos bastidores, e a discuss\u00e3o ficou entre os argumentos “as cores est\u00e3o muito americanizadas<\/strong><\/em>” e “quais s\u00e3o as verdadeiras cores que representam o Rio de janeiro?<\/strong><\/em>” e como n\u00e3o chegamos a um consenso eu bati o martelo e optei pelas cores oficial do WordPress<\/a> porque entendi que elas n\u00e3o ferem a identidade carioca do site.<\/p>\n Como n\u00f3s usamos o tema ‘Twenty Thirteen’ como base para editar o CSS, obedecemos tanto a sua tipologia nativa, como tamb\u00e9m o seu pequeno grupo de \u00edcones nas postagens.<\/p>\n J\u00e1 na p\u00e1gina “Patrocinadores”, criamos uma estrutura de visualiza\u00e7\u00e3o do respectivo logotipo baseado na cota contratada. Ou seja, quanto maior a cota, maior o tamanho exibido do logotipo na tela. Al\u00e9m disso, contemplamos nessa p\u00e1gina a listagem de “Patrocinadores Lapa”, que \u00e9 uma forma de micro-patroc\u00ednio feito por uma pessoa f\u00edsica, como forma de apoiar o evento, que, em contrapartida, tem o seu link divulgado nessa p\u00e1gina tamb\u00e9m, claro!<\/p>\n Outro destaque \u00e9 a p\u00e1gina que preparamos chamada “Guia de Sobreviv\u00eancia” para orientar o usu\u00e1rio que vai ao evento e mora num bairro mais distante, cidade, ou at\u00e9 mesmo em outro pa\u00eds e n\u00e3o conhece nada no entorno do Senac e precisa de um apoio em refer\u00eancias da organiza\u00e7\u00e3o. Essa p\u00e1gina \u00e9 um \u00edndice para as sub-p\u00e1ginas “Como chegar”, com orienta\u00e7\u00f5es das principais portas de entradas da cidade; “Onde se hospedar” com um mapa dos principais hot\u00e9is via Google Maps e “Onde almo\u00e7ar” com uma enorme lista das principais op\u00e7\u00f5es para fazer uma refei\u00e7\u00e3o.<\/p>\n E claro, n\u00e3o pod\u00edamos deixar esse tema de fora, todo esse projeto \u00e9 ‘web responsivo’, ou seja, roda bonito nos dispositivos m\u00f3veis, mas se voc\u00ea ainda n\u00e3o sabe nada sobre esse assunto, se inscreva no evento que vamos falar sobre isso tamb\u00e9m no meu painel! \ud83d\ude00<\/p>\n Esperamos que voc\u00eas tenham gostado do site e nos vemos no dia 20 de setembro! Agora que o site est\u00e1 completo, bora desconstru\u00ed-lo! \ud83d\ude00 Brincadeira, vou contar pra voc\u00eas um pouco de como foi o meu processo de estudo, concep\u00e7\u00e3o e cria\u00e7\u00e3o do layout do site WordCampRJ, que foi codificado pelo Gustavo Bordoni, um dos organizadores do evento. Muito antes de pensar em HTML e CSS os amigos da organiza\u00e7\u00e3o … Continue lendo Desconstruindo o layout do WordCampRJ<\/span> Integrando os conceitos com o Front\/Back-end antes de abrir o Photoshop<\/h3>\n
![\"'Custom](\"https:\/\/i0.wp.com\/2014.riodejaneiro.wordcamp.org\/files\/2014\/09\/thumb-features-admin-wordcamp-site.jpg?resize=165%2C214&ssl=1\")
O site do WordCamp obedece um formato pr\u00f3prio, todo pensado no modelo do evento. No tema disponibilizado para as cidades pelo WordPress, n\u00f3s n\u00e3o podemos mexer no XHTML, ficando \u00e0 cargo do CSS toda a estiliza\u00e7\u00e3o do tema. <\/p>\nHora de digitar “CTRL + N” no Photoshop<\/h3>\n
![\"thumb-estatua-drummond-de-andrade-em-copacabana\"](\"https:\/\/i0.wp.com\/2014.riodejaneiro.wordcamp.org\/files\/2014\/09\/thumb-estatua-drummond-de-andrade-em-copacabana.jpg?resize=700%2C270&ssl=1\")
<\/p>\nDesconstruindo o layout<\/h3>\n
![\"Layout](\"https:\/\/i0.wp.com\/2014.riodejaneiro.wordcamp.org\/files\/2014\/09\/thumb-layout-pagina-programacao.jpg?resize=350%2C467&ssl=1\")
Na p\u00e1gina “Programa\u00e7\u00e3o” criamos uma legenda baseadas em cores para diferenciar os tipos de palestras, facilitando o entendimento dos usu\u00e1rios dos conte\u00fados apresentados. Na tabela, todos os palestrantes possuem links \u00e2ncora apontado para a sua posi\u00e7\u00e3o na p\u00e1gina “Palestrantes”, que mesmo sendo de exibi\u00e7\u00e3o aleat\u00f3ria, aportam no avatar e descri\u00e7\u00e3o do palestrante desejado.<\/p>\nUm projeto que cabe no seu smartphone<\/h3>\n
\nAt\u00e9 la!<\/p>\n","protected":false},"excerpt":{"rendered":"