Curso Online de JavaScript, HTML5 y CSS3

Temario

Módulo 1 Presentación de JavaScript y programación a partir de algoritmos

1. Presentación del lenguaje JavaScript
   1. 1. Definición y breve historia
   2. 2. Requisitos previos para un aprendizaje sencillo del lenguaje
   3. 3. Herramientas necesarias
   4. 4. Posicionamiento de JavaScript respecto a otras tecnologías de desarrollo web (HTML, CSS, PHP…)
2. Desarrollo a partir de algoritmos
   1. 1. Presentación de la noción de algoritmo
   2. 2. Noción de variable
      1. 2.1 Presentación de las nociones de variable y tipo
      2. 2.2 Tipos básicos y operaciones asociadas
      3. 2.3 Interés de los tipos
      4. 2.4 Uso de variables en las expresiones
      5. 2.5 Tabla resumen de los operadores
   3. 3. Manipulación de las variables
      1. 3.1 Nomenclatura de las variables
      2. 3.2 Asignación
      3. 3.3 Ejercicio n.°1: Inversión del contenido de dos variables en memoria
      4. 3.4 Visualización de los resultados
      5. 3.5 Ejercicio n.°2: Superficies de círculos
      6. 3.6 Introducción por el teclado
      7. 3.7 Ejercicio n.°3: Superficie y volumen de una esfera
   4. 4. Funciones predefinidas
      1. 4.1 Ejercicio n.°4: Visualización de la longitud de un nombre
      2. 4.2 Ejercicio n.°5: Determinación de iniciales
   5. 5. Procesamientos condicionados
      1. 5.1 Ejercicio n.°6: Polinomio de segundo grado
      2. 5.2 Ejercicio n.°7: Etiqueta del mes sin cifrar
      3. 5.3 Ejercicio n.°8: Etiqueta del mes sin cifrar (Siguiente … Finsiguiente)
   6. 6. Estructuras iterativas
      1. 6.1 Concepto de iteraciones
      2. 6.2 Estructuras iterativas básicas
      3. 6.3 Ejercicio n.°9: Media de 10 números
      4. 6.4 Ejercicio n.°10: Media de una serie de n números.
      5. 6.5 Ejercicio n.°11: El común divisor más grande, por el método de las divisiones sucesivas
      6. 6.6 Estructura iterativa
      7. 6.7 Ejercicio n.°12: Cálculo de la media de 10 números
      8. 6.8 Ejercicio n.°13: Deducir el número de vocales de una palabra
   7. 7. Tabla de dimensión única
      1. 7.1 Ejercicio n.°14: Contar los números pares en una tabla
   8. 8. Tabla con dimensiones múltiples
      1. 8.1 Ejercicio n.°15: Minihoja de cálculo
   9. 9. Procedimientos, funciones y paso de argumentos
      1. 9.1 Los objetivos
      2. 9.2 Los procedimientos
      3. 9.3 Ejercicio n.°16: Llamada de un procedimiento con paso de argumentos
      4. 9.4 Las funciones
      5. 9.5 Ejercicio n.°17: Llamada de una función con paso de argumentos

Módulo 2 Comenzar bien con JavaScript

1. Conceptos principales del lenguaje JavaScript
   1. 1. Metodología de aprendizaje
   2. 2. Variables (declaración y tipado).
      1. 2.1 Ejercicio n.°2: Superficies de círculos
      2. 2.2 Ejercicio n.°3: Superficie y volumen de una esfera
      3. 2.3 Ejercicio n.°4: Número de letras de una palabra
      4. 2.4 Ejercicio n.°5: Determinación de las iniciales
2. Procesamiento condicionado
   1. 1. Presentación de la sintaxis
   2. 2. Ejemplos
      1. 2.1 Ejercicio n.°6: Polinomio de segundo grado
      2. 2.2 Ejercicio n.°8: Impresión de la etiqueta de un mes
3. Procesamiento iterativo (bucles)
   1. 1. Presentación de la sintaxis de los bucles
   2. 2. Bucle while
      1. 2.1 Sintaxis
      2. 2.2 Ejercicio n.°9: Media de 10 números que se introducirán con el teclado
      3. 2.3 Ejercicio n.°10: Media de una serie de n números que se introducirán con el teclado
   3. 3. Bucle do while
      1. 3.1 Sintaxis
      2. 3.2 Ejercicio n.°11: Media de una serie de n números que se introducirán con el teclado
   4. 4. Bucle for
      1. 4.1 Sintaxis
      2. 4.2 Ejercicio n.°12: Media de una serie de 10 números que se introducirán con el teclado
      3. 4.3 Ejercicio n.°13: Contar el número de vocales en una palabra
4. Tablas
   1. 1. Tablas de dimensión única
   2. 1.1 Sintaxis
   3. 1.2 Ejercicio n.°14: Contar los números pares en una tabla
   4. 2. Tablas de dimensiones múltiples
   5. 2.1 Sintaxis
   6. 2.2 Ejercicio n.°15: Minihoja de cálculo
5. Procedimientos y funciones
   1. 1. Los procedimientos
      1. 1.1 Sintaxis
      2. 1.2 Ejercicio n.°16: Llamada de un procedimiento con argumentos
   2. 2. Las funciones 118
      1. 2.1 Sintaxis 118
      2. 2.2 Ejercicio n.°17: Llamada de una función con argumentos

Módulo 3 Aproximación a la POO en JavaScript

1. Enfoque orientado a “objetos” en JavaScript
   1. 1. Introducción
   2. 2. Programación orientada a objetos a través de ejemplos
      1. 2.1 Secuencia 1: Declaración de los objetos JavaScript de manera “Inline”
      2. 2.2 Secuencia 2: Creación de objetos JavaScript con un constructor
      3. 2.3 Secuencia 3: Variables privadas en una instancia de objeto
      4. 2.4 Secuencia 4: Paso de argumento(s) a un constructor
      5. 2.5 Secuencia 5: No compartición de los métodos por las instancias de objetos
      6. 2.6 Secuencia 6: Noción de prototipo
      7. 2.7 Secuencia 7: Sobrecarga de un método
      8. 2.8 Secuencia 8: Extensión de un prototipo
      9. 2.9 Secuencia 9: Mecanismo de la herencia
      10. 2.10 Secuencia 10: Límite de la herencia de la secuencia
      11. 2.11 Secuencia 11: Un segundo límite a nuestra herencia
2. Principales objetos en JavaScript
   1. 1. Presentación
   2. 2. Los objetos básicos
      1. 2.1 Objeto Array
      2. 2.2 Objeto Date
      3. 2.3 Objeto Math
      4. 2.4 Objeto window
      5. 2.5 Objeto navigator
      6. 2.6 Objeto String
3. Las novedades de EcmaScript
   1. 1. Presentación general
   2. 2. Aportaciones a nivel de la Programación Orientada a Objetos
      1. 2.1 Noción de prototipo
      2. 2.2 Sobrecarga de un método
      3. 2.3 Extensión de prototipo
      4. 2.4 Herencia
      5. 2.5 Primer ejemplo POO en EcmaScript 6
      6. 2.6 Herencia en EcmaScript
      7. 2.7 Métodos getter, setter y static en EcmaScript 6
   3. 3. Funciones flecha (arrow functions)
      1. 3.1 Ventajas de las funciones flecha
      2. 3.2 Ejemplo
   4. 4. Estructuras Map, Set y bucle for of
      1. 4.1 Presentación general
      2. 4.2 Ejemplo
   5. 5. Ámbito de las variables (var o let)
      1. 5.1 Presentación general
      2. 5.2 Ejemplo
   6. 6. Promesas (promise).
      1. 6.1 Presentación general
      2. 6.2 Ejemplo
   7. 7. Desestructuración
      1. 7.1 Presentación general
      2. 7.2 Ejemplo

Módulo 4 Gestión de formularios y modelo DOM

1. Utilizar formularios para introducir datos
   1. 1. Controles en la entrada de datos con JavaScript
      1. 1.1 Control de entrada de datos en un campo de texto
      2. 1.2 Control del tipo numérico de una entrada de datos en un campo de texto
      3. 1.3 Control de caracteres alfabéticos de una entrada de datos en un campo de texto
      4. 1.4 Control de caracteres alfabéticos y numéricos de una entrada de datos en un campo de texto
      5. 1.5 Control de la longitud de una entrada de datos en un campo de texto
      6. 1.6 Control de entrada de datos en una dirección de e-mail
      7. 1.7 Control de la selección de una lista desplegable (versión simplificada)
      8. 1.8 Control de la selección en una lista desplegable (versión extendida)
      9. 1.9 Control de selección con un botón de radio
      10. 1.10 Control de la selección con casillas de selección
2. Modelo DOM
   1. 1. Introducción
      1. 1.1 Definición del DOM
      2. 1.2 Definición de la arborescencia
   2. 2. Aprendizaje del modelo DOM
      1. 2.1 Script “Hello World”
      2. 2.2 Diferencia entre write y writeln
      3. 2.3 Gestión de los enlaces hipertextos
      4. 2.4 Gestión de las imágenes
      5. 2.5 Gestión de formularios y de sus etiquetas
      6. 2.6 Gestión de los anchors
      7. 2.7 Gestión de la navegación entre páginas web
      8. 2.8 Visualización de las características generales del documento .
      9. 2.9 Gestión de los botones en los formularios
      10. 2.10 Gestión de las tablas (etiqueta HTML table)
3. Exploración de flujo XML vía DOM
   1. 1. Noción de flujo XML
   2. 2. Ejemplos
      1. 2.1 Ejemplo 1: Visualización del contenido de un e-mail codificado en XML
      2. 2.2 Ejemplo 2: Lista de marcas de coches (archivo coches.xml)
      3. 2.3 Ejemplo 3: Lista de las marcas de coches con un bucle
      4. 2.4 Ejemplo 4: Lista de nodos conectados a la raíz
      5. 2.5 Ejemplo 5: Lista de los campos (nodos) de cada coche
      6. 2.6 Ejemplo 6: Sustitución de un valor de nodo
      7. 2.7 Ejemplo 7: Acceso a los atributos
      8. 2.8 Ejemplo 8: Acceso a un nodo padre
      9. 2.9 Ejemplo 9: Recorrer hacia atrás los nodos
      10. 2.10 Ejemplo 10: Sustitución sistemática de un valor de atributo .
      11. 2.11 Ejemplo 11: Conversión XML en HTML
      12. 2.12 Ejemplo 12: Eliminación de un nodo en un flujo XML

Módulo 5 Cookies y mecanismos de persistencia

1. Gestión de las cookies en JavaScript
   1. 1. Noción de cookie
   2. 2. Escritura de una cookie
   3. 3. Lectura de una cookie
   4. 4. Eliminación de una cookie
2. Almacenamiento local de datos
   1. 1. Presentación general de las soluciones
   2. 1.1 Almacenamiento con sessionStorage
   3. 1.2 Almacenamiento con localStorage
   4. 2. Implementación de Web Storage a través de ejemplos
   5. 2.1 Ejemplo 1: Almacenamiento por localStorage de cadenas de caracteres
   6. 2.2 Ejemplo 2: Almacenamiento en el localStorage de un objeto JavaScript
3. Almacenamiento remoto: formato XML
   1. 1. Presentación general de la solución
   2. 2. Implementación del almacenamiento remoto a través de ejemplos
   3. 2.1 Ejemplo 1: Acceso Ajax sobre BDD MySQL (lista de los coches)
   4. 2.2 Ejemplo 2: Acceso MySQL vía Ajax
4. Almacenamiento remoto: formato JSON
   1. 1. Presentación general de la solución
   2. 2. Implementación del almacenamiento remoto a través de ejemplos
   3. 2.1 Ejemplo 1: Presentación del sistema de notación JSON
   4. 2.2 Ejemplo 2: Lectura de un archivo JSON con XMLHttpRequest
   5. 2.3 Ejemplo 3: Lectura de un archivo JSON con XMLHttpRequest y un script servidor en PHP
   6. 2.4 Ejemplo 4: Lectura de una tabla MySQL con XMLHttpRequest (servidor PHP y flujo JSON)
   7. 2.5 Ejemplo 5: Recodificación del ejemplo 4 con una lista desplegable

Módulo 6 Geolocalización, diseño y gráficos de gestión

1. Geolocalización
   1. 1. Principio de la geolocalización 429
   2. 2. Ejemplos de aplicaciones de geolocalización 430
      1. 2.1 Ejemplo 1: Visualización del mapa del centro de España. 430
      2. 2.2 Ejemplo 2: Visualización del mapa del centro de España (marcador) 437
      3. 2.3 Ejemplo 3: Visualización del mapa del centro de España (marcador y círculos de población) 441
      4. 2.4 Ejemplo 4: Visualización del mapa del centro de España (información meteorológica) 445
      5. 2.5 Ejemplo 5: Visualización del mapa de Madrid (con fotos de los sitios importantes) 452
      6. 2.6 Ejemplo 6: Visualización del mapa de Madrid (Street View) . 454
2. Diseño (HTML5 CANVAS)
   1. 1. Presentación del API HTML5 CANVAS 461
   2. 2. Ejemplos de aplicaciones del elemento <canvas> 462
      1. 2.1 Ejemplo 1: Dibujar un cuadrado sencillo 462
      2. 2.2 Ejemplo 2: Dibujar una matriz de TicTacToe 466
      3. 2.3 Posibles mejoras en el conjunto del TicTacToe 473
3. Gráficos de gestión
   1. 1. Diferentes soluciones de diseño de gráficos de gestión 475
   2. 2. Ejemplos de uso de los API de Google Charts 476
      1. 2.1 Ejemplo 1: Dibujar un histograma 476
      2. 2.2 Ejemplo 2: Representación de un gráfico de sectores 481
      3. 2.3 Ejemplo 3: Representación de un mapa 484

Módulo 7 Frameworks JavaScript

1. Posicionamiento de los frameworks JavaScript
   1. 1. Presentación general de los frameworks JavaScript 489
   2. 1.1 Frameworks “frontend” 489
   3. 1.2 Frameworks “backend” 490
   4. 1.3 Soluciones de desarrollo “híbridas” 490
   5. 2. Los frameworks Node.js, Svelte, React y React Native 491
2. Instalación de Node.js
   1. 1. Presentación del framework Node.js 493
   2. 2. Instalación del framework Node.js 494
3. Framework Svelte
   1. 1. Presentación del framework Svelte 503
   2. 2. Sitio web svelte.dev 504
   3. 3. Creación local de un proyecto Svelte 506
   4. 4. Instalación de Microsoft Visual Studio Code 508
   5. 5. Proyectos Svelte 509
      1. 5.1 “eni_svelte_01”- Primera aplicación 509
      2. 5.2 “eni_svelte_02”- Importancia de los comentarios 516
      3. 5.3 “eni_svelte_03”- Implementar una imagen 518
      4. 5.4 “eni_svelte_04”- Integración de las etiquetas HTML 520
      5. 5.5 “eni_svelte_05”- El primer botón 522
      6. 5.6 “eni_svelte_06”- La función de $ en las fórmulas 524
      7. 5.7 “eni_svelte_07”- Campos de entrada 527
      8. 5.8 “eni_svelte_08”- Introducir datos con el cursor 529
      9. 5.9 “eni_svelte_09”- Casillas de selección 532
      10. 5.10 “eni_svelte_10”- Botones “de opción” 535
      11. 5.11 “eni_svelte_11”- Lista 538
      12. 5.12 “eni_svelte_12”- Lista y botones “de opción” 540
      13. 5.13 “eni_svelte_13”- Botones Svelte Materialify 542
      14. 5.14 “eni_svelte_14”- Lista desplegable Svelte Materialify 545
      15. 5.15 “eni_svelte_15”- Switches Svelte Materialify 547
      16. 5.16 “eni_svelte_16”- Primera aplicación Sapper-MySQL 550
      17. 5.17 “eni_svelte_17”- Lista desplegable Sapper-MySQL 566
      18. 5.18 “eni_svelte_18”- Añadir un deporte usando Sapper-MySQL 568
      19. 5.19 “eni_svelte_19”- Actualización de Sapper-MySQL 576
      20. 5.20 “eni_svelte_20”- Eliminación Sapper-MySQL 582
4. Framework React
   1. 1. Presentación de React 589
   2. 2. Creación local de un proyecto React 590
   3. 3. Proyectos React básicos 591
      1. 3.1 “eni_react_bases_01” 592
      2. 3.2 “eni_react_bases_02” 598
      3. 3.3 “eni_react_bases_03” 600
      4. 3.4 “eni_react_bases_04” 603
      5. 3.5 “eni_react_bases_05” 607
      6. 3.6 “eni_react_bases_06” 611
   4. 4. Las props React 614
      1. 4.1 “eni_react_props_01” 615
      2. 4.2 “eni_react_props_02” 617
      3. 4.3 “eni_react_props_03” 619
   5. 5. Las librerías de terceros para React 622
      1. 5.1 “eni_react_material-ui_table_01” 623
      2. 5.2 “eni_react_material-ui_table_02” 626
      3. 5.3 “eni_react_material-ui_table_03” 630
      4. 5.4 “eni_react_recharts_01” 634
      5. 5.5 “eni_react_recharts_02” 638
      6. 5.6 “eni_react_recharts_03” 641
   6. 6. Lectura de archivos JSON en React 644
      1. 6.1 Diferentes tipos de flujos JSON 644
      2. 6.2 “eni_react_lectura_json_local” 645
   7. 7. Interacciones con un servidor PHP-MySQL 654
      1. 7.1 “eni_react_php_mysql_01” 655
      2. 7.2 “eni_react_php_mysql_02” 663
      3. 7.3 “eni_react_php_mysql_03” 680
      4. 7.4 “eni_react_php_mysql_04” 684
      5. 7.5 “eni_react_php_mysql_05” 695
   8. 8. La navegación en React (enrutamiento) 700
5. Framework React Native
   1. 1. Enfoques de desarrollo para dispositivos móviles 707
      1. 1.1 Desarrollos web, nativos e híbridos 708
      2. 1.1.1 Aplicaciones web 708
      3. 1.1.2 Aplicaciones nativas 709
      4. 1.1.3 Aplicaciones híbridas 710
      5. 1.2 Las tres plataformas principales 710
      6. 1.2.1 Apple iOS 710
      7. 1.2.2 Android 711
      8. 1.2.3 Windows Phone y Windows 10 Mobile 711
   2. 2. Presentación del framework React Native 712
   3. 3. Proyectos React Native 714
      1. 3.1 Aplicación “eni_react_native_helloworld” 714
      2. 3.2 Aplicación «eni_react_native_list_view» 731
      3. 3.3 Aplicación “eni_react_native_input_text” 736
      4. 3.4 Aplicación “eni_react_native_picker_basico” 741
      5. 3.5 Aplicación “eni_react_native_hook” 746
      6. 3.6 Aplication “eni_react_native_php_mysql” 751

Módulo 8 Abordar el diseño de sitios web

1. La evolución de las especificaciones
   1. 1. Una breve historia de la Web 19
   2. 2. Los trabajos de elaboración de las especificaciones 20
   3. 3. La evolución del HTML 21
   4. 4. La evolución de las CSS 22
2. Los navegadores
   1. 1. La evolución de los navegadores 25
   2. 2. Las herramientas de desarrollo 26
   3. 3. La compatibilidad de los navegadores 26
3. Las buenas prácticas
   1. 1. Separar el contenido del formato 29
   2. 2. Utilizar una estructura semántica 30
   3. 3. Optimizar el código y organizar sus archivos 30
   4. 4. Un ejemplo de una página bien formada 31
   5. 5. Validar el código de sus páginas 34

Módulo 9 HTML 5.2

1. Los elementos HTML
   1. 1. Utilizar correctamente el HTML 35
   2. 2. Las etiquetas y los contenidos 36
   3. 3. Los atributos de los elementos 37
   4. 4. El uso correcto de la sintaxis 38
   5. 5. La anidación de los elementos 39
   6. 6. Los comentarios 40
2. La estructura de las páginas
   1. 1. La estructura general de las páginas web 41
   2. 2. La declaración doctype 42
   3. 3. El elemento <html> 42
   4. 4. El elemento <head> 42
      1. 4.1 Los elementos hijo del encabezado 42
      2. 4.2 Los elementos <meta> 43
      3. 4.3 El elemento <title> 44
      4. 4.4 El elemento <link> 44
      5. 4.5 El elemento <style> 44
      6. 4.6 El elemento <script> 45
   5. 5. El elemento <body> 45
   6. 6. Las propiedades de visualización 45
   7. 7. Ejemplo de una estructura sencilla 46
3. Los contenedores semánticos
   1. 1. Utilizar correctamente los contenedores semánticos 47
   2. 2. El elemento <div> 48
   3. 3. El elemento <span> 48
   4. 4. El elemento <header> 49
   5. 5. El elemento <footer> 50
   6. 6. El elemento <aside> 50
   7. 7. El elemento <nav> 50
   8. 8. El elemento <main> 51
   9. 9. El elemento <section> 51
   10. 10. El elemento <article> 51
   11. 11. La visualización de los elementos de estructura 51
   12. 12. Dos ejemplos de estructura semántica de página 52
       1. 12.1 Una estructura semántica sencilla 52
       2. 12.2 Una estructura semántica más elaborada 53
   13. 13. Un ejemplo de estructura semántica de un artículo 54
4. Los contenedores de texto
   1. 1. Utilizar correctamente los contenedores de texto 57
   2. 2. Los atributos de idioma y dirección del texto 57
   3. 3. Los títulos 58
   4. 4. Los párrafos 61
   5. 5. Las citas 62
   6. 6. Las listas 63
      1. 6.1 Los diferentes tipos de lista 63
      2. 6.2 Las listas no ordenadas 64
      3. 6.3 Las listas ordenadas 65
      4. 6.4 El atributo de <li> 67
      5. 6.5 Las listas de definiciones 67
   7. 7. Las direcciones 69
   8. 8. El texto preformateado. 70
   9. 9. Las líneas horizontales 71
5. El formateo semántico del texto
   1. 1. Utilizar un formateo semántico 73
   2. 2. Insertar caracteres especiales 73
   3. 3. El marcado de especial énfasis 75
   4. 4. El énfasis sencillo 75
   5. 5. Resaltar en negrita y cursiva 76
   6. 6. El índice y el exponente 77
   7. 7. El subrayado 77
   8. 8. El tachado 78
   9. 9. Reducir el tamaño de los caracteres 79
   10. 10. Los títulos de obras y las citas cortas. 79
   11. 11. Las inserciones y eliminaciones 80
   12. 12. El retorno de línea 81
   13. 13. Otros formatos semánticos 82
6. Los elementos de interacción
   1. 1. Mostrar los detalles 83
   2. 2. Utilizar un cuadro de diálogo 8
7. Los enlaces
   1. 1. Inserción de enlaces para unir páginas 89
   2. 2. La estructura de los enlaces 89
   3. 3. Los enlaces a las páginas 90
   4. 4. Los enlaces internos 91
   5. 5. El contexto de apertura del enlace 93
   6. 6. Las relaciones de los enlaces 94
   7. 7. Los enlaces al correo electrónico 94
   8. 8. Los enlaces de descarga 95
   9. 9. Enlaces en imágenes 95
8. Las tablas
   1. 1. La correcta utilización de las tablas 97
   2. 2. La estructura de las tablas 97
   3. 3. Las líneas 98
   4. 4. Las celdas 98
   5. 5. La fusión de celdas 100
   6. 6. El título 102
   7. 7. Los grupos de columnas 103
      1. 7.1 Agrupar columnas 103
      2. 7.2 Enumerar las columnas 104
   8. 8. Las tablas estructuradas 106
9. Las imágenes
   1. 1. Explotar correctamente las imágenes 109
   2. 2. Entender los formatos de compresión 110
      1. 2.1 Comprimir las imágenes 110
      2. 2.2 El formato GIF 110
      3. 2.3 El formato JPEG 111
      4. 2.4 El formato PNG 111
   3. 3. Insertar imágenes con el elemento <img> 112
      1. 3.1 La utilización de las imágenes 112
      2. 3.2 El atributo src 112
      3. 3.3 El atributo alt 113
      4. 3.4 Los atributos width y height 114
      5. 3.5 Los atributos srcset y size 114
   4. 4. Insertar ilustraciones con el elemento <figure> 116
      1. 4.1 La utilización de las ilustraciones 116
      2. 4.2 El elemento <figure> 117
      3. 4.3 El elemento <figcaption> 117
10. Los formularios
    1. 1. La presencia de formularios en las páginas web 121
    2. 2. La estructura de los formularios 122
       1. 2.1 El formulario 122
       2. 2.2 Las etiquetas 123
       3. 2.3 Agrupar los campos 124
       4. 2.4 Los atributos comunes 125
    3. 3. Los campos de texto 126
       1. 3.1 La introducción de texto 126
       2. 3.2 Los campos de texto sencillos 126
       3. 3.3 Los campos de texto para las contraseñas 126
       4. 3.4 Los campos de texto multilínea 127
    4. 4. Las listas de valores 128
    5. 5. Los botones de radio de selección única 130
    6. 6. Las casillas de selección múltiple 131
    7. 7. Otros tipos de campos con <input> 132
    8. 8. Las ayudas a la introducción de datos 133
       1. 8.1 Los objetivos 133
       2. 8.2 La indicación inicial de la entrada de los datos 133
       3. 8.3 Activar un campo 134
       4. 8.4 El autocompletado 135
       5. 8.5 Hacer un campo obligatorio 135
       6. 8.6 Las entradas autorizadas 136
    9. 9. Los botones de acción 138
    10. 10. Un ejemplo completo de formulario 140
        1. 10.1 El código completo del formulario 140
        2. 10.2 El formulario 142
        3. 10.3 Los botones de radio 142
        4. 10.4 Los campos de texto 143
        5. 10.5 El campo numérico 143
        6. 10.6 El campo de dirección de correo 144
        7. 10.7 El campo de fecha 145
        8. 10.8 La lista desplegable 146
        9. 10.9 Las casillas de selección 147
        10. 10.10 Los botones de acción 148
11. Los recursos multimedia
    1. 1. La presencia de elementos multimedia 149
    2. 2. Los formatos y los códecs 149
    3. 3. La inserción de un vídeo 151
       1. 3.1 El elemento <video> 151
       2. 3.2 El origen del vídeo 151
       3. 3.3 Los controles 152
       4. 3.4 Precargar el vídeo 153
       5. 3.5 Mostar una imagen de apertura. 154
       6. 3.6 Especificar las dimensiones 154
       7. 3.7 Ofrecer varias fuentes 154
       8. 3.8 Reproducir en bucle y desactivar el sonido 155
    4. 4. La inserción de un archivo de audio 155
12. La Web semántica con Microdata
    1. 1. El estado actual de la Web semántica 157
    2. 2. El objetivo de Microdata 158
       1. 2.1 La norma y los esquemas 158
       2. 2.2 Los atributos 159
    3. 3. El esquema para las personas 160
       1. 3.1 Definir el uso de Microdata con itemscope 160
       2. 3.2 Indicar el esquema utilizado con itemtype 160
       3. 3.3 Especificar las propiedades con itemprop 161
    4. 4. Anidar esquemas 162
       1. 4.1 ¿Por qué anidar los esquemas? 162
       2. 4.2 Los dos esquemas necesarios 163
       3. 4.3 Hacer referencia a un elemento 165

Módulo 10 Las CSS3

1. Integrar los estilos CSS
   1. 1. El rol de las CSS 167
   2. 2. Los estilos integrados en un elemento HTML 168
   3. 3. Los estilos definidos en la página 169
   4. 4. Los estilos definidos en un archivo .css 170
   5. 5. Los estilos importados 172
2. Definir los estilos CSS
   1. 1. La estructura de una regla de estilo 173
   2. 1.1 La terminología de las CSS 173
   3. 1.2 Definir una regla de estilo 174
   4. 1.3 Las reglas de nomenclatura 175
   5. 2. Las unidades de medida 176
   6. 2.1 La utilización de las unidades de medida 176
   7. 2.2 Los valores inicial y heredado 176
   8. 2.3 Los valores numéricos 177
   9. 2.4 Las unidades de longitud 177
   10. 2.5 Los valores calculados 178
   11. 3. La notación de los colores 179
   12. 3.1 Utilizar los colores 179
   13. 3.2 La notación nominativa 179
   14. 3.3 La notación hexadecimal 180
   15. 3.4 Las notaciones RGB y RGBA 181
   16. 3.5 Las notaciones HSL y HSLA 182
   17. 4. Los comentarios 183
   18. 5. Los selectores 184
   19. 5.1 El objetivo de los selectores 184
   20. 5.2 El selector universal 184
   21. 5.3 Los selectores de tipo 185
   22. 5.4 Los selectores de clase 185
   23. 5.5 Los selectores de clase de tipo 186
   24. 5.6 Los selectores de identificación 187
   25. 5.7 Los selectores de atributo 188
   26. 5.8 Los selectores de pseudoclases 190
   27. 5.8.1 Utilizar las pseudoclases 190
   28. 5.8.2 Las pseudoclases dinámicas de los enlaces 190
   29. 5.8.3 Las pseudoclases dinámicas de las acciones de usuario . 192 5.8.4 La pseudoclase de ancla 193
   30. 5.8.5 La pseudoclase de idioma 196
   31. 5.8.6 Las pseudoclases de estado 197
   32. 5.8.7 Las pseudoclases de estructura 198
   33. 5.8.8 La pseudoclase de negación 208
   34. 5.9 Los selectores de pseudoelemento 210
   35. 5.9.1 El pseudoelemento de primera línea 210
   36. 5.9.2 El pseudoelemento de primera letra 211
   37. 5.9.3 Los pseudoelementos de contenido 212
   38. 5.10 Las combinaciones de selectores 214
   39. 5.10.1 Los selectores combinados 214
   40. 5.10.2 Las combinaciones descendientes 214
   41. 5.10.3 Las combinaciones de hijos 215
   42. 5.10.4 Las combinaciones de hermanos inmediatos 217
   43. 5.10.5 Las combinaciones de hermanos 219
   44. 6. La aplicación de los estilos 220
   45. 6.1 La noción de herencia 220
   46. 6.2 La especificidad de los selectores 222
   47. 6.2.1 El cálculo de la especificidad de los selectores 222
   48. 6.2.2 Un ejemplo de las especificidades de los selectores 223
   49. 6.3 La noción de importancia 226
   50. 6.4 La noción de cascada 228
   51. 6.4.1 Las prioridades en la cascada 228
   52. 6.4.2 Los conflictos en la cascada 230
   53. 6.5 El orden de aplicación de los estilos 230
   54. 7. La versión 4 de los selectores 231
3. Los estilos para las fuentes de caracteres
   1. 1. El módulo CSS 3 para las fuentes de caracteres 233
   2. 2. Las fuentes de caracteres 233
   3. 2.1 Elegir una fuente de caracteres 233
   4. 2.2 Las familias de caracteres genéricas 234
   5. 2.3 Declarar una fuente de caracteres 234
   6. 2.4 Incorporar una fuente de caracteres 236
   7. 3. El tamaño de los caracteres 237
   8. 3.1 Los tamaños por defecto 237
   9. 3.2 Modificar el tamaño de los caracteres 238
   10. 4. El formato de los caracteres 243
   11. 4.1 El peso de los caracteres 243
   12. 4.2 La cursiva de los caracteres 245
   13. 4.3 La anchura de los caracteres 245
   14. 4.4 Las versalitas 245
   15. 5. La sintaxis de acceso directo 246
4. 6. El módulo CSS 4 para las fuentes de caracteres 247
5. Los estilos para el texto
   1. 1. La aplicación de los estilos 249
   2. 2. El color del texto 250
   3. 3. Las declaraciones 250
   4. 3.1 El módulo CSS 250
   5. 3.2 Las líneas para el texto 251
   6. 3.3 Las líneas decorativas 252
   7. 3.4 El sombreado 253
   8. 4. El formato del texto 254
   9. 4.1 El módulo CSS 254
   10. 4.2 El cambio entre mayúsculas/minúsculas 255
   11. 4.3 Los espacios entre los caracteres y las palabras 256
   12. 4.4 Los espacios en blanco 257
   13. 4.5 Las alineaciones del texto 259
   14. 4.6 Indentación de la primera línea 260
   15. 4.7 La partición de palabras al final de línea 261
   16. 5. Otras propiedades para el texto 263
   17. 5.1 El interlineado 263
   18. 5.2 Desbordamiento de texto 264
   19. 6. El módulo CSS 4 para dar formato al texto 266
6. Los estilos para los contenedores de texto
   1. 1. Los títulos, los párrafos y las citas 267
   2. 2. Las listas 267
   3. 2.1 Los elementos de las listas y los estilos 267
   4. 2.2 Los estilos de enumeración 268
   5. 2.3 La enumeración con una imagen 270
   6. 2.4 La posición del símbolo 271
   7. 2.5 La sintaxis de acceso directo 273
   8. 3. Las tablas 273
   9. 3.1 El texto en las tablas 273
   10. 3.2 El borde de la tabla 274
   11. 3.3 Los bordes de las celdas 275
   12. 3.4 El espacio interno de las celdas 276
   13. 3.5 Las celdas vacías 276
   14. 3.6 El título de la tabla 277
   15. 4. Los formularios 278
   16. 4.1 El formato del texto de los campos 278
   17. 4.2 Los estados activo e inactivo de los objetos 279
   18. 4.3 Los campos obligatorios 281
   19. 4.4 La longitud de las etiquetas y de los campos 283
   20. 4.5 Formatear el foco de los campos 284
7. Los estilos para los paneles
   1. 1. El concepto del modelo de panel 287
   2. 2. Las visualizaciones de los paneles 288
   3. 2.1 Los diferentes tipos de visualización 288
   4. 2.2 La visualización en bloque 289
   5. 2.3 La visualización en línea 291
   6. 2.4 Cambiar el tipo de visualización 292
   7. 3. Los márgenes externos 294
   8. 3.1 El margen global y los márgenes diferenciados 294
   9. 3.2 Las sintaxis abreviadas 296
   10. 4. Los bordes 296
   11. 5. Los rellenos internos 298
   12. 6. La longitud y la altura de los paneles 299
   13. 6.1 Las dimensiones del contenido 299
   14. 6.2 Las dimensiones de visualización 30
   15. 7. Los fondos 306
   16. 7.1 El color de fondo 306
   17. 7.2 Las imágenes de fondo 307
   18. 7.3 Los degradados de colores 310
   19. 7.4 La opacidad de los paneles 312
   20. 8. Las esquinas redondeadas de los paneles 314
   21. 9. El sombreado de los paneles 315
8. La estructuración de la página con paneles
   1. 1. Los objetivos 319
   2. 2. El posicionamiento de los paneles 320
   3. 2.1 Las posiciones de los paneles 320
   4. 2.2 La posición relativa 321
   5. 2.3 La posición absoluta 322
   6. 2.4 La posición fija 324
   7. 3. El flotamiento de los paneles 325
   8. 3.1 Rodear una imagen con texto 325
   9. 3.2 Prohibir la flotación 327
   10. 4. La superposición de los paneles 330
   11. 5. La estructuración con las propiedades de visualización tabla 332
   12. 6. El desbordamiento de los paneles 33
   13. El Responsive Web Design
   14. 1. El desarrollo responsivo 339
   15. 2. Las consultas de recursos multimedia 339
   16. 2.1 Los criterios 339
   17. 2.2 La sintaxis 341
   18. 2.3 Los valores mínimos y máximos 341
   19. 2.4 Los operadores lógicos 342
   20. 3. El tamaño de las pantallas 342
   21. 4. Un ejemplo de composición responsiva 343
   22. 4.1 El sitio web inicial 343
   23. 4.2 El sitio web responsivo 346
   24. Crear paginaciones modernas
   25. 1. Los objetivos 351
   26. 2. Utilizar el módulo CSS Flexible Box Layout 352
   27. 2.1 La paginación flexible 352
   28. 2.2 Los contenedores flexibles 353
   29. 2.2.1 El contenedor con una visualización flex 353
   30. 2.2.2 El contenedor con una visualización inline-flex 355
   31. 2.3 El flujo de los elementos hijos 356
   32. 2.3.1 Definir la dirección 356
   33. 2.3.2 Controlar el flujo de los elementos hijos en fila 359
   34. 2.3.3 Controlar el flujo de los elementos hijos en bloque 361
   35. 2.4 Alinear los elementos hijos flexibles 363
   36. 2.4.1 Los alineamientos en el eje principal horizontal 363
   37. 2.4.2 Los alineamientos en el eje principal vertical 365
   38. 2.4.3 Los alineamientos en el eje secundario vertical 369
   39. 2.4.4 Los alineamientos en el eje secundario horizontal 372
   40. 2.4.5 Los alineamientos y el salto de línea 375
   41. 2.5 Las propiedades de los hijos flexibles 379
   42. 2.5.1 Aplicar propiedades individuales 379
   43. 2.5.2 Modificar el orden de visualización de los hijos 379
   44. 2.5.3 Modificar el alineamiento de los hijos 381
   45. 2.5.4 Autorizar la expansión de los hijos 383
   46. 2.5.5 Autorizar la contracción de los hijos 384
   47. 2.5.6 Definir la anchura de los hijos 386
   48. 2.5.7 La sintaxis abreviada de las propiedades individuales 388
   49. 2.6 Crear una paginación a pantalla completa y responsiva 388
   50. 2.6.1 Las visualizaciones obtenidas 388
   51. 2.6.2 La estructura flexible de la paginación 390
   52. 2.6.3 Las propiedades del elemento <body> 391
   53. 2.6.4 Las propiedades del elemento <main> 391
   54. 2.6.5 Las propiedades CSS para el formateo general 392
   55. 2.6.6 La paginación responsiva 393
   56. 2.6.7 El código completo del ejemplo 394
   57. 3. Utilizar el módulo CSS Grid Layout 396
   58. 3.1 La paginación en rejilla 396
   59. 3.2 Conocer el vocabulario de las rejillas 397
   60. 3.3 Comprender la estructura de las rejillas 403
   61. 3.3.1 El contenedor de la rejilla 403
   62. 3.3.2 Declarar columnas 403
   63. 3.3.3 Declarar filas 405
   64. 3.3.4 Utilizar la sintaxis abreviada 406
   65. 3.3.5 Aplicar otras unidades 407
   66. 3.3.6 Insertar huecos 408
   67. 3.3.7 Dar forma al contenedor 411
   68. 3.4 Posicionar los elementos en la rejilla 413
   69. 3.4.1 Ubicar los hijos en la rejilla 413
   70. 3.4.2 Ubicar los hijos en las filas 417
   71. 3.4.3 Aprovechar la numeración de las líneas 420
   72. 3.4.4 Nombrar las líneas de la rejilla 423
   73. 3.4.5 Nombrar las áreas de la rejilla 424
   74. 3.4.6 Alinear las celdas en la rejilla 428
   75. 3.5 Crear una paginación responsiva con una rejilla 432
   76. 3.5.1 Las visualizaciones responsivas 432
   77. 3.5.2 La estructura HTML de la rejilla 435
   78. 3.5.3 Los estilos CSS en Mobile First 436
   79. 3.5.4 La consulta de recursos multimedia para las pantallas de las tabletas 439
   80. 3.5.5 La consulta de recursos multimedia para las pantallas grandes 442
   81. 3.5.6 El código completo de la rejilla responsiva 443
9. Los módulos de animación
   1. 1. Los módulos CSS 447
   2. 2. Las transformaciones 448
   3. 2.1 La función y el punto de referencia 448
   4. 2.2 El desplazamiento 450
   5. 2.3 El escalado 451
   6. 2.4 La rotación 453
   7. 2.5 La deformación 453
   8. 2.6 Aplicar todas las transformaciones 455
   9. 3. Las transiciones 456
   10. 3.1 Crear transiciones 456
   11. 3.2 Crear un desplazamiento horizontal 457
   12. 3.3 Crear un desplazamiento horizontal y vertical 460
   13. 4. Las animaciones 461
   14. 4.1 Crear animaciones 461
   15. 4.2 Crear un desplazamiento infinito 463
   16. 4.3 Crear un formulario animado 466
10. Los módulos CSS para los diseñadores gráficos
    1. 1. Los módulos del futuro 469
    2. 2. Las máscaras 469
    3. 2.1 El módulo CSS 469
    4. 2.2 Crear una máscara 470
    5. 3. Rodear una imagen con texto 473
    6. 3.1 El módulo CSS 473
    7. 3.2 Crear el contorneo de texto 473
11. Las hojas de estilo para la impresión
    1. 1. La impresión de las páginas web 477
    2. 2. Las hojas de estilo específicas 478
    3. 2.1 Las relaciones con los archivos CSS 478
    4. 2.2 Las consultas de recursos multimedia 478
    5. 3. Las propiedades globales de las páginas 479
    6. 4. Las fuentes de caracteres 480
    7. 5. Los elementos no impresos 480
    8. 6. Las rupturas de lectura 481
    9. 6.1 Los saltos de página 481
    10. 6.2 Las líneas consecutivas 482
    11. 6.3 Las líneas viudas y huérfanas 482
    12. 7. Los enlaces de hipertexto 483