tag:blogger.com,1999:blog-87500288072342074452023-11-16T08:10:05.459-03:00Web Design ExperienceTalita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.comBlogger51125tag:blogger.com,1999:blog-8750028807234207445.post-81885340975701601742012-12-31T14:18:00.000-02:002013-01-02T09:34:34.112-02:00Retrospectiva 2012 (e que venha 2013!)É verdade, faz muito tempo que não publico algo no blog, cerca de 6 meses. E a desculpa é a velha falta de tempo (trabalho, estudos da pós, {nova} vida social). Sem querer listar todas as minhas resoluções para o novo ano que vem aí, apenas digo que pretendo publicar mais artigos, não somente aqui neste blog mas também no <a href="http://www.tableless.com.br/" target="_blank">Tableless</a> e, quem sabe, em outros blogs também :)<br />
<br />
Este post é uma tentativa de recaptular tudo o que aconteceu de bom (e não tão bom) em 2012. Este ano foi quase uma novela mexicana, rs.<br />
<br />
Tudo inicia em janeiro, quando comecei a ficar insatisfeita e triste com o rumo que minha pesquisa de mestrado estava tomando. Eu não estava feliz e, no começo de fevereiro, deixei o mestrado, pra desespero da minha família e surpresa dos amigos.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExCWDzdjjpsjBAn7v_0f9zl-K5Dx3Slh-PGBY8jw9tcj3JawosIp_4zl7MpnOC0iEuKghafH7nydYjwwY-HoLMvs7Sz4rE1xW4L29lOmbWFgg20_b1YQy0ic3fAWgCenZ8us6vhuxhJg/s320/BatmanSurprise.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExCWDzdjjpsjBAn7v_0f9zl-K5Dx3Slh-PGBY8jw9tcj3JawosIp_4zl7MpnOC0iEuKghafH7nydYjwwY-HoLMvs7Sz4rE1xW4L29lOmbWFgg20_b1YQy0ic3fAWgCenZ8us6vhuxhJg/s320/BatmanSurprise.jpg" /></a></div>
<br />
Em nenhum momento me arrependi, pois vejo que foi realmente a melhor alternativa.<br />
<br />
Neste meio tempo, fui à <a href="http://wdxp.blogspot.com.br/2012/02/resumao-campus-party-2012-melhores.html" target="_blank">Campus Party</a>, tive meu celular roubado lá (#chateada), mas mesmo assim foi épico, pois reencontrei amigos e tive a oportunidade de participar de uma mesa redonda no palco de Games e também de um Bar Camp com as <a href="http://www.garotascpbr.com.br/" target="_blank">GarotasCPBr</a>.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MyVdPssv4o_6D9WDejFeXyaqteI5HeaFj4ya9YptwHP6AlabwjUcIkjdAfxRP0SAe1I1d4DFRrmwoQ2ETAu9w-iIhuWMt4HBqswzODVhaV9kDWhe0ALhmm5mwpiqxzvmdHu9CzxIH_ul/s1600/407138_2459527142332_960432147_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MyVdPssv4o_6D9WDejFeXyaqteI5HeaFj4ya9YptwHP6AlabwjUcIkjdAfxRP0SAe1I1d4DFRrmwoQ2ETAu9w-iIhuWMt4HBqswzODVhaV9kDWhe0ALhmm5mwpiqxzvmdHu9CzxIH_ul/s640/407138_2459527142332_960432147_n.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"Disfarça a tensão, Talita, disfarça, foco!"</td></tr>
</tbody></table>
Pouco mais de um mês depois de ter saído do mestrado, eu passei no processo seletivo da especialização em Gerenciamento de Projetos no Senac e fui contratada pela <a href="http://www.mstech.com.br/" target="_blank">MStech</a>. Ou seja, começava uma pós e um emprego novo.<br />
<br />
Logo depois que comecei na empresa, meu namorado na época (que trabalha lá) terminou comigo pois tinha outra pessoa (#chateada²). Foram meses difíceis e dores de estômago intermináveis que achei que fossem decorrentes de uma gastrite nervosa, mas descobri depois de 5 meses que eram cálculos na vesícula, o que culminou com uma cirurgia que fiz em outubro.<br />
<br />
Mas antes disso, a vida continuava, por mais difícil que fosse. Tive apoio, fiz novas amizades dentro e fora do trabalho, conquistei o meu espaço dentro da empresa e tive grandes oportunidades profissionais. Reinventei minha vida social, comecei a sair mais com o pessoal (sempre com responsabilidade) e aproveitar mais o tempo livre longe do notebook.<br />
<br />
Em junho, compareci ao Prêmio Nacional de Acessibilidade na Web (Todos@Web) com a <a href="http://www.twitter.com/liviagabos" target="_blank">Lívia Gabos</a>. Conheci pessoalmente a Yaso, reencontrei o Reinaldo (Ferraz), fui apresentada ao Carlinhos (Cecconi), conversei com a prof. Lucia Filgueiras, da USP, reecontrei os amigos da <strike>máfia</strike> nata da Web e também encontrei bauruenses por lá (<a href="http://www.twitter.com/ridjohansen" target="_blank">Richard </a>e Carlos Maiello). E foi lá que começamos a articular o FrontInterior...<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMjAk0mC7ieUnOHT9Psz4naYGNzRj-ZoedBmi5vpPDWbVKJKbdgHxq4g_yygXVJcovT0n8K6xyTtf4avjwhSWpUGi-BAyEtl6qK1M46LhXLeNthG2Aqsks__u3hF6_kmuk9zZG0tyhAxTF/s1600/196115_326836757391594_1293939823_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMjAk0mC7ieUnOHT9Psz4naYGNzRj-ZoedBmi5vpPDWbVKJKbdgHxq4g_yygXVJcovT0n8K6xyTtf4avjwhSWpUGi-BAyEtl6qK1M46LhXLeNthG2Aqsks__u3hF6_kmuk9zZG0tyhAxTF/s640/196115_326836757391594_1293939823_n.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Com os paladinos da Web Para Todos</td></tr>
</tbody></table>
Ainda em junho, palestrei no <a href="http://www.frontincuritiba.com.br/" target="_blank">FrontInCuritiba</a>! Cidade linda, clima perfeito. Revi os amigos, conheci alguns pessoalmente (como o <a href="http://www.twitter.com/zenorocha" target="_blank">Zeno</a>) e novamente encontrei bauruenses por lá (eu falo que bauruense tem em todo canto, ninguém acredita) e voltei inspirada.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOI_GsOJKsRmwyR-BY36dkL8wZj1beTXGi3H8TDftg1kaA79iDETJO7DS3phyphenhyphendl5X2ZDyuq4wOFRdDaHGECVloc1LnTUQ9t4rFIWDhkiVLMx6Xrb42Z88tGlAGnkM-YqD1HsfdaNbSk4E7/s1600/540857_4362579109127_1981195352_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOI_GsOJKsRmwyR-BY36dkL8wZj1beTXGi3H8TDftg1kaA79iDETJO7DS3phyphenhyphendl5X2ZDyuq4wOFRdDaHGECVloc1LnTUQ9t4rFIWDhkiVLMx6Xrb42Z88tGlAGnkM-YqD1HsfdaNbSk4E7/s640/540857_4362579109127_1981195352_n.jpg" width="640" /></a></div>
<br />
Em Agosto, foi a vez de participar da minha primeira festa à fantasia (#partyhard) como Rapunzel e também participei do melhor evento deste ano, que foi o <a href="http://www.braziljs.com.br/" target="_blank">BrazilJS</a>, o maior evento de JavaScript do Universo que contou com um público de 1.000 pessoas (fora as mais de 70.000 assistindo via streaming do Terra). Conheci pessoalmente o <a href="http://www.maujor.com/" target="_blank">Maujor</a> e o <a href="http://www.twitter.com/bernarddeluna" target="_blank">Bernard de Luna</a>. O Maujor me convidou para escrever um artigo para o blog dele, o qual ainda estou devendo, mas não esqueci!<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHZCpJGM1a9NrUnKxUBZWPv3TKb854WXyt-Flek6raV98qnL5mj8CCoFvi8ms4GCRTijcTv2W6DSPUnA8VlOBkOXFwhCmVY7Bylf8N2ortGz9RzfmLYX6U1TJaD1zvhxZ6ieI5ybz_n-C/s1600/295248_4701654265794_1560363609_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHZCpJGM1a9NrUnKxUBZWPv3TKb854WXyt-Flek6raV98qnL5mj8CCoFvi8ms4GCRTijcTv2W6DSPUnA8VlOBkOXFwhCmVY7Bylf8N2ortGz9RzfmLYX6U1TJaD1zvhxZ6ieI5ybz_n-C/s640/295248_4701654265794_1560363609_n.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Com o Mestre</td></tr>
</tbody></table>
Foi em Agosto que resolvi também sair da vida sedentária e iniciar minhas aulas de Pilates, que estou adorando! Fiz disto um momento meu, para cuidar de mim.<br />
<br />
Setembro foi um mês mais atribulado. Eu e o Richard estávamos fazendo o <a href="http://www.frontinterior.com.br/" target="_blank">FrontInterior</a> ganhar forma. Estávamos trazendo para Bauru uma franquia de sucesso dos eventos de front-end, sendo que nenhum dos dois tinha experiência nisso. Foi neste mês que descobri <strike>os aerolitos</strike> as pedras na vesícula, mas fiquei tranquila porque era uma cirurgia simples e eu iria ficar boa logo, o que realmente aconteceu. Mas no final do mês, compareci à USP de São Carlos para ministrar um minicurso de <a href="http://www.slideshare.net/talitapagani/responsive-web-design-14502294" target="_blank">Responsive Web Design</a> na <a href="http://semcomp.icmc.usp.br/" target="_blank">SECOMP</a>. A recepção do pessoal foi ótima e adorei conhecer a USP!<br />
<br />
Outubro foi uma grande correria. Exames finais para a cirurgia, a cirurgia propriamente dita que me fez perder a Conferência do W3C.br e alguns minicursos, mas foi por uma boa causa.<br />
<br />
No mês de Novembro, mais correria ainda para conseguir finalizar tudo para o FrontInterior. Preocupações e mais preocupações, abacaxis pra descascar, um orçamento para cumprir e noites mal dormidas. E em 24 de Novembro, ele ocorreu! E dentre erros e acertos, foi maravilhoso, recebemos elogios via redes sociais e pessoalmente, a comunidade gostou, os palestrantes gostaram e tivemos a oportunidade de colocar Bauru no mapa do desenvolvimento web.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifB4DyeYKDPED7PoFARDDNYn81Zmn6i2QJIgMILqcMsJdkeGDCeQUVAePJZKZBBp9NmzUZZKaDgZX0PKRoNVBxssE1pbBGKaTC0KhE-3Aj3y8xccHk6Q_QjuBjizzYDN_th_qn0ROuSvje/s1600/604153_1652235058248798_572509584_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifB4DyeYKDPED7PoFARDDNYn81Zmn6i2QJIgMILqcMsJdkeGDCeQUVAePJZKZBBp9NmzUZZKaDgZX0PKRoNVBxssE1pbBGKaTC0KhE-3Aj3y8xccHk6Q_QjuBjizzYDN_th_qn0ROuSvje/s640/604153_1652235058248798_572509584_n.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Palestrantes e a equipe do FrontInterior. It was Legen -- wait for it -- dary!!</td></tr>
</tbody></table>
Dezembro foi o mês de reflexão, de fechamento, mas ainda reservou algumas surpresas boas.<br />
<br />
Outras coisas importantes (para mim) que fiz em 2012: comecei a ler os livros das Crônicas de Gelo e Fogo do George R. R. Martin. Comecei a acompanhar novas séries (Beauty and the Beast, How I Met Your Mother, que estou amando). Comecei a ouvir novos músicos/bandas que deram um <i>up</i> na minha playlist (Kimbra, Foster the People, MGMT, Regina Spektor, Florence and the Machine, Lana Del Rey, The Black Keys).<br />
<br />
Foi um ano de grandes mudanças. E que venha 2013!Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com3tag:blogger.com,1999:blog-8750028807234207445.post-69460811508909625232012-06-09T20:25:00.002-03:002012-06-09T20:25:58.460-03:00Ganhador do ingresso para o @frontincuritibaJá temos o ganhador da <a href="http://wdxp.blogspot.com.br/2012/06/front-in-curitiba-e-sorteio-de-ingresso.html" target="_blank">promoção</a> que iria sortear um ingresso para o <a href="http://www.frontincuritiba.com.br/" target="_blank">Front In Curitiba</a>!<br />
<br />
O sortudo foi o <a href="https://twitter.com/nerdfurioso" target="_blank">@nerdfurioso</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATHPxQNghWQaCXIdYYtX6UnWqLhpBSu-S4utrF6JlNduL2JCcjZ-pWbs5CCjiWdp0imuGvWQCVFrQvwgIuBmj4W2Z2d99Ocx2FdFliA9D2hMBQyPH3REd0_zZWUZBHFpzx9bnLsgMYM1x/s1600/sorteio_frontincuritiba.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATHPxQNghWQaCXIdYYtX6UnWqLhpBSu-S4utrF6JlNduL2JCcjZ-pWbs5CCjiWdp0imuGvWQCVFrQvwgIuBmj4W2Z2d99Ocx2FdFliA9D2hMBQyPH3REd0_zZWUZBHFpzx9bnLsgMYM1x/s400/sorteio_frontincuritiba.PNG" width="400" /></a></div>
<br />
Parabéns! Entrarei em contato para solicitar os dados. O ingresso vale para o sorteado assistir todas as palestras do evento + 1 minicurso (a ser escolhido pela pessoa). Os dados do ganhador (os mesmos que estão disponíveis no site do evento para inscrições) devem ser enviados a mim por e-mail até o dia 11/06, caso contrário, irei realizar novo sorteio. Demais despesas (viagem, estadia, alimentação, etc) ficam por conta do sorteado.<br />
<br />
Nos vemos em Curitiba ;)Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-51204224778073892002012-06-05T23:23:00.001-03:002012-06-08T08:36:26.512-03:00Front In Curitiba e sorteio de ingresso para o eventoOlá pessoal!<br />
<br />
Pois é, estou a muito tempo sem postar, mas resolvi voltar e com uma promoção.<br />
<br />
Neste mês de Junho, dias 23 e 24, ocorre o <a href="http://www.frontincuritiba.com.br/" target="_blank">Front In Curitiba</a>, franquia dos já bem sucedidos eventos da série "Front In", como o <a href="http://www.frontinlondrina.com.br/" target="_blank">FrontIn Londrina</a>. Eu estarei lá, palestrando sobre Usabilidade em Dispositivos Móveis.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.frontincuritiba.com.br/" target="_blank"><img border="0" height="146" src="http://www.icomp.com.br/blog/wp-content/uploads/2012/06/frontincuritibaaaa.jpg" width="400" /></a></div>
<br />
O evento, realizado pela <a href="http://www.avadora.com.br/" target="_blank">AVADORA Digital</a>, tem o foco em palestras e minicursos relacionados à desenvolvimento front-end, como HTML5, web semântica, usabilidade e acessibilidade. As palestras ocorrerão no sábado, dia 23, e os minicursos no domingo. É uma grande oportunidade de conhecer muitos profissionais feras e fazer um <i>networking</i>.<br />
<br />
As inscrições já estão abertas, maaaaas, você pode entrar na faixa pois irei sortear um ingresso para o evento. A promoção cobre apenas o ingresso, sendo que as despesas de viagem e hospedagem serão por conta do ganhador.<br />
<br />
Para participar, basta tweetar a seguinte frase até o dia 09 de Junho:<br />
<br />
<b><i>Eu vou para o @frontincuritiba com o ingresso que a @talitapagani está sorteando! http://kingo.to/16WS</i></b><br />
<br />
O sorteado deverá me informar seus dados até o dia 11 de junho para que eu possa informar a organização do evento.<br />
<br />
Não precisa me seguir ou seguir o perfil do evento, mas eu sugiro que sigam o perfil do <a href="https://twitter.com/frontincuritiba" target="_blank">@frontincuritiba</a> para saber das últimas novidades ;)<br />
<br />
<a href="https://www.facebook.com/events/415799081763558/" target="_blank">Convidem seus amigos também para o evento e ajudem a divulgar</a> ;)Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-26020154447408288582012-02-14T17:53:00.000-02:002012-02-14T17:53:54.511-02:00Resumão Campus Party 2012 - Melhores MomentosSemana passada estive participando do maior evento de ciência, tecnologia e entretenimento digital. E desta vez eu estava, digamos, cobrindo oficialmente o evento.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLHG5Yjcfm_DHSPVlMHs6dqfDYIF24sAMPIQ63VdmyLviDC7JhRYXrdRilcUm34Ek03J9K3GsMiqMn36LrVYzpffn7xVnt-iapPkAbS4TFaYMF4UmpsblZGStAV5KSGo3B2aF5VWmXcvi/s1600/422150_3301943833908_1427337071_3194194_1236287430_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLHG5Yjcfm_DHSPVlMHs6dqfDYIF24sAMPIQ63VdmyLviDC7JhRYXrdRilcUm34Ek03J9K3GsMiqMn36LrVYzpffn7xVnt-iapPkAbS4TFaYMF4UmpsblZGStAV5KSGo3B2aF5VWmXcvi/s320/422150_3301943833908_1427337071_3194194_1236287430_n.jpg" width="240" /></a></div><br />
Este ano resolvido fazer um único post aqui no blog resumindo todo o evento, mesmo porque eu não levei notebook este ano, apenas o tablet (nunca mais farei isso, notebook faz muita falta), então muitas anotações que fiz das palestras estão apenas no papel.<br />
<br />
Como sempre, o evento foi fantástico, apesar dos contratempos e das inúmeras falhas de organização e segurança que ocorreram neste ano (<a href="http://www.garotascpbr.com.br/2012/02/11/o-que-esta-acontecendo-com-a-cpbr5/" target="_blank">relatei algumas coisas neste post que escrevi no GarotasCPBr</a>). Mas aqui eu vim falar das coisas boas que pude vivenciar durante uma semana em que fiquei imersa <strike>(e literalmente sem ver a luz do sol)</strike> em um mar de conteúdo e tecnologia.<br />
<br />
Este ano não assisti muitas palestras da área de Criatividade como no ano passado, mas participei bastante de atividades na área de Inovação e Entretenimento Digital. Além disso, <a href="http://pinkvader.com/debate-com-as-garotascpbr-pink-vader-e-as-garotas-geeks-na-campus-party-2012/" target="_blank">participei de uma mesa no palco de Jogos</a> junto com a <a href="http://www.twitter.com/cissagatto" target="_blank">Cissa Gatto</a> (nós duas representando as <a href="http://www.garotascpbr.com.br/" target="_blank">GarotasCPBr</a>), Tammy e Babs (<a href="http://www.garotasgeeks.com/" target="_blank">Garotas Geeks</a>) e Laura e Vicky (<a href="http://pinkvader.com/" target="_blank">Pink Vader</a>). Discutimos sobre SOPA, PIPA, leis de direito autoral, pirataria na internet, entre outros assuntos que surgiram no momento. E no mesmo dia estive no Barcamp promovido pela Cissa Gatto representando o blog, que é parceiro do GarotasCPBr.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6uluQAOoM9jJ5KbR6mF7ZnWU1TfIOLQbv2TJAE9aDfavVxmtKtKhyphenhypheneWrOkN4DZ06nv9aGMVUoWWCzScUpA_ByrN3z1ovuLJLgR_yxLf4D7Zavy-iybyl6q_YMd9tK-hlFpLiYfxvPts1R/s1600/419235_2411061410719_1676767497_1587760_159469666_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6uluQAOoM9jJ5KbR6mF7ZnWU1TfIOLQbv2TJAE9aDfavVxmtKtKhyphenhypheneWrOkN4DZ06nv9aGMVUoWWCzScUpA_ByrN3z1ovuLJLgR_yxLf4D7Zavy-iybyl6q_YMd9tK-hlFpLiYfxvPts1R/s400/419235_2411061410719_1676767497_1587760_159469666_n.jpg" width="400" /></a></div><br />
Sobre as palestras neste ano, posso dizer que estavam show! Se ano passado havia conteúdo interessante, este ano havia ainda mais, em todos os palcos. Destaque para a palestra de Terapia Ocupacional com Games, que foi ministrada por um terapeuta ocupacional da empresa <a href="http://bemestarnatal.blogspot.com/" target="_blank">Bem Estar Natal</a>, que mostrou de modo bem esclarecedor como os games auxiliam na reabilitação física e social do paciente quanto às atividades de vida diária (AVD) e atividades de vida prática (AVP). Para quem tem interesse em computação aplicada à saúde, recomendo acompanhar o trabalho dos profissionais desta empresa pelo blog deles, linkado logo acima.<br />
<br />
No palco de Software Livre acompanhei palestras sobre Realidade Aumentada utilizando bibliotecas livres e o projeto OpenKinect, que visa permitir a construção de bibliotecas livres independentes de plataforma para utilizar o Kinect, soluções interessantes para quem trabalha com <i>Natural User Interfaces</i> (NUI).<br />
<br />
Uma das palestras que eu achei mais ricas em termos de conteúdo foi Implementando Agile ALM usando SCRUM e Team Foundation Server. <a href="http://www.slideshare.net/ramonduraes/" target="_blank">Ramon Durães</a> e Waldyr (não me lembro o sobrenome) comentaram sobre a questão de adequar a estratégia para projetos de software de modo que o desenvolvimento possa ser executado e bem documentado de modo ágil para que não prejudique a etapa futura que é a manutenção, mesmo porque o tempo de manutenção é maior do que o tempo de desenvolvimento. Eles explanaram o conceito sobre Agile ALM (Application Lifecycle Management) utilizando o Team Foundation Server para gerenciamento de tarefas e alterações no código fonte, possibilitando vincular uma alteração de linha de código a uma tarefa registrada no TFS de forma que possa ser identificado quem fez a alteração e em qual(is) linha(s). É um registro ágil do dia-a-dia do projeto que gera uma documentação. Eles focaram fortemente na preparação de Testes Unitários utilizando diferentes abordagens como Test Driven Development (TDD) e Behavior Driven Development (BDD), de modo a validar a arquitetura do projeto. O que foi frisado é que o Teste Unitário nada mais é do que a documentação executável do projeto.<br />
<br />
Sobre essas palestras, eu fiz um resumo neste post no GarotasCPBr e outras blogueiras do grupo também realizaram uma cobertura legal sobre estas e outras palestras.<br />
<br />
No palco de Artes Digitais, tive a oportunidade de assistir novamente a uma palestra do Edu Agni, este ano sobre "Design Emocional". Como sempre, conteúdo excelente e causando uma polêmica positiva. Em suma, o design emocional visa tratar não apenas da facilidade de uso e de interação, mas também do desejo das pessoas de usar aquele produto, que pode vir por meio de um apelo visual ou outra característica que traz uma outra sensação no uso (ex.: parece mais legal, mais divertido, mais <i>cool</i>). Ou seja, os produtos estão fugindo do conceito da forma servindo à função, mas sim dando espaço a uma humanização da tecnologia. Agni apresentou uma compilação de conceitos chaves do design emocional baseado na literatura e alguns cases de sucesso da aplicabilidade do conceito no desenvolvimento de websites. Ao final da palestra, tive a oportunidade de finalmente conversar pessoalmente com ele e com o palestrante de outra palestra que aconteceria no mesmo dia e que vou comentar logo mais. Os slides da palestra dele estão <a href="http://www.slideshare.net/edu_agni/design-emocional-11506293" target="_blank">disponíveis aqui</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeE3jN9t8iuDp3QmAVrdHvU_4gdwFi_WaMeW4fM1QraoZCMBNKHZNoF6wSlG8p9f20IU9tb-sJ9pxMHcFP4HJod4N8xLsCalf18Wxp6DJaF3vxP5Kv26hvoLRdNa8n6lT4MgTf4JVvTEm/s1600/100_7172.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeE3jN9t8iuDp3QmAVrdHvU_4gdwFi_WaMeW4fM1QraoZCMBNKHZNoF6wSlG8p9f20IU9tb-sJ9pxMHcFP4HJod4N8xLsCalf18Wxp6DJaF3vxP5Kv26hvoLRdNa8n6lT4MgTf4JVvTEm/s400/100_7172.JPG" width="400" /></a></div><br />
Logo mais à noite assisti à palestra da <a href="http://www.twitter.com/daniguerrato" target="_blank">Dani Guerrato</a> e do <a href="http://www.twitter.com/lesao" target="_blank">Leandro Lima</a> (com que eu havia conversado) sobre Design e Percepção. Achei muito interessante para quem deseja ter uma noção dos conceitos básicos de design sob uma ótica mais prática, com exemplos e aplicabilidade utilizando cases reais. Eles comentaram sobre a questão de Design x Arte e os conceitos utilizados para a percepção visual dos elementos de design, como luz e sombra, gestalt, grid e cores. Ao final, descobri que a Dani é minha colega de <a href="http://www.tableless.com.br/" target="_blank">Tableless</a> :)<br />
<br />
Assisti a algumas palestras na área de Empreendedorismo que foram simplesmente demais, incluindo uma oficina de <i>Design Thinking</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCCcDA8dqLUHM7JtscwY6wuUPGF8lLD8AKHZJaX8Sp9hw_kB7PTYCqxLwk7PjknxpbDRVKHlGZIsbsqlMCwqqXNut3MBO7JcjKwZzugF3QmGwmsZwVIlulT37f6anvr4jU70eqOfOJLe2/s1600/100_7183.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCCcDA8dqLUHM7JtscwY6wuUPGF8lLD8AKHZJaX8Sp9hw_kB7PTYCqxLwk7PjknxpbDRVKHlGZIsbsqlMCwqqXNut3MBO7JcjKwZzugF3QmGwmsZwVIlulT37f6anvr4jU70eqOfOJLe2/s400/100_7183.JPG" width="400" /></a></div><br />
Sobre a participação feminina, as palestras e mesas compostas por mulheres estava simplesmente excelente! No palco de Empreendedorismo assisti a uma mesa de empreendedorismo feminino com a participação de mulheres de peso e uma convidada especial, Martha Gabriel. Elas discutiram sobre o perfil da mulher empreendedora, a forma como cada uma das palestrantes empreendeu e lidou com sucessos e fracassos, além da inevitável diferença entre homens e mulheres, porém, tratada de forma bem mais suave, equilibrada e menos vitimizada, o que eu achei muito bom. Martha Gabriel, inclusive, disparou que homens e mulheres se complementam e que ela não seria o que é se não fosse o apoio de alguns homens, como por exemplo o pai dela. E acrescentou também que a questão da mulher no poder e a mulher submissa já ocorreram em várias épocas da história (isso é verdade). De tempos em tempos há o empoderamento das mulheres.<br />
<br />
Na mesa que eu assisti sobre mulheres e Software Livre, as mulheres adotaram também a mesma postura de evitar comparação com os homens e também evitar a vitimização. A Cissa Gatto que também estava presente, mencionou que devemos parar de medir forças com os homens e nos unirmos. A Eliane, do Libre Office, chamou a atenção para a quebra de estereótipos e a questão de motivar e trazer mais mulheres para a área de Software Livre, de modo a driblar a intimidação a que nós mesmas nos colocamos. O preconceito persiste, claro, mas é legal ver que isto hoje tem menos importância e as mulheres de TI se preocupam em fazer acontecer e não no que os outros estão falando.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiyNhCNQ4sDEEs8ixY2fmGWyhOKKB9SnCtosPoHd8u5ybqYiComXAKZfIvd4tgtzaLSDC8bm5Gb-9XrljQh09iE-mYfz4Hx0cIzD1niZRpkyZQ95JKb6eCBmbaUgzkGoPEP8WbvvbzEVj/s1600/100_7189.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiyNhCNQ4sDEEs8ixY2fmGWyhOKKB9SnCtosPoHd8u5ybqYiComXAKZfIvd4tgtzaLSDC8bm5Gb-9XrljQh09iE-mYfz4Hx0cIzD1niZRpkyZQ95JKb6eCBmbaUgzkGoPEP8WbvvbzEVj/s400/100_7189.JPG" width="400" /></a></div><br />
Mas não fiquei só a trabalho. Tive a oportunidade de "brincar" em um simulador de corridas com 3 monitores que continha mecanismos que simulava todos os movimentos do carro (ao entrar em uma estrada de terra, tive a sensação real que estava dirigindo em uma). Não pude participar do campeonato de Mortal Kombat, mas ano que vem quem sabe ;)<br />
<br />
Também pude conferir de perto o casemod do Homem de Ferro em tamanho real, que ganhou merecidamente como o melhor casemod da Campus Party 2012.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmCoh82qBumpg_2gPEiJ0DzfJkutlsDJ5ES36nnL0URJhrHX5ZChUKiuywKn0V2DI6I696TCA6IfHGwUt2H4m7Y5aOqa3OuKb5oTAO-Pun4lD0eMXfhRwmmqwMWlC2I_FOAAk-urSs1mG/s1600/100_7188.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmCoh82qBumpg_2gPEiJ0DzfJkutlsDJ5ES36nnL0URJhrHX5ZChUKiuywKn0V2DI6I696TCA6IfHGwUt2H4m7Y5aOqa3OuKb5oTAO-Pun4lD0eMXfhRwmmqwMWlC2I_FOAAk-urSs1mG/s400/100_7188.JPG" width="400" /></a></div><br />
E, por fim, um agradecimento especial ao pessoal da Caravana de Bauru que diverte e torna a Campus ainda melhor (dizem que este ano Bauru zerou da Campus Party, rs), aos amigos que pude rever, aos que finalmente pude conhecer além de seus avatares de Twitter e Facebook (Tammy, do Garotas Geeks, Alexsandro Pereira, Edu Agni e muito mais) e também aos novos contatos (pessoal do <a href="http://www.comequepod.com/" target="_blank">Coméquepod</a>, Mauro Pichiliani, do iMasters, Dani Guerrato, Leandro Lima, pessoal da <a href="http://www.revistatag.com.br/" target="_blank">Revista Tag</a> e muitos outros).<br />
<br />
Termino com a foto que eu e a Cissa Gatto tiramos junto com o Cid, do blog <a href="http://www.naosalvo.com.br/" target="_blank">Não Salvo</a>.<br />
<br />
E que venha a Campus Party 2013 (se o mundo não acabar antes).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggohDg2okWPXNCPK2dpL7QIcqVKVoY0VJvhZokviovp603B0Ya4xwk0lw4xxsLe6pt4B4abShE9PTsDeDD3684_Cf-C9SXs-53QHwQ94tlUmws1MyfHmmyvdFPDwyt1asrNdwXFPpNqSje/s1600/431009_2403715707081_1676767497_1585521_1795999342_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggohDg2okWPXNCPK2dpL7QIcqVKVoY0VJvhZokviovp603B0Ya4xwk0lw4xxsLe6pt4B4abShE9PTsDeDD3684_Cf-C9SXs-53QHwQ94tlUmws1MyfHmmyvdFPDwyt1asrNdwXFPpNqSje/s400/431009_2403715707081_1676767497_1585521_1795999342_n.jpg" width="400" /></a></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-15178387897432289692012-01-11T15:00:00.000-02:002012-01-11T15:00:00.852-02:00Ah, se fosse tão mágico calcular o preço de um siteO quanto cobrar por um site é uma questão que perturba não somente os iniciantes. Várias pessoas já me pedirar uma indicação de quanto deveriam cobrar por determinado projeto, mas a verdade é que eu não creio que há uma fórmula exata para isso. Há muitas sugestões, parâmetros e tabelas de referência. A <a href="http://www.adegraf.org.br/" target="_blank">ADEGRAF</a> (Associação de Designers Gráficos do Distrito Federal) possui, em sua <a href="http://www.adegraf.org.br/downloads/Tabela_ADEGRAF_2011-2012%20web.pdf" target="_blank">tabela referencial de valores</a>, uma referência para valores do layout de um site de acordo com a complexidade (baixa, média, alta). Esta complexidade é definida por determinados parâmetros, que eu particularmente achei questionáveis.<br />
<br />
Em um artigo intitulado <a href="http://www.webpagefx.com/How-much-should-web-site-cost.html" target="_blank">"How Much Should a Web Site Cost?"</a>, eles disponibilizam uma calculadora com 8 critérios cujos valores podem ser ajustados por sliders e que oferece um orçamento com a opção do custo mais baixo e mais alto para os serviços adquiridos. Achei legal, mas é muito genérico e não vejo isso funcionando na prática.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZXvUhWcmFg6gfTqpdUFkIzkf9vOoPIsjBQ3X4b4WnKMYnPkvW7MzK97cXM7PatJBN7q0wtNkAg9jmx9DFhj95TdIEtC2JX6V-fOAmdlwFY5KE8yNXwBJFR9HdIDIjdFXQIjVhu3AaP3L/s1600/project-quote-calculator.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZXvUhWcmFg6gfTqpdUFkIzkf9vOoPIsjBQ3X4b4WnKMYnPkvW7MzK97cXM7PatJBN7q0wtNkAg9jmx9DFhj95TdIEtC2JX6V-fOAmdlwFY5KE8yNXwBJFR9HdIDIjdFXQIjVhu3AaP3L/s400/project-quote-calculator.jpg" width="400" /></a></div><br />
O valor de um site na verdade depende de outros parâmetros, mais contextuais do que de serviços. Pode variar de acordo com o poder aquisitivo da região (você não vai querer cobrar em Borá o que uma pessoa cobraria em São Paulo, não é mesmo?), o porte do cliente para o qual você está realizando o trabalho (uma empresa pequena local certamente irá requerer recursos mais simples, mesmo porque tem um orçamento reduzido, ao contrário de uma multinacional), a complexidade do que ele está pretendendo fazer de acordo com uma análise de requisitos feita junto ao cliente/empresa, etc.<br />
<br />
O que eu julgo ser o balanço ideal: tenha um valor de trabalho por hora condizente com o mercado de sua região (mas não nivele por baixo!), faça um orçamento para o cliente com um valor de base (piso) de acordo com uma quantidade média de horas que o projeto pode levar baseado nos requisitos levantados e, na proposta, deixe claro o valor/hora caso exceda esse tempo. Calcular com base no valor por hora, a meu ver, é a forma mais justa para ambos os lados.<br />
<br />
E então, o que acham?Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com3tag:blogger.com,1999:blog-8750028807234207445.post-4237794240930078852012-01-09T15:00:00.001-02:002012-01-09T15:00:00.910-02:00Elementos de interface em PSD para ajudar no seu próximo designÁs vezes já temos todo o conceito de um site a ser desenvolvido, os wireframes, color schemes, tipografia e tudo mais. Mas no momento de fazer o layout propriamente dito, falta um norteamento mais refinado sobre o estilo e o design de elementos da interface.<div><br />
</div><div>Para inspirar-se, ou mesmo utilizar no seu próximo design, o site <a href="http://365psd.com/">365psd.com</a> disponibiliza gratuitamente PSDs de elementos de interface que vão desde botões, controles de formulários até layouts quase completos. A ideia do site é divulgar um PSD por dia.</div><div><br />
</div><div>Há elementos muito úteis como ícones de cartões de créditos, botões de redes sociais, controles do Google Maps e outros elementos com design interessante e que apresentam boas sugestões de experiência de uso.</div><div><br />
</div><div>Confiram alguns dos PSDs disponibilizados no site.</div><div><br />
</div><div><img height="292" src="http://365psd.com/wp-content/uploads/2011/09/cloudy-UI.jpg" width="400" /> </div><div><br />
</div><div><img height="257" src="http://365psd.com/wp-content/uploads/2011/09/calendar_widget_680px.jpg" width="400" /> </div><div><br />
</div><div><img height="300" src="http://365psd.com/wp-content/uploads/2011/06/iphone-feature.png" width="400" /> </div><div><br />
</div><div><img height="176" src="http://365psd.com/wp-content/uploads/2011/01/vcard1.jpg" width="400" /> </div><div><br />
</div><div><img height="257" src="http://365psd.com/wp-content/uploads/2011/12/SimpleUI.jpg" width="400" /> </div><div><br />
</div><div><img height="294" src="http://365psd.com/wp-content/uploads/2010/11/248-big.png" width="400" /> </div><div><br />
</div><div><img height="400" src="http://365psd.com/wp-content/uploads/2011/12/form.jpg" width="375" /> </div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-90914901416575749352012-01-05T15:00:00.001-02:002012-01-05T15:00:03.557-02:00A (falta de) usabilidade presente no cotidianoUtensílios domésticos, portas, tubo de pasta de dente, entre outros. Quantas coisas do nosso cotidiano apresentam, vez ou outra, dificuldade de utilização? Pois é, a usabilidade, termo tão usual para os profissionais de TI, também deve ser levada em conta para os produtos de nosso dia-a-dia.<br />
E foi justamente pensando nesta falta de usabilidade que Michael J. Darnell criou o <a href="http://baddesigns.com/">BadDesigns.com</a>. O site é uma coletânea de exemplos ilustrados de coisas que são difíceis de utilizar por que elas não seguem os princípios de fatores humanos.<br />
Selecionei algumas "pérolas" de má concepção de itens do nosso cotidiano.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">Coisas que não funcionam do jeito que você esperava</span><br />
Portas são minhas inimigas, por isso selecionei em primeiro lugar justamente essa, rs. Creio que muitos já tenham passado por essa situação, de tentar abrir a porta pelo puxado que está saliente, mas descobre que ela tem uma maçaneta pouco evidente. Pelo senso comum, tendemos a abrir a porta pelo puxador, pois na maioria das portas ele também atua como maçaneta. Outro problema relatado neste exemplo é cada uma das portas funciona de uma maneira. A primeira você precisa puxar para abrir e a segunda precisa empurrar! Ou seja, totalmente inconsistente.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="(Two sets of doors)" src="http://www.baddesigns.com/doors2.jpg" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.baddesigns.com/doors.html">http://www.baddesigns.com/doors.html</a></td></tr>
</tbody></table><br />
<span style="font-size: large;">Coisas diferentes que são muito similares</span><br />
Ah, quem nunca teve problemas em encaixar o conector USB do lado certo? Devido a similaridade dos lados do USB, frequentemente erramos ao tentar conectá-lo, mesmo que o fabricante coloque uma indicação de "top" ou o símbolo do USB (que às vezes é difícil de enxergar.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/USB.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/USB.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://baddesigns.com/USB.html">http://baddesigns.com/USB.html</a> </td></tr>
</tbody></table><br />
Se o conector pudesse funcionar de qualquer lado ou se fosse assimétrico como o mini-USB (que eu acho bem intuitivo), este problema poderia ser resolvido.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/mini-usb-2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/mini-usb-2.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mini-USB - <a href="http://baddesigns.com/USB.html">http://baddesigns.com/USB.html</a></td></tr>
</tbody></table><span style="font-size: large;"><br />
</span><br />
<span style="font-size: large;">Coisas que são difíceis de enxergar</span><br />
Eu já tropecei muitas vezes em locais como os da imagem abaixo, tanto em um degrau de desnível, quanto em escadas que apresentam este mesmo problema. Notem que é quase imperceptível este desnível entre o chão e o palco e este aviso não é uma das melhores soluções. O ideal seria colocar uma sinalização neste degrau.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/step.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/step.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://baddesigns.com/step.html">http://baddesigns.com/step.html</a> </td></tr>
</tbody></table><span style="font-size: large;"><br />
</span><br />
<span style="font-size: large;">Coisas que não funcionam bem juntas</span><br />
Um problema recorrente com carregadores de determinados dispositivos é que eles são tão grandes que, em alguns casos, é difícil acertar o encaixe na tomada, principalmente se essa tomada não estiver bem posicionada (há uma tomada em casa junto com interruptores que, toda vez que coloco o carregador do meu tablet, ele apaga ou acende a luz). Na imagem abaixo, não é possível conectar o secador de cabelos porque há um espelho muito próximo da tomada.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/dryer.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/dryer.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://baddesigns.com/plug.html">http://baddesigns.com/plug.html</a> </td></tr>
</tbody></table><span style="font-size: large;"><br />
</span><br />
<span style="font-size: large;">Coisas que ficam no caminho</span><br />
<br />
A imagem abaixo mostra a vista da porta de um prédio para a porta de outro. Várias pessoas andam entre estas duas portas. Quem desenhou este pátio tinha em mente que as passagens deveriam ser em torno de ambos os lados do pátio.<br />
Porém, observe o caminho de terra entre as duas portas. As pessoas têm usado este caminho, passando por cima do muro e atravessando o que costumava ser a grama. Este caminho mostra onde a passagem deveria ser.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/path1.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/path1.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://baddesigns.com/path.html">http://baddesigns.com/path.html</a> </td></tr>
</tbody></table><span style="font-size: large;"><br />
</span><br />
<span style="font-size: large;">Rótulos que parecem botões</span><br />
Um problema com controles de elevadores é que os rótulos na linha de baixo de baixo deste exemplo parecem botões. Então, quando você deseja abrir a porta do elevador, você acidentalmente pressionar o rótulo "Door Open" ao invés do botão ao lado. A linha superior de teclas não parecem ter este problema.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/eleconb.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/eleconb.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://baddesigns.com/elecon.html">http://baddesigns.com/elecon.html</a> </td></tr>
</tbody></table><span style="font-size: large;"><br />
</span><br />
<span style="font-size: large;">Controles com sugestões conflitantes</span><br />
<br />
Você está sentado em frente à TV, e quer abaixar o som. Você pegar o controle remoto, procura pelo o botão com a seta para baixo e aperta-o. O volume da TV fica mais alto! Você apertou o botão de seta para cima em vez do botão de seta para baixo. Por quê?<br />
A letra "V" para o volume é usada para os dois botões de controle de volume. Apesar de os botões serem em forma de setas para cima e para baixo (para aumentar e diminuir o volume, respectivamente), a letra "V" se parece com uma seta para baixo. Quando você está procurando uma seta para baixo, você vê o "V" como uma seta para baixo, e o pressione. Infelizmente, o primeiro "V" que você vê é a seta para cima!<br />
Uma solução seria utilizar o indicativo de "Vol" ao invés de apenas "V".<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://baddesigns.com/remote.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://baddesigns.com/remote.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://baddesigns.com/remote.html">http://baddesigns.com/remote.html</a> </td></tr>
</tbody></table>Confira mais exemplos no <a href="http://baddesigns.com/examples.html" target="_blank">site do BadDesigns</a>.Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-4163537442059032502011-12-05T18:58:00.001-02:002011-12-05T19:00:01.036-02:00FrontIn Londrina acontece neste fim de semana, 10 e 11 de dezembro!<div style="text-align: center;"><img alt="topo" height="100" src="http://frontinlondrina.com.br/emailmkt/images/header.jpg" width="400" /></div><br />
Para quem ainda não sabe, estarei em Londrina neste sábado, 10/12, como palestrante do evento <a href="http://www.frontinlondrina.com.br/" target="_blank">FrontIn Londrina</a>, franquia do evento FrontIn que já ocorreu em Belo Horizonte e Rio de Janeiro.<br />
<br />
O FrontInLondrina será uma oportunidade para desenvolvedores Front-end de Londrina e região buscarem aprimoramento, maior valorização e profissionalização do mercado. Um espaço para a troca de experiências e a interação em benefício de todos nós, desenvolvedores Front-end.<br />
<br />
Você pode se inscrever em todas as palestras pelo preço promocional de R$ 39,90 até esta quarta, 07/12, então corram! Aproveite e faça também um mini-curso por apenas mais R$ 29,00. Haverá emissão de certificado e sorteio de brindes!<br />
<br />
Confiram abaixo a programação:<br />
<br />
<span class="Apple-style-span" style="font-size: large;">Palestras </span><span class="Apple-style-span" style="font-size: large;">(Sábado - 10/dez - 8h-18h)</span><br />
<ul><li>A Nova Semântica do HTML 5 com Elvis Detona (GoNow)</li>
<li>HTML5 Storage API com Jean Nascimento (Desconferência)</li>
<li>Navegabilidade em Dispositivos Móveis com Talita Pagani (Tableless)</li>
<li>Animações com CSS 3 com Felipe Moura (Terra/Desconferência)</li>
<li>Marketing na Web com Paulo Henrique Ferreira (Clickweb)</li>
<li>Fazendo Web Mobile com Clécio Bachini (Soyuz)</li>
</ul><br />
<span class="Apple-style-span" style="font-size: large;">Mini-cursos </span><span class="Apple-style-span" style="font-size: large;">(Domingo - 11/Dez 9h-12h)</span><br />
<ul><li>Criação e Recorte de Layout para Web com Vagner Iancoski e Rennan Martini (ICOMP)</li>
<li>Banco de Dados NoSQL com Jean Nascimento (Desconferência)</li>
<li>Miniblog com PHP e Ajax com Bruno Gonçalves e Thiago Augustus (Clickweb)</li>
<li>Marketing nas Redes Sociais (LA Publicidade)</li>
</ul><div><span class="Apple-style-span" style="font-family: inherit;">Gostou? acompanhe e divulge:<br style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;" /><a href="http://www.facebook.com/event.php?eid=158649760897513" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;">facebook</a><span class="Apple-style-span" style="text-align: left;"> | </span><a href="http://www.twitter.com/frontinlondrina" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;">twitter</a><span class="Apple-style-span" style="text-align: left;"> | </span><a href="http://www.frontinlondrina.com.br/" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-style: none; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left;">site do evento</a></span></div><div><br />
</div><div>Nos vemos lá ;)</div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-4106688983338248192011-09-14T16:00:00.001-03:002011-09-14T16:00:05.799-03:00Assessoria: Talita Pagani na @revistaWIDEA notícia não é nova, mas apenas agora tive acesso ao material. Em novembro de 2010 fui convidada pela <a href="http://www.revistawide.com.br/">Revista WIDE</a>, da <a href="http://www.arteccom.com.br/">Arteccom</a>, a participar da seção Opinião sobre o tema "Todos devem pensar em Usabilidade?". Foi uma ótima experiência poder redigir sobre um assunto interessante para uma revista como a WIDE <strike style="color: #999999;">("merchan" mode on)</strike>.<br />
O meu texto foi publicado na edição de Janeiro/Fevereiro deste ano junto à opinião de profissionais de peso como Fred Van Amstel e Felipe Memória. O <i>feedback </i>de amigos, leitores e seguidores no Twitter foi muito bom também. Mas, entre todos que já haviam lido, eu creio que acabei sendo a última, rs.<br />
Comprei a revista diretamente com a Arteccom, fui super bem atendida, mas os Correios possivelmente extraviaram duas vezes o envio da revista. Uma pena.<br />
Mas eis que minha amiga <a href="http://www.twitter.com/tatidealencar">Tati de Alencar</a> tinha a revista e me emprestou esta semana. Então, disponibilizo abaixo para meus leitores a página da revista com meu texto (clique na imagem para ampliar).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgqDvOUcBU0rHrQZsb4xwZT5L_93KrAy7vaIDY2QeIdrqgom6ja67lv10XoehKv6_o61bsYWGIosL2_TBABhhRuIWkeBq35xz6hlbfUr8xkAUreCztcAT5HKSh26ca6QvOe1bG0L9z_m1/s1600/Imagem+%252835%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgqDvOUcBU0rHrQZsb4xwZT5L_93KrAy7vaIDY2QeIdrqgom6ja67lv10XoehKv6_o61bsYWGIosL2_TBABhhRuIWkeBq35xz6hlbfUr8xkAUreCztcAT5HKSh26ca6QvOe1bG0L9z_m1/s400/Imagem+%252835%2529.jpg" width="291" /></a></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-38286659670766283182011-09-12T10:11:00.000-03:002011-09-12T10:11:14.345-03:0015% de desconto para os leitores do blog na @chicorei, VEM GENTE!<div class="separator" style="clear: both; text-align: center;"><a href="http://chicorei.com/"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEbgiTZ17aIoS3nsqrHWuwJVySTDCd32kcrpsUvMwAs0052AXdyej8G0NJNicv8cr9pKR4WO5m0TlA_UDrL8KutxabjFzaFGiX1CKJOJTAvUirlAdMSpW8lU_5r-x5jnf0e_b4SCvHEAi/s400/600x400.jpg" width="400" /></a></div><br />
<br />
Quer um <b>super desconto de 15%</b> em compras na <a href="http://chicorei.com/">ChicoRei</a> e ainda ajudar a autora deste blog que aqui vos escreve a ganhar um iPad ou XBox 360? Então basta informar o código <b>WDXP</b> em suas compras no site!<br />
<br />
<br />
<span class="Apple-style-span" style="font-size: large;">Afinal, o que é a Chico Rei?</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiGl8Dw97_RAsq6vjK-C3Ljs7uDAgMiyDQ6JWPWm66v5lsSJ38i2V-fQCTFCLVaE1HjoFkPsHojf_nJVfgJTvVxmWUyWKVD8Miqd9lbmuH5vn-wKCFfzCCNAiu0WlAVJ2eZtyk9qWwyZsB/s1600/Logo-Chico-Rei.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiGl8Dw97_RAsq6vjK-C3Ljs7uDAgMiyDQ6JWPWm66v5lsSJ38i2V-fQCTFCLVaE1HjoFkPsHojf_nJVfgJTvVxmWUyWKVD8Miqd9lbmuH5vn-wKCFfzCCNAiu0WlAVJ2eZtyk9qWwyZsB/s1600/Logo-Chico-Rei.png" /></a></div><br />
A Chico Rei é um estúdio de criação que investe em design e moda para fazer camisetas únicas e que permitem uma infinidade de interpretações, mas que têm valor especial para quem veste. Lá você sempre vai encontrar algo que é a sua cara, então fique a vontade.<br />
Quer saber mais sobre a Chico Rei? Você pode encontrá-los passeando pelas redes sociais:<br />
<ul><li><a href="http://www.facebook.com/chicorei">Facebook</a></li>
<li><a href="http://www.twitter.com/chicorei">Twitter</a></li>
<li><a href="http://www.youtube.com/chicomidia">YouTube</a></li>
</ul><div><span class="Apple-style-span" style="font-size: large;">Conheça alguns dos produtos</span></div>O mais legal da ChicoRei que ela apresenta produtos super exclusivos, com estampas divertidas e sacadas inteligentes que vão desde cultura pop até referências geeks/nerds. Enfim, tem para todos os gostos! Veja alguns dos produtos:<br />
<br />
<div class="separator"><br />
</div><img border="0" height="320" src="http://cdnchicorei.com/54-7332-large/darth-vader.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/53-8132-large/bazinga.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/364-8103-large/game-of-thrones.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/68-8090-large/coffee-machine.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/249-8061-large/girl-power.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/252-7938-large/geek-love.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/322-7864-large/nerds-sex-appeal.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/301-7698-large/i-want-my-life-back.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/91-7797-large/vinyl.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/52-7315-large/go-willy.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/288-7577-large/designer.jpg" width="213" style="float: left;" /><br />
<br />
<img border="0" height="320" src="http://cdnchicorei.com/298-7647-large/-geek-s-nightmare.jpg" width="213" style="float: left;" /><br />
<br />
<div style="clear: both;">A penúltima é a minha favorita. <a href="http://chicorei.com">Escolha já a sua</a>!</div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-44431969573597015452011-09-09T18:38:00.000-03:002011-09-09T18:38:05.514-03:009 técnicas para tabelas mais usáveis no HTML<blockquote>Este artigo foi originalmente publicado no site <a href="http://uxmovement.com/">UXMovement</a> em <a href="http://uxmovement.com/content/useful-techniques-for-user-friendly-tables/">9 Useful Techniques for User-Friendly Table</a> e traduzido livremente.</blockquote><br />
Tabelas são excelentes para disponibilizar informações. Mas torná-las mais usáveis é um desafio. Uma das razões pela qual é tão desafiador deve-se ao fato de que a <i>grid </i>de uma tabela limita a quantidade informação que você pode disponibilizar em uma célula. Isto significa que você tem que descobrir como exibir as informações que o usuário precisa sem exibir muitas informações (paradoxo, não?). Além disso, quando os usuários leem tabelas, elas precisam mover os olhos na vertical e na horizontal para fazer a varredura da informação. Se na sua tabela não é fácil de fazer a varredura, os usuários podem facilmente perder o foco de leitura entre as linhas e colunas.<br />
<br />
As seguintes técnicas de design ajudam a solucionar esses desafios para que os usuários possam ler e processar os dados de suas tabelas com facilidade.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">1. Abreviação de Dados</span><br />
<br />
Uma tabela usualmente tem várias colunas, então você não pode fazer com que suas colunas sejam muito extensas. Se fizer isso, você terá uma tabela muito ampla que os usuários terão que rolar horizontalmente para ler. A largura da coluna limita a quantidade de informação que você pode exibir em uma célula da tabela. Este é o lugar onde as abreviações de dados de trabalho de forma brilhante.<br />
<br />
É desnecessário mostrar todos os dígitos de um número. Você pode abreviar grandes números, como $ 104.000 para US$ 104k. Você também pode arredondar números grandes, como 45,139% para 45%. Em determinadas situações, abrevie palavras também, como quilos para kg ou horas para h. Isso economiza espaço nas células para que você possa fazer suas colunas mais compactas e a tabela mais fácil de ler.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/table-data-abbreviations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/table-data-abbreviations.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">2. Tool Tip para Valores Exatos</span><br />
<br />
As abreviação de dados ajuda a condensar as informações. Mas às vezes os usuários precisarão de ver o valor exato de um número, ou o resto de uma palavra truncada. Esta é a situação onde <i>tool tips</i> são úteis. Como os usuários passam o mouse em mais de uma célula, uma <i>tool tip</i> pode exibir o valor exato de um número arredondado, sem ocupar espaço. Eles também podem exibir o texto completo para as células com as palavras truncadas.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/table-tool-tips-exact-values.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/table-tool-tips-exact-values.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">3. Setas para a Exibição de Linhas Ocultas</span><br />
<br />
É importante fazer com que as colunas sejam mais compactar, mas também é importante tornar as linhas curtas. Incluindo informações demais nas linhas da tabela pode tornar a sua tabela demasiadamente longa e desanimadora de ler. Use setas para a exibição de linhas ocultas como forma encurtar a altura de suas linhas e a quantidade de informações exibidas. Os usuários verão primeiro as informações de alto nível em uma linha. Mais informações serão exibidas quando o usuário solicitar clicando na seta desta linha para exibir o conteúdo aninhado.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/table-disclosure-arrows.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/table-disclosure-arrows.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">4. Cabeçalhos Persistentes</span><br />
<br />
Outra coisa ruim sobre tabelas extensas é que você perde os cabeçalhos de coluna quando você realiza a rolagem. É difícil para os usuários saber qual a informação que eles estão lendo sem ver o cabeçalho da coluna. Cabeçalhos persistentes resolvem este problema. Na rolagem, os cabeçalhos persistentes permanecem visível ao usuário para que ele possa consultá-la sem ter que percorrer todo o caminho de volta ao topo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/persistent-column-headers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/persistent-column-headers.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">5. Linhas "Zebradas"</span><br />
<br />
Quando os usuários leem uma determinada linha, seu olhar podem facilmente se perder e, acidentalmente, cair em uma linha adjacente. O usuário precisa de um guia visual para ajudá-los a permanecer na sua linha que ele está lendo. Linhas zebradas ajudam os usuários a guia a forma com a qual eles movem os olhos em cada linha. Cada linha alternada apresenta uma tonalidade diferente para que os usuários não troque a linha que ele está olhando para uma linha adjacente.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/zebra-stripes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/zebra-stripes.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">6. Numere Cada Linha</span><br />
<br />
Você pode tornar sua tabela ainda fácil ler numerando cada linha. Isso permite aos usuários referir-se a uma linha pelo seu número. Ela também ajuda os usuários a verificar as linhas sem perder o seu lugar à medida que progridem na leitura. Linhas numeradas informam aos usuários quantas linhas há na tabela para que eles possam ter uma noção da densidade de informação presente.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/number-each-row.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/number-each-row.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">7. Agrupe Linhas em Categorias</span><br />
<br />
Quanto mais informações você tiver em sua tabela, mais linhas você terá inevitavelmente. Uma outra dica para melhorar essa questão é agrupar as linhas em categorias. As categorias podem inclusive apresentar setas para que os usuários possam mostrar e ocultar linhas para economizar espaço.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/table-row-categories.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/table-row-categories.png" /></a></div><br />
<br />
<span class="Apple-style-span" style="font-size: large;">8. Setas de Ordenação</span><br />
<br />
Setas para exibição de linhas aninhadas permitem aos usuários controlar a quantidade de informação que a tabela exibe. Mas setas de ordenação permitem aos usuários controlar a forma como a tabela classifica e ordena a informação. Use as setas nos cabeçalhos das colunas para que os usuários possa classificar cada coluna por ordem ascendente ou descendente. Isso permite aos usuários ver os dados do número maior para o menor, ou dados de texto por ordem alfabética. As setas devem reordenar uma coluna quando o usuário clica no cabeçalho da coluna (importante: não fazer apenas o ícone clicável, mas toda a coluna).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/invert-column-arrows.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/invert-column-arrows.png" /></a></div><br />
<br />
<span class="Apple-style-span" style="font-size: large;">9. Acessibilidade</span><br />
<br />
<br />
A maioria das tabelas são difíceis para os usuários lerem. Mas elas são ainda mais difícil para os usuários com deficiência se elas não forem acessíveis a leitores de tela. Quando você torna suas tabelas acessíveis, os usuários com deficiência poderão ler as informações da tabela em uma ordem adequada e compreensível.<br />
<br />
Para isso, comece adicionando o atributo <i>summary </i>e a tag <i>caption</i>. Estes elementos fornecem aos usuários uma visão geral do conteúdo da tabela. O atributo <i>summary </i>provê uma ampla descrição da tabela, e a tag <i>caption </i>provê o título da tabela. Eles devem ser a primeira informação a ser inserida logo depois da tag <i>table</i>.<br />
<br />
Indique os cabeçalhos de linha e coluna usando determinadas tags e também de células de dados usando tags apropriadas. Depois disso, você vai precisar para associar as células com os cabeçalhos correspondentes. Use o atributo <i>scope </i>para isso. O atributo <i>scope</i> diz o leitor de tela que tudo sob uma coluna se relaciona com o cabeçalho no topo, e tudo à direita de um cabeçalho de linha se relaciona com esse cabeçalho.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://uxmovement.com/wp-content/uploads/2011/07/table-accessibility-code.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://uxmovement.com/wp-content/uploads/2011/07/table-accessibility-code.png" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">Conclusões</span><br />
<br />
Há muitos desafios envolvendo o design de tabelas. As técnicas apresentadas são tudo que você precisa para tornar suas tabelas mais usáveis e fáceis de ler. Quando os usuários são capazes de usar sua tabela e obter a informação que necessitam sem aborrecimentos, isso torna-as mais produtivas e eficientes. E é exatamente isso que um bom design deve possibilitar.Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-23849027446685663712011-09-07T14:25:00.000-03:002011-09-07T14:25:07.633-03:00Minicurso de prototipação em papel na Jornada de Informática da UNESP-Bauru<div class="separator" style="clear: both; text-align: center;"><a href="http://www2.fc.unesp.br/jornada_informatica/logo_jornada.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www2.fc.unesp.br/jornada_informatica/logo_jornada.png" /></a></div>A Faculdade de Ciências da Unesp, campus de Bauru, por meio do Departamento de Computação, promoverá a <a href="http://www2.fc.unesp.br/jornada_informatica/">XII Jornada de Informática</a>. O evento será realizado entre nos dias 21, 22, 23 de setembro na FunDeB (Fundação para o Desenvolvimento de Bauru) e no LEPEC (Laboratório de Ensino, Pesquisa e Extensão em Computação) situados no campus da Unesp de Bauru.<br />
<br />
O objetivo da jornada é apresentar por meio de palestras e minicursos novas técnicas e metodologias desenvolvidas atualmente proporcionando a todos contato com novas tecnologias e a integração com o mercado de trabalho.<br />
<br />
Eu estarei participando da Jornada juntamente com a <a href="http://www.twitter.com/liviagabos">Livia Gabos</a> ministrando um minicurso de prototipação em papel no dia 23/09 das 19h às 22h40.<br />
<br />
Entre os demais destaques da programação, haverá palestras e minicursos com a <a href="http://www.twitter.com/cissagatto">Cissa Gatto</a> (<a href="http://www.garotascpbr.com.br/">GarotasCPBr</a>), Junia Anacleto (minha orientadora de mestrado da UFSCar), <a href="http://www.twitter.com/brunopenteado">Bruno Penteado</a> (MSTech), <a href="http://www.twitter.com/malegretti">Maurício Alegretti</a> e outros.<br />
<br />
Fique atento à abertura das inscrições e participem ;)Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-36997065670661020152011-09-05T16:46:00.000-03:002011-09-05T16:46:57.990-03:00Tutorial de HTML5No dia 01/09 eu ministrei um minicurso prático de HTML5 na <a href="http://wdxp.blogspot.com/2011/08/1-jeau-jornada-das-engenharias.html">1ª JEAUSC - Jornada das Engenharias-Arquitetura-Urbanismo da USC</a>. A atividade prática, ao final do minicurso, abordava os conceitos de Local Storage, Drag and Drop e formulários. Confira abaixo os slides da atividade e baixe os materiais:<br />
<br />
<a href="http://www.talitapagani.com/material/todo/index.html">Visualizar o Live Demo</a> | <a href="http://www.talitapagani.com/material/todo/todolist-template.zip">Baixar o template para fazer a atividade</a><br />
<br />
<div id="__ss_9130073" style="width: 510px;"><strong style="display: block; margin: 12px 0 4px;"><a href="http://www.slideshare.net/talitapagani/html5-hands-on-9130073" target="_blank" title="HTML5 Hands On">HTML5 Hands On</a></strong> <object height="426" id="__sse9130073" width="510"> <param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=html5handson2-110904153518-phpapp02&rel=0&stripped_title=html5-hands-on-9130073&userName=talitapagani" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse9130073" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=html5handson2-110904153518-phpapp02&rel=0&stripped_title=html5-hands-on-9130073&userName=talitapagani" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="510" height="426"></embed> </object> <br />
<div style="padding: 5px 0 12px;">View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/talitapagani" target="_blank">Talita Pagani</a> </div></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-74418631300696849242011-08-29T15:00:00.000-03:002011-08-29T15:00:04.378-03:00Kinect e Natural User Interfaces - Trilha .NET - TDC 2011O <a href="http://www.twitter.com/malegretti">Maurício Alegretti</a> é Microsoft Xbox Most Valuable Professional (MVP), consultor de arquitetura de sistemas com mais de 15 anos de experiência e empresário nas áreas de desenvolvimento de software. Ele ministra regularmente palestras em eventos técnicos e de comunidade sobre Kinect, Natural User Interface, Xbox e Windows Phone 7 no mercado brasileiro, tanto que nestes últimos meses já passou por Bauru, São Paulo (<a href="http://www.thedevelopersconference.com.br/">TDC2011</a>) e volta a Bauru agora em setembro para uma palestra na Jornada de Informática da Unesp, onde também darei um minicurso (info em breve) e terei a oportunidade de conhecê-lo pessoalmente.<br />
Para quem quiser conhecer um pouco sobre os tópicos que ele aborda em suas palestras, confira abaixo o vídeo da palestra que ele fez no <a href="http://www.thedevelopersconference.com.br/">TDC2011</a>, disponibilizada pela <a href="http://www.gonow.com.br/">GoNow</a>.<br />
<br />
<div style="text-align: center;"><iframe allowfullscreen="" frameborder="0" height="295" src="http://www.youtube.com/embed/TENSqMfU0l4?fs=1" width="480"></iframe></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-11999407149131341912011-08-26T15:00:00.006-03:002011-08-26T15:00:02.451-03:001ª JEAU - Jornada das Engenharias-Arquitetura-Urbanismo da USC<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFJcC2WQq1QRBBOWCaQxfR10f9I2iyserlzPWxeYV9DZwxe8nSe6ujWFMjks-7jFpdKbP0JDWE1dJdIZOgRYOUxh75ZNzkS_buAa3Si9abM7RO3mvKn-zGKVqC0lJEDMyQx6eKMNSnXOw/s1600/281475_128180980609127_104175753009650_178307_6893871_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFJcC2WQq1QRBBOWCaQxfR10f9I2iyserlzPWxeYV9DZwxe8nSe6ujWFMjks-7jFpdKbP0JDWE1dJdIZOgRYOUxh75ZNzkS_buAa3Si9abM7RO3mvKn-zGKVqC0lJEDMyQx6eKMNSnXOw/s400/281475_128180980609127_104175753009650_178307_6893871_n.jpg" width="400" /></a></div><br />
<br />
A Universidade Sagrado Coração (USC-Bauru) realiza do dia 01 a 03 de Setembro a <a href="http://www.facebook.com/event.php?eid=204360032953252">1ª JEAU - Jornada das Engenharias-Arquitetura-Urbanismo</a>, com palestras e minicursos voltadas para as seguintes áreas de formação:<br />
<ul><li>Arquitetura e Urbanismo</li>
<li>Engenharia Ambiental</li>
<li>Engenharia Agronômica</li>
<li>Engenharia Civil</li>
<li>Engenharia de Computação</li>
<li>Engenharia de Produção</li>
<li>Engenharia Química</li>
</ul><div>A <a href="http://www.twitter.com/cissagatto">Elaine Cecília Gatto</a>, coordenadora do curso de Engenharia da Computação da USC, líder do grupo GarotasCPBr e minha amiga é uma das organizadoras do evento.</div><div><br />
</div><div>Eu participarei do JEAU ministrando um minicurso prático de HTML5 quinta-feira, dia 01/09/2011, das 14:00 às 18:00. VEM GENTE!</div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-56249200122197958242011-08-24T15:00:00.002-03:002011-08-24T15:00:02.335-03:00Apresentação: Construindo Layout de Sites com CSS<div id="__ss_6329338" style="width: 425px;"><iframe frameborder="0" height="425" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/6329338" width="510"></iframe> </div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-72598755211725545252011-08-22T15:00:00.003-03:002011-08-22T15:18:04.570-03:00Apresentação: HTML5 e as novas tecnologias de desenvolvimento web<div style="width:510px" id="__ss_8043016"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/talitapagani/html5-e-as-novas-tecnologias-de-desenvolvimento-web" title="HTML5 e as novas tecnologias de desenvolvimento web" target="_blank">HTML5 e as novas tecnologias de desenvolvimento web</a></strong> <object id="__sse8043016" width="510" height="426"> <param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=html52-110520120123-phpapp01&stripped_title=html5-e-as-novas-tecnologias-de-desenvolvimento-web&userName=talitapagani" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse8043016" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=html52-110520120123-phpapp01&stripped_title=html5-e-as-novas-tecnologias-de-desenvolvimento-web&userName=talitapagani" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="510" height="426"></embed> </object> <div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/talitapagani" target="_blank">Talita Pagani</a> </div></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-47690715505825070012011-08-19T15:00:00.011-03:002011-08-19T15:00:00.518-03:00O que é IHC? - parte IIINas partes I e II, foram delineadas as definições, princípios e critérios da IHC. A identificação destes critérios deve ser realizada nas etapas de modelagem da interface, que veremos nesta última parte da série.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">Modelagem de IHC</span><br />
<br />
A modelagem de IHC compreende os processos para o projeto das interfaces, visando especificar os requisitos e descrever a interface através de um protótipo (OLIVEIRA NETTO, 2004).<br />
<span class="Apple-style-span" style="font-weight: bold;"><br />
</span><br />
<span class="Apple-style-span" style="font-weight: bold;">Modelo de Tarefa</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQmL57dPs59KS8ndqSazdicUmCOGHnBJAzzw_ITDW5J9xjvXaIyuv4qIKMAyw3ZP9KE5Gym8tmYgP9rOCWrd1Zd0EPfyepCIo24PNjTIlGmmODmp_iGyQ2p-Gvm1C0aoJZo_atcYrGfi8/s1600/usability-audit-1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQmL57dPs59KS8ndqSazdicUmCOGHnBJAzzw_ITDW5J9xjvXaIyuv4qIKMAyw3ZP9KE5Gym8tmYgP9rOCWrd1Zd0EPfyepCIo24PNjTIlGmmODmp_iGyQ2p-Gvm1C0aoJZo_atcYrGfi8/s400/usability-audit-1.jpg" width="397" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fonte: http://www.foviance.com/what-we-do/usability-services/usability/</td></tr>
</tbody></table>O modelo de tarefa propõe-se a formalizar e mapear as tarefas na interface a serem realizadas pelos usuários de acordo com a visão deles (OLIVEIRA NETTO, 2004). Este mapeamento geralmente envolve:<br />
<br />
<div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"></div><ul><li>A identificação das metas do usuário no sistema;</li>
<li>A identificação da sequência de passos para atingir a metas;</li>
<li>As eventuais condições que definem qual passo deve ser seguido.</li>
</ul><span class="Apple-style-span" style="font-weight: bold;">Modelo de Interação</span><br />
<div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">O modelo de interação confere a sequência da modelagem de tarefa. Enquanto o modelo de tarefa mapeia das atividades que os usuários realizarão no sistema, o modelo de interação define como a condução para a realização destas tarefas deve ser projetada na interface para permitir que seja eficiente e de fácil utilização. Nesta etapa, é necessário compreender qual o design apropriado para atender as necessidades do usuário na utilização do sistema (PREECE; ROGERS; SHARP, 2002).</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">Os modelos de interação focam no design da interface de sistemas interativos e como eles irão responder e se comunicar reciprocamente com o usuário, de modo a permitir que ele realize as tarefas de modo fácil, intuitivo e eficiente.</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;">Modelo de Conteúdo</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">O modelo de conteúdo refere-se ao modo como os fragmentos de conteúdo presentes na interface estarão organizados e interconectados de modo coeso e lógico. Ele deve fazer com que a arquitetura de informação aplicada a cada um destes fragmentos gere uma unidade de informações que, em conjunto, formem o contexto da interface (MORVILLE; ROSENFELD, 2007).</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">A grande quantidade de conteúdo em uma interface pode ser facilmente acumulada, porém, vincular este conteúdo de modo útil é extremamente difícil. Portanto, os modelos de conteúdo compreendem conjuntos consistentes de objetos e a conexão lógica que há entre eles para que possam funcionar (MORVILLE; ROSENFELD, 2007).<o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">Isto envolve definir como as informações serão apresentadas, qual a quantidade e os tipos de recursos de hipermídia necessários e como ela conduz a navegação para outras páginas e conteúdos.<o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">A intenção é fazer com que todo conteúdo importante seja fácil de encontrar e possa estar visivelmente relacionado a outros conteúdos da aplicação permitindo ao usuário uma fluidez na navegação e no percurso entre as páginas.</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;">Modelo de Interface</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="Apple-style-span" style="font-weight: bold;"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">O modelo de interface consiste na representação gráfica dos componentes de interface, suas telas e seu modelo de navegação. Envolve também a prototipagem rápida das janelas e diálogos da interface (CYBIS; BETIOL; FAUST, 2007). A intenção da modelagem de interface é esboçar os principais componentes gráficos necessários para orientar o usuário na realização de suas tarefas e comunicar a mensagem do sistema ao usuário.</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-size: large;">Referências</span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">AGNER, L. <b>Ergodesign e arquitetura de informação: </b>trabalhando com o usuário. <span lang="EN-US">Rio de Janeiro: Quartet, 2006. 176 p.</span><o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">CYBIS, W.; BETIOL, A. H.; FAUST, R. <b>Ergonomia e Usabilidade: </b>Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.<o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="SemEspaamentoChar"><span lang="EN-US">HEWETT, T., et al. ACM SIGCHI Curricula for Human-Computer Interaction, [S.l.], 1992. </span></span><span class="SemEspaamentoChar"><b>Chapter 2: Human-Computer Interaction</b></span><span class="SemEspaamentoChar">, Disponível em: <a href="http://old.sigchi.org/cdg/cdg2.html">http://old.sigchi.org/cdg/cdg2.html</a><o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="SemEspaamentoChar"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">HITOSHI. Departamento de Ciência da Computação da Universidade de São Paulo. [S.l.], 2005. <b>Princípios da Interação Humano-Computador</b>. Disponível em: <a href="http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf">http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf</a></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">MORVILLE, P.; ROSENFELD, L. <b>Information Architecture for the World Wide Web</b>. </span><span lang="ES-TRAD">3. ed. Sebastopol, California: O’Reilly Media, 2007. 504p.<o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="ES-TRAD"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="ES-TRAD">NIELSEN, J. UseIt. [S.l.], 2005. <b>Ten Usability Heuristics</b>. Disponível em: <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">http://www.useit.com/papers/heuristic/heuristic_list.html</a></span><o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="ES-TRAD"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">NIELSEN, J.; LORANGER, H. <b>Usabilidade na Web: </b>Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.<o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">OLIVEIRA NETTO, A. A. <b>IHC – Interação Humano Computador:</b> Modelagem e Gerência de Interfaces com o Usuário. <span lang="EN-US">Florianópolis: VisualBooks, 2004. 120p.<o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">PREECE, J.; ROGERS; Y.; SHARP, H. <b>Interaction Design: </b>Beyond Human-Computer Interaction. New York: John Wiley & Sons, Inc., 2002. 551p.<o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">ROCHA, H. R.; BARANAUSKAS, M. C. C. <b>Design e Avaliação de Interfaces Humano-Computador</b>. Campinas: Universidade Estadual de Campinas, 2007.</div></div><br />
<div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-80839916249832816682011-08-17T15:00:00.000-03:002011-08-17T15:00:06.065-03:00O que é IHC? - parte IINa primeira parte desta série de artigos, abordei as definições da Interação Humano-Computador. Neste artigo, apresento um pouco mais sobre os princípios da IHC.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">Princípios da Interação Humano-Computador</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwc6I8_NP-gTl5onUEryiMo8zYNgcnCEAiqr-zEVPE6F9KqBQ9Wy1Yuasc5k73TgnMaP8ND6ylCF9j7bBfDMGxvcIqbu0hsy23BzW1zo1qRcd9vRPGCgD96GHz1mfSA88JG6mI47P3r9Ra/s1600/codigo+de+barras.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwc6I8_NP-gTl5onUEryiMo8zYNgcnCEAiqr-zEVPE6F9KqBQ9Wy1Yuasc5k73TgnMaP8ND6ylCF9j7bBfDMGxvcIqbu0hsy23BzW1zo1qRcd9vRPGCgD96GHz1mfSA88JG6mI47P3r9Ra/s400/codigo+de+barras.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fonte: http://taylandiaalmeida.blogspot.com/</td></tr>
</tbody></table>Os princípios de IHC focam principalmente na facilidade de uso dos sistemas computacionais interativos. A diversidade destes princípios definidos por Nielsen e Loranger (2007), Nielsen (2005) e Cybis, Betiol e Faust (2007) podem ser resumidas nos seguintes critérios estabelecidos pela ISO 9241 (HITOSHI, 2005), que, não coincidentemente, são os mesmos da usabilidade:<br />
<div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"></div><ul><li><b style="mso-bidi-font-weight: normal;">Facilidade de aprendizado:</b> a utilização requer pouco treinamento;</li>
<li><b style="mso-bidi-font-weight: normal;">Fácil de memorizar:</b> o usuário deve lembrar como utilizar a interface depois de algum tempo;</li>
<li><b style="mso-bidi-font-weight: normal;">Maximizar a produtividade:</b> a interface deve permitir que o usuário realize a tarefa de forma rápida e eficiente;</li>
<li><b style="mso-bidi-font-weight: normal;">Minimizar a taxa de erros:</b> caso aconteçam erros, a interface deve avisar o usuário e permitir a correção de modo fácil;</li>
<li><b style="mso-bidi-font-weight: normal;">Maximizar a satisfação do usuário:</b> a interface deve dar-lhe confiança e segurança.</li>
</ul><o:p></o:p><br />
<div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; text-indent: 0cm;">Com a diversidade existentes de usuários, é necessário que a interface possam abordar estes critérios de modo individualizado segundo o perfil de cada utilizador, pois determinados fatores podem ser mais críticos para um grupo específico de usuários de um sistema interativo. A identificação destes critérios deve ser realizada nas etapas de modelagem da interface.<span style="color: black; font-family: "Times New Roman","serif"; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: PT-BR;"><o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><o:p></o:p></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-size: large;">Referências</span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">AGNER, L. <b>Ergodesign e arquitetura de informação: </b>trabalhando com o usuário. <span lang="EN-US">Rio de Janeiro: Quartet, 2006. 176 p.</span><o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">CYBIS, W.; BETIOL, A. H.; FAUST, R. <b>Ergonomia e Usabilidade: </b>Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.<o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="SemEspaamentoChar"><span lang="EN-US">HEWETT, T., et al. ACM SIGCHI Curricula for Human-Computer Interaction, [S.l.], 1992. </span></span><span class="SemEspaamentoChar"><b>Chapter 2: Human-Computer Interaction</b></span><span class="SemEspaamentoChar">, Disponível em: <a href="http://old.sigchi.org/cdg/cdg2.html">http://old.sigchi.org/cdg/cdg2.html</a><o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="SemEspaamentoChar"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">HITOSHI. Departamento de Ciência da Computação da Universidade de São Paulo. [S.l.], 2005. <b>Princípios da Interação Humano-Computador</b>. Disponível em: <a href="http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf">http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf</a></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">MORVILLE, P.; ROSENFELD, L. <b>Information Architecture for the World Wide Web</b>. </span><span lang="ES-TRAD">3. ed. Sebastopol, California: O’Reilly Media, 2007. 504p.<o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="ES-TRAD"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="ES-TRAD">NIELSEN, J. UseIt. [S.l.], 2005. <b>Ten Usability Heuristics</b>. Disponível em: <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">http://www.useit.com/papers/heuristic/heuristic_list.html</a></span><o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="ES-TRAD"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">NIELSEN, J.; LORANGER, H. <b>Usabilidade na Web: </b>Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.<o:p></o:p></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">OLIVEIRA NETTO, A. A. <b>IHC – Interação Humano Computador:</b> Modelagem e Gerência de Interfaces com o Usuário. <span lang="EN-US">Florianópolis: VisualBooks, 2004. 120p.<o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">PREECE, J.; ROGERS; Y.; SHARP, H. <b>Interaction Design: </b>Beyond Human-Computer Interaction. New York: John Wiley & Sons, Inc., 2002. 551p.<o:p></o:p></span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">ROCHA, H. R.; BARANAUSKAS, M. C. C. <b>Design e Avaliação de Interfaces Humano-Computador</b>. Campinas: Universidade Estadual de Campinas, 2007.</div></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-86252971487273589082011-08-15T15:00:00.014-03:002011-08-15T15:00:02.467-03:00O que é IHC? - parte IA Interação Humano-Computador (IHC) é uma disciplina que diz respeito ao design, avaliação e implementação de sistemas de computação interativos para uso humano em um contexto social e com os estudos dos principais fenômenos que os cercam (<span class="SemEspaamentoChar">HEWETT et al</span>, 1992).<br />
<div class="MsoNormal"><o:p></o:p></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">A IHC atualmente é uma ciência multidisciplinar, que engloba diversas áreas como: Ciência da Computação, Psicologia Cognitiva, Psicologia Organizacional e Social, Ergonomia e Fatores Humanos, Engenharia, Design, Antropologia, Sociologia, Filosofia, Linguística e Inteligência Artificial (PREECE, 1994 <i>apud </i>OLIVEIRA NETTO, 2004). O conjunto de todas estas áreas visa apoiar de forma sistemática diversas etapas e procedimentos das metodologias de Interação Humano-Computador, uma vez que esta é uma área que trabalha tanto com aspectos de competência da ciências exatas (os sistemas computacionais) quanto com os aspectos físicos, psicológicos e comportamentais dos indivíduos, considerando também o contexto social em que um determinado sistema se insere para seus usuários.</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhVRv0JMMRERjk1dnxsjEHVPopy3jHqI85GeHoTlOwEdVPR_lYBGTKUeySm0SkwrcDaCTS3la0TjvmtwZ4ZqCLwe86NB_Qnyk7m-hZhAFO6kg9U8Eaq3NxbSiR67-Cwjn1xRn9Aj1YDTU/s1600/39-middle.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhVRv0JMMRERjk1dnxsjEHVPopy3jHqI85GeHoTlOwEdVPR_lYBGTKUeySm0SkwrcDaCTS3la0TjvmtwZ4ZqCLwe86NB_Qnyk7m-hZhAFO6kg9U8Eaq3NxbSiR67-Cwjn1xRn9Aj1YDTU/s400/39-middle.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fonte: http://www.deepamehta.de/docs/hci.html</td></tr>
</tbody></table>O principal objetivo da IHC é estudar e definir métodos para o projeto de sistemas ou dispositivos que sejam de fácil utilização, eficientes, eficazes e que possibilitem conforto aos indivíduos que irão utilizá-los. Ela visa compreender como e porque uma pessoa utiliza determinada tecnologia (AGNER, 2006), considerando fatores culturais, cognitivos, emocionais, sensoriais e intelectuais (CYBIS; BETIOL; FAUST, 2007).</div><div class="MsoNormal"><o:p></o:p></div><div class="MsoNormal">O estudo da IHC ainda envolve quais os impactos de uma determinada tecnologia na vida das pessoas e como a interação deve ser abordada para oferecer conforto, bem-estar e facilidade de uso (PREECE; ROGERS; SHARP, 2002).<o:p></o:p></div><div class="MsoNormal">Portanto, um dos princípios da IHC é tratar como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário. Além disso, Rocha e Baranauskas (2007) apontam como meta da IHC o desenvolvimento e aprimoramento de sistemas computacionais nos aspectos de segurança, usabilidade, efetividade e utilidade.<o:p></o:p></div><div class="MsoNormal">Pode-se considerar que o enfoque da IHC se concentra em três principais aspectos (OLIVEIRA NETTO, 2004; CYBIS; BETIOL; FAUST, 2007; PREECE; ROGERS; SHARP, 2002; ROCHA; BARANAUSKAS, 2007):<br />
<br />
<ul><li><b style="mso-bidi-font-weight: normal;">Usabilidade:</b> os fatores que tornam um produto de fácil utilização, sendo a característica que mensura o grau de satisfação de um usuário ao interagir com uma interface humano-computador;</li>
<li><b style="mso-bidi-font-weight: normal;">Critérios Ergonômicos de interface:</b> fatores humanos aplicados à interface humano-computador, sendo o ajuste ao suporte físico do usuário. Abrange o conforto físico e psicológico dos suportes interativos e caracteriza-se por adequar as tarefas à necessidade do homem, de modo a trazer conforto e segurança em uma interação agradável;</li>
<li><b style="mso-bidi-font-weight: normal;">Design de Interação:</b> aprofunda o conceito da facilidade de uso e ergonomia de interfaces, com foco em prover uma experiência agradável e de fácil aprendizado considerando onde e por quem a tecnologia será utilizada. O objetivo principal no projeto de interfaces é permitir que o usuário realize as tarefas de maneira fácil e que a interface responda de modo esperado dentro da expectativa do usuário.</li>
</ul></div><div class="MsoNormal" style="margin-left: 92.7pt; mso-list: l0 level1 lfo1; text-indent: -18.0pt;"><o:p></o:p></div><span style="font-size: 12pt; line-height: 200%;"><span class="Apple-style-span" style="font-family: inherit;">A intersecção destas três abordagens compõe os principais paradigmas de IHC da atualidade.</span></span><br />
<span class="Apple-style-span" style="font-size: 16px; line-height: 32px;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: large;">Referências</span><br />
<br />
<div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">AGNER, L. <b style="mso-bidi-font-weight: normal;">Ergodesign e arquitetura de informação: </b>trabalhando com o usuário. <span lang="EN-US">Rio de Janeiro: Quartet, 2006. 176 p.</span><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="EN-US"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">CYBIS, W.; BETIOL, A. H.; FAUST, R. <b style="mso-bidi-font-weight: normal;">Ergonomia e Usabilidade: </b>Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.<o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="SemEspaamentoChar"><span lang="EN-US">HEWETT, T., et al. ACM SIGCHI Curricula for Human-Computer Interaction, [S.l.], 1992. </span></span><span class="SemEspaamentoChar"><b style="mso-bidi-font-weight: normal;">Chapter 2: Human-Computer Interaction</b></span><span class="SemEspaamentoChar">, Disponível em: <a href="http://old.sigchi.org/cdg/cdg2.html">http://old.sigchi.org/cdg/cdg2.html</a><o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span class="SemEspaamentoChar"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">HITOSHI. Departamento de Ciência da Computação da Universidade de São Paulo. [S.l.], 2005. <b style="mso-bidi-font-weight: normal;">Princípios da Interação Humano-Computador</b>. Disponível em: <a href="http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf">http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf</a></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="EN-US">MORVILLE, P.; ROSENFELD, L. <b style="mso-bidi-font-weight: normal;">Information Architecture for the World Wide Web</b>. </span><span lang="ES-TRAD">3. ed. Sebastopol, California: O’Reilly Media, 2007. 504p.<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="ES-TRAD"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="ES-TRAD">NIELSEN, J. UseIt. [S.l.], 2005. <b style="mso-bidi-font-weight: normal;">Ten Usability Heuristics</b>. Disponível em: <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">http://www.useit.com/papers/heuristic/heuristic_list.html</a></span><o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="ES-TRAD"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">NIELSEN, J.; LORANGER, H. <b style="mso-bidi-font-weight: normal;">Usabilidade na Web: </b>Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.<o:p></o:p></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><br />
</div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">OLIVEIRA NETTO, A. A. <b style="mso-bidi-font-weight: normal;">IHC – Interação Humano Computador:</b> Modelagem e Gerência de Interfaces com o Usuário. <span lang="EN-US">Florianópolis: VisualBooks, 2004. 120p.<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="EN-US"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="EN-US">PREECE, J.; ROGERS; Y.; SHARP, H. <b style="mso-bidi-font-weight: normal;">Interaction Design: </b>Beyond Human-Computer Interaction. New York: John Wiley & Sons, Inc., 2002. 551p.<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;"><span lang="EN-US"><br />
</span></div><div class="MsoNormal" style="line-height: normal; text-indent: 0cm;">ROCHA, H. R.; BARANAUSKAS, M. C. C. <b style="mso-bidi-font-weight: normal;">Design e Avaliação de Interfaces Humano-Computador</b>. Campinas: Universidade Estadual de Campinas, 2007.<o:p></o:p></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com2tag:blogger.com,1999:blog-8750028807234207445.post-64890248451099317622011-08-11T15:00:00.003-03:002011-08-11T15:00:08.855-03:00Livros sobre Design de Interfaces WebFrequentemente alguém me pede dicas de livros sobre Design de Interfaces e eu, que tenho/leio vários, nunca consigo listar de imediato, sempre me pegam de surpresa. Por isso, resolvi vascular com calma a minha "mini biblioteca pessoal" (bom, a maioria dos livros deste post estão lá) e indicar boas opções de livros sobre design de interface e usabilidade, desde o básico até o avançado.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://i.s8.com.br/images/books/cover/img1/130471_4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://i.s8.com.br/images/books/cover/img1/130471_4.jpg" width="150" /></a></div><span class="Apple-style-span" style="font-size: large;">Design para Quem Não é Designer</span><br />
<b>Robin Williams, 2005, Editora Callis</b><br />
<b><br />
</b><br />
Review do Submarino:<br />
<blockquote><span class="Apple-style-span" style="background-color: white; color: #666666; font-family: arial, verdana, freesans, garuda, helvetica, sans-serif; font-size: 11px;">O livro introduz ao design e a diagramação, através dos 4 princípios básicos do design: proximidade, alinhamento, repetição e contraste. Usando exemplos de "antes" e "depois", estimula o leitor a fazer suas próprias experiências. Traz também o básico sobre: tipologia, serifa, estilo, peso, tamanho.</span></blockquote><br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://i.s8.com.br/images/books/cover/img8/21418058_4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://i.s8.com.br/images/books/cover/img8/21418058_4.jpg" width="200" /></a></div><span class="Apple-style-span" style="font-size: large;">Não Me Faça Pensar</span><br />
<b>Steve Krug, 2007 (2ª Edição), Editora Alta Books</b><br />
<br />
Uma leitura muio agradável e divertida para quem deseja conhecer a usabilidade, contendo diversos exemplos práticos de como abordar a usabilidade em seus projetos. A segunda edição também aborda a questão da acessibilidade e algumas "receitas de bolo" para lidar com os caprichos do chefe que podem acabar prejudicando a usabilidade.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://i.s8.com.br/images/books/cover/img6/1073596_4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://i.s8.com.br/images/books/cover/img6/1073596_4.jpg" width="200" /></a></div><span class="Apple-style-span" style="font-size: large;">Design para a Internet: Projetando a Experiência Perfeita</span><br />
<b>Felipe Memória, 2005, Editora Campus/Elsevier</b><br />
<br />
Um excelente livro do designer Felipe Memória que vai desde a arquitetura de informação até alguns princípios do design de interação, passando por padrões de interface e formatação de conteúdo. O livro contém estudos de casos da BBC, Ideo e, principalmente, da Globo.com, onde ele trabalhava na época.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.univercidade.br/iav/img/profs/agner_capalivro.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.univercidade.br/iav/img/profs/agner_capalivro.jpg" /></a></div><span class="Apple-style-span" style="font-size: large;">Ergodesign e Arquitetura de Informação: Trabalhando com o Usuário</span><br />
<b>Luiz Agner, 2006, Editora Quartet</b><br />
<br />
Este livro é uma coletânea de artigos acadêmicos do Luiz Agner sobre arquitetura de informação, design de interface e usabilidade. Apresenta um conteúdo excelente e leitura agradável que não fica redundante acerca de um único assunto, por tratar de várias questões referentes a arquitetura de informação, usabilidade e design em diferentes escopos, sendo uma leitura recomedada tanto para designers quando para gerentes de TI.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://files.cdn.upx.net.br/00113/imagem/capas/273/1861273.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://files.cdn.upx.net.br/00113/imagem/capas/273/1861273.jpg" /></a></div><span class="Apple-style-span" style="font-size: large;">Usabilidade na Web: Projetando Websites com Qualidade</span><br />
<b>Jakob Nielsen; Hoa Loranger, 2007, Editora Campus</b><br />
<br />
Livros do Jakob Nielsen são leitura obrigatória para quem deseja trabalhar com usabilidade e design de interfaces. Neste livro, Nielsen e Loranger abordam vários tópicos sobre a usabilidade de interfaces web, entre eles: experiência do usuário, arquitetura de informação, navegação, busca, tipografia, redação. Este conceitos podem ser utilizados como diretrizes tanto por designer quanto por analistas de usabilidade.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://shop.smashingmagazine.com/media/catalog/product/cache/1/image/342x365/5e06319eda06f020e43594a9c230972d/s/m/smashing-book-front.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://shop.smashingmagazine.com/media/catalog/product/cache/1/image/342x365/5e06319eda06f020e43594a9c230972d/s/m/smashing-book-front.png" width="186" /></a></div><span class="Apple-style-span" style="font-size: large;">The Smashing Book</span><br />
<b>Smashing Magazine, 2009, Editora Smashing Media GmbH</b><br />
<br />
O Smashing Book que eu possuo é a primeira edição (<a href="https://shop.smashingmagazine.com/smashing-book-2.html">eles lançaram a segunda no início deste ano</a>), mas há conteúdo excelente e, arrisco dizer, atemporal. Ele aborda vários conceitos acerca do design, desde CSS até marketing, passando por design de aplicações, tipografia, usabilidade, cores e SEO.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://designinginterfaces.com/firstedition/Overview/About_the_Book/cover.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://designinginterfaces.com/firstedition/Overview/About_the_Book/cover.gif" /></a></div><span class="Apple-style-span" style="font-size: large;">Designing Interfaces: Patterns for Effective Interaction Design</span><br />
<b>Jenifer Tidwell, 2005, Editora O'Reilly Media</b><br />
<br />
O livro trata sobre o design de interface e de interação por meio de <a href="http://wdxp.blogspot.com/2011/02/bibliotecas-de-padroes-de-interface.html">padrões (patterns)</a> e possuir exemplos reais categorizados de interface patterns para aplicações desktop, website, mobile, entre outros. A segunda edição já foi lançada e conta com novos padrões e um <a href="http://designinginterfaces.com/patterns/">novo site</a> para apresentação de alguns destes padrões.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
Tem alguma sugestão? Publique nos comentários, quem sabe não sai a parte 2 ;)<br />
<br />
Não deixe de conferir também a resenha de outros livros sobre Web Design feitas aqui no blog:<br />
<a href="http://wdxp.blogspot.com/2010/12/pt-br-resenha-principios-do-web-design.html">Princípios do Web Design Maravilhoso</a><br />
<a href="http://wdxp.blogspot.com/2010/12/pt-br-resenha-use-cabeca-web-design.html">Use a Cabeça! Web Design</a>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com2tag:blogger.com,1999:blog-8750028807234207445.post-46422037912983643662011-08-09T15:00:00.005-03:002011-08-09T15:00:04.593-03:005 Ferramentas gratuitas para a criação de mapas mentaisMind map ou mapa mental é um diagrama usado para representar palavras, idéias, tarefas ou outros itens ligados e dispostos em torno de uma palavra chave ou idéia central. Os mapas mentais são usados para gerar, visualizar, estruturar e classificar idéias e ajudam a estudar e organizar informações e textos, resolver problemas e tomar decisões.<br />
Quantas vezes precisamos escrever um texto, organizar as tarefas que temos a fazer ou mesmo fazer um <i>brainstorming </i>sobre um projeto e não sabemos por onde começar? Para isso, o mapa mental é uma excelente forma de colocar tudo isso em ordem. Sempre utilizo mapas mentais, seja para escrever um post ou fazer algum trabalho da faculdade.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">1. FreeMind</span><br />
O FreeMind é uma ferramenta desktop desenvolvida em Java. É de fácil utilização e permite exportar em imagem, PDF ou .ODT (formato de texto para OpenOffice).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://freemind.sourceforge.net/wiki/index.php/Main_Page"><img border="0" height="290" src="http://upload.wikimedia.org/wikipedia/commons/7/70/Freemind-0.9x_Screenshoot.png" width="400" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">2. Mindomo</span><br />
Fui apresentada à esta ferramenta recentemente no mestrado. É uma ferramenta online para a criação de mapas mentais e <i>brainstorming</i>, possuindo também uma versão desktop. A versão gratuita possui diversos recursos e poucas limitações e os planos pagos são bem acessíveis. É preciso fazer um pequeno cadastro para poder utilizar a ferramenta.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.mindomo.com/"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKjxj3GA4ki5rO03Ke33tSZIkgQCgUA8KDpc2G9ygafObfIwxXzSTIkCz20GCLX3K3wwHe4kKsMUELjNXQPGZu8UzrLJMl-5hd7dG0ccuqt02LSBKchBKU30XkIG8QE0N2EJXOW-oGWo8M/s400/mindomo.jpg" width="400" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">3. Freeplane</span><br />
Idealizada por um dos criadores do FreeMind, o Freeplane é uma derivação do FreeMind e mantém compatibilidade com o mesmo, porém, com maior quantidade de recursos, inclusive <a href="http://pt.wikipedia.org/wiki/An%C3%A1lise_SWOT">análise SWOT</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://freeplane.sourceforge.net/wiki/index.php/Main_Page"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemc0YnFGfK8rF8mmvON65Paq55oSWv5zTCZZenyEui4C5ZdaxkoQOAgvEQzj2_Ulwfr-8l6vqR2S9I9M4fVsmapvGKZ3O-wVrkdFX0H6m7jVCD5elfDJkwgW3Y6MLBngr1PSrtBTbn6mt/s400/Cafe_chocolate.jpeg" width="400" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">4. SciPlore MindMapping</span><br />
O SciPlore MindMapping é uma ferramenta de mapa mental escrita em Java e também derivada do FreeMind. O foco da SciPlore está em combinar mapas mentais com PDF e gestão de referência, sendo especialmente adequado às necessidades de pesquisadores e cientistas, uma vez que oferece recursos como adição de referências manuais ou BibTeX e monitoramento de PDF (quando um PDF é adicionado à pasta do mapa mental, ele é listado neste mapa).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.sciplore.org/software/sciplore_mindmapping/"><img border="0" height="288" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Screenshot-large.png" width="400" /></a></div><br />
<span class="Apple-style-span" style="font-size: large;">5. XMIND</span><br />
O XMind é uma ferramenta de gerenciamento de projeto e gerenciamento de conhecimento que permite não somente a criação de mapas mentais, mas também, diagramas de causa e efeito, organogramas, diagramas em árvore a até planilhas. Ele possui compatibilidade com o FreeMind e a versão Pro pode exportar para Microsoft Word, PowerPoint, PDF e <a href="http://www.mindjet.com/">Mindjet MindManager</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.xmind.net/"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2ObSil1FPPe2L-_hvSeDg0xwI5nJX0pNHXyx-aEVyFmmI3Ct4NgHpr7JaCs56dAJaVnpKGFPQpEbQMflwuJ5aVnW4GDDVZZjlwzqJixjyX5qahJbMLOMddlyacxUyY6ZqgdMiduGvK0v/s400/structure-of-an-academic-essay-1-zzcml-1305473434612.jpg" width="400" /></a></div><br />
Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com3tag:blogger.com,1999:blog-8750028807234207445.post-61503955641437163282011-08-04T15:00:00.098-03:002011-08-04T15:00:05.345-03:00Resenha: Linguagens do Web Design<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc3NzDFjl6c7L7Zh-HmqUFq6xDo62OZnmjDZE82lakK6sEMWSsvGWzHuigLBpYaS8C8wEapeRxQMuMVI8BF6BPqwhCJs3fldNVFrQx_u0PPJ3Mehs0IgfJOxARdrsMSJX5MMDykuC-2Bwz/s1600/Imagens-Livros-Normal-LV243449_N.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc3NzDFjl6c7L7Zh-HmqUFq6xDo62OZnmjDZE82lakK6sEMWSsvGWzHuigLBpYaS8C8wEapeRxQMuMVI8BF6BPqwhCJs3fldNVFrQx_u0PPJ3Mehs0IgfJOxARdrsMSJX5MMDykuC-2Bwz/s320/Imagens-Livros-Normal-LV243449_N.jpg" width="226" /></a></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Livro:</b> Linguagens do Web Design</div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Autor:</b> Fátima Aparecida dos Santos</div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Ano:</b> 2008</div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Editora:</b> Blucher Acadêmico</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><i><span class="Apple-style-span" style="color: #666666; font-size: x-small; line-height: normal;">As resenhas apresentadas neste blog até o momento são de livre e espontânea vontade e não foram patrocinadas nem possuem vínculo com a editora ou os autores da publicação. A intenção é apenas trazer uma descrição minuciosa de títulos da área que sejam de interesse da comunidade de web design.</span></i></div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">O livro "Linguagens do Web Design" é resultado da dissertação de mestrado de Santos, defendida em 2002 pela Pontifícia Universidade Católica (PUC-SP). É um título diferenciado sobre web design pois resulta de uma produção científica e deve ser analisado como tal.</div><div>No livro, a autora traduz o web design de outra forma, quase como um acerto de contas com a literatura apoiada sob uma reflexão acerca do que constitui o web design. Esta reflexão é conduzida por meio de uma investigação científica, cuja metodologia visa conectar o design em sua concepção original com a web e os aspectos de linguagem e comunicação.<br />
O resultado desta investigação científica situa, em princípio, a internet com elemento midiático que converge características de vários meios de comunicação e que, portanto, possui uma linguagem própria para se comunicar. Esta linguagem não é arbitrária, mas sim uma miscelânea e códigos e signos que deve ser compreendida para que a mensagem seja corretamente transmitida.<br />
O livro instiga o leitor a desvendar melhor este outro ponto de vista sobre o web design, enquanto sendo uma metodologia para projetar um artefato de comunicação, traçando o web design como meio de transmissão de mensagens e abordando o usuário como receptor desta mensagem que deve falar a linguagem de seus intérpretes para destrinchar s web sob uma perspectiva semiótica. Esta perspectiva semiótica é importante para que este conhecimento se faça entender, demonstrando que o design deve tratar o uso correto dos códigos de diferentes linguagens de comunicação para trazer significado à mensagem.<br />
A autora distingue que o conjunto de códigos e processos de transmissão de mensagem e recursos multimídia são diferentes de outros meios e pode ter perda de contexto.<br />
Alguns pontos em que a autora peca é justamente sobre a linguagem. Possivelmente ela não domina aspectos relacionados à programação e comete alguns enganos, especialmente no Capítulo 1, mas que podem ser facilmente ignorados. Aparecem gafes como "linguagem de programação ou sistema de orientação a objetos" (o correto é programação orientada a objetos e o termo não é análogo à linguagem de programação), "programar significa prever o que o usuário fará, quais serão as regiões que o atrairão" (isto tem muito mais a ver com design e usabilidade do que com programação), "essa programação articula-se com a condição 'if' (se)" (quando na verdade a programação possui também outras estruturas de controle).<br />
Porém, isto não abala o conceito geral sobre o livro, que é inteligível a designers, profissionais de comunicação, redatores e demais profissionais, sejam de web ou não, que desejam entender o papel do design no projeto de comunicação e como ele tem mais a oferecer do que apenas aspectos visuais e interativos. Mas prepare-se: 90% do livro é apenas texto, contando com ilustrações pontuais que aparecem a partir do final do Capítulo 2.<br />
A autora conclui o livro com a exemplificação do design de diversos sites, descompondo os diversos códigos presentes em cada um e qual a sua semântica cognitivas e contextualização semiótica, evidenciando e descrevendo o enlace destas linguagens.</div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com1tag:blogger.com,1999:blog-8750028807234207445.post-54967159538214449112011-08-02T15:00:00.000-03:002011-08-02T15:00:03.995-03:00Mag+: uma interface conceitual de revista eletrônica baseada em tabletsHoje em dia, com tablets como o iPad, não é difícil imaginar como seria ler e folhear uma revista em um dispositivo <i>touch screen</i>. Mas nem por isso a ideia do <a href="http://www.magplus.com/">Mag+</a>, desenvolvida há cerca de 2 anos deixa de ser interessante por trazer um conceito de design de interação focado em uma experiência natural entre usuário e interface.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZvtxnfZlKW1mjTp_bPciRJAwQEX4_ZkuZ39RMFNzVGkIK307POQo96BUMkk7jwc1zjznSwZs6QrjH_1izYw7lzKU9dmYrdrUze0Uiypyy1IJY525f5Vm3hNJr-8_rBpktor8Rnmq17BW/s1600/mag%252B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZvtxnfZlKW1mjTp_bPciRJAwQEX4_ZkuZ39RMFNzVGkIK307POQo96BUMkk7jwc1zjznSwZs6QrjH_1izYw7lzKU9dmYrdrUze0Uiypyy1IJY525f5Vm3hNJr-8_rBpktor8Rnmq17BW/s400/mag%252B.jpg" width="400" /></a></div><br />
O Mag+ (<i>mag plus</i>) é uma plataforma flexível para a criação de mídia editorial para dispositivos tablet <i>touch screen</i>. Ele foi desenvolvido como um projeto de pesquisa corporativa iniciada pela Bonnier R&D em colaboração com a Berg. O projeto visava elaborar e verificar a experiência de ler revistas em dispositivos portáteis digitais.<br />
A plataforma foi pensada para capturar e reproduzir a interação natural que as pessoas há decadas têm ao ler uma revista como, por exemplo, folhear o conteúdo e passar facilmente de uma página à outra, porém, com os recursos que a tecnologia oferece para tornar a interação mais rica entre o conteúdo.<br />
O conceito usa o poder da mídia digital para criar uma experiência rica e significativa, mantendo algumas características de revistas impressas. Ele foi projetado para um mundo em que a interatividade, o excesso de informação e opções ilimitadas podem ser percebido tanto como intrusivas quanto impressionantes.<br />
E é importante ressaltar que ele é uma plataforma tanto para editores quanto leitores.<br />
O vídeo abaixo, de 2009, é uma amostra conceitual de como o Mag+ funciona:<br />
<br />
<div style="text-align: center;"><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/8217311?portrait=0&color=ffffff" width="400"></iframe></div><div style="text-align: center;"><a href="http://vimeo.com/8217311">Mag+</a> from <a href="http://vimeo.com/bonnier">Bonnier</a> on <a href="http://vimeo.com/">Vimeo</a>.</div>Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com0tag:blogger.com,1999:blog-8750028807234207445.post-45662187229599786732011-07-28T15:00:00.001-03:002011-07-28T15:00:03.990-03:005 Ferramentas gratuitas para a criação de wireframesOs wireframes são artefatos da etapa inicial de Arquitetura de Informação e definição da interface, sendo um componente importante para apresentar a disposição do conteúdo e os links para as principais páginas de um website.<br />
Eles provêem uma visão da organização do conteúdo na interface do website. É possível notar através deles o comportamento do menu de navegação e a distribuição dos principais conteúdos que compõem a interface, porém, sem muito detalhe a nível gráfico.<br />
As ferramentas mais conhecidas para a construção de wireframes são proprietárias: Microsoft Office Visio, Omnigraffle e Axure. Mas nos último anos têm surgido ótimas alternativas gratuitas e, inclusive, online. Selecionei 5 (versões de) ferramentas gratuitas e profissionais para que você possa construir wireframes de qualidade e aproveitar o potencial que eles possuem para o projeto de websites.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">1. MockFlow</span><br />
A melhor ferramenta online que eu testei. Fácil de usar, com diversos recursos e componentes. Permite o compartilhamento do wireframe, utilização de <i>grid,</i> guias, régua<i> </i>e exportação como <i>blueprint </i>(formato semelhante àquelas plantas azuis de engenharia) e preto e branco. Infelizmente a versão gratuita permite criar apenas um mockup, porém, com múltiplas páginas. Possui também a versão <i>stand-alone</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.mockflow.com/"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzxMl6AoiQomlWYhnrV2dKAx9Cgdcd7IUF8P-dN-ecxvV21ZOxXAemJ6Ty4ADlFfFmy_tEWgzoXzL6e22bYCVfKwL5rv9yrfrD0NSgINZLolAZagBUFXhQs7eGLR644JDN5omdUy3u8ey/s400/mockflow.png" width="400" /></a></div><br />
<br />
<span class="Apple-style-span" style="font-size: large;">2. Mockingbird</span><br />
O Mockinbird é uma ferramenta online que facilita a criação, visualização e compartilhamento dos wireframes de seu site ou aplicação.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://gomockingbird.com/"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxXet1kIp5Q8Ay-Y0dZpCIs9CSXYHW2g_4RuU7pB6XH8x4AoysTMMc3VCfZOVG3t6_6tlxvqo3f195mSDG1HWZTxq2Fq8R_haAb9K4v822C6YkaWgZB7BasxG-0vmmFZDnS__cZWE-MzV/s400/main-screenshot.png" width="400" /></a></div><br />
<br />
<span class="Apple-style-span" style="font-size: large;">3. Lovely Charts</span><br />
É uma ferramenta online disponível para instalação no Chrome que permite não somente a criação de wireframes, mas também de sitemaps, fluxogramas, organogramas, e muito mais. A única desvantagem é que nessa versão gratuita você pode salvar apenas 1 gráfico editável, mas pode exportar ilimitadamente.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://chrome.google.com/webstore/detail/nmhlgmfplghldoenkoigffhhlkahnjkh"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirGmUkjH2zcfSfPfHDmeZUGscHfgqtml9GJMHgV-I-zzlwHdTLb3ergzTEW_Y3-AoGaaKgkvVGD62AvztQQ-sX0qdpqYzZlStuWRi9ylkZzU0IJ7TnaZkrHT8RqWqjFsciR-DDsiM6-Kpf/s400/unnamed.png" width="400" /></a></div><br />
<br />
<span class="Apple-style-span" style="font-size: large;">4. Balsamiq Mockups</span><br />
O Balsamiq é uma ferramenta bem conhecida. A versão paga é desenvolvida em Adobe Air, mas você pode testar uma versão de demonstração online que permite exportar para PNG, PDF e XML.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://balsamiq.com/products/mockups"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJND4WLV9obCeZ2jwRWWEbsTkVWixUifRgtxXD7YcHy4MJyqdIt-8GWyyHFaoIrjdHkYc2r-kDNXWz0vEzkIJg9OVddls3cCZ-d2_RC1iqJn3HDJGxxhoq-WqO0N8pc-jInkmsz4i9S4fv/s400/mytube.png" width="400" /></a></div><br />
<br />
<span class="Apple-style-span" style="font-size: large;">5. Cacoo</span><br />
Cacoo é uma ferramenta com interface amigável, uma boa quantidade de recursos e versão em português. Assim como o Lovely Charts, ele também permite a criação de diversos tipos de diagramas, inclusive UML e é completamente free.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://cacoo.com/"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR40mH1mY75OjWFDnpgewhYwhiitoIbcHNAIsjS6SL4YwZXsnd89-1_mHOZzqffjV4C-IBYIPA9nUM30-LkJYLv0YO0v85HHfRxOdJOs3Ec6Q4s28Hdqc9ajxhqUHpW40oSeIOBIBJLlTv/s400/cacoo.png" width="400" /></a></div><br />
<br />
Tem alguma dica? Publique nos comentários, quem sabe não sai a parte 2 ;)<br />
<br />
Não deixe de conferir também outras opções <a href="http://mashable.com/2010/07/15/wireframing-tools/">neste post do Mashable</a> que eu encontrei ontem.Talita Paganihttp://www.blogger.com/profile/16289362083814177071noreply@blogger.com2