out52009

FiveSecond test - Teste de usabilidade

shot0000

Web site muito útil e recomendo a todos os desenvolvedor testarem a usabilidade de seu layout!

logo depois de enviar o projeto, usuários do mundo todo terão acesso ao teste e lhe trarão resultados importantes.

Primeiro basta enviar um projeto

shot0001

Logo depois será enviado um link para seu e-mail para ver os resultados do testeshot0002

Fácil não?

então não perca tempo e acesse já!

fivesecond.com

set12009

Layout packs para referência

layout_packs_rafaelrp-copy

Alguns layouts em (x)HTML+CSS para referência em posições de layouts retirado do css tricks.

Exemplos:
Fixed-Fluid

Fixed-Fluid-Fixed

Fluid-Fixed

Half-and-Half

download

ago62009

Menus CSS para download grátis

Segue um pack de menus em CSS para download grátis que achei navegando por alguns blogs gringos..

screenshot2

Menus são usados com todos os tipos de estilos, cada website tem seu estilo de menu, então caso você não esteja inspirado para criar um menu use algum desse pack que são muito bons e servem como ótima inspiração.

Download aqui!

jul232009

Surfe no Google Wave a partir de setembro!

wavelogo

O Google anunciou que o Google Wave, a nova ferramenta de comunicação e colaboração vai nascer em 30 de setembro de 2009!

O Google Wave é a aplicação web pré-divulgada mais famosa do mundo, até agora somente 25.000 desenvolvedores tiveram acesso ao projeto, o Google acredita que esta ferramenta é um grande passo para a comunicação via web, a ferramenta incorpora e-mail, chat em tempo real, wikis, mircro-blogs e muito mais.

A aplicação é baseada em HTML5 e vai ser disponibilizada como um produto código livre e todas as API estaram disponíveis para desenvolvedores, para quem possui website/blog será possível coloca-lo como widget usando poucas linhas de programação.

O novo sistema operacional do Google promoverá o Google Wave como aplicação.

E agora a melhor parte da notícia, o Google fará com o Wave o mesmo que fez com o Youtube, não rodará no ie6 pelo fato de usar html5 então podemos dizer RIP IE6!

Valeu peessoal :)

jun122009

WhaterColor - Ícones para web estilo água!

Segue para download um pack de icones estilo água para web.

watercolor-preview

Para fazer o download clique aqui!

jun92009

DropBox - Sincronizar arquivos e fotos na web

Dropbox - Secure backup, sync and sharing made easy.

Atualmente a melhor forma de sincronizar arquivos entre computadores distintos na web.

O funcionamento é simples, você sincroniza arquivos de um computador para o outro, de casa para o trabalho ou vice e versa. Você também pode sincronizar arquivos entre computadores com sistemas operacionais diferentes, como na imagem a seguir.

Basta baixar e instalar o DropBox (Download no final do post), assim que instalado será criada uma pasta com nome ‘My Dropbox’ em Meus Documentos, após isto basta copiar arquivos para dentro das pasta, caso queria tornar algum arquivo público basta largar na pasta public.

Read More

mai222009

Google lança versão 2.0 do Chrome

Na tarde de ontem o google lançou a versão 2.0 do seu navegador, em resposta ao safari, a página de novas abas ficou muito parecida com os Top Sites do Safari 4.0, agora com novos builds do WebKit e um motor v8 do javascript deixaram o chrome 30% mais rápido segundo seus testers, o chrome será atualizado automáticamente caso você já tenha instalado uma versão anterior, ou você pode fazer o download clicando aqui.

http://i.zdnet.com/blogs/chrome.jpg

mai172009

Rafael R.P agora está no CSSFury!

É isto pessoal, ontem meu site foi adicionado no CSS Fury uma das grandes galerias de sites da web!

Entre faça sua avaliação e deixe seu comentário!
;)
mai162009

[CSS] 5 dicas úteis para seu CSS

Sempre é bom ter um CSS bem estruturado em seu website, por isso estarei postando a baixo 5 dicas úteis para você implementar em seu CSS e entre elas uma dica para o IEca.

FONT

Você pode por várias propriedades de fontes em uma única linha de código.

h3.texto {
font-size: 28px;
font-weight: bold;
font-family: “Arial”, Helvetica, sans-serif;
color: #333333;
line-height: 24px;
}

Você pode resumir esse código em apenas duas linha:


h3.texto {
font: 28px “Arial”, Helvetica, sans-serif;
color: #333;
}

MARGIN/PADDING


Image illustrating the relationship between content, padding, borders, and margins.


A imagem acima mostra a diferença entre margin e padding, nem preciso dizer que o IEca tem um problema com padding, então citarei também uma dica para o IEca ignorar uma propriedade.

São propriedades de margin:
.caixa {
margin-top: 10px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 5px;
}
Você pode resumir este código em apenas uma linha:
.caixa { margin: 10px 5px 20px 5px }
para a propriedade magin você deve por os seguintes valores: margin: top right bottom left;

CLASS E ID

O símbolo para o seletor class é (.) e o da id é (#), tudo bem mas qual a diferença entre eles?

ID.

  1. As IDs indentificam um elemento específico e devem ser únicas, podem apenas ser usadas uma vez na página.
  2. Consideramos que uma ID esteja em um nível mais alto que a class, já que é mais específica.

CLASS.

  1. Uma class marca um elemento como um membro do grupo e pode ser usada várias vezes.

IGNORADO PELO IE - !important

Essa é uma dica que fará com que um valor seja ignorado pelo IE mas será interpretado por todos os outros browsers.
!important será ignorado pelo IE.

caixa.margin: 20px !important; margin: 10px;
Botamos 20px para margin que será ignorado pelo IE, portanto no IE o margin será 10px.

Block vs Inline

A maioria dos elementos html estão como block ou inline, mas qual a diferença entre eles?

Block.

  1. Sempre inicia em uma nova linha.
  2. Height, line-height,  top e bottom margins podem ser manipuladas.
  3. Width fica como padrão 100% do elemento a qual pertence.

Inline.

  1. Sempre inicia na mesma linha.
  2. Height, line-height, top e bottom margins podem ser manipuladas.
  3. Width fica do tamanho que está o texto/imagem e não pode ser manipulado.
Bom são estas as 5 dicas para css, eu as concidero importantes para o desenvolvimento da sua folha de estilos.
Obrigado. ;)
mai142009

Dicas para iniciantes em web design

Vou citar algumas dicas que ajudam e muito na hora de criar um novo projeto, agradando o cliente e  criando o website de uma forma limpa e agradável.

http://www.azores.gov.pt/NR/rdonlyres/F9EE83FF-2F56-417F-99C9-DB8978A45BAF/156515/ajuda_imagem.jpg

Segue abaixo alguns passos para ajudar aos iniciantes em web design como iniciar seus projetos.

Read More