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.

Zen Coding – Uma nova e ágil maneira de escrever HTML e CSS »

10set 2010, às 17:16

Publicado em Ferramentas add-ons | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Nas minhas perambulações na web o Zen Coding cruzou o meu caminho e fez meus olhos brilharem. Conheça este brilhante plugin para os mais populares editores HTML; que faz para o HTML o que o jQuery tem feito para o javascript.

Com o conceito de agilizar a escrita do código HTML/CSS, o Zen Coding, desenvolvido por Sergey Chikuyonok do Smash Magazine elimina a tarefa de escrever divs e seus conteúdos e classes, por uma simples sintaxe CSS que com um simples comando por atalho de teclado é expandida transformasse como passe de mágica (não é magia é tecnologia!) na estrutura HTML com suas devidas classes e ids.

Assista o vídeo de como funciona o Zen Coding:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Excelente, não?

Tudo muito simples e rápido, após a digitação de uma sintaxe simples, como esta:

   1: div#menu>ul>li*5>a

Selecione está linha e pressione o devido atalho onde padrão é “Ctrl +,” mas pode variar de aplicativo para aplicativo, no caso do Aptana que explicarei a seguir como instalar, o atalho será “Ctrl+e”. A sintaxe se expandirá na estrutura HTML, abaixo:

   1: < div id="menu">

   2:     < ul>

   3:         < li>< a href="">a>li>

   4:         < li>< a href="">a>li>

   5:         < li>< a href="">a>li>

   6:         < li>< a href="">a>li>

   7:         < li>< a href="">a>li>

   8:     ul>

   9: div>

Como instalar o Zen Coding no Aptana (Windows)

Ainda não comentei sobre o Aptana aqui, mas em breve farei um post sobre esse poderoso IDE. Vamos  ao que interessa dá um trabalhinho, mas é moleza, você vai precisar do seguinte: Aptana studio e do Plugin Zen Coding

Com o Aptana studio instalado e o Zen Coding em mãos, crie um novo projeto: File > New > Other > Web > Default Web Project.

Na tela seguinte de o nome do projeto de zencoding.

Clique com o botão direito sobre o projeto criado intitulado zencoding, no menu flutuante siga: New > Folder; nomeia a pasta  como scripts.

Extraia o conteúdo do arquivo Zen.Coding-Aptana.v0.6.0.1.zip, copie (Ctrl+c) todo o conteúdo extraído e cole (Ctrl+v) na pasta scripts do projeto zencoding

O resultado será este:

Agora na barra de menu no item Scripts, você terá acesso as ações do Zen Coding, veja a imagem:

Pronto! O Zen Coding está instalado, pratique que com certeza valerá a pena. Caso não funcione reinicie o Aptana.

O atalho não funciona (ou não existe)!

Caso tenha problemas com atalho de expandir a sintaxe no Aptana ou ele não venha ativado, basta fazer o seguinte:

Na pasta script do projeto zencoding, encontre o arquivo Expand Abbreviation.js e altere o valor do  item Key para M3+E (onde M3 é a tecla Alt). Veja o exemplo:

   1: /*

   2:  * Menu: Zen Coding > Expand Abbreviation

   3:  * Kudos: Sergey Chikuyonok (http://chikuyonok.ru)

   4:  * License: EPL 1.0

   5:  * Key: M3+E

   6:  * DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript

   7:  * 

Mais detalhes sobre o Zen Coding sobre o Aptana Studio: AptanaHowToEn(em inglês)

Editores com suporte oficial

Estes editores tem suporte total ao Zen Coding: Aptana/Eclipse, TextMate, Coda, Espresso, Komodo Edit/IDE, Notepad++, PSPad, ,editArea.

Outros editores:

Estes editores não tem garantia de suporte a todos os recurso do Zen Coding: Adobe Dreamweaver, Sublime Text, UltraEdit, TopStyle, GEdit, BBEdit/TextWrangler, Visual Studio, EmEditor, Sakura Editor.

Zen Coding no Dreamweaver:

Basta baixar e instalar a extensão: Zen.Coding-Dreamweaver. Não fiz testes em quais versões do Dreamweaver o Zen Coding funciona.

Mais informações sobre o Zen Coding: Zen Coding a new way to write html code(em inglês)

Ainda estou experimentando o Zen Coding, mas pelo que vi até agora me pareceu realmente fantástico. Experimente também e não deixe de me contar o que achou.

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.

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

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

JQuery MultiSelect Plugin »

03fev 2010, às 08:24

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

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:

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)

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 | Deixe o seu comentário (2) »

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

Cheat Sheet para Webdesigners »

24set 2009, às 08:56

Publicado em Recursos | Comentários desativados »

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.