<?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; cotidiano</title>
	<atom:link href="http://tableless.com.br/tag/cotidiano/feed/" rel="self" type="application/rss+xml" />
	<link>http://tableless.com.br</link>
	<description>Tableless - Desenvolvimento inteligente com padrões web</description>
	<lastBuildDate>Fri, 18 May 2012 12:22:56 +0000</lastBuildDate>
	<language>pt-br</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Cuidado com invasões no WordPress</title>
		<link>http://tableless.com.br/cuidado-com-invasoes-no-wordpress/</link>
		<comments>http://tableless.com.br/cuidado-com-invasoes-no-wordpress/#comments</comments>
		<pubDate>Fri, 20 Apr 2012 13:00:47 +0000</pubDate>
		<dc:creator>Paulo Rodrigues</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[cotidiano]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5943</guid>
		<description><![CDATA[O WordPress não é perfeito e possui falhas, tome cuidado com possíveis invasões.]]></description>
			<content:encoded><![CDATA[<p>Um dos principais gerenciadores de conteúdo, o WordPress, possui ainda possui algumas falhas. É necessário ficar atento e tomar cuidado para qualquer situação.</p>
<p>Há duas semanas, passei sérios problemas com o WordPress, com o blog <a href="http://papodebuteco.net">Papo de Buteco</a>. Nunca tinha passado por uma situação parecida com essa, e por isso que tomar cuidado antes de agir.</p>
<h2>Como verifiquei</h2>
<p>Por otimizar o site, sempre estou verificando como as páginas do blog estão se comportando no Google. Busquei por <strong>site:papodebuteco.net</strong> para verificar todas as minhas páginas indexas no Google, e obtive o seguinte resultado:</p>
<p><a href="http://tableless.com.br/wp-content/uploads/2012/04/serp-papo-de-buteco.png"><img class="alignnone size-medium wp-image-5948" src="http://tableless.com.br/wp-content/uploads/2012/04/serp-papo-de-buteco-300x280.png" alt="" width="300" height="280" /></a></p>
<p>Ao primeiro olhar, já observei as tags de título das páginas estavam totalmente diferentes, no mínimo estranho, não é? Comecei a estudar a situação, e conclui que neste caso, aconteceu uma espécie de <strong><a title="Cloaking" href="http://www.mestreseo.com.br/black-hat/cloaking-aplicacao-scripts-blackhat-e-questoes-eticas">Cloaking</a></strong>, que reproduzia a página normal para o usuário e outra página para o Google.</p>
<p>De primeira, achei que eram os plug-ins instalados no site que estavam fazendo isso, mas até que o Google me enviou a seguinte mensagem para o <strong><a href="https://www.google.com/webmasters/tools">Web Master Tools</a></strong><strong> </strong>do site:</p>
<p><a href="http://tableless.com.br/wp-content/uploads/2012/04/mensagem-google.png"><img class="alignnone size-medium wp-image-5951" src="http://tableless.com.br/wp-content/uploads/2012/04/mensagem-google-300x211.png" alt="" width="300" height="211" /></a></p>
<p>Ao acessar o link indicado na mensagem, e realmente foi mostrada uma página com um conteúdo não relacionado ao blog.</p>
<h2>Solucionando o problema</h2>
<p>O que precisa ser feito é: <strong>Reinstalar o WordPress para atualizar seus arquivos.</strong></p>
<p><strong>No próprio painel do gerenciador</strong>, é possível fazer essa reinstalação, então nada de apagar todos os arquivos do FTP, enviar novamente e reintegrar com o banco de dados.</p>
<p>Em seu painel de adiminstração, procure no menu de navegação por <strong>Atualizações</strong> e siga como na imagem abaixo:</p>
<p><a href="http://tableless.com.br/wp-content/uploads/2012/04/menu-navegacao.png"><img class="alignnone size-medium wp-image-5944" src="http://tableless.com.br/wp-content/uploads/2012/04/menu-navegacao-128x300.png" alt="" width="128" height="300" /></a><a href="http://tableless.com.br/wp-content/uploads/2012/04/reinstalando-wordpress.png"><img class="alignright size-medium wp-image-5953" src="http://tableless.com.br/wp-content/uploads/2012/04/reinstalando-wordpress-300x164.png" alt="" width="300" height="164" /></a></p>
<p>Depois disso, acessei a página que o Google indicou na mensagem e não tive mais problemas, a página foi carregou com seu conteúdo real.</p>
<p>Para confirmar, você pode tirar a <em>“prova real”</em> <strong>buscando como o Googlebot</strong>, que é uma ferramenta encontrada no Google Webmaster Tools.</p>
<p><a href="http://tableless.com.br/wp-content/uploads/2012/04/gwmt-1.png"><img class="size-medium wp-image-5945 alignleft" src="http://tableless.com.br/wp-content/uploads/2012/04/gwmt-1-300x156.png" alt="" width="300" height="156" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Ao clicar em <strong>“Processando”</strong> e estiver lendo a página do jeito que deveria ler, com o seu código fonte real, pode ter certeza que o problema foi resolvido.</p>
<h2>Conclusão</h2>
<p>Não se sabe ao certo ainda como essa invasão se manifestou no blog, mas é bom ficar atento a qualquer tipo de propagação estranha relacionada a seu site. O tipo de invasão apresentado no artigo não é único, podem existir outros casos espalhados. A vulnerabilidade pode também está relacionada com o servidor onde o seu site está hospedado.</p>
<p>As páginas que não entraram no cache do Google depois que o problema foi solucionado, ainda se encontram com o mesmo conteúdo da invasão, se vocês procurarem, ainda acharam algumas páginas assim.</p>
<p>Apesar de tudo isso, <strong>não houve oscilação com o número de visitas do site</strong>, ele se mantéu estável. E o <strong>número de <em>backlinks</em> apontados para as páginas do blog cresceu</strong>, mas com um textos âncora sem relação ao conteúdo real do blog.</p>
<p>O<strong> Cloaking</strong> é considerada uma técnica de blackhat pelo Google, caso o problema não fosse solucionado a tempo, o blog poderia ser sofrer algum tipo de punição, veja mais em: <a href="http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&amp;answer=66355">http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&amp;answer=66355</a>.</p>
<p>Se o seu site ainda não é integrado ao Google <strong><a href="https://www.google.com/webmasters/tools/">Web Master Tools</a></strong>, acesse agora e integre! É simples, fácil, e oferece informações importantes para o seu site. Para completar e evitar que algo semelhante aconteça, confira <strong><a href="http://webperfeita.com/10-dicas-para-aumentar-a-seguranca-do-wordpress/">dicas para aumentar a segurança no WordPress</a></strong>.</p>
<p>Quero aproveitar o espaço para agradecer <a href="http://twitter.com/#!/papodebuteco">Leandro Lopes</a> (dono do blog Papo de Buteco), que autorizou a postagem de exemplos relacionados ao blog dele. É importante relatar o que aconteceu, ainda mais com casos verídicos, pois pode acontecer com qualquer um.</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/" title="Agora é a vez dos desenvolvedores">Agora é a vez dos desenvolvedores</a></li><li><a href="http://tableless.com.br/boas-praticas-de-acessibilidade/" title="Boas práticas de Acessibilidade">Boas práticas de Acessibilidade</a></li><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></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/cuidado-com-invasoes-no-wordpress/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>Seu lugar ao sol</title>
		<link>http://tableless.com.br/seu-lugar-ao-sol/</link>
		<comments>http://tableless.com.br/seu-lugar-ao-sol/#comments</comments>
		<pubDate>Mon, 12 Mar 2012 11:45:26 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Internet Móvel]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[padroes web]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5682</guid>
		<description><![CDATA[Como você se encaixará em um futuro onde o termo browser não existe mais?]]></description>
			<content:encoded><![CDATA[<p><iframe width="720" height="396" src="http://www.youtube.com/embed/jZkHpNnXLB0" frameborder="0" allowfullscreen></iframe></p>
<p>Você realmente acha que vai escrever CSS e HTML como escreve hoje em um cenário como este?<br />
Você já parou para pensar onde CSS/HTML e Javascript se encaixam em um ambiente onde a web é praticamente camuflada por APPs específicos? Eu não estou me referindo a estes Apps como conhecemos hoje. Podem ser Apps instaladas ou WebApps, neste futuro, dá na mesma. Não há diferença.</p>
<p>Pior do que pensar o lugar que CSS e HTML estarão é pensar em como VOCÊ se colocará em um ambiente tão novo quanto este. O que realmente iremos fazer? Qual será o papel de cada um? Será que a metodologia de trabalho será a mesma?</p>
<p><iframe width="720" height="396" src="http://www.youtube.com/embed/a6cNdhOKwi0" frameborder="0" allowfullscreen></iframe></p>
<p>Você também já deve ter visto o vídeo acima. Veja como os personagens utilizam seus gadgets e como tudo está sincronizado. A discussão aí não é se é melhor criar uma App ou uma aplicação Web, é se o seu produto é realmente relevante e se vai ajudar realmente a vida das pessoas. A forma como isso é oferecido não importa, porque em um cenário como esse tudo é igual. Não faz diferença nenhuma. <a href="http://tableless.com.br/utilizando-apps-em-vez-de-browsers/">A Web não é só o seu browser</a>. </p>
<p>É por isso que eu acho que <a href="http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/">os desenvolvedores precisam acordar</a>. Urgente.<br />
Eu perco as contas de quantos desenvolvedores me castigam quando eu digo para ignorar totalmente os browsers antigos. Você acha que um futuro como mostrado nos vídeos ou qualquer outro tipo de futuro, vai ficar esperando um browser ser adequado aos padrões? Aliás, browsers existirão? </p>
<p>Você precisa repensar o que realmente é vida digital. Qual a real utilidade de se carregar um <del>celular</del> <ins>dispositivo móvel</ins>. Repense o que será design responsivo. Eu sei que a necessidade de hoje é adaptar websites e aplicações para as diversas telas, mas entende que isso é só uma necessidade que vai passar rápido? Vai passar rápido não porque é uma modinha sem importância, mas porque isso deverá ser padrão daqui pra frente. Assim como o Tableless. Lembra que falavam que isso era uma modinha e que já já passaria? Pois é.</p>
<p>Experimente fazer o exercício de entender o futuro da web. É algo que todo profissional web deveria fazer, principalmente os desenvolvedores. Não importa qual linguagem de programação você vai precisar aprender ou desaprender, o que importa é como ela será aplicada. Isso muda tudo.</p>
<p>Embora a ideia não seja apenas direcionada a Mobile mas para todos os meios de acesso, vale muito a pena ver a apresentação que o <a href="http://www.viuisso.com.br/?utm_source=TablelessComBr&#038;utm_medium=linkPost&#038;utm_campaign=PostBlog">Michel Lent</a> fez. Dá uma olhada:</p>
<div style="width:595px" id="__ss_11955809"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/mlent68/repensando-o-marketing-a-partir-do-mobile" title="Repensando o marketing a partir do mobile" target="_blank">Repensando o marketing a partir do mobile</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/11955809?rel=0" width="595" height="497" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/" title="Agora é a vez dos desenvolvedores">Agora é a vez dos desenvolvedores</a></li><li><a href="http://tableless.com.br/boas-praticas-de-acessibilidade/" title="Boas práticas de Acessibilidade">Boas práticas de Acessibilidade</a></li><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/manipulando-metatag-viewport/" title="Manipulando a metatag Viewport">Manipulando a metatag Viewport</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/seu-lugar-ao-sol/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>GoMo &#8211; Teste seu site mobile</title>
		<link>http://tableless.com.br/gomo-teste-seu-site-mobile/</link>
		<comments>http://tableless.com.br/gomo-teste-seu-site-mobile/#comments</comments>
		<pubDate>Thu, 16 Feb 2012 22:57:26 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Notícias]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[acessibilidade]]></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=5514</guid>
		<description><![CDATA[Teste seu site com o Google GoMo.]]></description>
			<content:encoded><![CDATA[<p>Quer saber como seu site aparece nos smartphones por aí mas não nenhum aparelho para testar? O Google tem uma iniciativa chamada <a href="http://bit.ly/Aj7XXh">GoMo</a>.</p>
<p>O GoMo faz um teste rápido no seu site e mostra um screenshot de como seu site aparece em aparelhos móveis, aparentemente somente em aparelhos que rodam Android. Lembrando que muito provavelmente seu site aparecerá da mesma forma em dispositivos da Apple, que rodam WebKit, mesmo motor de renderização do browser do Android.</p>
<p>Ao final do teste ele entrega o resultando indicando 4 pontos principais: velocidade, imagens quebradas, legibilidade de textos e navegação. Muito interessante para quem quer pelo menos ter um teste superficial de como seu site se comporta nestes dispositivos.</p>
<p>Visite o <a href="http://bit.ly/Aj7XXh">GoMo</a>.</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/estruturacao-de-client-side-preprocessadores-framewoks-e-bibliotecas-parte-1/" title="Estruturação de Client-side &#8211; Parte 1: Préprocessadores, Framewoks e Bibliotecas">Estruturação de Client-side &#8211; Parte 1: Préprocessadores, Framewoks e Bibliotecas</a></li><li><a href="http://tableless.com.br/qualidade-de-imagens-e-densidade-de-pixels/" title="Qualidade de Imagens e densidade de pixels">Qualidade de Imagens e densidade de pixels</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/gomo-teste-seu-site-mobile/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<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/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/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/estruturacao-de-client-side-preprocessadores-framewoks-e-bibliotecas-parte-1/" title="Estruturação de Client-side &#8211; Parte 1: Préprocessadores, Framewoks e Bibliotecas">Estruturação de Client-side &#8211; Parte 1: Préprocessadores, Framewoks e Bibliotecas</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li><li><a href="http://tableless.com.br/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/agora-e-a-vez-dos-desenvolvedores/feed/</wfw:commentRss>
		<slash:comments>31</slash:comments>
		</item>
		<item>
		<title>Boas práticas de Acessibilidade</title>
		<link>http://tableless.com.br/boas-praticas-de-acessibilidade/</link>
		<comments>http://tableless.com.br/boas-praticas-de-acessibilidade/#comments</comments>
		<pubDate>Mon, 23 Jan 2012 16:14:18 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[aprenda]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Na Prática]]></category>
		<category><![CDATA[tableless]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5303</guid>
		<description><![CDATA[Apresentação sobre acessibilidade e desenvolvimento para web.]]></description>
			<content:encoded><![CDATA[<p>Preparei uma pequena (nem tão pequena assim) apresentação que mostra algumas boas práticas e técnicas sobre acessibilidade para sistemas e websites. São pequenos ajustes que podemos incorporar mesmo depois de todo o desenvolvimento pronto e que dão resultados importantes para adequação dos seus sites ou sistemas.</p>
<div style="width:595px" id="__ss_11217803"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/diegoeis/apresentancao-acessibilidade" title="Apresentancao acessibilidade" target="_blank">Apresentancao acessibilidade</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/11217803?rel=0" width="595" height="497" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div style="padding:5px 0 12px"> Veja mais <a href="http://www.slideshare.net/" target="_blank">apresentações</a> de <a href="http://www.slideshare.net/diegoeis" target="_blank">Diego Eis</a> </div>
</p></div>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/qualidade-de-imagens-e-densidade-de-pixels/" title="Qualidade de Imagens e densidade de pixels">Qualidade de Imagens e densidade de pixels</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/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/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></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/boas-praticas-de-acessibilidade/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Introdução aos padrões de codificação</title>
		<link>http://tableless.com.br/introducao-a-padroes-de-codificacao/</link>
		<comments>http://tableless.com.br/introducao-a-padroes-de-codificacao/#comments</comments>
		<pubDate>Mon, 23 Jan 2012 11:28:41 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Client-Side]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[desenvolvimento]]></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=5286</guid>
		<description><![CDATA[É mais importante para o time concordar em um único estilo de código do que encontrar o estilo perfeito. ]]></description>
			<content:encoded><![CDATA[<p>Como os idiomas reais, cada linguagem de programação tem suas respectivas regras, individualidades, pontuações, pausas e pontos em comum com outras linguagens. Você precisa conhecer essas peculiaridades para falar fluentemente ou no mínimo ser entendido. Nas linguagens de para web ou qualquer outra linguagem de programação, precisamos seguir algumas regras básicas para que o código não vire uma língua estrangeira no meio do projeto.</p>
<p>Definir padrões é normal para que a equipe inteira escreva o código da mesma maneira. Esse assunto é longo e muito importante para todas as equipes de desenvolvimento. Programadores já quiseram me matar várias vezes porque eu uso TABS em vez de ESPAÇOS em arquivos Python/PHP. Programadores gostam de espaços. Eu não. Mas não é o nosso gosto que vai definir quais os padrões de código que devemos seguir.</p>
<p>Quando definimos padrões e boas práticas, garantimos que todos da equipe conseguirão ter o mínimo de entendimento do código daquele projeto que está na empresa a tempos. Se alguém da equipe adoecer ou precisar ir para o Canadá, outro integrante pode assumir o seu lugar sem precisar se preocupar em aprender novas regras, porque elas devem ser as mesmas do projeto anterior.</p>
<p>É importante que os integrantes da equipe sejam sempre fiéis aos acordos firmados no momento em que combinam esses padrões. É importante também que, caso eles encontrem um integrante fora da lei, que eles forcem o meliante a seguir as regras. Já vi gente perdendo o trabalho de uma semana por que estava trabalhando diretamente pelo FTP e o projeto não estava no GIT. O programador simplesmente APAGOU o projeto da pessoa. Nunca mais ela resolveu editar os arquivos fora do controle de versão. Esse tipo de atitude é perigosa mas muito necessárias às vezes. Devemos forçar as regras num ambiente onde todos devem quem, quando e como as linhas de código do projeto foram escritas.</p>
<p>Alguns pontos para se pensar e combinar:</p>
<h6>Identação</h6>
<p>Como devemos identar o código? Com espaços ou tabs? Se for com espaços quantos? </p>
<h6>Espaços em brancos (Whitespaces)</h6>
<p>Espaços devem ser incluídos depois de uma operação condicional? Espaços devem ser colocados entre o seletor e as chaves? E no final de cada linha, precisa?</p>
<h6>Nomenclatura</h6>
<p>Como as classes, ids e variáveis devem ser nomeadas? E as funções? Vamos usar <a href="http://en.wikipedia.org/wiki/CamelCase">CamelCase</a>?</p>
<h6>Comentários</h6>
<p>Como faremos com os comentários? Como serão os delimitadores do comentário? O comentário deve ser completo ou precisa ser algo mais resumido?</p>
<h6>Arquivos</h6>
<p>Como os arquivos, que não fazem parte da estrutura padrão do CMS, Framework e etc deverão ser chamados? E o nome das pastas? Como as páginas serão chamadas?</p>
<h6>Chaves e ponto/vírgula</h6>
<p>As chaves deverão ser abertas na mesma linha ou devemos quebrar linhas? Vamos sempre usar ponto/vírgula? Vamos usar o padrão <a href="http://en.wikipedia.org/wiki/Indent_style#K.26R_style">K&#038;R ou Allman</a>?</p>
<p>Quando definimos estas pequenas coisas, diminuímos muitos percalços no meio do caminho. Já vi projetos atrasarem meses por que um palerma abriu e salvou arquivos com o charset diferente do que já tinha sido combinado no início.</p>
<p>&#8220;It&#8217;s more important for people on a team to agree to a single coding style than it is to find the perfect style.&#8221; <a href="http://www.amazon.com/gp/product/0596102356/ref=as_li_ss_tl?ie=UTF8&#038;tag=tableless-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0596102356">Building Scalable Web Sites: Building, Scaling, and Optimizing the Next Generation of Web Applications</a><br />
Indico este livro sobre esse e outros assuntos sobre a construção, desenvolvimento e manutenção de websites</p>
<h3  class="related_post_title">Posts Relacionados</h3><ul class="related_post"><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li><li><a href="http://tableless.com.br/agora-e-a-vez-dos-desenvolvedores/" title="Agora é a vez dos desenvolvedores">Agora é a vez dos desenvolvedores</a></li><li><a href="http://tableless.com.br/estruturacao-de-client-side-preprocessadores-framewoks-e-bibliotecas-parte-1/" title="Estruturação de Client-side &#8211; Parte 1: Préprocessadores, Framewoks e Bibliotecas">Estruturação de Client-side &#8211; Parte 1: Préprocessadores, Framewoks e Bibliotecas</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-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/introducao-a-padroes-de-codificacao/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>CSS1K</title>
		<link>http://tableless.com.br/css1k/</link>
		<comments>http://tableless.com.br/css1k/#comments</comments>
		<pubDate>Fri, 20 Jan 2012 10:56:42 +0000</pubDate>
		<dc:creator>Diego Eis</dc:creator>
				<category><![CDATA[Notícias]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[desenvolvimento web]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=5281</guid>
		<description><![CDATA[Implementando designs com apenas 1k de CSS. Você encara?]]></description>
			<content:encoded><![CDATA[<p>Você deve conhecer o <a href="http://www.csszengarden.com/">CSS Zen Garden</a>. O CSS Zen Garden foi criado pelo <a href="http://mezzoblue.com/">Dave Shea</a>, foi um dos sites responsáveis por convencer toda a galera desenvolvedora orgulhosa e desconfiada mostrando que era possível produzir e implementar websites flexívels, diferentes, não quadrados nem com cara de blog &#8211; como falavam &#8211; utilizando CSS puro. Tendo este pensamento em mente, <a href="http://twitter.com/jacobrask">Jacob Rask</a> decidiu fazer o <a href="http://css1k.com/">CSS1K</a>: um desafio para você que acha que consegue implementar um design utilizando apenas 1K de CSS.</p>
<p>O que você tem que fazer é simples:<br />
- Você só pode enviar CSS.<br />
- O seu código CSS deve ter 1K (1024 bytes), minificado.<br />
- Não precisa utilizar prefixos de browsers, eles colocarão lá para você, logo, você pode usar as coisas bacanas de CSS que só funcionam em browsers (não o IE).<br />
- O Design não precisa ficar igualzinho em todos os browsers, mas gracefull degradation é uma boa pedida.<br />
- Seu código é submetido sob a licensa <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a>.</p>
<p>Eles <a href="https://github.com/jacobrask/CSS1K/">dão o código HTML</a> que você não pode modificar em hipótese alguma, se não acaba a graça da brincadeira.</p>
<p>E aí, consegue?</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/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/dicas-de-sobrevivencia-ie6/" title="Dicas de sobrevivência em uma era pós o IE6">Dicas de sobrevivência em uma era pós o IE6</a></li><li><a href="http://tableless.com.br/qualidade-de-imagens-e-densidade-de-pixels/" title="Qualidade de Imagens e densidade de pixels">Qualidade de Imagens e densidade de pixels</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/css1k/feed/</wfw:commentRss>
		<slash:comments>6</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/adobe-e-os-padroes-web/" title="Adobe e os Padrões Web">Adobe e os Padrões Web</a></li><li><a href="http://tableless.com.br/qualidade-de-imagens-e-densidade-de-pixels/" title="Qualidade de Imagens e densidade de pixels">Qualidade de Imagens e densidade de pixels</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></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/um-pensamento-sobre-design-para-web/feed/</wfw:commentRss>
		<slash:comments>13</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/adobe-e-os-padroes-web/" title="Adobe e os Padrões Web">Adobe e os Padrões Web</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 que é Usabilidade?</title>
		<link>http://tableless.com.br/o-que-e-usabilidade/</link>
		<comments>http://tableless.com.br/o-que-e-usabilidade/#comments</comments>
		<pubDate>Mon, 22 Aug 2011 21:44:42 +0000</pubDate>
		<dc:creator>Talita Pagani</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Tecnologia e Tendências]]></category>
		<category><![CDATA[cotidiano]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[experiência do usuário]]></category>
		<category><![CDATA[metodologia de desenvolvimento]]></category>
		<category><![CDATA[padroes web]]></category>
		<category><![CDATA[usabilidade]]></category>

		<guid isPermaLink="false">http://tableless.com.br/?p=3823</guid>
		<description><![CDATA[A usabilidade é apenas um dos conceitos que abrangem a experiência de uso de pessoas com produtos, tendo também algumas limitações.]]></description>
			<content:encoded><![CDATA[<p>Já vimos em um <a href="http://tableless.com.br/estabelecendo-uma-metodologia-agil-para-avaliacao-de-usabilidade">artigo anterior</a> como a usabilidade beneficia o desenvolvimento web. Mas, o que de fato compreende a usabilidade? Nem tudo que se refere à experiência de uso está dentro do escopo dela. Sim, a usabilidade tem limitações e lacunas que são complementadas por outros paradigmas, como o design de interação. Porém, podemos considera-la a <em>base da pirâmide</em> que sustenta o projeto de uma aplicação com boa experiência de uso.  Neste artigo, veremos brevemente o que faz parte do conceito de usabilidade e qual o papel que ela tem no processo de desenvolvimento de aplicações.</p>
<h2>Afinal, o que é usabilidade?</h2>
<p>A Usabilidade é “filha” da Interação Humano-Computador (IHC) e “neta” da Engenharia de Software, carregando esse legado ao longo de sua evolução, podendo ser definida como o <strong>grau de facilidade</strong> com que o usuário consegue interagir com determinada interface.</p>
<p>Partindo da IHC, a usabilidade aborda a forma como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário, considerando as seguintes habilidades, de acordo com a norma <a title="Norma ISO 9241" href="http://en.wikipedia.org/wiki/ISO_9241" target="_blank">ISO 9241</a>:</p>
<ul>
<li><strong>Facilidade de aprendizado:</strong> a utilização do sistema requer pouco treinamento;</li>
<li><strong>Fácil de memorizar:</strong> o usuário deve lembrar como utilizar a interface depois de algum tempo;</li>
<li><strong>Maximizar a produtividade:</strong> a interface deve permitir que o usuário realize a tarefa de forma rápida e eficiente;</li>
<li><strong>Minimizar a taxa de erros:</strong> caso aconteçam erros, a interface deve avisar o usuário e permitir a correção de modo fácil;</li>
<li><strong>Maximizar a satisfação do usuário:</strong> a interface deve dar-lhe confiança e segurança.</li>
</ul>
<div>
<p>Partindo da Engenharia de Software, a usabilidade é englobada dentro da qualidade e visa garantir uma parte da eficiência e eficácia do sistema. A eficiência refere-se a uma interação produtiva entre o usuário e o sistema, permitindo a realização de tarefas com menor esforço sob uma experiência agradável. A eficácia pode ser entendida como a capacidade do sistema e da interface possibilitarem ao usuário a completude da tarefa e o alcance de seus objetivos no sistema.</p>
<h2>A importância da usabilidade no desenvolvimento de projetos</h2>
<p>A usabilidade se encaixa em qualquer tipo de projeto de interface, tendo amplitude diferente de acordo com a criticidade do projeto, ou seja, quanto mais crítico for o sistema, maiores serão as perdas caso ele não seja de fácil utilização e proporcione satisfação. Ela deve ser pensada desde o planejamento do projeto, até a etapa de desenvolvimento e teste.</p>
<p>As empresas têm consciência da importância da usabilidade. Porém, muitas ainda a veem como um fator que só deve ser levado em conta durante o desenvolvimento se houver tempo e recurso, como se ela representasse um custo adicional, fora do que é essencial. Mas as empresas têm muito mais a perder ao minimizar a usabilidade dessa forma. De acordo com Cybis, Betiol e Faust (2007):</p>
<p>“<em>Dependendo da frequência com que o software é empregado, os prejuízos para as empresas podem também ser expressivos, não só em decorrência do absenteísmo e da rotatividade do pessoal, mas também pela baixa produtividade, competitividade e menor retorno de investimento. Sistemas difíceis de usar implicam em erros e perda de tempo, fatores que se multiplicam com a frequência das tarefas e o número de usuários. A perda de dados e informações pode implicar na perda de clientes e de oportunidades. Acontecimentos deste tipo causam desde uma resistência ao uso do sistema até a sua subutilização e abandono completo, com o devido consentimento da empresa. O barato terá custado caro.</em>”</p>
<p>A usabilidade pode ser abordada de diferentes formas ao longo do projeto:</p>
<div id="attachment_4011" class="wp-caption aligncenter" style="width: 548px"><a href="http://tableless.com.br/wp-content/uploads/2011/07/Slide1.png"><img class="size-full wp-image-4011  " src="http://tableless.com.br/wp-content/uploads/2011/07/Slide1.png" alt="Técnicas utilizadas para garantir e verificar a usabilidade em diferentes etapas" width="538" height="403" /></a><p class="wp-caption-text">Técnicas utilizadas para garantir e verificar a usabilidade em diferentes etapas</p></div>
<h2>Lacunas a serem preenchidas</h2>
<p>Apesar de a usabilidade ser responsável por assegurar grande parte dos quesitos de experiência do usuário, ela possui duas grandes limitações:</p>
<ol start="1">
<li>Embora considere a satisfação do usuário, trata apenas dessa satisfação perante a realização de uma determinada tarefa, concentrando-se na função, sem considerar fatores físicos, ambientais e emocionais inerentes ao contexto de utilização do sistema. Mais do que ser de fácil utilização, aprendizagem e permitir completude da tarefa, uma boa experiência de uso está baseada em uma interação agradável, considerando a forma como as pessoas percebem a interação com o sistema;</li>
<li>O contexto usualmente analisado pela usabilidade é mais restrito: abrange apenas a visão do usuário. Para garantir uma boa experiência de uso, é necessário abranger a visão de diferentes <em>stakeholders</em>: do usuário, da organização e da equipe de desenvolvimento, cada qual com requisitos e necessidades diferentes frente ao sistema.</li>
</ol>
<p>Adaptando um gráfico apresentado durante a nnGroup Conference de 2008, podemos ver a usabilidade enquadrada da seguinte forma:</p>
<div id="attachment_4012" class="wp-caption aligncenter" style="width: 586px"><a href="http://tableless.com.br/wp-content/uploads/2011/07/Slide2.png"><img class="size-full wp-image-4012 " src="http://tableless.com.br/wp-content/uploads/2011/07/Slide2.png" alt="O escopo da usabilidade" width="576" height="432" /></a><p class="wp-caption-text">O escopo da usabilidade</p></div>
<h3>Referências e Leitura Complementar</h3>
<p>ABRAS, C.; MALONEY-KRICHMAR, D.; PREECE, J. <strong>User-Centered Design</strong>. In: Bainbridge, W. <em>Encyclopedia of Human-Computer Interaction</em>. Thousand Oaks: Sage Publications, 2004.</p>
<p>CYBIS, W.; BETIOL, A. H.; FAUST, R. <strong>Ergonomia e Usabilidade: </strong>Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.</p>
<p>SUMATHI, B. <strong>Chapter Three: User Centered Design Approach</strong>. Disponível em: <a href="http://dspace.fsktm.um.edu.my/bitstream/1812/214/8/Chapter%20Three.pdf">http://dspace.fsktm.um.edu.my/bitstream/1812/214/8/Chapter%20Three.pdf</a>.</p>
<p>NIELSEN, J.; LORANGER, H. <strong>Usabilidade na Web: </strong>Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.</p>
<p>OLIVEIRA NETTO, A. A. <strong>IHC – Interação Humano Computador:</strong> Modelagem e Gerência de Interfaces com o Usuário. Florianópolis: VisualBooks, 2004. 120p.</p>
<p>PREECE, J.; ROGERS; Y.; SHARP, H. <strong>Interaction Design: </strong>Beyond Human-Computer Interaction. New York: John Wiley &amp; Sons, Inc., 2002. 551p.</p>
<p>ROCHA, H. R.; BARANAUSKAS, M. C. C. <strong>Design e Avaliação de Interfaces Humano-Computador</strong>. Campinas: Universidade Estadual de Campinas, 2007.</p>
<p>UX Revisions. <strong>The Difference Between Usability and User Experience</strong>. Disponível em: <a href="http://www.uxrevisions.com/user-experience-design/the-difference-between-usability-and-user-experience/18/">http://www.uxrevisions.com/user-experience-design/the-difference-between-usability-and-user-experience/18/</a></p>
<p>UX Revisions. <strong>User Experience vs User Interaction</strong>. Disponível em: <a href="http://www.uxrevisions.com/user-experience-design/user-experience-vs-user-interaction/16/">http://www.uxrevisions.com/user-experience-design/user-experience-vs-user-interaction/16/</a></p>
<p>Usability Geek. <strong>The Difference (And Relationship) Between Usability And User Experience</strong>. Disponível em: <a href="http://usabilitygeek.com/the-difference-between-usability-and-user-experience/">http://usabilitygeek.com/the-difference-between-usability-and-user-experience/</a></p>
<p>NeoSpot. <strong>Usability vs. User Experience (UX)</strong>. Disponível em: <a href="http://neospot.se/usability-vs-user-experience/">http://neospot.se/usability-vs-user-experience/</a></p>
<p>Interaction by Design. <strong>Usability vs. user experience</strong>. Disponível em: <a href="http://www.interactionbydesign.com/thoughts/thumbnails/00000050.html">http://www.interactionbydesign.com/thoughts/thumbnails/00000050.html</a></p>
</div>
<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/responsabilidade-de-um-dev-client-side/" title="Responsabilidade de um dev client-side">Responsabilidade de um dev client-side</a></li><li><a href="http://tableless.com.br/entendendo-quais-apis-realmente-fazem-parte-do-html5/" title="Entendendo quais APIs (realmente) fazem parte do HTML5">Entendendo quais APIs (realmente) fazem parte do HTML5</a></li><li><a href="http://tableless.com.br/seu-lugar-ao-sol/" title="Seu lugar ao sol">Seu lugar ao sol</a></li><li><a href="http://tableless.com.br/gomo-teste-seu-site-mobile/" title="GoMo &#8211; Teste seu site mobile">GoMo &#8211; Teste seu site mobile</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://tableless.com.br/o-que-e-usabilidade/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

