1

ENTORNO
DEL DI SEO WEB
Objetivo de la unidad
Con el estudio de esta unidad uste d ser
competente para:
Describir los conceptos y trminos
elementales relacionados con las pginas
web, que le ayudarn a una mejor com-
prensin del rea de diseo web.


2
Introduccin a Diseo Web

1. Entorno del Diseo Web

1.1 Definicin de Diseo Web
Diseo Web es la actividad que consi ste en la planifica cin, diseo e
implementacin de sitios web y pginas web. Requiere de navegabilidad,
interactividad, usabilidad, arquitectura de la informacin y la interaccin
de medios como el audio, texto, imagen y vdeo.
Un buen diseo con contenidos co rrectamente elaborados, aumenta la
eficiencia de la web como canal de comunicaci n para el intercambio de
datos por medio de la Internet.
A continuacin estudiaremos conceptos bsicos relaci onados con las
pginas web.

1.2 Conceptos bsicos
1.2.1 Internet
Internet es la interconexin descentralizada de redes de computadoras
implementada en un conjunt o de protocolos. Sus orgenes se remontan
a 1969, cuando se estableci la pr imera conexin de computadoras,
llamada ARPANET.
Veamos otro c oncepto de Intern et: Es un conjunt o de redes de
ordenadores y equipos fsicamente
unidos mediante cables que
conectan puntos de todo el
mundo1. Estos ca bles pueden ser
cables de red local, telefnicos
convencionales, digitales y canales
de fibra ptica.
El acceso a los diferentes
ordenadores y equipos que estn
conectados a Internet puede ser
pblico o tener cierto grado de
1 http://huacho.info/blogs/index.php

3
Introduccin a Diseo Web
limitantes. Lo interesante es que ca da da se encuentr an ms recursos
disponibles por medio de Internet, como por ejemplo, t elfono, radio,
televisin, imgenes de satlites o cmaras de trfico, servicios de
bancos, etc.
Hay que tener presente que Internet no es sinnimo de World Wide Web
pues WWW es parte de Internet, si endo uno de los muchos servicios
ofertados.

- Servicios de Internet
Al analizar los servicios ms usados en Internet encontramos el Correo
Electrnico, World Wide We b, FTP, Grupos de Noticias, IRC y Servicios
de Telefona.
El Correo Electrnico nos permite enviar cartas escritas con el ordenador
a otras p ersonas que tengan acceso a la Red en cualquier parte del
mundo y con un mnimo costo en co mparacin al correo normal. Las
cartas quedan acumuladas en Inte rnet hasta el momento en que el
destinatario las solicita.
La World Wide Web, se trata de un sistema de distribucin de
informacin por medio de Pginas Web, las cuales contienen te xto y
grficos. A partir de la invenci n de la WWW, muchas personas se
conectan para entretenerse y cada d a ms personas tienen Internet en
su hogar.
El FTP (File Transfe r Protocol) nos permite enviar ficheros de dato s por
Internet a cualquier parte del mundo. Estos ficheros se refiere n por
ejemplo a archivos de texto, inform es, fotografas. Por medio de este
protocolo el administrador de un Sitio Web sube los contenidos.

Los Grupos de Noticias son el servicio ms apropiado para entablar
debate sobre temas tcnicos. Se basa en el servicio de Correo
Electrnico y funciona similar a un foro.

El servicio IRC (Internet Relay Chat) nos permite comunicarnos por
medio de texto, e n una conversacin en tiempo real con una o varia s
personas.

Los Servicios de Telefona nos perm iten establecer una comunicacin
con voz entre dos personas conectadas a Internet a cualquier parte del
mundo.

4
Introduccin a Diseo Web
1.2.2 Web 2
Web 2.0 se refiere a una segunda
generacin de Web basada en
comunidades de usuarios que colaboran
en el intercambio gil de informacin,
como por ejemplo las redes sociales, blogs
y wikis. Los sitios Web 2.0 actan como
puntos de encuentro, en donde los
mensajes quedan grabados en una base
de datos que puede ser modificada por cualquier usuario, puede
aadirle, cambiar o borrar la informacin presentada.

1.2.3 World Wide Web
World Wide Web llamada tambin la "Web", es un sistema de
documentos de hipertexto enlazados y accesibles a travs de Internet,
como se dijo anteriormente, pueden contener texto, imgenes, vdeos u
otros contenidos multimedia, por medio de los cuales el usuario navega
a travs de ellas usando hiperenlaces.

- Funcionamiento de la Web
Para la visualizacin de una pgina web no rmalmente se comienza
tecleando la direc cin URL de la pgina en el nave gador, o bien
siguiendo un enla ce de hipertexto. De esta manera el navegador
despliega la informacin requerida y comienza una s erie de procesos
para obtener datos, procesos que el usuario no ve.
Paso uno: consiste en decodificar el nombre de la URL a una direccin IP
usando la base de datos DNS. Con la direccin IP se localiza el servidor
web en donde est la informacin.
Paso dos: Es enviar una pet icin HTTP al servidor Web solicitando la
informacin. En el caso de una pgina web tpica, la informacin es
solicitada en el siguiente orden: texto HTML, grficos y otros ficheros.
Paso tres: Despus de recibir del se rvidor la informacin solicitada, el
navegador despliega la pgina tal y como lo describe el cdigo HTML, el
CSS y otros lenguajes web.

5
Introduccin a Diseo Web
1.2.4 TCP/IP
Existen varios protocolos de Internet que permiten la
transmisin de datos entre redes de c omputadoras. El
TCP (Protocolo de Control de Transmisin) y el IP
(Protocolo de Internet), son los ms utilizados.
El intercambio de datos no puede cr uzarse y tener errores ya que todo
est marcado por nmeros IP determinados, adems se realizan
comprobaciones en cada bloque para que la informacin llegue
completa.
Existen ms de 100 protoc olos diferentes, entre ellos se encuentra el
popular HTTP (HyperText Transfer Protocol), para acceder a las pginas
web, el FTP (File Transfer Protocol) para transferencia de archivos, y el
SMTP (Simple Mail Transfer Protocol) y el POP (Post Office Protocol) para
correo electrnico.

1.2.5 Direcciones IP
Las direcciones IP es la
identificacin que se asigna a todo
dispositivo conectado a Internet
por ejemplo 45.332.232.976 ste
acta como un nmero t elfono
nico. Cuando es necesari o, por
medio del DNS se ste nmero se
convierte en palabras como
www.infop.org.gt para que sea
fcil de recordar.
La direccin IP es la base de todas
las mquinas y software sobre el
que funciona Internet
Al conectarse una computadora a I nternet est identificada por su
direccin IP pues es la base del funci onamiento del Internet. Para los
usuarios domsticos la IP es din mica no es fija, por lo que cada vez
que se conecten a Internet ser distinta.



6
Introduccin a Diseo Web
1.2.6 Hosting
El alojamiento we b (web hosting) es el servicio que provee a los
usuarios de Internet un es pacio para poder almacenar informacin
accesible va Web. Las com paas que proporcionan el espacio d e un
servidor se les llaman We b Host. Por lo general el alojamiento se
distingue entre gratuito y pagado,
veamos los tipos que hay:
Tipos de Alojamiento Web
El alojamiento web se divide en
seis tipos: gratuito s, compartidos,
revendedores, servidores virtuales,
servidores dedicados y de
colocacin.
a. Alojamiento gratuito:
Estos servicios generalmente agregan publicidad en los sitios y
tienen un espacio y trfico limitado.
b. Alojamiento compartido (shared hosting) : En este tipo de
servicio se alojan clientes de va rios sitios en un mismo servidor,
gracias a la configuracin del pr ograma servidor web. Resulta una
alternativa muy buena par a pequeos y medianos clientes, es un
servicio econmico y tiene buen rendimiento.
c. Alojamiento de imgenes: Este tipo de hospedaje se ofrece
para guardar imgenes en internet, la mayora d e estos servicios son
gratuitos y las pginas se valen de la publicidad coloca das en su
pgina al subir la imagen.
d. Alojamiento revendedor (reseller): Este servicio de alojamiento
est diseado para grande s usuarios o personas que venden el
servicio de Hosting a otras person as. Estos pa quetes cuentan c on
gran cantidad de espacio y de dominios disponibles para cada cuenta.
e. Servidores virtuales (VPS, Virtual Private Server) : mediante el
uso de una mqui na virtual, la em presa ofrece el con trol de un
ordenador aparentemente no compar tido. As se puede n administrar
varios dominios de forma f cil y econmica, adems de elegir los
programas que se ejecutan en el se rvidor. Por ello, e s el tipo de
producto recomendado par a empresas de di seo y programacin
web.

7
Introduccin a Diseo Web
f. Servidores dedicados: El trmino servidor dedicado se refi ere a
una forma avanzada de alojamiento we b en la cual el cliente alquila o
compra un ordenador completo, y por tanto tiene el control completo y
la responsabilidad de administrarlo. El cuidado fsico de la mquina y
de la conectividad a Internet es tarea de la empresa de alojamiento,
que suele tenerlo en un centro de datos.

g. Colocacin (o housing): Este servicio consiste bsicamente en
vender o alquilar un espacio fsico de un centro de datos para que el
cliente coloque ah su propio ordenado r. La empresa le da la corri ente
y la conexin a Internet, pero el ordenador servidor lo elige
completamente el usuario (hasta el hardware)2.

1.2.7 Servidor Web

Un servidor web es un programa que i mplementa el protocolo http. Este
protocolo est diseado para tr ansferir pginas web no hay que
confundirlo con un espacio fsico como los conceptos anteriores.
Aplicaciones en el lado del cliente: el cliente web es el encargado de
ejecutarlas en la mquina de l usuario. Son las aplicaciones tipo Java o
Javascript: el servidor proporciona el cdigo de las aplicaciones al cliente
y ste, mediante el navegador, las ej ecuta. Es necesario, por tanto, que
el cliente disponga de un navegador con capacidad para ejecutar
aplicaciones (tambin llamadas scripts).

Aplicaciones en el lado del servi dor: el s ervidor web ejecuta la
aplicacin; sta, una vez ejecutada, genera cierto cdigo HTML; el
servidor toma este cdigo recin cre ado y l o enva al c liente por medio
del protocolo HTTP. Al ejecutarse sta en el servidor y no en la mquina
del cliente, ste no necesita ninguna capacidad adicional, como s ocurre
en el caso de querer ejecutar aplicaciones javascript o java. As pues,
cualquier cliente dotado de un navegador web bsico puede uti lizar este
tipo de aplicaciones3.


1.2.8 DNS
Los DNS (Domain Name Servers) son servidores que cuentan con la
base de datos de identificacin de la direccin IP de las computadoras
que se conectan a Internet y las decodifican a un nombre.

2 http://espanol.answers.yahoo.com/question
3 http://es.wikipedia.org/wiki/Servidor_web


8
Introduccin a Diseo Web
Un nombre de dominio se obtiene fci lmente un proveedor de Inter net.
El proveedor del DNS verifica si el nombre que se desea no le pertenece
a nadie con anterioridad y con el pa go de una cuot a se registra el
nombre de dominio y nadie podr utilizar el mismo nombre registrado.
- Las partes de un DNS
El DNS est formado por dos etiquetas, separadas por puntos cuando se
las escribe en f orma de texto en el navegador. Por ejemplo ,
www.ricardoarjona.com.
La etiqueta ubicada a la derecha es el dominio de nivel superior (Top
Level Domain), en nuestro ejemplo sera el .com. sta etiqueta nos
puede decir a que pas pertenece la
pgina o de que categora es, por
ejemplo el .gt pertenece a
Guatemala, el .it a Italia, .com a
entidades comerciales, .edu a
educacin, etc.
Cada etiqueta a la izquierda
especifica una subdivisin o sub-
dominio lo cual expresa una
dependencia relativa. El nombre del
dominio no puede exced er 255
caracteres, pero normalmente son ms cortos.



1.2.9 URL
El URL (Uniform Resource Locator / localizador uniforme de recurso) es
una secuencia de caracteres que se utiliza para localizar documentos en
Internet, osea es l a direccin completa que permite que el navegador
encuentre los documentos y los muestre en la pantalla.
El URL est formado por el protocolo a usar, l uego por el nombre del
ordenador que pr oporciona la inform acin, el directorio donde se
encuentra y el nombre del fichero.
Por ejemplo, ftp://www.cajita.com/sorpresa.exe especifica un fichero
ejecutable que se debe encont rar usando el protocolo FTP;
http://www.cajita.com/index.html especifica u na pgina web que se
debe abrir usando el protocolo HTTP.

9
Introduccin a Diseo Web
1.2.10 HTML

HTML (HyperText Markup Language /
Lenguaje de Marcas Hipertextuales) es el
formato estndar de las pgi nas web, es
un lenguaje de marcacin que estructura
textos y los presenta en forma de
hipertexto, en cualquier navegador de
Internet como Internet Exp lorer, Opera,
Firefox, Netscape y Safari.

El lenguaje HTML se puede editar o crear
con cualquier editor de t extos bsico, adems est el prog rama
Dreamweaver que es el ms utilizado en el mundo para especficamente
la realizacin de sitios Web.

Dreamweaver pertenece a los programas que se les conoce como
editores WYSIWYG (What You See Is What Yo u Get / lo que ves es lo
que obtienes). Estos editores muestran el resultado de lo que se est
editando en tiempo real a medi da que se va desarrollando el
documento.

El lenguaje HTML est formado por etiquetas q ue son instrucciones de
comienzo a final, p or medio de sta s etiquetas el navegador sabr qu
texto, imgenes y otros elementos mostrar en la pantalla. Las
etiquetas se identifican porque est encerradas entre los signos menor
que y mayor que (<>).

Cdigo fuente
Para ver el leng uaje HTML de una pgina de Internet, en el navegador
Internet Explorer o en Firef ox, hay que desplegar el me n Ver y luego
elegir la opcin Cdigo fuente y se
abrir el editor de texto
configurado como predeterminado
en el sistema con el cdigo fuente
de la pgina que se est viendo en
ese momento. Otra forma ms
rpida consiste en hacer clic con el
botn derecho del Mouse sobre la
pgina web y elegir Ver cdigo
fuente (View Source).

10
Introduccin a Diseo Web
- XHTML

El XHTML, (Extensible Hypertext
Markup Language / lengua je
extensible de marcado de
hipertexto), es el lenguaje de
marcado pensado para sustituir a
HTML como estndar para las
pginas web. XHTML es la versin
XML de HTML, por lo que tiene,
bsicamente, las mismas
funcionalidades, pero cumple las
especificaciones, ms estrictas, de XM L. Su objetivo es avanzar en el
proyecto del World Wide Web Consortium de lograr una web semntica,
donde la informacin, y la forma de presentarla estn clarament e
separadas. En este sentido, XHTML se rvira nicamente para transmitir
la informacin que contiene un documento, dejando para hojas de estilo
(como las hojas de estilo en cascada) y JavaScript su aspecto y diseo
en distintos medios (computadoras, telfonos mviles, impresoras).

La necesidad de una v ersin ms estricta de HTML se sinti
principalmente porque el contenido de la World Wide Web ahora puede
visualizarse desde numerosos disposit ivos (como mviles) aparte de los
ordenadores tradicionales, donde no pueden dedicarse recursos
suplementarios para afrontar la comp lejidad aadida de la sintaxis del
HTML4.


- DHTML

Una pgina con HTML Dinmico es cu alquier pgina web en la que los
scripts interactan con el us uario cambiando apariencia y funci ones de
los objetos de la pgina.

En una p gina cargada con DHTML, se ejecuta un cdigo que tiene
efectos en los valores del lenguaje de definicin de la presentacin por
ejemplo CSS, de esta manera el usuario ve un aspecto visual modifi cado
en la informacin que se despliega en pantalla.






4 http://www.tourism4allnetwork.org/accesibilidad.php

11
Introduccin a Diseo Web
- XML

El XML (Extensible Markup
Language) es un metalenguaje
extensible de etiquetas
desarrollado por el Consorcio
World Wide Web (W3C). El
XML es una manera de definir
lenguajes para diferentes
necesidades como, permitir la
compatibilidad entre sistemas
para compartir la informacin
de una manera fcil y segura.
El XML no es un lenguaje en particul ar, si no es una tecnologa sencilla
que tiene se une con otras que la complementan para crear
posibilidades mayores.


1.2.11 CSS
Las hojas de estilo en cascad a (Cascading Style Sheets) se utilizan para
definir la presentacin de un docume nto estructurado escrito en HTML o
XHTML. El objetivo de las CSS es separar la estructura de un documento
de su presentacin, para que se
puedan ser aplicadas con facilidad a
varias pginas de un mis mo Sitio
Web.
La informacin de estilo puede ser
adjuntada tanto como un
documento separado o en el mismo
documento HTML.

Ventajas de utilizar CSS

Control centralizado de la presentacin de un Sitio web.
Fcil actualizacin del mismo.
Permite que los usuarios personalicen su hoja de estilo local, pueden
configurar el tamao de letra.
Un Sitio Web puede tener diferentes hojas de estilo a eleccin del
usuario.


12
Introduccin a Diseo Web

1.2.12 RSS
Es un formato de datos que se utiliz a para distribuir contenidos a
suscriptores de un Sitio web. Las ltimas versiones de los principales
navegadores permiten leer los RSS si n necesidad de software adicional,
los alimentadores RSS pertenecen a la familia de los formatos XML por
medio de los cuales se puede comp artir informacin d e una pgina a
otra, a esto se le conoce como redifusin de la web.
ste es e l icono c onvertido en estndar, que seala la
presencia de feeds RSS.
Por medio de los lectores de feeds se obt iene un
resumen de todos los sitios que se desee, para que no
sea necesario visi tar decenas de webs. Estos lectores
pueden ser aplicaciones web, programas de correo
electrnico o por del sistema operativo.

1.2.13 CMS
Un Sistema de g estin de contenid os (Content Ma nagement System)
permite la administracin y cre acin de contenidos por parte de los
participantes, controla la base de datos donde se aloja el contenido del
sitio web. Existen versiones
gratuitas y propi etarias de
CMS.

El Administrador maneja de
manera independiente el
contenido y el diseo .
Permite la publicacin a
varios editores de forma fcil
y controlada, creando
diferentes niveles de
usuarios. En muchos sitios
con CMS una sola persona
hace el papel de creador y
editor.


13
Introduccin a Diseo Web
a. Tipos de CMS

Hay diferentes CMS que los podemos agrupar
segn el tipo de sitio que permiten gestionar.
Como soluciones de comerci o electrnico, blogs,
portales, galeras, tambin estn los foros que
permiten la discusin y opinin en lnea de los
usuarios.

Hay CMS tipo Wikis que consiste en que los
usuarios externos puede n colaborar aportando informacin a los
artculos. Tambin hay publicaciones digitales como peridicos, revistas,
etc.

Existen portales con CMS stos son
sitios web con contenido y
funcionalidad diversa que sirven como
fuente de informacin a una
comunidad. Principalmente estn
dirigidos a resolver n ecesidades
especficas de un grupo de personas o
de acceso a la informacin y servicios
de una institucin pblica o privada.

b. LCMS
Un LCMS (Learning Content Management System) se utiliza para crear y
manejar el contenido de un progra ma de e ducacin normalmente en
forma de mdulos. El LCMS puede se r integrado en un sistema LMS, o
los dos pueden ser conectados por una interfaz.
c. LMS
El LMS (Learning Management System ) es un Sistema de Gestin de
Aprendizaje que sirve para administ rar, distribuir y controlar las
actividades de formacin presencial o e-Learning de una entida d
educativa.
Las funciones del LMS es crear usua rios, recursos y actividades de
formacin, como foros de discusin y videoconferen cias. Tambin
controlar y hace r seguimiento del proceso de a prendizaje, como
evaluaciones e informes.

14
Introduccin a Diseo Web

1.2.14 e-Learning
El e-Learning fomenta el uso de las TICs (Tecnologas de Informacin y
Comunicacin), facilitando la
creacin y di stribucin de
contenidos, permite que los
alumnos se adapte n a su ritmo
de aprendizaje y disponibilidad
de horario, sin lmites
geogrficos.
El e-Learning presenta las
herramientas de aprendizaje
permitiendo intercambiar
opiniones de manera sincrnica
o asncrona entre alumno s o
entre alumnos y tutores de los
cursos.
La Plataforma de aprendiza je que se utiliza para el desarrollo de las
actividades formativas es el LMS mencionado anteriormente.
Cuando el e-learning es mezclado con clases y actividades pedaggicas
presenciales se le llama b-learning o blended learning.


1.2.15 e-Commerce
El Comercio electrnico, consiste en comprar y vender productos o
servicios a travs del Internet y otras redes computacionales. Gracias a
este sistema muchas empresas han optado por las in novaciones en
transferencias financieras, gestin de cadenas de suministros,
transacciones en lnea, intercambio el ectrnico de datos (EDI), sistemas
de gestin de inventarios y otros.
El e-Commerce es generalmente considerado como el aspecto de ventas
de los e-Business o negocios electrnicos.


15
Introduccin a Diseo Web

1.2.16 e-Marketing
La Mercadotecnia en Internet es el estudio de las tcnicas del uso de
Internet para publicitar y vender productos y servicios. La Mercadotecnia
en Internet incluye la publicidad por clic, los avisos en pginas we b, los
envos de corre o masivos, el marketing en buscadores y la
mercadotecnia de bitcoras (blogs).
La Mercadotecnia en Internet es un componente del Comercio
Electrnico. Puede incluir la gest in de contenidos, las relaciones
pblicas, el servicio al cliente y las ventas.
El e-Marketing est asociado con diversos modelos de negocio. Los
principales incluyen el modelo Em presa a Empresa (B2B) y el modelo
Empresa a Consumidor (B2C).
El B2B ( por sus siglas en ingls Business to Business) consi ste en
compaas que hacen ne gocio unas con otras, mientras que el B2C
consiste en vender directamente al co nsumidor final. Un tercer y no tan
comn modelo de negocio es el
de usuario a usuario (P2P) donde
los individuos intercambian
bienes entre ellos.
Un ejemplo de P2P es Bittorrent,
que est construido sobre una
plataforma de usuarios que
comparten archivos o ficheros5.













5 http://es.wikipedia.org/wiki/Marketing_en_Internet

16
Introduccin a Diseo Web

ACTIVIDADES

Haciendo uso de las herramientas de comunicaci n de la
plataforma, responde los mensajes enviados por tutora.
Sube tu fotografa personal, en el perfil del participante, guindote
por el Instructivo para el manejo de la plataforma.
Coloca en el Foro Glosario, la definicin de un trmino mencionado
en la unidad, que no entiendas o que quieras aportar su concept o
para uso de todos.
Enviar a tutora un ejemplo de im presin de pantalla pegada en
Word o PowerPoint de las siguientes bsquedas en Internet:
- Identificar una pgina que ofrezca Web Host gratuito.
- Pgina que contenga alimentador RSS con su cono respectivo.
- Pgina con Blogs (excepto Blogger).