ClubePC » Script

Varios scritps em AJAX

Thales RB — Wed, 26 Dec 2007 15:53:09 +0000

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

Mostrando conteudo em abas

Thales RB — Thu, 20 Dec 2007 06:02:30 +0000

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/

Formatação de textos HTML, com editor WYSIWYG

Thales RB — Wed, 19 Dec 2007 19:13:08 +0000

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

[code="javascript"][/code]

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.

Adicionando o efeito de neve ao seu site

Thales RB — Fri, 07 Dec 2007 02:52:23 +0000

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 de seu site.

[code="javascript"][/code]

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 ) colocar apenas

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

Mudando o layout dos formulários HTML

Thales RB — Tue, 04 Dec 2007 08:50:39 +0000

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:

e em seu formulário coloque class=”niceform” ex: