Gerar uma base CSS a partir de um HTML–Bear CSS »

15fev 2012, às 16:17

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

publicado por: Magno Valdetaro

É comum que ao iniciarmos o desenvolvimento de um novo site, começamos escrevendo o código de estrutura (HTML) já aplicando algumas marcações da folha de estilo (CSS), ou seja IDs e Classes.

O Bear CSS vem dar uma forcinha na hora de criar a folha de estilo, como base no arquivo HTML ele gera uma folha de estilo com todas as IDs e Classes aplicadas no HTML.

Seu uso é interessante em um projeto grande com um HTML muito longo, mas por final, no pior dos casos você ganha de 5 a 15 minutos ou mais para aproveitar a vida com outra coisa ou jogando Minecraft ao invés de ficar digitando uma série de Classes ou IDs!

Wallaby - Convertendo Flash para HTML5 »

15mar 2011, às 16:50

Publicado em Ferramentas Flash HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

Todo mundo sabe que os portáteis da Apple não oferecem suporte ao flash e que os próximos iMacs e Macbooks não virão com o plug-in do flash player já instalado. Muitos dizem que isso é implicância do nosso tio Jobs, Steve Jobs, mas para mim é apenas uma doce vingança pela Adobe ter deixado de lado o primeiro Macintosh quando se negaram a converter (ou refazer) os seus programas do Apple 2 para o novo bebê de Jobs.

Mas chega de história. A notícia é que a Adobe parece ter se rendido e está disponibilizando na Adobe Labs uma ferramenta de interface simples batizada de Wallaby, que faz a conversão de animações em Flash para HTML5, sim, é isso mesmo. Ainda esta em fase de teste, e não dá suporte completo a todos os recursos do flash, mas mesmo assim já é bem vinda.

Wallaby está disponível para download aqui e mais informações no site Adobe Labs

Gradiente estilo Photoshop com CSS puro »

27nov 2010, às 11:07

Publicado em CSS3 HTML / CSS HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

O Ultimate CSS Gradiente Editor criado por Alex Sirota é uma avançada ferramenta online com recursos interessantes para desenvolvedores web. Como muitos aqui já devem saber o HTML5 junto ao CSS3 introduziu recursos interessantes e uma das características é a capacidade de especificar gradientes usando o CSS3 puro, sem ter que criar imagem e repetir no fundo do elemento para criar o efeito de gradiente com leveza.

Importante lembrar que até o momento desta publicação este recurso só está disponível em versões recentes do Firefox, Chrome e Safari. Os gradientes são resultantes de CSS Cross-browser que irão funcionar perfeitamente nestes navegadores, já no Internet Explorer exibira um gradiente simples.

Vale também conferir as documentações de CSS Gradiente: no Firefox, Safari e Chrome (Webkit) e Internet Explorer.

CSS3 no Internet Explorer com CSS 3 PIE »

18out 2010, às 07:00

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

publicado por: Magno Valdetaro

Enquanto o Internet Explorer 9 não chega e ganha espaço entre o internautas para aliviar um pouco do sofrimento dos desenvolvedores web em relação as vantagens do CSS3, somos obrigados a utilizar algumas alternativas eficientes, mas não ideais como o CSS3 PIE.

CSS3 PIE traz algumas das características mais convenientes e úteis do CSS3 como: bordas arredondadas, sombras suaves, preenchimento gradiente, múltiplas imagens de fundo. No site do desenvolvedor há a informação de que outras funções estão em processo de implementação.

Esses são alguns atrativos da CSS3 que todo designer gosta e por muitas vezes costuma usar, mas acaba se limitando por conta dos processos difíceis e demorados, envolvendo sprites complexos (ou nem tanto assim), marcações não semânticas, código extra, e bibliotecas javascripts, entre outros hacks.

A proposta do CSS3 PIE é eliminar algumas limitações impostas ao desenvolvedor, devido à falta de suporte do Internet Explorer. Por meio do PIE acrescentamos ao Internet Explorer a possibilidade de entender algumas das propriedades da CSS3, Considere o seguinte estilo:

   1: #elemento {background:#EEE; padding:2em; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em;}

Esta linha resulta em uma caixa com cantos arredondado em qualquer um dos navegadores modernos, exceto, o IE 6, 7 e 8. No entanto, adicione a seguinte regra  ao elemento:

   1: #elemento {... behavior: url(PIE.htc)}

E apenas isto! agora temos cantos arrendados no Internet Explorer.

Veja alguns exemplos, leia a documentação e e faça o download do CSS 3 PIE.

Faça do seu navegador o seu arcade com Akihabara »

14out 2010, às 11:59

Publicado em Ajax/Javascript/Jquery HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

Akihabara é uma área famosa de Tóquio, onde se concentra um dos maiores complexos de tecnologia do mundo, lotados de computadores, eletrônicos, animes e tudo o que há de bom no mundo.

Mas este não é um blog de viagens, Akihabara que quero apresentar à você é um conjunto de bibliotecas, ferramentas e presets para criar jogos no estilo da era 8/16bit em javascript que rodam no seu navegador, sem qualquer plugin. Akiahabara faz uso de um pequeno subconjunto de características do HTML5 que já estão disponíveis na maioria dos navegadores atuais.

Os jogos desenvolvidos entregam resultados agradáveis  e executam da mesma maneira em todos os navegadores e em todas as plataformas suportadas incluindo plataformas moveis e com interface touchscreen e multitouch, como iphone, ipad, e alguns dispositivos com Android.

Se você deseja fazer o download do pacote completo, com todos os demos e áudio, você pode encontrar a versão de desenvolvimento (e colaboração) no Github. (este software é GPL2/MIT licenciado)

Easy front-end Framework »

06set 2010, às 08:00

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

publicado por: Magno Valdetaro

Conheça Easy framework e acelere a produção das três camadas do front-end (estrutura, estilo e de interação).

Projetado por Alen Grakalic criador do blog CSS Globe para tornar sua vida um pouco mais fácil como ele mesmo cita, o Easy front-end Framework começou como um projeto pessoal e, em seguida, como um monstro de frankenstein, se transformou em algo maior. A ideia por trás dele é reduzir a quantidade de tempo gasto na criação da base do HTML através da reutilização de técnicas de codificação, sem se preocupar com questões sobre renderização do navegador, junto com inúmeros plugins javaScript para executar tarefas simples e também com convenções de nomenclatura da CSS.

Mas, por que usar o Easy front-end framework?

Por ser um framework tudo-em-um com uma biblioteca javaScript produzida com o velho conhecido jQuery, este que já facilita muito as funções interativas, ele também inclui uma biblioteca pré-formatada e codificada de CSS e HTML com blocos de conteúdo que você pode simplesmente copiar e colar em seu modelo html.

Uma verdadeira solução para front-end que você poderá facilmente usar como foi concebida ou personalizar para atender às suas necessidades

Experimente, não vai doer.

Como toda novidade é necessário um tempo de adaptação. Só então podesse falar se algo é bom ou ruim, útil ou não, sugiro que assista ao screencast abaixo, veja a documentação (em inglês) e dê uma espiada no demonstrativo.

Download do Easy front-end framework

Quake 2 em HTML5 »

05mai 2010, às 09:37

Publicado em HTML / CSS HTML5 | Comentários desativados »

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 | Comentários desativados »

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.