Entorno de desarrollo

Para el desarrollo de este curso será necesario instalar las herramientas:

IDE Visual Studio Code

Navegador Google Chrome
Versión LTS de Nodejs

1. Visual Studio Code

Opcionalmente, dentro del apartado extensiones de Visual Studio Code se
instalarán los siguientes plugins:

vscode-icons
Code Runner
HTML Preview
CSS formatter
2. Google Chrome
Google Chrome y los navegadores en general incorporan una consola de
desarrollo que puede ser abierta con el botón F12 o haciendo clic derecho y
seleccionar inspeccionar elemento.

La consola permite examinar el código HTML/CSS/JS de cualquier web que se

abra con el navegador.
Introducción a HTML
¿Qué es HTML?

HTML son las siglas de HyperText Markup Language y se traduce

como lenguaje de marcado de hipertexto. Es el componente más
básico en el mundo web. Este lenguaje nos permite definir el
significado y la estructura del contenido web.

‘Hipertexto’ hace referencia a enlaces que conectan páginas entre sí, es decir,
una web que contiene enlaces a otras páginas de esa misma web o webs
diferentes.

HTML no es un lenguaje de programación, es un lenguaje de marcado, la

diferencia reside en que simplemente define la estructura de los contenidos, no
permite realizar lógica de control ni condicional.

HTML consiste en una serie de etiquetas especiales que el navegador web

interpreta y que permiten indicar qué es cada contenido: párrafos, una lista de
elementos, una tabla, una imagen, etc.

Las etiquetas html se distinguen por:

Abrir con el símbolo <

Cerrar con el símbolo >.

Por un lado tenemos las etiquetas de apertura, por ejemplo: <p>

Por otro lado tenemos las etiquetas de cierre, por ejemplo: </p>

Todo lo que esté contenido entre ambas adoptará la estructura que indique el
tipo de etiqueta.
¿Para qué sirve HTML?
Gracias al lenguaje de marcado HTML se puede definir la estructura de un
documento web de manera que los navegadores puedan interpretarla y
mostrarla visualmente en forma de una web.

El principal objetivo es que los usuarios de internet puedan navegar fácilmente

de una manera visual a través de los contenidos.

Origen
En 1989 Tim Berners Lee inventó la WWW en el CERN (Ginebra, Suiza). La www
o World Wide Web es un sistema de distribución de documentos de hipertexto
interconectados y accesibles desde internet.

Para definir la estructura de estos documentos Tim Berners Lee crea el

lenguaje HTML cuya primera versión oficial HTML 1.0 aparece en 1993.
Estándares web
HTML es un estándar de la www permite que cualquier página web esté escrita
en una determinada versión y los navegadores web sean capaces de
interpretarlas. El estándar es formulado por:

Consorcio WWW o W3C desde 1994 dirigido por Tim Berners-Lee.

Web Hypertext Application Technology Working Group o WHATWG desde
2004.

Funcionamiento de la web
Cuando utilizamos un navegador web para acceder a un sitio web a través de
una URL ocurre lo siguiente:
 1. Se traduce la URL a una dirección IP utilizando la base de datos distribuida
de internet conocida como DNS.
2. Se envía una petición HTTP a la dirección IP solicitando el recurso web.
3. El servidor procesa la petición y devuelve un resultado, un documento
html.
4. El navegador renderiza ese documento html de forma visual interpretando
el código HTML, CSS y JavaScript para producir el resultado final, una
web.

Tecnologías web
HTML junto a las tecnologías CSS y JavaScript constituyen los pilares básicos
en la creación de páginas web. HTML se encarga del contenido de una web.

CSS o Cascading Style Sheets hace referencia a hojas de estilo en cascada y

es un lenguaje de diseño gráfico que permite definir la presentación de
contenido estructurado mediante un lenguaje de marcado, como por ejemplo
HTML.

JavaScript es un lenguaje de programación multiparadigma que se emplea

principalmente junto al código HTML y CSS para dotar a una web de
comportamiento, es decir, para hacerla más dinámica al poder ejecutar lógica
condicional, realizar operaciones, cargar datos desde el servidor, crear código
html programáticamente, mostrar u ocultar elementos en base al
comportamiento del usuario, etc.
Etiquetas head y body
1. Estructura básica HTML 5
Para crear un documento html utilizando la última versión html 5 crearemos un
archivo con extensión .html en nuestro sistema y con un entorno de desarrollo
(IDE) abrimos el archivo y escribimos dentro el código de la imagen.

Para que sea considerado un archivo html 5 correcto precisa una mínima
estructura, que se compone de doctype, un head, y un body.

•html: etiqueta que define la raíz del documento. Todos los elementos de la
página deben estar contenidos en la etiqueta HTML.
•header: contiene las cabeceras de la pagina HTML. Las cabeceras contienen
información adicional para el navegador. Pueden ser, por ejemplo, el titulo de la
página, enlaces a hojas de estilo, codificación de caracteres, etc.
•body: es el cuerpo de la página. Dentro de esta etiqueta se encuentra el
contenido que vamos a mostrar al usuario.

El entorno de desarrollo Visual Studio Code permite autocompletar el código

base de HTML 5 escribiendo el texto html5:

En HTML existen multitud de etiquetas para denotar cada tipo de elemento:

párrafo, tabla, formulario, campo de formulario, área de texto, enlace, cabecera,
lista, etc.

2. Comentarios
Los comentarios son textos que no serán interpretados por el navegador.
Únicamente se utilizan para añadir información útil para el desarrollador.

Los caracteres <!-- se utilizan para la apertura del comentario y los caracteres
--> se utilizan para el cierre.

3. Etiquetas de la cabecera
title: titulo de la página. Se muestra en la barra de titulo del navegador (o en
una pestaña si usamos un navegador con pestañas). Solo se puede añadir una
vez por documento.

meta (cambia en HTML5): añade información adicional a la página, como por

ejemplo la codificación de caracteres del documento, información sobre el
autor, palabras clave para los motores de búsqueda, etc. Se pueden añadir los
meta que sean necesarios pero sin repetirlos.

style: añade hojas de estilo explícitamente en el propio documento HTML.

link: lo podemos utilizar para referenciar ficheros externos, por ejemplo,

ficheros con hojas de estilo. Es mejor practica usar referenciar ficheros
externos de hojas de estilo, que definirlos en el propio documento HTML con la
etiqueta style para separar el contenido de la presentación. También podemos
añadir el icono de favoritos.

script: también se puede añadir dentro del cuerpo. Permite añadir un script en
la propia página, o referenciar un fichero que contiene scripts y es específico
para ello. Esta segunda forma, suele ser más adecuada puesto que el código
del script está totalmente separado del documento HTML.

<!DOCTYPE html>

<html lang="es">
<head>

<!-- Ejemplo de título -->

<title>Este es el título de la página</title>
<meta name="description" content="Descripción para los buscador" />

<!-- Etiqueta para indicar el autor de la web -->

<meta name="author" content="fundación Adecco">

<!-- Etiqueta de compatibilidad para versiones IE -->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- Etiqueta robots, indica a todos los search engine que deben
indexar esta página -->
<meta name="robots" content="all" />

<!-- etiquetas para facebook open graph -->

 <meta property="og:url" content="[Link] />
<meta property="og:type" content="article">
<meta property="og:title" content="Este es el título de la página"
/>
<meta property="og:description" content="Descripción para los
buscador" />
<meta property="og:image"
content="[Link] />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="320" />

<!-- etiquetas para twitter -->

<meta name="twitter:site" content="@usuario" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Este es el título de la página"
/>
<meta name="twitter:description" content="Descripción para los
buscador" />

<!-- Etiqueta para indicar la ruta al favicon, la imagen que se

muestra en la pestaña del navegador -->

<link rel="icon" href="imagenes/[Link]" type="image/png" />

<link rel="shortcut icon" type="image/x-icon" href="/[Link]"
/>
<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-
[Link]">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-
[Link]">
<link rel="icon" type="image/png" sizes="192x192"
href="favicon/[Link]">
<link rel="icon" type="image/png" sizes="32x32"
href="favicon/[Link]">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-
[Link]">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-
[Link]">
<link rel="manifest" href="/[Link]">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-
[Link]">
<meta name="theme-color" content="#ffffff">

<!-- La etiqueta canonical se utiliza para definir la url única que

debe indexarse, es decir, hay situaciones en las que 2 o más urls
muestran la misma página. Lo que se busca es que solo se indexe la
correcta -->
<link rel="canonical" href="[Link] />

<!-- Ejemplo de metadatos -->

<!-- Metadatos viewport: indica al navegador cómo debe controlar
las dimensiones de la página, en función del dispositivo, etc. -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

<!-- Etiqueta base permite definir la url base para todas las urls
relativas que usemos a lo largo de nuestro html -->
<base href="[Link] target="_blank">

<!-- Ejemplo de cómo importar una hoja de estilos css -->

<link rel="stylesheet" href="/css/[Link]">

<!-- Ejemplo de cómo importar un script de JavaScript -->

<script src="[Link]"></script>

</head>

<body>
 <footer>

<p>Footer</p>

</footer>

</body>

</html>

3. Etiqueta body
Etiquetas dentro de body
h1, h2, h3, h4, h5, h6: definen un tiíulo donde x es sustituido por un número del 1
al 6. h1 es el título con mayor tamaño de letra y peso semántico y h6 el de
menor tamaño y peso semántico.

<h1>Ejemplo título header h1</h1>

<h2>Ejemplo título header h2</h2>

<h3>Ejemplo título header h3</h3>

<h4>Ejemplo título header h4</h4>

<h5>Ejemplo título header h5</h5>

<h6>Ejemplo título header h6</h6>

p: define un párrafo. Entre cada párrafo, añade un pequeño espaciado si no

usamos ningún estilo adicional. Nótese que los saltos de línea existentes en el
texto del documento HTML no se materializan como tal en el navegador.
Tampoco el uso de múltiples espacios en blanco se ven reflejados como tal.
Cualquier concatenación de tabulaciones, saltos de línea, y espacios en blanco
o combinaciones de estos, se representan como un único espacio en blanco
independientemente del número de ocurrencias existentes.
pre: texto pre-formateado. El texto incluido como contenido de esta etiqueta se
representa tal y como se escribe, manteniendo espacios en blanco, saltos de
línea, tabulaciones, etc.

ol / li: la etiqueta ol define una lista numerada, mientras que li contiene cada
elemento de la lista.

ul / li: la etiqueta ul define una lista no numerada, mientras que li contiene

cada elemento de la lista.

a: nos permite crear un enlace a un fichero o pagina de nuestro sitio web,

externo a nuestro sitio web o a elemento interno de la propia página que tenga
un atributo id declarado. El contenido de la etiqueta será convertido en un
enlace. Puede contener los siguientes atributos:

href: ruta del elemento referenciado. Si el elemento es un fichero o página

externa, su valor será una ruta (absoluta o relativa), aunque también puede
ser una URL. Si el elemento es un fichero o pagina externa, su valor será
una URL. Si el elemento es interno de la propia página (referencia a una
etiqueta del propio documento), su valor tendrá el siguiente formato: #id
donde id es el identificador de la etiqueta HTML que queremos enlazar.
target: específica donde queremos abrir el enlace. Algunos valores
interesantes para este atributo son:
self: valor por defecto si no se especifica el atributo target): abre el
enlace en la misma ventana.
blank: abre el enlace en una ventana o pestana nueva.

img: inserta una imagen en el documento. Atributos:

src: URL o ruta donde se encuentra la imagen.

alt: texto alternativo. Debe ser un texto descriptivo de la imagen. Se utiliza
en lectores para invidentes.
height: altura de la imagen en pixeles.
width: anchura de la imagen en pixeles.
class: para indicar los estilos css que tendrá.

<img src="[Link] alt="Imagen de prueba">

 <!-- Ejemplo de enlace con imagen-->

<a href="[Link] target="_blank">

<img width="360" src="statics/img/playa-acantilado-libertad-

[Link]" alt="Persona en playa con acantilado y naturaleza">

</a>

div: define una división o sección en un documento HTML agrupando

elementos en un bloque (salto de línea antes y después del contenido). Su
misión es permitir aplicar estilos sobre la sección o bloque completo.

span : agrupa los elementos que contiene, pero no produce ninguno a nivel
visual. Simplemente crea un grupo de contenidos para poder aplicar estilos
sobre el conjunto completo. A diferencia de div, no crea un bloque, si no que
puede ser aplicado, por ejemplo, en una línea de texto.

br (salto de linea): crea un salto de línea.

hr (linea o regla horizontal): elementovisual utilizado para separar secciones

Atributos de las etiquetas

id: este atributo debe tener un valor único en toda la página, no deben existir
dos etiquetas con el mismo valor en su atributo id. El valor de este atributo,
identifica unívocamente la etiqueta en el que esta contenido dentro de la
pagina. Asignar un identificador a un elemento, nos puede servir, por ejemplo,
para crear un enlace interno dentro de la propia página.

style: añade los estilos CSS especificados en el valor del atributo.

class: añade un estilo CSS definido previamente en una hoja al elemento cuyo
nombre se especifica en el valor del atributo.

title: añade un texto explicativo especificado en el valor del atributo. Se

muestra como un tool tip (globo informativo). La información se muestra al
pasar el cursor sobre el elemento generado por la etiqueta.
Tablas
Las tablas son elementos compuestos por filas (rows) y columnas (columns).

Cada fila almacena valores para cada respectiva columna. Permiten representar
listados de elementos, como por ejemplo el listado de clientes de una empresa
o los usuarios registrados en una plataforma.

Se utilizan las etiquetas html: table, caption, thead, tbody, tr, th, td.

La etiqueta table define una tabla en HTML. Dentro de esta etiqueta, añadimos
las etiquetas thead y tbody, que son la cabecera (títulos de la tabla) y el cuerpo
de la tabla (datos contenidos en la tabla) respectivamente.

Dentro de las etiquetas thead y tbody, podemos añadir filas mediante la

etiqueta tr.

En las filas (tr) de la cabecera, podemos añadir celdas de título mediante la

etiqueta th.

En las filas (tr) del cuerpo de la tabla, podemos añadir celdas de datos
mediante la etiqueta td.

El número de celdas debe coincidir en cada fila, independientemente de si son

de la cabecera o del cuerpo. Si no es así, podemos hacer que una celda ocupe
más de un hueco con el siguiente atributo de la etiqueta td:

colspan: define el número de huecos que va a ocupar una columna en una

fila.

También podemos omitir la cabecera de la tabla suprimiendo las etiquetas

thead y tbody.

Ejemplo de tabla:

<table>
<!-- ENCABEZADO -->

<tr>

<th>Nombre</th>

<th>Apellido</th>

<th>Edad</th>

</tr>

<!-- DATOS -->

<tr>

<td>John</td>

<td>Doe</td>

<td>50</td>

</tr>

<tr>

<td>Mark</td>

<td>Jackson</td>

<td>33</td>

</tr>

</table>
Formularios
Los formularios HTML son elementos que permiten recoger datos del cliente
desde una página web (en el lado del cliente) y enviarlos al servidor.

Dentro del formulario, podemos introducir componentes HTML de distintas

naturalezas para este fin. Por ejemplo, campos y cajas de texto, selectores,
checkbox, radio, etc.

Desde un formulario podemos, incluso, mandar ficheros al servidor. Usando

formularios, tenemos un mecanismo para que el usuario pueda interactuar con
nuestra aplicación. Un formulario también puede ser utilizado para mostrar
datos al cliente.

Un formulario permite enviar al servidor la información recogida por los

diferentes elementos que lo componen. Los datos se envían como una lista de
parámetros. Cada parámetro se corresponde con un elemento del formulario.

La lista de parámetros se envía en formato clave / valor, donde la clave es el

nombre del elemento del formulario al que corresponde y el valor es la
información introducida o seleccionada por el usuario.

La información de un formulario se envía en una petición HTTP, por lo que

debemos indicar en el formulario cual va a ser la URL del servidor que va a
atender nuestra petición.

Una petición HTTP admite varios métodos o verbos como vimos en el modulo
uno. Podemos indicar en el formulario si la información se va a enviar usando el
método GET o POST.

Si no se especifica el método, por defecto se envía por GET.

Métodos HTTP
HTTP es un protocolo para la obtención de recursos, como los documentos
HTML. Es la base de cualquier intercambio de datos en la Web y es un
protocolo cliente-servidor, lo que significa que las solicitudes son iniciadas por
el destinatario, normalmente el navegador web.

Un documento completo se reconstruye a partir de los diferentes

subdocumentos obtenidos, por ejemplo, el texto, la descripción del diseño, las
imágenes, los vídeos, los scripts, etc.

Los clientes y los servidores se comunican mediante el intercambio de

mensajes individuales (en lugar de un flujo de datos). Los mensajes enviados
por el cliente, normalmente un navegador web, se denominan peticiones y los
mensajes enviados por el servidor como respuesta se denominan respuestas.

El protocolo HTTP consta de diferentes métodos, siendo los más utilizados GET
y POST para solicitar y enviar información al servidor.

El método GET
Método GET: la información recogida del formulario se envía en la propia URL de
la petición con el siguiente formato:

url?param_1=valor_1&param_2=valor_2&.....param_n=valor_n

Al enviarse en la propia URL, los parámetros serian visibles para el usuario.

El método POST
Método POST: los datos del formulario se envían dentro del cuerpo del mensaje
HTTP.

valor_1&param_2=valor_2&.....param_n=valor_n

Aunque los parámetros también son accesibles por el usuario, no se muestran

directamente en el navegador. Es necesario utilizar alguna herramienta o plug-
in del navegador para poder acceder a ellos.

Creación de formularios con HTML

La etiqueta form es el elemento principal en la creación de un formulario. Se
encarga de agrupar los elementos que recogerán los valores que serán
enviados en la petición HTTP.

Estos son algunos de sus atributos:

action (obligatorio): URL que va a ser llamada cuando se envíen los datos
del formulario.
method: método HTTP utilizado en la llamada al servidor. Están permitidos
los valores get y post.
target: define donde se va a mostrar la respuesta del servidor. Puede
tener los mismos valores que el atributo target de la etiqueta a: self, blank,
parent.

Para añadir un formulario a una página web, necesitamos conocer las etiquetas
con las que definimos los campos de entrada de datos del formulario.

Los elementos de entrada de datos de un formulario pueden poseer los

siguientes atributos comunes:

name: este atributo identifica el elemento dentro del formulario. Pueden

existir elementos con el mismo atributo name puesto que es relativo al
formulario en el que están incluidos.
disabled: el elemento aparece como desactivado. No es modificable por el
usuario y visualmente, se presenta de diferente forma para que el usuario
identifique claramente que el elemento está inactivo.

Puede ser útil en casos en los que, dependiendo del perfil del usuario,
queramos que no pueda introducir un valor, y queramos hacérselo saber
expresamente. Un ejemplo puede ser un formulario en el que deben darse de
alta los datos de una empresa. Si se sabe que el usuario es autónomo, no
podemos permitirle seleccionar un tipo de empresa.

Elementos de un formulario
input
A continuación veremos que etiquetas podemos incluir dentro de un formulario
(etiqueta form).

input: elemento genérico de entrada de datos. Algunos atributos interesantes

son:

type: define el tipo de entrada de datos que queremos utilizar.

Dependiendo del valor de este atributo, el componente interactuara de una
manera concreta con el usuario y tendrá un aspecto u otro.
value: valor por defecto del elemento.
readonly: si aparece este atributo, el elemento es de solo lectura y no sería
modificable por el usuario.

Tipos de input:

reset: carga los valores por defecto de todos los campos del formulario. Se
presenta al usuario como un botón. El valor de su atributo value define el
texto que contiene el botón.
submit: realiza la petición HTTP usando la URL definida en el atributo
action del formulario, y añadiendo los parámetros correspondientes a los
elementos contenidos en el formulario. Se presenta al usuario como un
botón. El valor de su atributo value define el texto que contiene el botón.
text: entrada de texto estándar. Solo admite una sola línea.
password: es igual que un input de tipo text solo que cuando se escribe
texto en el campo, se oculta con un asterisco o cualquier otro símbolo de
ocultación.
hidden: campo invisible para el usuario. Se suele utilizar para enviar datos
al servidor cuyo valor no debe ser conocido ni editado por el usuario.
radio: componente que permite seleccionar una opción entre las
presentadas al usuario. Tiene la misma función que el select simple (solo
una opción) solo que siempre se muestran todas las opciones en el
formulario. Atributos.
checked: si se presenta este atributo en alguno de los input, este será
el que aparezca seleccionado por defecto.
checkbox: elemento para marcar y desmarcar. Si se desmarca, no se
envía el atributo al cliente. Si se marca, se envía el parámetro, y como
valor se añade el atributo value.
textarea
textarea: caja de texto que admite múltiples líneas. Se utiliza para entradas de
texto de gran tamaño y admite saltos de línea. Si se añade contenido a la
etiqueta, este aparecerá como valor por defecto de la misma.

Si no se indica lo contrario mediante estilos, el área de texto permitirá ser

redimensionada por el usuario.

Atributos del elemento textarea:

rows: numero de filas.

cols: numero de columnas.
readonly: al igual que en el elemento input, si aparece este atributo, el
elemento es de solo lectura y no sería modificable por el usuario.

select
select / option: elemento que permite elegir entre una lista de opciones. El
elemento principal es la etiqueta select que contendrá la lista de posibles
opciones.

Atributos de la etiqueta select:

múltiple: si aparece este atributo, el componente permite seleccionar más

de un elemento de la lista. Manteniendo pulsada la tecla Ctrl y haciendo
click en cada elemento de los que queremos seleccionar.

Como contenido de la etiqueta select, podemos tener una o más etiquetas

option. Por cada etiqueta option que añadimos a select, se añade un elemento
a la lista desplegable que se muestra al usuario.

El contenido de la etiqueta option es el texto que se mostrara al usuario.

Atributos de la etiqueta option:

value: valor que se enviara al servidor si se selecciona la opción.

disabled: no solo podemos desactivar el componente completo añadiendo
este atributo a la etiqueta select, sino que también podemos desactivar
 algunas de las opciones concretas.
selected: si se presenta este atributo en una opción, aparecerá como
seleccionada. Si no, se selecciona por defecto la primera opción.

Ejemplo
Ejemplo de formulario completo:

<form action="/users" method="POST">

<label for="first-name">First name:</label><br>

<input type="text" id="first-name" name="first-name"

placeholder="Alan"><br>

<label for="last-name">Last name *</label><br>

<input type="text" id="last-name" name="last-name"

placeholder="Sastre"><br>

<label for="email">Email:</label><br>

<input type="email" id="email" name="email"

placeholder="alan@[Link]"><br>

<label for="password">Password:</label><br>

<input type="password" id="password" name="password"><br>

<label for="web">Web:</label><br>

<input type="url" id="web" name="web"

placeholder="[Link]"><br>
<label for="price">Price: </label><br>

<input id="price" type="number" step="0.01" value="0.00" ><br>

<label for="mensaje">Mensaje:</label><br>

<textarea id="mensaje" name="mensaje" placeholder="Escribe tu

mensaje"

rows="6" cols="40"></textarea>

</form>
Nuevas etiquetas en HTML 5
Los cambios introducidos en HTML5, en general pretenden simplificar ciertas
declaraciones que en versiones previas, eran innecesariamente complejas. A
continuación veremos algunas de ellas.

El primer cambio que encontramos en HTML5 se encuentra en la definición del

tipo de documento (primera línea del documento HTML). Quedaría de la
siguiente manera:

<!DOCTYPE html>

También se ha simplificado la declaración de las siguientes etiquetas:

meta (específico de codificación de caracteres): ahora se ha simplificado

quedando de la siguiente manera:

<meta charset="UTF-8">

link:

<link rel="stylesheet" href="[Link]" />

script:

<script src="[Link]"></script>

Elementos eliminados en HTML 5

Etiquetas eliminadas
acronym: explica acrónimos. Mejor usar abbr.

applet: inserta un applet. Resulta mejor usar la etiqueta object.

basefont: tamaño de fuente predeterminado. Resulta mejor usar CSS.

big: resalta un texto. Resulta mejor usar CSS.

center: centra un texto. Resulta mejor usar CSS.

dir: lista directorios. Resulta mejor usar la etiqueta ul.

font: estilo fuente. Resulta mejor usar CSS.

frame, frameset, noframes: etiquetas para marcos. Resulta mejor usar CSS.

strikes: muestra tachado en el texto. Resulta mejor usar CSS.

tt: muestra el texto como espaciado simple. Resulta mejor usar CSS.

u: subraya el texto. Resulta mejor usar CSS.

xmp: para texto preformateado. Resulta mejor etiqueta pre.

Atributos eliminados
align: La alineación horizontal se debe utilizar con CSS.

link, vlink, alink: en enlaces. Mejor usar CSS.

bgcolor: el color de nuestro componente debe ir con CSS.

height, width: altura y anchura. Mejor usar CSS.

scrolling (en iframes): obsoleto debido a su falta de usabilidad.

valign: para la alineación vertical se debe utilizar con CSS.

hspace, vspace: espacios en blanco se consideran mala práctica.

celpadding, cellspacing, border (en tablas): mejor con CSS.

target: Solo se debería usar el valor _blank.

font: el tipo de letra debe definirse con CSS.

marquee: desplazamiento de texto. Obsoleto por falta de usabilidad.

Nuevos elementos incorporados en HTML 5

Con la aparición del estándar HTML, se añaden una serie de nuevas etiquetas
y atributos al lenguaje.

Etiquetas semánticas
El HTML 5 introduce una serie de elementos estructurales que facilitaran tanto
el desarrollo de las páginas como también el análisis de las mismas por
buscadores.

Son elementos que pretenden concretar la funcionalidad del elemento div

(usado como divisor en bloque) y darle a su contenido un significado
semántico.

Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la

página son:

main: esta etiqueta contiene el cuerpo de la aplicación o del documento. El

contenido principal consiste en aquel que está directamente relacionado con el
tema central del documento o con la funcionalidad principal de la aplicación.

header: el elemento header debe utilizarse para marcar la cabecera de una

página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc.).
Puede estar anidado en otras secciones de la página (es decir que no sólo se
utiliza para la cabecera de la página).

footer: se utiliza para indicar el pie de la página o de una sección. Un pie de

página contiene información general acerca de su sección el autor, enlaces a
documentos relacionados, datos de derechos de autor etc.

nav: representa una parte de una página que enlaza a otras páginas o partes
dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un
elemento nav.

section: el elemento section representa un documento genérico o de la sección

de aplicación. Una sección, en este contexto, es una agrupación temática de
los contenidos.

Puede ser un capitulo, una sección de un capitulo o básicamente cualquier cosa

que incluya su propio encabezado. Una página de inicio de un sitio Web puede
ser dividida en secciones: introducción, noticias, información de contacto etc.

aside: el elemento aside representa una nota, consejo, una explicación, etc.
Este elemento puede ser utilizado para efectos de atracción, como las comillas
tipográficas o barras laterales, para la publicidad, por grupos de elementos de
navegación, y por otro contenido que se considera por separado del contenido
principal de la página.

article: el elemento article representa una entrada independiente en un blog,

revista, periódico etc.

Cuando se anidan los elementos article, los artículos internos están

relacionados con el contenido del artículo exterior. Por ejemplo: en una entrada
de blog en un sitio que acepta comentarios, el elemento article principal agrupa
el articulo propiamente dicho y otro bloque article anidado con los comentarios
de los usuarios.

figure: representa una unidad de contenido que es autosuficiente y que puede

ser movido fuera del flujo principal del documento sin que esto afecte a su
significado. Por lo general contiene una figura o imagen.

figcaption: esta anidada dentro de figure y representa una nota o leyenda de la

figura.

Nuevas etiquetas en formularios

En esencia, la estructura de los formularios permanece igual que en versiones
anteriores, pero se han introducido elementos y atributos nuevos que
enriquecen la manera en la que trabajamos con formularios.
label: representa una etiqueta de un campo (texto explicativo de un campo de
formulario). Atributos:

for: indica el identificador del elemento de formulario al que referencia. De

esta forma, podemos pinchar en la etiqueta y el navegador pondrá el foco
sobre el elemento referenciado.

Se ha ampliado el número de tipos para la etiqueta input:

number: específico para números.

search: específico para input de buscadores.
url: específico para direcciones con formato URL.
tel: campo específico para teléfono.
email: campo de texto específico para e-mails.
color: muestra una paleta de colores para elegir.
range: muestra un componente de tipo slider (barra de desplazamiento).
Permite elegir un valor dentro de un rango.
datetime, date, month, week, time y datetimelocal: específicos para
manejar fechas.

Nuevos atributos en formularios

Además, se añaden nuevos atributos a los formularios:

placeholder: rellena el campo con un valor ilustrativo. Cuando pinchamos

en el campo, este valor desaparece permitiéndonos editarlo.
required: el campo es obligatorio, es necesario darle algún valor.
pattern: permite definir una expresión regular para validar el valor del
campo.
title: permite añadir información extra al mensaje de error que genera la
validación del campo.
novalidate: añadiendo este atributo sobre el input de tipo submit, el
formulario no se valida al pulsar el botón y se realiza la petición aunque
existan campos en rojo.
oninvalid: evento que se dispara cuando la validación del formulario no se
cumple. En el valor, se incluye el código JavaScript que va a manejar este
evento (lo veremos más adelante).
Accesibilidad y usabilidad
1. Juegos de caracteres
En informática toda la información se almacena en formato numérico. Para
guardar caracteres (letras, números, signos de puntuación, diferentes
lenguajes, símbolos, emojis, etc) es necesario establecer una correspondencia
entre los códigos numéricos y los caracteres.

Al conjunto de correspondencias se le llama juego de caracteres. Para que

todos los ordenadores puedan entender los caracteres de la misma forma y las
páginas web puedan ser correctamente interpretadas por igual se emplea un
juego de caracteres estándar.

Unicode es un conjunto de juegos de caracteres estándar utilizado en la

actualidad y existen diferentes codificaciones para transformar los caracteres a
binario: UTF-8, UTF-16, UTF-32... Desde 2014 la recomendación HTML 5
especifica que UTF-8 (Unicode Transformation Format) es la codificación
predeterminada.

Los juegos de caracteres traducen caracteres a números. Las codificaciones

traducen números a binario.

Para representar la codificación UTF-8 en las páginas HTML simplemente

utilizamos la etiqueta meta charset.
1.2. Entidades carácter
Para poder mostrar caracteres especiales en HTML utilizamos las entidades de
carácter, las cuales son referencias a caracteres.

Sintaxis: &nombre;

Por ejemplo el símbolo alfa: &alpha;

1.3. Entidades numéricas

Para poder mostrar caracteres especiales en HTML también podemos utilizar
entidades numéricas las cuales son referencias a caracteres equivalentes al
número UNICODE que referencia el carácter que queremos mostrar.

Sintaxis: &#numerounicode;

Por ejemplo el símbolo alfa: &#913;

2. Accesibilidad
La accesibilidad de una web o interfaz indica la capacidad de acceso a la
misma y a sus contenidos por todas las personas, independientemente de sus
conocimientos y de si presentan algún tipo de discapacidad (física, intelectual o
técnica).

La accesibilidad web hace referencia al conjunto de prácticas destinadas a

lograr que las páginas web sean utilizables por el máximo número de personas.

Algunas prácticas utilizadas para lograr la accesibilidad web son:

 Subtítulos en los vídeos.
Imágenes o archivos multimedia que sustituyan o complementen textos.
Tamaño fuente variable, para ajustarse a problemas de visión.
Tamaño de los elementos touchables en pantallas táctiles.
Posibilidad de interacción por voz.
Posibilidad de reproducción del contenido textual mediante voz.
Ajustes en los colores

Algunos recursos y proyectos dedicados a la mejora de la accesibilidad de las

páginas web son:

ARIA
Web Content Accessibility Guidelines (WCAG)
Web Accessibility in Mind (WebAIM)
A11Y Style Guide

3. Usabilidad
La usabilidad web hace referencia al conjunto de técnicas que ayudan a los
seres humanos a realizar tareas en entornos gráficos por ordenador.

Para que una interfaz gráfica se usable debe permitir realizar de forma sencilla
e intuitiva cualquier acción a los usuarios de la misma.

La disposición de los elementos, la presentación de los mismos (aspecto

visual), las secuencias de pasos a seguir para realizar cualquier acción son
elementos cruciales para proporcionar una buena usabilidad web.

Una mayor usabilidad se traduce en una mejor experiencia de usuario y en

consecuencia en navegaciones web satisfactorias, lo que fomenta que más
gente utilice la web.

Algunos principios que deben seguir las webs son:

Anticipación: el sitio web debe anticiparse a las necesidades del usuario.

Autonomía: la interfaz debe ser lo suficientemente intuitiva como para qué
los usuarios tengan el control del sitio web sin necesidad de ayuda o
indicaciones constantes.
 Colores: la paleta de colores utilizada debe estar en armonía y facilitar la
visualización en lugar de complicarla o dispersar la atención.
Reversibilidad: permitir deshacer acciones realizadas.
Ley de Fitts: el tiempo para alcanzar un objetivo con el razón está en
función de la distancia y el tamaño del objetivo, estos deben estar lo más
cerca de la posición previa.

4. Validación HTML
Existen diversas herramientas online con las que verificar que el marcado
HTML que hemos realizado es correcto y no tiene errores como por ejemplo:
etiquetas mal cerradas, etiquetas mal escritas, orden de etiquetas incorrecto,
etc.

W3C Markup Validation Service.

5. HTML semántico
HTML semántico hace referencia a utilizar los elementos HTML correctos para
cada propósito específico.

Por ejemplo, a la hora de definir un botón, en vez de utilizar un elemento

genérico como puede ser <div>, mejor utilizar una etiqueta semántica que ya
esté creada para botones, como es el caso de <button>. Elementos genéricos:
<div>, <span> Elementos semánticos: <button>, <form>, <table>, <h1>, <article>,
<footer>, <nav>, <header>.

Los motores de búsqueda como Google o Bing indexan mejor la información

cuando utilizamos elementos semánticos, favoreciendo el SEO.

Otro aspecto semántico importante son los atributos:

El atributo alt permite ofrecer un texto descriptivo para una imagen en

caso de que la imagen no pueda ser cargada en el navegador por
problemas de conexión lenta.

<img src="[Link]" alt="Fundación Adecco Logo">

 El atributo title sirve para añadir información entra a un elemento, de
manera que cuando pasamos por encima con el ratón se muestra en forma
de tooltip. Se emplea especialmente en enlaces:

Accede pulsando <a href=”/adecco-intranet” title=”Enlace a Intranet

Adecco”>aquí</a>
Introducción a CSS
¿Qué es CSS?

CSS son las siglas de Cascade Style Sheets, en español Hojas de

estilo en cascada.

CSS es un lenguaje de reglas utilizado para describir la presentación y estilo de

los elementos descritos por lenguajes de marcado como HTML, XML, SVG,
RSS, etc.

El código CSS es el código que da estilo a los contenidos web, por ejemplo:
color, tamaño, posición, espaciado, márgenes, animaciones, responsive
(adaptación a múltiples resoluciones), etc.

CSS no es un lenguaje de programación, tampoco un lenguaje de marcado. CSS

es un lenguaje de hojas de estilo y sirve para definir y crear la presentación de
un documento estructurado escrito en un lenguaje de marcado.

Origen
CSS fue propuesto por primera vez en 1994 y su lanzamiento oficial tiene lugar
en 1996.

CSS permite que un documento html pueda ser influido por múltiples hojas de
estilo por medio de los estilos en cascada.

La principal ventaja de separar la estructura de la presentación es permitir que

diferentes hojas de estilo puedan describir diferentes presentaciones en
función de las pantallas y editores, si se va a imprimir, etc.

¿Para qué sirve CSS?

CSS nos aporta multitud de ventajas a la hora de desarrollar interfaces gráficas:
 Separación del contenido y la presentación.
Consistencia.
Ancho de banda gracias a sistemas de caché.
Formateo de página.
Accesibilidad.
Experiencia de usuario.

Sintaxis CSS
El código CSS está compuesto por conjuntos de reglas que consisten en
selectores y declaraciones de bloques:

Cada selector apunta al elemento html sobre el que se quiere aplicar el

estilo css.
Cada bloque de declaración puede contener una o más declaraciones
separadas por punto y coma (;)
Cada bloque de declaración se abre y se cierra con llaves {}.

Tipos de selectores
Los selectores CSS definen los elementos a los que se aplica un conjunto de
reglas CSS. Los selectores pueden ser de varios tipos, divididos en 5
categorías:

1. Selectores simples: basados en id, clase, nombre de etiqueta.

2. Combinadores: combina selectores para delimitar aquellos elementos
específicos.
3. Pseudoclases: permiten definir estados especiales, por ejemplo cuando el
foco está sobre determinado elemento.
4. Pseudoelementos: permiten dar estilo a ciertas partes de elementos.
5. Selectores de atributo: selecciona elementos en función de la presencia
de un atributo.

Formas de utilizar CSS

1. Etiqueta style
Mediante la etiqueta html <style> podemos añadir código css sobre un fichero
html. La etiqueta style se puede situar en cualquier parte del documento html,
pero el lugar idóneo es antes del cierre de la etiqueta </head>.

Se pueden crear tantos bloques style como se desee, pero lo idóneo es agrupar
todo el css en un único bloque style, para facilitar al navegador su lectura.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>

<style>

#email{
color:red;
}
.red{
color:red;
}

h1 {
color: steelblue;
font-size: 15px;
}

p {
color: chocolate;
}
h2 {
color: blue;
}

</style>
</head>
<body>
<h1>Encabezado h1</h1>

<p>Esto es un párrafo</p>
 <h2>Ejemplo título h2</h2>

<a id="email"
href="[Link]

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,

quia!</p>

<p class="red">Lorem ipsum dolor sit, amet consectetur adipisicing

elit. Fuga, quia!</p>

<p class="red">Lorem ipsum dolor sit, amet consectetur adipisicing

elit. Fuga, quia!</p>

</body>
</html>

2. CSS inline
Otra forma de utilizar estilos css es directamente sobre los elementos html,
mediante el atributo style dentro de las propias etiquetas html.

Dentro del atributo style de un elemento html podemos agregar todos los
conjuntos de reglas css necesarios.

La principal desventaja de este método es que se mezcla el código html con el

código css dificultando su lectura.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>

</head>

<body>
 <h1 style="color:steelblue;">Encabezado h1</h1>

<p style="color:chocolate;">Esto es un párrafo</p>

<h2 style="color:green;">Esto es un h2</h2>

<h2>Otro h2</h2>

<h3 style="margin-top:50px;color:darkgreen;font-
size:20px;">Encabeza h3</h3>

</body>
</html>

3. Hojas css externas

La forma más común y recomendada de utilizar css es mediante hojas css
externas. Utilizamos la etiqueta link para importar una hoja de estilos css
externa a nuestro archivo html.

La hoja externa es un archivo con la extensión css y todos los estilos definidos
dentro de ella tendrán efecto a lo largo del código html del documento sobre el
que se importa.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="css/[Link]">

<link rel="stylesheet" href="[Link]">
<link rel="stylesheet"
href="[Link]
bootstrap/4.6.0/css/[Link]" integrity="sha512-
cKoGpmS4czjv58PNt1YTHxg0wUDlctZyp9KUxQpdbAft+XqnyKvDvcGX0QYCgCohQenO
uyGSl8l1f7/+axAqyg==" crossorigin="anonymous" />
 </head>
<body>

<!-- Sistema de jerarquías -->

<!-- Afectados por la primera hoja de css -->

<h1>Encabezado h1</h1>

<h2>Esto es un h2</h2>

<!-- afectados por la segunda hoja de css -->

<p>Esto es un párrafo</p>

<h3>Esto es un h3</h3>

</body>

</html>

Validación de CSS
Existen diversas herramientas online con las que verificar que el código CSS
que hemos realizado es correcto y no tiene errores como por ejemplo:
propiedades o reglas mal cerradas, selectores mal escritos, orden de etiquetas
incorrecto, etc.

Servicio de validación de CSS.

Limitaciones CSS
Existen ciertas limitaciones a la hora de trabajar con selectores y estilos css:

Los selectores no pueden ascender.

Las pseudo clases dinámicas no se pueden controlar.
No se pueden nombrar estilos css.
No se pueden incluir estilos de una regla dentro de otra.
No se puede seleccionar texto específico sin alterar el marcado.
Reglas CSS
CSS (Cascading Style Sheets) es un lenguaje usado para definir la presentación
de un documento HTML.

La idea que subyace detrás del CSS es separar la estructura de un documento

de su presentación.

Cuando usamos HTML, todos los elementos mostrados tienen un estilo por
defecto definido, CSS redefine estos atributos para mejorar la presentación de
una página o, incluso permite visualizar un mismo HTML de varias formas
diferentes.

Cómo se define un estilo

En primer lugar, veremos cómo se definen las propiedades CSS. El formato para
definir un estilo sería el siguiente:

selector {
propiedad_1: valor_1;
propiedad_2: valor_2;
propiedad_n: valor_n;
}

Existen las siguientes maneras para definir el elemento al que aplica un estilo:

Selectores
Pseudoclases CSS3

1. Selectores
Selector universal. Se aplica a todas las etiquetas.

* {
...
 }

Selector de tipo o etiqueta. Se aplica a todas las etiquetas con ese nombre.

div {
...
}

Agrupación de selectores. Se aplica a todas las etiquetas que coincidan con

dichos nombres de etiqueta.

h1, h2, h3 {
...
}

Selector descendiente: Se aplica a todas las subetiquetas descendientes

directas o no de una etiqueta.

div p {
...
}

Selector de clase: Se aplica a las etiquetas que tengan como valor de atributo
class el valor nombre_clase.

.nombre_clase {
...
}

Selector de identificador: Se aplica con el símbolo # a la etiqueta cuyo atributo

id con el nombre indicado.

#identificador {
...
 }

Selector de hijos: Se aplica a todas las subetiquetas (derecha) que sean hijos
directos de la etiqueta (izquierda).

div > p {
...
}

Selector adyacente: Se aplican a todas las etiquetas de tipo etiqueta_2 que

estén justo al lado de una etiqueta etiqueta_1.

div + p {
...
}

Selector de atributos por nombre: Selecciona todas las etiquetas que

contengan dicho atributo.

input[selected] {
...
}

Selector de atributos por valor: Selecciona todas las etiquetas que contengan
dicho atributo con ese determinado.

input[name="dni"] {
...
}

2. Pseudoclases CSS
Las pseudoclases se aplican a etiquetas que se encuentran en un estado
concreto. De esta forma, podemos aplicar estilos distintos, por ejemplo, a un
estilo visitado y a otro no visitado.

selector:estado {
propiedad_1: valor_1;
propiedad_2: valor_2;
propiedad_n: valor_n;
}

Estos estilos se declaran de la siguiente forma:

hover: selecciona el elemento sobre el cual pasa el ratón. Tiene los

diferentes estados:
active: selecciona el elemento que activa el usuario a través de un click.
focus: selecciona el elemento que tiene el foco del navegador. También
hay algunos específicos para enlaces:
link: selecciona los enlaces que no hayan sido visitados por el
usuario.
visited: selecciona los enlaces que hayan sido visitados por el
usuario.

3. Propiedades CSS
Tipo de letra (fuente)
font-family: tipo de letra
font-size: tamaño de letra
font-style: inclinación (cursiva). Posibles valores: normal | italic |oblique
font-weight: grosor de la fuente. Posibles valores: normal | bold | bolder |
lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Texto
color: color del texto.
direction: dirección del texto. Posibles valores ltr | rtl
letter-spacing: espacio entre caracteres.
line-height: espaciado entre líneas.
 text-align: alineación de texto. Posibles valores: center | justify | left |
right
vertical-align: alineación vertical. Se puede añadir un valor numérico o
uno de los siguientes valores: baseline | bottom | middle | sub | super |
text-bottom | text-top | top
text-decoration: decoración del texto. Posibles valores: none | blink | line-
through | overline | underline
text-indent: tamaño de sangría de la primera línea de un párrafo.
white-space: comportamiento de saltos de línea y espacios en blanco.
Posibles valores: normal | nowrap | pre | pre-line | pre-wrap.
word-spacing: espacio entre palabras.
text-shadow: sombras del texto.

Bordes
border-style: estilo del borde. Puede contener los siguientes valores: none |
hidden | dashed | dotted | double | groove | inset | outset | ridge | solid.

También existen propiedades que permiten definirlo por separado: border-

(left | right | top | bottom)-style.

border-color: color del borde. Su valor puede ser un color o el valor transparent
si es transparente.

También existen propiedades que permiten definirlo por separado: border-

(left | right | top | bottom)-color.

border-width: anchura del borde. Puede ser un valor en pixeles o uno de los
siguientes: medium | thick | thin.

También existen propiedades que permiten definirlo por separado: border-(left |

right | top | bottom)-width.

border: configuración completa de un borde. La sintaxis es la siguiente: border-

style border-color border-width.

También existen propiedades que permiten definirlo por separado: border-(left |

right | top | bottom).
border-radius: borde con esquinas redondeadas.

box-shadow: borde con sombra.

Márgenes
Márgenes exteriores:

margin: márgenes interiores (los 4 márgenes). Admite de uno a 4 valores (uno

por cada margen). Los valores pueden ser numéricos o el valor auto.

También existen propiedades que permiten definirlo por separado: margin-(left

| right | top | bottom).

Márgenes interiores:

padding: márgenes interiores (los 4 márgenes).

También existen propiedades que permiten definirlo por separado: padding-

(left | right | top | bottom)

Listas
list-style-image: imagen del marcador. Como valor puede contener el valor
none o una URL con el formato url(‘x’) donde x es la URL de la imagen.

list-style-position: posición del marcador. Posibles valores: inside | outside.

list-style-type: tipo de marcador. Puede ser uno de los siguientes valores:

none | circle | disc | square | decimal | decimal-leading-zero | lower-alpha |
upper-alpha | lowergreek | lower-latin | upper-latin | lower-roman | upper-roman
| armenian | georgian | hebrew(-) | cjk-ideographic | hiragana | katakana |
hiragana-iroha | katakanairoha

list-style: propiedad compuesta. Tiene la siguiente sintaxis:

list-style-image
list-style-position
list-style-type
Fondos
background-color: color de fondo.
background-image: imagen de fondo. Como valor puede contener el valor
none o una URL con el formato url(‘x’) donde x es la URL de la imagen.
background-position: posición de la imagen de fondo.
background-repeat: repetición de la imagen de fondo. Puede contener los
siguientes valores: no-repeat | repeat | repeat-x | repeat-y
background-origin: origen de la imagen de fondo. Puede tener los
siguientes valores: border-box | padding-box | content-box
background-clip: límite de la imagen de fondo.
background-size: tamaño de la imagen de fondo.
background: propiedad combinada. sintaxis: background-color /
background-image / backgroundposition / background-repeat /
background-origin backgroundclip / background-size

Tablas
border-collapse: tipo de bordes. Valores permitidos: collapse | separate
border-spacing: separación entre celdas.
caption-size: posición de la leyenda de la tabla. Valores permitidos: top |
bottom | left | right
empty-cells: borde en celdas vacías. Valores permitidos: hide | show
table-layout: tipo de distribución de la tabla. Valores permitidos: auto |
fixed

Tamaños
Tamaño de elementos:

width: anchura del elemento. Admite como valor un tamaño customizado o

el valor auto.
min-width: anchura mínima del elemento.
max-width: anchura máxima del elemento.
height: altura del elemento. Admite como valor un tamaño customizado o
el valor auto.
min-height: altura mínima del elemento.
 max-height: altura máxima del elemento.
overflow: comportamiento si se desborda el elemento debido a su
contenido. Puede tener los siguientes valores: auto | hidden | scroll | visible

Interfaz de usuario
cursor: tipo de cursor. Admite una URL con el icono del cursor url(‘x’) o los
valores auto | crosshair | default | help | move | pointer | progress | n-resize
| ne-resize | e-resize | seresize | s-resize | sw-resize | w-resize | nw-resize
| text | wait.
outline-color: color de los bordes. Mismos valores que color.
outline-width: anchura de los bordes. Mismos valores que border-width.
outline-style: estilo de los bordes. Mismos valores que borderstyle.
outline: estilo combinado.

Otras características de CSS3

Con CSS3 también podemos realizar modificaciones de las siguientes
características.

Color:

Colores HSL
Colores HSLA
Colores RGBA
Opacidad (elementos translucidos)

Color degradado:

Degradados lineales
Degradados lineales de repetición
Degradados radiales de repetición
Degradados radiales

Otros:

Media queries
Múltiples columnas de texto
Propiedades orientadas a discurso o lectura automática de páginas web
Animaciones CSS3
Posicionamiento CSS
Reglas para el posicionamiento
float: modo de posicionamiento flotante. Indica sobre que elemento flota.
Admite los siguientes valores: none | left | right
clear: indica el lado del elemento en el que no puede haber elementos
flotantes. Puede tener los siguientes valores: none | both | left | right
position: tipo de posicionamiento del elemento. Admite los siguientes
valores: absolute | fixed | relative | static
top: posición del borde superior del elemento. Admite una distancia
personalizada o el valor auto.
right: posición del borde derecho del elemento. Admite una distancia
personalizada o el valor auto.
bottom: posición del borde inferior del elemento. Admite una distancia
personalizada o el valor auto.
left: posición del borde izquierdo del elemento. Admite una distancia
personalizada o el valor auto.
z-index: prioridad de visibilidad en elementos apilados (eje z). Admite
como valor un número entero que define su prioridad o el valor auto.

Modelo caja
El modelo de caja de CSS es la estructura que se aplica a todas las cajas en
CSS. Este modelo de caja instruye al navegador sobre cómo las diferentes
partes de una caja crean un elemento que aparecerá en la página web. El
modelo de caja representa el contenido, el relleno, el borde y el margen de una
caja.

Echemos un vistazo a cada elemento del modelo de caja:

Contenido. El contenido de la caja, donde aparecerá el texto, los

formularios, las imágenes y otros elementos web.
Padding. El espacio entre el contenido de una caja y el borde de la misma.
El relleno de una caja es transparente.
Bordes. El borde que rodea el contenido de una caja, o alrededor del
relleno de una caja si se especifica un valor de relleno.
Margen. Es el espacio entre el borde exterior de un borde y otros
elementos de una página web. El relleno de una caja es transparente.

1. Área de contenido
El área de contenido está en el centro del modelo de caja. Aquí es donde
aparecen el texto, las imágenes y otros elementos en un elemento web.
Utilizamos las propiedades CSS de altura (height) y anchura (width) para
determinar el tamaño del área de contenido.

Por defecto, el tamaño de un área de contenido será igual al tamaño de sus

elementos. Si tienes una línea de texto, la caja será tan larga y tan alta como la
línea de texto.

2. Área de padding
El área de relleno extiende el área de contenido. Crea un espacio entre el
contenido de una caja y su borde. El relleno se utiliza a menudo para crear
banners y otros elementos de anuncio en una página web.

Para aplicar el relleno a una caja, podemos utilizar la propiedad CSS padding.

3. Área de borde
El área de borde es donde aparecerá el borde de una caja. Los bordes son
contornos coloreados fuera de cualquier relleno. Puede utilizar cualquier color
para estilizar un borde. Hay un número de diseños incorporados para los
bordes, también.

4. Área de margen
El área de margen es la capa más externa del modelo de caja. Esta área crea
un espacio vacío que separa un elemento de otros elementos de la página web.

Ejemplo propiedades CSS para el modelo caja:

element {

padding-bottom: 5px;
padding-right: 5px;

border-top-width: 2px;
border-top-style: solid;
 padding-left: 5px;
padding-top: 5px;

border-bottom-width: 2px;
border-bottom-style: solid;
border-right-style: solid;
border-right-width: 2px;
border-left-width: 2px;
border-left-style: solid;

margin-top: 40px;
margin-bottom: 50px;
}

Modelo flexbox
El modelo Flexbox de CSS fue creado para mejorar el modelo de caja de CSS
establecido.

El modelo Flexbox sigue conteniendo los principales elementos del modelo de

caja (margen, relleno, borde y contenido), pero ofrece flexibilidad para rellenar
mejor el espacio con los hijos del contenedor/padre.

El modelo flexbox implica una relación entre el contenedor padre y sus

contenedores hijos. Las propiedades de flexbox del padre afectan directamente
al movimiento de los contenedores hijos en el espacio libre del padre.

Usamos flex-direction, justify-content, align-items y flex-wrap para

manipular la posición del hijo en el padre y usamos order y align-self en el hijo
para anular algunos de esos valores predeterminados o reglas establecidas en
el padre.

La estructura de un diseño flexible se basa en dividir los elementos en

contenedores (elementos padre) y elementos (elementos hijo).

En Flexbox, los elementos flex se encogerán y distribuirán el espacio entre los

elementos según el espacio de su contenedor, como su comportamiento inicial.
Cambiando los valores de flex-grow y flex-shrink puedes indicar cómo quieres
que se comporten los elementos cuando encuentren más o menos espacio a su
alrededor.
Responsive
En los primeros tiempos del diseño web, las páginas se construían para un
tamaño de pantalla concreto. Si el usuario tenía una pantalla más grande o más
pequeña de lo que el diseñador esperaba, los resultados iban desde barras de
desplazamiento (scroll) no deseadas hasta longitudes de línea demasiado
largas y un mal uso del espacio.

A medida que se fueron ampliando los tamaños de pantalla,

apareció el concepto de diseño web responsive (RWD), un
conjunto de prácticas que permite que las páginas web modifiquen
su diseño y apariencia para adaptarse a diferentes anchos de
pantalla, resoluciones, etc.

Es una idea que cambió la forma de diseñar para una web multidispositivo, y en
este artículo te ayudaremos a entender las principales técnicas que debes
conocer para dominarlo.

Es importante entender que el diseño web responsivo no es una tecnología

independiente: es un término utilizado para describir un enfoque de diseño web
o un conjunto de buenas prácticas, utilizado para crear un diseño que pueda
responder al dispositivo que se utiliza para ver el contenido.

El diseño responsivo se refiere a un diseño de sitio o aplicación que responde al

entorno en el que se ve. Abarca una serie de características y técnicas de CSS
y HTML y ahora es esencialmente la forma en que se construyen los sitios web
por defecto.

Técnicas responsive
1. Media queries
El diseño responsivo sólo pudo surgir gracias a la consulta de medios. La
especificación Media Queries de nivel 3 se convirtió en una Recomendación
Candidata en 2009, lo que significa que se consideró que estaba lista para ser
implementada en los navegadores. Las consultas de medios nos permiten
realizar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor
que una determinada anchura, o una determinada resolución) y aplicar CSS de
forma selectiva para estilizar la página de forma adecuada a las necesidades
del usuario.

Por ejemplo, la siguiente consulta de medios comprueba si la página web actual

se está mostrando como medio de pantalla (por lo tanto, no es un documento
impreso) y la ventana gráfica tiene al menos 800 píxeles de ancho. El CSS del
selector .container sólo se aplicará si estas dos cosas son ciertas.

2. Técnicas de layout (posicionamiento)

Modelo caja
Modelo Flexbox
Modelo Grid

3. Imágenes responsive
El enfoque más sencillo para las imágenes responsivas era el de tomar una
imagen que tuviera el tamaño más grande que pudiera necesitarse y se reducía:

img {
max-width: 100%;
}

Queremos mostrar un contenido de imagen idéntico, sólo que más grande o

más pequeño dependiendo del dispositivo. El elemento estándar <img>
tradicionalmente sólo permite dirigir el navegador a un único archivo de origen:

<img src="[Link]" alt="Ejempo imagen">

Sin embargo, podemos utilizar dos nuevos atributos, srcset y sizes, para
proporcionar varias imágenes de origen adicionales junto con sugerencias para
ayudar al navegador a elegir la correcta.
 <img srcset="[Link] 480w,
[Link] 800w"
sizes="(max-width: 600px) 480px,800px"
src="[Link]"
alt="Ejempo imagen">

4. Tipografía responsive
Utilizar un tamaño fijo de letra puede ocasionar problemas si el tamaño fuente
es muy grande en dispositivos pequeños, o viceversa, muy pequeño en
dispositivos grandes.

Para ello se utiliza la unidad viewport vw para habilitar la tipografía receptiva.

1vw es igual al uno por ciento del ancho de la ventana gráfica, lo que significa
que si establece su tamaño de fuente usando vw, siempre se relacionará con el
tamaño del viewport.

Nunca debe configurar el texto utilizando únicamente unidades de ventana

gráfica con el fin de evitar la capacidad de hacer zoom sobre la pantalla.

Se combina con la función calc(). Se agrega la unidad vw a un valor

establecido usando un tamaño fijo como ems o rems.

Esencialmente, la unidad vw agrega además de ese valor ampliado:

h1 {
font-size: calc(1.2rem + 3vw);
}

5. La etiqueta meta viewport

La etiqueta html meta de nombre viewport indica a los navegadores móviles
que deben ajustar el ancho de la ventana gráfica a la anchura del dispositivo, y
escalar el documento al 100% de su tamaño previsto, lo que muestra el
documento al tamaño optimizado para todo tipo de dispositivos.
¿Por qué es necesario esto? Porque los navegadores móviles tienden a basarse
en la anchura de la ventana gráfica.

Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente

empezó a ver los sitios web en una pantalla de teléfono pequeña, la mayoría de
los sitios no estaban optimizados para móviles. Por lo tanto, el navegador móvil
establecía la anchura de la ventana gráfica en 960 píxeles, representaba la
página con esa anchura y mostraba el resultado como una versión ampliada del
diseño de escritorio.

Para activarla se utiliza la siguiente etiqueta dentro de la sección head del

documento html:

<meta name="viewport" content="width=device-width,initial-scale=1">

Frameworks CSS: Bootstrap
Bootstrap es un framework CSS para diseño de aplicaciones web.

Proporciona una serie de clases CSS predefinidas para usar, a través de las
cuales provee de estilos ya preparados para aquellos elementos comunes en el
código html de una aplicación web, como por ejemplo: tablas, formularios,
botones, enlaces, encabezados, tipografía, etc. Se trata de un framework
orientado al desarrollo front-end. Página oficial.

Origen
Su nombre inicial era Blueprint, que hace referencia a plano, plantilla, prototipo
y fue desarrollado en Twitter y liberado a la comunidad en 2011 como open
source, convirtiéndose en el proyecto más popular de GitHub en 2012.

La idea principal detrás de bootstrap era utilizar un marco de trabajo común

para el desarrollo de las interfaces de las herramientas internas utilizadas en
Twitter, permitiendo acelerar los desarrollos.

De esta forma se logra consistencia entre las distintas herramientas, evitando

tener que definir desde cero una y otra vez todos los estilos a utilizar, lo que
genera inconsistencias.

¿Cómo se usa Bootstrap?

Desde la página oficial podemos pulsar el botón Get Started que nos lleva a la
documentación oficial de Bootstrap sobre cómo importarlo en nuestros
documentos HTML.

Podemos copiar el Starter template y pegarlo en un nuevo archivo html en

nuestro sistema, desde Visual Studio Code.

El Starter template es simplemente un documento html 5 que trae los links

necesarios a las librerías bootstrap para poder utilizar las clases bootstrap
dentro del código html.
Ejemplo de plantilla Bootstrap de la página oficial:

```html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">

<!-- Bootstrap CSS -->

<link
href="[Link]
[Link]" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Option 1: Bootstrap Bundle with Popper -->

<script
src="[Link]
[Link]" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>

Elementos de Bootstrap
Para conocer los diferentes tipos de elementos que ofrece bootstrap revisamos
la documentación oficial.

Algunos de los componentes bootstrap disponibles:

Acordeón
Alertas
Insignias
Etiquetas
Botones
Cartas
Carousel
Barras de navegación, etc.
Introducción a JavaScript
¿Qué es JavaScript?
JavaScript (abreviado JS) es un lenguaje de programación de alto nivel y
multiparadigma creado para dotar de dinamismo a las páginas web, evitando
así una apariencia estática.

Los programas desarrollados en JavaScript se llaman scripts y se pueden

escribir directamente sobre documentos html o en archivos externos con
extensión .js, siendo ejecutados por el navegador cuando se carga la página
web.

Actualmente JavaScript es soportado por todos los navegadores web, lo que lo

convierte en el lenguaje de programación idóneo para ser ejecutado junto a
HTML y CSS para crear páginas web dinámicas, permitiendo mejoras en la
interfaz de usuario.

JavaScript es un lenguaje de programación multiparadigma en cuya sintaxis

podemos encontrar: variables, operadores, funciones, estructuras de datos,
estructuras de control condicional, estructuras de control repetitivo...

Origen
En sus orígenes, este lenguaje se llamaba LiveScript, pero se renombró a
JavaScript debido a que por aquella época el lenguaje Java era muy popular,
pero Java y JavaScript son lenguajes diferentes.

JavaScript fue desarrollado en 1995 por Netscape, empresa de software

famosa por el navegador popular Netscape navigator.

La idea principal detrás de la creación de este lenguaje fue sobrepasar la

limitación que había en aquella época de que las webs fueran estáticas una vez
se cargaban en el navegador. JavaScript se convierte en un estándar ECMA en
1997.
Versiones
JavaScript fue desarrollado en 1995 por Netscape, empresa de software
famosa por el navegador popular Netscape navigator.

En 1996 ECMA lo empieza a evaluar como una especificación para todos los
navegadores y en 1997 se declara estándar (ECMA-262).

A partir de 2016 se empiezan a lanzar versiones cada año, utilizando el número

de año como nombre de versión, en lugar de continuar la numeración ES7, ES8,
ES9, ES10, etc.
La sintaxis de JavaScript
JavaScript puede ser añadido a un documento HTML por medio de la etiqueta
<script>, añadiendo el código directamente o por medio de un archivo externo.

Etiqueta script con código

Ejemplo de documento HTML con código JavaScript dentro de la etiqueta
script

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>

<body>
<h1>Hola mundo Javascript</h1>

<!-- Código JavaScript -->

<script>
[Link]('Hola mundo!')
</script>
</body>
</html>

Etiqueta script con archivo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
 scale=1.0">
<title>Document</title>

<!-- Código JavaScript -->

<script>
[Link]('Hola mundo!')
</script>

</head>

<body>
<h1>Hola mundo Javascript</h1>

<!-- JavaScript -->

<script src="js/[Link]">
</script>
</body>
</html>

Sintaxis JavaScript
A continuación se detallan los diferentes elementos de la sintaxis de JavaScript
para la realización de programas informáticos.

1. Variables
Las variables permiten trabajar con información de diferentes tipos de datos:

números
textos
caracteres
boolean (verdadero o falso)
estructuras de datos
objetos

Para crear las variables utilizamos las palabras reservadas: var, let, const.
Siendo let y const la manera recomendada desde la versión ES6.

Para escribir comentarios se usa doble barra // o barra y asterisco /* */.

 // Number
var length = 50;
var length2 = 50.43;

// String (Cadenas de texto)

var nombre1 = "Rodrigo";
var nombre2 = "Juan";

// Booleans (true o false) (verdadero o falso)

var hasLastName = true;
var hasCar = false;

// Arrays 0 1 2 3
var productNames = ["Balón", "Silla", "Mesa", "Taza"]

// Objetos
var product1 = {
name: "Balón Liga 2005",
description: "Balón de Caucho Liga 2005 material importado
Noruega",
price: 4.99,
weight: 0.4,
quantity: 4,
hasOffer: true
}

Ejemplos let y const:

// ES6
var hola;
let adios;
let month = 'January';
const monday = 'MONDAY';

Para conocer el tipo de dato de una variable en particular se utiliza la palabra

reservada typeof:
 var miNumero = 5;
var miBoolean = false;
var miString = "Hola"
var miArray = ["Hola", "Adiós"]

var miVariable; // al no asignar valor será undefined

[Link](typeof miNumero) // number
[Link](typeof miBoolean) // boolean
[Link](typeof miString) // string
[Link](typeof miArray) // object
[Link](typeof miVariable) // undefined

2. Operadores
Los operadores son símbolos que permiten realizar operaciones con las
variables, como por ejemplo operaciones aritméticas y lógicas.

// El operador suma (+)

var resultado1 = 5 + 4;

// El operador resta (-)

var resultado2 = 5 - 4;

// El operador multiplicación (*)

var resultado3 = 5 * 5;

// El operador exponente (**) (A partir de ES6)

var resultado4 = 5 ** 3; // Equivalente a [Link](5,3)

var resultado4_2 = [Link](5, 3);

// Operador incremento
var resultado5 = 5;
resultado5++; // suma 1 a resultado5
resultado5++; // suma 1 a resultado5

// Operador decremento
var resultado6 = 5;
resultado6--; // resta 1 a resultado6
resultado6--; // resta 1 a resultado6
 // Operador división
var resultado7 = 10 / 2;
var resultado8 = 20 / 5;

// Operador módulo (resto de la división)

var resultado9 = 10 % 2;

3. Funciones
Las funciones permiten reutilizar un código desarrollado. Se crean utilizando la
palabra reservada function y un identificador:

// Función que imprime un saludo por consola

function function1() {
[Link]('Hi from function1');
}

function1(); // Para ejecutar una función escribimos su nombre y

paréntesis
function1(); // Podemos ejecutar una misma función más de una vez
function1(); // Podemos ejecutar una misma función más de una vez

Las funciones pueden tener parámetros, es decir, recibir uno o más datos
como entrada:

function function2(name) {
[Link]('Hola ' + name);
[Link]('Adiós ' + name);
}

function2('Mike');

A su vez, las funciones pueden retornar un dato, por ejemplo el resultado de

una operación:

function toFahrenheit(celsius) {
return celsius * 9 / 5 + 32;
}
 function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

function suma(num1, num2){

return num1 + num2;
}

[Link](toFahrenheit(30)); // 30ºC son 86ºF

[Link](toCelsius(86)); // 86ºF son 30ºC
[Link](toCelsius(86));
[Link](toCelsius(40));
[Link](suma(5, 5)); // 10

Las variables creadas dentro de una función son visibles dentro de la misma,
pero no fuera:

function printName(){
let age = 99; // variable visible solo dentro de la función
}

[Link](age) // Error, la variable no existe fuera de la función

4. Estructuras de control
4.1. Estructuras de control condicional

Las estructuras de control condicional permiten crear bifurcaciones en el

código, permitiendo ejecutar código de manera condicional en base a ciertas
condiciones.

// IF ELSE
var check2 = false;

if (check2) { // SI SE CUMPLE LA CONDICIÓN

[Link]('Condición check2 verdadera')
 } else { // SI NO SE CUMPLE LA CONDICIÓN
[Link]('Condición check2 falsa')
}

Se pueden comprobar múltiples condiciones haciendo uso de estructuras if,

else if, else:

if (check) {
// Este código se ejecuta solo si la condición 1 se cumple
[Link]('Condición 1 verdadera')

} else if (check2) {
// Este código se ejecuta solo si la condición 2 se cumple
[Link]('Condición 2 verdadera')

} else {
// Sse ejecuta solo si la condición 1 y la condición 2 NO se
cumplen
[Link]('Ninguna condición se cumplió, ejecutamos el
código dentro de else.')
}

4.2. Estructuras de control iterativo

Las estructuras de control iterativo permiten repetir un fragmento de código

más de una vez, en base a condiciones programadas.

Las estructuras for y while permiten iterar el código:

// Estructura for
for (let i = 0; i < 5; i+=2) {
[Link]("El valor de i es: " + (i+1));
}

// estructura while
var cont = 20;
while (20 < 10) {
[Link]("Iteración while valor cont: " + cont);
 cont++; // Incremento
}

Las palabras reservadas break y continue permiten alterar la iteración de un

bucle for o while:

// Ejemplo break: se rompe el bucle y se deja de iterar

for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // hace salirse del bucle
}
[Link]("El valor de i es: " + i)
}

// Ejemplo continue: se salta a la siguiente iteración

for (i = 0; i < 10; i++) {
if (i % 2 == 0) {
continue; // salta a la siguiente iteración
}
[Link]("Ejemplo 2 - El valor de i es: " + i)
}

5. Arrays
Una variable permite trabajar con un valor al mismo tiempo, si se quiere trabajar
con más de un valor a la vez existen las estructuras de datos como los Arrays.

Un array es una estructura de datos que puede contener más de un dato al

mismo tiempo, por ejemplo una lista de nombres.

var names = ["Bob", "John", "Raúl", "Wally", "Diego"]

Para acceder a los elementos del array se utiliza un índice, es decir, la posición
del elemento teniendo en cuenta que empiezan en 0:
 var firstName = names[0]; // Bob
var secondName = names[1]; // John

Utilizando estructuras de control se puede iterar una estructura de datos:

for (i = 0; i < [Link]; i++) {

names[i] = names[i] + " Editado"; // modifica cada nombre
[Link]("names[" + i + "]: " + names[i])
}
Librerías JavaScript: JQuery
JQuery es una librería JavaScript que aporta funcionalidades para recorrer e
interactuar con el DOM HTML, realizar animaciones CSS, gestión de eventos,
ajax para la gestión asíncrona de llamadas, etc.

Se trata de una librería gratuita, open source con licencia MIT. Es la librería
JavaScript más popular y utilizada en los sitios web más populares.

La manera más rápida de empezar a utilizar JQuery es desde una CDN, de

forma similar a bootstrap. Otra opción es descargarlo y utilizarlo como un script
de JavaScript dentro de nuestro proyecto.

¿Cómo usar JQuery?

En primer lugar será necesario obtener el archivo donde reside el código de
JQuery, el cual se puede encontrar en una Content Delivery Network (CDN) en
este enlace.

Después se añade antes del cierre de la etiqueta </body>:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>

<body>

<!-- Aquí va el código HTML de la web -->

<!-- JQuery -->

<script
src="[Link]
js" integrity="sha512-
894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e
7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-
referrer"></script>

<!-- Comprueba que JQuery funciona mostrando una ventana -->

<script>
$(document).ready(function () {
alert("Welcome")
});
</script>
</body>

</html>
Introducción
Desarrollo de una web ecommerce de ordenadores. La web mostrará
información de ordenadores portátiles donde un ordenador tiene la siguiente
información:

id: campo número entero, representa un número único para cada

ordenador y autoincremental, es decir, 1, 2, 3, 4...
imagen: una imagen miniatura del ordenador.
modelo: campo tipo texto con el nombre del modelo de ordenador.
fabricante: enlace a pantalla vista del fabricante.
precio: campo número decimal con el precio del ordenador (máximo dos
decimales).
ram: campo número entero con el número de GB de memoria RAM.
descripcion: campo área texto con una pequeña descripción del
ordenador.

Pantallas a desarrollar:
[Link]: Listado de ordenadores.
[Link]: Edición de un ordenador.
[Link]: Vista de un ordenador.
[Link]: Vista de un fabricante.
[Link]: pantalla de login.
[Link]: pantalla de registro.

1. Pantalla listado de ordenadores

Pantalla [Link].

Representa una página donde el contenido principal será una tabla que muestre
ordenadores. Cada fila de la tabla representa un ordenador, en cada columna
de cada fila se mostrarán los campos del ordenador: id, imagen,modelo,
fabricante, precio, ram, imagen (el descripción no lo incluimos en esta tabla).

La última columna de la tabla será para acciones con tres botones:

 Ver: nos lleva a la pantalla Vista de ordenador.
Editar: nos lleva a la pantalla de Detalle/Edición de un ordenador.
Eliminar: oculta la fila de la tabla sobre la que hemos pulsado borrar.

2. Pantalla edición ordenador

Pantalla [Link]

Detalle de un ordenador: representa una página donde se puede crear o editar

un ordenador, el contenido central será un formulario que permita rellenar los
campos del ordenador: modelo, fabricante (selector con 4 o 5 opciones de
fabricantes), precio, ram, descripción, imagen.

3. Pantalla vista ordenador

Pantalla [Link]

Vista de ordenador: representa una página donde visualizamos los datos de un

ordendador al cual se ha llegado desde el listado de ordenadores haciendo
click sobre su nombre, imagen o botón Ver. Aquí simplemente mostramos todos
los datos del ordenador: id, modelo,fabricante (enlace a la pantalla fabricante),
precio, ram, descripción, imagen. Usar el diseño y elementos html que se
quiera.

4. Pantalla vista fabricante

Pantalla [Link]

Al igual que existe un [Link] se creará la pantalla de vista de

fabricante.

5. Pantalla iniciar sesión

Pantalla [Link]

Pantalla con un formulario que solicite usuario y contraseña, con botón para
iniciar sesión. No está conectado con backend por lo que no realiza ninguna
acción, servirá para posteriores prácticas.
6. Pantalla registrarse:
Pantalla [Link]

Pantalla con un formulario que solicite los campos para registrar un usuario:

nombre, apellido, email, teléfono y password, con botón para registrarse.

No está conectado con backend por lo que no realiza ninguna acción, servirá
para posteriores prácticas.

Estructura común:
En la carpeta paginas de los ejemplos vistos en las clases de HTML tenemos
tres ejemplos básicos de estas 3 pantallas que pueden servir de ayuda.

Toda la información de productos será estática, es decir no hay conexiones a

servidor, será información ficticia que represente ordenadores típicos de una
tienda ecommerce escritos directamente sobre el html por el alumno.

Nota: los datos son datos ficticios que el alumno creará, así como las imágenes
utilizadas. Los datos se escriben directamente sobre HTML, de forma estática,
no es necesario crear una clase ni objeto producto desde JavaScript para
generar los elementos html dinámicamente. Cuando se explique Python en
posteriores módulos esos datos se generarán dinámicamente desde el
backend.

Para las 3 páginas html a desarrollar sería idóneo establecer una estructura
común:

1. Cabecera con título centrado: LaptopShop

2. Barra de navegación
3. Contenido principal
4. Footer

Tecnologías a utilizar:
Las tecnologías HTML5, CSS3 con BOOTSTRAP y JavaScript con JQuery.
El código CSS y JS que se desarrolle deberá ir en archivos separados .css y .js
respectivamente, importado en HTML utilizando las etiquetas link y script tal y
como se ha visto en clase.

Se deberá importar Bootstrap y JQuery haciendo uso de las CDN

correspondiente, tal y como se puede observar en las plantillas utilizadas en
clase.

JavaScript
Utilizamos JavaScript para el comportamiento de los botones de el listado de
ordenadores:

Botón Ver: que nos lleva a la pantalla visualizar ordenador [Link]

Botón Editar: nos lleva a [Link]
Botón Borrar: oculta la fila del botón pulsado, es decir, el ordenador
desaparece.

laptop-view y laptop-edit son siempre las mismas pantallas no es necesario

que carguen datos diferentes en función del ordenador seleccionado, que
cambie de forma dinámica se programará en los módulos posteriores de este
curso.