WordPress
    Desenvolvimento de
    Sites e Redes Sociais

    Vinicius Massuchetto
      vinicius.soylocoporti.org.br




                    
Um pouco sobre o WordPress
    ●
    ●   Inicialmente uma plataforma para blogs
    ●
    ●   8 anos em 2011
    ●
    ●   14.500 plugins
    ●
    ●   1.380 temas oficiais (funcionando)
    ●
    ●   CMS aberto mais baixado em 2010
    ●
    ●   Empregado em 14% dos domínios mais
        populares

                            
O WordPress é ...
    ●
    ●   … interessante para o cliente
    ●
    ●   … amigável ao usuário
    ●
    ●   … mais fácil para o designer
    ●
    ●   … ágil para o desenvolvedor
    ●
    ●   … compatível com grandes tarefas




                            
… interessante
    para o cliente



           
Facilidades para quem compra
    ●
    ●   Hospedagem fácil e barata
    ●
    ●   Estrutura SEO pronta
    ●
    ●   Elaboração de portais unificados com
        múltiplos sites sob a mesma instalação
    ●
    ●   Integração entre blogs, fóruns e rede
        social própria



                            
… mais fácil
    para o designer



            
Design no WordPress
    ●
    ●   Templates orientados por nomes
        padronizados dos arquivos
    ●
    ●   Marcação simples em PHP
    ●
    ●   Extensa e detalhada documentação
    ●
    ●   Plugins que fazem quase de tudo
    ●
    ●   Popularizado: Inúmeros exemplos e
        temas prontos pela internet (!)
    ●
    ●   Diversos frameworks de temas
                           
Marcação simples em PHP
    ●
    ●   home_url()
    ●
    ●   the_title()
    ●
    ●   the_content()
    ●
    ●   the_tags()
    ●
    ●   wp_list_categories()
    ●
    ●   while (have_posts()) { … }



                         
Diversos frameworks de temas
    ●
    ●   Funcionalidade de temas pais
    ●
    ●   Estrutura pré-montada para modificação
        modular
    ●
    ●   Callbacks para diferentes estágios de
        renderização do HTML




                            
     
     
     
… ágil para os
    desenvolvedores



            
Desenvolvimento no WordPress
    ●
    ●   Interferência no comportamento padrão
        via callbacks (ações e filtros)
    ●
    ●   Campos personalizados
    ●
    ●   Tipos personalizados de conteúdo
    ●
    ●   Estrutura pronta para cache em
        HTML estático



                           
Hooks: Ações e filtros
    ●
    ●   Verificações feitas em várias etapas do
        carregamento
    ●
    ●   Mais de 1.500 chamadas diferentes (!)
    ●
    ●   Suporte também presente em vários
        plugins




                            
Hooks: Ações e filtros

add_[action,filter]($tag,$func)

Ações                   Filtros
● init
●                       ● the_content
                        ●


    ●
    ●   wp_head         ●
                        ●   excerpt_length
    ●
    ●   pre_get_posts   ●
                        ●   posts_request
    ●
    ●   shutdown        ●
                        ●   wp_list_pages


                         
Tipos de post e taxonomia
    ●
    ●   Variações dos tipos padrão para:
        ●
        ●   post (posts e páginas)
            post (posts e páginas)
        ●
        ●   taxonomia (categorias e tags)
            taxonomia (categorias e tags)
    ●
    ●   Tratamento de dados adicionais via
        campos personalizados
    ●
    ●   Formatação para qualquer tipo de
        conteúdo desejado


                                
Exemplo de posts e taxonomias
    ●
    ●   Campeonato
        ●
        ●   Campos: Título, times, duração …
            Campos: Título, times, duração …
        ●
        ●   Taxonomia: Tipo de Campeonato
            Taxonomia: Tipo de Campeonato
    ●
    ●   Time
        ●
        ●   Campos: Nome, estádio, jogadores …
            Campos: Nome, estádio, jogadores …
        ●
        ●   Taxonomia: Cidade
            Taxonomia: Cidade
    ●
    ●   Jogador
        ●
        ●   Campos: Nome, nascimento, peso, altura ...
            Campos: Nome, nascimento, peso, altura ...
        ●
        ●   Taxonomia: Posição
            Taxonomia: Posição
                                 
     
Multisite, BuddyPress e bbPress
    ●
    ●   Vários blogs sob a mesma instalação,
        integrados em rede social e fórum
    ●
    ●   Usuários independentes por blog e
        comuns nos fóruns e redes sociais
    ●
    ●   Nomes dos blogs como subdomínios ou
        como subpastas




                            
     
… compatível com
     grandes tarefas



            
Problemas de desempenho
    ●
    ●   4258 funções, 187 classes, 5340
        variáveis e 296 constantes
    ●
    ●   Alocação de ~32MB por instanciação
        ●
        ●   + plugins pode chegar até ~60MB
            + plugins pode chegar até
    ●
    ●   Para grandes sites o uso de cache e
        estratégias de infraestrutura é
        obrigatório


                               
Metodologias de desenvolvimento
    ●
    ●   Layouts inteligentes
    ●
    ●   Combinar imagens reduzindo requisições
    ●
    ●   Evitar o uso de plugins
    ●
    ●   Se possível, integrar nos temas as partes
        utilizadas dos plugins
    ●
    ●   Proteger-se quanto a floods de
        comentários: WP Spam Free
    ●
    ●   Seguir recomendações do Google com o
        Firebug
                                
Uso de sistemas de cache
    ●
    ●   Plugins como
        W3 Total Cache e WP Super Cache
    ●
    ●   Geração de páginas estáticas e envio do
        HTML já pré compactado




                            
Camadas de requisição
    ●
    ●   nginx com Varnish
    ●
    ●   Load Balancer
    ●
    ●   Apache com memcached e
        WP Super Cache
    ●
    ●   Processamento com MySQL HyperDB
    ●
    ●   Servidor Emergencial: Manutenção de
        páginas estáticas por rsync


                             
Tá! E daí!?



          
Alguns exemplos
       famosos ...



            
 
    TechCrunch
    TechCrunch
         
 
    Mashable
    Mashable
        
 
    CNN 40 blogs
    CNN 40 blogs
          
 
    91 Rock 30 blogs
    91 Rock 30 blogs
            
 
    New York Times 70 blogs
    New York Times 70 blogs
                
 
    Adobe 1.200 blogs
    Adobe 1.200 blogs
             
 
    Globo.com 800 blogs
    Globo.com 800 blogs
              
 
    WordPress.com 20 milhões de blogs
    WordPress.com 20 milhões de blogs
                     
Curiosidades WordPress.com
    ●
    ●   Todos os plugins disponíveis são
        reescritos para adequação de
        desempenho
    ●
    ●   Versão bleeding edge (mais atual que a
        disponível para download)
    ●
    ●   Deploy contínuo via sandbox dos
        desenvolvedores
    ●
    ●   Sem staging nem revisão de código

                            
Curiosidades WordPress.com
    ●
    ●   200 comentários por minuto
    ●
    ●   250 posts por minuto
    ●
    ●   2.5 bilhões de visualizações por mês
    ●
    ●   1.500 servidores
    ●
    ●   4 datacenters
    ●
    ●   3 nuvens
    ●
    ●   1 codebase
    ●
    ●   1 banco de dados
                            
Ou seja:
    É extremamente razoável
        usar o WordPress
      para tarefas críticas.




                
Obrigado!
    Vinicius Massuchetto




              
Referências
    ●
    ●   wordpress.org
    ●
    ●   wordpress.com/stats
    ●
    ●   adambrown.info/p/wp_hooks/version/3.1
    ●
    ●   phpxref.ftwr.co.uk/wordpress
    ●
    ●   curitiba.wordcamp.com.br/programacao




                           

Wordpress

  • 1.
    WordPress Desenvolvimento de Sites e Redes Sociais Vinicius Massuchetto vinicius.soylocoporti.org.br    
  • 2.
    Um pouco sobreo WordPress ● ● Inicialmente uma plataforma para blogs ● ● 8 anos em 2011 ● ● 14.500 plugins ● ● 1.380 temas oficiais (funcionando) ● ● CMS aberto mais baixado em 2010 ● ● Empregado em 14% dos domínios mais populares    
  • 3.
    O WordPress é... ● ● … interessante para o cliente ● ● … amigável ao usuário ● ● … mais fácil para o designer ● ● … ágil para o desenvolvedor ● ● … compatível com grandes tarefas    
  • 4.
    … interessante para o cliente    
  • 5.
    Facilidades para quemcompra ● ● Hospedagem fácil e barata ● ● Estrutura SEO pronta ● ● Elaboração de portais unificados com múltiplos sites sob a mesma instalação ● ● Integração entre blogs, fóruns e rede social própria    
  • 6.
    … mais fácil para o designer    
  • 7.
    Design no WordPress ● ● Templates orientados por nomes padronizados dos arquivos ● ● Marcação simples em PHP ● ● Extensa e detalhada documentação ● ● Plugins que fazem quase de tudo ● ● Popularizado: Inúmeros exemplos e temas prontos pela internet (!) ● ● Diversos frameworks de temas    
  • 8.
    Marcação simples emPHP ● ● home_url() ● ● the_title() ● ● the_content() ● ● the_tags() ● ● wp_list_categories() ● ● while (have_posts()) { … }    
  • 9.
    Diversos frameworks detemas ● ● Funcionalidade de temas pais ● ● Estrutura pré-montada para modificação modular ● ● Callbacks para diferentes estágios de renderização do HTML    
  • 10.
       
  • 11.
       
  • 12.
       
  • 13.
    … ágil paraos desenvolvedores    
  • 14.
    Desenvolvimento no WordPress ● ● Interferência no comportamento padrão via callbacks (ações e filtros) ● ● Campos personalizados ● ● Tipos personalizados de conteúdo ● ● Estrutura pronta para cache em HTML estático    
  • 15.
    Hooks: Ações efiltros ● ● Verificações feitas em várias etapas do carregamento ● ● Mais de 1.500 chamadas diferentes (!) ● ● Suporte também presente em vários plugins    
  • 16.
    Hooks: Ações efiltros add_[action,filter]($tag,$func) Ações Filtros ● init ● ● the_content ● ● ● wp_head ● ● excerpt_length ● ● pre_get_posts ● ● posts_request ● ● shutdown ● ● wp_list_pages    
  • 17.
    Tipos de poste taxonomia ● ● Variações dos tipos padrão para: ● ● post (posts e páginas) post (posts e páginas) ● ● taxonomia (categorias e tags) taxonomia (categorias e tags) ● ● Tratamento de dados adicionais via campos personalizados ● ● Formatação para qualquer tipo de conteúdo desejado    
  • 18.
    Exemplo de postse taxonomias ● ● Campeonato ● ● Campos: Título, times, duração … Campos: Título, times, duração … ● ● Taxonomia: Tipo de Campeonato Taxonomia: Tipo de Campeonato ● ● Time ● ● Campos: Nome, estádio, jogadores … Campos: Nome, estádio, jogadores … ● ● Taxonomia: Cidade Taxonomia: Cidade ● ● Jogador ● ● Campos: Nome, nascimento, peso, altura ... Campos: Nome, nascimento, peso, altura ... ● ● Taxonomia: Posição Taxonomia: Posição    
  • 19.
       
  • 20.
    Multisite, BuddyPress ebbPress ● ● Vários blogs sob a mesma instalação, integrados em rede social e fórum ● ● Usuários independentes por blog e comuns nos fóruns e redes sociais ● ● Nomes dos blogs como subdomínios ou como subpastas    
  • 21.
       
  • 22.
    … compatível com grandes tarefas    
  • 23.
    Problemas de desempenho ● ● 4258 funções, 187 classes, 5340 variáveis e 296 constantes ● ● Alocação de ~32MB por instanciação ● ● + plugins pode chegar até ~60MB + plugins pode chegar até ● ● Para grandes sites o uso de cache e estratégias de infraestrutura é obrigatório    
  • 24.
    Metodologias de desenvolvimento ● ● Layouts inteligentes ● ● Combinar imagens reduzindo requisições ● ● Evitar o uso de plugins ● ● Se possível, integrar nos temas as partes utilizadas dos plugins ● ● Proteger-se quanto a floods de comentários: WP Spam Free ● ● Seguir recomendações do Google com o Firebug    
  • 25.
    Uso de sistemasde cache ● ● Plugins como W3 Total Cache e WP Super Cache ● ● Geração de páginas estáticas e envio do HTML já pré compactado    
  • 26.
    Camadas de requisição ● ● nginx com Varnish ● ● Load Balancer ● ● Apache com memcached e WP Super Cache ● ● Processamento com MySQL HyperDB ● ● Servidor Emergencial: Manutenção de páginas estáticas por rsync    
  • 27.
  • 28.
    Alguns exemplos famosos ...    
  • 29.
      TechCrunch TechCrunch  
  • 30.
      Mashable Mashable  
  • 31.
      CNN 40 blogs CNN 40 blogs  
  • 32.
      91 Rock 30 blogs 91 Rock 30 blogs  
  • 33.
      New York Times 70 blogs New York Times 70 blogs  
  • 34.
      Adobe 1.200 blogs Adobe 1.200 blogs  
  • 35.
      Globo.com 800 blogs Globo.com 800 blogs  
  • 36.
      WordPress.com 20 milhões de blogs WordPress.com 20 milhões de blogs  
  • 37.
    Curiosidades WordPress.com ● ● Todos os plugins disponíveis são reescritos para adequação de desempenho ● ● Versão bleeding edge (mais atual que a disponível para download) ● ● Deploy contínuo via sandbox dos desenvolvedores ● ● Sem staging nem revisão de código    
  • 38.
    Curiosidades WordPress.com ● ● 200 comentários por minuto ● ● 250 posts por minuto ● ● 2.5 bilhões de visualizações por mês ● ● 1.500 servidores ● ● 4 datacenters ● ● 3 nuvens ● ● 1 codebase ● ● 1 banco de dados    
  • 39.
    Ou seja: É extremamente razoável usar o WordPress para tarefas críticas.    
  • 40.
    Obrigado! Vinicius Massuchetto    
  • 41.
    Referências ● ● wordpress.org ● ● wordpress.com/stats ● ● adambrown.info/p/wp_hooks/version/3.1 ● ● phpxref.ftwr.co.uk/wordpress ● ● curitiba.wordcamp.com.br/programacao