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.

CSS Framework – 960 Grid System »

03mai 2010, às 07:48

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

publicado por: Magno Valdetaro

Framework

Segundo a Wikipédia um framework se resume em uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.

Mas está definição é muito complicada prefiro está do imasters:

Frameworks são estruturas de códigos definidas onde um projeto de software, seja ele web ou não, pode ser criado e desenvolvido. Frameworks podem incluir programas de suporte, bibliotecas de código, linguagens de script ou qualquer outro tipo de software para auxiliar no desenvolvimento.

Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.

Em CSS, frameworks geralmente são um conglomerado de arquivos css com coisas base para tipografia, estrutura de layout, menu. Sua utilização deve ser muito cuidadosa, pois utilizar frameworks em desenvolvimento XHTML e CSS pode não trazer a mesma produtividade do que se você estivesse usando um framework para PHP, JavaScript. É importante que o desenvolvedor saiba ler e compreender o código que ele está escrevendo.

Veja todo o artigo do Imasters sobre framework.

CSS Framework

A definição do termo na Wikipédia é a seguinte: “trata-se de uma biblioteca pré-configurada cujo objetivo é facilitar a criação de layouts o mais próximo possível dos padrões web”.

960 Grid System

Apesar de algumas pessoas acharem que grids limitam a criatividade, elas na verdade são muito úteis e funcionais e aceleram o processo de produção. Goste ou não, as páginas web essencialmente giram em torno de formas de caixas. Inevitavelmente, estes retângulos têm de se unir de alguma forma ou de outra para formar um desenho. Um sistema de grid é uma técnica adota para organizar conteúdo a muito tempo em páginas impressas e nos últimos anos vêem sendo utilizada em peso também para aplicações web.

960 Grid System é um framework com 960px de largura (por isto leva este nome), dividido em 24, 16 ou 12 colunas.

Veja a referencia visual das grids.

O pacote tem 180Kb, mas não se assuste este não é o tamanho do arquivo CSS, o pacote consiste de um arquivo para impressão onde você pode rascunhar seu layout ou desenhar seu wireframe manualmente, modelos para Fireworks, Photoshop, OmniGraffle e outros. O 960.css arquivo em si é apenas 3,6 KB quando comprimido.

Veja o tutorial em vídeo de como utilizar o 960 Grid system:

Sublime Video – Video Player em HTML 5 »

16abr 2010, às 08:26

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

publicado por: Magno Valdetaro

Sublime Video HTML5 é um player de vídeo que utiliza as vantagens do HTML5 para dispensar  o plugin do flash para reprodução de vídeos nos navegadores. Ele suporta modo full-screen com transições de zoom-in/out. Há também controles avançados em um painel que pode ser arrastado.

Sublime será lançado em breve para download gratuito, siga @Jilion no twitter para ser noticiados de seu lançamento

Lista de ferramentas muito úteis para desenvolvedores CSS3 »

13abr 2010, às 09:38

Publicado em Ajax/Javascript/Jquery CSS3 Ferramentas HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

De um modo geral, CSS é muito fácil de se entender e aprender. Mas quando os fabricantes de navegadores começaram a implementar recursos da CSS3, as coisas tornaram-se pouco complicadas. Devido principalmente por dois motivos: primeiro, muitas das novas propriedades CSS3 (por exemplo, a transition, gradient e transform) não são tão simples, e por este motivo, temos de usar extensões específicas de cada navegador.

Até o momento nossos melhores amigo são os geradores de CSS3, as cheat sheets, os guias de referência e as soluções em Java script.

Veja agora a lista de ferramentas úteis para desenvolvedores CSS3:

Geradores

CSS3 Please!

A primeira da lista é a CSS Please ferramenta usada para gerar de regras CSS3, suporta: border-radius, caixa-sombra, o gradiente linear), cores RGBA (, de transformação (rotação), a transição e @ font-face.

CSS3 Generator

Já comentado aqui no blog CSS3 Generator, suporta: border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

CSS3 Sandbox

Mais um gerador CSS3 para Linear Gradientes ,Gradientes radiais , Texto Shadows , Box Shadows , Transforma eStroke texto.

@ Font-face Generator

Quer utilizar fontes não padrão no seu website, o @Font-face Generator te ajuda na tarefa de gerar regra da propriedade @font-face.

CSS3 Gradiente Generator

Gere gradientes linear com CSS3 com ajuda do CSS3 Gradiente Generator

CSS Border Radius

Gera a propriedade borde-radius para o Mozilla, Webkit e a sintaxe padrão.

Webkit CSS3 Generator

Simples gerador CSS que ajuda você a entender as capacidades da CSS3 introduzidas pelo WebKit.

CSS3 Learning Tool

Ferramenta dinâmica que verificar se a propriedade é suportada pelo navegador em uso e aplica o prefixo para este.

Soluções em JavaScript

Modernizr

Uma excelente biblioteca Java script que detecta a disponibilidade de funcionalidades nativas HTML5/CSS3 e oferece uma maneira de manter o controle sobre seu site, independente das capacidades do navegador. Se gostar do mootools, você pode usar o MooModernizr.

CSS3 pseudo-class Selector Emulation

Permite o uso de pseudo-classe no internet explores. Basta incluir o script em suas páginas e começar a utilizar esses seletores em sua folha de estilo.

CSS3 support for Internet Explorer 6, 7, and 8

IE-CSS3 é um script que oferece suporte a CSS3 para os navegadores Internet Explorer, vários dos estilos populares estão disponíveis.

ie7-js

Mais uma biblioteca para fazer o Internet explorer se comportar como um browser compatível com as normas.

Sizzle - Seletor JavaScript Library

Sizzle suporte praticamente todos os seletores CSS3  -  isso inclui até mesmo alguns raramente usados.

Se achou este post útil não deixe de comentar ou repassar para amigos.

Gerador de propriedades CSS3 »

10abr 2010, às 11:34

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

publicado por: Magno Valdetaro

Com a constante evolução da internet e ascensão do CSS3 os designers têm de manter-se atualizados, e para isso, tem surgido cada dia mais e mais tutoriais na web a respeito das regras do CSS3.

Mas para você (como eu) que ainda não está familiarizado com estás “novas” regras Randy Jensen deu uma forcinha criando o CSS3 Generator.

CSS3 Generator permite através opções em um menu, gerar e personalizar a propriedade escolhida, veja a lista de propriedades disponíveis no CSS3 Generator:

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline

Já os Selectors e Gradients não estão disponíveis diretamente no gerador caso queira sabe mais sobre Selectors visite o artigo 456 Berea St's CSS3 Selectors Explained, já para a propriedade Gradientes basta usar o CSS3 Gradient Generator.

Além de permitir  o entendimento de cada uma destas propriedades listadas acima o CSS3 Generator informar qual navegador dá suporte a cada uma das propriedades disponíveis.

Como preparar seu site para o Apple iPad »

09abr 2010, às 07:29

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

publicado por: Magno Valdetaro

O Safari no iPad é capaz de proporcionar uma muito linear a do Desktop. Com o motor WebKit, uma tela de 9.7 polegadas e conectividade a Internet é certo que seu site bem montado funcionará bem e ainda permiti criar novos toques, proporcionando uma experiência unica para seus clientes e visitantes que usam esta plataforma, considerando apenas algumas diferenças específicas entre outras plataformas e o Ipad.

Caso não tenha acesso a um Ipad você pode testar seu site usando o iPhone Simulator (Hardware -> Device - IPad>) que está disponível do IPhone OS 3.2.2 SDK beta (necessário cadastro). Com o simulador em mãos basta seguir as instruções das na nota técnica TN2262: Preparando o conteúdo da Web para o iPad (em inglês).

Veja um vídeo do iPhone simulator em uso:

Não deixe de me contar o que achou desta dica.

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.

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.

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 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.

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:

• Aprendendo HTML5
• HTML5

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:

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:

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

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??