Transcript U1 – Principios de Diseño Web

DESARROLLO DE APLICACIONES
CON TECNOLOGÍAS WEB
Elaboración de documentos web
mediante lenguajes de marcas
1. Diseño web
Principios de Diseño Web
El diseño web NO sólo es inspiración. Tiene una
serie de objetivos previos:
–
Audiencia o público objetivo.
–
Conocer previamente los objetivos del site.
–
Adaptarse al medio (móvil, tablet, ordenador)
–
Ser eficiente y rápido (posicionamiento)
Principios de Diseño Web
En definitiva, el diseñador web debe trabajar
conjuntamente con los desarrolladores web, el
equipo de marketing, de e-commerce, de
contenidos, con todos.
Buenas Prácticas en Diseño Web
Composición:
La composición debe guiar al usuario.
Distinguiendo áreas de información,
navegación principal, secundaria, local, etc.
Establecer áreas “verticales”. Sobre todo en
páginas principales o portales de información.
Cabecera y pie: el encabezado presenta la
identidad gráfica del sitio y el pie (por lo general)
presenta el origen del sitio y enlaces acerca del
sitio.
Buenas Prácticas en Diseño Web
Dimensiones:
Como diseñadores web tenemos siempre en
cuenta todo tipo de plataformas y sus distintas
características.
Buenas Prácticas en Diseño Web
Elementos de navegación:
La navegación principal debe destacar
claramente.
El diseño web debe ayudar al usuario a saber
dónde está (migas de pan). Los cambios de
colores o ubicaciones pueden desorientar.
Buenas Prácticas en Diseño Web
Tipografía:
Debe ser legible
El tamaño y el interlineado facilitan la lectura.
Un diseño web eficiente utiliza Web-safe fonts
No abusar de demasiadas fuentes o estilos
Buenas Prácticas en Diseño Web
Color:
El color afecta a la sensación del sitio web.
Es siempre preferible un diseño limpio, sin
excesos.
Es preciso encontrar el contraste adecuado entre
colores.
Conviene mantener la consistencia de los colores
según la funcionalidad de los elementos.
Mejor no usar colores vivos en tipografías.
Buenas Prácticas en Diseño Web
Imágenes:
El uso excesivo de imágenes en una página
resulta poco funcional.
Toda imagen debe ser optimizada para web (JPG,
PNG, GIF)
Imágenes de diversos tipos: las que apoyan al
contenido y las que son parte de la identidad del
sitio web.
Diseño orientado al usuario
Por su audiencia:
Públicos: Abiertos a todos los usuarios.
Extranet: Páginas o secciones de páginas
accessibles sólo como usuarios
Intranet: Páginas que son accesibles sólo en
redes privadas o VPN.
Diseño orientado al usuario
Por su dinamismo:
Sitios Interactivos: El usuario puede influir sobre
el contenido del sitio por medio de formularios,
etc. (PHP, ASP, JAVA)
Sitios estáticos: Los usuarios no pueden modificar
o añadir nada al sitio.
Diseño orientado al usuario
Por su apertura:
Abiertos: Se puede acceder directamente por
URL.
Cerrados: Para acceder al contenido hay que
estar autenticados
Semicerrados
Diseño orientado al usuario
Por su profundidad:
Por el número de clicks a realizar para consultar
cualquier contenido.
NUNCA MÁS DE 3 CLICKS
Diseño orientado al usuario
Diseño orientado a objetivos:
Comerciales/Tiendas: Samsung, Amazon, Apple...
Informativos: The Guardian, El País, Heraldo...
Ocio: FB, carteleras, foros...
Navegación: Google, Yahoo...
Artísticos: DeviantArt, Museo del Louvre
Personales: Blogs...
Diseño orientado al usuario
Diseño orientado a la implementación:
Debemos pensar siempre en que lo que
diseñemos o pensemos debe de seguir unos
estándares web y unas herramientas.
NO debemos de pensar que si funciona en
nuestro navegador se ve bien en todos.
SIEMPRE se debe de ver correctamente en el
ordenador del jefe/cliente. ;-)
Diseño orientado al usuario
Diseño orientado a la implementación:
Normas a seguir:
●
●
Especificación HTML5(Draft)/XHTML 1.1 (W3C)
y CSS3 (W3C) http://validator.w3.org/
Test de Accesibilidad http://www.tawdis.net/
El proceso de diseño web
Determinar objetivos:
¿Para qué se quiere un sitio web?
¿Perfiles de usuarios?
¿Mensaje que se quiere transmitir?
¿Cual es su competencia?
¿Por qué alguien compraría el producto?
¿Qué espera del sitio?
Investigación etnográfica y estudio de campo
Estructura de un sitio web
Elaborar un mapa de navegación:
Distribución del contenido
Mantener un estilo consistente a lo largo de
toda la web
- Imagen corporativa/título
- Menú/s de navegación
- Elementos de comunicación con los usuarios
- Formularios de búsqueda
- Posicionamiento de imágenes
- Disposición armoniosa del texto
Estructuras de Navegación (I)
Secuencial o lineal: La secuencia no tiene
profundidad y simplemente son páginas
consecutivas.
Principalmente en Blogs, páginas sencillas y
páginas personales.
http://www.jorgerigabert.com/
Estructuras de Navegación (II)
Estructuras en parrilla: manuales de
procedimientos, listados de cursos universitarios,
descripciones médicas de casos...
Estructuras de Navegación (III)
Estructuras jerárquicas: Se utiliza en sites
complejos. Cuando se adopta un sistema
jerárquico se intentan agrupar contenidos
similares. Es la más habitual.
http://www.apple.es/
Estructuras de Navegación (IV)
Estructuras en web: Sin restricciones en el
patrón de la información. Se tiende a imitar el
pensamiento asociativo.
Páginas muy complejas sin una jerarquía clara,
sino agrupadas por temas.
http://www.aragob.es
Estructuras de Navegación (y V)
Estructuras mixtas: Suelen ser una
combinación de estructura jerárquica y web por
asociación de conceptos.
Principalmente las páginas comerciales y
tiendas.
http://www.amazon.es
Las Hojas de Estilo CSS
Cascade Style Sheets (estilos en cascada). Se
denomina en cascada porque se aplican
secuencialmente. Navegador, Externa, Interna,
Enlinea.
Son estructuras de datos, generalmente en un
archivo anexo al contenido que se ocupan de
los aspectos de presentación: tipo, fuente de
letras, colores y otros elementos decorativos o
posicionamiento.
Las Hojas de Estilo CSS
Ventajas:
Permite separar la parte semántica (HTML) de la
presentación y estética (CSS).
Puede adaptarse a distintos estilos según el
dispositivo (Responsive).
Puede disponer de distintas hojas de estilos
según necesidades del usuario (Accesibilidad)
Las Hojas de Estilo CSS
Permiten separar la parte semántica (HTML) de
la presentación y estética (CSS).
- Permite cambiar toda la estética sin cambiar
contenido.
- Unificar las páginas del sitio.
- Reducimos el tiempo de carga por el caché.
- Código fuente limpio.
http://www.csszengarden.com/
Estructura y comp. de Páginas
Logotipo
Contenedor
Cabeceras
Navegación
Footer
Ayudas a la navegación
Imágenes
Sketching (I)
Bosquejo a mano que nos
permite crear prototipos de
sitios web para simular la
experiencia de usuario.
Se puede realizar junto con el
cliente/usuario y recoger tanto
diseño como acciones a
realizar.
Herramienta perfecta para
trabajar en remoto.
Sketching (II)
Ventajas:
- Transmisión de ideas rápida
y sencilla.
- Comunicación rápida tanto
con el cliente/equipo
- Probar soluciones de diseño
y funcionalidad sin código
- Cualquier idea o alternativa
se implementa en el acto
- Permite un rápido acuerdo
en soluciones y acciones
Storyboard web
Serie de diagramas que
resumen la disposición del
contenido (pantallas y
acciones) en un web site.
Recoge relaciones entre las
distintas páginas y el usuario
o elementos de la web (bases
de datos, contenidos,
acciones)
Wireframing (I)
Al igual que el sketch es una
guía visual que representa el
esqueleto o estructura visual
de un sitio web.
Carece de colores, imágenes
o estilos ya que su principal
objetivo reside en la funcionalidad, comportamiento y
jerarquía de contenidos
Wireframing (II)
Los desarrolladores usan
wireframes para obtener una
aproximación más tangible de
las funcionalidades del sitio.
Los diseñadores los usan
para impulsar el diseño de la
interfaz de usuario
El dpto. comercial para
establecer comunicación con
el cliente.
Wireframing (y III)
Baja fidelidad: Boceto rápido,
con menos detalles, contenido
de prueba, texto de relleno en
latín (Lorem Ipsum).
Alta fidelidad: Se acerca al
diseño final de la página. En
ocasiones se utiliza
Photoshop para simular una
página finalizada.
Estructura de contenidos
Contenido: Un sitio Web debe ofrecer contenido, es decir,
información del tipo que sea, no una simple colección de
enlaces a otras páginas. Evitar enlaces a páginas
vacías/erróneas y listados enormes sin aportar contenido.
Longitud: Debemos de evitar las páginas excesivamente
extensas: 1) Por incomodidad al usuario; 2) Tráfico excesivo e
inútil (y caro) en ocasiones; y 3) Enlentece y castiga el
posicionamiento.
Cabeceras y semántica: Utilizar adecuadamente los
<h1>...</h6> y tags semánticos de HTML5. No para maquetar.
Nombres de ficheros
Utilizar siempre la misma convención para los nombres de
ficheros y evitar errores en las migraciones entre sites en
distintos sistemas operativos.
Utilizar siempre minúsculas. En Windows es indiferente. En
UNIX NO: Index.html, INDEX.HTML e index.html. Es preferible
y ya casi por norma utilizar la extensión .html
Mantener la misma norma para cualquier tipo de fichero.
¿Y Google qué recomienda?
Guía Oficial de Google para HTML y CSS
http://googlestyleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Blog Oficial para Webmasters de Google
http://googlewebmaster-es.blogspot.com.es/
Recopilación de las más importantes
http://www.durky.com/recomendaciones-de-google-cuando-seva-a-programar-en/
¿Y Google qué recomienda?
Identación del código: Se recomienda la identación del
código para mejorar la legibilidad. Se recomienda no utilizar
tabulaciones, sino espacios.
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
¿Y Google qué recomienda?
Minúsculas: Se recomienda el código siempre en minúsculas.
<!-- No recomendado -->
<A HREF="/">Home</A>
<!-- Sí recomendado -->
<img src="example.png"
alt="Google">
¿Y Google qué recomienda?
Espacios en blanco: Es mejor no dejar espacios en blanco si
no son necesarios.
<!-- No recomendado -->
<p>¿Qué? </p>
<!-- Sí recomendado -->
<p>Gracias</p>
¿Y Google qué recomienda?
Codificación UTF-8: Se recomienda el uso de este código de
página (UTF-8 sin BOM). Además en la página se especificará
con el meta correspondiente.
http://es.wikipedia.org/wiki/UTF-8
<meta charset="utf-8">
Evitar entidades: Gracias al UTF-8, es casi innecesario el uso
de entidades HTML salvo excepciones.
< &lt; > &gt; & &amp;
¿Y Google qué recomienda?
HTML5: Se prefiere HTML5 en los documentos, con su
cabecera correspondiente:
<!DOCTYPE html>
¿Y Google qué recomienda?
HTML Válido: ¿Obvio no?
Semántica: Obviamente Google recomienda HTML5 por la
semántica, luego exige que la respetes.
<!-- No recomendado -->
<div onclick="linkRecomendados();">Recomendados</div>
<!-- Sí recomendado -->
<a href="/recomendados/">Recomendados</a>
¿Y Google qué recomienda?
Texto alternativo: Hay que proveer de contenido alternativo en el
caso de uso de elementos multimedia. Por ejemplo, las imágenes
deberían llevar un texto alternativo.
<!-- No recomendado -->
<img src="example.png">
<!-- Sí recomendado -->
<img src="example.png"
alt="Contenido de ejemplo.">
Compatibilidad con Navegadores
Comparativa entre las distintas
características y funcionalidades
de los navegadores.
http://en.wikipedia.org/wiki/Comparison_of_
web_browsers