Instituto Parroquial Santo Cristo – Aplicaciones Informáticas

Estructura Sitio Web

Estructura de Sitio Web

Índice

• Qué es un sitio web

• Contenido de un sitio web
• Tipos de sitios y arquitecturas
• Estructura física
o Archivos, anclas y enlaces
• Estructura lógica
o Estructura secuencial (sequence structure)
o Estructura en rejilla (grid structure)
o Estructura en árbol (tree structure)
o Estructura en red (web structure)
o Estructura mixta
• Comparativa de estructuras
• Mecanismos de navegación
• Guía de estilo
• Mapa de Sitio

1
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

¿Qué es un sitio web?

• Un sitio web es un conjunto de páginas web relacionadas

• Una página web es:
código HTML + recursos

• Página inicial: splash page

o Atractiva, poco texto y mucho multimedia. Túnel de entrada
o Selección de idioma, requisitos técnicos. Salto automático. Caché de imágenes
Ejemplos página inicial-principal:
o Selección idioma
o Selección situación geográfica
o Selección tipo de usuario

• Página principal: home page, root page, entry page, front page
o Índice de la web, menú de opciones
o Cruce de todos los “caminos” del sitio web
o Evitar muchas opciones

Contenido de un sitio web

• Parte fundamental de un sitio web. Clave de su éxito, su utilidad

• Contenidos comunes y específicos
o Empresas: quiénes somos, información de contacto, objetivos, clientes, productos, etc.
o Periódicos: noticias (nacionales, deportivas, …), opiniones, servicios informativos, etc.
o Centros educativos: profesorado, estudios, servicios, etc.
o Portales: noticias, canales, correo, chat, etc.
• Un mismo contenido puede estar en varias categorías Hipertexto

2
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web
Tipos de sitios y arquitecturas

Los sitios Web pueden clasificarse en categorías, tales como sitios Intranet, Extranet, o también
pueden clasificarse en clases, como por ejemplo sitios comerciales o páginas personales. Dependiendo
de sus objetivos cada sitio tendrá un diseño diferente y para lograr los objetivos se debe tener una
adecuada organización del mismo.

Tipos comunes de sitios Web

Un sitio Web público es un sitio cuyo acceso no está restringido explícitamente a ningún tipo de
usuarios

Un sitio Web Intranet es un sitio que está reservado a una determinada organización generalmente
dentro de una red privada

Un sitio Extranet es un sitio Web al que puede al que puede acceder una clase limitada de usuarios a
través de Internet

Un sitio Interactivo es el que los usuarios pueden actuar directamente sobre el contenido del sitio o
con otros usuarios del mismo

Un sitio estático es aquél que su contenido es fijo, y que los usuarios no pueden interactuar con el
contenido, excepto en el orden en que se desea ver el contenido.

Un sitio generado dinámicamente es aquél que sus páginas se generan en el momento de la solicitud
por parte del usuario

Hay dos tipos de estructuras en cualquier sitio Web: la lógica y la física. La estructura lógica reseña
como se relacionan entre sí los documentos y define los vínculos entre documentos. La estructura
física describe donde se encuentra realmente el documento.

3
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

Estructura física
• Forma de almacenar los elementos de un sitio web Directorios

• Puede reducir (o aumentar) los costos de mantenimiento

• Se ha de elegir al principio, cambiarla puede ser muy costoso (cambio de enlaces, referencias a
imágenes, etc.)
• Evitar ponerlo todo en un único directorio o crear muchos niveles de subdirectorios URL largas
• Tipos de clasificaciones:
o Por tipo de archivo
o Nivel de acceso
o Contenido de los archivos
o Fecha de creación o publicación
o Propietario, autor o departamento
o Según la estructura lógica de navegación

Ejemplos de estructuras físicas

Nombres de archivos y carpetas

• Elegir nombres intuitivos y fáciles de recordar y escribir
http://www.electropeix.net/electronica/video/producto0103.html
• Evitar caracteres “extraños”. Todo lo que no sea un número y letras del alfabeto inglés: – Ç, ñ, &, %,
#, acentos y diéresis
• Cuidado con los sistemas operativos “casesensitive”, sensibles a las mayúsculas y minúsculas
Productos.html
http://www.empresa.com/productos.html productos.html
PRODUCTOS.HTML

• No confundir ‘/’ para las direcciones de la web con ‘\’ para las direcciones en Microsoft Windows

4
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web
Anclas o Marcadores

Ubicación especial y determinada con un nombre en una página la cual es el destino de un enlace. Los
marcadores o anclas permiten que los autores diseñen vínculos a una sección específica de una página de
destino.
Un marcador o ancla se puede aplicar a un juego de caracteres o puede existir en una página separado de
cualquier texto.
En una dirección URL, delante del marcador se muestra un signo de número (#). Por ejemplo :

paginasweb/hipertexto#anclas

Esto indica que en la página hipertexto del sitio paginasweb se tiene que ir a un sitio especial marcado con
el nombre anclas.
La marca o ancla no es visible al usuario de la página que está viendo.
Por ejemplo, al presionar la palabra arriba Ud. pasa a ver el título de este tema.

Enlaces

Un enlace o hipervínculo es una conexión desde un texto o desde un mapa de imágenes a una página u
otro tipo de archivo del World Wide Web. En las páginas Web, los enlaces son la forma principal de
explorar páginas y sitios Web o de lo que se conoce familiarmente como navegar.
Un enlace o hipervínculo es una conexión desde una página del World Wide Web a otra ubicación del
World Wide Web. El destino del enlace suele ser otra página Web, pero también puede ser una imagen,
una dirección de correo electrónico, un archivo multimedia o incluso un programa.
Los enlaces están incrustados directamente en el texto o las imágenes de una página y ofrecen indicaciones
textuales o gráficas sobre el lugar al que llevan. Por ejemplo, un enlace de texto de la frase "Mérida
Virtual" y un enlace de imagen del logotipo de Mérida indicarían que el enlace conduce a una página que
contiene datos, información o conocimientos sobre Mérida.
Normalmente, los exploradores de Web subrayan los enlaces de texto y lo muestran en un determinado
color, generalmente de color azul subrayado.
Por ejemplo: Si desea pasar al contenido de esta semana lo puede hacer presionando las palabras
marcadas en azul y subrayadas.
Los enlaces de imágenes son invisibles. No obstante, los usuarios saben cuándo el puntero está sobre un
hipervínculo porque cambia su apariencia, normalmente a una mano que señala algo.

5
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web
Cuando se inserta un enlace en una página, el destino de dicho enlace se codifica como dirección URL
(Localizador de Recursos Uniforme). Esta proporciona la dirección de un archivo del World Wide Web e
identifica el servicio de Internet, como HTTP, FTP, etc. que controlará el archivo.

Las direcciones URL pueden ser absolutas o relativas.

Una dirección URL es absoluta, llamada también física, cuando la dirección completa de una página o de un
archivo, incluye el protocolo, la ubicación de red, la ruta de acceso y el nombre del archivo, este último
puede ser opcional. Por ejemplo:

http://cavirtual.ing.ula.ve es una dirección URL absoluta.

Una dirección URL relativa, llamada también lógica, es una dirección URL a la que le falta una o más partes.
Los exploradores toman la información que falta de la página que contiene la dirección URL. Por ejemplo, si
falta el protocolo, el explorador utilizará el protocolo de la página actual y, si falta la ubicación de red, el
explorador utilizará la ubicación de red de la página actual. Por ejemplo : ../../../../presentacion.htm

El tipo más común de dirección URL relativa sólo contiene un nombre de archivo y una ruta parcial, pero
no la ubicación de red. Si la página utiliza este tipo de dirección URL relativa para hacer un enlace a otra
página y ambas se mueven a otro servidor, el enlace funcionará si las posiciones relativas de las páginas
permanecen igual en el nuevo servidor. Por ejemplo, la dirección URL relativa hipertexto.htm señala a una
página de la misma carpeta que la página que contiene el enlace. Si se movieran ambas páginas a la misma
carpeta de otro servidor, la dirección URL seguiría siendo correcta.
.
También se pueden crear enlaces a direcciones de correo electrónico. Cuando un usuario que está
visitando su sitio Web hace clic en un enlace de éste tipo, el explorador Web le solicitará un mensaje y
enviará el mensaje a la dirección de correo electrónico especificada. Un enlace típico para enviar un correo
electrónico es el siguiente: labedu@ing.ula.ve

• Enlaces relativos Facilita “transporte”

o Relativos al directorio donde reside la página
<A HREF=“privado/index.html”>
<IMG SRC=“../img/gif/logo.gif”>

6
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

• Enlaces absolutos Estructura fija

o A partir del directorio raíz del sitio web
<A HREF=“/privado/index.html”>
<IMG SRC=“/media/img/gif/logo.gif”>

• La página index.html posee una serie de enlaces, absolutos y relativos. Trasladamos (copiamos) el
sitio web a otro ordenador y lo tenemos que alojar dentro de un directorio llamado “pepe”.

• Los enlaces relativos no necesitan cambiarse, pero los absolutos sí.

7
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

Estructura lógica

• Navegación, recorrido de las páginas por los visitantes

• La estructura define como se van a ver las páginas de un sitio web

• Independiente de la estructura física (lo debería ser)

• Según el tipo de navegación:

• Hace falta una planificación y un diseño previo

• En función:
o Del propósito del sitio web
o Del contenido
o Del público o audiencia destinatarios
o De aquello que se espera obtener del sitio web
o De aquello que los visitantes esperan obtener
• A veces existen auténticos guiones detrás de muchas estructuras de navegación

Estructura secuencial
Está formada por varias páginas web encadenadas una detrás de la otra. Esta estructura también se conoce
con el nombre de LIBRO ELECTRONICO y en el caso de Módulos Instruccionales con el nombre de
TUTORIALES.

Ejemplo:
• Un curso o tutorial
• Una visita (tour) guiada
• Un asistente (wizard)
• Un proceso determinado (una compra)
https://serviciosweb.afip.gob.ar/genericos/guiasPasoPaso/VerGuia.aspx?id=84

8
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

Estructura en rejilla

Estructuras secuenciales paralelas

Ejemplo: sitio web bilingüe, sitio web en varios formatos de presentación

https://www.consumer.es/alimentacion/gastronomia-de-primera-con-latas-de-conservas.html

Estructura en árbol o jerárquica

Esta organizada en forma de árbol, donde hay páginas relacionadas en forma lineal. Esta estructura es la
más típica cuando se tiene un sistema infológico bien diseñado.
Ejemplo: http://www.institutosantocristo.edu.ar/

Estructura en red o mallada

Está organizada de tal forma que las paginas

tienen relación entre sí, no distinguiéndose una
dependencia jerárquica, salvo con la página
principal. Es la estructura más versátil pero la más
difícil de diseñar.
Ejemplo:
https://es.wikipedia.org/wiki/Wikipedia:Portada

9
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

Estructura mixta

Combina distintos esquemas dentro de un sitio

Ejemplo: https://www.lavoz.com.ar/

Mecanismos de navegación

• Para evitar que el usuario o visitante no se pierda durante la navegación, se puede usar:
– “Rastro de las migas de pan”: muestra una lista con los enlaces que el usuario ha visitado o el nivel actual
de la jerarquía de navegación desde la página principal
– Numeración de los pasos: se indica una lista con todos los pasos necesarios para completar un proceso así
como el paso en el que se encuentra el usuario

Guía de estilo

• Regla de los “tres clicks”

o Para acceder a la información útil
• Evitar “callejones sin salida”
• Todas las páginas:
10
 Instituto Parroquial Santo Cristo – Aplicaciones Informáticas
Estructura Sitio Web

o Un enlace a la página principal

o A la página anterior
• Barra de navegación (menú con las opciones principales del sitio web)
• Opción de búsqueda
• Mapa del sitio
• Indicar formas de contacto con alguna persona (correo, teléfono): webmaster, comercial, etc.
• Aplicar una imagen corporativa para proporcionar una sensación de pertenencia al sitio web
• Evitar menús, opciones, estructuras y caminos muy largos o numerosos (siete es el número más
apropiado)
• Mostrar la información de lo más general a lo más detallado
• Aprovechar el hipertexto: el usuario puede buscar una misma información mediante varios
conceptos

Mapa de Sitio

Según Wikipedia un mapa de sitio web o mapa web es una lista de las páginas de un sitio web accesibles
por parte de los buscadores y los usuarios. Puede ser tanto un documento en cualquier formato usado
como herramienta de planificación para el diseño de una web como una página que lista las páginas de una
web (ya realizada), organizadas comúnmente de forma jerárquica.

Es decir, que el mapa del sitio web es un archivo con un listado de URL’s que contiene todas las páginas de
un sitio web para ser indexadas. Este archivo es de suma importancia ya que permite a
los robots rastrear de manera óptima el sitio en su totalidad.

Ejemplo: https://especiales.lanacion.com.ar/varios/mapa-sitio/index.asp

Webgrafía

https://rua.ua.es/dspace/bitstream/10045/16740/7/04b-EstructuraSitiosWeb.pdf

https://www.slideshare.net/raymarq/tipos-de-sitios-arquitectura

http://sandrabezisocor.files.wordpress.com/2008/07/estructura-de-un-sitio-web.doc

11