Prácticas opcionales

MÓDULO 1

[−]

TEMA 01: Mi primera página WEB.Ir a la práctica

Sobre el archivo facilitado al estudiante llamado "mi_primera_pagina_con imagen.html", añadir estilos css para modificar el color del fondo, de la fuente, la familia tipográfica y el tamaño.

TEMA 05: Estructura HTML.Ir a la práctica

Realiza un esquema sencillo de este documento HTML a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol.


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ejercicio opcional árbol</title>
</head>

<body>
    <header>
        <img src="firefox-os.png" alt="FirefoxOS Logo">
    </header>
    <nav>
        <ul>
            <li>Menú 1</li>
            <li>Menú 2</li>
            <li>Menú 3</li>
        </ul>
    </nav>
    <article>
        <h1>Titular de nivel 1</h1>
        <p>Contenido de la página</p>
    </article>
    <footer>Pie de página</footer>
</body>

</html>

TEMA 06: Herencia CSS.Ir a la práctica

Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Herencia</title>
</head>

<body>
    <div id="caja">

        <header class="cabecera">
            <h1>Cabecera: header</h1>
        </header>

    </div>
</body>

</html>

MÓDULO 2

[−]

TEMA 02a: Herencia CSS.Ir a la práctica

Esta práctica es idéntica a la anterior (Módulo 1 - Tema 6).

TEMA 02b: Estructura CSS.Ir a la práctica

Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente ‘Fira’ del Sistema Operativo de Firefox FiraOpenType, que puedes descargar aquí:

https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/

o la ‘Roboto’ del Sistema Operativo Android que puedes descargar aquí:

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

TEMA 03: Video, audio e imagen.Ir a la práctica

Realiza una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.

MÓDULO 3

[−]

Este módulo no tiene prácticas opcionales.

MÓDULO 4

[−]

Este módulo no tiene prácticas opcionales.

MÓDULO 5

[−]

Este módulo no tiene prácticas opcionales.

MÓDULO 6

[−]

TEMA 06: Diseño responsive.Ir a la práctica

Realizar un menú plegable (collapse) con una de sus opciones 'Music' desplegable (dropdown ) con bootstrap, para las siguientes opciones:

Welcome
Featured
People
Music
Mixes
Videos
Radio

MÓDULO 7

[−]

Este módulo no tiene prácticas opcionales.

MÓDULO 8

[−]

TEMA 01: Ejemplo de un cronómetro.Ir a la práctica

Modificar el ejemplo del cronómetro, quitando los 2 botones: arrancar/parar e inicializar. Añadir en su lugar los siguiente eventos tactiles sobre el body del cronómetro:

Evento tap: sustituira a arrancar/parar.
Evento swipe: sustituira a inicializar.

Utilizar la libreria touch.js para implementar los eventos tactiles.

MÓDULO 9

[−]

TEMA 02: Aplicación geolocalizada con Google Maps.Ir a la práctica

Modificar la aplicación con geolocalización en Google Maps para que:

Cuando se cierra la App, guardar la ruta en una variable de localStorage.
Para que al volver a abrirla reproduzca la ruta anterior, en vez de cargar un mapa limpio, como hace ahora.

Además se debe incluir un boton de inicializar, que cargue un mapa limpio centrado en nuestra posición, colocando un marcador en dicho punto.

Recomendación: guardar la ruta como un array de posiciones:

Donde cada posición es un array de [lat, lng]. Ejemplo: [[-1.040, 11.029], [0.040, 10.029], [5.040, 12.030]]
Guardar el array en localStorage serializado con JSON.stringify
Recuperarlo de localStorage deserializando con JSON.parse

Publicar la App como aplicaciones hosted y packaged en el directorio público de Google Drive, y comprobar que se instala correctamente en el simulador de FirefoxOS.

MÓDULO 10

[−]

Este módulo no tiene prácticas opcionales.