Editey: Projeto "Hello (World)!"

Publicado a 23/01/2018, 06:34 por Luis Pitta -org-   [ atualizado a 11/02/2019, 03:18 ]

A partir de fevereiro de 2019 o Editey começou a ser pago.
Por esta razão vamos deixá-lo de o utilizar.


O Editey é um editor online gratuito pago 
de HTML+CSS+Javascript 

Ele cria ficheiros dos seguintes tipos:

Workspace: Vermelho

HTML: Verde
JavascriptAmarelo
CSS: Azul

TypeScript: Azul claro
LESS: Azul forte
PHP: Azul cinza
XML: Cinzento

1. Como exemplo vamos criar um Projeto com o nome "Hello".

O nome do projeto é, também, o nome da pasta DRIVE que o Editey cria na raiz do nosso DRIVE.


Partilhamos a pasta DRIVE com "Qualquer pessoa com o link pode ver", ou seja, Público:

Projeto Hello


2. O Editey cria um Workspace (Ficheiro de cor vermelha) que é somente um contentor para os diferentes ficheiros do projeto.

Para abrir um Workspace basta procurar o ficheiro vermelho, na pasta criada pelo Projeto, e abri-lo.

Ao alterarmos o nome do Workspace, o Editey altera o nome do ficheiro de cor vermelha.

Partilha DRIVEAo partilharmos o projeto com outra pessoa, ela pode editar em simultâneo (partilha DRIVE)

3. Criámos agora 3 ficheiros (a azul, pois como são ficheiros de texto recebem a cor do Google Documentos): index.html, estilo.css e codigo.js

Este 3 ficheiros são respetivamente:
  • O ficheiro HTML inicial index.html
  • Que por sua vez utiliza os outros dois ficheiros com o CSS e as linhas de código Javascript
  • Ver linhas 7 e 8 do ficheiro index.html para perceber como "inserimos o css e o js dentro do HTML

4. Ao publicarmos o Projecto o nosso site fica disponível online a todos os que tenham acesso ao seu URL público.

Para publicar o Projeto devemos clicar em Menu File > Publish Project

O Editey gera um URL público como o seguinte exemplo do Projeto Hello:


Hello World!

Quero saber a hora atual:

Pois então, são 15:00


Nota importante: De cada vez que editarmos o conteúdo do site, temos de o voltar a publicar.

Do lado do cliente (navegador) vamos ter de forçar o Refresh com SHIFT+F5
(pode demorar até 1 minuto para visualizarmos as atualizações online)


Teclas de Atalho:

Abrir Menu Help  > Keyboard Shortcuts



Pequeno video de iniciação ao Editey (EN):