Instalação do LumisXP

• O palestrante menciona que é necessário acessar o site da Lumis e fazer o download do LumisXP.
• A versão utilizada neste treinamento é a 12.5.
• O processo completo de instalação pode ser visto aqui. 

Importação de Template

• O palestrante inicia o LumisXP e abre a opção "Portal Studio".
• Em seguida, ele cria um novo projeto chamado "Evolo Website".
• Após criar o projeto, ele importa o tema, que contém os arquivos estáticos.

Ajuste de CSS

• Na visão padrão do Portal Studio, é carregado os componentes estruturais e todo o estilo da solução.
• Dependendo do estilo da solução, ele pode atrapalhar a visualização e navegação dentro do Portal Studio.
• Existe um modo de segurança, que o Portal Studio não renderiza o estilo da solução.
• Através desse modo, o palestrante ajusta o estilo da solução via CSS para que ele não influencie áreas externas ao HTML alvo. 

Configurando arquivo de layout

• O palestrante edita o arquivo index.html e adiciona uma tag "<page-dummy>" em torno do "miolo".
• Esse procedimento será importante para permitir que as faixas de conteúdos sejam administráveis no LumisXP.

Realizando a montagem

• Uma das opções, é adicionar uma instância do serviço nativo "conteúdo HTML".
• Neste vídeo o objetivo é tornar a página inicial publicável, por isso o nome da instância é "Página inicial".
• A instância de interface deste serviço chamada "Conteúdo" é arrastada para a página inicial.

Editar o Conteúdo da Página Inicial via Administração de Conteúdo

• Com a montagem acima, uma nova área chamada "Página inicial" é habilitada na administração de conteúdo.
• Através dessa área é adicionado o primeiro bloco de HTML.
• Esse bloco é extraído do arquivo index.html.

Aplicar Estilos da Solução ao CKEditor

• No canal raiz é adicionado a property bag com o nome "lumis.doui.ckeditor.contentscss"
• O valor dessa property bag é preenchido com o caminho dos arquivos css que a solução utiliza.
• OBS: A partir da versão 15 do produto, LumisXP aplica estilos CSS automaticamente obtidos do arquivo de layout.

Editar Bloco com Layout Personalizado

• Ao editar um bloco na administração de conteúdo, ele agora terá o layout semelhante a visualização de um usuário final.
• É possível modificar e visualizar as alterações facilmente.

Adicionando blocos

• É apresentado como adicionar novos blocos através da opção "Adicionar bloco".
• O restante dos blocos da página inicial são cadastrados.

Edição e personalização dos blocos

• É possível editar qualquer um dos blocos já cadastrados na página inicial.
• Os blocos permitem uma melhor organização do conteúdo.
• Blocos podem ser reposicionados via "Drag-and-drop"

Definição das faixas pelo marketing

• A equipe de marketing pode definir qualquer faixa desejada na página principal.
• Isso permite maior flexibilidade e agilidade na personalização do conteúdo.

Permitindo que o Menu seja administrável 

• É necessário entrar no Porta Studio e marcar o HTML do menu.
• Adicionar uma instância de serviço nativo do Conteúdo Hierárquico.
• Arrastar a interface "Menu de Conteúdos", da instância acima, para dentro do HTML marcado.

Criando os itens de menu

• Acessar a área de administração do Menu.
• No HTML original, os itens de menu são âncoras para faixas.
• Esses itens de menu, podem ser criados com o campo "Tipo de link" selecionado para "URL" e o campo "URL" preenchido com "#<atributo id da seção de destino>".
• Criar os itens de menu que existem no HTML original, configurando para cada um a URL de destino.

Criando o estilo do menu

• Até o momento, o usuário final visualiza o menu com o estilo padrão e não com o estilo do layout original.
• Criar um estilo JavaScript para a interface do menu.
• Esse estilo deve considerar o HTML original.

Configurando o Website

• Acessar as configurações do website no gerenciador de websites.
• Editar as configurações do website "default" para definir o canal raiz como "Portal/Evolo Website".
• Confirmar a exclusão de todos os web resources associados ao canal antigo.

Propriedades do Canal

• Na propriedade do canal configurado como website, em SEO e análise de dados:
  • Marcar a opção "Formato Específico".
  • Preencher o novo campo que aparece após marcar a opção acima, com "/".
  • Marcar a opção "Apagar e recalcular URLs amigáveis".

Preparação do Template da Página Interna

• É necessário preparar o template da página interna antes de criar as outras páginas.
• Para o template de página já existente, alterar o arquivo de layout para index.html
• Para o miolo da página do template, arrastar o painel de interface.
• Para o HTML do menu que foi marcado em aulas anteoriores, arrastar a interface "Menu de Conteúdos" 

Atualização do Estilo do Menu do Template da Página Interna

• Na interface de menu "Menu de Conteúdos" arrastada anteriormente, clicar em estilo.
• Selecionar o estilo customizado, que foi criado em aulas anteriores.
• Aplica estilo.

Criando a página interna

• Adicionar uma nova página chamada "página interna".
• Note que a nova página por padrão está utilizando o template criado anteriormente.

Adicionando instâncias de interface para a página interna

• Na página criada, arrastar uma interface do serviço de "Conteúdo hierárquico" chamada "Caminho da página" para o holder "Painel de interface".
• Arrastar uma interface do serviço de "Conteúdo hierárquico" chamada "Detalhes hierárquicos" para o holder "Painel de interface".
• A instância de "Detalhes hierárquicos"  deve ficar abaixo de "Caminho da página".

Criando estilo do caminho de página

• Criar um estilo JavaScript para o caminho de página.
• Esse estilo deve considerar o HTML original.

Criando Estilo da Interface de Detalhes Hierárquicos da Página Interna

• Criar um estilo JavaScript para Detalhes Hierárquicos.

<%
    var rows = lum_xpath.getMaps("//data/row");
    for(var i in rows)
    {
        var row = rows[i];
    %>
        <%lum_out.print(row.linkContent);%><%
    }
    %>

Editando o Conteúdo da Página Privacy Policy

• Na administração de menu, editar o item Privacy Policy.
• Copiar o miolo do arquivo privacy-policy.html e colar no campo HTML.
• Validar acessando a página como usuário final.

Editando o Conteúdo da Página Terms Conditions

• Na administração de menu, editar o item Terms Conditions.
• Copiar o miolo do arquivo terms-conditions.html e colar no campo HTML.
• Validar acessando a página como usuário final.

Adicionando novos blocos para a página Privacy Policy

• Na administração de menu, editar o item Privacy Policy.
• Copiar algumas seções (que representam as faixas) do arquivo index.html e adicionar no campo HTML.
• Este processo não é simples para alguém de negócios.
• Por isso, uma pessoa de TI, pode criar templates HTML para alguém de negócios utilizar.

Criando templates HTML

• No canal raiz, adicionar nova instância de serviço de templates HTML.
• Na instância de serviço de menu, associar com o repositório de templates HTML.
• Na administração de conteúdo, criar os templates HTML.
• Esses templates, são todas as seções do arquivo index.html

Benefícios de Trabalhar com Blocos de HTML Pré-cadastrados

• Os blocos de HTML pré-cadastrados permitem que marketing e negócios façam alterações facilmente sem precisar saber programação.
• É possível personalizar as informações, trocar imagens e atualizar o conteúdo facilmente.

Introdução

• Podemos cadastrar um template HTML e utilizá-lo em diferentes páginas.
• Ao modificar o template, as alterações não serão refletidas nos locais que ele foi importado.
• Cada instância é independente do template.
• As vezes é interessante um conteúdo ser alterado em uma área central. Nesta atualização, todos os locais que utilizam esse conteúdo também são atualizados.

Criar novo serviço de Logo dos Clientes

• Acessar o Wizard de criação de serviços.
• Criar novo serviço chamado "Logo dos clientes".
• Esse novo serviço deve ter os campos "Id", "Título" e "Logo".
• Adicionar instância desse novo serviço.

Adicionar logos na nova administração

• Acessar a administração de Logo dos Clientes.
• Adicionar algumas logos com títulos e imagens aleatórios.

Habilitando widgets

• No Portal Studio, adicionar nova instância do serviço de Repositório de Widgets.
• Associar instância de serviço "Página inicial" com o repositório de widgets criado acima.
• Associar instância de serviço "Menu" com o repositório de widgets criado acima.

Criando widgets

• Na administração de conteúdo, criar widget de Logo dos Clientes.
• Esse widget deve utilizar a instância de serviço de Logo dos Clientes criado anteriormente e a interface Lista Rápida.
• Nas configurações avançadas, criar o estilo considerando o HTML do layout.

Importando widgets

• Na administração de conteúdo, acessar a administração do Menu.
• Em algumas páginas internas, importar o widget criado.
• Visualizar como usuário final essa páginas que foram alteradas acima. 

Editando Logo dos Clientes

• Na administração central de Logo dos Clientes, editar algumas logos.
• Verificar que toda página que importou o widget foi atualizada automaticamente.