SlideShare uma empresa Scribd logo
Aula 03
Sistemas Corporativos Web



         Tersis Zonato
             2011
Elementos básicos
• Onde   estou?

•O   que é apresentado aqui?

• Onde   posso ir?
INSTONE (2000)
“Qualquer página web dispõe de
     três áreas principais”
          VEEN (2001)
No mínimo:
• index.php:     estrutura/código

• style.css:   estilo
Vamos utilizar:
• index.php:     estrutura/código

• style.css:   estilo

• header.php:     cabeçalho

• footer.php:    rodapé

• sidebar.php:     barra lateral

• screenshot.png:       imagem/preview do tema
/wp-content/themes/novotema
Crie o arquivo style.css
style.css
/*
Theme Name: Nome do tema
Theme URI: http://
Version: 1.0
Description: Lorem Ipsum
Author: Fulano
Author URI: http://
*/
Copie o arquivo screenshot.png
          para a pasta:

/wp-content/themes/novotema/
Crie o arquivo header.php
<!DOCTYPE>
• HTML   4.01 Frameset

• HTML   4.01 Strict

• HTML   4.01 Transitional
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
header.php
<html>

<head></head>

<body>
header.php
• Inserir   na TAG <head>

<meta name="generator"
content="WordPress <?php
bloginfo('version'); ?>" />

<title><?php bloginfo('name');
wp_title(); ?></title>
header.php
• Inserir   na TAG <head>

<link rel="stylesheet" href="<?php
bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />

<?php wp_head(); ?>
header.php básico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html   xmlns="http://www.w3.org/1999/xhtml">
<head   profile="http://gmpg.org/xfn/11">
<meta   http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta   name="generator" content="WordPress <?php bloginfo('version'); ?
>" />

<title><?php bloginfo('name'); wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />

<?php wp_head(); ?>
</head>

<body>
Crie o arquivo footer.php
footer.php
</body>

</html>
Falta o arquivo index.php!!!
index.php
<?php get_header(); ?>

<p>Montagem do tema</p>

<?php get_footer(); ?>
header.php




    index.php




    footer.php


Até o momento...
Mas onde está o
conteúdo dinâmico?
index.php
<?php
if (have_posts()) :
while (have_posts()) : the_post();

   the_title();

endwhile;
endif;
?>
index.php
<h1>
   <?php the_title(); ?>
</h1>

<div class="date">
   <?php the_time('d/M/Y . G:i'); ?>
</div>

<div class="post">
   <?php the_content(); ?>
</div>
Muito obrigado!
     @tersis

Mais conteúdo relacionado

Destaque

Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06
Tersis Zonato
 
web marketing report mensile
web marketing report mensileweb marketing report mensile
web marketing report mensile
Acrilica - Inbound Marketing
 
Interfaces: Evolução ou não?
Interfaces: Evolução ou não?Interfaces: Evolução ou não?
Interfaces: Evolução ou não?
Tersis Zonato
 
TCC - Comunicação Integrada de Marketing para o Varejo
TCC - Comunicação Integrada de Marketing para o VarejoTCC - Comunicação Integrada de Marketing para o Varejo
TCC - Comunicação Integrada de Marketing para o Varejo
Jorge Mendes
 
Principais CaracteríSticas Web 2
Principais CaracteríSticas Web 2Principais CaracteríSticas Web 2
Principais CaracteríSticas Web 2
Thiago Fagner
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
Tersis Zonato
 

Destaque (6)

Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06
 
web marketing report mensile
web marketing report mensileweb marketing report mensile
web marketing report mensile
 
Interfaces: Evolução ou não?
Interfaces: Evolução ou não?Interfaces: Evolução ou não?
Interfaces: Evolução ou não?
 
TCC - Comunicação Integrada de Marketing para o Varejo
TCC - Comunicação Integrada de Marketing para o VarejoTCC - Comunicação Integrada de Marketing para o Varejo
TCC - Comunicação Integrada de Marketing para o Varejo
 
Principais CaracteríSticas Web 2
Principais CaracteríSticas Web 2Principais CaracteríSticas Web 2
Principais CaracteríSticas Web 2
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
 

Semelhante a Sistemas Corporativos Web - WordPress Aula03

Construindo temas para Plone com Diazo
Construindo temas para Plone com DiazoConstruindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
Simples Consultoria
 
Aula30 trevisan
Aula30 trevisanAula30 trevisan
Aula30 trevisan
Luciano Palma
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
Daniel Marcos
 
Criando Temas com Diazo
Criando Temas com DiazoCriando Temas com Diazo
Criando Temas com Diazo
Simples Consultoria
 
HTML Básico
HTML BásicoHTML Básico
Meu primeiro tema de WordPress
Meu primeiro tema de WordPressMeu primeiro tema de WordPress
Meu primeiro tema de WordPress
Luan Muniz
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
Sérgio Laranjeira
 
Wordpress Introdução ao Desenvolvimento de Templates
Wordpress Introdução ao Desenvolvimento de TemplatesWordpress Introdução ao Desenvolvimento de Templates
Wordpress Introdução ao Desenvolvimento de Templates
Wesley R. Bezerra
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
Mateus Neves
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Php aula1
Php aula1Php aula1
Como criar um tema para WordPress
Como criar um tema para WordPressComo criar um tema para WordPress
Como criar um tema para WordPress
Rafael Funchal
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
Guga Alves
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
Workshop Web e WordPress
Workshop Web e WordPressWorkshop Web e WordPress
Workshop Web e WordPress
Haste Design
 
Diazo para todos
Diazo para todosDiazo para todos
Diazo para todos
Simples Consultoria
 
Aula html5
Aula html5Aula html5
Aula html5
Rodrigo Gidra
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
introfini
 
Tema 1 | Introdução a PHP
Tema 1 | Introdução a PHPTema 1 | Introdução a PHP
Tema 1 | Introdução a PHP
Henry Raúl González Brito
 
Introducao ao WordPress
Introducao ao WordPressIntroducao ao WordPress
Introducao ao WordPress
Kennedy Lucas
 

Semelhante a Sistemas Corporativos Web - WordPress Aula03 (20)

Construindo temas para Plone com Diazo
Construindo temas para Plone com DiazoConstruindo temas para Plone com Diazo
Construindo temas para Plone com Diazo
 
Aula30 trevisan
Aula30 trevisanAula30 trevisan
Aula30 trevisan
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Criando Temas com Diazo
Criando Temas com DiazoCriando Temas com Diazo
Criando Temas com Diazo
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Meu primeiro tema de WordPress
Meu primeiro tema de WordPressMeu primeiro tema de WordPress
Meu primeiro tema de WordPress
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Wordpress Introdução ao Desenvolvimento de Templates
Wordpress Introdução ao Desenvolvimento de TemplatesWordpress Introdução ao Desenvolvimento de Templates
Wordpress Introdução ao Desenvolvimento de Templates
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Php aula1
Php aula1Php aula1
Php aula1
 
Como criar um tema para WordPress
Como criar um tema para WordPressComo criar um tema para WordPress
Como criar um tema para WordPress
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Workshop Web e WordPress
Workshop Web e WordPressWorkshop Web e WordPress
Workshop Web e WordPress
 
Diazo para todos
Diazo para todosDiazo para todos
Diazo para todos
 
Aula html5
Aula html5Aula html5
Aula html5
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
Tema 1 | Introdução a PHP
Tema 1 | Introdução a PHPTema 1 | Introdução a PHP
Tema 1 | Introdução a PHP
 
Introducao ao WordPress
Introducao ao WordPressIntroducao ao WordPress
Introducao ao WordPress
 

Mais de Tersis Zonato

Documentar e planejar projetos de UX
Documentar e planejar projetos de UXDocumentar e planejar projetos de UX
Documentar e planejar projetos de UX
Tersis Zonato
 
Teoria da comunicação
Teoria da comunicaçãoTeoria da comunicação
Teoria da comunicação
Tersis Zonato
 
Convergência e interfaces digitais
Convergência e interfaces digitaisConvergência e interfaces digitais
Convergência e interfaces digitais
Tersis Zonato
 
Convergência e inteligência coletiva
Convergência e inteligência coletivaConvergência e inteligência coletiva
Convergência e inteligência coletiva
Tersis Zonato
 
Princípios de convergência digital
Princípios de convergência digitalPrincípios de convergência digital
Princípios de convergência digital
Tersis Zonato
 
Classificando o conteúdo com card sorting
Classificando o conteúdo com card sortingClassificando o conteúdo com card sorting
Classificando o conteúdo com card sorting
Tersis Zonato
 
Gerenciando projetos de Experência do Usuário
Gerenciando projetos de Experência do UsuárioGerenciando projetos de Experência do Usuário
Gerenciando projetos de Experência do Usuário
Tersis Zonato
 
Introdução à experiência do usuário
Introdução à experiência do usuárioIntrodução à experiência do usuário
Introdução à experiência do usuário
Tersis Zonato
 
Princípios de design
Princípios de designPrincípios de design
Princípios de design
Tersis Zonato
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
Interface e informação
Interface e informaçãoInterface e informação
Interface e informação
Tersis Zonato
 
Projeto de interface
Projeto de interfaceProjeto de interface
Projeto de interface
Tersis Zonato
 
O Universo das Interações
O Universo das InteraçõesO Universo das Interações
O Universo das Interações
Tersis Zonato
 
Dicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCCDicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCC
Tersis Zonato
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Tersis Zonato
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
Tersis Zonato
 
Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?
Tersis Zonato
 
Wireframes para sites e projetos de multimídia
Wireframes para sites e projetos de multimídiaWireframes para sites e projetos de multimídia
Wireframes para sites e projetos de multimídia
Tersis Zonato
 
A importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futurasA importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futuras
Tersis Zonato
 
Inserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativosInserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativos
Tersis Zonato
 

Mais de Tersis Zonato (20)

Documentar e planejar projetos de UX
Documentar e planejar projetos de UXDocumentar e planejar projetos de UX
Documentar e planejar projetos de UX
 
Teoria da comunicação
Teoria da comunicaçãoTeoria da comunicação
Teoria da comunicação
 
Convergência e interfaces digitais
Convergência e interfaces digitaisConvergência e interfaces digitais
Convergência e interfaces digitais
 
Convergência e inteligência coletiva
Convergência e inteligência coletivaConvergência e inteligência coletiva
Convergência e inteligência coletiva
 
Princípios de convergência digital
Princípios de convergência digitalPrincípios de convergência digital
Princípios de convergência digital
 
Classificando o conteúdo com card sorting
Classificando o conteúdo com card sortingClassificando o conteúdo com card sorting
Classificando o conteúdo com card sorting
 
Gerenciando projetos de Experência do Usuário
Gerenciando projetos de Experência do UsuárioGerenciando projetos de Experência do Usuário
Gerenciando projetos de Experência do Usuário
 
Introdução à experiência do usuário
Introdução à experiência do usuárioIntrodução à experiência do usuário
Introdução à experiência do usuário
 
Princípios de design
Princípios de designPrincípios de design
Princípios de design
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
 
Interface e informação
Interface e informaçãoInterface e informação
Interface e informação
 
Projeto de interface
Projeto de interfaceProjeto de interface
Projeto de interface
 
O Universo das Interações
O Universo das InteraçõesO Universo das Interações
O Universo das Interações
 
Dicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCCDicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCC
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
 
Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?
 
Wireframes para sites e projetos de multimídia
Wireframes para sites e projetos de multimídiaWireframes para sites e projetos de multimídia
Wireframes para sites e projetos de multimídia
 
A importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futurasA importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futuras
 
Inserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativosInserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativos
 

Sistemas Corporativos Web - WordPress Aula03