SCRIB Apuntes Paginas WEB

Elaboraci
on de
Pginas
ELABORACION DE PAGINAS WEB

MODULO II
_________________________________________________________________________________________________
Docentes:
LSC. ELVIA MICAELA URBINA
VISCENCIO.
LSC. MA. EUGENIA ACUA R.
AGOSTO 2010/ENERO 2011
MANUAL
ALUMNO:_______________________________ GRUPO:_____________
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
ELABORACION DE PGINAS WEB.

1. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO
1.1. ANALIZAR LAS TEORIAS DEL DISEO
1.2. IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES.
1.3. DISEAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION SENTIDO Y
EQUILIBRIO.
1.4. APLICAR LA TEORIA DEL COLOR CONSIDERANDO EL CIRCULO CROMATICO, CONSTRASTES,
EL RGB Y CMY.
2. MANEJAR LOS ELEMENTOS BASICOS DE

USADO EN LA CREACION DE PGINAS WEB.
UN
LENGUAJE
2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PGINA WEB.

2.2. ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB.
2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB.
2.4. ESTABLECER VINCULOS E HIPERVINCULOS.
2.5. MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB.
2.6. MANIPULAR TABLAS EN UNA PAGINA WEB.
2.7. MANIPULAR IMGENES Y ANIMACIONES EN UNA PAGINA WEB.
2.8. DEFINIR SECCIONES DE MAPEO DE IMGENES EN UNA PAGINA WEB.
2.9. INSERTAR SONIDO Y VIDEO EN UNA PAGINA WEB.
2.10. IMPLEMENTAR SERVICIOS DE CORREO EN UNA PAGINA WEB.
3. DISEAR UNA
APLICACIN.
PAGINA
WEB
CON
UN
SOFTWARE
DE
3.1. DEFINIR OBJETIVOS Y CONDENIDOS DE LA PGINA WEB.

3.2. ESTABLECER ETIQUETAS EN LA PGINA WEB.
3.3. ESTABLECER LINKS DENTRO DE LA PGINA WEB, ENTRE PGINAS WEB Y ENTRE
SERVIDORES.
3.4. MANIPULAR IMGENES DENTRO DE LA PGINA WEB.
3.5. ESTRUCTURAR TABLAS EN UNA PAGINA WEB.
3.7. ALMACENAR PGINAS WEB EN UN SERVIDOR DEDICADO O GRATUITO.
4. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

4.1. IDENTIFICAR LOS SERVIDORES DE INTERNET DISPONIBLES PARA PUBLICACION DE
INFORMACION.
4.2. SELECCIONAR UN SERVIDOR DE INTERNET CONSIDERANDO LAS CARACTERISTICAS DE LA
PGINA WEB.
4.3. UTILIZAR LA PGINA DEL SERVIDOR DE INTERNET PARA ALOJAR UNA PAGINA WEB.
4.4. VERIFICAR EL FUNCIONAMIENTO DE LA PGINA WEB DENTRO DEL SERVIDOR
SELECCIONADO.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
5. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO

Qu es el diseo? Proceso de creacin visual con un propsito, el cual cumple con exigencias
practicas. Un buen diseo es la mejor expresin visual de la esencia de `algo` cuya creacin no
debe ser solo esttica sino tambin funcional.
ELEMENTOS DEL DISEO

Los siguientes elementos son las bases que construyen el Diseo.
Lnea
Una lnea es definida como una marca con
longitud y direccin, creada mediante un
punto que se mueve a lo largo de una
superficie. Una lnea puede variar en
longitud, ancho, direccin, curvatura y
color. La lnea puede ser de dos
dimensiones (una lnea de lpiz sobre
papel), o tres dimensiones implcitas.
Forma
Una figura plana o una forma es creada
cuando lneas actuales o implcitas se
encuentran alrededor de un espacio. Un
cambio en el color o el sombreado puede
definir una forma. Las formas pueden ser
clasificadas en varios tipos: geomtricas
(cuadrado, tringulo, crculo) y orgnicas
(irregulares en contorno).
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Tamao
Este se refiere a las variaciones de las
proporciones de los objetos, lneas o
formas. Hay una variacin de tamao
en
objetos
ya
sean
reales
o
imaginarios.
Espacio
Espacio es el rea vaca o abierta entre,
alrededor, arriba, debajo o entre objetos.
Figuras y formas son realizadas en el
espacio alrededor y entre l. El espacio
tambin es llamado bidimensional o
tridimensional. El espacio positivo es
rellenado con formas o figuras. El espacio
negativo rodea una forma o figura.
Color
El Color es el carcter percibido de una superficie
de acuerdo con la longitud de onda o la luz
reflejada desde esta. El Color posee tres
dimensiones: TINTE (otra palabra para color,
indicada por su nombre as como rojo o amarillo),
VALOR (su luminosidad o oscuridad), INTENSIDAD
(su brillo u opacidad).
Textura
La Textura es la forma como se siente la superficie
(textura actual) o como puede ser observada
(textura implcita). Las Texturas son descritas con
palabras como spero, sedoso o rugoso.
Valores
El Valor es que tan oscuro o claro se ve algo.
Podemos alcanzar cambios de valores en el color
por medio de la adicin de blanco o negro a dicho
color. Claroscuro usa valores en los dibujo mediante
contrastes de claros y oscuros en una composicin.
Principios de Diseo
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Los principios emplean elementos del diseo para crear composiciones.

Balance
El Balance es el sentido de equidad visual
en una forma, figura, valor, color, etc. El
Balance se puede hacer simtrica o
uniformemente
en
objetos,
valores,
colores, texturas, formas, etc.,
Contraste
El
contraste
es
la
yuxtaposicin (fusin) de los
elementos opuestos.
nfasis
El nfasis es usado para crear ciertas
partes de sus trabajos artsticos a
travs de llamado atencin de
manera especial. El centro de inters
o punto foco es el lugar del dibujo
que le invita a enfocar su mirada.
Proporcin
La Proporcin describe el tamao,

ubicacin o el monto de una cosa
comparada con otra.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Patrones
Los Patrones son creados mediante la
repeticin de un elemento (lnea, forma o
color) una y otra vez.
Gradacin
La Gradacin es el tamao y direccin

producidos por una perspectiva lineal. La
Gradacin del color es desde gamas
calidas a fras y por su parte los tonos
oscuros a claros producen una perspectiva
area. La Gradacin puede agregar inters
y movimiento a una forma
Composicin
La
combinacin
de
distintos
elementos para formar un todo.
1.1.
ANALIZAR LAS TEORIAS DEL DISEO.
MINIMALISMO.
El minimalismo es una corriente esttica derivada de la reaccin al pop art. Frente al colorismo, a
la importancia de los medios de comunicacin de masas, frente al fenmeno de lo comercial y de
un arte que se basaba en la apariencia, el minimalismo utiliz conceptos diametralmente
opuestos. El sentido de la individualidad de la obra de arte, la privacidad, una conversacin
conceptual entre el artista, el espacio circundante y el espectador. As como la importancia del
entorno como algo esencial para la comprensin y la vida de la obra.
Los preceptos bsicos del minimalismo son:
a. Utilizar colores puros,
b. Asignarle importancia al todo sobre las partes,
c. Utilizar formas simples y geomtricas realizadas con precisin mecnica,
d. Trabajar con materiales industriales de la manera ms neutral posible y disear sobre
superficies inmaculadas.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
e. Da gran importancia al espacio y a los materiales ecolgicos

f. El resultado que define este estilo en un concepto es la palabra limpieza.
Hay muchas variantes del minimalismo, con un toque ms o menos oriental, o ms o menos
escandinavo. Actualmente tiene gran difusin en Europa, entre los ms jvenes, sumado a toda
una corriente de muebles de diseo dans contemporneo.
La decoracin minimalista, se nutre de las formas

puras, simples, y juega con sus volmenes, su
iluminacin y sus superficies.
Los creadores minimalistas reducen al mximo los

elementos propios del arte, los volmenes y formas
en escultura. De forma anloga proceden en la
arquitectura o en la pintura. Intentan condensar en
escasos elementos sus principios artsticos y
reflexiones.
CONCEPTUALISMO.
El movimiento artstico surgido a finales de los aos sesenta, cuyos exponentes rechazan el arte
como artculo de lujo, permanente, porttil y vendible, proponiendo un tipo de arte en el que
cuenta primordialmente la idea o el concepto que respalda sus realizaciones
Los artistas conceptuales utilizaron con frecuencia fotos, recortes de peridicos como parte de su
creacin, para documentar o para expresar ideas, como por ejemplo:
Juan Camilo Uribe
Alicia Barney
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
LydiaAzout
Antonio Caro (1950-
Bernardo Salcedo
Becky Mayer
Alicia Barney
Rosemberg Sandoval
Inginio Caro
Adolfo Bernal
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
1.2.
IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES.
Si bien las definiciones no pueden ser tajantes ni excluyentes, resulta necesario asumir que
creatividad e innovacin, arte y diseo se parecern en la medida que las busquemos en mbitos
cuyos modos de hacer mantengan alguna identidad y dejarn de parecerse en tanto nos alejemos
de esos puntos en los que coinciden. El arte cuando se convierte en industria comercial va a
tender a parecerse ms al diseo que al arte callejero, del mismo modo que la creatividad
empresarial puede conducir a la innovacin de la misma forma que la innovacin tecnolgica
puede inducir cierto estilo de creatividad, ejemplo claro de esto fue en los 80s y 90s la
incorporacin de los software digitales al proceso de diseo.
Queda agregar que hay descripciones definitivas en los mbitos del diseo para evitar que
comencemos a confrontar y asumir que nuestro radio de accin es permeable y sensible a
sinnmero de circunstancias. Que algunas de ellas no agotan la complejidad de la produccin en
serie, que unas pocas se han vuelto ajenas a las urgencias del mercado, que otras muchas se han
convertido en iconos de algunos productos o servicios y que unas cuantas han aceptado jugar el
juego mundial de la creacin de valor, la identidad corporativa, los medios y los productos de
consumo.
El sector de servicios est creciendo, tanto en nmero de empleados como en su importancia en
la economa, mientras el sector manufacturero decae. Sin embargo, as como los sectores
manufactureros, los servicios deben ser diseados y su diseo debe ser gestionado.
El diseo de servicios puede ser tangible como intangible. Puede involucrar artefactos y otras
cosas incluyendo comunicacin, ambientes y conductas. Cualquier forma que adopte debe ser
consistente, fcil de usar y ser aplicado estratgicamente.
Slo recientemente los gerentes involucrados en el sector de servicios se han
dado cuenta que un esfuerzo conciente por aplicar tcnicas de diseo a los
servicios puede resultar en un incremento en la satisfaccin de clientes, mayor
control sobre sus ofertas y mayores ganancias.
1.3.
DISEAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION,
SENTIDO Y EQUILIBRIO.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un

diseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional
que mediante un mtodo especfico (diseo) construye mensajes (comunicacin) con medios
visuales (grafismos). No es el creador del mensaje, sino su intrprete.
El principal componente de toda composicin grfica es pues el mensaje a interpretar, la
informacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se
debe representar por medio de diferentes elementos grficos, que pueden ser muchos y variados,
aunque los ms comunes son:
Elementos grficos simples: puntos y lneas de todo tipo (libres, rectas, quebradas curvas,
etc.)
Elementos geomtricos, con contorno o sin l: polgonos, crculos, elipses, valos, etc.
Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes
textuales.
Grficos varios: logotipos, iconos, etc.
Ilustraciones
Fotografas
Cualquier otro elemento visual apto para comunicar un mensaje.
a. ZONAS AUREAS.
La cre Vitruvio, la autoridad romana en arquitectura. Ide un sistema de clculo matemtico de
la divisin pictrica, para seccionar los espacios en partes iguales y as conseguir una mejor
composicin. Se basa en el principio general de contemplar un espacio rectangular dividido, a
grandes rasgos, en terceras partes, tanto vertical como horizontalmente.
La escala se utiliza en planos y mapas para la representacin de una medicin proporcional real.
La medicin nos permite adecuarnos a la realidad, pero ms importante es lo que colocamos
junto al objeto visual o el marco en el que est colocado. La medicin universal es la propia
medida del hombre, el tamao medio de las proporciones humanas.
La pregunta que hacen todos los diseadores es: cmo podemos distribuir el espacio de diseo
de una forma acertada? Pues bien, no hay una norma que nos indique la divisin perfecta, pero
existe una frmula muy conocida en el mundo del diseo, que permite dividir el espacio en partes
iguales, para lograr un efecto esttico agradable y que puede llegar a ser muy eficaz. Esta teora
se denomina "La regla urea", tambin conocida como "seccin urea".
b. DIRECCION Y SENTIDO.
En la comunicacin visual el diseador tendr que tener en cuenta tanto la vertiente psicolgica
de la percepcin humana como las significaciones culturales que pueden tener ciertos elementos.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
El diseador grfico es una especie de arquitecto del espacio grfico y debe distribuir los
elementos en funcin de una estructura interna que tenga una significacin, gua o intencin
coincidente con el mensaje que se quiera transmitir. Esta estructura ser la responsable de la
eleccin cromtica y su intencionalidad expresiva, de la eleccin de las imgenes o de la
disposicin de los bloques de texto.
Algunos factores psicolgicos que debemos conocer son:
a. El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composicin y los

ejes en los cuales descansa. El desequilibrio crea provocacin e inestabilidad. Tendremos
que analizar que es lo que queremos transmitir al receptor y con respecto a esto crear una
composicin determinada.
b. La referencia horizontal: Necesitamos ver que los objetos o partes que componen
una composicin estn de alguna forma apoyados. La parte inferior se ver mejor que la
superior, ya que ser donde se constituya la base.
c. Angulo inferior izquierdo: Los hbitos de lectura occidentales han motivado
propiciado que la atencin se centre ms en la parte izquierda y en concreto en la inferior
izquierda.
d. Relajamiento-tensin: psicolgicamente cuando tenemos una composicin
equilibrada, simtrica o predecible; sin embargo generaremos tensin en el receptor si no
es capaz de encontrar una lgica visual en la composicin que le presentamos.
c. EQUILIBRIO.
La utilizacin ms eficaz de los mecanismos de la percepcin visual consiste en identificar claves
visuales en un sentido u en otro, en equilibrio o en desequilibrio, fuertes o dbiles.
Podemos conseguir en nuestra composicin ese equilibrio de formas y lneas, es decir, los pesos
de los elementos deben estar compensados. La manera de medir el peso de las formas y lneas
del diseo es, analizando la importancia visual de estos dentro de nuestra composicin.
Existen dos tipos de equilibrio:
El equilibrio simtrico.
El equilibrio asimtrico.
Si dividimos la composicin en dos extremos, el equilibrio simtrico se produce cuando

encontramos igualdad de peso y tono en ambos lados de nuestra composicin, y el equilibrio
asimtrico se produce cuando no existe las mismas dimensiones (ya sea de tamao, color...) en
ambos lados, pero an as existe equilibrio entre los elementos.
El equilibrio que crea la simetra es un factor importante de la forma en que evaluamos el

atractivo visual de un objeto. Sin embargo, el atractivo de la simetra tiene lmites; un toque de
asimetra puede hacer que resulte an ms atractivo, aadiendo un toque de individualidad y
singularidad. La simetra, en cierta manera, da sensacin de orden y alivia la tensin; la asimetra
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
hace lo contrario, crea agitacin y tensin, pero puede conseguir que una imagen no sea
montona.
Podemos hacer otra divisin de equilibrio:
El equilibrio formal.
Y el equilibrio informal.
El equilibrio formal se basa en la bisimetra. Se busca un centro ptico dentro del diseo, que
no tiene por qu coincidir con el centro geomtrico de la composicin. Una composicin que siga
este esquema compositivo reflejar estabilidad, calma y estatismo, pero no supone una
composicin muy audaz.
1.4.
APLICAR LA TEORIA DEL COLOR CONSIDERANDO EL CIRCULO CROMATICO,
CONTRASTES, EL RGB Y CMY.
Empezaremos diciendo que el color en s no existe, no es una caracterstica del objeto, es ms

bien una apreciacin subjetiva nuestra. Por tanto, podemos definirlo como, una sensacin que se
produce en respuesta a la estimulacin del ojo y de sus mecanismos nerviosos, por la energa
luminosa de ciertas longitudes de onda.
El color es pues un hecho de la visin que resulta de las diferencias de percepciones del ojo a
distintas longitudes de onda que componen lo que se denomina el "espectro" de luz blanca
reflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda est
comprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendo
radiaciones, pero ya no son percibidos por nuestra vista.
En las artes grficas tenemos dos grandes categoras con respecto al color, imagen en color e
imagen en blanco y negro, en stas ltimas podemos diferenciar: - imgenes a pluma. imgenes tramadas: mediante diferentes tipos de gris. Asimismo, las imgenes en color se
pueden dividir en dos categoras: - colores planos: manchas uniformes de color. - degradados,
tambin tramadas. El color es un elemento bsico a la hora de elaborar un mensaje visual.
Muchas veces, el color no es un simple atributo que recubre la forma de las cosas en busca de la
fidelidad reproducida. A pesar de que, sin el color la forma permanece, con frecuencia el Mensajes
es, precisamente, el Color, o lo que slo puede expresarse por el Color.
El color est presente en todos los aspectos de la identidad empresarial y de marca. En la
identidad, las empresas pueden hacer que el color sea el principal elemento de su identidad
utilizando un nico color o una paleta de colores como parte de su identidad visual. Si el color se
emplea uniformemente en una serie de elementos de la identidad, se termina convirtiendo en la
rbrica de la empresa.
d. CIRCULO CROMATICO.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
El ojo humano puede distinguir entre 10.000 colores. Se pueden adems emplear tres dimensiones
fsicas del color para relacionar experiencias de percepcin con propiedades materiales: saturacin,
brillantez y tono.
El crculo cromtico nos sirve para observar la organizacin bsica y la interrelacin de los colores.
Tambin lo podemos emplear como forma para hacer la seleccin de color que nos parezca
adecuada a nuestro diseo. Podemos encontrar diversos crculos de color, pero el que aqu vemos
est compuesto de 12 colores bsicos.
Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos.

En este crculo cromtico podemos encontrar:
los colores primarios: rojo, azul y amarillo;
los secundarios: verde, violeta y naranja;
y los terciarios: rojo violceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso,
azul verdoso y azul violceo.
e. RGB (RED, GREEN, BUE) y CMY (CYAN, MAGENTA, YELLOW)
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Los tonos secundarios se obtienen al mezclar partes iguales de dos primarios; los tonos terciarios
se consiguen al mezclar partes iguales de un tono primario y de un secundario adyacente. Los
primarios son colores que se consideran absolutos y que no pueden crearse mediante la mezcla
de otros colores. Sin embargo, mezclar los primarios en diversas combinaciones crea un nmero
infinito de colores. Dependiendo de qu mbito, podemos encontrar tres juegos de colores
primarios:
Los artistas y diseadores parten de un juego formado por el rojo, el amarillo y el azul.
Mezclando pigmentos de stos colores pueden obtenerse todos los dems tonos.
f.
El segundo juego de primarios es el del rojo, verde y el azul, conocidos como primarios
aditivos. Son los primarios de la luz y se utilizan en el campo de la ciencia o en la
formacin de imgenes de monitores. Si se mezclan en distintos tantos por ciento, forman
otros colores y si lo hacen en cantidades iguales producen la luz blanca.
El tercer juego se compone de magenta, amarillo y cyan. Se tratan de los primarios
sustractivos y son los empleados por los impresores. En imprenta, la separacin de
colores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que se
obtienen los colores de impresin por proceso sustractivo.
CONTRASTES.
El tono: Es el matiz del color, es decir el color en s mismo, supone su cualidad cromtica, es
-simplemente- un sinnimo de color. Es la cualidad que define la mezcla de un color con blanco y
negro. Est relacionado con la longitud de onda de su radiacin. Segn su tonalidad se puede
decir que un color es rojo, amarillo, verde... Aqu podemos hacer una divisin entre:
tonos clidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el
fuego...
y tonos fros (azul y verde). Los colores fros son aquellos que asociamos con el agua, la
luz de la luna ...
Los trminos "clido" y "fro" se utilizan para calificar a aquellos tonos que connotan dichas
cualidades; stos trminos se designan por lo que denominamos "temperatura de color". Las
diferencias entre los colores clidos y los fros pueden ser muy sutiles. Por ejemplo, el papel
blanco puede parecer ms clido o ms fro por una leve presencia de rojo o azul. Lo mismo
ocurre con el gris y el negro.
La brillantez: Tiene que ver con la intensidad o el nivel de energa. Es la luminosidad de un color
(la capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono.
Es una condicin variable, que puede alterar fundamentalmente la apariencia de un color. La
luminosidad puede variar aadiendo negro o blanco a un tono.
En general, con los tonos puros que tienen un valor ms luminoso (amarillo, naranja, verde) se
consiguen las mejores variantes claras, mientras que los tonos puros que tienen normalmente un
valor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores variantes oscuras.
La saturacin: Est relacionada con la pureza cromtica o falta de dilucin con el blanco.
Constituye la pureza del color respecto al gris, y depende de la cantidad de blanco presente.
Cuanto ms saturado est un color, ms puro es y menos mezcla de gris posee.
6.
MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE

PGINAS WEB.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Para crear una pgina web requerimos de un lenguaje especial de programacin, el cual es un
programa con un conjunto de instrucciones detalladas que le dirn a la computadora que hacer
exactamente, paso a paso. Un programa puede ser tan corto como de una sola lnea de cdigo, o
tan largo como de varios millones de lneas de cdigo. Estos son algunos de ellos:
HTML.
El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de hipertexto),
es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma de hipertexto,
que es el formato estndar de las pginas web. Gracias a Internet y a los navegadores del tipo
Explorer o Netscape, el HTML se ha convertido en uno de los formatos ms populares que existen
para la construccin de documentos.
DHTML.
El HTML Dinmico o DHTML (del ingls Dynamic HTML) designa el conjunto de tcnicas que
permiten crear sitios web interactivos utilizando una combinacin de lenguaje HTML esttico, un
lenguaje interpretado en el lado del cliente (como JavaScript) y el lenguaje de Hojas de estilo en
cascada (CSS).
ASP.
Active Server Pages (ASP), es una tecnologa propietaria de Microsoft. Se trata bsicamente de un
lenguaje de tratamiento de textos (scripts), basado en Basic, y que se denomina VBScript (Visual
Basic Script). Se utiliza casi exclusivamente en los servidores Web de Microsoft (Internet
Information Server y Personal Web Server). Los scripts ASP se ejecutan, por lo tanto, en el
servidor y puede utilizarse conjuntamente con HTML y Javascript para realizar tareas interactivas
y en tiempo real con el cliente.
Con ASP se pueden realizar fcilmente pginas de consulta de bases de datos, funciones sencillas
como obtener la fecha y la hora actual del sistema servidor, clculos matemticos simples, etc.
JAVA SCRIPT.
JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si
bien esta se realiza siguiendo el paradigma de programacin basada en prototipos, ya que las
nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad.
Todos los navegadores modernos interpretan el cdigo JavaScript integrado dentro de las pginas
web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una
implementacin del DOM (Document Object Model, podra ser Modelo en Objetos para la
representacin de Documentos), abreviado DOM, es esencialmente un modelo computacional
a travs del cual los programas y scripts pueden acceder y modificar dinmicamente el contenido,
estructura y estilo de los documentos HTML y XML.
2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PGINA WEB.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Es importante tomar una decisin para elegir qu objetivos consideramos primordiales antes del
desarrollo de la pgina web. La eleccin, condiciona de manera clave la concepcin y el diseo del
proyecto, el cual debe ser coherente con los objetivos de la empresa. Por ejemplo:
Conseguir 250 contactos comerciales en 1 ao.
Ofrecer a los clientes una herramienta de seleccin del producto ms adecuado para que se
informen y comparen sin presiones
Impactar al visitante con una web espectacular que refuerce la imagen de marca.
Vender software directamente desde Internet buscando el ahorro de costos de distribucin.
Tu web puede ser algo ms. Ya que habla por ti, por tus productos, por tus servicios, por lo que
adems puede:
Ofrecer al visitante ocasional una motivacin para contactar,
Una razn para recordarte o quizs una utilidad que le ahorra tiempo,
Encontrar una informacin que estaba buscando.
Facilitar y agilizar el trabajo de colaboradores y de empleados.
Apoya la imagen de marca.
Vende y completa el proceso de venta.
Ofrece asistencia y soporte tcnico.
Facilita una comunicacin gil y fluida con tus clientes y proveedores.
Cada empresa o persona debe elegir aquellos que mejor encajen con sus objetivos y las
expectativas del negocio.
Piensa que la definicin de objetivos te ahorrar sorpresas como disear una web pensando en los
clientes, para despus descubrir que slo te visitan "extraos" ... O un diseo de web muy
espectacular e innovador, cuando lo nico que se pretende es que la persona deje sus datos de
email para enviarle ofertas concretas, etc.
Un mismo sitio web puede perfectamente intentar cumplir varios objetivos simultneamente
aunque te recomiendo que lo abordes por fases. Empieza por 2 o 3 de ellos, y a medida que
vayas viendo su evolucin y aprendiendo de los errores y aciertos, puedes ir planificando nuevos
objetivos.
Para ilustrar estas ideas, los objetivos podemos agruparlos en:
a) Buscar leads o contactos. Ya sea para comprar, distribuir, vender, anunciarse, conseguir una
visita comercial, una demostracin de producto, etc ...
b) Fidelizacin de clientes y apoyo a la venta. Branding, amplia informacin, soporte tcnico,
ayuda on-line, actualizaciones de producto, demostraciones interactivas, promociones, juegos,
utilidades, foros, etc.
c) Ahorro de tiempo y dinero. Aplicaciones y utilidades para agilizar y facilitar tareas rutinarias:
ventas on-line, introduccin de ofertas de trabajo, actualizaciones de producto, transferencia
de archivos, buzn de sugerencias, quejas, trmites y gestiones on line, etc.
Cada uno lo puede definir como quiera, ms o menos detallado, pensando en las implicaciones
para la organizacin, buscando diferenciarse de la competencia, marcar objetivos a medio y largo
plazo, etc. Es escribir con letras bien grandes LO QUE QUIERES. Otra tarea ser decidir las
estrategias a emprender para cumplir los objetivos.
2.2. ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR
Antes de crear un conjunto de pginas web uno ha de tener una idea clara de cmo va a ser la
estructura de dichas pginas, es conveniente hacer un esquema, para la mayora de los casos una
hoja de papel y un lapicero bastar, pero si el emplazamiento va a albergar un gran nmero de
pginas es recomendable usar algn tipo de programa que permita manejar estructuras de tipo
grafo.
LA ESTRUCTURA DEPENDE DEL CONTENIDO
No es lo mismo crear una estructura de navegacin para un sitio que desea publicar informacin
al estilo de un libro cuya estructura estar formada por captulos, este tipo de informacin se
adapta bastante bien a una estructura lineal como jerrquica. Mientras que un sitio donde se
expone un tutorial o un tour es ms apropiada una estructura de tipo lineal.
Para visualizar la estructura de directorios es recomendable dibujar una especie de organigrama,
en el que vamos a ir colocando los directorios en funcin de su importancia, desde el nivel
superior a otros inferiores.
Se debe listar la informacin que se desea incluir en la Web. Esta informacin debe ser
significativa y til para el pblico. Teniendo en cuenta lo que a ellos les interesa, no lo que a
nosotros nos gustara que nos interese.
En el caso de que existan otras formas de acceso a informacin disponible para esas mismas
personas, el contenido de la Web deber ser superador de esos otros materiales.
Es el momento de hacer un boceto de la pgina principal y de cada pgina que est enlazada a
sta, sin preocuparnos demasiado por los detalles, ya que solo es un boceto. Es importante
recordar que los visitantes de una web no lo van a leer completamente, sino que lo que desean es
encontrar rpidamente lo que les interesa, por lo que habr de establecer una estructura
adecuada de enlaces entre las pginas. El movimiento de un lado a otro de la web debe ser lo
ms intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difcil
encontrar lo que buscamos es abandonado rpidamente.
Cuando un internauta ingresa a una pgina web, quiere encontrar entre otras cosas tres
caractersticas: velocidad, simplicidad y claridad. Por su parte, el sitio web visitado pretende que
la persona o personas que ingresen en sus pginas se queden el mayor tiempo posible; en
lenguaje comercial buscan atraer clientes. Pero, cmo lograr las dos cosas?, es decir, ofrecer un
producto agradable a la vista y con buenos contenidos.
Este es un ejemplo con el debemos empezar a crear nuestra pgina, en el cual debemos tener
claro los niveles que tendr.
ESTRUCTURA SUGERIDA DE UNA WEB

MATERIA : ELABORAR PAGINAS WEB
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
NIVEL 1
PRINCIPAL
INFORMACION
MATERIALES
NIVEL 2
BIENVENIDA
UBICACIN CURRICULAR
FUNDAMENTACION
A QUIEN VA DIRIGIDO
INTRODUCCION
OBJETIVO
CONTENIDO
METODOLOGIA
EVALUACION
CALENDARIO
UNIDAD I
UNIDAD II
UNIDAD III
ACTIVIDADES
PORTAFOLIO DE APREDIZAJE PARA CADA

UNIDAD
FOROS
REFERENCIAS
CREADOR
BIBLIOGRAFIA
LECTURAS COMPLEMENTARIAS
LIGAS DE INTERES
GLOSARIO
DATOS PERSONALES
NIVEL ACADEMICO
EXPERIENCIA LABORAL
FOTOGRAFIA
NIVEL 3
CONTENIDO
RESUMEN
RECURSOS
CONTENIDO
RESUMEN
RECURSOS
CONTENIDO
RESUMEN
RECURSOS
RESUMEN
RECURSOS
2 FOROS EL INICIAL
FORO FINAL
POR TEMA
2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB.

Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este
documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole
informativo como por ejemplo el titulo de nuestra pgina.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos
nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo,
palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e imgenes
</body>
</html>
Con todo lo que conocemos ya sobre HTML podemos construir una pgina web que ya tiene
bastante sentido. Vemos un ejemplo a continuacin.
<html>
<head>
<title>Elaboracin de Paginas Web</title>
</head>
<body>
Bienvenido,
Ests en la pgina Elaboracin de Pginas Web de Tercer Semestre.
Aqu aprenders de manera personal a realizar tu pagina web.
</body>
</html>
Cmo ya hemos dicho el HTML es un lenguaje de marcas (etiquetas). As todo nuestro texto
estar encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.
Funcionan de la siguiente manera:
<etiqueta> inicio de una etiqueta
</etiqueta> el cierre de una etiqueta.
Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese
caso se cierra, dentro de la propia etiqueta, tal y cmo vemos a continuacin.
<etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de
apertura, por ejemplo: 
Las etiquetas deben de ir siempre en minsculas. Encontrars muchas pginas WEB en las que las
etiquetas estn en maysculas, hasta el HTML 4.0 era indiferente la utilizacin de minsculas o
maysculas y muchos autores utilizaban las maysculas por claridad.
Todo lo que vaya entre dos etiquetas HTML se ver afectado por stas, por ejemplo
<h1>Esto es un encabezado</h1>
Pero esto no, esto es un prrafo
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Estas son algunas de las etiquetas ms utilizadas:

< html>marcan el inicio y el final de una pagina web< /html>
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina
< body background="">establece una imagen de fondo para la pagina <
text="">establece el color de letra en la pagina
< h1>establece un encabezado en la pagina< /h1> < hr>agrega una lnea separadora
body
Etiquetas de texto
pone el texto en negrita
pone el texto en cursiva
cambia el color de texto
cambia el tamao del texto
 cambia el tipo de letra cambia el color el
tamao y el tipo de letra
Etiquetas de enlace
< aref0"">texto< /a>aade un enlace utilizado la palabra texto
< ahref="">< img src="">< /a>aade un enlace utilizando una imagen
Etiquetas de imagen
< img src="">permite aadir una imagen ala pagina
< img src=""align0"top">alinea el titulo de la imagen en la parte superior < img
src=""align="middle">alinea el titulo de la imagen en la parte de en medio < img
src=""align"bottom"> alinea el titulo de la imagen en la parte inferior
Etiquetas secundarias.
Algunas veces, necesitaremos aadir dos etiquetas a un texto, por ejemplo, supongamos y esto
es slo un ejemplo, que un ttulo sea tambin un enlace, veamos cmo lo haramos (utilizamos
pseudo cdigo puesto que todava no hemos visto el cdigo html).
<ttulo><enlace> loquesea.com</enlace></ttulo>
En cambio el siguiente cdigo sera incorrecto
<ttulo><enlace> loquesea.com</titulo></enlace>
Las etiquetas pueden a veces llevar atributos que nos permiten especificar ms las etiquetas que
utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una
etiqueta <hombre> y queremos especificar que es guapo. As que utilizaremos el atributo
"apariencia" a este atributo le daremos el valor de "guapo". Nos quedara apariencia="guapo".
As nuestro <hombre> nos quedara <hombre apariencia="guapo">.
Veamos la etiqueta <html> nos dice que se trata de un documento html, pero podemos utilizar
el atributo lang para especificar el idioma del contenido del documento, as nos quedara <html
lang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es).
En castellano estaramos diciendo: esto es un documento html en espaol. Los atributos siempre
se aaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas.
Etiquetas de prrafo
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
Para esto se utiliza la etiqueta y . Este comando es muy til debido a que si uno
escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al
texto, siempre va a aparecer en la misma lnea.
Para alinear un prrafo se utiliza el comando <align> y </align>, utilizado dentro de la etiqueta
. Se puede alinear de tres formas diferentes:
 Prrafo... Alinea a la izquierda.
 Prrafo... Realiza un centrado.
 Prrafo... Alinea a la derecha.
 indica el inicio de un prrafo nuevo
 cambia el texto a otra lnea
< pre>aade un texto preformateado < /pre>
< li>sirve para listar objetos
< ul>aade numeracin a los objetos listados
< ul>aade vietas a los objetos listados< /ul>
< blockquote>resalta una lnea ubicada en un prrafo
< /blockquote> indica el inicio de una definicin
Cuando nosotros queremos que lo que escribimos aparezca en otra lnea utilizamos el comando
 .
Al terminar de escribir un prrafo es conveniente y esttico utilizar el comando para separar un
prrafo de otro que es 
Etiquetas para darle formato al texto:
Para el tamao y tipo de letra se usa la etiqueta y , que posee tres atributos:
tamao (size), Tipo de letra o fuente (face) y color
Formato:
 y Sirve para colocar un texto en Negrita.
 y sirve para subrayar un texto
<strike> y </strike> sirve para tachar un texto.
 y cumple la misma funcin que 
 y para colocar un texto en cursiva.
texto con nfasis texto con nfasis
<cite>citacin</cite> citacin
<dfn>definicin</dfn> definicin
<kbd>teclado</kbd> teclado
<samp>ejemplo</samp> ejemplo
size: regula el tamao de los caracteres.
Ejemplo: texto... .
face: es la fuente que se quiere usar, arial, times new roman, etc.
Para elegir nosotros mismos el color que queremos que tengan los links o enlaces e incluso el
texto, las etiquetas que se utilizan para hacer esto son las siguientes:
text="#nmero" Para el color del texto.

link="#nmero" Para el color de los enlaces.
INFORMATICA
TERCER SEMESTRE

MODULO II
_________________________________________________________________________________________________
vlink="#nmero" El color con que aparecern los enlaces ya visitados.

alink="#nmero" Color del enlace cuando lo pulsamos.
Por lo tanto la etiqueta <body> puede quedar del siguiente modo:

<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">
Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:
background="localizacin de la imagen" Esta etiqueta va dentro de la etiqueta <body>.
Ejemplo:
<body background="/documentos/html/gifs/dragonball.gif">
Las listas pueden ser: Lista desordenada, <ul> (Unordered List).
Lista ordenada, <ol> (Ordered List).
Ejemplos de diferentes tipos de listas:
Lista con nmeros romanos:
<ol>
<li type=I>Manzana
<li type=I>Zanahoria
<li type=I>Lechuga
<li type=I>Tomate
</ol>
I Manzana
II Zanahoria
III Lechuga
IV Tomate
Lista numerada:
<ol>
<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate
</ol>
1 Manzana
2 Zanahoria
3 Lechuga
4 Tomate
INFORMATICA
TERCER SEMESTRE

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Una de las formas de crear listas con

Dreamweaver es activar la barra Texto,
para ello pulsaremos, tal como vemos
en la imagen inferior, en el botn
Comn
Y en el panel que se despliega seleccionremos

la opcin Texto.
Pulsaremos el botn ul. Con este botn

activamos la opcin Listas simples o no
ordenadas
Si seleccionamos la lista simple, la lnea

donde tengamos activo el cursor de texto
ser el comienzo de una lista. Cuando
pulsemos la tecla enter, Dreamweaver
convertir el texto introducido en esa lnea
en una entrada de la lista y prepara la
siguiente lnea como otro elemento de la
lista.
Para terminar de introducir elementos en la lista slo tenemos que pulsar la tecla enter dos veces
seguidas y ya podremos continuar escribiendo normalmente
2.4. ESTABLECER VINCULOS E HIPERVINCULOS.
Normalmente se les llama enlaces.- Consisten en lneas de texto o imgenes que se encuentran
dentro de ciertos documentos, generalmente en pginas web, y que permiten acceder a otros
documentos. Estos enlaces establecen conexiones con otras pginas en Internet para que el
INFORMATICA
TERCER SEMESTRE
Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes
35

MODULO II
TEMAS 1
_________________________________________________________________________________________________
navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrir
automticamente la pgina de informacin a la que hace referencia.
Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho
enlace. Dicha directiva debe incluir el parmetro href="url" para especificar el destino del enlace.
Es decir, que antes del objeto elegido debemos abrir con <a href="url">, y despus cerrar con
</a>. Por ejemplo, si queremos que el texto "pulse aqu para visitar la NASA" nos conduzca a la
"home page" de la NASA, debemos escribir en nuestro texto HTML:
<a href="http://www.nasa.gov/">Pulse aqu para visitar a la NASA</a>
Que se vera de esta forma: Pulse aqu para visitar a la NASA
Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrir la
imagen.gif.
Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer es
cambiar el texto por una imagen:
<a href="http://www.altavista.com"><img src="Logo.jpg"></a>
Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera:
<a href="mailto:pfravioli@fibertel.com.ar">Mandame un Email</a>
Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrir (por defecto) el
Microsoft Outlook Express con la direccin del destinatario ya escrita.
2.5. MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB.
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un
pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir
preguntas, hacer suscripciones a un boletn o revista que editemos, etc.
Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un
programa que recibir los datos y har el tratamiento correspondiente (una base de datos por
ejemplo).
Aqu vamos a ver cmo crear el formulario bsico, (insertar campos y botones en el formulario y
validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones
de programacin, ya sea en SQL, en JavaScript o en otro lenguaje de programacin.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin
Objetos de formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de
formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los
distintos elementos que pueden formar parte de un formulario, as como algunas de sus
propiedades.
INFORMATICA
TERCER SEMESTRE
36

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Campo de texto y rea de texto: Permiten aadir un cuadro de texto. El Campo de texto solo
permite escribir una lnea al usuario, mientras que el rea de texto permite escribir varias. Se
puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades. Tambin
es posible definirlo como Contrasea. A continuacin tienes un ejemplo de cada uno de estos tres
tipos.
A travs del inspector de propiedades es posible asignar tambin el ancho del cuadro de texto, el
nmero mximo de lneas o caracteres, y el valor inicial del cuadro.
Botn: Es el botn tradicional. El botn puede tener asignadas tres opciones: Enviar
formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para
poder asignarle un comportamiento diferente de los dos
anteriores).
Tambin es posible cambiar el texto del botn, a travs del campo Etiqueta del inspector de
propiedades.
Casilla de verificacin: Es un cuadrito que se puede activar o desactivar. Puede asignrsele el
estado inicial como Activado o como Desactivado.
Botn de opcin: Es un pequeo botn redondo que puede activarse o desactivarse. Si hay
varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno,
automticamente se desactivan los dems.
Cul es ms inteligente?
El nio
El joven
Lista/Men: Una lista o men es un
elemento de formulario que lleva
asociada una lista de opciones. Los
elementos se aaden a travs de botn
Valores de lista del inspector de
propiedades. Cuando se trata de un
men, solo es posible elegir uno de los
elementos, pero si se trata de una lista, a travs de Selecciones puede permitirse que se
seleccionen varios simultneamente.
Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el
usuario pueda saber qu datos ha de introducir en cada uno de ellos.
Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario. Una vez creado un
formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas
rojas discontinuas, similar al de la imagen de siguiente.
INFORMATICA
TERCER SEMESTRE
37

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes
puedes insertarlos a travs del men Insertar, opcin Objetos de formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando
tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su
comprensin y mejora su apariencia.
Validar formularios
La validacin de formularios sirve para hacer que Javascript valide el formulario antes de que se
enve el formulario, para que en el caso de que haya campos del formulario que sean obligatorios,
tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede
abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3.
En el este panel hay que desplegar el botn
pulsando sobre l, y en Mostrar eventos
para elegir una versin de las actuales de
entre la lista de navegadores. Por ejemplo,
puedes elegir el navegador IE 6.0. Despus
de esto, hay que volver a desplegar el
botn, y pulsar sobre la opcin Validar
formulario.
Entonces se mostrar una

ventana como la siguiente,
donde aparecen todos los
elementos del formulario.
Puede seleccionarse uno por

uno cada elemento del
INFORMATICA
TERCER SEMESTRE
38

MODULO II
TEMAS 1
_________________________________________________________________________________________________
formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo
a rellenar obligatoriamente, y si su contenido ha de ser numrico, una direccin de correo
electrnico, etc.
2.6. MANIPULAR TABLAS EN UNA PAGINA WEB.
Una tabla est formada por filas y columnas y a la interseccin de estas le llamamos celdas, en
las que se puede insertar texto y grficos. Las tablas son una buena herramienta para organizar
los datos en una pgina web, adems nos permiten estructurar las pginas de nuestro sitio
separando la cabecera, el men, el contenido...
La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web son
como pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son las
tablas. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de
hacerlas ms atractivas y fciles de leer.
Se debe utilizar una tabla para presentar la informacin en formato de cuadrcula, por ejemplo
horarios, informacin acerca de productos, tarifas, calificaciones de alumnos, etc.
Creacin de una tabla
Para crear una tabla se debe usar la instruccin Table, seguida de parmetros que indican la
anchura, el color o imagen de fondo, etc.
Ejemplo:
<table>
</table>
Estas dos instrucciones indican al explorador de Internet que en este lugar de la pgina se va a
crear una tabla.
Uso de encabezados de tabla
Despus de que se haya indicado al explorador de Internet que se va a crear una tabla, es
necesario definir cuntas columnas de tabla se desean utilizar. Para ello se deben utilizar las
instrucciones <TH>, las cuales indican los encabezados de tabla.
Ejemplo:
<Table>
<TH>Columna 1</th><TH>Columna 2<TH>Columna 3</TH>
</table>
Este segmento de cdigo le indica al explorador que usaremos una tabla de tres columnas. Cada
identificador TH que utilice indica una columna de dato que desee representar en la tabla.
Para crear una tabla debemos hacer clic sobre el botn Insertar tabla de la paleta de Objetos.
INFORMATICA
TERCER SEMESTRE
39

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Se abrir un cuadro de dilogo que nos preguntar cuntas filas y cuantas columnas tendr
nuestra tabla, qu ancho tendr y si tendr borde.
2.7. MANIPULAR IMGENES Y ANIMACIONES EN UNA PAGINA WEB.

Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos
formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no
son compatibles con algunos navegadores.
Los formatos ms utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor calidad
que las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a
ver un poco ms sobre estos formatos:
Formato GIF:
Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de
un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten
contener transparencias y animacin.
Formato JPG:
Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el
tamao de la imagen es mayor y tarda ms en descargarse.
Puedes incluir imgenes en otros formatos a travs de Dreamweaver, que podrn ser
visualizadas en algunos navegadores. Este es el caso de las imgenes BMP y PNG.
Si introduces una imagen BMP en Dreamweaver, te aparecer un cuadrado gris en su lugar. La
imagen solo se mostrar correctamente en el navegador.
Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de
tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc.
Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora
de modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las
imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
Para insertar una imagen, debe utilizar la siguiente sintaxis:
<img src="imagen.jpg">
En sta instruccin se da por defecto que la imagen que se inserta tiene la extensin JPG. Para
insertar otro tipo de imagen slo deber especificar la extensin correspondiente. Las imgenes
pueden ser adquiridas de la galera de imgenes de Microsoft, o de cualquier otra imagen
digitalizada. Incluso se pueden crear iconos animados desde algn programa de animacin, y
usarlos en una pgina Web.
Seleccin del formato
Uno de los grandes dilemas a la hora de incluir grficos en sus pginas Web es elegir el formato
adecuado para cada tipo de imagen, vamos a intentar guiarle en la seleccin de cada formato.
INFORMATICA
TERCER SEMESTRE
40

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Imgenes fotogrficas
Imgenes obtenidas a travs de fotografas de personas o lugares. Para este tipo de imgenes el
formato ms recomendado es el JPEG porque consigue una gran compresin con una mnima
perdida de calidad.
JPEG
GIF
PNG
6.565 bytes
24 bits
25.522 bytes
256 cols
52.361 bytes
24 bits
Imgenes renderizadas
Este tipo de imgenes son las obtenidas por un programa de generacin de imgenes sintticas
mediante algn proceso de trazado de rayos o similar. Se caracterizan por degradados suaves y
lneas muy bien definidas.
Para este tipo de imgenes es recomendable usar el formato PNG. Tenga presente que el formato
PNG es el ms reciente y puede no estar soportado en todos los navegadores.
JPEG
GIF
INFORMATICA
TERCER SEMESTRE
PNG
41

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Imgenes sencillas
Para las imgenes sencillas con pocos colores y con formas muy delimitadas, el formato ms
recomendado es el GIF, ya que se puede adaptar al nmero de colores de una imagen. Con el
paso del tiempo puede que el formato PNG desbanque al GIF ya que el primero es ms avanzado,
pero como su uso todava no est muy extendido recomendamos el formato GIF.
JPEG
GIF
PNG
4.974 bytes
2.394 bytes
1.613 bytes
Realice pruebas
Las recomendaciones dadas anteriormente no son indiscutibles, son recomendaciones basadas en
la experiencia. Puede que para segn que casos, no sean del todo acertadas, as que le
recomendamos que pruebe a grabar las imgenes en distintos formatos y seleccione el que le
parezca ms adecuado.
Formato
Imgenes
JPEG
24Bits
Baja compresin Media compresin
6028 bytes
2761 bytes
Alta compresin
1815 bytes
GIF
256 Colores
12230 bytes
16 Colores
4304 bytes
255 Col. + Trans.

8703 bytes
INFORMATICA
TERCER SEMESTRE
42

MODULO II
TEMAS 1
_________________________________________________________________________________________________
PNG
24 Bits
29070 bytes
256 Colores
11640 bytes
255 Col. + Trans.

8795 bytes
Para utilizar imgenes como hipervnculos, se debe usar la misma instruccin que para los
hipervnculos de texto, a excepcin de que a continuacin de la instruccin se debe incluir la
instruccin de insercin de imgenes.
La siguiente lnea de cdigo muestra el ejemplo de insercin de imgenes como hipervnculos.
<a href="carrera.htm"><img border=0 src="carrera.jpg" ></A>
La primera instruccin indica el nombre de la pgina a la que se desee acceder cuando se haga
clic en el hipervnculo. La segunda instruccin inserta la imagen en la pgina Web.
La manera ms sencilla de aadir una imagen a nuestra pgina es desplegando al men
insertar, de la barra men, y buscar en l la opcin imagen.
En la ventana de dilogo que Dreamweaver

nos abrir, podremos buscar la imagen que
queramos insertar en nuestra pgina,
simplemente tenemos que seleccionarla y
pulsar el botn aceptar de la ventana
dilogo.
Observa que imagen se ha insertado en

la posicin que ocupaba el cursor en el
momento de aadir la imagen, tambin
podemos escribir texto en la misma lnea
que insertamos la imagen.
INFORMATICA
TERCER SEMESTRE
43

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Podemos combinar en la misma lnea texto e imgenes, sin importar el orden. Podemos escribir
una lnea de texto y en cualquier punto de ella insertar la imagen, o podemos insertar primero la
imagen y despus escribir un comentario a su lado.
Dreamweaver nos permite insertar imgenes de

varias maneras, ya hemos visto como hacerlo
desde la barra de men. Ahora vamos a aprender
a insertar imgenes desde el panel insertar, con la
barra comn activada. Podemos pulsar en la
barra comn en el icono imagen.
Dreamweaver nos muestra la misma ventana de dilogo de antes, podemos seleccionar el archivo
como ya sabemos o podemos escribir el nombre directamente en la casilla nombre, y despus
pulsamos aceptar.
2.8. DEFINIR SECCIONES DE MAPEO DE IMGENES EN UNA PAGINA WEB.

Puede hacer que parte de la imagen sea un enlace a otra pgina, es decir, puede hacer un mapa
sobre la imagen de manera que secciones de la imagen sean enlaces.
Debe saber que para que una imagen sea tratada como un mapa, adems de el cdigo, debe
incluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributo
usemap="#nombre del mapa".
La insercin de sonido y video funciona de una forma muy parecida. Los archivos de video que se
admiten en las web tienen las extensiones .avi las que son de Microsoft Vdeo para Windows y
.mov o .qt los de Apple.
Los archivos de sonido son de muchas ms clases porque se han utilizado desde hace mucho ms
tiempo. Los ms habituales son los siguientes:
.wav de Microsoft.
.snd y .mac de sonido Macintosh.
.au de audio de Sun.
.mid o . midi que slo se utilizan para msica.
SONIDO
INFORMATICA
TERCER SEMESTRE
44

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Para insertar un archivo de audio en un documento

tienes que dirigirte al men Insertar, Meda,
opcin Plug-in. A la derecha tienes un ejemplo de
un archivo de sonido, para el que se muestran los
controles de audio.
En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son
insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen
como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se
mostrarn los controles de audio, mediante Al y An. Si lo que se desea es que se escuche el
sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben
valer cero.
Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente
una vez. Estos valores no pueden cambiarse a travs del inspector de propiedades, pero s a
travs del cdigo.
Por ejemplo, el archivo anterior apareca en el cdigo como:
<embed src="varios/audio.MID"></embed>. Pero para que no se reprodujera
automticamente se ha aadido autostart="false", y para que se reprodujera continuamente
se ha aadido loop="true".
La lnea de cdigo del archivo de audio a quedado del siguiente modo:
<embed src="varios/audio.MID" autostart="false" loop="true"></embed>
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los
controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea.
Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio,
puedes escribir este cdigo directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuantas veces
quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
VIDEO
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en
cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho
tiempo para descargarse.
Los formatos de vdeo que suelen
en Internet son el AVI, el MPEG y el
utilizarse
MOV.
Para insertar un archivo de vdeo en

documento tienes que dirigirte al
Insertar, Meda, opcin Plug-in.
un
men
A la derecha tienes un ejemplo de un

video, para el que se muestran los
de video.
archivo de
controles
INFORMATICA
TERCER SEMESTRE
45

MODULO II
TEMAS 1
_________________________________________________________________________________________________
El inspector de propiedades para los

archivos de audio insertados de esta
forma es el mismo que el de los
archivos de audio, ya que ambos se
insertan como Plug-in.
Los videos tambin se reproducen
automticamente al cargarse la pgina, y
se reproducen solamente una vez. Estos valores pueden cambiarse a travs del cdigo, del
mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y
loop="true".
Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado
un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de
propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que ha de
reproducirse.
2.10. IMPLEMENTAR SERVICIOS DE CORREO EN UNA PAGINA WEB.
Correo electrnico, o en ingls e-mail (electronic mail), es un servicio de red que permite a los
usuarios enviar y recibir mensajes rpidamente (tambin denominados mensajes electrnicos
o cartas electrnicas) mediante sistemas de comunicacin electrnicos. Principalmente se usa
este nombre para denominar al sistema que provee este servicio en Internet, mediante el
protocolo SMTP, aunque por extensin tambin puede verse aplicado a sistemas anlogos que
usen otras tecnologas. Por medio de mensajes de correo electrnico se puede enviar, no
solamente texto, sino todo tipo de documentos digitales. Su eficiencia, conveniencia y bajo costo
estn logrando que el correo electrnico desplace al correo ordinario para muchos usos
habituales.
Para poder usar enviar y recibir correo electrnico, generalmente hay que estar registrado en
alguna empresa que ofrezca este servicio (gratuita o de pago). El registro permite tener una
direccin de correo personal nica y duradera, a la que se puede acceder mediante un nombre de
usuario y una Contrasea.
Hay varios tipos de proveedores de correo, que se diferencian sobre todo por la calidad del
servicio que ofrecen. Bsicamente, se pueden dividir en dos tipos: los correos gratuitos y los de
pago.
Una direccin de correo electrnico es un conjunto de palabras que identifican a una persona
que puede enviar y recibir correo. Cada direccin es nica y pertenece siempre a la misma
persona.
Un ejemplo es persona@servicio.com, que se lee persona arroba servicio punto com. El signo
@ (llamado arroba) siempre est en cada direccin de correo, y la divide en dos partes: el
nombre de usuario (a la izquierda de la arroba; en este caso, persona), y el dominio en el que
est (lo de la derecha de la arroba; en este caso, servicio.com). La arroba tambin se puede
leer "en", ya que persona@servicio.com identifica al usuario persona que est en el servidor
servicio.com (indica una relacin de pertenencia).
Una direccin de correo se reconoce fcilmente porque siempre tiene la @, donde la @ significa
"pertenece a..."; en cambio, una direccin de pgina web no. Por ejemplo, mientras que
INFORMATICA
TERCER SEMESTRE
46

MODULO II
TEMAS 1
_________________________________________________________________________________________________
http://www.servicio.com/ puede ser una pgina web en donde hay informacin (como en un
libro), persona@servicio.com es la direccin de un correo: un buzn a donde se puede escribir.
Pulsa sobre el enlace y se abre una ventana para "escribir mensaje" con lo siguientes campos:
subject: El asunto del mensaje.
cc: Enviar una copia del mensaje a la direccin indicada.
body: El texto del mensaje.
3. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET
Que es publicar una pagina web y como hacerlo? Despus de hacernos nuestra pgina en nuestra
computadora (incluyendo textos, imgenes, videos y otros archivos) sta solamente la vemos
nosotros ya que esta almacenada en nuestra maquina. Para que todo el mundo pueda verla la
tenemos que publicar (subir) a un servidor. (Que no es ms que una computadora central que
siempre esta conectada). El servidor, hosting (lugar donde subiremos nuestra pgina)
normalmente todos los proveedores de acceso a Internet ofrecen hosting. (Al que pagamos por
conectarnos a internet). El Hosting es un espacio (Ofrecido en Megabites) para almacenar nuestra
web en su servidor. Existen infinidad de proveedores de hosting gratuitos, que con solo
rellenando un formulario desde su web podemos conseguir de manera rpida y gratuitamente
espacio para nuestra web.
Cuando solicitamos los servicios de una conexin a internet (el servidor) al que pagamos la
factura por navegar, ofrecen una serie de recursos gratuitos por utilizar sus redes y servicios
como pueden ser: Cuentas de correo, discos duros virtuales donde alojar tus archivos y
un sinfn de promociones, pero tambin un ESPACIO WEB, o cuenta FTP.
3.1.
IDENTIFICAR LOS SERVIDORES

PUBLICACION DE INFORMACION.
DE
INTERNET
DISPONIBLES
PARA
Publicacin de la pgina web.

Tendremos que elegir un servidor y claro esta registrarnos, por lo general nos notificarn va e-mail nuestra alta
en su espacio web. Para subir la pgina web. Existen varias formas: desde la propia web de proveedor, o
mediante programas de envo FTP.
Desde la propia web del servidor. Despus de obtener nuestra cuenta y confirmarnos todos los datos,
nuestro login, password, nombre de usuario, etc. con estos datos entra en la pgina web de tu proveedor e
identifcate. Por lo general tienen formularios y otras herramientas para poder subir tus archivos indicndote los
pasos a seguir. Recuerda que adems de subir tu pgina tambin tienes que subir las imgenes, videos,
archivos, etc. que utilizaste en tu pgina. Te recomiendo que leas los apartados de ayuda, y faqs (preguntas
frecuentes) que suelen tener estos sitios. Desde un programa para enviar por FTP. Que es una manera de
transmitir archivos por la red, tanto para mandar como para descargar, existen en internet montones de
programas (gratuitos y de pago) para poder enviar archivos a un servidor. Estos son algunos de los mas
conocidos, Cuteftp , ws_ftp , NicoFTP .
INFORMATICA
TERCER SEMESTRE
47

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Otro estupendo FTP

WS_FTP 95 El inmejorable cliente de
transmisin de archivos. Descrgalo junto con
el parche para ponerlo en espaol. Podrs
mandar tus paginas web a tu servidor, borrar,
cambiar, descargar desde sitios FTP, etc. Y es
gratuito totalmente.
Lo dems djalo como esta, esta seria la ventana antes de conectar con tu servidor FTP.
Esta seria la configuracin normal del programa para subir tus paginas
Nombre o perfil, (es el nombre que quieras ponerte)
Nombre direccin, es la direccin de tu servidor FTP. (si por ejemplo fuese iespana seria :
ftp.iespana.es)
Tipo host (no cambiar)
ID Usuario (tu identificacin como usuario del servicio, este dato te lo facilitar tu servidor)
Contrasea (la contrasea que te permitir entrar en tu servidor, tambin te la facilitaran
ellos).
Por lo general una vez dado de alta en algn servicio te suelen mandar un e-mail con todos tus
datos.
Despus de lo anterior presiona Aceptar y aparecer la siguiente ventana:
Como puedes ver en un lado tu

computadora y en otro el servidor,
simplemente
tenemos
que
ir
seleccionando y mandarlo o bien
presionando dos veces sobre el archivo,
pgina, imagen o una vez seleccionado
y presionando en la flecha entre las dos
ventanas, podemos a su vez hacer
selecciones mltiples si mantenemos
pulsado Alt Gr en nuestro teclado,
mientras vamos eligiendo lo que
queremos subir y luego la flecha as
subimos de una vez varios contenidos,
el
documento,
las
imgenes,
RECORDAR que por lo general tu
primera pgina tienes que denominarla
index.html y las dems son las que irn enlazadas a esta.
INFORMATICA
TERCER SEMESTRE
48

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Recuerda tener tu web bien estructurada
Dentro de Windows tenemos el asistente para la publicacin en web. Lo primero es conocer

estos 3 datos necesarios: el login (o nombre de usuario), el password (tu contrasea) y la
direccin TFP (nuestro servidor) Todos estos datos siempre nos los proporcionan ellos mismos,
donde hemos abierto la cuenta. Por ejemplo el ftp de www.iespana.es el que nos dan
es: ftp.iespana.es, el de tripod: ftp.tripod.es, etc. Comencemos, abrimos el programa y veremos
que habr una seccin donde podamos poner todos nuestros datos (el login, password y direccin
FTP) Rellenamos nuestros datos y le damos a conectar.
Una vez conectados se nos abrir
otra ventana la cual estar
dividida en 2 partes. El lado de la
izquierda nuestra computadora y
el de la derecha el del servidor. El
de la derecha es nuestro "disco
duro virtual" es decir nuestro
espacio web en el servidor. En el
lado izquierdo, ah tenemos que
buscar la carpeta donde tenemos
guardada nuestra pgina web con
todas sus pginas, imgenes y
archivos utilizados. Seleccionamos
todos los componentes y le
damos a " enviar " normalmente
es
una
flechita
hacia
la
derecha. Vers una barra de
progreso segn vaya el envo de
datos al servidor. Cuando finalice
el envo de nuestra pagina web,
en el lado derecho veras los archivos enviados. (En nuestra computadora, continuar estando
nuestra pgina web). Recuerda siempre desconectar tras finalizar tu sesin. Importante:
Recuerda siempre llamar a tu pgina principal index.
INFORMATICA
TERCER SEMESTRE
49

MODULO II
TEMAS 1
_________________________________________________________________________________________________
3.2.
ALMACENAR PGINAS WEB EN UN SERVIDOR DEDICADO O GRATUITO.
Qu es el servicio de hospedaje de pginas?

El hospedaje de pginas es ofrecer espacio dentro de un servidor para que publique su propia
pgina, con opciones especficas de almacenamiento en disco y caractersticas adaptables a sus
necesidades sin tener que comprar costosos servidores; slo paga lo que necesita.
Estas son imgenes de algunas de las herramientas y servicios incluidos en el servidor.
Pgina Principal. Publicacin de la pgina principal del sitio, una pgina con una
cuartilla de texto y una imagen. Puedes dejarla como tu pgina principal, corregirla
con las herramientas que se proporcionan o sustituirla con las pginas que t
disees y subas al servidor.
Estadsticas. Desde esta seccin puedes conocer un reporte detallado de los
visitantes que recibes cada mes y cada da. Reportes especficos como: Hits, vistas
por da y por hora, pgina de procedencia de tus visitantes, pginas ms
consultadas, pginas de entrada y de salida, trminos buscados en los principales
buscadores, IPs, dominios, etc.
Panel de Control Personal. Desde este panel, los usuarios autorizados del sitio
pueden administrar las configuraciones de la cuenta personal: Pueden cambiar la
clave de acceso, redireccionar su correo a otra cuenta, respaldar y restaurar sus
archivos personales y conocer el espacio que ocupan en su servidor
Webmail. Tienen acceso al correo a travs del explorador web, con un sistema
como el de hotmail. Desde tu correo web puedes: Enviar y recibir correo html,
exportar o importar tu libreta de direcciones, filtrar correo no deseado, corrector
de ortografa (ingles) crear carpetas, recibir correo desde otras cuentas de correo
POP3 (como prodigy), y administrar tu propia agenda de actividades.
Administrador de Archivos. Desde este sistema puedes administrar fcilmente
todos los archivos del sitio. Puedes realizar funciones bsicas como: editar, copiar,
eliminar, mover archivos: o funciones avanzadas de Telnet y FTP como: perl,
chmode, cd, find, etc. Incluye su propio editor HTML como el de FrontPage.
Panel de Control. Desde esta seccin del sitio, puedes administrar todas las
funciones del servidor para controlar tu pgina. Puedes configurar a tus usuarios
autorizados (empleados de tu empresa, amigos, clientes, etc) y sus correos
electrnicos, respaldar y restaurar toda su informacin, conocer el uso de tu
servidor (espacio disponible, web, correo, ftp), crear listas de correo, etc.
El Servicio de Hospedaje Dedicado brinda un servidor exclusivo para el sitio Web o las
aplicaciones de la empresa. Las ventajas de contar con un servidor dedicado es que permite
instalar las aplicaciones de software que se requiera, hospedar el nmero de sitios Web de
acuerdo a la capacidad de almacenamiento y configurar el servidor de acuerdo a sus necesidades.
Adems de contar con un acceso dedicado a Internet, suministro ininterrumpido de energa
elctrica, monitoreo del servidor y mantenimiento preventivo de toda la infraestructura 24 x 7 (24
horas al da los y das de la semana), los planes de Hospedaje Dedicado incluyen servicios de gran
valor para las empresas como el almacenamiento de alto desempeo, respaldo diario de la
informacin y cuentas de Correo Negocios con el nombre de su empresa:
INFORMATICA
TERCER SEMESTRE
50

MODULO II
TEMAS 1
_________________________________________________________________________________________________
El servicio de correo electrnico que le brinda:
Direcciones de correo con el nombre del negocio.

Puede enviar documentos adjuntos de hasta 25
MB.
Enviar y recibir mensajes de correo de forma

rpida y segura.
Hospedaje Gratis.
Hay compaas que ofrecen hospedaje gratis. A cambio de que en tu pgina aparezcan anuncios
de esa compaa y de algunas otras. El hospedaje gratuito es una buena idea, si tu pgina es
personal, por ejemplo, una pgina dedicada a tus pasatiempo, amigos, a tu mascota, a tus viajes,
etc.
Para los sitios de internet de empresas, negocios, compaas, asociaciones, etc, tener anuncios de
otras empresas en tu sitio da mala imagen. El visitante podra pensar "esta empresa no tiene para
comprar su propio hospedaje". Otra desventaja es que el hospedaje gratis no es seguro. Si esa
compaa de repente se sale del negocio, tu pgina se quedara sin hospedaje.
Ventajas:
Gasto cero: No pagamos ni la transferencia, ni el registro de dominio, es todo gratis.
Respaldo: Por ejemplo si estamos en blogger todo el sistema se encuentra respaldado por
Google, en este caso muy difcilmente tendremos problemas de backups, servers cados, etc.
Desventajas:
Poca identidad: Los dominios que utilizan estos sistemas que realmente son subdominios del
dominio principal muchas veces dan una sensacin aparente de poca seriedad.
Falta de Flexibilidad: No poder hacer modificaciones de nuestra plantilla al 100%, la
imposibilidad de instalar plugins y cosas de ese estilo en un principio pueden no molestar pero en
cuento pasan los meses empieza a pesar este aspecto.
Una dependencia peligrosa: En un principio olvidarnos de los gastos de alojamiento es
atractivo, pero a la vez es un poco peligroso, ya que puede desaparecer el sitio y los clientes
quedan en el aire.
Problemas para migrar: Si empezamos nuestro blog en blogger y luego queremos pasarnos a
otro sitio es bastante engorroso. Actualmente no todos los servicios nos permiten hacer una
redireccin por lo tanto tambin estaremos perdiendo todo el posicionamiento y antigedad que
logramos.
INFORMATICA
TERCER SEMESTRE
51

MODULO II
TEMAS 1
_________________________________________________________________________________________________
3.3.
SELECCIONAR
UN
SERVIDOR
DE
CARACTERISTICAS DE LA PGINA WEB.
INTERNET
CONSIDERANDO
LAS
Antes de decidir donde alojaremos nuestra pgina, es necesario conocer los tipos de servidores y de servicios que
proporcionan cada uno de ellos:
Tipos de servidores
En las siguientes listas, hay algunos tipos comunes de servidores y de su propsito.
Servidor de archivo: almacena varios tipos de archivos y los distribuye a otros clientes en la
red.
Servidor de impresiones: controla y maneja una o ms impresoras y acepta trabajos de

impresin de otros clientes de la red, poniendo en cola los trabajos de impresin (Aunque tambin
puede cambiar la prioridad de las diferentes impresiones), y realizando la mayora o todas las
otras funciones que un sitio de trabajo se realizara para lograr una tarea de impresin si la
impresora fue conectada directamente con el puerto de impresora del sitio de trabajo.
Servidor de correo: almacenan, envan, reciben, enrutan, y realizan otras operaciones
relacionadas con e-mail para otros clientes en la red.
Servidor de fax: almacenan, envan, reciben, enrutan, y realizan otras funciones necesarias para
la transmisin, la recepcin, y la distribucin apropiadas de los fax.
Servidor de la telefona: realiza funciones relacionadas con la telefona, tales como contestador
automtico, realizando las funciones de un sistema interactivo de la respuesta de la voz,
almacenando los mensajes de voz, encaminando las llamadas, tambin controla la red o el
Internet (Ej. entrada excesiva del IP de la voz (VoIP)), etc.
Proxy server: realiza un cierto tipo de funcin a nombre de otros clientes en la red para
aumentar el funcionamiento de ciertas operaciones (Ej., prefetching y depositar documentos u
otros datos que se soliciten muy frecuentemente), tambin sirve seguridad, esto es, tiene un
Firewall. Permite administrar el acceso a internet en una Red de computadoras permitiendo o
negando el acceso a diferentes Web sites.
Servidor del acceso remoto (RAS): controla las lneas de mdem de los monitores u otros
canales de comunicacin de la red para que las peticiones conecten con la red de una posicin
remota, respuestas la llamada telefnica entrante o reconocen la peticin de la red, y realizan los
chequeos necesarios de la seguridad y otros procedimientos necesarios para registrar a un
usuario sobre la red.
Servidor del uso: realiza la parte de la lgica de la informtica o del negocio de un uso del
cliente, aceptando las instrucciones para que las operaciones se realicen de un sitio de trabajo y
sirviendo los resultados de nuevo al sitio de trabajo, mientras que el sitio de trabajo realiza el
interfaz operador o la porcin del GUI del proceso (es decir, la lgica de la presentacin) que se
requiere para trabajar correctamente.
Servidor web: almacena documentos HTML, imgenes, archivos de texto, escrituras, y dems
material Web compuesto por datos (conocidos colectivamente como contenido), y distribuye este
contenido a clientes que la piden en la red.
INFORMATICA
TERCER SEMESTRE
52

MODULO II
TEMAS 1
_________________________________________________________________________________________________
Servidor de reserva: tiene el software de reserva de la red instalado y tiene cantidades grandes
de almacenamiento de la red en discos duros u otras formas del almacenamiento (cinta, etc.)
disponibles para que se utilice con el fin de asegurarse de que la prdida de un servidor principal
no afecte a la red. Esta tcnica tambin es denominada clustering.
3.4.
UTILIZAR LA PGINA DEL SERVIDOR DE INTERNET PARA ALOJAR UNA

PAGINA WEB.
Depende del tipo de sitio web vayas a tener. Por ejemplo, si solo quieres anunciar tu empresa,
poner fotos, videos, un catlogo y que te manden correos, necesitas un hospedaje bsico, que te
permita guardar tus archivos y recibir decenas o cientos de visitas diarias.
Para la mayora de las pequeas empresas que inician en Internet, el hospedaje bsico es
suficiente.
Si tu empresa es Transnacional con franquicias en varios pases, y quieres aceptar tarjetas de
crdito y realizar envos a todo el mundo, adems planeas recibir miles de visitas diarias, procesar
compras con total seguridad y guardar grandes archivos en la memoria, entonces necesitars un
hospedaje mayor y ms especializado.
Recuerda que los vendedores siempre tratan de venderte ms y ms cosas que no necesitas. Lo
mismo ocurre con el hospedaje. Las compaas de hospedaje van a tratar de venderte muchsima
memoria y ancho de banda y muchas caractersticas que no necesitars.
Es recomendable a la mayora de quienes inician en Internet el Hospedaje bsico. Si despus
necesitas mayor capacidad, solo aumentas tu cuenta.
Qu incluye un servicio de hospedaje en Internet?
La mayora de los servicios de hospedaje te incluyen los siguientes servicios:
Un Panel de Control para configurar el Hospedaje.

Memoria para almacenar tus archivos, como fotos, videos, msica, pginas web,
animaciones flash, etc.
Creacin de cuentas de correo de tu pgina web.
Estadsticas detalladas de la actividad y visitas a tu sitio en internet.
Programas listos para instalar como chats, galeras de fotos, contadores de visitas, etc.
Varios Gigas de trfico, para recibir desde una hasta miles de visitas diarias.
Programas FTP para cargar archivos de manera ms rpida
INFORMATICA
TERCER SEMESTRE
53

MODULO II
TEMAS 1
_________________________________________________________________________________________________
3.5.
VERIFICAR EL FUNCIONAMIENTO DE LA PGINA WEB DENTRO DEL SERVIDOR

SELECCIONADO.
Para verificar la presentacin

Para revisar cmo se vera su pgina en distintos tipos de navegador y tamaos de pantalla es
muy til el "Screen Size Tester".
Para revisar cmo se ver la pgina segn la versin de html soportada por los navegadores e
incluyendo Webtv: Web Site Viewer
Para verificar cmo vern nuestras pginas las personas con distintos tipos de deficiencias de
percepcin del color, una muy til herramienta de revisin en lnea es: Servicio Newman de
evaluacin del diseo.
Para verificar la sintaxis
El Servicio de verificacin del W3C, inspecciona los documentos para revisar su

conformidad con las recomendaciones de HTML Y XHTML.
El Servicio de Verificacin de CSS facilita revisar la correccin de los estilos en

cascada utilizados. Puede descargarse un programa o utilizarse a travs de la Web en:
http://jigsaw.w3.org/css-validator/
BIBLIOGRAFIA
- http://cevug.ugr.es/downloads/public/curso_DreamWeaver04.pdf 30 de julio de 2007
- http://eyd142009pc13.tripod.com/adm_titulares.htm
- http://www.colarte.com/clasificacion/Textos/Conceptualismo.htm 20 de Junio de 2007
- http://www.monografias.com/trabajos11/disegraf/disegraf.shtml 20 de Junio de 2007
- http://www.monografias.com/trabajos13/hisdisgr/hisdisgr.shtml#PRINCIP 20 de Junio de
2007
- http://www.newsartesvisuales.com/funda/color3.htm 25 de junio de 2007
- http://www.villegaseditores.com/loslibros/9589084060/10-3.html 20 de junio de 2007
- Maldonado Daniel (2001), Diseo & Comunicacin Visual, Ediciones, Buenos Aires.
www.adecorar.com/estilos/moderno/index.cfm?pagina=estilos_moderno_009_009 20 de
junio de 2007
- www.decoesfera.com/categoria/minimalismo 20 de junio de 2007
- www.terra.com/casa/articulo/html/cas123.htm 20 de junio de 2007
- Kettel, Jennifer A.- Manual de Referencias Dreamweaver 4.- McGraw-Hill.- Espaa.- 2001
- Pascual, Francisco.- Navegar en Internet, Macromedia, Dreamweaver 3.- AlfaOmega.Mxico.- 2000
INFORMATICA
TERCER SEMESTRE
54

MODULO II
TEMAS 1
_________________________________________________________________________________________________
INFORMATICA
TERCER SEMESTRE
55

SCRIB Apuntes Paginas WEB

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SCRIB Apuntes Paginas WEB

Transféré par

Droits d'auteur :

Formats disponibles

Elaboraci

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB

ELABORACION DE PGINAS WEB.

2. MANEJAR LOS ELEMENTOS BASICOS DE

2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PGINA WEB.

3.1. DEFINIR OBJETIVOS Y CONDENIDOS DE LA PGINA WEB.

4. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

ELABORACION DE PAGINAS WEB

5. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO

ELEMENTOS DEL DISEO

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB

Los principios emplean elementos del diseo para crear composiciones.

La Proporcin describe el tamao,

ELABORACION DE PAGINAS WEB

La Gradacin es el tamao y direccin

ANALIZAR LAS TEORIAS DEL DISEO.

ELABORACION DE PAGINAS WEB

e. Da gran importancia al espacio y a los materiales ecolgicos

La decoracin minimalista, se nutre de las formas

Los creadores minimalistas reducen al mximo los

Juan Camilo Uribe

ELABORACION DE PAGINAS WEB

Antonio Caro (1950-

ELABORACION DE PAGINAS WEB

IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES.

ELABORACION DE PAGINAS WEB

Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un

ELABORACION DE PAGINAS WEB

a. El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composicin y los

Si dividimos la composicin en dos extremos, el equilibrio simtrico se produce cuando

El equilibrio que crea la simetra es un factor importante de la forma en que evaluamos el

ELABORACION DE PAGINAS WEB

Empezaremos diciendo que el color en s no existe, no es una caracterstica del objeto, es ms

ELABORACION DE PAGINAS WEB

Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos.

e. RGB (RED, GREEN, BUE) y CMY (CYAN, MAGENTA, YELLOW)

ELABORACION DE PAGINAS WEB

MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB

PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR

ESTRUCTURA SUGERIDA DE UNA WEB

ELABORACION DE PAGINAS WEB

PORTAFOLIO DE APREDIZAJE PARA CADA

2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB.

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB

Estas son algunas de las etiquetas ms utilizadas:

ELABORACION DE PAGINAS WEB

text="#nmero" Para el color del texto.

ELABORACION DE PAGINAS WEB

vlink="#nmero" El color con que aparecern los enlaces ya visitados.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo:

ELABORACION DE PAGINAS WEB

Una de las formas de crear listas con

Y en el panel que se despliega seleccionremos

Pulsaremos el botn ul. Con este botn

Si seleccionamos la lista simple, la lnea

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB

ELABORACION DE PAGINAS WEB