Tópico: ‘CSS’

Making Of – Dia Mundial do Diabetes 2012

agosto 22nd, 2012
layout da home page

Dia Mundial do Diabetes 2012

Há alguns anos, fiz uma pesquisa para criar um relógio que contava as mortes relacionadas ao diabetes. Programei para um contador somar 1 óbito a cada 5 minutos. Diabetes é um problema de saúde pública avassalador, que dizima a população desde os tempos da revolução industrial e ainda hoje, em pleno século XXI, ainda não obteve a notoriedade e a importância que merece.

O website do Dia Mundial do Diabetes procura tirar este atraso e promover uma maior conscientização sobre o tema. Junto com as redes sociais e antenado com as ações da IDF – a entidade internacional – conseguimos, ao longo dos anos, agregar toda uma comunidade. Só no Facebook, o DMD tem mais de 4800 simpatizantes, mais uns 2000 seguidores do Twitter e incontáveis colaboradores nas fotos do Flickr e vídeos no Youtube.

Estamos usando Python/Django neste projeto há alguns anos. A cada ano o CMS recebe upgrades do framework (versões novas do Django), das ferramentas administrativas – a interface ‘Grapelli’, o editor de texto, o gerenciador de arquivos, etc; e também a cada ano o site recebe uma roupagem nova. Recriamos o layout com as mais recentes técnicas para a codificação html e css. Neste ano estamos implementando o conceito de design responsivo, em que o site procura se adaptar ao browser do usuário.

Em termos de design, inovamos retirando o tradicional menu vertical da lateral da home page. Os itens do menu que eram realmente necessários e úteis foram transferidos para um menu horizontal que fica bem abaixo da linha de rolagem do navegador. Estamos trazendo o foco da atenção do usuário para a região central da home page. Com isso ganhamos espaço precioso na parte de cima da página, onde podemos brincar com a diagramação das chamadas principais.

O dia mundial do diabetes é 14 de novembro, mas a Sociedade Brasileira de Diabetes começa a promover a campanha sempre com boa antecedência, e os resultados desse empenho prévio são visíveis depois, nos relatórios de visitação do site.

O novo site foi lançado em seu ‘modelo básico’ e melhorias serão adicionadas no decorrer das semanas. A linha do tempo será incrementada, colocaremos um mapa das atividades programadas por todo o Brasil e a manchete contará com um slideshow bonitinho.

 

Tópicos: , , , , , , , , ,
Publicados em Clientes, Web 2.0, Web Design | Comentários (0)

CEBDS – Sustentabilidade na Web

março 21st, 2012
hp antiga

a antiga Home Page

O site do Conselho Empresarial Brasileiro para o Desenvolvimento Sustentável (CEBDS), precisava de uma boa reforma. Os problemas eram vários, a começar pela home page. A imagem ao lado foi capturada dias antes da inauguração do novo layout. Reparem como ela é comprida e assimétrica. A coluna da direita era tomada de anúncios e é um dos bons exemplos de banner blindness que eu conheço.

DCPress foi contratada para analisar e diagnosticar o website antigo, rever as rotinas de trabalho da equipe do departamento de comunicação do CEBDS, e projetar e desenvolver um website www.cebds.org.br novo em folha.

O conteúdo do website antigo foi revisto página a página e sua arquitetura foi reorganizada. O novo layout da home page deverá oferecer um visual contemporâneo sem deixar de focar na boa apresentação das notícias, do material institucional e das publicações do CEBDS.

O código HTML era um emaranhado de tabelas e tags antiquados, característico daquela época em que os conceitos de usabilidade ainda engatinhavam e o CSS Zen Garden ainda era novidade. O sistema administrativo cuidava apenas da publicação das notícias no topo da home page, todo o restante tinha que ser atualizado diretamente no código por um programador. A plataforma ASP.NET em um servidor dedicado cujo contrato serviço de manutenção expirou e um provedor sem suporte técnico completavam o quadro apocalíptico característico daqueles projetos em que é melhor recomeçar do zero do que tentar consertar o que há de errado.

Cristina @fimdejogo Dissat, antiga parceira em inúmeros outros trabalhos bem sucedidos, me chamou para coordenar toda a parte técnica do trabalho e manter consultoria constante para os editores de conteúdo. Foi uma honra e um desafio, ao mesmo tempo. Para começar a produzir um website eu sempre gosto de entender um pouco do assunto. Sustentabilidade não é exatamente um conceito novo para mim, mas o termo desenvolvimento sustentável, dentro do contexto em que as grandes empresas trabalham, é um universo ainda a ser explorado.

rascunhos da home page

rascunhos da home page

Criamos um novo domínio “cebds.dcpress.com.br” para hospedar o novo site enquanto o original continuaria online. O perfil do cliente e as especificações do projeto sugerem a utilização de uma plataforma de programação bastante robusta e ágil, pronta para atender a uma demanda constante de novos serviços e melhorias. A dupla Python/Django se encaixa perfeitamente bem nessa função. O CMS que Andrews Medina e eu desenvolvemos já foi testado em várias aplicações diferentes e se mostrou bastante versátil. O VPS  do Dreamhost, apesar deste provedor  nunca ter sido referência na hospedagem de sites Python/Django, até então estava prestando um serviço satisfatório, quando não excelente.

Instalamos o software básico e uma versão genérica do CMS para que a DCPress pudesse tratar da revisão, rearrumação e transferência do conteúdo do site antigo. Enquanto a equipe de conteúdo trabalhava, eu e minha trupe faríamos um novo projeto gráfico e a programação das templates utilizando o que há de mais novo em HTML, CSS e javascript para tornar as páginas rápidas, atraentes e, acima de tudo, perfeitamente legíveis em qualquer tipo de navegador.

O acúmulo de trabalho em diversos projetos simultâneos e a estranha sensação de estar cansado do meu próprio estilo me levaram a chamar três novos integrantes para a equipe. Decidi não mais fazer sozinho o projeto gráfico, o layout e a programação das templates. O layout, grafismos, estudos de cores e tipologias ficariam a cargo do meu amigo e multi-artista Fabio Darci. Entre outros inúmeros talentos, o carioca Fabio domina como poucos a arte de projetar páginas bonitas e funcionais.

A HP atual

Novas tecnologias estão aparecendo a todo momento para acelerar e incrementar a qualidade do Web Design: CSS frameworksGrids, novas aplicações para o Ajax e também novas e criativas maneiras de utilizar os tags do framework Django que simplificam a comunicação com o banco de dados. Para me ajudar a manter meus sites por dentro das mais recentes inovações, incorporei mais uma fera ao time de desenvolvedores: a matogrossense Mayza de Oliveira passou a cuidar dessa parte espinhosa – de transformar os delírios inventados no Photoshop em um código dentro dos rígidos padrões impostos.

Andrews me apresentou mais um desenvolvedor experiente em Django, o capixaba de criação Francisco Souza, que entrou para a equipe para ajudar na instalação do servidor no Linode e para trabalhar em paralelo com o Andrews na produção e customização dos aplicativos do CMS.

Uma equipe como essa exige a utilização de uma ferramenta de trabalho em grupo, um sistema de controle de versões para evitar a todo custo as temíveis “cabeçadas”, em que dois ou mais integrantes fazem a mesma coisa e um sobrescreve o trabalho do outro, ou o ainda mais terrível “deixa que eu deixo” onde todos pensam que alguém vai resolver o problema e ninguém resolve. Optamos por usar o Bitbucket – um serviço de hospedagem de projetos controlados através do Mercurial,  gratuito para pequenas equipes. Apesar do desconforto inicial de ter que aprender e adotar todo um procedimento (Pull -> Update -> Edit -> Save -> Commit -> Push -> Deploy) e de abandonar o bom e velho FTP para atualizar os arquivos diretamente no servidor do site, a solução do Bitbucket tem se mostrado realmente eficiente.

Nesse meio tempo, tivemos que trocar todos os nossos sites feitos em Python para outro provedor, por conta de vários problemas técnicos que começaram a pipocar e não foram solucionados pelo suporte do Dreamhost. Seguindo a recomendação de gente que entende do assunto, contratei um novo VPS no provedor Linode.com. Como num passe de mágica, todos os bugs esquisitos que geravam erros no servidor sumiram e o CMS voltou a funcionar perfeitamente. Além disso, o acesso aos sites ficou bem mais rápido.

Enfim, o novo site foi lançado na véspera do Carnaval 2012 e a resposta do público foi muito boa. Ainda é cedo para tirarmos conclusões a partir das métricas, mas, nessas primeiras semanas, simplesmente duplicamos a visitação média do site.

 

Tópicos: , , , , , , , , , , , ,
Publicados em Casos, Clientes, Provedores, Web Design, Web Mastering | Comentários (0)

CDBH Online! positivo! operante!

agosto 10th, 2009
CDBH

CDBH

Trabalho instigante, desafiador, perfeccionista, atabalhoado – a equipe foi-se formando à medida em que o projeto demandava talentos – fruto de várias cabeças pensantes em um único objetivo. Este é o projeto do website www.cdbh.com.br.  Fizemos a 6 mãos – O médico endocrinologista Rodrigo Lamounier, atarefado com os tijolos da reforma da casa e com detalhes do layout da home page, e a jornalista Leticia Orlandi, chamada aos 40 do segundo tempo para colocar ordem no meio de campo. Entrou, colocou ordem e ainda ajudou no layout e na arquitetura.

O WordPress foi definido como a melhor plataforma para este website. Essa escolha é estratégica: depende das circunstâncias do mercado – se há ou não disponibilidade de mão de obra (programadores) ; depende das recentes conversas e opiniões de colegas, do que falam as revistas da semana, até da preferência dos hackers desocupados. Até há pouco tempo atrás eles gastavam seu tédio quebrando a segurança do wordpress.

Para mim, o wordpress é tudo de bom. A biblioteca de ferramentas disponíveis é absurda de grande, os upgrades automáticos são uma mão na roda. Estou ficando cada dia mais ágil na customização de páginas, menus e  CSS. O WordPress dá uma pré-mastigada e nos facilita bastante a programação em PHP. Com um trivial de javascript, qualquer um, inclusive eu, faz um site tunado como o do CDBH.

Pra deixar o site na moda, como dizem meus clientes, nada como um slaidechou. Usando o termo técnico adequado, o Featured Content Gallery é simplesmente um MUST hoje em dia. Uma homepage sem um crossfade de imagens é como uma pessoa de camiseta numa festa formal.

A nuvem de tags em 3D entrou no projeto inicial, depois saiu, depois entrou de novo. Há controvérsias quanto a sua utilidade. Bonita e atraente ela ficou. Utilidade ela terá, se a equipe editorial escolher tags interessantes para rodar ali. Veremos sua eficiência nos relatórios de métricas.

Os mapas também merecem atenção. Minha solução padrão, que satisfez a todos os meus antigos clientes, simplesmente não agradou o Rodrigo.  Ele queria meios de criar rotas de acesso. A pesquisa por uma ferramenta nova de mapeamento não durou 5 minutos. Trombei logo com o Umapper, que dispensa comentários. É simples e poderoso.

A idéia é fazer um site institucional com funções bem específicas para agilizar o agendamento de consultas e promover as atividades do CDBH ao seu público.  Tentamos aplicar o máximo de objetividade, o mínimo de firulas, aproveitar todas as formas de interação com o público que a internet nos oferece, e isso inclui todos os bricabraques que os blogs nos oferecem: trackbacks, comentarios,  tags, categorias, etc. e mais o apoio das grandes redes sociais, principalmente google/youtube e twitter, para complementar uma estratégia completa.

O site nem estreou e já tem mais de 100 visitas diárias. Pensando nesse público inicial, desde o primeiro dia que o domínio foi criado já existe uma home page com um mínimo de informação. Todo o trabalho de layout da home page e das páginas internas foi feito online e em realtime, as páginas e artigos foram criados a olhos vistos. Uma certa ousadia bem calculada que resultou numa enorme economia de tempo. Quando a stamina acabava antes do término de alguma etapa, a página era colocada “em rascunho” e não aparecia para o público. Dessa forma nunca decepcionamos ninguém com páginas que existem no menu mas estão “em construção”.

Bem vindo ao cyber espaço, CDBH.

Tópicos: , , , , , , , ,
Publicados em Clientes, Redes Sociais, SEO, Tecnologia, Web 2.0, Web Design, Web Mastering | Comentários (0)

SBEM 2008 inaugurado em plena reunião

novembro 9th, 2008

Bastou um <meta http-equiv=”Refresh” …> , incluído no arquivo index.php enquanto eu estava no púlpito da sala da reunião do Conselho de Comunicação Social da SBEM, depois de uma breve exposição do layout, e o site da SBEM pulou para a nova home page em crescimento.org.br.

A jogada, simplíssima para nós, webmasters, causou efeito na platéia que, ao final da apresentação, soltou palmas entusiasmadas. Em pleno ICE – Congresso Internacional de Endocrinologia, a Sociedade Brasileira de Endocrinologia tem a audácia de trocar a sua Home Page, não só isso, adotar outro sistema de administração de conteúdo (CMS) produzido em Django pelo brother Andrews Medina, abandonando de vez o sistema em PHP.

A correria foi grande e só conseguimos aprontar o CMS horas antes da reunião. Mas… Nosso CMS é bastante robusto. O Django permite que, a partir de um projeto básico inicial, façamos personalizações de acordo com as necessidades do cliente em tempo recorde.

A equipe de jornalismo da Informed já havia feito uma pré-seleção das matérias que fariam parte da capa do site. Na hora da apresentação, ao vivo e a cores, nós rearrumamos as chamadas, publicamos algumas novas para o SBEM Reporter falando sobre o ICE e… pronto…  Home Page nova da SBEM está no ar.

Tópicos: , , , , , , ,
Publicados em Tecnologia, Web Design, Web Mastering | Comentários (0)

CSS Naked Day

abril 26th, 2008

Soube com atraso que dia 9 de abril é o dia CSS Naked Day, onde os desenvolvedores do mundo inteiro retiram os links dos CSS e os sites ficam nús, apresentando apenas o seu conteúdo, como se estivesse sendo visto por um daqueles navegadores da idade pré-web. Ano que vem prometo fazer parte desse jogo, com o meu site pessoal, claro. Se fizer isso com algum site de algum cliente, serei um webmaster morto no dia seguinte.

A idéia do evento é promover os  Web Standards. Isso inclui o bom uso de vários elementos tais como (X) HTML, semântica, estrutura hierárquica e, obviamente, um texto muito bem escrito.  ” It’s time to show off your <body>! “

Tópicos: , , , ,
Publicados em Sem categoria | Comentários (0)

Música nas Igrejas 2008

fevereiro 14th, 2008

Musica nas Igrejas 2008Já está no ar, porém ainda em fase de aprovação, a nova página com a programação do projeto “Música nas Igrejas”, dirigido plea cravista Rosana Lanzelotte e coordenado pela minha amiga multi-tasking Celina.

Para manter a identidade visual com o material impresso, que usa a Garamond no no novo logotipo, optei por usar um tag <h1> “escondido” por meio de css (display:none;) na esperança de que o Google não ache isso muito estranho e indexe a página sem grandes probemas.

O projeto tende a crescer  – ideal seria ter um sistema gerenciando cadastros de eventos, igrejas e músicos, e uma home page que destacasse o evento mais recente e mostrasse detalhes dos mais próximos.

Tópicos: , , , , ,
Publicados em Clientes, Web Design | Comentários (0)

  • Eduardo Frick

    Atualmente em versão 4.6, Eduardo é Webmaster, webdesigner, web-consultor, web-coordenador de projetos. Tem longa experiência em produção gráfica e é fluente em diversas mídias.

    É carioca da gema, mas mora em Mogi das Cruzes, São Paulo. De seu escritório/estúdio, projeta e cria websites, coordena equipes de desenvolvimento e de conteúdo, recruta e supervisiona o trabalho de analistas, programadores, fotógrafos, ilustradores, animadores, redatores e demais especialistas que garantem serviços de qualidade aos seus clientes espalhados por todo o Brasil.

  • Todos os artigos, por Mês.

  • Temas