?>

Autor: juans

  • Infinity War, ¿pero dónde están las gemas del infinito?

    Infinity War, ¿pero dónde están las gemas del infinito?

    La gran aventura que arrancó hace diez años y quince películas con Iron Man (2008) se acerca a su fin. El Universo Cinematográfico Marvel encara su recta decisiva que, inevitablemente, llevará a los héroes a enfrentarse con Thanos en Vengadores: Infinity War.

    Pero antes de que el Titán Loco llegue a la Tierra en busca de las Gemas del Infinito, el Dios del Trueno debe encarar su aventura más loca y cósmica en Thor: Ragnarok, un filme que llega este viernes a los cines y que sirve de galáctica y perfecta excusa para recordar dónde están las Gemas del Infinito -y quién está en su poder- a día de hoy en el MCU.

    El objetivo de Thanos no es otro que reunir las seis Gemas del Infinito que contienen las seis singularidades existentes antes de la creación misma del Cosmos y completar así el Guantelete que le convertirá en el ser más poderoso del universo. Para conseguirlo enviará a su temible Orden Negro, una élite de poderosos y letales villanos, que serán su primera fuerza de choque para conseguir las piedras. Y es que algunas de ellas están (o han estado) en el planeta protegido por Capitán América, Iron Man y compañía.

    Una apetecible esfera azul a la que el conquistador de mundos llega sediento de poder. Pero… ¿conseguirá aquí Thanos las gemas? ¿Cuántas le faltan? ¿Cuáles están ya en su poder?

    TESERACTO – GEMA DEL ESPACIO

    Este cubo de color azul celeste concede a su poseedor la capacidad de viajar a su antojo de un punto a otro del universo y crear agujeros de gusano entre galaxias fue el gran protagonista de la Fase 1 de Vengadores. Además, de aparecer en Thor o Capitán América, es la que usó Loki para abrir un portal a través del que llegó a la Tierra el ejercito Chitauri en Vengadores.

    Tras vencer a Loki y frustrar la invasión extraterrestre, Thor devuelve el Teseracto a Asgard, donde permanece custodiado por Heimdall en la cámara de Odín… al menos así es hasta el inicio de Thor: Ragnarok. Y es que la mirada que Loki el lanza al cubo y una de las escenas post-créditos del filme indica que Thanos estaría muy cerca de conseguirla… si no lo ha hecho ya.

    CETRO CHITAURI – GEMA DE LA MENTE

    También de color azul al inicio pero realmente cercano al amarillo en poder su actual poseedor, la piedra que permite dominar (casi) cualquier mente del universo es la ‘culpable’ de que Ojo de Halcón se pusiera a las órdenes de Loki y atacara a los Vengadores se volviera contra sus compañeros. Un ‘regalito’ que Thanos le hizo al hermanastro de Thor para que llevara a cabo la primera parte de su siniestro plan.

    Después de que fuera arrebatada de manos del Barón Strucker (Hydra) por los Vengadores en La era de Ultrón, la gema provocó el nacimiento del propio Ultrón y finalmente la piedra acaba en la frente de Visión, el androide surgido de la evolución de J.A.R.V.I.S., la IA creada por Tony Stark. Es decir, que es una de las dos gemas que está en la Tierra. Y es allí precisamente donde parece que se dirige Thanos.

    EL ORBE – GEMA DEL PODER

    Este poderoso artefacto conocido como el Orbe fue el centro de la trama de la primera entrega de Guardianes de la Galaxia. En su interior se oculta una piedra que no puede ser portada por un simple mortal… y precisamente eso fue lo que reveló la naturaleza medio celesital de Peter Quill.

    Tras estar en poder de el Coleccionista (Benicio del Toro) y del vehemente villano Ronan el acusador, que se alió con Thanos, la heróica acción de Star-Lord, secundado por Gamora, Groot y compañía, hizo que la piedra morada volviera a manos cabales. Estas son las del cuerpo Nova Prime que la custodia en Xandar.

    ÉTER – GEMA DE LA REALIDAD

    La piedra de color rojizo apareció en Thor: El mundo oscuro bajo la denominación de éter, una sustancia gaseosa que convierte a Malekith en un poderoso villano al concebirle el poder de moldear la realidad contraviniendo incluso las leyes fundamentales de la física.

    Tras derrotar al Elfo Oscuro, los guardianes de Asgard Volstagg y Sif viajan hasta la guarida de el Coleccionista y se la entregan justificando que es mejor que la guarde él porque ellos ya tienen el Teseracto en su cámara «no es muy prudente tener dos gemas del infinito en el mismo lugar». «Una menos, ya faltan cinco», dice Taneleer Tivan al final del filme.

    OJO DE AGAMOTTO – GEMA DEL TIEMPO

    La llegada del Doctor Extraño al MCU supuso también la aparición en el tablero de Marvel de la Gema del Tiempo, una piedra que se encuentra dentro de la reliquia conocida como el Ojo de Agamotto y que permite jugar al antojo de su poseedor con el continuo espacio-tiempo, como demostró el personaje de Benedict Cumberbacht en su cara a cara con Dormammu. Actualmente, la poderosa gema verde cuelga del cuello del Hechicero Supremo de Marvel que será uno de los personajes que sea atacado en Infinity War.

    GEMA DEL ALMA

    Esta piedra es la pieza que falta en el rompecabezas de Thanos. La Gema del Alma todavía está inédita en el MCU, aunque hay quien aventura que la piedra, de color presuntamente naranja, hará su aparición en Thor: Ragnarok de la mano ni más ni menos que de Odín.

    Si no aparece en el filme dirigido por Taika Waititi, la única posibilidad de ver la piedra que controla todas las almas del universo antes de que Thanos irrumpa en Vengadores: Infinity War, es Black Panther. Y es que, tal y como mostró el último tráiler, dentro de sus tupidas selvas el reino de Wakanda esconde muchas sorpresas.

  • [CURSO] Angular Convierte cualquier template HTML en WebApp! [GRATIS]

    [CURSO] Angular Convierte cualquier template HTML en WebApp! [GRATIS]

    He terminado el curso Convierte cualquier template HTML en WebApp!

    En términos generales me ha gustado mucho, si no tienen conocimientos en Angular tal vez se les complique un poco o no entiendan algunas cosas, pero no creo que se les complique mucho.

    Les dejo el enlace por si lo quisieran tomar aquí.

    Tecnologías utilizadas:

    • HTML
    • JavaScript
    • CSS
    • Angular
    • Git
    • Angular CLi
    • Firebase

    Link de la pagina terminada

  • Aplicación oficial de la pagina «La Neta de las Cuerdas»

    Aplicación oficial de la pagina «La Neta de las Cuerdas»

    Descarga la aplicación oficial de la neta de las cuerdas y recibe noticias directo a tu celular.

    • Navega por los diferentes artículos.
    • Categorías
    • Leer después
    • Recibe notificaciones cuando se agregue contenido
    • Búsquedas
    • Envío de comentarios.
    • y mas…

     

  • Interruptor simple con animación HTML/CSS/JavaScript

    Interruptor simple con animación HTML/CSS/JavaScript

    Hola amigos, en esta ocasión vamos a realizar un interruptor utilizando HTML, CSS y JavaScript el resultado final serial este:

    Para esto, comenzamos con nuestra plantilla en HTML, necesitamos una división principal, etiquetas al principio y final, una división central para hacer el fondo y dentro de esta una más para el botón al cual asignamos la función que vamos a utilizar al hacer click, en este caso Switch y la gregaremos más tarde a JavaScript, también agregaremos las clases y la id «s1» para el botón:

    <div class="main">
      <label>OFF</label>
      <div class="switch-bg">
        <div id="s1" class="switch switch-on" onclick="Switch()" spellcheck="true"></div>
      </div>
      <label>ON</label>                        
    </div>

    Vamos a la parte del CSS, aquí agregaremos las propiedades para los elementos del HTML, principalmente nos interesa el fondo del interruptor que esta con la clase «switch-bg» y el botón que va a tener dos estados y a la vez dos clases «switch» para apagado y «switch-on» para encendido, pueden cambiar los valores de las propiedades como les plazca, una propiedad importante es la transición (transition) que es la que hará el efecto del movimiento de un lado hacia el otro:

    .main{width:250px; height:20px;}
    div, label{
      float:left;
      color:#b7b7b7;
    }
    label{
      margin: 0 5px 0 5px;
      font-style:bold;
    }
    .switch-bg {
        width: 60px;
        background: #d6d6d6;
        height: 10px;
        float: left;
        padding:2px;
        border-radius: 30px;
        border: 2pt solid #b7b7b7;
    }
    .switch {
        margin: -10px 0 -5px 0px;
        background: #51acb8;
        position: absolute;
        height: 25px;
        width: 25px;
        border-radius: 50px;
        border: 2pt solid;
        transition: .1s ease-in-out;
        cursor: pointer;
    }
    .switch-on {
        margin: -10px 0 -5px 30px;
        background: #E74C3C;
    }

    Finalmente la última parte sería crear las función «Switch», instanciamos el elemento con id «s1» y dentro de la función hacemos las validaciones necesarias para cambiar las clases, en este caso se pide la confirmación para encender o apagar mediante un dialogo emergente, después de esto solo quedaría agregar su propio código.

    e = document.getElementById('s1');
    Switch = function ()
    {
        if (e.className =='switch switch-on')
        {
           var answer = confirm("Do you want to turn off?");
           if (answer) e.className = 'switch';
        }
        else
        { 
            var answer = confirm("Do you want to turn on?");
            if (answer) e.className = 'switch switch-on';
        }
    }
    

    Aquí les dejamos el código completo;

     

    :

     

     

  • Creando un framework 2: Agregar propiedades CSS (setCSS)

    Creando un framework 2: Agregar propiedades CSS (setCSS)

    En esta ocasión se van a agregar las propiedades al elemento, en la ocasion pasada instanciamos un elemento con la funcion «getElement«, ahora utilizaremos esa misma función y la convinaremos con setCSS para agregar las propiedades CSS.

    Primer paso crear una etiqueta en nuestro cuerpo del HTML, al presionarla se activara la función start.

    <a onclick='start()'>Cambia mis propiedades!</a>

    Ahora en JavaScript crearemos dos funciones, la función start y setCSS ademas de la que ya habiamos creado antes getElement.

    start= function()
    {
    	setCSS();
    }
    
    function getElement(e, attributes)//receive element name or css selector (#id, .class, p, etc.)
    {
        var element;
        try
        {
            element = document.getElementById(e);
            if (element == null)
                element = document.querySelector(e);
        }
        catch(err)
        {
            console.log(err.message);
        }
        setCSS(element, attributes);
        return element;
    }
    function setCSS(e, attributes)
    {
        for (var p in attributes)
            if (attributes.hasOwnProperty(p)) 
               e.style[p] = attributes[p];
    }

    En la función setCSS esta recibiendo dos valores, uno es el elemento ya instanciado y los atributos como objeto, ya saben {propiedad: valor}, dentro de la función se crea un ciclo que verifique si tiene una propiedad y deser asi aplicara la propiedad en el esilo del elemento.

    Entonces se agregaria el elemento que queremos modificar y algunas propiedades en la función setCSS dentro de la función start, esto quedaria algo así:

    start= function()
    {
    	setCSS(getElement('a'), {background:"#13748b", color: '#f3f3f3', 'border-radius': '30px', padding: '10px', 'margin-top': '10px'});
    }

    El resultado final seria algo como esto:

     

  • Ubisoft esta regalando 3 Video Juegos (Watch Dogs incluido)

    Ubisoft esta regalando 3 Video Juegos (Watch Dogs incluido)

    Por motivo de las fechas decembrinas, Ubisoft esta regalando tres juegos, estos son:

    Watch Dogs

    Assassins Creed; Flack Flag

    World In Conflict

  • Android; Reproductor Multimedia con Listas IPTV agregadas

    Android; Reproductor Multimedia con Listas IPTV agregadas

    Cree esta app con Appgeizer, para la reproducción de listas m3u principalemte, es un fork de VLC Player, incluyes listas de TV y Peliculas…

  • Cursos; SoloLearn – Aprende a codificar

    Cursos; SoloLearn – Aprende a codificar

    En esta ocasión les traigo una aplicación disponible en línea y para los dispositivos móviles en la que puedes tomar varios cursos para aprender a tirar código, y la cual cuenta con varios lenguajes entre ellos:

    • JavaScript
    • jQuery
    • php
    • C++
    • C#
    • Ruby
    • SQL
    • CSS
    • Phyton
    • Y mas

     

    Ofrece un tipo de aprendizaje tipo Duolingo, en el que te explica los conceptos y depues te realiza preguntas para que te familiarices, obviamente no te va a hacer un experto, pero te introduce a lo que es cada lenguaje, ademas de esto te otorgan un certificado al finalizar el curso.

     

    Algo que me llamo la atención mucho en la aplicación móvil es que permite hacer desafíos a otros usuarios ya sea que escojas desafiar a alguien directamente o hacer un desafío al azar, para esto primero seleccionas tu arma (lenguaje) y después te da la oportunidad de escoger a tu rival, el desafío consta de 5 ejercicios y te da un límite de tiempo.

    Resultado de imagen para sololearn desafios


    Les dejo el link para que lo pueben : SoloLearn


  • Cursos; Websites Dinamicos con PHP

    Cursos; Websites Dinamicos con PHP

    Terminando el curso, fue una buena experiencia, habia usado PHP pero no para crear paginas, esta muy interesante, algunas cosas estan desactualizadas, ahi es donde se hace mas interesante si ya tienes conocimiento previo de PHP.

    De lo que trata este curso:

    • Comprender a fondo los fundamentos de PHP.
    • Codificar un puñado de ejemplos útiles de PHP dinámico.
    • En la última sección de este curso, te enfocas en construir un sitio web dinámico para un restaurante.
    • Al final de este curso, ¡estarás tan entusiasmado con tus habilidades PHP recién adquiridas y quieres comenzar a convertir todos tus sitios web a PHP!

    Asi quedo la aplicación final, hechenle un ojo:

    Web App Dinamica con PHP


    Ir a curso

    Certificado Udemy Dynamic Websites
    Certificado
  • Barras de progreso animadas

    Barras de progreso animadas

    El siguiente ejemplo está basado en el trabajo realizado por Lazarevic Ivan, se agregan algunas cosas para que cambie de color dependiendo del valor que se le dé a la barra de progreso, para realizarlo utiliza jQuery aunque se puede omitir utilizando solo JavaScript.

    1.- Agregamos las etiquetas HTML a nuestro proyecto.

    <div id="progress">
      <div></div>
    </div>

    2.- Le daremos estilo la division que funcionara como fondo vacio de la barra de progreso.

    /** división padre**/
    #progress {
        width: 300px;
        height: 30px;
        border: 1pt solid #111;
        border-radius: 4px;
        background: #404040;
        border: 1px solid #272727;
        overflow: hidden;
        box-shadow: rgb(96, 96, 96) 0 0px 20px -1px;
    }
    /** división hijo **/
    #progress div {
        height: 300px;
        color: #404040;
        text-align: right;
        line-height: 30px;
        /* mismo tamaño que la división padre*/
        width: 0;
        border-right: 1px solid #272727;
    }

     

    Tendriamos algo asi…

     

     

    3.- Vamos a crear los estilos para las clases que asignaremos en base a los colores que queramos (con animación) dependiendo del porcentaje que tengan, en este caso vamos a utilizar los siguientes:

    • Color rojo : 0 – 25 %
    • Color naranja: 26 – 50%
    • Color verde: 51 -75%
    • Color azul: 76 -100%
    .progress-min {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: #d43535;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
    }
    
    .progress-mid {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: #ea8209;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
    }
    
    .progress-average {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: #00cb08;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
    }
    .progress {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: CornflowerBlue;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
    }
    @-webkit-keyframes progress {
        to {
            background-position: 30px 0;
        }
    }
    
    @-moz-keyframes progress {
        to {
            background-position: 30px 0;
        }
    }
    
    @keyframes progress {
        to {
            background-position: 30px 0;
        }
    }

    4.- Ahora en JavaScript vamos a modificar el archivo original para agregar las clases al elemento dependiendo del porcentaje que se maneje, la función recibe el numero (porcentaje) y el elemento div con el ID «progress».

    function progressBar(percent, element) {
        var progress = element.find('div');
        progress.removeClass();
        if (percent <= 25)
            progress.addClass('progress-min');
        else if (percent <= 50 & percent > 25)
            progress.addClass('progress-mid');
        else if (percent <= 75 & percent > 50)
            progress.addClass('progress-average');
        else if (percent > 75)
            progress.addClass('progress');
        progress.animate({ width: percent + '%' }, 500).html(percent + "%&nbsp;");
    }

    Eso seria todo, un ejemplo completo:

    Aqui otro ejemplo con imagenes de fondo en lugar de los colores y la animación.

?>