Diseo de Pginas Web Puesta en marcha de una web

1
Diseño de Páginas WebPuesta en marcha de una web

• Pedro P. Sánchez Villalón

2
Tabla de contenidos (I)

• El cuadro del diseño web
• Tipos de sitios web
• Algunas reglas importantes
• El proceso del diseño de una web
• La web del día www.democompany.com

1
3
Web del aficionado

• Aficionado persona que ha leído un manual de
  HTML y piensa que eso le convierte en un
  informático y en un diseñador
• Existen más webs de aficionados de las que nos
  podríamos imaginar
• Algunas reglas para detectar una web de
  aficionado
• Uso de efectos del siglo pasado scrolls, gifs
  animados
• Elementos de diseño del siglo pasado colores
  estridentes, fondos de pantalla impactantes (o
  grises)
• Webs estáticas (colección de páginas html)
• Un sitio web debe diseñarse por un equipo
• Un ejemplo de web de aficionado

4

• Un ejemplo de web de aficionado
• El cuadro del diseño web
• El cuadro del diseño web

5
Directivos

• Tienden a usar la web para hacer reingeniería de
  procesos
• La web como un espejo de la organización de la
  empresa
• Confusión entre web para internet y web para
  intranet
• Lo importante es estar ahí antes que
  lacompetencia (y no gastar mucho dinero en ello)
• Sitios web promocionales sin una finalidad clara
• Sitios web no profesionales

6
Web del directivo

• Diseñadores
• Tienden a tener una visión excesivamente creativa
  de la web
• Problema de introducir interfaces de usuario
  excesivamente novedosas
• Problema de no asumir los convenios
• Necesidad de plug-ins y programas especiales
• (animaciones Flash, por ejemplo)
• Los elementos de diseño son útiles
• Spots publicitarios
• Imagen corporativa

7
Web del directivo

• Informáticos
• Tienden a ver la web como una aplicación
• Múltiples menús, sin saber a qué dar más
  importancia
• Excesivas interfaces de usuario árboles de
  directorios, formularios
• Diseño escueto
• Listados

8
Web del directivo

• Usuarios
• No se paran a leer las páginas las miran por
  encima
• No piensan dos veces pinchan dos veces
• No leen manuales prueban cosas
• Si un sitio no les ofrece lo que les interesa lo
  abandonan de inmediato

9
El equipo de diseño (1)

• Tomado de Dont make me think

10
Tipos de sitios web

• El rango de los sitios web
• Web estática y dinámica
• Web creada dinámicamente

11
Qué hay detrás?
ltindicegt lttemasgt lttema id"5"gtAprendizajelt/temagt lt
tema id"4"gtIA en el cinelt/temagt lttema
id"3"gtRobóticalt/temagt lttema id"2"gtAlgoritmos
genéticoslt/temagt lttema id"1"gtEmpresaslt/temagt lt/te
masgt ltgranColumna tipo"articulos"gt ltcolumnagt ltart
iculo tipo"articulos"gt2001-6-21alt/articulogt ltarti
culo tipo"articulos"gt2001-6-15blt/articulogt lt/colu
mnagt lt/granColumnagt ltgranColumna
tipo"comentarios"gt ltcolumnagt ltminiColumna
titulo"IA en el cine"gt ltcomentariogt2001-6-7blt/com
entariogt lt/miniColumnagt ltminiColumna
titulo"Empresas"gt ltcomentariogt2001-6-18alt/comenta
riogt lt/miniColumnagt lt/columnagt lt/granColumnagt lt/in
dicegt.
12
Web con datos dinámicos

• Cómo diferenciar una página dinámica de una
  estática?
• En general mirar la URL de la página Estática
• http//www.dccia.ua.es/dccia/inf/asignaturas/LPP/i
  ndex.html
• Dinámica
• http//www.dccia.ua.es/cgi/dccia/publico/genPagina
  .awk?IDIOMACMODELOasignaturasCLAVE

13
Aplicación web

• Algunas reglas importantes
• Construyendo para el usuario
• Tú no eres el usuario
• Tus intereses (ni tu percepción de los problemas)
  no son los mismo que los de los usuarios que
  llegan a tu sitio web
• Entiendes conceptos que el usuario no tiene por
  qué conocer
• Los usuarios no son diseñadores
• Es complicado pedir a los usuarios que diseñen el
  sitio web
• No existe un usuario común
• Diseña para el usuario común, pero ten en cuenta
  las diferencias

14
Web como software

• La ejecución de un sitio web no debe tener
  errores
• Algunos problemas frecuentes enlaces sin
  ctualizar o ficheros con formatos que no entiende
  el navegador
• Chequea la web en distintos sistemas y
  navegadores
• Conoce y respeta las restricciones de Internet y
  de la Web
• Respeta los principios del diseño de interfaces
  de usuario

15
Concentrarse en el contenido

• La navegación y la estructura del sitio es sólo
  un medio para obtener un fin
• Los aspectos visuales influyen enormemente en la
  percepción inicial del valor de un sitio web

16
Equilibrio entre forma y función

• No inventar interfaces para construir una imagen
  de marca
• Interfaces menús desplegables, botones, ...
• Existen convenciones los menús se despliegan de
  arriba abajo ...
• No hay un diseño correcto de web en el que
  encajen todos los sitios web
• Existen, sin embargo, líneas generales que hay
  que seguir
• Ejemplo página splash

17
El proceso de diseño de una web

• Web como software
• Crisis del software en años 80
• Ingeniería del software como respuesta
• Modelos de desarrollo de software
• Métricas
• Documentación

18

• El modelo de cascada
• El proceso de diseño de una web.
• Definición de objetivos
• Definir claramente los objetivos del sitio web
• Crear un sitio para un restaurante de comida
  japonesa que informe a 300 posibles clientes al
  mes sobre los horarios, el menú, el ambiente, los
  precios y les anime a realizar los pedidos por
  teléfono o visitar el restaurante
• Reducir la lista de objetivos deseables
• Tener en cuenta la audiencia esperable
• Edad, sexo, idioma, tipo de conexión a internet,
  tipo de ordenador
• Crear perfiles de usuario
• Definir requisitos

19
Plan del sitio

• Documento en el que se especifica el diseño del
  sitio web
• Contenidos
• Introducción general del proyecto
• Discusión de los objetivos del proyecto
• Análisis de la audiencia
• Requisitos de contenido, técnicos, visuales
• Arquitectura del sitio
• Recursos para la elaboración personal, tiempo,
  coste

20
Diseño del sitio

• Diseño de bloques del sitio web
• Los sitios web suelen definir unas zonas fijas
  que repiten en todas las páginas (cabecera, área
  de menú, ...)
• El proceso de diseño de una web
• Logo
• Menús
• Zona
• texto
• Cabecera
• y pie

21
Boceto

• Boceto del frontal
• El proceso de diseño de una web.19
• Bocetos de niveles inferiores
• El proceso de diseño de una web
• Implementación beta
• Se suelen usar herramientas de diseño, tipo
• Macromedia Fireworks
• No se implementan las aplicaciones finales, sino
  sólo el aspecto
• Útil para realizar pruebas de usabilidad con
  usuarios reales

22
Publicación

• Desarrollo final en HTML (con herramientas
  Macromedia Dreamweaver o FrontPage)
• Desarrollo de las aplicaciones
• Publicación en un sitio web accesible
  desdeInternet

23
Nombre del negocio

• Cómo conseguir los nombres www.MiNegocio.es o
• www.MiNegocio.com?
• Tipos de dominios .es .com .net .org .info .biz
• Algunas empresas www.neodigit.es,
  www.interdominios.com,
• www.piensasolutions.com
• Cómo promocionar el nombre?
• Buscadores www.google.com, www.yahoo.com
• Publicidad webs más visitadas y relacionadas con
  el negocio, búsquedas en google
• Precios orientativos
• Registro .com .net .org .info .biz unos 20 ,
  .es 120
• Publicidad depende de la publicación y de las
  impresiones
• Publicidad google 15 por 1000 muestras

24
Infraestructura informática

• Dos posibilidades almacenamiento en la empresa y
  web hosting
• Almacenamiento en empresa
• Permite mayor flexibilidad en cuanto a los
  servidores y aplicaciones que colocamos
• Única forma de implementar una intranet
• Web hosting
• Muy barato
• No hay problema de obsolescencia de los aparatos
• Problemas de acceso si el servidor no es bueno

25
La web del día www.democompany.com

• Página frontal
• La web del día www.democompany.com
• Segundo nivel
• La web del día www.democompany.com
• Tercer nivel
• La web del día www.democompany.com