Como escolher seu tema WordPress

1- Tema de acordo com o seu projeto

Lembre-se também de utilizar um tema condizente com o conteúdo que você deseja publicar, pois como você deve saber, a primeira impressão é a que fica e, quando você escolhe de forma inadequada o tema para seu blog você poderá passar uma impressão errada dele para o seu visitante.

Para começar, faça uma rápida pesquisa de templates no WordPress por meio das categorias para diminuir o número de temas que não tem nada a ver com o seu projeto e facilitar na busca pelo modelo ideal.

Quanto à aparência ou design do template ele é fundamental, mas ao contrário do que muitos pensam ter um bom design não significa deixar o seu blog carregado de cores, imagens e textos que preenchem desordenadamente todo o espaço, mas sim limpo, com cores harmônicas e fonte de fácil leitura para que conduza de forma agradável o leitor ao conteúdo.

2- Avalie se o tema atende as suas necessidades

Mais do que ser bonito ou apresentar recursos e funcionalidades extraordinárias,o tema do seu blog deve atender em primeiro lugar as suas necessidades. Existem templates que realmente são incríveis, mas que pecam em problemas como dificuldade de integração com outras plataformas, plugins incompatíveis ou não testados com o tema ou mesmo a dificuldade de tradução e edição para o seu projeto.

Observe também se em “Widgets” do tema escolhido existem opções que serão interessantes para o seu projeto. Se ainda assim sentir necessidade de alguma função específica poderá ativar o recurso desejado por meio da ativação de um plugin.

Se, por exemplo, você deseja criar uma loja online precisará contar com o WooCommerce que é o sistema de ecommerce do WordPress. O plugin de mesmo nome pode ser encontrado na opção “Plugins” onde você deverá clicar sobre “Adicionar Novo” e pesquisar pelo nome para baixa-lo.

3- Verifique se o template possui SEO amigável

Se você acompanha o Blog Certo sabe o quanto é importante (e enfatizo) sobre a otimização de sites e blogs ou simplesmente SEO, o qual deve ser amigável para facilitar a sua busca pelos motores da internet como, por exemplo, o Google.

Para saber se aquele tema escolhido possui o SEO amigável, basta ler as características do template e verificar se existe o termo “SEO friendly”. Caso não possua, é melhor escolher outro tema.

4- Escolha um tema responsivo

O WordPress oferece um grande número de temas responsivos em todas as suas categorias de templates e você deve observar atentamente este detalhe que faz toda a diferença no desenvolvimento do seu projeto.

Como se sabe, o número de acessos à internet tem sido cada vez maior nos dispositivos móveis como é o caso dos smartphones e tablets. E por isso você deve se preocupar em escolher um template WordPress responsivo para o seu blog, ou seja, adaptável à mudança de tela para que o leitor se sinta confortável para visitar e ler os seus posts.

E após ter feito a sua escolha, qualquer alteração por menor que seja é recomendável que se cheque como ficará nos dispositivos moveis. Para isso é só clicar sobre os seus ícones presentes no próprio editor do tema e conferir também no seu aparelho para ter certeza que tudo realmente ficou da forma como esperava.

5- Certifique-se sobre a atualização do template

O WordPress como várias de suas funcionalidades, recursos e plugins passam por constantes atualizações e o template que você escolheu também deve. Por isso verifique na hora de fazer a instalação do tema escolhido qual foi à última atualização realizada pelo desenvolvedor e/ou informação que ele recebe atualizações constantes. Além disso, procure verificar se o template é seguro, ou seja, que não possui ou não sofreu problemas relacionados a segurança.

E, por fim, aproveito para te deixar uma dica. Ao escolher o seu template procure utilizar a maior quantidade de recursos já disponíveis nele, ao invés de personalizar alterações em nível de código-fonte, pois isso pode gerar problemas com atualizações do próprio tema que eventualmente possam surgir.

Viu como é importante escolher cuidadosamente o template do seu blog? Se você escolher um tema pobre, pesado, desorganizado, nada amigável aos motores de busca e sem personalidade perderá uma quantidade significativa de visitantes que conquistaria com outro de navegação fácil, limpo, legível e leve para carregar. Vai querer pagar para ver?

WordPress

WordPress é um sistema livre e aberto de gestão de conteúdo para internet (do inglês: Content Management System – CMS), baseado em PHP com banco de dados MySQL, executado em um servidor interpretador, voltado principalmente para a criação de páginas eletrônicas (sites) e blogs online. Criado a partir do extinto b2/cafelog, por Ryan Boren e Matthew Mullenweg, e distribuído gratuitamente sob a GNU General Public License.

É uma das ferramentas mais utilizadas para conteúdo na web, disputando com o serviço do Google, chamado Blogger. No entanto, o WordPress é adotado por aqueles que queiram uma página com maior personalização e recursos diferenciais.

A popularização deste sistema é devido, entre outras, seu tipo de licença (de código aberto), facilidade de uso e, a versatilidade. Também é possível desenvolver sites de tipo comércio eletrônico, revistas, portfólio, gerenciador de projeto, agregador de eventos e, outros conteúdos devido a sua capacidade de extensão através de plugins, temas e programação PHP.

Vantagens do WordPress

As vantagens em utilizar o WordPress como plataforma para o seu site ou blog são muitas e é possível que pessoas diferentes apontem vantagens distintas. Isso acontece porque a ferramenta é extremamente versátil e pode ser adaptada para uma infinidade de propósitos, desde um simples blog até uma loja online com muitos produtos.

Recursos do WordPress

Como veremos daqui a pouco, os recursos do WordPress podem ser (bastante) ampliados através da instalação de plugins e temas. Apesar disso, os recursos básicos da plataforma, aqueles que vêm instalados por padrão, já são suficientes para se fazer muita coisa. Dentre os recursos nativos da ferramenta, podemos destacar: Editor

  • Biblioteca de mídia com recursos para edição simples de imagens (ex.: recorte e giro);
  • Gerenciador de comentários com moderação incluída por padrão;
  • Editor de aparência do site, onde é possível editar diversos itens do template, como cores, marca e menus*;
  • Editor de widgets;
  • Editor de páginas e posts com recursos avançados de formatação de textos;

Os diferentes tipos de arquivos de imagem

Com tantos formatos de imagem, às vezes é difícil decidir qual é o melhor para cada aplicação. Cada uma das extensões possui características próprias, sendo indicadas para situações diferentes. O JPEG é mais utilizado na web por seu pequeno tamanho, mas o PNG é mais versátil e recomendado para uma qualidade um pouco maior. Alías, falando em qualidade, o EXIF e o TIFF fazem bonito, mas possuem problemas de compatibilidade com programas comuns, então não existe um formato que seja “bom em tudo”. Conheça os mais comuns utilizados atualmente e quais as suas características mais marcantes.

JPEG/JFIF (Joint Photographic Experts Group)

Formato padrão da grande maioria dos usuários, possui uma altíssima taxa de compressão capaz de fazer com que um papel de parede com resolução Full HD (1920×1080) ocupe apenas 100 KB em disco, mas isso só é possível porque a compressão joga fora parte da qualidade.

Em vários casos, em especial nas páginas da internet, o tamanho menor do arquivo supera a desvantagem da perda de qualidade, mas este não é o formato recomendado para quem deseja fidelidade nos detalhes de suas fotos e imagens. Isso não torna o JPG ruim, já que possui um excelente nível de compressão – ele apenas é menos indicado para essas situações.

GIF (Graphics Interchange Format)

Formato desenvolvido pela CompuServe antes do JPEG para os antigos computadores de 8 bits. Na época, esta era uma boa solução devido às limitações de qualidade dos monitores e dos modems de conexão discada. Em imagens web que não necessitam de muita qualidade, o GIF passa a ser uma opção melhor do que o JPG tanto pelo maior nível de compressão quanto por oferecer cores mais vivas, mas está caindo em desuso devido à popularização do PNG e TIFF, que são mais versáteis e compatíveis com a maior velocidade da internet disponível atualmente.

BMP (Windows Bitmap)

Se o JPG pode ser considerado ‘o MP3 do mundo das imagens’, o Windows Bitmap pode ser comparado ao WAVE. Ele preserva todos os detalhes do arquivo original, mas gera arquivos finais bastante grandes por não utilizar nenhuma compressão. A extensão utilizada é .BMP ou .DIB (Device Indepedent Bitmap) e não suporta transparência, sendo mais comuns em computadores com Windows.

PNG (Portable Network Graphics)

Desenvolvido para suprir as limitações do formato GIF, suportando milhões de cores em vez das poucas centenas do formato anterior. Suporta também fundo transparente, compressão sem perdas e até animações, embora não nativamente. Para animações é necessário salvar como APNG (Animated Portable Network Graphics), que funciona de forma muito semelhante ao GIF, mas com um nível de compressão maior (também usa LZW) e alta qualidade.

PSD (Adobe Photoshop Document)

Muito utilizado por profissionais da área de design, o formato PSD é indicado principalmente para usuários das versões do Photoshop por possuir suporte a máscaras, modo CMYK, camada de texto, canais alfa e outras ferramentas avançadas. Muitos profissionais da área preferem salvar a imagem original em PSD para manter a estrutura original e gerar outros formatos (como JPEG, PNG, assim por diante) conforme a necessidade.

Para arquivos maiores o Photoshop utiliza a extensão .PSB (Photoshop Big), que é capaz de salvar um arquivo de até 300 megapixels, sendo uma das melhores opções do mercado para armazenar o original de imagens criadas e depois convertê-las para o meio que será utilizado, sendo tanto PNG para web quanto TIFF para situações onde a qualidade é altamente necessária.

TIFF (Tagged Image File Format)

Considerado por muitos como o melhor formato de imagem de alta qualidade para se trabalhar, o TIFF utiliza compressão sem perdas, mas é preciso lembrar que ele não aumenta a qualidade automaticamente. É necessário utilizar o TIFF desde o começo, pois abrir uma imagem em JPG e salvá-la em TIFF não alterará absolutamente nada.

EXIF (Exchangeable Image File Format)

Bastante similar ao TIFF, suporta 8, 16, 24 e até 48 bits de cores, portanto, é altamente recomendado em situações onde a qualidade final da imagem é muito mais importante do que o tamanho do arquivo, como em imagens médicas, por exemplo. Algumas câmeras digitais de alta qualidade salvam a captura em EXIF para não jogar fora nenhum detalhe. Mas se o EXIF é tão bom, por que não constumamos achá-lo com frequência na web? Basicamente porque existe mais de um tipo, não sendo um formato padronizado. Isso faz com que alguns programas, como os navegadores, não o suportem nativamente, deixando-o restrito a aplicações específicas.

RAW

Utilizado principalmente em câmeras digitais utilizando compressão sem perdas ou com quase nenhum desperdício de informação. Visto como uma excelente opção para os fabricantes por sua alta qualidade, sofre do mesmo problema do EXIF, que é a falta de um padrão que normalize todas as imagens no formato RAW.

WEBP

Desenvolvido pelo Google em 2010, o WEBP traz a proposta de fazer com que as imagens fiquem até 40% menores do que o JPEG sem sacrificar a qualidade. Segundo a empresa, cerca de 65% de todo o tráfego da internet é composto por imagens, das quais mais de 90% são JPEG, então a mudança para esse formato diminuiria o tráfego mundialmente e diminuiria os custos de armazenamento das empresas.

Muitas vezes visto como o futuro formato padrão da internet, no papel o WEBP supera de longe os JPEGs, mas como é comum no mundo da informática, a simples superioridade técnica do WEBP não o tornará padrão, já que o JPEG já faz parte do cotidiano da maioria das pessoas.

Comparativo JPG versus GIF versus PNG

Para ilustrar o que foi dito acima, colocamos imagens de uma paisagem nos formatos mais utilizados na web para mostra a diferença entre um e outro. Confira!

  • JPEG 100% Qualidade – 305 KB
JPG 100%
  • JPEG 60% Qualidade – 55 KB
JPG 60%
  • JPEG 20% Qualidade – 29 KB
JPG 20%
  • PNG 100% Compressão – 401 KB
PNG 100%
  • PNG 50% Compressão – 406 KB
PNG 50%.
  • GIF – 127 KB
GIF Original

O que é HTML?

HTML é um acrônimo para HyperText Markup Language, que em português quer dizer linguagem de marcação de hipertexto. Se trata de uma linguagem de marcação que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

Serve para que o navegador o interprete, informando-o como estruturar a página web, e exiba seu conteúdo quando você acessa essa página pela internet.

O HTML integra as linguagens que formam as camadas de desenvolvimento web

Quando acessamos uma página web a interface resultante, em grande parte dos casos, é obtida através de 3 camadas com funções diferenciadas. Cada camada é representada por uma linguagem específica.

É importante que você saiba da existência dessas camadas para entender que o HTML não trabalha sozinho. As outras linguagens que formam a camada de desenvolvimento são o CSS e o Javascript. Grande parte das páginas web são formadas por códigos das 3 linguagens.

HTML – A camada que apresenta o conteúdo

Podemos dizer que o HTML é a primeira camada. É nesta camada que atribuímos semântica ao conteúdo. É onde podemos dizer que determinada informação é um parágrafo, que determinado texto é um artigo, etc.

O HTML é responsável por exibir o conteúdo dando-lhe significado.

O HTML é a linguagem base e a primeira que  deve ser aprendida.

Ela é tão importante que tanto o CSS quanto o Javascript vinculam em seus códigos elementos, classes ou identificadores HTML para que uma ação seja executa dentro do arquivo HTML.

Entender as camadas de desenvolvimento web te ajudará na compreensão de como as linguagens se relacionam e também como a área de desenvolvimento atribuem as funções entre seus colaboradores.

Quer aprender HTML? Então baixe nosso ebook gratuito clicando aqui.

Formatação de texto com CSS

O texto pode ter características alteradas em CSS que não poderiam ser alteradas em HTML. Podemos citar como exemplo, o espaçamento entre as linhas.
Com o uso do CSS e de suas propriedades, podemos caracterizar textos em qualquer elemento do HTML.

color – Define a cor do texto.
text-ident – Define a distância de recuo do texto no início do parágrafo.
line-height – Define o espaçamento entre as linhas.
text-align – Define o alinhamento do texto, que pode ser ao centro, à direita, à esquerda ou no estilo justificado.
text-decoration – Define a decoraçãao de um texto e é feita com os seguintes valores:
underline (sublinhado), overline (sobrelinhado), line-through (uma linha em cima do texto) e blink (faz piscar o texto).
text-transform – Define uma transformação ao texto, que podem ser as seguintes:
– torná-las todas maiúsculas – uppercase;
– todas minúsculas – lowercase;
– todas as primeiras letras maiúsculas – capitalize.

Vamos criar um exemplo, abre seu editorde texto favoritoe digite o código abaixo, salve como estilos.css.

h1 {
color: #DDA0DD;
text-decoration: underline;
text-transform: uppercase
}
h2 {
color: #3366FF;
text-decoration: line-through;
text-transform: none
}
p {
text-ident: 1cm;
line-height: 2px;
text-align: center
}

Vamos agora criar a página HTML que vai chamar o arquivo CSS, não esqueça de salvar os dois arquivos no mesmo diretório.

<html>
<head>
<title> Bem-vindo! </title>
<link rel= “stylesheet” type= “text/css” href= “estilo.css” />
</head>
<body>
<h1> Textos </h1>
<h2> Formatando textos em CSS</h2>
<p>Exemplos de formatação de texto em CSS e HTML</p>
</body>
</html>