Blog

¡Por fin! Ya está disponible  Bootstrap 4. El 18 de Enero fue el día de lanzamiento, no más alphas (versiones de prueba). ¿Qué es Bootstrap 4?: Es un framework para web o conjunto de herramientas de código abierto para poder maquetar y diseñar páginas y aplicaciones web adaptadas a cualquier dispositivo (sobremesa, portátil, tablet y móvil). Entre otros muchos elementos dispone de menús de navegación, formularios, botones, modals, barras de progreso…. y otros componentes basados en HTML y CSS que incorporan JavaScript para realizar todas las funcionalidades. Algo de Historia: Bootstrap «nació» en las instalaciones de Twitter en el año 2011 y rápidamente se extendió su uso dada su simplicidad, gran utilidad y coste 0. Ya es uno de los frameworks más utilizados por los desarrolladores web y todo indica que seguirá siéndolo. Fue a partir de la versión 2.0 cuando se incorporó el diseño responsivo a Bootstrap, y en agosto del 2013 se lanzó Bootstrap 3, muy vigente a día de hoy. Características principales: Código abierto: es una política que mantienen desde la versión 1, Bootstrap es una herramienta gratuita y accesible para todo el mundo. Documentación y aprendizaje: dispone de una documentación amplia, bien organizada y con multitud de ejemplos. La curva de aprendizaje es moderada, en poco tiempo se podrá sacar partido a todo lo que ofrece. HTML5 y CSS3: incorpora las últimas versiones de HTML y CSS. Optimización: todo el código que usa está optimizado para que la web que lo usa cargue rápidamente. Sistema de Grid: Divide la página en una rejilla de 12 columnas, permitiendo adaptar el contenido a cualquier tipo de diseño. Componentes: añade una gran cantidad de elementos de fácil instalación que permiten ampliar los diseños fácilmente: menús desplegables, botones, iconos, ventanas emergentes, cards… Compatibilidad: Bootstrap es compatible con los principales navegadores actuales: Google Chrome Safari Mozilla Firefox Microsoft Edge. No soporta Internet Explorer 9 o anteriores (¡ya era hora!) Opera Sass (o Syntactically Awesome Style Sheets): SASS es un preprocesador de CSS, permitiendo convertir las hojas de estilo en algo dinámico. Podemos crear funciones con código matemático y reutilizar código a través de los mixins, variables que guardan determinados valores que repetiremos en todo nuestro código.   Principales diferencias entre la versión 3 y la 4: https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

Más info

Imagino que sí, pero quizás todavía no sepas que el próximo 25 de mayo entra en vigor el nuevo Reglamento General de Protección de Datos. más comúnmente conocido como RGPD y que afectará a las empresas y profesionales que gestionen datos de usuarios miembros de la Unión Europea, especialmente a los que tengan un sitio web con registro de usuarios, compras y demás datos sensibles, relacionados con el Marketing Online. Si ya conoces de que va todo esto del RGPD puedes saltarte este párrafo y continuar leyendo, pero si no sabes de que te estoy hablando, te sugiero que visites este enlace en El Blog de Isidro Pérez, mi segunda casa, en el que te hablo sobre ¿Cómo afectará el nuevo Reglamento General de Protección de Datos a tu sitio web?. 5 tareas imprescindibles para adaptar tu sitio web al nuevo RGPD Lo prometido es deuda, aquí te dejo 5 de las tareas más importantes a realizar, si quieres que tu sitio web se adapte a la nueva normativa de Protección de Datos. Vaya por delante mi recomendación de que revises todo el nuevo reglamento de la mano de especialistas jurídicos en la materia y que te preparen un guión de trabajo que compartirás con la empresa de desarrollo web que selecciones para llevar a cabo dichas tareas. Mientras eliges profesional para ayudarte con estas nuevas normativas, paso a detallarte algunas de las modificaciones que seguro tendrás que aplicar a tu sitio web. Tarea 1. Cambiar los formularios con aceptación automática por manual. Esta tarea consiste básicamente en eliminar todas las aceptaciones automáticas de Aviso Legal y Privacidad de tu sitio web. A partir de ahora, el usuario debe otorgar permiso consciente para que utilices sus datos en tu sitio web y por lo tanto, la casilla de aceptar no puede estar marcada por defecto. Tarea 2. Comunica a tus usuarios que cumples y te sometes al nuevo Reglamento General de Protección de Datos. En este punto, me he estado fijando en como lo hacen empresas como Facebook, Mailchimp y Hotjar para que te hagas una idea de lo que necesitas hacer. Primero: Tendrás que informar a los nuevos usuarios de manera sencilla, sobretodo en formularios, para qué vas a utilizar sus datos y tendrás que incluir un botón con más información que ya te lleve a la Política de Privacidad en formato extendido, debes tener en cuenta que a partir de ahora no se pude utilizar terminología legal complicada, la nueva Política de Privacidad tiene que estar escrita de manera sencilla para que a nuestros clientes les quede muy claro que sucederá con los datos que nos dejan en nuestro sitio web. Segundo: Deberás hacer un comunicado a tus clientes y suscriptores informándoles de todos los cambios que vas a realizar con la adaptación del RGPD. Tarea 3. Indica qué información recoges de los usuarios y quien además de ti tiene acceso a la información que guardes de ellos. Tendrás que dejar muy claro toda la información que registras en tu sitio web: Duración de la visita, páginas visitas, direcciones IPs, email, teléfono, nombre, apellidos, dirección de envío o facturación, cookies, etc… Además tendrás que explicar quién tiene acceso además de ti a la información de tus usuarios. Si trabajas con Google; Hotjar, Facebook, etc… deben quedar reseñados en la información de la Política de Privacidad de tu sitio web. Tarea 4. Especifica la identidad del DPO. El DPO es el responsable de la gestión de los datos personales de tu sitio web, puede ser un profesional externo o alguien de tu empresa, en cualquiera de los dos casos será el máximo responsable del tratamiento de tus datos y de que se cumplan todos los requerimientos. Su nombre y apellidos deberá aperecer de manera visible en el sitio web y a él se dirigirán todas la reclamaciones que realicen los usuarios. Tarea 5. Explícales a los usuarios con detalle sus derechos. Tendrás que hacerles saber, dentro de los cambios que realices en tu web, qué podrán solicitarle a tu DPO todos los datos que hayan facilitado previamente; para su eliminación, limitación o rectificación y por supuesto oponerse al tratamiento, añadiendo a todo esto el derecho al olvido y la portabilidad de los mismos. Lo ideal sería resolverles preguntas del tipo ¿Durante cuanto tiempo y para qué vas a utilizar mis datos? Teniendo en cuenta que lo ideal es que guardes esos datos durante el menor tiempo posible y así reducir el compromiso de integridad de dicha información. Espero que este artículo te haya podido ayudar en el momento de adaptar tu sitio web al Nuevo Reglamento de Protección de Datos y para cualquier cosa que necesites, el equipo de Avanza Soluciones y especialmente el equipo de desarrollo web, estaremos encantados de ayudarte. ¡Nos vemos en próximos artículos!

Más info

Sin duda, Bootstrap nos ha facilitado mucho la creación y personalización de contenido responsivo. Esta herramienta ayuda tanto a programadores como a maquetadores, por la cantidad y variedad de herramientas que su web documenta al detalle. Una de ellas es la posibilidad de abrir unas ventanas llamadas «Modals».  Estos son el sustituto ideal para aquellos que acostumbran a crear pop-ups o ventanas emergentes. Estos modals permiten mantenerte en la misma página al hacer click en cualquier elemento html. Esto se lleva a cabo utilizando de forma transparente al usuario, código jquery con llamadas ajax o contenido estático. Actualizar contenido de un modal de Bootstrap 3 Lo que vamos a explicar hoy, no es sólo la creación de uno de estos modals como podríais ver directamente en su web, sino también como refrescar su contenido ¿Es necesario refrescar su contenido? Depende. Si tu página utiliza un único modal en el que se quiere cargar contenido de distintos elementos clickables como botones o enlaces, necesitas vaciar el modal para cargar de nuevo aquello que deseas. De lo contrario, una vez se ha hecho click en un elemento que abra el modal, los siguientes elementos abrirán también el modal pero con el contenido siempre de ese primero. Por ejemplo, si tenemos un modal con un formulario que contiene un campo dinámico como puede ser una referencia de un producto. Éste modal se abriría desde un botón de «añadir al carrito» presente en todos los productos de un listado. Entonces no sería recomendable tener dentro del bucle de productos la creación de un modal por cada uno de ellos. En su lugar crearíamos un único modal fuera del bucle que cambiaría según el producto que añadirías al carrito mediante una url con variable GET por ejemplo. Vamos a ello:   Creación del enlace que lance el modal: [crayon-6766be04e9939263985667/] En este caso el contenido a cargar será el resultado de una llamada ajax a la url que hay en href. Creación del modal: [crayon-6766be04e9940531481923/]   Respuesta del modal: [crayon-6766be04e9943532681034/] Éste ejemplo mostraría una ventana al estilo Prestashop con una imagen a la izquierda y detalles del producto a la derecha, además de un botón que permite cerrar el modal y continuar navegando en la web. O por lo contrario ir al carrito y proceder a tramitar el pedido. Además puedes modificar fácilmente el tamaño del modal con las clases modal-lg y modal-sm dentro del div modal-dialog.   Refrescar contenido del modal: [crayon-6766be04e9946466919111/] Éste script de jQuery eliminará y limpiará el contenido que hay en el modal, por lo que al hacer de nuevo click en el enlace creado anteriormente, ejecutaría la llamada ajax que carga el contenido de nuevo. De lo contrario, en éste ejemplo que se utiliza la url de añadir producto, no insertaría nada al carrito de compra pues se limitaría a mostrar el modal con la información cargada la primera vez. Y así es como podríamos tener nuestra propia ventana de información tras alguna acción con un sólo modal. Como resultado tendremos un código más limpio y fácil de mantener.

Más info