v2

davsket · Aug 7, 2013 · c9f5753 · c9f5753
1 parent 77db191
commit c9f5753
Show file tree

Hide file tree

Showing 18 changed files with 815 additions and 6 deletions.
diff --git a/artist.html b/artist.html
@@ -3,12 +3,16 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Ejemplo Artista</title>
+		<link href="res/css/bootstrap.min.css" rel="stylesheet">
+		<link href="res/css/artist.css" rel="stylesheet">
 	</head>
 	<body>
 		<h1>Carga de Artistas</h1>
 		<p>Carga la información de tu artista favorito!</p>
-		<input type="text" id="artista" placeholder="Nombre del artista">
-		<button id="boton">Cargar info</button>
+		<div class="form-inline">
+			<input name="artist" type="text" id="artista" placeholder="Nombre del artista" class="form-control">
+			<button id="boton" class="btn btn-primary">Cargar info</button>
+		</div>
 		<div id="content"></div>
 		<!-- jQuery en el CDN de otro, como Google -->
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

diff --git a/calculadora.html b/calculadora.html
diff --git a/canvas-vs-svg.html b/canvas-vs-svg.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Ejemplo SVG vs Canvas</title>
+		<link href="res/css/bootstrap.min.css" rel="stylesheet">
+		<style>
+			body{
+				padding: 3em;
+			}
+			canvas,
+			#svg-container{
+				border: 1px solid dodgerblue;
+			} 
+			#svg-container{
+				width: 300px;
+				height: 300px;
+			}
+			.box{
+				display: inline-block;
+				min-width: 40%;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box">
+			<h1>le Canvas</h1>
+			<canvas width="300" height="300">No soportas canvas!!</canvas>
+		</div>
+		<div class="box">
+			<h1>le SVG</h1>
+			<div id="svg-container"></div>
+		</div>
+
+		<!-- Raphaël.js -->
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
+		<!-- Luego si tus scripts -->
+		<script src="res/js/canvas-vs-svg.js"></script>
+	</body>
+</html>
diff --git a/canvas.html b/canvas.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Ejemplo Canvas</title>
+		<link href="res/css/bootstrap.min.css" rel="stylesheet">
+		<style>
+			body{
+				padding: 3em;
+			}
+			canvas{
+				border: 1px solid dodgerblue;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>le Canvas</h1>
+		<canvas width="300" height="300">No soportas canvas!!</canvas>
+		<!-- Luego si tus scripts -->
+		<script src="res/js/canvas.js"></script>
+	</body>
+</html>
diff --git a/index.html b/index.html
@@ -9,5 +9,6 @@ <h1>Test con jQuery</h1>
 		<div id="content"></div>
 		<!-- jQuery en el CDN de otro, como Google -->
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<script src="res/js/scope.js"></script>
 	</body>
 </html>
diff --git a/orbucles.html b/orbucles.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Ejemplo Bucles</title>
+		<link href="res/css/bootstrap.min.css" rel="stylesheet">
+		<style>
+			body{
+				padding: 2em;
+			}
+			.form-control{
+				display: inline-block;
+				width: auto;
+			}
+			label{
+				display: block;
+			}
+			.result, 
+			.button-container{
+				margin-top: 1em;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Contador de vocales</h1>
+		<div class="inputs">
+			<label for="word">Palabra</label>
+			<input type="text" id="palabra" class="form-control">
+		</div>
+		<div class="button-container">
+			<button id="count" class="btn btn-primary">contar vocales</button>
+		</div>
+		<div class="result">
+			<h2>Resultados</h2>
+			<div class="res-a">
+				A <span id="a-count"></span>
+			</div>
+			<div class="res-e">
+				E <span id="e-count"></span>
+			</div>
+			<div class="res-i">
+				I <span id="i-count"></span>
+			</div>
+			<div class="res-o">
+				O <span id="o-count"></span>
+			</div>
+			<div class="res-u">
+				U <span id="u-count"></span>
+			</div>
+		</div>
+
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<script>
+			var vowels = 'aeiou',
+				// elementos
+				$word = $('#palabra'),
+				$count = $('#count')
+
+			function countVowels(){
+				var word = $word.val(),
+					res = { a: 0, e:0, i:0, o:0, u:0 },
+					vowel;
+
+				for(var i=0; i<word.length; i++){
+					vowel = word[i];
+					if( vowels.indexOf(vowel) != -1 ){
+						// res[v] = res[v] + 1
+						++res[vowel];
+					}
+				}
+
+				for(var key in res){
+					$('#' + key + '-count').html( res[ key ] )
+				}
+			}
+
+			$count.on('click', countVowels)
+
+		</script>
+	</body>
+</html>
diff --git a/orcalc.html b/orcalc.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Ejemplo1 Calculadora</title>
+		<link href="res/css/bootstrap.min.css" rel="stylesheet">
+		<style>
+			body{
+				padding: 2em
+			}
+			.form-control{
+				display: inline-block;
+				width: auto;
+			}
+			.result{
+				margin-top: 1em;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>le Calc</h1>
+		<div class="inputs">
+			<label for="var-a">Variable A</label>
+			<input type="text" id="var-a" class="form-control">
+			<select id="operator" class="form-control">
+				<option value="+">más</option>
+				<option value="-">menos</option>
+				<option value="*">por</option>
+				<option value="/">dividido por</option>
+			</select>
+			<label for="var-b">Variable B</label>
+			<input type="text" id="var-b" class="form-control">
+			<button id="calc" class="btn btn-primary">Calcular</button>
+		</div>
+		<div class="result">
+			<label>Resultado</label>
+			<input type="text" id="res" class="form-control" readonly>
+		</div>
+
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<script>
+			var $calc = $('#calc'),
+				$varA = $('#var-a'),
+				$varB = $('#var-b'),
+				$operator = $('#operator'),
+				$res = $('#res');
+
+			function calculate(){
+				var op, a, b, result;
+
+				op = $operator.val();
+				a = parseInt( $varA.val() || 0 );
+				b = parseInt( $varB.val() || 0 );
+
+				if(op == '+'){
+					result = a + b
+				}else if(op == '-'){
+					result = a - b
+				}else if(op == '*'){
+					result = a * b
+				}else{
+					result = a / b
+				}
+
+				$res.val( result )
+			}
+
+			$calc.on('click', calculate)
+
+		</script>
+	</body>
+</html>
diff --git a/res/css/artist.css b/res/css/artist.css
@@ -0,0 +1,22 @@
+body{
+	padding: 3em;
+	width: 85%;
+	margin: auto;
+	max-width: 50em;
+	box-sizing: border-box;
+}
+.form-control{
+	width: 20em;
+}
+.bio{
+	margin-top: 1em;
+}
+.loading{
+	background: #eee;
+	margin: 2em 0;
+	padding: 1em;
+	border-radius: 5px;
+	color: #555;
+	font-style: italic;
+	text-align: center;
+}
diff --git a/res/css/bootstrap.min.css b/res/css/bootstrap.min.css
diff --git a/res/img/firefox.png b/res/img/firefox.png