Projetando para WordPress

Projetando para WordPress

Apresentação realizada no WordCamp Belo Horizonte 2015. Como podemos planejar um projeto WordPress? Na palestra foi discutido isso a partir de sua concepção inicial e informações a serem coletadas no Briefing (Análise de Requisitos), planejamento da Arquitetura do site (Organogramas/Sitemaps) utilizando diagramas, até a elaboração do Wireframe onde pode-se explorar a usabilidade e funcionalidades do site.

Com isso, ressaltar a importância de uma abordagem metodológica concisa, ainda que se trabalhe sozinho ou com uma equipe pequena, e principalmente em equipes maiores.

0994c68a06a2bd44e6fd72208550cf5f?s=128

Allyson Alves de Souza

December 02, 2015
Tweet

Transcript

  1. Allyson Souza WordCamp BH 2015

  2.  Tecnólogo em Jogos Digitais, Técnico em Design Gráfico. 

    Professor no Curso Técnico de Programação de Jogos Digitais da ETEC Godofredo Furtado.  Co-fundador da Haste Design onde atua com web, games e motion graphics. Contatos
  3. None
  4. Como podemos projetar um site que será desenvolvido em WordPress?

  5. • Planejar • Prever (não adivinhar)

  6. – Rodolfo Fuentes

  7. None
  8. Estudo dos métodos. Organização e ordenação de diversos métodos a

    serem empregados.
  9. Meios ou maneiras de se obter um resultado desejado. Etapas

    ou Processos
  10. Waterfall (Cascata/Top Down) Modelo sequencial, desenvolvimento em fluxo constante em

    direção às fases seguintes. Agile (Desenvolvimento Ágil) Modelo que busca minimizar os 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ção Produto Final
  11. None
  12. None
  13. Não existe um padrão ou convenção de metodologia para o

    desenvolvimento web, tão pouco para WordPress.
  14. Projeção Se não temos uma intenção, não temos motivos para

    a ação.
  15. None
  16. None
  17. 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.”
  18. Qual é a proposta do site? Qual é o objetivo

    do site? Que conteúdo o site apresentará? 1 2 3
  19. None
  20. Definir como as informações/conteúdos serão estruturados.

  21. Banco de Dados Acesso a uma página Consulta Direcionamento Template

    Template Template
  22. None
  23. Template Hierarchy http://wphierarchy.com/

  24. None
  25. index.php

  26. Post Page Attachment Revision Menu https://codex.wordpress.org/Post_Types#Default_Post_Types

  27. 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
  28. Posts Post #1 Post #2 Post #3 category-$slug.php category-$id.php category.php

    index.php Arquivos Culinária Categoria
  29. Posts Post #1 Post #2 Post #3 tag-$slug.php tag-$id.php tag.php

    index.php Arquivos wcbh2015 Tag wcbh2015 wcbh2015 wcbh2015
  30. 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ções CPT Unidade Título Descrição Endereço Telefone Horário de Funcionamento Meta Informações CPT
  31. Taxonomias são meio de agrupamento/classificação das publicações. (Categorias/Tag, por exemplo)

    Receitas Tipo de Prato Taxonomias CPT Termos Massas Sobremesas Carnes Saladas
  32. Como podemos transpor as informações do Briefing para uma linguagem

    que se relacione com o WordPress e a Template Hierarchy?
  33. None
  34. 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
  35. Pratos Tipo de Prato • 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
  36. None
  37. No wireframe detalhamos a 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
  38. None
  39. O que levar em consideração ao desenvolver um Wireframe?

  40. None
  41. Afinal, porquê eu deveria projetar meu site antes de começar

    a desenvolvê-lo?
  42. Resultados Obtidos Recursos Utilizados Eficiência

  43. None
  44. None