<?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; Artigos</title>
	<atom:link href="http://tableless.com.br/categoria/artigos/feed/" rel="self" type="application/rss+xml" />
	<link>http://tableless.com.br</link>
	<description>Boas práticas de Desenvolvimento com Padrões Web</description>
	<lastBuildDate>Wed, 08 Feb 2012 13:23:50 +0000</lastBuildDate>
	<language>pt-br</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Agora é a vez dos desenvolvedores</title>
		<link>http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/</link>
		<comments>http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/#comments</comments>
		<pubDate>Sun, 05 Feb 2012 13:53:11 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5455</guid>
		<description><![CDATA[A revolução pode começar sem você.]]></description>
			<content:encoded><![CDATA[<p>O desenvolvimento web depende de três personagens principais: <strong>W3C</strong>, que regulamenta, cria e sanciona padrões para a web. Os <strong>browsers</strong>, que importam essas regras e padrões de forma que a web seja mais homogênea. E os <strong>desenvolvedores</strong>, que possibilitam a criação e publicação de conteúdo em vídeos, texto, imagem etc.</p>
<p>Cada um destes personagens tem papéis importantes para que a evolução da web possa se tornar forte, traçando novos caminhos, cobrindo as necessidades atuais dos usuários e prevendo necessidades e soluções futuras. Há um ciclo para que estes personagens possam cumprir com seus objetivos.</p>
<p>O W3C cuida dos padrões. Ele tem ideias, ele prevê problemas e tenta solucioná-los. O W3C não aplica, ele apenas planeja. É um trabalho difícil, por que é necessário uma visão muito apurada do cenário da web para saber quais caminhos ela deverá tomar. Uma decisão errada, pode acarretar problemas que levarão anos para serem solucionados por completo. Vide o desenvolvimento com tabelas. Por isso esse trabalho de planejamento deve ser meticuloso. Devo confessar que em muitos casos o W3C não supera as expectativas e faz com que iniciativas paralelas surjam e direcionem a Web para um caminha mais correto. Foi o que aconteceu com o HTML5.</p>
<p>Os browsers, por sua vez, precisam entender e adotar as idéias do W3C, absorvendo as soluções e criando suporte nos seus softwares. Esse trabalho também tem seus perigos. Os browsers precisam pesquisar quais das necessidades dos desenvolvedores é mais importante e assim implementá-la para que a utilização de projetos seja executada. Obviamente que alguns decidem suportar aquelas soluções que darão mais pontos estratégicos contra o concorrente.</p>
<p>Finalizando o ciclo, os desenvolvedores aplicam tudo o W3C define, mas apenas aquilo que os browsers “querem” ou podem suportar. E isso, claro, faz com que o desenvolvedor se depare com problemas na ponta produção. Vide o IE6/7/8 e nossos problemas de cada dia.</p>
<p>Durante muito tempo, esse ciclo não era afinado. Havia uma certa confusão e um jogo de interesses próprios envolvendo principalmente os browsers. O W3C estava apenas pensando em como resolver problemas que talvez existiriam daqui longos anos. Os browsers estavam apenas interessados em criar uma massa de usuários suficiente para ser o primeiro no ranking. Os desenvolvedores, por sua vez, queriam ganhar seu dinheirinho, fazer o trabalho, entregar pro cliente e acabar com o problema.<br />
Ninguém deu atenção quando começamos a desenvolver com tabelas, fazendo com que os sites ficassem mais pesados, aumentando o tempo de desenvolvimento e o custo do projeto. </p>
<p>Este ciclo defeituoso foi praticado durante muito tempo. Por incrível que pareça, foram os Desenvolvedores que começaram a fazer o ciclo funcionar novamente como deveria. Eles acordaram os fabricantes de browsers e também o W3C. </p>
<p>O W3C passou a pensar mais em problemas presentes. Solucionou problemas iminentes e que entregavam valor para os projetos. </p>
<p>Os browsers suportaram o mais rápido possível essas mudanças, atualizando seus engines, e fortalecendo as bases para novas soluções e flexibilizações posteriores.</p>
<p>Já os desenvolvedores estagnaram. Desculpe-me, serei um pouco revoltado daqui para frente. Os desenvolvedores dormiram. Quando o W3C e os browsers apresentaram soluções para problemas como transparência, bordas arredondadas, backgrounds inteligentes, utilização de fonts remotas e etc, os desenvolvedores resolveram que não era a hora dessas soluções por causa da retrocompatibilidade com browsers antigos, como o IE6. Na verdade estou sendo meio injusto aqui. Não foram todos os desenvolvedores que criaram caso com a retrocompatibilidade, foram somente os idiotas.</p>
<p>Nós reclamávamos que precisávamos de recursos mais inteligentes para trabalhar. Que precisávamos de idéias realmente inovadoras, que transformassem os projetos e facilitassem o desenvolvimento. Protestamos, escrevemos manifestos, postamos em nossos blogs revoltados com a falta de visão do W3C e com a pobreza do suporte dos browsers. E quando conseguimos o que queríamos, demos para trás. Amarelamos. Pedimos arrego.</p>
<p>Infelizmente, via-se muito disso aqui no Brasil do que no resto do mundo. Ouvi muitas desculpas como: &#8211; “Mas meu cliente usa IE6.” ou “Mas isso não funciona em IE6.” Você é desenvolvedor. Você trata com seu cliente todos os dias. Você tem o poder de <a href="http://tableless.com.br/convencimento-e-educacao-liberdade/" title="Convencimento e educação = liberdade">educar e convencer</a>. E se você acha que não tem poder nenhum, por que ainda trabalha com web?</p>
<p>Talvez isso seja trauma do passado. Talvez não. O fato é que não podemos mais nivelar por baixo. Isso é atrasar uma “evolução” inteira.</p>
<p>Tenho incansavelmente falado sobre <a href="http://tableless.com.br/bem-vindo-a-xangrila-parte-1/" title="Bem vindo a Xangri-lá – Parte 1">Graceful Degradation, Enhanced Progressive</a>, <a href="http://tableless.com.br/categoria/client-side/html-css/html5-client-side/">HTML 5</a>, as <a href="http://tableless.com.br/categoria/client-side/html-css/css3/">maravilhas do CSS 3</a> e etc, pois esse é o assunto que rola lá fora. Há desenvolvedores e empresas, que acham que devemos ter uma autorização especial dos gringos para utilizarmos novas tecnologias e principalmente <a href="http://tableless.com.br/browsers-antigos-guerra-contra-o-terror/">para deixar os browsers antigos no passado</a>.</p>
<p>Esse assunto me faz pensar em outra pergunta: Estamos (você está?) preparados para o ritmo alucinante do W3C e dos browsers?<br />
Até a Microsoft está cumprindo com a palavra de ter um browser atualizado. Eles já anunciaram o novíssimo Internet Explorer 10, com uma série de atualizações que promete trazer o IE para o patamar de browsers atuais. </p>
<p>O mercado de client-side se transformará rapidamente nos próximos anos. Muitas mudanças no HTML e no CSS serão publicadas com o intuito de tornar a web mais homogênea, flexível, portável. O HTML 5 não é só uma coleção de novas tags e APIs. O CSS 3 não ganhou só bordas arredondadas. E nem só de iPhone vive o homem. Existem milhares de Nokias, Blackberrys, Windows Phones e Androids por aí.</p>
<p>Os desenvolvedores precisam acordar.</p>
<p><small>Artigo originalmente publicado em Nov/2009 na revista TI Digital.</small></p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/introducao-a-padroes-de-codificacao/" title="Introdução aos padrões de codificação">Introdução aos padrões de codificação</a></li><li><a href="http://tableless.com.br/epub-aprenda-a-criar-um-livro-digital/" title="ePub: Aprenda a criar um livro digital">ePub: Aprenda a criar um livro digital</a></li><li><a href="http://tableless.com.br/css1k/" title="CSS1K">CSS1K</a></li><li><a href="http://tableless.com.br/um-pensamento-sobre-design-para-web/" title="Um pensamento sobre design para web">Um pensamento sobre design para web</a></li><li><a href="http://tableless.com.br/introducao-das-premissas-dos-controles-de-versao/" title="Introdução das premissas dos controles de versão">Introdução das premissas dos controles de versão</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>ePub: Aprenda a criar um livro digital</title>
		<link>http://tableless.com.br/epub-aprenda-a-criar-um-livro-digital/</link>
		<comments>http://tableless.com.br/epub-aprenda-a-criar-um-livro-digital/#comments</comments>
		<pubDate>Wed, 01 Feb 2012 12:13:28 +0000</pubDate>
		<dc:creator>Dani Guerrato</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[ebook]]></category>
		<category><![CDATA[ePub]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5346</guid>
		<description><![CDATA[Conheça as vantagens do formato, aprenda a criar um livro do zero, descubra as melhores práticas e porquê você deve correr dos geradores automáticos.
]]></description>
			<content:encoded><![CDATA[<h2>Introdução</h2>
<p>Com a crescente popularização de tablets e leitores digitais não há dúvida de que os livros eletrônicos vieram para ficar. O formato ePub vem cada vez mais se consolidando como o padrão definitivo para eBooks. As editoras procuram profissionais especializados, mas, aqui no Brasil não existem muitos que de fato possuem o know-how necessário para desenvolver livros no padrão. Na verdade o que acontece é que as editoras estão alocando o tipo de profissional errado para a função. Um diagramador padrão, acostumado com editoração impressa via softwares visuais como Indesign vai ter problemas ao tentar lidar com linhas de código. Já um desenvolvedor front-end vai se sentir em casa já que criar e editar um livro digital é basicamente lidar com XHTML e folhas de estilo em CSS. Neste artigo vou comentar sobre as vantagens (e desvantagens) deste padrão e como com algumas poucas dicas você poderá editar um livro digital.</p>
<h2>Por que não usar PDF?</h2>
<p>O PDF tem muitas vantagens. Até a sua tia que te liga toda semana para perguntar de novo como faz para ler o resultado da Megasena na internet sabe como abrir um PDF. E do ponto de vista do design é ótimo. Hey, você tem muito mais controle do layout! Você pode colocar imagens e textos como quiser sem se preocupar com nada. Exceto… Você já tentou ler um PDF em um smartphone? É simplesmente agonizante. É necessário dar zoom in e out a cada frase diferente. Ou tentar ler tudo em um tamanho de letra absurdamente pequeno…</p>
<p>Isto acontece por que o PDF é baseado no suporte físico de uma folha, o que simplesmente não faz sentido no mundo digital. Vou explicar: um artista que pretende pintar uma nova obra de arte precisa saber o tamanho da tela. Da mesma maneira, ao editar um livro, ou qualquer outro tipo de documento para a impressão, é necessário saber o tamanho da folha para aí então fazermos toda a diagramação. O problema é que em um ambiente digital não existe uma folha. Existe um viewport (ou seja, área de visualização) que pode ser, bem, do tamanho que o usuário quiser! Se ele for ler o seu livro no browser pode aumentar e diminuir o tamanho da janela até a resolução máxima do monitor. Ou pode optar por ler em um tablet, smartphone, eReader… Enfim, a questão é que não temos como determinar a medida de altura e largura da mesma maneira que fazíamos com o papel. E o PDF, como foi pensado para ser impresso, precisa desta medida fixa.</p>
<h2>Sobre o ePub</h2>
<p>ePub é abreviação de Eletronic Publication, ou seja, Publicação Eletrônica. É um formato de livro aberto e gratuito criado pelo <a title="IDPF" href="http://idpf.org/">IDPF</a>, um fórum internacional de publicação digital. Os livros deste formato são fluidos, o que permite que a experiência de leitura seja legal em qualquer tamanho da tela, sistema operacional ou dispositivo que você escolher. Desde que você tenha um app para isto, é claro. Mas isto não é muita preocupação. Existem leitores gratuitos para quase todos os aparelhos e sistemas operacionais (se você não conhece nenhum dê uma olhadinha no final do texto). Outro aspecto bacana do ePub é o controle que ele dá ao usuário. É possível realizar buscas, navegar através de links, aumentar e diminuir o tamanho da letra, trocar as fontes, a paleta de cores, etc. Sim, isto significa que se o cara quiser ler o livro inteiro em Comics Sans ele pode! Mas se isto deixar o usuário feliz quem somos nós para dizer não?</p>
<h2>Como editar</h2>
<p>Bem, agora que você já sabe como ler e por que usar, vamos descobrir como é um livro digital por dentro! Criei um livro de exemplo para utilizar neste tutorial. <a href="http://tableless.com.br/wp-content/uploads/2012/01/meulivro.epub_.zip">Você pode baixa-lo aqui</a>. Mas qualquer outro livro que você tiver neste formato vai servir para o nosso experimento.</p>
<p>A extensão ePub é um formato de livros compactado. Faça um teste: renomeie o arquivo deste tutorial de meulivro.epub para meulivro.zip ou meulivro.rar que você poderá ver o conteúdo do pacote. No entanto, uma coisa importante de se ter em mente é que não são todos os softwares editores que estão preparados para salvar neste formato. Até dá para ler os arquivos XHTML separados, mas você teria que abrir manualmente, editar e recompactar a cada mudança de volta para ePub o que não seria nada prático. Felizmente existem alguns softwares como <a title="Sigil" href="http://code.google.com/p/sigil/">Sigil</a> que são específicos para a edição de código de ePubs. Eles não tem um visual muito bonito mas cumprem com a função direitinho. Bem, vamos explorar os arquivos…</p>
<p><strong>Obs.</strong> Existem outras especificações opcionais, mas vou me manter dentro do fundamental.<br />
<strong>Obs.2</strong> Os nomes dos arquivos são case sensitive.</p>
<h2>A Estrutura</h2>
<p>Vamos voltar ao nosso ePub! Ao descompactar a pasta você vai ter o seguinte:</p>
<p>arquivo mimetype<br />
pasta META-INF</p>
<ul>
<li>container.xml</li>
</ul>
<p>pasta OEBPS</p>
<ul>
<li>content.opf</li>
<li>toc.ncx</li>
<li>style.css</li>
<li>titulo.html</li>
<li>capitulo1.html</li>
<li>capitulo2.html</li>
</ul>
<h2>Para que serve tudo isso e como eu crio sozinho?</h2>
<h4>Mimetype</h4>
<p>A função do mimetype é informar ao sistema operacional qual é o tipo do arquivo. O mimetype é um simples arquivo de texto ASCII.  Para criar um mimetype basta abrir qualquer editor (ou até mesmo o bloco de notas) e escrever esta linha de código:</p>
<div class="codecolorer-container text 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="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">application/epub+zip</div></td></tr></tbody></table></div>
<p>Salve como mimetype (sem nenhuma extensão) e pronto. Está feito! O mimetype é igual para qualquer ePub. Então copiar de um outro ePub da certo também.</p>
<h4>Container.xml</h4>
<p>Deve ficar dentro da pasta  META-INF. A função deste arquivo é agregar todos os outros. Bora criar um!</p>
<div class="codecolorer-container xml 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="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;UTF-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;container</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;urn:oasis:names:tc:opendocument:xmlns:container&quot;</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;rootfiles<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;rootfile</span> <span style="color: #000066;">full-path</span>=<span style="color: #ff0000;">&quot;OEBPS/content.opf&quot;</span> <span style="color: #000066;">media-type</span>=<span style="color: #ff0000;">&quot;application/oebps-package+xml&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/rootfiles<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/container<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<h4>Content.opf</h4>
<p>Descreve o conteúdo de todos os arquivos. Apesar da extensão esquisita é só criar um xml e depois salvar como .opf É composto das seguintes partes: metadata, manifest e spine. O esqueleto dele é assim:</p>
<div class="codecolorer-container xml 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="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;UTF-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;package</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://www.idpf.org/2007/opf&quot;</span> <span style="color: #000066;">unique-identifier</span>=<span style="color: #ff0000;">&quot;EPB-UUID&quot;</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;2.0&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #808080; font-style: italic;">&lt;!-- insira os parâmetros aqui --&gt;</span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/package<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<h4>Metadata</h4>
<p>Não tem muito segredo aqui. São as informações do seu livro.</p>
<p><strong>Itens obrigatórios:</strong></p>
<ul>
<li><strong>title </strong>- O título do seu livro.</li>
<li><strong>language </strong>- A Lingua utilizada. Como o livro está em português eu escolhi pt-br.</li>
<li><strong>identifier </strong>- Um código único para o seu livro. Pode ser o ISBN, por exemplo.</li>
</ul>
<p><strong>Itens opcionais:</strong></p>
<ul>
<li><strong>creator </strong> &#8211; O criador. No caso, você.</li>
<li><strong>contributor</strong> &#8211; Contribuidor</li>
<li><strong>publisher </strong>- Editora</li>
<li><strong>subject </strong>- Assunto</li>
<li><strong>description</strong> &#8211; Descrição do livro</li>
<li><strong>date </strong>- Data</li>
<li><strong>type </strong>- Tipo</li>
<li><strong>format</strong> &#8211; Formato</li>
<li><strong>source</strong> &#8211; Fonte</li>
<li><strong>relation</strong> &#8211; Relação</li>
<li><strong>coverage</strong> &#8211; Cobertura</li>
<li><strong>rights</strong> &#8211; O tipo de licença. Creative Commons, por exemplo.</li>
</ul>
<p>Bem, vamos preencher nossas metadatas. Eu inseri o seguinte entre as tags package:</p>
<div class="codecolorer-container xml 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 /></div></td><td><div class="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;metadata</span> <span style="color: #000066;">xmlns:opf</span>=<span style="color: #ff0000;">&quot;http://www.idpf.org/2007/opf&quot;</span></span><br />
<span style="color: #009900;"><span style="color: #000066;">xmlns:dc</span>=<span style="color: #ff0000;">&quot;http://purl.org/dc/elements/1.1/&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Saga do primeiro ePub<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:creator</span> <span style="color: #000066;">opf:role</span>=<span style="color: #ff0000;">&quot;aut&quot;</span> <span style="color: #000066;">opf:file-as</span>=<span style="color: #ff0000;">&quot;Dani&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Dani<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:creator<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:date</span> <span style="color: #000066;">opf:event</span>=<span style="color: #ff0000;">&quot;original-publication&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>2012<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:date<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:publisher<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Tableless<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:publisher<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:date</span> <span style="color: #000066;">opf:event</span>=<span style="color: #ff0000;">&quot;epub-publication&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>2012-01-30<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:date<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:subject<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Primeiro ePub<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:subject<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:subject<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Estudos<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:subject<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:source<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Tableless<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:source<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:rights<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Pode copiar galera!<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:rights<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:identifier</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;EPB-UUID&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>minhaid<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:identifier<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;dc:language<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>pt-br<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/dc:language<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/metadata<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<h4>Manifest</h4>
<p>É um manifesto mesmo. Deve conter (em qualquer ordem) a lista de todos os arquivos da sua publicação. Exceto mimetype, container.xml e content.opf É necessário especificar uma ID única para cada arquivo. Você pode nserir estas informações antes ou depois da metadata. O importante é que esteja também dentro da tag package. No caso do nosso livro-tutorial ficou assim:</p>
<div class="codecolorer-container xml 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 /></div></td><td><div class="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;manifest<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #808080; font-style: italic;">&lt;!-- Documentos --&gt;</span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;titulo&quot;</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;titulo.html&quot;</span> <span style="color: #000066;">media-type</span>=<span style="color: #ff0000;">&quot;application/xhtml+xml&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;capitulo1&quot;</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;capitulo1.html&quot;</span> <span style="color: #000066;">media-type</span>=<span style="color: #ff0000;">&quot;application/xhtml+xml&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;capitulo2&quot;</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;capitulo2.html&quot;</span> <span style="color: #000066;">media-type</span>=<span style="color: #ff0000;">&quot;application/xhtml+xml&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<br />
<span style="color: #808080; font-style: italic;">&lt;!-- CSS Style Sheets --&gt;</span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;main-css&quot;</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;style.css&quot;</span> <span style="color: #000066;">media-type</span>=<span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<br />
<span style="color: #808080; font-style: italic;">&lt;!-- NCX --&gt;</span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;ncx&quot;</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;toc.ncx&quot;</span> <span style="color: #000066;">media-type</span>=<span style="color: #ff0000;">&quot;application/x-dtbncx+xml&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/manifest<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<h4>Spine</h4>
<p>A espinha do livro, ou seja, a ordem de leitura. Aqui você deve colocar apenas os arquivos tipo HTML na ordem que você deseja que apareça no livro, chamando cada um pelo ID que você definiu no manifesto. Tome cuidado para não duplicar nenhum arquivo ou ID. Como você já adivinhou, deve ser inserido entre as tags package também.</p>
<div class="codecolorer-container xml 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 /></div></td><td><div class="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;spine</span> <span style="color: #000066;">toc</span>=<span style="color: #ff0000;">&quot;ncx&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;itemref</span> <span style="color: #000066;">idref</span>=<span style="color: #ff0000;">&quot;titulo&quot;</span> <span style="color: #000066;">linear</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;itemref</span> <span style="color: #000066;">idref</span>=<span style="color: #ff0000;">&quot;capitulo1&quot;</span> <span style="color: #000066;">linear</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;itemref</span> <span style="color: #000066;">idref</span>=<span style="color: #ff0000;">&quot;capitulo2&quot;</span> <span style="color: #000066;">linear</span>=<span style="color: #ff0000;">&quot;yes&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/spine<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<h4>toc.ncx</h4>
<p>TOC é uma sigla para Table of Contents, ou seja, o indice do livro. Também é um arquivo xml salvo com a terminação .ncx Possui a seguinte estrutura:</p>
<p><strong>#head</strong></p>
<ul>
<li>uid — o identificador único em content.opf</li>
<li>depth — níveis do sumário &gt;= 1</li>
<li>totalPageCount — to 0</li>
<li>maxPageNumber — to 0</li>
</ul>
<p><strong>#navMap</strong></p>
<p>O sumário em si</p>
<p><strong>#navPoint</strong></p>
<ul>
<li>id — único do arquivo</li>
<li>playOrder —ordem de navegação (iniciando em 1)</li>
</ul>
<p>O nosso índice ficou assim então:</p>
<div class="codecolorer-container xml mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:400px;"><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 />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br /></div></td><td><div class="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;UTF-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span><br />
<span style="color: #00bbdd;">&lt;!DOCTYPE ncx</span><br />
<span style="color: #00bbdd;">PUBLIC &quot;-//NISO//DTD ncx 2005-1//EN&quot; &quot;http://www.daisy.org/z3986/2005/ncx-2005-1.dtd&quot;&gt;</span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ncx</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://www.daisy.org/z3986/2005/ncx/&quot;</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;2005-1&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;dtb:uid&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;idtest&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;dtb:depth&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;3&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;dtb:totalPageCount&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;dtb:maxPageNumber&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;docTitle<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Saga do primeiro ePub<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/docTitle<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;docAuthor<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Dani<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/docAuthor<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navMap<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navPoint</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;titulo&quot;</span> <span style="color: #000066;">playOrder</span>=<span style="color: #ff0000;">&quot;1&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navLabel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Titulo<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navLabel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;content</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;titulo.html&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navPoint<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navPoint</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;capitulo1&quot;</span> <span style="color: #000066;">playOrder</span>=<span style="color: #ff0000;">&quot;2&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navLabel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Capitulo 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navLabel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;content</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;capitulo1.html&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navPoint<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navPoint</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;capitulo2&quot;</span> <span style="color: #000066;">playOrder</span>=<span style="color: #ff0000;">&quot;2&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;navLabel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Capitulo 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/text<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navLabel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;content</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;capitulo2.html&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navPoint<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/navMap<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ncx<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<p>&nbsp;</p>
<h4>Os capítulos</h4>
<p>É aqui que entra o livro em si. Cada capitulo deve ficar em um HTML separado. Estes arquivos não são nada diferentes de HTMLs comuns:</p>
<p>&nbsp;</p>
<div class="codecolorer-container xml 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 /></div></td><td><div class="xml codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;html</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span style="color: #000066;">xml:lang</span>=<span style="color: #ff0000;">&quot;pt&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;application/xhtml+xml; charset=utf-8&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Capítulo 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;link</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;style.css&quot;</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;body<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h3<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Capítulo 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h3<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Hello World! Este é o primeiro capítulo do nosso livro. Yey!<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/html<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></div></td></tr></tbody></table></div>
<h4>Outros tipos de arquivos:</h4>
<p><strong>CSS</strong> &#8211; Uma folha de estilos normal.<br />
<strong>Pasta images</strong> &#8211; Aqui devem ficar as imagens do livro. Formatos permitidos: jpeg, png, gif e svg+xml<br />
<strong>Pasta fonts</strong> &#8211; Utilize esta pasta se você quiser embedar algum arquivo de fonte no seu documento. Lembre-se de utilizar sempre o formato Open Type pois alguns aplicativos de leitura não suportam True Type.</p>
<h4>E agora basta compactar!</h4>
<p>Selecione todos os arquivos e crie um arquivo compactado (pode ser .zip ou .rar). Depois é só renomear para .epub e ler no seu dispositivo favorito. Pronto! Você tem um livro digital! <img src='http://tableless.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<h2>Dicas importantes para editar um ePub</h2>
<h4>Semântica é sua amiga</h4>
<p>Bem, se você é leitor do Tableless provavelmente não preciso dizer isso, mas vou dizer mesmo assim! É muito importante utilizar uma estrutura semântica aqui. Tags h1 a h6 para títulos, p para parágrafos… O que você já está mais do que cansado de saber a esta altura. Evite usar br para quebrar a linhas por que sem ter o tamanho de um container é difícil determinar quando de fato vai ser necessário quebrar a linha.</p>
<h4>Evite seletores complexos</h4>
<p>Leitores digitais não são tão sofisticados quanto browsers. Mantenha o seu CSS o mais simples possível.</p>
<h4>Use tamanhos relativos</h4>
<p>Como as &#8220;páginas&#8221; do seu livro vão aumentar e diminuir de acordo com o tamanho da tela do dispositivo não utilize pixels como medida para nada. Lembre-se: EM para texto e margens, porcentagens para figura. Isto vai garantir que o seu livro continue proporcional e escalável. E o seu leitor feliz!</p>
<h4>Tamanho é Documento</h4>
<p>Não use apenas um documento XHTML para o livro todo. A recomendação é que os capítulos tenham menos de 300k cada. Mais do que isto pode deixar alguns leitores, como o iBooks por exemplo, muito lentos! A razão é que estes apps consideram cada capítulo como um bloco de texto diferente. Se você colocar tudo em um documento só o aplicativo vai carregar tudo de uma vez a cada acesso.</p>
<p>Outra dica é tentar usar sempre imagens otimizadas para a web e com uma resolução não maior do que 1200 x 1600px.</p>
<h4>Não pire muito na escolha de fontes</h4>
<p>Evite usar fontes fora do padrão websafe. Você pode embedar fontes Open Type utilizando a propriedade @font-face mas isto não significa que voce deve. Para começar não são todos os leitores que aceitam isto e no final o seu arquivo pode ficar pesado demais e travar. E muitas vezes pode ser um trabalho extra inútil já que o seu usuário pode muito facilmente trocar de fonte. Se mesmo assim você quiser usar não escolha mais do que dois ou três tipos.</p>
<h2>Edição visual</h2>
<p>Sim. Existem alguns softwares que podem gerar o livro para você. O Adobe InDesign faz isto, o Pages do Mac… Mas falando sério: não vale a pena. O código vai ficar sujo e no final você vai ter que corrigir vários bugs. É como se você estivesse utilizando um editor &#8220;What you see is what you get&#8221; para fazer um site. Acho que vocês entendem o drama. Mas… se você for realmente caminhar por esta estrada escura tenha algumas coisas em mente:</p>
<ul>
<li>Se você está acostumado com editoração nestes programas é preciso mudar alguns paradigmas. Esqueça páginas mestras, hifenização, numeração, pé de página… você não precisa se preocupar mais com estas coisas em um formato digital.</li>
<li>Crie estilos específicos para o que é título, parágrafo, etc e não esqueça de importa-los na hora de salvar o arquivo.</li>
<li>Cuidado ao gerar o TOC (table of contents, ou seja, o índice). Se você colocar mais de dois subniveis pode dar problemas de compatibilidade com alguns programas e o seu livro simplesmente não abrir.</li>
<li>Lembre-se que todas as imagens precisam estar ancoradas para que fluam juntamente com o texto.</li>
<li>Determine quebras de capítulos. No caso do InDesign, salve cada parte do livro em um arquivo diferente. Depois junte todos os arquivos em um formato &#8220;book&#8221;.</li>
</ul>
<h2>E quanto ao formato iBook da Apple?</h2>
<p>A Apple lançou recentemente um software gratuito chamado iBooks Autor para a criação visual de livros digitais. Os livros no formato iBook são bem interativos, permitindo a implementação de elementos multimidia como videos (coisa que ainda está engatinhando no formato ePub). Com um &#8220;pequeno&#8221; porém. Sem muito alarde nos termos de serviço a Apple colocou uma clausula de exclusividade para livros comerciais. Ou seja, se você utilizar o software e vender o seu livro através da iBook Store não poderá vender em mais nenhum lugar. Sem contar que o programa é exclusivo para Mac.</p>
<h2>Fique longe dos conversores automáticos!</h2>
<p>Existem alguns softwares ainda que prometem converter de PDF para ePub. Fique longe deles! Sério. Eles são ainda piores que os editores visuais. Um software não consegue interpretar um livro da mesma maneira que um ser humano a menos que você diga a ele o que fazer. Se você não determinar &#8220;ei, isto é um título&#8221; ele não tem como fazer este tipo de decisão por você.</p>
<p>Os PDFs estão presos a um tamanho fixo, lembra? O que significa que as palavras precisam ser hifenizadas. Se você converter automaticamente (além do seu código ser a coisa menos semântica desde os sites feitos em tabelas) os hífens vão continuar lá, criando divisões no me-io das pala-vras on-de não pre-cisava! Pense nos números das páginas… se o texto flui isso significa que um mesmo livro pode (e vai) ter uma numeração diferente de acordo com o aparelho utilizado. Mas no caso da conversão automática os números no pdf vão continuar lá. Os títulos provavelmente vão estar errados também. Fora que muitos deixam marcas como &#8220;convertido pelo programa XYZ&#8221; em todas as páginas do livro.</p>
<h2>Links úteis</h2>
<ul>
<li><a title="IDPF" href="http://idpf.org/epub">IDPF </a>- A organização responsável pela criação do ePub. O site deles é meio confuso, mas contém bastante informação a respeito do formato.</li>
<li><a title="ePub Check" href="http://code.google.com/p/epubcheck/">ePub Chech</a> &#8211; Validação de ePub</li>
<li><a title="Epub Format Construction Guide" href="http://www.hxa.name/articles/content/epub-guide_hxa7241_2007.html">Epub Format Construction Guide</a> &#8211; Um meta-livro bem completo sobre o assunto.</li>
</ul>
<h2>Bibliotecas gratuitas</h2>
<ul>
<li><a title="Google Books" href="http://books.google.com.br/">Google Books</a></li>
<li><a title="ePub Bud" href="http://www.epubbud.com/">ePub Bud</a></li>
</ul>
<h2>Aplicativos para a Leitura</h2>
<h4>Mac &amp; PC</h4>
<ul>
<li><a title="Adobe Digital Editions " href="http://www.adobe.com/products/digitaleditions/">Adobe Digital Editions</a></li>
<li><a title="Nook" href="http://www.barnesandnoble.com/u/free-nook-apps/379002321/">Nook</a></li>
</ul>
<h4>Linux</h4>
<ul>
<li><a title="FB Reader" href="http://www.fbreader.org/">FB Reader</a></li>
</ul>
<h4>iOS</h4>
<ul>
<li><a title="iBooks" href="http://www.apple.com/br/ipad/built-in-apps/ibooks.html">iBooks</a></li>
<li><a title="Stanza" href="http://itunes.apple.com/br/app/stanza/id284956128?mt=8">Stanza</a></li>
</ul>
<h4>Android</h4>
<ul>
<li><a title="Aldiko" href="http://www.aldiko.com/">Aldiko</a></li>
</ul>
<h4>Leitura no Browser</h4>
<ul>
<li><a title="Magic Scroll " href="https://chrome.google.com/webstore/detail/ghgnmgfdoiplfmhgghbmlphanpfmjble">Magic Scroll </a>- Google Chrome</li>
<li><a title="ePub Read" href="http://www.epubread.com/">ePub Read</a> &#8211; Firefox</li>
</ul>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><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/vote-no-especialista-em-usabilidade-para-presidente/" title="Vote no Especialista em Usabilidade para Presidente">Vote no Especialista em Usabilidade para Presidente</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/agora-e-a-vez-dos-desenvolvedores/" title="Agora é a vez dos desenvolvedores">Agora é a vez dos desenvolvedores</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/epub-aprenda-a-criar-um-livro-digital/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>A melhor parte da viagem é o caminho</title>
		<link>http://tableless.com.br/a-melhor-parte-da-viagem-e-o-caminho/</link>
		<comments>http://tableless.com.br/a-melhor-parte-da-viagem-e-o-caminho/#comments</comments>
		<pubDate>Mon, 30 Jan 2012 11:03:52 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[mercado]]></category>
		<category><![CDATA[profissional web]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5331</guid>
		<description><![CDATA[Um pouco de auto ajuda não faz mal a ninguém.]]></description>
			<content:encoded><![CDATA[<p>Eu me preocupo muito com o mercado de web no Brasil. Não estou falando de empresas especificamente, mas dos profissionais. Muitos me perguntam sobre qual faculdade cursar ou sobre qual assunto os devs deveriam aprender agora&#8230; Eu não tenho faculdade e faz tempo que não aprendo algo realmente novo. E meu amigo, estou tão perdido quanto você nesse oceano. Talvez um pouco mais adiantado ou atrasado, mas igualmente perdido.<br />
O problema é que ninguém sabe qual caminho seguir. Talvez esse seja o segredo.</p>
<h5>Empresário? Empreendedor? WTF?</h5>
<p>Nos últimos três meses a minha vida profissional mudou da água para o vinho.<br />
Eu era sócio de uma pequena empresa de web, com uma visão de desenvolvimento web diferente das demais &#8220;agencias&#8221;. Tirando o primeiro registro da minha carteira que marca uma passagem de 6 meses em uma agência de design, como assistente de Web Designer, eu nunca trabalhei como empregado. Fiquei durante 5 anos da minha vida ajudando dois amigos a erguer uma outra empresa de internet, com ideais também inovadores e uma vontade enorme de mudar a forma com que o desenvolvimento web era feito. Um desses amigos acabou se tornando meu sócio em uma segunda empresa e a partir daí foram 6 anos, erguendo uma empresa e construindo uma comunidade em volta.<br />
Até 2 semanas atrás eu não sabia o que era receber salário, mas sabia o que era pagar vários salários. Eu não tinha que marcar ponto, eu tinha que controlar o ponto. Erguer uma empresa dá trabalho, mas é bom. Você não precisa ter faculdade para isso. Você precisa apenas ter coragem. </p>
<p>Aí você descobre que ter coragem é a parte fácil. O difícil é você pagar imposto, salário, gerenciar expectativas de clientes, se preocupar com a vida dos seus funcionários, entender como a carreira deles pode melhorar, saber movimentar a empresa para o lugar correto no mercado e além de tudo isso não tirar os olhos do fluxo de caixa. É aí que você aprende a <a href="http://projetodsd.com.br/empreendedorismo/qual-a-diferenca-entre-empresario-e-empreendedor/?utm_source=linkTableless&#038;utm_medium=link&#038;utm_campaign=postLink">diferença entre ser empreendedor e ser empresário</a>. Eu achava isso o máximo. O seu ego vai lá pra cima. É gostoso responder quando alguém te pergunta o que você faz ou no que você trabalha. A resposta vem pronta e ensaiada: &#8220;Sou empresário. Tenho uma empresa de desenvolvimento de Internet. Atendo clientes como XKPPYZ, XPTO e etc&#8230;&#8221; Coisa linda, sabe?</p>
<h5>Algo de estranho acontece</h5>
<p>Mas teve um dia que algo mudou. O problema é que quando você tem uma empresa e tem contas a pagar, é difícil perceber quando &#8220;algo&#8221; muda. Esse &#8220;algo&#8221; pode ser o movimento do mercado ou pior, pode ser você mesmo &#8211; como aconteceu comigo. Ninguém vai avisar quando essa mundaça acontecer&#8230; O segredo é quanto tempo você demora para descobrir.</p>
<p>Esse &#8220;tic&#8221; me aconteceu em um momento nada oportuno. Mesmo assim fui em frente. Sempre, sempre, sempre com uma dúvida atrás da orelha para atrapalhar. Mas nesse caso, meu caro, minha dica é siga em frente. Minha decisão já estava tomada. Saí da empresa. Foi algo realmente duro. É difícil você tomar a decisão de deixar para trás algo que você construiu, do nada. Do nada mesmo. Nós NUNCA recebemos nenhum aporte financeiro de NENHUMA empresa. Pelo contrário, tivemos que nos virar, pedir alguns mangalotes na fábrica de dinheiro em momentos difíceis e caminhar com mais uma parcela no bolso. Ah, quem dera ter recebido um aporte financeiro. Mas não. Eu tinha uma empresa que faturava pouco mais de 1 milhão/ano sem a ajuda de ninguém. Isso sim é algo para se orgulhar. Não é coisa de moleque. Mas é óbvio que um aporte financeiro não mata ninguém, né? <img src='http://tableless.com.br/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<h5>Falou demais, cara. Onde quer chegar?</h5>
<p>Eu sei que falei demais e provavelmente você ainda não sacou onde eu quero chegar. Aí está o &#8220;x&#8221; da questão. Onde você quer chegar? Eu não tenho faculdade e nunca fui empregado. Decidi sair da minha empresa para aprender algo novo, realmente. Obviamente havia outros motivos mais específicos e menos &#8220;romanceados&#8221; como este. Decidi pagar para ver e aprender algo que eu nunca tive. Sabe quando você se alista pra virar soldado e descobre que outro cara também se alistou só que ele fez aquele cursinho e virou sargento direto? Pois é. Eu tinha feito o cursinho de empresário/empreendedor, nunca fui soldado. Como o cara pode se sargento se nunca foi soldado? Por causa disso eu cometi muitos erros. Eu também deixei que outros cometessem erros. O que é muito ruim também já que o erro dos outros, na sua empresa, afeta você diretamente.</p>
<p>Aí você fala: &#8220;Espera, você deixou de ser empresário, onde você poderia ficar rico e ganhar dinheiro, pra ser empregado?&#8221; Eu respondo: Você está com o mesmo pensamento que eu estava nas primeiras semanas do meu &#8220;primeiro&#8221; emprego depois de sair da minha principal empresa (sim, eu tenho mais duas). Eu quase pirei nas primeiras semanas. Essa é uma outra história. &#8212; Em duas semanas aprendi mais coisas do que em muitos anos da minha vida. Posso falar mais aqui depois, se estiverem interessados. &#8212; Mas se você acha que só pode ser rico sendo empresário, nem abra uma empresa. Dinheiro é consequencia, sendo empresário, empreendedor ou empregado. E sim, eu sei que lá no fundo é o dinheiro que importa. Mas ele não vem só porque você decidiu abrir uma empresa. Ele vem porque você é bom no que faz. Você tem que pensar sobre dinheiro de forma estratégica e não como objetivo final. Isso em qualquer área e em qualquer cenário que você se encontra. Decidir abrir ou não uma empresa é também uma decisão estratégica, mas da sua vida. E no final, tudo se resume ao seu comportamento diante de decisões simples na frente da batalha.</p>
<p>A ideia é que você deve seguir seu instinto. Se você for empresário, não seja demasiadamente estúpido e dizer que NUNCA mais trabalhará como empregado na vida. E se você é empregado, meu caro, não diga que abrir empresa é algo difícil. Você pode estar com medo. </p>
<p>Talvez eu nem saiba o que eu esteja dizendo agora. Mas eu já estive dos dois lados da fronteira. Hoje eu sou empregado em uma das maiores empresas de hospedagem do Brasil, tenho uma startup e cuido de um portal. Sou empresário ou empregado? Quem tem que definir é você.<br />
Ter uma empresa ou ser empregado é uma decisão sua e para ambas decisões é necessário ter coragem. Existem vantagens e desvantagens dos dois lados. Como eu disse anteriormente, ganhar dinheiro é possível em qualquer um dos dois cenários, então esse não é o problema. Os passos em cada um dos caminhos são diferentes em diversos pontos, mas se você reparar bem, são mais parecidos do que aparentam.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><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/epub-aprenda-a-criar-um-livro-digital/" title="ePub: Aprenda a criar um livro digital">ePub: Aprenda a criar um livro digital</a></li><li><a href="http://tableless.com.br/introducao-a-padroes-de-codificacao/" title="Introdução aos padrões de codificação">Introdução aos padrões de codificação</a></li><li><a href="http://tableless.com.br/css1k/" title="CSS1K">CSS1K</a></li><li><a href="http://tableless.com.br/um-pensamento-sobre-design-para-web/" title="Um pensamento sobre design para web">Um pensamento sobre design para web</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/a-melhor-parte-da-viagem-e-o-caminho/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>Um pensamento sobre design para web</title>
		<link>http://tableless.com.br/um-pensamento-sobre-design-para-web/</link>
		<comments>http://tableless.com.br/um-pensamento-sobre-design-para-web/#comments</comments>
		<pubDate>Thu, 19 Jan 2012 10:20:37 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Internet Móvel]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[dispositivos moveis]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5229</guid>
		<description><![CDATA[Um pensamento sobre design impresso, desenvolvimento e design para web.]]></description>
			<content:encoded><![CDATA[<p>É engraçado quando designers de peças offline tentam migrar para web e ficam assustados com as diferenças no processo de criação e produção. O controle que o design para impresso tem sobre a posição dos elementos e a forma final da arte nunca (nunca?) será a mesma na web. No impresso você define precisamente as medidas, posicionando dos elementos, o tamanho das letras, entrelinhas e cores (mesmo brigando bastante nas gráficas por aí). Já na web você briga porque um determinado elemento está deslocado para a direita em um browser ou outro, porque determinada fonte é maior em uma tela e até pouco tempo só tinha um punhado de fonts para criar. Mesmo quando definimos tudo em pixels, há variações inesperadas entre browsers e dispositivos. Também lembro quando havia muita diferença de cores de monitor para monitor. Graças a Deus temos monitores LCD/LED.<br />
E agora ainda temos que prestar atenção aos dispositivos que <a href="http://www.alistapart.com/articles/a-pixel-identity-crisis/?utm_source=TablelessComBr&#038;utm_medium=postLink&#038;utm_campaign=citacaoTexto">comprimem mais pixels por ponto do que antigamente</a>.</p>
<p>A boa experiência no design de impresso depende muito da arte inspiradora do designer, qual o papel usado, que tipo de impressão, da gráfica&#8230; em web dependemos muito do tamanho da tela, do dispositivo utilizado, do browser, da configuração do texto, velocidade da internet e do computador. São muitas variações para tentarmos manter o controle de cada detalhe.</p>
<p>Quando um designer faz peças para uma campanha ou algum projeto offline, dependendo do caso é necessário criar peças para diversos formatos de veiculação em outdoors, revistas, posters etc. Em relação a web, nós temos todos os formatos de telas que envolvem tablets, notebooks, monitores, TVs e celulares&#8230; Com um diferencial: cada uma dessas telas tem um tipo de comportamento diferente dependendo da manipulação do dispositivo e também do usuário. Em alguns dispositivos como tablets e mobiles em uma tela temos dois formatos: retrato e paisagem. Já no impresso não há manipulação pelo usuário. A estimulo é totalmente visual e muitas vezes tátil. Mesmo assim, a experiência que a web entrega é totalmente outra.</p>
<p>No design impresso, <a href="http://www.luli.com.br/2009/02/02/design-e-uma-conversa-revista-webdesign/?utm_source=TablelessComBr&#038;utm_medium=link&#038;utm_campaign=citacaoTexto">quanto mais proporcional, harmoniosa e equilibrada</a> for a peça, melhor será recebida. No design para web também, mas os layouts precisam ser harmoniosos em cada um dos dispositivos, precisa ser proporcional em cada navegador, além da acessibilidade para alcançar usuário distantes.</p>
<p>Mas em ambas a <a href="http://www.alistapart.com/articles/personality-in-design/?utm_source=TablelessComBr&#038;utm_medium=postLink&#038;utm_campaign=citacaoTexto">personalidade é a plataforma para a emoção</a> do usuário. Seja online ou offline, o layout, a forma com que o usuário o consome deve leva-lo para uma experiência diferente do normal. E não estou falando de hotsites feitos em flashs ordinários puramente comerciais.</p>
<p>Eu queria ser designer para entender melhor os conceitos que envolvem esse assunto e talvez explicar tudo isso com mais propriedade.</p>
<p>Assim como não é possível escrever uma linha de código sem saber os porquês da importância do código semântico e acessível, não é possível desenhar um website sem ter a plena certeza de que qualquer usuário terá uma experiência envolvente e agradável.</p>
<p>O design para web está mudando de novo outra vez por causa da explosão de novos dispositivos. Se você ainda não parou para pensar, pense: faça as contas das telas: notebooks, monitores, tablets e smartphones. Sendo que cada uma destes tipos de telas tem diversas variações de tamanho e principalmente de resoluções. Já disse que a <a href="http://tableless.com.br/experiencia-cross-device/">experiência do usuário precisa ser cross-device</a>, caso contrário, algo se perde.</p>
<p>Eu <a href="http://www.bmwblog.com/2008/08/08/behind-the-design-of-the-bmw-7-series/">queria mesmo era fazer um carro</a>.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/experiencia-cross-device/" title="Experiência cross-device">Experiência cross-device</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/css1k/" title="CSS1K">CSS1K</a></li><li><a href="http://tableless.com.br/utilizando-apps-em-vez-de-browsers/" title="Utilizando APPs em vez de browsers">Utilizando APPs em vez de browsers</a></li><li><a href="http://tableless.com.br/epub-aprenda-a-criar-um-livro-digital/" title="ePub: Aprenda a criar um livro digital">ePub: Aprenda a criar um livro digital</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/um-pensamento-sobre-design-para-web/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Declarando idiomas no HTML</title>
		<link>http://tableless.com.br/declarando-idiomas-no-html/</link>
		<comments>http://tableless.com.br/declarando-idiomas-no-html/#comments</comments>
		<pubDate>Mon, 09 Jan 2012 10:00:42 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Artigos]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[tableless]]></category>
		<category><![CDATA[usabilidade]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5052</guid>
		<description><![CDATA[O conteúdo online pode ser acessado no mundo inteiro, não importa seu idioma. Para tanto o idioma deve ser declarado corretamente para que os meios de acesso entreguem o conteúdo da melhor forma possível.]]></description>
			<content:encoded><![CDATA[<p>Publicar conteúdo na web definitivamente não é a mesma coisa da publicação de conteúdo nos meios impressos. Quando imprimimos o conteúdo, temos como foco um determinado público de uma determinada região. Eu, estando no Brasil, não vou fazer uma revista em no idioma Japonês. Quando falamos publicação de conteúdo online a coisa muda de cenário. O conteúdo online pode ser acessado no mundo inteiro, não importa seu idioma. Obviamente se você conhece outros idiomas, você amplia suas possibilidades para encontrar conteúdo e novos sites. </p>
<p>Os desenvolvedores do mundo inteiro juntamente com os fabricantes de browsers e outros interessados, querem ter certeza que os navegadores, robôs de busca, leitores de tela e outros sistemas detectem da forma ideal o idioma correto.</p>
<p>A declaração do idioma no código HTML não determina a informação no <a href="http://tableless.com.br/charsets-e-encodes-tabelas-de-caracteres/" title="Charsets e Encodes – Tabelas de caracteres">encoding de caractére do texto</a> nem a direção de leitura do texto em outros idiomas. Essas definições precisam ser declaradas separadamente.</p>
<p>Nós precisamos definir o idioma por alguns motivos:</p>
<ul>
<li>Melhor pronunciação do texto em leitores de tela. </li>
<li>Para que os buscadores possam indexar o website no buscador do respectivo idioma. Por exemplo: não tem sentido o Google ranqueear muito bem um site em português no Google americano.</li>
<li>Selecionar as fonts corretas para mostrar na tela. Nesse caso para idiomas como Chinês.</li>
<li>Para que os browsers escolham o dicionário correto para a correção gramatical nativa em textos e formulários.</li>
<li>Renderizar a página rapidamente &#8211; o browser carrega o documento mais rápido quando o browser sabe qual o idioma nativo.</li>
</ul>
<h3>Definindo o idioma padrão do documento</h3>
<p>Existem algumas maneiras que você pode definir o idioma padrão no documento exibido ou em partes do texto para aqueles termos em idiomas diferentes.</p>
<p>Podemos definir diretamente via metatag nativa:</p>
<div class="codecolorer-container html4strict 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="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">meta</span></a> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Language&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;pt-br&quot;</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Pela Metatag podemos definir vários valores no atributo content:</p>
<div class="codecolorer-container html4strict 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="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">meta</span></a> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Language&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;pt-br, en, fr, it&quot;</span>&gt;</span></div></td></tr></tbody></table></div>
<p>Via <strong>HTTP Header</strong>:</p>
<div class="codecolorer-container text 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 /></div></td><td><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">HTTP/1.1 200 OK<br />
Date: Fri, 30 Dez 2011 10:46:04 GMT<br />
Server: Apache/1.3.28 (Unix) PHP/4.2.3<br />
Content-Location: CSS2-REC.en.html<br />
Vary: negotiate,accept-language,accept-charset<br />
TCN: choice<br />
P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml<br />
Cache-Control: max-age=21600<br />
Expires: Wed, 05 Nov 2003 16:46:04 GMT<br />
Last-Modified: Tue, 12 May 1998 22:18:49 GMT<br />
ETag: &quot;3558cac9;36f99e2b&quot;<br />
Accept-Ranges: bytes<br />
Content-Length: 10734<br />
Connection: close<br />
Content-Type: text/html; charset=utf-8<br />
Content-Language: pt-br</div></td></tr></tbody></table></div>
<p>Via atributo <strong>lang</strong> nos elementos do HTML.</p>
<div class="codecolorer-container html4strict 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="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>&gt;</span>Nós utilizamos o <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;en&quot;</span>&gt;</span>mouse<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a>&gt;</span> para navegar na <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;en&quot;</span>&gt;</span>web<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a>&gt;</span> por meios dos <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;en&quot;</span>&gt;</span>browsers<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a>&gt;</span>.</div></td></tr></tbody></table></div>
<p>Assim indicamos, principalmente para os leitores de tela, quais termos ele deve ler com o idioma nativo do termo.</p>
<p>Temos o costume de indicar o atributo <strong>lang</strong> no elemento <strong>html</strong> logo no início do documento para indicar que todo o conteúdo contido dentro do <strong>html</strong> está escrito em um determinado idioma.</p>
<div class="codecolorer-container html4strict 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="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span><br />
<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;pt-br&quot;</span>&gt;</span><br />
<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">head</span></a>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">title</span></a>&gt;</span>Título<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">title</span></a>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">head</span></a>&gt;</span><br />
<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a>&gt;</span></div></td></tr></tbody></table></div>
<h3>Ordem de herança</h3>
<p>Os meios de acesso, normalmente browsers, seguem esses passos de verificação para identificar o idioma:</p>
<ol>
<li>Verifica se elemento HTML que tem o atributo <strong>lang</strong>, se não,</li>
<li>Verifica se pai mais próximo ao termo que tenha o atributo <strong>lang</strong>, se não,</li>
<li>Verifica se o documento tem a metatag definida &lt;meta http-equiv=&#8221;content-language&#8221; content=&#8221;pt-br&#8221;&gt;, se não,</li>
<li>Verifica se o HTTP Header Content-Language tem uma tag de idioma definido. Se não,</li>
<li>O idioma é tratado como não reconhecido.</li>
</ol>
<p>O W3C recomenda que você sempre utilize o <strong>lang</strong> no elemento <strong>html</strong> para definir o idioma padrão de todo o conteúdo e também em todo o termo encontrado no texto com idioma diferente do definido como padrão.</p>
<p>Declarações de idioma baseados nestes atributos são importantes para a maioria das aplicações web hoje, que vão desde as <a href="http://br.mozdev.org/firefox/ortografia">corretores ortográficos</a> embutidos diretamente nos browsers até leitores de telas que interpretam as páginas web, etc etc.</p>
<p>Estas possibilidades são interessantes para que possamos globalizar ainda mais nossos projetos. Imagine por exemplo um website que ensina Russo para Chineses. É interessante que possamos marcar os termos dos dois idiomas de forma que os mecanismos trabalhem adequadamente em diversos meios de acesso. Os browsers precisam identificar quando o texto está em Russo ou quando está em Chinês. Os buscadores também precisam entender essa diferença, bem como os leitores de tela.</p>
<p>Aos poucos vamos padronizando características que antes eram ignoradas no desenvolvimento web. Não são ações muito difíceis de aplicar. Para começar, basta colocar o atributo <strong>lang</strong> no elemento <strong>html</strong> dos seus documentos e pronto.</p>
<h5>Referências</h5>
<p>Artigo que <a href="http://tableless.com.br/charsets-e-encodes-tabelas-de-caracteres/" title="Charsets e Encodes – Tabelas de caracteres">explica os Charsets, encodes e tabelas de caractéres no HTML</a>.</p>
<p>Veja aqui a <a href="http://www.w3.org/TR/i18n-html-tech-lang/">documentação oficial do W3C</a> que fala sobre este assunto.</p>
<p>O W3Schools tem aqui uma <a href="http://www.w3schools.com/tags/ref_language_codes.asp">listagem dos códigos de idioma</a> que podem usados. </p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/guia-de-referencia-de-html5/" title="Guia de Referência de HTML5">Guia de Referência de HTML5</a></li><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/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/section-elemento-article/" title="Section: elemento article – Parte 4">Section: elemento article – Parte 4</a></li><li><a href="http://tableless.com.br/sections-html5/" title="Sections: seções do HTML5 – Parte 1">Sections: seções do HTML5 – Parte 1</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/declarando-idiomas-no-html/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Experiência cross-device</title>
		<link>http://tableless.com.br/experiencia-cross-device/</link>
		<comments>http://tableless.com.br/experiencia-cross-device/#comments</comments>
		<pubDate>Thu, 22 Dec 2011 05:20:40 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Internet Móvel]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[dispositivos moveis]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=4950</guid>
		<description><![CDATA[Estamos prestes de presenciar uma invasão eletrônica de dispositivos de todos os tamanhos e utilidades em conjunto com aplicações onipresentes.]]></description>
			<content:encoded><![CDATA[<p>Eu vivo comentando aqui no Tableless sobre o desenvolvimento de sistemas e websites para os diversos meios de acesso. Eu falei sobre <a href="http://tableless.com.br/diversidade-dos-meios-acesso/">esse assunto</a> em <a href="http://tableless.com.br/experiencia-deve-ter-comeco-meio-e-fim/">diversos</a> <a href="http://tableless.com.br/introducao-ao-responsive-web-design/">artigos</a>. Eu li um artigo chamado <a href="http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices-will-disrupt-our-old-school-ux-assumptions.htm">The Coming Zombie Apocalypse</a>, escrito por Scott Jenson em abril deste ano. Este artigo me fez perceber que eu estava levando o assunto muito superficialmente, mas que tem muito a ver com o artigo publicado aqui chamado <a href="http://tableless.com.br/experiencia-deve-ter-comeco-meio-e-fim/">A Experiência deve ter começo, meio e fim</a>.</p>
<p>O artigo do <a href="http://twitter.com/scottjenson">Scott Jenson</a> começa dizendo que a popularização dos smartphones são apenas o começo. Juntando o barateamento das  peças para a produção destes aparelhos com a criação sistemas de baixo custo e acessíveis como o Android, não só estão surgindo dispositivos baratos capazes de fazer tarefas que antes eram possíveis apenas em computadores, mas dispositivos baratos baseados na web, trazendo uma experiência cross-device nunca antes experimentada. Um exemplo disso é quando utilizamos estes dispositivos integrados com aplicações como o sistema de som <a href="http://www.sonos.com/">Sonos</a>. O Scott Jenson chamada de Zombie Apocalypse dos eletrônicos.</p>
<p><a href="http://tableless.com.br/wp-content/uploads/2011/12/twitter-original-homepage.png"><img src="http://tableless.com.br/wp-content/uploads/2011/12/twitter-original-homepage-300x209.png" alt="" title="twitter-original-homepage" width="300" height="209" class="alignleft size-medium wp-image-4951" /></a><br />
O paradigma dos computadores desktops estão nos impedindo de enxergar novos caminhos não tão longes assim. Isso é totalmente evidente quando falamos sobre smartphones, no qual nós sabemos que não são computadores desktops e tão somente por isso nós temos outras experiências e outras abordargens quando estamos usando aparelhos deste tipo. Perceba que diversos serviços e aplicações estão sendo portados para os dispositivos móveis porque fazem mais sentido nesse meio. O Twitter mesmo foi criado inicialmente para publicações vindas apenas pelos smartphones. Foi um processo reverso.</p>
<p>Me lembro que aqui no Brasil o recebimento de SMS internacional era um problema em algumas operadoras. Muitos queriam utilizar o Twitter, mas não podiam atualizar suas timelines ou receber as atualizações dos seus colegas porque o Twitter, naquela época, era baseado em SMS. Foi aí que a plataforma se popularizou mais lá fora e então a possibilidade de atualizar sua timeline por outros meios surgiu.</p>
<p>Há uma frase interessantíssima no artigo de Scott Jenson onde ele diz assim:</p>
<blockquote cite="http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices-will-disrupt-our-old-school-ux-assumptions.htm" lang="en"><p>This problem is simple, but pernicious: designers think of new technologies in terms of yesterday&#8217;s tasks, failing to clearly see the real potential of the new technologies.</p></blockquote>
<p>Minha tradução livre: &#8220;O problema é simples mas pernicioso: os designers pensam nas novas tecnologias baseando-se nas tarefas de ontem, falhando em ver claramente o real potencial das novas tecnologias.&#8221;</p>
<p>Muito óbvio. É por isso que o Windows Mobile falhou! A Microsoft durante muito tempo liderou o mercado de sistemas para mobiles com um sistema ruim, bugado e muito, mas muito inútil, simplesmente porque eles eram praticamente os únicos. O problema com o sistema deles foi a tentiva de  portar os conceitos, experiências, comportamentos e tarefas do sistema dos desktops para os mobiles. Claramente um grande erro. Com o Windows Phone eles mudaram (tarde) o cenário. Eles criaram o Windows Phone levando em consideração os atos e comportamentos do usuário em aparelhos deste tipo. Não há nenhuma analogia aos desktops. E mais uma vez, algo que foi criado primeiramente para aparelhos móveis será portado para os desktops, que é o caso da interface Metro levada para o <a href="http://www.youtube.com/watch?v=7Dv670PwVLM">Windows 8</a>.</p>
<p>Os PCs de hoje serão apenas hubs num futuro próximo. No cenário de hoje você escolhe entre Mac ou PC e baixa aplicativos que muito provavelmente funcionarão apenas para um destes sistemas. O modelo ideal, que já é mais real do que imaginamos, é que cada pessoa possa usar múltiplos dispositivos acessando um mesmo dado, uma mesma informação, normalmente pela núvem.</p>
<p>O exemplo do serviço de música via streaming Pandora é perfeito. Ele permite que nós possamos utilizar seus serviços em uma variedade gigante de dispositivos. Sempre sincronizando suas músicas via internet. Tudo sempre integrado. Aqui no Brasil, como o Pandora não funciona, talvez não seja a sua realidade&#8230; Entretanto estamos vivendo em um mundo onde o software, a aplicação, o serviço, define qual aparelho você vai comprar.</p>
<p>O Sonos é um aparelho de som Wi-Fi. Além do Pandora você pode sincronizar sua biblioteca de músicas de diversos outros serviços como iTunes ou o Spotify. Quando o conheci eu o quis sem pensar. Nada de iPod ou iPhone plugado no aparelho de som. Nada de fio p2-p2 para ligar meu celular ao aparelho de som&#8230; Eu quero ouvir minhas músicas livremente pelo serviço que eu mais gosto no sistema de som da minha casa. Mas quando eu for pra rua e quero continuar ouvindo a mesma biblioteca de música, só que agora no meu fone de ouvido. Essa integração entre dispositivos e softwares é incrível. Perceba que não estamos falando sobre um ecosistema fechado como o da Apple. Estamos falando de hardware e software de fabricantes diferentes, que prestam diferentes serviços, mas que se integram.</p>
<p>Entende o que é a experiência do usuário nesse cenário?</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/um-pensamento-sobre-design-para-web/" title="Um pensamento sobre design para web">Um pensamento sobre design para web</a></li><li><a href="http://tableless.com.br/vote-no-especialista-em-usabilidade-para-presidente/" title="Vote no Especialista em Usabilidade para Presidente">Vote no Especialista em Usabilidade para Presidente</a></li><li><a href="http://tableless.com.br/sites-para-dispositivos-moveis-mediatype/" title="Sites para Dispositivos Móveis &#8211; MediaType">Sites para Dispositivos Móveis &#8211; MediaType</a></li><li><a href="http://tableless.com.br/sobre-internet-explorer-para-mobile-breve-impressao/" title="Sobre Internet Explorer para Mobile &#8211; Breve impressão">Sobre Internet Explorer para Mobile &#8211; Breve impressão</a></li><li><a href="http://tableless.com.br/epub-aprenda-a-criar-um-livro-digital/" title="ePub: Aprenda a criar um livro digital">ePub: Aprenda a criar um livro digital</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/experiencia-cross-device/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>O IE6 vai morrer no Brasil</title>
		<link>http://tableless.com.br/o-ie6-vai-morrer-no-brasil/</link>
		<comments>http://tableless.com.br/o-ie6-vai-morrer-no-brasil/#comments</comments>
		<pubDate>Fri, 16 Dec 2011 13:30:07 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Notícias]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[noticas]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=4823</guid>
		<description><![CDATA[Estamos ficando mais perto do dia em que nossos problemas com o IE vão acabar... ou pelo menos ficar perto disso.]]></description>
			<content:encoded><![CDATA[<p>Ontem a Microsoft anunciou que em Janeiro vai ativar a atualização automática para os Internet Explorers dos sistemas Windows XP, Vista e Windows 7! E sabe por onde eles começarão a fazer esse milagre? No Brasil e na Austrália. Este é um passo importante para que a web, do mundo, avance mais rápido. </p>
<p>O mais interessante é a Microsoft está diferente. Ela realmente está colocando o usuário em primeiro lugar. Por exemplo: toda vez que o sistema atualizar a versão do IE, essa atualização não mudará a sua configuração de browser padrão, nem as configurações de buscador, bookmarks, nada. Isso faz parte da nova filosofia que a Microsoft tem adotado nos últimos tempos e que está dando muito certo.</p>
<p>Se consumidores e empresas não quiserem atualizar seus browsers, eles tem a opção de não fazer o update e continuar recebendo suporte para a versão do IE que eles ainda terão. Há também a possibilidade de desinstalar os updates caso seja necessário. Em versões mais avançadas do IE, a Microsoft colocará uma opção de desativar as atualizações automáticas.</p>
<p>Essa decisão é ótima para os consumidores, desenvolvedores e pricipalmente para as empresas. A Web ficará melhor e mais segura. Com esta decisão, nós, desenvolvedores, teremos um campo farto para novas oportunidades de entregar experiências melhores para nossos usuários. Com o IE9 já temos algumas features do HTML5 que funcinam. Nós iremos gastar menos tempo codificando para um browser específico, corrigindo erros e bugs. Isso quer dizer que sua <a href="http://tableless.com.br/convencimento-e-educacao-liberdade/" title="Convencimento e educação = liberdade">obrigação de convencer e educar seu chefe e cliente fica bem mais fácil</a>.</p>
<p>Você entende o que está acontecendo? Não é um grupo de desenvolvedores que resolveu tentar matar o IE e deixa a web livre&#8230; é a própria Microsoft. Você sabe o quanto isso é importante? Sério, pense nisso.<br />
Eu sei que não faz mais que a obrigação dela já que foi ela que começou essa confusão toda, mas vamos lá&#8230; há quanto tempo estivemos esperando por uma decisão dessa?</p>
<p>Microsoft, obrigado!</p>
<p><a href="http://windowsteamblog.com/ie/b/ie/archive/2011/12/15/ie-to-start-automatic-upgrades-across-windows-xp-windows-vista-and-windows-7.aspx">Veja o post na íntegra no blog do IE</a>.</p>
<p>E use este <a href="http://tableless.com.br/wp-content/uploads/2011/12/goawayie6.jpg">link para pegar a imagem do post em tamanho maior</a>.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/ferramentas-de-diagnostico/" title="Ferramentas de diagnóstico">Ferramentas de diagnóstico</a></li><li><a href="http://tableless.com.br/experiencia-cross-device/" title="Experiência cross-device">Experiência cross-device</a></li><li><a href="http://tableless.com.br/commander-conquer-tiberium-alliances/" title="Command &#038; Conquer: Tiberium Alliances">Command &#038; Conquer: Tiberium Alliances</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/em-tempo-de-transicao-quais-recursos-utilizar/" title="Em tempo de transição, quais recursos utilizar?">Em tempo de transição, quais recursos utilizar?</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/o-ie6-vai-morrer-no-brasil/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Convencimento e educação = liberdade</title>
		<link>http://tableless.com.br/convencimento-e-educacao-liberdade/</link>
		<comments>http://tableless.com.br/convencimento-e-educacao-liberdade/#comments</comments>
		<pubDate>Thu, 15 Dec 2011 14:00:57 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=4802</guid>
		<description><![CDATA[A obrigação do desenvolvedor client-side é educar e convencer. Porque ninguém gosta de perder tempo e dinheiro. ]]></description>
			<content:encoded><![CDATA[<p>Os websites precisam parecer iguais em todos os browsers? <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com/">Claro que não</a>. Aí você fala assim: &#8220;Diz isso para meu chefe ou meu cliente.&#8221; E eu digo sim. Mas aí eu estaria fazendo o seu trabalho.</p>
<p>Uma das obrigações atuais do desenvolvedor client-side é educar e convencer. E não venha me dizer que isso é quase impossível porque eu já sei disso. Mas ninguém disse que é totalmente impossível, correto? Você vai encontrar muitos obstáculos, tenha certeza disso, mas você vai conseguir mudar a web brasileira e a do mundo se fizer isso e fizer bem feito.</p>
<p>Não estou dizendo para você chegar de supetão, colocar a mão na testa do seu chefe/cliente e dizer: &#8220;Sai desse corpo IE porque ele não te pertence!!&#8221; Isso seria legal de assistir, mas você seria certamente demitido. Estou dizendo para você se armar. Se municie de números, estatísticas, quanto o pessoal da sua área está trabalhando mais para fazer o projeto funcionar em browsers antigos e quanto de dinheiro está provavelmente sendo perdido ao fazer isso.<br />
A conta é simples: calcule o seu valor hora e o valor hora dos seus colegas de projeto. Coloque impostos, coloque tempo extra etc&#8230; Depois multiplique esse valor pela quantidade de horas que vocês gastaram para arrumar layouts em browsers antigos, quanto tempo vocês gastaram para deixar tudo exatamente igual em todos os browsers. Inclue o tempo gasto para recortar imagens, procurar plugins milagreiros em javascript, o tempo que você passou solucionando os problemas de estruturação e etc, tudo isso deve contar no número final das horas. Faça um dossiê. Não precisa ser muito longo, mas precisa ser exato! Precisa conter todas as dificuldades que vocês tiveram que resolver para tentar deixar os browsers com os mesmos efeitos que os browsers novos. Depois disso tudo, em uma hora apropriada apresente para o seu chefe.</p>
<p>Para ajudar fizemos <a href="http://tableless.com.br/browsers-antigos-guerra-contra-o-terror/" title="PDF – Browsers antigos: guerra contra o terror">um PDF que explica</a> exatamente quais as soluções vocês precisam adotar e alguns outros assuntos que seu chefe precisa saber para entender melhor esse conceito todo. Você precisa entender esse é um caminho longo. Você não (ou vai) convencer seu chefe/cliente de primeira. Isso depende muito do seu perfil e do perfil deles. Mas com certeza, se você levar informações relevantes e maduras as chances serão grandes, já que ninguém gosta de perder dinheiro.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><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/epub-aprenda-a-criar-um-livro-digital/" title="ePub: Aprenda a criar um livro digital">ePub: Aprenda a criar um livro digital</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/mobile-first-a-arte-de-pensar-com-foco/" title="Mobile First &#8211; A arte de pensar com foco">Mobile First &#8211; A arte de pensar com foco</a></li><li><a href="http://tableless.com.br/css3-modulo-template-layout/" title="CSS3 &#8211; Módulo Template Layout">CSS3 &#8211; Módulo Template Layout</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/convencimento-e-educacao-liberdade/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Mobile First &#8211; A arte de pensar com foco</title>
		<link>http://tableless.com.br/mobile-first-a-arte-de-pensar-com-foco/</link>
		<comments>http://tableless.com.br/mobile-first-a-arte-de-pensar-com-foco/#comments</comments>
		<pubDate>Tue, 13 Dec 2011 15:30:26 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Internet Móvel]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[Usabilidade]]></category>
		<category><![CDATA[2011]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[aprenda]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[internetmovel]]></category>
		<category><![CDATA[mobilidade]]></category>
		<category><![CDATA[usabilidade]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=4669</guid>
		<description><![CDATA[Os dispositivos móveis estão tomando conta do mundo. Sendo assim, o que você acha de pensarmos nos dispositivos móveis antes de pensarmos nos desktops?]]></description>
			<content:encoded><![CDATA[<p>Durante muito tempo especialistas de diversas áreas previram o crescimento do uso dos dispositivos móveis. Demorou um pouco mas a previsão se tornou verdadeira. Hoje todo mundo carrega um pedaço de plástico com uma tela de vidro na mão o dia inteiro&#8230; quase uma extensão de nossos corpos.</p>
<p>Os dispositivos móveis se tornaram uma febre e vieram para ficar. É a melhor forma de fazer a inclusão digital para aqueles que não tem uma forma de ter um notebook ou um desktop em casa. Não estou falando daqueles smartphones de R$1500, mas dos muitos smartphones, com teclados qwerty, prontos para internet e que custam R$200. Isso sim  é inclusão digital para as massas de verdade.</p>
<h3>Alguns números</h3>
<p>As <a href="http://tech.fortune.cnn.com/2011/02/07/idc-smartphone-shipment-numbers-passed-pc-in-q4-2010/">vendas de smartphones já passaram as de PCs</a>. A utilização de emails pelos dispositivos móveis aumentou em 36%. Sem contar que <a href="http://news.bango.com/2010/02/16/600-percent-growth-in-mobile-web-usage/">o tráfego de visitação de websites utilizando smartphones cresceu 600% em 2010</a>!</p>
<p>O Paypal tempos atrás recebia algo em torno de $10 Milhões de dólares em pagamentos via mobiles. Por dia! <a href="http://prowireless.com.au/paypal-mobile-payments">Eles tem uma predição de movimentar algo em torno de 6 Bilhões só este ano</a>! E em 2016 serão $31 Bilhões!</p>
<p>As perspectivas globais são enormes. Abaixo, veja um inforgráfico que o blog <a href="http://www.plexical.com/blog/2011/09/29/mobile-first-mobile-only/">The Meta Cloud</a> preparou. Cuidado para não se assustar.</p>
<p><a href="http://www.plexical.com/blog/wp-content/uploads/2011/09/mobile-first-mobile-only.pdf"><img src="http://tableless.com.br/wp-content/uploads/2011/12/mobile-first-mobile-only.png" alt="" title="mobile-first-mobile-only" width="570" height="902" class="alignnone size-full wp-image-4704" /></a></p>
<h3>O conceito</h3>
<p>Você consegue entender estes números? Se sim, você vai entender que o conceito do Mobile First faz muito sentido, mas vai contra toda uma tradição de desenvolvimento de sites que você está acostumado. A ideia do Mobiles First é que comecemos a desenvolver e planejar projetos web, desde um pequeno site até um grande sistema, primeiramente para dispositivos móveis e somente depois para desktops/notebooks.</p>
<h4>Algumas vantagens</h4>
<p>Se o mundo inteiro está passando mais tempo acessando a internet com dispositivos móveis, não é muito sensato pensarmos primeiramente em fazermos sites para desktops/notebooks, não é? O fato é que ao colocar os mobiles primeiro lugar, desfrutamos de uma série de vantagens:</p>
<ul>
<li><strong>As capacidades técnicas são mais interessantes.</strong> Com o mobiles você pode brincar com o acelerometro, GPS, multitouch, giroscópio e etc. Isso amplia a experiência do usuário para um patamar que o desktop nunca terá. </li>
<li><strong>Foco.</strong> Quem já teve que adaptar um site para mobiles entende que informação demais prejudica. Se focar nas ações essenciais que o usuário executará ao acessar seu site com um dispositivo móvel é o básico.</li>
<li><strong>A atenção em áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada.</strong> Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto a programação server-side ou um HTML bem feito. </li>
<li><strong>Te prepara para outros cenários.</strong> Fazer sites mobile é só o primeiro passo. Mas e os grandes formatos como SmartTVs ou outros dispositivos? Não vai demorar muito para acessarmos a internet de qualquer dispositivo sem bloqueios ou restrições. </li>
</ul>
<h3>O design</h3>
<p>O design também precisa ser revisto. Na verdade, o design mais do que nunca conta com as respostas e os conceitos de AI, Acessibilidade e Usabilidade. Se antes fazíamos festa porque a resolução dos desktops aumentaram e agora temos mais espaço para trabalharmos, nos mobiles o cenário é completamente o contrário.</p>
<h4>Arquitetura de Informação</h4>
<p>As informações que você previa no desktop precisam ser remanejadas, diminuidas e retrabalhadas para que se adaptem nas telas menores. A maioria dos celulares tem algo em torno de 320&#215;480 pixels. Se não tomarmos cuidado, toda a informação pode se perder em uma tela tão pequena. No mundo mobile o simples é a palavra que manda.</p>
<p>Você pode perceber que alguns websites conseguiram resolver bem seus problemas de excesso de informação promovendo em seus websites mobiles apenas as ações realmente importantes e dando foco ao conteúdo que provavelmente o usuário irá consumir quando estiver utilizando um pequeno dispositivo. </p>
<p>Se você é usuário do Flickr, conhece aquele bando de opções que ele guarda em seu menu principal. São centenas de opções e ações que certamente não cabem em uma tela tão pequena.</p>
<p><img src="http://tableless.com.br/wp-content/uploads/2011/12/flickr1.png" alt="screenshot da tela do site do Flickr versão desktop"></p>
<p>Um estudo profundo certamente deve ser feito para que você saiba exatamente quais informações e ações serão mais úteis na versão mobile.</p>
<p><a href="http://m.flickr.com/"><img src="http://tableless.com.br/wp-content/uploads/2011/12/flickr2.png" alt="screenshot da tela do site do Flickr versão mobile"></a></p>
<h4>Mantendo informações importantes</h4>
<p>Existem também outras formas de acomodar um grande número de informações sem que isso atrapalhe o usuário. Uma delas é criando menus dropdown ou separando uma tela que guarda as informações que serão menos utilizadas mas que são igualmente importantes para a utilização do site/sistema. Veja abaixo dois bons exemplos vindo dos sites Gmail e ESPN.</p>
<p><a href="http://tableless.com.br/wp-content/uploads/2011/12/gmail.gif"><img src="http://tableless.com.br/wp-content/uploads/2011/12/gmail.gif" alt="gmail versão mobile" title="gmail" width="640" height="417" class="alignnone size-full wp-image-4678" /></a></p>
<p><a href="http://tableless.com.br/wp-content/uploads/2011/12/espn.gif"><img src="http://tableless.com.br/wp-content/uploads/2011/12/espn.gif" alt="epsn.com versão mobile" title="espn" width="638" height="355" class="alignnone size-full wp-image-4677" /></a></p>
<p>Onde os usuários utilizam seus mobiles e visitam seu site? Bem, de todo lugar. Algumas pessoas acham que usuários utilizam apenas quando estão em filas, ônibus, parados no trânsito etc. Mas algumas pesquisas mostram que 84% dos usuários usam seus dispositivos em casa. Isso mesmo&#8230; em casa. Veja bem: quando as pessoas estão em casa, elas preferem utilizar seus smartphones em vez do notebook/desktop!<br />
62% utilizam enquanto assistem a TV. Até a TV perde atenção quando briga com os mobiles.</p>
<p>Não existem mais desculpas. Os browsers para mobiles estão tão modernos quanto os dos desktops. O hardware está muito mais poderoso, mais do que poderíamos imaginar a dois anos atrás. Existe um número gigante de usuários utilizando estes dispositivos, isso os torna potenciais visitantes e claro, compradores. Porque desperdiçar esta oportunidade?</p>
<p>Você pode <a href="http://www.abookapart.com/products/mobile-first">ler mais sobre este assunto neste livro</a> esperto escrito por <a href="http://www.lukew.com/">LUKE WROBLEWSKI</a>. Aproveite!</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/sobre-internet-explorer-para-mobile-breve-impressao/" title="Sobre Internet Explorer para Mobile &#8211; Breve impressão">Sobre Internet Explorer para Mobile &#8211; Breve impressão</a></li><li><a href="http://tableless.com.br/mobilidade-na-cabeca/" title="Mobilidade na cabeça">Mobilidade na cabeça</a></li><li><a href="http://tableless.com.br/sites-para-dispositivos-moveis-breve-introducao/" title="Sites para Dispositivos Móveis &#8211; Breve introdução">Sites para Dispositivos Móveis &#8211; Breve introdução</a></li><li><a href="http://tableless.com.br/browsers_em_dispositivos_moveis/" title="Browsers dos Dispositivos Móveis">Browsers dos Dispositivos Móveis</a></li><li><a href="http://tableless.com.br/introducao-ao-responsive-web-design/" title="Introdução ao Responsive Web Design">Introdução ao Responsive Web Design</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/mobile-first-a-arte-de-pensar-com-foco/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Você sabe o que é a “nova usabilidade”? – parte II</title>
		<link>http://tableless.com.br/o-que-e-nova-usabilidade-parte2/</link>
		<comments>http://tableless.com.br/o-que-e-nova-usabilidade-parte2/#comments</comments>
		<pubDate>Mon, 12 Dec 2011 11:00:50 +0000</pubDate>
		<dc:creator>Talita Pagani</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Internet Móvel]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[design de interação]]></category>
		<category><![CDATA[dispositivos moveis]]></category>
		<category><![CDATA[dispositivos ubíquos]]></category>
		<category><![CDATA[nova usabilidade]]></category>
		<category><![CDATA[qualidade em uso]]></category>
		<category><![CDATA[usabilidade]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=4592</guid>
		<description><![CDATA[A nova usabilidade procura trazer abordagens para lidar com os novos desafios para o desenvolvimento de aplicações baseadas em tecnologias emergentes, como dispositivos móveis.]]></description>
			<content:encoded><![CDATA[<p>A nova usabilidade procura trazer abordagens para lidar com os novos desafios para o desenvolvimento de aplicações baseadas em tecnologias emergentes, como os dispositivos móveis.</p>
<p>A intenção dessa denominação é chamar a atenção para o fato de que a os métodos, técnicas e ferramentas de usabilidade que possuímos hoje precisam ser revistos para contemplar a evolução tecnológica e as especificidades dos interesses dos usuários.</p>
<h2>O problema com os testes de usabilidade</h2>
<p>Os testes de usabilidade como conhecemos hoje (realizados em laboratório) passam a não ter o mesmo grau de eficiência nestes novos cenários de uso.</p>
<p>Testes de usabilidade geralmente são realizados sob um ambiente controlado. Os avaliadores têm controle sobre todas as variáveis (o contexto) que se refere à interação entre usuário e aplicação. No cenário real, o uso pode ser bem distinto e endereçar problemas imprevistos.</p>
<p>Um exemplo: um teste de usabilidade de um tablet realizado em laboratório, onde o usuário interage com o tablet em cima de uma mesa, sentado corretamente em uma cadeira. Este é o cenário real de uso? O mais comum seria o usuário utilizar o tablet nas mãos, no colo, durante uma aula, uma palestra, checando os e-mails antes de dormir, entre outros.</p>
<p>Entretanto, os testes de usabilidade não perderam sua relevância, apenas precisam de uma abordagem reciclada. Além disso, cada vez mais os atributos a serem avaliados passam a ser mais qualitativos do que quantitativos. Como testar a concentração de um usuário com dispositivo móvel em um cenário real de uso? Como mensurar isso?</p>
<blockquote><p>“A maioria dos testes de usabilidade, e experiência em design de interação, tem sido desenvolvida no contexto de uma pessoa diante de um computador, onde você tem o luxo de atenção integral da pessoa, em um ambiente confortável com distrações em um nível administrável. Dispositivos informacionais, por outro lado, precisam trabalhar em situações de baixa atenção ou onde a atenção do usuário precisa ser canalizada através do dispositivo enquanto ele caminha, fala ou realiza qualquer outra atividade do dia-a-dia que seria rotineiramente classificada como &#8220;distração&#8221;.” [Thomas e Macredie, 2002]</p></blockquote>
<h2>Os pontos-chave da Nova Usabilidade</h2>
<p>A nova usabilidade estende os conceitos fundamentados na usabilidade tradicional. Fatores como Comunicação, Colaboração, Ética e Valor Agregado tornam-se mais relevantes e pertinentes às aplicações desenvolvidas atualmente e, com isso, passam a representar pontos críticos da interação que têm impacto na satisfação de uso.</p>
<div id="attachment_4593" class="wp-caption aligncenter" style="width: 548px"><a href="http://tableless.com.br/wp-content/uploads/2011/11/Slide2.jpg"><img class="size-full wp-image-4593  " src="http://tableless.com.br/wp-content/uploads/2011/11/Slide2.jpg" alt="Pontos chaves da Nova Usabilidade" width="538" height="403" /></a><p class="wp-caption-text">Pontos chaves da Nova Usabilidade</p></div>
<h3>Comunicação</h3>
<p>As aplicações são cada vez mais interativas entre pessoas do que entre usuário-máquina. A Interação Humano-Computador passa a ser cada vez mais vista como Interação Humano-Computador-Humano, onde o dispositivo é o meio que garante esse intercâmbio de informações e a qualidade da mensagem transmitida.</p>
<h3>Colaboração</h3>
<p>Realização de atividades mútuas entre usuários, com participação colaborativa em determinadas tarefas.</p>
<h3>Ética</h3>
<p>Com aplicações cada vez mais sociais, as aplicações devem estar atentas à questão de conduta, que pode também ser influenciada pelo projeto da interface.</p>
<h3>Eficiência de Interação</h3>
<p>Facilidade de execução das tarefas.</p>
<h3>Eficácia de Interação</h3>
<p>Capacidade da tarefa ser realizada de forma completa e correta</p>
<h3>Segurança</h3>
<p>Refere-se ao nível de confiança da aplicação. Com o uso de <em>wi-fi</em> e <em>cloud computing</em>, a segurança que o usuário tem ao utilizar a aplicação determina até que ponto ele confia e se dispõe a utilizar os recursos que a aplicação oferece.</p>
<h3>Confiabilidade</h3>
<p>Se refere ao sentimento que as pessoas possuem com relação a acreditar ou não na forma de interação proposta. Isto está diretamente relacionado com a comunicação e a colaboração.</p>
<h3>Privacidade</h3>
<p>É a liberdade de escolha do usuário de tornar públicas ou não determinadas informações suas. Este fator está relacionado à segurança.</p>
<h3>Valor Agregado</h3>
<p>O quanto as funcionalidades de sua aplicação trazem de contribuição para a vida de seus usuários, o quanto de impacto e de valor agregado ele traz para a rotina das pessoas que o utilizam.</p>
<h2>Concluindo&#8230;</h2>
<p>Este série de posts não foi de conteúdo técnico. Sim, é totalmente teórico. Mas são questões que temos que nos colocar a pensar quando falamos de atender novas demandas computacionais.</p>
<p>A usabilidade deve evoluir para se flexibilizar à avaliação e garantia de qualidade em interfaces disponíveis em diferentes dispositivos.</p>
<p>Embora o termo tenha sido cunhado há quase uma década, ainda estamos tentando atingir os objetivos que a Nova Usabilidade estabelece e isto hoje já está se tornando pertinente a qualquer tipo de aplicação, visto que esta diversidade de dispositivos tende a ser predominante.</p>
<p>Precisamos sair da zona de conforto do que conhecemos e pensar como as metodologias atuais podem ser recicladas para agregar esta demanda.</p>
<h2>Referências</h2>
<p>IHC 2006. Workshop de Usabilidade de Aplicações e Tecnologias Emergentes: a Necessidade de uma “Nova Usabilidade”?. Disponível em: <a href="http://www.dimap.ufrn.br/ihc2006/workshop.php">http://www.dimap.ufrn.br/ihc2006/workshop.php</a></p>
<p>Peter Thomas and Robert D. Macredie. 2002. Introduction to the new usability. ACM Trans. Comput.-Hum. Interact. 9, 2 (June 2002), 69-73. <a href="http://doi.acm.org/10.1145/513665.513666">http://doi.acm.org/10.1145/513665.513666</a></p>
<p>Peter Thomas and Harold Thimbleby. 2002. The new usability: the challenge of designing for pervasive computing. In Proceedings of the 15th international conference on Computer communication (ICCC &#8217;02), S. V. Raghavan and Sudhir P. Mudur (Eds.). International Council for Computer Communication, Washington, DC, USA, 382-388.</p>
<p>Kelma Madeira et al. Uma Avaliação do Orkut utilizando Personas sob a ótica da Nova Usabilidade. In: VIII Simpósio Brasileiro de Fatores Humanos em Sistemas Computacionais (IHC 2008), Porto Alegre, 2008.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/nova-usabilidade-parte1/" title="Você sabe o que é a “nova usabilidade”? – parte I">Você sabe o que é a “nova usabilidade”? – parte I</a></li><li><a href="http://tableless.com.br/usabilidade-interfaces-dispositivos-moveis-parte2/" title="Usabilidade de interfaces para dispositivos móveis – parte II">Usabilidade de interfaces para dispositivos móveis – parte II</a></li><li><a href="http://tableless.com.br/usabilidade-de-interfaces-para-dispositivos-moveis-parte1/" title="Usabilidade de interfaces para dispositivos móveis – parte I">Usabilidade de interfaces para dispositivos móveis – parte I</a></li><li><a href="http://tableless.com.br/qualidade-em-uso-expandindo-a-usabilidade/" title="Qualidade em Uso: expandindo a Usabilidade">Qualidade em Uso: expandindo a Usabilidade</a></li><li><a href="http://tableless.com.br/um-pensamento-sobre-design-para-web/" title="Um pensamento sobre design para web">Um pensamento sobre design para web</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/o-que-e-nova-usabilidade-parte2/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

