Cerrar Menú

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

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:

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

  1. _reset.scss: Quita atributos que vienen por default en navegadores (como márgenes, paddings), etc.
  2. _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.
  3. _icons.scss: Llama a la familia tipográfica de íconos de merlín. También crea clases por cada ícono.
  4. _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.
  5. _general.scss: Se declaran los contenedores, elementos gráficos, los breakpoints para el responsive, columnas y grillas, entre otras cosas.
  6. _flex.scss: Distintos aspectos de un elemento con display: flex.
  7. _animations.scss: Efectos de animación (zoom, zoom-out) y transiciones para hacer mas "suave" transiciones entre :hover o lo que estimes conveniente.
  8. _responsive_desktop.scss: Estilos para alguna resolución de escritorio más pequeña.
  9. _responsive_tablet.scss: Estilos para tablets.
  10. _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:

  1. _colors.scss: Generar variables para los distintos colores.
  2. _fonts.scss: Definir la(s) familia(s) tipográfica(s).
  3. _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.
  4. _modal.scss: Estilos para el modal.
  5. _slick.scss: SCSS generales para la librería slick.js, utilizada para los distintos sliders de Merlín.
  6. _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.
  7. _buttons.scss: Estilos para los botones.
  8. _responsive_desktop.scss: Estilos para alguna resolución de escritorio más pequeña.
  9. _responsive_tablet.scss: Estilos para tablets.
  10. _responsive_phone.scss: Estilos para smartphones.
  11. _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:

  1. Comienza por lo básico: Descarga la última versión de Wordpress en Español (es_ES, no es_CL).
  2. Crea una nueva carpeta dentro de want.cl/dev/ con el nombre de tu proyecto y añade los archivos del zip ahí.
  3. Mientras se suben los archivos al servidor, pídele a tu jefe de área que cree una nueva bbdd.
  4. 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.
  5. Asígnale la bbdd, el user y pass que existe para desarrollo. Si no sabes cual es, pregúntale.

El tema:

  1. Descarga el tema merlin-want.
  2. Cambia el nombre de la carpeta del tema por el de tu proyecto. Jamás debe dejarse el nombre merlin-want.
  3. Sube la carpeta a want.cl/dev/tu-proyecto/wp-content/themes/.
  4. 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.
  5. Reemplazar el archivo screenshot.png. Puedes pedirle al diseñador a cargo del proyecto que te genere un archivo .PNG de 1200x900 del home.
  6. Elimina los archivos atomos.php, moleculas.php y organismos.php.
  7. También debes modificar el archivo index.php para comenzar en tu nuevo home.
  8. Activa el tema desde el panel de Wordpress.
  9. Ya puedes comenzar a crear nuevas plantillas, así como también modificar y añadir nuevos archivos en components/custom.

ACF Pro:

  1. 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).
  2. Antes de empezar a generar nuevos ACF para tu proyecto, te recomendamos que veas la página de Imagen. Ahí encontrarás documentación completa sobre qué módulos (y cómo se llaman) existen ya en Merlín.
  3. 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.
  4. Dirígete a la pestaña Campos Personalizados -> Herramientas.
  5. Selecciona aquellos módulos que anotaste y expórtalos.
  6. Una vez instalado, dirígete a la pestaña Campos Personalizados -> Herramientas.
  7. En el recuadro Importar, selecciona el archivo importado desde Merlín e impórtalo en tu nuevo proyecto
  8. 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' );
?>
Política de privacidadNebulan

Política de privacidad de Nebulan


Nebulan opera el sitio web https://www.nebulan.cl, que proporciona el SERVICIO.

Esta página se utiliza para informar a los visitantes del sitio web sobre nuestras políticas con la recopilación, el uso y la divulgación de información personal si alguien decide utilizar nuestro Servicio, el Nebulan.cl sitio web.

Si elige utilizar nuestro Servicio, acepta la recopilación y el uso de información en relación con esta política. La Información Personal que recopilamos se utiliza para proporcionar y mejorar el Servicio. No usaremos ni compartiremos su información con nadie, excepto como se describe en esta Política de privacidad.

Los términos y conceptos utilizados en esta Política de privacidad tienen los mismos significados y se aplican en el mismo sentido que en nuestros Términos y condiciones, a los que se puede acceder en https://www.nebulan.cl, en todo aquello que no sea contradictorio con  esta Política de privacidad.

Recopilación y uso de información

Para una mejor experiencia al usar nuestro Servicio, es posible que le solicitemos que nos proporcione cierta información de identificación personal, que incluye, entre otros, su nombre, número de teléfono y dirección postal. La información que recopilamos se utilizará para contactarlo o identificarlo.

Datos de registro

Queremos informarle que cada vez que visita nuestro Servicio, recopilamos información que su navegador nos envía que se denomina Datos de registro. Estos Datos de registro pueden incluir información como la dirección de Protocolo de Internet ("IP") de su computadora, la versión del navegador, las páginas de nuestro Servicio que visita, la hora y la fecha de su visita, el tiempo dedicado a esas páginas y otras estadísticas.

Cookies

Las cookies son archivos con una pequeña cantidad de datos que se utiliza comúnmente como un identificador único anónimo. Estos se envían a su navegador desde el sitio web que visita y se almacenan en el disco duro de su computadora.

Nuestro sitio web utiliza estas "cookies" para recopilación de información y para mejorar nuestro Servicio. Usted tiene la opción de aceptar o rechazar estas cookies, y saber cuándo se envía una cookie a su computadora. Si elige rechazar nuestras cookies, es posible que no pueda utilizar algunas partes de nuestro Servicio.

Para obtener más información general sobre las cookies, lea el artículo "Cookies" del Generador de políticas de privacidad.

Proveedores de servicios

Podemos emplear servicios de terceros ya sea empresas o  individuos todo esto para el cumplimiento de las siguientes finalidades:

Para facilitar nuestro Servicio;
Para proporcionar el Servicio en nuestro nombre;
Para realizar servicios relacionados con el Servicio; o
Para ayudarnos a analizar cómo se utiliza nuestro Servicio.
Queremos informar a los usuarios de nuestro Servicio que estos terceros tienen acceso a su Información Personal. La razón es realizar las tareas asignadas a ellos en nuestro nombre. Sin embargo, están obligados a no divulgar ni utilizar la información para ningún otro propósito.

Seguridad

Valoramos su confianza al proporcionarnos su información personal, por lo que nos esforzamos por utilizar medios comercialmente aceptables para protegerla. Pero recuerde que ningún método de transmisión a través de Internet, o método de almacenamiento electrónico es 100% seguro y confiable, y no podemos garantizar su seguridad absoluta, sin perjuicio de lo cual nuestros sistemas de seguridad de seguridad y protección de datos son del más alto estándar disponibles en la industria.

Enlaces a otros sitios

Nuestro Servicio puede contener enlaces a otros sitios. Si hace clic en un enlace de terceros, se le dirigirá a ese sitio. Tenga en cuenta que estos sitios externos no son operados por nosotros. Por lo tanto, le recomendamos encarecidamente que revise la Política de privacidad de estos sitios web. No tenemos control ni asumimos ninguna responsabilidad por el contenido, las políticas de privacidad o las prácticas de los sitios o servicios de terceros.

Privacidad de los niños

Nuestros Servicios no se dirigen a ninguna persona menor de 13 años. No recopilamos a sabiendas información de identificación personal de niños menores de 13 años. En el caso de que descubramos que un niño menor de 13 años nos ha proporcionado información personal, la eliminamos inmediatamente de nuestros servidores. Si usted es un padre o tutor y sabe que su hijo nos ha proporcionado información personal, comuníquese con nosotros para que podamos realizar las acciones necesarias.

Cambios a esta Política de Privacidad

Podemos actualizar nuestra Política de privacidad de vez en cuando. Por lo tanto, le recomendamos que revise esta página periódicamente para cualquier cambio. Le notificaremos de cualquier cambio mediante la publicación de la nueva Política de privacidad en esta página. Estos cambios son efectivos inmediatamente, después de que se publiquen en esta página.

Contáctenos

Si tiene alguna pregunta o sugerencia sobre nuestra Política de Privacidad, no dude en ponerse en contacto con nosotros.