gif_1 12.11.15

Magician: o que um template precisa�

magician_2

Olá gente,

Já há algum tempo venho pesquisando sobre ferramentas e métodos para desenvolver um template completo e multifuncional visando a comunidade de desenvolvedores como público direto.
A partir de hoje compartilharei todo os avanços quanto ao desenvolvimento do Magician, meu template para wordpress.
Vocês poderão acompanhar aqui no blog, etapa por etapa, o desenvolvimento de um template desde o princípio e seria demais ter o feedback de vocês nos comentários, podemos trocar muitas ideias e formular novos insights!

Vamos lá então!

Para o desenvolvimento do Magician, proponho as seguintes etapas: Pesquisa, Escolha de plugins, Design e Identidade visual, Programação, Publicidade para o template, Publicação e upload no ThemeForest.
Essas não são etapas definitivas, talvez eu precise acrescentar mais algumas no decorrer do processo mas hoje vou falar especificamente sobre o meu progresso na etapa de Pesquisa.

Compartilho o vídeo acima de uma entrevista com Tom McFarlin, o cara que criou o tema padrão do wordpress e dá vários insights para a comunidade de desenvolvedores.

Etapa 1: PESQUISA – O que um excelente template precisa ter�

São inúmeros fatores determinantes na receptividade do seu tema pela comunidade empreendedora que gira em torno do wordpress.

  1. Multifuncional

    É fundamental que seu projeto de template tenha em vista ser multifuncional. Isso significa que ele precisa oferecer, ao profissional da comunidade que o adquirir a possibilidade de customização, personalização, flexibilidade.
    O tema precisa oferecer ferramentas flexíveis de ajustes no layout e permitir que se crie uma identidade diferenciada. O tema necessita de um painel de opções que permita ao usuário alterar as principais funcionalidades do tema. Upload de marca, seleção do layout – se ele será fixo ou fluído, alinhamento, opções de estilo, opção do Header, dados do rodapé, personalização da sidebar, etc…
    No menu ‘Opções do Tema’ é onde a gente pode inserir todas as customizações do tema, esse painel é subdividido em várias categorias.

    Segue uma lista com os melhores frameworks para criação de opções de tema no wordpress. O Redux para ser bem legal e fácil de usar, nesse link tem toda a documentação e exemplos de como utilizá-lo!
  2. SEO Ready

    Na hora de projetar o template não podemos esquecer de configurar todos os parâmetros de cada TAG – title, meta, slogans, navegação, h1 h2 h3…, listas, alt tag, links de texto, links no rodapé, palavras-chave, tamanho das imagens, velocidade de carregamento, integracão com as redes sociais, ferramentas de compartilhamento. Somando-se todos esses fatores assim como a organização geral e legibilidade do seu código, temos vantagem no posicionamento do nosso template. É importante manter um padrão na sua linguagem e na formatação do seu código, até mesmo porque o código será extenso e depois vocês vai agradecer por manter as coisas organizadas. Seguem 6 dicas de como tornar seu site SEO READY.
  3. Retina Ready

    Embora seja óbvio não custa nada ressaltar que o template precisa ter boa leitura em qualquer dispositivo. Isso significa que as imagens precisam carregar de acordo com a plataforma em que forem carregadas. Imagens em dispositivos móveis possuem mais pixels que no desktop. Um template que não prevê imagens de retina exibirá imagens borradas em celulares e tablets. Segue um excelente tutorial de retina readu sobre como preparar as imagens do seu site para abrir em qualquer dispositivo.
  4. Variedade de layouts

    O usuário sempre vai dar preferência à templates que trouxerem várias opções de layout para cada seção do site. Quanto maior o leque de opções de layout, mais abrangente será a parcela de desenvolvedores alcançados.
    Existe um padrão básico de categorias e funcionalidades que o template deve prever: Slider (Revolution Slider, Layer Slider, Elastic Slider), Header (O template pode oferecer algumas opções diferentes de cabeça, com variação de formatos, alinhamento, etc… uma cabeça pode ser alinhada a esquerda, outra pode ter cores invertidas com o fundo escuro…), Páginas (Sobre nós, Sobre mim, Página de serviços, Conheça o time, Página de contato, Galeria de produtos, Mosaico de imagens, Portfólio com 2 colunas, Portfólio com 3 colunas, Portfólio com sidebar, sem sidebar, Blog em formato de grade, Blog em formato de lista, Blog com thumbnails grandes, médias, pequenas…).
    Estabelecer essa variedade e flexibilidade de layout é muito mais prático por meio de um editor drag-n-drop de componentes dentro do próprio wordpress, um pagebuilder. Ao invés de manter rígida as opções de layout para os desenvolvedores, nós podemos permitir maior flexibilidade usando, por exemplo, o visual composer.
    Existem outras opções de pagebuilders para o wordpress, mas até o momento, o visual composer me parece ser o mais eficiente, bug free e fácil de usar. Segue a documentação dele.
  5. Transições

    Um projeto de interface que tem atenção aos detalhes se destaca sem sequer o usuário perceber o porquê. A sutileza de uma interface bem projetada vai desde os espaços vazios até a diagramação dos espaços preenchidos, da transição da cor de um botão ao movimento de uma aba ao passar o mouse sobre dela. As transições em SVG permitem extrapolar a criatividade em uma dimensão mais profunda. Usar SVG diretamente no código permite um alto grau de costumização e flexibilidade, leveza de movimentos e compatibilidade. Vejam essa referência sobre o uso de SVG
  6. Instalação

    O template precisa ser fácil de instalar! Pessoalmente, já quebrei a cabeça incontáveis vezes com templates super difíceis de configurar e que muitas das vezes, no fim da instalação, não se pareciam em nada com a versão original vendida. Tem templates muito difíceis de configurar e isso é o que não queremos. Nesse link tem algumas dicas de como fazer a exportação/importação de conteúdo pelo wordpress, mas o que gostei mesmo é do Radium One Click Demo Install, um plugin que preserva todas as suas configuração do Redux e gera um pacote para instalação em apenas um clique.
  7. Concluímos que…

    Não é tão difícil quanto parece desenvolver um template para a comunidade. Se você já tem experiência como desenvolvedor dos seus próprios templates de wordpress, você já tem meio caminho andado.
    Unindo a praticidade de um Options Panel como o Redux com a flexibilidade de um Pagebuilder como o VisualComposer fica muito mais compreensível e dinâmica a criação de cada seção do seu template. Colocando cada peça em seu lugar e estabelecendo um planejamento claro, passo a passo, pouco a pouco, seu template tomará forma e se tornará um produto lapidado e útil para toda a comunidade. Mãos à obra!

E você amigo desenvolvedor? Como andam seus projetos? Quais suas dúvidas? Compartilha seus pensamentos com a gente, sua opinião é muito importante e desejada!

© guibento.com, 2015. All rights reserved. Done by Gui Bento