Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Projetando para WordPress

1,043 views

Published on

Palestra apresentada no WordCamp Belo Horizonte 2015, abordando como podemos projetar um site que será desenvolvido utilizando a plataforma WordPress.

Published in: Software
  • Be the first to comment

Projetando para WordPress

  1. 1. Allyson Souza WordCamp BH2015
  2. 2.  Tecnólogo em Jogos Digitais, Técnico em Design Gráfico.  Professor no Curso Técnico de Programaçãode Jogos Digitais da ETEC Godofredo Furtado.  Co-fundador da Haste Design onde atua com web, games e motion graphics. Contatos
  3. 3. Como podemos projetar um site que será desenvolvido em WordPress?
  4. 4. • Planejar • Prever (não adivinhar)
  5. 5. – Rodolfo Fuentes
  6. 6. Estudo dos métodos. Organizaçãoe ordenação de diversos métodos a serem empregados.
  7. 7. Meios ou maneiras de se obter um resultadodesejado. Etapas ou Processos
  8. 8. Waterfall(Cascata/Top Down) Modelo sequencial, desenvolvimentoem fluxo constanteemdireção às fases seguintes. Agile(Desenvolvimento Ágil) Modelo que busca minimizaros riscos de desenvolvimento,quebrando-o em iterações. Requerimento Projeto Implementação Verificação Manutenção Requisitos Implementação Entrega Entrega Implementação Entrega ImplementaçãoProduto Final
  9. 9. Não existe um padrão ou convenção de metodologia para o desenvolvimento web, tão pouco para WordPress.
  10. 10. Projeção Se não temos uma intenção,não temos motivos paraa ação.
  11. 11. O queé? Briefing [Dossiê] • Levantamento de dados para o desenvolvimento do projeto. • É um mapeamento dos problemas, objetivos e demais informações pertinentes ao planejamento prévio do projeto. “Não pergunte para o cliente a solução que ele deseja, mas sim os problemas que ele possui.”
  12. 12. Qual é a proposta do site? Qual é o objetivo do site? Que conteúdo o site apresentará? 1 2 3
  13. 13. Definir como as informações/conteúdosserão estruturados.
  14. 14. Banco de Dados Acesso a uma página Consulta Direcionamento Template Template Template
  15. 15. Template Hierarchy http://wphierarchy.com/
  16. 16. index.php
  17. 17. Post Page Attachment Revision Menu https://codex.wordpress.org/Post_Types#Default_Post_Types
  18. 18. Sobre Serviços Diferenciais Promoções Páginas Posts Post #1 Post #2 Post #3 Hierarquia Cronologia index.php [home.php] Possui Arquivo Custom Templates services.php, promo.php
  19. 19. Posts Post #1 Post #2 Post #3 category-$slug.php category-$id.php category.php index.php Arquivos Culinária Categoria
  20. 20. Posts Post #1 Post #2 Post #3 tag-$slug.php tag-$id.php tag.php index.php Arquivos wcbh2015 Tag wcbh2015 wcbh2015 wcbh2015
  21. 21. Quando você trabalharácom conteúdos que tem uma natureza diferente ou que possuam meta informações diferentes dos conteúdos padrão. Receitas Título Descrição Ingredientes Modo de Preparo Custo Meta InformaçõesCPT Unidade Título Descrição Endereço Telefone Horário de Funcionamento Meta InformaçõesCPT
  22. 22. Taxonomias são meio de agrupamento/classificaçãodas publicações.(Categorias/Tag,por exemplo) Receitas Tipo de Prato TaxonomiasCPT Termos Massas Sobremesas Carnes Saladas
  23. 23. Como podemos transporas informações do Briefing para uma linguagem que se relacione com o WordPress e a Template Hierarchy?
  24. 24. Home Sobre Pratos Contato Blog Costela ao Molho Pardo Ceviche Erro 404 index.php archive-{post_type}.php single-{post_type}.php page.php page-sidebar.php 404.php Post Estrutura Legenda single.php
  25. 25. Pratos Tipo dePrato • Entrada • Prato Principal • Sobremesas Título : text Descrição : textarea Imagem Destacada : image Fotos do Prato : image[ ] Unidades Região • Norte • Sul • Leste • Oeste • Centro Título : text Endereço : map Imagem Destacada : image
  26. 26. No wireframe detalhamosa navegação.O design da interface gráfica do site começa, de fato, nesta etapa. 1. Wireframe é onde o Design é iniciado. 2. Levar em consideração os princípios de UX 3. Testar e Adaptar
  27. 27. O que levar em consideração ao desenvolver um Wireframe?
  28. 28. Afinal, porquê eu deveria projetar meu site antes de começar a desenvolvê-lo?
  29. 29. Resultados Obtidos Recursos Utilizados Eficiência

×