QU ES EXPRESSION WEB?

Expression Web es el sucesor de Front Page, es parte de la suite Microsoft Expression Studio, formada por: Expression Web es una herramienta de diseo para crear sitios modernos basados en estndares de gran calidad para la Web.

Expression Blend es la herramienta de diseo para crear experiencias del usuario atractivas y conectadas a la Web para Windows.

Expression Design es una herramienta de diseo de grficos e ilustraciones que le permite crear elementos persuasivos para las interfaces de usuario de aplicaciones Web y de escritorio.

Expression Media es una herramienta de administracin de activos que permite organizar y catalogar visualmente todos los activos digitales para recuperarlos con facilidad y realizar presentaciones.

QU SE PUEDE CREAR CON EXPRESSION WEB? Entonces, Qu se puede crear con Expression Web? Con Expression Web se pueden crear pginas web, es decir, pginas que se pueden guardar en un servidor de www para que sean vistas en Internet a travs de un navegador. Un sitio web en Internet esta formado por varias de estas pginas web, as que Expression Web se usa para crear sitios completos. En el mercado del software existen varias aplicaciones que se pueden usar para crear pginas web, entre ellas podemos destacar: Dreamweaver de Adobe

Visual Studio.net de Microsoft

Expression web, tambin es de Microsoft, sin embargo Expression Web cuenta con varias caractersticas que lo hacen fcil de usar y aprender, por lo que Ud. no requiere de conocimientos profundos de diseo o de programacin para poder crear pginas con aspecto profesional.

Entre las caractersticas que hacen de Expression Web una aplicacin muy buena para crear pginas web, podemos citar: Usan una interfaz grfica para crear pginas web. Incluye un conjunto de plantillas prediseadas listas para usarse. El entorno de trabajo es totalmente personalizable. Organiza toda la informacin de un sitio web en carpetas, lo mismo que cada una de las pginas que forman parte del sitio. El cdigo HTML que crea es reducido y se ajusta al estndar de creacin de pginas web para poder ser visto sin problemas en la mayora de los navegadores.

LOS SITIOS WEB DESDE EL PUNTO DE VISTA DEL CREADOR. Como se dijo anteriormente, un sitio web esta compuesto por varias pginas web, cada una de estas pginas debe ser creada en un lenguaje que puedan entender los navegadores de Internet, existen varios navegadores desde los cuales se pueden ver las pginas web, entre ellos podernos destacar:

Internet Explorer

Netscape Navigator

Firefox El lenguaje que interpretan los navegadores para mostrar una pgina web se llama: HTML (HyperText Markup Languaje) o en espaol Lenguaje de marcado de hipertexto, este lenguaje es fcil de aprender y de usar, an as Expression web simplifica mucho la creacin de pginas, ya que usa una interface grfica, lo que significa que muy pocas veces se tendr que escribir cdigo, porque Expression web lo crea por Ud. Veamos un ejemplo de la forma en que un navegador interpreta el cdigo HTML contenido en una pgina web, la imagen que se presenta a continuacin muestra la pgina principal del sitio Google Mxico (http://www.google.com.mx)

Y ahora se muestra parte del cdigo que se escribi para crear esa pgina:

Por ahora no es necesario saber que es exactamente lo que dice ese cdigo HTML, ya que como se dijo, Expression web simplifica la tarea creando el cdigo conforme se van aadiendo elementos a la pgina que se este creando.

VARIAS FORMAS PARA CREAR PGINAS WEB. Antes de comenzar, debe saber que existen muchas formas para crear un sitio web, algunas, tal como una pgina esttica de HTML son relativamente simples de hacer, otras son mas complejas, por ejemplo se puede usar Expression Web para crear sitios en ASP.net y trabajar con bases de datos, XML o RSS, pero este no es nuestro caso. El sitio que construiremos en esta clase es relativamente simple, pero le aseguro que todo lo que aprenda en esta introduccin podr aplicarlo mas adelante para desarrollar sitios ms complejos. EJERCICIO: Iniciando un sitio nuevo. Antes de comenzar a crear pginas HTML es mejor iniciar creando un nuevo sitio web, en Expression Web se hace de la forma siguiente: Entre a Expression Web Inicio Todos los programas Microsoft Expression Microsoft Expression Web

Una vez que entre a Expression Web siga estos pasos: 1. En el men Archivo Nuevo Sitio web

2. Seleccione General y despus Sitio Web vaco

Cuando se inicia con un sitio web vaco, Expression Web crea una carpeta en blanco donde es posible guardar todos los archivos y carpetas de los que estar formado el sitio web.

Al crear el sitio, se tiene la opcin de nombrarlo, si no desea hacerlo, Expression Web le asignar un nombre al sitio de forma automtica, tal como Web1, Web2, etc. de esta forma, cuando se trabaje con varios sitios de forma simultnea ser mucho mas simple la organizacin de todos los sitios; tambin es posible que desee cambiar el lugar donde se crea la carpeta que contendr el sitio, esto se puede hacer fcilmente al presionar el botn Examinar Cambie el nombre del sitio web a: Ardillas y presione el botn Aceptar.

Ahora ha creado la carpeta raz de su sitio web, en ella Expression Web almacenar todos los archivos del sitio as mismo, se asegurar de que los enlaces e imgenes funcionen adecuadamente cuando el sitio se publique en un servidor web. Crear una pgina nueva. Ahora para crear un nuevo documento HTML hay que seleccionar: Archivo Nuevo Pgina, y se debe especificar el tipo de pgina que se va a crear, para este ejemplo usaremos un archivo HTML. Antes de hacer cualquier otra cosa, es un buen hbito grabar la pgina que se acaba de crear, si se trata de la pgina principal del sitio, entonces es una buena idea llamarla Index.html o default.html. El resto de los archivos y carpetas en el sitio web pueden llamarse como uno desee, pero es mejor no usar espacios o caracteres especiales, porque muchos servidores web manejan reglas estrictas para los nombres de archivos y carpetas y eso puede afectar la visualizacin correcta del sitio. Guarde su pgina con el nombre de Ardillas.htm Se puede crear un documento HTML ms rpido al dar clic en Nuevo HTML.

Otro buen hbito es establecer las propiedades de la pgina, estas propiedades las puede encontrar en: Archivo Propiedades; la configuracin que establezca aqu, se aplicar a toda la pgina.

Primero aada un ttulo a su pgina, este texto aparecer en la parte superior de la ventana del navegador cuando la pgina se muestre en l, tambin es el ttulo que se almacena cuando un usuario almacena la pgina dentro de sus favoritas. Las opciones de Descripcin de la pgina y palabras clave son usadas por los buscadores de Internet (Google, Yahoo, WebCrawler, AltaVista, etc.) para aadir las pginas del su sitio web a las extensas bases de datos que manejan para que los usuarios puedan encontrar su sitio rpidamente basados en las palabras clave. En Ttulo escriba: Ardillas del mundo, en Descripcin de la pgina escriba: Pgina dedicada a las Ardillas y en palabras clave puede escribir: Ardilla, Ardillas, mamfero roedor, animales graciosos.

En la pestaa de Formato se puede especificar el color del texto, de las ligas y del fondo de la pgina. En la pestaa Avanzadas es donde se establecen los mrgenes derecho, izquierdo, superior e inferior de la pgina, los pondremos todos en cero (0). Aadiendo contenido a la pgina con capas (layers)

En clases posteriores veremos formas ms avanzadas para usar capas (layers), en este caso se usarn para agregar contenido a nuestra pgina que actualmente se encuentra vaca. Las capas en Expression Web se crean usando una etiqueta de HTML llamada DIV; en este caso usaremos el posicionamiento absoluto. Una vez que se aade una capa a la pgina, es posible insertar en ella cualquier otro elemento como por ejemplo una imagen o un texto. Las capas son populares, debido a que proveen un medio muy preciso para disear una pgina web, sin embargo, debe recordar que esta es solo una forma en que se pueden crear pginas web. Para aadir una capa a la pgina, de doble clic en el icono de Capa del cuadro de herramientas.

Esto crear una capa en la parte superior izquierda del documento, Ud. puede moverla dando clic sobre ella y usando el ratn o las flechas, tambin puede cambiar su tamao tomndola por las esquinas. Coloque la capa exactamente en la esquina superior izquierda y a continuacin de clic dentro de ella, se mostrar el cursor para meter texto, sin embargo, en este caso vamos a colocar una imagen, para hacerlo hay que ir al men Insertar Imagen Desde Archivo. Seleccione la imagen llamada PlecaArdillas.gif y presione el botn Insertar, en el cuadro de dilogo de Propiedades de accesibilidad damos clic en Aceptar.

Se puede cambiar el tamao y la posicin de una capa usando el panel: Propiedades de CSS

Ahora la imagen de la pleca superior se muestra en la pgina web.

Como siguiente paso vamos a insertar una nueva capa, damos clic en un rea sin ocupar del documento y a continuacin damos doble clic en el icono de capa.

Colocamos la capa debajo de la pleca superior y damos clic dentro de ella, el texto que va a ir aqu lo obtenemos del archivo TextoArdillas.txt, abrimos el archivo y copiamos el contenido en la capa.

De clic en un rea en blanco e inserte una nueva capa, en ella inserte una imagen llamada ArdillaRoja.jpg, y de esa forma tendremos nuestra primera pgina web creada.

Para ver como se mostrara en un navegador de Internet vamos a Archivo Vista previa en el explorador y elegimos uno de los exploradores que se muestran.

USAR PLANTILLAS PARA UNA EMERGENCIA

Un grupo de amigos preocupados por los problemas relacionados con el medio ambiente, nos ha invitado a participar activamente en su grupo ecologista, al ver nuestra pgina sobre las ardillas, se les ha ocurrido que podemos crear un sitio web donde se puedan abordar los temas acerca de la ecologa, la forma en que daamos el medio ambiente, as como las acciones que podemos hacer para disminuir la contaminacin. Para desarrollar el sitio de forma rpida podemos usar una de las caractersticas que tiene Expression Web: las plantillas.

QU SE CREA CON UNA PLANTILLA? Una plantilla es un conjunto de pginas con un diseo preestablecido y listo para usarse, Expression Web tiene una gran cantidad de plantillas, solo debemos escoger aquella que deseemos usar.

Una vez que entramos a Expression Web, para crear una plantilla realizamos los pasos siguientes: 1. Seleccionamos el men Archivo Nuevo Sitio Web

2. En el cuadro de dilogo Nuevo seleccionamos Plantillas, Organizacin1

En especifique la ubicacin del nuevos sitio Web cambiamos el nombre de la ltima carpeta a PaginaEcologica

3. Presiona el botn Aceptar para que Expression Web comience con la creacin de un sitio web nuevo Una vez que Expression Web ha terminado de crear el sitio nuevo basado en una plantilla podemos observar una serie de carpetas y archivos en la Lista de carpetas.

Como puede ver, dentro de la carpeta de PaginaEcologica, se crearon automticamente las carpetas: About, Calendar, Contact, FAQ, images, information_links, news, photo_gallery y styles, cada una de ellas guarda ciertos archivos, que conforman el sitio de la Pgina Ecolgica.

Cabe sealar que este sitio ya contiene imgenes, texto e hipervnculos listos para funcionar, para ver el sitio en ejecucin basta ir al men Archivo Vista previa en navegador Debajo del ttulo y en la parte inferior se localizan una serie de enlaces (hipervnculos) que llevan a diferentes partes del sitio web, cada parte esta formada por una pgina web y cada una de las pginas web se encuentra en una carpeta especfica de la estructura del sitio web, de acuerdo con la relacin siguiente: Men Principal Acerca de Noticias Calendario Galera de fotografas Vnculos P+F (preguntas ms frecuentes) Contacto Carpeta raz about news calendar photo_gallery information_links faq contact Archivo HTML default.htm about.htm news.htm calendar.htm photo_gallery.htm information_links.htm faq.htm contact.htm

COMENZAR POR EL DEFAULT. Ya hemos visto que el sitio es totalmente funcional, tiene imgenes, texto e hipervnculos que funcionan, sin embargo, la informacin que tiene el sitio es an el de la plantilla de Expression Web, entonces, es necesario ver la forma en que se puede editar la informacin para que se ajuste a nuestros requerimientos. Todos los sitios web que existen en Internet tienen una pgina por omisin, esta pgina es la primera que se muestra cuando se ingresa a un sitio web mediante un navegador. Para que una pgina se cargue por omisin, debe tener un nombre especial, dependiendo del servidor donde est hospedado el sitio, la mayora de los servidores web aceptan los nombres siguientes: Default.htm, Index.htm

Y esa pgina default o index debe guardarse en la carpeta raz del sitio web

As que este archivo es el que se va a modificar en primer lugar para darle el aspecto que se desea, despus se modificarn cada una de las pginas que conforman el sitio web.

QU PUEDO CAMBIAR CUANDO USO UNA PLANTILLA? Cuando se usan plantillas de Expression Web para crear un sitio, en cada pgina hay partes se pueden cambiar, pero otras no, esto es con el fin de mantener la concordancia y el diseo del sitio, veamos cuales son estas reas que se pueden modificar: Las areas que se pueden cambiar se reconocen porque es posible dar clic y seleccionarlas, mientras que las reas que no se pueden cambiar no pueden ser seleccionadas. En el caso de la pgina principal, el rea en los cuadros rojos es el rea editable, mientras que el resto no se puede cambiar (posteriormente veremos como cambiar esas partes).

Eso significa que solo podemos cambiar las imgenes y el texto de los encabezados 2 y 3 Puesto que estamos construyendo un sitio para la ecologa, el diseo en color verde nos viene muy bien, sin embargo es necesario cambiar las imgenes y el texto, esto lo haremos en la siguiente clase.

LAS DOS VISTAS DE UNA PGINA Como se dijo en la primera clase, las pginas web estn escritas en un lenguaje llamado HTML, hasta el momento no lo hemos utilizado ya que Expression Web nos ayuda con esta tarea y va creando el cdigo HTML necesario para que la pgina que se esta creando luzca como deseamos, sin embargo, Expression Web tambin permite ver el cdigo que genera para las pginas; cuando se tenga mas experiencia se podr modificar directamente el cdigo de una pgina para hacer ajustes finos. Expression Web nos permite tres modos de ver la pgina web (un momento, en el encabezado dice dos, si son dos modos y el tercero es mixto): Diseo, Cdigo y Dividir estos botones estn ubicados en la parte inferior de la ventana de la aplicacin; para ver el cdigo generado para nuestra pgina default.htm podemos presionar el botn Cdigo

Para regresar al modo original presionamos el botn Diseo y para ver ambos, presionamos el botn Dividir, que permite ver el cdigo y el diseo de la pgina al mismo tiempo.

Aqu podemos ver una parte que tiene el fondo color crema (amarillo plido), esa parte del cdigo es la que forma parte de la zona no editable de la pgina, por el momento no haremos cambios al cdigo directamente.

CAMBIO DE LAS IMGENES PREESTABLECIDAS Continuamos trabajando con la pgina Default.htm y ahora es tiempo de comenzar a editar la pgina para que cumpla con la funcin que le hemos asignado; como recordar, en la primera clase insertamos un par de imgenes en la pgina acerca de las ardillas del mundo, para este caso el proceso es un poco distinto. El primer paso es averiguar el tamao de las imgenes para hacer que las nuevas tengan el mismo tamao, Para esto: 1. Damos clic en la imagen del puente para seleccionarla 2. Damos clic derecho y en el men contextual seleccionamos Propiedades de imagen 3. En el cuadro de Propiedades de imagen seleccionamos la pestaa Apariencia 4. El tamao (ancho y alto) se muestra en pixeles o en porcentaje, en este caso es de 288 x 189 pixeles. Cerramos el cuadro de Propiedades de imagen y realizamos los mismos pasos para averiguar el tamao de la otra imagen; ahora tenemos que la imagen garden_01.jpg mide 288 x 189 pixeles y la imagen llamada garden_02.jpg mide 160 x 248 pixeles. Con ayuda de un editor de imgenes creamos dos imgenes que sustituirn a estas, cada una con la medida correcta; as, tenemos dos imgenes, una llamada PaginaEcologica.jpg con un tamao de 288 x 189 y la otra imagen que se llama SoloTenemosUnHogar.jpg de 160 x 248.

Vamos a colocar cada una de ellas en su lugar, para esto realizaremos los pasos siguientes: 1. Con ayuda del explorador de Windows copiamos ambas imgenes a la carpeta de imgenes del sitio web, para saber donde esta ubicada la carpeta podemos ver la lista de carpetas de Expression Web.

Las imgenes para sustituir han sido copiadas a la carpeta images

La ruta completa en este caso es: D:\SitiosExpressionWeb\PaginaEcologica\images

Una vez que las imgenes se han copiado regresamos a Expression Web y para cambiar las imgenes hacemos lo siguiente: 1. 2. 3. 4. Seleccionamos la imagen del puente (garden_01.jpg) y damos clic derecho. Del men contextual seleccionamos Propiedades de imagen En el cuadro de Propiedades de imagen presionamos el botn Examinar En el cuadro de Imagen seleccionamos el archivo PaginaEcologica.jpg y presionamos el botn Abrir. 5. Podemos incluir un texto alternativo, el cual se mostrar si, por algn problema la imagen no llega a cargarse.

images/PaginaEcologica.jpg

La Pgina Ecolgica

Se realizan pasos semejantes para cambiar la segunda imagen.

EDICIN DE TEXTO Solo falta poner los encabezados y textos adecuados para tener completa la pgina principal. (En clases posteriores nos ocuparemos del encabezado principal). 1. Seleccionamos el Encabezado 2, lo borramos y escribimos Ecologa. 2. Seleccionamos el texto que esta debajo y lo sustituimos por el Texto1 del archivo TextoClase3.txt. 3. En la caja de Propiedades de CSS buscamos el atributo text-align y establecemos su valor a justify (justificado).

4. En el Encabezado3 colocamos la frase Porque solo tenemos un hogar 5. En Seleccionamos el espacio para el texto y ah copiamos el Texto2 del archivo TextoClase3.txt. 6. En la caja de Propiedades de CSS buscamos el atributo text-align y establecemos su valor a justify (justificado).

Guardamos el archivo default.htm y podemos verlo en el navegador para apreciar como luce.

Para la vista previa en un navegador por default, se puede presionar la tecla F12.

LA IMPORTANCIA DEL ARCHIVO MASTER.DWT Cuando navegamos por un sitio web, vemos que ste tiene algunas partes que se mantienen sin cambios en todas las pginas que visitamos, por ejemplo el encabezado, el pie de pgina, el men principal, los colores, etc. Es aqu donde interviene el archivo Master.dwt, ya que en l se encuentran definidas las reas que se mantienen fijas en todas las pginas del sitio web, esto significa que si editamos este archivo, podremos cambiar el aspecto de todo el sitio web, ya que el cambio se aplicar a todas las zonas invariantes de las pginas del sitio.

DWT Iniciales de Dynamic Web Template, o en espaol: Plantilla Web Dinmica.

El archivo master.dwt se encuentra en la raz del sitio web.

Un archivo master.dwt tambin nos ayuda a no hacer cambios accidentales al diseo de una pgina en particular. Como recordar, en la clase anterior vimos que al usar una plantilla, existen zonas que no se pueden editar en una pgina web, esto es porque pertenecen a las zonas fijas (protegidas) definidas por el archivo master.dwt. Ahora se ver la forma en que este archivo se puede editar para modificar todas las pginas del sitio de forma simultnea.

EDICIN DE LOS TTULOS Y DEL MEN. Para realizar los cambios que ser requieren en el ttulo vamos a editar al archivo master.dwt, lo hacemos de la forma siguiente: 1. De doble clic sobre el archivo master.dwt para mostrarlo en la ventana de diseo.

2. De clic en ORGANIZACIN y escriba el ttulo: Mundo Verde 3. De clic en Descripcin de la organizacin y escriba: Apoyando a la Ecologa Ahora vamos a cambiar el men de forma que se adapte a nuestras necesidades. En este caso podemos ver que la plantilla cre automticamente el men con las opciones: Principal, Acerca de, Noticias, Calendario, Galera de fotografas, Vnculos, Preguntas ms frecuentes y Contacto. Casi todas nos sirven, sin embargo vamos a eliminar las ligas correspondientes a Acerca de, Galera de fotografas y Calendario y en su lugar vamos a colocar los enlaces: Contaminantes, En peligro de extincin y Apoyo al planeta. Para esto realizaremos los pasos siguientes: 1. En la vista de diseo del archivo master.dwt seleccionamos el texto del vnculo Acerca de. Vnculo es sinnimo de hipervnculo, liga o enlace, todos son traducciones de Hyperlink, link

2. 3. 4. 5. 6.

Escribimos Contaminantes. Seleccionamos el texto del vnculo Calendario. Escribimos Peligro de extincin. Seleccionamos el texto del vnculo Galera de fotografas. Escribimos Apoyo al planeta.

Realizamos los mismos pasos con el men de la parte inferior para que los textos de los vnculos sean iguales.

Algo importante que debemos recordar es que aunque se hayan cambiado los textos de los vnculos, stos aun enlazan con sus archivos originales, a estos no les hemos hecho cambios, los cambios se harn en clases posteriores. Una vez que hemos hecho todos los cambios al archivo master.dwt, es necesario guardarlo, en el momento de presionar el botn de guardar, Expression Web nos avisa que se van a afectar a cierto nmero de archivos.

Respondemos que si, Expression Web actualiza todos los archivos:

Despus vamos a Archivo Guardar todo para asegurarnos de que todo el sitio web ha sido actualizado.

VISTA DEL SITIO EN UN NAVEGADOR. Una de las ventajas de las pginas creadas con Expression Web es que estn diseadas para funcionar en la mayora de los navegadores que existen actualmente. Si se desea ver la pgina en el navegador por defecto se puede presionar la tecla F12, sin embargo tambin se puede mostrar en otros navegadores que se tengan instalados en la computadora. Los navegadores ms comunes son Internet Explorer, Netscape y Firefox, para ver la pgina en cualquiera de ellos o en todos a la vez puede usar: Archivo Vista previa en el explorador Seleccionar el navegador (explorador) y la resolucin a la que desea ver la pgina web.

Es una buena prctica realizar la comprobacin del aspecto que ofrece nuestra pgina web en varios navegadores (exploradores) y con diferentes resoluciones.

LAS PLANTILLAS Y SUS HOJAS DE ESTILO PREDETERMINANDAS. Uno de los problemas a los que nos enfrentamos cuando creamos un sitio web es que despus de un tiempo, ste se vuelve menos interesante para los usuarios, debido que siempre lo ven con el mismo diseo, pensamos que sera bueno cambiar el diseo del sitio de vez en cuando para que as los usuarios lo encontraran interesante cada vez que lo visitan, sin embargo, crear diseos nuevos o combinaciones de colores novedosos toma bastante tiempo, pero en este caso no hay problema, ya que Expression Web puede darnos una mano para resolver este problema. Cuando Expression Web crea un sitio web a partir de una plantilla, tambin crea varias hojas de estilo que se pueden usar para modificar la apariencia de un sitio de forma inmediata. Para ver los estilos creados para este sitio, en la Lista de carpetas expandimos la carpeta llamada styles.

Hojas de estilo creadas por expresin web al momento de crear el sitio con una plantilla.

Veremos con ms detalle la creacin y el uso de las hojas de estilo en clases posteriores, ahora nos basta saber que una hoja de estilo es un archivo que contiene una coleccin de diseos y colores que se pueden aplicar a los elementos que hay en una pgina web, de esa forma, si se definen los mismos estilos en varias hojas de estilo, pero cada en cada una los estilos tienen diseos y colores diferentes, entonces se puede cambiar la apariencia de un sitio de forma rpida; es como ver un mismo paisaje con colores nuevos cada vez.

CAMBIO DE ESTILO MEDIANTE LA VENTANA DE CDIGO. Para que una hoja de estilo afecte a una pgina web, debe estar vinculada con ella, las hojas de estilo se vinculan mediante cdigo HTML, especficamente con esta lnea de cdigo:
<link rel="stylesheet" type="text/css" title="CSS" href="styles/style1.css" media="screen" />

Aqu se puede observar la etiqueta link, la cual permite crear vinculaciones, en esta caso se hace con la hoja de estilo style1.css, que se encuentra en la carpeta styles. Y como se vio anteriormente, Expression Web cre cuatro hojas de estilo para este sitio. Ahora vamos a ver como se puede cambiar la hoja de estilo que se toma como referencia para las pginas web, como el cambio se realiza para todas las pginas del sitio web, la modificacin del cdigo se debe hacer en el archivo master.dwt, para eso realizamos lo siguiente: 1. Damos doble clic sobre el archivo master.dwt para mostrarlo en la ventana de diseo. 2. Presionamos el botn Cdigo para ver el cdigo HTML de master.dwt. 3. Buscamos en la parte del encabezado la lnea correspondiente a la etiqueta LINK. 4. Modificamos el nombre del archivo que se encuentra en el atributo href para que ahora la hoja de estilo sea style2.css.
2

Etiqueta es una palabra o letra que forma parte del lenguaje HTML, hay varias etiquetas, cada una de ellas es interpretada de forma diferente por el navegador, las etiquetas se escriben entre <>

Encabezado cuando se habla de pginas web el encabezado es todo lo que se encuentra entre las etiquetas <head> y </head>.

5. Guardamos el archivo master.dwt, recuerde que Expression Web avisa que se van a modificar una serie de archivos. 6. Guardamos todos los archivos que se modificaron dando clic en el men Archivo Guardar todo. 7. De doble clic sobre el archivo default.htm para abrirlo. Pase a modo de vista de diseo (presionando el botn Diseo). Ahora presione la tecla F12 para que se publique el sitio en el navegador por defecto. Como puede ver, el aspecto del sitio se modific, todo con un simple cambio de hoja de estilo.

Pgina default.htm con el estilo 1

Pgina default.htm con el estilo 2

Ahora realice el mismo procedimiento descrito para mostrar el sitio con el estilo definido en style3.css y publquelo para ver el resultado.

Pgina default.htm con el estilo 3 En este estilo, adems de los colores, cambi la fuente (tipo de letra)

CAMBIO DE IMGENES DE LA PLANTILLA. Ya hemos insertado imgenes en la pgina web default.htm y en la pgina de Ardillas del mundo, en este caso se insertar en el archivo master.dwt. Para que el encabezado se vea mejor, vamos a insertar una imagen adecuada antes del ttulo MUNDO VERDE, es una imagen pequea (50x50 pixeles).

Para esto realizamos lo siguiente: 1. Con ayuda del explorador de Windows se debe copiar la imagen MundoVerde.gif a la carpeta de images de nuestro sitio web. 2. Regresamos a Expression Web y damos doble clic en el archivo master.dwt para abrirlo, pasamos a modo de diseo y colocamos el cursor antes de la M de MUNDO VERDE. 3. Seleccionamos el men Insertar Imagen Desde archivo. 4. En la carpeta images seleccionamos el archivo MundoVerde.gif y presionamos el botn Insertar.

5. Al mostrarse la ventana de Propiedades de Accesibilidad presionamos el botn Aceptar.

La imagen se inserta en el encabezado, ahora solo guardamos el archivo master.dwt y despus guardamos todos los archivos y procedemos a el sitio.

Listo, los cambios a master.dwt y a la pgina principal han quedado concluidos.

VENTAJAS DEL USO DE PLANTILLAS El uso de plantillas para crear sitios web tiene grandes ventajas, como pueden ser: Ahorran tiempo, ya que es posible tener un sitio completo y listo para publicarse en unas cuantas horas.

Tienen un diseo consistente, es decir todas las pginas del sitio estn diseadas de forma parecida, los mens, pies y encabezados son iguales, lo que facilita al usuario la navegacin a travs del sitio.

Existen varios diseos predeterminados.

Se pueden crear diseos propios cuando se ha acumulado suficiente experiencia.

Puede alterarse el aspecto de un sitio completo mediante las hojas de estilo.

LABORATORIO DE DIGITACIN

Con apoyo del Cuaderno de Ejercicios de Digitacin, implementa prcticas con el Mecasoft.

Profesor: Registre en su Tabular de Seguimiento de Ejercicios, el avance del alumno.

ESTRUCTURA DE UN SITIO EN EXPRESSION WEB Cuando se crea un sitio web en Expression Web, se parte de una carpeta principal a la que llamamos raz, en ella se encuentran varias carpetas y archivos que forman la estructura del sitio web, como se pudo ver en clases anteriores, al usar una plantilla, esta crea automticamente una serie de carpetas y archivos. En la imagen siguiente se muestran todas las carpetas y archivos del sitio web de la Pgina Ecolgica.

Para localizar cada una de las carpetas y archivos en el Explorador de Windows, se debe tomar en cuenta la ubicacin de la carpeta Raz, en este caso, la carpeta raz esta en: D:\SitiosExpressionWeb\PaginaEcologica\ As para encontrar el archivo faq.htm, en el explorador de Windows se debe ir a: D:\SitiosExpressionWeb\PaginaEcologica\ faq\faq.htm

CARPETAS Y ARCHIVOS, UNO PARA CADA COSA Como se vio la semana pasada, es una buena costumbre crear una carpeta para cada una de las pginas web que son parte del sitio, tambin se debe crear una carpeta para imgenes y otra para las hojas de estilo. Si cada una de las pginas va a tener varias imgenes incluidas, es preferible crearle su propia carpeta de imgenes, tambin, si se van a usar varias imgenes de fondo, se pueden tener en una carpeta aparte. Por ejemplo, la distribucin para la Pgina ecolgica creada con la plantilla es la siguiente: Carpeta raz about news calendar photo_gallery information_links faq contact images styles Contenido default.htm about.htm garden_01.jpg news.htm calendar.htm photo_gallery.htm information_links.htm faq.htm contact.htm Imgenes jpg y gif Hojas de estilo

Tambin es posible crear carpetas para las animaciones, videos, msica y otros elementos multimedia para tener bien definida la estructura de un sitio web y no tengamos problemas para encontrar cada uno de los elementos que forman un sitio web. Creacin de carpetas Recordemos que en clases pasadas se modific el men del sitio para que se adaptara a nuestras necesidades, pero solo se modific el men, no se hicieron cambios a la estructura del sitio para aadir las carpetas que hacen falta y eliminar las que sobran, ahora lo haremos.

Para crear una carpeta se puede usar la ventana de Lista de carpetas, solo debemos realizar los pasos siguientes: 1. Seleccionamos con el ratn la carpeta raz (la superior) y damos clic derecho. 2. Del men contextual seleccionamos Nueva Carpeta

Expression Web crea la carpeta nueva, solo se debe cambiar el nombre a peligro_extincion

Creamos de la misma forma las carpetas para Contaminantes y Apoyo al planeta. Pgina Contaminantes Apoyo al planeta Nombre de la carpeta contaminantes apoyo_planeta

Eliminar carpetas Para eliminar una carpeta, basta seleccionarla y presionar el botn Suprimir <Supr>, o tambin se puede seleccionar la carpeta que se va a eliminar, dar clic derecho y del men contextual seleccionar Eliminar Se debe confirmar la eliminacin en el cuadro de dialogo que se muestra.

Importante: Una vez que se ha eliminado una carpeta, esta no se puede recuperar, por lo que debemos tener cuidado al eliminar archivos y carpetas.

Eliminamos las carpetas que no se van a usar: about, calendar, photo_gallery; de esa forma, la estructura del sitio queda modificada y lista para que se agreguen los archivos para cada carpeta.

Se muestra la estructura del sitio web de la Pgina Ecolgica, sin las carpetas about, calendar y photo_gallery y con la incorporacin de las carpetas: apoyo_planeta, contaminantes y peligro_exitincin.

Ahora, en la carpeta llamada peligro_extincion cree una carpeta llamada imagen y ah copie las imgenes para la clase 6.

LAS ETIQUETAS, QU DICE EL HTML? Como se dijo al principio, todas las pginas web se crean en el lenguaje HTML, y aunque hemos visto algo de su cdigo de pasada, an no lo hemos analizado con ms detenimiento, as que es el momento de comenzar con l. HTML trabaja con etiquetas o marcas que indican lo que l navegador deber interpretar, cada etiqueta comienza con < y termina con: >, las etiquetas pueden tener atributos, un atributo modifica la forma de funcionar de una etiqueta, una forma de representar las etiquetas de HTML y sus atributos es: <etiqueta atributo1=valor1 atributo2=valor2> Hay etiquetas que no tienen atributos, hay otras que tienen uno o ms, se irn mencionando a lo largo de las clases segn se requiera. Todas las pginas HTML comienzan con la etiqueta <html> y terminan con </html>, tienen un encabezado y un cuerpo, cada uno definido con una etiqueta de inicio y de cierre, as a grandes rasgos, una pgina HTML tiene la estructura siguiente: <html> <head> Encabezado de la pgina. </head> <body> Cuerpo o contenido de la pgina. </body> </html>

Etiquetas del encabezado. Cada una de las partes (encabezado y contenido) tienen etiquetas exclusivas, es decir, que no se pueden usar en la otra parte, por ejemplo, en el encabezado se pueden colocar las etiquetas: Etiqueta <title>Ttulo de la pgina</title> <style></style> <meta /> Funcin Muestra el ttulo en la barra de ttulo del navegador. Se usa para crear estilos para los elementos de la pgina. Se usa para diferentes propsitos, es muy til para indicarle a los navegadores el idioma de la pgina, la descripcin de la misma, las palabras clave para que sea indexada en los buscadores.

Etiquetas del contenido Son muchas las etiquetas que se pueden usar para el contenido de la pgina web, se irn mencionando conforme el avance del curso. Ahora vamos a continuar con la creacin del sitio web de la Pgina Ecolgica, en esta ocasin vamos a crear la pgina de Peligro de Extincin donde se hablar de las especies animales que estn en peligro de desaparecer. Ya hemos trabajado con plantillas, en esta ocasin crearemos una pgina desde cero e iremos incorporando las imgenes y los textos que se requieran Como primer paso, en la carpeta de peligro_exitincion se crear una nueva pgina web: 1. En lista de carpetas seleccione la carpeta peligro_exitincion 2. De clic derecho y del men contextual seleccione Nueva HTML

3. Escriba el nombre del archivo: peligro_extincion.htm y presione Enter 4. De doble clic sobre el archivo peligro_extincion.htm para abrirlo. Si estamos en la vista de diseo, entonces veremos una pgina en blanco o si estamos en la vista de cdigo vernos algo como lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sin ttulo 1</title> </head> <body> </body> </html>

Si estamos en modo de cdigo, cambiamos a modo de diseo presionando el botn Diseo. Ahora vamos a modificar el encabezado de la pgina HTML, se hace de la siguiente forma: 1. Seleccione la etiqueta <body> que se encuentra en la parte superior, inmediatamente debajo de la pestaa del nombre del archivo. 2. De clic derecho y del men contextual seleccione: Propiedades de la etiqueta. 3. En el cuadro de dilogo Propiedades de la pgina escribimos los datos siguientes:
Ttulo: Descripcin de la pgina: Palabras clave: Pgina ecolgica Animales en peligro de extincin Pgina que informa sobre las especies animales en peligro de extincin. ecologa, animales, peligro, extincin

Y damos clic en Aceptar

Ahora si vamos a la parte del cdigo, veremos que ste cambi a:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Pgina ecolgica Animales en peligro de extincin </title> <meta name="keywords" content="ecologa, animales, peligro, extincin" /> <meta name="description" content="Pgina que informa sobre las especies animales en peligro de extincin." /> </head> <body> </body> </html>

Como puede verse, Expression Web modific la etiqueta <title> y agreg dos etiquetas <meta>, que en este caso dan las palabras clave y la descripcin de esta pgina.

CREAR UN DISEO CON CAPAS En la primera clase de esta materia se creo la pgina de Ardillas del mundo usando capas, una capa es un contenedor de una pgina Web que puede alojar elementos tales como texto y grficos. Las capas se pueden superponer, anidar, es decir, poner una capa dentro de otra, mostrar y ocultar en la pgina. Una capa se define en Expression Web como un conjunto de etiquetas <div> cuya propiedad de posicin se establece de forma relativa o absoluta. Despus de agregar una capa a una pgina Web, puede modificar sus propiedades de posicin y agregar otras mediante las caractersticas de capas y CSS de Expression Web. Puede crear capas con el panel de tareas Capas, el men Insertar o el panel de tareas Cuadro de herramientas. Vamos a comenzar creando una capa que se usar para poner una pleca de ttulo, para aadir la capa a la pgina, de doble clic en el icono de Capa del cuadro de herramientas.

Esto crear la capa en la parte superior izquierda del documento, coloque la capa exactamente en la esquina superior izquierda y a continuacin de clic dentro de ella, para colocar la imagen, as que vamos al men Insertar Imagen Desde Archivo. Seleccione la imagen llamada PlecaAnimalesExtincion.jpg y de clic en Insertar, en el cuadro de dilogo de Propiedades de accesibilidad de clic en Aceptar.

Ya ha colocado la pleca superior de la pgina, ahora se colocarn mas capas para poner en ellas las imgenes y los datos de las especies en peligro de extincin.

EDICIN DE CAPAS Capas anidadas Una capa puede contener otra capa, de forma que al moverse la capa contenedora, las que estn dentro se mueven tambin, esto es muy til cuando se desea cambiar de posicin un grupo completo de capas. Seleccione un rea en blanco del documento y de doble clic en el icono de Capa para crear otra, ahora seleccione la capa y expndala para que tenga aproximadamente el mismo tamao que la capa de la pleca. Ya que en un documento a base de capas pueden existir muchas, es conveniente que se nombren cada una de ellas conforme se crean, en este caso llamaremos a esta capa: DivLobo ya que contendr los datos del lobo mexicano. Para nombrar una capa seleccinela y de clic derecho, del men contextual seleccione Propiedades de capa

En el panel de capas de doble clic sobre la Capa2 y cambie el nombre a DivLobo

Seleccione nuevamente la capa DivLobo, de clic dentro de ella y de doble clic en el icono de capa para crear una capa dentro de la capa actual. Algo importante que debe saber es que el cuadro de herramientas pudo haber desaparecido para dar lugar al panel de capas, si es as basta con usar las flechas que estn al lado derecho de las pestaas para regresar al cuadro de herramientas, que es el primero de todos.

Flechas para recorrer los pneles.

Seleccione nuevamente la capa exterior y cree otra capa, de forma que haya dos capas dentro de la capa DivLobo y colquelas en la posicin que se muestra en la imagen.

Capa 2 (interna)

Capa 3 (interna)

Una vez que las capas estn listas, en la capa interna derecha vamos a insertar la imagen Lobo.jpg, y en la izquierda insertaremos el texto correspondiente al Lobo mexicano, ahora se van a modificar los nombres de las capas de la siguiente forma: la capa de la derecha (de imagen) se llamar: DivImagenLobo y la de la izquierda DivTextoLobo, las acomodamos para que el contenido sea parecido al de la imagen.

Para que el texto se justifique a ambos lados del prrafo, lo seleccionamos y, en el panel de Propiedades de CSS buscamos el atributo: text-align y lo establecemos en justify.

Tambin se puede dar color y bordes a una capa, comenzaremos por colocar un borde a la capa de la imagen del lobo, para eso realizamos lo siguiente: 1. Seleccionamos la capa DivImagenLobo en el panel de capas, damos clic derecho y del men contextual seleccionamos Bordes y sombreado.

2. En el cuadro de dilogo de bordes y sombreado seleccionamos estilo solido, color negro y damos clic en Aceptar, Ahora la capa de la imagen del lobo ahora tiene un borde color negro. Para modificar el color del fondo de la capa DivLobo, la seleccionamos, damos clic derecho y del men contextual seleccionamos Bordes y sombreado nuevamente, ahora en la pestaa de Sombreado se elige un color gris plata y se presiona Aceptar.

Podemos especificar el tamao y la posicin exacta de cada capa usando el cuadro de dilogo Ubicacin, para mostrar este cuadro seleccionamos en el panel de capas aquella que queremos modificar y damos clic derecho, del men contextual seleccionamos: Ubicacin. Se muestra la ventana de ubicacin, en donde se pueden establecer los valores de la posicin vertical y horizontal, as como el ancho y el alto de la capa.

Una vez que hemos ajustado la capa DivLobo, cambiando la ubicacin Izquierda a 25px y el tamao a 650 de ancho por 220 de alto, damos clic en Aceptar. Ahora creamos de la misma forma el resto de las capas para poder tener nuestra pgina lista con los datos de algunos animales en peligro de extincin: Lobo mexicano, Camello bactriano, Lince ibrico, Berrendo, Guacamaya roja y Cocodrilo.

LAS TABLAS DE HTML. Una tabla est formada por filas y columnas de celdas en las que puede insertar texto, grficos y otros elementos HTML. Puede personalizar las tablas de varias formas diferentes con el fin de hacerlas ms atractivas y fciles de leer. Las tablas tambin forman parte de las cosas que HTML puede hacer, para las tablas, HTML ocupa las etiquetas: <table>, <tr>, <td> y <th>, veamos para que sirve cada una de ellas. Las etiquetas <TABLE> </TABLE>.- Para crear a una tabla se empieza con la etiqueta <TABLE> y se acaba con la etiqueta </TABLE>. Las etiquetas < TR > < /TR >.- Cada lnea de una tabla precisa tener un par de etiquetas <TR> </TR>. Si una tabla tiene dos pares de etiquetas <TR> </TR>, tendr dos filas. Si tiene ocho pares de etiquetas <TR> </TR>, la tabla tendr ocho filas. Las etiquetas < TD >< /TD >.- En el interior de una tabla, generalmente se tienen datos dentro de las celdas, estos datos (texto, imagen, otra tabla, etc.) deben estar entre un par de etiquetas <TD></TD>. El nmero de etiquetas <TD></TD> en una fila determina de cuantas celdas constar. Una fila con cinco etiquetas <TD></TD> tendr cinco celdas de anchura. Las etiquetas < TH >< /TH >.- Son similares a las etiquetas <TD></TD> excepto en que el texto de las etiquetas <TH></TH> estar en negrita y ser centrado automticamente. Por ejemplo: Encabezado 1 Celda 1 Celda 3 Encabezado 2 Celda 2 Celda 4

La tabla anterior fue originada mediante el cdigo HTML

<table border=1> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Celda 1</td> <td>Celda 2</td> </tr> <tr> <td>Celda 3</td> <td>Celda 4</td> </tr> </table>

Y no se preocupe, la informacin precedente es solo eso: informacin, ya que como dijimos, Expression Web nos ahorra la tarea de estar escribiendo directamente cdigo HTML para crear pginas web.

LAS TABLAS COMO BASE PARA DISEAR. Las tablas pueden parecer un modo sencillo de disponer el texto en columnas o quiz de aadir un titular a una ilustracin, pero los desarrolladores creativos Web han imaginado modos de sacar un gran partido de una caracterstica aparentemente sencilla. Con un poco de imaginacin, la etiqueta <TABLE> puede ser una poderosa herramienta de formato. Expression Web incluye un concepto conocido como Tablas de Diseo, una tabla de diseo es una herramienta que sirve para crear un diseo de pgina. En HTML, se muestra igual que una tabla, sin embargo Expression Web proporciona varias herramientas para modificar tablas y tablas de diseo. Puede utilizar las tablas de diseo predefinidas que estn disponibles en el panel de tareas Tablas y celdas de diseo para empezar a crear rpidamente una pgina Web. En este caso vamos a usar las tablas de diseo predefinidas, para eso debemos activar el panel de Tablas de diseo, esto se hace dando clic en el men Paneles de tareas Tablas de diseo.

El panel de tablas de diseo se muestra en la esquina inferior izquierda de Expression Web, movemos la barra de desplazamiento hasta abajo para ver la lista de los diseos. Entonces vamos a usar tablas para crear nuestra siguiente pgina, la pgina de Contaminantes. Para comenzar a crear la pgina, en el panel de Lista de carpetas vamos a crear dentro de la carpeta de Contaminantes una carpeta llamada imgenes y una pgina HTML llamada contaminantes.htm. Y vamos a darle estos datos: Ttulo: Descripcin de la pgina: Palabras clave: Pgina ecolgica Contaminantes. Pgina que informa sobre los contaminantes del medio ambiente. ecologa, contaminantes, medio ambiente, contaminacin

Una vez que se haya creado la carpeta de imgenes y el archivo de contaminantes.htm, vamos a copiar dentro de la carpeta imagen los archivos *.jpg de la clase 7, en cuanto se realice esto podemos continuar especificando un diseo para la pgina basndonos en los diseos de tablas predefinidas. Para esto realizamos lo siguiente: En el panel de Tablas de diseo escogemos uno de los diseos preestablecidos, en este caso usaremos el diseo llamado: Encabezado, cuerpo, pie de pgina e izquierdo, para seleccionarlo damos clic sobre l.

Damos doble clic sobre el diseo para seleccionarlo, al hacerlo, Expression Web genera el cdigo HTML para ese patrn.

En el momento en que se selecciona el diseo de tabla, Expression Web crea el cdigo HTML necesario para el patrn que se escogi y lo muestra en la vista Diseo.

Como puedes ver, la vista de diseo de Expression Web muestra el aspecto del diseo, y muestra tambin pequeos paneles con las medidas de cada una de las celdas, filas o columnas que forman el diseo, esto sucede siempre que se seleccione la etiqueta <table> (se encuentra junto a <body>) en la parte superior del diseo; ahora vamos a ajustar las medidas de la tabla, para eso realizamos los pasos siguientes: 1. Seleccionamos la medida de la columna de la izquierda y damos clic en el botn que tiene la flecha hacia abajo. 2. En el men seleccionamos Cambiar ancho de columna

3. En el cuadro de dilogo de ajustamos el ancho a 150 y clic en Aceptar

4. Seleccionamos la medida de la columna derecha y cambiamos su ancho a 550. 5. Por ltimo seleccionamos la medida de la fila superior (que abarca ambas columnas) y del men seleccionamos Cambiar alto de fila.

6. En el cuadro de dilogo establecemos el alto a 100 y clic en Aceptar.

Una vez que la tabla tiene las medidas adecuadas, vamos a colocar la pleca superior, para eso: 1. Damos clic dentro de la fila superior. 2. Seleccionamos men Insertar Imagen Desde archivo 3. Vamos a la carpeta de imagen que esta dentro de la carpeta contaminantes y ah seleccionamos el archivo: PlecaContaminantes.jpg y damos clic en Insertar 4. Damos clic en Aceptar Hemos colocado la pleca superior.

TABLAS DENTRO DE TABLAS. As como se pueden anidar capas, tambin es posible anidar tablas, es decir colocar una tabla dentro de una celda de tabla. En la columna izquierda se van a insertar tres imgenes relativas a los contaminantes, as que se va a requerir una tabla de tres filas por una columna para colocar dichas imgenes, veamos como se hace: 1. De clic en el interior de la columna izquierda (debajo de la pleca superior). 2. Vamos al men Tabla Insertar tabla 3. En el cuadro de Insertar tabla damos los valores siguientes:

Filas: 3 Margen de celdas: 0 Especificar ancho: Activo

Columnas: 1 Espacio entre celdas: 0 Ancho 150 pixeles

Y se da clic en Aceptar, ya se tiene una tabla dentro de la columna derecha, ahora vamos a realizar algo parecido en la columna derecha, solo que aqu vamos a crear una tabla de seis filas por una columna. Se crea la tabla con los parmetros siguientes: Filas: 6 Margen de celdas: 0 Especificar ancho: Activo Columnas: 1 Espacio entre celdas: 0 Ancho 150 pixeles

APLICAR DISEOS A LAS TABLAS. Ya tenemos dos tablas insertadas, una en la columna derecha y otra en la izquierda, ahora se van a modificar las alineaciones horizontal y vertical de las celdas. 1. Seleccionamos la columna izquierda dando clic en uno de sus bordes y damos clic derecho. 2. Del men contextual seleccionamos Propiedades de celda

3. En la ventana de Propiedades de celda establecemos la alineacin vertical a Superior, damos clic en Aceptar

Continuamos con la otra columna, damos clic sobre un borde de ella 4. Del men contextual seleccionamos Propiedades de celda 5. En la ventana de Propiedades de celda establecemos la alineacin horizontal a Centrar y la vertical a Superior, damos clic en Aceptar El paso siguiente es insertar tres imgenes, una por celda en la columna de la izquierda, seleccionamos cada una de las celdas y procedemos a insertar la imagen correspondiente en cada una, de acuerdo con la tabla siguiente: Celda 1 Archivo Autos.jpg Imagen

Ciudad.jpg

Contaminantes.jpg

Cuando se haya terminado con esta actividad, es hora de pasar a la columna de la derecha, aqu se va a insertar el texto acerca de los contaminantes, ese texto se encuentra en el archivo: TextoClase7.txt, el texto se inserta en cada una de las columnas de acuerdo al siguiente esquema: La primer celda se deja en blanco para que sirva de separacin con la pleca superior, la segunda tiene el encabezado: Introduccin, la tercera ya tiene texto, la cuarta se deja en blanco como separacin, la quinta tiene el ttulo Contaminacin Atmosfrica y la sexta contiene el texto relacionado.

Introduccin Con los problemas a los que nos enfrentamos actualmente, problemas de tipo poltico, econmico, social y hasta deportivos, dejamos de lado uno con el que tenemos contacto ms cercano, el problema de la contaminacin, un problema que nosotros creamos e incrementamos de forma gradual todos los das. La concentracin de los contaminantes se reduce al dispersarse estos en la atmsfera, proceso que depende de factores climatolgicos como la temperatura, la velocidad del viento, el movimiento de sistemas de altas y bajas presiones y la interaccin de stos con la topografa local, por ejemplo las montaas y valles.

Contaminacin Atmosfrica Entre los diferentes tipos de contaminacin, existe la contaminacin atmosfrica, un tipo de contaminacin al cual no se le toma el inters que requiere, hasta que se llegan a niveles altos de IMECAs (Indice Metropolitano de Calidad del Aire); es entonces cuando se toman medidas, y son medidas no para prevenir a la misma, sino para combatirla por unas horas hasta esperar a que se repita la situacin. La concentracin de los contaminantes se reduce al dispersarse estos en la atmsfera, proceso que depende de factores climatolgicos como la temperatura, la velocidad del viento, el movimiento de sistemas de altas y bajas presiones y la interaccin de stos con la topografa local, por ejemplo las montaas y valles. La temperatura suele decrecer con la altitud, pero cuando una capa de aire fro se asienta bajo una capa de aire caliente produciendo una inversin trmica, la mezcla atmosfrica se retarda y los contaminantes se acumulan cerca del suelo. Para dar formato al texto, lo seleccionamos y despus seleccionamos el tipo de fuente y tamao, despus vamos al men Formato Prrafo y en el cuadro de dilogo seleccionamos las opciones que deseemos. Los encabezado se centran y se ponen en negrita; los prrafos se justifican a ambos lados, el tipo de fuente para todos es Arial, Helvtica, Sans-serif y el tamao es de 12 pt (small), despus cambiamos el color de letra a blanco (no se ver por un momento, pero despus agregaremos un fondo oscuro a la tabla).

INSERCIN DE IMGENES Y FONDOS. Ya hemos visto como insertar imgenes en una tabla, sin embargo tambin podemos hacer que una imagen le sirva de fondo a una celda o a toda una tabla As que por ltimo para completar el diseo de la pgina de contaminantes vamos a colocar un fondo de imagen a la tabla, para ello realizamos lo siguiente: 1. Seleccionamos la tabla externa dando clic sobre la etiqueta <table> en la parte superior de la vista diseo (esta al lado de <body>). 2. Damos clic derecho y del men contextual seleccionamos: Propiedades de la etiqueta. 3. En el cuadro de dialogo activamos la opcin: Utilizar imagen de fondo 4. Damos clic en el botn Examinar 5. En el cuadro de Seleccin de imagen de fondo escogemos el archivo FondoTabla.gif y presionamos el botn Abrir. 6. Presionamos el botn Aceptar. De esa forma hemos terminado de crear la pgina web de contaminantes, la cual al final lucir de la siguiente manera:

LOS HIPERVINCULOS, ENLACES A CUALQUIER PARTE

Un hipervnculo enlaza una pgina Web a otra. Cuando un visitante hace clic en el hipervnculo, la pgina de destino se muestra en un explorador Web. Los hipervnculos tambin vinculan imgenes, archivos multimedia, ubicaciones concretas de una pgina Web, direcciones de correo electrnico y programas. Adems de representarse como texto, los hipervnculos tambin pueden ser imgenes. Una direccin URL es una direccin que especifica un protocolo (como HTTP o FTP), un servidor Web y una ruta de acceso de un archivo, como por ejemplo, http://www.ejemplo.com/expression/default.htm. Existen dos tipos de direcciones URL: absolutas y relativas. Una direccin URL absoluta contiene una direccin completa, lo que incluye el protocolo, el servidor Web, la ruta y el nombre de archivo. A una direccin URL relativa le faltan una o ms partes de la direccin. Los exploradores Web obtienen la informacin que falta de la pgina que contiene la direccin URL. Por ejemplo, si faltan el protocolo y el servidor Web, el explorador Web utilizar el protocolo y el dominio de la pgina actual.

TIPOS DE HIPERVINCULOS Si atendemos al lugar al que se realiza un enlace, entonces tenemos tres tipos de hipervnculos. Enlace a un punto de la misma pgina Cuando se trabaja con documentos muy extensos o ndices suelen ponerse enlaces desde el principio del documento al final del mismo y viceversa, as se agiliza la tarea del usuario examinando el documento. El primer paso consiste en marcar las distintas zonas del documento. Un hipervnculo puede conducir a una ubicacin concreta de una pgina Web estableciendo un vnculo a un marcador de dicha ubicacin. Puede agregar un marcador nuevo y administrar los existentes en la pgina Web actual mediante el cuadro de dilogo Marcador. Cuando se define un marcador para una seleccin de texto, dicho texto aparece subrayado con una lnea discontinua en la vista Diseo. Cuando se define un marcador para una ubicacin vaca, el marcador se indica en la vista

Diseo mediante un icono de marcador cuando estn seleccionados tanto Mostrar como Marcas de prrafo en Marcas de formato (men Ver). Vamos a crear un conjunto de marcadores para la pgina web de Especies animales en peligro de extincin, para ello se debe abrir dicha pgina, una vez abierta haremos lo siguiente: 1. Seleccione el texto al que desea asignar un marcador, en este caso vamos a seleccionar el texto Lobo mexicano.

2. En el men Insertar Marcador.

3. En el cuadro de dilogo Marcador, en Nombre de marcador, escriba un nombre para el marcador (se permiten espacios), en este caso dejaremos el que aparece por omisin; Lobo_mexicano y presionamos el botn Aceptar.

Se ha creado un marcador llamado Lobo_mexicano, vamos a crear el resto de los marcadores para la pgina de animales en peligro de extincin, seleccionando cada uno de los ttulos de cada especie.

Una vez que se hayan creado todos los marcadores, procederemos a crear un ndice en la pleca superior con los nombres de los animales, para que al dar clic sobre el nombre del animal, el vnculo nos lleve hasta el marcador donde estn los datos de la especie, para eso haremos lo siguiente: 1. En la pleca superior vamos a insertar una capa nueva y la nombramos como DivIndice

2. Creamos una tabla de 2 filas x 3 columnas

3. En cada una de las celdas vamos a colocar los nombres de los animales y aplicamos un formato a la letra para que sea de color blanco, Arial a 12 pt y en negrita.

4. Para crear el primer hipervnculo seleccionamos el texto Lobo mexicano que esta en la tabla de la pleca superior.

5. Damos clic en el men Insertar Hipervnculo

6. En el cuadro de dilogo seleccionamos Vincular a: Lugar de este documento.

7. Seleccionamos el Marcador: Lobo_mexicano y damos clic el botn Aceptar, en ese momento Expression Web crea le hipervnculo y el texto Lobo mexicano se colorea de azul. (posteriormente veremos como se puede modificar el formato del hipervnculo). Ahora se realiza lo mismo para cada uno de los textos que se deben convertir en hipervnculos, ahora para hacer que se note el texto de cada vnculo, se selecciona la tabla y se aplica un color de fondo: Seleccionamos la herramienta: Resaltar y elegimos la opcin Ms colores

Y seleccionamos un color de la paleta que combine con los colores de la pleca.

Damos clic en aceptar y ahora ya se distinguen los hipervnculos, procedemos a guardar los cambios y presionamos la tecla F12 para publicar la pgina; vemos que al dar clic sobre alguno de los vnculos, la pgina web salta automticamente a donde se encuentra el marcador respectivo.

Enlaces a otras pginas Otro uso muy comn en los hipervnculos es para ir a otra pgina web del mismo sitio, esto ya se ha visto en el momento de publicar la pgina default del sitio de la Pgina Ecolgica. Vamos a abrir el archivo master.dwt para poder editar el men del sitio, una vez que se encuentre abierto, haremos lo siguiente: 1. Seleccionamos el texto de Contaminantes del men.

2. Damos clic en el men Insertar Hipervnculo... 3. En el cuadro de dilogo de Modificar hipervnculo

4. Seleccione Vincular a: Archivo o pgina web existente, buscar en: Carpeta actual. 5. De doble clic en la carpeta Contaminantes, para abrirla. 6. Seleccione el archivo Contaminantes.htm y de clic en el botn Aceptar

Se deben realizar pasos similares para modificar el enlace (hipervnculo) del men Peligro de extincin, tampoco se debe olvidar uno de modificar los enlaces de la parte inferior del documento master.dwt. Por ltimo se deben almacenar los cambios hechos en el archivo master.dwt y tambin guardar todos los archivos, ahora, solo queda publicar la pgina default.htm y ver como funcionan los nuevos hipervnculos. Enlaces a otros sitios Debido a que en Internet se encuentran millones de sitios, es muy probable que los temas que abordemos en nuestro sitio tambin sean contemplados en otros sitios de la red, es por eso que la gran mayora de los sitios WWW tienen una pgina o seccin de enlaces, en ella incluyen hipervnculos a otros sitios que hablan sobre temas parecidos o que podran interesar a los usuarios que naveguen por nuestro sitio. Vamos a incluir algunas ligas de inters dentro de nuestro sitio, antes de comenzar a editarlo debemos conseguir los URL de los sitios a los que deseamos enlazar, se puede usar Google o algn otro buscador para localizar sitios con temas afines, he aqu algunos de ellos: URL http://www.greenpeace.org/mexico/ http://www.ecologistasenaccion.org/ http://www.hazalgo.org/ http://www.animales-en-extincion.com/ http://www.somosamigosdelatierra.org/ http://calentamientoglobalclima.org/ http://www.ecoportal.net/ Descripcin Greenpeace Mxico Ecologistas en accin Acciones para detener el cambio climtico. Animales en extincin - Peligro Todos podemos hacer algo Sitio de los pequeos amigos de la Tierra (para nios) Sitio sobre el calentamiento global El directorio ecolgico y natural

Una vez que tenemos la lista de hipervnculos, podemos comenzar a modificar la pgina de enlaces (los URLs estn en el archivo: URLs_Clase8.txt) Para este ejercicio necesitamos abrir la pgina: information_links.htm, que se encuentra en la carpeta del mismo nombre, una vez abierta, procedemos a la edicin de los vnculos de la forma siguiente: 1. En el subttulo escribimos: Lista de sitios de inters 2. Seleccionamos el primer hipervnculo: Vnculo de hipertexto.

3. Damos clic en el men Insertar Hipervnculo 4. En el cuadro de dilogo de Modificar hipervnculo escribimos Greenpeace Mxico en el cuadro de Texto: 5. Escribimos http://www.greenpeace.org/mexico/ en el cuadro de Direccin y damos clic en el botn Aceptar.

6. Eliminamos el texto simulado que hay despus del vnculo de Greenpeace, dejando el espacio para separar ste vnculo del siguiente. 7. Se hace lo mismo para incluir dos enlaces ms.

8. Para el cuarto enlace ya no tenemos texto de muestra, para crear el vnculo siguiente colocamos el cursor despus del ltimo vnculo y presionamos Enter.

9. Se crea un elemento de lista nuevo y el cursor se coloca al principio de l.

10. Damos clic en el men Insertar Hipervnculo y continuamos con el proceso de creacin del cuarto vnculo y los que faltan. 11. En el cuadro de texto que se muestra a la derecha de la lista de vnculos vamos a insertar un texto y una imagen. (Para esto podemos copiar y usar el texto que se encuentra en el archivo TextoComplementarioClase8.txt y debemos crear una carpeta llamada imagen en la carpeta information_links y copiar en ella el archivo Planeta.gif).

CONVERTIR IMGENES EN HIPERVINCULOS En los ejercicios pasados ya hemos visto la forma de hacer que un texto se convierta en un hipervnculo, sin embargo tambin es posible crear hipervnculos a partir de imgenes, como se ve a continuacin. La nica diferencia para crear un hipervnculo usando una imagen es que en lugar de seleccionar un texto se debe seleccionar una imagen, el resto del proceso es exactamente igual. Para finalizar sta clase vamos a crear un hipervnculo basado en la imagen llamada Planeta.gif, para ello solo debemos hacer lo siguiente: 1. Seleccione la imagen llamada Planeta.gif 2. De clic en el men Insertar Hipervnculo 3. En el cuadro de dilogo, en Direccin escriba la URL: http://www.tudiscovery.com/planetatierra/ 4. De clic en el botn de Aceptar

Ya hemos terminado, solo falta guardar los cambios y publicar nuestra pgina web de vnculos.

QU SON LAS HOJAS DE ESTILO?

Las hojas de estilos en cascada (CSS) permiten tener el control sobre el aspecto o la presentacin de las pginas Web. Mediante CSS, es posible colocar y definir con precisin la apariencia de los elementos de una pgina Web. Una CSS puede ser externa, interna o en lnea, y una pgina Web puede usar uno o varios de estos tipos de CSS a la vez. En general, los estilos que se definen en una CSS en lnea tienen prioridad sobre los de una CSS interna o externa, y los estilos de una CSS interna tienen prioridad sobre los de una CSS externa, por eso es que se denominan En cascada CSS externas Las hojas de estilos externas sirven para aplicar los mismos estilos de forma coherente en algunas o en todas las pginas Web de un sitio Web. Al definir estilos en una o varias hojas de estilos externas y adjuntarlos a las pginas Web, puede garantizar que todo el sitio Web tenga una apariencia coherente. Si decide cambiar un estilo, slo tiene que hacer un cambio, en la CSS externa, y ste se refleja automticamente en todas las pginas Web que hacen referencia a dicho estilo y CSS. Las CSS externas se incluyen en archivos .css, como global.css. La sintaxis de las CSS externas es la misma que la de las CSS internas, excepto en que los estilos definidos en las CSS externas no estn incluidos entre etiquetas <style>.

CSS internas Las CSS internas, denominadas en ocasiones CSS incrustadas, sirven para definir estilos slo para la pgina Web actual y tambin para reemplazar los estilos que se definen en una CSS externa adjunta a la pgina Web actual. Las CSS internas se incluyen entre las etiquetas <head> de las pginas Web. Ejemplo de hoja de estilos interna: <style type="text/css"> .alert { font-weight: bold; color: #FF0000; } h1 { font-size: 16pt; font-family: Arial, Helvetica, sans-serif; } #headlines { border-color: #000000; border-width: thin; border-style: solid; } </style>

CSS en lnea Los estilos en lnea sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una pgina sin tener que reutilizar el estilo. Los estilos en lnea se definen dentro de las etiquetas iniciales de los elementos HTML de pginas Web, por ejemplo: <p style="font-weight: #FF0000"> bold; font-style: italic; color:

ESTILOS PARA ETIQUETAS Estos estilos tambin se conocen como Basados en elementos, sirven para definir el conjunto de propiedades que desea que utilice cada etiqueta concreta de una pgina Web, es decir puede aplicar un estilo (color, fuente, margen, negrita, etc.) a todos los vnculos (etiqueta <a>). Por ejemplo, para hacer que haya un borde de color negro en todas las imgenes (etiqueta <img>) en la pgina Web, cree un estilo basado en elementos que utilice el elemento <img> como selector y que tenga valores para la propiedad border, como se muestra en el cdigo: img { border 1px solid black; }

ESTILOS PARA CLASES Los estilos basados en clases sirven para definir el conjunto de propiedades que desea usar en uno o varios elementos de una pgina Web. Si en algn momento desea modificar el estilo, puede editar el conjunto de reglas del mismo y cada uno de los elementos a los que ha aplicado el estilo reflejar los cambios automticamente. Se puede usar el atributo class al momento de crear una etiqueta de HTML, y de esa forma se crea un conjunto de elementos HTML a los que se les puede aplicar un estilo determinado, por ejemplo, puede hacer que todos los vnculos (etiqueta <a>) de un men de navegacin tengan un mismo color, fuente y aspecto y aplicarle otro estilo al resto de los vnculos de la pgina (que no son parte del men).

ESTILOS EXCLUSIVOS Tambin llamado estilos basados en IDs, sirven para definir un conjunto de propiedades para un solo elemento o para un bloque de elementos que desee distinguir del resto del contenido de una o varias pginas Web.

CREANDO SU PROPIA HOJA DE ESTILO Antes de comenzar a crear una hoja de estilo, sera buenos que nos preguntramos, qu es un estilo? Un estilo es un conjunto de caractersticas de formato definidas en una hoja de estilos en cascada (CSS). Es posible aplicar estilos al contenido de una pgina Web: texto, imgenes, capas, tablas e incluso el cuerpo de toda la pgina Web. Para crear una hoja de estilo siga este procedimiento: En el men Archivo Nuevo CSS.

Para crear un estilo nuevo, en el panel de tareas Aplicar estilos haga clic en Nuevo estilo.

Botn Nuevo estilo

En el cuadro de dilogo Nuevo estilo vamos a crear un estilo para los hipervnculos (etiqueta <a>), as que usaremos un estilo de etiqueta o basado en elemento.

En Selector se debe escoger la etiqueta a (como puede ver, existe la forma de crear estilos para los posibles estados de la etiqueta a: (active, hover, link, visited). Definir en: Pgina actual. Podemos ver que para hacer ms fcil la creacin de estilos, los atributos estn agrupados en las categoras siguientes: Fuente, bloque, fondo, borde, cuadro, ubicacin, diseo, lista y tabla.

Para el estilo de a vamos a establecer los valores siguientes:

En Vista previa podemos ver un ejemplo del estilo que se esta creando; una vez hayamos terminado, presionamos el botn Aceptar. Expression Web crea el cdigo necesario para el estilo que acabamos de crear y lo escribe en el archivo de hoja de estilo. a { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; color: #800000; text-decoration: none; }

Para que el vnculo cambie de aspecto al colocar el apuntador del ratn sobre l, vamos a definir un estilo nuevo usando: a:hover, as que nuevamente presionamos el botn Estilo Nuevo, en Selector escogemos:

Y le damos los valores siguientes:

Ahora podemos ver los dos estilos definidos en la pgina de estilos: a { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; color: #800000; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: small; text-decoration: underline; font-weight: bold; color: #FF0000; } Ahora guardamos la pgina en la carpeta de Styles, con el nombre de Estilo01_Animales.css.

Ya tenemos la primera hoja de estilos creada por nosotros, ahora veamos como es que se aplica a una pgina web, es muy sencillo hacerlo. 1. Abrimos la pgina web a la que deseamos aplicarle la hoja de estilos, se debe abrir y poner en modo de Vista Diseo, en este caso es la pgina de peligro_extincion.htm 2. Vamos a la Lista de carpetas, expandimos la carpeta de estilos y tomamos y arrastramos el archivo Estilo01_Animales.css sobre el diseo de la pgina web abierta.

Listo, ahora podemos publicar la pgina de Animales en peligro de extincin, sus vnculos aparecen de color rojo oscuro y al colocar el apuntador del ratn sobre cualquiera de ellos, ste automticamente se resaltar.

LABORATORIO DE DIGITACIN

Con apoyo del Cuaderno de Ejercicios de Digitacin, implementa prcticas con el Mecasoft.

Profesor: Registre en su Tabular de Seguimiento de Ejercicios, el avance del alumno.

QU SON LOS MARCOS? Una pgina de marcos es un tipo especial de pgina Web que, cuando se muestra en el explorador, tiene varias reas (marcos). Cada uno de estos marcos puede mostrar una pgina Web diferente. Las pginas de marcos se utilizan mucho para catlogos, listas de artculos o informacin, al hacer clic en un hipervnculo de un marco aparece una pgina en otro marco. Las pginas de marcos no tienen contenido visible, porque se trata nicamente de un contenedor que especifica qu otras pginas Web se deben mostrar en los marcos y cmo mostrarlas. Puede crear una pgina de marcos usando cualquiera de las plantillas de pgina de marcos de Expression Web. En cada una de estas plantillas, la exploracin entre marcos ya est configurada. Algunos exploradores ms antiguos no pueden mostrar pginas de marcos. En lugar de ello, muestran un mensaje de "pgina sin marcos" cuando un visitante abre una pgina de marcos del sitio Web.

CREAR MI SITIO CON MARCOS Vamos a crear la pgina de Apoyando al planeta usando marcos, esta pgina ser un mini sitio con su propio men de enlaces a las pginas que se encontrarn en esa carpeta. Lo primero que haremos es crear la estructura de la carpeta apoyo_planeta, la cual quedar de la siguiente manera:

En la carpeta apoyo_planeta se van a crear las carpetas: acciones, ahorro_energia, estadsticas, imagen, recilar y styles.

Una vez construida la estructura, se deben copiar los archivos del material de apoyo de la clase 11 en la carpeta apoyo_planeta, respetando la estructura establecida en el archivo ZIP. Ahora podemos comenzar a crear el mini sitio de Apoyo al planeta, veamos el proceso. En primer lugar vamos a crear la pgina de marcos, como se dijo anteriormente, sta pgina solo contendr referencias a las pginas del sitio.

Para crear la pgina de marcos se har lo siguiente: 1. De clic en el men Archivo Nuevo... Pgina 2. En el cuadro de dilogo Nuevo seleccione Pginas de marcos, despus seleccione Titular y contenido, de clic en el botn Aceptar.

3. Expression Web crea automticamente el archivo de marcos, el cual tiene (en este caso) tres marcos (divisiones), en cada una de ellas se va a colocar una pgina web.

El marco activo se muestra rodeado de un borde azul.

Las divisiones pueden moverse con el ratn para ampliar o reducir cada uno de los marcos.

4. En el marco superior vamos a colocar la pgina llamada superior.htm, para ello damos clic en el botn Establecer pgina inicial del marco superior. 5. En el cuadro de dilogo de Insertar hipervnculo abrimos la carpeta apoyo_planeta y seleccionamos el archivo superior.htm, y damos clic en el botn Aceptar.

6. De clic derecho en cualquier parte del marco superior, del men contextual seleccione Propiedades del marco, establezca las propiedades como se muestra en la imagen y de clic en el botn Aceptar.

Alto de Tamao del marco en 100 pixeles

Desactivar De tamao ajustable en el explorador.

Ancho y Alto del margen en 0 (cero).

Mostrar barras de desplazamiento: Nunca. 7. Siga los mismos pasos para insertar en el marco de la izquierda la pgina llamada contenido.htm, en este caso, establezca el Ancho de columna a 150 px (en las propiedades del marco), ponga a cero los mrgenes.

8. Inserte el archivo apoyo_planeta.htm en el marco derecho, las propiedades para el ancho y el alto de los mrgenes deben ponerse en cero. 9. Antes de presionar el botn Aceptar en este ltimo paso presione el botn Pgina de marcos 10. En el cuadro de dilogo que se muestra desactive la opcin Mostrar bordes.

Desactive Mostrar bordes

11. Presione el botn Aceptar para cerrar la ventana de Propiedades de la pgina y presione Aceptar nuevamente para cerrar la ventana de Propiedades de marco 12. Guarde la pgina de marcos usando el men: Archivo Guardar y llame apoyo_planeta_marcos.htm al archivo. 13. Publique su pgina web presionando F12. Como puede ver, en una sola ventana del navegador se muestran tres pginas web diferentes, sin embargo, vemos un detalle, el ndice del lado izquierdo solamente es texto, debemos convertir cada texto en hipervnculo y enlazarlo con su pgina correcta.

ENLACES AL MARCO CORRECTO Si creamos un hipervnculo en la pgina de contenido.htm, al dar clic sobre el vnculo, el navegador abrir la pgina nueva en el mismo marco (de la izquierda), pero nosotros requerimos que esa nueva pgina se muestre en el marco de la derecha, esto lo podemos solucionar dndole un nombre a cada uno de los marcos y dirigiendo el enlace al nombre del marco donde queremos que una pgina se muestre. Expression Web nos ahorra parte del trabajo, ya que los marcos de una plantilla tienen un nombre, en este caso cada uno se llama de acuerdo a la tabla siguiente:

Marco Superior Izquierdo Derecho

Nombre dado por Expression Web titular contenido principal

El nombre del marco se puede ver (y modificar) en las Propiedades de marco Nombre del marco

Se van a crear dos hipervnculos: Principal y Reciclar (el primero y el ltimo) ya que son las pginas que tenemos, despus se agregarn las dems. Para crear el hipervnculo a Reciclar realice lo siguiente: 1. Seleccione el texto Reciclar de la pgina de contenido.htm. 2. De clic derecho sobre el texto seleccionado, del men contextual seleccione Hipervnculo 3. En el cuadro de dilogo de Insertar hipervnculo abra la carpeta reciclar y seleccione el archivo reciclar.htm, despus de clic en el botn Marco de destino

4. En el cuadro de dilogo Marco de destino, en Pgina de marcos actual seleccione el marco de la derecha o escriba en Destino el nombre del marco (en este caso principal) y presione el botn Aceptar.

5. Presione el botn Aceptar para crear el hipervnculo. 6. Realice un proceso similar para crear el vnculo de Principal, al dar clic sobre l se debe cargar la pgina apoyo_planeta.htm en el marco principal (recuerde que apoyo_planeta.htm se encuentra en la carpeta apoyo_planeta). 7. Guarde los cambios y publique su pgina web para ver como trabajan los hipervnculos recin creados.

MARCOS EN LINEA, USO DE <IFRAME> Los marcos en lnea son de gran utilidad ya que permiten insertar una pgina web dentro de otra sin necesidad de crear una pgina de marcos, ya que usan una etiqueta llamada <iframe> que abre un espacio en la misma pgina web para que se vea el contenido de otra pgina, se le pueden dar varios usos a esta capacidad, uno de ellos es el que realizaremos a continuacin. Muchas pginas web muestran la fecha y la hora en la que se carg la pgina, esto se puede hacer mediante programacin ASP o ASP.net, java, javascript, Perl, PHP, etc., pero no se preocupe, no vamos a programar pginas web de ese tipo, sin embargo vamos a aadir a nuestra pgina web la capacidad de mostrar esos datos e inclusive la IP de la conexin a Internet de quien este viendo la pgina; cmo es esto posible?, existen muchos sitios web que ofrecen servicios para otros sitios (datos climticos, fecha, hora, direcciones IP, pas de la direccin IP, etc.), estos sitios pueden dar la informacin de forma gratuita o pagando una cuota, para este ejercicio vamos a usar un servicio gratuito que ofrece el sitio del Grupo Educativo ICO (http://www.grupoico.com.mx), este servicio consiste en que se puede cargar un archivo llamado FechaHoraIP.asp que muestra la fecha y hora del servidor de Internet y la IP del navegador.

Para insertar la pgina del Grupo Educativo ICO en el marco superior de nuestra pgina realizaremos lo siguiente: 1. Abra el archivo superior.htm dando doble clic sobre el en el panel Listado de carpetas. 2. Cree una capa y llmela DivFechaHora, colocndola despus del encabezado de MUNDO NUEVO Apoyando a la Ecologa, como muestra la imagen, establezca la altura en 50 px y la anchura en 250 px

3. De clic en el interior de la capa y de doble clic en el icono de Marco flotante que se encuentra en el Cuadro de herramientas.

4. Expression Web inserta una etiqueta <iframe> que se muestra en la pgina web, de clic derecho sobre cualquier parte del marco flotante y del men contextual seleccione Propiedades de marco flotante

5. En el cuadro de dilogo de Propiedades de marco flotante establezca las propiedades de acuerdo a la informacin que muestra la imagen, es muy importante la propiedad Pgina inicial, en ella debe escribir la URL de forma correcta: http://www.grupoico.com.mx/FechaHoraIP.asp

El ancho y el alto se establecen a 250 y 50 pixeles respectivamente, el ancho y alto de los mrgenes se establece en 1 pixel, se desactiva la opcin Mostrar borde y para Barras de desplazamiento se elige: Nunca; una vez que ha dado todos los valores presione el botn Aceptar. Ese nuevo marco incrustado en la pgina superior.htm se enlaza con la pgina web http://www.grupoico.com.mx/FechaHora.asp que muestra la fecha y hora del servidor de Grupo ICO y la direccin IP de la conexin a Internet de quien vea la pgina en ese momento.

CAMBIAR EL ESTILO DE LOS MARCOS Anteriormente se vio la forma de adjuntar una hoja de estilo a una pgina web, no es posible hacer esto con una pgina de marcos, ya que, como se dijo al principio de esta clase, una pgina de marcos solo contiene referencias a diferentes pginas web que se vern simultneamente en el navegador. Sin embargo es posible adjuntar una hoja de estilo de forma individual a cada una de las pginas contenidas en una pgina de marcos, ya conocemos la forma, solo se elige el archivo de la hoja de estilo en el panel de Lista de carpetas, se arrastra y se suelta en la pgina web en la que se desea aplicar. En la carpeta styles que se encuentra dentro de la carpeta apoyo_planeta se encuentran tres hojas de estilo que podemos probar arrastrndolas sobre las pginas superior.htm y contenido.htm.

Aqu podemos ver algunos de los resultados:

Podemos probar los enlaces (hipervnculos) de las pginas Principal y Reciclar para ver como funcionan

CREAR IMGENES CON ROLLOVER. Al navegar en Internet, muchas veces hemos visto pginas que contienen imgenes que al pasar el ratn sobre ellas (rollover) cambian de aspecto, estas imgenes se ocupan mucho al crear botones y mens, para crear ests imgenes interactivas se requieren algunos conocimientos bsicos de programacin y manejo de imgenes, o mas bien, se requeran ya que Expression Web permite realizar el trabajo de forma muy simple, para eso ocupa algo que llama Botones interactivos.

INSERTADO BOTONES INTERACTIVOS. Expression Web facilita la adicin de botones que parecen creados con una herramienta avanzada de edicin de grficos. Es posible cambiar el aspecto de estos botones sin necesidad de modificar el cdigo. Se puede cambiar la configuracin. Tambin puede especificar el estilo, color y tamao de la fuente para todos los estados del botn: original, activable y presionado; despus de agregar un botn, puede vincularlo a otra pgina o a una direccin de correo electrnico. Cuando se agrega un botn interactivo, Expression Web crea los archivos de imagen que lo componen. Al guardar las pginas Web, Expression Web pregunta si se deben guardar tambin los archivos de imagen del botn. En este caso vamos a agregar un botn interactivo a la pgina de contenido.htm para que nos permita regresar a la pgina principal del sitio, tendr un aspecto diferente al que tienen los dems vnculos debido a que ste nos permitir regresar a la pgina principal del sitio. Para crear un botn interactivo realizaremos lo siguiente: 1. En la vista Diseo, coloque el cursor en el lugar en el que desea agregar el botn, en este caso colocamos el cursor en la penltima celda de la tabla que esta en el archivo de contenido, la cual se encuentra vaca. 2. De clic en el men Insertar Botn interactivo

3. En el cuadro de dilogo Insertar botn en la primera pestaa (llamada: Botn), en la lista Botones, haga clic en un estilo, se debe escoger un estilo que combine bien con los colores de las tres hojas de estilo que se crearon, as que escogeremos el estilo llamado: Rectngulo de metal 4 (es de color amarillo), en la propiedad texto escriba: Ir al sitio principal.

4. Junto al cuadro Vnculo, haga clic en Examinar para seleccionar la pgina que desea que se muestre al dar clic en el botn, para nuestro ejemplo se trata de la pgina default.htm que se encuentra en el directorio raz del sitio, suba un nivel, seleccione el archivo default.htm.

5. De clic en el botn Marco de destino y en el cuadro de dilogo que se muestra seleccione: Toda la pgina o en Destino, escriba: _top y de clic en el botn Aceptar.

6. De clic en la pestaa Fuente, y cambie el tamao a 10.

7. De clic en pestaa de Imagen y desactive la casilla Mantener proporciones, despus cambie el Ancho a 150 y de clic en Aceptar

Solo falta guardar el archivo, en el momento en que se presiona el botn guardar, Expression Web avisa que se han creado tres archivos de imagen (para los tres estados del botn: Inactivo, Activo y Presionado) y pregunta si se desean guardar los archivos incrustados, antes de guardarlos se debe cambiar la carpeta destino (debe ser la carpeta imagen que esta dentro de la carpeta apoyo_planeta) para eso damos clic en el botn Cambiar carpeta

Se abre la ventana de Cambiar carpeta y ah se selecciona la carpeta imagen y se da clic en Aceptar.

Se da clic en Aceptar para que Expression Web almacene las imgenes donde se le indic; listo, se ha creado un botn interactivo en la pgina de contenido.htm que al pasar el apuntador del ratn y al dar clic sobre l cambia de apariencia.

ENLACES QUE ABREN VENTANAS. Los vnculos o enlaces que se han creado hasta el momento permiten mostrar una pgina nueva, pero la anterior deja de verse, sin embargo, existen sitios web que cuyos vnculos, al dar clic sobre ellos abren una nueva ventana del navegador (explorador) de Internet en esa ventana se muestra la pgina a la que enlaza ese vnculo, esto permite no perder la pgina original desde la que se hace la llamada a la pgina nueva. Para hacer esto tambin se requiere un poco de programacin, sin embargo Expression Web nos ahorra esta tarea, ya que tambin permite crear vnculos que abren ventanas emergentes o pop-up

Vnculo que abre una ventana emergente.

CREAR VENTANAS DE POP UP. Vamos a crear otro botn interactivo que abrir una ventana emergente del sitio del Instituto Nacional de Ecologa, que depende de la SEMARNAT (Secretara de Medio Ambiente y Recursos Naturales); para crear este botn para ventana emergente o pop-up usaremos la pgina de contenido.htm, en la que realizaremos lo siguiente: 1. En la vista Diseo, coloque el cursor en la ltima celda de la tabla que esta en el archivo de contenido, la cual se encuentra vaca. 2. De clic en el men Insertar Botn interactivo 3. En el cuadro de dilogo Insertar botn en la primera pestaa escogeremos el estilo: Rectngulo de metal 4, en la propiedad texto escriba: Ir al INE. 4. Junto al cuadro Vnculo, haga clic en Examinar para mostrar el cuadro de dilogo de Modificar hipervnculo, en la propiedad Direccin debe escribir la URL del sitio del Instituto Nacional de Ecologa, el cual es: http://www.ine.gob.mx/, a continuacin de clic en Marco de destino

5. En el cuadro de dilogo que se muestra seleccione: Nueva ventana o en Destino, escriba: _blank y de clic en el botn Aceptar.

6. Establezca el resto de las propiedades de las pestaas Fuente e Imagen para que el botn nuevo sea igual al botn anterior. 7. Guarde los cambios, no olvide que Expression Web avisa que se han creado tres archivos de imagen y pregunta si se desean guardar, cambie la carpeta y gurdelos.

Hemos terminado con la clase, solo falta publicar la pgina principal del mini sitio: apoyo_planeta_marcos.htm para ver a los botones interactivos recin creados en accin.

FORMULARIOS NO SOLO DE PAPEL

Todos conocemos los formularios (formas) impresas con espacios donde uno puede escribir informacin; en ms de una ocasin los hemos ocupado para solicitar una tarjeta de crdito, solicitar empleo, abrir una cuenta en el banco, contratar algn servicio de telfono o cable, para inscribirnos en algn curso o asociacin, etc., pues bien, dentro de las pginas web tambin existen los formularios, en este caso no son de papel sino en lnea, pero se ocupan para lo mismo que los de papel: para ser rellenados con informacin. Continuamos con el avance del desarrollo de nuestro mini sitio, en esta ocasin estamos trabajando sobre la pgina de ahorro de energa y deseamos que esta pgina contenga algo para convencer a las personas que visiten la pgina de cambiar los focos normales (incandescentes) por lmparas ahorradoras para que de esa forma contribuyan a evitar un gasto excesivo de energa. Mario, uno de nuestros compaeros del grupo de desarrollo, en sus andanzas por la Internet descubri una pgina en la que proporcionando su estatura y peso la pgina le calculaba su IMC (ndice de masa corporal).

Entonces se le ocurri que se puede hacer algo parecido en la pgina de ahorro de energa: colocar un formulario para que las personas puedan calcular 1 los KiloWattsHoras que sus hogares podran dejar de consumir si usaran focos ahorradores.

KiloWattHora se define como la interaccin de mltiples medios: sonido, texto, voz, vdeo e imgenes.

CREAR FORMULARIOS CON AYUDA DE TABLAS Como le gust la idea, trabajo en la pgina de ahorro de energa para crear un formulario, pero como no saba como hacerlo, solo lleg hasta el punto en el que dispone de una pgina donde ocupa una tabla para colocar su formulario, esta es la pgina que cre Mario.

Mario sabe muy bien que las tablas son muy tiles para tener organizada la informacin as que cre una tabla donde poder meter las partes que le hacen falta para su formulario, es lo mejor, pens y nosotros estamos de acuerdo con l. Es hora de terminar esta pgina, al menos en cuanto a diseo, ya que una cosa es crear un formulario y otra cosa es hacer que funcione. Cada uno de los componentes de un formulario se crea a partir de etiquetas HTML. Los formularios en lnea tienen diferentes controles que sirven para recopilar distintos tipos de informacin, vamos a conocer los ms comunes antes de comenzar incrustar los elementos en la pgina.

CUADROS DE TEXTO Y LISTAS Cuadros de texto Entrada (texto) A los cuadros de texto, en Expression web se les conoce como: Entrada (texto), estos cuadros permiten que el usuario escriba datos diversos, como por ejemplo su nombre, direccin, ciudad, nmero telefnico, etc.

Listas - Cuadros desplegables Las listas, en Expression Web se denominan: Cuadros desplegables se ocupan para que el usuario pueda elegir una opcin de varias posibles, por ejemplo, la lista puede mostrar un desplegado de los estados civiles y el usuario seleccionar el suyo.

BOTONES Y CASILLAS DE VERIFICACION Botones Existen diferentes tipos de botones, cada uno tiene su utilidad, veamos cuales son: Botn de comando Entrada (Botn) Se usa para crear una interaccin con el usuario, por ejemplo para calcular una frmula o mostrar un mensaje.

Botn enviar Entrada (Enviar) Se usa para enviar el formulario al servidor web para que sea procesado, se presiona una vez que se ha llenado el formulario.

Botn restablecer Entrada (restablecer) Se usa para hacer que el formulario regrese a su estado original, borrando todos datos introducidos por el usuario.

Botn de opcin Entrada (botn de opcin) Se usa para escoger una sola opcin de entra dos o ms de ellas.

Casilla de verificacin Entrada (casilla de verificacin) Se usa para activar / desactivar una opcin.

CONSTRUYENDO EL FORMULARIO Lleg el momento de crear el formulario que se ocupar para que el usuario calcule su disminucin de consumo de energa si usa focos ahorradores en lugar de los focos incandescentes. Una vez que hayamos abierto el archivo ahorro_energia.htm que se encuentra en la carpeta del mismo nombre (ahorro_energia), vamos a realizar los pasos siguientes: 1. Seleccione la capa inferior (DivTabla) y de clic en su interior, justo por encima de la tabla.

2. En el cuadro de herramientas expanda los controles de formulario y de doble clic en el icono de Formulario.

Icono de Formulario

Se crea un formulario vaco en la pgina insertndose encima de la tabla.

3. Ahora seleccione la tabla, es decir, seleccione la etiqueta <table> en la parte superior de la ventana de diseo.

Con la tabla seleccionada, tmela y arrstrela para colocarla dentro del rea del formulario, el rea del formulario se muestra de color rojo en la imagen.

Una vez que la tabla se encuentra dentro del formulario podemos comenzar a crear los componentes que deben ir en l.

4. De clic dentro de la celda que esta debajo del encabezado Cantidad. 5. De doble clic en el icono de Entrada (texto) del cuadro de herramientas, esto har que Expression Web cree un cuadro de texto en dicha celda.

6. De clic derecho sobre el cuadro de texto (entrada (texto)) recin creado, del men contextual seleccione: Propiedades de campo de formulario

7. En la ventana de Propiedades de cuadro de texto establezca los valores de Nombre a TxtCantidadIncandescentes y la propiedad Ancho de caracteres establzcala a 2 (dos), de clic en Aceptar.

El siguiente paso es agregar un cuadro desplegable debajo de la celda que dice Potencia (Watts), nos servir para mostrar las potencias ms comunes de los focos incandescentes (40, 60 y 100 Watts), para agregarlo seleccione la celda y de doble clic en el icono de Cuadro desplegable.

Una vez que se agregue, damos clic derecho sobre l y seleccionamos la opcin Propiedades de campo de formulario Se muestra la ventana de Propiedades de cuadro desplegable, en Nombre escriba: CboPotencia, a continuacin seleccione la opcin que ya se encuentra dada de alta y presione el botn Quitar.

Para aadir el primero de los valores que tendr nuestro cuadro desplegable, que ser de 25 Watts, presione el botn Agregar En el cuadro de Agregar opcin de los datos siguientes:

En Opcin escriba 25 Watts, active la casilla Especificar valor: y en Valor escriba 25, mantenga el Estado inicial en No seleccionada y presione el botn Aceptar.

Realice los mismos pasos para agregar las opciones de 40, 60 y 100 Watts.

Una vez que se hayan agregado todas las opciones de clic en el botn Aceptar. Es momento de agregar los siguientes controles de formulario, todos son del tipo Entrada Texto, de acuerdo con la imagen siguiente:

Los nombres de los controles de formulario son los siguientes:

Dispositivo Foco incandescente Ahorrador equivalente Consumo bimestral de iluminacin de KiloWattsHoras Cantidad Potencia Horas de uso KiloWattsHora (Watts) diario bimestre. TxtCantidadIncande CboPotencia TxtHorasDiariasI TxtTotalIncadescente scente ncandescente TxtCantidadAhorrad TxtPotenciaAh TxtHorasDiarias TxtTotalAhorrador ores orrador Ahorrador Diferencia TxtDiferencia

Bien, ya casi hemos terminado de armar el formulario, solo falta incorporar dos botones, uno que calcule y otro que limpie el formulario. Para poner el botn de calcular coloque el cursor despus de la tabla y de doble clic en el icono Entrada (botn), coloque el cursor despus del botn creado y de doble clic en el icono de Entrada (restablecer) para crear el botn de restablecer, despus de clic derecho sobre el botn y del men contextual seleccione Propiedades de campo de formulario, y escriba los datos siguientes:

Y para el botn de restablecer:

QU HACE FALTA PARA QUE FUNCIONE? El formulario ha quedado concluido, presione F12 para publicarlo, como puede ver el cuadro desplegable y el botn Limpiar datos funcionan de forma correcta, sin embargo, el botn de Calcular consumo es el que an no funciona, si lo presionamos no sucede algo, esto es porque para que este tipo de botones funcione es necesaria una poca de programacin, algo que haremos en la clase siguiente.

HACIENDO QUE FUNCIONE MI FORMULARIO En la clase pasada creamos un formulario, sin embargo an no funciona como nosotros lo desearamos, esto es porque, como se dijo en la clase pasada, requiere de una poca de programacin para realizar el clculo del ahorro de energa.

CREACIN DE UN SCRIPT DE CLIENTE Antes de comenzar a programar nuestra funcin, es necesario saber un poco a cerca de la programacin de las pginas web dinmicas e interactivas. Para programar adecuadamente un formulario y los elementos de ste se ocupan lenguajes de script, como por ejemplo: javascript, vbscript, jscript, ecmascript; este tipo de lenguajes se puede ejecutar en dos sitios diferentes: en el cliente o en el servidor. Script de cliente: Un script de cliente se ejecuta en la computadora del usuario que llam la pgina web, estos scripts son tiles para validar informacin, realizar clculos y otras actividades que no requieren enviar informacin a travs de la red. Script de servidor: Se ejecuta en el servidor donde reside la pgina web, antes de que la pgina sea enviada a la computadora que lo solicit, para que se ejecute un script de servidor, es necesario que ste soporte la creacin de pginas web dinmicas con alguno de los lenguajes antes mencionados o con otros lenguajes tales como: PHP, Perl, etc.

En este caso vamos a crear un script de cliente que va a permitir calcular el ahorro de energa en el bimestre, la frmula para hacerlo se muestra en seguida:

Se multiplica por 60 por los dos meses (bimestral) y se divide entre mil porque queremos calcular kilowatts (1 kW = 1000 watts). Abrimos el archivo ahorro_energa.htm en Expression Web, y tambin abrimos el archivo del material auxiliar llamado CodigoScript_Clase14.txt, este archivo contiene el cdigo que se requiere para realizar el clculo, tal cdigo se muestra aqu:

Este cdigo esta escrito en un lenguaje llamado javascript, este lenguaje hace diferencia entre maysculas y minsculas, es decir, para ste lenguaje las variables: TotalAhorrador, Totalahorrador, totalAhorrador, totalahorrador, son diferentes, por lo que es muy importante que los objetos del formulario se llamen tal y como se mostr en la clase pasada, de lo contrario, este cdigo no funcionar. Una vez que se hemos abierto el archivo ahorro_energia.htm vamos a editar su cdigo, para esto damos clic en el botn Cdigo, y despus realizamos los pasos que se describen a continuacin: 1. Debemos buscar el encabezado de la pgina web, recordemos que el encabezado esta delimitado por las etiquetas <head> </head>.

Cuando un lenguaje hace diferencia entre maysculas y minsculas, se dice que es case sensitive

2. Colocamos el cursor antes de </head> y presionamos la tecla Enter tres veces para crea un espacio donde colocar el cdigo. 3. Copiamos el cdigo del archivo y lo pegamos en este espacio, de forma que quede:

Una vez que se ha pegado el cdigo, el paso siguiente consiste en relacionar la funcin Calcula(f) del cdigo javascript con el botn Calcular, para hacerlo, conviene hacer lo que se muestra a continuacin: 1. Busque el cdigo que crea el botn Calcular, debe estar casi al final de la pgina web, su cdigo es similar al cdigo HTML seleccionado.

2. Una vez localizado el cdigo del botn vamos a colocar el cursor casi al final, antes de la diagonal / y ah escribimos el cdigo: onClick=Calcula(this.form); de forma que el cdigo se vea de la siguiente manera:

APLICAR ESTILOS A LOS ELEMENTOS DEL FORMULARIO Antes de publicar la pgina web para saber como funciona el script, es mejor que le apliquemos un estilo a los cuadros de texto para darles una apariencia mejor, adems hemos de impedir que el usuario pueda escribir algo en los elementos del formulario donde se mostrarn los resultados que se calcularon. Para evitar que alguien escriba donde no debe hacerlo se puede ocupar la propiedad readonly (solo lectura), para eso hay que buscarla en el panel de Propiedades de la etiqueta (este panel se encuentra del lado izquierdo de la pantalla) y una vez que se localiza se establece el valor de la propiedad readonly al valor: readonly (si, se llaman igual).

Esto lo haremos con todos los elementos del formulario donde deseamos que el usuario no pueda escribir, como lo muestra la imagen siguiente:

Ahora le aplicaremos un estilo a los cuadros de texto de solo lectura para hacerlos invisibles, de forma que el usuario no intente escribir algo en ellos; bastar con vincular la hoja de estilos que se encuentra en el material de apoyo y que se llama ahorro_energia.css, recuerde que ese archivo debe ser copiado a la carpeta styles que esta dentro de la carpeta apoyo_planeta. Una vez que se haya vinculado la hoja de estilos al archivo, bastar con seleccionar cada uno de los elementos a los que se desee aplicar el estilo y dar doble clic sobre el estilo: ClsSoloLectura que se muestra en panel: Aplicar estilos.

Estilo para aplicar a cada uno de los cuadros de solo lectura.

Cada vez que le aplique ste estilo a uno de los cuadros de texto de solo lectura, parecer que ste desapareci, pero en realidad sigue ah solo que sin borde; despus de que haya terminado, guarde ambos archivos y publique su pgina web de ahorro_energia.htm, escriba algunos valores y presione el botn para calcular el ahorro, si el navegador le muestra alguna advertencia de seguridad, permita el contenido bloqueado.

LABORATORIO DE DIGITACIN

Con apoyo del Cuaderno de Ejercicios de Digitacin, implementa prcticas con el Mecasoft.

Profesor: Registre en su Tabular de Seguimiento de Ejercicios, el avance del alumno.

INSERTANDO ARCHIVOS DE MUSICA. Los sonidos pueden agregar otra dimensin a un sitio Web, con Expression Web puede incrustar un archivo de audio y establecer propiedades para hacer que se reproduzca cuando los visitantes del sitio abran la pgina. Puede establecer las propiedades de modo que el archivo de sonido se reproduzca de manera continua o un nmero de veces determinado. Otra forma de agregar sonido a las pginas Web consiste en proporcionar un hipervnculo al archivo de audio desde la pgina y dejar que los visitantes del sitio decidan si desean reproducir el sonido. Cuando los visitantes del sitio hagan clic en ese vnculo, se abrir el reproductor de audio correspondiente que reproducir el archivo de sonido. Se pueden agregar muchos tipos de archivos de audio a una pgina Web, como por ejemplo: Archivos de onda (*.wav) Archivos de secuenciador MIDI (*.mid) Archivos RealAudio (*.ram; *.ra) Archivos de sonido AIFF (*.aif; *.aifc; *.aiff) Archivos de sonido AU (*.au; *.snd) Archivos Moving Picture Experts Group (*.mpeg) Archivos Microsoft Active Streaming (.*asf)

MUSICA DE FONDO O CONTROLADA Para comenzar con este ejercicio se debe copiar el archivo acciones.htm desde el archivo de apoyo: ExpressionWeb_Clase16.zip en la carpeta acciones, que esta dentro de apoyo_planeta y las imgenes se deben copiar en una carpeta llamada imagen que se crear en la carpeta acciones. Hay dos formas en las que se puede colocar msica en una pgina web, una es como msica de fondo y la otra es con el Windows Media Player, donde se tienen los botones para controlar el sonido. Abra el archivo acciones.htm en Expression Web, para colocar un sonido de fondo (background) en una pgina web, se debe hacer lo siguiente: 1. De clic derecho en un rea libre de la pgina web, en el men contextual seleccione Propiedades de pgina

2. De clic en el botn Examinar de Ubicacin de sonido de fondo, vaya la carpeta sonidos dentro de la carpeta apoyo_planeta\acciones, escoja el archivo llamado amazilia-tzacatl.wav y de clic en el botn Abrir.

3. En la ventana de Propiedades de pgina desactive la casilla de Siempre y en bucle escriba el valor de 1 (uno), de clic en Aceptar.

Se ha insertado el sonido de un colibr (colibr colirufa nombre cientfico: Amazilia tzacatl) como sonido de fondo, para reproducirse una sola vez, en el momento en que se carga la pgina; puede probarlo guardando y publicando su pgina web.

Tambin es posible incluir en una pgina web una instancia del reproductor de Windows (Windows Media Player) y con l se puede controlar un archivo de sonido, veamos como se hace esto: Primero, vamos a crear una carpeta llamada sonido dentro de apoyo planeta y ah copiamos el archivo IslandOfLife.mid, este archivo forma parte del material de apoyo.

1. Abra la pgina apoyo_planeta.htm en Expression Web. 2. Cree una capa y colquela despus del texto: Porque an podemos hacer mucho por nuestro hogar. Y llmela: DivMusica.

3. De clic dentro de la capa recin creada y despus de clic en el botn Cdigo. 4. Se muestra el cdigo HTML de la pgina, con el cursor en la posicin entre <div> y </div>.

5. Abrimos el archivo CodigoHTML_Audio.txt, copiamos su contenido y lo copiamos en la pgina web, regresamos al modo de Diseo.
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="Player" style="height: 45px"> </object> width="320"

6. Ahora se muestra en la pgina el componente del reproductor de Windows Media.

7. Damos doble clic sobre l para acceder a sus propiedades, damos clic en el botn Examinar y buscamos el archivo IslandOfLife.mid que acabamos de copiar, se pueden configurar opcionalmente el modo de disposicin de los controles, el volumen, balance y otros parmetros, damos clic en el botn Aplicar.

Guardamos la pgina y la publicamos, veremos que el archivo de msica se reproduce automticamente y tenemos la capacidad de controlarlo. UN VIDEO EN MI SITIO Es posible incluir un video en nuestra pgina web, esto podemos hacerlo de varias formas, veremos una muy simple y rpida, apoyndonos de un sitio web que es especialista en manejo de videos: YouTube.

YouTube usa un formato Adobe Flash para servir su contenido. Es muy popular gracias a la posibilidad de alojar vdeos personales de manera sencilla, YouTube aloja una variedad de clips de pelculas, programas de televisin, vdeos musicales, y vdeos caseros (a pesar de las reglas de YouTube contra subir vdeos con copyright, este material existe en abundancia). Los enlaces a videos de YouTube pueden ser tambin puestos en blogs y sitios web, como en nuestro caso. Para este ejercicio usaremos el archivo de noticias (news.htm) que se encuentra dentro de la carpeta news de la carpeta raz del sitio web, tambin necesitamos abrir el archivo llamado EnlacesYouTube_Video.txt del material de apoyo, en el se encuentra el cdigo HTML para incrustar un video que se descargue desde YouTube. Una vez que hemos abierto el archivo news.htm, procedemos de la forma siguiente: 1. Eliminamos el prrafo que se encuentra a continuacin del ttulo Noticias. 2. Eliminamos el ttulo de Recursos adicionales y su prrafo. 3. Editamos el primer ttulo de evento para que muestre: INFORME IPCC.

4. Eliminamos el texto que dice Descripcin del evento (se muestra en cursiva) y seleccionamos el texto que se encuentra despus, hasta antes del siguiente ttulo. 5. Cambiamos la vista a modo Cdigo. 6. Copiamos el cdigo HTML que esta a continuacin de INFORME IPCC del archivo EnlacesYouTube_Video.txt.
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/TsBu8PIxZ9E&rel=0&color1=0x234900&col or2=0x4e9e00&border=0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/TsBu8PIxZ9E&rel=0&color1=0x234900&color 2=0x4e9e00&border=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

7. Regresamos al modo de diseo y realizamos los mismos pasos para los dos videos restantes. Estos cdigos para incrustar video del archivo EnlacesYouTube_Video.txt se pueden obtener en la pgina de You Tube. (http://www.youtube.com). Una vez que se han colocado los tres videos, se puede guardar la pgina y publicarla para ver como funciona.

RESOLUCIN Y CALIDAD VS TAMAO (PESO) Como en Google Video y otros sitios de vdeos, hay quejas acerca de la calidad de los videos de YouTube. Un problema es que, en bastantes clips, el audio y el vdeo no estn sincronizados, esto depende del formato del archivo original. En general, todos los vdeos deben ocupar un espacio en disco no mayor a los 100 Mb y deben tener una duracin menor o igual a 10 minutos, tiene una tolerancia extra de 58 segundos de vdeo. Todos los vdeos son convertidos a una resolucin de 450 x 337 a 30 imgenes por segundo. Siempre que se trata con videos para Internet se tiene la misma encrucijada, a mayor calidad y resolucin, mayor tamao de un archivo y viceversa, as que se debe mediar para hacer un archivo pequeo pero con calidad y resolucin aceptables.

INCLUIR ANIMACIONES DE FLASH En una pgina web tambin se pueden incluir animaciones creadas en Flash, en este caso se insertar un juego, para este ejemplo se usar el archivo CELSIUS.swf que se proporciona como parte del material de apoyo, este archivo se insertar en la pgina ahorro_energia.htm.

Para proceder, primero se debe crear una carpeta llamada flash dentro de la carpeta apoyo_planeta y ah se copiar el archivo CELSIUS.swf.

Abrimos el archivo ahorro_energia.htm y realizamos la siguiente actividad: 1. Insertamos una capa y la colocamos despus del formulario, la llamamos: DivJuegoFlash.

2. Damos clic dentro de la capa y vamos a la vista de cdigo. 3. Abrimos el archivo CodigoHTML_Flash.txt copiamos el cdigo y lo copiamos en el espacio entre <div id="DivJuegoFlash"> cdigo flash aqu </div> (donde dice cdigo flash aqu). 4. Regresamos a la vista de diseo y damos doble clic sobre el rectngulo que dice: aplication/x-shockwave-flash para ver sus propiedades

5. En el cuadro de dilogo de Propiedades de pelcula en formato Flash dejamos los valores por defecto que se muestran en la pestaa Apariencia, asegurndonos que el tamao sea de 518x400 pixeles.

6. De clic en la pestaa General y de clic en el botn Examinar de Direccin URL de origen:, vaya a la carpeta flash y abra el archivo CELSIUS.swf, de clic en el botn Abrir, y despus de clic en el botn Aceptar

Regrese a modo de diseo y podr apreciar que ya se encuentra incrustado el juego de CELSIUS.swf, guarde el archivo y publquelo. Puede ser que Internet Explorer le pida autorizacin para ejecutar contenido activo.

En esta clase vamos a ver como se puede incorporar contenido a una pgina web que hayan sido creados con otros programas de Microsoft, especficamente con Office.

Los procedimientos son muy sencillos, veremos como insertar contenido de Excel, Word y PowerPoint. CMO INCLUIR INFORMACION DE EXCEL? Expression Web no nos permite importar directamente hojas de Excel, sin embargo, podemos exportar una hoja de Excel como documento HTML y despus este documento si que podemos importarlo en Expression Web, veamos como se hace, en este caso ocuparemos el archivo estadisticas.xlsx Vamos a dividir el trabajo en dos partes, la primera consiste en guardar la informacin del archivo estadsticas.xlsx en forma de pgina web, para hacer eso, hay que seguir estos pasos: 1. Abra el archivo estadsticas.xlsx

Como puede ver, este archivo contiene tablas y grficas, las tablas tienen frmulas para calcular los porcentajes y las grficas se obtienen a partir de los datos que hay en las tablas. 2. De clic en el Botn de Office Guardar como Otros formatos.

3. En el cuadro de dilogo de Guardar como seleccione la carpeta estadsticas que esta dentro de apoyo_planeta y en Guardar como tipo: seleccione Pgina Web (*.htm; *.html) y seleccione Volver a publicar: Hoja, de clic en el botn Guardar.

La segunda parte es an ms simple, solo se debe abrir Expression Web, expandir la carpeta de apoyo_planeta estadisticas y abrir el archivo estadsticas.htm.

En la vista diseo seleccionamos el primer encabezado de Estadsticas y lo eliminamos, guardamos el archivo y lo publicamos.

INSERTAR ARCHIVOS, TEXTO E IMGENES DE WORD. Uno de los colaboradores del sitio de la pgina ecolgica escribi un artculo muy interesante, pero lo hizo en Word ya que el no ha usado Expression Web, sin embargo es posible incorporar a una pgina web texto e imgenes que se encuentren en un archivo de Word.

Para esta nueva pgina es necesario crear una opcin ms en el men de Apoyo al planeta, as que agregamos una carpeta nueva a la que llamaremos cambio_climatico, tambin necesitamos abrir el archivo Contenido.htm para agregar un vnculo ms.

Una vez abierto el archivo contenido.htm, colocamos el cursor en Estadsticas, damos clic derecho y en el men contextual seleccionamos Insertar Filas en la parte superior.

Se crea una nueva fila entre Ahorro de energa y Estadsticas, en ella escribimos Cambio climtico.

Ahora vamos a crear una nueva pgina web en la carpeta cambio_climatico; la seleccionamos, damos clic derecho y del men contextual seleccionamos Nueva HTML.

A este archivo nuevo lo llamaremos cambio_climatico.htm.

El siguiente paso consiste en importar el archivo de Word y las imgenes que nos proporcion el colaborador, el archivo se llama CambioClimatico.docx, Las imgenes las guardamos en una carpeta llamada imagen que crearemos dentro de la carpeta cambio_climatico.

Para insertar el texto del archivo de Word debemos realizar los pasos siguientes: 1. Abra el archivo cambio_climatico.htm dando doble clic sobre l. 2. De clic en el men Insertar Archivo. 3. En el cuadro de dilogo seleccione el archivo CambioClimatico.docx. Expression web importar el archivo y al finalizar la importacin mostrar el resultado, como puede ver, se crean los espacios para las imgenes pero stas no aparecen.

As que debemos modificar las propiedades de cada una de las imgenes para que se muestren correctamente, para hacer esto de doble clic sobre la primera imagen.

Damos clic en el botn Examinar y seleccionamos el archivo glaciar-peritomoreno-1.jpg que se encuentra dentro de \cambio_climatico\imagen y damos clic en el botn Aceptar; hacemos lo mismo para las dos imgenes restantes, la segunda imagen es atmosfera.jpg y la tercera es bosque.jpg. Una vez hecho esto guardamos la pgina y la publicamos para ver su aspecto en el navegador.

ENLACES A ARCHIVOS DE POWERPOINT. Por ltimo vamos a ver como se puede hacer un enlace a una presentacin de PowerPoint, como en el caso de Excel, Expression no puede importar directamente la informacin de un archivo de PowerPoint, sin embargo, podemos exportar una presentacin de PowerPoint a pgina web, debemos hacer el enlace en dos pasos, el primero consiste en guardar la presentacin de PowerPoint como pagina web, para ello se realiza lo siguiente: 1. Abra el archivo de PowerPoint cambio_climatico_pp.pptx. 2. De clic en el botn de Office Guardar como Otros formatos.

3. En el cuadro de dilogo de Guardar como a. Guardar en: seleccione la carpeta de cambio_climatico que esta dentro de apoyo_planeta. b. En Guardar como tipo: seleccione Pgina Web (*.htm; *.html) c. De clic en el botn Publicar

4. En el cuadro de dialogo de Publicar como pgina web a. desactive la casilla de Mostrar notas del orador b. presione el botn de Opciones Web

5. En el cuadro de dilogo de Opciones Web a. en Colores seleccione Texto negro sobre fondo blanco. b. De clic en Aceptar

6. De clic en el botn Publicar para cerrar el cuadro y convertir la presentacin en una pgina web; PowerPoint crea un archivo principal y una carpeta que contiene el resto de los archivos. El segundo paso es muy sencillo, consiste en agregar un enlace a la pgina web cambio_climatico.htm para que abra la pgina de la presentacin de PowerPoint, para eso realizamos lo siguiente: 1. De doble clic en el archivo cambio_climatico.htm para abrirlo. 2. Seleccione el prrafo vacio que se encuentra despus del ttulo. 3. De clic derecho y del men contextual seleccione Hipervnculo.

4. En el cuadro de dilogo de Insertar hipervnculo a. Escriba el texto: Cambio climtico (Presentacin en PowerPoint). b. Seleccione el archivo cambio_climatico_pp.htm que acaba de crear con PowerPoint. c. De clic en el botn Aceptar

5. Guarde la pgina web. Con estos pasos se ha agregado un hipervnculo a la pgina web de cambio climtico, al publicarla y dar clic sobre el enlace, se puede ver la pgina de la presentacin en PowerPoint.

POR QU UNOS SITIOS SON MAS RPIDOS QUE OTROS?

Como recordar Internet es el conjunto de todas las redes interconectadas a lo largo y ancho del mundo, cada una de las redes tiene enlaces que trabajan a diferentes velocidades, tienen diferentes computadoras, sistemas operativos y soportan diferentes cantidades de trfico, esto significa que cada sitio en Internet tiene caractersticas nicas que lo hacen mas o menos eficiente, por eso, las pginas alojadas en un sitio web pueden cargarse mas rpido que las que se encuentran en otro, sin embargo, hay un conjunto de sugerencias que podemos tomar en cuenta para que al servidor le tome poco tiempo enviar nuestras pginas a los navegadores. Se deben usar siempre imgenes comprimidas (*.jpg, o *.gif), no se recomienda usar imgenes *.bmp ya que estas no estn comprimidas. Las imgenes deben ser del mismo tamao del que se van a mostrar. No colocar muchas imgenes en cada pgina. Usar sonidos (*.mp3), animaciones (flash) y/o videos (*.wmv) de forma moderada. Si una pgina es muy grande, conviene dividirla en pginas ms pequeas y colocar hipervnculos para ir accediendo a cada parte. Subir las pginas a servidores web rpidos y con un buen ancho de banda.

Estas recomendaciones permitirn que las pginas de nuestro sitio web se carguen rpidamente.

CREACION DE UN MAPA DEL SITIO. Todo buen sitio en Internet debe tener un mapa que le facilite al usuario la bsqueda de alguna pgina en particular, un mapa es una pgina especial en la cual se muestran enlaces a cada una de las pginas web del sitio, as que vamos a crear un mapa para nuestro sitio web.

Hay varias formas para crear un mapa del sitio, en este caso vamos a usar tablas, imgenes e hipervnculos, nos basaremos en el archivo mapa.htm que se incluye con el material de apoyo de la clase 18. Los pasos para crear el mapa son: 1. Cree una carpeta llamada mapa en el directorio raz del sitio. 2. Cree una carpeta llamada imagen dentro de la carpeta mapa. 3. Copie a la carpeta mapa el archivo mapa.htm que se provee con el material de apoyo. 4. Copie los archivos Lin1.gif, Lin2.gif y Lin3.gif a la carpeta imagen. 5. En Expression Web de doble clic en el archivo mapa.htm para abrirlo. Como puede ver, el archivo tiene ya todos los textos que hacen referencia a cada una de las pginas web del sitio, sin embargo, solo el texto Pgina ecolgica es un hipervnculo, como ejercicio debe completar convertir cada uno de los textos restantes en un hipervnculo y hacer que se enlace a la pgina correcta.

Seleccione el texto, de clic derecho y del men contextual seleccione Hipervnculo y en el cuadro de dialogo busque y seleccione el archivo correcto.

Una vez que todos los vnculos han sido colocados, guarde la pgina publquela, el nico texto que no se convierte en hipervnculo es el de Mapa del sitio (esta pgina).

Ahora debemos incluir esta pgina del mapa dentro del archivo master.dwt para que se pueda mostrar en el men de todas las pginas. As que realizamos los pasos que se describen a continuacin 1. De doble clic en el archivo master.dwt para abrirlo. 2. Seleccione el vnculo de P+F, de clic derecho y del men contextual seleccione Hipervnculo.

3. Modifique el hipervnculo de P+F (preguntas mas frecuentes) para que muestre el texto Mapa y al dar clic sobre el se cargue el archivo mapa/mapa.htm Recuerde que debe modificar los dos enlaces, el superior y el inferior.

4. De clic en el botn Aceptar. 5. Guarde el archivo master.dwt y recuerde que debe actualizar el resto de los archivos asociados con l.

VERIFICACION DE TODOS LOS ENLACES. Antes de publicar un sitio web, se deben revisar todos los enlaces que hay en l para garantizar que un usuario tenga acceso a todas las pginas del sitio y tambin se debe verificar que las pginas tengan todos sus enlaces a imgenes, sonidos, videos y animaciones de forma correcta. Expression web tiene una herramienta que nos facilita este trabajo, ya que revisa de forma automtica todos los enlaces e informa de enlaces rotos y de algunos problemas que pueden existir al cargar algunos de ellos. Antes de verificar nuestro sitio, debemos crear los enlaces que faltan en la pgina de contenido.htm que contiene el ndice de las pginas que pertenecen al mini sitio de Apoyando al planeta, para concluir los enlaces vamos a realizar lo siguiente: 1. Abrimos el archivo de apoyo_planeta_marcos.htm. 2. En el marco de contenido seleccionamos cada uno de los textos y los convertimos en hipervnculos, enlazndolos a su pgina respectiva, sealando como marco de destino el marco Principal. Para referencia se muestran las imgenes siguientes, recuerde despus de seleccionar el archivo y colocar el texto debe presionar el botn de Marco de destino y en l seleccionar el marco principal.

Una vez que todas las ligas han sido creadas, es hora de verificar los enlaces del sitio web, para lograrlo, se deben realizar los pasos siguientes: 1. De clic en el men Sitio Informes Resumen del sitio.

2. En la pantalla se muestra el resumen del sitio, se debe elegir Hipervnculos.

Expression web realizar entonces la revisin de cada uno de los vnculos de todo el sitio web e informar de su estado, tambin se pueden revisar los hipervnculos internos (los que se hacen del mismo sitio) y los externos, que son de este sitio a un sitio externo. Si Expression web no encuentra un archivo al que hace referencia un hipervnculo, entonces lo marca como roto, se deben verificar estos vnculos rotos para eliminarlos o corregir el nombre del archivo o la carpeta donde esta. Se puede ver el resultado del estado de los hipervnculos del sitio en la imagen siguiente, en este caso todo esta correcto.

VERIFICACION DE COMPATIBILIDAD La verificacin de compatibilidad comprueba si hay errores de cdigo en las pginas y si el cdigo es incompatible con los esquemas que se especifiquen, por ejemplo puede verificar si una pgina se ver bien (con todos sus componentes) en Internet Explorer (5.0, 6.0). Puede generar un informe que compruebe slo archivos concretos o todo un sitio Web. Para crear un informe de compatibilidad realice lo siguiente: 1. De clic en el men Herramientas Informes de compatibilidad

2. En el cuadro de dilogo del Comprobador de compatibilidad. a. Seleccione: Comprobar en: Todas las pginas b. Comprobar compatibilidad con: Internet Explorer 6.0 c. De clic en el botn Comprobar

Expression Web verificar todo el cdigo de las pginas seleccionadas (en este caso de todo el sitio) y mostrar un informe con posibles errores en la compatibilidad o sintaxis, si las pginas revisadas no tenan problemas de compatibilidad, entonces la ventana de resultado se mostrar vaca.

Pero si encuentra algn inconveniente, entonces muestra el error, la pgina donde ocurre y algunos datos ms que ayudarn a resolver el problema.

LABORATORIO DE DIGITACIN

Con apoyo del Cuaderno de Ejercicios de Digitacin, implementa prcticas con el Mecasoft.

Profesor: Registre en su Tabular de Seguimiento de Ejercicios, el avance del alumno.

EVALUACIN FINAL

No olvide promediar las prcticas de sus alumnos con la calificacin obtenida en el PC Test.