Aplicación desconectada (15%)

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

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

Aplicación desconectada (15%)

Post by xacarana » Mon Jan 16, 2017 9:47 am

Aplicación Desconectada - Tema libre (30 de Enero entrega)
  1. Referentes de aplicaciones, juegos, problemas que quieran solucionar (Entrega al empezar la clase, publicado en el foro).
  2. Wireframes de la aplicación (manual y digital), mínimo 4 secciones incluyendo créditos (Entrega al empezar la clase, publicado en el foro).
  3. Estructura html, basada en la diagramación de los wireframes.
  4. Definir la interfaz gráfica usando estilos (CSS, deben estar desacoplados)
Recomendaciones:
  1. Leer la presentación completa de HTML y CSS.
  2. Leer la presentación completa de JS.
  3. Crear un repositorio en bitbucket.org para guardar el proyecto.
  4. El tema debe ser diferente para cada estudiante, el primero en publicar el tema queda seleccionado
Enlaces importantes:
Recuerde editar su post y publicar el enlace del repositorio y de su sitio web
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
Oscar Garcia
Posts: 7
Joined: Mon Jan 16, 2017 8:17 am

Re: Aplicación desconectada (15%)

Post by Oscar Garcia » Sun Jan 22, 2017 1:25 am

Fidgetizer
App para entretenerse por tiempos muy cortos inspirados por productos como:
Image
Ejemplos de Apps :
https://play.google.com/store/apps/deta ... dgetingapp
https://play.google.com/store/apps/deta ... o.hopblock

Objetivo: Crear un app para personas nerviosas que tienen que ocupar sus manos

Funcionamiento: Aparecerán un circulo en una posición aleatoria, cuando sea apretado se gana un punto y otro circulo aparecerá en otra posición. El juego acaba al pasar 30 segundos

Wireframe:
Image
Image

URL: https://fidgetizer.000webhostapp.com/
Repositorio: https://bitbucket.org/Oscar_GarciaF/01_ ... 6_30012017
URL PLAY STORE: https://play.google.com/store/apps/deta ... Fidgetizer
Last edited by Oscar Garcia on Mon Feb 06, 2017 10:56 am, edited 3 times in total.

User avatar
Fìral
Posts: 22
Joined: Mon Jan 16, 2017 8:08 am

Re: Aplicación desconectada (15%)

Post by Fìral » Sun Jan 22, 2017 10:28 pm

Breath, pray, shoot

App para jugar solo o con un amigo que pone a prueba tu destreza y reflejos.

Ejemplos de apps:
https://play.google.com/store/apps/deta ... lecake.rsb

Objetivos: Aplicación de entretenimiento.

Funcionamiento: los jugadores deben de presionar el botón "shoot" tan pronto como se les de un estímulo, el que primero lo haga gana un punto, hacerlo antes del tiempo le otorga un punto al oponente.
Image
Image

URL:http://breathprayshoot.260mb.net/
REPOSITORIO:https://bitbucket.org/Firal/appdesconectada

User avatar
Alejo.arboh
Posts: 43
Joined: Mon Jan 16, 2017 8:05 am

Re: Aplicación desconectada (15%)

Post by Alejo.arboh » Mon Jan 23, 2017 2:02 am

Place Quiz
App para adivinar el lugar (país, ciudad) a partir de imágenes

Ejemplo de apps:
https://itunes.apple.com/us/app/city-qu ... 73922?mt=8
https://play.google.com/store/apps/deta ... iz.cityapp
https://play.google.com/store/apps/deta ... .guesscity

Objetivo: App de entretenimiento

Funcionamiento: Los jugadores deben escribir el nombre de la ciudad o país del lugar que aparece en la imagen.
Image
Image

Url: http://alejobg.freetzi.com/
Repositorio: https://bitbucket.org/Alejobg/01_alejan ... 1_30012017
PlayStore: https://play.google.com/store/apps/deta ... .practica1
Last edited by Alejo.arboh on Sun Feb 12, 2017 11:47 pm, edited 3 times in total.

User avatar
JuanAlzt
Posts: 24
Joined: Mon Jan 16, 2017 8:19 am

Re: Aplicación desconectada (15%)

Post by JuanAlzt » Mon Jan 23, 2017 2:27 am

Gui Smite
App para brindar guías , información y tutoriales del juego moba smite.

Objetivos: crear una app que le permita a los diferentes jugadores tener una mayor información del juego y guías que le permitan una mayor comprensión de este.

funcionamiento:a través de los diferente botones acceder a los diferentes tipos de información y guías que se presentan en este.

Wireframe
Image
.

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

Re: Aplicación desconectada (15%)

Post by xacarana » Mon Jan 23, 2017 10:08 am

Ejemplo en clase de navegación y estilos, como ejercicio, termine el ejemplo de clase, completando la programaciòn de la navegaciòn entre secciones y luego incorpore esta funcionalidad en su proyecto de aplicaciòn desconectada.

Html

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script src="js/main.js"></script>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav>
	<span class="boton" id="btn_01">boton</span>
	<span class="boton" id="btn_02">boton</span>
	<span class="boton" id="btn_03">boton</span>
</nav>
<section id="seccion_01" class="seccion ocultar">
	<img src="img/logo.png">
	<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. 
	</p>
</section>
<section id="seccion_02" class="seccion ocultar">
	<h1>Prueba</h1>
	<span class="color">prueba</span> 
	<span class="color">prueba</span> <br/>
	<span class="color">prueba</span>
	<span class="color">prueba</span>
	<span class="color">prueba</span>
</section>
<section id="seccion_03" class="seccion ocultar">
	<h1>Prueba</h1>
	<div class="color2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quos voluptas est natus quia deserunt, debitis laudantium! Autem esse dolor, voluptas architecto mollitia perspiciatis, commodi minima, illum eligendi vero voluptatibus.</div>
	<div class="color3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quos voluptas est natus quia deserunt, debitis laudantium! Autem esse dolor, voluptas architecto mollitia perspiciatis, commodi minima, illum eligendi vero voluptatibus.</div>
	<div class="color2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quos voluptas est natus quia deserunt, debitis laudantium! Autem esse dolor, voluptas architecto mollitia perspiciatis, commodi minima, illum eligendi vero voluptatibus.</div>
	<div class="color3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quos voluptas est natus quia deserunt, debitis laudantium! Autem esse dolor, voluptas architecto mollitia perspiciatis, commodi minima, illum eligendi vero voluptatibus.</div>
	<div class="color2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quos voluptas est natus quia deserunt, debitis laudantium! Autem esse dolor, voluptas architecto mollitia perspiciatis, commodi minima, illum eligendi vero voluptatibus.</div>
</section>
<section class="seccion ocultar">
	<h1>Prueba</h1>
	<p>test</p>
</section>
<section class="seccion ocultar">
	<h1>Prueba</h1>
	<p>test</p>
</section>
</body>
</html>
Estilos (css)

Code: Select all

.color{
	color: orange;
}
.color2{
	color:white;
	background-color: purple;
}
.color3{
	color:white;
	background-color: pink;
}
.seccion{
	
}
.ocultar{
	display: none;
}
.boton{
	background-color: black;
	color:white;
	cursor: pointer;
	padding: 20px;
	border-radius: 20px;
}
.boton:hover{
	background-color: orange;
	color:white;
}
Código Javascript (js)

Code: Select all

var btns = [];
window.onload = init;

function init(){
	btns[0] = document.getElementById("btn_01");
	btns[1] = document.getElementById("btn_02");
	btns[2] = document.getElementById("btn_03");

	btns[0].addEventListener("click",menu);
	btns[1].addEventListener("click",menu);
	btns[2].addEventListener("click",menu);
}

function menu(event)
{
	var id = (event.target.id).split("_")[1];
	var ref = document.getElementById("seccion_"+id);
	//alert(ref.className);
	ref.className = "seccion";
}
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez


User avatar
Ankaiser
Posts: 11
Joined: Mon Jan 16, 2017 8:06 am

Re: Aplicación desconectada (15%)

Post by Ankaiser » Mon Jan 23, 2017 10:44 am

Aplicacion: Juego Aplasta Insectos.

Juego que consiste en estripar la mayor cantidad de insectos en un tiempo determinado y ganar puntos.
Image
Image

Ejemplo: Mario Paint
Image

Repositorio:
https://bitbucket.org/Ankaiser/01_juanc ... 411_300117

Sitio web:
https://antsplat.000webhostapp.com/

Post Reply