Fundamentos HTML II - Utn 2024

Escribir el código
Primero, es necesario saber que la implementación de HTML se basa en el uso de

texto para dar indicaciones estandarizadas a una plataforma de navegación. Esto
significa que todas las instrucciones que se escriban en este lenguaje serán
seguidas por los interpretadores de código. Basta con que uses un simple editor de
texto para escribir un documento HTML. Al escribir el código, se utilizan dos grandes
grupos de cosas: elementos y atributos.
Estos tienen las siguientes características:
• Elementos: Hacen referencia a las indicaciones utilizadas para definir qué función
tiene cada parte del texto, ya sea un título, parte del cuerpo, un pie de página; si es
una imagen, un video o, incluso, una caja de diálogo. Básicamente, los elementos
sirven para informar al sistema qué es cada una de las líneas del código.
• Atributos: Añaden funcionalidades a ciertos elementos para darles un formato

específico o para relacionar elementos dentro del texto. Los atributos contienen
información adicional acerca del elemento, pero que no queremos que aparezca
en el contenido real del elemento.
Por ejemplo, la siguiente línea de contenido es el resultado que verán los usuarios:
Hoy voy a salir a caminar.
Si queremos especificar que se trata de un párrafo, la etiqueta a utilizar es <p>. El

elemento p (párrafo) es el apropiado para distribuir el texto en párrafos.
<p>Hoy voy a salir a caminar.</p>
91
Las partes principales del elemento son:
La etiqueta de apertura: Consiste en el nombre del elemento (en este caso, p),
encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde
comienza o empieza a tener efecto el elemento -en este caso, dónde es el comienzo
del párrafo-.
La etiqueta de cierre: Es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el
elemento -en este caso dónde termina el párrafo-.
El contenido: este es el contenido del elemento, que en este caso es sólo texto.
El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido

equivale al elemento.
Atributos: Por ejemplo, un elemento de estilo (style) que añade el color púrpura y la
tipografía “sans-serif” tendrá el siguiente aspecto:
<p style=“color:purple;font-family:’sans-serif’”>Hoy voy a salir a
caminar.</p>
También se pueden colocar elementos dentro de otros elementos (esto se llama

anidamiento “nesting”). Si, por ejemplo, queremos resaltar una palabra del texto (en
el ejemplo la palabra “salir”), podemos encerrarla en un elemento <strong>, que
significa que dicha palabra se debe enfatizar:
<p>Hoy voy a <strong>salir</strong> a caminar.</p>
Esto se vería así en un navegador: Hoy voy a salir a caminar.
92
Debemos asegurarnos que los elementos estén correctamente anidados: en el
ejemplo de abajo, creamos la etiqueta de apertura del elemento <p> primero, luego
la del elemento <strong>, por lo tanto, debes cerrar esta etiqueta primero, y luego la
de párrafo <p>.
Este ejemplo es incorrecto: <p>Hoy voy a <strong>salir a caminar.</p></strong>
Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se

encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran
solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede
que obtengas resultados indeseados.
Anatomía del HTML
Hasta ahora hemos visto lo básico de elementos HTML individuales, pero estos no
son muy útiles por sí solos. Ahora veremos cómo los elementos individuales son
combinados para formar una página HTML entera.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Esta es una página de juegos</title>
</head>
<body>
<p>Hoy voy a <strong>salir</strong> a caminar.</p>
</body>
</html>
Tenemos lo siguiente:
<!DOCTYPE html> El tipo de documento. Es un preámbulo requerido.

Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento
actuaban como vínculos a un conjunto de reglas que el código HTML de la página
debía seguir para ser considerado bueno, lo que podía significar la verificación
93
automática de errores y algunas otras cosas de utilidad. Hoy día es simplemente un
artefacto antiguo, pero que debe ser incluido para que todo funcione correctamente.
<html></html> El elemento <html>. Este elemento encierra todo el contenido de la

página entera y, a veces, se le conoce como el elemento raíz (root element).
<head></head> El elemento <head> actúa como un contenedor de todo aquello que

quieres incluir en la página HTML que no es contenido visible por los visitantes de la
página. Incluye cosas como palabras clave (keywords), una descripción de la página
que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo
al contenido, declaraciones del juego de caracteres, el autor de la página, etc.
<meta charset="utf-8"> <meta>. Este elemento establece el juego de caracteres

que el documento usará en utf-8, que incluye casi todos los caracteres de todos los
idiomas humanos. Básicamente, podemos manejar cualquier contenido de texto que
querramos incluir. No hay razón para no establecerlo, y puede evitar problemas en el
futuro.
<title></title> El elemento <title> establece el título de la página, que es el título que

aparece en la pestaña o en la barra de título del navegador cuando la página es
cargada, y se usa para describir la página cuando es añadida a los marcadores o
como favorita (Bookmark).
<body></body> El elemento <body>. Encierra todo el contenido que deseamos

mostrar a los usuarios web que visiten la página, ya sea texto, imágenes, videos,
juegos, pistas de audio reproducibles, y demás.
Una vez más, los invito a visitar la página https://developer.mozilla.org/es/play para

“jugar” con los elementos básicos que hacen al HTML.
94
Las etiquetas y elementos más utilizados
La primera versión de HTML constaba de 18 etiquetas. Desde entonces, cada nueva

versión trajo nuevas etiquetas y atributos añadidos al marcado. La actualización más
significativa del lenguaje hasta ahora fue la introducción de HTML5 en 2014.
La principal diferencia entre HTML y HTML5 es que este último admite nuevos tipos
de controles de formulario. HTML5 también introdujo varias etiquetas semánticas
que describen claramente el contenido, como <article>, <header> y <footer>.
En esta sección emplearemos algunas de las etiquetas HTML más utilizadas que
servirán de ejemplo sobre la estructura HTML.
Encabezados
Los elementos de encabezado permiten especificar que ciertas partes del contenido
son encabezados, o subencabezados del contenido. De la misma forma que un libro
tiene un título principal, y que a su vez puede tener títulos por cada capítulo
individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también.
HTML posee seis niveles de encabezados:
Desde <h1> (en-US) hasta <h6> (en-US), aunque probablemente solo llegues a
usar 3-4 como mucho:

<h1>Hoy voy a salir a caminar.</h1>
95
Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de
texto; los usarás frecuentemente para el marcado de contenido de texto regular.
Agregá uno o algunos párrafos al texto de ejemplo y colocados directamente debajo
del elemento <img>.
Imágenes
Algunos elementos no poseen contenido, y son llamados elementos vacíos. Por
ejemplo, el elemento <img>:
<img src="images/iguazu.png" alt="Mi imagen de prueba" />
Incrusta una imagen en el <body> de la página. Esto se logra a través del atributo
src (“source" o fuente u origen), el cual contiene el path (ruta o ubicación) del archivo
de imagen. También se incluye un atributo alt (alternative) el cual contiene un texto
que debería describir la imagen, y que podría ser accedido por usuarios que no
pueden ver la imagen, quizás porque:
• Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales
usualmente utilizan herramientas llamadas Lectores de pantalla (Screen Readers),
los cuales les leen el texto contenido en el atributo alt.
• Se produjo algún error en el código que impide que la imagen sea cargada. Como
ejemplo, si modificas deliberadamente la ubicación dentro del atributo src para que
este sea incorrecto, al recargar la página, deberías ver algo así en lugar de la
imagen:
Mi imagen de prueba
La frase clave acerca del texto alt de arriba es “texto que debería describir la
imagen”. El texto alt debe proporcionarle al lector la suficiente información como
para que este tenga una buena idea de qué muestra la imagen. Por lo que el texto
actual “Mi imagen de prueba” no es para nada bueno. Un texto mucho mejor para la
96
imagen sería: “Esta imagen contiene una foto de las Cataratas del Iguazú”. Prueba a
dar con mejores textos alt para la imagen.
Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos
especiales para ellas. El marcado de listas se realiza siempre en al menos dos
elementos. Los dos tipos de listas más comunes son las listas ordenadas y las
desordenadas:
• Las listas desordenadas son aquellas en las que el orden de los items no es
relevante, como en una lista de compras. Estas son encerradas en un elemento
<ul> (unordered list).
• Las listas ordenadas son aquellas en las que el orden sí es relevante, como en
una receta. Estas son encerradas en un elemento <ol> (ordered list).
Cada elemento de la lista se coloca dentro de un elemento <li> (list item).
Por ejemplo, si queremos transformar parte del siguiente párrafo en una lista:
<p>En esta tecnicatura, somos una comunidad de tecnólogos,
pensadores, y constructores que trabajamos juntos...</p>
Podemos hacer lo siguiente:
97
<p>En esta tecnicatura, somos una comunidad de</p>
<ul>
<li>tecnólogos</li>
<li>pensadores</li>
<li>constructores</li>
</ul>
<p>que trabajamos juntos...</p>
Vínculos
Los vínculos o enlaces son muy importantes (son los que hacen de la web, la web).
Para implementar un vínculo, necesitas usar una etiqueta simple <a> la ‘a’ es la
abreviatura de la palabra inglesa “anchor” (“ancla”).
Para convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:
Elige algún texto. Nosotros elegimos “Web e-learning UTN”.
Encierra el texto en un elemento <a>, así:

<a>Web e-learning UTN</a>
Proporciónale al elemento <a> un atributo de referencia “href”, así:

<a href="">Web e-learning UTN</a>
Completa el valor de este atributo con la dirección web con la que quieras conectar
al vínculo:
<a href="https://sceu.frba.utn.edu.ar/e-learning"
>Web e-learnign UTN</a>
Podemos obtener resultados inesperados si al comienzo de la dirección web

omitimos la parte https:// o http:// llamada protocolo. Así que luego del marcado del
vínculo, haz click en él para asegurarte que te dirige a la dirección deseada.
98
Nota: href podría parecer, en principio, una opción un tanto oscura para un nombre
de atributo. Si tienes problemas para recordarla, recuerda que se refiere a hypertext
reference (referencia de hipertexto).
Ventajas y desventajas de HTML

Como cualquier otro lenguaje, HTML tiene sus puntos fuertes y sus limitaciones.
Ventajas
• Ideal para principiantes: HTML tiene un marcado limpio y consistente, así como
una curva de aprendizaje poco pronunciada.
• Soporte: El lenguaje es ampliamente utilizado, con muchos recursos y una gran

comunidad de apoyo.
• Accesible: Es de código abierto y completamente gratuito. HTML se ejecuta de

forma nativa en todos los navegadores web.
• Flexible: HTML es fácilmente integrable con lenguajes “backend” (el encargado de

procesar toda la información para que un sitio opere eficientemente) como PHP y
Node.js.
Desventajas
• Es estático: Se utiliza principalmente para páginas web estáticas. Para una
funcionalidad dinámica, puede ser necesario utilizar JavaScript o un lenguaje de
backend como PHP.
• Página HTML independiente: Los usuarios tienen que crear páginas web
individuales para HTML, aunque los elementos sean los mismos.
• Compatibilidad con los navegadores: Algunos navegadores tardan en adoptar

nuevas funciones. A veces, los navegadores más antiguos no reproducen las
nuevas etiquetas.
¿Cómo se relacionan HTML, CSS y JavaScript?

El HTML se utiliza para añadir elementos de texto y crear la estructura del contenido.
Sin embargo, no es suficiente para construir un sitio web profesional y totalmente
99
responsivo. Por eso, HTML necesita la ayuda de las Hojas de Estilo en Cascada
(CSS) y de JavaScript para crear la mayor parte del contenido del sitio web.
El CSS es responsable de estilos como el fondo, los colores, el diseño, el espaciado

y las animaciones. Por otro lado, JavaScript añade funcionalidades dinámicas como
sliders (carruseles), pop-ups y galerías de fotos. Estos tres lenguajes son los
fundamentos del desarrollo frontend (“Desarrollo del lado del cliente” o la interfaz de
un sitio).
Como hemos visto, usando código CSS podemos darle estilo y diseño a cada
etiqueta HTML. Aplicando estas reglas, se puede acomodar la posición, color,
animaciones y demás propiedades de cada etiqueta de la página web.
Con JavaScript, se pueden añadir elementos interactivos a una página web, como
animaciones o formularios de entrada de usuarios con capacidad de respuesta.
También puede utilizarse para controlar el comportamiento de los elementos HTML y
estilos CSS.
Sin embargo, es importante tener en cuenta que mientras HTML y CSS son
necesarios para que un sitio web funcione, JavaScript no siempre es necesario. Hay
ciertos elementos que se pueden conseguir solo con HTML y CSS, como los efectos
“hover” (cuando por ejemplo colocamos el puntero del mouse arriba de un link) o el
diseño responsivo. Todo depende de las necesidades y objetivos específicos del sitio
web.
5 Ejemplos de uso entre HTML, CSS y Javascript
HTML, CSS y Javascript son lenguajes de programación que solos funcionan bien,
pero juntos pueden darle a un proyecto otro nivel.
Veamos a que nos referimos:
1. Una imagen en una página web se define y se le da tamaño (px) con HTML. Se
utiliza CSS para añadir un borde y cambiar la posición de la imagen en la página.
100
A continuación, se puede utilizar JavaScript para crear un efecto de animación
cuando el usuario pasa por encima de la imagen.
2. Un formulario de contacto en una página web se crea con HTML, se estiliza con
CSS, pero se hace funcional con JavaScript para enviar la información introducida
a la dirección de correo electrónico apropiada.
3. Un menú de navegación en una página web se crea con HTML y se estiliza con
CSS, y se puede utilizar JavaScript para añadir un efecto desplegable cuando el
usuario pasa por encima de un elemento del menú.
4. Un mapa interactivo en una página web se crea con HTML, se estiliza con CSS, y
se hace funcional con JavaScript para mostrar información diferente o resaltarla
cuando el usuario clics en un área específica.
5. Las páginas de productos de una tienda online utilizan HTML para mostrar los
artículos, CSS para el estilo y el diseño, y JavaScript para añadir elementos
interactivos como un carrito de la compra dinámico o un carrusel de imágenes de
productos.
En https://developer.mozilla.org/es/docs/Learn encontraremos todo el glosario de

etiquetas y más, y profundizar el conocimiento de HTML para desarrolladores
frontend. Así como también enlaces a Github, el repositorio de herramientas y
aplicaciones de código abierto más extenso de internet.
Otro recurso disponible es https://code.visualstudio.com/Docs/languages/html un

editor de código fuente desarrollado por Microsoft. Este es un software libre y
multiplataforma, disponible para Windows, GNU/Linux y macOS. Visual Studio Code
tiene una buena integración con Github, cuenta con soporte para depuración de
código, y dispone de una amplia librería de extensiones, que básicamente nos
brindan la posibilidad de escribir y ejecutar código en cualquier lenguaje de
programación.
101
Pruebas de Usuario
Si una instalación de prueba funciona perfectamente, las unidades

que produzca no funcionarán en absoluto.
LEYES UNIVERSALES DE INGENIERIA, LEY DE MURPHY
La utilización de pruebas de usuario pueden ser muy útiles para mejorar el diseño
web, ya que ofrecen información directa sobre las percepciones, expectativas y
comportamientos de los usuarios finales.
Incluir pruebas de usuario en el proceso de diseño web ayuda a identificar

problemas potenciales, validar decisiones y optimizar la UX.
Algunos beneficios clave de realizar pruebas de usuario incluyen:
• Validación de la intuitividad y claridad de la interfaz de usuario.
• Identificación de errores comunes y puntos de fricción.
• Mejor comprensión de las preferencias y necesidades de los usuarios.
• Evaluación de la efectividad de cambios propuestos en el diseño.
• Incorporación de perspectivas diferentes y diversas a la hora de tomar decisiones.
Hemos dedicado tiempo e ideas claras al crear un producto o sitio web. Ahora,
necesitamos evaluarlo, por lo tanto, requeriremos un punto de vista distinto.
Las pruebas de usabilidad están enfocadas en el usuario final y te ayudan a crear la

mejor experiencia de usuario, en cuanto que obtendremos sus comentarios de forma
directa.
Como hemos visto en la UNIDAD 2, la usabilidad es un aspecto fundamental en el

diseño de productos y sistemas interactivos. Un producto con buena usabilidad,
102
permite a los usuarios realizar tareas específicas con eficacia, eficiencia y
satisfacción; mientras que un producto con mala usabilidad puede generar
frustración, errores y abandono. Por lo tanto, sugerimos siempre retornar al capítulo
sobre Jakob Nielsen y los 10 principios de usabilidad que deben ser considerados en
el diseño de productos y sistemas interactivos. En resumen, se basan en la idea de
que la interfaz debe ser fácil de aprender y de utilizar, así como permitir a los
usuarios completar tareas de manera eficiente y efectiva.
Las pruebas de usabilidad pueden realizarse de forma remota o personal e incluir

varios métodos como observación, registro de pantalla o retroalimentación verbal.
Gracias a ellas, podremos saber si los usuarios reales del producto o sitio web
navegan de manera fácil e intuitiva.
Generalmente, los investigadores y evaluadores de UX llevan a cabo estudios de

usabilidad en cada iteración (repetición del proceso) del producto, desde su
desarrollo inicial hasta el lanzamiento del mismo. Esto permite descubrir cualquier
problema con el producto a partir de la experiencia del usuario, decidir cómo
solucionar estos problemas y, en última instancia, determinar si el producto es
realmente útil.
Identificar y solucionar estos problemas iniciales ahorra a las empresas tiempo y

dinero: los desarrolladores no tienen que revisar el código de un producto terminado
con un diseño deficiente, y es más probable que el equipo de producto lo lance a
tiempo.
Durante un estudio de usabilidad, el moderador pide a los participantes en sus

sesiones individuales que completen una serie de tareas, mientras que el resto del
equipo observa y toma notas. Al observar a los usuarios reales navegar por
el producto o sitio web y escuchar sus elogios e inquietudes, podrás identificar
dónde logran completar las tareas de forma rápida y exitosa, así como dónde
disfrutan más la experiencia y dónde encuentran problemas y experimentan
confusión.
103
Después de realizar el estudio, es importante analizar los resultados e informar al
líder del proyecto sobre cualquier idea interesante.
5 beneficios de las pruebas de usabilidad

1. Brindan un examen imparcial, preciso y directo de la experiencia del usuario sobre
el producto o sitio web. Al probar la usabilidad en una muestra de usuarios reales
(que no están contaminados por la visión de los creadores y diseñadores), sus
comentarios resolverán la mayoría de los debates internos del equipo.
2. Son convenientes, pues requieren pocas adecuaciones. Para llevar a cabo el

estudio, todo lo que tienes que hacer es encontrar un lugar tranquilo y traer un
equipo de grabación portátil. Si no tienes equipo de grabación, alguien del equipo
puede tomar notas.
3. Pueden evidenciar qué hacen los usuarios con el producto o en el sitio web y por
qué realizan esas acciones.
4. Te permite abordar los problemas del producto o sitio web antes de gastar
recursos en un diseño potencialmente deficiente.
5. Posibilitan un diseño intuitivo que, a su vez, aumenta el uso, mejora los resultados
que obtienen los usuarios y fomenta una mayor demanda del sitio web o producto.
Tres tipos de pruebas a evaluar

1. Pruebas de usabilidad de guerrilla: Este tipo de estudio se realiza en algún
lugar con mucho tránsito peatonal. Esto te permite que, entre los transeúntes,
seleccionemos al azar personas que tal vez nunca hayan oído hablar del producto o
sitio web y solicitarles evalúen la experiencia.
2. Pruebas de usabilidad remota no moderada: La prueba de usabilidad remota

no moderada tiene dos ventajas principales: utiliza un software de terceros para
reclutar participantes objetivo para el estudio, de modo que podemos dedicar menos
tiempo en reclutar y más tiempo a investigar. También, permite a los participantes
interactuar con la interfaz por sí mismos y en su entorno natural: el software puede
grabar video y audio del usuario completando tareas.
104
Permitir que los participantes interactúen con el diseño en su entorno natural, sin
que nadie los observe, puede brindar una retroalimentación más realista y objetiva.
Cuando nos encuentramos en la misma sala que los participantes, podemos
motivarlos a que hagan un mayor esfuerzo para completar las tareas, ya que no
quieren parecer incompetentes frente a un experto. Su experiencia percibida
también puede llevarlos a complacer en lugar de ser honestos cuando se les pide su
opinión, sesgando las reacciones y comentarios de su experiencia de usuario.
3. Pruebas de usabilidad moderadas: La prueba de usabilidad moderada tiene dos

ventajas principales. Interactuar con los participantes en persona o mediante una
llamada de video nos permite pedirles que expliquen sus comentarios si no los
comprendemos, lo que es imposible de hacer en un estudio de usabilidad no
moderado. También, podrá ayudar a los usuarios a entender la tarea y mantenerlos
en el camino.
Cómo hacer pruebas de usabilidad: 9 fases

1. Decide qué parte del sitio web o producto queremos testear. ¿Tienes alguna
pregunta urgente sobre cómo interactúan los usuarios con ciertas partes del
diseño, una interacción o flujo de trabajo en particular? ¿Te preguntas qué harán
primero los usuarios, cuando lleguen a la página o conozcan el producto? Reúne las
ideas sobre las ventajas, desventajas y áreas de mejora del producto o sitio
web para que puedas crear una hipótesis sólida para el estudio.
2. Elige las tareas del estudio: Las tareas de los participantes deben ser los
objetivos más comunes de los usuarios cuando interactúan con el producto o sitio
web, como hacer una compra, por ejemplo.
3. Establece un estándar para el éxito de cada tarea: Una vez decidido qué
probar y cómo probarlo, nos aseguramos de establecer criterios claros para
determinar el éxito de cada tarea.
105
4. Redacta un plan de estudio y un guión: Al comienzo del guión, debes incluir el
propósito del estudio. Anuncia si vas a grabar las sesiones, da algunos antecedentes
del producto o sitio web y haz preguntas para determinar cuánto saben los
participantes acerca del objeto de estudio. Por último, los moderadores deben seguir
el mismo guion en cada sesión de usuario, a fin de que el estudio sea coherente,
imparcial y con un enfoque científico.
5. Delega las funciones: Durante el estudio de usabilidad, el moderador debe

encaminar cuidadosamente a los participantes y seguir estrictamente el guion. Debe
mantenerse neutral, no ceder ante la presión social y hacer que los participantes se
sientan cómodos, mientras se los impulsa a completar las tareas. Pensemos en cuál
miembro del equipo va mejor con este rol. Tomar notas durante el estudio también
es igual de importante. Si no hay datos registrados, no podemos extraer ninguna
información que pruebe o refute la hipótesis. El oyente más atento del equipo debe
ser quien tome las notas.
6. Encuentra a los participantes: La detección y reclutamiento de los participantes

correctos es la parte más difícil de las pruebas de usabilidad. La mayoría de los
expertos en usabilidad sugieren que solo se debe evaluar a 5 participantes durante
cada estudio, cuidando que su perfil coincida con la base de usuarios real. Con una
muestra tan reducida será un reto replicarla. Reclutar colegas de otros
departamentos que potencialmente usarían el producto, también es otra opción.
Cuidado con dejar que uno de los miembros del equipo conozca a los participantes,
porque entonces esa relación personal puede crear un sesgo, ya que van a procurar
ser amables entre sí, por ejemplo: el investigador podría ayudar al usuario a
completar una tarea o el usuario podría no querer criticar el diseño del producto del
investigador.
7. Realiza el estudio: Durante el estudio, debemos pedir a los participantes que

completen una tarea a la vez, sin ayuda u orientación. Si el participante pregunta
cómo hacer algo, no digas nada, ya que es importante registrar cuánto tiempo les
lleva a los usuarios descubrir la interfaz.
106
Pedirle a los participantes que “piensen en voz alta” es una táctica efectiva. De este
modo sabremos lo que pasa por la cabeza de un usuario cuando interactúa con el
producto o sitio web. Después de completar cada tarea, solicitamos comentarios
acerca de si esperarían ver en el mercado el producto tal cual es ahora; si habrían
completado la tarea si no fuera una prueba; si recomendarían el producto a un
amigo, y qué cambiarían. Estos datos cualitativos pueden ayudarte a identificar más
ventajas y desventajas del diseño.
8. Analiza los datos: Vamos a recolectar muchos datos cualitativos después

del estudio. Analizarlos nos ayudará a descubrir patrones de cualquier asunto, así
como medir la gravedad de cada problema de usabilidad y proporcionar
recomendaciones de diseño al equipo de ingeniería.
Cuando analicemos los datos, asegurarse de prestar atención tanto al rendimiento

de los usuarios como a sus sentimientos sobre el producto. No es inusual que un
participante logre su objetivo de manera rápida y exitosa, y aun así, se exprese de
forma negativa sobre la experiencia.
9. Informa los hallazgos: Después de extraer información de los datos, informa las
conclusiones principales. Determina los pasos a seguir para perfeccionar el diseño
del producto o sitio web y las mejoras que esperas ver durante la próxima ronda de
pruebas.
Preguntas en una prueba o test de usabilidad

Seguir un guión o incluso una plantilla de preguntas para cada uno de los estudios
de usabilidad no tendría ningún sentido, ya que el tema de cada estudio es diferente.
Tendremos que adaptar las preguntas a los aspectos que deseamos conocer, pero lo
más importante: deberás saber cómo hacer buenas preguntas.
107
Los siguientes consejos de la investigadora UX Julie Fischer nos enseñan
cómo hacer las preguntas correctas durante un estudio de usabilidad:
• No elaboremos preguntas clave que inserten nuestro propio sesgo u opinión en la

mente de los participantes, ya que terminarán haciendo lo que nosotros
pretendemos, en lugar de que lo resuelvan solos.
• Preguntar a los participantes cómo completarían una meta o tarea en el producto o

en el sitio web, en lugar de decirles qué hacer a continuación.
• Cuando los participantes pregunten: “¿Qué hace esto?” deberemos contestar con
otro interrogante: “¿Qué esperas que haga?”, en lugar de darles la respuesta.
Métricas
Una vez que hayas realizado las pruebas de usabilidad, el siguiente paso es medir
los resultados para obtener respuestas que nos ayuden a optimizar el sitio web.
Entre las métricas de usabilidad más útiles se encuentran las siguientes:
1. Eficacia: La eficacia mide la facilidad que los usuarios tienen al visitar el sitio web.
Entre los aspectos más importantes a tener en cuenta están:
• Porcentaje de tareas realizadas con éxito en un primer intento.
• Cantidad de errores por unidad de tiempo.
• Cantidad de solicitudes de asistencia.
• Porcentaje de usuarios que pueden navegar por el sitio sin necesidad de una
previa orientación (de forma intuitiva).
2. Eficiencia: La eficiencia mide todo lo relacionado con la exactitud. Esto puede

referirse al nivel de esfuerzo que un usuario debe emplear para navegar por el sitio
web. Cuantos más objetivos alcanzados con facilidad, mejor será el nivel de
usabilidad. Algunas claves a medir son las siguientes:
• Tiempo para ejecutar instrucciones.
• Tiempo empleado en el primer intento.
108
• Tiempo para realizar alguna labor dentro del sitio.
• Cantidad de clicks, toques o teclas utilizadas dentro del sitio para lograr una
actividad.
• Tiempo dedicado a la corrección de errores.
3. Satisfacción: Esta métrica podría pensarse que es muy subjetiva, pero es

importante conocer el nivel de satisfacción que un usuario tiene con el sitio web
y saber cuáles son sus pensamientos finales después de su navegación. De esto
depende su índice de aceptación o rechazo. Algunos puntos importantes a
considerar en esta métrica son:
• Porcentaje de clientes satisfechos.
• Porcentaje de clientes que recomendarían el sitio.
• Porcentaje de clientes que califican al sitio como accesible.
Herramientas
1. UserTesting: Usertesting es una plataforma de pruebas de usabilidad en línea
que permite a los diseñadores y equipos de producto enviar sus prototipos o el
diseño de páginas web a una comunidad de usuarios para obtener comentarios en
video y en tiempo real. También ofrece funciones de seguimiento y análisis.
usertesting.com
109
2. Optimal Workshop: Optimal Workshop ofrece un conjunto de herramientas de
investigación de usuario que incluye una amplia variedad de pruebas de usabilidad,
por ejemplo, pruebas de árbol de navegación, cartas de clasificación y pruebas de
búsqueda. Cada herramienta está diseñada para evaluar un aspecto específico de la
usabilidad y proporcionar datos útiles para el diseño de una interfaz.
optimalworkshop.com
110
Algunas Conclusiones
Hay que animarse a hacer!

Existen muchas opciones, plantillas y recursos para realizar pruebas, teniendo en
cuenta que los navegadores puede ejecutar archivos de forma local (almacenados
en nuestra computadora) y que el proceso no siempre es destructivo, solo hace falta
almacenar una copia.
Les recomiendo practicar y practicar, aprendiendo sobre diseño web de forma de

prueba y error. Creen un portafolio de trabajos de diseño web para mostrar a amigos
y colegas. Si bien este es un curso es introductorio, en general, hemos repasado
fundamentos y conocimientos muy valiosos que serán de gran utilidad para el futuro
profesional.
Muchas Gracias!
111
RECURSOS
adobe.com
coreldraw.com
a nity.serif.com/en-gb/designer
procreate.com
canva.com
gma.com
sketch.com
marvelapp.com
wordpress.org
joomla.org
drupal.org
web ow.io
wix.com
getbootstrap.com
michael lipiuk.com
developer.mozilla.org
usertesting.com
optimalworkshop.com
code.visualstudio.com
112
fi
ffi
fl
fi

Fundamentos HTML II - Utn 2024

Cargado por

Copyright:

Formatos disponibles

Fundamentos HTML II - Utn 2024

Cargado por

Información del documento

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

Fundamentos HTML II - Utn 2024

Cargado por

Copyright:

Formatos disponibles

Escribir el código

Primero, es necesario saber que la implementación de HTML se basa en el uso de

Estos tienen las siguientes características:

• Atributos: Añaden funcionalidades a ciertos elementos para darles un formato

Hoy voy a salir a caminar.

Si queremos especificar que se trata de un párrafo, la etiqueta a utilizar es <p>. El

<p>Hoy voy a salir a caminar.</p>

El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido

También se pueden colocar elementos dentro de otros elementos (esto se llama

Esto se vería así en un navegador: Hoy voy a salir a caminar.

Este ejemplo es incorrecto: <p>Hoy voy a <strong>salir a caminar.</p></strong>

Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se

Anatomía del HTML

<!DOCTYPE html> El tipo de documento. Es un preámbulo requerido.

<html></html> El elemento <html>. Este elemento encierra todo el contenido de la

<head></head> El elemento <head> actúa como un contenedor de todo aquello que

<meta charset="utf-8"> <meta>. Este elemento establece el juego de caracteres

<title></title> El elemento <title> establece el título de la página, que es el título que

<body></body> El elemento <body>. Encierra todo el contenido que deseamos

Una vez más, los invito a visitar la página https://developer.mozilla.org/es/play para

La primera versión de HTML constaba de 18 etiquetas. Desde entonces, cada nueva

usar 3-4 como mucho:

Cada elemento de la lista se coloca dentro de un elemento <li> (list item).

Podemos hacer lo siguiente:

<p>que trabajamos juntos...</p>

Encierra el texto en un elemento <a>, así:

Proporciónale al elemento <a> un atributo de referencia “href”, así:

>Web e-learnign UTN</a>

Podemos obtener resultados inesperados si al comienzo de la dirección web

Ventajas y desventajas de HTML

• Soporte: El lenguaje es ampliamente utilizado, con muchos recursos y una gran

• Accesible: Es de código abierto y completamente gratuito. HTML se ejecuta de

• Flexible: HTML es fácilmente integrable con lenguajes “backend” (el encargado de

• Compatibilidad con los navegadores: Algunos navegadores tardan en adoptar

¿Cómo se relacionan HTML, CSS y JavaScript?

El CSS es responsable de estilos como el fondo, los colores, el diseño, el espaciado

5 Ejemplos de uso entre HTML, CSS y Javascript

Veamos a que nos referimos:

En https://developer.mozilla.org/es/docs/Learn encontraremos todo el glosario de

Otro recurso disponible es https://code.visualstudio.com/Docs/languages/html un

Si una instalación de prueba funciona perfectamente, las unidades

Incluir pruebas de usuario en el proceso de diseño web ayuda a identificar

Algunos beneficios clave de realizar pruebas de usuario incluyen:

• Validación de la intuitividad y claridad de la interfaz de usuario.

• Identificación de errores comunes y puntos de fricción.

• Mejor comprensión de las preferencias y necesidades de los usuarios.

• Evaluación de la efectividad de cambios propuestos en el diseño.

• Incorporación de perspectivas diferentes y diversas a la hora de tomar decisiones.

Las pruebas de usabilidad están enfocadas en el usuario final y te ayudan a crear la

Como hemos visto en la UNIDAD 2, la usabilidad es un aspecto fundamental en el

Las pruebas de usabilidad pueden realizarse de forma remota o personal e incluir

Generalmente, los investigadores y evaluadores de UX llevan a cabo estudios de

Identificar y solucionar estos problemas iniciales ahorra a las empresas tiempo y

Durante un estudio de usabilidad, el moderador pide a los participantes en sus

5 beneficios de las pruebas de usabilidad

2. Son convenientes, pues requieren pocas adecuaciones. Para llevar a cabo el

Tres tipos de pruebas a evaluar

2. Pruebas de usabilidad remota no moderada: La prueba de usabilidad remota

3. Pruebas de usabilidad moderadas: La prueba de usabilidad moderada tiene dos

Cómo hacer pruebas de usabilidad: 9 fases