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.

Irei ensinar 2 maneiras de redirecionar uma pagina, usando meta tag, e javascript, o meta tag tem a vantagem de permitir definir um tempo até que a página seja redirecionada, já usando javascript não tem essa opção.

Usando Meta tag

html>
<head>
<title>Redirecionando...</title>
<meta http-equiv="refresh" content="10;url=http://www.clubepc.org/"> <!---- adcione somente esta linha no cabeçalho, </head>

<body>
Depois de 10 segundo você será redirecionado para o site <b>Clube PC</b>.
</body>
</html>

em content=”10 esse 10 quer dizer o tempo em segundos que a pagina levará para ser redirecionada

Usando JavaScript

<html>
<head>
<title>Redirecionado...</title>
</head>
<body>
<span style="font-weight: bold;"> Esta página será
redirecionada para um novo endereço. Se não funcionar
após alguns segundos, clique </span> <a href="http://www.clubepc.org" target=_parent>aqui</a><br>
<br>
</body>
</html>

<script language="Javascript">
parent.top.location.href='http://www.clubepc.org';
</script>

ou também <script>window.location.href=’dicas.php’;</script>

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.

(more…)

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