Em 1º vamos criar um ficheiro “.html”.

Na shell do MySQL digite após selecionar uma Base de Dados escreva o seguinte código:

CREATE TABLE votacao (id INT(2) NOT NULL auto_increment primary key, descricao CHAR(50), votos CHAR(4));

Pronto, a sua tabela foi criada com sucesso, de seguida vamos adicionar nas opções de tabela:

INSERT INTO votacao (descricao,votos) VALUES (“vermelho”,”0″);
INSERT INTO votacao (descricao,votos) VALUES (“azul”,”0″);
INSERT INTO votacao (descricao,votos) VALUES (“amarelo”,”0″);
INSERT INTO votacao (descricao,votos) VALUES (“roxo”,”0″);

Vamos agora criar  o ficheiro .php com o nome de votação, com o seguinte codigo:

<?

if ($escolha != “”) { // Verifica se foi inserido um voto e prossegue em frente no caso de verdade

// Variáveis a serem alteradas

$mysql_host = “”; // local do servidor MySQL
$mysql_user = “”: // utilizador do MySQL
$mysql_pass = “”; // senha do utilizador do MySQL
$mysql_dtbs = “”; // base de dados onde a tabela foi criada

$num_resp = “”; // número de opções na tua votação
$pergunta = “”; // pergunta da votação

// Nada mais a ser alterado

$mysql_conx = mysql_connect($mysql_host,$mysql_user,$mysql_pass);
// ligação ao MySQL

$radio = $num_resp + 1;
// para uso posterior

mysql_select_db($mysql_dtbs);
// seleciona a base de dados

// aqui começa todo o trabalho do PHP para actualizar a base de dados

$query_upd = “SELECT * FROM votacao WHERE id=$escolha”;
$resul_upd = mysql_query($query_upd);
// aqui o PHP selecciona apenas os registos que coincidem com a escolha, neste
// caso so uma opção

$obj_upd = mysql_fetch_object($resul_upd);
// o comando mysql_fetch_object() separa os resultados de uma query por colunas
// neste caso, $obj_upd -> descrição da opção que o utilizador votou

$vot_upd = $obj_upd->votos;
$vot_upd++;
// separa só os votos e adicinona mais um voto

$upd_upd = “UPDATE votacao SET votos=$vot_upd WHERE id=$escolha”;
mysql_query($upd_upd);
// atualizou a base de dados

// Agora o PHP fará a pesquisa na base de dados e retornará as opções, seus
// respectivos votos, total de votos e a sua escolha.

echo “<H3>” . $pergunta . “</H3>”;

for($i=1;$i<$radio;$i++) {

$query[$i] = “SELECT * FROM votação WHERE id=$i”;
$resul[$i] = mysql_query($query[$i]);
$objet[$i] = mysql_fetch_object($resul[$i]);

echo “<FONT FACE=”Verdana” SIZE=”1″><B>” . $objet[$i]->opcao . “</B> ” . $objet[$i]->descricao . “<B> ” . $objet[$i]->votos . “</B><BR>”;

$tot_vt += $objet[$i]->votos;

// tudo isto serve para requisitar o resultado de cada opção e exibir no écran

}
echo “<FONT SIZE=”1″><B>Total de votos:</B>” . $tot_vt . “   <B>Sua Escolha</B>:” . $escolha . “</FONT></FONT>”;
}
?>

Toda a gente quando cria algo gosta de criar algo bonito, simples e eficaz… por isso trago aqui um tutorial que ensina a criar uma galeria de imagens com jQuery.
O criador deste tutorial é DreamCSS, que ensina a criar o tutorial como fazer a galeria com scroll de imagem, descrição e nome. O nome e descrição tem um efeito de scroll, um efeito simples e muito elegante.

O tutorial encontra-se em inglês, mas é de muito fácil compreensão e muito pequeno. Também disponibiliza os ficheiros para download, mas recomendo-vos a criar o tutorial por vocês a partir do site, pois caso contrário nunca aprendem a fazer por vocês próprios. Caso tenham feito o tutorial e não esteja a funcionar, ai sim aconselho a fazer o download e ver o(s) erro(s) que cometeram.

Pode ver o exemplo da galeria aqui.

Website: Galeria de imagens com jQuery
Demo: Galeria de imagens com jQuery
Download (ficheiros): Galeria de imagens com jQuery
Download (artigo): Galeria de imagens com jQuery
Requisitos: jQuery Framework
Licença: Gratuita

Web Developer Plus, é um blog sobre blog web design / desenvolvimento de dicas e tutoriais, está compartilhando um tutorial de como criar um slider com conteúdo deslizante que é construída com jQuery e jQuery UI.

É um tutorial que descreve cada passo (HTML, CSS, JS) e vem com os arquivos de origem.

O slider muda automaticamente o conteúdo exibido em cada X segundos definido e pode mudar para o item clicado instantaneamente.

Na proporção com o tamanho da “imagem”, a barra pode apresentar um número limitado de itens (4, no exemplo).

Com este tutorial, pode-se criar um elegante e eficaz sistema de notícias.

O tutorial encontra-se em inglês mas é de fácil compreensão. Caso não percebam muito de inglês podem sempre traduzir a página no google para português.

Website: Content Slider with jQuery UI
Demo: Content Slider with jQuery UI
Download: Content Slider with jQuery UI
Requisitos: jQuery, jQuery UI
Licença: Gratuita

Sliding Boxes – aprender a usar a jQuery para criar animações slide para legendas e imagens dentro e fora da vista quer para mostrar ou ocultar o visionamento da área. Sam Dunn, criou um tutorial, de como “brincar” com efeitos de deslizamento. Este tutorial encontra-se em inglês (muito básico até, para quem percebe o mínimo de inglês safa-se bem), e no fim do tutorial, tem-se resultados excelentes, e muito apelativos. Então aqui deixo o link para o tutorial, para os demos que se podem criar, com este tutorial e ainda o link para download!

Website (tutorial): Sliding Boxes
Demos: Sliding Boxes
Download: Sliding Boxes

Hoje em dia, cada vez mais existem sites totalmente criados em flash, com a integração a PHP, Asp ou outras línguas de programação. Como é óbvio os webmasters usam ficheiros externos do flash, para poderem actualizar de forma fácil. Uma dessas maneiras é carregar dados de um ficheiro .txt, pois é fácil de actualizar e muito fácil integração no flash. Por isso hoje o que vos trago é um tutorial que ensina a importar dados de um ficheiro .txt.

Data: 08/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programas necessários: Adobe Flash e Bloco de Notas

Tempo: 5 minutos

Nível: Básico

Resultado Final: Ver

1- Abrir o Flash.

2- Cria um novo documento, com as dimensões que desejares.

3- Agora cria duas novas layers e renomeia-as para Campo e Actions.

4- Após ter criado as 2 layers, na layer Campo, crie um campo de texto dinâmico (Dynamic Text) e no campo nome da instância (Instance Name), coloca carrega_txt.

5- Agora seleccione a layer Actions pressione F9 para abrir o painel das Actions. Cole o seguinte código:

System.useCodepage= true;//Para habilitar o uso de outros caracteres.

var leitor = new LoadVars();//Criando a variável leitor

leitor.onData = function(txt){// Abrindo função com o leitor usando a função criada txt

carrega_txt.text = txt;

}

leitor.load(“dados.txt”);//Carregando o .txt para dentro do dynamic text

6- Na parte do flash é tudo, agora vamos abrir o bloco de notas e vamos guardar o ficheiro com o nome de “dados.txt”. Dentro desse ficheiro, coloque o texto que irá aparecer no flash.

7- Nosso projecto está pronto. Basta pressionar Ctrl+Enter para testar.

Hoje em dia cada vez mais, existem sites criados em flash. Uma “característica” que os webmasters usam no site, são as preloaders. As preloaders serve para mostrar que o site está a ser carregado e normalmente a percentagem que vai. Existem preloaders mais complexas, em que essas mostram: o tempo restante, a velocidade de download, o tamanho total, tamanho transferido, entre outras opções. Eu neste tutorial, apenas vou ensinar a criar uma simples preloader, apenas mostrando a percentagem carregada. Brevemente postarei, outras formas de fazer preloaders (mais complexas).

Data: 06/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Flash.

2- Criar um novo documento.

3- Depois de criado o novo documento, na primeira frame vamos criar um campo de texto dinâmico (dynamic text) e com o nome de instância (Instance Name) “percentagem”. (Ver imagem )

4- Vamos agora seleccionar a frame 2 e vamos pressionar F7 para criarmos uma Blank keyframe. Agora nesta frame coloquem todo o contéudo que o site/animação irá conter. (No meu caso vou colocar uma imagem com um tamanho grande, para poderem ver o efeito)

5- Depois de terem adicionado o conteúdo, vamos voltar à frame 1, e pressionamos F9 para abrir o painel das Actions. Depois nas actions, colem o seguinte código:

ActionScript 2:

onEnterFrame = function () {

//pegamos o tamanho total e o tamanho carregado do arquivo
atualsize = _root.getBytesLoaded();
totalsize = _root.getBytesTotal();

//exibimos a percentagem carregada
percentagem.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != undefined && totalsize == atualsize) {
play();
delete this.onEnterFrame;
}

};

stop();

ActionScript 3:

this.addEventListener(“enterFrame”,onEnterFrame);
function onEnterFrame(e:Event) {

//pegamos o tamanho total e o tamanho carregado do arquivo
var atualsize = this.loaderInfo.bytesLoaded;
var totalsize = this.loaderInfo.bytesTotal;

//exibimos a porcentagem carregada
textload.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != null && totalsize == atualsize) {
this.removeEventListener(“enterFrame”, onEnterFrame);
play();
}

}
stop();

6- Depois basta pressionar Ctrl+Enter para testar e verem o resultado final.

Todos os sites, têm uma secção para entrar em contacto com o dono do site, ou outras pessoas em questão. Pois por isso eu trago aqui um tutorial que ensina a criar um formulário de contacto com Flash e PHP. Trata-se de um tutorial simples e muito útil para quem se está a iniciar no flash e no php.
No fim do tutorial, disponibilizo os ficheiros para download (.fla e o ficheiro php).

Data: 03/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programas necessários: Adobe Flash e Bloco de Notas

Tempo: 15 minutos

Nível: Intermédio

Resultado Final:

1- Comece por criar um novo documento com a dimensão de 300px x 300px no Flash.
2- Seleccione a ferramenta Text Tool (T).
3- Nas propriedades certifica-te que o tipo de texto está como estático (Static Text).
4- Clicar perto do topo do lado esquerdo da cena e colocar no nome campo texto “Nome:“.
5- Em baixo desse texto clicar e inserir um novo campo de texto que será o e-mail “E-mail:“.
6- Em baixo, por último colocar um outro campo com o nome de comentário “Comentário:“.
7- Terás algo do género, se tudo estiver bem até agora.

8- Selecciona de novo a ferramenta Text Tool (T) e nas propriedades do texto muda o tipo de texto para texto de entrada (Input Text).
9- Agora à direita do “Nome:” desenha uma caixa de texto do tipo de texto de entrada, estica a caixa de texto até à ponta do documento.
10- Nas propriedades clica na opção “Show border around text” e põe “tNome” para o nome da instância “Instance name“.

Como podes ver na imagem abaixo, no campo “Instance name” aparece o nome “tNome“.

11- À direita do “E-mail:” desenha outra caixa de texto “input text” e estica-a até à ponta, como fizestes para o campo acima.Nas propriedades do texto selecciona a opção “Show border around text” caso não esteja seleccionada, e para o nome e instância coloca “tEmail” (É igual à imagem de cima, mas apenas se substitui o tName por tEmail).
12- Por fim faz o mesmo para o campo Mensagem, no nome da instância coloca “tMensagem” e selecciona também a opção “Show border around text”. Nas propriedades do texto muda o tipo de linha para “Multiline“, em vez de “Single Line“.

13- Deverás ter o seguinte:

14- Selecciona a ferramenta Rectangle Tool (R).
15- Desenha um rectângulo no canto direito inferior do documento.

Propriedades do rectângulo: (não é necessário aplicar como aqui está, apenas é para verem para que servem os campos)

16- Selecciona a ferramenta Text Tool (T).
17- No cimo do rectângulo que desenhas-tes, clica e escreve a palavra “Enviar“.
18- Aqui fica o resultado até agora:

19- Selecciona a ferramenta Selection Tool (V).
20- Desenha uma caixa à volta do rectângulo e do texto “Enviar” para seleccionar ambos.
21- Pressiona F8 para converter a tua selecção num símbolo.
22- Coloca o nome “Enviar_bt” e o tipo selecciona opção botão e pressiona ok.
23- Clica no botão que acabastes de criar e nas propriedades coloca o nome “bEnviar” para o nome de instância “Instance Name“.
24- Clica na primeira frame da timeline e pressiona F9 para abrir as actions “Actions Panel“.
25- Coloca o seguinte código nas actions “Actions Panel“. (Apenas mudem o e-mail para o vosso, de resto não mexam em nada caso não saibam).

bEnviar.onRelease = function()
{
email();
}
function email()
{
var sMensagem = “Nome: ” + tNome.text + “\nE-mail: ” + tEmail.text + “\nMensagem: ” + tMensagem.text;
lvSend = new LoadVars();
lvReply = new LoadVars();
lvSend.msg = sMensagem;
lvSend.address = “teuemail@email.com”; //Colocar o teu e-mail aqui.
tNome.text = “A enviar mensagem…”;
tEmail.text = “”;
tMensagem.text = “”;
lvReply.onLoad()
{
tName.text = “Mensagem Enviada”;
}
lvSend.sendAndLoad(‘mail.php’, lvReply, ‘POST’);
}

26- Agora abre o Bloco de notas e cola o seguinte código. (Aqui apenas podem mudar onde diz E-mail Recebido, este vai ser o título do e-mail que irão receber)

<?php
$mensagem = $_POST["msg"];
$address = $_POST["address"];
mail($address,”E-mail Recebido”,$mensagem);
?>

27- Vai a Ficheiro » Guardar como…. e salva o ficheiro com o nome “mail.php” na mesma pasta onde vai ficar o teu swf.
28- Faz o upload dos ficheiros para o teu servidor e é só testar.

Download: Formulario_contacto.rar

Neste simples tutorial, vou explicar como mudarem o menu direito do rato no flash. Estes são pequenas coisas que por vezes podem dar jeito, pois é melhor ter o menu criado por nós, do que o que vem por definição pelo flash. Este tutorial é óptimo para quem se está a iniciar no flash e em actionscript.
No fim disponibilizarei o ficheiro .fla, para quem quiser fazer o download do mesmo.

Data: 02/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final: (clicar com o menu direito do rato, para ver o efeito)

1- Abrir o Flash.
2- Criar um novo documento, o tamanho depende do tipo de animação que vocês vão criar. (No meu caso criei 536px x 200px)
3- Criado o documento vamos seleccionar a primeira frame, e vamos às Actions (F9), e vamos colocar lá o seguinte código.

function rightclick (){}
MENU = new ContextMenu();
MENU.hideBuiltInItems();
Functioned = new ContextMenuItem(“TEU TEXTO AQUI”, rightclick);
MENU.customItems.push(Functioned);
_root.menu = MENU;

4- Feito isto, basta pressionar a combinação de teclas Ctrl+Enter para testar. Depois basta clicarem com o botão direito do rato no vosso projecto para verem o efeito. (Aqui fica o meu exemplo)

Download .FLA – mudar_menu_direito_rato.fla