Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... (5.ª ed.)

Modulos:

Modulo 1

Modulo 1: Introducción a los elementos básicos de HTML, CSS


  • Tema 1. Ejercicio P2P opcional
    • 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 5. Ejercicio P2P opcional

    • 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" width="200"
    height="164">
    </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 6. Ejercicio P2P opcional


    • 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>


  • Entrega P2P obligatoria


    • Construir una página HTML titulada: Secciones y líneas generales de un documento HTML5.

    Utilizar el texto a continuación. Deben emplearse las marcas básicas de HTML y estilos según los contenidos del módulo 1 de este curso.

Modulo 2

Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia


  • Tema 2. Ejercicio P2P opcional


    • 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>


  • Tema 2. Ejercicio P2P opcional

    • 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í:

     
    o la ‘Roboto’ del Sistema Operativo Android que puedes descargar aquí:
     
    https://www.google.com/fonts#UsePlace:use/Collection:Roboto


  • Tema 3. Ejercicio P2P opcional

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


  • Entrega P2P obligatoria

    •  

    Crear una página web personal simulada, que incluya al menos:

    1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.
    2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.
    3. Distintos encabezados.
    4. Uso de caracteres especiales
    5. Incluir, imágenes de tipo bitmap y vectorial.
    6. Incluir algún vídeo.
    7. Incluir bordes redondeados en alguna de sus cajas.
    8. La página debe comenzar con el siguiente encabezamiento:  “Página personal de <nombre y apellido del alumno>”

Modulo 3

Modulo 3: JavaScript: sentencia, expresión, variable, función, objeto y DOM


  • Entrega P2P obligatoria

    • Ampliar la siguiente aplicación Web (muestra la fecha y la hora):

     <!DOCTYPE html><html>
    <head>
      <title>Date</title>
      <meta charset="UTF-8">
    </head>
    <body>
      <h1 id="h1"></h1>
      <h2 id="h2">La fecha y la hora son:</h2>
      <div id="fecha"></div>

     <script type="text/javascript">
      var fecha = new Date();
      var msj;

      if      (fecha.getHours() < 7)  { msj = "Buenas noches";}
      else if (fecha.getHours() < 12) { msj = "Buenos días";}
      else if (fecha.getHours() < 21) { msj = "Buenas tardes";}
      else                                          { msj = "Buenas noches";}

      document.getElementById("h1").innerHTML    = msj;
      document.getElementById("fecha").innerHTML = fecha;
    </script>
    </body>
    </html>

    Incluyendo los siguientes elementos: 
     
    1) El nombre de la persona que hace la entrega debajo del titulo <h1>
    2) Un bloque <div> debajo de la fecha y la hora y las instrucciones JavaScript necesarias para que muestre en dicho bloque el contenido de las siguientes propiedades DOM  en líneas separadas, que comiencen por el nombre de la propiedad(es) mostrada(s):

    a) Contenido de innerHTML de elemento identificado por id="h2"
    b) Contenido de outerHTML de elemento identificado por id="h1"

    c) Contenido de de la propiedad global: location.href
    d) Contenido de de la propiedad global: location
    e) Contenido de de las propiedades globales: screen.width y screen.heigth

Modulo 4

Módulo 4: Booleano, if/else, string, número, DOM, eventos e interacción


  • Entrega P2P obligatoria

    • Añadir a la calculadora el siguiente título:

    “Buenos días, bienvenido a la calculadora de <nombre y apellido de la persona>”

    Integrar además en una sola calculadora los siguientes botones de operaciones matemáticas:

    1) Operaciones unitarias (con un solo operando): 
    1.1) x^2 (número elevado al cuadrado)
    1.2) 1/x (inverso del número)
    1.3) sqrt(x) (raiz cuadrada del número)
    1.4) parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es negativo devuelve -Math.ceil(x))

    2) Operaciones binarias (con dos operandos):
    2.1) +. -. *, / (suma, resta, multiplicación y división)
    2.2) x^y (x elevado a y)

Modulo 5

Módulo 5: Bucles. Arrays. Funciones como objetos. Ámbitos. Cierres. jQuery


  • Entrega P2P obligatoria

    • Modificar la calculadora del ejemplo anterior para que realice todos sus accesos a elementos DOM y toda la gestión de eventos con las funciones de la librería jQuery.

    La calculadora debe mostrar al principio el título:

    “Buenos días, bienvenido a la calculadora de <nombre y apellido de la persona>”

    Integrar además en una sola calculadora los siguientes botones de operaciones matemáticas:

    1) Operaciones unitarias (con un solo operando): 
    1.1) x^2 (número elevado al cuadrado)
    1.2) 1/x (inverso del número)
    1.3) sqrt(x) (raiz cuadrada del número)
    1.4) parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es negativo devuelve -Math.ceil(x))
    1.5) 2^n (potencia n del número 2)
    1.6) n! (factorial del número n: n*(n-1)*(n-2)*...*3*2*1) 

    2) Operaciones binarias (con dos operandos):
    2.1) +. -. *, / (suma, resta, multiplicación y división)
    2.2) x^y (x elevado a y)

    3) Operaciones con n operandos introducidos en formato CSV:
    3.1)  sumatorio(x) (sumatorio de n números)
    3.2) producto(x) (producto de n números)

Modulo 6

Módulo 6: jQuery UI. Interacción con usuario. Bootstrap. Diseño adaptativo


  • Tema 6. Ejercicio P2P opcional

    • 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

  • Entrega P2P obligatoria

    • Integrar en el ejemplo del carrusel realizado con Bootstrap en la última actividad la calculadora desarrollada como entrega P2P final del modulo 5 que utiliza jQuery e incluye todas las teclas de operaciones unitarias, binarias y n-arias.

Modulo 7

Mas información: https://miriadax.net/web/html5mooc/inicio"