infinita Design

Simple JQuery Accordion menu

andre — Sat, 02 Jan 2010 21:02:16 +0000

O JQuery torna este tipo de efeito muito fácil de ser implementado. Veremos aqui como é simples.

Primeiro é necessário uma lista com sublistas internas que funcionarão como nosso menu e submenus respectivamente.

Abaixo o codigo no menu:

<ul id="menu">
	<li>
 <a href="#">Empresa</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li><a href="#">Conteúdo</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li><a href="#">Conteúdo 2</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
	<li>
 <a href="#">Informativo</a>
<ul>
	<li><a href="#">Sub Menu 1</a></li>
	<li><a href="#">Sub Menu 2</a></li>
	<li><a href="#">Sub Menu 3</a></li>
	<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>

Em seguida, obviamente usaremos o CSS pra dar um look agradável para o menu. Repare que diferentemente do usual display:none que geralmente é utilizado em submenus, aqui não é necessário devido ao JQuery.

*{
 border: 0;
 padding: 0;
 margin:0;
 }
 body{
 font-family:Tahoma,Arial,Helvetica,sans-serif;
 font-size: 14px;
 font-weight: bold;
 }
 ul {
 border: 1px dotted #ccc;
 width: 200px;
 }
 ul ul{
 border: none;
 width: 200px;
 }
 ul li a {
 display: block;
 text-decoration: none;
 background: #f57327;
 color: #fff;
 padding: 2px;
 outline:none;
 border: 1px solid #b8360b;
 }
 ul li li a {
 display: block;
 text-decoration: none;
 font-size: 13px;
 font-weight: normal;
 background: #f59247;
 border: none;

Agora a mágica do JQuery, para atingir o efeito esperado usamos primeiro o “hide” para esconder nossos submenus que serão abertos com o efeito tipo Accordion. Em seguida, o truque: para cada elemento “a” é adicionado o evento click que mostra ou esconde nossos menus usando o slide criando um efeito realmente bom.

function initMenu() {
 $('#menu ul').hide();
 $('#menu li a').click(
 function() {
 var checkElement = $(this).next();
 if((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
 checkElement.slideUp('normal');
 return false;
 }
 if((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
 $('#menu ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 return false;
 }
 }
 );
}
$(document).ready(function() {initMenu();});

Com este exemplo pode-se notar que é possivel criar efeitos realmente atraentes usando jQuery utilizando muito pouco código, o que agiliza muito o trabalho. O resultado pode ser visto aqui: preview

Botões de validação da W3C sem imagem.

andre — Thu, 05 Nov 2009 18:15:10 +0000

O grande problema destes botões da W3C é que não se encaixam muito bem em qualquer layout.

A solução seria criar outra imagem de botão, mas porque criar um imagem simples se podemos fazer algo com o mesmo efeito usando CSS?

Então utilizando o código abaixo criamos os dois links para a validação:

<a class="w3cbutton" href="http://validator.w3.org/check?uri=referer">
   w3c
      <span>
          xhtml 1.0
      </span>
</a>
<a class="w3cbutton" href="http://jigsaw.w3.org/css-validator/validator?uri=referer">
   w3c
      <span>
         css 2.1
      </span>
</a>

Aí então aplicamos as regras de formatação CSS para os links.

.w3cbutton {
  border: 1px solid #ccc;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size: 8px;
  font-weight: bold;
  background-color: #fff;
  color: #0c479d;
  padding: 0 0 0 3px;
  margin: 10px;
  position: relative;
  text-transform: uppercase;
}
.w3cbutton span {
  background:#FECB65;
  padding: 0 3px 0 5px;
  margin: 0 0 0 3px;
  text-transform: uppercase;
  color: #000000;
}

Pronto, o resultado é bem melhor que os enormes botões da w3c não?

Scite + AS3 + Flex-SDK + PaperVision3D

andre — Sun, 18 Oct 2009 23:38:28 +0000

Scite se tornou meu editor favorito por ser altamente customizável e tornando-o um editor multilinguagem muito bom. Baseado neste aspecto do scite resolvi agora começar a estudar um pouco de AS3, o Flex e o Papervision usando o scite para editar o código ao invés de utilizar o editor embutido do Flash.

A proposta aqui é utilizar o compilador do flex para criar os arquivos SWF sem precisar do flash, deixando o flash somente para edição gráfica do projeto. Para isso é necessário que tenhamos o Flex SDK que pode ser encontrado em:

FLEX 3 SDK : http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk

Dentro do pacote nos iremos encontrar os compiladores, o framework do Flex, e os players 9 e 10 (Flex 3.4 SDK) – o pacote tem aproximadamente 200MB descompactado.
O arquivo que procuramos é o mxmlc.exe localizado dentro de “bin”, este é o arquivo que irá compilar nosso arquivo “.as” e transformá-lo em um “swf”. Se quiser comprovar o funcionamento do mesmo é só arrastar um arquivo “.as” para o executável e ele irá criar o swf baseado neste script.

O Segundo passo é preparar o SciTE, iremos necessitar o SciTE e do arquivo API e .properties para que o SciTe tenha suporte “auto-completion” para AS3.
O SciTE pode ser baixado gratuitamente em:

SciTE(2.01) : http://www.scintilla.org/SciTE.html

Os arquivos api e properties podem ser encontrados aqui:

SciTE AS3 : http://arthurdick.com/projects/as3/

Para utilizar a api AS3 pro Scite é necessário adicionar um linha no seu arquivo de configuração:

import actionscript
(supondo que o seu arquivo actionscript.properties está no mesmo diretorio que o SciTE caso contrário use: “import diretorio/actionscript” onde “diretorio” é onde seu arquivo actionscript.properties está)

Pronto neste ponto você já é capaz de utilizar autocompletion ao editar arquivos AS3.
Agora a parte importante: Fazer o SciTE utilizar o mxmlc.exe para compilar o script “.as”. No meu caso eu adicionei algumas linhas no arquivo actionscript.properties:

#location of FlashPlayers
flashplayer10=caminho_para_o_flex_sdk_3.4\runtimes\player\10\win\FlashPlayer.exe
flashplayer9=caminho_para_o_flex_sdk_3.4\runtimes\player\win\FlashPlayer.exe

#location of mxmlc
mxmlc=caminho_para_o_flex_sdk_3.4\flex_sdk_3.4\bin\mxmlc.exe

e editei algumas linhas de ações do menu:

#disable default flash commands
command.go.subsystem.*.as=1
command.compile.$(file.patterns.actionscript)=$(mxmlc) $(FileNameExt)
command.go.$(file.patterns.actionscript)=$(flashplayer10) $(FileName).swf

Pronto! Agora é só usar Crtl+F7 para compilar o arquivo e F5 para executá-lo usando o flashplayer 9 ou 10.

Depois de fazer esse “trajeto” todo eu ainda queria o papervision, o qual quero muito utilizar:

Papervision : http://code.google.com/p/papervision3d/

Neste ponto já é fácil incluir este framework junto com o Flex, só é preciso baixar o arquivo compilado .swc (Papervision3D_2.0.883.swc na data deste post) e copiá-lo para dentro do diretório frameworks\libs (que também contém o framework do flex)

So far so good…
Neste ponto o SciTE já é capaz de compilar scripts AS3 sem precisar do flash e utilizar o framework PaperVision3D. Só pra testar utilizei o mesmo script que já havia postado aqui e funcionou normalmente.

CSS Font Stacks!

andre — Fri, 16 Oct 2009 03:11:28 +0000

Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma “cara” independente do sistema operacional.

Dependendo do sistema operacional os tipos de fontes instaladas – e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas “Font Stacks” que são “cadeias” de fontes que serão utilizadas para renderizar o seu texto. O princípio é simples, é preciso definir a propriedade “font-family” no CSS de modo que siga uma ordem de uso. Por exemplo:

body{
font-family:Verdana,Geneva,sans-serif;
}

Neste caso, a primeira tentativa de uso seria a “Verdana” que está presente na maioria dos sistemas, se por um acaso não houver suporte para esta fonte, é utilizada a segunda fonte Geneva, num caso raro onde não encontrada esta segunda será utilizada a ultima fonte que é o tipo de fonte genérico “Sans-serif”.

A partir dessa ideologia e após uma busca pela internet encontrei vários casos onde são mostrados font stacks interessantes, esta foi a que achei melhor:

The ‘wide’ sans serif stack

body{font-family:Verdana,Geneva,sans-serif;}

The ‘narrow’ sans serif stack

body{font-family:Tahoma,Arial,Helvetica,sans-serif;}

The ‘wide’ serif stack

body{font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;}

The ‘narrow’ serif stack

body{font-family:'Times New Roman',Times,serif;}

The monospace stack

body{font-family:'Courier New','Courier',monospace;}

Fontes:

http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks
http://www.sitepoint.com/article/eight-definitive-font-stacks/3/
http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/

Web Style Sheets CSS tips & tricks

andre — Thu, 06 Aug 2009 12:46:09 +0000

Algumas dicas e truques encontradas no site da w3c.

Figures & captions

A pinned-down menu

Indented paragraphs

Alternative style sheets

A confetti menu

Getting rid of colored scrollbars (user style sheets)

Even/odd: coloring every other row

A tabbed interface

A chart comparing font styles

Horizontal and vertical centering

Boxes with drop shadows

Text shadows

Rounded boxes and unsharp shadows

fonte:http://www.w3.org/Style/Examples/007/

Custom HTML Form Elements

andre — Wed, 05 Aug 2009 12:36:10 +0000

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.

Custom Form Elements

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Simple Menu Fx – Mootools

andre — Fri, 31 Jul 2009 16:54:00 +0000

Um efeito simples para menu usando o Morph do mootools v1.2.3.

Primeiro criamos o menu:


	Menu Link
	Menu Link
	Menu Link
	Menu Link

;

E um pouco de css pra ficar mais visivel: