Página web. PÁGINA WEB – VERSIÓN MÓVIL PÁGINA WEB – VERSIÓN COMPUTADOR.
Unidad 4 Creación de Página Webprepaenlinea.sep.gob.mx/wp-content/uploads/...Web... · Objetivo:...
Transcript of Unidad 4 Creación de Página Webprepaenlinea.sep.gob.mx/wp-content/uploads/...Web... · Objetivo:...
Unidad 4Creación de Página Web
Paulina López Barrios27 mayo 19
Sesión 5
Objetivo: Crear una página web como un recurso educativo para su uso en la práctica tutorial.
Elaboración de una página web para la práctica tutorial paso a paso.Actividad independiente:
Elaboración de una página web para la práctica tutorial paso a paso.
Páginas Web
Paulina López Barrios20 mayo 19
Wireframe (diseño web)
• Un wireframe para un sitio web,
también conocido como un
esquema de página o plano de
pantalla, es una guía visual que
representa el esqueleto o estructura
visual de un sitio web.
• El wireframe esquematiza el diseño
de página u ordenamiento del
contenido del sitio web, incluyendo
elementos de la interfaz y sistemas
de navegación, y cómo funcionan
en conjunto.
Paulina López Barrios
Wireframe (diseño web)
• Usualmente esteesquema carece de estilotipográfico, color oaplicaciones gráficas, yaque su principal objetivoreside en lafuncionalidad,comportamiento yjerarquía de contenidos.
• Los esquemas puedenser dibujados con lápiz ypapel o esquemas enuna pizarra, o pueden serproducidos con mediosde diseño deaplicaciones de softwarelibre o comerciales.
Se enfoca en “qué hace la pantalla, no cómo se ve.”
Paulina López Barrios
Wireframe (diseño web)
Los wireframes se enfocan en:
• Los tipos de información que será mostrada
• La cantidad de las funciones disponibles
• Las prioridades relativas de la información y las funciones
• Las reglas para mostrar ciertos tipos de información
• El efecto de los distintos escenarios en la pantalla
Paulina López Barrios
Wireframe (diseño web)
• Usos de los wireframes• Elementos de un
wireframe
Diseño de información
Diseño de navegación Diseño de interfaz
Paulina López Barrios
Bibliografía
Aplicación para realizar la página web
• https://sites.google.com/?hl=ES
Ejemplo de página web elaborada en la sesión
• https://sites.google.com/prepaenlinea.sep.gob.mx/tallertic/inicio
Wireframes
• https://cacoo.com/
Generadores de paletas de color online
• 14 generadores de paletas de color online para diseño web
• https://es.shopify.com/blog/62615749-14-generadores-de-paletas-de-color-online-para-diseno-web
Fuentes gratuitas
• https://www.1001freefonts.com/es/
• https://www.fontsquirrel.com/