Ejercicios 2
Last updated
Was this helpful?
Last updated
Was this helpful?
En esta sección de ejercicios vamos a continuar con la aplicación anterior y vamos a añadirle los componentes visuales de cada una de las pantallas.
Modifica el contenido de la página home para que tenga un aspecto similar al de la siguiente captura:
Instrucciones:
Comprueba que se aplique el atributo padding a la sección de contenido para dejar un pequeño margen de borde.
Dentro del área de contenido crea dos tarjetas usando la etiqueta ion-cards con el contenido indicado.
El elemento "Acceso a iVideoclub" será un botón que nos permitirá acceder a la página videoclub (de momento no funcional).
El elemento "Consultar información" será un botón para acceder a más información sobre el autor (de momento no funcional).
En este ejercicio vamos definir los componentes de la página "autor", la cual tendrá una tarjeta (etiqueta ion-card) con el siguiente contenido:
Donde:
El elemento "Currículum Vítae" será un botón que nos llevará a otra página para consultar el currículum (no funcional).
El elemento de correo será un enlace tipo "mailto:email@email.com".
El elemento de Twitter será un enlace normal a una cuenta de Twitter.
El elemento con el teléfono será un enlace del tipo "tel:999888777".
Para definir el aspecto de la página "curriculum" insertaremos un elemento tipo lista con los estudios realizados o los últimos puestos ocupados. Por ejemplo:
Al usar un elemento tipo lista no tendréis que poner padding a la sección de contenido.
La página "videoclub" mostrará el listado de las películas de nuestro videoclub. En la sección de contenido añadiremos un elemento tipo lista para mostrar las películas con un formato similar al de la siguiente imagen:
El tipo de lista utilizado es el "Thumbnail List", donde cada elemento de la lista será un "ion-item" con el atributo "button" para indicar que es un elemento pulsable. Este atributo también hará que se muestre una flecha en la parte derecha de cada elemento, sin embargo, esta flecha solamente se mostrará para iOS. Si queremos que la flecha se muestre en todas las plataformas podemos añadir el atributo detail a cada ion-item.
En la plantilla de estos ejercicios tenéis disponible un fichero JSON con los datos de las películas de ejemplo junto a las imágenes correspondientes. De momento podéis utilizar los datos de cuatro o cinco películas de esta lista para maquetar esta vista. Más adelante haremos que los datos se carguen automáticamente.
Esta pantalla de momento no tiene que realizar ninguna acción más, solamente mostrar el listado de películas. En los ejercicios de las siguientes secciones lo completaremos con más funcionalidad.
