quarta-feira, 28 de maio de 2008
Como escolher gráficos para mostrar informações
Enviado para você por Penha através do Google Reader:
Quando se apresentam idéias que fazem referência a dados, pode ser de grande ajuda utilizar algum gráfico ou uma tabela. Isso nos permite comunicar de uma forma mais clara e efetiva uma informação relacionada a dados, ou também pode arruinar toda uma apresentação se não escolhermos o gráfico correto. No momento de escolher o gráfico correto, pode ser muito útil utilizar a tabela de decisões de Andrew Abela:

Uma vez que tenhamos selecionado nosso tipo de gráfico, um recurso muito útil criado pela empresa Juice Analitytics é Chart Chooser: uma ferramenta online que nos permite decidir que tipo de gráfico necessitamos para nossa apresentação, onde podemos efetuar o download de um template personalizado em formato Excel ou PowerPoint:

Referências
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
Como criar Protótipos Interativos com o Visio
Enviado para você por Penha através do Google Reader:

Se você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web). Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.
Os PDF's são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:
- 1. Crie links nas páginas de primeiro plano, não nas de segundo plano - utilize os stencils do documento para gerenciar suas modificações.
- É uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das páginas - topo, conteúdo, navegação - em uma página de fundo (background), assim os elementos se repetem em cada página de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio não cria links para as camadas de background. Para criar protótipos interativos em PDF eles devem estar na página em primeiro plano. Isso significa que para uma distribuição de página standard, todos os elementos de navegação devem estar em cada página do wireframe. Poderia-se copiar e colar os elementos de navegação em cada página, mas isso seria um trabalho duro. Ao invés disso, utilize os stencils do documento. Funciona assim:
- 1.1 - Crie um painel de navegação, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da página, cosntrua cada aba em um bloco de texto separado.
- 1.2 - Para adicionar links, aperte CTRL + K para abrir o quadro de diálogos de links. Depois de adicionar o Sub-link (não o link direto), clique em browse (examinar) e encontre a página que está seu wireframe, ao qual deseja linkar (ou introduza a URL).
- 1.3 - Repita o primeiro e o segundo passo sempre que necessário. Uma vez que estiver pronto o painel de navegação, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G).
- 1.4 - Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento.
- 1.5 - Arraste os elementos agrupados de navegação ao painel de Stencils.
- 1.6 - Clique com o botão direito sobre o grupo de elementos e renomeios (por exemplo: "NavBar").
- 1.7 - Em cada página de seu wireframe, arraste oe elementos sobre a página de primeiro plano e os coloque em sua posição.
- 1.8 - Se necessitar fazer modificações no grupo de navegação, clique com o botão direito sobre o Stencil do documento, e selecione Edição Mestre > Edição de forma Mestre. Qualquer modificação feita será atualizada automaticamente em qualquer página.
- 2. Utilize o menu PDF no Visio, ao invés de imprimir através do Adobe PDF no menu de impressão.
- Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razão, se utilizar Arquivo > Imprimir e escolher Adobe PDF como impressora, os links do PDF não funcionam.
- O resultado final será links funcionando em cada página. Para alterar os estados dos botões ou criar outros elementos interativos, é necessário editar os arquivos no Acrobat
- Leve-o ao nível seguinte.
- Esse artigo de Boxes & Arrows é uma fantástica revisão de como criar protótipos em PDF clicáveis com camadas, multimídia e muito mais. Foi centrado no uso avançado das ferramentas de edição do Acrobat
Referências
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
Galeria de Efeitos Parallax
Enviado para você por Penha através do Google Reader:

Efeitos Parallax são aqueles efeitos utilizados para criar uma ilusão de profundidade tridimensional em ambientes 2D, muito utilizada em jogos do tipo Arcade, como o Moon Patrol e Sonic Hedgehog. Como os nossos sitemas operacionais em sua maioria são todos 2D, é possível simular essa técnica no browser para simular um ambiente 3D.
Originalmente essa técnica foi descoberta por Alex Walker e Paul Annett, onde são utilizadas várias imagens em CSS sobrepostas para simular um ambiente 3D:

Quer saber mais sobre o assunto? Matthias Kretschmann fez em seu site uma galeria listando 12 belos efeitos utilizando a técnica Parallax.
<update>O site CSSLab.cl fez um post interessante sobre o assunto também.</update>
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
Teclado Virtual em JavaScript
Enviado para você por Penha através do Google Reader:
Já pensou em adicionar um teclado virtual a suas aplicações?

Esta versão desenvolvida em JavaScript, nos permite, entre outras coisas, selecionar a configuração das teclas que desejamos mostrar dentro de várias possíveis.
Instalação
O Script se baseia em 2 arquivos, um JS onde se encontra a funcionalidade principal para que o teclado virtual funcione e um arquivo CSS onde podemos personalizar o teclado a nossa maneira. Simplesmente temos que chamar os arquivos dentro das tags <head></head> de nossa aplicação.
<link rel="stylesheet" type="text/css" href="keyboard.css"> <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script> Exemplo de Uso
Uma vez que você adicionou na página os arquivos necessários, basta você adicionar agora a classe keyboardInput aos seus inputs.
<input type="text" value="" class="keyboardInput"> Referências
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
Accordion Horizontal em JavaScript com apenas 1kb
Enviado para você por Penha através do Google Reader:

Quer fazer aqueles menus estilo Accordion sem o uso de qualquer framework JavaScript? E ainda por cima o tamanho do Script é de 1KB. Sim, isso é possível, foi o que fez o Leigeber, dê só uma olhada lá.
Via: Anieto2K - Acordeón horizontal en Javascript de solo 1kb
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
Convite de lançamento do escritório da W3C aberto ao público
Enviado para você por Penha através do Google Reader:

Dia 4 de junho próximo haverá um evento de lançamento aberto ao público do escritório da W3C no Brasil. O evento ocorrerá em São Paulo, no Centro de Convenções Fecomércio na Rua Plínio Barreto, 285 - Bela Vista, São Paulo/SP. O evento é gratuito, entretanto é necessário o credenciamento com antecedência.
Veja abaixo o press release completo enviado a alguns sites para divulgação.
Similar Posts:O Consórcio W3C, entidade internacional com a missão de definir orientações
e padrões para a Web e responsável pela evolução do HTML, XML, CSS, tem a
honra de convidar o público em geral para o lançamento de seu Escritório no
Brasil.O evento de lançamento acontecerá no dia 4 de junho de 2.008, quarta-feira,
às 11h. A participação, além de aberta ao público, será gratuita,
exigindo-se apenas o credenciamento prévio pela internet a partir do endereço
http://www.w3c.br/2008/lancamento/cadastro.html.Apesar de não poder estar presente, Tim Berners-Lee, grava mensagem em vídeo
especialmente para a ocasião.O evento será prestigiado com a participação de representantes
internacionais do W3C: Jose Manoel Alonso, líder da iniciativa eGov do
W3C/CTIC, falará sobre "O uso adequado da Web para se chegar ao Governo
Eletrônico 2.0″; Daniel Dardailler, diretor de relações internacionais; e
Stéphane Boyera, líder da iniciativa Web Móvel, participarão do painel
internacional "Internet & Web: passado, presente e futuro". Essas duas
atividades fazem parte do evento de lançamentoDemi Getschko, diretor-presidente do NIC.br e conselheiro do Comitê Gestor da
Internet no Brasil, participará também do painel "Internet & Web: passado,
presente e futuro"O evento de lançamento acontecerá integrado ao 14º Congresso de Inovação
na Gestão Pública e será realizado no Centro de Convenções Fecomércio, na
Rua Plínio Barreto, 285, Bela Vista, São Paulo, SP (ao lado da Av. 9 de Julho
e da Fundação Getúlio Vargas). Mapa de localização pode ser visto em
http://wiki.conip.com.br/Conip2008/InformacoesGerais.O W3C Escritório Brasil é uma iniciativa do NIC.br e do CGI.br
Outras informações podem ser obtidas em http://www.w3c.br/2008/lancamento/
- W3C anuncia escritório no Brasil
- Campus Party Brasil 2008
- 1º Encontro Brasileiro de Arquitetura da Informação
- CodeShow
- Campus Party Brasil lá vou eu!
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Revolução Etc usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos


















