OTT | Tipos | Protección Intelectual

Para empezar

Merlín es una aproximación al diseño atómico construído día a día por la experiencia de permanentes desarrollos, buscando generar un lenguaje común y versátil entre diseñadores y desarrolladores front y back end, para así agilizar procesos y optimizar tiempos.

Átomos

Son un cúmulo de unidades discretas. Juntando dos o más de ellas se pueden construir moléculas y cuando se juntan moléculas, organismos.

Revisa los átomos

Organismos

Módulos funcionales, tanto en HTML como en PHP (Wordpress). Todos tienen su propio SCSS y algunos de ellos tienen condicionantes, como clases o archivos JS asociados.

Revisa los organismos

Para los diseñadores

No queremos bajo ninguna circunstancia, eliminar tu libertad creativa. De hecho, te alentamos a que, en caso de que estimes conveniente y Merlín no solucione tus necesidades, diseñes nuevos módulos y así le enseñas un nuevo truco de magia.

Wireframes/Diseño

Para empezar tu nuevo proyecto, puedes descargar:
- La versión completa de Merlín: Esta incluye todos los módulos diseñados hasta el momento, pero que no necesariamente han sido desarrollado por nuestros programadores.

Iconografía

Descarga acá la versión actual (1.5) de la fuente iconográfica de Merlín para comenzar a diseñar tu nuevo proyecto.
Descarga acá la versión más actualizada de íconos de Merlín para comenzar a diseñar tu nuevo proyecto.
Si no se adecúa, puedes comenzar a hacer una nueva familia. Recuerda subirla a Icomoon para que el desarrollador pueda programar sin problemas.

Para los desarrolladores

Merlín es un proyecto separado por organismos, eso quiere decir que cada uno de ellos tiene su propio .scss y js. Es sumamente importante que "limpies" el proyecto de aquellos módulos que no serán utilizados.

Si estás en un Wordpress, debes ir al functions, buscar "merlin_styles_and_scripts()" y eliminar los .js y .css que no serán utilizados, además de eliminar en el archivo style.scss la importación de distintos .scss, de modo tal que no generes estilos que no necesites.

Estructura del proyecto:

Merlín presenta archivos ordenados por carpetas y subcarpetas con el objetivo de cuidar el orden:

404.php
atomos.php (este archivo debe eliminarse en tu proyecto)
components/
- custom/
  - js/
    - highlight/ (esta carpeta debe eliminarse en tu proyecto)
      - androidstudio.css
      - default.css
      - highlight.pack.js
  - scss/
    - _buttons.scss
    - _colors.scss
    - _fonts.scss
    - _header.scss
    - _layout.scss
    - _modal.scss
    - _responsive_desktop.scss
    - _responsive_phone.scss
    - _responsive_tablet.scss
    - _slick.scss
    - _wysiwyg.scss
- merlin/
  - icons/
    - icomoon.eot
    - icomoon.svg
    - icomoon.ttf
    - icomoon.woff
    - selection.json
    - style.css
    - SVG.ZIP (este archivo debe eliminarse en tu proyecto)
  - js/
    - animacion-anclas.js
    - aos/
      - aos.css
      - aos.js
    - header.js
    - jquery/
      - jquery-ui.js
      - jquery.js
    - lightgallery/
      - fonts/
        
        lg.eot
        
        lg.svg
        
        lg.ttf
        
        lg.woff
      - lg-thumbnail.js
      - lg-thumbnail.min.js
      - lg-video.js
      - lg-video.min.js
      - lightgallery.css
      - lightgallery.js
    - modal.js
    - scripts.js
    - simpleParallax.min.js
    - slick/
      - slick.css
      - slick.min.js
    - toggle.js
  - scss/
    - _animations.scss
    - _flex.scss
    - _fonts.scss
    - _general.scss
    - _icons.scss
    - _mixins.scss
    - _reset.scss
    - _responsive_desktop.scss
    - _responsive_phone.scss
    - _responsive_tablet.scss
footer.php
functions.php
header.php
index.php (este archivo debe modificarse en tu proyecto)
moleculas.php (este archivo debe eliminarse en tu proyecto)
organismos.php (este archivo debe eliminarse en tu proyecto)
organisms/
- blocks/
  - 01/
    - scss/
      - _block-1.scss
  - 02/
    - scss/
      - _block-2.scss
  - 03/
    - js/
      - block-3.js
      - count-up.js
      - in-view.js
    - scss/
      - _block-3.scss
  - 04/
    - scss/
      - _block-4.scss
  - 05/
    - js/
      - block-5.js
    - scss/
      - _block-5.scss
  - 06/
    - scss/
      - _block-6.scss
- sliders/
  - 01/
    - js/
      - slider-1.js
    - scss/
      - _slider-1.scss
  - 02/
    - js/
      - slider-2.js
    - scss/
      - _slider-2.scss
  - 03/
    - js/
      - slider-3.js
    - scss/
      - _slider-3.scss
  - 04/
    - js/
      - slider-4.js
    - scss/
      - _slider-4.scss
  - 05/
    - js/
      - slider-5.js
    - scss/
      - _slider-5.scss
  - 06/
    - js/
      - slider-6.js
    - scss/
      - _slider-6.scss
  - 07/
    - js/
      - slider-7.js
    - scss/
      - _slider-7.scss
page.php
screenshot.png
search.php
searchform.php
single.php
style.css
style.scss

JS:

Merlín trae unos archivos básicos que pueden aplicar para gran cantidad de proyectos:

components/
- merlin/
  - js/
    - animacion-anclas.js: Al elemento href que tenga como destino una id dentro de la misma página, debe añadírsele la clase .scroll-move y se animará el movimiento del scroll con una transición fluida.
    - aos/: Es una libería para generar animaciones mientras el usuario hace scroll. La documentación completa la puedes encontrar haciendo click acá .
    - jquery/: Se encuentran los archivos jquery.js (v3.4.1) y jquery-ui.js(v1.12.1)
    - jquery/: Librería para generar galerías de videos/fotos. La documentación completa la puedes encontrar haciendo click acá .
    - modal.js: Todo aquello necesario para hacer funcionar los distintos modals en Merlín.
    - scripts.js: Scripts generales que podrían aplicar a muchos proyectos. Entre ellos: Igualar elementos en altura, la llamada a tabs ó los triggers para el menú en dispositivos móviles
    - simpleParallax.min.js: Parallax en aquellos elementos que sea necesario aplicarlo (documentado en Átomos). La documentación completa de la librería la puedes encontrar haciendo click acá .
    - slick/: Este script (y su .css básico) son aplicados en todos los sliders de Merlín. Debe eliminarse sólo en el caso de que no exista ningún carrusel en el proyecto. La documentación completa la puedes encontrar haciendo click acá .
    - toggle.js: Para hacer toggle en el elemento que incorpore las clases correctas.

SCSS de Merlín:

Estos estilos no son editables, ya que manejan estructuras bases para que tu construyas el repertorio de magia de Merlín. Estos archivos se encuentran en la carpeta components/merlin/scss/:

_reset.scss: Quita atributos que vienen por default en navegadores (como márgenes, paddings), etc.
_mixins.scss: Este es un archivo sumamente importante, porque en ocasiones puede ahorrarte tiempo en soluciones que ya están desarrolladas. Pinchando acá puedes saber más de los @mixins de Merlín.
_icons.scss: Llama a la familia tipográfica de íconos de merlín. También crea clases por cada ícono.
_fonts.scss: Este archivo es distinto al que se encuentra en components/customs/scss/, ya que este maneja atributos generales, como el peso, la alineación/justificado y tamaños.
_general.scss: Se declaran los contenedores, elementos gráficos, los breakpoints para el responsive, columnas y grillas, entre otras cosas.
_flex.scss: Distintos aspectos de un elemento con display: flex.
_animations.scss: Efectos de animación (zoom, zoom-out) y transiciones para hacer mas "suave" transiciones entre :hover o lo que estimes conveniente.
_responsive_desktop.scss: Estilos para alguna resolución de escritorio más pequeña.
_responsive_tablet.scss: Estilos para tablets.
_responsive_phone.scss: Estilos para smartphones.

SCSS Customizable:

Puedes comenzar a editar todos aquellos .scss que se encuentran en la carpeta components/custom/scss/ para darle vida a tu nuevo proyecto:

_colors.scss: Generar variables para los distintos colores.
_fonts.scss: Definir la(s) familia(s) tipográfica(s).
_header.scss: Vienen ya, estilos pre-definidos para la cabecera, tales cómo:
- ul.main-menu: Listado del menu principal
- ul.sub-menu: Estilos para un sub-menú
- .nav-down, .nav-up, .nav-top: Estilos para que la cabecera aparezca/desaparezca cuando el usuario hace scroll. Esta es dependiente del script header.js ubicado en /components/melin/js/header.js.
- .menu-responsive: Menú que rezca/desaparezca cuando el usuario hace scroll. Esta es dependiente del script header.js ubicado en /components/melin/js/header.js.
- .aside: Eliminar estilo. Este no te servirá en tu proyecto.
_modal.scss: Estilos para el modal.
_slick.scss: SCSS generales para la librería slick.js, utilizada para los distintos sliders de Merlín.
_wysiwyg.scss: Muchos aspectos del editor WYSIWYG (What You See Is What You Get) ya se encuentran parametrizados en Merlín. Este archivo ya tiene desarrollado estilos básicos para párrafos, citas, galerías, tablas, etc.
_buttons.scss: Estilos para los botones.
_responsive_desktop.scss: Estilos para alguna resolución de escritorio más pequeña.
_responsive_tablet.scss: Estilos para tablets.
_responsive_phone.scss: Estilos para smartphones.
_layout.scss: Este archivo debes eliminarlo ó modificarlo. Acá hay estilos que estas visualizando ahora, pero que no te servirán en nada para tu proyecto. Sigue la siguiente lógica y así, todos los desarrolladores podrán encontrar tu código mucho más rápido si es que necesitan echarte una mano en un futuro:
- Si tu proyecto, por ejemplo, tiene cómo páginas "Inicio", "Quiénes somos" y "Contacto", anda construyendo un archivo .scss por cada una de ellas, de manera tal que exista una consistencia. En este hipotético caso, los archivos que darían estilos a cada una de estas páginas serían components/custom/scss/_inicio.scss, components/custom/scss/_quienes-somos.scss y components/custom/scss/_contacto.scss, los cuales debes llamar desde el archivo style.scss.

Merlín para Wordpress

Instalación de un nuevo proyecto:

Comienza por lo básico: Descarga la última versión de Wordpress en Español (es_ES, no es_CL).
Crea una nueva carpeta dentro de want.cl/dev/ con el nombre de tu proyecto y añade los archivos del zip ahí.
Mientras se suben los archivos al servidor, pídele a tu jefe de área que cree una nueva bbdd.
Duplica el archivo wp-config-sample.php que se encontrará en la raíz de tu nuevo proyecto y ponle el nombre wp-config.php.
Asígnale la bbdd, el user y pass que existe para desarrollo. Si no sabes cual es, pregúntale.

El tema:

Descarga el tema merlin-want.
Cambia el nombre de la carpeta del tema por el de tu proyecto. Jamás debe dejarse el nombre merlin-want.
Sube la carpeta a want.cl/dev/tu-proyecto/wp-content/themes/.
Debes Modificar ciertos atributos en el archivo style.scss:
- Theme Name: Por el nombre del proyecto
- Theme URI: Por la URL del proyecto
- Version: Generalmente es 1.0, pero dependiendo del cliente, esta puede cambiar (por ejemplo, si es una postventa).
- Description: Lo más probable es que este campo pueda ser eliminado, sin embargo, si deseas, puedes rellenarlo para hacer más precisa la documentación del proyecto.
Reemplazar el archivo screenshot.png. Puedes pedirle al diseñador a cargo del proyecto que te genere un archivo .PNG de 1200x900 del home.
Elimina los archivos atomos.php, moleculas.php y organismos.php.
También debes modificar el archivo index.php para comenzar en tu nuevo home.
Activa el tema desde el panel de Wordpress.
Ya puedes comenzar a crear nuevas plantillas, así como también modificar y añadir nuevos archivos en components/custom.

ACF Pro:

Ve al Wordpress de tu proyecto e instala ACF Pro (si no lo tienes, consúltale a algún colega por la versión de pago que tiene Want y su Key).
Antes de empezar a generar nuevos ACF para tu proyecto, te recomendamos que veas la página de . Ahí encontrarás documentación completa sobre qué módulos (y cómo se llaman) existen ya en Merlín.
Entendemos que no todos los sitios/softwares web son iguales, sin embargo, existen patrones que se repiten. Levanta la información de cuáles en Merlín se parecen a los de tu proyecto y anótalos.
Dirígete a la pestaña Campos Personalizados -> Herramientas.
Selecciona aquellos módulos que anotaste y expórtalos.
Una vez instalado, dirígete a la pestaña Campos Personalizados -> Herramientas.
En el recuadro Importar, selecciona el archivo importado desde Merlín e impórtalo en tu nuevo proyecto
Importante: Debes modificar el nombre de los ACF para hacerlos más accesibles al cliente. Por ejemplo Slider 1 puede pasar a llamarse Slider Principal o el Slider 2 puede llamarse ahora Carrusel de logotipos. Recuerda que hay una persona que administrará este sitio, y nuestro deber es hacer que sea fácil de utilizar.

Functions:

Ya vienen algunas funciones básicas en Merlín. Acá las revisamos:

					
<?php
/*-------------------------------------------------------------*/
/*--- No mostrar la version de Wordpress dentro del <head> ----*/
/*-------------------------------------------------------------*/
function eliminar_version_wordpress() {
return '';
}
add_filter('the_generator', 'eliminar_version_wordpress');


/*-------------------------------------------------------------*/
/*-------------- Eliminar barra de administración -------------*/
/*-------------------------------------------------------------*/
function quitar_barra_administracion()  {
  return false;
}
add_filter( 'show_admin_bar' , 'quitar_barra_administracion');

/*-------------------------------------------------------------*/
/*---------------------- Eliminar Tags ------------------------*/
/*-------------------------------------------------------------*/
add_action('init', 'remove_tags');
function remove_tags(){
    register_taxonomy('post_tag', array());
}

/*-------------------------------------------------------------*/
/*--------- Permito imagen destacada en los Posts -------------*/
/*-------------------------------------------------------------*/
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

/*-------------------------------------------------------------*/
/*------------------ Menús personalizados ---------------------*/
/*-------------------------------------------------------------*/
register_nav_menus( array(
  'Menu principal' => 'Menu principal',
  'Menu footer' => 'Menu footer',
));

/*-------------------------------------------------------------*/
/*--- Le añado la clase "active" al elemento actual del menu ---*/
/*-------------------------------------------------------------*/
add_filter('nav_menu_css_class', function ($classes, $item, $args, $depth) {
    //Todas las diferentes clases "active" añadidas por WordPress
    $active = [
        'current-menu-item',
        'current-menu-parent',
        'current-menu-ancestor',
        'current_page_item'
    ];
    //Si coincide, añade la clase "active"
    if ( array_intersect( $active, $classes ) ) {
        $classes[] = 'active';
    }
    return $classes;
}, 10, 4);

/*----------------------------------------------------------------------------*/
/*---------------------------- Eliminar Gutenberg ----------------------------*/
/*----------------------------------------------------------------------------*/
add_filter('use_block_editor_for_post', '__return_false', 10);
add_filter('use_block_editor_for_post_type', '__return_false', 10);

/*-------------------------------------------------------------*/
/*--------- Compatibilidad del tema con Woocommerce -----------*/
/*-------------------------------------------------------------*/
function my_theme_setup() {
    add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );


/*-------------------------------------------------------------*/
/*------------- Añadimos los CSS y JS del Theme ---------------*/
/*-------------------------------------------------------------*/
function merlin_styles_and_scripts() {
  wp_deregister_script( 'jquery' );

  //jQuery
  wp_enqueue_script( 'jquery', get_template_directory_uri() . '/components/merlin/js/jquery/jquery.js');

  //jQuery UI
  wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/components/merlin/js/jquery/jquery-ui.js');

  //Slick slider
  wp_enqueue_script( 'slick', get_template_directory_uri() . '/components/merlin/js/slick/slick.min.js');
  wp_enqueue_style( 'slick-style', get_template_directory_uri() . '/components/merlin/js/slick/slick.css');

  //Lightgallery
  wp_enqueue_script( 'lightgallery', get_template_directory_uri() . '/components/merlin/js/lightgallery/lightgallery.js');
  wp_enqueue_style( 'lightgallery-style', get_template_directory_uri() . '/components/merlin/js/lightgallery/lightgallery.css');

  //AOS
  wp_enqueue_script( 'aos', get_template_directory_uri() . '/components/merlin/js/aos/aos.js');
  wp_enqueue_style( 'aos-style', get_template_directory_uri() . '/components/merlin/js/aos/aos.css');

  //Scripts de Merlín
  wp_enqueue_script( 'scripts', get_template_directory_uri() . '/components/merlin/js/scripts.js');
  wp_enqueue_script( 'simple-parallax', get_template_directory_uri() . '/components/merlin/js/simpleParallax.min.js');
  wp_enqueue_script( 'modal', get_template_directory_uri() . '/components/merlin/js/modal.js');
  wp_enqueue_script( 'toggle', get_template_directory_uri() . '/components/merlin/js/toggle.js');
  wp_enqueue_script( 'header', get_template_directory_uri() . '/components/merlin/js/header.js');
  wp_enqueue_script( 'animacion-anclas', get_template_directory_uri() . '/components/merlin/js/animacion-anclas.js');

  //Scripts de Organismos: Sliders
  wp_enqueue_script( 'slider-1', get_template_directory_uri() . '/organisms/sliders/01/js/slider-1.js');
  wp_enqueue_script( 'slider-2', get_template_directory_uri() . '/organisms/sliders/02/js/slider-2.js');
  wp_enqueue_script( 'slider-3', get_template_directory_uri() . '/organisms/sliders/03/js/slider-3.js');
  wp_enqueue_script( 'slider-4', get_template_directory_uri() . '/organisms/sliders/04/js/slider-4.js');
  wp_enqueue_script( 'slider-5', get_template_directory_uri() . '/organisms/sliders/05/js/slider-5.js');
  wp_enqueue_script( 'slider-6', get_template_directory_uri() . '/organisms/sliders/06/js/slider-6.js');
  wp_enqueue_script( 'slider-7', get_template_directory_uri() . '/organisms/sliders/07/js/slider-7.js');

  //Scripts de Organismos: Bloques
    //Bloque #3
    wp_enqueue_script( 'count-up', get_template_directory_uri() . '/organisms/blocks/03/js/count-up.js');
    wp_enqueue_script( 'in-view', get_template_directory_uri() . '/organisms/blocks/03/js/in-view.js');
    wp_enqueue_script( 'block-3', get_template_directory_uri() . '/organisms/blocks/03/js/block-3.js');
    //Bloque #5
    wp_enqueue_script( 'block-5', get_template_directory_uri() . '/organisms/blocks/05/js/block-5.js');
}

add_action( 'wp_enqueue_scripts', 'merlin_styles_and_scripts' );
?>