UNIDAD I FRONT-END

1.1 Estándares de diseño web.

Los estándares de diseño web son un conjunto de recomendaciones y pautas
que se utilizan para crear sitios web funcionales, accesibles y estéticamente
agradables.
Los estándares de diseño web se encargan de:
 Establecer la consistencia de la World Wide Web
 Garantizar que los sitios web funcionen en todos los navegadores y
dispositivos
 Asegurar que los sitios web sean accesibles para personas con
discapacidades
 Ofrecer una experiencia de usuario intuitiva y agradable
Los estándares de diseño web se basan en:
 Mejorar las prácticas de diseño web
 Las necesidades de los usuarios
 La estética
 La facilidad de uso
 La accesibilidad
 La privacidad
El World Wide Web Consortium (W3C) es una de las organizaciones que
desarrolla y mantiene los estándares de diseño web.
Algunos ejemplos de estándares web son:
HTML, XML, CSS, ECMAScript, DOM, PNG, SVG, HTTP, HTTPS, URL
Los estándares del diseño web son unas especificaciones o recomendaciones
creadas por el W3C en 1994 para estandarizar y otorgar consistencia a la World
Wide Web y compatibilizar entre sí las diferentes tecnologías en las que se basa.

1.2 Prototipado.
Introducción
En todo proyecto de desarrollo web es recomendable realizar un prototipo o
boceto del interfaz. De esta manera se puede tener una idea aproximada del
aspecto visual que tendrá, qué secciones lo compondrán, cómo se verán en
pantalla, etc.
El principal objetivo de utilizar estas herramientas es generar un boceto de
manera rápida, sin necesidad de utilizar código. El diseño puede ser exportado a
un archivo de imagen o PDF para adjuntar a la documentación del proyecto.
Estos bocetos permiten acordar las características del interfaz web con el cliente
o con el resto de miembros del equipo de desarrollo.
 Figura 1: Ejemplo de prototipo

El prototipado web es una representación visual de un sitio web en desarrollo,

que permite anticipar errores y mejorar la experiencia del usuario.
Objetivos Conocer la experiencia del usuario, Anticipar errores, Maximizar la
experiencia de uso, Ahorrar tiempo y dinero, Cumplir con el presupuesto.
Ventajas
 Permite explicar al cliente cómo será el sitio web
 Facilita la comunicación con el equipo
 Minimiza los tiempos de entrega
 Reduce el riesgo de invertir en un producto que no gusta a los usuarios

Herramientas Balsamiq, Moqups, Sketch, Axure, InVision.

Fases del prototipado
1. Sketching o bocetado
2. Wireframe
3. Prototipo no funcional

El prototipado web es una fase importante en el desarrollo de un sitio

web. Permite visualizar el resultado final y ajustar las necesidades del cliente.

Para el prototipado web se utilizan diversas herramientas, como papel y lápiz,

Figma, Sketch, Adobe XD, InVision, Axure RP, Marvel, Balsamiq, Framer, Proto.io
y Justinmind.
Herramientas analógicas
 Papel y lápiz, junto con goma de borrar, son recursos analógicos que
ayudan a concretar ideas y pasar de ellas a algo más material.

¿Tienes una idea clara sobre cómo quieres que sea tu sitio web, pero tienes
dificultades para materializarla? ¿Tienes dudas sobre si realmente va a
funcionar? Crear un prototipo te puede ayudar a plasmar esa idea de forma
tangible y a ponerla a prueba antes de invertir tiempo y dinero en desarrollarla.
Un prototipo es una representación interactiva, visual y funcional de un sitio
web o aplicación. Te permite simular el diseño y la navegación que quieres que
tenga tu sitio web, pedir opinión a otras personas, detectar e identificar
necesidades de los usuarios, comunicar mejor tu propuesta de diseño, hacer
pruebas o validar tu idea.
Cualquier persona puede crear prototipos online gratis y sin conocimientos de
programación utilizando alguna de las herramientas incluidas en este artículo.
En este artículo encontrarás sus beneficios e instrucciones paso a paso para
crear un prototipo con cada una de ellas.
Haz clic aquí para comenzar a vender online ahora mismo con Shopify
1. Figma
Figma es una herramienta para diseñar y crear prototipos online gratis muy
versátil e intuitiva. Con Figma podrás crear prototipos interactivos de interfaces
web y móviles con unos pocos clics y sin tener que escribir una sola línea de
código.
Figma te permite plasmar tus ideas de diseño de forma tangible, visual y
funcional para probar y validar conceptos, interacciones y funcionalidades antes
de invertir tiempo y recursos en desarrollarlos. Comparte tus diseños y colabora
con otras personas en tiempo real para facilitar el proceso de diseño y
asegurarte de que tu sitio web satisfaga las necesidades y las expectativas de tus
usuarios.

Cuáles son los principales beneficios de Figma

 Crea el diseño y el prototipo de tu sitio web desde un mismo lugar.
 Colabora con otras personas en tiempo real.
  Puedes utilizar Figma desde el navegador web en cualquier sistema
operativo o descargar la aplicación de escritorio para macOS y Windows.
 El historial de cambios te permite restaurar una versión anterior de tu
prototipo.
 Crea interacciones complejas mediante variables, lógica condicional y
expresiones matemáticas.
 Visualiza tus diseños en cualquier tamaño de pantalla con el visor de
prototipos que adapta los tamaños de forma eficiente.
 Incluye GIF animados y vídeos para replicar la experiencia que tendrán tus
usuarios cuando interactúen con medios interactivos en tu sitio web o
aplicación.
 Ahorra tiempo utilizando interacciones prediseñadas o diseños creados
por otras personas de la Figma Community.
Cuánto cuesta Figma
La mayoría de las funciones de prototipado que ofrece Figma están disponibles
en el plan gratuito. Si necesitas funciones avanzadas de creación de prototipos,
como la utilización de variables, lógica condicional, acciones múltiples u
operadores, tienes tres planes de pago disponibles:
 Equipo Professional: 15 € por licencia completa/mes
 Organización: 45 € por licencia completa/mes
 Enterprise: 75 € por licencia completa/mes
Cómo crear un prototipo con Figma
1. Crea una cuenta de Figma gratis o inicia sesión.
2. Navega hasta la página principal de tu cuenta.
3. Crea o importa el diseño.
1. Para crear el diseño, haz clic en la opción de + Create new (Crear
nuevo) y, a continuación, Design file (Archivo de diseño).
 2. Para importar el diseño, haz clic en la opción de + Create new (Crear
nuevo) y, luego, Import (Importar). Puedes seleccionar e importar
archivos .sketch, .fig, .jam, .png y .jpg.
4. Cuando tengas el diseño listo, selecciona el modo Prototpye (Prototipo) en
la parte superior del panel lateral derecho.
5. Selecciona el dispositivo para el que quieres crear el prototipo.
6. Crea conexiones entre los diferentes elementos de tu diseño. Para ello:
1. Selecciona un elemento.
2. Haz clic en el signo azul + que aparece en el lado derecho y arrástralo
hasta el elemento con el que quieras conectarlo.
3. En el panel derecho, configura la interacción seleccionando el
disparador, el tipo de animación y la duración que quieres que tenga.
7. Previsualiza el prototipo haciendo clic sobre el botón de reproducir
situado en la parte superior del panel lateral derecho.
¿Todavía no eres partner de Shopify?
Genera ingresos mensuales continuos, accede a infinidad de recursos gratuitos,
obtén información privilegiada sobre nuevas funciones y recibe atención al
cliente exclusiva diseñando y desarrollando tiendas y temas de Shopify.
Regístrate gratis en el programa Shopify Partners e infórmate sobre cómo
puedes aprovechar todas las posibilidades que te ofrece.
Registrarme

2. Marvel
Marvel es una herramienta con la que puedes crear prototipos online gratis
convirtiendo imágenes de tus diseños en formatos JPG, PNG o GIF; creando tus
diseños directamente en ella, o sincronizando los que hayas diseñado en
Sketch.
Marvel es muy fácil de usar y muy útil para colaborar con otras personas, ya que
puedes utilizarla directamente desde un navegador web o desde la aplicación e
integrarla con otras herramientas populares, como Microsoft Teams o Jira.

Cuáles son los principales beneficios de Marvel

 Crea prototipos para ordenador, iPad, Apple TV, Apple Watch y dispositivos
Android.
 Descarga los prototipos para seguir trabajando en ellos aunque no tengas
conexión a Internet.
 Comparte fácilmente los prototipos con otras personas enviándoles la URL
o insertando el código en otro lugar.
 Utiliza la versión móvil de la plataforma descargando la aplicación para iOS
o Android.
 Elige entre una gran variedad de transiciones y gráficos predeterminados.
 Cada vez que subas un elemento, el prototipo se sincroniza
automáticamente.
 Utiliza la plataforma con Windows, Linux, Android e iOS.
  Añade comentarios a tu prototipo.
Cuánto cuesta Marvel
Marvel ofrece un plan gratuito para un usuario con el que podrás crear un
proyecto, aparte de tres planes de pago distintos:
 Pro: 9 €/mes
 Team: 27 €/mes
 Enterprise: consultar
Cómo crear un prototipo con Marvel
1. Regístrate gratis o inicia sesión en Marvel.
2. Navega hasta la página principal de tu cuenta.
3. Haz clic en la opción de Create project (Crear proyecto).
4. Selecciona Protoype (Prototipo), escribe el nombre de tu proyecto y elige
el dispositivo para el que quieres diseñarlo.
5. Selecciona Create project (Crear proyecto).
6. Haz clic en Add images (Añadir imágenes) y, después, selecciona Upload
from computer (Subir desde el ordenador) o arrastra tus diseños
directamente a la ventana del navegador para incorporarlos en tu
proyecto.
7. Pasa el cursor por encima de cualquier imagen que hayas subido y haz clic
en Prototype (Prototipo) para abrir el editor.
8. A continuación, haz clic y arrastra en el área del diseño que quieres
vincular.
9. Selecciona la imagen con la que quieres vincular esa área, el tipo de
transición y la acción que debe hacer el usuario para que se active.
10. Haz clic en Play (Reproducir) para probar el prototipo.
3. Proto.io
Proto.io es una herramienta muy completa para crear, compartir, presentar y
probar prototipos interactivos para cualquier tamaño de pantalla, como móvil,
tableta, web, TV o smartwatch.
Esta plataforma solo se puede utilizar desde el navegador web, pero permite
crear prototipos online gratis detallados, totalmente funcionales y muy
parecidos al resultado final.

Cuáles son los principales beneficios de Proto.io

 Es muy intuitivo y fácil de usar, ya que solo tienes que arrastrar y soltar los
diferentes elementos.
 Ofrece muchísimos componentes, plantillas y recursos digitales que te
ahorrarán mucho tiempo.
 Configura multitud de eventos, interacciones, transiciones y animaciones.
 Comparte una o varias pantallas o expórtalas a PDF, PNG o HTML para
verlas offline.
 Prueba tu prototipo con usuarios reales integrando la herramienta con
plataformas de investigación de usuario populares.
 Importa elementos de otras herramientas, como Figma, Sketch o Adobe
Photoshop.
Cuánto cuesta Proto.io
Puedes probar Proto.io gratis durante 15 días. Cuando termine la prueba,
puedes convertir tu cuenta a un plan gratuito limitado que incluye un usuario,
un proyecto activo, cinco prototipos, previsualización en la aplicación de
Proto.io y 10 MB de almacenamiento. También existen estas opciones de pago:
 Freelancer: 24 $/mes
 Startup: 40 $/mes
 Agency: 80 $/mes
 Corporate: 160 $/mes
Cómo crear un prototipo con Proto.io
1. Regístrate o inicia sesión en Proto.io.
2. Navega hasta la página de inicio de tu cuenta.
3. Haz clic en la opción + New project (Proyecto nuevo).
4. Escribe el nombre del proyecto, elige un tipo de dispositivo y de tamaño
de pantalla y haz clic en Create (Crear).
5. Haz clic en New Screen (Pantalla nueva) para añadir la primera pantalla de
tu prototipo o selecciona el icono que aparece junto a esta opción para
crearla a partir de una plantilla.
6. Selecciona los componentes que quieras en el panel lateral derecho
Libraries (Bibliotecas) y arrástralos y suéltalos en el espacio de trabajo.
7. Personaliza las propiedades y las interacciones de cada componente desde
el panel lateral derecho Inspector.
Genera ingresos mensuales continuos con Shopify Partners
Aprovecha tus habilidades de diseño y desarrollo web para aumentar tus
ingresos creando aplicaciones y temas de Shopify para otras personas. Como
partner de Shopify, tendrás acceso ilimitado a tiendas de prueba y a muchísimos
recursos de formación y herramientas gratuitas que te facilitarán mucho la vida.
Regístrate ahora y pruébalo.
Registrarme
4. Miro
Miro es una plataforma en la que puedes diseñar y crear prototipos online gratis
sin limitaciones de espacio ni tiempo. Con Miro puedes dar rienda suelta a tu
creatividad plasmando tus ideas, bocetos y diseños para tu sitio web sin
preocuparte por quedarte sin espacio.
Las opciones para crear prototipos interactivos con Miro son más limitadas que
las de otras herramientas. Sin embargo, Miro puede resultarte muy útil si buscas
una herramienta que puedas utilizar en todas las fases del proyecto, ya que te
permite organizar tus ideas y colaborar en tiempo real con otras personas de
forma muy visual e intuitiva, gracias a funciones como las votaciones, los mapas
mentales o las notas adhesivas.

Cuáles son los principales beneficios de Miro

 Puedes utilizar Miro en cualquier dispositivo desde el navegador o
descargando la aplicación para móvil, tableta o escritorio para iOS,
Android, Windows o Mac.
 Con Miro nunca te quedarás sin espacio.
  Aparte de la creación de prototipos, puedes aprovechar Miro para otras
tareas, como planificación, gestión de proyectos o brainstorming.
 Colabora en tiempo real con otras personas para que todo el mundo
pueda aportar ideas y dar su opinión sobre el prototipo.
 Importa diseños desde otras herramientas, como Sketch, Adobe XD o
Figma.
 Integra Miro con otras herramientas de marketing, CRM o gestión de
proyectos, como Google Workspace, Microsoft 365 o Salesforce.
 Genera rápidamente prototipos utilizando plantillas prediseñadas.
Cuánto cuesta Miro
Miro ofrece un plan gratuito que puedes utilizar tanto tiempo como quieras y
con tantas personas como necesites. Con este plan, puedes crear tableros
ilimitados, aunque el equipo solo podrá editar los tres últimos tableros que se
hayan creado. También podrás utilizar la biblioteca de más de 2500 plantillas o
conectar más de 100 aplicaciones. Si necesitas funciones más avanzadas, tienes
varios planes de pago disponibles:
 Starter: 8 $/mes por miembro
 Business: 16 $/mes por miembro
 Enterprise: consultar
Cómo crear un prototipo con Miro
1. Crea una cuenta o inicia sesión en Miro.
2. Navega hasta la página de inicio de tu cuenta.
3. Haz clic en la opción + Create new (Crear nuevo) y selecciona Board
(Tablero).
4. Diseña los diferentes elementos o impórtalos desde otra herramienta.
Para importarlos, tienes varias opciones:
1. Arrastra los archivos al tablero de Miro.
 2. Selecciona Upload (Subir) en el panel lateral izquierdo y elige la
opción que más te convenga.
3. Explora otras opciones con los complementos y las integraciones de
Miro con otras herramientas.
5. Para simular las interacciones, conecta unos elementos con otros. Para
ello:
1. Haz clic en el elemento de destino, en los tres puntos y, después, en
la opción de Copy link (Copiar enlace)
2. Selecciona el elemento de origen.
3. Selecciona el icono del vínculo en el menú superior.
4. Pega el vínculo del elemento de destino.

1.3 Preprocesamiento.
Los preprocesadores para desarrollo web son herramientas que permiten
escribir código con una sintaxis diferente y convertirlo a un código
estándar. Esto facilita la escritura de código y su mantenimiento.
Algunos preprocesadores para desarrollo web son:
 SASS: (Syntactically Awesome Style Sheet) Es uno de los preprocesadores
más populares para CSS. Incluye características como variables, mixins,
herencia de clases, funciones matemáticas, bucles, condicionales, entre
otras.
 LESS: Es otro de los preprocesadores más populares para CSS.
 Stylus: Es otro de los preprocesadores más populares para CSS.
Los preprocesadores para desarrollo web permiten: Escribir código más
fácilmente, Crear páginas web más dinámicas, Hacer que el código sea más
mantenible, Reutilizar código en diferentes proyectos.
Para usar un preprocesador, es necesario entender cómo funcionan los estilos
CSS y el navegador.

Ejemplo de sass
Sass (Syntactically Awesome Style Sheets) es un preprocesador de CSS que
permite escribir hojas de estilo de manera más eficiente. Sass extiende las
capacidades de CSS con características como variables, funciones, mixins y
anidamiento.
Sass es una herramienta que utilizan los desarrolladores web para:
 Organizar y potenciar las funcionalidades de las hojas de estilo
 Traducir un código de hojas de estilo no estándar a un código CSS
estándar
 Reducir la redundancia y mejorar la modularidad del código
 Generar hojas de estilo de forma automática
Sass tiene dos sintaxis principales:
 SASS, la sintaxis original que tiene una estructura más limpia y sin llaves
 SCSS (Sassy CSS), que se asemeja más a la sintaxis tradicional de CSS
Algunas ventajas de Sass son:
 Reducir el tiempo para crear y mantener el CSS
 Permitir una organización modular de los estilos
 Proporcionar estructuras avanzadas propias de los lenguajes de
programación

SASS: tutorial definitivo | aprende a usar la sintaxis de SASS - IONOS MX

1.4 Frameworks para estilos.

8 Mejores Frameworks de CSS para Desarrolladores Web en 2024

¿Qué es una framework de CSS?

Una framework de CSS es una colección predefinida de reglas y estilos CSS que
los desarrolladores pueden utilizar para diseñar y estilizar sitios web y
aplicaciones de manera eficiente. Estas librerías ofrecen una serie de
componentes, utilidades y temas que facilitan la creación de interfaces de
usuario coherentes y visualmente atractivas sin tener que escribir todo el CSS
desde cero.
1. Bootstrap
Bootstrap sigue siendo una de las librerías más populares y utilizadas. Ofrece un
conjunto completo de herramientas CSS y JavaScript para crear diseños
responsive de manera rápida y eficiente. Entre sus características destacan:
 Un sistema de rejilla (grid) flexible.
 Amplia variedad de componentes pre-diseñados (botones, formularios,
tablas, etc.).
 Documentación extensa y comunidad activa.
2. Tailwind CSS
Tailwind CSS ha ganado mucha popularidad gracias a su enfoque utilitario. En
lugar de proporcionar componentes pre-estilizados, Tailwind ofrece clases
utilitarias que puedes combinar para crear tus propios diseños. Sus ventajas
incluyen:
 Flexibilidad extrema.
 Personalización profunda.
 Optimización para el rendimiento mediante la eliminación de estilos no
utilizados en producción.
3. Bulma
Bulma es una librería CSS moderna basada en Flexbox. Es conocida por su
simplicidad y facilidad de uso, lo que la convierte en una excelente opción para
desarrolladores que buscan una alternativa ligera a Bootstrap. Sus puntos
fuertes son:
 Sistema de rejilla intuitivo basado en Flexbox.
 Estilos predeterminados atractivos y fáciles de personalizar.
 Código CSS limpio y modular.
4. Foundation
Foundation, desarrollado por ZURB, es otra librería robusta y muy versátil. Es
ideal para proyectos más grandes y complejos gracias a su enfoque modular y
personalizable. Ofrece:
 Un sistema de rejilla flexible y adaptable.
 Amplia gama de componentes pre-diseñados.
 Herramientas para accesibilidad y optimización de rendimiento.
5. Materialize
Materialize es una librería basada en Material Design, el lenguaje de diseño de
Google. Es perfecta para quienes buscan implementar este estilo visual en sus
proyectos. Entre sus características están:
 Componentes que siguen las directrices de Material Design.
 Efectos y animaciones atractivas.
 Buen soporte para desarrollo responsive.
6. Semantic UI
Semantic UI proporciona una solución CSS centrada en la semántica del HTML,
lo que facilita la comprensión y mantenimiento del código. Sus beneficios
incluyen:
 Uso de clases que son intuitivas y legibles.
 Variedad de temas personalizables.
 Integración fácil con otros frameworks y bibliotecas.
7. UIKit
UIKit es una librería ligera y modular que ofrece un conjunto de componentes
CSS y JavaScript. Es especialmente útil para desarrolladores que buscan
flexibilidad y personalización. Sus puntos fuertes son:
 Componentes modulares que pueden ser utilizados independientemente.
 Sistema de rejilla avanzado y flexible.
  Documentación clara y detallada.

8. Pure CSS
Pure CSS es una colección de pequeños módulos CSS que pueden ser utilizados
de forma independiente o conjunta. Es ideal para quienes buscan una librería
extremadamente ligera. Sus ventajas son:
 Peso muy reducido, ideal para proyectos con necesidades de rendimiento
estrictas.
 Fácil de integrar con cualquier proyecto existente.
 Conjunto básico de estilos que pueden ser ampliados según las
necesidades del proyecto.
Conclusión
La elección de la librería de CSS adecuada depende de las necesidades
específicas de tu proyecto y tus preferencias personales. Ya sea que necesites un
conjunto completo de herramientas como Bootstrap o la flexibilidad utilitaria de
Tailwind CSS, estas librerías te proporcionarán una base sólida para desarrollar
interfaces de usuario atractivas y eficientes. Explora cada opción, experimenta y
encuentra la que mejor se adapte a tu flujo de trabajo y objetivos.
1.5 Las tecnologías de front-end se combinan con marcos de front-end para
crear aplicaciones web. Estas tecnologías se utilizan para crear la interfaz visual
de un sitio web, es decir, la parte que el usuario ve y con la que interactúa.
Algunas de las tecnologías de front-end son:
JavaScript, CSS, HTML, React.js, Angular, TypeScript, Vue.js, Svelte,
WebAssembly, Next.js.
Los marcos de front-end son herramientas que se utilizan para acelerar la
producción de aplicaciones web. Algunos de los marcos de front-end más
populares son:
React, Angular, Vue.js, Preact, Svelte, Foundation, Semantic UI, Backbone.
Para desarrollar aplicaciones web, se necesitan tanto las tecnologías de front-
end como las de back-end. Los desarrolladores de front-end y back-end trabajan
en conjunto para crear un producto que sea cómodo para el usuario.

1. 6 La integración front-end con otras tecnologías se realiza a través de

middleware o soluciones de integración similares. Esto permite que las
aplicaciones interactúen entre sí de manera organizada y transparente.
El front-end se refiere a la parte de un sitio web que está orientada al
usuario. Para su desarrollo se utilizan tecnologías como HTML, CSS y JavaScript.
La integración front-end con otras tecnologías es fundamental para que una
aplicación funcione de manera efectiva. Para ello, se deben realizar pruebas
exhaustivas para garantizar que ambas partes funcionen correctamente.
Algunas tecnologías y herramientas que se utilizan en el desarrollo front-end
son:
 Editores de código
 Sistemas de control de versiones
 Preprocesadores CSS
 Herramientas de automatización
 Frameworks front-end
 Lenguajes informáticos como JavaScript, CSS y HTML
 SASS