Gráficos en el aula

Taller: «Gráficos en el Aula»Taller: «Gráficos en el Aula»
II Jornadas Provinciales RedXXI
Miranda de Ebro
David H. Martín Alonso
CFIE de Burgos
- Mayo 2015 -

Mayo de 2015 CFIE de Burgos
TALLER «GRÁFICOS EN EL AULA» #jRedXXIMiranda
ContenidosContenidos
Formatos Gráficos
Gráficos Vectoriales - Inkscape
Taller Práctico: ...de la cocina a la mesa

3/34
Una imagen valeUna imagen vale ×× 1E3 palabras1E3 palabras
Imprescindibles...
• Fondos decorativos
• Fotografías
• Gráficos 3D
• Diagramas
• Gráficas
• Esquemas
Utilidad
• Ejemplos, visualizaciones realistas
• Desarrollo de la capacidad de abstracción
• Complemento al aprendizaje, memorización
• Atención, motivación
■Introducción
□Formatos
□Bitmap
□Vectoriales
□Inkscape

4/34
……o incluso máso incluso más
• Demandas renovadas en los tiempos actuales
– Conocimientos ↔
– Destrezas ↔
– Comunicación ↑↑
• Aspectos de la comunicación presentes en educación:
– Expresión oral, expresión escrita...
– Y ¿la expresión gráfica?
• La tecnología ha redefinido al alza el valor de la imagen
– Valor aumentado en nuevos contextos comunicativos
– Asequible a la generalidad de la población
– Accesibilidad a altos niveles de calidad
• ¿Ha evolucionado en el aula de la misma manera?
– ...o ¿delegamos todo en aprendizajes informales?
• Para el docente también es una destreza profesional clave
■Introducción
□Formatos
□Bitmap
□Vectoriales
□Inkscape

Currículo → secuenciaciónCurrículo → secuenciación
– Adquisición de imagen fija mediante periféricos
de entrada.
– Tratamiento básico de la imagen digital: los
formatos básicos y su aplicación, modificación de
tamaño de las imágenes y selección de fragmentos,
creación de dibujos sencillos, alteración de los
parámetros de las fotografías digitales: saturación,
luminosidad y brillo.
Gráficos rasterizados y vectoriales.
– Procedimientos de diseño. Elementos, trazados y
figuras geométricas fundamentales. El color. La
edición. Recursos informáticos para la producción
artística. Maquetación.
– Elabora carteles con diversas informaciones
considerando los conceptos de tamaño, equilibrio,
proporción y color, y añadiendo textos utilizando la
tipografía más adecuada a su función.
– Elabora imágenes nuevas empleando diferentes
técnicas sencillas, a partir de los conocimientos
adquiridos.
– Maneja programas informáticos sencillos de
elaboración y retoque de imágenes digitales (copiar,
cortar, pegar, modificar tamaño, color, brillo,
contraste…) que le sirvan para la ilustración de
trabajos con textos.
– Conoce las consecuencias de la difusión de
imágenes sin el consentimiento de las personas
afectadas y respeta las decisiones de las mismas.

AutoevaluaciónAutoevaluación
¿Qué tamaño debe tener la imagen
para la portada de un trabajo?
• [A] El tamaño da igual. Con «tirar» de las esquinas se consigue
cualquier tamaño.
• [B] Si el DINA4 tiene unos 21cm de ancho, dejando 3cm de margen
y otros 2cm de distancia al borde... Unos 11cm de ancho.
• [C] Para obtener una buena calidad de impresión la imagen debe ser
de al menos de unos 300dpi.
• [D] Según se trate de una fotografía o de un dibujo plano optaremos
por formato JPEG o PNG.
Una de ellas es «desaconsejable»…

7/34
Fuentes y usosFuentes y usos
Fuentes de imágenes
• Fotografías originales
• Bancos de imágenes (educación, libres, etc.)
• Diseños gráficos originales
Destino
• Documentación escrita
• Presentaciones
• Web
Procesos
• Creación o descarga
• Almacenamiento
• Adaptación: manipulación, escalado, formato
• Inserción: inclusión o vinculación
■Introducción
□Formatos
□Bitmap
□Vectoriales
□Inkscape

8/34
Resolución y escalado de imágenesResolución y escalado de imágenes
Los dispositivos de captura y representación
están constituidos por matrices de puntos.
• Sensores
• Emisores
Cada dispositivo ofrece o requiere distinta
densidad de puntos, lo que se traduce en
distintas calidades de imágenes.
Necesitamos continuamente ampliar/reducir la
matriz de puntos que constituye la imagen.
• Algoritmos matemáticos diversos.
• Cuando la transformación es importante se observan los
«puntos gordos» en la imagen.
• En dibujos, diagramas, esquemas con trazos y zonas de
color uniforme destacan más los defectos.
■Introducción
□Formatos
□Bitmap
□Vectoriales
□Inkscape

9/34
Mapas de puntos vs. vectorMapas de puntos vs. vector
Los esquemas, diagramas y dibujos se
almacenan mejor como formas.
• ¿Generación de mapas de puntos correcta para cada
dispositivo?
• Necesidad de regenerar continuamente.
• Sencillez: menos formas que puntos.
• La cantidad de información almacenada es pequeña.
• Ficheros pequeños.
• Posibilidad de editar y corregir.
No existe un formato universal.
• Estándar W3C para web: SVG
• Lenta adopción.
■Introducción
□Formatos
□Bitmap
□Vectoriales
□Inkscape

10/34
Tipología y formatosTipología y formatos
Multitud de formatos
• Selección natural de formatos populares
• Condicionada por su uso en la web
Dibujos, gráficos con zonas de color uniforme
• Compresión sin pérdidas
• PNG, Portable Network Graphics
– Estándar libre 100%
– Soporta transparencia
• GIF, Graphics Interchange Format
– Más antiguo, paleta limitada a 256 colores
– Animaciones básicas
Fotografías, imágenes con efectos y degradados
• JPEG
– Compresión con pérdidas
– Calidad configurable
□Introducción
■Formatos
□Bitmap
□Vectoriales
□Inkscape

11/34
Formatos propietariosFormatos propietarios
• Los formatos estándar tienen limitaciones.
– Resolución
– Compresión con pérdidas
– Transparencia
– Superposición
• Cada aplicación de diseño se apoya en un formato
– «Completo» según su modelo particular.
– Soluciones específicas para cada funcionalidad soportada.
– Particular, propietario, no estándar.
• Las aplicaciones soportan capas.
– Imágenes superpuestas.
– Nivel de profundidad modificable.
– Efectos de mezcla
– Grado de transparencia
• Se debe conservar la imagen en el formato original.
– Para posibles cambios o desarrollo futuros.
– Para su uso la exportamos a los formatos estándar, con
resolución y tamaño adecuados al uso deseado.
□Introducción
■Formatos
□Bitmap
□Vectoriales
□Inkscape

12/34
Formatos: movilidadFormatos: movilidad
□Introducción
■Formatos
□Bitmap
□Vectoriales
□Inkscape

13/34
Imágenes «bitmap» (I)Imágenes «bitmap» (I)
Imágenes creadas como mapas de puntos
• Matriz rectangular.
• Cada posición admite un color.
Características:
• Tamaño: alto × ancho, unidades de longitud.
• Resolución: número de puntos por unidad de longitud.
– Depende del dispositivo (cámara, pantalla, impresora, etc.)
• Número de píxels; según tamaño y resolución.
• Tamaño de archivo: depende ademas del formato.
– Diferentes niveles de compresión.
Operaciones:
• Recorte, escalado.
• Cambios de resolución, formato.
• Generación, trazado, rotulación.
• Filtros.
□Introducción
□Formatos
■Bitmap
□Vectoriales
□Inkscape

14/34
Imágenes «bitmap» (II)Imágenes «bitmap» (II)
Diferentes modelos de color:
• RGB: modelo aditivo,
– Componentes rojo, verde y azul.
– Uso en pantallas informáticas.
– 3, 8 , 16, 24, 32 bits por píxel.
– Opción de canal alpha, transparencia
• CMYK: modelo sustractivo.
– Componentes cyan, magenta, amarillo y negro.
– Uso profesional, en imprentas.
• Pantone: paleta profesional, comercial.
– Uso en artes gráficas.
– Definiciones legales de banderas y logotipos.
□Introducción
□Formatos
■Bitmap
□Vectoriales
□Inkscape

15/34
Edición de imágenesEdición de imágenes
Software de referencia:
• Adobe Photoshop. Uso profesional.
– Impresión.
– Publicaciones.
• The Gimp (GNU, software libre). Uso popular.
– Diseño para pantalla de ordenador.
– Presentaciones, web, etc.
Otras aplicaciones:
• Aplicaciones de diseño más ligeras.
• Utilidades de conversión.
• Aplicaciones web.
□Introducción
□Formatos
■Bitmap
□Vectoriales
□Inkscape

16/34
Formatos y herramientas vectorialesFormatos y herramientas vectoriales
Las herramientas comerciales se basan en
formatos propios y la portabilidad es limitada.
• Corel Draw, Autocad
• MS Visio, Flowcharter
• Postscript, PDF
• Adobe Flash
Windows Metafiles
• MS Draw / MS Office.
• Muy extendido.
• Formato propietario no estándar.
• Conflictividad incluso entre versiones propias.
ODF: Estándar ISO para ofimática
• Compatibilidad entre aplicaciones ofimáticas
• OpenOffice, KOffice, etc.
□Introducción
□Formatos
□Bitmap
■Vectoriales
□Inkscape

17/34
Ejemplo: Diagrama de redEjemplo: Diagrama de red
□Introducción
□Formatos
□Bitmap
■Vectoriales
□Inkscape

18/34
SVGSVG
Solución diseñada para la web por el Web
Consortium W3C.
Extensión de XML.
• Representación en ficheros de texto.
• Analogía con HTML.
• Facilidad para herramientas de transformación
automáticas (Ej.: traducción, estilos).
Estándar abierto, libre.
Lenta adopción.
• Reconocido por navegadores Mozilla.
• Formato adoptado por Wikipedia para diagramas.
Inkscape: herramienta libre GNU-GPL.
• Prestaciones avanzadas.
• Fácil exportación a PNG.
□Introducción
□Formatos
□Bitmap
■Vectoriales
□Inkscape

19/34
Herramientas en redHerramientas en red
• draw.io: XML propietario, SVG.
https://www.draw.io/
□Introducción
□Formatos
□Bitmap
■Vectoriales
□Inkscape

Formatos de referenciaFormatos de referencia
• PNG
• JPEG
• SVG

21/34
Inkscape: el entornoInkscape: el entorno
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

22/34
Inkscape: elementosInkscape: elementos
Trayectos
• Líneas poligonales abiertas o cerradas
• Curvas de Bezier
• Admiten edición fina, vértice a vértice
Objetos
• Modelos predefinidos: rectángulo, elipse, estrella...
• Funcionalidad extra. Ej.: esquinas redondeadas
• Transformables en trayectos
Texto
• Propiedades habituales: fuente, tamaño, etc.
• Adaptables a trayectos
• Transformables en trayectos
Opción de unir, dividir, crear grupos...
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

23/34
Inkscape: propiedadesInkscape: propiedades
Relleno / trazo
• Color
• Degradado
• Patrones
• Transparencia
• Difuminado
Alineación y distribución
• Objetos y trayectos
• Vértices
• Relativo a la selección, documento
Escalado de elementos
• Extensible a trazos, curvaturas o degradados
• Bloqueo opcional de proporciones
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

24/34
Inkscape: opciones avanzadasInkscape: opciones avanzadas
Gradientes
Filtros
Patrones repetidos
Edición directa de XML
Enlaces
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

25/34
Propuesta 1: trazadoPropuesta 1: trazado
Dibujar una línea a mano alzada
Añadir nodos para los vértices
Arrastrar los segmentos para darles curvatura
Añadir texto y elipses para los ojos
Alinear, escalar...
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

26/34
Propuesta 2: color y superposiciónPropuesta 2: color y superposición
Trazar y acondicionar las figuras
Rellenar con colores adecuados
Controlar el orden de superposición
Probar transparencia y difuminados
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

27/34
Propuesta 3: calcoPropuesta 3: calco
Abrir o importar el plano del metro de Lisboa
• Mapa de bits
Crear una capa nueva para dibujar
Colocar la capa original en el fondo
Ajustar transparencia
Dibujar
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

28/34
Propuesta 4: digitalizarPropuesta 4: digitalizar
Importar imagen de puntos
Vectorizar mapa de bits
• Probar blanco y negro: umbrales
• Probar color: superposición de capas
Colorear zonas
• Analizar el efecto del relleno
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

29/34
Propuesta 5: crear logosPropuesta 5: crear logos
Ocultar capas no deseadas
• Elegir entre el texto o el trazado si no se dispone de las
fuentes Truetype indicadas.
Exportar a mapa de bits
• Controlar tamaños
Opcional: procesar en Gimp
• Reducir gama de colores
• Escalar imagen para cambiar resolución
Importar archivo desde el procesador de textos
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

30/34
Propuesta 6: personalizar diseñosPropuesta 6: personalizar diseños
Obtener algún dibujo de Wikipedia
• Se almacenan todos en Wikimedia Commons.
• SVG es el formato preferido para dibujos.
• Hay que descargar el original, no los bitmap.
Editar con Inkscape
• Se pueden desagrupar y extraer detalles.
• Se debe ajustar el tamaño final deseado.
– 100 dpi para pantalla / 300/600 dpi para impresión
• Solo exporta a PNG.
– Se puede recurrir a Gimp para ajustes o cambio de formato.
Importar archivo desde el procesador de textos
• Ajustar «como carácter» habitualmente.
• ¡No «tirar de la esquina» para cambiar tamaño!
□Introducción
□Formatos
□Bitmap
□Vectoriales
■Inkscape

Actividad I: Diseño gráficoActividad I: Diseño gráfico
Practicar a retocar y combinar imágenes de distintos
tipo con Gimp, Inkscape y acaso otras aplicaciones
comerciales o técnicas como Photoshop o Autocad;
Incluso con simples capturas de pantalla:
• Recorte y escalado de imágenes para
documentos impresos, p.ej.: 300dpi.
• Rotulación de fotos o capturas.
• Esquemas, diagramas de bloques o mapas
conceptuales.

ReferenciasReferencias
Curso de Inkscape: Logo a Logo
Joaquín Herrera Goás, Creative Commons
http://joaclintistgud.wordpress.com/2011/04/14/inkscape-logo-a-logo-2ª-edicion/
Inkscape en español
Fran Delgado, YouTube
https://www.youtube.com/view_play_list?p=PLtUw1l1pIpysKMOf45QNXXW6UckAtL3aM
Bibliografía actualizada en del.icio.us:
https://delicious.com/dhmartin/inkscape

LicenciaLicencia
Este material está disponible bajo una
Licencia Creative Commons, CC BY-NC-SA 4.0
http://creativecommons.org/licenses/by-nc-sa/4.0/deed.es_ES

¿Dudas o cuestiones?¿Dudas o cuestiones?
@dhmartin

Gráficos en el aula

Recomendados

Recomendados

Más contenido relacionado

Similar a Gráficos en el aula

Similar a Gráficos en el aula (20)

Más de David Martin

Más de David Martin (16)

Último

Último (20)

Gráficos en el aula