Creare un modello di sito da un modello Bootstrap o di progettazione di siti Web

L'architettura aperta di Oracle Content Management consente di utilizzare il lavoro svolto in altri framework di codifica quali Foundation o Bootstrap. Con alcune modifiche è possibile convertire un modello Bootstrap in tema e integrarlo a un modello di Oracle Content Management.

Procedura di base

Di seguito vengono elencati i passi descritti nei dettagli nelle sezioni seguenti:

Prerequisiti

Impostare ed eseguire l'applicazione desktop Oracle Content Management per la sincronizzazione delle cartelle e dei file nel computer locale.
Scaricare le cartelle, i file e il contenuto del tema del modello Bootstrap nel computer locale e prepararli all'uso.

Creare un sito

Creare un sito da un modello iniziale di Oracle Content Management:

Nella barra di navigazione laterale, fare clic su Siti.

Viene visualizzata la lista dei siti esistenti.
Fare clic su Crea.
Nella finestra di dialogo Crea sito selezionare il modello iniziale JET o il modello iniziale da utilizzare come base per il sito.
Nella finestra di dialogo immettere un nome per il sito. Questo nome viene utilizzato nell'URL del sito. È possibile utilizzare lettere, numeri, caratteri di sottolineatura (_) e trattini (-). Eventuali spazi immessi vengono sostituiti automaticamente con trattini.

Non usare i nomi seguenti per modelli, temi, componenti, siti o pagine di siti: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Sebbene sia possibile usare i nomi seguenti per le pagine dei siti, non utilizzarli per i modelli, i temi, i componenti o i siti: documents, sites.
Nota:

Il percorso per un URL di sito Oracle Content Management distingue tra maiuscole e minuscole. L'utilizzo delle maiuscole e minuscole nelle stringhe di query o di frammenti viene gestita dagli sviluppatori nel rispettivo codice personalizzato.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Se si desidera, immettere una descrizione per il sito.
Al termine delle operazioni, fare clic su Crea.

Una barra di avanzamento mostra il nome del nuovo sito e lo stato della creazione. Quando il sito viene creato, il nome viene visualizzato nella lista dei siti. Lo stato iniziale del nuovo sito è non in linea.

Per trovare rapidamente il nuovo sito creato nella lista, ordinare la lista in base all'Ultimo aggiornamento. Il sito appena creato viene visualizzato all'inizio della lista.

Sincronizzare le cartelle di tema

Quando si crea un sito da un modello iniziale, viene creata una copia del tema del modello iniziale, a cui viene assegnato il nome del sito seguito dal nome del tema. Ad esempio, il tema per My_New_Site è My_New_SiteTheme.

Utilizzare l'applicazione desktop per sincronizzare la cartella e i file del tema per il sito nel computer locale. Vedere Introduzione alla sincronizzazione in Collaborazione ai documenti con Oracle Content Management.

Dopo la sincronizzazione la gerarchia della cartella e i file del tema del modello sono visibili sul desktop locale. Di seguito viene fornito un esempio.

    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

Impostare il tema di base

Copiare questi file Bootstrap nelle cartelle di tema sincronizzate sul desktop locale in modo che si sovrappongano ai file esistenti.
- Inserire i file html nella cartella theme_name/layouts
- Inserire i file css nella cartella theme_name/assets/css
- Inserire i file js nella cartella theme_name/assets/js
- Inserire i file image nella cartella theme_name/assets/images, che potrebbe essere organizzata in sottocartelle con le immagini per lo sfondo, il piè di pagina, le persone e così via
Modificare i file html nella cartella layout per aggiornarne i percorsi e aggiungere gli elementi necessari. Per un tema Bootstrap standard esistono numerosi percorsi relativi alla cartella /assets, che devono essere modificati in modo che puntino alla cartella del tema.

Correggere i percorsi per le cartelle css, js e images per utilizzare:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Nota:
Una volta completato questo passo, la parte _scs_theme_root verrà adeguata in modo automatico all'ambiente in cui viene utilizzato il tema.
Per ogni layout di Oracle Content Management è necessario soddisfare i tre requisiti riportati di seguito.
1. Includere le tag seguenti nella tag <head> del file html:
  - 
  - 
  - 
2. Includere lo script del renderer alla fine dei file del layout, all'interno della tag <body>. Entrambi i percorsi vengono adeguati in modo automatico negli ambienti SiteBuilder e runtime.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Includere le tag seguenti dopo l'inclusione del file renderer.js:
  - 
  -

Verificare che i file modificati del tema vengano sincronizzati con il sito in Oracle Content Management.

Aggiornare le pagine del sito

Quando si apre il sito in SiteBuilder, inizialmente vengono visualizzate le pagine contenute nel sito predefinito. È possibile modificare le pagine indesiderate e cambiare il layout nelle pagine da conservare impostando uno dei nuovi layout.

Nella barra di navigazione laterale, fare clic su Siti.

Viene visualizzata la lista dei siti esistenti.
Selezionare il sito e scegliere Apri nel menu di scelta rapida oppure fare clic su nella barra delle azioni.
Immettere un nome per l'aggiornamento e una descrizione facoltativa, quindi fare clic su Crea.

Per il nome dell'aggiornamento è possibile usare lettere, numeri, caratteri di sottolineatura (_) e trattini (-). Eventuali spazi immessi vengono sostituiti automaticamente con trattini.

Se sono stati già eseguiti aggiornamenti al sito, selezionarne uno dalla lista e fare clic su .
SiteBuilder viene avviato in modalità anteprima. Per apportare modifiche o usare le opzioni di navigazione nella barra laterale, assicurarsi che il selettore modifica sia impostato su Modifica.
Per modificare una pagina specifica, sceglierla usando la struttura ad albero del sito nella barra laterale o la navigazione specifica del sito.
Per rimuovere una pagina indesiderata, selezionarla e fare clic su .
Per aggiungere una nuova pagina, fare clic su Aggiungi pagina. È possibile riposizionare la pagina nel sito con la funzione di trascinamento.
Per modificare il layout associato a una pagina, scegliere la pagina nella struttura ad albero del sito e fare clic su per visualizzare le impostazioni della pagina.

Nel campo Layout di pagina selezionare un layout differente dal menu. Il numero e il tipo di layout di pagina dipendono dal tema associato al sito.
Fare clic su Salva per salvare le modifiche apportate all'aggiornamento corrente. È possibile continuare a utilizzare l'aggiornamento corrente oppure crearne di nuovi se necessario.

Aggiornare la navigazione

Quando si osserva la navigazione nell'anteprima del sito, ci si rende conto che non corrisponde alla gerarchia corrente a causa della navigazione non modificabile nel layout del tema Bootstrap.

Aggiornare la navigazione per sostituire il codice non modificabile nel tema Bootstrap con codice generato in modo dinamico dalla gerarchia del sito.

Modificare le copie sincronizzate locali dei file del tema.

Rimuovere il codice di navigazione non modificabile dai layout. Di seguito viene fornito un esempio della navigazione non modificabile che dovrebbe essere rimossa da un tema Bootstrap standard. Si tratta di una sezione di intestazione standard, con il logo, le parti 'Toggle Navigation' per il menu 'Hamburger' quando la pagina è troppo stretta (la parte rispondente) e la navigazione di pagina non modificabile per le altre pagine.

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

Scrivere il codice JavaScript per analizzare le informazioni sulla struttura del sito e generare il codice di navigazione, quindi includere il codice JavaScript nei layout; ad esempio:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modificare l'output esatto del file topnav.js in modo che corrisponda al markup previsto nei propri fogli CSS particolari.

Aggiornare i layout del sito

A questo punto il sito è funzionale, ma non dispone di aree (slot) modificabili nei layout.

Individuare o aggiungere un elemento DIV in un layout e impostarlo come slot.

Gli slot sono elementi DIV del layout con il valore "scs-slot" nell'attributo di classe. Ogni slot deve disporre di un attributo id univoco. Ad esempio:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Per fare in modo che lo slot venga adeguato automaticamente alle dimensioni del viewport del browser, includere l'attributo di classe "scs-responsive".
Ripetere le operazioni di questo passo per il numero di volte necessario per creare altri slot nello stesso layout o in altri layout.

Pubblicare il sito

Dopo aver completato e salvato tutte le modifiche apportate a un sito, è necessario pubblicare il sito.

La pubblicazione del sito comporta l'unione di tutte le modifiche nell'aggiornamento corrente con la base, in modo che il contenuto dell'aggiornamento sia disponibile nel nuovo sito di base.

Creare il nuovo modello

Ora si dispone di un sito funzionale con tema associato, che può essere inserito in un modello da condividere con altri utenti che potranno utilizzarlo per la creazione dei propri siti.

Nella barra di navigazione laterale di Oracle Content Management, fare clic su Sviluppatore.
Fare clic su Visualizza tutti i modelli.
Fare clic su Crea e scegliere Da sito esistente.
Selezionare il nuovo sito creato utilizzando un modello iniziale e il modello Bootstrap.
Immettere un nome per il nuovo modello e fare clic su Crea.
Per raggruppare il modello per l'uso con altre istanze di Oracle Content Management, selezionarlo e scegliere la voce di menu Esporta per creare un file .zip che può essere scaricato.