![Page 1: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/1.jpg)
Ensenada, Baja California Mayo 2010
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIADepartamento de Información Académica
![Page 2: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/2.jpg)
¿Qué es un Sitio Web? Es un conjunto de PÁGINAS WEB que están
hospedadas (almacenadas o archivadas) en unServidor Web.
![Page 3: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/3.jpg)
¿Qué es una Página Web?Es un documento electrónico adaptado
para la Web en formato HTML(HyperText Markup Language)
Que puede contener: Texto
Imágenes
Animación
Video
Sonido
![Page 4: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/4.jpg)
¿Qué es un Servidor Web?
Es una computadora que tiene instalado un programa que implementa el protocolo HTTP (HyperText Transfer Protocol), el cual se ejecuta continuamente esperando la petición de un cliente.
![Page 5: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/5.jpg)
![Page 6: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/6.jpg)
Antecedentes
En un principio era sólo texto, pero a medidaque ha evolucionado la tecnología, se hagenerado nuevas formas de diseñarlos ydesarrollarlos.
La inclusión de imágenes fue la mássignificativa, pero también debemos mencionarel vídeo, la animación y los espacios 3D hanaportado valores de estilo, diseño einteractividad al espacio virtual.
![Page 7: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/7.jpg)
Evolución de los Sitios Web
2000 2004 2008 2009
![Page 8: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/8.jpg)
Dell.com
1999 2003 2009
![Page 9: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/9.jpg)
Aspectos a considerar
Navegabilidad
Interactividad
Usabilidad
Accesibilidad
![Page 10: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/10.jpg)
Navegabilidad Es la facilidad con la que un usuario puede
desplazarse por todas las páginas que componen unsitio web.
Un sitio web debe proporcionar un conjunto derecursos y estrategias de navegación diseñados paraconseguir un resultado óptimo en la localización dela información y en la orientación para el usuario.
Las interfaces de navegación tienen que ayudar a losusuarios a responder a tres preguntasfundamentales relacionadas con la navegación: ¿Dónde estoy? ¿Dónde he estado? ¿Dónde puedo ir?
![Page 11: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/11.jpg)
Interactividad
Es el grado de intercambio de información entreel usuario y la aplicación (sitio Web) y su nivel derespuesta en el que un mensaje se relaciona conotro previo y los subsiguientes(retroalimentación – feedback).
Según Bou Bauzá Guillem "La interactividadsupone un esfuerzo de diseño para planificar unanavegación entre pantallas en las que el usuariosienta que realmente controla y maneja unaaplicación” .
![Page 12: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/12.jpg)
Usabilidad
Es la facilidad con que las personas puedenutilizar una herramienta particular o cualquierotro objeto fabricado por humanos con el fin dealcanzar un objetivo concreto.
En la interacción humano-computadora, lausabilidad se refiere a la claridad y la eleganciacon que se diseña la interacción con un programade computadora o un sitio web.
![Page 13: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/13.jpg)
Accesibilidad
Es la capacidad de acceso a la Web y a suscontenidos por todas las personasindependientemente de la discapacidad (física,intelectual o técnica) que presenten o de lasque se deriven del contexto de uso(tecnológicas o ambientales).
Cuando los sitios web están diseñadospensando en la accesibilidad, todos losusuarios pueden acceder en condiciones deigualdad a los contenidos.
![Page 14: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/14.jpg)
¿Qué es un navegador? Es un programa que permite visualizar la
información que contiene una página web.
Los navegadores más utilizados son: Internet Explorer
Mosaic
Firefox Mozilla
Netscape
Safari
![Page 15: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/15.jpg)
¿Cómo funciona un navegador? Interpreta el código, en el que está escrita la
página web y lo presenta en pantallapermitiendo al usuario interactuar con sucontenido y navegar hacia otros lugares de lared mediante enlaces o hipervínculos.
![Page 16: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/16.jpg)
¿Cómo funciona el WWW?
El WWW (World Wide Web o Red GlobalMundial) es un sistema de documentos deHIPERTEXTO y/o HIPERMEDIOS enlazados yaccesibles a través de Internet.
• Fue creada en 1989 por el inglés TIM BERNERS-LEE y el belga ROBERT CAILLIAU
• Funciona con la arquitecturaCliente-Servidor.
![Page 17: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/17.jpg)
PLANIFICACIÓN DE UN SITIO WEB
Análisis
Diseño
Desarrollo de Contenidos
Evaluación
Publicación
Mantenimiento y Seguimiento
1
2
3
4
5
6
![Page 18: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/18.jpg)
1. ANÁLISIS En esta etapa se delimita el tema o área, se
define la audiencia destino y se determinan los objetivos a lograr a través del sitio web.
Se realizan encuestas y entrevistas a clientes y usuarios, así como revisiones de sitios web anteriores y/o relacionados con el tema.
![Page 19: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/19.jpg)
2. DISEÑO Se crea el esqueleto del sitio, es decir, la
estructura principal que lo conformará,todavía sin el contenido en detalle.
También en esta etapa se crea la guía deestilos, que debe diseñarse tomando encuenta a los clientes potenciales y la cualcontendrá las indicaciones en cuanto alenguaje, vocabulario, tipografía, colores, etc.,que se usarán a lo largo de todo el sitio Web.
![Page 20: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/20.jpg)
3. DESARROLLO DE CONTENIDOS En esta etapa se crea o adapta todo el
material que se desea publicar en la web.
Para ello, se puede tomar material yaexistente (folletos, documentos, informacióninstitucional) que deberá ser convertida paraInternet (digitalizado, mejorado, reducido), obien crear material nuevo.
![Page 21: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/21.jpg)
4. EVALUACIÓN En cualquier trabajo resulta indispensable
realizar una evaluación, antes de darlo a conocer. En esta etapa se revisará la forma, el contenido, la presentación, la ortografía, redacción, etc., de todo el sitio.
Se sugiere que esta revisión sea hecha por personas distintas a los desarrolladores.
![Page 22: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/22.jpg)
5. PUBLICACIÓN Esta es la etapa más corta y simple del
proyecto.
Se trata de TRANSFERIR todos los archivosgenerados (HTML, GIF, JPG, PNG, DOC, PDF,etc.) a un servidor web para que puedan servistos y utilizado por los usuarios.
![Page 23: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/23.jpg)
6. MANTENIMIENTO Y SEGUIMIENTO
Se recomienda que un sitio web se estérevisando y actualizando constantementepara evitar publicar información obsoleta ymantener al día al usuario.
El seguimiento a las peticiones, solicitudes y/ocomentarios de los usuarios es muyimportante pues eso los mantiene cautivos yes seguro que regresen al sitio e incluso lorecomienden.
![Page 24: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/24.jpg)
HERRAMIENTAS DE DESARROLLO Lenguajes de programación
HTML (HyperText Markup Language)
Javascript
Java
JSP (Java Server Pages)
ASP (Active Server Pages)
PHP (Hypertext PreProcessor)
MySQL
![Page 25: UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento …desquer.ens.uabc.mx/dam/documentos/Diseno_sitios_web_may10.pdf · Navegabilidad Es la facilidad con la que un usuario puede](https://reader034.vdocuments.mx/reader034/viewer/2022043003/5f80f57af7caaf644020b1cd/html5/thumbnails/25.jpg)
HERRAMIENTAS DE DESARROLLO Diseño, creación y edición de gráficos
Photo Shop
Fireworks
Paint Shop Pro
Photo Paint
Diseño y contrucción de páginas web
Dreamweaver
Frontpage