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 Italo Morales

Base Sólida de jQuery

De forma personal te digo que jQuery sigue siendo genial, su fama se debe a que facilita mucho el desarrollo de aplicaciones del lado del cliente, como debes imaginar Javascript es esencial para todo tipo de desarrollo web. Si desconoces acerca del tema, es propicio aclarar que jQuery no es un lenguaje, sino un conjunto de funciones y métodos de Javascript (éste si es un lenguaje).

jQuery es una librería que nos facilita la programación con Javascript.

La principal ventaja es que no necesitamos preocuparnos por los navegadores, sino que la librería lo hace por sí sola ejecuta el código compatible con el software del cliente que está usando para acceder a nuestra página Web.

Para hacer ésto usamos algunas de las tantas funciones que nos proporciona jQuery, que además se extiende por medio de miles de plugins que ofrece la comunidad para implementar cualquier tipo de comportamiento, por cierto, si lo aprendes bien puedes crear tus propio plugines.

Para aprender jQuery no tienes que ser un gran experto o maestro de Javascript, pero si debes tener conocimientos básicos del lenguaje.

A continuación verás muchas funcionalidades que podrás aprender y te creará esa base necesaria para iniciarte en este mundo.

Seguir leyendo...

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

Foto del autor Jorge Urdaneta

Eclipse Orion

Eclipse ha creado nuevo sitio Web donde podremos usar su nueva IDE basada en HTML5 y JavaScript Orion. Desde la página del proyecto se pueden bajar la aplicación y ejecutarla en su computadora si prefieren.

Crearse una cuenta es muy sencillo y desde el editor podemos trabajar con repositorios github y ftp. Lo más interesante es la sincronización. En el caso de github es un muy completo cliente gráfico para git donde podemos desde el git status ver qué cambió, stage it, commit y push a nuestro repo github. No tuve chance de probar repositorios FTP.

Crea tu cuenta en OrionHub.org hoy --> OrionHub.org

Aplicación para Chrome

Me tomé un momento para hacer la app para Chrome que añade el ícono. Descagar --> Orion Chrome App