DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO

N u r i a M e d i n a M e d i n a
M a r i a L u i s a R o d r í g u e z A l m e n d r o s
C o n v o c a t o r i a d e s e p t i e m b r e d e 2 0 1 8
M á s t e r e n T e c n o l o g í a y P r o c e s o s d e N e g o c i o
DISEÑO Y
DESARROLLO DE UN
SITIO WEB DINÁMICO
J U L I Á N F E R N Á N D E Z O R T I Z
TRABAJO FIN DE MÁSTER

Máster oficial en
Gestión y Tecnologías de Procesos de Negocio MGTPN
Universidad de Granada
Julián Fernández Ortiz, alumno del Máster e n G e s t i ó n y
T e c n o l o g í a s d e P r o c e s o s d e N e g o c i o de la Universidad de
Granada, autorizo la publicación de la siguiente copia de mi Trabajo Fin
de Máster en la Biblioteca del Centro y la web del Máster para que pueda ser
consultada por las personas que lo deseen.
Fdo: Julián Fernández Ortiz
Granada a 6 de septiembre de 2018.

Máster oficial en
Gestión y Tecnologías de Procesos de Negocio MGTPN
Universidad de Granada
Julián Fernández Ortiz, alumno del Máster e n G e s t i ó n y
T e c n o l o g í a s d e P r o c e s o s d e N e g o c i o de la Universidad de
Granada, declaro explícitamente que el trabajo presentado es
original, entendido en el sentido de que todas las fuentes
utilizadas se han citado debidamente respetando los derechos
de autoria.
Fdo: Julián Fernández Ortiz
Granada a 6 de septiembre de 2018.

ÍNDICE DE CONTENIDO
Índice de ilustraciones ...................................................................................................... 1
1 Introducción.............................................................................................................. 3
1.1 Resumen............................................................................................................. 3
1.2 Abstract.............................................................................................................. 3
1.3 Planteamiento..................................................................................................... 3
1.4 Objetivos............................................................................................................ 4
2 Marco conceptual ..................................................................................................... 5
2.1 Web en la sociedad de la información............................................................... 5
2.1.1 Web 2.0....................................................................................................... 5
2.1.2 Web corporativa (soporte de negocio)........................................................ 7
2.2 Diseño Web........................................................................................................ 7
2.2.1 Guías de estilo ............................................................................................ 8
2.2.2 Accesibilidad web..................................................................................... 13
2.2.3 Usabilidad web ......................................................................................... 17
2.3 Web dinámica .................................................................................................. 21
Definición ........................................................................................................ 21
2.3.1 ........................................................................................................................ 21
2.3.2 Tecnologías............................................................................................... 22
2.4 Diseño web centrado en el usuario .................................................................. 24
2.4.1 Definición................................................................................................. 24
2.4.2 Adaptación al usuario............................................................................... 25
3 Caso práctico: Web dinámica para JIFFI: III Jornadas – I Congreso Nacional ..... 32
3.1 III JORNADAS – I Congreso Nacional .......................................................... 32
3.1.1 Elementos conceptuales y diseño ............................................................. 32
3.1.2 Funcionalidad ........................................................................................... 33
3.1.3 Situación de partida de la aplicación ........................................................ 34
3.2 Estudio de aplicaciones similares .................................................................... 34
3.2.1 Congreso Nacional Semergen .................................................................. 35
3.2.2 Congreso Internacional AELFA-IF.......................................................... 36
3.3 Desarrollo de aplicación .................................................................................. 37
3.3.1 Elecciones tecnológicas............................................................................ 37
3.3.2 Metodología de desarrollo (Metodología Ágil)........................................ 38
3.3.3 Análisis de requisitos (de nuestra aplicación) .......................................... 39

Diseño y desarrollo de un sitio web dinámico Julián Fernández Ortiz
Máster en Gestión y Tecnologías de Procesos de Negocio Página 1 de 68
3.3.4 Diseño de la aplicación............................................................................. 41
3.4 Aspecto y funcionalidad del sitio web dinámico creado ................................. 46
3.4.1 Home ........................................................................................................ 46
3.4.2 Inscripciones............................................................................................. 47
3.4.3 Páginas de información ............................................................................ 47
3.4.4 Actualidad................................................................................................. 48
3.4.5 FAQ .......................................................................................................... 49
3.4.6 Contacto.................................................................................................... 50
3.4.7 Área personal............................................................................................ 51
3.5 Estudio de accesibilidad y usabilidad .............................................................. 55
3.5.1 Test de accesibilidad................................................................................. 55
4 Conclusión y trabajo futuro.................................................................................... 59
5 Bibliografía y webgrafía......................................................................................... 64
6 ANEXOS................................................................................................................ 67
6.1 ANEXO I: Test de usabilidad heurístico basado en la metodología Sirius..... 67
6.2 ANEXO II: Test de usuario ............................................................................. 67
ÍNDICE DE ILUSTRACIONES
Ilustración 1:Definición del estilo gráfico de Yelp. Botones. Imagen extraída de la web
oficial de Yelp. ............................................................................................................... 10
Ilustración 2: Definición de estilo gráfico del uso del logotipo. Mozilla. Imagen extraída
de la web oficial de Mozilla. .......................................................................................... 12
Ilustración 3: Dimensiones de la usabilidad. Estándar ISO 9241-11 ............................. 18
Ilustración 4: Funcionamiento PHP. Extraída de: ramonmillan.com............................. 23
Ilustración 5: Funcionamiento JovaScript. Imagen extraída de devjoker.com............... 24
Ilustración 6: Ciclo de actividades de la ISO 13407 [13]............................................... 26
Ilustración 7: Definición de un Sistema Hipermedia [10].............................................. 27
Ilustración 8: Categorías taxonómicas del modelo propuesto [10] ................................ 28
Ilustración 9: Modelo de usuario realizado con JSEM-HP [10].................................... 30
Ilustración 10: Métodos de adaptación, tanto en navegación como presentación [10].. 30
Ilustración 11: Ejemplos de técnicas de adaptación al usuario [10]............................... 32
Ilustración 12: Modelo Conceptual JIFFI....................................................................... 33
Ilustración 13: Panorámica de la antigua web de las JIFFI............................................ 34
Ilustración 14: Sitio web congreso SEMERGEN........................................................... 35
Ilustración 15: Sitio web del congreso AELFA-IF......................................................... 36
Ilustración 16: Esquema de la metodología 'Agile'. Extraía de http://designsoftcr.com 39
Ilustración 17: Diseño arquitectónico de nuestra aplicación. Extraída de wikipedia.org41
Ilustración 18: Diseño hipermedia de la aplicación web de las JIFFI............................ 42
Ilustración 19: Menú de la página web........................................................................... 43

Ilustración 20: Cabecera del sitio web............................................................................ 43
Ilustración 21: Pie de página del sitio web..................................................................... 43
Ilustración 22: Vista del usuario "Ponente UGR" en el acceso identificado.................. 45
Ilustración 23: Home ...................................................................................................... 46
Ilustración 24: Pie de página .......................................................................................... 46
Ilustración 25: Página inscripciones............................................................................... 47
Ilustración 26: Página cómo llegar ................................................................................. 48
Ilustración 27: Página actualidad.................................................................................... 49
Ilustración 28: Página FAQ............................................................................................ 50
Ilustración 29: Página contacto....................................................................................... 51
Ilustración 30: Página Área Personal.............................................................................. 52
Ilustración 31: Vista Ponente no UGR ........................................................................... 54
Ilustración 32: Vista Ponente Mesa Redonda................................................................. 55
Ilustración 33: Primer resultado del test de usabilidad................................................... 56
Ilustración 34: Div flotando con el último post.............................................................. 57
Ilustración 35: Fórmula del cálculo de la usabilidad web del test heurístico basado en la
metodología Sirius.......................................................................................................... 58

1 INTRODUCCIÓN
1.1 RESUMEN
Este proyecto es de naturaleza eminentemente práctica y nace de la necesidad de un grupo
universitario (Consejo de Representantes de Doctorandos de la UGR) por dotar a su
proyecto de celebración de un congreso nacional de una web. Dicho congreso, llamado
III Jornadas/I Congreso Nacional de Investigadores en Formación Fomentando la
Interdisciplinariedad, se celebra desde hace tres años, pero este será el primero en el que
se realizará a nivel nacional. El objetivo de éste es unir lazos, crear vínculos y tender
puentes entre investigadores de distintas disciplinas, para hacer frente a los retos ante los
que la sociedad nos enfrenta cada día. Se desarrollará en dependencias universitarias y
tendrá lugar del 20 al 22 de junio de 2018, jornadas en las que se celebrarán actividades
divulgativas, exposiciones orales, mesas redondas y exposiciones en cartel entre otros
eventos. Este hecho, acompañado de la voluntad de optimizar los recursos, han llevado a
la organización a la toma de la siguiente decisión: realizar un sitio web adaptativo y
completo. Es aquí donde nuestra función, y formación, juega un papel clave. A través de
los conocimientos adquiridos en las asignaturas del Máster - Comunicación, Innovación
y Comportamiento del Consumidor, Diseño Centrado en el Usuario, Estructuración y
Acceso a la Información en la Web y Gestión de Contenidos y Diseño Digital y Publicidad
– y la revisión de una breve webgrafía y bibliografía, nos dispondremos a realizar una
aplicación web teniendo en cuenta todos los factores necesarios (que serán descritos en
esta memoria) para un óptimo desarrollo.
1.2 ABSTRACT
This project has mainly a practical aim and is born because of the necessity of an
university group (UGR doctoral students representatives Council) to give their project a
national congress. That conference, named “III Conference/I encouraging multi-
disciplinarism trainee researchers National Congress”, has been carried out for three years
already, but it is national for first time. Its objective is to create ties with researchers from
various fields in order to be able to face every day society challenges. It will be performed
in the university from June 20th to 22th of 2018, in which informative activities will be
implemented as well as lectures, debates, and poster exhibitions among others. Thus,
related also with willingness to save resources, we decided to create an adaptive and
complete website. For this reason our function is crucial. Through acquired knowledge
after studying some Master subjects (Communication, Consumer behavior and
Innovation, User centered design, Structure and access to web information, Content
management, and Digital design and advertisement) and have reviewed some webgraphy
and bibliography, we are determined to create an App having in mind every aspect (which
will be described within this report) for its proper development.
1.3 PLANTEAMIENTO
Para la conformación del nuevo sitio web tenemos como referencia el anteriormente
creado (http://jornadas.ugr.es/jiffi/) del que planteaban mejorar la adaptabilidad,
usabilidad y poder transformarla en una web dinámica, corporativa y actualizada. Por

tanto, lo primero que haremos será definir los requisitos necesarios para el desarrollo del
nuevo sitio web, y lo haremos a través de la optimización de la antigua web. Más adelante
propondremos modelos de navegabilidad y realizaremos un primer diseño que iremos
adaptando totalmente a las necesidades del cliente a través de la metodología ágil. Una
vez finalizado el diseño del sitio comprobaremos que el sitio es “adaptable” y “usable” y
realizaremos el último test con el usuario final para publicar la web definitiva.
1.4 OBJETIVOS
El objetivo principal del proyecto es dotar al I Congreso/III Jornadas JIFFI de un sitio
web adaptativo, completo y funcional para poder desempeñar toda su actividad de forma
óptima.
Los objetivos que se persiguen en este proyecto pueden ser diferenciados en dos campos:
• Objetivos de desarrollo de competencias del alumno:
o Habilidad para integrar información procedente de fuentes diversas para
derivar tendencias relativas al cambio tecnológico y a su impacto
económico y social.
o Iniciativa y espíritu emprendedor.
o Capacidad para innovar y generar nuevas ideas.
o Capacidad de organización y planificación, así como capacidad de gestión
de la información.
o Habilidad para utilizar mecanismos de representación del conocimiento y
sistemas de gestión de contenidos web.
o Competencias multidisciplinares: capacidad de asimilación y
comunicación de conocimientos de otras disciplinas.
o Analizar la importancia de realizar un diseño centrado en el usuario, y
conocer los conceptos fundamentales para su aplicación.
o Comprender los conceptos de usabilidad y accesibilidad, y ser capaces de
aplicar técnicas de evaluación que en base a éstos y otros aspectos midan
la calidad de las interfaces de usuario de un sistema.
o Conocer mecanismos para rediseñar interfaces de usuario con pobre
accesibilidad y/o usabilidad.
o Diseñar modelos de usuario adecuados y en base a éstos idear interfaces
de usuario adaptables en su contenido, presentación e interacción.
o Capacidad para tomar decisiones basadas en criterios objetivos (datos
experimentales, científicos o de simulación disponibles) así como
capacidad de argumentar y justificar lógicamente dichas decisiones,
sabiendo aceptar otros puntos de vista.
o Crear contenidos adaptados a distintos medios digitales.
o Manejar aplicaciones de diseño y publicación de contenidos publicitarios
en Internet y medios digitales.
o Utilizar los elementos conceptuales básicos de diseño y publicidad en la
red de forma efectiva.
o Utilizar conceptos teóricos de percepción aplicados al diseño digital.

o Discernir y elegir de entre las distintas soluciones disponibles la mejor
solución para la publicidad de su empresa en un entorno digital y no
digital.
o Capacidad de comunicación en lengua extranjera, particularmente en
ingĺés.
• Objetivos del trabajo a realizar:
o Análisis de los aspectos a tener en cuenta durante el diseño web, en
general, y de una web dinámica, en particular.
o Análisis de los requerimientos que la nueva web debe satisfacer.
o Diseño de la aplicación web para encontrar dichos requerimientos.
o Diseño de la adaptación al usuario para mejorar la experiencia de éstos.
o Creación de una aplicación web dinámica adaptada al usuario.
o Creación de una interfaz gráfica amigable basada en los conceptos de
usabilidad y accesibilidad web.
2 MARCO CONCEPTUAL
2.1 WEB EN LA SOCIEDAD DE LA INFORMACIÓN
Definir el marco en el que se desarrolla el proyecto es el primer paso para conocer qué
hemos de hacer. En nuestro caso, trataremos de definir qué es una web corporativa,
además de situarla en el entorno web actual.
Una definición simple y fácil de entender sería: llamamos web corporativa a una web
diseñada especialmente para representar a una empresa, negocio o marca en internet [1].
Ahora bien, este tipo de información puede ser de diferentes naturaleza y tener muy
diversos objetivos. Por ello, lo que haremos a continuación es contextualizar la web en la
sociedad en la que vivimos y finalmente definiremos el tipo de web corporativa que nos
disponemos a realizar, para aclarar el fin de ésta.
2.1.1 Web 2.0
Para poder enmarcar la web 2.0 dentro de la denominada sociedad de la información, en
primer lugar, definiremos ésta. Cabe reseñar en primer término que la web 2.0 es una
evolución de la primera web o web 1.0, la cual no permitía la interacción con el usuario
y se limitaba a mostrar la información en páginas de HTML.
Como pequeña reseña histórica, podemos destacar que el término sociedad de la
información nació en la década de los sesenta promovido por el cambio socioeconómico
motivado por el auge de las TIC. El empoderamiento de la tecnología de la información,
acompañado de la privatización de la industria de las telecomunicaciones llevó a un
cambio empresarial muy marcado en esta década. Lo que hasta entonces había sido
cuestión de eruditos, podía confiarse al grueso de la sociedad: la información era cada
vez más accesible y sobre todo, no solo tenía una fuente. Por destacar tal vez el hecho
histórico más reseñable de la historia de internet y de la comunicación, es en esta década
cuando nace el e-mail de la mano de Ray Tomlinson.
En este entorno y época fue Yoneji Masuda [2] (sociólogo y profesor) quien dio la primera
definición oficial del término Sociedad de la Información: “Sociedad que crece y se

desarrolla alrededor de la información y aporta un florecimiento general de la
creatividad intelectual humana, en lugar de un aumento del consumo natural” [3], en su
obra “La sociedad informatizada como sociedad Post-Industrial". En esta misma obra, el
japonés, toma buena cuenta de la realidad cambiante y visiona un futuro inmediato: “los
puestos de trabajo asociados a la manipulación de la información son más numerosos
que aquellos físicos, y este crecimiento será exponencial en un futuro inmediato” [3].
Parece bastante lógico y obvio, deducir que el término web y el término internet está
estrechamente ligado al descrito por Yoneji. De hecho, fue muy poco después de la
publicación de la obra anteriormente mencionada, y en la misma década, cuando surge la
red denominada Internet. El gran objetivo de esta red no era otro que dotar de un medio
canalizador de toda la información a crear y a ‘consumir’. Originalmente esta red
primigenia (ARPANET) conectaba tres universidades norteamericanas en pos de poder
intercambiar conocimientos afines. Fue creada por el Departamento de Defensa de EEUU
y se creó en la Universidad de California en Los Ángeles (UCLA) [4].
Tras la creación de la ARPANET, y tras unas décadas en las que se construyó y
confeccionaron otras redes como NSFnet -dedicada a la comunicación intrauniversitaria-
nació la denominada Web 2.0. Ésta no es más que la evolución natural de la denominada
Internet al enfoque sobre el usuario final. Por tanto, se puede afirmar, que no es un cambio
tecnológico el que se produce, si no más bien un cambio en el paradigma de la
comunicación. Lo que anteriormente fue una comunicación unidireccional y de búsqueda,
se convierte en una creación de valor compartida, llevando implícito la creación de una
comunidad.
No se define un periodo exacto de la creación de la web 2.0. ya fue una transición en el
modo de crear contenido y compartirlo, más que un punto de inflexión en lo técnico o
tecnológico. Las plataformas de redes sociales, los blogs, las “wikis” o los chats son
algunos de los máximos exponentes de la transformación a este tipo de web.
Si hablamos de web es de obligada responsabilidad mencionar a Tim Berners-Lee, el
considerado padre de la Web. Nacido en Reino Unido el 8 de junio de 1955 fue el
encargado de establecer la primera comunicación entre cliente y servidor a través del
protocolo HTTP en noviembre del 1989. Esta idea nació de la necesidad de su grupo de
investigación por intercambiar información de forma segura, rápida y ubicua. A partir de
esta necesidad, su grupo creó el lenguaje que regiría la web hasta los tiempos actuales:
HMTL (HyperText Markup Language) o lenguaje de marcaturas o hipertexto, o el
protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos
en la red URL (Uniform Resource Locator). Más adelante, en Octubre del 1994 se
convirtió en el fundador de la World Wide Web (W3C), organización encargada de
estandarizar y regir el desarrollo de las tecnologías asociadas a la web.
Tim O'Reilly (6 de Junio de 1954, Cark, Irlanda) es tal vez el autor más reconocido como
precursor del término Web 2.0. Con la definición de los “7 principios de la Web 2.0” [5],
en los que define los básico del nuevo arquetipo de comunicación online. Dichos
principios son:
1. La World Wide Web como plataforma.
2. Aprovechar la inteligencia colectiva .

3. La gestión de la base de datos como competencia básica.
4. El fin del ciclo de las actualizaciones de versiones del software.
5. Modelos de programación ligera. Búsqueda de la cimplicidad.
6. El software no limitado a un solo dispositivo.
7. Experiencias enriquecedoras del usuario.
Lo que ha conseguido este nuevo tipo de comunicación es encontrar una línea de
convergencia entre la sociedad de la información y la sociedad del conocimiento,
construyendo una plataforma ubicua de intercambio y conocimiento que se autoabastece
y se autorregula.
2.1.2 Web corporativa (soporte de negocio)
Una vez definido la web como la entendemos hoy día y repasado el periplo de su creación,
en esta apartado indagaremos en el tema que nos concierne en nuestro proyecto, la web
corporativa. Lo primero que hemos de hacer, es buscar una definición de web corporativa
adaptada a nuestro caso. Es cierto que nuestra web será corporativa en lo que a imagen se
refiere, pero no en lo que ha modelo de negocio concierne. Al ser un congreso de un
estamento público el fin lucrativo no es el fin último, si no más bien la difusión del
conocimiento y la puesta en común de la agentes participantes.
Ya que no existe una definición oficial ni en el diccionario ni los manuales de marketing
o comunicación de la web corporativa, se define esta por sus características principales
[15].
• Es propiedad de una entidad (persona jurídica) pública o privada.
• Es el sitio de presentación principal de dicha entidad.
• Es uno de los principales canales de comunicación con los clientes o usuarios.
• Es uno de los canales de venta o captación más importantes de la última década.
• Ha de ser un reflejo de la identidad corporativa, los valores y la misión de la
entidad.
Además, toda página web debe contener la siguiente información [15]
• Presentación: Definido cómo ¿Quiénes somos?
• Definición de la entidad
• Oferta, tarifas o método de adhesión.
• Contacto
En nuestro caso, la única particularidad que se ha de reseñar es la marcada anteriormente:
el modelo de negocio en nuestro caso no es lucrativo sino participativo. Al ser un
congreso de la Universidad de Granada, la intención del organismo es la difusión del
conocimiento y el otorgamiento de un espacio para el crecimiento profesional e
intercambio de los usuarios.
2.2 DISEÑO WEB
Una vez definida la web 2.0 como parte de la sociedad de la información en este apartado
se tratarán todas las técnicas de diseño e implementación web que utilizaremos para el

desarrollo de la web de JIFFI. Accesibilidad, usabilidad y web dinámica son los términos
clave a definir y englobar en este espacio.
2.2.1 Guías de estilo
Las guías de estilo o también llamadas libros de estilo tienen como objetivo, en el ámbito
del marketing digital y el diseño web, establecer las líneas y protocolos para obtener un
diseño uniforme de páginas web del mismo sitio. La guía de estilo está totalmente
relacionada con el diseño corporativo y con la necesidad de dotar de una identidad visual
digital a la empresa u organización. Por tanto, con una buena construcción de la guía
conseguimos dotar de unidad y coherencia a todos los niveles digitales comunicativos de
la organización. En última instancia lo que persigue este libro de estilo es poder dotar de
directrices generales de representación visual y textual a la organización [6].
Este documento recogerá la definición de asuntos tan importantes de la comunicación
como: tipografía de letra, color, tamaños, logo, iso o imagotipo, rótulo empresarial, tono
de texto y conversación, diseño de imagen, etc. Si se define de forma correcta el libro de
estilo, además, se consigue que, aunque haya varios diseñadores implicados en la
confección del sitio web, la página web tenga un aspecto uniforme.
La importancia de esta guía es total para una empresa u organización que desee conformar
una identidad corporativa entorno a su marca. Y esto, como apoyan estudios de refutado
reconocimiento (como los realizados por la Universidad Cantabria o N. Nguyen y G.
Leblanc para Journal of retailing and Consumer Services, 2001 – Elsevier) es una de los
factores que más determinan la voluntad de aceptación del usuario. En otro orden de
prioridades, el tener una identidad visual completa y coherente confiere una seriedad y
profesionalidad necesaria para poder establecer acuerdos de colaboración, patrocinio o
sponsorización con otras marcas o entidades que tengan definido su manual de identidad
corporativa.
En la práctica la definición de esta guía se realiza entre expertos de marketing, diseño,
comunicación y el cliente. Para facilitar el proceso se suele plantear una serie de
cuestiones que se han de responder de forma consecuente y teniendo presente que las
respuestas no entren en conflicto. Estas preguntas pueden ser tan simples como [6]:
• ¿Cómo quiere que le vean?
• ¿Cuáles son los sentimientos y valores que quiere despertar?
• ¿Cómo habla a la gente?
• ¿Qué siente usted con su marca?
• ¿Quién es su público objetivo?
Con estas simples preguntas se puede saber, por ejemplo, si es pertinente hablar de usted
o no en la web, si utilizar exclamaciones o colores estridentes en los botones o si hemos
de separar la información por bloques horizontales, verticales o separados en páginas.
Una vez definidas las respuestas a estas preguntas con el cliente se definen todos los entes
que se han de tener en cuenta en el diseño, que suelen ser los mencionados anteriormente
en este mismo apartado.
La estructura que suele tener este documento es la que se recoge en la siguiente tabla [6]
y es una ampliación de las preguntas anteriormente mencionadas.

Áreas de la guía de estilo Preguntas más importantes
Principios de diseño básicos
¿Por qué se caracteriza la empresa? ¿Cuáles son
los objetivos de la página web? ¿Cuáles son los
principios de diseño propios de la filosofía de la
empresa?
Público objetivo/Buyer personas
¿A quién debe ir dirigida la página? ¿Cómo
puede delimitar el público objetivo? ¿Cuáles
son sus preferencias, deseos e intereses?
Tono y terminología
¿Cómo se tiene que tratar a los clientes, lectores
o visitantes? ¿Qué términos son tabú o no deben
usarse?
Logo y marca denominativa
¿Qué apariencia tienen el logo y la marca
denominativa? ¿Cuándo, cómo y dónde se
deben/tienen que utilizar?
Estructura básica de la página web
¿Cómo se tiene que estructurar la página web?
¿Qué anchura tienen las columnas y qué altura
tienen las filas? ¿Cómo se tienen que organizar
los elementos? ¿Qué estructura de menú tiene
que ofrecerse?
Colores
¿Qué colores realzan la intención de la página
web y se dirigen al público objetivo? ¿Cómo se
pueden integrar los valores RGB y los códigos
hexadecimales?
Tipo de letra
¿Qué tipo de letra tiene que utilizarse para qué
tipo de textos y elementos? ¿Cuál es el tamaño
que tiene que tener la letra y de qué color tiene
que ser?
Iconos
¿Qué iconos deben utilizarse? ¿Dónde se tienen
que insertar y qué significan?
Contenido
¿Qué contenido debe integrarse en la página
web? ¿Cómo tiene que plasmarse de manera
gráfica, textual o multimedia?
Algunos ejemplos de guías de estilo que estén publicadas pueden ser las de Yelp y
Mozilla.

Estos dos ejemplos son grandes muestras de una guía completa y compacta. Se pueden
observar y estudiar todos los detalles que se han de aportar a diseñador y programador
corporativo. Además, se han hecho públicas con la intención de mostrar la coherencia del
sitio y evidenciar el trabajo realizado para una compacta imagen: a nivel corporativo este
hecho muestra un mensaje de transparencia, fiabilidad y profesionalidad que puede ser
muy interesante para clientes y colaboradores.
Dos ejemplos muy claros de un trabajado libro de estilo son:
Ilustración 1:Definición del estilo gráfico de Yelp. Botones. Imagen extraída de la web oficial de Yelp.
Yelp ha definido su estilo gráfico y de diseño en los botones en todas sus características:
tipografía, color, tamaño, posición y vínculo con sus redes sociales. Esto hace que se
utilice donde se utilice este botón (sea en su web, otra externa, redes sociales o material
escrito) el usuario final, por coherencia visual, sepa que esa creación es de Yelp. Esto es
útil por dos motivos: la identificación de la marca es inmediata por memoria visual y
además el mensaje es coherente.

Ilustración 2: Definición de estilo gráfico del uso del logotipo. Mozilla. Imagen extraída de la web oficial de Mozilla.
De vital importancia para una marca, y más aún para una organización, es que su logo,
imago o isotipo se utilice de forma homogénea. Siempre que veamos el logotipo de
Mozilla lo veremos en una de estas tres modalidades gráficas. Definir los límites de uso
en geometría, tamaño, contraste, color y forma hace que el reconocimiento de la marca,
como se decía anteriormente, sea inmediato y se retenga en la memoria visual de una

forma mucho más clara. Además, en este caso Mozilla añade el enlace de descarga para
que todos los colaboradores que tengan, o personas externas a su organización que
quieran hablar de ellos, utilicen la imagen oficial de la marca.
Por último, se ha de comentar que, al ser un congreso de la Universidad de Granada, para
el desarrollo, la implementación y la concepción del sitio web se ha tenido en cuenta todo
lo referido en la ‘Guía de Estilos Webs en el BOUGR’. En este documento se detallan las
líneas de edición, diseño y estructura de las webs de la Universidad de Granada para
otorgar a todas de una coherencia corporativa y semántica.
2.2.2 Accesibilidad web
El término accesibilidad web hace referencia a la posibilidad que las metodologías de
diseño web ofrecen a todas las personas para poder usar un sitio web. De una forma más
práctica, la accesibilidad web permite a las personas con alguna discapacidad percibir,
comprender, navegar e interactuar con la web. De la misma forma, la accesibilidad
permite a otros colectivos con dificultades en la habilidad cognitiva, como las personas
mayores, tener un acceso fluido y completo de todo el entorno web [7].
Los colectivos con discapacidad mencionados anteriormente pueden ser de muy diversos
tipos; personas con deficiencias visuales, auditivas, físicas, cognitivas, neurológicos o del
habla. La comunidad internacional W3C (World Wide Web) [16] recoge en dos
documentos tanto las diferentes discapacidades a tener en cuenta como los diferentes
escenarios de estas personas usando la web. Ambos documentos que se pueden consultar
aquí han sido tenidos en cuenta para la concepción de nuestro sitio web [29]. En dichos
documentos se tienen en cuanto los diferentes tipos de discapacidades recogidos en seis
grandes grupos:
• Diversidad o habilidad
• Audición
• Cognitivo, aprendizaje o neurológico
• Físico
• De discurso o habla
• Visual
Para cada una de estas discapacidades, la W3C define las diferentes tipologías y propone
un método de tratamiento y adaptación del sitio web para estar personas. Por ilustrarlo
algo más, se pondrá el ejemplo de las discapacidades de discurso o habla, de las que se
definen:
• Apraxia (AOS)
• Tachyphemia
• Dysarthria
• Problemas de desorden en el habla
• Tartamudeo
• Mudez
Dentro de cada una de las discapacidades o problemas de accesibilidad al contenido, se
muestran ejemplos de problemas específicos y soluciones de los mismos. En el caso que
nos ocupa, se evidencian estos dos problemas y estas dos soluciones:

• No se puede acceder a servicios web que incluyan aplicaciones de interacción
mediante la voz. Este problema puede solucionarse incluyendo un segmento
guiado en el que se explique textualmente al usuario que en ese caso deberá
introducir los comandos de forma escrita o manual.
• Estos usuarios no podrán ponerse en contacto del cliente web si este solo facilita
la vía telefónica. La solución es ofrecer y permitir otro tipo de vías de
comunicación, como son la escrita y la presencial.
En la actualidad, la mayoría de los sitios web y aplicaciones web creadas no permiten a
estos colectivos el uso completo de las mismas. Este hecho es el que precisamente
intentamos evitar con la accesibilidad web; en primer lugar, que nuestra web sea usable
y amigable con estos colectivos y en segundo lugar, servir de buen ejemplo para futuras
concepciones de web en el entorno en el que nos encontramos [30].
A su vez, cabe puntualizar, que la accesibilidad web no solo beneficia a los grupos con
alguna discapacidad. El principio básico en el que se basa la accesibilidad es la
flexibilidad, con el único objetivo de adaptarse y satisfacer las diferentes necesidades de
los usuarios. Este principio, ayudará a cualquier tipo de persona que acceda a una web y
que, sin tener ninguna discapacidad, tenga alguna dificultad como puede ser una conexión
lenta, un dedo roto o la simple imposibilidad de sostener el smartphone por cualquier
circunstancia. En otro de los documentos publicados por la W3C se definen los diferentes
beneficios de la accesibilidad para el usuario final, incluido el beneficio empresarial [25]:
• Beneficios sociales: Ya que permite y promueve el acceso a la información ubicua
de todo tipo de personas y en cualquier situación. Desde discapacitados a personas
con dificultades cognitivas, pasando por cualquier persona que en alguna
situación puntual vea reducidas sus capacidades.
• Beneficios técnicos: Estos abordan la interoperabilidad y la calidad del software,
además de referirse a la reducción del mantenimiento de las páginas webs. Del
mismo modo, reducen el tiempo de carga en el servidor y hacen que las webs estén
preparadas para el futuro de la web.
• Beneficios empresariales: Sobre todo están referidos al SEO del sitio web. El
cumplimiento de todos los estándares de usabilidad hace que el sitio vea
optimizado su SEO y por tanto aporte más beneficios y reduzca los costes de
mantenimiento.
• Beneficios legales: Se comentan más adelante, pero hacen referencia a la
obligación de las organizaciones para con la normativa vigente sobre usabilidad
web.
La accesibilidad no es solo un factor tecnológico que haga una web más profesional o
útil, si no que es un factor que proporciona a la sociedad una equidad al acceso a la
información y una igualdad de oportunidades en el entorno web. Por poner un simple
ejemplo, una página web de un concurso público de empleo debe ser accesible porque si
no, daría oportunidades dispares al conjunto de la sociedad. En el caso de estamentos
públicos y empresas con cierto número de empleados ya existen leyes que regulan estos
hechos.
Para que la adaptación a la accesibilidad de un portal web sea homogéneo para todas las
webs, y para tener unan guía de uso, la W3C definió unas pautas a seguir por todos los

desarrolladores webs. Estas pautas (WCAG 2.0, segunda versión de unas lanzadas en
1999), se aceptaron en 2008 como recomendación oficial de accesibilidad web. Se
agrupan en cuatro principios y se definen tres prioridades. El sitio ha de ser [8]:
• Perceptible: La información y los componentes de la interfaz de usuario deben ser
presentados a los usuarios de modo que ellos puedan percibirlos
o Pauta 1.1: Alternativas textuales a todo el contenido no textual.
o Pauta 1.2: Proporcionar alternativas para los medios tempodependientes.
o Pauta 1.3: Crear contenido adaptable que pueda presentarse de diferentes
formas sin perder información o estructura.
o Pauta 1.4: Crear contenido distinguible, incluyendo separación entre el
primer plano y el fondo.
• Operable: Los componentes de la interfaz de usuario y la navegación deben ser
operables.
o Pauta 2.1: Proporcionar acceso a toda la funcionalidad mediante el teclado
o Pauta 2.2: Proporcionar a los usuarios el tiempo suficiente para leer y usar
el contenido
o Pauta 2.3: No diseñar contenido de un modo que se sepa podría provocar
ataques, espasmos o convulsiones.
o Pauta 2.4: Proporcionar medios para ayudar a los usuarios a navegar,
encontrar contenido y determinar dónde se encuentran.
• Comprensible: La información y el manejo de la interfaz de usuario deben ser
comprensibles.
o Pauta 3.1: Los contenidos textuales resultan legibles y comprensibles.
o Pauta 3.2: Hacer que las páginas web aparezcan y operen de manera
predecible.
o Pauta 3.3: Entrada de datos asistida.
• Robusto: El contenido debe ser suficientemente robusto como para ser
interpretado de forma fiable por una amplia variedad de aplicaciones de usuario.
o Pauta 4.1: Maximizar la compatibilidad con las aplicaciones de usuario
actuales y futuras.
A su vez, y como se ha comentado anteriormente, se definieron niveles de prioridad a
alcanzar por las organizaciones que deseen y deban hacer accesibles sus sitios webs. Esta
prioridad indica el impacto que tiene cada criterio de conformidad y son:
• Prioridad A. Tiene que satisfacerse el criterio, sino uno o más grupos de usuarios
encontrarán imposible acceder a la información (Ejemplo: CC 2.4.2: Las páginas
web tienen títulos que describen su temática o propósito).
• Prioridad AA. Debe satisfacerse el criterio, de otra forma, uno o más grupos
encontrarán dificultades en el acceso a la información (Ejemplo: CC 2.4.6: Los
encabezados y etiquetas describen el tema o propósito).
• Prioridad AAA. Puede satisfacerse el criterio, en caso contrario uno o más grupos
de usuarios encontrarán alguna dificultad para acceder a la información (Ejemplo:
CC 2.4.8: Se proporciona información acerca de la ubicación de un usuario dentro
de un conjunto de páginas web).

En cuanto a importancia y relevancia para una organización o empresa, hay multitud de
estudios que hablan de la importancia de tener un sitio web accesible para ganar visitas,
ventas e incluso mejora de imagen de marca. Uno de ellos, centrado en las PYMES, es el
realizado por Lic. María García García y Dra. Ana Castillo Díaz para la Revista Latina
de Comunicación Social y que se puede ver completo aquí [17]. En él extraen las
siguientes conclusiones sobre la accesibilidad web y la web corporativa:
• La arquitectura de la información de las páginas, su distribución la colocación
debe ser coherente, es decir, que facilite la comprensión del orden y este destinada
al usuario final. Al disponer las PYMEs de pocos recursos, generalmente los
utilizan a la transmisión del mensaje directo sin permitir al usuario que investigue
el sitio web. Se podría decir que este diseño simplista favorece la usabilidad del
portal por el usuario final.
• Los principales puntos débiles en las webs de las PYMEs están relacionados con
la dificultad del usuario para encontrar lo que realmente iban buscando. La falta
de guía en la navegabilidad hace que el usuario no pueda llegar a realizar la tarea
que deseaba al llegar al sitio, esto no debería ser obviado. Los fines de cada
usuario pueden ser muy dispares y diferentes, por esto mismo es de vital
importancia que se proponga un apartado de ayuda a la navegación, para evitar la
sensación de frustración.
• La accesibilidad web, que es un básico de la usabilidad, aún está muy poco
desarrollado en el entorno de la pequeña y mediana empresa. Los principios
básicos muchas veces son cumplidos, pero en otras muchas veces los obligados
por ley no son tenidos en cuenta. Conseguir que el sitio web cumpla con los
estándares de calidad del W3C aporta beneficios de muy diversa índole tales
como: (visibilidad, posicionamiento, acceso desde múltiples dispositivos
móviles…), así como una mejor imagen para la empresa.
Además de todo lo mencionado, la accesibilidad se ha convertido en un tema legal en
nuestro país, desde el 2007 ya existen medidas legales que apoyan la accesibilidad y
protegen a los colectivos con peligro de exclusión digital. Estas leyes son [9]:
• Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento
sobre las Condiciones Básicas para el Acceso de las Personas con Discapacidad a
las Tecnologías, Productos y Servicios Relacionados con la Sociedad de la
Información y Medios de Comunicación Social.
• Ley 11/2007, de 22 de junio. Acceso electrónico de los ciudadanos a los Servicios
Públicos.
• Ley 27/2007, de 23 de octubre, por las que se reconocen las lenguas de signos
españolas y se regulan los medios de apoyo a la comunicación oral de las personas
sordas, con discapacidad auditiva y sordociegas.
• Ley 49/2007, de 26 de diciembre, por la que se establece el régimen de
infracciones y sanciones en materia de igualdad de oportunidades, no
discriminación y accesibilidad universal de las personas con discapacidad. Ha
sido sustituida por el Real Decreto Legislativo 1/2013, de 29 de noviembre, por
el que se aprueba el Texto Refundido de la Ley General de derechos de las
personas con discapacidad y de su inclusión social.

• La Ley 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la
Información.
Todas estas leyes no solo atañen a la organización pública, es la primera vez que la
legislación estatal obliga a organizaciones con y sin ánimo de lucro a adaptar sus sitios
webs con dominio nacional (.es) a ser accesibles a todos los grupos sociales. Estas normas
atañen a todas aquellas que reciban financiación pública de alguna forma o a aquellas que
tengan más de 100 trabajadores o facturen más de seis millones de euros al año. El nivel
de adecuación requerido para todas estas organizaciones en sus portales es la AA de la
Norma UNE 139803, que en 2012 se actualizó para ser equivalente a las WCAG 2.0 [18].
Y la normativa en 2012, pasó también, para la empresas que reúnen las características
anteriormente mencionadas, a tener que adecuar sus redes sociales a las normas de
accesibilidad. Esto se realizó mediante la Ley 26/2011, de 1 de agosto, de adaptación
normativa a la Convención Internacional sobre los Derechos de las Personas con
Discapacidad.
Más adelante, con el Real Decreto Legislativo 1/2013 por el que se aprueba el Texto
Refundido de la Ley General de derechos de las personas con discapacidad y de su
inclusión social se definen las sanciones y los derechos de las personas con alguna
discapacidad o minusvalía física, cognitiva o de cualquier tipo para con las entidades que
no cumplan la normativa en materia de accesibilidad web.
Por último, hay que comentar que el hecho de diseñar un sitio web accesible puede ser
muy sencillo o complejo dependiendo de muchos factores como por ejemplo el tipo de
contenido, el peso o la complejidad del sitio. Otro factor muy a tener en cuenta es la
herramienta de desarrollo utilizada para la programación y edición de la aplicación o sitio
web. Cada vez más los grandes desarrolladores y gestores de web, como puede ser
WordPress, facilitan esta función, pero en muchos casos es una tarea ardua de depuración
de errores de aplicativos por parte del desarrollador web. Para esto existen varias
herramientas de evaluación de accesibilidad para el sitio web a desarrollar; la que nosotros
utilizaremos es https://www.tawdis.net/.
2.2.3 Usabilidad web
La usabilidad web es un término que normalmente suele explicar en su comparativa con
la accesibilidad. Nace de la necesidad antes comentada de otorgar un acceso equitativo a
todas las personas al entorno web, tanto por entidades públicas como privadas.
En un principio etimológico el término usabilidad no está referido a la web sino que tiene
más bien que ver con los artefactos manipulables. En este aspecto se define la usabilidad
como la facilidad de manipulación de un artefacto en determinadas condiciones. Por
ejemplo, este concepto describe la experiencia desde que un usuario quiere clavar un
clavo hasta que el martillo tiene dicha usabilidad [10].
En el caso del desarrollo software de un sitio web, la usabilidad es capital, ya que marcará
la diferencia entre el éxito de esta o el desuso. El software está, por descripción, destinado
a realizar acciones complejas. De tal forma, la usabilidad será el factor más importante
que haga decidir al usuario final si utilizar o no la herramienta creada. Por muy estética y

funcional que sea una web, si el usuario final no puede interactuar con ella, no tendrá
ningún sentido su concepción.
La Organización Internacional para la Estandarización (ISO) da dos diferentes
definiciones para la usabilidad web [10]:
• ISO/IEC 9126: "La usabilidad se refiere a la capacidad de un software de ser
comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones
específicas de uso".
• ISO/IEC 9241: "Usabilidad es la efectividad, eficiencia y satisfacción con la que
un producto permite alcanzar objetivos específicos a usuarios específicos en un
contexto de uso específico".
Ilustración 3: Dimensiones de la usabilidad. Estándar ISO 9241-11
De estas definiciones podemos sacar en claro la evidente relación entre usabilidad y
eficiencia de procesos en la web, es decir, cuanto más rápido, intuitivo y fácil es un
proceso en nuestra web, más usable se convierte. Además, recordar los pasos a seguir
para realizar un determinado procedimiento ha de ser estándar y fácil.
Ya que un sitio web es el máximo exponente de software pensado en el usuario, se ha de
conseguir que su diseño esté totalmente centrado en este. De tal forma, desde la
concepción a la depuración hemos de tener presente el usuario final y/o cliente de nuestra
aplicación. Dicho de otra forma, nuestro sitio web debe centrarse en la optimización de
parte del usuario y no de parte del sistema.
Para estandarizar un tanto el concepto de usabilidad del software, Shnedirman formuló
en 1998 cinco atributos que resumen en gran medida la usabilidad y la accesibilidad [10]:
• Facilidad de aprendizaje.

• Velocidad de desempeño. Si a un usuario que nunca ha visto el portal se le
ordenara ir a una sección concreta, ¿cuánto tiempo le llevaría localizarla?
• Tasa de error por usuario. A un usuario con algo de experiencia en la utilización
del portal, ¿cuánto tiempo le llevaría realizar una serie de tareas específicas?
• Retención en el tiempo. Se trata de evitar que un usuario experimentado caiga
en errores, de modo que acabe abandonando la página.
• Satisfacción subjetiva. Un usuario experimentado, ¿tiene una opinión positiva de
la web?
Normalmente para testar la usabilidad de un software o web se recurre a la evaluación
por pruebas heurísticas del diseño centrado en el usuario. Un ejemplo de estas pueden ser
las propuestas por Nielsen en 1993 o Dumas en el 1999. El eje central de todas es el juicio
que aporta el usuario final usando directamente la aplicación. Uno de los sistemas de
evaluación de la usabilidad web más extendidos es el sistema Web SIRIUS, el cuál se
recomienda en varios artículos como Usability of Web sites, methods and evaluation
techniques de la Dra. Lilliam Perurena Cancio y el Ing. Mercedes Moráguez Bergues para
la Universidad de La Habana (Cuba). En él, además, se hace hincapié en la importancia
de la usabilidad para las aplicaciones web.
Como se comentaba anteriormente, es de vital importancia la evaluación del sitio web y
su usabilidad una vez finalizado el proceso de diseño y programación. Para este fin hay
multitud de métodos clasificados en tres categorías [27]:
1. Inspección
2. Indagación
3. Test
El primero de ellos, la inspección, es un nombre genérico que ampara una serie de
metodologías basadas en el examen de algunos evaluadores de algunos aspectos
relacionados con interfaz y su usabilidad. Estos evaluadores pueden ser de diferentes
tipos: expertos, usuarios finales, desarrolladores paralelos, etc. Los métodos de
inspección más importantes son [27]:
• La evaluación heurística: Comentada algunos párrafos atrás por ser la elegida en
nuestro caso para el test de usabilidad desarrollado para nuestro sitio web.
• Recorrido de la usabilidad plural: Tiene varias características propias como son el
tener tres tipos de participantes (expertos, desarrolladores y usuarios finales),
realizar con prototipos en papel y que todos los participantes asumen el rol de
usuario. Una vez realizado el test y redactadas detalladamente las acciones de cada
participante se ponen en común todo lo escrito y se debate.
• Recorridos cognitivos: Este método o conjunto de métodos se centra en medir y
estudiar la capacidad y facilidad de aprendizaje para con la aplicación
desarrollada. Está basado totalmente en la exploración de la aplicación y en la
metodología de aprendizaje por exploración de muchos usuarios sobre los
entornos de aplicación web. En este caso, las personas evaluadoras, miden una
propuesta de interfaz contextualizada en la acción de una o más tareas.

• Inspección de estándares: Es el test más sencillo de entender y a la vez el más
difícil de realizar. Se basa en inspeccionar minuciosamente que la interfaz del sitio
web cumpla con todos los estándares definidos.
Haciendo foco en la evaluación heurística, utilizada para nuestro proyecto, podemos decir
de esta que es un método de evaluación de la usabilidad que ha de ser realizado por
expertos y bajo unas condiciones y principios previamente establecidos. Su objetivo no
es otro que medir la cualidad y la calidad de la interfaz para con la usabilidad. Presentada
por J.Nielsen como un método de la denominada Inegniería de la Usabilidad de
Descuento en [26] presenta los siguientes beneficios en su uso:
1. Es económica
2. Es intuitiva y fácil de utilizar con los evaluadores
3. No requiere ningún tipo de planificación previa
4. Los evaluadores no han de ser expertos en usabilidad.
5. Puede ser utilizada en todas las etapas de desarrollo para la optimización de la
interfaz
6. El tiempo de procesamiento de los resultados del test son muy rápidos en
comparación a otros test similares.
Como ya se ha comentado anteriormente J. Nielsen y R. Molich fueron los grandes
precursores de este método, y fueron ellos los que definieron una seria de PHs a los que
denominaron heurísticas [28] que determinaban los mínimos de su metodología y que se
detallan a continuación:
1. Visibilidad del estado del sistema: El usuario siempre debe saber el punto del
sistema en el que está.
2. Lenguaje de los usuarios: El sistema deber hablar el mismo lenguaje de los
usuarios a los que está destinado el mensaje y la interfaz.
3. Control y libertad para el usuario
4. Consistencia y estándares: El usuario no debe preguntar el porqué de las cosas,
solo entenderlas y ser capaz de usarlas.
5. Ayuda a los usuarios para reconocimiento, diagnóstico y recuperación de errores:
El usuario siempre ha de saber el estado del sistema para saber cómo actuar en
caso de error.
6. Prevención de errores
7. Reconocimiento antes que cancelación: El usuario no debe tener que recordar el
diálogo de ninguna parte de la interfaz para otra.
8. Flexibilidad y eficiencia de uso: Las instrucciones de uso han de ser siempre
entendibles, presentes y fáciles de usar. El sistema debe permitir la
personalización parcial o total de acciones frecuentes.
9. Estética de diálogos y diseño minimalista.
10. Ayuda general y documentación: Aunque es mejor poder utilizar el sistema sin
documentación anexa, siempre es importante tener un lugar de información
centralizada para el usuario por si fuera necesario.
Por último, hay que puntualizar que la mencionada anteriormente accesibilidad y la
usabilidad web tienen el mismo objetivo: facilitar el uso de la web al usuario final y hacer
que todo el mundo pueda disfrutar de ella en su totalidad. La diferencia que tienen ambas

es el punto de vista de actuación, la accesibilidad web se centra en vencer las
discapacidades del usuario final, mientras que la usabilidad tiene el objetivo de mejorar
la experiencia de usuario al usar la web.
2.3 WEB DINÁMICA
En este apartado se definirá el nuevo paradigma de la web 2.0 que conlleva la realización
de páginas webs dinámicas. Además, se comentarán diferentes tecnologías para el
desarrollo y concepción de estas páginas webs.
2.3.1 Definición
Algunas de las definiciones encontradas tras una simple búsqueda en cualquier navegador
de internet son:
• “Las páginas web dinámicas con aquellas en las que la información presentada se
genera a partir de una petición del usuario de la página.” [19].
• “Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro
de la propia Web, otorgando una mayor interactividad con el navegante.” [20].
• “Podríamos definir una web dinámica como un conjunto de datos almacenados en
una base de datos (BD) -gestionada por la capa de software conocida como
sistema de gestión de base de datos (SGBD)- y, por otro lado, un conjunto de
programas conocidos como páginas activas (en lenguaje PHP, ASPX, JSP…)- con
su correspondiente software procesador o intérprete del lenguaje -que constituyen
la interfaz para que los usuarios del sitio manipulen la BD-.” Jesús Torres del Rey
y Emilio Rodríguez V. de Aldana de la Universidad de Salamanca [21].
Se observa que, en todas las definiciones, más comerciales o más técnicas, aparece la
palabra interacción y petición de información. Pues bien, eso es exactamente la web
dinámica de la que ya hablamos cuando comentamos los principios de la Web 2.0 de Tim
O’Reilly. Para poder entender mejor lo que es la web dinámica, lo que se suele hacer es
compararla con su antecesora la web estática.
La comparativa entre una y otra se puede hacer desde distintos puntos de vista. En este
primer apartado nos centraremos en comentar el punto de vista del usuario, mientas que
en el siguiente apartado comentaremos las diferencias tecnológicas entre una y otra.
La web dinámica, término estrechamente relacionado con la web 2.0, es aquella que
permite al usuario interactuar con el contenido que está visualizando, de tal forma, que
este se adapta a él/ella. Así, la web se convierte de un mero espacio de lectura en una
aplicación capaz de realizar la que el usuario demande. Además, esto permite infinitas
posibilidades como: recoger datos incluidos por el usuario, otorgar diferentes
posibilidades de visión, brindar herramientas de trabajo de cualquier tipo, otorgar dos
páginas web a la vez, etc. Esto se basa en el paradigma del funcionamiento en tiempo real
basada en la toma de decisión del usuario [11].
Un buen ejemplo de web dinámica podría ser el sitio web de la Universidad de Granada
y su Sede Electrónica: Dependiendo del usuario (PDI, PAS, Estudiante…) que indiques
se te mostrarán unos procedimientos u otros a realizar, puedes rellenar los datos de
registro de cualquier procedimiento y con esto realizar un alta y, además, puedes acceder

a una zona de usuario identificado que tiene su propia interfaz y varía para cada usuario.
Aquí tenemos tres claros ejemplos de lo que permite una web dinámica.
2.3.2 Tecnologías
Las denominadas páginas web dinámicas pueden generarse mediante varias secuencias
de comandos en el lado del servidor. Una vez recibe el cliente (usuario) la esta secuencia,
la despliega como una simple visión de HTML (lenguaje de marcatura que define la web
estática). Por explicarlo con un proceso simple; cuando un usuario ingresa los datos en
un formulario, se envía un mensaje al servidor con toda la información. En ese momento
se debe de tratar toda la secuencia de datos enviada y, normalmente, generar un nuevo
HTML de respuesta al usuario [11].
Generación de páginas dinámicas en el servidor
En el caso de una web dinámica, en el servidor, la base de datos será la encargada de
almacenar todos los datos y podrá variar la información dependiendo la naturaleza de la
petición y el cliente. Para realizar la gestión de esta base de datos existen varias opciones
(Microsoft SQL, PostgreSQL, Oracle,…) que variarán dependiendo del servidor web
(Apache, Tomcat,…) y el lenguaje de programación (PHP, Perl, etc) [11].
• ASP.NET: Es una alternativa muy importante. ASP (Active Server Pages) es la
herramienta que ofrece Microsoft para generar sitios webs dinámicos y debe
utilizarse en conjunto con el software ISS (Internet Information Server). Desde
sus inicios a evolucionado mucho hasta el actual ASP.NET dentro de la
plataforma “.NET”. Una de sus principales ventajas es la cantidad de lenguajes
que soporta, tales como: VB.NET (deriva del Visual Basic), C# (versión mejorada
de C++) y JScript.NET (derivado de Javascript). Esta opción `permite combinar
código HTML, scripts y todo tipo de componentes ActiveX del servidor para crear
un entorno dinámico de calidad para la web.
• PHP: Tal vez la opción más común, utilizada y simple. Se basa en la introducción
de simples secuencias de comandos y que sea el mismo servidor el que las ejecute
generando las páginas. El lenguaje PHP (PHP Hypertext Pre-processor) tiene la
gran ventaja con el resto de las alternativas de ser gratis y además simple de
comprender y usar. Es de código abierto interpretado a alto nivel, concebido para
desarrollo web y que incluso tiene la posibilidad de ser embebido en páginas de
HTML. En cuanto a la programación y sintaxis es muy similar a C, Perl o Java.
Funciona con casi la totalidad de sistemas operativos y servidores y permite
realizar multitud de aplicaciones a través de la infinidad de librerías creadas por
desarrolladores web de todo el mundo. Para utilizar este lenguaje el servidor debe
entenderlo, por lo que la mayoría de las páginas web que contienen PHP (dentro
de las etiquetas <?php…?>) suelen tener la extensión .php aunque pueden estar
dentro de un HTML.

Ilustración 4: Funcionamiento PHP. Extraída de: ramonmillan.com
• JSP: Otra alternativa es JSP (Java Server Pages), que es muy similar al
anteriormente mencionado PHP, salvo que la parte que se quiere que sea dinámica
se escribe en Java. Está desarrollado por Sun MicroSystems y es una tecnología
de Java que permite realizar web dinámicas en forma de documentos HTML,
XML o de otro tipo. Existen también varias librerías creadas para esta herramienta
y las páginas utilizadas tienen la extensión “.jsp”.
Generación de páginas dinámicas en el cliente
Las secuencias comentadas anteriormente resuelven la creación de páginas del lado del
servidor, pero ahora debemos de preocuparnos y centrarnos en los lenguajes y tecnologías
que hacen posible que el usuario vea la información adaptada y actualizada a sus
peticiones.
Ninguna de las soluciones comentadas anteriormente puede responder a los movimientos
de ratón o interactuar en tiempo real con los movimientos del usuario. Para esto hemos
de incrustar en el HTML diferentes secuencias de código llamadas scripts encerradas en
con la etiqueta <script>. El lenguaje más utilizado a nivel internacional es JavaScript,
existiendo otras posibilidades como son los applets de Java, los controles ActiveX y las
animaciones Flash.
Lo más usual en la programación de páginas web dinámicas es tener páginas que utilicen
PHP y JavaScript simultáneamente para responder a necesidades tan básicas como puede
ser: comprobar que todos los campos de un formulario están rellenos antes de enviar los
datos al servidor con el comando “envío”.
• JavaScript: A pesar de su nombre no tiene ninguna relación con Java. Este es un
lenguaje de script interpretado que está embebido en los navegadores (y es este
mismo quien lo interpreta). Así, se pueden crear webs dinámicas del lado del
servidor dentro de un HTML de forma simple e intuitiva. Se realiza usando
objetos especiales, archivos y bases de datos relacionales. Pueden ser compiladas
antes de ser instaladas en el servidor y son completamente interpretadas por el
cliente siendo su ejecución inmediata.

Ilustración 5: Funcionamiento JovaScript. Imagen extraída de devjoker.com
• Java: Los applets son pequeños programas de Java que han sido compilados para
una máquina virtual llamada JVM (Java Virtual Machine). Si en una página
referenciamos un applet, cuando un usuario carga dicha página, recibirá el applet
para que interactúe con él. Al no ser interpretado sino ejecutado, puede resolver
problemas de seguridad en el cliente.
• ActiveX: Esta es la alternativa de Microsoft a los applet y se llaman controles
ActiveX. Los objetos de dicha tecnología pueden ser creados con infinidad de
lenguajes (C++, Java, Visual Basic, ect) y son programas compilados y ejecutados
en el hardware-cliente. Funciona de tal manera que, cuando el navegador detecta
uno, lo descarga, comprueba su seguridad y lo ejecuta en el lado del cliente.
• Flash: Es el Adobe y es el más visto por todos los usuarios. Es otra alternativa
para integrar aplicaciones dentro de una página web. La particularidad de esta
herramienta es que el gigante Adobe ha creado en torno a ella una imagen muy
amigable y trabajada que hace que el usuario se adapte muy rápido a ella. Son
utilizados para multitud de herramientas; desde logos animados, banners, botones,
imágenes clicables, etc. Es compatible con todo tipo de navegadores y para
utilizarlo se ha de instalar previamente el plugin Flash Player de distribución
gratuita.
2.4 DISEÑO WEB CENTRADO EN EL USUARIO
Como ya se ha comentado anteriormente en varias ocasiones, el nuevo paradigma de la
web 2.0 se centra en el usuario, por lo que el diseño y el software utilizado en estas deben,
de igual forma, tener el foco en este. De este modo, en lo que sigue se definirá este tipo
de diseño y se analizarán los diferentes procedimientos para realizar este diseño de forma
óptima.
2.4.1 Definición
“El Diseño Centrado en el Usuario (DCU) es el término general que se utiliza para
describir el diseño en el que el usuario influye en el resultado final. Es, al mismo tiempo,
una filosofía y un proceso. Una filosofía, una orientación estratégica, que sitúa a la
persona en el centro con la intención de desarrollar un producto adecuado a sus
necesidades y requerimientos, y un proceso de diseño que se centra en los factores
cognitivos de las personas y como éstos intervienen en sus interacciones con los
productos” [12].

Lo que se consigue con el diseño centrado en el usuario es poder conocer cómo el cliente
final utiliza la web y cuáles son las tareas que realiza y los objetivos que persigue cuando
hace uso de ella. Toda esta información será utilizada para la concepción de la aplicación
que será, además, verificada nuevamente por el usuario. Por nombrar alguna de la
información que se recaba podemos destacar [12]:
• Público objetivo.
• Conocimientos técnicos y tecnológicos de estos.
• Experiencia de uso en software similar.
• Información necesaria y presentación óptima de la misma.
• Comprensión del software.
• Adaptación cognitiva al diseño gráfico.
Por poner un ejemplo, se puede suponer que la aplicación a realizar es una plataforma de
e-learning para la tercera edad. En este contexto, hemos de determinar quienes son los
usuarios que la van a utilizar, qué conocimientos previos tienen de la web y el e-learning
y cuales son sus dificultados cognitivas y físicas para poder utilizar un dispositivo que
pueda soportar la plataforma (PC, smartphone, Tablet, etc.).
2.4.2 Adaptación al usuario
Para realizar la adaptación al usuario de una forma uniforme en las diferentes aplicaciones
que existen en el entorno hardware y software, existe una norma ISO: ISO 13407: Human-
centred design process for interactive systems [13] en la que se propone un proceso
iterativo que queda enmarcado dentro del ciclo de desarrollo de la aplicación. En esta ISO
13407 no se proponen técnicas como tal, pero si un protocolo de actuación para obtener
productos finales más usables y adaptados.
Se basa en cuatro principios básicos para el DCU [13]:
1. Involucrar activamente a los usuarios y comprender los requisitos que los usuarios
desean y necesitan.
2. Que exista una correspondencia entre las funcionalidades que aporta el software
y la que los usuarios demandan.
3. Que las soluciones propuestas sigan un proceso de iteración en el desarrollo del
producto.
4. Diseño pluridisciplinar.
Esta norma 13407 además propone un ciclo de trabajo iterativo, señalado anteriormente,
que permite realizar un desarrollo coherente con el DCU de nuestras aplicación.
1. Definición del contexto de uso: Esto responde a la pregunta de: ¿Quién lo va a
usar, cuándo lo va a usar y cómo lo va a usar?
2. Especificación de requisitos: Aquí se define lo que el usuario necesita y el objetivo
que tiene al usar el producto, además de las necesidades estructurales y de
organización del uso del producto.
3. Propuesta de solución: Con la información recabada en los dos apartados
anteriores se diseña una propuesta que satisfaga los requisitos, necesidades y
objetivos del usuario. Dependiendo de la complejidad del problema, esta etapa
puede tener varias subetapas.

4. Evaluación del diseño propuesto: Esta es la parte más importante del proceso. Una
vez tengamos una propuesta se ha de testar con el usuario final en el contexto de
uso de la aplicación, con diversos usuarios y ante diferentes situaciones y
realidades de estos. Si las pruebas arrojan resultados positivos, se tendría la
primera versión del producto, si no, habría que volver al paso número 1.
Ilustración 6: Ciclo de actividades de la ISO 13407 [13]
Como veremos más adelante, este es el ciclo en el que se basa la metodología ágil, que es
la que hemos usado para el desarrollo de nuestro sitio web.
Para poder comprender la adaptación al usuario en sitios web, antes es importante definir
y conocer el término de Sistema Hipermedia (SH de aquí en adelante) [8]:
• “Si un hipertexto es una red que conecta nodos informativos sobre la base de una
libre asociación no puede limitarse al texto escrito, sino que debe ser
necesariamente la síntesis de todas las formas modernas asumidas por la
información: textos, músicas, voces, filmaciones [....]” Carlo Rovelli.
• “Hipermedia e hipertexto tienden a usarse uno en lugar del otro. Media no es más
que texto que incluye gráficos, sonido y vídeo.” Web Wide Consortium.
Por tanto, para poder comprender la definición de hipermedia, que como se ha visto, no
es más que un hipertexto adaptado a los nuevos formatos tecnológicos, hemos de conocer
las peculiaridades del hipertexto. Éste, puede ser visto desde tres puntos de vista, y por
tanto, puede ser descrito de tres formas:
• Modelo teórico de organización de información de forma no secuencial.
• Software que permite desarrollar, crear y escribir documentos hipertextueles.
• Documento digital que permite acceder a la información de forma no secuencial.

Una representación gráfica que permite ver de forma más clara de que se está hablando
puede ser la siguiente
Ilustración 7: Definición de un Sistema Hipermedia [10]
De dónde se puede observar que contamos con tres entidades notorias:
• Nodo: Información en cantidad puntual.
• Enlace: Conexión entre anclas que definen las referencias para poder unir de
forma secuencial un origen y un destino.
• Ancla: Es el lugar de un nodo en el que se marca la conexión con otro nodo, o
explicado de otra forma, el fin e inicio de los enlaces. Puede estar embebido en
texto (enlaces clicables), imágenes o cualquier formato.
Como el usuario, por normal general, no se adapta cómodamente a utilizar un SH, la labor
del desarrollador de un sitio web será adaptar este sistema al cliente final. Y lo hará a
través de las técnicas de adaptación que veremos más adelante y teniendo presente
siempre que ha de responder a las siguientes cuatro preguntas:
• ¿Qué adaptar?
• ¿A qué adaptar?
• ¿Cómo adaptar?
• ¿Cuándo adaptar?
2.4.2.1 Modelado de usuario
“El modelo de usuario, al que de forma abreviada notamos MU, es precisamente, la
representación interna que el sistema mantiene del usuario para posteriormente ser capaz
de adaptar su estructura y comportamiento a las características y necesidades del mismo”
[8].

Este modelo de usuario puede componerse de múltiples y diversos datos del usuario:
conocimientos, contexto personal, formación, intereses, gustos, hobbies, preferencias,
estado físico, estado de salud, ubicación, etc. Se recogerá en el modelo de usuario todo
aquello que sea relevante para la adaptación y el desarrollo de la aplicación.
Cabe destacar que este modelo de usuario debe estar actualizado en todo momento a los
requisitos del sistema y el cliente, reflejando el estado actual del usuario. Este MU será
constantemente consulado por el sistema para ajustar todo su funcionamiento al usuario
según los procedimientos de adaptación que previamente hemos definido. De este modo,
la acción del modelado es de vital importancia para realizar una óptima adaptación, ya
que sí, las técnicas de adaptación que elegimos son las mejoras para el usuario, pero el
modelo no es fiel a la realidad de nuestro cliente, el sistema no será coherente y no
funcionará de forma correcta.
Un término estrechamente relacionado con el modelado de usuario que se ha de definir
para entender la concepción del mismo es la taxonomía del MU: “La taxonomía de MU
tiene por objeto proporcionar un sistema de clasificación que cubra la mayor parte de la
variedad actual de MU” [14]. La taxonomía propuesta en el artículo consultado [14]
recoge y organiza hasta 20 categorías (formadas a su vez por subcategorías) que se
detallan a continuación.
Ilustración 8: Categorías taxonómicas del modelo propuesto [10]
Los criterios dentro de esta organización taxonómica son divididos en dos grupos:
1. La estructura y representación de la información almacenada del modelo de
usuario descrito.
2. La gestión de esta información que posee el sistema.
De esta forma, la estructura del modelo de usuario puede dividirse en estas categorías:
• Granularidad: Hace referencia a la posibilidad de agrupación entre los diferentes
usuarios por tipología. Varios atributos o características pueden hacer de un grupo
de usuarios un modelo único.
o Modelo de usuario individual
o Modelo de usuario en grupo

• Representación del usuario
o Estereotipos: “beginner”, “apprentice”, “expert”
o Modelo de overlay: usa el modelo conceptual de la aplicación para
describir al usuario
• Traza principal: Se define la característica más notoria del usuario, aquella que lo
identifica de forma más única.
o Conocimiento
o Preferencias
o Intereses
• Generalidad
o Short-term: información muy específica
o Long-term: información más general
• Monitorización: Como se puede obtener, en tiempo real, la actualización del
modelo de usuario para que la respuesta del sistema sea coherente en todo
momento.
o Eventos, localización, movimiento, audio, etc.
• Información contextual
o Tecnológico
o Institucional
En cuando la gestión de la información recogida en el modelo de usuario se pueden
destacar la siguiente categorización.
• Inicialización
o Total
o Parcial
• Actualización
o Dinámica: implícita o explícita
• Estabilidad
o Short-term
o Long-term
• Dirección de la inferencia: Hace referencia a los términos de comparación en la
funcionalidad del software y en la predicción que se puede conseguir.
o La adaptación converge al MU
o La adaptación diverge del MU
• Visibilidad
o Open UM (glass box)
o Closed UM
En la siguiente imagen se puede ver el ejemplo de un modelado de usuario realizado con
JSEM-HP (una herramienta de desarrollo de sistemas hipermedia adaptativos evolutivos).

Ilustración 9: Modelo de usuario realizado con JSEM-HP [10]
2.4.2.2 Técnicas de adaptación
La adaptación se puede y debe realizar desde las dos visiones que tiene el usuario: la
navegación y la presentación. La segunda hace referencia a cómo ve el usuario ve la
información y cómo se le presenta de forma estática y funcional; desde el color a la
disposición, pasando por la tipografía y el diseño gráfico. De la misma forma se adapta
la navegación (cómo el usuario interactúa con el contenido) con diversas técnicas para
hacer la web más usable, comprensible y útil [8].
Ilustración 10: Métodos de adaptación, tanto en navegación como presentación [10]
Las técnicas de adaptación de cada una de las categorías son
• De la presentación:
o Texto condicional: Dependiendo del usuario se muestra una u otra
información.
o Estirar/encoger texto

o Variantes de fragmento: Diferentes fragmentos, para diferentes vistas.
o Variantes de página: Ídem, pero con páginas.
o Técnicas basadas en marcos: Similar pero basados en otras técnicas de
programación web.
• De la navegación
o Consejo directo: Ventana que informa al usuario de una posibilidad de
navegación óptima.
o Ordenación de enlaces: Reestructuración de los menús que el usuario
puede visionar.
o Anotación de enlaces: Refuerzo de información en los enlaces disponibles
en la página.
o Borrado de enlaces.
o Ocultación de enlaces.
o Deshabilitación de enlaces
Todas las técnicas están orientadas a facilitar tanto la comprensión del sitio como la
orientación de la información.

Ilustración 11: Ejemplos de técnicas de adaptación al usuario [10]
3 CASO PRÁCTICO: WEB DINÁMICA PARA JIFFI: III
JORNADAS – I CONGRESO NACIONAL
3.1 III JORNADAS – I CONGRESO NACIONAL
Esta edición de JIFFI (Jornadas de Investigadores en Formación Fomentando la
Interdisciplinariedad) es la primera que se ha convertido en Congreso Nacional. El
objetivo de la primera edición era claro: promover la interdisciplinariedad entre los
estudiantes de las tres escuelas de doctorado de la Universidad de Granada, y poco ha
cambiado en las subsiguientes. En las nuevas ediciones lo único que ha cambiado ha sido
el dimensionamiento del objetivo, incluyendo nuevos zonas y nuevas líneas de
investigación, haciendo crecer las jornadas en multiculturalismo, conocimiento y puntos
de vista.
El cometido que tendremos nosotros dentro de la organización del congreso es el diseño,
realización. Configuración y mantenimiento del sitio web del mismo.
3.1.1 Elementos conceptuales y diseño
En el Congreso habrá tres tipos de participantes diferentes según la actividad que vayan
a realizar y de la universidad que provengan serán: Participante UGR, Participante no
UGR y Participante de Mesa Redonda. Estos participantes, como parece obvio,
presentarán un tipo de trabajo en el Congreso, el cual realizará cinco tipos de eventos
diferentes durante su celebración: Sesiones orales, publicación de posters, actividades
divulgativas, networking activo y cerrarán las jornadas con una cena de clausura.
El diseño del modelo conceptual se ha realizado en estructura de bloques y es el que se
especifica más abajo. Para ello tendremos como referencia la página anteriormente creada
(http://jornadas.ugr.es/jiffi/) de la que se plantea mejorar la adaptabilidad, usabilidad y

poder transformarla en una web dinámica, corporativa y actualizada. Por tanto, lo primero
que haremos será definir los requisitos necesarios para el desarrollo del nuevo sitio web,
y lo haremos a través de la optimización de la antigua. El próximo paso será proponer
modelos de navegabilidad y realizar un primer diseño que iremos adaptando totalmente a
las necesidades del cliente a través de la metodología ágil. Una vez finalizado el diseño
del sitio comprobaremos que el sitio es “adaptable” y “usable” y realizaremos el último
test con el usuario final para publicar la web definitiva.
Ilustración 12: Modelo Conceptual JIFFI
En la ilustración 12 se recogen todos los conceptos (en los que se especifican todos los
atributos que se recogen de cada concepto) y las relaciones que más adelante definirán el
modelo de usuario y la adaptabilidad a estos. Además, define los diferentes valores y la
información que hemos de tomar en el proceso de adaptación en el sitio web.
3.1.2 Funcionalidad
Lo que se intenta con esta web es que sea intuitiva, fácil de leer, cómoda y simple. Por
ello se definen una serie de ítem u objetivos a cumplir. Teniéndolo en cuenta se podrá
realizar la web con la funcionalidad que se requiere por el cliente y que se desea por el
desarrollador.
• Legibilidad: Ha de ser comprensible para cualquier usuario en cualquier lugar y
en cualquier circunstancia. Por tanto, utilizaremos lenguaje simple, cordial y
correcto.
• Imagen coherente: Toda la web debe dar la impresión de estar conectada entre sí.
Todas las páginas deben seguir el mismo estilo y ser rápidamente reconocibles
con el congreso.
• Enlaza a páginas internas en nuevas pestañas o ventanas
• URLs amigables: Esto ayudará al usuario a saber dónde se encuentra y a dónde
puede llegar desde la página en la que está.
• Menús intuitivos: Pueden ser jerárquicos pero deberán ser lo más cortos posibles
y estar coherentemente unidos.

• Evitar distracciones: Tanto en colorama, como en organización. Todas las páginas
siguen una estructura y se hacen fácilmente visualizables.
• Scroll corto: Si hay diferentes focos de información, se intentará que la página
quede compacta y el scroll sea el menor posible.
• Fomenta la interacción web: Para que la web sea más usable, accesible y además
presente un mejor posicionamiento, haremos todos los elementos de la misma lo
más interactivos posibles.
3.1.3 Situación de partida de la aplicación
El actual sitio web se puede visitar en este link: http://jornadas.ugr.es/jiffi/. En primera
instancia lo más importante que se quería mejorar era la presentación, diseño y usabilidad
de la web.
Ilustración 13: Panorámica de la antigua web de las JIFFI
Como se puede ver, no aparece en ningún momento ninguna imagen corporativa ni es
identificable el sitio con la organización ni con la actividad. La navegabilidad por el sitio
es torpe, aunque intuitiva y la adaptación es totalmente inexistente. La ausencia de
imágenes y sobre todo de información estructurada hace que la página web no se adapte
a todo tipo de público, sino que se hace fácil la navegación tan solo para personas
adaptadas al entorno web de la Universidad de Granada.
De tal forma, se decidió realizar una web nueva partiendo desde la concepción sin utilizar
ningún elemento de software de la desarrollada anteriormente. El objetivo era conseguir
una web corporativa, amigable en cuanto a interfaz para todo tipo de usuarios y adaptable
al usuario objetivo del congreso.
3.2 ESTUDIO DE APLICACIONES SIMILARES
Para poder tener alguna referencia en la concepción del sitio web del congreso, se estudian
las webs de dos congresos de similares características, tanto por entorno geográfico como
por concepción académica.

3.2.1 Congreso Nacional Semergen
Se elige este sitio web por lo consolidado del Congreso (40ª edición) y la buena
aceptación del sitio web tanto para los usuarios como para los organizadores y
patrocinadores. El tema del congreso es la salud y la naturaleza del mismo divulgativa y
social.
La página web se puede visitar aquí [22].
Ilustración 14: Sitio web congreso SEMERGEN
Lo primero que se puede observar es que ha sido diseñado con la tecnología ofrecida por
Wordpress. Es un ya clásico software de edición y programación web, que además de dar
buen soporte, permite utilizar diversos plugins y plantillas muy bien trabajadas por
diferentes autores. En este caso se elije una plantilla con una considerable importancia de
la Home y con un entorno muy amigable, tanto por la fuente como por los tibios colores.
Al primer impacto visual transmite tranquilidad y seriedad.
Se utiliza una Home de método ‘scroll’ en la que se encuentra toda la información útil de
‘primera vista’ y se fija en la parte superior un menú organizado en submenús con varios
apartados. Este menú nos permite con el sombreado saber en todo momento en qué lugar
de la web nos encontramos, algo que facilita la navegabilidad para personas con dificultad
de uso. La cabecera y el pie de la página son fijos y siempre otorgan la misma información
en todas las páginas cambiando levemente su formato. En este podemos ver los enlaces a
plataformas de redes sociales, imagen corporativa, hashtag del congreso, logo y enlaces
de interés, además de la consabida política de cookies.
En la parte superior derecha tenemos un apartado de acceso identificado en el que
podemos inscribirnos y/o iniciar nuestra sesión para entrar en un apartado de la web que

es único para cada inscrito/participante. De tal forma, la web cuenta con un espacio
adaptado y realiza un modelo de usuario que permite diferentes adaptaciones.
3.2.2 Congreso Internacional AELFA-IF
En este caso se ha elegido este congreso y este sitio web por ser un congreso celebrado
en Granada, de dilatada experiencia (XXXI edición) y con una filosofía similar a las
JIFFI. El tema del congreso es la Logopedia, Foniatría y Audiología y es de carácter
internacional, divulgativo y social [23].
Ilustración 15: Sitio web del congreso AELFA-IF
De la misma forma que el anterior, se ha optado por diseñar una Home con un fuerte
carácter informativo, dotando a esta de una importancia tácita en el sitio web. De un solo
vistazo y en cualquier dispositivo puedes conocer todo del congreso y puedes mantenerte
informado de las novedades. El diseño es algo más clásico y formal que el anterior caso
y la fuente marca más la naturaleza académica del evento. Muy visible la imagen
corporativa en la cabecera (fija que acompaña al menú) y el pie de página (fijo también)
en el que aparecen organizadores y colaboradores. La tecnología elegida para desarrollar
la web ha sido igualmente Wordpress.
En este caso el menú no nos guía en la navegabilidad y la estructura de la web es algo
más caótica, haciendo un poco difícil la navegabilidad y usabilidad para personas no
expertas en este tipo de aplicaciones. Ni imágenes ni esquemas quedan explicados y
muchos enlaces clickables no queda suficientemente claro dónde dirigen. Por otra parte
el diseño gráfico y la redacción es plana y un tanto aburrida, lo que no invita al lector a
indagar en la web lo suficiente para interesarse por el congreso si no es entendido en la
materia.

La adaptación y el modelado de usuario no se hace patente en esta web quedando más
cerca del antecedente a la web 2.0. Plataformas de redes sociales quedan identificadas,
pero no aparece ningún feed de las mismas. No aparece ningún lugar de acceso único al
usuario ni se realiza una adaptación a algún tipo de lector.
En la siguiente tabla se realiza una comparativa de ambas webs teniendo en cuenta los
parámetros más importantes de edición que nos interesan en nuestro caso. Lo que
perseguimos con eso es saber en qué punto se encuentran ambas webs y el entorno en el
que nos desarrollamos para poder contextualizar nuestro trabajo y conocer la demanda
general del mercado.
AELFA-IF Semergen
Home con toda la info Sí Sí
Acceso identificado No Sí
Menú guiado No Sí
Redacción dinámica No Sí
Wordpress Sí Sí
Cabecera y pie fijos Sí Sí
Integridad en el diseño Sí Sí
Imagen corporativa Sí Sí
Colorama corporativo Sí Sí
Autoría clara Sí Sí
Redacción Clara y concisa Espesa y algo técnica
Densidad de palabra Óptima Algo recargada y difícil de
leer
Tabla 1: Tabla 1: Comparativa de los sitios webs de los congresos AELFA-IF y Semergen
3.3 DESARROLLO DE APLICACIÓN
El desarrollo de la aplicación se ha realizado teniendo en cuenta los conocimientos y las
habilidades adquiridas durante el Máster y sin perder de vista que es una aplicación de
uso real y destinado a un cliente exigente y profesional. De tal forma, se ha debido
conciliar tanto la intención académica del TFM como la realidad práctica y comercial que
requería el desarrollo del sitio web.
3.3.1 Elecciones tecnológicas
En consecuencia, para la elección de la tecnología de desarrollo web, se tomó la decisión
de utilizar un sistema abierto, libre, cómodo y que permitiese tanto la interacción del
cliente (Comité Organizador del Congreso) como del desarrollador web (yo). Ante tal
decisión, y teniendo en cuanta lo ya dominado por ambas partes, se eligió Wordpress
como tecnología de desarrollo. La toma de esta decisión se baso en cuatro grandes
argumentos:
• Permite un acceso concurrente a la plataforma de desarrollo. Lo que permite que
el creador de contenido (Comité Organizador) y el desarrollador (yo) puedan
realizar su trabajo a la misma vez sin ningún tipo de conflicto.
• La interfaz es “amigable” tanto para desarrolladores como para editores. Permite
una versatilidad total en la creación de contenidos (con multitud de plantillas y

casos de éxito realizados por expertos) y en la programación (al ser software libre
todo lo utilizado la edición de plantillas y temas es total).
• Es libre, gratuito y además cooperativo. Los valores y la filosofía de Wordpress
están totalmente en fase y en sintonía con las propuestas por el Congreso, es más,
en una de las ponencias del mismo se refieren a Wordpress como un caso claro de
interdisciplinariedad y cooperación sinérgica. Este fue uno de los argumentos que
más peso tuvieron en la elección.
• El servidor donde se aloja el sitio web permite (y tiene un protocolo definido) para
la instalación de Wordpress. Además, uno de los enlaces con los administradores
del servidor de la UGR es especialista en Wordpress y se prestó a dar servicio
técnico y asesoramiento en el desarrollo de la web.
Por todas estas razones, y porque ambas partes habíamos trabajado ya antes con
Wordpress con absoluto éxito, se decidió apostar por esta tecnología para el desarrollo de
la aplicación.
Se puntualiza que en la elección de la tecnología Wordpress la adaptación de la web queda
del lado del servidor.
3.3.2 Metodología de desarrollo (Metodología Ágil)
Al saber que la realización, concepción y desarrollo del sitio web se realizaría con la
colaboración estrecha del cliente y el usuario final se eligió la metodología de trabajo que
permitía una más amplia colaboración y un sistema de trabajo más cómodo e intuitivo: se
optó por la Metodología Ágil [24].
Este método tiene una naturaleza circular repetitiva y se basa en la depuración del primer
modelado mediante la iteración del propio método.

Ilustración 16: Esquema de la metodología 'Agile'. Extraía de http://designsoftcr.com
Como se identifica en la ilustración superior, el primer paso es extraer los requisitos a
través de la evaluación para llegar a una aplicación final que se someterá a evaluación
continua, pasando anteriormente por los pasos del diseño y el desarrollo. Este ciclo se
repetirá tantas veces como sea necesario hasta tener la aplicación final. Notar también
que en todo momento se tiene en cuenta que la aplicación ha de ser viable y usable en el
mercado en el que nos movemos y que la opinión y visión de desarrollador, cliente y
usuario está presente en todo momento en la metodología de trabajo.
En nuestro caso la implementación de este método se ha realizado con el siguiente reparto
de roles:
1. Desarrollador web: Definición de los requerimientos de la web y requisitos de la
misma.
2. Desarrollador web y experto en comunicación del comité organizador: diseño,
desarrollo e implementación del sitio web.
3. Panel de usuarios formados por doctorandos y organizadores del congreso:
Evaluación y monitoreo del sitio web.
3.3.3 Análisis de requisitos (de nuestra aplicación)
3.3.3.1 Funcionales
En lo que sigue enumeraremos los requisitos funcionales de la aplicación web:
• RF 1 - El sitio web permitirá la selección del tipo de usuario. Se podrán introducir
los siguientes datos durante la selección del tipo de usuario:

o Ponente
▪ Universidad de Granada
▪ No Universidad de Granada
o Público genérico (será el predeterminado)
o Medios de prensa
• RF 2 - El sistema permitirá el envío de trabajos al congreso. Al hacerlo, el sistema
enviará un correo electrónico cuando una persona envíe un trabajo al Congreso.
• RF 3 - El sistema permitirá la inscripción al congreso. Se enviará un correo
electrónico cuando una persona se inscriba al Congreso.
• RF 4 - Al pinchar en el correo electrónico institucional del congreso, se permitirá
enviar un correo automáticamente.
• RF 5 - Cualquier usuario podrá ponerse en contacto con la organización mediante
el sitio web.
• RF 6 - El sitio web se conectará a los perfiles oficiales de JIFFI en redes sociales
(Facebook y Twitter).
• RF 7 - El sitio debe contener un espacio de FAQ (preguntas frecuentes).
• RF 8 - Es necesario que los usuarios ponente y medio de comunicación tenga un
espacio de usuario para tener accesible la documentación.
• RF 9 - El sistema deberá generar un certificado de participación para el usuario
ponente no más tarde de 30 días después de la conclusión del Congreso.
3.3.3.2 No funcionales
En el siguiente listado podremos encontrar los requisitos no funcionales del sitio web:
• RNF 1 - El sitio ha de ser visual y gráficamente estructurado.
• RNF 2 - El sitio deberá utilizar los colores del Pantone oficial del evento.
• RNF 3 - El sitio ha de utilizar los nuevos sistemas de comunicación gráfica: emojis
e iconos.
• RNF 4 - El sitio debe ser entendible y accesible por todo tipo de usuario.
• RNF 5 - El tono de la comunicación será cercano, amigable y simple.
• RNF 6 - Las imágenes utilizadas en el sitio deberán ser propias o autorizadas para
su uso por profesionales de imagen, contenido audiovisual, fotografía o diseño
gráfico.
• RNF 7 - Toda funcionalidad del sistema y transacción de negocio debe responder
al usuario en menos de 5 segundos en el 90% de los casos.
• RNF 8 - El sistema debe ser capaz de operar adecuadamente con hasta 5.000
usuarios con sesiones concurrentes.
• RNF 9 - Los datos modificados en la base de datos deben ser actualizados para
todos los usuarios que acceden en menos de 90 segundos.
• RNF 10 - El tiempo de aprendizaje del sistema por un usuario deberá ser menor a
30 minutos.
• RNF 11 - La tasa de errores cometidos por el usuario deberá ser menor del 5% de
las transacciones totales ejecutadas en el sistema.
• RNF 12 - El sistema debe proporcionar mensajes de error que sean informativos
y orientados a usuario final.
• RNF 13 - El sistema debe poseer interfaces gráficas bien formadas.

DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO

DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO

Similaire à DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO (20)

Plus de Julián Fernández Ortiz

Plus de Julián Fernández Ortiz (15)

DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO