Apresentação: Construindo Layout de Sites com CSS

Leia mais sobre Apresentação: Construindo Layout de Sites com CSS »

Assessoria: "talitapagani.com" em galerias de web design

Já havia visto o meu portfólio como destaque em alguns sites que listam designs interessantes de websites. Mas, ao realizar uma pesquisa no Google e receber algumas mentions via Twitter, me surpreendi por ver que meu site aparece em mais galerias e blogs do que eu imaginava.
Confiram abaixo a seleção de galerias e posts (clique na imagem para acessar o site).

CSS Mania

101 Best HTML5 Sites

.CSS{Mayo}

HTML5 Gallery

One Extra Pixel

Web3Mantra

Land of Web

Reencoded

DesignDim

Most Inspired

Leia mais sobre Assessoria: "talitapagani.com" em galerias de web design »

Direto da Campus Party 2011 - Oficina "Seu desenho vai virar código, e agora?"

Na sexta-feira (21/01), o designer Eduardo Agni apresentou sua oficina "Seu desenho vai virar código, e agora?", que ele já havia apresentado em outras edições da Campus Party, mas este ano com um conteúdo mais forte sobre CSS3. Inclusive, quem quiser conferir os slides, eles estão disponíveis no Slideshare.

Agni começou com uma citação de Chris Coyer: "CSS é como xadrez... Você pode aprender os princípios em um dia e passar a vida inteira se especializando". Para quem trabalha com desenvolvimento/design front-end, sabe que CSS é um aprendizado diário. Ele apresentou a divisãode páginas web em três camadas: conteúdo (HTML), apresentação (CSS) e comportamento (JavaScript) através de um diagrama. Depois, comentou sobre as diversas limitações da especificação corrente do CSS (2.1) e como o CSS 3 (ainda em fase de rascunho pelo W3C) permitirá maior controle do estilo sem a necessidade de utilizar certos truques e imagens para reproduzir alguns efeitos.

Foram mostradas algumas ferramentas que as novas propriedades possam ser visualizadas em todos os navegadores, como o Modernizr. Entre as IDEs disponíveis para escrever HTML e CSS, Agni apresentou o Aptana Studio 3, que já possui suporte a HTML5 e CSS3, e destacou: "HTML5 e CSS3 não criam maravilhas, eles apenas possibilitem que você crie... São apenas ferramentas, mas quem faz a buniteza acontecer é você", em resposta a diversos posts que vemos mostrando "sites inspiradores" feitos com as novas especificações das linguagens.

Grande parte da oficina foi destinada à apresentação prática das principais propriedades novas do CSS3: border-radius, border-colors, text-shadow, box-shadow, opacity, columns, backgrounds múltiplos e @font-face.

Leia mais sobre Direto da Campus Party 2011 - Oficina "Seu desenho vai virar código, e agora?" »

O que há de bom na Campus Party 2011 para Desenvolvedores Front-End

Olá pessoal! Um Feliz Ano Novo a todos!

E 2011 começa muito bem. De 17 a 22 de janeiro acontece em São Paulo mais uma edição da Campus Party, um dos maiores eventos de inovação, ciência, criatividade e entretenimento digital. São 13 área que oferecem diversas atividades entre palestras, oficinas e debates.

Será a primeira vez que vou no evento e creio que será uma grande oportunidade de agregar novos conhecimentos. Neste momento, uma das minhas dificuldades foi conseguir fechar minha agenda do evento, pois há muitas atividades em vários setores e dá vontade de participar de tudo.

Como desenvolvedora front-end [(X)HTML/CSS], vou listar algumas atividades interessantes que podem lhe dar uma forcinha nesta tarefa. Há atividades que vão além do design/desenvolvimento front-end e acrescentam conhecimentos muito úteis. Infelizmente, não consegui me inscrever em todas por conflitos de horários. As informações foram retiradas do site da Campus Party.

Área: Desenvolvimento

Palestra: Introdução ao Node.JS - Terça, das 16h às 17h
Lembra quando você usava Javascript apenas para validar formulários? Pois é, passado o tempo ele começou a ser usado para dar experiências ricas aos usuários e agora ele chega com força no desenvolvimento Server-Side. Ainda não sabe direito o que é NodeJS? Precisa criar aplicações com alta concorrência? Interessado em desenvolver Jogos multiplayer na rede? Ainda acha que Javascript é simplesmente um scriptzinho que valida formulários e brinca de AJAX? Entenda como o NodeJS vai facilitar muito a sua vida no desenvolvimento web com uma performance impressionante.

Palestra: Desenvolvendo um site completo com ASP.NET - Quarta, das 14h30 às 15h30
Veja nesta palestra como desenvolver um site de catálogo de produtos utilizando ASP.NET MVC e JQuery. Será apresentado as novidades do ASP.NET MVC 3 com Razor e como construir recursos ricos com JQuery, totalmente integrado ao Visual Studio 2010.

Palestra: HTML 5 - Sexta, das 16h às 17h
Ele chegou com tudo! Na sua quinta versão, o HTML será uma das linguagens padrão da Web Semântica, representando alterações importantes que resultarão em mudanças significativas na navegação, design e vários outros tópicos que serão mostrados em detalhes nesta palestra.

Palestra: HTML 5 - Hands On - Sexta, das 17h30 às 18h30
Empolgados depois da palestra sobre HTML5? Então aqui estará montado o cenário perfeito para experimentar este novíssimo e promissor padrão.

Palestra: Futuro da Web, HTML5 e W3C - Sábado, das 9h às 9h45
Apresentação sobre o desenvolvimento e histórico da linguagem HTML e o Consórcio WWW - W3C.

Área: Foto / Vídeo / Design

Oficina: Seu desenho vai virar código, e agora? - Sexta, das 9h30 às 11h30
Que dificuldades surgem na hora de transformar o seu layout em uma página da web? O que um designer precisa saber de CSS antes de iniciar o projeto de um layout? Quais os novos recursos que o CSS3 oferece e os ganhos visuais na hora de projetar layouts para essa linguagem?

Palestra: Social Interface Design - Sexta, das 11h45 às 12h45
Saiba tudo aquilo que vai além da usabilidade dentro do design de interfaces, e que possibilita, de fato, a interação entre pessoas nos ambientes virtuais.

Oficina: Desbravando Fireworks, CSS3 e HTML5 - Sexta, das 15h15 às 17h15
A descrição é a mesma da primeira oficina, não sei se eles colocaram incorretamente no site.

Workshop: Arquitetura da informação - Construindo uma home page - Sexta, das 17h30 às 18h45
Montagem de home. Utilização de recursos tecnológicos. Atividade a ser realizada por duplas. A cada dupla será entregue um iPad ligado ao telão, no qual montará interfaces da página através de componentes prontos. Para tornar isso mais desafiador, atribuiremos níveis, ou seja, para a montagem de cada nível, atributos como inclusão de shopping, publicidade e outras particularidades de veículos deveriam ser obrigatórias.

O que acharam pessoal? Vale lembrar que a CPBrasil tem muitas outras atividades, principalmente para quem se interessa e/ou tem conhecimento também em programação, software livre, mídias sociais, etc.

Leia mais sobre O que há de bom na Campus Party 2011 para Desenvolvedores Front-End »

[en-us] Five Myths about Documentation

I always emphasizes the development of a good documentation for interfaces, because I see that many people still reject the idea of document their interfaces design, by believing that it's too complex, unnecessary or "nobody will read".
However, I found a good article on the Human-Computer Interface website. I would like to share it with you all and ask: do you agree?

Documentation isn’t important because people don’t read it anyway

It is true that people don’t read a manual if it is poorly designed, because it is easier to telephone the customer technical support department than find the answer in the manual.

However, research shows that customers do appreciate good documentation. With hi-tech products or computer software the manual is usually the first thing the user looks for, after unpacking the product, to get them up and running.

You need to have designed the product to write the documentation

The person who designed the product is often the worst person to explain how to use it, because they are too familiar with it, and cannot appreciate what users find hard to understand.

The designer will tend to think in terms of “how does the product work” rather than “how do I do this with the product”, which is what the user needs.

There is no point spending money on producing good documentation because the customer has already bought the product by that stage

Every good salesman knows that your relationship with your customer doesn’t end when you’ve sold them your product.

Good documentation adds value to your product by enabling people to use it fully, and it helps create customer loyalty by reaffirming that they made the correct purchase.

Well-designed products don’t need manuals

Are there any questions that your customers might need to have answered about how to set up, use, or maintain your product?

If the answer is yes, then however well designed your product is, it needs a manual. If not, then your product is either very intuitive, or very simple.

On-line help makes printed manuals unnecessary

Inexperienced users find it easier to learn about using a product from a printed manual, because it is less intimidating, and can explain concepts more effectively.

On-line help is ideal for providing reference information, and it has the advantage that users can look up the answer to a question while they are working with your product.

Documentation should be provided both as a printed manual and as on-line help, to cater for individual preferences.

Leia mais sobre [en-us] Five Myths about Documentation »

[pt-br] Cinco mitos sobre documentações

Sempre gosto de enfatizar o desenvolvimento de uma boa documentação de interface, pois vejo que muitas pessoas ainda rejeitam a ideia de uma documentar seus projetos de interface, por considerar complexo, desnecessário ou simplesmente utilizar a máxima de que "ninguém lê".
Desta vez, encontrei um artigo interessante apontando os 5 mitos sobre documentações de modo geral e resolvi traduzí-lo. Confiram abaixo e me respondam: vocês concordam?

Documentação não é importante porque as pessoas não lêem

É verdade que as pessoas não lêem um manual se ele for mal projetado, porque é mais fácil telefonar para o departamento de suporte técnico do que encontrar respostas no manual.
Porém, pesquisas mostram que os clientes apreciam uma boa documentação. Com produtos de tecnologia e softwares, o manual é normalmente a primeira coisa que os usuários procuram, depois de desembrulhar o produto, para fazê-los funcionar.

Você precisa ter projetado o produto para escrever a documentação

A pessoa que projetou o produto é freqüentemente a pior pessoa para explicar como usá-lo, porque eles estão muito familiarizados, e não pode apreciar o que usuários acham difícil entender.
O designer tenderá a pensar em termos como "como o produto funciona" ao invés de "como eu faço isso com o produto", que é o que os usuários precisam.

Não há sentido em gastar dinheiro para produzir uma boa documentação, pois o cliente já comprou o produto nesse estágio

Todo bom vendedor sabe que sua relação com o cliente não termina quando você vende o produto.
Uma boa documentação adiciona valor ao seu produto permitindo que as pessoas o utilizem completamente e isto ajuda a criar uma lealdade com o cliente reafirmando que eles fizeram uma aquisição correta.

Produtos bem projetados não precisam de manual

Há alguma pergunta que seus clientes poderiam precisar de respostas sobre como configurar, usar, ou manter seu produto?
Se a resposta é sim, então mesmo você tendo projetado bem seu produto, ele precisa de uma manual. Se não, então seu produto é muito intuitivo ou muito simples.

Ajuda on-line faz o manual impresso desnecessário

Usuários inexperientes acham mais fácil aprender a utilizar um produto pelo manual impresso, porque ele é menos intimidante, e pode explicar os conceitos mais efetivamente.
Ajuda on-line é ideal para prover informação de referência, e tem a vantagem que os usuários podem procurar a resposta de uma pergunta enquanto eles estiverem trabalhando com seu produto.
Documentação deveria ser provida tanto por manual impresso* quanto ajuda online, satifazendo necessidades individuais.

*nota pessoal: este manual impresso pode ser substituído também por um PDF com a documentação geral do sistema e que pode ser impresso.

Leia mais sobre [pt-br] Cinco mitos sobre documentações »

[en-us] A simple solution for CSS transparency without hack

Within modern browsers, we feel free to add transparency on DIVs and other contents throught CSS3. For web designers, it increases de possibilities do compose more complex and refined layouts. We can control transparency with CSS properties like opacity.
However, some browsers still doesn't offer support for this feature and frequently we need to use some hack to make it work cross-browser.
There is a simple solution to treat this issue. It make the transparency works for browsers that support transparency and, for browser who doesn't, it still keel your layout elegant, even without transparency.

• Create a PNG transparent image with the desired opacity. The PNG can be 1px x 1px or, if it has some gradient effect, 1px width x correspondent height;
• On your CSS, add a rule like
  element { background: (images/bg_transparent.png) [repetition] [horizontal-position] [vertical-position]; }
  Ex.: .header { background: (images/bg_transparent.png) repeat-x 0 0; }

That's it! If the browser didn't suport the PNG transparency, you can still see your layout with background image. Have doubts if it really works? Check WWF website.
;)

Leia mais sobre [en-us] A simple solution for CSS transparency without hack »