1

JULIO 2013. SMTS

2

COLEGIO DE BACHILLERES DEL ESTADO DE QUERÉTARO Programa de formación y actualización docente 2013-A

Diseño de Páginas Web. Instructor Sara Marlen Torres Sánchez Dirigido al Área de Capacitación en Informática

CURSO / TALLER: Diseño de Páginas Web INSTRUCTOR: Sara Marlen Torres Sánchez

OBJETIVO GENERAL: Introducir al docente al ambiente básico de diseño de páginas web en Dreamweaver para poder dirigir a sus estudiantes de la capacitación a utilizar esta herramienta como una medio para publicitar su empresa. CONTENIDO TEMÁTICO. TEMA 1 Contenidos conceptuales sobre Sitios Web TEMA 2 Diseño 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.

METODOLOGÍA. El curso se desarrolla de forma presencial en equipos de cómputo de la institución los cuales tendrán 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 más tiempo para desarrollarlas dependerá de las competencias informáticas 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 vía electrónica, las cuales estarán concentradas en la URL de su subdominio gratuito. El enfoque está dirigido a construir conocimientos en el diseño y elaboración de sitios web utilizando aplicaciones sencillas que no requieren habilidades avanzadas en el área de informática. Durante el curso el docente elaborará estrategias y prácticas dirigidas a los estudiantes de la capacitación de informática, 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 conclusión exitosa del mismo.

CRITERIOS DE EVALUACIÓN. Demostrar la competencia para:

Reconocer los elementos básicos de un Sitio Web

Diseñar sitios web a partir de plantillas en Dreamweaver

Insertar películas flash en el Sitio Web

Insertar complementos gratuitos en el Sitio Web

Publicar y mantener un Sitio Web en un servidor de alojamiento gratuito

3

CRITERIOS DE ACREDITACIÓN:

Puntualidad y permanencia en la sesión

Asistencia mínima del 80%.

Entrega oportuna de los trabajos, de acuerdo a los criterios de evaluación.

Evaluación de los aprendizajes, de acuerdo a los criterios de evaluación

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

4

LISTA DE COTEJO PARA EVALUAR EL CURSO Diseño de Páginas Web. Instructor Sara Marlen Torres Sánchez

DOCENTE___________________________________PLANTEL______________

Elemento Si No 1. Entregó actividad de Terminología de Sitios Web 2. Entregó actividad de Elementos de un Sitio Web 3. Entregó actividad de Diseño de elementos del Diseño Web

4. Entregó actividad de negocios electrónicos 5. Entregó actividad de Estructura y usabilidad de Sitios Web 6. Elaboró la práctica 1 completa 7. Elaboró la práctica 2 completa 8. Elaboró la práctica 3 completa 9. Elaboró la práctica 4 completa 10. Elaboró la práctica 5 completa 11. Elaboró la práctica 6 completa

PUNTOS /11

Importante: Para obtener la acreditación del curso es necesario contar con el 100” de las evidencias solicitadas. Las evidencias se entregan a través del URL del hosting gratuito. Fecha_______________________________ Nombre instructor: Sara Marlen Torres Sánchez Correo de entrega: smarlen7@gmail.com Firma_________________________

5

3. LECTURA INICIAL (Leer en grupo)

etodología de trabajo. Este curso tiene como objetivo compartir a los docentes del área de informática de a un conjunto de estrategias a través de las cuales pueden dirigir a sus estudiantes en la construcción de Sitios Web de una manera sencilla,

integrando siempre la parte conceptual , procedimental y actitudinal asociada con la temática. La dinámica en el curso como docentes será desarrollar las estrategias que se solicitarán a los estudiantes que cursan la capacitación y adquirir las habilidades necesarias para posteriormente orientarlos y aclarar sus dudas. En otras palabras tomaremos el papel de estudiantes diseñando Sitios Web considerando que tenemos solo habilidades básicas en el manejo de herramientas informáticas. Para lograrlo se proporcionarán lecturas, actividades y tutoriales desarrollados y ya utilizados por el Instructor, mismos que podrán compartirse con sus alumnos solicitando siempre respetar los datos del autor. Al igual que el trabajo en el aula los desempeños 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 interés, etc.; sin embargo el objetivo será para todos construir conocimientos en elaboración 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 sesión. 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 razón personal no concluiste en horario del curso.

Si es tu primera experiencia en esta área deberás 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 tecnología como una estrategia excelente para crecer el mercado de un producto o servicio y no como un obstáculo por falta de conocimientos. Comencemos con esta experiencia!!!!!

M

6

1.LECTURA/ACTIVIDAD: TERMINOLOGÍA BÁSICA DE PÁGINAS 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 electrónico, 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 británico en 1989.Se trata de una red de documentos o páginas web interconectados entre sí por medio de enlaces o hipervínculos. Actualmente, además de documentos existe una larga serie de servicios y redes sociales funcionando a traves de la Web. El método más usual para leer y explorar la Web es el uso de un navegador web como Internet Explorer o Mozilla Firefox. ¿Qué es una página web? Una página 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 información para presentarnos nuevo contenido, estamos viendo una nueva página web. Para fines prácticos también lo podemos entender como las secciones internas de un sitio web. En la vida cotidiana muchas veces se utiliza la expresión página web como sinónimo de sitio web. ¿Qué es un sitio web? Un sitio web es un conjunto de páginas web (que puede ir desde una hasta cientos de ellas) que están vinculadas a un mismo dominio y que incorporan un sistema de navegación para explorar las distintas páginas 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 dirección IP, para tener un identificador fácil de recordar para conectarse con un sitio web determinado (ejemplo: www.habitatweb.com.mx). La última parte de un dominio está pensada para darnos información sobre la ubicación geográfica y/o el tipo de actividad o información con el que se asocia el contenido del sitio. Algunos de los dominios de nivel superior (terminaciones) más comunes en México son: .com, .com.mx, .net, .org, .edu.mx y .gob.mx. ¿Qué es un IP? Las direcciones IP (IP es un acrónimo para Internet Protocol) son un número único e irrepetible con el cual se identifica una computadora conectada a una red que corre el protocolo IP. Una dirección 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 dirección 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 trámites por la renta del dominio estén incluidos. El uso de ciertos tipos de dominio o terminaciones está restringido al cumplimiento de algunas condiciones. ¿Qué es el hosting?

7

El hosting u hospedaje web se refiere a los recursos destinados en una computadora (servidor) a la cual se conectarán otras máquinas para poder ver y utilizar un sitio web determinado en Internet. Existen distintos tipos de hosting con distintas prestaciones; una de las más 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 conexión con el servidor en el que está almacenada la información 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 años de la Web para publicar, organizar y vincular información. A lo largo de los años se ha ido reformulando y ha ido ampliando principalmente sus posibilidades de control desde el punto de vista del diseño. Sin embargo, por sus características intrínsecas, es difícil que llegue a competir con el control gráfico total de un sitio construido en Flash. Por otro lado, HTML es la opción 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 tecnología abierta puede convivir fácilmente con otras tecnologías, incluyendo la posibilidad de combinarse con Flash. ¿Qué es un sitio en Flash? En contraste con HTML, la tecnología 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 años, Flash ha dejado de ser una herramienta exclusivamente de diseño, desarrollando la capacidad de relacionarse con otras tecnologías, mejorando notablemente sus capacidades de manejo de información y permitiendo construir inclusive aplicaciones complejas. Sin embargo, Flash sigue siendo la opción natural cuando el impacto visual es prioritario. En la mayoría de los casos convendrá analizar las características y necesidades de cada proyecto web antes de inclinarse por una u otra tecnología. ¿Qué es HTML5? HTML5 es un estándar que empezó a desarrollarse en el año 2009, y que nos ofrece a los desarrolladores un montón de nuevas características para lograr de forma más eficiente cosas que antes sólo se lograban instalando complementos como Flash Player (iPad carece de él) o que sólo eran posibles en aplicaciones de escritorio o “apps” nativas para los distintos dispositivos móviles y tabletas. ¿Qué es el ancho de banda? Hablando de una conexión a Internet, se refiere a la cantidad de datos que puede transferirse hacia o desde una computadora por unidad de tiempo. Haciendo una analogía con un río, el ancho de banda vendría siendo el “caudal”. El ancho de banda suele medirse en bits por segundo, por ejemplo 1 Mbps significa una transferencia de hasta 1 millón de bits por segundo. ¿Qué es una conexión de banda ancha? En el uso cotidiano, “banda ancha” es un término un tanto ambiguo que se refiere a una “conexión rápida” y en México generalmente se emplea para denominar cualquier ancho de banda superior al de una conexión tradicional por modem telefónico, la cual alcanza una velocidad máxima 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 páginas web. El navegador más común es Internet Explorer, desarrollado por Microsoft, y desde hace muchos años viene incluido con cualquier versión de Windows. Existen muchos otros

8

navegadores web, entre los que cabría mencionar el Mozilla Firefox (para Windows, Linux o Mac OSX) y Safari (desarrollado por Apple). ¿Qué es SEO (Optimización de sitios para motores de búsqueda? Se refiere a una serie de técnicas para favorecer el que una página web se coloque en buenas posiciones en los resultados de búsqueda de Google, Yahoo, MSN y otros motores de búsqueda o buscadores, para determinadas palabras o frases de búsqueda. Algunas de las principales prácticas que favorecen el posicionamiento en buscadores son: ofrecer contenidos originales que hagan uso inteligente de las palabras clave, utilizar un título descriptivo, vigilar la estructura y accesibilidad del sitio web y disponer de enlaces desde otras páginas web bien posicionadas y con temática semejante. ¿Qué es el spam en un sitio web? El spam en un las páginas web, algunas veces referido como “Black Hat SEO”, es el uso de técnicas engañosas para posicionar artificialmente un sitio web, perjudicando directamente la experiencia del usuario de Internet. Algunos trucos “clásicos” son el uso de páginas “falsas” que no tienen interés para los usuarios o la redacción de textos sin sentido (muchas veces ocultos) que solamente repiten palabras clave con las que les interesa posicionarse. Cuando este tipo de técnicas son detectadas en un sitio web, éste puede ser penalizado por ejemplo, con la exclusión 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 relación completamente ética. ¿Qué son las páginas dinámicas? El término páginas dinámicas se utiliza con dos significados distintos: Usualmente se refiere a páginas web que son generadas dinámicamente por el servidor con algún lenguaje como php. Es común que extraigan la información a mostrar desde una base de datos como mysql. Los foros de discusión, los weblog, las tiendas en línea y las páginas que se pueden actualizar desde una interfase web son sólo algunos ejemplos. Sin entrar en detalle, mencionaremos que el término páginas dinámicas también se utiliza algunas veces para referirse a páginas que son visualmente dinámicas o que utilizan ciertas técnicas específicas de interacción con el usuario. ¿Qué es un sistema de gestor de contenidos, CMS? Son programas informáticos que permiten la creación y modificación de páginas web dinámicas por medio de una interfase de administración y utilizando una base de datos para almacenar la información. Estos sistemas permiten, entre otras cosas, que un usuario sin conocimientos de programación pueda publicar documentos HTML, además de que le proveen de un mecanismo que automatiza muchos aspectos del manejo de la información. Uno de los CMS más populares actualmente es el sistema Joomla y Moodle .Entre los puntos débiles que tienen los gestores de contenidos, están 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 años 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 minoría 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 sólo vincula documentos sino que también facilita el intercambio directo entre personas, en donde la multimedia (imágenes, 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 podrían desplazar por completo al tradicional software “de escritorio”. Todo este fenómeno, de magnitud y consecuencias que aún no alcanzamos a comprender del todo, es lo que se ha denominado como Web 2.0

9

¿Qué es la Web 3.0 o Web semántica? Entorno online idílico donde las máquinas pueden

interpretar páginas web de la misma forma que los humanos. ¿Qué es la nube? En término simples se refiere al uso de un sinnúmero de servidores interconectados que ofrecen, a través de Internet, la posibilidad de guardar infinita cantidad de información y ejecutar todo tipo de tareas, desde un procesador de texto, un antivirus o servicios de e-mail.Sin que te des cuenta estás haciendo uso de servicios en la nube continuamente. Un ejemplo típico es usar una página web para acceder a una cuenta de correo en Google, Hotmail, o Yahoo, por mencionar unos cuantos.

10

Estrategia de evaluación de la lectura. Terminología de páginas web.

Instrucciones. En cada una de las siguientes oraciones hace falta un término asociado

con los conceptos estudiados. Completa la oración apoyándote en la lista de términos

proporcionados, estas pueden repetirse en algunos casos.

1. Este sitio tiene verdaderamente los paisajes más hermosos de

Querétaro, lástima que aparezca en las últimas páginas de resultados

Google. El sitio muestra muchas fotos pero sin texto alguno, debe

tratar de mejorarlo con _______ para que sea más visitado.

2. Listo!! Terminé mi sitio web ahora debo buscar un servicio de _______ para colocarlo en Internet.

3. Un maestro de matemáticas quiere tener un sitio web para registrar a todos sus alumnos y tener comunicación con ellos a través de el, su problema es que no tiene muchos conocimientos de informática. El debería pensar en utilizar un ________

4. Este sitio web me ha indicado que soy un visitante de Querétaro y que me ha identificado para evitar el mal uso de la información. Seguramente lo hace a través de algún dato que es único para mi computadora llamado ___________

5. Mi compañero de clase me dice que el sí pudo ver correctamente el sitio web que nos dejaron investigar y yo lo veo incompleto. Me comenta que use otro ______________ porque quizá así pueda solucionarlo.

6. La mayoría de las empresas que te rentan espacios de hosting te regalan el ______________________ que utilizarán los visitantes para entrar al sitio.

7. Entre a un sitio web que según me mostraría información sobre como diseñar un sitio web y resulta que solo me ofrecía venta de todo tipo de accesorios musicales. Este sitio maneja seguramente _____________

8. La mayoría de información de mi cuenta de correo está almacenada en un ______________ que es propiedad de Hotmail.

9. Mis papás 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 páginas, en Excel hojas, en Power Point diapositivas, en un Sitio Web ______________

11. Este sitio web tiene un diseño especial, tiene animaciones con movimiento que no puedo copiar con el botón derecho. Seguramente estas animaciones están desarrolladas en _______

12. Mi maestro de informática me comenta que tenemos que estudiar un lenguaje que utilizará códigos para poder crear un sitio web. _______________

13. Poco a poco este término se escucha en todos lados, en pocos años los discos duros irán desapareciendo pues todo se almacenará en lo que conocemos como__________

14. Su primer nombre fue ARPANET ahora es ___________________ 15. Invento de TIM BERNERS _________________

TÉRMINOLOGÍA DE

SITIOS WEB

CMS

SPAM

WEB 2.0

SERVIDOR

PÁGINAS WEB

NAVEGADOR

WWW

SEO

INTERNET

HOSPEDAJE

FLASH

NUBE

DOMINIO

IP

HTML

11

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

12 Elementos críticos que cualquier Sitio Web debe contener. La “homepage” o página de inicio es la página más importante de una web. Puesto que la “homepage” canaliza la mayor parte del tráfico de la web, es crucial que ésta esté diseñada para convertir el tráfico en “leads” (En e-marketing, cuando un usuario después de una búsqueda en internet llega a una página web y rellena un formulario de solicitud de información, a esto le llamamos lead.) y en ventas. Para lograr el máximo beneficio es necesario tener en cuenta los siguientes 12 aspectos recogidos a por

HubSpot en una infografía: 1. Título. En apenas tres segundos, la web debe responder a la siguiente pregunta: “¿Qué ofrece el portal?”. Y ésta debe ser respondida de la manera más simple y clara posible. 2. Subtítulo. En el subtítulo, la web debe ofrecer una breve descripción de lo que ésta ofrece al internauta. A la hora de escribirlo, hay que ser diferente y mostrar valor añadido. 3. Beneficios. Es importante describir no sólo 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 acción (compra en el sitio) . Incluir llamadas a la acción en la “homepage” es crucial para el índice de conversión (Ejemplo: cuando de 100 leads obtenemos 6 ventas, diremos que tenemos una conversión del 6%.). Es recomendable insertar entre 2 y 3 llamadas a la acción que se correspondan con cada una de las fases del ciclo de venta. 5. Características. Al margen de los beneficios de la web, es necesario mostrar al internauta una serie de características 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 también elementos clave para causar buena impresión en el internauta. 8. Navegación. Para disminuir los índices de rebote dentro de la web, es preciso que está cuente con un mapa de navegación lo más simple y claro posible. 9. Imagen de apoyo. En la “homepage”, hay que apostar por imágenes que reflejen claramente lo que ofrece la web al usuario. Las fotografías impersonales procedentes de bancos de imágenes no son nunca una buena opción. 10. Oferta de contenido. Para generar “leads” de la página de inicio de la web, es importante ofrecer al internauta contenido de calidad en forma de whitepapers, ebooks o guías. 11. Recursos. El 96% de los internautas que visitan una web no están dispuestos a comprar. Por eso, es importante ofrecerles información sobre el proceso de compra. 12. Llamadas secundarias a la acción. Las llamadas a la acción de una “homepage” no ocupan siempre un lugar privilegiado dentro de la página. Deben estar distribuidas por toda la web para aprovechar al máximo la generación de “leads”.

12

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

13

15 elementos clave que todo sitio web debe tener 1. Buen diseño visual. Primero lo primero: el diseño Visual. No sé usted,

pero si llego a un sitio web que no es visualmente agradable, mi visita es muy rápida. Esto no quiere decir que todo sitio web deba tener un diseño visual increíble, pero si un sitio parece que no se ha actualizado desde 2010, difícilmente lo catalogaremos como uno de los grandes sitios webs. Un diseño limpio y sencillo, por lo general, es todo lo que se necesita. Yo soy uno de los que está de acuerdo con la teoría “menos es más”. Las primeras impresiones son fundamentales. Y si bien, un buen diseño no es suficiente para mantener a alguien en su sitio, un diseño llamativo lo es, por lo menos, para llamar su atención el tiempo suficiente como para que eche un vistazo al contenido. 2. Interfaz de usuario. Junto con un buen diseño se requiere una buena interfaz de usuario. La interfaz de usuario es la base funcional de cualquier buen sitio web. Al diseñar un sitio web, tendrá que tener en cuenta el promedio de los usuarios. ¿Quién va a visitar su sitio web? ¿Quién 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 diseño de su sitio. Asegúrese 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 navegación es sencilla de comprender y coherente con los demás elementos de su web. Que sea evidente que el usuario debe hacer clic en términos de navegación primaria, así como en enlaces para acceder a ciertas áreas de su contenido. 3. Navegación primaria desde el primer pantallazo. Parte de tener una navegación 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 más grandes y con mayor resolución. Por lo general, se considera que el menú debe estar entre los 500-600 pixeles superiores de la página web. Dentro de este espacio, debe incluirse el logotipo (con un enlace a la página de inicio), así como enlaces a las secciones principales de su sitio. Si se quisiera enlazar a sub-páginas podría hacerlo; aunque, en la mayoría de casos, esto incrementaría el desorden en su diseño. Por ejemplo el menú podría ser "Home | Acerca de | Servicios | FAQ | Contacto" y estar ubicado en la parte superior de su sitio web. Además puede colocar sub-links, tales como Acerca del autor/ Curriculum, en algún otro lugar, como en su barra lateral o como un sub-menú bajo el título de la página principal de esa sección, etc. La consistencia es la clave. Debe estar seguro de que el menú primario como secundario este en el mismo lugar en las distintas páginas de su sitio web. 4. Repita la navegación en el pie de página. Si utiliza imágenes (o incluso flash) en su menú de navegación principal, es importante ofrecer un duplicado de enlaces de navegación en su pie de página. Incluso si utiliza enlaces de texto en la parte superior, la duplicación todavía es útil. ¿No le gustaría que sus visitantes encuentren el contenido que están buscando fácilmente? Muchas veces el pie de página puede contener enlaces a información adicional, como Los términos y condiciones. Debemos enlazar cosas que queremos que sean fácilmente ubicables, pero que no queremos aparezcan en el menú de navegación de la parte superior. 5. Contenido significativo. ¿Conoces el dicho... "El Contenido es el Rey"? Usted podría tener una bonita página 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, información sobre los conocimientos de su empresa, productos, servicios, etc. Utilizar un blog y artículos informativos relacionados con el área de su especialización, sería increíblemente ú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.

14

6. Una sólida página Acerca de. Entre las 10 páginas más populares de mi propio sitio (después de la portada, el blog, 3 páginas específicas del blog y mi cartera) está la de Acerca de. Tengo más clicks hacia mi página Acerca de que a mi cartera de clientes o a páginas de servicios, ¡pueden creer esto! Esto es simplemente porque la gente es curiosa. Ellos quieren saber quién está detrás de una empresa o un blog. Sería bueno también, incluir información sobre su vida, estudios, su propio negocio, etc. La página Acerca de… ayuda a crear un vínculo más personal con sus posibles clientes. Si ellos leen lo que usted ha escrito y con ello pueden conocerlo un poco más, serán capaces de dirigirse a usted en otro nivel de afinidad. 7. Información 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 página de contacto donde contratarlo, pues terminará yéndose a la competencia. Lo ideal sería que usted ofrezca más de un método de contacto. Por lo menos una dirección de correo electrónico y un formulario de contacto. Para hacerlo más "real", usted debería tratar de incluir un número de teléfono (y, si es posible una dirección). Sé que muchos trabajadores independientes trabajan desde una oficina en casa. Una rápida solución sería tener una línea telefónica para llamadas de negocios, así como un buzón de correspondencias. Si bien es cierto, todos estos detalles son más costosos, también lo es que se ve mucho más profesional que alguien que sólo incluye una dirección de correo electrónico. Todo depende del tipo de clientes a los que se está dirigido. Por ejemplo, si uno trabaja con clientes corporativos, que vean una dirección y teléfono es signo de estabilidad y confianza. 8. Búsqueda. Si usted tiene un gran sitio web o blog, un buscador es realmente útil. No hay nada como atravesar cientos de páginas y encontrar el contenido específico que uno necesita. Si un potencial cliente no puede encontrar algo fácilmente, es muy posible que se vaya donde encuentre ese contenido.Utilizar el buscador de Google en su sitio, o la herramienta de búsqueda de WordPress (o cualquier otra plataforma de blogs o CMS) es bastante sencillo. No es tan fácil de lograrlo con un sitio en HTML, pero aún hay servicios que permiten incorporar un formulario de búsqueda en su sitio. 9. Registro / Suscripción. RSS. Si su sitio web ofrece contenido nuevo constantemente, como con un blog, usted debe tratar de ofrecerlo de la manera más fácil y cómoda posible. Si tenemos un blog con WordPress, por defecto proporcionamos un feed RSS. Si no tenemos un blog, pero deseamos ofrecer suscripciones a un boletín informativo por correo electrónico, hay muchas empresas que permiten la configuración y gestión 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 búsqueda. Un mapa del sitio (html o php, etc.) es para los visitantes de su sitio una valiosa herramienta para encontrar justo lo que están buscando. Crear un mapa de la web -una lista estructurada de todas las páginas de su sitio web- es especialmente útil si usted no puede añadir una herramienta de búsqueda a su sitio. Un enlace al mapa del sitio es otro tema, sería recomendable colocarlo en el pie de página de su todo sitio. Un buen mapa del sitio, muestra una lista a todas las páginas de su sitio en formato jerárquico. 11. Separar el diseño del contenido. Ha pasado mucho tiempo desde los días en que se utilizaban tablas para el diseño HTML. Los mejores sitios utilizan una combinación de XHTML y CSS, creando la separación del diseño respecto al contenido. Con el uso de las etiquetas < div > se puede crear elementos que engloben texto e imágenes en sus páginas. Sin un archivo CSS sólo se verían los elementos básicos - el texto -, que es lo que los motores de búsqueda quieren ver. El archivo CSS externo es el que especifica las fuentes, colores, imágenes de fondo, etc. para el diseño de su sitio web. Lo que supone un ahorro de trabajo, ya que no hay que ingresar y modificar cada página web estática a fin de cambiar el color de un texto. Con esta separación, los motores de búsqueda ya no tienen que recorrer a través de todo el exceso de código a fin de averiguar su contenido. Y con archivos separados, el contenido puede cargar más rápido, lo que es positivo desde el punto de vista del visitante.

15

12. Validación XHTML / CSS. No es suficiente desarrollar su sitio web con XHTML y CSS, también tiene que tener un código preciso. Hay muchas razones para escribir código válido. Una de las principales es estar seguros de que nuestro sitio se verá bien en la mayoría de navegadores y serán accesibles a los motores de búsqueda. 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 aún, hay una mayor posibilidad de que estén usando Internet Explorer 6. Es importante crear una página web accesible a tantos navegadores como sea posible, y si podemos hacerlo compatible con las distintas plataformas, sería ideal. La mayoría de usuarios finales utilizan una PC, por lo que esta debería ser nuestra principal plataforma. Sin embargo, muchas personas podrían utilizar Mac, por lo que sería bueno prestarles atención, también 14. Imágenes Web optimizadas. Al diseñar la web, es importante guardar todas las imágenes en un formato comprimido. No tanto como para que sus imágenes se vean pixeladas; pero comprimiendo todo lo que sea posible, al mismo tiempo que mantenemos la calidad. Si estás acostumbrado a hacer trabajos de impresión, sabrá que 300 ppp es la norma. No es el caso con los sitios web. Al guardar sus imágenes en 72dpi obtendremos un mucho menor tamaño del archivo (o lo que es lo mismo, el tiempo de carga será más rápido para sus visitantes). Programas como Adobe Photoshop tiene una opción "Guardar para Web" que convierte automáticamente los archivos de imagen a 72dpi. 15. Estadísticas, seguimiento y análisis. Aunque este elemento está detrás de escena y es poco probable que un visitante lo sepa, es fundamental. Hay muchos servicios que ofrecen seguimiento de estadísticas web, incluyendo información relevante como: ¿Cuál es el número de hits recibidos?, ¿Cuántos de los visitantes son únicos?, ¿Cómo llegan las personas a mi sitio Web?, ¿Cuáles son los términos de búsqueda con el que encuentran mi sitio?, ¿Qué sitios web me enlazan?

16

Estrategia de evaluación de la lectura. Elementos de un Sitio Web.

Instrucciones. Asocia las oraciones con la imagen correspondiente de acuerdo a la

lectura estudiada.

1. Título

2. Subtítulo

3. Beneficios

4. Llamada primarias

a la acción

5. Características

6. Soporte

7. Indicadores de

éxito

8. Navegación

9. Imagen de apoyo

10. Oferta de

contenido

11. Recursos

12. Llamadas

secundarias

17

Estrategia de evaluación 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 relación más lógica.

Un buen diseño visual ( ) 1

Interfaz de usuario ( ) 2

18

Navegación primaria desde el

primer pantallazo ( ) 3

Repita la navegación en el pie

de página ( ) 4

Contenido significativo ( ) 5 Las fotos que quieres colocar en la página web son muy

pesadas y provocarán que esta tarde en cargar mucho tiempo.

Una sólida página acerca de ( ) 6

Información de contacto ( ) 7

Búsqueda ( ) 8 Te recomiendo este sitio para buscar tus cosméticos, carga

muy rápido y puedes encontrar rápidamente lo que buscas y

pagar sin problemas en línea.

Registro/Suscripción RSS ( ) 9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

Mapa del Sitio ( ) 10

Separar el diseño del contenido

( ) 11

Validación XHTML/CSS ( ) 12 ¿Quién elaboró este sitio!!! Tremendamente desordenado y

sin contrastes de colores, necesita un curso de diseño.

Compatibilidad con el

navegador ( ) 13

Imágenes 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 código abierto cuyo software ha sido usado para crear algunas de las mejores aplicaciones de Internet.

Estadísticas de seguimiento y

análisis. ( ) 15 El sitio no abre bien en Chrome, me comentan que en

Explorer si se puede ver.

19

3.LECTURA/ACTIVIDAD: ELEMENTOS DEL DISEÑO WEB

Si has visitado páginas web, algún 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, también está representado por los colores de la institución o siempre tratan de buscar una combinación de los colores de su logotipo. Se dice que el diseño de una página Web tiene la esencial misión 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 diseñador está elaborando un trabajo de diseño ya sea un logotipo, un cartel, un volante, una página web va a depender de algunos criterios del perfil profesional bajo los criterios de: habilidades personales, ámbito profesional y aspecto tecnológico. Para diseñar páginas web es necesario conocer varias disciplinas tales como: informática, comunicación, diseño y cibernética. Debe enfatizarse en el hecho de que la presentación de la información por sí sola no garantiza el éxito del mensaje, precisa de comunicación, y esta a su vez de un buen diseño para cumplir con el objetivo. Si el código es erróneo, es obvio que el mensaje será erróneo para un público erróneo. Un mal diseño tiene las siguientes características:

No saber lo que se quiere comunicar. Falta de conocimiento del significado psicológico de los elementos. El favoritismo por lo estético. La no valoración de lo funcional o viceversa

Estructura y planificación de sitios Web Antes de proyectar o diseñar una página web, es necesario seguir los siguientes lineamientos en la etapa de creación:

En primer lugar, es necesario hacer un análisis de la información que contendrá la página. Esto es, hay que informarse perfectamente sobre la temática 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 tipografías, el color y la composición, 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 página, como son textos, imágenes, gráficas, etc., todo el material gráfico que sea necesario para poder, entonces organizarlos.

Realizar una estructura con toda la información y elementos recopilados. Es recomendable realizar un boceto para poder visualizar de manera más clara todos los elementos que se incluirán (texto, imágenes, botones, hipervínculos), no olvidar los bocetos de las páginas con las que estará enlazada.

Lenguajes para la web Para poder crear una página web o programar, necesitamos utilizar determinado lenguaje de programación. Estos lenguajes permiten desarrollar diversas acciones en los sitios web. Existen varios lenguajes para la elaboración de sitios web como el lenguaje HTML, el XML, el CSS, el javascript, el SMGL, los cuales pueden ser utilizados incluso combinando varios.

20

El lenguaje XML es un estándar para el intercambio de información entre diferentes instancias. Puede ser utilizado para estructurar bases de datos, editores de texto u hojas de cálculo. XML representa la interfaz ideal entre las páginas 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 pequeños 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, márgenes, fondos etc., y se usa para formatear documentos estructurados en HTML. El más popular y utilizado de los lenguajes es el HTML (hypertext Markup Language o lenguaje de marcación 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 específicas (etiquetas o tags) que indican al navégate (Internet Explorer) cómo desplegar diferentes elementos tales como: texto, imágenes, fondos, sonidos, videos, etc. Hoy en día también existen infinidad de programas para realizar páginas web tales como Flash, Dreamweaver, Adobe Golive, FrontPage y softwares gratuitos. El programa de Flash Player fue diseñado para crear presentaciones en multimedia para la web, pero los recursos de animación de éste, han hecho de él, una herramienta muy popular y vistosa para la creación de páginas y sitios más llamativos y de interacción con el usuario, permite integrar gráficos vectoriales (mapas de bites), textos, botones, imágenes, sonidos, videos y un lenguaje de programación propio llamado Actionscrip para hacer la animación y todo dentro de un mismo software, y de manera muy precisa.En la utilización de Flash Player se debe ser muy cauteloso ya que no todos los usuarios pueden tener banda ancha (indispensable) o la última versión del programa,

lo cual sería un problema para su ejecución. Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere. Cumple perfectamente el objetivo de diseñar páginas con aspecto

profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar. Diseño en Sitios Web El diseño está compuesto por tres elementos – colores, formas y texturas. Los 3 deben estar siempre presentes, de lo contrario no existiría Diseño propiamente dicho. El significado de los colores A través de los años encontramos al filósofo Aristóteles 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 básicos eran los de tierra, fuego, agua y cielo. Leonardo Da Vinci también definió al color como propio de la materia estableciendo la siguiente escala de colores básicos: blanco como el principal, este permite recibir a los demás, después 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 características de éstos son el tono, la saturación 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, según su tonalidad un color puede ser rojo, verde, amarillo, etc. Así podemos decir que existen tonos cálidos o tonos fríos. Los cálidos son aquellos asociados con el fuego y

21

la luz solar, tales como el rojo, el amarillo y los naranjas, mientras que los fríos 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 más cyan que amarillo, tendría una tendencia a ser frió, y si tiene más amarillo parecería ser más cálido. Por eso es importante saber manejar los tonos. “La saturación constituye la pureza del color respecto al gris, y depende de la cantidad de blanco que presente. Cuanto más saturado está un color, más 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 añadiendo negro o blanco al color”. El color en la web Dentro de la teoría del color existen los colores luz y los colores pigmento. Los colores pigmento son los colores físicos (pinturas y tintas) son el azul cyan, el rojo magenta y el amarillo medio más 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 diseño 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 mínima parte de este elemento. El uso adecuado de un color es una clave segura de éxito para captar la atención de los visitantes de nuestra página. 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 iníciales 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 dígitos (RRGGBB) para cada componente. Para mayor comprensión 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 (máximo de rojo, verde y azul). La recomendación para el éxito de nuestra página es mezclar colores que sean armónicos entre sí y que no vayan más allá de 4 colores para lograr un buen esquema, recordando que también contamos con elementos auxiliares como la luminosidad, de los mismos colores elegidos. El modelo CMYK se basa en los colores de salida de impresión (colores pigmento) C= cyan, M= magenta y Y= yellow y se mide en %. Así un color brillante podría ser 3% cyan, 85% magenta 90% amarillo y 0 % negro. Y aunque este sistema es estándar, podría variar un poco dependiendo del sistema de impresión y sus condiciones. La percepción depende de cada uno, así que, para gustos, los colores. No obstante, podemos atribuir algunas características más o menos comunes que te ayudarán a escoger la coloración más 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 demás colores.

Negro: caro, elegante, misterio, sobriedad, duelo. Ideal para productos de gama alta y para añadir contraste. El negro es la ausencia de color y permite a los tintes adyacentes cobrar mayor protagonismo.

Rojo: fiesta, pasión, peligro, ansiedad, calor, estímulo, provocación, agresión. Úsalo para llamar la atención, pero siempre en dosis moderadas.

Azul: pasivo, frío, suave, unidad, confianza, frescor. Combínalo con naranjas, verdes o metálicos. Tiende a contraerse, a hacer una superficie más pequeña.

22

Amarillo: calor, animación, cobardía, mentira, visibilidad, enfermedad, luz. Combina bien con otros colores, y como el rojo, es ideal para resaltar. De hecho, la bandera española se diseñó roja y amarilla para poder ser bien visible en el mar a largas distancias. Además es un color cálido y expansivo.

Verde: ecológico, alimento, paz, envidia, celos, calma, equilibrio. Combina bien con el azul o el marrón y activa la creatividad.

Naranja: energía, juego, estímulo, atención, salud, alegría. Procura no abusar de este color, muy dominante y expansivo al ser la mezcla de rojo y amarillo.

Violeta: nobleza, espiritualidad, riqueza, psicodelia, misterio. Mézclalo 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 público objetivo principal, aunque en grandes dosis resultará cursi. Nunca lo utilices para la web de un grupo de heavy metal.

Las texturas El diseño web no ha escapado a esta tendencia a decorar elementos o páginas enteras

empleando la textura. En el caso del diseño web, la textura es solo un elemento visual y no táctil, como en otros casos, y tiene su precedente en la aplicación de la textura en la pintura. Si bien se ha empleado desde siempre en el diseño web, en los últimos años 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 utilización de este

elemento de diseño ha ido en aumento, no solo por la cantidad de páginas 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 diseño, ya que abarca a todo tipo de objetos y en una gran variedad de aplicaciones diferentes. Quizá la forma más simple y más empleada de utilización de la textura, sea en los fondos de las páginas web. Como todo elemento de diseño, 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 adecúa a la colocación 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 diseño plano se adecúa más a lo que pretendemos. Como cualquier otro elemento, tiene gran importancia y su utilización puede generar efectos satisfactorios, pero siempre que se le utilice en forma adecuada y concordante con el resto del diseño

Formas en el diseño web La forma no es solo uno más de los elementos de diseño web. Es quizá el más importante, gracias a la importancia que tiene en la comunicación visual de los elementos de diseño web (al igual que en diseño gráfico y otros tipos de diseño) es la forma. Su importancia radica en la estrecha relación que tiene este elemento con el mundo real. Basta con mirar en nuestro rededor para notar que la forma es el elemento más fácilmente distinguible y el más abundante.

23

Además, resulta mucho más sencilla la interpretación de los mensajes visuales que otros, y la forma es el de más sencilla captación 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 diseño web pueden representarse las formas en su estado natural a través de las imágenes, o emplearse representaciones abstractas de las mismas. Esto se logra gracias a la capacidad humana de abstraer. A pesar de que el diseño web tiene dos dimensiones, gracias a la utilización de luces y sombras un elemento de dos dimensiones puede brindar la sensación de un elemento de tres dimensiones o representarlo en forma abstracta. La forma es empleada en muchas ocasiones como método de lograr una comunicación sencilla y de fácil interpretación. En el diseño web muchas veces es necesario transmitir mensajes en forma rápida, para lograr atraer la atención 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 diseñadores y programadores ha hecho que muchos símbolos e íconos basados en la forma sean de comprensión 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 utilización en el diseño web Las formas pueden dividirse en tres tipos básicos: las formas geométricas, las formas naturales y las formas abstractas. Las formas geométricas 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 geométricas naturales. El empleo de la forma geométrica en todo tipo de diseño es muy frecuente, dado que generalmente se trata de objetos simétricos y regulares, lo que brinda a quien lo contempla, sensación de seguridad, orden y prolijidad. Las formas geométricas más usuales en el diseño web son el cuadrado, el rectángulo, el triángulo y el círculo. La página que mostramos a continuación es un ejemplo de empleo de la forma geométrica.

Las formas naturales también tienen un empleo frecuente, ya que permite una rápida asociación con un mensaje. La mayoría de las formas naturales empleadas en el diseño web son extraídas de imágenes. La siguiente página web nos muestra un ejemplo de ello:

24

Las formas abstractas constituyen el terreno menos explorado, aunque en los últimos años se ha producido un incremento en su empleo, gracias a la aparición de nuevas tendencias en el diseño, asociadas a tendencias artísticas como el arte abstracto o el pop art. Dentro de esta categoría también 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 representación gráfica basada en una forma. El siguiente es un ejemplo de utilización de formas abstractas:

En este ejemplo, el logotipo está formado por una forma que es la abstracción de un corazón. Si bien todos sabemos que se trata de un corazón, en realidad no es la imagen de un corazón, sino de una representación abstracta del mismo. Muchas formas abstractas son símbolos empleados universalmente y se las emplea para enviar a los usuarios un mensaje de fácil comprensión.

Algo que resulta imprescindible en todo buen diseño, es dirigir la vista del usuario por las secciones que el diseñador entiende que son más importantes. La utilización de formas como elemento para dirigir la vista del usuario es muy recurrente en el diseño de páginas web, ya que los atributos de la forma son ideales para llamar la atención de los lectores hacia aquellas secciones de mayor interés. La colocación de una forma colorida y llamativa junto a un texto, dirigirá fácilmente la atención del usuario hacia el mismo.

Puedes ver algunos diseños agradables de Sitios Web en este enlace

http://blogvecindad.com/50-disenos-agradables-hechos-con-css/

25

Estrategia de evaluación de la lectura. Diseño de Sitios Web.

Instrucciones. Da respuesta a los siguientes cuestionamientos:

1. De tu experiencia como navegador describe qué características has observado

en páginas mal diseñadas. Al menos cuatro:

a. –

b. –

c. –

d. –

2. Un grupo de personas dedicadas a la jardinería (construcción 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 diseñador responde lo siguiente:

a. A quiénes va dirigido el sitio

i. –

ii. –

iii. –

iv. –

v. –

b. Cuál sería el objetivo del Sitio Web

c. Cuáles son los contenidos principales que deberá incluir

i. –

ii. –

iii. –

iv. –

v. -

3. Específicamente para qué usarías Flash en el Sitio si se elaborará en

Dreamweaver. Describe el contenido de lo que propones.

26

4. ¿Cuáles serían los 4 colores que utilizarías en el sitio de tu diseño? ¿Qué

significan estos colores?

5. ¿Cuál sería un mal uso de una textura en tu sitio y cuál un buen uso de la

misma en este Sitio?

6. Esquematiza una forma abstracta relacionada con la Jardinería

27

4.LECTURA/ACTIVIDAD: E-BUSINESS

Negocios electrónicos. E-business es la integración del negocio de una empresa incluyendo productos, procesos y servicios por medio del Internet. Las estrategias de e-business Implican el rediseño total de los negocios, cambiando y revisando todos los procesos en la compañía para capturar las eficiencias que pueden proveer el uso de la tecnología en redes. Incluyen oportunidades de obtener ganancias, pero el foco principal está en los costos y la eficiencia en las operaciones

1. Comunicación y colaboración empresarial: esta

parte del e-business se ocupa de mejorar los procesos de

comunicación para lograr una mejor integración 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 discusión, sistemas de

Chat, video conferencias, y sistemas de colaboración.

2. Sistemas internos de negocio: quizás 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 información que nos de soporte para poder

tomar decisiones y realizar las acciones necesarias. Debemos poder delegar en los sistemas

informáticos 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 gestión de relaciones con los clientes (Customer Relationship Management CRM) son las soluciones tecnológicas para conseguir desarrollar la "teoría" 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 documentación, 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 producción. El término "cadena de suministro" hace referencia a todos los eslabones de esa cadena: Compras, Suministro, Gestión de existencias, Transporte y Mantenimiento. En teoría, una herramienta SCM permite rastrear el paso de las piezas (rastreabilidad) entre los distintos participantes de la cadena de suministro.

E-procurement (también conocida como Directorio de Proveedores) Es un término genérico que se refiere a actividades de compra electrónica negocio a negocio vía Internet en donde se involucra la automatización de procesos internos y externos relacionados con el requerimiento, compra, suministro, pago y control de productos utilizando el Internet como medio principal en la comunicación cliente-proveedor.

28

3. e-commerce, El Comercio Electrónico es básicamente el uso de redes (Internet) para

realizar la totalidad de actividades involucradas en la gestión de negocios: ofrecer y demandar productos y servicios, buscar socios y tecnologías, hacer negociaciones con su contraparte, seleccionar el transporte y los seguros que más convengan, realizar los trámites 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

páginas web sencillas, de solo texto que ofrecían información de productos. Luego, siguiendo el desarrollo del internet, evolucionó en avisos publicitarios completos con gráficos. El e-Marketing es la utilización 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 opción muy utilizada por las empresas para promocionar y difundir sus productos y servicios. El motivo es el bajo coste y la obtención de las preferencias de sus clientes. Actualmente internet constituye un medio de comunicación cada día más 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 televisión, permite conocer las preferencias y tendencias de consumo del posible cliente y desplegar información 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 e-Marketing (Marketing en internet) es una alternativa cada vez más 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 campañas de publicidad.

Permite entrar directamente en contacto con los potenciales clientes o usuarios. Permite continuas adaptaciones y modificaciones de las campañas según las

exigencias del momento. Es mucho más económico que los medios de comunicación "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 - Optimización en buscadores ¿Qué significa optimización en buscadores? Cuando hablamos de SEO, estamos hablando del intento o de la tarea de ajustar la información de las páginas que se quiere aparezcan en las primeras posiciones entre los resultados de las búsquedas. Viene del inglés Search Engine Optimization, es decir optimización para motor de búsqueda. También se entiende con esta expresión las técnicas de desarrollo de los sitios web para

29

mejorar la posición del sitio entre las SERP (páginas de resultados del buscador). Actualmente muchas empresas se dedican a realizar esta tarea por cuanta de otras empresas. También nos referimos a SEO para definir las personas que realizan este tipo de trabajo. Técnicamente hablando, lo que se posicional son las URLs de las páginas. Los sitios lograrán un buen posicionamiento como consecuencia. Las técnicas SEO pueden ser desmedidas y afectar los resultados naturales de los grandes buscadores por lo que si incumplen las cláusulas 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 código de programación, al diseño y a los contenidos y los buscadores tienen reglas de funcionamiento distintas. Las empresas SEO en la actualidad En el último año hemos asistido a un auténtico pasaje de empresas que se dedican al posicionamiento web, con sus fórmulas especializadas para ofrecer al cliente las primeras posiciones. Te aconsejamos que tengas mucho cuidado, si estas pensando contratar a alguna: existen fórmulas penalizadas por los buscadores. Hay que informarse bien y a lo mejor te darás 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 códigos, 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 URL’s - Google no penaliza a los sitios por errores en el código 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 título diferente para cada página - Minimizar el número de redirecciones hasta llegar a una URL - Minimizar el número de parámetros de una URL - Google está enfocando sus sistemas a combatir spam en otros idiomas (no inglés) Marketing por e-mail Se trata de una forma directa de marketing, utilizando el correo electrónico como medio de comunicación comercial. Cada mail que enviamos supone un posible cliente o usuario de nuestro producto. Hoy en día es algo bastante común y utilizado por las empresas, sea para promocionar algo cómo 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 inversión - Es inmediato: un email tarda pocos segundos en llegar - Permite al anunciante de "empujar" el mensaje hacia el público, mientras que un sitio web tiene que estar "esperando" a las visitas de la gente - Se pueden alcanzar personas que voluntariamente piden recibir información sobre temas de su interés en su correo electrónico - Se calcula que más de la mitad de los usuarios de la red revisan su correo electrónico cada vez que se conectan

30

La gran desventaja de este método 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 página no aparece entre los 20 primeros resultados de un buscador (lo cual es bastante optimista) posiblemente no conseguirás visitas a través de buscadores, a menos que pagues por ello. Muchos buscadores, sin embargo, cuentan con una columna en la parte derecha de los resultados de búsqueda 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 click”o “pago por visitas” son modelos publicitarios basados en que el anunciante paga por cada visita real que reciba a través del sistema. En un buscador PPC, los anunciantes luchan por obtener las primeras posiciones en las palabras clave de su interés. La lucha más 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 número de visitantes, aunque encareciendo el coste por visita. Los principales sistemas PPC que actualmente operan en España 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, títulos 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 campañas de posicionamiento en resultados “gratuitos” y sistemas de medición de rentabilidad. ¿Cómo funciona el Pay Per Click? Primero debes elegir los términos que son importantes para tus clientes, aquellos términos que las personas buscarían en el buscador. A continuación, investiga cuánto están pagando otros anunciantes para aparecer en esas listas de enlaces patrocinados. Cuanto más arriba quieras aparecer en la lista de patrocinadores, más tendrás que pagar. La lista la encabeza el mejor postor .Evidentemente, querrás averiguar cuánto pagas, por cuántos clientes y qué cantidad de negocio te proporcionan dichos visitantes. Deberías ser capaz de identificar más de 100 términos de búsqueda relacionados por los que podrías querer pujar por un único producto o servicio. Ventajas

- PPC es el método más efectivo para conseguir clientes potenciales - Tienes la posibilidad de controlar continuamente el coste por visitante - Es simple: cuanto más pagues, mejores posiciones tendrás en la lista de “enlaces patrocinados” - Sólo pagas por los visitantes que hacen clic en tu anuncio - Con PPC puedes elegir los términos para anunciar tus productos y servicios -Genera tráfico de calidad en tu web ya que el visitante puede leer una descripción de tu actividad antes de hacer clic en tu anuncio.

31

CPM - Pago por impresiones ¿Qué es una impresión? Cada vez que un usuario accede a una página web concreta que la que se encuentra un banner, éste es mostrado. Eso se llama "impresión". Una impresión corresponde a un usuario representado por una única dirección IP que visualiza una página 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 página. Banners. Diseño de campañas publicitarias en formato imagen o animación Flash con el objetivo de publicitar servicios, productos, novedades u ofertas. El pago por impresiones. Los anunciantes de pago por impresión pagan por las veces que se muestra su anuncio. Es una forma muy interesante de conseguir dinero, ya que no requiere de ningún tipo de acción 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 más efectivas, incluso se puede combinar una a la salida de tu web, con una a la entrada. Si tienes una página web una empresa publicitaria (o un particular) podría pagarte por insertar anuncios/banners en tu página. Te pagarían por cada vez que se muestre su publicidad. Es posiblemente el formato mas cómodo/rentable para el webmaster al depender solamente del número de páginas mostradas. Por supuesto, tu página tiene que ser una "buena página": ¡nadie quiere anunciarse en una página que no tiene visitas! Las empresas publicitarías suelen exigir un número mínimo de visitas en tu web (entre 75.000 y 100.000 páginas mostradas al mes) y piden dominios propios (no están admitidas webs alojadas en hostings gratuitos). Si no cumples esta 2 condiciones mínimas tendrás que buscar otro tipo de publicidad.

¿Qué significa CTR? Cuando se pone el click through en relación con las impresiones se obtiene una tasa denominada ratio de click through (CTR en sus siglas en inglés) que mide el número de veces que alguien ha hecho click sobre el banner en relación al número de veces que se ha mostrado dicho banner -número total de impresiones-. Esta tasa puede variar muchísimo en función de cada campaña de publicidad pero se puede considerar situada en términos normales si ronda entre el 0,1% y el 1%. Es un indicador para medir el éxito de una campaña publicitaria con banners, porque mide las veces que un banner es pinchado respecto a las veces que es visualizado. Otros: Gestión de Boletines electrónicos. Gestione el envío de boletines electrónicos o newsletter’s a sus clientes, proveedores, distribuidores o colaboradores externos de forma rápida y fácil. Controle el éxito de cada uno de sus envíos con información estadística detallada y general que le aportará la información necesaria para comprobar la repercusión de cada una de sus comunicaciones. Marketing uno a uno .Publicidad en Internet que permite personalizar el mensaje publicitario en función del visitante según situación geográfica (por país, comunidad autónoma o región, provincia y ciudad), IP’s, fecha y/u hora, idioma, navegador de Internet, sistema operativo, según página origen, etc. Sms. Realizar envíos de SMS masivos a sus contactos de forma automatizada y desatendida, filtrando los destinatarios y personalizando el envío por parámetros como edad, sexo, preferencias, sectores, etc. Concursos, promociones y juegos .Concursos o juegos interactivos con puntuaciones y ranking, distintos niveles de dificultad, multijugador, etc..

32

Estrategia de evaluación de la lectura.

Actividad Instrucciones. Completa el cuadro sinóptico de acuerdo a las lecturas

presentadas. Imagina que será la guía de exposición. Un integrante de tu equipo pasará

a exponer.

33

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

La estructura de archivos y carpetas.

Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y archivos. Cuando el número de ficheros es considerable, resulta muy útil ubicarlos en carpetas para facilitar su localización y edición. Existen múltiples posibilidades de organizar el sistema de ficheros. Con carácter general se proponen un modelo basado en la organización por tipos de archivos. Las páginas HTML se guardarán en el directorio o carpeta principal mientras que los elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc) se situarán en las subcarpetas correspondientes. Esta organización está especialmente pensada para un sistema de páginas HTML que comparten recursos: imágenes, 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: imágenes jpg, gif o png.

Pdf: documentos pdf.

Scripts: archivos js con código javascript reutilizable.

Swfs: archivos con animaciones flash (*.swf).

Vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv

Cuando el número de páginas sobre un tema es elevado se suele abrir una subcarpeta dentro de la carpeta principal.

Los nombres de carpetas y archivos Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna nombre a carpetas o archivos:

El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9

No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en blanco, caracteres acentuados, eñes, etc.

Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el guión –

No debe superar los 20 caracteres.

Utilizar siempre letras minúsculas aunque se admitan mayúsculas. Hay servidores que distinguen entre mayúsculas y minúsculas. Esto significa que la página INDEX.html no es la misma que la página index.html.

Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la *.htm.

Reserva el nombre index.html para la página que deseamos se muestre por defecto. Es decir la página principal.

Usabilidad de un Sitio Web. El término "Usabilidad", importado del mundo anglosajón, puede traducirse como "facilidad de uso". Es un concepto más general. Sin embargo "Accesibilidad" es un término más específico y se refiere al requisito que debe reunir un documento web para que las personas con discapacidades puedan alcanzar la información que contiene. A continuación se citan

34

brevemente algunas pautas o consejos que pretenden incrementar la usabilidad de las páginas web diseñadas.

1. Duplica los elementos de navegación si es necesario. Si la página va a tener un tamaño superior a dos/tres ventanas, conviene situar los elementos de navegación en el encabezado y pie de la misma. 2. Añade enlaces al principio de la página. Si la página es larga, es necesario situar al final de ella e incluso por el medio hipervínculos que apunten al inicio de la misma. 3. Evita diseñar páginas que sean callejones sin salida. Sitúa en todas las páginas al menos un enlace que permita continuar la navegación: volver, índice, etc. 4. Define una estructura sencilla de navegación. Es recomendable utilizar una estructura jerárquica sencilla a partir de una página índice evitando abusar de los enlaces que saltan de una rama a otra. 5. Proporciona siempre índices. Sitúa siempre que sea posible un índice con el contenido del sitio. Sitúalo al principio, lateral o final de cada una de las páginas para que sea siempre accesible.

Consideraciones en el diseño de Páginas: 1. Tamaño de las páginas. Las personas no suelen hacer scroll. Por este motivo las páginas no deben ser más largas del doble de la pantalla. Fracciona el texto en varias páginas cuando el tamaño del mismo sea excesivo para una página. 2. Identificación de las páginas. Es interesante situar información del centro o proyecto en el pie o encabezado de todas las páginas. 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 páginas para distintos navegadores. Aunque el Internet Explorer es el más usado cada vez hay más clientes con Firefox y Chrome. • No diseñes para la última versión del navegador. No todos los usuarios tienen instalada la última versión. • Define el tamaño de las tablas y celdas en %. De esta forma se adaptarán a la resolución de pantalla del usuario.

Tipografía 1. Negrita. No abuses del uso de la negrita destacando gran cantidad de texto ni del uso de mayúsculas porque son más difíciles de leer. 2. Capitalización. Un título es más atractivo con todas las iniciales en Mayúsculas y el resto en minúsculas que todas en Mayúsculas. 3. Tipos de fuente. Utiliza fuentes habituales porque el usuario debe tenerla instalada en su equipo para poder ver el texto con ella a través del navegador web. 4. Tamaño de la fuente. Utiliza los estilos de párrafo para modificar el tamaño de los textos y no conviene abusar del número de tipos de fuente distintas a utilizar en un documento. Basta con una o dos (texto y titulares)

Gráficos 1. Tamaño 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 tamaño del archivo que la contiene.

35

2. Imágenes de fondo. Utiliza imágenes de fondo de colores adecuados que no oculten el texto de la página. Tendrán una tonalidad parecida al color de fondo y de baja calidad para que se descarguen rápidamente. 3. Imágenes decorativas. No abuses del uso de imágenes no significativas. Dosifica el número de imágenes de una página para evitar las esperas durante su descarga. 4. Dimensiones de una imagen. Indica la altura y anchura de la imagen al insertarla en una página. De esta forma al descargarse la página ya se reserva el espacio para mostrarse una vez se complete la imagen. 6. Ahorro de imágenes. Trata de usar el mismo archivo de imagen tantas veces como sea posible para acelerar la visualización. 7. Formato de imágenes. Usa GIF y PNG siempre que sea posible. Para las fotografías es mejor el formato JPEG.

36

Estrategia de evaluación 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 página en un servidor de Internet todos los

archivos y carpetas se encuentran en la carpeta public_html o htdocs; además que hay archivos deben estar directamente en esta carpeta y no dentro de otras carpetas como el index.html (es decir no están en ninguna carpeta agrupados).

Publc_html

/

Htdocs

progra

mas_est

udio

docume

ntos_al

umno

Fotos_p

lantel

Docum

entos_d

ocentes

paginas

Carpetas

primersemestre

festivalmusica2013

tercersemestre

guiasestudio

muestranegocios

quintosemestre

otrosdocumentos

ftutorias

facademia (Formatos

academia)

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

insumos2013.html

37

Los siguientes nombres de archivos creados para un Sitio Web son incorrectos, escribe una propuesta para corregirlos:

No Nombre de archivo con error Mejor debería ser…

1 moño.jpg

2 colegiodebachilleresdelestadodequeretaro.pdf

3 cuento.DOCX

4 querétaro.avi

5 primer reporte de eventos.docx

6 libro#1.ppt

7 foto.primer.encuentro.jpeg

8 Lectura¿Dónde está el gato?.docx

9 Programa de matemáticas1.pdf

10 eventos.htm

La siguiente lista es una propuesta de preguntas para evaluar la usabilidad de un Sitio Web. Agrega una o dos preguntas más a cada apartado, las cuales deben estar relacionadas con el elemento.

Identidad e Información ¿Incluye enlaces a nuestros perfiles en redes sociales?

¿El logotipo es visible?

¿Incluye la web un apartado de quiénes somos?

-

-

Lenguaje y Redacción ¿El lenguaje está adaptado al perfil y conocimientos de nuestro público objetivo?

¿Es un lenguaje claro y cercano?

-

-

Rotulado ¿Utilizamos rótulos estándar que sean fácilmente identificables?

¿Los títulos de las páginas se destino se corresponden con las de los rótulos?

-

-

Estructura y Navegación ¿La estructura es coherente?

¿Los enlaces son reconocibles? ¿existen distintos enlaces que lleven a la misma página?

-

-

Lay-Out de la Página ¿Destinamos las partes más visibles de la web para los contenidos de mayor relevancia?

¿La longitud de página nos obliga a hacer mucho scroll?

-

-

Búsqueda ¿Es accesible desde la página de inicio? ¿se identifica con facilidad?

¿Qué respondemos al usuario cuando no devuelve ninguno?

-

-

38

Elementos Multimedia ¿Las imágenes son coherentes y con buena resolución? ¿proporcionan valor añadido?

-

-

Ayuda ¿Las FAQs se corresponden realmente a las preguntas más frecuentes?

-

-

Accesibilidad ¿El tamaño y tipo de fuente facilitan la lectura?

¿Las imágenes tienen atributos ‘alt’ que describan su contenido?

¿Es compatible nuestra web con los diferentes navegadores y dispositivos?

-

-

Otros 2.0 ¿Damos la opción de compartir los contenidos en las redes sociales?

¿Al compartir en Twitter se cita nuestro nombre de usuario?

-

-

¿Especiales para blogs

¿Damos la opción de suscribirse por RSS?

¿Los tags que utilizamos tienen relación con el contenido?

-

-

39

ADOBE DREAMWEAVER. PRÁCTICAS. Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y tiene soporte tanto para

edición de imágenes como para animación a través de su integración con otras. Adobe Dreamweaver permite crear sitios de forma totalmente gráfica, y dispone de funciones para acceder al código HTML generado. Permite la conexión a un servidor, a base de datos, soporte para programación en ASP, PHP, Javascript, cliente FTP integrado, etc. En estas prácticas elaborarás proyectos sencillos utilizando las herramientas que nos proporciona el programa. Utilizaremos la versión CS4 que está instalada en tu escuela. Como ya has estudiado la extensión html indica que se trata de un formato de página web, existen sin embargo muchas extensiones asociadas al manejo de sitios web como asp, dwt, hta, etc; por lo que deberás tener cuidado en guardar correctamente para evitar contratiempos. A partir de esta práctica la recomendación será utilizar la herramienta de Guardar todo en lugar de solamente Guardar, si lo haces el programa te pedirá que guardes el archivo con extensión 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 diseñar en Dreamweaver, en este caso no abordaremos la programación de HTML, solo diseño. 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 página en blanco. Adelante y mucha suerte!!!

40

Práctica 1. Diseño de un Sitio Web a través de una plantilla gratuita. Se dice que hoy en día cualquier persona que utilice una computadora puede crear un

Sitio Web debido a que existen decenas de programas que a través 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 adaptarás para concentrar tus prácticas del módulo.

1. Localiza la carpeta de Pestañas que fue compartida por tu maestro, ábrela y observa. Esta carpeta está compuesta por siete páginas y una carpeta de imágenes. Recuerda que el archivo index.html es la página que abrirá tu sitio. Si tu das clic en el automáticamente se visualizará en el explorador determinado de tu computadora. Pero por el contrario si lo quieres editar deberás cargar Dreamweaver y posteriormente abrirlo.

2. Haz doble clic en el archivo index y pruébalo. Observa que cada link abre

una página distinta Link2, Link3, etc... estos son los llamados hipervínculos. Este sitio además de texto tiene imágenes: La del logo, la del planeta tierra y cada link es una imagen. Entra a la carpeta de imágenes 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 submódulo, 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 aplicación como un procesador de textos o una hoja de cálculo

es común utilizar varios formatos de texto y con solo dar clic a la herramienta de tipo, tamaño y color para obtener los cambios necesarios. Hoy en las páginas web es diferente, existen las hojas de estilo o CSS, en ellas defines los atributos que tendrán los

41

formatos de textos que necesites. Regularmente en un sitio web no cambias tan frecuentemente de estilos de texto pues pierde calidad en la imagen, definirás entre 5 y 10 estilos de texto diferentes los cuales serán referidos por un nombre, así por ejemplo puedes definir un estilo de letra arial de tamaño 12 en color rojo el cual le llamarás 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, asegúrate de que te encuentres

en la opción 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 tamaño Ancho 300 y Alto

225, busca en internet una imagen jpg asociada con Páginas Web con tonalidades

azules o verdes y reemplázala por la de globes. Ajusta el tamaño de la nueva imagen

en la barra de propiedades.

42

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

10. Muchos de los elementos de una página web son imágenes, abre la carpeta de images y

observa que por cada Link existen dos imágenes una azul y una verde (off y on).

11. Para hacer la traducción habrá que modificar estas imágenes y guardarlas con el mismo

nombre, ojo!!!sin cambiar sus dimensiones.

12. Existen muchas aplicaciones que nos ayudarían 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 pégalo 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 página 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.

43

18. Cada página posee un título predefinido que aparece en la barra de título del

navegador. Reemplaza en todas las páginas (index1, index2,…) el título colocando

Proyecto y tus iniciales, Observa: .

19. Guarda todo.

20. Utiliza la opción de Archivo- Vista previa del Navegador -Explorer para ver los

resultados.

21. Ve a realizar la práctica 2.

PRACTICA 1. INCISO A) Esta actividad podrás realizarla cuando

elabores tu práctica 2.

22. Ahora trabajaremos sobre la pestaña de Práctica 1. Abre el archivo index2.html de tu

carpeta de pestañas.

23. Borra el contenido e inserta lo siguiente, que corresponde a las herramientas

estudiadas.

44

24. Reemplaza la imagen de la pestaña por la imagen del Sitio de mueblería creado. Utiliza

la tecla Impr Pant y en paint genérala. Guarda esta imagen en la carpeta images de

la carpeta pestañas. Desde el menú Insertar-imagen colócala y ajusta la imagen

cuidando que tu plantilla no se distorsione.

25. Busca en Internet un botón de Ver que contraste con tus colores. Guárdalo en la carpeta

de images e insértalo posteriormente a la página. Utiliza Formato- Alinear- Al centro.

26. La función de este botón será que al darle clic abra la página de Mueblería. Selecciona

el botón y en la opción de vínculo de la barra de propiedades navega en tus carpetas

para encontrar el archivo de mueblería.html y cambia el destino a una ventana

diferente por ser un proyecto diferente(_blank)

27. Utiliza la opción de Archivo- Vista previa del Navegador -Explorer para ver los

resultados.

45

28. Ve a realizar la práctica 3.

PRACTICA 1. INCISO B) Esta actividad podrás realizarla cuando

elabores tu práctica 3.

29. Ahora trabajaremos sobre la pestaña de Práctica 2. Abre el archivo index3.html de tu

carpeta de pestañas.

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

estudiadas.

31. Reemplaza la imagen de la pestaña por la imagen del Sitio creado. Utiliza la tecla Impr

Pant y en paint genérala. No olvides guardarla en la carpeta images de la carpeta

pestaña. Ajusta la imagen y cuida que tu plantilla no se distorsione.

32. Al igual que el enlace de la práctica 2 inserta el botón de Ver.

33. Crea un vínculo al botón para que abra el archivo de jardinería.html en una nueva

ventana (blank)

34. Realiza las pruebas necesarias.

35. Elabora ahora la práctica 4.

PRACTICA 1. INCISO C) Esta actividad podrás realizarla cuando

termines tu práctica 4.

36. Ahora trabajaremos sobre la pestaña de Práctica 3. Abre el archivo index4.html de tu

carpeta de pestañas.

46

37. Borra el contenido e inserta tres sitios que te proporcionen hospedaje gratuito, busca

una imagen en internet asociada con el tema, guárdala en tu carpeta de images e

insértala en lugar de la predefinida. Ajusta el tamaño para que no pierda la estructura la

página.

38. Coloca los hipervínculos correspondientes a las páginas, utilizando la herramienta de

vínculo, asegúrate de que estés en la vista de HTML.

39. Este vínculo debe ser en una ventana nueva (_blank).

40. Realiza las pruebas necesarias para saber que funciona.

41. Ahora como esta página 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 pestaña de pràctica 4 se haya actualizado.

44. Elabora la práctica 5.

PRACTICA 1. INCISO D) Esta actividad podrás realizarla cuando

termines el inciso 26 de tu práctica 5.

47

45. Abre el archivo index5.html y adapta el siguiente texto. Incluye también el botón de Ver.

46. Crea el hipervínculo en el botón para que abra en una ventana en blanco tu página de

lavandería.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 línea blanca en formato .zip.

50. En la práctica 4 subimos a Idomy todo tu sitio comprimiendo los archivos que estaban

dentro de Pestañas. Ahora solo tenemos que hacer la actualización, 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 opción de Cargar .

52. Recuerda que como se trata de un archivo zip es más fácil elegir la opción de la

derecha. Selecciona tu carpeta comprimida.

48

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 Línea Blanca.

55. Ahora como el archivo index5.html fue modificado debemos subirlo, en este caso utiliza

la opción izquierda que permite subir archivos individuales y procede aceptar y regresar.

56. En este momento en htdocs tienes la siguiente estructura, la cual es idéntica a lo que

tienes en la carpeta de pestañas.

49

57. Para poder terminar el sitio de Línea Blanca en Flash necesitarás la dirección web de

las páginas de estufas, lavandería y electrodomésticos. Abre tu subdominio en Internet,

la pestaña de práctica 4 y da clic en el Botón de Ver para abrir tu sito de Línea Blanca.

58. Utiliza el menú textual del pie de página para abrir la página de estufas. Copia su dirección

en un documento de Word. Ejemplo: http://proyectoswebsara.idomyweb.com/lineablanca/estufas.html

59. Realiza los mismo para la página principal, electrodomésticos y lavadoras. Guarda el

documento en donde tienes estos URL.

60. Ve al paso 27 de tu práctica 5 y al terminar regresa al paso 61.

61. Listo!!!! Terminaste la práctica 5, ahora colocaremos la imagen completa de la

práctica en el index5.html. Hasta el momento abre tu sitio pero no se aprecia la imagen

asociada:

62. Captura la pantalla de tu práctica terminada y guarda la imagen dentro de la carpeta de

images. Reemplaza la imagen correspondiente.

50

63. Analizando los cambios generados hasta el momento recordamos que se modificó

nuevamente la página de index5.html, se agregó la imagen correspondiente. Dentro de

la página de línea 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 acompaña a esta página (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 Línea blanca puede

abrirse correctamente desde nuestro sitio principal y que los encabezados de flash se

ven correctamente.

51

Ve a elaborar ahora la práctica 6.

PRACTICA 1. INCISO E) Esta actividad podrás realizarla cuando

elabores tu práctica 6. 66. Ahora trabajaremos sobre la pestaña de Práctica 5. Abre el archivo index6.html de tu

carpeta de pestañas.

67. Edita la página para que tenga la siguiente estructura, considera lo que hemos

elaborado en las prácticas anteriores.

68. La función del botón Ver será que al darle clic abra la página de agencia. Selecciona el

botón y en la opción de vínculo 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 pestaña de práctica 5.

52

PRACTICA 1. INCISO F) Esta práctica es recomendable realizarla

después de terminar el inciso E.

1. Durante el curso elaboraste diversas actividades que te ayudaron a comprender

conceptos esenciales en el diseño de Sitios Web, concentra estas actividades en

un servidor de almacenamiento gratuito como (Dropbox, Slideshare, etc). Consigue

los vínculos para que puedas enlazarlos a tu página index7.html de la siguiente

manera. Coloca los nombres de las actividades e insértales un hipervínculo a cada

una de ellas con destino en ventana en blanco, de forma que al hacer clic las abra.

2. Ahora faltaría solamente subir a tu hosting de Idomy la página index7.html y la

imagen que le asociaste.

3. Checa que tu Sitio Web de proyectos funcione correctamente, realiza ajustes

necesarios.

LISTO TERMINASTE

FELICIDADES

53

Práctica 2. Diseño de un Sitio Web a través de un documento en blanco con tablas, div y barra de navegación. PROCEDIMIENTO:

1. Antes de comenzar debes crear la carpeta en donde elaborarás este sitio, así que

dentro de tu carpeta pestañas 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, Página en blanco- HTML- Diseño

<ninguno>.

3. Guarda este archivo en la carpeta mueblería como mueblería.html

4. Utilizando la opción DIV PA que se encuentra en Insertar-Objetos de diseño crea una

estructura como la siguiente. Utiliza colores vivos (no degradados) en fondo blanco,

elaborarás la Web para una mueblería de diseños modernos. Dentro del DIV izquierdo

inserta una tabla de 15X4 en borde a 0.

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 librería, otra para

los titulares de las páginas 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

Página Web y como se trata de un titular

usa tamaño de fuente a partir de 18.

54

8. Ahora crea un formato para crear el nombre de tu negocio. Observa la figura del paso

11. Vuelve a elegir Formato-CSS-Nuevo asegurándote que la regla no sea nueva hoja

más bien se aplique a la hoja ya creada.

9. Define el formato necesario. Crea un formato más para los contenidos de las páginas

Web. Estos formatos puedes modificarlos posteriormente.

10. Juega artísticamente con los colores de las celdas para colocar el nombre de la

mueblería (elígelo tú).

11. Después de colocar el texto selecciónalo y aplícale la regla destino.

55

12. Dentro de la carpeta de mueblería crea una carpeta llamada imágenes.

13. Busca la imagen de un mueble moderno en fondo blanco que contraste con los colores

utilizados y guárdala en esta carpeta de imágenes. Utiliza la opción 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 tamaño.

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 navegación sencilla. En Dreamweaver una barra de

navegación requiere hasta 4 botones por opción, pero en este caso solo elaboraremos 2

por cada opción: Inicio, Hogar, Oficina y Visítanos. Utilizando el programa que tengas a

tu alcance como Paint, Flash o Corel Draw diseñarás los 8 botones que necesitamos.

Por ejemplo del botón de Inicio deberás crear 2 con el mismo texto pero en diferente

color, todos los botones deben tener el mismo tamaño y se deben manejar los mismos

pares de colores y tipos/tamaños de la fuente. Guarda estos botones con formato jpg en

la carpeta de imágenes de la carpeta de mueblería, con los nombres de inicio1, inicio2

hogar1, hogar2, etc. Asegúrate 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 página web. Como ya estudiaste en HTML los colores tienen un código, para

rescatar el código del color de la barra seleccionas tu barra DIV inferior y observa que

código 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 página web.

18. Utiliza la herramienta de texto para escribir el nombre del botón, ejemplo Inicio, con

color blanco.

56

19. Exporta este botón utilizando el Menú Archivo-Exportar-Imagen. Guárdala 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 reemplázala 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 navegación. Deberás 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 demás 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 navegación.

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

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

26. LISTO!!, tienes el diseño completo de tu página principal o Inicio, en este caso

necesitamos crear una página más para Hogar, Oficina y Visítanos. Las generaremos

haciendo una copia de inicio mediante el proceso de Guardar como.

57

27. Teniendo abierta tu página de Inicio(mueblería) guárdala como hogar.html, oficina.html

y visitanos.html.

28. Abre la página de hogar, inserta una tabla de 3X3 sin borde, busca en internet tres

muebles de hogar con colores que se adapten a tu diseño, guárdalas correctamente en la

carpeta de imágenes de mueblería y posteriormente insértalas en la tabla y ajusta su

tamaño manualmente, conforme ajustas los objetos se ajusta la tabla, coloca también el

título de Hogar y aplícale el estilo Titular CSS creado anteriormente.

29. Ahora elabora algo parecido para Oficina.

30. Para la página de visítanos inserta una tabla de dos filas por tres columnas. Escribe la

dirección de de la mueblería con estilo contenido. Es ficticia pero debe existir en

Querétaro.

31. Ahora entra a Google Maps y localiza la dirección escrita en tu página. Haz clic en

Enlace y Personalizar.

58

32. Elige el tamaño pequeño y copia el código que te proporciona. Regresa a

Dreamweaver, colócate en la celda segunda columna y segunda fila, haz clic en el

botón de Código.

33. Con cuidado, y exactamente en esa posición da dos o tres Enter, regresa a una línea en

blanco y haz clic en Pegar. Habilita nuevamente la vista de diseño y aparecerá un

recuadro gris.

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

59

35. LISTO!!! Tenemos las páginas del sitio pero ahora se necesitan poner los

hipervínculos en las barras de navegación.

36. Accede a Modificar_Barra de navegación de tu archivo muebleria.html.. Aquí te desplazarás por cada elemento de la barra y le indicarás la página a la que vinculas

a. Inicio a muebleria.html b. Hogar a hogar.html c. Oficina a oficina.html d. Visítanos a visítanos.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 páginas restantes, después de modificar cada una no olvides Guardar todo.

39. Ahora puedes probar que en todas las páginas funcionen los botones en la vista de

IExplorer

40. REGRESA A ELABORAR EL INCISO A) DE LA PRÁCTICA 1.

60

Práctica 3. Diseño de un Sitio Web a través de una plantilla de Dreamweaver y uso de Spry. PROCEDIMIENTO:

1. Antes de comenzar debes crear la carpeta en en donde elaborarás este sitio, así que dentro de tu carpeta pestañas crea una subcarpeta llamada jardinería(recuerda que no debes usar acentos ni espacios en los nombres de archivos). Dentro de la carpeta jardinería 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 deberás guardarlo tu como html y de aquí en adelante utilizar solo la opción de guardar todo en lugar de guardar. Esto es un consejo si no tienes habilidades informáticas avanzadas, si las posees puedes guardar en ambos formatos cada página.

3. Entra a Dreamweaver y selecciona el menú de Archivo- Nuevo y elige de la opción 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 nómbralo jardineria.html en la carpeta de jardinerìa, 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 imágenes que te agraden.

61

5. Recuerda que estamos trabajando en una plantilla y que si la distorsionamos será difícil

arreglarla. Si esto sucede mejor vuelve a empezar. Coloca el nombre a tu jardinería, 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 página escribe la frase sobre Copyright.

6. Para la imagen: busca en internet una imagen jpg de un jardín atractivo y guárdala dentro de la carpeta de imagenes que se encuentra en tu carpeta de jardinería. 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 “jardín”

8. Selecciona el encabezado, la imagen y su descripción y utiliza el menú Formato_Alinear_Centro.

9. Presiona en el botón de Propiedades de la página y define el color de fondo, si crees conveniente cambia el color de letra.

10. Posiciónate 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 categoría de Fondo y cambia al Color de fondo

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

13. Observarás que aún quedan algunos bordes grises a los costados del Encabezado y Pie

de la página. Regresa a editar la regla seleccionando la de .twoColFixLHdr #header, y cambia entonces el fondo gris al mismo color de la barra.

62

14. Cambia al pie de página 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 Título por el nombre de la

jardinería: 16. Utiliza Archivo_Guardar Todo para actualizar los cambios. 17. Utiliza Archivo_ Vista Previa en el navegador_ IExplorer para que veas cómo queda

tu sitio. También puedes probar con .

18. Recuerda utilizar la opción de Guardar todo continuamente.

63

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. Colócate al final del título de encabezado y presiona la tecla Enter para insertar una

línea inferior en donde colocarás el menú. 21. Inserta un menú Spry desde el menú de Insertar-Objeto de diseño-Barra de menú

Spry. Elígela Horizontal

22. Se creará automáticamente el menú, que podrás visualizar desde la vista de Diseño de

esta forma, presiona Guardar todo, además de una carpeta llamada

Chécala, 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 menús de Spry podremos ver en el panel

Propiedades las opciones necesarias para configurar nuestro menú:

64

La creación 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. Añadir y quitar elementos es tan fácil 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 página o a un correo electrónico) lo haremos escribiendo en la caja de texto Vínculo. Si trabajamos en una página con marcos podremos utilizar el campo Destino para establecer en cuál de ellos se abrirá el enlace.

Por último, Título contendrá una ayuda contextual que se mostrará en forma de etiqueta al colocar el ratón 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 desplegarán al colocar el ratón 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 también 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 títulos de acuerdo a la estructura planteada al inicio. Por el momento los vínculos no los modificamos así que no borres los símbolos de número.

25. Observa tu página en vista de IExplorer para ver los resultados

65

26. Esta barra de menús 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 podrás 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 más apropiados a tu página. Recuerda estar en tus cuatro colores establecidos.

66

29. YA TENEMOS LA PÁGINA principal, pero ahora necesitamos 6 más 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 título, 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 título de Eventos.

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

35. Guardas todo y realizas lo mismo para todas las páginas restantes. No olvides los

nombres sin espacios, en minúsculas y sin caracteres especiales!!! 36. Observa como en tu carpeta se van generando las páginas web hasta contar con 7

páginas.

37. YA TENEMOS LAS PÁGINAS DEL SITIO ahora hay que enlazarlas. Los enlaces

(hiperenlaces) o simplemente enlaces, son enlaces del documento que permiten que

67

cuando se hace clic sobre ellos, se abra una nueva página, se abra un documento, o nos

traslademos a otro punto de la página 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 páginas o documentos que se encuentran dentro del mismo sitio. Para ello utiliza la ruta relativa, es decir, marcando la ruta desde la página donde se encuentra el enlace.

38. Los elementos del menú Spry deben ser configurados para enlazar páginas. 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 vínculo y

el destino, tendrás que asignar la página correspondiente al último nivel de cada

elemento y escribir el destino como _self. De esta manera actualizarás Inicio,

Servicios, Ventas y Acerca de

40. Al terminar guarda todo.

41. Ahora tienes dos opciones: Hacer lo mismo en cada página o copiar la barra de menú

en las demás páginas. Ejemplo

a. Estando en tú página principal que ya tiene en el menú todos los vínculos haces

clic en la indicación azul y das control c (copiar)

b. Abres otra de tus páginas como flores.html, le borras la barra de menú.

c. Das en pegar y se coloca la nueva barra ya actualizada.

68

d. Realizas el procedimiento para todas las páginas.

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

páginas (recuerda que aun no tenemos contenidos, solo títulos). Si detectas algún error

visualiza en la barra de título cuál página es la que actualmente está abierta y deberás

abrirla en Dreamweaver para corregir el error. Cuando acercas el mouse a un elemento con

vínculo aparecerá en la parte inferior de la ventana que página 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

diseño de texto y gráficos en una página HTML. Una tabla consta de una o varias filas,

cada una de las cuales consta, a su vez, de una o más celdas. Aunque las columnas no

suelen especificarse explícitamente en el código HTML, Dreamweaver permite

manipular tanto columnas como filas y celdas.

45. Abre la página correspondiente al jardines.html. Después del título principal da un Enter

para pasar al siguiente renglón y selecciona el menú Insertar_Tabla de 3 filas por 2

columnas.

46. Ajusta el tamaño de la tabla a el ancho de la página

Combinaremos las dos primeras celdas con la herramienta de combinar celdas

47. Realiza un diseño rápido pero de calidad en la tabla. Busca y guarda imágenes dentro

de la carpeta de imagenes de jardinería. Utiliza el menú insertar imagen para colocarlas

y dale un tamaño adecuado. (Recuerda que la imagen no se copia y pega de internet, se

guarda en la carpeta de imágenes y posteriormente se inserta).

69

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 página de contacto la terminaremos en una práctica posterior así que por el momento

solo escribe la frase “Si tienes algún comentario o duda rellena este formulario”

52. En la página de ¿Quiénes somos? Redacta a que se dedica la empresa y su misión.

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 informática. Generalmente estas aplicaciones se insertan

en los Sitios Web por medio de un código que proporciona el patrocinador, el cual

70

deberá pegarse en el formato de Código en tu sitio, así como lo elaboraste en Google

Maps. Entre algunas aplicaciones podemos comentar que puedes insertar fácilmente a

tu Web un Chat, Videos, Reproductores de música, Contador de Visitas, Calendario,

Juegos, Formularios, etc. Hoy en día también se les asocia con la palabra Gadget. Para

esta práctica insertaremos un formulario de contacto por medio de una aplicación

gratuita.

54. Entra a el sitio de http://spanish.jotform.com/

55. Si es la primera vez aparecerá la siguiente pantalla. Ciérrala para poder ver las

herramientas de formulario.

56. Aparecerán 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 electrónico 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 automáticamente el botón de enviar, de lo contrario insértalo.

71

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 opción de Alertas por E.mail que se encuentra en la

pestaña de Instalación.

65. Elige la opción de Notificación 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 Código Fuente

70. Luego en Insertar opciones

71. Posteriormente elige Dw que es en donde estás diseñando y

aparecerá un código que debes seleccionar y copiar en su totalidad. Crtl C.

72. Sin cerrar, regresa a Dreamweaver y abre la página de contacto

73. Algunas de las ventajas de estas aplicaciones es que son muy fáciles de crear, sin

embargo estamos limitados a las herramientas que nos ofrecen. Este formulario es más

ancho del espacio que tenemos en nuestro sitio y por tal desconfiguraría la plantilla al

insertarlo. Entonces abre tu página de contacto y elimina las áreas Div del centro.

74. Escribe el texto de “Si tienes alguna duda escríbenos” y da un enter para colocarte en la

siguiente línea.

72

75. Haz clic en Código

76. Exactamente en donde aparece el cursor del código da dos Enter para que se aprecie

un espacio en blanco.

77. Ahora en ese espacio vacío da Pegar para colocar el código

78. Se pegará el código. Ahora haz clic nuevamente en diseño 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 página de contacto.

81. Entra a tu dominio y rellena una simulación en el formulario. Checa que haya llegado a

tu correo, tal vez esté en el Spam.

73

PRÁCTICA 4. CREAR CUENTA DE HOSPEDAJE GRATUITO PARA PUBLICAR SITIOS WEB. CONSIDERACIONES ESPECIALES: Por experiencia se recomienda solicitar a los alumnos que realicen su inscripción 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. Además de recordarles que la notificación llegará al spam. Después del diseño de un Sitio Web lo más importante es colocarlo en un servidor de Internet y comprobar que no presenta errores para los interesados que lo visitarán. Hay una amplia variedad de servicios de hosting. El más básico es el hosting de archivos (alojamiento web u hospedaje web), donde se pueden alojar las páginas de los sitios web y otros archivos vía 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 sólo es suficiente para páginas web personales. Un sitio web complejo necesita un paquete más 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 electrónico también se requiere SSL. El proveedor de hosting puede también 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 práctica necesitarás tu cuenta de correo electrónica o si te lo recomienda tu profesor crearás 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 gustaría que tenga tu página y que se relacione con el giro, por ejemplo para este proyecto puede algo como proyectoswebnombre y escribe la contraseña que manejarás (de preferencia la de tu correo para no olvidarla), escribe tu correo, categoría de Personal y el código que te solicita.

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

74

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

respuesta. Te pedirá que actives tu cuenta haciendo clic en el enlace proporcionado. Ojo!!! Si no haces la activación inmediatamente es probable que te la niegue después y deberás hacerlo nuevamente con otro correo. Quizá tengas que esperar algunos segundos para activar la cuenta.

5. Tendrás que llenar el captcha y te enviará nuevamente a tun correo los datos de

acceso.

75

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 página 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 características de tu hospedaje y todos los textos marcados con flechas azules son herramientas que normalmente manejan los diseñadores de páginas web como tú.

11. CPanel (acrónimo de control Panel) es una herramienta de administración basada en

tecnologías web para administrar sitios de manera fácil, con una interfaz limpia. Se

76

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

más rápida y sencilla..

12. Prepara el Sitio Web que publicarás. Tu carpeta de pestañas.

13. Cuando subes un sitio la aplicación para publicarlo buscará y abrirá el archivo Index, en

este caso es index.htm pero ocupará todos los recursos y páginas asociadas.

Podríamos subir un sitio archivo por archivo pero sería muy tardado, generalmente esta

dinámica solo se realiza cuando actualizas un sitio. Entonces comprimiremos los

archivos de ta carpeta del Sitio Web, pero OJO!!! No comprimirás la carpeta,

seleccionarás los archivos y las carpetas y con el botón derecho los enviaras a un

archivo comprimido, observa:

14. El archivo comprimido debe ser de extensión .zip NO RAR!!

15. Entrarás al CPanel o Panel de Control

o

16. Elige la opción 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.

77

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

Eliminar. Aparecerá una pantalla a la que deberás acostumbrarte, dos símbolos una

paloma verde que significa aceptar y una flecha azul para regresar.

19. Ahora presiona el botón de subir archivo y haz clic en examinar, como se trata de un

archivo comprimido elige la opción de la derecha y selecciónalo. Presiona la flecha

verde para comenzar a subirlo.

El proceso puede tardar

varios minutos.

20. Aparecerá la ventana que te indica el contenido a descomprimir, acéptalo.

y posteriormente a regresar, .

21. Observa que ahora en tu carpeta de htdocs se encuentran todos los archivos index y las

tres carpetas.

78

22. En los datos de tu correo también te enviaron l tu dirección de página web gratuita,

Accede a tu dirección:

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

más de 20 caracteres en su nombre.

b. Comprimiste mal tu carpeta.

c. Tu archivo index.html no existe.

d. Las imágenes las copiaste y pegaste desde internet y no las guardaste

previamente.

e. Te faltaron colocar algunos enlaces.

25. Pero recuerda que todo tiene solución, encuentra los contratiempos y corrígelos.

Posteriormente repite el proceso para que se reemplacen los archivos.

26. Checa que en tu sitio abren todos los enlaces de las diferentes prácticas.

79

PRÁCTICA 5. CREAR SITIO WEB CON ENCABEZADO EN FLASH. CONSIDERACIONES ESPECIALES. La tecnología Flash, que aún se emplea en numerosos sitios web, tiene la gran ventaja de que permite la creación 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 versión del programa, además de que en las páginas desarrolladas con Flash no podemos crear enlaces a secciones específicas de la página web, sino que cualquier anuncio debe dirigirse a la página principal del sitio. De esta forma no es recomendable desarrollar un Sitio Web totalmente en Flash y en su caso utilizarlo solo para secciones especìficas. En nuestro colegio contamos con una licencia de años anteriores que es la que trbajaremos, Flash MX. En este caso será para un negocio de venta de línea blanca para el hogar.

1. Antes de comenzar debemos crear la carpeta que contendrá el sitio, en este caso

lineablanca. Créala dentro de pestañas. Posteriormente crea la carpeta de imágenes 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 información 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 página publica tus formas de pago.

80

6. En este momento ya eres más 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 imágenes previamente en la carpeta de imágenes y posteriormente insertarlas.

9. Observa el ejemplo.

10. En Flash elaboraremos un encabezado que incluya los enlaces a Estufas, Lavandería y

Electrodomésticos. Por tanto tenemos que elaborar estas tres páginas.

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.

81

13. En este caso ya en la página anterior creamos nuestro archivo de estilos fuentes.css,

ahora solo lo importamos a esta página. Selecciona el menú Formato- Estilo CSS-

Adjuntar Hoja de estilos.

14. Selecciona la opción de importar y examina tu archivo, si tienes problemas en que lo

reconozca escribe directamente su nombre con extensión.

15. Checa que en tus reglas aparezcan tus estilos.

16. Crea un formato parecido al siguiente apoyándote en páginas de Internet. Crea un

botón(sin vínculo) de Comprar e insértalo en cada producto.

17. Trabajando en este mismo modelo de página lo guardarás como lavanderìa.html y

electrodomésticos.html y realizarás los cambios necesarios.

82

18. Como comentamos al inicio de esta práctica Sitio con Flash puede que cause contratiempos para aquellos ordenadores que no estén actualizados, así que elaboraremos un menú textual en el pie de página.

19. Puedes realizarlo en cualquier página y posteriormente copiar y pegar la tabla en las demás páginas.

20. Inserta en el Pie de página 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 botón HTML crea el vínculo a la página de

línea blanca en destino _Self.

22. Realiza lo mismo para las demás opciones.

23. Ya que terminaste, selecciona tu tabla, cópiala y pégala en las páginas restantes.

83

24. Guarda todo y observa la vista del explorador, checa que los vínculos funcionen

correctamente.

25. Antes de elaborar el encabezado en Flash necesitamos subir este sitio a tu servidor de

hospedaje.

26. Regresa a elaborar la PRÁCTICA 1 INCISO D) antes de pasar al punto 27.

27. CONTINUAMOS con esta práctica.

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 página de tus páginas.

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 moverán. Por ejemplo el logo de tu empresa y su nombre. Colócate en el

primer fotograma y crea un diseño sencillo haciendo

uso de las herramientas Flash. Ocupa solo el

cuadro izquierdo superior del área de trabajo

pues el resto lo ocuparemos en el diseño. Al

terminar posiciónate 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 más y nómbrala botones. Flash tiene

botones incorporados, la versión

sobre la que trabajamos MX es muy

limitada pero si tienes versiones más

avanzadas hay una gran variedad.

Posiciónate en el primer fotograma

de esta capa y ve al menú Ventana-

Bibliotecas comunes-Botones, navega hasta encontrar un botón apropiado

considerando que los colores contrasten con tu sitio. Arrastra el botón cuatro veces (no

lo copies). Posteriormente

84

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

Electrodomésticos.

34. Estos botones son ya símbolos que puedes agregarle acciones, en este caso hay que

indicarle a cada uno que al hacer clic sobre ellos deben abrir una página de Internet. La

sintaxis es la siguiente

on (release) { getURL("http://proyectoswebsara.idomyweb.com/lineablanca/estufas.html"); }

Para colocar el código solo debes hacer clic con el botón derecho en el botón y seleccionar la opción de acciones. Después de capturar el código 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 posiciónate en el fotograma 70 y da clic en F6.

Bloquea la capa con el candado por seguridad.

36. Inserta cuatro capas más : 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 imágenes asociadas a las capas y guárdalas en tu carpeta

de media:

85

38. En la capa de estufa colócate en el fotograma 10 y conviértelo a fotograma clave

usando el botón derecho.

39. Inserta en ese fotograma la imagen de estufa, Archivo-Importar, y ajusta el tamaño.

Coloca la imagen a la derecha del logo. Selecciona la propiedad de Animar-Movimiento.

40. Haz clic en 15 fotogramas después 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 película. Prueba dando Control+Enter.

42. Ahora configuraremos para que una a una las imágenes lleguen y se acomoden una

detrás de otra.

43. Trabaja ahora en la capa de lavadora con los mismos pasos. Colócate en el fotograma

25 y conviértelo a fotograma clave. Importa la imagen y colócala a un lado del logo.

44. Aplícale animación de movimiento, 15 fotogramas después da en F6 y mueve la

imagen a un costado.

86

45. Realiza lo mismo con las dos imágenes 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 más

a tu película.

48. Una vez que terminas hay que guardar los cambios y usar el menú Archivo para

exportar película en la carpeta de media como tipo swf. Es probable que ya exista (se

genera al dar Ctrl+Enter) y debas reemplazarla.

87

49. Listo tienes la película, ahora hay que insertarla en Dreamweaver. Abre tu página de

lineablanca.html. Colòcate en el encabezado y utiliza el menú Insertar-Media-SWF

50. Elige tu archivo SWF del titular. Como estás trabajando en una plantilla que maneja

márgenes no se ajustará totalmente.

51. Esto se debe a los márgenes internos que maneja que deberán ser editados desde el

código.

52. Haz clic en la vista de código, desplázate hacia la parte superior y busca las siguientes

líneas, observa que debes cambiar los márgenes a 0.

88

53. Regresa a la vista de diseño y tu película se ha ajustado exactamente a tu área de

trabajo.

54. Realiza este mismo procedimiento para el retso de las páginas, una a una insértales la

película.

55. Observa la vista en el Navegador, solamente que los vínculos de flash seguramente los

podrás 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

película: estufas, lavadoras, etc.

89

57. Realiza la prueba de oro, abre tu subdominio en la práctica 4 y activa tu sitio de Línea

blanca. Prueba que funcione correctamente.

58. Regresa a la práctica 1 inciso D paso 61 para terminar de enlazar esta práctica con

tu Sitio Principal.

90

PRÁCTICA 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. Créala dentro de pestañas. Posteriormente crea la carpeta de imágenes 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 imágenes relacionadas con viaje (recuerda guardarlas

previamente en tu carpeta de imágenes) , 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 irán algunas

imágenes.

91

6. Guarda 6 imágenes asociadas a destinos de viaje en tu carpeta de imágenes:

Acapulco, España, etc. Insértalas en la tabla.

7. Ahora creamos nuestro archivo de fuentes. Como manejamos fondos blancos en su mayoría crearemos fuentes de color vivo.

8. Recuerda que al crear tu archivo de estilos te pide que guardes, guárdalo en tu carpeta.

92

9. Define tres formatos diferentes uno para los nombres de destinos, otro para describirlos

y uno más grande para el titular. 10. Crea un encabezado sencillo y coloca los textos básicos.

11. Simularemos el menú principal insertando una tabla en el segundo DIV, si es necesario

crea un nuevo estilo CSS.

93

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

13. Al seleccionar el DIV puedes ver su tamaño 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.

Asegúrate que el tamaño de este sea igual al del elemento DIV que insertaste para el

banner.

16. En el banner colocaremos imágenes de las playas de México con alguna promoción.

Necesitamos la imagen con la promoción plasmada. De acuerdo al programa de diseño

que tengas al alcance, sin embargo una manera muy rápida de crearlas es en Power

Point y posteriormente usar la tecla IMPR PANT para convertirlas en imagen

apoyándote de Paint. Crea cuatro promocionales de las playas con su nombre y lo que

se ofrece, considera el tamaño deseado para que no se distorsione la misma.

94

17. Trabajaremos en flash en una sola capa insertando cada imagen en 20 fotogramas,

para insertarles un hipervínculo deberemos convertirlos a botones.

18. Inserta en el primer fotograma la imagen y ajústala al tamaño exacto. Convierte a

símbolo de Botón inmediatamente.

19. 20 fotogramas después da F6

95

20. Puedes aplicarle animación 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 botón derecho.

Inserta la segunda imagen de promoción. Conviértela en símbolo de botón

inmediatamente.

22. Aplícale Color Alfa al 30%.

23. Da F6 20 fotogramas después. Aplica animación de Movimiento y en el último

fotograma reestablece el Color a 100%.

24. Repite el proceso para las siguientes dos imágenes.

25. Tu línea del tiempo debe quedar como sigue:

26. Ahora busca páginas 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 práctica 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 película.

29. Utiliza el menú Archivo y Exporta la película. Guárdala en la carpeta de media de

agencia y regresa a Dreamweaver a Insertarla utilizando el menú de Insertar.

96

30. Puedes observar la vista en vivo

31. Es probable que aj ejecutarlo Flash no te deje abrir los vínculos, pero después de

publicarla en Idomy no habrá problemas.

32. Ahora elaboraremos el promocional.

33. Recuerda establecer el tamaño de acuerdo al DIV de la página.

34. Dibujaremos a una persona que batalla por no saber nadar y le ofreceremos una

página de clases de natación.

97

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 botón parpadeante que diga Clic

Clic, el cual deberá llevar el URL del sitio de clases de natación.

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 botón de la Biblioteca

39. La tercera capa es un clic que parpadea. Inserta en el fotograma inicial el texto Clic.

40. Tu línea del tiempo es algo así hasta el momento:

41. En la capa de Clic utiliza la opción de Borrar Fotogramas que puedes activar con el

Botón 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, guárdala y edítala rápidamente en Phothoshop para crearla

transparente.

98

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

44. Dando F6 cada 20 fotogramas simula un pequeño movimiento de las manos

45. Puedes agregar una capa más con un pez paseando por el mar.

46. Finalmente agrega el URL al botón.

47. Exporta tu película y agrégala en la página de agencia.html.

99

48. Realiza las pruebas necesarias. Terminaste una práctica más!!!.

49. REGRESA A ELABORAR EL INCISO E) DE LA PRÁCTICA 1.