DESARROLLO WEB - Barcelonaalexroyo.name/docs/desarrollo-web.pdfLa etiqueta debe tener el atributo...

DESARROLLO WEB

1

http://AlexRoyo.name

Aprende cosas, como por ejemplo…

http://alexroyo.name

2

Índice

Módulo 1HyperText Markup Language (HTML)

Módulo 2

Cascading Style Sheets (CSS)

Modulo 3ECMAScript 6, 2015 (Javascript)

3

Módulo 01HTML

En este módulo aprenderemos a desarrollar el marcado de nuestras páginas, estructura y

contenido, comprendiendo la semántica y el lenguaje estructurado de documentos HTML.

1. Introducción a HTML

2. Etiquetas de estructura

3. Etiquetas de contenido

4. Formularios

[ Saltar al Módulo 02 ]

▲

Módulo 01 HTML

1. Lenguaje de Marcado de Hipertexto.

2. Declaración del tipo de documento o DOCTYPE.

3. Separación de estructura, diseño y lógica.

4. Introducción a las estructura semánticas.

5. Comprensión y aplicación de las etiquetas semánticas.

1. Introducción a HTML

4

▲

Módulo 01 HTML

Lenguaje que incorpora etiquetas o marcas a un texto aportando información adicional acerca de su estructura, significado y presentación.

Lorem ipsum Dolor sit amet consectetur adipiscing elit facilisis, montes proin ullamcorper tortor mollis inceptos.

<section class=“demo”> <h1> Lorem ipsum </h1> <p> Dolor sit amet consectetur adipiscing elit facilisis, <strong>montes</strong> proin ullamcorper tortor mollis inceptos. </p> </section>

Texto plano HTML

1.1. Lenguaje de Marcado de Hipertexto (HTML)

5

▲

Módulo 01 HTML

Estándar del World Wide Web Consortium (W3C).Lenguaje central de la Web para crear contenido que todo el mundo pueda usar en cualquier lugar.La presentación de datos se basa en la vinculación de fragmentos (hipertexto) y permite al usuario acceder a la información no necesariamente de manera secuencial.Especificación <https://www.w3.org/html/>.Validador <https://validator.w3.org/>.Referencia <https://developer.mozilla.org/es/docs/Web/HTML>

1.1. Lenguaje de Marcado de Hipertexto (HTML)

6

▲

https://www.w3.org/html/

https://validator.w3.org/

https://developer.mozilla.org/es/docs/Web/HTML

Módulo 01 HTML

SGML (define lenguajes de marcado generalizados para documentos).XML (lenguaje de marcado de propósito general).XHTML (HTML expresado como XML válido).MathML (para notación matemática).SMIL (para presentaciones multimedia).…

(*) Otros lenguajes de marcado

7

▲

Módulo 01 HTML

Debe estar presente en la primera línea de un documento HTML.Determina como se debe procesar y renderizar el documento en el navegador.HTML5 presenta un DOCTYPE que no hace referencia a ninguna Definición del Tipo de Documento (DTD) debido a que HTML5 no utiliza el sistema SGML (Standard Generalized Markup Language) como las versiones anteriores.

1.2. Declaración del tipo de documento o DOCTYPE

8

▲

Módulo 01 HTML

HTML5:<!DOCTYPE html>

HMTL 4.01 Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1.2. Declaración del tipo de documento o DOCTYPE

9

▲

Módulo 01 HTML

HTML para el contenido.CSS para la presentación.JS para el comportamiento.

Beneficios:

Asegura el acceso al contenido aunque el diseño y la lógica no se carguen por cualquier motivo.Permite al usuario decidir qué diseño aplicar en las páginas.Disminuye tiempos de carga de las páginas y la carga del servidor web. Disminuye los costes de desarrollo y mantenimiento.

1.3. Separación de estructura, diseño y lógica

10

▲

Módulo 01 HTML

<section> <h1> Lorem ipsum </h1> <p align=“center”> Dolor sit amet consectetur adipiscing elit facilisis, <b>montes</b> proin ullamcorper tortor mollis inceptos. </p> </section>

MAL

<section> <h1> Lorem ipsum </h1> <p style=“align: ‘center’”> Dolor sit amet consectetur adipiscing elit facilisis, <b>montes</b> proin ullamcorper tortor mollis inceptos. </p> </section>

MAL

<section> <h1> Lorem ipsum </h1> <p class=“destacado’”> Dolor sit amet consectetur adipiscing elit facilisis, <strong>montes</strong> proin ullamcorper tortor mollis inceptos. </p> </section>

BIEN

(*) Ejemplos de separación de estructura y diseño

11

▲

Módulo 01 HTML

<section> <h1> Lorem ipsum </h1> <p> <a href=“javascript:openNeoland()”> Ir a Neoland </a> </p> </section>

MAL

<section> <h1> Lorem ipsum </h1> <p> <a onClick=“openNeoland()”> Ir a Neoland </a> </p> </section>

MAL

<section> <h1> Lorem ipsum </h1> <p> <a href=“https://neoland.es”> Ir a Neoland </a> </p> </section>

BIEN

(*) Ejemplos de separación de estructura y lógica

12

▲

Módulo 01 HTML

El término “semántica” se refiere a los aspectos del significado, sentido o interpretación de signos.El objeto de aplicar la semántica en los documentos es hacer "entender" de qué se tratan los textos que contienen y devolver una serie de conceptos o entidades que los describan.Hay etiquetas HTML que describen la estructura de las páginas (cabecera y cuerpo de los documentos, navegación, secciones, pie de página, etc.).Hay otras etiquetas que describen cómo interpretar el contenido que contienen las páginas (abreviaturas, información de contacto, horas, texto enfatizado, etc.).

1.4. Introducción a las estructuras semánticas

13

▲

Módulo 01 HTML

Etiquetas que describen la estructura de los documentos:<header>, <main>, <nav>, <section>, <footer>, … Etiquetas que describen el contenido de los documentos:<abbr>, <address>, <article>, <aside>, <blockquote>, <q>, <cite>, <code>, <dfn>, <em>, <h1> – <h6>, <kbd>, <output>, <p>, <strong>, <time>, …

1.5. Comprensión y aplicación de las etiquetas semánticas

14

▲

Módulo 01 HTML

<!DOCTYPE html> <html> <head> Cabecera de la página </head> <body> <header> <nav> Navegación del sitio </nav> </header> <section> <nav> Navegación de la sección </nav> <main> Contenido de la página </main> </section> <footer> Pie de página </footer> </body> </html>

<html>

<head>

<body>

<header>

<section>

<footer>

<nav>

<nav>

<main>

(*) Estructura semántica de un documento HTML

15

▲

Módulo 01 HTML

1. Flujo de renderizado en HTML:elementos en línea y en bloque.

2. Elementos principales.

3. Encabezados y párrafos.

4. Listas.

2. Etiquetas de estructura

16

▲

Módulo 01 HTML

Todos los elementos HTML pertenecen a uno de estos dos grupos: en línea o en bloque.Se diferencian en la manera de ocupar el espacio en pantalla al renderizarse el documento HTML.Los elementos en línea sólo ocupan el espacio delimitado por su contenido.Los elementos en bloque siempre empiezan en nueva línea y ocupan todo el espacio horizontal de su elemento padre (contenedor).Los elementos en línea no pueden contener elementos en bloque.

2.1. Elementos en línea y elementos en bloque

17

▲

Módulo 01 HTML

En línea: <abbr>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <time>, <var>, <a>, <br>, <img>, <map>, <q>, <span>, <sub>, <sup>, <button>, <input>, <label>, <select>, <textarea>, …En bloque:<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>…<h6>, <header>, <hgroup>, <hr>, <li>, <main>, <nav>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>, …


18

▲

Módulo 01 HTML

Elemento en bloque

Elemento en línea

Lorem ipsum dolor sit amet consectetur adipiscing

[imagen]

montes proin ullamcorper tortor mollis inceptos

[imagen]


19

▲

Módulo 01 HTML

<html>, elemento raíz del documento.

<head>, elemento contenedor de los metadatos del documento.

<title>, elemento hijo del elemento Head con el título del documento.<body>, elemento contenedor de todo el contenido del documento.

<nav>, representa una sección del documento cuyo propósito es proporcionar enlaces de navegación.<main>, representa el contenido principal.

<footer>, representa el pie de página.

<!DOCTYPE html> <html lang=“es”> <head> <title> … </title> </head> <body> <nav> … </nav> <main> … </main> <footer> … </footer> </body> </html>

2.2. Elementos principales de un documento HTML

20

▲

Módulo 01 HTML

Encabezados:Etiqueta <h1>, <h2>, … <h6>

- Importancia jerárquica.

- Hay que evitar usar la etiqueta <h1> más de una vez en un documento.

- El elemento H1 se usa para mostrar el título del documento, o bien, si el documento dispone de secciones, puede usarse un elemento H1 por sección.

- Los encabezados pueden ser usados por agentes de usuario, por ejemplo, para construir una tabla de contenidos.

Párrafo:Etiqueta <p>

- Marca el texto del documento en párrafos.

<body> <header> <img src=“logo.png” alt=“Neoland”> <nav>… </nav> </header> <section id=“section1” title=“…”> <h1>… </h1> … <h2>… </h2> … <h3>… </h3> … </section> <section> <h1>… </h1> <p> … </p> </section> </body>

2.3. Encabezados y párrafos

21

▲

Módulo 01 HTML

Ordenadas:Etiqueta <ol>

- Describen una lista en la que el orden de sus ítems aporta información (ej. una conversación, un listado de pasos a seguir, etc.)

Desordenadas:Etiqueta <ul>

- Describen una lista en la que el orden de sus ítems no importa.

<p> Pasos a seguir: </p> <ol> <li>Encender ordenador</li> <li>Seleccionar usuario</li> <li>Abrir navegador</li> <li>Ir a la pestaña 1</li> </ol>

<p> Ingredientes: </p> <ul> <li>Azúcar</li> <li>Plátano</li> <li>Miel</li> <li>Chorizo</li> </ul>

2.4. Listas ordenadas, desordenadas y de definición

22

▲

Módulo 01 HTML

De definición:Etiqueta <dl>

- Describen términos.

- El elemento Dt define el término.

- El elemento Dd define su descripción.

<dl> <dt>HTML</dt> <dd> Lenguaje de marcado </dd> <dt>CSS</dt> <dd> Hoja de estilo </dd> <dt>Javascript</dt> <dd> Lenguaje de script </dd> </dl>

2.4. Listas ordenadas, desordenadas y de definición

23

▲

Módulo 01 HTML

1. Imágenes.

2. Enlaces.

3. Mapas de imagen.

4. URLs absolutas y relativas.

5. Etiquetado semántico del contenido.

3. Etiquetas de contenido

24

▲

Módulo 01 HTML

Etiqueta <img>.

Tiene dos atributos requeridos:

- El atributo “src” indica la ruta donde se ubica la imagen.

- El atributo “alt” es el texto alternativo que se muestra cuando la imagen no se puede cargar por algún motivo. Si la imagen ilustra el texto o es una imagen decorativa queda vacío.

<img src=“/ruta/de/la/imagen.png” alt=“Texto alternativo”>

3.1. Imágenes

25

▲

Módulo 01 HTML

Etiqueta <a>.El atributo “href” indica la dirección que se abre en el navegador al activar el enlace.La dirección puede ser:

- Relativa al documento o la raíz del sitio

- Absoluta

3.2. Enlaces

<a href=“https://neoland.es”>Neoland</a>

<a href=“../../../docs/curriculo.pdf”>Curriculo</a>

<a href=“http://mi-sitio.es/docs/cv.pdf”>Curriculo</a>

26

▲

Módulo 01 HTML

La dirección de un enlace también puede incluir anclas a un punto del documento enlazado (este debe incluir un elemento HTML con el atributo “id").El atributo “hreflang" indica el idioma del documento enlazado. Solo se indica si hay un cambio de idioma.El atributo "target” indica donde se abre el enlace. En la misma pestaña (“_self”) (comportamiento por defecto), o en una nueva pestaña (“_blank”).

El texto del enlace tiene que ser comprensible si el enlace se saca de contexto y debe informar al usuario si se abre en otra pestaña.

3.2. Enlaces

<a href=“/about#contact”>Contacto</a>

27

▲

Módulo 01 HTML

La etiqueta <img> debe tener el atributo “usemap” referenciando el nombre del elemento Map.La etiqueta <map> debe tener el atributo “name”.La etiqueta <area> dispone de los atributos “shape” y “coords” para definir la forma de la zona activa en la imagen.

- Forma “rect”. Las “coords” son 4 enteros positivos en px. El 1º es la distancia desde el borde izquierdo de la imagen al lado izquierdo del rectángulo, el 2º la distancia desde el borde superior hacia el lado superior, el 3º la distancia desde el borde izquierdo al lado derecho y el 4º la distancia desde el borde superior hasta el lado inferior.

- Forma “circle”. Las “coords" son 3 enteros positivos en px. El 1º es la distancia desde el borde izquierdo de la imagen hasta el centro del círculo, el 2º la distancia desde el borde superior de la imagen hasta el centro del círculo y el 3º es el radio del círculo.

- Forma “poly”. Las “coords” deben tener al menos 6 enteros y el número de enteros debe ser par. Cada par de enteros es una coordenada dada con la distancia desde la izquierda y la parte superior de la imagen.

<img src="sample-usemap.png" usemap="#shapes" alt=“…">

<map name="shapes">

<area shape="rect" coords="25,25,125,125" href=“…" alt="Caja roja">

<area shape="circle" coords="200,75,50" href=“…" alt="Círculo verde">

<area shape="poly" coords=“325,25,262,125,…" href=“…" alt="Triángulo azul.">

</map>

3.3. Mapas de imagen

28

▲

Módulo 01 HTML

3.4. URLs absolutas y relativas

Absoluta: incluyen todas las partes de la URL (protocolo, servidor y ruta).

Relativa: prescinde del protocolo y del servidor. Hace referencia a un recurso del mismo entorno.

- Puede ser relativa a la raíz del sitio web (/curso) o relativa al documento (../../curso).

<a href=“https://neoland.es/curso-web-development”>…</a>

<a href=“/curso-web-development”>…</a>

(*) Uniform Resource Locator

29

▲

Módulo 01 HTML

3.5. Etiquetado semántico del contenido

<aside>Representa una sección del documento que consiste en contenido que está indirectamente relacionado con el contenido principal del documento.Puede ser publicidad, la biografía del autor, información de perfil o enlaces a blogs relacionados. <blockquote>Citas en bloque a otros autores o documentos.El atributo “cite” proporciona un enlace al documento original o fuente.<cite>Marca la referencia a una fuente o el autor de un texto citado con los elementos Q o Blockquote.

<abbr>Abreviaturas o siglas. En el atributo “title” se indica el texto completo la primera vez que aparece en el documento.

<address>Información de contacto para su elemento Article más cercano o ancestro Body; en el último caso se aplica a todo el documento.<article>Puede ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario o cualquier otro elemento independiente del contenido.La fecha de publicación y el tiempo de un elemento Article pueden ser descritos con el atributo “pubdate" de un elemento Time.

30

▲

Módulo 01 HTML

<kbd>Representa la entrada de información del usuario, por lo general desde un teclado.<mark>Representa texto resaltado con propósitos de referencia (ej. resultados de una búsqueda).

<output>Marca los resultados de un cálculo o el resultado de una acción del usuario.<p>Elemento para distribuir el texto del documento en párrafos.

<code>Elemento apropiado para marcar código de un programa.<dfn>Representa un término cuya definición está contenida en su ancestro más próximo.<em>Marca con énfasis las partes importantes de un texto.<h1> – <h6>Describen brevemente el tema de la sección que presentan.


31

▲

Módulo 01 HTML

<sub> y <sup>Representan un subíndice y un superíndice.<time>Representa el valor de fecha y hora. El equivalente legible por máquina puede indicarse en el atributo “datetime”.Una hora en formato de 24 horas (20:00), una fecha precisa en el Calendario Gregoriano (2018-12-07) o un periodo de tiempo válido (PT2H30M).<var>Marca variables de programas y similares.

<pre>Indica que su contenido esta preformateado y que este formato debe ser preservado.<q>Representa citas como el elemento Blockquote pero en línea.<strong>Marcar con especial énfasis las partes más importantes de un texto.


32

▲

Módulo 01 HTML

1. Estructura básica de los formularios.

2. Controles de formulario.

3. Proceso de envío y recepción de datos.

4. Validación de formularios.

5. Buenas prácticas.

4. Formularios

33

▲

Módulo 01 HTML

4.1. Estructura básica de los formularios

Form representa una sección de un documento HTML que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.El atributo “action” es la URI de un programa que procesa la información enviada.El atributo “method” indica el método HTTP que usa el navegador para realizar el envío.

- GET: los datos son adjuntados a la URI del atributo “action” con un '?' como separador, y la URI resultante es enviada al servidor.

- POST: los datos son incluidos en el cuerpo del formulario y son enviados al servidor.

El atributo “enctype”, cuando el valor “method" es POST, indica el tipo MIME del contenido:

- application/x-www-form-urlencoded: El valor por defecto si el atributo no está especificado.

- multipart/form-data: El valor cuando se usa un elemento Input de tipo file.

- text/plain (HTML5)

<form action=“servidor.php” method=“POST” enctype =“multipart/form-data”> <p> <label for=“f-asunto”>Asunto<label> <input type=“text” id=“f-asunto” name=“Asunto” /> </p> <p> <label for=“f-fichero”>Fichero<label> <input type=“file” id=“f-fichero” name=“Fichero” /> </p> <p> <button>Enviar</button> </p> </form>

34

▲

Módulo 01 HTML

4.2. Controles de formulario

<button>Su atributo “type” puede tener los valores “button", “submit” (por defecto) o “reset".

<button type=“reset”> Enviar </button>

<datalist>Contiene un conjunto de elementos Option que representan los valores disponibles para otros controles.Debe disponer del atributo “id” para poder referenciarlo. (HTML5)

<datalist id=“navegadores"> <option value=“Firefox”> <option value=“Opera”> <option value=“Chrome”> <option value=“Safari”> </button>

<fieldset>Permite organizar en grupos los campos de un formulario.

<legend>Marca el título para un grupo de campos de un formulario.

<fieldset> <legend>Edad</legend> <p> <input type="checkbox" id="e1" name="edad" value="20-39"> <label for="e2">20-39</label> </p> <p> <input type="checkbox" id="e2" name="edad" value="40-59"> <label for="e2">40-59</label> </p> </fieldset>

35

▲

Módulo 01 HTML

4.2. Controles de formulario: Tipos de Input

<input>Su atributo “type” ajusta cómo funciona.

- button: Botón sin un comportamiento específico.

- checkbox: Casilla de selección. Se debe usar el atributo “value" para definir el valor que se enviará. Se usa el atributo “checked” para indicar si el elemento está seleccionado.

- color: Control para especificar un color. (HTML5)

- date: Control para introducir una fecha (año, mes y día, sin tiempo). (HTML5)

- datetime-local: Control para introducir una fecha y hora, sin zona horaria específica. (HTML5)

- email: Campo para introducir una dirección de correo. (HTML5)

- file: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo “accept" para definir los tipos de archivo que el control podrá seleccionar.

- hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.

- image: Botón de envío de formulario con gráfico. Se debe usar el atributo “src” para definir el origen de la imagen y el atributo “alt" para definir un texto alternativo. Se puede usar los atributos “height” y “width” para definir el tamaño de la imagen en píxeles.

36

▲

Módulo 01 HTML


- month: Control para introducir un mes y año, sin zona horaria específica. (HTML5)

- number: Control para introducir un número de punto flotante. (HTML5)

- password: Control de línea simple cuyo valor permanece oculto.

- radio: Se debe usar el atributo “value” para definir el valor que se enviará por este elemento. Se usa el atributo “checked” para indicar si el elemento está seleccionado.Los botones radio que tengan el mismo valor para su atributo “name” están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.

- range: Control para introducir un número cuyo valor exacto no es importante. Usa los siguientes valores predeterminados si no se especifica cada atributo (HTML5):

“min”: 0“max”: 100“value”:min + (max - min) / 2, o min si max es menor que min.“step”: 1

- reset: Botón que restaura los contenidos de un formulario a sus valores predeterminados.

- submit: Botón que envía el formulario.

37

▲

Módulo 01 HTML


- search: Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados del valor introducido. (HTML5)

- tel: Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como “pattern” y “maxlength” para restringir los valores introducidos en este control. (HTML5)

- text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.

- time: Control para introducir un valor de tiempo sin zona horaria. (HTML5)

- url: Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse.Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados.Se pueden usar atributos como “pattern” y “maxlength” para restringir los valores introducidos en el control. (HTML5)

- week: Control para introducir una fecha que consiste en el número de semana del año sin zona horaria. (HTML5)

38

▲

Módulo 01 HTML

4.2. Controles de formulario: Atributos de Input

Si el valor del atributo “type” es file, el atributo “accept” indica los tipos de archivo que el servidor acepta.El valor debe ser una lista de tipos de contenido únicos separados por coma:

- Una extensión de archivo (ej. “.jpg,.png,.doc”).

- Un tipo MIME válido sin extensiones (ej. “application/pdf").

- “audio/*”, que representa archivos de audio.

- “video/*”, que representa archivos de vídeo.

- “image/*”, que representa archivos de imagen.

“autocomplete” indica si el valor del control puede ser completado por el navegador (HTML5):

- “off”, el navegador no completa automáticamente el texto introducido.

- “on”, se permite al navegador completar automáticamente el valor basado en los valores que se han introducido previamente. Sin embargo, no provee mayor información sobre qué clase de datos podría esperar el usuario introducir.

- “name”, nombre completo.

- “given-name”, nombre de pila.

- “family-name”, apellido.

- “email”, correo electrónico.

- “username”, nombre de usuario.

- …

39

▲

Módulo 01 HTML

4.2. Controles de formulario: Atributos de Input

“autofocus” permite especificar que un control de formulario tenga el cursor cuando la página se carga. (HTML5)“checked”, cuando el valor del atributo “type” es radio o checkbox, indica que el control está seleccionado de forma predeterminada.“disabled” indica que el control no está disponible para interacción.“list” identifica una lista de opciones predefinidas como sugerencias al usuario.El valor debe ser el “id” de un elemento Datalist del mismo documento. (HTML5)“maxlength”, si el valor del atributo “type” es text, email, search, password, tel, o url, especifica el número máximo de caracteres.“minlength”, si el valor del atributo “type” es text, email, search, password, tel, o url, especifica la longitud mínima de caracteres.

“multiple” indica si el usuario puede introducir más de un valor.Este atributo solo aplica cuando el atributo “type” es email o file. (HTML5)“pattern” es una expresión regular para evaluar el valor. (HTML5)“placeholder”, una pista para el usuario sobre lo que puede introducir en el control. El texto no debe contener saltos de línea. (HTML5)“required” especifica que el usuario debe llenar el control antes de enviar el formulario. (HTML5)“spellcheck” indica que se debe revisar la ortografía y gramática del elemento. (HTML5)“value” es el valor inicial del control. Este atributo es opcional, excepto cuando el atributo “type” es radio o checkbox.

40

▲

Módulo 01 HTML

4.2. Controles de formulario

<label>Este puede estar asociado con un control ya sea mediante la utilización del atributo “for”, o ubicando el control dentro del elemento Label.

<label for=“f-email”>E–mail</label> <input type=“email” id=“f-email” name=“Email” />

<textarea>Representa un control para edición muti-línea de texto plano.

<textarea name="Comentario" rows=“10" cols="50"> Escribe algo… </textarea>

<optgroup>Grupo de opciones para un elemento Select.

<option>Representar un ítem del elemento Select.

<select>Control que muestra un desplegable de opciones.

<select id=“browser-selector”> <optgroup label="Antiguos"> <option value=“N”>Netscape</option> <option value=“IE”>Explorer</option> </optgroup> <optgroup label="Modernos"> <option value=“Op”>Opera</option> <option value=“Ff”>Firefox</option> </optgroup> </select>

41

▲

Módulo 01 HTML

4.3. Proceso de envío y recepción de datos

La web se basa en una arquitectura cliente/servidor muy básica que se puede resumir en:

1. Un cliente (un navegador) envía una petición a un servidor web (Apache, Nginx, IIS, Tomcat, etc.) utilizando el protocolo HTTP.

2. El servidor responde a la solicitud utilizando el mismo protocolo.

Un formulario HTML no es más que una manera fácil de configurar una petición HTTP para enviar datos a un servidor.

42

▲

Módulo 01 HTML

4.3. Proceso de envío y recepción de datos

El método GET se usa para pedir al servidor que se envíe de vuelta un recurso dado: "Hey servidor, quiero conseguir este recurso”.El método POST se usa para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: "Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado”.Los ficheros son datos binarios mientras que el resto de datos son de texto. Debido a que HTTP es un protocolo de texto, existen requisitos especiales para el manejo de ficheros (atributos “method” y “enctype”, y un control de formulario específico).

43

▲

Módulo 01 HTML

(*) Ejemplos de peticiones HTTP GET y POST

Petición GET

GET /index.html?lang=es HTTP/1.1 Host: neoland.esRespuesta a una petición GET

HTTP/1.1 200 OK Date: Wed, 08 Nov 2017 12:28:53 Server: Apache/2.2.14 (Linux)Last-Modified: Mon, 2 Jul 2014 19:15 Transfer-Encoding: chunked Connection: Keep-Alive Content-Type: text/html <!DOCTYPE html><html><head>…</head><body>…</body></html>

44

Petición POST

POST /guardar-datos.php HTTP/1.1 Host: neoland.esContent-Type: multipart/form-data; boundary=-------872165604191141565 Content-Length: 465-------872165604191141565 Content-Disposition: form-data; name="NombreDeUsuario"Antonio -------872165604191141565 Content-Disposition: form-data; name=“fichero"; fi lename="test.txt"Content-Type: text/plain Simple fi le.

Respuesta a una petición POST

HTTP/1.1 200 OK Date: Wed, 08 Nov 2017 12:28:53 GMTServer: Apache/2.2.14 (Linux)Last-Modified: Mon, 2 Jul 2014 19:15 GMTTransfer-Encoding: chunked Connection: Keep-Alive <!DOCTYPE html><html>…</html>

▲

Módulo 01 HTML

4.4. Validación de formularios

HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente.Mejora la experiencia de usuario al darle una respuesta inmediata acerca de la información ingresada.

- El atributo “required” de los elementos Input, Select y Textarea obliga al usuario a introducir todos los datos requeridos.

- El atributo “accept” permite definir los tipos de fichero aceptados en el elemento Input tipo file.

- El atributo “pattern” del elemento Input restringe el valor para que concuerde con una expresión regular (ej. “^(neoland)(\d{1,2})?(\.pdf)$”).

- Los valores url y email del atributo “type” del elemento Input restringen el valor para una URL o dirección de correo válida.

- El atributo “maxlength" de los elementos Input y Textarea restringe el máximo número de caracteres que el usuario puede ingresar.

45

▲

Módulo 01 HTML

(*) Precauciones de seguridad comunes

Cross-Site Scripting (XSS) permite a los atacantes inyectar secuencias de comandos. Puede ser utilizada por los atacantes para eludir los controles de acceso.Cross-Site Request Falsification (CSRF) también permite a los atacantes inyectar secuencias de comandos pero su objetivo es tratar de escalar privilegios de un usuario de mayores privilegiosInyección SQL intenta realizar acciones en una base de datos utilizada por el sitio web de destino.No confíes nunca en los datos que introduce el usuario.

46

▲

Módulo 01 HTML

4.5. Buenas prácticas

Usa elementos Label para etiquetar todos los controles de formulario.Agrupa en un contenedor el elemento Label y su control de formulario correspondiente.Comprueba que el orden de tabulación sea consistente.Usa el control de formulario adecuado para cada tipo de dato que se solicite al usuario.Valida siempre los datos de un formulario.

47

▲

48

Módulo 02CSS

Con una rápida introducción a CSS como lenguaje de estilo, modificaremos la

presentación de nuestras aplicaciones web mediante las directivas. Dotaremos de dinamismo la parte visible de cualquier

proyecto.

1. Introducción a CSS2. Selectores

3. Conceptos básicos4. Modelos de caja y distribución de las páginas

5. Iconos y tipografías6. Diseño adaptable

7. Dinamización del entorno digital

[ Saltar al Módulo 03 ]

▲

Módulo 02 CSS

1. Hojas de estilo en cascada.

2. Aplicación de CSS en un documento HTML.

1. Introducción a CSS

49

▲

Módulo 02 CSS

Lenguaje de estilo para definir la presentación de un documento estructurado escrito en un lenguaje de marcado, como por ejemplo HTML.

<section class=“demo”> <h1> Lorem ipsum </h1> <p> Dolor sit amet consectetur adipiscing elit facilisis, <strong>montes</strong> proin ullamcorper tortor mollis inceptos. </p> </section>

.demo { margin: 15px 0 0 0; padding: 10px 5px; border: 1px solid #000; } .demo h1 { font-size: 28px; } .demo strong { color: #ff0000 }

HTML CSS

1.1. Hojas de estilo en cascada (CSS)

50

▲

Módulo 02 CSS

Estándar del World Wide Web Consortium (W3C).Se usa para describir la presentación de diferentes tipos de documentos de marcado XML, como son HTML o SVG.Describe cómo debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.Especificación <https://www.w3.org/TR/CSS21/>.Validador <https://jigsaw.w3.org/css-validator/>.Referencia <https://developer.mozilla.org/es/docs/Web/CSS>

1.1. Hojas de estilo en cascada (CSS)

51

▲

https://www.w3.org/TR/CSS21/

https://jigsaw.w3.org/css-validator/

https://developer.mozilla.org/es/docs/Web/CSS

Módulo 02 CSS

CSS externoCSS interno

1.2. Aplicación de CSS en un documento HTML

52

<head> … <style> selector-elementos { propiedad-1: valor; propiedad-2: valor; … propiedad-N: valor; } </style> </head>

<head> … <link rel=“stylesheet” href=“/css/ruta-del-archivo.css”> <link rel="stylesheet" href=“/css/print.css” media="print"> <link rel="icon" href="favicon.png"> </head>

▲

Módulo 02 CSS

1. Selector universal.

2. Selectores básicos.

3. Selectores contextuales.

4. Pseudo–classes.

5. Especificidad de los Selectores.

2. Selectores

53

▲

Módulo 02 CSS

El selector universal CSS (*) coincide con elementos de cualquier tipo.A partir de CSS3, el asterisco se puede usar en combinación con namespaces:

- ns|* Coincide con todos los elementos en el espacio de nombres ns.

- *|* Coincide con todos los elementos

- |* Coincide con todos los elementos sin ningún espacio de nombres declarado.

2.1. Selector universal

54

▲

Módulo 02 CSS

2.1. Ejemplos de Selector universal

55

@namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg);

/* * Aplica a todos los elementos de SVG */ svg|* { … }

/* * Aplica a todos los elementos de ambos * espacios de nombre, HTML y SVG */ *|* { … }

/* * Aplica a todos los elementos HTML, ya que * es el espacio de nombre por defecto */ |* { … }

* [lang^=en] { color: green; }

*#seccion-contacto { border: 1px solid blue; }

*.warning { color: yellow; }

*.error { color: red; }

▲

Módulo 02 CSS

2.2. Selectores básicos

56

De etiqueta De identificadorh1 { font-size: 28px; }

h2, h3, h4 { font-size: 20px; }

#buscador { background: blue; }

#contenido { background: green; }

.destacado { border: 1px solid blue; }

.buscador { border: 1px solid green; }

De clase

▲

Módulo 02 CSS

2.3. Selectores contextuales

57

Descendientes Hijos#contenido p { color: blue; }

.menu a { text-decoration: underline; }

p > strong { font-weight: normal; }

.buscador > p { margin-top: 10px; }

h1 ~ p { color: red; }

p ~ span { color: red; }

Hermanos generalesh1 + p { text-indent: 0; }

h1 + h2 { margin-top: -5px; }

Hermanos adyacentes

▲

Módulo 02 CSS

Palabras clave que se añaden a los selectores y que especifican un estado especial del elemento seleccionado.

2.4. Pseudo–classes

58

:active:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover

:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child

:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited

▲

https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes#Indice_de_las_pseudo-clases_est%C3%A1ndar

Módulo 02 CSS

2.5. Especificidad de los Selectores

59

Es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados.La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de Selectores CSS.La especificidad es un peso (importancia o valor) que se le asigna a un Selector CSS.Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben cualquier estilo escrito en hojas de estilo externas.

▲

Módulo 02 CSS

2.5. Especificidad de los Selectores

60

Lista de tipos de selectores en función de su peso en la especificidad:0. Selectores de tipo de elemento (p.e., h1) y pseudo–elementos (p.e., ::before).1. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo–clases (p.e., :hover).2. Selectores de ID (p.e., #example).

▲

Módulo 02 CSS

2.5. Ejemplos de Especificidad

61

.wrapper .container section { /* 1 + 1 + 0 */ border: 2px solid red; } .wrapper .container .section { /* 1 + 1 + 1 */ border: 2px solid blue; } .wrapper .container #section { /* 1 + 1 + 2 */ border: 2px solid green; } .wrapper #container #section { /* 1 + 2 + 2 */ border: 2px solid yellow; } #wrapper #container #section { /* 2 + 2 + 2 */ border: 2px solid purple; }

▲

Módulo 02 CSS

1. Herencia en CSS.

2. Posicionamiento.

3. Flotación.

4. Propiedades de visualización.

3. Conceptos básicos

62

▲

Módulo 02 CSS

Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos modificando el valor que tienen por defecto. Suelen ser las propiedades que hacen referencia al formato del texto. Por ejemplo, las propiedades font o color.La herencia no aplica en las propiedades CSS que hacen referencia a la caja de un elemento, como por ejemplo bordes, márgenes o colores de fondo.

3.1. Herencia en CSS

63

▲

Módulo 02 CSS

Además de los valores habituales de cada propiedad CSS, también podemos aplicar ciertos valores especiales que son comunes a todas las propiedades. Con estos, modificamos el comportamiento de la herencia en dicha propiedad:

- inherit, hereda el valor de la propiedad del elemento padre.

- initial, establece el valor que tenía la propiedad inicialmente.

- unset, combinación de las dos anteriores. Hereda el valor de la propiedad del elemento padre, y en caso de no existir, su valor inicial

3.1. Herencia en CSS

64

▲

Módulo 02 CSS

3.2. Posicionamiento

65

La propiedad position especifica cómo se posiciona un elemento en el documento.Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute o fixed (cualquiera excepto static).

- Posicionamiento estático: el elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades top, right, bottom, left, and z-index no tienen efecto. Este es el valor de posicionamiento por defecto.

- Posicionamiento relativo: las propiedades top y bottom especifican el desplazamiento vertical desde su posición original y las propiedades left y right especifican su desplazamiento horizontal.

- Posicionamiento absoluto: las propiedades top, right, bottom, y left especifican el desplazamiento desde los bordes del bloque contenedor del elemento (el contenedor es el elemento ancestro más cercano posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento.

- Posicionamiento fijado: el elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al bloque contenedor.

▲

Módulo 02 CSS

3.3. Flotación

66

La propiedad float especifica si un elemento debe salir del flujo normal y aparecer a la izquierda o a la derecha de su contenedor, donde los elementos de texto y los elementos en línea aparecerán a su alrededor.Los valores de la propiedad float pueden ser:

- left: El elemento flota a la izquierda de su bloque contenedor.

- right: El elemento flota a la derecha de su bloque contenedor.

- none: El elemento no flota (valor por defecto).La propiedad clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (left, right, both) debajo de ellos.

▲

https://developer.mozilla.org/es/docs/Web/CSS/float

https://developer.mozilla.org/es/docs/Web/CSS/clear

▲

3.4. Propiedades de visualización

67

Además de las propiedades que controlan el posicionamiento de los elementos, CSS define también propiedades para controlar su visualización:

- display, especifica el tipo de cuadro de representación utilizado para un elemento. Los valores comunes son block, inline, inline-block, flex o none.

- visibility, se usa para dos efectos, el valor hidden oculta un elemento reservando su espacio vacío; el valor collapse oculta filas o columnas en una tabla.

- overflow, especifica:A. Recortar contenido cuando no cabe en el elemento (hidden).B. Dibujar barras de desplazamiento (scroll).C. Mostrar el contenido excedente en un elemento de bloque (visible).

- z-index, cuando varios elementos se superponen, determina cuales cubren a otros. Un elemento con mayor z-index generalmente cubre a otro menor.

Módulo 02 CSS

https://developer.mozilla.org/es/docs/Web/CSS/display

https://developer.mozilla.org/es/docs/Web/CSS/visibility

https://developer.mozilla.org/es/docs/Web/CSS/overflow

https://developer.mozilla.org/es/docs/Web/CSS/z-index

Módulo 02 CSS

1. Modelo de caja clásico.

2. Modelo de caja flexible (flexbox).

3. Tablas en el modelo de formato visual.

4. Diseño líquido.

5. Bootstrap Grid System.

4. Modelos de caja y distribución de las páginas

68

▲

Módulo 02 CSS

Cada caja tiene un área de contenido (texto, imagen, etc.) y las áreas circundantes opcionales de border, margin y padding.Border, margin y padding pueden ser divididos en los segmentos left, right, top y bottom.El ancho de la caja está dado por la suma de los márgenes, bordes y rellenos izquierdos y derechos, y el ancho del contenido.La altura está dada por la suma de los márgenes, bordes y rellenos superiores e inferiores, y la altura del contenido.

3.1. Modelo de caja clásico

69

contenido

bordermargin

padding

▲

Módulo 02 CSS

Ayuda a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.

Cuando trabajamos con flexbox hay que pensar en términos de dos ejes:

- El eje principal está definido por la propiedad flex-direction, que posee cuatro posibles valores:row, row-reverse, column y column-reverse.

- El eje cruzado va perpendicular al eje principal y, por lo tanto, si flex-direction (del eje principal) es row o row-reverse, el eje cruzado irá por columnas.

3.2. Modelo de caja flexible (flexbox)

70

End

Eje principal flex-direction: row

Start

a bEje

cruzado flex-direction:

column

▲

https://developer.mozilla.org/es/docs/Web/CSS/flex-direction


Módulo 02 CSS

3.2. Modelo de caja flexible (contenedor)

71

Para crear un contenedor flex establecemos la propiedad display del elemento contenedor como flex o inline-flex.

- Los elementos hijos directos de este contenedor se vuelven ítems flex.

- Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es row).

- Los ítems empiezan desde el margen inicial sobre el eje principal.

- Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.

- Los ítems se ajustarán para llenar el tamaño del eje cruzado.

- La propiedad flex-basis es definida como auto.

- La propiedad flex-wrap es definida como nowrap.El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal.

- Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen.

- Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

▲



https://developer.mozilla.org/es/docs/Web/CSS/flex-basis

https://developer.mozilla.org/es/docs/Web/CSS/flex-wrap

Módulo 02 CSS

3.2. Modelo de caja flexible (espacio de los ítems)

72

La propiedad flex-basis especifíca cual es el tamaño inicial de un elemento flexible.La propiedad flex-grow especifica qué cantidad de espacio debe ocupar el elemento dentro del contenedor flexible.Se encarga de añadir espacio sobre el eje principal.La propiedad flex-shrink especifica el factor de contracción de un ítem flex.Si no contamos con suficiente espacio en el contenedor para colocar los ítems, con flex-shrink el ítem puede contraerse a partir de flex-basis.

▲

Módulo 02 CSS

3.2. Modelo de caja flexible (alineación de los ítems)

73

La propiedad align-items alineará los ítems sobre el eje cruzado.

- El valor inicial para esta propiedad es stretch, los ítems se ajustan por defecto a la altura del más alto.

- Definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor; flex-end para alinearlos al final; o center para alinearlos al centro.

La propiedad justify-content alineará los ítems en el eje principal.

- El valor inicial es flex-start, que alineará los ítems al inicio del margen del contenedor.

- También se podría definir como flex-end para alinearlos al final; o center para alinearlos al centro.

- También podemos usar space-between para indicar todo el espacio sobrante después de que los ítems hayan sido colocados y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem.

- O bien, usamos el valor space-around para crear un espacio equitativo a la derecha y a la izquierda de cada ítem.

▲

Módulo 02 CSS

3.2. ¡Juega con flexbox…!

74

HTML CSS<div class="box"> <div class=“item”>Uno</div> <div class=“item”>Dos</div> <div class=“item”> Tres <br>tiene <br>texto <br>extra </div> </div>

.box { display: flex; } .item { border: 1px solid blue; background: #eee; font-size: 18px; font-family: Arial, Helvetica; }

▲

Módulo 02 CSS

3.3. Tablas en el modelo de formato visual

75

La propiedad display con valor table o inline-table en un elemento hará que este se renderice como una tabla de datos tabulares.Los elementos hijos deben usar en sus respectivas propiedades display los valores equivalentes:table-caption, table-row, table-row-group,table-cell, table-column, table-column-group,table-header-group, table-footer-group.La principal ventaja es que todas las celdas de una fila siempre tienen la misma altura.

▲


Módulo 02 CSS

76

HTML CSS<div id="contenedor"> <div id="contenidos"> <nav id=“menu”> Curabitur rutrum... </nav> <main id="principal"> Lorem ipsum dolor sit amet... </main> <aside id="lateral"> Nam erat massa... </aside> </div> </div>

#contenedor { display: table; border-spacing: 5px; } #contenidos { display: table-row; } main, nav, aside { display: table-cell; } main { width: 60%; } nav, aside { width: 20%; }

3.3. Ejemplo de Tablas en el modelo de formato visual

▲

Módulo 02 CSS

3.4. Diseño líquido

77

Define todos los anchos (width) de los contenedores en términos de porcentajes (%), así pueden expandirse y contraerse cuando la ventana del navegador cambia de tamaño.

Para posicionar contenedores uno al lado del otro, se combinan los anchos en porcentajes junto con la flotación (propiedad float) de los elementos que intervienen.Hay que tener presente el Modelo de caja clásico cuando se trabaja con porcentajes, ya que los márgenes, bordes y rellenos se suman al ancho de los elementos.

▲

Módulo 02 CSS

78

HTML CSS<div class="container"> <nav> <ul class="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </nav> <div class="content"> <main> <p>Contenido</p> <p>…</p> <p>…</p> <p>…</p> </main> <aside> <p>Barra lateral</p> </aside> </div> </div>

.container { overflow: hidden; } nav { width: 25%; float: left; } .content { width: 75%; overflow: hidden; } .content main { width: 70%; float: left; overflow: hidden; } .content aside { width: 20%; overflow: hidden; }

3.4. Ejemplo de Diseño líquido

▲

Módulo 02 CSS

3.5. Bootstrap Grid System

79

¿Qué es Bootstrap? Es una biblioteca de componentes front-end. Bootstrap Grid System son una serie de contenedores, fi las y columnas para diseñar y alinear el contenido.Bootstrap Grid System usa una cuadrícula flexblox con enfoque mobile–first (desarrollo enfocado para dispositivos más pequeños primero) para crear diseños con un sistema de 12 columnas, variables Sass y mixins, y clases predefinidas.Se basa en el ancho de la pantalla del dispositivo con 5 breakpoints:

- xs (extra small devices) para dispositivos < 576px de ancho.

- sm (small devices) para dispositivos >= 576px de ancho.

- md (medium devices) para dispositivos >= 768px de ancho.

- lg (larger devices) para dispositivos >= 992px de ancho.

- xl (extra large) para dispositivos >= ≥1200px de ancho.El Gutter, relleno de las columnas, es de 30px. 15px por lado.

▲

https://getbootstrap.com/docs/4.3/layout/grid/#auto-layout-columns

https://sass-lang.com

Módulo 02 CSS

3.5. Bootstrap Grid System

80

No es necesario definir la clase xs para dispositivos extra–pequeños, el sistema muestra una columna por defecto.Se define el tamaño de la cuadrícula para dispositivos pequeños y el sistema escala para dispositivos de mayor dimensión.Es decir, definiendo un tamaño en sm, este tamaño de cuadrícula se aplicará para sm, md, lg y xl.Los contenedores proporcionan un medio para centrar y rellenar horizontalmente los contenidos.Se usa la clase .container para un ancho de píxel sensible o .container-fluid para un ancho de 100% en todos los tamaños de ventana y dispositivo.

▲


Módulo 02 CSS

3.5. Bootstrap Grid System (dependencias)

81

Para garantizar una representación adecuada y un zoom táctil, hay que agregar el siguiente elemento Meta en la etiqueta <head> de los documentos.

- <meta name="viewport" content="width=device-width, initial-scale=1">CSS de Bootstrap (CDN) en la etiqueta <head>.

- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin=“anonymous">

JS de Bootstrap (CDN) antes de cerrar la etiqueta </body>.

- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

▲


Módulo 02 CSS

3.5. Bootstrap Grid System (reglas media)

82

/* * Estilos para los dispositivos extra–pequeños (móviles con orientación portrait con un ancho menor a 576px) */ …

/* * Dispositivos pequeños (móviles con orientación landscape con un ancho mayor o igual a 576px) */ @media (min-width: 576px) { ... }

/* * Dispositivos medianos (tabletas con un ancho mayor o igual a 768px) */ @media (min-width: 768px) { ... }

/* * Dispositivos grandes (escritorios con un ancho mayor o igual a 992px) */ @media (min-width: 992px) { ... }

/* * Dispositivos extra–grandes (escritorios grandes con un ancho mayor o igual a 1200px) */ @media (min-width: 1200px) { ... }

▲


Módulo 02 CSS

3.5. Bootstrap Grid System (ejemplos de marcado)

83

<section class="container"> <div class="row"> <div class="col"> 1 de 2 </div> <div class="col"> 2 de 2 </div> </div> <div class="row"> <div class="col"> 1 de 3 </div> <div class="col"> 2 de 3 </div> <div class="col"> 3 de 3 </div> </div> </section>

<section class="container"> <div class="row"> <div class="col"> 1 de 3 </div> <div class="col-6"> 2 de 3 (más amplio) </div> <div class="col"> 3 de 3 </div> </div> <div class="row"> <div class="col"> 1 de 3 </div> <div class=“col-5"> 2 de 3 (más amplio) </div> <div class="col"> 3 de 3 </div> </div> </section>

▲


Módulo 02 CSS

1. Google Fonts.

2. Iconos vectoriales.

3. Iconos tipográficos.

4. Regla @font-face.

5. Iconos y tipografías

84

▲

Módulo 02 CSS

5.2. Google Fonts

85

Servicio de Google para cargar y usar tipografías en tus hojas de estilo en cascada.https://fonts.google.com

▲

https://fonts.google.com

Módulo 02 CSS

5.3. Iconos vectoriales (SVG)

86

Ventajas

- Al cambiar de tamaño, no pierden definición en los contornos.

- Como están implementados en XML, podemos manipular sus partes por separado. Así, es posible crear iconos multicolores. También tenemos mayores posibilidades de animación.

- Es más correcto en términos de semántica. Mientras los iconos tipográficos nos obligan a usar elementos vacíos o pseudo–elementos de CSS, los iconos SVG se pueden representar con etiquetas <img> o <svg>.

Desventajas

- Para suplir los iconos SVG en navegadores que no soportan el formato, hay que usar fallbacks (reemplazos). Por ejemplo, la necesidad de generar un archivo alternativo en PNG.<img src=“images/svg/file.svg” srcset=“images/png/file.png” alt=“”>

▲

Módulo 02 CSS

5.4. Iconos tipográficos

87

Ventajas

- Mayor compatibilidad: la regla @font-face es soportada, aunque con limitaciones.

- El color y el tamaño son más fáciles de manipular, ya que se manejan como cualquier texto mediante CSS.

- El tamaño de archivo es menor que en SVG, y las fuentes son almacenadas en caché. Mejor rendimiento.

Desventajas

- Como son texto, el navegador les aplica antialias, generando contornos borrosos.

- Como cada ícono es un carácter, no es posible crear iconos multicolores (aunque se puede crear varios iconos por separado y juntarlos para lograr el mismo efecto).

- Pueden no mostrarse debido a aplicaciones para bloquear contenido que tenga instaladas el usuario.

- Los navegadores presentan diferencias en la forma de mostrar las fuentes; por ejemplo, aplican más o menos grosor a cada carácter.

- Son más difíciles de posicionar visualmente con respecto a otros elementos.

▲

Módulo 02 CSS

5.5. Regla @font-face

88

La regla @font-face permite al autor especificar las fuentes tipográficas a usar en las hojas de estilo.Las fuentes más comunes a las que los navegadores dan soporte son: TrueType, OpenType y Web Open Font Format (WOFF).@font-face elimina la dependencia del número (limitado) de fuentes instaladas en los dispositivos de los usuarios.@font-face { font-family: <un-nombre-de-fuente-remota>; src: <origen> [,<origen>]*; [font-weight: <peso>]; [font-style: <estilo>];}

▲

Módulo 02 CSS

(*) Ejemplo de la regla @font-face

89

@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/ @api/deki/files/2934/=VeraSeBd.ttf");} body { font-family: "Bitstream Vera Serif Bold", serif;}

▲

Módulo 02 CSS

(*) Otro ejemplo de la regla @font-face

90

@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }

▲

Módulo 02 CSS

1. Responsive Vs Adaptive.

2. Adaptación a los tipos de medios.

6. Diseño web adaptable

91

▲

Módulo 02 CSS

6.1. Diseño Responsive Vs Diseño Adaptive

92

Responsive es una técnica para desarrollar interfaces que hace uso de media queries y hojas de estilo, estableciendo unas medidas de ancho en tamaños proporcionales para hacer una estructura flexible y que el contenido de la web se adapte a las distintas resoluciones de pantalla.Adaptive (adaptado) es una técnica que utiliza tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, 1600px y se crea un diseño a medida para cada uno de esos tamaños.

▲

Módulo 02 CSS

6.2. Adaptación al tipo de medio (media queries)

93

Las media queries son útiles para ajustar la presentación en función del tipo de dispositivo (como una pantalla o una impresora) o de las funciones multimedia y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).Se utilizan para:

- Aplicar estilos condicionales con las reglas @media e @import de CSS.

- Indicar medios específicos en los elementos Link, Source entre otros elementos HTML.

▲

Módulo 02 CSS

6.2. Adaptación al tipo de medio (media types)

94

Los media types son una serie de valores cerrados que describen la categoría general de un dispositivo.Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretad como all por defecto.Los tipos de medio son:

- all, apto para todos los dispositivos.

- print, se aplica cuando el documento sale por la impresora y en la visualización de documentos en una pantalla en el modo de vista previa de impresión.

- screen, se aplica cuando el documento se renderiza en pantalla.

- speech, se aplica en sintetizadores de voz.

▲

Módulo 02 CSS

6.2. Adaptación al tipo de medio (operadores)

95

Se pueden redactar media queries utilizando operadores lógicos (not, and y only).Además se puede combinar múltiples media queries en una lista separada por comas.

En este caso si cualquiera de las media queries en la lista es verdadera, la hoja de estilo asociada es aplicada (equivalente a una operación lógica “or").

▲

Módulo 02 CSS


96

Operador and:Se usa para aplicar reglas de estilo en la presentación cuando se cumplan dos o más condiciones.<link media=“all” href=“…”> @media (min-width: 700px) { … } @media (min-width: 700px) and (orientation: landscape) { … } @media tv and (min-width: 700px) and (orientation: landscape) { … }

▲

Módulo 02 CSS


97

Lista separada por comas (,):Se comportan como el operador or cuando es usado en media queries.@media (min-width: 700px) , handheld and (orientation: landscape) { … }

▲

Módulo 02 CSS


98

Operador not:Aplica a toda la media query. No se puede usar para negar una query individual. Retorna verdadero si es posible y sino retorna falso.@media not all and (monochrome) { ... } La consulta anterior es evaluada de la siguiente manera: @media not (all and (monochrome)) { ... } Y no de la siguiente manera: @media (not all) and (monochrome) { ... }

▲

Módulo 02 CSS


99

Operador not:Ejemplo con una lista de queries separadas por coma.@media not screen and (color), print and (color) { … } La consulta anterior es evaluada de la siguiente manera: @media (not (screen and (color))), print and (color) { … }

▲

Módulo 02 CSS


100

Operador only:Previene que navegadores antiguos que no soportan media queries con funciones apliquen los estilos asignados.<link rel="stylesheet" media="only screen and (color)" href=“ejemplo.css” />

▲

Módulo 02 CSS

6.2. Adaptación al tipo de medio (funciones multimedia)

101

La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar “mayor o igual que" o “menos que o igual a”.

colorcolor-indexaspect-ratiodevice-aspect-ratiodevice-height

device-widthgridheightmonochrome

orientationresolutionscanwidth

▲

https://developer.mozilla.org/es/docs/CSS/Media_queries#Funciones_Multimedia

Módulo 02 CSS

1. Transiciones.

2. Transformaciones.

3. Animaciones.

4. Gráficos Vectoriales Escalables (SVG).

7. Dinamización del entorno digital

102

▲

Módulo 02 CSS

7.1. Transiciones

103

Las transiciones de CSS3 permiten definir la transición entre dos estados de un elemento.Hay diferentes estados que pueden ser definidos utilizando pseudo–clases como :hover o :active.

▲

Módulo 02 CSS

104

Subpropiedades de la propiedad abreviada (shorthand property) transition:

- transition-delay Tiempo de retardo (p.e. 2s, 5ms) entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transición.

- transition-durationLa cantidad de tiempo (p.e. 6s, 120ms) que la transición consume en completar su ciclo.

- transition-property Define los nombres de las propiedades CSS en las que el efecto de la transición debe aplicarse (por defecto, all).

- transition-timing-function Indica el ritmo de la transición, es decir, cómo se muestran los fotogramas de la transicion, estableciendo curvas de aceleración.(ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, cubic-bezier(0.1, 0.7, 1.0, 0.1), steps(4, end)).

7.1. Transiciones

▲

Módulo 02 CSS

(*) Ejemplos de transiciones

105

div { width: 200px; height: 200px; background: yellow; opacity: 0.5; cursor: pointer;}div:hover { background: red; opacity: 1; transition-duration: 5s; transition-property: background opacity;}

▲

Módulo 02 CSS

7.2. Transformaciones

106

La propiedad transform te permite modificar el espacio de coordenadas del modelo de formato visual.Usando la propiedad transform, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.

▲

Módulo 02 CSS

107

transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);transform: translate(12px, 50%);transform: translateX(2em);transform: translateY(3in);transform: scale(2, 0.5);transform: scaleX(2);transform: scaleY(0.5);transform: rotate(0.5deg);transform: skew(30deg, 20deg);transform: skewX(30deg);transform: skewY(1.07rad)


▲

https://developer.mozilla.org/es/docs/Web/CSS/transform#Funciones_CSS_transform

Módulo 02 CSS

108

transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0);transform: translate3d(12px, 50%, 3em);transform: translateZ(2px);transform: scale3d(2.5, 1.2, 0.3);transform: scaleZ(0.3);transform: rotate3d(1, 2.0, 3.0, 10deg);transform: rotateX(10deg);transform: rotateY(10deg);transform: rotateZ(10deg);transform: perspective(17px);

transform: translateX(10px) rotate(10deg) translateY(5px);


▲

https://developer.mozilla.org/es/docs/Web/CSS/transform#Funciones_CSS_transform

Módulo 02 CSS

(*) Ejemplos de transformaciones

109

div { width: 200px; height: 200px; background: red; cursor: pointer;}div:hover { transition-duration: 5s; transform: rotate(90deg);}

▲

Módulo 02 CSS

7.3. Animaciones

110

Las animaciones de CSS3 permiten animar la transición entre un estilo y otro.Las animaciones constan de dos componentes:

- Un estilo que describe la animación.

- Y un conjunto de fotogramas (regla @keyframes) que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

Ventajas:

- Fáciles de usar para animaciones sencillas.

- Se muestran correctamente, incluso en equipos poco potentes.

- El navegador controla la secuencia de la animación, optimizando el rendimiento y eficiencia.

▲

Módulo 02 CSS

111

Subpropiedades de la propiedad abreviada (shorthand property) animation:

- animation-delay Tiempo de retardo (p.e. 2s, 5ms) entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.

- animation-directionIndica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final (normal, alternate, reverse, alternate-reverse).

- animation-durationLa cantidad de tiempo (p.e. 6s, 120ms) que la animación consume en completar su ciclo.

- animation-iteration-count El número de veces que se repite. Podemos indicar “infinite” para repetir la animación indefinidamente.

7.3. Animaciones

▲

Módulo 02 CSS

112

Subpropiedades de la propiedad abreviada (shorthand property) animation:

- animation-name Especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica una regla @keyframes.

- animation-play-state Permite pausar y reanudar la secuencia de la animación (running, paused).

- animation-timing-function Indica el ritmo de la animación, es decir, cómo se muestran los fotogramas de la animación, estableciendo curvas de aceleración.(ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, cubic-bezier(0.1, 0.7, 1.0, 0.1), steps(4, end)).

- animation-fill-mode Especifica qué valores tendrán las propiedades después de finalizar la animación: los de antes de ejecutarla, los del último fotograma de la animación o ambos (none, forwards, backwards, both).

7.3. Animaciones

▲

Módulo 02 CSS

113

Una vez configurado el tiempo y el ritmo de la animación (animation), necesitamos definir su apariencia.La apariencia la aplicaremos estableciendo dos o más fotogramas usando la regla @keyframes.

Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

El fotograma usa porcentajes para indicar qué momento de la secuencia de la animación tiene lugar (0% es el estado inicial y 100% el estado final de la animación).

La propiedad from de la regla @keyframes es el alias del estado inicial (0%) y la propiedad to el alias del estado final (100%).

7.3. Animaciones

▲

Módulo 02 CSS

(*) Ejemplos de animaciones

114

p { animation-duration: 3s; animation-name: slidein;}@keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; }}

p { animation-duration: 3s; animation-name: slidein;}@keyframes slidein { 0% { margin-left: 100%; width: 300% } 100% { margin-left: 0%; width: 100%; }}

▲

Módulo 02 CSS

7.4. Gráficos Vectoriales Escalables (SVG)

115

Estándar del World Wide Web Consortium (W3C).Lenguaje de marcado XML para describir gráficos vectoriales en 2D.Especificación <https://www.w3.org/TR/SVG11/>.Validador <https://validator.w3.org/>.Referencia <https://developer.mozilla.org/es/docs/Web/SVG><svg xmlns=“http://www.w3.org/2000/svg" version=“1.1" width="300" height="200"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white"> SVG </text></svg>

▲

https://www.w3.org/TR/SVG11/

https://validator.w3.org/

https://developer.mozilla.org/es/docs/Web/SVG

Módulo 02 CSS

(*) Ejemplo de efecto Clip con SVG

116

<body> <div class=“target”> <p> Lorem ipsum dolor sit amet, consectetur, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. … </p> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0"> <clipPath id="c1" clipPathUnits="objectBoundingBox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle" /> <rect x="0.5" y="0.2" width="0.5" height="0.8" /> </clipPath> </svg></body>

div {width: 300px;height: 300px;padding: 20px;background: #eee;border: 1px solid #666;

}.target {

clip-path: url(#c1);}

▲

117

Módulo 03JAVASCRIPT

Aprenderemos los fundamentos básicos de la Programación Orientada a Objetos con prototipos y

clases del lenguaje Javascript .

1. Las reglas del juego2. Estructuras de control (bucles)

3. Estructuras de control (funciones)4. Métodos de Array y Object y otros objetos de interés

▲

Módulo 03 JAVASCRIPT

1. Introducción a Javascript.

2. Variables y su ámbitos.

3. Operadores.

4. Organización del código.

1. Las reglas del juego

118

▲


Lenguaje interpretado de scripting multiplataforma y orientado a objetos. Es un lenguaje pequeño y liviano.JS contiene una librería estándar de objetos, tales como Array, Date y Math, y un conjunto central de elementos del lenguaje, tales como operadores, estructuras de control y sentencias.Actualmente los navegadores dan buen soporte a la especificación ECMAScript 6 (2015) e integran características de ECMAScript 7 (2016).Especificación<http://www.ecma-international.org/ecma-262/>Referencia<https://developer.mozilla.org/es/docs/Web/JavaScript>

1.1. Introducción a Javascript

119

▲

https://www.w3.org/html/

https://developer.mozilla.org/es/docs/Web/HTML


Una variable es un contenedor en la memoria para un valor, como un número que podríamos usar en una suma, o una cadena de texto que podríamos usar como parte de una oración.Su valor puede cambiar.Para usar una variable, primero tienes que crearla, a esto se le llama declarar una variable. Para hacer esto, escribimos la palabra clave var o let seguida del nombre que le quieres poner a la variable:

let myName;let myAge;

1.2. Variables y sus ámbitos

120

▲


¿Por qué necesitamos dos palabras clave para definir las variables? ¿Por qué var y let?

Las razones son históricas. Cuando Javascript fue creado, sólo existía var. Esta funciona bien en la mayoría de los casos, pero tiene algunos problemas.

- Se puede usar var para declarar una variable después de inicializarla. Esto hace que el código sea confuso y más difícil de entender.

- Cuando usas var, puedes declarar la misma variable tantas veces como quieras, pero con let no.


121

▲


Una vez declarada la variable, se puede inicializar con un valor. Esto se hace escribiendo el nombre de la variable, seguido del signo de igual (=), continuado por el valor que se le quiere dar:

myName = ‘Antonio’;myAge = 20;Se puede declarar e inicializar una variable al mismo tiempo de la siguiente forma:

let myDog = ‘Galgo’;


122

▲


Puedes nombrar a una variable casi como quieras, pero hay limitaciones. Generalmente debes limitarte a usar solo caracteres latinos (0-9, a-z, A-Z) y el guión bajo (_).No uses el guión bajo (_) al inicio del nombre de una variable —esto se usa en ciertos constructores de Javascript—.No uses números al inicio del nombre de una variable. No está permitido y causará error.Una buena práctica es usar la convención "lower camel case", donde se unen varias palabras, usando minúsculas para la primera y luego capitalizar las siguientes.Usa nombres de las variables intuitivos, de manera que describan los datos que contienen.Las variables son case sensitive —eso quiere decir que myage es una variable diferente de myAge—.Debes evitar usar palabras reservadas para nombrar variables —es decir, las palabras que conforman la sintaxis de Javascript—.


123

▲

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Gramatica_lexica#Palabras_clave


JS es un lenguaje "débilmente tipado”, no es necesario declarar el tipo de variable, a diferencia de otros lenguajes de programación.Hay distintos tipos de datos que se puede almacenar en variables:

- Number, ya sean enteros, como 30 (integers), ó decimales, como 2,456 (floats);

- String, son cadenas de texto. Cuando asignas a una variable un String debe ir entre comillas simples ('texto') o dobles (“texto");

- Boolean, solo pueden tener dos valores, true o false;

- Object, listas de propiedad / valor que definen una estructura de datos más o menos compleja. Por ejemplo, { nombre: ‘Antonio’, edad: 30 };

- Array, colección de valores bajo un mismo nombre de variable.Por ejemplo, [10, 15, 40];

(*) La función typeof(nombreDeLaVariable) retorna el tipo de dato de la variable que se le pasa.


124

▲

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array


Muchos lenguajes de programación poseen el término constante —una variable cuyo valor, una vez declarado, nunca se puede cambiar—.Hay muchas razones por las que utilizar constantes, desde motivos de seguridad (si se permitiera que un script de terceros cambiara dichos valores, podría generar problemas), hasta la depuración y comprensión del código (es más difícil cambiar por accidente valores que no deberían cambiarse).En los inicios de JS no existían las constantes. En versiones modernas, tenemos la palabra reservada const, que nos permite almacenar valores que nunca se pueden cambiar:

const daysInWeek = 7;const hoursInDay = 24;const funciona exactamente igual que let, a excepción que a const no le puedes asignar un nuevo valor.Si una constante almacena un Object, este sí que puede mutar.


125

▲



126

▲

Ámbito de var Ámbito de let y constvar i = "global";

function foo() { i = "local"; console.log(i); // local } foo(); console.log(i); // local /* —————————————- */ var i = "global";

function foo() { var i = "local"; console.log(i); // local } foo(); console.log(i); // global

function foo() { let i = 0; if (true) { let i = 1; console.log(i); // 1 } console.log(i); // 0 } foo(); /* —————————————- */ function foo() { if (true) { let i = 1; } console.log(i); // ReferenceError } foo();


Asignan un valor al operando de la izquierda en función del valor del operando de la derecha.

1.3. Operadores de asignación

127

▲

- Asignación de multiplicación x *= y —> x = x * y

- Asignación de división x /= y —> x = x / y

- Asignación de resto x %= y —> x = x % y

- Asignación x = y

- Asignación de adición x += y —> x = x + y

- Asignación de sustracción x -= y —> x = x - y


La sintaxis de asignación con destructuración es una expresión de Javascript que permite extraer datos de arreglos u objetos usando una sintaxis que se asemeja a la construcción de arreglos o objetos literales.

1.3. Operadores de asignación (destructuración)

128

▲

let foo = [‘uno', ‘dos', 'tres'];// Sin destructuraciónlet a = foo[0];let b = foo[1];let c = foo[2];// Con destructuraciónlet [h, j, k] = foo;

let foo = { name: ‘Layla’, age: 20};// Sin destructuraciónlet name = foo.name;let age = foo.age;// Con destructuraciónlet { name, age } = foo;


Comparan sus operandos y devuelven un valor lógico en función de si la comparación es verdadera (true) o falsa (false).En la mayoría de los casos, si los dos operandos no son del mismo tipo, JS intenta convertirlos en el tipo apropiado para permitir la comparación, generalmente esta conversión se realiza de manera numérica.

Las únicas excepciones que tiene esta conversión son los operadores=== y !==, que ejecutan comparaciones de igualdad o desigualdad de manera estricta (chequeando también si ambos operandos son del mismo tipo).

129

▲

1.3. Operadores de comparación

- Igualdad (==)

- Desigualdad (!=)

- Estrictamente iguales (===)

- Estrictamente desiguales (!==)

- Mayor que (>)

- Mayor o igual que (>=)

- Menor que (<)

- Menor o igual que (<=)


Se usan típicamente con valores Boolean. En tal caso, regresan un valor Boolean.Sin embargo, los operadores lógicos && (AND) y || (OR) regresan el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, devuelven un valor no Boolean.El operador ! (NOT) se usa para detectar si la negación de una expresión se cumple.

- Algunos ejemplos de expresiones que pueden evaluarse como false son: null, 0, NaN (Not-A-Number), un string vacío (""), o undefined.

1.3. Operadores lógicos (&&, || y !)

130

▲


Es el único operador de JS que necesita tres operandos. El operador asigna uno de dos valores basado en una condición.

condición ? valor1 : valor2Ejemplo:

let estado = (edad >= 18) ? "adulto" : "menor";

1.3. Operador condicional (?)

131

▲


Crea una instancia de un objeto definido por el usuario o uno de los tipos de objetos incorporados en el núcleo de JS que tienen una función de construcción.

new constructor([argumentos])Ejemplos

let objeto = new Object();let lista = new Array(11, 15, 90, 100);let fecha = new Date();let coche = new Coche({ color: ‘Rojo’, ruedas: 4 });

1.3. Operador de instancia (new)

132

▲


Cuando nos referimos a una manera de programar se denomina paradigma.JS es un bicho raro, combina aspectos de diferentes paradigmas de programación:

- Procesal. Consiste en basarse en un número muy bajo de sentencias repetidas, englobadas todas en un procedimiento o función, y llamarlo cada vez que tenga que ejecutarse.

- Funcional. Basado en el uso de funciones matemáticas. El valor generado por una función depende exclusivamente de los argumentos pasados a la función.

- Orientada a objetos (OOP). Basado en una colección de objetos (datos y funciones) que están interrelacionados y trabajan conjuntamente para resolver un problema.

Tiene numerosos enfoques, a menudo redundantes, para resolver casi cualquier problema de programación concebible y no está muy claro cuáles son los más adecuados.Para programar usando OOP hay que tener claro una serie de conceptos fundamentales, como: Clase, Herencia, Objeto, Propiedad, Método y Evento.

1.4. Organización de código

133

▲


Es una pregunta difícil.Ambas formas son prácticamente equivalentes.En JS, la herencia de clases se implementa sobre la herencia de prototipos, pero eso no significa que haga lo mismo.

- Protoype es una instancia de un objeto de trabajo. Los objetos heredan directamente de otros objetos.

- Class puede extender otras clases y crear relaciones de subclase: taxonomías jerárquicas de clases (clasificación u ordenación en grupos de cosas que tienen unas características comunes).

class se incorpora en la especificación ECMAScript 6 (2015).

1.4. Organización de código (prototype vs class)

134

▲


class MyClass2 extends MyClass { constructor(myProp1 = ‘Parámetro 1’, myProp2 = ‘Parámetro 2’) {

super(arguments);this.myProperty1 = myProp1;this.myProperty2 = myProp2;

document.addEventListener('DOMContentLoaded', function (event) {

// Documento preparado });window.onload = function() {

// Ventana cargada };

} render() {

console.log(this.myProperty1, this.myProperty2);};

};

let MyObject = new MyClass(‘Hola’, ‘Adiós’); MyObject.render();

1.4. Organización de código (class)

136

▲


1. Sentencia for

2. Sentencia do…while

3. Sentencia while

4. Sentencia break

5. Sentencia continue

6. Sentencia for…in

7. Sentencia for…of

2. Estructuras de control (bucles)

137

▲


Un bucle for se repite hasta que la condición especificada se evalúa como false.

for ([expresionInicial]; [condicion]; [expresionIncremento]) { sentencia;}Ejemplo:

for (let i = 0, max = myArray.length; i < max; i++) { myCounter++; // myCounter = myCounter +1 console.log( myArray[i] ); }

2.1. Sentencia for

138

▲


La sentencia do…while se repite hasta que la condición especificada que se evalúa sea false.

do { sentencia;} while (condicion);Ejemplo:

do { i += 1;} while (i < 5);

2.2. Sentencia do…while

139

▲


Una sentencia while ejecuta sus sentencias mientras la condición sea evaluada como true.

while (condicion) { sentencia;}Ejemplo:

n = 0;x = 0;while (n < 3) { n++; x += n;}

2.3. Sentencia while

140

▲


Usa la sentencia break para salir de un bucle.

Cuando se usa break, finaliza inmediatamente el código encerrado en las estructuras de control while, do…while, for, o switch y transfiere el control a la siguiente sentencia.Ejemplo:

for (let i = 0, max = myArray.length; i < max; i++) { if (myArray[i] == unValorDado) { break; } console.log(myArray[i]);}

2.4. Sentencia break

141

▲


La sentencia continue puede usarse para reiniciar una sentencia while, do…while o for.Cuando se usa continue, este termina la iteración en curso del código encerrado en una sentencia while, do…while o for y continúa la ejecución del bucle con la siguiente iteración.Ejemplo:

let i = 0;let n = 0;while (i < 5) { i++; if (i == 3) { continue; } n += i;}

2.5. Sentencia continue

142

▲


La sentencia for…in itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JS ejecuta las sentencias especificadas.

for (variable in objeto) { sentencias;}Ejemplo:

for (var i in obj) { console.log(i, obj[i]);}

2.6. Sentencia for…in

143

▲


La sentencia for...of crea un bucle iterando sobre objetos iterables (incluyendo Array, Map, Set, argumentos, objetos, etc), invocando una iteración personalizada conectando con sentencias para ser ejecutadas por el valor de cada propiedad distinta.

for (variable of objeto) { sentencias;}Ejemplo:

let myArray = [3, 5, 7]; myArray.foo = "hello";for (let i in myArray) { console.log(i); // "0", "1", "2", "foo"} for (let i of myArray) { console.log(i); // "3", "5", "7"}

2.7. Sentencia for…of

144

▲


1. Definición de una function.

2. Arrow function (función flecha).

3. Funciones predefinidas.

3. Estructuras de control (funciones)

145

▲


Las funciones son uno de los pilares fundamentales en JS. Una función es un procedimiento en JS –un conjunto de sentencias que realizan una tarea o calculan un valor–.Para usar una función, debe definirse en algún lugar del ámbito desde el cual se desea llamar. En función de su contexto, a una función se le llama factory function, constructor o método.La definición de una función consiste de la palabra clave function, seguida por:

1. El nombre de la función (opcional).2. Una lista de argumentos para la función, encerrados entre paréntesis y

separados por comas (,).3. Las sentencias JS que definen la función, encerradas por llaves, { }.function square(number) { return number * number;}

3.1. Definición de una function

146

▲


Las funciones pueden también ser creadas por una expresión de función. Tal función puede ser anónima; no debe tener un nombre.

const square = function (number) { return number * number };let s = square(4); // s obtiene el valor 16

También se puede proporcionar un nombre a una expresión de función, y éste puede ser utilizado dentro de la función para referirse a si misma, o en procesos de depuración.

const factorial = function fac(n) { return (n < 2) ? 1 : n*fac(n-1) };let f = factorial(3); // f obtiene el valor 6;


147

▲


Los argumentos de una función son guardados en un objeto similar a un Array.Dentro de una función, se puede acceder a los argumentos pasados a la misma de la siguiente forma:

arguments[i]

donde i es el número ordinal del argumento, comenzando desde cero.El número total de argumentos es almacenado en su propiedad length.


148

▲


En JS, los valores de los argumentos de las funciones están establecidos por defecto a undefined.En el pasado, la estrategia general para establecer los argumentos por defecto era comprobar los valores de éstos en el cuerpo de la función y asignar un valor si estos eran undefined.A partir de ECMAScript 6 (2015), hay dos nuevos tipos de parámetros:parámetros por defecto y parámetros rest.Con los parámetros por defecto, la comprobación en el cuerpo de la función ya no es necesaria.La sintaxis de parámetros rest nos permite representar un número indefinido de argumentos en forma de Array.

function multiply(multiplier, ...theArgs) { return theArgs.map(x => multiplier * x) }let myArray = multiply(2, 1, 2, 3);console.log(myArray); // [2, 4, 6]


149

▲


Tiene una sintaxis más corta comparada con las expresiones de función y no tiene su propio this, arguments, super o new.target.Dos factores influenciaron la introducción de las funciones flecha: funciones más cortas y el léxico this.Hasta la llegada de las funciones flecha, cada nueva función definía su propio valor this.

function Person() { // El constructor Person() define `this` como el mismo. this.age = 0; setInterval(function growUp() { // La función growUp() define `this` como el objeto global, el cual // es diferente de el `this` definido por el constructor Person(). this.age++; }, 1000);} let p = new Person();

3.2. Arrow function (función flecha)

150

▲


Con ECMAScript 3/5 se solucionaba asignado el valor de this a una variable del mismo contexto:function Person() { let self = this; self.age = 0; setInterval(function growUp() { self.age++; // el valor es el esperado. }, 1000);} let p = new Person();

3.2. Arrow function (función flecha)

151

Las funciones flecha capturan el valor de this del contexto, por lo que funcionan como algunos esperan:function Person() { this.age = 0; setInterval(() => { this.age++; // `this` se refiere al objeto // instancia de Person. }, 1000);}let p = new Person();

▲


eval()isFinite()isNaN()parseInt() y parseFloat()Number() y String()encodeURI() y decodeURI()encodeURIComponent() y decodeURIComponent()

3.3. Funciones predefinidas

152

▲


1. Métodos interesantes de Array.

2. Métodos interesantes de Object.

3. Otros objetos interesantes de JS.

4. JavaScript Object Notation (JSON).

4. Métodos de Array y Object y otros objetos de interés

153

▲


Array.isArray()Array.concat()Array.every()Array.filter()Array.find()Array.forEach()Array.includes()Array.join()

4.1. Métodos interesantes de Array

154

Array.map()Array.pop()Array.push()Array.reduce()Array.reverse()Array.shift()String.split()Array.sort()

▲

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/isArray

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/concat

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/every

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/includes

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/pop

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reverse

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/shift

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort


Object.assign()Object.create()Object.entries()Object.keys()Object.hasOwnProperty()Object.values()

4.2. Métodos interesantes de Object

155

▲

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/assign

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/entries

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/values


4.3. Otros objetos interesantes de JS

156

▲

DateMapMathPromiseRegExpSetJSON

XMLHttpRequestAPI fetch()

- Headers

- Request

- ResponseStorage

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON

https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest

https://developer.mozilla.org/es/docs/Web/API/Fetch_API

https://developer.mozilla.org/es/docs/Web/API/Headers

https://developer.mozilla.org/es/docs/Web/API/Request

https://developer.mozilla.org/es/docs/Web/API/Response

https://developer.mozilla.org/es/docs/Web/API/Storage


Formato ligero de texto para el intercambio de datos.JSON está constituído por dos estructuras:

- Una colección de pares de nombre/valor. En varios lenguajes esto es conocido como un objeto, registro, estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo.

- Una lista ordenada de valores. En la mayoría de los lenguajes, esto se implementa como arreglos, vectores, listas o secuencias.

Todos los lenguajes de programación le dan soporte.Validador <https://jsonlint.com>

4.4. JavaScript Object Notation (JSON)

157

▲

https://jsonlint.com


4.4. Ejemplo de JavaScript Object Notation (JSON)

158

▲

{ id: 80, nombre: “Sandra”, vehículos: [ { modelo: “Seat Panda”, tipo: “coche” }, { modelo: “Vespa”, tipo: “moto” } ]}

DESARROLLO WEB - Barcelonaalexroyo.name/docs/desarrollo-web.pdfLa etiqueta debe tener el atributo...

Documents

Transcript of DESARROLLO WEB - Barcelonaalexroyo.name/docs/desarrollo-web.pdfLa etiqueta debe tener el atributo...