pag web

1. 1
JULIO 2013. SMTS

2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12
http://infografiasmarketing.wordpress.com/2012/05/06/12-elementos-criticos-que-debe-tener-
toda-pagina-web/

13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.