introduccion, entorno

Es el Consorcio de Bibliotecas Universitarias de El

Salvador

Fue constituido el día 28 de enero de 2011

Facilitar la investigación a las comunidades universitarias de las distintas instituciones.

Adquisición consorciada (con mejores precios) de recursos bibliográficos impresos y digitales tales como: libros electrónicos, bases de datos, entre otros

Contiene los trabajos de graduación a texto completo

resultante de la actividad académica de los estudiantes,

previo a obtener su título.

Ofrece acceso a libros de texto para ser descargables en la

PC o dispositivos portátiles. Se requiere instalar ADOBE

DIGITAL EDITIONS para realizar las descargas.

Para consultar los libros de McGraw-Hill se debe de descargar el programa de Adobe Digital, el cual se puede hacer gratuitamente.

Es una biblioteca virtual con libros de texto y

complementarios, en formato electrónico.

Es una plataforma digital de contenidos académicos, ofrece los

textos completos de libros de editoriales académicas,

universitarias o institucionales e incluye E-libro

Base de datos especializada en contenidos de Legislación y

Jurisprudencia.

Libros electrónicos con contenidos líderes en Ciencia e

Ingeniería.

Contiene libros y artículos publicados desde 1998, así como

una amplia colección de estadísticas, con datos que se

remontan a 1960 y una cobertura de más de 80 países.

Colección de libros sobre temáticas relacionadas con la

práctica de arquitectura, los arquitectos y su trabajo, teoría

arquitectónica, regulaciones de construcción, tipos de

construcción, temas legales y de conservación, entre otras.

Ofrece acceso a publicaciones técnicas y más de trece mil

normas activas sobre Higiene Industrial, Seguridad, Análisis y

Aislamiento Térmico, Sistemas Computarizados, Electrónica,

entre otros.

Microsoft Expression web

Es una herramienta que se utiliza para el desarrollo de páginas y/o Sitios Web, al ser este parte de la Suite Microsoft Office posee elementos comunes que facilitan su utilización por parte de los usuarios.

COMO DISEÑAR UNA PÁGINA WEB

Un sitio Web, no está formada por una única Página Web que contiene toda la información, sino por varias páginas Web relacionadas. Además, cada página puede incluir diferentes objetos, tales como gráficos, sonidos o películas de vídeo.

Es muy importante utilizar una carpeta para almacenar todos los objetos que se van a usar en un conjunto de páginas Web.

Las imágenes son uno de los recursos más utilizados en las páginas Web. Los dos formatos más utilizados son GIF y JPG, que ofrecen una calidad suficiente a la vez que comprimen el archivo para que su tamaño sea lo más pequeño posible.

Desde el punto de vista del usuario es indiferente utilizar uno u otro formato, pero GIF (un máximo de 256 colores), mientras que JPEG (hasta 16,7 millones de colores).

Imágenes

Imagen GIF Imagen JPG

Fondos Web

¿CUANDO CREAR UN SITIO WEB?

Para crear un sitio en Internet el primer paso es apagar la computadora, coger papel y lápiz y hacer un esquema que responda a las siguientes preguntas:

• ¿Qué quiero publicar?

• ¿A quién va dirigida mi página?

• ¿Con qué material cuento?

• ¿Qué necesito?

Elementos de Expression Web 4.0

BARRA DE FORMATO

AREA DE TRABAJO

AREA DE TRABAJO

BARRA DE ESTADO

BARRA DE TITULO

BARRA DE MENU

SELECTOR DE PAGINAS

El selector de páginas: Este elemento nos ayuda a navegar

entre las distintas páginas que tenemos abiertas en un

momento dado, si tenemos abierto un sitio Web este se

muestra como el primer elemento seleccionable, además nos

indica que páginas no han sido guardadas marcándolas con un

asterisco (*) al final del nombre. Página

Web Activa

Pestaña del Sitio Web (Siempre al inicio)

Página Web Sin Guardar

Este elemento se utiliza para escoger la forma en que se visualizará la página web que se está trabajando

Diseño; Esta es la vista por defecto muestra la página en un estilo

similar al Word en donde se muestran los elementos de una forma gráfica

según se agregan.

Dividir; Esta vista muestra un área de diseño en la parte inferior y una

de código en la parte superior.

Código; En esta vista se muestra el código HTML del que se compone la

página Web.

DISEÑO

CODIGO HTML

Cuando está abierto un sitio Web el selector de vistas posee opciones diferentes

Carpetas: Muestra el sitio Web como un conjunto de carpetas y archivos en una vista similar a la del explorador de Windows.

Los Paneles de Tareas

Son ventana que se encuentran alrededor del espacio de trabajo y muestran información y opciones adicionales para mejorar la administración del sitio web

Panel de tareas Lista de carpetas Este panel nos muestra una vista de las carpetas que componen nuestro sitio web así como también de los elementos que están dentro de estas.

Como elaborar un sitio web Parte1. Pasos para crear un sitio web de una página procedimiento:

1. Presionamos en la barra de herramientas el botón Nuevo Sitio...

2. Con lo cual se abre el cuadro de diálogo Nuevo

Opciones de pestaña sitio Web

GENERAL: Muestra las distintas opciones para crear una página web en blanco

PLANTILLAS: Muestra las opciones de formatos de páginas web previamente

elaboradas con el formato y una serie de páginas web que las componen ya

que son sitios web completos.

La ubicación de la página también se muestra en el cuadro de dialogo Nuevo.

Luego de hacer clic en el botón aceptar se abre el área de trabajo

Para insertar una imagen es igual a un procesador de texto.

Para darle formato al texto existe la barra de formato

Para dar color o insertar una imagen como fondo es también parecido al editor de texto Word

Imagen de fondo

Color de fondo

Guardando el sitio web

Ruta de ubicación de la carpeta

Nombre del sitio web

Sitio web personal con plantilla

• Luego de hacer clic al menú archivo y seleccionar Nuevo

Una vez seleccionada la plantilla se abre en el área de

trabajo todo lo que se genera automáticamente de la

plantilla

La página maestra

El archivo cuyo nombre es master.dwt, es la pagina maestra, los

elementos de las demás páginas que no se pueden modificar en

ellas, es por que son parte de la página maestra y tienen que ser

modificadas en ese archivo y se abre haciendo doble clic en ese

archivo abriéndose como una página Web

las páginas maestras permiten crear un diseño coherente que se puede

actualizar fácilmente en todas las páginas de un sitio. Use páginas

maestras para definir un aspecto coherente con el contenido que se

comparte entre las páginas.

Comprimir carpetas

En la carpeta por lo general se guardan los sitios de forma

automática. Al ubicar la carpeta que contiene el/los sitio/s se pueden

ubicar en una sola carpeta para poder enviar este archivo por correo o

subirlo en plataforma U-virtual

A la hora de diseñar un sitio Web, es conveniente diseñar un boceto sobre cómo va a

ser la Web. Tenemos que decidir cómo vamos a estructurarla.

Lo más sencillo es no estructurarla, colocando todos los archivos en el mismo

directorio. Esto se suele hacer en sitios personales, ya que el número de archivos es

pequeño. Sin embargo este es un mal hábito, ya que si la Web crece, terminaremos

perdidos en un mar de archivos.

Para Insertar texto lo único que debemos hacer es escribir en la pantalla, como si estuviéramos en un procesador de textos como Word.

BARRA DE FORMATO

1. Estilos 2. Tipo de letra 3. Tamaño de fuente 4. Deshacer y rehacer 5. Negrita, cursiva y subrayado

6. Alineación del texto: • izquierda, centrado y derecha

7. Numeración y Viñetas 8. Sangría 9. Bordes

1 2 3 4

5

9 8 7

5

6

Desde el panel de tareas propiedades de css.

Tipo de letra

fondo

Configuración de listas y tablas

Corrector ortográfico

Con Microsoft® Expression® Web puede buscar y corregir palabras con errores de

ortografía en una o varias páginas o carpetas, o en un sitio Web entero. También

puede corregir o pasar por alto los errores ortográficos directamente en la vista

Diseño de una página Web.

Si no desea que Expression Web marque una palabra concreta como incorrecta,

puede agregarla al diccionario personalizado predeterminado.

Como notará en la imagen, puede ejecutar la corrección por medio del menú

Herramientas o directamente con la tecla F7.

Sin errores

• Nuestro sitio Web no debe mostrar errores ya que causaría una mala impresión en nuestros visitantes. Por ello, es recomendable pasar el corrector ortográfico y corregir cualquier error.

INTRODUCIR VIÑETAS

Insertar viñetas

La utilización de las viñetas es exactamente como en Word.

Imágenes

• Para mostrar fotos o dibujos, se suelen usar

principalmente dos formatos de imagen: GIF y JPG. El primero se suele usar para dibujos y pequeñas fotos de pocos colores e imágenes animadas.

JPG es usado para presentar fotos a todo color.

Hipervínculos

Vamos a ver qué son los hipervínculos y como

usarlos para hacer navegable nuestro sitio Web de forma

que los usuarios puedan ir de una página Web a otra.

Aprenderemos qué tipos de hipervínculos existen y para qué

sirven.

¿Qué es un hipervínculo?

Un hipervínculo es un enlace, normalmente entre

dos páginas web de un mismo sitio, pero un enlace

también puede apuntar a una página de otro sitio

web, a un fichero, a una imagen, etc. Para navegar al

destino al que apunta el enlace, hemos de hacer clic

sobre él. También se conocen como hiperenlaces,

enlaces o links.

Cont.

Normalmente el destino se puede conocer mirando la

barra de estado del navegador cuando el ratón esté

sobre el hipervínculo. Dependiendo de cual sea el

destino, hacer clic en un hipervínculo puede hacer que

ocurran varias cosas. Si el destino es otra página web, el

navegador la cargará y la mostrará, pero si el destino es

un documento de Word, el navegador nos dará la

posibilidad de abrir una sesión de Word para visualizarlo

o de guardar el archivo.

Cont.

Por lo tanto, podemos usar los hipervínculos para

conducir a los visitantes de nuestro sitio web por

donde queramos. Además, si queremos que se

pongan en contacto con nosotros, nada mejor que

ofrecerles un hipervínculo a nuestro correo

electrónico. Vamos a ver cómo hacer todo esto.

Tipos de Hipervínculos.

Hipervínculo de texto.

Un hipervínculo de texto es un enlace que se encuentra asociado a

un texto, de forma que si hacemos clic sobre ese texto, navegamos

dónde indique el hipervínculo. Por defecto, cuando creamos un

hipervínculo de texto, el texto aparece subrayado y en un color

distinto al del texto normal, de forma que el visitante sepa que existe

ese enlace. Si volvemos a la página después de visitar el enlace, este

aparecerá con otro tono también. Aunque es interesante diferenciar

el hiperenlace, es posible que no queramos que aparezca así. Más

adelante veremos cómo hacer esto.

Cont.

Hipervínculo de Imagen.

Un hipervínculo de imagen es un enlace que se encuentra asociado a una

imagen, de forma que si hacemos clic sobre esa imagen, navegamos

dónde indique el hipervínculo. Por defecto. cuando creamos un

hipervínculo de imagen, la imagen aparece rodeada de un borde con un

color llamativo para que el visitante sepa que existe ese enlace.

Al igual que con el texto, más adelante veremos cómo podemos modificar

este comportamiento.

Por otra parte, los hipervínculos pueden referirse a páginas del mismo

sitio web o de otros sitios web.

• Un hipervínculo local

Es un vínculo a una página que se encuentra en el mismo sitio web. Esto

significa que el archivo de la página web a la que se refiere el vínculo se

encuentra en el mismo disco que la página que contiene el vínculo. Así, para

referirnos a ella tan solo basta con poner la ruta o dirección en el disco duro.

Si se encuentra en la misma carpeta, basta con poner su nombre. Si se

encuentra en una carpeta que cuelga de la actual, hay que poner el nombre

de la carpeta y el del archivo.

Por ejemplo, supongamos que tenemos un vínculo desde esta página a

otra llamada curso que está en la carpeta access.

El vínculo sería: access/curso.htm

Hipervínculo a una página del propio sitio web (página local).

Cont.

Hipervínculo a otro sitio web (página externa).

Un hipervínculo externo es un vínculo a una página en

Internet. Es un vínculo a cualquier otro lugar fuera del

sitio actual. Cuando ponemos un vínculo externo,

escribimos la dirección completa de la página incluido

http://www.... Así,

http://www.ufg.edu.sv

Cont.

Vamos a explicar las partes de las que se compone una

dirección web completa:

• http --> es el protocolo utilizado para páginas web (HiperText

Transfer Protocol)

• www.ufg.edu.sv --> es el nombre DNS del servidor de UFG

• Mas ejemplos: http://www.mined.gob.sv/

Cont.

Hipervínculo a una dirección de correo electrónico.

Un hipervínculo a una dirección de correo electrónico es un vínculo que

contiene una dirección de correo. Al pulsar en él, automáticamente se abre

el programa de correo que tenga el usuario instalado para poder escribir a

esa dirección de correo. Por ejemplo, si nuestra dirección de correo es

juanperez@ufg.edu.sv, escribiremos esta dirección de correo como

dirección al insertar el hipervínculo.

La dirección de correo se descompone en:

juanperez--> nombre del usuario

ufg.edu.sv --> nombre del servidor de correo

Introducir hipervínculos en el texto.

Para introducir un hipervínculo tenemos 3 opciones:

Seleccionamos el texto asociado al enlace.

A continuación podemos :

Pulsar en el menú Insertar y después, en Hipervínculo.

Pulsar el botón de la barra formato .

Presionar desde el teclado Alt + Ctrl + K.

Cont. • Veamos un ejemplo siguiendo la primera opción.

Aparecerá el cuadro de diálogo Insertar hipervínculo

Cont.

• En Texto: aparece el texto que hemos seleccionado. Podemos cambiar este campo

para que aparezca otro texto, cambiando entonces el texto de la página.

• En Dirección: escribiremos la dirección a dónde nos tiene que llevar el

hipervínculo, por ejemplo: http://www.ufg.edu.sv De esta forma crearemos un

vínculo a otra página Web, a la que podremos viajar si disponemos de conexión a

Internet.

• Pulsamos en Aceptar.

• Nótese que el texto cambia de color y aparece subrayado para indicar que es un

hipervínculo. Si quisiéramos introducir un enlace al correo, escribiríamos la

dirección de correo en Dirección.

Cont.

• La pantalla nos mostrará algo similar a esto:

Hipervínculo a la UFG

Note como el texto que convertimos en hipervínculo cambia de color y aparece subrayado.

Botones para desplazarse

Vamos a ver cómo crear algunos botones básicos que son muy

usados en la mayoría de las páginas web, botones que atreves

de un estilo, ya sea color o imágenes.

Como primer paso hacemos clic en el menú Insertar en el

recuadrado desplegado seleccionamos la opción Botón interactivo.

Cont. En sus propiedades, ponemos lo que queramos que

salga en el botón en Texto del botón:

Para crear un vínculo al ancla, escribimos su

nombre predecido del símbolo #. Supongamos que

el ancla que hemos creado se llama ancla (en un

alarde de originalidad). Como vemos en el dibujo

en el campo Vínculo, hemos escrito #ancla.

El resto de opciones las configuramos como

queramos.

Podemos poner tantas anclas como queramos,

siempre que no mezclemos sus nombres.

Como ejemplo, al pulsar este botón iremos hacia

arriba, al principio del apartado.

Botón para una web externa a nuestro sitio

Texto dentro del

botón

Dirección web a la que se hace

referencia

• Y de este modo tenemos ya un botón con un vinculo a una pagina externa, nuestra pagina quedaría mas o menos de la siguiente manera.

TIC III

TECNOLOGIA DE LA INFORMACION Y LAS COMUNICACIONES III

• Un marco es una división de la ventana del explorador en dos o más regiones. En

cada una de ellas podemos colocar una página Web. Por ejemplo, podemos dividir

la pantalla en dos y cargar el índice de una Web en un marco y el contenido de la

Web en el otro. Veamos un ejemplo:

TIC III

TIC III

Página de titulo

Página de contenido

Página de menú

• En Expression web podemos 'ver' los marcos como barras

grises, horizontales o verticales. Los marcos en realidad no

contienen nada más que referencias a las páginas Web que se

van cargando en ellos. Desde Expression web podemos variar

fácilmente su tamaño, su número, elegir qué páginas

cargarán, etc.

TIC III

• Ventajas e inconvenientes de los marcos:

Actualmente el empleo de los marcos se ha reducido bastante. En el pasado cargar un menú lateral era costoso debido a la baja velocidad a la que se accedía a Internet, pero en la actualidad la carga de este menú no supone algo apreciable por el usuario.

Además, el tener varios marcos puede llevarnos a tener un pequeño lío, ya que siempre hemos de recordar qué cosas van en cada marco. Como ventaja, los marcos ofrecen la posibilidad de separar menús de contenido y así no tener que repetir el menú en todas las páginas del sitio.

TIC III

• Expression web no permite insertar marcos libremente, sino que nos obliga a utilizar una de las plantillas de marcos que hay predefinidas. Entonces podremos cambiarla como queramos, añadiendo o quitando marcos, cambiando su tamaño, etc.

• Vamos a crear una Web con marcos. Hacemos clic en el menú Archivo, después en Nuevo. En el panel de tareas que aparecerá a la derecha hacemos clic en Más plantillas de página.... Elegimos Páginas de marcos y a continuación nos aparecerán varias plantillas predefinidas.

TIC III

TIC III

1

2

3

• Vamos a trabajar con la plantilla cuya configuración es la más usada en Internet: Titular y contenido. Consiste en dividir la página Web en tres: Una superior, que contiene un título, una lateral, que suele contener un índice, y una central, en la que se verá el contenido de la Web.

Es importante saber que cada marco tiene un nombre, que nos sirve para poder usarlo individualmente como más adelante explicaremos.

En este caso, Expression web asigna los siguientes nombres:

• Para el Marco del título: titular.

• Para el Marco del Índice: menú.

• Para el Marco principal: principal.

TIC III

La imagen que podremos ver en nuestro monitor es esta:

TIC III

• Crearemos un sitio web vacío y 5 páginas Web distintas en blanco. Es

importante saber que las páginas formaran parte de una página principal que será la que contendrá el código de la división de los marcos.

• Crearemos la página de marcos en las opciones del cuadro de diálogo

“nuevo” en la pestaña “página” seleccionaremos marcos....

• 3 paginas se ubicaran como principales en este caso por el tipo de marcos, una de titulo, de menú y de contenido.

• Hacemos clic en los botones “establecer página inicial” y elegimos las páginas correspondientes a cada marco.

TIC III

TIC III

• Ahora vamos a hacer clic en Archivo y después en Guardar cada página

por separado.

TIC III

• Nos aparecerá la pantalla habitual para guardar los archivos, con la salvedad de que nos aparecerá el esquema de marcos. Iremos guardando el contenido de cada marco por separado, ya que cada uno es una página Web. Sabremos cual página guardamos en cada momento ya que aparece resaltada en azul en la figura.

Cuando aparece el fondo resaltado, y no los marcos, es porque es el momento de guardar la página que guarda el código de los marcos. Llamemos a esta página index.htm. Esta es la página que debemos cargar en el navegador para poder ver las demás en los marcos.

TIC III

Podemos modificar las características de un marco para que cumpla con nuestros objetivos.

• Lo primero que podemos hacer es cambiar el tamaño de los marcos. Para ello pulsaremos sobre los límites de los marcos con el botón izquierdo del ratón y, sin soltar, arrastraremos los límites. Una vez tenga el aspecto que deseemos es conveniente guardar la página.

Otro aspecto interesante que podemos configurar es el aspecto de cada marco.

TIC III

• Podemos mostrar los bordes de los marcos en el navegador. Para ello hacemos clic con el botón derecho del ratón dentro del marco cuyas opciones queremos cambiar. Hacemos clic en Propiedades del marco.

TIC III

Estas son las opciones más

interesantes: • Nombre y Página inicial. Aquí se

especifica el nombre del marco y la página Web que contiene. Estos dos parámetros son muy importantes, ya que podemos referirnos a cada marco por separado con el nombre del marco. Por otra parte, desde aquí podemos cambiar la página que cargue cada marco.

TIC III

Ahora pulsamos en el botón Páginas de Marcos.

• Tamaño del marco. Podemos ajustar el tamaño de los marcos desde aquí. Aparecerán dos campos, Ancho y Alto, que cambiarán a Ancho de fila o Ancho de columna cuando exista un marco en la misma fila o en la misma columna. En las opciones de la derecha podemos elegir Relativo

• , para cambiar el tamaño respecto a los otros marcos, Por cierto, para cambiar el tamaño respecto a la página, y finalmente Píxeles, para especificar un tamaño fijo.

TIC III

• En el apartado Márgenes modificamos los márgenes del marco como deseemos.

• Mostrar barras de desplazamiento. Para el marco de título o el de índice,

no suele ser necesario activarla, pero para el marco de contenido es interesante activarla si la página que va en este marco ocupa más espacio del que la ventana dispone. Elegiremos en Mostrar barras de desplazamiento si queremos que aparezcan, si no queremos que aparezcan o que aparezcan de forma automática Si es necesario.

Esta última opción es por defecto la elegida y la más recomendable.

TIC III

Pulsando en el botón Página de Marcos..., activaremos o desactivaremos la casilla Mostrar bordes si queremos o no que estos aparezcan.

TIC III

TIC III

Dividir Marco: Separa el marco que tenemos seleccionado ya sea en dos

filas o columnas.

Eliminar marco: Elimina el marco seleccionado y ajusta el resto de los

marcos alrededor del mismo.

Abrir página en ventana nueva: Abre la página que se encuentra en el

marco seleccionado como una página independiente.

• Guardar Página: Guarda la página que se muestra en el marco

seleccionado.

• Guardar Página como: Guarda la página contenida en el marco

seleccionado con otro nombre.

• Propiedades del marco: Muestra el mismo cuadro de dialogo de

propiedades del marco seleccionado

TIC III

TIC III

Al agregar un hipervínculo ya sea por un botón o por texto

1 2

TIC III

Los marcos flotantes son similares a las páginas de marcos,

excepto en que el marco flotante y su contenido se incrustan en

páginas Web existentes. A un marco flotante se puede agregar

cualquier elemento que se pueda incluir en una página normal.

Puede personalizar los marcos flotantes de la misma manera que

los marcos normales, así como activar barras de desplazamiento.

Una de las ventajas de utilizar estos marcos es que no tiene que

crear una página de marcos independiente para incrustar

contenido.

TIC III

La opción se encuentra en el menú insertar, opción HTML.

Al hacer clic en el botón de establecer página inicial podemos ubicar desde otra pagina web hasta imágenes.

En el menú insertar encontramos la opción HTML en la cual se encuentra el marco flotante

TIC III

Haciendo clic derecho encontramos las propiedades del marco flotante: