GUÍA DE Estilo - PÁG WEB PDF

Preview

Summary

conceptos de guias de estilos web para apalicancion de temas realizanados con deseño y estructura...

Description

UNIVERSIDAD CNCI PLANTEL OAXACA (Colegio Nacional de Capacitación Intensiva) “MUSE 2 B1 Y MUSE 2 B2” PÁGINA WEB Alumna: Candy Heidy Velasco Martínez Matrícula: 00304893 Profesor: Alfonso Ruiz Lugar y fecha: Pueblo Nuevo, Oaxaca de Juárez, Oax., a 15 de Diciembre de 2021

1) Navegación Menú: página web sobre las drogas - Inicio - Tipos - Enfermedades - Sociedad

Arquitectura de la información Centro de Rehabilitació

CANDY VELASCO 01 DROGAS

Contact o

Vídeo informativo b l d

INICIO

TIPOS

ENFERMEDADES

SOCIEDAD

Biografía 1 imágenes

Clasificación de las drogas - 3 i

Slider 3 imágenes

Slider 4 imágenes

Testimonios 5 imágenes

Tipos de drogas 5 imágenes

Adicción 3 imágenes

La adicción a las drogas 2 imágenes

Principales drogas COCAÍNA 3 imágenes

Enfermedades EFISEMA 1 imagen

Fenómeno 3 i á Fenómenos de la drogadicci ón 4

HEROÍNA 3 imágenes

HEPATITIS B 1 imagen

El papel de la sociedad ante el consumo de drogas 3i á

Slider 4 imágenes Película 1 imagen

Footer

MARIHUANA 3 imágenes

VIH 1 imagen

ÉXTASIS 3 imágenes

TROMBOSIS CORONARIA 1 imagen

CRACK 3 imágenes

Footer

Prevención, el mejor recurso 3 imágenes

La educación y a prevención deben comenzar en la etapa de la niñez y adolescencia 1 imagen

Drogas: ¿remedio o enfermedad?

Footer

Footer

MENÚ

Elementos del menú: -

El logotipo del sitio de información ubicado en la esquina superior izquierda al darle click, re direcciona al contenido de la página de inicio Opciones de navegación: se conforma con un menú de cuatro elementos que se encuentran en la parte central superior:

1. Inicio: da a conocer la biografía del autor, una breve introducción del tema sobre las drogas en una frase para concientizar el fenómeno de drogadicción, posteriormente se encuentra el contenido del slider en donde están concentrados los testimonios de personas drogodependientes; teniendo botones para deslizar a los lados y poder ver todos los testimonios, al igual cuenta con una sección en donde se trata el tema del fenómeno de la drogadicción; presentándolo con imágenes y botones que al darle clic te envía a otra página de navegación sobre el mismo tema con más información. Otra sección de la opción de navegación de inicio es donde se presenta la información de una película acerca de este fenómeno de drogadicción, mostrando una reseña, información de la película, dónde se puede ver y el poster de esta. Como última sección de esta opción de navegación se encuentra el footer de la página, el cual contiene el nombre del creador, número telefónico para contactarlo y su logotipo. 2. Tipos: se presenta la información sobre las tipologías y formas de uso de las drogas, clasificándolas en cuadros, con información e imágenes. Al igual esta opción de navegación presenta una sección sobre las principales drogas, donde se encontrarán información acerca de la cocaína, heroína, marihuana, éxtasis y crack, también la opción de tipos contiene un recuadro de información titulado “Las drogas ¿remedio o enfermedad? Al final de esta página está el footer de la página, en donde está el nombre del creador, número telefónico y logotipo. 3. Enfermedades: esta opción de navegación contiene como elemento principal un slider de tamaño grande con imágenes sobre aspectos relacionados con las drogas, después se encuentra una sección con una introducción de las infecciones y enfermedades derivadas del consumo de las drogas. Como penúltima sección de esta opción esta la información sobre las enfermedades causantes para los drogodependientes presentando la Efisema, Hepatitis B, VIH y Trombosis coronaria. Y como última parte se presenta el footer donde se encuentra el nombre del autor, número telefónico y logotipo. 4. Sociedad: la opción de navegación de sociedad contiene un slider de tamaña grande en donde se muestran imágenes de la sociedad y las drogas al deslizar esta la sección de la adicción a las drogas mostrando información sobre este tema e imágenes, posteriormente esta otra sección de información la cual trata del papel de la sociedad ante el consumo de las drogas presentada con información e imágenes. Y como penúltima sección de esta opción de navegación, está el contenido de la prevención para el fenómeno de la drogadicción. Al final de la opción de sociedad está el footer de la página, con nombre del crador, número telefónico y logotipo.

En la parte esquina superior derecha de la página se encuentran tres opciones de navegación: 1. Centro: esta primera opción de navegación es un icono de un centro, el cual al darle clic te re direcciona a la página web del centro de rehabilitación para adiciones y así poder obtener informes acerca del centro en caso de que se necesite. 2. Teléfono: esta segunda opción de navegación es representada por un ícono de teléfono, el cual al darle clic re direcciona al centro de llamadas de atención primaria en adicciones para solicitar información sobre el fenómeno de la drogadicción y el alcoholismo. 3. YouTube: esta tercera opción de navegación es un ícono de la app de youtube, al darle clic re direcciona a esta app reproduciendo un vídeo sobre el impacto de este fenómeno a familias de drogodependientes.

Partituras de interacción -

Home

Esta partidura representa el nombre y la marca del sitio de información, la cual su función es al darle clic re direcciona a la opción de navegación inicio. -

Clic en el siguiente

Esta partidura es un ícono que señala dar clic para proseguir con el siguiente elemento, al posicionar el mouse el color de relleno cambiará al igual el color del signo de mayor que -

Clic al anterior

Esta partidura es un ícono que señala dar clic para volver al anterior elemento, al posicionar el mosuse el color de relleno cambiará al igual el color del signo de menor que.

-

Centro

El ícono de centro es una opción de navegación, el cual al darle clic te re direcciona a la página web del centro de rehabilitación para adiciones y así poder obtener informes acerca del centro en caso de que se necesite

-

Teléfono:

El ícono de teléfono es una opción de navegación, el cual al darle clic re direcciona al centro de llamadas del centro de atención primaria en adicciones para solicitar información sobre el fenómeno de la drogadicción y el alcoholismo.

-

YouTube:

El ícono de youtube es una opción de navegación, al darle clic re direcciona a esta app reproduciendo un vídeo sobre el impacto de este fenómeno a familias de drogodependientes.

2) Estilo visual 

Paleta de colores # 000000

# FFFFFF

Fondo del logotipo, letras del menú, párrafos, títulos, subtítulos, fondo del footer

Letras del menú, párrafos, títulos, subtítulos, letras del footer

# FCEE21

# C7B27B

Números del logotipo, hover en cajas de información, hover en botones de fenómeno

Fondo de las opciones del menú de navegación

# 7F7F7F

# 2E3192

Texto, fondo de secciones de información 50%, 15%, 85% de opacidad

Fondo de secciones de información

# BCFEFF

# 009F9F

Fondo del recuadro drogas: ¿remedio enfermedad?

de o

Fondo del título del recuadro de drogas: ¿remedio o enfermedad?

# 754C24

# 000000

Fondo de una sección de las principales drogas, 45% de opacidad

Fondo de secciones de información, 45%, 70%, 80% de opacidad

# C7B299

# 0600F8

Fondo de secciones de información, 70% de opacidad

Fondo de secciones de información, 50% de opacidad

# 1B1464

# 736357

Fondo de secciones de información,

Fondo de secciones de información

# 736357 Fondo de secciones de información





Uso tipográfico -

Merriweather: títulos

-

M Plus 1p: subtítulos

-

Yantramanav Light: párrafos

-

Quattrocentro Sans: hipervínculos

Tamaño de las fotografías

-

¡HOLA! SOY CANDY es la primera sección de la opción de inicio, esta es la biografía que tiene por fondo una imagen de pastillas con las cuales muchas personas se hacen adictos a las sustancias toxicas para el cuerpo e información del autor de la página y una breve introducción sobre este tema; la medida de la imagen que presenta la biografía es 1366 PX * 475 PX

1366 PX

475 PX

-

En la opción inicio del menú, se presenta una apartado de testimonios de drogodependientes, conformado por texto e imágenes, las imágenes se comportan en un mismo tamaño en este aparto de testimonios, teniendo medidas de 419 PX * 319 PX

319 PX

419

-

En la opción de navegación de inicio se encuentra como tercer apartado el fenómeno de la drogadicción, representado por cajas de información con imágenes de fondo, las imágenes de fondo se comportan en un mismo tamaño con medidas de 300 PX * 470 PX . El texto que se encuentra en las cajas de

información cambia de color blanco a color amarillo al posicionar el mouse encima de estos, las cajas de información proporcionan una extensión del tema con ayuda del botón fenómeno que está ubicado al final de estas, al posicionar el mouse sobre la palabra fenómeno cambia de color blanco a color amarillo y se muestra el contorno de este botón.

300 PX

470 PX

-

En la opción TIPOS del menú de la página, está el apartado tipologías y formas de uso, el cual presenta tres diapositivas básicas con imágenes de un mismo comportamiento de tamaño, con medidas de 440 PX * 300 PX

-

La opción TIPOS del menú, contiene una sección muy específica sobre la clasificación de las drogas, presentada por cajas de información con imágenes; estas cajas de información tienen un efecto rollover; al posicionar el mouse encima de las cajas de información el resplandor de esta aumenta a 100% en

color rosa. Las imágenes de las cajas de información cuentan con el efecto de sombras color negro a una opacidad de 50%, las imágenes comppoarten el mismo tamaño con medidas de 220 PX * 170 PX

-

En la opción de navegación ENFERMEDADES perteneciente al menú de la página, el primer apartado es un slider que presenta cuatro diapositivas las cuales son imágenes desplazándose hacia la izquierda, la medida de las imágenes para el slider es de 1366 PX * 560 PX. En el slider aparece el siguiente texto “STOP DRUGS” diciendo “ALTO A LAS DROGAS” como concientización hacia este fenómeno de drogadicción.

1366 PX

560 PX

-

En la opción de ENFERMEDADES que forma parte del menú de navegación de la página, se encuentra el contenido de infecciones y enfermedades derivadas del consumo de drogas presentando 4 de enfermedades; en apartados con información sobre esta y una imagen sobre la enfermedad. Todos los apartados de esta información estarán acompañados por imágenes del mismo tamaño 510 PX * 322 PX, esto diferencia la sección por su estética más estructurada. Como detalle final las imágenes cuentan con un contorno color blanco que contrastan con los apartados.

-

La opción de SOCIEDAD del menú de navegación de la página, tiene como primer elemento un slider presentado por cuatro diapositivas básicas que se desplazan de izquierda a derecha, las medidas de un slider son 1366 PX *560 PX

-

En la opción de navegación se encuentra el último apartado de imágenes que se presenta el tema de papel de la sociedad ante el consumo de las drogas. Mostrando una presentación de diapositivas básicas con imágenes del mismo tamaño, 500 PX * 400 PX.



Íconos -

Home

Esta partidura representa el nombre y la marca del sitio de información, la cual su función es al darle clic re direcciona a la opción de navegación inicio. -

Clic en el siguiente

Esta partidura es un ícono que señala dar clic para proseguir con el siguiente elemento, al posicionar el mouse el color de relleno cambiará al igual el color del signo de mayor que -

Clic al anterior

Esta partidura es un ícono que señala dar clic para volver al anterior elemento, al posicionar el mosuse el color de relleno cambiará al igual el color del signo de menor que.

-

Centro

El ícono de centro es una opción de navegación, el cual al darle clic te re direcciona a la página web del centro de rehabilitación para adiciones y así poder obtener informes acerca del centro en caso de que se necesite

. Teléfono:

El ícono de teléfono es una opción de navegación, el cual al darle clic re direcciona al centro de llamadas al centro de adicciones primarias para solicitar información sobre el fenómeno de la drogadicción y el alcoholismo.

-

YouTube:

El ícono de youtube es una opción de navegación, al darle clic re direcciona a esta app reproduciendo un vídeo sobre el impacto de este fenómeno a familias de drogodependientes.

3) Estructura de sitio 

Estructura del header La sección que encabeza la página web es el header, presentando grupos de ayuda introductoria de navegación. El header se divide en tres grupos de navegación: 1. Logotipo: presentando la marca y nombre del autor de la página, al dar clic sobre el logotipo re direcciona a la opción de navegación de inicio, ubicado en la esquina superior izquierda del header 2. Menú con cuatro elementos de navegación, ubicado en la parte central superior del header; cada opción re direcciona a su contenido respectivo : -

INICIO: primera opción de navegación del menú de la página, su contenido muestra la breve biografía de autor e introducción del tema fenómeno de drogadicción, testimonios y recomendaciones sobre películas acerca de este fenómeno

-

TIPOS: segunda opción de navegación del menú de la página, presentando información de las tipologías y formas de uso de las drogas, las principales drogas e información sobre el mito de las drogas como ¿remedio o enfermedad?

-

ENFERMEDADES: tercera opción de navegación del menú de la página, su contenido reporta las infecciones y enfermedades derivadas del consumo de las drogas

-

SOCIEDAD: cuarta opción de navegación del menú de la página, presentando el papel de la sociedad ente el consumo de las drogas y el mejor recurso ante este fenómeno, la prevención durante la niñez y adolescencia. El menú de opciones de navegación, cuenta con efectos rollover; al posicionar el mouse sobre alguna opción del menú las letras cambiarán de color negro a color blanco, y al seleccionar una opción, su texto se mantiene en color blanco encontrándose en estado activo.

3. Opciones de navegación: se encuentran en la esquina superior derecha del header, estas opciones de navegación están representadas por iconos que al dar clic sobre ellas re direcciona a información para el lector: -

CENTRO: al darle clic al ícono de centro, re direcciona a la página web del centro de rehabilitación para adiciones y así poder obtener informes acerca del centro en caso de que se necesite

-

TELÉFONO: al darle clic al ícono de teléfono, re direcciona al centro de llamadas de la fundación de ayuda nacional para adicciones para solicitar información sobre el fenómeno de la drogadicción y el alcoholismo

-

YOUTUBE: al darle clic al ícono de youtube, re direcciona a esta app reproduciendo un vídeo sobre el impacto de este fenómeno a familias de drogodependientes Las medidas del header son 1366 PX * 123 PX, en este espacio se encuentran múltiples opciones de navegación

MENÚ



Estructura del footer El footer es la parte inferior de la página web, en el footer se incluyen elementos que pueden ser de interés para el usuario que navega en ella. Los elementos que conforman el footer de esta página son:

-

Nombre del autor

-

Número telefónico de la marca

-

Logotipo de la marca El footer no tiene ninguna acción como hipervínculo, efecto rollover, en el caso de esta página su único objetivo es comunicar la información ya antes mencionada Las medidas del footer son 1366 PX * 93 PX, dando en ese espacio información acerca de la marca

FOOTER



Diseño home

INICIO La opción de navegación de INICIO forma parte del menú correspondiente al header, en esta opción se encuentra en primera parte; el header con sus tres partes que lo conforman logotipo, menú de opciones de navegación, opciones de navegación con hipervínculos; este apartado ayuda al usuario a ubicar la información que necesita. Teniendo medidas de 1366 PX * 123 PX El apartado siguiente es una breve biografía del autor e introducción al tema del fenómeno de drogadicción, en donde se aborda de una manera muy sutil de que tratará esta opción de navegación. Representando a este apartado un banner de 1366 PX * 475 PX con fondo de imagen de sustancias toxicas para el cuerpo. INICIO cuenta con un apartado con testimonios de drogodependientes, este apartado es un slider de 1366 PX * 382 PX que proyecta diapositivas con texto e imágenes teniendo opciones de avanzar al siguiente testimonio o retroceder al anterior. El objetivo de este apartado es hacer al usuario el impacto que tiene este fenómeno en las personas y en la sociedad. El fenómeno de la drogadicción es un apartado muy específico de la opción de navegación INICIO, da a conocer el tema en cajas de información de 300 PX *470 PX las cuales sus textos tienen efectos rollover; al posicionar el mouse sobre el texto este cambia de color blanco a color amarillo. Al igual que los botones que al dar clic re direcciona a una opción de navegación de la página en donde se adentra al tema. Como penúltima parte de esta opción de navegación, está un apartado de recomendación de películas, encontrándose la película Beautiful Boy: Siempre serás mi hijo la cual trata de un chico adicto.

El último apartado de INICIO es el footer, un espacio de 1366 PX * 93 PX, conteniendo información sobre la marca, nombre de autor, número telefónico de la marca y logotipo.

INICIO – FENÓMENO Inicio – Fenómeno es una subpágina de la opción de navegación de inicio; en el apartado del fenómeno de la drogadicción de inicio se menciona que al dar clic re direcciona a otra página dando con esta Inicio – Fenómeno. Inicio – Fenómeno, lleva el header, tres partes que lo conforman logotipo, menú de opciones de navegación, opciones de navegación con hipervínculos; este apartado ayuda al usuario a ubicar la información que necesita. Teniendo medidas de 1366 PX * 123 PX. Contiene solo un apartado de información en donde se profundiza el tema de fenómeno de la drogadicción, presentado con información y un pequeño collage en un espacio de 1366 PX * 700 PX. Inicio – Fenómeno es una opción de navegación no tan extendida, así que como último apartado está el footer con 1366 PX * 93 PX, dando a informar nombre del autor, número telefónico de la marca y logotipo.

TIPOS TIPOS es una opción de navegación del menú del header que se conforma por tres partes: logotipo, menú de opciones de navegación, opciones de navegación ...