1. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB
Planificación inicial del sitio web
Diseñar o rediseñar un sitio web que ya existe, es recomendable comenzar con una serie de preguntas
que permiten aclarar y definir las expectativas que se tienen del proyecto a generar.
Esas preguntas son:
¿Para qué necesita el sitio web la organización?
¿Para qué necesita el sitio web la audiencia a la que se dirige?
¿Qué información de la organización es útil para la audiencia?
¿Qué imagen de la organización quiero proyectar en mi audiencia?
¿Qué servicios interactivos entregaré a través del Sitio Web?
¿Quiénes pueden ayudarme a realizar el proyecto?
Respondiendo a estas preguntas será posible el determinar los elementos siguientes:
Objetivo: Definen la finalidad del proyecto, deben de ser generales y específicas, para así detallar las
metas a lograr.
Audiencia: A quién se dirigirá el sitio.
Tecnología: Que servicios se usarán y la tecnología que sustentará a éstos.
La claridad de estos elementos permite definir bien el proyecto, así como atraer al usuario deseado
mediante la aplicación correcta de las tecnologías.
Definición de objetivos
Con objetivos definidos, se puede tener certeza de la eficacia de las acciones desarrolladas. Luego de
tener claro un objetivo general, se deben de fijar los objetivos generales. La claridad en ellos permitirá que
el equipo tenga claridad del camino del proyecto. El observar la misión y la visión de la organización
ayuda a la definición del proyecto.
El objetivo del proyecto se debe de listar y limitarse a no más de 5 proposiciones. Así al no ser tantos se
puede garantizar el cumplimiento de ellos y al no ser pocos se deja en claro que no es un proyecto
poco ambicioso.
Tipos de objetivos asociados a una estrategia general de marketing online:
- Vender: Por medio del internet se pueden incrementar las ventas, vender directamente o bien,
general contactos para cerrar ventas fuera del medio digital.
- Servir: Ofrecer servicios en línea a los clientes antes y después de las ventas.
- Hablar: Utilizar el internet para conocer más al cliente.
- Ahorrar: Se reducen costos de servicios debido a los procesos automáticos.
- Impactar: Difundir la marca por medio del internet.
El uso de alguno de ellos no implica que se excluyan a todos los demás.
Definición de Servicios Interactivos

2. CÉSAR SALAZAR RUIZ
El definir con anticipación las tecnologías a utilizar, permite que en adelante se tomen las decisiones
adecuadas, para así dirigirse adecuadamente hacia los objetivos. Se debe tener una noción de cómo
queremos que los usuarios interactúen con nuestro sitio, para así las tecnologías puedan aplicar esas
funcionalidades.
Algunas de las tareas que se deben de realizar para saber que decisiones tomar en cuanto a las
funcionalidades:
Evaluar los servicios que se ofrecen actualmente a los clientes: Permitirá saber cuales son las áreas
organizativas clave y como operan y de ellas obtener procedimientos de trabajo que tendrá la atención
de los usuarios del sitio web.
Identificar unidades gestoras de información: Ayudará a coordinar internamente el sitio web y las
operaciones virtuales, para relacionarlo con la actividad física de la organización.
Analizar procesos y elaborar diagramas de flujo: De manera visible y documentada se podrá saber como
se opera y así ver que partes del proceso pueden ser funcionales para el sitio web.
Identificar contenidos y procesos que puedan ser publicados: Permitirá conocer los recursos inciales con
los cuales se operará el sitio web.
Definición de audiencia
Es importante conocer quienes serán los usuarios, que es lo que buscan y también necesitan y esperan,
cual es la experiencia que tienen, que tanto conocen de tecnología, cuales son las limitantes que puedan
tener, etc.
Esto debido a que no todas las páginas están diseñadas para el mismo tipo de audiencia, entonces cada
una requiere de un diseño específico.
¿Cómo se llega a establecer la Audiencia?
Para esto se debe de realizar un estudio de mercado, para ello existen agencias especializadas, para que
se realicen encuestas, entrevistas, etc. En caso de que no se cuente con un gran presupuesto para la
realización de una encuesta mínimo nosotros mismos debemos de preguntarnos para quién es que
estamos diseñando, quién es el usuario final. También es aconsejable que para tener conocimiento de la
audiencia, se realice una entrevista con la organización y siendo aún mas específicos con el área de
marketing o área de clientes.
Encuestas
Este es un método económico para tener conocimiento de los clientes así como de los usuarios. Las
encuestas se pueden realizar incluso en línea, pero de no ser así se deben de realizar en las ubicaciones
físicas de la organización (oficinas, tiendas…). Se debe de ofrecer algún tipo de recompensa o premio al
usuario o cliente, quien realice nuestra encuesta, para que la realice de buena manera, teniendo en cuenta
que la información que se obtenga va a ser muy valiosa.
Con las encuestas estos son algunos de los datos que se pueden obtener:
- Datos demográficos: Sexo, edad, donde viven, etc.

3. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB
- Información sobre la experiencia de usuario y grado de satisfacción en el uso del Sitio Web actual:
diseño, usabilidad, navegación, etc.
- Información sobre funcionalidades /servicios /contenidos a incorporar en el Sitio Web.
Arquetipos de usuarios (personas)
Una “persona” es un arquetipo de un usuario potencial, hacer un diseño para un el, con objetivos
conocidos, ayuda a satisfacer las necesidades de la audiencia que se representa en ese arquetipo. Su
identidad es inventada mientras que la información relacionada a sus necesidades, motivaciones, actitudes
y comportamientos debe de ser real. Una persona se define a través de las entrevistas. Los personajes se
adaptan a contextos con situaciones de uso que sean concretas.
Con esto se está creando una empatía en el equipo del proyecto con el usuario final, permitiendo el
tomar fácilmente decisiones conforme a los usuarios consultados y no en base a suposiciones. Los
personajes creados deben de representar a la mayoría de la audiencia.
Comúnmente la información de los usuarios se presenta de forma narrativa. La ficha de los personajes
incluye una fotografía (para humanizarlo) palabras claves y hasta representaciones gráficas que permiten
sintetizar visualmente su perfil.
Escenarios de Uso
En base a la posible audiencia, se debe de imaginar cuáles son los contenidos que ellos vendrán a buscar
al sitio web. “Estudiar escenarios de uso” hace referencia al uso real del sitio web en determinadas
situaciones, esto en base a usuarios ya existentes. Hacer el estudio con casos reales puede establecer
como los usuarios van a usar el sitio web. Así, con estas revisiones se ratifica o modifica lo que se haya
definido de contenido previamente. En ocasiones los primeros estudios son hechos por personas que
son parte de la misma empresa, entonces ellos dan por obvias algunas cuestiones que para los usuarios
no lo son.
Definición de la Infraestructura Tecnológica
En este paso se definen que tecnologías van a sustentar el desarrollo, funcionamiento y mantenimiento del
sitio web.
Esto se hace en dos niveles:
- Hardware: Son los elementos físicos del sistema, aquí el primer elemento será el servidor en
donde quedará alojado el sitio web y los elementos de la infraestructura web.
- Software: Son los programas y aplicaciones que se ejecutarán y realizarán las funciones y tareas del
sitio web que se ofrecen a los usuarios.
El software y hardware necesarios van a variar y esto dependerá de que tan complejas sean las funciones
y servicios que se incorporen al sistema.

4. CÉSAR SALAZAR RUIZ
Arquitectura de un sitio web
La arquitectura de un sitio web tiene tres componentes principales: un servidor web, una conexión de
red y uno o más clientes (navegadores).
El sitio web es el que ofrece es quien se encarga de la distribución de las páginas de información que los
clientes solicitan (navegadores), esto mediante una conexión de red y el uso del protocolo de http.
La información que se muestra se encuentra almacenada en archivos de html, que se encuentra
almacenada en una base de datos, las páginas son creadas dinámicamente, los sitios web que crean este
esquema se denominan sitios dinámicos.
Las plataformas tecnológicas más estandarizadas en la actualidad sobre las que se desarrollan la mayoría
de los sitios web son los siguientes:
- Arquitectura “Open Source”: Servidor Web Apache
- Lenguaje de programación de aplicaciones: PHP
- Bases de datos: MySQL
Arquitectura Microsoft:
- Servidor Microsoft IIS
- Lenguaje de programación de aplicaciones: ASP.NET.
- Bases de datos: Microsoft SQL / MySQL
Arquitectura Java:
- Servidor Web Tomcat.
- Lenguaje de programación aplicaciones: JSP.
- Bases de datos: soporta sistemas de varios fabricantes: Oracle, Microsoft SQL, etc.
Para cubrir estas necesidades se recurre a la contratación de empresas especializadas en servicios de
alojamiento, a través de las cuales por una cuota mensual, incluyen una infraestructura y mantenimiento
operativo del sistema y de la conexión a la red, una gran ventaja es que las empresas de alojamiento
ofrecen una amplia variedad de servicios y configuraciones de hardware y software.
En caso de que la organización quiera tener su propia base de datos, se tendrá que tomar en cuenta
otras cuestiones. Como el que ciertos componentes a utilizar requieren de licencias para su uso y esto

5. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB
tendrá un costo más para el proyecto, esto es lo que se denomina “tecnologías propietarias”, por ello
antes de seleccionar la plataforma, se deben de considerar los requerimientos del proyecto, además del
coste que tendrá. La selección de la plataforma a utilizar debe de venir de preferencia indicada por el
departamento de informática de la empresa para así mantener una infraestructura informática estándar para
todos los sistemas que den soporte al negocio además del sitio web.
Definición del sitio web
Arquitectura de la información
Es el conjunto de métodos y herramientas que permiten organizar los contenidos, para que sean
encontrados por los usuarios de manera simple y directa.
Los siguientes elementos constituyen la metodología de la arquitectura de la información, para así poder
lograr las metas de organización y visibilidad de los contenidos:
 Definición de Contenidos del Sitio
 Definición de la Estructura del Sitio
 Definición de los Sistemas de Navegación
 Definición del Diseño Visual
Definición de contenidos del sitio
Una vez conocidos los objetivos del sitio como la audiencia a la que irá dirigido, deben de decidir que
contenidos irán en el sitio web a desarrollar.
Inventario
La primer realizar dentro de la arquitectura de información es analizar e inventariar el contenido que le sitio
web ofrecerá a sus usuarios. Primero se debe de conocer cuál es el contenido del que se dispone, qué
volumen tiene, de qué naturaleza es y que contenidos son los más relevantes. Es hacer un listado de toda
la información contenida en el sitio web, junto a datos que la van a describir desde varias aproximaciones
como: tipo de audiencia a la que se dirige área organizativa propietaria del contenido para su
mantenimiento y actualización, tipo de plantilla de página que contendrá la información, etc.
Si el sitio web ya existe, entonces se estará hablando de un rediseño y en este caso se debe de analizar la
información que ya se encuentra en el, dentro del análisis se deberá de ver cuáles son los contenidos son
visitados con mayor frecuencia. Así se sabrá cuales son más relevantes para los usuarios, y entonces cuales
son los que conviene eliminar o modificar.

6. CÉSAR SALAZAR RUIZ
Identificar Requerimientos Funcionales
En la búsqueda e identificación del contenido del sitio web, también se debe de trabajar en lo que se
busca que el sitio “haga”, con esto se hace referencia a como se desea que el sitio web interactúe, como
formularios de solicitud de información, procesos de registro y suscripción, etc.
Clasificación
Es la tarea principal en el diseño de arquitecturas de información es la clasificación de los contenidos. Por
clasificación se entiende en crear grupos de contenidos similares y darle nombre a esos grupos, es decir
rotularlos o darles etiqueta.
Los tres esquemas principales de clasificación:
 Clasificación orientada a la audiencia: Si el sitio web tiene una audiencia definida y segmentable, y
cada uno de esos usuarios tiene necesidades diferenciadas, esta es la clasificación útil. Aquí los
contenidos se categorizan en función de sus usuarios. Es recomendable cuando todos los
contenidos pueden clasificarse en al menos en uno de los perfiles y las necesidades informativas
son diferentes entre sí.
 Clasificación orientada a la tarea: si lo que estamos categorizando no son contenidos informativos,
sino funcionalidades del sitio o aplicación web, o información de cómo utilizar estas
funcionalidades, las categorías deben estar orientadas a la acción y rotuladas en forma verbal.
 Clasificación temática: Los contenidos son clasificados por su similitud semántica, bajo rótulos o
categorías mediante sustantivos. Por ser una clasificación subjetiva puede que el usuario no
reconozca el significado o sea incapaz de predecir el contenido que está representado en el
rótulo. Para minimizar este problema se utiliza una técnica denominada Card Sorting o Agrupación
de Tarjetas.
Card Sorting
Facilita el acceso y la navegación a través de la ingente cantidad de información por medio de la ingente
cantidad de información que puede hospedarse en un sitio web, así se reduce la duda y desubicación
que pueden generar ciertos conceptos que son poco significativos o inconsistentes dentro de un sitio
web. Mediante estas pruebas se genera una estructura general para la información que contendrá el sitio
web.
Se hacen tarjetas en las cuales se escriben las principales áreas de contenido que ya se deben de tener
identificadas. Luego estas cartas se ponen sobre una mesa y se van agrupando hasta que se forman
conjuntos de elementos coherentes entre ellos y cada uno de los conjuntos recibe un nombre, el cual

7. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB
identificará todos sus contenidos. Con las agrupaciones hechas, se puede hacer el diagrama de árbol de
contenidos y así se podrá hacer el sistema de navegación.
Luego de hacer el etiquetado, se hacen comprobaciones de la validez de los nombre elegidos,
mostrándolos a personas de diversos orígenes y que tengan conocimiento de la organización y también
a quienes no tengan conocimiento de ella:
 ¿Qué significa este nombre?
 ¿Qué tipos de contenidos esperaría encontrar en esta área?
De acuerdo a las respuestas obtenidas se sabrá si los nombres que se han asignado son adecuados o no,
de no ser así, habrá que introducir modificaciones.
Análisis de Sitios Similares (benchmarking)
Finalmente se realiza una búsqueda de otros sitios web de que sean similares a la organización con la que
se está trabajando, para ver de qué manera ellos resolvieron los mismos problemas que nosotros
tengamos.
Así esta actividad dará la posibilidad de llegar a las buenas prácticas, para adaptarlas a las necesidades de
nuestro sitio, para que estemos seguros de métodos de funcionamiento y despliegue de contenidos que
sean coherentes con los objetivos que nos hayamos planteado al principio. Los análisis competitivos se
hacen a base de dos dimensiones básicas que son número de competidores y criterios de comparación.
Definición de la estructura del sitio
Luego de la identificación y clasificación de contenidos, se pasará hacia las definiciones relacionadas con
la forma que tomará el sitio web que se está trabajando. Esto implica el trabajo en tres áreas concretas, en
estas es en donde el sitio se definirá su estructura, el árbol de contenidos y sistemas de navegación que
ofrecerá a los usuarios para naveguen en sus contenidos.
Es importante tener en cuenta cuales son las diferencias entre estructura y diseño:
-Estructura: Es la forma que tendrá el sitio web en términos generales con sus secciones,
funcionalidades y sistemas de navegación. En el no se consideran los elementos gráficos.
- Diseño: Hace referencia a la solución gráfica
Entonces, cuando nos referimos de la estructura hablamos de la experiencia que tendrá el usuario cuando
entré al sitio. De esta manera podremos determinar donde estarán ubicados los servicios interactivos
(buscador, áreas de contenidos, formulario, etc.)

8. CÉSAR SALAZAR RUIZ
En este paso se puede discutir cual será la oferta de elementos de información e interacción que el
usuario tendrá, debido a la falta de elementos de diseño, se puede discutir acerca de la estructura y que
ésta se desarrolle en términos concretos, de manera independiente a cuestiones estéticas que pueden
retrasar la aprobación de esta etapa.
Creación de la estructura
La estructuración es una forma de clasificar la información, en ella los contenidos quedan relacionados por
agrupación. Con la estructuración se articulan relaciones, que pueden ser de contenidos o categorías de
contenidos, normalmente en forma de enlaces y vínculos hipertextuales. La estructura del sitio web se
refiere a las conexiones y las relaciones entre páginas, su topología.
La estructuración de un sitio web se puede dar de manera diversa, incluir dentro de ellas diferentes
estructuras y a su vez contener subestructuras.
Éstas son las estructuras más comunes:
Estructura secuencial: Las páginas se encuentran interrelacionadas de forma lineal. Es recomendable
cuando es necesario que el usuario complete cada uno de los pasos ordenadamente (carrito de compra,
registro como usuario, etc.)
Estructura hipertextual: El hipertexto es la base sobre la que se asienta la Web. Las páginas se enlazan por
similitud o relación directa entre los contenidos, permitiendo al usuario que se encuentra visualizando una
página 'saltar' hacia otras que le puedan interesar por contener información relacionada.
Estructura jerárquica: Las páginas se estructuran definiendo relaciones jerárquicas entre ellas. Es la estructura
de información más común en sitios web. Las estructuras jerárquicas se utilizan junto a las hipertextuales,
permitiendo al usuario una vez llegado a una página de una rama 'saltar' hacia páginas de otras ramas pero
relacionadas temáticamente con la página actual.
Mapa del Sitio
Es el proceso de crear un árbol de contenido en el que se muestre de manera práctica cuántas secciones
tendrá el sitio en desarrollo y cuántos niveles dentro de cada uno.
Exactamente es generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas
principales, secundarias y contenidos finales que se irán incorporando.
Se debe evitar a toda costa que el árbol de contenidos represente la estructura de la organización, dado
que ésta es conocida y comprendida internamente.
Consejos para la creación del árbol:
• Secciones: deben de ser las menos posibles, para concentrar las acciones del usuario en pocas
áreas, cada una de las áreas que requerirá de mantenimiento posterior en contenidos, gráfica y
funcionalidad, lo que encarecerá el costo final de operación del sitio.

9. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB
• Niveles: Se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que
anda buscando. Por ello no se debería crear más de tres niveles de acceso.
• Contenidos relacionados: Se debe considerar que habrá funcionalidades que estén presentes en
todo el sitio. Entre ellas: buscador, preguntas frecuentes y formularios de contacto. Este tipo de
elementos deben de quedar fuera del árbol y deben flotar sobre él.
Definición de los Sistemas de Navegación
Una vez hechos los árboles de contenido se deben de generar los sistemas de acceso a esos contenidos
en el sitio web. Por medio de ellos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse.
En la estructura arquetípica de los sitios web podemos identificar diferentes sistemas de navegación:
• Sistemas de navegación global: Son aquellos conjuntos de enlaces que estructuran el contenido
del sitio web en diferentes secciones principales. Orientan al usuario acerca de donde se
encuentra y qué otras secciones principales puede ver.
• Sistemas de navegación local: Ofrecer el acceso a las sub-secciones del sitio web. A veces
incluyen la clasificación de los productos o contenidos del sitio web.
• Sistemas de navegación contextual: Están integrados en el propio contenido, en apartados o
bloques de tipo “enlaces relacionados”, “noticias relacionadas”, es decir son aquellos sistemas que
permiten la navegación transversal.
Características de los Sistemas de Navegación
Un sistema de navegación debe de contar con las siguientes características:
• Consistente: Debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las
páginas.
• Uniforme: Debe utilizar términos similares para que el usuario confíe en que sus opciones llevan
siempre hacia los mismos lugares.
• Visible: Debe distinguirse claramente dentro del sitio, para que el usuario cuente con él, como si se
tratara de una guía permanente en el área en que se encuentre del sitio. Todas las páginas del sitio
deben de contar con el sistema de navegación.
Definición del diseño visual
Luego de realizar la estructura, se avanza hacia la generación del diseño visual de las pantallas del sitio,
aquí se dará uso a la documentación que se han ido
generando. Se trabajará en cuatro etapas sucesivas e incrementales.
1.Diseño de las Estructuras de Páginas: Wireframes

10. CÉSAR SALAZAR RUIZ
Los wireframes especifican la arquitectura y organización de los contenidos y navegación de cada página
o grupos de páginas. Vinculan la estructura subyacente del sitio web y su aspecto visual dando respuesta
a cuestiones como la forma y presentación de los sistemas de navegación y búsqueda, la ubicación de
los rótulos y la ordenación de los contenidos en una perspectiva espacial.
2. Diseño de interacción
Es la actividad y resultado de definir el comportamiento interactivo del sitio web. Son las acciones que se
ofrecerán al usuario en cada momento, y cómo responderá la aplicación a las acciones que realice.
Diagramas de flujo
Mediante ellos se representan gráficamente las posibilidades de acción que tiene un usuario enfrentado a
tomar una decisión en un Sitio Web. Los diagramas de flujo representan estructuras, los wireframes
representan pantallas y los diagramas de flujo representan lo que hace el usuario.
3. Bocetos de Diseño
Aquí se generan los dibujos digitales que tomarán la forma que tendrán en las páginas principales del sitio
que se desarrolla tales como portada, portada de sección y página de despliegue de contenidos. En esta
etapa se trabaja en software gráfico para facilitar el proceso de corrección.
4. Borradores de Página
Se toman los bocetos de diseño que hayan sido aprobados y se genera un prototipo mediante el
Para poder comprobar directamente la forma en que se desempeñan, cuando se les aplica la tecnología
HTML de construcción de páginas web.
Se usará el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la forma
de usar sus atributos y revisar la forma en que se despliegan las páginas que se van a desarrollar.
Construcción del Sitio Web
Maquetación HTML
En esta etapa corresponderá a la construcción del sitio y consiste en generar todo el sitio en tecnología
HTML con los elementos gráficos, imágenes y contenidos reales.
En un sitio dinámico, en esta etapa se generan las plantillas HTML que utilizarán los desarrolladores de
software para introducir la programación que generará los contenidos de cada página.
Programación
Se ha popularizado un tipo de software llamado Gestor de Contenidos CMS en inglés. Es un programa de
gestión preparado para manejar grandes cantidades de información y explotarla de manera organizada
aplicando procesos de edición, publicación y actualización de contenidos. Permiten también manejar la
estructura de la web permitiendo la optimización de las tareas de mantenimiento y actualización del sitio
web.
Se dividen en dos partes:

11. GUÍA PARA LA CREACIÓN DE PÁGINAS WEB
 Programación Front-end: Es la programación relacionada con el interfaz de usuario. Se programan
las plantillas HTML y se definen las áreas de contendido de cada una de ellas de modo que
posteriormente se pueda cargar la información que corresponda a cada área.
 Programación Back-end: se refiere a la programación y configuración del sistema de administración
y las bases de datos que soportarán la carga y publicación de los contenidos del Sitio Web.