SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el...
-
Upload
raul-fidalgo-vega -
Category
Documents
-
view
215 -
download
0
Transcript of SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el...
![Page 1: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/1.jpg)
SITIO WEB
Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos y sonidos en internet.
![Page 2: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/2.jpg)
HTMLHyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de sitios web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares(<,>)
![Page 3: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/3.jpg)
INTERfazProveniente del Latín inter, significa “entre” o “en medio”
Inter =
Proveniente del Latín faices, significa “superficie, vista o lado de una cosa”
fas =
INTERfaz.“Superficie vista o lado mediador”
![Page 4: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/4.jpg)
¿GUI?”La GUI es la interfaz gráfica de usuario que involucra comunicación e
interacción”
”Es el espacio que media la relación
de un sujeto y un ordenador o
sistema interactivo…”Marrero, 2006
![Page 5: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/5.jpg)
”incorpora agiles metáforas para la interacción, se vale del uso de
imágenes y conceptos para transmitir funciones y significados a la
pantalla del ordenador, características visuales detalladas
del sitio web”
”La interfaz gráfica se materializa a
través de la pantalla del ordenador y por medio de la misma el usuario puede
acceder a su contenido”
![Page 6: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/6.jpg)
Obtener información sobre los usuarios del sitio web a desarrollar, para tener una base y lograr n diseño centrado en las
necesidades del usuario, teniendo en cuenta la diversidad funcional del mismo.
PRINCIPIOS básicos Para el diseño de la GUI
A
Necesidades del usuario
![Page 7: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/7.jpg)
Consiste en maquetar una estructura organizativa a través de la cual el sitio será realizado, de manera que esta debe ser fácil de comprender y amigable a la hora de la interacción del usuario dependerá del numero de secciones o vínculos relacionados.
B
Arquitectura y Navegabilidad
Las principales estructuras de navegación son:
Lineal, es en la que el usuario navega de manera secuencial de principio a fin, la mas común
![Page 8: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/8.jpg)
Consiste en maquetar una estructura organizativa a través de la cual el sitio será realizado, de manera que esta debe ser fácil de comprender y amigable a la hora de la interacción del usuario dependerá del numero de secciones o vínculos relacionados.
B
Arquitectura y Navegabilidad
Las principales estructuras de navegación son:
Lineal, es en la que el usuario navega de manera secuencial de principio a fin, la mas común
![Page 9: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/9.jpg)
NO Lineal, es la que le permite al usuario navegar con libertades y sin restricciones por recorridos preestablecidos, son de árbol, de red o mixta.
ÁRBOL RED
MIXTA
![Page 10: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/10.jpg)
Al momento de estructurar nuestra web es necesario definir la resolución a la que se desea trabajar, en estos momento el mas recomendado es de 1024 x 768, pero en estándares de accesibilidad sigue siendo el de 800 x 600.
C
Resolución de pantalla
![Page 11: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/11.jpg)
Su propósito es permitir la navegación del usuario de manera clara e intuitiva, generalmente se encentran agrupados en un área especifica de la interfaz, pueden ser textuales, signos o imágenes.
Los submenús muestran el contenido de una sección
D
Menú y Submenú
http://www.misos.com/misos.html
http://www.brandcentral.dk/
http://www.lacasademiabuela.info/cast/index.htm
http://www.minimundos.tk/
![Page 12: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/12.jpg)
Consiste en la representación de recursos a través de iconos, facilitando el proceso de navegación e interacción, permitiendo el reconocimiento intuitivo a través de los iconos.Cruzan la Barrera de la cultura de mejor modo que el lenguaje verbalAlgunos tienen reconocimientos internacionales, capaces de transmitir conceptos en menos palabras.
D
Metáforas Visuales
http://www.verat.it/home.htm
http://users.skynet.be/habbahoob/
http://www.stampedesolution.com/home.htm
http://www.cybergraphix-anim.com/
![Page 13: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/13.jpg)
Es importante que la tipografía en la web sea legible, ya que el tipo en la pantalla se convierte en un signo luz,(el impreso es signo materia), lo que ofrece mas dificultad sobre el ojo ralentiza la lectura y dificulta la compresión.
Los signos de palo seco ofrecen mayor limpieza en la web.
La relación tipo/Color es importante
Se recomiendan los textos oscuros sobre fondos claros y viceversa
Los fondos oscuros son recomendados por impactar menos la retina, permitiendo mejor lectura.
E
Tipografía Digital
![Page 14: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/14.jpg)
La alineación de los textos debe ser a la izquierda , textos en cajas altas y bajas
Los bloques de textos deben ser cortos y verticales.
F
Alineación de los textos
![Page 15: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/15.jpg)
Una de las características de la tipografía en la web, es el uso del Hipertexto, identificado de color azul y subrayado, contiene propiedades interactivas.
G
http://www.headmagazine.co.uk/http://www.fettundrosig.com/corporatedesign.htmlhttp://sparror.cubecinema.com/rasha/58records/index.htmlhttp://www.electropost.de/http://phurbano.com/home.htmlhttp://www.mvrenegoor.nl/http://www.andreaorazzo.com/http://www.absolute-agency.be/http://www.flaskml.com/http://www.cabanadigital.com/http://www.nextarchitects.com/
Hipertextos
![Page 16: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/16.jpg)
El uso de color para la pantalla es aditivo de la gama de RGB.
Una desventaja de los RGB es que los colores no se visualizan de forma uniforme en todas las pantallas, nace el sRGB desarrollado por HP y Microsoft, versión calibraba para casi todos los sistemas operativos.
Dabbs, Campbell, 2006
H
El color en la web
![Page 17: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/17.jpg)
http://www.rubenaka.com/home.php
http://www.inol3.com/flash.asp
http://emotionslive.co.uk/
http://www.nostyle.fr/pages/home.htm
http://www.yes-indeed.net/
http://dere.com.ar/print.htm
![Page 18: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/18.jpg)
No se puede predecir el rumbo por el que comenzara a navegar el usuario pero si las zonas a las que le presta mas atención…
I
Visualización y organización
![Page 19: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/19.jpg)
La organización debe ser coherente a lo largo de todas las paginas del sitio, para evitarle confusión al usuario y evitar que se desconcierte al cambiar de sección.
http://www.dicamusica.it/
http://www.4trendy.com/index.html
http://www.grupomarmoca.com/#
http://foxie.ru/
http://www.gnvpartners.com/web/
J
Organización coherente
![Page 20: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/20.jpg)
Hoy en día nos exponemos ante un diverso uso de la imagen para comunicarle a nuestro usuario el mensaje que deseamos dar a conocer, lo importante es trabajarlas a 72 ppp de resolución
k
Tratamiento de las imágenes en la webhttp://www.chanceandfat.com/main.html
http://www.vitamin2.ch/detect.html
http://www.djcacapeiter.com.br/site/
http://www.mediziehm.de/#start
http://www.piperboy.com/scrapbook/scrapbook.html
http://www.piperboy.com/scrapbook/scrapbook.html
![Page 21: SITIO WEB Formato que involucra varias páginas entrelazadas cargadas en la WORD WIDE WEB, que es el estándar para visualizar textos, imágenes, gráficos.](https://reader036.fdocuments.net/reader036/viewer/2022062807/5665b4821a28abb57c921a7c/html5/thumbnails/21.jpg)
PlanificaciónNO es un libro cada pagina debe tener sentido e independencia
Para que es mi web, No perder el norte
Target
Arquitectura de la información, Diseñar jerarquías y colocar temas en secciones, alivia presión de menú que lleva a secciones (Mapa de Sitio)
Malla gráfica
Pruebas de Navegadores
Accesibilidad
1234567