O site Harlancore presenteou os fans da Marvel com diversos PaperCrafts (em sua grande maioria personagens do X-Men).
Basta baixar o arquivo do personagem desejado, imprimir, recortar e montar, seguindo as instruções anexas no próprio arquivo. Os personagens são ótimas peças decorativas para incrementar sua mesa em casa ou no trabalho. Aproveite também para conferir os demais trabalhos do autor.
Um pai muito dedicado resolveu criar o site Lunch Bag Art para disponibilizar na Web sua galeria pessoal de ilustrações.
Esta seria só mais uma dentre tantas outras galerias que já existem por aí, mas todas as ilustrações são feitas diretamente nas lancheiras que seus filhos levam à escola. Esse pai criativo aproveita seu horário de almoço para fazer um desenho diferente à cada dia, deixando o recreio de seus filhos muito mais animado.
Finalmente o tão esperado Wordpress 2.7 (codinome Coltrane) foi lançado oficialmente.
A versão 2.7 (que já possui a tradução PT-BR) está muito diferente em comparação à versão 2.6. A interface foi completamente reformulada e os novos recursos facilitam ainda mais a vida dos usuários. Confira ao lado o vídeo criado pelos desenvolvedores mostrando todas as novidades da nova versão.
Neste post iremos criar um formulário semântico, validado e acessível aos usuários portadores de deficiência visual (que utilizam leitores de tela) e motora (que não utilizam o mouse).
<form id="form" method="post" action="#"> <fieldset> <legend>Dados pessoais</legend> <label for="nome">Nome</label> <input id="nome" name="nome" type="text" title="Nome" tabindex="1" accesskey="n" /> <label for="email">E-mail</label> <input id="email" name="email" type="text" title="E-mail" tabindex="2" accesskey="e" /> </fieldset> <fieldset> <legend>Destinatário</legend> <label for="depto">Selecione o departamento</label> <select id="depto" name="depto" title="Departamento" tabindex="3"> <optgroup label="Departamento 1"> <option value="nome1" title="Nome do funcionário 1">Nome do funcionário 1</option> <option value="nome2" title="Nome do funcionário 2">Nome do funcionário 2</option> </optgroup> <optgroup label="Departamento 2"> <option value="nome3" title="Nome do funcionário 3">Nome do funcionário 3</option> <option value="nome4" title="Nome do funcionário 4">Nome do funcionário 4</option> </optgroup> </select> </fieldset> <fieldset> <legend>Mensagem</legend> <label for="msg">Escreva sua mensagem</label> <textarea id="msg" name="msg" cols="" rows="" tabindex="4" accesskey="m"></textarea> <input id="enviar" name="enviar" type="submit" value="Enviar" tabindex="5" accesskey="e" /> </fieldset> </form>
A tag “fieldset” permite controlar um determinado grupo de campos.
A tag “legend” permite criar um título para um determinado grupo de campos.
A tag “label” permite referenciar um campo. O atributo “for” deve ser relacionado ao atributo “id” de seu respectivo campo.
A tag “optgroup” permite criar grupos da tag “option”.
O atributo “title” permite exibir o valor declarado no formato tooltip.
O atributo “tabindex” permite controlar a navegação dos campos através a tecla TAB.
O atributo “accesskey” permite associar teclas de atalho aos campos.
Ainda no embalo dos posts Identação e boas práticas e Dicas para otimizar seu CSS, agora vamos falar sobre a compactação das propriedades no CSS.
A declaração única nada mais é do que compactar diversas propriedades com a mesma finalidade em apenas uma. Neste post veremos quais são essas propriedades e como utilizar a declaração única corretamente.
Se todos os valores forem iguais:
/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
/* Declaração única */
seletor{margin:10px}
Se os valores top/bottom e right/left forem iguais:
/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
/* Declaração única */
seletor{margin:10px 20px}
Se os valores right/left forem iguais:
/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}
/* Declaração única */
seletor{padding:10px 20px 30px}
Se nenhum valor for igual:
/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
/* Declaração única */
seletor{padding:10px 20px 30px 40px}
/* Declaração normal */
seletor {
border-width: 1px;
border-style: solid;
border-color: #666666;
}
/* Declaração única */
seletor{border:1px solid #666}
/* Declaração normal */
seletor {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 18px;
font-family: arial;
}
/* Declaração única */
seletor{font:italic small-caps bold 12px/18px arial}
/* Declaração normal */
seletor {
background-color: #666666;
background-image: url(imagem.gif);
background-repeat: repeat-x;
background-position: top;
}
/* Declaração única */
seletor{background:#666 url(imagem.gif) repeat-x top}
/* Declaração normal */
seletor {
list-style-type: disc;
list-style-position: inside;
list-style-image: url(imagem.gif);
}
/* Declaração única */
seletor{list-style:disc inside url(imagem.gif)}
Se todos os caracteres forem iguais:
/* Declaração normal */
seletor {
color: #666666;
}
/* Declaração única */
seletor{color:#666}
Se todos os pares de caracteres forem iguais:
/* Declaração normal */
seletor {
color: #6699CC;
}
/* Declaração única */
seletor{color:#69C}
Na declaração única os valores sempre devem seguir o sentido horário (top/right/bottom/left) e a compactação dos hexadecimais pode ser aplicada em qualquer propriedade que contenha color (border-color, background-color, etc).
Aproveitando o post sobre Identação e boas práticas, vamos falar um pouco sobre o CSS. Diferente do XHTML, o CSS pode ser tratado de outra forma, deixando de lado a identação convencional (utilizando TAB’s ou espaços) para utilizar um método otimizado.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
}
ul {
padding: 10px;
border: 1px solid #CCC;
width: 485px;
height: 37px;
background: #EEE;
}
ul li {
float: left;
padding: 10px;
border: 1px solid #CCC;
font: 12px arial;
color: #666;
background: #FFF;
}
/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}
/* Menu */
ul{padding:10px;border:1px solid #CCC;width:485px;height:37px;background:#EEE}
ul li{float:left;padding:10px;border:1px solid #CCC;font:12px arial;color:#666;background:#FFF}
Lembrando que cada TAB, quebra de linha ou espaço consumirá 1 byte, devemos eliminá-los mesclando todos os seletores, propriedades e valores, removendo sempre o último “;” (ponto e vírgula) antes do fechamento da “}” (chave). Um outro ponto importantíssimo é sabermos mesclar as propriedades utilizando a declaração única.
/* Declaração normal */
ul li{border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC}
/* Declaração única */
ul li{border:1px solid #CCC}
A idéia é termos um documento leve afim de economizar R$ por conta da diminuição do consumo de banda, porém a organização é essencial para justificar a ausência da identação, para isso, procure adotar um padrão na ordem das propriedades e identifique cada bloco utilizando comentários.
Uma ótima notícia para os Programadores de Interfaces e afins, a fundação Mozilla criou uma equipe exclusivamente para aprimorar o Firebug.
O Firebug é uma extensão para o Mozilla Firefox que adiciona ao navegador inúmeras ferramentas para facilitar a tarefa dos Programadores de Interfaces. A extensão possibilita a identificação e eliminação de erros de programação, edição e também o monitoramento de CSS, XHTML e Javascript presentes em qualquer página Web.
A Dell lançou recentemente sua nova linha de desktops compactos, o Studio Hybrid. Os desktops utilizam peças de notebook, são 80% menores que os convencionais e economizam 70% de energia.
Além do design arrojado (que pode ser usado na horizontal e vertical), ainda é possível escolher sete opções de cores (incluindo uma versão em bambu). A proposta da Dell é concorrer diretamente com o Mac mini da Apple. O desktop já está à venda nos EUA e custa US$ 499 na versão básica.
O blog hongkiat.com preparou uma seleção especialmente para os fans do Firefox e Thunderbird, ambos produtos da fundação Mozilla.
São 70 lindos wallpapers para todos os gostos e em diferentes resoluções para os fans personalizarem sua área de trabalho com o browser favorito entre os desenvolvedores. Os wallpapers incluem diversos temas diferentes, dentre eles: naturais, nerds, sexuais, engraçados, abstratos, tradiconais, etc.
A utilização da tabela é um assunto polêmico entre os Programadores de Interfaces. Alguns ainda às usam na estruturação de sites, outros levaram o termo “Tableless” ao pé da letra e resolveram abolir seu uso da face da Terra. Devemos lembrar que cada tag deve ser utilizada respeitando o propósito pelo qual foi criada, no caso da tabela, deve ser utilizada para tratar dados tabulares, ou seja, dados exibidos em linhas e colunas.
<table summary="Lista de produtos"> <caption>Lista de produtos</caption> <thead> <tr> <th>Produtos</th> <th>Preços</th> </tr> </thead> <tfoot> <tr> <th>Total de produtos:</th> <td>5</td> </tr> </tfoot> <tbody> <tr> <th>Nome do produto 1</th> <td>R$ 999,99</td> </tr> [...] </tbody> </table>
A tag “caption” permite criar o cabeçalho de título para a tabela.
A tag “thead” permite criar o cabeçalho da tabela.
A tag “tfoot” permite criar o rodapé da tabela (que será exibido após a tag “tbody”).
A tag “tbody” permite criar o corpo da tabela.
A tag “tr” permite criar uma linha.
A tag “th” permite criar um título de linha ou coluna.
A tag “td” permite criar uma coluna.
O atributo “summary” permite criar uma descrição para a tabela.
