¿Como encontrar la mayor cantidad de numero uno consecutivos?

Digamos que nos proporcionan un array de numeros binarios llamado nums, este devuelve el número máximo de unos consecutivos en el array.

Para resolver este problema voy a utilizar JavaScript. 

Como un ejemplo, el primer array que vamos a ejecutar es el siguiente: 

nums: [1,1,0,1,1,1] y como resultado nuestra funcion deberia devolver el valor: 3. 

 

El siguiente es el codigo para resolver este problema:

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0;  
 
            if (l1 > l2) {
                maximo = l1;
            } else {
                maximo = l2;
            }
        } 
    }

    return maximo;
    
};

 let nums = [1,1,0,1,1,1];

 console.log(encontrarMaximoNumeroUnosCosecutivos(nums));

Ahora voy a explicar como funciona este codigo.

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

};

Primero, declaramos la funcion "encontrarMaximoNumeroUnosConsecutivos" e iniciamos las variables c, l1, l2, y maximo; todas igual a 0. 

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {

         if (nums[i] === 1) {
            c++;
        }  

    }

} 

Luego, debemos atravezar cada elemento del array "nums". Para ello utilizamos un for loop, en esete caso.
Al mismo tiempo, cada vez que el valor del indice "i" que estemos atravezando sea igual a "1" incrementaremos el valor de la variable "c".

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            l1 = c;
            c = 0;
        }
};

Ahora preguntamos: si el indice "i" es igual a 0 o el indice "i" indique el final del array entonces debemos especificar q el valor de "l1"ahora sera el valor del acumulador de 1s "c". Y luego resetear el valor de "c" a 0 de nuevo.

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0; 
        } 
    }

};
Digamos que el valor maximo de unos consecutivos en un array es igual a 2 y luego encontramos otro valor consecutivo mas alto, entonces debemos reemplazar este valor. Para ello preguntamos si la variable "l1" no es igual que 0 y tambien "l1" es mayor que el valor de "l2", entonces "l2" tendria el valor de "l1". 

var encontrarMaximoNumeroUnosCosecutivos = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let maximo = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0;  
 
            if (l1 > l2) {
                maximo = l1;
            } else {
                maximo = l2;
            }
        } 
    }

    return maximo;
    
};

 let nums = [1,1,0,1,1,1];

 console.log(encontrarMaximoNumeroUnosCosecutivos(nums));

Finalmente preguntamos si el valor del numero maximo de unos consecutivos nuevo (l1) es mayor que el valor de unos consecutivos anterior (l2) entonces la variable "maximo" sera igual al valor de l1; de lo contrario sera igual al valor de l2. Retornamos la variable "maximo" que nos indicara el numero maximo final de unos consecutivos en el array. 

 

 

 

Read more

Comparación entre Animaciones Web utilizando JavaScript o CSS

 Las aplicaciones web a veces están equipadas con animaciones. Algunas animaciones son desencadenadas por eventos, como por ejemplo cuando el usuario pasa el mouse sobre un botón y este progresivamente expande su tamaño, o simplemente pueden suceder sin la interacción del usuario, un ejemplo seria un cuadrado parpadeante en la pantalla. Las animaciones proporcionan efectos visuales a las aplicaciones basadas en la web para hacerlas más interactivas y visualmente atractivas. Algunas aplicaciones son más adecuadas a tener elementos animados mas que otras, como en el caso de juegos interactivos.

    Actualmente existen diferentes formas de lograr estos efectos visuales en la web. En este artículo voy a analizar los enfoques de animación web utilizando JavaScript y CSS. ¿Qué método es más eficiente y bajo qué circunstancias? Cuál método es más fácil de implementar y mantener?

    En el pasado, Flash era un método muy popular para crear aplicaciones animadas; sin embargo, llegada la demanda de dispositivos mobiles la utilización de Flash se volvió obsoleta. Esto se debió a que el rendimiento de la animación se convirtió en una aspecto muy importante y Flash no ofrecía las mejores capacidades. Mas adelante se introdujeron librerías de JavaScript, como es el caso de jQuery, que ofrece animaciones basadas en JavaScript. Sin embargo, tan conveniente como jQuery fue para los desarrolladores, este también quedo corto en lograr un alto rendimiento de animación [3]. Luego, la introducción de CSS3 se convirtió una mejor solución para animaciones que no implicaban instalar ninguna librería externa para nuestro proyecto, y por lo tanto era una opción prometedora para animaciones más eficientes.

Hay dos formas diferentes de utilizar CSS para crear animaciones. Estos son Propiedades de animaciones y transiciones CSS:

Transiciones CSS: muestra animaciones entre dos estados. Estos podrían ser, por ejemplo, animando un botón entre su estado de reposo y un hover. El botón podría mostrar un efecto de desvanecimiento mientras el usuario intenta seleccionar este botón. Las transiciones con CSS tienen diferentes propiedades que definen la propiedad de animación de destino, la duración de la animación, suavizado del efecto y retraso del mismo. Tanto la duración como el retraso se miden en segundos.

Animaciones CSS: asigna animaciones entre un conjunto de propiedades iniciales y finales. Esta consta de keyframes clave para la progresión de las animaciones y el estilo de la apariencia de la misma [2].

    Ambos están programados de diferentes formas, pero también comparten deficiencias similares. Las animaciones utilizando CSS no permiten una gran interacción entre el programador/usuario y la animación. Por ejemplo, no hay forma de encontrar un keyframe especifico en una animacion programada solo con CSS, también una vez que la animación ha comenzado no se puede revertir o llevar a ningún punto en particular. Aparte de esto, solo algunos navegadores permiten al usuario pausar y reanudar una animación creada con CSS. Cuando se trata de valores relativos, las animaciones hechas con CSS no ofrecen gran flexibilidad tampoco, lo que significa que si el programador desea instruir a la animación un elemento para mover 50px a la derecha de donde comienzan las animaciones, no sería posible hacerlo simplemente utilizando animaciones con CSS [3].

    Otra alternativa popular para animar elementos de aplicaciones web es utilizando JavaScript. Cómo mencione anteriormente, hay ciertas librerías de JavaScript que se pueden utilizar para producir animaciones de una manera simple para los desarrolladores. jQuery hizo un intento de lograr esto, pero este también se quedo corto con relación al rendimiento. Aparte de jQuery existe otra librería basada en JavaScritpt llamada GSAP (GreenSock Animation Platform) que se construyó específicamente para crear animaciones para la web, teniendo en cuenta la optimización y la eficiencia de estas tareas [3]. Sin embargo, existe un enfoque más estándar para crear animaciones JavaScript, y esto es la API de animaciones web que funciona dirigiéndose a elementos DOM [6].

    JavaScript proporciona ciertas funcionalidades que no son posibles utilizando simplemente animaciones basadas en CSS como son la posibilidad de pausar, reanudar, detener, y revertir una animación. Esto proporciona al usuario la capacidad de tener cierto control sobre la animación.  Esto hace que aplicación sea verdaderamente interactiva, una característica que no es posible con CSS [3]. Las animaciones desarrolladas con JavaScript también puede hacer uso de objetos, lo que hace posible integrar la Programación Orientada a Objetos a nuestras animaciones, permitiendo desarrollar diseños más complejos. Otra ventaja de JavaScript sobre las animaciones con CSS es poder animar otras objetos distintos de los elementos DOM [2].

    Aparte de la interactividad y la facilidad de desarrollo, hay otro, incluso más importante aspecto al comparar dos métodos de programación. Aqui estamos hablando del rendimiento. Primero vamos a discutir qué propiedades y componentes son menos y más costosos de animar. Las propiedades más baratas para animar los navegadores son: posición, escala, rotación, y opacidad [4]. Ahora, las propiedades más caras de animar son las que cambian el diseño completo de la página junto con ellos, así como la pintura en la pantalla. Por ejemplo, si tenemos un elemento de página web con ancho y alto medidos en porcentaje junto a otros elementos, cambiar estas propiedades constantemente hará que el los elementos en el entorno tengan que recalcular sus valores tambien, lo que hace que esta sea una tarea muy costosa. Estos problemas relacionados al  rendimiento se pueden atribuir a ambos tipos: animaciones basadas con JavaScript y también con CSS.

    Cuando se trata de subprocesos de animaciones CSS, así como animaciones web basadas en JavaScript se ejecutan en un hilo llamado "hilo compositor". Este hilo es diferente del hilo donde el navegador hace la mayor parte del trabajo en cuanto a estilo, diseño, pintura y ejecución de JavaScript. El nombre de este hilo es "hilo principal". El hecho de que haya una hilo separado para CSS y animaciones web para ejecutar significa que se ejecutarán independientemente de la carga de trabajo que lleva el navegador de otros tareas. Esto hace que las animaciones basadas en CSS y JavaScript funcionen igualmente bien en eso sentido [2]. Otra ventaja que hace que las animaciones CSS y JavaScript se ejecuten sin problemas es la ventaja que ambos obtienen del hardware. La capa de GPU permite el aislamiento los elementos de las de animaciones que, a su vez, facilitan que la GPU mueva esas capas y las componga mas tarde. Sin embargo, para que JavaScript aproveche esta ventaja del GPU una capas que necesita para hacer uso de transformaciones 3D y matrices. La única desventaja de la estratificación de GPU sería un pequeño retraso al iniciar ambas aplicaciones debido al cálculo de la capa del navegador y la carga a la hora de la GPU [3].

    En conclusión, tanto las animaciones basadas en JavaScript como en CSS funcionan relativamente y casi igualmente bien cuando JavaScript está bien optimizado. La decisión de elegir uno sobre el otro tiene más que ver con la flexibilidad y la complejidad de la animación que quiere ser lograda. Para proyectos más pequeños y simples, se recomienda utilizar animaciones CSS. Vienen con la ventaja de ser más fáciles de escribir. Para animaciones más complejas que requieren pausar, detener, reanudar y ralentizar las animaciones, JavaScript es necesario. La API de animaciones web es la herramienta de referencia para el desarrollo de animaciones JavaScript; sin embargo, hay otras librerías de animación de alto rendimiento como GSAP.



Referencias:

[1] https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript
Updated 2019
[2]https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-andperformance#
css-vs-javascript-performance Updated 2019
[3] https://css-tricks.com/myth-busting-css-animations-vs-javascript/ 2014 - Updated 2017
[4] https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Read more