<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tableless &#187; Convertidos</title>
	<atom:link href="http://tableless.com.br/categoria/convertidos/feed/" rel="self" type="application/rss+xml" />
	<link>http://tableless.com.br</link>
	<description>Tableless - Desenvolvimento inteligente com padrões web</description>
	<lastBuildDate>Fri, 18 May 2012 12:22:56 +0000</lastBuildDate>
	<language>pt-br</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Convertidos do Tableless</title>
		<link>http://tableless.com.br/convertidos-tableless/</link>
		<comments>http://tableless.com.br/convertidos-tableless/#comments</comments>
		<pubDate>Mon, 21 Mar 2011 04:47:10 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Bonito de se ver]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[padroes web]]></category>
		<category><![CDATA[tableless]]></category>
		<category><![CDATA[tecnicascss]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=3293</guid>
		<description><![CDATA[Os convertidos do Tableless voltaram. Não preciso dizer mais nada. =^)]]></description>
			<content:encoded><![CDATA[<p>Quem acompanha o <a href="http://tableless.com.br">Tableless</a> desde o começo conhece a história de como este humilde website nasceu. Eu estudava e aprendia CSS com HTML de uma única maneira: praticando. Eu convertia para tableless a home de alguns grandes sites just for fun. Só para provar que a técnica era real, possível e muito melhor que tabelas. O Tableless nasceu quando eu decidi compartilhar este material para outros desenvolvedores. </p>
<p>Este material não estava publicado porque uma das empresas que eu utilizei como estudo me mandou uma simpática carta extrajudicial dizendo que eu estava fazendo cópia indevida e todo aquele blá blá blá e que eu devia tirar o materia deles imediatamente do ar&#8230; Eles com certeza não eram bem humorados. Com medo de outras empresas fazerem o mesmo, tirei logo todos os exemplos publicados.</p>
<p>Neste fim de semana estava jogando algumas coisas fora e encontrei um CD com alguns documentos destes websites convertidos. Você pode verificar e baixar os arquivos <a href="http://tableless.com.br/convertidos/" rel="nofollow">nesta página</a>. Até segunda ordem.</p>
<h4>Atenção:</h4>
<p>Se você é um troll babaca que vai analisar o código só para criticar como foi feito, entenda que o código mais antigo é de pelo menos uns 6 ou 7 anos atrás&#8230; Eu faria tudo diferente. <img src='http://tableless.com.br/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<p>Se você pertence a alguma empresa listada nos exemplos, tenha em mente que esse material é utilizado apenas para estudo. </p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/css3-abas-com-a-pseudo-classe-target/" title="CSS3 &#8211; Abas com a pseudo-classe :target">CSS3 &#8211; Abas com a pseudo-classe :target</a></li><li><a href="http://tableless.com.br/introducao-ao-css-3d-flip-card/" title="Introdução ao CSS 3D &#8211; Flip Card">Introdução ao CSS 3D &#8211; Flip Card</a></li><li><a href="http://tableless.com.br/experiencia-deve-ter-comeco-meio-e-fim/" title="Experiência deve ter começo, meio e fim">Experiência deve ter começo, meio e fim</a></li><li><a href="http://tableless.com.br/css3-animation-keyframe/" title="CSS3 &#8211; Animation e regra keyframe">CSS3 &#8211; Animation e regra keyframe</a></li><li><a href="http://tableless.com.br/css3-breve-introducao-a-rgba/" title="CSS3 &#8211; Breve introdução ao RGBA">CSS3 &#8211; Breve introdução ao RGBA</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/convertidos-tableless/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Convertido &#8211; Menu (Livraria Cultura)</title>
		<link>http://tableless.com.br/convertido-menu-livraria-cultura/</link>
		<comments>http://tableless.com.br/convertido-menu-livraria-cultura/#comments</comments>
		<pubDate>Tue, 12 Jan 2010 14:18:18 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[estudo]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[livraria cultura]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=1636</guid>
		<description><![CDATA[Reconstruindo o menu da Livraria Cultura.]]></description>
			<content:encoded><![CDATA[<p>Fazer menus com CSS é relativamente simples. Não precisamos de muitas linhas de código para fazer um menu totalmente personalizado. O Menu da <a href="http://www.livrariacultura.com.br/">Livraria Cultura</a> é feito com Tabela. Na verdade, todo o site deles é feito com Tabelas, mas esse é outro assunto.</p>
<p>Você pode ver o <a href="http://tableless.com.br/convertidos/livraria-cultura/menu/original/">menu deles aqui</a>.</p>
<p>O Código HTML do menu deles é:</p>
<pre lang="html" line="1">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<ul id="jsddm">
<li id="mainmenu-livro" style="height: 22px; width: 79px;">

				<a href="/scripts/cultura/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/novo_livros.gif" alt="Livros" border="0"></a>
<ul id="mainmenu-livro-sub" style="padding: 5px; background: rgb(11, 161, 176) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; position: absolute; width: 69px; z-index: 350; margin-top: -2px; list-style-type: inherit; list-style-image: inherit; list-style-position: inherit; visibility: hidden;">
<li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=POR&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Português</a>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ING&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Inglês</a>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ESP&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Espanhol</a></li>
<li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=FRA&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Francês</a></li>
<li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ITA&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Italiano</a></li>
<li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ALE&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Alemão</a>
</li>
</ul>
</li>
</ul>
</td>
<td><a href="/scripts/videos/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/b_dvds2.gif" alt="DVDs" border="0"></a></td>
<td><a href="/scripts/musica/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/b_cds2.gif" alt="CDs" border="0"></a></td>
<td><a href="/scripts/games/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/b_games2.gif" alt="Games" border="0"></a></td>
<td><a href="/scripts/hotsites/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/novo_sitesesp.gif" alt="Hotsites" border="0"></a></td>
<td><a href="/scripts/eventos/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/novo_eventos.gif" alt="Eventos" border="0"></a></td>
<td width="100%"></td>
</tr>
</tbody>
</table>
</pre>
<p>Eu não encontrei qual seria o pedaço do CSS referente ao menu, por isso eu não vou colar aqui.</p>
<p>O problema da versão do menu deles é que é todo feito com imagens e usa muita tabela. Há também código CSS inline. Isso prejudica leitores de tela, prejudica Google, e manutenção.<br />
A versão que sugerimos é feita utilizando a técnica <a href="http://tableless.com.br/image-replacement-x-imagens">Image-Replacement</a>. Segue abaixo o código HTML:</p>
<pre lang="html" line="1">
<div class="nav">
<ul>
<li class="navlivros"><a href="#">Livros</a>
<ul>
<li><a href="#">Português</a></li>
<li><a href="#">Inglês</a></li>
<li><a href="#">Espanhol</a></li>
<li><a href="#">Francês</a></li>
<li><a href="#">Italiano</a></li>
<li><a href="#">Alemão</a></li>
</ul>
</li>
<li class="navdvd"><a href="#">DVDs</a></li>
<li class="navcd"><a href="#">CDs</a></li>
<li class="navgames"><a href="#">Games</a></li>
<li class="navsitesesp"><a href="#">Sites especiais</a></li>
<li class="naveventos"><a href="#">Eventos</a></li>
</ul>
</div>
</pre>
<p>Abaixo o Código CSS:</p>
<pre lang="CSS" line="1">
* {
	margin:0;
	padding:0;
	list-style:none;
}

.nav {padding:10px;}

.nav ul li {float:left; position:relative;}

/* Define que todos os submenus aparecem quando passarmos o mouse no LI "pai" */
.nav ul li:hover ul {display:block;}

/* Define o estilo dos links */
.nav ul li a {
	float:left;
	height:22px;
	text-indent:-9999px;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
}

/* Adiciona o background e a largura nos elementos do menu */
.nav ul li.navlivros a {width:79px; background-image:url(imagem/_topo/abas/novo_livros.gif);}
.nav ul li.navdvd a {width:79px; background-image:url(imagem/_topo/abas/b_dvds2.gif);}
.nav ul li.navcd a {width:79px; background-image:url(imagem/_topo/abas/b_cds2.gif);}
.nav ul li.navgames a {width:79px; background-image:url(imagem/_topo/abas/b_games2.gif);}
.nav ul li.navsitesesp a {width:149px; background-image:url(imagem/_topo/abas/novo_sitesesp.gif);}
.nav ul li.naveventos a {width:109px; background-image:url(imagem/_topo/abas/novo_eventos.gif);}

/** Define que a UL do submenu está escondida por default. E define o visual do submenu */
.nav ul li ul {
	display:none;
	background:#00A2B0;
	width:70px;
	position:absolute; top:22px; left:0px;
	padding:4px;
}

/* Resetamos todo o estilo dos links do submenu. Isso poderia ser evitado se o IE7 conhecesse seletores complexos ou com JQuery */
.nav ul li ul li a {
	font:13px verdana, arial, tahoma, sans-serif;
	background-image:none !important;
	text-indent:0;
	float:none;
	color:white;
}

.nav ul li ul li a:hover {text-decoration:none;}
</pre>
<p>Veja o resultado do <a href="http://tableless.com.br/convertidos/livraria-cultura/menu/correto/">menu reconstruído aqui</a>.</p>
<p>O Submenu na versão original, eu fiz utilizando apenas CSS. Testei em Firefox e IE7/8. Funciona que é uma beleza. Sem Javascript, sem JQuery, nem nada.<br />
Se o IE7 já conhecesse seletores complexos, não precisaríamos resetar todos os links dos submenus como fizemos na linha 35.<br />
O Código CSS, embora pareça longo, ele está organizado para ser fácil de adicionar outros elementos. </p>
<p>Sempre que escrever um CSS, pense sempre no futuro. Um CSS para resolver um problema imediato, normalmente tem menos código. Mas ele resolve apenas aquele problema específico. Se você fizer um CSS abrangente e pensando no futuro, seu código fatalmente vai ficar maior. Mas você terá menos retrabalho ao fazer as alterações futuras. Eu prefiro.</p>
<p>Pegue aqui os dois códigos para estudar: <a href="http://tableless.com.br/wp-content/uploads/2010/01/livraria-cultura.zip">Reconstrução Menu Livraria Cultura</a></p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/convertidos-tableless/" title="Convertidos do Tableless">Convertidos do Tableless</a></li><li><a href="http://tableless.com.br/image-replacement-x-imagens/" title="Image-Replacement x Imagens">Image-Replacement x Imagens</a></li><li><a href="http://tableless.com.br/o-que-sao-media-types/" title="O que são Media Types do CSS?">O que são Media Types do CSS?</a></li><li><a href="http://tableless.com.br/tutorial-tableless/" title="Tutorial Tableless Básico em HTML5 &#8211; Layout de 3 colunas">Tutorial Tableless Básico em HTML5 &#8211; Layout de 3 colunas</a></li><li><a href="http://tableless.com.br/navegabilidade-em-dispositivos-moveis/" title="Navegabilidade em Dispositivos Móveis">Navegabilidade em Dispositivos Móveis</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/convertido-menu-livraria-cultura/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Convertidos de volta</title>
		<link>http://tableless.com.br/convertidos-de-volta/</link>
		<comments>http://tableless.com.br/convertidos-de-volta/#comments</comments>
		<pubDate>Tue, 12 Jan 2010 14:17:42 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[tableless]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=1633</guid>
		<description><![CDATA[O Convertidos do Tableless marcou época. Hoje, voltamos com o convertidos novamente, mas agora de uma maneira diferente. Mais didática. ]]></description>
			<content:encoded><![CDATA[<p>Quem conhece o começo do Tableless.com.br, lembra dos &#8220;Convertidos do Tableless&#8221;. Os convertidos era uma área no Tableless onde eu reimplementava as homes de grandes sites utilizando HTML e CSS. Era uma época onde ninguém fazia websites sem tabelas, ninguém usava CSS direito e o HTML era feito &#8220;nas coxas&#8221;. Era uma época também que os desenvolvedores duvidavam da possibilidade de fazer websites apenas com CSS, posicionando e diagramando os elementos sem tabela. Por isso, tive a idéia de criar um movimento onde o objetivo não era dar tapas na cara, mas apenas aprender e ensinar. Mostrar que até mesmo websites que foram pensados para tabela, podiam ser feitos com CSS, sem grandes problemas e o mais interessante, compatível com a maioria dos browsers.</p>
<p>Os convertidos do Tableless não existe mais. Algumas empresas que tiveram seus sites convertidos, acharam que o Tableless estava copiando seus layouts e etc. Mandaram uma cartinha extrajudicial, fazendo com que tirássemos seus sites (convertidos) do ar. Bem, fizemos isso e para evitar outros problemas, retiramos toda essa seção do ar.</p>
<p>Hoje, os Convertidos antigos não iriam fazer muito sentido, já que atualmente todos os sites são &#8220;Tableless&#8221;. Entretanto, o código de muitos sites são feitos de uma maneira, vamos dizer assim, não adequada. Por isso, levantarei a questão aqui novamente, mas farei o seguinte: durante algum tempo, pegarei partes de grandes sites conhecidos, recodificarei de uma maneira que eu acho que seria a ideal, e publicarei aqui os resultados.</p>
<p>Deixo bem claro que isso não passa de um estudo. Publicarei aqui os resultados para dividir com vocês o conhecimento adquirido e também ouvir as opiniões de vocês leitores.<br />
Se houver algum desenvolvedor que trabalha nas empresas que citarei daqui pra frente, por favor, pode entrar em contato comigo se preferir. Vamos conversar em como a Visie pode ajudar você a resolver problemas.</p>
<p>Você já pode ver o primeiro Convertido: <a href="http://tableless.com.br/convertido-menu-livraria-cultura">Convertido &#8211; Menu (Livraria Cultura)</a>.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/convertidos-tableless/" title="Convertidos do Tableless">Convertidos do Tableless</a></li><li><a href="http://tableless.com.br/navegando-com-a-jquery/" title="Navegando com a jQuery">Navegando com a jQuery</a></li><li><a href="http://tableless.com.br/melhorando-performance-css/" title="Performance do seu CSS">Performance do seu CSS</a></li><li><a href="http://tableless.com.br/produtividade-editores-e-snippets/" title="Produtividade: editores e snippets">Produtividade: editores e snippets</a></li><li><a href="http://tableless.com.br/convertido-menu-livraria-cultura/" title="Convertido &#8211; Menu (Livraria Cultura)">Convertido &#8211; Menu (Livraria Cultura)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/convertidos-de-volta/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Video tutorial &#8211; Implementando HTML</title>
		<link>http://tableless.com.br/video-tutorial-implementando-html/</link>
		<comments>http://tableless.com.br/video-tutorial-implementando-html/#comments</comments>
		<pubDate>Thu, 13 Nov 2008 23:52:53 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[Vídeos Tutoriais]]></category>
		<category><![CDATA[aprender]]></category>
		<category><![CDATA[campusonline]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[tableless]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=1036</guid>
		<description><![CDATA[Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS. Esse e &#8230;]]></description>
			<content:encoded><![CDATA[<p>Utilizamos esse layout como exercício nos <a href="http://visie.com.br/treinamento/">cursos da Visie</a>. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS.<span id="more-1036"></span></p>
<p><embed src="http://visie.com.br/campus/static/mediaplayer.swf" width="457" height="353" allowscriptaccess="always" allowfullscreen="true" flashvars="height=353&#038;width=457&#038;file=http://visie.com.br/campus/flv/60.flv&#038;image=http://visie.com.br/campus/static/visie.jpg"/></p>
<p>Esse e outros vídeos estão disponíveis no <a href="http://visie.com.br/campus/">Campus Online da Visie</a>. Lá você encontra <a href="http://visie.com.br/campus/">videos tutoriais de Tableless, Ajax, Javascript</a> e um monte de outras coisas.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/produtividade-editores-e-snippets/" title="Produtividade: editores e snippets">Produtividade: editores e snippets</a></li><li><a href="http://tableless.com.br/css3-abas-com-a-pseudo-classe-target/" title="CSS3 &#8211; Abas com a pseudo-classe :target">CSS3 &#8211; Abas com a pseudo-classe :target</a></li><li><a href="http://tableless.com.br/convertidos-tableless/" title="Convertidos do Tableless">Convertidos do Tableless</a></li><li><a href="http://tableless.com.br/sections-elemento-nav/" title="Sections: elemento nav – Parte 2">Sections: elemento nav – Parte 2</a></li><li><a href="http://tableless.com.br/colocar-rodape-fixo-no-bottom/" title="Colocar Rodapé fixo no fim da página">Colocar Rodapé fixo no fim da página</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/video-tutorial-implementando-html/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>WordPress &#8211; Uma pequena introdução</title>
		<link>http://tableless.com.br/wordpress-uma-pequena-introducao/</link>
		<comments>http://tableless.com.br/wordpress-uma-pequena-introducao/#comments</comments>
		<pubDate>Sun, 10 Feb 2008 02:00:07 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[2008]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[tableless.com.br]]></category>
		<category><![CDATA[tags]]></category>
		<category><![CDATA[Template Tags]]></category>
		<category><![CDATA[xhtml]]></category>
		<category><![CDATA[xml]]></category>
		<category><![CDATA[xslt]]></category>

		<guid isPermaLink="false">http://tableless.com.br/wordpress-uma-pequena-introducao</guid>
		<description><![CDATA[O WordPress não foi feito para ser um CMS. Ele foi criado primeiramente para suprir necessidades de criação de blogs. Por acaso, talvez como se fosse um acidente, começamos a utilizá-lo para criar websites, desde os mais simples até os &#8230;]]></description>
			<content:encoded><![CDATA[<p>O WordPress não foi feito para ser um CMS. Ele foi criado primeiramente para suprir necessidades de criação de blogs. Por acaso, talvez como se fosse um acidente, começamos a utilizá-lo para criar websites, desde os mais simples até os mais complicados. O pessoal do WordPress curtiu a ideia e agora está melhorando cada vez mais o sistema para que ele se torne um CMS de verdade, mesmo assim mantendo toda a simplicidade do WordPress original. E o melhor, é tudo de graça.</p>
<p>Quero mostrar aqui o caminho das pedras. O que você precisa aprender para não ficar batendo cabeça no começo. É coisa simples.</p>
<h3>Criando o index.php e o style.css</h3>
<p>Para fazer um tema de WordPress, você precisa apenas de dois arquivos: <strong>index.php</strong> e o <strong>style.css</strong>.</p>
<p>O <strong>style.css</strong> tem uma pequena sintaxe no começo do arquivo com informações do autor do Template. Essas informações serão utilizadas pelo WordPress na tela de Templates.</p>
<p>A sintaxe que está escrita no meu <strong>style.css</strong> é este:</p>
<div class="codecolorer-container css mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br /></div></td><td><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">Você pode utilizar esse código e modificar para ficar com suas informações. Não precisa decorar<span style="color: #00AA00;">,</span> isso é coisa de maluco. <span style="color: #00AA00;">;</span>-<span style="color: #00AA00;">&#41;</span><br />
<br />
Crie um &lt;strong<span style="color: #00AA00;">&gt;</span>style.css&lt;/strong<span style="color: #00AA00;">&gt;</span> com este código dentro. Não iremos utilizar o CSS neste artigo.<br />
<br />
Crie também um &lt;strong<span style="color: #00AA00;">&gt;</span>index.php&lt;/strong<span style="color: #00AA00;">&gt;</span> com a estrutura básica de HTML. Eu utilizo sempre assim<span style="color: #00AA00;">:</span><br />
<br />
<span style="color: #00AA00;">&#91;</span>cc lang<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;html&quot;</span><span style="color: #00AA00;">&gt;</span><br />
&lt;!DOCTYPE html PUBLIC <span style="color: #ff0000;">&quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;</span> <br />
&nbsp; &nbsp; <span style="color: #ff0000;">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;</span><span style="color: #00AA00;">&gt;</span><br />
<br />
&lt;html<span style="color: #00AA00;">&gt;</span><br />
&lt;head<span style="color: #00AA00;">&gt;</span><br />
&nbsp; &nbsp; &lt;meta http-equiv<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/html; charset=utf-8&quot;</span> /<span style="color: #00AA00;">&gt;</span><br />
&nbsp; &nbsp; &lt;title<span style="color: #00AA00;">&gt;</span>&lt;/title<span style="color: #00AA00;">&gt;</span><br />
&lt;/head<span style="color: #00AA00;">&gt;</span><br />
&lt;body<span style="color: #00AA00;">&gt;</span><br />
<br />
&lt;/body<span style="color: #00AA00;">&gt;</span><br />
&lt;/html<span style="color: #00AA00;">&gt;</span></div></td></tr></tbody></table></div>
<p>Daqui para frente, irei colocar apenas o código que irá dentro do BODY do documento. Portanto, tudo que iremos ver agora, insira dentro do BODY do seu documento.</p>
<h3>As Template Tags</h3>
<p>O segredo do WordPress são as Template Tags. Você pode conferir todas aqui: <a href="http://codex.wordpress.org/Template_Tags">http://codex.wordpress.org/Template_Tags</a></p>
<p>Os templates do wordpress são escritos em PHP. Isso torna pro designer um pouco complicado, mas não muito. Se você souber um pouco de PHP, fazer um template é muito fácil, porque PHP é uma linguagem que todo mundo usa. Para facilitar, o WordPress chama as funções do PHP que são utilizadas pelo seu sistema de Template Tags. As Template Tags não passam de funções PHP que recuperam do banco, informações que você precisará para compor o conteúdo do site. Para o programador isso não muda nada. Mas para o pessoal que não é tão íntimo assim com a linguagem PHP, a forma que usamos essas &#8220;funções&#8221; (Template Tags) facilita demais.</p>
<h3>O Loop &#8211; Listando os posts na página</h3>
<p>O Loop é o responsável pelo trecho de código que será repetido para cada post impresso na tela.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p>Pra você chamar os posts do blog é muito simples. Você começará utilizando duas Template Tags dentro deste código de Loop.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
&lt;h2&gt;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/h2&gt;<br />
<span style="color: #000000; font-weight: bold;">&lt;?</span> the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p>A primeira Template Tag que coloquei foi a the_title(). Ela chama os títulos dos posts do site.<br />
A segunda, the_content() chama o conteúdo dos posts. O Conteúdo vem escrito da forma que você criou no WordPress.</p>
<p>Apenas com esse código acima, você não faz um blog completo. Um blog tem outras características importantes. E são elas que iremos ver agora. </p>
<h3>Características de um Blog</h3>
<p>Há algumas características que compõem um blog. Essas características são encontradas geralmente em blogs, isso não quer dizer que em sites de notícias não podem contem essas características:</p>
<ul>
<li>Comentários</li>
<li>Categorias</li>
<li>Data, autor</li>
<li>Feed</li>
<li>Arquivo (histórico)</li>
<li>Busca</li>
<li>Permalink</li>
</ul>
<p>Não iremos mostrar em nosso código como se faz Comentários nem Categorias. O Artigo iria ficar muito mais complicado. Portanto, se estiver interessado, faça a <a href="http://visie.com.br/wordpress/" title="Oficina de WordPress da Visie">Oficina de WordPress da Visie</a>. </p>
<p>Vamos agora melhorar um bocado esse código para que o site se pareça mais com um blog.</p>
<p>Primeiro, vamos colocar Permalinks nos títulos dos posts.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;<br />
<span style="color: #000000; font-weight: bold;">&lt;?</span> the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<h3>Autor e Data</h3>
<p>A Template Tag que iremos utilizar é a the_author_posts_link() para Autor, que colocará a o nome do Autor com o link para seus posts. E a the_time() para colocar a data.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
&lt;p&gt;por <span style="color: #000000; font-weight: bold;">&lt;?</span> the_author_posts_link<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> em <span style="color: #000000; font-weight: bold;">&lt;?</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;<br />
<br />
&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;<br />
<span style="color: #000000; font-weight: bold;">&lt;?</span> the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p>Você pode deixar a Template Tag the_time do jeito que você quiser. Ela usa aquela tabela de formatação padrão de data do PHP, você pode encontrar essa tabela aqui: http://php.net/date/<br />
Iremos formatar nossa data aqui:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
&lt;p&gt;por <span style="color: #000000; font-weight: bold;">&lt;?</span> the_author_posts_link<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> em <span style="color: #000000; font-weight: bold;">&lt;?</span> the_time<span style="color: #009900;">&#40;</span>d<span style="color: #339933;">/</span>m<span style="color: #339933;">/</span>Y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;<br />
<br />
&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;<br />
<span style="color: #000000; font-weight: bold;">&lt;?</span> the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<h3>BUSCA</h3>
<p>Para colocar um formulário de busca é muito simples. O código do formulário será:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;form action=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'home'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<br />
&lt;input name=&quot;s&quot; type=&quot;text&quot; id=&quot;busca&quot; value=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> <span style="color: #339933;">=</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'s'</span><span style="color: #009900;">&#93;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;<br />
&lt;input type=&quot;submit&quot; value=&quot;Procurar&quot; /&gt;<br />
&lt;/form&gt;</div></td></tr></tbody></table></div>
<p>A Template Tag bloginfo() tráz do banco informações sobre o site. Neste caso, ele vai trazer a URL da home do site.<br />
Os inputs do formulário de busca do WordPress já vem com nomes pré-definidos, o input de busca, por exemplo, chama-se <strong>s</strong>.</p>
<p>Nosso código está assim agora.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;form action=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'home'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<br />
&lt;input name=&quot;s&quot; type=&quot;text&quot; id=&quot;busca&quot; value=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> <span style="color: #339933;">=</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'s'</span><span style="color: #009900;">&#93;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;<br />
&lt;input type=&quot;submit&quot; value=&quot;Procurar&quot; /&gt;<br />
&lt;/form&gt;<br />
<br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
&lt;p&gt;por <span style="color: #000000; font-weight: bold;">&lt;?</span> the_author_posts_link<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> em <span style="color: #000000; font-weight: bold;">&lt;?</span> the_time<span style="color: #009900;">&#40;</span>d<span style="color: #339933;">/</span>m<span style="color: #339933;">/</span>Y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;<br />
<br />
&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;<br />
<span style="color: #000000; font-weight: bold;">&lt;?</span> the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
<br />
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<h3>Arquivo e Histórico</h3>
<p>Para criar os arquivos, ou histórico, iremos utilizar a Template Tag: wp_get_archives().</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?</span> wp_get_archives<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></td></tr></tbody></table></div>
<p>Por padrão, essa Template Tag irá gerar uma lista de links dos meses que há posts. Preste bem atenção no código HTML que ele retorna. Ele cria uma lista de LI sem UL ou OL envolta.</p>
<p>Por tanto, temos que escrever dessa forma:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;ul&gt;<br />
<span style="color: #000000; font-weight: bold;">&lt;?</span> wp_get_archives<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><br />
&lt;/ul&gt;</div></td></tr></tbody></table></div>
<p>Ele faz deste modo caso você queira colocar uma CLASS ou ID para nomear a lista.</p>
<h3>Linkando o FEED o arquivo CSS</h3>
<p>O WordPress já cria os Feeds automaticamente. O trabalho que temos é colocar um link para o que o visitante consiga copiar o endereço do RSS e cadastrar no leitor de Feeds preferido dele. Podemos oferecer em RSS, RSS 2 ou ATOM. Existem pessoas que oferecem os três formatos. Vamos oferecer apenas um formato: o RSS2.</p>
<p>A tag link tem um atributo &#8216;rel&#8217;. O atributo rel é mandatório, ele vai dizer qual será o resto da tag. Se você por exemplo colocar o valor rel=&#8221;stylesheet&#8221;, você está dizendo ao navegador que essa tag link é relativo a uma folha de estilo.</p>
<p>O valor &#8216;alternate&#8217; diz ao navegador que estamos diponibilizando o conteúdo de nosso site em um meio alternativo:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #339933;">&lt;</span><a href="http://www.php.net/link"><span style="color: #990000;">link</span></a> rel<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;alternate&quot;</span> <span style="color: #339933;">...</span><br />
<span style="color: #339933;">&lt;</span><a href="http://www.php.net/link"><span style="color: #990000;">link</span></a> rel<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;stylesheet&quot;</span> <span style="color: #339933;">...</span></div></td></tr></tbody></table></div>
<p>A tag type serve para indicar o tipo de arquivo que será carregada. No caso da folha de estillo, existem dois tipos que são utilizados hoje: o XSLT, que é utilizado para formatar código XML. E o tipo CSS, que é para formatar código HTML.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'rss_url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'stylesheet_url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;</div></td></tr></tbody></table></div>
<p>Novamente iremos utilizar a tag boginfo(). Agora ela irá buscar o endereço do RSS e do CSS.</p>
<p>Perceba que utilizamos neste exemplo apenas um arquivo, o <strong>index.php</strong> para listar o conteúdo. O WordPress tem uma maneira eficaz de hierarquia de arquivos. Por exemplo: nós precisamos de um arquivo chamado archives.php para criar a lista de histórico. Na falta deste arquivo, o WordPress utiliza o <strong>index.php</strong> para criar a lista. Se tivéssemos feito o archives.php e colocado o código que utlizamos acima que cria a lista de histórico, o WordPress não utilizará o <strong>index.php</strong>.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/ah-o-maravilhoso-mundo-real/" title="Ah, o maravilhoso mundo real">Ah, o maravilhoso mundo real</a></li><li><a href="http://tableless.com.br/o-caminho-suave-para-o-tableless/" title="O Caminho Suave para o Tableless">O Caminho Suave para o Tableless</a></li><li><a href="http://tableless.com.br/charsets-e-encodes-tabelas-de-caracteres/" title="Charsets e Encodes &#8211; Tabelas de caracteres">Charsets e Encodes &#8211; Tabelas de caracteres</a></li><li><a href="http://tableless.com.br/pdf-sobre-produtividade/" title="PDF sobre Produtividade">PDF sobre Produtividade</a></li><li><a href="http://tableless.com.br/o-que-etableless/" title="O que é Tableless?">O que é Tableless?</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/wordpress-uma-pequena-introducao/feed/</wfw:commentRss>
		<slash:comments>35</slash:comments>
		</item>
		<item>
		<title>Convertidos Tableless de volta</title>
		<link>http://tableless.com.br/convertidos-tableless-de-volta/</link>
		<comments>http://tableless.com.br/convertidos-tableless-de-volta/#comments</comments>
		<pubDate>Tue, 06 Mar 2007 14:33:58 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[Na Prática]]></category>

		<guid isPermaLink="false">http://tableless.com.br/convertidos-tableless-de-volta</guid>
		<description><![CDATA[Em 1 Janeiro de 2003 criei coragem e lancei o Tableless.com.br. Eu já trabalhava com Web antes, mas comecei a desenvolver com Padrões neste tempo. Como me interessei mesmo pela coisa, pensei em criar um site e mostrar as facilidades &#8230;]]></description>
			<content:encoded><![CDATA[<p>Em <a href="http://tableless.com.br/post-1">1 Janeiro de 2003</a> criei coragem e lancei o <a href="http://tableless.com.br/">Tableless.com.br</a>. Eu já trabalhava com Web antes, mas comecei a desenvolver com Padrões neste tempo. Como me interessei mesmo pela coisa, pensei em criar um site e mostrar as facilidades do desenvolvimento com Web Standards.</p>
<p>Eu aprendi de verdade a partir da hora que coloquei a mão na massa. Eu fazia o seguinte: pegava alguns sites de empresas grandes e fazia uma versão do layout atual deles sem usar tabelas para a estrutura do HTML. Fiz muito isso&#8230; Mas muito mesmo, fiz tanto que um dia vi que tinha material suficiente que pudesse interessar alguns desenvolvedores por aí. Foi então que decidi fazer o <a href="http://tableless.com.br/">Tableless.com.br</a> e colocar esses sites como amostras do desenvolvimento com Padrões Web.</p>
<p>Tomei um susto quando as visitas do site começaram a crescer sem que eu fizesse muita coisa. Naquele tempo, pra ter uma idéia, o domínio do site era Tableless.kit.net. Uma comunidade inteira começou a se formar em volta do site&#8230; Os Convertidos (como eram chamados os sites das empresas que eu fazia sem tabelas) começaram a ajudar de verdade os interessados. Até que no dia <a href="http://tableless.com.br/convertidos_fora_do_ar">15 de Julho de 2005</a> recebi uma carta Extra Judicial de uma das empresas dos Convertidos. Foi aí que tirei do ar todos os convertidos. E até hoje o Tableless vem andando sem os Convertidos que foram o grande motivo de criar o site.</p>
<p>Mas, hoje tomei mais coragem e coloquei novamente os <a href="http://tableless.com.br/convertidos/">Convertidos</a> no ar. Espero que eles tragam a mesma ajuda de antigamente para todos. Os códigos estão bem antigos. Principalmente os que eu fiz&#8230; Nunca mudei, nunca atualizei nada&#8230; Portanto, dá este desconto.</p>
<p id="aviso"><strong> 		Todos os textos, gráficos, interfaces, fotografias, logos, marcas, sons ou música pertecem às respectivas empresas. 	</strong></p>
<p><strong> As informações contidas nos Convertidos são apenas de cunho comparativo e de estudo de técnicas e abordagens usando os Padrões Web referenciados pelo <a href="http://www.w3c.org/">W3C</a> (World Wide Web Consortium). 	</strong></p>
<p><strong> Os sites aqui reproduzidos não passam de objetos de estudo e não se tratam de clones dos sites originais. São enviados por profissionais voluntários de Internet e são apenas exibidos aqui depois de uma análise e moderação. Eles não apresentam perigo algum aos usuários de internet. </strong></p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/isso-e-coisa-basica/" title="Isso é coisa básica">Isso é coisa básica</a></li><li><a href="http://tableless.com.br/faculdades-cursos-e-conhecimento/" title="Faculdades, cursos e conhecimento">Faculdades, cursos e conhecimento</a></li><li><a href="http://tableless.com.br/offtopic-nada-como-mudar-um-pouco/" title="[offtopic] Nada como mudar um pouco">[offtopic] Nada como mudar um pouco</a></li><li><a href="http://tableless.com.br/minhas-ferramentas-de-trabalho-sim-e-sobre-fireworks-e-afins/" title="Minhas ferramentas de trabalho (sim, é sobre fireworks e afins)">Minhas ferramentas de trabalho (sim, é sobre fireworks e afins)</a></li><li><a href="http://tableless.com.br/sobre-ser-informado-guerra-sobre-a-desinformacao/" title="Sobre ser informado (guerra sobre a desinformação)">Sobre ser informado (guerra sobre a desinformação)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/convertidos-tableless-de-volta/feed/</wfw:commentRss>
		<slash:comments>31</slash:comments>
		</item>
		<item>
		<title>Retrospectiva 2005 &#8211; Julho</title>
		<link>http://tableless.com.br/retrospectiva-2005-julho/</link>
		<comments>http://tableless.com.br/retrospectiva-2005-julho/#comments</comments>
		<pubDate>Sat, 07 Jan 2006 02:01:07 +0000</pubDate>
		<dc:creator>Elcio Ferreira</dc:creator>
				<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[cotidiano]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=597</guid>
		<description><![CDATA[Julho: Polícia prende dez jovens acusados de tráfico e apologia a drogas no Orkut Água em marte, Google na Lua! Sai o primeiro beta do IE 7. O Bruno explica RSS e ATOM, bem explicadinho. E esse, você viu? (gente &#8230;]]></description>
			<content:encoded><![CDATA[<p><strong><a href="http://tableless.com.br/2005/07/">Julho</a></strong>:</p>
<p><a href="http://www1.folha.uol.com.br/folha/cotidiano/ult95u111241.shtml">Polícia prende dez jovens acusados de tráfico e apologia a drogas no Orkut</a></p>
<p><a href="http://www.esa.int/SPECIALS/Mars_Express/SEMGKA808BE_0.html">Água em marte</a>, <a href="http://moon.google.com/">Google na Lua</a>!</p>
<p>Sai o primeiro beta do <a href="http://www.brunotorres.net/web/primeiro-beta-internet-explorer-7">IE 7</a>.</p>
<p>O Bruno <a href="http://brunotorres.net/assinar/">explica</a> RSS e ATOM, bem explicadinho.</p>
<p>E <a href="http://www.cssplay.co.uk/menu/animation.html">esse</a>, você viu? (gente doida&#8230;)</p>
<p><a href="http://www.download.com/">Download.com</a> se converte aos padrões.</p>
<p>Nós aqui: <a href="http://tableless.com.br/convertidos_fora_do_ar"> <img src='http://tableless.com.br/wp-includes/images/smilies/icon_sad.gif' alt=':-(' class='wp-smiley' /> </a>, o Diego <a href="http://tableless.com.br/semana_azul">participa</a> da Semana Azul e começa a testar o <a href="http://tableless.com.br/internet_explorer7">IE 7</a>. Vai pro ar o <a href="http://tableless.com.br/eptv_tableless">novo site da EPTV</a>, fruto do trabalho que fizemos lá.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/cuidado-com-invasoes-no-wordpress/" title="Cuidado com invasões no WordPress">Cuidado com invasões no WordPress</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/" title="Agora é a vez dos desenvolvedores">Agora é a vez dos desenvolvedores</a></li><li><a href="http://tableless.com.br/boas-praticas-de-acessibilidade/" title="Boas práticas de Acessibilidade">Boas práticas de Acessibilidade</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/retrospectiva-2005-julho/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Descontos no DreamHost &#8211; para serviços anuais e mensais</title>
		<link>http://tableless.com.br/desconto-no-dreamhost/</link>
		<comments>http://tableless.com.br/desconto-no-dreamhost/#comments</comments>
		<pubDate>Wed, 04 Jan 2006 23:39:29 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Bonito de se ver]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[Digest]]></category>
		<category><![CDATA[Extensões]]></category>
		<category><![CDATA[Geral]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[Extensions]]></category>

		<guid isPermaLink="false">http://tableless.com.br/desconto-no-dreamhost</guid>
		<description><![CDATA[Atenção: Se tiver problemas com o pagamento por ser necessário o Google Checkout, leia as instruções aqui: Pagando o Dreamhost com Google Checkout mesmo sendo brasileiro e outras informações aqui. Eu uso Dreamhost a muito tempo. Quase nunca tenho problemas &#8230;]]></description>
			<content:encoded><![CDATA[<p><strong>Atenção</strong>: Se tiver problemas com o pagamento por ser necessário o Google Checkout, leia as instruções aqui:<br />
<a href="http://blog.elcio.com.br/pagando-o-dreamhost-com-google-checkout-mesmo-sendo-brasileiro/">Pagando o Dreamhost com Google Checkout mesmo sendo brasileiro</a> e <a href="http://www.revolucao.etc.br/archives/criando-sua-conta-no-google-checkout-para-assinar-a-dreamhost/">outras informações aqui</a>.<a href="http://blog.elcio.com.br/pagando-o-dreamhost-com-google-checkout-mesmo-sendo-brasileiro/"><br />
</a></p>
<p>Eu uso <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a> a muito tempo. Quase nunca tenho problemas (você já viu este site fora do ar?). Ele tem ferramentas úteis como WordPress ou PHPBB que são facilmente instaláveis com apenas 1 clique. Fazer atualização destes sistemas também é tão fácil quanto instalá-los.</p>
<p>Algumas vantagens:</p>
<ul>
<li>No <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a> você também pode criar domínios e subdomínios ilimitados. Isso é bom para quem quiser hospedar sites de clientes, amigos e etc;</li>
<li>Painel de controle simple e bonito;</li>
<li>Você pode criar uma conta FTP individual para cada domínio hospedado;</li>
<li>Além do FTP, você tem acesso o servidor via SSH;</li>
<li>O <a href="http://www.dreamhost.com/r.cgi?132780/signup/?next_step=Index">plano mais básico</a> do <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a> te dá 200 Gigas de espaço e 2 Teras de transferência mensal.</li>
<li>Você pode ter mais de 3000 contas de email para cada domínio hospedado&#8230; e isso no plano básico!</li>
<li>Fora painel de controle, instalações com um clique, Ruby on Rails, PHP nas versões 4 e 5 e MySQL, Streamming Quicktime, Aliases de e-mails ilimitados e muito mais.</li>
<li>Você ganha um domínio .com/.net/.org <strong><strong>graça</strong></strong></li>
<li>E depois que virar cliente, você ainda pode ganhar uns trocados com o programa de afiliados que eles tem. É só indicar assim como fazemos aqui. Se quiser, pode copiar as informações descritas nesta página.</li>
</ul>
<p>No <a href="http://wiki.dreamhost.com/index.php/Main_Page">Wiki do Dreamhost</a> tem mais detalhes e repostas de alguma dúvida que você possa ter.</p>
<p>Com o Tableless você ganha 3 tipos de descontos no <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a>, abaixo veja as descrições e passos para o cadastro:</p>
<p>Com o cupom de desconto <strong>TABLELESS </strong>você consegue:<br />
25% de desconto no L1 Anual:<strong> de $119.40 você paga $89.65</strong><br />
15% no L2  Anual: <strong>de $239.40 você paga $203.49</strong></p>
<p>Se você preferir <strong>uma conta mensal</strong> no <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a>, também damos desconto, use o cupom <strong>TABLEBLESSMENSAL </strong>e ganhe <strong>$39,90</strong> de desconto em todos os planos mensais do <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a>.<br />
Mensal L1 de $59,90 <strong>você paga $20,00</strong>.<br />
Mensal L2 de $69,90 <strong>você paga $30,00</strong>.<br />
Mensal L3 de $89,90 <strong>você paga $50,00</strong>.</p>
<p>E tem também o cupom <strong>TABLELESS6007</strong>, onde você ganha 60% de desconto nos planos:<br />
Mensal L1 de $59,90 <strong>você paga $24,96.</strong><br />
Anual L1 de $119,40 <strong>você paga $47,76 por um ano!</strong><br />
Mensal L2 de $69,90 <strong>você paga só $27,96.<br />
</strong>Mensal L3 de $89,90 <strong>você paga $35,96.</strong></p>
<p>E tem também o <strong>TABLELESS2</strong> onde você ganha $40,00 de desconto em qualquer plano do <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a>. Só colocar TABLELESS2 na hora de comprar qualquer plano e você ganha $40,00 de desconto no ato.</p>
<p>Para poder <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">ganhar desconto ao assinar</a> algum plano de hospedagem na <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Dreamhost</a>, siga os seguintes passos:</p>
<ul>
<li><a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">Escolha o plano que gostar mais</a>;</li>
<li>Clique no botão “<strong>SIGN UP NOW</strong>” do respectivo plano;</li>
<li>Na seguinte página, você escolhe o nível do plano que você gostaria de ter;</li>
<li>Na mesma página, você escolhe se quer receber comissões por indicações;</li>
<li>Logo após, selecione as opções de domínio, se você não tiver domínio ainda, preencha os dados referentes ao seu domínio, conta de usuário, email e seus dados pessoais. Se já tiver, é só selecionar dizendo que já tem um domínio;</li>
<li>No último campo, intitulado “<strong>Promo Code or email of who referred you:</strong>“, digite um dos cupons do Tableless: <strong>TABLELESS</strong>, <strong>TABLELESSMENSAL</strong> ou <strong>TABLELESS60</strong>;</li>
<li>Clique em <strong>I agree to abide by DreamHost&#8217;s <a href="http://www.dreamhost.com/tos.html" target="new">Terms of Service</a> and <a href="http://www.dreamhost.com/spam.html" target="new">Anti-Spam Policy</a>.</strong></li>
<li>E para finalizar clique no botão “<strong>Continue to secure payment…</strong>”;</li>
<li>Cheque o valor. Ele já deve estar <em>com o desconto aplicado</em>;</li>
<li>Preencha os dados do seu cartão de crédito (<strong><em>tem que ser internacional</em></strong> <strong>ou via <a href="http://www.paypal.com/us/">paypal</a></strong>) e finalize a compra;</li>
</ul>
<p>Pagando pelo GoogleChekout é fácil:</p>
<p>Por causa de fraudes que estavam ocorrendo o Dreamhost está passando a utilizar o GoogleCheckout como forma de pagamento. Para ter uma conta no GoogleCheckout, você precisa apenas já ter ou criar uma conta no Google (GMail).</p>
<p>Para usar o GoogleCheckout no Dreamhost, siga os passos abaixo:</p>
<ol>
<li>Ao se cadastrar, no país escolha BAHAMAS. Isso porque você não precisará colocar CEP.</li>
<li>Preencha o restante dos dados normalmente.</li>
<li>Quando chegar em SHIP MY ORDER TO, selecione a opção A DIFFERENT ADDRESS, e agora sim, selecione BRAZIL como seu país. Depois, preencha seu endereço.</li>
<li>Clique em AGREE e CONTINUE e pronto!</li>
</ol>
<p>Assine o <a href="http://www.dreamhost.com/r.cgi?132780/hosting.html">DreamHost pelo Tableless</a> e saia do sufoco.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/curso_de_web_standards/" title="Curso de Web Standards">Curso de Web Standards</a></li><li><a href="http://tableless.com.br/site-em-ajax-site-em-flash-pergunta-ruim/" title="Site em Ajax? Site em Flash? Pergunta ruim.">Site em Ajax? Site em Flash? Pergunta ruim.</a></li><li><a href="http://tableless.com.br/cuidado-para-nao-regredir/" title="Cuidado para não regredir">Cuidado para não regredir</a></li><li><a href="http://tableless.com.br/web-20-pe-no-chao/" title="Web 2.0 pé no chão">Web 2.0 pé no chão</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/desconto-no-dreamhost/feed/</wfw:commentRss>
		<slash:comments>59</slash:comments>
		</item>
		<item>
		<title>Retrospectiva 2005 &#8211; Janeiro</title>
		<link>http://tableless.com.br/retrospectiva-2005-janeiro/</link>
		<comments>http://tableless.com.br/retrospectiva-2005-janeiro/#comments</comments>
		<pubDate>Sun, 01 Jan 2006 02:01:37 +0000</pubDate>
		<dc:creator>Elcio Ferreira</dc:creator>
				<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[Na Prática]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=591</guid>
		<description><![CDATA[A ano de 2005 foi um ano de evolução, de chegada à maturidade. Foi o décimo aniversário da Internet comercial no Brasil. A comunidade está menos propensa a abraçar &#8220;the next big thing&#8221;. Isso é muito bom. Todo o hype &#8230;]]></description>
			<content:encoded><![CDATA[<p>A ano de 2005 foi um ano de evolução, de chegada à maturidade. Foi o décimo aniversário da Internet comercial no Brasil. A comunidade está menos propensa a abraçar &#8220;the next big thing&#8221;. Isso é muito bom. Todo o hype por trás do Ajax foi solenemente ignorado ele foi estudado e utilizado como a excelente ferramenta que é. A mesma coisa com essa consciência a respeito das possibilidades únicas da web que nós estamos chamando de &#8220;Web 2.0&#8243;.</p>
<p>Para nós aqui do Tableless foi um ano de grandes mudanças e muito aprendizado. Mudanças na forma de trabalhar. Foi o ano em que comecei a trabalhar com <a href="www.djangoproject.com">Django</a>. Os cursos e projetos foram ficando cada vez mais divertidos e muitas portas se abriram.</p>
<p>Vamos recordar:</p>
<p><strong><a href="http://tableless.com.br/2005/01/">Janeiro</a></strong>:</p>
<p>O <a href="https://www.planalto.gov.br/ccivil/_ato2004-2006/2004/decreto/d5296.htm">Decreto Nº 5.296 (sobre Acessibilidade)</a> estava fazendo um mês e era assunto corrente nas listas de discussão e <a href="http://simonevb.com/blog/2005/01/modelo_de_acessibilidade_disponivel_para_consulta_publica.htm">blogs</a>.</p>
<p>O <a href="http://mail.google.com">Gmail</a> oferecia acesso POP.</p>
<p><a href="http://idgnow.uol.com.br/AdPortalv5/InternetInterna.aspx?GUID=FF4E650D-E0A5-4FB9-A100-443F53450728&amp;ChannelID=2000012">O uso de blogs crescia</a> e se popularizava.</p>
<p>O Opera estava em sua versão 7.5 e o <a href="http://www.opera.com/pressreleases/en/2005/01/06/">beta 7.6 se tornou disponível para Linux</a> (me lembro de ter testado).</p>
<p>Enquanto isso o Firefox 1.0, lançado no final de 2004, <a href="http://www1.folha.uol.com.br/folha/informatica/ult124u17805.shtml">agitava o mercado</a> conseguindo <a href="http://www1.folha.uol.com.br/folha/informatica/ult124u17882.shtml">20 milhões de usuários</a> e, naturalmente, <a href="http://www1.folha.uol.com.br/folha/informatica/ult124u17793.shtml">levantava críticos</a>.</p>
<p>O <a href="http://www.gazzag.com/">Gazzag</a> era lançado, um dos primeiros a tentar entrar na onda Orkut.</p>
<p><a href="http://csszengarden.com/?cssfile=http://www.tastydirt.com/zen/sample.css">Geocities Zen Garden</a></p>
<p>O Google <a href="http://idgnow.uol.com.br/AdPortalv5/InternetInterna.aspx?GUID=18D9E0C7-6F51-42F5-B1F4-C83795425B2B">contratava Ben Goodger</a>, o criador do Firefox e <a href="http://www.wired.com/news/business/0,1367,66386,00.html?tw=wn_5bizhead">anunciava</a> suas pretensões de trabalhar com vídeos.</p>
<p>Nós aqui: eu <a href="http://webinsider.uol.com.br/vernoticia.php/id/2319">escrevia</a> sobre aquelas pessoas que presas às estatísticas diziam que seus sites não precisavam ser compatíveis com qualquer outro navegador senão &#8220;aquele&#8221; e o Diego <a href="http://tableless.com.br/feliz_2005">iniciava o ano vitaminando</a> a saudosa seção de convertidos.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/isso-e-coisa-basica/" title="Isso é coisa básica">Isso é coisa básica</a></li><li><a href="http://tableless.com.br/faculdades-cursos-e-conhecimento/" title="Faculdades, cursos e conhecimento">Faculdades, cursos e conhecimento</a></li><li><a href="http://tableless.com.br/offtopic-nada-como-mudar-um-pouco/" title="[offtopic] Nada como mudar um pouco">[offtopic] Nada como mudar um pouco</a></li><li><a href="http://tableless.com.br/minhas-ferramentas-de-trabalho-sim-e-sobre-fireworks-e-afins/" title="Minhas ferramentas de trabalho (sim, é sobre fireworks e afins)">Minhas ferramentas de trabalho (sim, é sobre fireworks e afins)</a></li><li><a href="http://tableless.com.br/sobre-ser-informado-guerra-sobre-a-desinformacao/" title="Sobre ser informado (guerra sobre a desinformação)">Sobre ser informado (guerra sobre a desinformação)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/retrospectiva-2005-janeiro/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Bradesco Convertido</title>
		<link>http://tableless.com.br/bradesco_convertido/</link>
		<comments>http://tableless.com.br/bradesco_convertido/#comments</comments>
		<pubDate>Thu, 30 Jun 2005 03:00:00 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Convertidos]]></category>
		<category><![CDATA[Geral]]></category>
		<category><![CDATA[cotidiano]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=432</guid>
		<description><![CDATA[Recebi ontem um trabalho de conversão muito bom. Acho que o Walter (autor do trabalho), aproveitou a discussão sobre sites de bancos, e converteu o site do Bradesco. Quero parabenizar o Walter Michel por ter feito esse ótimo trabalho. Foi &#8230;]]></description>
			<content:encoded><![CDATA[<p> Recebi ontem um trabalho de conversão muito bom.<br />
Acho que o Walter (autor do trabalho), aproveitou a discussão sobre sites de bancos, e converteu o site do <a href="http://tableless.com.br/convertidos/bradesco/tableless/">Bradesco</a>.</p>
<p>Quero parabenizar o <a href="http://www.estatis.com.br">Walter Michel</a> por ter feito esse ótimo trabalho.<br />
Foi um dos melhores trabalhos que já recebi&#8230;<br />
O site do Bradesco é um tanto complexo. Eu mesmo queria ter convertido, mas sempre batia uma preguiça ao ver todos detalhes&#8230;. Ainda bem que existem pessoas mais bem dispostas do que eu! <img src='http://tableless.com.br/wp-includes/images/smilies/icon_biggrin.gif' alt=':-D' class='wp-smiley' /> </p>
<ul>
<li><a href="http://tableless.com.br/convertidos.asp#bradesco">Dados da Conversão</a></li>
<li><a href="http://www.bradesco.com.br/">Site Original</a></li>
</ul>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/cuidado-com-invasoes-no-wordpress/" title="Cuidado com invasões no WordPress">Cuidado com invasões no WordPress</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/" title="Agora é a vez dos desenvolvedores">Agora é a vez dos desenvolvedores</a></li><li><a href="http://tableless.com.br/boas-praticas-de-acessibilidade/" title="Boas práticas de Acessibilidade">Boas práticas de Acessibilidade</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/bradesco_convertido/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
	</channel>
</rss>

