# Ejercicios 2

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.

## Ejercicio 2.1 - Pantalla de inicio de la aplicación <a href="#ejercicio-11-inicio-de-la-aplicacion" id="ejercicio-11-inicio-de-la-aplicacion"></a>

Modifica el contenido de la página `home` para que tenga un aspecto similar al de la siguiente captura:

![](https://2988180318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxy00BDS_2lmgaF%2F-LwrBLXzppTes_uXgKI-%2F-LwrBP3CUdIs-MeY9Lyb%2Fejercicio-1-1.png?generation=1577179029338052\&alt=media)

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).

## Ejercicio 2.2 - Aspecto de la página autor <a href="#ejercicio-12-pagina-del-autor" id="ejercicio-12-pagina-del-autor"></a>

En este ejercicio vamos definir los componentes de la página "`autor`", la cual tendrá una tarjeta (etiqueta `ion-card`) con el siguiente contenido:

![](https://2988180318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxy00BDS_2lmgaF%2F-LwrBLXzppTes_uXgKI-%2F-LwrBP3EQr6BP2-PF4LT%2Fejercicio-1-2.png?generation=1577179030049402\&alt=media)

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`".

## Ejercicio 2.3 - Aspecto de la página currículum <a href="#ejercicio-12-pagina-del-autor" id="ejercicio-12-pagina-del-autor"></a>

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:

![](https://2988180318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxy00BDS_2lmgaF%2F-LwrBLXzppTes_uXgKI-%2F-LwrBP3G1TmSoAKFHY_L%2Fejercicio-1-2b.png?generation=1577179029768877\&alt=media)

> Al usar un elemento tipo lista no tendréis que poner _**padding**_ a la sección de contenido.

## Ejercicio 2.4 - Página listado de películas <a href="#ejercicio-13-listado-de-peliculas" id="ejercicio-13-listado-de-peliculas"></a>

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:

![](https://2988180318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxy00BDS_2lmgaF%2F-LwrBLXzppTes_uXgKI-%2F-LwrBP3Iasv3LgkRbN0b%2Fejercicio-1-3.png?generation=1577179029649174\&alt=media)

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.&#x20;

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.
