KADUNEW.COM/BLOG » Web Design

22 web sites desenvolvidos com HTML5 e CSS3

Carlos Eduardo - Kadu — Tue, 10 Jan 2012 10:39:10 +0000

Fiz esse artigo reunindo sites inspiradores usando HTML5 e CSS3, exemplos brilhantes e para lá de criativos que demonstram o potencial dessas duas tecnologias, e claro, a habilidade e criatividade dos desenvolvedores. Esse post também serve como uma grande fonte de inspiração para você aplicar em seus projetos.

Apesar da linguagem HTML5 ainda não estar totalmente finalizada, há muitos projetos de sites utilizando essa linguagem, que promete revolucionar o modo que os desenvolvedores criam seus sites. Com a presença do HTML5 podemos eliminar a necessidades de plugins de terceiros, permite uma codificação mais semântica e limpa, entre outras vantagens.

Suporte para CSS3 está crescendo rapidamente, os principais navegadores já estão interpretando regras CSS3 (novos seletores, propriedades, etc).

1. Bent the Bodyguard

2. Bounty Bev

3. Digital Hands

4. Get Satisfaction

5. I am Jamie

6. Icaro Ferracini

7. Ivan Asetiawan

8. Matt Hewnsara

9. Mula Design

10. Nike Better World

11. Robedwards

12. Seamco

13. Vision 18

14. Walo

15. Web For Freaks

16. Readiness

17. Clearideaz

18. Scratch Radio

19. nzfestival

20. OK Cool

21. Zoocha

22. Portfolio Rui Molar’s

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

Ferramenta para Upload de layouts

Carlos Eduardo - Kadu — Wed, 23 Mar 2011 13:13:31 +0000

BraUp

Artigo escrito por Renan Dequêch Ferreira.

Olá pessoal, nesta quarta-feira eu vou apresentar uma novidade que vocês devem achar interessante, é o BraUp.com. O BraUp.com é uma ferramenta gratuita para Web Designers, criada para melhorar a forma como se apresentam layouts ao cliente.

Funciona assim: você faz upload do layout e manda o link para o cliente. Ele acessa e a vê o layout direto no navegador. Essa forma acaba ficando mais eficiente porque o cliente tem a visão clara de como o layout vai ficar na tela, não precisa fazer download do arquivo e pode enviar o link para outras pessoas.

Acesse o site BraUp e comece agora mesmo a enviar seus layouts.

É bastante simples e funciona com um só botão.
Espero que gostem!

O artigo acima foi escrito por Renan Dequêch Ferreira criador da ferramenta.

Isso vai interessar você também

10 Crimes de usabilidade que você não deve cometer

Carlos Eduardo - Kadu — Mon, 31 Jan 2011 10:30:21 +0000

A usabilidade de web sites está diretamente ligada à capacidade de permitir que o usuário consiga atingir seus objetivos de uma forma rápida, eficaz e com o menor número de erros possíveis. Deve ser principalmente de fácil aprendizagem.

Ao longo do tempo algumas convenções práticas têm sido desenvolvidas para ajudar a melhorar a usabilidade dos sites em geral, durante a sua concepção e construção. Este resumo de dez crimes de usabilidade destaca alguns dos erros mais comuns entre Web Designers e fornece uma solução alternativa para ajudar a melhorar a usabilidade do seu site.

O site line25 fez uma lista tempos atrás de 10 Crimes de usabilidade que você não deve cometer, achei interessante e resolvi divulgá-las aqui no blog com algumas adaptações.

Não associar label à campos de formulários

Associando label em formulários

Usando o atributo for permite que o usuário clique no rótulo para selecionar os campos de entrada apropriado dentro de um formulário HTML. Isto é especialmente importante para caixas e campos de rádio, dando assim uma maior área clicável para o usuário.

Dessa forma o usuário pode clicar diretamente no campo do formulário (por exemplo, botão de rádio e checkbox) ou na palavra (label) para marcar esse elemento. Isso tem também um grande peso para a acessibilidade em formulários.

Um logotipo que não linka para a página inicial

Logo com link para página inicial

Linkar o logotipo de um site para a página inicial se tornou prática comum, e agora é natural para a maioria dos internautas clicarem sobre o logotipo para voltar a página inicial do site. Também vale a pena mencionar o logotipo deve aparecer na parte superior esquerda. Todo site deve ter um link que leve seu visitante a a página de entrada do site, no caso a página inicial. Isso já é um requisito básico de usabilidade em web sites.

Não destacar os links visitados

Destacar os links visitados

É uma boa prática destacar os links que o usuário já visitou no seu site, principalmente em sites com grande conteúdo onde o seu visitante visitará uma grande quantidade de links. Creio que epenas em sites desse tipo deve ser empregada a técnica.

Destacando os links visitados fica evidente para o usuário as páginas que ele já visitou. Para fazer isso não precisamos de uma regra CSS avançada, porém ela é muitas vezes esquecida pelos desenvolvedores de sites. Não esqueça, sempre mostre aos seus visitantes por onde ele já passou.

Não destacar campos ativos

Elementos ativo em formulários HTML

Você pode usar o seletor focus em vários elementos HTML, mas é super útil quando usado em inputs e textareas de formulários para indicar que o campo está ativo. Utilizando CSS você pode estilizar facilmente esses elementos com uma cor de fundo diferente, uma borda com uma espessura maior, etc.

Imagem sem descrição alt e title

Atributos alt e title

Muitos não sabem a Importância do atributo alt e title. Utilizar o atributo alt no elemento img do HTML não é só bom para a usabilidade quanto também para a acessibilidade e ainda para a otimização de imagens. Lembre-se sempre de adicionar um atributo alt descritivos para suas imagens.

Imagens que tem por finalidade montar seu layout não há necessidade de por esse atributo, até porque as imagens que são inseridas no site com intuito de design devem ser inseridas via CSS, nesse caso não tem como descrevê-las no atributo alt.

Outro atributo importante é o atributo title, ele pode ser usando em links de imagens do tipo ícone, através dele podemos ter uma descrição desse link. Um exemplo é um ícone de um envelope, o title poderia ser “e-mail”.

Imagem de fundo, sem uma cor de fundo

Cor fundo nas imagens

É comum a utilização de imagens de fundo por trás do texto, mas vale a pena lembrar que se as imagens estão desativadas pelo usuário ou simplesmente não carregam, é necessário que haja um tom semelhante na forma de uma cor de fundo para evitar que o texto se torne ilegível. Um exemplo é você ter uma imagem escura de fundo e um texto branco sobre a imagem. Caso essa imagem não seja carregada pelo navegador seria interessante ter uma cor escura no fundo desse elemento, pois assim o visitante do seu site conseguirá ler o conteúdo sem problemas.

Textos longos no conteúdo

Conteúdo longo

Não há nada mais desanimador do que entrar em uma página onde há textos extremamente gigantes, sem títulos, subtítulos e imagens.

Divida o seu conteúdo com imagens, títulos e seções claras para facilitar a leitura do seu visitante. Praticamente ninguém lê textos desse tipo na Web. Saiba como escrever para web, isso é fundamental.

Sublinhar textos que não são links

Texto sublinhado

Todo mundo sabe que o texto que está sublinhado, e está em uma cor diferente é muito provável que seja um link. Não vá confundir as pessoas que visitam seu site colocando texto sublinhado onde não seja link.

Se quer destacar algo, chamar a atenção para uma determinada palavra, tente usar o negrito (strong), é bem melhor.

Utilização de textos justificados

texto justificado

Esta é outra dica que está indo um pouco mais para o lado da acessibilidade, mas também é um ponto importante a considerar. Texto justificado pode gerar alguns problemas de legibilidade, particularmente para os usuários disléxicos (lêem com dificuldade) que podem não conseguir identificar as palavras e letras corretamente, devido ao espaçamento desigual dos parágrafos justificados. Prefira textos alinhados à esquerda a textos justificados.

Não utilizar espaçamentos entre linhas

Espaçamento entre linhas

Utilizando a propriedade line-height do CSS conseguimos criar um espaçamento entre as linhas em um parágrafo, com isso a facilidade de leitura aumenta. Seguido entro em sites onde as linhas estão muito próximas, em terminar de ler uma linha encontro um pouco de dificuldade em ir para a próxima. Textos com espaçamentos adequados são lidos mais rapidamente dos que não tem espaçamento.

Não usar uma navegação breadcrumbs – migalhas de pão

Crie uma navegação secundária, migalhas de pão

As migalhas de pão são utilizadas para mostrar o caminho da página inicial até a página que o visitante está no exato momento. Isso funciona como um esquema de navegação secundária. Você deve usar as migalhas de pão sempre que um site tiver uma hierarquia muito profunda de páginas.

O link original do artigo pode ser conferido em 10 Usability Crimes You Really Shouldn’t Commit

Me siga no Twitter: @kadunew

Isso vai interessar você também

Ferramentas online para Web Designers

Carlos Eduardo - Kadu — Fri, 28 Jan 2011 14:04:30 +0000

Ferramentas para web designers

Hoje em dia existem muitas ferramentas para Web Designers que podem facilmente serem encontradas na internet. Muitas dessas ferramentas servem para realizar tarefas com facilidade e rapidez. Cada desenvolvedor tem sua lista de ferramentas, hoje vou mostrar algumas das ferramentas que uso no meu dia a dia.

Confira algumas dessas ferramentas abaixo, algumas delas vão melhorar sua produtividade durante seu trabalho.

Typetester

Aplicativo para fazer a compação de fontes. As fontes disponíveis são as mais comununs, entre elas, arial, verdana, Georgia. Além de trocar de fonte você pode escolher tamanho, cores e outras configurações…

typetester comparador de fontes

Icon Finder

O uso de ícones em trabalhos impressos e em sites estão cada vez maior. Para achar seus ícones nada melhor que um buscador de icones.

Site de busca de Icones

Rounded Corner

Esse aplicativo gera um código HTML e CSS para simular uma div com cantos arredondados utilizando imagens. O aplicativo vai criar quatro arquivos de imagem, os htmls necessários e o código CSS para colocar cantos arredondados em torno do seu conteúdo. Essa técnica já se encontra ultrapassada uma vez que podemos fazer uso das propriedades CSS3 para tal finalidade.

Rounded Corner

Vecteezy

Obtenha gratuitamente gráficos vetoriais.

Vecteezy gráficos vetoriais

Photoshop Brushes

Pincéis (Brushes) photoshop é uma ótima maneira de acrescentar um toque de beleza e profissionalismo em seus trabalhos. Para pesquisar os pincéis você pode utilizar a opção de filtro e também a opção de versões do aplicativo.

Site com diversos Brushes para photoshop

CSS3 Made Simple

CSS3 Generator - Gerador css3

A grande maioria dos navegadores hoje em dia já tem suporte às propriedades CSS3. Pensando nisso o site CSS3 Generator desenvolveu um aplicativo online capaz de gerar as principais propriedades CSS3 sem a necessidade do desenvolvedor, ou Web Designer saber essas propriedades.

Para usar a ferramenta você seleciona um tipo de efeito que você está tentando criar a partir de uma lista drop-down, modifica algumas configurações e obtém um bloco de código CSS para copiar. Os efeitos incluem cantos arredondados, sombras, gradientes, etc.

Galeria de Inspiração para Web Designer

Uma situação muito comum principalmente para quem trabalha com Design é a falta de criatividade para desenhar seus layouts, ilustrações, etc. Quem já não ficou por horas em frente ao Photoshop com a página branca, sem saber que cor usar, que desenho fazer… Nessas situações é interessante dar uma olhada em “galerias de inspirações para Web Design”, que nada mais são que uma coleção de trabalhos. Esses tipos de sites têm sido extremamente influentes na escolha de Layouts para os projetos dos Designers.

Galeria de Inspiração para Web Designers

Galeria de Inspiração de CSS

Quem trabalha com Internet sabe o poder das CSS. Esse site reúne uma coleção de sites onde o destaque fica por parte das famosas folhas de estilos, o site também pode ser usado como uma fonte de inspiração para desenhar seus layouts.

CSS drive - Galeria css

Me siga no Twitter: @kadunew

Isso vai interessar você também

20 exemplos de páginas de erro 404 criativas

Carlos Eduardo - Kadu — Wed, 19 Jan 2011 13:59:09 +0000

Uma página muitas vezes esquecida pelos desenvolvedores web é a página de erro 404. Resolvi divulgar alguns exemplos de páginas 404 personalizadas para você ver a importância que alguns desenvolvedores dão a essa página, que muitas vezes é deixada de lado.

Uma forma fácil de você não perder e ainda ajudar o visitante é personalizar sua página de erro 404. Algumas coisas que você pode inserir na sua página de erro 404 são: um campo de pesquisa, o menu principal de navegação do site, páginas mais populares e claro, um aviso ao seu usuário sobre o que aconteceu. Apesar de ser uma página que não será muito visualizada (é o que esperamos), é válido gastar algum tempo personalizando sua página de erro. Personalizar essa página pode ser uma estratégia na otimização de sites também.

O que é erro 404?

Abaixo uma breve descrição sobre o erro 404:

Ao acessar uma página ou link de um site o seu navegador fará uma solicitação HTTP ao servidor web onde o site está armazenado. A página de erro 404 (conhecida também por Not Found) é a página apresentada para os visitantes quando tentamos acessar uma página que não exista ou foi removida do servidor web.

Exemplos de páginas 404 personalizadas

1. Jackfig

2. Jhuskisson

3. Slonky

4. Frye / Wiles

5. Apadeloup

6. Blizzard

7. Black Moon Design

8. Deaxon

9. impactideas

10. duoh

11. Heinz

12. MailChimp

13. The Web Motel

14. Shelfworthy

15. Leap Anywhere

16. deviantART

17. Cuoma Design Studios

18. Rockettheme

19. Ferdaze

20. ClubPenguin

Me siga no Twitter: @kadunew

Isso vai interessar você também

Lançamento livro JavaScript do Maujor

Carlos Eduardo - Kadu — Wed, 06 Oct 2010 10:30:06 +0000

Acaba de ser lançado o tão esperado livro de JavaScript do Maujor. O foco principal do quinto livro do Maujor é apresentar a linguagem JavaScript utilizando as mais novas técnicas de desenvolvimento em conformidade com os padrões Web de desenvolvimento. O novo livro do Maujor é um guia da linguagem, com explicações detalhadas e vários exemplos práticos, como são características de todos os livros do autor. Igualmente aos outros livros,os arquivos de exemplo podem ser baixados no site do livro.

O autor salienta que o livro destina-se a profissionais com conhecimento da linguagem que precisam reciclar seus conceitos e também para estudantes e iniciantes na linguagem JavaScript.

Confira o primeiro capítulo do livro JavaScript (45 páginas) – Guia do programador no formato PDF.

Parabéns ao grande mestre Maujor por mais esta obra.

Isso vai interessar você também

16 fonts estilosas para download

Carlos Eduardo - Kadu — Tue, 05 Oct 2010 12:10:08 +0000

Todo bom designer sempre está à procura de novas fontes. Se você é um designer sabe a importância da escolha de uma fonte adequada que transmita instantaneamente a mensagem desejada, e ainda prenda a atenção do leitor. A fonte além de transmitir a mensagem e prender a atenção do leitor deve combinar com o layout a ser usado, seja uma revista, folder ou Web site.

Abaixo você encontra uma relação de 16 fontes estilosas para Download. Clique no nome da fonte para baixar.

Rabid Science

Capture it

Destroyed License Plate

Fonte: Dafont

Isso vai interessar você também

10 ferramentas para verificar a velocidade de abertura do seu site

Carlos Eduardo - Kadu — Mon, 06 Sep 2010 11:00:33 +0000

Um site com carregamento rápido e bom desempenho no carregamento de scripts e folha de estilos é o primeiro passo para uma presença online bem sucedida. Ter um site lento significa perda de clientes e dinheiro mesmo que eles estejam interessados em seu produto ou material. A maioria dos visitantes geralmente passam muito rápido pelos sites, ninguém gosta de esperar meio século até finalmente carregar um conteúdo em uma página.

O Google já pode estar levando a velocidade de carregamento dos sites em consideração na determinação do seu ranking nos resultados de pesquisa. Isso é mais um grande motivo para nos preocuparmos com o tempo de carregamento do nosso site. Abaixo listo dez ferramentas para testar seu site com apenas alguns cliques do mouse.

1 Webslug

Permite comparar a velocidade de abertura do seu site com os dos seus concorrentes. Ao final do teste o site mostra qual o site se consagrou o vencedor e tempo de carregamento de ambos os sites. Webslug é uma forma de identificar possíveis problemas com o desempenho do seu site.

2 Pingdom

Teste o tempo de carregamento de todos os objetos do site (html, imagens, javascript, css, iframes e outros). No final dos resultados do teste, você verá o relatório do tempo de carregamento do site, tempo de carregamento de cada elemento, tamanho dos elemento e o número total de elementos. Esta ferramenta simula a forma como uma página é carregada em um navegador web.

3 Load Impact

Este é bom para sites que recebem muitos acessos. A ferramenta desse site executa testes simples de carga simulando até 50 usuários simultâneos. Caso deseje simular com mais usuários você terá que comprar o serviço. Antes de usar a ferramenta é necessário fazer um cadastro no site.

4 Octa Gate

Permite que você monitore quanto tempo leva para um usuário baixar uma ou mais páginas do site. Após concluir o carregamento as informações são apresentadas em uma grade.

5 Web Tool Hub

Com esta ferramenta você é capaz de saber a velocidade de carregamento do seu site em diferente velocidades de conexão. Ao final do teste, você saberá o tamanho da página e tempo de carregamento de todo conteúdo para várias velocidades de conexão. Marcando a opção Show advanced information (mostrar informações avançadas) você poderá ver informações mais detalhadas do resultado.

6 Page Speed

Um plugin para o Firefox que analisa o desempenho de suas páginas web.

7 PageTest

Plugin para o Internet Explorer que exibe visualmente os arquivos solicitados pelo navegador, ele também fornece sugestões sobre como melhorar o desempenho da página medida.

8 SelfSeo

Simples, mas útil para testar a velocidade de carregamento de websites. Se você não quer muitos detalhes, é a melhor opção para começar analisar o tempo de carregamento do seu site e de seus concorrentes, já que a ferramenta permite analisar mais de um site ao mesmo tempo.

9 Light Speed Now

Teste a velocidade de desempenho do seu Website, e depois receba um relatório com todas informações a respeito da verificação em seu e-mail.

10 YSlow by Yahoo

Analisa as páginas web e sugere soluções para melhorar o seu desempenho com base em um conjunto de regras para as páginas da Web de alto desempenho. YSlow by Yahoo é um plugin para Firefox que funciona integrado ao Firebug – Uma ferramenta de desenvolvimento web.

Referências

Isso vai interessar você também

Como será seu rosto daqui 20 ou 30 anos

Carlos Eduardo - Kadu — Tue, 17 Aug 2010 16:30:57 +0000

Alguma vez você ja parou para pensar como você será daqui 20 ou 30 anos? in20years é uma aplicação web bem divertida que transforma o rosto das pessoas como se tivesse passado muitos anos. O aplicativo está usando a tecnologia de detecção de rosto morphing que é uma transformação que mapeia uma imagem em outra, alterando tanto a sua forma, intensidades e tranformações de tonalidades.

Envelhecendo suas fotos

Tudo que você precisa fazer é carregar uma foto de rosto frontal e preencher algumas opções. O site oferece três opções para a manipulação: sexo (masculino ou feminino), a progressão da idade (20 ou 30 anos ) e se você é usuário de drogas ou não.

Se você está procurando algo divertido para fazer com suas fotos ou de seus amigos, o site In20Years é um ótimo divertimento. O serviço é gratuito e você não precisa se registrar para usar. Além disso você pode salvar os resultados ou enviar o link para seus amigos.

Acesse o site in20years.

Isso vai interessar você também

Nenhum post relacionado

Paleta de cores HTML

Carlos Eduardo - Kadu — Thu, 12 Aug 2010 14:59:34 +0000

As cores têm um profundo impacto nos visitantes de um site. Um Web Designer sabe que a harmonia das cores de um Website é importante para prender a atenção do seu público-alvo em um longo período de tempo.

Às vezes, a escolha de cores para um site parece ser uma das tarefas mais fáceis, porém aí que nos enganamos, muitas vezes é a tarefa que acaba levando mais tempo. Pensando nisso foi desenvolvido o Coloreminder que é uma ferramenta web gratuita, que ajuda os desenvolvedores a encontrar facilmente as variações de uma determinada cor. Não vai resolver 100% seus problemas, mas é uma boa ferramenta de auxilio online para escolha de cores.

Fica aí a dica!

Isso vai interessar você também

Nenhum post relacionado