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: August 5th, 2009 | Author: andre | Filed under: Geral | No Comments »
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/
Posted: July 31st, 2009 | Author: andre | Filed under: Geral, Javascript | No Comments »
Um efeito simples para menu usando o Morph do mootools v1.2.3.
Primeiro criamos o menu:
<ul id="menu">
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul>
;
E um pouco de css pra ficar mais visivel:
<!--
* {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul#menu {
width: 200px;
list-style: none;
}
ul#menu li{
border-bottom:1px solid #fdfdfd;
height:20px;
background:#F9F9F9;
}
ul#menu a {
text-decoration: none;
color: #993300;
}
-->Em seguida o script para o menu funcionar:
window.addEvent('domready', function(){
//Menu
var menu = document.getElementById('menu');
var li = menu.getElementsByTagName('li');
for(x=0;li.length>x;x++){
el = $(li[x]);
el.addEvents({
mouseenter:
function(){
mouseEnterFx = new Fx.Morph(this,{fps:85,unit:'px',duration: 250, transition: Fx.Transitions.linear.easeOut,link: 'cancel'});
mouseEnterFx.start({paddingLeft:'10'});
},
mouseleave:
function(){
mouseLeaveFx = new Fx.Morph(this,{fps:85,unit:'px',duration: 250, transition: Fx.Transitions.linear.easeOut,link: 'cancel'});
mouseLeaveFx.start({paddingLeft:0});
}
});
}
});Repare no loop “for” muito útil para atribuir o efeito a todos os elementos do menu. Neste exemplo foi utilizado o Morph para ‘trocar’ o padding da Li que contém o link do menu, fazendo com que ocorra um efeito de movimento.
Code:menu.html
