Está en la página 1de 99

JULIO 2013.

SMTS
1

COLEGIO DE BACHILLERES DEL ESTADO DE QUERTARO Programa de formacin y actualizacin docente 2013-A Diseo de Pginas Web. Instructor Sara Marlen Torres Snchez Dirigido al rea de Capacitacin en Informtica
CURSO / TALLER: INSTRUCTOR:

Diseo de Pginas Web


Sara Marlen Torres Snchez

OBJETIVO GENERAL: Introducir al docente al ambiente bsico de diseo de pginas web en Dreamweaver para poder dirigir a sus estudiantes de la capacitacin a utilizar esta herramienta como una medio para publicitar su empresa. CONTENIDO TEMTICO. TEMA 1 Contenidos conceptuales sobre Sitios Web TEMA 2 Diseo de Sitios Web en Dreamweaver TEMA 3 Desarrollo de animaciones SWF en Flash para el Sitio Web. TEMA 4 Complementos gratuitos para web TEMA 5 Publicar y mantener un Sitio Web.

METODOLOGA. El curso se desarrolla de forma presencial en equipos de cmputo de la institucin los cuales tendrn el software requerido para elaborar las evidencias de aprendizaje. Est considerado elaborar el 90% de las evidencias en las horas-curso, sin embargo el tener que invertir ms tiempo para desarrollarlas depender de las competencias informticas personales; el 10% restante se deber terminar en contraturno. Una vez concluido el curso el docente tendr una semana para entregar el 100% de las evidencias solicitadas va electrnica, las cuales estarn concentradas en la URL de su subdominio gratuito. El enfoque est dirigido a construir conocimientos en el diseo y elaboracin de sitios web utilizando aplicaciones sencillas que no requieren habilidades avanzadas en el rea de informtica. Durante el curso el docente elaborar estrategias y prcticas dirigidas a los estudiantes de la capacitacin de informtica, que posteriormente podr aplicar en su plantel si as lo decide. Las sesiones van enlazadas entr s, las inasistencias al curso pueden afectar considerablemente la conclusin exitosa del mismo. CRITERIOS DE EVALUACIN. Demostrar la competencia para: Reconocer los elementos bsicos de un Sitio Web Disear sitios web a partir de plantillas en Dreamweaver Insertar pelculas flash en el Sitio Web Insertar complementos gratuitos en el Sitio Web Publicar y mantener un Sitio Web en un servidor de alojamiento gratuito

CRITERIOS DE ACREDITACIN: Puntualidad y permanencia en la sesin Asistencia mnima del 80%. Entrega oportuna de los trabajos, de acuerdo a los criterios de evaluacin. Evaluacin de los aprendizajes, de acuerdo a los criterios de evaluacin

REQUERIMIENTOS NECESARIOS PARA DESARROLLAR EL CURSO: Laboratorio de Cmputo Acceso a Internet en cada computadora Dreamweaver CS4 Flash MX Explorador Google Winzip o Winrar Cuenta personal de correo electrnico.

LISTA DE COTEJO PARA EVALUAR EL CURSO Diseo de Pginas Web. Instructor Sara Marlen Torres Snchez
DOCENTE___________________________________PLANTEL______________

Elemento
1. Entreg actividad de Terminologa de Sitios Web 2. Entreg actividad de Elementos de un Sitio Web 3. Entreg actividad de Diseo de elementos del Diseo Web 4. 5. 6. 7. 8. 9. 10. 11. Entreg actividad de negocios electrnicos Entreg actividad de Estructura y usabilidad de Sitios Web Elabor la prctica 1 completa Elabor la prctica 2 completa Elabor la prctica 3 completa Elabor la prctica 4 completa Elabor la prctica 5 completa Elabor la prctica 6 completa

Si

No

PUNTOS /11

Importante: Para obtener la acreditacin del curso es necesario contar con el 100 de las evidencias solicitadas. Las evidencias se entregan a travs del URL del hosting gratuito. Fecha_______________________________

Nombre instructor: Sara Marlen Torres Snchez Correo de entrega: smarlen7@gmail.com

Firma_________________________

3. LECTURA INICIAL (Leer en grupo)

etodologa de trabajo. Este curso tiene como objetivo compartir a los docentes del rea de informtica de a un conjunto de estrategias a travs de las cuales pueden dirigir a sus estudiantes en la construccin de Sitios Web de una manera sencilla, integrando siempre la parte conceptual , procedimental y actitudinal asociada con la temtica. La dinmica en el curso como docentes ser desarrollar las estrategias que se solicitarn a los estudiantes que cursan la capacitacin y adquirir las habilidades necesarias para posteriormente orientarlos y aclarar sus dudas. En otras palabras tomaremos el papel de estudiantes diseando Sitios Web considerando que tenemos solo habilidades bsicas en el manejo de herramientas informticas. Para lograrlo se proporcionarn lecturas, actividades y tutoriales desarrollados y ya utilizados por el Instructor, mismos que podrn compartirse con sus alumnos solicitando siempre respetar los datos del autor. Al igual que el trabajo en el aula los desempeos logrados en el curso pueden variar significativamente entre los diferentes participantes de acuerdo a los conocimientos previos que tengamos en el rea, el acceso a la infraestructura y materiales de trabajo, al tiempo que le dediquemos al curso, a nuestro inters, etc.; sin embargo el objetivo ser para todos construir conocimientos en elaboracin de Sitios Web para posteriormente transmitirlos a nuestros estudiantes. Diariamente tendremos un objetivo en el avance de los contenidos y ser necesario terminarlo para continuar la siguiente sesin. Ser indispensable que tengas acceso a Internet en tu computadora ya sea en tu casa o trabajo para poder terminar algunas actividades que por alguna razn personal no concluiste en horario del curso. Si es tu primera experiencia en esta rea debers trabajar mucho la parte actitudinal para superar sin enojos las experiencias complicadas que puedan presentarse y de igual forma hacerles ver a los estudiantes que quiz al principio batallen un poco pero el tiempo les dar las competencias para desarrollarlo sin contratiempos. Ver la tecnologa como una estrategia excelente para crecer el mercado de un producto o servicio y no como un obstculo por falta de conocimientos. Comencemos con esta experiencia!!!!!

1.LECTURA/ACTIVIDAD: TERMINOLOGA BSICA DE PGINAS WEB


Qu es internet? Internet es una red de redes de escala mundial por medio de la cual millones de computadoras y de redes menores se conectan y comunican entre s. Provee de distintos servicios como son la World Wide Web, correo electrnico, transferencia de archivos (FTP), acceso remoto a computadoras, etc. Qu es la web? La World Wide Web (o la Web) es uno de los muchos servicios que utilizan Internet para poder funcionar. Fue creado por un britnico en 1989.Se trata de una red de documentos o pginas web interconectados entre s por medio de enlaces o hipervnculos. Actualmente, adems de documentos existe una larga serie de servicios y redes sociales funcionando a traves de la Web. El mtodo ms usual para leer y explorar la Web es el uso de un navegador web como Internet Explorer o Mozilla Firefox. Qu es una pgina web? Una pgina web es cada uno de los documentos individuales que al interconectarse entre s forman sitios web y finalmente conforman a la World Wide Web. En sentido estricto cada vez que el navegador descarga del servidor nueva informacin para presentarnos nuevo contenido, estamos viendo una nueva pgina web. Para fines prcticos tambin lo podemos entender como las secciones internas de un sitio web. En la vida cotidiana muchas veces se utiliza la expresin pgina web como sinnimo de sitio web. Qu es un sitio web? Un sitio web es un conjunto de pginas web (que puede ir desde una hasta cientos de ellas) que estn vinculadas a un mismo dominio y que incorporan un sistema de navegacin para explorar las distintas pginas que conforman al sitio. En general, es deseable que cada sitio web forme una unidad coherente con una consistencia visual y estructural. Qu es un dominio en Internet? Los dominios de Internet se inventaron como alternativa a la direccin IP, para tener un identificador fcil de recordar para conectarse con un sitio web determinado (ejemplo: www.habitatweb.com.mx). La ltima parte de un dominio est pensada para darnos informacin sobre la ubicacin geogrfica y/o el tipo de actividad o informacin con el que se asocia el contenido del sitio. Algunos de los dominios de nivel superior (terminaciones) ms comunes en Mxico son: .com, .com.mx, .net, .org, .edu.mx y .gob.mx. Qu es un IP? Las direcciones IP (IP es un acrnimo para Internet Protocol) son un nmero nico e irrepetible con el cual se identifica una computadora conectada a una red que corre el protocolo IP. Una direccin IP (o simplemente IP como a veces se les refiere) es un conjunto de cuatro numeros del 0 al 255 separados por puntos. Por ejemplo, uservers.net tiene la direccin IP siguiente: 200.36.127.40 Qu es rentar un dominio? Para poder hacer uso de un nombre de dominio es necesario pagar una renta a una de las empresas que se dedican a administrarlos, conocidas como NIC o registradoras de dominios. Al contratar un servicio de hospedaje es posible que el costo y trmites por la renta del dominio estn incluidos. El uso de ciertos tipos de dominio o terminaciones est restringido al cumplimiento de algunas condiciones. Qu es el hosting?
6

El hosting u hospedaje web se refiere a los recursos destinados en una computadora ( servidor) a la cual se conectarn otras mquinas para poder ver y utilizar un sitio web determinado en Internet. Existen distintos tipos de hosting con distintas prestaciones; una de las ms importantes es el uptime o tiempo que est funcionando ininterrumpidamente el servidor. Qu es un servidor? Un servidor es una computadora conectada de manera permanente o casi permanente a la red Internet y que da hospedaje a uno o varios sitios web. Por ejemplo, cuando alguien visita el sitio www.habitatweb.com.mx, lo que est haciendo es establecer una conexin con el servidor en el que est almacenada la informacin del sitio. La palabra servidor puede referirse a la computadora en s, tal como lo acabamos de definir, o al software o programas necesarios para dar el servicio de hospedaje web. Qu es HTML? HTML es el lenguaje de marcado de texto creado desde los primeros aos de la Web para publicar, organizar y vincular informacin. A lo largo de los aos se ha ido reformulando y ha ido ampliando principalmente sus posibilidades de control desde el punto de vista del diseo. Sin embargo, por sus caractersticas intrnsecas, es difcil que llegue a competir con el control grfico total de un sitio construido en Flash. Por otro lado, HTML es la opcin natural para sitios con alto contenido informativo o cuando el posicionamiento en buscadores y capacidad de enlace con otros sitios web es prioritario. Siendo una tecnologa abierta puede convivir fcilmente con otras tecnologas, incluyendo la posibilidad de combinarse con Flash. Qu es un sitio en Flash? En contraste con HTML, la tecnologa Flash fue desarrollada originalmente para hacer presentaciones multimedia o con alto contenido visual destinadas a ser publicadas en la Web. A lo largo de los aos, Flash ha dejado de ser una herramienta exclusivamente de diseo, desarrollando la capacidad de relacionarse con otras tecnologas, mejorando notablemente sus capacidades de manejo de informacin y permitiendo construir inclusive aplicaciones complejas. Sin embargo, Flash sigue siendo la opcin natural cuando el impacto visual es prioritario. En la mayora de los casos convendr analizar las caractersticas y necesidades de cada proyecto web antes de inclinarse por una u otra tecnologa. Qu es HTML5? HTML5 es un estndar que empez a desarrollarse en el ao 2009, y que nos ofrece a los desarrolladores un montn de nuevas caractersticas para lograr de forma ms eficiente cosas que antes slo se lograban instalando complementos como Flash Player (iPad carece de l) o que slo eran posibles en aplicaciones de escritorio o apps nativas para los distintos dispositivos mviles y tabletas. Qu es el ancho de banda? Hablando de una conexin a Internet, se refiere a la cantidad de datos que puede transferirse hacia o desde una computadora por unidad de tiempo. Haciendo una analoga con un ro, el ancho de banda vendra siendo el caudal. El ancho de banda suele medirse en bits por segundo, por ejemplo 1 Mbps significa una transferencia de hasta 1 milln de bits por segundo. Qu es una conexin de banda ancha? En el uso cotidiano, banda ancha es un trmino un tanto ambiguo que se refiere a una conexin rpida y en Mxico generalmente se emplea para denominar cualquier ancho de banda superior al de una conexin tradicional por modem telefnico, la cual alcanza una velocidad mxima de 56kbps (56 mil bits por segundo). Qu es un navegador web? Un navegador web es un programa o software que nos permite visualizar e interactuar con pginas web. El navegador ms comn es Internet Explorer, desarrollado por Microsoft, y desde hace muchos aos viene incluido con cualquier versin de Windows. Existen muchos otros
7

navegadores web, entre los que cabra mencionar el Mozilla Firefox (para Windows, Linux o Mac OSX) y Safari (desarrollado por Apple). Qu es SEO (Optimizacin de sitios para motores de bsqueda? Se refiere a una serie de tcnicas para favorecer el que una pgina web se coloque en buenas posiciones en los resultados de bsqueda de Google, Yahoo, MSN y otros motores de bsqueda o buscadores, para determinadas palabras o frases de bsqueda. Algunas de las principales prcticas que favorecen el posicionamiento en buscadores son: ofrecer contenidos originales que hagan uso inteligente de las palabras clave, utilizar un ttulo descriptivo, vigilar la estructura y accesibilidad del sitio web y disponer de enlaces desde otras pginas web bien posicionadas y con temtica semejante. Qu es el spam en un sitio web? El spam en un las pginas web, algunas veces referido como Black Hat SEO, es el uso de tcnicas engaosas para posicionar artificialmente un sitio web, perjudicando directamente la experiencia del usuario de Internet. Algunos trucos clsicos son el uso de pginas falsas que no tienen inters para los usuarios o la redaccin de textos sin sentido (muchas veces ocultos) que solamente repiten palabras clave con las que les interesa posicionarse. Cuando este tipo de tcnicas son detectadas en un sitio web, ste puede ser penalizado por ejemplo, con la exclusin completa en los resultados de Google. Por otro lado, cuando una empresa se dedica al posicionamiento fraudulento, es probable que con sus clientes tampoco tenga una relacin completamente tica. Qu son las pginas dinmicas? El trmino pginas dinmicas se utiliza con dos significados distintos: Usualmente se refiere a pginas web que son generadas dinmicamente por el servidor con algn lenguaje como php. Es comn que extraigan la informacin a mostrar desde una base de datos como mysql. Los foros de discusin, los weblog, las tiendas en lnea y las pginas que se pueden actualizar desde una interfase web son slo algunos ejemplos. Sin entrar en detalle, mencionaremos que el trmino pginas dinmicas tambin se utiliza algunas veces para referirse a pginas que son visualmente dinmicas o que utilizan ciertas tcnicas especficas de interaccin con el usuario. Qu es un sistema de gestor de contenidos, CMS? Son programas informticos que permiten la creacin y modificacin de pginas web dinmicas por medio de una interfase de administracin y utilizando una base de datos para almacenar la informacin. Estos sistemas permiten, entre otras cosas, que un usuario sin conocimientos de programacin pueda publicar documentos HTML, adems de que le proveen de un mecanismo que automatiza muchos aspectos del manejo de la informacin. Uno de los CMS ms populares actualmente es el sistema Joomla y Moodle .Entre los puntos dbiles que tienen los gestores de contenidos, estn las deficiencias que usualmente presentan los editores de texto incorporados, as como el tiempo y cuidado que requiere del usuario final. Qu es la web 2.0? Durante varios aos se concibi la Web como una serie de documentos (principalmente de texto) interconectados por medio de enlaces o links. Estos documentos eran publicados por una minora y consultados por un grupo mucho mayor de usuarios. Actualmente nos encontramos en una nueva etapa de la Web, en donde cualquier usuario puede crear contenidos, en donde la red no slo vincula documentos sino que tambin facilita el intercambio directo entre personas, en donde la multimedia (imgenes, audio y video) toman un papel preponderante y en donde la Web se va convirtiendo en una enorme herramienta de trabajo y entretenimiento, con una virtualmente infinita cantidad de aplicaciones disponibles, que eventualmente podran desplazar por completo al tradicional software de escritorio. Todo este fenmeno, de magnitud y consecuencias que an no alcanzamos a comprender del todo, es lo que se ha denominado como Web 2.0
8

Qu es la Web 3.0 o Web semntica? Entorno online idlico donde las mquinas pueden interpretar pginas web de la misma forma que los humanos. Qu es la nube? En trmino simples se refiere al uso de un sinnmero de servidores interconectados que ofrecen, a travs de Internet, la posibilidad de guardar infinita cantidad de informacin y ejecutar todo tipo de tareas, desde un procesador de texto, un antivirus o servicios de e-mail.Sin que te des cuenta ests haciendo uso de servicios en la nube continuamente. Un ejemplo tpico es usar una pgina web para acceder a una cuenta de correo en Google, Hotmail, o Yahoo, por mencionar unos cuantos.

Estrategia de evaluacin de la lectura. Terminologa de pginas web. Instrucciones. En cada una de las siguientes oraciones hace falta un trmino asociado con los conceptos estudiados. Completa la oracin apoyndote en la lista de trminos proporcionados, estas pueden repetirse en algunos casos.

1. Este sitio tiene verdaderamente los paisajes ms hermosos de Quertaro, lstima que aparezca en las ltimas pginas de resultados TRMINOLOGA DE Google. El sitio muestra muchas fotos pero sin texto alguno, debe SITIOS WEB tratar de mejorarlo con _______ para que sea ms visitado. CMS 2. Listo!! Termin mi sitio web ahora debo buscar un servicio de _______ SPAM para colocarlo en Internet. WEB 2.0 3. Un maestro de matemticas quiere tener un sitio web para registrar a SERVIDOR todos sus alumnos y tener comunicacin con ellos a travs de el, su PGINAS WEB problema es que no tiene muchos conocimientos de informtica. El debera pensar en utilizar un ________ NAVEGADOR 4. Este sitio web me ha indicado que soy un visitante de Quertaro y que WWW me ha identificado para evitar el mal uso de la informacin. SEO Seguramente lo hace a travs de algn dato que es nico para mi INTERNET computadora llamado ___________ HOSPEDAJE 5. Mi compaero de clase me dice que el s pudo ver correctamente el sitio web que nos dejaron investigar y yo lo veo incompleto. Me FLASH comenta que use otro ______________ porque quiz as pueda NUBE solucionarlo. DOMINIO 6. La mayora de las empresas que te rentan espacios de hosting te IP regalan el ______________________ que utilizarn los visitantes para HTML entrar al sitio. 7. Entre a un sitio web que segn me mostrara informacin sobre como disear un sitio web y resulta que solo me ofreca venta de todo tipo de accesorios musicales. Este sitio maneja seguramente _____________ 8. La mayora de informacin de mi cuenta de correo est almacenada en un ______________ que es propiedad de Hotmail. 9. Mis paps vivieron el nacimiento de la Web, pero yo hoy disfruto las aplicaciones de la _______________ que permiten utilizar una gran cantidad de aplicaciones en Internet. 10. En Microsoft Word asocio pginas, en Excel hojas, en Power Point diapositivas, en un Sitio Web ______________ 11. Este sitio web tiene un diseo especial, tiene animaciones con movimiento que no puedo copiar con el botn derecho. Seguramente estas animaciones estn desarrolladas en _______ 12. Mi maestro de informtica me comenta que tenemos que estudiar un lenguaje que utilizar cdigos para poder crear un sitio web. _______________ 13. Poco a poco este trmino se escucha en todos lados, en pocos aos los discos duros irn desapareciendo pues todo se almacenar en lo que conocemos como__________ 14. Su primer nombre fue ARPANET ahora es ___________________ 15. Invento de TIM BERNERS _________________

10

2.LECTURA/ACTIVIDAD: ELEMENTOS DE UN SITIO WEB EMPRESARIAL.

12 Elementos crticos que cualquier Sitio Web debe contener.


La homepage o pgina de inicio es la pgina ms importante de una web. Puesto que la homepage canaliza la mayor parte del trfico de la web, es crucial que sta est diseada para convertir el trfico en leads (En e-marketing, cuando un usuario despus de una bsqueda en internet llega a una pgina web y rellena un formulario de solicitud de informacin, a esto le llamamos lead.) y en ventas. Para lograr el mximo beneficio es necesario tener en cuenta los siguientes 12 aspectos recogidos a por HubSpot en una infografa: 1. Ttulo. En apenas tres segundos, la web debe responder a la siguiente pregunta: Qu ofrece el portal?. Y sta debe ser respondida de la manera ms simple y clara posible. 2. Subttulo. En el subttulo, la web debe ofrecer una breve descripcin de lo que sta ofrece al internauta. A la hora de escribirlo, hay que ser diferente y mostrar valor aadido. 3. Beneficios. Es importante describir no slo lo que hace el portal, sino por qu interesa lo que hace. Hay que compartir con el internauta los beneficios y las ventajas de la web. 4. Llamadas primarias accin (compra en el sitio) . Incluir llamadas a la accin en la homepage es crucial para el ndice de conversin (Ejemplo: cuando de 100 leads obtenemos 6 ventas, diremos que tenemos una conversin del 6%.). Es recomendable insertar entre 2 y 3 llamadas a la accin que se correspondan con cada una de las fases del ciclo de venta. 5. Caractersticas. Al margen de los beneficios de la web, es necesario mostrar al internauta una serie de caractersticas sobre los productos y servicios ofrecidos. 6. Soporte de otros clientes. Los clientes son la mejor prueba de la eficiencia de una web. Por eso, es importante incluir testimonios de algunos de ellos en la homepage. 7. Indicadores de xito. Los premios y los reconocimientos son tambin elementos clave para causar buena impresin en el internauta. 8. Navegacin. Para disminuir los ndices de rebote dentro de la web, es preciso que est cuente con un mapa de navegacin lo ms simple y claro posible. 9. Imagen de apoyo. En la homepage, hay que apostar por imgenes que reflejen claramente lo que ofrece la web al usuario. Las fotografas impersonales procedentes de bancos de imgenes no son nunca una buena opcin. 10. Oferta de contenido. Para generar leads de la pgina de inicio de la web, es importante ofrecer al internauta contenido de calidad en forma de whitepapers, ebooks o guas. 11. Recursos. El 96% de los internautas que visitan una web no estn dispuestos a comprar. Por eso, es importante ofrecerles informacin sobre el proceso de compra. 12. Llamadas secundarias a la accin. Las llamadas a la accin de una homepage no ocupan siempre un lugar privilegiado dentro de la pgina. Deben estar distribuidas por toda la web para aprovechar al mximo la generacin de leads.

11

http://infografiasmarketing.wordpress.com/2012/05/06/12-elementos-criticos-que-debe-tenertoda-pagina-web/

12

15 elementos clave que todo sitio web debe tener


1. Buen diseo visual. Primero lo primero: el diseo Visual. No s usted,
pero si llego a un sitio web que no es visualmente agradable, mi visita es muy rpida. Esto no quiere decir que todo sitio web deba tener un diseo visual increble, pero si un sitio parece que no se ha actualizado desde 2010, difcilmente lo catalogaremos como uno de los grandes sitios webs. Un diseo limpio y sencillo, por lo general, es todo lo que se necesita. Yo soy uno de los que est de acuerdo con la teora menos es ms. Las primeras impresiones son fundamentales. Y si bien, un buen diseo no es suficiente para mantener a alguien en su sitio, un diseo llamativo lo es, por lo menos, para llamar su atencin el tiempo suficiente como para que eche un vistazo al contenido. 2. Interfaz de usuario. Junto con un buen diseo se requiere una buena interfaz de usuario. La interfaz de usuario es la base funcional de cualquier buen sitio web. Al disear un sitio web, tendr que tener en cuenta el promedio de los usuarios. Quin va a visitar su sitio web? Quin es su cliente ideal?Un analfabeto de la PC? Esto es til para crear una imagen ideal de su visitante y tenerla en cuenta a la hora de planificar el diseo de su sitio. Asegrese de que usted ofrece en su sitio web todo lo que sus visitante quiere encontrar, antes de que realice una compra o se convierta en un suscriptor. Usted deber estar seguro de que su navegacin es sencilla de comprender y coherente con los dems elementos de su web. Que sea evidente que el usuario debe hacer clic en trminos de navegacin primaria, as como en enlaces para acceder a ciertas reas de su contenido. 3. Navegacin primaria desde el primer pantallazo. Parte de tener una navegacin sencilla es asegurarse de que el men principal del sitio este en la parte superior y/o sea visible desde el primer pantallazo de la web. En la actualidad, los monitores son cada vez ms grandes y con mayor resolucin. Por lo general, se considera que el men debe estar entre los 500-600 pixeles superiores de la pgina web. Dentro de este espacio, debe incluirse el logotipo (con un enlace a la pgina de inicio), as como enlaces a las secciones principales de su sitio. Si se quisiera enlazar a sub-pginas podra hacerlo; aunque, en la mayora de casos, esto incrementara el desorden en su diseo. Por ejemplo el men podra ser "Home | Acerca de | Servicios | FAQ | Contacto" y estar ubicado en la parte superior de su sitio web. Adems puede colocar sub-links, tales como Acerca del autor/ Curriculum, en algn otro lugar, como en su barra lateral o como un sub-men bajo el ttulo de la pgina principal de esa seccin, etc. La consistencia es la clave. Debe estar seguro de que el men primario como secundario este en el mismo lugar en las distintas pginas de su sitio web. 4. Repita la navegacin en el pie de pgina. Si utiliza imgenes (o incluso flash) en su men de navegacin principal, es importante ofrecer un duplicado de enlaces de navegacin en su pie de pgina. Incluso si utiliza enlaces de texto en la parte superior, la duplicacin todava es til. No le gustara que sus visitantes encuentren el contenido que estn buscando fcilmente? Muchas veces el pie de pgina puede contener enlaces a informacin adicional, como Los trminos y condiciones. Debemos enlazar cosas que queremos que sean fcilmente ubicables, pero que no queremos aparezcan en el men de navegacin de la parte superior. 5. Contenido significativo. Conoces el dicho... "El Contenido es el Rey"? Usted podra tener una bonita pgina web que capture el ojo de la gente; pero, si el contenido no es bueno, puede apostar a que no van a regresar. Al escribir en su sitio web, es importante que proporcione ayuda, informacin sobre los conocimientos de su empresa, productos, servicios, etc. Utilizar un blog y artculos informativos relacionados con el rea de su especializacin, sera increblemente til. Si bien es importante que usted se venda a s mismo como a su empresa, tampoco hay que sobre promocionarse. En especial en los blogs, las personas que nos leen no quieren escuchar a cada rato yo yo yo, sino saber los puntos en que usted puede ayudarlos.
13

6. Una slida pgina Acerca de. Entre las 10 pginas ms populares de mi propio sitio (despus de la portada, el blog, 3 pginas especficas del blog y mi cartera) est la de Acerca de. Tengo ms clicks hacia mi pgina Acerca de que a mi cartera de clientes o a pginas de servicios, pueden creer esto! Esto es simplemente porque la gente es curiosa. Ellos quieren saber quin est detrs de una empresa o un blog. Sera bueno tambin, incluir informacin sobre su vida, estudios, su propio negocio, etc. La pgina Acerca de ayuda a crear un vnculo ms personal con sus posibles clientes. Si ellos leen lo que usted ha escrito y con ello pueden conocerlo un poco ms, sern capaces de dirigirse a usted en otro nivel de afinidad. 7. Informacin de Contacto. Siguiendo estos consejos, nada podr alejarlo de un potencial cliente, a menos que no sea capaz de ponerse en contacto con usted. Si el cliente est interesado en sus servicios y no puede encontrar una simple pgina de contacto donde contratarlo, pues terminar yndose a la competencia. Lo ideal sera que usted ofrezca ms de un mtodo de contacto. Por lo menos una direccin de correo electrnico y un formulario de contacto. Para hacerlo ms "real", usted debera tratar de incluir un nmero de telfono (y, si es posible una direccin). S que muchos trabajadores independientes trabajan desde una oficina en casa. Una rpida solucin sera tener una lnea telefnica para llamadas de negocios, as como un buzn de correspondencias. Si bien es cierto, todos estos detalles son ms costosos, tambin lo es que se ve mucho ms profesional que alguien que slo incluye una direccin de correo electrnico. Todo depende del tipo de clientes a los que se est dirigido. Por ejemplo, si uno trabaja con clientes corporativos, que vean una direccin y telfono es signo de estabilidad y confianza. 8. Bsqueda. Si usted tiene un gran sitio web o blog, un buscador es realmente til. No hay nada como atravesar cientos de pginas y encontrar el contenido especfico que uno necesita. Si un potencial cliente no puede encontrar algo fcilmente, es muy posible que se vaya donde encuentre ese contenido.Utilizar el buscador de Google en su sitio, o la herramienta de bsqueda de WordPress (o cualquier otra plataforma de blogs o CMS) es bastante sencillo. No es tan fcil de lograrlo con un sitio en HTML, pero an hay servicios que permiten incorporar un formulario de bsqueda en su sitio. 9. Registro / Suscripcin. RSS. Si su sitio web ofrece contenido nuevo constantemente, como con un blog, usted debe tratar de ofrecerlo de la manera ms fcil y cmoda posible. Si tenemos un blog con WordPress, por defecto proporcionamos un feed RSS. Si no tenemos un blog, pero deseamos ofrecer suscripciones a un boletn informativo por correo electrnico, hay muchas empresas que permiten la configuracin y gestin de una lista de correo. 10. Mapa del sitio. Existen dos tipos de sitemaps - uno para los seres humanos y uno de los motores de bsqueda. Un mapa del sitio (html o php, etc.) es para los visitantes de su sitio una valiosa herramienta para encontrar justo lo que estn buscando. Crear un mapa de la web -una lista estructurada de todas las pginas de su sitio web- es especialmente til si usted no puede aadir una herramienta de bsqueda a su sitio. Un enlace al mapa del sitio es otro tema, sera recomendable colocarlo en el pie de pgina de su todo sitio. Un buen mapa del sitio, muestra una lista a todas las pginas de su sitio en formato jerrquico. 11. Separar el diseo del contenido. Ha pasado mucho tiempo desde los das en que se utilizaban tablas para el diseo HTML. Los mejores sitios utilizan una combinacin de XHTML y CSS, creando la separacin del diseo respecto al contenido. Con el uso de las etiquetas < div > se puede crear elementos que engloben texto e imgenes en sus pginas. Sin un archivo CSS slo se veran los elementos bsicos - el texto -, que es lo que los motores de bsqueda quieren ver. El archivo CSS externo es el que especifica las fuentes, colores, imgenes de fondo, etc. para el diseo de su sitio web. Lo que supone un ahorro de trabajo, ya que no hay que ingresar y modificar cada pgina web esttica a fin de cambiar el color de un texto. Con esta separacin, los motores de bsqueda ya no tienen que recorrer a travs de todo el exceso de cdigo a fin de averiguar su contenido. Y con archivos separados, el contenido puede cargar ms rpido, lo que es positivo desde el punto de vista del visitante.
14

12. Validacin XHTML / CSS. No es suficiente desarrollar su sitio web con XHTML y CSS, tambin tiene que tener un cdigo preciso. Hay muchas razones para escribir cdigo vlido. Una de las principales es estar seguros de que nuestro sitio se ver bien en la mayora de navegadores y sern accesibles a los motores de bsqueda. 13. Compatibilidad del navegador. Aunque usted puede vivir y respirar dentro de Firefox, su cliente puede que no. Hay muchas posibilidades de que su cliente este utilizando Internet Explorer y peor an, hay una mayor posibilidad de que estn usando Internet Explorer 6. Es importante crear una pgina web accesible a tantos navegadores como sea posible, y si podemos hacerlo compatible con las distintas plataformas, sera ideal. La mayora de usuarios finales utilizan una PC, por lo que esta debera ser nuestra principal plataforma. Sin embargo, muchas personas podran utilizar Mac, por lo que sera bueno prestarles atencin, tambin 14. Imgenes Web optimizadas. Al disear la web, es importante guardar todas las imgenes en un formato comprimido. No tanto como para que sus imgenes se vean pixeladas; pero comprimiendo todo lo que sea posible, al mismo tiempo que mantenemos la calidad. Si ests acostumbrado a hacer trabajos de impresin, sabr que 300 ppp es la norma. No es el caso con los sitios web. Al guardar sus imgenes en 72dpi obtendremos un mucho menor tamao del archivo (o lo que es lo mismo, el tiempo de carga ser ms rpido para sus visitantes). Programas como Adobe Photoshop tiene una opcin "Guardar para Web" que convierte automticamente los archivos de imagen a 72dpi. 15. Estadsticas, seguimiento y anlisis. Aunque este elemento est detrs de escena y es poco probable que un visitante lo sepa, es fundamental. Hay muchos servicios que ofrecen seguimiento de estadsticas web, incluyendo informacin relevante como: Cul es el nmero de hits recibidos?, Cuntos de los visitantes son nicos?, Cmo llegan las personas a mi sitio Web?, Cules son los trminos de bsqueda con el que encuentran mi sitio?, Qu sitios web me enlazan?

15

Estrategia de evaluacin de la lectura. Elementos de un Sitio Web. Instrucciones. Asocia las oraciones con la imagen correspondiente de acuerdo a la lectura estudiada.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

Ttulo Subttulo Beneficios Llamada primarias a la accin Caractersticas Soporte Indicadores de xito Navegacin Imagen de apoyo Oferta de contenido Recursos Llamadas secundarias

16

Estrategia de evaluacin de la lectura. 15 Elementos de un Sitio Web. Instrucciones. Asocia las oraciones con los elementos a que pertenecen de acuerdo a la lectura estudiada, busca la relacin ms lgica. Un buen diseo visual ( ) 1

Interfaz de usuario ( )

17

Navegacin primaria desde el primer pantallazo ( ) Repita la navegacin en el pie de pgina ( )

Contenido significativo ( ) Una slida pgina acerca de ( )

5 Las fotos que quieres colocar en la pgina web son muy pesadas y provocarn que esta tarde en cargar mucho tiempo. 6

Informacin de contacto ( ) Bsqueda ( )

7 8 Te recomiendo este sitio para buscar tus cosmticos, carga muy rpido y puedes encontrar rpidamente lo que buscas y pagar sin problemas en lnea. 9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Registro/Suscripcin RSS ( )

Mapa del Sitio ( )

10

Separar el diseo del contenido ( ) Validacin XHTML/CSS ( ) Compatibilidad con el navegador ( )

11 12 Quin elabor este sitio!!! Tremendamente desordenado y sin contrastes de colores, necesita un curso de diseo. 13

Imgenes Web optimizadas ( )

14

Somos una comunidad mundial de personas trabajando juntas desde 1998 para crear un mejor Internet. Y somos un proyecto de software libre y cdigo abierto cuyo software ha sido usado para crear algunas de las mejores aplicaciones de Internet.

Estadsticas de seguimiento y anlisis. ( )


18

15 El sitio no abre bien en Chrome, me comentan que en Explorer si se puede ver.

3.LECTURA/ACTIVIDAD: ELEMENTOS DEL DISEO WEB


Si has visitado pginas web, algn sitio de empresas o instituciones, te has dado cuenta de que siempre est organizada dependiendo de lo que quieren proyectar. Todo sitio cuenta con un ndex, donde indican los principales temas que contienen, tambin est representado por los colores de la institucin o siempre tratan de buscar una combinacin de los colores de su logotipo. Se dice que el diseo de una pgina Web tiene la esencial misin de vincular al usuario con el vasto mundo informativo, de un modo agradable y eficiente, este se debe de poder mover en el sitio sin dificultad. Cuando un diseador est elaborando un trabajo de diseo ya sea un logotipo, un cartel, un volante, una pgina web va a depender de algunos criterios del perfil profesional bajo los criterios de: habilidades personales, mbito profesional y aspecto tecnolgico. Para disear pginas web es necesario conocer varias disciplinas tales como: informtica, comunicacin, diseo y ciberntica. Debe enfatizarse en el hecho de que la presentacin de la informacin por s sola no garantiza el xito del mensaje, precisa de comunicacin, y esta a su vez de un buen diseo para cumplir con el objetivo. Si el cdigo es errneo, es obvio que el mensaje ser errneo para un pblico errneo. Un mal diseo tiene las siguientes caractersticas: No saber lo que se quiere comunicar. Falta de conocimiento del significado psicolgico de los elementos. El favoritismo por lo esttico. La no valoracin de lo funcional o viceversa

Estructura y planificacin de sitios Web Antes de proyectar o disear una pgina web, es necesario seguir los siguientes lineamientos en la etapa de creacin: En primer lugar, es necesario hacer un anlisis de la informacin que contendr la pgina. Esto es, hay que informarse perfectamente sobre la temtica del contenido. Analizar el sector a quien ser dirigido el mensaje y poder identificar qu tipo de sensaciones e ideas queremos transmitir, para lo cual contamos con recursos como el uso de tipografas, el color y la composicin, para que todo esto se produzca de una manera clara y concisa. Debemos fijar los objetivos que queremos alcanzar: es decir, que debemos definir si lo que se quiere es educar, informar, vender, etc. Ya con los objetivos definidos, es importante recopilar los elementos que contendr nuestra pgina, como son textos, imgenes, grficas, etc., todo el material grfico que sea necesario para poder, entonces organizarlos. Realizar una estructura con toda la informacin y elementos recopilados. Es recomendable realizar un boceto para poder visualizar de manera ms clara todos los elementos que se incluirn (texto, imgenes, botones, hipervnculos), no olvidar los bocetos de las pginas con las que estar enlazada.

Lenguajes para la web


Para poder crear una pgina web o programar, necesitamos utilizar determinado lenguaje de programacin. Estos lenguajes permiten desarrollar diversas acciones en los sitios web. Existen varios lenguajes para la elaboracin de sitios web como el lenguaje HTML, el XML, el CSS, el javascript, el SMGL, los cuales pueden ser utilizados incluso combinando varios.
19

El lenguaje XML es un estndar para el intercambio de informacin entre diferentes instancias. Puede ser utilizado para estructurar bases de datos, editores de texto u hojas de clculo. XML representa la interfaz ideal entre las pginas web y las bases de datos. El lenguaje Javascript es un lenguaje independiente de cualquier plataforma o sea que puede ser ejecutado en Windows, Apple, Linux o la misma internet. Utilizado para crear pequeos y grandes programas para poder dar efectos e interactuar con los usuarios como son el correo o el chat, contadores de visitas, calendarios y relojes. El CSS (Cascading Style Sheets) es un lenguaje que abarca cuestiones como fuentes, colores, mrgenes, fondos etc., y se usa para formatear documentos estructurados en HTML. El ms popular y utilizado de los lenguajes es el HTML (hypertext Markup Language o lenguaje de marcacin de hipertexto) aunque con ciertas limitantes y es un derivado del lenguaje SMGL (Generalized Markup Language), lenguaje poco usado por su complejidad. Un documento HTML contiene instrucciones especficas (etiquetas o tags) que indican al navgate (Internet Explorer) cmo desplegar diferentes elementos tales como: texto, imgenes, fondos, sonidos, videos, etc. Hoy en da tambin existen infinidad de programas para realizar pginas web tales como Flash, Dreamweaver, Adobe Golive, FrontPage y softwares gratuitos. El programa de Flash Player fue diseado para crear presentaciones en multimedia para la web, pero los recursos de animacin de ste, han hecho de l, una herramienta muy popular y vistosa para la creacin de pginas y sitios ms llamativos y de interaccin con el usuario, permite integrar grficos vectoriales (mapas de bites), textos, botones, imgenes, sonidos, videos y un lenguaje de programacin propio llamado Actionscrip para hacer la animacin y todo dentro de un mismo software, y de manera muy precisa.En la utilizacin de Flash Player se debe ser muy cauteloso ya que no todos los usuarios pueden tener banda ancha (indispensable) o la ltima versin del programa, lo cual sera un problema para su ejecucin. Dreamweaver es la herramienta de diseo de pginas web ms avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarn en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere. Cumple perfectamente el objetivo de disear pginas con aspecto profesional, y soporta gran cantidad de tecnologas, adems muy fciles de usar. Diseo en Sitios Web El diseo est compuesto por tres elementos colores, formas y texturas. Los 3 deben estar siempre presentes, de lo contrario no existira Diseo propiamente dicho. El significado de los colores A travs de los aos encontramos al filsofo Aristteles quien indic que todos los colores se forman de la mezcla de cuatro colores y otorg un papel fundamental a la incidencia de la luz y la sombra sobre los mismos; los colores bsicos eran los de tierra, fuego, agua y cielo. Leonardo Da Vinci tambin defini al color como propio de la materia estableciendo la siguiente escala de colores bsicos: blanco como el principal, este permite recibir a los dems, despus estableci al amarillo para la tierra, verde para el agua, azul para el cielo, rojo para el fuego y negro para la obscuridad. Algunas de las caractersticas de stos son el tono, la saturacin y la brillantez. El tono es el color en s mismo, es la cualidad que define la mezcla de un color con el blanco o el negro, es decir, segn su tonalidad un color puede ser rojo, verde, amarillo, etc. As podemos decir que existen tonos clidos o tonos fros. Los clidos son aquellos asociados con el fuego y
20

la luz solar, tales como el rojo, el amarillo y los naranjas, mientras que los fros se relacionan con el agua y la luz de la luna como son: el azul y el verde pero por ejemplo el verde si tiene ms cyan que amarillo, tendra una tendencia a ser fri, y si tiene ms amarillo parecera ser ms clido. Por eso es importante saber manejar los tonos. La saturacin constituye la pureza del color respecto al gris, y depende de la cantidad de blanco que presente. Cuanto ms saturado est un color, ms puro es y menos mezcla de gris posee. La brillantez es la luminosidad de un color, es decir, que es la capacidad de reflejar el blanco se refiere a la claridad u obscuridad de un tono. La luminosidad puede variar aadiendo negro o blanco al color. El color en la web Dentro de la teora del color existen los colores luz y los colores pigmento. Los colores pigmento son los colores fsicos (pinturas y tintas) son el azul cyan, el rojo magenta y el amarillo medio ms el blanco y el negro, mientras que los colores luz (los que apreciamos en todo tipo de monitores) son el azul, el magenta, el amarillo y el verde, el blanco es la suma de todos los colores (luz) y el negro es la ausencia total de color. El uso del color a la hora de hacer el diseo de un sitio web es de suma importancia, ya que como se ha visto, los colores son capaces de trasmitir una infinidad de sensaciones o sentimientos aplicando una mnima parte de este elemento. El uso adecuado de un color es una clave segura de xito para captar la atencin de los visitantes de nuestra pgina. Los monitores de ordenador muestran siempre los colores con el modelo RGB, es decir, la mezcla de los tres primarios luz. Rojo (red), verde (green) y el azul (blue). Las inciales en ingles dan lugar al nombre RGB para definir todos los colores. Por lo cual en la web un color se define por la cantidad de cada uno de estos primarios que contiene, cantidad que va de 0 a 255. Habitualmente se expresa con seis dgitos (RRGGBB) para cada componente. Para mayor comprensin diremos por ejemplo que un color X tiene rojo= 16, verde= 123 y azul=168, hablando en decimales. Otro ejemplo seria el negro: representado por 00, 00,00, pues es la ausencia total del color mientras que el blanco seria (mximo de rojo, verde y azul). La recomendacin para el xito de nuestra pgina es mezclar colores que sean armnicos entre s y que no vayan ms all de 4 colores para lograr un buen esquema, recordando que tambin contamos con elementos auxiliares como la luminosidad, de los mismos colores elegidos. El modelo CMYK se basa en los colores de salida de impresin (colores pigmento) C= cyan, M= magenta y Y= yellow y se mide en %. As un color brillante podra ser 3% cyan, 85% magenta 90% amarillo y 0 % negro. Y aunque este sistema es estndar, podra variar un poco dependiendo del sistema de impresin y sus condiciones. La percepcin depende de cada uno, as que, para gustos, los colores. No obstante, podemos atribuir algunas caractersticas ms o menos comunes que te ayudarn a escoger la coloracin ms indicada para cada para tu sitio web. Blanco: pureza, pulcritud, limpieza, luz. salo para fondos y para facilitar la lectura. Va bien con cualquier otro color. Gris: neutral, formalidad, tristeza, equilibrio. Estupendo para complementar al negro y al blanco. Puedes jugar con diferentes tonos de gris para combinar con todos los dems colores. Negro: caro, elegante, misterio, sobriedad, duelo. Ideal para productos de gama alta y para aadir contraste. El negro es la ausencia de color y permite a los tintes adyacentes cobrar mayor protagonismo. Rojo: fiesta, pasin, peligro, ansiedad, calor, estmulo, provocacin, agresin. salo para llamar la atencin, pero siempre en dosis moderadas. Azul: pasivo, fro, suave, unidad, confianza, frescor. Combnalo con naranjas, verdes o metlicos. Tiende a contraerse, a hacer una superficie ms pequea.
21

Amarillo: calor, animacin, cobarda, mentira, visibilidad, enfermedad, luz. Combina bien con otros colores, y como el rojo, es ideal para resaltar. De hecho, la bandera espaola se dise roja y amarilla para poder ser bien visible en el mar a largas distancias. Adems es un color clido y expansivo. Verde: ecolgico, alimento, paz, envidia, celos, calma, equilibrio. Combina bien con el azul o el marrn y activa la creatividad. Naranja: energa, juego, estmulo, atencin, salud, alegra. Procura no abusar de este color, muy dominante y expansivo al ser la mezcla de rojo y amarillo. Violeta: nobleza, espiritualidad, riqueza, psicodelia, misterio. Mzclalo con colores suaves y poco dominantes para crear un efecto equilibrado. Rosa: dulce, femenino, suavidad, debilidad, infancia. Ideal para proyectos en donde la mujer es el pblico objetivo principal, aunque en grandes dosis resultar cursi. Nunca lo utilices para la web de un grupo de heavy metal.

Las texturas El diseo web no ha escapado a esta tendencia a decorar elementos o pginas enteras empleando la textura. En el caso del diseo web, la textura es solo un elemento visual y no tctil, como en otros casos, y tiene su precedente en la aplicacin de la textura en la pintura. Si bien se ha empleado desde siempre en el diseo web, en los ltimos aos ha habido una tendencia al aumento del empleo de la textura, no solo como elemento decorativo, sino como forma de resaltar otros objetos. Basta con hacer un recorrido por la web, para comprobar que la utilizacin de este elemento de diseo ha ido en aumento, no solo por la cantidad de pginas que lo emplean, sino por la multiplicidad de formas en que se hace. Y esto est relacionado con la versatilidad que presenta la textura como elemento de diseo, ya que abarca a todo tipo de objetos y en una gran variedad de aplicaciones diferentes. Quiz la forma ms simple y ms empleada de utilizacin de la textura, sea en los fondos de las pginas web. Como todo elemento de diseo, la textura no siempre tiene cabida. Cuando nos enfrentamos a la posibilidad de incorporar elementos con textura debemos preguntarnos en primera instancia, si est de acuerdo con el resto de los elementos. Luego, debemos preguntarnos si el tema de la web se adeca a la colocacin de elementos texturados. Y al final, en caso de que ambas respuestas son afirmativas, analizar qu clase de textura y en qu elementos debemos colocarla. Por novedoso que sea un efecto, no siempre es bueno emplearlo. Son muchas las ocasiones en que encontraremos que un diseo plano se adeca ms a lo que pretendemos. Como cualquier otro elemento, tiene gran importancia y su utilizacin puede generar efectos satisfactorios, pero siempre que se le utilice en forma adecuada y concordante con el resto del diseo Formas en el diseo web La forma no es solo uno ms de los elementos de diseo web. Es quiz el ms importante, gracias a la importancia que tiene en la comunicacin visual de los elementos de diseo web (al igual que en diseo grfico y otros tipos de diseo) es la forma. Su importancia radica en la estrecha relacin que tiene este elemento con el mundo real. Basta con mirar en nuestro rededor para notar que la forma es el elemento ms fcilmente distinguible y el ms abundante.
22

Adems, resulta mucho ms sencilla la interpretacin de los mensajes visuales que otros, y la forma es el de ms sencilla captacin de todos los elementos visuales. Como forma nos referimos a la figura espacial de los cuerpos, por lo que necesariamente tiene dos o tres dimensiones. En el diseo web pueden representarse las formas en su estado natural a travs de las imgenes, o emplearse representaciones abstractas de las mismas. Esto se logra gracias a la capacidad humana de abstraer. A pesar de que el diseo web tiene dos dimensiones, gracias a la utilizacin de luces y sombras un elemento de dos dimensiones puede brindar la sensacin de un elemento de tres dimensiones o representarlo en forma abstracta. La forma es empleada en muchas ocasiones como mtodo de lograr una comunicacin sencilla y de fcil interpretacin. En el diseo web muchas veces es necesario transmitir mensajes en forma rpida, para lograr atraer la atencin del usuario hacia ciertos puntos o darle a entender donde se encuentran determinados objetos con facilidad. El empleo extendido de la forma por parte de diseadores y programadores ha hecho que muchos smbolos e conos basados en la forma sean de comprensin sencilla, facilitando de esta manera el acceso de los usuarios a los diferentes medios, opciones y servicios que contiene la web. Tipos de forma y su utilizacin en el diseo web Las formas pueden dividirse en tres tipos bsicos: las formas geomtricas, las formas naturales y las formas abstractas. Las formas geomtricas es en lo primero que pensamos cuando se habla de formas. No son frecuentes en la naturaleza dada la regularidad de las mismas. Los cristales son uno de los pocos ejemplos de formas geomtricas naturales. El empleo de la forma geomtrica en todo tipo de diseo es muy frecuente, dado que generalmente se trata de objetos simtricos y regulares, lo que brinda a quien lo contempla, sensacin de seguridad, orden y prolijidad. Las formas geomtricas ms usuales en el diseo web son el cuadrado, el rectngulo, el tringulo y el crculo. La pgina que mostramos a continuacin es un ejemplo de empleo de la forma geomtrica.

Las formas naturales tambin tienen un empleo frecuente, ya que permite una rpida asociacin con un mensaje. La mayora de las formas naturales empleadas en el diseo web son extradas de imgenes. La siguiente pgina web nos muestra un ejemplo de ello:

23

Las formas abstractas constituyen el terreno menos explorado, aunque en los ltimos aos se ha producido un incremento en su empleo, gracias a la aparicin de nuevas tendencias en el diseo, asociadas a tendencias artsticas como el arte abstracto o el pop art. Dentro de esta categora tambin se incluyen aquellos elementos creados para representar algo sin emplear una imagen del mismo. Un claro ejemplo de esto son los conos, que sirven para que los usuarios reciban el mensaje de que desde all se puede acceder a un contenido, mediante una representacin grfica basada en una forma. El siguiente es un ejemplo de utilizacin de formas abstractas:

En este ejemplo, el logotipo est formado por una forma que es la abstraccin de un corazn. Si bien todos sabemos que se trata de un corazn, en realidad no es la imagen de un corazn, sino de una representacin abstracta del mismo. Muchas formas abstractas son smbolos empleados universalmente y se las emplea para enviar a los usuarios un mensaje de fcil comprensin. Algo que resulta imprescindible en todo buen diseo, es dirigir la vista del usuario por las secciones que el diseador entiende que son ms importantes. La utilizacin de formas como elemento para dirigir la vista del usuario es muy recurrente en el diseo de pginas web, ya que los atributos de la forma son ideales para llamar la atencin de los lectores hacia aquellas secciones de mayor inters. La colocacin de una forma colorida y llamativa junto a un texto, dirigir fcilmente la atencin del usuario hacia el mismo. Puedes ver algunos diseos agradables de Sitios Web en este enlace
http://blogvecindad.com/50-disenos-agradables-hechos-con-css/

24

Estrategia de evaluacin de la lectura. Diseo de Sitios Web. Instrucciones. Da respuesta a los siguientes cuestionamientos:

1. De tu experiencia como navegador describe qu caractersticas has observado en pginas mal diseadas. Al menos cuatro: a. b. c. d. 2. Un grupo de personas dedicadas a la jardinera (construccin y mantenimiento) han decidido formar una micro empresa de este ramo para buscar crecimiento. Uno de las reas que quieren desarrollar lo antes posible es su Sitio Web. Pensando como diseador responde lo siguiente: a. A quines va dirigido el sitio i. ii. iii. iv. v. b. Cul sera el objetivo del Sitio Web

c. Cules son los contenidos principales que deber incluir i. ii. iii. iv. v. 3. Especficamente para qu usaras Flash en el Sitio si se elaborar en Dreamweaver. Describe el contenido de lo que propones.

25

4. Cules seran los 4 colores que utilizaras en el sitio de tu diseo? Qu significan estos colores?

5. Cul sera un mal uso de una textura en tu sitio y cul un buen uso de la misma en este Sitio?

6. Esquematiza una forma abstracta relacionada con la Jardinera

26

4.LECTURA/ACTIVIDAD: E-BUSINESS Negocios electrnicos.


E-business es la integracin del negocio de una empresa incluyendo productos, procesos y servicios por medio del Internet. Las estrategias de e-business Implican el rediseo total de los negocios, cambiando y revisando todos los procesos en la compaa para capturar las eficiencias que pueden proveer el uso de la tecnologa en redes. Incluyen oportunidades de obtener ganancias, pero el foco principal est en los costos y la eficiencia en las operaciones

Comunicacin y colaboracin empresarial: esta parte del e-business se ocupa de mejorar los procesos de comunicacin para lograr una mejor integracin de los sistemas y eficiencia. A su vez podemos enumerar algunas de las funciones que pueden ser incorporadas en esta parte: e-mail, mail de voz, foros de discusin, sistemas de Chat, video conferencias, y sistemas de colaboracin. Sistemas internos de negocio: quizs esta sea una de las partes menos visibles del e-business, pero no por ello la menos importante. Dependiendo de la escala de nuestro negocio, debemos tener una estructura de informacin que nos de soporte para poder tomar decisiones y realizar las acciones necesarias. Debemos poder delegar en los sistemas informticos la mayor cantidad de procesos posibles, para poder dedicarnos verdaderamente a nuestro negocio, y no perder tiempo en procesos que no hacen al negocio. Dentro de los sistemas internos de negocio podemos enumerar algunos de ellos: CRM - Customer Relationship Management (Manejo de las Relaciones con el Cliente). Las herramientas de gestin de relaciones con los clientes (Customer Relationship Management CRM) son las soluciones tecnolgicas para conseguir desarrollar la "teora" del marketing relacional. El marketing relacional se puede definir como "la estrategia de negocio centrada en anticipar, conocer y satisfacer las necesidades y los deseos presentes y previsibles de los clientes". ERP - Enterprise Resource Planning (Planeamiento de los Recursos de la Empresa), sistemas para el manejo del conocimiento, sistemas para el manejo de la documentacin, control de procesos, etc. SCM- Supply Chain Management (Gerencia de la cadena de Suministro). En una empresa productora, el tiempo que lleva terminar un producto depende en gran parte del suministro de materias primas, de elementos de ensamblaje o de piezas sueltas en todos los niveles de la cadena de produccin. El trmino "cadena de suministro" hace referencia a todos los eslabones de esa cadena: Compras, Suministro, Gestin de existencias, Transporte y Mantenimiento. En teora, una herramienta SCM permite rastrear el paso de las piezas (rastreabilidad) entre los distintos participantes de la cadena de suministro. E-procurement (tambin conocida como Directorio de Proveedores) Es un trmino genrico que se refiere a actividades de compra electrnica negocio a negocio va Internet en donde se involucra la automatizacin de procesos internos y externos relacionados con el requerimiento, compra, suministro, pago y control de productos utilizando el Internet como medio principal en la comunicacin cliente-proveedor.

1.

2.

27

3. e-commerce, El Comercio Electrnico es bsicamente el uso de redes (Internet) para


realizar la totalidad de actividades involucradas en la gestin de negocios: ofrecer y demandar productos y servicios, buscar socios y tecnologas, hacer negociaciones con su contraparte, seleccionar el transporte y los seguros que ms convengan, realizar los trmites bancarios, pagar, cobrar comunicarse con los vendedores de su empresa, recoger los pedidos, es decir todas aquellas operaciones que requiere el comercio. Dentro del e-commerce se encuentra el e-Marketing.

Internet y el e_Marketing. El Marketing en Internet se origin a inicios de los 1990s como


pginas web sencillas, de solo texto que ofrecan informacin de productos. Luego, siguiendo el desarrollo del internet, evolucion en avisos publicitarios completos con grficos. El e-Marketing es la utilizacin de Internet para el marketing directo con el fin de entrar en contacto con los potenciales clientes, convertirlos en clientes y fidelizarlos. El e-Marketing es una opcin muy utilizada por las empresas para promocionar y difundir sus productos y servicios. El motivo es el bajo coste y la obtencin de las preferencias de sus clientes. Actualmente internet constituye un medio de comunicacin cada da ms importante y utilizado por millones de personas en todo el mundo. Como sabemos, Internet es un medio interactivo, que a diferencia de los medios tradicionales como radio o televisin, permite conocer las preferencias y tendencias de consumo del posible cliente y desplegar informacin personalizada de acuerdo a ellas. Internet ha cambiado mucho el mundo del marketing y de los negocios en general. Por eso, debemos de tener en cuenta el empleo de ese medio a la hora de elaborar nuestra estrategia de marketing. Actualmente, el eMarketing (Marketing en internet) es una alternativa cada vez ms utilizada por las empresas para difundir y promocionar sus productos y servicios. La verdadera importancia del marketing en Internet es que, definitivamente, se muestra con todo su poder y se hace casi infinito. La publicidad en internet ofrece muchas ventajas:

Permite medir de forma muy precisa y de forma continua el resultado de las campaas de publicidad. Permite entrar directamente en contacto con los potenciales clientes o usuarios. Permite continuas adaptaciones y modificaciones de las campaas segn las exigencias del momento. Es mucho ms econmico que los medios de comunicacin "tradicionales". Analizar el tipo de clientela que adquiere nuestro producto.

Actualmente, existen muchas agencias especializadas en la publicidad en internet. Esas empresas se dedican a buscar anunciantes, asesorarlos, crear anuncios y banners para internet, desarrollan planes de marketing en internet, analizan las audiencias, etc. SEO - Optimizacin en buscadores Qu significa optimizacin en buscadores? Cuando hablamos de SEO, estamos hablando del intento o de la tarea de ajustar la informacin de las pginas que se quiere aparezcan en las primeras posiciones entre los resultados de las bsquedas. Viene del ingls Search Engine Optimization, es decir optimizacin para motor de bsqueda. Tambin se entiende con esta expresin las tcnicas de desarrollo de los sitios web para
28

mejorar la posicin del sitio entre las SERP (pginas de resultados del buscador). Actualmente muchas empresas se dedican a realizar esta tarea por cuanta de otras empresas. Tambin nos referimos a SEO para definir las personas que realizan este tipo de trabajo. Tcnicamente hablando, lo que se posicional son las URLs de las pginas. Los sitios lograrn un buen posicionamiento como consecuencia. Las tcnicas SEO pueden ser desmedidas y afectar los resultados naturales de los grandes buscadores por lo que si incumplen las clusulas y condiciones de uso de los mismos pueden ser consideradas, en algunos casos, como una forma de SPAM, el spamdexing. El trabajo es amplio, ya que el posicionamiento involucra al cdigo de programacin, al diseo y a los contenidos y los buscadores tienen reglas de funcionamiento distintas. Las empresas SEO en la actualidad En el ltimo ao hemos asistido a un autntico pasaje de empresas que se dedican al posicionamiento web, con sus frmulas especializadas para ofrecer al cliente las primeras posiciones. Te aconsejamos que tengas mucho cuidado, si estas pensando contratar a alguna: existen frmulas penalizadas por los buscadores. Hay que informarse bien y a lo mejor te dars cuenta que no te hace falta contratar a una empresa, a lo mejor t solo puedes mejorar tu web. Posiblemente lo que realmente te hace falta es cuidarla un poco, que alguien revise sus cdigos, optimizarla para que los buscadores la reconozcan, un lavado de cara mejorando su atractivo, ofrecer herramientas que gusten a los usuarios, revisar los enlaces rotos... Algunos consejos SEO para Google - Google actualiza su ndice constantemente: mantente informado! - Es mejor usar guiones que guiones bajos en las URLs - Google no penaliza a los sitios por errores en el cdigo ya que estos son demasiado frecuentes - Considera contenido duplicado a las copias exactas o al contenido muy similar - Las traducciones no son consideradas contenido duplicado - Los blogs son iguales que cualquier otro sitio - Google no puede acceder a zonas de registrados: permitele que "vea" algo de esas zonas - Detecta los colores iguales (o muy cercanos) que el fondo - Un ttulo diferente para cada pgina - Minimizar el nmero de redirecciones hasta llegar a una URL - Minimizar el nmero de parmetros de una URL - Google est enfocando sus sistemas a combatir spam en otros idiomas (no ingls) Marketing por e-mail Se trata de una forma directa de marketing, utilizando el correo electrnico como medio de comunicacin comercial. Cada mail que enviamos supone un posible cliente o usuario de nuestro producto. Hoy en da es algo bastante comn y utilizado por las empresas, sea para promocionar algo cmo para informar de novedades/nuevos productos a los clientes ya fidelizados. Ventajas: - Es muy barato - Si hecho bien, es segundo nicamente al SEO entre las estrategias de marketing en internet, respecto el retorno de inversin - Es inmediato: un email tarda pocos segundos en llegar - Permite al anunciante de "empujar" el mensaje hacia el pblico, mientras que un sitio web tiene que estar "esperando" a las visitas de la gente - Se pueden alcanzar personas que voluntariamente piden recibir informacin sobre temas de su inters en su correo electrnico - Se calcula que ms de la mitad de los usuarios de la red revisan su correo electrnico cada vez que se conectan

29

La gran desventaja de este mtodo es la posibilidad de que nuestro e-mail se confunda con el SPAM (correo no solicitado, no deseado). Concepto de Pago por Click. Pay Per Click (PPC). Si tu pgina no aparece entre los 20 primeros resultados de un buscador (lo cual es bastante optimista) posiblemente no conseguirs visitas a travs de buscadores, a menos que pagues por ello. Muchos buscadores, sin embargo, cuentan con una columna en la parte derecha de los resultados de bsqueda en la que puedes comprar un enlace patrocinado , es decir, puedes aparecer en esa lista previo pago de una cuota. Esto es lo que se conoce como Pay Per Click (PPC). Los sistemas de, pago por clicko pago por visitas son modelos publicitarios basados en que el anunciante paga por cada visita real que reciba a travs del sistema. En un buscador PPC, los anunciantes luchan por obtener las primeras posiciones en las palabras clave de su inters. La lucha ms elevada, junto con otros criterios, hace que un anuncio aparezca en los primeros lugares del listado de resultados, lo que (se supone) har que esa web tenga un mayor nmero de visitantes, aunque encareciendo el coste por visita. Los principales sistemas PPC que actualmente operan en Espaa son: Google Adwords, Espotting y Overture. Todos se nutren de resultados patrocinados o enlaces publicitarios a los principales buscadores y portales de la red. Google, Overture o Espotting poseen programas de pago por visitas que permiten a los anunciantes seleccionar una serie de palabras clave, unas URLs asociadas a las que dirigir a los visitantes, ttulos y descripciones personalizados por cada palabra clave, elementos que apareceran en los resultados ofrecidos por Google, Overture y Espotting as como en sus correspondientes redes de asociados. Sin embrago, el orden de anunciantes en el caso de Google ya no depende solo de la apuesta de los anunciantes, sino de otros elementos como la tasa de clicks (Click-Through Rate CTR) del anuncio. La ventaja fundamental que presentan los sistemas de Pago por click es su capacidad de proporcionar visibilidad casi inmediata a los anunciantes en los principales buscadores y portales. Su inconveniente radica en su, en muchas ocasiones, elevado coste por lo que debe complementarse con campaas de posicionamiento en resultados gratuitos y sistemas de medicin de rentabilidad. Cmo funciona el Pay Per Click? Primero debes elegir los trminos que son importantes para tus clientes, aquellos trminos que las personas buscaran en el buscador. A continuacin, investiga cunto estn pagando otros anunciantes para aparecer en esas listas de enlaces patrocinados. Cuanto ms arriba quieras aparecer en la lista de patrocinadores, ms tendrs que pagar. La lista la encabeza el mejor postor .Evidentemente, querrs averiguar cunto pagas, por cuntos clientes y qu cantidad de negocio te proporcionan dichos visitantes. Deberas ser capaz de identificar ms de 100 trminos de bsqueda relacionados por los que podras querer pujar por un nico producto o servicio. Ventajas - PPC es el mtodo ms efectivo para conseguir clientes potenciales - Tienes la posibilidad de controlar continuamente el coste por visitante - Es simple: cuanto ms pagues, mejores posiciones tendrs en la lista de enlaces patrocinados - Slo pagas por los visitantes que hacen clic en tu anuncio - Con PPC puedes elegir los trminos para anunciar tus productos y servicios -Genera trfico de calidad en tu web ya que el visitante puede leer una descripcin de tu actividad antes de hacer clic en tu anuncio.

30

CPM - Pago por impresiones Qu es una impresin? Cada vez que un usuario accede a una pgina web concreta que la que se encuentra un banner, ste es mostrado. Eso se llama "impresin". Una impresin corresponde a un usuario representado por una nica direccin IP que visualiza una pgina web con un anuncio o banner publicitario. El paso siguiente es el "click through", es decir, cuando el usuario clica sobre ese banner y es redirigido a otra pgina. Banners. Diseo de campaas publicitarias en formato imagen o animacin Flash con el objetivo de publicitar servicios, productos, novedades u ofertas. El pago por impresiones. Los anunciantes de pago por impresin pagan por las veces que se muestra su anuncio. Es una forma muy interesante de conseguir dinero, ya que no requiere de ningn tipo de accin por parte de nuestros visitantes (no depende del click throguh). Aconsejamos combinarlo con formas de visitas extras como las que ofertamos en nuestra web para hacerlas ms efectivas, incluso se puede combinar una a la salida de tu web, con una a la entrada. Si tienes una pgina web una empresa publicitaria (o un particular) podra pagarte por insertar anuncios/banners en tu pgina. Te pagaran por cada vez que se muestre su publicidad. Es posiblemente el formato mas cmodo/rentable para el webmaster al depender solamente del nmero de pginas mostradas. Por supuesto, tu pgina tiene que ser una "buena pgina": nadie quiere anunciarse en una pgina que no tiene visitas! Las empresas publicitaras suelen exigir un nmero mnimo de visitas en tu web (entre 75.000 y 100.000 pginas mostradas al mes) y piden dominios propios (no estn admitidas webs alojadas en hostings gratuitos). Si no cumples esta 2 condiciones mnimas tendrs que buscar otro tipo de publicidad. Qu significa CTR? Cuando se pone el click through en relacin con las impresiones se obtiene una tasa denominada ratio de click through (CTR en sus siglas en ingls) que mide el nmero de veces que alguien ha hecho click sobre el banner en relacin al nmero de veces que se ha mostrado dicho banner -nmero total de impresiones-. Esta tasa puede variar muchsimo en funcin de cada campaa de publicidad pero se puede considerar situada en trminos normales si ronda entre el 0,1% y el 1%. Es un indicador para medir el xito de una campaa publicitaria con banners, porque mide las veces que un banner es pinchado respecto a las veces que es visualizado. Otros: Gestin de Boletines electrnicos. Gestione el envo de boletines electrnicos o newsletters a sus clientes, proveedores, distribuidores o colaboradores externos de forma rpida y fcil. Controle el xito de cada uno de sus envos con informacin estadstica detallada y general que le aportar la informacin necesaria para comprobar la repercusin de cada una de sus comunicaciones. Marketing uno a uno .Publicidad en Internet que permite personalizar el mensaje publicitario en funcin del visitante segn situacin geogrfica (por pas, comunidad autnoma o regin, provincia y ciudad), IPs, fecha y/u hora, idioma, navegador de Internet, sistema operativo, segn pgina origen, etc. Sms. Realizar envos de SMS masivos a sus contactos de forma automatizada y desatendida, filtrando los destinatarios y personalizando el envo por parmetros como edad, sexo, preferencias, sectores, etc. Concursos, promociones y juegos .Concursos o juegos interactivos con puntuaciones y ranking, distintos niveles de dificultad, multijugador, etc..
31

Estrategia de evaluacin de la lectura. Actividad Instrucciones. Completa el cuadro sinptico de acuerdo a las lecturas presentadas. Imagina que ser la gua de exposicin. Un integrante de tu equipo pasar a exponer.

32

5.LECTURA/ACTIVIDAD. Estructura y Usabilidad de un sitio Web

La estructura de archivos y carpetas.


Antes de iniciar el diseo de un sitio web es necesario preparar su estructura de carpetas y archivos. Cuando el nmero de ficheros es considerable, resulta muy til ubicarlos en carpetas para facilitar su localizacin y edicin. Existen mltiples posibilidades de organizar el sistema de ficheros. Con carcter general se proponen un modelo basado en la organizacin por tipos de archivos. Las pginas HTML se guardarn en el directorio o carpeta principal mientras que los elementos que utilizan (audios, vdeos, hojas de estilo, imgenes, etc) se situarn en las subcarpetas correspondientes. Esta organizacin est especialmente pensada para un sistema de pginas HTML que comparten recursos: imgenes, hoja de estilo, javascript, etc. Las principales carpetas que utiliza son: Audios: archivos de audio mp3. CSS: hojas de estilo css. Descargas: archivos zip, exe, etc que se ofrecen para descarga. Images: imgenes jpg, gif o png. Pdf: documentos pdf. Scripts: archivos js con cdigo javascript reutilizable. Swfs: archivos con animaciones flash (*.swf). Vdeos: ficheros en distintos formatos de vdeo: *.wmv, *.flv Cuando el nmero de pginas sobre un tema es elevado se suele abrir una subcarpeta dentro de la carpeta principal. Los nombres de carpetas y archivos Con intencin de evitar errores es interesante respetar las siguientes normas cuando se asigna nombre a carpetas o archivos: El nombre asignado estar formado por caracteres alfanumricos: a-z y 0-9 No debe contener caracteres no alfanumricos, signos de puntuacin, espacios en blanco, caracteres acentuados, ees, etc. Los nicos caracteres no alfanumricos permitidos son el subrayado _ y el guin No debe superar los 20 caracteres. Utilizar siempre letras minsculas aunque se admitan maysculas. Hay servidores que distinguen entre maysculas y minsculas. Esto significa que la pgina INDEX.html no es la misma que la pgina index.html. Para las pginas HTML utilizar siempre la extensin: *.html aunque se admita la *.htm. Reserva el nombre index.html para la pgina que deseamos se muestre por defecto. Es decir la pgina principal. Usabilidad de un Sitio Web. El trmino "Usabilidad", importado del mundo anglosajn, puede traducirse como "facilidad de uso". Es un concepto ms general. Sin embargo " Accesibilidad" es un trmino ms especfico y se refiere al requisito que debe reunir un documento web para que las personas con discapacidades puedan alcanzar la informacin que contiene. A continuacin se citan

33

brevemente algunas pautas o consejos que pretenden incrementar la usabilidad de las pginas web diseadas. 1. Duplica los elementos de navegacin si es necesario. Si la pgina va a tener un tamao superior a dos/tres ventanas, conviene situar los elementos de navegacin en el encabezado y pie de la misma. 2. Aade enlaces al principio de la pgina. Si la pgina es larga, es necesario situar al final de ella e incluso por el medio hipervnculos que apunten al inicio de la misma. 3. Evita disear pginas que sean callejones sin salida. Sita en todas las pginas al menos un enlace que permita continuar la navegacin: volver, ndice, etc. 4. Define una estructura sencilla de navegacin. Es recomendable utilizar una estructura jerrquica sencilla a partir de una pgina ndice evitando abusar de los enlaces que saltan de una rama a otra. 5. Proporciona siempre ndices. Sita siempre que sea posible un ndice con el contenido del sitio. Sitalo al principio, lateral o final de cada una de las pginas para que sea siempre accesible. Consideraciones en el diseo de Pginas: 1. Tamao de las pginas. Las personas no suelen hacer scroll. Por este motivo las pginas no deben ser ms largas del doble de la pantalla. Fracciona el texto en varias pginas cuando el tamao del mismo sea excesivo para una pgina. 2. Identificacin de las pginas. Es interesante situar informacin del centro o proyecto en el pie o encabezado de todas las pginas. 3. Enlaces. Considera lo siguiente: Elige palabras significativas para el texto del enlace. Elige adecuadamente el texto del enlace para anticipar lo que se encontrar el usuario antes de que pulse. Evita textos demasiado largos como enlace. Para no dificultar la lectura. Revisa el funcionamiento de los enlaces. De esta forma el usuario tendr seguridad de encontrar lo que se anuncia tras el enlace. 4. Independencia. Considera lo siguiente: Escribe las pginas para distintos navegadores. Aunque el Internet Explorer es el ms usado cada vez hay ms clientes con Firefox y Chrome. No disees para la ltima versin del navegador. No todos los usuarios tienen instalada la ltima versin. Define el tamao de las tablas y celdas en %. De esta forma se adaptarn a la resolucin de pantalla del usuario. Tipografa 1. Negrita. No abuses del uso de la negrita destacando gran cantidad de texto ni del uso de maysculas porque son ms difciles de leer. 2. Capitalizacin. Un ttulo es ms atractivo con todas las iniciales en Maysculas y el resto en minsculas que todas en Maysculas. 3. Tipos de fuente. Utiliza fuentes habituales porque el usuario debe tenerla instalada en su equipo para poder ver el texto con ella a travs del navegador web. 4. Tamao de la fuente. Utiliza los estilos de prrafo para modificar el tamao de los textos y no conviene abusar del nmero de tipos de fuente distintas a utilizar en un documento. Basta con una o dos (texto y titulares) Grficos 1. Tamao de una imagen enlazada. Si se inserta un enlace a una imagen de cierto peso conviene situar una vista en miniatura de escaso peso indicando el tamao del archivo que la contiene.

34

2. Imgenes de fondo. Utiliza imgenes de fondo de colores adecuados que no oculten el texto de la pgina. Tendrn una tonalidad parecida al color de fondo y de baja calidad para que se descarguen rpidamente. 3. Imgenes decorativas. No abuses del uso de imgenes no significativas. Dosifica el nmero de imgenes de una pgina para evitar las esperas durante su descarga. 4. Dimensiones de una imagen. Indica la altura y anchura de la imagen al insertarla en una pgina. De esta forma al descargarse la pgina ya se reserva el espacio para mostrarse una vez se complete la imagen. 6. Ahorro de imgenes. Trata de usar el mismo archivo de imagen tantas veces como sea posible para acelerar la visualizacin. 7. Formato de imgenes. Usa GIF y PNG siempre que sea posible. Para las fotografas es mejor el formato JPEG.

35

Estrategia de evaluacin de la lectura. Estructura y usabilidad de un Sitio Web .


Instrucciones. Imagina que cada llave del diagrama es una carpeta en tu computadora. Organiza los archivos y carpetas proporcionados de este Sitio Web de un colegio para que tengan una estructura correcta. Considera que normalmente cuando se publica una pgina en un servidor de Internet todos los archivos y carpetas se encuentran en la carpeta public_html o htdocs; adems que hay archivos deben estar directamente en esta carpeta y no dentro de otras carpetas como el index.html (es decir no estn en ninguna carpeta agrupados).

Carpetas

paginas

primersemestre festivalmusica2013 tercersemestre guiasestudio muestranegocios quintosemestre otrosdocumentos ftutorias facademia (Formatos
academia)

progra mas_est udio

Archivos
Geografia.pdf Listatutoria.doc matematicas1.pdf actajunta.doc Index.html guiamate1.doc Ingles3.pdf Alumnoirregular.doc descargas.html fichainscripcion.xls formatolistas.xls matematicas3.pdf formatobecas.xls Informatica1.pdf Grupomusia1.jpg programas.html estructurasocioec.pdf guiafisica.doc standjoyeria.jpg insumos2012.html standropa.jpg grupomusica2.jpg

Publc_html / Htdocs

docume ntos_al umno

Docum entos_d ocentes

Fotos_p lantel

36

insumos2013.html

Los siguientes nombres de archivos creados para un Sitio Web son incorrectos, escribe una propuesta para corregirlos: No Nombre de archivo con error Mejor debera ser

1 2 3 4 5 6 7 8 9 10

moo.jpg colegiodebachilleresdelestadodequeretaro.pdf cuento.DOCX quertaro.avi primer reporte de eventos.docx libro#1.ppt foto.primer.encuentro.jpeg LecturaDnde est el gato?.docx Programa de matemticas1.pdf eventos.htm La siguiente lista es una propuesta de preguntas para evaluar la usabilidad de un Sitio Web. Agrega una o dos preguntas ms a cada apartado, las cuales deben estar relacionadas con el elemento.

Identidad e Informacin Incluye enlaces a nuestros perfiles en redes sociales? El logotipo es visible? Incluye la web un apartado de quines somos? Lenguaje y Redaccin El lenguaje est adaptado al perfil y conocimientos de nuestro pblico objetivo? Es un lenguaje claro y cercano? Rotulado Utilizamos rtulos estndar que sean fcilmente identificables? Los ttulos de las pginas se destino se corresponden con las de los rtulos? Estructura y Navegacin La estructura es coherente? Los enlaces son reconocibles? existen distintos enlaces que lleven a la misma pgina? Lay-Out de la Pgina Destinamos las partes ms visibles de la web para los contenidos de mayor relevancia? La longitud de pgina nos obliga a hacer mucho scroll? Bsqueda Es accesible desde la pgina de inicio? se identifica con facilidad? Qu respondemos al usuario cuando no devuelve ninguno? 37

Elementos Multimedia Las imgenes son coherentes y con buena resolucin? proporcionan valor aadido? Ayuda Las FAQs se corresponden realmente a las preguntas ms frecuentes? Accesibilidad El tamao y tipo de fuente facilitan la lectura? Las imgenes tienen atributos alt que describan su contenido? Es compatible nuestra web con los diferentes navegadores y dispositivos? Otros 2.0 Damos la opcin de compartir los contenidos en las redes sociales? Al compartir en Twitter se cita nuestro nombre de usuario? Especiales para blogs Damos la opcin de suscribirse por RSS? Los tags que utilizamos tienen relacin con el contenido? -

38

ADOBE DREAMWEAVER. PRCTICAS.


Adobe Dreamweaver es una aplicacin en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construccin y edicin de sitios y aplicaciones Web basados en estndares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su integracin con otras herramientas como Adobe Flash y tiene soporte tanto para edicin de imgenes como para animacin a travs de su integracin con otras. Adobe Dreamweaver permite crear sitios de forma totalmente grfica, y dispone de funciones para acceder al cdigo HTML generado. Permite la conexin a un servidor, a base de datos, soporte para programacin en ASP, PHP, Javascript, cliente FTP integrado, etc. En estas prcticas elaborars proyectos sencillos utilizando las herramientas que nos proporciona el programa. Utilizaremos la versin CS4 que est instalada en tu escuela. Como ya has estudiado la extensin html indica que se trata de un formato de pgina web, existen sin embargo muchas extensiones asociadas al manejo de sitios web como asp, dwt, hta, etc; por lo que debers tener cuidado en guardar correctamente para evitar contratiempos. A partir de esta prctica la recomendacin ser utilizar la herramienta de Guardar todo en lugar de solamente Guardar, si lo haces el programa te pedir que guardes el archivo con extensin dwt y posteriormente convertirlo a html. Para evitar confusiones solo Guarda todo frecuentemente. Otro consejo que debes tomar es que en tu proyecto es muy probable que muevas tus archivos de una computadora a otra o de una usb a otra, por tal motivo no se recomienda configurar sitios como te lo pedir el programa, por experiencia causa contratiempos, as que omite este paso si Dreamweaver te lo solicita. En este tutorial realizaremos diversos ejemplos para disear en Dreamweaver, en este caso no abordaremos la programacin de HTML, solo diseo. Retomaremos tres enfoques para crear un Sitio Web: Trabajar sobre una plantilla de un Sitio editando los textos y botones. Elaborar un sitio con plantillas de Dreamweaver Elaborar un Sitio a a partir de una pgina en blanco. Adelante y mucha suerte!!!

39

Prctica 1. Diseo de un Sitio Web a travs de una plantilla gratuita. Se dice que hoy en da cualquier persona que utilice una computadora puede crear un Sitio Web debido a que existen decenas de programas que a travs de asistentes nos ayudan a crearlos o se venden o regalan plantillas de Sitios Web que pueden ser adaptadas a nuestras necesidades. En este caso trabajaremos con una plantilla gratuita que adaptars para concentrar tus prcticas del mdulo.

1. Localiza la carpeta de Pestaas que fue compartida por tu maestro, brela y observa. Esta carpeta est compuesta por siete pginas y una carpeta de imgenes. Recuerda que el archivo index.html es la pgina que abrir tu sitio. Si tu das clic en el automticamente se visualizar en el explorador determinado de tu computadora. Pero por el contrario si lo quieres editar debers cargar Dreamweaver y posteriormente abrirlo. 2. Haz doble clic en el archivo index y prubalo. Observa que cada link abre
una pgina distinta Link2, Link3, etc... estos son los llamados hipervnculos. Este sitio adems de texto tiene imgenes: La del logo, la del planeta tierra y cada link es una imagen. Entra a la carpeta de imgenes para checarlo.

3. Ahora abre el programa de Dreamweaver y utiliza el men archivo para abrir el archivo
de index de tu carpeta.

4. En este caso queremos adaptar esta plantilla a nuestras necesidades las cuales nos
llevan a concentrar los Sitios que elaboremos durante el semestre. Comencemos editando el texto e incluyendo el nombre del colegio, del submdulo, del proyecto y nuestro nombre. Borra el texto central y escribe los datos con el formato que te captura el programa, posteriormente lo editaremos, aun no trates de cambiarlo.

5. Cuando trabajas en una aplicacin como un procesador de textos o una hoja de clculo
es comn utilizar varios formatos de texto y con solo dar clic a la herramienta de tipo, tamao y color para obtener los cambios necesarios. Hoy en las pginas web es diferente, existen las hojas de estilo o CSS, en ellas defines los atributos que tendrn los
40

formatos de textos que necesites. Regularmente en un sitio web no cambias tan frecuentemente de estilos de texto pues pierde calidad en la imagen, definirs entre 5 y 10 estilos de texto diferentes los cuales sern referidos por un nombre, as por ejemplo puedes definir un estilo de letra arial de tamao 12 en color rojo el cual le llamars arial12rojo.Elaboraremos un estilo CSS de color blanco para que se aprecie mejor nuestro texto y posteriormente se lo aplicaremos. 6. Ve al men Formato_ Estilos CSS_ Nuevo y definiremos el formato de texto para los contenidos y el nombre ser contenidoblanco, da clic en aceptar. Aparecer la ventana en donde definas el estilo, elige: a. Font family: Arial b. Font size: 12 c. Font weight: bold d. Color: blanco Y da clic en aceptar.

7. Ahora que tenemos nuestro estilo selecciona el texto, asegrate de que te encuentres
en la opcin de CSS y en la casilla de Regla destino selecciona la regla de contenidoblanco, posteriormente elige el men Formato-Alinear- Al centro..

8. Tu carpeta de images tiene una imagen llamada globes.jpg en tamao Ancho 300 y Alto
225, busca en internet una imagen jpg asociada con Pginas Web con tonalidades azules o verdes y reemplzala por la de globes. Ajusta el tamao de la nueva imagen

en la barra de propiedades.
41

9. As mismo reemplaza la imagen de logo.gif por un logo de Dreamweaver.

10. Muchos de los elementos de una pgina web son imgenes, abre la carpeta de images y
observa que por cada Link existen dos imgenes una azul y una verde (off y on).

11. Para hacer la traduccin habr que modificar estas imgenes y guardarlas con el mismo
nombre, ojo!!!sin cambiar sus dimensiones. 12. Existen muchas aplicaciones que nos ayudaran a elaborarlo, pero como es posible que no las tengamos a la mano nos apoyaremos de paint. Se te recomienda antes de empezar que hagas una copia de la carpeta images por si alguna se desconfigura por error.

13. Abre en Paint la imagen link1_off.gif 14. Copia un espacio de rea verde y pgalo sobre el texto para eliminarlo o utiliza el
selector de color para aplicarlo sobre el texto. 15. Utiliza la herramienta de texto para escribir utilizando color blanco y letra arial black 12. Guarda la imagen. 16. Abre la pgina de index en vista de

navegador para que observes el cambio.

17. Realiza lo mismo para todos los botones de acuerdo a la siguiente imagen.

42

18. Cada pgina posee un

ttulo predefinido que aparece en la barra de ttulo del navegador. Reemplaza en todas las pginas (index1, index2,) el ttulo colocando

Proyecto y tus iniciales, Observa: . 19. Guarda todo. 20. Utiliza la opcin de Archivo- Vista previa del Navegador -Explorer para ver los resultados. 21. Ve a realizar la prctica 2.

PRACTICA 1. INCISO A)
elabores tu prctica 2.

Esta actividad podrs realizarla

cuando

22. Ahora trabajaremos sobre la pestaa de Prctica 1. Abre el archivo index2.html de tu


carpeta de pestaas. 23. Borra el contenido e inserta lo siguiente, que corresponde a las herramientas estudiadas.

43

24. Reemplaza la imagen de la pestaa por la imagen del Sitio de mueblera creado. Utiliza
la tecla Impr Pant y en paint genrala. Guarda esta imagen en la carpeta images de la carpeta pestaas. Desde el men Insertar-imagen colcala y ajusta la imagen cuidando que tu plantilla no se distorsione.

25. Busca en Internet un botn de Ver que contraste con tus colores. Gurdalo en la carpeta
de images e insrtalo posteriormente a la pgina. Utiliza Formato- Alinear- Al centro.

26. La funcin de este botn ser que al darle clic abra la pgina de Mueblera. Selecciona
el botn y en la opcin de vnculo de la barra de propiedades navega en tus carpetas para encontrar el archivo de mueblera.html y cambia el destino a una ventana diferente por ser un proyecto diferente(_blank)

27. Utiliza la opcin de


resultados.
44

Archivo- Vista previa del Navegador -Explorer para ver los

28. Ve a realizar la prctica 3.

PRACTICA 1. INCISO B)
elabores tu prctica 3.

Esta actividad podrs realizarla cuando

29. Ahora trabajaremos sobre la pestaa de Prctica 2. Abre el archivo index3.html de tu


carpeta de pestaas. 30. Borra el contenido e inserta lo siguiente, que corresponde a las herramientas

estudiadas. 31. Reemplaza la imagen de la pestaa por la imagen del Sitio creado. Utiliza la tecla Impr Pant y en paint genrala. No olvides guardarla en la carpeta images de la carpeta pestaa. Ajusta la imagen y cuida que tu plantilla no se distorsione. 32. Al igual que el enlace de la prctica 2 inserta el botn de Ver.

33. Crea un vnculo al botn para que abra el archivo de jardinera.html en una nueva
ventana (blank) 34. Realiza las pruebas necesarias. 35. Elabora ahora la prctica 4.

PRACTICA 1. INCISO C)
termines tu prctica 4.

Esta actividad podrs realizarla cuando

36. Ahora trabajaremos sobre la pestaa de Prctica 3. Abre el archivo index4.html de tu


carpeta de pestaas.
45

37. Borra el contenido e inserta tres sitios que te proporcionen hospedaje gratuito, busca
una imagen en internet asociada con el tema, gurdala en tu carpeta de images e insrtala en lugar de la predefinida. Ajusta el tamao para que no pierda la estructura la pgina.

38. Coloca los hipervnculos correspondientes a las pginas, utilizando la herramienta de

vnculo, asegrate de que ests en la vista de HTML. 39. Este vnculo debe ser en una

ventana

nueva

(_blank).

40. Realiza las pruebas necesarias para saber que funciona. 41. Ahora como esta pgina ha sufrido cambios se debe actualizar en tu servidor de
hospedaje, entra nuevamente al servidor de archivos y tendras que subir en la carpeta de htdocs el archivo index4.html. 42. Dentro de la carpeta de images sube la imagen de hosting. 43. Entra a tu subdominio y checa que la pestaa de prctica 4 se haya actualizado. 44. Elabora la prctica 5.

PRACTICA 1. INCISO D)
termines el inciso 26 de tu prctica 5.
46

Esta actividad podrs realizarla cuando

45. Abre el archivo index5.html y adapta el siguiente texto. Incluye tambin el botn de Ver.

46. Crea el hipervnculo en el botn para que abra en una ventana en blanco tu pgina de
lavandera.html

47. Comprueba que funcione correctamente en vista de Explorador. 48. Por el momento no ajustaremos la imagen que aun no est el encabezado. 49. Hasta el momento en tu carpeta tenemos los siguientes elementos. Comprime la
carpeta de lnea blanca en formato .zip.

50. En la prctica 4 subimos a Idomy todo tu sitio comprimiendo los archivos que estaban
dentro de Pestaas. Ahora solo tenemos que hacer la actualizacin, ya no subiremos todo sino los elementos nuevos o modificados. En este caso se cre la carpeta de lineablanca y acabas de modificar el archivo index5.html. 51. Entra nuevamente al administrador de Archivos de tu cuenta de hosting gratuito, selecciona la carpeta de htdocs y posteriormente la opcin de Cargar . 52. Recuerda que como se trata de un archivo zip es ms fcil elegir la opcin de la derecha. Selecciona tu carpeta comprimida.
47

53. Debes dar clic en la palomita verde y se mostrar el contenido de tu archivo zip.

54. Da clic en la palomita verde y posteriormente en la flecha azul para regresar. Ha


quedado en Internet tu Sitio de Lnea Blanca. 55. Ahora como el archivo index5.html fue modificado debemos subirlo, en este caso utiliza la opcin izquierda que permite subir archivos individuales y procede aceptar y regresar.

56. En este momento en htdocs tienes la siguiente estructura, la cual es idntica a lo que
tienes en la carpeta de pestaas.

48

57. Para poder terminar el sitio de Lnea Blanca en Flash necesitars la direccin web de
las pginas de estufas, lavandera y electrodomsticos. Abre tu subdominio en Internet, la pestaa de prctica 4 y da clic en el Botn de Ver para abrir tu sito de Lnea Blanca.

58. Utiliza el men textual del pie de pgina para abrir la pgina de estufas. Copia su direccin
en un documento de Word. Ejemplo: http://proyectoswebsara.idomyweb.com/lineablanca/estufas.html

59. Realiza los mismo para la pgina principal, electrodomsticos y lavadoras. Guarda el
documento en donde tienes estos URL. 60. Ve al paso 27 de tu prctica 5 y al terminar regresa al paso 61. 61. Listo!!!! Terminaste la prctica 5, ahora colocaremos la imagen completa de la prctica en el index5.html. Hasta el momento abre tu sitio pero no se aprecia la imagen asociada:

62. Captura la pantalla de tu prctica terminada y guarda la imagen dentro de la carpeta de


images. Reemplaza la imagen correspondiente.
49

63. Analizando los cambios generados hasta el momento recordamos que se modific
nuevamente la pgina de index5.html, se agreg la imagen correspondiente. Dentro de la pgina de lnea blanca se modificaron varios archivos y se crearon otros. 64. Entraremos a nuestra cuenta de idomyweb y subiremos los archivos actualizados: index5.html (en htdocs) y la imagen que acompaa a esta pgina (en images) y comprimiremos nuevamente la carpeta de lineablanca para subir y actualizar su contenido (en htdocs).

65. Cargamos nuestro dominio en Idomy para ver que el sitio de Lnea blanca puede
abrirse correctamente desde nuestro sitio principal y que los encabezados de flash se ven correctamente.

50

Ve a elaborar ahora la prctica 6.

PRACTICA 1. INCISO E)
elabores tu prctica 6.

Esta actividad podrs realizarla cuando

66. Ahora trabajaremos sobre la pestaa de Prctica 5. Abre el archivo index6.html de tu


carpeta de pestaas. 67. Edita la pgina para que tenga la siguiente estructura, considera lo que hemos elaborado en las prcticas anteriores.

68. La funcin del botn Ver ser que al darle clic abra la pgina de agencia. Selecciona el
botn y en la opcin de vnculo de la barra de propiedades navega en tus carpetas para encontrar el archivo de agencia.html y cambia el destino a una ventana diferente por ser un proyecto diferente(_blank) 69. Deduciendo sabemos que ahora hay que actualizar el sitio, entonces comprime la carpeta de agencia para subirla a Idomy, as como el archivo index6 y la imagen que le agregaste en la carpeta correspondiente. 70. Entra a tu subdominio y checa que funcione correctamente la pestaa de prctica 5.

51

PRACTICA 1. INCISO F)
despus de terminar el inciso E.

Esta prctica es recomendable realizarla

1. Durante el curso elaboraste diversas actividades que te ayudaron a comprender conceptos esenciales en el diseo de Sitios Web, concentra estas actividades en un servidor de almacenamiento gratuito como (Dropbox, Slideshare, etc). Consigue los vnculos para que puedas enlazarlos a tu pgina index7.html de la siguiente manera. Coloca los nombres de las actividades e insrtales un hipervnculo a cada una de ellas con destino en ventana en blanco, de forma que al hacer clic las abra.

2. Ahora faltara solamente subir a tu hosting de Idomy la pgina index7.html y la imagen que le asociaste. 3. Checa que tu Sitio Web de proyectos funcione correctamente, realiza ajustes necesarios.

LISTO TERMINASTE

FELICIDADES
52

Prctica 2. Diseo de un Sitio Web a travs de un documento en blanco con tablas, div y barra de navegacin.
PROCEDIMIENTO: de comenzar debes crear la carpeta en donde elaborars este sitio, as que dentro de tu carpeta pestaas crea una subcarpeta llamada muebleria(recuerda que no debes usar acentos ni espacios en los nombres de archivos). 2. Entra a Dreamweaver y crea una nuevo documento, Pgina en blanco- HTML- Diseo <ninguno>. 3. Guarda este archivo en la carpeta mueblera como mueblera.html 4. Utilizando la opcin DIV PA que se encuentra en Insertar-Objetos de diseo crea una estructura como la siguiente. Utiliza colores vivos (no degradados) en fondo blanco, elaborars la Web para una mueblera de diseos modernos. Dentro del DIV izquierdo inserta una tabla de 15X4 en borde a 0.

1. Antes

5. En Dreamweaver los estilos de texto que manejas deben ser definidos antes de
aplicarse. En este caso definiremos una nueva hoja de estilos en donde daremos de alta dos reglas una para el texto del nombre de la librera, otra para los titulares de las pginas web y otro para los contenidos. Ve al men Formato- Estilos CSS y nuevo

6. Define el nombre en este


caso realizaremos el de Titular y selecciona que la regla es una Nueva Hoja de estilos. 7. Te aparecer la pantalla para definir tu formato. Configura tu fuente para que contraste con los colores de tu Pgina Web y como se trata de un titular usa tamao de fuente a partir de 18.

53

8. Ahora crea un formato para crear el nombre de tu negocio. Observa la figura del paso
11. Vuelve a elegir Formato-CSS-Nuevo asegurndote que la regla no sea nueva hoja ms bien se aplique a la hoja ya creada.

9. Define el formato necesario. Crea un formato ms para los contenidos de las pginas
Web. Estos formatos puedes modificarlos posteriormente. 10. Juega artsticamente con los colores de las celdas para colocar el nombre de la mueblera (elgelo t). 11. Despus de colocar el texto seleccinalo y aplcale la regla destino.

54

12. Dentro de la carpeta de mueblera crea una carpeta llamada imgenes. 13. Busca la imagen de un mueble moderno en fondo blanco que contraste con los colores
utilizados y gurdala en esta carpeta de imgenes. Utiliza la opcin de Insertar imagen para colocarla. Cuando insertas una imagen te solicita colocar el texto alternativo, coloca algo alusivo a ella, en este ejemplo pudo ser Silla Ajusta el tamao. 14. Puedes estar utilizando la herramienta de vista en vivo para apreciar mejor los cambios. , para seguir editando quita esta vista volviendo a presionarla.

15. Elaboraremos

una barra de navegacin sencilla. En Dreamweaver una barra de navegacin requiere hasta 4 botones por opcin, pero en este caso solo elaboraremos 2 por cada opcin: Inicio, Hogar, Oficina y Vistanos. Utilizando el programa que tengas a tu alcance como Paint, Flash o Corel Draw disears los 8 botones que necesitamos. Por ejemplo del botn de Inicio debers crear 2 con el mismo texto pero en diferente color, todos los botones deben tener el mismo tamao y se deben manejar los mismos pares de colores y tipos/tamaos de la fuente. Guarda estos botones con formato jpg en la carpeta de imgenes de la carpeta de mueblera, con los nombres de inicio1, inicio2 hogar1, hogar2, etc. Asegrate que sean en formato jpg, jpeg o png.

16. En este caso necesitamos que los botones sean del mismo color que la barra inferior de
nuestra pgina web. Como ya estudiaste en HTML los colores tienen un cdigo, para rescatar el cdigo del color de la barra seleccionas tu barra DIV inferior y observa que cdigo de color tiene, por ejemplo en nuestro caso es 17. Abrimos Flash y creamos un documento de 4X2 cm. Le aplicas el mismo color de fondo que la barra inferior de tu pgina web. 18. Utiliza la herramienta de texto para escribir el nombre del botn, ejemplo Inicio, con

color blanco.

55

19. Exporta este botn utilizando el Men Archivo-Exportar-Imagen. Gurdala como inicio
de tipo jpg.

20. Trabajando sobre el mismo archivo cambia el color del texto

y ahora exporta la imagen como inicio2 de tipo jpg 21. Sin cerrar tu archivo .fla borra la palabra Inicio y reemplzala por Hogar. Realiza el mismo procedimiento hasta tener los 8 botones. 22. La barra debe quedar con los siguientes elementos

23. Entra al men Insertar- Objetos de imagen- Barra de navegacin. Debers agregar los
cuatro elementos. Escribe por cada uno el nombre del elemento, selecciona la imagen arriba (hogar1, oficina1, etc) y el elemento de Sobre ( hogar2, oficina2, etc.) que le corresponde. Los dems campos no los modificas. No selecciones Aceptar hasta que no termines los 4 elementos. Si cierras por error la ventana puedes regresar en Modificar-Barra de navegacin.

24. Ahora en Dreamweaver selecciona el rea de la tabla de los botones para que se
activen las herramientas de tabla y cambia la Alineacin al centro.

25. Guarda todo y ve a la vista de IExplorer para ver los resultados.

26. LISTO!!, tienes el diseo completo de tu pgina principal o Inicio, en este caso
necesitamos crear una pgina ms para Hogar, Oficina y Vistanos. Las generaremos haciendo una copia de inicio mediante el proceso de Guardar como.
56

27. Teniendo abierta tu pgina de Inicio(mueblera) gurdala como hogar.html, oficina.html

y visitanos.html. 28. Abre la pgina de hogar, inserta una tabla de 3X3 sin borde, busca en internet tres muebles de hogar con colores que se adapten a tu diseo, gurdalas correctamente en la carpeta de imgenes de mueblera y posteriormente insrtalas en la tabla y ajusta su tamao manualmente, conforme ajustas los objetos se ajusta la tabla, coloca tambin el ttulo de Hogar y aplcale el estilo Titular CSS creado anteriormente.

29. Ahora elabora algo parecido para Oficina. 30. Para la pgina de vistanos inserta una tabla de dos filas por tres columnas. Escribe la
direccin de de la mueblera Quertaro. con estilo contenido. Es ficticia pero debe existir en

31. Ahora entra a Google Maps y localiza la direccin escrita en tu pgina. Haz clic en
Enlace y Personalizar.

57

32. Elige el tamao pequeo y copia el cdigo que te proporciona. Regresa a


Dreamweaver, colcate en la celda segunda columna y segunda fila, haz clic en el botn de Cdigo.

33. Con cuidado, y exactamente en esa posicin da dos o tres Enter, regresa a una lnea en
blanco y haz clic en Pegar. Habilita nuevamente la vista de diseo y aparecer un recuadro gris.

34. Ve a la vista previa en el navegador y observa que se aprecia el mapa.

58

35. LISTO!!!

Tenemos las pginas del sitio pero ahora se necesitan poner los hipervnculos en las barras de navegacin. 36. Accede a Modificar_Barra de navegacin de tu archivo muebleria.html.. Aqu te desplazars por cada elemento de la barra y le indicars la pgina a la que vinculas a. Inicio a muebleria.html b. Hogar a hogar.html c. Oficina a oficina.html d. Vistanos a vistanos.html

37. Posteriormente y para asegurar que los enlaces de los botones abran en la misma
ventana de trabajo selecciona con el mouse uno a uno los botones y cambia el destino

a _self.

38. Realiza estos ltimos pasos para las 3 pginas restantes, despus de modificar cada
una no olvides Guardar todo.

39. Ahora puedes probar que en todas las pginas funcionen los botones en la vista de
IExplorer 40. REGRESA A ELABORAR EL INCISO A) DE LA PRCTICA 1.
59

Prctica 3. Diseo de un Sitio Web a travs de una plantilla de Dreamweaver y uso de Spry. PROCEDIMIENTO: 1. Antes de comenzar debes crear la carpeta en en donde elaborars este sitio, as que dentro de tu carpeta pestaas crea una subcarpeta llamada jardinera(recuerda que no debes usar acentos ni espacios en los nombres de archivos). Dentro de la carpeta jardinera crea una carpeta llamada imagenes. 2. Dreamweaver algunas veces puede guardar por default tu archivo como tipo dwt, en este caso nos acostumbraremos a solo manejar archivos html, si llegas a observar esto debers guardarlo tu como html y de aqu en adelante utilizar solo la opcin de guardar todo en lugar de guardar. Esto es un consejo si no tienes habilidades informticas avanzadas, si las posees puedes guardar en ambos formatos cada pgina. 3. Entra a Dreamweaver y selecciona el men de Archivo- Nuevo y elige de la opcin de Plantilla en Blanco la de 2 Columnas fijas, barra lateral izquierda con encabezado y pie, como se aprecia en la figura y selecciona Crear.

Utiliza el men de Archivo-Guardar como y nmbralo jardineria.html en la carpeta de jardinera, checa que se guarda como html de lo contrario t escribe el .html la primera vez para que te lo guarde en este formato.

4. Ahora vamos a realizar lo siguiente, te presentamos la idea general t decide tu nombre, lema e imgenes que te agraden.

60

5. Recuerda que estamos trabajando en una plantilla y que si la distorsionamos ser difcil arreglarla. Si esto sucede mejor vuelve a empezar. Coloca el nombre a tu jardinera, una la barra lateral izquierda para mostrar en que ciudades te encuentran y el centro con una frase que te motive as como una imagen. En el pie de pgina escribe la frase sobre Copyright. 6. Para la imagen: busca en internet una imagen jpg de un jardn atractivo y gurdala dentro de la carpeta de imagenes que se encuentra en tu carpeta de jardinera. Recuerda no usar acentos, caracteres especiales ni espacios en el nombre. 7. Utiliza el men de Insertar_Imagen para insertar la imagen que guardaste, siempre que insertes una imagen te pedir algunos atributos, en este caso solo estaremos colocando en el texto alternativo una idea de la imagen que insertas, por ejemplo jardn 8. Selecciona el encabezado, la imagen y su descripcin y utiliza el men Formato_Alinear_Centro. 9. Presiona en el botn de Propiedades de la pgina y define el color de fondo, si crees conveniente cambia el color de letra. 10. Posicinate en alguna parte del encabezado de fondo gris y en la barra inferior de propiedades selecciona la herramienta CSS y luego en Editar Regla

11. Elige la categora de Fondo y cambia al Color de fondo

12. Realiza lo mismo para el Pie y para la barra lateral izquierda

13. Observars que an quedan algunos bordes grises a los costados del Encabezado y Pie de la pgina. Regresa a editar la regla seleccionando la de .twoColFixLHdr #header, y cambia entonces el fondo gris al mismo color de la barra.

61

14. Cambia al pie de pgina y realiza el mismo procedimiento para que desaparezca el color gris totalmente. 15. Antes de ver la vista en el Navegador reemplaza el texto del Ttulo por el nombre de la jardinera: 16. Utiliza Archivo_Guardar Todo para actualizar los cambios. 17. Utiliza Archivo_ Vista Previa en el navegador_ IExplorer para que veas cmo queda tu sitio. Tambin puedes probar con .

18. Recuerda utilizar la opcin de Guardar todo continuamente.


62

19. Ahora nuestro sitio tendr un men horizontal en la parte superior con la siguiente estructura: Inicio Servicios o Jardines o Eventos Ventas o Flores o rboles Acerca de o Contacto o Quienes somos

20. Colcate al final del ttulo de encabezado y presiona la tecla Enter para insertar una lnea inferior en donde colocars el men. 21. Inserta un men Spry desde el men de Insertar-Objeto de diseo-Barra de men Spry. Elgela Horizontal

22. Se crear automticamente el men, que podrs visualizar desde la vista de Diseo de esta forma, presiona Guardar todo, adems de una carpeta llamada

Chcala, es muy importante!!!! que esta carpeta est dentro de la carpeta de jardineria, de lo contrario solicita ayuda a t profesor.

23. Haciendo clic en la cabecera azul Barra de mens de Spry podremos ver en el panel Propiedades las opciones necesarias para configurar nuestro men:

63

La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles diferentes, as que en principio la primera tarea ser definir el primer nivel. Esto lo haremos desde el primer cuadro de listado. Aadir y quitar elementos es tan fcil como utilizar los botones , y podemos reorganizarlos luego utilizando las flechas . Cada uno de estos elementos puede ser modificado para que muestren el texto que queramos, lo haremos desde las cajas de texto que encontramos a la derecha. En Texto escribiremos el literal que queremos que se lea en el men. Si ese elemento debe contener un enlace (a una pgina o a un correo electrnico) lo haremos escribiendo en la caja de texto Vnculo. Si trabajamos en una pgina con marcos podremos utilizar el campo Destino para establecer en cul de ellos se abrir el enlace. Por ltimo, Ttulo contendr una ayuda contextual que se mostrar en forma de etiqueta al colocar el ratn sobre el elemento del men. Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de los tems y crea las opciones que se desplegarn al colocar el ratn sobre ellos. De nuevo utiliza los botones y para gestionar los elementos en el segundo listado. Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno. Una vez creado un elemento de segundo nivel tambin seremos capaces de colgar sobre ste otro elemento de tercer nivel para ello utiliza los botones y y rellena el tercer listado de elementos. 24. Realiza los cambios en los ttulos de acuerdo a la estructura planteada al inicio. Por el momento los vnculos no los modificamos as que no borres los smbolos de nmero.

25. Observa tu pgina en vista de IExplorer para ver los resultados

64

26. Esta barra de mens tiene propiedades definidas en los colores y fuentes que se utilizan, da clic sobre la barra y observa al lado derecho que aparece una ventana de Estilos CSS:

27. Si seleccionas estos elementos en la parte inferior podrs editarlos, as por ejemplo si seleccionas con doble clic el background-color puedes editarlo y cambiar el color azul que predefine de fondo y color para el fondo inicial as como Tipo para color de letra.

28. Realiza los ajustes de color ms apropiados a tu pgina. Recuerda estar en tus cuatro colores establecidos.

65

29. YA TENEMOS LA PGINA principal, pero ahora necesitamos 6 ms Jardines, Eventos ,Flores, rboles, Contactoy Quienes somos. 30. En este caso trabajaremos sobre la misma plantilla. El proceso es muy sencillo, utilizas la herramienta de Guardar Como para hacer un duplicado con otro nombre, le cambias el ttulo, Guardas todo y vuelves a repetir el proceso. Veamos un primer ejemplo: 31. Utiliza Guardar como dentro de la misma carpeta de jardineria ,guardas como eventos.html

32. Ahora borraremos el texto del centro y solo colocaremos el ttulo de Eventos.

33. Guardas todo. 34. Ahora Guardas como jardines y realizas lo mismo.

35. Guardas todo y realizas lo mismo para todas las pginas restantes. No olvides los nombres sin espacios, en minsculas y sin caracteres especiales!!! 36. Observa como en tu carpeta se van generando las pginas web hasta contar con 7 pginas.

37. YA TENEMOS LAS PGINAS DEL SITIO ahora hay que enlazarlas. Los enlaces (hiperenlaces) o simplemente enlaces, son enlaces del documento que permiten que

66

cuando se hace clic sobre ellos, se abra una nueva pgina, se abra un documento, o nos traslademos a otro punto de la pgina en la que nos encontramos. a. Enlaces de referencia absoluta. Son aquellos que llevan a un sitio o un archivo especificando la ruta completa, como por ejemplo: http://www.google.com. b. Enlaces de referencia relativa. Este tipo de enlaces solo puede ser empleado para enlazar pginas o documentos que se encuentran dentro del mismo sitio. Para ello utiliza la ruta relativa, es decir, marcando la ruta desde la pgina donde se encuentra el enlace. 38. Los elementos del men Spry deben ser configurados para enlazar pginas. Por default el programa marca un # como enlace pero este deber ser sustituido en los casos necesarios. Abre tu archivo index.html y activa las propiedades del Spry desde el texto azul. 39. Observa en la imagen ejemplo que para cada elemento del men se activa el vnculo y el destino, tendrs que asignar la pgina correspondiente al ltimo nivel de cada elemento y escribir el destino como _self. De esta manera actualizars Inicio, Servicios, Ventas y Acerca de

40. Al terminar guarda todo. 41. Ahora tienes dos opciones: Hacer lo mismo en cada pgina o copiar la barra de men en las dems pginas. Ejemplo a. Estando en t pgina principal que ya tiene en el men todos los vnculos haces clic en la indicacin azul y das control c (copiar) b. Abres otra de tus pginas como flores.html, le borras la barra de men. c. Das en pegar y se coloca la nueva barra ya actualizada.
67

d. Realizas el procedimiento para todas las pginas. e. Haces clic en Guardar todo y aceptar para los mensajes que te aparecen. 42. Realiza la prueba de Oro y prueba que todos los enlaces funcionen en todas las pginas (recuerda que aun no tenemos contenidos, solo ttulos). Si detectas algn error visualiza en la barra de ttulo cul pgina es la que actualmente est abierta y debers abrirla en Dreamweaver para corregir el error. Cuando acercas el mouse a un elemento con vnculo aparecer en la parte inferior de la ventana que pgina abrir al hacer clic.

43. YA TENEMOS LOS ENLACES DEL SITIO, AHORA AGREGA LOS CONTENIDOS. Para ello utilizaremos la herramienta de tabla. 44. Las tablas constituyen una herramienta muy eficaz para presentar datos y establecer el diseo de texto y grficos en una pgina HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o ms celdas. Aunque las columnas no suelen especificarse explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas y celdas. 45. Abre la pgina correspondiente al jardines.html. Despus del ttulo principal da un Enter para pasar al siguiente rengln y selecciona el men Insertar_Tabla de 3 filas por 2 columnas. 46. Ajusta el tamao de la tabla a el ancho de la pgina

Combinaremos las dos primeras celdas con la herramienta de combinar celdas

47. Realiza un diseo rpido pero de calidad en la tabla. Busca y guarda imgenes dentro de la carpeta de imagenes de jardinera. Utiliza el men insertar imagen para colocarlas y dale un tamao adecuado. (Recuerda que la imagen no se copia y pega de internet, se guarda en la carpeta de imgenes y posteriormente se inserta).

68

48. Puedes utilizar el men de Formato- Alinear- Centro, as mismo al seleccionar la tabla en las propiedades puedes cambiar el borde a 0 para que no se vean los contornos.

49. Visualiza la vista de navegador . 50. Realiza el mismo procedimiento para arboles, eventos y flores. 51. La pgina de contacto la terminaremos en una prctica posterior as que por el momento solo escribe la frase Si tienes algn comentario o duda rellena este formulario 52. En la pgina de Quines somos? Redacta a que se dedica la empresa y su misin.

53. Constantemente en Internet se brindan aplicaciones gratuitas que puedes incluir en tu Sitio Web y otorgan al usuario la facilidad de poder utilizarlas sin ser expertos programadores en el rea de informtica. Generalmente estas aplicaciones se insertan en los Sitios Web por medio de un cdigo que proporciona el patrocinador, el cual
69

deber pegarse en el formato de Cdigo en tu sitio, as como lo elaboraste en Google Maps. Entre algunas aplicaciones podemos comentar que puedes insertar fcilmente a tu Web un Chat, Videos, Reproductores de msica, Contador de Visitas, Calendario, Juegos, Formularios, etc. Hoy en da tambin se les asocia con la palabra Gadget. Para esta prctica insertaremos un formulario de contacto por medio de una aplicacin gratuita. 54. Entra a el sitio de http://spanish.jotform.com/ 55. Si es la primera vez aparecer la siguiente pantalla. Cirrala para poder herramientas de formulario.

ver las

56. Aparecern diversas herramientas 57. Para utilizarlas simplemente debes arrastrarlas al rea blanca de trabajo. Probemos con lo siguiente 58. Insertaremos un encabezado que diga algo as como Formulario de contacto 59. Un cuadro de texto para solicitar el correo electrnico del interesado 60. Un cuadro de texto para insertar el nombre del usuario 61. Un rea de texto para solicitar su comentario 62. Y checa si aparece automticamente el botn de enviar, de lo contrario insrtalo.

70

63. Presiona la herramienta de guardar, , quiz te pida el correo al que llegaran los comentarios que escriban los usuarios, escribe tu correo. 64. Si no te pide el correo, elige la opcin de Alertas por E.mail que se encuentra en la

pestaa de Instalacin. 65. Elige la opcin de Notificacin por correo y da en Siguiente

66. 67. Escribe en la parte de destinatario

tu correo. 68. Da nuevamente en siguiente y luego en final.

69. Ahora para colocar el formulario en tu Web, selecciona 70. Luego en Insertar opciones

Cdigo Fuente

71. Posteriormente elige Dw que es en donde ests diseando y aparecer un cdigo que debes seleccionar y copiar en su totalidad. Crtl C.

72. Sin cerrar, regresa a Dreamweaver y abre la pgina de contacto 73. Algunas de las ventajas de estas aplicaciones es que son muy fciles de crear, sin embargo estamos limitados a las herramientas que nos ofrecen. Este formulario es ms ancho del espacio que tenemos en nuestro sitio y por tal desconfigurara la plantilla al insertarlo. Entonces abre tu pgina de contacto y elimina las reas Div del centro. 74. Escribe el texto de Si tienes alguna duda escrbenos y da un enter para colocarte en la siguiente lnea.
71

75. Haz clic en Cdigo 76. Exactamente en donde aparece el cursor del cdigo da dos Enter para que se aprecie

un espacio en blanco. 77. Ahora en ese espacio vaco da Pegar para colocar el cdigo 78. Se pegar el cdigo. Ahora haz clic nuevamente en diseo para ver los resultados.

79. Guarda los cambios y ve a la vista del Explorador 80. Estos cambios fueron realizados en tu computadora solamente. Ahora accede a tu espacio de hospedaje gratuito y sube solamente la pgina de contacto. 81. Entra a tu dominio y rellena una simulacin en el formulario. Checa que haya llegado a tu correo, tal vez est en el Spam.

72

PRCTICA 4. CREAR CUENTA DE HOSPEDAJE GRATUITO PARA PUBLICAR SITIOS WEB.


CONSIDERACIONES ESPECIALES: Por experiencia se recomienda solicitar a los alumnos que realicen su inscripcin a este sitio en horas externas a clase, cuando varios usuarios se conectan al servidor desde la misma red este se bloquea y comenta que no est disponible por el momento. Adems de recordarles que la notificacin llegar al spam. Despus del diseo de un Sitio Web lo ms importante es colocarlo en un servidor de Internet y comprobar que no presenta errores para los interesados que lo visitarn. Hay una amplia variedad de servicios de hosting. El ms bsico es el hosting de archivos (alojamiento web u hospedaje web), donde se pueden alojar las pginas de los sitios web y otros archivos va ftp o una interfaz web. Los archivos se muestran en la web tal cual o sin mucho procesado. Muchos proveedores de Internet ofrecen este servicio de forma gratuita a sus clientes. El alojamiento web gratuito es normalmente patrocinado por anunciantes. Normalmente este alojamiento web slo es suficiente para pginas web personales. Un sitio web complejo necesita un paquete ms avanzado que proporcione soporte para bases de datos y plataformas de desarrollo de aplicaciones (ej. PHP, Java, y ASP. NET). Estas permiten que los clientes escriban o instalen scripts para aplicaciones como foros y formularios. Para el comercio electrnico tambin se requiere SSL. El proveedor de hosting puede tambin proporcionar un interfaz web (ej. panel de control) para manejar el servidor web e instalar los scripts as como otros servicios como e-mail. Para esta prctica necesitars tu cuenta de correo electrnica o si te lo recomienda tu profesor crears una cuenta de correo nueva orientada a tu negocio 1. Accede al sitio www.idomyweb.es 2. Procesa tu alta, en el subdominio escribe el Dominio que te gustara que tenga tu pgina y que se relacione con el giro, por ejemplo para este proyecto puede algo como proyectoswebnombre y escribe la contrasea que manejars (de preferencia la de tu correo para no olvidarla), escribe tu correo, categora de Personal y el cdigo que te solicita.

3. Te indicar que ha mandado tus datos de acceso a tu correo


73

4. Regresa a tu correo de inmediato y seguramente tendrs que buscar en el spam la


respuesta. Te pedir que actives tu cuenta haciendo clic en el enlace proporcionado. Ojo!!! Si no haces la activacin inmediatamente es probable que te la niegue despus y debers hacerlo nuevamente con otro correo. Quiz tengas que esperar algunos segundos para activar la cuenta.

5. Tendrs que llenar el captcha y te enviar nuevamente a tun correo los datos de
acceso.

74

6. Los datos que te proporciona este ltimo correo son:

7. El panel de control es un ambiente dentro del Sistema Operativo de Servidores que te


permite administrar los archivos de tu Sitio Web. Conserva este correo permanentemente. 8. Checa que si funcionen. En la pgina principal de www.idomyweb.es introduce tus datos del cpanel

: 9. Al ingresar te aparecer una pantalla como esta

10. Observa del lado izquierdo te proporciona las caractersticas de tu hospedaje y todos
los textos marcados con flechas azules son herramientas que normalmente manejan los diseadores de pginas web como t. 11. CPanel (acrnimo de control Panel) es una herramienta de administracin basada en tecnologas web para administrar sitios de manera fcil, con una interfaz limpia. Se
75

dise para el uso comercial de servicios de alojamiento web, es un software instalado dentro del servidor de tu proveedor que te permite administrar tus sitios de una manera ms rpida y sencilla.. 12. Prepara el Sitio Web que publicars. Tu carpeta de pestaas. 13. Cuando subes un sitio la aplicacin para publicarlo buscar y abrir el archivo Index, en este caso es index.htm pero ocupar todos los recursos y pginas asociadas. Podramos subir un sitio archivo por archivo pero sera muy tardado, generalmente esta dinmica solo se realiza cuando actualizas un sitio. Entonces comprimiremos los archivos de ta carpeta del Sitio Web, pero OJO!!! No comprimirs la carpeta, seleccionars los archivos y las carpetas y con el botn derecho los enviaras a un archivo comprimido, observa:

14. El archivo comprimido debe ser de extensin .zip NO RAR!! 15. Entrars al CPanel o Panel de Control

16. Elige la opcin de Administrador de archivos (Online File Manager) 17. Generalmente el nombre de la carpeta para subir un sitio web en un servidor es
llamado Public o htdocs como es el caso de Idomy. Da clic en htdocs.

76

18. Observa que ya existe un archivo index.htm, seleccinalo en su casilla y presiona


Eliminar. Aparecer una pantalla a la que debers acostumbrarte, dos smbolos una paloma verde que significa aceptar y una flecha azul para regresar.

19. Ahora presiona el botn de subir archivo y haz clic en examinar, como se trata de un
archivo comprimido elige la opcin de la derecha y seleccinalo. Presiona la flecha verde para comenzar a subirlo.

El varios minutos.

proceso puede tardar

20. Aparecer la ventana que te indica el contenido a descomprimir, acptalo.


y posteriormente a regresar, . 21. Observa que ahora en tu carpeta de htdocs se encuentran todos los archivos index y las tres carpetas.

77

22. En los datos de tu correo tambin te enviaron l tu direccin de pgina web gratuita,
Accede a tu direccin:

23. Existen dos posibilidades: La mejor es que tu sitio funcione al 100% correctamente.
Felicidades!!! Seguiste los pasos al pie de la letra.

24. La segunda es que no se observe o te marque errores en algunos puntos debido a


varias cosas: a. Los nombres de tus archivos tengan espacios, acentos, caracteres especiales o ms de 20 caracteres en su nombre. b. Comprimiste mal tu carpeta. c. Tu archivo index.html no existe. d. Las imgenes las copiaste y pegaste desde internet y no las guardaste previamente. e. Te faltaron colocar algunos enlaces. 25. Pero recuerda que todo tiene solucin, encuentra los contratiempos y corrgelos. Posteriormente repite el proceso para que se reemplacen los archivos. 26. Checa que en tu sitio abren todos los enlaces de las diferentes prcticas.

78

PRCTICA 5. CREAR SITIO WEB CON ENCABEZADO EN FLASH.


CONSIDERACIONES ESPECIALES. La tecnologa Flash, que an se emplea en numerosos sitios web, tiene la gran ventaja de que permite la creacin de animaciones y estilos visuales muy llamativos y atractivos, sin embargo debemos considerar que para ver los sitios en flash necesitamos descargar el plugin respectivo de Adobe y esto hay que hacerlo cada vez que sale una nueva versin del programa, adems de que en las pginas desarrolladas con Flash no podemos crear enlaces a secciones especficas de la pgina web, sino que cualquier anuncio debe dirigirse a la pgina principal del sitio. De esta forma no es recomendable desarrollar un Sitio Web totalmente en Flash y en su caso utilizarlo solo para secciones especficas. En nuestro colegio contamos con una licencia de aos anteriores que es la que trbajaremos, Flash MX. En este caso ser para un negocio de venta de lnea blanca para el hogar. 1. Antes de comenzar debemos crear la carpeta que contendr el sitio, en este caso lineablanca. Crala dentro de pestaas. Posteriormente crea la carpeta de imgenes que le corresponde. 2. Trabajaremos sobre la plantilla de Tres columnas fijas con encabezado y pie. Guarda como lineablanca.html en la carpeta de lineablanca.

3. El encabezado se quedar temporalmente sin cambios pues insertaremos el archivo SWF generado en Flash. 4. Coloca una oferta atractiva en el centro, en la columna derecha alguna informacin para atender al cliente y en la columna derecha inserta una tabla de 150 pixeles, borde cero, una columna por 8 filas. 5. En el pie de pgina publica tus formas de pago.

79

6. En este momento ya eres ms experto, ajusta los colores pensando en el tipo de productos que vendes. 7. Crea al menos tres estilos CSS para manejar colores y diversos formatos de texto que se integre en un archivo de hoja de estilos. 8. Recuerda guardar tus imgenes previamente en la carpeta de imgenes y posteriormente insertarlas. 9. Observa el ejemplo.

10. En Flash elaboraremos un encabezado que incluya los enlaces a Estufas, Lavandera y Electrodomsticos. Por tanto tenemos que elaborar estas tres pginas. 11. Creamos un nuevo documento de plantilla en blanco: Columna fija centrada con encabezado y pie.

12. Ajustamos al mismo color de fondo y de pie. Lo guardamos como estufas.html en la carpeta de lineablanca.

80

13. En este caso ya en la pgina anterior creamos nuestro archivo de estilos fuentes.css, ahora solo lo importamos a esta pgina. Selecciona el men Formato- Estilo CSSAdjuntar Hoja de estilos. 14. Selecciona la opcin de importar y examina tu archivo, si tienes problemas en que lo reconozca escribe directamente su nombre con extensin.

15. Checa que en tus reglas aparezcan tus estilos. 16. Crea un formato parecido al siguiente apoyndote en pginas de Internet. Crea un botn(sin vnculo) de Comprar e insrtalo en cada producto.

17. Trabajando en este mismo modelo de pgina lo guardars como lavandera.html y electrodomsticos.html y realizars los cambios necesarios.

81

18. Como comentamos al inicio de esta prctica Sitio con Flash puede que cause contratiempos para aquellos ordenadores que no estn actualizados, as que elaboraremos un men textual en el pie de pgina. 19. Puedes realizarlo en cualquier pgina y posteriormente copiar y pegar la tabla en las dems pginas. 20. Inserta en el Pie de pgina una tabla de una fila por cuatro columnas y escribe las opciones de enlace. Ajusta tu tabla.

21. Selecciona el texto de Inicio y activando el botn HTML crea el vnculo a la pgina de lnea blanca en destino _Self.

22. Realiza lo mismo para las dems opciones. 23. Ya que terminaste, selecciona tu tabla, cpiala y pgala en las pginas restantes.

82

24. Guarda todo y observa la vista del explorador, checa que los vnculos funcionen correctamente. 25. Antes de elaborar el encabezado en Flash necesitamos subir este sitio a tu servidor de hospedaje. 26. Regresa a elaborar la PRCTICA 1 INCISO D) antes de pasar al punto 27. 27. CONTINUAMOS con esta prctica. 28. Crea en tu carpeta de linea blanca un carpeta llamada media. 29. Abre el programa de Flash. Crea un archivo nuevo de 780 X 150 pixeles.

30. Coloca el color de fondo, el cual debe ser de preferencia el mismo que tienes en el pie de pgina de tus pginas. 31. Guarda tu archivo como titular en la carpeta de media. 32. Tu primera capa se llamar fondo y contendr los elementos fijos que no se movern. Por ejemplo el logo de tu empresa y su nombre. Colcate en el primer fotograma y crea un diseo sencillo haciendo uso de las herramientas Flash. Ocupa solo el cuadro izquierdo superior del rea de trabajo pues el resto lo ocuparemos en el diseo. Al terminar posicinate en el fotograma 70 y da F& para que se reproduzca la imagen.Bloquea la capa por seguridad con el candado.

33. Inserta una capa ms y nmbrala botones.

Flash tiene botones incorporados, la versin sobre la que trabajamos MX es muy limitada pero si tienes versiones ms avanzadas hay una gran variedad. Posicinate en el primer fotograma de esta capa y ve al men VentanaBibliotecas comunes-Botones, navega hasta encontrar un botn apropiado considerando que los colores contrasten con tu sitio. Arrastra el botn cuatro veces (no lo copies). Posteriormente

83

coloca a un lado usando la herramienta de texto sus enlaces: Inicio, Estufas, Lavadoras y Electrodomsticos.

34. Estos botones son ya smbolos que puedes agregarle acciones, en este caso hay que indicarle a cada uno que al hacer clic sobre ellos deben abrir una pgina de Internet. La sintaxis es la siguiente
on (release) { getURL("http://proyectoswebsara.idomyweb.com/lineablanca/estufas.html"); }

Para colocar el cdigo solo debes hacer clic con el botn derecho en el botn y seleccionar la opcin de acciones. Despus de capturar el cdigo da clic en la palomita Azul para verificar que no hay errores de sintaxis. Recuerda que las direcciones de tu sitio las copiaste anteriormente en un documento.

35. Al terminar de configurar los botones posicinate en el fotograma 70 y da clic en F6. Bloquea la capa con el candado por seguridad.

36. Inserta cuatro capas ms : Estufa, Lavadora, Licuadora y Batidora. Crearemos el efecto de que van apareciendo y se coloca una antes de otra. 37. Antes de seguir busca cuatro imgenes asociadas a las capas y gurdalas en tu carpeta de media:

84

38. En la capa de estufa colcate en el fotograma 10 y convirtelo a fotograma clave

usando el botn derecho. 39. Inserta en ese fotograma la imagen de estufa, Archivo-Importar, y ajusta el tamao. Coloca la imagen a la derecha del logo. Selecciona la propiedad de Animar-Movimiento.

40. Haz clic en 15 fotogramas despus para dar F6. En este ltimo fotograma mueve la imagen hacia la derecha del rea de trabajo.

41. Observa que este movimiento se representa por una flecha, la cual indica que la imagen se mover de un punto a otro en la pelcula. Prueba dando Control+Enter.

42. Ahora configuraremos para que una a una las imgenes lleguen y se acomoden una detrs de otra. 43. Trabaja ahora en la capa de lavadora con los mismos pasos. Colcate en el fotograma 25 y convirtelo a fotograma clave. Importa la imagen y colcala a un lado del logo. 44. Aplcale animacin de movimiento, 15 fotogramas despus da en F6 y mueve la imagen a un costado.

85

45. Realiza lo mismo con las dos imgenes restantes de forma que al finalizar tengas esta estructura

46. Puedes probar con Control + Enter los resultados. 47. En Flash puedes crear muchos efectos, si tu profesor lo solicita da algunos toques ms a tu pelcula. 48. Una vez que terminas hay que guardar los cambios y usar el men Archivo para exportar pelcula en la carpeta de media como tipo swf. Es probable que ya exista (se genera al dar Ctrl+Enter) y debas reemplazarla.

86

49. Listo tienes la pelcula, ahora hay que insertarla en Dreamweaver. Abre tu pgina de lineablanca.html. Colcate en el encabezado y utiliza el men Insertar-Media-SWF

50. Elige tu archivo SWF del titular. Como ests trabajando en una plantilla que maneja mrgenes no se ajustar totalmente.

51. Esto se debe a los mrgenes internos que maneja que debern ser editados desde el cdigo. 52. Haz clic en la vista de cdigo, desplzate hacia la parte superior y busca las siguientes lneas, observa que debes cambiar los mrgenes a 0.

87

53. Regresa a la vista de diseo y tu pelcula se ha ajustado exactamente a tu rea de trabajo.

54. Realiza este mismo procedimiento para el retso de las pginas, una a una insrtales la pelcula. 55. Observa la vista en el Navegador, solamente que los vnculos de flash seguramente los podrs observar hasta que est en internet tu trabajo. 56. Comprime tu carpeta de media y accede a Idomy En este caso subiremos la carpeta de media dentro de lineablanca y los cuatro archivos html que modificamos al insertarles la pelcula: estufas, lavadoras, etc.

88

57. Realiza la prueba de oro, abre tu subdominio en la prctica 4 y activa tu sitio de Lnea blanca. Prueba que funcione correctamente.

58. Regresa a la prctica 1 inciso D paso 61 para terminar de enlazar esta prctica con tu Sitio Principal.

89

PRCTICA 6. CREAR SITIO WEB CON BANNERS Y PROMOCIONES EN FLASH.


1. Antes de comenzar debemos crear la carpeta que contendr el sitio, en este caso agencia. Crala dentro de pestaas. Posteriormente crea la carpeta de imgenes que le corresponde. 2. Trabajaremos sobre una plantilla HTML totalmente en blanco 3. Elabora una estructura similar utilizando Div/PA

4. Crea un estilo colocando imgenes relacionadas con viaje (recuerda guardarlas previamente en tu carpeta de imgenes) , de color la barra en la parte superior y una tabla de aproximadamente 6 columnas y 13 filas en el centro para editarla. Manejaremos el resto de los fondos en blanco.

5. Utiliza la herramienta de combinar celdas para crear los espacios en donde irn algunas imgenes.

90

6. Guarda 6 imgenes asociadas a destinos de viaje en tu carpeta de imgenes: Acapulco, Espaa, etc. Insrtalas en la tabla.

7. Ahora creamos nuestro archivo de fuentes. Como manejamos fondos blancos en su mayora crearemos fuentes de color vivo. 8. Recuerda que al crear tu archivo de estilos te pide que guardes, gurdalo en tu carpeta.

91

9. Define tres formatos diferentes uno para los nombres de destinos, otro para describirlos y uno ms grande para el titular. 10. Crea un encabezado sencillo y coloca los textos bsicos.

11. Simularemos el men principal insertando una tabla en el segundo DIV, si es necesario crea un nuevo estilo CSS.

92

12. Finalmente dejamos listo el espacio para el banner y la promocin. Combina celdas e inserta un DIV en cada una de ellas.

13. Al seleccionar el DIV puedes ver su tamao exacto, el cual utilizaremos para crear las animaciones en Flash:

14. Creamos una carpeta llamada media dentro de la carpeta de agencia y ah guardaremos todos los archivos relacionados con flash. 15. Entra a Flash y crea un nuevo archivo llamado banner que guardes en la carpeta media. Asegrate que el tamao de este sea igual al del elemento DIV que insertaste para el banner. 16. En el banner colocaremos imgenes de las playas de Mxico con alguna promocin. Necesitamos la imagen con la promocin plasmada. De acuerdo al programa de diseo que tengas al alcance, sin embargo una manera muy rpida de crearlas es en Power Point y posteriormente usar la tecla IMPR PANT para convertirlas en imagen apoyndote de Paint. Crea cuatro promocionales de las playas con su nombre y lo que se ofrece, considera el tamao deseado para que no se distorsione la misma.

93

17. Trabajaremos en flash en una sola capa insertando cada imagen en 20 fotogramas, para insertarles un hipervnculo deberemos convertirlos a botones. 18. Inserta en el primer fotograma la imagen y ajstala al tamao exacto. Convierte a smbolo de Botn inmediatamente.

19. 20 fotogramas despus da F6

94

20. Puedes aplicarle animacin de Movimiento y en el ltimo fotograma aplicarle un Color alfa al 30% para que tenga el efecto de desvanecimiento.

21. Convierte el fotograma 21 en un Fotograma clave vacio usando el botn derecho. Inserta la segunda imagen de promocin. Convirtela en smbolo de botn inmediatamente. 22. Aplcale Color Alfa al 30%. 23. Da F6 20 fotogramas despus. Aplica animacin de Movimiento y en el ltimo fotograma reestablece el Color a 100%.

24. Repite el proceso para las siguientes dos imgenes. 25. Tu lnea del tiempo debe quedar como sigue:

26. Ahora busca pginas informativas de cada una de las playas que presentas para colocarles el URL . En este caso selecciona cada imagen en el primer fotograma y ve a la ventana de Acciones 27. Recuerda el procedimiento de la prctica anterior para colocar el URL, pero en este caso en una ventana en blanco.

28. Coloca los 4 URL, da Control + Enter y prueba tu pelcula. 29. Utiliza el men Archivo y Exporta la pelcula. Gurdala en la carpeta de media de agencia y regresa a Dreamweaver a Insertarla utilizando el men de Insertar.

95

30. Puedes observar la vista en vivo

31. Es probable que aj ejecutarlo Flash no te deje abrir los vnculos, pero despus de publicarla en Idomy no habr problemas. 32. Ahora elaboraremos el promocional. 33. Recuerda establecer el tamao de acuerdo al DIV de la pgina. 34. Dibujaremos a una persona que batalla por no saber nadar y le ofreceremos una pgina de clases de natacin.

96

35. Utiliza las herramientas que ya conoces de Flash para dibujar a la persona o usa una imagen de internet, simula que se ahoga , inserta un botn parpadeante que diga Clic Clic, el cual deber llevar el URL del sitio de clases de natacin. 36. Observa brevemente el procedimiento: 37. Tu primera capa es el fondo con el texto Te ahogas en la playa y la imagen de la playa, da F6 hasta el fotograma 100

38. En tu segunda capa inserta un botn de la Biblioteca

39. La tercera capa es un clic que parpadea. Inserta en el fotograma inicial el texto Clic. 40. Tu lnea del tiempo es algo as hasta el momento:

41. En la capa de Clic utiliza la opcin de Borrar Fotogramas que puedes activar con el Botn Derecho para borrar fotogramas de forma que 10 queden con texto y 10 vacios intercaladamente. Esto provoca el efecto de parpadear.

42. Finalmente para simular que alguien se est ahogando colocaremos solo sus manos, para ello debes utilizar una imagen transparente. Entra a Internet, busca unas manos con fondo blanco, gurdala y edtala rpidamente en Phothoshop para crearla transparente.

97

43. Elimina los fotogramas de la capa de manos y deja solo el primero.

44. Dando F6 cada 20 fotogramas simula un pequeo movimiento de las manos

45. Puedes agregar una capa ms con un pez paseando por el mar. 46. Finalmente agrega el URL al botn.

47. Exporta tu pelcula y agrgala en la pgina de agencia.html.

98

48. Realiza las pruebas necesarias. Terminaste una prctica ms!!!.

49. REGRESA A ELABORAR EL INCISO E) DE LA PRCTICA 1.

99