Iremos mostrar agora, os passos básicos de criação de um site com o Electos. Este exemplo foi feito com o Electos Professional.

Passo 1: Alterando a senha do usuário administrador

A partir do menu iniciar, escolha Programas -> Electos -> Electos Site Manager.

Como o nome indica, o Electos Site Manager é o gerenciador de sites do Electos. Por padrão, o Electos possui um usuário "admin", cuja senha é também a palavra "admin". Utilize estas informações para se logar no sistema.

A primeira coisa a ser feita é alterar a senha padrão do usuário admin. Para isso, dê um duplo-clique na opção "User Management". Em seguida, clique na imagem abaixo da coluna Edit e informe, a senha atual, a nova senha e confirmação da nova senha. Para confirmar a nova senha, clique em "Apply".

Note que a senha que você trocou é a do usuário administrador do Electos Manager. Cada site possuirá seu próprio conjunto de usuários e outro usuário admin. Você poderá criar, excluir e trocar a senha de usuários a partir do "Control Panel" do site.

Passo 2: Criando um novo Site

No lado esquerdo do Site Manager, clique sobre a opção "Website Management". O site de exemplo "MyWebsite" irá aparecer na lista. Este é o site de exemplo fornecido com o Electos.

Para criar o novo site, clique na opção "Create new website" no topo superior direito da página. Uma espécie da assistente irá guiar você nos passos necessários para criar um novo site. Na primeira tela você deve informar o nome do site. Este nome será usado para criar o diretório em disco. No nosso caso criamos um site com o nome "Revista4developers".

Após pressionar "Next", a próxima etapa pergunta se você deseja criar um site em branco ou criar uma cópia de um site já existente. Nos escolhemos criar um em branco.

Cada site criado no Studio possui seu próprio diretório, o qual contém todos os arquivos de dados e modelos ASP. Para gerenciar um site, deve ser criada uma URL única que aponta o Electos Studio e identifica o site. A próxima tela permite que você crie esta URL através do processo chamado "web sharing the Electos Studio". Em nosso exemplo, mantivemos as informações sugeridas pelo Electos.

A tela seguinte é basicamente uma confirmação do diretório virtual criado na etapa anterior, o qual você precisará acessar para gerenciar o Site. Também mantivemos a informação e clicamos em "Next".

Para publicar o site, o diretório AppHtml deve estar compartilhado na web, ou seja, necessita de seu próprio diretório virtual. Também mantivemos as informações sugeridas pelo Electos.

Na tela seguinte, apenas confirmamos as informações clicando em "Next".

Na última tela o Electos nos mostra todas as informações para confirmarmos. Clicando em "Finish" o site será criado.

Após alguns segundos, o Site Manager retornará para a página inicial e agora mostrará dois sites, o de exemplo e o que acabamos de criar.

Se você abrir o IIS, verá os dois diretórios virtuais criados.

Passo 3 - Criando modelos ASP

O Electos trabalha com páginas ASP de modelo, sobre as quais as páginas de conteúdo são criadas. Os templates são a primeira coisa a ser criada em um novo Site e isso pode ser feito usando qualquer editor de HTML e seguindo algumas regras básicas, encontradas no tópico "Creating Electos Website Design" do Help.

As pessoas indicadas para criar este modelo são um designer HTML ou desenvolvedor Web (ASP).

Evidentemente não há espaço neste artigo (e nem está no escopo dele) mostrar a criação de um template ASP. Portanto, para facilitar, iremos copiar os modelos que estão no website de exemplo para o nosso.

Se o Electos foi instalado no diretório padrão, os modelos do site de exemplo estão em C:\Arquivos de programas\Electos\Websites\ MyWebsite\AppHTML. Copie os arquivos normal.asp, news.asp e search.asp para o diretório AppHTML do seu site (no nosso caso será C:\Arquivos de programas\Electos\Websites\Revista4developers\AppHTML).

Uma vez copiado, precisamos cadastrar estes modelos no nosso site. Para isso, abra a URL do Electos Studio. No nosso caso é http://localhost/Revista4developersStudio. A partir das opções do lado esquerdo do Studio, escolha "Control Panel" e depois "ASP Templates". Você verá uma página em branco, pois ainda não há nenhum modelo ASP registrado no site. Usando o menu da parte superior do site, escolha a opção "Add ASP template".

Para o modelo news, informe os seguintes dados:

Para o modelo normal, informamos apenas o seguinte:

Agora precisamos definir o modelo raiz para o site. Para isso, dê um duplo clique sobre o nome do site (no nosso caso Revista4developers) que está aparecendo acima do título "ASP Templates". O Studio mostrará uma página com três opções. Selecione com um único clique a opção "Site Management". Do lado esquerdo a opção "Change root ASP template" estará disponível. Clique sobre ela. Na tela que aparecerá, escolha a opção "Normal ASP template" e clique em Apply.

Os modelos ASP do site de exemplo utilizam alguns arquivos de imagens e CSS que precisaremos copiar também. Copie os diretórios Images e Css (dentro de AppHTML) do site de exemplo para o nosso.

Passo 4 - Definindo estruturas de documentos

A idéia do Electosé fornecer um método estruturado de gerenciar o conteúdo do website. Para isso usamos as chamadas estruturas de documentos. As estruturas de documentos são gerenciadas através da opção "Document Structures" do "Control Panel". Cada estrutura de documento é identificada por um nome e pode ter um modelo ASP opcional. Se um modelo ASP for escolhido, ele será usado por padrão para os documento baseados nesta estrutura. Há três tipos de elementos que podem ser usados dentro da estrutura:

• Single Line Text: um campo de input de uma única linha e sem formatação.

• Multi-line Text: um campo de input multi-linha para grande quantidade de texto HTML formatado. Este elemento possui uma barra de ferramentas que pode ser usada para formatar o texto, adicionar links e imagens. Por padrão, o tamanho máximo deste elemento é de 128.000 caracteres, mas isso pode ser alterado através da opção "Settings" do "Control Panel".

• Files: um arquivo contendo um link para um arquivo que foi carregado, o qual pode ser selecionado em uma janela separada.

Na tela abaixo, apenas confirmamos as informações clicando em "Next".

A estrutura do documento pode conter qualquer combinação e qualquer quantidade destes elementos.

Nosso site já possui duas estruturas de documentos: Container e Simple Page. Você pode conferir as duas acessando a opção "Document Structures" dentro de "Control Panel". Selecione "Container" e clique na opção "Change properties" do lado direito. Escolha "News ASP template" para a opção "Default ASP template" e clique em Apply.

Passo 5 - Definindo o conteúdo

Através da opção "Content" você pode definir o conteúdo do site. O conteúdo é composto por documentos e arquivos (principalmente de imagens) que você pode fazer upload através da opção "Upload file".

Vamos criar um documento para ser a página de boas-vindas do site. Clique em "New document". Em "Name" você informa um nome que identifica o documento para o Electos (este nome não aparecerá para o visitante do site). A descrição também só é usada internamente. Utilizamos a estrutura de documento "Simple Page".

Após clicar em Add, um editor se abrirá. Agora é só definir o título (este sim vai aparecer para o usuário) e o conteúdo do documento.

É desta forma que criamos um documento de conteúdo. Você pode fazer upload de arquivos de imagens e usar dentro de seu documento.

Os estilos existentes podem ser alterados ou você pode criar ainda novos estilos CSS.

Passo 6 - Definindo a estrutura do site

Depois de ter definido os documentos de conteúdo, definimos a estrutura do site usando a opção "Site management" do Studio. A estrutura do site é definida com 4 elementos:

• Categoria: uma categoria pode ser vista como uma pasta ou o capítulo de um livro. Ela é um Container que pode conter outros elementos.

• Page: a página é uma referência a um documento de conteúdo. Você pode criar várias páginas apontando para o mesmo documento em lugares diferentes do site. Quando o documento é alterado, todas as páginas são atualizadas automaticamente.

• Multi-item Page: uma página multi-item é um tipo especial de página. Ao editá-la, ela será muito parecida com a página padrão, mas pode conter sub-documentos.

• Items: são sub-componentes usados para adicionar conteúdo às páginas multi-item.

Vamos adicionar nosso único documento na estrutura do site. Para tanto, acesse a opção "Site Management" e escolha a opção "Add Page". Pressionando o botão "Select document", escolhemos nosso documento e preenchemos as demais informações.

Muito bem. Neste ponto você já viu os passos básicos necessários para criar um Site com o Electos.

Supondo que este site fosse exibir apenas uma edição da revista, poderíamos criar agora, um novo documento para cada matéria e criar uma categoria para agrupar as matérias.

Passo 7 - Visualizando o Site

Clicando na opção Website preview você pode conferir como o site ficou:

• Electos
• Visão geral do Electos
• Recursos de gerenciamento de sites
• Aparência dos sites
• Exemplo prático
• Edições do Electos
• Compatibilidade com VDF
• Requisitos mínimos
• Recursos adicionais