-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·267 lines (257 loc) · 13.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Proyecto final - Pequeñas Programadoras">
<meta name="author" content="MarceStarlet">
<link rel="icon" href="./img/icon.png">
<title>Proyecto final - Pequeñas Programadoras</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootswatch/journal/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Pequeñas Programadoras</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html">Inicio</a></li>
<li><a href="./aboutme.html">About me</a></li>
<li><a href="./quiz.html">Quiz</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>
<img src="./img/pequena-programadora.png" alt="Pequeña Programadora" height="100" width="100"/>
Capstone Project - Pequeñas programadoras
</h1>
</div>
<div>
<p class="lead">
En este proyecto aplicaré los conocimientos adquiridos en el curso de
"Pequeñas Programadoras - Principios de Programación en JavaScript",
mediante la creación de una página web estática.
</p>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Descripción del Proyecto
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>
Este proyecto final consta de dos challenges, los cuales debes completar.
</p>
<h3>¡Dinos quién eres!</h3></br>
<p>
Utiliza los conocimientos adquiridos en este curso para crear una página
web que hable sobre ti y que pueda decirle al mundo cómo contactarte.
</p>
<h3>¡Hagámos un "Quiz"!</h3></br>
<p>
Utiliza los conocimientos adquiridos en este curso para crear un Quiz
con el tema de tu elección.</br></br>
Recuerda que un Quiz ofrece varias respuestas para una pregunta, por lo
tanto debes <i>validar</i> las respuestas hechas por el usuario para que
al final le muestres su puntuación y calificación final.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Instrucciones
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Challenge #1 - About me</h4></br>
<p>
<h5>¡Dile a todo el mundo quién eres y cómo pueden contactarte!</h5></br>
En este challenge aplicarás tus conocimientos de HTML5 y CSS, y para hacerlo
sigue las instrucciones que a continuación te dejamos:</br></br>
Imagina que eres una "Web Developer" desde hace mucho tiempo y quieres crear
tu propia página web para que las personas puedan saber de ti, de tu trabajo,
de tus gustos, aficiones e interéses y sobre todo que sepan donde pueden contactarte.</br></br>
<ul>
<li>
Abre el archivo <code>aboutme.html</code> en tu "browser" (chrome, firefox, safari).
Da doble clic sobre el archivo, ó clic derecho y selecciona el browser de tu elección. </br>
<strong>¿Qué ves?</strong>, conoce a Grace mediante su página web.
</li>
<li>
En tu proyecto "CapstoneProject", edita el archivo <code>aboutme.html</code>
en el editor de textos "SublimeText". Da clic derecho en el archivo y selecciona
<i>Abrir con SublimeText</i>.
</li>
<li>
Identifica los <code>tags</code>: <code>< header ></code>, <code>< section ></code>
y <code>< footer ></code>. <strong>¿Cuántos tag "section" hay?</strong>.
</li>
<li>
<strong>¿Ya sabes que tags identifican cada parte de la página "About me"?</strong>.</br>
Edita cada <code>tag</code> con los datos de tu agrado, y si tienes dudas consulta a tu instructora.
</li>
</ul>
</p></br>
<h4>Challenge #2 - Quiz</h4></br>
<p>
<h5>¡Haz un Quiz para tus amigos y evalúa sus conocimientos!</h5></br>
En este challenge aplicarás tus conocimientos de HTML5, CSS y JavaScript, para hacerlo
sigue las instrucciones que a continuación te dejamos:</br></br>
Imagina que eres una "Web Developer" desde hace mucho tiempo y quieres hacer una
Quiz de conocimientos a tus amigos. Elige el tema de tu agrado y mános a la obra.</br></br>
<ul>
<li><h5>Diseñando el Quiz</h5></li>
<ul>
<li>
Abre el archivo <code>quiz.html</code> en tu "browser" (chrome, firefox, safari).
Da doble clic sobre el archivo, ó clic derecho y selecciona el browser de tu elección. </br>
</li>
<li>
<strong>¿Qué ves?</strong>, analiza la plantilla que dejamos para ti y comienza a diseñar
en papel tu Quiz. Recuerda que un Quiz ofrece varias respuestas para una pregunta, por lo
tanto debes <i>validar</i> las respuestas hechas por tus amigos para que
al final les muestres su puntuación y calificación final.
</li>
<li>
<strong>¿Qué más debes contemplar para tu Quiz?</strong></br>
Estaría súper genial que tu Quiz supiera el "nombre" de tu amigo para darle su resultado
personalizado. <strong>¿Qué más podrías agregar?</strong>
</li>
<ul>
<li>Nombre del usuario</li>
<li>Correo electrónico</li>
<li>Otro</li>
</ul>
</ul>
<li><h5>Editando código HTML y CSS</h5></li>
<ul>
<li>
En tu proyecto "CapstoneProject", edita el archivo <code>quiz.html</code>
en el editor de textos "SublimeText". Da clic derecho en el archivo y selecciona
<i>Abrir con SublimeText</i>.
</li>
<li>
Analiza el código HTML e identifica los <code>tags</code> que vas a editar para
crear tus preguntas y respuestas.
</li>
<li>
Modifica el código HTML a tu antojo. Recuerda que puedes ver los cambios que estás
haciendo "actualizando" tu browser.
</li>
</ul>
<li><h5>Agregando comportamiento con JavaScript</h5></li>
<ul>
<li>
En tu proyecto "CapstoneProject", edita el archivo <code>quiz.js</code>
en el editor de textos "SublimeText". Da clic derecho en el archivo y selecciona
<i>Abrir con SublimeText</i>.
</li>
<li>
Analiza el código de JavaScript que ves en el archivo. <strong>¿Qué código conoces?</strong>
</li>
<li>
Para agregar comportamiento, primero debes tener claro el requerimiento del problema.</br>
<ul>
<li>El Quiz debe preguntar los datos al usuario y guardarlos para usarlos después.</li>
<li>El Quiz debe mostrar las preguntas y dar a elegir "varias" respuestas.</li>
<li>
El Quiz debe validar que el usuario haya contestado todas las preguntas seleccionando
almenos una respuesta.
</li>
<li>El Quiz debe varlidar las respuestas del usuario, evaluando si fueron correctas o incorrectas.</li>
<li>El Quiz debe calcular la puntuación.</li>
<li>El Quiz debe calcular la calificación final.</li>
<li>El Quiz debe mostrar el resultado al usuario.</li>
<li>El Quiz debe proporcionar una opción para "reiniciar".</li>
</ul>
</li>
</ul>
</ul>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Acerca de
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>Aprenderé:</h4>
<ul>
<li>Cómo se compone una página web </li>
<li>CSS y HTML5 para crear mi contenido web</li>
<li>Usar el lenguaje de programación JavaScript para manipular mi contenido web</li>
</ul>
<h4>Aplicaré:</h4>
<ul>
<li>Mis conocimientos de programación en JavaScript:</li>
<ul>
<li>Variables</li>
<li>Funciones</li>
<li>Ciclos</li>
<li>Estructuras de control</li>
<li>Estructuras de datos</li>
</ul>
<li>Mis conocimientos de CSS:</li>
<ul>
<li>rule-set</li>
<li>Selector</li>
<li>Declaration block</li>
</ul>
<li>Mis conocimientos de HTML5:</li>
<ul>
<li>Elements</li>
<li>Attributes</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Copyright © Your Website 2017</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>-->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>