SlideShare una empresa de Scribd logo
1 de 38
Todo lo que hagas debe seguir una
maquetación coherente. La simetría,
el orden y la compensación de los
espacios le da coherencia al diseño y
ayuda al lector a situar
rápidamente las distintas partes del
contenido
Ninguna planificación previa, el
resultado final tendrá mal aspecto
y hará que el lector se pierda con
facilidad en un caos de gráficos y
texto.
LA
ESTRUCTUTA
Existen muchas páginas donde se pueden
descargar layout o grid sobre los que
diseñar. Muchos editores de HTML
llevan incorporadas plantillas que
podemos utilizar.
Si vas a diseñar con programas como
Photoshop, Gimp, Inkscape, Illustrator
o Freehand te puedes bajar grids en
todos los formatos.
Estas plantillas para maquetación se
pueden aplicar a cualquier diseño que
hagas ya sea una página web, un flash, un
pdf, etc.
PLANTILLAS
No uses imágenes de fondo, sólo
colores planos. Estás haciendo una
actividad didáctica en la que lo
importante es el contenido. Los
fondos de imágenes repetidas o
grandes imágenes dificultan la
visualización del texto además de
que añaden un peso considerable.
EL FONDO
Un consejo sencillo, no pongas en
una pantalla una combinación de
colores que no llevarías puesta.
Buscar la paleta de
colores procura que unos
sean claros y otros oscuros.
Utiliza los claros para los
fondos y los oscuros para el
texto pero ante todo asegúrate de
que dispones de suficientes
colores para crear
varios contrastes.
LOS COLORES
Crea una paleta de 3 a 5-6
colores y construye todo el
material sobre esos colores.
Para ayudarte en la elección
hay herramientas
como kuler.adobe.com donde
puedes crear tus propias
paletas de colores y buscar
dentro de las que ya han
creado otros usuarios.
EJEMPLOS
La tipografía es un elemento muy
importante del diseño.
Lo primero que debes tener en cuenta es que
si tu actividad se va a ver en un navegador
tienes que usar una serie de fuentes
determinadas. Si usas un tipo de fuente que
el usuario no tiene instalada la sustituirá
por la fuente por defecto del navegador y
tu diseño ya no aparecerá tal como lo
hiciste.
NOTA: nunca uses la fuente “Comic sans” Ya
LA
TIPOGRAFIA
GIFS ANIMADOS:
Los niños juegan en la consola de juegos
en 3D desde que nacieron. Han visto
explosiones y efectos especiales de todo
tipo en cine y televisión. No los vas a
impresionar con un Gifs animado de un
perro bailando. Además, no tiene ninguna
finalidad didáctica. Totalmente
prohibidos los Gifs animados.
LAS
IMAGENES
IMÁGENES CON
TRANSPARENCIA
Si vas a usar este tipo de imágenes
utiliza imágenes PNG en lugar de
GIF. Los Gifs dejan un borde
blanco alrededor de la imagen
que queda fatal. Si tu fondo no es
blanco utiliza imágenes png y esos
molestos píxeles no aparecerán.
PESO DE LAS IMÁGENES
Procura que tus imágenes pesen lo
menos posible. Esto ralentizan la
carga y muchas veces no tiene
justificación alguna (las vas a poner
en un tamaño pequeño y no necesitas
una gran resolución para que se vean
bien). Tampoco debes agrandar las
fotos pues éstas quedan pixeladas al
aumentar de tamaño dificultando la
visión y dando un mal aspecto a tu
LA MUSIQUILLA DE FONDO
Esto es una carga innecesaria para una
página y además de distraer molesta.
Hay que eliminar todo aquello que no
sea necesario para la actividad. No hay
que adornar.
MULTIMEDIA
FLASH
De esto se hablara más
profundamente en un post
pero como adelanto te
aconsejo que lo evites
siempre que puedas. No es
accesible y requiere de
mucho trabajo, no merece
conocer el tema sobre el cual vas a
redactar y los puntos esenciales que
pueden interesar a tu lector potencial
utilizar párrafos cortos y directos
analizar el estilo de redacción que vas
a utilizar teniendo en cuenta quien lo va
a leer
reforzar tu mensaje con todas las
herramientas a tu alcance
innovar para captar la atención y
PAUTAS
BASICAS
El visitante tiene que leer y entender
el mensaje en cuestión de segundos.
Como ya sabéis los usuarios no leen
palabra por palabra, sino que
escanean el texto. Aunque hay
excepciones, es muy probable que un
texto largo sea desestimado de
forma inmediata.
TEXTOS CORTOS Y
CONCISOS
CONOCE A QUIEN VA DIRIGIDO
EL TRABAJO:
CONOSCAMOS EL TIPO DE
LENGUAJE POR QUE NO ES LO
MISMO DIRIGIRNOS A
JOVENES QUE A ADULTOS O A
NIÑOS.
DESTACA ENTRE
LOS DEMÁS
Nota: utiliza slogan y frases
impactantes para atraer la
atención del lector.
No puede estar más claro, ¿verdad?
Hay que planificar que es lo que se
va a escribir, donde irá colocado y a
quién va dirigido.
Una vez publicados los textos es muy
importante continuar haciendo test
para comprobar su funcionamiento y
asegurarnos que cumplen con la
misión para la que fueron
PLANIFICA,
COMPRUEBA Y
MODIFICA
El alumno como protagonista
(explora, descubre,
experimenta) El docente, tutor
como motivador (anima,
estimula, pregunta).
LOS CONTENIDOS
NO ENSEÑAN
SOLOS
Promover el “aprender
haciendo”- Enseñar a partir de
historias, casos y ejemplos-
Poner a disposición la
información relevante en el
momento en que se necesita
Generar motivación e interés
por la materia- Permitirle al
¿QUÉ ROLES
JUEGAN LOS
CONTENIDOS?
Permitir al estudiante
controlar su proceso
de aprendizaje a su
propio ritmo.
Procurar que la
tecnología se mantenga
“invisible”: lo que ayuda
a aprender son los
contenidos
1 Es multimedia
2 Es hipertextual
3 No es cerrado
4 reutilizado, actualizado
adaptado a costo muy bajo.
MATERIALES
DIGITALES
Comprende todo tipo de
archivo digital: texto, página
web, audio, video, etc.- Puede
ser incorporado y combinado
en cualquier unidad o módulo
de un curso- Es una unidad de
contenido reconocible,
estandarizada e
¿OBJETO DE
APRENDIZAJE?
Es recomendable almacenar los
contenidos en un formato que puede ser
abierto en diferentes sistemas sin
necesidad de convertirlos a otros
formatos- No exigir a los estudiantes
usar aplicaciones y herramientas que no
son libres o que son inaccesibles para
leer el formato de los materiales-
Priorizar los formatos abiertos (por
ejemplo, documentos PDF o RTF)- En
aplicaciones y actividades: priorizar los
formatos que corren en la web y que son
FORMATOS
Copyrigth: todo lo que
publicamos tiene por defecto
esta licencia- Distinto tipo de
licencias abiertas: Creative
Commons (para especificar
diversas condiciones de uso),
GNU (software libre), etc.-
OPCIONES
En lo posible, usar contenido original
o contenido de terceros seleccionado
y remezclado por nosotros.- Copiar,
pegar y reutilizar es válido, siempre
con creatividad, credibilidad y
sentido crítico- Citar, usar enlaces,
crear bibliografías y referencias-
Buscar y utilizar contenido bajo
licencias Creative Commons o de
dominio público- Incrustar contenido
RECOMENDACIO
NES
Incentivar a los
docentes en la creación
de contenidos digitales,
en las diferentes áreas
mediante herramientas
gratuitas y de fácil
manejo, útiles para
integrar las Tecnologías
Tiene características especial que
lo diferencian del material
didáctico tradicional: Es
multimedia: Combina texto,
imagen, audio, video). Necesitamos
múltiples dispositivos y
herramientas para conseguir el
material y editarlo. Es
hipertextual. Está vinculado a
EL MATERIAL
DIGITAL
ACTIVIDADES DE LA
DIGITALIZACIÓN
Para elaborar contenidos digitales,
se necesitan varias herramientas
combinadas. Las imprescindibles son:
Procesador de texto
Programa de presentaciones
Editor de fotos e imágenes
Editores sencillos de audio y video
Convertidor a formato PDF, para
publicarlo en un formato accesible.
ALGUNAS HERRAMIENTAS
HABITUALES
Texto conciso y escaneable
Lenguaje neutral: usar listas,
diagramas, imágenes
Pirámide invertida: Comenzar
por lo más importante y
terminar con el contexto y lo
complementario
Aprovechar las ventajas del
hipertexto: Como Glosarios,
bibliografía, indices.
DOCUMENTOS DE
TEXTO
Las presentaciones en e-learning: Las
presentaciones pueden combinar
texto, imagen, audio, video y
animación, por lo que son una
herramienta de comunicación
versátil y potente.
Si se va a usar en una web
conferencia o videoconferencia, se
debe usar poco texto, fondos claros
y letras oscuras.
Si se trata de un show de imágenes y
PRESENTACIO
NES
Diseño web coherente

Más contenido relacionado

La actualidad más candente

Video tutorial
Video tutorialVideo tutorial
Video tutorialZullyDBF
 
recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital Seebas Vargas
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101DanieO96
 
Estrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitalesEstrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitalesSeebas Vargas
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitaleslifecoca
 
¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicaciones¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicacionesAlejandra Chacón
 
Herramientas de Google Nyree
Herramientas de Google NyreeHerramientas de Google Nyree
Herramientas de Google NyreePericles12
 
Cómo crear un power point como video
Cómo crear un power point como videoCómo crear un power point como video
Cómo crear un power point como videolaugommez
 
Páginas recomendadas para hacer presentaciones geniales
Páginas recomendadas para hacer presentaciones genialesPáginas recomendadas para hacer presentaciones geniales
Páginas recomendadas para hacer presentaciones genialesDalia Vidales
 
Herramienta powtoon
Herramienta powtoonHerramienta powtoon
Herramienta powtooncmfrancisca
 

La actualidad más candente (17)

Video tutorial
Video tutorialVideo tutorial
Video tutorial
 
Proceso para elaborar un videotutorial
Proceso para elaborar un videotutorialProceso para elaborar un videotutorial
Proceso para elaborar un videotutorial
 
recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitales
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101
 
Mi portafolio
Mi portafolioMi portafolio
Mi portafolio
 
Estrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitalesEstrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitales
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitales
 
¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicaciones¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicaciones
 
Herramientas de Google Nyree
Herramientas de Google NyreeHerramientas de Google Nyree
Herramientas de Google Nyree
 
Presentaciones con Prezi
Presentaciones con PreziPresentaciones con Prezi
Presentaciones con Prezi
 
Cómo crear un power point como video
Cómo crear un power point como videoCómo crear un power point como video
Cómo crear un power point como video
 
Powtoon diapositivas
Powtoon diapositivasPowtoon diapositivas
Powtoon diapositivas
 
Páginas recomendadas para hacer presentaciones geniales
Páginas recomendadas para hacer presentaciones genialesPáginas recomendadas para hacer presentaciones geniales
Páginas recomendadas para hacer presentaciones geniales
 
Practica 2
Practica 2Practica 2
Practica 2
 
El uso de youtube
El uso de youtubeEl uso de youtube
El uso de youtube
 
Herramienta powtoon
Herramienta powtoonHerramienta powtoon
Herramienta powtoon
 

Similar a Diseño web coherente

Diseño grafico de recursos educativos digitales
Diseño grafico de recursos educativos digitalesDiseño grafico de recursos educativos digitales
Diseño grafico de recursos educativos digitaleslorenacasta
 
Consejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativosConsejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativoskateclaros
 
Consejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativosConsejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativoskateclaros
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALES98031563151
 
COMO HACER UN CONTENIDO DIGITAL
COMO HACER UN CONTENIDO DIGITALCOMO HACER UN CONTENIDO DIGITAL
COMO HACER UN CONTENIDO DIGITAL98031563151
 
Concejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitalesConcejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitalesTania Hurtado Hernandez
 
CONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVOCONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVODanny Tamayo
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALESDanny Tamayo
 
Conejos para elaborar un contenido digital
Conejos para elaborar un contenido digitalConejos para elaborar un contenido digital
Conejos para elaborar un contenido digitalYisseth Buchelly
 
Consejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativosConsejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativosnormal superior neiva
 
Consejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativosConsejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativosnormal superior neiva
 
Recomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digitalRecomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digitalMario Fierro P
 
Recomendaciones de un contenido digital
Recomendaciones de un contenido digitalRecomendaciones de un contenido digital
Recomendaciones de un contenido digitalSeebas Vargas
 
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALTIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALKarito Muñoz
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101DanieO96
 
contenido digitales
contenido digitalescontenido digitales
contenido digitales8758882
 
RECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITAL
RECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITALRECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITAL
RECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITALYesica Espinosa
 

Similar a Diseño web coherente (20)

Diseño grafico de recursos educativos digitales
Diseño grafico de recursos educativos digitalesDiseño grafico de recursos educativos digitales
Diseño grafico de recursos educativos digitales
 
Consejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativosConsejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativos
 
Consejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativosConsejos graficos para el diseño de recursos educativos
Consejos graficos para el diseño de recursos educativos
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALES
 
COMO HACER UN CONTENIDO DIGITAL
COMO HACER UN CONTENIDO DIGITALCOMO HACER UN CONTENIDO DIGITAL
COMO HACER UN CONTENIDO DIGITAL
 
Concejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitalesConcejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitales
 
CONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVOCONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVO
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALES
 
Conejos para elaborar un contenido digital
Conejos para elaborar un contenido digitalConejos para elaborar un contenido digital
Conejos para elaborar un contenido digital
 
Consejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativosConsejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativos
 
Consejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativosConsejos gráficos para el diseño de recursos educativos
Consejos gráficos para el diseño de recursos educativos
 
Recomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digitalRecomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digital
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALES CONTENIDOS DIGITALES
CONTENIDOS DIGITALES
 
contenidos digitales
contenidos digitalescontenidos digitales
contenidos digitales
 
Recomendaciones de un contenido digital
Recomendaciones de un contenido digitalRecomendaciones de un contenido digital
Recomendaciones de un contenido digital
 
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALTIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101
 
contenido digitales
contenido digitalescontenido digitales
contenido digitales
 
RECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITAL
RECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITALRECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITAL
RECOMENDACIONES PARA ELABORAR UN CONTENIDO DIGITAL
 
contenidos digitales
contenidos digitales contenidos digitales
contenidos digitales
 

Más de Maryory Villalobo Pascuas (12)

Mapa mntal
Mapa mntalMapa mntal
Mapa mntal
 
Deporte
DeporteDeporte
Deporte
 
Dropbox
DropboxDropbox
Dropbox
 
Presentación1
Presentación1Presentación1
Presentación1
 
Drive
DriveDrive
Drive
 
Presentación1
Presentación1Presentación1
Presentación1
 
Consejos para aprender hacer trabajos educativos
Consejos para aprender hacer trabajos educativosConsejos para aprender hacer trabajos educativos
Consejos para aprender hacer trabajos educativos
 
Filosofia de la ciencia
Filosofia de la cienciaFilosofia de la ciencia
Filosofia de la ciencia
 
La rayuela
La rayuelaLa rayuela
La rayuela
 
Nariño
NariñoNariño
Nariño
 
Derechos de autor
Derechos de autorDerechos de autor
Derechos de autor
 
Derechos de autor
Derechos de autorDerechos de autor
Derechos de autor
 

Último

BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................ScarletMedina4
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Gonella
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FJulio Lozano
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).hebegris04
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Carol Andrea Eraso Guerrero
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacionviviantorres91
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.monthuerta17
 
Programa sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdfPrograma sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdfHannyDenissePinedaOr
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectosTrishGutirrez
 
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)jlorentemartos
 
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxSecuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxNataliaGonzalez619348
 
Cuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdfCuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdflizcortes48
 
Buenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaBuenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaMarco Camacho
 
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJODIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJOLeninCariMogrovejo
 
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docxMagalyDacostaPea
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejormrcrmnrojasgarcia
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdfEDNAMONICARUIZNIETO
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxFabianValenciaJabo
 
historieta materia de ecologías producto
historieta materia de ecologías productohistorieta materia de ecologías producto
historieta materia de ecologías productommartinezmarquez30
 

Último (20)

BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
 
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
HISTORIETA: AVENTURAS VERDES (ECOLOGÍA).
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacion
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.
 
Acuerdo segundo periodo - Grado Noveno.pptx
Acuerdo segundo periodo - Grado Noveno.pptxAcuerdo segundo periodo - Grado Noveno.pptx
Acuerdo segundo periodo - Grado Noveno.pptx
 
Programa sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdfPrograma sintetico fase 2 - Preescolar.pdf
Programa sintetico fase 2 - Preescolar.pdf
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos
 
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
TEMA 13. LOS GOBIERNOS DEMOCRÁTICOS (1982-2018)
 
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxSecuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
 
Cuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdfCuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdf
 
Buenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria FarmaceuticaBuenas Practicas de Manufactura para Industria Farmaceutica
Buenas Practicas de Manufactura para Industria Farmaceutica
 
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJODIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
DIDÁCTICA DE LA EDUCACIÓN SUPERIOR- DR LENIN CARI MOGROVEJO
 
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejor
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
 
historieta materia de ecologías producto
historieta materia de ecologías productohistorieta materia de ecologías producto
historieta materia de ecologías producto
 

Diseño web coherente

  • 1.
  • 2. Todo lo que hagas debe seguir una maquetación coherente. La simetría, el orden y la compensación de los espacios le da coherencia al diseño y ayuda al lector a situar rápidamente las distintas partes del contenido Ninguna planificación previa, el resultado final tendrá mal aspecto y hará que el lector se pierda con facilidad en un caos de gráficos y texto. LA ESTRUCTUTA
  • 3. Existen muchas páginas donde se pueden descargar layout o grid sobre los que diseñar. Muchos editores de HTML llevan incorporadas plantillas que podemos utilizar. Si vas a diseñar con programas como Photoshop, Gimp, Inkscape, Illustrator o Freehand te puedes bajar grids en todos los formatos. Estas plantillas para maquetación se pueden aplicar a cualquier diseño que hagas ya sea una página web, un flash, un pdf, etc. PLANTILLAS
  • 4. No uses imágenes de fondo, sólo colores planos. Estás haciendo una actividad didáctica en la que lo importante es el contenido. Los fondos de imágenes repetidas o grandes imágenes dificultan la visualización del texto además de que añaden un peso considerable. EL FONDO
  • 5. Un consejo sencillo, no pongas en una pantalla una combinación de colores que no llevarías puesta. Buscar la paleta de colores procura que unos sean claros y otros oscuros. Utiliza los claros para los fondos y los oscuros para el texto pero ante todo asegúrate de que dispones de suficientes colores para crear varios contrastes. LOS COLORES
  • 6. Crea una paleta de 3 a 5-6 colores y construye todo el material sobre esos colores. Para ayudarte en la elección hay herramientas como kuler.adobe.com donde puedes crear tus propias paletas de colores y buscar dentro de las que ya han creado otros usuarios. EJEMPLOS
  • 7. La tipografía es un elemento muy importante del diseño. Lo primero que debes tener en cuenta es que si tu actividad se va a ver en un navegador tienes que usar una serie de fuentes determinadas. Si usas un tipo de fuente que el usuario no tiene instalada la sustituirá por la fuente por defecto del navegador y tu diseño ya no aparecerá tal como lo hiciste. NOTA: nunca uses la fuente “Comic sans” Ya LA TIPOGRAFIA
  • 8. GIFS ANIMADOS: Los niños juegan en la consola de juegos en 3D desde que nacieron. Han visto explosiones y efectos especiales de todo tipo en cine y televisión. No los vas a impresionar con un Gifs animado de un perro bailando. Además, no tiene ninguna finalidad didáctica. Totalmente prohibidos los Gifs animados. LAS IMAGENES
  • 9. IMÁGENES CON TRANSPARENCIA Si vas a usar este tipo de imágenes utiliza imágenes PNG en lugar de GIF. Los Gifs dejan un borde blanco alrededor de la imagen que queda fatal. Si tu fondo no es blanco utiliza imágenes png y esos molestos píxeles no aparecerán.
  • 10. PESO DE LAS IMÁGENES Procura que tus imágenes pesen lo menos posible. Esto ralentizan la carga y muchas veces no tiene justificación alguna (las vas a poner en un tamaño pequeño y no necesitas una gran resolución para que se vean bien). Tampoco debes agrandar las fotos pues éstas quedan pixeladas al aumentar de tamaño dificultando la visión y dando un mal aspecto a tu
  • 11. LA MUSIQUILLA DE FONDO Esto es una carga innecesaria para una página y además de distraer molesta. Hay que eliminar todo aquello que no sea necesario para la actividad. No hay que adornar. MULTIMEDIA
  • 12. FLASH De esto se hablara más profundamente en un post pero como adelanto te aconsejo que lo evites siempre que puedas. No es accesible y requiere de mucho trabajo, no merece
  • 13.
  • 14.
  • 15. conocer el tema sobre el cual vas a redactar y los puntos esenciales que pueden interesar a tu lector potencial utilizar párrafos cortos y directos analizar el estilo de redacción que vas a utilizar teniendo en cuenta quien lo va a leer reforzar tu mensaje con todas las herramientas a tu alcance innovar para captar la atención y PAUTAS BASICAS
  • 16. El visitante tiene que leer y entender el mensaje en cuestión de segundos. Como ya sabéis los usuarios no leen palabra por palabra, sino que escanean el texto. Aunque hay excepciones, es muy probable que un texto largo sea desestimado de forma inmediata. TEXTOS CORTOS Y CONCISOS
  • 17. CONOCE A QUIEN VA DIRIGIDO EL TRABAJO: CONOSCAMOS EL TIPO DE LENGUAJE POR QUE NO ES LO MISMO DIRIGIRNOS A JOVENES QUE A ADULTOS O A NIÑOS.
  • 18.
  • 19. DESTACA ENTRE LOS DEMÁS Nota: utiliza slogan y frases impactantes para atraer la atención del lector.
  • 20. No puede estar más claro, ¿verdad? Hay que planificar que es lo que se va a escribir, donde irá colocado y a quién va dirigido. Una vez publicados los textos es muy importante continuar haciendo test para comprobar su funcionamiento y asegurarnos que cumplen con la misión para la que fueron PLANIFICA, COMPRUEBA Y MODIFICA
  • 21. El alumno como protagonista (explora, descubre, experimenta) El docente, tutor como motivador (anima, estimula, pregunta). LOS CONTENIDOS NO ENSEÑAN SOLOS
  • 22. Promover el “aprender haciendo”- Enseñar a partir de historias, casos y ejemplos- Poner a disposición la información relevante en el momento en que se necesita Generar motivación e interés por la materia- Permitirle al ¿QUÉ ROLES JUEGAN LOS CONTENIDOS?
  • 23. Permitir al estudiante controlar su proceso de aprendizaje a su propio ritmo. Procurar que la tecnología se mantenga “invisible”: lo que ayuda a aprender son los contenidos
  • 24. 1 Es multimedia 2 Es hipertextual 3 No es cerrado 4 reutilizado, actualizado adaptado a costo muy bajo. MATERIALES DIGITALES
  • 25. Comprende todo tipo de archivo digital: texto, página web, audio, video, etc.- Puede ser incorporado y combinado en cualquier unidad o módulo de un curso- Es una unidad de contenido reconocible, estandarizada e ¿OBJETO DE APRENDIZAJE?
  • 26. Es recomendable almacenar los contenidos en un formato que puede ser abierto en diferentes sistemas sin necesidad de convertirlos a otros formatos- No exigir a los estudiantes usar aplicaciones y herramientas que no son libres o que son inaccesibles para leer el formato de los materiales- Priorizar los formatos abiertos (por ejemplo, documentos PDF o RTF)- En aplicaciones y actividades: priorizar los formatos que corren en la web y que son FORMATOS
  • 27. Copyrigth: todo lo que publicamos tiene por defecto esta licencia- Distinto tipo de licencias abiertas: Creative Commons (para especificar diversas condiciones de uso), GNU (software libre), etc.- OPCIONES
  • 28. En lo posible, usar contenido original o contenido de terceros seleccionado y remezclado por nosotros.- Copiar, pegar y reutilizar es válido, siempre con creatividad, credibilidad y sentido crítico- Citar, usar enlaces, crear bibliografías y referencias- Buscar y utilizar contenido bajo licencias Creative Commons o de dominio público- Incrustar contenido RECOMENDACIO NES
  • 29.
  • 30.
  • 31. Incentivar a los docentes en la creación de contenidos digitales, en las diferentes áreas mediante herramientas gratuitas y de fácil manejo, útiles para integrar las Tecnologías
  • 32.
  • 33. Tiene características especial que lo diferencian del material didáctico tradicional: Es multimedia: Combina texto, imagen, audio, video). Necesitamos múltiples dispositivos y herramientas para conseguir el material y editarlo. Es hipertextual. Está vinculado a EL MATERIAL DIGITAL
  • 35. Para elaborar contenidos digitales, se necesitan varias herramientas combinadas. Las imprescindibles son: Procesador de texto Programa de presentaciones Editor de fotos e imágenes Editores sencillos de audio y video Convertidor a formato PDF, para publicarlo en un formato accesible. ALGUNAS HERRAMIENTAS HABITUALES
  • 36. Texto conciso y escaneable Lenguaje neutral: usar listas, diagramas, imágenes Pirámide invertida: Comenzar por lo más importante y terminar con el contexto y lo complementario Aprovechar las ventajas del hipertexto: Como Glosarios, bibliografía, indices. DOCUMENTOS DE TEXTO
  • 37. Las presentaciones en e-learning: Las presentaciones pueden combinar texto, imagen, audio, video y animación, por lo que son una herramienta de comunicación versátil y potente. Si se va a usar en una web conferencia o videoconferencia, se debe usar poco texto, fondos claros y letras oscuras. Si se trata de un show de imágenes y PRESENTACIO NES