Your SlideShare is downloading. ×
0
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 Apach...
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...
CSS - Cascading Stylesheet
p {
font-size: 12px;
color: #00AAAA;
}
No CSS são definidos atributos como cores, fontes, forma...
JavaScript
function hello() {
alert("Bem-vindo à Wikipédia");
}
document.getElementById("hello").addEv
entListener("click"...
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;
}
// Re...
Databases
Os bancos de dados são onde as informações são
armazenadas. No caso de um site e mais
especificamente do WordPre...
• 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 ger...
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 S...
• Conteúdo
– Páginas
– Posts
– Taxonomias
– Custom posts types
– Custom taxonomies
• Aparência e Funcionalidades
– Temas
–...
Desenvolvimento de temas para
Todo conteúdo inserido no painel do
WordPress é um post.
• Post (Post Type: 'post')
• Page (Post Type: 'page')
• Attachmen...
Todo conteúdo (post) possui meta
dados e metafields
Os meta dados são informações extras sobre os
posts, como:
• Data de p...
Os conteúdos (posts) podem ser
organizados por taxonomias
As taxonomias são formas de organizar e categorizar
os conteúdos...
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
...
<?php get_header(); ?>
<h2>Error 404 - Not Found</h2>
<p>Talvez a busca possa ajudar:</p>
<?php get_search_form(); ?>
<?ph...
É 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
p...
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ág...
O Loop principal vai
exibir X posts (do tipo
“post”), do mais recente
para o mais antigo.
X = número definido em Configura...
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 lo...
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
...
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 proprie...
Exemplo:
Quero 6 posts do tipo Produtos
(custom post type que eu criei), na
ordem descendente alfabética, que
pertençam à ...
Exemplo:
<?php
$query = new WP_Query(
array (
'orderby' => 'title’,
'order' => 'DESC’,
'post_type' => 'product’,
‘category...
<?php
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post(); ?>
<?php the_title() ?>
<?php the...
Dicas para uma
Para desenvolver um tema
temos que pensar, desde o
inicio em:
• Padronização → limitar variações
• Modularidade → reaprove...
• 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 c...
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
Twitter
Pinterest
etc.
Discuss
WooCommerce
BuddyPress
https://wordpress.org/plugins/
http://mailchimp.com/
Newsletters bonitonas,
responsivas e que não vão para
o SPAM!
http://trello.com/
Gerenciamento de projetos
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Workshop Web e WordPress
Upcoming SlideShare
Loading in...5
×

Workshop Web e WordPress

387

Published on

Apresentação sobre os fundamentos da plataforma WordPress, passando dos fundamentos das tecnologias web envolvidas, arquitetura da plataforma e metodologia e técnicas de desenvolvimento de sites profissionais com a plataforma.

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
387
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Workshop Web e WordPress"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×