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

1. Allyson Souza
WordCamp BH2015

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

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çãoe ordenação de diversos métodos a serem
empregados.

9. Meios ou maneiras de se obter um resultadodesejado.
Etapas ou Processos

10. 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

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 paraa 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údosserã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çõesCPT
Unidade
Título
Descrição
Endereço
Telefone
Horário de Funcionamento
Meta InformaçõesCPT

31. Taxonomias são meio de agrupamento/classificaçãodas
publicações.(Categorias/Tag,por exemplo)
Receitas
Tipo de Prato
TaxonomiasCPT
Termos
Massas
Sobremesas
Carnes
Saladas

32. Como podemos transporas 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 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

37. 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

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