Mostrar quantidade de posts criados no Wordpress
Se você possui um site onde existem vários autores, há um certo momento que é interessante mostrar ao usuário a quantidade de posts de cada autor já criou, podendo ser em uma página personalizada do autor, na sidebar de seu blog, ou até mesmo para mostrar o número de posts se você é o único autor de um blog.
>
No Wordpress, isso é muito simples, utilizamos o seguinte código:
<?php the_author_posts(); ?>
Exemplo de uso:
Escrito por <?php the_author(); ?>, que já publicou <?php the_author_posts(); ?> posts nesse blog.
A saída desse código seria semelhante a essa: Escrito por Pedro Rogério, que já publicou 12 posts nesse blog.
CSS Frameworks
O que é um Framework?
Frameworks são estruturas de códigos definidas onde um projeto de software, seja ele web ou não, pode ser criado e desenvolvido. Frameworks podem incluir programas de suporte, bibliotecas de código, linguagens de script ou qualquer outro tipo de software para auxiliar no desenvolvimento.
Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.
Frameworks em CSS
Geralmente são um conglomerado de arquivos css com coisas base para tipografia, estrutura de layout, menu. Sua utilização deve ser muito cuidadosa, pois utilizar Frameworks em desenvolvimento XHTML e CSS não pode lhe trazer a mesma produtividade em que você estivesse usando um Framework para PHP, JavaScript. É importante que o desenvolvedor saiba ler e compreender o código que ele está escrevendo. Não, não quero colocar a idéia aqui de que a utilização de frameworks em css é o fim do mundo, que você não deva utilizar, aliás, quem aqui nunca fez um pouco de copiar e colar em CSS, quem não tem algumas coisas já prontas que sempre as reutiliza a cada projeto? A idéia que quero passar é que é importante você conhecê-los, conhecer seu funcionamento para saber se o que você faz hoje é mesmo o correto, conhecer a forma como trabalham os outros desenvolvedores, aprender a utilizar herança, uma coisa que é essencial e todo desenvolvedor Front-end deveria dominar.
Se você ficou interessado em conhecer os Frameworks CSS, dê uma olhada na lista abaixo:
Elements CSS Framework
Foi desenvolvido para ajudar aos desenvolvedores a escrever CSS mais rápido e mais eficiente. Elements fica longe de ser um simples Framework, ele possui tudo o que você precisa para concluir os seus projetos. Leia o Overview para maiores informações.
YUI Grids CSS
Framework desenvolvido pelo Yahoo possui um preset com 6 modelos pré-definidos de página. Um simples arquivo de 4KB fornece mais de 1000 combinações diferentes de paginação.
Browsers alternativos que você deveria conhecer
As pessoas que estão iniciando no desenvolvimento web, sempre ficam com aquela dúvida, qual a diferença de um browser para outro, o que ele tem de melhor a me oferecer? Nessa pequena lista de browsers, você pode conferir as características básicas de cada um, e escolher o seu preferido:
Firefox (Win/Mac/Linux)
Características básicas: É rápido, possui versão em português, possui um sistema de navegação por abas que agiliza e muito o processo de navegação. Possui também a opção de instalar novos temas e plug-ins. É o preferido de 10 entre 10 desenvolvedores web.
Flock (Win/Mac/Linux)
Características básicas: É um browser que vem preparado para integrar-se a redes sociais como YouTube, Flickr, Facebook entre outras. Possui versões em português e também a opção de instalar novas extensões. Ele é baseado no mesmo motor do Firefox.
Safari (Mac/Win)
Características básicas: De longe o mais rápido e simples de se utilizar, possui uma interface simples e agradável. Só não é muito utilizado pela comunidade pois não possui a opção de instalar temas e extensões.
Opera (Win/Mac/Linux)
Características básicas: Um navegador rápido e seguro. Possui um cliente de BitTorrent para o download de arquivos. Possui versões em Português e também a opção de instalar Widgets.
Google Chrome (Win)
Esse é o recém lançado browser do Google, um browser simples, leve e muito rápido, dentre suas características, podemos citar as seguintes: O motor de renderização utilizado é o Webkit, o mesmo do Safari. Utiliza o sistema de abas, onde cada aba trabalha de forma independente, de forma que problemas ocorridos não interfiram em outras aplicações. Atualizações automáticas contra novas ameaças de malware e phishing.
Aprendendo a debugar CSS
Desenvolver uma folha de estilos para que funcione corretamente em todos os browsers não é tarefa fácil, isso depende muito do layout, depende muito também da experiência do desenvolvedor, mas existem ferramentas que podem lhe auxiliar e lhe conduzir ao desenvolvimento menos doloroso. Utilizar um bom browser é uma delas, por exemplo, o Firefox, que em conjunto com outras extensões se torna uma suíte de desenvolvimento completa.
Plugins recomendados para o desenvolvimento
Um plugin que eu recomendo para auxiliar no desenvolvimento web em conjunto com o Firefox é a Web Developer Toolbar. Este plugin adiciona uma barra de ferramentas a seu Firefox que lhe auxiliam no debug de CSS, além de obter informações valiosas sobre Acessibilidade, desabilitar e habilitar JavaScript, manipular formulários. Uma maneira simples de debugar CSS é você ir até CSS > View Style Information, a partir de agora você deverá selecionar o elemento que deseja ver o CSS que foi aplicado. Abaixo da web developer, você verá informações desse tipo:
html > body > div #articlecontent
Uma outra ferramenta muito poderosa da Web Developer Toolbar é a possibilidade que você tem de editar css on the fly, ou seja, em tempo real e ver as modificações ao mesmo tempo no browser. Para isso você deve ir até CSS > Edit CSS, será aberta uma janela no seu browser, e a partir daí é só começar a edição. Depois basta salvar o arquivo e substituir seu arquivo CSS por esse arquivo novo. Conheço pessoas que não usam qualquer tipo de editor e só desenvolvem CSS dessa forma.
Em contrapartida, temos também o Firebug, utilizado por 9 em cada 10 desenvolvedores, a partir dele você pode editar, debugar e monitorar, HTML, CSS e JavaScript em tempo real em qualquer página web. Para editar o CSS de uma página, por exemplo, após a instalação do plugin, clique com o botão direito no elemento que deseja editar o CSS, escolha Inspect Element ou Inspecionar Elemento, abaixo é aberto um painel onde você tem total acesso ao código HTML e em consequência liberdade total de edição do CSS, como adicionar novas propriedades, deletar propriedades herdadas ou não. Com isso você verá as modificações acontecerem em tempo real semelhante a Web Developer Toolbar. As modificações estando Ok, é só salvar o arquivo e substituir o antigo.
Ferramenta de Debug para Internet Explorer
No Internet Explorer nós temos uma ferramenta não muito parecida com a Web Developer Toolbar e Firebug, mas nas horas difíceis ela quebra um galho, é a Internet Explorer Developer Toolbar, dentre suas características, você tem a possibilidade de:
- Explorar e modificar o DOM (Document object model) de uma página web.
- Localizar e selecionar elementos em uma página web por meio de uma variedade de técnicas.
- Assim como a Web developer toolbar do Firefox, permite selecionar, habilitar e desabilitar o CSS na página.
- Visualização de ids, divs, tabelas e seus respectivos valores.
- Validar os links HTML, CSS, WAI e também RSS.
- Visualizar as dimensões, tamanho de arquivos e permite manipulação da resolução da janela do navegador para uma nova resolução.
- Limpar cache e cookies do navegador.
- Disponibilizar de uma régua repleta de funções para ajudar no alinhamento e medidas de objetos na sua página.
- Procurar por regras de estilo usadas para configurar valores de estilos específicos para um elemento.
Como viram, hoje em dia não existe mais desenvolvimento web sem a utilização dessas ferramentas. Alguém mais quer dar a indicação de alguma ferramenta para auxiliar o desenvolvimento?
CSS Box Model
Entender como funciona o Box Model é essencial para aqueles que querem migrar das tabelas e começar o desenvolvimento de layouts utilizando CSS. É essencial entender como o browser renderiza os elementos HTML para não passar por problemas com Float. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retângulares que são as seguintes:
- Conteúdo
- Espaçamentos (padding)
- Bordas (border)
- Margens (margin)
Imagem Ilustrativa do Box Model
Diagrama em 3D do Box Model gentilmente cedida pelo site hicksdesign.
O que muita gente não sabe quando está iniciando é que o padding é somado a largura total do elemento, ou seja, se temos uma div com uma largura fixa de 300px, e definimos um padding de 10px, ao invés de 300px agora essa div passará a ter 320px de largura, ganhamos 10px de cada lado. É muito importante lembrar-se disso, o padding é somado a largura total. Com margin ocorre a mesma coisa, se definirmos 20px de margin para nossa div, de 320px ela passará a ter 360px. E não se esqueçam de que isso também ocorre com as bordas, se definirmos 2 pixels de borda, a largura agora passará a ser 364px de largura total em nossa div
Características das áreas do box
As margens são sempre transparentes e cada browser tem uma margem default que é definida pelo próprio browser, embora as especificações CSS definam uma margem default(0) para cada elemento HTML, cada fabricante de browser adota um valor default para a margem. As bordas são sempre transparentes e seu valor default é igual a 0. O padding é transparente e seu valor default também é igual a 0. O background(fundo) está sempre por trás do conteúdo e do espaçamento.
Para corrigir esses comportamentos por default do browser, é aconselhável você iniciar seu CSS com um seletor universal (*) zerando todos as margens e paddings dos elementos HTML.
* {margin:0; padding:0}
Utilizando o seletor universal (*) em conjunto com margin:0 e padding:0 você quer dizer que todo elemento HTML irá iniciar com o valor padrão de margin e padding iguais a 0.
