taller diseño-web

TALLER DE DISEÑO WEB

Iniciación

ÍNDICE

UNIDAD 1: PLANIFICACIÓN

1. Análisis de necesidades y objetivos: el briefing web

2. Definición de contenidos3. Estructurar la navegación4. Prototipado

UNIDAD 2: DISEÑO

1. Resoluciones2. Retícula - webs modulables 3. Diseñar para web con photoshop

UNIDAD 3: PRODUCCIÓN

1. Dominios y alojamientos2. Gestores de FTP y editores de

texto: dreamweaver, dos en uno3. El esqueleto de la página: los

documentos html4. Los estilos: las css5. Interactuar con el usuario: javascript

y sus librerías6. Armando la página: maquetación

html7. Dándole estilo: css8. Testeo cross browser

UNIDAD 1

Planificación

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.

¿QUÉ OTRAS FUNCIONES - BENEFICIOS DE LA PLANIFICACIÓN SE OS OCURREN?

PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO

Soluciones más ajustadas a las necesidades

Distribución adecuada de tiempos de trabajo

Posibilidad de controlar sus márgenes de beneficio

Control de la inversión

¿SE OS OCURRE ALGÚN INCONVENIENTE?

PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO

LAS FASES DEL PROYECTO WEB

1. Problema2. Definición del problema3. Elementos del problema4. Recopilación de datos5. Análisis de datos6. Creatividad

1. Materiales y tecnologías2. Experimentación3. Modelos4. Validación5. Dibujos constructivos6. Solución

En general, son las mismas que para cualquier proyecto de diseño, adaptadas con un poco de sentido común. [B. Munari]

EL BRIEFING

Análisis de necesidades y objetivos

¿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.

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.

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).

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.

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?

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.

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.

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.

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.

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

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.

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.

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.

DEFINICIÓN Y ORGANIZACIÓN DE CONTENIDOS

Taxonomías y arquitectura de la información

• 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.

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.

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.

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.

ESTRUCTURAR LA NAVEGACIÓN

Sistemas de navegación

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).

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.

TIPOS DE ESTRUCTURA

LINEAL

LINEAL CON JERARQUÍA

RED

JERÁRQUICA

PROTOTIPADO

Esbozar el site

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]

EJEMPLOS

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

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.

MÁS EJEMPLOS

ALGUNOS RECURSOS DE UTILIDAD

• http://konigi.com/tools/wireframe-magnets-diy-kit• http://konigi.com/tools/graph-paper• http://webwithoutwords.com/blog/

UNIDAD 2

Diseño

RESOLUCIONES DE PANTALLA

Saber para qué dispositivos vamos a diseñar

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)

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%

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

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.

RETÍCULA

Hacer que todo encaje y reutilizar código

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)

LA RETÍCULA

QuickTime and aﾪ decompressor

are needed to see this picture.

QuickTime and aﾪ decompressor

are needed to see this picture.

12 UNIDADES 3 COLUMNAS

LA RETÍCULA

2 COLUMNAS 4 COLUMNAS

QuickTime and aﾪ decompressor

are needed to see this picture.

QuickTime and aﾪ decompressor

are needed to see this picture.

LA RETÍCULA

6 COLUMNAS

QuickTime and aﾪ decompressor

are needed to see this picture.

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.

VUESTROS ARCHIVOS SIEMPRE PREPARADOS

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

UNIDAD 3

Producción

DOMINIOS Y ALOJAMIENTOS

El nombre de tu sitio y su hospedaje

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.

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

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.

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]

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.

ASÍ ES UN SERVIDOR

Para ver esta pel cula, debeﾒdisponer de QuickTime y deﾪ

un descompresor .

Para ver esta pel cula, debeﾒdisponer de QuickTime y deﾪ

un descompresor .

CLIENTES Y SERVIDORES

FTP

Subir y bajar archivos de tu ordenador al servidor y viceversa

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.

DATOS NECESARIOS PARA CONECTAR

• La dirección del servidor• El usuario• La contraseña

DIRECCIÓN DEL

SERVIDOR

USUARIO CONTRASEÑA

En FileZilla:

DATOS NECESARIOS PARA CONECTAR

DIRECCIÓN DEL

SERVIDOR

USUARIO

CONTRASEÑA

En Dreamweaver: site > new site [advanced] > remote info > FTP

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.

SITIO LOCAL - SITIO REMOTO en Dreamweaver

Sitio localSitio remoto

SITIO LOCAL - SITIO REMOTO en FileZilla

Sitio local Sitio remoto

EL ESQUELETO DE UN SITIO WEB

Estructura de archivos de un sitio web

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

DOCUMENTOS HTML

Los pilares de una web