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/