Posted: January 2nd, 2010 | Author: andre | Filed under: CSS, Javascript | No Comments »
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')) && (checkElement.is(':visible'))) {
checkElement.slideUp('normal');
return false;
}
if((checkElement.is('ul')) && (!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
Posted: November 5th, 2009 | Author: andre | Filed under: Geral | No Comments »
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?
Posted: October 18th, 2009 | Author: andre | Filed under: Flash, Geral | 4 Comments »
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.
Posted: October 16th, 2009 | Author: andre | Filed under: CSS, Design | No Comments »
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/