ELECTIVA I (DESARROLLO WEB) - SA26-1
Diagrama de temas
- COMPETENCIAS ESPECIFICAS
COMPETENCIAS ESPECIFICAS
Formular y organizar estrategias de comunicación visual a través de herramientas tecnológicas de diseño gráfico
Bibliografía Obligatoria para el sinóptico
Bibliografía Obligatoria para el sinóptico
Bibliografía Obligatoria para el sinóptico
Bibliografía Complementaria para el sinóptico
Bibliografía Complementaria para el sinóptico
Bibliografía Complementaria para el sinóptico
Bibliografía Complementaria para el sinóptico.
- DOCENTE DE LA MATERIATema actual
DOCENTE DE LA MATERIA
Profesor: Andy Torrealba
Sede: Acarigua
Datos de Contacto:
· Número de Teléfono: 0412-5542444
· Número de Teléfono de Habitación:
· WhatsApp: (+58) 412-5542444
· Correo: andydtorrealbag@gmail.com
Horario de Atención: Los horarios y los medios a través de los cuales se realizarán las asesorías y/o consultas podrán ser acordados con el Docente.
Nota: Abstenerse de hacer llamadas fuera del horario de atención facilitado por el docente.
- UNIDAD I. DISEÑO GRÁFICO
UNIDAD I. DISEÑO GRÁFICO
- Tipografía básica: Crea un texto corto (ej. “Bienvenido”) usando dos tipografías distintas y analiza cuál es más legible.
- Contraste de color: Diseña un encabezado con texto negro sobre fondo blanco y otro con texto gris sobre fondo gris. Evalúa cuál es más fácil de leer.
- Regla 60/30/10: Aplica esta regla en un diseño sencillo (ej. tarjeta digital) usando un color principal, uno secundario y uno de acento.
- Kerning y tracking: Ajusta el espaciado entre letras en un título y observa cómo cambia la percepción visual.
- Texturas simples: Crea un fondo con un patrón repetitivo en Illustrator y aplícalo a una maqueta web.
Esta es la tarea de la unidad i
Valor 10 Puntos
PUnidad I – Diseño Gráfico
Ejercicio 1: Tipografía básica
- Objetivo: Identificar tipografías más legibles.
- Pasos:
1. Escribe la palabra “Bienvenido” en dos tipografías distintas (ej. Arial y Times New Roman).
2. Coloca ambas en un documento.
3. Pide a tus compañeros que indiquen cuál les resulta más clara.
4. Reflexiona sobre la importancia de la legibilidad.
---
Ejercicio 2: Contraste de color
- Objetivo: Evaluar la legibilidad según el contraste.
- Pasos:
1. Crea un título en texto negro sobre fondo blanco.
2. Crea el mismo título en gris sobre fondo gris.
3. Compara cuál se lee mejor.
4. Explica por qué el contraste es clave en el diseño web.
---
Ejercicio 3: Regla 60/30/10
- Objetivo: Aplicar proporciones de color en un diseño.
- Pasos:
1. Elige un color principal, uno secundario y uno de acento.
2. Diseña una tarjeta digital aplicando la regla:
- 60% color principal
- 30% color secundario
- 10% color de acento
3. Evalúa si la composición es armónica.
---
Ejercicio 4: Kerning y tracking
- Objetivo: Observar cómo cambia la percepción del texto.
- Pasos:
1. Escribe un título en un editor gráfico.
2. Ajusta el espaciado entre letras (tracking).
3. Modifica el espacio entre pares de letras (kerning).
4. Compara los resultados y comenta cuál es más legible.
---
Ejercicio 5: Texturas simples
- Objetivo: Crear un fondo con patrón repetitivo.
- Pasos:
1. Abre Illustrator.
2. Diseña una forma simple (ej. cuadrado).
3. Duplica y organiza en patrón repetitivo.
4. Aplica el patrón como fondo en una maqueta web.
---Trabajo Práctico Investigativo
Crear un brief de diseño gráfico con los elementos claves para un cliente real o ficticio.
EVALUACIÓN DE LA UNIDAD I:
DISEÑO GRÁFICO
Trabajo Práctico Investigativo
Crear un brief de diseño gráfico con los elementos claves para un cliente real o ficticio.
Proyecto Final:
Los cinco capítulos de un brief de diseño completo son: un resumen del proyecto y sus antecedentes, un análisis del sector, un informe sobre el público objetivo, los objetivos comerciales y la estrategia de diseño, y finalmente, el alcance, los plazos y el presupuesto del proyecto por fases.
- Resumen de la visión general del proyecto y antecedentes: Este capítulo proporciona un contexto general del proyecto y de la empresa para que el equipo de diseño comprenda la misión, visión y experiencia de la empresa, como señala Coderhouse.
- Informe del sector: Se presenta un análisis del mercado y la competencia, incluyendo las tendencias actuales y las oportunidades para el proyecto.
- Informe del público objetivo o target: Describe detalladamente el público al que va dirigido el proyecto, incluyendo sus características, necesidades y comportamientos.
- Objetivos comerciales y estrategia de diseño: Se establecen las metas de negocio que el diseño debe ayudar a alcanzar. Esto incluye la estrategia de diseño, el mensaje clave, el tono de comunicación y cualquier directriz de marca.
- Alcance, tiempos y presupuesto del proyecto por fases: Este capítulo detalla el alcance del trabajo, las entregas específicas, el cronograma del proyecto y el presupuesto asignado, dividiéndolo en fases si es necesario.
- UNIDAD II. HERRAMIENTAS DEL DISEÑO GRAFICO
UNIDAD II. HERRAMIENTAS DEL DISEÑO GRAFICO
Unidad II – Herramientas del Diseño Gráfico
6. Photoshop básico: Recorta una imagen y colócala sobre un fondo diferente.
7. Illustrator: Dibuja una figura geométrica (círculo, cuadrado) y aplica un degradado de color.
8. Sketch: Diseña un botón de interfaz con estados “normal” y “hover”.
9. Fireworks: Exporta una imagen optimizada para web y compara su peso con la original.
10. Comparación de herramientas: Realiza el mismo logotipo en Photoshop e Illustrator y describe las ventajas de cada programa.
Valor de 10 Puntos
Unidad II – Herramientas del Diseño Gráfico
Unidad II – Herramientas del Diseño Gráfico
Ejercicio 6: Photoshop básico
- Objetivo: Practicar recorte y montaje.
- Pasos:
1. Abre una imagen en Photoshop.
2. Usa la herramienta de selección para recortar un objeto.
3. Pega el recorte sobre un fondo diferente.
4. Guarda el resultado optimizado para web.
---
Ejercicio 7: Illustrator – Degradado
- Objetivo: Aplicar degradados en formas.
- Pasos:
1. Dibuja un círculo en Illustrator.
2. Aplica un degradado radial de dos colores.
3. Ajusta la intensidad y dirección.
4. Exporta la figura como imagen.
---
Ejercicio 8: Sketch – Botón interactivo
- Objetivo: Diseñar un botón con estados.
- Pasos:
1. Crea un rectángulo con texto “Enviar”.
2. Diseña el estado normal (ej. azul).
3. Diseña el estado hover (ej. azul más oscuro).
4. Exporta ambos estados como imágenes.
---
Ejercicio 9: Fireworks – Optimización
- Objetivo: Comparar peso de imágenes.
- Pasos:
1. Abre una imagen en Fireworks.
2. Exporta en formato JPG optimizado.
3. Compara el tamaño del archivo con el original.
4. Reflexiona sobre la importancia de optimizar imágenes.
---
Ejercicio 10: Comparación de herramientas
- Objetivo: Identificar ventajas de cada software.
- Pasos:
1. Diseña un logotipo simple en Photoshop.
2. Diseña el mismo logotipo en Illustrator.
3. Compara facilidad de uso y calidad final.
4. Escribe una conclusión sobre cuál es más adecuado.
EVALUACIÓN DE LA UNIDAD II: HERRAMIENTAS DE DISEÑO GRÁFICO Trabajo Práctico Investigativo
EVALUACIÓN DE LA UNIDAD II:
HERRAMIENTAS DE DISEÑO GRÁFICO
Trabajo Práctico Investigativo
Diseño de Identidad Visual para Aplicación Web
Desarrollar el logotipo del proyecto a partir del brief entregado, junto con una galería de imágenes y banners adaptados a los formatos requeridos para su implementación en una aplicación web. El diseño debe realizarse utilizando CorelDRAW, Photoshop o cualquier otra herramienta de libre elección, siguiendo las directrices impartidas en clase dentro de las asignaturas de Diseño Gráfico Digital y Diseño Web.
Ítem de Evaluación: Identidad Visual del Proyecto Web
Descripción del trabajo:
Diseñar la identidad visual del proyecto desarrollado a partir del brief, incluyendo:
- Logotipo original del proyecto
- Galería de imágenes representativas
- Banners adaptados a la interfaz de la aplicación web
El desarrollo debe realizarse en CorelDRAW, Photoshop o cualquier otra herramienta de libre elección, respetando los lineamientos impartidos en clase en las asignaturas de Diseño Gráfico Digital y Diseño Web.
Guía de Entrega
Formato de entrega:
- Archivos editables (.cdr, .psd, .ai, etc.)
- Exportaciones en formatos web (.png, .jpg, .svg, .ico, .gif)
- Documento PDF con presentación visual del trabajo (mockups, ejemplos de uso, paleta de colores, tipografía)
- UNIDAD III. APLICACIÓN DE HERRAMIENTAS DEL DISEÑO GRÁFICO
UNIDAD III. APLICACIÓN DE HERRAMIENTAS DEL DISEÑO GRÁFICO
- Integración del Diseño Gráfico en el código HTML y CSS
- Diseño centrado en Visual Studio Code,
- Sublime Text,
- Dreamweaver
- Integración de la Herramienta XAMPP como servicio de alojamiento WEB Local
- UNIDAD IV. CONCEPTOS BÁSICOS DE REDES
UNIDAD IV. CONCEPTOS BÁSICOS DE REDES
- Definición y conceptos básicos de redes
- Tipos de redes (LAN, WAN, WLAN, MAN)
- Introducción a los protocolos de red (TCP/IP, HTTP, DNS)