Vous êtes sur la page 1sur 10

CURSO HOT POTATOES

Semana 9: Publicando sua atividade na Internet


Objetivos: Publicar as atividades do Hot Potatoes na internet. Introduo Nesta semana, iremos aprender a publicar nossas atividades na Internet. Para isso, precisaremos, primeiramente, de um site de hospedagem. Por que usar um site de hospedagem e no um blog? Porque os blogs nos permitem apenas postar textos e imagens em um modelo de pgina criado previamente por eles. No caso das atividades do Hot Potatoes, ns no podemos usar esse modelo porque j temos uma pgina criada por ns com imagens, vdeos e msicas. Assim, para que nossa atividade funcione corretamente na internet, precisamos enviar TODOS arquivos que a compem para um servidor. Quando enviamos arquivos para internet, estamos fazendo um upload de arquivos (processo contrrio ao download no qual baixamos arquivos da internet). Assim, nossa primeira opo foi usar um site de armazenamento de arquivos (o Dropbox) onde realizaramos o upload dos nossos arquivos e, em seguida, criaramos apenas um link para esses arquivos no nosso blog. Infelizmente, o Dropbox excluiu das suas pginas a pasta public que era essencial para a realizao desse processo, j que todos os arquivos que fossem disponibilizados nessa pasta poderiam ser acessados livremente por qualquer usurio. Sem essa pasta, todas as vezes que tentssemos acessar as atividades por meio de um link, precisaramos de um login e senha... Dessa forma, tivemos que ABORTAR esse processo e buscar uma outra soluo. Nossa segunda opo buscar um site de hospedagem de pginas na internet. A maior parte dos sites confiveis so sites pagos: Uol, Locaweb, Yahoo e outros (acesse o link www.top10hospedagem.com para ver os melhores sites de hospedagem pagos). No entanto, como estamos realizando essas atividades como exerccio, vamos trabalhar com um site de hospedagem gratuito, Webhost (http://www.000webhost.com). Apesar de esse site ser descritos como um dos melhores sites gratuitos, caso realmente queiram manter essas atividades na internet aps o trmino do curso, eu recomendo fortemente que vocs criem uma conta em um site de hospedagem pago. A mensalidade no to cara e, assim, vocs no correm o risco de perder todas as suas atividades caso o site seja desativado de um dia para o outro. Independente do site que vocs escolherem para hospedar as atividades, o processo sempre muito parecido. Precisamos, primeiramente, criar uma conta e a seguir fazer o upload de TODOS os arquivos para o site. Dessa forma, nessa semana, descreveremos esse processo para o site Webhost para que todos possam acompanhar. O processo no complicado, mas existem alguns detalhes que no podem ser esquecidos. Assim, sigam o tutorial a risca e caso tenham algum problema, procurem descrev-lo detalhadamente no frum para que possamos identificlo e ajud-los da melhor maneira possvel. ATENO: Lembre-se que vocs NO precisa necessariamente publicar as atividades do Hot Potatoes na internet para poder us-las com seus alunos. Caso no queiram acess-las usando a internet, basta copiar seus arquivos para os computadores que seus alunos iro usar e eles podero acess-la localmente e fazer o exerccio. O acesso on-line s mais um recurso para facilitar o trabalho com essas atividades!

CURSO HOT POTATOES 9.1- Criando um conta no Webhost Acesse o site Webhost (http://www.000webhost.com) e clique em Sign Up! (Figura 9.1). O site est em ingls, mas possvel us-lo sem maiores problemas.

Figura 9.1: Pgina inicial do site WebHost

Na pgina a seguir (Figura 9.2), observe que estamos usando a verso gratuita (Order Free Web Hosting). Vamos, agora, preencher o formulrio. Como no temos um endereo prprio na web (para isso temos que registr-lo e pagar por ele), vamos usar um endereo fornecido gratuitamente pelo site. Complete o endereo dado pelo site (ele varia sempre) com um nome de sua preferncia (1), sem espao, maiscula ou acento. Em seguida, complete com seu nome (2), seu email (3) e uma senha com no mnimo seis smbolos, contendo letras e nmeros (4). Digite a senha novamente (5), copie as duas palavras que aparecem na imagem (elas mudam sempre) para o quadro logo abaixo (6), marque a opo I agre e to Terms of Service (7) e clique em Create my account(8). O processo pode demorar um pouco. Caso acontea algum problema, ele ir marcar em vermelho o campo que precisa ser alterado.

1 3 4 5

6 7 8
Figura 9.2: Criando sua conta

CURSO HOT POTATOES Na prxima pgina (Figura 9.3), voc poder ver uma tabela com trs colunas. Na primeira, temos o endereo criado por voc (1) e na segunda o status da sua conta (2). Observe que existe uma mensagem Waiting for email confirmation. Ou seja, o site enviou uma mensagem para o email que voc cadastrou e est esperando a sua confirmao. Assim, voc precisa acessar o seu email, localizar a mensagem enviada por eles e clicar no link para confirmao (Figura 9.4). Em alguns casos, essas mensagens de confirmao podem ser direcionadas automaticamente para outras pastas, como Lixeira, Quarentena ou Spam. Procure nessas pastas, e caso voc no tenha recebido o email, clique na opo Resend email (3, Figura 9.3).

Figura 9.3: Aguardando confirmao por email

Figura 9.4: Mensagem enviada para o seu email

Ao clicar no link, a seguinte pgina se abrir (Figura 9.5). Agora, informando que seu registro est quase completo (Registration is almost complete!) e que ele te enviou um outro email de confirmao. Acesse novamente seu email, localize a segunda mensagem do site (Figura 9.6) e clique no link para acessar sua conta.

CURSO HOT POTATOES

Figura 9.5: O registro est quase completo

Figura 9.6: Segunda mensagem de confirmao

Agora sim, o processo est finalizado. Entre com seu email e senha. Digite as letras que aparecem na imagem abaixo e clique em Submit para ter acesso a sua conta (Figura 9.7).

Figura 9.7: Acessando sua conta com login e senha

Sempre que precisar acessar a sua conta, na pgina inicial (Figura 9.8), clique em Members Area, para ter acesso pgina da Figura 9.7.

Figura 9.8: Acessando sua conta a partir da pgina inicial do site

CURSO HOT POTATOES 9.2- Fazendo o upload da sua pgina Ao acessar a sua conta do Webhost (Figura 9.9), clique na opo Go to CPanel.

Figura 9.9: Acesando o Painel de Controle

Na pgina seguinte, voc ter acesso a todas as informaes da sua conta. Localize o Menu Files (rolando a tela para baixo) e clique na opo File Manager (Figura 9.10). atravs do Gerenciador de Arquivos (File Manager) que iremos fazer o upload dos nossos arquivos.

Figura 9.10: Acessando o Gerenciador de arquivos

Pode ser necessrio informar sua senha novamente antes de abrir a prxima pgina (Figura 9.11). Isso ir acontecer toda vez que ficarmos muito tempo sem us-la. Como informado anteriormente, temos que fazer o upload dos arquivos na pasta public para que todos tenham acesso irrestrito a eles. Dessa forma, clique sobre a pasta public HTML para abri-la.

Figura 9.11: Abrindo a pasta public

CURSO HOT POTATOES Por padro, j existiro dois arquivos nessa pasta: default.php e o .htacess. Primeiramente, iremos apagar o arquivo default.php. Selecione o arquivo clicando no quadradinho logo a frente do nome dele e depois clique no boto Delete (Figura 9.12).

Figura 9.12: Apagando o arquivo default.php

Confirme a ao clicando no V verde (Figura 9.13).

Figura 9.13: Confirmando o apagamento do arquivo

Depois volte para o gerenciador clicando na seta azul (Figura 9.14).

Figura 9.14: Voltando ao gerenciador

Agora, precisamos fazer uma alterao no arquivo .htacess. Clique na opo Edit na frente do nome do arquivo (Figura 9.15).

CURSO HOT POTATOES

Figura 9.15: Acessando o arquivo .htacess

No editor que ser aberto a seguir (Figura 9.16) acrescente a linha: php_value short_open_tag off Copie fielmente esse cdigo. Observe com cuidado onde colocar espao e onde colocar _. Salve clicando no cone do disquete e clique na seta para voltar.

Figura 9.16: Editando o arquivo .htacess

Agora, clique em Upload (Figura 9.17) para enviarmos os nossos arquivos.

Figura 9.17: Fazendo o upload de arquivos

Nesse momento, voc tem duas opes para fazer o upload (Figura 9.18). Na primeira, do lado esquerdo, voc poder enviar os arquivos um por um. Clique em Selecionar arquivo (1), localize o arquivo no seu computador e clique em Abrir. Depois clique no segundo Selecionar arquivo que aparecer logo abaixo, para selecionar o segundo arquivo. Repita esses passos at que todos os arquivos necessrios para o bom funcionamento da pgina (HTML, figuras, msicas, etc) tenham sido selecionados (Figura 9.19). Atente para a observao de que voc pode enviar no mximo 5Mb de informao. E no se esquea que todos os arquivos devem ter sido previamente colocados na mesma pasta do arquivo HTML.

CURSO HOT POTATOES

Figura 9.18: Selecionando o primeiro arquivo a enviar

Figura 9.19: Perfilamento de todos os arquivos que sero enviados

Na segunda opo, do lado direito, voc pode clicar em Selecionar arquivo (2, Figura 9.18) e enviar apenas um arquivo compactado (.zip ou .rar) contendo todos os arquivos da sua atividade. Qualquer que seja a opo escolhida, ao terminar, clique PRIMEIRO no V verde para confirmar a operao (Figura 9.19). A seguir, clique na setinha azul para voltar para o gerenciador (Figura 9.20).

Figura 9.20: Confirmao o envio dos arquivos

Prontinho! Seus arquivos j esto disponveis na internet. Clique no boto vermelho para fechar o gerenciador (Figura 9.21). A seguir, clique no boto CLOSE.

CURSO HOT POTATOES

Figura 9.21: Visualizando seus arquivos no gerenciador de arquivos

Ao voltar na tela do Painel de Controle (Figura 9.22), clique no endereo da sua pgina no canto direito (1), para abri-la. Voc ir visualizar todos os arquivos que enviou para o site (Figura 9.23). Clique sobre o arquivo HTML para visualizar sua atividade (Figura 9.24). Para sair do WebHost, clique na guia Log out (2, Figura 9.22).

2 1

Figura 9.22: Acessando a sua pgina

Figura 9.23: Visualizando os arquivos enviados

Figura 9.24: Visualizando sua atividade

CURSO HOT POTATOES

OBSERVAO: Todo navegador de internet (Chrome, Firefox, Internet Explorer), ao abrir uma pgina, procura por um arquivo com o nome de index.html, que, por padro, o arquivo principal de toda pgina. Se ele no encontra esse arquivo, lista todos os arquivos presentes na pasta public para que voc possa selecionar o que deseja abrir (Figura 9.23). Existem duas formas de evitar que a pgina mostrada na Figura 9.23 aparea. A primeira delas salvar o arquivo HTML da sua atividade com o nome de index.html. A segunda colocar o nome do arquivo HTML no endereo da sua pgina, antecedido por uma barra, por exemplo, http://atividadehotpotatoes.vacau.com/jquiz1.htm.

Sigam esse passo a passo, e procurem disponibilizar a atividade que fizeram no JQuiz na internet. Envie o endereo da pgina (aquele que aparece na Figura 9.22) para o frum dessa semana. No necessrio renomear a atividade como index.html dessa vez. No entanto, na prxima semana, ao criarem a atividade para a AD, procurem fazer isso. Quando comearmos a trabalhar com o The Masher, ele criar, automaticamente, a pgina index.html, incluindo um link para cada atividade que criamos usando as ferramentas do Hot Potatotes. Por isso, guardem todas as atividades que estamos fazendo com muito carinho, pois iremos precisar delas no final.