LA INTERFAZ DE USUARIO - 1

Desde el punto de vista de él o los usuarios del software, la apariencia visual

del producto terminado, es decir los controles, botones, etiquetas, etc., es el
software en sí. El usuario no sabe y no tiene por qué saber con relación al código
que ha sido necesario elaborar para que esa interfaz funcione, al igual que el
usuario de un producto electrónico (como un televisor por ejemplo) no tiene por
qué saber con relación a los circuitos, conexiones y componentes que hacen
posible su funcionamiento. El usuario sólo tiene que saber como encender,
apagar, cambiar de canal, señal, etc., y esas funciones tienen que ser, para él,
sencillas y naturales.

Por esa razón es importante que en la elaboración de software, se inviertan

recursos y tiempo en el diseño de una buena interfaz de usuario, por supuesto
sin descuidar el propósito del software. No es de utilidad un software con una
excelente interfaz, pero que no cumple con su propósito, así como es de utilidad
limitada un software que cumple con su propósito, pero que tiene una interfaz
de usuario tan complicada que es muy difícil de utilizar.

Puesto que el propósito de Javascript es el crear aplicaciones WEB (que hoy

en día son el principal producto de la industria del software) y las interfaces en
dichas aplicaciones se crean con HTML y CSS, es necesario adquirir
conocimientos de dichos lenguajes.

En este capítulo se estudia el lenguaje HTML y los eventos que los hacen
funcionales, mientras que en el siguiente se estudia el lenguaje CSS y otras
formas de enlazar los eventos a los elementos HTML.

HTML
HTML (HiperText Markup Language: Lenguaje de marcado de hipertexto)
permite incorporar los diferentes elementos de la página: títulos, párrafos,
imágenes, botones, campos de entrada, rótulos, selectores, tablas, formularios,
etc. Estos elementos se incorporan escribiendo la etiqueta que identifica al
elemento. Una etiqueta consta del nombre del elemento encerrado entre los
símbolos <> y generalmente se escriben en pares, una etiqueta de apertura (<>)
y una de cierre (</>), como se muestra a continuación con el
elemento button (botón):

write(`<button>Mi botón</button>`);
Mi botón

Que como se puede ver inserta un botón, el cual es visualmente funcional, es

decir cambia cuando se hace click en él (aunque al no haberse programado una
respuesta no hace nada).

Varios elementos pueden contener a su vez otros elementos, tal como ocurre
con selección: select, que pueden contener una o más opciones: opcion:
write(
`<select>
<option>Opción 1</option>
<option>Opción 2</option>
<option>Opción 3</option>
<option>Opcion 4</option>
</select>`);

Que igualmente es visualmente funcional, permite elegir una de las opciones

disponibles (haga la prueba).

Otro ejemplo son los elementos tabla: table, que pueden contener filas: tr,
encabezados: th, datos: td (y otros elementos más):

write(
`<table>
<tr><th>Nombre</th><th>Dirección</th></tr>
<tr><td>Juan Perez</td><td>Ravelo 323</td></tr>
</table>`);
Nombre Dirección
Juan Perez Ravelo 323

Como el propósito del elemento table es mostrar información en forma de

tabla (en filas y columnas), no es visualmente funcional, no permite escribir o
modificar la información mostrada.

Otros elementos sólo requieren de una etiqueta de apertura, como ocurre con
el elemento input:

write(`<input type="text" placeholder="Mi input">`);

Que como se puede ver inserta un campo de texto (funcional). En este caso
en la etiqueta se emplean dos atributos: type que determina el tipo de contenido
(en este caso texto) y placeholder que muestra una ayuda en forma de texto ("Mi
input").

Otro elemento de este tipo (con solo etiqueta de apertura) es el elemento

imagen: img, que permite insertar una figura (estática o animada), como se
muestra a continuación:

write(`<img src="files/programador1.gif">`);
 La imagen a insertar se determina mediante el atributo "src" y como se puede
ver, en este caso es la imagen "programador1.gif" que se encuentra en la
carpeta "files".

En la asignatura sólo se emplearán algunas de las varias etiquetas HTML

disponibles. Las etiquetas y sus atributos de uso más frecuentes se muestran
en la siguiente tabla (en Internet se puede encontrar información completa al
respecto, así en HTML - w3schools.com se tiene el tutorial y la referencia
completa de los elementos HTML).

Etiquetas y atributos HTML de uso frecuente

Crea un hiperenlace que enlaza la página a otra o enlaza dos secciones de la misma página

Atributo Valor Descripción

Epecifica que el archivo (filename) será bajado

download filename
cuando el usuario haga click en el hiperenlace

href URL Define la dirección URL del enlace

_blank
_parent Determina donde se abrirá el documento
target
_self enlazado
_top

Especifica el tipo de medio del documento

type media_type
enlazado

Coloca el texto que contiene en negrita

 body

Crea el cuerpo del documento HTML

br

Inserta un salto de línea

button

Crea un botón

Atributo Valor Descripción

Hace que el botón reciba el foco al cargar la

autofocus autofocus
página

disabled disabled Inhabilita el botón

Identifica él o los formularios a los que

form form_id
pertenece el botón

Dirección a la que se envía los datos del

formaction URL
formulario

formmethod get/post Determina como se envía el formulario

Hace que los datos del formulario no sean

formnovalidate formnovalidate
validados al ser enviados

_blank
_self
Define donde mostrar la respuesta después de
formtarget _parent
enviar el formulario
_top
framename

name name Define el nombre del botón

button
type reset Define el tipo de botón
submit

value texto Define el valor inicial del botón

canvas

Inserta un lienzo para realizar dibujos mediante código

Atributo Valor Descripción

height pixeles Define el alto del lienzo

width pixeles Define el ancho del lienzo

 caption

Define un título para una tabla

datalist

Crea una lista de opciones predefinidas para un elemento input

dd

Crea un descriptor/valor de un término en una lista de descripción

dfn

Resalta el texto que contiene para destacar que se trata de una definición

div

Inserta una sección o división en el documento, generalmente como un contenedor de otros elementos

dl

Crea una lista de descripción

dt

Crea un término/nombre en una lista de descripción

form

Crea un formulario para la introducción de datos

Atributo Valor Descripción

Dirección a la que se envían los datos del

action URL
formulario

Determina si el formulario debe o no ser

autocomplete on/of
autocompletado

aplication/x-www-form-urlencoded
Determina como se codifican los datos cuando
enctype multipart/form-data
son enviados al servidor (válido con post)
text/plain

Determina el método HTTP que se emplea para

method get/post
enviar los datos

name texto Nombre del formulario

Hace que el formulario no sea validado al ser

novalidate novalidate
enviado
 _blank
_self Determina donde se muestra la respuesta que se
target
_parent recibe después de enviar el formulario
_top

fieldset

Agrupa elementos relacionados, dibujando un borde alrededor de los mismos

Atributo Valor Descripción

disabled disabled Deshabilita los elementos del grupo

Identifica él o los formularios a los que

form form_id
pertenece el grupo

name texto Nombre del elemento

h1 a h6

Crea encabezados (títulos) desde el nivel 1 hasta el nivel 6

head

Crea el sector de encabezado del documento HTML

hr

Crea una línea horizontal

html

Crea el elemento base de un documento HTML

Coloca el texto que contiene en cursiva

img

Inserta una imagen en la página

Atributo Valor Descripción

alt texto Texto alternativo para la imagen

src URL Dirección URL dela imagen

input

Inserta un elemento de control input

 Atributo Valor Descripción

alt texto Texto alternativo para una imagen

Habilita (on) o inhabiita (off) el

autocomplete on/off
autocompletado

El elemento queda con el foco cuando se carga

atofocus autofocus
la página

checked checked Marca un elemento "checkbox" o "radio"

Manda al servidor la dirección de texto (ltr:left

dirname inputname.dir
to right o rtl: right to left)

Inhabilita el elemento (impide que pueda ser

disabled disabled
modificado)

Especifica el formulario o formularios a los que

form form_id
pertenece el elemento

Referencia el elemento >datalist< que contiene

list datalist_id
las opciones predeterminadas

Especifica el máximo valor numérico o fecha

max número/fecha
permitido

Especifica el máximo número de caracteres

maxlength número
permitidos

Especifica el mínimo valor numérico o fecha

min número/fecha
permitido

Permite elegir dos o más archivos o escribir dos

multiple multiple
o más correos

name texto Da nombre al elemento

Verifica (antes de enviar al servidor) que el

pattern expresión regular contenido del elemento cumpla con la
expresión regular

Texto desvanecido que describe el valor

placeholder texto
esperado por el elemento

Evita que el contenido del elemento pueda ser

readonly readonly
modificado

Evita que el formulario sea enviado al servidor

required required
si el elemento está vacío

size número Ancho, en caracteres, del elemento

 Dirección URL de la imagen a emplear en el
src URL
botón "enviar" (submit)

Incremento que debe emplearse entre los

step Número
números del elemento

button Define un botón

checkbox Define un cuadro de marcado

color Define un selector de color

date Define un control de fecha

datetime-local Define un control de fecha y hora

email Define un campo para dirección de correo

file Define un campo y botón de subida

hidden Define un campo oculto

image Define una imagen como un botón de envío

Define un control para seleccionar un mes y

month
año

number Define un campo para un número

type
password Define un campo para una contraseña

radio Define un botón de radio

range Define un control de intervalo

reset Define un botón restablecer

search Define un campo de búsqueda

submit Define un botón de envío

tel Define un campo para un teléfono

text Define un campo de entrada

time Define un campo para una hora

url Define un campo para una dirección URL

Define un control para seleccionar una semana

week
y año

value valor Asigna el valor del elemento

label
Crea una etiqueta que puede ser asociada a un elemento button, input, meter, output, progress, select o
textarea

Atributo Valor Descripción

Identificador del elemento al cual se asocia la

for element_id
etiqueta

Identifica él o los formularios a los que

form form_id
pertenece la etiqueta

legend

Define un título para un elemento fieldset

li

Crea un item para una lista de elementos (ol o ul)

Atributo Valor Descripción

Determina el número que tendra el item en una

value número
lista ordenada (ol)

link

Importa un recurso externo (generalmente una hoja de estilos)

Atributo Valor Descripción

href URL Dirección URL del recurso externo

Especifica el tipo de recurso externo (por

type media_type
ejemplo text/css)

meta

Define un metadato con relación al documento HTML

Atributo Valor Descripción

Determina el codigo de caracteres a emplear en

charset character_set
la página HTML

Define el valor o valores asociados a los

content texto
atributos "name" o "http/equiv"

Define el encabezado HTTP para la

http-equiv content-type default-style refresh
información/valor del atributo "content"
 application-name
name author Define el nombre del metadato
description generator keywords viewport

ol

Crea una lista de ítems ordenados

Atributo Valor Descripción

reversed reversed Invierte el orden de la lista

start número Fija el valor inicial de la lista

1
A
Determina el tipo de numeración a emplear en
type a
la lista
I
i

optgroup

Crea un grupo relacionado de opciones en una lista desplegable

Atributo Valor Descripción

disabled disabled Deshabilita el grupo de opciones

label texto Crea una etiqueta para el grupo de opciones

option

Crea una opción en una lista de selección (select) o una lista de datos (datalist)

Atributo Valor Descripción

disabled disabled Deshabilita la opción

label texto Crea una etiqueta corta para la opción

La opción aparece seleccionada cuando la

selected selected
página carga

value texto Define el valor a ser enviado al servidor

Crea una párrafo de texto

script

Permite escribir código Javascript dentro de la página o importa un archivo con código Javascript
 Atributo Valor Descripción

Hace que el código de un archivo externo sea

async async
cargado y ejecutado de forma asíncrona

Define el código de caracteres empleado por un

charset charset
archivo externo

Hace que el código del archivo externo sea

defer defer
ajecutado cuando la página termina de cargar

Dirección del archivo externo que contiene el

src URL
código Javascript

Especifica el tipo de medio del código

type media_type
Javascript

select

Crea una lista desplegable de opciones

Atributo Valor Descripción

Hace que la lista desplegable reciba el foco al

autofocus autofocus
cargar la página

disabled disabled Inhabilita la lista desplegable

Identifica él o los formularios a los que

form form_id
pertenece la lista desplegable

Dirección a la que se envía los datos del

formaction URL
formulario

formmethod get/post Determina como se envía el formulario

Hace que los datos del formulario no sean

formnovalidate formnovalidate
validados al ser enviados

_blank
_self
Define donde mostrar la respuesta después de
formtarget _parent
enviar el formulario
_top
framename

Hace que sea posible seleccionar múltiples

multiple multiple
opciones a la vez

name name Define el nombre de la lista desplegable

Verifica que el usuario haya seleccionado una

required required
opción antes de enviar el formulario
 Fija el número de opciones visibles enla lista
size número
desplegable

span

Crea una sección dentro de un elemento HTML, generalmente con el propósito de darle formato

style

Permite definir estilos (formato) para la página HTML

Atributo Valor Descripción

Define para qué medio/aparato se ha

media media_query
optimizado el recurso

type text/css Define el tipo de medio del estilo

sub

Muestra en forma de subíndice el texto que contiene

sup

Muestra en forma de superíndice el texto que contiene

table

Crea una tabla

td

Crea una celda dentro de una tabla

th

Crea una celda de encabezado dentro de una tabla

title

Asigna un título al documento HTML

tr

Crea una fila dentro de una tabla

Muestra subrayado el texto que contiene

ul
Crea una lista de items (li) no ordenados

A más de los atributos propios de cada elemento, se cuenta con atributos

comunes a todos los elementos HTML y que en consecuencia pueden ser
empleados en todos ellos:

Atributos HTML globales

Atributo Valor Descripción

Define un atajo de teclado para el elemento (generalmente activado con

acceskey carácter
Alt+carácter o Alt+Shift+carácter)

Define uno o más nombres de clase (separados con espacios) para el

class classname
elemento

true
contenteditable Determina si el contenido del elemento es editable (true) o no (false)
false

Crea un dato asociado al elemento, que tiene el nombre data-* (por

data-* texto ejemplo data-mi-dato) y el valor escrito a continuación en forma de texto
(por ejemplo dato-mi-dato="mi valor")

ltr
dir rtl Define la dirección del texto (ltr=left to right, rtl=right to left)
auto

true
draggable false Define si el elemento es (true) o no (false) arrastrable
auto

copy
Define si el objeto que se suelta sobre el elemento será copiado (copy),
dropzone move
movido (move) o enlazado (link)
link

hidden hidden Oculta el elemento en la página (impide que sea mostrado)

Define el nombre (único) que identifica al elemento. El nombre debe ser

id texto
único en todo el documento HTML

lang código Determina el código de lenguaje para el contenido del elemento

true Define si el elemento tendrá el corrector ortográfico habilitado (true) o no

spellcheck
false (false)

Estilos CSS en línea a ser aplicados al elemento. Los estilos deben ser
style estilos
escritos en forma de texto, separados con puntos y comas

tabindex número Define el orden de tabulación del elemento (siendo 1 el primero)

 Define la información que se muestra cuando el cursor está sobre el
tittle texto
elemento

yes Determina si el contenido del elemento debe ser traducido (yes) o no (no)
translate
no cuando se traduce la página

Al escribir instrucciones HTML en la calculadora, es conveniente guardar

dichas instrucciones en una variable y luego generar los elementos HTML con
la instrucción write. Por ejemplo, en las siguientes instrucciones se genera un
elemento input con dos etiqueta (label), una antes y otra después del elemento:

var html=
`<label for="itTemperatura">Temperatura: </label>\
<input type="text" id="itTemperatura"
placeholder="Temperatura en °C">\
<label> °C</label>`;
write(html);
Temperatura: °C

En estas instrucciones (en cada línea) se emplea el carácter de fin de línea \,

para evitar que se añadan saltos de línea automáticos al final de cada una de
ellas (lo que ocurre por defecto con las plantillas literales).

Observe que el elemento input tiene el atributo "id" (además de los atributos
"type" y "placeholder"). Este atributo se emplea frecuentemente en los
elementos HTML, pues permite identificarlos inequívocamente. En este caso se
ha dado al elemento input el identificador "itTemperatura", que es un nombre
relativamente fácil de recordar: "it" hace referencia a su tipo (input text) y
"Temperatura" hace referencia a su contenido (la temperatura).

El identificador asignado al elemento input se emplea en la primera etiqueta

(label) en el atributo for, con lo que la etiqueta queda enlazada al input, ahora
hacer clic en la etiqueta tiene el mismo efecto que hacer clic en el input (haga la
prueba).

Cuando el elemento input es de tipo "radio", para que de un grupo de

opciones sea posible seleccionar sólo una de ellas (que es el comportamiento
que se espera en este tipo de elementos), se debe asignar a todas ellas el
mismo nombre (name). Así en la siguiente instrucción, se crea un grupo con 5
botones de tipo radio, siendo posible seleccionar sólo una de ellas (haga la
prueba):

var html=
`<label>Seleccione una ciudad:</label>\
<br>\
<input type="radio" name="ciudad" id="irSucre"
value="Sucre" checked>\
<label for="irSucre"> Sucre</label>
<input type="radio" name="ciudad" id="irOruro"
value="Oruro">\
<label for="irOruro"> Oruro</label>
<input type="radio" name="ciudad" id="irCochabamba"
value="Cochabamba">\
<label for="irCochabamba"> Cochabamba</label>
<input type="radio" name="ciudad" id="irLaPaz" value="La
Paz">\
<label for="irLaPaz"> La Paz</label>
<input type="radio" name="ciudad" id="irSantaCruz"
value="Santa Cruz">\
<label for="irSantaCruz"> Santa Cruz</label>`;
write(html);
Seleccione una ciudad:
Sucre
Oruro
Cochabamba
La Paz
Santa Cruz

Como se puede ver, para que uno de los elementos esté seleccionado por
defecto (en este ejemplo el primero), se le asigna la propiedad checked, que al
ser de tipo booleana, no requiere ningún valor (aunque se le puede asignar como
valor el nombre de la propiedad, es decir checked="checked"). Ahora, cuando
se hace clic en un botón (o en la etiqueta respectiva, pues están enlazadas) el
botón que estaba seleccionado previamente deja de estar seleccionado y queda
seleccionado sólo el más reciente (haga la prueba).

Al construir interfaces de usuario es útil agrupar dos o más elementos en otro

elemento, usualmente un elemento div, fieldset, form o p. Así, en el siguiente
ejemplo, se agrupan algunos elementos en un fieldset:

var html=
`<fieldset>\
<legend>Datos del usuario</legend>\
<label for="itNombre">Nombre: </label>\
<input id="itNombre" type="text" placeholder="Nombre
completo">\
<br>\
<label>sexo: </label>\
<input name="irSexo" id="irMasculino" type="radio"
value="masculino" checked>\
<label for="irMasculino"> Masculino </label>\
<input name="irSexo" id="irFemenino" type="radio"
value="femenino">\
<label for="irFemenino"> Femenino</label>\
<br>\
<label for= "itDirecion">Dirección: </label>\
<input id="itDireccion" type="text" placeholder="Dirección
actual">\
<br>\
<label>Fecha de Nacimiento:</label>\
<input id="itNacimiento" type="date">\
<br>\
<br><button>Aceptar</button> <button>Cancelar</button>\
</fieldset>`;
write(html);
Datos del usuarioNombre:
sexo: Masculino Femenino
Dirección:
Fecha de Nacimiento:

Aceptar Cancelar

Los elementos de este ejemplo (como ocurre con la mayoría de los elementos
HTML) son visualmente funcionales, es decir que es posible escribir en ellos,
seleccionar una de las opciones y en el caso del input de tipo fecha, seleccionar
una fecha específica (haga la prueba).

En la calculadora, se insertan los elementos HTML (se ejecutan las

instrucciones HTML) con el comando write. En una aplicación real, sin embargo,
las instrucciones HTML se escriben en un archivo de texto, guardado con la
extensión ".html" y se ejecutan automáticamente al abrir el archivo en un
navegador. La estructura básica de una página HTML es la siguiente (donde el
texto encerrado entre <!-- > son comentarios HTML):

<!DOCTYPE html>
<html>
<head>
<title>Título de la Página</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="mis_estilos.css"> <!--Instrucción que importa una
<script src="mi_codigo.js"></script> <!--Instrucción que importa una librería
<style>
<!--Instrucciones CSS de la página-->
</style>
<script>
<!--Instrucciones Javascript de la página-->
</script>
</head>
<body>
<!--Instrucciones HTML de la página-->
</body>
</html>

La etiqueta <!DOCTYPE html>, sirve para instruir al navegador que emplee

la versión 5 de HTML. La etiqueta <meta name="viewport"> instruye al
navegador que ajuste el contenido de la página en función al dispositivo que
está siendo empleado (content="width=device-width), siendo la escala inicial la
original (, initial-scale=1"). El propósito del resto de las etiquetas está explicado
en los comentarios, así, la etiqueta script es la etiqueta que permite escribir el
código Javascript en un página HTML.