Introducción al Diseño

Vista previa del material en texto

INTRODUCCIÓN AL DISEÑO
Documento de lectura
1
Una Página Web es un documento electrónico que forma parte de la WWW (World Wide Web) 
generalmente construido en el lenguaje HTML (Hyper Text Markup Language o Lenguaje de Marcado de 
Hipertexto) o en XHTML (eXtensible Hyper Text Markup Language o Lenguaje de Marcado de Hipertexto 
Extensible). Este documento puede contener enlaces (característica del hypertext) que nos direcciona a 
otra Página Web cuando se efectúa el clic sobre él. Para visualizar una Página Web es necesario el uso 
de un Browser o navegador.
Una Página Web puede estar alojada en un ordenador local o en un ordenador remoto. Al servidor 
donde esté alojada la Página Web se le denomina Servidor Web. El Servidor Web atiende las peticiones 
de Páginas Web utilizando el protocolo HTTP (HyperText Transfer Protocol); del lado del cliente es el 
Browser o navegador el que recibe y muestra las Páginas Web utilizando el mismo protocolo. Otra 
característica importante es que una Página Web puede ser estática (su contenido siempre es el mismo) 
o dinámica (su contenido se construye a partir de la información introducida por el usuario).
Un conjunto de Páginas web interrelacionadas conforma lo que se conoce como un Sitio Web.
La WWW o la Web es todo el conjunto de información interrelacionada que se halla disponible en 
Internet, ésta se conforma por una serie de servidores a nivel mundial organizados por dominios (nombres 
lógicos asociados a instituciones o empresas, otorgados por empresas registradoras oficiales).
¿QUÉ ES UNA PÁGINA WEB?
¿QUÉ ES HYPERTEXT Y CÓMO FUNCIONA?
El Hypertext o hipertexto, es un mecanismo de comunicación que permite desde un documento navegar 
a otro documento. Este mecanismo se realiza insertando un enlace en algún texto del documento y es 
una facilidad que provee el lenguaje HTML.
Cuando navegamos en Internet estamos visualizando Páginas Web. A cada Página Web le corresponde 
un único URL (Uniform Resource Locator o localizador uniforme de recursos), que es una secuencia de 
caracteres que se utilizan para identificar objetos (como documentos e imágenes) en Internet por su 
localización.
Ej.: http://www.econta.com/demo/index.html
El URL identifica en qué ordenador se encuentra el objeto a mostrar (www.econta.com), bajo qué 
estructura de directorio (/demo) y finalmente, el nombre específico del objeto (index.html).
2
Cada enlace que se encuentre en una Página Web contiene una dirección URL, cuando efectuamos un 
clic sobre cualquiera de estos enlaces se envía un requerimiento para obtener un documento que se 
encuentra alojado en un ordenador en alguna parte del mundo y que está identificado unívocamente 
por su URL.
ELEMENTOS DE UNA PÁGINA WEB
Una Página Web puede contener cualquiera de los elementos siguientes: Texto, Imágenes, Audio, 
Objetos Animados (generalmente construidos con la herramienta Adobe Flash), hipervínculos 
(característica que permite la navegación de una página web a otra), Meta tags (son instrucciones en 
lenguaje HTML que le indican a los buscadores cuales son las palabras o términos por los que debe ser 
indexada una página para ser encontrada), hojas de estilo en cascada o CSS (Cascading Style Sheets) 
que permiten separar la presentación de la página de su estructura.
HERRAMIENTAS PARA CREAR SITIOS WEB
Para crear una Página Web se recomienda disponer de las herramientas siguientes: Ordenador, Editor 
de Texto (Visual Studio Code, Dreamweaver, Notepad, Sublime text, etc.), Editor de Archivos Gráficos 
(Photoshop, Paint, etc.), espacio en un Servidor Web para alojar la Página y el software cliente del FTP 
(File Transfer Protocol) utilizado para enviar al servidor web la Página Web.
Dentro de la gama de los Editores de Texto se pueden utilizar desde los más básicos (Notepad, Wordpad) 
los cuales requieren conocimiento experto en HTML, los denominados intermedios (editplus, gnu 
Emacs, sublime text) que colorean las palabras claves del código fuente, y los más completos (Front 
Page, Dreamweaver, Visual Studio Code) que se caracterizan por presentar el entorno conocido como 
WYSIWYG (What You See Is What You Get, que significa lo que ves es lo que obtienes). Este tipo de 
editores permite la creación de documentos, observando en la pantalla el resultado final del mismo (no 
es necesario imprimirlo).
Es un lenguaje basado en marcas o etiquetas generalizado. El HTML utiliza tags o etiquetas para 
estructurar texto en: encabezado, párrafos, listas, enlaces de hipertexto, etc. Cada símbolo usado en la 
etiqueta es lo que le indica al Browser como presentar el documento contenido en la Página Web.
HTML
3
CONCEPTOS BÁSICOS
Internet
Es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de 
protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como 
una red lógica única, de alcance mundial.
Http
(HyperText Transfer Protocol) es el método más común de intercambio de información en la world wide 
web, el método mediante el cual se transfieren las páginas web a un ordenador.
HTTPS
(Hypertext Transfer Protocol Secure), como su nombre lo dice es un protocolo de aplicación en el cual 
se implementa el protocolo HTTP (Hypertext Transfer Protocol) con seguridad. A nivel mundial está 
comenzando una migración desde el protocolo HTTP a HTTPS, esto tiene que ver con la seguridad con la 
que los usuarios de las distintas páginas web puedan tener confianza en el lugar donde dejan sus datos.
WWW
Es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través 
de Internet, es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de 
transporte o desde otro punto de vista, una forma gráfica de explorar Internet.
Sitio web
En inglés website o web site, un sitio web es un sitio (localización) en la World Wide Web que contiene 
documentos (páginas web) organizados jerárquicamente. Cada documento (página web) contiene texto 
y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede 
contener una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos.
Tipos de sitios web 
Los sitios se pueden clasificar de muchas maneras. Cada tipo de sitio tiene unas características y 
limitaciones propias. Una buena organización es vital para conseguir los objetivos del Sitio. 
4
Por su audiencia
• Públicos: Es un WebSite normal, una página dirigida al público general, sin restricciones de acceso 
en principio. 
• Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo, los 
proveedores de una empresa determinada, o los clientes. 
• Intranet: Son sitios cuyo acceso está restringido a una empresa u organización, normalmente 
funcionan dentro de redes privadas, aunque no siempre es así. 
Por su dinamismo 
Aquí encontramos sitios interactivos y sitios estáticos: 
• Sitios Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de 
cada usuario y de los objetivos de éste. Normalmente, las páginas se generan cuando el usuario las 
solicita, personalizando la información que se le ofrece. 
• Sitios estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se 
encargan exclusivamente sus diseñadores. 
• Sitios Dinámicos: El término programación dinámica, es un concepto nuevo con respecto a las 
páginas HTML conocidas hasta ahora. El mismo consiste en la formación de una página, tanto de 
gráficos como de contenidos, a partir de la lectura de determinados datos residentes en una base de 
datos. En otras palabras, una página dinámica no se encuentra pre-armada, sino que se diagrama 
“online” en el momento en que es solicitada por el navegador del usuario. 
Por su apertura 
Estructuras abiertas, cerradas y semicerradas: 
• Estructura abierta: Todos los documentos disponen de su dirección y los usuarios pueden acceder 
a cualquier punto delWebSite. 
• Estructura cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno sólo). Un 
ejemplo sería un sitio que requiere un registro previo para entrar, el usuario siempre tendría que 
pasar primero por el registro antes de poder acceder al resto de la página. 
• Estructura semicerrada: A medio camino entre ambas, obliga a los usuarios a acceder por unos 
puntos específicos, como por ejemplo sólo la página principal y las páginas de entrada a las secciones 
más importantes. 
5
Por su profundidad 
Basada en el número de enlaces que hay que pulsar para llegar al contenido. En general los usuarios 
prefieren sitios poco profundos. Una buena regla a seguir es que el usuario no tenga que pulsar más de 
3 enlaces para encontrar lo que busca.
Por sus objetivos 
• Comerciales: Están creados para promocionar los negocios de una empresa. Su finalidad es 
económica. Su audiencia puede estar formada por clientes (actuales y potenciales), inversores 
(actuales y potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios 
de comunicación. Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y 
Promocionales (promocionan productos). 
• Informativos: Su finalidad principal es distribuir información. La audiencia de este tipo de sitios 
depende del tipo de información que distribuyen. 
• Ocio: Aunque normalmente son sitios con una finalidad económica, son un caso especial. No son 
sitios fáciles de crear ni de mantener y a veces siguen reglas propias; puesto que a veces es más 
importante sorprender al usuario con innovaciones que mantener la consistencia y la estructura. 
• Navegación: Su finalidad es ayudar al usuario a encontrar lo que busca en Internet. Dentro de este 
grupo se sitúan los llamados portales, que intentan abarcar prácticamente todo dentro del propio 
sitio. 
• Artísticos: Son un medio de expresión artística de su creador o creadores. Este tipo de sitios suele 
saltarse todas las convenciones y las únicas normas a aplicar son las que el propio artista o artistas 
deseen. 
• Personales: Al igual que los anteriores, son un medio de expresión de su creador o creadores. Sus 
objetivos y su audiencia pueden ser de lo más variopinto. Dentro de este grupo puede haber de todo 
desde colecciones de fotos de la familia hasta tratados científicos de primer orden. 
Publicación de un sitio web. (Requerimientos Básicos) 
• Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del 
lado del servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas 
con el cliente generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del 
cliente. El código recibido por el cliente suele ser compilado y ejecutado por un navegador web. 
Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se utiliza el 
protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El 
término también se emplea para referirse al ordenador que ejecuta el programa. 
• Alojamiento web: el alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios 
de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido 
6
accesible vía web. Es una analogía de “hospedaje o alojamiento en hoteles o habitaciones” donde 
uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas 
web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos 
etc. en internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones 
o páginas web. 
• Protocolo FTP: siglas de File Transfer Protocol. Método muy común para transferir uno o más 
ficheros de un ordenador a otro. FTP es un medio específico de conexión de un Sitio web para cargar 
y descargar ficheros. FTP fue desarrollado durante los comienzos de Internet para copiar ficheros de 
un ordenador a otro. Con la llegada del World Wide Web, y de los navegadores, ya no se necesitan 
conocer sus complejos comandos; se puede utilizar FTP escribiendo el URL en la barra de localización 
que se encuentra en la parte superior de la pantalla del navegador. Por ejemplo, al escribir ftp://
nombre.del.sitio/carpeta/nombredelfichero.zip se transfiere el fichero nombredelfichero.zip al disco 
duro del ordenador. 
Al escribir ftp://nombre.del.sitio/carpeta/ da una lista con todos los ficheros disponibles en esa carpeta.
• Dominio: Un dominio o nombre de dominio es el nombre que identifica un sitio web. Cada dominio 
tiene que ser único en Internet. Por ejemplo, “www.unan.edu.ni” es el nombre de dominio de la 
página web de unan. Un solo servidor web puede servir múltiples páginas web de múltiples dominios, 
pero un dominio sólo puede apuntar a un servidor. 
• Un dominio se compone normalmente de tres partes: en www.unan.edu.ni, las tres uves dobles 
(www), el nombre de la organización (unan) y el tipo de organización (edu). 
• Los tipos de organización más comunes son .COM, .NET, .EDU, y .ORG, que se refieren a comercial, 
network, educación, y organización (originalmente sin ánimo de lucro, aunque ahora cualquier 
persona puede registrar un dominio .org).
ESTRUCTURA DE UNA WEB
La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá 
al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas 
web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará 
rápidamente lo que busca. 
Antes de crear un conjunto de páginas web uno ha de tener una idea clara de cómo va a ser la estructura 
de dichas páginas, es conveniente hacer algún esquema sencillo, para la mayoría de los casos una hoja 
de papel y un lapicero bastará.
7
JERÁRQUICA
La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta 
hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones 
que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas 
que pueden o no dividirse. 
Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de 
saber que, con forme se adentra en la estructura obtiene información más específica y que la información 
más general se encuentra en los niveles superiores.
Lineal
La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos 
leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior. 
Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos 
que se distraiga con enlaces a otras páginas. Por otra parte, podemos causar a lector la sensación de 
estar encerrado si el camino es muy largo o poco interesante. 
Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.
8
Lineal con jerarquía 
Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de 
una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea. 
Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la 
información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente 
este tipo de estructura.
Red
La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las 
páginas pueden apuntarse unas a otras sin ningún orden aparente. 
Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al 
lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no 
llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructurade las páginas 
con alguna estructura conocida, como por ejemplo la de una ciudad. 
Nota: Es recomendable que los elementos se 
organicen en carpetas cuando se trabaja con 
bastantes páginas y con diversos recursos como 
imágenes, videos, etc.
9
Bibliografía
Alonso, J. (2008). Universidad de Murcia. Obtenido de http://institucional.us.es/revistas/
comunicacion/5/07alonso.pdf
Comunidad de Madrid. (2011). La suma de todos. Obtenido de La suma de todos: http://www.madrid.
org/cs/StaticFiles/Emprendedores/GuiaEmprendedor/tema7/F49_7.9_WEB.pdf