Quake 2 em HTML5 »

05mai 2010, às 09:37

Publicado em HTML / CSS HTML5 | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Graças a tecnologias implantadas junto a HTML5 você pode jogar Quake 2 no seu navegador web!

HTML5 ainda é uma tecnologia em desenvolvimento e a cada dia somos apresentados as suas capacidades em uso extremamente avançados, como jogos. Embora a HTML5 seja ainda uma criança de colo veja um Exemplo do que já está sendo desenvolvido com ela.

Se você é um Jogador (Gamer) das antigas ou nem tão das antigas assim, com certeza já ouviu falar ou jogou Quake 2, que junto ao DOOM e Castle Wolfenstein, forma o time percurso do jogos em primeira pessoa, como o hoje famoso Call of Duty.

Muito bem, por meio do uso do WebGL, a API Canvas e elementos da HTML5 e mais alguns funcionários da Google. Somos apresentados a um dos melhores exemplos de jogo em browser com HTML5 Já visto. Para joga-lo é necessário realizar o download e alguns passos, siga estas instruções texto está em inglês, mas é simples de seguir.

É necessário o uso do Safari ou Google Chrome, pessoalmente recomendo o Chrome, pois garante uma jogabilidade a 60fps.

Leia Mais »

HTML5 Less Framework »

04mar 2010, às 09:12

Publicado em Framework HTML / CSS | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Um poderoso html5 framework para construção de layouts inteligentes para sites com diferentes larguras de telas, essa é a premissa do Less Framework desenvolvido por Joni Korpi e distribuído sobre Creative Commons.

html5-framework

Less Framework é um framework (dã) CSS para construção de layouts para web multi-flexível. Ele contém uma grid de oito colunas otimizado para um line-height de 24px, bem como um conjunto de presets para tipografia com base no número de ouro que se encaixam em ritmo vertical da grid.

Less Framework funciona perfeitamente no Chrome, Safari 3.0+, Firefox 3.0+ e Internet Explores 7+. E se ajusta inteligentemente em uma única coluna em navegadores de dispositivos com tela pequena.

Leia Mais »

Galeria de sites em HTML5 »

24fev 2010, às 08:26

Publicado em HTML / CSS | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

html5 gallery

HTML5 Gallery tem 2 objetivos principais, o primeiro deles é ser uma vitrine para sites que usam HTML5 para marcação da sua estrutura e compreender como as pessoas estão interpretando a nova especificação e como eles as implementaram. Isto leva ao segundo objetivo que é ajudar as pessoas a aprender HTML5 e como ela deve ser utilizada e implementada.

sites-html5

Os idealizador Richard Clark espera com este projeto que os desenvolvedores de navegadores vejam quantas pessoas estão implementando o HTML5 e que assim comecem a adicionar mais suporte em seus motores de renderização de modo que não precisemos mais usar css em elementos que não são realmente necessários e precisar confiar no javascript na criação de elementos.

Você pode seguir @html5gallery para receber atualizações sobre novos sites adicionas à galeria.

Visite os links a seguir e comece seus estudos em HTML5:

Leia Mais »

JQuery MultiSelect Plugin »

03fev 2010, às 08:24

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Eric Hynds do erichhynds.com ´gastou algumas horas dos seus últimos meses desenvolvendo um plugin para jQuery que transforma o controle SELECT do HTML comum em uma elegante lista de múltipla escolha.

Agora que o plugin está o suficientemente estável e com boa velocidade de resposta Eric o disponibilizou para download em seu blog e ainda incluindo suporte a temas!

Confira as imagens:

jquery-multiselecao

Alguns recursos:

Suporte a temas
Suporte a Optgroup
Cabeçalho opcional com opção de marcar todos / desmarcar todos
Alteração fácil de velocidade do fade, altura do recipiente de rolagem, texto, links.
Apenas 5.3Kb (minified)

Veja o demonstrativo

Download source (9,5 Kb) ou minified (5.3Kb)

Leia Mais »

CSS3 - Border-radius / Cantos arredondados »

05dez 2009, às 08:08

Publicado em HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Com a CSS3 a W3C oferece algumas novas opções, das quais uma boa é a propriedade border-radius. O Mozilla Firefox e Safari 3+ já implementaram está função, que permite criar cantos arredondados: Veja um exemplo:

Apenas um simples exemplo

O código para este exemplo acima é bem simples:

Os cantos podem ser tratados de maneiras individuais e com formas diferente para os mozilla tem sua própria maneira de tratar está propriedade diferente do que é a especificação. No mozilla Firefox é tratado com -moz-border-radius-topright , já para os navegadores que utilizam o webkit como renderizador -webkit-border-top-right-radius:

Usuários do Mozilla/Firefox e Safari 3 poderão ver o canto superior esquerdo desta caixa arredondado.

Usuários do Mozilla/Firefox e Safari 3 poderão ver o canto inferior esquerdo desta caixa arredondado.

Usuários do Mozilla/Firefox e Safari 3 poderão ver o canto superior direito desta caixa arredondado.

Propriedades para cada canto no mozilla e webkit:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Leia Mais »

Transparência com CSS em todos os navegadores »

03dez 2009, às 07:09

Publicado em HTML / CSS | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

A transparência é um interessante e prático recurso da CSS e faz parte do grupo de propriedades que são tratadas completamente diferente dependendo do navegador. Para fazer com que cada navegador, interprete corretamente são necessárias 4 declarações CSS distintas. Que com a graça do nosso Senhor Jesus Cristo, amém, não interferem uma nas outras. Use como desejar, só cuidado para não gerar muita confusão, aqui vai um exemplo de transparência em 50%:

.transparência_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Entenda o que é cada uma dessas propriedades CSS:

filter: alpha (opacity = 50); Está é própria para o IE.

-moz-opacity:0.5; Com está propriedade você dá suporte as versões antigas do Mozilla.

-khtml-opacity: 0.5; Está é a forma para as versões antigas do Safari (1.x), de quando o motor de redenrização que era usado ainda era referido como KTHML, diferente do webkit que é hoje. Mas continua funcionado nos navegadores Safari atuais.

opacity:0.5; Este é o mais importante, porque é o padrão atual no CSS. Está propriedade irá funcionar na maioria das versões do Firefox, Safari e Opera. Está seria a única propriedade necessária se todos os navegadores dessem suporte aos padrões atuais. Adivinha quem está no furo??

Leia Mais »

Cheat Sheet para Webdesigners »

24set 2009, às 08:56

Publicado em Recursos | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Posso afirmar que você não lembra de todos os atributos, classes, tags, funções e atalhos que todo desenvolvedor web precisa conhecer no dia a dia, certo ou errado?

É aí que entra uma Cheat Sheet, uma “colinha”, para te ajudar naquele momento em que a memória falhar (tá lembrando do colégio?). A Cheat Sheet é um documento que contém as informações mais básicas sobre um software, linguagem e por aí vai.

Leia Mais »

HTML 5 Digest »

18set 2009, às 08:19

Publicado em HTML / CSS | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Para começar a entender o HTML 5

Leia Mais »

Editor html e javascript online »

25ago 2009, às 19:55

Publicado em Ferramentas | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

UIzard é uma aplicação web-browser para desenvolvimento web basicamente em html e javascript. Você pode adicionar e organizar componente de interface facilmente arrastando e soltando os no stage de trabalho. Você também pode editar os códigos html e javascript dentro do próprio ambiente do navegador e visualizar os resultados no momento que quiser com apenas um clique.

Leia Mais »