coding

Interruptor css puro
05/10/2016
Cada día es más común encontrar elementos de formularios totalmente personalizados que mejoran la experiencia del usuario. En este artículo vamos a ver como convertir el típico checkbox en un interruptor mucho más moderno y atractivo visualmente.   Vamos a ver un ejemplo de cómo quedaría este interruptor en las típicas opciones de un área de usuario: span.question { display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: bold; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; vertical-align: middle; } .switch input { display:none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #E27AD8; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }       Publicar mi dirección de email       Recibir boletín de novedades       Recibir emails de notificaciones   Primero necesitaremos definir el html. Vamos a usar las etiquetas label e input de tipo checkbox y un div extra que servirá para hacer el truco css. HTML <label class="switch">   <input type="checkbox">   <div class="slider round"></div> </label>   Y ahora vamos con el css: CSS /* Formateamos el label que servirá de contenedor */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Ocultamos el checkbox html */ .switch input { display:none; } /* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } /* Pintamos la perilla de control o slider usando el selector before */ .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } /* Cambiamos el color de fondo cuando el checkbox esta activado */ input:checked + .slider { background-color: #E27AD8; } /* Deslizamos el slider a la derecha cuando el checkbox esta activado */ input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } Y esto es todo amigos, ahora ya sabemos como como crear un toggle switch o interruptor con css. Fácil, rápido y para toda la familia!!
Aprende a customizar tu tema de Shopify y mejora el storefront
12/08/2016
Una de las características que ha hecho de Shopify una de las mejores plataformas de comercio electrónico es sin duda su facilidad de uso, en pocos clicks el administrador de una tienda tiene multitud de opciones de personalización disponibles que le permiten mantener en su web el dinamismo y la actividad necesarias para la venta online. Muchas de las opciones que Shopify incorpora en sus menús de administración son propias del "core" de la plataforma, y están disponibles para todos los usuarios de la misma, sin embargo, hay otras que pertenecen al ámbito del "theme". Si bien el núcleo es la estructura base de cualquier tienda, el tema es el responsable de darle a cada una su personalidad propia y de definir las características que la diferencian de las demás, en un mercado tan competitivo como la venta por internet, la diferencia, exclusividad y calidad del interfaz ofrecido al usuario es clave para el éxito. En la Theme Store de Shopify se puede elegir entre una gran variedad de temas, tanto gratuitos (los que ofrecen menos opciones y más sencillas) como de pago, ambos están disponibles para ser descargados e instalados en pocos minutos, sin embargo, si no se hace ninguna variación, podemos encontrarnos con que la tienda no destaca entre las demás o incluso se parece a otras pudiendo generar confusión entre los clientes finales. Las opciones de personalización del tema permiten hacer un tema más exclusivo y personal, son muy potentes y al mismo tiempo sencillas de usar. Para acceder a estas opciones el usuario gestor de la tienda tiene que navegar en el menú de administración de Shopify hasta "Sales channel >> Online Stores >> Themes" y haciendo click en "Customize theme" en el tema que quiera personalizar. La página de configuración del tema a la que se accede dispone de una previsualización de la tienda y de una barra lateral con las opciones de personalización disponibles. Además, esta barra tiene algunas secciones genéricas predefinidas como "Checkout" donde se configuran algunas opciones del proceso de pago. Lo importante e interesante es que el desarrollador de cada tema puede incluir tantas opciones de configuración como quiera y con propósitos muy variables. Algunos ejemplos de uso serían: Cambiar la foto de fondo de un bloque de la portada. Cambiar el texto y el color de un mensaje que sale en el footer de toda la web. Seleccionar una colección para ser mostrada en un bloque destacado. Para el primer ejemplo de la lista vamos a suponer que existe un bloque en la portada de la tienda con la clase CSS "destacado-portada", conseguiremos el efecto deseado realizando los siguientes pasos: 1. Crear la opción de configuración. Haciendo click en la opción del menú "Edit HTML/CSS" entramos en la pantalla de edición de los archivos del tema, hay que buscar la sección "Config", donde encontraremos dos archivos: settings_data.json y settings_schema.json. Para nuestro propósito nos centraremos en el segundo (si no hay opciones definidas estará vacío, o incluso puede que no exista), en cualquier caso, hemos de tener en cuenta que se trata de un archivo .json y que por tanto debe respetar la sintaxis y estructura de este tipo de archivos, para este ejemplo y con esta única opción de configuración, el contenido del archivo sería: [ { "name": "Fondo de Bloque de Portada", "icon": "header", "settings": [ { "type": "image", "id": "bg-front-block.jpg", "label": "Imagen de fondo", "info": "Suba una imagen de 300x400px" } ] } ] La propiedad "name" es el título de la sección que aparecerá en la barra lateral en "Customize theme" junto con un icono que define en la propiedad "icon" sobre una lista de opciones predefinidas (blog, cart, collection, color, contact, currency, etc.) Dentro de "settings" se especifica cada campo que aparecerá para ser rellenado por el usuario, en este caso solo habría uno, que es el fichero que se utilizará como fondo del bloque, para cada campo hay una serie de propiedades disponibles: type (Obligatorio). Tipo de control a utilizar. id (Obligatorio). Identificador único interno de este campo, solo se permiten caracteres alfanuméricos, números y guiones. label (Obligatorio). Etiqueta del campo. default (Opcional). Valor por defecto del campo. info (Opcional). Información adicional sobre el campo, aparece como un pequeño tooltip informativo. Con el código de este ejemplo la opción para subir una foto de fondo para el bloque de portada ya estaría disponible para el usuario, podría subirla y cambiarla tantas veces como quisiera. 2. Utilizar el valor definido por el usuario. Cuando el usuario guarda cualquiera de las opciones de personalización definidas, el sistema se encarga de guardar cada valor y a partir de ese momento está disponible para ser utilizado en cualquiera de las plantillas liquid del tema. Para acceder a estos valores, el sistema dispone del objeto settings, cuyas propiedades corresponden con cada unos de los valores definidos, pudiendo utilizarse en cualquier fichero .liquid generalmente utilizando la sintaxis habitual ({{ settings.id_propiedad }}). La manera de acceder al valor de la propiedad puede variar en función del tipo de campo, en nuestro ejemplo, no es necesario utilizar el objeto settings ya que podemos acceder directamente al asset, la imagen de fondo del bloque de portada se utilizará en el fichero style.liquid.scss: .destacado-portada { background-image: url('{{ 'bg-front-block.jpg' | asset_img_url: 'original' }}'); } Cuando el "type" de un campo se ha definido como "image" y el usuario guarda una imagen, automáticamente se crea un fichero cuyo nombre es el "id" del campo dentro de la carpeta "Assets" del tema, estando disponible para ser utilizado igual que el resto de ficheros, si el usuario sube otro fichero al campo, el sistema automáticamente actualiza el fichero almacenado, para que allá donde se esté utilizando aparezca el nuevo. Existen otros tipos de campo, cada uno tiene sus características propias, y en función de lo que se quiera conseguir, se utilizará uno u otro. Los tipos disponibles y la manera de utilizarlos están disponibles en la referencia completa del archivo settings_scheme.json, Combinando estos campos y valores de personalización con un desarrollo inteligente y creativo, esta herramienta se convierte en un sistema muy potente y flexible que hará que nuestra tienda de Shopify no deje a nadie indiferente, creando ventajas competitivas para diferenciarnos y destacar entre el resto de tiendas del sector.
Magnific Popup en Drupal
13/06/2016
Los popups son una excelente y bella (en ocasiones) forma de mostrar al usuario contenido relacionado o secundario sin necesidad de tener que recargar la página, existen muchos métodos y plugins que permiten realizar este efecto, todos tienen sus ventajas e inconvenientes que los hacen mejores o peores en función del uso que queramos hacer de ellos, no obstante, en este artículo vamos a mostrar uno de los mejores, o al menos, de los más versátiles: Magnific Popup, un plugin que permite su uso en multitud de situaciones diferentes: galerías, ventanas modales, cargando formularios o contenido vía AJAX, etc., siendo además rápido, ligero (dispone de una herramienta para generar una versión adaptada a nuestras necesidades), responsivo y fácil de modificar mediante CSS, ¿qué más podemos pedir? Un ejemplo sencillo de como incorporar este plugin en Drupal y sacarle un gran partido consiste en utilizarlo dentro de una view, para este ejemplo vamos a suponer que tenemos una vista de contenido consistente en un listado de nodos de un tipo de contenido "producto", la vista tendrá el nombre "productos" con un display de tipo "bloque" que muestra el la imagen el nombre de un producto, si el usuario pincha sobre él, se abre un popup con información detallada sobre dicho producto. El primer paso es configurar la view que vamos a utilizar, añadiremos inicialmente 2 campos más el Nid de cada producto que se utilizará como identificador único del popup de cada producto:     Nid (nombre de sistema: nid)     Nombre del producto (nombre de sistema: title)     Descripción del producto (nombre de sistema: descripcion) El objetivo es que el campo "Nombre" tenga un enlace que active el popup, y dentro del popup debe salir el contenido de la "Descripción", para ello haremos lo siguiente: 1. Marcamos la opción “Excluir de la presentación” del campo “Nid” y desactivamos que esté enlazado al nodo, el objetivo es que salga el id del nodo en formato de texto plano para reutilizarlo en los otros campos. 2. Marcamos la opción "Reescribir la salida de este campo" en el campo "Nombre" y escribimos el siguiente código: <div class="popup-trigger"> <a href="#popup-[nid]">[title]</a> </div> 3. Marcamos la opción "Reescribir la salida de este campo" en el campo "Descripción" y escribimos el siguiente código: <div id="popup-[nid]" class="inline-popup mfp-hide"> [descripcion] </div> Con esto tenemos la vista terminada, por supuesto se puede cambiar este HTML para adaptarlo a las necesidades de cada uno, lo que hay que tener en cuenta es que debe haber un enlace que apunte al “id” del popup, y que ese div debe tener las clases definidas para el uso del plugin, en este ejemplo son “inline-popup mfp-hide” pero pueden variar en función de las opciones que queramos utilizar, todas las opciones válidas están disponibles en la documentación. El segundo paso para que funcione el popup consiste en hacer que se cargue el fichero javascript del plugin y que se inicialicen los popups en nuestra view; existen varias formas de incorporar código js a una web de drupal, en este ejemplo vamos a utilizar una función de preprocesado para cargar el código únicamente cuando la view en la que lo hemos incorporado se vaya a mostrar, añadiremos dicha función al fichero template.php del tema: /** * Añadir Magnific Popup a bloque de view. */ function THEME-NAME_preprocess_views_view(&$vars) { $view = &$vars['view']; if ($view->name == 'productos' && $view->current_display == 'block') { // add needed javascript drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/jquery.magnific-popup.min.js'); drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/inicio-popup.js'); // add needed stylesheet drupal_add_css(drupal_get_path('theme', 'THEME-NAME ') . '/magnific-popup.css'); } } Los ficheros jquery.magnific-popup.min.js y magnific-popup.css pertenecen al código del plugin, el fichero “inicio-popup.js” es un fichero que crearemos a medida para lo que necesitemos, el código para este ejemplo sería el siguiente: (function($) { Drupal.behaviors.inicioPopup = { attach : function(context, settings) { $(".view-productos .title > a").magnificPopup({ type:"inline", removalDelay: 300, mainClass: "mfp-fade", midClick: true }); } }; })(jQuery); Nota: Tanto en el código de la función de preprocesado como en este js estamos teniendo en cuenta que la view que hemos creado se llama “productos” Con esto el popup estaría totalmente operativo, pero es necesario añadir algo de CSS a la hoja de estilos general del tema para que tenga un buen aspecto. .inline-popup { position:relative; width:auto; max-width:650px; margin:20px auto; background-color:#fff; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; padding:30px; } /* Overlay ------------ */ .mfp-fade.mfp-bg { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { /* animate in */ opacity:0.8; } .mfp-fade.mfp-bg.mfp-removing { /* animate out */ opacity:0; } /* Content ------------ */ .mfp-fade.mfp-wrap .mfp-content { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { /* animate it */ opacity:1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { /* animate out */ opacity:0; } Por supuesto a partir de aquí se puede cambiar todo lo necesario para que haga honor a su nombre y sea ¡Magnífico!
Diana tiro con arco olimpico representado el remarketing de Google
04/05/2016
El remarketing de Google es una herramienta muy poderosa para mostrar anuncios de AdWords a visitantes de nuestro sitio web en función de una serie de reglas que podemos personalizar. El módulo webform de drupal es uno de los más utilizados, especialmente para crear formularios de contacto, solicitud de información, inscripciones, etc.. En este artículo vamos a explicar cómo hacer un módulo que nos permita hacer remarketing a los usuarios que han enviado un formulario con un valor concreto seleccionado, para ello crearemos un callback en nuestro módulo encargado de hacer que la url de confirmación de envío del webform incluya un parámetro único indicador del producto, servicio o tema sobre el que queremos hacer remarketing, vamos a utilizar como ejemplo un webform que tenga un componente selector de productos en el que hay 3 opciones: 1 | Premium 2 | Avanzado 3 | Básico El objetivo es que la página de confirmación del envío del webform incluya el código de la selección sobre el que el usuario ha solicitado información de modo que podamos configurar nuestros AdWords sabiendo sobre qué producto está interesado el usuario. Para ello estableceremos una página de confirmación con una parte fija y una segunda parte dinámica que incluirá el producto seleccionado en el webform, de modo que las URL’s posibles en nuestro ejemplo serían: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 Adicionalmente debemos configurar el webform para que utilice como página de confirmación la URL personalizada que vamos a crear y le pase como parámetro el valor que el usuario ha seleccionado en el selector del formulario. Lo primero que debemos hacer es crear el módulo que, mediante el hook_menu de drupal, va a proporcionar la URL personalizada y el callback que gestionará esas peticiones, en el ejemplo que vamos a seguir lo llamaremos “webform_remarketing”: /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Una vez que tenemos creada la opción de menú, debemos agregar la función definida en el page callback que será la que proporcione el contenido que se mostrará en pantalla: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } Esta función es un ejemplo con fines didácticos, por lo que simplemente muestra un mensaje sencillo, lógicamente lo habitual es querer mostrar más contenido, para ello es conveniente recordar que todo el contenido que se muestra al usuario debe utilizar una función de theming para que pueda ser fácilmente modificable por el desarrollador del sitio. El siguiente paso que necesitamos dar es modificar la configuración del webform para que utilice la página de confirmación que hemos creado en nuestro módulo y le pase el valor seleccionado por el usuario, para ello, editaremos las opciones del webform en la pestaña “Ajustes de formulario”; entre otras opciones, hay un apartado llamado “Dirección de redirección” que nos presenta 3 opciones, debemos seleccionar “URL personalizada” e introducir la URL que hemos definido en nuestro módulo y hacer que el propio webform pase en la segunda parte de la URL el valor marcado por el usuario en el componente del selector de productos, para ello utilizamos el token correspondiente, que en este caso sería [submission:values:?] donde “?” hay que sustituirlo por el form_key del componente, suponiendo que dicho valor fuera “producto”, lo que debemos escribir en el campo sería: envio-realizado/[submission:values:producto] Y con esto hemos conseguido nuestro objetivo, cuando un usuario rellena el formulario y solicita información sobre un producto, la URL de confirmación incluye el código de dicho producto, por lo que ya podemos configurar las opciones de remarketing utilizando esas URL’s en AdWords y configurar nuestras campañas.
Aplicando Parches a módulos drupal desde Mac OS X
17/11/2014
El programa necesario para aplicar parches a cualquier módulo drupal viene instalado de serie en cualquier versión de Mac OS X. Se trata del comando patch que debe usarse desde la línea de comandos usando la aplicación Terminal.app Aplicando el parche usando el terminal.app Lo primero de todo es hacer una copia de seguridad del archivo .module por si fuera necesario volver atrás. Lo siguiente es descargar una copia del parche que vamos a aplicar. (En nuestro caso ejemploparche.patch) y copiarla al mismo directorio donde tenemos el archivo .module. Ahora, comprueba que el parche que quieres aplicar y el modulo tienen la misma versión abriendo ambos archivos con un editor de texto y comprobando los números de revisión. Son algo parecido a esto: diff -u -r1.51 example.module. Esto significa que el programa parcheador buscará la version 1.51 del example.module. Si la versión en el archivo del parche es diferente de la versión del módulo, en el terminal aparecerán errores al parchear y te quedarás con cara de gili delante de tu Mac. Si los numeritos coinciden ya podemos proceder: Abre la aplicación Terminal.app, puedes encontrarla en la carpeta de Aplicaciones -> Utilidades. Verás una ventana con algo como esto: Last login: Fri Nov 14 08:56:19 on console Ordenador-de-pepe:~ admin$ Usando el comando ‘cd’ (change directory) navega a la carpeta donde esta el modulo y el parche que queremos usar. (e.g. "cd ~/Users/Sites/Misitiodrupal/sites/all/modules/example_module/") Consejo: Puedes arrastrar una carpeta o archivo desde el finder a la ventana del terminañ y la ruta a dicha carpeta o archivo se autocompletará. Es decir.. solo tienes que escribir en el terminar “cd “ (con espacio después del cd) y arrastrar la carpeta que contiene el modulo y el parche y después pulsar enter. Una vez que estés en la carpeta correcta, ejecuta el siguiente comando reemplazando el nombre del parche por el de tu parche. $ patch < ejemploparche.patch (Nota: no escribas el símbolo de $. Es solo para ilustrar la linea de comando que veras en tu Terminal). Y ya lo tienes! El módulo original esta ya parcheado y listo para usar.