Creación de una plantilla de sitio a partir de Bootstrap o de una plantilla de diseño de sitio web

La arquitectura abierta de Oracle Content Management significa que puede utilizar el trabajo realizado en otros marcos de codificación, como Foundation o Bootstrap. Con unos pocos cambios, puede convertir una plantilla de Bootstrap en un tema y hacer que forme parte de una plantilla de Oracle Content Management.

Proceso básico

A continuación se ofrece una visión general de los pasos descritos de forma detallada en las siguientes secciones:

Requisitos previos

Configure y ejecute la aplicación de escritorio de Oracle Content Management para realizar la sincronización de carpetas y archivos en su computadora local.
Descargue el contenido, los archivos y las carpetas de temas de la plantilla de Bootstrap en la computadora y prepárelos para su uso.

Crear un sitio

Cree un sitio a partir de una plantilla de inicio de Oracle Content Management:

En la navegación lateral, haga clic en Sitios.

Se muestra una lista de los sitios existentes.
Haga clic en Crear.
En el cuadro de diálogo Crear sitio, seleccione Plantilla de inicio de JET o Plantilla de inicio para utilizarla como base del sitio.
En el cuadro de diálogo, introduzca un nombre para el sitio. Este nombre se utiliza en la URL del sitio. Puede utilizar letras, números, guiones (-) y signos de subrayado (_). Si introduce un espacio, se reemplaza automáticamente por un guion.

No utilice los siguientes nombres para plantillas, temas, componentes, sitios ni páginas de sitios: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Aunque puede utilizar los siguientes nombres para las páginas del sitio, no los utilice para plantillas, temas, componentes ni sitios: documents, sites.
Nota:

La ruta de acceso de la dirección URL del sitio de Oracle Content Management es sensible a mayúsculas/minúsculas. Las mayúsculas/minúsculas de la consulta o las cadenas de fragmentos las gestionan los desarrolladores en su código personalizado.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Opcionalmente, introduzca una descripción para el sitio.
Cuando esté listo, haga clic en Crear.

En la barra de progreso, aparece el nombre del sitio nuevo y el estado de creación. Cuando se crea el sitio, su nombre aparece en la lista de sitios. Su estado inicial es fuera de línea.

Para encontrar rápidamente el sitio recién creado en la lista, ordénela por Última actualización. El sitio que acaba de crear aparecerá en la parte superior de la lista.

Sincronizar la carpeta de temas

Cuando se crea un sitio a partir de una plantilla de inicio, se crea una copia de la plantilla de inicio y se le asigna un nombre formado por el nombre del sitio seguido del nombre del tema. Por ejemplo, el tema de Mi_Nuevo_Sitio es Mi_Nuevo_SitioTema.

Utilice la aplicación de escritorio para sincronizar la carpeta de temas y los archivos del sitio con su computadora local. Consulte Introducción a la sincronización en Colaboración en documentos con Oracle Content Management.

Al hacerlo, podrá ver los archivos y la jerarquía de carpetas de temas de la plantilla en su escritorio local. Tomemos el siguiente ejemplo:

    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 el tema básico

Copie estos archivos de Bootstrap en las carpetas de temas sincronizadas de su computadora local para superponer los archivos existentes.
- Los archivos html se incluyen en la carpeta theme_name/layouts
- Los archivos css se incluyen en la carpeta theme_name/assets/css
- Los archivos js se incluyen en la carpeta theme_name/assets/js
- Los archivos image se incluyen en la carpeta theme_name/assets/images y pueden agruparse en subcarpetas con imágenes para el fondo, el pie de página, las personas, etc.
Modifique los archivos html de la carpeta layout para actualizar las rutas de acceso relativas y agregar los elementos necesarios. Para un tema de Bootstrap típico habrá un gran número de rutas de acceso relativas a la carpeta /assets, por lo que deberá modificarlas para que apunten a la carpeta de temas.

Corrija las rutas de acceso de las carpetas css, js y images para utilizar:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Nota:
Una vez completado este paso, la parte _scs_theme_root se ajustará automáticamente al entorno en el que se esté utilizando el tema.
Existen tres requisitos para cada diseño de Oracle Content Management:
1. Incluya las siguientes etiquetas en la etiqueta <head> del archivo html:
  - 
  - 
  - 
2. Incluya el script de representador al final de los archivos de diseño, justo en el interior de la etiqueta <body>. Estas dos rutas de acceso se ajustan de forma automática en el creador de sitios y en los entornos de tiempo de ejecución.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Incluya las siguientes etiquetas después de incluir el archivo renderer.js:
  - 
  -

Verifique que los archivos de temas modificados están sincronizados con el sitio en Oracle Content Management.

Actualizar las páginas del sitio

Al abrir el sitio en el creador de sitios, verá inicialmente las páginas que están en el sitio por defecto. Puede suprimir las páginas que no desee y cambiar el diseño de las páginas que desee guardar a uno de los nuevos diseños.

En la navegación lateral, haga clic en Sitios.

Se muestra una lista de los sitios existentes.
Seleccione el sitio y elija Abrir en el menú contextual o haga clic en en la barra de acciones.
Introduzca un nombre para la actualización y una descripción opcional y, a continuación, haga clic en Crear.

Para el nombre de actualización, puede usar letras, números, guiones bajos (_) y guiones (-). Si introduce un espacio, se reemplaza automáticamente por un guion.

Si ya tiene actualizaciones del sitio, seleccione una en la lista y haga clic en .
El creador de sitios se abrirá en el modo de vista previa. Para crear cambios o utilizar las opciones de navegación de la barra lateral, asegúrese de que el conmutador Editar esté establecido en Editar.
Para editar una página en concreto, selecciónela utilizando el árbol del sitio en la barra lateral o la navegación propia del sitio.
Para eliminar una página que no desee, selecciónela y haga clic en .
Para agregar una nueva página, haga clic en Agregar página. Puede volver a colocar la página en el árbol del sitio arrastrándola y soltándola.
Para cambiar el diseño asociado a una página, seleccione la página en el árbol del sitio y haga clic en para mostrar la configuración de la página.

Vaya al campo Diseño de página y seleccione un diseño diferente en el menú. El número y tipo de diseños de página dependen del tema asociado con el sitio.
Seleccione Guardar para guardar los cambios en la actualización actual. Puede seguir trabajando en la actualización actual o crear nuevas actualizaciones si es necesario.

Actualizar la navegación

Al consultar la navegación en la vista previa del sitio, esta no coincide con la jerarquía actual debido a la navegación codificada en el diseño del tema de Bootstrap.

Actualice la navegación para sustituir el código de codificación del tema de Bootstrap por código generado de forma dinámica de la jerarquía del sitio.

Edite las copias locales sincronizadas de los archivos de tema.

Elimine el código de navegación de codificación de los diseños. A continuación, se muestra un ejemplo de navegación codificada que debería eliminarse de un tema de Bootstrap típico. Esta es una sección de cabecera típica, con el logotipo, las partes ‘Toggle Navigation’ del menú ‘Hamburger’ cuando la página es demasiado estrecha (la parte ajustable) y la navegación de página codificada para las otras 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-->

Escriba código JavaScript para recorrer la información de la estructura del sitio y generar el código de navegación y, a continuación, incluya el código JavaScript en los diseños; por ejemplo:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modifique la salida exacta del archivo topnav.js para que coincida con el marcador esperado en su CSS en particular.

Actualizar los diseños del sitio

En este momento, el sitio es funcional pero no tiene ningún área (espacio) editable en los diseños.

Busque o agregue un elemento DIV en un diseño y desígnelo como un espacio.

Los espacios son elementos DIV del diseño que tienen el valor "scs-slot" en el atributo de clase. Cada espacio debe tener un atributo id único. Por ejemplo:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Para hacer que el espacio se ajuste de forma automática al tamaño de la ventanilla del explorador, incluya el atributo de clase "scs-responsive".
Repita este paso según sea necesario para crear espacios adicionales en el diseño o en otros diseños.

Publicar el sitio

Una vez completados y guardados todos los cambios realizados en un sitio, debe Publicar el sitio.

La publicación del sitio toma todos los cambios de la actualización actual y los fusiona en la base, convirtiendo lo que estaba en la actualización en el nuevo sitio base.

Crear la nueva plantilla

Ahora tiene un sitio funcional con un tema asociado, por lo que puede convertirlo en una plantilla para compartirla con otros usuarios de modo que puedan crear sitios a partir de ella.

En la navegación lateral de Oracle Content Management, haga clic en Desarrollador.
Haga clic en Ver todas las plantillas.
Haga clic en Crear y seleccione A partir del sitio existente.
Seleccione el sitio nuevo que ha creado utilizando una plantilla de inicio y la plantilla de Bootstrap.
Introduzca un nombre para la nueva plantilla y haga clic en Crear.
Para empaquetar la plantilla y utilizarla con otras instancias de Oracle Content Management, seleccione la plantilla y elija la opción de menú Exportar para crear un archivo .zip que pueda descargarse.