Este documento fornece um resumo sobre desenvolvimento de sites com WordPress. Ele discute o que é WordPress, como instalá-lo e suas principais funcionalidades como criação de blogs, galerias de imagens e integrações com redes sociais. O documento também lista empresas que usam WordPress e passos para planejamento e desenvolvimento de um site com este software.

1. Desenvolvimento de Web
Sites com WordPress
Jackson Meires
http://facebook.com/jacksonmeires
lordjackson@gmail.com
Slide: https://goo.gl/EYl66p

2. Currículo –Jackson Meires
• Trabalho com WordPres desde 2015
• Formação Bacharel em Sistema de Informação UNP 2012.2
• Pós Graduação em Desenvolvimento Mobile
UFRN em andamento
• Trabalho na Secretaria de Agricultura com desenvolvimento Web PHP OO
com Postgres e MySQL
• Tutor dos cursos Técnicos do IMD
Metrópole Digital-UFRN
• Aventureiro como professor do Pronatec – Programação
Redes e Manutenção
• Freelancer em web sites com WordPress e Joomla nas horas vagas
• Baixista da banda da Igreja
Footer [ 2 ]

3. O que é WordPress?
CMS = Content Management System
WordPress é um CMS, sistema de
gerenciamento de conteúdo, usado inicialmente
para criação de Blogs
Footer [ 3 ]

4. O que é WordPress?
Segundo a Wikipédia
“Podemos dizer que um CMS é semelhante a um framework (um esqueleto)
de website pré-estruturado, com recursos básicos de: usabilidade,
visualização e administração já prontamente disponíveis. É um sistema que
permite a criação, armazenamento e administração de conteúdos de forma
dinâmica, através de uma interface de acesso via Internet.“
Segundo o Canal Tech
Ao criar um site utilizando CMS, o usuário só se preocupa com a criação do
conteúdo propriamente dito, e não com os detalhes técnicos por trás do
funcionamento do site. Isso possibilitou a propagação em larga escala de
blogs pessoais e sobre assuntos específicos, e hoje esse ramo de
entretenimento representa uma boa parcela de conteúdo na internet onde
cada usuário possui afinidade com um determinado framework.
Footer [ 4 ]

5. O que ele pode faze?
• Blogs, web sites corporativos
• Intranets e extranets corporativas
• Revistas on-line, jornais e publicações
• E-commerce e reservas on-line
• Aplicações governamentais
• Web sites para pequenas empresas
• Sem fins lucrativos e organizacional sites
• Portais comunitários
• Web sites de escola e igreja
• Homepages pessoais ou familiares
Footer [ 5 ]

6. Bons motivos para usar WordPress!
• Gerencie seu site com facilidade
• Não fique “amarrado” ao desenvolvedor
• Crie sites com rapidez e qualidade usando templates prontos
• Customize ou crie seus próprios templates com design
diferenciado
• Acrescente recursos novos sem custos adicionais
• Otimize seu site para o Google com extensões de SEO
• Economize com treinamento de pessoas
• Valorize seu currículo
Seja colaborativo!
• Diga qual o seu motivo para usar o WordPress!
Footer [ 6 ]

7. MARKET SHARE
• Um estudo da W3Techs mostra que em 2016 o WordPress
representou 59% dos Sistemas de Gerenciamento de
Conteúdo utilizados
• 26% da internet usa o WordPress
Footer [ 7 ]
WordPress
59%
Joomla
2,6%
Outros
38%
CMS Market Share 2016
Source: w3techs.com
• Uma participação muito maior
do que o Joomla, que vem
perdendo espaço há alguns anos

8. Quem usa o WordPress
Footer [ 8 ]

9. Google Trends
Footer [ 9 ]

10. Quem usa o WordPress
Footer [ 10 ]

11. Quem usa o WordPress
Footer [ 11 ]

12. Quem usa o WordPress
Footer [ 12 ]

13. Quem usa o WordPress
Footer [ 13 ]

14. Quem usa o WordPress
Footer [ 14 ]

15. Quem usa o WordPress
Footer [ 15 ]

16. Quem usa o WordPress
Footer [ 16 ]

17. Quem usa o WordPress
Footer [ 17 ]

18. Quem usa o WordPress
Footer [ 18 ]

19. Quem usa o WordPress
Footer [ 19 ]
http://www.hotelcasadomar.com.br/new/
www.evytta.com.br

20. Quem usa o WordPress
Footer [ 20 ]

21. Quem usa o WordPress
Mais sites
http://oscriativos.com/grandes-empresas-que-desenvolveram-
seu-sites-utilizando-wordpress/
http://www.bloglite.net/12-renomados-sites-que-usam-
wordpress-e-voce-nem-desconfiava/
Footer [ 21 ]

22. Instalação do WordPress
Vamos lá
Mão na massa!
Footer [ 22 ]

23. Instalação – Pré-Requisitos
Servidor Web Local
• LAMP – Linux – a maioria das distribuições possuem
• WAMP – Windows – http://www.wampserver.com
• MAMP – Macintosh – http://www.mamp.info
• XAMPP – Linux, Windows e MAC
https://www.apachefriends.org/pt_br/download.html
Servidor Web com Hospedagem Gratuita
• LocaWeb
• Uol Host
• DreamHost
• Hotel da Web
• Hostinger
Footer [ 23 ]

24. Onde baixar o WordPress?
• http://wordpress.org/.
• descompactar o wordpress! no htdocs ou www;
• Acessar a URL do site;
• seguindo as instruções.
Footer [ 24 ]

25. Plug-ins do WordPress
São scripts que podem adicionar funcionalidades ao
WordPress
wordpress.org/plugins
Footer [ 25 ]

26. Plug-ins do WordPress
São scripts que podem adicionar funcionalidades ao
WordPress
wordpress.org/plugins
Footer [ 26 ]

27. Estrutura Organizacional
Footer [ 27 ]

28. Área administrativa vs Site final
Utilizamos no WordPress os termos “Front-end” e “Back-End”
O que significa?
Back-End: http://seusite.com/wp-admin área do ADMIN do site
Front-end: http://seusite.com acessível por qualquer usuário
Footer [ 28 ]
Back-and Front-and

29. Funcionalidades Possíveis
• Blog;
• Galeria de imagens e vídeos;
• Pop-Ups;
• Slide shows;
• Fórum;
• Notícias;
• Formulários;
• Redes sociais integradas;
• E-commerce;
• Controle de acesso;
Footer [ 29 ]

30. Integrações
• Integração com Facebook:
– Comentários;
– Open Graph;
– Curtir.
• Integração com Twitter:
– Leitura de posts.
• Integração com serviços Google:
– Docs;
– Maps;
– Login.
• Compartilhar com redes sociais.
Footer [ 30 ]

31. Primeiro passo – Planejar o Site
Ferramentas para Desktop (freeware em
negrito)
• MockupScreens
• Axure
• Balsamiq Mockups
• Pencil
• FluidIA
• Justinmind Prototyper
• DENIM
• SketchFlow
• MockApp
Ferramentas Online
• iPlotz
• ProtoShare
• MockFlow
• HotGloo
• Mockingbird
• Cacoo
• Jumpchart
• Defina o conteúdo do site.
• Definir páginas do site.
• Definir as funcionalidades.
• Prototipagem da tela inicial
Softwares para wireframe (Prototipagem )

32. Segundo passo - Prototipagem
Fazer a prototipagem da tela inicial
Site Exemplo:
Hotel / Pousada

33. Terceiro passo - Funcionalidades
Funcionalidades definidas, vamos em buscar dos Plugins:
 Slide Show
 Tabulação ou (Tab)
 Google Maps (Pagina Contato)
 Fanpage – Facebook
 Download de arquivos
 SiteMap – Mapa do Site
 http://wordpress.org/plugins (Site Oficial)
 Preste atenção à versão que você utiliza e também se a extensão é “paga ou gratuita”.

34. Quarto passo - Template
Onde baixar layouts gratuitos?
http://wordpress.org/themes/
http://themegrill.com/themes/
http://www.fabthemes.com/
http://www.fwpthemes.com/
http://fthe.me/wordpress-themes/free/
http://www.freewpthemes.com/
• Customização template – requer um pouco de conhecimento
básico de html e css

35. Para começar?
Instale um dos servidores PHP e MySQL - Maquina Local
• Wamp, Lamp, Mamp ou Xampp
Web
• De preferência Linux com Cpanel (normalmente vem com instaladores
automáticos);
• Procure o Auto Instalador, Mojo Marketplace, One-Click Installs, ou fale
com o suporte para instalar o WordPress para você.
• Ou faça o upload do instalador do wordpress para o FTP
Hospedagem Gratuita
• http://api.hostinger.com.br/redir/9187142

36. Instalação do WordPress
Segue o tutorial feito para o minicurso
https://goo.gl/EYl66p
Como Instalar o Wordpress
https://www.youtube.com/watch?v=f7eYRYERqIw
Footer [ 36 ]

37. O que é FTP
FTP ou File Transfer Protocol (em português, Protocolo de
Transferência de Arquivos) é uma forma bastante rápida e
versátil de transferir arquivos (Portugal: conhecidos como
ficheiros), sendo uma das mais usadas na Internet.
Fonte: https://pt.wikipedia.org/wiki/File_Transfer_Protocol
Footer [ 37 ]

38. Acessar o FTP do site
Download
https://winscp.net/eng/download.php
Footer [ 38 ]

39. Let’s Go!
Vamos desenvolver nosso primeiro site em WordPress!

40. Obrigado!
Contatos
• http://facebook.com/jacksonmeires
• Email: lordjackson@gmail.com
• Twitter: @jackson_meires
• Skype: jackson-meires
“Onde as necessidades do mundo e os seus talentos se cruzam, aí está a sua
vocação.” Aristóteles
(Fonte: Uma nova visão do trabalho - School of Life)