Taller 2. Mi Primera App Educativa

Taller 2: Mi primera
app 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

Presentación
En 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:
4 horas
Objetivos:
• Desarrollar una aplicación móvil a partir de código

HTML, CSS y Java Script ya establecido en una
plantilla app.
Recursos:
• 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.
3
Estructura de la página index.html de la app
Figura 2: índex.html
Encabezado de
la app
Descripción de
la app
Subtemas que
desarrolla la app
Pie de
la app
Cómo editar o personalizar la página índex.html de mi primera app

Paso 1:
Descomprima el archivo pri.mera_app.zip. Al descomprimirlo
encontrará la siguiente estructura de carpetas:
4
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 app

A 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
5
Tabla 1: descripción del código HTML
Línea Elemento Descripción

1 <!DOCTYPE html> Indica que el tipo de documento es Html.
2  Indica el cierre de un comentario.
3 Copyright……. under Texto generado por la aplicación PhoneGap con la que ha

a the License. sido generado el proyecto. Se ampliará en el capítulo de
20 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
6
Tabla 2: descripción del código HTML de la cabecera de la app

22 <html> Representa la raíz de un documento HTML o XHTML, se
abre con esta etiqueta el documento y se cierra con </
html>
23 <head> 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.
24 <meta> Define los metadatos que no pueden ser definidos usando

a otro elemento HTML, como el autor, el tipo de contenido,
26 el lenguaje, entre otros.
29 hojaEstilos enlaza el archivo CSS que da formato a las
páginas.
30 Bootstrap contiene estilos que hacen que la app sea

adaptable a cualquier dispositivo.
31 <title>Aplicaciones Define el título del documento, el cual se muestra en la

Móviles</title> barra de título del navegador. Solamente puede contener
texto.
32 </head> Con esta etiqueta finaliza la cabecera del documento.
12:1
2
2:12
fr
am
e
#1
fra fr
am
me e
#2 #3
7
Encabezado de la app (líneas 33 a 53)
Figura 5: Encabezado de la app
Título Botón para

Logo de principal regresar al
la app de la app índex de la
app
Para personalizar el encabezado de la app sigue los siguientes pasos:
Paso 1:
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).
Paso 2:
8
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
Tabla 3: descripción del código HTML del encabezado de la app

33 <body> Representa el cuerpo o el contenido principal de un
documento html. Sólo hay un elemento <body> en un
documento.
34 Sección que contiene los bloques de la página.
35 Bloque que contiene el título de la app, en este caso:

Creación de aplicaciones móviles. Finaliza en la línea 53.
36 Las clases row y col crean una cuadrícula invisible para
a mostrar el contenido de la página.
37
38 Imagen del logo de la app. Dimensiones recomendadas

para el logo: 100px * 92px.
41 Bloque que contiene el título principal de la app.

a
43
47 Bloque que contiene el botón para regresar al Índex.

a
49
9
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:
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).
Paso 2:
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

54 <div Bloque que contiene el texto que describe el tema que se
a class=”cajaTexto”> desarrollará en la app.
66
57 <h2>Aplicaciones Subtítulo de la app.
móviles</h2>
58 <p> Bloque del párrafo que describe el tema que se

a desarrollará en la app.
Es… </p>
63
10
Galería - espacios para los tres primeros subtemas de la galería
(primera fila líneas 68 a 88)
Figura 9: Galería - espacios para los tres primeros subtemas de la galería
Subtema Subtema Subtema

1 2 3
Para personalizar los tres primeros subtemas de la galería sigue los siguientes
pasos:
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.
11
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
12
Tabla 5: descripción del código HTML de la
galería de subtemas 1, 2 y 3 de la app

69 Línea 70: título del primer subtema que desarrollará la app
a y el enlace a la página donde se visualizará el desarrollo
74 del subtema 1.
Línea 72: enlaza la imagen del subtema 1.
75 Línea 76: título del segundo subtema que se desarrollará

a la app. Y el enlace a la página donde se visualizará el
80 desarrollo del subtema 2.
81 Línea 82: título del tercer subtema que se desarrollará

a la app. Y el enlace a la página donde se visualizará el
86 desarrollo del subtema 3.
13
Galería - espacios para los siguientes tres subtemas de la
galería (segunda fila líneas 91 a 121)
Figura 11: Galería - espacios para las siguientes 3 clasificaciones de la galería
Subtema Subtema Subtema

4 5 6
Para personalizar los tres siguientes subtemas (4, 5 y 6) de la galería sigue los
siguientes pasos:
Paso 1:
Paso 2:
14
Paso 3:
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.
Paso 4:
Paso 5:
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
15
Tabla 6: descripción del código HTML de la
galería de subtemas 4, 5 y 6 de la app

90 Línea 92: título del cuarto subtema que se
a desarrollará la app. Y el enlace a la página donde se
100 visualizará el desarrollo del subtema 4.
Línea 94 a 98: Texto del subtema 4.
101 Línea 102: título del quinto subtema que se

111 Línea 112: título del sexto subtema que se

16
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:
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).
Paso 2:
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
Tabla 7: descripción del código HTML del pie de la app

127 <h2>App</h2> Titulo del pie ( p. e créditos).
128 <p>…</p> Datos del autor, fecha, contacto, etc).

a
132
17
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

141 Códigos para visualizar cada una de las imágenes de la
a galería de los subtemas que desarrolla la app.
144
146 </body> Cierra el cuerpo de la app.
147 </html> Cierre de la página.
18
Estructura de la página clase1.html de mi primera app educativa
Figura 16: desarrollo del subtema 1
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 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
19
Tabla 10: descripción del código HTML de la cabecera de la app

31 <title>Android</title> 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
Título del Botón para

Logo de primer regresar al
la app subtema de índex de la
la app app
Para personalizar el encabezado del primer subtema sigue los siguientes pasos:
Paso 1:
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.
Paso 2:
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
20
Tabla 11: descripción del código HTML del encabezado de la app

42 <div Bloque que contiene el Título del primer subtema que
a class=“cajaTitulo”> desarrolla la app.
44
<h1>Sistema
Operativo Android</
h1> </div>
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.
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.
21
Paso 2:
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.
Paso 3:
Repite el paso 2 para modificar las demás imágenes (imagen2,
imagen3, imagen4, imagen5, imagen6) de la galería del
subtema 1.
Paso 4:
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
22
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

63 Primera imagen de la galería. Se recomienda utilizar
imágenes con dimensiones de: 500px * 400px
66 <h3>Android<br> Línea 66: Título que representa la primera imagen de la

a galería.
<small>Qué es?</
67
small></h3> Línea 67: Subtítulo.
70 <p>… </p> Párrafo descriptivo de la primera imagen.

a
73
Figura 22: código HTML de los enlaces a las

imágenes de la galería del subtema 1
Tabla 13: descripción del código HTML de los enlaces

a las imágenes de la galería del subtema 1

142 Enlace a cada una de las seis imágenes de la galería del
a subtema 1.
147
23
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

157 <h2>App</h2> Titulo del pie ( p. e créditos).
158 <p>…</p> Datos del autor, fecha, contacto, etc).

a
162
24
Enlaces a Java Script y cierre de la página clase1.html
La información suministrada en las líneas 169 a la 180 se debe conservar tal cual,
no es necesario modificarlas.
Segunda app: Quiz
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 RESPUESTA
Dispositivos
de los
PEDIDO estudiantes:
clientes
25
Figura 25: app quiz ejecutada en los dispositivos “clientes”
26
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.
27
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
28
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
29
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
Ruta de la
carpeta 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
30
Paso 4:
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
Comando
Node con.js
Ruta de la
Listening carpeta app_
on *:5000 quiz
Indica que el
servidor está
en uso
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.
31
Paso 5:
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í:
Paso 6:
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:
Cómo personalizar la app: Quiz

Ingrese a la carpeta: app_quiz y seleccione el archivo preguntas.html para editarlo
con la herramienta Sublime Text 3.
32
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
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).
Paso 2: Subtítulo
Ubícate en la línea 30: h2>Prueba de Aplicaciones Móviles</
h2> para modificar el subtítulo de la prueba.
Paso 3: Descripción de la prueba

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
33
Preguntas de la app_quiz
Para modificar las preguntas que aparecen en la app realiza los siguientes pasos:
Figura 32: preguntas de la app_quiz
Paso 1: Pregunta 1
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).
Paso 2: Respuesta a
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>.
Paso 3: Respuesta b
Para modificar el texto de la respuesta “b” ubícate en la línea
Paso 3: Respuesta c
Para modificar el texto de la respuesta “c” ubícate en la línea
Paso 3: Respuesta d
Para modificar el texto de la respuesta “d” ubícate en la línea
34
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
35
Editar o modificar las respuestas correctas de la app: Quiz
Para 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
36
Cómo modifica la interfaz gráfica de las app
Recuerda 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.
Ingresa a la Abre el archivo

carpeta CSS hojaEstilo.css
con Sublime
Text 3
Figura 35: códigos de los colores hexadecimales
Fuente: holaho
37

Taller 2. Mi Primera App Educativa

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Taller 2. Mi Primera App Educativa

Cargado por

Copyright:

Formatos disponibles

Taller 2: Mi primera

Estructura de la página index.html de la app 4

Cómo editar o personalizar la página índex.html de

Estructura HTML5 del documento index.html de

Estructura de la página clase1.html de mi primera

Segunda app: Quiz 25

Cómo personalizar la app: Quiz 32

Cómo modifica la interfaz gráfica de las app 37

Figura 1: aplicación móvil: Mi primera app y app Quiz

• Desarrollar una aplicación móvil a partir de código

• 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

Al finalizar el taller deberás entregar una de las dos apps

Cómo editar o personalizar la página índex.html de mi primera app

Estructura HTML5 del documento index.html de mi primera app

Figura 3: código HTML de la página índex de la app

Línea Elemento Descripción

2 <!-- Indica el inicio de un comentario. El texto que se incluye

21 --> Indica el cierre de un comentario.

3 Copyright……. under Texto generado por la aplicación PhoneGap con la que ha

Cabecera de la app (líneas 22 a 32)

Línea Elemento Descripción

24 <meta> Define los metadatos que no pueden ser definidos usando

30 Bootstrap contiene estilos que hacen que la app sea

31 <title>Aplicaciones Define el título del documento, el cual se muestra en la

Título Botón para

Para personalizar el encabezado de la app sigue los siguientes pasos:

Figura 6: código HTML del encabezado de la app

Tabla 3: descripción del código HTML del encabezado de la app

Línea Elemento Descripción

35 Bloque que contiene el título de la app, en este caso:

38 Imagen del logo de la app. Dimensiones recomendadas

41 Bloque que contiene el título principal de la app.

47 Bloque que contiene el botón para regresar al Índex.

Para editar la descripción del tema de la app deberás:

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

Línea Elemento Descripción

58 <p> Bloque del párrafo que describe el tema que se

Subtema Subtema Subtema

1. Buscar en Internet la imagen que consideres pertinente.

2. Ingresar a la carpeta www y guardar la imagen en la carpeta

Figura 10: galería de subtemas 1, 2 y 3 que desarrolla la app

Línea Elemento Descripción

Línea 72: enlaza la imagen del subtema 1.

75 Línea 76: título del segundo subtema que se desarrollará

Línea 78: enlaza la imagen del subtema 2.

81 Línea 82: título del tercer subtema que se desarrollará

Línea 84: enlaza la imagen del subtema 3.

Subtema Subtema Subtema

Figura 11: galería de subtemas 4, 5 y 6 que desarrolla la app

Línea Elemento Descripción

Línea 94 a 98: Texto del subtema 4.

101 Línea 102: título del quinto subtema que se

Línea 105 a 108: Texto del subtema 5.

111 Línea 112: título del sexto subtema que se

Línea 114 a 118: Texto del subtema 6.

Para editar el pie de la app realiza lo siguiente:

Figura 14: código HTML del pie de la app

Tabla 7: descripción del código HTML del pie de la app

Línea Elemento Descripción