Nuestras noticias en tu móvil

Prueba nuestra nueva app para Android e IOs Podras ver todas las noticias, eventos y todas nuestras actualizaciones
  

Suscribete en nuestro Newsletter

Regístrate en nuestro Newsletter para estar al tanto de las noticias, talleres y podcast que tendremos próximamente
Suscríbete aqui

Foto del autor Osledy Bazo

Tu primera Progressive Web App

Las Progressive Web Apps son experiencias que combinan lo mejor de la Web y lo mejor de las apps. Están disponibles para los usuarios a partir de la primera visita en una pestaña del navegador y no requieren instalación. A medida que el usuario compila progresivamente una relación con la app con el paso del tiempo, se hace más y más poderosa. Se carga rápidamente, incluso con redes débiles, envía notificaciones push relevantes, tiene un ícono en la pantalla principal y se carga como experiencia de pantalla completa y de primer nivel.

Este codelab te guiará para crear tu propia Progressive Web App, incluidas las consideraciones de diseño, como también la implementación de detalles para garantizar que tu app cumpla los principios claves de una Progressive Web App.

Seguir leyendo: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es

Foto del autor Italo Morales

Bootstrap v3 (Components) Buttons, Button Groups

Recientemente hemos comenzado a utilizar el Framework para CSS llamado Bootstrap para diseñar páginas y aplicaciones Web.

Un Framework es un conjunto de código, herramientas, librerías, componentes, buenas prácticas y una serie de ventajas adicionales, con la intención de encapsular las diferentes actividades, tareas repetitivas en módulos o bloques fácilmente reutilizables, según mi punto de vista Bootstrap cumple con ello, es por esa razón que enseño a utilizarlo.

¿Qué es Bootstrap? un conjunto de hojas de estilos (documentos CSS), y buenas prácticas que te permitirán avanzar en el diseño de una manera bastante rápida y funcional, de esta manera podrás enfocarte en los elementos únicos de de tu producto final, y de esa manera darle tu toque personal, identidad corporativa y aportar valor.

Seguir leyendo...

Foto del autor Italo Morales

Bootstrap v3, Plantilla, Glyphicons, Buttons, Dropdowns

Anteriormente dije que con Bootstrap podemos crear interfaces limpias, intuitivas y simples, de fácil manejo para el usuario (excelente ventaja), tiene un apartado de componentes predefinidos como botones, formularios, dropdown o menú contextual, fuente de iconos, vídeos responsive, paneles, menús y barras de menús, mensajes de alerta, y créeme, muchos más, podrías aprender a usarlos aquí

Seguir leyendo...

Foto del autor Italo Morales

El Framework Bootstrap v3 | Qué es y un breve Workshop

Que amigos, como están, quiero hablarles de Bootstrap, comencemos:

Boostrap es un Framework CSS, tiene como objetivo crear estructuras, plantillas, interfaces para páginas y sistemas Web, tiene una función particular (y que ahora es muy común) que la hizo popular y es el responsive desing, esto quiere decir que nos facilita el trabajo para crear un único sistema pero que se visualice perfectamente en celulares, tablets, portátiles y pantallas HD, es decir, se trabaja una vez y se tiene cuatro (4) resultados, por cierto, existen muchos Framework y como siempre digo no quiero hacerles creer que este es el mejor, solo les digo que es excelente y ofrece muchas ventajas en cuanto a tiempo, rendimiento y calidad visual.

Después estudiamos otros Framework

Seguir leyendo...

Foto del autor Italo Morales

Pseudo elementos de CSS3

A mi me parece importante saber a fondo CSS, sin dejar de usar Framework para la proporción de estilos. Los Pseudo-Elementos nos permiten crear diseños web profesionales, con calidad internacional.

Saber a fondo CSS te permite extender o mejorar un Framework CSS...

Debes saber algo de CSS para comprender este Posts, si no conoces nada del tema, te invito a ver esta serie de vídeos (ver vídeos) y luego vuelve aquí, mucho éxito en tu formación.

Seguir leyendo...

Foto del autor Osledy Bazo

Como saber el estado de la bateria del dispositivo

Actualmente hay muchos dispositivos que se pueden conectar a internet y en tu app o en tu pagina puedes aprovechar esta API de html que te permite saber el estado de la batería del dispositivo, tal vez quieras advertirle al usuario que tiene poca batería o optimizar animaciones en tu código cuando la batería esta por acabarse.

Antes de continuar ten en cuenta que esta API tiene un soporte limitado, pero esperamos que el mismo mejore en las próximas versiones de los navegadores

DEMO: El ejemplo funcional puedes encontrarlo en https://cldup.com/MgiUGAX5yX.html

Código Javascript

                var battery;
                 
                navigator.getBattery()
                    .then(function (b) {
                        battery = b;
                        handleBattery();
                    }
                );
                 
                var batteryIndicator = document.querySelector("#indicator");
                 
                function handleBattery() {
                    if (battery) {
                        battery.addEventListener("chargingchange", updateBatteryNotification);
                        battery.addEventListener("levelchange", updateBatteryNotification);
                        updateBatteryNotification();
                    }
                }
                 
                function updateBatteryNotification() {
                    // draw battery level
                    batteryIndicator.style.width = battery.level * 100 + "%";
                 
                    // check if battery is charging
                    if (battery.charging) {
                        setClass(batteryIndicator, "charging");
                    } else {
                        setClass(batteryIndicator, "notCharging");
                    }
                }
                 
                function setClass(element, classToAdd) {
                    element.className = classToAdd;
                }
                

Código Html

                <div class="container">
                    <div id="batteryBody">
                        <div id="indicator">
                         
                        </div>
                    </div>
                    <div class="batteryEnd">
                        <div>
                         
                        </div>
                    </div>
                </div>
                

Código Css

                #batteryBody {
                    float: left;
                    width: 200px;
                    height: 75px;
                    border: 10px #CCC solid;
                }
                .container {
                    width: 240px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 50px;
                }
                .batteryEnd {
                    float: left;
                    height: 95px;
                    width: 15px;
                }
                .batteryEnd div {
                    width: 15px;
                    height: 35px;
                    margin-top: 30px;
                    margin-left: 5px;
                    background-color: #CCC;
                }
                #indicator {
                    height: 100%;
                    width: 50%;
                }
                #indicator.charging {
                    background-color: #BFFF00;
                }
                #indicator.notCharging {
                    background-color: #FFFF00;
                }
                

Algunos de los eventos de esta API son:

chargingchange este evento se dispara cuando el dispositivo cambia entre los estados cargado a descargado (o viceversa)

levelchange este evento se dispara como resultado de conectar el dispositivo al cargador o dejarlo sin el mismo

level esta propiedad retorna un valor entre 0 y 1 indicando el nivel de carga del dispositivo. Un valor de 0 significa q tu batería no tiene carga, Un valor de 1 significa que tu batería esta totalmente cargada.

charging esta propiedad te deja saber si el dispositivo esta siendo cargado en este momento o no. Puede ser usada con el chargingchange event para asegurarte que tengas la información en el momento indicado

Para mas información puedes ir a la documentación end el sitio de Mozilla https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager