Manual 2021 03 Diseño Interfaces Multimedia II (2372)

DISEÑO DE
INTERFACES
MULTIMEDIA II
DISEÑO DE INTERFACES MULTIMEDIA II 2
Curso Diseño de interfaces multimedia II (2372)

Formato Manual de curso
Autor Cibertec
Título Diseño de interfaces multimedia II
Versión 2021
Páginas 169 p.
Elaborador Trujillo Hoyos, Luis Alfredo
Revisor Arroyo Salgado, Sergio Jair
CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

PUBLICIDAD
Índice
Presentación 5
Red de contenidos 6
Unidad de Aprendizaje 1
CONCEPTOS AVANZADOS PARA LA PLANIFICACIÓN DE UN SITIO WEB 7
1.1 Tema 1 : Diseño de experiencia de usuario UX 9
1.1.1 : ¿Qué es UX? 9
1.1.2 : Beneficios de aplicar UX 10
1.1.3 : Proceso para el Desarrollo de experiencia de usuario UX 11
1.1.4 : Bief e investigación de usuario 13
1.2 Tema 2 : Contenido estratégico y arquitectura de la información

1.2.1 : ¿Qué es la arquitectura de la información? 15
1.2.2 : Formas de organizar la información en una página web. 16
1.2.3 : Ventajas de organizar la información en una página web 19
1.3 Tema 3 : Qué es el diseño de interfaz de Usuario o UI. 22

1.3.1 Que es el diseño de interfaz de Usuario o UI 22
1.3.2 : Diseño de wireframe 26
1.3.3 : Mapa de recorrido del sitio. 54
1.3.4 : Test de usabilidad 55
1.3.5 : Diseño de interacción. 55
DISEÑO VISUAL DE UN SITIO WEB CON ADOBE PHOTOSHOP
62
2.1 Tema 4 : Preparación del archivo de diseño web. 62
2.1.1 : Que es un grid de diseño 62
2.1.2 : Grid pensados para diseño web responsive. 63
2.1.3 : Configurar archivo Photoshop con grid responsive. 63
2.2 Tema 5 : Diseño visual del sitio web. 69

2.2.1 : Diseño de la página de inicio 65
2.2.2 : Diseño del menú de navegación 67
2.2.3 : Diseño de contenido web 76
2.2.4 : Diseñando para Smartphone y Tablets 80
84
2.3 Tema 6 Preparando y exportando los elementos de diseño
2.3.1 División del diseño por sectores. 91
2.3.2 : Separación del diseño por archivos 89
2.3.3 : Generación de recursos de imágenes 93
94
IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

INTRDUCCIÓN A HTML5 – ONE PAGE EN DREANWEAVER 102
3.1 Tema 7 : Introducción a HTML 101
3.1.1 : Qué es HTML 103
3.1.2 : Lo nuevo en HTML5. 103
3.1.3 : Estructura HTML 105
3.1.4 : Etiquetas y atributos estructurales HTML 107
3.2 Tema 8 : Preparando un sitio web responsive en DreamWeaver 110

3.2.1 : Características principales 110
3.2.2 : Espacio de trabajo DreamWeaver 110
3.2.3 : Configuración de un sitio web 112
3.2.4 : Doctype 114
3.2.5 : ONE PAGE <head> 116
3.2.6 ONE PAGE <header> 120
3.2.7 ONE PAGE: <body> 125
3.2.8 ONE PAGE <footer> 141
O
P
A
G
E
Unidad de Aprendizaje 4 <

HOJA DE ESTILOS CSS h
4.1 Tema 9 e a CSS
: Introducción 145
a
4.1.1 : Qué es CSS d 146
4.1.2 : Estilos CCSe aplicado al menú de navegación 148
4.1.3 : Estilos CCSr aplicado al cuerpo del sitio web 1160
FF 4.1.4 > aplicado al pie de página
Estilos CCS 172
4.2 Tema 10 : Navegación
( Onepage 173
4.2.1 : Navegación
E con anclas 173
t
i
q
u
e
t
a
:
i
m
g
,
n
a
v
,
u
l
,
CARRERA DE DISEÑO GRÁFICO l IES PRIVADO CIBERTEC

PUBLICIDAD i
)
Presentación
En el curso de Diseño de Interfaces Multimedia II, los estudiantes diseñaran un sitio web que se
adapte a diferentes resoluciones de pantalla, sin la necesidad de manejar código. Utilizando
conceptos y técnicas de diseño web avanzados.
Los conceptos avanzados como “Aquitectura de la información”, “Diseño de interfaces UI” u

“Experiencia del usuario UX” nos permitirá estructurar la información del sitio, crear entornos
web amigables y de fácil uso, asi también conocer a nuestros usuarios y crear para ellos
experiencias positivas y beneficiosas.
Diseñaremos wireframes y diseños visuales pensados para adaptarse a múltiples resoluciones

de pantalla o dispositivos en el programa Adobe Photoshop. Para ello se diseñará con Grids o
grillas basados en columnas que permitan ordenar los contenidos bajo un comportamiento
responsive. Para finalmente generar los recursos de imágenes del diseño en Photoshop para
incorporarlos en Adobe Dreamweaver.
Con el diseño terminado implementaremos nuestro sitio web en el programa Adobe

Dreanweaver, que nos permitirá insertar y crear todo el contenido necesario para el desarrollo
de un sitio web empleando HTML para generar la estructura de contenido y CSS para darle
personalidad a nuestro diseño
Con todos estos recursos el objetivo es que nuestros estudiantes puedan tener una idea clara de
los aspectos involucrados en el desarrollo de un sitio web avanzado y que tengan la capacidad
de poder sacar adelante un proyecto web con todos los elementos necesarios que exige el
mercado.

Red de contenidos
Diseño de Interfaces
Multimedia II
Unidad 1 Unidad 2 Unidad 4

Unidad 3
Arquitectura Diseño de un Introducción a Hoja de estilo

y diseño sitio web con HTML5 – en cascada
avanzado de Adobe ONEPAGE con CSS
interfaces Photoshop Dreamweaver
para un sitio
web
Arquitectura

PUBLICIDAD
UNIDAD
1
CONCEPTOS AVANZADOS PARA LA
PLANIFICACION DE UN SITIO WEB
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al finalizar la unidad, el alumno define la arquitectura de un sitio web y diseña
interfaces en Photoshop aplicando los conceptos de UI / UX.
TEMARIO
1.1 Tema 1 : Diseño de experiencia de usuario UX

1.1.1 : ¿Qué es UX?
1.1.2 : Beneficios de aplicar UX
1.1.3 : Proceso para el Desarrollo de experiencia de usuario UX
1.1.4 : Bief e investigación de usuario
1.3 Tema 2 : Contenido estratégico y arquitectura de la información

1.2.1 : ¿Qué es la arquitectura de la información?
1.2.2 : Formas de organizar la información en una página web.
1.2.3 : Ventajas de organizar la información en una página web
1.3 Tema 3 : Qué es el diseño de interfaz de Usuario o UI.

1.3.1 Que es el diseño de interfaz de Usuario o UI
1.3.2 : Diseño de wireframe
1.3.3 : Mapa de recorrido del sitio.
1.3.4 : Test de usabilidad
1.3.5 : Diseño de interacción.

1.1. Diseño de experiencia de usuario UX

1.1.1. ¿Qué es UX?
La Experiencia de Usuario o UX es un término que actualmente está en esa extraña posición de

ser excitantemente nuevo para muchos, considerado como un componente esencial del proceso
de diseño web por expertos de la industria, sin embargo, la UX también genera un aire de misterio
en torno a ella. Esto es en parte porque es difícil definir exactamente qué es. Al ser entrevistados,
los profesionales de la industria dicen que el término puede ser “subjetivo” y “difícil de describir”,
ya que tiene varios significados asociados.
Dan Saffer, director de Kicker Studios, describe UX como “lo que el cliente percibe al usar o probar
un producto y una forma de ver estos productos de manera integral desde el punto de vista de un
usuario que probablemente no le importa cómo se hacen esos productos, sólo el producto en sí
mismo”.
UX Design (User Experience Design) o “Diseño de Experiencia de Usuario” es una filosofía de

diseño que tiene por objetivo la creación de productos que resuelvan necesidades concretas de
sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el
mínimo esfuerzo. Toma forma como un proceso en el que se utilizan una serie de técnicas
multidisciplinares y donde cada decisión tomada debe estar basada en las necesidades, objetivos,
expectativas, motivaciones y capacidades de los usuarios.
La mayoría de los procesos que hacen Diseño Centrado en el Usuario tienen el siguiente
esqueleto:
•Conocer a fondo a los usuarios finales, normalmente usando investigación cualitativa o

investigación cuantitativa.
•Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y
motivaciones.
•Poner a prueba lo diseñado, usando test de usuario.
En realidad, el diseño basado en experiencias de usuario se ha dado desde que el hombre ha

creado cosas y estas cosas deben ser utilizadas por él mismo o por otros, por lo que es necesario
de forma consciente o inconsciente definir los medios, procesos y formas en la que la persona
interactuará con ese objeto que puede ser software, una heladera, el control del TV, un
automóvil, etc.
El diseño de experiencia de usuario es tanto una serie de actividades (investigación, arquitectura

de información, diseño de interacción, etc.), así como un nuevo puesto de trabajo. Para proyectos
más pequeños es perfectamente factible para una sola persona planificar la arquitectura, dibujar
los wireframes, el diseño de la interfaz e incluso código de las páginas. Sin embargo, cuando un
proyecto es más complicado necesita más personas con más experiencia. Hoy, los diseñadores
web con un interés en la experiencia del usuario se ofrecen como profesionales UX.
Un profesional UX tiene una comprensión profunda de la psicología cognitiva, la interacción

persona-ordenador y diseño de investigación que sus colegas que se centraron únicamente en la
parte gráfica. Ellos tienen más experiencia en el manejo de entrevistas de usuarios finales,
evaluaciones de usabilidad y los estudios etnográficos. Serán más versados en la creación de
personajes, modelos conceptuales, los escenarios, los flujos de usuario y storyboards. Ellos serán
capaces de crear wireframes y prototipos con el uso de una amplia gama de herramientas y de
diferentes niveles de fidelidad en función de preguntas formuladas y público destinatario. De
PUBLICIDAD
hecho, hay toda una serie de habilidades que diferencian a un diseñador UX de un diseñador de
páginas web más general.
Para Sim D’Hertefelt, un arquitecto independiente de los medios interactivos en Bélgica, el

término representa un cambio emergente del propio concepto de Usabilidad, donde el objetivo
no se limita a mejorar el rendimiento del usuario en la interacción (eficacia, eficiencia y facilidad
de aprendizaje), sino que se intenta resolver el problema estratégico de la utilidad del producto y
el problema psicológico del placer y diversión de su uso.
Figura 1: Diseño centrado en el humano

Fuente.- Tomado de https://blog.acantu.com/que-es-ux-y-ui/
1.1.2. Beneficios de aplicar UX.
EL Aplicar UX nos puede beneficiar en muchos aspectos, sobre todo en las diferentes etapas del
diseño desde la ideación de nuestra web hasta la navegabilidad y la venda de nuestros
productos o servicios. A continuación, algunas soluciones que nos puede aportar:
 Una buena experiencia del usuario, hará fidelizar los clientes en tu web.
 Aumentará ventas en tu negocio online. Mejorar el proceso de compra es aumentar las ratios
de conversión.
 Aumentará las visitas, ya que el usuario se quedará más tiempo porque tiene una buena
navegabilidad y encuentra lo que necesita.
 Mejorará tu reputación online. Al tener buena experiencia, los usuarios se convierten en
recurrentes y nos ayudan a dar a conocer nuestra marca.
 Bajará la tasa de rebote en tu web, ya que eliminará los errores en las fichas de productos, de
lectura de noticias, del proceso de compra… y los usuarios se quedarán
 Proporcionará calidad y seguridad al usuario, y una satisfacción del cliente navegando en tu
web. Un cliente feliz gastará más.
 Reducirá costes ya que evitará errores de programación. Se realizarán test previos donde se
corregirán los problemas y se solucionarán.
 Mejorará el posicionamiento en los buscadores, una página usable para móvil y para
ordenador será mejor puntuada por Google.
 Aumenta la productividad, optimiza el proceso de trabajo y elimina los errores en el sistema.
Por ejemplo, en los pasos para comprar de tu tienda online.
 Fácil de navegar y diseño intuitivo, lo clientes encuentran lo que necesitan rápidamente.

0
1.1.3. Proceso para el desarrollo de experiencia de usuario UX
Las etapas de desarrollo UX se dividen en cuatro momentos por los que transcurre la
labor del diseñador de la interfaz:
1. Investigación: en la que se obtiene toda la información posible del proyecto, usuarios y

producto a diseñar.
2. Organización: en la que se procesa toda la información para convertirla en un producto.
3. Diseño: en la que se plasma el diseño del producto a partir de lo organizado.
4. Prueba: en la que se comprueba la calidad del diseño propuesto.
Figura 2: Etapas del diseño UX

Fuente.- Tomado de http://www.nosolousabilidad.com/articulos/uxd.htm
ETAPA 1 – INVESTIGACIÓN
Durante esta etapa se trata de obtener la mayor cantidad de información posible y

necesaria para el proyecto a realizar, tanto acerca del cliente como de los usuarios. El
correcto balance entre demandas y necesidades de unos y otros es lo que lleva al éxito el
producto a crear.
 Información relacionada con el proyecto
o Definir las necesidades generales del proyecto.
o Definir la temática general del producto a realizar o rediseñar.
o Definir los objetivos de los clientes o emisores con el producto.
o Definir la intensión comunicativa del producto (Informar, entretener, alertar)
o Definir la tipología de producto que se desea.

PUBLICIDAD
1
o Definir de manera general a los usuarios del producto, su contexto de uso, y los
contenidos que tendrá el mismo.
 Estudio de Usuarios (receptores)
o Caracterizar a los usuarios. (tipología, roles, etc.)
 Definir perfiles de usuarios.
o Investigar sus necesidades. (de información, formación, etc.)
o Definir los procesos que realizan los usuarios en sus contextos reales.
 Estudio del Contexto
o Definir las características del contexto de uso (culturales, políticas, económicas, sociales y
tecnológicas).
o Definir el modelo de negocio.
o Realizar una matriz DAFO (FODA).
o Definir un banco de problemas del contexto de uso.
o Realizar un estudio de mercado y/o de productos similares al que se quiere realizar o

rediseñar.
En caso de estar rediseñando un producto
o Realizar un análisis del uso del mismo (Ejemplo: Logs, Google Analytics).
o Realizar una evaluación del producto existente para determinar su calidad.
 Estudio de los Contenidos
o Realizar un inventario de recursos de información del producto.
o Realizar mapas de conceptos (Concept Map).
o Realizar mapas de contenidos (Content Map).
 Estudio del proceso de diseño
o Definir una estrategia de trabajo.
o Analizar los recursos de trabajo con que se cuente.
o Planificar el tiempo de trabajo.
ETAPA 2 - ORGANIZACIÓN
Esta es la etapa que más se relaciona con la expresión artística. Es cuando el diseñador
usa tanto criterios científico-técnicos como culturales para organizar toda la información
obtenida durante la etapa anterior.
 Representar todas las estructuras posibles de los contenidos, en correspondencia a las

necesidades de usuarios y su contexto.

2
 Definir de todas las formas de jerarquizar las temáticas y los contenidos.
 Hacer corresponder las estructuras planteadas a las necesidades tanto de emisores

(clientes) como de receptores (usuarios).
 Definir todos los flujos funcionales que tendrá el producto de software, correspondiendo
con los flujos reales de los usuarios en su contexto.
ETAPA 3 - DISEÑO
Es la etapa en la que se plasman los resultados de la etapa anterior, ahora con todos los
requerimientos técnicos con el fin de que sean comprendidos por usuarios, cliente y el
resto del equipo de trabajo.
 Definir la estructura del producto (taxonomía y diagramas de organización o blueprints).
 Definir el funcionamiento del producto (diagramas de funcionamiento).
 Definir las pantallas del producto (diagramas de presentación o wireframes).
 Definir los servicios y funcionalidades que tendrá el producto.
 Crear prototipos de bajo y alto nivel.
ETAPA 4 - PRUEBA
Es la etapa en la que se comprueban las propuestas de diseño. Las pruebas se realizan

tanto con clientes como con usuarios. Con los clientes con el objetivo de saber si se han
logrado los objetivos y demandas planteadas. Y con los usuarios, con el objetivo de saber
resueltas las necesidades identificadas.
 Pruebas de prototipos.
 Revisión de diagramas.
 Comprobación de robustez en el etiquetado.
 Comprensión de los servicios diseñados por parte de los usuarios.
1.1.4. Brief e investigación de usuario
El brief:
Es el documento a través del cual podemos conocer datos clave sobre la empresa a la que
realizaremos el proyecto web, por lo general se utiliza para fines publicitarios, sin embargo,
a nosotros también no beneficiará por que será un nexo con nuestro cliente y así conocer
cuáles son sus objetivos, el rubro que maneja y el público objetivo al que desea llegar.
Esta es una base necesaria para poder crear un concepto visual dentro de nuestro diseño.
La manera de redactar un brief de proyecto web no está establecida por parámetros, pero
si debemos de tomar en cuenta incluir secciones que hablen sobre la propuesta del
proyecto web, el público objetivo, prepuesto, requisitos técnicos, cuidando que la
información que tengamos dentro del brief sea explícita pero no muy extensa.
En el brief podemos definir lo siguiente:
1. Objetivos y metas del nuevo diseño

2. Presupuesto y tiempo

PUBLICIDAD
3
3. Público objetivo
4. Alcance del proyecto
5. Materiales disponibles, materiales que hacen falta
6. El estilo o look general del diseño
Investigación de usuario
En punto principal de UX es la investigación de usuarios, la cual consiste en un conjunto de

técnicas para comprender los comportamientos, necesidades y motivaciones de los
usuarios a través de la observación y la medición. Norman Nielsen describe cuatro fases en
un proceso completo de investigación de usuarios para UX:
1. Descubrimiento
2. Exploración
3. Testing
4. Escucha
A continuación, os vamos a detallar los métodos y las acciones que puedes practicar en
cada una de ellas.
Descubrimiento: Es la primera fase de un proceso de investigación de usuarios. Es en este

momento donde vamos a ver, a hablar, y a intentar entender todos los procesos
relacionados con el producto que queremos lanzar. En esta fase podemos usar
metodologías como: estudio de campo; estudio diario; entrevistas con usuarios; entrevistas
con stakeholders; recogida de restricciones y requerimientos.
Exploración: Es la segunda fase donde intentamos unificar todos los hallazgos de la primera
fase en artefactos tangibles como tareas, prototipos, personas, journey maps, narrativas,
etc. En esta fase podemos: usar el análisis de la competencia; revisar el diseño;
construir personas; análisis de las tareas; hacer un journey map de los perfiles de usuario;
hacer prototipos (en papel o navegables); escribir narrativas; y hacer un card sorting.
Testing: Durante la tercera fase se prueban los artefactos que se han elaborado durante la
fase de exploración. Esta fase y la del descubrimiento son las fases esenciales donde todo
producto debería tener un proceso de investigación. En esta fase se usan tests como: test
de análisis cualitativo de usabilidad; test de rendimiento; evaluación experta de usabilidad,
etc.
Escucha: Es la última fase y es en la que se materializa el análisis de lo ocurrido en los tests

junto con las opiniones de los usuarios que se han recogido mediante encuestas. En esta
fase se usan: encuestas; análisis de las analíticas; análisis de las búsquedas; revisión de los
errores de usabilidad durante los tests; y revisión de las preguntas frecuentes (FAQ).

4
1.2 CONTENIDO ESTRATÉGICO Y ARQUITECTURA DE LA INFORMACIÓN

1.1.1. ¿Qué es la arquitectura de la información en un sitio web?
El modo de organizar la información y los contenidos dentro de un sitio web es una disciplina
conocida como arquitectura de la información (AI). Simplificando mucho se trata de elaborar el
plano o esqueleto de tu sitio web, la estructura básica de la página web que te permitirá
después organizar toda la información y agruparla en diferentes menús, apartados y
subapartados.
Una página web con una estructura bien organizada permitirá a los usuarios encontrar sin
esfuerzo la información que buscan y llegar a los distintos contenidos de un sitio web. Cuánto
más fácil resulte navegar por una página web más tiempo permanecerán los visitantes en ella y
más contenidos podrán ver.
Algunos dicen que diseñar para web es más parecido a la arquitectura que al diseño gráfico.
Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminación, es
importante saber cómo estará estructurada la planta, cómo será el salón, donde estarán las
habitaciones, como se accederá a ellas, donde estarán las ventanas... Asimismo en la web, si la
estructura no es sólida e intuitiva, el arte de la página no sirve para nada.
Para crear la estructura, puede ser útil hacer un inventario de todo el material que vas a
exponer en la página e ir organizándolo en un primero momento por temas para después
construir gráficamente la estructura de la web.
Figura 3: Ejemplo Organización por temas del contenido de un site y su estructura gráfica.
Fuente.- Tomado de http://www.lawebera.es/de0/organizar-pagina-web.php
Antes de empezar a trabajar en el aspecto puramente estético de las páginas web, imaginando
animaciones impresionantes y gráficos atractivos, es indispensable pensar en la arquitectura
del sitio web. Para eso, fundamentalmente, tendremos que:
 Definir las secciones y páginas web que debe tener el sitio.

 Escoger las secciones o páginas a las que podremos acceder desde la página principal
(o de inicio).
 Decidir si alguna sección o página tiene que destacar más respecto las demás.

PUBLICIDAD
 Distribuir el contenido a presentar entre las distintas secciones y páginas.

 Concretar las distintas vías de acceso a cada una de páginas web del sitio (es
importante ofrecer múltiples maneras de acceder a la misma información).
 Especificar el número de idiomas que dispondrá el sitio web.
Figura 2: Ejemplo de la estructura de un sitio web en el que se detalla todas las páginas y el recorrido para acceder a ellas.
Fuente.- Tomado de http://www.gruposotano.com/desarrollo-web
1.2.1 Formas de estructurar la información.

Existen 3 formas básicas de estructurar u organizar la información en cualquier página web:
la estructura lineal, la estructura jerárquica y la estructura en
red. Muchas páginas web pueden presentar una combinación de los tres modelos,
especialmente sitios web muy grandes que organizan la información de forma jerárquica en
un determinado menú y de forma lineal o en red en otros submenús del site.
1. Estructura lineal
Un sistema de navegación lineal en el que cada página te conduce hacia la

siguiente a través de un enlace es la forma más sencilla de ordenar la
información. Con esta estructura cada página del sitio web está un clic más
alejada de la página de inicio o página principal.

Es un tipo de estructura que tiende a concentrar el pagerank en la página

principal ya que el buscador considera más relevantes o importantes las
primeras páginas de la secuencia. La estructura lineal interesará cuando
queramos dar mucha importancia al home de un sitio web y a sus contenidos.
2. Estructura jerárquica
Es una forma de organizar la información muy fácil de entender y seguir por

el usuario. Todos estamos muy familiarizados con este tipo de estructura por
ser la habitual en la mayoría de las empresas. Esto hace que sea la mejor
forma de organizar mucha información y muy compleja de una forma fácil de
entender para los usuarios.
A partir de la página principal se enlazan secciones y menús que llevan de la

información general a los apartados más específicos. La página más
importante de la web es la home o principal, seguida por las páginas
cabeceras de cada sección.
La estructura jerárquica de la página web tiende a concentrar el pagerank

en un número pequeño de páginas ya que a medida que nos adentramos
varios niveles en los submenús las páginas pierden relevancia para el
buscador.

PUBLICIDAD
3. Estructura en red
Es el tipo de estructura más flexible a la hora de organizar

la información de un sitio web y favorece la navegación
libre por parte de cada usuario, pero también puede
generar confusión y desorden si no está bien pensada y
realizada.
Para evitar que los usuarios se pierdan en la web, la estructura

en red debe basarse en criterios fáciles de identificar por todo el
mundo. La estructura en red se parece mucho a la forma real de
navegar de los internautas, ya que está pensada para que
cualquier página de tu site sirva de entrada a un usuario y a
partir de ella pueda llegar a cualquier otra sección o menú.
La gran ventaja de estructurar los contenidos de tu sitio web en

red es que permite usar ampliamente los enlaces internos entre
todos los contenidos y relacionarlos entre sí, favoreciendo un
reparto del pagerank entre todas las páginas de tu sitio web.
En resumen, la estructura que decidas darle a tu página web dependerá

entre otros de factores como el tipo de contenidos y la cantidad de
información que debas manejar en tu site, el tipo de usuarios que
visitarán tu página, los objetivos que persigas con tu web, las secciones a
las que desees dar mayor visibilidad y relevancia, las previsiones futuras
de crecimiento para tu sitio web.

1.2.3 Ventajas de estructurar la información.
 Permite que los usuarios encuentren en un sitio web lo que buscan con
facilidad y en pocos segundos, sin esfuerzos innecesarios y sin hacerles
malgastar su tiempo.
 Evita que los usuarios abandonen el sitio web para ir a buscar la información en otro
sitio. Cuando un internauta no encuentra lo que busca en un sitio web supone que esa
información no está disponible ahí y se marcha automáticamente a otra página.
 Permite un diseño unificado en todas las páginas de un mismo sitio web y una
navegación consistente al mantener la misma estructura en todo el site.
 Permite organizar y estructurar los contenidos de un sitio web pensando en el usuario,

siguiendo características de los productos o servicios comprensibles e interesantes
para el cliente. No cometas el error de organizar la información de tu sitio web
siguiendo la misma estructura interna de tu empresa, en muchos casos el cliente no lo
entenderá y no sabrá dónde buscar la información que necesita.
 Ayuda a reducir el desorden de información y evita los contenidos duplicados, que el

mismo contenido aparezca repetido en diferentes lugares de un sitio web. Al mantener
la información ordenada con una buena estructura del sitio web se hace más fácil la
ampliación de la página web con contenidos nuevos.
 Ayuda a organizar los menús del sitio web y a etiquetar las pestañas con nombres
específicos y claros. Es importante en todos los sitios web, pero lo es especialmente en
sites de gran tamaño, con muchos contenidos y con menús desplegables de varios
niveles.
 Ayuda al posicionamiento SEO. Si la información de la página web está bien

organizada es más fácil de indexar o leer por parte del buscador
 Evita que los usuarios abandonen el sitio web para ir a buscar la información en otro
sitio. Cuando un internauta no encuentra lo que busca en un sitio web supone que
esa información no está disponible ahí y se marcha automáticamente a otra página.
 Permite un diseño unificado en todas las páginas de un mismo sitio web y una
navegación consistente al mantener la misma estructura en todo el site.
 Permite organizar y estructurar los contenidos de un sitio web pensando en el

usuario, siguiendo características de los productos o servicios comprensibles e
interesantes para el cliente. No cometas el error de organizar la información de tu
sitio web siguiendo la misma estructura interna de tu empresa, en muchos casos el
cliente no lo entenderá y no sabrá dónde buscar la información que necesita.
 Ayuda a reducir el desorden de información y evita los contenidos duplicados, que el

mismo contenido aparezca repetido en diferentes lugares de un sitio web. Al
mantener la información ordenada con una buena estructura del sitio web se hace
más fácil la ampliación de la página web con contenidos nuevos.
 Ayuda a organizar los menús del sitio web y a etiquetar las pestañas con nombres
específicos y claros. Es importante en todos los sitios web, pero lo es especialmente
en sites de gran tamaño, con muchos contenidos y con menús desplegables de varios
niveles.

PUBLICIDAD
Resumen
1. La arquitectura de la información es la disciplina de organizar y esquematizar de manera

óptima el contenido de un sitio web.
2. Antes de organizar la arquitectura del sitio debemos definir contenido y organizarlo en

temas.
3. Para organizar el contenido podemos hacerlo con una estructura lineal, jerárquica o en
red.
4. La ventaja que nos da el poder trabajar la arquitectura del sitio web de manera óptima es
que permite la búsqueda y optimización SEO, así como fácil acceso al usuario.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
 http://www.lawebera.es/de0/organizar-pagina-web.php
 http://es.slideshare.net/edgarcajun/arquitectura-de-un-sitio-web
 http://la-arquitectura-web.blogspot.pe/

1.3 DISEÑO DE INTERFACES PENSANDO EN EL USUARIO - UI
1.3.1 Qué es diseño de interfaces de usuario
UI (por sus siglas en inglés User Interface) o en español Interfaz del Usuario, es la vista que
permite a un usuario interactuar de manera efectiva con un sistema. Es la suma de una
arquitectura de información + elementos visuales + patrones de interacción. El UI da el ‘look &
feel’ al producto con la estructura e interacción de los elementos de la interfaz.
Figura 3 : UI
Fuente.- https://blog.acantu.com/que-es-ux-y-ui/
Una buena UI nos permite dar una buena UX, pero no lo es todo, es un instrumento.
Cuando uno diseña interfaces el problema que está resolviendo está en el diseño: selección y
distribución de los elementos de la interfaz (ej. textos y campos del formulario), consistencia
del diseño (con la plataforma, con otras pantallas), etc. Es importante aclarar que Diseño de
Interfaces no equivale a Diseño Gráfico: el diseño de la interfaz puede incluir o no diseño
gráfico. Por ejemplo, cuando uno hace un wireframe está diseñando una interfaz, pero no está
aplicando diseño gráfico, y cuando uno aplica reglas de estilo a una interfaz está aplicando
diseño gráfico, pero no está diseñando una interfaz.
Generalmente el diseño UI se relaciona mucho más con las áreas de la informática y el diseño
web, ya que se refiere al contacto e interacción que el usuario crea a través de un celular o una
computadora.
La principal característica para que un diseño UI funcione correctamente, no es centrarse

solamente en hacer una app o página llamativa, por ejemplo, sino en crear un diseño que
realmente sea utilizable y amigable. En ocasiones esto puede llevar a crear un diseño de app
no agradable a la vista, pero todo un éxito si se trabaja correctamente a nivel UI.
En si el objetivo principal de un diseño UI es mejorar la interacción usuario – dispositivo en

cualquier sitio web, celular o aparato en general.
Actualmente muchas empresas están apostando a este tipo de diseño para mejorar la
interacción del usuario y hacerla más fácil. A continuación, te presentamos 5 páginas que
utilizan esta tendencia, enfocándose a presentar su información en tarjetas de interfaces en
diversas plataformas digitales y que son todo un éxito:
PUBLICIDAD
1.- Twitter
Twitter utiliza un diseño de interface de usuario, con el objetivo de poder visualizar el material
de forma resumida, abrir y cerrar ventanas fácilmente.
2.- Amazon
Amazon ha comenzado a utilizar este tipo de interface para poder visualizar sus colecciones
fácilmente y apreciar los productos con más calidad.

3.- Flipboard
Esta aplicación utiliza el diseño de interface para mostrar su información en diferentes bloques
de categorías, de esta manera el usuario puede dirigirse a la que prefiera.
4.- Trello
Trello es una plataforma que se dedica a ayudar a organizar información e imágenes. Toda esta
información se puede acomodar en diferentes tarjetas donde el usuario pone el título para no
perderlas.

PUBLICIDAD
5.- Pinterest
Pinterest fue una de las primeras plataformas en aplicar este estilo de diseño enfocado para
mejorar la interface es su página, ya que todo se puede organizar en diferentes bloques y
encontrar rápidamente.

1.3.2 Diseño de wireframe
Esquematizar una página es un paso importante en cualquier proceso de diseño para pantallas.
Principalmente te permite definir la jerarquía de la información del diseño, haciéndote más
fácil planear la disposición de la misma, acorde a como buscas que el usuario procese la
información. A continuación, daremos algunas pautas para diseñar un wireframe que responda
a los conceptos anteriormente visto de UI y UX.
Es como un plano arquitectónico; necesitas verlo en diagramas de dos dimensiones a blanco y

negro antes de poder entender cómo construir la casa. Del mismo modo para el diseño en
pantalla, no puedes comenzar construyendo capas de pixeles en photoshop, o escribiendo
bloques de código, sin antes saber dónde estará colocada la información.
En un nivel más profundo, un esquemático es también muy útil determinando como el usuario
interactuará con la interfaz. Por ejemplo, los esquemáticos pueden contener diversos estados
o botones o comportamientos de menú.

PUBLICIDAD
Esquematizar es importante porque permite al diseñador planear la disposición e interacción

de una interfaz sin ser distraído por colores, decisiones de tipografía e incluso contenido. Si un
usuario no puede determinar a donde ir en un esquema en blanco y negro, no importa que
colores uses eventualmente. Un botón tiene que ser obvio incluso si no es brillante o esta
coloreado.
Como los cimientos de un edificio, tienen que ser fuertes antes de decidir si darle una lujosa
capa de pintura.
Paso 1: Obteniendo Inspiración
Antes de entrar en más detalles, y ya que una imagen vale más que mil palabras, echa
un vistazo a I ♥ wirefames o wireframe showcase Serás capaz de obtener una
descripción rápida y entendimiento visual de como otros diseñadores han manejado su
proceso de esquematización.

PUBLICIDAD
Tal vez también te ayude este bookmarklet, Wirify el cual te permite ver una versión
esquematizada de cualquier sitio en producción.
Si continuamente observas qué están haciendo otros diseñadores o sitios para sus
esquemáticos, lentamente comenzarás a obtener una imagen mental de como esquematizar y
organizar la información para la pantalla.
Paso 2: Diseñando Tu Proceso
El diseño es un proceso orgánico y por ello diferentes diseñadores abordan la esquematización

y su representación visual o codificada de diferentes maneras. Tienes que encontrar el proceso
que aproveche tus fortalezas y con el cual te sientas más cómodo. El siguiente es un diagrama
que muestra procesos típicos:

Como se ha mencionado, depende del diseñador decidir con cual proceso se siente más cómodo,
algunas veces tal vez sea necesario probar varias veces antes de definir cuál es el más efectivo.
Algunas personas serán muy buenas bocetando y ellos podrían preferir no usar una
herramienta de esquematización en absoluto. Otros diseñadores quizá quieran tener tantos
pasos como sea posible para minimizar desviaciones o para permitirles pensar a detalle cada
una de las iteraciones conforme el diseño comienza a tomar forma.
Eventualmente desarrollaras tu propio proceso preferido, pero para propósito del

ejemplo utilizaremos este proceso típico como ejemplo:
Las razones por las que se utiliza Illustrator como herramienta de esquematización son
principalmente:
1. Estilos - puedes guardar estilos de tipografía y objetos y re-utilizarlos, justo como CSS.
2. Es fácil modificar, mover o escalar múltiples objetos.
3. Permite una fácil a transición a Photoshop después.
Sin embargo, puedes utilizar otras herramientas ya que dependerá del escenario del
proyecto.
Paso 3: Elige Tus Herramientas
Como vimos anteriormente la elección de la herramienta para desarrollar el wireframe

dependerá exclusivamente del diseñador UI y que aplicación o programa se ajuste más a sus
necesidades. Para este ejemplo utilizaremos Illustrator.

PUBLICIDAD
Paso 4: Estableciendo una Cuadrícula
Existe mucha teoría en relación a sistemas de cuadrículas, pero sin ir muy a detalle, una
cuadricula o grid es una manera simple y estructurada de posicionar elementos.
En este ejemplo utilizaremos Illustrator, pero los pasos pueden ser aplicados a cualquiera de
tus herramientas como Photoshop o Balsamiq Mockup.
Primero, establece un tamaño de documento. Para el ejemplo utilizaremos 1170 x 2350 porque
se usará bootstrap el cual permite que el sitio se pueda escalar entre resoluciones móviles
hasta un máximo de 1560 pixeles fácilmente.
Abre la plantilla descargada de bootstrap para illustrator también (puedes usar cssgrid aunque
trabaja a resolución de 1200px de ancho) pero las plantillas bootstrap te dan todas las grillas
para móviles y talbets lo que es muy conveniente (recuerda que es un sitio responsive el que
diseñaremos por lo que nuestra web se adaptará indistintamente de la resolución de pantalla
que trabajemos),en la plantilla bootstrap de illustrator buscaras la mesa de trabajo que
corresponde las grid de desktop o grillas para escritorio seleccionaras las primeras columnas y la
copiaras a tu archivo para luego expandirlas hacia abajo para que ocupen la medida de 2350 px
del alto de nuestro archivo veras que del ancho no te debes preocupar porque encajaran
perfectamente a 1170px.
Ubicamos la mesa de trabajo desktop grid

copiar
Copiamos las primera columnas
Pegamos en nuestro archivo

inicial y amplía las columnas al
alto del archivo
Puedes invertir los colores para resaltar las

columnas Rojo 10% y márgenes en blanco 10%.

Tip:
PUBLICIDAD
Existen muchas plantillas de cuadrículas disponibles para descargar, pero si estás
Paso 5: Determina el Diseño con Cajas
Comienza dibujando cajas en la cuadrícula. Piensa acerca el orden de la información que te

gustaría presentar a tus visitantes, de arriba a abajo es lo más fácil, seguido de izquierda a
derecha. A continuación, es un ejemplo de un esquemático cuya disposición es comúnmente
utilizada por compañías de software en estos días:
Algunas veces, dependiendo de tu objetivo y la entidad para la cual estas diseñando, puedes
ser creativo con la disposición, y aun así teniendo en cuenta la jerarquía de la información. En
este ejemplo salimos un poco de lo tradicional:

Aquí está la disposición para un blog, con contenedores para anuncios cuidadosamente
posicionados e instrucciones específicas para el cliente:

PUBLICIDAD
Paso 6: Define la Jerarquía de Información con Tipografía
No tengas miedo de experimentar en esta etapa. Algunas veces, entre más detalles completes,
puedes llegar a notar que la disposición original no funciona del todo bien. Ese es el punto del
proceso de esquematización; hacer tantas iteraciones como sea posible para así acotar la mejor
forma de representar la información que se está tratando de comunicar.
En el siguiente ejemplo, decidí que quería que las capturas de pantalla tuvieran mayor impacto
y comencé también a utilizar cajas negras para definir cuáles eran las áreas que tomarían
mayor importancia visual en este sitio web:

Paso 7: Detallando con Escala de Grises
Utilizar el espectro completo de la escala de grises puede ayudarte a determinar la fuerza

visual de tus elementos sin tener que elegir una paleta de colores. De hecho, puede ayudar
con el diseño visual más adelante.
Paso 8: Esquema de Alta Definición
Este es un paso opcional, pero si te gusta llevar las cosas gradualmente tal vez quieras
probarlo. Hacer un esquema de alta definición simplemente quiere decir añadir mayor detalle,
tanto como sea posible, sin ir demasiado granular en los detalles visuales. Puede significar
incluir el contenido real en el esquema y tratar de determinar los tamaños de fuente ideales:

PUBLICIDAD
En algunos escenarios puede ser más ideal saltarse la definición de mucho detalle e ir
directamente a una etapa de prototipaje interactiva. El argumento para esto es que ciertos
detalles de interacción no pueden ser completamente transmitidos en una imagen plana.
Si trabajas con un equipo de desarrolladores, tal vez quieras entregar el esquemático aprobado
a los desarrolladores para codificar la estructura básica mientras trabajas en el aspecto visual.
Paso 9: Pasando un Esquemático a Visual
Puedes exportar tu diseño wireframe en Illustrator a un archivo .psd con la mayoría de las
capas de texto editables. Así en Photoshop mantendrá las opciones de texto editables.

PUBLICIDAD
Este es un ejemplo de un esquema trasladado a visual. La estructura del esquema está

prácticamente intacta, aunque hubo algunas modificaciones visuales.
También puedes visitar este sitio en línea:

Wireframe para proyecto de ejemplo del manual presente

PUBLICIDAD
1.3.3 Mapa de recorrido del sitio
Un Sitemap o Mapa del Sitio es la estructura de enlaces de páginas web que definirá la buena o
mala navegación de un sitio web. Como veremos en este artículo, además un sitemap se puede
usar para mejorar nuestro posicionamiento en motores de búsqueda.
Empezando por la página de Inicio hasta la página de contacto, todo sitio web debe tener un
mapa para que la navegación del usuario web sea lo más fácil posible. El menú del sitio web debe
contener las páginas principales, que pueden estructurarse en páginas y subpáginas,
lo importante es que la navegación sea lógica e intuitiva.
Desarrollo Web y Mapa del Sitio
Una de las tareas principales en el momento de desarrollar un sitio web es la elección de los
contenidos del sitio web. Para ello hay que crear un Mapa del Sitio, una lista de páginas web
estructuradas, con una arquitectura de enlaces adecuada para una correcta navegación del
usuario y un mejor posicionamiento en motores de búsqueda.
Crear un Mapa del Sitio Sencillo
Un mapa del sitio básico debería contener las siguientes páginas:
 Inicio o Página Principal

 About us también llamada: “Sobre Nosotros”, “Empresa”, “Equipo”, “Sobre mí”
 Servicios
 Localización o Dónde Estamos
 Contacto
Además, el Mapa del Sitio puede contener un Blog, estás serían las categorías básicas del blog:
 Categoría Raíz: Noticias

 Categoría Principal: Eventos
 Categoría Principal: …
Clases de Sitemaps
Los dos sitemap más conocidos son: de página (de texto o html) y en formato xml. El sitemap de
página suele ser una página web que incluye todos los links o enlaces estructurados del sitio web.
Un sitemap en formato xml se usa como herramienta de posicionamiento web para facilitar la
rápida inclusión de esas páginas en el índice de los motores de búsqueda como Google.

1.3.4 Test de usabilidad
Las pruebas de por parte del usuario es una técnica usada en el diseño de
interacciones centrado en el usuario para evaluar un producto mediante pruebas con los
usuarios mismos. Esto puede ser visto como una práctica de usabilidad irreemplazable, dado
que entrega información directa de cómo los usuarios reales utilizan el sistema.1 Este es en
contraste con los métodos de inspección de usabilidad donde expertos usan diferentes
métodos para evaluar una interfaz de usuario sin involucrar a usuarios reales.
Las pruebas de usabilidad se enfocan en medir la capacidad de un producto de fabricación
humana en cumplir el propósito para el cual fue diseñado. Ejemplos de productos que
normalmente se benefician de pruebas de usabilidad son comidas, productos de
consumo, sitios web o aplicaciones web, interfaces de usuario, documentos y dispositivos.
Las pruebas de usabilidad miden la usabilidad, o facilidad de uso, de un objeto específico o un
conjunto de objetos, mientras que los estudios de interacción persona-computador intentan
formular los principios generales.
Las pruebas de usabilidad consisten en seleccionar a un grupo de usuarios de una aplicación y
solicitarles que lleven a cabo las tareas para las cuales fue diseñada, en tanto el equipo de
diseño, desarrollo y otros involucrados toman nota de la interacción, particularmente de los
errores y dificultades con las que se encuentren los usuarios.
No es necesario que se trate de una aplicación completamente terminada, pudiendo tratarse
de un prototipo.
Métrica de usabilidad:
 Exactitud: Número de errores cometidos por los sujetos de prueba y si estos fueron
recuperables o no al usar los datos o procedimientos adecuados.
 Tiempo requerido para concluir la actividad.
 Recuerdo: Qué tanto recuerda el usuario después de un periodo sin usar la aplicación.
 Respuesta emocional: Cómo se siente el usuario al terminar la tarea (bajo tensión,
satisfecho, molesto, etcétera).
1.3.5 Diseño de interacción
El diseño de interacción es una disciplina que nació de la necesidad de estudiar y facilitar las
interacciones entre las personas y su ambiente. Aunque la interacción puede darse con casi
cualquier objeto físico, en el mundo digital la asociamos cuando queremos utilizar un
producto o dispositivo para alcanzar un objetivo y esperamos que responda a nuestras
acciones. El diseño de interacción, así como la usabilidad, la arquitectura de información y
otras disciplinas, nos ayudan a planear para ofrecer una buena experiencia de usuario.
A continuación, te explico de qué trata, sus principios y mejores prácticas para crear
productos intuitivos, amigables y fáciles de usar.
Para definir esto es necesario establecer si habrá alguna parte del hardware con la que el
usuario deba de interactuar con la interfaz (un mouse quizá), o bien, si es con algún gesture.
Por ejemplo, si fuera aplicación móvil quizá será necesario definir qué acciones de los dedos
provocan qué resultados. Por otra parte, si existieran usuarios más avanzados, habría
comandos que estos pudieran utilizar para ser más eficientes y rápidos para controlar la
interfaz. Un ejemplo podría ser comandos tan sencillos como copy / paste (Ctrl+C / Ctrl+V).
Tip: Define los gestures para móviles, o comandos de interacción. Mira esta guía de IBM.

PUBLICIDAD
2. Da pistas del comportamiento

Un botón debe de parecer un botón, por lo cual es importante que la apariencia tanto de
color, forma, tamaño, etc., demuestre o de una pista clara de que puede ser oprimido.
Además, intenta dar también algunas pistas de qué pasaría si el usuario decidiera continuar,
esto puede incluir un tooltip, una advertencia, o el rotulado en sí del botón.
Por ejemplo, en la siguiente aplicación se dan pistas sobre cómo empezar a utilizarla.
3. Anticípate a errores potenciales

Un buen diseñador de interacción entiende la importancia de anticiparse a los errores y
diseñar para que los usuarios puedan prevenirlos o bien, recuperarse de ellos. Un buen
ejemplo de cómo hacerlo es limitando las acciones que el usuario puede realizar. Por
ejemplo, si debe llenar todos los campos de un formulario, será bueno marcar como
opcionales únicamente lo que podría saltarse, así como desactivar el botón de continuar, o
utilizar una validación oportuna en cada campo a fin de saber si se ha llenado de manera
correcta o no.

Pero también, será necesario proveer claramente cómo el usuario podría recuperarse de un
error con el que se enfrente, por lo cual es importante explicar qué ha pasado, dónde, por
qué y qué se debería hacer para corregirlo o revertir la acción.
Twitter lo hace bien con Ajax al momento de ir ingresando los caracteres.
4. Considera la retroalimentación oportuna

Cuando el usuario ejecuta una acción, el sistema debe de responder haciéndole saber si fue
efectiva o no, pues el no tener retroalimentación podría significar dos cosas: 1) aún no se ha
realizado nada (guardar, cancelar) ó 2) ya se hizo (y pudiera ser que no).
Por ejemplo, aquí en Mailchimp intenté agendar el envío de un newsletter para el mismo día
en una hora pasada, cuando en realidad era para “mañana”, por lo que me mostró un
mensaje de que no fue posible ya que “es imposible viajar en el tiempo”
5. Diseña pensando de manera estratégica

Diseñar para web, móvil o wearables es completamente distinto. Por ello es indispensable
conocer los lineamientos de cada dispositivo y las mejores prácticas. No obstante, por
ejemplo, la Ley de Fitts aplica para todos. La Ley de Fitts se refiere a un modelo en el cual se
toma en cuenta la velocidad y precisión del movimiento de un humano para apuntar a un
objetivo. En otras palabras, cómo podemos utilizar nuestros dedos o mouse desplazándonos
con éxito hacia un botón, por ejemplo.
La Ley de Fitts requiere pensar de manera estratégica en algunos aspectos como:
 Los botones y widgets deben de tener un tamaño apropiado. Cuidado con que no sean muy
pequeños.

PUBLICIDAD
 Los botones más usados deben estar más cerca del cursor (o del alcance de los dedos
para touch screens)
 Los menús visibles son más rápidos que utilizar pull-down
¿Por qué crees que las opciones de navegación son utilizadas en la parte posterior de muchas
aplicaciones móviles? Correcto, son más rápidas de alcanzar.
6. Simplifica lo más que puedas

¿Te has topado con sitios donde tienes una cantidad de opciones tan grande que terminas
por abandonar? esto se debe a la Ley de Hick, la cual cuenta que entre más opciones le
demos a una persona, más tiempo tardará en tomar una decisión. Sitios llenos de links o de
elementos generalmente causan una desventaja en términos de conversión.
Mira Yelp, quién lo hace bien dando únicamente un par de opciones para que el usuario
inicie con su búsqueda.

Resumen
1. Un wireframe para un sitio web, también conocido como una maqueta de página o plano
de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio
web.
2. Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su
principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.
3. El beneficio de realizar wireframes para nuestro sitio reside principalmente en que

podemos lograr con su uso diseñar la información, diseñar la navegación y diseñar la
interfaz del sitio web, si necesidad de profundizar en los aspectos del diseño.
4. Los wireframes pueden realizarse a mano, pero también existen herramientas online, así
como programas y plugins que simplifican y facilitan su diseño.
5. Para diseñar un wireframe responsive es necesario realizar la maqueta de ordenador y del

comportamiento en tabletas y smartphone, para definir el comportamiento de adaptación
de la información del sitio a diferentes resoluciones, así mismo trabajar con grid basados
en columnas facilitará este proceso.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
https://es.wikipedia.org/wiki/Wireframe_(Dise%C3%B1o_web)
https://es.pinterest.com/pin/5559199511794952/
https://www.youtube.com/watch?v=7-UX1idfCKg

PUBLICIDAD
UNIDAD
2
DISEÑO VISUAL DE UN SITIO
WEB CON ADOBE PHOTOSHOP
Al término de la unidad, el alumno diseña un sitio web responsive en abobe Photoshop
DISEÑO VISUAL DE UN SITIO WEB CON ADOBE PHOTOSHOP
2.1 Tema 4 : Preparación del archivo de diseño web.

2.1.1 : Que es un grid de diseño
2.1.2 : Grid pensados para diseño web responsive.
2.1.3 : Configurar archivo Photoshop con grid responsive.
2.2 Tema 5 : Diseño visual del sitio web.

2.2.1 : Diseño de la página de inicio
2.2.2 : Diseño del menú de navegación
2.2.3 : Diseño de contenido web
2.2.4 Diseñando para Smartphone y Tablets
2.3 Tema 6 Preparando y exportando los elementos de diseño

2.3.1 División del diseño por sectores.
2.3.2 : Separación del diseño por archivos
2.3.3 : Generación de recursos de imágenes

2.1. PREPARACIÓN DEL ARCHIVO DE DISEÑO VISUAL WEB
2.1.1 ¿Qué es un grid?
Un grid es una cuadrícula para maquetar el contenido de tu página bajo unas guías básicas.
Éstas darán estabilidad al diseño, alineación y homogeneidad. Es cierto que, además, ayudan al
Responsive (el diseño adaptable o adaptativo), porque con pocas reglas de CSS, consigues un
diseño perfecto para a todos los dispositivos.
Cada grid vertical se compone de dos cosas: columnas (cols) y calles (gutters). Las columnas
son las divisiones más amplias, mientras que las calles se definen como los espacios de
igualdad entre las columnas, lo que en maquetación de papel se llama medianil. Incluso
cuando una cuadrícula contiene columnas de diferentes anchos de las anchuras de las calles
suelen ser estáticas.
Columnas Medianil / Calles Guías

Cols Gutters Guides
Que uses un grid no significa que tengas un diseño web responsive. Sino que sigues unas líneas
de maquetación.
2.1.2 Grid pensados para diseño web responsive
El diseño responsive utiliza las queries de CSS para que haya diferentes estilos dependiendo de
parámetros como el tamaño de pantalla, resolución u orientación. Esto significa que podrás
variar el tamaño, visibilidad, color o forma de los elementos en un tamaño determinado de la
pantalla del dispositivo.
Por qué usar un Grid con Diseño Web Responsive
La adaptación a los diferentes dispositivos ya no sólo es una recomendación para facilitar a tus
lectores la utilización de tu web, sino que puede afectar a tu posicionamiento o aparición en
buscadores. Google quiere que todo se vea bien para garantizar la mejor experiencia de
navegación a los usuarios. Este es un ejemplo de diseño responsive en diferentes dispositivos:
ordenador de escritorio, tableta y móvil.

PUBLICIDAD
Diferente colocación de los elementos dependiendo del dispositivo.
Los grid más utilizados para responsive son los de Bootstrap y los de CSSGrid.
2.1.3 Configurar archivo Photoshop con grid responsive.
Una vez ya tengamos la arquitectura, así como el diseño wireframe basado en UI y UX ya

podemos empezar el diseño visual de nuestro sitio web. Para ello empezaremos con algunos
aspectos básicos a considerar para la configuración del archivo en Photoshop:
1. Medidas
Las medidas para un sitio web pueden variar ya que no hay una configuración única en los
monitores de escritorio ni en los dispositivos móviles, por otro lado, una web responsive
debería adaptarse sin problemas a cualquier medida.

¿Porque necesitamos una medida para el diseño responsive?
Porque a partir de ella empezaremos a trabajar el contenido tamaño de letras e imágenes para
construir nuestra versión de escritorio que se adaptará a las diferentes plataformas.
Figura 6: Ejemplo comportamiento de contenido en columnas web responsive

Fuente: http://webstudio316.com/buenas-practicas-para-el-diseno-web-adaptable-responsivedesign/
Lo primero que tenemos que tener en cuenta es el tamaño del lienzo a crear. Hace años esta
cuestión era sencilla, existían estándares como 800×600 o 1024×768. Sin embargo, las cosas
han cambiado y ahora hay multitud de pantallas son tamaños distintos. Según las últimas
estadísticas, el tamaño más utilizado durante el 2013 fue 1366×768 y 1280×800.
Podremos configurar nuestro archivo en un ancho entre 960px a 1200px para una pantalla de
escritorio, esto puede ir variando con el tiempo a medida que los monitores vayan subiendo de
resolución, también se suele trabajar medidas más amplias como 1300px utilizando grids
bootstrap que trabajan también a medidas 1920px para monitores full hd.
Para saber qué resolución es la más adecuada ello dependerá estrictamente del tipo de grid que
utilicemos, por ejemplo, podemos definir 1300px de ancho para nuestro archivo, dentro estarán
las columnas a 1170px de ancho que determina el área de contenido y dejaremos un espacio
sobrante a los lados que nos permitirá ver el comportamiento de este sector que no tiene
contenido cuando se visualiza a resoluciones más amplias. El alto del archivo puede variar
conforme vayamos definiendo los espacios de contenido. De esta misma manera se comporta
la plantilla de grid bootstrap.

PUBLICIDAD
2. Ajustar
Para poder colocar los elementos con exactitud en Photoshop podemos hacer los siguientes
ajustes. Esto porque muchas opciones de ajuste automático están desactivadas por defecto y
lo ideal es activarlas:
Vista → Ajustar → (actívalo)
Vista → Ajustar a → Todo
Photoshop → Preferencias → Herramientas → Herramientas y transformaciones de

ajustes de vectores a cuadrícula de píxeles → (actívalo)
Y, por último, cuando utilices cualquier herramienta vectorial (Herramienta línea,

Herramienta rectángulo…) recuerda activar en la barra de opciones la opción “Alinear a
los bordes”
3. Preparando grid
Para trabajar en web es fundamental el uso de un grid para alinear nuestro contenido, sobre
todo si vamos a desarrollar un sitio para web Responsive. Cabe recordar que el diseño web
Responsive responde a la organización y adaptación de los elementos del contenido a distintos
tamaños de pantalla, trabajar en columnas hará mucho más fácil poder diseñar la forma en la
que se irán adaptando los elementos de nuestras páginas del sitio.

Podemos utilizar las plantillas de grid que ya encontramos en internet para psd o utilizar las que
hemos obtenido de nuestro wireframe si hemos trabajado en illustrator o Photoshop.
Del siguiente link se pueden descargar las plantillas bootstrap 3.0 para photoshop en donde
también se hayan plantillas para dispositivos móviles, tablets, escritorio e incluso la que
trabajaremos de 1170px de ancho por 12 columnas.
LINK GRID BOOTSTRAP PARA PHOTOSHOP:

http://www.minimit.com/articles/tips-resources/bootstrap-3-responsive-grid-psd- templates
En el descargable encontrará las siguientes plantillas, utilizaremos la plantilla de 1170px.
Si no tenemos la posibilidad de acceder a internet podemos crear nuestras propios grid de la

siguiente manera:
1. Con Photoshop podemos generar composiciones de grids basados en columnas y filas, para
trabajar nuestra plantilla web crearemos nuestras guias de la siguiente manera. Crearemos
un archivo de 1300 x 2350 px iremos al menú superior en la opción Vista / Nueva
composición de vista haremos clic y nos aparecerá una ventana emergente donde
configuraremos las líneas guías de la siguiente manera.
Trabajaremos con una plantilla dividida en 12 columnas con un ancho de 68px cada una y un
medianil de 30px, la medianil es la separación entre una columna y otra, No se ha considerado
márgenes al exterior de nuestra plantilla, pero si hemos activado la opción de centrado para
que las guías se centren con respecto al ancho de nuestro archivo.

PUBLICIDAD
Crearemos 12 rectángulos de manera que cada uno ocupe una columna y combinaremos como
forma todos los rectángulos con las opciones de capa. Una vez combinados reduciremos el
ancho de las columnas en 99,46% o su equivalente en pixels 1140px de ancho y volveremos a
centrar las columnas con respecto al escenario.
.
Ajustaremos nuevamente las líneas guías de la medianil a cada lado de las columnas.
Una vez obtenemos las guías habrá que dividir el área asignada a la medianil en 2 y para ello
tendremos que crear una selección entre cada medianil y arrastraremos una guía vertical y la
colocaremos en medio de la selección (con el ajuste a todo el centrado es automático).
Esto
lo
repetiremos para todos los medianiles,

finalmente, para terminar con las líneas guías colocaremos a la izquierda de nuestra primera
columna una línea guía con una distancia de 15px y al lado derecho de la última columna otra
línea guía con una distancia de 15px.
Finalmente pintaremos nuestras columnas de color rojo y le daremos opacidad 10% de capa y
de esta forma obtendremos nuestra plantilla bootstrap para diseñar en web. Esta misma
distribución de guías es la que hallaremos en Adobe Muse. Por lo que diseñar con las mismas
guías nos facilitará mucho la adaptación del diseño entre Photoshop y Muse.
68px ancho x Columna
15px margen
izquierdo /
derecho 15px ancho medianil
Si hacemos una selección desde la primera línea guía de la izquierda a la ultima linea guia de la
derecha veremos que el ancho obtenido es de 1170px.
Al obtener el ancho a 1170 px para el contenido, crearemos nuevas capas para disponer la
separación por 3 columnas, 2 columnas y 1 columna como se muestran en las imágenes:
3 columnas: tres rectángulos cada uno abarca 4 columnas de la grilla.

PUBLICIDAD
2 columnas: Dos rectángulos cada uno abarca 6 columnas de la grilla.
1 columna: un rectángulo que abarca todas las columnas de la grilla.
Dispuestas en una capa de grupo llamado grilla tendremos las capas de 12 columnas, 3
columnas, 2 columnas y 1 columna.

2.2 DISEÑO VISUAL DEL SITIO WEB

2.2.1 Diseño de una página de inicio
Uno de los principales quebraderos de cabeza con los que se encuentra un desarrollador a la
hora de iniciar un nuevo proyecto web, es la creación de un layout básico sobre el que
trabajar.
Adicionalmente, si queremos que nuestro diseño sea capaz de adaptarse a los distintos
navegadores, configuraciones o incluso dispositivos, la selección de un framework de apoyo
puede ahorrarnos mucho tiempo y esfuerzo.
Trabajando con bloques rectangulares
La estructura de una página web se sub-divide en bloques rectangulares, dentro de los cuales
vamos a posicionar los diferentes elementos de diseño o contenido. Más tarde, al aplicar
diseño sobre estos rectángulos podemos enmascararlos eliminando los bordes o utilizando
formas curvas, pero es importante conocer que cualquier estructura web está basada en
rectángulos horizontales (no en diagonal).
A pesar de todo, el diseño de la estructura web no finaliza al posicionar los diferentes bloques,
porque tenemos que definir como se adaptaran y comportaran en función de la resolución de
pantalla.
pantalla.
pantalla.

PUBLICIDAD
pantalla.
Distribución de elementos base de plantilla en Photoshop
Antes de empezar tenemos que tener claro que trabajaremos el archivo Photoshop utilizando
mesas de trabajo por lo que nuestras plantillas guía deberemos adaptarla a mesa de trabajo.
Seleccionaremos la herramienta mesa de trabajo y enmarcaremos nuestro documento en 1300

x 2350px. Se creará una capa que por defecto se llamará mesa de trabajo 1, la renombraremos
con el nombre Inicio.
Herramienta de mesa de trabajo y cambio de nombre de mesa de trabajo en capas (inicio)
El nombre que le coloquemos a la mesa de trabajo podremos visualizarla en la parte superior

de la mesa de trabajo.

Según nuestro wireframe se dividió la página principal en 6 secciones principales.
Estas secciones son CABECERA / PORTADA / SOBRE MI / PORTAFOLIO / CONACTO / PIE DE

PAGINA, distribuiremos las secciones de nuestra página de inicio de la siguiente manera:

PUBLICIDAD
Cabecera 1300 x 60px
Portada 1300 x 675 px
Sobre mi 1300 x 745 px
Portafolio 1300 x 1450 px
Contacto 1300 x 620 px
Pié de página
1300 x 85 px /

Hemos trabajado al 100% de ancho ya que nuestro sitio responsive deberá variar este
porcentaje según la medida de nuestra pantalla.
Es importante trabajar con capas y agruparlas

llamándolas cada una con el nombre de las
secciones mencionadas ya que luego cuando
empecemos a colocar el contenido de cada
sección lo colocaremos dentro de su grupo a
la que corresponde.
Esto nos permitirá trabajar los elementos que

componen el diseño de manera ordenada y
reconocer fácilmente su ubicación en el
diseño.
El impacto del diseño de la página de Inicio sobre el negocio es mucho más grande de lo que
reflejan los datos de sus ventas o de sus visitas. Como vimos anteriormente en el diseño web
los conceptos de usabilidad, navegabilidad y experiencia de usuario, y todas ellas comienzan
por la página de INICIO, pues esta es la página más visitada de tu web. Por algo la página de
INICIO es la cara del negocio en la internet y debe cumplir unos requisitos mínimos de diseño.
Imagina la desorientación que sentirías si al entrar en una tienda no supieras de inmediato qué
servicios o productos son los que allí se ofrecen. Pues lo mismo ocurre con la página de Inicio o
homepage. Ésta debe comunicar inmediatamente al usuario lo siguiente:
2.2.1.1 Dónde está

2.2.1.2 Para qué le sirve esa web y qué puede hacer en ella y qué puede resolver, satisfacer,
conseguir…
2.2.1.3 Cómo obtener más información de forma fácil e intuitiva
2.2.1.4 Quién eres tú o tu negocio, lo que haces, a qué te dedicas
2.2.1.5 Por qué debería quedarse

PUBLICIDAD
Para comunicar de forma efectiva, un buen diseño de la página de Inicio debe asignar el énfasis
adecuado y equilibrado tanto a la marca como a las actividades que desea que se lleven a cabo
dentro de la web. Ese equilibrio se logra mediante un buen diseño web desde la perspectiva de
la usabilidad, la funcionalidad, la estructura y la apariencia o diseño visual.
Pirámide invertida de la información
Básicamente esta técnica consiste en dosificar la información de mayor a menor importancia.

Es la técnica que se utiliza en el periodismo tradicional para captar a los lectores pues de esta
forma se logra retener la atención de las visitas (o lectores en este caso). Esto no hace referencia
única y exclusivamente al texto; las imágenes o vídeos también forman parte de esta
información y más si trasladamos este concepto al mundo web. De hecho, el diseño juega un
papel primordial a la hora de presentar la información en una página y el reto es buscar el
equilibrio con el diseño.
Distribución información y diseño
Siguiendo este principio, la página de inicio se estructuraría del siguiente modo: en la parte
superior predominaría el diseño y muy poco texto para aumentar el impacto visual. El texto
podría ser de un tamaño mayor y ser por ejemplo un eslogan con el que se identifique la
empresa. Conforme nos desplazamos hacia abajo, la información escrita va aumentando en
cantidad y en protagonismo: se van dando más detalles mientras que el diseño va
disminuyendo de importancia.

Esta distribución de la información y el diseño contribuye a:
2.2.1.6 Retener a las visitas, dado que el diseño es el factor que más influye a la hora de
captar la atención de las visitas.
2.2.1.7 Aumentar la credibilidad de la marca: al darle un lugar protagonista a imágenes como
el logotipo o una imagen principal, se transmite ante todo profesionalidad.
2.2.1.8 Informar desde el primer instante: las visitas captan desde el primer instante qué
servicio o producto se ofrece o cómo pueden interactuar con la página web.
¿Cómo estructurar la página web en tres partes?

No existe una regla universal para estructurar la página de inicio. A pesar de eso, la suma de
los pequeños detalles hace que el contenido se vea mejor. Así pues, es importante que
cuidemos las reglas básicas del menú de navegación, de los títulos o las imágenes dentro de la
web.
No obstante, en este artículo nos vamos a centrar en la distribución conceptual de la

información y vamos a hacer una simple separación imaginaria en tres partes. Para explicarlo,
vamos a tomar como ejemplo la página de No pierdas tus libros, un proyecto de La práctica.
Primera parte: espacio para la marca

En esta primera parte, como decíamos, la visita tiene que saber desde el comienzo donde está.
Es por eso que es necesario destacar el logotipo de la marca y una imagen de gran
impacto que retenga a la visita.
El menú de navegación da a los usuarios el control sobre la página web. Este tiene que tener
una estructura ramificada e ir desde un punto más general (como "tienda online") a una
categoría más concreta (como puede ser un producto).
Otro buen ejemplo, puede ser la página web de los asesores financieros albers- partner.deque
(aunque esté en alemán) desde el primer momento se ve el logotipo, a qué se dedican y
resaltan una imagen representativa de la ciudad de Hamburgo, que es donde ofrecen sus
servicios. O esta página otra página: rebecca-winter.co.uk que ofrece asesoramiento y coaching
a padres.

PUBLICIDAD
Segunda parte: destaca los productos o servicios
En esta segunda parte, los productos y servicios toman el papel protagonista. Es un buen
momento para poder enlazar con otras partes de la página web, como la tienda online o más
información. Puedes utilizar imágenes o iconos que se conviertan en enlaces. En este sentido
destacamos las páginas corrotoarquitectura.es que con un toque minimalista sólo presenta
imágenes que nos dirigen a otros puntos de la página web o babyclasic.com que presenta tres
columnas con más información, además de jugar con los colores y los iconos.
Tercera parte: información siempre visible
En este ejemplo se resalta además esta tercera parte con otro color para diferenciarse aún más
de las partes anteriores. En este espacio se ha de incluir una forma de contacto. Con eso sería
suficiente, aunque es también un espacio en el que podemos ofrecer un "segundo" menú de
navegación o enlaces a los apartados más destacados de la web. También puede ser un buen
lugar para promocionar las redes sociales.
Finalmente, y como últimas recomendaciones podríamos decir que la información también es
necesario dosificarla entre las diferentes páginas: no podemos tener toda la información en la
página de inicio y en el resto de las subpáginas grandes espacios en blancos.

También es necesario buscar ser conciso, claro y procurar evitar toda la información (tanto
textos como imágenes) que pueda causar distracciones o ruido al mensaje principal; a fin de
cuentas, la página de inicio es como la portada de una revista.
Diseñando la página de inicio de nuestro proyecto en Photoshop
Cuando se construye un diseño responsive es importante que los elementos del sitio se
muestren correctamente en el escritorio, tabletas y móviles. Dos culpables principales que
pueden causar problemas son imágenes y texto. Las imágenes para mostrarse correctamente
necesitan cargar rápidamente. Para asegurarse de que eso ocurra se recomienda que utilice
tamaños de imagen diferentes para los distintos dispositivos. Otro motivo de preocupación es
con las fuentes, que han de ser claros en todos los dispositivos. Por ello trabajaremos con la
versión de escritorio para asegurarnos de colocar todos los contenidos de nuestra página y en
su formato más amplio.
A continuación, crearemos un diseño responsive en Photoshop para un portafolio web de
diseñador:
Utilizando la distribución de plantilla realizada en nuestro archivo de 1300 x 2350px.
Empezaremos a colocar la información de nuestra página de inicio usando la pirámide invertida

de la información vista en esta unidad:
1. Cabecera
La cabecera o “header” de nuestro sitio por lo regular contiene al logotipo o nombre de

nuestra página y el menú principal como también acceso a búsqueda y redes. Para
nuestro diseño colocaremos nuestro logo o nombre y también el menú de navegación
con los botones INICIO / SOBRE MI / PORTAFOLIO / CONTACTO / PIE DE PÀGINA
Debemos tener en cuenta las líneas guías exteriores nos delimitan el espacio para el contenido
y entre ambas existe un espacio de 1170px el mismo que determinamos como media estándar.
Nótese que el logotipo o nombre del sitio le hemos dado un margen según las guías de
bootstrap de 15px a la izquierda al igual que el menú de navegación con 15px de margen a la
derecha.

PUBLICIDAD
Portada
Para foto de inicio (portada) agregaremos una imagen acompañada de un titular y subtitular.
Sección Sobre mi
Agregaremos un titular con el nombre de la sección (Sobre Mi.) seguido de un subtitular,

además agregaremos un párrafo de texto centrado, también colocaremos 4 iconos
acompañados de texto descriptivo y finalmente un botón (descargar CV) que permitirá al
usuario descargar un PDF.

Sección Portafolio
En esta sección agregaremos un titular (Portafolio) seguido de 06 imágenes de proyectos

colocadas en dos columnas tomando en consideración nuestro grip para ubicar correctamente
nuestras imágenes.

PUBLICIDAD
Sección Contacto
Agregaremos un titular (Contacto.) seguido de un formulario con los siguientes campos:
nombre, Asunto, Mensaje, Email y Teléfono. Diseñaremos también un botón (Enviar) finalmente
un texto con datos como correo y numero telefónico de contacto.

Pie de página
El footer es la etiqueta que se le asigna en HTML al pie de página, en ella van los datos de
contacto y en algunas ocasiones post de blog o noticias, así como también los accesos directos
a las redes sociales, mapa del sitio, copyright, preguntas frecuentes entre otros.
En este caso solo añadiremos, acceso a redes y copyright.

PUBLICIDAD
Nuestro sitio habrá quedado de la siguiente manera.


PUBLICIDAD
Y con ello habremos concluido con el diseño de la página de inicio para nuestro portafolio en la
pantalla de escritorio. De la misma manera ahora debemos adaptar nuestro diseño a las
resoluciones de tablets y celulares más comunes las cuales son 750px para tabletas y 480px para
celulares. Veremos que no solo debemos ajustar el contenido, sino que también tendremos que
eliminar algunos contenidos que no son relevantes y hasta reemplazar el menú por uno más
conveniente para estos dispositivos.
2.1.1 Diseño del menú de navegación.
Diseñar un buen menú de navegación web no es tarea fácil, pues entran muchos puntos a tener
en cuenta que van desde la densidad de contenido al diseño que queremos utilizar. Un menú
de navegación puede ser simple o complejo y puede facilitar el encontrar lo que se busca o, al
contrario, dificultarlo. El menú de navegación varía mucho de sitio en sitio, no es lo mismo la
planificación del menú de navegación de un blog que el de una tienda online. Así, muchas veces
con un simple menú de navegación habremos conseguido un diseño web bien estructurado,
mientras que otras veces no nos quedará más remedio que crean complejos submenús.
El diseño web de menús de navegación es un arte por sí mismo y los diseñadores se vuelven
mejor con la experiencia y el análisis de otros sitios web.
Como ya hemos visto la arquitectura de la información nos ayudará a estructurar los

contenidos de nuestro sitio web y con ello nos será muy útil para diseñar el menú de
navegación.
Menú Principal y Menú Secundario

Cuando bien hay muchos contenidos o bien los
contenidos no se relacionan entre sí, es cuando
debemos pensar en crear un menú principal y un
menú secundario. Por ejemplo, en esta web hay dos
menús, porque una cosa son las páginas de
información a de los productos que ofrece el sitio en
este caso automóviles Volkswagen y otra son los
servicios adicionales al propio servicio de venta de
automóviles de parte de la concesionaria como lo
son por ejemplo servicios financieros.
En este caso particular para no llenar la pantalla de

menús existe el botón MAS que permite ver es menú
secundario. En otras páginas el menú principal se
encuentra en la parte superior y el Menú Principal: El
menú principal ha de contener las opciones
primordiales cara al usuario del sitio. Lo que en una
web estará en el menú principal, en otra estará en el
menú secundario.
menú secundario en una barra lateral ya sea izquierda
o derecha

Menú Secundario: En el menú secundario encontraremos cosas de valor que, por un motivo u
otro, no están relacionadas o no tienen e l suficiente peso como para estar en el menú
principal. Y digo cosas de valor, porque en otro caso no es necesario ponerlas en el menú de
navegación, pues un enlace interno servirá.
Agrupación de contenidos
En el caso de tener mucho contenido disponible y haber de crear submenús del menú
principal, viene la pregunta de en qué orden clasificamos los contenidos, ¿utilizamos el orden
alfabético o mejor los ordenamos por el grado de popularidad? Por ejemplo, en la página de
saga falabella se organiza los submenús por interés y en algunos casos se omiten categorías
bajo un botón ver más.
Aquí tienes una lista de los métodos de clasificación de contenidos más utilizados, junto con
algunas sugerencias de cuando es recomendable su uso.
Orden alfabético: El orden alfabético es ideal para cuando el usuario busca algo de manera
rápida, véase el orden de las etiquetas del menú lateral de este blog.
Popularidad: Este modo de clasificación es ideal para cuando se buscan contenidos en base a
intereses, pero tiene como inconveniente que deja de lado otros contenidos que quizás
queremos potenciar.
Orden cronológico: Esta clasificación es interesante para contenidos en que la fecha de

publicación es importante, como es el caso de un periódico online o un blog.
Pasos a seguir: Si por ejemplo el contenido responde a la pregunta de cómo hacer algo y esto
requiere una serie de pasos, clasificaremos el contenido en base a esta opción.

PUBLICIDAD
Horizontal versus vertical
Más allá del gusto personal, muchos son los factores que influyen en la elección de un menú
de navegación horizontal o vertical, destacando el diseño, la usabilidad y la cantidad de
contenido. Muchas veces los profesionales del diseño web incluyen iconos en el menú de
navegación para añadir elementos visuales que faciliten la navegación. También se utiliza
muchas veces una tipografía rica. El motivo es que como el menú de navegación es la parte más
popular de la página web, pues es la que nos permite navegar, se le puede dar un trato
especial, sea con tipografía, sea con iconos, sea con ambas, para darle un toque más especial y
único.
Un factor determinante en la elección de la orientación del menú es la cantidad de

información o en otras palabras botones y enlaces que contendrá dicho menú. Para tener una
idea más clara la página www.amazon.com utiliza un menú vertical dado que contiene
demasiadas categorías y está a la vez muchas subcategorías de productos y puede crecer aún
más.
En cambio páginas como www.peruwagen.com.pe difícilmente aumente la cantidad de menús

principales y por ello la mejor disposición fue la horizontal.

Uso de los submenús
Como hemos visto antes, hay veces en que los contenidos son tantos que es necesario el uso de
submenús. El uso de la creatividad en los submenús puede dar pasos a sitios web que facilitan
enormemente la navegación.
Uso de categorías y subcategorías: Como destacamos en la arquitectura de la información, es

muy importante una buena clasificación que no dé lugar a confusión y que a su vez facilite la
navegación. Se recomienda previamente desarrollar un esquema de navegación coherente
antes de escoger un diseño para el menú.
Uso de iconos, tipografía e imágenes: Es un hecho que la mayoría de cosas nos han de entrar
por los ojos. Si ves un menú atiborrado de información en letra pequeña, el sitio web te va a
crear una impresión negativa. En cambio, si utilizas convenientemente los espacios, los iconos
e incluso la tipografía e imágenes, conseguirás mejorar notablemente la calidad del menú de
navegación. Como vimos en la página de www.wv.com inicialmente.
Ahora ya tenemos claro los conceptos para desarrollar nuestro menú de navegación en nuestro
diseño de portafolio en Photoshop.
En este caso hemos diseñado un menú horizontal porque no hay muchos botones en nuestro
menú y no tienen subcategorías. Como parte del diseño para facilitar al usuario la experiencia
le informaremos en todo momento donde se encuentra en la página con un marcador blanco
que resalta la ubicación actual en el sitio, en la imagen esta activada la página de inicio porque
allí nos encontramos en este momento.
Cuando trabajemos a diferentes resoluciones veremos que tal vez este menú ya no se ajuste
correctamente a la pantalla o ventana del explorador por lo que tendremos que ver la
posibilidad de crear otro menú que reemplace al que tenemos para la versión de escritorio.
Para este ejemplo para las resoluciones menores a 750px a 320px es decir para tablets y
celulares utilizaremos el siguiente menú vertical.
Esto porque si mantenemos el menú del escritorio este se sobrepone encima del logo, además
debemos recordar que la pantalla es táctil por lo tanto los botones deben ser lo suficientemente
grandes y visibles para manipularlos con los dedos de la mano.

PUBLICIDAD
2.2.3 Diseño de las páginas de contenido.
El buen funcionamiento de una web se ve definido por un conjunto muy amplio de factores
como el diseño, la usabilidad, optimización para buscadores, difusión de contenidos,
contenidos relevantes, contenidos adecuados, etc.
El trabajo invertido en cada uno de estos factores determinará el grado en que el sitio cumple
con sus objetivos (vender, divulgar, captar clientes, etc.).
Entendemos por “contenido web” todo aquel documento, imagen, animación, video, etc., que
puede ser interpretado por un navegador y que sirve para mostrar información de cualquier
tipo (gráfica, textual, contextual, etc.).
Lo primero que se debe destacar de la relación entre el contenido y la web, es que el valor que
le da cada visitante a cada página de la web lo marca su contenido. Debido a esto, siempre es
conveniente recordar que, en la creación de un portal, el contenido (definido inicialmente en el
proyecto) es el que define en parte la forma de la web (diseño gráfico, secciones, navegabilidad,
etc.) y no al revés.
En este gráfico podemos ver que crear contenido web de calidad supone un alto grado de dificultad, pero como
contrapartida tiene un alto nivel de efectividad.
La razón es mejorar el posicionamiento en los buscadores y de esta manera aumentar la

visibilidad del sitio. Pero existe otra razón, más transparente y con la cual se comenzó
probablemente el concepto de Internet: el contenido es el motivo por el cual entramos a la red.
No habría buscadores si no fueran para la búsqueda de algún tipo de contenido: texto,
imágenes, videos, etc.
Entonces, si el contenido es la razón que nos hace interactuar en internet, es lógico pensar en
que hay que alimentar a ese usuario que está en búsqueda de algo con contenido relevante
sobre lo que busca. De esta manera, podemos captar la atención de personas que luego se
pueden convertir en clientes o simples lectores de nuestro contenido.
Podemos considerar un buen contenido web aquel que está concebido para Internet, que se
ajusta a los objetivos del sitio, da respuesta a las necesidades de los visitantes, presentan y
definen claramente los productos y servicios ofertados, o están optimizados para los
buscadores.
Es recomendable que los contenidos cumplan con las siguientes características:
Claridad: Cualquiera que sea el tema del sitio web o la especialidad, es conveniente que el
visitante encuentre contenidos en un lenguaje claro, sin mucha “jerga” o demasiados términos
técnicos o científicos.
Ubicación: La ubicación de los contenidos en un sitio web, está directamente relacionada con
el objeto del mismo, si el sitio es comercial o empresarial se puede jugar de distintas formas para
acomodar los contenidos. Lo ideal es que estén bien organizados, con buen espacio y tamaño
de fuente.
Visualización: No hay que ser “tacaño” con el espacio que nos brinda un sitio web. El utilizar
letras demasiado pequeñas ahuyenta al visitante. Si lo que se quiere decir es demasiado
extenso, organice la información por módulos o subtítulos del tema principal y permita a su
visitante que acceda a otra página y continúe leyendo el tema de su interés.
Por lo tanto, ha de desarrollar su contenido dependiendo de sus objetivos y en base a unas

características, siendo claro y cubriendo las necesidades de información. La optimización del
contenido web se transformará en resultados visibles.
2.2.4 Diseñando para Smartphone y Tablets
Para esta adaptación utilizaremos la medida de 480px destinado para smartphone pantalla
estándar.
Las principales ventajas de una web optimizada para móviles y tablets
2.2.4.1 Diseño adaptado a nuestra pantalla

2.2.4.2 Comodidad a la hora de navegar y leer textos al no tener que usar el zoom.
2.2.4.3 Contenido más directo, los elementos irrelevantes se eliminan.
2.2.4.4 Mayor impacto visual.
Cabe recordar que, aunque el diseño responsive debe adaptarse fluidamente al ancho del
explorador nosotros debemos determinar con el diseño como se hará esta adaptación es decir
no es algo que se de automáticamente, sino que nosotros controlamos dicha adaptación.
Cabecera
En un nuevo documento utilizando la plantilla bootstrap 480px iremos armando nuevamente

el contenido de nuestro diseño iremos trasladando grupo por grupo, cabecera y adaptaremos
para esta resolución.

PUBLICIDAD
En la cabecera ha sido necesario rediseñar el menú ya que a esta resolución el ancho de

pantalla es muy reducido para el menú de la versión de escritorio. Para una pantalla táctil se
necesita que él me menú sea lo suficientemente grande y visible para poder interactuar con él
a través de los dedos de la mano.
Portada
Nuestra imagen de portada debería adaptarse a proporción en alto y en ancho ya que esta es
una imagen fija y al ser un diseño responsive esta se ajustará en ancho y alto.
Debemos determinar sobre todo si vale la pena mostrar la imagen de la versión de escritorio
pues muchas veces el contenido se hace tan reducido que se hace ilegible los textos dentro del
banner y es necesario reemplazar dicho banner por una imagen más adecuada para la
resolución.

Para este diseño mantendremos la imagen de portada del inicio, pero haremos que tenga
ancho adaptable al ancho del navegador para que tenga un comportamiento fluido responsive.
Contenido de la página (secciones).
Para la sección de sobre mi vemos que el diseño se desarrolla en tan solo una gran columna,
un contenido debajo del otro respetando la estructura (titulo, subtitulo, párrafo, iconos,
botón)

PUBLICIDAD
Para la sección de portafolio ya no trabajaremos con 3 columnas como lo hicimos para la

versión de escritorio, sino que para su mejor visualización hemos ajustado dichas columnas a
una (1) columna.
De la misma manera que en la sección anterior respetamos el tamaño de letra para el título
Este es el comportamiento responsive que va ajustando el contenido ordenado en columnas y

que según el tamaño de la pantalla estas se van adaptando de manera fluida a la nueva
resolución.

Contacto pie de pagina
Para la sección de contacto vemos que el diseño se desarrolla en tan solo una gran columna,
un contenido debajo del otro respetando la estructura (titulo, formulario, botón, datos de
contacto)
Con estas indicaciones ya puedes también organizar los elementos de tu diseño para la versión
de Tablet cuya resolución de muestra debería trabajarse a 750px según el estándar bootstrap
con estas 3 resoluciones y tener una idea más clara de cómo se verá nuestro diseño en
plataformas como Tablet o móviles.
Debemos resaltar que estas medidas de Smartphone y tablets no son absolutas y según el diseño
en la práctica pueden variar porque no todos los diseños se adecuan de la misma manera, pero
nos debe servir de guía.

PUBLICIDAD
Resumen
1. Usando una grilla o grid será muy fácil distribuir las secciones de nuestros sitios web ya sea
de manera vertical u horizontal, aunque debemos tener en cuenta que las tres secciones
principales de nuestro sitio serán siempre la cabecera, el área de contenido y el pie de
página.
2. La página de inicio de una página web determina el éxito o el fracaso de la misma. Para
ello, hay que destacar con el diseño y crear una estructura clara de la información en ella.
3. Es muy importante detenerse y ver todas las posibilidades de diseño para el menú de
navegación ya que si bien la estructura del mapa de sitio puede estar bien definido un mal
diseño podría perjudicar la navegación por el sitio. El menú de navegación debe ser al final
fácil de usar e intuitivo.
4. Aunque no hay una regla de como diseñar un sitio web, se puede sugerir que la paginas de
contenido como la página inicial mantengan unidad gráfica, es decir que mantengan los
mismos estilos de diseño, así como para facilitar la navegabilidad las páginas de contenido
deben informarle siempre al usuario en donde se encuentra para que este no se pierda por
las páginas del sitio.
5. Terminado nuestro diseño para ordenador podemos adaptar el contenido para tablets y
Smartphone utilizando las medidas y grid establecidas para cada uno. Para tablets podemos
adaptar el contenido en 2 o 1 columna y para Smartphone en 1 columna.
Puede revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad:
o Photoshop CC 2015: Novedades

o http://www.sessionstudio.com.ar/blog/2015/06/19/photoshop-cc-2015-novedades/
o Pautas para diseñar la página de inicio
http://uzkiaga.com/blog/diseno-web/pautas-para-disenar-la-pagina-de-inicio-de-un- sitio-
web
o Página de inicio
https://es.wikipedia.org/wiki/P%C3%A1gina_de_inicio
o Tipos de navegación para un sitio web
http://www.neopixel.com.mx/articulos-neopixel/articulos-internet/1867-tipos-de-
navegaci%C3%B3n-para-un-sitio-web.html

2.3. PREPARANDO Y EXPORTANDO LOS ELEMENTOS DE

DISEÑO
2.3.1. División del diseño por sectores.
Los sectores dividen una imagen en imágenes más pequeñas que se montan en una página
web utilizando una tabla HTML o capas CSS. Con la división de la imagen, es posible asignar
diferentes enlaces URL para crear la navegación de la página o para optimizar cada parte de la
imagen utilizando sus propios ajustes de optimización.
Con el comando Guardar para Web y dispositivos puede exportar y optimizar una imagen con
sectores. Photoshop guarda cada sector como un archivo independiente y genera los códigos
HTML o CSS necesarios para mostrar la imagen con sectores.
Página web dividida en sectores.
Cuando trabaje con sectores, no olvide estos conceptos básicos:
 Para crear un sector puede utilizar la herramienta Sector o bien crear un sector basado
en capas.
 Una vez creado un sector, puede seleccionarlo mediante la herramienta Seleccionar

sector y, después, puede moverlo, cambiar su tamaño o alinearlo con otros
sectores.
 Puede definir las opciones para cada sector, como el tipo de sector, el nombre y la URL,
en el cuadro de diálogo Opciones de sector.
 Puede optimizar cada sector con diferentes ajustes de optimización en el cuadro de

diálogo Guardar para Web y dispositivos.
Tipos de sector
Los sectores se distinguen por el tipo de contenido (Tabla, Imagen, Sin imagen) y por la forma
en que se han creado (usuario, basado en capas, automático).

PUBLICIDAD
Los sectores creados con la herramienta Sector se denominan sectores de usuario; los sectores
creados de una capa se denominan sectores basados en capas. Cuando crea un nuevo sector
de usuario o un sector basado en capas, se generan sectores automáticos adicionales para las
áreas restantes de la imagen. Es decir, los sectores automáticos rellenan el espacio de la
imagen no definido por sectores de usuario ni por sectores basados en capas. Los sectores
automáticos se regeneran siempre que se añaden o editan sectores de usuario o sectores
basados en capas. Puede convertir sectores automáticos en sectores de usuario.
Estos tres tipos de sectores tienen un aspecto diferente; los sectores de usuario y los basados
en capas están definidos mediante una línea continua, mientras que los automáticos están
definidos mediante una línea discontinua. Además, los sectores de usuario y los sectores
basados en capas muestran un icono distinto. Puede elegir entre mostrar u ocultar sectores
automáticos, lo que facilita la visualización del trabajo con sectores de usuario y sectores
basados en capas.
Un subsector es un tipo de sector automático que se genera al crear sectores que se

superponen. Los subsectores indican cómo se dividirá la imagen al guardar el archivo
optimizado. Aunque los subsectores están numerados y muestran un símbolo de sector, no se
pueden seleccionar ni editar independientemente del sector subyacente. Los subsectores se
regeneran siempre que se organiza la pila de sectores.
Los sectores se pueden crear mediante diversos métodos:
 Los sectores automáticos se generan de forma automática.
 Los sectores de usuario se crean con la herramienta Sector.
 Los sectores basados en capas se crean con el panel Capas.
Seccionado de una página web
Puede utilizar la herramienta Sector para dibujar directamente líneas de sectores sobre una
imagen y luego diseñar un gráfico con capas y crear segmentos basados en capas.
Creación de un sector con la herramienta Sector
1. Seleccione la herramienta Sector . (Pulse la tecla C para desplazarse por las

herramientas agrupadas con la herramienta Recortar).
Todos los sectores existentes aparecen automáticamente en la ventana de documento.
2. Seleccione un ajuste de estilo en la barra de opciones:
 Normal: Determina las proporciones del sector conforme se arrastra.
 Proporción fija: Define una proporción altura-anchura. Introduzca la proporción en

números enteros o decimales. Por ejemplo, para crear un sector con el doble de
anchura de altura, introduzca 2 para la anchura y 1 para la altura.

 Tamaño fijo: Especifica la altura y la anchura del sector. Introduzca los valores de
píxeles en números enteros.
3. Arrastre en el área en la que desea crear un sector. Pulse Mayúscula y arrastre para limitar
el sector a un cuadrado. Mantenga pulsada la tecla Mayúscula (Windows) o la tecla Opción
(Mac OS) mientras arrastra para dibujar desde el centro. Utilice Vista
> Ajustar a para alinear un nuevo sector con una guía u otro sector de la imagen. Consulte
Desplazamiento, redimensión y ajuste de sectores de usuario.
Creación de sectores a partir de guías

1. Añada guías a una imagen.
2. Seleccione la herramienta Sector y haga clic en Sectores a partir de guías en la barra de
opciones.
Cuando se crean sectores a partir de guías, se eliminan todos los sectores existentes. Creación
de un sector a partir de una capa

Un sector basado en capa incluye todos los datos de píxeles de la capa. Si mueve la
capa o edita el contenido de la capa, el área del sector se ajusta automáticamente para incluir
los nuevos píxeles.
Un sector basado en capas se actualiza al modificar la capa de origen.

Los sectores basados en capa son menos flexibles que los sectores de usuarios, no obstante,
puede convertir ("ascender") un sector basado en capa en un sector de usuario. Consulte
Conversión de sectores automáticos y basados en capa en sectores de usuario.
 Seleccione una capa en el panel Capas.

 Seleccione Capa > Nuevo sector basado en capa.
Nota: No utilice un sector basado en capas cuando tiene previsto mover la capa a lo largo de
una gran área de la imagen durante una animación, ya que la dimensión del sector puede
superar un tamaño manejable.
Conversión de sectores automáticos y basados en capa en sectores de usuario
Un sector basado en capas está ligado al contenido de píxeles de una capa, la única forma de
moverlo, combinarlo, dividirlo, redimensionarlo y alinearlo consiste en editar la capa, a no ser
que lo haya convertido en un sector de usuario.

PUBLICIDAD
Todos los sectores automáticos de una imagen se encuentran enlazados y comparten los
mismos ajustes de optimización. Si desea definir diferentes ajustes de optimización para un
sector automático, necesita ascenderlo a sector de usuario.
1. Con la herramienta Seleccionar sector , seleccione uno o varios sectores para

convertirlos.
2. Haga clic en Ascender en la barra de opciones.
Es posible ascender un sector automático desenlazándolo en el cuadro de diálogo Guardar

para Web y dispositivos. Consulte Trabajo con sectores en el cuadro de diálogo Guardar para
Web y dispositivos.
Visualización de sectores y opciones de sector
Puede visualizar sectores en Photoshop y en el cuadro de diálogo Guardar para Web y

dispositivos. Las siguientes características pueden ayudar a identificar y diferenciar sectores:
Líneas de sectores
Definen los límites de un sector. Las líneas continuas indican que el sector es un sector de
usuario o un sector basado en capas; las líneas discontinuas indican que el sector es un sector
automático.
Colores de sectores
Diferencian los sectores de usuario y los sectores basados en capas de los sectores
automáticos. Por defecto, los sectores de usuario y los sectores basados en capas tienen
símbolos azules, mientras que los sectores automáticos tienen símbolos grises. Además, el
cuadro de diálogo Guardar para Web y dispositivos utiliza ajustes de color para atenuar los
sectores no seleccionados. Estos ajustes se manifiestan por motivos de visualización y no
afectan el color de la imagen final. Por defecto, el ajuste de color para los sectores automáticos
es dos veces la cantidad del mismo para los sectores de usuario.
Números de sectores
Los sectores se numeran de izquierda a derecha y de arriba abajo, empezando en la
esquina superior izquierda de la imagen. Si cambia la disposición o el número total de sectores,
los números se actualizan para reflejar el nuevo orden.
Distintivos de sector
Los siguientes distintivos o iconos indican determinadas condiciones.
 Sector de usuario con imagen.
 Sector de usuario sin imagen.
 El sector está basado en capa.
Visualización u ocultación de los límites de sectores
Seleccione Vista > Mostrar > Sectores. Para mostrar u ocultar sectores junto con otros
elementos, utilice el comando Extras.

Visualización u ocultación de sectores automáticos
Realice una de las siguientes acciones:
 Seleccione la herramienta Seleccionar sector y haga clic en Mostrar sectores

automáticos u Ocultar sectores automáticos en la barra de opciones.
 Seleccione Vista > Mostrar > Sectores. Los sectores automáticos aparecen con el resto
de los sectores.
Visualización u ocultación de números de sector
1. Realice una de las siguientes acciones:

 En Windows, seleccione Edición > Preferencias > Guías, cuadrícula y sectores.
 En Mac OS, seleccione Photoshop > Preferencias > Guías, cuadrícula y sectores.
2. En Sectores, haga clic en Mostrar números de sector.
Cambio del color de las líneas de sectores
1. En Windows, seleccione Edición > Preferencias > Guías, cuadrícula y sectores; en Mac OS,
seleccione Photoshop > Preferencias > Guías, cuadrícula y sectores.
2. En Líneas de sectores, elija un color del menú Color de línea.
Después del cambio de color, las líneas del sector seleccionado se muestran automáticamente
en un color de contraste.
2.3.2. Separación del diseño por archivos
Esta es la manera más recurrente y en muchos casos la más efectiva si deseamos poder editar los
elementos de un diseño independientemente como por ejemplo botones, banners, iconos del
diseño visual sobre todo si tienen cambios de estado.
Ejemplo:
Este botón tiene dos estados, el estado normal.
Y el estado rollover

PUBLICIDAD
Se ha mantenido la distribución de las capas de la siguiente manera.
El texto en esta botonera es opcional porque no lo usaremos como imagen solo es referencial.
De esta forma hemos separado parte del diseño visual de Photoshop en un archivo separado
manteniendo sus capas y medida exacta del elemento.
2.3.3. Generación de recursos de imagen a partir de capas.
Anteriormente en Photoshop para trasladar nuestros recursos de imágenes de diseño,

teníamos que trabajar con la herramienta de sector.
Pero ello no era muy eficiente y en la mayoría de los casos teníamos que copiar y pegar los
elementos en archivos nuevos y guardarlos en formatos jpg o png individualmente.

Con la nueva versión de Photoshop esto se hace mucho más fácil ya que podemos generar las
imágenes independientemente dentro del mismo archivo de nuestro diseño web y sin
necesidad de sectorizar.
Para hacerlo basta seguir los siguientes pasos:
Por ejemplo, si deseamos tener nuestro elemento logo este no necesariamente debe estar
agrupado en una sola capa.
Como vemos en la imagen nuestra cabecera está conformado por diversas capas, pero esta se
encuentra jerarquizada y tenemos un elemento png llamado logo (seleccionado en la imagen).
Si deseamos convertir nuestro logo en una imagen para utilizarlo como recurso para trabajarlo
luego en el programa Adobe Dreamweaver lo que debemos hacer es a la capa de grupo
reemplazar el nombre logo por el nombre del archivo de imagen que queremos utilizar ya sea
png, jpg o gif.
Siga estos pasos para generar recursos de imagen a partir de un archivo PSD:
 Con el archivo PSD abierto, seleccione Archivo > Generar > Recursos de imagen.

PUBLICIDAD
También podemos activarlo en Preferencias > plugins > activar generador.
Esto no se encuentra activado por defecto por lo que para cada archivo psd debemos
activarlo de cualquiera de las formas indicadas.
 Añada las extensiones de formato de archivo correspondientes (.jpg, .png o .gif) a los
nombres de las capas o grupos de capas a partir de los que desee generar los recursos
de imagen. Por ejemplo, puede cambiarle el nombre al grupo de capa logo
(seleccionado en la imagen anterior) y renombrarla por logo_portafolio2.png.

Nota: los nombres de capas no admiten los caracteres especiales: y *. Además, debemos tener
en cuenta que como trabajamos para web los nombres de las capas no deben tener caracteres
en español y es recomendable utilizar todas las letras del nombre en minúsculas ya que el
archivo generado se grabara tal cual con el nombre que le coloquemos a la capa.
Por ejemplo, si una capa tiene como nombre ico_diseño deberíamos renombrarla con
ico_diseno.
Photoshop genera los recursos de imagen y los guarda en una subcarpeta junto al archivo PSD.
Si aún no se ha guardado el archivo PSD de origen, Photoshop guardará los recursos generados
en una nueva carpeta en el escritorio.
En la siguiente imagen vemos todos los recursos generados para la página de inicio utilizando
el generador de imágenes de Photoshop, seleccionado está el logo.png que hemos generado
en el ejemplo.
Cuando necesitemos una imagen sin fondo podemos trabajar con formatos png cuando la
imagen calza perfectamente en un recuadro o no necesitamos diferenciarlo del fondo podemos
trabajar con formato jpg.
2.3.3 Generación de varios recursos a partir de una capa o un grupo de capas
Para generar varios recursos a partir de una capa o grupo de capas, es necesario separar los
nombres de los recursos con el símbolo de una coma (,). Por ejemplo, en el siguiente nombre
de capa se generan tres recursos:
logo_2.jpg, logo_2b.png, logo_4c.gif
Guardado de recursos en una subcarpeta
Puede guardar los recursos de imagen generados a partir de capas o grupos de capas
concretos en una subcarpeta un nivel inferior a la carpeta de los recursos del documento.
Incluya el nombre de la subcarpeta en el nombre de la capa o grupo de capas como en el
siguiente ejemplo:
[subcarpeta]/logo_2.jpg
PUBLICIDAD
Especificación de los parámetros de calidad y tamaño
De forma predeterminada, los recursos JPG se generan con una calidad del 90%. Por su parte,
los recursos PNG se generan como imágenes de 32 bits. Los recursos GIF se generan con
transparencia alfa básica.
Conforme esté cambiando el nombre de las capas o grupos de capas para generar los recursos,
podrá personalizar la calidad y el tamaño.
Parámetros de recursos JPG
 Añada la calidad deseada con formato de sufijo al nombre del recurso: .jpg (1-
10) o .jpg(1-100%). Por ejemplo:
o logo_2.jpg5
o logo_2.jpg50%
 Añada el tamaño de imagen deseado al nombre del recurso (relativo o con un formato
compatible; es decir, px, pulg., cm y mm) en forma de prefijo. Photoshop
redimensionará la imagen según corresponda. Por ejemplo:
o 200% logo_2.jpg
o 300 x 200 ico_diseno.jpg
o 10pulg x 200mm ico_mail.jpg
Nota: no olvide añadir un espacio entre el prefijo y el nombre del recurso. Si especifica el
tamaño en píxeles, puede omitir la unidad. Por ejemplo, 300 x 200.
Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la
imagen. Por ejemplo, 4pulg x 100 rectangulo_redondeado.jpg es un nombre de capa válido
para la generación de un recurso.
Parámetros de recursos PNG
 Añada la calidad deseada con formato de sufijo al nombre del recurso: 8, 24 o

32. Por ejemplo:
o logo_3.png24
compatible; es decir, px, pulg., cm y mm) en forma de prefijo. Photoshop
redimensionará la imagen según corresponda. Por ejemplo:
o 42% logo_3.png
o 300mm x 20cm logo_3.png
o 10pulg x 50cm logo_3.png
imagen. Por ejemplo, 4pulg x 100 Rectángulo_redondeado_3.png es un nombre de capa válido

0
Parámetros de recursos GIF
compatible; es decir, px, pulg., cm y mm) en forma de prefijo. Por ejemplo:
o 42% Elipse_4.gif
o 300mm x 20cm Rectángulo_redondeado_3.gif
o 20pulg x 50cm Rectángulo_redondeado_3.gif
imagen. Por ejemplo, 4pulg x 100 Rectángulo_redondeado_3.gif es un nombre de capa válido
Los parámetros de calidad no están disponibles para los recursos GIF.
Creación de nombres de capa complejos
Puede especificar nombres de recursos con varios parámetros cuando vaya a ponerle un
nombre a una capa durante la generación de recursos. Por ejemplo:
120% Delicioso.jpg, 42% Delicioso.png24, 100x100 Delicioso_2.jpg90%, 250% Delicioso.gif
Photoshop genera los siguientes recursos a partir de esta capa:
 Delicioso.jpg (imagen JPG de 8 bits con una escala del 120%)

 Delicioso.png (imagen PNG de 24 bits con una escala del 42%)
 Delicioso_2.jpg (imagen JPG con una calidad del 90% y un tamaño absoluto de 100 x
100 px)
 Delicioso.gif (imagen GIF con una escala del 250%)
Especifique la configuración predeterminada para los recursos
Puede especificar los ajustes predeterminados de documento para los recursos generados. Siga
estos pasos:
1. Cree una capa vacía en el documento.

2. Inicie el nombre de la capa con la palabra clave default. Ahora, introduzca la configuración
que desea aplicar a los recursos de imagen generados a partir del documento. Por
ejemplo:
default hi-res/ Genera todos los recursos de imagen en una subcarpeta denominada
hi-res. Por ejemplo, [carpeta_ recurso]/hi-res/Delicioso.jpg.
default hi-res/@2x Genera todos los recursos de imagen en una subcarpeta

denominada hi-res. Además, le añade el sufijo @2x a los nombres de recurso. Por
ejemplo, [carpeta_recurso]/hi-res/Delicioso@2x.jpg.
default 50% lo-res/ Guarda los recursos de imagen reducidos en un 50% en la

subcarpeta lo-res de la carpeta de recursos del documento
PUBLICIDAD
1
default hi-res/@2x + 50% lo-res/ Genera dos recursos de imagen a partir de una capa:
o En la subcarpeta hi-res, un recurso de imagen cuyo nombre tiene como sufijo

@2x
o En la subcarpeta lo-res, un recurso de imagen reducido al 50%
Nota: los factores de escala predeterminados se sustituyen con los factores de escala
especificados en cada capa.
Desactivación de la generación de recursos de imagen en todos los documentos
Puede desactivar la generación de recursos de imagen de forma global en todos los documentos
de Photoshop en las Preferencias.
1. Seleccione Edición > Preferencias > Plugins.

2. Anule la selección de Activar generador.
3. Haga clic en OK.
Nota: el comando de menú Archivo > Generar no estará disponible si desactiva la generación
de recursos de imagen en las Preferencias. Solo podrá volver a activarla en el cuadro de diálogo
Preferencias.

2
Resumen
1. Una vez terminado nuestro diseño web en Photoshop debemos crear los recursos gráficos
o elementos del diseño para llevarlos a un editor web, existen 3 métodos para hacerlo en
Photoshop, por sectores con la herramienta sector, separando el diseño por archivos,
generando recursos de imagen con plugin de Photoshop.
2. La separación por sectores resulta muy práctica, aunque no es la mejor herramienta si

deseamos separar el diseño del fondo.
3. La separación por archivos es más un complemento que un método absoluto ya que

podemos separar solo algunas partes del diseño como botones o banners y editarlos por
separado para no cargar todo el diseño para hacerlo. Para importar estos archivos al
formato deseado será muy fácil ya que estará ajustado a su medida.
4. Generar recursos de imagen con el plagan de Photoshop es la herramienta más novedosa

de Photoshop y nos permite separar los elementos de nuestro diseño sin tener que
llevarlos a otro archivo, trabaja directamente con las capas y en ella solo basta poner los
paramentos deseados y hacer clic en generar recursos de imagen en el menú archivo.
o Tutorial: Generar recursos de imagen Photoshop.

o http://tv.adobe.com/es/watch/tutoriales-para-disenadores/recursos-de-
imagen-en-photoshop-cc/
Precauciones en recursos de imagen en Photoshop CC http://tv.adobe.com/es/watch/tutoriales-

para-disenadores/precauciones-en- recursos-de-imagen-en-photoshop-cc/

PUBLICIDAD
UNIDAD
3
INTRODUCCIÒN A HTML 5 – ONEPAGE CON
DREAMWEAVER

Al término de la unidad, el alumno aprende los conceptos básicos del código HTML. Implementa
una ONE PAGE dividiéndola en 3 secciones Cabecera (Header), Contenido (Section) y pie de
página (Footer), Con el programa Dreamweaver
TEMARIO
INTRDUCCIÓN A HTML5 – ONE PAGE EN DREANWEAVER
3.1 Tema 7 : Introducción a HTML
3.1.1 : Qué es HTML
3.1.2 : Lo nuevo en HTML5.
3.1.3 : Estructura HTML
3.1.4 : Etiquetas y atributos estructurales HTML
3.2 Tema 8 : Preparando un sitio web responsive en DreamWeaver

3.2.1 : Características principales
3.2.2 : Espacio de trabajo DreamWeaver
3.2.3 : Configuración de un sitio web
3.2.4 : Doctyoe
3.2.5 : ONE PAGE <head>
3.2.6 : ONE PAGE <header>
3.2.7 : ONE Page <body>
3.2.8 : : ONE Page <footer>
3.3 Tema 9
3.3.1
3.3.2 :
3.3.3 : Implementando un onePage en Dreanweaver
3.3.4 : .
3.3.5 :
3.3.6 :
3.3.7

PUBLICIDAD
3.1 INTRDUCCIÓN A HTML5 – ONE PAGE EN DREANWEAVER
3.1.1 Qué es HTML
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se

trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de
Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos
para Hipertexto.
Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard
Generalized Markup Language). Concepto traducido generalmente como “Estándar de
Lenguaje de Marcado Generalizado” y que se entiende como un sistema que permite
ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se
utiliza para especificar los nombres de las etiquetas que se utilizarán al ordenar, no existen
reglas para dicha organización, por eso se dice que es un sistema de formato abierto.
HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como
textos y sobre su estructura, complementando dicho texto con diversos objetos (como
fotografías, animaciones, etc).
Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que
ver con el formato de los documentos. El texto en él se crea a partir de etiquetas, también
llamadas tags, que permiten interconectar diversos conceptos y formatos.
Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través
de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan
forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en
sí mismo y sus atributos).
Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como
scripts, los cuales brindan instrucciones específicas a los navegadores que se encargan de
procesar el lenguaje. Entre los scripts que pueden agregarse, los más conocidos y utilizados
son JavaScript y PHP.
El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se
verá el elemento. El marcado presentacional, por su parte, es el que se encarga de señalar
cómo se verá el texto más allá de su función.
Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver código
fuente en nuestro navegador (como Internet Explorer o Mozilla Firefox). Al elegir esta
opción, se abrirá el editor de texto con el código HTML de la página que se está visualizando

PUBLICIDAD
3.1.2 Lo nuevo en HTML 5
HTML5 es la última versión de HTML. El término representa dos conceptos diferentes:
 Se trata de una nueva versión de HTML, con nuevos elementos, atributos y

comportamientos.
 Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las
aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y
amigos, a menudo reducido a HTML5.
Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página
referencia numerosos recursos sobre las tecnologías de HTML5, clasificados en varios
grupos según su función.
 Semántica: Permite describir con mayor precisión cuál es su contenido.

 Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
 Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en
el lado del cliente y operar sin conexión de manera más eficiente.
 Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo
son audio y video nativamente.
 Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se
ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
 Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un
mejor uso del hardware.
 Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de
entrada y salida de nuestro dispositivo.
 CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más
sofisticados.
HTML 5. Mejor estructura
Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en
bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web,
estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra
de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es
más importante, será trivial de entender para una máquina, dándole más importancia a unas
secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un
buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará.
Estos son los elementos:
 section representa una sección “general” dentro de un documento o aplicación, como un

capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6
podemos estructurar mejor toda la página.
 article representa un contenido independiente en un documento, el caso más claro son
las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada
podremos tener varios artículos demarcados semánticamente, por lo que una
herramienta puede extraerlos fácilmente.
 aside representa un contenido que está muy poco relacionado con el resto de la página,
como una barra lateral. Esencial para delimitar el contenido “importante” del contenido
“de apoyo”, haciendo más caso al primero que al segundo.
 header representa la cabecera de una sección, y es de suponer que se le dé más
importancia que al resto, sobre todo si la sección es un artículo.
 footer representa el pie de una sección, con información acerca de la página/sección que
poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
 nav representa una sección dedicada a la navegación entre el sitio, como la típica barra
superior de los periódicos.
En la anterior imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML

normal a HTML5 con estos elementos.
HTML5. Mejores formularios
El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:
 datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
 number para que el usuario indique un número.
 range para indicar un rango entre dos números.
 email para indicar un correo electrónico.
 url para indicar una dirección web.
 search para indicar una búsqueda.
 color para indicar un color.
Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas
para cada tipo de dato, por ejemplo, una fecha o un color se podrán indicar de manera directa
e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros
dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra
y el punto com), y que por tanto gana mucho con este estándar.
PUBLICIDAD
HTML 5. Otros elementos importantes
 audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo,

respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite
reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de
manera totalmente nativa como cualquier otro elemento, por ejemplo, se pueden incluir
enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un
tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo
como YouTube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es
posible (¡y necesario!).
 embed sirve para contenido incrustado, pero no nativo, sino ejecutado por plugins como el
de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo,
es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
 canvas es un elemento complejo que permite generar gráficos, dibujando elementos
dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez,
por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar
en el futuro, y que será el culpable de aplicaciones web espectaculares.
HTML5. Más elementos
 dialog se plantea para escribir conversaciones, por ejemplo, para transcripciones de chat.
 figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc.) a un título
o leyenda.
 mark representa un texto resaltado, por ejemplo, para resaltar una búsqueda.
 meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
 progress representa el estado de una tarea, y se puede usar por ejemplo al subir un
documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas
personalizadas y potentes.
 time representa una fecha o una hora.
 command representa un comando que el usuario puede ejecutar en su navegador.
 output representa una salida de un programa, probablemente ejecutado directamente en
el navegador, como una calculadora.
 datagrid representa datos de manera interactiva y permite trabajar dinámicamente con
información y cambiar la página respecto a esa información. Será útil sobre todo si se
quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del
cliente.

3.1.3 Estructura HTML
La estructura básica de una página web es la siguiente:
<html>
<head></head>
<body>
</body>
</html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en
medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La
primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es
directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos,
código JavaScript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar
es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior
izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos,

párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el
siguiente código, podemos cambiar el título de la página.
html>
<head>
<title>Esto es el título de la página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>

PUBLICIDAD
Para verlo, puedes ver el código fuente de esta misma página. Para eso, haz clic en el botón
derecho => ver código fuente, y verás así el código HTML de la página:
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body>
distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no
produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento,
es decir, “í”.
3.1.3 Etiquetas y atributos estructurales HTML5
HTML5 incorpora, entre otras mejoras, etiquetas estructurales que nos facilitan la vida a los
desarrolladores porque hacen el código mucho más legible por humanos a la par de más
semántico.
En versiones anteriores de HTML (o XHMTL incluso) se utilizaban capas con IDs para
identificar estos elementos de la estructura (por ejemplo, la cabecera era un <div
id=”header”>) práctica que llevaba a engaños o malos hábitos en muchas ocasiones.
Con HTML5 este problema ya no existe, pues hay etiquetas estructurales (de las que
explicaremos un poquito más adelante) que sólo se pueden repetir una única vez en el
mismo nivel.
Header: Es la etiqueta que conforma la cabecera de nuestro sitio web (no confundir con
<head>), de nuestros artículos o secciones. Más tarde explicaré todo el potencial de esta
etiqueta.
nav: Esta etiqueta sirve para incluir menús de navegación (navigation) en diferentes partes
de nuestro sitio. Por ejemplo, cuando ponemos las categorías de nuestro blog, podríamos
indicarlas con nav (insertando la lista desordenada <ul> dentro de las etiquetas <nav> y
</nav>) o bien el menú de navegación propiamente dicho.
section: Remarca las secciones de nuestro sitio web; cuando creamos un portfolio single page
podríamos usar section para marchar las secciones de “contacto”, “acerca de”, “trabajos”…
article: Cada artículo de nuestro sitio web. Entendamos por artículo las noticias de un
periódico, entradas del blog, trabajo de un portfolio o un contenido dinámico agregado con
cierta frecuencia.
aside: Es la barra lateral o sidebar. En realidad podemos colocar aquí cualquier contenido
tangencialmente relacionado con el contenido principal de la página; categorías, páginas,
nube de etiquetas, últimos comentarios, entradas relacionadas…
footer: Es el pié de página, de una sección (section), de un artículo, etc.
Las etiquetas estructurales y los niveles semánticos
Cuando hablamos de un nivel semántico hablamos de todo aquello que semánticamente
está al mismo nivel (por ejemplo un section o un article). En este tipo de etiquetas se pueden
utilizar etiquetas estructurales para añadir más contenido semántico a nuestra página.

Pongamos un ejemplo: supongamos que tenemos la siguiente estructura HTML5:
< !DOCTYPE html>

<html lang="es_ES">
<head>
<title>Titulo de la web</title>
</head>
<body>
<p>Contenido de la web</p>
</body>
</html>
Como estamos centrándonos en el contenido (etiqueta body) de nuestro documento, vamos a
ver la plantilla típica de un blog:
<body>
<header>
<h1>Titulo del blog</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a>
...
</li></ul>
</nav>
<section id="contenido">
<article class="post">

</article>
… más entradas ...
</section>
<aside>
<nav>
… lista con las categorías …
</nav>
… más cosas …
</aside>
<footer>

</footer>
</body>
Como ves, tenemos toda la estructura de nuestro sitio web definida con las nuevas etiquetas,
pero ¿cómo organizo la etiqueta article con lo que mencionaba antes del “nivel semántico”?
<article class="post">
<header>
<h1><a href="#">Titulo de la entrada</a></h1>

</header>
<p> Aquí pondremos el contenido de la entrada con todos sus párrafos…</p>
<footer>

</footer>
</article>

PUBLICIDAD
3.2.1 Características principales de Dreamweaver
Dreamweaver es un editor de páginas Web, que nos permite diseñar páginas de un modo muy
sencillo sin saber programar directamente en los distintos códigos que utiliza. Además, facilita
el manejo general del programa para maquetar páginas Web, aumentando la productividad de
forma notable. Una de las características más destacable es la visualización de la composición
del documento, a través de un entorno visual, donde podremos encontrar las funciones que
nos permitirán añadir diseño y funcionalidad rápidamente de manera interactiva a nuestras
creaciones. Dreamweaver, no es sólo un editor de páginas Web; es un completo gestor de
sitios que ofrece una amplia gama de posibilidades incluyendo, como no, las mayores
facilidades a la hora de publicar nuestro sitio. Por tanto, podemos decir que Dreamweaver es, a
grandes rasgos, una de las más potentes y versátiles herramientas de creación, edición y
publicación de sitios Web. Las características que definen a Dreamweaver
son:
 Versatilidad: permite realizar muchas más operaciones que otros editores existentes en
el mercado.
 Potencia: permite integrar elementos realizados con otras herramientas, tales como
imágenes procedentes de Adobe Photoshop,
 Facilidad de uso: una vez haya conocido su funcionamiento es muy sencillo de usar, de
manera que podrá explotar los recursos que ofrece. Además de contar con una buena
herramienta de ayuda y distintas opciones que facilitan aún más su uso.
 Compatibilidad con varios monitores en Windows. Ahora puedes ampliar tu espacio de
trabajo mientras visualizas tus páginas en varios monitores.
 Interfaz de usuario actualizada y moderna. Una interfaz optimizada y sencilla te permite
personalizar tu espacio de trabajo para mostrar solo las herramientas que necesitas para
trabajar con código.
 ntegración con CEF Ahora, Dreamweaver se integra con la versión más reciente de
Chromium Embedded Framework, de modo que puedes crear un sitio web HTML5
moderno y elementos de visualización, cuadrículas de CSS y mucho más.
3.2.2 Espacio de trabajo de Dreamweaver
Después de instalar Dreamweaver, la primera vez que inicie la aplicación, aparecerá un menú
de inicio rápido en la pantalla con tres preguntas para que pueda personalizar su espacio de
trabajo de Dreamweaver según sus necesidades.
Según sus respuestas a estas preguntas, Dreamweaver se abrirá en un espacio de trabajo de
desarrollador (de aspecto minimalista centrado en el código) o en un espacio de trabajo
estándar (pantalla dividida con herramientas visuales y una previsualización que va
mostrando el código dentro de la aplicación mientras se escribe).
Al seleccionar un espacio de trabajo, debe elegir un tema de color con el que se sienta
cómodo. Después ya podrá comenzar.
Pantalla Inicio mejorada
La pantalla Inicio de Dreamweaver les proporciona acceso rápido a sus archivos, tipos de
archivos y plantillas de inicio usados recientemente.
Según el estado de la suscripción, este espacio de trabajo también puede mostrar contenido
adaptado a sus necesidades.

Dreamweaver muestra la pantalla Inicio cuando se inicia la aplicación o si no hay ningún
documento abierto.
Pantalla de inicio de Dreamweaver
Opciones de inicio en Dreamweaver
Más información
Haga clic en la ficha Formación para acceder instantáneamente a los tutoriales de
Dreamweaver desde esta pantalla.
Inicio rápido
Empiece por crear documentos en Dreamweaver; para ello, haga clic en los tipos de archivo
que se muestran.
Plantillas de inicio
Abra una de las plantillas de inicio que incluye Dreamweaver.
Inicio
Haga clic en Inicio para volver a la pantalla de inicio.
Puede ver los ficheros recientes en los que ha estado trabajando en la pantalla de inicio. Si no
tiene ningún archivo reciente, esta ficha queda en blanco.
También puede utilizar la funcionalidad de búsqueda utilizando el icono Buscar de la esquina
superior derecha de esta pantalla. Cuando escriba una consulta de búsqueda, la aplicación
muestra los archivos recientes, los activos de Creative Cloud, vínculos de ayuda e imágenes
de stock que coinciden con la consulta de búsqueda.
Puede hacer clic en Crear nuevo para empezar a crear los nuevos archivos de Dreamweaver.
Si ya tiene archivos en su sistema, haga clic en Abrir
Información general sobre el espacio de trabajo

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los
objetos. Además, coloca muchas de las operaciones más frecuentes en barras de
herramientas para que pueda realizar cambios en los documentos rápidamente.
PUBLICIDAD
Espacio de trabajo de Dreamweaver
A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana

Documento D. Conmutador de espacios de trabajo E. Paneles F. Vista de código G. Barra de
estado H. Selector de etiquetas I. Vista en vivo J. Barra de herramientas
Descripción general de los elementos del espacio de trabajo
El espacio de trabajo incluye los siguientes elementos:

Barra de la aplicación
Se encuentra a lo largo de la parte superior de la ventana de la aplicación y contiene un
conmutador de espacios de trabajo, menús (solo Windows) y otros controles de la aplicación.
Barra de herramientas Documento
Contiene botones con opciones para las diferentes vistas de la ventana Documento (como la
vista Diseño, la vista en vivo y la vista Código).
Barra de herramientas Estándar
Para mostrar la barra de herramientas Estándar, seleccione Ventana > Barras de
herramientas > Estándar. La barra de herramientas contiene botones para realizar las
operaciones más habituales de los menús archivo y Edición: Nuevo, Abrir, Guardar, Guardar
todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer.
Barra de herramientas
Se encuentra en la parte izquierda de la ventana de la aplicación y contiene botones
específicos para cada vista.
Ventana Documento
Muestra el documento actual mientras lo está creando y editando.
Inspector de propiedades
Le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto
tiene varias propiedades.

Selector de etiquetas
Situado en la barra de estado de la parte inferior de la ventana Documento. Muestra la
jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la
jerarquía para seleccionar la etiqueta y todo su contenido.
Paneles
Le ayudan a supervisar y modificar el trabajo realizado. Son ejemplos de paneles el panel
Insertar, el panel Diseñador de CSS y el panel Archivos. Para ampliar un panel, haga doble
clic en su ficha.
El panel Extract
Permite cargar y ver sus archivos PSD en Creative Cloud. Con este panel, puede extraer CSS,
texto, imágenes, fuentes, colores, degradados y medidas de las composiciones PSD en su
documento.
Panel Insertar
Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y
elementos multimedia, en un documento. Cada objeto es un fragmento de código HTML que
le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
haciendo clic en el botón Tabla del panel Insertar. Si lo prefiere, puede insertar objetos
utilizando el menú Insertar en lugar del panel Insertar.
Panel Archivos
Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de
Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también
permite acceder a todos los archivos almacenados en el disco local. Para obtener más
información, consulte Administración de archivos y carpetas.
Panel Fragmentos
Permite guardar y reutilizar los fragmentos de código en distintos sitios web, sitios e
instalaciones de Dreamweaver (con la configuración de sincronización). Para obtener más
información, consulte Reutilización de código con fragmentos.
Panel Diseñador de CSS
Se trata de un inspector de propiedades de CSS que permite crear “visualmente” estilos CSS y
archivos, así como definir propiedades y consultas de medios.
3.2.3 Configuración de un sitio web
La configuración de nuestro sitio web en adobe Dreamweaver nos permitirá trabajado forma
ordena e integrada con todos los archivos que generaremos para nuestro sitio web.
En el espacio de trabajo de Adobe Dreanweaver. Nos ubicaremos en la barra superior Sitio –

Nuevo sitio

PUBLICIDAD
Al crear un sitio nuevo, aparece el cuadro de diálogo Nuevo sitio. Contiene campos donde
debemos especificar el nombre de nuestro proyecto y la carpeta donde se guardarán todos
los archivos que generemos.

Daremos clic derecho al nombre de nuestra carpeta y añadiremos un nuevo archivo.
Se añadirá un archivo tipo HTML y lo nombraremos index.html el cual contendrá por defecto la
estructura básica de un archivo tipo HTML. Ahora estamos listos para codificar.

PUBLICIDAD
3.2.4 Doctype
Observamos que la primera línea de código es Doctype que se define como la primera declaración
que va en una página web y le dice al navegador qué especificación de HTML o XHTML estas
usando.
El doctype empieza con <!DOCTYPE (debe ser escrito en mayúsculas)
Doctypes en HTML
HTML especifica 3 tipos de documentos: Strict, Transitional y Frameset. (los pongo en inglés...
porque así es como va en el código HTML)
3.2.5 Cabecera ONE PAGE <head>
Iniciaremos nuestro proyecto trabando en dentro de la etiqueta head la cual nos provee
información general (metadatos) acerca del documento, incluyendo su título y enlaces a
scripts y hojas de estilos.
Declaramos el Idioma
 <html lang="en">

Editamos la Etiqueta Title.
Todos los documentos deben tener un título, por lo tanto, este elemento es obligatorio y debe
estar ubicado dentro del elemento head.
El contenido de title suele ser mostrado en la barra de título de la ventana del navegador
 <title>Mi Portafolio</title>
Para visualizar el title de nuestra página web nos dirigimos al proyecto al archivo index.html y
damos clic derecho y en la opción de Abrir en Nevegador y escoger el tipo de navegador de
preferencia Google Chrome

PUBLICIDAD
Visualizamos la etiqueta Title que hemos escrito en la parte superior del navegador
Daremos clic derecho al proyecto para añadir una nueva carpeta

Colocamos el nombre a la carpeta “imagen”
Y daremos derecho click en la carpeta que hemos creado y damos click en Explorar.

PUBLICIDAD
Pegamos dentro de la carpeta una imagen logo_portafolio.ico para agregarlo al title.
Agregamos la etiqueta Link:

La etiqueta <link> define un enlace entre un documento y un recurso externo.
 <link rel="icon" href="images/logo_portafolio.ico" type="image/x-icon">

Visualizamos en el Navegador.
3.2.6 ONE PAGE <header>
Ahora trabajaremos en la etiqueta header la cual representa un grupo de ayudas introductorias

o de navegación. Puede contener algunos elementos de encabezado, pero también otros
elementos como un logo, una sección que aglutine secciones de encabezados, un formulario de
búsqueda.
Agregamos la Etiqueta Header :

El elemento <header> representa un contenedor para contenido introductorio o un conjunto de
enlaces de navegación.
Nos dirigimos a la opción Insertar y damos clic en Header

PUBLICIDAD
Visualizaremos que el programa coloco la etiqueta Header
Agregamos dentro de la carpeta imagen, la imagen logo_portafolio2.png

Agregamos la imagen dando clic en el tab de insertar y en la opción de Image
Buscamos la imagen y damos clic en aceptar.

PUBLICIDAD
Dentro del código de agregar la etiqueta Img:

La etiqueta <img> define una imagen en una página HTML. Además, tiene dos atributos
requeridos: src y alt.
Borramos los atributo width , height , atl ; de la etiqueta <img>

Codificamos la etiqueta nav : Crea un menú de navegación.
<nav>
</nav>
Añadimos la etiqueta <ul>: Define una lista desordenada (con viñetas).
<ul> </ul>

PUBLICIDAD
Agregamos la etiqueta <li>: define un elemento de la lista.
<li>Inicio</li>
<li>Sobre mi</li>
<li>Portafolio</li>
<li>Contacto</li>

Para visualizar los cambios damos clic en dividir para visualizar los cambios que hemos realizado
en el código.
3.2.6 ONE PAGE BODY
Añadiremos la etiqueta Main : es un contenedor para los temas centrales de un documento o

sección.

PUBLICIDAD

Ahora añadiremos las etiquetas Div:

 Div: Sirve para crear secciones o agrupar contenidos

PUBLICIDAD
Dentro del Div añadiremos otro Div

Dentro del Div añadiremos otro Div

PUBLICIDAD
Insertaremos una etiqueta <h4>:
Las etiquetas <h1> a <h6> se utilizan para definir encabezados HTML
Insertaremos una etiqueta <h3>:
Insertaremos una etiqueta <h3> <br> <h2>:
 La etiqueta <br> inserta un único salto de línea.


PUBLICIDAD
Agregamos dentro de la carpeta imagen
ico01.png | ico02.png | ico03.png | ico04.png
Agregar etiquetas:
<div> | <h1> | <h4> | <img>
La etiqueta <a> define un hipervínculo, que se utiliza para enlazar de una página a otra.
La etiqueta <p> define un párrafo.
<div>
<div >
<div >
<h1>Sobre<span> Mi.</span></h1>
<h4>Mi nombre es Lorem ipsum dolor sit amet, consectetur.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa dui, convallis sit
amet lacus eu, iaculis volutpat mauris. Cras sit amet turpis eu dui mollis luctus vitae laoreet nunc.
Nulla mi massa, vulputate a blandit a, mollis vel leo. Nam ex, auctor non faucibus sed, euismod quis
dolor. Praesent pellentesque mi rutrum, mattis urna in, gravida arcu. Donec sed auctor justo, quis
viverra est. Etiam quis mattis erat. Quisque euismod, tellus eu rutrum cursus, nunc arcu aliquam augue,
a cursus quam urna nec magna. Cras sit amet turpis eu dui mollis luctus vitae laoreet nunc. Nulla mi
massa, vulputate a blandit a, convallis sit amet lacus eu, iaculis volutpat mauris gravida arcu.
Phasellus at risus in turpis gravida cursus eget ac lorem.</p>
</div>
<div>
<div>
<img src="imagenes/ico01.png" >
<h6>Diseño Grafico</h6>
</div>
<div>
<h6>SEO</h6>
</div>
<div>
<h6>UI/UX Desarrollo</h6>
</div>
<div>
<h6>Audiovisuales</h6>
</div>
</div>
</div>
<div>
<div>
<a href="#" >Descargar CV</a>
</div>
</div>
</div>
Visualizaremos los cambios que hemos realizado en nuestra pagina

PUBLICIDAD
Agregamos dentro de la carpeta imagen
porfolio1.jpg | porfolio2.jpg | porfolio3.jpg | porfolio4.jpg | porfolio5.jpg
porfolio6.jpg | portada.png
Añadiremos la siguiente estructura para el portafolio.
<div>
<div>
<h1> Portafolio<span>.</span></h1>
<img src="imagen/porfolio1.jpg">
</div>
</div>


PUBLICIDAD
Añadiremos la siguiente estructura para el contacto.
 El <form> elemento HTML define un formulario que se utiliza para recopilar información
del usuario.
 La etiqueta <input> especifica un campo de entrada donde el usuario puede ingresar
datos.
 La etiqueta <textarea> define un control de entrada de texto multilínea.
 La etiqueta <button> define un botón pulsable.
<div>
<h1> Contacto<span>.</span></h1>
<div>
<form>
<div>
<div>
<input type="text" name="name" placeholder="Nombre*">
</div>
<div>
<input type="email" name="email" placeholder="Email*">
</div>
</div>
<div>
<div>
<input type="text" name="subject" placeholder="Asunto">
</div>
<div>
<input type="tel" name="phone" placeholder="telefono">
</div>
</div>
<p>
<textarea name="message" id="message" cols="15" rows="5" placeholder="Mensaje"></textarea>
</p>
<br>
<div>
<button type="submit" class="newsletter-form__submit">Enviar</button>
</div>
</form>
<p></p>
</div>
<div>
<h2 >Hola@miportafolio.com</h2>
<p>+51 987 654 </p>
</div>
</div>


PUBLICIDAD
3.2.8 ONE PAGE FOOTER
Añadiremos la etiqueta Footer: define un pie de página para un documento o sección.
 La etiqueta <footer> define un pie de página para un documento o sección.
<footer>
<label></label>
<label></label>
<p>2019 © Copyright <span>MiPortafolio.</span>Todos los Derechos Reservados.</p>
</footer>

Para visualizar los cambios completos, primero guardamos los cambios realizados de nuestra
página web luego dirigimos al archivo index.html y damos clic derecho y en la opción de Abrir en
Nevegador y escoger el tipo de navegador de preferencia Google Chrome.
Finalmente, nuestra página web se visualizará se la siguiente manera. En la siguiente unidad
añadiremos los estilos para dar estilos a nuestra página.

PUBLICIDAD
Resumen
 HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet.
Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de
Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de
Documentos para Hipertexto.
 HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como
textos y sobre su estructura, complementando dicho texto con diversos objetos (como
fotografías, animaciones, etc.).
 En HTML5 hay varios elementos que sirven para estructurar mejor una página web,
estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div
 Dreamweaver es un editor de páginas Web, que nos permite diseñar páginas de un modo
muy sencillo sin saber programar directamente en los distintos códigos que utiliza
https://helpx.adobe.com/es/dreamweaver/using/web-development-using-
dreamweaver---an-overview.html
https://www.hazunaweb.com/curso-de-html/estructura-basica-una-pagina-web/
https://codigofacilito.com/articulos/que-es-html
https://www.nobbot.com/personas/las-novedades-de-html5-i/

UNIDAD
4
HOJA DE ESTILOS EN CASCADA CSS

Al término de la unidad, el alumno elabora un ONE PAGE en HTML implementado con nuevos
elementos, recursos de contenido y personaliza su diseño utilizando hojas de estilo CSS
TEMARIO
INTRDUCCIÓN Y APLICACIÒN DE CSS
4.1 Tema 9 : Introducción y aplicación de CSS
4.1.1 : Qué es CSS
4.1.2 : Estilos OnePage: Menú de navegación
4.1.3 : .Estilos OnePage: Cuerpo de sitio web
4.1.4 : Estilos OnePage: Pie de página
4.2 Tema 10 : Navegación OnePage

4.2.1 : Navegación con anclas

PUBLICIDAD
4.1.1 Que es CSS
CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un
lenguaje de diseño gráfico para definir y crear la presentación de un documento
estructurado escrito en un lenguaje de marcado.2 Es muy usado para establecer el diseño
visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje
puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera.
También permite aplicar estilos no visuales, como las hojas de estilo auditivas.
Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear
páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para
muchas aplicaciones móviles (como Firefox OS).3
CSS está diseñado principalmente para marcar la separación del contenido del documento y
la forma de presentación de este, características tales como las capas o layouts, los colores y
las fuentes.4 Esta separación busca mejorar la accesibilidad del documento, proveer más
flexibilidad y control en la especificación de características presentacionales, permitir que
varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos
separada en un archivo .css, y reducir la complejidad y la repetición de código en la
estructura del documento.
La separación del formato y el contenido hace posible presentar el mismo documento

marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en
impresión, en voz (mediante un navegador de voz o un lector de pantalla, y dispositivos
táctiles basados en el sistema Braille. También se puede mostrar una página web de manera
diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden
especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su
computadora, para sobrescribir la hoja de estilos del diseñador.
La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se
aplican si más de una regla coincide para un elemento en particular. Estas reglas son
aplicadas con un sistema llamado de cascada, de modo que las prioridades son calculadas y
asignadas a las reglas, así que los resultados son predecibles.
La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type
text/css está registrado para su uso por CSS descrito en el RFC 23185. El W3C proporciona
una herramienta de validación de CSS gratuita para los documentos CSS.
Sintaxis
CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar los
nombres de varias propiedades de estilo.
Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten
en uno o más selectores, y un bloque de declaración.
Selectores
Los selectores declaran qué etiquetas se le aplican los estilos que coincidan con la etiqueta o
atributo señalados en la regla.
Los selectores pueden aplicarse a:
Todos los elementos de un tipo, como los párrafos <p>.

Elementos seguidos de un atributo, en particular:
id: identificador, un identificador único para la etiqueta.
class: clase, un identificador para anotar múltiples elementos.
Las clases y los identificadores son sensibles a las mayúsculas, comienzan con etras, y pueden
incluir caracteres alfanuméricos y guiones bajos. Una clase se aplica a cualquier número de
elementos. Un identificador se aplica un solo elemento.
Las pseudoclases son usadas en los selectores CSS para permitir el formateo usando
información que no está incluida en el documento. Un ejemplo de una pseudoclase muy
usada es:hover, que identifica el contenido que está siendo apuntado por un puntero, como
el cursor del ratón. Este nombre se añade al selector, de esta manera: a:hover o
#elementid:hover. Una pseudoclase clasifica elementos, como :link o :visited, mientras que
un pseudoelemento hace una selección de elementos parciales, como ::first-line o ::first-
letter.
Los selectores pueden ser combinados de muchas maneras para obtener una mayor
flexibilidad y precisión. Múltiples selectores pueden ser unidos en una misma línea para
especificar elementos por su ubicación, tipo de elemento, identificador, clase, o cualquier
combinación de estos. El orden de los selectores es importante. Por ejemplo, div.myClass
{color: red;} aplica a todos los elementos <div> con la clase myClass, mientras que.myClass
div {color: red;} aplica a todos los elementos <div> que estén dentro de cualquier elemento
con la clase myClass.
Uso de CSS
Antes del desarrollo de CSS, toda la información presentacional de los documentos HTML era
incluida en el código HTML. Los colores de las fuentes, los estilos de fondo, la alineación de
los elementos, los bordes y tamaños eran descritos explícitamente, a veces de manera
redundante, dentro del HTML. CSS permite a los diseñadores mover toda la información
presentacional a otro archivo, la hoja de estilos, resultando en un código HTML
notablemente más simple.
Por ejemplo, las cabeceras (h1), sub-cabeceras (h2), sub-sub-cabeceras (h3), etc., son
definidas estructuralmente usando HTML. En la impresión y las pantallas, la elección de la
fuente, tamaño, color y énfasis para esos elementos es presentacional.
Antes de CSS, los diseñadores que deseaban asignar características tipográficas, por ejemplo,
a todos los elementos h2 tenían que repetir el código presentacional HTML por cada
elemento al que se le deseaba aplicar ese estilo. Esto creaba documentos más complejos,
largos, más propensos a errores y difíciles de mantener. CSS permite la separación entre la
presentación y la estructura. CSS puede definir el color, fuente, alineación del texto, tamaño,
bordes, espaciado, capas y muchas otras características tipográficas, y pueden aplicarse
distintos estilos de impresión y de pantalla. CSS también define estilos no visuales, como la
velocidad de lectura y énfasis en los lectores de textos aurales. El W3C ha declarado obsoleto
el uso de las etiquetas presentacionales HTML.
Por ejemplo, aplicando estilos mediante etiquetas presentacionales HTML, un elemento h1

definido con texto rojo se puede representar como:
<h1><font color="red"> Capítulo 1. </font></h1>
Usando CSS, el mismo elemento puede escribirse usando propiedades de estilo inline en vez
de atributos y etiquetas de presentación:
<h1 style="color: red;"> Capítulo 1. </h1>

PUBLICIDAD
Una hoja de estilos CSS externa, descrita abajo, puede enlazarse con un documento HTML
usando la sintaxis siguiente:
<link href="hojadeestilos.css" rel="stylesheet" />
El código CSS se puede incluir en el código HTML en la etiqueta <style> dentro de la etiqueta
<head> del documento:
<style>
h1 {color: red}
</style>
4.1.2 Estilos CSS aplicado al menú de navegación
Añadiremos estilos CSS para personalizar nuestro proyecto OnePage desarrollado en HTML
en la unidad anterior. Trabajaremos primero en el menú de navegación.
Añadir al proyecto la carpeta css


PUBLICIDAD
Actualizamos los cambios

Creamos un archivo menu.css dando clic en la pestaña Diseñador de CSS y damos clic en el
botón, luego damos clic en el boton examinar del proyecto y cambiamos el nombre y el tipo de
extencios .css.
Editamos el nombre y la extención .css menu.css

PUBLICIDAD
Añadimos la siguiente línea para hacer uso del archivo .css
<link href="css/menu.css" rel="stylesheet" type="text/css">
Abriremos el archivo menú.css

Añadiremos el código para darle estilos todos los documentos html

 margin: Establece los márgenes al documento.
 padding : se utilizan para generar espacio alrededor del contenido de un elemento,
dentro de los bordes definidos.
 box-sizing: es una propiedad CSS para cambiar el modelo de caja por defecto de los
navegadores.
 font-family : Nombre de la fuente
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
}
Ahora vamos a darle estilo a la etiqueta Header

width : especifica la anchura del area de contenido de un elemento.
Height : especifica la altura del area de contenido de un elemento.
background: es un atajo para definir los valores individuales del fondo en una única regla
position : propiedad especifica el tipo de método de posicionamiento utilizado para un elemento (static,
relative, absolute, fixed, or sticky).
z-index: propiedad especifica el orden de pila de un elemento. Un elemento con un orden de apilamiento
mayor está siempre delante de un elemento con un orden de apilamiento inferior.
header{
width: 100%;
background: #e6e6e6 none repeat scroll 0 0;
position: fixed;
z-index: 100;
}

PUBLICIDAD
Crearemos una clase :

La clase selector selecciona elementos con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre
de la clase.
.img-logo{
width: 150px;
margin-left: 10%;
}

Agregar a la etiqueta img la siguiente clase
class="img-logo"
Agregamos la siguiente clase para el menú
.menu{
width: auto;
float:right;
margin-top: 19px;
margin-right: 10%;
}
Agregamos al index.html la clase menú

PUBLICIDAD
Agregamos estilos a las listas dentro de la lista
.menu ul{
display: flex;
}
.menu li{
list-style: none;
}
Para visualizar los cambios completos, primero guardamos los cambios realizados de nuestra página web,
luego dirigimos al archivo index.html y damos clic derecho y en la opción de Abrir en Nevegador y escoger
el tipo de navegador de preferencia Google Chrome.
Agregamos las siguientes etiquetas al menú : input , label , a

La etiqueta <input> especifica un campo de entrada donde el usuario puede ingresar datos.
La etiqueta <a> define un hipervínculo, que se utiliza para enlazar de una página a otra.
<input type="checkbox" id="check">

<label for="check" class="icon-menu" ></label>
<li><a>Inicio</a></li>
<li><a>Sobre mi</a></li>
<li><a>Portafolio</a></li>
<li><a>Contacto</a></li>

Agregamos estilos a la etiqueta <a> dentro de la lista de la siguiente manera
.menu li a{
color: #343434;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 38px 25px;
}
Visualizaremos los cambios
Agregamos efectos a las etiquetas <a> dentro del menú.

El :hover selector se usa para seleccionar elementos cuando pasas el mouse sobre ellos.
.menu li a:hover{
color: #ff9010;
}

PUBLICIDAD
Visualizamos los cambios
Agregamos la siguiente clase para el menú
.icon-menu{
display: none;
}
Añadimos la clase que hemos creado al html

Agregamos estilos al etiqueta con id=”check”
#check{
display: none;
}
#check:checked ~ .menu{
height: 174px;
}

PUBLICIDAD
Agregamos media query
Una media query regla para incluir un bloque de propiedades CSS solo si una determinada condición es
verdadera , llamado diseño Responsive.
@media screen and (max-width:900px){

.icon-menu{
display: block;
color: white;
float: right;
padding: 5px;
font-size: 24px;
border: 1px solid #7a7a7a;
border-radius: 5px;
margin-top: 10px;
margin-right: 16px;
}
.icon-menu:hover{
background: #3f3f3f;
cursor: pointer;
}
.menu{
float: left;
margin-top: 0px;
width: 100%;
height: 0px;
overflow: hidden;
background: #1e1e1e;
transition: all 300ms;
}
.menu ul{
flex-direction: column;
}
.menu li a{
display: block;
padding: 10px;
cursor: pointer;
}
}

Agregamos Iconos a nuestro sitio web:
Creamos la carpeta iconos y añadimos las siguientes carpetas css y font
Actualizamos el proyecto

PUBLICIDAD
Añadimos la siguiente referencia para los iconos a la index.html
<link rel="stylesheet" href="iconos/css/fontello.css">
Reducimos el ancho de la página para visualizar el responsive y los iconos de navegación

4.1.3 Estilos CSS aplicado al cuerpo de sitio web
Creamos la siguiente hoja de estilos de nombre estilos-index.css en la carpeta css , como

previamente lo habíamos realizado.
Agregamos la ruta de css al index.html
<link href="css/estilos-index.css" rel="stylesheet" type="text/css">

PUBLICIDAD
Añadiremos estilos a la etiqueta Main
main{
position: relative;
top: 60px;
}
Añadiremos las siguientes clases
.content-one{
width: 100%;
}
.content-portada{
background-position: center center;

background-image: url(../imagen/portada.png);
background-size: cover;
height: 100vh;
align-items: center;
display: flex;
}

.content-item1{
padding: 200px;
position: relative;
top: 60px;
}
Añadimos las siguientes clases al index.html

PUBLICIDAD
visualizaremos los cambios realizados
Añadiremos las siguientes clases a las etiquetas <h2 , h3 , h4>
Este modo de añadir en cascada, solo afectara a las etiquetas h2 , h3 , h4 que están dentro de la
clase .content-item1 únicamente
.content-item1 h4{
color: white;
font-size: 60px;
font-weight: 100;
}
.content-item1 h3{
color: #222222;
font-size: 60px;
}
.content-item1 h2{
color: #363636;
font-size: 40px;
font-weight: 100;
}


.content-portada{
background-repeat: no-repeat;
}
}

.content-item1{
width: 100%;
}
}

PUBLICIDAD
.content-two{
width: 100%;
padding: 40px;
}
Añadimos la clase al archivo index.html

.content-details{
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
.about{
width: 90%;
margin: auto;
padding: 40px;
text-align: center;
}
.about h1 {
color: #222222;
font-size: 72px;
font-weight: 700;
padding-bottom: 25px;
line-height: 80px;
}
.about h1 span {
color: #FF9010;
}
.about p {
color: #666666;
font-size: 16px;
line-height: 28px;
margin-bottom: 0;
margin-top: 25px;
}
.about p span {
margin: 25px 0;
color: #FF9010;
font-weight: 700;
}
.about h4 {
color: #222222;
font-size: 24px;
font-weight: 700;
line-height: 29px;
}

PUBLICIDAD
.proces-area {
padding: 40px 0 50px;
}
.text-center {
text-align: center!important;
}
.proces {
display: inline-block;
text-align: center;
margin: 0 20px;
}
.proces h6 {
margin-top: 25px;
font-size: 16px;
font-weight: 500;
}


PUBLICIDAD
@media (max-width: 991px) and (min-width: 768px){

.proces {
margin: 10px 50px 30px 0px;
}
}
@media only screen and (max-width: 767px) and (min-width: 480px){

.proces {
}
}
@media (max-width: 767px){

.proces {
}
}

Reducimos el ancho de la página para visualizar el responsive

PUBLICIDAD
.content-item2{
width: 300px;
text-align: center;
margin: 20px;
.btn {
color: #fff;
border-radius: 50px;
background-color: #FF9010;
line-height: 32px;
border: none;
padding: 15px 50px;
font-weight: 700;
font-size: 19px;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;

.content-three{
width: 100%;
background: #f7f7fd;
padding: 70px;
.content-module{
width: 80%;
margin: auto;
text-align: center;
}
.content-module h1 {
color: #222222;
font-size: 72px;
font-weight: 700;
line-height: 80px;
}
.content-module img{
margin-top: 3px;
transition: all 300ms;
padding: 10px;
}
.content-module img:hover{
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);

PUBLICIDAD
Visualizaremos los cambios realizados

.content-module{
width: 100%;
}
}

.content-for{
width: 80%;
padding: 55px;
text-align: center;
margin: auto;
}
.content-for h1 {
font-size: 72px;
font-weight: 700;
line-height: 126px;
}
.content-for h1 span {
color: #FF9010;
}

PUBLICIDAD

.contact-forms input,
.contact-forms input-area, .contact-forms
textarea {
padding-right: 15px;
padding-left: 15px;
width: 100%;
margin-bottom: 15px;
color: #333;
border-width: 0 0 1px;
border-style: solid;
border-color: #ddd;
width: 100%;
line-height: 20px;
font-family: pt sans, sans-serif;
font-weight: 400;
letter-spacing: 1px;
padding: 10px;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px){

.col-md-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
padding-right: 15px;
padding-left: 15px;
}
}
.newsletter-form__submit {
color: #fff;
border-radius: 50px;
background-color: #FF9010;
line-height: 32px;
border: none;
padding: 10px 50px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
}
.telefono h2 {
margin-top: 50px;
font-size: 36px;
font-weight: 700;
line-height: 43px;
color: #222222;
}
.telefono p {
font-size: 36px;
font-weight: 700;
line-height: 43px;
color: #222222;
}

PUBLICIDAD

4.1.4 Estilos CSS aplicado al pie de página
Añadiremos una nueva hoja de estilos llamada footer.css
footer{
margin-top: 60px;
padding: 20px;
text-align: center;
background: #212529;
}
.icon-twitter, .icon-facebook, .icon-instagram{
color: #d1d1d1;
font-size: 22px;
padding: 10px;
}
.icon-twitter:hover, .icon-facebook:hover, .icon-instagram:hover{

color: #ff9010;
cursor: pointer;
}
footer p {
color: #999999;
font-size: 14px;
line-height: 35px;
margin-top: 10px;
letter-spacing: 0.6px;
}
footer p span {
color: #ff9010 !important;
}

PUBLICIDAD

Para visualizar los cambios completos, primero guardamos los cambios realizados de nuestra página web ,
luego dirigimos al archivo index.html y damos clic derecho y en la opción de Abrir en Navegador y escoger
el tipo de navegador de preferencia Google Chrome.

PUBLICIDAD
4.2.1 Navegación con anclas
Para generar interacción en nuestro Onepage, utilizaremos anclas para generar la Navegación.
Por Ejemplo, si damos clic en nuestra barra de navegación al botón contacto nos debería llevar a la sección
contacto.
Primero añadimos id a cada sección

Ahora nos ubicaremos en la sección sobre mi y le datemos interacción al botón de DESCARGAR CV
Descargar PDF Mediante un hipervínculo <a>
El atributo href especifica la URL de la página a la que va el enlace.

Añadiremos un atributo download para descarga el documento del href en lugar de abrirlo
Primer Creamos una carpeta llamada Documentos.
Añadimos el archivo pdf a nuestro Proyecto
Añadimos atributos a la etiqueta dentro del index.html

PUBLICIDAD

Resumen
 CSS está diseñado principalmente para marcar la separación del contenido del
documento y la forma de presentación de este, características tales como las capas o
layouts, los colores y las fuentes
 La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME
type text/css está registrado para su uso por CSS descrito en el RFC 23185. El W3C
proporciona una herramienta de validación de CSS gratuita para los documentos CSS.
 CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para
especificar los nombres de varias propiedades de estilo.
 CSS permite a los diseñadores mover toda la información presentacional a otro archivo, la
hoja de estilos, resultando en un código HTML notablemente más simple.
https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada
http://www.arumeinformatica.es/dudas/css/
http://www.maestrosdelweb.com/introcss/

PUBLICIDAD

Manual 2021 03 Diseño Interfaces Multimedia II (2372)

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual 2021 03 Diseño Interfaces Multimedia II (2372)

Cargado por

Copyright:

Formatos disponibles

DISEÑO DE

Curso Diseño de interfaces multimedia II (2372)

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

1.2 Tema 2 : Contenido estratégico y arquitectura de la información

1.3 Tema 3 : Qué es el diseño de interfaz de Usuario o UI. 22

2.2 Tema 5 : Diseño visual del sitio web. 69

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

3.2 Tema 8 : Preparando un sitio web responsive en DreamWeaver 110

Unidad de Aprendizaje 4 <

CARRERA DE DISEÑO GRÁFICO l IES PRIVADO CIBERTEC

Los conceptos avanzados como “Aquitectura de la información”, “Diseño de interfaces UI” u

Diseñaremos wireframes y diseños visuales pensados para adaptarse a múltiples resoluciones

Con el diseño terminado implementaremos nuestro sitio web en el programa Adobe

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

Unidad 1 Unidad 2 Unidad 4

Arquitectura Diseño de un Introducción a Hoja de estilo

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

1.1 Tema 1 : Diseño de experiencia de usuario UX

1.3 Tema 2 : Contenido estratégico y arquitectura de la información

1.3 Tema 3 : Qué es el diseño de interfaz de Usuario o UI.

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

1.1. Diseño de experiencia de usuario UX

La Experiencia de Usuario o UX es un término que actualmente está en esa extraña posición de

UX Design (User Experience Design) o “Diseño de Experiencia de Usuario” es una filosofía de

•Conocer a fondo a los usuarios finales, normalmente usando investigación cualitativa o

En realidad, el diseño basado en experiencias de usuario se ha dado desde que el hombre ha

El diseño de experiencia de usuario es tanto una serie de actividades (investigación, arquitectura

Un profesional UX tiene una comprensión profunda de la psicología cognitiva, la interacción

Para Sim D’Hertefelt, un arquitecto independiente de los medios interactivos en Bélgica, el

Figura 1: Diseño centrado en el humano

1.1.2. Beneficios de aplicar UX.

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

1.1.3. Proceso para el desarrollo de experiencia de usuario UX

1. Investigación: en la que se obtiene toda la información posible del proyecto, usuarios y

Figura 2: Etapas del diseño UX

Durante esta etapa se trata de obtener la mayor cantidad de información posible y

 Información relacionada con el proyecto

o Definir las necesidades generales del proyecto.

o Definir la temática general del producto a realizar o rediseñar.

o Definir los objetivos de los clientes o emisores con el producto.

o Definir la intensión comunicativa del producto (Informar, entretener, alertar)

o Definir la tipología de producto que se desea.

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

 Estudio de Usuarios (receptores)

o Caracterizar a los usuarios. (tipología, roles, etc.)

 Definir perfiles de usuarios.

o Investigar sus necesidades. (de información, formación, etc.)

 Estudio del Contexto

o Definir el modelo de negocio.

o Realizar una matriz DAFO (FODA).

o Definir un banco de problemas del contexto de uso.

o Realizar un estudio de mercado y/o de productos similares al que se quiere realizar o

En caso de estar rediseñando un producto

o Realizar una evaluación del producto existente para determinar su calidad.

 Estudio de los Contenidos

o Realizar un inventario de recursos de información del producto.

o Realizar mapas de conceptos (Concept Map).

o Realizar mapas de contenidos (Content Map).

 Estudio del proceso de diseño

o Definir una estrategia de trabajo.

o Analizar los recursos de trabajo con que se cuente.

o Planificar el tiempo de trabajo.

 Representar todas las estructuras posibles de los contenidos, en correspondencia a las

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO