Del vector a la taza

 
 

Propuesta Pedagógica: Del Vector a la Taza

Objetivo de Aprendizaje

El estudiante será capaz de construir una composición gráfica compleja en Inkscape, integrando tipografía, formas vectoriales e imágenes externas, aplicando configuraciones técnicas específicas para su salida a impresión por sublimación.


Sesión 1: Conceptualización y Bocetaje (45 min)

Estrategia de Apertura: "El Objeto que Habla" (10 min) Muestra una taza en blanco y una taza sublimada con un diseño impactante. Pregunta: ¿Si esta taza fuera su tarjeta de presentación al mundo, qué diría de ustedes sin usar palabras? Lluvia de ideas sobre colores, símbolos y estilos.

Técnica de Instrucción: "Anatomía del Lienzo" (10 min) Breve demostración en pantalla sobre el área de trabajo.

  • Configuración de unidades en milímetros.

  • Explicación de la medida estándar para taza (aprox. mm).

  • Diferencia entre ver un color en pantalla (RGB) y el resultado en tinta.

Actividad Práctica: "Boceto Digital Quick" (20 min) Los alumnos deben definir su concepto y comenzar a trazar las formas básicas en Inkscape:

  1. Dibujar un rectángulo guía de mm (el área de la taza).

  2. Explorar la herramienta Texto (T) y la herramienta Crear Formas (F2).

  3. Definir una paleta de colores usando el panel de "Muestras".

Cierre y Metacognición (5 min) Ticket de salida: "Escribe una herramienta de Inkscape que te haya parecido confusa y una que te haya parecido intuitiva".


Sesión 2: Producción y Acabado Final (90 min)

Estrategia de Apertura: "El Check-list del Diseñador" (10 min) Recuperación de saberes: ¿Por qué no podemos simplemente estirar una imagen pequeña? (Introducción breve al concepto de resolución y vectores).

Técnicas de Instrucción: "Recorte y Trayecto" (20 min) Demostración interactiva de dos funciones críticas:

  • Importación y Recorte: Cómo traer una imagen (JPG/PNG) y usar la herramienta "Dibujar curvas Bézier" para crear un contorno y aplicar un Objeto > Recorte > Aplicar.

  • Texto a Trayecto: Convertir fuentes en dibujos para evitar errores de impresión (Trayecto > Objeto a trayecto).

Actividad Práctica: "Master de la Sublimación" (50 min) Aplicación total de herramientas:

  1. Composición: Integrar el fondo, el texto con efectos (bordes, sombras) y la imagen recortada.

  2. Jerarquía Visual: Asegurarse de que el elemento principal sea visible desde el frente de la taza.

  3. Preparación Técnica (Vital): Aplicar el "Efecto Espejo" (Objeto > Reflejar horizontalmente) para que al sublimar se lea correctamente.

  4. Exportación: Generar un PDF o PNG de alta resolución listo para la impresora de sublimación.

Cierre y Metacognición: "Expositor de Pantallas" (10 min) Los alumnos recorren el aula viendo los diseños de sus compañeros. Reflexión: ¿Qué herramienta de Inkscape te permitió lograr el detalle más importante de tu diseño?


Sugerencia Tecnológica

  • Inkscape: Software base.

  • Remove.bg: (Opcional) Si algún alumno tiene dificultades extremas con las curvas Bézier para recortar, esta web ayuda a limpiar fondos rápido para luego importarlos.

  • Dafont.com: Para buscar tipografías que den personalidad al diseño (instalar antes de la sesión).


Tips para el Docente (Nivel Experto)

  • Control de Calidad: Recuérdales que en la sublimación los negros deben ser intensos. En Inkscape, asegúrate de que usen el código de color correcto.

  • El "Sangrado": Diles que dejen unos 2 o 3 mm extra de color en los bordes para que, si el papel se mueve un poco en la prensa, no queden filos blancos.

HERRAMIENTA EDUCATIVA

Explorador Interactivo de CSS

Aprende CSS modificando código real y viendo los resultados al instante.
Incluye conceptos clave y ejercicios.

¡Aplicado ✓
CSS editable
HTML editable
Vista previa
1
La cascada — la "C" de CSS
Cuando dos reglas contradictorias afectan al mismo elemento, gana la más específica. Si tienen igual especificidad, gana la que aparece más abajo en el archivo. Eso es la cascada.
2
El modelo de caja (Box Model)
Todo elemento HTML es una caja con 4 capas:
contenidopaddingbordermargin
Controlar estas capas es la clave para manejar espacio y tamaño.
3
Selectores: quién recibe el estilo
p → selecciona etiquetas  |  .clase → selecciona por clase  |  #id → elemento único  |  a:hover → selecciona estados interactivos.
4
Herencia
Algunas propiedades como color y font-family se heredan automáticamente de padres a hijos. Otras como border o padding no se heredan.
5
Flujo y layout
Por defecto los bloques (div, p) ocupan toda la línea; los elementos en línea (span, a) fluyen junto al texto. display: flex y display: grid dan control total sobre la distribución.
En Google Sites: ve a Insertar → Incrustar y pega el código generado.
Presiona "Cargar en editor" para ver y editar cada ejercicio antes de usarlo.
01
Tarjeta de presentación
Crea un div con nombre, descripción y color de fondo. Practica padding, border-radius y font-family.
02
Botón animado
Un botón que cambia de color con :hover y escala con transition suave. Aprende estados interactivos.
03
Galería con Flexbox
Tres tarjetas alineadas con display: flex, que se reorganizan en pantallas pequeñas con flex-wrap.
04
Tipografía expresiva
Importa fuentes de Google Fonts y practica jerarquía visual con font-size, font-weight y letter-spacing.
05
Línea de tiempo
Lista vertical con border-left y puntos decorativos con ::before. Proyecto integrador de múltiples conceptos.