Google DRIVE: Execução de HTML, CSS e Javascript a partir do Google DRIVE
Data de publicação: Feb 27, 2015 8:49:1 PM
Atenção:
31 agosto 2016:
Esta possibilidade foi descontinuada pela Google!
Ver noticia em https://gsuiteupdates.googleblog.com/2015/08/deprecating-web-hosting-support-in.html
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:
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:
Clique e verifique o seu funcionamento!
+ Ajuda
Example: https://googledrive.com/host/0B47Pdqj--olfeExfdXhLSEktSTg/
Template that I use for example can be downloaded here
Learn how to use your own domain name (custom domain) on Google Drive hosted website
How to create a contact form for Google Drive hosted website