Formación para el Trabajo - Sexto Semestre

INTRODUCCIÓN AL DISEÑO WEB

Páginas web y sitio (Milenium.com.mx, 2019)

Un sitio web es un conjunto de archivos electrónicos y páginas web referentes a un tema en

particular, incluyendo una página inicial de bienvenida generalmente denominada home page, a
los cuales se puede acceder a través de un nombre de dominio y dirección en Internet específicos.
El World Wide Web, o simplemente Web como se le llama comúnmente, está integrado por sitios
web y éstos a su vez por páginas web. La gente suele confundir estos términos, pero un sitio web
es en realidad un conjunto de páginas web. A manera de ejemplo, la Secretaría de Turismo en
México cuenta con un sitio web que se puede visitar a través de la siguiente dirección http://www.
gob.mx/sectur/ y cada tema (vínculo) que se puede consultar dentro de este sitio representa una
página web.

Los sitios web son empleados por las instituciones públicas y privadas, organizaciones e individuos
para comunicarse con el mundo entero. En el caso particular de las empresas, este mensaje tiene
que ver con la oferta de sus bienes y servicios a través de Internet, y en general para eficientar sus
funciones de mercadotecnia.

El sitio web no necesariamente debe localizarse en el sistema de cómputo de su negocio. Los

archivos y documentos que integran el sitio web pueden ubicarse en un equipo en otra localidad,
inclusive en otro país. El único requisito es que el equipo en el que se almacenen los documentos
esté conectado a la red mundial de Internet. Este equipo de cómputo o servidor web, como se le
denomina técnicamente, puede contener más de un sitio web y atender concurrentemente a los
visitantes de cada uno de los diferentes sitios.

Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección particular
para que los usuarios puedan acceder a la información contenida en ellos. Estas direcciones, o
URLs (por sus siglas en inglés Uniform Resource Locator), aparecen cotidianamente en todos
los medios de comunicación como son prensa escrita, radio, televisión, revistas, publicaciones
técnicas y en el propio Internet a través de los motores de búsqueda (por su denominación en
inglés search engines). Los nombres de estos sitios web (dominios) obedecen a un sistema
mundial de nomenclatura y están regidos por el ICANN (Internet Corporation for Assigned Names
and Numbers).

Los sitios web pueden ser de diversos géneros, destacando los sitios de negocios, servicios, comercio
electrónico en línea, imagen corporativa, entretenimiento, redes sociales y sitios informativos.
Recuperado de: https://www.informaticamilenium.com.mx/es/temas/que-son-los-sitios-web.html

Conceptos básicos (Dominio, URL, Hosting, Applets)

(Ing. Wellington Montilla Pujois, 2019)

Hipervínculo: Al hipervínculo se le suele llamar "enlace web" o en su versión anglosajona "link".

Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o
una ubicación diferente en la misma página. El destino es con frecuencia otra página Web, pero
también puede ser una imagen, una dirección de correo electrónico, un archivo (como por ejemplo,

18 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervínculo puede

ser texto o una imagen.

Hosting: Hospedaje web. Espacio de disco donde se almacenan las páginas webs para que sean
accesibles a través de Internet.

Dominio: Dirección web asociada a una página web. ISP: En el ámbito del desarrollo de sitios web,
se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que
pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web, servicios de
contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros. 

URL: (Universal Resource Location/Localizador de recursos universal) Cadena que proporciona

la dirección de Internet de un sitio web o un recurso del World Wide Web, junto con el protocolo
mediante el cual se tiene acceso al sitio o al recurso. El tipo más común de dirección URL es http://,
que proporciona la dirección de Internet de una página web. Otros tipos de dirección URL son
gopher://, que proporciona la dirección de Internet de un directorio Gopher, y ftp://, que proporciona
la ubicación de red de un recurso FTP.
Ejemplos: http://www.desenredate.com , http://www.google.com

Applets: Programas desarrollados con Java para mejorar la presentación de las páginas web que
realizan animaciones, juegos e interacción con el usuario. El Applet es un programa que puede
incrustarse en un documento HTML (página web). Cuando un navegador carga una página web
que contiene un Applet, éste se descarga en el navegador Web y comienza a ejecutarse, lo cual
nos permite crear programas que cualquier usuario puede ejecutar. Uno de los requisitos para el
Applet funcione es tener instalado Java y que esté activado a través del explorador web.
Recuperado de: https://clasew.jimdo.com/conceptos-b%C3%A1sicos-de-una-pagina-web/

Elementos de una página web (VirtualiaNet, 2019)

Cada día nacen cientos de páginas web ya sea para entretener a los lectores, para suministrar
información, promover intereses o con fines comerciales.

Pero muchas de ellas no cumplen con los requisitos “mínimos” que toda buena página debería
tener. A continuación se mencionan los elementos de diseño web que debes considerar para el
diseño de tu sitio o página web.
1) Contenido. Una página web debe ser atractiva. Pero no solo a la vista, sino también en el
contenido. Eso significa que debe tener contenido interesante que atraiga (y atrape) al público
objetivo. De hecho, ninguna página puede considerarse exitosa si no cuenta con un contenido
atractivo y actualizado con cierta frecuencia. Eso servirá no solo para aumentar el número de
nuevas visitas, sino para que los antiguos visitantes consulten la página a menudo y la usen como
referencia.

2) Tipografía. Es importante usar fuentes llamativas pero sencillas de leer. También es

importante variar el tamaño de una misma fuente para resaltar secciones interesantes del
contenido y del texto.

3) Imágenes. En el diseño web son muy importantes las buenas fotografías, preferentemente
tomadas por un profesional. Es importante que no estén pixeleadas o desenfocadas, ya que puede
causar una mala imagen del sitio en general.

SUBMÓDULO 1 19
 Formación para el Trabajo - Sexto Semestre

4) Animaciones y movimiento. Para generar una sensación de dinamismo es bueno utilizar

elementos animados. Pero atención: no abuses de ellos, ya que pueden sobrecargar la página.
Lo ideal es que no sobrepasen el 20% del total de la página ya que de otra forma pueden causar
saturación, distraer la atención de cosas importantes que se quieren decir y por último sacar al
usuario del sitio.
5) Botones e iconos. Utilizar botones prácticos y representativos, así como iconos grandes y vistosos
aumenta la facilidad de navegación en la página. Pero no es necesario colocar accesorios que
no brinden un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo huso
horario.
6) Fondos claros y sencillos. Los fondos claros o totalmente blancos facilitan la visualización, pero
también dan un aspecto despejado a la página resaltando las imágenes. Existe la tendencia a
utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.
7) Enlaces a redes. Es de gran ayuda para los usuarios colocar enlaces a redes sociales con las
cuales interactúan con facilidad. Esto ayuda además a crear comunidad.
8) Sobriedad. Una página debe permitir una fácil visualización de los contenidos (vídeos, imágenes,
textos). Saturar al cibernauta es contraproducente. Si la información o contenido tarda en
cargarse, error: eso supone una visita menos y un potencial cliente que no conoció la oferta.
Tener en cuenta los 8 puntos anteriores a la hora de optar por el diseño web es garantía de éxito.
Recuperado de: https://blog.virtualianet.com/diseno-web-los-8-elementos-imprescindibles/

Estándares de diseño web (W3C) (akus.net, 2019)

Un estándar es un conjunto de reglas normalizadas que describen los requisitos que deben ser
cumplidos por un producto, proceso o servicio, con el objetivo de establecer un mecanismo base
para permitir que distintos elementos hardware o software que lo utilicen, sean compatibles
entre sí.

El W3C, organización independiente y neutral, desarrolla estándares relacionados con la Web

también conocidos como Recomendaciones, que sirven como referencia para construir una Web
accesible, interoperable y eficiente, en la que se puedan desarrollar aplicaciones cada vez más
robustas.

El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones
Miembro, personal a tiempo completo y el público en general trabajan conjuntamente para
desarrollar estándares Web. Liderado por el inventor de la Web Tim Berners-Lee y el Director
Ejecutivo (CEO) Jeffrey Jaffe, la misión del W3C es guiar la Web hacia su máximo potencial.

La finalidad de los estándares es la creación de una Web universal, accesible, fácil de usar y en la
que todo el mundo pueda confiar. Con estas tecnologías abiertas y de uso libre se pretende evitar
la fragmentación de la Web y mejorar las infraestructuras para que se pueda evolucionar hacia una
Web con la información mejor organizada.

La creación de un estándar requiere de un proceso controlado en el que especialistas en la materia

aseguran la calidad depurando las especificaciones antes de recomendarlas en la W3C.

Si te interesa conocer la lista de comprobación de estándares web para verificar que tu sitio web
sea optimo, puedes consultarla en el siguiente link:
https://disenowebakus.net/estandares-web.php

20 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Los estándares Web más conocidos y ampliamente utilizados son: HTML (HyperText Markup
Language), XML (eXtensible Markup Language) y CSS (Cascading Style Sheets).

Recuperado de: https://disenowebakus.net/estandares-web.php

Contenido y presentación (es.jimdo.com, 2019)

La primera impresión es la que cuenta. Sorprende a tus visitantes desde el primer momento en que
entran a tu página y anímalos a que se queden y naveguen por tu web. ¿Cómo lo puedes lograr?
Estructurando muy bien el contenido de tu página de inicio para que encuentren fácilmente lo que
buscan y presentando el contenido de tal forma que sea atractivo para la vista.

Antes de comenzar con las diferentes opciones de estructura, queremos presentarte un resumen
sobre qué debes tener en cuenta y qué debes evitar a la hora de organizar el menú de navegación
y añadir títulos, textos, imágenes y otros elementos en el contenido.

Menú de navegación. Ofrece solo las pestañas necesarias (máximo 5 o 7) en el primer nivel y
que no ocupen más de una línea del menú. ¿Qué hacer con las otras pestañas? Simplemente
distribúyelas en el segundo y tercer nivel de la navegación. El objetivo principal del menú de
navegación es guiar al visitante. Entre más opciones ofrezcas, más difícil será saber por qué
camino ir. Además, una navegación muy larga puede dañar la estética de tu web.

Títulos. Introduce un “Título 1” en la parte superior del contenido de cada subpágina. Esto le
ayudará al visitante a identificar rápidamente de qué se trata tu página y a saber si lo que ofreces
es lo que busca. A medida que vas añadiendo más contenido introduce más subtítulos con el
módulo “Título 2” y “Título 3”.

Textos. Reparte tus textos de forma balanceada y evita escribir todo en un solo bloque de texto.
Así podrás presentar mejor la información. Si tu plantilla es ancha puedes introducir tus textos en
dos o más columnas para facilitar la lectura del visitante. Si por el contrario tienes una plantilla
angosta, es posible que una sola columna sea suficiente.

Imágenes. Sé generoso con las imágenes en formato horizontal y maximiza el tamaño hasta
alcanzar el ancho completo de tu plantilla. Si tus imágenes están en formato vertical, te
recomendamos introducirla en una columna y poner otra imagen o textos al costado para que
no quede un espacio en blanco.

Columnas. Distribuye el contenido en columnas para darle una apariencia más dinámica a tu
web. Es importante que seas un poco perfeccionista, es decir, que si subes tres imágenes,
todas deben tener el mismo tamaño. Lo mismo aplica para textos y otros elementos que
repartas entre columnas.

SUBMÓDULO 1 21
 Formación para el Trabajo - Sexto Semestre

Segunda área de contenido. Utiliza la segunda área de contenido para destacar tus datos
de contacto o mostrar los botones de compartir de redes sociales. La información que pongas
en esta zona estará siempre visible. Si la plantilla que has elegido tiene la segunda área de
contenido en la parte inferior, puedes aprovechar esta zona para visualizarla como si fuera
parte del pie de página (footer).

Contenido presentado Como no presentar el

correctamente contenido

Recuperado de: https://es.jimdo.com/2014/07/10/receta-de-dise%C3%B1o-2-c%C3%B3mo-estructurar-y-

presentar-el-contenido-de-tu-p%C3%A1gina/

Estructura general del diseño de una web (Fernández, 2019)

La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este
esquema sufre variaciones, aunque normalmente son pequeñas.

22 DISEÑO DE PÁGINAS WEB EN HTML