criando um site responsivo com -...

CRIANDO UM SITE

RESPONSIVO COM

W O R D P R E S SAutores: Marcel Ferrante Silva

◆ Marcel Ferrante marcelf@gmail.com

● Prof. Adjunto no Curso de Gestão da Informação/UFG (2014)

● Doutor em Ciência da Informação - UFMG (2013)

● Mestre em Organização da Informação - UFMG (2008)

● Especialista em Gestão da Informação - UFMG (2005)

● Formado em Engenharia Eletrônica com ênfase em

Telecomunicações - INATEL (2000)

● Técnico em eletrônica - IEL/GO (1995)

● Diretor do P&D da empresa Finaltec

● Membros dos grupos do GoWordPress, GoPHP, StartupGO,

StartupBrasil, JoomlaGO, GoJS e WordpressBrasil

Apresentação

➔O que é?

O WordPress é uma plataforma semântica de vanguarda

para publicação de informações, com foco no design,

nos padrões web e na usabilidade. O WordPress é um

software livre e gratuito. Você pode usa-lo para criar

um blog, site ou portal. Ele é fácil de usar, flexível e

extensível, servindo desde uma utilização simples a uma

aplicação complexa e específica.

➔O que é?

◆WordPress é uma plataforma de software com código

aberto e livre

● FOSS – Free and Open Source Software

◆ É um Sistema de Gerenciamento de Conteúdo

● CMS (Content Management System)

◆ Desenvolvido em PHP e MySQL, para rodar em um

servidor web

◆ É, sem dúvida alguma, o mais famoso, conhecido e

utilizado sistema de blog e sites profissionais do mundo!

➔O que é?

• Um CMS permite dividir o trabalho de Gestão de

Conteúdo em 3 camadas:

• Dessa forma, os profissionais podem trabalhar de

forma mais independente, cada um em sua camada

Programadores e WebMasters

Web Designers

Colaboradores no Contéudo

Sistema de gestão de conteúdo no

mundo coorporativo Permite a comunicação

Externa da organização

Empresa <> Clientes

Empresa <> Fornecedores e Parceiros

Interna da organização

Diretoria <> Colaboradores

Funcionários <> Colaboradores

6

➔ Porque o wordpress?

◆ Estima-se que em torno de 20% dos sites de toda

internet rodam em cima do wordpress

➔ Porque o wordpress?

◆ É a plataforma com a maior quantidade de extensões de

todos os CMS

➔ Porque o wordpress?

➔ Estatísticas

⊗

Uso de sistemas de

gerenciamento de

conteúdo para websites

➔ Porque o wordpress?

◆ Domina o marketshare de CMS no Mundo

➔ Porque o wordpress?

◆ Em 2007, o WordPress ganhou um prêmio Packt de

CMS código aberto

◆ Em 2009, ganhou o prêmio de melhor CMS código

aberto, o Open Source CMS Award

◆ Em 2010, ganhou na categoria Hall of Fame CMS no

2010 Open Source Awards

◆ Em 2011, ganhou o prêmio de aplicação web código

aberto do ano, Open Source Web App of the Year

Award no The Critters

➔ Porque o wordpress?

◆ Tem uma boa usabilidade, é facil de usar e uma rápida

curva de aprendizagem

➔ Links importantes

WordPress.org WordPress Oficial

Themes Temas WP

Plugins Plugins WP

Codex Manual WP Online

buddypress Rede Social, comunidade CMS

bbpress Fórum CMS

WordPress Mobile WP para dispositivos móveis

WordCamp Conferências WordPress no mundo

WordPress Br WordPress Brasil

GoWordPress Grupo de Usuários WordPress de Goiás

➔ Comunidades

➔Outros links

◆ TEMAS● WP Themes

● WebDev Studios

● WPExplorer

● fthe.me

● Free WP Themes

● FabThemes

◆ TUTORIAIS● WP Reference - DBS Website

● Pippins Plugins

● Pippins Plugins

● WP Life Guard

● WP Tavern

● WP101

● WPMU DEV's

● Wptuts+

ARQUITETURA DO WORDPRESS

BANCO DE DADOS MYSQL e linguagens: PHP, CSS, HTML e Javascript

Servidor Web (apache) Servidor de banco de

dados (MYSQL)

Wordpress

PHP, HTML, JS, CSS

Servidor de email

(exim)

Guarda todas as

informações do site

Nota: os arquivos e

imagens não ficam aqui,

ficam no sistema de

arquivos do servidor

É o local no qual fica o

programa wordpress.

Seu código fonte não é

compilado e sim

interpretado pelo

servidor web. Dessa

forma, não é necessário

compilar o código

É o programa usado para

enviar e-mails.

Não é obrigatório para o

wordpress funcionar

ONDE CRIAR UM SITE

COM WORDPRESS ?

OPÇÃO 1:

NO SITE WORDPRESS.COM

Wordpress.com

Wordpress.com

Wordpress.com

Wordpress.com

Área de Administração

Basta acrescentar /wp-admin no final da URL do seu site

Artigos

1. Criar artigo

2. Criar categoria

3. Criar etiqueta

4. Categorizar artigo

Inserindo imagem, vídeo e destaque

1. Colar link do youtube

2. Inserir imagem do pc

3. Colocar imagem

destacada

Media

1. Enviar imagem

2. Enviar pdf

Links

1. Criar um link

2. Excluir um link

Páginas

1. Criar uma página

2. Criar uma subpágina

3. Inserir o pdf na

pagina

Comentários

1. Criar comentário

2. Apagar comentário

Temas

1. Escolher um novo

tema

Personalizar

1. Editar titulo do site

2. Alterar cores ou

imagem do

cabeçalho

Widgets

1. Arraste os widgets

para um footer ou

sidebar

2. Configure e clique

em guardar

Menu

1. Criar menu primário

2. Inserir páginas no

menu

3. Criar menu2

4. Inserir links no

menu2

Usuários

1. Criar um usuário

para um colega

2. Definir o perfil do

usuário

Ferramentas

1. Voce pode importar

ou exportar o seu

site

Opções > Geral

Opções > Escrita

Opções > Leitura

Opções > Discussão

OPÇÃO 2: LOCAL

VOLTADO PARA INTRANET

OU DESENVOLVIMENTO

OK! MAS AGORA QUERO

INSERIR UM TEMA OU

PLUGIN PRÓPRIO.

COMO FAZER ISSO NO

WORDPRESS.COM ???

O WORDPRESS.COM NÃO

PERMITE ESSE TIPO DE

CUSTOMIZAÇÃO!

Para ter liberdade total você

tem que ter uma instalação

própria do wordpress que pode

ser local ou em um servidor de

hospedagem

Wordpress instalado na sua

maquina local: voltado para

desenvolvimento ou intranet

Wordpress em servidor de

hospedagem: total liberdade,

mais profissional

Instalando o Wordpress local

1. Baixe o xampp e instale na sua máquina (ele instala o

apache, php e mysql para você)

Instalando o Wordpress local

2. Rode o xampp control e depois o apache e mysql

Instalando o Wordpress local

3. Baixe o wordpress na pasta xammp/htdocs, descompacte o

arquivo e renomeie o nome da pasta

Instalando o Wordpress local

4. Acesse o Gerenciador

do MYSQL:

localhost/phpmyadmin

5. Crie um banco de

dados para o wordpress

Instalando o Wordpress local

6. Acesse o site

Localhost/nome_pasta

7. Preencha dos dados

(usuário default é root

senha em branco)

Pronto! Instalado o Wordpress local

Acesse a administração

Note que agora aparece a

opção Plugins no menu

que permite adicionar

novos temas

Voce agora também pode

instalar novos temas

Instalando um tema próprio

Pesquise um tema FREE para wordpress na internet de sua preferencia (existem infinitos)

Baixe e descompacte para a pasta

C:\xampp\htdocs\feicom\wp-content

Instalando um tema próprio

Ative o novo tema

Altere seu tema Voce pode alterar o php ou CSS (definição de estilo) do seu tema

Utilize o notepad++ ou outro programa voltado para programação (netbeans,

sublime, dreawheaver, etc...)

Instale um plugin

Instale um plugin

OPÇÃO 3: SERVIDOR DE

HOSPEDAGEM

> Não tem propagandas

> Total liberdade

> Mais profissional

Servidor de Hospedagem

Criar conta

Servidor de Hospedagem

Criar wordpress

Servidor de Hospedagem

Criar wordpress

Painel de administração

OPÇÃO 4: SE FOR

VOLTADO PARA A CULTURA

Criar usuário

Criar Acervo – Criar blog

OPÇÃO 5: SE FOR

VOLTADO PARA A

EDUCAÇÃO

usuario avançado

Para área da educação

Recomendado: http://themes.quitenicestuff.com/parkcollegewp/

http://athemes.com/collections/best-education-wordpress-themes/

http://colorlib.com/wp/best-education-wordpress-themes/

http://themeforest.net/category/wordpress/education

http://demo.wpcourseware.com/

www.learndash.com

http://themeforest.net/item/academy-learning-management-

theme/4169073?ref=cirvitis

Ferramenta para arquitetura do site

(theme framework)

Recomendado:

http://headwaythemes.com/headway-3-7-now-available/

http://www.pagelines.com/shop/club/dms/

http://my.studiopress.com/pro-plus/

http://themify.me/

Genesis vs Headway Themes:

https://www.youtube.com/watch?v=Uo8hH8OSoKo

Outros: http://www.studiopress.com/

Ferramenta para arquitetura do site

(theme framework)

Recomendado: http://vc.wpbakery.com

http://themify.me/builder

http://premium.wpmudev.org/blog/10-drag-and-drop-page-builders-wordpress/

Ferramenta para arquitetura do site

(theme framework)

Recomendado: http://vc.wpbakery.com

http://themify.me/builder

http://premium.wpmudev.org/blog/10-drag-and-drop-page-builders-wordpress/

Plugins recomendados

W3 total cache

Woo commerce

Slim stat / google analitics

Clone site

Social login

Social share

Contact Form 7

P3 Plugin Performance

Theme Test Drive

TinyMCE Advanced

Visual Form Builder

Widgets on Pages

WP-Polls

WPBakery Visual Composer

Add Logo to Admin

Admin Menu Editor Pro

Admin Menu Tree Page View

Comprehensive Google Map Plugin

Disable WordPress Theme Updates

Embed Grooveshark

Embed Iframe

Exclude Pages from Navigation

Google Analytics

Multisite Plugin Manager

Network Shared Media

NextGEN Gallery

Page Links To

WordPress MU Domain Mapping

INSTALAÇÃO MULTISITE:

rede de sites ou blogs

Instalação Multisite

Instalação Multisite

Instalação Multisite

REDE MULTI-SITE CRIADA!