Así como los grandes artistas conocen sus herramientas, los buenos diseñadores deben controlar la tecnología escondida detrás de la creación Web. Este libro enseña varias herramientas que se utilizan en el diseño Web, incluyendo los lenguajes HTML, CSS y JavaScript, en conjunción con los principios básicos de estética y usabilidad. Está compuesto por ocho capítulos que abarcan temas como la navegación, el diseño, el color y los gráficos, la tipografía y los formularios. Los capítulos se inician con una explicación de la terminología y técnicas de las estructuras Web, e incluyen diferentes fragmentos de código para explicar cómo implementar exactamente el concepto de diseño tratado. Aprenderá a aplicar las reglas del diseño para crear sitios atractivos y convertirse en un profesional en este campo. Una completa exposición sobre la estética del diseño Web, la implementación en los proyectos y el impacto visual.ÍndiceAgradecimientos Sobre la autora INTRODUCCIÓN ¿Y cuáles son los temas sobre los que trata este libro? Público objetivo Elementos de este libro CAPÍTULO 1. INTRODUCCIÓN A LAS TÉCNICAS DE DISEÑO WEB Introducción a la tecnología Web Tecnologías del lado del cliente Tecnologías del lado del servidor Entornos de desarrollo integrados Ciclo de vida del desarrollo de un sitio Web Prototipos/Desarrollo rápido de aplicaciones Introducción al análisis de contenidos Introducción al análisis de la arquitectura del sitio Introducción a los factores de usabilidad Principios de usabilidad Comprobar la usabilidad Introducción al diseño visual ¿Diseño visual o usabilidad? La imagen de marca: Crear una identidad Crear un sitio Web atractivo La metáfora como herramienta de diseño Notas generales sobre el diseño Introducción al diseño de la interacción Introducción a la accesibilidad en Internet Tipos de discapacidad Directrices de accesibilidad Recursos de accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 2. ANÁLISIS DE SITIOS WEB Clarificar los objetivos de la empresa Incrementar los beneficios Propagar información Servir como interfaz de usuario para una aplicación empresarial Identificar el público objetivo Identificar los objetivos de nuestros visitantes Determinar las restricciones del sitio Determinar el contenido del sitio Creación del contenido Crear una página Web adictiva Definir la arquitectura del sitio Las etiquetas Categorizar los temas Organización de la estructura del sitio para los desarrolladores Resumen La lista de tareas del diseño CAPÍTULO 3. NAVEGACIÓN Introducción a la navegación Principios de la navegación Elementos de navegación obligatorios Organizar la estructura de navegación para que coincida con la estructura del sitio Funciones de los vínculos Hipervínculos internos Hipervínculos externos Vínculos de descarga Vínculos de correo electrónico Vínculos de notas Claves visuales de la navegación Estados de los vínculos Vínculo disponible/en reposo Vínculo disponible/de sustitución Vínculo activo Vínculo visitado Vínculo actual Texto de navegación Redacción de los vínculos de texto Claves visuales de los vínculos de texto Mejorar el aspecto de los enlaces de texto Imágenes de navegación Claves visuales de las imágenes de navegación Imágenes de sustitución Iconos de navegación Mapas de imágenes Imágenes divididas con áreas interactivas Herramientas para organizar la navegación Menús Marcos Funciones de búsqueda local Vínculos contextuales Teasers Mapas del sitio, tablas de contenidos, índices del sitio y directorios Rutas de navegación Métodos abreviados de teclado Páginas de bienvenida Menú de favoritos Fiabilidad de los vínculos Navegación y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 4. DISEÑO DE PÁGINA Consideraciones técnicas Consideraciones sobre el tamaño de los archivos Tamaño de monitor y resolución de pantalla Tamaño horizontal de la página Tamaño vertical de la página Herramientas para el diseño de página Cuestiones estéticas Llenar la pantalla Creación de bloques para el diseño de la página Armonía visual Colocar los elementos en la página El guión gráfico: Crear el boceto del sitio Utilizar un editor de imágenes para crear la composición Utilizar HTML para crear la composición Plantillas de página Diseño de la página y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 5. EL COLOR La teoría del color La rueda de colores Atributos del color Modelo de color sustractivo: Luz reflejada Modelo de color aditivo: Luz proyectada Los códigos de color RGB La paleta de colores seguros para Internet Visualización del color en diferentes sistemas Definir colores para la Web Escoger entre las paletas de color predefinidas Tomar muestras de color Mezcla manual de colores Escoger un esquema de colores Proporciones de los colores Esquemas de color Inspiración para los esquemas de color El contraste de los colores Colores de fondo Colores de los vínculos Materiales impresos Color y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 6. GRÁFICOS Principios y términos básicos Principios sobre la utilización de gráficos Terminología Formatos de imagen para la Web Gráficos en formato JPG Gráficos GIF Gráficos en formato PNG Combinación de imágenes Adquirir imágenes Bancos de imágenes y cliparts Utilidades de captura de pantalla Escáneres Cámaras digitales Crear y editar imágenes Imágenes con capas Exportar imágenes Conseguir que coincidan los colores de diferentes aplicaciones Fuentes dingbat Efectos, filtros, texturas y tramas Diseño de logotipos Inspiración para diseñar imágenes Imágenes de fondo El contraste de las imágenes de fondo Fondos en mosaico Fondos con una imagen a pantalla completa Fondos con imágenes parciales Una alternativa a las imágenes de fondo Consejos para trabajar con gráficos Piense en píxeles Utilice ecos visuales Tenga siempre un GIF de 1x1 píxel a mano Evite utilizar los clichés típicos de Internet Considere la utilización de bordes de imágenes Utilice Dreamweaver para crear imágenes de sustitución remotas Dar nombre a las imágenes por su función, no por sus atributos visuales Animaciones Terminología de la animación Formatos de animación Gráficos y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 7. TIPOGRAFÍA Aspectos básicos de la tipografía Cuerpo de texto y tipografía decorativa Tipos de letra Formato y contraste Espaciado Justificación Tipografía y diseño Web Texto HTML Fuentes HTML Tamaños de fuentes HTML Formato HTML Espaciado de texto HTML Justificación del texto HTML Diseño de texto HTML Caracteres especiales y signos de puntuación en HTML Texto gráfico Texto y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 8. FORMULARIOS Principios básicos sobre los formularios Web Reduzca el esfuerzo físico Reduzca el esfuerzo cognitivo Evite pedir información que parezca innecesaria Controles del formulario Botones de opción Casillas de verificación Cuadros de lista Campos para introducir texto de una línea Campos para introducir texto de varias líneas Finalizar los formularios Validación de formularios Botones Enviar Botones Borrar Alguno trucos sobre los botones Enviar y Borrar Estructura de la transacción Asistentes Paneles de control Diseño de la página de formulario Controlar el foco del cursor y el orden de tabulación Mostrar los campos en el orden esperado Agrupar los controles por categorías Ayuda al usuario Principios básicos de la ayuda al usuario Instrucciones Documentos de ayuda Retroalimentación Gestión de errores Diseño visual de los controles de formulario Formularios Web y accesibilidad Resumen La lista de tareas del diseño ÍNDICE ALFABÉTICO
Así como los grandes artistas conocen sus herramientas, los buenos diseñadores deben controlar la tecnología escondida detrás de la creación Web. Este libro enseña varias herramientas que se utilizan en el diseño Web, incluyendo los lenguajes HTML, CSS y JavaScript, en conjunción con los principios básicos de estética y usabilidad. Está compuesto por ocho capítulos que abarcan temas como la navegación, el diseño, el color y los gráficos, la tipografía y los formularios. Los capítulos se inician con una explicación de la terminología y técnicas de las estructuras Web, e incluyen diferentes fragmentos de código para explicar cómo implementar exactamente el concepto de diseño tratado. Aprenderá a aplicar las reglas del diseño para crear sitios atractivos y convertirse en un profesional en este campo. Una completa exposición sobre la estética del diseño Web, la implementación en los proyectos y el impacto visual.ÍndiceAgradecimientos Sobre la autora INTRODUCCIÓN ¿Y cuáles son los temas sobre los que trata este libro? Público objetivo Elementos de este libro CAPÍTULO 1. INTRODUCCIÓN A LAS TÉCNICAS DE DISEÑO WEB Introducción a la tecnología Web Tecnologías del lado del cliente Tecnologías del lado del servidor Entornos de desarrollo integrados Ciclo de vida del desarrollo de un sitio Web Prototipos/Desarrollo rápido de aplicaciones Introducción al análisis de contenidos Introducción al análisis de la arquitectura del sitio Introducción a los factores de usabilidad Principios de usabilidad Comprobar la usabilidad Introducción al diseño visual ¿Diseño visual o usabilidad? La imagen de marca: Crear una identidad Crear un sitio Web atractivo La metáfora como herramienta de diseño Notas generales sobre el diseño Introducción al diseño de la interacción Introducción a la accesibilidad en Internet Tipos de discapacidad Directrices de accesibilidad Recursos de accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 2. ANÁLISIS DE SITIOS WEB Clarificar los objetivos de la empresa Incrementar los beneficios Propagar información Servir como interfaz de usuario para una aplicación empresarial Identificar el público objetivo Identificar los objetivos de nuestros visitantes Determinar las restricciones del sitio Determinar el contenido del sitio Creación del contenido Crear una página Web adictiva Definir la arquitectura del sitio Las etiquetas Categorizar los temas Organización de la estructura del sitio para los desarrolladores Resumen La lista de tareas del diseño CAPÍTULO 3. NAVEGACIÓN Introducción a la navegación Principios de la navegación Elementos de navegación obligatorios Organizar la estructura de navegación para que coincida con la estructura del sitio Funciones de los vínculos Hipervínculos internos Hipervínculos externos Vínculos de descarga Vínculos de correo electrónico Vínculos de notas Claves visuales de la navegación Estados de los vínculos Vínculo disponible/en reposo Vínculo disponible/de sustitución Vínculo activo Vínculo visitado Vínculo actual Texto de navegación Redacción de los vínculos de texto Claves visuales de los vínculos de texto Mejorar el aspecto de los enlaces de texto Imágenes de navegación Claves visuales de las imágenes de navegación Imágenes de sustitución Iconos de navegación Mapas de imágenes Imágenes divididas con áreas interactivas Herramientas para organizar la navegación Menús Marcos Funciones de búsqueda local Vínculos contextuales Teasers Mapas del sitio, tablas de contenidos, índices del sitio y directorios Rutas de navegación Métodos abreviados de teclado Páginas de bienvenida Menú de favoritos Fiabilidad de los vínculos Navegación y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 4. DISEÑO DE PÁGINA Consideraciones técnicas Consideraciones sobre el tamaño de los archivos Tamaño de monitor y resolución de pantalla Tamaño horizontal de la página Tamaño vertical de la página Herramientas para el diseño de página Cuestiones estéticas Llenar la pantalla Creación de bloques para el diseño de la página Armonía visual Colocar los elementos en la página El guión gráfico: Crear el boceto del sitio Utilizar un editor de imágenes para crear la composición Utilizar HTML para crear la composición Plantillas de página Diseño de la página y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 5. EL COLOR La teoría del color La rueda de colores Atributos del color Modelo de color sustractivo: Luz reflejada Modelo de color aditivo: Luz proyectada Los códigos de color RGB La paleta de colores seguros para Internet Visualización del color en diferentes sistemas Definir colores para la Web Escoger entre las paletas de color predefinidas Tomar muestras de color Mezcla manual de colores Escoger un esquema de colores Proporciones de los colores Esquemas de color Inspiración para los esquemas de color El contraste de los colores Colores de fondo Colores de los vínculos Materiales impresos Color y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 6. GRÁFICOS Principios y términos básicos Principios sobre la utilización de gráficos Terminología Formatos de imagen para la Web Gráficos en formato JPG Gráficos GIF Gráficos en formato PNG Combinación de imágenes Adquirir imágenes Bancos de imágenes y cliparts Utilidades de captura de pantalla Escáneres Cámaras digitales Crear y editar imágenes Imágenes con capas Exportar imágenes Conseguir que coincidan los colores de diferentes aplicaciones Fuentes dingbat Efectos, filtros, texturas y tramas Diseño de logotipos Inspiración para diseñar imágenes Imágenes de fondo El contraste de las imágenes de fondo Fondos en mosaico Fondos con una imagen a pantalla completa Fondos con imágenes parciales Una alternativa a las imágenes de fondo Consejos para trabajar con gráficos Piense en píxeles Utilice ecos visuales Tenga siempre un GIF de 1x1 píxel a mano Evite utilizar los clichés típicos de Internet Considere la utilización de bordes de imágenes Utilice Dreamweaver para crear imágenes de sustitución remotas Dar nombre a las imágenes por su función, no por sus atributos visuales Animaciones Terminología de la animación Formatos de animación Gráficos y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 7. TIPOGRAFÍA Aspectos básicos de la tipografía Cuerpo de texto y tipografía decorativa Tipos de letra Formato y contraste Espaciado Justificación Tipografía y diseño Web Texto HTML Fuentes HTML Tamaños de fuentes HTML Formato HTML Espaciado de texto HTML Justificación del texto HTML Diseño de texto HTML Caracteres especiales y signos de puntuación en HTML Texto gráfico Texto y accesibilidad Resumen La lista de tareas del diseño CAPÍTULO 8. FORMULARIOS Principios básicos sobre los formularios Web Reduzca el esfuerzo físico Reduzca el esfuerzo cognitivo Evite pedir información que parezca innecesaria Controles del formulario Botones de opción Casillas de verificación Cuadros de lista Campos para introducir texto de una línea Campos para introducir texto de varias líneas Finalizar los formularios Validación de formularios Botones Enviar Botones Borrar Alguno trucos sobre los botones Enviar y Borrar Estructura de la transacción Asistentes Paneles de control Diseño de la página de formulario Controlar el foco del cursor y el orden de tabulación Mostrar los campos en el orden esperado Agrupar los controles por categorías Ayuda al usuario Principios básicos de la ayuda al usuario Instrucciones Documentos de ayuda Retroalimentación Gestión de errores Diseño visual de los controles de formulario Formularios Web y accesibilidad Resumen La lista de tareas del diseño ÍNDICE ALFABÉTICO 