Taller 2: Mi primera app educativa
38
Taller 2: Mi primera app educativa
Transcript of Taller 2: Mi primera app educativa
Taller 2: Mi primeraapp educativa
Contenido
Presentación 3
Estructura de la página index.html de la app 4
Cómo editar o personalizar la página índex.html de
mi primera app 4
Estructura HTML5 del documento index.html de
mi primera app 5
Estructura de la página clase1.html de mi primera
app educativa 19
Segunda app: Quiz 25
Cómo personalizar la app: Quiz 32
Cómo modifica la interfaz gráfica de las app 37
3
PresentaciónEn este taller desarrollarás una aplicación móvil a partir de código HTML5, CSS3 y Java Script preestablecido en un app que desarrolla un contenido temático y una app (quiz) que permite evaluar el aprendizaje de los estudiantes. Este taller te permitirá desarrollar una app con sólo modificar el contenido de los documentos HTML5, CSS3 y Java Script adjuntos con ente taller, únicamente deberás seguir las instrucciones para hacerlo. Podrás elegir entre la app para desarrollar un contenido temático y la app quiz o si deseas realiza las dos. ¡Manos a la Obra!
Figura 1: aplicación móvil: Mi primera app y app Quiz
Duración:
Objetivos:
Recursos:
4 horas
• Desarrollar una aplicación móvil a partir de código HTML, CSS y Java Script ya establecido en una plantilla app.
• Archivo primera_app.zip y app_quiz.zip
• Phonegap instalado en el computador
• Sublime Text 3 instalado en el computador
• Node.js instalado en el computador
Evaluación:
Al finalizar el taller deberás entregar una de las dos apps en un archivo .zip o .rar, Este archivo deberá contener los documentos que permiten el funcionamiento de la app.
4
Estructura de la página index.html de la appFigura 2: índex.html
Cómo editar o personalizar la página índex.html de mi primera app
Encabezado de la app
Descripción de la app
Subtemas que desarrolla la app
Pie de la app
Paso 1: Descomprima el archivo pri.mera_app.zip. Al descomprimirlo encontrará la siguiente estructura de carpetas:
5
Paso 2: Ingrese a la carpeta: www y seleccione el archivo index.html para editarlo con la herramienta seleccionada, en este caso Sublime Text 3.
Estructura HTML5 del documento index.html de mi primera appA continuación se explica de manera breve la estructura del documento index.html de acuerdo a la numeración de líneas como se observa en la imagen que se muestra a continuación, del número 1 al 21. Para ampliar la información usted puede consultar el material de apoyo sugeridos al finalizar el taller. (Ver figura 3 y tabla 1).
Figura 3: código HTML de la página índex de la app
6
Tabla 1: descripción del código HTML
ElementoLínea Descripción
<!DOCTYPE html>1
<!--2
-->
Copyright……. under the License.
21
3 a 20
Indica que el tipo de documento es Html.
Indica el inicio de un comentario. El texto que se incluye dentro de este elemento es utilizado por el programador y usualmente no se visualiza en el navegador.
Indica el cierre de un comentario.
Texto generado por la aplicación PhoneGap con la que ha sido generado el proyecto. Se ampliará en el capítulo de Generar aplicación.
Cabecera de la app (líneas 22 a 32)
Para editar o personalizar la cabecera de la app, sólo tienes que cambiar el título que se muestra en la línea 31 por el título que prefieras según el tema que desa-rrollará tu app. Conserva las etiquetas <title>… </title>, únicamente modifica el título que aparece entre ellas. (Ver figura 4 y tabla 2).
Figura 4: código HTML de la cabecera de la app
7
frame
#3
fram e#1
frame
#2
12:12
2:12
Tabla 2: descripción del código HTML de la cabecera de la app
ElementoLínea Descripción
<html>22
<head>23
<meta>
<title>Aplicaciones Móviles</title>
</head>
24 a 26
30
29
31
32
Representa la raíz de un documento HTML o XHTML, se abre con esta etiqueta el documento y se cierra con </html>
Inicio de la cabecera. Dentro de la etiqueta se escriben los metadatos, es decir los datos que describen otros datos del documento y los enlaces a estilos y scripts.
Define los metadatos que no pueden ser definidos usando otro elemento HTML, como el autor, el tipo de contenido, el lenguaje, entre otros.
Bootstrap contiene estilos que hacen que la app sea adaptable a cualquier dispositivo.
hojaEstilos enlaza el archivo CSS que da formato a las páginas.
Define el título del documento, el cual se muestra en la barra de título del navegador. Solamente puede contener texto.
Con esta etiqueta finaliza la cabecera del documento.
8
Encabezado de la app (líneas 33 a 53)Figura 5: Encabezado de la app
Para personalizar el encabezado de la app sigue los siguientes pasos:
Paso 1:
Paso 2:
Modifica el título principal de la app. Ubícate en la línea 42 y cambia el título <h1>Creación de aplicaciones móviles</h1> por el título que llevará tu app, conserva las etiquetas <h1>…</h1> edita únicamente el título que hay entre ellas. (Ver figura 6 y tabla 3).
Logo de la app
Título principal de la app
Botón para regresar al índex de la
app
9
Paso 2: 4. Visualiza los cambios de la app en tu navegador utilizando la herramienta Phonegap, si olvidaste cómo hacerlo utiliza como material de apoyo el taller: conceptos básicos y entorno de programación HTML, CSS y Java Script.
Figura 6: código HTML del encabezado de la app
ElementoLínea Descripción
<body>33
36 a 37
41 a 43
47 a 49
34
35
38
Representa el cuerpo o el contenido principal de un documento html. Sólo hay un elemento <body> en un documento.
Las clases row y col crean una cuadrícula invisible para mostrar el contenido de la página.
Bloque que contiene el título principal de la app.
Bloque que contiene el botón para regresar al Índex.
Sección que contiene los bloques de la página.
Imagen del logo de la app. Dimensiones recomendadas para el logo: 100px * 92px.
Bloque que contiene el título de la app, en este caso: Creación de aplicaciones móviles. Finaliza en la línea 53.
Tabla 3: descripción del código HTML del encabezado de la app
10
Descripción del tema de la app (líneas 54 a 66)Figura 7: Descripción del tema de la app
Para editar la descripción del tema de la app deberás:
Paso 1:
Paso 2:
Cambiar el subtítulo preestablecido en la app por el subtítulo que prefieras. Ubícate en la línea 57 y edita el texto que aparece entre las etiquetas <h2>… </h2>. (Ver figura 8 y tabla 4).
Para describir el tema que desarrollará tu app, sólo cambia el texto que aparece entre las líneas 58 y 63, conserva las etiquetas <p>… </p>
Figura 8: descripción del tema que desarrolla la app
Tabla 4: descripción del código HTML de la descripción de la app
ElementoLínea Descripción
<div class=”cajaTexto”>
54 a 66
<h2>Aplicaciones móviles</h2>
57
<p>
Es… </p>58 a 63
Bloque que contiene el texto que describe el tema que se desarrollará en la app.
Subtítulo de la app.
Bloque del párrafo que describe el tema que se desarrollará en la app.
11
Galería - espacios para los tres primeros subtemas de la galería (primera f ila líneas 68 a 88)
Figura 9: Galería - espacios para los tres primeros subtemas de la galería
Paso 1:
Paso 2: Modifica la imagen asociada con el primer subtema. Para cambiar la imagen podrás:
1. Buscar en Internet la imagen que consideres pertinente. La imagen deberá tener las siguientes dimensiones 150px * 150px.
2. Ingresar a la carpeta www y guardar la imagen en la carpeta img, bajo el nombre de subtema1.
Subtema 1
Subtema 2
Subtema 3
Para personalizar los tres primeros subtemas de la galería sigue los siguientes pasos:
12
Paso 2:
Paso 3: Repite los pasos anteriores para modificar el segundo y tercer subtema, ten en cuenta el número de líneas para cada subtema.
Figura 10: galería de subtemas 1, 2 y 3 que desarrolla la app
13
Tabla 5: descripción del código HTML de la galería de subtemas 1, 2 y 3 de la app
ElementoLínea Descripción
69 a 74
75 a 80
81 a 86
Línea 70: título del primer subtema que desarrollará la app y el enlace a la página donde se visualizará el desarrollo del subtema 1.
Línea 72: enlaza la imagen del subtema 1.
Línea 76: título del segundo subtema que se desarrollará la app. Y el enlace a la página donde se visualizará el desarrollo del subtema 2.
Línea 78: enlaza la imagen del subtema 2.
Línea 82: título del tercer subtema que se desarrollará la app. Y el enlace a la página donde se visualizará el desarrollo del subtema 3.
Línea 84: enlaza la imagen del subtema 3.
14
Galería - espacios para los siguientes tres subtemas de la galería (segunda f ila líneas 91 a 121)
Figura 11: Galería - espacios para las siguientes 3 clasificaciones de la galería
Paso 1:
Paso 2:
Para personalizar los tres siguientes subtemas (4, 5 y 6) de la galería sigue los siguientes pasos:
Subtema 4
Subtema 5
Subtema 6
15
Paso 3:
Paso 4:
Paso 5:
Si deseas asociar un texto al cuarto subtema en vez de una imagen entonces reemplaza el texto que se encuentra entre las líneas 94 a la 98 únicamente.
Repite los pasos anteriores para modificar el quinto y sexto subtema, ten en cuenta el número de líneas correspondiente a cada subtema. (Ver imagen 12 y tabla 6).
Figura 11: galería de subtemas 4, 5 y 6 que desarrolla la app
16
Tabla 6: descripción del código HTML de la galería de subtemas 4, 5 y 6 de la app
ElementoLínea Descripción
90 a
100
101 a
110
111 a
121
Línea 92: título del cuarto subtema que se desarrollará la app. Y el enlace a la página donde se visualizará el desarrollo del subtema 4.
Línea 94 a 98: Texto del subtema 4.
Línea 102: título del quinto subtema que se desarrollará la app. Y el enlace a la página donde se visualizará el desarrollo del subtema 5.
Línea 105 a 108: Texto del subtema 5.
Línea 112: título del sexto subtema que se desarrollará la app. Y el enlace a la página donde se visualizará el desarrollo del subtema 6. Línea 114 a 118: Texto del subtema 6.
17
Pie de la app (líneas 124 a 135)Figura 13: Pie de la app
Para editar el pie de la app realiza lo siguiente:
Paso 1:
Paso 2:
Cambia el título del pie de la app, para hacerlo ubícate en la línea 127 y edita el texto que aparece entre las etiquetas <h2>… </h2>. (Ver figura 14 y tabla 7).
SPara añadir los créditos de la app, (autores, fecha, e-mail, institución educativa, Departamento, Municipio y demás) cambia el texto que aparece entre las líneas 128 y 132, conserva las etiquetas <p>… </p>.
Figura 14: código HTML del pie de la app
ElementoLínea Descripción
<h2>App</h2>127
<p>…</p>128 a
132
Titulo del pie ( p. e créditos).
Datos del autor, fecha, contacto, etc).
Tabla 7: descripción del código HTML del pie de la app
18
Enlaces a Java Script y cierre (líneas 141 a 147) La información suministrada en estas líneas se debe conservar tal cual, no es necesario modificarlas.
Figura 15: enlaces a Java Script y cierre de la app
Tabla 9: descripción del código HTML de los enlaces a Java Script y cierre de la app
ElementoLínea Descripción
141 a
144
</body>
</html>
146
147
Códigos para visualizar cada una de las imágenes de la galería de los subtemas que desarrolla la app.
Cierra el cuerpo de la app.
Cierre de la página.
19
Estructura de la página clase1.html de mi primera app educativa
Cabecera de la app (líneas 22 a 32)
Figura 16: desarrollo del subtema 1
Para editar o personalizar la cabecera de la app, sólo tienes que cambiar el título que se muestra en la línea 31 por el nombre del primer subtema que desarrollará tu app. Conserva las etiquetas <title>… </title>, únicamente modifica el título que aparece entre ellas. (Ver figura 18 y tabla 10).
Figura 17: código de la cabecera de la página clase1.html
20
Tabla 10: descripción del código HTML de la cabecera de la app
ElementoLínea Descripción
<title>Android</title>31 Define el título del documento, el cual se muestra en la barra de título del navegador. Solamente puede contener texto.
Encabezado de la página clase1.html (líneas 34 a 52)Figura 18: Encabezado de la app
Logo de la app
Título del primer
subtema de la app
Botón para regresar al índex de la
app
Para personalizar el encabezado del primer subtema sigue los siguientes pasos:
Paso 1:
Paso 2:
Modifica el título del primer subtema de la app. Ubícate en la línea 43 y cambia el título <h1>Sistema Operativo Android</h1> por el título del primer subtema, conserva las etiquetas <h1>…</h1> edita únicamente el título que hay entre ellas. (Ver figura 19 y tabla 11).
Para actualizar el logo de la app ubícate en la en la línea 39 y reemplaza el texto que aparece en el atributo de la etiqueta img: src=“img/logo.png”> por el nombre y la extensión de la imagen que seleccionaste para logo igual a como lo hiciste en la página índex.html.
Figura 19: código HTML del encabezado de la app
21
Tabla 11: descripción del código HTML del encabezado de la app
ElementoLínea Descripción
<div class=“cajaTitulo”>
<h1>Sistema Operativo Android</
h1> </div>
42 a 44
Bloque que contiene el Título del primer subtema que desarrolla la app.
Primera imagen de la galería del subtema 1 (líneas 62 a 76)Figura 20: galería de imágenes del subtema 1 de la app
Para personalizar la imagen y el texto correspondiente a la primera imagen de la galería del subtema 1 realiza los siguientes pasos:
Paso 1: Para modificar el título y subtítulo ubícate en las líneas 66 y 67:
Línea 66: <h3>Android<br> cambia el título que aparece entre las etiquetas <h3>…<br> por el título que consideres. (Ver figura 21 y tabla 12).
Línea 67: <small>Qué es?</small></h3> cambia el subtítulo que aparece entre las etiquetas <small>… small></h3> por el subtítulo que consideres.
22
Paso 2:
Paso 3:
Paso 4:
Para modificar la primera imagen de la galería del subtema 1 realiza lo siguiente:
1. Busca en Internet la imagen que consideres pertinente de acuerdo con el subtema a desarrollar. Se recomienda utilizar imágenes con las siguientes dimensiones 500px * 400px.
2. Ingresa a la carpeta www y guardar la imagen en la carpeta img, bajo el nombre de imagen1.
3. Luego ubícate en la línea 72 y reemplaza el texto que aparece en el atributo de la etiqueta img: src=“img/android1.png” alt=“”> por el nombre y la extensión de la imagen que seleccionaste, por ejemplo si la extensión y el tipo de imagen que seleccionaste es .jpg quedaría: src=“mg/imagen1.jpg”>
4. Visualiza los cambios de la app en tu navegador.
Repite el paso 2 para modificar las demás imágenes (imagen2, imagen3, imagen4, imagen5, imagen6) de la galería del subtema 1.
Repite los pasos anteriores para modificar las páginas clase2.html, clase3.html y demás páginas que consideres para el desarrollo de los subtemas.
Figura 21: código HTML de la1 imagen de la galería de imágenes del subtema 1 de la app
23
Tabla 12: descripción del código HTML de la 1 imagen de la galería de imágenes del subtema 1 de la app
Tabla 13: descripción del código HTML de los enlaces a las imágenes de la galería del subtema 1
Elemento
Elemento
Línea
Línea
Descripción
Descripción
<h3>Android<br>
<small>Qué es?</small></h3>
<p>… </p>
63
142 a
147
66 a 67
70 a 73
Primera imagen de la galería. Se recomienda utilizar imágenes con dimensiones de: 500px * 400px
Enlace a cada una de las seis imágenes de la galería del subtema 1.
Línea 66: Título que representa la primera imagen de la galería.
Línea 67: Subtítulo.
Párrafo descriptivo de la primera imagen.
Figura 22: código HTML de los enlaces a las imágenes de la galería del subtema 1
24
Pie de la app (líneas 124 a 135)Para cambiar el título del pie de la app ubícate en la línea 157 y edita el texto que aparece entre las etiquetas <h2>… </h2>.
Para añadir los créditos de la app, (autores, fecha, e-mail, institución educativa, Departamento, Municipio y demás) cambia el texto que aparece entre las líneas 158 y 162, conserva las etiquetas <p>… </p>
Figura 22: código HTML del pie de la app
Tabla 14: descripción del código HTML del pie de la app
ElementoLínea Descripción
<h2>App</h2>
<p>…</p>
157
158 a
162
Titulo del pie ( p. e créditos).
Datos del autor, fecha, contacto, etc).
25
Enlaces a Java Script y cierre de la página clase1.html
Segunda app: Quiz
La información suministrada en las líneas 169 a la 180 se debe conservar tal cual, no es necesario modificarlas.
La app quiz te permitirá evaluar el conocimiento de tus estudiantes sobre un tema en particular, con esta app podrás conocer en tiempo real las respuestas de tus estudiantes en la evaluación.
¿Cómo funciona? En este caso el computador del docente conectado a una red de Internet local funcionaria como servidor, y los dispositivos clientes en este caso serían las tabletas o celulares inteligentes que utilicen los estudiantes para ejecutar la app quiz y responder la evaluación. Es decir, los estudiantes ejecutan la app quiz en el navegador a partir de una dirección IP y la utilizan para responder unas preguntas y los resultados de esas preguntas llegan directamente al servidor, en este caso, el computador del docente, quien las recibe a través de la dirección IP en tiempo real. Los estudiantes responden una prueba de tres preguntas y obtienen un puntaje y este dato es enviado al servidor, es decir al computador del profesor.
Figura 24: relación servidor – cliente app quiz
Computador del docente: Servidor
PEDIDO
RESPUESTA
Dispositivos de los
estudiantes: clientes
26
Figura 25: app quiz ejecutada en los dispositivos “clientes”
27
Figura 26: respuesta de los estudiantes en la app quiz
¿Cómo hacer para que la app quiz funcione en tiempo real? Los pasos que se enuncian a continuación permiten que la app quiz funcione en tiempo real.
Nota: el servidor y los dispositivos móviles deberán estar conectados al mismo Router para que funcione la app.
Paso 1: Instala la herramienta Node.js: esta herramienta es un entorno en tiempo de ejecución multiplataforma, de código abierto. Node.js está basado en el motor V8 de Javascript de Google. Este motor está diseñado para correr en un navegador y ejecutar el código de Javascript de una forma rápida. Para saber más consulta el sitio oficial de Node.js:
1. Ingresa y descarga la versión: v5.3.0.Stable.
28
Paso 1: 2. Selecciona la carpeta y unidad de disco donde instalarás la herramienta Node.js
3. Ejecuta el instalador e inicia la instalación de la herramienta
29
Paso 2: Identifica la IP de tu computador realizando las siguientes acciones:
1. Accede a todos los programas desde el botón Inicio, busca la carpeta accesorios y selecciona Símbolo del sistema.
2. Digita el siguiente texto ipconfig y oprime la tecla Enter para conocer la IP de tu dispositivo.
Dirección IP del
computador del docente: 192.168.1.73
30
Paso 3: Descomprime el archivo app_quiz.zip adjunto con este taller e ingresa a la carpeta que contiene la aplicación para hacer el quiz app_quiz y copia la dirección o ruta de la carpeta en el sistema.
Figura 27: ruta de la carpeta app_quiz en el sistema
Ingresa desde la terminal a la carpeta de la aplicación quiz, escribiendo en la terminal las letras cd y pegando (da clic derecho opción pegar) la ruta del sistema que copiaste en el paso anterior. Para acceder a la terminal busca en todos los programas la carpeta accesorios y selecciona Símbolo del sistema.
Figura 28: Símbolo del sistema
Ruta de la carpeta en el
sistema
31
Paso 4:
Comando Node con.js
Listening on *:5000
Indica que el servidor está
en uso
Ruta de la carpeta app_
quiz
Luego digita el comando: Node conn.js y oprime la tecla Enter. Si al ejecutar el comando se activa una ventana de bloqueo del Firewall del Windows da clic en desbloquear.
Figura 29: ventana de bloqueo del Firewall de Windows
Esto hará que la aplicación sea visible desde la IP del dispositivo desde el que estamos haciendo esto (servidor) y permitirá que las respuestas de los estudiantes (clientes) en el quiz se puedan visualizar en el servidor.
Nota: no cierres la ventana Símbolo del sistema durante el funcionamiento de la aplicación.
32
Paso 5:
Paso 6:
Digita en el navegador del computador servidor (computador del docente) la dirección IP generada en el paso número 2, seguido del puerto 5000 y la página resultados, así:
Comparte con los estudiantes la IP del servidor para que accedan a la app_quiz desde el navegador de la tableta y puedan responder las preguntas. Ejemplo:
Ingrese a la carpeta: app_quiz y seleccione el archivo preguntas.html para editarlo con la herramienta Sublime Text 3.
Cómo personalizar la app: Quiz
33
Encabezado de la app_quiz Para modificar el encabezado de la prueba o quiz realiza los pasos siguientes:
Figura 30: encabezado de la app_quiz
Paso 1: Título
Paso 3: Descripción de la prueba
Paso 2: Subtítulo
Ubícate en la línea 21: <h1>Preguntas TecnoTIC</h1> y reemplaza el título preestablecido por el título del tema que evaluarás, conserva las etiquetas <h1>…</h1> (ver figura 31).
Ubícate en la línea 31: <p>De acuerdo a la aplicación móvil No. 1, contesta:</p> para modificar las descripción del tema que evaluarás a través de la app. Únicamente modifica el texto que se encuentra entre las etiquetas: <p>…</p>.
Figura 31: código HTML del encabezado de la app_quiz
Ubícate en la línea 30: h2>Prueba de Aplicaciones Móviles</h2> para modificar el subtítulo de la prueba.
34
Preguntas de la app_quizPara modificar las preguntas que aparecen en la app realiza los siguientes pasos:
Figura 32: preguntas de la app_quiz
Paso 1: Pregunta 1
Paso 3: Respuesta b
Paso 3: Respuesta c
Paso 3: Respuesta d
Paso 2: Respuesta a
Para modificar el texto de la pregunta 1 ubícate en la línea 46: <p>Qué es una aplicación móvil?</p> y reemplaza el texto por la pregunta que considere, conserva las etiquetas <p>… </p> (ver figura 33).
Para modificar el texto de la respuesta “b” ubícate en la línea 64: <p>Es…</p> y reemplaza el texto que se encuentra entre las etiquetas <p>… </p>.
Para modificar el texto de la respuesta “c” ubícate en la línea 72: <p>Es…</p> y reemplaza el texto que se encuentra entre las etiquetas <p>… </p>.
Para modificar el texto de la respuesta “d” ubícate en la línea 80: <p>Es…</p> y reemplaza el texto que se encuentra entre las etiquetas <p>… </p>.
Para modificar el texto de la respuesta “a” ubícate en la línea 56: <p>Es…</p> y reemplaza el texto que se encuentra entre las etiquetas <p>… </p>.
35
Nota: para modificar las siguientes preguntas y respuesta repite los anteriores pasos teniendo en cuenta las líneas que correspondan.
Figura 33: código preguntas de la app_quiz
36
Editar o modif icar las respuestas correctas de la app: QuizPara modificar o seleccionar las respuestas correctas en la prueba ingresa a la carpeta app_quiz y abre la carpeta public, luego ingresa a la carpeta js y abre el archivo script.js con la herramienta Sublime Text 3.
Para modificar la respuesta correcta de cada pregunta deberás modificar en la línea 7: var respuestas = [1, 3, 4]; el número que corresponde a la respuesta correcta para cada pregunta; siendo A=1, B=2, C=3 y D=4. (Ver figura 34).
Figura 34: código preguntas de la app_quiz
37
Cómo modif ica la interfaz gráf ica de las appRecuerda que en el archivo hojaEstilos podrás configurar el color del fondo de la app, de la fuente/textos, el color de los bloques, el de los enlaces y el tamaño de los textos. Para hacerlo realiza las siguientes acciones: (ver taller: conceptos básicos y entorno de programación HTML, CSS y Java Script)
Paso 1:Ingresa a la carpeta www y abre la carpeta css luego selecciona el archivo hojaEstilos.css para editarlo con la herramienta Sublime Text 3.
Abre el archivo hojaEstilo.css con Sublime
Text 3
Ingresa a la carpeta CSS
Figura 35: códigos de los colores hexadecimales
Fuente: holaho
