Adaptive Web Design(AWD) y Responsive Web Design(RWD).

Aaron Gustafson expuso su visión

del progressive enhancement

Se extiende el uso del SVG, un formato vectorial escrito en código que permite que las
ilustraciones se adapten a grandes tamaños sin aumentar el peso del documento.

construyendo páginas web verticales, con efectos impresionantes mediante Parallax o webs de
galerías y contenidos con scroll infinito. Por otra parte, aparecen webs con apariencia de layouts o
diapositivas, donde la estructura puede ser de una sola página pero los apartados ocupan una o
varias diapositivas.

Autores como Jesse James Garet hablan del diseño de la experiencia de usuario como la etapa de
desarrollo de una web que estudia, no como el producto funciona, sino como funciona cuando un
usuario entra en contacto con él. Él propone cinco etapas: la estrategia, donde se narran las
necesidades y objetivos; el alcance o contexto, que es la especificación de características técnicas y
elementos de contenido requeridos; la estructura, encargada de la articulación del contenido y la
interacción entre los elementos; el esquema, donde se define la presentación del contenido; y la
sueprficie o el diseño visual15. Puesto que ya se ha presentado el contexto y los objetivos, este
apartado hablará sobre la estructura y el esquema de la web. La parte visual se ha separado para
hacer un mayor análisis en los detalles.

Cuando hablamos de la estructura de la web nos referimos a como se disponen los elementos
principales y se articulan entre ellos. Al tratarse del sitio web personal de un creativo, se
establecieron cuatro bloques básicos que debían aparecer: una imagen de inicio o presentación,
una descripción de la persona, un apartado de proyectos o portfolio y un formulario de contacto.
Con el fin de ahorrar tiempos de descarga se dividió el sitio en dos páginas. Una contendría los
cuatro bloques descritos, mientras que la otra presentaría la galería de proyectos, la parte más
pesada del sitio. Se estableció una estructura secuencial, a modo de diapositivas, donde un bloque
llevaría al siguiente y así sucesivamente. El menú principal conectaría con todos las partes, de
manera que el usuario pueda decidir su destino. La galería sería accesible únicamente desde el
apartado de proyectos y al retroceder enviaría al usuario a la página de inicio. Para reducir más
todavía el tiempo de descarga, se cargaría únicamente la vista previa de los proyectos,
descargando el resto de datos cuando el usuario lo solicitase a la base de datos. Si la estructura
describe cómo se distribuye y funciona el sitio, el esquema define qué forma tendrá esta
funcionalidad en cada una de las páginas. En esta etapa se diseñaron plantillas o modelos, con una
retícula y una composición similar, manteniendo la homogeneidad entre los diferentes apartados
de la web. Al tratarse de un diseño flexible, debía tenerse en cuenta las diferentes posibilidades a
la hora de reducir el tamaño del navegador. Como norma, el contenido se mantendría centrado,
distribuyendo el resto de elementos de la interfaz alrededor de éste. Se establecieron dos
plantillas diferentes, una con dos columnas, que podría funcionar también como una columna
amplia, y otra con tres columnas que dispondría de menos margen exterior. Las columnas se
adaptarían según fuera disminuyendo el tamaño de la pantalla, llegando a formarse una única
columna en los dispositivos de menor tamaño. El objetivo era realizar unas plantillas versátiles,
que pudieran adaptarse a todas las situaciones posibles.
INTERFAZ DE USUARIO La finalidad de la interfaz es orientar al usuario a lo largo de la navegación,
permitiendo una interacción intuitiva y eficiente. Se compone tanto por el menú de navegación
como por el resto de elementos que interactúan con el usuario permitiéndole desplazarse por el
sitio web y cumplir las acciones que sean necesarias. El sistema de navegación del sitio es
básicamente lineal, siguiendo el recorrido a lo largo de las secciones establecidas. El elemento
básico de la navegación es el menú principal. Éste se decidió que aparezca escondido, como el
botón de menú de los teléfonos actuales. El motivo fue mantener el mismo lenguaje entre
distintas plataformas y animar al usuario que se desplace por la web de manera lineal. Para
moverse por los distintos bloques se estableció tres sistemas que dependerían del medio en el que
se encuentre el usuario. El primero, el scroll habitual del ratón, destinado a ordenadores con ratón
convencional. El segundo, un botón que anime al usuario a seguir adelante, orientado a
ordenadores con ratón táctil sin función de scroll y tablets. Por último, en las pantallas de menor
tamaño se decidió establecer una navegación continua, sin dividir los bloques a modo de
diapositivas, pudiendo desplazarse a lo largo del la web deslizando el dedo. Para facilitar la vuelta
a la página inicial se añadió dos botones. Uno es el logotipo del creativo, el cual se encuentra en
todo momento en la esquina superior izquierda y redirige al enlace de la web. El otro es un botón
que aparece al descender por el contenido, en la esquina inferior derecha, permitiendo volver a la
parte más alta de la web sin necesidad de recargar la página. En las versiones de menor tamaño se
eliminó este botón por ser un elemento que estorbaba al contenido. Para acceder a la galería se
añadió un botón en la sección de proyectos. En esta página se añadieron dos elementos más de
interacción, un filtro de selección y un botón en cada proyecto para ampliar información. El filtro
de selección serviría para que el usuario seleccionara la categoría de los proyectos que quiera que
se muestren en pantalla. Se situó principalmente sobre la galería de imágenes, menos en los
tamaños reducidos de pantalla, que se situó en la barra del menú de navegación, bajo la opción de
volver al inicio. El botón para ampliar el contenido varía de lugar dependiendo el tamaño de
pantalla. En las de mayor tamaño aparece al hacer hover sobre las imágenes, mientras que en las
pantallas medianas y pequeñas se visualiza junto a la imagen o en la parte inferior. Por último, hay
tres elementos más de interacción en la interfaz. Uno de ellos es la opción del idioma, puesto para
una futura versión en inglés. Los

otros dos son enlaces externos a la web, destinados al contacto con el propietario del sitio. Se
trata del correo electrónico y los enlaces a las redes sociales. El correo electrónico se añadió en la
barra inferior de la web, junto a los créditos para dar la posibilidad al usuario de una manera
rápida de contacto. Los botones de las redes sociales se encuentran en la barra del menú de
navegación. El motivo de mantenerlos ocultos es el contenido. En una primera versión se pensó en
dejarlos a la vista, pero al reducir el tamaño de la pantalla distorsionaba el contenido.

, no es recomendable usar tipografías poco comunes o que no se encuentren en la red. Las

opciones habituales son, subir la tipografía al servidor del sitio web o utilizar una tipografía desde
un servidor externo, de manera que se descargara a la vez que la página y poder disfrutar de una
correcta visualización en cualquier dispositivo. Para el proyecto se escogieron dos tipografías
alojadas en Google Fonts, la Signika de la diseñadora polaca Anna Giedrys, y la Lato del diseñador,
también polaco, Lukasz Dziedzic. La primera es una fuente sans-serif pensada originalmente para
su uso en señalización y rotulación, por sus contrastes y legibilidad. Presenta un estilo suave, con
un cierto punto ilustrativo. Se utilizó para encabezados, titulares y textos de mayor tamaño. Lato
es otra fuente sans-serif de proporciones clásicas y estilo elegante, pensada para texto común. El
cuerpo de la letra es menos denso que el de la Signika, pero mantiene un ojo similar y presenta
una mayor modulación. Esto la hace idónea para textos largos y de un tamaño de letra reducido.
Se utilizó sobre todo en las descripciones de los proyectos. Mientras que la Signika es la encargada
de dar personalidad al texto, la Lato aporta la calidez y estabilidad a la lectura. En cuanto al color,
la web debía presentar una estética joven, fresca y divertida. Se definió una paleta de colores
variada: blanco, gris, amarillo, rojo, azul y verde, todos ellos en tonalidades pastel acorde al
estándar de diseño del momento. A la interfaz de usuario se le dio un tratamiento sobrio, escaso

Los elementos que componen el diseño, tanto de la interfaz como del contenido, se realizaron
mediante formas geométricas básicas y colores planos, consolidando el concepto de marca. Para
el contenido se realizaron una serie de ilustraciones que acompañarían a la interfaz a lo largo de
los bloques. Para el primer y segundo bloque, “inicio” y “sobre mi”, se rescataron unas
ilustraciones ya realizadas anteriormente para otro proyecto. En el apartado de proyectos se
diseñó una ilustración para las categorías que comprenden los diferentes trabajos presentados:
para diseño gráfico una tableta digital con un lápiz trazando una línea; para la ilustración una
pluma vectorial trabajando con curvas de bécier; y en el diseño web, un usuario interactuando con
una tablet. Para los diferentes botones de navegación y la interfaz se alternaba entre botones
rectangulares y circulares, dependiendo de su uso, excepto el botón de “scroll up”, destinado a
subir hasta la parte más alta de la web. Para este botón se quiso utilizar un elemento más
amigable, una ilustración que aparecería también en la ilustración principal, a modo de mascota.
Se trata de un búho ilustrado mediante formas básicas que representa a la vez la forma de una
barba con su bigote, haciendo referencia al nombre de Sr. Barba. Para el paso de una sección a
otra, se optó por señalizar la opción de scroll y a la vez incluir un botón semicircular que cumpliera
esta función. El botón para mostrar el menú principal contenía tres líneas horizontales dentro de
una circunferencia y dentro de un rectángulo en la versión más reducida de pantalla. En ambos
casos se trabajó el fondo gris con una sombra plana de un gris más oscuro y las líneas blancas. Al
presionarlo se convierte en una cruz de dos líneas blancas sobre el fondo gris del menú. Los
botones de idioma se dejaron como simple texto, “ES” para español y “EN” para inglés. Dentro del
menú se encuentran dos tipos de botones, los de navegación interna y los externos para las redes
sociales. Los de navegación interna son rectangulares con un contorno blanco sobre el fondo gris
del menú y el texto interior escrito en blanco con Signkia. Por otro lado, los botones de las redes
sociales son circulares, de color gris claro y con el símbolo de la red social del color del menú. Al
pasar sobre cada uno de ellos se alternan los cuatro colores de la paleta.
El botón que lleva a la galería de proyectos es similar a los del menú de navegación, añadiendo
una flecha que indica hacia la derecha, advirtiendo al usuario de que le enviará a otra página. Los
botones de filtrado de la galería se diseñaron con contorno y letra gris en las pantallas grandes y
medianas. Mientras que en las pantallas pequeñas, estos botones se situaron en el menú de
navegación, compartiendo las características de éstos. Para la ampliación de información de los
proyectos se diseñó una plantilla con el título, breve descripción y un botón que realizara la
función. En el fondo de la plantilla alternaría los colores de la paleta según la disposición de los
proyectos en la galería. La parte inferior tendría los elementos en blanco y una transparencia de
gris que oscurecería el color del fondo. Al ampliar la información aparecerían las imágenes en la
parte superior de la galería y el resto de información a su derecha. El título se mostraría en blanco,
con un fondo gris y escrito con Signika. La descripción y el resto de datos se presentaría en menor
tamaño, con la tipografía Lato y en color gris. Imagen 19. Elementos que componen la interfaz de
usuario. Diseño y desarrollo web. Juan Pedro Barba Soler 20 4.4. PÁGINA PRINCIPAL Y PROYECTOS
A partir de las páginas modelo se compuso un diseño diferente para cada sección, adaptando los
contenidos a la plantilla que mejor se ajustara. La primera plantilla se aplicó a todas las secciones
menos a la de proyectos, donde se aplicó la de tres columnas. La página de inicio únicamente
contendría una imagen centrada, que identificara el material que se iba a presentar en la web y a
la vez llamara la atención al usuario. Se escogió la primera plantilla, componiéndola con una única
columna. Para esta imagen se utilizó una ilustración de otro proyecto, editándola y adaptándola a
la propuesta. Se vio la opción de poner texto sobre la imagen, a modo de introducción o
comentario, pero se consideró que la ilustración era lo suficientemente llamativa o representativa
como para funcionar por si sola.

El segundo bloque tendría dos elementos, una descripción del creativo y una ilustración que lo
representa. Por lo tanto, se escogió la primera plantilla, dividiendo el contenido en dos columnas.
Centrado, sobre el contenido, se mostraría el encabezado de la sección. El fondo se decidió que
fuera de color verde para generar una separación entre un bloque y otro. El header o cabecera se
diseñó de manera que, al descender a lo largo de la página se adaptara, convirtiéndose en una
franja de color gris oscuro y disminuyendo el tamaño del logotipo y el botón del menú de
navegación. Como se dijo anteriormente, el objetivo era trabajar los bloques como si se tratara de
diapositivas. Para el bloque de proyectos se utilizaron tres columnas, representando las tres
especialidades del creativo. En este caso el fondo mantenía la textura original sin un color de base.
En la parte superior se mantuvo el encabezado de sección, mientras que en la parte inferior se
añadió un botón para pasar a la galería de proyectos. En la zona central se colocaron tres
cuadrados con las ilustraciones que representarían las diferentes disciplinas y el nombre de cada
una de ellas en la parte inferior del cuadro. Al carecer de márgenes entre los cuadros, se definió un
color a cada uno para separarlos. El primero se definió de color azul con la tableta gráfica,
representando al diseño gráfico. El central, de color rojo con la pluma vectorial, haciendo
referencia a la ilusImagen 21. “Sobre mi” y menú principal. 1920x1080. Imagen 22. “Proyectos”.
1920x1080. Diseño y desarrollo web. Juan Pedro Barba Soler 22 tración. El último, diseño web, de
color verde con la ilustración de la tablet. Todas las ilustraciones eran de color gris oscuro, excepto
la tableta gráfica, que tenía ciertos detalles en gris claro. El último bloque de la página principal es
la sección de contacto. En esta sección el contenido se mantiene en una columna. De arriba a bajo
se encuentran, el encabezado, un pequeño texto y el formulario de contacto. El formulario se
dividió en dos columnas. La primera contendría los datos personales del usuario y la segunda el
asunto, el cuerpo del mensaje y un botón de envío. El fondo se mantendría con la textura básica,
sin color, excepto en la visualización móvil, donde se definió azul diferenciando mejor las
secciones. La galería de proyectos mantuvo una composición similar al resto, generando una
retícula de cuatro columnas donde se dispondrían los trabajos. Mantiene el encabezado centrado
en la parte superior y se añaden los botones para el filtrado, situado en las dos últimas columnas.
En un principio, al pasar el ratón por encima de una imagen, ésta se ampliaría y se desplegaría un
bloque con el título, una breve descripción del proyecto y un botón para ampliar la información.
Finalmente este efecto se eliminó por problemas tanto de programación como de experiencia de
usuario. Esto se explica más detallada mente en el apartado de pruebas. El bloque aparecería por
encima de la imagen y desaparecería al salir el ratón del área de ésta, mouse out. Imagen 23.
“Contacto”. 1920x1080. Imagen 24. “Galería Proyectos”. 1920x1080. Diseño y desarrollo web.
Juan Pedro Barba Soler 23 4.5. DISEÑO ADAPTATIVO Con el objetivo de definir todos los aspectos
del diseño final y facilitar la parte de desarrollo de la web, se realizaron una serie de layouts o
prototipos de las secciones en los diferentes tamaños de pantalla. Cuando se habla de un layout
especial para cada tamaño de pantalla, no se refiere a un diseño adaptado únicamente a esta
pantalla. Conforme disminuye el tamaño del navegador, las columnas se adaptan y los contenidos
fluyen a lo largo del sitio. De este modo, se mantiene un diseño similar en todas las versiones,
aunque y dispone de puntos de ruptura que aseguran su correcta visualización. Se partió de tres
tamaños estandarizados: la visualización máxima de escritorio más habitual; la de dispositivos de
tamaño medio o tablets; y la de los dispositivos de menor tamaño o smartphones. 4.5.1. Escritorio
Aunque se realizó un diseño orientado a dispositivos móviles, la visualización de escritorio fue la
que dio inicio al diseño. Las columnas que lo componían se adaptaron al tamaño del resto de
pantallas de una manera flexible y fluida. La imagen 20, por ejemplo, es la pantalla de inicio de la
web y mantiene la misma estructura en todas las vistas. En el epígrafe anterior se trata esta parte
del diseño para la definición de la arquitectura del contenido. Las imágenes del 20 al 24 muestran
la composición de las cinco secciones de la web según el diseño de escritorio. 4.5.2. Tablet En las
tablets el contenido se presenta de una manera muy similar a la de escritorio en casi todos los
casos. Las secciones de “Proyectos” y “Contacto” mantienen una estructura idéntica a la de
escritorio, adaptando los tamaños de sus columnas y los contenidos. En el apartado “Sobre mi” las
columnas Imagen 25. Ejemplo de los Layouts con diferentes tamaños de pantalla. Diseño y
desarrollo web. Juan Pedro Barba Soler 24 fluyen y pasan de ser dos a convertirse en una sola,
mostrando el texto sobre la imagen. El cambio más drástico fue el de la galería de proyectos,
donde se eliminó el efecto del hover por la ausencia del ratón. Se hicieron dos columnas de
diferente tamaño, una más ancha para las imágenes y otra más estrecha para el título, la
descripción y el botón del proyecto. Los proyectos se sucedían uno encima del otro, sin espacio
entre ellos. Para separarlos visualmente, las columnas se alternaban a izquierda y derecha. Al
visualizar los proyectos, la información y las imágenes se componían en una sola columna. Por otro
lado, la opción de rotar el dispositivo requería asegurarse de que los contenidos se adaptaran
correctamente. En este caso los cambios que se realizaron fueron mínimos. El más evidente fue la
eliminación de la barra inferior de créditos en la página de la galería, para evitar la falta de
espacio. 4.5.3. Móvil Sería imposible adaptar el contenido que se presenta en cada uno de los
apartados al tamaño de una pantalla móvil, por ello se optó por eliminar la segmentación de los
apartados a modo de diapositivas, permitiendo una navegación continua. El contenido se compuso
en una única columna a lo largo Imagen 26. Detalle de la adapatación de la galería en dispositivos
móviles y tablets. Diseño y desarrollo web. Juan Pedro Barba Soler 25 de toda la web. Los
elementos que se encontraban en dos o tres columnas pasaron a encontrarse unos sobre otros. Se
eliminó la barra de créditos y el botón de scroll-up para ganar espacio. En la sección “Sobre mi” se
aumentó el tamaño del texto y se añadió una sombra transparente para mejorar la legibilidad del
contenido. El botón de navegación se cambió por un cuadrado, ganando espacio y mejorando la
superficie de pulsado. La galería de proyectos se compuso también con una sola columna,
apareciendo las imágenes una sobre la otra, separadas por el título y el botón para ampliar
información. En la parte superior de la galería aparecería el título, la descripción y las fotografías
del proyecto. Los botones de filtrado de la galería se situaron en la barra de navegación para
ahorra espacio en la parte superior. Al girar el dispositivo la página principal se presentaría de la
misma manera, pero la galería de proyectos requería un pequeño cambio. Y es que al girar la
pantalla se pierde un espacio a lo alto de la web importante. Esto podía perjudicar a la visión de
las imágenes, por eso se decidió hacer el menú de navegación estático, se quedaría en la parte
más alta de la web y no acompañaría al usuario en su recorrido. Imagen 27. Ejemplo visualización
móvil. Contenido adaptado en una sola columna. Diseño y desarrollo web. Juan Pedro Barba Soler
26 5. DESARROLLO DEL SITIO WEB En este apartado se presentará el proceso para la programación
del sitio web. Al tratarse de un proceso muy extenso se tratará de una manera generalizada,
omitiendo lo básico del código y entrando en detalle únicamente en los aspectos más importantes.
5.1. MAQUETACIÓN Y ESTILO Para la maquetación del sitio se trabajó con HTML5 y CSS3,
aplicando las nuevas etiquetas según la recomendación del W3C16. La maquetación supone la
parte básica del desarrollo web. Consiste en estructurar el contenido mediante HTML y darle la
apariencia deseada con CSS. Se partió de un documento base, con las divisiones de head y body ya
establecidas. Al body o cuerpo se le añadió una sección que se dividió como es habitual en tres
partes: el header o cabecera, el content o contenido y el footer o pie. En el header se incluyó el
logotipo, las opciones de idioma y el menú de navegación. En este caso el content se llamó de otra
manera, ya que la sección que lo contenía adquirió ese nombre. Se llamó pues, holder o
“recipiente”. El holder presentaba las diferentes partes de la web, el contenido y otros elementos
de interacción. El footer se compuso únicamente por los créditos de la web. Lo primero que se
maquetó fue la cabecera. Se trabajó mediante las etiquetas div y nav. Se utilizaron dos etiquetas
div para el logotipo y los botones de idioma con sus enlaces e imágenes correspondientes,
mientras que la etiqueta nav se utilizó para contener el menú de navegación. Dentro de nav se
incluyó otro div que tendría el botón para mostrar y ocultar, y el menú de navegación. En el menú
de navegación se incorporó un div para el botón de cerrar, otro para los enlaces de navegación por
la web, otro para las redes sociales y un último para los créditos que aparecen en la parte inferior
del menú. De esta parte cabe destacar que los botones se realizaron únicamente con código, sin
acudir a una imagen, mediante CSS. También, que tuvo que añadirse dos veces los enlaces de
navegación, la primera para un uso habitual y la segunda para los dispositivos móviles. El motivo
de esto se explicará más detalladamente en el apartado de animación e interacción. Lo siguiente
que se maquetó fue el footer, puesto que requería un esfuerzo menor. Incluyó dos divs, uno a la
derecha y otro a la izquierda. El de la derecha se destinó únicamente a créditos, mientras que el de
la izquerda contenía los datos de contacto. El contenido, que se situaba entre el header y el footer,
se maquetó de una manera peculiar. Dentro de la etiqueta section con la id “holder“ se incluyó un
div llamado “slides_holder”, o contenedor de diapositivas, y este contendría los divs para los
apartados. Cada apartado tendría un div con una classe que sería “table_holder” y una id que
equivale al nombre del bloque, home o “Inicio”, who o “Sobre mi”, what o “Proyectos”, y where o
“Contacto”. Dentro de este div se incluyó otro de manera genérica, es decir que todos lo tendrían,
y contiene otros dos contenedores. El primero es el botón que hace la función de scroll y el
segundo se destinó al contenido del bloque. La explicación de porque esta estructura se encuentra
en el CSS. Se estableció la sección “holder” con un tamaño del 100% de alto y ancho, ocupando el
total del tamaño de la ventana del navegador. Además, se le desactivó la opción de scroll tanto
vertical como horizontal, todo elemento que contuviera y excediera el tamaño fijado no sería
visible para el usuario. Dentro de “holder”, el div “slides_holder”, tendría un 400% de alto y un
100% de ancho. Esto hace que únicamente se muestre una cuarta parte de este contenedor.
Dentro de “slides_holder”, los cuatro bloques de contenido, “table_holder”, se definieron con un
100% de alto. De este modo, ocuparían el total de “slides_holder”, pero únicamente podría verse
uno de ellos a la vez, puesto que cada uno representa una cuarta parte del bloque “holder”.
Mediante JQuery se realizó el paso de una diapositiva a otra, pero esto se explicará más adelante.
Para el contenido de cada bloque se estableció una estructura dependiendo de las necesidades de
cada uno. Por norma general se estableció un div, “cell_holder”, que podía dividirse tantas veces
como fuera necesario, pero manteniéndose siempre centrado, con un margin lateral auto. Dentro
de éste el contenido podía disponerse en una, dos o tres columnas. En el bloque “Sobre mi”
aunque la idea era trabajar con dos columnas, finalmente se trabajaron los elementos por
separado en una única columna relativa. El texto se mantendría con una posición estática, pero la
ilustración se definió con una posición absoluta. Esto quiere decir que su posición sería
independiente del resto de elementos dentro del contenedor, pudiendo superponerse y situarse
donde uno decida. En este caso se le añadió una propiedad z-index negativa, para que el resto de
elementos aparezcan siempre sobre ella. Para la galería de proyectos se mantiene la estructura de
interfaz, pero cambia el bloque de contenido. En el section “content”, después de header, aparece
el encabezado, “Proyectos”, en un div. Después, aparece un div que contiene un bloque vacio que
se llenará con el contenido de los proyectos al ser seleccionados, “visual”, y otro bloque que
contendría el filtrado de la galeria y la galería. La galería se compuso con una lista desodenada
mediante la etiqueta ul, con una id “listgalery”, y la sucesión de etiquetas li, con una clase
“element” y una id que representa a la disciplina que trata el proyecto, ilustración, diseño gráfico o
web. Cada etiqueta li contendría una imagen y una etiqueta article con la información previa del
proyecto, título y descripción, además del botón para ampliar información. Con CSS se estableció
el tamaño de las imágenes según los diseños realizados. También se desarrolló el efecto hover con
CSS, que se explicará en el apartado de interacción. Para que los colores se alternaran en la
galería, se trabajó con un selector de CSS3, elemento:nth(Xn+X). Este selector permite añadir
atributos a todos los elementos, hijos del elemento que lo contiene, y se encuentren en la posición
que se define. Por ejemplo element:nth-child(4n+1), añadiría el atributo a cada primer elemento
de cada cuatro que contenga el padre. El resto de la maquetación fue un proceso habitual que
carece de interés o puede resultar algo repetitivo. Para ver mejor la estructura que se estableció,
se adjuntaron a la carpeta del proyecto los archivos que componen la web.
5.2. MEDIA QUERIES Con el contenido ya maquetado, se establecieron tres puntos de ruptura: un
mínimo de 1025px de ancho de pantalla para escritorio y portátil, 1024x768 para tablets y
320x480 para smartphones. Se añadieron dos media queries más para las versiones de apaisadas
de los dispositivos móviles. Imagen 29. Explicación gráfica del CSS para la elaboración de los
bloques de contenido a modo de diapositivas. Diseño y desarrollo web. Juan Pedro Barba Soler 29
Como en el CSS se aplica el último valor definido, se estableció primero un diseño genérico, que no
chocara con ningún elemento que debiera ser adaptado. Después se programó los cambios
empezando por el diseño móvil, ascendiendo en el tamaño de pantalla. De este modo, en los casos
en que un valor se antepusiera a otro, mediante los media queries y el uso de !important, se
podría corregir el valor del atributo. Estos cambios se realizaron en un archivo css a parte, llamado
“[Link]”.
5.3. ANIMACIONES E INTERACCIÓN Todos los elementos gráficos de la interfaz se desarrollaron
únicamente con código, y los que no, se trabajaron mediante el formato SVG. Esta metodología
permitió hacer animaciones complejas con las propiedades de CSS3, animation, transform y
transition. Se animó el logotipo, la ilustración de inicio, el botón de srcroll entre las secciones y el
de scroll-up, las ilustraciones del bloque de “Proyectos”, el botón del menú de navegación, y la
galería de imágenes. El hover de las imágenes de la galería se logró con una transición CSS, al pasar
el ratón por encima se aplicaban los nuevos valores, haciendo aparecer progresivamente el bloque
con el título y demás. El hover tuvo que cambiarse en el último momento, al detectar que el
diseño que se había establecido entorpecía la experiencia de usuario, teniendo que apartar el
ratón de la imagen para poder ver la siguiente. Se implementó JQuery en algunos casos para
conseguir la interacción necesaria entre los elementos y el usuario. El caso más destacado es el
paso de una sección a otra en la página principal. Mediante JQuery se estableció que al situar el
ratón sobre la sección y realizar scroll, se le restaría o sumaría un 100% a la propiedad top. Por
otra parte, el botón que permitía realizar la misma función, se programó de manera que
únicamente restara 100% al valor de top, haciendo que el contenido “suba” y mostrando el
siguiente cuarto del bloque. 5.4. COMUNICACIÓN CON EL SERVIDOR Se recurrió a la programación
en PHP y AJAX en varias ocasiones a lo largo de la web. En el formulario de contacto fue necesario
el PHP para el envió de los datos al correo de contacto, y el AJAX para decirle al usuario que el
correo Imagen 30. Ejemplo de programación para el pase de una sección a otra mediante scroll.
Diseño y desarrollo web. Juan Pedro Barba Soler 30 ha sido enviado, cambiando el texto del botón
enviar por “enviado”. Para la galería de imágenes se desarrolló una base de datos con la
información necesaria de cada proyecto, y mediante PHP el navegador solicitaría al servidor las
imágenes para componer la galería. Por último, para ampliar la información de los proyectos se
incluyó una función con JavaScript y AJAX, que incrustaría un documento PHP con otra solicitud a
la base de datos, de manera que el contenido se cargara sin necesidad de recargar la página. 5.5.
SEO Y ANALYTICS Para la optimización del posicionamiento en los buscadores o SEO17, se
añadieron las etiquetas meta necesarias para regular la indexación por parte de los rastreadores
web. Por otra parte, se creó una cuenta en Google Analytics y se insertó el código necesario para
su reconocimiento. Con esta herramienta se podría estudiar el uso que le darían los usuarios y
extraer conclusiones

6. PUBLICACIÓN Y ANÁLISIS Tras una serie de pruebas y pequeños reajustes en el desarrollo de la

página, se procedió a su publicación y difusión en las redes sociales. El objetivo era atraer a
diferentes tipos de usuarios, estudiar su navegación por el sitio y recibir feedback sobre aspectos
del diseño y la experiencia de usuario. Los datos se tomaron a lo largo de la semana que se
difundió la web en las redes sociales. Los resultados mostraron un total de 87 sesiones, realizadas
realmente por 70 usuarios distintos. Esto quiere decir que algún usuario accedió a la web más de
una vez, siendo realmente un 80% de nuevas sesiones. Lo que más llama la atención es que
únicamente 47 sesiones accedieron a la página de proyectos, mientras que la página principal
tiene 116 visualizaciones. Por otro lado, la página de proyectos tiene una media de tiempo de
visualización mayor, de unos dos minutos, mientras que la página principal tiene una media de un
minuto y medio. De esto se deduce que, mientras algunos usuarios únicamente entraban por
curiosidad y cerraban tras ver la página principal, alrededor de 40 usuarios se dedicaron a navegar
por el contenido, volviendo incluso hacia atrás desde la página de proyectos. Por otro lado se
analizó el acceso desde los diferentes navegadores y dispositivos. La web se había desarrollado
con la intención de un correcto funcionamiento en todos los navegadores, pero se enfocó
principalmente a Google Chrome, Safari y Firefox. Los resultados permitieron asegurarse de que
los usuarios tomaban estos navegadores como la principal opción, estando Chrome en cabeza.
Imagen 31. Gráfica de Google Analitycs. Informe sobre sesiones de los usuarios. Imagen 32. Gráfica
de Google Analitycs. Informe sobre las páginas visitadas. Diseño y desarrollo web. Juan Pedro
Barba Soler 32 Imagen 33. Gráfica de Google Analitycs . Informe de los navegadores desde los que
se accedió a la web. Imagen 34. Gráfica de Google Analitycs . Informe de los sistemas operativos y
la re - solución de los usuarios con dispositivos móviles. Diseño y desarrollo web. Juan Pedro Barba
Soler 33 7. CONCLUSIONES Al concluir el proyecto se cumplió con el principal objetivo del trabajo,
diseñar y desarrollar un sitio web profesional, creativo y complejo. En cuanto al diseño, se logró
una experiencia de usuario óptima y sencilla, con un diseño acorde al estilo del creativo. El diseño
adaptativo dio algún problema pero se llevó a buen termino, a pesar de las limitaciones de los
navegadores y diferentes dispositivos. El desarrollo fue quizás la parte más complicada, teniendo
que realizar numerosas pruebas y cambios sobre la marcha. La mayor dificultad fue la de conseguir
que el contenido se adaptara correctamente en los diferentes tamaños, llegando a realizar
pequeños cambios en el diseño previo. El proyecto se vio limitado en esta parte también por la
disposición de un número reducido de dispositivos para realizar pruebas. Teniendo en cuenta los
datos del capítulo anterior, los resultados obtenidos son satisfactorios, ya que alrededor de un
60% de los usuarios accedieron a la totalidad del contenido, y por lo tanto gozaron de una buena
experiencia de usuario. Se logró un planteamiento cercano al de un equipo web, desarrollando
todas las fases de un proyecto web, intentando comunicar unas con otras. Gracias a seguir esta
metodología se afianzó un diseño eficiente y se redujo considerablemente el tiempo de desarrollo.
El problema de afrontar todas las fases del proyecto un mismo individuo fue la ceguera ante los
errores que ,para un equipo de varias personas, podrían haber sido evidentes. A pesar de haber
terminado el proyecto, la web continuará actualizándose y mejorándose. Hay ya cambios previstos
para la mejora de la experiencia de usuario, como es el cambio de la estructura a un diseño de una
sola página. El objetivo será hacer más evidente el acceso a la galería de proyectos y mejorar la
navegación dentro del sitio web.

BIBLIOGRAFÍA Libros NIELSEN, JAKOB; BUDIU, RALUCA. Usabilidad en dispositivos móviles. Madrid:
Ediciones Anaya Multimedia, 2013. TIDWELL, JENIFER. Designing Interfaces, Patterns for Effective
Interaction Design. Canada: O’Reilly Media, 2011. MUNARI, BRUNO. Diseño y comunicación visual.
Barcelona: Gustavo Gili, 1980. CLEMENTE, PEDRO. Diseño Web Adaptativo, responsive web design.
Madrid: Ediciones Anaya Multimedia, 2014. VEEN, JEFFREY. Arte y Ciencia del Diseño Web.
Madrid: Pearson Educación, 2001. SHNEIDERMAN, BEN; PLAISANT, CATHERINE; COHEN, MAXINE;
JACOBS, STEVEN. Designing the User Interface: Strategies for Effective HumanComputer
Interaction. Edinburgh: Pearson Education Limited, 2014. WROBLEWSKI, LUKE. Mobile First. New
York: A Book Apart, 2011. PARKER, TODD; TOLAND, PATTY; JEHL, SCOTT. Designing with
progressive engacement, building the web that works for everyone. United States of America:
New Riders(Pearson Education), 2010. GARRETT, JESSE JAMES. The Elements of User Experience,
second edition. United States of America: New Riders(Pearson Education), 2011. GUSTAFSON,
AARON. Adaptive Web Design, crafting rich experiences with progressive enhacement. United
States of America: Easy Readers, 2011. MARCOTTE, ETHAN. Responsive Web Design. New York: A
Book Apart, 2011. FIRDAUS, THORIQ. Responsive Web Design by Example. Birmingham, UK: Packt
Publishing, 2013. TIMOTHY, SAMARA. Diseñar con y sin retícula. Barcelona: Gustavo Gili, 2004-07.
UNGER, RUSS; CAROLYN, CHANDLER. A Project Guide to UX Design, second edition. United States
of America: New Riders(Pearson Education), 2012. Diseño y desarrollo web. Juan Pedro Barba
Soler 35 KRUG, STEVE. Don’t Make Me Think, second edition. United States of America: New
Riders(Pearson Education), 2006. Manuales ACERA, MIGUEL ÁNGEL. CSS3, Guía Práctica. Madrid:
Ediciones Anaya Multimedia, 2012. CHAPMAN, NIGEL; CHAPMAN, JENNY. Web Design: a complete
introduction. England: Wiley, 2006. KEITH, JEREMY. HTML5 For Web Designers. New York: A Book
Apart, 2010. CEDERHOLM, DAN. CSS3 For Web Designers. New York: A Book Apart, 2010. HAY,
STEPHEN. Responsive Design Workflow. United States of America: New Riders(Pearson Education),
2013. ZELDMAN, JEFFREY; MARCOTTE, ETHAN. Designing with Web Standards, third edition.
United States of America: New Riders(Pearson Education), 2009. WELLING, LUKE; THOMSON,
LAURA. Desarrollo web con PHP y MySQL. Madrid : Anaya Multimedia, 2003. MELLADO
DOMÍNGUEZ, JAVIER. Manual imprescindible de Ajax. Madrid : Anaya Multimedia, 2008. Tesis
LINARES SÁNCHEZ, VALENTÍN. Análisis de sistemas de navegación de sitios Web. Barcelona:
Universitat Oberta de Catalunya, 2004. Hassan Montero, YUSEF. Factores del Diseño Web
Orientado a la Satisfacción y No-Frustración de Uso. Granada: Universidad de Granada, 2006. Bolgs
ZELDMAN. New York [Consulta: 20-08-14]. Disponible en: A LIST APART. [Consulta: 20-08-14].
Disponible en: [Link]. Valencia [Consulta: 20-08-14]. Disponible en: Diseño y desarrollo
web. Juan Pedro Barba Soler 36 [Link]. [Consulta: 20-08-14]. Disponible en:
SMASHING MAGAZINE. [Consulta: 20-08-14]. Disponible en: COYIER, CHRIS. [Consulta: 20-08-14].
Disponible en: Artículos LUJÁN, SERGIO. ¿Qué es el desarrollo web?. [Consulta: 2014-09-10].
Disponible en: W3C. Mobile Web Best Practices 1.0. [Consulta: 2014-09-10]. Disponible en: WIUM
LIE, HAKON. Cascading HTML style sheets -- a proposal. [Consulta: 2014-09-10]. Disponible en:
CHAMPEON, STEVEN. Progressive Enhancement and the Future of Web Design. [Consulta: 2014-
09-10]. Disponible en: GUSTAFSON, AARON. Understanding Progressive Enhancement. [Consulta:
2014-09-10]. Disponible en: MARCOTTE, ETHAN. Responsive Web Design. [Consulta: 2014-09-10].
Disponible en: Webs [Link]. [Consulta: 20-08-14]. Disponible en: LIBROS WEB.
[Consulta: 20-08-14]. Disponible en: [Link]. Alicante. [Consulta: 20-08-14]. Disponible en:
Diseño y desarrollo web. Juan Pedro Barba Soler 37 [Link]. [Consulta: 20-08-14].
Disponible en: AWWWARDS [Consulta: 20-08-14]. Disponible en: BEHANCE [Consulta: 20-08-14].
Disponible en: DRIBBBLE. [Consulta: 20-08-14]. Disponible en: STUMBLEUPON. [Consulta: 20-08-
14]. Disponible en: WORLD WIDE WEB CONSORTIUM. [Consulta: 20-08-14]. Disponible en:
GOOGLE. Google Design Guidelines. [Consulta: 20-08-14]. Disponible en: GOOGLE. Google
Analytics. [Consulta: 20-08-14]. Disponible en: https:// [Link]/analytics/ >

[Link]

[Link]