Ayuda ejercicios unidad 24: jQuery Mobile


Ejercicio 1: Sitio con jQuery Mobile

Apartado 1.

  1. Define un sitio nuevo con el menú Sitio, opción Nuevo sitio... Recuerda que para el ejercicio es suficiente con que definas la carpeta que contendrá el sitio.
  2. Crea un archivo Nuevo. Asegúrate que el tipo de archivo sea HTML5 y no contenga ningún diseño.
  3. Utiliza el menú Insertar, jQuery Mobile y luego la opción Página. Después haz clic bajo la estructura de la página en la vista Diseño y repite el procedimiento otras cuatro veces para un total de cinco páginas.
  4. Graba el archivo en la carpeta del sitio con el nombre index.html
  5. En la primera página #page, debes modificar el encabezado por Parque Nacional Sierra Bicuerca
  6. En donde dice Contenido, borra la palabra e inserta la imagen panoramica.jpg. Pulsa ENTER.
  7. Utiliza el menú Insertar, jQuery Mobile y luego la opción Vista de Lista con cuatro elementos. Conviértelos en el menú de navegación hacia las demás páginas.
  8. En el pie de página coloca la leyenda "(La imagen del título pertenece a AMagill y se distribuye bajo licencia CreativeCommons)" Con las ligas correspondientes. Recuerda que puedes añadir estilos CSS en línea personalizados para cambiar el tamaño y el color de la fuente.
  9. En la segunda página cambia la palabra Encabezado por Bienvenidos. En la sección Contenido copia y pega el texto de la página Parque Natural.
  10. En el pie de página de la segunda a la última página debes borrar la palabra Pie e insertar un botón con un icono de inicio con un vínculo a la página principal.
  11. En la tercera página, cambia el encabezado por la palabra Especies.
  12. Borra la palabra Contenido y escribe "Estos son algunos de los habitantes del parque:", pulsa ENTER y usa la opción de menú Insertar, jQuery Mobile, opción Bloque que puede contraerse.
  13. En el encabezado de cada sección del bloque escribe el nombre de cada animal (Nutria, Buitre Leonado y Gineta), en la sección Contenido respectivo copia el texto de la página e inserta la fotografía que corresponda.
  14. En la página cuatro cambia el Encabezado por el título Reservas.
  15. Inserta un Bloque que puede contraerse. En la primera sección del bloque escribe: Visitas con guía e inserta dos cuadrículas de diseño, uno para los horarios y otro para las tarifas.
  16. En el segundo bloque escribe en el encabezado "Aula Educativa (sólo grupos)" e inserta una cuadrícula de Diseño. Recuerda que puedes crear estilos en línea CSS para añadir bordes y colores de fondo.
  17. En el tercer bloque de esa página cambia el encabezado por la palabra Contacto. Añade la leyenda "Si estás pensando visitar el parque con un grupo, por favor, rellena este formulario:" y pulsa ENTER.
  18. Es importante que añadas primero el cuerpo del formulario (etiquetas <form></form> utilizando la opción de menú Insertar, Formulario y luego Formulario.
  19. El formulario de contacto se compone de los siguientes elementos de jQuery Mobile en orden: Texto, Correo electrónico, Fecha, Regulador, Botón de opción (con 4 elementos), Casilla de verificación, Área de texto y botón Enviar.
  20. Modifica las etiquetas de cada elemento por las correspondientes del formulario del sitio Parque Natural.
  21. En la última página modifica el encabezado por la palabra Galería.
  22. Inserta en la sección de contenido un Bloque que puede contraerse y en sus respectivas secciones de contenido inserta las fotografías que desees.
  23. Graba el sitio y pruébalo con tu navegador.

 

 


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.