Diseño Web En qué consiste el diseño web personalizado. (2018, 4 diciembre). [Ilustración]. diseño web. https://tactic-center.com/wp-content/uploads/2018/04/003_Blog_IMG.jpg
Title
¿Qué es el diseño web educativo? Se conceptualiza como aqu ellos espacios o páginas en la www, que ofrecen: recursos, información y materiales relacionados con la educación ¿Qué características debe tener una página web?
17 sitios web con recursos y herramientas digitales para el aula. (s. f.). [Ilustración]. Ejemplo sitio web. https://static-cse.canva.com/blob/208835/20plataformas-profesores.png
Es Es una una web web de de interés interés educativo, educativo, deseñado deseñado con con un objetivo pedagógico. un objetivo pedagógico. Busca Busca facilitar facilitar aprendizaje aprendizaje o o acceso acceso a a recursos recursos didácticos. didácticos. Proporciona Proporciona información, información, comunicación comunicación y y formación formación convirtiéndose convirtiéndose en en un un espacio espacio virtual virtual de de trabajo trabajo individual y colaborativo individual y colaborativo Seguridad. Seguridad. Entre otras Entre otras 2
Diseño pedagógico Objetivo: establecer los propósitos de su elaboración y su utilidad educativa, Lograr que los alumnos usen el ordenador como una herramienta más con el fin de obtener información, adquirir conocimientos, comprobar los ya adquiridos o ampliar parcelas de especial interés
¿Por qué y para que se elabora la pagina web? •
•
Para presentar la imagen y actividades de la institución educativa ante la comunidad educativa y el contexto local. Para que la comunidad educativa accedan a recursos, actividades para los procesos de enseñanza y aprendizaje.
Público al que va dirigido Principalmente a los estudiantes pero Principalmente a los estudiantes pero también a los docentes, directivos, también a los docentes, directivos, administrativos, padres de familia, administrativos, padres de familia, egresados y demás personas que egresados y demás personas que hacen parte de la institución. hacen parte de la institución. 3
¿Qué es el diseño web (y cómo hacerlo bien)? (s. f.) [Ilustración]. Intelligenta. https://intelligenta.studio/wpcontent/uploads/2019/04/mockup-dise %C3%B1o-web-1024x717.jpeg
Contenido que debe tener un diseño web pedagógico Diseño Actualización Información de contacto Directorio de personal Calendario Documentos Boletín Filosofía de la educación Oportunidad es de interacción Recursos
4
Delgado, H. (2021, 8 junio). Elementos básicos de un sitio web y sus partes [Ilustración]. Contenido de un sitio web. https://disenowebakus.net/imagenes/articulos/ele mentos-sitio-web.jpg
Diseño Estructural Estructura general de la web
Cabecera o header Logo de la institución El menú de navegación Un cuadro de búsqueda Una pequeña descripción de la web
Cuerpo Cuerpo oo body body Alberga el Alberga el contenido contenido principal principal de de tu tu página. página. Contacto Contacto Productos Productos yy servicios servicios Blog Blog
Cabecera Cabecera oo header header Menú Menúsimplificado simplificado Información Informaciónde decontacto contacto Botones Botonesde deredes redessociales sociales Logo Logode dela laempresa empresa Enlace Enlaceaala lapolítica políticade de privacidad privacidad 5
Sistema de navegación son los elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que componen el sitio web.
Características Establecer un modo de ir de un sitio a Establecer un modo de ir de un sitio a otro dentro de la web. otro dentro de la web. Comunicar al usuario la relación entre Comunicar al usuario la relación entre el el contenido contenido que que está está visualizando visualizando y y la navegación del sitio. la navegación del sitio. Reflejar Reflejar la la arquitectura arquitectura del del sitio sitio que que subyace al sistema de navegación. subyace al sistema de navegación. Permitir Permitir volver volver a a la la página página de de inicio inicio rápidamente. rápidamente. Debe Debe tener tener un un corsé corsé para para el el crecimiento del site crecimiento del site
Navegación web: Cómo optimizar la estructura de tu web. (s. f.). [Ilustración]. ionos. https://www.ionos.es/digitalguide/fileadmin/Digital Guide/Teaser/website-navigation-t.jpg
Elementos de navegación •• Menú y Sub menús de secciones o Menú y Sub menús de secciones o páginas en las que se divide el páginas en las que se divide el sitio web. sitio web. •• Breadcrumb (migas de pan) Breadcrumb (migas de pan) elementos de información sobre elementos de información sobre nuestra localización dentro del nuestra localización dentro del sitio. sitio. Ilustración de botones de web de vector conjunto de barra de. . . (2018, 3 julio). [Ilustracón]. istockphoto. https://media.istockphoto.com/vectors/vector-webbuttons-navigation-bar-set-menu-element-labels-for6 website-vector-id991037812
•• Elementos de regreso a la página Elementos de regreso a la página de inicio o home. de inicio o home.
Diseño Interfaz
Se refiere a los aspectos de la visualización de una página web
¿Cómo se deben ver las páginas? •
Definir las estructuras de las paginas Los elementos gráficos deben enmarcarse a los objetivos y aspectos culturales del publico. No se debe decorar o adornar con elementos que distorsionan el mensaje. La página debe ser fácil de cargar y fácil de leer. Establecer guías visuales. La estética no debe adecuarse a los gustos de los responsables.
•
• • • •
Composición de los elementos Texto: Texto: letras letras fácilmente fácilmente legibles, legibles, tamaño tamaño (n°12). (n°12). Fondos: Fondos: contraste contraste adecuado adecuado para para legibilidad legibilidad de de los los textos, textos, no no muchas muchas tramas, tramas, fondos fondos como como elemento elemento de de orientación orientación yy comunicación. comunicación.
7
Creación de páginas con frames. (s. f.). [Ilustración]. ibiblio. https://www.ibiblio.org/pub/Linux/docs/LuCaS/ManualesLuCAS/doc-curso-html/doc-curso-html/img/fig8-07.png
Imágenes: Imágenes: deben deben cumplir cumplir una una función, función, tamaño tamaño proporcional, proporcional, tamaño tamaño en en bytes. bytes. Tablas: Tablas: no no ajustar ajustar aa los los márgenes, márgenes, aprovechar aprovechar para para ordenar ordenar el el diseño. diseño. Marcos: Marcos: proporcionar proporcionar una una simetría simetría adecuada adecuada
Document Title
OTRAS CONSIDERACIONES Compatibilidad con los navegadores. Compatibilidad de resolución. Facilidad de navegación. Rapidez al cargar páginas graficas Considerar las actualizaciones.
8