Ejercicios 1
Last updated
Last updated
En esta sección de ejercicios vamos a desarrollar la primera parte de una aplicación destinada a la gestión de una biblioteca de un centro educativo.
En primer lugar crea un nuevo proyecto mediante el cli de Ionic, usa la plantilla en blanco (tipo blank) y llama al proyecto "iBiblioteca". Al crear un proyecto de este tipo se incluirá el contenido mínimo de ejemplo dentro de la carpeta www, pero es suficiente para empezar nuestro proyecto.
Partiendo del contenido del fichero index.html crea una pantalla similar a la de la siguiente captura:
Instrucciones:
En la parte superior añade un header con el título "Inicio".
Añade la clase CSS padding a la sección de contenido para dejar un pequeño margen de borde.
Dentro del área de contenido crea dos tarjetas usando el elemento cards con el contenido indicado.
En el botón "Acceso a iBiblioteca" crea un enlace a "ibiblioteca.html".
En el botón "Consultar información" crea un enlace a "author.html".
En este ejercicio vamos a crear un nuevo documento html llamado "author.html" con información sobre el autor. Esta página contendrá una cabecera con el título "Autor" y un botón atrás con un enlace a "index.html". En la sección principal de contenido le añadiremos la clase css padding para dejar un poco de margen de borde e insertaremos una tarjeta usando el elemento tipo card con el siguiente contenido:
Donde:
El botón "Currículum Vítae" apuntará a otra página llamada "curriculum.html".
El botón de correo será un enlace tipo "mailto:gmail@gmail.com".
El botón de Twitter será un enlace normal a una cuenta de Twitter.
El botón de teléfono será un enlace del tipo "tel:900900900".
A continuación tenemos que crear otra página html llamada "curriculum.html". Esta página tendrá una cabecera con el título "Currículum" y un botón atrás que nos llevará a la página "author.html". En la sección de contenido insertaremos un elemento tipo lista con los estudios realizados o los últimos puestos ocupados. Por ejemplo:
Nota: al usar un elemento tipo lista no tendréis que poner padding a la sección de contenido.
En este ejercicio vamos a crear un documento html llamado "ibiblioteca.html" en el que mostraremos un listado de los libros de nuestra biblioteca. Esta página tendrá en primer lugar una cabecera con el título "iBiblioteca" y un botón atrás que nos llevará al "index.html". En la sección de contenido añadiremos un elemento tipo lista para mostrar los libros con un formato similar al de la siguiente imagen:
En la plantilla de estos ejercicios tenéis disponible un XML con los datos de los libros de ejemplo y sus correspondientes imágenes para las portadas.
Esta pantalla de momento no tiene que realizar ninguna acción más, solamente mostrar el listado de libros. En los ejercicios de las siguientes secciones lo completaremos con mas funcionalidad.
