Información sobre la tarea
La entrega será en formato ZIP con el código y un video dentro. Leer Entrega y presentación de tareas.
La tarea se calificará con una nota de APTO (10) o NO APTO (0).
Duración actividades obligatorias: 7 horas.
RA4. Integra contenido multimedia en documentos Web valorando su aportación y seleccionando adecuadamente los elementos interactivos.
Actividades
A continuación, se muestran las actividades a realizar.
(Voluntaria) Drag & drop al bloc de notas
En base al ejemplo de Drag & drop del artículo Contenidos web interactivos, prueba a arrastrar el texto a otra aplicación de bloc de notas. ¿Ha funcionado?
Ahora modifica el ejemplo y en vez de usar dataTransfer usa una variable de JavaScript y vuelve a arrastrar el texto a la misma aplicación de bloc de notas. ¿Ha funcionado?. Explica que ha ocurrido.
(Voluntaria) Drag & drop con JSON
En base al ejemplo de Drag & drop del artículo Contenidos web interactivos, modifica que en vez de guardarse el texto del elemento, se guarde un JSON similar al siguiente:
1
2
3
4
{
color: "#FF0000",
texto: "Disco duro"
}
Y al soltar que en el elemento <p>, se muestre la propiedad texto del JSON y que sea del color de la propiedad color del JSON.
Vuelos
Haz un programa similar al siguiente:
Interfaz de la aplicación web de vuelos
De forma que:
- Al arrastrar el icono de “Avión despegando” sobre el texto de “Nº de Vuelos Despegados” se incrementará en 1 el valor
- Al arrastrar el icono de “Avión aterrizando” sobre el texto de “Nº de Vuelos Aterrizados” se incrementará en 1 el valor
- Al arrastrar el icono de “Nº de Vuelos Despegados” sobre el icono de “La papelera” se decrementará en 1 el valor
- Al arrastrar el icono de “Nº de Vuelos Aterrizados” sobre el icono de “La papelera” se decrementará en 1 el valor
(Voluntaria) Introducción rápida a Figma
Prueba los elementos básicos de Figma utilizando esta guía en español: Figma Basics (Español) - Primeros pasos en Figma.
Recuerda que deberás crear una cuenta de usuario en Figma para acceder al tutorial/plantilla.
Interfaz con Figma
Mejora la interfaz de usuario utilizando Figma.
Crea un proyecto con Figma para crear la interfaz de esta página. Es obligatorio seguir la estructura que fija el Atomic Design. Puedes inspirarte en proyectos de la comunidad e incluso usarlos como plantilla.
A modo de contexto, vamos a suponer que la página se usa en la torre de control de una aeropuerto como Castellón y se usa para ir controlando cuantos aviones van despegando y aterrizando.
Recuerda que puedes generar el código CSS directamente con Figma y copiarlo a tu CSS.
Crea solo los átomos, moléculas, organismos, plantillas y páginas que sean necesarios.
Vídeo
Graba un video mostrando la aplicación de vuelos que has desarrollado. El video debe cumplir con los siguientes requisitos:
- El video debe ser lo más corto posible.
- El vídeo debe mostrar el funcionamiento del Drag and Drop de la aplicación en dos o más navegadores.
- Debes explicar brevemente tu código asociado al funcionamiento del Drag and Drop.
- Debes incluir las explicaciones con TU VOZ.
- Debes mostrar tu proyecto en Figma.
- Debes indicar si has utilizado el código generado con Figma y porqué.
(Voluntaria) Ponte a prueba con 100dayscss
Haz click https://100dayscss.com/days/27/ y empieza con tu reto de 100 días para convertirte en todo un experto en CSS.
Si te atascas, recuerda que puedes vers soluciones de otros usuarios que pueden “inspirarte”.
(Voluntaria no recomendada) Formulario
Esta es la tarea del ministerio. La dejo para que la tengas pero considero que no aplica a esta unidad.
Reforma el código formulario.html de un formulario en un código que:
- Siga las recomendaciones del W3C para XHTML. El validador de la W3C te será de ayuda.
- Esté dotado de interactividad empleando CSS.
- Sea usable.