Texto 1

Tecsup
Virtu@l
Conceptos
de Pginas
Web
Conceptos de Pginas Web Tecsup
INDICE
1. Introduccin ................................................................................ 3
2. Objetivos ..................................................................................... 3
3. Definiciones Iniciales.................................................................. 3
3. Tipos de pginas Web ................................................................. 4
3.1. Pginas Estticas ............................................................. 4
3.2. Pginas Dinmicas .......................................................... 4
4. Componentes de una pgina Web ............................................... 4
4.1. Banners............................................................................ 4
4.2. Formularios ..................................................................... 5
4.3. Frames ............................................................................. 6
4.4. Hiperenlaces o Enlaces ................................................... 6
4.5. Tablas .............................................................................. 7
5. Tipos de archivos utilizados en un Sito Web .............................. 7
6. Servicios de un Portal Web ......................................................... 8
7. Tecnologas en Pginas Web ...................................................... 8
8. La estructura de un Site............................................................... 9
8.1. Tipos de estructuras......................................................... 9
9. Recomendaciones para disear una pgina Web ...................... 12
9.1. Navegacin.................................................................... 12
9.2. Tamao de las pginas .................................................. 13
9.3. Independencia del navegador ........................................ 15
9.4. Calidad de las pginas ................................................... 16
9.5. Tipografa ...................................................................... 16
9.6. Responda a la gente....................................................... 18
9.7. Simplicidad ................................................................... 18
9.8. Consistencia .................................................................. 19
9.9. Identidad........................................................................ 19
9.10. Contenido ...................................................................... 19
9.11. Compatibilidad.............................................................. 19
9.12. Interaccin..................................................................... 20
9.13. Feedback ....................................................................... 21
9.14. Marketing de valor aadido .......................................... 21
10. Consideraciones en el diseo de una pgina Web..................... 21
10.1. Tipo de letra y tamao................................................... 21
10.2. Colores .......................................................................... 22
10.3. Distribucin de contenido ............................................. 22
10.4. Tablas ............................................................................ 22
10.5. Imgenes ....................................................................... 22
11. Glosario ..................................................................................... 23
12. Referencias Bibliogrficas ........................................................ 27
2
Tecsup Conceptos de Pginas Web
1. Introduccin
Antes de disear un sitio Web es importante esclarecer los

conceptos bsicos relacionados a las pginas Web, conocer que
tipos de pginas existen, que estructuras se utilizan, que
parmetros debemos tener en cuenta antes de crear la pgina. Por
ello en esta unidad definiremos los conceptos bsicos de un sitio
Web y conoceremos algunas recomendaciones para la creacin de
estos.
La unidad permitir que el alumno tenga las pautas bsicas para

la construccin, diseo, edicin y optimizacin de Pginas Web.
2. Objetivos
Diferenciar los conceptos bsicos de un sitio Web.

Definir, estructurar y planear la creacin de un sitio Web.
3. Definiciones Iniciales
Pgina Web
Una pgina WEB no es ms que un conjunto de texto,
imgenes dispuestos de tal manera que permita su lectura de
una manera fcil y agradable, independiente de la plataforma
(Computadora o Sistema Operativo) que se este usando.
Son usadas para brindar informacin referente a una empresa,
organizacin, colegio, universidad, etc.
Home Page
El Home Page es la pgina inicial (entrada principal) de un
Site. Una pgina Web
incluye texto,
Site imgenes y enlaces;
Un site no es ms que una coleccin de pginas Web. pudiendo adems
contener animaciones,
Portales sonidos, y cualquier
Los portales son bsicamente sites que brindan otro tipo de archivo
adicionalmente una serie de servicios como: correo utilizando plugins y
electrnico, chat, transferencia de archivos, noticias, otras tecnologas.
suscripciones, comercio electrnico, etc.
Existen bsicamente dos tipos de portales: portales verticales

y portales horizontales.
Plug-ins
Programas que deben instalarse en las PCs clientes para que
sus navegadores puedan reconocer y procesar determinados
tipos de archivo (Flash, Director, Real Audio y otros).
3
3. Tipos de pginas Web
Existen bsicamente dos tipos de pginas Web: Las Pginas

Estticas y las Dinmicas.
3.1 Pginas Estticas
Son aquellas pginas en donde la informacin es esttica

(texto) o repetitiva (figuras en movimiento). Este tipo de
pginas son las mas fciles de implementar.
3.2 Pginas Dinmicas
Estas pginas permiten visualizar informacin que puede

variar, ejemplo:
Las notas y asistencia de un curso virtual.

Las pginas Web La temperatura en los diversos departamentos del Per.
dinmicas interactan Los ttulos de libros en venta con su respectivo precio, de
con el visitante y le una determinada librera.
ofrecen la posibilidad
de realizar consultas en Tambin pueden permitir hacer consultas como:
bases de datos, utilizar
carritos de compra, Cul es la nota ms alta del curso virtual?
participar en foros Cules son los departamentos del Per que estn
entre otras cosas. sobre los 22 grados centgrados de temperatura?
Qu libros estn a menos de $ 20 dlares?
Normalmente estas pginas dinmicas trabajan con un

elemento fundamental llamado Base de Datos, lo cual hace
que su implementacin sea mucho ms complicada. Para
desarrollar pginas de este tipo se requieren de:
Diseadores Grficos y
Programadores.
Actividad:
Cul es la diferencia entre una pgina Web o un portal?
El Campus Virtual utiliza pginas dinmicas o estticas?
4. Componentes de una pgina Web
Toda pgina Web tiene los siguientes componentes:
4.1 Banners
Es una imagen usada en Internet para hacer publicidad

sobre algn producto o pgina en Internet.
4
Es un anuncio o spot publicitario basado en una imagen

grfica que se muestra al cargar una pgina Web.
Banner
4.2 Formularios
Los formularios son pginas que contienen elementos

necesarios tal como botones de radio, listas de seleccin,
cajetines de introduccin de texto y de control. La manera
general para que los lectores de nuestra pgina se puedan
comunicar con nosotros es por medio de un enlace a
nuestra direccin de email, con lo que recibiramos un
email convencional. Los formularios permiten que los
dems nos enven la informacin directamente a nosotros
o bien a nuestro servidor, en donde hemos instalado un
programa que procesa esta informacin.
Ejemplo de Formulario:
5
4.3 Frames
Frames (en ingls, marcos o cuadros) es un procedimiento
del lenguaje HTML para dividir la pantalla en diferentes
zonas, o ventanas, que pueden actuar independientemente
unas de otras, como si se trataran de pginas diferentes,
pues incluso cada una de ellas pueden tener sus propias
barras de desplazamiento.
Ejemplo
Frame 1
Frame 2 Frame 3
4.4 Hiperenlaces o Enlaces

Un hiperenlace o simplemente enlace, tambin llamado
vnculo, hipervnculo o liga, es una referencia en un
documento de hipertexto a otro documento o recurso, el
cual se puede guardar, ver, o mostrar como parte de la
pgina que hace la referencia. Muchas veces se muestra
subrayado y al posicionar el Mouse sobre l, este obtiene
la forma de una mano.
Enlace o
Vnculo
6
4.5 Tablas
Las tablas nos permiten distribuir la informacin dentro

de una pgina Web. Estas nos permiten no solo mostrar
texto dentro de ellas, sino tambin imgenes, banners,
formularios y animaciones.
5. Tipos de archivos utilizados en un Sito Web
Los Sitios Web pueden contener distintos tipos de archivos para

brindar informacin a sus visitantes entre ellos los textos, audio y
video
Dentro de los textos se utilizan:

PDF (Portable Document Format) o formato de documento
porttil.
PS (PostScript) lo cual significa que es un archivo formateado
en lenguaje de impresora.
Las pginas Web tambin pueden contener audio y videos, los Para mayor
formatos ms utilizados de audio son: informacin consulte
MIDI (Musical Instrument Digital Interface), el glosario
Real Audio
Wave (apcope de WAVEform audio format)
Dentro de los formatos de videos tenemos:

AVI (Audio Video Interleave)
MOV
MPEG (Moving Picture Experts Group)
En la actualidad se esta usando bastante el formato SWF que

permite tener audio, video, texto en un solo formato.
7
6. Servicios de un Portal Web
Los portales Web clsicamente brindaban un servicio de

visualizacin de documentos tipo texto. Hoy en da esto ha
evolucionado y nos permiten brindar adems una serie de
servicios, los cuales normalmente son implementados en otros
servidores.
Entre los servicios ms comunes que podemos encontrar hoy en

da en una pgina Web podemos mencionar:
Correo Electrnico.
Transferencia de Archivos (FTP).
Comunicacin en tiempo real (Chat).
Grupo de Noticias.
Comercio Electrnico.
Telefona por Internet.
Videoconferencia.
Televisin por Internet.
Cabe indicar, que estos servicios no estn necesariamente

implementados en el mismo servidor, sino que estn ubicados
en otros servidores debido a su complejidad.
7. Tecnologas en Pginas Web
En el desarrollo de una pgina Web podemos usar diversas

tecnologas como son:
HTML (Hypertext Markup Language)

Para mayor DHTML (Dynamic Hypertext Markup Language)
informacin consulte Javascript
el glosario Java
Java applets
Controles activex
WML (Wireless Markup Lenguaje)
XML (Extensible Markup Language)
Vrml (Virtual Reality Modeling Language)
Cgi (Common Gateway Interdice)
ASP (Active Server Pages)
PHP (Personal Home Page o PHP Hypertext Preprocessor)
JSP (Java Server Pages)
Flash
8
8. La estructura de un Site
La estructura de un conjunto de pginas Web es muy importante,

ya que una buena estructura permitir al visitante de la pgina
visualizar todos los contenidos de una manera fcil y clara,
mientras que un conjunto de pginas Web con una mala
estructura producir en el visitante una sensacin de estar
perdido. No encontrar rpidamente lo que busca y terminar por
abandonar la pgina.
Antes de crear un conjunto de pginas Web debemos tener una

idea clara de cmo va a ser la estructura de las pginas. Es
conveniente hacer algn esquema sencillo antes de empezar a
desarrollarla.
8.1 Tipos de estructuras
Jerrquica
La estructura jerrquica es la tpica estructura de rbol,

en el que la raz es la hoja de bienvenida. Esta hoja se
puede tambin sustituir por la hoja de contenido en la
que se exponen las diferentes secciones que contendr
nuestro sitio. La seleccin de una seccin nos conduce
asimismo a una lista de subtemas que pueden o no
dividirse.
Este tipo de organizacin permite al lector conocer en

qu lugar de la estructura se encuentra, adems de
saber que conforme se adentra en la estructura, obtiene
informacin ms especfica y que la informacin ms
general se encuentra en los niveles superiores.
Lineal
La estructura lineal es la ms simple de todas, la

manera de recorrerla es la misma que si estuvisemos
leyendo un libro, de manera que estando en una
9
pgina, podemos ir a la siguiente pgina o a la

anterior.
Esta estructura es muy til cuando queremos que el

lector siga un camino fijo y guiado, adems
impedimos que se distraiga con enlaces a otras
pginas. Por otra parte podemos causar al lector la
sensacin de estar encerrado si el camino es muy largo
o poco interesante.
Lineal con jerarqua
Este tipo de estructura es una mezcla de la dos

anteriores, los temas y subtemas estn organizados de
una forma jerrquica, pero uno puede leer todo el
contenido de una forma lineal si se desea.
Esto permite tener el contenido organizado

jerrquicamente y simultneamente poder acceder a
toda la informacin de una manera lineal como si
estuvisemos leyendo un libro.
Red
La estructura de red es una organizacin en la que

aparentemente no hay ningn orden establecido, las
pginas pueden apuntarse unas a otras sin ningn
orden aparente.
10
Este tipo de organizacin es la ms libre, pero tambin es

la ms peligrosa ya que si no se informa al lector de en
dnde se encuentra, puede perderse, puede no encontrar
lo que anda buscando o no llegar a ver lo que le queremos
mostrar. Por eso es muy recomendable asociar la
estructura de las pginas con algunos smbolos. Por
ejemplo figuras, letreros, etc.
Mapa del Sitio
El Mapa del Sitio es una herramienta que permite

orientarse rpidamente en la estructura de archivos, se
utiliza para orientar a los usuarios que visitan nuestra
pgina Web. Los mapas de Sitio muestran los enlaces ms
importantes de nuestra pgina Web en forma ordenada.
Por ejemplo:
En el ejemplo anterior podemos observar una estructura

jerrquica.
11
Actividad:
Qu pginas que usted conoce utiliza un esquema jerrquico?
Cul de los esquemas le parece a usted ms conveniente para su
empresa o centro de estudios?
9. Recomendaciones para disear una pgina Web

Que criteri
Para crear una pgina Web se requiere de ciertos criterios para debemos de
hacer una pgina interesante y que invite a su navegacin. Para cuenta al cre
ello le indicamos algunas recomendaciones: pgina Web
9.1 Navegacin
Unos de los elementos ms importantes en el diseo de

pginas Web son los elementos de navegacin, ya que son
los que nos permiten movernos a travs de las diferentes
pginas que hemos construido.
Duplique los elementos de navegacin si es

necesario
Si sus pginas tienen normalmente un tamao

superior al de una pantalla y media, considere la
opcin de duplicar los elementos de navegacin al
principio y al final de las pginas.
El uso de texto
pequeo en los
botones de la pgina
es un buen consejo.
Igualmente ponga en
los enlaces superiores
los enlaces a otras
partes de su pgina de
acuerdo a su orden de
importancia, as como
su enlace a su correo
electrnico.
Aada un enlace al principio de la pgina
Si la pgina es suficientemente larga proporcione al

final de esta un enlace el principio de la misma. En el
caso de la pgina anterior, el logo nos lleva a su pgina
inicial.
12
Cada pgina Web ha de tener un enlace por el cual se

pueda continuar la navegacin.
de que
na un Proporcione ndices
modo para
as las Si le es posible facilite un ndice con el contenido del
Web de su sitio. Procure que el ndice sea fcilmente accesible,
tiene en puede hacer un "frame" o puede ponerlo al principio o
o perder la al final de la pgina.
e los
tras las
La navegacin es uno de los elementos ms
pginas.
importantes de su diseo, tmese su tiempo al aplicar
el formato y la estructura lgica para elaborar su
mtodo de navegacin. Tanto para los botones como
para el contenido, la consistencia es importante.
9.2 Tamao de las pginas
Evitar el scroll
Si quiere captar la atencin del navegante, no haga la

pgina ms grande de una pantalla. Muchas de las
personas que navegan por Internet no consultan la
parte inferior de las pginas porque no saben que hay
ms informacin en la parte de abajo.
Haga las pginas de una pantalla y media
En general es una buena costumbre no hacer pginas

de tamao mayor a una pantalla y media. De esta
13
manera evitar muchos problemas y facilitar la

lectura de las pginas. Las pginas del tamao de una
pantalla y media son cmodas de leer y no saturan al
lector con demasiada informacin.
Ejemplo:
http://www.tecsup.edu.pe/
http://www.microsoft.com/
Si necesita poner gran cantidad de texto escrito que ha

de leerse completo, es recomendable hacer una nica
pgina larga. Es menos molesto hacer scroll a lo largo
de una ventana que seguir un enlace a la siguiente
parte del documento.
Enlaces
Los enlaces permiten enriquecer el contenido de la

Antes de publicar sus
informacin con datos suplementarios, pero se ha de
pginas asegrese del
tener precaucin ya que pueden hacer confusa la
buen funcionamiento
lectura de una pgina. Se recomienda de que el texto
de los enlaces.
enlazado debe definir el contenido de la informacin a
Comprobar tanto los
la que refiere, de manera que no sea necesario leer, de
enlaces internos, cada
ser posible, todo el prrafo para comprender el
vez que modifiquemos
significado del enlace.
nuestras pginas, y
los enlaces externos de
Debemos de asegurarnos, adems, que el visitante de
una forma peridica.
nuestra pgina encontrar lo que necesita, si no
encuentra lo que espera puede abandonarla. El enlace
ha de ser suficientemente significativo, un enlace
demasiado largo tambin es perjudicial ya que
dificulta la lectura del texto.
Cuando realice enlaces consecutivos similares, resalte

la informacin que diferencie unos enlaces de otros.
No cambie el color de los enlaces, esto suele confundir

a los visitantes, puesto que pueden pensar de que ya
visitaron algn enlace.
14
9.3 Independencia del navegador
Visualice las pginas en diferentes navegadores
Aunque sus pginas cumplan el estndar es

recomendable que compruebe que sus pginas se
visualizan correctamente en los navegadores ms
usados.
Java o javascript
Asegrese de que no sea necesario el uso de Java o

JavaScript para visualizar el contenido de sus pginas,
puede ser que el navegador no soporte estos lenguajes
o que an soportndolos no estn activados.
Escriba pginas para cualquier navegador
No realice pginas que slo se vean bien en un

navegador o en una resolucin concreta, incluyendo
etiquetas exclusivas de algn navegador. Si usa las
recomendaciones propuestas por el W3C
http://www.w3.org/TR/#Recommendations sus
pginas se visualizarn correctamente en todos los
navegadores.
15
9.4 Calidad de las pginas
No cometa faltas ortogrficas
Use un procesador de textos con correccin ortogrfica

para escribir el texto que va a publicar, adems con el
uso de un procesador de textos le resultar ms
cmoda la escritura.
Ponga sus pginas en contexto
Recuerde que el lector puede llegar a su pgina desde

cualquier sitio, por lo tanto es muy recomendable que
se le d un contexto definido. Recuerde las preguntas
bsicas: qu?, quin?, cmo?, cundo?
9.5 Tipografa
Una buena tipografa es tan importante en una pgina

Web como en cualquier otro medio escrito. El problema
que se presenta en las pginas Web es que se ha de
visualizar correctamente en diferentes sistemas y multitud
de ordenadores.
Use los estilos con moderacin
Si quiere resaltar algo use las negritas o el tipo cursiva,

pero no abuse de ellos porque si todo est resaltado, el
cerebro se acostumbra y deja de parecerle destacado.
El texto pierde fuerza si todas las palabras estn

resaltadas.
El texto pierde fuerza si todas las palabras estn
resaltadas.
nfasis en los textos (capitalizacin)
Cuando leemos lo primero que observamos es la

forma general de las palabras. De manera que un
titular con la primera letra de cada palabra en
mayscula es ms atractivo visualmente que todo el
titular en maysculas.
16
La mayor cantidad de la informacin reside en la parte

superior de las letras, la vista est acostumbrada a
fijarse en la parte superior de las letras por lo que si
capitalizamos todas las palabras estaremos obligando
a realizar un esfuerzo superior que puede resultar
molesto.
No todos poseen las mismas fuentes
Cuando especifica el tipo de fuente con una etiqueta

FONT FACE="" ha de saber que puede haber personas
que no dispongan de ese tipo de letra, debido a que no
todos los sistemas operativos (apple, windows, unix,
linux) tienen instalados los mismos tipos de fuente.
Afortunadamente, usted puede especificar varios tipos
de letra alternativos.
Por ejemplo: <font face="verdana,helvetica,arial">....
De todas las maneras, no viene nada mal saber cules

son los tipos de letra por defecto en los sistemas ms
usados.
Plataformas Microsoft | Plataformas Macintosh y Unix
17
Serif o sans serif

Qu
Las tipografas de tipo "serif" son aquellas tipografas tipografa
cuyas letras se apoyan como con una especie de pie, ser la ms
las tipografa de tipo "sans serif" carecen de este adecuada
detalle. Ejemplo: para el
diseo de
Serif San Serif pginas
Web?
En la pantalla, por efectos de resolucin, se

recomienda utilizar tipografa de tipo San Serif, por
ejemplo Arial, verdana, tahoma, etc.
Serif Sans Serif
Prueba de tipografa Prueba de tipografa
Como puede comprobar, la frase con tipografa "sans

serif" es ms clara, por eso no recomendamos usar
tipografas de tipo "serif" si la fuente es menor a 12
pixels.
Distintas tipografas
Es importante Una vez que ha seleccionado la tipografa para el

mantener la cuerpo del texto, considere la opcin de usar alguna
coherencia de otra fuente diferente. Fjese en los peridicos, usan una
tipografa en todo el tipografa para el contenido del artculo pero usan otra
sitio Web. distinta para los titulares. Adems usan la misma para
todos los titulares. Pero tenga en cuenta que muchas
tipografas diferentes podra causar confusin en los
lectores.
9.6 Responda a la gente
Aunque slo sea por cortesa responda a la gente que le

hace comentarios sobre sus pginas, aunque no est de
acuerdo con sus opiniones.
9.7 Simplicidad
El uso del texto con scroll y gif animados son usados

cuidadosamente en zonas estratgicas de la pgina, pero
Demasiados colores o
fondos pueden tambin
18
distraer y dar a la
pgina un enfoque
negativo.
no en toda la pgina. Demasiado movimiento puede

distraer la idea principal de la pgina e incluso hasta
aburrir al visitante. Intente mantener el texto y los gif
animados al mnimo. Inclusive es recomendable limitar el
nmero de veces que un gif animado se repetir. La
simplicidad del diseo debe de verse reflejada tambin al
escoger el fondo de la pgina. Fondos saturados distraen
el contenido de la pgina y hacen que el texto se torne
ilegible.
9.8 Consistencia
Use un diseo para toda la pgina, recuerde que para un

visitante, una pgina Web es un lugar fsico. Esto se
confunde con las pginas que no son consistentes en
diseo. El color, algunas veces, es usado para identificar
diferentes secciones de una pgina Web, pero el diseo y
la navegacin deben hacer referencia a todo la pgina.
Escoger el tipo de letra tambin es una parte del diseo,
sea consistente en el uso de las letras y mantenga el mismo
formato de la pgina en todos sus enlaces.
9.9 Identidad
Mantngase con el concepto de que la pgina Web es un

lugar fsico, considere el propsito de una pgina y
refljelo en su diseo. Una pgina Web debe de reflejar
filosofa e identidad del negocio para el cual se va a
disear, por ello escoja los elementos con cuidado.
9.10 Contenido
Alguna vez se ha cansado de esperar hasta que la pgina

Est seguro de poner
Web se cargue? O an ha esperado hasta que la pgina se
la informacin vital
cargue y no ha encontrado la informacin que busca?
de la pgina, pero
Estas dos deficiencias hacen al visitante irritarse pero,
sin exagerar en la
tambin lo propicia a no regresar jams.
cantidad de
informacin, sino en
9.11 Compatibilidad
la calidad.
Haga a su Web una pgina universal, la resolucin y la
compatibilidad de navegadores es esencial. Si la pgina no
es compatible para todos los navegadores tenga por
seguro que perder a una gran cantidad de visitantes.
19
Pgina a Resolucin 800x600
Pgina a Resolucin 1024x768
9.12 Interaccin
Interaccin supone convencer a los usuarios de que estn

ellos consiguiendo la informacin en vez de que usted se
la est dando, tiene que tener el sentido de que ellos estn
encontrando por ellos mismos los contenidos. Hay un
interesante balance entre el esfuerzo y recompensa de
encontrar informacin y de que se perciba valor.
El flujo de interaccin hace que se incremente la

experiencia del aprendizaje, los usuarios de Internet son
listos, inteligentes y con una educacin superior a la
media.
20
Demasiadas opciones crean confusin, queremos tener el

control de la situacin. Hay que trasladar al visitante el
ritmo de la relacin, es una relacin de pull, no de push.
9.13 Feedback
Parece obvio y cuesta entenderlo, debemos saber lo que

nuestros clientes quieren, preguntrselo y trabajar para
ofrecrselo.
Una Web nos da la posibilidad de preguntar a cada

cliente, uno por uno en tiempo real. Piensa bien sobre esta
facilidad, nunca antes tenamos esta habilidad de
conseguir feedback.
Puede parecer sacrificado y muy trabajoso el de or al

cliente, escucharle, reconstruir constantemente la oferta de
tus servicios segn sus necesidades y deseos, y en
definitiva convertir a tus clientes en miembros activos,
semi-empleados o socios que cooperan estrechamente
contigo en el desarrollo de tu negocio.
9.14 Marketing de valor aadido
Lo ms preciado hoy en da es el tiempo, no tenemos

tiempo, si pretende que la gente dedique su tiempo a
entender su Web y a aprender sus servicios, a cambio de
esto debe ofrecerle algo.
Actividad:
Si a usted le encargasen disear la pgina Web de un colegio, Qu
opciones de navegabilidad utilizara?
En que basara la eleccin de colores y el lenguaje a utilizar?
10. Consideraciones en el diseo de una pgina Web
10.1 Tipo de letra y tamao
En entornos Microsoft Windows la letra Arial es comn y

Observacin: No es
se lee bastante bien, incluso en tamaos pequeos. En
recomendable usar el
entornos Linux su homloga es la Helvtica. Por eso el
subrayado para
tipo de letra que ms utilizamos es "Arial, Helvetica", pero
resaltar texto porque
tambin es coherente usar distintos tipos de letra (distintas
se confunde con los
fuentes) por Ejemplo: fuentes de ancho fijo como
enlaces o vnculos.
"Courier", distintos tamaos para resaltar lo ms
importante como los ttulos, estilos distintos: negrita,
cursiva...
21
10.2 Colores
Para seguir los convenios universalmente aceptados, como

por ejemplo los enlaces en azul y subrayados, usamos
colores suaves de fondo tanto en tablas como en pginas,
para que el texto resulte cmodo para la vista.
10.3 Distribucin de contenido
Para la distribucin del contenido son fundamentales las

tablas. stas pueden tener varias filas y/o columnas.
Dependiendo del resultado que busquemos, tendremos
que usar la distribucin ms apropiada, agrupando tablas
si es necesario.
10.4 Tablas
Las tablas deben formar la mayor parte del cuerpo de una

pgina Web, aunque no siempre debe ser evidente que
estn presentes, no tenemos por que pintar los bordes, o
usar fondos para cada celda. Las tablas distribuyen bien el
contenido, tanto texto como imgenes y se pueden anidar
unas tablas dentro de otras.
El nico peligro con las tablas al editarlas, es que cada

programa las interpreta de una forma, pero en general,
hay que separarlas con una lnea de texto en blanco (o
escrita) antes y despus de la tabla.
10.5 Imgenes
No sobrecargar las pginas con imgenes. Las imgenes

que se utilicen no deben ser muy grandes, ni deben
abarcar muchos colores.
Las imgenes son mucho ms impactantes y pueden

transmitir un mejor mensaje y de una forma ms clara y
rpida que el texto. Introducir grficos en las pginas
incrementa de una manera notable la presentacin de las
mismas, pero hay que tener en cuenta que mientras 1K de
22
texto puede llenar toda la pantalla, este pequeo grfico

ocupa 12KBytes.
11. Glosario
ASP Las Active Server Pages son un ambiente de

aplicacin abierto y gratuito en el que se puede
combinar cdigo HTML, scripts y componentes
ActiveX del servidor para crear soluciones
dinmicas y poderosas para el web. ASP una
tecnologa de Microsoft para pginas Web
generadas dinmicamente. ASP ha pasado por
cuatro iteraciones mayores, ASP 1.0, ASP 2.0, ASP
3.0 y ASP.NET. Las versiones pre-.NET se
denominan como ASP clsico. Funcionamiento del
ASP:
2 1
Avi Son los archivos de video habituales de Microsoft

para Windows.
Cgi Common Gateway Interface: Programas (escritos

en lenguajes como C o Perl) que se ejecutan en los
ordenadores servidores de Internet (estn en el
directorio cgi-bin) y procesan la informacin que
reciben de los clientes (por ejemplo a travs de
formularios, buscadores, etc.).
Controles ActiveX es un conjunto de tecnologas de Microsoft

activex que permiten incluir contenido interactivo en la
World Wide Web. Tiempo atrs, el contenido de la
Web era esttico, es decir texto e imgenes en 2
dimensiones. Con ActiveX, los sitios cobran vida
utilizando efectos multimedia, objetos interactivos
y aplicaciones sofisticadas que crean un entorno
similar al de un CD-ROM de buena calidad.
ActiveX provee el nexo que une una variedad de
23
tecnologas que logran darle movimiento a los

sitios Web.
DHTML Dynamic Hypertext Markup Language,

proporciona ms potencia en la parte de
programacin, permitiendo incluir pequeos
programas que se ejecutan al descargar la pgina.
Flash Macromedia Flash o Flash se refiere tanto al

programa de edicin multimedia como a
Macromedia Flash Player, escrito y distribuido por
Macromedia, que utiliza grficos vectoriales e
imgenes de mapa de bits, sonido, cdigo de
programa, flujo de vdeo y audio bidireccional. En
sentido estricto, Macromedia Flash es el entorno y
Flash Player es el programa de mquina virtual
utilizado para ejecutar los archivos Flash. Los
archivos de Flash, que tienen generalmente la
extensin de archivo SWF, pueden aparecer en una
pgina Web para ser vista en un navegador, o
pueden ser reproducidos independientemente por
un reproductor Flash. Los archivos de Flash
aparecen muy a menudo como animaciones en
pginas Web y sitios Web multimedia, y ms
recientemente Aplicaciones de Internet Ricas. Son
tambin ampliamente utilizados en anuncios de la
web.
HTML Hypertext Markup Language es un lenguaje que

nos permite formatear texto e imgenes para su
visualizacin a travs de un programa especial
llamado Navegador o Browser.
Java Es un lenguaje de programacin bastante completo,

independiente de la plataforma usada y orientada a
objetos.
Java Son pequeos programas desarrollados en Java

applets (rutinas o subprogramas) que realizan una
determinada accin. Ejemplo: Texto en
movimiento, mens desplegables, etc.
Programas (generalmente formato CLASS) que se

ejecutan en los ordenadores clientes. En las pginas
Web se insertan unas instrucciones que invocan el
applet. Para que todo funcione es necesario adems
que el navegador cliente tenga habilitada la opcin
JAVA.
24
Javascript Es una de las mltiples maneras que nos permiten

extender las capacidades del lenguaje HTML.
JavaScript no es un lenguaje de programacin
propiamente dicho. Es un lenguaje script u
orientado a documento. No se podr elaborar un
programa con JavaScript, tan slo podrs mejorar
tu pgina Web con algunas cosas sencillas (revisin
de formularios, efectos en la barra de estado, etc.) y,
ahora, no tan sencillas (animaciones usando HTML
dinmico, por ejemplo).
JSP La tecnologa JSP, o de Java Server Pages, es una

tecnologa Java que permite a los programadores
generar dinmicamente HTML, XML o algn otro
tipo de pgina Web, desarrollado por Sun
Microsystems, basado en scripts que utilizan una
variante del lenguaje java.. Esta tecnologa permite
al cdigo Java y a algunas acciones predefinidas ser
embebidas en el contenido esttico. En las JSP, se
escribe el texto que va a ser devuelto en la salida
(normalmente cdigo HTML) incluyendo cdigo
java dentro de l para poder modificar o generar
contenido dinmicamente. El cdigo java se incluye
dentro de las marcas de etiqueta <% y %>.
MIDI Sus archivos ocupan poco tamao, pero la calidad

del sonido es baja.
Mov Son archivos de video de Quick Time.
Mpg Archivos de video con una alta compresin MPEG.

Es necesario disponer de determinado software y/o
hardware para que los navegadores puedan
interpretarlos
PDF El formato de documento portable de Adobe

(Portable Document Format, PDF) es el formato
estndar utilizado mundialmente en la distribucin
de documentos electrnicos. PDF de Adobe es un
formato de archivo universal que conserva todas
las fuentes, formatos, colores y grficos de
cualquier documento de origen creado en cualquier
aplicacin y plataforma.
PHP Es un lenguaje de programacin usado

generalmente para la creacin de contenido para
sitios Web. El nombre es el acrnimo recursivo de
25
"PHP: Hypertext Preprocessor" (inicialmente PHP

Tools, o, Personal Home Page Tools), y se trata de
un lenguaje interpretado usado para la creacin de
aplicaciones para servidores, o creacin de
contenido dinmico para sitios Web.
PS Un archivo PS es un archivo PostScript lo cual

significa que es un archivo formateado en lenguaje
de impresora. Esto quiere decir, si tienes un archivo
en autocad y lo grabas en formato PS, puedes
llevarlo a cualquier PC e imprimir directamente en
la impresora sin tener instalado el autocad. Existen
varios programas que permiten visualizar estos
tipos de archivo, uno de ellos es el GHOST. Otro es
el Acrobat, por ejemplo.
Real Los archivos de sonido Real Audio (RA) estn muy

audio comprimidos, pero es necesario instalar plug-ins
para que los navegadores puedan interpretarlos.
VRML Virtual Reality Modeling Language. Permite crear

entornos tridimensionales (3-D) para ser mostrados
en Web.
Wave WAV o WAVE, apcope de WAVEform audio

format, es un formato de audio digital normalmente
sin compresin de datos desarrollado y propiedad
de Microsoft y de IBM que se utiliza para
almacenar sonidos en el PC. Es una variante del
formato RIFF, mtodo para almacenado en
"paquetes", y relativamente parecido al IFF y al
formato AIFF usado por Macintosh. El formato
toma en cuenta algunas peculiaridades de la CPU
Intel, y es el formato principal usado por Windows.
Los archivos de sonido WAVE nos brindan una
calidad aceptable, pero abarcan gran tamao.
WML WML son las siglas de Wireless Markup Lenguaje.

Es el lenguaje empleado para escribir pginas para
cualquier aparato que utilice tecnologa WAP
(Wireless Application Protocol), como algunos
PDAs (Personal Digital Assitant) y algunos
telfonos mviles.
WML es un lenguaje basado en XML (extended
Markup Lenguaje) y por tanto hereda su sintaxis y
su conjunto de caracteres.
XML XML es el estndar de Extensible Markup
26
Language. XML no es ms que un conjunto de

reglas para definir etiquetas semnticas que nos
organizan un documento en diferentes partes. XML
es un metalenguaje que define la sintaxis utilizada
para definir otros lenguajes de etiquetas
estructurados.
12. Referencias Bibliogrficas
Definiciones de tecnologas en pginas Web

http://es.wikipedia.org/wiki/Sitio_web
Esquema ASP
http://www.maestrosdelweb.com/editorial/aspintro/
FIN DE LA UNIDAD
27

Texto 1

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Texto 1

Caricato da

Copyright:

Formati disponibili

Tecsup

Antes de disear un sitio Web es importante esclarecer los

La unidad permitir que el alumno tenga las pautas bsicas para

Diferenciar los conceptos bsicos de un sitio Web.

Existen bsicamente dos tipos de portales: portales verticales

3. Tipos de pginas Web

Existen bsicamente dos tipos de pginas Web: Las Pginas

3.1 Pginas Estticas

Son aquellas pginas en donde la informacin es esttica

3.2 Pginas Dinmicas

Estas pginas permiten visualizar informacin que puede

Las notas y asistencia de un curso virtual.

Normalmente estas pginas dinmicas trabajan con un

4. Componentes de una pgina Web

Toda pgina Web tiene los siguientes componentes:

Es una imagen usada en Internet para hacer publicidad

Es un anuncio o spot publicitario basado en una imagen

Los formularios son pginas que contienen elementos

4.4 Hiperenlaces o Enlaces

Las tablas nos permiten distribuir la informacin dentro

5. Tipos de archivos utilizados en un Sito Web

Los Sitios Web pueden contener distintos tipos de archivos para

Dentro de los textos se utilizan:

Dentro de los formatos de videos tenemos:

En la actualidad se esta usando bastante el formato SWF que

6. Servicios de un Portal Web

Los portales Web clsicamente brindaban un servicio de

Entre los servicios ms comunes que podemos encontrar hoy en

Cabe indicar, que estos servicios no estn necesariamente

7. Tecnologas en Pginas Web

En el desarrollo de una pgina Web podemos usar diversas

HTML (Hypertext Markup Language)

La estructura de un conjunto de pginas Web es muy importante,

Antes de crear un conjunto de pginas Web debemos tener una

8.1 Tipos de estructuras

La estructura jerrquica es la tpica estructura de rbol,

Este tipo de organizacin permite al lector conocer en

La estructura lineal es la ms simple de todas, la

pgina, podemos ir a la siguiente pgina o a la

Esta estructura es muy til cuando queremos que el

Lineal con jerarqua

Este tipo de estructura es una mezcla de la dos

Esto permite tener el contenido organizado

La estructura de red es una organizacin en la que

Este tipo de organizacin es la ms libre, pero tambin es

Mapa del Sitio

El Mapa del Sitio es una herramienta que permite

En el ejemplo anterior podemos observar una estructura

9. Recomendaciones para disear una pgina Web

Unos de los elementos ms importantes en el diseo de

Duplique los elementos de navegacin si es

Si sus pginas tienen normalmente un tamao

Aada un enlace al principio de la pgina

Si la pgina es suficientemente larga proporcione al

Cada pgina Web ha de tener un enlace por el cual se

9.2 Tamao de las pginas

Si quiere captar la atencin del navegante, no haga la

Haga las pginas de una pantalla y media

En general es una buena costumbre no hacer pginas

manera evitar muchos problemas y facilitar la

Si necesita poner gran cantidad de texto escrito que ha

Los enlaces permiten enriquecer el contenido de la

Cuando realice enlaces consecutivos similares, resalte