Apuntes Paginas WEB

Elaboracion
de Páginas
Docentes:
LSC. ELVIA MICAELA URBINA
VISCENCIO.
LSC. MA. EUGENIA ACUÑA R.
AGOSTO 2010/ENERO 2011
MANUAL
ALUMNO:_______________________________ GRUPO:_____________
ELABORACION DE PAGINAS WEB MODULO II
_________________________________________________________________________________________________
ELABORACION DE PÁGINAS WEB.

1. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO
1.1. ANALIZAR LAS TEORIAS DEL DISEÑO
1.2. IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEÑOS EXISTENTES.
1.3. DISEÑAR 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 UN LENGUAJE USADO

EN LA CREACION DE PÁGINAS WEB.
2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PÁGINA 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 IMÁGENES Y ANIMACIONES EN UNA PAGINA WEB.
2.8. DEFINIR SECCIONES DE MAPEO DE IMÁGENES 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. DISEÑAR UNA PAGINA WEB CON UN SOFTWARE DE APLICACIÓN.

3.1. DEFINIR OBJETIVOS Y CONDENIDOS DE LA PÁGINA WEB.
3.2. ESTABLECER ETIQUETAS EN LA PÁGINA WEB.
3.3. ESTABLECER LINKS DENTRO DE LA PÁGINA WEB, ENTRE PÁGINAS WEB Y ENTRE
SERVIDORES.
3.4. MANIPULAR IMÁGENES DENTRO DE LA PÁGINA WEB.
3.5. ESTRUCTURAR TABLAS EN UNA PAGINA WEB.
3.7. ALMACENAR PÁGINAS 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
PÁGINA WEB.
4.3. UTILIZAR LA PÁGINA DEL SERVIDOR DE INTERNET PARA ALOJAR UNA PAGINA WEB.
4.4. VERIFICAR EL FUNCIONAMIENTO DE LA PÁGINA WEB DENTRO DEL SERVIDOR
SELECCIONADO.
INFORMATICA TERCER SEMESTRE

_________________________________________________________________________________________________
5. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO

¿Qué es el diseño? Proceso de creación visual con un propósito, el cual cumple con exigencias practicas. Un
buen diseño es la mejor expresión visual de la esencia de `algo` cuya creación no debe ser solo estética sino
también funcional.
ELEMENTOS DEL DISEÑO
Los siguientes elementos son las bases que construyen el Diseño.
Línea
Una línea es definida como una marca con

longitud y dirección, creada mediante un punto
que se mueve a lo largo de una superficie. Una
línea puede variar en longitud, ancho, dirección,
curvatura y color. La línea puede ser de dos
dimensiones (una línea de lápiz sobre papel), o
tres dimensiones implícitas.
Forma
Una figura plana o una forma es creada cuando

líneas actuales o implícitas 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:
geométricas (cuadrado, triángulo, círculo) y
orgánicas (irregulares en contorno).
Tamaño

_________________________________________________________________________________________________
Este se refiere a las variaciones de las

proporciones de los objetos, líneas o formas.
Hay una variación de tamaño en objetos ya
sean reales o imaginarios.
Espacio
Espacio es el área vacía o abierta entre,

alrededor, arriba, debajo o entre objetos.
Figuras y formas son realizadas en el espacio
alrededor y entre él. El espacio también 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 carácter 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 implícita). 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
adición de blanco o negro a dicho color. Claroscuro usa
valores en los dibujo mediante contrastes de claros y
oscuros en una composición.
Principios de Diseño
Los principios emplean elementos del diseño para crear composiciones.
Balance

_________________________________________________________________________________________________
El Balance es el sentido de equidad visual en

una forma, figura, valor, color, etc. El Balance se
puede hacer simétrica o uniformemente en
objetos, valores, colores, texturas, formas, etc.,
Contraste
El contraste es la yuxtaposición (fusión) de

los elementos opuestos.
Énfasis
El Énfasis es usado para crear ciertas

partes de sus trabajos artísticos a través
de llamado atención de manera especial.
El centro de interés o punto foco es el
lugar del dibujo que le invita a enfocar su
mirada.
Proporción
La Proporción describe el tamaño, ubicación o

el monto de una cosa comparada con otra.
Patrones
Los Patrones son creados mediante la repetición

de un elemento (línea, forma o color) una y otra
vez.

_________________________________________________________________________________________________
Gradación
La Gradación es el tamaño y dirección

producidos por una perspectiva lineal. La
Gradación del color es desde gamas calidas a
frías y por su parte los tonos oscuros a claros
producen una perspectiva aérea. La Gradación
puede agregar interés y movimiento a una forma
Composición
La combinación de distintos elementos

para formar un todo.
1.1. ANALIZAR LAS TEORIAS DEL DISEÑO.
MINIMALISMO.
El minimalismo es una corriente estética derivada de la reacción al pop art. Frente al colorismo, a la importancia
de los medios de comunicación de masas, frente al fenómeno 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 conversación conceptual entre el artista, el espacio circundante y el espectador. Así
como la importancia del entorno como algo esencial para la comprensión y la vida de la obra.
Los preceptos básicos del minimalismo son:

a. Utilizar colores puros,
b. Asignarle importancia al todo sobre las partes,
c. Utilizar formas simples y geométricas realizadas con precisión mecánica,
d. Trabajar con materiales industriales de la manera más neutral posible y diseñar sobre superficies
inmaculadas.
e. Da gran importancia al espacio y a los materiales ecológicos
f. El resultado que define este estilo en un concepto es la palabra “limpieza”.
Hay muchas variantes del minimalismo, con un toque más o menos oriental, o más o menos escandinavo.
Actualmente tiene gran difusión en Europa, entre los más jóvenes, sumado a toda una corriente de muebles de
diseño danés contemporáneo.
La decoración minimalista, se nutre de las formas puras,

simples, y juega con sus volúmenes, su iluminación y sus
superficies.

_________________________________________________________________________________________________
Los creadores minimalistas reducen al máximo los

elementos propios del arte, los volúmenes y formas en
escultura. De forma análoga proceden en la arquitectura o
en la pintura. Intentan condensar en escasos elementos sus
principios artísticos y reflexiones.
CONCEPTUALISMO.
El movimiento artístico surgido a finales de los años sesenta, cuyos exponentes rechazan el arte como artículo
de lujo, permanente, portátil 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 periódicos como parte de su creación,
para documentar o para expresar ideas, como por ejemplo:
Juan Camilo Uribe
Alicia Barney
LydiaAzout
Antonio Caro (1950- )
Bernardo Salcedo

_________________________________________________________________________________________________
Becky Mayer
Alicia Barney
Rosemberg Sandoval
Inginio Caro
Adolfo Bernal
1.2. IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEÑOS EXISTENTES.
Si bien las definiciones no pueden ser tajantes ni excluyentes, resulta necesario asumir que creatividad e
innovación, arte y diseño se parecerán en la medida que las busquemos en ámbitos cuyos modos de hacer
mantengan alguna identidad y dejarán 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 más al diseño que al arte
callejero, del mismo modo que la creatividad empresarial puede conducir a la innovación de la misma forma

_________________________________________________________________________________________________
que la innovación tecnológica puede inducir cierto estilo de creatividad, ejemplo claro de esto fue en los 80’s y
90’s la incorporación de los software digitales al proceso de diseño.
Queda agregar que hay descripciones definitivas en los ámbitos del diseño para evitar que comencemos a
confrontar y asumir que nuestro radio de acción es permeable y sensible a sinnúmero de circunstancias. Que
algunas de ellas no agotan la complejidad de la producción 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 creación de valor, la identidad corporativa, los medios y
los productos de consumo.
El sector de servicios está creciendo, tanto en número de empleados como en su importancia en la economía,
mientras el sector manufacturero decae. Sin embargo, así como los sectores manufactureros, los servicios
deben ser diseñados y su diseño debe ser gestionado.
El diseño de servicios puede ser tangible como intangible. Puede involucrar artefactos y otras cosas incluyendo
comunicación, ambientes y conductas. Cualquier forma que adopte debe ser consistente, fácil de usar y ser
aplicado estratégicamente.
Sólo recientemente los gerentes involucrados en el sector de servicios se han dado

cuenta que un esfuerzo conciente por aplicar técnicas de diseño a los servicios puede
resultar en un incremento en la satisfacción de clientes, mayor control sobre sus ofertas y
mayores ganancias.
1.3. DISEÑAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION, SENTIDO Y

EQUILIBRIO.
Toda obra de comunicación visual nace de la necesidad de transmitir un mensaje específico. Un diseñador
gráfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un
método específico (diseño) construye mensajes (comunicación) con medios visuales (grafismos). No es el
creador del mensaje, sino su intérprete.
El principal componente de toda composición gráfica es pues el mensaje a interpretar, la información que se
desea hacer llegar al destinatario a través del grafismo. Esta información se debe representar por medio de
diferentes elementos gráficos, que pueden ser muchos y variados, aunque los más comunes son:
• Elementos gráficos simples: puntos y líneas de todo tipo (libres, rectas, quebradas curvas, etc.)
• Elementos geométricos, con contorno o sin él: polígonos, círculos, elipses, óvalos, etc.
• Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales.
• Gráficos varios: logotipos, iconos, etc.
• Ilustraciones
• Fotografías
• Cualquier otro elemento visual apto para comunicar un mensaje.
a. ZONAS AUREAS.
La creó Vitruvio, la autoridad romana en arquitectura. Ideó un sistema de cálculo matemático de la división
pictórica, para seccionar los espacios en partes iguales y así conseguir una mejor composición. 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 representación de una medición proporcional real. La medición
nos permite adecuarnos a la realidad, pero más importante es lo que colocamos junto al objeto visual o el
marco en el que está colocado. La medición universal es la propia medida del hombre, el tamaño medio de las
proporciones humanas.
La pregunta que hacen todos los diseñadores es: ¿cómo podemos distribuir el espacio de diseño de una forma
acertada? Pues bien, no hay una norma que nos indique la división perfecta, pero existe una fórmula muy
conocida en el mundo del diseño, que permite dividir el espacio en partes iguales, para lograr un efecto estético
agradable y que puede llegar a ser muy eficaz. Esta teoría se denomina "La regla Áurea", también conocida
como "sección áurea".
b. DIRECCION Y SENTIDO.
En la comunicación visual el diseñador tendrá que tener en cuenta tanto la vertiente psicológica de la
percepción humana como las significaciones culturales que pueden tener ciertos elementos.
El diseñador gráfico es una especie de arquitecto del espacio gráfico y debe distribuir los elementos en función
de una estructura interna que tenga una significación, guía o intención coincidente con el mensaje que se
quiera transmitir. Esta estructura será la responsable de la elección cromática y su intencionalidad expresiva,
de la elección de las imágenes o de la disposición de los bloques de texto.
Algunos factores psicológicos que debemos conocer son:
• a. El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composición y los ejes en los
cuales descansa. El desequilibrio crea provocación e inestabilidad. Tendremos que analizar que es lo
que queremos transmitir al receptor y con respecto a esto crear una composición determinada.
• b. La referencia horizontal: Necesitamos ver que los objetos o partes que componen una composición
están 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 hábitos de lectura occidentales han motivado propiciado que la
atención se centre más en la parte izquierda y en concreto en la inferior izquierda.
• d. Relajamiento-tensión: psicológicamente cuando tenemos una composición equilibrada, simétrica o
predecible; sin embargo generaremos tensión en el receptor si no es capaz de encontrar una lógica
visual en la composición que le presentamos.
c. EQUILIBRIO.
La utilización más eficaz de los mecanismos de la percepción visual consiste en identificar claves visuales en
un sentido u en otro, en equilibrio o en desequilibrio, fuertes o débiles.
Podemos conseguir en nuestra composición ese equilibrio de formas y líneas, es decir, los pesos de los
elementos deben estar compensados. La manera de medir el peso de las formas y líneas del diseño es,
analizando la importancia visual de estos dentro de nuestra composición.
Existen dos tipos de equilibrio:

_________________________________________________________________________________________________
• El equilibrio simétrico.
• El equilibrio asimétrico.
Si dividimos la composición en dos extremos, el equilibrio simétrico se produce cuando encontramos igualdad
de peso y tono en ambos lados de nuestra composición, y el equilibrio asimétrico se produce cuando no
existe las mismas dimensiones (ya sea de tamaño, color...) en ambos lados, pero aún así existe equilibrio entre
los elementos.
El equilibrio que crea la simetría es un factor importante de la forma en que evaluamos el atractivo visual de un
objeto. Sin embargo, el atractivo de la simetría tiene límites; un toque de asimetría puede hacer que resulte aún
más atractivo, añadiendo un toque de individualidad y singularidad. La simetría, en cierta manera, da sensación
de orden y alivia la tensión; la asimetría hace lo contrario, crea agitación y tensión, pero puede conseguir que
una imagen no sea monótona.
Podemos hacer otra división de equilibrio:
• El equilibrio formal.
• Y el equilibrio informal.
El equilibrio formal se basa en la bisimetría. Se busca un centro óptico dentro del diseño, que no tiene por qué
coincidir con el centro geométrico de la composición. Una composición que siga este esquema compositivo
reflejará estabilidad, calma y estatismo, pero no supone una composición 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 característica del objeto, es más bien una
apreciación subjetiva nuestra. Por tanto, podemos definirlo como, una sensación que se produce en respuesta
a la estimulación del ojo y de sus mecanismos nerviosos, por la energía luminosa de ciertas longitudes de
onda.
El color es pues un hecho de la visión 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
nanómetros; más allá de estos límites siguen existiendo radiaciones, pero ya no son percibidos por nuestra
vista.
En las artes gráficas tenemos dos grandes categorías con respecto al color, imagen en color e imagen en
blanco y negro, en éstas últimas podemos diferenciar: - imágenes a pluma. - imágenes tramadas: mediante
diferentes tipos de gris. Asimismo, las imágenes en color se pueden dividir en dos categorías: - colores planos:
manchas uniformes de color. - degradados, también tramadas. El color es un elemento básico 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 sólo 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 rúbrica de la empresa.
d. CIRCULO CROMATICO.
El ojo humano puede distinguir entre 10.000 colores. Se pueden además emplear tres dimensiones físicas del
color para relacionar experiencias de percepción con propiedades materiales: saturación, brillantez y tono.
El círculo cromático nos sirve para observar la organización básica y la interrelación de los colores.
También lo podemos emplear como forma para hacer la selección de color que nos parezca
adecuada a nuestro diseño. Podemos encontrar diversos círculos de color, pero el que aquí vemos está
compuesto de 12 colores básicos.
Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos.

En este círculo cromático podemos encontrar:
• los colores primarios: rojo, azul y amarillo;
• los secundarios: verde, violeta y naranja;
• y los terciarios: rojo violáceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso,
azul verdoso y azul violáceo.

_________________________________________________________________________________________________
e. RGB (RED, GREEN, BUE) y CMY (CYAN, MAGENTA, YELLOW)
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 número infinito de colores. Dependiendo de qué ámbito, podemos
encontrar tres juegos de colores primarios:
√ Los artistas y diseñadores parten de un juego formado por el rojo, el amarillo y el azul. Mezclando
pigmentos de éstos colores pueden obtenerse todos los demás tonos.
√ 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 formación de imágenes 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 separación de colores se realiza utilizando filtros
para restar luz de los primarios aditivos, con lo que se obtienen los colores de impresión por proceso
sustractivo.
f. CONTRASTES.

_________________________________________________________________________________________________
El tono: Es el matiz del color, es decir el color en sí mismo, supone su cualidad cromática, es -simplemente- un
sinónimo 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 radiación. Según su tonalidad se puede decir que un color es rojo, amarillo, verde...
Aquí podemos hacer una división entre:
• tonos cálidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el fuego...
• y tonos fríos (azul y verde). Los colores fríos son aquellos que asociamos con el agua, la luz de la
luna ...
Los términos "cálido" y "frío" se utilizan para calificar a aquellos tonos que connotan dichas cualidades; éstos
términos se designan por lo que denominamos "temperatura de color". Las diferencias entre los colores cálidos
y los fríos pueden ser muy sutiles. Por ejemplo, el papel blanco puede parecer más cálido o más frío 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 energía. 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 condición variable,
que puede alterar fundamentalmente la apariencia de un color. La luminosidad puede variar añadiendo negro o
blanco a un tono.
En general, con los tonos puros que tienen un valor más 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 saturación: Está relacionada con la pureza cromática o falta de dilución con el blanco. Constituye la pureza
del color respecto al gris, y depende de la cantidad de blanco presente. Cuanto más saturado está un color,
más puro es y menos mezcla de gris posee.
6. MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE

PÁGINAS WEB.
Para crear una página web requerimos de un lenguaje especial de programación, el cual es un programa con
un conjunto de instrucciones detalladas que le dirán a la computadora que hacer exactamente, paso a paso.
Un programa puede ser tan corto como de una sola línea de código, o tan largo como de varios millones de
líneas de código. Estos son algunos de ellos:
HTML.
El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un
lenguaje de marcas diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato
estándar de las páginas web. Gracias a Internet y a los navegadores del tipo Explorer o Netscape, el HTML se
ha convertido en uno de los formatos más populares que existen para la construcción de documentos.
DHTML.
El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear
sitios web interactivos utilizando una combinación de lenguaje HTML estático, 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 tecnología propietaria de Microsoft. Se trata básicamente 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 fácilmente páginas de consulta de bases de datos, funciones sencillas como
obtener la fecha y la hora actual del sistema servidor, cálculos matemáticos 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 programación 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 código JavaScript integrado dentro de las páginas web. Para
interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM (Document
Object Model, podría ser Modelo en Objetos para la representación de Documentos), abreviado DOM, es
esencialmente un modelo computacional a través del cual los programas y scripts pueden acceder y modificar
dinámicamente el contenido, estructura y estilo de los documentos HTML y XML.
2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PÁGINA WEB.
Es importante tomar una decisión para elegir qué objetivos consideramos primordiales antes del desarrollo de
la página web. La elección, condiciona de manera clave la concepción y el diseño del proyecto, el cual debe ser
coherente con los objetivos de la empresa. Por ejemplo:
Conseguir 250 contactos comerciales en 1 año.

Ofrecer a los clientes una herramienta de selección del producto más 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 distribución.
Tu web puede ser algo más. Ya que habla por ti, por tus productos, por tus servicios, por lo que además puede:
Ofrecer al visitante ocasional una motivación para contactar,
Una razón para recordarte o quizás una utilidad que le ahorra tiempo,
Encontrar una información 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 técnico.
Facilita una comunicación á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 definición de objetivos te ahorrará sorpresas como diseñar una web pensando en los clientes,
para después descubrir que sólo te visitan "extraños" ... O un diseño 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 simultáneamente aunque te
recomiendo que lo abordes por fases. Empieza por 2 o 3 de ellos, y a medida que vayas viendo su evolución 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 demostración de producto, etc ...
b) Fidelización de clientes y apoyo a la venta. Branding, amplia información, soporte técnico, 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,
introducción de ofertas de trabajo, actualizaciones de producto, transferencia de archivos, buzón de
sugerencias, quejas, trámites y gestiones on line, etc.
Cada uno lo puede definir como quiera, más o menos detallado, pensando en las implicaciones para la
organización, 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.
PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR
Antes de crear un conjunto de páginas web uno ha de tener una idea clara de cómo va a ser la estructura de
dichas páginas, es conveniente hacer un esquema, para la mayoría de los casos una hoja de papel y un
lapicero bastará, pero si el emplazamiento va a albergar un gran número de páginas es recomendable usar
algún tipo de programa que permita manejar estructuras de tipo grafo.
LA ESTRUCTURA DEPENDE DEL CONTENIDO
No es lo mismo crear una estructura de navegación para un sitio que desea publicar información al estilo de un
libro cuya estructura estará formada por capítulos, este tipo de información se adapta bastante bien a una
estructura lineal como jerárquica. Mientras que un sitio donde se expone un tutorial o un tour es más 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 función de su importancia, desde el nivel superior a otros inferiores.
Se debe listar la información que se desea incluir en la Web. Esta información debe ser significativa y útil para
el público. Teniendo en cuenta lo que a ellos les interesa, no lo que a nosotros nos gustaría que nos interese.
En el caso de que existan otras formas de acceso a información 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 página principal y de cada página 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 rápidamente lo que les
interesa, por lo que habrá de establecer una estructura adecuada de enlaces entre las páginas. El movimiento
de un lado a otro de la web debe ser lo más intuitivo posible para facilitar el trabajo del visitante. Un sitio web en
el que sea difícil encontrar lo que buscamos es abandonado rápidamente.

_________________________________________________________________________________________________
Cuando un internauta ingresa a una página web, quiere encontrar entre otras cosas tres características:
velocidad, simplicidad y claridad. Por su parte, el sitio web visitado pretende que la persona o personas que
ingresen en sus páginas se queden el mayor tiempo posible; en lenguaje comercial buscan atraer clientes.
Pero, ¿cómo 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 página, en el cual debemos tener claro los niveles
que tendrá.
ESTRUCTURA SUGERIDA DE UNA WEB

MATERIA : ELABORAR PAGINAS WEB
NIVEL 1 NIVEL 2 NIVEL 3

PRINCIPAL BIENVENIDA
UBICACIÓN CURRICULAR
FUNDAMENTACION
A QUIEN VA DIRIGIDO
INFORMACION INTRODUCCION
OBJETIVO
CONTENIDO
METODOLOGIA
EVALUACION
CALENDARIO
MATERIALES UNIDAD I CONTENIDO
RESUMEN
RECURSOS
UNIDAD II CONTENIDO
RESUMEN
RECURSOS
UNIDAD III CONTENIDO
RESUMEN
RECURSOS
PORTAFOLIO DE APREDIZAJE PARA CADA

ACTIVIDADES UNIDAD RESUMEN
RECURSOS
FOROS 2 FOROS EL INICIAL
FORO FINAL
REFERENCIAS BIBLIOGRAFIA
LECTURAS COMPLEMENTARIAS POR TEMA
LIGAS DE INTERES
GLOSARIO
CREADOR DATOS PERSONALES
NIVEL ACADEMICO
EXPERIENCIA LABORAL
FOTOGRAFIA
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 página.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e
imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página 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 imágenes
</body>
</html>
Con todo lo que conocemos ya sobre HTML podemos construir una página web que ya tiene bastante sentido.
Vemos un ejemplo a continuación.
<html>
<head>
<title>Elaboración de Paginas Web</title>
</head>
<body>
Bienvenido,
Estás en la página Elaboración de Páginas Web de Tercer Semestre.
Aquí aprenderás de manera personal a realizar tu pagina web.
</body>
</html>
Cómo 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 cómo vemos a continuación.
<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 minúsculas. Encontrarás muchas páginas WEB en las que las etiquetas
están en mayúsculas, hasta el HTML 4.0 era indiferente la utilización de minúsculas o mayúsculas y muchos
autores utilizaban las mayúsculas 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 párrafo
Estas son algunas de las etiquetas más 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 < body text="">establece el color de
letra en la pagina
< h1>establece un encabezado en la pagina< /h1> < hr>agrega una línea separadora
Etiquetas de texto
pone el texto en negrita
pone el texto en cursiva
cambia el color de texto
cambia el tamaño del texto
 cambia el tipo de letra cambia el color el tamaño y el tipo de
letra
Etiquetas de enlace
< aref0"">texto< /a>añade un enlace utilizado la palabra texto
< ahref="">< img src="">< /a>añade un enlace utilizando una imagen
Etiquetas de imagen
< img src="">permite añadir 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 añadir dos etiquetas a un texto, por ejemplo, supongamos y esto es sólo un
ejemplo, que un título sea también un enlace, veamos cómo lo haríamos (utilizamos pseudo código puesto que
todavía no hemos visto el código html).
<título><enlace> loquesea.com</enlace></título>
En cambio el siguiente código sería incorrecto
<título><enlace> loquesea.com</titulo></enlace>
Las etiquetas pueden a veces llevar atributos que nos permiten especificar más 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 quedaría apariencia="guapo". Así nuestro <hombre> nos quedaría <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 quedaría <html lang="es">. Los atributos se
especifican indicando el nombre del atributo (lang) y su valor (es). En castellano estaríamos diciendo: esto es
un documento html en español. Los atributos siempre se añaden en la etiqueta de inicio y los valores de un
atributo siempre deben estar entre comillas.

_________________________________________________________________________________________________
Etiquetas de párrafo
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 línea.
Para alinear un párrafo se utiliza el comando <align> y </align>, utilizado dentro de la etiqueta . Se puede
alinear de tres formas diferentes:
 Párrafo... Alinea a la izquierda.

 Párrafo... Realiza un centrado.
 Párrafo... Alinea a la derecha.
 indica el inicio de un párrafo nuevo
 cambia el texto a otra línea
< pre>añade un texto preformateado < /pre>
< li>sirve para listar objetos
< ul>añade numeración a los objetos listados
< ul>añade viñetas a los objetos listados< /ul>
< blockquote>resalta una línea ubicada en un párrafo
< /blockquote> indica el inicio de una definición
Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando .
Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro
que es 
Etiquetas para darle formato al texto:
Para el tamaño y tipo de letra se usa la etiqueta y , que posee tres atributos: tamaño (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 función que 
 y para colocar un texto en cursiva.
texto con énfasis texto con énfasis
<cite>citación</cite> citación
<dfn>definición</dfn> definición
<kbd>teclado</kbd> teclado
<samp>ejemplo</samp> ejemplo
size: regula el tamaño 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="#número" Para el color del texto.

• link="#número" Para el color de los enlaces.
• vlink="#número" El color con que aparecerán los enlaces ya visitados.

_________________________________________________________________________________________________
• alink="#número" 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="localización 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 números 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

ELABORACION DE PAGINAS WEB 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 botón “Común”
Y en el panel que se despliega seleccionáremos la

opción Texto.
Pulsaremos el botón “ul”. Con este botón activamos la

opción “Listas simples o no ordenadas”
Si seleccionamos la lista simple, la línea 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 línea en una entrada de la lista y prepara la
siguiente línea como otro elemento de la lista.
Para terminar de introducir elementos en la lista sólo 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 líneas de texto o imágenes que se encuentran dentro de
ciertos documentos, generalmente en páginas web, y que permiten acceder a otros documentos. Estos enlaces
establecen conexiones con otras páginas en Internet para que el navegador pueda visualizarlas. Cuando se
hace click sobre un enlace, el navegador abrirá automáticamente la página de información 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 parámetro href="url" para especificar el destino del enlace. Es decir, que antes del
objeto elegido debemos abrir con <a href="url">, y después cerrar con </a>. Por ejemplo, si queremos que el
INFORMATICA TERCER SEMESTRE 34

Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acuña Reyes
_________________________________________________________________________________________________
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 vería 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.
También 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 dirección 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 boletín o revista que editemos, etc.
Una vez el usuario rellena los datos y pulsa el botón 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 cómo crear el formulario básico, (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 programación, ya sea
en SQL, en JavaScript o en otro lenguaje de programación.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Objetos de
formulario. A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden
ser insertados en la página. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar
parte de un formulario, así como algunas de sus propiedades.
Campo de texto y Área de texto: Permiten añadir un cuadro de texto. El Campo de texto solo permite escribir
una línea al usuario, mientras que el Área de texto permite escribir varias. Se puede pasar de Campo de texto a
Área de texto a través del inspector de propiedades. También es posible definirlo como Contraseña. A
continuación tienes un ejemplo de cada uno de estos tres tipos.
A través del inspector de propiedades es posible asignar también el ancho del cuadro de texto, el número
máximo de líneas o caracteres, y el valor inicial del cuadro.

_________________________________________________________________________________________________
Botón: Es el botón tradicional. El botón 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).
También es posible cambiar el texto del botón, a través del campo Etiqueta del inspector de
propiedades.
Casilla de verificación: Es un cuadrito que se puede activar o desactivar. Puede asignársele el estado inicial
como Activado o como Desactivado.
Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo
formulario, solo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.
¿Cuál es más inteligente?

 El niño
 El joven
Lista/Menú: Una lista o menú es un elemento

de formulario que lleva asociada una lista de
opciones. Los elementos se añaden a través
de botón 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 través de
Selecciones puede permitirse que se seleccionen varios simultáneamente.
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 través del menú Insertar, opción Formulario. Una vez creado un formulario, este
aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al
de la imagen de siguiente.
Dentro de dicho
formulario se podrán
insertar los elementos de formulario, que como ya sabes puedes insertarlos a través del menú Insertar, opción
Objetos de formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se
consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su
apariencia.
Validar formularios
La validación de formularios sirve para hacer que Javascript valide el

formulario antes de que se envíe 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 través del
menú Ventana, opción Comportamientos, o pulsando Mayús+F3.
En el este panel hay que desplegar el botón

pulsando sobre él, y en Mostrar eventos para
elegir una versión de las actuales de entre la lista
de navegadores. Por ejemplo, puedes elegir el
navegador IE 6.0. Después de esto, hay que
volver a desplegar el botón, y pulsar sobre la
opción 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
formulario, pudiendo especificar
los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente, y si su contenido ha de ser numérico, una
dirección de correo electrónico, etc.
2.6. MANIPULAR TABLAS EN UNA PAGINA WEB.
Una tabla está formada por filas y columnas y a la intersección de estas le llamamos celdas, en las que se
puede insertar texto y gráficos. Las tablas son una buena herramienta para organizar los datos en una página
web, además nos permiten estructurar las páginas de nuestro sitio separando la cabecera, el menú, el
contenido...
La organización del texto en una página es posible gracias a las tablas. Muchas páginas web son como páginas
de revistas, y la forma más simple de emular las funciones de maquetación son las tablas. Se pueden utilizar y
personalizar las tablas de varias formas diferentes con el fin de hacerlas más atractivas y fáciles de leer.
Se debe utilizar una tabla para presentar la información en formato de cuadrícula, por ejemplo horarios,
información acerca de productos, tarifas, calificaciones de alumnos, etc.

_________________________________________________________________________________________________
Creación de una tabla
Para crear una tabla se debe usar la instrucción Table, seguida de parámetros 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 página se va a crear una tabla.
Uso de encabezados de tabla
Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir
cuántas 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 código 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 botón Insertar tabla de la paleta de Objetos.
Se abrirá un cuadro de diálogo que nos preguntará

cuántas filas y cuantas columnas tendrá nuestra tabla,
qué ancho tendrá y si tendrá borde.
2.7. MANIPULAR IMÁGENES Y ANIMACIONES EN UNA PAGINA WEB.
Las imágenes 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 más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las
imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más
sobre estos formatos:
Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo
color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias
y animación.
Formato JPG:
Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la
imagen es mayor y tarda más en descargarse.
Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser visualizadas en algunos
navegadores. Este es el caso de las imágenes 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 imágenes mediante la utilización de algún programa de tratamiento de
imágenes, 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 imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes 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 instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para insertar otro
tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes pueden ser adquiridas de la
galería de imágenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos
animados desde algún programa de animación, y usarlos en una página Web.
Selección del formato
Uno de los grandes dilemas a la hora de incluir gráficos en sus páginas Web es elegir el formato adecuado para
cada tipo de imagen, vamos a intentar guiarle en la selección de cada formato.
Imágenes fotográficas
Imágenes obtenidas a través de fotografías de personas o lugares. Para este tipo de imágenes el formato más
recomendado es el JPEG porque consigue una gran compresión con una mínima perdida de calidad.
JPEG GIF PNG
6.565 bytes 25.522 bytes 52.361 bytes

24 bits 256 cols 24 bits
Imágenes renderizadas

_________________________________________________________________________________________________
Este tipo de imágenes son las obtenidas por un programa de generación de imágenes sintéticas mediante
algún proceso de trazado de rayos o similar. Se caracterizan por degradados suaves y líneas muy bien
definidas.
Para este tipo de imágenes es recomendable usar el formato PNG. Tenga presente que el formato PNG es el
más reciente y puede no estar soportado en todos los navegadores.
JPEG GIF PNG
Imágenes sencillas
Para las imágenes sencillas con pocos colores y con formas muy delimitadas, el formato más recomendado es
el GIF, ya que se puede adaptar al número de colores de una imagen. Con el paso del tiempo puede que el
formato PNG desbanque al GIF ya que el primero es más avanzado, pero como su uso todavía 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 según que casos, no sean del todo acertadas, así que le recomendamos que
pruebe a grabar las imágenes en distintos formatos y seleccione el que le parezca más adecuado.

_________________________________________________________________________________________________
Formato Imágenes
JPEG
24Bits
Baja compresión Media compresión Alta compresión

6028 bytes 2761 bytes 1815 bytes
GIF
256 Colores 16 Colores 255 Col. + Trans.

PNG
24 Bits 256 Colores 255 Col. + Trans.

Para utilizar imágenes como hipervínculos, se debe usar la misma instrucción que para los hipervínculos de
texto, a excepción de que a continuación de la instrucción se debe incluir la instrucción de inserción de
imágenes.
La siguiente línea de código muestra el ejemplo de inserción de imágenes como hipervínculos.
<a href="carrera.htm"><img border=0 src="carrera.jpg" ></A>
La primera instrucción indica el nombre de la página a la que se desee acceder cuando se haga clic en el
hipervínculo. La segunda instrucción inserta la imagen en la página Web.
La manera más sencilla de añadir una imagen a nuestra página es desplegando al menú insertar, de la barra
menú, y buscar en él la opción imagen.

_________________________________________________________________________________________________
En la ventana de diálogo que Dreamweaver nos abrirá, podremos buscar la imagen que queramos insertar en
nuestra página, simplemente tenemos que seleccionarla y pulsar el botón aceptar de la ventana diálogo.
Observa que imagen se ha insertado en la posición que ocupaba el cursor en el momento de añadir la imagen,
también podemos escribir texto en la misma línea que insertamos la imagen.
Podemos combinar en la misma línea texto e

imágenes, sin importar el orden. Podemos
escribir una línea de texto y en cualquier punto
de ella insertar la imagen, o podemos insertar
primero la imagen y después escribir un
comentario a su lado.
Dreamweaver nos permite insertar imágenes de varias

maneras, ya hemos visto como hacerlo desde la barra de
menú. Ahora vamos a aprender a insertar imágenes desde
el panel insertar, con la barra común activada. Podemos
pulsar en la barra común en el icono imagen.
Dreamweaver nos muestra la misma ventana de diálogo de antes, podemos seleccionar el archivo como ya
sabemos o podemos escribir el nombre directamente en la casilla nombre, y después pulsamos aceptar.
2.8. DEFINIR SECCIONES DE MAPEO DE IMÁGENES EN UNA PAGINA WEB.
Puede hacer que parte de la imagen sea un enlace a otra página, 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, además de el código, debe incluir en la
etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".
La inserción 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 Vídeo para Windows y .mov o .qt los de Apple.

_________________________________________________________________________________________________
Los archivos de sonido son de muchas más clases porque se han utilizado desde hace mucho más tiempo. Los
más habituales son los siguientes:
• .wav de Microsoft.
• .snd y .mac de sonido Macintosh.
• .au de audio de Sun.
• .mid o . midi que sólo se utilizan para música.
SONIDO
Para insertar un archivo de audio en un documento tienes

que dirigirte al menú Insertar, Medía, opción 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 mostrarán 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 mostrarán los
controles de audio, mediante Al y An. Si lo que se desea es que se escuche el sonido en la página, pero que
no se muestren los controles de audio, los campos Al y An deben valer cero.
Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos
valores no pueden cambiarse a través del inspector de propiedades, pero sí a través del código.
Por ejemplo, el archivo anterior aparecía en el código como:
<embed src="varios/audio.MID"></embed>. Pero para que no se reprodujera automáticamente se ha
añadido autostart="false", y para que se reprodujera continuamente se ha añadido loop="true".
La línea de código 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 música de fondo en una página web, sin que aparezcan los controles de audio, puedes
escribir este código directamente en la vista Código.
<bgsound src="cancion1.wav" loop="-1">
Insértalo después de la etiqueta </title> Con el parámetro 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 algún vídeo en una página web, pero hay que tener en cuenta que los
vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en
Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vídeo en un documento
tienes que dirigirte al menú Insertar, Medía,
opción Plug-in.
A la derecha tienes un ejemplo de un archivo de

video, para el que se muestran los controles de
video.

_________________________________________________________________________________________________
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 también se reproducen
automáticamente al cargarse la página, y se
reproducen solamente una vez. Estos valores
pueden cambiarse a través del código, del mismo modo que en el caso de los archivos de audio, añadiendo
autostart="false" y loop="true".
Todos los objetos insertados a través de la opción 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 vídeo) que ha de reproducirse.
2.10. IMPLEMENTAR SERVICIOS DE CORREO EN UNA PAGINA WEB.
Correo electrónico, o en inglés e-mail (electronic mail), es un servicio de red que permite a los usuarios enviar
y recibir mensajes rápidamente (también denominados mensajes electrónicos o cartas electrónicas)
mediante sistemas de comunicación electrónicos. Principalmente se usa este nombre para denominar al
sistema que provee este servicio en Internet, mediante el protocolo SMTP, aunque por extensión también
puede verse aplicado a sistemas análogos que usen otras tecnologías. Por medio de mensajes de correo
electrónico se puede enviar, no solamente texto, sino todo tipo de documentos digitales. Su eficiencia,
conveniencia y bajo costo están logrando que el correo electrónico desplace al correo ordinario para muchos
usos habituales.
Para poder usar enviar y recibir correo electrónico, generalmente hay que estar registrado en alguna empresa
que ofrezca este servicio (gratuita o de pago). El registro permite tener una dirección de correo personal única y
duradera, a la que se puede acceder mediante un nombre de usuario y una Contraseña.
Hay varios tipos de proveedores de correo, que se diferencian sobre todo por la calidad del servicio que
ofrecen. Básicamente, se pueden dividir en dos tipos: los correos gratuitos y los de pago.
Una dirección de correo electrónico es un conjunto de palabras que identifican a una persona que puede
enviar y recibir correo. Cada dirección 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 dirección 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 también se puede leer "en", ya que persona@servicio.com identifica al usuario
persona que está en el servidor servicio.com (indica una relación de pertenencia).
Una dirección de correo se reconoce fácilmente porque siempre tiene la @, donde la @ significa "pertenece
a..."; en cambio, una dirección de página web no. Por ejemplo, mientras que http://www.servicio.com/ puede ser
una página web en donde hay información (como en un libro), persona@servicio.com es la dirección de un
correo: un buzón 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 dirección indicada.
body: El texto del mensaje.
3. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

_________________________________________________________________________________________________
Que es publicar una pagina web y como hacerlo? Después de hacernos nuestra página en nuestra
computadora (incluyendo textos, imágenes, 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 más que una computadora central que siempre esta conectada). El servidor, hosting (lugar
donde subiremos nuestra página) 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 rápida y gratuitamente espacio para nuestra web.
Cuando solicitamos los servicios de una conexión 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 sinfín de promociones, pero también un
ESPACIO WEB, o cuenta FTP.
3.1. IDENTIFICAR LOS SERVIDORES DE INTERNET DISPONIBLES PARA PUBLICACION DE

INFORMACION.
Publicación de la página web.
Tendremos que elegir un servidor y claro esta registrarnos, por lo general nos notificarán vía e-mail nuestra alta
en su espacio web. Para subir la página web. Existen varias formas: desde la propia web de proveedor, o
mediante programas de envío FTP.
Desde la propia web del servidor. Después de obtener nuestra cuenta y confirmarnos todos los datos,
nuestro login, password, nombre de usuario, etc. con estos datos entra en la página web de tu proveedor e
identifícate. Por lo general tienen formularios y otras herramientas para poder subir tus archivos indicándote los
pasos a seguir. Recuerda que además de subir tu página también tienes que subir las imágenes, videos,
archivos, etc. que utilizaste en tu página. 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 .
Otro estupendo FTP
WS_FTP 95 El inmejorable cliente de

transmisión de archivos. Descárgalo junto con el
parche para ponerlo en español. Podrás mandar tus
paginas web a tu servidor, borrar, cambiar, descargar
desde sitios FTP, etc. Y es gratuito totalmente.
Lo demás déjalo como esta, esta seria la ventana

antes de conectar con tu servidor FTP.

_________________________________________________________________________________________________
Esta seria la configuración normal del programa para subir tus paginas
• Nombre o perfil, (es el nombre que quieras ponerte)
• Nombre dirección, es la dirección de tu servidor FTP. (si por ejemplo fuese iespana seria :
• ftp.iespana.es)
• Tipo host (no cambiar)
• ID Usuario (tu identificación como usuario del servicio, este dato te lo facilitará tu servidor)
• Contraseña (la contraseña que te permitirá entrar en tu servidor, también te la facilitaran ellos).
Por lo general una vez dado de alta en algún servicio te suelen mandar un e-mail con todos tus datos.
Después 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,
página, imagen o una vez seleccionado y
presionando en la flecha entre las dos
ventanas, podemos a su vez hacer
selecciones múltiples 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 imágenes,
RECORDAR que por lo general tu primera
página tienes que denominarla index.html y
las demás son las que irán enlazadas a esta.
Recuerda tener tu web bien estructurada
Dentro de Windows tenemos el asistente para la publicación en web. Lo primero es conocer estos 3 datos
necesarios: el login (o nombre de usuario), el password (tu contraseña) y la dirección 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 sección donde podamos poner todos nuestros datos (el login,
password y dirección 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 página web con todas sus páginas, imágenes y archivos utilizados. Seleccionamos
todos los componentes y le damos a " enviar " normalmente es una flechita hacia la derecha. Verás una barra
de progreso según vaya el envío de datos al servidor. Cuando finalice el envío de nuestra pagina web, en el
lado derecho veras los archivos enviados. (En nuestra computadora, continuará estando nuestra página web).
Recuerda siempre desconectar tras finalizar tu sesión. Importante: Recuerda siempre llamar a tu página
principal index.
3.2. ALMACENAR PÁGINAS WEB EN UN SERVIDOR DEDICADO O GRATUITO.
¿Qué es el servicio de hospedaje de páginas?
El hospedaje de páginas es ofrecer espacio dentro de un servidor para que publique su propia página, con
opciones específicas de almacenamiento en disco y características adaptables a sus necesidades sin tener que
comprar costosos servidores; sólo paga lo que necesita.
Estas son imágenes de algunas de las herramientas y servicios incluidos en el servidor.
Página Principal. Publicación de la página principal del sitio, una página con una cuartilla de
texto y una imagen. Puedes dejarla como tu página principal, corregirla con las herramientas
que se proporcionan o sustituirla con las páginas que tú diseñes y subas al servidor.
Estadísticas. Desde esta sección puedes conocer un reporte detallado de los visitantes que
recibes cada mes y cada día. Reportes específicos como: Hits, vistas por día y por hora,
página de procedencia de tus visitantes, páginas más consultadas, páginas de entrada y de
salida, términos 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 través 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 ortografía (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 fácilmente todos los
archivos del sitio. Puedes realizar funciones básicas 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 sección del sitio, puedes administrar todas las funciones del
servidor para controlar tu página. Puedes configurar a tus usuarios autorizados (empleados de
tu empresa, amigos, clientes, etc) y sus correos electrónicos, respaldar y restaurar toda su
información, 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 número de sitios Web de acuerdo a la capacidad de almacenamiento y configurar
el servidor de acuerdo a sus necesidades.
Además de contar con un acceso dedicado a Internet, suministro ininterrumpido de energía eléctrica, monitoreo
del servidor y mantenimiento preventivo de toda la infraestructura 24 x 7 (24 horas al día los y días de la
semana), los planes de Hospedaje Dedicado incluyen servicios de gran valor para las empresas como el
almacenamiento de alto desempeño, respaldo diario de la información y cuentas de Correo Negocios con el
nombre de su empresa:
El servicio de correo electrónico 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 rápida y
segura.
Hospedaje Gratis.
Hay compañías que ofrecen hospedaje gratis. A cambio de que en tu página aparezcan anuncios de esa
compañía y de algunas otras. El hospedaje gratuito es una buena idea, si tu página es personal, por ejemplo,
una página dedicada a tus pasatiempo, amigos, a tu mascota, a tus viajes, etc.
Para los sitios de internet de empresas, negocios, compañías, asociaciones, etc, tener anuncios de otras
empresas en tu sitio da mala imagen. El visitante podría pensar "esta empresa no tiene para comprar su propio
hospedaje". Otra desventaja es que el hospedaje gratis no es seguro. Si esa compañía de repente se sale del
negocio, tu página se quedaría 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 difícilmente tendremos problemas de backups, servers caídos, etc.
Desventajas:
Poca identidad: Los dominios que utilizan estos sistemas que realmente son subdominios del dominio principal
muchas veces dan una sensación 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 redirección por lo tanto
también estaremos perdiendo todo el posicionamiento y antigüedad que logramos.
3.3. SELECCIONAR UN SERVIDOR DE INTERNET CONSIDERANDO LAS CARACTERISTICAS DE

LA PÁGINA WEB.
Antes de decidir donde alojaremos nuestra página, 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 propósito.
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 más impresoras y acepta trabajos de impresión de otros
clientes de la red, poniendo en cola los trabajos de impresión (Aunque también puede cambiar la prioridad de
las diferentes impresiones), y realizando la mayoría o todas las otras funciones que un sitio de trabajo se
realizaría para lograr una tarea de impresión si la impresora fue conectada directamente con el puerto de
impresora del sitio de trabajo.
Servidor de correo: almacenan, envían, reciben, enrutan, y realizan otras operaciones relacionadas con e-mail
para otros clientes en la red.
Servidor de fax: almacenan, envían, reciben, enrutan, y realizan otras funciones necesarias para la
transmisión, la recepción, y la distribución apropiadas de los fax.
Servidor de la telefonía: realiza funciones relacionadas con la telefonía, tales como contestador automático,
realizando las funciones de un sistema interactivo de la respuesta de la voz, almacenando los mensajes de voz,
encaminando las llamadas, también controla la red o el Internet (Ej. entrada excesiva del IP de la voz (VoIP)),
etc.
Proxy server: realiza un cierto tipo de función 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), también 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 líneas de módem de los monitores u otros canales de
comunicación de la red para que las peticiones conecten con la red de una posición remota, respuestas la
llamada telefónica entrante o reconocen la petición 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 lógica de la informática 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 porción del GUI del proceso
(es decir, la lógica de la presentación) que se requiere para trabajar correctamente.
Servidor web: almacena documentos HTML, imágenes, archivos de texto, escrituras, y demás material Web
compuesto por datos (conocidos colectivamente como contenido), y distribuye este contenido a clientes que la
piden en la red.
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 pérdida de un servidor principal no afecte a la red. Esta técnica
también es denominada clustering.
3.4. UTILIZAR LA PÁGINA 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 catálogo y que te manden correos, necesitas un hospedaje básico, que te permita guardar tus
archivos y recibir decenas o cientos de visitas diarias.
Para la mayoría de las pequeñas empresas que inician en Internet, el hospedaje básico es suficiente.
Si tu empresa es Transnacional con franquicias en varios países, y quieres aceptar tarjetas de crédito y realizar
envíos a todo el mundo, además planeas recibir miles de visitas diarias, procesar compras con total seguridad y
guardar grandes archivos en la memoria, entonces necesitarás un hospedaje mayor y más especializado.
Recuerda que los vendedores siempre tratan de venderte más y más cosas que no necesitas. Lo mismo ocurre
con el hospedaje. Las compañías de hospedaje van a tratar de venderte muchísima memoria y ancho de banda
y muchas características que no necesitarás.
Es recomendable a la mayoría de quienes inician en Internet el Hospedaje básico. Si después necesitas mayor
capacidad, solo aumentas tu cuenta.
¿Qué incluye un servicio de hospedaje en Internet?
La mayoría 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, música, páginas web, animaciones flash,
etc.
• Creación de cuentas de correo de tu página web.
• Estadísticas detalladas de la actividad y visitas a tu sitio en internet.
• Programas listos para instalar como chats, galerías de fotos, contadores de visitas, etc.
• Varios Gigas de tráfico, para recibir desde una hasta miles de visitas diarias.
• Programas FTP para cargar archivos de manera más rápida

_________________________________________________________________________________________________
3.5. VERIFICAR EL FUNCIONAMIENTO DE LA PÁGINA WEB DENTRO DEL SERVIDOR

SELECCIONADO.
Para verificar la presentación
Para revisar cómo se vera su página en distintos tipos de navegador y tamaños de pantalla es muy útil el
"Screen Size Tester".
Para revisar cómo se verá la página según la versión de html soportada por los navegadores e incluyendo
Webtv: Web Site Viewer
Para verificar cómo verán nuestras páginas las personas con distintos tipos de deficiencias de percepción del
color, una muy útil herramienta de revisión en línea es: Servicio Newman de evaluación del diseño.
Para verificar la sintaxis
El Servicio de verificación del W3C, inspecciona los documentos para revisar su conformidad
con las recomendaciones de HTML Y XHTML.
El Servicio de Verificación de CSS facilita revisar la corrección de los estilos en cascada

utilizados. Puede descargarse un programa o utilizarse a través 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), Diseño & Comunicación 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.- España.- 2001
- Pascual, Francisco.- Navegar en Internet, Macromedia, Dreamweaver 3.- AlfaOmega.-
México.- 2000

Apuntes Paginas WEB

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

Apuntes Paginas WEB

Caricato da

Copyright:

Formati disponibili

Elaboracion

ELABORACION DE PÁGINAS WEB.

2. MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO

3. DISEÑAR UNA PAGINA WEB CON UN SOFTWARE DE APLICACIÓN.

4. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

INFORMATICA TERCER SEMESTRE

5. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO

ELEMENTOS DEL DISEÑO

Los siguientes elementos son las bases que construyen el Diseño.

Una línea es definida como una marca con

Una figura plana o una forma es creada cuando

INFORMATICA TERCER SEMESTRE

Este se refiere a las variaciones de las

Espacio es el área vacía o abierta entre,

El Color es el carácter percibido de una superficie de

La Textura es la forma como se siente la superficie (textura

El Valor es que tan oscuro o claro se ve algo. Podemos

Los principios emplean elementos del diseño para crear composiciones.

INFORMATICA TERCER SEMESTRE

El Balance es el sentido de equidad visual en

El contraste es la yuxtaposición (fusión) de

El Énfasis es usado para crear ciertas

La Proporción describe el tamaño, ubicación o

Los Patrones son creados mediante la repetición

INFORMATICA TERCER SEMESTRE

La Gradación es el tamaño y dirección

La combinación de distintos elementos

1.1. ANALIZAR LAS TEORIAS DEL DISEÑO.

Los preceptos básicos del minimalismo son:

La decoración minimalista, se nutre de las formas puras,

INFORMATICA TERCER SEMESTRE

Los creadores minimalistas reducen al máximo los

Juan Camilo Uribe

Antonio Caro (1950- )

INFORMATICA TERCER SEMESTRE

1.2. IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEÑOS EXISTENTES.

INFORMATICA TERCER SEMESTRE

Sólo recientemente los gerentes involucrados en el sector de servicios se han dado

1.3. DISEÑAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION, SENTIDO Y

INFORMATICA TERCER SEMESTRE

Algunos factores psicológicos que debemos conocer son:

Existen dos tipos de equilibrio:

INFORMATICA TERCER SEMESTRE

Podemos hacer otra división de equilibrio:

1.4. APLICAR LA TEORIA DEL COLOR CONSIDERANDO EL CIRCULO CROMATICO, CONTRASTES,

INFORMATICA TERCER SEMESTRE

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

INFORMATICA TERCER SEMESTRE

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

INFORMATICA TERCER SEMESTRE

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

INFORMATICA TERCER SEMESTRE

2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PÁGINA WEB.

Conseguir 250 contactos comerciales en 1 año.

INFORMATICA TERCER SEMESTRE

Para ilustrar estas ideas, los objetivos podemos agruparlos en:

2.2. ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB.

PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR

LA ESTRUCTURA DEPENDE DEL CONTENIDO

INFORMATICA TERCER SEMESTRE

ESTRUCTURA SUGERIDA DE UNA WEB

NIVEL 1 NIVEL 2 NIVEL 3

PORTAFOLIO DE APREDIZAJE PARA CADA