DicasWP » wordpress

Introdução ao XHTML e CSS – Parte 1

Yeltsin Lima — Tue, 03 Aug 2010 16:55:33 +0000

Eu vou dar uma pausa na série Como criar um tema para WordPress. O motivo é simples: acho importante mostrar o básico de XHTML (e no final da série, mostrar o básico de HTML 5). Lembrando que essa série será menor do que a “Como criar um tema”. E a periodicidade de artigos será maior: vou tentar lançar duas “partes” por semana. Com o WordPress será uma “parte” por semana.

O XHTML é tão importante para um tema WordPress quanto o código PHP. Sem esses dois requisitos, o site simplesmente não existe. Estou cursando Sistemas para Internet, na Faculdade Marista. No primeiro período teve introdução ao HTML mas, estranhei muitas coisas (já que estou adaptado ao padrão válido). Por exemplo, alguns recursos ensinados pelo professor já estavam em desuso fazia uns dois anos, no mínimo. Mas, para quem estava começando mesmo, aquilo era o básico (MESMO).

Felizmente, esse não é o foco do DicasWP. Não quero ensinar aos visitantes, a forma “errada” de se fazer. E por isso, vamos começar ensinando o básico, válido, do XHTML.

A estrutura de uma página XHTML é bem simples: possui um cabeçalho (chamado header) onde fica localizado o nome da página, as informações meta (calma que vamos chegar lá), scripts e eventuais referencias à outros arquivos. Depois disso vem o corpo (chamado body) é aqui que ficará todo o conteúdo do site. Essas duas estruturas estão dentro da tag HTML que engloba todo o site.

O topo do site, geralmente, começa com a tag DOCTYPE. Também conhecido como DTD (Document Type Definition – Definição do tipo de documento). Ele define quais regras os navegadores devem seguir. A W3C define três Doctypes para o XHTML 1.0 (o que vamos utilizar aqui):

Cada um difere entre si: Strict é uma regra mais rígida, Transitional possui menos regras já que é “transição” e inclui alguns recursos que estão em desuso (o Strict não permite) e o Frameset é usado em sites que possuam frames (dica: não usem) (ele aceita todas as tags do Transitional + Frames).

Em seguida, é preciso “abrir” o código HTML.

É importante você definir o “lang”, por questões de validação e acessibilidade. Inclusive, os blogs: Acessibilidade Legal e Revolução Etc possuem dois ótimos artigos sobre isso. Você pode ver alguns idiomas suportados no site do W3CSchool.

Temos o doctype, o html, o que falta agora? Ele mesmo… O Head é o cabeçalho do site. Geralmente definimos nessa área: scripts, css, códigos meta, título do site. Os scripts são códigos, geralmente em javascript que complementam ou adicionam uma funcionalidade ao site. Aqui no @dicaswpbr, por exemplo, essa função de auto-completar o texto com o arroba, é feito graças ao script do Twitter.

O CSS é todo o visual do site. Inclusive, esse arquivo é o principal fator que levou os sites a melhorarem o seu visual e principalmente: os seus códigos. Antigamente, você definia cores das fontes, tamanho, etc., tudo no mesmo código. Ficava difícil de modificar depois e principalmente, era muito trabalhoso. Com o CSS você pode editar todo o estilo do site, com um arquivo “independente”.

Os códigos META são informações que descrevem o conteúdo do site para buscadores. Existem várias tags meta. As principais são: keywords, description, robots e content-type.

Keywords são palavras-chaves que definem o conteúdo do seu texto ou do seu site. Por favor, não adianta escrever um artigo sobre Culinária e colocar qualquer palavra-chave caça-paraquedista que não esteja no foco do seu blog. Todas as palavras devem ser separadas por vírgulas.

Description é a descrição do seu texto ou do seu site. Foque no artigo ou no site, já vi ótimos blogs/sites escrevendo descrições horríveis. O máximo de caracteres é 160. Você até pode digitar mais mas, elas serão “cortadas” pelos buscadores.

Robots é basicamente se você permite, ou não, que os “robôs” dos buscadores acessem seu site/blog. Nesse caso, recomendo a substituição pelo arquivo robots.txt. Mas, já que ainda estamos em XHTML… esses são os valores que a tag aceita:

O que significa cada valor? “index, follow”: indexa a página inicial e todas as páginas nela referenciadas; “noindex, follow”: não indexa a página inicial mas, indexa todas as páginas nela referenciadas; “index, nofollow”: indexa a página inicial mas, não indexa as páginas que a inicial está linkando; “noindex, nofollow”: não indexa a página inicial nem as páginas referenciadas; “noarchive”: serve para não indexar uma cópia da página em cachê. Fonte.

O Content-type serve para especificar o conteúdo da página e o conjunto de caracteres utilizados por ela (codificação). As duas codificações mais utilizadas atualmente, são: ISO-8859-1 e UTF-8. Todas as tags META devem ser fechadas. A última tag do artigo é: title. E serve apenas para definir o título da página.

Agora já podemos fechar o cabeçalho da página e começar o corpo da página. Primeiro, vamos abrir a tag “corpo”:

Recomendo, para depois não esquecerem, de fechar todas as tags abertas. O Dreamweaver e o Coda fazem isso automaticamente. Mas, só para mostrar: esse é o nosso código atual:











Primeiro Exemplo do Tutorial

E como vocês podem perceber, só vamos continuar na próxima parte da série. Até sexta-feira.

O que é preciso para ter meu tema disponível no WordPress?

Yeltsin Lima — Sat, 31 Jul 2010 02:28:32 +0000

Estou desenvolvendo um tema totalmente open-source para o WordPress. Decidi adotar essa política, para permitir maior divulgação do mesmo. O tema está sendo desenvolvido para um público que está com grande crescimento no país, que são blogs de fotografia e moda.

Mas, o tema do artigo não é esse. A verdade é que, para ter seu tema disponível no Extend do WordPress, você precisa adotar uma série de regras. E acredito que essas regras compensam e muito. Vamos lá: primeiro você precisa ler muito a documentação do WordPress.

O bom é sempre verificar se existem temas parecidos com o que você está querendo desenvolver. Isso pode dar problema futuramente. O que eu recomendo é: se você está desenvolvendo um tema e alguém está indicando que ele é muito parecido com o de outro desenvolvedor, tenta entrar em contato com ele.

Para se criar um tema para WordPress, é necessário ter conhecimentos em HTML/CSS (foi por isso que eu dei uma pausa na série: Como criar um tema para WordPress. E vou iniciar uma série chamada: Introdução ao XHTML e CSS). Após terminar esses dois tópicos, eu entro no básico de PHP. E depois recomeçamos a série do WordPress. Considerem isso um curso gratuito de WordPress, HTML, CSS e PHP

Primeiro é necessário seguir algumas regras meio “chatas”. Você pode dar uma lida em todas as recomendações de tema, nessa página.

Para o tema ficar disponível no Extend do WordPress, ele precisa:

Ser compatível com a licença GPL. Tanto o código PHP, quanto o HTML, CSS e as imagens utilizadas. Você pode conferir as licenças compatíveis aqui. Os ícones também precisam estar sob licença GPL ou compatível com. Fontes não precisam.
O tema precisa indicar claramente, a licença que ele pertence. Recomendo colocar um arquivo chamado License.txt (a Automattic recomenda duas formas. Essa é uma das melhores).
Você pode implementar uma série de recursos para o WordPress. Não é obrigatório mas, é extremamente recomendado.

A Automattic também disponibiliza um arquivo, que permite o teste de temas. Sabe aqueles textos em que você encontra em diversos demonstrativos de tema? Está disponível aqui.

Como nunca tive experiência com licenças GPL, resolvi procurar na Internet, sobre algumas dúvidas que tinha. Até pensei em não disponibilizar meu tema sobre essa licença, inclusive com medo de plágio.

Encontrei um site que não só me ensinou diversas coisas, como me fez optar por deixar todo o tema GPL. Inclusive, com uma página no Google, voltada para o desenvolvimento colaborativo (quer participar? Só mandar um e-mail ou participar do grupo). Nas palavras do site:

Usando a licença GPL um programador assegura que o código de seu programa permanecerá aberto, pois toda e qualquer modificação só poderá ser liberada se for feita pela mesma licença.

Essa licença permitiu que os programadores pudessem liberar seus trabalhos para o público, sem medo que seu código fosse apropriado por alguma empresa e, ao mesmo tempo, assegurando que ele ficaria livre para sempre.

Ou seja, eu terei um código livre, em que qualquer pessoa poderá modificar. Algo que considero extremamente válido, visto que, eu não sou nenhum CSS Zen Garden da vida. E ao mesmo tempo, assegura o direito de ainda ter meu nome vinculado, nas obras que se originarem à partir do meu código. Mesmo que seja no código, visível apenas para o programador, considero isso extremamente importante.

Isso também me ajudou, a entender um pouco mais sobre as licenças Copyleft. Inclusive, o mesmo site fala do surgimento do termo. “Esquerdos autorais – Todos os direitos invertidos”.

Bom, aqui é uma mensagem para avisar que, até o final (sexta-feira) da próxima semana, o primeiro artigo da nova série será publicado. Já estou escrevendo ele (meu tempo está bastante limitado) e vou chamar alguns amigos para colaborar com os demais artigos. Do mais, fiquem com os ótimos posts do Luan Felipe, que aceitou escrever aqui no blog

PS: Fiquei surpreso ao ver que estamos chegando aos 100 leitores de feed. Essa mensagem vai para todos: para quem ainda não está assinando, o link do feed é esse. Para quem já está: agradeço imensamente (de coração), pela leitura quase diária dos nossos artigos. Rumo aos 1.000 assinantes

6 plugins indispensáveis para seu blog e mais dois opcionais

Yeltsin Lima — Fri, 23 Jul 2010 02:08:07 +0000

Esses são os plugins que geralmente instalo de primeira, quando vou fazer alguma instalação do WordPress. São plugins com objetivos variados: SEO, estatísticas e até mesmo alguns pequenos efeitos visuais que considero importantes. Todos eles estão disponíveis no repositório oficial do WordPress.

All in One SEO Pack

Plugin indispensável para uma boa estratégia de otimização para sistemas de busca. Mas, não adianta somente instalar. Precisa saber como utilizar corretamente (lembrando que o artigo linkado apresenta uma versão desatualizada do WordPress e do plugin. Mas, os passos são os mesmos).

Contact Form 7

Nativamente, o WordPress não possui um formulário de contato. Acredito que todos os blogs precisam de uma página para contato. Mesmo em blogs que não possuem possibilidade de se instalar um plugin, no caso do Blogger. A alternativa para quem não deseja instalar (ou quem não pode) um plugin é usar o Wufoo. Para os outros, o Contact Form 7 é excelente. Inclusive, por permitir a instalação de mais de um formulário.

FD Feedburner Plugin

Acho vital que um blog altere seu feed para o Feedburner. Primeiro: ajuda a acompanhar a quantidade de leitores do blog. Segundo: permite prover uma experiência melhor ao leitor. Como não dá para redirecionar o feed do: seusite.com.br/feed para feeds.feedburner.com/seusite de forma fácil, recomendo a utilização deste plugin (criado pela equipe do FeedBurner).

Google Analyticator

O Google Analytics é uma ferramenta de grande importância para um blog. Ela serve para ajudar a medir a quantidade de visitantes, os termos que eles usaram para entrar no blog e diversas outras ferramentas de análise. Com o Google Analyticator, eu posso adicionar meu código do Analytics com poucos cliques e de forma bem rápida. Além de possuir integração com a sua conta do Google Accounts, facilitando a adição da conta ao WordPress.

Lightbox 2

Vai utilizar imagens no blog? É preferível que você coloque uma imagem em tamanho médio e quando o visitante clicar, ela automaticamente expandir para o tamanho grande ou tamanho real. Esse plugin adiciona o JQuery e o script Lightbox automaticamente a todas as imagens do blog.

Social Slider

Não encha seu site de redes sociais. Para que criar uma conta no Facebook, Orkut, LinkedIN, Bebo, Badoo, UOL K, Buzz, se somente os dois primeiros são os mais utilizados para blogs? Por isso, a melhor solução é fazer uma pequena barrinha (como a que se encontra no lado esquerdo do DicasWP).

OPCIONAIS

Twitter @Anywhere Plus

Se você quiser uma integração com o Twitter (nativa) e bem interessante, podemos utilizar a ferramenta chamada Twitter Anywhere. Isso é um conjunto de widgets e api disponibilizadas pelo próprio Twitter e facilitada via plugin para WordPress.

WP Super Cache

Recomendável para blogs com muitos acessos. Precisa ter cuidado quando for utilizar pois, ele possui muitos problemas de compatibilidade com outros plugins.

Os mais diversos tipos de plágio: Layout – Parte 1

Yeltsin Lima — Sun, 18 Jul 2010 10:53:38 +0000

Aproveitei esse momento para falar de plágio de Layout. Para quem não sabe, não é apenas o conteúdo que é considerado plágio. Música, vídeo, fotografia e layout também são considerados uma forma de plágio, se efetuada de forma “descarada”. Outros são considerados plágio por alguns webdesigners mas, não são pela lei. E outros são meras inspirações. Antes de acusar alguém, precisamos analisar cada situação.

Recentemente a Juliana do DicasBlogger enfrentou um problema. Um cidadão copiou o tema do Cadê Meu Dorflex, o novo blog do Marcel (Byte Que Eu Gosto). Em um trabalho investigativo (sim, quando “brincam” com conhecidos ou amigos meu, eu viro um verdadeiro James Bond) descobri que a inteligência do autor se limita a olhar o topo. Ele editou o topo do .xml do tema da Juliana.

Mas, obviamente, esqueceu de olhar o rodapé do tema da Juliana… (Clica que aumenta…).

E de alterar o código do AdSense do Marcel (ou da Juliana, não sei de quem é):

Nesse artigo, estou denunciando apenas uma pessoa. É fato que existem diversos que cometem o mesmo “erro”. Não vou acusar alguém de roubo pois, no meu início eu copiava artigos da Info Online (e colocava o crédito no final). Mas, ao crescer profissionalmente e socialmente percebi que ganhar dinheiro pelo trabalho dos outros é mais do que uma sacanagem. E esse foi o motivo principal por ter removido o meu primeiro blog no WordPress.com e removido tudo, sem ninguém mesmo ter solicitado.

Voltando ao sujeito. Além de copiar o tema do DicasBlogger, ele ainda oferece para download gratuito o tema WordFolio. Que custa 37 dólares no ThemeForest. E vem com a justificativa de que:

“Template Muitu Bom…Vc Teria Que Pagar 37 Dolares Por Esse Template..Mais Aqui Só Custa Seu Comentario xD Em Breve Em Blogger”

Vamos ao termo pirataria. Quem aqui nunca baixou uma série, filme, música ou software pirata, por favor, levante a mão. Não sou contra a pirataria, pois de uma certa forma ela incentiva sim, a compra do produto original. Passei metade da minha vida usando Windows pirata. Cansado de toda aquela janelinha chata de Windows falso, cansado de sofrer com a falta de um Windows XP desatualizado resolvi comprar o Windows 7 Ultimate. Original ele custa quase R$700,00 na loja que adquiri. E estou juntando dinheiro para comprar um Microsoft Office 2010 Home and Student.

Também já baixei temas sim. Mas, me digam, você compraria um tema de 50 dólares, para perceber que ele era uma verdadeira porcaria? Bom, isso já aconteceu comigo. Então essa lição vale para os desenvolvedores: não lancem apenas uma versão paga. Desenvolvam como a maioria dos temas atuais: uma versão grátis com recursos bastante limitados e uma versão PRO.

E ainda mais dos abusos cometidos pela RIAA, cujo ódio eu tenho por toda a minha vida. Por isso, eu apóio a EFF. Mas, assim… baixar temas tudo bem, compartilhar também… vender já é demais. E para os termos de plágio: colocar anúncios (seja AdSense, ou não) e/ou aceitar doações é considerado como tentativa de obtenção de dinheiro sob o trabalho dos outros.

Assim sendo, não é apenas a disponibilização do layout copiado e da distribuição com objetivo da geração de lucros sob o tema WordFolio mas, também, a venda de conteúdo de outros blogs. Apesar dos blogs serem de pirataria, ele está lucrando em cima dos outros autores. E eu acho que os autores não vão gostar…

*Vende-se Backup de Postagens em Formato .xml Para Blogger, Confira Os Backup e o Valor de Cada Um:

E claro, ele também tem uma seção que permite o usuário solicitar um site e ele gentilmente copia o layout e disponibiliza gratuitamente. Qualquer site. Você pede o site e ele copia para você (clica que aumenta).

O amigo dele cobra R$100 para fazer templates originais. Não vou julgar quem cobra esse valor. Antigamente, quando eu não precisava de dinheiro pois era “sustentado” pelo pai em tudo, eu cobrava valores baixos (mais do que R$100, definitivamente). Mas, mesmo com 18 anos e ainda sendo “sustentado” pelos pais, para se obter uma independência social e um nível profissional tanto no trabalho, quanto na educação, convenhamos, para se ter um lucro com 100 reais, você precisaria fazer, no mínimo, seis sites por mês. E, antes de mais nada, esse é o preço para fazer o tema de WordPress. Para fazer de blogger é 80 reais.

Não estou falando que o amigo dele é nada. Cada um cobra o preço que lhe convém. Este artigo só está sendo dirigido para uma pessoa e não é o webdesigner que cobra 100 reais.

E só uma observação. Antes de qualquer coisa, ele disse que o tema “Cadê meu Dorflex” (com esse nome, dica) foi criado por outra pessoa. Antes de mais nada: O Marcel já tinha esse nome faz um certo tempo. Não vou citar a causa (ou posso citar?) mas, é algo meio pessoal. Posso dizer que é meio Gregory House e o seu Vicodin inseparável.

Dica aos blogueiros iniciantes. Existem três fatores que pesam em um plágio: Lei, ética e reputação. Dependendo do caso, você pode perder os três, ao mesmo tempo. E isso, certamente, não é bom.

WordPress.com Básico – Painel e Opções de Aprimoramento.

Luan Felipe — Wed, 14 Jul 2010 16:20:49 +0000

Diferente do WordPress.org, o WordPress.com apresenta várias opções em sua primeira aba no painel administrativo, o “Painel“. Ali você encontrará informações e opções importantes (e interessantes) para o acompanhamento de suas estatísticas.

A aba “Painel” é dividida assim:

“Painel“: onde você encontrá várias informações e estatísticas sobre o seu blog, como a quantidade de postagens e comentários, número de visitas (com um gráfico dos últimos dias), últimos comentários, entre outros;
“Estatísticas do site“: Uma página somente com estatísticas úteis sobre os visitantes do seu blog. Como: um gráfico contendo o número de visitantes do dia, semana ou mês; os termos mais pesquisados; os sites que mais lhe enviaram visitas; sites que citaram seus artigos nos deles; e as principais postagens e páginas visualizadas;
“Usuário de Blog“: É uma ferramenta interessante para acompanhar as atualizações de blogs cadastrados nela.
“Meus Comentários“: Se você gosta de fazer muitos comentários com a conta do WordPress.com, é aqui o local onde poderá vê-los, assim como as respostas após a sua.
“Leiômetro“: Uma lista de postagens filtradas a partir das suas tags, uma ferramenta interessante para buscar novidades dentro do WordPress.com.
“Navegador de Etiquetas“: Assim como o “Leiômetro”, o Navegador de etiquetas também apresenta uma lista de postagens pesquisadas através das suas tags. Porém, aqui, você poderá criar novas tags ou excluir dos resultados as já existentes. É outra ferramenta interessante para observar as novidades.
“Meus Blogs“: Uma única conta no WordPress.com permite a criação e administração de vários blogs diferentes, é nesta área que você poderá administrar e acessar seus blogs. Ela apresenta muitas opções como um link para a visualização das estatísticas; habilitar a publicação de postagens através de um e-mail; um link para criar um novo blog; entre outros.
“Assinaturas“: É uma área de administração, onde você cadastra-se para receber novidades por e-mail (newsletter) em outros blogs e acessa esta página para administrá-los. Aqui você pode alterar a frequencia de recebimento das novidades como também solicitar o cancelamento do serviço. Os e-mail serão enviados para o endereço eletrônico cadastrado na conta.
“Estatísticas do Akismet“: Para quem não conhece, o Akismet é uma ferramenta para a detecção de spans nos comentários, nesta página você encontrará dados interessantes sobre a quantidade de comentários contidos como spans.

Como visto, a aba “Painel” apresenta, em sua grande maioria, somente ferramentas de informações e estatísticas, mas muito útil, principalmente as áreas que mostram estatísticas sobre as visitas no seu blog.

Além da aba “Painel“, referente a estatísticas, propriamente dito, temos a aba “Aprimoramentos“, subsequente a ela, que apresenta ferramentas para melhorar seu blog.

Dividida em dos links, “Aprimoramento” e “Domínios“, você encontrará diversos recursos para deixar seu blog ainda mais com a sua cara. Entretanto, esses recursos requerem um investimento em dinheiro.

O WordPress.com, como dito no post anterior, não permite a personalização do CSS dos temas pré-instalados, a menos que você pague para isso. Mas, se você pode pagar para ter algum serviço, acho que também você poderá pagar para ter o WordPress.org, não? O valor da ferramenta para a edição do CSS custa $14,97 por ano.

Além da personalização do CSS, você poderá cadastrar um domínio personalizado para acessar o seu blog, porém também há a necessidade de pagar por isso. E também poderá comprar espaços de 5GB à 100GB para hospedar arquivos.

Como dito, eu acho que se você tem dinheiro para investir nesses aprimoramentos do WordPress.com, também tem para comprar uma hospedagem, registrar um domínio e utilizar o WordPress.org, que apresenta mais liberdade de personalização.

Leitura recomendada: WordPress – Você conhece essa plataforma? – Sem Preceito

Até mais. Siga-me @luanfr, siga-nos @dicaswpbr e assine o feed.