COLEGIO DE ESTUDIOS CIENTIFICOS Y

TECNOLOGICOS DEL ESTADO DE MEXICO

PLANTEL LA PAZ

DESARROLLA APLICACIONES PARA DISPOSITIVOS

MÓVILES

Nombre: Grupo
 Primer Parcial
Instrucciones: Responde de forma clara y completa cada una de las siguientes preguntas
utilizando tus conocimientos sobre aplicaciones móviles y el sistema operativo Android.

I. Conceptos generales sobre aplicaciones móviles

1. ¿Qué es una aplicación para dispositivos móviles?

2. ¿Cuáles son las principales características de una aplicación móvil?
3. ¿Qué ventajas ofrecen las aplicaciones móviles en la vida cotidiana?
4. ¿Qué diferencia existe entre una aplicación móvil y un programa de computadora de
escritorio?
5. ¿Cuáles son los principales tipos de aplicaciones móviles?
6. ¿Qué factores deben considerarse antes de desarrollar una aplicación móvil?
7. ¿Qué importancia tiene la experiencia del usuario (UX) en una aplicación móvil?
8. ¿Qué es una interfaz de usuario (UI) y por qué es importante?
9. ¿Qué elementos debe tener una aplicación móvil para ser fácil de utilizar?
10. ¿Cómo ha influido el crecimiento de los teléfonos inteligentes en el desarrollo de
aplicaciones móviles?
II. Aplicaciones nativas
11. ¿Qué es una aplicación nativa?
12. ¿Qué lenguajes de programación se utilizan comúnmente para desarrollar aplicaciones
nativas en Android?
13. ¿Cuáles son las principales ventajas de las aplicaciones nativas?
14. ¿Cuáles son las principales desventajas de desarrollar aplicaciones nativas?
15. ¿Por qué las aplicaciones nativas suelen ofrecer un mejor rendimiento?
16. ¿Cómo acceden las aplicaciones nativas al hardware del dispositivo?
17. ¿Qué tipos de aplicaciones requieren desarrollarse de forma nativa?
18. ¿Qué diferencias existen entre desarrollar una aplicación nativa para Android y para iOS?
19. ¿Por qué una aplicación nativa necesita ser compilada para un sistema operativo específico?
20. Mencione tres ejemplos de aplicaciones nativas y explique por qué pertenecen a esta
categoría.

III. Aplicaciones web

21. ¿Qué es una aplicación web?
22. ¿Qué tecnologías se utilizan para desarrollar aplicaciones web?
23. ¿Cuál es la diferencia entre una página web y una aplicación web?
24. ¿Cuáles son las ventajas de las aplicaciones web?
25. ¿Qué limitaciones presentan las aplicaciones web respecto a las aplicaciones nativas?
26. ¿Por qué una aplicación web necesita un navegador para ejecutarse?
27. ¿Cómo influye la conexión a Internet en el funcionamiento de una aplicación web?
28. ¿Qué es una Aplicación Web Progresiva (PWA)?
29. ¿Qué ventajas ofrecen las PWA frente a las aplicaciones web tradicionales?
30. Mencione tres ejemplos de aplicaciones web y explique su utilidad.
IV. Aplicaciones híbridas
 31. ¿Qué es una aplicación híbrida?
32. ¿Qué tecnologías se utilizan para desarrollar aplicaciones híbridas?
33. ¿Cuáles son las principales ventajas de una aplicación híbrida?
34. ¿Qué desventajas presentan las aplicaciones híbridas?
35. ¿Cuál es la diferencia entre una aplicación híbrida y una aplicación nativa?
36. ¿Cómo funciona una aplicación híbrida en distintos sistemas operativos?
37. ¿Por qué las aplicaciones híbridas reducen el tiempo de desarrollo?
38. ¿Qué frameworks son utilizados para desarrollar aplicaciones híbridas?
39. ¿En qué casos es recomendable desarrollar una aplicación híbrida?
40. Mencione un ejemplo de aplicación híbrida y explique por qué pertenece a esta categoría.
V. Sistema operativo Android
41. ¿Qué es Android y quién es el responsable de su desarrollo?
42. ¿Cuáles son las principales características del sistema operativo Android?
43. ¿Qué ventajas ofrece Android frente a otros sistemas operativos móviles?
44. ¿Qué es la Google Play Store y cuál es su función?
45. ¿Qué es un archivo APK y para qué sirve?
46. ¿Qué permisos puede solicitar una aplicación Android al usuario?
47. ¿Por qué es importante mantener actualizado el sistema operativo Android?
48. ¿Qué medidas de seguridad ofrece Android para proteger la información del usuario?
49. ¿Qué herramientas proporciona Android para los desarrolladores de aplicaciones móviles?
50. Explica las principales diferencias entre aplicaciones nativas, aplicaciones web y aplicaciones
híbridas, indicando las ventajas y desventajas de cada una.
Ejercicio Practico:

Manipulación de Componentes y Disposiciones en MIT App Inventor

Desarrollar una aplicación móvil sencilla utilizando MIT App Inventor , aplicando el uso de diferentes
componentes visuales , disposiciones (Layouts) y bloques de programación para demostrar el
manejo básico del entorno de desarrollo.

Instrucciones

Diseña una aplicación llamada "Mi Tarjeta Personal" , la cual deberá mostrar información al alumno
y permitirle interactuar con diferentes componentes de la interfaz.

La aplicación deberá contener los siguientes elementos.

Parte 1. Diseño de la interfaz

Configure la pantalla principal con las siguientes características:

• Título de la aplicación.

• Color de fondo personalizado.

• Icono de la aplicación (opcional).

Utiliza al menos las siguientes disposiciones :

 • Una Disposición Vertical como contenedor principal.

• Dos Disposiciones Horizontales para organizar información.

• Una Disposición de Desplazamiento (Scroll Arrangement) para que la información pueda

visualizarse correctamente en pantallas pequeñas.

Parte 2. Componentes obligatorios

La aplicación deberá incluir como mínimo los siguientes componentes:

Componente Cantidad mínima Función

Label 6 Mostrar títulos e información
Button 4 Ejecutar acciones
TextBox 2 Capturar información
Image 1 Mostrar una fotografía o imagen
CheckBox 1 Activar una opción
Switch 1 Encender o apagar una opción
Slider 1 Modificar el tamaño del texto o imagen
ListPicker 1 Seleccionar un color de fondo
Notifier 1 Mostrar mensajes
Horizontal
2 Organizar componentes
Arrangement
Vertical Arrangement 1 Contenedor principal

Parte 3. Programación

Implementa los siguientes comportamientos mediante bloques.

Botón 1. Saludar
Al presionar el botón:
• Leer el nombre escrito por el usuario.
• Mostrar un saludo personalizado mediante un Notificador.
Ejemplo:
Hola Julio, bienvenido a App Inventor.
Botón 2. Mostrar información
Al presionar el botón:
Mostrar en un Label:
• Nombre
• Grupo
• Especialidad
Botón 3. Limpiar
Al presionar el botón:
• Vaciar los TextBox.
• Restablecer el Slider.
• Desactivar el CheckBox.
• Apagar el Switch.
Botón 4. Salir
Mostrar un mensaje indicando:
Gracias por utilizar la aplicación.
Parte 4. Interacción de componentes
Implementa las siguientes acciones.
Caja
Cuando se active:
• Mostrar la fotografía.
Cuando se desactiva:
• Ocultar la fotografía.
Cambiar
Cuando esté activado:
• Cambie el color del texto principal.
Cuando esté apagado:
• Regresar al color original.
Deslizador
Modificar dinámicamente el tamaño del texto de una etiqueta.
Selector de lista
Permitir seleccionar uno de los siguientes colores para cambiar el fondo de la pantalla:
• Azul
• Verde
• Amarillo
• Blanco
• Gris
Parte 5. Personalización
Agrega los siguientes elementos de diseño:
• Imagen relacionada con tecnología o educación.
• Fuente de texto legible.
• Colores armoniosos.
• Componentes correctamente alineados.
• Espaciado uniforme entre los elementos.
Evidencias a entregar
El alumno deberá entregar:
1. Archivo del proyecto (.aia). o Nombre de la práctica.
2. Archivo instalable (.apk). o Objetivo.
3. Captura de pantalla de la interfaz o Descripción breve del
principal. funcionamiento de la
4. Capturas donde se observa el aplicación.
funcionamiento de: o Capturas de pantalla de la
o Saludo personalizado. aplicación.
o Cambio de color. o Conclusión personal (mínimo
o Cambio de tamaño del texto. media cuartilla).
o Mostrar y ocultar la imagen.
5. Documento en PDF que incluya:
 Segundo Parcial
Instrucciones: Responde de manera clara, utilizando tus conocimientos sobre desarrollo de
aplicaciones móviles y diseño de interfaces.

I. Inventor de aplicaciones del MIT

1. ¿Qué es MIT App Inventor y cuál es su propósito principal?
2. ¿Cuáles son las principales características de MIT App Inventor?
3. ¿Qué ventajas ofrece MIT App Inventor para aprender programación?
4. ¿Qué diferencia existe entre el Diseñador (Designer) y el Editor de Bloques (Blocks)?
5. ¿Qué función tienen los componentes visibles en App Inventor?
6. ¿Qué son los componentes no visibles y menciona tres ejemplos?
7. ¿Qué es un evento en App Inventor?
8. ¿Qué son los bloques de programación y cuál es su función?
9. ¿Qué tipos de aplicaciones pueden desarrollarse con App Inventor?
10. ¿Qué requisitos se necesitan para probar una aplicación desarrollada en App Inventor?

II. Diseño de aplicaciones móviles

11. ¿Qué se entiende por diseño de una aplicación móvil?
12. ¿Por qué es importante diseñar la interfaz antes de programar una aplicación?
13. ¿Qué características debe tener una buena interfaz de usuario?
14. ¿Qué significa el concepto de experiencia de usuario (UX)?
15. ¿Qué es la interfaz de usuario (UI)?
16. ¿Cuál es la diferencia entre UX y UI?
17. ¿Qué importancia tiene la organización de los componentes dentro de una aplicación?
18. ¿Cómo influye el uso de colores en el diseño de una aplicación?
19. ¿Por qué es importante mantener un diseño consistente en todas las pantallas?
20. ¿Qué errores comunes deben evitarse al diseñar una aplicación móvil?

III. Estructuras alámbricas

21. ¿Qué es un wireframe?
22. ¿Cuál es el objetivo principal de elaborar un wireframe?
23. ¿Qué elementos suelen incluir un wireframe?
24. ¿Cuál es la diferencia entre un wireframe y un prototipo?
25. ¿En qué etapa del desarrollo de una aplicación se elaboran los wireframes?
26. ¿Qué ventajas ofrece diseñar wireframes antes de comenzar la programación?
27. ¿Qué herramientas pueden utilizarse para crear wireframes?
28. ¿Qué información puede obtener un desarrollador a partir de un wireframe?
29. ¿Por qué los wireframes normalmente no incluyen colores ni diseños detallados?
30. ¿Cómo ayudan los wireframes a mejorar la comunicación entre el cliente y el desarrollador?

IV. Gestos en las aplicaciones móviles

31. ¿Qué son los gestos en una aplicación móvil?
32. ¿Qué función tiene el gesto de tocar (Tap)?
 33. ¿Qué acción realiza el gesto de doble toque?
34. ¿Para qué sirve el gesto de deslizar (Swipe)?
35. ¿Qué función cumple el gesto de pellizcar (Pinch)?
36. ¿Qué es el gesto de mantener presionado (Long Press)?
37. ¿Por qué los gestos mejoran la interacción con una aplicación?
38. ¿Qué problemas pueden surgir si una aplicación utiliza gestos poco intuitivos?
39. ¿Cómo contribuyen los gestos a mejorar la experiencia del usuario?
40. Menciona cinco gestos comunes utilizados en aplicaciones móviles y explica la función de
cada uno.

V. Test de usabilidad y Test de guerrilla

41. ¿Qué es una prueba de usabilidad?
42. ¿Cuál es el objetivo principal de una prueba de usabilidad?
43. ¿Qué aspectos se evalúan durante un test de usabilidad?
44. ¿Qué es una prueba de guerrilla?
45. ¿Cuáles son las principales características del test de guerrilla?
46. ¿Qué ventajas ofrece realizar un test de guerrilla?
47. ¿Qué diferencias existen entre un test de usabilidad tradicional y un test de guerrilla?
48. ¿Por qué es importante realizar pruebas con usuarios antes de publicar una aplicación?
49. ¿Cómo ayudan los resultados de las pruebas de usabilidad a mejorar una aplicación?
50. Describe las principales etapas del desarrollo de una aplicación móvil, desde la planificación
hasta su publicación, indicando en qué momento se utilizan los wireframes y las pruebas de
usabilidad.

Práctica No. 2
Desarrollo de un juego "Aplasta Bichos" en MIT App Inventor
Asignatura: Desarrollo de Aplicaciones para Dispositivos Móviles

Objetivo
Desarrollar un juego interactivo en MIT App Inventor donde el usuario deberá tocar un insecto
(bicho) que aparecerá aleatoriamente en la pantalla para obtener puntos antes de que el tiempo
termine. Durante la práctica el alumno aplicó el uso de componentes, imágenes, temporizadores,
variables, eventos, procedimientos y programación mediante bloques.

Situación de aprendizaje
Una empresa desarrolladora de videojuegos desea lanzar un minijuego para dispositivos Android. El
juego consiste en eliminar la mayor cantidad posible de bichos antes de que finalice el tiempo. Tú
formarás parte del equipo de desarrollo y deberás diseñar y programar el juego utilizando MIT App
Inventor .

Instrucciones
Desarrolla una aplicación llamada:
Aplasta Bichos
El objetivo del juego será conseguir la mayor cantidad de puntos posibles antes de que termine el
tiempo.

Requisitos de la interfaz
La aplicación deberá incluir, como mínimo, los siguientes componentes:
Componente Cantidad
Lienzo 1
ImageSprite (Bicho) 1
Etiqueta (Puntaje) 1
Label (Tiempo restante) 1
Botón (Iniciar juego) 1
Botón (Reiniciar) 1
Reloj 2
Notificador 1
Imagen de fondo (opcional) 1

Funcionamiento del juego

1. Pantalla inicial
Al abrir la aplicación deberá mostrarse:
• Título del juego.
• Puntaje inicial en 0.
• Tiempo restante en 30 segundos .
• Botón Iniciar Juego .

2. Inicio del juego

Cuando el presione usuario Iniciar Juego deberá ocurrir lo siguiente:
• El puntaje se reinicia en cero.
• El cronómetro comienza a contar regresivamente.
• El bicho aparece en una posición aleatoria del Canvas.
• El juego queda listo para comenzar.

3. Movimiento del bicho

Cada cierto intervalo de tiempo (por ejemplo, cada 800 ms o 1 segundo):
• El bicho deberá cambiar automáticamente a una posición aleatoria dentro del Canvas.
• Nunca deberás salir de los límites del área de juego.

4. Al aplastar el bicho
Cada vez que el jugador toca correctamente el bicho:
• El puntaje aumentará en 1 punto .
• El bicho cambiará inmediatamente de posición.
• Puede reproducirse un sonido (opcional).
5. Cronómetro
El tiempo deberá disminuir segundo a segundo.
Cuando llegue a 0 :
• El juego finalizará.
• El bicho dejará de moverse.
• Se mostrará un mensaje indicando:
¡Juego terminado!
También deberá mostrar el puntaje obtenido.

6. Botón Reiniciar
Al presionar este botón deberá:
• Reiniciar el puntaje.
• Restablecer el tiempo.
• Coloque nuevamente el bicho en una posición aleatoria.
• Esperar nuevamente a que el jugador presione Iniciar Juego.

Programación requerida
La práctica deberá utilizar obligatoriamente:
• Variables globales.
• Eventos.
• Procedimientos.
• Operadores matemáticos.
• Condicionales.
• Temporizadores (Reloj).
• Generación de números aleatorios.
• Manipulación de sprites.
• Actualización dinámica de Etiquetas.

Mejoras opcionales (Puntos extra)

El alumno podrá agregar una o varias de las siguientes mejoras:
• Música de fondo.
• Efectos de sonido.
• Vidas.
• Diferentes tipos de bichos.
• Niveles de dificultad.
• Incrementar la velocidad del bicho conforme avanza el tiempo.
• Pantalla de bienvenida.
• Pantalla de "Game Over".
• Botón de pausa.
• Guarde el registro utilizando TinyDB.
• Animaciones adicionales.

Evidencias a entregar
Cada alumno deberá entregar:
1. Archivo del proyecto (.aia).
2. Archivo instalable (.apk).
3. Capturas de pantalla de:
o Pantalla inicial.
o Juego en ejecución.
o Pantalla de juego terminado.
4. Diagrama o captura de los bloques principales del programa.
5. Documento en PDF que incluya:
o Portada.
o Objetivo.
o Descripción del funcionamiento del juego.
o Capturas de pantalla.
o Explicación breve de los componentes utilizados.
o Conclusiones personales (mínimo media cuartilla).
 Tercer Parcial
Instrucciones: Responda de forma clara y completa cada una de las siguientes preguntas.
Fundamenta tus respuestas con ejemplos cuando sea necesario.

I. HTML5
1. ¿Qué es HTML5 y cuál es su función en el desarrollo de páginas web?
2. ¿Cuáles son las principales características de HTML5?
3. ¿Qué diferencia existe entre HTML y HTML5?
4. ¿Qué es una etiqueta en HTML?
5. ¿Cuál es la estructura básica de un documento HTML5?
6. ¿Qué función cumple la etiqueta <head>?
7. ¿Cuál es el propósito de la etiqueta <body>?
8. ¿Qué información se coloca normalmente dentro de la etiqueta <title>?
9. ¿Qué diferencia existe entre un elemento y un atributo en HTML?
10. ¿Para qué se utilizan los encabezados ( <h1>a <h6>)?
11. ¿Cuál es la función de la etiqueta <p>?
12. ¿Qué diferencia existe entre listas ordenadas y listas desordenadas?
13. ¿Cómo se inserta una imagen en una página web utilizando HTML5?
14. ¿Qué función tiene la etiqueta <a>y cómo se utiliza?
15. ¿Qué ventajas ofrecen las etiquetas semánticas de HTML5 frente a las versiones anteriores?
16. ¿Qué función cumple las etiquetas <header>, <nav>, <main>, <section>, <article>, <aside>y
<footer>?
17. ¿Qué es un formulario en HTML5 y para qué se utiliza?
18. ¿Qué tipos de campos de entrada (input) ofrece HTML5?
19. ¿Qué ventajas ofrecen las nuevas validaciones de formularios en HTML5?
20. ¿Por qué es importante escribir código HTML correctamente estructurado?

II. CSS
21. ¿Qué es CSS y cuál es su función en una página web?
22. ¿Qué diferencia existe entre HTML y CSS?
23. ¿Cuáles son las tres formas de aplicar CSS a una página web?
24. ¿Qué ventajas ofrece utilizar una hoja de estilos externa?
25. ¿Qué es un selector en CSS?
26. ¿Cuál es la diferencia entre un selector de etiqueta, de clase y de identificador (ID)?
27. ¿Qué propiedades de CSS permiten modificar el color de un elemento?
28. ¿Cómo se puede cambiar el tipo y tamaño de la fuente mediante CSS?
29. ¿Qué es el modelo de cajas?
30. ¿Qué función tienen las propiedades marginy padding?
31. ¿Cuál es la diferencia entre marginy padding?
32. ¿Qué propiedad permite cambiar el color de fondo de un elemento?
33. ¿Cómo se puede centrar un elemento utilizando CSS?
34. ¿Qué es Flexbox y cuál es su utilidad?
35. ¿Qué ventajas ofrece CSS para el diseño de sitios web modernos?
III. Páginas web responsivas
36. ¿Qué es una página web responsiva?
37. ¿Por qué es importante que un sitio web sea responsivo?
38. ¿Qué diferencia existe entre una página web adaptable y una página web responsiva?
39. ¿Qué es el diseño adaptable a diferentes dispositivos (Responsive Web Design)?
40. ¿Qué función cumple la etiqueta <meta name="viewport">?
41. ¿Qué son las Media Queries y para qué se utilizan?
42. ¿Cómo ayudan las Media Queries a mejorar la experiencia del usuario?
43. ¿Qué ventajas ofrece utilizar porcentajes y unidades relativas en lugar de medidas fijas?
44. ¿Qué importancia tiene el uso de imágenes responsivas en un sitio web?
45. ¿Qué problemas pueden presentarse si una página web no es responsiva?
46. ¿Qué dispositivos deben considerarse al diseñar una página web responsable?
47. ¿Cómo contribuye Flexbox al desarrollo de páginas web responsivas?
48. ¿Qué buenas prácticas deben seguirse al diseñar una página web para dispositivos móviles?
49. ¿Qué herramientas permiten comprobar si una página web es responsiva?
50. Describe el proceso general para desarrollar una página web responsiva utilizando HTML5 y
CSS, desde la planificación del diseño hasta las pruebas finales en distintos dispositivos.

Desarrollo de un Micrositio Web Responsivo con HTML5 y CSS

Asignatura: Desarrollo de Páginas Web
Unidad: Diseño Web Responsivo
Duración estimada: 6 a 8 horas
Modalidad: Individual

Objetivo
Diseñar y desarrollar un micrositio web responsivo utilizando HTML5 y CSS3 , aplicando los
principios del diseño adaptable para que el sitio pueda visualizarse correctamente en computadoras,
tabletas y teléfonos móviles.

Situación de aprendizaje
Una organización desea publicar información sobre un tema de interés para el público mediante un
micrositio web. Como desarrollador web, deberás crear un sitio atractivo, organizado y adaptable a
diferentes dispositivos, utilizando únicamente HTML5 y CSS3 (no se permite el uso de frameworks
como Bootstrap).

Instrucciones
Desarrolla un micrositio web sobre cualquier temática de tu elección . Algunos ejemplos hijo:
• Turismo de una ciudad o estado.
• Animales en peligro de extinción.
• Videojuegos.
• Cine.
• Deportes.
 • Música.
• Inteligencia Artificial.
• Ciberseguridad.
• Medio ambiente.
• Gastronomía.
• Tecnología.
• Educación.
• Historia.
• Cultura.
• Salud.
Puedes elegir cualquier otro tema siempre que sea apropiado y cuente con suficiente información.

Requisitos del proyecto

1. Estructura del sitio
El micrositio deberá estar formado por un mínimo de cinco páginas HTML enlazadas entre sí.
Ejemplo:
• Inicio
• Acerca del tema
• Galería
• Noticias o Curiosidades
• Contacto

2. Diseño responsivo
El sitio deberá adaptarse correctamente a diferentes tamaños de pantalla.
Como mínimo deberá visualizarse adecuadamente en:
• Computadora
• Tableta
• Teléfono móvil
Para ello deberá utilizar:
• Consultas de los medios.
• Unidades relativas (%, rem, em, vw, vh).
• Flexbox y/o CSS Grid.
• Imágenes responsivas.
• Ventana gráfica meta.

3. HTML5
Utiliza etiquetas semánticas como:
• <header>
• <nav>
• <main>
• <section>
• <article>
• <aside>(opcional)
• <footer>
El código deberá estar correctamente sangrado y comentado.

4. CSS3
El diseño deberá incluir como mínimo:
• Hoja de estilos externa.
• Paleta de colores uniforme.
• Tipografía legible.
• Menú de navegación.
• Botones con efectos hover .
• Bordes redondeados.
• Sombras.
• Espacios adecuados.
• Uso de Flexbox y/o Grid.
• Transiciones sencillas.

5. Contenido
El micrositio deberá incluir como mínimo:
• Portada.
• Introducción.
• Desarrollo del tema.
• Imágenes relacionadas.
• Tabla informativa.
• Lista ordenada.
• Lista desordenada.
• Hipervínculos internos.
• Hipervínculos externos.
• Pie de página con información del autor.

6. Formulario
El sitio deberá incluir una página de contacto con un formulario que contenga, como mínimo:
• Nombre.
• Correo electrónico.
• Asunto.
• Mensaje.
• Botón Enviar.
• Botón Limpiar.
Utiliza los tipos de entrada de HTML5 y validaciones básicas ( required, email, etc.).

7. Navegación
Todas las páginas deberán estar conectadas mediante un menú de navegación funcional.
El menú deberá permanecer con el mismo diseño en todas las páginas.

8. Imágenes
Agregar como mínimo:
 • 8 imágenes.
• Todas optimizadas.
• Con atributo alt .
• Ajustadas correctamente al tamaño de la pantalla.

9. Diseño visual
El sitio deberá presentar:
• Diseño limpio.
• Buena distribución de información.
• Colores armoniosos.
• Tipografía uniforme.
• Icono o logotipo.
• Director de Banner.
• Diseño atractivo.
11. Informe Final
• Portada.
• Objetivo del proyecto.
• Descripción del tema elegido.
• Capturas de pantalla del sitio en vista de computadora, tableta y teléfono móvil.
• Explicación de las principales etiquetas HTML5 utilizadas.
• Explicación de las principales reglas CSS implementadas.
• Conclusiones personales (mínimo una cuartilla).