DPW1_U2_Contenido

Introducción a la Filosofía

•

UNAM

Vitoria Garcés

24/8/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Introducción a la Filosofía

5254 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Desarrollo de Software
7º Semestre

Programa de la asignatura:
Programación web I

Unidad 2. Diseño de sitios web

Clave:
15144738

Ciudad de México, agosto del 2023

Universidad Abierta y a Distancia de México

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 2
Índice
Unidad 2. Diseño de sitios web .............................................................................................. 3
Presentación de la unidad ....................................................................................................... 3
Logros ................................................................................... ¡Error! Marcador no definido.
Competencia específica .......................................................................................................... 5
2.1. Fases de desarrollo web ................................................................................................... 5
2.1.1. Selección del tema ........................................................................................................ 9
2.1.2. Documentación y organización .................................................................................. 19
2.1.3. Mapa de navegación ................................................................................................... 29
2.1.4. Editores web ............................................................................................................... 33
2.2. Estructura HTML .......................................................................................................... 38
2.2.1. Etiquetas de HTML .................................................................................................... 41
2.2.2. Frames HTML ............................................................................................................ 50
2.2.3. Componentes de tablas y formularios en HTML ....................................................... 56
2.2.4. Elementos multimedia para HTML ............................................................................ 64
2.3. Estructura PHP .............................................................................................................. 71
2.3.1. Estructuras básicas en PHP ........................................................................................ 74
2.3.2. Operadores en PHP ..................................................................................................... 80
2.3.3. Funciones útiles para PHP .......................................................................................... 84
2.3.4. Librerías de códigos ................................................................................................... 89
2.3.5. Formulario activo en PHP .......................................................................................... 92
Cierre de la unidad .............................................................................................................. 100
Para saber más .................................................................................................................... 103
Fuentes de consulta ............................................................................................................. 104

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 3
Unidad 2. Diseño de sitios web

Presentación de la unidad

Es muy importante tener presente qué beneficios tiene contar con un sitio web, pues en la
actualidad ayuda a las organizaciones a darse a conocer a nivel internacional. Como se
mencionó en la Unidad 1. Fundamentos web, un sitio web se compone de varias páginas
web, ya sea estáticas o dinámicas, dependiendo de las necesidades de la organización. Los
sitios web por lo general son comunes a un dominio o subdominios de Internet.

Una página web es un documento electrónico que es elaborado con lenguajes de
programación (HTML, PHP, JavaScript, etcétera). Se entiende por desarrollo de sitios web
a la programación necesaria para construir un sitio, así como el diseño y desarrollo de
base de datos (Luján, 2002).

En esta unidad se expondrán las herramientas necesarias y el proceso para la construcción
de un sitio web.

Se expondrá la manera de hacer tus páginas en forma manual y mediante editores web,
tales como Dreamweaver, el cual es un editor web compatible con el sistema operativo
Windows y Macintosh. Dreamweaver es una marca registrada de Macromedia, Inc. En el
sitio oficial de Dreamweaver es posible descargar la versión de prueba de 30 días. Otro
editor web es BlueFish, desarrollo de código abierto de proyecto, liberado bajo la GNU
GPL licencia. Bluefish es una aplicación multiplataforma que funciona en la mayoría de los
sistemas operativos de escritorio, incluyendo Linux, MacOS-X, Windows.

Una vez construido el sitio web y colocado en Internet, es posible visualizarlo por medio
de navegadores web, tales como: IE Internet Explorer, Firefox, Google Chrome, Opera,
Netscape entre otros.
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 4

Internet Explorer y el logo Internet Explorer son marcas registradas de Microsoft
Corporation. Google Chrome y el logo Google Chrome son marcas registradas de Google
Inc., Mozilla Firefox, Firefox y el logo Firefox son marcas registradas de Firefox Foundation.
Opera es una marca registrada de la empresa Opera Software ASA.

Otras marcas que se mencionan en esta unidad son las siguientes:

Microsoft Access 2007, marca registrada de Microsoft Corporation.
Corel Draw, los logotipos y marcas registradas de CorelDRAW y Corel son propiedad de
Corel Corporation. Photoshop es una marca registrada de Adobe System Incorporated.

DIA es un editor de diagramas que puede utilizarse para hacer mapas de navegación, es
un software gratuito disponible bajo los términos de la Dia, la GPLv2. Macintosh es una
marca registrada de Apple Computer Inc., Safari y el logo Safari son marcas registradas de
Apple Computer, inc., Flash y el logo Flash son marcas registradas de Adobe Systems, Inc.,
JavaScript es una marca registrada de Sun Microsystems, Inc., Linux es una marca
registrada de Linus Torvalds. Microsoft Windows es una marca registrada de Microsoft
Corporation.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 5
Logros

Al término de esta unidad lograrás:

• Analizar los requerimientos de información de un caso específico para proponer el
diseño de un sitio web.

• Utilizar el lenguaje de programación HTML para estructurar el código de las
páginas web.

• Utilizar el lenguaje de programación PHP para integrar funcionalidad en el código
de las páginas web.

• Utilizar un editor web para crear las páginas que integran el sitio web.

Competencia específica

• Utilizar los lenguajes de programación para la construcción de un sitio web,
mediante el diseño de los requerimientos de estructura, navegación y
funcionalidad.

2.1. Fases de desarrollo web

En la actualidad una organización, pequeña o grande, necesita contar con un sitio en la
web. Por tal motivo en este tema aprenderás los pasos que debes seguir para desarrollar
un sitio web, así como los requerimientos de información específicos que se solicitarán a
una organización que requiera el diseño o su renovación.
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 6

Una organización puede requerir el desarrollo y mantenimiento de un sitio web, ya sea
para acceso a Internet o Intranet. Los requerimientos de desarrollo de un sitio pueden
variar en cualquiera de estos casos; por ello, debe plantearse el objetivo del desarrollo de
un sitio. Como primer paso, se debe tener una idea clara de los conceptos y objetivos
básicos.

Un sitio web, diseñado para el acceso a nivel Internet puede ser usado para diferentespropósitos, tales como la promoción, el anuncio y venta de productos y servicios de una
empresa.

Un sitio web diseñado para el acceso en Intranet puede ser utilizado para contener
información sobre las políticas de la organización y los detalles de clientes, así como
buscar información relevante, por ejemplo: el almacén, órdenes de compras,
comunicación entre las áreas para soporte técnico, etcétera (Corona, 2005).

Según Magal, Tortajada y Morillas (2006, p.111), el desarrollo de cualquier sitio web para
comunicación Intranet e Internet implica las siguientes fases:

• Planificación y definición del sitio
• Estructura de la información disponible
• Diseño
• Construcción
• Marketing
• Evaluación y mantenimiento
Para desarrollar un sitio web es muy importante, como primer paso, definir los objetivos
pues, “si no se cuenta con una idea clara de los conceptos y objetivos básicos de un sitio
web, el proyecto se convertirá en un cúmulo de problemas y despropósitos que obligarán
al diseñador a abandonar la idea o ideas iniciales en detrimento de un buen desarrollo por
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 7
sencillo que sea” (Magal, Tortajada y Morillas, 2006, p.111). Un proyecto exitoso de
desarrollo de un sitio web se garantiza cuando se cuenta con un claro juicio acerca de la
finalidad para la cual se está desarrollando, considerando que en la mayoría de los casos,
en el desarrollo de un sitio web participan profesionales con diversos perfiles, tales como:

• Expertos de contenidos: aportan y proponen información necesaria de acuerdo con el
tema del que se desea hablar. Un experto de contenido es importante para el
desarrollo de sitios web, ya que permite establecer los módulos o secciones.
• Expertos técnicos: se encargan de programar y construir el sitio web.
• Diseñador gráfico: aporta ideas, crea y proyecta mensajes a través de la imagen. La
imagen deben tener calidad en el color y buena resolución. Un diseñador gráfico
ayuda a que el sitio web cuente con calidad en la visualización de las imágenes y
recursos visuales que integren el sitio.
• Fotógrafos profesionales: cuando la empresa u organización a la cual estará dirigida el
sitio solicita que se muestre lo que es la empresa y lo que están promocionando, se
requieren imágenes a la medida de la misma organización, instalaciones o ejemplos de
sus actividades, etcétera, lo que se visualiza por medio de fotografías, por lo cual se
hace necesaria la labor de un fotógrafo profesional que capture imágenes con la
calidad requerida.
• Líder técnico: es el responsable de supervisar el trabajo de todo el equipo,
conformado por los miembros mencionados anteriormente.

En el caso de esta asignatura, es posible asumir primordialmente tareas de experto
técnico o encargado de la programación web.

En el subtema 2.1.1. Selección del tema se explicará la fase de planificación, así como la
definición del sitio web, con el fin de identificar el tema específico del sitio; es decir, la
planeación y el objetivo del sitio, integrando los elementos necesarios, o también llamada
identificación del mercado. Es posible realizar el sitio web para diversos tipos de
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 8
organizaciones, los cuales se revisaron en las asignaturas Estructura organizacional y
Gestión de tecnologías de información. Recapitulando, según su conformación económica,
puedes encontrar: micro, pequeñas, medianas y grandes empresas. Por ejemplo, el
proyecto de una empresa familiar puede estar dirigido hacia una microempresa o incluso
ofrecer soluciones de software mediante un sitio en Internet.

Una organización que desee su sitio web específicamente para el control de un área
funcional, como por ejemplo su almacén, de tal manera que el sitio web llevará el nombre
de almacén y de la organización, el del sitio se define en la etapa de planificación y
definición del sitio, si se requiere que se visualice sólo por Intranet o sólo algunos
elementos; por otro lado, puede que el sitio web sea para darse a conocer en el mundo.
La selección del tema incluye estudios de viabilidad, definición de objetivos y
especificaciones, evaluación de alternativas y selección de preferencias (Corona, 2005).

En el segundo subtema 2.1.2. Documentación y organización, una vez realizada la
selección del tema, se explicarán las fases del desarrollo de un sitio web, mediante las
cuales se estructura la información disponible para el desarrollo del sitio. Las fases son:
diseño, construcción, marketing, evaluación y mantenimiento. Identificarás en este
subtema cuáles son los requerimientos de una organización que pueden resolverse
mediante un sitio web, así como la información que se requiere solicitar a la organización
para el desarrollo del sitio, algunas estrategias para recolectar la información necesaria
que se requiere dar a conocer mediante el sitio web, y el orden en que debe localizar e
identificarse en el sitio. En esta fase se estructura la información necesaria para la
creación del sitio web, así como la adquisición de materiales diversos que se pueden
integrar por ejemplo imágenes, videos, música, etcétera (Corona, 2005).

En el tercer subtema 2.1.3. Mapa de navegación, se construirá un bosquejo de la
estructura de la organización de las páginas que conformarán el sitio web, la finalidad es
que se pueda acceder, de forma rápida, a una u otra página en el orden requerido, y así
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 9
lograr un sitio que ofrezca las características de calidad necesarias tales como
funcionalidad, portabilidad, fiabilidad, mantenibilidad, eficiencia, usabilidad (estas
características se revisaron en la asignatura Modelos de calidad de software) (Aubry,
2012). Existen programas automáticos para realizar la codificación mediante la cual se
construyen las páginas web, estos se nombran editores web y se expondrán en el
subtema 2.1.4. Editores web. Se explicarán los tipos y funcionalidad de estos editores.

A partir del estudio de los subtemas podrás realizar las fases para la construcción de un
sitio web, serás capaz de delegar tareas, planificar, gestionar recursos, motivar y encauzar
el liderazgo del proyecto de sitios web.
2.1.1. Selección del tema

Para iniciar con el desarrollo de un sitio web se deberá tener presente, en primer lugar,
cuál es el tema que se va a visualizar en el sitio; es decir, el contenido que tendrá el sitio
web para poder realizar la primera fase que es la planificación y definición, fase que
implica definir los siguientes aspectos:
• El objetivo y las metas que se pretenden desarrollar para la creación del sitio web, ya
sea a corto, mediano o largo plazo.
• El alcance de los contenidos con los que se construirá el sitio web.

En esta etapa de planificación y definición, antes de comenzar a construir el sitio, es
necesario realizar un análisis como un proceso mediante el cual se determinará
exactamente lo que se requiere; es decir, para determinar lo que se incluirá en el sitio.
Además, se debe realizar un análisis específico de cada página a lo largo del proyecto de
desarrollo de sitio web. El análisis del sitio, en la etapa de planificación y definición se
conforma de seis tareas principales (Mclire, 2009, p. 56):

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 10
1. Clarificar los objetivos de la empresa respecto al sitio. Se debe contar con una idea
clara de los objetivos de la empresa respecto al sitio web, algunas interrogantes de
análisis de estos objetivos son:
¿Cuál es la misión, la finalidad y los objetivos?
¿Quiere utilizarse el sitio para generar ventas?
¿Para vender directamente?
¿Para dar a conocer su producto o servicio sin venderlo u ofrecerlo en el sitio?
¿El sitio tiene como finalidad únicamente transmitirinformación de interés público de
algún tema específico?

Una vez identificados los objetivos, se deben jerarquizar por orden de importancia, por
ejemplo: en algunos sitios comerciales que se dedican a ofrecer productos electrónicos,
cuya venta se realiza desde el sitio web de la empresa, el objetivo primordial es realizar el
mayor número de ventas posible. Un objetivo primordial será el que la empresa considere
más importante.

Considerar la misión de la organización será de gran ayuda para contemplar otras
peticiones que no hayan sido planeadas y que se quieran integrar en el transcurso del
desarrollo del sitio. Algunas categorías básicas de objetivos de organización para sitios
web comerciales son, según Mclntire (2009):

Incrementar beneficios: categoría que integra la mayoría de sitios de comercio
electrónico que venden productos o servicios. Además de vender sus productos, un sitio
web puede incrementar sus beneficios desde otros aspectos, como el promover su imagen
de marca o disminuir los costos relacionados con la gran cantidad de llamadas que recibe
en su servicio de atención al cliente. El sitio web debe ofrecer al usuario un ambiente serio
y confiable.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 11
Propagar información: se refiere a sitios web cuyo objetivo es informar, educar, persuadir
o entretener; por ejemplo, “el sitio web de una empresa puede publicar un libro blanco
sobre las mejores prácticas en la industria del desarrollo de software, colaborando de este
modo con la industria y mejorando la imagen de la empresa” (Mclntire, 2009, p. 58).

Servir como interfaz de usuario para una aplicación empresarial: cada que se visita un
sitio web se interactúa con la interfaz de usuario del sitio, a la que también se le nombra
Front-end. Las aplicaciones empresariales clásicas, por ejemplo las utilizadas para
gestionar el inventario o para el área de contabilidad, suelen utilizar una interfaz gráfica
de usuario GUI (Graphic User Interface). La interfaz se construye dentro del software de la
aplicación, que es el que procesa las transacciones, y normalmente ha sido creada por un
programador junto con el resto de la aplicación.

BUI: es una interfaz de usuario de navegación (Browser User Interface). Se comunica con
el usuario a través del navegador, mientras que la aplicación empresarial Back-end (lógica
del negocio en el servidor) utiliza lenguajes de programación estándar como C++ o COBOL
para interactuar con las bases de datos subyacentes. Esta interfaz permite que una
aplicación empresarial, que no se distribuya de forma habitual por Internet pueda utilizar
un navegador para mostrar la interfaz de usuario. La ventaja de esta interfaz es que los
BUI son portátiles. “Si se programa bien un sitio, sus páginas se mostrarán correctamente
en todos los navegadores de destino o en cualquier sistema operativo. Sin embargo, la
mayoría de programas escritos en lenguajes de programación estándar han de ser como
mínimo recompilados, y puede que incluso reescritos, para poder ejecutarse en diferentes
entornos informáticos” (Mclntire, 2009, p. 59).

2. Identificar al público objetivo. Después de definir los objetivos del sitio, el siguiente
paso es definir a los visitantes potenciales. No se puede satisfacer las necesidades de un
público si no se sabe quién es ese público. En ocasiones será cuestión de sentido común,
otras requerirá una investigación seria y exhaustiva para conocerlo. Por ejemplo, si la
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 12
empresa que desarrollará el sitio se dedica a la venta de equipo de cómputo, no se puede
decir que el público objetivo es todo aquél que desea comprar computadoras, se debe ser
más específico.

Algunas de las interrogantes para identificar a al público objetivo son:
¿Quiénes visitarán el sitio con más frecuencia?
¿Cuáles son los datos demográficos del público objetivo en términos de ingresos, edad,
educación, estado civil y salud?
¿Qué problemas tienen?
¿Qué les gusta?
¿Qué necesitan?

Algunos aspectos que se requieren definir durante el proceso de estudio del público
objetivo son:
• Demografía física: género, rango de edad, estado de salud
• Aspectos culturales: contexto social en el que se encuentran el público objetivo
• Conocimientos informáticos
• Acceso al sitio: promoción del mismo
• Equipamiento informático
• Frecuencia de las visitas
• Localización del acceso
• Sitios de competencia
• Interno o externo
• Expectativas de diseño

3. Identificar los objetivos del visitante. Se considera que el visitante al ingresar a las
páginas, va en busca de lograr un objetivo, si las acciones que requiere realizar para
lograrlo se tornan complicadas, lo que sucederá con seguridad es que abandonará el sitio
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 13
y busque otro que le resulte más intuitivo, ante ello, se requiere analizar las necesidades
de los visitantes y generar las condiciones necesarias para facilitar el logro de sus objetivos
al visitar el sitio y con ello mantener una relación más constante y de larga duración con
él. Algunas interrogantes que pueden formularse para identificar los objetivos del
visitante son: ¿Cómo se traduce la satisfacción de un objetivo de la organización (por
ejemplo la venta de productos) en la satisfacción del objetivo del público usuario de
comprar algo? ¿Cómo se pueden conjugar los objetivos de la empresa con los objetivos
del público usuario? ¿Qué es lo que funciona bien para ambos?

Algunos aspectos a considerar para identificar los objetivos del visitante son según
Mclntire (2009):
• Crear espacios donde el usuario pueda integrar sus opiniones acerca del sitio
mediante entrevistas, encuestas u otras herramientas de recopilación de
opiniones,
• Analizar los sitios de la competencia.
• Documentación paso a paso de la secuencia de interacciones que debe completar
el usuario para realizar una tarea, presentada desde el enfoque del usuario,
incluyendo el escenario general y otros adicionales con rutas alternativas por si hay
dificultades o si la tarea tiene un componente inusual de manera que se busque
siempre la forma de agilizar el proceso completo.

4. Determinar las restricciones del sitio. Mediante el análisis de un sitio se pueden
determinar requerimientos y restricciones, sin embargo, es necesario ajustarse a un
presupuesto y a un calendario aspectos que son las principales restricciones en la
elaboración de un sitio, y considerando que lo ideal es que el sitio proporcione valor en
relación con su costo, que esté completo y en operación en un periodo de tiempo
establecido y que sea de buena calidad.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 14
El análisis de costo beneficio es esencial para definir las restricciones en el desarrollo de
un sitio, siempre se desea que el costo invertido sea proporcional a los beneficios
obtenidos, para ello, es necesario analizar los requerimientos esenciales y recortar los que
no lo son.

Es importante también considerar si se tiene que entregar el proyecto completo o se
puede entregar por fases, quizás la entrega de los elementos más importantes antes que
los menos prioritarios ayude a ganar tiempo y no sacrificar la calidad por el tiempo en el
cual se solicita entregar.

Otras restricciones legales, operacionales, técnicas y de diseño, legales por ejemplo, si una
organización desea inversionistas, en el sitio hay restricciones legales sobre lo que se
puede o no difundir.

De operación por ejemplo, cuando se deba acceder a bases de datos que esté
administrada por distintas empresas observando restricciones de operatividad en el
acceso a los datos. En cuanto a diseño, se pueden presentar restricciones por ejemplo si
se debe utilizar un tipo de marca o logotipoque implica utilizar cierta de gama de colores
o imágenes. En cuanto a las técnicas, el mismo entorno tecnológico en el que se crean y se
difunden los sitios presenta algunas restricciones que no permiten realizar acciones que se
deseen por ejemplo.

5. Determinar el contenido del sitio. El contenido es la parte principal de un sitio, un buen
contenido, garantiza que el usuario siga frecuentando el sitio, si se encuentra con
contenido que no es confiable, no está sustentado o no es de valor, decidirán no regresar.
“La regla básica del marketing es que cuesta cinco veces más venderle algo a un cliente
nuevo que a un cliente que ya ha comprado antes” (McIntire, 2009, p. 65). Ante ello, se
debe considerar la importancia de presentar contenido confiable, sustentado y claro
cuidando la redacción. Para calcular el comportamiento del ingreso del cliente se dice que
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 15
se analiza la tasa de rotación y de conversión, “la tasa de rotación de clientes es el número
de visitantes que no se convierten en clientes o que compran una sola vez, la tasa de
rotación es inversamente proporcional a la tasa de conversión que es el porcentaje de
visitantes que compran algo antes de salir del sito y se desea aumentar la tasa de
conversión y minimizar la de rotación” (ídem).

6. Definir la arquitectura del sitio. Consiste en la “la organización de la información y la
navegación dentro de un sitio web” (Op. cit.p. 69) y es el centro de gravedad de todos los
elementos del sitio, considerando que deberá cada vez adaptarse a nuevos
requerimientos, debe ser flexible y tener la capacidad de crecer. La arquitectura del sitio
comprende los siguientes elementos según McIntire (2009):
• Contenido o fragmentos de información.
• Relación de los fragmentos individuales, es decir, la estructura lógica que los une
con un sentido.
• El sistema de navegación utilizado por los usuarios para navegar en esa estructura
lógica.

En la fase de planeación se recomienda realizar un diagnóstico; para ello, es
recomendable que revises el documento Test diagnóstico en la sección Material de apoyo,
donde encontrarás los planteamientos que se deben considerar en la fase de planeación
de un sitio web.

Según Magal, Tortajada y Morillas (2006, p.112), los sitios web pueden englobarse en
diversas tipologías aunque la más utilizada por las pequeñas y medianas empresas son las
siguientes:

Sitios web promocionales de la empresa: son sitios web con mínima interactividad con el
usuario, ya que su objetivo es mostrar información general de la empresa y ofrecer un
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 16
formato de diseño gráfico. En estos sitios se ofrecen los datos de la empresa u
organización, tales como correo electrónico, teléfonos y dirección de contacto.

Sitios web funcionales para la empresa de forma interna, Intranet: son sitios creados por
las empresas para dar servicios internos a sucursales, socios, trabajadores, y personas con
acceso mediante clave, cuya funcionalidad se encamina a mejorar el servicio interno o
externo. Requieren bases de datos importantes para el control de chequeo y seguridad de
datos.
Sitios web funcionales para la empresa de forma externa: son creados para varios tipos
de perfiles de clientes externos, y que dispone de muchas funcionalidades e interacciones
con la empresa, ya sea a través de formularios, claves de accesos, chat, etcétera.

En el estado preliminar de planificación y definición, se debe realizar un chequeo de
objetivos, finalidades y, ante todo, recopilar el material disponible necesario para la
consecución del proyecto. Esta planificación es muy importante para tener claro, en todo
momento, de qué material se dispone y qué puede hacer falta (Magal, Tortajada y
Morillas, 2006).

De acuerdo con las necesidades de la empresa y el contenido que conformará el sitio, se
realiza un análisis para determinar el nombre que indique, quizás, el de la empresa o el
área funcional a que está dirigida. A continuación se realiza la planificación, fase donde se
plantea el objetivo del sitio. Estos son dos puntos importantes para iniciar con el
desarrollo de un sitio web.

Es importante que consultes algunas preguntas que apoyan el análisis, planificación y
logro del objetivo de un sitio web en el documento llamado Test diagnóstico (Magal,
Tortajada y Morillas, 2006).

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 17
Una técnica apropiada para seleccionar el tema de una página web es la tormenta de
ideas, tal como expresa Mariño (2005):

El proceso creativo de buscar un tema para el diseño debe abordarse en cuanto
sepamos responder a las preguntas: qué, a quién, para qué, etcétera. El tema
principal es el mensaje que se quiere comunicar, pero puede ser tratado desde un
punto de vista creativo. El mensaje debe ser claro, fácil de entender, relevante y
distintivo, y debe estar en consonancia con la identidad de la marca. También debe
ser original y creativo para llamar la atención de la audiencia.

Las tormentas de ideas (brainstorming) consisten en reuniones donde se aportan
ideas sin parar, se anotan sin valorar y sin coartar a nadie. La idea es generar
muchas ideas por descabelladas que puedan parecer. Solo después de la tormenta
de ideas se repasarán las anotaciones con las ideas aportadas y se analizarán,
buscando una que funcione. Se pueden lograr resultados por una idea o por
combinación de varias (p. 195).

Ejemplo de selección de tema:

En un hospital se tiene una línea de compras para que sus áreas puedan solicitar a
recursos materiales sus requerimientos, desde papelería hasta artículos de limpieza. Esta
línea de compras está realizada en Microsoft Access 2007, donde sólo pueden acceder
ciertos usuarios. Se observó que no se administraba en forma adecuada, ya que no se
contaba con un catálogo de productos y proveedores con posibilidades de editar los
datos, además de que se observó que las clasificaciones de los productos se encontraban
mal ordenadas.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 18
Ante esta problemática, se requiere implementar una línea de compras a la cual sólo
puedan acceder usuarios permitidos; se requiere crear catálogos de clases de producto y
proveedores con una administración más fácil, completa y sencilla.

Objetivo de la línea de compras: validar una línea de compras para administrar los
requerimientos de las diferentes áreas del hospital.

Metas de la línea de compras:
• Conocer y ajustar el control de la línea de compras que se tiene en el hospital.
• Establecer un login de usuario para acceder y administrar la línea de compras como
parte de un control de seguridad.
• Efectuar cambios en los catálogos clase de productos, productos y de proveedores.
• Generar alternativas contundentes e innovadoras para la gestión de la línea de
compras a través de una base de datos.
• Enviar la línea de compra por correo electrónico al encargado de compras.

Alcance: se dispone de los recursos necesarios para llevarla a cabo. Se buscará la
conveniencia de las autoridades del hospital seleccionado para realizar el estudio. Así
mismo, se obtendrá el apoyo del encargado de compras que busca elevar una
administración clara y ordenada, lo cual facilitará la recolección de los datos. Por otro
lado, es importante que los jefes de esta línea de compras otorguen su consentimiento
para efectuar cambios que respondan a sus necesidades, se hará con la disposición de
estos últimos, quienes constituyen la fuente de los datos.

Para la construcción del sitio web, se observa que es un sitio funcional para la empresa de
forma Intranet, ya que el hospital quiere llevar el control de sus requerimientos de
materiales que soliciten sus áreas; por otro lado, elnombre del sitio web será Sistema de
Línea de Compras, porque el principal objetivo es administrar los requerimientos de
compras de los diferentes departamentos que conforman la empresa.
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 19

En este subtema identificaste la fase planificación y definición del sitio web, lo que te
ayudará a proponer ideas a la empresa de acuerdo con sus necesidades, solucionar
problemas y realizar mejoras del sitio web. Con el fin de sistematizar y organizar la
información necesaria para realizar el sitio web, existen diversas estrategias que se
revisarán en el siguiente subtema.

2.1.2. Documentación y organización

En este subtema se revisarán las fases de desarrollo de un sitio, correspondientes a la
estructura de la información disponible, diseño, construcción, marketing y
mantenimiento. Mediante estas fases, se definirá el contenido que conformará el sitio, el
número de páginas y el orden de acceso a cada página web, así como las herramientas de
hardware y software requeridas; es decir, se organizarán todos los elementos necesarios
para la construcción del sitio web. Después de la planificación y definición del sitio, el
siguiente paso en el desarrollo es dar estructura a la información.

Estructura de la información. Se refiere a la organización de los contenidos disponibles
que se deberán hacer accesibles al usuario “adaptándolos a las pautas de un canal
comunicativo como es un sitio web” (Magal, Tortajada y Morillas, 2006, p. 115). Esto
significa que será necesario inventariar los contenidos existentes o disponibles y que han
sido facilitados por la empresa. En caso de que falten, se requiere crearlos o solicitarlos
para realizar la estructura organizativa de los apartados informativos que estarán
disponibles en el sitio.

Según Magal, Tortajada y Morillas (2006), los apartados que usualmente se utilizan en la
fase estructura de la información son:

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 20
• Descripción detallada del diseño. Por ejemplo, texto, editado y corregido.
Especificaciones de diseño gráfico mediante plantillas de la apariencia
finales del sitio web, especificaciones del estilo gráfico (fuentes tipográficas,
colores, etcétera), ilustraciones y fotografías, audio y video. Para realización
del diseño hay herramientas para la edición y creación de imágenes como
Corel Draw, Adobe Photoshop. etcétera.
• Descripción detallada de los contenidos. Se refiere a toda la información,
elementos y recursos que conformarán el sitio web (imágenes, tablas de
contenido, música, texto, bases de datos etcétera).
• Especificación detallada de los recursos técnicos. Se refiere a la
planificación de los recursos hardware y software necesarios tales como:
tipos de navegador, velocidad de conexión, acceso vía Intranet o Internet,
personal desarrollador de software de programación web, recursos del
servidor y servidor web.
• Calendario de implementación del diseño y su construcción.
• Uno o varios prototipos de páginas concretas. Se refiere a la
implementación de páginas mediante códigos de programación realizados
con un editor web HTML, PHP, Javascript, ASP, etcétera (p.115).

La definición de todos estos elementos será una pauta para establecer los costos y
compararlos con el presupuesto programado para el desarrollo del sitio web, así como el
tiempo para definir si se trata de un proyecto a corto, mediano o a largo plazo, lo cual será
definido bajo un contrato, si el desarrollo se realizará por una empresa externa
(outsourcing) por otro lado, si la empresa tiene su área de informática y tienen su
desarrollador web, los costos y el tiempo se establecerán de acuerdo con las condiciones
de la empresa.
Fase de diseño del sitio web. Para diseñar una página web, es necesario considerar los
aspectos técnicos y de presentación o aspectos estéticos del sitio. Respecto a los aspectos
técnicos, se encuentra lo que se refiere al tamaño de los archivos o pixeles que conforman
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 21
una imagen; entre los aspectos estéticos, la ubicación del texto, “las imágenes y los
espacios vacíos en la página para crear áreas de interés. En el diseño y recursos gráficos e
imágenes, espacios imágenes y los espacios vacíos en la página para crear áreas de
interés. En el diseño Web, en especial, los temas técnicos y de presentación o estéticos
están muy relacionados. No es posible diseñar una página atractiva sin comprender
primero las limitaciones técnicas del medio (Mclntire, 2009, p.133).

• Consideraciones técnicas. Es importante para el diseño de un sitio web, considerar
los aspectos técnicos que se requieren, los sistemas que utilizará el público
objetivo, algunos factores técnicos que se deben considerar para el diseño del sitio
con el fin de determinar el tamaño de los archivos y la resolución que se debe
utilizar en el diseño , son los siguientes:
o Velocidad de la computadora donde se realizarán las páginas que conformarán
el sitio.
o La resolución de la pantalla que se utiliza.

o Tamaño de los archivos. El tamaño total del sitio se refiere al total de archivos
que lo conforman, incluidos los archivos HTML, CSS externos, JavaScript
externos, imágenes, sonidos y videos. De todos ellos, los de imagen, sonido y
video generalmente son los que presentan problemas al descargarse por su
gran tamaño. Entre mayor sea el tamaño total del sitio, más tiempo necesitará
una página web para descargarse y mostrarse en la pantalla del equipo del
usuario.

Hasta el momento, no hay un tamaño de sitio web que pueda considerarse ideal; sin
embargo, un aspecto importante a considerar respecto a los archivos a incluir en el sitio es
el público objetivo. Si tiene conexiones lentas a Internet o no es muy paciente, se debe
dejar a un lado los gráficos y ajustarse al límite de la conexión. Si la mayoría de los
usuarios tiene una conexión a Internet de banda ancha, como el ADSL o una Intranet, es
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 22
posible utilizar archivos de gran tamaño. En México se cuenta con la segunda banda ancha
más lenta de América Latina, a excepción de Argentina. De los ISP de Internet en México
que proveen la conexión, pueden variar desde 2 megabits hasta dependiendo de las
necesidades de cada usuario.

La fase del diseño de un sitio web, es un proceso que se conforma de las siguientes
etapas:
Diseñar las plantillas maestras o las guías de estilo formal. Esto se define como normas
establecidas para el diseño del sitio web, ya que será de uso general para la empresa,
sobre la cual se trabajarán las diversas páginas que conforman el sitio.
• Recopilar, crear, solicitar el material gráfico a la empresa o clientes, como fotos,
información, ilustraciones, audiovisuales.
• Escribir, organizar y editar los contenidos en formato texto.
• Establecer los elementos de programación, diseño, entrada de datos, base de datos
etcétera.

Finalmente, se dispondrá así de los componentes necesarios para crear las diferentes
páginas web.

Los componentes del contenido más usuales en esta fase, de acuerdo con Magal,
Tortajada y Morillas (2006, pp.116-117), son los siguientes:

• Textos editados y corregidos. Es recomendable revisar el documento Tipografía en la
sección Material de apoyo donde encontrarás algunas recomendaciones para
seleccionar los tipos de fuente en páginas web.
• Especificaciones de diseño gráfico mediante plantillas de la apariencia final de las
páginas. Revisa algunas recomendaciones para el uso de gráficos en las páginas web
en el documento Gráficos en la sección Material de apoyo.
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 23
• Especificaciones del estilo de gráfico (fuente tipográficas, colores etcétera). Para
revisarrecomendaciones sobre el uso del color. Consultar el documento Color en la
sección Material de apoyo.
• Diseño de la interface y la navegabilidad entre páginas.
• Ilustraciones y fotografías.
• Audio y video.
Los componentes lógicos y funcionales, desde el punto de vista informático, más usuales
en esta fase de diseño del sitio, según Magal, Tortajada y Morillas (2006, p.116), son los
siguientes:
• Tablas de programación y base de datos
• Motores de busqueda diseñados y comprobados

Se dice que un diseño es consistente cuando todos sus elementos visuales y sonoros
reciben el mismo tratamiento. Por ejemplo, si se utiliza un botón con una finalidad y
comportamiento concretos, no se podrá hacer uso del mismo botón para un fin distinto,
aun cuando éste se encuentre en páginas diferentes del mismo sitio web. Se dirá que un
diseño es consistente cuando todos sus elementos visuales y sonoros reciben el mismo
tratamiento. Por ejemplo, si se utiliza un botón con una finalidad y comportamiento
concreto, no se podrá hacer uso del mismo botón para un fin diferente, aunque éste se
encuentre en páginas diferentes del mismo sitio web.

Página de inicio. Es el portal de ingreso al sitio. Su objetivo primordial es dar a conocer los
contenidos y la forma de acceder a ellos. “Las áreas de contenido deben estar destacadas.
Es conveniente mostrar al menos un poco de contenido real en la página de inicio, y no
sólo el sistema de navegación, para que los usuarios se hagan una idea más clara de lo que
encontrarán en el resto del sitio” (Mclntire, 2009, p.166).

Principios de usabilidad a considerar para el diseño de los sitios web. Están dirigidos a la
satisfacción del usuario; es decir, analizar lo que hace que el usuario permanezca en el
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 24
sitio y regrese a él en el futuro. Según Mclntire (2009, p.166), se consideran como factores
de usabilidad los siguientes:

Evidencia: el sitio debe ser fácil de utilizar. Si el usuario se encuentra con sitios
complicados o explicaciones muy largas en pantalla, puede abandonar el sitio; es
necesario adoptar un estilo de organización, presentación e interacción coherente y
predecible.
Velocidad: es necesario considerar que, en México, aún se siguen utilizando conexiones
telefónicas con módems lentos; ante ello, se recomienda limitar el tamaño de los archivos,
así como simplificar los clics necesarios para ingresar o abrir un recurso, pues cada página
implica cargar nuevos datos; por ello, se necesita establecer un sistema de navegación
claro y conciso para que el usuario no se confunda y no pierda tiempo, “lo ideal es que el
usuario pueda llegar a su objetivo con tres clics de ratón como máximo” (Mclntire, 2009,
p.39).

Retroalimentación: si el usuario necesita esperar por algo, es necesario informarle; por
ejemplo, una animación que ilustre el proceso de carga puede indicar que el sistema está
procesando algo y no se ha bloqueado. Establecer comunicación con el usuario es
importante para que en todo momento tenga la certeza de lo que está sucediendo en la
página.

Exactitud: se debe cuidar que no existan vínculos rotos, imágenes perdidas, errores de
programas, etcétera. Se debe asegurar que todos los recursos del sitio funcionan
correctamente. Es recomendable probar el sitio en diferentes navegadores y versiones de
navegador.

Todos los elementos estéticos o de presentación y de interacción que se integran en un
sitio web determinan la usabilidad.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 25
Fase de construcción
En esta fase se realiza lo que ya está plasmado en la de diseño; por lo cual, como su
nombre lo dice, es construcción del sitio web. En esta fase, se realiza la programación de
acuerdo con el diseño, con base en las estrategias que se planea en el mapa de
navegación, y después utilizando herramientas que permitan la construcción como por
ejemplo: editores web, software de edición de imágenes.

Organización de la información por medio de carpetas:
• Crear una carpeta que llevará el nombre del sitio, y dentro de esa carpeta se
guardarán todas las páginas web que lo conformarán.
• Crear otras carpetas donde se guardarán exclusivamente recursos audiovisuales
que integrarán el sitio: imágenes, música, videos, una carpeta por cada archivo.
Estas carpetas están dentro de la carpeta principal.

A continuación, se muestra una imagen de almacenamiento de archivos, como imágenes,
música, videos y las páginas web que componen un sitio web.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 26
Ejemplo de almacenamiento del contenido que conformará un sitio web

Marketing. Un sitio web es una parte de la imagen de la empresa de cara al exterior, y es
un aspecto que debe considerarse en constante actualización a nivel de diseño gráfico y
publicitario. Por lo tanto, puede ser parte integral de todas las campañas de una empresa.
La dirección URL de la web y la funcionalidad de la comunicación con el usuario (email,
formulario, etcétera) deberán formar parte de la correspondencia y elementos de
marketing de una empresa. Se pueden encontrar oportunidades de promoción cruzadas a
negocios afiliados.

Mantenimiento de sitios web. Respecto al mantenimiento, es conveniente no abandonar
la web una vez haya funcionado por un criterio de coherencia. Al crear una web debe
asumirse de inicio un mantenimiento y seguimiento mensual, bimestral, trimestral,
cuatrimestral, semestral, anual, etcétera. Esto depende de la empresa de cada cuánto
desea que se actualice su sitio web. Claro, realizar mantenimiento es un costo donde se
incluye las actualizaciones del sitio.

Evaluación. Existen varias técnicas para la evaluación de sitios web, pero una de las más
asequibles y rigurosas es la evaluación por expertos, basada en los principios de
usabilidad (evaluación heurística), como los siguientes:
• Test de usuarios
• Observación de los usuarios y registro de su comportamiento con relación a
determinadas tareas previamente recomendadas, mediante un informe sobre la
usabilidad de un sitio web.
• La evaluación heurística hace referencia a la evaluación del sitio por parte de
expertos, basándose en los principios de usabilidad, es uno de los métodos más
informales, pero que se considera como uno de los principales por su excelente
relación entre la calidad y costo (Magal, Tortajada y Morillas, 2006).

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 27
El contenido de un sitio web se organiza en una serie de secciones que facilitan su
búsqueda y localización. Como expresa Luján (2002) “los contenidos comunes son
aquellos que se pueden encontrar en la mayoría de los sitios web pertenecientes a una
misma categoría” (p. 63). Por ejemplo:

Los sitios dirigidos a las grandes organizaciones, en su mayoría cuentan con los siguientes
apartados:
• ¿Quiénes somos?: se conforma de información sobre los datos generales de la
empresa tales como ubicación, a qué se dedica, etcétera.
• Información de contacto: es para integrar datos de comunicación con la empresa,
tales como dirección, teléfonos, correo electrónico y fax para que los usuarios
puedan tener comunicación con la empresa.
• Historia de la organización: muestra los datos acerca de los antecedentes de la
empresa, fecha en la que se fundó y sus reseñas históricas desde se fundación
hasta la actualidad
• Objetivos: finalidad, misión, visión.
• Cartera de clientes: sirve para tener un control de todos sus clientes.
• Productos o servicios: muestra todos los productos o servicios que ofrece la
empresa.
• Compras: plantea cuando la empresa u organización desea facilitar a sus clientes
las compras.

La mayoría de los sitios de publicaciones periódicas contienen los siguientes apartados:
• Editorial
• Noticiasinternacionales
• Noticias nacionales
• Deportes
• Otros
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 28

Sitios de instituciones educativas: varían los apartados según necesidad de cada
institución, pero la mayoría de estos sitios contiene los siguientes apartados:
• Planta académica
• Planta administrativa
• Estudiantes
• Planes de estudios
• Investigación
• Administración escolar
• Horarios
• Otros

En este subtema se explicaron las fases de desarrollo de un sitio web, la forma en que se
puede estructurar la información disponible, diseño, construcción, marketing y
mantenimiento, lo que te permitirá elaborar una primera etapa de tu sitio.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 29
2.1.3. Mapa de navegación

Es muy importante, para la realización de un sitio web, que se plasmen y organicen las
ideas y el orden de las interfaces. Esto se refiere a la visualización de las páginas. En este
subtema se define el tipo de navegación y la interacción con el usuario para el sitio web.

Como expresa Arinyo (2000), el “mapa de navegación es conocido también como modelo
de navegación. Los modelos de navegación obtenidos como resultado, pueden seguir una
estructura narrativa lineal, una estructura jerárquica o una combinación de ambas” (p.
172), como se observa en la siguiente imagen:

Modelo de Navegación. Fuente: Arinyo, 2000, p. 172.
En la imagen anterior se muestra un mapa de navegación, también conocido como
modelo de navegación. Las flechas indican el orden en el que se navegará en el sitio web,
así como la página a la que se avanzará; las letras representan el nombre de la página web
y el contenido que llevará; por lo cual, muestra el cómo se conformará el sitio web. Las
aplicaciones no suelen tener un flujo de datos y navegación lineal, por lo que se hace
obligatorio crear un mapa de navegación donde se muestren las conexiones y los flujos.
Según Quero, García y Peña (2007), los mapas de navegación se dividen en dos tipos:

Mapa general: “se utilizan para ofrecer una visión global de todo el proyecto y mostrar
todos los flujos y enlaces que existirán entre las diferentes pantallas” (Quero, García y
Peña, 2007, p.218). A continuación, se muestra en forma gráfica la forma en que se
estructura:
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 30

Mapa general. Fuente: Quero, García y Peña, 2007.

Mapa parcial: “Se utiliza para describir con detalle una zona concreta del mapa general.
Sirve para ver el comportamiento individual de una pantalla. Una de las funciones que
obtenemos con estos mapas es la de establecer el tránsito entre pantallas. Para detallar
con más precisión los posibles caminos de navegación” (Quero, García y Peña, 2007, p.
218), tal como se observa en la siguiente imagen:

Mapa parcial. Fuente: Quero, García y Peña, 2007

A continuación se muestra un ejemplo de un mapa parcial de navegación de un sitio web:
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 31

Ejemplo de mapa de navegación parcial llamado Línea de compras. Fuente: Quero, García y Peña, 2007.
El objetivo principal de la elaboración de un mapa de navegación es llevar un orden en la
construcción de las páginas web; es decir, el orden en que se visualizarán las páginas web
en el sitio, ya que permitirá organizar todas las páginas. En el mapa de navegación de la
imagen anterior, se puede observar que la página de inicio será un menú con tres
opciones:

• Línea de compras
• Control de compras
• Administrador

La primera página web estará elaborada con el lenguaje de programación HTML, indicada
en el ejemplo como Menú índex.htm. Recuerda que dependiendo de las necesidades de la
empresa y las características de los lenguajes de programación (PHP permite la realización
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 32
de bases de datos y HTML el formato de las páginas web), en cada una de las páginas web
que integran el sitio, como se observa en el ejemplo anterior de mapa de navegación
parcial, se integran más páginas web vinculadas, y se señala qué tipo de lenguaje de
programación se utilizará en la elaboración de cada página. Esto se identifica por la
extensión .html o .php, dependiendo del lenguaje de programación que se utilizará. Para
la elaboración del mapa de navegación no se necesita un software específico; se puede
realizar en un editor de texto o un programa de elaboración de cuadros conceptuales, de
diagramas o gráficas. Un programa de software que se recomienda por ser libre se llama
DIA, este software facilita la elaboración de mapas de navegación, pero es opcional utilizar
cualquier software que permita realizar mapas de navegación.

A la primera página web se le da el nombre de index, esto significa que cuando se suba el
sitio web en automático reconocerá con este nombre que es la página de inicio para la
construcción de tu sitio.

Una vez que se ha organizado la estructura del sitio web mediante en mapa de
navegación, es posible saber cuántas páginas se deberán elaborar, el tipo de contenido
que se integrará en cada una de ellas, así como el orden en que se deberá estructurar el
sitio. Es el momento de realizar el desarrollo de las páginas mediante los lenguajes de
programación, esta codificación de las páginas se realiza de dos formas. Una que es muy
recomendable porque te permite conocer a detalle el comportamiento de los códigos de
cada uno de los lenguajes, es la realización personalizada de la codificación mediante
algún editor de texto plano tales como: blog de notas, Word, Font page. La otra forma es
la utilización de editores web, la cual es una forma muy práctica para lograr realizar gran
cantidad de páginas en menor tiempo; sin embargo, se recomienda adquirir destreza para
la programación de las páginas mediante las dos formas. A continuación se revisarán
algunos de los editores web que existen y que son los más comunes.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 33
2.1.4. Editores web

El desarrollo web es un “proceso de creación y mantenimiento de páginas web,
generalmente para ser parte de un sitio web disponible en la Word Wide Web, a las
personas que realizan este proceso se les nombra desarrolladores web o webmasters”
(Equipo Vértice, 2010, p. 30). El proceso de creación de las páginas web se puede realizar
mediante la edición en texto plano de las etiquetas HTML; es decir, en forma manual, esto
es muy recomendable cuando se está en el proceso de conocimiento del comportamiento
de los lenguajes, ya que ello permitirá al web master:
• Realizar cambios en el código de programación que genera el editor web, ya que
cuando se sube un sitio a la web sea por Internet o por Intranet, hay situaciones donde
no se visualiza correctamente el sitio en comparación con la forma en que se
visualizaba antes de subirlo; y para hacer los cambios no se utiliza el editor web, se
tiene que ver el código y hacer los cambios manualmente, por lo que es muy
importante saber utilizar los lenguajes de programación.

• Saber cómo se genera el código de programación web en el editor web porque suele
suceder que, al subir el sitio a Internet, éste puede tener algunas fallas, por ejemplo,
que no se visualice algún contenido o un recurso, y el editor web no puede abrirse.
Sólo se podrá identificar el error desde el código de programación, por lo que, para
identificarlos, es necesario estar familiarizado con el código.

Los editores web, son una opción para el desarrollador de las páginas, se trata de
programas que generan automáticamente el código HTML, son “editores especializados
en manejar las etiquetas, de manera que el desarrollador se concentre en el diseño” más
que en el cuidado de las etiquetas (Equipo Vértice, 2010, p. 30).

Un editor web se define comoaplicaciones de software que sirven para desarrollar
páginas web (Krug, 2001). Los primeros sólo permitían editar código HTML. Actualmente,
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 34
ya cuentan con un soporte integrado para otras tecnologías como CSS, JavaScript, PHP,
IPS, HTML5, Jquery, etcétera (Equipo Vértice, 2010).

Los editores web más utilizados en la actualidad son Dreamweaver y Bluefish.
Dreamweaver es la herramienta de diseño de páginas web más avanzada en la actualidad,
y presenta las siguientes características:
• Cuenta con gran cantidad de tecnologías web para la creación de páginas; por
ejemplo, hojas de estilo, el lenguaje de programación ASP, html5, lo que permite
diseñar páginas con aspecto profesional y soportar gran cantidad de tecnologías,
además de integrar características de usabilidad.
• Permite generar una gran cantidad de páginas web.
• Es un software por el cual se tiene que pagar licencia, pero cuenta con una de prueba
que dura 30 días. Este editor es compatible con los sistemas operativos Windows y
Mac.

Bluefish es también un potente editor que cuenta con muchas opciones para escribir
páginas web, scripts y código de programación web. Es una aplicación multiplataforma
que funciona en la mayoría de los sistemas operativos de escritorio, incluyendo Linux,
MacOS-X y Windows. Es similar a Dreamweaver, con la diferencia de que éste sí es
compatible con el sistema operativo Ubuntu, Windows, y Mac. Es un editor web libre
gratuito (Sessink, 2013).

Otra diferencia entre Bluefish y Dreamweaver es que este último es más fácil de usar; es
decir, es más intuitivo que Bluefish. Es muy importante que instales en tu equipo un editor
web para la elaboración de tu sitio, mismo que irás realizando en esta unidad, y que
concluirás en la unidad 3. Si instalas Dreamweaver, toma en cuenta que el periodo de
prueba autorizado dura únicamente 3 días, para que calendarices las actividades donde
utilizarás Dreamweaver.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 35
En la actualidad, el editor web que más se utiliza es Dreamweaver. Existen varias
versiones, pero la actual es Dreamweaver CS6, y la de Bluefish es 2.2.4. Se recomienda
usar estas versiones, pues presentan nuevos componentes, como las etiquetas de html5 y
hojas de estilo versión 3, pero si se utilizan versiones anteriores no hay problema alguno.

Es necesario que revises el video Utilización de editores web para que observes la forma
en que se elaboran las páginas web mediante los editores (UnADM, 2014h).

Para observar el video Utilización de
editores web. Da clic en la siguiente
imagen.

Como primer paso para la creación del sitio web se deberá realizar lo siguiente:

1. Instalar un editor web, ya que permitirá crear las páginas que compondrán el sitio.
2. Instalar el servidor web para poder conectar utilizando instaladores de servidores web
que son AppServ y Xampp, estos dos son software libre que puedes descargar sin
problema.

Xampp tiene compatibilidad con todos los sistemas operativos, y AppServ no tiene
compatibilidad con Linux, con los demás sistemas operativos no tiene problema alguno.

Para descargar AppServ, es necesario ingresar al sitio oficial de AppServ. Para descargar
Xampp, es necesario ingresar a su sitio oficial Xampp.

Los instaladores de servidores web se relacionan con los editores web, ya que estos
últimos facilitan la conexión con los servidores y la administración del sitio web; por tal
motivo, es muy importante saber cómo se instala el instalador de servidores y el vínculo
https://youtu.be/iUOEyI9YOHU
http://www.appservnetwork.com/?newlang=spanish
http://www.apachefriends.org/es/index.html
https://www.youtube.com/watch?v=fD8PHQwK57M&feature=youtu.be
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 36
con el sitio web desde un editor, que permite vincular los sitios con las bases de datos, así
como crear y editar las páginas que conforman el sitio.

Las funciones principales de los instaladores web son crear y administrar bases de datos,
así como controlar los sitios web. Es necesario que revises el recurso audiovisual
Instalación de instaladores de servidor web AppServ y Xampp donde se exponen los pasos
necesarios para la realización de la instalación de los instaladores de servidores web
(UnADM, 2014f).

Para consultar el recurso de video
Instalación de instaladores de servidor web
AppServ y Xampp, da clic en la imagen.

Para que Dreamweaver funcione con Ubuntu se deberá instalar un programa llamado
Wine. Este programa se instala desde Ubuntu en centro de software y de ahí se busca. En
automático aparece y se instala sin problema alguno pues, como recordarás,
Dreamweaver está hecho para el sistema operativo Windows y Mac. Wine es un software
de compatibilidad que permite que Dreamweaver pueda instalarse en Ubuntu sin
problema alguno.

En este tema se revisó lo referente a las fases de desarrollo web, mediante las cuales se
identifica una problemática, necesidad o área de oportunidad de una organización
susceptible de atenderse mediante la construcción de un sitio web. Para el desarrollo del
sitio se requiere la documentación y organización de la información, o contenido que
conformará el sitio mediante carpetas específicas donde se almacenan y, por medio de las
cuales, se administran los elementos que compondrá el sitio web, que son las páginas
web, imágenes, videos, música, bases de datos, dependiendo del tipo de sitio que se
requiera, así como de su objetivo.
https://youtu.be/h8AX58jNqbA
https://youtu.be/h8AX58jNqbA
https://www.youtube.com/watch?v=h8AX58jNqbA
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 37

En este primer tema se expuso una explicación de todos los elementos necesarios para
comenzar con la construcción de las páginas que conformarán un sitio web. En el siguiente
tema se expondrá la forma en que se desarrolla cada una de las páginas, dependiendo del
tipo de recursos que se integrarán y del objetivo del sitio.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 38
2.2. Estructura HTML

En este tema se expondrá lo referente a la estructura de HTML para la construcción de
una página web estática, mediante la cual se estructura el formato de la página; para ello,
es necesario saber cómo se construye una página estática porque es la base para realizar
una página dinámica, lo cual permitirá la creación de sitios web. Según Born (2001), “un
documento o página habitualmente está compuesto por el contenido del documento en
sí, o sea, lo que el usuario ve en la presentación y por información acerca de cómo debe
representarse ese contenido, con ello nos referimos al formato que determina el aspecto
del documento” (p.39).

Un documento HTML o página web contiene la información propiamente dicha (texto,
imágenes, videos, etcétera), donde después de ser programada se visualiza en la interfaz
gráfica. Una interfaz gráfica es una representación gráfica del código de programación
web que se muestra en los navegadores web.

La estructura de HTML de un documento contiene instrucciones sobre cómo debe
representarse el documento en cuestión en una página web. Estas instrucciones regulan el
formato de texto, si se da el caso, define las imágenes a mostrar, o fijan los hipervínculos,
esto depende de lo que se quiere que integre la página web. Como recordarás, en la
primera unidad se expuso la estructura básica de HTML.

En la actualidad, hay una versión HTML5 que se diferencia de HTML porque utiliza
etiquetas diferentes, debido a que aparecieron nuevas tecnologías como GPS, videos
formato avi, mp4. HTML5 tiene objetivos más ambiciosos de los que pretendían cubrir
versiones anteriores, tiene su propio y más extenso juego de etiquetas. HTML5 ha
mejorado en elmanejo de multimedia, sus capacidades son muy superiores, esto se
refiere a que es posible visualizar todo tipo de formato de imágenes, video, audio, y las
fuentes de texto son mucho más manipulables y más factibles, por ejemplo, para la
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 39
música el formato actual es .mp3. HTML5 acepta este formato y HTML no (Herrera, 2012).

Es muy importante considerar, respecto a la visualización de este lenguaje de
programación HTML5, que es nuevo para algunas personas que todavía usan
computadoras de generaciones anteriores. Podrían estar utilizando navegadores que no
permiten visualizar un sitio web desarrollado con base en HTML5. Por ejemplo, si se
cuenta con un sistema operativo del año 2000, el sistema operativo Windows Milenium ya
tiene una versión de navegador web IE 5, y sólo acepta navegadores web que sean
compatibles con ese sistema operativo, por tal motivo, si se necesita visualizar un sitio
web que está elaborado con HTML5, esto será imposible ya que HTML 5 está hecho para
visualizarse con sistemas operativos actuales tales como Windows 7, 8, Mac, Linux 10, 12,
13.

Los documentos HTML se encuentran estrictamente organizados. Cada parte del
documento está diferenciada, declarada y determinada por etiquetas específicas. En el
subtema 2.2.1. Etiquetas de HTML, revisarás los nuevos elementos semánticos
incorporados en HTML5, además de utilizar las etiquetas o tags que existen. Esto depende
de la forma en que se diseñe la página web, así como las etiquetas que utiliza HTML5. En
el segundo subtema se expondrá lo referente a la función de los frames o marcos, los
cuales se utilizan para dividir la pantalla en varias zonas independientes, cada una con su
propia barra de desplazamiento (Magal, Tortajada y Morillas, 2006). En el tercer subtema
revisarás la forma en que se construye una tabla, así como los atributos de un formulario
en HTML, los cuales constituyen el primer mecanismo de interacción entre las páginas
web y el usuario (Cobo, 2005). En el cuarto subtema, aprenderás a desarrollar páginas
web animadas, insertando diversos recursos multimedia, tales como música, video e
imágenes, etcétera; esto quiere decir los elementos multimedia están codificados con un
formato concreto y, a su vez, todo ello se inserta en un formato de archivo contenedor.
Dentro de un formato contenedor, no siempre se observará la misma codificación, todo
esto genera una combinatoria enorme de formatos a los que hay que incorporar la
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 40
variable del navegador. Cada navegador, en la actualidad, es capaz de reproducir un
número concreto de formatos.

Es muy importante tener claro que no en todos los navegadores puede visualizarse al
100% el contenido de las páginas web HTML y HTML5, o al menos no como se espera,
pues aún no existe un navegador que soporte absolutamente todas las características de
HTML5 y HTML. Cada fabricante ha intentado añadir las propias especificaciones y
características para darle ventaja a su navegador, ya que en la actualidad existen nuevas.
Es muy importante que aprendas a utilizar HTML5, pues, como expresa Herrera (2012),
“los grandes han aprobado la mayor parte de las ideas del estándar, Internet Explorer,
Google Chrome, Mozilla, Opera, han anunciado su soporte para HTML5 y las ideas más
importantes ya están disponibles en las versiones más recientes de sus navegadores y
están alentando a usuarios y desarrolladores para usar HTML5” (p.15).

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 41
2.2.1. Etiquetas de HTML

Los documentos que se codifican en HTML se basan en una “estructura de etiquetas. Las
páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La
primera contiene las etiquetas necesarias para que la página se vea correctamente en
Internet, y la segunda, los elementos que conforman la página (MediaActive, 2010, p.23).

A continuación, se explican las etiquetas HTML, así como las básicas de HTML 5, utilizadas
en la creación de páginas web.

Etiquetas
HTML
Descripción Etiquetas HTML5 Descripción
Etiqueta <!
DOCTYPE>

Para empezar la
construcción de la
página web se
requiere indicar el
tipo de documento
que se está
creando, esto se
refiere a
especificar en qué
lenguaje de
programación web
se está trabajando,
para ello se integra
esta etiqueta en
HTML.
. <!
DOCTYPEhtml>
Esta etiqueta se utiliza para que
el navegador identifique que en
la página no habrá nada más que
código HTML5, que ya se pueden
utilizar etiquetas de HTML con
html5. Según Gauchat (2012),
“esta línea debe ser la primera
del archivo, sin espacio o líneas
que la precedan. De esta forma,
el modo estándar del navegador
es activado y las incorporaciones
de HTML5 son interpretadas
siempre que sea posible, o
ignoradas en caso contrario” (p.
12).
Etiquetas HTML y etiquetas básicas de HTML 5

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 42
HTML5 es muy flexible en cuanto a las estructuras y a los elementos utilizados para
construirla. El elemento <html> puede ser incluido sin ningún atributo, o incluso ignorado
completamente en la construcción de la página web.

Etiqueta <html> </html>: Indica al navegador que el documento que está leyendo es un
documento HTML. Es muy importante tener claro que HTML es lenguaje principal para la
construcción de páginas web, a pesar que se utilicen otros lenguajes de programación. En
el caso de HTML5, también son necesarias estas etiquetas.

Etiquetas para configuración del contenido de la página
• La etiqueta <head> </head> detalla el encabezado de la página web (Orós, 2011).
• La etiqueta <body> </body> presenta una serie de características generales del
formato de la página web, por medio de atributos que es posible establecer para
todo el documento, como puede ser el color del fondo, enlaces de hipervínculos,
color del texto, insertar imagen como fondo, entre otros. Dichas características se
podrán añadir a la etiqueta <body>, utilizando los siguientes atributos.
• La etiqueta Bgcolor permite integrar el color del fondo de la página web. Esto se
declara de la siguiente forma (recuerda que puedes consultar algunas
recomendaciones sobre el uso del color, en el documento Color):
<body Bgcolor = “blue” o “#fff”>

Atributos de formato del texto de títulos (Born, 2001).
• <body text = “White” o “#00fff”> para utilizarlo, al igual que el de Bgcolor, es
necesario capturar el color en inglés o con el código de colores que se mostró en la
imagen anterior.

Atributos de formato de cambio de color de hipervínculos:
• Link indica el color del texto de los enlaces.
• Vlink indica el color del texto visitado; es decir, la apariencia de los títulos cambia
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 43
si ya se ha ingresado a los mismos.
• Alink indica el color con el que se definirá la apariencia del texto del enlace en el
momento de su activación.

Estos tres últimos atributos se declaran de la siguiente forma:
<body link= “White” o “#00fff” vlink= “red” o “#000000” Alink = “blank” o
“#00CCC”>

Para definir el color en el fondo cuando se está capturando el código en forma manual, se
deberá capturar el título en inglés del color a utilizar, cuando se está utilizando un editor
de texto se emplea el código de colores, definido por default en estos programas. Para
observar dónde se localiza el código de colores en Dreamweaver y Bluefish.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 44
Etiquetas para encabezados de las páginas web
La etiqueta <title> </title> se inserta en la parte del encabezamiento de la página web; es
decir, en el head y se conforma del título de la página web (Orós, 2011). Algunos cambiose innovaciones que se integraron a HTML con el lenguaje HTML 5 se incorporaron dentro
de la cabecera:

La etiqueta <meta> especifica cómo se presentará el texto en pantalla (Gauchat, 2012) y
define el juego de caracteres a utilizar para mostrar el documento. La cabecera del
documento, utilizando la etiqueta <meta>, se estructura de la siguiente forma:
Estructura de la cabecera del documento
Estructura HTML5 Estructura HTML
<!DOCTYPE html>
<html lang=”es>
<head>
<meta charset=”iso-8859”>
</head>
<body>
</body>
</html>

</head>
<body>
</body>
</html>

Fuente: Gauchat, 2012.

La innovación de este elemento en HTML5, como en la mayoría de los casos, es sólo
simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más
corta y simple. Por supuesto, se puede cambiar el tipo estándar iso_8859-1, esto permitirá
que se pueda visualizar la Ñ y los acentos; es decir, se reconoce para la codificación el
alfabeto latino, incluyendo los acentos diacríticos y las letras especiales (como ñ), acentos
para el documento y agregar otras etiquetas <meta> como description o keywords para
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 45
definir otros aspectos de la página web, como se observa en el siguiente ejemplo
(Gauchat, 2012):

<!DOCTYPE html>
<html lang=”es”>
<head>
<metacharset=”iso-8859-1”>
<metaname=”description” content=”Ejemplo de HTML5”>
<meta name=”keywords” content=”HTML5, css3, Javascript”>
</head>
<body>
</body>
</html>

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> y
<h6> </h6> son etiquetas de encabezado que van desde <h1>, las letras de mayor
tamaño, hasta <h6> las de menor tamaño (Orós, 2011). Para observar un ejemplo de uso
de esta etiqueta consulta el Cuaderno de ejercicios y ejemplos en la sección Material de
apoyo.

Mediante las etiquetas de ubicación, formato, se alinean los párrafos de contenido
textual, por ejemplo:
Etiquetas de ubicación formato de párrafos
Atributos Descripción
<center> </center> Centra el párrafo o texto independiente.
<just> </just> Justifica el párrafo o texto independiente.
<left> </left> Justifica el texto del lado izquierdo o texto independiente.
<right> </right> Justifica el texto del lado derecho o texto independiente.
Etiquetas de ubicación formato de párrafos. Fuente: Born, 2001.

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 46
Atributos Descripción
<b> </b> Da formato en negritas al texto.
<u> </u> Subraya texto.
<i> </i> Da formato en cursivas.
<font> </font> Personaliza el texto con respecto al tipo de fuente, tamaño y color
del texto con los siguientes atributos.
Etiqueta <font> </font>
Atributo Ejemplo de uso con etiqueta
<font> </font>
Descripción
Color <Font color = “blue” o ““#00fff”> Determina el color del texto.
Size <Font size= 12> Define el tamaño del texto.
Face <Font face= “arial”> Asigna la fuente o tipo de letra.
Etiquetas de atributo de texto. Fuente: Born, 2001.

Etiquetas de formato de párrafos
Etiqueta Descripción
<ul> </ul> Indica al navegador que cree una lista con viñetas no ordenada.
<ol> </ol> Realiza listas ordenadas que indica al navegador que numere la lista de
elementos comprendidos.
<p> </p> Separa párrafos. Otra etiqueta asociada a la anterior es <br>, sólo tiene
marca inicial y se usa para cambiar de línea.
<pre> </pre> Conserva espacios y saltos de línea de cuerpo de texto.
Etiquetas de formato de párrafos. Fuente: Born, 2001.

Etiquetas de hipervínculos
Etiqueta Descripción
<a> </a> Permite que haya vínculos ya sea de un texto, botón o imagen que al
seleccionarlos lleve a otra página web o dirección URL. Tiene los siguientes
atributos.
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 47
Etiqueta <a> </a>
Atributo Uso con etiqueta <a> </a> Descripción
Href <a href =
“http://www.unadmexico.mx/”>
Se integra la dirección del
hipervínculo.

Name <a href = “index3.html” name=
“Menu”>
Especifica el nombre de la posición a
donde se va a dirigir la siguiente
página web.
Etiquetas de hipervínculos. Fuente: Orós, 2011.

Etiquetas de comentarios
Etiqueta Descripción
<comment> </comment> Puede ingresarse en cualquier parte del código, y sirve para
integrar los espacios de ingresar comentarios en la página
web.
Etiquetas de distribución de contenido en la página
Etiqueta Descripción
<hr> Dibuja una barra horizontal que divide a la pantalla en un grosor y una
longitud. Esta etiqueta se define o determina utilizando los atributos
siguientes:
Etiqueta <hr>
Atributo Uso con etiqueta <hr> Descripción
Size <hr size = 20> Permite especificar el grosor de líneas.
Width <hr width = 70> Indica la longitud o el porcentaje adecuado con
respecto al ancho de la página.
Align

<hr width = 50
aling= center>
Permite establecer la alineación de las líneas con los
valores left, right o center.
Noshade <hr noshade> Elimina el efecto de sombra de la barra. Representa al
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 48
separador con un color sólido en lugar de relieves.
Etiquetas de comentarios y distribución de contenidos en la página web. Fuente: Orós, 2011.

Ejemplo de etiqueta HR
<html>
<head>
<title> etiqueta hr</title>
</head>
<body>
<h1>ejemplo de hr </h1>

</body>
</html>

Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 49

Resultado de etiqueta hr. Basado en: Orós, 2011.

Etiqueta Descripción
<sub> </sub> Indica al navegador que exhiba el texto especificado como subíndice.
<sup> </sup> Indica al navegador que exhiba el texto especificado como superíndice.
<var> </var> Le indica al navegador que exhiba el texto especificado en una fuente
más pequeña, de ancho fijo.
Etiquetas de navegador. Fuente: Born, 2001.

Para observar el uso de las etiquetas explicadas en este subtema, accede al recurso
audiovisual llamado Aplicación de las etiquetas HTML (UnADM, 2014b).

Para revisar el recurso de video
Aplicación de las etiquetas HTML da
clic en la imagen.

En este subtema se dio una explicación breve de las etiquetas que más se utilizan para la
creación de páginas web en HTML, así como algunas de HTML5, las cuales poseen una
https://www.youtube.com/watch?v=jEz4qNtGE3w&feature=youtu.be
file:///C:/Users/delia.mendoza/Documents/DS/10/DPW1/DPW1%20U2/Descargables
Unidad 2. Diseño de sitios web
UNADM | DCEIT | DS | DPW1 50
gran cantidad de funcionalidades, por ejemplo, las mejoras en el manejo de multimedia
son muy superiores en cuanto al uso de imágenes, video, audio y tipos de fuentes de
texto.

2.2.2. Frames HTML

Los frames o marcos se aplican para dividir la pantalla en varias zonas independientes,
cada una con su propia barra de desplazamiento, éstos se integran dentro del código para
que se visualicen en las páginas web. Un uso muy común se observa en los sitios que
cuentan con un menú fijo en la parte izquierda de la página, y los textos aparecen en la
parte derecha (Magal, Tortajada y Morillas, 2006).

La etiqueta <frame> define las características de un frame en concreto (Magal, Tortajada y
Morillas, 2006, p. 144) y se utiliza con los siguientes componentes:
• “SCR Source, fuente u origen: es un fichero o archivo .html que se debe cargar en el
frame.
• Name: el nombre de frame se crea de acuerdo con la creación de la consideración del
programador web. Muy importante porque se necesita