SouMongol

SouMongol.blogspot.com - Roteiro para criação de testes.

Siga TODOS os passos abaixo, seguindo a ordem aqui apresentada.

Importante: escreva tudo em bom português, evite abreviações como ‘vc’ ‘blz’, e o mais importante: não escreva em miguxês.

INSTALAÇÃO DA FONTE TRUETYPE:

1) Copie a fonte 04B_08__.TTF para a pasta onde ficam suas fontes do Windows (geralmente C:\Windows\Fonts). Vá até esta pasta e verifique se o arquivo está mesmo lá.

EDITANDO AS IMAGENS

Para editar as imagens é necessário saber mexer com o Photoshop (qualquer versão), pois o arquivo padrão está em camadas (layers). Mais detalhes dentro do próprio arquivo 'modelo-teste.psd'. Somente edite o arquivo após ter instalado a fonte citada acima.

1) Abra o arquivo modelo-teste.psd no Photoshop

2) Insira o desenho/foto que você deseja para o resultado logo acima da camada/layer nomeada 'IMAGEM NO LAYER ACIMA'.

3) Edite as camadas de texto de acordo com o texto. Dica: ao editar o texto, para quebrar uma linha, aperte Enter. Para confirmar as alterações, aperte o outro Enter, do teclado numérico.

3) Salve a imagem para web (CTRL+ALT+SHIFT+S)em formato GIF de 256 cores, pondo como nome do arquivo uma palavra q faça referência ao resultado do teste. Ex: "Teste que celebridade você odeia, num resultado do Tom Cruise, salve como tomcruise.gif , tom.gif etc. Não use espaços no nome, prefira tom_cruise.gif . Nunca use acentos.

4) Repita os passos acima para criar as 5 (sempre cinco) imagens necessárias para criar o teste

* Salve SEMPRE em formato GIF, salvar em formato JPG pode causar erro na hora do teste.

* Salve as imagens em alguma pasta que seja fácil para você acessar depois, eu recomendo criar uma pasta com um nome que lembre o teste que você está criando.

* Se você não tiver Photoshop, não poderá criar testes. Se puder, peça um amigo para criar as imagens junto com você.

EDITANDO OS ARQUIVOS HTML

Para editar é bom ter uma noção básica em HTML. Se você não sabe, pode aprender o básico só seguindo este passo a passo, não é difícil! :)

1) Faça uma cópia da pasta 'modelo_de_teste' e renomeie-a para algo que lembre o teste que você vai criar. Ex.: para um teste 'Que cor de caneta você gosta', crie uma pasta chamada 'caneta'. Como nas imagens, NÃO utilize espaços, prefira sempre letras e números.

2) Abra a pasta que você criou, você irá reparar que há 2 arquivos: index.html e 01.html

3) O arquivo index.html é o arquivo onde ficam as perguntas que as pessoas vão escolher as alternativas. O outro arquivo (01.html) é um dos arquivos das respostas. No total criaremos 5 arquivos de respostas (01.html, 02.html, 03.html, 04.html e 05.html)

4) Vamos começar com o arquivo index.html. Abra-o em um editor de texto simples (pode ser o Notepad/Bloco de Notas do windows. Vá em Arquivo, Abrir e abra o arquivo, ou simplesmente arraste-o para dentro da janela do Bloco de Notas.

* As imagens que você verá a seguir são do Notepad++, um programa gratuito que uso para substituir o Notepad do Windows, fica muito mais fácil de visualizar. Você pode baixá-lo em: http://ufpr.dl.sourceforge.net/sourceforge/notepad-plus/npp.4.6.Installer.exe

5) Para quem não conhece HTML, pode ser algo assustador, mas relaxe, não é. Veja que dentro do arquivo há algumas seções com alguns #############, é após isto que iremos editar. Como você pode ver na figura, com a separação de cores tudo fica fácil, já que o que deve ser editado é apenas texto puro, ou seja, tudo aquilo que está em PRETO.

6) As únicas coisas para se editar são os textos em PRETO, e NADA além disso deve ser editado para evitar problemas. Se você não entende de HTML, não mexa nos códigos que ficam entre os '<' '>'

7) Após criar a sua primeira pergunta e as suas cinco primeiras respostas, descendo no arquivo você verá as outras quatro perguntas. É só seguir o mesmo esquema e editar. Ao fim do bloco das cinco perguntas, nada mais precisará ser feito neste arquivo. Salve-o. Foi fácil, não foi? :)

8) Agora seguiremos para o próximo arquivo: 01.html Nele criaremos a primeira resposta. Lembre-se que você pode começar utilizando qualquer resposta/imagem que você tenha criado. Eu sugiro começar por ordem alfabética dos arquivos de imagem que você criou, como mostra na imagem a seguir:

Como pode ver, o 01.html corresponderá ao AZUL.gif, o 02.html ao BRANCO.gif, e assim por diante.

Abra o 01.html no editor de textos do mesmo jeito que fez anteriormente com o index.html

Você verá a mesma coisa: ############# indicando onde você fará as alterações. Basicamente são:

-Título do Teste

-Resposta do Teste

-Imagem do Teste (mais detalhes a seguir)

-Código para exibição em blogs (mais detalhes a seguir)

Título e Resposta não tem segredo, é apenas alterar o texto, em PRETO.

Já a Imagem do teste exige atenção. Repare que há um código:

<img src="imagem.gif">

Aqui você vai trocar APENAS o imagem.gif pelo arquivo de imagem que você criou. Apague o nome do arquivo e insira o que você criou para a primeira resposta. Ex: se você criou um arquivo de resposta chamado ping_pong.gif, o código correto será:

<img src="ping_pong.gif">

Tome cuidado com as aspas, NÃO APAGUE-AS!

Agora faremos o Código para exibição em blogs. Veja a imagem abaixo:

Altere o título do teste (em PRETO). Ok, agora repare na linha anterior, há isto:

http://www.von-design.com/sm/NOMEDAPASTA/imagem.gif

A única coisa para se alterar será NOMEDAPASTA/imagem.gif

NOMEDAPASTA é o nome da pasta que você criou para armazenar os arquivos que está criando, lembra? E imagem.gif, é a imagem atual da resposta que você está fazendo.

Se você tem uma pasta chamada teste_macarrao e o arquivo de resposta se chama miojo.gif, então o código correto será http://www.von-design.com/sm/teste_macarrao/miojo.gif

Preste atenção para não alterar as barras ( / ) e as aspas ( " )

A única coisa que resta é alterar o nome de todos os possíveis resultados do teste. Lembre-se sempre de definir os resultados pela ordem alfabética dos arquivos de imagem para facilitar. Altere apenas os nomes dos respectivos resultados.

Você agora já pode salvar o 01.html , é só isso. Agora basta fazer o 02.html, 03.html, 04.html e 05.html . Para facilitar, você pode alterar em cima deste arquivo que está aberto, mas no final, ao invés de simplesmente Salvar, escolha a opção SALVAR COMO, e salve como 02.html , e assim em diante até criar todos os resultados.

Para testar se está funcionando, abra o arquivo index.html no Internet Explorer (ou Firefox) e faça o teste pra ver se está tudo direito. Lembre-se de colocar as imagens que você criou na mesma pasta que estão os arquivos HTML! É isso gente! Pode ter ficado meio extenso pra ler, mas tive que fazer bem detalhado, assim todos entenderão. Agora é com vocês, soltem a criatividade e criem seus testes!

ENVIANDO OS TESTES

Comprima a pasta contendo os arquivos (serão 11 arquivos: 6 HTML e 5 GIF) que você criou utilizando o Winzip ou Winrar (arquivo ZIP ou RAR) e envie para o e-mail soumongol2008-testes@yahoo.com.br. Não se esqueça de colocar seu nome, e-mail, blog, cidade, tipo sangüíneo etc, e diga se teve alguma dificuldade, se deixou de fazer algo...

DÚVIDAS

Se mesmo depois desta 'Bíblia' você ainda tiver algum problema referente à criação dos testes, envie um e-mail para soumongol2008-testes@yahoo.com.br com suas dúvidas.