DPW1 U2 Contenido - pdf2

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, julio del 2022.
Universidad Abierta y a Distancia de México

Índice
Unidad 2. Diseño de sitios web............................................................................................................ 3
Presentación de la unidad..................................................................................................................... 3
Logros .................................................................................................................................................. 5
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................................................................................................ 18
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
UNADM | DCEIT | DS | DPW1 2

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.

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.

Logros
Al término de esta unidad lograrás:
• Analizar las fases para la creación de sitios web.

• Identificar la estructura de HTML y sus elementos para la creación de páginas web.
• Analizar la diferencia entre HTML y HTML5, ya que HTML5 introduce nuevas
formas de escribir código, así que la sintaxis entre ellos puede variar ligeramente.
• Identificar el funcionamiento de las Hojas de Estilos (CSS).
• Identificar el funcionamiento de PHP en la creación de páginas web.
• Crear el mapa de navegación de un sitio web.
• Diseñar un 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.

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 diferentes
propó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
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
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í
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):
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 transmitir informació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.
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
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
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.
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 logotipo que 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
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
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).
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.
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, el nombre 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.
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:
• 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
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
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.
• Especificaciones del estilo de gráfico (fuente tipográficas, colores etcétera). Para
revisar recomendaciones 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
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.
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.
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).
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
• Noticias internacionales
• Noticias nacionales
• Deportes
• Otros
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.

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:

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:

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

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.

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 como aplicaciones de software que sirven para desarrollar
páginas web (Krug, 2001). Los primeros sólo permitían editar código HTML. Actualmente,

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.

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

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.

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.

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 el manejo 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

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

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).

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 Descripción Etiquetas HTML5 Descripción

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

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

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.

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 cambios
e 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 >
<html lang=”es> <head>
<head>
<meta charset=”iso-8859”> </head>
</head> <body>
<body> </body>
</body> </html>
</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

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.

<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 Descripción
<font> </font>
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
<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.

Etiqueta <a> </a>

Atributo Uso con etiqueta <a> </a> Descripción
Href <a href = Se integra la dirección del
“http://www.unadmexico.mx/”> hipervínculo.
Name <a href = “index3.html” name= Especifica el nombre de la posición a

“Menu”> donde se va a dirigir la siguiente
página web.
Etiquetas de hipervínculos. Fuente: Orós, 2011.
Etiquetas de comentarios
<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
<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 Permite establecer la alineación de las líneas con los
aling= center> valores left, right o center.
Noshade <hr noshade> Elimina el efecto de sombra de la barra. Representa al

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>
<hr width="50%" noshade size="5">

<hr align="center" width="50%">

<hr align="left" width="50%">
<hr align="right" width="50%">
<hr width="50">
<hr size="3">
<hr align="right" width="50%">
<hr align="left" color="green" width="80%">
<hr color="red" size="10" width="50%">
</body>
</html>

Resultado de etiqueta hr. Basado en: Orós, 2011.
<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

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 para los enlaces.
• Scrolling: se integra con el fin de que sea visible la barra deslizadora a través de un
documento. Cuenta con las opciones: yes, no y auto, por defecto.
• Noresize: indica que el usuario no puede redimensionar el marco. Esto quiere decir
que si se añade el frame, no podrá redimensionarse con el ratón” (p. 144). Por
ejemplo, si se dispone de un menú de enlaces en un frame ubicado a la izquierda, es
muy probable que se defina la propiedad noresize. Ya no es de mucha utilidad
agrandar o contraer esta región de pantalla.
Para integrar los frames se añaden al código las siguientes etiquetas:

<frame> Define las características del conjunto de los frames. Se utiliza con los
siguientes atributos.
Etiqueta <frame>
Atributo Uso con la etiqueta Descripción
<frame cols= "IO%, *"> Son valores porcentuales. Controla la proporción
Cols de espacio marco horizontal con respecto a la
cantidad de espacio disponible en el navegador.
<frame rows= "2O%, *"> Define el número de subespacios horizontales en
Rows un conjunto de marcos.
Nota: No se debe utilizar cols= y rows= en la

misma etiqueta.
Códigos para integrar frames. Fuente: Orós, 2011.
Con la etiqueta <frame> se puede dividir una tabla en filas, en la que cada elemento del
grupo contiene diferentes tipos de contenido y puede ser un formato distinto. HTML es
compatible básicamente con dos grupos: uno para marcar las cabeceras de las filas, otro
para el cuerpo filas (Orós, 2011), pero puede ser compatible con más.
Para configurar el tamaño del frame en pixeles se indica una cantidad dividida por comas,
por ejemplo:
<frameset cols="100, 500, *">
En este ejemplo se está indicando al navegador que hay tres frames de columna: el
primero tiene un ancho de 100 pixeles, el segundo de 500 y el tercero llena el
complemento de la página.

En porcentaje <frameset cols="15%, 85%, *">

Indica dos frames, uno ocupa el 15% de la pantalla y el otro el 85%.
Un frame es sencillamente un marco que divide la página web en filas y columnas, según
las necesidades. Por medio de él es posible dividir la pantalla en ventanas y distribuir el
contenido de cada página web que conforma un sitio; por ejemplo, es posible integrar un
menú en la parte izquierda, y los resultados de los enlaces en la derecha.
Según Orós (2011), “Los frames consisten en conocer las características del atributo
TARGET, que determinará la zona de la pantalla en donde se mostrarán los elementos de
enlace seleccionados” (p. 40). Los frames ofrecen la posibilidad de utilizar marcos y varias
páginas en una sola, y así hacer una página web con una mejor presentación para el sitio
web. Este atributo TARGET tiene una serie de valores especiales que a continuación se
mencionarán (Orós, 2011):
Valores target Descripción

TARGET=_top Se utiliza con el fin de que el enlace siempre se cargue en
la ventana completa del navegador.
TARGET=_self Se utilizar para que el enlace se cargue en la misma
ventana del frame actual.
TARGET=_parent Se utiliza para que el enlace se cargue en el FRAMESET
inmediatamente superior al documento.
TARGET=_blank Por medio de este atributo, la página se carga en una
nueva ventana.
Valores de Target (Orós, 2011)
Se pueden modificar algunas de las características de los frames por medio de las
etiquetas que siguen:

SCROLLING Indica cuándo el frame llevará la barra de deslizamiento vertical.
BORDERCOLOR Indica el color del borde.
MARGINWIDTH Indica el margen horizontal, tanto derecho como izquierdo, en
pixeles
MARGINHEIGHT Indica el margen vertical, tanto superior como inferior, en pixeles

NORESIZE Indica que el frame no se puede redimensionar. Si no se pone este
atributo colocando el cursor en el borde del frame, permitiría su
deslizamiento.
Etiquetas frame. Fuente: Berciano, 1999.
A continuación se exponen ejemplos de uso de etiquetas para la construcción de frames:
Ejemplo 1 de utilización de código HTML frames:
<HTML>
<HEAD><TITLE> Frames 3</TITLE></HEAD>
<body>
<a href="frames1.html" target=principal>Frame 1 </a><br>
<a href="frames2.html" target=principal>Frame 2 </a><br>
</body>
</HTML>
El resultado de este ejemplo se muestra a continuación.

Resultado del ejemplo de elaboración de frames. Basado en: Berciano, 1999.
Ejemplo 2 de código de HTML para estructurar frames:
<html>
<head>
<title> Frame </title>
</head>
<frameset cols="80,*" frameborder="no" border="0"
framespacing="0">
<frame src="UntitledFrame-4" name="leftFrame" scrolling="No"
noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="Untitled-2" name="mainFrame" id="mainFrame"
title="menu" />
</frameset>
<noframes><body>
</body></noframes>
</html>

Para abrir la página web deberás ingresar a un navegador web; una vez que se abra la
página donde se crearon los frames, podrás ver los marcos que se elaboraron; visualizarás
que los enlaces del marco izquierdo aparecerán como en la siguiente imagen:
Resultado del ejemplo de elaboración de frames. Fuente: Orós, 2011.
Por medio del frame, el sitio web se organiza en forma adecuada y con una mejor
presentación, permite estructurar los menús y navegar en varias páginas web sin que el
menú cambie; por ejemplo, en la imagen del ejemplo 2 se observa un frame en color
negro, y el otro de color azul.
Se dice que se puede navegar en varias páginas web sin que cambie el menú. Esto
significa, con base en el ejemplo, que la página de color azul cambiará, y el frame de color
negro quedará fijo. También es posible contar con un título fijo, por ejemplo, el nombre
de la empresa, y estar cambiando de páginas web sin que el titulo se mueva. Todo
depende de las necesidades que se requieran para la construcción del sitio web.

En el siguiente subtema se revisarán los componentes de tablas y formularios de HTML

con estos componentes y con los frames podrás hacer páginas web más creativas con
mejor y mayor funcionalidad.
Es recomendable que ejercites el uso de etiquetas. Consulta los ejercicios en el Cuaderno

de ejercicios y ejemplos en la sección Material de apoyo, comparte los resultados en el
Foro de dudas para el diseño de un sitio web.
2.2.3. Componentes de tablas y formularios en HTML
Es muy importante comprender cuáles son los componentes de una tabla y del formulario
en HTML, ya que estos elementos permiten que una página web en HTML tenga más
interactividad y control en los accesos a los datos por parte del usuario.
Como expresa Born, “las tablas son un elemento de diseño que todo navegador web
soporta. Una tabla puede imaginarse como una sucesión de celdas individuales. Esta tabla
se construye fila a fila” (2001, p. 303). A continuación se explicarán los componentes que
permiten crear una tabla en HTML. Una tabla siempre está rodeada por los tags <table>
</table> entre estos dos tags se encuentra el contenido. Existen diferentes atributos que
permiten diseñar tablas. Éstos son:

Etiquetas Descripción
Align Establece la alineación de la tabla o texto mediante los siguientes atributos.
Etiqueta Align
Atributo Uso con etiqueta Aling Descripción
LEFT ALING LEFT Permite que la tabla se ubique a la izquierda.
RIGHT ALIGN=RIGHT Permite que la tabla se ubique a la derecha.

Etiquetas de alineación de la tabla. Fuente: Born, 2001, p. 303.
Etiqueta de formato de las tablas en una página web

Atributo Descripción
Bgcolor Define el color de fondo de las celdas de la tabla.
Border Define el ancho del borde en pixeles.
BorderColor Asigna un color al borde.

BorderDark Establece el color de la parte oscura de un borde de tres dimensiones.
BorderLight Asigna el color de la parte clara de un borde de tres dimensiones.
Caption Especifica el título para la tabla.
Cellpadding Asigna la cantidad de espacio libre junto al contenido de una celda.
Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla.
Width Determina el ancho de la tabla en pixeles o en un porcentaje.
Etiquetas de formato de tablas. Fuente: Born, 2001, p. 303.
Para definir una fila en una tabla, se utiliza la etiqueta <tr> </tr>
Dentro de una fila se pueden configurar las celdas de la tabla. Las celdas se establecen
con la combinación de <td> </td> (Born, G. 2001).

Recuerda que, dentro de una celda es posible insertar desde texto o gráfico, hasta una
tabla entera. Con estos componentes se puede crear una tabla sencilla con diferentes filas
y columnas. Para observar algunos ejemplos de uso de los atributos de elaboración de
tablas, revisa el Cuaderno de ejercicios y ejemplos en la sección Material de apoyo.
Formularios. Los formularios en HTML hacen posible la interactividad real con el usuario,
por medio de ellos se puede acceder, solicitar y ofrecer información. La posibilidad de
realizar preguntas y recibir respuestas es una de las formas fundamentales de conseguir
esta interactividad, y el lenguaje HTML proporciona la habilidad de crear formularios e
insertar cajas de texto, botones de opción y otros controles que permitirán aprovechar
esa posibilidad de interactividad en las páginas web (Ferrer, 2008).
Los formularios pueden introducirse en cualquier parte del documento; es decir, en tablas
o dentro de un texto. Evidentemente, un formulario puede contener en su interior listas,
imágenes, etcétera; para integrar imágenes o tablas, sólo se agrega dentro de la etiqueta
<form>, integrando las etiquetas para imagen, tablas que se mencionaron en los subtemas
anteriores.
Como expresa Ferrer (2008), “para crear un formulario el lenguaje HTML proporciona la
etiqueta FORM. Esta etiqueta consta de una instrucción de inicio, <FORM>, y una
instrucción de fin, </FORM>, entre las cuales podremos insertar todos los controles que
deseemos. Dicho esto, podemos crear nuestra primera página con un formulario” (p. 375).
Para observar el ejemplo de un formulario sencillo, revisa el Glosario de términos
frecuentes y ejemplos.
Como se observó en el código y en la imagen, los elementos que componen un formulario

deben encontrarse entre las etiquetas <form> </form>. Los atributos de la etiqueta
<form> son:

METHOD. El método se ha impuesto porque resulta más eficaz y permite el tratamiento

de una cantidad mayor de datos. Por lo cual es recomendable utilizar el method = “post”
(Lancker, 2009).
Atributos Función
METHOD Indica el método de transferencia de la información introducida en el
formulario. Esta transmisión puede efectuarse según el método GET o
el método POST.
GET Envía información a través de una variable llamada QUERY_STRING.
POST Designado para enviar información.
ACTION Cuando se da la orden al navegador para que transmita los datos, éste
necesita saber qué acción debe realizar. Esto quiere decir que debe
realizarse al pulsar el botón de ejecución; por ejemplo, enviar datos,
realizar descargas de archivos, etcétera (Lancker, 2009).
ENCTYPE Determina la forma de codificaciòn empleada para el transporte del
contenido del formulario (Lancker, 2009).
Atributos Method (Lancker, 2009).
Para la formación del diseño, de acuerdo con lo que se desee, para crear un formulario se
utiliza la etiqueta <INPUT>, ésta se emplea para definir todos los elementos del
formulario, como botones, cajas de texto, casillas de verificación, etcéterAAa.
El atributo que determina el tipo de elemento es TYPE.
Los distintos tipos de entradas son:

TYPE
Checkbox Permite selecciones múltiples, cuadros vacíos de selección.
Hidden Sirve para pasar los datos adquiridos en un formulario a otro sin que se

visualice nada en la pantalla.

Text Sirve para la entrada del texto que sea insertado por el usuario.
Password Permite que se introduzca texto, pero que, al visualizarlo, sea sólo
asteriscos para que se creen las contraseñas.
Radio Sólo permite elegir una opción entre varias.
Reset Borra todo lo introducido en el formulario.
Submit Envía la información del formulario a la base de datos.
Fuente: Lancker, 2009.
A continuación, se mostrará un ejemplo de cómo se construye un formulario utilizando

todos los tipos de entrada:
Ejemplo de código en HTML de formulario completo:

<HTML>
<HEAD>
<TITLE>Formulario</TITLE>
</HEAD>
<BODY>
<H1>Formulario </H1>
<FORM>
<p>Introduzca su nombre:
<INPUT TYPE="Text">
</p>
<p>
<input name="hiddenField" type="hidden" id="hiddenField"
value="14defebrerode2014">
</p>
<p>Sexo:
Femenino
<input type="radio" name="radio" id="radio" value="radio">

<label for="radio"></label>
Masculino
<input type="radio" name="radio" id="radio2" value="radio">
</p>
<p>Estado civil:
<input type="chckbox" name="checkbox" id="checkbox">

Casado
<label for="checkbox"></label>
<input type="checkbox" name="checkbox2" id="checkbox2">
</p>
<p> </p>
<p>
<label for="textfield"></label>Password
<input type="password" name="textfield" id="textfield">
</p>
<p>Observaciones:</p>
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="45"
rows="5"></textarea>
</p>
<p>
<label for="select"></label>
Puedes Viajar:
<select name="select" id="select">
<option value="si">Si</option>
<option value="NO">no</option>
</select>
</p>
<p> </p>

<p> </p>
<p>
<input type="submit" name="button" id="button"
value="Enviar">
<input type="reset" name="button2" id="button2"
value="Borrar">
</p>
</FORM>
</BODY>
</HTML>
Resultado del ejemplo de programación de un formulario
Revisa el recurso de video Formulario de páginas web en HTML para que observes cómo
se construye un formulario en una página web (UnADM, 2014e).
Para observar el video Formulario de

páginas web en HTML da clic en la imagen.

Es muy importante considerar que realizar un formulario en HTML es únicamente parte

del diseño, ya que para integrar la conectividad a una base de datos y permitir el
almacenamiento de todos los registros que diferentes usuarios hagan en la base de datos,
se necesitará trabajar con el lenguaje de programación PHP, esto se explicará en el
siguiente subtema.

2.2.4. Elementos multimedia para HTML
Se han expuesto, hasta este momento, los elementos necesarios para integrar contenido
de texto y formularios estáticos; es decir, elementos que se estructuran sin que haya
conexión con un servidor. Para incluir recursos dinámicos, hacer más atractivas, más
interactivas las páginas, e insertar imágenes, sonido, videos y animaciones; es decir,
integrar elementos multimedia, se utilizan otro tipo de etiquetas que se revisarán en este
subtema.
En HTML se utilizan las siguientes etiquetas para inserción de imagen:

Etiqueta HTML de imagen <img> </img>
Atributos Utilización con la Función
etiqueta <img> </img>
SRC <img src = “imagen.jpg”> Permite obtener el archivo de imagen para la
</img> visualización en la página web.
ALT <img src = “imagen.jpg” Se utiliza para introducir una descripción de la
alt = “unadmexico”> imagen con la finalidad de que el usuario que
</img> accede a la página con un navegador en modo
texto pueda tener una idea de las imágenes que
contiene.
Etiquetas para la inserción de imágenes en páginas web mediante HTML. Fuente: Magal, Tortajada y
Morillas, 2006.
A continuación, se muestran los atributos que se le da a la imagen. Esto se refiere al

tamaño de la imagen y el cómo se visualizará en la página web, lo que depende de los
requerimientos de la empresa, de la importancia de la imagen, y del tamaño en que se
requiere que se visualicen.
Etiquetas Función

Src Identifica la imagen que se desplegará.

Height Para el redimensionamiento del gráfico. Esto se refiere al
tamaño de lo alto de la imagen (en pixeles o en porcentaje).
Width Para el redimensionamiento del gráfico. Esto se refiere al
tamaño de lo ancho de la imagen (en pixeles o en porcentaje).
Border Definido en píxeles.
Etiquetas de formato de tamaño de imagen. Fuente: Magal, Tortajada y Morillas, 2006.
A la imagen se le puede aplicar un borde que se hace notorio, especialmente cuando se

trata de una imagen que además es un hipervínculo. Las etiquetas de alineación son las
siguientes:

Etiqueta Función
ALIGN Permite alinear la imagen respecto al texto en función de los siguientes
atributos:
Atributo Uso con ALIGNG Función
TOP <align=”top”> Alinea la parte superior de la imagen con el
borde superior.
MIDDLE <align=”middle”> Alinea la línea base del texto con la mitad de la
imagen.
BOTTOM <align=”bottom”> Alinea el borde inferior del texto con el borde
inferior de la imagen.
LEFT <align=”left”> Alinea la imagen de lado izquierdo.
RIGHT <align=”right”> Alinea la imagen del lado derecho.
CENTER <align=”center”> Alinea la imagen en el centro.
BASELINE <align=”baseline”> Desempeña la misma función que BOTTOM.
No hay ninguna diferencia, sólo cambian de
nombre, pero realizan la misma función.
ABSMIDDLE <align=”adsmiddle”> Alinea el punto medio vertical de la línea de
texto con la mitad de la imagen.
Etiquetas de alineación de la imagen. Fuente: Magal, Tortajada y Morillas, 2006.
Ejemplo de código HTML de alineación de imagen y etiqueta align:

<html>
<head>
<title>Imagen</title>
</head>
<body>
<align=”left”><img src="../Desktop/unad.jpg" width="166"
height="116" alt="logotipo de unadmexico" />

</body>
</html>
Para observar el resultado de este código y otros ejemplos de inserción de imagen, ingresa
al Glosario de términos frecuentes y ejemplos.
Inserción de recursos sonoros en HTML. Es muy importante tener conocimientos acerca

de los elementos de sonido que se pueden insertar en una página web mediante HTML,
pues no en todos los navegadores es posible reproducir los sonidos de fondo que se
integran en una página.
La etiqueta <bgsound> permite que la página tenga sonido de fondo cuando el usuario
esté navegando en ella. Esta etiqueta está en la sección <head> </head> del documento
HTML. Para ello, se integra el archivo de sonido a través del atributo SRC. De forma
parecida a lo que ocurre con las imágenes para integrar el sonido, es preciso que su
formato sea .wav, .au o .midi (Born, 2001). A continuación, se expone la instrucción para
cargar un archivo de sonido en una página web:
Ejemplo de sonido en HTML:

Se captura en la etiqueta bgsound src el
título del archivo de sonido que se
<html> integrará en la página.
<head>
<title>Imagen</title>
<bgsound src="clasica.wav">
</head>
<body>
<div align="right"><img src="../Desktop/unad.jpg" width="166"
height="116" alt="logotipo de unadmexico" /></div>
</body>

</html>
Esta es la característica de inserción de audio y video más esperada de HTML5,

probablemente la más divertida desde el punto de vista de desarrollo, y aún más para el
usuario, pues HTML5 soporta la inserción de audio sin necesidad de ningún componente
extremo; es decir, soporta los formatos de audio y de video actuales, como, .mp3 para
audio; y para video, .avi.
Según Herrera (2012): “el elemento <audio> y su cierre permite tener audio embebido en
nuestras páginas. Cualquier texto entre las etiquetas <audio> y </audio> será desplegado
en cualquier navegador que no soporte el elemento de audio, opcionalmente también
puede colocar en lugar de texto un enlace para descargar el archivo” (p. 76). El elemento
<audio> cuenta con los atributos siguientes:
• Autoplay. Indica si el archivo de audio se reproducirá automáticamente.

• Controls. Especifica si los controles de reproducción se desplegarán.
• Loop. Establece si la reproducción del audio se reiniciará automáticamente cada vez
que concluya.
• Preolad. Especifica si el audio se cargará junto con la página.
• SRC “Source”. Indica la dirección URL del archivo de audio a reproducir.
Los recursos de audio ya son soportados por los principales navegadores; sin embargo, los
fabricantes aún no están completamente de acuerdo con un único formato de audio que
deba ser utilizado y, por lo tanto, soportan diferentes formatos entre los que se
encuentran, principalmente, los de estándar libre como Ogg y Mp3.
Revisa el recurso de video Pasos para insertar archivo de sonido en una página web,
donde observarás la forma de insertar sonido en HTML y HTML5 (UnADM, 2014g).

Para consultar el video Pasos para insertar

archivo de sonido en una página web, da
clic en la imagen.
Inserción de video en HTML. El elemento multimedia HTML de video, al igual que el

sonido, no se visualiza en todos los navegadores web, pero es posible incluir algún video
en una o varias páginas. Hay un punto importante que se debe considerar: los videos
suelen ocupar mucho espacio en disco y memoria RAM. Por lo tanto, precisan de mucho
tiempo para descargarse. Ante ello, como se mencionó en la fase de diseño, se
recomienda incluir videos sólo si es estrictamente necesario, de acuerdo con los
requerimientos del cliente y de los usuarios. Los formatos de video que suelen utilizarse
en Internet son: .avi, .mpeg y .mov.
A continuación, se exponen algunas etiquetas que se utilizan para insertar archivos de

video.
En HTML5 se utiliza la etiqueta <embed> para insertar archivos de video. Puede incluirse
la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas
<embed> y </embed> no hay que insertar nada.
A través del atributo SRC, al igual que en la imagen y sonido, hay que especificar la ruta y
el nombre del archivo de video.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al

cargarse la página y se reproducen solamente una vez. Esto puede cambiarse a través de
los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la

página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también

puede tomar los valores true o false.
Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la
consola de control de video. Estos atributos pueden tomar como valor un número que
indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de
video se mostrará con el tamaño más adecuado.
Ejemplo de código HTML con inserción de video:

<html>
<head>
<title> Video </title>
<embed src="World.avi" autostart="false" loop="true">
</head>
<body>
</body>
</html>
En HTML5, como expresa Herrera (2012), “la etiqueta con cierre <video> es otro elemento
que ha causado gran expectativa. La etiqueta video trabaja de manera muy similar a la
etiqueta de <audio>. Si vas a utilizar <video> utiliza la etiqueta <source> para
proporcionar diferentes alternativas al archivo origen de video. Cualquier texto entre las
etiquetas <video> </video> será desplegado en cualquier navegador que no soporte el
elemento” (p. 81). Para observar la aplicación de estas etiquetas, revisa el recurso de
video Aplicación de código HTML y HTML5 de video y audio (UnADM, 2014a).

Para consultar el video Aplicación de código

HTML y HTML5 de video y audio, da clic en
la imagen
En este tema se explicó la forma de elaborar una página web en HTML y la función de
cada etiqueta. Se observó que hay atributos que trabajan con diferentes etiquetas, por
ejemplo, el aling se puede emplear en texto, tablas, imágenes y formularios, ya que puede
alinearse al centro, derecha, izquierda.
Para poner el color como fondo, y poner color al texto, se dan las instrucciones en inglés o
con el código de colores. La estructura HTML no es complicada de realizar para la
construcción de una página web, lo que sí se requiere es creatividad para que esa página
web esté excelentemente construida. Estos son los elementos necesarios con los que
podrás realizar tus páginas web utilizando otros lenguajes de programación, tales como
PHP, JavaScript, ASP, etcétera, ya que todos se complementan. HTML es el lenguaje
principal para la construcción de las páginas web. Cabe mencionar que el estándar de
HTML5 no ha sido aceptado oficialmente, por lo que es muy importante que cuando
realices sitios web te asegures de que el navegador soporta las características de los
lenguajes HTML y HTML5, ya que aún no existe un navegador de HTML5 que soporte
absolutamente todas las características de HTML5, porque cada fabricante ha intentado
añadir las propias especificaciones y características para darle ventaja al navegador
(Herrera, 2011).
2.3. Estructura PHP
Como se explicó en la unidad 1, el lenguaje de programación web PHP posibilita realizar

páginas dinámicas; es decir, que tengan conexión con un servidor web para realizar la

conexión de base de datos. Recuerda que PHP es un lenguaje de programación web que
se encarga de realizar páginas dinámicas, esto quiere decir la realización de las bases de
datos, pero para la conexión de las bases de datos se necesita el servidor web, y también
se puede utilizar en una página estática, sólo que no hay conexión de base de datos.
Es importante considerar que para utilizar PHP y observar gráficamente lo que se está
haciendo, se requiere abrir el navegador web y teclear el nombre de la carpeta donde está
el sitio. Esto se declara en la barra de dirección del navegador web junto con el nombre de
la página; es decir, cuando el servidor ya está instalado se teclea en el navegador la
indicación localhost/nombre de la carpeta, donde están almacenadas todas las páginas y
el nombre de la página web que se desea visualizar. Si se desea abrir el archivo de la
página web en PHP con doble clic, no podrá hacerse.
Para trabajar con PHP se deberá utilizar la estructura HTML y utilizar una serie de
etiquetas que delimitan el código, de forma que todo lo que esté situado entre las
etiquetas PHP será ejecutado, y lo que esté fuera; es decir, la parte de HTML será dejada
igual. Como expresa Spona (2010), “una página en PHP se crea en principio como página
HTML y se guarda con la extensión .PHP. En el más sencillo de los casos, no se necesita
hacer más. Al insertar código PHP en una página de este tipo, este puede ir en cualquier
parte, también dentro de un elemento HTML, delante de la etiqueta <head> o detrás de la
etiqueta </body>. ¿El código PHP está incluido dentro de los símbolos <? PHP y?>” (p. 15).
En el primer subtema se expondrán los elementos que conforman este lenguaje (Spona,
2010). En el segundo, se explicarán las variables de PHP que pueden ser creadas,
modificadas y comparadas con otras, por medio de los llamados operadores (Spona,
2010). En el tercero, se expondrán las funciones del lenguaje o también llamadas
funciones nativas, funciones del core o núcleo PHP (González, 2014). En el cuarto, se
explicará la forma de agrupar varias funciones y variables en un mismo fichero mediante
PHP. En el quinto, se revisará la forma en que un formulario tiene la conectividad con un

servidor web, que permitirá que se almacenen todos los registros que se hagan en el
formulario.

2.3.1. Estructuras básicas en PHP
PHP cuenta con un código de programación orientada a objetos que permite que la página
web tenga más funcionalidades y que pueda interactuar con bases de datos. Este
mecanismo permite realizar el embebido de código PHP dentro de HTML. Todo lo que está
fuera de las etiquetas PHP se deja tal como está, mientras que el resto se interpreta como
código.
La estructura básica es:

<?php
?>
PHP interpreta el texto del archivo hasta que encuentra uno de los caracteres especiales
que delimitan el inicio de código. Existe la posibilidad de usar cuatro pares de etiquetas
PHP, pero de éstas sólo las dos etiquetas que se muestran a continuación están
disponibles siempre:
<?php
// Código PHP
?>
<script languaje="php">
// Código PHP
</script>
¿La siguiente estructura es como expresa Heurtel (2009), “el separador de instrucciones
esto significa que en PHP todas las instrucciones deben terminar con punto y coma La
etiqueta de cierre (? >) También implica el fin de la sentencia, así lo siguiente es
equivalente” (p.17).
Por ejemplo:

<?php echo " ¡HOLA";

echo "ALUMNOS DE LA CARRERA DE ING. DE DESARROLLO DE SOFTWARE
!" ; ?>
El resultado será ¡HOLA ALUMNOS DE LA CARRERA DE ING. DE
DESARROLLO DE SOFTWARE!"
Si se omite el punto y coma genera un error.
La función echo es básica para cualquier página PHP. Permite mostrar una o varias
cadenas y, por lo tanto, incluir texto en la página HTML enviada al explorador.
Sintaxis:
1. Echo (cadena de texto)
2. Echo cadena de texto [,…] Texto que debe mostrarse
La primera sintaxis echo (cadena de texto) sólo acepta un parámetro, mientras que la
segunda acepta varios.

Ejemplo:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Ejemplo de página PHP</title>
</head>
<body>
<p>
<?php
Echo(‘¡Hola Ing. de desarrollo de software !’);
?>
<br />
<?php
echo ‘ ¡ ‘ , ‘Hola’ , ‘Ing. de desarrollo de software del
séptimo semestre ‘, ‘!’;
?>
</p>
</body>
</html>

Resultado:
No hay salto de línea automático en el resultado de la ejecución del código PHP. Si es

necesario, hay que insertar la etiqueta HTML <br />, que integra el salto de línea en la
página HTML. Los saltos de línea en PHP son para que haya un espacio en el texto que se
encuentre en la página web PHP que se esté elaborando, no se vea todo junto y tenga una
buena presentación.
En el ejemplo anterior a la instrucción echo puede escribirse en varias líneas en la página

original, a la instrucción echo solo muestra el resultado.
Comentario. PHP ofrece dos formas de comentar el código:
1. // o # para incluir un comentario hasta el final de la línea

2. /* .... */ para insertar comentarios en varias líneas
Ejemplo:
<?php
// comentario en una sola línea

*comentario en una sola línea

/* comentario
En varias líneas */
Echo ‘Hola’ ; // comentario hasta el final de la línea
Echo ‘Oliver ‘ ; # comentario hasta el final de la línea
?>
Resultado:
Hola Oliver
Combinar PHP y HTML. Existen numerosos enfoques para combinar PHP y HTML, basados
en cuatro principios:
• La página puede contener una o varias inclusiones de código PHP.

• El código PHP genera texto que se integra en la página HTML enviada al explorador.
• Todo texto comprensible para el explorador puede ser generado por el código PHP.
• Texto plano, código HTML, código JavaScript.
Es posible observar en la recuperación de los datos de fecha y hora, ejemplos de

utilización de variables y funciones PHP.

Ejemplo de página que contiene código PHP en varios puntos:

Las diagonales al inicio de la línea (//) significan comentarios que
sólo verá el programador web dentro del código de programación
<?php para saber qué es lo que está haciendo el código.
// Asignación de variables que se utilizarán más adelante
// Esta sección de código PHP no genera salida
// Página HTML (no se utiliza “echo”).
$nombre = ‘Oliver’; // nombre del usuario
$titulo_pagina = ‘La editorial ENI presenta…’; // titulo de
la página
$hoy = date (“d/m/Y”); // fecha del día
$hora = date (“H:i:a”) ; // hora
?>
<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>
<?php /* visualización del título */ echo $$titulo_pagina; ?>
</ title>
</head>
<body>
Resultado:
La editorial ENI presenta…

2.3.2. Operadores en PHP
Para generar expresiones complejas, PHP utiliza un conjunto de operadores que se

mencionan a continuación (para comprender el comportamiento de los operadores en
PHP es necesario que recuperes los conceptos variables y constantes, revisados en la
asignatura Fundamentos de programación. Como recordarás, una variable es un valor
numérico o alfanumérico que va cambiando continuamente, y una constante es un valor
numérico o alfanumérico fijo, que no cambia):
Operadores aritméticos.
Fuente: PHP, 2014a.
Operadores bit
a bit. Fuente:
PHP, 2014b

Operadores de
comparación.
Fuente: PHP,
2014c.
PHP dispone de los siguientes operadores de comparación:

<?php
$a = 23; // Asignacion de los valores
$b = 75;
If ($a >= $b) {//La condicion no se cumple. El resultado es
false
Echo “Esta parte no se ejecuta”;
} else {
Echo “La comparacion es false porque $a es menor que
$b”;
}
?>
En el ejemplo se muestra cómo se utilizan los operadores de asignación, los cuales

permiten que se comparen los valores de acuerdo con las condiciones.
Operadores lógicos en PHP. Durante el desarrollo de un proyecto de elaboración de sitios

web pueden surgir situaciones en las que se necesite hacer varias comparaciones seguidas

para que se cumpla una determinada condición. PHP permite unir todas las
comparaciones en una, mediante el uso de los operadores lógicos.
Mediante operadores lógicos es posible evaluar un conjunto de variables lógicas; es decir,

aquellas cuyos valores sean únicamente verdadero o falso (1 o NULL). El resultado de esa
evaluación será siempre 1 o NULL (Eslava, 2013a).
En la expresión “$A AND $B el operador AND devuelve (1) en el caso de que todas las
variables lógicas comparadas sean verdaderas, y falso (NULL) cuando alguna de ellas sea
falsa.
En la expresión $A && $B el operador && se comporta de forma idéntica al operador

AND. La única diferencia entre ambos es que operan con distinta precedencia.
En la expresión $A OR $B para que el operador OR devuelva verdadero (1), es suficiente

que una sola de las variables lógicas comparadas sea verdadera. Únicamente devolverá
falso (NULL) cuando todas ellas sean falsas.
En la expresión $A || $B, el operador || se comporta de forma idéntica al operador OR.

Su única diferencia es el orden de precedencia con el que opera (Eslava, 2013b).
Ejemplo de operadores lógicos en PHP:
<?php
$a = 2 3;
$b = 75;
$c = true;
If ($a < $b and $c){
Echo “se cumplen las dos condiciones”;
}
?>

Este ejemplo de operadores lógicos muestra si los valores son verdaderos.
Operadores de asignación en PHP. El más básico es el símbolo de asignación (=). Utilizado

para dar valores a las variables que se usan en el código. Las variables que están a la
izquierda del operador toman el valor que se encuentra en la expresión de la derecha,
según Eslava (2013a):
<?php
$variable = 34;
$variable2 = “Asignación de valores”;
?>
Los operadores en el lenguaje de programación PHP permitirán realizar diferentes páginas

web con más funcionalidades; por ejemplo, una calculadora, un calendario, un reloj
etcétera.

2.3.3. Funciones útiles para PHP
PHP ofrece un gran número de funciones que permiten manipular matrices. Las funciones
utilizadas con mayor frecuencia son, según el ciclo que se abre:
si la posición (cont) = "1 o 2 o 3 o 4 o 5 o 6 o 7 o 8 o 9 "

entonces
sumar 1 a cont
termina condición
termina ciclo si la posición (cont) es diferente de "1 o 2 o
3 o 4 o 5 o 6 o 7 o 8 o 9 "
si cont > 4 entonces
mensaje de error
si no
si la posición(cont) = "." entonces
sumar 1 a cont
si la posición(cont) = "1 o 2 o 3 o 4 o 5 o 6 o 7 o 8 o 9 "
entonces
sumar 1 a cont
terminar condición
si cont > 6 entonces
mensaje de error
termina condición
termino condición
mover desde la posición (cont-in a con-fin) a num1
Heurtel (2011. p. 61) “manejo de caracteres, fecha y hora, y
envío de correo electrónicos.”

Las funciones utilizadas con mayor frecuencia en PHP son:

Nombre Función
Count Cuenta el número de elementos de una matriz.
In_array Comprueba si un valor está presente en una matriz.
Array_search Busca un valor en una matriz.
Array_replace Remplaza valores de una matriz.
Explode Divide una cadena según un separador, y almacena los elementos
en una matriz.
Implode Reagrupa los elementos de una matriz en una cadena mediante un
separador.
Str_replace Divide una cadena en fragmentos de longitud fija, y almacena los
elementos en una matriz.
Time Esta función no necesita ningún parámetro obligatorio, y devuelve
la cantidad de segundos pasados desde las cero horas hasta el
momento exacto en que es ejecutado.
Funciones utilizadas con mayor frecuencia en PHP
La función is_array permite conocer si una variable es de tipo matriz. Existen muchas
otras funciones, y puedes consultar la descripción de cada una en línea, en el sitio oficial
de PHP https://www.php.net/ .Ahí encontrarás, especialmente, funciones para:
• Realizar cálculos
• Extraer una submatriz de una matriz
• Fusionar matrices
• Duplicar una matriz
Count. Permite conocer el número de elementos en una variable en general en una matriz
en particular.
Sintaxis. Entero count (mixto variable)

Variable en cuestión. La función count devuelve el número de elementos en la variable. Si

está inicializada, devuelve cero. Si está inicializada, pero no es una matriz, devuelve uno
(hay un elemento en una variable escalar). Si la variable es una matriz, devuelve el
número de elementos presentes en ella (cero, si está vacía).
Ejemplo de count:
<?php
Echo ‘$x no inicializada => ‘, count ($x), ‘<br />’;
$x = 1;
Echo ‘$x de type escalar => ‘, count ($x) , ‘<br />’;
$x = array () ;
Echo ‘$x matriz vacia => ‘, count ($x), ‘<br />’;
$x = array (1,2) ;
Echo ‘$x matriz de 2 elementos => ‘, count ($x), ‘<br />’;
?>
Resultado
$x variable no inicializada => 0
$x variable de tipo escalar => 1
$x matriz vacía => 0
$x matriz de 2 elementos => 2

In_array
La función in_array permite probar si un valor está presente en una matriz.
Sintaxis
Booleano in_array (mixto valor_buscado, matriz matriz [, booleano mismo_tipo])
Donde:
Valor_buscado, valor buscado en la matriz.

Matriz, matriz en la que se efectúa la búsqueda.
Mismo_tipo, indica si la comparación debe verificar que los elementos son del mismo tipo
(por defecto FALSE)
In_array, devuelve TRUE si el elemento buscado está en el matriz, y FALSE en caso
contrario.
Ejemplo de In_array
<?php
$numero = array (‘ cero ’ , ‘ uno ‘ , ‘ dos ‘ ,
‘ cero ‘ => 0, ‘ uno ‘ => 1, ‘ dos ‘ =>2);
Echo ‘1 tipo indiferente => ‘,
Var_dump (in_array( 1, $numeros)), ‘<br />’;
Echo ‘3 tipo indiferente => ‘,
Var_dump (in_array( 3, $numeros)), ‘<br />’;
Echo ‘ \ ‘ 1 \ ‘ mismo tipo => ‘,
Var_dump (in_array(‘ 1 ‘ , $numeros, TRUE) ) , ‘<br />;
Echo ‘ \ ‘ uno \’ tipo indiferente => ‘,
Var_dump (in_array(‘ uno ‘ , $numeros) ) , ‘ <br />;
Echo ‘ \ ‘ tres \’ tipo indiferente => ‘,
Var_dump (in_array(‘ tres ‘ , $numeros) ) , ‘ <br />;

Echo ‘ \ ‘ tres \’ mismo tipo => ‘,

Var_dump (in_array(‘ tres ‘ , $numeros, TRUE ) ) , ‘ <br
/>;
?>
Resultados
A continuación, se muestra que arroja el valor que se declara como fijo, desde el código
de programación en PHP.
Resultado de In_array
Estructurar el código, dividiéndolo en bloques especializados con funciones, ofrece

muchas opciones, ya que cada función que se considere sabrá hacer algo con los datos
que se le proporcionen. Esto quiere decir que son capaces de hacer tareas especializadas.
Aunque la función se crea una vez, es reutilizable todas las veces que se necesiten en
todos los sitios, y en cualquier otro proyecto en el que se requiera realizar una tarea
similar. Ahorra trabajo.

2.3.4. Librerías de códigos
Las librerías, o bibliotecas de código de PHP, permiten agrupar varias funciones y variables
en una misma página, y después integrarla en otra. Para la creación de librerías de código
no hay pasos a seguir, sólo es cuestión de usar la lógica para programar con el lenguaje
PHP.
Como expresa Sintes (2013), “las librerías son archivos PHP que se pueden incluir en
cualquier otro archivo PHP. Las librerías se suelen utilizar para centralizar fragmentos de
código que se utilizan en varias páginas. De esa manera, si se quiere hacer alguna
modificación, no es necesario hacer el cambio en todas las páginas si no únicamente en la
librería”.
Una vez realizada la agrupación de varias funciones de PHP, así como las variables de una
misma página para agregarla en otra, se utiliza la etiqueta include, que permite incluir y
ejecutar el contenido del archivo indicando que contiene la cláusula. De esta forma,
pueden escribirse en la página web que se está construyendo, y así utilizar las librerías de
funciones y facilitar su portabilidad.
La sintaxis de la declaración de una librería es, según Cobo (2005):

<? Php include (“nombredelarchivo.php”)?>
Para que observes cómo se construye una librería, la forma de vincularla y su

funcionamiento, revisa el recurso de video Desarrollo, vinculación y funcionamiento de
una librería (UnADM, 2014c).
Para consultar el video Desarrollo,
vinculación y funcionamiento de una
librería, da clic en la imagen.

Existen librerías PHP ya prediseñadas que facilitan que las páginas web PHP sea más
rápidas de construir, de acuerdo con las necesidades de la empresa. Es posible también
realizar más librerías. La librería FPDF permite generar formatos PDF. Después de hacer un
registro y almacenarlo en la base de datos, se genera el documento en formato PDF. FPDF
es muy diferente a PDF. El primero es una librería que permite generar formatos en PDF
para el usuario que se registró. Según Eslava (2013a):
La librería FPDF, creada en septiembre de 2001, no necesita licencia de uso, ni

tampoco alguna configuración especial de PHP. Lo único que se necesita es la
librería, que se puede descargar del sitio web oficial de FPDF.org.
La creación de ficheros FPDF requiere que en el código de programación web

en PHP incluya la clase de FPDF .php. Para ello bastará con que contenga la
siguiente instrucción:
<include (“FPDF.php”)> (p. 37).
Para crear una librería sólo se requiere programar lo que se desea que lleve la página web
en PHP, por ejemplo, un calendario, fecha, hora, conexión de base de datos, dependiendo
de los requerimientos de la empresa. Esto dependerá de la lógica en que se utilicen los
códigos. Una vez realizado lo que se desea, se debe guardar con la nomenclatura
acordada, por ejemplo, hora, con la extensión. php, y mandarse a llamar en otras páginas
web solo con <?php include('hora.php') >. Con esta etiqueta se realiza lo solicitado. Claro
está, el archivo de donde se hizo la librería deberá estar guardado en la carpeta del sitio
web que se está construyendo.
A continuación se muestra un ejemplo de librería que hace posible tomar del sistema de
tu computadora la hora actual. Para que se visualice la hora en tu página web, el código es
el siguiente:

Código de hora.php
<?php
date_default_timezone_set("America/mexico_city" ) ;
$hora = date('h:i a');
print "$hora";
?>
Esta librería se almacena como hora.php y se utilizará en todas las páginas web PHP,
como se muestra a continuación:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Libreria php</title>
</head>
<body>
<p>Ejemplo de libreria PHP
</p>
<p>Fecha de Orden:
<label for="textfield"></label>
<input type="text" name="fecha_orden" readonly="readonly"
style="width:auto" value="<?php include('hora.php')?>"
size="22" />
</p>
</body>
</html>
Una librería de PHP facilita la realización de las páginas web para agilizar el código de
programación, pues ya hay librerías definidas que puedes hacer, y usarlas en la

construcción de otros sitios web. Para crear tus propias librerías sólo se requiere que
programes lo que deseas que haga y guardarla con el nombre que desees, así como se
expuso en el ejemplo anterior para que lo reconozcan otras páginas web php, y si deseas
que se visualice la hora, sólo se deberá incluir <?php include('hora.php')?>
2.3.5. Formulario activo en PHP
En este subtema se estudiará la forma de comunicarse con el exterior, mediante

formularios activos con PHP, que pueden ser enviados y conectados de una forma sencilla
a bases de datos con el servidor web. Precisamente esta sencillez y facilidad de
interacción con los formularios HTML es una de las características más destacadas del
lenguaje de programación web PHP (Meloni, 2012).
En un formulario activo es importante que se almacene la información que se ingresa

cuando el usuario proporciona los datos requeridos, éstos se envían y almacenan en la
base de datos que está dentro del servidor web. Existen diferentes formas de pasar la
información entre páginas web, las más conocidas utilizan ficheros, variables, sesión,
cookies, argumentos GET y POST.
Uso de GET
Según Eslava (2013b):

Los argumentos GET pasan la información como parte de la URL. Cuando se
utilice esta forma de trabajar, las variables podrán verse en la casilla de
dirección del navegador. Para utilizarlas debemos escribir el nombre de la
página web seguido de un símbolo de interrogación (?) y el conjunto de
parejas de variable/valor separadas del símbolo (&). Por ejemplo, una
dirección como:

script.php?variable1=contenido1&variable2= contenido2
Lo que hace es pasarle a la página web script.php los argumentos variable1

con valor contenido1 y variable 2 con valor contenido dos (p. 96).
Para indicarle a un formulario que se desea utilizar el método GET para comunicar, se
debe especificar con el atributo method, tag<FORM>, como se indica a continuación:
<form name=”formulario” method=”GET” action=”destino.php”>

Donde:
destino .php: es la página PHP que procesará el formulario.
Se puede hacer uso del siguiente código para leer todas las variables y sus contenidos
pasados por GET:
<html>
<body>
<?php
Echo “Variables pasadas mediante GET:<br>”;
foreach ($_GET as $indice => $valor) {
echo “$indice : $valor”;
}
?>
</body>
</html>.
Observa un ejemplo simple con un campo texto, y cómo se recoge este en otra página
para su posterior proceso:
Ejemplo con método GET:
<<formulario.html>>
<HTML>
<HEAD><TITLE>Formulario GET</TITLE></HEAD>
<BODY>
<FORM METHOD=”GET” ACTION=”destino:php”>
Edad: <INPUT TYPE=”text” NAME=”edad”>
<INPUT TYPE=”submit” VALUE=”aceptar”>
</FORM>

</BODY>
</HTML>
<<destino.php>>
<HTML>
<HEAD><TITLE>Recogida de datos del formulario
GET</TITLE></HEAD>
<BODY>
<?php
$edad= $_GET[‘edad’];
print(“La edad es : $edad”);
?>
</BODY>
</HTML>
La utilización del método GET es altamente insegura, porque no hay forma de ocultar
datos privados en la dirección web, ya sean contraseñas de entrada o números de tarjetas
de cuenta bancaria. El método POST arregla estos problemas, ya que los parámetros y
valores se pasan de forma oculta. Las modificaciones a realizar en el ejemplo anterior con
el método GET son mínimas con respecto del siguiente ejemplo con método POST (Eslava,
2013b, p.98):
<<formulario.html>>
<HTML>
<HEAD><TITLE>Formulario POST</TITLE></HEAD>
<BODY>
<FORM METHOD=”POST” ACTION=”destino:php”>
Edad: <INPUT TYPE=”text” NAME=”edad”>
<INPUT TYPE=”submit” VALUE=”aceptar”>
</FORM>

</BODY>
</HTML>
<<destino.php>>
<HTML>
<HEAD><TITLE>Recogida de datos del
formularioPOST</TITLE></HEAD>
<BODY>
<?php
$edad= $_POST[‘edad’];
print(“La edad es : $edad”);
?>
</BODY>
</HTML>.”
En el ejemplo anterior, se ha integrado un elemento de formulario que únicamente

almacena un valor. A continuación, se muestra una tabla con los monovalores y los
multivalores:
Monovalor: un único valor Multivalor

-Text -Radio
-Textarea -Checkbox
-Button -File
-Select (simple) -Select (multiple)
-Hidden
-Password
-Submit
Tabla de formulario monovalor o multivalor. Fuente: Eslava, 2013b.
El proceso para los campos multivalor es diferente a los monovalor. Esto se refiere a que
ya tiene un valor fijo que no se puede cambiar. A continuación se expone un ejemplo:

<INPUT TYPE=”checkbox” NAME=”extras”[]” VALUE=”garaje”

CHECKED>Garaje
<INPUT TYPE=”checkbox” NAME=”extras”[]” VALUE=”piscina”
>Piscina
<INPUT TYPE=”checkbox” NAME=”extras”[]” VALUE=”jardin”>Jardín
Resultado de input:
La creación de un formulario con monovalor se realiza utilizando un elemento select

múltiple, que permite generar un menu de varias opcion en forma de lista, seleccionar una
opción y guardarlo en la base de datos con el servidor web. A continuación, se muestra un
ejemplo de código con la selección de idiomas: ingles, francés, alemán y holandés:

<SELECT MULTIPLE SIZE=”3” NAME=”idioma[]”>

<OPTION VALUE”ingles” SELECTED> ingles
<OPTION VALUE”frances” >Frances
<OPTION VALUE”aleman” > Aleman
<OPTION VALUE”holandes” > Holandes
</SELECT>
<?PHP
$idiomas= $_REQUEST[“idiomas”];
Foreach($idiomasas $idioma) print(“$idioma<BR>\n”);
?>
Enviando ficheros a través de un formulario
Si se desea subir un fichero; es decir, si en la página web se desea que los usuarios
adjunten archivos al servidor, por ejemplo el curriculum vitae, el resultado de una
encuesta, etcétera, se utiliza el elemento de entrada File, pero hay que tener en cuenta
una serie de consideraciones importantes para utilizarla en los formularios:
• El elemento FORM debe tener el atributo ENCTYPE=”multipart/form-data”.

• El fichero tiene un límite en cuanto a su tamaño, y se fija de dos formas diferentes:
1. En el fichero de configuración php.ini, que contiene la configuración de PHP para la
conexión de la bases de datos, con el que se pueden controlar muchos aspectos de
su funcionamiento, en este caso subir un file en la base de datos.
2. En el propio formulario. Esto quiere decir que va dentro del formulario que se crea
desde cero.
Recomendaciones para la utilización de ficheros

• Es necesario nombrar al fichero con una etiqueta que evite coincidencias con otros ya
subidos. Por ello, y como norma general, debe descartarse el nombre original del
fichero y crear uno nuevo que sea único, se recomienda nombrar con abreviaciones
del sitio web; por ejemplo, si es un sitio para realizar compras puedes ponerle cms, y
utilizar las misma letras de lo que se desea hacer.
• El fichero subido se almacena en un directorio temporal, y se deberá mover al

directorio de destino usando la función move_upload_file ().
Procedimiento de cómo realizar un fichero
Si se ha subido correctamente el fichero, se realizan los siguientes pasos:

1. Asignarle un nombre.
2. Moverlo a su ubicación definitiva.
Si no es fichero, se debe mostrar un mensaje de error.
Si es fichero, se muestra el siguiente código:
Fichero PHP
If(is_uploaded_file($_FILES[‘imagen’][‘tmp_name’])){
$nombreDirectorio= “img/”;
$nombreFichero= $_FILE[‘imagen’][‘name’];
$nombreCompleto= $nombreDirectorio. $nombreFichero;
If(is_file($nombreCompleto)){
$idUnico= time ();
$nombreFichero= $idUnico. “_”. $nombreFichero;
}
Move_uploaded_file ($_FILE
[‘imagen’][‘tmp_name’].$nombreDirectorio. $nombreFichero);

} else
Print (“No se ha podido subir el fichero\n”);
El fichero PHP anterior muestra el movimiento de un archivo a un lugar fijo. Esto quiere
decir que se guarda en la base de datos.
Para observar cómo se realiza la conexión de formularios activos con PHP con un servidor
web, ingresa al recurso de video Formulario activo PHP (UnADM, 2014d).
Para consultar el video Formulario activo

PHP, da clic en la imagen
En este subtema se expuso el uso del lenguaje de programación web PHP en la realización
de páginas dinámicas. Se observó que mediante este código es posible definir tus propias
librerías y programar formularios dinámicos, lo que te posibilitará convertir un diseño
web en un sitio con capacidad de autogestión y actualización dinámica de información a
través del uso de base de datos y de la programación web, tal como se observa en el
video.
Cierre de la unidad
En esta unidad aprendiste que para diseñar y construir un sitio web se necesita saber
cuáles son las fases que ayudarán a tener un orden en su construcción. Un punto muy
importante, e independientemente de que empieces a programar una página web en
diferentes lenguajes, es que tengas mucha creatividad, ya que con ella conseguirás que tu
sitio tenga una mejor imagen y popularidad a nivel nacional e internacional. Una vez
seleccionado el tema para construir el sitio, se deberá recolectar información con la
organización de lo que llevará, cuáles son los colores que se deberán utilizar (logotipo), así

como la forma en que la empresa desea que se vea, si formal o informal. Como formal se
entiende que puede no integrar gran cantidad de recursos multimedia, como imágenes,
música, animaciones, etcétera; es decir, sólo las necesarias. Informales se consideran las
páginas saturadas de imágenes, música, video, etcétera. También se debe tener en cuenta
que si el sitio web se almacena en un servidor que no tiene mucha capacidad de memoria
RAM, estará tan cargado de imágenes, video y música, que puede ser muy lentito en su
visualización, ya sea en Internet o Intranet.
Por otro lado, aprendiste a programar con los lenguajes HTML y PHP. Visualizaste la
estructura básica de HTML, elemento principal para que se pueda ingresar otros lenguajes
de programación, por ejemplo, PHP, JavaScript, ASP etcétera. También revisaste las
principales etiquetas de HTML, para qué sirve cada una y qué atributos tienen. Recuerda
que las etiquetas HTML también son conocidas como tags. Otro punto importante que se
debe tener presente es que en la construcción del sitio web debe haber un orden en los
archivos que estarán vinculados en las páginas del sitio. Para ello es necesario primero
crear una carpeta con el nombre del sitio web, y dentro de ella, otras para imagen,
música, videos, bases de datos, documentos descargables, etcétera, y fuera de esas
carpetas, las páginas web. Esto te ayudará a identificar enseguida el error si hay un
problema con la visualización de una página. También se mencionó que hay algunos
navegadores web que no permiten visualizar las etiquetas de multimedia HTML de música
y video. Se revisó la función del frame en HTML, también conocido como macro; recuerda
que es una ventana independiente dentro de la propia ventana del navegador. Cada frame
tiene sus propios bordes y también sus barras de desplazamiento.
Mediante un frame es posible dividir la ventana del navegador en varias subventanas

independientes. Así mismo, se vio la forma de construir una tabla y formulario en HTML.
Otro tema que se revisó fue la estructura de PHP. Para trabajar con ella se necesita HTML.
PHP es un lenguaje de programación web que permite que se conecten las bases de datos
con un servidor web; dicho lenguaje, como se observó, trabaja con programación

orientada a objetos. También se visualizaron los operadores y las librerías PHP. El uso de
éstas permite agrupar varias funciones y variables en un mismo archivo, de manera que
sea posible incluirlas en distintas páginas y disponer sus funciones fácilmente.

Para saber más
Para saber más sobre el lenguaje HTML5, puedes acceder al sitio web del W3C, organismo
regulador de la Web:
https://www.w3.org/standards/webdesign/
Si te interesa saber más sobre la diferencia entre HTML y HTML5, entra al siguiente sitio:
https://www.w3schools.com/html/
Si quieres conocer más sobre HTML5, revisa al siguiente sitio:
https://www.w3schools.com/html/html5_intro.asp
Si te interesa saber más sobre el instalador web Xampp, ingresa al siguiente sitio:
https://www.apachefriends.org/es/index.html
Si quiere conocer más del instalador web Appserv, revisa el siguiente sitio:
https://www.malavida.com/es/soft/appserv/#gref
Si quieres conocer más a fondo PHP, visita la página:
https://desarrolloweb.com/manuales/manual-php.html
Si ya has comenzado a programar en PHP y quieres saber más acerca de este lenguaje,
puedes visitar el siguiente documento:

• Olson, P (Ed.). (2014). Manual de PHP. Recuperado de

http://www.php.net/manual/es/index.php
Para consultar algunas recomendaciones sobre usabilidad en las páginas web, consulta el
siguiente sitio:
https://www.w3.org/2003/11/benefits-es.html
Fuentes de consulta
• Aubry, C. (2012). Cree su primer sitio web-del diseño a la realización. Barcelona:

ENI.
• Arinyo, R. (2000). CEIG 2000: X Congreso Español de Informática Gráfica. Castellón

de la Plana: Universitat Jaume.
• Bartolomé, M. (2013). Páginas con PHP. Recuperado de

http://www.mclibre.org/consultar/php/index.html
• Berciano, A. (1999). Guía HTML. Recuperado de

http://platea.pntic.mec.es/~abercian/guiahtml/frames.htm
• Born, G. (2001). Compendium HTML: con XHTML, DHTML, CSS, XML, XSL y WML.
España: Marcombo.
• Cobo, A. (2005). PHP y MySQL: Tecnología para el desarrollo de aplicaciones web.

Madrid: Díaz de Santos.

• Corona, E. Et al. (2005). Aplicación de las normas internacionales de contabilidad.

Valencia: Ciss.
• Equipo Vértice. (2010). Técnicas avanzadas de diseño web. Málaga: Publicaciones

Vértice.
• Eslava, V. (2013a). El nuevo PHP concepto avanzado. España: Bubok publishing.
• Eslava, V. (2013b). El nuevo PHP paso a paso. Madrid: Bubok publishing.
• Ferrer, J. (2008). Curso completo de HTML. Recuperado de

http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
• Gauchat, J. (2012). El gran libro de HTML5, CSS3 y JavaScript. Barcelona:

Marcombo.
• González, E. (2014). Funciones básicas en PHP. Recuperado de

http://www.aprenderaprogramar.com/index.php?option=com_content&view=arti
cle&id=574:funciones-basicas-en-php-strreplace-time-date-md5-strtolower-
strtoupper-ejemplos-cu00828b&catid=70:tutorial-basico-programador-web-php-
desde-cero&Itemid=193
• Herrera, E. (2012). Arrancar con HTML5. Curso de programación. Barcelona:

Marcombo.
• Heurtel, O. (2009). PHP y MySQL Domine el desarrollo de un sitio web dinámico e

interactivo. Barcelona: ENI.

• Heurtel, O. (2011). Php 5.3 desarrollar un sitio web dinámico e interactivo. Madrid:
ENI.
• Krug, S. (2001). No me hagas pensar: una aproximación a la usabilidad en la web.

México: Pearson Educación.
• Lancker, L. (2009). Recursos informáticos colección. HTML 4. Dominar el código

fuente. Barcelona: ENI.
• Luján, S. (2002). Programación de aplicaciones web. Historia, principios básicos y

clientes web. Alicante: Club Universitario.
• Magal, T., Tortajada, I. y Morillas, S. (2006). Preproducción multimedia. Valencia:

Universidad Politécnica de Valencia.
• Mariño. R, (2005). Diseño de páginas web y diseño gráfico. España: Ideas Propias.
• Mclntire, P. (2009). Técnicas innovadoras en el diseño web. Madrid: Anaya

Multimedia.
• MediaActive. (2010). Aprender Dreamweaver CS5 con 100 ejercicios prácticos.

Barcelona: Marcombo.
• Meloni, J. (2012). PHP, MySQL y Apache. España: Anaya Multimedia.
• Orós, J. C. (2010). Diseño de páginas web con XHTML, JavaScript y CSS, 3a. ed.
México: Alfaomega.

• PHP. (2014a). Operadores aritméticos. Recuperado de

http://www.php.net/manual/es/language.operators.arithmetic.php
• PHP. (2014b). Operadores bit a bit. Recuperado de

http://www.php.net/manual/es/language.operators.bitwise.php
• PHP. (2014c). Operadores de comparación. Recuperado de

http://www.php.net/manual/es/language.operators.comparison.php
• Quero, E., García, A. y Peña, J. (2007). Mantenimiento de portales de la

información: explotación de sistemas. Madrid: Paraninfo.
• Sánchez, J. (10 de febrero del 2014). Banda ancha de México, de las más lentas:
Netflix. El Economista. [En línea]
http://eleconomista.com.mx/industrias/2014/02/10/banda-ancha-mexico-las-
mas-lentas-netflix
• Sintes, B. (2013). Funciones y bibliotecas. Recuperado de

https://www.mclibre.org/consultar/php/lecciones/php-funciones.html
• Spona, H. (2010). Programación de bases de datos con MYSQL y PHP. Barcelona:

Marcombo.
• Wlling, L. y Thomson, L. (2009). Desarrollo web con PHP y MySQL. Madrid: Anaya
Multimedia.
Fuentes complementarias

• Aulaclick. (2014). Navegador web. Recuperado de http://www.aulaclic.es/paginas-

web/t_4_1.htm
• Bakken, S. et ál. (2002). Manual PHP. Recuperado de:

https://www.academia.edu/14880847/PHP_Manual_Stig_Sæther_Bakken
• Barry, M. et ál. (1998). Una breve historia de Internet. Novática.
• Ferrer, J., Garcia, V. y García, R. (s. f.). Curso completo de HTML.
• Imaginanet. (2014). Diccionario web. Navegador. Recuperado de

http://www.imaginanet.com/diccionario-de-diseno-y-programacion-
web.html#s1022
• Juárez, R. (2012). Hábitos de los usuarios de Internet en México. Recuperado de:

https://es.slideshare.net/brendatre/hbitos-de-los-usuarios-de-internet-en-mxico-
2012
• Oxford University Press. (2002). Diccionario Internet. Madrid: Universidad

Complutense de Madrid.
• Sessink, O. (2013). Bluefish. Recuperado de

http://bluefish.openoffice.nl/index.html
Videografía

• TV UnADM. (2014a). Aplicación de código HTML y HTML5 de video y audio [Archivo

de video]. Consultado de http://youtu.be/UeceiRn5Z1w
• TV UnADM. (2014b). Aplicación de las etiquetas HTML [Archivo de video].

Consultado de http://youtu.be/jEz4qNtGE3w
• TV UnADM. (2014c). Desarrollo, vinculación y funcionamiento de una librería

[Archivo de video]. Consultado de http://youtu.be/CcMxsIRn2vA
• TV UnADM. (2014d). Formulario activo PHP [Archivo de video]. Consultado de

http://youtu.be/-15VHVeGLds
• TV UnADM. (2014e). Formulario de páginas web en HTML [Archivo de video].

Consultado de http://youtu.be/_nj4fPEFQYE
• TV UnADM. (2014f). Instalación de instaladores de servidor web AppServ y Xampp

[Archivo de video]. Consultado de http://youtu.be/h8AX58jNqbA
• TV UnADM. (2014g). Pasos para insertar archivo de sonido en una página web
[Archivo de video]. Consultado de http://youtu.be/d97GPKN5S2s
• TV UnADM. (2014h). Utilización de editores web [Archivo de video]. Consultado de:

http://youtu.be/fD8PHQwK57M

DPW1 U2 Contenido - pdf2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

DPW1 U2 Contenido - pdf2

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Software

Unidad 2. Diseño de sitios web

Ciudad de México, julio del 2022.

Universidad Abierta y a Distancia de México

UNADM | DCEIT | DS | DPW1 2

Unidad 2. Diseño de sitios web

Una página web es un documento electrónico que es elaborado con lenguajes de

En esta unidad se expondrán las herramientas necesarias y el proceso para la construcción

UNADM | DCEIT | DS | DPW1 3

Internet Explorer y el logo Internet Explorer son marcas registradas de Microsoft

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

Microsoft Access 2007, marca registrada de Microsoft Corporation.

UNADM | DCEIT | DS | DPW1 4

Al término de esta unidad lograrás:

• Analizar las fases para la creación de sitios web.

• Utilizar los lenguajes de programación para la construcción de un sitio web,

2.1. Fases de desarrollo web

En la actualidad una organización, pequeña o grande, necesita contar con un sitio en la

UNADM | DCEIT | DS | DPW1 5

Una organización puede requerir el desarrollo y mantenimiento de un sitio web, ya sea

• Planificación y definición del sitio

UNADM | DCEIT | DS | DPW1 6

• Expertos de contenidos: aportan y proponen información necesaria de acuerdo con el

En el caso de esta asignatura, es posible asumir primordialmente tareas de experto

UNADM | DCEIT | DS | DPW1 7

Gestión de tecnologías de información. Recapitulando, según su conformación económica,

En el segundo subtema 2.1.2. Documentación y organización, una vez realizada la

En el tercer subtema 2.1.3. Mapa de navegación, se construirá un bosquejo de la

UNADM | DCEIT | DS | DPW1 8

funcionalidad, portabilidad, fiabilidad, mantenibilidad, eficiencia, usabilidad (estas

En esta etapa de planificación y definición, antes de comenzar a construir el sitio, es

UNADM | DCEIT | DS | DPW1 9

¿Cuál es la misión, la finalidad y los objetivos?

Considerar la misión de la organización será de gran ayuda para contemplar otras

Incrementar beneficios: categoría que integra la mayoría de sitios de comercio

UNADM | DCEIT | DS | DPW1 10

UNADM | DCEIT | DS | DPW1 11

Algunas de las interrogantes para identificar a al público objetivo son:

UNADM | DCEIT | DS | DPW1 12

visitante son: ¿Cómo se traduce la satisfacción de un objetivo de la organización (por

4. Determinar las restricciones del sitio. Mediante el análisis de un sitio se pueden

El análisis de costo beneficio es esencial para definir las restricciones en el desarrollo de

UNADM | DCEIT | DS | DPW1 13

Es importante también considerar si se tiene que entregar el proyecto completo o se

5. Determinar el contenido del sitio. El contenido es la parte principal de un sitio, un buen

UNADM | DCEIT | DS | DPW1 14

6. Definir la arquitectura del sitio. Consiste en la “la organización de la información y la

En la fase de planeación se recomienda realizar un diagnóstico; para ello, es

UNADM | DCEIT | DS | DPW1 15

externo. Requieren bases de datos importantes para el control de chequeo y seguridad de

En el estado preliminar de planificación y definición, se debe realizar un chequeo de

De acuerdo con las necesidades de la empresa y el contenido que conformará el sitio, se

Es importante que consultes algunas preguntas que apoyan el análisis, planificación y

El proceso creativo de buscar un tema para el diseño debe abordarse en cuanto

UNADM | DCEIT | DS | DPW1 16

distintivo, y debe estar en consonancia con la identidad de la marca. También debe

Las tormentas de ideas (brainstorming) consisten en reuniones donde se aportan

Ejemplo de selección de tema:

Metas de la línea de compras:

UNADM | DCEIT | DS | DPW1 17

• Establecer un login de usuario para acceder y administrar la línea de compras como

Alcance: se dispone de los recursos necesarios para llevarla a cabo. Se buscará la

2.1.2. Documentación y organización