Autor: juans

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.

Les dejo el link para que lo pueben : SoloLearn
noviembre 29, 2017
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
noviembre 28, 2017

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.

noviembre 17, 2017

Creando un framework: Instanciar elemento (getElement)
Una de las cosas interesantes de la programación es la utilización de frameworks que nos ayudan a realizar los proyectos en un mínimo de tiempo, como persona siempre me he preguntado cómo funcionan las cosas y en el ambiente de programación aún más, por lo que ahora he comenzado a plantearme la idea de crear un framework personal con el fin de entender y a la vez facilitar el trabajo.

Una de las cosas más importantes es la manipulación de los objetos o elementos DOM por medio de JavaScript, entonces comenzaremos por la de instanciar un elemento algo parecido a lo que hace JQuery con $(‘#IdElemento’) o $(‘.claseElemento’).
```
function getElement(e) //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);
    }
    return element;
}
```
noviembre 16, 2017

Autor: juans

Cursos; SoloLearn – Aprende a codificar

Cursos; Websites Dinamicos con PHP

Barras de progreso animadas

Creando un framework: Instanciar elemento (getElement)