Post on 26-Jan-2015
description
WORKSHOP
Fundamentos e Tecnologias
Fluxo de Dados:
Client ←→ Internet ←→ Server
Domínio É o enderço pelo qual o site será acessado pela internet.
Entidade responsável (domínios br): registro.br
Hospedagem Computador servidor.
Hospedagens recomendadas que suportam WordPress:
● Hostgator
● BlueHost
● DreamHost
Requisitos de uma hospedagem para WordPress:
● Linux
● Suporte a PHP 5 ou superior
● Banco de dados MySQL
● Servidor Apache ou NGINX
O que é Front-end? (Também chamado de client side, ou apenas client)
HTML - Hypertext Markup Language
<!DOCTYPE html>
<html>
<head><title>Meu Site</title><head>
<body><p>Bem vindo ao meu site!</p></body>
</html>
Tags: <h1>Título</h1>, <p>Parágrafo</p>,
<header>Cabeçalho</header>
CSS - Cascading Stylesheet
p {
font-size: 12px;
color: #00AAAA;
}
No CSS são definidos atributos como cores, fontes, formas, bordas,
espaçamentos e disposição dos elementos.
JavaScript
function hello() {
alert("Bem-vindo à Wikipédia");
}
document.getElementById("hello").addEv
entListener("click", hello, false);
Com ela é possível a aplicação de efeitos, realização de operações
matemáticas, modificações de elementos do HTML e CSS.
O que é Back-end? (Também chamado de server side, ou apenas server)
PHP - Hypertext Preprocessor
<?php
// Number comparison
$a="C";
$b="X";
if ($a<$b)
{
echo $a."is smaller than".$b;
}
// Result : C is smaller than X
?>
Com ela é possível tornar as páginas HTML dinâmicas, gerando conteúdo no servidor, realizando consultas ao banco de dados, e uma série de outras tarefas antes de enviar o conteúdo HTML ao client.
Databases
Os bancos de dados são onde as informações são armazenadas. No caso de um site e mais especificamente do WordPress, todo o conteúdo do site, posts, links, dados de usuários, são armazenados no banco de dados. O banco de dados utilizado pelo WordPress é o: MySQL
• Site Institucional
• Hotsite
• Portal
• Sites Sociais
• e-Commerce
A sigla CMS significa Content Management System (Sistema Gerenciador de Conteúdo). Sendo assim, o seu propósito é o de gerenciar conteúdo, seja ele texto, imagem, vídeos, produtos, etc., auxiliando no desenvolvimento de sites dinâmicos. Principais CMS’s:
• Joomla!
• Drupal
• WordPress
Por que o
• O WordPress é a plataforma de publicação de conteúdo mais
popular do mundo, sendo usada por 18,9% dos websites.
• Open Source e gratuita
• Interface amigável
• A famosa instalação de 5 minutos
• Comunidade ampla e ativa
• Traduções para diversos idiomas
• Diversos plugins e temas disponíveis (pagos e gratuitos)
• Conteúdo
– Páginas
– Posts
– Taxonomias
– Custom posts types
– Custom taxonomies
• Aparência e Funcionalidades
– Temas
– Plugins
Desenvolvimento de temas para
Todo conteúdo inserido no painel do WordPress é um post.
• Post (Post Type: 'post')
• Page (Post Type: 'page')
• Attachment (Post Type: 'attachment')
• Revision (Post Type: 'revision')
• Navigation menu (Post Type: 'nav_menu_item')
• Custom posts types
Todo conteúdo (post) possui meta dados e metafields Os meta dados são informações extras sobre os posts, como:
• Data de postagem
• Autor
• Imagem destacada
• Custom fields
Os conteúdos (posts) podem ser organizados por taxonomias As taxonomias são formas de organizar e categorizar os conteúdos.
• Categorias
• Tags
• Custom taxonomy (Altura, Peso, Cargo, Material,...)
wordpress.zip
/ wp-admin
/ wp-includes
/ wp-content / themes
/ meu_tema
/ plugins / meu_plugin
/ uploads
/ languages
É um conjunto de arquivos, responsáveis pela exibição e funcionalidades do front e back-end do site em WordPress.
/* Theme Name: Haste Design Theme URI: http://www.hastedesign.com.br/ Description: Our custom theme. Author: Haste Design Author URI: http://www.hastedesign.com.br/ Version: 2.2.0 Tags: gray, theme-options, translation-ready License: GNU General Public License v2 License URI: http://www.gnu.org/ Text Domain: haste */ body { background: #00ff00; } .my-class { padding: 20px; } #content { color: #fff; }
wp-content/themes/meutema
/images /js /fonts /languages style.css index.php header.php footer.php sidebar.php comments.php archive.php single.php search.php 404.php functions.php
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean et nisl urna. Suspendisse mi dolor,
viverra eu sapien id, imperdiet vehicula arcu.
Aenean fermentum convallis orci, ac auctor
erat rhoncus vel. Proin non odio vitae diam
vehicula consequat blandit vitae ligula.
Aenean congue pharetra tortor ut blandit.
Aenean bibendum ante in hendrerit varius.
Comentários • Donec quis odio vel augue gravida
venenatis. Nam adipiscing arcu sapien,
eu dignissim tortor elementum .
<?php get_header(); ?>
<h2>Error 404 - Not Found</h2>
<p>Talvez a busca possa ajudar:</p>
<?php get_search_form(); ?>
<?php get_template_part(‘content’,‘404’); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
É a regra que define qual template do tema será chamado para exibir uma página do site.
O Loop é o principal processo do WP.
É o código responsável pela exibição de posts. Ele verifica se há posts disponíveis para exibição, seleciona os posts certos baseado em uma query e mostra o conteúdo de cada um, se repetindo até que a lista acabe.
http://codex.wordpress.org/pt-br:O_Loop
http://code.tutsplus.com/tutorials/a-beginners-guide-to-the-wordpress-loop--wp-20241
O Loop pode chamar uma lista de itens, como no caso das páginas de arquivos, ou apenas um único post, como no caso das páginas singulares.
O Loop principal vai exibir X posts (do tipo “post”), do mais recente para o mais antigo.
X = número definido em Configurações > Leitura.
Inicialmente seu valor é 10.
O Loop principal também vai exibir o conteúdo de posts singulares.
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post(); ?>
[template tags – tags para serem chamadas dentro do loop, para exbir o conteúdo do post atual]
<?php the_title() ?>
<?php the_content() ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
O loop encontrou vários posts do tipo padrão. E para cada um deles está exibindo sua imagem destacada, título e resumo do conteúdo.
O loop encontrou apenas um post correspondente: a página “Empresa”. E puxou o título e conteúdo deste post.
Os Loops secundários vão exibir posts de acordo com os critérios de uma Query personalizada.
Uma Query é um código que define critérios para uma consulta ao banco de dados. Estes critérios podem ser qualquer propriedade dos posts, como tipo do post, meta dados (data, autor, custom fields) e taxonomias (categoria, tags, custom taxonomies), entre outros.
Exemplo:
Quero 6 posts do tipo Produtos (custom post type que eu criei), na ordem descendente alfabética, que pertençam à categoria “Vestuário” e tenham sido publicados em 2013.
Exemplo: <?php
$query = new WP_Query(
array (
'orderby' => 'title’,
'order' => 'DESC’,
'post_type' => 'product’,
‘category_name’ => ‘vestuario’,
'year' => 2013,
‘posts_per_page' => 6
)
);
?>
<?php
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post(); ?>
<?php the_title() ?>
<?php the_content() ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
Dicas para uma
Para desenvolver um tema temos que pensar, desde o inicio em:
• Padronização → limitar variações
• Modularidade → reaproveitamento
• Simplificação → redução
• Otimização → performance
• Organograma
• Listagem de Conteúdo
• Wireframe
• Layout
• Programação
• Implementação
Define quais tipos de páginas o site terá (de acordo com a
estrutura do WP), sua hierarquia e suas relações.
• Draw IO - https://www.draw.io/
• Mind 42 - http://mind42.com/
Define que elementos, textos, imagens, funcionalidades, etc. haverá em cada página do site.
• Header – Logo – Rastreie seu veículo - Login do
Sistema – Menu Principal – Telefone da central de vendas – Telefone da central de
rastreamento
• Sidebar Principal – Serviços – Últimos posts
• Footer – Dados de contato AC Global – Crédito Haste Design
• Home – Boxes com chamadas para as
páginas • Central 24 horas,
• Assistência Técnica, • Posicionamento, • Pronta Resposta
– Boxes de Serviços – Jumbotron + Call to Action
• Páginas comuns – Texto – Imagem destacada – Sidebar Principal
• Single Serviços – Descrição – Benefícios (antigo “Serviços”) – Contrate já!
• Contato – Telefone vendas – Telefone rastreamento – Atendimento Online – Formulário de contato
A estrutura base do layout, definindo o posicionamento,
escala, alinhamento e hierarquia dos elementos nas páginas.
• InDesign!
– Grid
– Objetos interativos
– Links
– Estilos
– Biblioteca
O design gráfico do site.
• Illustrator
– Grid
– Estilos
– Símbolos para objetos comuns
– Camadas
Web Design
http://www.google.com/fonts
http://www.fontsquirrel.com/
https://kuler.adobe.com/
http://colorschemedesigner.com/
http://colourlovers.com
Parágrafo
Caracteres
Gráficos
• Definir estilos para:
– Headings - H1 - H6
– Parágrafos
– Links
– Listas
– Tabelas
– Formulários
http://html-ipsum.com/
Menu Drop-Down com no máximo 2 níveis
Like box
Like Button
etc.
Discuss
WooCommerce
BuddyPress
https://wordpress.org/plugins/
http://mailchimp.com/
Newsletters bonitonas, responsivas e que não vão para
o SPAM!