Taller #3 - Extendiendo la funcionalidad

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Taller #3 - Extendiendo la funcionalidad

Post by xacarana » Sun Jul 30, 2017 10:23 pm

Taller #3
Recuerde, debe publicar las evidencias con las respuestas del taller como postreply en este post.
  • Instalación de nodejs (5%)
  • Realizar el curso de learnyounode (15%)
  • Todo el código usando vanilla javascript(30%)
  • Implementación de transiciones usando animate (20%)
  • Manejo de estado y persistencia de datos usando Localstorage (15%)
  • Minificar el código javascript y css (10%)
  • Subir una nueva versión al servidor y actualizar repositorio (5%)
Solución de curso learnoyounode

Recuerde resolver sin mirar los videos el curso, si tiene alguna duda, consulte la solución en el video







Explicación uso de animate



Automatización minificación de tareas



Uso de localstorage

Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
AndresCallejasG
Posts: 18
Joined: Mon Jul 18, 2016 8:17 am

Re: Taller #3 - Extendiendo la funcionalidad

Post by AndresCallejasG » Mon Jul 31, 2017 9:12 am

Andrés Callejas González.
Estudiante Ingeniería de Sistemas e Informática.

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Re: Taller #3 - Extendiendo la funcionalidad

Post by xacarana » Mon Jul 31, 2017 10:31 am

El ejercicio de hoy

Html

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/vendor/animate.css">
</head>
<body>
	<nav>
		<div class="boton" id="seccion_home">Home</div>
		<div class="boton" id="seccion_sucursales">Sucursales</div>
		<div class="boton" id="seccion_contacto">Contacto</div>
	</nav>
	<section id="home">
		<h2>Título 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	<section id="sucursales" class="hidden">
		<h2>Título 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	<section id="contacto" class="hidden">
		<h2>Título 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Estilos - css

Code: Select all

.boton{
	display: inline-block;
	width: 70px;
	height: 40px;
	background-color: orange;
	cursor: pointer;
	border-radius: 20px;
	line-height: 39px;
	text-align: center;
	padding-left: 9px;
	padding-right: 9px;
}
.boton:hover{
	background-color:green;
}
.hidden{
	display: none;
}
#home{
	background-color: grey;
}
#sucursales{
	background-color: orange;
}
#contacto{
	background-color: yellow;
}
Javascript

Code: Select all

window.onload = init;

var btns;
var secciones;

function init()
{
	inicializacion_variables();
	inicializacion_eventos();
}

function inicializacion_variables()
{
	btns = [];
	btns[0] = document.getElementById("seccion_home");
	btns[1] = document.getElementById("seccion_sucursales");
	btns[2] = document.getElementById("seccion_contacto");

	secciones = [];
	secciones[0] = document.getElementById("home");
	secciones[1] = document.getElementById("sucursales");
	secciones[2] = document.getElementById("contacto");

}

function inicializacion_eventos()
{
	for(var i in btns)
	{
		btns[i].addEventListener("click",procesarClick);
	}
}

function procesarClick(evt)
{
	var str = evt.target.id;
	var seccion = str.split("_")[1];
	var ref = document.getElementById(seccion);
	ocultar();
	ref.className = "animated slideInDown";
}

function ocultar()
{
	for(var i in secciones)
	{
		secciones[i].className = "hidden";
	}
}
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
Alejandro Villa
Posts: 35
Joined: Mon Jul 17, 2017 8:30 am

Re: Taller #3 - Extendiendo la funcionalidad

Post by Alejandro Villa » Fri Aug 11, 2017 11:42 pm

Curso learnyounode en NodeJS:
Image

CSS y JS minificados usando Grunt:
Image

LocalStorage:
Image

Vanilla JS:
Image

SweetAlert con JS y LocalStorage:
Image

Repositorio actualizado:
Image

FileZilla actualizado:
Image

Página web:
https://appmovilesavcupb.000webhostapp.com/
Last edited by Alejandro Villa on Sat Aug 12, 2017 10:42 pm, edited 2 times in total.
Alejandro Villa Cárdenas
Gestión de la calidad del Software
"Forward Always"

User avatar
juanpablogg
Posts: 59
Joined: Mon Jul 17, 2017 8:30 am

Re: Taller #3 - Extendiendo la funcionalidad

Post by juanpablogg » Sat Aug 12, 2017 12:44 pm

Instalación nodejs :
Image

Curso learnyounode :
Image

Uso de vanilla javascript y localstorage:
Image

Uso de animate :
Image

Repositorio :
https://bitbucket.org/juanpbitbucket/apppaseandog

Página web :
http://paseandog.atwebpages.com/

User avatar
Esteban Cardona
Posts: 21
Joined: Mon Jul 17, 2017 8:33 am

Re: Taller #3 - Extendiendo la funcionalidad

Post by Esteban Cardona » Sat Aug 12, 2017 2:22 pm

NodeJS:
Image

Learn Your Node
Image

Vanilla JavaScript
Image

Estado y Persistencia
Utilicé SessionStorage
Image

Código Minificado con GRUNT
Image

Bitbucket y Servidor Actualizado
Image
Image

Web
http://astrolog.comli.com
Esteban Cardona Álvarez
Gestión de la Calidad

User avatar
santiagolg
Posts: 38
Joined: Mon Jul 17, 2017 8:31 am

Re: Taller #3 - Extendiendo la funcionalidad

Post by santiagolg » Sat Aug 12, 2017 3:23 pm

Learnyounode:
Image

Vanilla JavaScript:
Image

Localstorage:
Image

Minificación usando Grunt:
Image

Repositorio:
https://bitbucket.org/santiagolg/apptem ... n/overview

Pagina Web:
https://templobelen.000webhostapp.com/

User avatar
JuanG
Posts: 24
Joined: Mon Jan 23, 2017 12:14 pm

Re: Taller #3 - Extendiendo la funcionalidad

Post by JuanG » Sun Aug 13, 2017 8:24 pm

Curso NodeJS:

Image

Minificacion CSS y JS:

Image

LocalStorage:

Image

VanillaJS:

Image

Actualizacion repositorio:

Image

Pagina web:

http://mercafeliz.azurewebsites.net/

User avatar
wolffvel93
Posts: 34
Joined: Sun Jul 23, 2017 11:06 pm

Re: Taller #3 - Extendiendo la funcionalidad

Post by wolffvel93 » Sun Aug 13, 2017 10:18 pm

Instalación NodeJS:

Image

Learnyounode:

Image

Vanilla:

Image

Animate:

Image

LocalStorage:

Image

Grunt y minificación:

Image
Image

Página actualizada:

https://appmovilpaw.000webhostapp.com

User avatar
alvarezrozo
Posts: 16
Joined: Mon Jul 17, 2017 8:31 am

Re: Taller #3 - Extendiendo la funcionalidad

Post by alvarezrozo » Mon Aug 14, 2017 8:26 am

Learnyounode: Image
vanilla:

Code: Select all

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

function initMap() {
var uluru = {lat: 6.256452745713992, lng: -75.59893548488617};
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 20,
  center: uluru
});
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});
}
 
/*codigo local storage*/
var usr = {usuario:"alvarezrozo",contraseña:"25f9e794323b453885f5181f1b624d0b"};
localStorage.setItem("sesion",usr);
/*esta validacion se hará comparando con la base de 
datos para mantener la sesion inicada mientras se usa el aplicativo*/ 

/*----------------mostras y ocultar divs--------------*/

function mostrarIntroIndex(){
document.getElementById('seccion_home').style.display='block';
document.getElementById('seccion_registro').style.display = 'none';
document.getElementById('seccion_conoce').style.display = 'none';
document.getElementById('seccion_publica').style.display = 'none';
document.getElementById('seccion_index').style.display = 'none';
document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarResgistrarseIndex(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'block';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarSalirHome(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'block';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarPublicarHome(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'block';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarConoceHome(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'block';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarVolverRegistro(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'block';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarAceptarRegistro(){
    document.getElementById('seccion_home').style.display='block';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarVolverConoce(){
    document.getElementById('seccion_home').style.display='block';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarImagenConoce(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'block';
}

function mostrarVolverSeleccion(){
    document.getElementById('seccion_home').style.display='none';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'block';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}

function mostrarVolverPublica(){
    document.getElementById('seccion_home').style.display='block';
    document.getElementById('seccion_registro').style.display = 'none';
    document.getElementById('seccion_conoce').style.display = 'none';
    document.getElementById('seccion_publica').style.display = 'none';
    document.getElementById('seccion_index').style.display = 'none';
    document.getElementById('seccion_seleccion').style.display = 'none';
}
Grunt: Image
Localstorage: Image
Image
Image
Repositorio: Image
Sitio: http://promcafe.epizy.com/?i=1
Last edited by alvarezrozo on Tue Aug 15, 2017 5:44 pm, edited 2 times in total.

Post Reply