El documento define varios conceptos clave relacionados con el diseño web, incluyendo páginas web, sitios web, HTML, hipervínculos, lenguajes de programación, editores, servidores y más. Explica que el diseño web implica planificar, diseñar e implementar sitios web teniendo en cuenta factores como la navegabilidad, interactividad y usabilidad. También describe las tres etapas clave del diseño de páginas web: diseño visual, estructura y relaciones entre páginas, y posicionamiento en buscadores

1. Diseño Digital
Universidad Cuahutémoc

2.  Una página web está compuesta por uno o varios documentos
HTML (HyperText Markup Language) relacionados entre sí
mediante hipervínculos (enlaces).
 Página web:
Documento realizado en HTML y que es parte de un sitio Web.
 Sitio web:
Página principal y sus otras páginas, gráficos, documentos,
multimedia y otros archivos asociados que se almacenan en un
servidor Web o en el disco duro de un equipo.
 Html:
 Lenguaje estándar de marcas empleado para documentos del
World Wide Web.

3.  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.
 Lenguaje de programación:
Lenguaje con el que está desarrollada una página web.
 Editor:
Programa utilizado para crear páginas web sin la
necesidad de tener que aprender el lenguaje.
 Servidor:
Máquina conectada a Internet que –entre otros servicios-
ofrece albergue para páginas web haciendo que estén
accesibles desde cualquier punto de Internet.

4.  Cliente FTP:
Programa que permite conectarse al servidor para publicar
páginas web.
 Hosting:
Hospedaje web.
 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. (Internet service
provider)
 URL:
 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. (Uniform
Resource Locator)

5.  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.
 Frames (marcos):
Áreas rectangulares que subdividen las ventanas de
algunas páginas Web, cada una de las cuales contiene un
documento de hipertexto independiente de los demás.
 Webmaster:
Un webmaster es el encargado de crear, diseñar,
estructurar, maquetar, publicar, promocionar y mantener
un sitio web.
 Tablas:
Elemento fundamental para la maquetación y distribución
de contenidos de una página web.

6.  Banner:
Elemento gráfico con forma rectangular,
normalmente animado, cuyo contenido es
publicidad.
 Imagen:
Archivo gráfico que se puede insertar en una
página Web y mostrar en un explorador de Web.
 Propiedades:
Características de un elemento del Web actual,
como el título y la dirección URL de un Web o el
nombre y el valor inicial de un campo de
formulario.

7.  El diseño web es una actividad que consiste
en la planificación, diseño e implementación
de sitios web.
 No es simplemente una aplicación de diseño
convencional, ya que requiere tener en cuenta
la navegabilidad, interactividad, usabilidad, ar
quitectura de la información y la interacción
de medios como
el audio, texto, imagen, enlaces y vídeo.

8.  En un principio era sólo texto, pero a medida que ha
evolucionado la tecnología, tanto los ordenadores como
las redes de telecomunicaciones, se ha generado nuevas
formas de desarrollar la web.
 La inclusión de imágenes fue la más significativa, pero
también debemos mencionar el vídeo y la animación, o los
espacios 3D, lo que aporta valores estilísticos, de diseño y
de interactividad jamás imaginados antes.
 El diseño de páginas web se ha desarrollado a medida que
ha evolucionado Internet. En 1992 sólo había alrededor de
50 sitios web. Estadísticas (2005) nos afirmaban que la
cantidad de sitios web ronda los 8.000 millones de sitios,
a los que diariamente se les suma a raíz de 4400 por día

9.  La última versión de este lenguaje básico corresponde
al HTML5, donde se introducen nuevos elementos que
mejoran la navegación y la usabilidad de los sitios web en
los distintos navegadores, como por ejemplo el uso de
<canvas>, <video> o <footer>.
 Esta nueva versión no se trata solamente de cambiar y
eliminar etiquetas. Va mucho más allá.
 En todo sitio web hay elementos que se utilizan. El
encabezado (header), barras laterales (sidebars), el pie de
página (footer), los menús de navegación, se utilizarán en
esta nueva versión como etiquetas ya establecidas,
brindando una mejora en la intuición para el desarrollo.

10.  El diseño de páginas web se trata básicamente de
realizar un documento con información
hiperenlazado con otros documentos y asignarle una
presentación para diferentes dispositivos de salida
(en una pantalla de computador, en papel, en
un teléfono móvil, etc).
 Estos documentos o páginas web pueden ser creadas:
◦ Creando archivos de texto en HTML, PHP, Asp, Aspx,
JavaScript, JSP, Python ó Ruby.
◦ Utilizando un programa WYSIWYG de creación de páginas y
utilizando lenguajes de programación del lado servidor,
para generar la página web

11.  Para el diseño de páginas web debemos tener
en cuenta tres etapas:
 1. El diseño visual de la información que se
desea editar.
◦ En esta etapa se trabaja distribuyendo el texto, los
gráficos, los vínculos a otros documentos y otros
objetos multimedia que se consideren pertinentes.
Es importante que antes de trabajar sobre el
computador se realice un boceto o pre-diseño
sobre el papel. Esto facilitará tener un orden claro
sobre el diseño.

12.  2. Estructura y relación jerárquica de las páginas del sitio
web.
◦ Una vez que se tiene el boceto se pasa a 'escribir' la página web.
◦ Para esto, y fundamentalmente para manejar los vínculos entre
documentos, se creó el lenguaje de marcación de hipertexto o
HTML. Los enlaces que aparecen subrayados en este documento y
otros de Wikipedia son ejemplos de hipertexto, puesto que al
pulsar sobre ellos conducen a otras páginas con información
relacionada.
◦ La importancia de la estructura y arborescencia web radica en que
los visitantes no siempre entran por la página principal o inicial y
en ese caso el sitio debe darle la respuesta a lo que busca rápido,
además permitirle navegar por el sitio.

13.  3. Posicionamiento en buscadores o SEO.
◦ Ésta consiste en optimizar la estructura del
contenido para mejorar la posición en que aparece
la página en determinada búsqueda.
◦ Etapa no gustosa por los diseñadores gráficos,
porque a diferencia del texto, no se pueden tener
nuevos resultados en los buscadores con sitios muy
gráficos.

14.  Un correcto diseño web implica conocer cómo se
deben utilizar cada uno de los elementos permitidos
en el HTML, es decir, hacer un uso correcto de este
lenguaje dentro de los estándares establecidos
 Debido a la permisibilidad de algunos navegadores
web como Internet Explorer, esta premisa original se
ha perdido.
 Por ejemplo, este navegador permite que no sea
necesario cerrar las etiquetas del marcado,
utiliza código propietario, etc. Esto impide que ese
documento web sea universal e independiente del
medio que se utilice para ser mostrado.

15.  El diseño web debe seguir unos
requerimientos mínimos de accesibilidad
web que haga que sus sitios web o
aplicaciones puedan ser visitados por el
mayor número de personas.

16. Diseño Digital
Universidad Cuahutémoc