Workshop Web e WordPress
-
Upload
haste-design -
Category
Internet
-
view
306 -
download
1
description
Transcript of Workshop Web e WordPress
![Page 1: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/1.jpg)
WORKSHOP
![Page 2: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/2.jpg)
Fundamentos e Tecnologias
![Page 3: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/3.jpg)
Fluxo de Dados:
Client ←→ Internet ←→ Server
![Page 4: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/4.jpg)
Domínio É o enderço pelo qual o site será acessado pela internet.
Entidade responsável (domínios br): registro.br
![Page 5: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/5.jpg)
Hospedagem Computador servidor.
Hospedagens recomendadas que suportam WordPress:
● Hostgator
● BlueHost
● DreamHost
![Page 6: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/6.jpg)
Requisitos de uma hospedagem para WordPress:
● Linux
● Suporte a PHP 5 ou superior
● Banco de dados MySQL
● Servidor Apache ou NGINX
![Page 7: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/7.jpg)
O que é Front-end? (Também chamado de client side, ou apenas client)
![Page 8: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/8.jpg)
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>
![Page 9: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/9.jpg)
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.
![Page 10: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/10.jpg)
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.
![Page 11: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/11.jpg)
O que é Back-end? (Também chamado de server side, ou apenas server)
![Page 12: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/12.jpg)
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.
![Page 13: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/13.jpg)
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
![Page 14: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/14.jpg)
• Site Institucional
• Hotsite
• Portal
• Sites Sociais
• e-Commerce
![Page 15: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/15.jpg)
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
![Page 16: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/16.jpg)
Por que o
![Page 17: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/17.jpg)
• 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)
![Page 18: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/18.jpg)
• Conteúdo
– Páginas
– Posts
– Taxonomias
– Custom posts types
– Custom taxonomies
• Aparência e Funcionalidades
– Temas
– Plugins
![Page 19: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/19.jpg)
![Page 20: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/20.jpg)
![Page 21: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/21.jpg)
![Page 22: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/22.jpg)
Desenvolvimento de temas para
![Page 23: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/23.jpg)
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
![Page 24: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/24.jpg)
![Page 25: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/25.jpg)
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
![Page 26: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/26.jpg)
![Page 27: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/27.jpg)
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,...)
![Page 28: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/28.jpg)
wordpress.zip
/ wp-admin
/ wp-includes
/ wp-content / themes
/ meu_tema
/ plugins / meu_plugin
/ uploads
/ languages
![Page 29: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/29.jpg)
É um conjunto de arquivos, responsáveis pela exibição e funcionalidades do front e back-end do site em WordPress.
![Page 30: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/30.jpg)
/* 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 .
![Page 31: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/31.jpg)
![Page 32: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/32.jpg)
<?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(); ?>
![Page 33: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/33.jpg)
É a regra que define qual template do tema será chamado para exibir uma página do site.
![Page 35: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/35.jpg)
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
![Page 36: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/36.jpg)
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.
![Page 37: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/37.jpg)
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.
![Page 38: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/38.jpg)
O Loop principal também vai exibir o conteúdo de posts singulares.
![Page 39: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/39.jpg)
<?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; ?>
![Page 40: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/40.jpg)
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.
![Page 41: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/41.jpg)
O loop encontrou apenas um post correspondente: a página “Empresa”. E puxou o título e conteúdo deste post.
![Page 42: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/42.jpg)
Os Loops secundários vão exibir posts de acordo com os critérios de uma Query personalizada.
![Page 43: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/43.jpg)
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.
![Page 44: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/44.jpg)
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.
![Page 45: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/45.jpg)
Exemplo: <?php
$query = new WP_Query(
array (
'orderby' => 'title’,
'order' => 'DESC’,
'post_type' => 'product’,
‘category_name’ => ‘vestuario’,
'year' => 2013,
‘posts_per_page' => 6
)
);
?>
![Page 46: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/46.jpg)
<?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; ?>
![Page 47: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/47.jpg)
Dicas para uma
![Page 48: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/48.jpg)
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
![Page 49: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/49.jpg)
• Organograma
• Listagem de Conteúdo
• Wireframe
• Layout
• Programação
• Implementação
![Page 50: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/50.jpg)
Define quais tipos de páginas o site terá (de acordo com a
estrutura do WP), sua hierarquia e suas relações.
![Page 51: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/51.jpg)
![Page 52: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/52.jpg)
• Draw IO - https://www.draw.io/
• Mind 42 - http://mind42.com/
![Page 53: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/53.jpg)
Define que elementos, textos, imagens, funcionalidades, etc. haverá em cada página do site.
![Page 54: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/54.jpg)
• 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
![Page 55: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/55.jpg)
A estrutura base do layout, definindo o posicionamento,
escala, alinhamento e hierarquia dos elementos nas páginas.
![Page 56: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/56.jpg)
![Page 57: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/57.jpg)
• InDesign!
– Grid
– Objetos interativos
– Links
– Estilos
– Biblioteca
![Page 58: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/58.jpg)
O design gráfico do site.
![Page 59: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/59.jpg)
![Page 60: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/60.jpg)
• Illustrator
– Grid
– Estilos
– Símbolos para objetos comuns
– Camadas
![Page 61: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/61.jpg)
Web Design
![Page 62: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/62.jpg)
![Page 63: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/63.jpg)
http://www.google.com/fonts
http://www.fontsquirrel.com/
![Page 64: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/64.jpg)
https://kuler.adobe.com/
http://colorschemedesigner.com/
http://colourlovers.com
![Page 65: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/65.jpg)
Parágrafo
Caracteres
Gráficos
![Page 66: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/66.jpg)
• Definir estilos para:
– Headings - H1 - H6
– Parágrafos
– Links
– Listas
– Tabelas
– Formulários
http://html-ipsum.com/
![Page 67: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/67.jpg)
Menu Drop-Down com no máximo 2 níveis
![Page 68: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/68.jpg)
Like box
Like Button
etc.
![Page 69: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/69.jpg)
Discuss
WooCommerce
BuddyPress
https://wordpress.org/plugins/
![Page 70: Workshop Web e WordPress](https://reader033.fdocument.pub/reader033/viewer/2022052820/54c56baa4a7959e7308b4569/html5/thumbnails/70.jpg)
http://mailchimp.com/
Newsletters bonitonas, responsivas e que não vão para
o SPAM!