1. TALLER DE DISEÑO WEB
Iniciación

2. ÍNDICE
UNIDAD 1: PLANIFICACIÓN UNIDAD 3: PRODUCCIÓN
1. Análisis de necesidades y objetivos: 1. Dominios y alojamientos
el briefing web 2. Gestores de FTP y editores de
2. Definición de contenidos texto: dreamweaver, dos en uno
3. Estructurar la navegación 3. El esqueleto de la página: los
4. Prototipado documentos html
4. Los estilos: las css
UNIDAD 2: DISEÑO 5. Interactuar con el usuario: javascript
y sus librerías
6. Armando la página: maquetación
1. Resoluciones
html
2. Retícula - webs modulables
7. Dándole estilo: css
3. Diseñar para web con photoshop
8. Testeo cross browser

3. UNIDAD 1
Planificación

4. FUNCIONES DE LA PLANIFICACIÓN
• Permite la elaboración de un PRESUPUESTO lo más ajustado
posible:
– Estimación de tiempos.
– Estimación de recursos (técnicos y humanos).
• Permite establecer un CALENDARIO DE HITOS, de manera
que el cliente está al tanto de los procesos, haciendo los
cambios y observaciones correspondientes en el momento
adecuado y ahorrando sorpresas al final del proceso.
– Depuración de responsabilidades.
– Claúsulas contractuales.

5. ¿QUÉ OTRAS FUNCIONES - BENEFICIOS DE
LA PLANIFICACIÓN SE OS OCURREN?
PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO
Distribución adecuada de tiempos Soluciones más ajustadas a las
Control de la inversión
de trabajo necesidades
Posibilidad de controlar sus
márgenes de beneficio

6. ¿SE OS OCURRE ALGÚN INCONVENIENTE?
PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO

7. LAS FASES DEL PROYECTO WEB
En general, son las mismas que para cualquier proyecto
de diseño, adaptadas con un poco de sentido común.
[B. Munari]
1. Problema 1. Materiales y tecnologías
2. Definición del problema 2. Experimentación
3. Elementos del problema 3. Modelos
4. Recopilación de datos 4. Validación
5. Análisis de datos
5. Dibujos constructivos
6. Creatividad
6. Solución

8. EL BRIEFING
Análisis de necesidades y objetivos

9. ¿PARA QUÉ SIRVE?
• Para acotar el problema de diseño.
– Conocer las necesidades.
• De comunicación.
• Funcionalidades tecnológicas.
– Conocer las limitaciones o condicionantes:
• Presupuesto.
• Limitaciones en cuanto a aspecto visual - imagen corporativa.
• Target.
• Conocer las expectativas del cliente y contrastarlas con la
realidad del problema de diseño.

10. EJEMPLO DE BRIEFING 1
1. Definir el sitio:
– ¿A que se dedica la empresa?
– ¿Qué pretende conseguir con este sitio web?
– ¿A qué público objetivo quiere dirigirlo?
– ¿En cuanto tiempo pretende lograr sus objetivos?
– ¿Tiene el cliente ya el dominio contratado?
Si la respuesta es no: ¿Nos encargamos nosotros de ese tema?
– ¿Dispone de alojamiento para el site?
No: ¿Se lo contratamos nosotros?
Si: Es importante que el cliente proporcione todas las claves, acceso ftp, etc para poder copiar la
web cuando esté terminada. También es fundamental saber los lenguajes de programación
admitidos por el servidor (php), bases de datos instaladas (MySQL), si hay posibilidad de
instalar herramientas propias o librerías de funciones específicas, herramientas ya instaladas o
preinstaladas.

11. EJEMPLO DE BRIEFING 1
2. Definir aspecto
– ¿Tiene identidad visual corporativa?
Si la respuesta es no:
– ¿Qué colores/tonos prefiere?
– ¿Tiene constantes visuales? ¿cuales? (logos, folletos, tarjetas)
Aquí podríamos plantear otro cuestionario enfocado a desarrollar la identidad visual corporativa,
pero no es el caso.
Si la respuesta es si:
– ¿Nos puede facilitar un libro de estilo?
– ¿Tiene sitios web de referencia? (intentar Averiguar qué le gusta de cada
uno).

12. EJEMPLO DE BRIEFING 1
1. Contenidos
– ¿Qué contenidos hay?
– ¿Que contenidos faltan?
El cliente dará los contenidos que tenga, y los que no tenga aún que nos diga que va a ser y
tomamos nota, se leen con el y se miran las fotos juntos.

13. EJEMPLO DE BRIEFING 1
1. Estructura (después de leer/mirar los contenidos)
Todas estas preguntas, son para ir creando la estructura junto con el cliente, lo mejor es sugerir y
escuchar, pero que el cliente entienda por qué se debe desarrollar una estructura.
– ¿Cuantas secciones hay?
– ¿Cuantas subsecciones hay y en qué secciones están?
– ¿Qué se va a mostrar en cada sección/subsección?
– ¿A que página entra? (si no hay intro, landing page)
En el caso de que el proyecto sea complejo (una tienda, un portal etc. o incluso en alguna sección de
los sitios sencillos), explicar el funcionamiento de cada sección/subsección, con sus detalles,
separando bien la parte de usuario y la de administrador (si hubiera ), y especificando como
funciona cada una:
– ¿Que sección es? ¿Que hace? ¿Para que sirve? ¿Donde lleva? ¿Que
debe mostrar?

14. EJEMPLO DE BRIEFING 1
1. Ordenar contenidos
– ¿Donde van los contenidos dados?
– ¿Donde irían los contenidos que faltan?
Esto es para recibir los materiales con un mínimo orden, que no tengamos que adivinar donde van los textos
y las imágenes (para evitar cosas como un cd con 200 imágenes muchas parecidas, todas juntas con
nombres del tipo dsc_110.jpg directamente salidas de la cámara), porque se pierde demasiado tiempo y a
menudo se tienen que cambiar después de la entrega preliminar.

15. EJEMPLO DE BRIEFING 1
1. Requisitos tecnológicos
– Resolución de la pantalla.
Por ejemplo puede ser el diseño de una intranet donde los usuarios de la misma tengan todos el
monitor a 1024x768), diseño fijo/elástico/liquido y los dispositivos para los que debe ir diseñada la
web (por si quiere adaptar los estilos para una PDA por ejemplo).
– Gestión de contenidos.
1. Presupuesto
– ¿Cuánto dinero está dispuesto a invertir en la aplicación web?
1. Otras observaciones
– Revisar todo lo apuntado (leyéndolo con el cliente) para asegurarse de
que no hay ningún malentendido, o confusión y que no falta nada.

16. EJEMPLO DE BRIEFING 2
1. Información básica sobre la entidad.
– Quiénes sois y a qué os dedicáis, persona de contacto técnica que va a
seguir el proyecto y la persona que va a llevar los pagos.
1. Objetivo del sitio.
– Lo más concreto posible.
1. Reparto de responsabilidades:
– Especifica claramente qué quieres que haga la empresa y qué haréis
desde la organización. Por ejemplo: la empresa sólo va a instalar una
herramienta y la organización se encargará de actualizar las noticias.

17. EJEMPLO DE BRIEFING 2
1. Estructura.
– Un esquema con las secciones principales. Por ejemplo: quiénes somos,
qué hacemos, noticias de actualidad, dónde estamos, anuncios de
voluntariado…
1. Servicios.
– Herramientas que incluirá el sitio que llevan por detrás cierta
programación: buscador, sistema de suscripción por correo-e, RSS,
sistema de estadísticas, una agenda automatizada, etc.
1. Disposición.
– Un esquema orientativo con indicaciones sobre cómo irá organizada la
estructura y los servicios. Por ejemplo: un menú superior con información
estática (quiénes somos, qué hacemos, dónde estamos, contacta) y uno
lateral con las secciones de actualidad que se renueva habitualmente
(anuncios de voluntariado, denuncias, informes…), una cabecera con el
logo y el buscador, un pie de página con la licencia copyleft, etc.

18. EJEMPLO DE BRIEFING 2
1. Referencias funcionales.
– Si hay algún sitio que funciona de forma similar al que deseas, incluye los
enlaces. Por ejemplo: si queréis hacer una red social y os gusta cómo
funciona Ning más que Facebook, agregad el enlace explicando qué cosa
os gusta.
1. Referencias estéticas.
– Si tenéis algún material ya diseñado anteriormente (logos, folletos…), un
libro con pautas estéticas o conocéis sitios con una estética que os gusta,
aportad todas estas referencias.
1. Requerimientos tecnológicos.
– Software libre o privativo.
1. Administrador.
– Si queréis contar con una herramienta con la que accedáis al sitio y lo
actualicéis o modifiquéis de forma sencilla

19. EJEMPLO DE BRIEFING 2
1. Nivel de accesibilidad.
2. Usabilidad.
3. Compatibilidad con diferentes navegadores.
– Especificar cuáles: Internet Explorer, Mozilla, Ópera, Google Chrome…
1. Indicad si necesitáis un alojamiento (hosting) o no.
– Si disponéis de uno, también podéis especificar qué cualidades tiene:
capacidad, bases de datos, etc. Esta información técnica te la da la
empresa o web donde has contratado el servicio.

20. EJEMPLO DE BRIEFING 2
1. Indicad si necesitáis un dominio o no.
2. Plazos.
– Indicar cuándo se debe entregar la propuesta con el presupuesto y para
qué fecha pensáis que debería estar el sitio en funcionamiento.

21. EJEMPLO DE BRIEFING 2
1. Presupuesto.
– Desglosado lo máximo posible que incluya cuánto cuesta el hosting, el
diseño, la maquetación, etc.
1. Presupuesto para el mantenimiento del proyecto.
2. Metodología de trabajo.
– Cómo y cuándo os irán informando de sus avances. En proyectos grandes,
puede ser recomendable utilizar un gestor de proyectos.

22. DEFINICIÓN Y ORGANIZACIÓN DE
CONTENIDOS
Taxonomías y arquitectura de la información

23. • Un sitio que contiene información bien estructurada y clasificada puede
ser fácilmente entendido por otros sitios web y por los buscadores.
• Permite al usuario encontrar fácilmente lo que busca, facilitando la
interacción entre usuario y el espacio de información.
• El crecimiento del sitio web, así como su adaptación a otras
plataformas tecnológicas será más fácil.

24. LAS TAXONOMÍAS
• Ciencia que se ocupa de los principios, métodos y fines de la clasificación.
• Clasificación que se realiza según esta ciencia, en especial la que ordena, jerarquiza y nombra,
dentro de la biología, los seres vivos.
Las taxonomías en el ámbito del diseño web permiten crear la
jerarquía y organización de los contenidos que se presentan en un
sitio web, intentando establecer coincidencias entre la terminología
del usuario y la del sistema.
Cuanto mayor sea la estructuración y organización de la
información, más fácil será para el usuario hallar lo que realmente
busca.

26. ARQUITECTURA DE LA INFORMACIÓN
• Es la disciplina que se ocupa de estructurar y organizar los
contenidos (información) de los sitios web e intranets con el fin
de ayudar a los usuarios a encontrar y manejar la información.
• No se ocupa de los aspectos formales del diseño de las
interfaces.
Una vez determinadas las etiquetas [taxonomías] que designarán
al contenido, se pasa a la creación de los esquemas estructuras
de organización de la información.

27. ARQUITECTURA DE LA INFORMACIÓN
EL ÁRBOL DE CONTENIDOS
• Muestra de manera práctica cuántas secciones tendrá el sitio
en desarrollo y cuántos niveles habrá dentro de cada uno.

28. ESTRUCTURAR LA NAVEGACIÓN
Sistemas de navegación

29. SISTEMAS DE NAVEGACIÓN
• Una vez que se cuenta con los árboles de contenido
desarrollados, la tarea siguiente consiste en generar los
sistemas de acceso a dichos contenidos en el Sitio Web.
– NAVEGACIÓN TEXTUAL: menús, guías, botones y otros
elementos que deben ser claramente distinguibles dentro de la
interfaz.
– NAVEGACIÓN CONTEXTUAL: elementos basados en texto o
gráficos (imágenes).

30. CARÁCTERÍSTICAS DE LA NAVEGACIÓN
• CONSISTENTE: el sistema debe ser similar en todo el sitio, en
lo referido a su ubicación y disposición en las páginas.
• UNIFORME: el sistema debe utilizar similares términos con el
fin de que el usuario confíe en que sus opciones llevan siempre
hacia los mismos lugares dentro del sitio.
• VISIBLE: el sistema debe distinguirse claramente dentro del
sitio, con el fin de que el usuario cuente con él, como si se
tratara de una guía permanente en el área en que se encuentre
del sitio.

31. TIPOS DE ESTRUCTURA
LINEAL CON
JERÁRQUICA
JERARQUÍA
LINEAL RED

32. PROTOTIPADO
Esbozar el site

33. EN QUÉ CONSISTE EL PROTOTIPADO
Es una representación esquemática de una página web
(sin elementos gráficos) que muestra contenido y
comportamiento de las páginas.
Sirve como herramienta de comunicación y discusión
entre arquitectos de información, programadores,
diseñadores y clientes.
También se puede utilizar para comprobar la usabilidad
de un sitio web. [Interacción]

34. EJEMPLOS
Es posible que oigáis hablar de wireframes y
mockups… viene a ser lo mismo.

35. CÓMO CONSTRUIR VUESTROS
PROTOTIPOS
• Estáticos:
– Papel y lápiz.
– Illustrator, InDesign…
• Dinámicos, es decir, que muestran la interacción:
– AXURE [http://www.axure.com/]
– FIREWORKS, no está pensado para hacer prototipos, pero tiene
posibilidades de interacción.

36. MÁS EJEMPLOS

38. ALGUNOS RECURSOS DE UTILIDAD
• http://konigi.com/tools/wireframe-magnets-diy-kit
• http://konigi.com/tools/graph-paper
• http://webwithoutwords.com/blog/

39. UNIDAD 2
Diseño

40. RESOLUCIONES DE PANTALLA
Saber para qué dispositivos vamos a diseñar

41. RESOLUCIÓN DE PANTALLA
• Es número de píxeles que puede ser mostrado en la pantalla. Viene
dada por el producto del ancho por el alto, medidos ambos en píxeles.
Resoluciones de pantalla más utilizadas (febrero 2012)

42. RESOLUCIONES DE PANTALLA MÁS
USADAS
Resolución % de uso
1024 x 768 16,22%
1366 x 768 13,49%
1280 x 800 12,72%
1280 x 1024 8,43%
1440 x 900 6,35%
1920 x 1080 4,65%
1680 x 1050 4,17%
320 x 480 3,72%
1600 x 900 3,39%
768 x 1024 3,17%

43. RESOLUCIONES DE DISPOSITIVOS
MÓVILES
320x240 Blackberry, Android, Symbian OS
320x480 Apple OS, Android
480x360 Blackberry
360x640 Symbian OS
480x800 Android, Linux, Windows mobile 6 - 7
768x1024 iPad
640x960 iPhone
1280x800 Android, Apple OS, Windows OS

44. PREPARAR VUESTRO .PSD PARA EMPEZAR
A TRABAJAR
• Una vez hayáis determinado para qué dispositivos vais a
trabajar, podéis empezar a montar vuestro .psd
• Porque… ¡OJO! El área del lienzo de vuestro psd no será la
misma que las resoluciones de pantalla, sino algo menos.
• Haced la prueba…
1. Abre tu navegador.
2. Haz un pantallazo.
3. Ábrelo con photoshop y colorea la zona visible.
4. Cambia la resolución de tu pantalla y repite la operación.

45. RETÍCULA
Hacer que todo encaje y reutilizar código

46. LA RETÍCULA
• Limitaciones:
– Tamaño de los anuncios, si los hubiera (periódicos y sitios
comerciales)
– Tamaños de imágenes (apaisados o verticales, por ejemplo en
publicaciones de moda)

47. LA RETÍCULA
12 UNIDADES 3 COLUMNAS
QuickTimeﾪ and a QuickTimeﾪ and a
decompressor decompressor
are needed to see this picture. are needed to see this picture.

48. LA RETÍCULA
2 COLUMNAS 4 COLUMNAS
QuickTimeﾪ and a QuickTimeﾪ and a
decompressor decompressor
are needed to see this picture. are needed to see this picture.

49. LA RETÍCULA
6 COLUMNAS
QuickTimeﾪ and a
decompressor
are needed to see this picture.

50. DISEÑAR PARA WEB CON PHOTOSHOP
Hay quien utiliza fireworks o quien maqueta
directamente tecleando código…
Cada uno donde más a gusto se encuentre.

51. VUESTROS ARCHIVOS SIEMPRE
PREPARADOS
• En mi caso se trata de un PSD con las resoluciones estándar y
con la retícula ya definida.

52. UNIDAD 3
Producción

53. DOMINIOS Y ALOJAMIENTOS
El nombre de tu sitio y su hospedaje

54. DOMINIOS
• Un dominio es el nombre con que es identificado un sitio Web
[www.tudominio.es]
• El propósito de los nombres de dominio de Internet y del sistema de
nombres de dominio (DNS) es traducir una dirección IP.
– Todos los ordenadores, en el momento en que están conectados, tienen
un número asignado: una dirección de IP. [http://www.see-my-ip.com/]
– Sin embargo, nos es fácil de recordar los nombres de dominio que la serie
de números que componen una dirección de IP.

55. DIRECCIÓN IP Y DNS
• Dirección IP: es una etiqueta numérica que identifica a un dispositivo
(habitualmente una computadora) dentro de una red que utilice el protocolo de
Internet (Internet Protocol). Ejemplos:
– 127.255.255.255
– 172.31.255.255
• DNS (Domain Name System) o sistema de nombres de dominio: este sistema
asocia las direcciones IP con nombres de dominios. Su función es traducir
nombres inteligibles para los humanos en identificadores binarios asociados con
los equipos conectados a la red, esto con el propósito de poder localizar y
direccionar estos equipos mundialmente.
• Aquí está explicado de manera muy básica:
http://www.youtube.com/watch?v=8hp_yIyCqCc

56. ALOJAMIENTO WEB - HOSTING
• El alojamiento web (en inglés web hosting) es el servicio que
provee a los usuarios de un sistema para poder almacenar
información (textos, imágenes, vídeo, o cualquier otro tipo de
contenido) accesible vía web.
• De forma muy simple, es un lugar [SERVIDOR] donde
almacenar tu página web o correos electrónicos.
– Un servidor es un ordenador que, formando parte de una red,
provee servicios a otras ordenadores denominadas CLIENTES.

57. TIPOS DE ALOJAMIENTO
• Alojamiento gratuito: estos servicios generalmente agregan publicidad
en los sitios y tienen un espacio y tráfico limitado. [ej. Geocities o los
que proporcionan los proveedores de internet como Movistar]
• Alojamiento compartido: en este tipo de servicio se alojan clientes de
varios sitios en un mismo servidor. Resulta una alternativa muy buena
para pequeños y medianos clientes.
• Alojamiento de imágenes: servicio para guardar imágenes en internet,
la mayoría de estos servicios son gratuitos. [ej. imageshack.us]

58. TIPOS DE ALOJAMIENTO
• Servidores virtuales: la empresa ofrece el control de un ordenador
aparentemente no compartido, que se realiza mediante una máquina
virtual. Se pueden administrar varios dominios de forma fácil y
económica, además de elegir los programas que se ejecutan en el
servidor. Recomendado para empresas de diseño y programación web.
• Servidores dedicados: es un ordenador comprado o arrendado que se
utiliza para prestar servicios dedicados, generalmente relacionados con
el alojamiento web y otros servicios en red.
• Alojamiento en la nube: (cloud hosting) está basado en las tecnologías
que permiten a un gran número de máquinas actuar como un sistema
conectadas a un grupo de medios de almacenamiento.

59. ASÍ ES UN SERVIDOR
Para ver esta pelﾒcula, debe Para ver esta pelﾒcula, debe
disponer de QuickTimeﾪ y de disponer de QuickTimeﾪ y de
un descompresor .
un descompresor .

60. CLIENTES Y SERVIDORES

61. FTP
Subir y bajar archivos de tu ordenador al servidor y
viceversa

62. QUÉ ES FTP
• FileTransferProtocol
– (Protocolo de Transferencia de Archivos): desde un equipo cliente
se puede conectar a un servidor para descargar archivos desde él
o para enviarle archivos, independientemente del sistema operativo
utilizado en cada equipo.

63. DATOS NECESARIOS PARA CONECTAR
• La dirección del servidor
• El usuario
• La contraseña
En FileZilla:
DIRECCIÓN USUARIO CONTRASEÑA
DEL
SERVIDOR

64. DATOS NECESARIOS PARA CONECTAR
En Dreamweaver: site > new site [advanced] > remote info > FTP
DIRECCIÓN
DEL
SERVIDOR
USUARIO
CONTRASEÑA

65. SITIO LOCAL - SITIO REMOTO
• Sitio local: conjunto de páginas, imágenes, carpetas y demás
archivos que están en tu ordenador.
• Sitio remoto: conjunto de páginas, imágenes, carpetas y demás
archivos que están en el servidor, y por lo tanto accesibles a
todo el mundo.

66. SITIO LOCAL - SITIO REMOTO en Dreamweaver
Sitio remoto Sitio local

67. SITIO LOCAL - SITIO REMOTO en FileZilla
Sitio local Sitio remoto

68. EL ESQUELETO DE UN SITIO WEB
Estructura de archivos de un sitio web

69. ESTRUCTURA DE ARCHIVOS Y CARPETAS
• Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de
carpetas y archivos.
• Como norma general, las páginas HTML se guardarán en el directorio o
carpeta principal mientras que los elementos que utilizan (audios, vídeos, hojas
de estilo, imágenes, etc) se situarán en las subcarpetas correspondientes.
– audios: archivos de audio mp3.
– css: hojas de estilo css.
– descargas: archivos zip, exe, etc que se ofrecen para descarga.
– images: imágenes jpg, gif o png.
– pdf: documentos pdf.
– scripts: archivos js con código javascript reutilizable.
– swfs: archivos con animaciones flash (*.swf).
– vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv

71. DOCUMENTOS HTML
Los pilares de una web