[Projeções] Spotify Windows App

Essa semana, a Spotify iniciou nos EUA, por conta disso, várias pessoas conseguiram um convite para entrar na comunidade, inclusive eu.

Ao finalizar o cadastro, e baixar o app para o Windows, fiquei um pouco decepcionado, visto que o design do app fica em desacordo com o Windows.

Após essa decepção, pensei em criar um mockup, para um novo app para o Windows, e o resultado foi esse.

Login do aplicativo do Spotify para Windows

Tela principal do aplicativo do Spotify para Windows

Menu do aplicativo do Spotify para Windows

Para ver todos os detalhes, favor visualizar a imagem original.

O que vocês acharam? Alguma alteração a ser feita?

Aguardo feedback.

PS: Publiquei também no forrst, para quem tem conta lá, visite.

[Projeções] WordPress Login

Peço desculpas pela minha ausência, ultimamente tenho andado muito ocupado, mas, esses dias tive um tempo livre e inspiração suficiente para criar uma projeção da tela de login do WordPress.

Informo desde já que a imagem já foi enviada para a equipe do WordPress. Estou aguardando algum contato.

Até a próxima!

[Dicas] Criando/Ajustando sites para o IE9 Beta

No post anterior falei um pouco sobre as minhas impressões a respeito do IE9 Beta, falei inclusive que gostei bastante dele. Essa semana, estava atualizando o site de um cliente, e me deixei o site compatível com o IE9 como um bônus para o cliente. Hoje venho explicar, como compatibilizar um site com o IE9. Neste post falarei apenas o básico: ícones, nome e descrição, botões avançar e voltar, tamanho da janela,

Primeiras impressões sobre o Internet Explorer 9 Beta

Nesse post, vamos falar um pouco sobre as primeiras impressões do IE9 Beta 1. Lançado dia 15/09, o IE 9 volta ao mercado de navegadores trazendo em sua arquitetura uma gama de novas tecnologias, dentre elas SVG, CSS3, uso da GPU (compatível com DirectX 10), um novo motor de renderização, sua nova interface mais minimalista, dentre outras melhorias que serão apresentadas no decorrer dessa analise.

Instalação

Vamos começar pela instalação. Aqui é necessário instalar umas atualizações, que é feita de forma automática, logo após essa etapa é feito um download e então começa a instalação, que é bem rápida por sinal. Logo após o programa pede que reiniciemos a máquina. Depois de reiniciada, podemos usar o IE9 Beta.

PS: Quando instalamos o IE9 automaticamente é desinstalado o IE8.

PS 2: O IE9 só está disponível para o Windows Vista, Server 2008, Server 2008 R2 e 7.

Ícone

Agora vamos falar sobre o mais básico do programa, o ícone. De acordo com o Blog do Internet Explorer no MSDN, o ícone do IE já é bastante reconhecido pelas pessoas, é tanto que algumas lan houses incorporaram o ícone em sua logo, nas palavras deles, um ‘e’ azul = internet. Por conta disso, eles apenas fizeram uma leve mudança visual no ‘e’ deixando-o um pouco mais fino, em algumas partes, e fizeram uma órbita, de acordo com eles, mais ‘rápida’, em relação a logo anterior. Além disso, a mudança veio para mostrar que o IE não é mais o mesmo, pois está mais moderno e rápido. Logo abaixo podemos ver a diferença entre os logos.

Interface

Interface do IE9 (clique para ampliar)

A nova interface é estilo minimalista. Em minha opinião, bem mais bonita que a dos outros navegadores. Logo abaixo podemos conferir um comparativo de interfaces dos principais navegadores do mercado.

Comparativo dos principais navegadores do mercado (clique para ampliar)

Na imagem acima percebemos de cara que o IE9 possui a menor e melhor interface e a mais amigável também.

Outra mudança radical é a introdução da One Box, que nos permite ter acesso a todos os principais recursos do navegador, tais como, histórico, favoritos, e até mesmo pesquisa.

One Box no IE9 (clique para ampliar)

Outro recurso novo, é a famosa tela ‘Speed Dial’ do Opera, que foi introduzida no Chrome e agora está presente no IE9, que neste caso é chamado de sites populares.

Sites populares (clique para ampliar)

Complementos

Quando uma página demora a abrir entra em cena uma janelinha bem suave e interessante, ela fala sobre os complementos que estão ativados no IE, e pergunta se queremos desabilitar alguns complementos para acelerar o carregamento da página.

Notificação sobre os complementos (clique para ampliar)

Complementos (clique para ampliar)

Downloads

Agora nós temos uma ‘central de downloads’ onde podemos pausar, cancelar e verificar os downloads que estão sendo feitos no momento e até mesmo os que já foram feitos.

Central de Downloads (clique para ampliar)

Da mesma forma que ocorre com os complementos, quando você vai fazer um download, aparece uma pequena barra no centro inferior da tela.

Integração com o Windows 7

Com o IE9 o conteúdo do site ganha foco, assim temos várias novidades, que destaco logo abaixo.

Agora nós podemos salvar os sites na barra de tarefas, facilitando assim o acesso aos nossos sites favoritos.

Sites na barra de tarefas (clique para ampliar)

Observe também, na imagem acima, que há uma integração do site com as novas funcionalidades do Windows 7,as Jump Lists. Além disso, também podemos salvar os sites no menu iniciar.

Quando salvamos um site na barra de tarefas, e o abrimos, há uma integração da interface do IE9 com o site, adaptando assim a cor dos botões avançar e voltar.

Botões avançar e voltar coloridos

Da mesma forma que o Windows Media Player trabalha, o IE9 também recebe alguns recursos que facilitam nossa navegação em sites com vídeos.

Integração com os controles do Windows 7

Uso da GPU (Graphics Processing Unit ou Unidade de Processamento Gráfico)

De acordo com especialistas, o uso da GPU, a famosa placa de vídeo, para renderizar páginas é cerca de 60 vezes mais rápida que o processador. Por causa disso as ultimas versões dos principais navegadores do mercado estão vindo com essa funcionalidade, exemplo disso é o Firefox 4, que desde o beta 4 vem habilitada por padrão, e o Chrome 7, que já está no canal developer, já vem habilitada essa funcionalidade.

Novo motor de renderização

O novo motor de renderização javascript é bem mais rápido que o anterior. E de acordo com alguns testes feitos, a renderização do IE9 está mais rápida que a do Chrome e do Firefox.

Pontos Positivos

- Nova interface.

- Uso da GPU para renderização das páginas.

- O novo motor de renderização.

- Integração com as novas funcionalidades do Windows 7.

- Central de downloads.

- Sites populares, mostra os últimos sites visitados.

- One Box.

- CSS3, SVG, HTML5…

Pontos Negativos

- Ainda há alguns bugs na renderização das páginas, no meu caso ocorreu ao visitar a página do WordPress com o login ativo.

- Alguns travamentos ao carregar uma página com muitas imagens.

- Demora para carregar imagens.

- Falta de suporte ao Windows XP, pela quantidade de pessoas que ainda usam o sistema a Microsoft deveria oferecer uma versão para ele.

Conclusão

Por fim, algumas pessoas devem está se perguntando qual o motivo de só escrever essa analise agora, bom, o que aconteceu foi o seguinte, queria testar primeiro a velocidade de renderização das páginas sem usar a GPU.

A  nova interface realmente é muito agradável, e bastante limpa. O novo motor de renderização me impressionou pela agilidade, por ainda está em fase beta não esperava por tudo o que ele me ofereceu. A integração com as funcionalidades do Windows 7 é realmente uma boa ideia. A One Box facilita muito o uso dos recursos do navegador, e ajuda a aumentar a área de visualização dos sites…

Em relação ao uso da GPU, é uma boa ideia, mas quando usamos um computador com GPU compatível com o Direct X 10 e outra sem ele, percebemos que não há uma diferença muito significante, ou seja, é quase imperceptível esse ganho de velocidade que é divulgado pelos pesquisadores.

Ah, ia me esquecendo, a inicialização do Internet Explorer 9 é superior a de qualquer outro concorrente (aqui está incluído o Google Chrome 7).

Uma nota para o Internet Explorer 9 seria um 10, mas por causa de algumas instabilidades daremos um 8.5, esperamos que essas instabilidades sejam corrigidas na futura revisão do sistema.

Nota do autor: Se não fossem as instabilidades ele voltaria a ser meu navegador padrão por se apresentar bem mais rápido que seus concorrentes, apesar de que, ultimamente tenho utilizado mais o IE9.

Até o próximo post. ;D

[Dica] CSS3 no IE 6-8

Conforme anunciei no post anterior, venho, através desse post, falar a vocês sobre renderização do CSS3 no IE 6-8.

Alguns amigos nossos, a fim de facilitar nosso trabalho, criaram uns hacks, que abaixo lhes apresento cada um (dos que eu conheço). Para fazer uso de alguns dos hacks é necessario acrescentar uma linha de comando no seu CSS fazendo referencia a um arquivo ‘.htc‘ (HTML Components). Em outros usamos apenas uns filtros.

[Dica] Site em alta performace – Parte 2!

No post apresentei para vocês o Smush.it™, uma ferramenta que faz parte do pacote de add-ons Yahoo! YSlow, disponível para o Firefox 3.0.* e 3.6.*.

Agora venho apresentar a vocês outra forma de compactar imagens.

Eu costumo usar o Adobe Fireworks CS4 para criar meus projetos de design, mas há um probleminha, que nem é um problema quando se tem poucas imagens numa página, mas quando temos uma página recheada de imagens, animações em flash, dentre outras coisa, isso sim é um problema.

Assim que vou cortar as imagens da página, costumo sempre recorrer ao Adobe Photoshop CS4, abro a imagem na qual quero ‘compactar’ e faço uso da opção ‘Exportar para a web’.

Outra coisa que podemos fazer é substituir algumas imagens por códigos CSS. Um dos problemas em se usar CSS é que este não é suportado por todos os navegadores. Exemplo disso é o IE6, IE7 e IE8, que não suportam completamente o CSS3.

O fato de não suportarem completamente CSS3 não implica em você não fazer uso dele já que alguns amigos nossos conseguiram fazer alguns hacks para o IE. Num próximo post falarei mais sobre uso de hacks para uma renderização do CSS3 no IE.

Por enquanto isso é tudo pessoal. Até breve.

[Dicas] Site em alta performance

Para dar inicio a nossa nova série de posts, vou começar com essa grande dica para webdesigns e webmasters.

Mês passado, enquanto estava desenvolvendo uma página para uma empresa, notei que o carregamento da página estava muito lento, por causa das diversas imagens que deveriam ser carregadas, então me veio em mente a seguinte pergunta, ‘como compactar imagens sem perder a qualidade?’.

Depois de procurar muito na web, encontrei uma ferramenta no Yahoo! Developer Network que me ajudou bastante, consegui reduzir as imagens em cerca de 62% sem perder qualidade.

A ferramenta a qual me refiro é a Smush.it™, é um site, mas também pode ser baixado junto com o Yahoo! YSlow, que é um add-on para o Firefox, compatível com as versões 3.0 – 3.6.*.

Vale a pena dar uma conferida, em ambas as ferramentas.

Até um próximo post.

[Atualizado] Novidades no blog!

Depois de alguns meses sem algum post, venho anunciar que o blog será reativado. Mas agora com algumas mudanças, então vamos a elas:

• Como já devem ter percebido, vamos mudar o conteúdo, ou seja, deixarei de falar de informática como um todo  passarei a falar sobre design e afins.
• Em relação aos autores, Humberto, Dimitri e Eu (Rafael França): agora o blog é só meu.
• Os posts antigos serão todos arquivados, para futuras consultas.
• Como o novo enfoque do site será ‘Design e Afins’ irei criar uma área exclusiva para protótipos de re-design de páginas que considero obsoletas.

Por enquanto, isso é tudo que eu gostaria de lhes avisar, em breve começarei a blogar o novo conteúdo.

Abraços!

Sistema Operacional do Google

Bem pessoal o tão falado Google Chrome OS (Chromium OS) não tem nada de mais até agora pelo menos.

Eu instalei e testei na máquina virtual usando o programa Virtual Box, o boot do Google OS é super hiper rápido sendo comparado ao veloz boot do Ubuntu 9.10, em torno de 5 segundos o tempo de carregamento do sistema.

Tutorial de Instalação do Chromium OS (Google Chrome OS Open Source) para USB

Criado por Alexandre Gomes Gaigalas, do Acorda pra Web! e Revisado por Humberto Lima!