CAFAM BELLAVISTA

INDUCCIÓN.

1. Inducción

Meta: ¿Cómo presentar un sitio web de forma clara y atractiva?

Actividad de apertura:
El docente proyecta 2 sitios web: uno con diseño claro y organizado y otro con diseño confuso.
Se pregunta a los estudiantes:
- ¿Cuál transmite mejor el mensaje?
- ¿Qué elementos hacen que una presentación sea clara y atractiva?
- ¿Qué estrategias usarías tú para explicarlo a otros?
Producto esperado:
Una lista colectiva (lluvia de ideas) con criterios para una buena presentación: claridad en el discurso, manejo del tiempo, uso de ejemplos, apoyo visual, lenguaje corporal.

TRABAJO INDIVIDUAL

🔹 2. Trabajo individual

Meta: Preparación del discurso de presentación.

Elabora un discurso breve (2-3 minutos) siguiendo esta guía:
- Breve introducción: nombre y propósito del sitio.
- Estructura del sitio: secciones principales.
- Fortalezas (diseño, usabilidad, accesibilidad).
- Propuesta de mejora.
Herramienta de apoyo:
Se les entrega un organizador gráfico o guion de exposición.

TRABAJO EN GRUPO

🔹 3. Trabajo en grupo

Meta: Exposición por equipos.

Los estudiantes se organizan en equipos de 3 a 4 integrantes.
Cada integrante expone su sitio web frente al grupo, pero el equipo debe coordinar un orden lógico (ejemplo: de sitios educativos → culturales → comerciales).
Durante las exposiciones se recomienda:
- Uso de proyector o captura de pantalla del sitio.
- Control del tiempo.
- Retroalimentación entre pares: un estudiante observa y anota aspectos positivos y por mejorar de sus compañeros.

CIERRE.

4. Cierre

Meta: Cierre reflexivo y entrega de portafolio.

Reflexión grupal guiada:
- ¿Qué aprendimos sobre cómo comunicar un sitio web de forma atractiva?
- ¿Qué estrategias de presentación nos funcionaron mejor?
- ¿Cómo puedo mejorar mi próxima exposición?
Entrega:
Cada estudiante entrega su guion de presentación y evidencias de su participación (puede ser en un portafolio digital o físico).

Herramientas IA sin registro (para crear visuales)

Whiteboard‑Online – pizarra colaborativa sin registro para aportes individuales herramientasproductivas.com+4whiteboard-online.org+4freeimgen.com+4 HuntScreens+10Pictionizer+10arting.ai+10.
Arting.ai – generador de imágenes IA, sin registro, sin marcas de agua img-fx.com+5arting.ai+5dreamify.art+5.
Raphael AI – imágenes de alta calidad generadas por IA, totalmente gratuitas y sin login HuntScreens+6raphael.app+6Raphael AI+6.
DeepImg – crea imágenes al instante con IA sin necesidad de registro Adobe+15HuntScreens+15musely.ai+15.
Image FX – generador IA gratuito, sin registro img-fx.com+2freeimgen.com+2.

Enviar la url de la pagina web creada al correo : areadeinformatica147@gmail.com

"asunto grado al que pertenece"

mensaje: El nombre de los dos integrantes del grupo en conjunto con la url de link de la pagina web creada.

AYUDA CATALOGO DE SERVICIOS

<!doctype html>

<head>

<title>Catálogo de Productos</title>

<style>

:root{

--bg:#0f172a; /* slate-900 */

--panel:#111827; /* gray-900 */

--muted:#94a3b8; /* slate-400 */

--text:#e5e7eb; /* gray-200 */

--card:#0b1220;

--brand:#22c55e; /* green-500 */

--brand-600:#16a34a; /* green-600 */

--accent:#38bdf8; /* sky-400 */

--danger:#ef4444; /* red-500 */

--warning:#f59e0b; /* amber-500 */

--radius:18px;

--shadow:0 12px 30px rgba(0,0,0,.35);

}

html,body{height:100%}

body{

margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;

background: radial-gradient(1200px 600px at 10% -10%, #1f2937, transparent),

radial-gradient(800px 400px at 90% 0%, #1e3a8a33, transparent), var(--bg);

color:var(--text);

}

header{

position: sticky; top:0; z-index: 20; backdrop-filter: blur(8px);

background: linear-gradient(180deg,#0b1220ee,#0b1220cc 60%,#0b122000);

border-bottom: 1px solid #1f2937;

}

.wrap{max-width:1200px;margin:auto;padding:16px}

.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between}

.brand{

display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px

}

.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#06b6d4);box-shadow:var(--shadow)}

.tools{display:grid;grid-template-columns: 1fr .5fr .5fr auto;gap:12px;align-items:center;width:100%;max-width:820px}

input[type="search"],select{background:#0a1020;border:1px solid #1f2937;border-radius:12px;padding:12px;color:var(--text);outline:none}

input[type="search"]::placeholder{color:#64748b}

.switch{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--muted)}

.switch input{accent-color:var(--brand)}

.cart{display:flex;align-items:center;gap:8px}

.pill{background:#0a1020;border:1px solid #1f2937;padding:10px 14px;border-radius:999px}

main{padding: 24px 0 80px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

@media (max-width: 980px){.grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width: 640px){.tools{grid-template-columns:1fr 1fr auto;}.grid{grid-template-columns:1fr}}

.card{

background: linear-gradient(180deg, #0e1628, #0a1020 40%);

border: 1px solid #152238; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);

display:flex;flex-direction:column

}

.imgbox{aspect-ratio: 16/10; background:#020617; position:relative}

.imgbox img{width:100%;height:100%;object-fit:cover;display:block}

.badge{position:absolute;left:12px;top:12px;background: #0b1220cc;border:1px solid #1f2937;padding:6px 10px;border-radius:999px;font-size:.75rem;color:var(--muted)}

.content{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}

.title{font-size:1.05rem;font-weight:700}

.desc{color:#aab1bd;line-height:1.4}

.specs{margin:0;padding-left:18px;color:#9fb0c7}

.price{display:flex;align-items:end;gap:10px;margin-top:2px}

.price .now{font-size:1.25rem;font-weight:800;color:#e5ffe9}

.price .old{color:#94a3b8;text-decoration: line-through;font-size:.95rem}

.stars{display:inline-flex;gap:2px}

.stars svg{width:16px;height:16px;}

.stock{font-size:.85rem;color:#90f0b3}

.actions{display:flex;gap:10px;margin-top:8px}

.btn{flex:1;display:inline-flex;justify-content:center;align-items:center;gap:8px;border:none;border-radius:12px;padding:10px 12px;font-weight:700;cursor:pointer;transition:.15s}

.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-600));color:white}

.btn.secondary{background:#0a1020;color:var(--text);border:1px solid #1f2937}

.btn:hover{transform: translateY(-1px)}

.btn:active{transform: translateY(0)}

details{border-top:1px dashed #1f2937;margin-top:8px;padding-top:8px}

details summary{cursor:pointer;color:var(--accent);font-weight:600}

.review{color:#c8d0db;margin:6px 0 0}

.footer{opacity:.8;color:#9aa6b2; font-size:.9rem;margin-top:22px}

.hidden{display:none}

</style>

</head>

<body>

<div>Catálogo <span style="color:var(--brand)">Online</span></div>

</div>

<option value="">Todas las categorías</option>

</select>

<option value="relevance">Ordenar: Relevancia</option>

<option value="price-asc">Precio: menor a mayor</option>

<option value="price-desc">Precio: mayor a menor</option>

<option value="rating-desc">Valoración: alta a baja</option>

</select>

<div class="switch"><label><input id="inStockOnly" type="checkbox"> Solo disponibles</label></div>

</div>

<div class="pill">🛒 <b id="cartCount">0</b> artículos</div>

</div>

</header>

<p class="footer">Consejo: usa el buscador para filtrar por características (p. ej., “bluetooth”, “27 pulgadas”, “RGB”, “acero”). Haz clic en “Reseñas” para leer opiniones rápidas de clientes.</p>

</main>

</div>

<button class="btn primary add">Añadir al carrito</button>

<button class="btn secondary buy">Comprar</button>

</div>

<summary>Reseñas</summary>

</details>

</div>

</article>

</template>

// ---------- Datos del catálogo (15+ productos) ----------

const products = [

{id:1, name:'Auriculares Bluetooth Pro', category:'Electrónica', price:59.90, oldPrice:79.90, rating:4.6, stock:12,

image:'https://picsum.photos/seed/headphones/800/500',

desc:'Cancelación de ruido activa, 35h de batería, USB‑C.',

specs:['BT 5.3','Carga rápida','Micrófono dual'],

reviews:[

{author:'Sofía R.', text:'Sonido nítido y graves potentes. La batería rinde mucho.'},

{author:'Luis M.', text:'Cómodos y el ANC funciona bien en el metro.'}

]},

{id:2, name:'Smartwatch Fit 2', category:'Electrónica', price:89.00, oldPrice:119.00, rating:4.2, stock:8,

image:'https://picsum.photos/seed/watch/800/500',

desc:'Monitor de ritmo cardiaco, GPS y 5 atm de resistencia al agua.',

specs:['GPS','SpO2','Notificaciones'],

reviews:[{author:'Valentina', text:'Perfecto para correr, el GPS es preciso.'}]},

{id:3, name:'Altavoz Portátil X', category:'Electrónica', price:39.99, oldPrice:49.99, rating:4.4, stock:0,

image:'https://picsum.photos/seed/speaker/800/500',

desc:'Compacto, resistente al agua, 12h de reproducción.',

specs:['IPX7','BT 5.0','Manos libres'],

reviews:[{author:'Jorge', text:'Buen volumen para su tamaño.'}]},

{id:4, name:'Cámara IP Security', category:'Hogar', price:45.50, oldPrice:59.00, rating:4.1, stock:22,

image:'https://picsum.photos/seed/camera/800/500',

desc:'Detección de movimiento y visión nocturna. App móvil.',

specs:['1080p','Wi‑Fi','Audio bidireccional'],

reviews:[{author:'Andrea', text:'Instalación sencilla y calidad aceptable.'}]},

{id:5, name:'Laptop Ultrabook 13"', category:'Computo', price:799.00, oldPrice:899.00, rating:4.7, stock:5,

image:'https://picsum.photos/seed/laptop/800/500',

desc:'Ligera (1.2kg) con SSD de 512GB y 16GB RAM.',

specs:['Intel i5','16GB RAM','512GB SSD'],

reviews:[{author:'Pablo', text:'Rápida y muy portable para viajes.'}]},

{id:6, name:'Cafetera Espresso Home', category:'Cocina', price:129.00, oldPrice:159.00, rating:4.5, stock:10,

image:'https://picsum.photos/seed/coffee/800/500',

desc:'Bomba italiana 15 bar, vaporizador para cappuccino.',

specs:['Acero','Depósito 1.2L','Autoapagado'],

reviews:[{author:'Camila', text:'Espresso cremoso, sorprende por el precio.'}]},

{id:7, name:'Licuadora PowerBlend', category:'Cocina', price:49.90, oldPrice:69.90, rating:4.0, stock:18,

image:'https://picsum.photos/seed/blender/800/500',

desc:'Vaso de vidrio 1.5L, 6 cuchillas de acero, 3 velocidades.',

specs:['Pulso','Pies antideslizantes','500W'],

reviews:[{author:'María', text:'Ideal para smoothies, fácil de limpiar.'}]},

{id:8, name:'Zapatillas Running AirFlow', category:'Deporte', price:74.90, oldPrice:99.90, rating:4.3, stock:14,

image:'https://picsum.photos/seed/shoes/800/500',

desc:'Amortiguación reactiva y malla transpirable.',

specs:['Suela EVA','Plantilla memory','300g'],

reviews:[{author:'Ricardo', text:'Muy cómodas para tiradas largas.'}]},

{id:9, name:'Chaqueta Impermeable Trek', category:'Moda', price:59.00, oldPrice:79.00, rating:4.1, stock:7,

image:'https://picsum.photos/seed/jacket/800/500',

desc:'Columna de agua 10k, costuras selladas, capucha ajustable.',

specs:['Ligera','Packable','Reflectantes'],

reviews:[{author:'Elena', text:'Me salvó en una lluvia intensa.'}]},

{id:10, name:'Mochila Antirrobo Urban', category:'Accesorios', price:39.50, oldPrice:55.00, rating:4.2, stock:25,

image:'https://picsum.photos/seed/backpack/800/500',

desc:'Puerto USB, compartimento acolchado 15.6" y cierres ocultos.',

specs:['Poliéster 900D','Respirable','20L'],

reviews:[{author:'Tomás', text:'Se siente segura y bien construida.'}]},

{id:11, name:'Silla Ergonómica Office', category:'Hogar', price:139.00, oldPrice:189.00, rating:4.5, stock:6,

image:'https://picsum.photos/seed/chair/800/500',

desc:'Apoyo lumbar ajustable y malla transpirable.',

specs:['Basculante','Altura ajustable','Ruedas silenciosas'],

reviews:[{author:'Nadia', text:'Me mejoró el dolor de espalda.'}]},

{id:12, name:'Monitor 27" QHD', category:'Computo', price:249.00, oldPrice:299.00, rating:4.6, stock:11,

image:'https://picsum.photos/seed/monitor/800/500',

desc:'Resolución 2560×1440, 75Hz y marco ultrafino.',

specs:['IPS','75 Hz','DisplayPort + HDMI'],

reviews:[{author:'Fede', text:'Colores excelentes para diseño.'}]},

{id:13, name:'Teclado Mecánico RGB', category:'Gaming', price:69.00, oldPrice:89.00, rating:4.8, stock:19,

image:'https://picsum.photos/seed/keyboard/800/500',

desc:'Switches rojos silenciosos y 18 modos de iluminación.',

specs:['Anti‑ghosting','Cable trenzado','Hot‑swap'],

reviews:[{author:'Karla', text:'Muy suave para escribir y jugar.'}]},

{id:14, name:'Set Brochas Maquillaje 12p', category:'Belleza', price:24.90, oldPrice:34.90, rating:4.4, stock:30,

image:'https://picsum.photos/seed/brushes/800/500',

desc:'Cerdas sintéticas suaves, estuche incluido.',

specs:['Hipoalergénicas','Fácil lavado','Sin crueldad'],

reviews:[{author:'Dani', text:'No sueltan pelo, buen acabado.'}]},

{id:15, name:'Crema Hidratante Facial', category:'Belleza', price:17.50, oldPrice:22.00, rating:4.3, stock:28,

image:'https://picsum.photos/seed/cream/800/500',

desc:'Con ácido hialurónico y niacinamida. Apta para todo tipo de piel.',

specs:['No comedogénica','Sin fragancia','Dermatológicamente probada'],

reviews:[{author:'Gaby', text:'Deja la piel suave sin brillo.'}]}

];

// ---------- Utilidades ----------

const fmt = new Intl.NumberFormat('es-ES', { style:'currency', currency:'USD' });

const star = (on) => `<svg viewBox="0 0 24 24" fill="${on?'#fbbf24':'#334155'}" aria-hidden="true"><path d="M12 17.3l-6.2 3.4 1.7-6.9L2 8.9l7-.6L12 2l3 6.3 7 .6-5.5 4.9 1.7 6.9z"/></svg>`;

// ---------- Render ----------

const grid = document.querySelector('#grid');

const $q = document.querySelector('#q');

const $category = document.querySelector('#category');

const $sort = document.querySelector('#sort');

const $inStockOnly = document.querySelector('#inStockOnly');

const $cartCount = document.querySelector('#cartCount');

function initFilters(){

const cats = Array.from(new Set(products.map(p=>p.category))).sort();

cats.forEach(c=>{ const o = document.createElement('option'); o.value=c; o.textContent=c; $category.appendChild(o); });

}

function getFiltered(){

const q = ($q.value||'').toLowerCase();

const cat = $category.value;

let res = products.filter(p => (

(!cat || p.category===cat) &&

(!q || (p.name+" "+p.category+" "+p.desc+" "+p.specs.join(" ")).toLowerCase().includes(q)) &&

(!$inStockOnly.checked || p.stock>0)

));

switch($sort.value){

case 'price-asc': res.sort((a,b)=>a.price-b.price); break;

case 'price-desc': res.sort((a,b)=>b.price-a.price); break;

case 'rating-desc': res.sort((a,b)=>b.rating-a.rating); break;

default: res.sort((a,b)=>b.rating - a.rating); // relevancia aproximada

}

return res;

}

function render(){

grid.innerHTML='';

const tpl = document.querySelector('#cardTpl');

getFiltered().forEach(p=>{

const node = tpl.content.cloneNode(true);

const art = node.querySelector('article'); art.dataset.id = p.id;

node.querySelector('img').src = p.image; node.querySelector('img').alt = p.name;

node.querySelector('.badge').textContent = p.category;

node.querySelector('.title').textContent = p.name;

node.querySelector('.desc').textContent = p.desc;

const ul = node.querySelector('.specs'); p.specs.forEach(s=>{const li=document.createElement('li'); li.textContent=s; ul.appendChild(li)});

node.querySelector('.now').textContent = fmt.format(p.price);

node.querySelector('.old').textContent = p.oldPrice?fmt.format(p.oldPrice):'';

node.querySelector('.stock').textContent = p.stock>0?`En stock: ${p.stock} uds.`:'Agotado';

if(p.stock===0){ art.classList.add('oos'); node.querySelector('.stock').style.color = 'var(--danger)'; }

// estrellas

const stars = node.querySelector('.stars');

const full = Math.round(p.rating);

for(let i=1;i<=5;i++){ stars.insertAdjacentHTML('beforeend', star(i<=full)); }

// reseñas

const reviews = node.querySelector('.reviews');

p.reviews.forEach(r=>{

const div=document.createElement('div'); div.className='review';

div.innerHTML = `⭐️⭐️⭐️⭐️${p.rating>4.5?'⭐️':''} <b>${r.author}</b>: ${r.text}`;

reviews.appendChild(div);

});

// acciones

node.querySelector('.add').addEventListener('click',()=>{ cartAdd(p); });

node.querySelector('.buy').addEventListener('click',()=>{ buyNow(p); });

grid.appendChild(node);

});

if(!grid.children.length){ grid.innerHTML = '<p>No hay resultados para tu búsqueda.</p>'; }

}

// ---------- Carrito / Compra ----------

let cart = [];

function cartAdd(p){

cart.push(p.id); $cartCount.textContent = cart.length;

const btn = document.querySelector(`article[data-id="${p.id}"] .add`);

btn.textContent = 'Añadido ✓';

setTimeout(()=>btn.textContent='Añadir al carrito', 1200);

}

function buyNow(p){

const msg = encodeURIComponent(`Hola, quiero comprar: ${p.name} (USD ${p.price}). ¿Disponibilidad?`);

// Enlaza a WhatsApp; si prefieres email usa mailto:

window.open(`https://wa.me/?text=${msg}`,'_blank');

}

// ---------- Eventos ----------

[$q,$category,$sort,$inStockOnly].forEach(el=>el.addEventListener('input', render));

// ---------- Inicio ----------

initFilters();

render();

</script>

</body>

</html>

RUBRICA DE EVALUACION