Parte 1: Abordar el diseño de sitios web...2 Domine los estándares de la creación de los sitios...

1Contenido

Prólogo

Parte 1: Abordar el diseño de sitios web

Capítulo 1-1La evolución de las especificaciones

1. Una breve historia de la Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2. Los trabajos de elaboración de las especificaciones. . . . . . . . . . . . . . . 18

3. La evolución del HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4. La evolución de las CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Capítulo 1-2Los navegadores

1. La evolución de los navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2. Las herramientas de desarrollo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3. La compatibilidad de los navegadores . . . . . . . . . . . . . . . . . . . . . . . . . 24

Capítulo 1-3Las buenas prácticas

1. Separar el contenido del formato. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2. Utilizar una estructura semántica . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3. Optimizar el código y organizar sus archivos. . . . . . . . . . . . . . . . . . . 28

4. Un ejemplo de una página bien formada . . . . . . . . . . . . . . . . . . . . . . 29

5. Validar el código de sus páginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2
Domine los estándares de la creación de los sitios web
HTML5 y CSS3

Parte 2 : HTML 5.2

Capítulo 2-1Los elementos HTML

1. Utilizar correctamente el HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

2. Las etiquetas y los contenidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3. Los atributos de los elementos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4. El uso correcto de la sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5. La anidación de los elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

6. Los comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Capítulo 2-2La estructura de las páginas

1. La estructura general de las páginas web . . . . . . . . . . . . . . . . . . . . . . 39

2. La declaración doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3. El elemento <html> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4. El elemento <head> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.1 Los elementos hijo del encabezado . . . . . . . . . . . . . . . . . . . . . . . 404.2 Los elementos <meta> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414.3 El elemento <title> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.4 El elemento <link> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.5 El elemento <style> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.6 El elemento <script>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

5. El elemento <body> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

6. Ejemplo de una estructura sencilla . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

3Contenido

Capítulo 2-3Los contenedores semánticos

1. Utilizar correctamente los contenedores semánticos. . . . . . . . . . . . . 45

2. El elemento <div>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

3. El elemento <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

4. El elemento <header> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

5. El elemento <footer> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6. El elemento <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

7. El elemento <nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

8. El elemento <main> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

9. El elemento <section> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

10. El elemento <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

11. Dos ejemplos de estructura semántica de página . . . . . . . . . . . . . . . . 5011.1 Una estructura semántica sencilla. . . . . . . . . . . . . . . . . . . . . . . . 5011.2 Una estructura semántica más elaborada . . . . . . . . . . . . . . . . . . 51

12. Un ejemplo de estructura semántica de un artículo. . . . . . . . . . . . . . 52

Capítulo 2-4Los contenedores de texto

1. Utilizar correctamente los contenedores de texto . . . . . . . . . . . . . . . 55

2. El idioma y la dirección del texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

3. Los títulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

4. Los párrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

5. Las citas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

6. Las listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606.1 Los diferentes tipos de lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606.2 Las listas no ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606.3 Las listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

4
HTML5 y CSS3

6.4 El atributo de <li>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.5 Las listas de definiciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

7. Las direcciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

8. El texto preformateado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

9. Las líneas horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Capítulo 2-5El formateo semántico del texto

1. Utilizar un formateo semántico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

2. Insertar caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

3. El marcado de especial énfasis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

4. El énfasis sencillo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

5. Resaltar en negrita y cursiva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

6. El índice y el exponente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

7. El subrayado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

8. El tachado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

9. Reducir el tamaño de carácter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

10. Los títulos de obras y las citas cortas. . . . . . . . . . . . . . . . . . . . . . . . . . 75

11. Las inserciones y eliminaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

12. El retorno de línea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

13. Otros formatos semánticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Capítulo 2-6Los elementos de interacción

1. Mostar los detalles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

2. Utilizar un cuadro de diálogo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

5Contenido

Capítulo 2-7Los enlaces

1. Inserción de enlaces para unir páginas . . . . . . . . . . . . . . . . . . . . . . . . 85

2. La estructura de los enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

3. Los enlaces a las páginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

4. Los enlaces internos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

5. El contexto de apertura del enlace . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

6. Las relaciones de los enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

7. Los enlaces al correo electrónico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

8. Los enlaces de descarga. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

9. Enlaces en imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Capítulo 2-8Las tablas

1. La correcta utilización de las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

2. La estructura de las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

3. Las líneas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

4. Las celdas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

5. La fusión de celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

6. El título Tabla:titulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

7. Los grupos de columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997.1 Agrupar columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997.2 Enumerar las columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

8. Las tablas estructuradas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

6
HTML5 y CSS3

Capítulo 2-9Las imágenes

1. Explotar correctamente las imágenes . . . . . . . . . . . . . . . . . . . . . . . . 105

2. Entender los formatos de compresión. . . . . . . . . . . . . . . . . . . . . . . . 1062.1 Comprimir las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062.2 El formato GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062.3 El formato JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072.4 El formato PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

3. Insertar imágenes con el elemento <img> . . . . . . . . . . . . . . . . . . . 1083.1 La utilización de las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . 1083.2 El atributo src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1083.3 El atributo alt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1093.4 Los atributos width y height . . . . . . . . . . . . . . . . . . . . . . . . . . . 1103.5 Los atributos srcset y size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

4. Insertar ilustraciones con el elemento <figure> . . . . . . . . . . . . . . . 1124.1 La utilización de las ilustraciones . . . . . . . . . . . . . . . . . . . . . . . 1124.2 El elemento <figure> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
4.3 El elemento <figcaption> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Capítulo 2-10Los formularios

1. La presencia de formularios en las páginas web . . . . . . . . . . . . . . . . 115

2. La estructura de los formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162.1 El formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162.2 Las etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162.3 Agrupar los campos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1182.4 Los atributos comunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

3. Los campos de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.1 La introducción de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.2 Los campos de texto sencillos . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.3 Los campos de texto para las contraseñas. . . . . . . . . . . . . . . . . 120

7Contenido

3.4 Los campos de texto multilínea . . . . . . . . . . . . . . . . . . . . . . . . . 121

4. Las listas de valores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

5. Los botones de radio de selección única . . . . . . . . . . . . . . . . . . . . . . 125

6. Las casillas de selección múltiple . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

7. Otros tipos de campos con <input> . . . . . . . . . . . . . . . . . . . . . . . . 126

8. Las ayudas a la introducción de datos . . . . . . . . . . . . . . . . . . . . . . . . 1278.1 Los objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1278.2 La indicación inicial de la entrada de los datos . . . . . . . . . . . . . 1278.3 Activar un campo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1298.4 El autocompletado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1298.5 Hacer un campo obligatorio. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1308.6 Las entradas autorizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

9. Los botones de acción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

10. Un ejemplo completo de formulario . . . . . . . . . . . . . . . . . . . . . . . . . 13510.1 El código completo del formulario. . . . . . . . . . . . . . . . . . . . . . . 13510.2 El formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
10.3 Los botones de radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13710.4 Los campos de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13810.5 El campo numérico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13810.6 El campo de dirección de correo. . . . . . . . . . . . . . . . . . . . . . . . . 13910.7 El campo de fecha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14010.8 La lista desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14110.9 Las casillas de selección . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14210.10Los botones de acción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Capítulo 2-11Los recursos multimedia

1. La presencia de elementos multimedia . . . . . . . . . . . . . . . . . . . . . . . 145

2. Los formatos y los códecs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

3. La inserción de un vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

8
HTML5 y CSS3

3.1 El elemento <video> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1473.2 El origen del vídeo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1483.3 Los controles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1483.4 Precargar el vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1503.5 Mostar una imagen de apertura. . . . . . . . . . . . . . . . . . . . . . . . . 1503.6 Especificar las dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1503.7 Ofrecer varias fuentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1513.8 Reproducir en bucle y desactivar el sonido . . . . . . . . . . . . . . . . 151

4. La inserción de un archivo de audio . . . . . . . . . . . . . . . . . . . . . . . . . 152

Capítulo 2-12La Web semántica con Microdata

1. El estado actual de la Web semántica . . . . . . . . . . . . . . . . . . . . . . . . 153

2. El objetivo de Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1542.1 La norma y los esquemas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1542.2 Los atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

3. El esquema para las personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1563.1 Definir el uso de Microdata con itemscope . . . . . . . . . . . . . . . 1563.2 Indicar el esquema utilizado con itemtype. . . . . . . . . . . . . . . . 1563.3 Especificar las propiedades con itemprop . . . . . . . . . . . . . . . . . 157

4. Anidar esquemas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1584.1 ¿Por qué anidar los esquemas? . . . . . . . . . . . . . . . . . . . . . . . . . 1584.2 Los dos esquemas necesarios . . . . . . . . . . . . . . . . . . . . . . . . . . . 1594.3 Hacer referencia a un elemento . . . . . . . . . . . . . . . . . . . . . . . . . 161

9Contenido

Parte 3: Los CSS3

Capítulo 3-1Integrar los estilos CSS

1. El rol de las CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

2. Los estilos integrados en un elemento HTML . . . . . . . . . . . . . . . . . 164

3. Los estilos definidos en la página. . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

4. Los estilos definidos en un archivo .css . . . . . . . . . . . . . . . . . . . . . . . 166

5. Los estilos importados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Capítulo 3-2Definir los estilos CSS

1. La estructura de una regla de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . 1691.1 La terminología de las CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1691.2 Definir una regla de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1701.3 Las reglas de nomenclatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

2. Las unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1722.1 La utilización de las unidades de medida . . . . . . . . . . . . . . . . . 1722.2 Los valores inicial y heredado. . . . . . . . . . . . . . . . . . . . . . . . . . . 1722.3 Los valores numéricos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.4 Las unidades de longitud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.5 Los valores calculados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

3. La notación de los colores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753.1 Utilizar los colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753.2 La notación nominativa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753.3 La notación hexadecimal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1763.4 Las notaciones RGB y RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . 1773.5 Las notaciones HSL y HSLA . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

4. Los comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

10
HTML5 y CSS3

5. Los selectores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.1 El objetivo de los selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.2 El selector universal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.3 Los selectores de tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1815.4 Los selectores de clase. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1815.5 Los selectores de clase de tipo . . . . . . . . . . . . . . . . . . . . . . . . . . 1825.6 Los selectores de identificación . . . . . . . . . . . . . . . . . . . . . . . . . 1835.7 Los selectores de atributo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1845.8 Los selectores de pseudoclases . . . . . . . . . . . . . . . . . . . . . . . . . . 186

5.8.1 Utilizar las pseudoclases . . . . . . . . . . . . . . . . . . . . . . . . . 1865.8.2 Las pseudoclases dinámicas de los enlaces . . . . . . . . . . . 1865.8.3 Las pseudoclases dinámicas de las acciones de usuario . 1885.8.4 La pseudoclase de ancla . . . . . . . . . . . . . . . . . . . . . . . . . . 1895.8.5 La pseudoclase de idioma . . . . . . . . . . . . . . . . . . . . . . . . . 1925.8.6 Las pseudoclases de estado. . . . . . . . . . . . . . . . . . . . . . . . 1935.8.7 Las pseudoclases de estructura . . . . . . . . . . . . . . . . . . . . 1945.8.8 La pseudoclase de negación . . . . . . . . . . . . . . . . . . . . . . . 204

5.9 Los selectores de pseudoelemento . . . . . . . . . . . . . . . . . . . . . . . 206
5.9.1 El pseudoelemento de primera línea . . . . . . . . . . . . . . . . 2065.9.2 El pseudoelemento de primera letra . . . . . . . . . . . . . . . . 2075.9.3 Los pseudoelementos de contenido . . . . . . . . . . . . . . . . . 208
5.10 Las combinaciones de selectores . . . . . . . . . . . . . . . . . . . . . . . . 2105.10.1Los selectores combinados . . . . . . . . . . . . . . . . . . . . . . . . 2105.10.2Las combinaciones descendientes . . . . . . . . . . . . . . . . . . 2105.10.3Las combinaciones de hijos . . . . . . . . . . . . . . . . . . . . . . . 2115.10.4Las combinaciones de hermanos inmediatos . . . . . . . . . 2135.10.5Las combinaciones de hermanos . . . . . . . . . . . . . . . . . . . 215

6. La aplicación de los estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2166.1 La noción de herencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2166.2 La especificidad de los selectores . . . . . . . . . . . . . . . . . . . . . . . . 218

6.2.1 El cálculo de la especificidad de los selectores. . . . . . . . . 2186.2.2 Un ejemplo de las especificidades de los selectores . . . . 219

6.3 La noción de importancia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

1
1Contenido
6.4 La noción de cascada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2246.4.1 Las prioridades en la cascada . . . . . . . . . . . . . . . . . . . . . . 2246.4.2 Los conflictos en la cascada . . . . . . . . . . . . . . . . . . . . . . . 226

6.5 El orden de aplicación de los estilos. . . . . . . . . . . . . . . . . . . . . . 226

Capítulo 3-3Los estilos para los tipos de letra

1. El módulo CSS 3 para las fuentes de letra. . . . . . . . . . . . . . . . . . . . . 227

2. Las fuentes de letra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2272.1 Elegir una fuente de letra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2272.2 Las familias de caracteres genéricas . . . . . . . . . . . . . . . . . . . . . . 2282.3 Declarar una fuente de letra. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2282.4 Incorporar una fuente de letra . . . . . . . . . . . . . . . . . . . . . . . . . . 230

3. El tamaño de los caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2313.1 Los tamaños por defecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2313.2 Modificar el tamaño de los caracteres . . . . . . . . . . . . . . . . . . . . 232

4. El formato de los caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2374.1 El peso de los caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2374.2 La cursiva de los caracteres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2394.3 La anchura de los caracteres. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2394.4 Las versalitas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

5. La sintaxis de acceso directo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Capítulo 3-4Los estilos para el texto

1. La aplicación de los estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

2. El color del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

3. Las declaraciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2443.1 El módulo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2443.2 Las líneas para el texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

12
HTML5 y CSS3

3.3 Las líneas decorativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2463.4 El sombreado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

4. El formato del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2484.1 El módulo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2484.2 El cambio entre mayúsculas/minúsculas . . . . . . . . . . . . . . . . . 2494.3 Los espacios entre los caracteres y las palabras. . . . . . . . . . . . . 2504.4 Los espacios en blanco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2514.5 Las alineaciones del texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2534.6 Indentación de la primera línea . . . . . . . . . . . . . . . . . . . . . . . . . 2544.7 La partición de palabras al final de línea . . . . . . . . . . . . . . . . . . 255

5. Otras propiedades para el texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2575.1 El interlineado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2575.2 Desbordamiento de texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Capítulo 3-5Los estilos para los contenedores de texto

1. Los titulos, los párrafos y las citas . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

2. Las listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.1 Los elementos de las listas y los estilos . . . . . . . . . . . . . . . . . . . 2612.2 Los estilos de enumeración . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2622.3 La enumeración con una imagen. . . . . . . . . . . . . . . . . . . . . . . . 2642.4 La posición del símbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2652.5 La sintaxis de acceso directo . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

3. Las tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2673.1 El texto en las tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2673.2 El borde de la tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2683.3 Los bordes de las celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2693.4 El espacio interno de las celdas . . . . . . . . . . . . . . . . . . . . . . . . . 2703.5 Las celdas vacías . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2703.6 El título de la tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

3
1Contenido
4. Los formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2724.1 El formato del texto de los campos . . . . . . . . . . . . . . . . . . . . . . 2724.2 Los estados activo e inactivo de los objetos . . . . . . . . . . . . . . . 2734.3 Los campos obligatorios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2754.4 La longitud de las etiquetas y de los campos . . . . . . . . . . . . . . 2774.5 Formatear el foco de los campos . . . . . . . . . . . . . . . . . . . . . . . . 278

Capítulo 3-6Los estilos para los paneles

1. El concepto del modelo de panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

2. Las visualizaciones de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . 2822.1 Los diferentes tipos de visualización . . . . . . . . . . . . . . . . . . . . . 2822.2 La visualización en bloque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2832.3 La visualización en línea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2842.4 Cambiar el tipo de visualización . . . . . . . . . . . . . . . . . . . . . . . . 285

3. Los márgenes externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2883.1 El margen global y los márgenes diferenciados. . . . . . . . . . . . . 288
3.2 Las sintaxis abreviadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
4. Los bordes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

5. Los rellenos internos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

6. La longitud y la altura de los paneles . . . . . . . . . . . . . . . . . . . . . . . . 2926.1 Las dimensiones del contenido . . . . . . . . . . . . . . . . . . . . . . . . . 2926.2 Las dimensiones de visualización . . . . . . . . . . . . . . . . . . . . . . . 294

7. Los fondos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2987.1 El color de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2987.2 Las imágenes de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3007.3 Los degradados de colores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3037.4 La opacidad de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

8. Las esquinas redondeadas de los paneles. . . . . . . . . . . . . . . . . . . . . . 307

9. El sombreado de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

14
HTML5 y CSS3

Capítulo 3-7La estructuración de la página con paneles

1. Los objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

2. El posicionamiento de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122.1 Las posiciones de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122.2 La posición relativa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3132.3 La posición absoluta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3142.4 La posición fija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

3. El flotamiento de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3173.1 Rodear una imagen con texto . . . . . . . . . . . . . . . . . . . . . . . . . . 3173.2 Prohibir la flotación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

4. La superposición de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

5. La estructuración con las propiedades de visualización tabla . . . . . 324

6. El desbordamiento de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

7. La visibilidad de los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

8. La estructuración de página flexible . . . . . . . . . . . . . . . . . . . . . . . . . 330

9. La estructuración en rejilla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Capítulo 3-8El Responsive Web Design

1. El desarrollo responsivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

2. Las consultas de recursos multimedia . . . . . . . . . . . . . . . . . . . . . . . . 3372.1 Los criterios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3372.2 La sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3392.3 Los valores mínimos y máximos . . . . . . . . . . . . . . . . . . . . . . . . 3392.4 Los operadores lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

3. El tamaño de las pantallas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

5
1Contenido
4. Un ejemplo de composición responsiva . . . . . . . . . . . . . . . . . . . . . . 3414.1 El sitio web inicial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3414.2 El sitio web responsivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Capítulo 3-9Los módulos de animación

1. Los módulos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

2. Las transformaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3502.1 La función y el punto de referencia . . . . . . . . . . . . . . . . . . . . . . 3502.2 El desplazamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3522.3 El escalado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3532.4 La rotación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3552.5 La deformación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3552.6 Aplicar todas las transformaciones . . . . . . . . . . . . . . . . . . . . . . 357

3. Las transiciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3583.1 Crear transiciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3583.2 Crear un desplazamiento horizontal. . . . . . . . . . . . . . . . . . . . . 359
3.3 Crear un desplazamiento horizontal y vertical . . . . . . . . . . . . 362
4. Las animaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3634.1 Crear animaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3634.2 Crear un desplazamiento infinito . . . . . . . . . . . . . . . . . . . . . . . 3654.3 Crear un formulario animado . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Capítulo 3-10Los módulos CSS para los diseñadores gráficos

1. Los módulos del futuro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371

2. Las máscaras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3712.1 El módulo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3712.2 Crear una máscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372

16
HTML5 y CSS3

3. Rodear una imagen con texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3753.1 El módulo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3753.2 Crear el contorneo de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Capítulo 3-11Las hojas de estilo para la impresión

1. La impresión de las páginas web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

2. Las hojas de estilo específicas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3802.1 Las relaciones con los archivos CSS. . . . . . . . . . . . . . . . . . . . . . 3802.2 Las consultas de recursos multimedia . . . . . . . . . . . . . . . . . . . . 380

3. Las propiedades globales de las páginas. . . . . . . . . . . . . . . . . . . . . . . 381

4. Las fuentes de letra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

5. Los elementos no impresos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

6. Las rupturas de lectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3836.1 Los saltos de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3836.2 Las líneas consecutivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
6.3 Las líneas viudas y huérfanas. . . . . . . . . . . . . . . . . . . . . . . . . . . 384
7. Los enlaces de hipertexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

1Contenido

Parte 1Presentación de JavaScripty programación a partir de algoritmos

Capítulo 1

Presentación del lenguaje JavaScript

1. Definición y breve historia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2. Requisitos previos para un aprendizaje sencillo del lenguaje. . . . . . 21

3. Herramientas necesarias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4. Posicionamiento de JavaScript respecto a otras tecnologías de desarrollo web (HTML, CSS, PHP...) . . . . . . . . . . . . . . . . . . . . . . 23

Capítulo 2

Desarrollo a partir de algoritmos

1. Presentación de la noción de algoritmo. . . . . . . . . . . . . . . . . . . . . . . 25

2. Noción de variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.1 Presentación de las nociones de variable y tipo . . . . . . . . . . . . 262.2 Tipos básicos y operaciones asociadas. . . . . . . . . . . . . . . . . . . . 282.3 Interés de los tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.4 Uso de variables en las expresiones . . . . . . . . . . . . . . . . . . . . . . 312.5 Tabla resumen de los operadores. . . . . . . . . . . . . . . . . . . . . . . . 31

3. Manipulación de las variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.1 Nomenclatura de las variables . . . . . . . . . . . . . . . . . . . . . . . . . . 323.2 Asignación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343.3 Ejercicio n.°1: Inversión del contenido

de dos variables en memoria . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Podrá descargar algunos elementos de este libro en la página web de Ediciones ENI: http://www.ediciones-eni.com.

Escriba la referencia ENI del libro RIT3JASAP en la zona de búsqueda y valide. Haga clic en el título y después en el botón de descarga.

2con JavaScript

Aprender a desarrollar

3.4 Visualización de los resultados . . . . . . . . . . . . . . . . . . . . . . . . . 363.5 Ejercicio n.°2: Superficies de círculos. . . . . . . . . . . . . . . . . . . . . 393.6 Introducción por el teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.7 Ejercicio n.°3: Superficie y volumen de una esfera . . . . . . . . . . 41

4. Funciones predefinidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414.1 Ejercicio n.°4: Visualización de la longitud de un nombre. . . . 424.2 Ejercicio n.°5: Determinación de iniciales . . . . . . . . . . . . . . . . . 43

5. Procesamientos condicionados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465.1 Ejercicio n.°6: Polinomio de segundo grado . . . . . . . . . . . . . . . 485.2 Ejercicio n.°7: Etiqueta del mes sin cifrar . . . . . . . . . . . . . . . . . 505.3 Ejercicio n.°8: Etiqueta del mes sin cifrar

(Siguiente ... Finsiguiente) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

6. Estructuras iterativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.1 Concepto de iteraciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.2 Estructuras iterativas básicas. . . . . . . . . . . . . . . . . . . . . . . . . . . 546.3 Ejercicio n.°9: Media de 10 números . . . . . . . . . . . . . . . . . . . . . 576.4 Ejercicio n.°10: Media de una serie de n números. . . . . . . . . . . 586.5 Ejercicio n.°11: El común divisor más grande,

por el método de las divisiones sucesivas . . . . . . . . . . . . . . . . . 616.6 Estructura iterativa Para. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.7 Ejercicio n.°12: Cálculo de la media de 10 números . . . . . . . . . 656.8 Ejercicio n.°13: Deducir el número de vocales de una palabra . .66

7. Tabla de dimensión única . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687.1 Ejercicio n.°14: Contar los números pares en una tabla . . . . . . 69

8. Tabla con dimensiones múltiples . . . . . . . . . . . . . . . . . . . . . . . . . . . 718.1 Ejercicio n.°15: Minihoja de cálculo. . . . . . . . . . . . . . . . . . . . . . 71

9. Procedimientos, funciones y paso de argumentos . . . . . . . . . . . . . . 739.1 Los objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739.2 Los procedimientos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.3 Ejercicio n.°16: Llamada de un procedimiento

con paso de argumentos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759.4 Las funciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

3Contenido

9.5 Ejercicio n.°17: Llamada de una función con paso de argumentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Parte 2Comenzar bien con JavaScript

Capítulo 3

Conceptos principales del lenguaje JavaScript

1. Metodología de aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

2. Variables (declaración y tipado). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822.1 Ejercicio n.°2: Superficies de círculos. . . . . . . . . . . . . . . . . . . . . 822.2 Ejercicio n.°3: Superficie y volumen de una esfera . . . . . . . . . . 892.3 Ejercicio n.°4: Número de letras de una palabra . . . . . . . . . . . . 922.4 Ejercicio n.°5: Determinación de las iniciales . . . . . . . . . . . . . . 92

Capítulo 4

Procesamiento condicionado

1. Presentación de la sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

2. Ejemplos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972.1 Ejercicio n.°6: Polinomio de segundo grado . . . . . . . . . . . . . . . 972.2 Ejercicio n.°8: Impresión de la etiqueta de un mes . . . . . . . . . . 98

Capítulo 5

Procesamiento iterativo (bucles)

1. Presentación de la sintaxis de los bucles . . . . . . . . . . . . . . . . . . . . . 101

2. Bucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.2 Ejercicio n.°9: Media de 10 números

que se introducirán con el teclado . . . . . . . . . . . . . . . . . . . . . . 1032.3 Ejercicio n.°10: Media de una serie de n números

que se introducirán con el teclado . . . . . . . . . . . . . . . . . . . . . . 104

4con JavaScript


3. Bucle do while. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063.2 Ejercicio n.°11: Media de una serie de n números

que se introducirán con el teclado . . . . . . . . . . . . . . . . . . . . . . 106

4. Bucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074.2 Ejercicio n.°12: Media de una serie de 10 números

que se introducirán con el teclado . . . . . . . . . . . . . . . . . . . . . . 1084.3 Ejercicio n.°13: Contar el número de vocales en una palabra . .109

Capítulo 6

Tablas

1. Tablas de dimensión única. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111.2 Ejercicio n.°14: Contar los números pares en una tabla . . . . . 113

2. Tablas de dimensiones múltiples. . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.2 Ejercicio n.°15: Minihoja de cálculo. . . . . . . . . . . . . . . . . . . . . 115

Capítulo 7

Procedimientos y funciones

1. Los procedimientos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1191.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1201.2 Ejercicio n.°16: Llamada de un procedimiento

con argumentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

2. Las funciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222.2 Ejercicio n.°17: Llamada de una función con argumentos . . . 123

5Contenido

Parte 3Aproximación a la POO en JavaScript

Capítulo 8

Enfoque orientado a "objetos" en JavaScript

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

2. Programación orientada a objetos a través de ejemplos . . . . . . . . . 1262.1 Secuencia 1: Declaración de los objetos JavaScript

de manera "Inline". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1262.2 Secuencia 2: Creación de objetos JavaScript

con un constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1272.3 Secuencia 3: Variables privadas en una instancia de objeto. . 1282.4 Secuencia 4: Paso de argumento(s) a un constructor . . . . . . . 1292.5 Secuencia 5: No compartición de los métodos

por las instancias de objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . 1302.6 Secuencia 6: Noción de prototipo . . . . . . . . . . . . . . . . . . . . . . 1312.7 Secuencia 7: Sobrecarga de un método . . . . . . . . . . . . . . . . . . 1332.8 Secuencia 8: Extensión de un prototipo . . . . . . . . . . . . . . . . . 1342.9 Secuencia 9: Mecanismo de la herencia. . . . . . . . . . . . . . . . . . 1352.10 Secuencia 10: Límite de la herencia de la secuencia 9. . . . . . . 1372.11 Secuencia 11: Un segundo límite a nuestra herencia . . . . . . . 139

Capítulo 9

Principales objetos en JavaScript

1. Presentación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

2. Los objetos básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.1 Objeto Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.2 Objeto Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.3 Objeto Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1502.4 Objeto window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1532.5 Objeto navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1632.6 Objeto String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

6con JavaScript


Capítulo 10

Las novedades de EcmaScript 6

1. Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

2. Aportaciones a nivel de la Programación Orientada a Objetos . . . 1722.1 Noción de prototipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1722.2 Sobrecarga de un método. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1762.3 Extensión de prototipo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1792.4 Herencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1822.5 Primer ejemplo POO en EcmaScript 6 . . . . . . . . . . . . . . . . . . 1862.6 Herencia en EcmaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1902.7 Métodos getter, setter y static en EcmaScript 6. . . . . . . . . . . 194

3. Funciones flecha (arrow functions). . . . . . . . . . . . . . . . . . . . . . . . . 1983.1 Ventajas de las funciones flecha . . . . . . . . . . . . . . . . . . . . . . . 1983.2 Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

4. Estructuras Map, Set y bucle for of. . . . . . . . . . . . . . . . . . . . . . . . . 2054.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2054.2 Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

5. Ámbito de las variables (var o let) . . . . . . . . . . . . . . . . . . . . . . . . . . 2155.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2155.2 Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

6. Promesas (promise). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.2 Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

7. Desestructuración. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2247.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2247.2 Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

7Contenido

Parte 4Gestión de formularios y modelo DOM

Capítulo 11

Utilizar formularios para introducir datos

1. Controles en la entrada de datos con JavaScript . . . . . . . . . . . . . . 2291.1 Control de entrada de datos en un campo de texto . . . . . . . . 2291.2 Control del tipo numérico de una entrada

de datos en un campo de texto . . . . . . . . . . . . . . . . . . . . . . . . 2361.3 Control de caracteres alfabéticos de una entrada

de datos en un campo de texto . . . . . . . . . . . . . . . . . . . . . . . . 2391.4 Control de caracteres alfabéticos y numéricos

de una entrada de datos en un campo de texto . . . . . . . . . . . 2391.5 Control de la longitud de una entrada de datos

en un campo de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2391.6 Control de entrada de datos en una dirección de e-mail . . . . 2401.7 Control de la selección de una lista desplegable

(versión simplificada) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2411.8 Control de la selección en una lista desplegable

(versión extendida) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2451.9 Control de selección con un botón de radio . . . . . . . . . . . . . . 2481.10 Control de la selección con casillas de selección . . . . . . . . . . . 252

Capítulo 12

Modelo DOM

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2571.1 Definición del DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2571.2 Definición de la arborescencia . . . . . . . . . . . . . . . . . . . . . . . . . 258

2. Aprendizaje del modelo DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.1 Script "Hello World" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.2 Diferencia entre write y writeln . . . . . . . . . . . . . . . . . . . . . . . 2622.3 Gestión de los enlaces hipertextos. . . . . . . . . . . . . . . . . . . . . . 2632.4 Gestión de las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

8con JavaScript


2.5 Gestión de formularios y de sus etiquetas . . . . . . . . . . . . . . . 2672.6 Gestión de los anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2702.7 Gestión de la navegación entre páginas web . . . . . . . . . . . . . 2722.8 Visualización de las características generales del documento . .2772.9 Gestión de los botones en los formularios . . . . . . . . . . . . . . . 2792.10 Gestión de las tablas (etiqueta HTML table) . . . . . . . . . . . . . 290

Capítulo 13

Exploración de flujo XML vía DOM

1. Noción de flujo XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

2. Ejemplos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3202.1 Ejemplo 1: Visualización del contenido

de un e-mail codificado en XML . . . . . . . . . . . . . . . . . . . . . . . 3202.2 Ejemplo 2: Lista de marcas de coches (archivo coches.xml) . . .3242.3 Ejemplo 3: Lista de las marcas de coches con un bucle . . . . . 3262.4 Ejemplo 4: Lista de nodos conectados a la raíz . . . . . . . . . . . . 3272.5 Ejemplo 5: Lista de los campos (nodos) de cada coche. . . . . . 3292.6 Ejemplo 6: Sustitución de un valor de nodo . . . . . . . . . . . . . . 3322.7 Ejemplo 7: Acceso a los atributos . . . . . . . . . . . . . . . . . . . . . . 3322.8 Ejemplo 8: Acceso a un nodo padre. . . . . . . . . . . . . . . . . . . . . 3342.9 Ejemplo 9: Recorrer hacia atrás los nodos. . . . . . . . . . . . . . . . 3352.10 Ejemplo 10: Sustitución sistemática de un valor de atributo . .3362.11 Ejemplo 11: Conversión XML en HTML . . . . . . . . . . . . . . . . 3372.12 Ejemplo 12: Eliminación de un nodo en un flujo XML . . . . . 339

9Contenido

Parte 5Cookies y mecanismos de persistencia

Capítulo 14

Gestión de las cookies en JavaScript

1. Noción de cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

2. Escritura de una cookie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

3. Lectura de una cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

4. Eliminación de una cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

Capítulo 15

Almacenamiento local de datos

1. Presentación general de las soluciones. . . . . . . . . . . . . . . . . . . . . . . 3511.1 Almacenamiento con sessionStorage . . . . . . . . . . . . . . . . . . . 3521.2 Almacenamiento con localStorage . . . . . . . . . . . . . . . . . . . . . 352

2. Implementación de Web Storage a través de ejemplos . . . . . . . . . 3532.1 Ejemplo 1: Almacenamiento por localStorage

de cadenas de caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3532.2 Ejemplo 2: Almacenamiento en el localStorage

de un objeto JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Capítulo 16

Almacenamiento remoto: formato XML

1. Presentación general de la solución . . . . . . . . . . . . . . . . . . . . . . . . . 373

2. Implementación del almacenamiento remoto a través de ejemplos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3742.1 Ejemplo 1: Acceso Ajax sobre BDD MySQL

(lista de los coches) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3752.2 Ejemplo 2: Acceso MySQL vía Ajax . . . . . . . . . . . . . . . . . . . . 400

10con JavaScript


Capítulo 17

Almacenamiento remoto: formato JSON

1. Presentación general de la solución . . . . . . . . . . . . . . . . . . . . . . . . . 407

2. Implementación del almacenamiento remoto a través de ejemplos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4092.1 Ejemplo 1: Presentación del sistema de notación JSON . . . . 4092.2 Ejemplo 2: Lectura de un archivo JSON

con XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4142.3 Ejemplo 3: Lectura de un archivo JSON

con XMLHttpRequest y un script servidor en PHP . . . . . . . . 4192.4 Ejemplo 4: Lectura de una tabla MySQL

con XMLHttpRequest (servidor PHP y flujo JSON) . . . . . . . 4212.5 Ejemplo 5: Recodificación del ejemplo 4

con una lista desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

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

Capítulo 18

Geolocalización

1. Principio de la geolocalización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

2. Ejemplos de aplicaciones de geolocalización. . . . . . . . . . . . . . . . . . 4342.1 Ejemplo 1: Visualización del mapa del centro de España. . . . 4342.2 Ejemplo 2: Visualización del mapa

del centro de España (marcador) . . . . . . . . . . . . . . . . . . . . . . . 4412.3 Ejemplo 3: Visualización del mapa del centro de España

(marcador y círculos de población) . . . . . . . . . . . . . . . . . . . . . 4452.4 Ejemplo 4: Visualización del mapa del centro de España

(información meteorológica) . . . . . . . . . . . . . . . . . . . . . . . . . . 4492.5 Ejemplo 5: Visualización del mapa de Madrid

(con fotos de los sitios importantes) . . . . . . . . . . . . . . . . . . . . 4562.6 Ejemplo 6: Visualización del mapa de Madrid (Street View) . .458

11Contenido

Capítulo 19

Diseño (HTML5 CANVAS)

1. Presentación del API HTML5 CANVAS . . . . . . . . . . . . . . . . . . . . . 465

2. Ejemplos de aplicaciones del elemento <canvas> . . . . . . . . . . . . . 4662.1 Ejemplo 1: Dibujar un cuadrado sencillo . . . . . . . . . . . . . . . . 4662.2 Ejemplo 2: Dibujar una matriz de TicTacToe . . . . . . . . . . . . 4702.3 Posibles mejoras en el conjunto del TicTacToe . . . . . . . . . . . 477

Capítulo 20

Gráficos de gestión

1. Diferentes soluciones de diseño de gráficos de gestión . . . . . . . . . 479

2. Ejemplos de uso de los API de Google Charts . . . . . . . . . . . . . . . . . 4802.1 Ejemplo 1: Dibujar un histograma . . . . . . . . . . . . . . . . . . . . . 4802.2 Ejemplo 2: Representación de un gráfico de sectores . . . . . . . 4852.3 Ejemplo 3: Representación de un mapa . . . . . . . . . . . . . . . . . 488

Parte 7Frameworks JavaScript y cliente/servidor

Capítulo 21

Framework AngularJS


2. Nociones básicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4942.1 Primer ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4942.2 Directiva ng-bind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4972.3 Directiva ng-init . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4992.4 Evaluación de una expresión . . . . . . . . . . . . . . . . . . . . . . . . . . 5002.5 Ejemplo de resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

3. Manipular tablas de memoria y objetos . . . . . . . . . . . . . . . . . . . . . 5053.1 Uso de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5053.2 Uso de un objeto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507

12con JavaScript


4. Módulo y controlador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5094.1 Ejemplo utilizando un módulo y un controlador . . . . . . . . . . 5114.2 Directiva personal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5134.3 Método personal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5154.4 Controlador en un archivo externo . . . . . . . . . . . . . . . . . . . . . 5184.5 Introducir datos con zonas de texto . . . . . . . . . . . . . . . . . . . . 520

5. Bucles y visualización en modo tabla . . . . . . . . . . . . . . . . . . . . . . . 5225.1 Iteración sobre una tabla de datos. . . . . . . . . . . . . . . . . . . . . . 5225.2 Iteración sobre una tabla de datos y un filtro. . . . . . . . . . . . . 5255.3 Iteración sobre una tabla de datos y una ordenación. . . . . . . 5285.4 Iteración sobre una tabla de datos y una tabla HTML . . . . . 5295.5 Filtrado de una tabla mediante una zona de texto. . . . . . . . . 533

6. Acceso a un servidor de datos remoto (servidor PHP) . . . . . . . . . . 5366.1 Lista simple a partir de una tabla MySQL . . . . . . . . . . . . . . . 5366.2 Lista filtrada a partir de una tabla MySQL . . . . . . . . . . . . . . . 5466.3 Insertar un registro en una tabla MySQL . . . . . . . . . . . . . . . . 552

7. Controles de introducción de datos en los formularios . . . . . . . . . 5597.1 Control para introducir datos en una zona de texto . . . . . . . 5597.2 Control para introducir los datos de una dirección

de correo electrónico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5617.3 Control para introducir datos

en una zona de texto requerida . . . . . . . . . . . . . . . . . . . . . . . . 5627.4 Lista desplegable para escoger una marca . . . . . . . . . . . . . . . . 5647.5 Lista desplegable más avanzada para seleccionar una marca . .5677.6 Lista desplegable todavía más avanzada

para seleccionar una marca . . . . . . . . . . . . . . . . . . . . . . . . . . . 5687.7 Lista desplegable asociada a una búsqueda MySQL. . . . . . . . 5707.8 Directivas ng-click y ng-mouseover . . . . . . . . . . . . . . . . . . . . 5747.9 Directivas ng-show y ng-mouseleave . . . . . . . . . . . . . . . . . . . 5787.10 Gestión del tiempo (temporizador) . . . . . . . . . . . . . . . . . . . . . 5807.11 Gestión de las opciones mediante botones de radio . . . . . . . . 5847.12 Gestión de las opciones mediante casillas de selección . . . . . 586

13Contenido

Capítulo 22

Framework Node.js


2. Instalación de Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592

3. Ejecución del entorno Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594

4. Primer script Node.js que muestra "Hello World" . . . . . . . . . . . . . 5954.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5954.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5964.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598

5. Segundo script que muestra «Hello World» (versión con Content-Type) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5995.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5995.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5995.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600

6. Tercer script que muestra «Hello World» (versión HTML) . . . . . . 6016.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6016.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6016.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603

7. Gestión de las URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6037.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6037.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6037.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605

8. Recuperar parámetros de la URL . . . . . . . . . . . . . . . . . . . . . . . . . . . 6068.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6068.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6068.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

9. Detectar el evento close en el servidor . . . . . . . . . . . . . . . . . . . . . . 6099.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6099.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6099.3 Ejecución del servidor node_06.js . . . . . . . . . . . . . . . . . . . . . . 610

14con JavaScript


10. Creación de un objeto con su propio evento . . . . . . . . . . . . . . . . . 61110.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61110.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61110.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613

11. Mostrar el primer registro de una tabla MySQL (versión 1) . . . . . 61311.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61311.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61411.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617

12. Mostrar el conjunto de registros de una tabla MySQL . . . . . . . . . 61812.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61812.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61912.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621

13. Mostrar el primer registro de una tabla MySQL (versión 2) . . . . . 62113.1 Presentación general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.2 Código fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62213.3 Ejecución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624

Parte 8Desarrollo híbrido con Ionic 3

Capítulo 23

Desarrollo híbrido en JavaScript

1. Enfoques de desarrollo para las aplicaciones móviles . . . . . . . . . . . 6251.1 Desarrollos web, nativo y híbrido . . . . . . . . . . . . . . . . . . . . . . 626

1.1.1 Aplicaciones web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6261.1.2 Aplicaciones nativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6271.1.3 Aplicaciones híbridas . . . . . . . . . . . . . . . . . . . . . . . . . . . 629

1.2 Las tres principales plataformas . . . . . . . . . . . . . . . . . . . . . . . 6291.2.1 Apple iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6301.2.3 Windows Phone, Windows 10 Móvil . . . . . . . . . . . . . . 630

15Contenido

2. Panorama de las principales plataformas «híbridas» . . . . . . . . . . . . 6312.1 Ionic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6312.2 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6312.3 Otras soluciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632

Capítulo 24

Ionic 3, JavaScript en modo híbrido

1. Presentación detallada del entorno Ionic . . . . . . . . . . . . . . . . . . . . 633

2. Instalación del entorno Ionic 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6342.1 La instalación de Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6352.2 La instalación de los frameworks Ionic y Cordova. . . . . . . . . 6362.3 Una primera aplicación de prueba . . . . . . . . . . . . . . . . . . . . . . 6362.4 Un IDE para modificar las scripts,

Microsoft Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . 6392.5 El código del proyecto ionic3-blank en detalle . . . . . . . . . . . . 640

Capítulo 25

Gestión del Hardware en Ionic 3

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

2. Aplicación ioni3-infos_hardware. . . . . . . . . . . . . . . . . . . . . . . . . . . 6592.1 Informe de la ejecución de la aplicación . . . . . . . . . . . . . . . . . 6592.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 6602.3 Despliegue de la aplicación en Android. . . . . . . . . . . . . . . . . . 668

2.3.1 Descarga de Android Studio. . . . . . . . . . . . . . . . . . . . . . 6702.3.2 Preparación de la aplicación Ionic

para su transferencia en Android Studio. . . . . . . . . . . . 6702.3.3 Importación de la aplicación Ionic en Android Studio . 6722.3.4 Prueba de la aplicación Ionic en Android Studio

en modo AVD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6752.3.5 Prueba de la aplicación Ionic en el dispositivo «físico» . . 678

16con JavaScript


3. Aplicación ionic3-battery_status. . . . . . . . . . . . . . . . . . . . . . . . . . . 6803.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 6803.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 681

4. Aplicación ionic3-screen_orientation . . . . . . . . . . . . . . . . . . . . . . . 6864.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 6864.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 687

Capítulo 26

Componentes principales en Ionic 3

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693

2. Aplicación ionic3-paso_argumentos . . . . . . . . . . . . . . . . . . . . . . . . 6942.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 6942.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 696

3. Aplicación que integra ventanas modales . . . . . . . . . . . . . . . . . . . . 7043.1 Aplicación ionic3-alert_basic . . . . . . . . . . . . . . . . . . . . . . . . . . 7063.2 Aplicación ionic3-alert_confirm . . . . . . . . . . . . . . . . . . . . . . . 7103.3 Aplicación ionic3-alert_checkbox . . . . . . . . . . . . . . . . . . . . . . 7143.4 Aplicación ionic3-alert_prompt. . . . . . . . . . . . . . . . . . . . . . . . 7213.5 Aplicación ionic3-alert_radio . . . . . . . . . . . . . . . . . . . . . . . . . . 725

Capítulo 27

Aplicaciones básicas en Ionic 3

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729

2. Aplicación ionic3-raices_polinomio. . . . . . . . . . . . . . . . . . . . . . . . . 7292.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7292.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 731

3. Aplicación ionic3-MCD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7393.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7393.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 741

17Contenido

Capítulo 28

Gestión de la persistencia en Ionic 3

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745

2. Aplicación ionic3-clipboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7462.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7462.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 747

3. Aplicación ionic3-local_storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7513.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7513.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 752

4. Aplicación ionic3-sqlite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7564.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7564.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 759

Capítulo 29

Gestión de las listas en Ionic 3

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767

2. Aplicación ionic3-list_basic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7682.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7682.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 769

3. Aplicación ionic3-list_avatar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7713.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7713.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 772

4. Aplicación ionic3-list_slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7734.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7734.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 776

18con JavaScript


Capítulo 30

Gráficos de gestión en Ionic 3

1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785

2. Aplicación ionic3-chartjs_bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7862.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7862.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 7872.3 Script home.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787

3. Aplicación ionic3-chartjs_pie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7923.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7923.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 794

4. Aplicación ionic3-chartjs_doughnut_json . . . . . . . . . . . . . . . . . . . 7984.1 Resultado de la ejecución de la aplicación. . . . . . . . . . . . . . . . 7984.2 Análisis de los scripts principales. . . . . . . . . . . . . . . . . . . . . . . 800

Índice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 811

Parte 1: Abordar el diseño de sitios web...2 Domine los estándares de la creación de los sitios...

Documents

Transcript of Parte 1: Abordar el diseño de sitios web...2 Domine los estándares de la creación de los sitios...