Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/shadow/colorbox-ie.css) is not within the allowed path(s): (/home/carlosjose/:/usr/share/pear/:/var/lib/php/:/tmp/) in /home/carlosjose/www/wp-content/plugins/lightbox-plus/lightboxplus.php on line 143



preview.jpgOlá pessoal, fazendo as minhas caminhadas virtuais de todos os dias a procura de um tutorial bem legal para o Photoshop, encontrei esse para compartilhar com vocês. Como o original é inglês e o de texturas planas que publiquei há algum tempo esta totalmente em inglês e como estou de “férias” resolvi traduzir.

Espero que vocês gostem quem preferir ir ver o post original basta clicar aqui. Quem ainda não foi conferir o novo filme dos Transformers não sabe o que esta perdendo! Mas vamos ao que interessa.

Passo 1
Para este tutorial você vai precisar fazer o download da fonte original e instalar em seu computador. Clique no link direto para a fonte no site dafont.com.

Em seguida no Photoshop, crie um novo documento: 540×300 com 72 Dpi. Pressione a tecla D para que as cores de primeiro e segundo plano fique preto e branco respectivamente. Em seguida com as teclas de atalho ALT+DEL para pintar de preto o background.

Pressione a tecla X para inverter a ordem das cores de primeiro e segundo plano para que fiquem branco e preto. Com a ferramenta Text escreva o texto como vemos abaixo.

step1.jpg

Passo 2
Na versão original do Transformers as letras T e F têm um comprimento maior para baixo em relação ao resto do texto. Para isso precisamos rasterizar todo o texto, clique com o botão direito do mouse sobre a layer do texto e escolha > Rasterize type. Isto transforma a o texto em um padrão gráfico, no Corel Draw chamamos esta operação de converter em curvas.

step2.jpg

Passo 3
Selecione a ferramenta Rectangular Marquee para criar uma seleção na parte inferior das letras T e F. Com a ferramenta Free Transform aumentar a seleção na parte inferior das letras.

(* Observação: Para obter letras exatamente do mesmo tamanho, coloquei uma linha guia abaixo o texto.)

step3.jpg

Passo 4
Agora que as letras T e F estão estendidas, remova a linha guia no menu > View > Clear Guides.
step4.jpg

Passo 5
Em seguida, vamos criar um efeito 3D, adicionando na layer do texto o estilo bevel and emboss, em seguida, duplicando esta layer repetidamente.

Primeiro, vamos adicionar uma layer de estilo. Configure o estilo como mostra a figura abaixo, e clique em OK para aplicar o estilo a layer.

step5.jpg

Passo 6
Ao adicionar o estilo a bevel and emboss, criamos uma borda com sombreamento que será usado no próximo passo.

step6.jpg

Passo 7
Para criar a ilusão de 3D no texto, a partir de agora você irá duplicar a layer do texto várias vezes, cada vez mudando o texto para cima e direita.

Para duplicar a layer selecionada basta pressionar CTRL+J ou a partir do menu principal Layer> Duplicate Layer. Isto irá criar uma nova layer acima da layer selecionada.

Para mover a layer, certifique-se de ter selecionado a ferramenta mover, em seguida, usando as setas do teclado pressione para cima e para direita até que não aparece a parte branca do texto para dar a impressão de profundidade. Repita até ter 5 layer para ficar igual a imagem abaixo.

step7.jpg

Passo 8
Neste passo vamos mesclar as layers em uma única layer a partir da layer original até a quarta copia deixando assim a primeira layer que é a quinta copia fora desta seleção. Para isso selecione as layer com auxilio do shift, em seguida pressione CTRL+E para mesclar as layers selecionas.

Ficamos assim com duas layers, na primeira layer vamos limpar o estilo bevel and emboss, clicando com o botão direito sobre a layer escolha a opção Clear Layer Style. Modifique o nome das layer para “TRANSFORMADORES Top” e “TRANSFORMADORES 3D” como mostras a imagem abaixo.

step8.jpg

Passo 9
Com a layer “TRANSFORMADORES Top ” selecionada, vamos adicionar uma série de 5 estilos que vão dar a esta layer um aspecto pedra envelhecida. Estou indo para cada categoria de estilo diferente, mas na seqüência, você precisa aplicar os estilos. Qualquer coisa fora do normal estará nas caixas amarelas.

Quando terminar clique em OK quando todos os estilos forem adicionados.

step9.jpgstep9a.jpgstep9b.jpgstep9c.jpgstep9d.jpg

Passo 10
O seu documento deve se parecido com a imagem abaixo.

step10.jpg

Passo 11
Para melhorar a layer “TRANSFORMADORES 3D” e que ela possa contextualizar com o efeito aplicado, vamos aplicar Levels (níveis) para que as bordas 3D não tenham mais essa aparência sem graça. Pressione as teclas CTRL+L para abrir a janela de diálogo Levels e configure como mostra a imagem abaixo.

step11.jpg

Passo 12
Para a imagem final, eu apenas acrescentei uma reflexão na layer 3D, duplicando as duas layers e mesclado-as, espelhando na vertical, alterando a opacidade para da layer para 30% e, em seguida, adicionando uma Mask Layer (máscara de camada) aplicando um preenchimento gradiente de branco para preto na máscara.

final.jpg

Para finalizar deixo aqui o link para fazer o download do aqruivo PSD.

É isso!

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 

Apple wallpaper

junho 29th, 2009



Olá pessoal, dando uma pesquisada na internet achei uma coleção com 40 wallpaper de altíssima resolução e com designer digno da Apple.

Você vai encontrar uma verdadeira variedade de estilos com muito bom gosto e criatividade. Resolvi colocar o link direto para o blog do 1stwebdesigner para que vocês possam desfrutar desta fantástica coleção.

Abaixo segue um printscreen do meu desktop com o tema do Apple Aluminium eu não poderia ficar de fora.

É isso!
applealuminium.jpg

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 

Posted in Geral | No Comments »



Olá pessoal, estava fazendo uma pesquisa na internet quando sem querer mesmo, encontrei o blog da Emanuele Feronato, uma designer italiana muito fera!

O que mais me chamou atenção foi o título do post: Create a Lightbox effect only with CSS – no javascript needed, é claro que a curiosidade foi grande e fui conferir.

Para quem já conhece bem JQuery e o lightbox sabe que por traz de toda aquela simplificação do código tem uma carga muito grande de javascript. O mais interessante é que a Emanuele afirma que com o seu lightbox poderia carregar qualquer coisa inclusive imagens.

Realmente funciona muito bem o e com qualquer conteúdo mesmo! Abaixo segue o código HTML e CSS com alguns ajustes que fiz no modelo original para testar.

lb01.jpglb02.jpg

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Light Box</title>
<link rel=”stylesheet” type=”text/css” href=”css/estilo.css”>
<script language=”javascript” type=”text/javascript”>
function ligthbox(l){
document.getElementById(l).style.display=’block’;
document.getElementById(’fade’).style.display=’block’;
}
function fechar(f){
document.getElementById(f).style.display=’none’;document.getElementById(’fade’).style.display=’none’;
}
</script>
</head>
<body>
<p>Esta &eacute; a chamada da fun&ccedil;&atilde;o Light Box | <a href=”javascript:ligthbox(’teste’);”>clique aqui</a> |</p>
<div id=”teste” class=”white_content”><img src=”imagens/ff.jpg” alt=”Nova Logo do Firefox” title=”Nova Logo do Firefox” /><p>Segue a imagens da nova logo do Firefox, que ficou muito massa! | <a href = “javascript:void(0)” onclick =”fechar(’teste’);”>Fechar</a> |</p></div>
<div id=”fade” class=”black_overlay”></div>
</body>
</html>

 CSS

 .black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#000000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 15%;
width: 62%;
height: 62%;
padding: 16px;
border: 6px solid #FF9900;
background-color:#FFFFFF;
z-index:1002;
overflow: auto;
}
img{
width: 90%;
height: 90%;
}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
}
a{
color:#990000;
font-weight:bold;
}

É isso!

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 



capa_04_menor.jpgOlá pessoal, já algum tempo que estou ouvindo burburinhos sobre o HTML 5 e nada de concreto tinha chegado a mim. Na revista TI Digital deste mês venho uma matéria fantástica estabelecendo uma corrida contra o tempo para quem quer fazer um upgrade de conhecimento sobre HTML.Foi feita uma entrevista com Ian Hickson ex-membro da W3C que trabalha atualmente no Google em pesquisas, e desenvolvimento de padrões. O Ian explica as motivações para continuar com os estudos e aperfeiçoamento do HTML.

Todos que trabalham com desenvolvimento web sabe das limitações do HTML 4 e principalmente por misturar apresentação com conteúdo. É por esse fator que usamos o XHTML por ter regras bem definidas e consistentes, mas o HTML 5 promete mudar a visão que temos hoje do HTML 4.

Uma coisa que posso adiantar é que a tag FONT não faz parte do HTML 5, não vou falar muito sobre o assunto, pois quero incentivar todos vocês a comprarem a revista TI Digital (não estou ganhando nada com isso), se nesta corrida você quer chegar na frente, é necessário se equipar. Na revista vem a tradução do Working Draf (rascunho) que é a primeira etapa a ser apresentada a W3c para se tornar uma recomendação no futuro.

Segue abaixo um exemplo que criei com o HTML 5. É isso!

<html>
<head>
<title>..:: Editora R2n – Sua Livraria On-line ::..</title>
</head>
<body class=”elastico”>
<section id=”principal”>
<section id=”topo”>
<header>
<h1><span>Editora R2n – Sua Livraria On-line</span></h1>
</header>
</section>
<hr>
<section id=”menu”>
<nav id=”menuPrincipal”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”sobre.html”>Editora</a></li>
<li><a href=”noticias.html”>Not&iacute;cias</a></li>
<li><a href=”fale.html”>Fale Conosco</a></li>
</ul>
</nav><!–fim menu principal–>
</section>
<hr>
<section id=”conteudo”>
<div id=”colunaA”>
<h2><span>Categorias</span></h2>
<nav id=”menuCategorias”>
<ul>
<li><a href=”arq.html”>Arquitetura</a></li>
<li><a href=”banco.html”>Banco de Dados</a></li>
<li><a href=”compagraf.html”>Computa&ccedil;&atilde;o Gr&aacute;fica</a></li>
<li><a href=”culi.html”>Culin&aacute;ria</a></li>
<li><a href=”inter.html”>Internet</a></li>
</ul>
</nav><!–fim menu categoria–>
</div><!–fim div colunaA–>
<div id=”colunaB”>
<h2 id=”titulo_sugestao”><span>Sugest&otilde;es</span></h2>
<ul class=”sugestao”>
<li>
<a href=”arq.html”><img src=”capas/arq_01.jpg” alt=”"/></a>
<h4>1000 Lights</h4>
<em>Autor: FIELL, CHARLOTTE<br />
Autor: FIELL, PETER<br />
Assunto: ARQUITETURA – DECORAÇÃO<br />
Preço: R$ 124,90</em>     </li>
<li>
<img src=”capas/culi_03.jpg” alt=”" />
<h4>100 Receitas Para Crianças Felizes</h4>
<em>Autor: ADAM, GEMINI<br />
Autor: WATTS, CHARLOTTE<br />
Editora: PUBLIFOLHA<br />
Assunto: CULINÁRIA – GASTRONOMIA<br />
Preço: R$ 29,90</em>     </li>
<li><img src=”capas/compgraf_03.jpg” alt=”" />
<h4>Adobe Photoshop – Os 10 Fundamentos</h4>
<em>Autor: BARROSO, CLICIO<br />
Editora: DESKTOP<br />
Assunto: INFORMÁTICA – COMPUTAÇÃO GRÁFICA<br />
Preço: R$ 99,00</em>     </li>
<li><img src=”capas/banco_02.jpg” alt=”" />
<h4>Aprendendo Mysql</h4>
<em>Autor: WILLIAMS, HUGH E.<br />
Autor: TAHAGHOGHI, M. M. SAIED<br />
Editora: ALTA BOOKS<br />
Assunto: INFORMÁTICA – BANCOS DE DADOS<br />
Preço: R$ 106,00</em>     </li>
<li><img src=”capas/inter_02.jpg” alt=”" />
<h4>Construindo Sites Com Css E (x)html<br />
Sites Controlados Por Folhas De Estilo Em Cascata</h4>
<em>Autor: SILVA, MAURICIO SAMY<br />
Editora: NOVATEC<br />
Assunto: INFORMÁTICA – INTERNET<br />
Preço: R$ 75,00</em>     </li>
<li><img src=”capas/inter_04.jpg” alt=”" />
<h4>Css (folhas De Estilos) – Dicas E Truques</h4>
<em>Autor: MACEDO, MARCELO DA SILVA<br />
Editora: CIENCIA MODERNA<br />
Assunto: INFORMÁTICA – INTERNET<br />
Preço: R$ 34,00</em>     </li>
</ul>
</div><!–fim div colunaB–>
</div>
</section><!–fim conteudo–>
</section><!– fim principal –>
<br class=”limpar” />
<hr>
<footer id=”rodape”>
<ul id=”menuAcesso”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”sobre.html”>Editora</a></li>
<li><a href=”noticias.html”>Not&iacute;cias</a></li>
<li><a href=”fale.html”>Fale Conosco</a></li>
</ul><!–fim menu acesso–>
<address>&copy; EDITORA R2N&reg; LTDA – Rua Ernesto de  Paula Santos, 159753 – Boa Viagem – Recife – PE Cep: 81000-000 -  Pernambuco Fone: +55 (81)  0102-0304</address>
</footer>
</body>
</html>

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 

Olá pessoal, estava lendo um material de CSS falando como criar tabelas retráteis para em certos casos poupar espaço no layout.

Este tutorial foi criado por Craig Grannell (http://www.snubcommunications.com/) um especialista em arquitetura da informação, autor do excelente livro The Essential Guide to CSS and HTML Web Design que inclusive tenho este livro.

Este tutorial é parte integrante da revista www.com.br da editora Europa, uma excelente revista que traz matérias interessantes para os profissionais da internet. Abaixo segue algumas imagens do resultado final da tabela feita totalmente estrutura com thead, tbody e tfloot como já apresentamos aqui em Web Standards: Semântica de Tabela.

E segue o link para fazer downlod dos arquivos usados para criação das tabelas retráteis. Clique aqui.

É isso!

tr01.jpgtr02.jpg

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 

Viver de Design

maio 12th, 2009



338fg1.JPGOlá pessoal, quem não gostaria de viver exclusivamente do seu trabalho? Pergunta interessante que para muitos profissionais é uma realidade. Para por exemplo não vivo 100% de design, mas estou caminhando para isso.

Porque estou falando disso? Um questionamento foi me enviado para saber como cobrar um trabalho impresso ou a maior de todas as dúvidas quanto custa um site? Essas e outras questões do dia a dia do profissional que vive 100% de design são abordadas no livro Viver de Design do Gilberto Strunck da editora 2AB especializada em livros de design.

Eu convido a você a adquirir este livro e poder aprender dicas importantes com as experiências vividas pelo Gilberto Strunck. A leitura em nossa profissão é algo imprescindível. Abaixo segue um resumo dos capítulos do livro. Alberto essa dica é pra você também!

O designer empresário Design… é design! Como é que eu vivo disso?
Neste três capítulos iniciais, Gilberto Strunck aborda pontos básicos: a necessidade de um enfoque empresarial, a natureza dos serviços oferecidos por um designer, a necessidade de conceituação dos projetos.

O caçador e o fazendeiro
O autor toca numa questão essencial, que já levou ao fim centenas de carreiras nascentes: a necessidade do trabalho conjunto do designer com um administrador que busque serviços e trate do aspecto comercial dos negócios.

Relações com os clientes
Este capítulo explica a noção de posicionamento e mostra sua importância, além de alertar para a necessidade de uma tática para alavancar negócios e para a inserção da prospecção de clientes no dia-a-dia do designer.

Amor à primeira vista
Dicas e truques para conquistar o cliente: a apresentação, a postura, o portfólio, o currículo, o cartão de visitas. O autor apresenta ainda dois modelos de currículo.

Trabalhando por conta própria
Como organizar-se para manter-se em situação regular frente à legislação: o registro como autônomo, a seguridade social, o controle contábil.

Tornando-se um empresário
As diversas categorias de negócios, as qualidades necessárias ao empresário, a necessidade do capital e a montagem do negócio, as facilidades oferecidas pelo SIMPLES.

Planejando seu futuro
Delineando o perfil da empresa, batizando o seu negócio, registro da marca.

Quanto ganha e quanto custa um funcionário
A contratação e os encargos sociais, classificação funcional dos designers, políticas de recursos humanos.

Briefing. Não saia do cliente sem ele
O autor oferece um modelo detalhado de briefing para amparar o desenvolvimento dos projetos e a aprovação pelo cliente, além de detalhar a determinação do público-alvo.

Contratando serviços de terceiros
Como diagnosticar a necessidade do uso de serviços de outros profissionais e como contratá-los. O autor aborda ainda a necessidade dos serviços dos produtores gráficos.

Precificação. Quanto valem os meus serviços
Este capítulo desfaz as dúvidas sobre uma questão central: o estabelecimento dos preços a serem cobrados. O autor ensina como calcular horas técnicas, as despesas fixas indiretas e o custo do pessoal, além da margem de lucro. Oferece ainda um modelo de formulário para o acompanhamento das horas técnicas gastas em cada projeto.

Política de preços
Como desdobramento do capítulo anterior, este mostra que outros elementos incidem na precificação, e que cabe estabelecer uma política para ela.

Copyright
O autor ensina como proteger as criações e como negociar os direitos autorais, oferecendo ainda um modelo de contrato de trabalho prevendo cláusulas neste sentido

Negociar é uma arte
Voltando à relação com os clientes, o autor enumera dez pontos vitais para administrar de forma satisfatória este ponto sempre delicado e muitas vezes problemático.

Um basta à especulação
Strunck mostra passo-a-passo como um projeto especulativo é prejudicial ao negócio e à própria profissão como um todo.
O que toda proposta de trabalho deve conter
Este capítulo explica detalhadamente como montar uma proposta de trabalho que atenda a você e ao cliente.

Autopromoção
Algumas estratégias para a promoção do negócio junto a clientes.

Clientes, corações e mentes
Como obter clientes fiéis e como o cliente escolhe o designer.

Ser ou não ser fiel a um cliente
O autor mostra diversas situações e como lidar com elas.

Perdas e danos cliente
Como administrar problemas que fatalmente surgirão no desenrolar do negócio: mal atendimento de clientes, a necessidade de abrir mão de projetos devido ao crescimento dos negócios, panes nos equipamentos, demissão de funcionários…

Pensando estrategicamente
Strunck alerta para a necessidade de conhecimento da atividade de seu cliente em todas as suas fases, de forma a pensar o projeto estrategicamente e assim agregar valor à sua posição de consultor.

A regulamentação da profissão
O autor analisa esta questão, sempre central para qualquer profissional.

Trabalhando com o coração
Como os projetos voltados para ONGs e pequenos clientes podem oxigenar seus projetos.

Vá á luta
Concluindo o volume, Strunck dá alguns conselhos úteis.

É isso!

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 



psgg01.jpgOlá pessoal, gostaria de compartilhar um tutorial bem objetivo e direto para chegar no resultado desejado da garota dourada. Chamo assim porque estava fazendo alguns experimentos para retocar e melhorar a qualidade da foto apenas usando os blending mode layer e sem querer cheguei a um resultado não esperado.

Estes experimentos já aconteceram muitas vezes comigo, experimentar é um grande exercício de criatividade para mim. Não tenho um curso aprofundado de Photoshop, aprendi usar o programa de forma autodidata na versão 4 faz tempo. Mas com as experiências de outros podemos ir avançando no conhecimento, por isso vamos ao que interessa.

1. Use uma foto que deseje ter este efeito, a foto usada neste tutorial esta no Masterfile. Clique aqui para fazer o download.
2. No Photoshop com a imagem aberta, duplique a layer usando: CTRL+J
3. Na layer duplicada proceda assim: menu > Filter > Blur > Gaussian Blur : Radius de 6, no menu > image > adjustments > Desaturate para descolorir a layer e para finalizar esta parte, use o blending mode: Overlay.

psgg02.jpg
4. Vamos criar uma nova layer contendo tudo que fizemos até agora, proceda assim: SHIFT+CTRL+ALT+E.
5. Altere a cor de primeiro plano (foreground color) dando um duplo clique e ajustando o CMYK para 0; 100; 80; 40 e Ok.
6. Agora vamos criar uma adjustment layer através do menu > layer > New adjustment layer > Gradiente Map… Ok para confirmar a layer. Clique no gradiente para criar um novo controle vermelho com Lacation:25 e ajustar o controle branco para location:85 conforme a imagem abaixo.

psgg03.jpg

7. Continuando na mesma layer, use o blending mode: Multiplay com 50% de opacity.
8. Vamos mais uma fez criar uma nova layer contendo o que fizemos até agora, para isso use o simples conjunto de teclas: SHIFT+CTRL+ALT+E.
9. Altere a cor de primeiro plano (foreground color) dando um duplo clique a justando o CMYK para 0; 0; 100; 40 e Ok.
10. Crie uma nova layer e pinte com a cor que acabamos de criar, altere a opacity para 50% e o blending mode para Soft Light.

psgg04.jpg

Com isso terminamos e temos o resultado que queríamos. Para verificar se funcionaria com qualquer tipo de foto e não apenas com esta que usei, percebi que a foto muito escura o efeito não fica legal, chega perto, mas não o suficiente. Use a imaginação alterando as cores que usamos para ter outros resultados.

É isso!

psggfinal.jpg

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 



Web Standards: Semântica de Tabela

Olá pessoal, estou aparecendo pouco por aqui, mas realmente está muito corrido para mim com vários trabalhos ao mesmo tempo. Esta semana ministrando uma aula sobre Web Standards, surgiram alguns questionamentos sobre o uso das tabelas.

Antes de qualquer coisa as tabelas devem ser usadas para a finalidade pela qual foram criadas, para exibir dados tabulares. Todos nós sabemos que ainda tem uma “galera” que usa tabela para criar layout, o que é um grande erro.

O questionamento de uso da tabela se deu pelo fato dos alunos perceberem a importância do DTD (Doctype Defition) na construção semântica dos documentos HTML/XHTML. Para ajudar a todos a esclarecer estas questões, logo abaixo segue a forma correta para criar uma tabela semanticamente correta.

Algumas tags serão acrescentadas as que já conhecemos:

<table> : Estrutura principal da tabela
<tr> : Linha da tabela
<td> : Célula da tabela
<caption> : É aplicado uma cabeçalho ou título acima da tabela
<th> : Table Header, o cabeçalho da tabela tem como característica de centralizar o texto e deixar em negrito. É usado em substituição a <td> para definir o título de uma coluna.
<thead> : Define a primeira linha da tabela que organiza semanticamente todos os cabeçalhos utilizados na tabela.
<tbody> : Define o corpo da tabela, mais precisamente os dados que serão listados abaixo dos cabeçalhos.
<tfoot> : Define o rodapé da tabela. É utilizado para informar ao usuário em uma listagem muito longa em que coluna está. Em termos de código é semelhante ao <thead>. O <tfoot> normalmente e escrito logo após o <thead> para garantir que ele seja carregado primeiro antes do <tbody>, claro que esta ordem não altera em nada o visual, ele sempre ficará no rodapé como pode ser visto no exemplo abaixo.

Abaixo segue o código fonte de uma tabela semanticamente correta:

<table>
<caption>Seu Z&eacute; da venda empreendimentos</caption>
<thead>
<tr>
<th>C&oacute;digo</th>
<th>Produto</th>
<th>Pre&ccedil;o</th>
</tr>
</thead>
<tfoot>
<tr>
<th>C&oacute;digo</th>
<th>Produto</th>
<th>Pre&ccedil;o</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>123</th>
<td>Baton Garoto</td>
<td>R$ 0.50</td>
</tr>
<tr>
<td>456</th>
<td>Pipoc&atilde;o</td>
<td>R$ 1.0</td>
</tr>
<tr>
<td>789</td>
<td>Chiclete Adams</td>
<td>R$ 0.50</td>
</tr>
</tbody>
</table>

Observe que a formatação deve seguir pelo CSS.

tb.jpg
É isso!

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 



Olá pessoal, faz um tempinho que não consigo postar nada por aqui, mas hoje venho com uma dica bem legal que surgiu de uma necessidade.

Estava fazendo uma peça e precisava deste efeito, uma foto com cara de texto. Fui a procura na internet de um tutorial para fazer isso no Photoshop, achei cada coisa boa, porém, ruim! Pois é, acho que você não entendeu nada, vou explicar: depende do tipo da foto para ter um bom resultado neste efeito, assim explicava o autor do tutorial.

Enfim, o tempo estava passando e tive que fazer por mim mesmo no Corel Draw , ajustar o texto um a um para chegar no resultado que eu queria. Abaixo você pode conferir o trabalho.

tex1.jpg

Não fiquei satisfeito e procurei um pouco mais e finalmente encontrei um software open source que pega qualquer imagem e transforma em texto ASCII ou em imagem se quiser! Pois é não acreditei também, mas mesmo assim fiz o download e fiz um teste que você pode conferir logo abaixo.

tex2.jpgtex3.jpg

O ASCGEN não precisa ser instalado é um executável que roda direto. Muito simples de usar e muito intuitivo com uma interface muito direta e objetiva para o que se propõem a fazer. Logo abaixo você pode conferir a interface do programa.

tex4.jpg

No mais clique aqui para fazer download do ASCGEN e mandar ver nas ideias.
É isso!

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 

Posted in Geral | No Comments »



Olá pessoal, vamos fechar a semana com uma dica importantíssima. Quem nunca teve que desenha uma marca conhecida porque não tinha a marca vetorizada? Pois é eu já me deparei inúmeras vezes com esta situação.

Mas para felicidade geral de todos, tive a indicação de um aluno meu de uns sites que tem alguns vetores. Comecei analisar os sites e tive esta grata descoberta, dois sites que tem logomarcas de empresas famosas e todas só esperando por você! O curioso é que encontrei logo dos times brasileiros e internacionais é tudo de bom!

Não perca tempo adicione logo estes sites em seu bookmark e não sofra mais tendo que redesenhar uma marca. Segue os links para o paraíso das logomarcas vetorizadas: http://www.free-logotypes.com/ e http://www.allfreelogo.com/

É isso!

[Post to Twitter] Tweet This Post  [Post to Delicious] Delicious This Post  [Post to Digg] Digg This Post  [Post to Reddit] Reddit This Post  [Post to StumbleUpon] Stumble This Post 

Posted in Geral | No Comments »