Diseño de Interfaces - Apuntes de Clase PDF

Temas
Mobile User Experience

Usabilidad
EXperiencia de Usuario (UX)
Arquitectura de Información
Interacción Persona-Computador: proporciona bases teóricas, metodológicas y prácticas
para el diseño y evaluación de productos interactivos que puedan ser usados de forma
eficiente, eficaz, segura y satisfactoria.
Interfaces adaptativas
Metodologías UX
Patrones de interacción
Contexto histórico
● Leonardo da Vinci: relación del usuario y las máquinas.
● Taylorismo
● Toyota
● Ergonomía de los objetos (años 50 del siglo XX)
● Interacción Persona-Computador (HCI, Human Computer Interaction), años 80 del
siglo 20
● User Center Cesing (UCD) - 1983: define un proceso o modelo de trbajo mediante
interacciones que trata de cubrir las necesidades del usuario.
● Usabilidad (1990): anglicismo que significa facilidad de uso y cuya definición formal
se referie al grado de eficacia, eficiencia y satisfacción con la que los usuarios
específicos pueden lograr objetivos específicos, en contextos de uso específicos.
Tiene que ver con eficiencia, efectividad, seguridad, utilidad, facilidad de aprendizaje
y facilidad de recordación.
● Experiencia de usuario (1995) - Don Norman
● Saber más...
Conceptos
Experiencia de usuario: abarca los aspectos de interacción del usuario final con la empresa,
sus servicios y sus productos.
Un servicio o un producto sin usuarios no tiene sentido
UX es la forma en la que el usuario se relaciona con el medio o la interfaz que debe ser por
tanto:
● Útil
● Usable
● Deseable
● Creíble
● Encontrable
● Accesible
Apuntes sobre Diseño de Interfaces [email protected]

Ejemplo de esto son el Responsive Web Design (RWD) y el Adaptive Web Design (AWD)
en las que una única interfaz se adapta a las diferentes interfaces desde las cuales se
quiere acceder.
Desde un contexto general, la experiencia de usuario está en el medio de las necesidades

del usuario y los objetivos del negocio.
Una visión más específica indica que incluye:

Diseño visual, diseño de información, usabilidad, prototipado, marketing, desarrollo de
interfaz, análisis de negocio.
Qué no es UX
● UX no sólo es lo relativo a la interfaz de usuario
● No es la tecnología que la soporta, ésta es sólo un facilitador
● No es diseño. El diseño no es una aditivo cosmético que bien usado puede facilitar
al usuario pero que mal usado, lo puede perjudicar. Requiere cuidado exquisito para
no convertirlo en un distractor.
● No es un paso en un proceso, es un proceso interactivo en sí mismo que hace uso

de diversas técnicas.
● No es sólo usabilidad
● No es sólo el usuario así el usuario es el eje articulador. Al usuario siempre se le

debe tener en cuenta teniendo en cuenta el contexto con el que interactúa.
● No es sencilla y no se puede concretar rápidamente.

Beneficios
● Satisfacción del cliente

● Mejora en el cumplimiento de tareas e incrementa la contratación de productos: se
mejora la eficiencia, eficacia, y satisfacción, eliminando roces o causas de
abandono, esto por sí mismo no es garantía de éxito, se al menos asegura la
reducción de los problemas de usuario.
● Se reducen lo costos de desarrollo por mantenimiento y soporte
● Mejora la percepción de la marca. Es la mejor campaña de marketing que se puede
hacer.
● Mejora la tasa de retorno a la inversión.

Los tres elementos
● Cada usuario tiene uno o varios objetivos para cubrir
● Cada usuario tiene un comportamiento distinto: unos buscan, otros navegan,
algunos son pacientes otros no, otros son caóticos.
● Cada usuario está en un contexto distinto: desde un PC, desde un portátil, desde un
dispositivo móvil. El sujetar un dispositivo con una sóla mano, la prisa, la luz, deben
ser parámetros a tener en cuenta como contexto de uso.
● Esta asignatura está orientada a conocer tanto las necesidades del usuario como de
quien oferta el producto o servicio (equilibrar los objetivos del negocio con las
necesidades del usuario)
El proceso de diseño UX
Garret en el 2002 concibió los elementos de la experiencia de usuario (Gráfica de Garret)
En la base de la gráfica se define la estrategia, donde:

● Se recopila toda la información sobre el proyecto
● Estudio de usuarios
● Estudio del contexto del negocio
● Estudio del contenido y materiales disponibles
● Se definen los procesos de diseño

En el alcance, se organiza y procesa la información para dar lugar a:
● Posibles representaciones de estructuras de contenido acorde a los requisitos pre-
establecidos.
● Se definen los flujos funcionales
● Se representan las primeras estructuras o bocentos de interfaz
En la fase de estructura, se definen

● Se definen pantallas o plantillas
● Estructuras de contenido,
● Mapas de navegación,
● Etiquetado y elementos de interacción.
● Se definen prototipos de alta fidelidad o interactivos.
El esqueleto
● Representa los resultados del diseño.

● Se debaten internamente y se ponen a prueba.
● Se realizan test de usuarios.
● Se corrigen posibles problemas detectados y se realizan nuevas iteraciones en el
proceso de diseño.
Definición y implementación del diseño visual.

● Se concreta el esqueleto con gamas de colores, tipografías adecuadas, imágenes,
contenido y cualquier recurso multimedia que ayude a cumplir con los objetivos del
usuario.
La secuencia descriptiva de las fases, no quiere decir que se deben llevar a cabo de
manera secuencial, por el contrario, deben ser cumplidas mediante un proceso iterativo.

No es necesario llevar a cabo todos los pasos definidos o seguir la secuencia de los
mismos. Para más información sobre la gráfica anterior ver la metodología a la que
corresponde: UX Process with Lean UX and Agile.
Técnicas
Análisis: se recopila toda la información sobre el usuario, sus necesidades, el proyecto, los
objetivos de negocio. Se pueden utilizar las siguientes técnicas:
● Focus group: estudia cualitativamente las opiniones o actitudes de un grupo.

Consiste en un grupo entre 6 y 12 personas con un moderador, encargado de hacer
preguntas y dirigir la discusión. El perfir que desarrolla este tipo de pruebas es el UX
Research o Investigador UX
● Test de usuarios presenciales o remotos: prueba de usabilidad que se basa en la

observación y análisis de cómo un grupo de usuarios reales utiliza el sitio web,
anotando los problemas de uso con que se encuentran para poder encontrar,
mejoras, ideas de mejoras o soluciones. Suelen grabarse en video para poder
concluir sobre los gestos de satisfacción o insatisfacción. Se recomiendas 2 o 3
iteraciones con grupos de 4 o 5 usuarios. Rol: Research o Investigador UX
● Eye Tracking: mediante sensores se realiza el seguimiento del ojo para delimitar las
zonas que percibe o no percibe el usuario, determinando focos de atención que
distraen al usuario de su objetivo. Esto puede determinar los elementos que
potencian la tarea, qué elementos son distractores o cuales pasan desapercibidos
para el usuario.

● Estudios de campo: permite la observación real del usuario en su contexto real de
uso, interactuando con un dispositivo o aplicación. Se pueden definir tareas o bien
no ser intrusivo y dejar que el usuario interacté libremente.
Rol: Research o Investigador UX
● Card sorting: permite a los usuarios agrupar y ordenar contenidos, con ayuda de
tarjetas que representan las diferentes categorías o entidades de contenido. Permite
por tanto general agrupaciones de contenido basados en el orden establecido por
los usuarios. Se puede pedir a los usuarios que colaboren en el
ordenamiento/agrupación.
Esta tarea la puede realizar un rol arquitecto de información o UX Researcher,
● Encuestas: pueden realizarse tanto de forma online como offline y permite acceder
a las opiniones de un volumen muy alto de personas.
Rol: investigador UX.
● Análisis experto (evaluación heurística): consiste en aplicar un conjunto de métodos

y técnicas de revisión detallada por parte de un experto, con el fin de encontrar y
solucionar un problema en aquellos casos que es difícil hallar una solución óptima o
satisfactoria.
Se realiza para obtener los errores de usabilidad que son reconocibles a simple
vista. Ver:
○ Evaluación heurística: cómo llevar a cabo una evaluación heurística

○ Los 10 mandamientos de la usabilidad.
○ 10 heurísticas o principios básicos de usabilidad.
○ Análisis Heurístico para UX - Cómo Ejecutar una Evaluación de Usabilidad
○ Modelo de test de usuario.
○ Evaluación heurística.
En general se revisan elementos como el diseño, la usabilidad, el contenido o el

etiquetado.

Rol: experto en usabilidad.
● Test A/B: Un test A/B consiste en realizar una prueba a un porcentaje de usuarios
(puede ser el 100%) que visitan tu página web con el fin de ofrecerles dos variables
o vistas distintas de tu página web. Ver más:
○ Cómo testear tus landing pages con un test AB
○ Qué son los test A/B y cómo llevarlos a cabo con Google Optimize,
○ Qué es un test A/B: 8 claves y 5 herramientas para aprender de tus errores.
Los elementos a probar pueden ser banners, módulos de contenido, campañas de

email o cualquier elemento que presente dudas en su funcionamiento de cara al
usuario.
● Personas: consiste en definir usuarios simulados que reúnen características de un

grupo de usuarios, para poner a prueba contenidos y funcionalidades de una web,
comprobando que responden a las necesidades del perfil definido.
Definición: hecho el análisis llega la etapa en la que comienza el trabajo de concreción de

la solución. Se usan las siguientes técnicas:
● Arquitectura de información (AI): es la disciplina encargada del estudio, análisis,

organización, disposición y estructuración de la información en espacios de
información y de la selección y presentación de los datos en los sistemas de
información interactivos y no interactivos.
Aquí son comunes las estructuras de contenido o árboles de navegación. Ver más:
● Qué es la arquitectura de información.

● Metodología para aplicar arquitectura de información.
● Ejemplos gráficos y artículos de interés.
● Cómo definir la arquitectura de información de un proyecto.
Rol: arquitecto de información.
● Diseño de interacción (IxD): es un campo interdisciplinario que define el

comportamiento de los productos y sistemas con los que interactúa el usuario. En
pocas palabras se preocupa de la forma en que el usuario interactúa con una
interfaz y qué elementos de interacción son los más adecuados. Por ejemplo: la
arquitectura de información define la estructura de un menú y el IxD decide de qué
forma es más adecuado presentarlo.
● Business analysis/Análisis de negocio: es el encargado de transmitir los requisitos

del negocio del cliente al equipo de desarrollo, generando requisitos y
especificaciones funcionales y no funcionales, mediante el uso de téncias como
casos de uso, historias de usuarios o cualquier otra forma que permita detallar el
asunto.

● Brand Strategy (Estrategia de marca): es la responsabilidad de construir las
relaciones entre los mercados y los elementos de la marca, incluyendo valores como
la responsabilidad corporativa, mensajes, tratamiento del logotipo, guías de estilo,
colores, fijando las restricciones de comunicación con los usuarios.
● Estrategia de contenidos digitales (digital content estrategy): una buena estrategia

digital planifica, desarrolla y gestiona contenido tanto escrito como visual, le llega a
las personas correctas, en el momento indicado y con la información acertada, lo
que aumenta el tráfico del sitio web, atrae, retiene y fideliza clientes. Una buena
estrategia digital planifica, desarrolla y gestiona contenido tanto escrito como visual,
le llega a las personas correctas, en el momento indicado y con la información
acertada. Lo que aumenta el tráfico del sitio web, atrae, retiene y fideliza clientes.
Ver más…

El proceso de Desarrollo
Luego de las fases anteriores llega el momento concretar las ideas de análisis y el diseño
en un una interfaz real. Es el momento del diseño, maquetación y programación. Consta de
ls siguientes etapas:
● Deseño gráfico: es la acción de concebir, programar, proyectar y realizar

comunicaciones visuales, producidas en general por medios industriales y
destinadas a transmtir mensajes específicos a grupos sociales determinados, con un
propósito claro y definido. El objetivo es dar soporte a la experiencia de usuario.
Un diseño gráfico mal aplicado puede entorpecer las labores del usuario, siendo un
distractor. Un buen diseño no sólo trata de la rejilla, tipografía o color, sino que
mejora la satisfacción del usuario.
● Desarrollo del front-end: se encarga de transformar los diseños realizados por el

equipo de creatividad y diseño mediante el uso de herramientas de desarrollo.
Generan por tanto la estructura de las páginas y plantillas y los elemetnos dinámicos
como menús desplegables, carruseles, lighboxes, … además de incluir elementos
multimedia.
Metodología
Será necesario entonces planear, analizar, diseñar, probar e iterar de nuevodesde alguno
de los pasos anteriores, para ir perfeccionando el producto a partir de las conclusiones de la
iteración actual.
Consultar la diferencia entre herramientas de wireframes, mockups y prototipado.
1 - Herramientas esenciales

Laragon
Laragon es una opción relativamente nueva para la creación de lo que llamamos el entorno
de desarrollo, es decir, todo un conjunto de programas necesarios para desarrollar
aplicaciones web. Se utilizará en este curso, por lo tanto siga los siguientes pasos:
1. Descargue Laragon portable y descomprima en una ubicación de fácil acceso.
2. Ingrese a la carpeta de la aplicación y ejecute Laragon.
3. Pulse clic en “Menú” o en el icono de configuración y en la ficha “General”, elija el

idioma.
4. En la ficha, “Servicios & Puertos” configure como se indica en la figura siguiente:
Esta aplicación hará las veces de un servidor web local (instalado en nuestro propio
equipo), lo que suele ser una solución ideal para realizar pruebas y/o tareas de
administración, instalación o desarrollo web. De esta forma, se puede probar,
configurar o programar aplicaciones web sin temor a estropear la aplicación web
oficial o el servidor en producción.
5. Consulte sobre otras alternativas existentes.

2 - Primeros pasos con Laragon
Cuando instala Laragon, quedan a disposición una serie de programas de los cuales nos
interesa el emulador de consola Cmder, al cual se accede pulsando clic sobre el botón
Terminal y Apache Server, que es un software de servidor web gratuito y de código abierto
que permite acceder a aplicaciones Web. El nombre oficial es Apache HTTP Server, y es
mantenido y desarrollado por la Apache Software Foundation. Apache permite a los
propietarios de sitios web servir contenido en la web, de ahí el nombre de “servidor web”.
Cuando alguien quiere visitar un sitio web, ingresa un nombre de dominio en la barra de
direcciones de su navegador y seguidamente el servidor web envía los archivos solicitados,
actuando como un repartidor virtual.
Los pasos que se enumeran enseguida, menos el primer paso, serán los que utilice siempre
que deba crear un proyecto de diseño de interfaces utilizando Laragon:
Tenga en cuenta que si está ejecutando Laragon y pulsa clic

sobre el botón cerrar de la ventana, la aplicación no termina
su ejecución sino que queda minimizada y la puede volver a
utilizar, desplegando los iconos ocultos.
1. Descargue el archivo crear.bat y guárdelo en la carpeta www.
Tanto Laragon como AppServm, WampServer, EasyPHP y otros servidores web,

incluyen la carpeta www como la carpeta raíz de documentos del servidor Apache.
Es decir que todo lo que se incluya en dicha carpeta será visible inicialmente en la
red local o en Internet si se llevan a cabo configuraciones adicionales.
No intente ejecutar aún el archivo que acaba de descargar y guardar en www,

enseguida se le indicará como utilizarlo correctamente para crear las carpetas de un
proyecto.

2. Pulse clic en el botón Terminal para abrir Cmder y ubicarse en la carpeta www. Esto
podrá tomar algunos segundos.
3. En la ventana de comandos de Cmder y estando dentro de www, ejecute la

instrucción:
crear app01
Este comando creará dentro de www una carpeta con la

estructura que puede ver en la imagen de la izquierda y que
corresponde al estándar que se utilizará de aquí en adelante.
Dentro de data se guardarán los datos que eventualmente

procese la aplicación.
Dentro de resources se mantendrán debidamente clasificados

los archivos de imágenes o videos, los estilos css, scripts JS y
vistas complementarias a la página principal de la aplicación.
De ahora en adelante, cada vez que necesite crear una aplicación, utilizará el
comando crear nombreapp, en minúscula sostenida y sin espacios.
4. Pulse clic sobre el botón “Iniciar Todo” y si este no aparece, pulse clic sobre los
enlaces “Recargar”.
Esta acción es necesaria para que el servidor web reconozca que se ha creado una
nueva estructura de aplicación y por lo tanto será necesaria cada vez que cree un
nuevo proyecto.
5. Vuelva a la ventana de Laragon y prueba a pulsar clic sobre el botón Root. Notará
que lo lleva directamente a la carpeta pública de su servidor web.
Finalmente recuerde que cada vez que deba crear un nuevo proyecto para diseño de
interfaces web, los pasos del 2 al 5 indicados aquí, le facilitarán la vida y le evitarán
problemas ya que no se recibirán proyectos que no cuenten con esta estructura básica.

3 - Primeros pasos con Visual Studio Code
Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows,
Linux y macOS. Incluye soporte para la depuración, control integrado de Git, resaltado de
sintaxis, finalización inteligente de código, fragmentos y refactorización de código. Este será
el editor de código sobre el cual se trabajarán todos los ejemplos de aquí en adelante por lo
tanto se recomienda seguir los siguientes pasos, luego de darles un vistazo general:
1. Si no tiene instalado Visual Studio Code (en adelante VSC) instálelo ahora.
2. De la barra de herramientas que se encuentra al lado izquierdo elija

extensiones (Ctrl+Mayús+X)
3. En la herramienta de búsqueda ingrese “LiveServer” y cuando sea encontrado pulse

clic en “Instalar”. Esto tomará unos pocos segundos.
4. Arrastre desde www la carpeta app01, al panel derecho de VSC
5. Ubique en el panel izquierdo el icono “Nuevo archivo” y pulse clic sobre él
Tenga cuidado de llevar a cabo esta acción, teniendo seleccionada la carpeta

App01, tal y como se muestra en la imagen anterior.

6. Dé como nombre al nuevo archivo “index.html”, teniendo cuidado de escribir siempre
en minúscula sostenida. Éste se deberá abrir en el panel de la derecha.
7. Digite en el nuevo archivo “html”. Se debe abrir un menú desplegable del cual debe
elegir la opción “html:5”, tal como se muestra en la figura.
Esta acción deberá generar un código HTML similar al que se muestra enseguida:
8. Realice los cambios que se resaltan en la imagen y guarde el documento (Ctrl+S).
HTML (HyperText Markup Language / Lenguaje de Marcado o Etiquetado de

Hypertexto) es un lenguaje basado en etiquetas, como las que se destacan en la
imagen anterior.
La primera etiqueta de la que nos ocuparemos es <html> que encierra el código

fuente contenido hasta el cierre </html> que aparece en la última línea.
La segunda etiqueta que importa ahora es <head>...</head> que delimita la

cabecera de la página y en la cual se realizan “algunas” configuraciones.

La etiqueta <title>...</titles> contenida dentro de la cabecera corresponde al título
que se muestra cuando la página se despliega en una de las pestañas del
navegador.
Y por último, la etiqueta <body>...</body> corresponde al cuerpo de la página que

se muestra en el navegador y que como verá enseguida sólo mostraría “Hola
mundo!”
9. Pulse F1, digite “LiveServer” y seleccione la opción “Open with Live Server”
Se deberá mostrar en el navegador la página que se acaba de editar.
La dirección IP que se muestra (127.0.0.1) indica que la prueba se hizo sobre un

servidor local. Es decir, la página web está ubicada en el mismo computador que
está haciendo las veces de servidor web. El valor 5500, indica el número de puerto
que utiliza LiveServer para dar acceso a la aplicación.
Tenga en cuenta un detalle, cuando LiveServer está monitoreando una página web,
en la parte inferior derecha de VSC se mostrará
indicando con ello que se puede parar y por lo tanto
dejar de monitorear el desarrollo, en cuyo caso en el navegador no se refrescarán
automáticamente los cambios que realice.
Si se muestra , se indica que LiveServer no está monitoreando los

cambios y que debe encenderse si se desea supervisar los cambios.

4 - Primeros pasos con HTML
A continuación unos pasos donde se indica como utilizar algunos de los elementos
esenciales de HTML.
1. Del menú Terminal de VSC elija la opcion Nueva Terminal (Ctrl+Mayús+ñ)
2. Suponiendo que está sobre la carpeta app01, salga a la carpeta www con el
comando “cd ..” y cree la estructura para un nuevo proyecto app02. En la gráfica
siguiente se pueden ver los pasos que se le pide llevar a cabo.
3. Del menú Archivo, elija Abrir carpeta y seleccione la carpeta app02 que acaba de
crear.
4. Teniendo seleccionada en el panel de la izquierda, la carpeta app02, cree el archivo

index.html.
En la figura de la izquierda se muestra la ubicación en

donde siempre debe quedar el archivo index.html.
Esto debe ser así porque dicho archivo es el punto de

entrada de las aplicaciones web. Las demás páginas se
guardarán dentro de ../resources/views.
5. Abra el archivo index.html y proceda como se indicó en el paso 7 del taller anterior,
para crear la plantilla base de la página web principal de la aplicación.
6. Agregue dentro de la etiqueta <title>
7. Modifique el cuerpo de la página, el bloque que está contenido entre las etiquetas
<body>...</body>, para que quede con el siguiente contenido:
<body>
<h1>Etiquetas HTML</h1>
<p>
Este ejemplo muestra cómo combinar algunas de las etiquetas
más básicas de HTML5. <br> Recuerda que <strong>es
importante entender las diferencias entre ellas</strong>
</p>
<h2>Etiqueta ul+li</h2>

<p>
Si listamos personas nominadas a los Oscars, dado que el
orden no altera el significado, debemos usar <em>ul</em>
</p>
<ul>
<li>Tom Hanks</li>
<li>Leonardo DiCaprio</li>
<li>Morgan Freeman</li>
<li>Brad Pitt</li>
</ul>
<h2>Etiqueta ol+li</h2>
<p>
En el caso de que estemos listando elementos donde el orden
es importante, como por ejemplo la clasificación de un
mundial de fútbol, debemos usar <em>ol</em>
</p>
<ol>
<li>Colombia</li>
<li>Brasil</li>
<li>Alemania</li>
<li>Uruguay</li>
<li>Panamá</li>
<li>Venezuela</li>
<li>Francia</li>
<li>Hungría</li>
</ol>
</body>
Se aclara que el código no está escrito con los estándares que se sugieren para
HTML5, pero por fines didácticos se han omitido algunas etiquetas que serán
incorporadas más adelante.
8. Ubique en el panel de la izquierda el elemento correspondiente a la página que

acaba de editar y pulse clic derecho sobre ella.
9. Elija la opción Open with Live Server.
Debería mostrarse en el navegador una página de contenido estático, como la de la

figura siguiente y que tiene correspondencia directa con el código fuente agregado
en el punto 7. Veamos:

10. Ahora que vio los resultados obtenidos, observe detenidamente los detalles, cree un
documento de Google compartido con el docente y documente en él cada una de las
etiquetas HTML que dieron lugar al cambio de presentación. Empecemos:
a. La página muestra un título principal y dos subtítulos. Esto gracias a las

etiquetas <h#>...</h#>, siendo # un valor entre 1 y 6.
Consulte sobre “elementos de encabezados”, escriba código en la página

creada en el punto 4, que le permita comprobar el comportamiento ésta y
registre de manera resumida y clara en el documento de Google lo que crea
conveniente recordar acerca de las etiquetas las etiquetas <h#>...</h#>.
b. Observe que en el documento aparecen varios pares del elemento

<p>...</p>. Consulte aquí sobre dicho elemento y si es necesario realice más
pruebas creando nuevos párrafos en el documento.
c. También aparece un elemento <br> del que puede conocer aquí.
d. El primer párrafo incluye una frase muy resaltada y en el resto de los

documento se enfatizan algunas palabras. Consulte aquí sobre las etiquetas
<strong> y <em> utilizadas para dichos fines.
e. El documento también incluye una lista de actores. Aquí le brindan

información adicional sobre este tipo de listas.
f. Y finalmente el documento incluye una lista numerada de la cual se dan

detalles aquí.

11. Como lenguaje de marcado, no de programación, HTML permite combinar de
manera semántica los elementos, como lo hace cuando necesita expresarse en
castellano. Un caso podría ser inlcuir listas dentro de listas:
Lo que se espera ver Lo que se codifica en HTML

<ul>
● Item 1 <li>Item 1</li>
<li>Item 3 con 2 subitems:
● Item 3 con 2 subitems: <ul>
<li>Subitem 1</li>
○ Subitem 1
<li>Subitem 2</li>
○ Subitem 2 </ul>
</li>
</ul>
Incluya y pruebe también esta demostración de listas no ordenadas anidadas.
12. Tambien incluya dentro de una lista ordenada, para uno o varios elementos de la
lista, sublistas no ordenadas. Por ejemplo: una lista de departamentos con algunas
localidades.
13. A lo largo de este curso se recomienda que consulte en esta página información
adicional sobre páginas web HTML y hojas de estilo CSS para que complemente
conceptos, esto teniendo en cuenta que nuestro objetivo se centra en el diseño de
interfaces y no precisamente en aspectos especificos de HTML, CSS o JavaScript, a
pesar de que son imprescindibles para lo que se pretende.
Hasta aquí se han visto la estructura general de una página HTML, constituida por su
cabecera y su cuerpo. Sin embargo no es del todo correcto ir agregando componentes en el
cuerpo de una página sin conocer las recomendaciones que los expertos han dado.
En la parte siguiente se mostrarán los primeros pasos para conocer la estructura de una
página HTML5 y como ya se ha indicado la manera de crear y visualizar las páginas ya no
se dará una guía paso a paso, sino que se mostrarán porciones de código que deberá ir
probando, por lo tanto, empiece por crear un nuevo proyecto para realizar las pruebas que
siguen.

5 - Conceptos iniciales de HTML5
Una página HTML está organizada estrictamente como un árbol denominado Modelo de
Objetos del Documento (DOM). Los elementos de este árbol, las etiquetas, tienen un
nombre y pueden contener varios atributos. Enseguida se especifican las utilizadas hasta
ahora:
<!DOCTYPE html>
Como su nombre lo insinúa, indica el tipo de documento y debe ser la primera etiqueta que
se incluya, sin espacios o líneas que la precedan, con el fin de que los navegadores
interpreten correctamente que se trata de un documento HTML5.
<html>
Define el inicio de la estructura en forma de árbol del documento. El esquema

correspondiente de esta estructura la puede ver en la parte inferior del panel izquierdo de
VSC.
También puede ver en el código fuente, que la forma en que se ha utilizado la etiqueta
<html> es la siguiente:
<html lang="es">
Técnicamente lo que se está haciendo es asignar al atributo “lang” de la etiqueta, un valor

para que el navegador reconozca el idioma de la página, en este caso “español”.
Finalmente, para indicar la terminación del bloque de código que define la página se usa
como última instrucción la etiqueta de cierre </html>.
Resumiento, el bloque de instrucciones HTML de una página, estará contenido entre las
etiquetas: <html> ... </html> y dicho bloque tendrá dos secciones principales: la cabecera y
el cuerpo de la página.
<head>
El para de etiquetas <head>...</head>, delimita los elementos de la cabecera de la página.

En esta sección puede hacer lo siguiente:
● Definir el título de la página web que será visible en la pestaña del navegador donde
la página se abra,
● Indicar metadatos como: <meta charset="identificador-juego-de-caracteres">, para

definir la codificación de caracteres.
Aquí se utiliza si se utiliza la codificación UTF-8 que es el estándar en HTML5,

reconocido por la RFC 3629 de la Internet Engineering Task Force (IETF), pero
también se hubiera podido usar iso-8859-1 o cualquier otro set de caracteres.
● Configurar el área de la ventana (viewport) en donde el contenido web está visible.

Ejemplo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Con la propiedad width se controla el tamaño del viewport. En el ejemplo se indica

un valor especial “device-width” que equivale al ancho de la pantalla en píxeles CSS
en una escala de 100%.
● Más adelante se utilizará la cabecera para incorporar archivos externos con estilos,
código Javascript o incluso imágenes necesarias para generar la página en la
pantalla. También para indicar a los motores de búsqueda datos como la
descripción del sitio y palabras clases que faciliten encontrar la página en Internet.
Enseguida se reúnen todos los elementos descritos en un ejemplo:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Ejemplo inicial de HTML5">
<meta name="keywords" content="Etiquetas HTML, CSS, Javascript, DOM">
<title>DInterfaces - App 1</title>
</head>
<body>
El par de etiquetas <body>...</body> abarca el contenido de un documento HTML. Un

documento sólo puede tener un elemento <body> que en HTML5 puede tener los elementos
estructurales que se muestran en el siguiente wireframe:
● <header>: se usa para definir el contenido del encabezado.
● <footer>: en el se definie el contenido del pie de página.

● <nav>: contiene los elementos de navegación de la página.
● <article>: inclcuye una pieza independiente de contenido.
● <section>: puede agrupar diferentes artículos con diferentes propósitos o temas,

como para definir las distintas secciones de un único artículo.
● <aside>: define un bloque de contenido que está relacionado con el contenido

principal que lo engloba, pero no es fundamental para el flujo del mismo.
La distribución que se haga de los elementos de la página, no necesariamente se

despliegan en el orden que muestra la figura de la página anterior, puesto que esto depende
de las necesidades de diseño de la pagina. He aquí otro ejemplo:
Enseguida se muestra un ejemplo de lo que sería el cuerpo de una página con los
elementos estructurales básicos:
<body>
<header>
<h1>Título de la página</h1>
</header>

<nav>
<ul>
<li>Inicio</li>
<li>Ofertas</li>
<li>Catálogo</li>
<li>Contacto</li>
</ul>
</nav>
<section>

<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>
<blockquote>Bloque 1 de información secundaria</blockquote>
<blockquote>Bloque 2 de información secundaria</blockquote>
</aside>
<footer>
Derechos reservados © Carlos Cuesta - 2019-2020
</footer>
</body>
Si crea una aplicación con este contenido y prueba su visualización en un navegador, verá
un simple prototipo, una simple estructura en la que apenas se diferencia la disposición de
los elementos descritos y su ubicación ni siquiera se asemejará a los wireframes mostrados
en las figuras anteriores.
Para que la estructura de una página cobre vida, se requiere utilizar hojas de estilo en
cascada (CSS) o frameworks de front-end que mejoren la apariencia. Utilizando un simil
HTML es la obra negra de un edificio y CSS es la obra blanca, la primera estructura y la
segunda le da presentación. Por el momento se continúa dando una rápida referencia de
HTML para pasar luego a ver detalles de CSS.
<mark>

Este elemento se usa para resaltar una porción de contenido que tiene relevancia en un
contexto determinado. Purebe por ejemplo a incluir dentro de un elemento <article> el
siguiente párrafo:
<p>
Esto se verá mejor próximamente cuando se
incorporen <mark>hojas de estilo</mark> en las páginas.
</p>
El resultado será algo así como esto:
Esto se verá mejor próximamente cuando se incorporen hojas de estilo en los proyectos.
<small>
Este elemento se utiliza para incluir contenido al margen, como letra pequeña de los
contratos. Observe un ejemplo de su uso:
<p>
En este curso es necesario que domine HTML y CSS antes de poder
pasar a ver diseño de interfaces.
<br>
<small>La no realización de talleres de estos temas se calificará
con cero.</small>
</p>
Este código daría como resultado, algo así como esto:
En este curso es necesario que domine HTML y CSS antes de poder pasar a ver
diseño de interfaces.
La no realización de talleres de estos temas se calificará con cero.
<hgroup>
Este elemento representa un encabezado de varios niveles para una sección de un

documento. Agrupa un conjunto de encabezados que pueden ir desde <h1> hasta <h6>.
Ejemplo:
<article>
<hgroup>
<h1>Diseño de interfaces</h1>
<h2>Fundamentos</h2>
</hgroup>
<p>
En este curso se estudia inicialmente todo lo relacionado
con la planeación, análisis y diseño de la parte visual de
los aplicativos y luego se pasa a la parte práctica donde se
desarrolla, a partir de casos de estudio, ...

</p>
</article>
El resultado sería similar a esto:
Diseño de interfaces
Fundamentos
En este curso se estudia inicialmente todo lo relacionado con la planeación, análisis y
diseño de la parte visual de los aplicativos y luego se pasa a la parte práctica donde se
desarrolla, a partir de casos de estudio, …
<figure>, <figcaption> e <img>
El elemento <figure> por lo general, hace referencia a una imagen, una ilustración, un
diagrama, un fragmento de código, o un esquema que se inserta en un elemento <img>. El
elemento <figcaption> representa un subtítulo o leyenda asociado al contenido del
elemento <figure>, que en este caso es una imagen. Ejemplo:
<figure>
<img src="./favicon.ico" alt="icono">
<figcaption>
Icono utilizado por la aplicación
</figcaption>
</figure>
Es importante que tenga en cuenta lo siguiente:
● El elemento <figcaption> puede ir antes o después de la imagen, esquema o código.
● El elemento <figcaption> es opcional.
● El elemento <img> representa una imagen en el documento. Con el atritubo “src” de

este elemento, se indica la ruta donde se debe buscar la imagen a mostrar y con el
atributo “alt” se define un texto alternativo que se muestra cuando la imagen no se
encuentra en la ruta especificada.
● La imagen puede estar en cualquier ruta, incluso en una dirección IP pero aquí por
comodidas se eligió la imagen que por defecto el navegador usa como icono de la
aplicación y que se reconoce automaticamente si se llama “favicon.ico” y se coloca
en el mismo nivel del archivo index.html.
<blockquote> y <cite>
El elemento <blockquote> define una cita larga que se representa como un elemento de
bloque. Por ejemplo:

<article>
Esta definición me parece importante:
<blockquote>
UX (por sus siglas en inglés User eXperience) o en
español Experiencia de Usuario, es aquello que una
persona percibe al interactuar con un producto o
servicio. Logramos una buena UX al enfocarnos en diseñar
productos útiles, usables y deseables, lo cual
influye en que el usuario se sienta satisfecho, feliz y
encantado.
<br>
Andrea Cantú en <cite>Qué es: UX y UI</cite>
</blockquote>
<br>
</article>
El resultado de este código sería algo así como:
Esta definición me parece importante:
UX (por sus siglas en inglés User eXperience) o en español Experiencia de Usuario, es

aquello que una persona percibe al interactuar con un producto o servicio. Logramos una
buena UX al enfocarnos en diseñar productos útiles, usables y deseables, lo cual influye
en que el usuario se sienta satisfecho, feliz y encantado.
Andrea Cantú en Qué es: UX y UI
Como se puede ver, <cite> debe contener el nombre de una obra creativa, no el nombre del
autor citado.
<q>
El elemento <q> define una cita corta que se representa como un elemento en línea sin
saltos de línea, dicha cita aparecerá entre comillas. Por ejemplo:
<article>
Lo normal es encontrar los patrones de diseño de interacción
agrupados en colecciones de patrones <q>conjuntos de patrones de
ámbito similar, clasificados temáticamente</q>.
</article>
El resultado de código anterior sería similar a lo que se muestra enseguida:
Lo normal es encontrar los patrones de diseño de interacción agrupados en colecciones

de patrones “conjuntos de patrones de ámbito similar, clasificados temáticamente”.

<address>
El elemento <address> se utiliza para proporcionar información de contacto del <article> o

ancestro más cercano. Si no hay un elemento ancestro se aplica a todo el documento. En el
ejemplo siguiente, como suele acostumbrarse, el ancestro es el pie de página:.
<footer>
Derechos reservados © Carlos Cuesta - 2019-2020
<address>
Universidad de Caldas<br>
Cl. 65 #26-10, Manizales, Colombia<br>
</address>
</footer>
<time>
Este elemento representa un fecha, una hora o un periodo específico en el tiempo. Puede
incluir el atributo datetime para convertir las fechas en un formato interno legible para el
motor de búsqueda, permitiendo mejores resultados o características personalizadas como
recordatorios. Algunos ejemplos válidos:
<br> Año y mes: <time>2019-07</time>

<br> Fecha: <time>2019-07-26</time>
<br> Hora: <time>23:54:39</time>
<br> Fecha y hora: <time>2019-07-26T23:44</time>
<br> Fecha y hora<time>2019-07-26T11:44:17</time>
<br> Fecha y hora<time>2019-07-26 23:44</time>
<br> Zona horaria: <time>Z</time>
<br> Zona horaria: <time>+0100</time>
<br> Zona horaria: <time>+01:00</time>
<br> Zona horaria: <time>-08:00</time>
<br> <time datetime="2019-12-31 23:59">Fin de año</time>
HTML y CSS
La sigla CSS (Cascading Style Sheets / Hojas de estilo en cascada) permiten separar la
estructura de la presentación de las páginas web. CSS es totalmente independiente de
HTML. CSS no forma parte de la especificación y nunca lo fue, pero sí es un lenguaje
complementario desarrollado para superar las limitaciones y reducir la complejidad de
HTML a la hora de proveer estilos visuales a los elementos del documento, como tamaño,
color, fondo, bordes, entreo otros. La gráfica siguiente ilustra lo dicho:

Compromisos para la primera semana
1. Contextualizarse. Por favor lea el artículo del siguiente enlace:
¿Qué necesitas saber en 2020 para ser un buen desarrollador web front-end?
2. Aprender lo fundamental. Estudio un curso básico de HTML y CSS

Videotutorial de HTML y CSS
Videotutorial de HTML y CSS
Importante: se hará un quiz o un taller calificable sobre estos dos compromisos.
A continuación se indican las formas de incluir estilos en páginas HTML: (app04)
Estilos en línea
Asignar los estilos dentro de las etiquetas por medio del atributo style. Ejemplo:
<body>
<p style="color: brown; background-color: powderblue">En línea</p>
</body>

En el código anterior se agrega a la etiqueta <p>, el atributo style="...", para cambiar el
color del texto.
Observe la forma en que se indica el estilo:
style="estilo1: valor1[; .. estiloN: valorN]",
Esta podría ser una buena manera de probar estilos en un prototipo, pero no se vería poco
profesional en un proyecto ya terminado.
Estilos embebidos
Insertar los estilos en la cabecera del documento y luego usar referencias para afectar los
elementos HTML correspondientes:
<head>
...
<style>
span {
color: yellowgreen;
}
</style>
</head>
<body>
<p>Ejemplo de <span>estilo embebido</span> en la cabecera</p>
</body>
...
En el ejemplo todos los contenedores span que se agreguen a la página se mostrarán de un

color verde claro.
Esta técnica permitiría agrupar estilos durante la fase de implementación de prototipos, pero
al igual que la anterior no se recomienda para proyectos finales porque contamina el código
HTML.
Archivos CSS externos
La solución para no contaminar el código HTML con estilos CSS, es guardar todos los
estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo
dentro de cada documento que los necesite. De esta manera los estilos de una página
podrían cambiar con sólo referenciar un archivo CSS diferente.
Para el ejemplo cree en su aplicación, el archivo ..\resources\css\app.css y agregue en él, el

siguiente código:
p {
color: brown;

background-color: powderblue;
}
span {
color: rgb(50, 205, 58);
}
Ahora es necesario referenciar al archivo CSS desde el archivo HTML. Esto se hace
asignando al atributo href de la etiqueta link, la ruta del archivo CSS. Veamos:
<!DOCTYPE html>
<html lang="es">
<head>
...
<link rel="stylesheet" href="./resources/css/app.css">
</head>
<body>
<p>
Ahora los <span>estilos</span> están en un <span>archivo</span>
</p>
</body>
</html>
Para evitar inconvenientes a la hora de migrar la aplicación de una carpeta a otra o de un

servidor a otro, es importante que al hacer referencia a los archivos CSS de la aplicación se
usen rutas relativas y no rutas absolutas.

Métodos básicos para aplicar estilos CSS a elementos HTML
Existen tres métodos básicos para seleccionar cuáles elementos HTML serán afectados por
las reglas CSS:
● Utilizando el nombre del elemento HTML. Ejemplo de esto es lo definido hasta ahora
en la hoja de estilos, para modificar los colores de las etiquetas <p> y <span>:
p {
color: brown;
background-color: powderblue;
}
span {
color: rgb(50, 205, 58);
}
● Mediante el atributo ID que puede darse a los elementos HTML. Ejemplo:
Agregue ..\resources\css\app.css el siguiente código:
#quijote {
background-color: antiquewhite;
}
También agregue al archivo HTML, un elemento <div> con el siguiente código:
<div id="quijote">
Me moriré de viejo y no acabaré de comprender al animal bípedo
que llaman hombre, cada individuo es una variedad de su
especie. (Cervantes)
</div>
Se concluye entonces que cuando un elemento CSS va precedido de (#), se aplica

automáticamente a la etiqueta HTML cuyo ID se corresponda con el nombre definido
en la hoja de estilos.
● Definiendo clases CSS y referenciándolas mediante el atributo class de los

elementos HTML. Para el ejemplo, agregue la siguiente clase a la hoja de estilos:
.resaltado {
padding: 20px;
color: rgb(240, 166, 71);
background-color: rgb(3, 56, 63);
}

Observe que los nombres de las clase van precedidos de (.) y como ya se dijo, se
utilizan en los elementos HTML, asignando el nombre de la clase en el atributo class.
Ejemplo:
<div class="resaltado">
En el arte de la marinería más sabe el más sencillo marinero
que el hombre más letrado del mundo. (Cervantes)
</div>
Lo anterior es sólo una muy breve reseña de los métodos disponibles en CSS para
seleccionar elementos a los que se debe aplicar estilos. Para una completa referencia por
favor pruebe cada uno de los ejemplos que se dan en este capítulo.
Qué es el DOM
Taller
Para la utilización de colores en este taller de implementación de prototipos, por

favor siga las sugerencias dadas aquí.
Caso 1: cree una interfaz de usuario como la que se muestra enseguida usando
sólo HTML5 y CSS.
Tenga en cuenta que esta interfa de usuario se usará para el sistema de atención al
cliente del Restaurante Laurel Gourmet, especializado en comida sana.
sólo HTML5 y CSS.

La Nueva EPS desea agregar un enlace a una página con la estructura mostrada en
la que se podrá conocer sobre tips de salud que permitan reducir los riesgos
laborales, riesgos por contagio de enfermedades por falta de vacunas en zonas
tropicales y riesgos de la influenza en el período de lluvias.
La página presentará breves artículos con no más de tres secciones.
En la parte derecha del contenido, la Nueva EPS quiere mostrar información de

marketing sobre los servicios que oferta.
Para ser sinceros, lo que se desea es cautivar con artículos de interés para que el
usuario se sienta atraído por el márketing que se muestra en el aside.
sólo HTML5 y CSS.

Tenga en cuenta que dicha interfaz se utilizará por el MinTic para brindar un enlace
de noticias sobre los cursos libres que las universidades colombianas ofrecen para
que cualquier persona interesada conozca la información esencial sobre la oferta.
Caso 4: cree un formulario con base en el que se muestra enseguida, pero de

aspecto mejorado, usando sólo HTML5 y CSS.
Importante: puede consultar la web para descargar código de ejemplo y reutilizarlo correctamente.
JavaScript a vuelo de pájaro

Es un lenguaje de programación creado en 1995 por Brendan Eich, el cual permite crear
contenido dinámico de páginas web, controlar archivos de multimedia, crear imágenes
animadas y muchas otras cosas más. Recuerde que si crea páginas utilizando solo HTML y
CSS, su contenido será estático, es decir que los usuarios no podrían interactuar con dichas
páginas, sólo ver contenido.
Sin más preámbulo empecemos a analizar las características de este lenguaje. Para esto
abra la consola de las herramientas administrativas de Chrome o la consola de Mozilla
Firefox o de cualquier otro navegador de su preferencia (normalmente con F12) y vaya
probando las características que se van comentando.
Definición de variables
JavaScript es un lenguaje débilmente tipado. Esto quiere decir que no se requiere indicar de
qué tipo es cada variable que se declara. También, cualquier variable que se defina admite
cualquier tipo de datos en el momento que se requiera asignar un valor de otro tipo.
Hay una práctica anticuada de definir las variables anteponiendo la palabra reservada var y
otra moderna, utilizando let. Observe en la figura anterior, la definición recomendada
cuando se crea la variable miDato.
¿Por qué let y no var? - porque let permite declarar variables limitando su alcance (scope)
al bloque, declaración, o expresión donde se está usando en cambio var define las
variables a nivel global sin importar el ámbito del bloque.
En síntesis, se definen con let por seguridad y para que se evite dolores de cabeza a la
hora de revisar errores por redefinición de variables en varias partes o archivos de código.
Asignación de valores a variables
Tenga en cuenta que en una expresión de la forma miDato = 4569; lo que se está
haciendo es asignar a la variable de izquierda, el valor de la derecha.
Aunque JavaScript no genera errores por omitir el punto y coma (;) al final de las
sentencias, es una buena práctica, agregarlo siempre.
Use la consola de depuración para asignar un valor a la variable miDato y luego verifique
utilizando el método log del objeto console que efectivamente el dato fue asignado.

De aquí en adelante use la consola como se le indicó para probar cada nuevo concepto que
se vaya dando.
También es posible, definir una variable y asignarle un valor en la misma línea:
let mes = ‘agosto’;
A menos que sea absolutamente necesario, acostúmbrese a delimitar las cadenas de texto
(String) con comillas sencillas.
Tipos disponibles
JavaScript tiene cuatro tipos de datos primitivos:
● number
● boolean
● String
● Object
● undefined
Ejemplos del uso de estos tipos de datos pueden ser las siguientes definiciones que
también debería registrar por la consola:
let numero = 58;

let entendido = true; // o false
let nombre = 'Carlos Alberto';
let obj = {};
let datoIndefinido; // no tiene valor asignado
Así puede verifique los tipos de datos que se acaban de documentar:
● typeof nombre;
● typeof numero;
● typeof entendido;

● typeof nombreCompleto;
● typeof obj;
De las anteriores instrucciones se deduce entonces que se usa el operador typeof cuando
requiera conocer el tipo del contenido de una variable y el operador (=) para realizar
asignaciones.
Además de los tipos primitivos se pueden definir formaciones (arrays). Veamos:
● Definición de un primer array vacío, mediante el constructor de arrays y posterior

asignación de elementos mediante el método push del objeto array:
let array1 = new Array();

array1.push(10);
array1.push('Manzana');
array1.push(3.1416);
console.log(array1);
Se recomienda agregar este código al script, guardar y actualizar la página para ver
los resultados.
● Otra forma de definir un array vacío:
let array2 = [];

array2.push(array1);
array2.push('Animal de monte');
array2.push('Otra cosa');
Además del método push, un objeto de tipo Array cuenta con muchos otros
métodos. Pruebe agregar algunos ejemplos al script con varios de los documentados
aquí.
Se recomienda observar el resultado producido por consola.
● También se pueden utilizar una sola instrucción para registrar el array e iniciarlo:
let array3 = [100, 200, array1, array2];

También se puede definir objetos. Veamos:
let cliente1 = new Object(); // también es válido: let cliente1 = {};

cliente1.nit = '8909062888';
cliente1.nombre = 'Industrias ACME';
cliente1.direccion = 'Avenidad Fundadores 45-26';
cliente1.correo = '[email protected]';
console.log(cliente1);

let cliente2 = {
nombre: 'Carlos Cuesta Iglesias',
genero: 'masculino',
intereses: ['música', 'fotografía', 'desarrollo de aplicaciones'],
info() { // el carácter (`) también tiene el código ASCII 96
console.log(`Datos personales:
Nombre: ${this.nombre}
Género: ${this.genero}
Intereses: ${this.intereses}
`)
}
};
cliente2.info();
let cliente3 = Object.assign({}, cliente2);

cliente3.nombre = 'Sophie Newman';
cliente3.genero = 'Femenino';
cliente3.info();
En este vínculo o en este otro puede consultar información adicional sobre objetos en
JavaScript.
Operadores
Además del operador typeof que se usa para conocer el tipo de un elemento definido,
existen los operadores aritméticos suma, resta, multiplicación, división. Ejemplo:
numero = (4 * 3) + 9 / 10 * 2; // debería probar el resultado por consola
Tenga en cuenta que se usan los paréntesis cada vez que se quieran agrupar expresiones,
de acuerdo a la jerarquía de los operadores.
Recuerde también que el operador (+) es un operador sobrecargado porque se usa también
para concatenar cadenas. Luego se mostrará una forma más moderna de concatenación:
nombreCompleto = nombre + apellidos;
Cuidado con errores de este tipo:
console.log('La suma es: ' + numero + 100);
Si se tiene en cuenta el valor 58 almacenado en la variable número, se podría pensar que

se mostraría el mensaje “La suma es: 158” pero no, el resultado de la expresión será:
La suma es: 58100

Porque automáticamente los valores se convierten a strings antes de hacer la
concatenación. La forma correcta usaría paréntesis para forzar la operación suma antes de
la concatenación:
console.log('La suma es: ' + (numero + 100));
Otros operadores aritméticos que se pueden usar, se documentan en el siguiente ejemplo:
numero++; // operador unario para incrementar 1

numero += 11; // operador binario para incrementar/asignar una cantidad
numero -= 3; // operador binario para decrementar/asignar una cantidad
numero *= 10; // operador binario para multiplicar/asignar una cantidad
numero /= 2; // operador binario para dividir/asignar una cantidad
numero--; // operador unario para reducir en 1
Teniendo en cuenta que el valor inicial de la variable numero es 58 y que las instrucciones
anteriores se introducen por consola una sola vez, el resultado final de la variable debería
ser 334. Verifique este dato mediante console.log.
Importante: las variables definidas pueden ser fácilmente inicializadas a un nuevo valor,
pero si se trata de eliminar las variables definidas, el procedimiento es un poco más
complejo y muestra en la figura siguiente. Básicamente se requiere que de las
herramientas de desarrollador, elija la opción audits y luego pulse el icono
correspondiente a clear all:
Operadores para negar o comparar la igualdad o la desigualdad
● Negación: !
● Identidad o igualdad débil (no se tiene en cuenta el tipo de datos): ==
● Identidad o igualdad fuerte(se tiene en cuenta el tipo de datos): ===
● Diferencia débil (no se tiene en cuenta el tipo de datos): !=
● Diferencia fuerte (se tiene en cuenta el tipo de datos): !==
Operadores de comparación

● Mayor que: >
● Menor que: <
● Mayor o igual que: >=
● Menor o igual que: <=
Operadores lógicos
● Operador and (conjunción): &&

● Operador or (disyunción): ||
Operador condicional
Devuelve uno de dos valores dependiendo de si la condición se cumple o no. La forma

general es la siguiente:
condición ? valor_si_true : valor_si_false;
En el siguiente ejemplo se asigna a nuevoDato el valor de numero multiplicado por 2 si

numero tiene asignado un valor inferior a 1000. En caso contrario se asigna el valor
contenido en numero, dividido entre 4. Puede comprobar con console.log, el valor que
finalmente queda almacenado en valor:
let nuevoDato = numero < 1000 ? numero * 2 : numero / 4;

console.log(nuevoDato);
Quedan pendientes otros operadores que se irán incorporando según las necesidades.
Lo esencial de JavaScript para implementar DHTML
Al igual que es posible incluir de múltiples maneras CSS dentro de HTML, también es
posible incluir JavaScript dentro de HTML. Observe:
1. Contamine el código HTML al mejor estilo del siglo pasado, incluyendo JavaScript
dentro de las etiquetas HTML:
<span onclick="alert('hola mundo!');">Clic aquí</span>
El ejemplo anterior permite que al pulsar clic sobre el mensaje “Clic aquí”, se
dispare el evento onclick para ejecutar la función JavaScript alert. Técnicamente se
dice que se registra un “oyente de evento” clic en el span.
Como puede ver, la claridad del código brilla por su ausencia.
2. Otra manera más tosca aún es la que se muestra enseguida:
<body>
<span id="lanzar_alerta">Clic aquí</span>
<script>
document.getElementById('lanzar_alerta').onclick = function () {
alert('hola mundo!');

}
</script>
<p id="subtitulo">Referencia a una imagen:</p>

…
<body>
En el ejemplo anterior se ha asignado un ID al span, de tal manera que enseguida

se pueda embeber un script que registra uno de los eventos del DOM. Para ello,
recupera el objeto spam mediante un llamado al método getElementById del objeto
document y le registra el evento onclick.
No se preocupe si no comprende de qué se está hablando, el código es tan confuso

que no merece la pena explicarlo y se desaconseja su uso de aquí en adelante.
3. Una manera menos ordinaria sería incluir la etiqueta del script donde debe estar, en
la cabecera e indicar que cuando termine la carga del documento se registre el
evento para el objeto con ID lanzar_alerta, pero se supone que un documento HTML
debería tener sólo código HTML y no mezclar Javascript y CSS. Así es que no se
preocupe si esto aún le resulta incomprensible:
<head>
<meta charset="UTF-8">
<title>Etiquetas</title>
<link rel="stylesheet" href="./../../css/estilos.css" media="screen" />
<script>
window.onload = function() {
document.getElementById('lanzar_alerta').onclick = function() {
alert('hola mundo!');
}
}
</script>
</head>
<body>
<span id="lanzar_alerta">Clic aquí</span>
...
<body>
4. De aquí en adelante se recomienda referenciar los script JS desde los archivos

HTML. Para las pruebas iniciales, proceda de la siguiente manera:
a. Estando en VSC, pulse clic derecho sobre la carpeta JS del proyecto

DemoXX sobre el cual se viene trabajando. Del menú contextual elija nuevo
archivo y cree ahora el archivo instrucciones-control.js.
b. Agregue al archivo recien creado las siguientes instrucciones y guarde los

cambios:

'use strict';
console.log('Instrucciones de control');
c. Observe como en la cabecera del archivo index.html se referencia al archivo

main.js y proceda de una manera similar para agregar una línea de código
que referencie al archivo instrucciones-control.js
d. Con la consola del navegador abierta, ejecute la aplicación o refresque los

cambios y observe la salida que se debe mostrar:
Cargada la función anónima principal

Instrucciones de control
Cargado el contenido del DOM
La salida resaltada corresponde a la instrucción log del script que acaba de

crear y las otras dos corresponden a instrucciones del script main.js. Más
adelante se documentará la razón por la cual las instrucciones de los dos
script se despliegan mezcladas y no primero las de uno y luego las del otro.
Instrucciones de control de ejecución

Instrucciones condicionales if (condición) sentencia1 [else sentencia2]
Ejecuta una sentencia1 si la condición se cumple. Opcionalmente se usa la instrucción else

para ejecutar una sentencia2 si la condición no se cumple.
La instrucción if puede tomar varias formas que permiten definir condicionamientos

complejos. Pueden ser revisadas en esta MDN web docs.
Instrucción switch (...)
Esta instrucción evalúa una expresión, comparando la expresión con un conjunto de

valores predefinidos, y ejecuta sentencias según el caso. Su sintaxis es la siguiente:
switch (expresion) {
case valor1:
sentencia(s)1;
[break;]
...
case valorN:
sentencia(s)N;
[break;]
[default:
sentencias(s)_por_defecto;
[break;]

]
}
Puede consultar información adicional en MDN web docs.
Instrucción while (condición) sentencia
Define un ciclo que ejecuta una sentencia o un bloque de sentencias especificadas mientras
cierta condición se evalúe como verdadera. La condición es evaluada antes de ejecutar la
sentencia y por lo tanto se dice que es un ciclo condicionado al comienzo. Puede consultar
información adicional en MDN web docs.
Instrucción do sentencia while (condición);
Crea un ciclo que ejecuta una sentencia o un bloque de sentencias, hasta que la condición
de comprobación se evalúa como falsa. La condición es evaluada después de ejecutar la
primera sentencia y por lo tanto se dice que es un ciclo condicionado al final. Puede
consultar información adicional en MDN web docs.
Estructura for ([expresion-inicial]; [condicion]; [expresion-final])sentencia
Corresponde a un ciclo condicionado al comienzo que consta de tres partes que se

encuentran separadas por punto y coma. La razón de estas tres partes es la siguiente:
● La primera parte, inicio, especifica el o los valores iniciales.

● La segunda parte indica la condición de finalización para el ciclo, la cual está
directamente relacionada con el o los valores iniciales.
● La última parte define cómo serán manipulados los valores de iteración del ciclo.
● Se pueden especificar un conjunto de valores para la parte inicial y para la parte que
controla la iteración.
A continuación se plantea un ejercicio para incorporar en el archivo main.js, algunos de los
ejemplos de lo visto hasta aquí:
1. Ubique el archivo index.html del proyecto demo01 y pulse doble clic sobre él para
abrirlo en el navegador por defecto.
2. Active la consola de depuración de su navegador (Ctrl+Mayúsculas+I | F12).
3. Reemplace el archivo main.js por el siguiente código:
"use strict";
let i;
for (let i = 1; i < 10; i++) {

console.log(i);
}
console.log(`Valor de i = ${i}`);

let a = 5;
let b = 10;
function postprocesar(strings, ...valores) {

console.log(strings);
console.log(valores);
}
// posprocesar recibe una plantilla como argumento y realiza una interpolación:

postprocesar `suma: ${a + b}, resta: ${a - b}, producto: ${a * b}`;
console.log(`línea 1 de la cadena de texto

línea 2 de la cadena de texto`);
Sin refrescar la página del proyecto, intente determinar el resultado que muestra por
consola la última instrucción. Luego observe el valor obtenido por consola. Si su
apreciación no coincide con el resultado, deduzca por qué a partir de consultar el
tema “Postprocesado de Plantillas”.
Algunas características de este ejemplo, son:
● Se incorpora la directiva “use strict”. En el modo estricto, se pueden
encontrar algunos errores más rápidamente, las partes más peligrosas o
inútiles de JavaScript lanzan un error de ejecución, no se puede asignar un
valor a una variable no definida, lo que sí es posible en el modo anticuado o
irrestricto donde se crearía una variable global.
En el modo estricto se lanza un error al intentar asignar un valor a una
propiedad o atributo de sólo lectura, en el modo irrestricto ésto se ignora
silenciosamente. Veamos:
{
"use strict";
window.undefined = 5; // TypeError: Cannot assign to read only
}; // property 'undefined' of [object Object]
window.undefined = 5; // Se ignora la instrucción silenciosamente
En el modo estricto no se permite el uso de la instrucción obsoleta with que

usaban algunos programadores del siglo pasado para referirse a las
propiedades de un objeto:
let objAuto = {
marca: 'Audi',
modelo: 'A2',
placa: 'MUU 001'
};
with(objAuto) {
}; // OJO: strict mode code may not include a with statement

Se debería lanzar una advertencia cuando se duplica un atributo de un objeto
(algunos navegadores aún no reportan esta advertencia) y se lanza un error
cuando se vuelve a definir una variable con el mismo nombre en el mismo
ámbito:
let objAuto = {
marca: 'Audi',
modelo: 'A2',
modelo: 'A1', // Duplicate name of property (“modelo”)
placa: 'MUU 001',
};
let a = 10;
let b = 20;
let a; // Identifier 'a' has already been declared
No se permite definir parámetros duplicados:

function probar(a, a) { … } // Duplicate parameter name …
En el modo estricto intentar modificar los elementos del objeto arguments

(objeto Array que corresponde a los argumentos pasados a la función) no
produce cambios, lo que sí es posible en el modo no estricto:
function pruebaArguments(a, b, c) {
console.log(arguments[0]);
arguments[2] = 300;
return c;
}
let valorRetorno = pruebaArguments(10, 20, 30);

console.log(valorRetorno);
Para el ejemplo, en el modo estricto a valorRetorno se le asigna 30, en el

modo no estricto se le asignaría 300.
En el modo estricto, el operador delete, que se usa para eliminar una

propiedad de un objeto (delete obj.propiedad), lanza un error si el argumento
no es una propiedad modificable de un objeto, en el modo no estricto
simplemente se regresa false. Ejemplos suponiendo que a está definida en el
bloque que contiene la función f:

function f1(x) {
let y = 4;
delete a; // Delete of an unqualified identifier in strict mode.
delete x; // Delete of an unqualified identifier in strict mode.
delete y; // Delete of an unqualified identifier in strict mode.
}
f1(a);
La función eval,usada para evaluar un código JavaScript representado como

una cadena de caracteres (string), sin referenciar a un objeto en particular,
no puede instanciar variables y funciones fuera de su propio contexto. El
siguiente ejemplo produce un error en el modo estricto y en el modo no
estricto se muestra el valor 5 por consola:
eval("var x = 5");
console.log(x);
Tenga en cuenta que el modo estricto se puede definir a nivel del script,
como se muestra en el ejemplo o a nivel de bloques de código:
({ “use strict” ...})
● La otra construcción interesante del código dado en el ejemplo inicial de JS

es: console.log(`Valor de i = ${i}`);
El argumento corresponde a una plantilla de cadena de texto (template
strings), un literal de texto que habilita el uso de expresiones incrustadas. De
esta manera es posible utilizar cadenas de texto de más de una línea, y
funcionalidades de interpolación de cadenas de texto con ellas.
Puede dar una mirada a la función postprocesar y al uso que se le da
inmediatamente después de su definición.
Con una función como ésta, es posible conocer uno a uno los elementos que
componen la plantilla. El primer argumento contiene un array con las
cadenas de texto de la plantilla y el segundo permite conocer los valores
procesados de las expresiones de la plantilla.
Si no está familiarizado con ECMAScript 6 (ES6), puede parecerle una poco
rara la definición de argumentos de la función. Por ahora digamos que es una
función de tipo rest en las cuales si al último argumento se le antepone ..., se
genera un array con los elementos pasados a la función.
Por último, digamos que la última instrucción console.log del script, muestra
la forma en que es posible obtener una cadena de texto multilínea. Más
adelante se volverá a tratar el tema de las funciones rest, mientras tanto
puede ver más sobre templates strings aquí.
Estructura for (variable in objeto) { ... }

Recorre cada una de las propiedades de un objeto, en un orden arbitrario. Para cada una de
las propiedades, se ejecuta la sentencia especificada. El siguiente ejemplo muestra por
consola cada una de las propiedades de cliente2:
for (const propiedad in cliente2) {

console.log(`cliente2.${propiedad} = ${cliente2[propiedad]}`);
}
Estructura for (variable of iterable) { ... }
genera un ciclo que itera a través de los elementos de objetos iterables (incluyendo Array,
Map, Set, el objeto arguments, etc.), ejecutando las sentencias de cada iteración con el
valor del elemento que corresponda. En el siguiente ejemplo, se crea un array de clientes y
se itera sobre dicho iterable:
const clientes = [cliente1, cliente2, cliente3];
for (let cliente of clientes) {
console.log(cliente);
}
Estructuras break y continue
Las sentencias break y continue permiten manipular el comportamiento normal de las

iteraciones. Concretamente, la sentencia break permite terminar de forma abrupta un ciclo y
la sentencia continue permite saltarse algunas repeticiones del ciclo, de acuerdo a una
condición dada.
Nota: Cristian David nos recomienda este excelente videotutorial para complementar los
conocimientos sobre el tema.
Taller 5. Funciones ES6

Se entiende que las funciones son los componentes básicos del código legible, mantenible y
reutilizable. Para revisar algunas de las características de las funciones se utilizará la misma
aplicación con la que se viene trabajando y será necesario llevar a cabo los siguientes
pasos:
1. Modifique de la cabecera del archivo index.html sólo la línea que referencia al script
en el que se implementaron las demostraciones iniciales, para que ahora referencie
el archivo funciones.js que se creará en la subcarpeta JS.
<head>

<script src="./vista/js/funciones.js"></script>
</head>
2. Cree en la subcarpeta JS el archivo funciones.js y asígnele el siguiente código

inicial:

"use strict";
f1();
function f1() {
console.log('Primera prueba del llamado a una simple función');
}
Si se procede correctamente, al guardar el archivo y recargar la página del proyecto

debe llamarse a la función f1 y mostrar por consola el mensaje establecido.
3. También puede probar, agregando al script la porción de código que se muestra

enseguida, la posibilidad que tienen las funciones de retornar valores:
function f2() {
return 'Prueba del llamado a una función que retorna un valor';
}
let mensaje = f2();

console.log(mensaje);
4. Pruebe también la posibilidad de implementar funciones que reciben parámetros y

definen variables locales:
function sumar(a, b) {
let c = a + b;
return [a, b, c];
}
const v = sumar(10, 20);

console.log(`${v[2]} = ${v[0]} + ${v[1]}`);
5. Experimente con la posibilidad de definir parámetros con valores por defecto:
function multiplicar(a, b = 10) {

return a * b;
}
console.log(multiplicar(200)); // se utiliza el valor por defecto del 2° parámetro

console.log(multiplicar(5, 20)); // no se utiliza el valor por defecto del 2° parámetro
6. Las funciones JS permiten definir los llamados parámetros rest, similares a los
parámetros variables de Java. De esta manera no se restringe la cantidad de valores
que pueden pasar a una función. Sin embargo, los valores pasados deben ser todos
del mismo tipo. En otras palabras, los parámetros rest actúan como marcadores de
posición para múltiples argumentos del mismo tipo. Veamos un ejemplo:
function f3(...params) {
console.log(`Cantidad de parámetros recibidos: ${params.length}`);
console.log(`Parámetros recibidos: ${params}`);

let suma = 0;
for (const item of params) {
suma += item;
}
console.log(`Los valores suman ${suma}`);
}
f3();
f3(200);
f3(20, 40, 240);
Verifique los resultados de las instrucciones de este ejemplo y asegúrese de

entender el funcionamiento.
7. Otra característica bien interesante es la definición de funciones anónimas. Más

adelante se analizará todo lo que ellas permiten. Por ahora se incluyen dos sencillos
ejemplos:
let f = function() {
console.log('Hola anónimo');
};
f();
f = function(a, b) {
console.log(`${a + b} = ${a} + ${b}`);
};
f(30, 50);
Otra técnica derivada de este concepto es el de función anónima autoejecutable que

consiste en definir una función anónima que se registra y llama inmediatamente:
let media = (function(...args) {

let total = 0;
for (const item of args) {
total += item;
}
return total / args.length;
})(2, 5, 4);
console.log(media);
8. Se pueden definir funciones utilizando el constructor Function() junto con el

operador new. Veamos
f = new Function("x", "y", "return x * y;");

let resultado = f(10, 20);
console.log("Resultado : " + resultado);

9. JavaScript como cualquier lenguaje moderno permite definir expresiones lambda o
funciones lambda, también conocidas como funciones flecha, que son bloques de
código que no están asociados con un identificador, es decir, en tiempo de ejecución
no tienen un nombre asociado. Estas funciones están basadas en el cálculo lambda
fue desarrollado por Alonso Church en la década del 30 con el objeto de dar una
teoría general de las funciones. La forma general o sintaxis es la siguiente:
([param1, param2,…paramN])=>{instrucciones}
La sintaxis muestra que el operador lambda (=>) separa la declaración de

parámetros de la declaración del cuerpo de la función. Para definir funciones flecha
se deben tener cuenta las siguientes reglas:
● Cuando se tiene un solo parámetro no es necesario utilizar los paréntesis.

● Cuando no se tienen parámetros, o cuando se tienen dos o más, es
necesario utilizar paréntesis.
● Cuando el cuerpo de la expresión lambda tiene una única línea no es
necesario utilizar las llaves y no se necesita especificar la clausula return en
el caso de que se deba devolver valores.
● Cuando el cuerpo de la expresión lambda tiene más de una línea se hace
necesario utilizar las llaves y es necesario incluir la clausula return en el caso
de que la función deba devolver un valor.
● Por convención, se recomienda el uso de un parámetro de letra única para
una declaración de función compacta y precisa.
En el siguiente ejemplo, como la función no recibe parámetros, requiere paréntesis y

no requiere especificar return ni su cuerpo requiere llaves por tener sólo una línea:
f = () => Àhora ${Date()}`;

console.log(f());
Como la siguiente función recibe un argumento, no requiere paréntesis:
let cuadrado = x => x * x;

console.log(cuadrado(10));
Cuando se recibe más de un argumento, requiere paréntesis:
let raiz = (x, y) => Math.pow(x, (1 / y));

console.log(raiz(27, 3));
Cuando el bloque de la función consta de más de una instrucción, requiere que

dicho bloque sea encerrado entre llaves:
let fx = n => {
if (n <= 0) {
return 1;
} else {
return (n * fx(n - 1));

}
};
const n = 6;
console.log(Èl factorial de ${n} es ${fx(n)}`);
10. En JavaScript existen dos maneras de definir una función, bien sea mediante
declaración de función o mediante expresión de función. La diferencia
fundamental entre los dos es que, las declaraciones de funciones se analizan antes
de su ejecución. Por otro lado, las expresiones de funciones se analizan sólo cuando
el motor de scripts las encuentra durante una ejecución.
Enseguida un ejemplo de uso y declaración de una función tomado de un caso

previo:
console.log(sumar(30, 40));
function sumar(a, b) {
let c = a + b;
return [a, b, c];
}
Según lo dicho, es correcto poder llamar a la función sumar antes de su declaración,

puesto que el código de la función se analiza antes de su ejecución.
Y ahora dos casos de expresiones de funciones con sus respectivos llamados:
f4(); // este llamado produce el error “Uncaught ReferenceError: f4 is not defined”

let f4 = function() {
console.log('Hola anónimo');
};
let raiz = (x, y) => Math.pow(x, (1 / y));

raiz(100, 2); // al llamar luego de la definición, no se produce el error.
Se han resaltado los llamados porque sería un error intentar llamar a dichas
funciones, sin que las expresiones de funciones hayan sido asignadas a los literales
f y raiz. Además recuerde que las expresiones de funciones se analizan sólo cuando
el motor de scripts las encuentra durante una ejecución.
11. Javascript también permite el uso inmediato de expresiones de función. Las

expresiones de función llamadas inmediatamente (IIFE) permite el acceso público a
los métodos al tiempo que conservan la privacidad de las variables definidas dentro
de la función. Este patrón se denomina función anónima autoejecutable. Los
siguientes tres ejemplos ilustran este concepto y hacen exactamente lo mismo:
let main = function() {

(function() {
for (let x = 0; x < 5; x++) {
console.log(x);

}
})();
}
main();
(function() {
(function() {
for (let x = 0; x < 5; x++) {
console.log(x);
}
})(); // IIFE: inmediately invoked function expression
})();
(() =>
(() => {
for (let x = 0; x < 5; x++) {
console.log(x);
};
})())();
12. Por último demos un vistazo a las funciones generadoras, funciones cuya
ejecución puede ser pausada en un momento dado y continuada en otro posterior.
En la pausa, que se produce cuando se ejecuta una expresión con yield, la función
conserva su estado de variables. La pausa es, por tanto, ejecutada desde la propia
función generadora con yield, mientras que la reanudación sólo puede llevarse a
cabo externamente. Veamos un ejemplo de una función generadora de cada uno de
los colores del arco iris:
function* arcoIris() {
yield 'rojo';
yield 'naranja';
yield 'amarillo';
yield 'verde';
yield 'azul';
yield 'indigo';
yield 'violeta';
}
Como esta función proporciona uno a uno los colores, se requiere una forma de
acceder a cada color, observe:
for (let color of arcoIris()) {

console.log(`color: ${color}`);
}

También se puede acceder a cada uno de los colores, de la siguiente manera:
let g = arcoIris();
let color = g.next();

while (!color.done) { // ejecutar mientras no se complete
console.log(color.value);
color = g.next();
}
Las siguientes páginas presentan información complementaria sobre el tema:
● Un vistazo a los generadores* en ES6

● Generadores* en ES6
● Iterators and generators
Callbacks
Cuando se invoca una función pasándole como parámetro otra función (el callback), esta
función parámetro se ejecuta generalmente cuando la función principal ha terminado de
ejecutarse, pero también pudiera ser en cualquier otro momento del lapso de vida de la
función contenedora.
Como ejemplo observemos el funcionamiento de la función:
setTimeout(function, milliseconds, param1, param2, ...)
Cualquiera de las dos funciones setTimeout siguientes, establecen un temporizador que

ejecuta una función o una porción de código después de que transcurre un tiempo
determinado (3 segundos):
console.log('Esperando 3 segundos para saludar al mundo...');
// setTimeout(function() { console.log('Hola mundo'); }, 3000);
// La siguiente instrucción setTimeout es equivalente a la anterior:
setTimeout((() => console.log('Hola mundo')), 3000);
Enseguida, supuestamente se recupera el nombre de un usuario con base a un ID dado:
let getUsuarioById = (id, callback) => {
let usuario = {
nombre: 'Carlos',
id // equivale a id: id
}
if (id === 20) {

callback(Èl usuario con ID ${id} no existe en la BD`);

} else {
callback(null, usuario); // null === undefined
}
};
getUsuarioById(20, (error, usuario) => {

if (error) {
return console.log(error);
}
console.log('Datos del usuario: ', usuario); // << OJO
});
El resultado del llamado será una de las siguientes opciones dependiendo de si el

argumento es 20 o cualquier otro valor:
● Datos del usuario: { nombre: 'Carlos', id: 10 }

● El usuario con ID 20 no existe en la base de datos
Para el ejemplo que siguiente se debe estar familiarizado con el método find() de los objetos
arrays de JS. Este método devuelve el valor del primer elemento del array que cumple la
función de prueba proporcionada como parámetro. En cualquier otro caso se devuelve
undefined. La sintaxis es la siguiente:
arr.find(callback[, thisArg])
● callback: corresponde a la función que se ejecuta sobre cada valor en el array,

tomando tres argumentos:
1. element: el elemento actual que se está procesando en el array.
2. index (optional): el índice del elemento actual que se está procesando en el
array.
3. array (Optional): el array desde el que se llama al método find.
● thisArg (Optional): objecto para usar como this cuando se ejecuta callback.
En la siguiente versión, se usan dos vectores de objetos para simular la recuperación de los
datos de dos tablas de una base de datos (empleados y sueldos). Note que el primer vector
tiene 3 elementos y el segundo sólo 2, por lo tanto el empleado con ID 3 no tiene un sueldo
relacionado:
let empleados = [{
id: 1,
nombre: 'Carlos'
}, {
id: 2,
nombre: 'Jorge'
}, {
id: 3,

nombre: 'Lucas'
}];
let sueldos = [{
id: 1,
sueldo: 1000
}, {
id: 2,
sueldo: 2000
}];
let getEmpleado = (id) => {

// forma larga de la función flecha para buscar un empleado:
let empleadoDB = empleados.find(empleado => {
return empleado.id === id;
});
console.log(empleadoDB);
};
getEmpleado(1);
getEmpleado(10);
Enseguida se incluye una segunda versión de la función getEmpleado, reduciendo el

código, teniendo en cuenta que el bloque utilizado para buscar al empleado sólo consta de
una línea de código:
let getEmpleado = (id) => {

let empleadoDB = empleados.find(empleado => empleado.id === id);
console.log(empleadoDB);
}
Finalmente se adiciona un parámetro a la función getEmpleado que permita validar si existe

o no un empleado con el ID ingresado como primer argumento. El ejemplo completo queda
como se muestra enseguida:
let empleados = [{
// la misma implementación que el anterior
}];
let sueldos = [{
// la misma implementación que el anterior
}];

// nueva implementación agregando un segundo argumento
let getEmpleado = (id, callback) => {
let empleadoDB = empleados.find(empleado => empleado.id === id);
if (!empleadoDB) {
callback(`No existe un empleado con el ID ${id}`);
} else {
callback(null, empleadoDB);
}
};
// nuevo llamado a getEmpleado agregando el segundo argumento de tipo función

getEmpleado(10, (error, empleado) => {
if (error) {
return console.log(error);
}
console.log(empleado);
});
En esta nueva versión, la función getEmpleado recibe además del ID del empleado, un
segundo argumento de tipo función, que le permite gestionar el error. Pruebe a cambiar el
primer argumento (10) por un ID de un empleado existente, para que observe los cambios
en el resultado.
Ejercicio: implemente la función cuya esqueleto se proporciona a continuación

(callback5.js):
let getSalario = (idEmpleado, callback) => {

// implemente aquí el código necesario
};
Esta función debe recibir como primer argumento el ID de un empleado y:
1. Buscar el empleado según el ID ingresado como primer argumento.

2. De acuerdo a lo anterior, proceder de la manera siguiente:
a. Si no encuentra al empleado, el callback recibe como argumento un mensaje
indicando que dicho empleado no se encuentra.
b. Si encuentra al empleado y no tiene un sueldo asignado, el callback recibe
como argumento un mensaje indicando que el empleado de nombre tal y ID
tal, no tiene un sueldo asignado y
c. Si encuentra tanto el empleado como su sueldo, el callback recibe como
argumento un objeto con tres atributos que representan el ID del empleado,
el nombre y el sueldo.
Pruebe llamar a la función para un empleado inexistente, para un empleado existente pero
sin sueldo y para un empleado existente con sueldo. Ejemplo:

● getSalario(100, (error, sueldo) => { … });
Los resultados para cada caso deberían ser:
● No existe un empleado con el ID 100

● No existe un sueldo para el empleado 3 - Lucas
● { idEmpleado: 1, nombre: 'Carlos', sueldo: 1000 }
Para que esto no vaya a suceder en Diseño de Interfaces, observe detenidamente

las propuestas que hacen expertos como Stuart Nicholls, entre otros…

Creación dinámica de elementos, manejo de eventos y validaciones
El uso de “onclick” en la asignatura “Diseño de Interfaces”, como se dijo en clase, está

terminantemente desaprobado para la gestión de eventos. En su lugar debe registrar los
eventos mediante addEventListener. La razón de esta restricción puede ser consultada en
los siguientes documentos:
● Element.addEventListener
● JavaScript: Difference between addEventListener and onclick
Favor consultar el documento guía donde al final se hacen algunas recomendaciones para
evitar malos entendidos en la asignatura:
● La asignatura es “diseño de interfaces” y cómo tal hay que calificarla, al menos se

deben tener en cuenta estos 10 principios, varias veces citados de diferentes fuentes
en los enlaces del documento guía del curso.
● Se califica el cuidado ortográfico, la simetría, el uso del color, la correcta distribución

y todos esos aspectos de que trata este documento de referencia varias veces
citado y recomendado.
● Cualquier trabajo que se solicite se espera encontrar en la carpeta que se

recomendó crear bajo los estándares dados en este documento: “Cómo compartir
correctamente sus trabajos.pdf”
● No se revisarán proyectos que alteren la estructura básica de carpetas recomedada

para los proyectos, aunque es lógico que pueden crearse sub-carpetas dentro de las
carpetas recomendadas, siempre y cuando la adición sea para mejorar la
arquitectura de las aplicaciones.
● La asignatura tiene cuatro ejes fudamentales: el diseño estético y minimalista,

codificación respetando los estándares propuestos por las buenas prácticas, la
usabilidad fluída a partir de la interacción que permite una correcta programación de
eventos y la correcta presentación de datos e información a partir de diversas
fuentes y múltiples medios. Cada proyecto, cada taller en clases o extraclase, cada
taller parcial, tendrá en cuenta todos estos aspectos. En tal sentido se debe dominar
HTML, CSS, JS y las librerías o frameworks que se vayan incorporando en el curso
de la asignatura.
● El curso recomienda videotutoriales o prácticas cuyos resultados deben ser

agregados a la carpeta compartida en los tiempos especificados, si estos no se
encuentran al momento de revisar, se califica con cero dicho compromiso.
● En lo sucesivo se tendrán en cuenta las buenas prácticas para la escritura de código

CSS, HTML y JS.
● Cuando se trate de maquetación y estilos CSS, por favor tenga en cuenta:
El sistema flexbox es una gran mejora, sin embargo, está orientado a estructuras de
una sola dimensión, por lo que aún necesitamos algo más potente para estructuras
web. Con el paso del tiempo, muchos frameworks y librerías utilizan un sistema grid

donde definen una cuadrícula determinada, y modificando los nombres de las clases
de los elementos HTML, podemos darle tamaño, posición o colocación.
Grid CSS nace de esa necesidad, y recoge las ventajas de ese sistema, añadiendole
numerosas mejoras y características que permiten crear rápidamente cuadrículas
sencillas y potentes de forma prácticamente instantánea. Ver:
● Flexbox Patterns
● Flexbox CSS / Ejemplos
● Grid CSS (Cuadrículas) / Ejemplo
● Guía Completa de Flexbox desde 0
● Como hacer un sitio web / layout responsive con Flexbox CSS3
● Aprende CSS Grid práctico
Funcionalidades del lenguaje JavaScript - Casos prácticos
Caso 1: Suponga que tiene un array de objetos en donde cada objeto corresponde a
información básica de ciudades del mundo. Ejemplo:
[
{ id: 1, name: 'Kabul', countrycode: 'AFG', district: 'Kabol', population: 1780000 },
{ id: 2, name: 'Qandahar', countrycode: 'AFG', district: 'Qandahar', population: 237500 },
{ id: 3, name: 'Herat', countrycode: 'AFG', district: 'Herat', population: 186800 },
{ id: 7, name: 'Haag', countrycode: 'NLD', district: 'Zuid-Holland', population: 440900 },
{ id: 8, name: 'Utrecht', countrycode: 'NLD', district: 'Utrecht', population: 234323 },
...
]
También suponga que tiene un array de objetos en donde cada objeto corresponde a
información básica de lenguajes de programación:
[
{ id: '1', nombre: 'Python', creador: 'Guido van Rossum' },
{ id: '2', nombre: 'ECMAScript 6 o superior', creador: 'Brendan Eich' },
{ id: '3', nombre: 'Node JS', creador: 'Ryan Dahl' },
{ id: '4', nombre: 'PHP 7.0 o superior', creador: 'Rasmus Lerdorf' }
...
]
Encontrará que como estos dos arrays hay muchos casos similares, por ejemplo puede
haber arrays de clientes, de productos y de cuántos objetos se pueda imaginar para
distintos sistemas de información.
Es también común que a partir de estos arrays de objetos, sea necesario crear listas
desplegables y si cada vez que sea necesario crear una lista lo que se hace es duplicar el
código para generar la lista y realizar pequeñas modificaciones para adaptar el código,
pronto se tendrá un script de código espagueti con la repetición de la repetidera. A todas
luces esto no es una buena práctica, por lo tanto se propone la siguiente estrategia:
1. Defina en la página HTML la lista desplegable:
<select id="nombre-lista"></select>

Por supuesto, deberá tener un ID acorde con el listado que represente. Para el caso
de este ejemplo, puede ser un nombre que represente cualquiera de las listas de
objetos con que inicia este caso.
2. En un script JS implemente una función que permita llenar listas seleccionables a

partir de arrays de objetos:
function crearSimpleSelect({
elemento = null,
array = null,
valor = null,
texto = null
}) { ... }
Observe que esta función recibe como argumento un objeto que determina cómo
debe usarse e implementarse dicha función. Veamos:
● El atributo elemento, es un string que corresponde al ID de la lista

seleccionable dada en el paso 1.
● El atributo array, hace referencia a la lista de objetos que se debe mostrar.
● El atributo valor, es un string que se refiere al atributo del elemento de lista

utilizado como atributo value de cada elemento de la lista. Para el caso
podría ser el atributo ID que es un valor único en las dos listas de objetos
utilizados como ejemplo en este caso.
● El atributo texto, es un string que represente el atributo de los elementos de

lista que el usuario ve en el seleccionable. Podría ser name, nombre, district
o cualquier otro. Según lo dicho, la función propuesta podría utilizarse de la
manera siguiente para la primera lista:
crearSimpleSelect({
elemento: '#lista-ciudades',
array: arrayCiudades,
valor = 'id',
texto = 'name'
});
Y para la segunda lista:

crearSimpleSelect({
elemento: '#lista-lenguajes',
array: arrayLenguajes,
valor: 'id',
texto: 'nombre'
});
Estas dos instrucciones deberían ser parte de las sentencias del callBack que se
implementa para el listener del evento DOMContentLoaded, que garantiza que los
elementos del DOM se utilizan sólo a partir de que los componentes de la página se
han terminado de cargar.
Si esto es claro hasta aquí, no debería tener dificultades con el paso siguiente.

3. Implemente la función cuya plantilla se define en el paso anterior, teniendo en
cuenta lo siguiente:
a. Defina un elemento lista y úselo para referenciar el elemento a que hace

referencia el primer atributo del objeto recibido como argumento.
b. Use innerHTML para inicializar la lista creada en 3.a.
c. Cada elemento del array a que hace referencia el segundo atributo del objeto
recibido por la función, agréguelo al array options de la lista desplegable.
Recuerde que al array options de una lista desplegable, se le pueden agregar

elementos de tipo Option cuyo constructor tiene la siguiente signatura:
Option(text, value, defaultSelected, selected)
Necesitará preferiblemente un ciclo for para implementar lo que se pide aquí.
4. Si procedió correctamente, podrá mostrar cualquier lista de objetos que tenga la

estructura de lista de objetos que se indica al inicio de este caso.
Pruebe con listas como: departamentos y ciudades de Colombia, países, ciudades

del mundo, lenguajes de programación o cualquier otra.
5. Use las herramientas del desarrollador de su navegador (Ctrl+Mayusculas+I) para

inspeccionar los elementos de lista creados en el DOM.
Caso 2: Se desea crear una función para generar listas de chequeo, similar a la que se
muestra en la figura siguiente, a partir de arrays de objetos como los descritos en el caso 1.
La función debe recibir como argumento, un objeto exactamente igual al descrito en el paso
2 del caso anterior.
1. Lo primero que hay que saber es que una casilla de selección es un elemento input
de tipo checkbox.
<input type="checkbox" name="itemchk-x" id="yyy"/>
Sin embargo, normalmente las casillas de selección van seguidas de un texto

explicativo y están contenidas dentro de una etiqueta (<label>). Ejemplo:
<label>
<input type="checkbox" id="yy" name="itemchk-x" value="x-1"> Márcame...
</label>
2. Lo que sigue es generar código HTML para cada objeto del array, de tal manera que
para cada elemento se genere un input de tipo checkbox. Ejemplo:
let opciones = '';

array.forEach((obj, indice) => {
opciones += `
<label for="${obj[valor]}">
<input type="checkbox"
name="itemchk-${obj[valor]}"
id="${obj[valor]}"/>${obj[texto]}
</label>`;
});
Note que los nombres de los botones se crean con el prefijo itemchk-. Esto es
importante porque más adelante dicho prefijo se utilizará para acceder mediante
selectores CSS, al conjunto de casillas seleccionables.
3. El codigo así generado en el string opciones, puede inyectarse mediante innerHTML

en un elemento de la página. Veamos:
function crearMultiSelect({
elemento = null,
array = null,
valor = null,
texto = null
}) {
let select = elemento.substring(1) + '-checkboxes';
// inserte aquí las instrucciones del paso 2
let lista = doc.querySelector(elemento);

lista.innerHTML = `
<div class="checkboxes" id="${select}">
${opciones}
</div>`;
}
4. Necesitará también algunas clases CSS para darle formato en bloque a la lista, ya
que por defecto los elementos input se organizan en línea. También se necesitará
una clase para resaltar el elemento sobre el cual se vaya desplazando. Veamos:
.multiselect {
width: 200px;
}
.checkboxes {
display: block;
}
.checkboxes label {

display: block;
}
.checkboxes label:hover {
background-color: #1e90ff;
}
5. Para probar si esto funciona, defina en una página HTML, el siguiente elemento:
<div class="multiselect" id="index-entornos"> </div>
6. En un script JS, para las instrucciones del evento DOMContentLoaded, incluya el

siguiente llamado:
crearMultiSelect({
elemento: '#index-entornos',
array: [
{ id: '2', nombre: 'ECMAScript 6', creador: 'Brendan Eich' },
{ id: '4', nombre: 'PHP 7.0', creador: 'Rasmus Lerdorf' }
],
valor: 'id',
texto: 'nombre',
});
7. Pruebe, debería ver una lista seleccionable como la imagen que se incluye al inicio
de este caso.
Por supuesto, el array de objetos pudo haberse referenciado también desde una
variable previamente asignada.
Caso 3: lo explicado en los dos casos anteriores se puede reunir en una clase, teniendo en
cuenta primero, que tanto si se desea seleccionar un único elemento o varios, la acción se
realiza sobre listas y segundo, que este tipo de funcionalidad es reutilizable y debemos
fomentar la cultura de bibliotecas de código reutilizable. Por lo tanto cree una clase con un
único constructor parametrizado que permita crear listas de selección única o de selección
múltiple. Enseguida se presenta la versión inicial de la clase:
'use strict';
export class ListaSeleccionable {
constructor({
elemento = null,
array = null,

valor = null,
texto = null,
multiselect = false }) {
this.idElemento = elemento;
this.elemento = document.querySelector(elemento);
if (multiselect) {
this.crearMultiSelect({ elemento, array, valor, texto });
} else {
this.crearSimpleSelect({ array, valor, texto });
}
crearMultiSelect({
elemento = null, // ID del componente de la forma '#id-componente'
array = null,
valor = null,
texto = null
}) {
let select = elemento.substring(1) + '-checkboxes';
let opciones = '';
array.forEach((obj, indice) => {

opciones += `
<label for="${obj[valor]}">
<input type="checkbox"
name="itemchk-${obj[valor]}"
id="${obj[valor]}"
/> ${obj[texto]}
</label>`;
});
this.elemento.innerHTML = `
<div class="checkboxes" id="${select}">
${opciones}
</div>`;
}
crearSimpleSelect({
array = null,
valor = null,
texto = null
}) {
this.elemento.innerHTML = '';
for (let index in array) {

this.elemento.options[this.elemento.options.length] = new Option(
array[index][texto],

array[index][valor]
);
}
}
get lista() {
return this.elemento;
}
De acuerdo a lo mostrado es posible llevar a cabo los siguientes pasos:
1. Comprobar que la siguiente instrucción realiza exactamente lo mismo que la descrita

en el punto 2 del caso 1:
let listaCiudades = new ListaSeleccionable({ ... });
Lógicamente se deben reemplazar los puntos suspensivos por los mismos

argumentos utilizados en el punto 2 del caso 1.
2. Compruebe que con el mismo constructor también se puede crear una lista de
selección múltiple si se hace un ligero cambio a la instrucción 6 del caso 2:
let listaEntornos = new ListaSeleccionable({

elemento: '#index-entornos',
array: [
{ id: '2', nombre: 'ECMAScript 6', creador: 'Brendan Eich' },
{ id: '4', nombre: 'PHP 7.0', creador: 'Rasmus Lerdorf' }
],
valor: 'id',
texto: 'nombre',
multiselect: true // Observe el cambio para el valor del atributo
});
3. Para continuar con los siguientes casos, se espera que pruebe esta clase con una
nueva aplicación que deseche lo implementado en los casos 1 y 2, pero que
continúe funcionando igual con la clase que aquí se plantea.
Caso 4: con lo explicado hasta aquí, es posible utilizar JS y CSS para generar
dinámicamente algunos elementos HTML. Ahora se requiere utilizar listeners, escuchas de
eventos, para permitir al usuario interactuar con dichos elementos. Veamos como:

1. Se puede utilizar la instancia creada en el paso 1 del caso 3 para acceder al
elemento del DOM que corresponde a la lista y agregarle un oyente de evento que
permita conocer cuál elemento de lista selecciona el usuario. Veamos:
listaCiudades.lista.addEventListener('change', event => {

console.log(`Seleccionó ${event.target.value}`);
});
Si observa la implementación de la clase, ésta tiene implementado un accesor, get

lista(), que retorna la referencia al elemento del DOM que corresponde a la lista
seleccionable. En el fragmento de código anterior se muestra cómo utilizar dicho
accesor para agregar un oyente de ventos que “escuche” los eventos “change”, de
tal manera que cuando el usuario seleccione un elemento de lista, el callback del
listener lleve a cabo las acciones programadas.
Note que el parámetro event del callback es un objeto cuya accesor target retorna el
elemento de lista que pulsó el usuario. Sabiendo esto, es posible acceder a
cualquiera de los atributos del elemento de lista, en este caso el atributo value.
Agregue este fragmento de código a su script de pruebas.
2. Verifique por consola que al seleccionar un elemento de la lista, se muestra lo

asignado al atributo value del elemento.
Esto no sólo es útil para conocer qué elemento eligió el usuario, sino que también
podría ser útil para crear listas dependientes, aquellas que actualizan los elementos
dependiendo del elemento pulsado en otra lista, por ejemplo, mostrar las
localidades, dependiendo del departamento elegido por el usuario.
3. El evento change está disponible también para otros elementos como por ejemplo
las casillas seleccionables. Para observar el comportamiento, defina la siguiente
casilla:
<input type="checkbox" id="chk-disponible" checked> Disponible
Nota: cuando se incluye el atributo checked, como aquí, el elemento se selecciona

de forma predeterminada, si no se incluye, la casilla no aparece seleccionada.
4. En el script de pruebas incluya el siguiente fragmento de código:
let chkDisponible = document.querySelector('#chk-disponible');

chkDisponible.addEventListener('change', e => {
if (e.target.checked) {
console.log('Está disponible');
} else {
console.log('No está disponible');
}
});
5. Pruebe a pulsar clic sobre la casilla para ver por consola uno de los dos mensajes
del log que indica cómo conmuta el estado checked del elemento.

6. La siguiente prueba de gestión de eventos, consiste en saber sobre cuál de los
siguientes elementos de tipo radio se pulsa clic:
<input type="radio" id="r1" name="estado" value="casado"> Casado

<input type="radio" id="r2" name="estado" value="soltero"> Soltero
<input type="radio" id="r3" name="estado" value="unión libre" checked>
Unión libre
<input type="radio" id="r4" name="estado" value="separado"> Separado
7. Lo que se requiere es asignar a cada botón un evento clic. Esto se puede hacer
fácilmente así:
let botones = doc.querySelectorAll('input[name="estado"]');

botones.forEach(boton => {
boton.addEventListener("click", e => {
console.log(e.target.value);
});
});
Observe que se usa el método querySelectorAll en vez de querySelector, para

garantizar que se retorna una colección de todas las referencias de los elementos de
tipo button cuyo nombre sea “estado” (input[name="estado"]).
Seguidamente se recorre el array de botones, asignando a cada uno un listener para

el evento clic.
Pruebe que efectivamente se obtienen los resultados esperados.
Nota: como puede ver, los métodos querySelector y querySelectorAll permiten

utilizar selectores CSS con el fin de filtrar la selección de elementos. Se recomienda
leer todo el capítulo 2 de “introducción a CSS” disponible en uniwebsidad.
8. Continuando con los botones radio, implemente una función que retorne el atributo
value del botón seleccionado. Tenga en cuenta que dicha función debe funcionar
para cualquier grupo de botones radio y no sólo para los definidos en el punto 6.
Como la función debe servir para detectar el valor seleccionado para cualquier grupo
de botones, entonces el nombre de dicho grupo debe recibirse como argumento:
function getRadioSeleccionado(nombreElementos) { ... }
Se sabe que con querySelectorAll se accede a un grupo de elementos y que con

template strings se pueden incrustar fácilmente expresiones en una cadena, siendo
así, el argumento que recibe querySelectorAll puede utilizar un template para
parametrizar el nombre de los botones que se quieren referenciar.
El array de botones referenciado, se puede recorrer con el for tradicional, verificando

para cada botón si su estado es checked, de ser así, se forza la salida del for y se
retorna el value del botón seleccionado.

9. Pruebe que su implementación funciona para los botones definidos en el punto 6,
ingresando como argumento de la función el name “estado”.
10. En el caso 2 se mostró cómo crear una lista de chequeo a partir de una array de
objetos. La lista de casillas seleccionables se caracteriza porque el nombre de cada
casilla empieza por el prefijo “itemchk-”. Se puede aprovechar esta particularidad
para referenciar en un array todas las casillas cuyo nombre empiece por dicho prefijo
y que además estén marcadas como seleccionadas (checked), para luego retornar
un array con los ID de las casillas marcadas. Veamos un accesor que hace esto:
get seleccionados() {
let seleccionados = document.querySelectorAll(
`${this.idElemento} input[name^='itemchk-']:checked`
);
return Array.from(seleccionados).map(casilla => {

return casilla.id // podría ser también "value"
});
}
La instrucción Array.from(seleccionados), lo que hace es retornar un array de

elementos, en este caso, casillas de selección, a partir de la colección dada como
argumento. Seguidamente se utiliza el método map para crear un array con los
resultados de la llamada al callback. La instrucción que retornan el array se habría
podido construir de una forma más clásica. Observe cómo quedaría:
let arraySeleccionados = [];

seleccionados.forEach(casilla => {
arraySeleccionados.push(casilla.id);
});
return arraySeleccionados;
Agregue el accesor hasta aquí descrito a la clase ListaSeleccionable.
Nuevamente se recomienda estar familiarizado con los selectores CSS, que también
pueden ser usados con querySelector y querySelectorAll.
11. Para probar que el accesor creado en el punto anterior retorna un array con los ID
de las casillas seleccionadas, agregue en el script de pruebas el siguiente bloque de
código:
let casillas = doc.querySelectorAll('input[name^="itemchk"]');

casillas.forEach(casilla => {
casilla.addEventListener("click", e => {
console.log(listaEntornos.seleccionados);
});
});

A estas alturas debe ser claro que lo que hace este bloque de código es obtener una
referencia a la colección de casillas de selección y luego, para cada casilla, agrega
un listener que “escucha” los eventos clic sobre las casillas. Así, cuando se pulsa clic
sobre una casilla, se muestra por consola el array de elementos seleccionados, del
conjunto creado en el punto 2 del caso 3.
Si ejecuta la aplicación, cada vez que pulse clic sobre una casilla, debería ver por
consola el array de ID de las casillas seleccionadas.
Caso 5: la versión 5 de HTML proporciona varias propiedades de validación que pueden ser
usadas para verificar la correctitud de los datos que se ingresan en los formularios.
Enseguida se indican los pasos para realizar algunas pruebas.
1. Agregue a la página con la que está realizando las pruebas de estos casos, un
campo de texto de tipo email:
<input type="email" id="index-correo" name="index-correo" required>
2. También agregue un último elemento de tipo button a la página con la que está
realizando las pruebas de estos casos:
<button id='index-btnenviar'>Enviar</button>
3. Agregue un listener al botón, para que cuando se pulse clic sobre él, se compruebe
si el correo introducido es correcto:
doc.querySelector("#index-btnenviar").addEventListener('click', event => {

let correo = document.querySelector('#index-correo');
if (correo.validity.typeMismatch || correo.validity.valueMissing) {
console.log('Correo inválido');
}
});
4. Compruebe que al pulsar clic sobre el botón de enviar, efectivamente se hace la

validación del correo introducido.
5. Realice también otras comprobaciones basadas en las propiedades customError,

patternMismatch, rangeOverflow, rangeUnderflow, stepMismatch, tooLong y valid.
Para dichas validaciones, realice las consultas necesarias y agregue a su página de
prueba los componentes que se requieran.

Caso de estudio – Contratación para el desarrollo de aplicaciones
La empresa MVM – Ingeniería de Software está interesa en recopilar datos para el
reclutamiento y selección de personal, según se muestran en el siguiente pre-diseño:

Usted y si lo prefiere con dos compañeros de grupo más, está invitado a presentar una
propuesta de implementación para el formulario de captura de datos que posteriormente se
almacenarán en una base de datos empresarial.
Por favor tenga en cuenta las siguientes restricciones y recomendaciones:
● El campo de entrada correo electrónico debe definirse de tipo “email” para que
HTML5 realice la validación respectiva y no podrá dejarse vacío.
● De una lista seleccionable con las opciones 1 - Freelance, 2 - Contratación por

proyectos y 3 - Contratación a término indefinido, se podrá elegir un elemento de
lista del cual sólo se guardará el código o número respectivo.
● Si se marca la casilla correspondiente a los entornos colaborativos se guardará el

valor lógico true y en caso contrario el valor false.
● El área de texto que solicita información sobre experiencia en desarrollo de

proyectos no podrá estar vacía y se guardará eliminando los posibles espacios
agregados al principio o al final del texto. Adicionalmente no podrá contener más de
20 palabras.
● En el campo de acción, obligatoriamente se deberá seleccionar una opción que se

guardará como un valor entre 1 y 4.
● Se podrán elegir tantos entornos de desarrollo como sean necesarios. La selección

realizada se guardará como un array de objetos con valores entre 1 y 5.
● Otras restricciones:
○ La lista de tipos de contratación se llena desde un array de objetos.
○ Las casillas de entornos de desarrollo se definen a partir de una lista de

objetos.
○ Al pulsar clic sobre el botón enviar se validará que toda la información

solicitada que haya sido diligenciada y si es así se creará un objeto JSON
con ella, que para efectos de verificación se mostrará por consola.
○ El personal de desarrollo de backend se encargará de procesar los objetos

JSON y almacenarlos en la base de datos, así que no se preocupe por este
requerimiento.
○ Use la carpeta “data” de su proyecto para crear un archivo de tipo JSON:
{"aspirantes":[
{"correo":"...", "contratacion":2, ...},
...
]}

Como se muestra, dicho archivo representará un array con al menos tres
pruebas con datos que parezcan casi reales. Nada de bla bla bla o de “lorem
ipsum dolor ...” en los datos de prueba.
El origen de dichos datos serán las pruebas que vaya realizando y mostrando
por consola, hasta el momento de tener perfeccionado el formulario.
Es muy importante que el archivo JSON quede correctamente generado,

dado que será utilizado en el siguiente caso de estudio.
Recuerde guardar la carpeta completa de su proyecto en la carpeta

compartida siguiendo los estándares ya definidos.
Hasta aquí las restricciones y recomendaciones de lo que hay que implementar.
Presente un plan de trabajo en el que especifique las tareas que hay que desarrollar, y si
son dos o tres integrantes, quién es el encargado de cada una.
Obtenga la información sobre HTML, CSS y JavaScript, necesaria para desarrollar el

proyecto:
● Revisión de objetivos.
● Repaso de temáticas en cuando a implementación de frontend que es necesario

tener en cuenta y se conocen.
● Introducción de nuevos conceptos a partir de búsqueda de información sobre

temáticas desconocidas.
● Análisis de la solución indicando requisitos funcionales, no funcionales y

restricciones que tendrá la implementación del caso de estudio.
Es necesario que antes de seguir adelante, esta parte sea socializada con el director
del proyecto (en este caso el profesor de la asignatura).
Presente una propuesta de diseño, maquetación y prototipado, basada en la información

gráfica y textual presentada en el planteamiento, para implementar la solución. Tenga en
cuenta que la imagen mostrada al principio es sólo un referente y que el diseño de su
formulario puede ser mucho mejor.
Con base en el producto listo para producción, verifique qué nuevos conocimientos adquirió.
Finalmente prepare la presentación del producto, a partir de lo cual deberán hacerse las
revisiones del caso y las reflexiones sobre lo aprendido y lo que es necesario enfatizar.
Nota: si logra que a medida que el usuario vaya realizando los ingresos, se muestre por
consola el estado de un objeto como el que se muestra enseguida, tendra bono adicional:
let aspirante = {
correo: '',

contrato: 0,
colaborativo: 0,
experiencia: '',
campoAccion: 0,
entornos: []
}
Con estado se indica los valores que van siendo asignados en los atributos cada vez que el
usuario ingresa un dato o hace un cambio en el formulario.
Consulte la utilidad de las siguientes páginas:
● https://codepen.io
● https://jsfiddle.net
● Ionicons
● El diseño del Santo Grial
● Maquetación con grid
● CSS Grid, la solución a los problemas de float y flexbox

Comunicación Cliente/Servidor mediante Protocolo HTTP y la API Fetch
El HTTP (HyperText Transfer Protocol o Protocolo de Transferencia de Hipertextos) es el

protocolo de transmisión de información de la World Wide Web y que permite que un
computador solicitante de datos y el que contiene la información solicitada puedan
comunicarse en un mismo idioma a través de Internet.
Este protocolo establece las pautas a seguir, los métodos de petición (llamados “verbos”),
bajo un esquema de petición-respuesta entre el cliente y el servidor. Un cliente puede ser
un explorador determinado, al que el servidor brinda una respuesta estructurada de modo
puntual y dotada de una serie de metadatos, que establecen las pautas para el inicio,
desarrollo y cierre de la transmisión de la información. Estos son los “métodos de petición”,
es decir, los comandos que disparan la ejecución de recursos determinados, cuyos archivos
residen en el servidor.
Por ejemplo: Al abrir una página web específica, el intercambio informativo entre nuestro
explorador web y el servidor donde reside la información establecerá de qué manera debe
transmitirse la información, en qué lugar están las imágenes y en qué orden se mostrarán,
etc. Este intercambio de comandos de solicitud y códigos de respuesta da como resultado la
representación en el computador cliente de la misma información contenida originalmente
en el servidor, que puede estar a miles de kilómetros de distancia o en una red local o
incluso en el mismo computador donde recide el navegador que hace la petición.
En la actualidad el HTTP ha sido desplazado por el HTTPS (HyperText Transfer Procotol

Secure o Protocolo Seguro de Transferencia de Hipertexto), que no es más que la versión
segura del HTTP, es decir, una variante del mismo protocolo que se basa en la creación de
un canal cifrado para la transmisión de la información, lo cual lo hace más apropiado para
ciertos datos de tipo sensible (como claves y usuarios personales).
Se recomienda ver este video para acceder a una corta e interesante explicación de cómo
funciona el protocolo HTTP.
En aplicaciones del siglo pasado como ésta, era común hacer peticiones síncronas en las
que era necesario cargar toda la página cada vez que se hacía una petición al servidor,
actualmente dicha práctica ha caído en desuso y el acceso a recursos de un servidor se
realiza de manera asíncrona mediante Ajax o más recientemente, mediante Fetch, que
pretende ofrecer una nueva interfaz estándar de uso de Ajax, compatible en todos los
navegadores, a la vez que permite usar promesas, que nos facilitan la organización del
código asíncrono en las aplicaciones.
Tanto si se usa Ajax puro o una librería como JQuery o si se usa la API Fetch para hacer
solicitudes asíncronas, ya no será necesario recargar toda la página cada vez que se
obtiene una respuesta del servidor, sino que el contenido de la respuesta se podrá incrustar
en un elemento de la página actualmente desplegada, dando lugar a lo que se conoce como
SPA (Single Page Application), un tipo de aplicación web donde todo el contenido se
muestra en la misma página, sin necesidad de las recargas habituales en el siglo pasado.

Este apartado privilegia la API Fetch sobre Ajax puro o librerías como JQuery que están
cayendo en desuso, para demostrar la forma de hacer peticiones asíncronas, inicialmente a
un servidor local y luego a servidores remotos, principalmente de sitios de datos abiertos.
Suponga que tiene en un nuevo proyecto el siguiente archivo JSON guardado como
../data/paises.json:
[{
"code": "AFG",
"name": "Afghanistan",
"continent": "Asia",
"region": "Southern and Central Asia",
"surfacearea": 652090,
"indepyear": 1919,
"population": 22720000,
"lifeexpectancy": 45.9,
"governmentform": "Islamic Emirate",
"capital": 1,
"codecapital": "AF"
},
...
{
"code": "UMI",
"name": "United States Minor Outlying Islands",
"continent": "Oceania",
"region": "Micronesia/Caribbean",
"surfacearea": 16,
"indepyear": 0,
"population": 0,
"lifeexpectancy": 0,
"governmentform": "Dependent Territory of the US",
"capital": 0,
"codecapital": "UM"
}
]
Y suponga que tiene el siguiente código en un scrip JS como los que viene trabajando:
doc.addEventListener('DOMContentLoaded', event => {
fetch('https://www.datos.gov.co/resource/qi54-achv.json')
.then(response => response.json())
.then(json => console.log(json))
.catch(function(err) {
console.error(err);
});
});

De esta manera, debería ser posible acceder por consola a la información contenida en el
archivo JSON.
Construya una tabla en la que muestre de manera paginada los registros del archivo JSON.

Diseño de Interfaces - Apuntes de Clase PDF

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño de Interfaces - Apuntes de Clase PDF

Cargado por

Copyright:

Formatos disponibles

Temas

Mobile User Experience

Un servicio o un producto sin usuarios no tiene sentido

Apuntes sobre Diseño de Interfaces [email protected]

Desde un contexto general, la experiencia de usuario está en el medio de las necesidades

Una visión más específica indica que incluye:

● UX no sólo es lo relativo a la interfaz de usuario

● No es la tecnología que la soporta, ésta es sólo un facilitador

● No es un paso en un proceso, es un proceso interactivo en sí mismo que hace uso

● No es sólo el usuario así el usuario es el eje articulador. Al usuario siempre se le

● No es sencilla y no se puede concretar rápidamente.

Apuntes sobre Diseño de Interfaces [email protected]

● Satisfacción del cliente

● Mejora la tasa de retorno a la inversión.

Apuntes sobre Diseño de Interfaces [email protected]

En la base de la gráfica se define la estrategia, donde:

Apuntes sobre Diseño de Interfaces [email protected]

En la fase de estructura, se definen

Apuntes sobre Diseño de Interfaces [email protected]

Definición y implementación del diseño visual.

Apuntes sobre Diseño de Interfaces [email protected]

● Focus group: estudia cualitativamente las opiniones o actitudes de un grupo.

● Test de usuarios presenciales o remotos: prueba de usabilidad que se basa en la

Apuntes sobre Diseño de Interfaces [email protected]

Rol: Research o Investigador UX

Esta tarea la puede realizar un rol arquitecto de información o UX Researcher,

Rol: investigador UX.

● Análisis experto (evaluación heurística): consiste en aplicar un conjunto de métodos

○ Evaluación heurística: cómo llevar a cabo una evaluación heurística

En general se revisan elementos como el diseño, la usabilidad, el contenido o el

Apuntes sobre Diseño de Interfaces [email protected]

○ Cómo testear tus landing pages con un test AB

○ Qué es un test A/B: 8 claves y 5 herramientas para aprender de tus errores.

Los elementos a probar pueden ser banners, módulos de contenido, campañas de

● Personas: consiste en definir usuarios simulados que reúnen características de un

Definición: hecho el análisis llega la etapa en la que comienza el trabajo de concreción de

● Arquitectura de información (AI): es la disciplina encargada del estudio, análisis,

● Qué es la arquitectura de información.

Rol: arquitecto de información.

● Diseño de interacción (IxD): es un campo interdisciplinario que define el

● Business analysis/Análisis de negocio: es el encargado de transmitir los requisitos

Apuntes sobre Diseño de Interfaces [email protected]

● Estrategia de contenidos digitales (digital content estrategy): una buena estrategia

Apuntes sobre Diseño de Interfaces [email protected]

● Deseño gráfico: es la acción de concebir, programar, proyectar y realizar

● Desarrollo del front-end: se encarga de transformar los diseños realizados por el

Consultar la diferencia entre herramientas de wireframes, mockups y prototipado.

Apuntes sobre Diseño de Interfaces [email protected]

1. Descargue Laragon portable y descomprima en una ubicación de fácil acceso.

2. Ingrese a la carpeta de la aplicación y ejecute Laragon.

3. Pulse clic en “Menú” o en el icono de configuración y en la ficha “General”, elija el

4. En la ficha, “Servicios & Puertos” configure como se indica en la figura siguiente:

5. Consulte sobre otras alternativas existentes.

Apuntes sobre Diseño de Interfaces [email protected]

Tenga en cuenta que si está ejecutando Laragon y pulsa clic

1. Descargue el archivo crear.bat y guárdelo en la carpeta www.

Tanto Laragon como AppServm, WampServer, EasyPHP y otros servidores web,

No intente ejecutar aún el archivo que acaba de descargar y guardar en www,

Apuntes sobre Diseño de Interfaces [email protected]

3. En la ventana de comandos de Cmder y estando dentro de www, ejecute la

Este comando creará dentro de www una carpeta con la

Dentro de data se guardarán los datos que eventualmente