Introducción
¿Qué vas a aprender?
Conceptos Generales
Introducción al desarrollo de software
Servidor y cliente
Front-End y Back-End: definición y características
¿Qué es una API?
¿Qué es Git?
Aproximación a los lenguajes de la web
Aproximación a HTML desde el diseño
Aproximación a CSS desde el diseño
Aproximación a JavaScript desde el diseño Parte I
Aproximación a JavaScript desde el diseño Parte II
Aproximación a las herramientas de desarrollo
Bases del diseño en el desarrollo
Características de las imágenes en el contexto de desarrollo web
Implementación de las imágenes en el contexto de desarrollo web
Características e Implementación de textos
Características e implementación de colores
El diseño desde una mirada de desarrollo
Diseño de botones
Implementación de botones
Diseño e implementación de inputs
Diseño de tablas
Funciones de tablas
Diseño e implementación de checkbox
Despedida
Live Class
Live Class
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Front-End y Back-End: definición y características
4/23Recursos
Reto: Sincronía y asincronía
Para esta clase he preparado un reto para que puedas llevar a la práctica los conceptos de sincronía y asincronía que vimos.
Son 2 retos, uno para cada concepto. Cada reto tiene una vista de Figma que puedes encontrar en Figma Community que debes resolver según el concepto.
En el caso de la sincronía, tendrás que agregar una vista que contemple el concepto de sincronía, es decir el tiempo de espera activa de los recursos que vienen del servidor.
Dada la vista que está disponible en Figma Community diseña cómo sería la vista de sincronía. Para diseñar esta vista, debes preguntarte cuales son esos recursos y como hago para comunicarle al usuario que está en una espera activa.
Por otro lado, en el reto de asincronía tienes que implementar el flujo de exportación de los productos. El equipo de Back-End definió que se notificará por correo una vez que el archivo esté listo porque este, dependiendo de la cantidad de productos, puede tomar mucho tiempo en generarse.
Si tienes dudas, por favor ve a la clase de Front-End y Back-End donde revisamos los conceptos de sincronía y asincronía.
Aportes 25
Preguntas 2
Ordenar por:
En resumen, el Frontend es todo lo que un usuario final ve en tu pagina o aplicación que vayas a desarrollar (colores, presentación, tamaños, acciones). El Backend es todo lo que hay detrás de esa apariencia bonita y es lo que permite que funcione tu página o aplicación (se conecta a una base de datos, permite registrar, editar, eliminar información, etc).
Les comparto este meme que si lo logran entender, habrán comprendido lo explicado en clase!
Este es e resultado del reto 1. Espera sincrónica usando Skeleton loading y spinner.
Este es el resultado del reto 2:
Gracias!
Feedback 😃
- Cuando vemos en el Frontend (interfaces o pantallas web) elementos de carga (loading) como los progress bar, skeleton loading o spinners, tiene que ver con la espera activa o Sincrónica, en la que debido a que el tiempo de espera es corto, el usuario debe esperar hasta que se muestre el resultado o cargue la siguiente pantalla.
.
La espera Asincrónica son procesos que pueden tomar mucho tiempo, por lo que debes procurar que los usuarios puedan seguir navegando tu página o utilizando tu aplicación sin tener que detenerse hasta que cargue el resultado o termine el proceso solicitado. Es aquí donde entran las notificaciones con alertas o por correo para avisar al usuario cuando ha recibido la respuesta o conseguido el procesamiento y finalización de su solicitud / registro.
Sincronismo y asincronismo
Mis propuestas para los retos
Reto 1: Espera sincrónica
Reto 2: Espera asincrónica
Este es mi RETO
SINCRONÍA
ASINCRONÍA
¡Hola! Este es mi ejercicio para el reto de sincronía 🌐🤓:
¡Hola! Este es mi ejercicio para el reto de sincronía.
Reto 1 (Sincronía):
![]()
Reto 2 (Ascincronía):
![]()![]()
Hola, me gustaría feedback, muchas gracias! (el icono de imagen no funciona para subir las fotos) envío enlace a drive Reto Sincronía https://drive.google.com/file/d/1HriF4zY0ZtERLZlUeGFS_Srxc7TE0fBc/view?usp=sharing
Asincronía https://drive.google.com/file/d/12IkIbLCim1o5tXs5bs2rqC7eZ69bGqeV/view?usp=sharing
Espera Sincrónica: respuestas que esperamos activamente.
Espera Asincrónica: respuestas que podemos esperar en segundo plano, o que podemos esperar en más tiempo. La respuesta espera en 2do plano.
Un servidor es un computador que está funcionando 24 horas, los 7 días de la semana, esperando solicitudes y se conecta a una base de datos para dar una respuesta.
Aquí está mi trabajo :)
![]()
Reto 1.
1. Carga de todo el contenido
2. Carga de las imágenes
3. Botón "Añadir al carrito" deshabilitado hasta que elija la talla
4. Botón habilitado
5. Carga de Modal al darle click al agregar al carrito.
6. Modal cargado con las opciones de pagar o seguir comprando.
2.
Esta es una de las clases que mas me han gustado hasta ahora.
Conocía la idea de asincronía y sincronía, pero no sabía que era llamado así técnicamente!
Soy diseñador gráfico, actualmente estoy trabajando como analista de productos y hace tiempo que no utilizaba figma (que no manejo mucho), y pude reproducirlo con un poco de esfuerzo
Incluyo mi versión de sincronía
https://drive.google.com/file/d/1DtTx1V8J4wg08VCl24-Gq9gmd8nZw8hf/view?usp=drive_link
Asincronía
https://drive.google.com/file/d/1kAbqxJ8PWcAUxFK86blvxsQzyt1EbjJX/view?usp=drive_link
Reto 1
Reto 2
Hola, la vista que yo creé fue cuando eliges una talla en específico y este actualiza la disponibilidad de artículos, y en este caso muestra también que tiene oferta.
Espero haber entendido el reto. GRacias por sus comentarios 💚
Este es mi resultado del reto de Asincronía.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?