Slide 1
Slide 1 text
Allyson Souza
WordCamp BH 2015
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Como podemos projetar um site que será
desenvolvido em WordPress?
Slide 5
Slide 5 text
• Planejar
• Prever (não adivinhar)
Slide 6
Slide 6 text
– Rodolfo Fuentes
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Estudo dos métodos.
Organização e ordenação de diversos métodos a serem
empregados.
Slide 9
Slide 9 text
Meios ou maneiras de se obter um resultado desejado.
Etapas ou Processos
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Não existe um padrão ou convenção de metodologia para o
desenvolvimento web, tão pouco para WordPress.
Slide 14
Slide 14 text
Projeção
Se não temos uma intenção, não temos motivos para a ação.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
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.”
Slide 18
Slide 18 text
Qual é a proposta
do site?
Qual é o objetivo
do site?
Que conteúdo o
site apresentará?
1 2 3
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Definir como as informações/conteúdos serão estruturados.
Slide 21
Slide 21 text
Banco de Dados
Acesso a uma página
Consulta
Direcionamento
Template
Template
Template
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Template Hierarchy
http://wphierarchy.com/
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
index.php
Slide 26
Slide 26 text
Post Page Attachment Revision Menu
https://codex.wordpress.org/Post_Types#Default_Post_Types
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
Posts
Post #1
Post #2
Post #3
category-$slug.php
category-$id.php
category.php
index.php
Arquivos
Culinária
Categoria
Slide 29
Slide 29 text
Posts
Post #1
Post #2
Post #3
tag-$slug.php
tag-$id.php
tag.php
index.php
Arquivos
wcbh2015
Tag
wcbh2015
wcbh2015
wcbh2015
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Como podemos transpor as informações do Briefing para uma
linguagem que se relacione com o WordPress e a Template
Hierarchy?
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
O que levar em consideração ao desenvolver um Wireframe?
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Afinal, porquê eu deveria projetar meu site antes de começar a
desenvolvê-lo?
Slide 42
Slide 42 text
Resultados Obtidos
Recursos Utilizados
Eficiência
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content