Livro de WordPress: ausências, bloqueios criativos e patinhos de borracha

rubber-ducky

Tá demorando pro meu livro sair, né? Mas eu posso explicar. ^^

Bom, desde que comecei a escrever o livro WordPress: de Blogs Pessoais a Grandes Portais em janeiro de 2015 eu tenho mantido uma certa regularidade na escrita, conseguindo conciliar meus compromissos profissionais, assuntos pessoais e a produção do livro em si. Mas durante a elaboração de um trecho do meu tutorial da Parte III eu acabei sendo afetado por um combo de 2 hits que me fez travar e ficar sem conseguir escrever uma linha sequer durante 3 meses.

Como os motivos pra esse tempo perdido acabaram me rendendo uma melhora nos meus conhecimentos sobre WordPress, achei que seria uma boa aproveitar a deixa pra lhes dar uma palhinha do tutorial sobre desenvolvimento de Temas. Esse é o meu pedido de desculpas a todos que estão esperando pelo meu livro pela demora ao terminá-lo.

Bom… tudo começou quando eu estava escrevendo sobre o novo recurso de logotipos personalizados. Antigamente essa funcionalidade era parte dos recursos do plugin Jetpack, mas ele foi adicionado ao núcleo do WordPress a partir da versão 4.5. Eu estava estudando como implementar esse recurso no Tema que oferecerei como material didático (acesse o repositório), seguindo o passo-a-passo descrito no Codex. Só que sabe-se lá porque o logotipo que eu definia não aparecia de jeito nenhum.

Eu salvei o seguinte código no arquivo functions.php do tema:

/* Logo personalizado: functions.php */
function custom_logo_setup() {    
    add_theme_support( 'custom-logo', array(
        'height'      => 150, // Altura do logotipo
        'width'       => 350, // Largura do logotipo
        'flex-width' => true, // Largura flexível do logotipo
    ));
}
add_action( 'after_setup_theme', 'custom_logo_setup' );

Depois, salvei este código no header.php:

/* Logo personalizado: header.php */
function meublog_the_custom_logo() {
    if ( function_exists( 'the_custom_logo' ) ) {
        the_custom_logo();
    }
}

De acordo com o Codex estava tudo certinho, pensei eu. Mas mesmo assim nada do logotipo aparecer. Isso me deixou bem encucado e só aí eu perdi um mês sem conseguir prosseguir na produção do tutorial. É claro que eu podia simplesmente ter deixado quieto por um momento e escrever outros capítulos, mas eu sou meio cabeça-dura nesse aspecto e queria prosseguir na ordem que eu especifiquei.

Passei mais dois meses vasculhando a internet atrás de soluções: Google, Stack Overflow, o próprio Codex e os fóruns de suporte do WordPress e nada… fiquei até desanimado e parei de escrever completamente, sem conseguir resolver o problema, o que me deu um belo de um bloqueio criativo. Depois desse tempo todo eu fui aonde eu deveria ter ido desde o princípio – o grupo WordPress Brasil no Facebook – e pedi ajuda.

Um grande amigo meu, que também faz parte do grupo, me ajudou nessa empreitada lendo o meu código. Na hora ele percebeu a minha falta de atenção e me indicou a solução: eu defini a Função no header.php, mas esqueci de fazer a chamada a esta Função.

/* Logo personalizado: header.php */
function meublog_the_custom_logo() {
    if ( function_exists( 'the_custom_logo' ) ) {
        the_custom_logo();
    }
}

/* Chamada à Função */
meublog_the_custom_logo();

Aí o danado do logotipo apareceu normalmente.

Ok, essa foi a palhinha do que vocês encontrarão no meu livro. O logotipo personalizado – também conhecido como Custom Logo ou Theme Logo – será tratado com mais profundidade no Capítulo 06 da Parte III. Mas você deve estar se perguntando: o que mulesta isso tem a ver com patinhos de borracha?

Rubber Duck Debugging

Depois do tronco de árvore que esse meu amigo me quebrou (dizer que ele apenas me quebrou um galho seria falta de respeito), eu fui bater um papo com ele via Messenger pra agradecer. Aproveitamos pra botar o papo em dia e nessa ocasião ele me apresentou a um conceito da Engenharia de Software que eu ainda não conhecia, chamado Rubber Duck Debugging.

Esse nomezinho maroto é o apelido que os dinossauros de TI deram a esse método de depuração de código: consiste em você arrumar um patinho de borracha e colocá-lo sobre sua mesa de trabalho. E aí, toda vez que você estiver programando e não conseguir encontrar algum trecho de código problemático você lê em voz alta PARA O PATO linha por linha do que escreveu, até perceber onde errou.

Obviamente trata-se de uma zoeira. O patinho de borracha é apenas uma metáfora pra a ajuda externa que você precisa de vez em quando, para encontrar problemas que não consegue enxergar após trabalhar em seu código por muito tempo. É como em revisão de textos literários: com frequência deixamos alguns erros de português passar despercebidos após muito tempo escrevendo. Daí a extrema importância de um revisor pra te dar aquele bendito puxão de orelha. 😉

Progresso do livro

De qualquer forma, fica novamente o meu pedido de desculpas a todos os que estão aguardando pelo meu livro de WordPress. Perdi 3 preciosos meses de trabalho por pura e simples bobeira e por isso é provável que o lançamento do livro fique para o primeiro trimestre de 2017.

Mas ei, vejam pelo lado bom:

Este slideshow necessita de JavaScript.

Eu já estou quase acabando de escrever! xD

Faltam apenas cinco Capítulos da última das 3 Partes do livro. Além disso, já providenciei a revisão do texto das outras 2 Partes para agilizar ainda mais o trabalho e ao menos tentar recuperar o tempo perdido. Acredito que conseguirei terminar de escrever tudo até o final de setembro desse ano e os meses seguintes serão reservados à revisão do restante do texto, diagramação para a plataforma da Amazon e eventuais últimos retoques no material.

Bom, é isso. Obrigado a todos pela paciência. E não se esqueçam de baixar a amostra grátis do meu livro e de me contar o que acharam dela! Vai me ajudar bastante a entregar um produto de qualidade pra vocês! ^^

Livro de WordPress: ausências, bloqueios criativos e patinhos de borracha

Ngrok: uma interessante ferramenta para exibir seu localhost na internet

Lembram daquele meu post onde eu ensinei como fazer para acessar seu servidor web local via WiFi para poder testar sites responsivos?

Esses dias eu descobri uma ferramenta que permite fazer isso e muito mais de uma forma muito mais prática e segura. Trata-se do Ngrok.

O Ngrok é um pequeno programinha de linha de comando que permite criar um túnel de conexão segura a partir do seu localhost e publicá-lo na internet. Ele é multiplataforma, podendo ser usado no Windows, Linux e Mac OS X.

Seu uso é bem fácil: basta descompactar o arquivo .zip e executar o pequeno arquivo do Ngrok para abrir uma janela do Terminal/Prompt de Comando. Em ambiente Windows (que foi onde testei) basta digitar o seguinte comando:

ngrok http 80

Assim que você entrar com este comando, o Ngrok detectará o diretório raiz de seu servidor web (caso o servidor esteja rodando no momento), fará um tunelamento nos servidores dele, atribuirá ao localhost de sua máquina um endereço web (URL) aleatório e o disponibilizará na internet através dele.

Isso é extremamente útil quando se deseja exibir um protótipo ou um projeto de site ou sistema web em desenvolvimento para um cliente, por exemplo, sem precisar fazer deploy para um servidor remoto. Basta ativar o Ngrok, fornecer o endereço web gerado ao seu cliente e ele visualizará seu site normalmente!

Quem desenvolve em WordPress também pode usar o Ngrok, mas precisa tomar um cuidado adicional: como o WordPress só trabalha com URLs absolutas, é necessário converter essas URLs para serem exibidos de forma relativa. Caso contrário o Ngrok não exibirá CSS e JavaScript e o tema do seu site/blog em WordPress não será exibido corretamente. Instale este plugin em sua instalação do WordPress para resolver esse problema.

O Ngrok pode ser baixado deste link. Consulte a documentação dessa ferramenta para aprender a usá-la de forma mais avançada.

[Dica do amigo Luan Fonseca, via Facebook.]

Ngrok: uma interessante ferramenta para exibir seu localhost na internet

Configure seu servidor web local para acesso via Wi-Fi

Quando eu desenvolvo sites responsivos, uma das ferramentas que eu mais costumo utilizar é o modo de design responsivo das Firefox Developer Tools. Através do atalho Ctrl+Shift+M, a tela do Firefox redimensiona-se automaticamente para assumir o tamanho de uma tela de smartphone, facilitando a tarefa de testar a responsividade de um layout.

O navegador Chrome traz uma ferramenta semelhante (inclusive com mais recursos do que o oferecido pelo navegador do Panda Vermelho), acessível através das Chrome Dev Tools. Basta pressionar o atalho Ctrl+Shift+I e em seguida Ctrl+Shift+M, ou clicar naquele ícone de celular ao inspecionar um elemento do site.

responsiveness-fx-chrome
À esquerda, Firefox. À direita, Chrome.

Tais ferramentas são extremamente úteis e bastante versáteis para testar layouts responsivos e simular smartphones de verdade. Só que há um problema bem chato nessas ferramentas: elas não são smartphones de verdade.

Por essa razão o modo responsivo dos navegadores desktop não consegue ser 100% preciso ao renderizar uma página web. Percebi isso ao redimensionar a janela do navegador para ficar com o mesmo tamanho da tela do meu celular Moto G 2ª Geração (a saber: 720 x 1280 pixels de acordo com o GSM Arena). Quando ajustei o tamanho do navegador a renderização, que deveria aparecer assim…

chrome-mobile firefox-mobile

…foi exibida assim:

chrome-simulador firefox-simulador

Rapidamente percebi o quão imprecisas essas ferramentas podem ser dependendo de como são usadas. Sei que não há como ajustar e corrigir a renderização do site em modo responsivo no Firefox e confesso que não sei se o Chrome permite tal correção. Mas como eu não gosto de usar o Chrome (sinceramente acho o navegador do Google bem ruim) e abrir mão do Firefox está fora de questão, tive que dar meus pulos.

Foi aí que tive a seguinte ideia: será que eu consigo acessar através do meu smartphone um site rodando em um servidor web no meu computador através da rede local? E descobri que sim, é possível fazer isso inclusive via Wi-Fi, dispensando um cabo USB.

No Windows eu uso o XAMPP para montar facilmente meu servidor web rodando Apache, MySQL e PHP. Caso você use Linux e Mac OS X e monte um servidor LAMP manualmente, certamente tais configurações poderão ser feitas de forma semelhante. Estes sistemas operacionais não serão o foco deste tutorial, mas quem os usa certamente vai saber se virar. 😉

PROTEGENDO o XAMPP

Pra começar, vamos fortalecer a segurança do seu servidor web local, pois liberar o acesso via Wi-Fi por padrão faz com que seu servidor seja acessado por todo mundo na rede, o que é uma péssima ideia do ponto de vista da segurança. Assim sendo, abra seu navegador e acesse http://localhost. No menu lateral, clique no link Segurança.

xampp-localhostNa tela seguinte, clique neste link:

xampp-localhost-2Nesta tela, crie usuários e senhas de acesso tanto para o MySQL quanto para o seu diretório do XAMPP e salve tais configurações.

xampp-localhost-3Pronto, seu servidor local agora está mais seguro. Da próxima vez que você acessar http://localhost, será exigido o nome de usuário e senha que você acabou de criar. A senha do MySQL também será exigida para a conexão de seu site ou aplicação ao banco de dados.

Ajustando o XAMPP

Agora acesse um dos arquivos de configuração do Apache do seu XAMPP clicando no botão Config do Apache e selecionando httpd-xampp.conf:

xamppNo arquivo que se abre, vá até o final e comente as últimas quatro linhas de código para desbloquear o acesso remoto ao localhost:

configurando-o-xamppReinicie o Apache e o MySQL do seu XAMPP e pronto! O acesso via rede local Wi-Fi estará liberado. Agora verifique qual é o endereço IP atual do seu computador, digitando o comando ipconfig. É esse IP que será necessário para acessar seu servidor através do navegador do seu smartphone:

cmdNo navegador do celular, digite o endereço de IP obtido seguido de /diretório-do-site, conforme o exemplo abaixo:

exemplo-celularE é isso! Agora é possível acessar e testar qualquer site rodando no servidor XAMPP através do navegador do smartphone sem complicação. Caso o IP do seu computador mude por qualquer motivo, basta verificar novamente o IP atual via prompt de comando.

Configure seu servidor web local para acesso via Wi-Fi

Filtros com CSS: crie efeitos bonitos em imagens (ou apenas brinque de Instagram)

See the Pen CSS3 Filters by Giancarlo Silva (@giancarlozero) on CodePen.

Desde que vi esse novo recurso da linguagem CSS pela primeira vez fiquei com vontade de usar em meus projetos, para adicionar efeitos bacanas em imagens e outros elementos do meu código web. Mas nos primórdios do desenvolvimento, os CSS Filters só podiam ser feitos com o auxílio de SVG (o que ainda acho um bocado complicado de lidar sem o auxílio de ferramentas) e apenas o Google Chrome os suportava.

Recentemente descobri que, apesar de ainda ser um recurso experimental, as especificações dos CSS Filters avançaram bastante e agora quase todos os navegadores do mercado podem renderizar elementos HTML com filtros de cor gerados por CSS puro, sem JavaScript nem nenhuma gambiarra bizonha. Assim sendo, já me sinto confortável para utilizar esse novo recurso em meus projetos.

Claramente percebe-se que os CSS Filters são o tipo de efeito que exige muito cuidado do ponto de vista estético: é muito fácil se sentir tentado a usar um montão de filtros em um projeto só e acabar ficando com um resultado bem feioso… Então apreciem com moderação. 😉

Mais informações e instruções de como usar os CSS Filters nesta página do MDN e neste artigo do Tableless.

Filtros com CSS: crie efeitos bonitos em imagens (ou apenas brinque de Instagram)

Pelican: uma interessante ferramenta em Python para gerar sites estáticos

Em meus estudos geralmente eu dou de cara com coisas bastante interessantes relativas a minha profissão ou que podem vir a ser úteis no meu dia-a-dia. Recentemente eu encontrei uma ferramenta bem bacana de criação de sites, que é ideal pra quem deseja criar um blog simples para compartilhar ideias ou pra quem – assim como eu – deseja montar um site simples de portfolio, entre outras possibilidades.

Eu tinha ouvido falar a respeito de geradores de páginas estáticas, mas até então nunca senti necessidade de saber mais a respeito, já que o WordPress supria minhas necessidades – ou assim eu achava. Mesmo assim eu pesquisei sobre como funcionam ferramentas como o Nanoc, o Middleman, o Jekyll (feitos em Ruby), o Pelican, o Octopress e o Hyde (esses feitos em Python) entre alguns outros e gostei bastante. Então resolvi escolher uma ferramenta e me dedicar a ela.

Escolhi então o Pelican. Escrita totalmente em Python (linguagem que eu gosto pra caramba), essa ferramenta é um gerador de páginas estáticas que permite criar de uma forma bem dinâmica blogs e sites web completos, com paginação, comentários, categorias/tags, etc. em HTML, CSS e JavaScript. Nada de linguagens server-side como PHP, ASP e outras. É ideal para quem deseja criar coisas minimalistas e simples, que sejam rápidas de carregar e não exijam muitos recursos do servidor.

Continuar lendo “Pelican: uma interessante ferramenta em Python para gerar sites estáticos”

Pelican: uma interessante ferramenta em Python para gerar sites estáticos