logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Nov 30

Ícones da Barra de Status

Escrito por DClick Team em 1, 4, 6, Adobe, Android, Aplicativos, AR, arte, bar, blog, class, dados, efeito, efeitos, err, exemplo, Exemplos, Ferramenta, for, fundo, Gráfico, ide, IE, if, image, imagens, menu, mg, O, on, photoshop, procura, pt, RIA, Ria’s Geral, Segurança, TAT, Tema, Tutoriais, Twitter, UI, XP @ 11 30th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Os ícones da barra de status servem para representar as notificações que acontecem no sistema operacional ou de seus aplicativos.

Graficamente eles são semelhantes aos ícones do menu, mas são menores e possuiem maior contraste, portanto não se deixe enganar e siga a Guideline.

Não esqueça das dimensões que são sempre pequenas, médias e grandes, tal como descrito nos primeiros posts, e que tem suas resoluções descritas na tabela 1.

.

Estrutura

.

  • Os cantos arredondados não devem ser muito extensos, devem respeitar uma margem máxima de 2px, para entender verifique a Figura 9 (o número das figuras não é de acordo os nossos posts e sim de acordo com a Guideline oficial) e perceba no canto direito superior esse detalhe e de como fazer o canto arredondado corretamente.
  • Todas as dimensões possuem 25 x 25px, e com um área de segurança (safeframe) de 2px, tal como na Figura 9.
  • Detalhe importante, os ícones da barra status podem vazar essa área de segurança na direita e na esquerda caso necessário, mas jamais poderá vazar nos cantos superior e inferior.
  • Como você já deve saber, a arte deve ser exportada com um PNG transparente, para isso eu sugiro o Fireworks como ferramenta para desenvolver esses ícones, ele é fácil de mexer para criar ícones com esses padrões.
  • Porém, o pacote enviado pela Android é em PSD, e você poderá editar e fazer seus ícones através do Photoshop.

.

Luzes, Efeitos e Sombras

.

Observe que os ícones da barra de status são ligeiramente menores, por isso eles possuem um alto contraste, para facilitar a sua visualização, dando um aspecto mais clean e objetivo das suas formas. Eu não sei se você usa um Photoshop ou outro programa gráfico em português, eu espero que não, vide que a maioria dos tutoriais não dão suporte a esses programas, ainda mais que as traduções ficam péssimas, mas, vou procurar deixar alguns detalhes em inglês e fazer comentários, o motivo é um só, imagine Depth, traduzido como profundidade, a gente sabe bem o que é um Depth em um gráfico, mas profundidade pode ter outro sentido, então tome cuidado com isso, as imagens ajudam a você entender o que é cada coisa.

.

Passo a Passo

.
1.  Em uma ferramenta como o Adobe Photoshop, crie uma forma base em uma imagem de 25?25 px com fundo transparente. Cuidado com o safeframe, e mantenha o superior e inferior de 2 pixels livre, recorde-se do que foi citado acima
2. Adicione cantos arredondados, conforme especificado na Figura 9.
3. Adicione luz, efeitos e sombras, conforme especificado na Figura 10.
4. Exportar o ícone com tamanho 25?25 como um arquivo PNG com fundo transparente.
.

“O que fazer e o que não se deve fazer”

.

Abaixo segue alguns exemplos do que se deve e não se deve fazer, ou seja, seguir os padrões é importante.

Nov 30

O seu blog em movimento nestas férias

Escrito por Silva Developer em 1, 2009, 4, 6, actualizar, Air, Android, api, app, app store, AR, auto, BI, blog, Blogs, carregar, class, Diversos, Download, DRE, email, err, estatísticas, facebook, Flex, for, fotografia, galeria, grátis, IE, if, image, iphone, menu, mg, movimento, Notícias, O, on, painel, pt, Redes Sociais, RIA, Ria’s Geral, screen, serviço, Serviços, site, SmartPhone, social, Sun, TAT, Twitter, UI, update, Wordpress @ 11 30th, 2010 | via http://silvadeveloper.wordpress.com | Sem comentários
Silva Developer
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

As férias estão a chegar muito rapidamente e a partir de agora, até o próximo ano a ocasião é a melhor para se encontrar com as pessoas que são importantes para si, para dar e receber presentes, para relaxar e para pensar mais em si. No entanto, não se esqueça do seu pobre e negligenciado blog nesta época festiva.

Blog in the snow, all alone

Esta pode ser a mais solitária época do ano para um blog, aquela em que os seus posts ficam paralisados e os seus leitores caem a pique. Não se preocupe, existe uma solução.

Publique do seu telefone!

É claro que a última coisa que quer fazer é sentar-se atrás de um computador com a comida festiva a sair do forno, os embrulhos a serem rasgadas e a avó a comandar as operações na cozinha. As boas notícias são que não tem que o fazer – não só o WordPress.com tem a opção de publicar textos ou fotos por email a partir de qualquer dispositivo móvel, como também oferecemos aplicações fáceis de usar para os mais diversos smartphones.

Vamos dar uma olhada em cada uma dessas opções, começando com as aplicações.

Smart phone collage

Aplicações móveis para WordPress

Se tem um Nokia, Blackberry, iPhone, Android ou iPad, pode descarregar uma aplicação grátis de WordPress para escrever e editar posts e páginas, ver estatísticas e até moderar seus comentários. Isto dá-lhe tudo o que precisa para gerir o seu blog, em movimento. Pode encontrar as aplicações na loja ou app store do seu telefone e também nestes sites:

  • WordPress para iOS (iPhone/iPad)
  • WordPress para Android
  • WordPress para Nokia
  • WordPress para Blackberry

Publicar por email

Ama o email e utiliza-o muito – até no seu telefone? Então vai gostar também da nossa funcionalidade de Publicação-por-email. É verdade que não oferece tanta flexibilidade como as aplicações para smartphones, mas é mesmo assim uma forma rápida e acessível para publicar, a partir de qualquer lugar. Para activar a funcionalidade, só precisa fazer alguns ajustes simples:

  1. No seu painel, visite o meu Meus blogs:
    Screenshot: dashboard, my blogs
  2. Active a funcionalidade para o seu blog ou blogs:
    Screenshot: enable post-by-email
  3. Copie e cole o endereço de email secreto (ou faça download do vCard) e envie-o para o seu endereço de email móvel, para uso posterior:
    Screenshot: Secret email address

Agora, publique via e-mail

  1. A partir do seu tablet, telefone, laptop ou outro dispositivo qualquer que suporte email, basta escrever uma mensagem. A linha do assunto será o título do post.
  2. Se o dispositivo o suportar, anexe foto(s) à mensagem. Fotografias individuais aparecem numa só linha, enquanto várias são “automagicamente” transformadas numa galeria.
  3. Indique o email secreto como recipiente da mensagem,
  4. Clique em Enviar e o seu post está publicado!

Bónus: Publicação automática nas suas redes sociais preferidas

Para quê dar-se ao trabalho de enviar várias actualizações, quando pode fazer tudo de uma vez só? Antes de partir para férias, não se esqueça de configurar esta funcionalidade. Assim, cada vez que publicar no seu blog com o seu dispositivo móvel, isso será automaticamente enviado para o seu Twitter, Facebook e outras contas de mídia social.

Illustration: 5 status updates from 1 phone

  1. Volte ao painel, ao menu Meus blogs:
    Screenshot: dashboard, my blogs
  2. Seleccione o blog ou blogs que deseja activar, na coluna Divulgar, e escolha os serviços para os quais pretende enviar actualizações:
    Screenshot: activate publicize
  3. Terá que autorizar as contas para sincronizar com o WordPress:
    Screenshot: Publicize Facebook authorization message
  4. Feito! Se quiser mais detalhes, confira o nosso documento de suporte sobre divulgação.

Portanto, sim, isto significa que com apenas uma mensagem, pode actualizar cinco serviços, no espaço de um ou dois segundos, deixando-o mais à vontade para se descontrair nestas férias.

Tudo pronto

Esperamos que com as aplicações, a publicação por email e as actualizações automáticas, as suas necessidades estejam abrangidas nesta temporada de férias. Boas festas, móveis!

Nov 30

Webminar: Planejamento, Prototipação e Execução de um projeto Flex/Swiz Framework e PHP/MySQL

Escrito por Ved em Flex, gratuito, O, Ria’s Geral, UI @ 11 30th, 2010 | via http://www.vedovelli.com.br | Sem comentários
Ved
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Gratuito!!!

Nov 29

Ícones do Menu

Escrito por DClick Team em 1, 3d, 4, 6, Adobe, Android, AR, arte, BI, blog, class, dados, Dica, Download, efeito, efeitos, err, exemplo, Exemplos, Ferramenta, for, fundo, Geral, icones, ide, image, menu, mg, O, on, padrão, photoshop, pt, rest, RIA, Ria’s Geral, Segurança, TAT, Twitter, UI, XP @ 11 29th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »


Segundo o padrão exigido do Android Guideline, os ícones do menu devem ser desenhados de maneira frontal, 2d, e não em 3D ou perspectiva.
Como disse, esse é um resumo, eles escrevem toda um detalhamento para o mais leigo dos leigos, acho que de forma geral dá para entender bem o que é essa exigência.

Não esqueça de aplicar as resoluções indicadas na Tabela1.

Estrutura

Com o objetivo de manter a coerência os ícones do menu devem usar a mesma paleta de cores e efeitos, abaixo vamos mostrar essa paleta e efeitos para você seguir o padrão.

Segundo a guideline, os ícones devem possuir cantos arrendondados, mas somente quando de maneira racional for necessário. Por exemplo, na FIGURA 7, o lugar racional para esse canto arredondado é o teto, e não o resto do objeto.

Todas as dimensões desta página se baseiam na resolução de um ícone 48 x 48px, com 6px de segurança em volta do ícone, totalizando 54 x 54 área total.

A arte final deve ficar com um arquivo PNG transparente.

Você pode conferir os ícones no pacote que postei no post Pacote para Download

Luzes, Efeitos e Sombras

Segue aqui alguns padrões que você deve usar para criar o efeito desejado, perceba a iluminação utilizada, as sombras e o tom.

Passo a passo

1.  Criar as formas básicas usando uma ferramenta como o Adobe Illustrator.
2. Importar a forma em uma ferramenta como o Adobe Photoshop e dimensionar uma imagem de 48?48 px em um fundo transparente. Cuidado com o safeframe.
3. Adicionar os efeitos observados, como descrito na Figura 8.
4. Exportar o ícone de 48?48 como um arquivo PNG com transparência habilitado.

“O que fazer e o que não se deve fazer”

Abaixo segue alguns exemplos do que se deve e não se deve fazer, ou seja, seguir os padrões é importante.

Nov 29

Segurança não e paranóia

Escrito por Kelps Sousa em .NET, 1, 4, 6, Android, AR, arte, auto, back, BI, blog, carregar, case, código, dados, Dicas, Download, e-book, entrevista, exemplo, Exemplos, for, futuro, Google, html, IE, int, Livro, Mac, map, Mate, mg, Microsoft, mobile, NaN, News, O, on, opensource, problema, Projetos, prova, pt, Revistas, RIA, Ria’s Geral, Segurança, SEO, server, serviço, Sugestões, tag, TAT, tv, Twitter, UI, uint, Ved, Vídeo, Vídeos, window, windows, windows 7, Windows Mobile, XAML @ 11 29th, 2010 | via http://kelps-sousa.blogspot.com/ | 2 comentários
Kelps Sousa
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Quem me segue no Twitter já deve estar sabendo que na última quarta-feira (24/11/2010) eu fui vítma de um sequestro relâmpago. Fui abordado à 3 quadras da esquina da Av. Jorge João Saad com a Av. Francisco Morato (muito cuidado se você mora ou trabalha na região). Fiquei como refém dos bandidos por quase 3h enquanto tentavam sacar e fazer compras com meus cartões de crédito e débito. Fora os gastos que fizeram nos meus cartões, levaram também o som do meu carro, meu celular e minha mochila que além do laptop tinha todos os meus carregadores, e-book reader, cabos de dados, headset, pen-drives e HDs externos. É sobre essa última perda que quero falar.

Graças a Deus não me machucaram. Os cartões têm seguro, vou recuperar o dinheiro perdido. O carro foi encontrado inteiro pela polícia na manhã seguinte (só levaram o som). Deixaram no carro todos meus documentos que estavam na carteira. Mas meu computador e, mais importante, os dados que estavam “espalhados” pela mochila (HDs, laptop e pen-drives e celular) eu não vou recuperar.

Os equipamentos em si serão repostos com o tempo (começei pelo celular). Mas os dados não. Como muitos de vocês, eu também não tinha o hábito de realizar backups com frequência e também não deixava meus dados criptografados pois achava que isso era exagero. Pois querem saber de uma coisa? Não é exagero!

Depois de todos os transtornos (BO, cancelamento de cartões, trocas de senhas…) o que mais me afetou nesse caso todo foi que:

  • Não recuperarei MUITOS dos dados que estavam naquela mochila, pois não tinham backup. Perdi fotos, músicas, vídeos, entrevistas gravadas para o xamlcast, projetos, documentos, exemplos de código, capítulos do livro que estou escrevendo…
  • Me sinto vulnerável pois os bandidos estão com acesso fácil à esses dados. Sei que provavelmente nada disso tem valor para eles e é pouco provável que façam algo, mas a sensação de vulnerabilidade não diminue por causa disso.
  • Aprendi a lição da forma mais cruel (e mais eficaz) possível. Estou escrevendo esse post para que vocês não precisem passar por isso para tomar providências e se previnir.

    O que aprendi com tudo isso?

    Backup

    Normalmente não fazemos backups ou não fazemos com frequencia pois “dá trabalho”. Pois bem, chega de ser preguiçoso. Estou sem dados agora por causa dessa preguiça e chegou a hora de levar isso a sério e resolver esse problema. Há muitas soluções de backup parcial ou totalmente automatizadas que invalidam essa desculpa então, mãos à obra.

    Após estudar algumas opções de backup, eu decidi que vou usar um Windows Home Server para a tarefa. Escolhi essa opção pois não terei que me preocupar com nada além de espaço de armazenamento depois que estiver configurado. Todos os computadores que eu comprar de agora em diante terão um plano de backup no Home Server e a vantagem é que para que o backup ocorra, basta que as 2 máquinas estejam na mesma rede. Além disso, tenho uma vantagem extra já que o Home Server também pode ser utilizado como central de mídia da casa, permitindo que eu assista a vídeos, ouça música ou veja minhas fotos de qualquer computador da rede ou até mesmo na minha TV, por meio do Xbox.

    Scott Hanselman fez alguns posts sobre o Windows Home Server que podem servir como um bom ponto de partida:

    • The Case of the Failing Disk Drive or Windows Home Server Saved My Marriage
    • Windows Home Server Unsupported Feature – Backup Duplication
    • Posts de Scott Hanselman marcados com a tag Home Server

    Criptografia

    Sim, a partir de agora vou criptografar todos os meus computadores, pen-drives e HDs externos. Se acontecer algo no futuro (espero nunca mais passar por algo assim novamente, mas nunca se sabe), ficarei tranquilo pois ninguém além de mim será capaz de acessar meus dados e eu poderei recuperar tudo dos meus backups (feitos no Home Server). Esse tipo de tranquilidade não tem preço.

    Após pesquisar um pouco, vi que há 2 opções interessantes de criptografia: o Bitlocker do Windows e o aplicativo opensource TrueCrypt. Decidi que vou usar o True Crypt pois tem uma criptografia mais alta, é extremamente seguro, open source, além do fato de o Bitlocker estar disponível apenas com a versão ultimate do Windows 7.

    O TrueCrypt é tão seguro que mesmo após 18 meses de tentativas, nem o FBI nem a CIA conseguiram burlar sua segurança para ajudar nossa Polícia Federal a ter acesso aos dados do banqueiro Daniel Dantas, acusado de crimes financeiros.

    Outra coisa interessante do TrueCrypt é que ele suporta emcriptação em hardware, se a sua CPU tiver suporte (processadores i5 e i7 têm), o que ajuda a diminuir qualquer possível perda de performance que possa ocorrer.

    Ande leve

    Perdi tudo pois estava tudo na minha mochila. É aquela velha mania de “talvez eu precise”. Pois acontece que quase nunca precisava de tudo aquilo. Minha mochila devia estar pesando uns 4Kg e eu posso dizer com segurança que 90% das vezes que precisei de algo dela no trabalho ou em qualquer outro lugar, foi para fazer algo que poderia esperar até eu chegar em casa ou que poderia ser feito de outra forma.

    Não vou mais carregar meu laptop para todo lugar (depois que comprar comprar um novo). Não vou mais deixar meus backups e originais juntos. Não vou mais carregar todos os meus gadgets se não for precisar deles.

    Próximos passos

    Agora quero ver esquemas de segurança para o celular. Eu tinha um MotoQ 11 com Windows Mobile 6.1. Estava com o serviço MyPhone da Microsoft que faz backups diários dos dados e memória do telefone, mas não fazia backup dos dados do cartão de memória (onde estavam alguns ítens que eu realmente não queria ter perdido). Como não levaram o meu chip, o esquema de localização, bloqueio e formatação remota do MyPhone não me foram úteis, mas o serviço me ajudou bastante mesmo assim.

    Como substituto provisório, estou com um LG Optimus One rodando Android 2.2. Ficarei utilizando esse aparelho até o meu Windows Phone 7 chegar, pouco antes do Natal (se tudo correr bem). Estou pesquisando quais são minhas opções tanto de criptografia quanto de backup para ambos os aparelhos. Aceitos sugestões.

    Outra coisa que me interessa é algum tipo de serviço que faça backup de dados remotamente ou na nuvem, de forma segura. Quero ter a maior cobertura possível do ponto de vista de segurança, daqui pra frente.

    Resumo

    Não brinquem com segurança. Não deixem pra depois. Façam seus backups hoje e, se possível, criptografem os dados, pelo menos os mais sensíveis também. Tomem cuidado. Fico triste e as vezes até desconsolado quando lembro de algumas coisas que perdi (principalmente dados) que não recuperarei. Não passem pelo que estou passando.

    Quero também aproveitar para agradecer a todos que me apoiaram e me enviaram palavras de consolo nesses últimos dias. Vocês não fazem idéia de como isso ajuda.



    Nov 29

    Criando um botão com interação entre páginas – Flash Catalyst CS5

    Escrito por DClick Team em 1, 6, AR, arte, BI, blog, Catalyst, class, Componente, Curso, Design, designer, event, Evento, Eventos, flash, Flash Catalyst, for, git, int, interface, mg, O, on, RIA, Ria’s Geral, screen, Screencast, TAT, Tecnologia, Twitter, UI, UX @ 11 29th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
    DClick Team
    ? X
    • Bookmarks

    Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

    Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

    Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

    More »

    Espero que tenham aprendido a usar a interface do Catalyst na primeira aula, e percebido como funciona a importação das artes. Nesse screencast eu importo o arquivo .ai de um button, converto ele em componente, aplico eventos nele e faço a navegação entre duas páginas, é bem simples e bem fácil, aproveitem.

    _________________________________________

    Eduardo Horvath é UX Specialist e Designer na DClick.
    Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.

    @eduardohorvath

    Nov 29

    Introdução ao Flash Catalyst CS5

    Escrito por DClick Team em 1, 4, Adobe, AR, blog, Catalyst, class, Curso, Design, designer, flash, Flash Catalyst, for, git, IE, image, int, mg, O, on, portfolio, procura, Ria’s Geral, screen, Screencast, screencasts, site, Sun, TAT, Tecnologia, Twitter, UX, Vídeo, Vídeos, XP @ 11 29th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
    DClick Team
    ? X
    • Bookmarks

    Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

    Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

    Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

    More »

    Bom galera, essa será uma série de Screencasts que visa explicar e mostrar as funcionalidades do FlashCatalyst CS5.

    Como comento no screencast ele é a última versão estável da Adobe, mas o Rafael Martinelli trouxe diretamente da AdobeMAX a versão do FlashCalyst Panini, que tem funcionalidades a mais porém ainda não foi lançado oficialmente, posteriormente estaremos tratando dele também.

    Espero que vocês gostem da sequência de screencasts sobre o assunto, estarei procurando começar com as funções mais básicas do Catalyst e vou aprofundando com o tempo. No final desse mini curso vocês serão capazes de gerar seu próprio site portfolio, com inserção de vídeos e tudo o mais.

    _________________________________________

    Eduardo Horvath é UX Specialist e Designer na DClick.
    Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.

    @eduardohorvath

    Nov 29

    Ícones no Android, pacote para Download

    Escrito por DClick Team em 1, 2.0, 4, 6, Android, AR, arte, Artigo, Artigos, BI, blog, carregar, class, Curso, Cursos, Desenvolvedor, Design, designer, developer, Documentação, Download, Draw, for, Geral, git, html, ide, IE, if, image, int, interface, lista, mg, O, on, padrão, problema, RIA, Ria’s Geral, screen, site, TAT, Tecnologia, Tema, template, Twitter, UI, UX, Vários, Ved @ 11 29th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
    DClick Team
    ? X
    • Bookmarks

    Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

    Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

    Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

    More »

    Como você sabe, o objetivo desses artigos é traduzir parcialmente (as partes mais importantes) a Guideline do Android e fazer comentários a respeito da mesma, a fim de auxiliá-lo na criação de uma interface realmente proveitosa.

    A documentação tem por propósito oferecer informações que permitam que você construa uma interface limpa e unificada, ou seja, algo que seja agradável ao seu usuário, e para isso você deve seguir os padrões.

    Para criar seus ícones você pode usar de base o pacote oferecido pela própria Android, segue ele abaixo.

    icon_templates-v2.0

    Tamanho correto do seu ícone

    O Android foi concebido para funcionar em uma variedade de dispositivos que oferecem uma gama de tamanhos de tela e resoluções, o que pode ser um problema, por isso você deve ficar atento. Quando você cria os ícones para sua aplicação, é importante ter em mente que seu aplicativo pode ser instalado em qualquer desses dispositivos. Segundo documentação no site da Android a plataforma Android faz com que seja fácil para você fornecer ícones de tal maneira que eles serão exibidos corretamente em qualquer dispositivo, independentemente do tamanho do dispositivo de tela ou resolução.

    Em geral, a abordagem recomendada é criar um conjunto de ícones distintos para cada uma das três resoluções de tela existentes listadas na Tabela 1, abaixo, em seguida, armazená-los em diretórios com o tamanho específico de sua aplicação. Quando o aplicativo é executado, a plataforma Android irá verificar as características dos ícones da tela do dispositivo e carregar os recursos apropriados referente a resolução correta. Para maiores informações sobre esse tema de “densidade” como é citado no site oficial Android Developers, ou seja, sobre a resolução, confira esse link (em inglês): Resource directory qualifiers for screen size and density

    O padrão de resolução do Android é médio, chamado de mdpi, Por essa razão é recomendado criar diferentes ícones em resolução que atendam essa necessidade:

    Uma vez desenvolvido ícones para as diversas resoluções, você deve inserí-los na pasta correta, apesar deste ser o trabalho do desenvolvedor conheça esses diretórios, pois será mais fácil enviar ao dev os arquivos zipados com seus respectivos diretórios.

    • Resolução média (Medium-density assets) no diretório res/drawable-mdpi/ (ou por default no diretório res/drawable/ ), como citado, a resolução média é a resolução padrão.
    • Alta resolução (High-density assets) no diretório res/drawable-hdpi/
    • Baixa resolução (Low-density assets) no diretório res/drawable-ldpi/

    Resolução média (Medium-density assets) no diretório res/drawable-mdpi/ (ou por default no diretório res/drawable/ ), como citado, a resolução média é a resolução padrão.Alta resolução (High-density assets) no diretório res/drawable-hdpi/Baixa resolução (Low-density assets) no diretório res/drawable-ldpi/

    Espero com esse artigo ter solucionado as primeiras dúvidas básicas na construção dos ícones, que é os padrões de tamanhos para as diversas resoluções existentes nos vários devices que temos para esse sistema operacional, acompanhe o blog para conferir novos artigos.

    _________________________________________

    Eduardo Horvath é UX Specialist e Designer na DClick.
    Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.

    @eduardohorvath

    Nov 29

    Android UI Guidelines

    Escrito por DClick Team em 1, 4, 6, Android, app, AR, Artigo, Atalhos, bar, BI, blog, bug, class, Componente, Componentes, Curso, Cursos, dados, Desenvolvedor, desenvolvedores, Design, designer, Dica, Dicas, Dicas e Truques, Documentação, Download, fonte, fonts, for, Geral, git, Gráfico, icones, ide, if, image, int, interface, internet, lista, Mate, menu, mg, O, on, Otimização, padrão, photoshop, problema, problemas, pt, RIA, Ria’s Geral, skins, Software, Sun, TAT, Tecnologia, Tema, template, Twitter, UI, UX, Ved, Widget, XML, XP @ 11 29th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários
    DClick Team
    ? X
    • Bookmarks

    Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

    Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

    Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

    More »

    Este artigo visa explicar a User Interface do Android, voltado principalmente para o design, portanto vamos abordar aqui a documentação do Android que trata desse assunto.

    Em pesquisa intensa pela internet percebi que poucos abordam as especificações do Android para fazer a aplicação de uma skin, a discussão está mais voltada a desenvolvedores, otimização, xml etc, quase nada trata de fontes, ou padrões visuais. Então muitos designers se perguntam como fazer uma skin para uma app Android, já que não é somente abrir o Photoshop ou outro software gráfico e começar a desenhar.

    Eu vou tratar aqui exatamente desse tema, não só deixando a mão as fontes (TTF) para você, mas como toda pesquisa que for feita sobre o assunto, haverá PSDs para baixar, ícones e muito mais, material para você começar a produzir sem qualquer complicação. Portanto deixe esse link nos seus favoritos pois ele será atualizado semana a semana, conforme eu for criando novos posts eu vou inserir o link dos temas nesse artigo, assim ele será um guia para você encontrar o que deseja.

    Estarei postando aqui a UI Guidelines e comentando-a onde for pertinente, e alguns desenvolvedores poderão fazer uso já que estará tudo mastigado e com isso quem quiser se aventurar em criar algumas skins para suas apps não terão tantos problemas, mesmo assim aconselho, contrate um bom designer, pois ele saberá discutir não só como fazer uma skin, mas como criar um visual atraente e funcional, discutindo inclusive seu wireframe.

    Vamos começar entendendo o que é a UI Guidelines, ela é separada na plataforma Android por:

    .

    Icon Design (design dos ícones)
    .

    • Ícones
    • Ícone Menu
    • Ícone da barra de status
    • Ícone Guia
    • Ícone de diálogo
    • Ícone de exibição de lista
    • Dicas para Designers
    • Usando os templates do pacote de ícones
    • Índice de ícones
    • Ícones padrões iniciais
    • Ícones padrões do menu
    • Ícones padrões da barra de status

    .

    App Widget Design (componentes da interface da app)

    .

    • Padrão anatômica de um widget
    • Projetando um widget
    • Padrão de tamanho de um Widget
    • Padrão de frames de um Widget
    • Padrão de sombras de um Widget
    • Widget – dicas e truques gráficos
    • Widget – formato de arquivo gráfico

    .

    Activity and Task Design (atividades e tarefas, ou seja, os comportamentos)

    .

    • Entendendo de forma geral as tarefas
    • Dicas de design

    .

    Menu Design (todo o comportamento do menu)

    .

    • Opções do Menu
    • Contexto do Menu e atalhos

    .

    Talvez você se pergunte porque é necessário saber isso e não apenas pegar um PSD Guideline e começar a criar. A resposta é bem simples, se você quer criar um app que realmente as pessoas vão usar você deve respeitar e entender esses padrões, saber dos recursos que são suportados por essa plataforma e suas limitações.

    Afinal por ser um sistema aberto, qualquer um pode subir uma aplicação na AndroidMarket, por mais bugada que seja, porém o que vai definir o sucesso da sua app será os cuidados que tiver em respeitar a Guideline, o seu conceito, e o seu design.

    FONTES

    Droid Serif

    Droid-Sans

    Droid-Sans-Mono

    _________________________________________

    Eduardo Horvath é UX Specialist e Designer na DClick.
    Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.

    @eduardohorvath

    Nov 27

    Flex 4 – Usando a classe TextFlowUtil #screencast #soudev

    Escrito por Jose Carlos Fiel em 1, 4, 6, Adobe Flex, api, AR, blog, class, classe, Flex, Flex 4, IE, if, image, mg, O, on, Ria’s Geral, screen, Screencast, Vídeo @ 11 27th, 2010 | via http://blog.josecarlosfiel.com.br | Sem comentários
    Jose Carlos Fiel
    ? X
    • Bookmarks

    Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

    Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

    Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

    More »



    Uma classe realmente ÚTIL ;)

    Salvou minha pele no projeto apresentado no vídeo. Confiram!

    « Entradas anteriores |

    ACERCA

    O que é o RedeRIA ?

    O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2758 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

    Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

    Feed: assine já
    Twitter: siga-nos

    GOOGLE

    Votação


    Deveria o RedeRia agregar conteúdo em inglês?
    Ver Resultados

    AUTORES


    Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

    PUBLICIDADE








    Powered by Wordpress & msdevstudio.com