Editey: Projeto "Hello (World)!"

Data de publicação: Jan 23, 2018 2:34:41 PM

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

Javascript: Amarelo

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.

Pasta DRIVE: drive.google.com/drive/folders/1wr7N84ZIQXoXzMcIBWMZMUKhwHXXz-f0?usp=sharing

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

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.

URL direto do ficheiro vermelho: drive.google.com/file/d/11ZDfIu0aUbn7cIoWvAhy0FIirUS9zwqq/view?usp=sharing

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

Partilha DRIVE: Ao 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:

web.editey.com/1wr7N84ZIQXoXzMcIBWMZMUKhwHXXz-f0/index.html

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):