FrexusActividad diagnostica
Objetivo:Identificar los conocimientos previos de los estudiantes en HTML, CSS y lógica básica de diseño web.Instrucciones:Crea una página web simple con un archivo index.html.La página debe contener:Un título principal con tu nombre.Un párrafo donde describas qué entiendes por "aplicaciones web progresivas".Una lista (puede ser ordenada o no ordenada) con 3 aplicaciones web que uses en tu día a día.Una imagen (puede ser de internet o de tu computadora).Aplica algo de estilo con CSS interno o...
FrexusApp móvil con CRUD conectado a servidor LAMP
Objetivo generalDesarrollar una app móvil en React Native (Expo) capaz de conectarse a una API PHP que realiza operaciones CRUD sobre una tabla en MySQL, todo dentro de una red local.Herramientas necesariasMySQ: Base de datosPHP (Apache o XAMPP): API en backendReact Native + ExpoApp: móvil frontendPostman (opcional): Prueba de endpoints APIVS Code: Editor de códigoExpo Go: Pruebas en el móvil (iOS/Android)Parte 1: Crear la base de datosEn phpMyAdmin o línea de comandos de MySQL:CREATE DATABAS...
FrexusLa señal que nunca llegó
Lucas tenía una visión: crear una app que ayudara a pequeños productores locales a vender sus cosechas directamente a consumidores urbanos. Nada de intermediarios, solo conexión. La llamó Raíz. Desde su pequeño estudio en Oaxaca, con más corazón que presupuesto, construyó una app limpia, intuitiva y optimista. El diseño estaba listo. Las funciones estaban listas. Los productores estaban listos. Solo faltaba que el mundo se conectara con ella. El día del lanzamiento fue como un amanecer. Lucas...
Aplicar los principios de manipulación del DOM, carga asíncrona de información y creación de elementos dinámicos para mejorar la experiencia de usuario en una tienda en línea básica.
90 minutos ( o menos)
Editor de código (VS Code recomendado)
Navegador actualizado (Chrome, Firefox, Edge)
Carpeta de proyecto base con archivos:
index.html
style.css
productos.json (simulará una base de datos de productos)
main.js
Crea el archivo index.html con lo básico:
Encabezado con el título de la tienda
Contenedor para los productos (<div id="productos">)
Carrito lateral (<div id="carrito">)
Agrega estilo básico con style.css
Grid para los productos
Estilo para botones “Agregar al carrito”
Crea un archivo productos.json con datos como:
[ { "id": 1, "nombre": "Brownie Vegano", "precio": 35, "imagen": "brownie.jpg" }, { "id": 2, "nombre": "Cupcake Vainilla", "precio": 30, "imagen": "cupcake.jpg" }]
En main.js, usa fetch() para cargar productos.json:
fetch("productos.json")
.then(res => res.json())
.then(data => {
mostrarProductos(data);
});
Crea la función mostrarProductos(data) que recorra los productos y los agregue al DOM con innerHTML dinámico.
function mostrarProductos(productos) {
const contenedor = document.getElementById("productos");
productos.forEach(producto => {
const div = document.createElement("div");
div.classList.add("producto");
div.innerHTML = `
<img src="${producto.imagen}" alt="${producto.nombre}">
<h3>${producto.nombre}</h3>
<p>$${producto.precio}</p>
<button class="agregar" data-id="${producto.id}">Agregar</button>
`;
contenedor.appendChild(div);
});
}
Agrega un eventListener general para detectar clics en los botones “Agregar”
document.addEventListener("click", function(e) {
if (e.target.classList.contains("agregar")) {
const id = e.target.getAttribute("data-id");
agregarAlCarrito(id);
}
});
Crea una función agregarAlCarrito(id) que busque el producto, lo agregue a un arreglo y actualice el DOM del carrito en tiempo real.
Agrega un mensaje tipo "toast" que diga “Producto agregado” por 3 segundos usando setTimeout() y creación dinámica de un div
function mostrarAlerta(mensaje) {
const alerta = document.createElement("div");
alerta.className = "toast";
alerta.innerText = mensaje;
document.body.appendChild(alerta);
setTimeout(() => {
alerta.remove();
}, 3000);
}
Llama a esta función cada vez que se agrega un producto.
Evita que se agregue dos veces el mismo producto al carrito mostrando un mensaje diferente.
Una tienda web que carga productos de forma asíncrona.
Permite agregar productos al carrito sin recargar la página.
Muestra mensajes dinámicos al usuario.
Manipula el DOM en tiempo real.
Más información:
https://www.frexus.dev/post/sitios-web-dinamicos-dom-javascript/
Aplicar los principios de manipulación del DOM, carga asíncrona de información y creación de elementos dinámicos para mejorar la experiencia de usuario en una tienda en línea básica.
90 minutos ( o menos)
Editor de código (VS Code recomendado)
Navegador actualizado (Chrome, Firefox, Edge)
Carpeta de proyecto base con archivos:
index.html
style.css
productos.json (simulará una base de datos de productos)
main.js
Crea el archivo index.html con lo básico:
Encabezado con el título de la tienda
Contenedor para los productos (<div id="productos">)
Carrito lateral (<div id="carrito">)
Agrega estilo básico con style.css
Grid para los productos
Estilo para botones “Agregar al carrito”
Crea un archivo productos.json con datos como:
[ { "id": 1, "nombre": "Brownie Vegano", "precio": 35, "imagen": "brownie.jpg" }, { "id": 2, "nombre": "Cupcake Vainilla", "precio": 30, "imagen": "cupcake.jpg" }]
En main.js, usa fetch() para cargar productos.json:
fetch("productos.json")
.then(res => res.json())
.then(data => {
mostrarProductos(data);
});
Crea la función mostrarProductos(data) que recorra los productos y los agregue al DOM con innerHTML dinámico.
function mostrarProductos(productos) {
const contenedor = document.getElementById("productos");
productos.forEach(producto => {
const div = document.createElement("div");
div.classList.add("producto");
div.innerHTML = `
<img src="${producto.imagen}" alt="${producto.nombre}">
<h3>${producto.nombre}</h3>
<p>$${producto.precio}</p>
<button class="agregar" data-id="${producto.id}">Agregar</button>
`;
contenedor.appendChild(div);
});
}
Agrega un eventListener general para detectar clics en los botones “Agregar”
document.addEventListener("click", function(e) {
if (e.target.classList.contains("agregar")) {
const id = e.target.getAttribute("data-id");
agregarAlCarrito(id);
}
});
Crea una función agregarAlCarrito(id) que busque el producto, lo agregue a un arreglo y actualice el DOM del carrito en tiempo real.
Agrega un mensaje tipo "toast" que diga “Producto agregado” por 3 segundos usando setTimeout() y creación dinámica de un div
function mostrarAlerta(mensaje) {
const alerta = document.createElement("div");
alerta.className = "toast";
alerta.innerText = mensaje;
document.body.appendChild(alerta);
setTimeout(() => {
alerta.remove();
}, 3000);
}
Llama a esta función cada vez que se agrega un producto.
Evita que se agregue dos veces el mismo producto al carrito mostrando un mensaje diferente.
Una tienda web que carga productos de forma asíncrona.
Permite agregar productos al carrito sin recargar la página.
Muestra mensajes dinámicos al usuario.
Manipula el DOM en tiempo real.
Más información:
https://www.frexus.dev/post/sitios-web-dinamicos-dom-javascript/
FrexusActividad diagnostica
Objetivo:Identificar los conocimientos previos de los estudiantes en HTML, CSS y lógica básica de diseño web.Instrucciones:Crea una página web simple con un archivo index.html.La página debe contener:Un título principal con tu nombre.Un párrafo donde describas qué entiendes por "aplicaciones web progresivas".Una lista (puede ser ordenada o no ordenada) con 3 aplicaciones web que uses en tu día a día.Una imagen (puede ser de internet o de tu computadora).Aplica algo de estilo con CSS interno o...
FrexusApp móvil con CRUD conectado a servidor LAMP
Objetivo generalDesarrollar una app móvil en React Native (Expo) capaz de conectarse a una API PHP que realiza operaciones CRUD sobre una tabla en MySQL, todo dentro de una red local.Herramientas necesariasMySQ: Base de datosPHP (Apache o XAMPP): API en backendReact Native + ExpoApp: móvil frontendPostman (opcional): Prueba de endpoints APIVS Code: Editor de códigoExpo Go: Pruebas en el móvil (iOS/Android)Parte 1: Crear la base de datosEn phpMyAdmin o línea de comandos de MySQL:CREATE DATABAS...
FrexusLa señal que nunca llegó
Lucas tenía una visión: crear una app que ayudara a pequeños productores locales a vender sus cosechas directamente a consumidores urbanos. Nada de intermediarios, solo conexión. La llamó Raíz. Desde su pequeño estudio en Oaxaca, con más corazón que presupuesto, construyó una app limpia, intuitiva y optimista. El diseño estaba listo. Las funciones estaban listas. Los productores estaban listos. Solo faltaba que el mundo se conectara con ella. El día del lanzamiento fue como un amanecer. Lucas...
Share Dialog
Share Dialog
Subscribe to Frexus
Subscribe to Frexus
<100 subscribers
<100 subscribers
No activity yet