Para reactivar la comunidad necesitamos tu opinión

Nos gustaría saber que podemos hacer para mejorar. Ayúdanos llenando este formulario

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

Foto del autor Osledy Bazo

Curso gratuito, aprende experiencia de usuario

Hoy compartimos otro curso gratuito online para aprender User Experience (UX) mas de 100 horas de video. Al final de este curso tendrás fluidez con el proceso de diseño UX. Aprenderás acerca de la experiencia del usuario, lo que abarca, y cómo se relaciona con otras disciplinas.

Los temas que se cubren:

  • INTRODUCTION TO UX DESIGN
  • THE USER CENTERED DESIGN PROCESS
  • DESIGN THINKING
  • RESEARCH & PERSONAS
  • CONTENT & STRATEGY
  • DESIGN DOCUMENTATION
  • VISUAL DESIGN
  • TEAMS & COMMUNICATING DESIGN
  • ELECTIVES
  • FINAL PROJECT: CREATE A PORTFOLIO WEBSITE
  • EXTRA RECOMMENDED RESOURCES

Para ingresar al curso puedes ir a: mysliderule.com/learning-paths/user-experience-design

Foto del autor Osledy Bazo

La tecnología detrás de grandes empresas

Alguna vez te has preguntado que tecnologías usan las grandes empresas? Que es lo que esta detrás de Twitter, SoundCloud o Pinterest, que lenguajes de programación, bases de datos usan, como hacen el manejo de colas, etc.

Descubre que están usando estas empresas y muchas mas. Mucho mas importante es saber como las usan y tener referencias de estas herramientas, todo esto lo puedes ver en stackshare.io

Tags: general

Foto del autor Osledy Bazo

Curso gratuito, programa un juego para IOS

Via @machorro les comparto un link de un curso (en video) para crear un juego para IOS, en el que nos guiaran para construir un clon de famoso juego Flappy Bird.

Son mas de 350 videos llevándonos paso a paso por el proceso de construir mas de 8 aplicaciones usando Sprite Kit

Los tópicos que cubre el curso son:

  • Introduction to Game Development , Sprite Kit , Scenes and Nodes, Coordinates, Game Loop
  • Sprite/Texture Creation, Sprite Theory, Atlas Files
  • Animation, Parallax Scrolling, Character animation
  • Physics Bodies, Physics Properties, Bit Fields, Collisions, Contact Detection
  • User Input, Context Based Input Handling
  • Character Movement/Physics, State machines, Player Physics, Jump Curve, Double Jump, Gravity, etc.
  • Tile Based Game World, Tile Sprites, Tiled, Creating and Loading Tiled files
  • World Collision Detection, Axis Alined Bounding Box, Collision Bit Masks
  • Obstacles, Collectables, Power Ups
  • Effects, Particle Effects, Weather Effects
  • Sound, Adding Music, Adding Sound Effects
  • Scoring, HUD, Lives, Stats, Score Board
  • Game Menus, Level Selection, Saving/Loading Game Progression

Puedes encontrar el cursos en esta pagina, solo debes pagar con un tweet.

Tags: general