Google DRIVE: Execução de HTML, CSS e Javascript a partir do Google DRIVE

Publicado a 27/02/2015, 12:49 por Luis Pitta -org-   [ atualizado a 25/01/2017, 04:57 ]
Atenção:
31 agosto 2016:
Esta possibilidade foi descontinuada pela Google!


Com o Google DRIVE conseguimos, não só armazenar os nossos ficheiros HTML (incluindo CSS e JavaScript) como também executá-los como se de um servidor web se tratasse :)
1

(Clica para aumentar)


Abra e analise os seguintes exemplos:


Exemplo 1: URL direto para uma pasta online:

Para ver o conteúdo da pasta clique no seguinte URL:

Não surgiu o conteúdo da pasta?

Caso exista um ficheiro com o nome index.html (ou index.htm), este será aberto automáticamente, impedindo a visualização do conteúdo da pasta. Caso contrário, irá visualizar o conteúdo da pasta (visualizará uma lista de ficheiros)

Peça ao professor para alterar o nome do ficheiro index.html para outro qualquer, por exemplo index_.html.
A seguir clique de novo no URL anterior. Agora ja conseguimos ver o conteúdo da pasta!

Exemplo 2: URL direto para um ficheiro (neste caso para o ficheiro exemplo1.html):

Para executar o conteúdo do ficheiro exemplo1.html clique no seguinte URL:


Exemplo 3: URL direto para um determinado ficheiro que se encontra dentro de uma determinada sub-pasta (neste caso para o ficheiro estilos.css dentro da pasta css):

Para executar o conteúdo do ficheiro estilo.css clique no seguinte URL:




Os ficheiros (e pastas) HTML, CSS e JS utilizados nos exemplos anteriores estão
armazenados online na seguinte pasta DRIVE, partilhada publicamente:

Pasta DRIVE com o nome "Publico na web"


O URL direto para a pasta DRIVE tem o seguinte aspeto:

Clique nos ficheiros de exemplo para os Visualizar/Executar no navegador:

index.html (com estilos1.css): Ver | Executar

exemplo.html (com estilos.css): Ver | Executar

teste123.html (sem css): Ver | Executar


Exercício bónus: O Jogo do "Adivinha um numero"

Na pasta DRIVE apresentada anteriormente, repara que há um ficheiro HTML com o nome jogo_adivinha.html
Cria o URL direto para o ficheiro e "corre" o jogo: trata-se do Jogo do "Adivinha um numero"!
Testa e adapta ao teu gosto.

Jogo do "Adivinha um numero": Ver HTML | Ver CSS | Ver JavaScript | Executar



Procedimento para executar ficheiros HTML a partir de uma pasta DRIVE


1. Crie uma Pasta DRIVE com o nome "Publico na web" (ou outro nome ao seu gosto).

2. Partilhe a pasta com a Internet, ou seja "Publico na Web" (este passo é muito importante).

3. Aceda à pasta e tome nota do seu ID único.

No exemplo anterior o ID da pasta tem este aspeto:
0ByTU7YT4rWzCfjBabnRxWV9Gb3NTNjRMQ3Rya2FyY081SVRWOXlUUnhVNzFGd0l1ZGt4RWM

4. Crie um ficheiro de exemplo com o nome teste123.html (ou outro nome ao seu gosto) e grave-o dentro da pasta "Publico na web".

5. Construa o URL usando a seguinte técnica:

a. Comece por escrever a parte inicial que é sempre igual:
https://googledrive.com/host/ 

b. Adicione o ID único da pasta DRIVE, que neste caso é este: 
0ByTU7YT4rWzCfjBabnRxWV9Gb3NTNjRMQ3Rya2FyY081SVRWOXlUUnhVNzFGd0l1ZGt4RWM

c. Insira a barra de caminho:

"/" (sem as aspas) 

d. E finalmente insira o nome do ficheiro html, que neste caso é:
teste123.html

Agora basta juntar as 4 cadeias de caracteres - verde, vermelha, laranja e azul - para obtermos o URL completo:
https://googledrive.com/host/0ByTU7YT4rWzCfjBabnRxWV9Gb3NTNjRMQ3Rya2FyY081SVRWOXlUUnhVNzFGd0l1ZGt4RWM/teste123.html

6. Abra o navegador (Chrome ou outro ao seu gosto) e navegue até ao URL construído anteriormente: