Voltado as atividades aqui no site.

Eu achei um site muito legal que tem uma grande seleção de scripts que usam Ajax, são mais de 50 scripts e todos com uma imagem de preview, para ter uma ideia das funcionalidades, só que todo o conteudo está em ingles

http://miniajax.com

Hoje eu estava procurando algum sistema de abas, pra usar no meu CMS, e no trajeto achei varios interessantes, vou fazer uma lista deles. Mas todos eles são de sites em ingles

Esse usa algumas imagens nas abas deixando um efeito bem legal:

http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml

esse usa ajax para caregar o conteudo, só tomem cuidado com o SEO :

http://20bits.com/2007/05/23/dynamic-ajax-tabs-in-20-lines/

esse é legal por que, não é preciso clicar na aba é só passar o mouse em cima:

http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange//

Esse é interessante pois cada aba tem um link(o que eu estava procurando) ou seja com esse link ele já abre na aba desejada:

http://phrogz.net/JS/Tabtastic/index.html

Achados em: http://www.linksweb.com.br/ 

Para quem oferece algum sistema, onde qualquer pessoa possa enviar textos é interessante, ter um editor para formatação de textos, já que não é qualquer um que sabe comandos HTML para formatar o texto. E o seu uso é recomendado para não permitir que qualquer comando HTML possa ser usado, já que alguns comandos poderiam arruinar o seu Layout

Para fazer isso existem dois tipo de editores:

WYSIWYG(What You See Is What You Get), que é um editor visual ou seja ao usa-lo você já verá o texto formatado, igual o word, g-mail, wordpress, etc.

BBCODE(Bulletin Board Code), que é uma simples função para substituir caracteres, ex: a tag <b></b> ficará [b][/b], como o seu nome diz ele foi criado para fóruns, onde é encontrado comumente, para criar um editor desse é preciso saber bastante programação, já que é preciso, substituir todos os caracteres, e bloquear o uso de outros comandos html.

Usando um WYSIWYG

Os editores desse tipo, são de uso mais facil, pois são feitos com Javascript, e podem ser usados com qualquer tipo de sistema, PHP, ASP, etc.

Quando eu estive procurando por isso, achei um monte de editores assim, mas não consegui usar ou adaptar ao que eu queria quase nenhum.

O unico que eu me dei bem foi o TinyMCE. Veja aqui um exemplo dele Para usa-lo é bem simple, com o download dele em alguma pasta do seu sistema, e adicione o seguinte no arquivoirá usa-lo

<script type=”text/javascript” src=”pasta_onde_esta_os_arquivos/tinymce/tiny_mce.js”></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak,imagemanager,filemanager",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,spellchecker,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
content_css : "/example_data/example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
template_external_list_url : "example_data/example_template_list.js",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv"
});
</script>

Esse segundo javascript serve para formatar a exibição, no caso aqui ele irá aparecer todas as opções, mas como ele usa um esquema de plugins, cada botão é um plugin, então é possiveo formatar isso.

Como pode ser visto ele tem theme_advanced_buttonsX_add e na frente de cada uma tem os botões que seram mostrados, ou seja é só deletar o nome do botão para remove-lo. E se não for usar um botão pode remover a sua pasta dentro do tinymce para ficar mais leve.

Adicionando esses scripts ele irá adicionar o editor em todas as textareas que houver na página.

Para entrar no espírito de natal é legal adicionar algo no site, mudar o layout ou criar um logo de natal, mas isso pode dar trabalho, algo bem facil de se fazer é colocar um efeito de neve caindo. Por isso vou postar um script em javascript que faz isso.

Um exemplo de como ficará pode ser visto aqui.

Ele usa uma imagem de neve então copie essa imagem aqui(ou qualquer uma a sua escolha)

o link para essa imagem é http://i12.tinypic.com/6uscqjq.gif

para usa-lo é bem simples simplesmente copie todo o conteudo a seguir e cole após o <body> de seu site.

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use

Clubepc.org
******************************************/
function openwindow(){
window.open("autumn_effect.htm","","width=350,height=500")
}

//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("clubepc.org")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://www.clubepc.org\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

para ele funcionar é preciso alterar:

//Configure below to change URL path to the snow image
var snowsrc=”snow.gif”

para o endereço de onde se encontra a imagem, caso ela esteja na mesma pasta que a pagina pode deixar como está.

Também é possivel alterar os seguintes itens
// Configure below to change number of snow to render
var no = 10;
Irá alterar o numero de “flocos” de neve que irão aparecer

// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;

Irá alterar o tempo que o “flocos” seram exibidos na tela, 0 é infinito(ele irá até o fim da sua pagina e comecará do topo novamente)

// Configure how much snow should drop down before fading (“windowheight” or “pageheight”)
var snowdistance = “pageheight”;

Altera o tempo que os flocos iram cair, pageheight é até o fim da sua pagina(se tiver uma pagina grade isso não será bom), e windowheight é até o fim da tela(resolução do monitor).

Para manter a organizaçãse o do codigo fonte de seu site você pode salvar esse script em um arquivo .js como snow.js e em seu codigo fonte(também depois do <body>) colocar apenas

<script src=”snow.js” type=”text/javascript”></script>

alterando o src=”" para o local do arquivo no caso dele não estar na mesma pasta.

Um aviso importante: esse efeito de neve, usa bastante o processador!!!, com 5 abas dele abertas no firefox, ele estava usando 70% do meu processador(turion 64 – 2Ghz), então é melhor, colocar esse efeito, só na pagina inicial de seu site, para que ele não apareça em todas as paginas.

Se alguem quizer um outro script que não usa imagem(irá aparecer pontos) pode pedir que eu disponibilizo.

Update: olhando as origens das visitas achei no site http://www.agitonoite.com/index.php algo muito interessante, ao invez de usar a imagem de neve, colocaram um gif de fogos de artificios, ficou muito legal.

Fica ai a ideia pra quem quizer usar esse efeito agora depois do natal =D

Gostou desse script?, quer saber como ele funciona. Então veja o preço de alguns livros no Já cotei

Os comandos html para formulários(input, button, etc) tem um layout que não pode ser mudado com CSS, mas existe alguns scripts em javascript que permitem alterar esse layout um deles é o niceform. Veja só a diferença:

o normal: usando o niceform:

bem melhor não ??

Para usa-lo é simples, primeiro faça o download dele aqui, ele vem com um arquivo de exemplo para poder dar uma olhada, mas para aplica-lo em suas paginas é só adicionar:

<script language=”javascript” type=”text/javascript” src=”niceforms.js”></script>
<style type=”text/css” media=”screen”>@import url(niceforms-default.css);</style>

e em seu formulário coloque class=”niceform” ex: <form action=”pagina.php” method=”post” class=”niceform”>

E pronto ele já irá alterar todos os comandos para o novo layout. O ueba usa esse sistema na sua pagina de enviar noticias http://ueba.com.br/NovoLink

Obs: na pasta imagens tem todas as imagens que ele usa(tudo que é visto são imagens), ou seja é possível mudar elas para se adaptar ao layout do seu site =D