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.

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
4. Como podemos projetar um site que será desenvolvido em WordPress?
5. • Planejar • Prever (não adivinhar)
6. – Rodolfo Fuentes
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
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.
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
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
23. Template Hierarchy http://wphierarchy.com/
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?
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
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
39. O que levar em consideração ao desenvolver um Wireframe?
41. Afinal, porquê eu deveria projetar meu site antes de começar a desenvolvê-lo?
42. Resultados Obtidos Recursos Utilizados Eficiência