Unidad 1: Introduccin a los conceptos bsicos de sitios Web Tema 1: Conceptos y trminos relacionados con los sitios y servidores

Web Introduccin En el mundo actual es casi es imposible trabajar sin computadoras y mucho menos imaginar el no tener una conexin a Internet. La Internet lleg y se apoder de todos, sin importar edad o condicin social. En los estratos donde las familias no pueden comprar una computadora, es comn ver negocios que rentan su servicio y los cuales siempre tienen clientes. Pero, que es Internet? y que es lo que todo mundo ve a travs de la Internet? Qu es Internet? La palabra Internet es la abreviacin de International Network es decir una "Red Internacional" y su definicin es: "un conjunto de redes locales, regionales, nacionales e internacionales conectadas para intercambiar datos y distribuir trabajos de procesamiento". Dichas redes se pueden conectar porque usan el mismo lenguaje de conexin. Por medio de la Internet se pueden conectar millones de computadoras en todo el mundo a travs de medios de transmisin como: lneas telefnicas, cables, satlites y otros medios de telecomunicacin. Esta red ha cambiado al mundo ya que a hecho posible que se pueda compartir informacin de muy diferente tipo como imgenes, texto, sonidos, animaciones y videos en cuestin de segundos, todo esto a travs del World Wide Web.

Qu es el World Wide Web o WWW? El WWW es un sistema de informacin global, pblico e independiente, mediante el cual un usuario cualquiera puede acceder a documentos HTML almacenados en diferentes servidores ubicados en cualquier parte del mundo, pudiendo saltar de un servidor a otro de forma instantnea mediante los enlaces de hipertexto contenidos en las pginas web. El World Wide Web o WWW "es una red de computadoras basadas en Internet que permiten que las personas puedan accesar informacin que se encuentra guardada en otra computadora". Los principales componentes del WWW son los clientes y servidores Web. Los clientes Web son computadoras que cuentan con software de computadora conocidos como "navegadores", Netscape Communicator e Internet Explorer de Microsoft, que permiten realizar peticiones de pginas a un servidor Web. El servidor Web es una computadora remota en la cual se ejecuta el software de servidor Web y en la cual se encuentran almacenados miles de sitios Web. De esta forma, es posible que las personas que se conectan a dichos servidores Web puedan ver los sitios Web que ah se encuentran. Los sitios Web son grupos de documentos o pginas que se encuentran alojados en servidores Web y que muestran informacin sobre cualquier cosa que te puedas imaginar. Puedes encontrar sitios que muestran desde un sencillo proyecto a nivel personal hasta super proyectos que muestran, almacenanan y administran las transacciones de grandes organizaciones y universidades. A un documento sencillo que se encuentra dentro de un sitio Web se le conoce con el nombre de pgina Web. Los documentos o pginas de los sitios Web se encuentran almacenados en

computadoras con una gran capacidad de almacenamiento y que alcanzan altas velocidades (servidores Web). Un servidor puede guardar miles de documentos de muchos sitios Web diferentes. Cuando tu te conectas a un sitio Web en particular, tu computadora se conecta a un servidor y recibe los documentos del sitio Web a travs de Internet. Arquitectura cliente-servidor En toda peticin de una pgina web intervienen diferentes entidades: por un lado, el programa navegador en el host que realiza la solicitud y por otro lado un programa servidor alojado en un host remoto (denominado servidor web). Ambos programas/equipos se comunican entre s por medio del acceso a Internet que facilita un PSI (Proveedor de Servicios de Internet) y de las extensiones de red que proporciona una determinada compaa. Para establecer la conexin necesaria entre ambas mquinas se utiliza una arquitectura de interconexin de redes, generalmente la arquitectura TCP/IP, en la que los datos en la transmisin van pasando sucesivamente por diferentes dispositivos de red (generalmente routers) desde el host emisor al host destino. Este sistema de comunicacin, en el que un host realiza peticiones que son atendidas y contestadas por otro remoto, se denomina arquitectura cliente-servidor. El host que realiza la peticin es el cliente, mientras que el host que contesta dicha peticin es el servidor.

Los servidores, son los encargados de almacenar los archivos HTML, junto con las imgenes, archivos CSS, archivos javascript, necesarios para la visualizacin correcta de la pgina web. Un mismo servidor web puede estar atendiendo a la vez a diferentes navegadores cliente. Para poder realizar de forma adecuada las operaciones entre el cliente y el servidor, se utilizan lenguajes estndar que fueron previamente acordados, llamados protocolos de comunicacin. Por ejemplo, los clientes y servidores Web usan el protocolo denominado HTTP por sus siglas en ingls de Hypertext Transfer Protocol (Protocolo de transferencia de hipertexto) para enviar y recibir documentos de texto plano en formato ASCII. Para poder identificar un documento o recurso de Internet de forma nica fue necesario asignar a cada uno de ellos una especie de direccin, que se denomin URL Uniform Resource Locator (Lcalizador Uniforme de Recursos), que indica tanto la localizacin exacta del recurso como el protocolo necesario para su transferencia. La forma genrica de la URL de una pgina web es: http://www.servidor.dominio/carpeta/pagina.html ejemplo: http://www.htmlweb.net/redes/redes.html Es muy sencillo realizar una conexin a un servidor para poder abrir las pginas Web que se encuentran almacenadas ah, basta con abrir el navegador (Netscape o Explorer), escribir la direccin de red del servidor o su URL en el navegador, oprimir la tecla de <intro> y en cuestin de segundos se tendr en la pantalla el contenido de dicha direccin.

Proceso de transferencia de pginas Web?

El usuario especifica en el cliente web (navegador) la direccin (URL) de la pgina que desea consultar El cliente establece la conexin con el servidor web a travs del protocolo HTTP El cliente solicita la pgina o el objeto deseado El servidor busca la pgina solicitada en su sistema de archivos. Si la encuentra, la enva al cliente; en caso contrario, devuelve un cdigo de error. El cliente interpreta los cdigos HTML y muestra la pgina al usuario. Se cierra la conexin. Cmo se desarrollan las pginas Web? Las pginas Web se desarrollan usando el lenguaje de programacin llamado HTML (Hypertext Markup Language) o Lenguaje de Marcacin de Hipertexto, el cual consiste en un conjunto de instrucciones llamadas "etiquetas" que le indican al navegador como mostrar un documento en hipertexto. Los archivos en HTML son almacenados en formato de texto (cdigo ASCII), el cual es universal, lo que hace que dicho cdigo pueda ser entendido por las diferentes plataformas computacionales. Cmo afectan los navegadores en el diseo de las pginas Web? El HTML es compatible con varias plataformas, lo que permite que distintas computadoras puedan visualizar un documento de Web, ya sea que se est trabajando con Windows, Macintosh o UNIX. Sin embargo no es una herramienta WYSIWYG (What You See Is What You Get), "lo que ves es lo que obtienes", ya que su intencin inicial fue la de expresar la estructura del documento, no las caractersticas del formato. Cuando se va a desarrollar un proyecto Web es importante considerar el navegador en el que se va a desplegar el sitio Web, ya que cada navegador interpreta de manera diferente las etiquetas del cdigo, ocasionando que los resultados puedan variar de navegador a navegador. Por esta razn, es muy comn ver anuncios en sitios Web que le indican al usuario el navegador y la versin que ms le conviene usar para obtener los mximos resultados deseados. Debido a esta situacin, es muy importante que las pginas sean probadas en diferentes navegadores y en distintas computadoras antes de ser publicadas para asegurar que se muestre lo que se desea. A pesar de todo, esto no afecta el trabajo de desarrollo del mismo, aunque puede variar un poco la forma en que los diferentes navegadores muestren la pgina, pero el contenido es el mismo. Segn Tim Berners-Lee, mejor conocido como el arquitecto de la WWW, cuando se disea un sitio Web se deben tomar en cuenta los siguientes criterios acerca de los navegadores que utilizarn los usuarios:

Disear el sitio tomando en cuenta el mnimo comn denominador. Es decir, no utilizar la ltima versin de HTML, sino la anterior. Esto es con la idea de evitar problemas con la versin que manejan las diferentes computadoras. Disear con la tecnologa ms reciente. Es importante que los usuarios utilicen el navegador ms reciente para aprovechar al mximo las ventajas que este ofrece, pero tambin se debe considerar que esto puede ocasionar prdidas de usuarios. Disear para un navegador especfico. Es recomendable que el sitio se realice para ser usado en varios navegadores, solamente en casos en que no sea posible, el autor despliega un mensaje en el que indica el navegador y la versin en la que se recomienda abrir el sitio. Disear para la mayora de los navegadores. Esto es lo ms recomendable para poder captar el mayor nmero de usuarios, pero esto implica dedicar ms tiempo para probar que el sitio funcione en las diferentes plataformas. Cul es la mejor herramienta para crear pginas y sitios Web? El cdigo HTML para desarrollar un sitio Web puede ser generado de diferentes formas. Por ejemplo a travs del NotePad cuando se trabaja en Windows y su equivalente en Macintosh. El TeachText es una forma muy sencilla de aprender HTML ya que permite introducir cada etiqueta de forma manual. Tambin existen paquetes que te permiten editar y generar cdigo HTML como lo son el FrontPage de Microsoft y el DreamWeaver de Macromedia y una ltima opcin es utilizar versiones de procesadores de texto que convierten documentos de texto a cdigo HTML, el nico problema que existe con estos ltimos, es que el cdigo HTML que generan no es el HTML estndar lo que produce problemas en el momento de la publicacin, por lo que no es una opcin muy recomendable. Cualquiera que sea la herramienta que se elija, no se debe olvidar que cada navegador interpreta de manera diferente las etiquetas del cdigo HTML y que los resultados pueden variar cuando el sitio se muestra en la ventana del navegador, tampoco se debe perder de vista que el HTML es un cdigo sencillo que no fue diseado para desplegar texto y espaciamientos complicados. Es muy comn que en el diseo de pginas se utilicen diferentes herramientas, por ejemplo se puede usar software de edicin de HTML para generar la estructura bsica del sitio o elementos complejos del sitio. A pesar de que existen diversas herramientas disponibles en el mercado para crear pginas, es importante tener conocimientos bsicos del cdigo HTML para poder crear pginas que no tengan problemas al momento de publicarlas en los diferentes servidores. En este curso nos enfocaremos al diseo de pginas utilizando una herramienta de edicin de cdigo HTML.

Unidad 1: Introduccin a los conceptos bsicos de sitios Web Tema 2: Aspectos importantes en la planeacin y diseo de un sitio Web Planeacin de un sitio Web Cuando se va a desarrollar un proyecto es importante y necesario definir primeramente el objetivo que se desea lograr con el sitio Web, por ejemplo: dar a conocer los productos de una empresa, fomentar la comunicacin entre los miembros de la compaa, facilitar el papeleo y la

comunicacin entre los clientes de una organizacin, aumentar el nmero de clientes o simplemente darnos a conocer a nivel mundial!!!! No importa el tipo de sitio Web que se quiera desarrollar, es importante conocer algunos de los principios del diseo de pginas Web, ya que el xito de un sitio Web depende de una conjuncin armnica de los diferentes elementos que conforman el sitio y un buen diseo, permite planear no solamente lo que la gente ve, sino lo que queremos que la gente piense y sienta al navegar por el sitio Web. Un buen punto de partida sera contestarnos algunas preguntas con respecto al sitio Web que se planea construir: Porqu se quiere construir el sitio Web? o Cual es el motivo por el cual se quiere construir el sitio Web. Promocin?, aumentar ventas?, atraer clientes?, satisfaccin personal?, etc. Cul es el objetivo del sitio? o Lo primero que se debe definir claramente en un enunciado conciso son los objetivos principales que se esperan lograr con el sitio Web, por ejemplo, "El sitio Web de MiSitio tiene como objetivo dar a conocer al pblico todos los productos que vende la empresa". Cmo se piensa medir el xito del sitio Web? o Que instrumentos de medicin usaremos para determinar si el sitio Web est logrando el objetivo. Por ejemplo, si el objetivo del sitio Web es "atraer clientes a nuestra empresa", se pueden disear encuestas en donde los clientes indiquen el medio por el cual se enteraron de la existencia de la empresa. Quienes son los usuarios a quien va dirigido el sitio Web? o En este punto se deben preguntar Quien va a entrar al sitio Web?, es decir, se deben investigar y definir claramente las caractersticas de dichas personas en todos los aspectos. Algunas preguntas que pueden ayudar acerca del auditorio del sitio Web son: son jvenes?, son personas adultas?, qu actividad realizan?, cuales son sus ingresos?, cual es su nivel acadmico?. Es evidente que no se podrn obtener respuestas exactas, pero dependiendo del objetivo del sitio Web se puede enfocar el desarrollo del mismo y poder atraer ms gente al sitio y lograr los objetivos definidos. Qu factores tcnicos podran afectar la publicacin del sitio? o Se debe pensar en todos los aspectos que pueden afectar el buen funcionamiento del sitio. Algunos elementos del sitio como imgenes, tablas, videos, animaciones, pueden provocar problemas en el momento de la publicacin, por lo que es necesario considerar posibles alternativas de solucin. Una vez definidos e investigados estos aspectos, ya se tienen suficientes elementos para empezar el diseo del sitio. Diseo de un sitio Web Una vez que se hayan definido los objetivos del sitio y se han investigado los aspectos que podran afectarlo, se debe empezar a disear la estructura que tendr el sitio Web. Para poder realizar esta actividad, se debe visualizar y organizar los elementos que formarn parte del mismo, todava no se entra a detalles especficos de contenido, solamente se definen de manera general las pginas que se van a incluir. Esta etapa se puede llevar a cabo a travs de dinmicas como la "lluvia de ideas", entrevistas con las personas y departamentos involucrados. Por ejemplo, una

tienda departamental, cuyo objetivo del sitio es "Dar a conocer a todos los usuarios de la Web los productos que tenemos en venta", podra tener la siguiente estructura jerrquica de las pginas.

Clasificacin de los sitios Web Una vez definidos los aspectos anteriores y el contenido general del sitio Web, se debe determinar el tipo de sitio que se necesita desarrollar para cumplir con el objetivo. Existe una gran variedad de sitios Web, pero la mayora de ellos caen dentro de las siguientes categoras: Cartelera (anuncio): Este tipo de sitios se utilizan para crear presencia en la Web de una empresa comercial. En la mayora de los casos son meramente informativos y no permiten interaccin con el usuario. Muchos de los sitios empiezan en esta categora y conforme el sitio va tomando auge y va madurando, le van agregando ms funciones que permiten interaccin e inclusive transacciones en lnea cuando el sitio est consolidado. Publicacin: Este sitio es muy comn en instituciones del rea de comunicacin como peridicos y revistas que muestran una versin en lnea de sus productos. Estos sitios muestran grandes volmenes de informacin y tienen cierto grado de interaccin con el usuario. Organizaciones de inters pblico o general: Estos sitios son muy utilizados por organizaciones sin fines de lucro, que quieren compartir con los usuarios la informacin que poseen. El contenido comn de este tipo de sitios son noticias, informacin reciente, cursos, a travs de hipervnculos, direcciones o "downloads" de archivos. Galera virtual: Este tipo de sitio es muy utilizado por personas u organizaciones que desean mostrar imgenes, msica, libros. Comercio electrnico: Este tipo de sitios est tomando mucho auge, ya que permiten a los usuarios tener un acceso rpido a los productos y servicios de las empresas a travs de transacciones electrnicas que ahorran tiempo y esfuerzo y aumentan el nmero de personas que lo visitan. Despus de haber definido el tipo de sitio Web que ms conviene a la organizacin, es tiempo de pensar ya en el contenido detallado de cada una de las pginas que formarn parte del sitio. Para poder realizar esta actividad es importante conocer algunos aspectos importantes que han sido probados por muchos diseadores de sitios Web y que permitirn captar ms fcilmente la atencin de los usuarios. Componentes de una pgina Web Una pgina Web tpica generalmente consta de 3 partes como se muestra en la siguiente figura:

Encabezado (header): en esta parte de la pgina se colocan texto y/o imgenes que identifican al patrocinador del sitio web, el autor, el propsito de la pgina y una barra de botones

que permite la navegacin entre las diferentes pginas que conforman el sitio. Muchos diseadores colocan publicidad en esta rea porque es lo primero que se despliega al momento de subir la pgina. El encabezado es muy importante, ya que un sitio web capta la atencin en los primeros segundos en que ste se est desplegando, por lo que su contenido debe atraer la atencin para que el usuario quiera seguir viendo el sitio. Cuerpo (body): en esta parte de la pgina se coloca la informacin ms relevante y propia del sitio y cualquier otra informacin que capte la atencin de los visitantes. Es conveniente utilizar colores, imgenes, animaciones, videos, hipervnculos o cualquier otro elemento que llamen la atencin del pblico. Muchos diseadores dividen este espacio en 3 partes y colocan la informacin ms relevante en la parte central y la informacin relacionada en los espacios laterales. Pie de pgina (footer): en esta parte de la pgina es conveniente colocar informacin acerca de los medios para contactarse con los responsables del sitio (nombre y/o direccin electrnica), adems de controles que faciliten la navegacin a travs del sitio. Antes de empezar a disear el contenido de cada una de las pginas es conveniente tomar en cuenta los siguientes aspectos. Principales aspectos a considerar en el diseo de un sitio Web El diseo de una pgina Web no es complejo, el problema crece cuando se quieren relacionar todas las pginas que conforman el sitio Web de tal forma que puedan ser vistas como parte importante del conjunto, por tal motivo, el diseo de cada pgina es muy importante. Existen muchos aspectos que se deben considerar, algunos que son importantes y en la que la gran mayora de los diseadores coinciden son los siguientes: APARIENCIA La pgina Web debe ser sencilla y fcil de manejar. Los primeros segundos al momento de visitar una pgina son los ms importantes, ya que de ellos depende de que el usuario decida o no quedarse en ella. En los primeros 30 segundos se deben cumplir con los siguientes aspectos para no perder la atencin del usuario. En los primeros 10 segundos el usuario debe saber donde est. Se deben utilizar ttulos cortos y concisos para identificar la pgina. En los siguientes 10 segundos, debe saber para que est en la pgina. Se debe especificar claramente el propsito de la pgina. En los ltimos 10 segundos el usuario debe saber como navegar.

Las pginas deben estar organizadas de manera clara. Se deben utilizar encabezados y listas para que el usuario pueda encontrar fcilmente el tema que busca.

 El sitio debe tener barras de navegacin, que agrupen en un solo lugar los botones que llevan al usuario a las diferentes pginas relacionadas. Se debe resaltar la informacin ms importante, por ejemplo, cambiar el color, enfatizar con negritas, modificar el tamao, teniendo cuidado en no excederse ya que el usuario no podr entonces identificar lo que es importante. Es muy til utilizar tablas, grficas, delimitadores o separadores para agrupar la informacin relacionada Se deben utilizar esquemas de colores que contrasten y que no distraigan la atencin del usuario. Hay que evitar utilizar fondos que interfieran con el texto o que dificulten la lectura del mismo. Se debe evitar escribir prrafos muy largos. Esto produce cierta desilusin en el lector. Se debe revisar la ortografa y la gramtica del contenido. La mala ortografa dar la imagen de que no es un sitio serio y ahuyentar a los usuarios Se debe tratar de incluir un tema por pgina. Si el tema es muy largo y no cabe en la pgina, se debe reorganizar el contenido en temas o subtemas sencillos de leer. EJECUCIN Las pginas deben ser cortas, ya que las pginas largas toman ms tiempo en desplegarse y se puede perder la atencin del usuario. El tiempo de respuesta de la pgina debe ser corto, una medida estndar es que la pgina no debe tomar ms de 30 segundos en cargarse, de ser mayor, el usuario se cansar o pensar que algo est mal y abandonar la pgina. UNIFORMIDAD Se debe tratar de utilizar el mismo formato en todas las pginas del sitio, es decir los mismos colores, distribucin del contenido, botones, barras de navegacin de tal forma que el usuario sienta que todo est diseando de la misma manera. Es recomendable usar Temas (themes) o plantillas predefinidas (templates) para mantener la consistencia entre las pginas del sitio VALIDEZ Se debe actualizar constantemente el contenido del sitio, de esta manera el sitio atraer ms usuarios. Es conveniente modificar la fecha de la ltima actualizacin para que el usuario sienta que el sitio est en constante revisin. Se debe verificar que todos los hipervnculos internos y externos funcionen correctamente. Se debe evitar utilizar elementos que funcionan solamente en ciertos navegadores. Por ejemplo, las marquesinas (marquees) de FrontPage que solo funcionan en Explorer. Realiza pruebas en diferentes navegadores y computadoras para verificar que el sitio se cargue adecuadamente. IMGENES El uso de imgenes es muy importante, ya que levantan la apariencia del sitio, pero se debe tratar de no incluir demasiadas imgenes porque tardan mucho tiempo en ser cargadas y eso desespera al usuario.

Se pueden definir estndares para el manejo de imgenes, por ejemplo no incluir imgenes que ocupen ms de 50 KB de tamao y que tengan como mximo 450 pixeles de ancho para asegurar que puedan ser vistas en la mayora de las pantallas Es recomendable utilizar texto alterno como "screen tips" para que aparezcan en lugar de la imagen en situaciones donde no es posible cargar la imagen. HIPERVNCULOS Se debe tratar de incluir solamente aqullos hipervnculos que sean necesarios, es decir aqullos que lleven a pginas que contienen informacin relevante e importante. El uso excesivo de ellos distrae la atencin del usuario. Es recomendable utilizar un estndar en las barras de navegacin, es decir que siempre tengan las mismas formas (conos) y se encuentren ubicados en el mismo lugar. INFORMACIN FINAL Es importante inclur siempre la informacin acerca de la persona responsable del diseo de la pgina Web, esto har que el usuario sienta ms confianza cuando use el sitio. Se debe incluir siempre la fecha de creacin y la fecha de la ltima actualizacin de la pgina. Esto le d validez al sitio y el usuario se siente ms confiado de la informacin que se presenta. El diseo de pginas y sitios Web es una labor interminable, ya que siempre habr algo que es factible de mejorar, pero para empezar, el uso de los aspectos anteriores es un buen punto de partida. Durante la prctica, los diseadores siempre van descubriendo nuevos aspectos que se deben modificar. Unidad 1: Introduccin a los conceptos bsicos de sitios Web Tema 3: Planeacin y diseo de un sitio Web. Caso Prctico Despus de haber revisado los principales aspectos que se deben considerar en la planeacin y diseo de un sitio Web, es hora de poner en prctica estos conocimientos. Para llevar a cabo esta actividad tomaremos como ejemplo el caso de Jorge Smith. CASO: Jorge Smith es el dueo de la fbrica de calzado "El zapatito" que se localiza en Len, Guanajuato. El Zapatito es una empresa que fabrica calzado para diferentes segmentos de mercado (damas, caballeros y nios) y maneja una gran variedad de estilos que estn clasificados de acuerdo al tipo de calzado. En la siguiente tabla se muestran los diferentes tipos de calzado que fabrica: Segmento de mercado Tipos de calzado que fabrica sandalias zapato sport zapato deportivo zapato de vestir zapato sport zapato deportivo zapato de vestir

Damas

Caballeros

Nios

zapato escolar zapato deportivo zapato de vestir

Jorge Smith vende sus productos a diferentes distribuidores que se encuentran localizados en todo el pas. La empresa enva trimestralmente a sus clientes un catlogo por correo y el cliente le enva va fax una relacin de las cantidades de cada modelo que desea comprar, adems cada vez que decide realizar una promocin, se les tiene que enviar una carta al cliente y en muchas ocasiones se les tiene que hablar por telfono para informales de las novedades. Este proceso se est volviendo muy lento y muy costoso y est ocasionando grandes prdidas a la empresa. Despus de darle muchas vueltas al problema Jorge lleg a la conclusin de que la mejor solucin para disminuir sus costos y la prdida de clientes es a travs de la creacin de un sitio Web que le permita mostrar a sus clientes todos los modelos de calzado que tiene disponibles y de esta manera eliminar el costo de imprimir el catlogo. Adems, en un futuro, cuando el sitio Web se consolide, los clientes podrn realizar sus pedidos en cualquier momento y no estar dependiendo de que el catlogo les llegue por correo. Aprovechando el acceso que tendrn sus clientes, desea tener un espacio en el que constantemente se estn colocando avisos acerca de las novedades y promociones que tiene la empresa. Aplicando todos los conceptos vistos en la seccin anterior, vamos a desarrollar la planeacin y diseo del sitio Web que mejor convenga a Jorge Smith. Vamos a empezar contestando las siguientes preguntas: Porqu se quiere construir el sitio Web? El principal motivo de construir el sitio Web es el de dar a conocer de una manera rpida y actual los diferentes modelos de zapatos que fabrica El Zapatito y reducir los costos de promocin de los mismos. Cul es el objetivo del sitio? Debido a que el problema que se quiere resolver es el de mostrar al cliente los diferentes modelos de zapatos, el objetivo fundamental del sitio Web sera: "Mostrar a sus clientes los diversos productos que fabrica la empresa". Cmo se piensa medir el xito del sitio Web? Para poder medir si el sitio Web est logrando su cometido, se llevarn a cabo las siguientes acciones: o Se llevar un control de todos los pedidos que se realizaron a travs del sitio Web. o Se llevar un control diario del nmero de visitantes que entran al sitio Web, para ver las tendencias. o Se aplicar una encuesta en el que el cliente evaluar las ventajas y desventajas de usarel sitio Web. o Se realizarn estadsticas acerca del nmero de clientes, pedidos y ventas antes y despus de la implantacin del sitio Web. o Se realizarn comparaciones de los costos operativos antes y despus de la implantacin del sitio Web.

Quienes son los usuarios, a quien va dirigido el sitio Web? Los productos que vende la empresa van dirigidos a todos los segmentos de mercado, es decir damas, caballeros y nios, pero la finalidad del sitio es que sea utilizado por sus clientes, que son los distribuidores de calzado del pas, por lo que se puede definir que los usuarios meta son: personas adultas (hombres y mujeres), que tienen negocios, que perciben altos ingresos y que pueden tener un alto sentido crtico.

Qu factores tcnicos podran afectar la publicacin del sitio? Debido que el objetivo es mostrar los diferentes modelos de zapatos, el sitio Web deber contener muchas imgenes que deben tener buena resolucin y que pueden producir serios problemas en el momento que se quiera abrir el sitio. En este aspecto se tienen que tomar medidas que disminuyan la carga del sitio. El siguiente paso en el proceso, consiste en disear la estructura general que tendr el sitio Web. Esta actividad se debe realizar tomando en cuenta la forma en que se desea que el cliente encuentre los zapatos que busca. Tomando en cuenta la tabla que muestra los diferentes tipos de calzado que se fabrican para los diferentes segmentos de mercado, se podra crear un sitio cuya pgina principal muestre los aspectos ms relevantes de la empresa y tener pginas adicionales que muestren los estilos de calzado clasificados por segmentos de mercado y despus por tipo de calzado. Adems se puede agregar una pgina adicional que muestre las promociones que tiene la compaa. La estructura jerrquica del sitio Web podra quedar as:

Por ltimo, despus de haber definido la estructura jerrquica que tendr el sitio Web, se debe definir el tipo de sitio Web que ms conviene desarrollar en base al objetivo definido. Como el objetivo principal del sitio consiste en mostrar a sus clientes todos los productos que tiene la empresa y, como en la fase inicial no se realizarn los pedidos va electrnica, el tipo de sitio que ms conviene utilizar es el de cartelera, ya que solo desean mostrar sus productos sin tener interaccin con el usuario. Quiz en un futuro, si el sitio Web funciona exitosamente el sitio Web se puede transformar a un sitio de la categora de comercio electrnico. Finalmente, antes de empezar el diseo detallado de cada una de las pginas que formarn parte del sitio Web, la empresa tiene en puerta un problema muy fuerte, el cual consiste precisamente en el manejo de las imgenes, ya que para que el sitio cumpla con su objetivo, se deben incluir muchas imgenes con muy buena resolucin ya que de esto depende el pedido del cliente. Por lo que desde ahora se deben enfocar en la bsqueda de una solucin que les permita lograr su objetivo. Algunas actividades que deben realizar son: Tomar fotografas de todos los modelos de zapatos y buscar la manera de poder reducir el tamao de estas sin perder su resolucin. Una alternativa sera guardar las fotografas en un formato muy ligero, por ejemplo en JPG. Mostrar un catlogo con fotografas en miniatura y que cuando el cliente desee verlas ms a detalle, cargar una fotografa similar con mayor definicin. Como se puede apreciar, el diseo de un sitio Web es un proceso que implica tomar en cuenta muchos detalles antes de empezar su desarrollo computacional, el xito del mismo depende de los resultados de este proceso por lo que no se deben alarmar si esta etapa les consume mucho tiempo. En la unidad 2 se estudiar la forma de poder implantar este diseo en un sitio Web.

Unidad 2: Cmo crear un sitio Web a travs de un editor de cdigo Tema 1. Introduccin a FrontPage para crear un sitio Web En el mdulo anterior se vieron las principales consideraciones que se deben tomar en cuenta para disear y desarrollar un sitio Web y se mencion que existen 3 herramientas bsicas que permiten construir pginas Web: HTML, fue el primer lenguaje y el mas usado que permite desarrollar sitios Web. Editores de cdigo, que son paquetes de software que facilitan el desarrollo a travs de la edicin y generacin de cdigo HTML. Procesadores de texto con caractersticas especiales que convierten el texto a cdigo HTML. Como se mencion, es muy comn utilizar una combinacin de herramientas en el desarrollo de sitios, pero en esta ocasin utilizaremos FrontPage debido a la sencillez que ofrece. Qu es FrontPage? FrontPage es un paquete desarrollado por Microsoft y cuyo objetivo es facilitar el desarrollo de pginas y sitios Web. Una ventaja que ofrece es que utiliza un editor WYSIWYG (What You See Is What You Get) lo que permite que se produzcan pginas Web sin necesidad de tener conocimientos previos del cdigo HTML, por el contrario el paquete lo genera de manera automtica. FrontPage ofrece herramientas que permiten administrar los sitios Web a travs de carpetas que pueden ser organizadas para almacenar los elementos utilizados en los sitios, adems permite importar y exportar archivos. La publicacin de los sitios Web creados en FrontPage es muy sencilla, el nico requisito es que la computadora cuente con el software de servidor Web y las extensiones de FrontPage (FrontPage Server Extensions), las cuales habilitan las herramientas de administracin de FrontPage. Para unificar los conceptos, cuando se mencione el trmino sitio WEB nos referimos al conjunto de carpetas que contienen pginas Web y todos los elementos que se incluyen en ellas como: imgenes, grficas, videos y bases de de datos, en cambio PGINA WEB es un documento independiente que forma parte del sitio. El software de servidor de Web funciona como si fuera un archivero electrnico el cual permite los sitios Web puedan ser accedidos desde Internet. Cada carpeta en la jerarqua de carpetas de un servidor Web se deriva de la carpeta principal o raz. Cuando un navegador manda la direccin de la carpeta o el URL, el servidor carga el archivo que se encuentra en dicha direccin. Comnmente el nombre del archivo de dicha direccin es index.htm o default.htm, dependiendo del servidor de Web que se est utilizando, generalmente se usa html en los ambientes de Unix y Microsoft y htm en el ambiente de las computadoras personales. Cmo empezar a trabajar con FrontPage?

Figura 1: Cmo iniciar FrontPage 1. Selecciona el botn Start o Inicio de la barra de tareas 2. Selecciona la opcin All Programs o Todos los programas del men Inicio 3. Selecciona la opcin Microsoft Office, el cual muestra los paquetes de software que forman parte de Office (FrontPage forma parte de Office) 4. Finalmente escoge la opcin de Microsoft OfficeFrontPage 2003 (este proceso puede variar un poco de computadora a computadora). El proceso se muestra en la figura 1. Al terminar aparece la pantalla inicial de FrontPage, como se ve en la figura 2.

Figura 2: Pantalla inicial de FrontPage Como se aprecia, aparece una pantalla con una hoja en blanco para empezar a escribir los elementos que formarn parte de una pgina del sitio Web que se va a desarrollar. Como se aprecia en la figura, en la parte inferior aparecen 4 vistas, las cuales nos permiten visualizar de diferente manera el contenido de la pgina. Por omisin aparece seleccionada la vista Design. A continuacin se explican cada una de las vistas de las pginas: Design: en la vista de diseo, es donde podemos introducir el contenido de una pgina de la misma manera en que trabajamos con un procesador de texto. Split: muestra una pgina dividida en dos partes, en la cual, la mitad de la pgina permite escribir el contenido de la misma (vista Design) y la segunda mitad, nos muestra el cdigo en html que se est generando. Code: nos muestra el cdigo en html de la pgina web que se est desarrollando. En esta vista se pueden introducir o editar las instrucciones en html. Preview: nos muestra una vista final de cmo se visualizar la pgina en el momento en que esta sea publicada en un servidor. En este caso, la pgina no forma parte de un sitio (es una pgina independiente), por lo que antes de empezar a desarrollar el contenido de la pgina debemos definir el sitio Web que desarrollaremos.

Cmo crear un sitio Web. Para empezar a desarrollar el sitio Web, es necesario haber realizado con anterioridad la planeacin y el diseo del mismo de tal forma que se genere como resultado un plano de la estructura jerrquica que tendr el sitio y y de esta forma poder reflejarlo en FrontPage. Tomaremos como ejemplo el ejercicio usado en el mdulo anterior, en el cual despus de haber analizado e investigado todas las variantes, se lleg a la estructura jerrquica siguiente:

Figura 3: Estructura Jerrquica de la empresa "El Zapatito" En nuestro ejemplo vamos a desarrollar un sitio a la medida. Despus de haber entrado a FrontPage realiza lo siguiente: 1. Selecciona del men File la opcin New, en la parte derecha de la pantalla aparece elPanel de tareas o Task pane, en donde se muestran las diferentes opciones que existen para crear una pgina nueva o un nuevo sitio Web. Selecciona la opcin One page web site

Figura 4: Cmo crear un sitio web de una pgina 2. Aparece una ventana que nos muestra los diferentes tipos de sitios que se pueden crear. Diferentes tipo de sitios que se pueden crear

Plantilla One Page Web

Descripcin Crea un sitio web que contiene una pgina en blanco llamada index.htm, la cual es la pgina inicial del sitio. Corporate Presence Wizard Crea un sitio web que contiene pginas ejemplo que se pueden personalizar para una compaa. Customer Support Web Crea un sitio web que contiene pginas ejemplo para compaas que proporcionan soporte a los clientes, particularmente para compaas de software. Database Interface Wizard Crea un sitio web que se puede conectar a una base de datos de la cual se pueden agregar, ver, actualizar y borrar registros. Discussion Web Wizard Crea un sitio web que contiene un grupo de discusin con la secuencia de la misma, una tabla de contenidos y capacidades de bsqueda de texto. Empty Web Crea la estructura de carpetas de un sitio web sin pginas. Import Web Wizard Crea un sitio web que contiene pginas que se importan de otros lugares, tales como otro sitio web o del disco duro. Personal Web Crea un sitio web que contiene pginas ejemplo que una persona puede personalizar para promover sus intereses y sitios web favoritos. Project web Crea un sitio web que contiene pginas ejemplo para una lista de miembros, programacin, estatus y un archivo de discusin relacionados a un proyecto especfico. SharePoint-based Team Web Site Crea un sitio web con herramientas que pueden ser utilizadas por un grupo de personas que trabajan juntas en un proyecto. Incluye un calendario, una biblioteca para compartir documentos, una lista de tareas y una lista de contactos. 3. En la pantalla que aparece, haz clic en el cono que dice One Page Web para crear un sitio Web que contendr una pgina y escribe C:\Mis documentos\My Webs\ElZapatito en el recuadro que dice Specify the location of the new web (esta es la direccin completa dentro de tu computadora en la que deseas guardar el sitio Web que se esta creando. ElZapatito es el nombre del sitio) y haz clic en OK.

Figura 5: Creacin de un sitio web Esto har que FrontPage cree un sitio Web de una pgina llamado ElZapatito, el cual tendr una pgina llamada index.htm, que ser la pgina principal del sitio web o home page. Recuerda que esta pgina ser la primera que se muestre en el navegador en el momento que el sitio web sea publicado en Internet, por lo que es importante que no la borremos o le cambiemos el nombre. El sitio Web tendr la siguiente apariencia.

Figura 6: Sitio Web El Zapatito Vistas de FrontPage. Como se aprecia, en la parte inferior de la ventana del sitio, aparecen las diferentes vistas que FrontPage proporciona para visualizar y administrar los archivos, carpetas e hipervnculos que forman los sitios Web que se crean en l. Para tener acceso a ellas, se debe oprimir el botn de cada vista. A continuacin se describen brevemente cada uno de ellos. Vista Folders: como ya se mencion un sitio Web est compuesto de folderes que agrupan los diferentes elementos que forman el sitio. En esta vista se puede apreciar la jerarqua de carpetas que forman el sitio Web. El folder principal es el folder del sitio Web y de ah se derivan todos los folders necesarios. FrontPage agrega por definicin dos folders cada vez que se crea un sitio, el folder _private y el folder images.

La creacin y eliminacin de carpetas es muy sencilla.

Vista Remote Web Site: sincroniza los archivos entre este sitio web y otro sitio web remoto. Vista Reports: en esta vista se muestra un listado de los archivos, hipervnculos y otros elementos del sitio Web que nos permite llevar una mejor administracin del sitio Web y analizar su contenido. Vista Navigation: esta vista muestra la estructura de navegacin que tiene el sitio Web, es decir la forma en que estn integradas las pginas que forman parte del sitio. Vista Hyperlinks: esta vista muestra un panorama general de todos los hipervnculos que existen entre las pginas Web del sitio. Vista Tasks: en esta vista se puede llevar un control de todas las tareas que se necesitan realizar cuando se est desarrollando un sitio Web. Esta vista permite agregar tareas, asignarle prioridades, definir responsables y finalmente, cuando la tarea es terminada, es posible borrarla.

El uso de estas vistas depende en gran medida de la manera en que se les asigne la importancia que cada una tiene para una mejor administracin de las actividades necesarias para desarrollar el sitio Web. Posteriormente se har referencia a ellas. Cmo obtener ayuda en FrontPage? FrontPage incluye un muy amplio sistema de ayuda que nos proporciona informacin acerca de los diferentes comandos e instrucciones. Los pasos para obtener ayuda son: 1. Haz clic en el botn de la barra de herramientas, oprime la tecla F1 o selecciona la opcin Microsoft Office FrontPage Help del men Help.

Cualquiera de las opciones que hayas escogido, aparecer el asistente de ayuda,

2. Escribe el tema sobre el cual deseas obtener ayuda. El nico inconveniente es que debes escribir el tpico en ingls. Escribe Open Web y haz clic en el botn de Aparecer una lista con los diferentes tpicos que existen para ese tema. .

3. Selecciona el tema especfico que deseas consultar y aparecer informacin detallada acerca de dicho tema. Haz clic en el botn de Open a web page y aparecer la informacin existente sobre dicho tema.

5. Una vez que hayas ledo la informacin, haz clic en el botn Close para salir del sistema de ayuda. FrontPage tambin proporciona ayuda a travs del World Wide Web si ests trabajando conectado a Internet: 1. Haz clic en el men de Help 2. Selecciona la opcin Office on the web 3. Se establece la conexin con el sitio web de FrontPage Cmo cerrar un sitio Web? Una vez que el sitio Web fue creado, su manejo es tan simple como el manejo de cualquier archivo. Cuando se termina de trabajar con el sitio, debes cerrarlo y en ese momento FrontPage

guarda inmediatamente los cambios en l sin necesidad de que el usuario tenga que hacerlo. 1. Haz clic en el men de File 2. Haz clic en la opcin Close Site 3. Haz clic en File y despus en Exit Se cierra el sitio y se cierra FrontPage. Cmo abrir un sitio Web que ya existe? Los sitios Web se pueden abrir de diferentes maneras, pero la manera ms comn es: 1. Haz clic en el men de File 2. Haz clic en la opcin Open Site 3. Busca el sitio Web que deseas abrir y seleccinalo Si se quiere abrir un sitio Web que ya est publicado en Internet se deben seguir los siguientes pasos: 1. Haz clic en el men de File 2. Haz clic en la opcin Open Site 3. Escribe la direccin completa o URL en el cuadro de texto Site Name En cualquiera de los dos casos se abre el sitio Web en pantalla listo para ser editado. En esta seccin se vio como crear un sitio Web y como obtener ayuda, en la siguiente seccin empezaremos a trabajar con el manejo y la edicin de pginas.

Figura 1: Cmo iniciar FrontPage 5. Selecciona el botn Start o Inicio de la barra de tareas 6. Selecciona la opcin All Programs o Todos los programas del men Inicio 7. Selecciona la opcin Microsoft Office, el cual muestra los paquetes de software que forman parte de Office (FrontPage forma parte de Office) 8. Finalmente escoge la opcin de Microsoft OfficeFrontPage 2003 (este proceso puede variar un poco de computadora a computadora). El proceso se muestra en la figura 1. Al terminar aparece la pantalla inicial de FrontPage, como se ve en la figura 2.

Figura 2: Pantalla inicial de FrontPage Como se aprecia, aparece una pantalla con una hoja en blanco para empezar a escribir los elementos que formarn parte de una pgina del sitio Web que se va a desarrollar. Como se aprecia en la figura, en la parte inferior aparecen 4 vistas, las cuales nos permiten visualizar de diferente manera el contenido de la pgina. Por omisin aparece seleccionada la vista Design. A continuacin se explican cada una de las vistas de las pginas: Design: en la vista de diseo, es donde podemos introducir el contenido de una pgina de la misma manera en que trabajamos con un procesador de texto. Split: muestra una pgina dividida en dos partes, en la cual, la mitad de la pgina permite

escribir el contenido de la misma (vista Design) y la segunda mitad, nos muestra el cdigo en html que se est generando. Code: nos muestra el cdigo en html de la pgina web que se est desarrollando. En esta vista se pueden introducir o editar las instrucciones en html. Preview: nos muestra una vista final de cmo se visualizar la pgina en el momento en que esta sea publicada en un servidor. En este caso, la pgina no forma parte de un sitio (es una pgina independiente), por lo que antes de empezar a desarrollar el contenido de la pgina debemos definir el sitio Web que desarrollaremos. Cmo crear un sitio Web. Para empezar a desarrollar el sitio Web, es necesario haber realizado con anterioridad la planeacin y el diseo del mismo de tal forma que se genere como resultado un plano de la estructura jerrquica que tendr el sitio y y de esta forma poder reflejarlo en FrontPage. Tomaremos como ejemplo el ejercicio usado en el mdulo anterior, en el cual despus de haber analizado e investigado todas las variantes, se lleg a la estructura jerrquica siguiente:

Figura 3: Estructura Jerrquica de la empresa "El Zapatito" En nuestro ejemplo vamos a desarrollar un sitio a la medida. Despus de haber entrado a FrontPage realiza lo siguiente: 4. Selecciona del men File la opcin New, en la parte derecha de la pantalla aparece elPanel de tareas o Task pane, en donde se muestran las diferentes opciones que existen para crear una pgina nueva o un nuevo sitio Web. Selecciona la opcin One page web site

Figura 4: Cmo crear un sitio web de una pgina 5. Aparece una ventana que nos muestra los diferentes tipos de sitios que se pueden crear. Diferentes tipo de sitios que se pueden crear Plantilla One Page Web Corporate Presence Wizard Customer Support Web Descripcin Crea un sitio web que contiene una pgina en blanco llamada index.htm, la cual es la pgina inicial del sitio. Crea un sitio web que contiene pginas ejemplo que se pueden personalizar para una compaa. Crea un sitio web que contiene pginas ejemplo para compaas que proporcionan soporte a los clientes, particularmente para compaas de software. Crea un sitio web que se puede conectar a una base de datos de la cual se pueden agregar, ver, actualizar y borrar registros. Crea un sitio web que contiene un grupo de discusin con la secuencia de la misma, una tabla de contenidos y capacidades de bsqueda de texto. Crea la estructura de carpetas de un sitio web sin pginas. Crea un sitio web que contiene pginas que se importan de otros lugares, tales como otro sitio web o del disco duro. Crea un sitio web que contiene pginas ejemplo que una persona puede personalizar para promover sus

Database Interface Wizard

Discussion Web Wizard

Empty Web Import Web Wizard

Personal Web

intereses y sitios web favoritos. Project web Crea un sitio web que contiene pginas ejemplo para una lista de miembros, programacin, estatus y un archivo de discusin relacionados a un proyecto especfico. SharePoint-based Team Web Site Crea un sitio web con herramientas que pueden ser utilizadas por un grupo de personas que trabajan juntas en un proyecto. Incluye un calendario, una biblioteca para compartir documentos, una lista de tareas y una lista de contactos. 6. En la pantalla que aparece, haz clic en el cono que dice One Page Web para crear un sitio Web que contendr una pgina y escribe C:\Mis documentos\My Webs\ElZapatito en el recuadro que dice Specify the location of the new web (esta es la direccin completa dentro de tu computadora en la que deseas guardar el sitio Web que se esta creando. ElZapatito es el nombre del sitio) y haz clic en OK.

Figura 5: Creacin de un sitio web Esto har que FrontPage cree un sitio Web de una pgina llamado ElZapatito, el cual tendr una pgina llamada index.htm, que ser la pgina principal del sitio web o home page. Recuerda que esta pgina ser la primera que se muestre en el navegador en el momento que el sitio web sea publicado en Internet, por lo que es importante que no la borremos o le cambiemos el nombre. El sitio Web tendr la siguiente apariencia.

Figura 6: Sitio Web El Zapatito Vistas de FrontPage. Como se aprecia, en la parte inferior de la ventana del sitio, aparecen las diferentes vistas que FrontPage proporciona para visualizar y administrar los archivos, carpetas e hipervnculos que forman los sitios Web que se crean en l. Para tener acceso a ellas, se debe oprimir el botn de cada vista. A continuacin se describen brevemente cada uno de ellos. Vista Folders: como ya se mencion un sitio Web est compuesto de folderes que agrupan los diferentes elementos que forman el sitio. En esta vista se puede apreciar la jerarqua de carpetas que forman el sitio Web. El folder principal es el folder del sitio Web y de ah se derivan todos los folders necesarios. FrontPage agrega por definicin dos folders cada vez que se crea un sitio, el folder _private y el folder images. La creacin y eliminacin de carpetas es muy sencilla.

Vista Remote Web Site: sincroniza los archivos entre este sitio web y otro sitio web remoto. Vista Reports: en esta vista se muestra un listado de los archivos, hipervnculos y otros elementos del sitio Web que nos permite llevar una mejor administracin del sitio Web y analizar su contenido. Vista Navigation: esta vista muestra la estructura de navegacin que tiene el sitio Web, es decir la forma en que estn integradas las pginas que forman parte del sitio. Vista Hyperlinks: esta vista muestra un panorama general de todos los hipervnculos que existen entre las pginas Web del sitio. Vista Tasks: en esta vista se puede llevar un control de todas las tareas que se necesitan realizar cuando se est desarrollando un sitio Web. Esta vista permite agregar tareas, asignarle prioridades, definir responsables y finalmente, cuando la tarea es terminada, es posible borrarla.

El uso de estas vistas depende en gran medida de la manera en que se les asigne la importancia que cada una tiene para una mejor administracin de las actividades necesarias para desarrollar

el sitio Web. Posteriormente se har referencia a ellas. Cmo obtener ayuda en FrontPage? FrontPage incluye un muy amplio sistema de ayuda que nos proporciona informacin acerca de los diferentes comandos e instrucciones. Los pasos para obtener ayuda son: 2. Haz clic en el botn de la barra de herramientas, oprime la tecla F1 o selecciona la opcin Microsoft Office FrontPage Help del men Help.

Cualquiera de las opciones que hayas escogido, aparecer el asistente de ayuda,

3. Escribe el tema sobre el cual deseas obtener ayuda. El nico inconveniente es que debes escribir el tpico en ingls. Escribe Open Web y haz clic en el botn de Aparecer una lista con los diferentes tpicos que existen para ese tema. .

4. Selecciona el tema especfico que deseas consultar y aparecer informacin detallada acerca de dicho tema. Haz clic en el botn de Open a web page y aparecer la informacin existente sobre dicho tema.

6. Una vez que hayas ledo la informacin, haz clic en el botn Close para salir del sistema de ayuda. FrontPage tambin proporciona ayuda a travs del World Wide Web si ests trabajando conectado a Internet: 4. Haz clic en el men de Help 5. Selecciona la opcin Office on the web 6. Se establece la conexin con el sitio web de FrontPage Cmo cerrar un sitio Web? Una vez que el sitio Web fue creado, su manejo es tan simple como el manejo de cualquier archivo. Cuando se termina de trabajar con el sitio, debes cerrarlo y en ese momento FrontPage

guarda inmediatamente los cambios en l sin necesidad de que el usuario tenga que hacerlo. 4. Haz clic en el men de File 5. Haz clic en la opcin Close Site 6. Haz clic en File y despus en Exit Se cierra el sitio y se cierra FrontPage. Cmo abrir un sitio Web que ya existe? Los sitios Web se pueden abrir de diferentes maneras, pero la manera ms comn es: 4. Haz clic en el men de File 5. Haz clic en la opcin Open Site 6. Busca el sitio Web que deseas abrir y seleccinalo Si se quiere abrir un sitio Web que ya est publicado en Internet se deben seguir los siguientes pasos: 4. Haz clic en el men de File 5. Haz clic en la opcin Open Site 6. Escribe la direccin completa o URL en el cuadro de texto Site Name En cualquiera de los dos casos se abre el sitio Web en pantalla listo para ser editado. En esta seccin se vio como crear un sitio Web y como obtener ayuda, en la siguiente seccin empezaremos a trabajar con el manejo y la edicin de pginas.

Unidad 3: Cmo modificar el contenido de las pginas Web Tema 3. Importacin/Eliminacin de pginas Web. Ahora que ya podemos crear sitios Web sencillos, es muy importante conocer algunas herramientas que nos permiten administrar mejor los recursos. En algunas o quiz en muchas ocasiones debido a diversas circunstancias los sitios Web requieren utilizar pginas de otros sitios, es decir necesitamos Importar/Exportar pginas de un sitio a otro, alguna imagen o grfica que sea de gran utilidad en nuestro sitio o algn otro tipo de archivo que pueda ser soportado por el sistema operativo como hojas electrnicas de clculo o archivos de texto. Esta tarea es muy sencilla, ya que FrontPage ofrece herramientas que permiten copiar rpidamente archivos o carpetas externas al sitio, ya sea en una computadora local, una red local o en la World Wide Web. A pesar de esta til herramienta, antes de descargar archivos debemos tomar en cuenta los derechos reservados del autor, ya que existen muchas pginas que no permiten dichas descargas y debemos respetarlas. Cmo importar archivos o pginas a un sitio Web? A. Cmo importar archivos que se encuentran en la computadora o en una computadora remota. 1. Selecciona del men File la opcin Import. Aparece la siguiente caja de dilogo:

Figura 1: Caja de dilogo para importar archivos 2. Haz clic en el botn Add File para importar un archivo que se encuentra almacenado en tu computadora. Aparece la siguiente caja de dilogo:

Figura 2: Caja de dilogo para seleccionar el archivo a importar. 3. Busca el archivo que se desea agregar al sitio y haz clic en el botn Abrir.

Figura 3: Caja de dilogo que muestra los archivos que se van a importar. 4. Repite el paso 3 hasta ver en la pantalla todos los archivos que se desean importar. Al terminar haz clic en el botn de OK para que el(los) archivo(s) sean agregados al sitio Web como se aprecia en la lista de flderes:

Figura 4: Archivos importados al sitio Web. B. Cmo importar archivos que se encuentran en la World Wide Web. 1. Selecciona del men File la opcin Import. Aparece la siguiente caja de dilogo:

Figura 5: Caja de dilogo para importar archivos que se encuentran en la WWW. 2. Haz clic en el botn From Site para importar un archivo que se encuentra en un servidor dentro de la World Wide Web. Aparece la siguiente caja de dilogo:

Figura 6: Caja de dilogo para indicar en donde se encuentran los archivos a importar. 3. Escribe la direccin donde se encuentra el(los) archivo(s) que vas a importar en el recuadro que dice Location

4. Haz clic en el botn Next. Aparece la siguiente caja de dilogo que indica que est buscando e servidor indicado en la red:

Figura 7: Caja de dilogo que indica que est buscando el sitio Web. 5. Al encontrar el sitio Web, debemos indicar el lugar en el que deseamos descargar el archivo, el cual puede ser: un lugar dentro de la computadora o en un servidor Web. En este caso, los dejaremos en el sitio Web en el que estamos trabajando. Oprimir el botn de Next

Figura 8: Caja de dilogo para indicar el lugar en el que desea descargar los archivos importados. 6. De la caja de dilogo que aparece, marca las caja de verificacin que limita la descarga a la pgina principal y escribe 3 en levels deep y marca la caja de verificacin que limita a 500 KB el espacio mximo que deben ocupar los archivos en el disco. Oprime el botn de Next.

Figura 9: Caja de dilogo para indicar el espacio y el nmero de niveles de los archivos a importar. NOTA: Esta herramienta es muy til, pero se debe tener mucho cuidado ya que existen sitios que contienen muchos hipervnculos que llevan a ms carpetas lo que podra producir una descarga excesiva de archivos. Es recomendable limitar el nmero de niveles y el espacio en disco. Aparece la caja de dilogo final, en la que se indica que ya est listo para descargar los archivos. Haz clic en el botn de Finish para que inicie la descarga.

Figura 10: Caja de dilogo final del asistente de importacin En este momento, empieza a importar los archivos. Durante este tiempo aparece en la pantalla la siguiente caja de dilogo.

Figura 11: Caja de dilogo que indica que se estn importando los archivos. Al terminar la importacin, las carpetas del sitio Web indicado fueron agregados a nuestro sitio Web como se muestra a continuacin:

Figura 12: Vista de archivos que muestra los archivos importados al sitio. Cmo agregar el(los) archivo(s) importado(s) a la vista de navegacin? El(los) archivo(s) importado(s) se agrega(n) a la lista de flders pero no est(n) incluido(s) en la vista de navegacin. Si se desea(n) agregar el(los) archivo(s) a la vista de navegacin se deben realizar los siguientes pasos: 1. Muestra en pantalla la lista de flders que contiene el sitio. Selecciona la pestaa de Web site . 2. De la parte inferior de la pgina haz clic sobre la vista de navegacin . 3. Coloca el cursor sobre el archivo importado y sin soltar el botn del ratn arrastra el archivo a la vista de navegacin hasta dejarlo en el lugar deseado. 4. Suelta el botn del ratn 5. El archivo ya forma parte de la vista de navegacin 6. Repite los pasos 4,5 y 6 hasta terminar de agregar todos los archivos

Cmo borrar pginas? En muchas ocasiones es necesario eliminar aqullas pginas que no son necesarias ya que de no hacerlo sobrecargaran el servidor de Web que las aloja adems de provocar problemas en el manejo y administracin de las mismas. 1. Abre la vista Navigation. 2. Selecciona el archivo que deseas borrar y selecciona del men Edit la opcin Delete.Aparece la siguiente caja de confirmacin. Se pueden seleccionar varios archivos al mismo tiempo si se mantiene oprimida la tecla de Maysculas Tambin se pueden borrar los archivos desde la vista Hyperlinks

Figura 13: Caja de dilogo para indicar el lugar del que se desea eliminar los archivos. 3. Haz clic en el botn Ok para confirmar la eliminacin del archivo. Las operaciones vistas en esta seccin son muy tiles ya que aunque los resultados no se aprecian a simple vista, nos reducen en gran medida complejidad en la administracin de nuestros sitios Web. Tanto la importacin como la eliminacin de pginas reducen tiempo, ya sea para crear pginas Web que ya existen o que solo necesitan ciertas modificaciones o eliminan tiempo en investigar cuales son las pginas relevantes dentro del sitio y sobre todo reducen espacio en el servidor que alojar nuestro sitio Web.

Unidad 3: Cmo modificar el contenido de las pginas Web Tema 1. Propiedades de las pginas En esta seccin empezaremos a editar las pginas individualmente para agregar los elementos propios de cada una de ellas. Todos los objetos que se agregan en el sitio tienen propiedades. Las propiedades de los objetos son bsicamente las caractersticas propias de dicho objeto. Las propiedades de los objetos pueden ser modificadas para alterar los valores predefinidos que tienen los objetos. Conforme avance el curso se irn viendo las propiedades de algunos objetos. En esta seccin empezremos analizando las propiedades que tienen las pginas Web. El aspecto general de una pgina puede ser modificado por medio de las Propiedades de la pgina (Page properties) las cuales permiten indicar el ttulo de la pgina, modificar los colores del fondo, del texto, de los hipervnculos y otras caractersticas ms. Cmo modificar las propiedades de las pginas? Para modificar las propiedades de la pgina se deben seguir los siguientes pasos: 1. Abre la pgina a la que le vas a modificar las propiedades. 2. Coloca el cursor en cualquier parte de la pgina y haz clic con el botn derecho del ratn.

3. Del men que aparece selecciona la opcin Page Properties. Aparece la siguiente caja de dilogo: En la pestaa General se definen las caractersticas generales de la pgina. Las caractersticas bsicas son:

Figura 1: Caja de dilogo de las propiedades generales de la pgina

En la pestaa Formatting se definen las caractersticas del fondo de la pgina. Esta pestaa solamente aparece cuando la pgina no tiene tema.

Figura 2: Caja de dilogo de las propiedades de formato de la pgina

En la pestaa de Advanced se definen los mrgenes en pixeles que se desean en la parte superior, inferior, izquierda y derecha de la pgina.

Figura 3: Caja de dilogo de las propiedades avanzadas de la pgina Abre el sitio Web ElZapatito y elimina el tema de todas sus pginas, despus realiza las siguientes modificaciones a la pgina Damas: 1. Abre el sitio ElZapatito 2. Abre la pgina Damas 3. Coloca el cursor en cualquier parte del documento, haz clic con el botn derecho del ratn y selecciona Page Properties 4. Cambia el ttulo de la pgina por el de Calzado de Dama 5. Modifica el fondo de la pgina a color amarillo 6. Cambia el color del texto a color azul 7. Define el margen izquierdo a 30 pixeles y el margen superior a 0. 8. Haz clic en el botn OK 9. Graba los cambios realizados.

La pgina de Damas tendr ahora la siguiente apariencia:

Figura 4: Pgina de Damas con las propiedades de la pgina modificadas. Realiza lo mismo con todas las pginas de segundo nivel del sitio ElZapatito. Escoge los colores de fondo y letras que ms te gusten pero recuerda que una pgina bien diseada debe tener contraste entre los colores del texto y del fondo. Cmo modificar las propiedades de los objetos? Todos los objetos (texto, imgenes, formas) que se integran a una pgina Web tienen propiedades, es decir caractersticas que propias del objeto, las cuales son muy tiles y pueden ser visualizadas de la siguiente manera: 1. Selecciona el objeto del que deseas ver sus propiedades 2. Haz clic en el botn derecho del ratn y selecciona la opcin Nombre_del_objeto Properties 3. Modifica los parmetros de las propiedades que aparecen en la caja de dilogo El manejo de las propiedades de los objetos permite tener un mayor control acerca de los parmetros de los objetos, adems que dan un mayor control de los mismos. Prueba modificando las propiedades de diferentes objetos.

Unidad 3: Cmo modificar el contenido de las pginas Web Tema 2. Cmo introducir texto a las pginas Es tiempo de empezar a escribir texto en las pginas. El texto es la parte ms importante, ya que es el que nos permite comunicar las ideas. La introduccin de texto es tan sencilla como escribir en un procesador de palabras. El texto que se incluye dentro de una pgina debe tener un estilo claro y sencillo, recuerda que es ms difcil leer el texto en la pantalla de la computadora que en papel. Es recomendable que no utilices letras maysculas debido a que stas son menos legibles y las hacen ms difciles de leer.

Para empezar a escribir texto solo tienes que colocar el cursor al inicio de la pgina y... a escribir !!! Abre el sitio ElZapatito, coloca el cursor en la pgina principal (index.htm) y escribe lo siguiente: Bienvenidos a El Zapatito El Zapatito es una empresa que se dedica a la fabricacin de calzado para todos los miembros de la familia. Todos nuestros procesos cumplen con altos estndares de calidad para poder lograr la satisfaccin del cliente. El Zapatito se encuentra ubicada en la ciudad de Len, Guanajuato desde donde distribuye su calzado a todas las ciudades del pas. La misin de El Zapatito es: "proveer productos con altos estndares de calidad a precios bajos" Nuestra empresa ofrece las siguientes ventajas: Precios bajos Productos de calidad Servicio al cliente Nuestro equipo se compromete a brindarle un servicio de calidad

La pgina tendr la siguiente apariencia:

Figura 1: Apariencia de la pgina principal del sitio El Zapatito Cmo usar el diccionario de sinnimos? Al igual que los procesadores texto, el editor de FrontPage nos permite buscar sinnimos de las palabras, es decir, otras palabras que tienen el mismo significado. Los pasos son los siguientes: 1. Selecciona la palabra empresa 2. Selecciona del men Tools la opcin Thesaurus. Aparece la siguiente caja de dilogo:

3. Haz clic en Look Up para que te muestre otras palabras alternativas 4. Selecciona la palabra compaa y haz clic en el botn Replace. La palabra empresa es reemplazada por la palabra compaa Cmo revisar la ortografa del documento? La revisin de la ortografa se realiza de la misma forma que en los procesadores de texto

1. Selecciona del men Tools la opcin Spelling. El corrector de ortografa empieza a revisar el documento. o Si no hay errores de ortografa aparece la siguiente caja de dilogo:

Si existen errores de ortografa se muestra una caja de dilogo en la que se muestran los errores. Por ejemplo si la palabra proceso se escribi as "proseso", aparecer lo siguiente:

Figura 2: Caja de dilogo en la que se muestran los errors ortogrficos encontrados en la pgina. Estas dos herramientas son muy tiles ya que no deben existir errores de ortografa. Cmo dar formato al texto? Para realizar cambios de tipo, tamao, estilos y colores de letra, se cuenta con una forma rpida a travs de la barra de herramientas de formato la cual nos proporciona las operaciones ms comunes para dar formato al texto. Las operaciones ms completas se encuentran en las opciones que nos proporciona el men Format. Empezaremos nuestras modificaciones usando la barra de herramientas de formato, la cual se encuentra en la parte superior de la pantalla.

Figura 3: Barra de herramientas de formato Para aplicar las caractersticas del formato deseado, es necesario seleccionar primero el texto que se desea modificar. Modificaremos el texto que escribiste en la pgina principal del sito ElZapatito: 1. Selecciona el texto Bienvenidos a El Zapatito, escoge la opcin Heading 1 de la lista de Estilos de formato de prrafo y oprime el botn de alineacin al centro

2. Selecciona todo el texto, excepto Bienvenidos a El Zapatito o Escoge la letra tipo Arial de la lista de Tipos de letra o Cambia el tamao de la letra a tamao 14 o Escoge el color rojo de la lista de Color del texto 3. Selecciona las lneas en las que aparecen: Precios bajos, Productos de calidad y Servicio al cliente o Oprime el botn de Lista con vietas o Selecciona del botn de bordes el borde alrededor del texto 4. Aplica letra estilo negritas a todas las apariciones de las palabras El Zapatito excepto al encabezado de la primera lnea.

La pgina ahora tiene la siguiente apariencia:

Figura 4: Apariencia de la pgina principal del sitio El Zapatito despus de haber modificado el formato Todas las modificaciones anteriores se hicieron usando la barra de herramientas de formato, que como ya se mencion nos proporcionan un acceso rpido a las operaciones ms comunes, pero existen opciones dentro del men Format que nos proporcionan adems de las operaciones bsicas algunas operaciones ms completas. A continuacin se muestra como modificar el texto a travs del uso de las opciones del men Format.

Cmo modificar el tipo, estilo, tamaos y colores del texto? 1. Seleccionar del men Format la opcin Font . Aparece la siguiente caja de dilogo que permite realizar las modificaciones indicadas y algunos efectos adicionales.

Figura 5: Caja de dilogo de las propiedades de las letras.

Cmo modificar el formato de los prrafos? 1. Seleccionar del men Format la opcin Paragraph. Aparece la siguiente caja de dilogo que nos muestra las operaciones bsicas y algunas ms.

Figura 6: Caja de dilogo de las propiedades de los prrafos

Cmo crear listas numeradas y listas con vietas? 1. Selecciona del men Format la opcin Bullets and Numbering... Aparece la siguiente caja de dilogo que nos muestra diferentes smbolos para las listas numeradas o con vietas, adems nos permite seleccionar el nmero inicial de las listas numeradas.

Figura 7: Caja de dilogo de las propiedades de las listas numeradas y con vietas .

Cmo modificar bordes y sombras? 1. Selecciona del men Format la opcin Borders and shading... Aparece la siguiente caja de dilogo en la que podemos especificar el tipo, ancho y color del borde, adems del color y patrn de las sombras del texto.

Figura 8: Caja de dilogo de las propiedades de los bordes. Con estas herramientas se pueden realizar todas las modificaciones necesarias a los textos que se incluyan en las pginas Web. Debemos recordar que cuando aplicamos un tema a las pginas Web, los formatos del texto sern modificados para aplicar las caractersticas del tema seleccionado.

Unidad 3: Cmo modificar el contenido de las pginas Web Tema 3. Importacin/Eliminacin de pginas Web. Ahora que ya podemos crear sitios Web sencillos, es muy importante conocer algunas herramientas que nos permiten administrar mejor los recursos. En algunas o quiz en muchas ocasiones debido a diversas circunstancias los sitios Web requieren utilizar pginas de otros sitios, es decir necesitamos Importar/Exportar pginas de un sitio a otro, alguna imagen o grfica que sea de gran utilidad en nuestro sitio o algn otro tipo de archivo que pueda ser soportado por el sistema operativo como hojas electrnicas de clculo o archivos de texto. Esta tarea es muy sencilla, ya que FrontPage ofrece herramientas que permiten copiar rpidamente archivos o carpetas externas al sitio, ya sea en una computadora local, una red local o en la World Wide Web. A pesar de esta til herramienta, antes de descargar archivos debemos tomar en cuenta los derechos reservados del autor, ya que existen muchas pginas que no permiten dichas

descargas y debemos respetarlas. Cmo importar archivos o pginas a un sitio Web? A. Cmo importar archivos que se encuentran en la computadora o en una computadora remota. 1. Selecciona del men File la opcin Import. Aparece la siguiente caja de dilogo:

Figura 1: Caja de dilogo para importar archivos 2. Haz clic en el botn Add File para importar un archivo que se encuentra almacenado en tu computadora. Aparece la siguiente caja de dilogo:

Figura 2: Caja de dilogo para seleccionar el archivo a importar. 3. Busca el archivo que se desea agregar al sitio y haz clic en el botn Abrir.

Figura 3: Caja de dilogo que muestra los archivos que se van a importar. 4. Repite el paso 3 hasta ver en la pantalla todos los archivos que se desean importar. Al terminar haz clic en el botn de OK para que el(los) archivo(s) sean agregados al sitio Web como se aprecia en la lista de flderes:

Figura 4: Archivos importados al sitio Web. B. Cmo importar archivos que se encuentran en la World Wide Web. 1. Selecciona del men File la opcin Import. Aparece la siguiente caja de dilogo:

Figura 5: Caja de dilogo para importar archivos que se encuentran en la WWW. 2. Haz clic en el botn From Site para importar un archivo que se encuentra en un servidor dentro de la World Wide Web. Aparece la siguiente caja de dilogo:

Figura 6: Caja de dilogo para indicar en donde se encuentran los archivos a importar. 3. Escribe la direccin donde se encuentra el(los) archivo(s) que vas a importar en el recuadro que dice Location

4. Haz clic en el botn Next. Aparece la siguiente caja de dilogo que indica que est buscando e servidor indicado en la red:

Figura 7: Caja de dilogo que indica que est buscando el sitio Web. 5. Al encontrar el sitio Web, debemos indicar el lugar en el que deseamos descargar el archivo, el cual puede ser: un lugar dentro de la computadora o en un servidor Web. En este caso, los dejaremos en el sitio Web en el que estamos trabajando. Oprimir el botn de Next

Figura 8: Caja de dilogo para indicar el lugar en el que desea descargar los archivos importados. 6. De la caja de dilogo que aparece, marca las caja de verificacin que limita la descarga a la pgina principal y escribe 3 en levels deep y marca la caja de verificacin que limita a 500 KB el espacio mximo que deben ocupar los archivos en el disco. Oprime el botn de Next.

Figura 9: Caja de dilogo para indicar el espacio y el nmero de niveles de los archivos a importar. NOTA: Esta herramienta es muy til, pero se debe tener mucho cuidado ya que existen sitios que contienen muchos hipervnculos que llevan a ms carpetas lo que podra producir una descarga excesiva de archivos. Es recomendable limitar el nmero de niveles y el espacio en disco. Aparece la caja de dilogo final, en la que se indica que ya est listo para descargar los archivos. Haz clic en el botn de Finish para que inicie la descarga.

Figura 10: Caja de dilogo final del asistente de importacin En este momento, empieza a importar los archivos. Durante este tiempo aparece en la pantalla la siguiente caja de dilogo.

Figura 11: Caja de dilogo que indica que se estn importando los archivos. Al terminar la importacin, las carpetas del sitio Web indicado fueron agregados a nuestro sitio Web como se muestra a continuacin:

Figura 12: Vista de archivos que muestra los archivos importados al sitio. Cmo agregar el(los) archivo(s) importado(s) a la vista de navegacin? El(los) archivo(s) importado(s) se agrega(n) a la lista de flders pero no est(n) incluido(s) en la vista de navegacin. Si se desea(n) agregar el(los) archivo(s) a la vista de navegacin se deben realizar los siguientes pasos: 1. Muestra en pantalla la lista de flders que contiene el sitio. Selecciona la pestaa de Web site . 2. De la parte inferior de la pgina haz clic sobre la vista de navegacin . 3. Coloca el cursor sobre el archivo importado y sin soltar el botn del ratn arrastra el archivo a la vista de navegacin hasta dejarlo en el lugar deseado. 4. Suelta el botn del ratn 5. El archivo ya forma parte de la vista de navegacin 6. Repite los pasos 4,5 y 6 hasta terminar de agregar todos los archivos Cmo borrar pginas? En muchas ocasiones es necesario eliminar aqullas pginas que no son necesarias ya que de no hacerlo sobrecargaran el servidor de Web que las aloja adems de provocar problemas en el

manejo y administracin de las mismas. 1. Abre la vista Navigation. 2. Selecciona el archivo que deseas borrar y selecciona del men Edit la opcin Delete.Aparece la siguiente caja de confirmacin. Se pueden seleccionar varios archivos al mismo tiempo si se mantiene oprimida la tecla de Maysculas Tambin se pueden borrar los archivos desde la vista Hyperlinks

Figura 13: Caja de dilogo para indicar el lugar del que se desea eliminar los archivos. 3. Haz clic en el botn Ok para confirmar la eliminacin del archivo. Las operaciones vistas en esta seccin son muy tiles ya que aunque los resultados no se aprecian a simple vista, nos reducen en gran medida complejidad en la administracin de nuestros sitios Web. Tanto la importacin como la eliminacin de pginas reducen tiempo, ya sea para crear pginas Web que ya existen o que solo necesitan ciertas modificaciones o eliminan tiempo en investigar cuales son las pginas relevantes dentro del sitio y sobre todo reducen espacio en el servidor que alojar nuestro sitio Web.

Unidad 4: Cmo agregar elementos que mejoren la apariencia de las pginas Web Tema 1. Manejo de imgenes y sus propiedades Los sitios Web que hemos hecho hasta ahora contienen solamente texto y algunas caractersticas que mejoran un poco su apariencia como temas, barras de navegacin, colores del fondo, pero las pginas Web pueden contener una gran variedad de elementos que mejoran an ms su apariencia. Elementos como imgenes, lneas, botones e hipervnculos aumentan en gran medida la presentacin de las pginas y le dan un valor agregado. La integracin de estos elementos es muy simple solo debemos tener cuidado en utilizarlos con discrecin para no caer en excesos y perder la atencin del usuario. En esta seccin veremos como agregar imgenes a los sitios Web y el manejo de sus propiedades. Cmo insertar imgenes a las pginas Web? El uso de las imgenes es de gran ayuda, ya que adems de mejorar la apariencia del sitio Web producen un estmulo al usuario. FrontPage permite desplegar imgenes que se almacenan en dos diferentes formatos: JPG y GIF. El formato JPG es utilizado generalmente para almacenar fotografas y el formato GIF se utiliza para almacenar dibujos. Las imgenes pueden provenir de diferentes fuentes: A travs de un simple copy/paste De un archivo de imagen De un "clip art" De un escner o cmara

Es muy recomendable que las imgenes que se insertan al sitio se almacenen en el flder images. Para insertar una imagen se deben seguir los siguientes pasos: 1. Crea un sitio Web de una pgina y llmalo Floreria. 2. Abre la pgina Index y selecciona del men Insert la opcin Picture, selecciona la opcin que muestre el origen de la imagen de la siguiente lista de opciones:

Figura 1: Cmo insertar imgenes Clip Art: inserta una imagen del archivo de imgenes que viene incluido en Office. En esta opcin se puede indicar el tema de la imagen que se desea agregar o se hace una bsqueda en todos los archivos de imgenes contenidos en el clip art. From File: inserta una imagen de un archivo almacenado en la computadora local o en una computadora remota. Al escoger esta opcin aparece el siguiente cuadro de dilogo:

Figura 2: Cmo seleccionar la imagen Selecciona la imagen que deseas incluir y haz clic en el botn de Insert para que la imagen se agregue al sitio Web. From Scanner or Camera... inserta una imagen que proviene de un escner o de una cmara. Para que esta operacin pueda ser realizada se debe tener conectado el dispositivo del cual se desea agregar la imagen. New Photo Gallery... esta opcin permite insertar imgenes como una galera. Las imgenes se despliegan en miniatura (thumbnail) y crea una liga al archivo de la imagen para que cuando el usuario la quiera ver la muestre en su tamao real. Esta forma de agregar imgenes es muy til porque reduce el espacio que ocupa la pgina. Al escoger esta opcin aparece la siguiente caja de dilogo:

Figura 3: Caja de dilogo de las propiedades de las imgenes que formaran parte de la Galera de Imgenes Aade 3 imgenes que tengas grabadas en tu computadora y escribe algn ttulo (caption) y una descripcin para cada una de ellas. Define las propiedades de ancho a 76 pixeles y de alto a 50 pixeles. Ahora cambia a la pestaa de Layout que aparece en la parte superior de la caja de dilogo y aparece la siguiente pantalla:

Figura 4: Caja de dilogo de las propiedades de distribucin de las imgenes Selecciona la apariencia que quieres que tenga la galera y el nmero de imgenes que quieres por rengln. Haz clic en el botn de OK. Aade el ttulo Florera El Paraso en el primer rengln de la pgina y cambia el tamao y color del texto. La galera de imgenes tendr una apariencia similar a la siguiente:

Figura 5: Apariencia de la Galera de Imgenes de la Florera El Paraso Prueba el resultado. Haz clic en el botn Preview in browser de la barra de herramientas estndar. Cmo insertar una imagen desde un navegador Web? Es muy comn que muchas imgenes que vemos en Internet nos sirvan para los sitios Web que desarrollamos. Recuerda que es muy importante respetar los derechos de autor. El proceso para insertar una imagen desde la Web es muy sencillo: Haz clic sobre la imagen de Internet que deseas agregar en la pgina Web Haz clic en el botn derecho del ratn y selecciona la opcin Copy Posiciona el cursor en la pgina donde deseas incluir la imagen Haz clic en el botn derecho del ratn y selecciona la opcin Past e Otra forma: Busca la imagen de Internet que deseas incluir en tu pgina y arrastra la imagen a la pgina Web. Cmo editar una imagen? Una vez que las imgenes han sido insertadas en las pginas, todava estas pueden necesitar alguna modificacin. A pesar de que la mayora de las imgenes no son creadas en FrontPage estas pueden ser modificadas en FrontPage. Cuando seleccionas una imagen dentro de una pgina, se despliega la barra de herramientas dePictures, la cual nos ofrece varias herramientas que nos permiten modificar las imgenes.

Figura 6: Barra de herramientas Pictures A continuacin se da una breve descripcin de las principales herramientas para editar imgenes: Esta opcin permite insertar una imagen. Esta herramienta es similar a seleccionar del menInsert la opcin Picture from file que se explic anteriormente.

Esta opcin permite agregar texto a una imagen. Al seleccionar la herramienta se abre un cuadro de texto sobre la imagen para que se escriba el texto deseado. A continuacin se muestra un ejemplo de usar esta opcin:

Esta opcin crea una imagen miniatura automtica de la imagen seleccionada y crea una liga al archivo de donde proviene la imagen. A continuacin se muestra un ejemplo de aplicar esta herramienta en la imagen anterior.

Esta opcin coloca la imagen seleccionada al frente de los objetos. Esta opcin coloca la imagen seleccionada atrs de los objetos. Esta opcin gira la imagen seleccionada 90 grados a la izquierda. Esta opcin gira la imagen seleccionada 90 grados a la derecha. Esta opcin hace un efecto de espejo horizontal, es decir invierte la imagen: lo que esta al lado derecho lo coloca en el lado izquierdo y viceversa. Ejemplo:

Esta opcin hace un efecto de espejo vertical, es decir invierte la imagen: lo que esta arriba lo coloca abajo y viceversa. Ejemplo:

Esta opcin aplica ms contraste a la imagen. Esta opcin reduce el contraste de la imagen. Esta opcin d ms brillo a la imagen. Esta opcin reduce el brillo a la imagen.

Esta opcin vuelve transparente el rea de la imagen que se desee. Ejemplo:

Esta opcin aplica efectos de colores a la imagen.

Grayscale:

Wash Out:

Esta opcin se utiliza despus de haber modificado el tamao de la imagen para que ajuste el tamao del archivo de la imagen al de la imagen misma y se optimice el tiempo de desacarga. Esta opcin agrega un marco alrededor de la imagen seleccionada. Ejemplo:

Prueba las opciones anteriores para que verifiques su funcin. Cmo modificar las propiedades de las imgenes? Las imgenes al igual que todos los objetos tienen propiedades. Para poder modificarlas se deben seguir los siguientes pasos: 1. Selecciona la imagen 2. Oprime el botn derecho del ratn y selecciona la opcin Pictures Properties. Cuando se selecciona la pestaa Appearance aparece la siguiente caja de dilogo:

Figura 7: Caja de dilogo de las propiedades de apariencia de las imgenes Al seleccionar la pestaa General aparece la siguiente caja de dilogo:

Figura 8: Caja de dilogo de las propiedades generales de las imgenes Estas herramientas son muy tiles en el diseo de pginas, ya que facilitan la inclusin de imgenes y la edicin de las mismas para adaptarlas a nuestras necesidades. Prueba cada una de ellas usando el sitio de la florera El Paraso que creaste en esta unidad. Unidad 4: Cmo agregar elementos que mejoren la apariencia de las pginas Web Tema 2: Manejo de hipervnculos. Los hipervnculos son ligas que permiten relacionar una pgina Web con otra. Estos son muy necesarios ya que es la nica forma de poder vincular las pginas a otros sitios Web que tienen informacin relacionada. Existen diferentes tipos de hipervnculos dependiendo de lugar al que se conectan. Existen hipervnculos que se conectan a otra pgina Web que se encuentra en el mismo sitio o a una pgina que se encuentra en otro sitio Web. Podemos crear hipervnculos a una direccin de correo electrnico e inclusive a otro punto dentro de la misma pgina. A pesar de su gran utilidad es muy importante limitar su uso exclusivamente a las pginas que realmente contengan informacin relevante. El abuso en el uso de hipervnculos puede crear confusin el usuario y perderse dentro de tantas pginas Web. Utiliza el sitio El Zapatito para que pruebes cada uno de los hipervnculos que se explican a continuacin. Cmo insertar hipervnculos a los objetos que se encuentran en las pginas Web? Los hipervnculos se pueden aplicar sobre casi cualquier objeto (textos, imgenes) que se encuentre dentro de la pgina y son muy sencillos de manejar. Cmo agregar hipervnculos a pginas o sitios Web que ya existen? 1. Seleccionar el objeto que se va a vincular 2. Oprimir el botn de Hyperlink que se encuentra en la barra de herramientas

estndar en la parte superior de la pantalla u oprimir el botn derecho del ratn y seleccionar la opcinHyperlinks del men. Aparece la siguiente caja de dilogo:

Figura 1: Caja de dilogo de para insertar un hipervnculo a una pgina Web existente 3. Haz clic en el botn de OK. Cmo agregar hipervnculos a otro punto dentro de la misma pgina? 1. Seleccionar el objeto que se va a vincular 2. Seleccionar la parte del documento a donde se quiere vincular el hipervnculo 3. Agrega una marca dentro del documento. Seleccionar la opcin Bookmark del men Insert.Al hacer esto aparecer la siguiente caja de dilogo:

Figura 2: Caja de dilogo que nos permite insertar una marca dentro de la pgina 4. Haz clic en el botn de OK Cmo agregar hipervnculos a una pgina nueva? 1. Seleccionar el objeto que se va a vincular 2. Oprimir el botn de Hyperlink que se encuentra en la barra de herramientas estndar en la parte superior de la pantalla u oprimir el botn derecho del ratn y seleccionar la opcinHyperlinks del men. Aparece la siguiente caja de dilogo:

Figura 3: Caja de dilogo para insertar un hipervnculo a una pgina nueva 3. Selecciona el botn Create New Document 4. Haz clic en el botn de OK 5. Aparece la nueva pgina para que sea editada. Cmo agregar hipervnculos a direcciones de correo electrnico? 1. Seleccionar el objeto que se va a vincular 2. Oprimir el botn de Hyperlink que se encuentra en la barra de herramientas estndar en la parte superior de la pantalla u oprimir el botn derecho del ratn y seleccionar la opcinHyperlinks del men. Aparece la siguiente caja de dilogo:

Figura 4: Caja de dilogo que nos permite insertar un hipervnculo a una direccin de correo 4. Haz clic en botn de OK Cmo probar un hipervnculo? Una vez que los hipervnculos han sido insertados es necesario probarlos para verificar su funcionamiento. La mejor forma de hacer esto es ver la pgina en un navegador y hacer clic en los hipervnculos. Cmo ver una vista previa de la pgina en un navegador?

1. Selecciona del men File la opcin Preview in Browser u oprime el botn que se encuentra en la barra de herramientas estndar en la parte superior de la pantalla. 2. Se abre la pgina en la que te encuentras en el navegador Explorer 3. Prueba los hipervnculos existentes Si algn hipervnculo no funciona correctamente se deben revisar los posibles problemas. Cmo ver las propiedades de los hipervnculos? 1. Cierra la vista previa en el navegador y regresa a FrontPage 2. Selecciona el vnculo que no funciona correctamente, oprime el botn derecho del ratn y selecciona la opcin Hyperlink Properties. Aparece la caja de dilogo de los hipervnculos:

Figura 5: Caja de dilogo que nos permite modificar las propiedades de los hipervnculos 3. Revisa la direccin y corrgela 4. Oprime el botn OK 5. Vuelve a probar la pgina Como puedes ver, el uso de los hipervnculos son tan importantes como el texto y muchos otros elementos, ya que sin ellos no sera posible movernos a travs de los sitios Web. Prueba los diferentes tipos de hipervnculos y verifica su utilidad.

Unidad 4: Cmo agregar elementos que mejoren la apariencia de las pginas Web Tema 3: Caractersticas grficas de las pginas Web Adems de las imgenes todava se puede mejorar ms la apariencia de las pginas Web a travs del uso de herramientas que permiten hacer acciones como: incluir alguna imagen como fondo de la pgina, dar animacin a los textos e imgenes, definir zonas activas dentro de la imgenes. A continuacin se revisarn algunas herramientas que permiten realizar estas actividades. Utiliza el sitio El Zapatito para probar cada una de ellas. Cmo usar una imagen como fondo de una pgina Web? Adems del uso de temas y colores como fondos de las pginas, se pueden agregar

imgenes. Una imagen de fondo acta como un mosaico que se repite varias veces hasta llenar por completo el fondo de la pgina. El uso de estas imgenes es muy comn cuando se desea agregar alguna textura a la pgina o cuando se desea agregar algn logotipo que identifique a la empresa. NOTA: trata de usar imgenes que no resalten ms que el texto de la pgina. 1. Haz clic en el men Format y selecciona la opcin Background. Aparece la caja de dilogo de la pestaa Formatting de las Propiedades de la Pgina.

Figura 1: Caja de dilogo de las propiedades de formato de la pgina

2. Haz clic en el botn OK. La imagen se agrega como fondo de la pgina y quedara as:

En este ejemplo, la imagen es muy grande por eso cubre la pgina completa, pero en casos donde la imagen es pequea, esta se repetir hasta llenar toda la pgina:

Figura 2: Pgina principal del sitio El Zapatito con una imagen como fondo

Figura 3: Pgina principal del sitio El Zapatito con una imagen mltiple como fondo

3. Graba los cambios. Cmo crear zonas activas (hot spot) en las imgenes? Una zona activa es un rea dentro de una imagen que contiene un hipervnculo. Estas zonas son muy tiles, ya que cuando aplicas un hipervnculo sobre una imagen este se aplica sobre toda la imagen, pero en algunas ocasiones es necesario que el hipervnculo afecte solamente a ciertas reas de la imagen. Las herramientas para crear zonas activas se encuentran en la barra de herramientasPictures y son las siguientes:

Figura 4: Herramientas de zonas activas dentro de la caja de herramientas

Crea una zona activa rectangular Crea una zona activa oval Crea una zona activa de forma poligonal Por ejemplo, busca en Internet un mapa de Mxico y agrgalo a la pgina Promociones del sitio El Zapatito. Si se desean colocar hipervnculos sobre la capital de cada estado, la creacin de zonas activas es algo muy sencillo de realizar, solo debes seguir los siguientes pasos: 1. Selecciona la imagen a la que le vas a agregar las zonas activas 2. En la barra de herramientas haz clic sobre el botn de zona activa rectangular y dibuja un rectngulo sobre la palabra Chihuahua que se encuentra en el mapa

Figura 5: Cmo agregar una zona activa sobre el estado de Chihuahua

3. Aparece la caja de dilogo de los hipervnculos. Selecciona la liga a archivos o

sitios web existentes y direccin: http://www.chihuahua.gob.mx escribe la

siguiente

Figura 6: Caja de dilogo para insertar un hipervnculo a http://www.chihuahua.gob.mx

4. El hipervnculo se aplic sobre el rectngulo que se dibujo en la palabra

Chihuahua

browser de la barra de herramientas estndar que se encuentra en la parte superior de la pantalla. Cmo editar una zona activa? Si se desea modificar el tamao de la zona activa solo se necesita seleccionar la zona activa y arrastrar los controladores que aparecen alrededor de la zona. Si no puedes visualizar las zonas activas solo debes oprimir el botn Highlight

5. Prueba el hipervnculo en el navegador. Haz clic sobre el botn Preview in

Hotspots que se encuentra en la barra de herramientas Pictures y las zonas activas se mostrarn. Las zonas activas al igual que todos los objetos tambin tienen propiedades y se pueden visualizar de la siguiente manera: 1. Selecciona la zona activa a editar, oprime el botn derecho del ratn y selecciona la opcin Picture Hotspot Properties... y aparecer en pantalla la caja de dilogo de los hipervnculos para que sea modificada. Cmo agregar animacin a los objetos? Para hacer un poco ms interesantes las pginas se pueden agregar efectos a los textos, a las imgenes y otros objetos contenidos en las pginas con la ayuda de los comportamientos (behaviors) que FrontPage nos permite utilizar. Los comportamientos, son acciones programadas que permiten agregar de forma muy rpida interactividad y funcionalidad a los objetos que se encuentran en la pgina Web. Un comportamiento, es la combinacin de un evento y una accin que deseas que ocurra cuando el visitante del sitio interacta con la pgina web o con un elemento de la misma. Un evento es una condicin que produce que se ejecute un cdigo. Por ejemplo, mover el cursor sobre una grfica o dar clic a una liga, producen que ocurra un evento. Los nombres de los eventos normalmente reflejan como son activados. Por ejemplo, el evento onMouseOver ocurre cuando el apuntador del ratn se mueve sobre un elemento de la pgina. Los comportamientos son muy variados y dependen del objeto al que se aplique y del evento que ocurra sobre ellos. A continuacin se explican algunos de ellos. Para poder entender lo que hacen cada uno de los comportamientos realiza lo siguiente: 1. Abre el sitio Web El Zapatito 2. Abre la pgina Damas 3. Selecciona el texto de introduccin de la pgina 4. Selecciona del men Format la opcin Behaviors.. para que aparezca el task pane de los comportamientos.

Figura 7: Caja de dilogo para insertar un comportamiento a un objeto

5. Oprime el botn de Insert para agregar un comportamiento nuevo al objeto

seleccionado. Aparece una lista de los diferentes comportamientos que se le pueden aplicar al objeto que se encuentra seleccionado. La lista de eventos puede variar dependiendo del objeto. Para nuestro ejemplo, aparece una lista similar a la siguiente:

Figura 8: Caja de dilogo que muestra la lista de comportamientos disponibles para el objeto seleccionado

Algunas de los comportamientos que se pueden realizar son: Call script: Change property: este comportamiento modifica la propiedad original del

6.

objeto seleccionado. Change property restore: re-establece las propiedades originales del objeto. Check Browser: revisa la versin del navegador que se est utilizando y dependiendo del mismo, se dirige al URL indicado. Check Plug-in: revisa la versin del plug-in de: Flash, QuickTime, RealPlayer, Shockwave y Windows Media Player que se est utilizando y dependiendo del mismo, se dirige al URL indicado. Go To URL: se dirige al URL indicado. Open Browser Window: se dirige al URL indicado y lo despliega en una ventana nueva. Play Sound: ejecuta el sonido indicado Popup Message: despliega el mensaje indicado en una ventana popup. Set Text: define el texto que puede ir dentro de un marco, capa o barra de estado. Selecciona la opcin Change Property para modificar las caractersticas del texto. Aparece la siguiente caja de dilogo.

Figura 9: Caja de dilogo que nos permite cambiar las propiedades de formato de un texto

7. Oprime el botn de Font para modificar las caractersticas de la letra. Aparece

la siguiente pantalla.

Figura 10: Caja de dilogo para modificar las propiedades de las letras

1. Selecciona la(s) caracterstica(s) que deseas que tenga el texto en el

momento que ocurra el evento indicado y haz clic en el botn OK. El nombre de la propiedad seleccionado y su respectivo valor aparecen en la ventana. Oprime Ok.

Figura 11: Caja de dilogo de que muestra las propiedades que fueron modificadas para determinar el comportamiento del objeto seleccionado

2. Aparece en el task pane, los comportamientos agregados y el evento en el

que suceder.

Figura 12: Caja de dilogo que muestra los comportamientos asignados al objeto y las acciones definidas para cada uno de ellos

3. Si se desea cambiar el evento, coloca el cursor sobre el evento a modificar y

haz clic sobre el para que aparezca la lista de eventos disponibles. Selecciona el evento y listo. Algunos de los eventos ms comunes son: Onclick: sucede cuando oprimes una vez el botn del ratn sobre el objeto Ondblclick: sucede cuando oprimes dos veces el botn del ratn sobre el objeto

 Onmouseover: sucede cuando pasas el cursor por encima del objeto Onmouseout: sucede cuando el cursor sale del rea del objeto. Onmouseover: sucede cuando el cursor entra al rea del objeto 4. Prueba la pgina haciendo clic en el botn Preview in browser.... que se encuentra en la barra de herramientas estndar. Prueba los diferentes efectos que proporciona la herramienta behaviors aplicndolo tambin en imgenes y usando diferentes eventos y efectos. Cmo agregar transiciones a las pginas? Las transiciones son efectos que ocurren cuando entras o sales de una pgina o cuando entras o sales del sitio Web. Estos efectos hacen que los sitios se vean ms dinmicos. Para aplicar transiciones se debe realizar lo siguiente: 1. Abre la pgina a la que le vas aplicar la transicin. Utiliza la pgina Damas del sitio ElZapatito. 2. Selecciona del men Format la opcin Page Transitions y aparece la caja de dilogo siguiente

Figura 13: Caja de dilogo que nos permite definir el evento y la transicin que se desea agregar a la pgina

ocurra la transicin: Page Enter: la transicin ocurre cuando se entra a la pgina Page Exit: la transicin ocurre cuando abandonas la pgina Site Enter: la transicin ocurre cuando entras al sitio Web Site Exit: la transicin ocurre cuando abandonas el sitio Web Para este ejemplo selecciona la opcin Page Exit 4. Selecciona de la lista de Efectos de transicin el efecto que ms te agrade. Para este ejemplo selecciona el efecto Circle out 5. Haz clic en el botn OK 6. Graba los cambios 7. Prueba la pgina haciendo clic en el botn Preview in browser.... que se encuentra en la barra de herramientas estndar y revisa los resultados NOTA: es necesario que selecciones primero el evento al que le vas aplicar la transicin y despus el efecto, ya que el evento se aplica al afecto que se tiene seleccionado en ese momento.

3. Selecciona de la lista de Eventos el evento que indica cuando quieres que