MANUAL DE APRENDIZAJE

PLANTEL O CENTRO: EMSaD BUENA

VISTA

GRADO: SEXTO SEMESTRE

ASIGNATURA O MÓDULO PROFESIONAL:

DISEÑO DIGITAL

SEMESTRE A
AGOSTO – ENERO 2022

ELABORADO POR: OSEAS

XOCHIMANAHUA PANZO

FECHA DE ELABORACIÓN: 11/02/2022 1

BIENVENIDA
Estimad@ estudiante, es un gusto para mí, poder darte la bienvenida a este primer parcial de la
asignatura de DISEÑO DIGITAL, mi nombre es Oseas Xochimanahua Panzo, de profesión ingeniero
en sistemas computacionales, juntos iremos de la mano en este maravilloso camino de
aprendizaje que hoy iniciamos, con la finalidad de que tu puedas desarrollar diversos
conocimientos, habilidades y competencias, que te permitirán participar en la solución de
diversas problemáticas de tu contexto y vida profesional.
¡Mucho éxito!

PRESENTACIÓN DE LA ASIGNATURA
Las Tecnologías de la Información y la Comunicación, mejor conocidas como TIC´s, forman parte
de los desarrollos tecnológicos que actualmente han cambiado nuestra forma de vida al volverse
parte de ella.
El uso del móvil, navegar en Internet, las redes sociales, el correo electrónico, y demás
herramientas de uso diario, y común en la sociedad actual, son posibles gracias a las TIC. Está
comprobado que más del 80% de la población usa dispositivos móviles (teléfono celular, tableta
electrónica…) o se conecta a Internet.
El uso de las TIC´s ayuda a simplificar las tareas, mediante la creación de herramientas que
realizan de manera rápida y precisa muchos procesos y también han transformado la manera en
cómo accedemos a la información y la forma de comunicarnos.
Las TIC tienen aplicación en muchas áreas de nuestra vida; en la educación, son recursos de apoyo
y herramientas, ya que podemos disponer de información de todas las áreas del conocimiento sin
necesidad de ir a una biblioteca o hacer prácticas de campo, con la certeza de que obtendremos
precisión en los resultados.
Las TIC también fomentan el aprendizaje colaborativo y la apropiación del conocimiento, ya que
además de disponer de toda la información podemos expresar nuestras experiencias y
conocimientos, obteniendo una retroalimentación con personas en otra parte del mundo en
tiempo real.
Programas de software, creación de hardware, aplicaciones móviles, desarrollo web,
almacenamiento, programación, etcétera. Un sinfín de herramientas tecnológicas han surgido
gracias a las TIC. Ya sea para resolver problemas, satisfacer necesidades específicas o simple
diversión, las TIC están presentes en nuestro entorno y es importante usarlas a nuestro favor.

2
PROPÓSITO DE LA ASIGNATURA
Diseña páginas web, animaciones multimedia, imágenes digitales e impresas, para generar
productos de comunicación y publicidad en el ámbito laboral y comunitario, favoreciendo el
desarrollo ético, creativo e intercultural del entorno.

COMPETENCIAS A DESARROLLAR
Competencias genéricas
Competencias disciplinares
Competencias profesionales

EXPLICACIÓN DE LA METODOLOGÍA:

Actividades presenciales:
Son todas aquellas que podrás desarrollar en compañía de tu docente dentro del laboratorio de
cómputo.
Actividades a distancia o autónomas:
• Son todas aquellas que deberás realizar de forma personal, apoyándote del manual de
aprendizaje y de las instrucciones que tu docente te dicte a través de la plataforma de
Google Classroom.
• Es recomendable seguir de forma puntual cada una de las indicaciones dictadas por el
docente, para el desarrollo de tus actividades, haz uso de los materiales y recursos
proporcionados.
• Ante cualquier duda generada para el desarrollo de las actividades, no olvides
comunicarte a través del medio a tu alcance, de preferencia en el grupo de WhatsApp.

Herramientas o plataformas digitales para la interacción en el desarrollo de las actividades:

• WhatsApp: 2712157843
• Google Classroom:
Código:
• Messenger
• Google Meet:

Total de horas Total horas Total de horas de

Parcial presenciales a distancia trabajo autónomo
Primero 16 5
Segundo
Tercero

3
 CRITERIOS DE EVALUACIÓN:

CRITERIOS PONDERACIÓN
Productos 70%
Proyecto interdisciplinar 10%
Mod. Emprendimiento 10%
Tutoría-OE 10%

CRONOGRAMA ENTREGA DE PRODUCTOS

PONDERACIÓN DE FECHA DE
TEMA PRODUCTO(S) INSTRUMENTO
EVALUACIÓN ENTREGA

Introducción al
Foro virtual o mesa redonda Guía de observación 10%
Diseño Digital.
Tipos de
gráficos: Mapa
Collage Rubrica 20%
de bits y
Vectoriales.
Formato de
Tabla descriptiva Rubrica 20%
gráficos
Modos de color. Mapa conceptual Rubrica 20%
Tipos de
software de
diseño y que
ofrecen.

FUENTES DE CONSULTA.
https://www.youtube.com/watch?v=QxbNG5hBrVQ&ab_channel=U-tad

https://pixelemos.com/blog/graficos-digitales/
https://aries.es/los-formatos-mas-habituales-en-diseno-grafico/

4
EJE: Tecnologías de la Información y Comunicación.

COMPONENTE: Capacitación para el Trabajo.

CONTENIDO CENTRAL: Diseño Digital

➢ ETAPA DE INICIO

Contenido específico:
• Introducción al Diseño Digital.
• Tipos de gráficos: Mapa de bits y Vectoriales.
• Formato de gráficos
• Modos de color.
• Tipos de software de diseño y que ofrecen.
Introducción:
¿Qué es el diseño digital?
El diseño digital se basa en crear, programar y mostrar un mensaje visual con el fin de comunicarlo y buscar
una respuesta concreta en grupos sociales específicos. Es el arte de plasmar de manera gráfica y digital una
idea, valores, sentimientos.
Objetivo:
Diseña páginas web, animaciones multimedia, imágenes digitales e impresas, para generar productos de
comunicación y publicidad en el ámbito laboral y comunitario, favoreciendo el desarrollo ético, creativo e
intercultural del entorno.

Desarrollo de competencias
CG 4.1 Expresa ideas y conceptos mediante representaciones lingüísticas,
Competencia Genérica
matemáticas o graficas.

Competencia Disciplinares

8. Elabora diversos recursos gráficos publicitarios utilizando software de

diseño, permitiendo su publicación en medios digitales e impresos para
Competencia Profesional comunicar ideas o emociones aplicables a contextos laborales, escolares
y de la vida cotidiana, en un ambiente ético e innovador, mostrando
flexibilidad y apertura a diferentes puntos de vista.

5
Recuperar conocimientos previos (estrategia)

Mediante una lluvia de ideas responde a los siguientes planteamientos.

¿Para ti que es el diseño digital?

¿Cuál crees que es la finalidad de los anuncios publicitarios?
¿Qué se necesita para poder obtener imágenes digitales de alta calidad?
¿Qué formatos de imagen conoces?
¿Qué son los mega Píxeles?

Anota las respuestas en tu libreta.

Planteamiento de caso o problema (aprendizaje situado: contexto de los estudiantes, ámbito local o global)
Imagina que necesitar vender el café que se produce en la localidad de Buena Vista, en un producto terminado para
agregar un mayor valor económico, ¿Qué necesitas para poder lograr una venta al público?

Es correcto, se necesita crear una marca, para ello será necesario trabajar en un software de diseño, e iniciar con la
edición de una imagen que represente el café que deseas vender.

En tu libreta, dibuja una etiqueta que represente la marca de tu café, con los siguientes elementos.
• Nombre del producto
• Logotipo
• Leyenda
Glosario (estrategia)

Diseño digital: El diseño digital se basa en crear, programar y mostrar un mensaje visual con el fin de
comunicarlo y buscar una respuesta concreta en grupos sociales específicos. Es el arte de plasmar de manera
gráfica y digital una idea, valores, sentimientos.

Software de diseño: Aquel programa, interfaz o aplicación desarrollada para la creación y edición de imágenes
y gráficos. Es decir, una herramienta digital en la que se pueden crear o retocar fotografías, ilustraciones,
gráficos, imágenes y más.
Mapa de Bits: Un mapa de bits es una matriz de bits que especifica el color de cada píxel de una matriz
rectangular de píxeles.

6
Imagen Vectorial: El dibujo vectorial se crea a partir de gráficos vectoriales, que son imágenes creadas con
fórmulas matemáticas.

➢ ETAPA DE DESARROLLO
1) g

• Descripción de la actividad (adquisición de información)

Actividad 1
Gráficos digitales: Vectoriales y Mapas de Bits

Las computadoras procesan y despliegan las imágenes de dos maneras diferentes los gráficos digitales:
gráficos vectoriales y los gráficos de mapas de bits o gráficos raster.

Gráficos vectoriales: Están formados por líneas formadas por ecuaciones matemáticas. Cada línea está
delimitada por dos puntos llamados nodos. Las líneas curvas son llamadas curvas Bézier y obtienen su forma
gracias a unas pequeñas asas adjuntas a los nodos.

Los gráficos vectoriales son muy ligeros, es decir, pesan muy pocos bytes. También son independientes de la
resolución, o sea, no se distorsionan cuando los agrandas. Desafortunadamente los colores que puede
representar un vector son limitados a color de relleno y color de contorno.

Los utilizamos en textos, logotipos, dibujos, CAD, diseños para corte por navaja, láser o CNC.

Observa el siguiente video sobre Gráficos Vectoriales o imágenes Vectoriales.

https://www.youtube.com/watch?v=SVFYXiV9S-A&ab_channel=Dise%C3%B1oDunkel

Gráficos de mapas de bits o ráster: Este tipo de gráficos digitales está formado por una matriz es decir, una
cuadrícula, de pixeles. Cada pixel puede almacenar un color diferente. Los gráficos de mapas de bits son muy
pesados ya que deben de almacenar el color de cada pixel del cual está formada. Como están formados de
pieles, están limitados a formas rectangulares además que al agrandarse los pixeles comienzan a hacerse más
visibles. Esto ocasiona que la imagen se pixeleé y pierda definición.

7
Profundidad de Color
Podemos llamar profundidad de color a la cantidad de colores que se pueden crear en base al número que se
pueden representar en determinados bits de almacenamiento. Esto es porque cada pixel dentro de las
imágenes raster almacena un color.
Las computadoras se basan en el sistema binario, es decir, ceros y unos. 8 bits representan un Byte y éste
puede almacenar hasta 256 números del sistema decimal. Si asignamos un color a cada número podemos
decir que una imagen de 8 bits puede representar únicamente 256 colores. Este tipo de profundidad de color
es el que utilizaba por ejemplo el NES.

La profundidad de color más utilizada es la RGB/8 que tiene 3 canales. Esta significa Rojo, Verde y Azul en
8bits. Es decir, 256 niveles de Rojo, 256 niveles de Verde y 256 niveles de Azul. 256 × 256 × 256 = 16,777,216
colores en 3 bytes por pixel.
Resolución de la imagen
La resolución es el tamaño del pixel. La unidad más común para medir el tamaño del pixel son los puntos por
pulgada, o dpi por sus siglas en inglés. A mayor resolución más pequeño es el pixel y viceversa. Esto es
porque en una pulgada caben cierta cantidad de pixeles según sea la resolución. Las pantallas de las
computadoras tienen diferentes tamaños y resoluciones por lo que se toma una medida estándar de 72dpi,
excepto por las pantallas Apple retina que deben de llevar 220dpi. Por otro lado, las impresiones deben de
llevar al menos 300dpi para que sea una imagen definida.

8
¿Cómo hacer para imprimir una imagen y no salga pixelada?
Es común que bajemos imágenes de Internet y al querer imprimirlas salgan pixeladas. Esto es porque, como
mencione anteriormente, las imágenes para pantalla tienen pixeles más grandes (72dpi) y para que una
impresión salga nítida se requieren pixeles más pequeños(300dpi).
Entonces para hacer que una imagen no salga pixelada lo que hay que hacer es buscar una imagen que
tenga muchos pixeles y sea al menos 4 veces más grande de lo que queremos. Luego esta imagen se hace
pequeña y se ajusta al tamaño deseado. Al hacer esto la imagen hace más chicos los pixeles y por
consiguiente aumenta la resolución y nuestra impresión saldrá nítida.
Sistemas de compresión.
Como las imágenes de mapas de bit son muy pesadas es necesario reducir su tamaño en bytes para poder
traspasarlas por Internet más rápidamente además de ahorrar espacio. Existen diferentes algoritmos de
compresión que son sumamente efectivos en determinadas condiciones. Vamos a verlos a detalle.

JPEG o JPG (Joint Photographers Experts Group)

El sistema de compresión JPG utiliza un algoritmo llamado Interpolación. Mediante este algoritmo se detectan
zonas de colores similares y crea una matriz de pixeles en la cual toma los extremos y elimina el resto. Al abrir
la imagen solo se abren los pixeles marcados como polos o extremos y el resto lo calcula matematicamente.
De esta manera se ahorra muchísimo espacio, pero se sufre una pérdida de calidad. Se puede ajustar el nivel
de compresión sacrificando calidad para disminuir el peso.

GIF (Graphics Interchange Format)

Los GIF utilizan un algoritmo de compresión llamado Indexación. En la Indexación se hace una comparación
de todos los colores similares que existen en la imagen, después los agrupa y los mezcla dando un solo color.
En total puede hacer un grupo máximo de 256 colores. De esta manera elimina la información de color
ahorrando espacio, pero perdiendo calidad. Los GIF soportan transparencia y múltiples cuadros lo que les
permite simular animación.

PNG (Portable Network Graphics)

El formato PNG utiliza un sistema de compresión sin pérdida de calidad utilizando un algoritmo lógico de
repetición de patrones. El PNG permite también guardar metadatos más complejos y transparencias de alta
calidad.

9
¿Cuándo debo utilizar JPG, GIF o PNG?
Debido a sus características, cada algoritmo funciona mejor en ciertos gráficos. Lo primero que hay que tener
en consideración es la cantidad de colores, un JPG puede reproducir más de 16 millones de colores mientras
que el GIF solamente 256. Asi que si tenemos una fotografía con muchas flores y pequeños detalles lo ideal
es elegir JPG. Si por el contrario nuestra imagen es un gráfico de ventas con algunas barras y una flecha roja,
al tener pocos colores lo ideal es utilizar GIF. Por último, si queremos un gráfico que tenga mucha calidad y
tenga transparencia muy nítida se puede usar PNG, aunque la compresión no sea tan efectiva. El PNG es ideal
para pequeños iconos.

Producto:
Con la información revisada hasta este momento, realiza un collage en el que
diferencies las características de las imágenes vectoriales e imágenes mapa de bits.
Tiempo:

Actividad 2.
Formatos de gráficos.
Revisa la siguiente información.
Enlace: https://aries.es/los-formatos-mas-habituales-en-diseno-grafico/

Producto:
En la siguiente tabla describe la información que se solicita.

Formato Descripción Ventajas Desventajas

JPEG
GIF
PNG
BMP
RAW
EPS
TIFF
SVG
PDF

10
 ACTIVIDAD 3
Comprender los conceptos básicos de modo de color.

Revisa la siguiente información

Con base a la información, realiza un mapa conceptual, el que describas cada uno de los
modos de color, asi como las características de las mismas.

Enlace: https://tactic-center.com/diseno-grafico/los-modos-de-color-mas-utilizados/?locale=es

11
 • Descripción de la actividad: (construcción del aprendizaje)

Actividad 4:
Investiga en sitios de internet diferentes formatos de imagen e insértalas en una tabla como la
que se muestra a continuación.

TIPO DE GRAFICO FORMATO DE GRAFICO GRAFICO O IMAGEN

VECTORIAL SVG

• Descripción de la actividad: (interrogatorio metacognitivo)

¿Cuál es la importancia de conocer los tipos y formatos de gráficos al momento de elegir una imagen?

¿Qué características pueden diferenciar una imagen vectorial de una imagen mapa de bits?

Evaluación formativa (estrategia)

¿Qué es el diseño digital?

¿Qué es un gráfico?

¿Cuáles son las características de una imagen MAPA DE BITS?

¿Qué características podemos encontrar en una imagen MAPA DE BITS?

¿Qué es una imagen vectorial?

¿Qué características podemos encontrar en una imagen vectorial?

12
 ➢ ETAPA DE CIERRE
Recuperación de aprendizajes (estrategia)
Finalmente, hemos llegado a la parte final de este primer parcial de DISEÑO DIGITAL, te invito a realizar una
conclusión personal sobre la importancia que tiene conocer las características de una imagen digital.

Dudas de los estudiantes (estrategia)

➢ PLAN DE EVALUACIÓN:

PRODUCTO INSTRUMENTO DE EVALUACIÓN PONDERACIÓN

Foro virtual o mesa redonda Guía de observación 10%

Collage Rubrica 20%
Tabla descriptiva Rubrica 20%
Mapa conceptual Rubrica 20%

13