Criar um Modelo de Site a partir do Bootstrap ou de um Modelo de Design de Sites

A arquitetura aberta do Oracle Content Management significa que pode utilizar o trabalho efetuado noutros enquadramentos de codificação, como o Foundation ou Bootstrap. Com poucas alterações, pode transformar um modelo Bootstrap num tema e torná-lo parte de um modelo do Oracle Content Management.

Processo Básico

Segue-se uma perspetiva geral dos passos descritos em detalhe nas secções seguintes:

Pré-Requisitos

Deve ter configurada e a funcionar a aplicação do ambiente de trabalho do Oracle Content Management para sincronizar pastas e ficheiros com o seu computador local.
Descarregue as pastas de temas, os ficheiros e o conteúdo do modelo Bootstrap para o seu computador local e tenha-os prontos para utilização.

Criar um Site

Criar um site a partir de um modelo inicial do Oracle Content Management:

Na navegação lateral, clique em Sites.

É apresentada uma lista dos sites existentes.
Clique em Criar.
Na caixa de diálogo Criar Site, selecione Modelo Inicial JET ou Modelo Inicial para utilizar como base para o seu site.
Na caixa de diálogo, introduza um nome para o site. Este nome é utilizado no URL do site. Pode utilizar letras, números, caracteres de sublinhado (_) e hífenes (-). Se introduzir um espaço, este é substituído automaticamente por um hífen.

Não utilize os seguintes nomes para modelos, temas, componentes, sites ou páginas de site: authsite, conteúdo, páginas, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Embora possa utilizar os seguintes nomes para as páginas de site, não os utilize para modelos, temas, componentes ou sites: documentos, sites.
Nota:

O percurso para um URL de site do Oracle Content Management é sensível a maiúsculas e minúsculas. As maiúsculas e minúsculas nas cadeias de caracteres de consulta ou de fragmento são geridas pelos programadores no respetivo código customizado.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Opcionalmente, introduza a descrição do site.
Quando estiver pronto, clique em Criar.

Uma barra de progresso mostra o nome e o estado de criação do novo site. Quando o site é criado, o nome é apresentado na lista de sites. O estado inicial é offline.

Para encontrar rapidamente o site recém-criado na lista, ordene a lista por Última Atualização. O site que acaba de criar será apresentado na parte superior da lista.

Sincronizar a Pasta do Tema

Quando cria um site a partir de um modelo inicial, é criada uma cópia do tema do modelo inicial à qual é atribuído o nome do site seguido do nome do tema. Por exemplo, o tema para My_New_Site é My_New_SiteTheme.

Utilize a aplicação do ambiente de trabalho para sincronizar a pasta e os ficheiros do tema para o site com o seu computador local. Consulte Iniciar a sincronização em Colaborar em Documentos com o Oracle Content Management.

Deverá ver agora a hierarquia de pastas do tema e os ficheiros do modelo no seu ambiente de trabalho local. Segue-se um exemplo:

    theme_name
        assets
            css
                main.css
            js
                topnav.js
        designs
            default
                design.css
                design.json
                facebook.png
                googleplus.png
                linkedin.png
                twitter.png
                youtube.pgn
        layouts
            index.html
        responsepages
            404.html
        _folder.json
        _folder_icon.png
        components.json
        viewport.json

Configurar o Tema Básico

Copie estes ficheiros do Bootstrap para as pastas do tema sincronizadas no seu ambiente de trabalho local para que se sobreponham aos ficheiros existentes.
- Os ficheiros html vão para a pasta theme_name/layouts
- Os ficheiros css vão para a pasta theme_name/assets/css
- Os ficheiros js vão para a pasta theme_name/assets/js
- Os ficheiros do tipo image vão para a pasta theme_name/assets/images, que pode estar agrupada em subpastas com imagens para o fundo, rodapé, pessoas, etc.
Modifique os ficheiros html na pasta layout para atualizar os percursos relativos e acrescentar os elementos necessários. Para um tema típico do Bootstrap, haverá muitos percursos relativos para a pasta /assets, pelo que deve modificá-los para que apontem para a pasta do tema.

Corrija os percursos das pastas css, js e images para utilizar:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Nota:
Uma vez concluído este passo, a parte _scs_theme_root será automaticamente ajustada ao ambiente no qual o tema está a ser utilizado.
Existem três requisitos para cada disposição do Oracle Content Management:
1. Inclua os identificadores seguintes no identificador <head> do ficheiro html:
  - 
  - 
  - 
2. Inclua o script do renderizador no fim dos ficheiros de disposição, dentro do identificador <body>. Estes percursos ajustam-se automaticamente no Criador de Sites e nos ambientes de runtime.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Inclua os identificadores seguintes após a inclusão do ficheiro renderer.js:
  - 
  -

Verifique se os ficheiros de tema modificados estão sincronizados com o site no Oracle Content Management.

Atualizar as Páginas do Site

Quando abrir o site no Criador de Sites, inicialmente irá ver as páginas que se encontram no site por omissão. Pode apagar as páginas não pretendidas e mudar a disposição nas páginas que pretende manter para uma das novas disposições.

Na navegação lateral, clique em Sites.

É apresentada uma lista dos sites existentes.
Selecione um site e escolha Abrir no menu do botão direito do rato ou clique em na barra de ações.
Introduza um nome para a atualização e uma descrição opcional e, em seguida, clique em Criar.

Para o nome da atualização, pode utilizar letras, números, caracteres de sublinhado (_) e hífenes (-). Se introduzir um espaço, este é substituído automaticamente por um hífen.

Se já tiver atualizações para o local, selecione uma atualização da lista e clique em .
O Criador de Sites é aberto no modo de pré-visualização. Para efetuar alterações ou utilizar as opções de navegação na barra lateral, certifique-se de que o comutador Editar está definido para Editar.
Para editar uma página específica, escolha-a utilizando a árvore do site na barra lateral ou a navegação do próprio site.
Para retirar uma página não pretendida, selecione a página e clique em .
Para acrescentar uma nova página, clique em Acrescentar Página. Pode reposicionar a página na árvore do site arrastando-a e largando-a.
Para alterar a disposição associada a uma página, escolha a página na árvore do site e clique em para apresentar as definições da página.

Vá para o campo Disposição da Página e selecione uma disposição diferente no menu. O número e o tipo de disposições de páginas dependem do tema associado ao site.
Clique em Gravar para gravar as alterações na atualização atual. Pode continuar a trabalhar na atualização atual ou criar novas atualizações se necessário.

Atualizar Navegação

Quando observa a navegação na pré-visualização do site, esta não corresponde à hierarquia atual devido à navegação de codificação rígida na disposição do tema do Bootstrap.

Atualize a navegação para substituir a codificação rígida no tema do Bootstrap por código gerado dinamicamente a partir da hierarquia do site.

Edite as suas cópias sincronizadas locais dos ficheiros do tema.

Retire o código de navegação com codificação rígida das disposições. Segue-se um exemplo da navegação com codificação rígida que terá de ser retirada de um tema típico do Bootstrap. Trata-se de uma secção de cabeçalho típica, com o logótipo, as partes "Alternar Navegação" para o menu "Hambúrguer" quando a página é demasiado estreita (a parte responsiva) e a navegação de página com codificação rígida para as outras páginas.

<header id="header" class="header navbar-fixed-top">  
        <div class="container">       
            <h1 class="logo">
                <a href="index.html"><span class="text">Velocity</span></a>
            </h1><!--//logo-->
            <nav class="main-nav navbar-right" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button><!--//nav-toggle-->
                </div><!--//navbar-header-->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a href="index.html">Home</a></li>
                        <li class="nav-item"><a href="features.html">Features</a></li>
                        <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="download.html">Download Apps</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-single.html">Blog Single</a></li>
                                <li><a href="blog-category.html">Blog Category</a></li>
                                <li><a href="blog-archive.html">Blog Archive</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>                    
                            </ul>                            
                        </li><!--//dropdown-->                         
                        <li class="nav-item"><a href="login.html">Log in</a></li>
                        <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li>
                    </ul><!--//nav-->
                </div><!--//navabr-collapse-->
            </nav><!--//main-nav-->                     
        </div><!--//container-->
    </header><!--//header-->

Escreva código JavaScript para percorrer as informações da estrutura do site e gerar o código de navegação e, em seguida, inclua o código JavaScript nas disposições, por exemplo:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modifique a saída de dados exata do ficheiro topnav.js para corresponder à markup esperada no seu CSS específico.

Atualizar Disposições do Site

Neste momento, o site é funcional mas não tem áreas editáveis (slots) nas disposições.

Localize ou acrescente um elemento DIV numa disposição e designe-o como um slot.

Os slots são elementos DIV na disposição que têm o valor "scs-slot" no atributo da classe. Cada slot deve ter um atributo id exclusivo. Por exemplo:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Para que o slot se ajuste automaticamente ao tamanho da delimitação do browser, inclua o atributo da classe "scs-responsive".
Repita este passo conforme necessário para criar slots adicionais na disposição ou noutras disposições.

Publicar o Site

Após ter terminado e gravado todas as suas alterações a um site, deve Publicar o site.

A publicação do site vai buscar todas as alterações na atualização atual e funde-as na base, transformando o que existia na atualização no novo site base.

Criar o Novo Modelo

Dispõe agora de um site funcional com um tema associado, que pode transformar num modelo a partilhar com outros utilizadores para que estes possam criar sites a partir do mesmo.

Na navegação lateral do Oracle Content Management, clique em Programador.
Clique em Visualizar Todos os Modelos.
Clique em Criar e escolha A partir do site existente.
Selecione o novo site que criou utilizando o modelo inicial e o modelo Bootstrap.
Introduza um nome para o novo modelo e clique em Criar.
Para empacotar o modelo para utilização com outras instâncias do Oracle Content Management, selecione o modelo e escolha a opção de menu Exportar para criar um ficheiro .zip que pode ser descarregado.