Autor: juans

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…
marzo 15, 2018
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:

<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

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;

:
enero 16, 2018
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:
diciembre 19, 2017
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

diciembre 18, 2017
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…

Inicio

Reproduciendo

Lista M3U

noviembre 30, 2017
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