LIBRO - Sem3 - Elab Pag Web 2011

1
2

COLEGIO DE ESTUDIOS CIENTFICOS Y TECNOLGICOS
DEL ESTADO DE SONORA

Mdulo de aprendizaje

ELABORACIN DE PGINAS WEB

Hermosillo, Sonora; Agosto de 2010.

COLEGIO DE ESTUDIOS CIENTFICOS Y
TECNOLGICOS DEL ESTADO DE SONORA

Direccin Acadmica
Subdireccin de Desarrollo Acadmico
Departamento de Desarrollo Curricular
Calle La Escondida #34, Col. Santa Fe,
Hermosillo, Sonora, Mxico. CP. 83249

Elaboracin de Pginas Web
Mdulo de aprendizaje
Tercer Semestre

Elaboradores
Mary Silvia Len Soto
Lizbeth Corral Garca

Supervisin acadmica
Mara Asuncin Santana Rojas
Jess Enrique Crdova Bustamante
Cora Aguilar Partida

Edicin y diseo
Elisa Sofa Valdez Alcorn

Coordinacin tcnica
Sandra Elivia Becerril Lpez

Coordinacin general
Jos Carlos Aguirre Rosas

Copyright , 2010 por Colegio de Estudios
Cientficos y Tecnolgicos del Estado de Sonora
Todos los derechos reservados
Primera edicin 2010. Impreso en Mxico
Registro ISBN:

4

5

6

Directorio

MTRO. Martn Alejandro Lpez Garca
Director General

M.C. Jos Carlos Aguirre Rosas
Director Acadmico

ING. Jos Francisco Arriaga Moreno
Director Administrativo

L.A.E. Martn Francisco Quintanar Lujn
Director de Finanzas

LIC. Alfredo Ortega Lpez
Director de Planeacin

LIC. Gerardo Gaytn Fox
Director de Vinculacin

L.A. Mario Alberto Corona Urquijo
Director del rgano de Control

7

Nombre _____________________________________________

Plantel _______________________________________________

Grupo ______ Turno _________ Telfono __________________

Correo Electrnico _____________________________________

Domicilio _____________________________________________
Datos del alumno

Ubicacin Curricular

Componente:
Formacin Profesional

Campo de Conocimiento:
Informtica

Crditos:
10

Horas:
5 HSM

Asignatura Antecedente:
Modulo I

Asignatura Consecuente:
Modulo III

8

ESTRUCTURA GENERAL DEL SUBMDULO III:

ELABORACION DE PGINAS WEB

Elaborar
pginas web
Elementos
fundamentales
de diseo
Software de
Aplicacin
Dreamweaver
Lenguaje HTML
Teoras de
diseo
Teoras del color
Contenidos de
una pgina web
Etiquetas en una
pgina web
Publicar en
servidores de
internet
Entorno de la
aplicacin
Insertar
Componentes
Elementos
multimedia
Conceptos de
publicacin
Almacenar
pginas web en
un servidor
Formatos de
diseo

9

10

NDICE

Presentacin. 12
Recomendaciones para el alumno 13
Competencias 15

Unidad 1. Utilizar los elementos fundamentales de diseo.
Evaluacin diagnstica 18
1.1. Las teoras del diseo.
1.1.1. Importancia del diseo y su impacto 23
1.1.2. Origen y enfoque del diseo. 25
1.1.3. Teoras del diseo: minimalismo, conceptualismo.... 31
1.2. Formatos de diseo.
1.2.1. Zonas ureas... 40
1.2.2. Direccin.. 40
1.2.3. Sentido . 42
1.2.4. Equilibrio 42
1.3. Teora del color.
1.3.1. Circulo cromtico. 51
1.3.2. Contrastes. 53
1.3.3. Colores RGB (Red, Green y Blue) y CMY (Cian, Magenta y Yellow) 57
Autoevaluacin. 63
Instrumentos de evaluacin 65
Unidad 2. Manejar los elementos bsicos de un lenguaje usado en la creacin
de una pgina Web.

Evaluacin Diagnstica... 76
2.1. Identificar los contenidos de una pgina Web
2.1.1. Conceptos bsicos.. 78
2.1.2. Objetivo y clasificacin de una pgina Web 80
2.1.3. Estructura de una pgina Web ....... 82
2.2. Utilizar las etiquetas en una pgina Web
11

2.2.1. Sintaxis de etiquetas ...... 86
2.2.2. Etiquetas primarias ..... 87
2.2.3. Etiquetas de hipervnculo ... 90
2.2.4. Manipular formularios en una pgina Web..... 94
2.2.5. Insertar y editar tablas en una pgina Web. 99
2.2.6. Manipular imgenes y animaciones en una pgina Web. 101
2.2.7. Insertar sonido y video en una pgina Web 103
2.2.8. Implementar servicios de correo en una pgina Web... 106
Autoevaluacin... 110
Instrumentos de evaluacin.. 112
Unidad 3. Disear pginas Web con un software de aplicacin.

Evaluacin Diagnstica. 117
3.1. Entorno de la aplicacin de Dreamweaver.
3.1.1. Ventana de inicio del software .
3.1.2. Componentes de la ventana de desarrollo.
3.1.3. Vistas del entorno de Dreamweaver..............
3.2. Insertar componentes a una pgina Web en Dreamweaver
3.2.1. Formato de texto y prrafos......
3.2.2. Establecer vnculos dentro de la pgina Web, entre pginas y
servidores..
3.2.3. Insertar imgenes dentro de una pgina Web...
3.2.4. Insertar y editar tablas en una pgina Web....
3.2.5. Manipular macros....
3.3. Utilizar elementos multimedia a una pgina Web.
3.3.1. Agregar archivos de audio..
3.3.2. Archivos de video.
3.3.3. Insertar animaciones flash.....
Material Recortable.

Autoevaluacin..
Instrumentos de evaluacin.

121
126
135

140

144

149
154

161

165
168

171
177
180
182
12

Unidad 4. Publicar pginas Web en servidores de Internet.

4.1. Define los conceptos bsicos de publicacin
4.1.1. Concepto de servidor local, servidor remoto y publicar.. 191
4.1.2 Identificar los servidores de Internet disponibles para el alojamiento de
pginas Web..

194
4.2. Almacenar pginas de web en un servidor.
4.2.1. Verificacin de dominios.. 194
4.2.2. Publicar una pgina en un servidor dedicado.. 195
4.2.3. Publicar una pgina en un servidor gratuito.. 196
Instrumentos de evaluacin... 203
Material recortable .............................................................. 205
Claves de respuesta.. 209
Glosario 210
Referencias.. 212

13

PRESENTACIN
El Colegio de Estudios Cientficos y Tecnolgicos del Estado de Sonora, comprometido
con la calidad educativa, ha implementado acciones que apoyan tu desarrollo acadmico,
por lo cual incluye en su plan de estudios el Submdulo III: Elaboracin de Pginas Web
del Mdulo II: Creacin de Productos Multimedia a travs de Software de diseo, del
tercer semestre de la Especialidad de Informtica; el cual cumple con un objetivo integral
en su formacin como estudiantes de CECyTES, ya que la computadora en la actualidad
se ha convertido en una herramienta fundamental en cualquier actividad y el manejo de
Internet proyecta publicacin de cualquier empresa por lo que el diseo de pgina Web
ayuda a todo tcnico en informtica.
Por tal motivo CECyTES procura con el presente Mdulo de aprendizaje, ayudarte a
obtener los conocimientos sobre la creacin y diseo de productos multimedia para la
elaboracin de pginas Web.
El presente material se conforma de cuatro unidades, en la primera unidad la cual tiene
como ttulo Utilizar los elementos fundamentales de diseo conocers los conceptos
bsicos de diseo, la segunda unidad, manejar los elementos bsicos de un lenguaje
usado en la creacin de pginas web (HTML), en la cual podrs desarrollar pginas Web
utilizando las etiquetas de un lenguaje de diseo, en la tercera unidad disear pginas
web con un software de aplicacin, aqu elaboraras pginas por medio de Dreamweaver,
y en la cuarta unidad publicar pginas Web en servidores de Internet , las pginas Web
elaboradas las subirs en lnea.
As que, como te puedes dar cuenta, tenemos mucho que aprender de este mdulo, y lo
ms importante es que puedas utilizar todo lo que aprendas aqu para ayudarte a realizar
tus tareas y actividades de sta y otras asignaturas que cursas o para poder resolver
situaciones en tu vida cotidiana. Te deseamos mucho xito en tu aprendizaje.

UNIDAD I. Utilizar los elementos fundamentales de diseo.
UNIDAD II. Manejar los elementos bsicos de un lenguaje usado en la creacin de
pginas Web.
UNIDAD III. Disear pginas Web con un software de aplicacin
UNIDAD IV. Publicar pginas Web en servidores de Internet.

En el contenido de estas unidades, se relaciona la teora con la prctica, a travs de
lecturas y ejercicios, encaminados a apoyarte en el desarrollo de las competencias
requeridas para los alumnos que cursan esta asignatura.
Seguros de que hars de este material, una herramienta de aprendizaje, te invitamos a
realizar siempre tu mayor esfuerzo y dedicacin para que logres adquirir las bases
necesarias, para tu xito acadmico.
14

RECOMENDACIONES PARA EL ALUMNO

El presente mdulo de aprendizaje, representa un importante esfuerzo que el Colegio de
Estudios Cientficos y Tecnolgicos del Estado de Sonora, ha realizado, para brindarte los
contenidos que se abordarn en el Submdulo de Elaboracin de Pginas Web.
Los contenidos del presente Submdulo, sern abordados a travs de diversos textos,
ejercicios, evaluaciones, entre otras actividades. Cabe mencionar, que algunas de las
actividades propuestas las debers realizar de manera individual mientras que en algunas
otras, colaborars con otros compaeros formando equipos de trabajo bajo la gua de tu
profesor.
Para lograr un ptimo uso de este mdulo de aprendizaje, debers:
Considerarlo como el texto rector de la asignatura, que requiere sin embargo, ser
enriquecido consultando otras fuentes de informacin.
Consultar los contenidos, antes de abordarlos en clase, de tal manera que tengas
conocimientos previos de lo que se estudiar.
Participar y llevar a cabo cada una de las actividades y ejercicios de aprendizaje,
propuestos.
Es muy importante que cada una de las ideas propuestas en los equipos de
trabajo, sean respetadas, para enriquecer las aportaciones y lograr aprendizajes
significativos.
Considerarlo como un documento que presenta informacin relevante en el rea
de la Informtica, a ser utilizado incluso despus de concluir esta asignatura.
Identificar las imgenes que te encontrars en los textos que maneja el mdulo de
aprendizaje, mismas que tienen un significado particular:

15

Simbologa

Esperando que este material de apoyo sea de gran utilidad en tu proceso de aprendizaje,
y as mismo despierte el inters por conocer y aprender ms sobre esta ciencia, te
deseamos el mejor de los xitos.

Evaluacin diagnstica que cada estudiante debe responder al inicio de
cada unidad para saber el grado de conocimiento.

Ejercicio que se elabora en equipo.

Practica de laboratorio de cmputo.

Ejercicio que se elaborar de manera individual.

Ejemplo del tema tratado en clase.

Tarea que se realizar en casa, relacionada con el tema visto en clase.

Tarea de investigacin.

Material recortable, que se utiliza para resolver algunas de las tareas a
resolver en casa.

Ejercicios que se elaboran para aplicar lo aprendido en casos de la vida
cotidiana.

Examen de autoevaluacin que se resolver al final de cada unidad.

Aprendizajes a lograr al inicio de cada subtema.
16

COMPETENCIA DE LA ASIGNATURA

COMPETENCIAS

Genricas

Disciplinarias

Identifica, ordena e interpreta las ideas, datos y conceptos explcitos e implcitos en un
texto, considerando el contexto en el que se gener y en el que se recibe.
Plantea supuestos sobre los fenmenos de su entorno, con base en la consulta de
diversas fuentes.
Valora la funcin de las expresiones artsticas y de los medios de comunicacin, en la
recreacin y transformacin de la cultura
Valora la relevancia del pensamiento y del lenguaje como herramientas para comunicarse
en diversos contextos.
Analiza aspectos elementales sobre el origen, desarrollo y diversidad de los sistemas y
medios de comunicacin.
Utiliza las tecnologas de la informacin y comunicacin para producir diversos materiales
de estudio e incrementar sus posibilidades de formacin.

Se conoce y valora a s mismo y aborda problemas y retos teniendo en cuenta los
objetivos que persigue
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la
utilizacin de medios, cdigos y herramientas apropiadas.
Contribuye al desarrollo sustentable de manera crtica en acciones responsables.
Desarrolla innovaciones y propone soluciones a problemas a partir de mtodos
establecidos.
Sustenta una postura personal sobre temas de inters y relevancia general,
considerando otros puntos de vista de manera crtica y reflexiva.
Aprende por iniciativa e inters propio a lo largo de la vida.
Participa y colabora de manera efectiva en equipos diversos.
Mantiene una actitud respetuosa hacia la interculturalidad y la diversidad de creencias,
valores, ideas y prcticas sociales.
Al trmino del curso, el estudiante ser capaz de crear Pginas Web empleando
software de diseo y un lenguaje de programacin en el diseo de pginas,
considerando los elementos fundamentales de diseo.
17

Unidad I
Utilizar los elementos
fundamentales de
diseo

18

COMPETENCIAS DE LA UNIDAD

El alumno:
En la utilizacin de los elementos fundamentales de diseo, el alumno ser capaz de aplicar las teoras de diseo,
los formatos de diseo y las teoras del color, mediante los siguientes logros:
Describe la importancia del diseo y su impacto.
Describe el origen y enfoque del diseo.
Describe los elementos y caractersticas de las teoras del diseo: minimalismo y conceptualismo.
Identifica los elementos de las zonas ureas.
Identifica los conceptos de direccin, sentido y equilibrio en las teoras del color.
Aplica las teoras del color considerando las caractersticas del crculo cromtico y los contrastes en el
diseo.
Aplica las combinaciones y configuraciones de los colores RGB, CMY.

TEMARIO
1.1. Las teoras del diseo.
1.1.1. Importancia del diseo y su impacto.
1.1.2. Origen y enfoque del diseo.
1.1.3. Teoras del diseo: minimalismo, conceptualismo.
1.2. Formatos de diseo.
1.2.1. Zonas ureas.
1.2.2. Direccin.
1.2.3. Sentido.
1.2.4. Equilibrio.
1.3. Teora del color.
1.3.1. Circulo cromtico.
1.3.2. Contrastes.
1.3.3. Colores RGB (Red, Green y Blue) y CMY (Cian, Magenta y Yellow).
19

( ) 1. Es la imagen que utiliza una empresa para dar a conocer su producto o servicio:
a) Plano b) Croquis c) Logotipo d) Imagen e) Fotografa

( ) 2. Es la accin de programar, proyectar y realizar comunicaciones visuales.
a) Diseo
grfico
b) Dibujar c) Pintar d) Elaborar
croquis
e) Graficar

( ) 3. Movimiento artstico que se centro en las formas geomtricas como el tringulo,
cuadrado, cruz.
a) Dadaismo b) Futurismo c) Cubismo d) Suprematismo e) Constructivismo

( ) 4. En una pgina Web, esta es una caracterstica que impacta como parte de la
interfaz, por ello se debe de tomar en cuenta al realizarla y hacer una buena
combinacin de ello.
a) Texto b) Tamao c) Tipografa d) Color e) Imagen

( ) 5. Es una tendencia que surge en Nueva York caracterizada por mostrar las formas de
forma muy simple.
a) Minimalismo b) Cubismo c) Futurismo d) Simplismo e) Dadaismo

( ) 6. Tcnica visual que consiste en ensamblar elementos diversos en un todo unificado.
a) Dibujo b) Fotograma c) Escultura d) Pintura e) Collage

( ) 7. Es un formato en el diseo que se refiere ha realizar una divisin de lneas
horizontales y verticales a una imagen que se quiere proyectar.
a) Direccin b) Sentido c) Equilibrio d) Zona urea e) Circulo
cromtico

( ) 8. Son los colores que representan a la teora del color CMY.
a) Cian,
Magenta,
Yellow
b) Caf,
morando,
yellow
c) Yellow,
marrn, caf
d) Cielo,
Magenta,
yellow
e) Caf,
marrn,
yellow

( ) 9. Es una de las propiedades del color EXCEPTO:
a) Tono b) Cantidad c) Luminosidad d) Saturacin e) Brillo

( ) 10. Es el nmero de colores que forman el nmero cromtico, representando a los
colores primarios, secundarios y terciarios.
a) 3 b) 10 c) 9 d) 6 e) 12
Evaluacin diagnstica
La siguiente evaluacin tiene como objetivo conocer lo que
sabes acerca de los temas a revisar en la unidad. Lee
cuidadosamente cada una de las siguientes cuestiones y escribe en
el parntesis de la izquierda las letras de la respuesta correcta. En la
pgina 209 se encuentran las respuestas correctas.

20

Secuencia didctica 1
1.1. LAS TEORAS DEL DISEO.
1.1.1. Importancia del diseo y su impacto.
1.1.2. Origen y enfoque del diseo.
1.1.3. Teoras del diseo: minimalismo, conceptualismo.

Conocimientos previos: A continuacin se te presentan una serie de
preguntas contstalas lo ms ampliamente, comenta tus respuestas ante
el grupo para compartir sus conocimientos previos bajo lluvia de ideas
dirigidas por el docente.
Individual Ejercicio no. 1

Sesin
1

1. Qu es el diseo?

Contesta las siguientes actividades
Describe la importancia del diseo y su impacto.
Describe el origen y enfoque del diseo.
Describe los elementos y caractersticas de las teoras del diseo:
minimalismo y conceptualismo.
Acta con responsabilidad en el cumplimiento de las actividades.

Aprendizajes a lograr

21

En equipo de tres personas, elabora un collage en el que se
ilustre diversos diseos de logotipos (al menos 10) de los
productos que conoces. Para realizar este ejercicio, debers traer
revistas, tijeras, pegamento, marcadores, una cartulina o papel
bond. Se te calificar con la lista de cotejo de la pgina __ del
mdulo de aprendizaje.

Grupo Ejercicio no. 2

2. En donde se aplica el diseo?

3. Qu es un logotipo?

4. Menciona al menos 10 empresas que conozcas e
identifiques su logotipo

22

1. Es la accin de concebir, programar, proyectar y realizar comunicaciones visuales,
destinadas a transmitir mensajes a grupos sociales determinados.
a) Diseo
industrial
b) Diseo
grfico
c) Conceptualismo d) Grafas e) Simbolismo

2. Julin se encuentra plasmando mediante dibujos un posible logotipo de una empresa que
pidi inventaran el maestro de administracin a esta accin se le llama:
a) Plasmar

b) organizar

c) Esquematizar d) Disear e) Dibujar

3. Smbolo que utiliza normalmente una empresa o marca para que la identifiquen con ms
facilidad.
a) Dibujo

b) Imagen

c) Logotipo d) Esquema e) Croquis

Has visto como en los centros comerciales cada uno de los productos estn
identificados por dibujos decolores que lo diferencian del resto de los productos,
el mismo centro comercial es identificado por un nombre que lo representa y por
un logotipo (diseo grfico que es utilizado como una continuacin del smbolo
por una compaa, organizacin o marca, y es a menudo, la forma de una
adaptacin del nombre de la compaa o de la marca, o es utilizado conjuntamente con el
nombre).
Toda compaa que ofrezca productos o servicios
necesita identificarse ante los posibles consumidores
para ello es necesario disearse acorde a su nombre de
empresa y giro que lo representa, en general el diseo
se aplica en todos los mbitos y se encuentra por todas
partes es decir: en publicidad, revistas, anuncios, libros, en la red (internet
en pginas web), inclusive en los productos que utilizamos en nuestros
hogares, ropa y los alimentos que consumimos estn llenos de diseo.

A continuacin se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.


Sesin
2

23

El diseo se podra dividir en tres grupos principales:
La edicin, diseo de todo tipo de libros, peridicos, y revistas.
La publicidad, diseo de carteles publicitarios, anuncios, folletos.
La identidad, diseo de una imagen corporativa de una empresa.

En cada diseo grfico debe considerarse algunos aspectos bsicos de comunicacin: un
mtodo para disear, un objetivo que comunicar y un campo visual. Ello es necesario tener en
cuenta para hacer una buena proyeccin del diseo creado.

EJEMPLO
Hay muchas empresas que son reconocidas por sus
logotipos estos han sido diseados para atrapar la
atencin de sus clientes potenciales entre ellos
encontramos: coca-cola, sabritas, gamesa, quienes
en su diseo hacen notar la gama de colores y su
estilo muy particular.
Elabora de un mapa conceptual donde represente los trminos de
diseo, diseo grfico, grafismo, elementos del diseo, conceptos
relacionados al diseo. Podrs consultar la siguiente liga:
http://www.articulosinformativos.com.mx/Diseno_Grafico-
a1073108.html
Se te calificar con la lista de cotejo de la pgina __ del mdulo de
aprendizaje.


24

1. Es cualquier elemento o cosa llamado arte creado o modificado a travs de una computadora
o un programa.
a) Croquis

b) Imagen

c) Esquema d) Logotipo e) Grafismo
2. Conjuntos de elementos relacionados mediante proximidad, semejanza, continuidad o
simetras.
a) Contornos

b) Agrupaciones

c) Tamaos d) Contrastes e) Equilibrios
3. Es un creador de comunicaciones, es el profesionista que mediante un diseo construye
mensajes con medios visuales.
a) Diseador
grfico

b) Pintor

c) Dibujante d) Arquitecto e) Ingeniero
Industrial

La importancia del diseo

Has visitado pginas web, algn sitio de empresas o instituciones, te has
dado cuenta de que siempre est organizada dependiendo de lo que
quieren proyectar. Todo sitio cuenta con un ndex, donde indican los
principales temas que contienen, tambin est representado por los
colores de la institucin o siempre tratan de buscar una combinacin de los
colores de su logotipo.
Se dice que el diseo de una pgina Web tiene la esencial misin de
vincular al usuario con el vasto mundo informativo, de un modo agradable y eficiente, este se
debe de poder mover en el sitio sin dificultad.
Cuando un diseador est elaborando un trabajo de diseo ya sea un logotipo, un cartel, un
volante, una pgina web va a depender de algunos criterios del perfil profesional bajo los
criterios de: habilidades personales, mbito profesional y aspecto tecnolgico.
Entre los criterios de las habilidades personales se encuentran: poder de anlisis y sntesis,
flexibilidad mental, claridad de juicio, sensibilidad visual, conocimiento tcnico, destreza manual,
actualizacin permanente y aplicacin de los Procesos Psicolgicos Superiores (PPS). Por lo
que la importancia del diseo radica en una buena inspiracin por parte del diseador.


Sesin
3

25

SITIO WEB IMAGEN COLORES ESTILOS
LETRAS
INFORMACION
CECyTES

Bimbo

Gamesa

Sabritas

Visita 5 sitios web e indica algunas caractersticas que encuentres
entre ellos, el color de su sitio, color del fondo, relacin que tienen
estos colores con su logotipo, tamao y estilo de la letra que
maneja, la cantidad de informacin que maneja.
Se te calificar con la lista de cotejo de la pgina __ del mdulo de
aprendizaje.


26

ITSON

1. En una pgina web al momento de disearla, las empresas consideran en su diseo algunas
caractersticas basadas en el logotipo de sus productos, esta caractersticas est basada en:
a) Color

b) Estilo

c) Letra d) tamao e) textura
2. Todo sitio web debe tener una pgina principal con la informacin principal constituida por
medio de una botonera de opciones a esta pgina se le conoce como:
a) Pgina1

b) First

c) Index d) Inicio e) Primera
3. La importancia del diseo grfico que se est elaborando depender en gran parte del:
a) Dibujante b) Diseador

c) Empresario d) Cliente e) Publicista

Origen del diseo
El diseo no es nuevo se tiene toda una historia, se cuenta con una serie de personalidades que
se dedicaron a dar a conocer el diseo como todo un arte visual de
comunicacin, aunque se considera que la profesin del diseador grfico es
reciente en lo que se refiere a su preparacin, su actividad y sus objetivos,
pero podemos nombrar, aqu te nombro algunas de ellas que se consideran
antecedentes: la historia de la tipografa (arte y tcnica del manejo y
seleccin de tipo tipo de letras- originalmente de plomo para crear trabajos
de impresin), est vinculada con el diseo grfico describindose la
tipografa de la columna , las miniaturas medievales, la imprenta de Johannes
Gutenberg, la evolucin de la industria del libro, los afiches parisinos, el
movimiento de artes y oficios, William Morris, adems de estos tambin encontramos a las
diferentes vanguardias del diseo y el arte generaron dramticos cambios en el diseo grfico.


Sesin
4

27

Entre las principales vanguardias se encuentran:
dadasmo, suprematismo, cubismo, constructivismo,
futurismo.

Antecedentes del diseo grfico

EJEMPLO
En el siguiente cuadro realiza un resumen indicando los
antecedentes del diseo grfico considerando los principales
acontecimientos de las escuelas del diseo desde Jan Tschichold
hasta la actualidad, para realizarlo consulta en wikipedia el tema
de diseo grfico. Se utilizar la lista de cotejo del final de la
unidad.


Completa el siguiente crucigrama que integra los conceptos de las
diversas vanguardias que perfilaron grandes cambios en el diseo
grfico.


28

Vertical Horizontal
1.- Movimiento artstico ruso que incorporo al arte
la esttica funcional, tecnolgica y materiales
industriales.
______________________________

3.- Movimiento que surge en Francia, que se
caracterizo por el uso de formas geomtricas y la
superposicin de diferentes planos de las figuras
entre los principales representantes estn
Picasso.
__________________________
2.- Movimiento artstico que se centro en las
formas geomtricas fundamentales como el
tringulo, el cuadrado, cruz y crculo.
_____________________________

4.- Este movimiento surge en Italia que utilizaba
la velocidad y el maquinismo como smbolos de
la sociedad industrial.
____________________________

5.- Este movimiento surge en Zurich, Suiza que
rechazaba los valores tradicionales,
reivindicando el azar y el irracionalismo.
_____________________________

1
2
4
3
5
29

1. Plasm los principios de la tipografa moderna en su libro de 1928, aunque ms tarde la
califico de fascista (del rgimen poltico que promulgaba un gobierno autoritario).
a) William
Morris

b) Jan
Tschichold

c) Herbert Bayer d) Lszl
Moholy-Nagy
e) El Lissitzky
2. Dirigi el taller de tipografa y publicidad creando las condiciones del diseador grfico y
agrego la asignatura de publicidad en el programa de enseanza.
a) Jan
Tschichold

b) Willam Morris

c) Lszl
Moholy-Magy
d) El Lissitzky

e) Herbert
Bayer
3. Movimiento artstico que se centro en las formas geomtricas fundamentales como el trigulo, el
cuadrado, cruz y crculo.
a) Dadaismo b) Constructivismo

c) Futurismo d) Suprematismo e) Cubismo
4. Este movimiento surge en Italia que utilizaba la velocidad y el maquinismo como smbolos de la
sociedad industrial.
a) Dadaismo b) Constructivismo c) Futurismo d) Suprematismo e) Cubismo



30

Enfoque del diseo

El diseo hoy en la actualidad est ocupando gran parte de
la atencin del individuo, como ya comentamos el diseo
grfico es una representacin de comunicacin visual y se
considera que se enfoca en cuatro reas principalmente:
diseo para informacin, para persuasin, educacin y
administracin.
De la manera que se muestre la informacin, un logotipo,
una pgina web, llamara ms la atencin de las personas
es por ello que se debe considerar algunos aspectos como
el color, la tipografa, tamao.

As tambin es necesario considerar cuatro principios rectores del diseo grfico que se deben
de tomar en cuenta a la hora de elaborar un proyecto y son:
El hombre: concebido como unidad tica y esttica que integra la sociedad de la cual
forma parte y para quien el espacio visual es uniforme, continuo y ligado.
La utilidad: porque responde a una necesidad de informacin y sta es comunicacin.
El ambiente: porque nos exige el conocimiento de la realidad fsica para contribuir a la
armona del hbitat, y la realidad de otros contextos para entender la estructura y el
significado del ambiente humano.
La economa: porque engloba todos los aspectos relacionado con el estudio del costo y la
racionalizacin de los procesos y materiales para la ejecucin de los elementos.

Sesin
5

31

reas
del
Diseo
Grfico
Para informacin
Para administracin
Completa el siguiente cuadro sinptico donde se indique la
clasificacin de las reas del diseo grfico.
Se te calificar con la lista de cotejo que se encuentra al final de la
unidad.


32

1. Jos Ral est preparando un volante donde representa un logotipo para la publicidad de un
producto nuevo a que rea del diseo grfico se est enfocando.
a) Mercadeo

b) Persuasin

c) Administracin d) Educacin e) Informacin
2. Mara trabaja en una fabrica le asignaron realizar sealamientos para abordar la seguridad
industrial de acuerdo al manejo del espacio del trabajo, a que rea del diseo se enfoca:
a) Persuasin

b) Administracin

c) Informacin d) Educacin e) Mercadeo
3. Juan Francisco est elaborando un material didctico del tema elaboracin de pginas
web con un instructivo de cmo realizar tu sitio web, indica que rea del diseo grfico
est representando.
a) Persuasin b) Mercadeo

c) Administracin d) Informacin e) Educacin
4. Patricia es una escritora su editorial le est preparando la portada que representara su
libro, que rea del diseo grfico se enfocara en este trabajo.

c) Administracin d) Informacin e) Educacin

Teoras del diseo
Minimalismo
Para disear es necesario conocer algunas teoras que ayuda al diseador a plasmar la idea
central de lo que quiere comunicar aumentando la calidad de los diseos, entre estas teoras que
han dado un realce a los diseos encontramos al minimalismo que es una tendencia de la
arquitectura caracterizada por la extrema simplicidad de sus formas que surgi en Nueva York a
finales de los aos sesenta y est representada por Donald Judd, Sol LeWitt, Carl Andre, Dan
Flavin y Robert Morris. Se dice que esta teora est basada en la tendencia
constructivista que ya describiste.
Al estudiar los antecedentes del diseo encontramos que algunos
diseadores se basaron en la direccin de la Escuela de Arte y Diseo de la
Bauhaus, uno de ellos es Van Der Rohe que materializo sus primeras ideas
respecto a la pureza de formas y uso de conceptos artsticos as que
podemos decir que el diseo es todo un arte,
Sesin
6



33

Por ello vamos a analizar la teora del minimalismo, como sus principales caractersticas
encontramos que utiliza colores puros, le asigna importancia al todo sobre las partes, utiliza
formas simples y geomtricas.

A continuacin se te presentan una serie de imgenes de los
principales representantes del minimalismo, anota en el recuadro
que se encuentra debajo de cada una de ellas el nombre del
creador de cada obra de arte.
Donald Judd, Sol LeWitt, Carl Andre, Dan Flavin y Robert Morris.
unidad.


34

1. Tendencia que surge en Nueva York se caracteriza por la simplicidad de las formas.
a) Conceptualismo

b) Simplismo

c) Minimalismo d) Cubismo e) Futurismo
2. Se considera uno de los representantes de la teora del minimalismo, EXCEPTO:
a) Sol LeWitt

b) Carl Andre

c) Robert Morris d) El Lissitzky e) Dan Flavin
3. Entre las principales caractersticas de esta teora se encuentra el uso de colores puros,
formas simples y geomtricas.
a) Minimalismo b) Cubismo

c) Conceptualismo d) Futurismo e) Simplismo

Conceptualismo:
As como analizamos la teora Minimalista el diseo grfico est
involucrado en otras teoras que han hecho de los diseadores unos
buenos comunicadores visuales encontrando al Conceptualismo como una
de ellas. Esta teora describe que existen ideas o conceptos en la mente
implicando ms que meras palabras, adems mantiene que aunque los
universales (abstracciones o ideas abstractas) no tienen existencia en el
mundo externo, pero son producto de la mente.
Sesin
7

En equipo de tres personas, elabora un prototipo de las obras de
arte de los representantes del minimalismo. Se te calificar con la
lista de cotejo que se encuentra al final de la unidad del mdulo de
aprendizaje. Para realizar este ejercicio, debers conseguir
material que puedas utilizar como popotes, cartn, cartulina,
colores segn la obra que quieras representar, lo debers
presentar ante el grupo explicando cmo lo elaboraste y porque
seleccionaste este modelo




35

Como parte del conceptualismo encontramos al arte conceptual conocido como idea art,
identificando que las ideas en un obra son el elemento ms importante dejando al objeto como
segundo trmino. Marcel Duchamp es uno de los principales artistas que representan esta
tendencia llamando a sus trabajos como ready- mades o arte encontrado como otros ejemplos
encontramos escultura de materia prima, arte basura .

Djame contarte que Marcel Duchamp tomo del collage
(tcnica artstica que ensambla elementos diversos en un
todo unificado) los principios para desarrollar el objeto
encontrado. Es decir un objeto encontrado es una
representacin de un collage.

En el recuadro que se te presenta a continuacin elabora un
collage con las obras de los diversos representantes del arte
conceptual como son: Marcel Duchamp, Robert Rauschenberg,
Jasper Johns y Yves Klein para reconocer el conceptualismo como
tendencia dentro de las teoras del diseo grfico utiliza los
recortables que aparecen al final de la unidad. Se te calificar con
la lista de cotejo del final de la unidad.


EJEMPLO
36

1. Teora que mantiene que los universales (ideas abstractas) no tienen existencia en el mundo
externo, existen como ideas en la mente donde implican ms que meras palabras.
a) Cubismo b) Conceptualismo

c) Dadasmo d) Futurismo e) Minimalismo
2. Es uno de los precursores del arte conceptual basando a su obra como arte encontrado.
a) Yves Klein

b) Jasper
Johns

c) Andr Breton d) Marcel
Duchamp
e) Pablo
Picasso
3. Tcnica visual que consiste en ensamblar elementos diversos en un todo unificado.
a) Collage b) Dibujo c) Fotomontaje d) Escultura e) Pintura

Es importante que todo diseador grfico tome en cuenta antes los conceptos de las teoras del
diseo as como la importancia que tiene el diseo y el impacto que representa hoy en la
actualidad, de la misma manera debe conocer los orgenes y el enfoque que se le da al diseo.
Hoy en la actualidad la sociedad bombardeada de las nuevas tecnologas de
la informacin, nos encontramos en un mundo globalizado por lo que se da
margen a un espacio social llamado ciberespacio destacando como
finalidades de ello el acceso al conocimiento y a la
educacin.
Como ejemplo primordial del ciberespacio se
encuentran los medios visuales por versiones
electrnicas, para ello es necesario conocer las formas de dar a mostrar
e interactuar la informacin, hay por lo tanto que saber disear.
Sesin
8


Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.

37

1. El cubismo, futurismo, conceptualismo, dadasmo entre otros forman parte de __________
del diseo.
a) Antecedentes b) Importancia

c) Teoras d) Enfoque

e) Impacto
2. El diseo grfico es considerado un arte por lo que todo diseador debe contar con ciertas
habilidades personales tales como:
a) Autoestima
y creatividad

b) poder de
anlisis y sntesis

c) Presencia y
liquidez
d) Entusiasmo
y persuasin
e) Imaginacin y
Autoestima
3. Estas son algunas teoras del diseo que repercuten en los orgenes y han establecido
criterios para ser utilizados por un diseador grfico.
a) Cubismo,
Dadasmo

b) Futurismo,
Minimalismo
c) Minimalismo,
Conceptualismo
d) Dadasmo,
Futurismo
e) Conceptualismo,
Cubismo



Elabora un ensayo donde representes la importancia del diseo y
su impacto con relacin al su origen y enfoque basados en las
teoras del diseo.
Captura tu ensayo en el procesador de textos, tomando en cuenta
que como extensin mnima dos cuartillas, entrega el ensayo
impreso. Comenta con tus compaeros tus conclusiones
personales. Se te calificar con la lista de cotejo que se encuentra
al final de la unidad del modulo de aprendizaje.

Individual
Ejercicio no. 18

Sesin
9
Contesta las siguientes actividades
38

1.2. FORMATOS DE DISEO.
1.2.1. Zonas ureas
1.2.2. Direccin
1.2.3. Sentido
1.2.4. Equilibrio

Identifica las reglas de las zonas ureas.
Identifica los conceptos de direccin, sentido y equilibrio en las
teoras del color.



39

1 Qu es un formato?

2 A qu se refiere Direccin dentro del diseo grfico?

3 Qu son las Zonas ureas?
ilustre diversas fotografas (al menos 10) de artistas, paisajes,
anuncios publicitarios entre otros. Para realizar este ejercicio,
debers traer revistas, tijeras, pegamento, marcadores, una
cartulina o papel bond. Se te calificar con la lista de cotejo que se
encuentra al final de la unidad del mdulo de aprendizaje.


40

1. Cuando se pretende proyectar una fotografa o paisaje se toman en cuenta algunas reglas
una de ellas indica que hay que realizar una divisin de dos lneas verticales y dos
horizontales esto se refiera a:
a) Formato b) Direccin

c) Equilibrio d) Zonas
ureas
e) Sentido
2. Al tomar una fotografa o al mostrar imgenes se debe considerar esta caracterstica que
representa un acomodo de los objetos que se estn proyectando de forma uniforme.
a) Formato

b) Direccin c) Sentido d) Zonas
ureas

e) Equilibrio

3. Es la forma y el tamao del trabajo realizado ya sea para presentarlo o para imprimirlo,
en diseo se encuentran de este tipo los de ISO (A0A12, B0B12, C0C12), DIN
(A3, A4).
a) Formato

b) Diseo

c) Imagen d) Papel e) Estilo



Sesin
10
Realiza las siguientes actividades
41

Zonas ureas
En diseo grfico encontramos que hay que tomarse fotografas para proyectar por ejemplo: un
anuncio publicitario, para ello es necesario tomar en cuenta algunas reglas que se han
establecido, una de ellas est referida a las zonas ureas; que est relacionada con el manejo
de la proporcin y el encuadre, en el sentido de que las propiedades geomtricas hacen de la
razn urea algo ms interesante que una divisin simple.
En todas las composiciones simples y de mucho impacto visual estn presentes las zonas
ureas, solo es necesario dividir en con dos lneas horizontales y dos verticales las imgenes.
Direccin
Direccin es para donde va uno o varios elementos del diseo
puede tener un elemento 15 grados o 45, etc. El diseo grfico
tiene como propsito la conceptualizacin y posterior confeccin o
facturacin de objetos en serie. El diseo viene a redescubrir la
forma de los objetos; viene de hecho a presentarlos y
representarlos segn la ocasin, gustos del consumidor,
necesidades del producto,
factores econmicos, sociales e histricos.
Todo diseo debe cubrir esta caracterstica ya que ello
impactara al consumidor (si se tratase de un anuncio
publicitario), al cibernauta (en el caso de un diseo visto
en Internet), esta direccin en el diseo tratara de
proyectar esta comunicacin visual como lo es un diseo grfico.
Otro elemento importante en un diseo grfico es el contorno para ello tambin se considera la
direccin principalmente en las figuras geomtricas como el cuadrado, crculo, tringulo entre
otros comentando lo siguiente como ejemplo:
Dependiendo de cmo coloquemos ciertas figuras podremos tener una sensacin u otra, por
ejemplo, el tringulo y el cuadrado si los representamos apoyados en la base nos dar una
sensacin de estabilidad y tambin de estatismo. Sin embargo, si lo representamos apoyado en
uno de sus ngulos tendremos las sensaciones contrarias, inestabilidad y dinamismo.

En el recuadro que se te presenta a continuacin elabora un
paisaje tomando en cuenta la caracterstica de la zona urea y
representa la direccin del grfico, para ello debers de traer
colores.
unidad.


42

En equipo de tres personas, toma cinco fotografas de diversos
paisajes, objetos o personas, donde tomes como caracterstica la
zona urea, entrega impresas las imgenes con las dos divisiones
horizontales y dos verticales.
unidad.


opciones de respuesta. Subraya la respuesta correcta que corresponda
a cada una de ellas.


43

1. Como parte de la caracterstica de zona urea se debe de dividir la imagen en cuatro lneas
imaginarias estas son:
a) verticales y
diagonales
b) Verticales y
horizontales

c) Diagonales y
senoidales
d) horizontales
y diagonales
e) Verticales y
senoidales
2. Es la caracterstica a considerar en el diseo grfico que puede representarse a 15 o 45
grados:
a) Equilibrio

b) Direccin c) Zona urea d) Contraste

e) Sentido

Sentido y equilibrio
Cada forma o figura representada sobre un papel se comporta como un peso (un peso visual),
porque ejerce una fuerza ptica. Los elementos de nuestra composicin grfica pueden ser
imaginados como los pesos de una balanza. Una composicin se encuentra en equilibrio si los
pesos de los distintos elementos que la forman se compensan entre s.
Este criterio se aplica principalmente al diseo global, es decir, a la
disposicin de los elementos sobre la superficie de trabajo.
Normalmente se busca este equilibrio, aunque en alguna ocasin se
provoca un desequilibrio intencionado para conseguir unos resultados
especficos en un diseo.
Se define al equilibrio como una apreciacin subjetiva, en la cual, los
elementos de una composicin no se van a desprender y se
consideran dos tipos que son: Equilibrio esttico y equilibrio dinmico:
El equilibrio esttico proyecta el centro de gravedad dentro del rea delimitada por los contornos
externos de los pies. El equilibrio dinmico, es aquel estado durante el cual la persona se
mueve, y durante este movimiento modifica constantemente su
sustentacin.
Segn la fsica el equilibrio es el estado en el cual las fuerzas que
operan en l se compensan mutuamente. Es la distribucin de las
partes por la cual el todo ha llegado a una situacin de reposo. No
obstante, la idea de equilibrio implica fuerza y direccin, por lo tanto
tambin movimiento. Esta nocin recibe cabida tambin en el arte
mediante la percepcin sin embargo, ello no implica que rijan las
mismas leyes. En el arte, el equilibrio est referido a los bordes o marco del campo donde de
acuerdo a ste se crea un campo visual limitado (en teatro, espacio escnico). El equilibrio se
relaciona principalmente con el peso compositivo, la direccin y la anisotropa (en todas las
direcciones).

Sesin
11
44

1. Es el tipo de equilibrio que proyecta el centro de gravedad dentro del rea delimitada por los
contornos externos de los pies.
a) Direccional b) Funcional

c) Dinmico d) Esttico e) Dimensional
2. Es el tipo de equilibrio que representa un estado durante el cual la persona se mueve, y
durante este movimiento modifica constantemente su sustentacin.
a) Esttico

b) Direccional c) Dimensional d) Dinmico

e) Funcional

3. Se considera como una apreciacin subjetiva, en la cual, los elementos de una
composicin no se van a desprender ejerciendo una fuerza ptica.
a) Sentido b) Equilibrio c) Direccin d) Zona urea e) Contorno
Elabora un mapa conceptual donde representes los conceptos de
equilibrio y sentido en diseo grfico.
unidad.




45

Para el diseo grfico es necesario que el diseador tenga conocimientos de algunos formatos
en el diseo como se ha mencionado entre ellos se destaca las
zonas ureas, enfocando lo que se quiere mostrar en esa divisin
de lneas horizontales y verticales para enfocar lo que se quiere dar
a presentar, al proyectar algunos elementos considerar tambin el
equilibrio que mostraran, la direccin y el sentido. Esto lleva a
considerar en el diseo grfico su capacidad comunicativa se mida
por la influencia que ejerce en el pblico y por
la eficacia de los medios utilizados para
difundir esos mensajes, por lo que estos formatos ayudan a tal influencia.
La direccin de lo que se quiere proyectar es algo que tambin se debe
tomar muy en cuenta, dependiendo de ello es el impacto que provocara la
imagen en el cliente, espectador o usuario.
Adems debe de quedar equilibrado entre los colores, tipografas,
imgenes que se proyecten porque hay que saber organizar en un cartel por ejemplo la idea que
se necesite de la publicacin.

Sesin
12
Elabora un cartel indicando los valores de CECyTES, toma en
cuenta los formatos de diseo, deber incluir la Zona urea de la
imagen que se proyecte, direccin, sentido y equilibrio
Comparte el cartel ante el grupo, indicando las partes del cartel
donde representaste cada formato.
unidad.

Individual
Ejercicio no. 28

Desarrolla la siguiente actividad para evaluar los aprendizajes logrados
durante el desarrollo de la secuencia.

46

1. Joaqun desea proyectar una imagen como parte de un cartel para darle realce dicha imagen
se recomienda dividirla en dos lneas verticales y dos horizontales, a este formato se le
llama:
a) Direccin b) Sentido

c) Equilibrio d) Zona urea e) Estilo
2. Al proyectar diseos grficos como parte del formato se debe considerar un acomodo de los
elementos que formaran el diseo esto es para que se vea una fuerza ptica a este acomodo
se le conoce como:
a) Equilibrio

b) Estilo c) Zona urea d) Direccin

e) Sentido

3. Martha se encuentra estudiando diseo grfico le solicitaron elaborar un grfico de una
empresa para ello tiene que acomodar a 45 grados la imagen este formato en el diseo
se llama:
a) Estilo b) Equilibrio c) Direccin d) Sentido e) Zona urea

En equipo de tres personas, Elabora un mapa conceptual donde
representes los formatos del diseo: Zona urea, direccin,
sentido y equilibrio. Explicars tu mapa conceptual ante el grupo.
unidad.



Individual

Ejercicio no.30

47

1.3. TEORIAS DEL COLOR.
1.3.1. Circulo cromtico
1.3.2. Contrastes
1.3.3. Colores RGB (Red, Green y Blue) y CMY (Cain, Magenta y Yellow)

Sesin
13
Aplicar la teora del color considerando el crculo cromtico,
contrastes y colores RGB y CMY.





48

1. Menciona los colores que se denominan primarios

2 Indica que significado tiene el color azul segn la
psicologa del color.

3 Indica que colores representan al crculo cromtico

4 Que colores representan las siglas CMY
Busca y recorta al menos seis logotipos de productos conocidos,
los cuales necesitaras para realizar la siguiente actividad.
Puedes recortarlos de los empaques de los productos, de revistas.
Tarea no. 1

49

NL Logotipo Lista de colores del logotipo
1

2

3

4

5

6

Con los recortes de los logotipos completa el siguiente cuadro,
pega en la primera columna el logotipo y anota en una lista los
colores que los representa.
unidad.


50

1. Son los colores que representan a la teora del color CMY.
a) Cian,
Magenta,
Yellow
b) Cielo,
Morado,
Yellow

c) Caf
Magenta
Yellow
d) Yellow
Marrn
Caf
e) Magenta
Cielo
Yellow
2. Martin est elaborando un grfico, el maestro Juan Carlos le indico que tiene que basarse en
el crculo cromtico para colorearlo, indcale como cuantos colores primarios conforma dicho
circulo.
a) Doce

b) Seis c) Cuatro d) Dos

e) Tres

3. Que colores representan a la teora del color RGB:
a) Rosa, Gris,
Blanco
b) Rojo, Verde,
Azl
c) Rosa, Verde,
Blanco
d) Rojo,
Verde, Negro
e) Rojo, Gris,
Negro

Teora del color
Como otro aspecto a considerar al disear tenemos las teoras del color, ya que ello forma parte
esencial en toda comunicacin visual ya que es el ojo humano quien percibir los colores
quienes tienen mucho que contar.
A travs de los aos encontramos al filsofo Aristteles quien indic que todos los colores se
forman de la mezcla de cuatro colores y otorg un papel
fundamental a la incidencia de la luz y la sombra sobre los
mismos; los colores bsicos eran los de tierra, fuego, agua y
cielo.
Leonardo Da Vinci tambin defini al color
como propio de la materia estableciendo la siguiente escala de colores bsicos:
blanco como el principal, este permite recibir a los dems, despus estableci
al amarillo para la tierra, verde para el agua, azul para el cielo, rojo para el
fuego y negro para la obscuridad
Propiedades del color: tono, saturacin, brillo y luminosidad.
Sesin
14


51

El tomate nos parece de color rojo, porque el ojo slo recibe la luz roja reflejada por la hortaliza,
absorbe el verde y el azul y refleja solamente el rojo. Un pltano amarillo absorbe el color azul y
refleja los colores rojo y verde, los cuales sumados permiten visualizar el color amarillo.

Elabora un cuadro sinptico donde representes las propiedades
del color como parte de las teoras del color, para ello consulta la
liga: http://www.fotonostra.com/grafico/teoriacolor.htm
unidad.




Propiedade
s del color
Tono
Brillo
Saturacin
Luminosida
d
___________________________________
___________________________________
___________________________________
_________
___________________________________
___________________________________
___________________________________
_________
___________________________________
___________________________________
___________________________________
_________
___________________________________
___________________________________
___________________________________
_________
52

1. Es el atributo que diferencia el color identificando los colores verde, violeta y anaranjado. .
a) Saturacin b) Color

c) Tono d) Brillo e) Luminosidad
2. Es la claridad u obscuridad de un color determinada por la cantidad de luz que un color tiene.
a) Color

b) Luminosidad c) Brillo d) Tono

e) Saturacin

3. Es la cantidad de luz emitida por una fuente lumnica o reflejada por una superficie.
a) Brillo b) Tono c) Saturacin d) Color e) Luminosidad

Circulo cromtico
Se denomina crculo cromtico a la representacin grfica sobre un crculo con seis colores
reflejados en la descomposicin de la luz visible del espectro solar
segn el siguiente orden: prpura, rojo, amarillo, verde, azul cian y
azul obscuro. Por lo tanto, en principio se tienen tres colores primarios
prpura, amarillo y azul cian y tres secundarios rojo, verde y azul
obscuro, completndose con otros seis resultantes de las mezclas de
los primarios con los secundarios ms prximos, con lo que el circulo
cromtico estara compuesto por doce colores: tres primarios (P), tres
secundarios (S) y seis terciarios (T).

Sesin
15
A continuacin se te presenta el circulo cromtico coloralo de
acuerdo a los tres colores primarios, tres secundarios y seis
terciarios. Lista de cotejo al final de la unidad.


P
S
T
S
T
P
T T
T
T
S
P
53

1. El maestro de pintura indico que hay un formato de la teora del color que lo representan 3
colores primarios, tres secundarios y seis terciarios, como se llama este formato:
a) RGB b) CMY

c) Crculo cromtico d) RYB e) Cian
2. Azucena se encuentra elaborando una pintura en la materia de artes, para lo cual le pidi el
profesor que se guiara de los colores del circulo cromtico para combinar colores terciarios
indcales cuales son los colores primarios que tiene que mezclar:
a) Amarillo,
rojo, azul
b) Violeta,
naranja, verde
c) Verde, rojo, azul d) Azul,
naranja, rojo
e) Amarillo, rojo,
violeta


En equipo de tres integrantes dibuja en una manta de un metro
cuadrado el crculo cromtico, donde colores con pinturas de agua
e indiques el nombre de los colores primarios, secundarios y
terciarios, expn ante el grupo el resultado de tu trabajo. Tu gua
es el siguiente dibujo. Lista de cotejo al final de la unidad.


Colores primarios
Colores secundarios
Colores terciarios
54

3. Joaqun se encuentra elaborando una pintura al leo, le indicaron que hay un formato de la
teora del color que nombra a los colores primarios, secundarios y terciarios, indcale que
colores corresponden al grupo de colores secundarios:
a) Verde, rojo,
violeta
b) Rojo, azul,
amarillo
c) Verde, naranja,
violeta
d) Naranja,
verde, rojo
e) Violeta, rojo,
amarillo

Contrastes
El contraste es un fenmeno con el que se pueden diferenciar colores atendiendo a la
luminosidad, al color de fondo sobre el que se proyectan, es un aspecto importante a la hora una
composicin grfica ya que una de las formas ms efectivas de conseguirlo es mediante el color.
Cuando dos colores diferentes entran en contraste directo, este contraste intensifica la diferencia
entre ambos colores, haciendo que aumente el contraste entre mayor es el grado de diferencia,
hay que hacer un contraste entre colores clidos, fros y neutros. Se llaman colores clidos
aquellos que van del rojo al amarillo y los colores fros son los que van del azul al verde, aunque
va a depender un mismo color se puede comportar como clido si se combina con un color o
bien fro.
El amarillo puede ser clido con respecto a un azul y fro con
respecto a un rojo. Y tambin un mismo amarillo puede ser
ms clido si est rodeado de colores fros y menos clidos si
lo rodean con rojo, naranja, etc.

Existen diferentes tipos de contrastes: de luminosidad, de valor, de saturacin, de temperatura,
entre otros.
Todo diseador y en especial de pginas Web debe tomar en
cuenta esta caracterstica, al contrastar los colores puede ser
benfico el hacer una buena contrastacin en los colores que
representaran la interfaz del sitio Web, aunque claro las empresas
ya los represente un color en sus logotipos y que al momento de
crear el sitio el diseador se base en los colores representativos
de la empresa solo es necesario saberlos contrastar para dar un
mejor impacto en el usuario o cibernauta.

Sesin
16
EJEMPLO
55

A continuacin se te presenta un mapa donde se representa los
tipos de contrastes completa sobre los cuadros el tipo de contraste
y la descripcin que representa el mismo. Lista de cotejo al final de
la unidad.

Individual Ejercicio no.39



CONTRASTES
56

1. Es el tipo de contraste se produce al confrontar un color claro o saturado en blanco y un color
obscuro o saturado de negro.
a) Valor b) Saturacin

c) Luminosidad d) Temperatura e) Complementario
2. Mariza se encuentra diseando un logotipo para una empresa. Ella ha contrastado un color
puro y lo ha saturado con un color negro perdiendo para el ello el color puro su luminosidad,
a qu tipo de contraste est siendo referencia.
a) Saturacin

b) Temperatura c) Valor d) Simultneo

e) Metamerismo

3. Al estar contrastando dos colores, cuando el color ms claro parecer el ms alto y el ms
obscuro parecer el ms bajo, que tipo de contraste se comporta de esta manera.
a) Complementario b) Temperatura c) Luminosidad d) Saturacin e) Valor

Psicologa del color
El color desprende diferentes expresiones del ambiente, que pueden transmitirnos la sensacin
de calma, plenitud, alegra, violencia, maldad, etc.
La psicologa de los colores fue estudiada por grandes maestros a lo largo de nuestra historia,
como por ejemplo Goethe y Kandinsky.
Cada color tiene un significado y proyecta una sensacin que es reconocida por el cerebro
humano, la percibe y representa una accin.
Color Blanco: Es el que mayor sensibilidad posee frente a la luz. Es la
suma o sntesis de todos los colores, y el smbolo de lo absoluto, de la
unidad y de la inocencia, significa paz o rendicin. Mezclado con
cualquier color reduce su croma y cambia sus potencias psquicas, la
del blanco es siempre positiva y afirmativa. Los cuerpos blancos nos
dan la idea de pureza y modestia. El blanco crea una impresin
luminosa de vaco, positivo infinito.

El color Negro: Smbolo del error, del mal, el misterio y en
ocasiones simblica algo impuro y maligno. Es la muerte, es la
ausencia del color. Tambin transmite nobleza y elegancia.
Color gris: Es el centro de todo ya que se encuentra entre la
transicin entre el blanco y el negro, y el producto de la mezcla de ambos. Simboliza neutralidad,
indecisin y ausencia de energa. Muchas veces tambin expresa tristeza, duda y melancola. El
color gris es una fusin de alegras y penas, del bien y del mal. Da la impresin de frialdad
metlica, pero tambin sensacin de brillantez, lujo y elegancia.

EJEMPLO
Sesin
17
57

A continuacin se te presenta un cuadro sinptico para que
describas el significado de cada uno de los colores segn la
psicologa del color. Se te calificar con la lista de cotejo que se
encuentra al final de la unidad.


Psicologa del
color
Blanco
Amarillo
Negro
Azul
_____________________________________________
_____________________________________________
_______________
_____________________________________________
_____________________________________________
_______________
_____________________________________________
_____________________________________________
_______________
_____________________________________________
_____________________________________________
_______________
58

1. Segn la psicologa del color, este indica que arrogancia, fuerza, voluntad y estmulo,
relacionado con la inteligencia.
a) Violeta b) Amarillo

c) Rojo d) Blanco e) Negro
2. Es el color que representa alegra, accin, destruccin e impulso, expresa adems
sensualidad, virilidad y energa.
a) Blanco b) Verde c) Negro d) Rojo e) Amarillo

3. Hace algunos aos algunos pintores al momento de proyectar sus pinturas se basaban
en la emocin que proyectara la imagen de acuerdo a los colores que utilizaban, esto se
refiere a:
a) Psicologa
del color
b) Teora del
color
c) Formato del color d) Significado
del color
e) Concepto del
color

RGB
Modelo RGB. Este espacio de color es el formado por los colores
primarios luz que ya se describieron con anterioridad. Es el
adecuado para representar imgenes que sern mostradas en
monitores de computadora o que sern impresas en impresoras de
papel fotogrfico.

Las imgenes RGB utilizan tres colores para reproducir en pantalla
hasta 16,7 millones de colores. RGB es el modo por defecto para
las imgenes de Photoshop. Los monitores de ordenador
muestran siempre los colores con el modelo RGB. Esto significa
que al trabajar con modos de color diferentes, como CMYK, Photoshop convierte temporalmente
los datos a RGB para su visualizacin.

El modo RGB asigna un valor de intensidad a cada pxel que oscile entre 0 (negro) y 255
(blanco) para cada uno de los componentes RGB de una imagen en color. Por ejemplo, un color
rojo brillante podra tener un valor R de 246, un valor G de 20 y un valor B de 50. El rojo ms
brillante que se puede conseguir es el R: 255, G: 0, B: 0. Cuando los valores de los tres
componentes son idnticos, se obtiene un matiz de gris. Si el valor de todos los componentes es
de 255, el resultado ser blanco puro y ser negro puro si todos los componentes tienen un valor
0.


Sesin
18
59

Este modo es el ms cercano ya que es el usado en la iluminacin artificial y en la mayora de
monitores y pantallas grficas proporcionando la mayora del espectro visible mezclando las
luces generadas por fsforos rojos, verdes y azules. Estos tres colores primarios crean el blanco
cuando se combinan simultneamente por eso se llaman tambin "aditivos".
Espacio de color RGB
Al mezclarse dos a dos, crean los colores secundarios. Al mezclarse luz verde con azul se
obtiene el cin, con la luz roja y azul se logra el magenta y usando luz roja y verde observaremos
un llamativo amarillo. Si la mezcla es en diferentes proporciones de estos colores bsicos se van
originando los diferentes tonos de la gama del espectro.
Este formato de color se recomienda para la creacin de pginas
web, utilizando una buena combinacin provocara la reaccin y la
proyeccin que necesite tomar del auditorio o cibernautas.

A continuacin se te presenta el formato RGB coloralo de
acuerdo a los tres colores que representa como primarios y los que
resultan de su combinacin, indica sobre la lnea el color que
representa en el crculo. Lista de cotejo al final de la unidad.


60

Formato RGB

1. Es el formato de color de acuerdo a la teora que representa colores primarios Rojo, Verde,
Azul.
a) VGA b) Psicologa
del color

c) Circulo
cromtico
d) RGB e) CMY
2. Al combinar los tres colores primarios segn la teora del color crean el color:
a) Negro

b) Amarillo c ) Cian d) Blanco

e) Anaranjado

3. Al combinarse el color azul y el verde en el formato RGV, nos crea el color:
a) Cian b) Blanco c) Anaranjado d) Negro e) Amarillo



61

CMY
El modelo CMY se basa en la cualidad de absorber y rechazar luz de los
objetos. Si un objeto es rojo esto significa que el mismo absorbe todas
las componentes de la luz exceptuando la componente roja. Los colores
sustractivos (CMY) y los aditivos (RGB) son colores complementarios.
Cada par de colores sustractivos crea un color aditivo y viceversa.

Este formato de color se emplea para impresiones donde los colores
ms claros (iluminados) tienen un porcentaje pequeo de tinta,
mientras que los ms oscuros (sombras) tienen porcentajes mayores.
Por ejemplo, un rojo brillante podra tener 2% de cyan, 93% de
magenta, 90% de amarillo y 0% de negro.
En las imgenes CMY, el blanco puro se genera si los cuatro
componentes tienen valores del 0%.
Como ya se comento se utiliza el modo CMY en la preparacin de imgenes que se van a
imprimir en cualquier sistema de impresin de tintas. Aunque CMY es un modelo de color
estndar, puede variar el rango exacto de los colores representados, dependiendo de la
imprenta y las condiciones de impresin.

A continuacin se te presenta el circulo cromtico coloralo de
acuerdo a los tres colores primarios, tres secundarios y seis
terciarios. Se te calificar con la lista de cotejo que se encuentra al
final de la unidad.


Sesin
19
62

Formato CMY



63

1. Este tipo de formato segn la teora del color se considera el ideal para las impresione, por
ello las tintas de las impresoras lo conforman sus tres colores.
a) VGA b) RVA

c) RGB d) CMY e) Circulo cromtico
2. Es la combinacin de colores que representa el formato CMY.
a) Cian,
magenta,
yellow

b) Rojo,
amarillo,
azul
c) Caf, morado,
yellow
d) Cian,
morado,
amarillo

e) Anaranjado,
amarillo, azul

3. Es el color resultante de combinar los colores del formato CMY:
a) Rojo b) Blanco c) Verde d) Negro e) Anaranjado

Como parte de las actividades de los diseadores y en especial de los creadores de pginas
Web es necesario tener conocimiento de las teoras de color ya que todo lo que se proyectara
causara gran impacto en el usuario dependiendo de la interfaz que presente y parte de ello lo
refleja el color que se muestra.

Sesin
20
Basndote en una pgina web de alguna empresa comercial,
examnala para describir las siguientes caractersticas: colores que
utiliza, tipos de letra.
unidad.



64

1. Es un creador de comunicaciones, es el profesionista que mediante un diseo
construye mensajes con medios visuales.
a) Diseador
grfico

b) Pintor

c) Dibujante d) Arquitecto e) Ingeniero
Industrial
2. En una pgina web al momento de disearla, las empresas consideran en su diseo algunas
caractersticas basadas en el logotipo de sus productos, esta caractersticas est basada en:
a) Color

b) Estilo

c) Letra d) tamao e) textura
3. La importancia del diseo grfico que se est elaborando depender en gran parte del:
a) Dibujante b) Diseador

c) Empresario d) Cliente e) Publicista
4. Smbolo que utiliza normalmente una empresa o marca para que la identifiquen con ms
facilidad.
a) Dibujo

b) Imagen

c) Logotipo d) Esquema e) Croquis

5. Plasm los principios de la tipografa moderna en su libro de 1928, aunque ms tarde la califico
de fascista (del rgimen poltico que promulgaba un gobierno autoritario).
a) William
Morris

b) Jan
Tschichold

c) Herbert Bayer d) Lszl
Moholy-Nagy
e) El Lissitzky
6. Movimiento artstico que se centro en las formas geomtricas fundamentales como el tringulo,
el cuadrado, cruz y crculo.
a) Dadaismo b) Constructivismo

c) Futurismo d) Suprematismo e) Cubismo
7. Juan Francisco est elaborando un material didctico del tema elaboracin de pginas web con
un instructivo de cmo realizar tu sitio web, indica que rea del diseo grfico est
representando.

c) Administracin d) Informacin e)
Educacin
8. Teora que mantiene que los universales (ideas abstractas) no tienen existencia en el mundo
externo, existen como ideas en la mente donde implican ms que meras palabras.
a) Cubismo b) Conceptualismo

c) Dadasmo d) Futurismo e) Minimalismo
9. Tcnica visual que consiste en ensamblar elementos diversos en un todo unificado.
a) Collage b) Dibujo c) Fotomontaje d) Escultura e) Pintura

Nombre: ________________________________________________

Grupo: ________________________ Turno: __________________

Fecha: _________________________________________________

AUTOEVALUACIN
65

10. Estas son algunas teoras del diseo que repercuten en los orgenes y han establecido criterios
para ser utilizados por un diseador grfico.
a) Cubismo,
Dadasmo
b) Futurismo,
Minimalismo
c) Minimalismo,
Conceptualismo
d) Dadasmo,
Futurismo
e) Conceptualismo,
Cubismo

11. Como parte de la caracterstica de zona urea se debe de dividir la imagen en cuatro lneas
imaginarias estas son:
a) verticales y
diagonales
b) Verticales y
horizontales

c) Diagonales y
senoidales
d) horizontales
y diagonales
e) Verticales y
senoidales
12. Se considera como una apreciacin subjetiva, en la cual, los elementos de una composicin no se
van a desprender ejerciendo una fuerza ptica.
a) Sentido b) Equilibrio c) Direccin d) Zona urea e) Contorno

13. Son los colores que representan a la teora del color CMY.
a) Cian,
Magenta,
Yellow
b) Cielo,
Morado,
Yellow

c) Caf
Magenta
Yellow
d) Yellow
Marrn
Caf
e) Magenta
Cielo
Yellow
14. Magdalena se encuentra elaborando una pintura en la materia de artes, para lo cual le pidi el
profesor que se guiara de los colores del circulo cromtico para combinar colores terciarios
indcales cuales son los colores primarios que tiene que mezclar:
a) Amarillo,
rojo, azul
b) Violeta,
naranja, verde
c) Verde, rojo, azul d) Azul,
naranja, rojo

e) Amarillo, rojo,
violeta

15. Al combinar los tres colores primarios segn la teora del color crean el color:
a) Negro

b) Amarillo c ) Cian d) Blanco

e) Anaranjado

16. Este tipo de formato segn la teora del color se considera el ideal para las impresione, por ello las
tintas de las impresoras lo conforman sus tres colores.
a) VGA b) RVA

c) RGB d) CMY e) Circulo cromtico
17. Es la combinacin de colores que representa el formato CMY.
a) Cian,
magenta,
yellow

b) Rojo,
amarillo,
azul
c) Caf, morado,
yellow
d) Cian,
morado,
amarillo

e) Anaranjado,
amarillo, azul

18. Hace algunos aos algunos pintores al momento de proyectar sus pinturas se basaban en la
emocin que proyectara la imagen de acuerdo a los colores que utilizaban, esto se refiere a:
a) Psicologa
del color
b) Teora del
color
c) Formato del color d) Significado
del color
e) Concepto del
color
19. Es el tipo de contraste se produce al confrontar un color claro o saturado en blanco y un color
obscuro o saturado de negro.
a) Valor b) Saturacin

c) Luminosidad d) Temperatura e) Complementario
20. Es la claridad u obscuridad de un color determinada por la cantidad de luz que un color tiene.
a) Color

b) Luminosidad c) Brillo d) Tono

e) Saturacin

66

INSTRUMENTOS DE EVALUACIN

LISTA DE COTEJO : TEMA 1.1
Nombre del alumno(a): Campo De Aplicacin
Asignatura: Elaboracin de pginas web
Elementos
fundamentales de
diseo

Evidencia por desempeo Teoras del diseo
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno:
Seguir las instrucciones de la actividades
Caractersticas
Cumple
Subtema 1.1.1
SI NO
Importancia del diseo y su impacto
a) Entrega puntual del trabajo.

b) Presenta al menos 10 imgenes para representar los logotipos de los
productos.

c) Existe calidad en el trabajo.

d) Presenta coherencia el trabajo que le fue asignado.

Observaciones:

Subtema 1.1.1
SI NO

b) Contiene cada concepto en el mapa

c) Cumple reglas ortogrficas, de redaccin y sintaxis.

d) Existe calidad en el trabajo.

e) Presenta coherencia el trabajo que le fue asignado.

Observaciones:

Caractersticas
Cumple
Subtema 1.1.1
SI NO
67


b) Visito los 5 sitios web.

c) Describi para cada sitio visitado la imagen, colores, estilo y la informacin

d) Existe calidad en la presentacin trabajo.

Observaciones:
Subtema 1.1.2
SI NO
Origen y enfoque del diseo

b) Presenta la totalidad de los conceptos a investigar.




Observaciones:
Subtema 1.1.2
SI NO
Origen y enfoque del diseo

b) Esta completas las clasificaciones del rea del diseo


d) Existe calidad en la presentacin trabajo.

Observaciones:
Caractersticas
Cumple
Subtema 1.1.3
SI NO
Teoras del diseo: minimalismo.
b) Indico correctamente cada una de las imgenes segn el diseador


68

Observaciones:
Caractersticas Cumple
Subtema 1.1.3.
SI NO
Teoras del diseo: minimalismo
b) Cumple con las caractersticas del diseo con respecto a la teora minimalista.

c) Todos los integrantes del equipo participaron en la elaboracin del prototipo.



Observaciones:

Subtema 1.1.3.
SI NO
Teoras del diseo: conceptualismo
b) Cumple con las caractersticas del diseo con respecto a la teora
conceptualista.

c) Utiliz todas las imgenes de los recortables



Observaciones:

Subtema 1.1.1, 1.1.2, 1.1.3
SI NO
Elementos fundamentales de diseo: impacto, origen y teoras del diseo.
b) Cumple reglas ortogrficas, de redaccin y sintaxis.

c) Realizo la descripcin detallada de la importancia del diseo y su impacto.

d) Hizo entrega del ensayo impreso.

e) Existe calidad en el trabajo.

f) Presenta coherencia el trabajo que le fue asignado.

69

Observaciones:

Asignatura: Elaboracin de Pginas Web

Formatos de
diseo

Evidencia por desempeo: Formatos de diseo
Caractersticas
Cumple
Subtema 1.2.1
SI NO
Formatos de diseo

b) Presenta al menos 10 imgenes para representar las fotografas,
imgenes, anuncios y paisajes.



a) Entrega del trabajo en tiempo y forma (responsabilidad).

Observaciones:
Caractersticas
Cumple
Subtema 1.2.1
SI NO
Zonas ureas, direccin
a) Realizo la imagen de acuerdo a la regla de las zonas ureas

b) Existe calidad en el trabajo.

c) Entrega del trabajo en tiempo y forma (responsabilidad).

Observaciones:
Caractersticas
Cumple
70

Subtema 1.2.1., 1.2.2.
SI NO
Zonas ureas, direccin
a) Entrego las cinco fotografas impresas

b) Dividi las cinco fotografas en dos lneas verticales y dos lneas
horizontales.

c) Se visualiza la seccin urea en las imgenes fotografiadas.


e) Entrega del trabajo en tiempo y forma (responsabilidad).

Observaciones:
Caractersticas
Cumple
Subtema 1.2.3., 1.2.4.
SI NO
Sentido y equilibrio





Observaciones:
Caractersticas
Cumple
Subtema 1.2.1., 1.2.2., 1.2.3., 1.2.4.
SI NO
Formatos de diseo

b) Contiene buena presentacin del cartel elaborado.

c) Cumple con las caractersticas de zona urea, direccin, sentido y
equilibrio al mostrar el cartel.



Observaciones:
71

Caractersticas
Cumple
Subtema 1.2.1., 1.2.2., 1.2.3., 1.2.4.
SI NO
Formatos de diseo





f) Todos los integrantes participaron en la elaboracin y presentacin del
mapa.

Observaciones:

Asignatura: Elaboracin de Pginas Web

Teoras del
Color

Evidencia por desempeo: Teoras del color, circulo cromtico,
contrastes, RGB, CMY
Caractersticas
Cumple
Subtema 1.3. 1
SI NO
Circulo cromtico
a) Recorto y pego los 6 logotipos

b) Indico los colores que representa cada logotipo

c) Entrega puntual del ejercicio

d) Presento limpieza en la presentacin de su trabajo

Observaciones:
Caractersticas
Cumple
72

Subtema 1.3.1.
SI NO
Circulo cromtico
a) Entrega puntual del trabajo

b) Completo el cuadro sinptico con todos los trminos de la teora del color

c) Presento limpieza el trabajo que le fue encargado

d) Cumple con las reglas ortogrficas

Observaciones:
Caractersticas
Cumple
Subtema 1.3.1.
SI NO
Circulo cromtico

b) Coloreo correctamente el crculo de acuerdo a los colores primarios,
secundarios y terciarios.



Observaciones:
Caractersticas
Cumple
Subtema 1.3.1.
SI NO
Circulo cromtico

b) Elaboro el circulo cromtico en manta de un metro cuadrado

c) Coloreo e indico los colores de crculo cromtico.



f) Todos los participantes del equipo participaron

Observaciones:
Caractersticas
Cumple
73

Subtema 1.3.2.
SI NO
Contrastes

b) Indico el mapa con los tipos de contrastes


d) Entrega puntual del trabajo.

Observaciones
Caractersticas
Cumple
Subtema 1.3.2.
SI NO
Contrastes, psicologa del color

b) Indico el significado de los colores solicitados en el cuadro sinptico


d) Entrega puntual del trabajo.

Observaciones
Caractersticas
Cumple
Subtema 1.3.3.
SI NO
Colores RGB

b) Indico cada uno de los colores

c) Coloreo el formato RGB

d) Presenta limpieza en el trabajo que le fue asignado

Observaciones
Caractersticas
Cumple
Subtema 1.3.3.
SI NO
Colores CMY
74


b) Indico cada uno de los colores

c) Coloreo el formato CMY

d) Presenta limpieza en el trabajo que le fue asignado

Observaciones

75

UNIDAD II
Manejar los
elementos
bsicos de un
lenguaje usado
en la creacin de
pginas Web
(HTLM)

76


El alumno:
En la utilizacin de un software de aplicacin de diseo, ser capaz de crear pginas Web manipulando las
herramientas de Dreamweaver, mediante los siguientes logros:
Identificar los conceptos bsicos para la creacin de una pgina Web
Identificar la clasificacin de las pginas Web
Identificar la estructura que conforma una pgina Web
Identificar la sintaxis de las etiquetas HTML
Aplicar las etiquetas primarias en a creacin fe una pgina Web
Aplicar la etiqueta de hipervnculos en una pgina Web
Aplicar los controles bsicos de un formulario en la creacin de una pgina Web
Aplica las etiquetas de insercin y edicin de tablas
Aplica las etiquetas en el manejo de imgenes en una pgina Web
Aplica las etiquetas en la insercin de sonidos y videos en la pgina Web
Aplicar el servicio de correo en una pgina Web

TEMARIO

2.1. Identificar los contenidos de una pgina web
2.1.1. Conceptos bsicos (pgina Web, sitio Web, lenguajes Web)
2.1.2. Objetivo y clasificacin de pgina Web
2.1.3. Estructura de una pgina Web
2.2. Utilizar etiquetas en una pgina web
2.2.1. Sintaxis de etiquetas
2.2.2. Etiquetas primarias
2.2.3. Etiquetas de hipervnculo
2.2.4. Manipular formularios en una pgina Web
2.2.5. Insertar y editar tablas en una pgina Web
2.2.6. Manipular imgenes y animaciones en una pgina Web
2.2.7. Insertar sonido y video en una pgina Web
2.2.8. Implementar servicios de correo en una pgina Web

77

1.- Indica el fin del cuerpo de un documento HTML
a) </BODY> b) </HTML> c) <HTML> d) </HEAD> e) </TITLE>
2.- La etiqueta <U> se utiliza para:
a) Para centrar b) Para subrayar c) Para poner
negritas
d) Para el color de
fuente
e) Para insertar
imagen
3.- Son sitios con una finalidad econmica, no son fciles de crear ni mantener y no siempre
siguen sus reglas
a) Comercial b) Buscador c) Poltico d) Educativo e) Ocio
4.- Cul es la etiqueta que sirve para crear un formulario?
a) formulario b) form c) method d) value e) forma
5.- Es un lenguaje el cual se utilizar para estructurar y disear documentos para la Web
a) HTML b) TAG c) HYPERTEXT d) TMLH e) BODY
6.- Etiqueta que sirve para definir una tabla en un documento HTML
a) td b) border c) table d) tabla e) tr
7.- Es la etiqueta que utilizamos par incluir una imagen en un documento HTML
a) alt b) width c) img d) scr e) align
8.- Cul es el smbolo que permite que una etiqueta se cierre?
a) $ b) | c) % d) / e) \
9.- Cul es el atributo que especifica la pgina a la cual ser asociado un vnculo?
a) sef b) link c) top d) a e) ref
10.- Etiqueta de HTML, la cual pone un texto en negritas
a) <A> </A> b) <font>..</font> c) <B> </B> d) <U> </U> e) <P> </P>
La siguiente evaluacin tiene como objetivo conocer lo que sabes acerca de
los temas a revisar en la unidad. Lee cuidadosamente cada una de las
siguientes cuestiones y escribe en el parntesis de la izquierda las letras de
la respuesta correcta. En la pgina 208 se encuentran las respuestas
correctas.
78

2.1. IDENTIFICAR LOS CONTENIDOS DE UNA PGINA WEB
2.1.1. Conceptos bsicos (pgina Web, sitio Web, lenguajes Web)
2.1.2. Objetivo y clasificacin de pagina web
2.1.3. Estructura de una pgina web

En el grupo con tu maestro, realiza una lluvia de ideas de los siguientes
cuestionamientos: Te has preguntado cmo hacen las pginas que visitas en
Internet. Qu programa o qu lenguaje se utiliza para crearlas?

Definiciones bsicas en la creacin de pginas Web
Acta con responsabilidad en la realizacin de pginas Web

Sesin
21
Anota tus comentarios
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

79

Conceptos
Una pgina Web, tambin conocida como pgina de Internet, es un documento elaborado en un
lenguaje de programacin y que es adaptado para la Web y que normalmente forma parte de
un sitio Web. La caracterstica principal de una pgina Web los enlaces a otras pginas
conocidos como hiperenlaces, siendo esto el fundamento de la Web.
Toda pgina Web est compuesta fundamentalmente por informacin (slo texto o multimedia) e
hiperenlaces.
Las pginas Web estn basadas en un lenguaje de marcado que provee la capacidad de utilizar
hiperenlaces, este lenguaje es generalmente HTML.
Un sitio Web es un conjunto de pginas Web, tpicamente comunes a
un dominio de Internet o subdominio en la World Wide Web en Internet.
El conjunto de sitios Web a los cuales puedes acceder pblicamente
constituyen la gigantesca www (world wide web) de informacin.
Lenguajes Web
La funcionalidad del lenguaje HTML (Hypertext Markup Language) es la
de representar cualquier clase de informacin que se encuentre
almacenada en una pgina Web.
En la programacin Web, el HTML es el lenguaje que permite codificar o preparar documentos
de hipertexto, que viene a ser el lenguaje comn para la construccin de una pagina Web.
Existen otros lenguajes para elaborar pginas Web como los son: ASP, JSP, Perl, PHP.
Editor
Un editor es un programa que permite hacer documentos en lenguaje HTML. Hoy en da
existen un gran nmero de editores que permiten crear pginas Web sin la necesidad de
escribir ni una sola lnea de cdigo HTML. Dichos editores contienen un entorno visual y
automticamente generan el cdigo HTML de las pginas. Algunos de los editores visuales con
los que podrs crear tus pginas Web son Macromedia Dreamweaver, Microsoft FrontPage
entre otros.

Instrucciones: Realiza una investigacin bibliogrfica en la cual debers
localizar las siguientes definiciones.

Individual
Ejercicio no. 48
80

1.- Es el lenguaje de marcas de hipertexto
a) HDTML b) HTML c) TXML d) XHGCL e) LHTM
2. Se le conoce as al conjunto de pginas Web
a) Pgina Web b) Lenguaje Web c) WWW d) Sitio Web e) Lugar Web
3. Es un lenguaje el cual se utilizar para estructurar y disear documentos para la Web

Concepto Definicin
Lenguaje
WWW
Dominio
Subdominio
Instrucciones: A continuacin se presentan una serie de
preguntas con cinco opciones de respuesta. Subraya la respuesta
correcta que corresponda a cada una de ellas.

Individual
Ejercicio no. 49

81

Objetivo y clasificacin de pgina Web

Contesta las siguientes preguntas:

Existen muchas variedades de sitios Web, cada uno especializndose en un tipo
particular de contenido o uso, y pueden ser arbitrariamente clasificados de
muchas maneras. Unas pocas clasificaciones pueden incluir:
Comerciales: estn creados para promocionar los negocios de una empresa. Su
finalidad es econmica. Su audiencia puede estar formada por clientes,
empleados, e incluso la competencia y los medios de comunicacin. Se pueden dividir en
corporativas (informan sobre la empresa) y promocionales (que promocionan productos)
Informativos: su finalidad principal es distribuir informacin. La audiencia de este tipo de sitios
depende del tipo de informacin que distribuyen.
Ocio: son sitios con finalidad econmica, no son sitios fciles de crear ni mantener ya que a
veces es ms importante sorprender al usuario con innovaciones; a veces siguen reglas propias.
Definiciones bsicas en la creacin de pginas Web


Sesin
22
Cul crees que sea el objetivo de las pginas Web?

Menciona una pgina Web y el objetivo de esta
82

Navegacin: su finalidad es ayudar al usuario a encontrar lo que busca en Internet; en este
grupo se sitan los llamados portales, que intentan abarcar prcticamente todo dentro del propio
sitio.
Artstico: son un medio de expresin artstica de su creador. Este tipo de sitios suele saltarse
todas las convenciones y las nicas reglas a aplicar son las que el propio artista desee.
Personales: Sitios que son un medio de expresin de su creador. Sus objetivos y su audiencia
pueden ser de lo ms variado. Dentro de este sitio se puede hacer de todo, desde colecciones
de fotos de la familia hasta tratados cientficos de primer orden.

Sitio Objetivo
Descargas

Buscador

Noticias

Educativo

Poltico

Instrucciones: Investiga en Internet la clasificacin y objetivo de las
pginas Web, localiza las de la siguiente lista y llena el siguiente cuadro

Individual
Ejercicio no. 50

83

1. Son sitios con una finalidad econmica, no son fciles de crear ni mantener y no siempre
siguen sus reglas
2. Son sitios creados para promocionar los negocios de una empresa y su finalidad es
meramente econmica.
3. Sitios que promueven cursos presenciales y a distancia, informacin a profesores y
estudiantes.
a) Personal b) Poltico c) Educativo d) Ocio e) Comercial
4. Sitios que contienen colecciones de fotos de la familia hasta tratados cientficos de primer
orden
a) Personal b) Buscador c) Comercial d) Educativo e) Ocio

Estructura de una pgina Web


Aplica los comandos bsicos para la elaboracin de pginas Web



Individual
Ejercicio no. 51
Sesin
23
Conoces cul es la estructura de una pgina Web?

Nombra cul es dicha estructura.
84

Para poder generar una pgina Web es necesario abrir el bloc de notas comenzar a
escribir nuestras etiquetas. Para guardar nuestro documento HTML es necesario:

1. En el Bloc de Notas hacer clic en Archivo y despus seleccionar Guardar como.

2. Aparecer la siguiente ventana donde
seleccionaremos la ubicacin a Guardar de
nuestro documento en HTML.

3.- Ya una vez seleccionada la ubicacin escribir el nombre que le vayamos a dar, en la opcin
, sin pasar por alto a lo ltimo la extensin (.HTML), Ejem.
, y hacemos clic en . De NO ser as el
documento no lo podr leer nuestro navegador.
Una pgina Web consta de dos partes principales que son: Cabecera y Cuerpo del documento.
Todas las pginas Web escritas en HTML deben tener la extensin .html o .htm.| Al mismo
tiempo, deben tener las etiquetas <HTML> y </HTML>, ya que entre estas etiquetas estar
comprendido el cdigo HTML de la pgina.

85

Estructura de una pgina Web
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Indica el inicio del documento.
Inicio de la cabecera.
Inicio del ttulo del documento.
Final del ttulo del documento.
Final de la cabecera del documento.
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.
1. <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
2. <HEAD>: La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como
puede ser el ttulo. Est formada por las etiquetas <head> y </head>. Esta etiqueta va justo
debajo de la etiqueta <html>. Dentro de la cabecera va la etiqueta de ttulo <TITLE>, solo
puede haber un ttulo por documento, preferiblemente corto aunque significativo. En la
etiqueta HEAD no hay que colocar nada del texto del documento. La nica etiqueta que
puede ser colocada dentro de la etiqueta HEAD es TITLE.
3. <BODY>: Encierra el resto del documento, el contenido.
Ejemplo de la estructura de una pgina Web.
<html>
<head>
<title>Mi primer pgina Web</title>
</head>

<body>
Este es un pequeo ejemplo de una pgina Web
</body>

</html>

Sesin
24
Instrucciones: En el laboratorio de cmputo realiza la prctica
que se describe a continuacin:
Abre el bloc de notas de Windows y realiza lo siguiente.
1. Crea las estructura de una pgina Web incluyendo las
etiquetas HTML, HEAD, TITLE, BODY.
2. En la etiqueta de ttulo debers de incluir el mensaje
Tribus urbanas
3. Dentro de la etiqueta Body escribe:
Tribus Urbanas de Sonora.

4. Guarda el archivo con el nombre
Prac1_apellido_grupo.html
5. Visualiza en tu navegador el resultado de las instrucciones
Individual
Prctica no. 1
86

1. Son las etiquetas que conforman las partes principales de un documento HTML
a) TITLE BODY b) HEAD TITLE c) HTML TITLE d) HEAD /HEAD e) HTML BODY
2. Indica el fin del cuerpo de un documento HTML
a) </BODY> b) </HTML> c) <HTML> d) </HEAD> e) </TITLE>
3. Es la etiqueta que indica el inicio de un documento HTML
a) <HEAD> b) <BODY> c) </HTML> d) <HTML> e) </HEAD>
4. Cul es la nica etiqueta que puede ir dentro de la etiqueta HEAD?
a) <BODY> b) <HTML> c) </TITLE> d) e) <TITLE>

2.2. UTILIZAR ETIQUETAS EN UNA PGINA WEB
2.2.1. Sintaxis de etiquetas
2.2.2. Etiquetas primarias
2.2.3. Etiquetas de hipervnculo
2.2.4. Manipular formularios en una pgina web (label, checkbox, action, input, type, value)
2.2.5. Insertar y editar tablas en una pgina web
2.2.6. Manipular imgenes y animaciones en una pgina web
2.2.7. Insertar sonido y video en una pgina web
2.2.8. Implementar servicios de correo en una pgina web

Aplica la estructura de los comandos bsicos para la elaboracin
de pginas Web


Individual
Ejercicio no. 52
Sesin
25

87

Contesta las siguientes preguntas

Sintaxis de etiquetas

La mayora de los documentos tienen estructuras comunes (ttulos, prrafos,
listas...) que van a ser definidas por este lenguaje mediante etiquetas. Cualquier
cosa que no sea una etiqueta es parte del documento mismo.
Existen dos tipos de etiquetas. Las que podemos llamar vacas o abiertas, traduciendo
directamente del ingls (open tag, empty tag) y las que podemos llamar delimitadores o
contenedores (container tag). Las etiquetas abiertas (llamadas as porque no se cierran) deben
aparecer una sola vez, sin su correspondiente cierre, siendo ello suficiente para ejercer
correctamente la accin que representan.
La mayora de las instrucciones en HTML tienen la siguiente sintaxis:
<apertura> . . . </cierre>
La etiqueta del principio activa la orden y la ltima (que ser la del principio precedida del signo /)
la desactiva. No todas las etiquetas tienen principio y final, es decir, no todas las etiquetas del
lenguaje HTML tienen apertura y cierre.
Una recomendacin que se te hace es que Las etiquetas en general se suelen escribir en
maysculas para distinguirlas claramente, pero los navegadores reconocen tambin las
minsculas, as como las combinaciones de maysculas y minsculas.

( ) Indica un salto de lnea
( ) Muestra una imagen
( ) Sirve para colocar una lnea
Instrucciones: Investiga en Internet cules son las etiquetas que no
tienen apertura y cierre y contesta el siguiente ejercicio.

Individual
Ejercicio no. 53
Qu es sintaxis?

Investiga la sintaxis de la etiqueta TITLE
88

1. Cul es el smbolo que permite que una etiqueta se cierre?
a) $ b) | c) % d) / e) \
2. Cul es la sintaxis de las etiquetas HTML?
a) apertura y
cuerpo
b) cuerpo y cierre c) apertura y
cierre
d) solo apertura e) solo apertura y
atributos

Etiquetas primarias


Aplica las etiquetas bsicas para la elaboracin de pginas Web.
Acta con responsabilidad en el cumplimiento de tareas.

Instrucciones: A continuacin se presentan una serie de preguntas
con cinco opciones de respuesta. Subraya la respuesta correcta que

Individual
Ejercicio no. 54

Qu es una etiqueta?

Cules son las etiquetas primarias en HTML?
Sesin
26
89

Vamos a repasar las etiquetas principales de HTML que hasta ahora hemos
visto.

<html> y </html> Son las etiquetas que dan inicio y fin al documento, es la
etiqueta primaria ms importante del lenguaje, ya que esta indica que el documento es una
pgina Web.
<head> y </head> Son las etiquetas de la cabecera, en ellas se incluyen las etiquetas del
ttulo de la pgina, las palabras clave, la descripcin de la pgina, etc.
<title> y </title> En l se escribe el ttulo de la pgina, es decir, lo que se lee en
la parte superior de la ventana.
<body> y </body> Es junto con la etiqueta HTML la etiqueta ms importante
de HTML, en ella se define absolutamente todo lo que aparece en el
documento, prrafos, texto, imgenes, fondo, color de texto, etc. solo puede
haber una etiqueta body dentro del documento.
Las propiedades o atributos de la etiqueta <body>son:

bgcolor=color Se utiliza para establecer el color de fondo de la pgina.
background=imagen Se utiliza para establecer una imagen de fondo de la pgina.
text=color Establece el color de texto de la pgina.
link=color Establece el color de los vnculos de la pgina que an no han sido
visitados.
vlink=color Establece el color de los vnculos de la pgina que ya han sido visitados.
alink=color Establece el color de los enlaces de la pgina activos.

Etiquetas que modifican la presentacin de los textos.
<FONT> La etiqueta Font tiene atributos que pueden manipular la apariencia del texto, entre
los ms utilizados encontramos
Size=valor, con este atributo cambiamos el tamao del texto, puede tomar valores de 1 a 7,
siendo el 7 el tamao ms grande.
Face=nombre de fuente, este atributo cambia el tipo de letra del texto, ejemplo: <FONT
FACE=Arial>.
Color=Nombre del color, aplica un color especfico al texto.
<H1>, <H2>, <H3>... Ttulos. El texto que deseamos que sea un titulo se pone entre las
etiquetas <H1> Titulo</H1>. Se definen mediante las etiquetas <H1> texto </H1> hasta
<H6> texto </H6>, siendo H6 el tamao de letra ms pequea.
<P> Prrafos. En principio, sin entrar en detalles de alineacin u otras caractersticas,
digamos que se definen por las etiquetas <P>.....</P>.
<B>.....</B> Pone el texto en negrita.
<I>.....</I> Pone el texto en cursiva.
<U>.....</U> Subraya el texto afectado.
90

1. Propiedad de la etiqueta body que define el color de los vnculos de la pgina que no han sido
visitados.
a) link b) vlink c) hiperlink d) alink e) clink
2. Etiqueta de HTML, la cual pone un texto en negritas
3. Etiqueta que se utiliza para poner prrafos
a) <BODY> b) <B> c) <P> d) <FONT> e) <A>

Instrucciones: En el laboratorio de cmputo, realiza cada uno de
los siguientes pasos:
Elabora una pgina con las etiquetas mnimas para encabezados,
prrafos y formato bsico.
Se te evaluar utilizando la lista de cotejo que se encuentra al
final de la unidad del mdulo de aprendizaje.

Individual
Prctica no.2

Individual
Ejercicio no. 55
Sesin
27

91

Etiquetas de hipervnculos


Aplica las etiquetas de hipervnculos en la elaboracin de pginas
Web.

Sesin
28
1. Abre el bloc de notas.
2. Escribe como ttulo de la pgina: Encabezados, prrafos y
formato bsico.
3. Dentro del cuerpo del programa:
a) Escribe con la etiqueta H1: Encabezados, prrafos y
formato bsico.
b) Con la etiqueta H2: Encabezados.
c) Sin formato escribe una descripcin e lo que son los
encabezados.
d) Con la etiqueta H2: Prrafos.
e) sin formato escribe una definicin de lo que son los
prrafos.
f) Con etiqueta H2: Formato bsico.
f) Sin formato escribe el siguiente texto: conjunto de
etiquetas que permiten dar formato especial a los textos.
A continuacin escribe las etiquetas y para qu sirven:
<B>Texto en negritas </B><BR>
<I>Texto en cursivas </I><BR>
<U>Texto subrayado </U><BR>
4. Guarda tu documento como Prac2_apellido_grupo.html

92

Los hipervnculos son un elemento esencial para cualquier
pgina Web, ya que al ser pulsados nos lleva a una pgina o
archivo. Veamos para qu nos sirven y como crearlos.
Un hipervnculo puede ser un texto, imagen, etc., sobre el
cual se desee insertar el vnculo, estos elementos deben de
encontrarse entre las etiquetas <a> y </a>.
A travs del atributo href se especifica la pgina a la que est asociado al vnculo, la pgina que
se visualizar cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el vnculo:
Visita www.google.com
Tendrs que escribir:
<a href="http://www.google.com">Visita www.google.com</a>
Tipos de referencias
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href.
Referencia absoluta:
Te lleva a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en
Internet, y en este caso hay que empezar la referencia por http:// , el nombre del dominio y
algunas veces el nombre de la pgina.
Por ejemplo, "http://www.cecytes.edu.mx" tendr el mismo efecto que
"http://www.cecytes.edu.mx/index.htm"
Para insertar el vnculo:
Visita www.cecytes.edu.mx
Habra que escribir:
<a href="http://www.cectres.edu.mx">Visita www.cecytes.edu.mx</a>
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web
es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un
objetivo comn, estando todos ellos dentro de una misma carpeta, conocida como carpeta raz
del sitio.
Por ejemplo, teniendo en cuenta que el documento tema_4.htm se encuentra directamente
dentro de la carpeta raz del sitio, para insertar el vnculo:
Qu es un hipervnculo?

Para qu sirve un hipervnculo?
93

Enlace a Tema 4: Hipervnculos
Habra que escribir:
<a href="/tema_4.htm">Enlace a Tema 4: Hipervnculos</a>
Observa como aparece el smbolo "/" delante del nombre del documento. Esta barra inclinada
indica la carpeta raz del sitio. Si el documento tema_4.htm se encontrara, por ejemplo, dentro
de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raz del sitio, habra que
escribir:
<a href="/tema4/tema_4_1.htm">Enlace a Tema 4: Hipervnculos</a>
La etiqueta <A> cuenta con los siguientes valores que estarn relacionadas al atributo target,
los cuales determinan en qu ventana va a ser abierta la pgina vinculada.
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en
el conjunto de marcos padre.
_self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.
_top: Abre el documento vinculado en la ventana completa del navegador.
Veamos cmo se utilizan estos valores, con el siguiente ejemplo:
Visita www.cecytes.edu.mx en una ventana nueva
Habra que escribir:
<a href="http://www.cecytes.edu.mx" target ="_blank">Visita www.cecytes.edu.mx en una
ventana nueva</a>
Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para
que cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la
pgina desde la que haba salido (que vuelva a nuestro sitio).
Formato de los enlaces
Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la
etiqueta <body>. Estos colores se asignan a travs de los atributos link(vnculo), alink (vnculo
activo), y vlink (vnculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna
vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Por ejemplo, al insertar el siguiente cdigo:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.cecytes.edu.mx" target ="_blank">www.cecytes.edu.mx</a>
...
Mientras no se visite la pgina www.aulaclic.com, el enlace ser de color rojo (#FF0000)
94

Mientras la pgina www.aulaclic.com sea la ltima visitada, el enlace ser de color fucsia
(#FF0099)
Cuando se haya visitado la pgina www.aulaclic.com, el enlace ser de color naranja
(#FF9900)

1. Es el atributo que se utiliza para cambiar el color del enlace activo
a) alink b) body c) link d) blank e) vlink
2. Cul es la etiqueta que se utiliza para insertar hipervnculos en un documento HTML?
a) <blank> b) <alink> c) <a> d) <href> e) <link>
3. Cul es el atributo que especifica la pgina a la cual ser asociado un vnculo?

Individual
Ejercicio no. 56

95

Manipular formularios en una pgina Web (label, checkbox, action, input, type, value)
Aplica los comandos para insertar controles bsicos en la
generacin de formularios.

Sesin
30

Instrucciones: En el laboratorio de cmputo, realiza cada uno de
los siguientes pasos:
Elabora una pgina con las etiquetas mnimas para encabezados,
prrafos y formato bsico.
Individual
Prctica no.3
1. Abre el bloc de notas.
2. Escribe como ttulo de la pgina: Hipervnculos.
3. Dentro del cuerpo del programa:
a) Escribe con la etiqueta H1: Buscadores.
b) Genera los siguientes hipervnculos de texto en el cual
hagas acceso a la pgina Google que nos har llegar a
la pgina www.google.com.mx, otra Yahoo la cual llevar
al sitio www.yahoo.com.mx, estos enlaces tendrn que
estar configurados para que abra los buscadores en
ventanas nuevas de los navegadores.
c) Ahora incluye los hipervnculos con las imgenes que
representan dichos buscadores y realiza los mismos
enlaces pero ahora que se abran en la misma pgina.
4. Guarda tu documento como Prac3_apellido_grupo.html

Sesin
29
96

Un formulario permite que el visitante del sitio Web cargue datos y que estos
sean enviados al servidor; es el medio ideal para registrar comentarios del
visitante sobre el sitio, solicitar productos, sacar turnos etc.
HTML solo tiene el objetivo de crear el formulario; HTML no es el responsable
de registrar los datos, esta actividad recae en un lenguaje que se ejecute en el servidor que
pueden ser (PHP, ASP, ASP.Net, JSP etc.). En este curso solo veremos el trabajo que realiza
HTML, no veremos cmo registrar los datos en el servidor.
Estructura bsica para crear un formulario donde solo se ingrese el nombre.
Cuando creamos un formulario debemos utilizar la etiqueta form, ya que esta identifica el
comienzo y fin del formulario. Dentro de la etiqueta form podemos incluir otros elementos para
crear botones, editores de lnea, cuadros de chequeo, radios de seleccin etc.
Confeccionaremos un formulario para el ingreso de nuestro nombre y un botn para el envo del
dato ingresado al servidor:
<HTML>
<HEAD>
<TITLE>Ejemplo de formulario</TITLE>
</HEAD>
<BODY>
<FORM ACTION="/registrodatos.php" METHOD="post">
Ingrese su nombre:
<INPUT TYPE="text" NAME="nombre" size="20">
<BR>
<INPUT TYPE="submit" VALUE="enviar">
</FORM>
</BODY>
</HTML>
Qu es un formulario?

Para qu se utiliza?

97

Analicemos detenidamente esta estructura de un formulario elemental, lo primero la apertura de
la marca form donde debemos definir dos propiedades (action y method):
<form action="/registrodatos.php" method="post">
La propiedad action se inicializa con el nombre de la pgina que procesar los datos en el
servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacen en la raz de este
sitio una pgina codificada en PHP que recibe los datos del formulario y los imprime en una
nueva pgina (Te recordamos que no veremos cmo programar en el servidor)
Todo los formularios deben llamar a esta pgina: "/registrardatos.php" ms adelante cuando
conozcas un lenguaje de servidor podrs almacenarlos en una base de datos, consultar otros
datos, modificar datos existentes etc.
La segunda propiedad que debemos inicializar es method. Esta propiedad puede almacenar
nicamente dos valores (post o get)
Normalmente un formulario se enva mediante post (los datos se envan con el cuerpo del
formulario) En caso de utilizar get los datos se envan en la cabecera de la peticin de la pgina,
utilizando el mtodo get estamos limitados en la cantidad de datos a enviar, no as con el mtodo
post.
Ahora veamos el cuadro de texto donde se ingresa el nombre:
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
El mensaje "Ingrese su nombre:" es un texto fijo.
El elemento input permite definir un cuadro de texto (editor de lnea) si asignamos a la propiedad
type el valor "text". La propiedad type que indica el tipo de variable a introducir.
Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto.
Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo
mediante PHP)
Por ltimo inicializamos la propiedad size con el valor 20, esto significa que el cuadro de texto se
dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar
por parte del visitante sino la cantidad de caracteres que se pueden visualizar).
Seguidamente:
<input type="submit" value="enviar">
Tambin mediante el elemento input definimos un botn para el envo de datos al servidor.
Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botn para el
envo de datos.
La propiedad value almacena la etiqueta que debe mostrar el botn.
Finalmente cerramos el formulario:
</form>

98

1. El atributo type sirve para.
a) Introducir textos
b) Dar forma a las variables
c) Definir nombre de variables
d) El tipo de variable a introducir
e) Definir valores del formulario

2. Cul es la etiqueta que sirve para crear un formulario?
a) formulario b) form c) method d) value e) forma

3. La propiedad action se utiliza para
a) Cerrar un formulario
b) Iniciar un formulario
c) Introducir datos al formulario
d) Procesar los datos en el servidor
e) enviar datos del formulario


Individual
Ejercicio no. 57

99

Sesin
As quedar el formulario
Nombre

Apellidos

F. Nacimiento

Calle y
Nmero

Cdigo postal

Provincia
Telfono
Sexo
Hombre Mujer Estado
Civil
Comentarios
Personales

enviar los datos

borrar los datos

Individual
Prctica no. 4
En el laboratorio de cmputo realiza la siguiente prctica:
1. Hacer un formulario que contengas la entrada de los siguientes
datos:
Nombre, apellidos, fecha de nacimiento, direccin (calle, nmero
y cdigo postal), telfono, ciudad, estado, sexo, estado civil.
2. Debers incluir los botones enviar datos y borrar datos.
Nombre del archivo Prac4_apellido_grupo.html
Sesin
31
100

Insertar y editar tablas en una pgina Web

Hoy en da, la mayora de las pginas Web se basan en tablas, ya que resultan
de gran utilidad al mejorar notablemente las opciones de diseo, ya que
mantienen ordenada la informacin en los distintos navegadores.
Todos los objetos se alinean por defecto a la izquierda de las pginas Web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes
al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de
realizarse.
Para definir el orden o la estructura de una pgina Web se utilizan tablas con bordes ocultos. La
mayora de las pginas importantes se estructuran utilizando tablas ocultas.
Vamos a realizar una tabla con los bordes visibles
A) Todas las tablas comienzan con <table> y terminan con </table>
Atributos de la etiqueta TABLE
BORDER: sirve para indicar el grosor que tendr la tabla.
WIDTH: este atributo define el porcentaje del ancho de la tabla. Por ejemplo
WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la pgina.
Dentro de las etiquetas <TABLE> </TABLE>, usaremos las siguientes etiquetas dependiendo
del nmero de columnas y renglones que llevar nuestra tabla.
TR: atributo para definir las filas que llevar la tabla
TD: atributo par indicar el nmero de columnas dentro de una fila

Aplicar las etiquetas para la insercin y edicin de tablas en la
elaboracin de pginas Web.

Sesin
32
Qu es un tabla?

Cul es la funcin de una tabla?

101

Por ejemplo construyamos una tabla con el borde visible de
tamao el 100 por 100 del ancho de la pantallla con dos filas y
tres columnas. Para esto utilizamos al principio la etiqueta
<table> y al final </table>. Definimos el borde border="1" y el
ancho witdh="100%". Definimos la primera fila con <tr> y </tr> y
dentro las tres columnas <td> </td>

Instrucciones
<table border="1" witdh="100%">
<TR>
<td>Columna 1</td>
<td>Columna 2</td>
<td>Columna 3</td>
</TR>
<TR>
<td>Columna 1</td>
<td>Columna 2</td>
<td>columna 3</td>
</TR>
</Table>

EJEMPLO
Resultado
Columa 1 Columna 2 Columna 3
Columa 1 Columna 2 Columna 3


Instrucciones: En el laboratorio de cmputo realiza la siguiente
prctica:
Elabora el diseo de una pgina Web en la cual debers incluir
una tabla. El ttulo de la tabla ser Buscadores de Internet, haz
una columna de nombres de buscadores y otra de imgenes de
dichos buscadores. Incluye hipervnculos a las pginas de dichos
buscadores.
Gurdala con el nombre Prac5_apellido_grupo.html

Individual
Prctica no. 5
Sesin
33
102

1. Selecciona cul es la etiqueta que define a un rengln de la tabla
a) border b) td c) width d) table e) tr
2. Etiqueta que sirve para definir una tabla en un documento HTML
3. Cul es la etiqueta para definir una columna en una tabla
a) tr b) td c) tc d) trow Tcol

Manipular imgenes y animaciones en una pgina Web



Individual
Ejercicio no. 58
Aplicar las etiquetas para el manejo de imgenes en una pgina
Web.


Sesin
34
De qu formatos deben ser las imgenes que se incluyan en las pginas web?

Define qu es una imagen animada?
103

La mayora de las pginas Web contienen imgenes, que permiten mejorar su
apariencia, o dotarla de una mayor informacin visual. Para lograr esto es
necesario insertar la etiqueta <IMG>, esta etiqueta no necesita etiqueta de
cierre.
El nombre de la imagen ha de especificarse a travs del atributo src.
Hay dos formatos de imgenes que todos los navegadores modernos reconocen. Son las
imgenes GIF y J PG. Cualquier otro tipo de fichero grfico o de imagen (BMP, PCX, CDR, etc...)
no ser mostrado por el visor, a no ser que disponga de un programa externo que permita su
visualizacin.
La etiqueta <IMG> tiene varios atributos:
src = "imagen". Indica el nombre del fichero grfico a mostrar.
alt = "Texto". Mostrar el texto indicado en el caso de que el navegador utilizado para ver la
pgina no sea capaz de visualizar la imagen.
lowsrc ="imagen". Muestra una segunda imagen "superpuesta" sobre la primera una vez se
carga la pgina. Este parmetro no es reconocido por la totalidad de los navegadores ya que
esta en estudio su aplicacin, as que en la mayora de los casos ser ignorado mostrndose
solo la primera imagen (src).
align = TOP / MIDDLE / BOTTOM. Indica como se alinear el texto que siga a la imagen. TOP
alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con
la parte inferior.
border = tamao. Indica el tamao del "borde" de la imagen. A toda imagen se le asigna un
borde que ser visible cuando la imagen forme parte de un Hyperenlace.
height = tamao. Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamao de la imagen original.
width = tamao. Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el
tamao de la imagen original.



Individual
Ejercicio no. 59
104

1. Es la etiqueta que utilizamos par incluir una imagen en un documento HTML
2. Elige cul de los siguientes atributos no corresponde a la etiqueta de imagen
a) td b) alt c) scr d) align e) lowscr
3. Cules son los formatos de imagen que reconocen los navegadores de Internet?
a) bmp y png b) bmp y gif c) png y jpg d) jpg y gif e) png y gif

Insertar sonido y video en una pgina Web

Aplicar las etiquetas en la insercin de sonido y videos en una
pgina Web.


Sesin
36
De qu formato deben ser los archivos de sonido que se incluyan en las pginas web?

Cul es la etiqueta que sirve para incluir un video en una pgina Web?
prctica:
Elabora una pgina Web en la cual incluyas imgenes de los
formatos .jpg o bine .gif, el tema te lo proporcionar tu maestro.
final de la unidad.

Individual
Prctica no. 6
Sesin
35
105

Aadir una msica de fondo a una pgina tiene pros y contras, si el sonido es
apropiado al contenido de la pgina, puede hacerla ms atractiva en
contrapartida la descarga del archivo de sonido supone una carga que puede
ralentizar la visualizacin de la pgina y adems muchos usuarios suelen estar
escuchando otro tipo de msica cuando navega en Internet, por lo que el
escuchar tambin sonido en cada pgina que visita puede resultar algo molesto.
Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones
el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es
incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala
calidad.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir
sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio.
<BGSOUND> <\BGSOUND>
La etiqueta bgsound incorpora sonidos de fondo en una pgina web, sonidos que se ejecutan
automticamente al cargarse la pgina. Es una etiqueta propietaria de Microsoft, por lo que slo
es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque
generalmente tambin acepta MP3, en versiones actuales del navegador o mediante plugins de
uso general.
Sintaxis y Atributos de la etiqueta <BGSOUND>
src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta
puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas
del servidor Web o una URL completa que localice el fichero en Internet.
loop="l" determina el nmero de veces (l) que se debe ejecutar el fichero de audio. Si le damos
el valor infinite, el fichero se reproducir indefinidamente.
balance="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la
potencia o intensidad con que se oir en cada uno de ellos (derecho e izquierdo). Sus valores
pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre
los dos altavoces.
volume="v" fija el volumen al que se oir el sonido, y sus valores pueden variar entre -10,000
(mnimo) y 0 (mximo). No es soportado por los equipos MAC.

106

Al introducir la siguiente serie de etiquetas para el sonido de
nuestra pgina Web, cada vez que la abramos se reproducir
dicho sonido, y al cerrarla o minimizarla se quitar, para iniciar de
nuevo cuando maximicemos la pgina.

<bgsound src="C:\Documents and Settings\ Mis documentos\Mi msica\Musica del
CEL\_cheketeke.mp3" loop="l" balance="0" volume="-1000"></bgsound>

1. Es la etiqueta HTML que se utiliza para incluir el sonido de fondo de una pgina Web.
a) sound b) track c) sound track d) bgsound e) sonido
2. Cul de los siguientes atributos no pertenecen a la etiqueta de sonido?
a) balance b) border c) scr d) volume e) loop
3. El atributo de la etiqueta de sonido que sirve para que se repita el archivo de audio es:
a) loop b) bgsound c) balance d) volume e) scr


Individual
Ejercicio No. 60
EJEMPLO

107

Implementar servicios de correo en una pgina Web


prctica:

Utiliza la prctica anterior llamada Prac6_apellido_grupo.html y
agrgale sonido de fondo, es necesario que al terminar el sonido
vuelva a empezar

Individual
Prctica no. 7
Aplica el servicio de correo en una pgina Web.

Sesin
37
Qu es un correo?

Qu elementos son necesarios para enviar un correo en HTML?
Sesin
38
108

Para que las personas que visitan tu pgina puedan enviarte mensajes, es
sencillo, ya que puedes poner un enlace. El enlace debe contener la direccin
de correo y estar precedido por la palabra mailto.
<A HREF="mailto:direccion@correo.com">Escribeme</A>
Cuando d clic sobre el enlace se abrir una ventana de "escribir mensaje".
Un ejemplo de esto sera:
<FORM action = "mailto: marysilvia@cecytes.mx" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = control size = 8 >
<P> Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value ="Word" > Manual de Word
<INPUT type = checkbox name = archivo value ="Excel" > Manual de Excel
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 aos
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos
<INPUT type = radio name = edad value = "+40" > Mas de 40 aos
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como nos localizaste :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Usando Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>

109

Nuestro formulario quedara as:

Si rellenas este FORM y pulsas sobre el botn Enviar, (estando conectado a Internet), se
generar un mensaje de correo a mi direccin de correo marysilvia@cecytes.mx. Si pulsas el
botn Borrar se borraran los datos que hayas introducido en el Formulario.

Tu Nombre: No. Control:
Archivos a Enviar:
Manual de Html Manual de Word Manual de Excel
Tu Edad:
Menos de 20 aos
Entre 20 y 40 aos
Mas de 40 aos
Como nos localizaste:
De casualidad

Tus Comentarios:

Enviar

Borrar

110

prctica:

Desarrolla el formulario anterior en un archivo nuevo y gurdalo
con el nombre Prac8_apellido_grupo.html


Individual
Prctica no. 8
Sesin
39
111

1. Cul es el atributo que especifica la pgina a la cual ser asociado un vnculo?
2. Se le conoce as al conjunto de pginas Web
a) Pgina Web b) Lenguaje Web c) WWW d) Sitio Web e) Lugar Web
3. Es un lenguaje el cual se utilizar para estructurar y disear documentos para la Web
4. Son sitios con una finalidad econmica, no son fciles de crear ni mantener y no siempre
siguen sus reglas
5. Etiqueta de HTML, la cual pone un texto en negritas
6. El atributo de la etiqueta de sonido que sirve para que se repita el archivo de audio es:
a) loop b) bgsound c) balance d) volume e) scr
7. Sitios que promueven cursos presenciales y a distancia, informacin a profesores y
estudiantes.
a) Personal b) Poltico c) Educativo d) Ocio e) Comercial
8. Sitios que contienen colecciones de fotos de la familia hasta tratados cientficos de primer
orden
a) Personal b) Buscador c) Comercial d) Educativo e) Ocio
9. Cul es la nica etiqueta que puede ir dentro de la etiqueta HEAD?
a) <BODY> b) <HTML> c) </TITLE> d) e) <TITLE>
10. Cul es el smbolo que permite que una etiqueta se cierre?
a) $ b) | c) % d) / e) \
11. Cul es la sintaxis de las etiquetas HTML?
a) apertura y
cuerpo
b) cuerpo y
cierre
c) apertura y
cierre
d) solo apertura e) solo apertura
y atributos
12. Propiedad de la etiqueta body que define el color de los vnculos de la pgina que no han
sido visitados.
a) link b) vlink c) hiperlink d) alink e) clink
13. Etiqueta que se utiliza para poner prrafos
a) <BODY> b) <B> c) <P> d) <FONT> e) <A>
14. Es el atributo que se utiliza para cambiar el color del enlace activo
a) alink b) body c) link d) blank e) vlink
Nombre: ________________________________________________

Grupo: ________________________ Turno: __________________

Fecha: _________________________________________________

AUTOEVALUACIN
112

15. Cul es la etiqueta que se utiliza para insertar hipervnculos en un documento HTML?
a) <blank> b) <alink> c) <a> d) <href> e) <link>
16. Selecciona cul es la etiqueta que define a un rengln de la tabla
a) border b) td c) width d) table e) tr
17. Etiqueta que sirve para definir una tabla en un documento HTML
18. Cul es la etiqueta para definir una columna en una tabla
a) tr b) td c) tc d) trow tcol
19.- Es el lenguaje de marcas de hipertexto
a) HDTML b) HTML c) TXML d) XHGCL e) LHTM
20. Es la etiqueta que utilizamos para incluir una imagen en un documento HTML

113


Lista de cotejo: tema 2.2.
Nombre del alumno(a): Campo de Aplicacin
Asignatura: Mdulo 2, submdulo 3
Software de Diseo
Evidencia por desempeo: Utilizar etiquetas en una pgina Web
Seguir las instrucciones de las prcticas como se indican.
Subtemas 2.2.3. (Prctica No. 3)

Caractersticas:
Los procedimientos realizados cumplen con:
Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Utiliza hipervnculos de texto que abren otra ventana
c) Utiliza hipervnculos de imagen que abren en la misma ventana
Lista de cotejo: Tema 2.1.
Asignatura: Mdulo 2, submdulo 3
Software de Diseo
Evidencia por desempeo: Utilizar etiquetas en una Pgina Web
Subtemas 2.1.3. (Prctica No. 1) Cumple
Caractersticas
Si No
Los procedimientos realizados, cumplen con:

b) Utiliza correctamente la estructura bsica de una pgina Web

c) Utiliza el ttulo sugerido para la prctica

d) Guarda el archivo generado con el nombre y extensin sugerido

Observaciones:

114

d) Respeta las reglas de sintaxis
e) Guarda el archivo generado con el nombre y extensin sugerido

Observaciones:
Caractersticas:
Cumple
Si No
b) Incluye los datos que proporciona las instrucciones de la prctica
c) Utiliza los botones de enviar y borrar datos

Observaciones:
Caractersticas:
Cumple
Si No
b) Incluye los hipervnculos que proporciona las instrucciones de la prctica
c) Utiliza imgenes sugeridas en las instrucciones de la prctica
Observaciones:
Caractersticas:
Cumple
Si No
c) Utiliza imgenes con el formato sugerido en las instrucciones
Observaciones:
115

Caractersticas:
Cumple
Si No
c) Utiliza la prctica indicada en las instrucciones
d) Incluye archivo de sonido con reinicio

Observaciones:
Caractersticas:
Cumple
Si No
c) Utiliza la prctica indicada en las instrucciones
d) Incluye archivo de sonido con reinicio

Observaciones:

116

Unidad III
Disear Pginas Web
con un software de
aplicacin

117

El alumno:
En la utilizacin de un software de aplicacin de diseo, ser capaz de crear pginas web manipulando las
Describe las partes que conforman el software de diseo, ventana de inicio del dreamweaver.
Describe la funcin de los componentes de la ventana de desarrollo de dreamweaver.
Identificara las vistas del entorno de dreamweaver.
Aplica la configuracin de un sitio web desde una nueva carpeta.
Crea una pgina web: documento en blanco, archivo de diseo y plantilla existente.
Aplica los formatos de texto y prrafo en la creacin de una pgina web.
Aplica diferentes tipos de vnculos en la pgina web (dentro de la pgina, entre pginas web y servidores).
Inserta imgenes dentro de la pgina web.
Inserta y edita tablas en una pgina web.
Aplica marcos en el diseo de una pgina web.
Agrega diversos archivos de audio (mp3, wav, ogg).
Agrega archivos de video en una pgina web.
Inserta animaciones flash.

TEMARIO
3.1 Entorno de la aplicacin de DreamWeaver.
3.1.1 Ventana de inicio del software.
3.1.2 Componentes de la ventana de desarrollo.
3.1.3 Vistas del entorno de dreamweaver (disear, cdigo y dividir).
3.2 Insertar componentes a una pgina web en dreamweaver.
3.2.1 Configuracin del sitio web: nueva carpeta.
3.2.2 Creacin de una pgina web: documento en blanco, archivo de diseo y plantilla existente.
3.2.3 Formato de texto y prrafo.
3.2.4 Establecer vnculos de la pgina web, entre pginas web y servidores.
3.2.5 Insertar imgenes dentro de una pgina web.
3.2.6 Insertar y editar tablas de una pgina web.
3.2.7 Manipular marcos.
3.3 Utilizar elementos multimedia a una pgina web. .
3.3.1 Agregar archivos de audio (WAV, MP3, AVI).
3.3.2 Archivos de video.
3.3.3 Insertar animaciones flash.

118

( ) 1. Es el icono de la aplicacin de dreamweaver que se utiliza para disear pginas
web.

a) b) c) d) e)
( ) 2. Es la barra de la ventana de dreamweaver que contiene botones de diversos tipos
de objetos como imgenes, tablas y capas, en un documento.
a) Estndar b) Propiedades c) Insertar d) Documentos e) Etiquetas
( ) 3. Es el men que sirve para modificar formato de fuente y prrafo.
a) Texto b) Modificar c) Sitio d) Comandos e) Insertar
( ) 4. Es un conjunto de pginas web, creando con ella una carpeta.
a) Archivos b) WWW c) URL d) Sitio Web e) Dominio
( ) 5. men que te servir para agregar un hipervnculo.
a) Sitio b) Sitio c) Modificar d) Archivo e) Insertar
( ) 6. Men que te sirve para administrar el sitio web.
a) Archivo b) Modificar c) Insertar d) Sitio e) Ventana
( ) 7. Es un formato de prrafo en cuanto a la alineacin del texto.
a) Centro b) Negrita c) nfasis d) Tachado e) Arial
( ) 8. Es una zona de una ventana de navegador que puede mostrar un documento
HTML independiente de lo que se muestra en el resto de la ventana.
a) Texto b) Imagen c) Marco d) Tabla e) Hipervnculo
( ) 9. Es el men en donde puedes agregarle un formato a la tabla.
a) Insertar b) Texto c) Formato d) Comandos e) Modificar
( ) 10. Es la vista donde se edita la pgina web, presentando el rea de trabajo como en
un procesador de texto, es decir una hoja en blanco para insertar todos los objetos que
formaran la pgina web.
a) Cdigo b) Dividir c) Hoja d) Diapositiva e) Diseo
La siguiente evaluacin tiene como objetivo conocer lo que
sabes acerca de los temas a revisar en la unidad. Lee
cuidadosamente cada una de las siguientes cuestiones y
escribe en el parntesis de la izquierda las letras de la
respuesta correcta. Al final del mdulo de aprendizaje se
encuentran las respuestas correctas.

119

Secuencia didctica
3.1 ENTORNO DE LA APLICACIN DE DREAMWEAVER.
3.1.1. Ventana de inicio del software (dreamweaver).
3.1.2. Componentes de la ventana de desarrollo.
3.1.3. Vistas del entorno de dreamweaver (disear, cdigo y dividir)

Conocimientos previos: A continuacin se te presentan una serie
de preguntas contstalas lo ms ampliamente, comenta tus
respuestas ante el grupo para compartir sus conocimientos previos
bajo lluvia de ideas dirigidas por el docente.

Identifica los elementos que conforman la ventana de inicio de
software de creacin de pginas web.


Sesin
40

1. Has utilizado el software DreamWeaver

2. Si lo has utilizado, enlista las vistas en la elaboracin
de una pgina web.

120

ilustre diversos diseos de logotipos (al menos 10) de los
productos que conoces. Para realizar este ejercicio, debers traer
revistas, tijeras, pegamento, marcadores, una cartulina o papel
bond. Se te calificar con la lista de cotejo que se encuentra al
final de la unidad.


3.

4.

5.

121

1. Es un conjunto de pginas web, que pueden ser creadas en dreamweaver.
a) Dominio

b) WWW

c) Archivos d) Carpeta e) Sitio Web
2. Es un diseador de pginas web, que te automticamente te genera el cdigo HTML.
a) Word b) PowerPoint c) Excel d) Access e) Dreamweaver

3. Es la extensin que toman los archivos creados en dreamweaver, como formato de pgina
web.
a) .DBF b) .DOC c) .HTM d) .PPT e) . XLS

4. Juan Antonio desea necesita crear un sitio web para una empresa que quiere dar a conocer
su producto pues le han comentado que al anunciarse por internet podra realizar ventas en
todo el mundo, que software podr utilizar Juan para elaborar las pginas web.
a) Word b) PowerPoint

c) Flash d) Paint e) Dreamweaver
5. Es el icono que representa al software para la ceracin de pginas web.
a)

b) c) d)

e)

6. A continuacin se te presentan una serie de pasos para activar el diseador de paginas
web, elige la secuencia que representa el orden correcto.
1. Todos los programas 2. Macromedia 3. Dreamweaver 4. Inicio
a) 1, 2, 4, 3 b) 4, 1, 2, 3 c) 4, 3,1,2 d) 4, 2, 1, 3 e) 2, 3, 4, 1

7. Juan Antonio desea necesita crear un sitio web para una empresa que quiere dar a conocer
su producto pues le han comentado que al anunciarse por internet podra realizar ventas en
todo el mundo, que software podr utilizar Juan para elaborar las pginas web.
a) Word b) PowerPoint

c) Flash d) Paint e) Dreamweaver
8. Es el icono que representa al software para la ceracin de pginas web.
a)

b) c) d)

e)

9. A continuacin se te presentan una serie de pasos para activar el diseador de pginas
web, elige la secuencia que representa el orden correcto.
2. Todos los programas 2. Macromedia 3. Dreamweaver 4. Inicio
a) 1, 2, 4, 3 b) 4, 1, 2, 3 c) 4, 3,1,2 d) 4, 2, 1, 3 e) 2, 3, 4, 1



122

Ventana de inicio del software
Macromedia Dreamweaver es un editor HTML para disear, codificar y
desarrollar sitios, pginas y aplicaciones Web. Dreamweaver te proporciona
tiles herramientas tanto si deseas controlar manualmente el cdigo HTML
como si prefiere trabajar en un entorno de edicin visual. Con Dreamweaver se
puede controlar todo el proceso de creacin de un sitio web: creacin del sitio,
estructurar el rbol de links, disear las pginas y la subida de nuestro trabajo a
nuestro servidor web.
Puede crear y editar imgenes en Macromedia Fireworks o en otra aplicacin de grficos y su
posterior importacin directa a Dreamweaver, o bien aadir objetos Macromedia Flash.
Tambin ofrece un entorno de codificacin con todas las funciones. Incluye herramientas para la
edicin de cdigo (tales como coloreado de cdigo y terminacin automtica de etiquetas) y
material de referencia sobre HTML, aqu la diferencia entre el trabajo que realizaste en la unidad
pasada es que este software te generara automticamente el cdigo del lenguaje HTML, solo
tendrs que utilizar la aplicacin tal como lo realizas en un procesador de textos.

A continuacin se te presenta una imagen de la ventana del
diseador de pginas web, con sus elementos identificados con un
nmero y una tabla en la parte inferior de la imagen en el cual
debers colocar en cada lnea donde indica el nmero, el nombre
del elemento que le corresponda.


Sesin
41

123

1

5

2

6

3

7

4



Sesin
42

1
2
7
6
4
3
3
5
124

La primera vez que inicies Dreamweaver aparecer un cuadro de dilogo que le permitir elegir
un diseo para el espacio de trabajo. Si cambia de idea posteriormente, podr cambiar a otro
espacio de trabajo distinto a travs del cuadro de dilogo Preferencias.

Te aparecer la siguiente pantalla donde seleccionaras el tipo de documento que desees iniciar
en este caso selecciona HTML, te abrir la pantalla principal para comenzar a trabajar.

A continuacin se te presenta una imagen de la ventana del
diseador de pginas web, con sus elementos identificados con
una la letra, en la parte inferior se encuentra una serie de
enunciados con la funcin de lo elementos coloca dentro del
parntesis la letra que corresponda a cada elemento y escribe
sobre la lnea el nombre del elemento que le corresponda.

125

( ) __________________________Muestra el documento actual mientras lo estas creando
y editando.
( ) ____________________________ Contiene botones que proporcionan opciones para
diferentes vistas de la ventana de documento (diseo, cdigo) diversas opciones de visualizacin
y la vista previa de un navegador.
( ) _____________________________ permite ver y cambiar diversas propiedades del
objeto o texto seleccionado, cada tipo de objeto tiene diferentes propiedades.
( ) ____________________________ Muestra la jerarqua de etiquetas que rodean a la
seleccin actual.
( ) _____________________________ Contiene una serie de botones para las operaciones
ms habituales de los mens Archivo y Edicin.
( ) ______________________________ Conjunto de paneles relacionados apilados bajo
un encabezado comn.
( ) __________________________ Contiene botones para la insercin de diversos tipos de
objetos, como imgenes, tablas y capas en un documento.

A
C
B
D
G
E
F
126

1. Mostrara el documento actual mientras lo estas creando y editando.
a) Barra
insertar
b) Ventana de
documento

c) Inspector de
propiedades
d) barra de
herramientas
e) Panel de
archivo
2. Permite ver y cambiar diversas caractersticas del objeto o texto seleccionado, esta cambiara
para cada tipo de objeto que est haciendo referencia.
a) Inspector de
propiedades

b) Barra
insertar
c) Barra de
herramientas
d) Panel de
archivo

e) Selector de
etiquetas

3. Es la barra que contiene botones que proporcionan opciones para diferentes vistas de la
ventana de documento ya sea vista diseo, cdigo o dividir
a) Estndar b) Paneles c) Inspector de
propiedades
d) Insertar e) Documentos



Identifica los elementos que conforman la ventana de inicio de
software de creacin de pginas web.


127

Componentes de la ventana de desarrollo.
Todo programa contiene como ya lo viste una serie de elementos para su manejo, como parte de
estos elementos encontramos los mens, la barra insertar, inspector de propiedades, barra de
herramientas estndar, mismos que utilizaras al crear tu pgina Web.

Para visualizar las barras de
herramientas es necesario
activar el men Ver, opcin
barra de herramientas y con
ello muestras parte de las
principales opciones de estos
elementos.

Los mens que se manejan en dreamweaver son diez, todos ellos necesarios para
manipular la aplicacin en torno a la creacion y diseo de las paginas web.

Sesin
43

EJEMPLO
A continuacin se te presenta un cuadro sinptico con los mens
de Dreamweaver, compltalos indicando las opciones de cada uno
de ellos, es necesario para ello que te encuentres en el centro de
cmputo.
unidad del mdulo de aprendizaje.


Identifica los componentes de la ventana de desarrollo del
software de creacin de pginas Web.


128

Texto
Mens de
dream
weaver
Archivo
Insertar
Modificar
129

Mens
de
dream
weaver
Ventana
Ayuda
130


Instrucciones: En el laboratorio de cmputo realiza lo siguiente:
1. Abre tu sitio web.
2. Abre las tres pginas web que contiene.
3. En la pgina index.htm, escribe el enunciado Mi Primer Sitio
Web, con encabezado 1, fuente Verdana, color con las
caractersticas (RGB) rojo: 0, verde: 0, azul 255; Alinear: centro.
4. En la pgina familia, escribe el enunciado Mi Familia con
encabezado 1, en cada rengln el nombre de los integrantes de tu
familia, iniciando con tu papa, mama, hermanos. El formato para el
texto es encabezado 3; fuente Arial; color (RGB) rojo:128, verde: 0,
azul: 64; alinear: izquierda.
5. En la pgina galera, escribe Mis fotos, con encabezado 1,
selecciona un tipo de letra, color y dale alinear: centro.
La prctica se revisar con la lista de cotejo que se encuentra al
final de la unidad del modulo de aprendizaje
Individual
Prctica no.9

131

1. En este men se encuentran las opciones para presentar el rea del documento que se est
diseando en cdigo, diseo, dividir.
a) Archivo b) Edicin

c) Ver d) Insertar e) Ayuda
2. Julin se encuentra diseando una pgina web en dreamweaver para ello al trabajar con su
archivo necesita darle una vista previa por medio del navegador que tiene instalado en su
equipo de computo, indcale en que men encontrara este comando.
a) Edicin

b) Ver c) Comandos d) Archivo

e) Texto

3. Es el men que te servir para darle formato a la fuente que utilizaras en el diseo de tu
pgina web.
a) Archivo b) Insertar c) Modificar d) Comandos e) Texto

Barra de herramientas
Entre las barras que ya se te comentan esta la barra de herramientas documento que se
presenta a continuacin:

La barra de herramientas estndar al igual que otros programas maneja
los comandos bsicos como son: nuevo, abrir, guardar, guardar todo,
imprimir, recortar, copiar, pegar, deshacer y rehacer.
Barra de herramientas insertar, esta contiene botones para crear e insertar objetos tales como
tablas e imgenes, puedes pasar el puntero del mouse sobre el botn y aparecer una
descripcin del nombre del botn.

Los botones estn organizados en categoras que te aparecen en un men desplegable al
seleccionar la categora se te presentan los botones representantes a cada una de ellas.

Sesin
44

132

A

G

B

H

C

I

D

J

E

K

F

A continuacin se te presentan las barras de herramientas de
documento, estndar indicando cada uno de los elementos que la
conforman anota en el recuadro el nombre del comando que se
est apuntando.
Se te calificar con la lista de cotejo del final de la unidad.

A
B
C D
D
E F
G H I
J
K
133

1.- _______________________ Esta categora presenta los botones de formato de fuente,
negrita, cursiva, cabeceras, prrafo.

2.- ________________________ Esta barra presenta botones para la insercin de un campo de
texto, casilla de verificacin, lista/men, botn de opcin entre otros.

3.- ________________________ Esta barra contienen botones que sirven para insertar tablas,
etiquetas, dibujar capa.

4.- ___________________________ Esta barra permite insertar hipervnculo, imgenes, vnculo
de correo electrnico, fecha.

5.- ____________________________ Esta barra contiene los botones para agregar una regla
vertical, etiquetas frame, table.

A continuacin se te presentan una tabla donde pegaras de la
seccin de recortables la barra de insertar dependiendo de la
categora que se te indica, adems indica sobre la lnea el nombre
de la categora a la que representa. Se te calificar con la lista de
cotejo del final de la unidad.

134

1. Este icono presenta el rea de trabajo del documento en vista de diseo.
a)
b)

c)
d)
e)
2. Este icono de la barra de herramientas documento nos presenta el rea de trabajo en vista
de cdigo, mostrndonos los comandos en HTML.
a)

b)
c)
d)

e)

3. Es la categora de la barra de insertar que presenta los botones para insertar tablas,
etiquetas, dibujar capa:
a) HTML b) Comn c) Diseo d) Formularios e) Texto
4. Luca se encuentra diseando una pgina web, ella necesita agregar una casilla de
verificacin en que categora de la barra insertar tiene que seleccionar para utilizar dicho
elemento.
a) Formulario b) HTML

c) Texto d) Comn e) Diseo
5. Jos Alberto es un magnfico diseador de pginas web, el necesita insertar un hipervnculo
a que categora de la barra de insertar tendr que elegir para que le muestre el icono para
utilizar el hipervnculo.
a) Formulario b) HTML c) Texto d) Comn e) Diseo

Inspector de propiedades.
Como parte de los elementos de la venta de desarrollo encontramos otros componentes que
permiten desarrollar y disear la pgina Web entre ellos encontramos: inspector de propiedades
Permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado
actualmente, como texto o un objeto insertado.



Sesin
45

135

El contenido del inspector de propiedades es distinto en funcin del elemento seleccionado, esto
es si te encuentras editando texto aparecern las propiedades del texto como la imagen
siguiente:

Cuando se inserta un objeto como imagen las propiedades que toma este elemento van de
acuerdo a caractersticas de la imagen en cuestin esta se presentan en la imagen siguiente:

( )

( )

( )

( )

A continuacin se te presentan una serie de partes de las barras
de propiedades de texto y de imagen, donde debers de identificar
dentro del parntesis a que barra se refiere apuntando una T si es
de texto y una I si es propiedad de imagen.
unidad del mdulo de aprendizaje.

136

( )

( )

( )

( )

1. Es una propiedad que aparece en el inspector al utilizar texto, EXCEPTO:
a) Estilo b) Tam

c) Origen d) Formato e) Fuente
2. Es la barra que te presenta directamente algunas caractersticas que se aplican en el texto,
imgenes, tablas.
a) Inspector
de propiedades
b) Estndar c) Documento d) Insertar

e) Paneles

3. El inspector de propiedades aparece en este tipo de vista:
a) Cdigo b) Dividir c) Diseo d) Formato e) Cdigo y
diseo

Vistas del entorno de Dreamweaver (disear, cdigo y dividir).

Sesin
46



Identifica las vistas del entorno de dreamweaver.


137

Para trabajar en dreamweaver es necesario conocer los modos de edicin, los cuales constan de
tres vistas (cdigo, diseo, cdigo y diseo dividir-) en el que se pueden visualizar los
documentos en los que se estn trabajando. Estos se pueden activar de dos maneras:
Por medio del men Desde la barra de herramientas documento
1. Activa el men ver
2. Selecciona opcin: diseo, cdigo,
cdigo y diseo.

1. Identifica la barra de herramientas
documento.
2. Selecciona el botn de la vista que
deseas activar

A continuacin se te presenta una tabla, completa en que consiste
cada una de las vistas.

138

1. Es el tipo de vista donde aparecen los comandos de HTML.
a) Diseo b) Dividir

c) Cdigo d) Completa e) Documento
2. Es el men que se utiliza para mostrar el rea de trabajo en cdigo, diseo, cdigo y diseo.
a) Archivo

b) Ver c) Modificar d) Texto

e) Sitio

3. Es la vista donde aparece el rea de trabajo en dos parte una muestra el cdigo y otra
parte muestra el diseo de la pgina web
a) Cdigo b) Dividir c) Diseo d) Documento e) Texto

Elementos de la barra de programa dentro de la vista cdigo
La vista de diseo, se te presenta como un procesador de textos ah debers de escribir e
insertar cada uno de los elementos que tendr tu pgina web, pero como ya viste dreamweaver
te va produciendo el cdigo en el formato HTML, para ello como parte de la vista de cdigo te
presenta una barra de programacin con botones que sirven para el manejo del cdigo, algunos
de ellos son abrir documentos que te presenta un listado de todos los archivos que tienes
abiertos dentro del sitio web que ests diseando, tambin te aparece un botn para contraer
etiqueta completa, contraer la seleccin, expandir todo en este caso las etiquetas que se
contrajeron.
Esta barra se puede ocultar o mostrar, una vez activada la vista de diseo te vas al men ver >
barra de herramientas > programacin, aparecern los botones al lado izquierdo de forma
vertical.


Sesin
47

139

( )

A Contraer seleccin
( )

B Abrir documentos
( )

C Expandir todo
( )

D Nmeros de lnea
( )

E Contraer etiqueta completa
( )

F Resaltar cdigo no vlido

A continuacin se te presentan los botones de la vista de cdigo
indica en el parntesis el numero de la funcin que le corresponde.

Botones de
programacin
140

1. Es la barra de herramientas que aparece en el lado izquierdo al activar la vista cdigo.
a) Propiedades b) Insertar

c) Programacin d) Documento e) Estndar
2. Icono de la barra de programacin que sirve para resaltar cdigo no vlido.
a)

b)
c)
d)

e)

3. Es el icono de la barra de programacin que se utiliza contraer una etiqueta completa.
a)
b)
c)
d)
e)



141

3.2. INSERTAR COMPONENTES A UNA PGINA WEB EN DREAMWEAVER.

Formato de texto
Una vez creado tu pgina web, se encuentra listo para empezar a disearla, como parte de los
elementos que se tienen que editar se encuentra el texto, en dreamweaver lo puedes escribir
directamente en la ventana del documento o puedes copiar y pegar texto de otro documento o
desde otra aplicacin, solo que al copiarlo desde otra aplicacin no te guardara el formato
original del texto, desde dreamweaver podrs darle un nuevo formato.
Para ello podrs modificarlo desde el men texto o bien directamente desde la barra de
propiedades.
En cuanto al uso del men texto se pueden modificar las caractersticas para el formato del texto
utiliza los comandos: fuente, estilo, tamao, color y ortografa.
Desde la barra de propiedades hay caractersticas que se pueden configurar directamente desde
sus casillas, como es:

Sesin
48

Aplica el editor (dreamweaver) inserta links, imgenes y tablas en
una web.
Aplica los formatos de texto y prrafo en la creacin de una
pgina web.
Aplica diferentes tipos de vnculos en la pgina web (dentro de la
pgina, entre pginas web y servidores).
Inserta imgenes dentro de la pgina web.
Aplica marcos en el diseo de una web.


142

Mediante la aplicacin de Dreamweaver, completa las
caractersticas de los comandos utilizados para el formato de texto.



Fuente

Estilo

143

1. Es el men donde puedes cambiar la fuente.
a) Comandos b) Edicin c) Texto d) Modificar e) Sitio
2. Es una de las caractersticas que aparecen con el comando estilo EXCEPTO:
a) Negrita b) Cursiva c) Subrayada d) Tachado e) Georgia
3. Mara se creando una pgina web, para ello necesita cambiarle el color a una fuente
utilizada, a continuacin se presentan los pasos desordenados para utilizar esta
caracterstica, ordnalas para que Mara pueda cambiarle el color a la fuente.
1. Seleccionar color del texto 2. Men texto 3. Opcin color 4. Seleccionar texto
a) 4, 2, 1, 3 b) 4, 1, 3, 2 c) 4, 2, 3, 1 d) 2, 1, 4, 3 e) 2, 4, 3, 1

Formato de prrafo
Otro formato que se debe de aplicar en el diseo de la pgina web es el prrafo para ello es
necesario identificar los comandos dentro del men texto se refieren y utilizan al prrafo, tambin
desde la barra de propiedades se encuentran algunas formatos de prrafo

Entre el formato del prrafo encontramos que se clasifican en encabezados estas se reconocen
con la etiqueta <h>, con 6 tamaos que van desde 16, donde encabezado 1 es el tamao mas
grande que encabezado 6.
En el formato de prrafo tambin puedes alinear al texto a la izquierda, centro, derecha y
justificar.

Original Con formato Escribe los pasos

Sesin
49

A continuacin se te presenta una tabla con algunos ejemplos
donde aparece en una columna el texto sin formato, en la siguiente
columna al texto se le agreg un formato, escribe en la columna de
la derecha los pasos que se ocupan para que el texto original
tenga el formato aplicado.

144

1. Al indicar el formato de prrafo cual de los siguientes encabezados representa el texto ms
grande.
a) Encabezado 2 b) Encabezado 1

c) Encabezado 6 d) Encabezado 3 e) Encabezado 4
2. Es uno de los formatos de prrafos EXCEPTO:
a) Izquierda

b) Centro c) Justificar d) Tachado

e) Derecha

3. Enlista los pasos para aplicarle el formato de encabezado 4 a un texto.
1. Opcin Formato de prrafo 2. Encabezado 4 3. Men texto 4. Seleccionar texto
a) 3, 2, 4, 1 b) 1, 3, 4, 2 c) 2, 1, 4, 3 d) 4, 3, 1, 2 e) 3, 4, 1, 2



Mediante la aplicacin de Dreamweaver, completa el siguiente
cuadro sinptico con las opciones de las caractersticas para el
formato de prrafo: Formato de prrafo, Alinear

145

Establecer vnculos dentro de una pgina web, entre pginas web y servidores.

Una vez creadas las pginas HTML o web deber establecer las conexiones entre sus
documentos y otros documentos. Tambin puede establecer vnculos con cualquier texto o
imagen de cualquier lugar del mismo documento.
Los vnculos se pueden crear y administrar de varias forma distintas. Algunos diseadores de
sitios Web prefieren crear vnculos con pginas o archivos que todava no existen cuando estn
trabajando, mientras que otros prefieren crear primero todos los archivos y las pginas y aadir
los vnculos ms tarde.
A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el documento
desde el que establece el vnculo y el documento con el que lo establece.
Cada pgina Web tiene una direccin exclusiva, denominada URL (Localizador Uniforme de
Recursos, Uniform Resource Locator).

Sin embargo, cuando se crea un vnculo local (un vnculo de un documento con otro documento
del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino.
En este caso se especifica una ruta relativa desde el documento actual o desde la carpeta raz
del sitio.
En lugar de escribir las rutas, conviene acceder a los vnculos a travs del botn Examinar,
mtodo que asegura la correcta introduccin de la ruta.
Existen tres tipos de rutas de vnculos:
Formato de prrafo
Formato de prrafo
Alinea
r
Sesin
50

146

Rutas absolutas
Proporcionan la URL completa y se utilizan para vincular con pginas Web externas.
No se aconseja poner rutas absolutas para vnculos locales porque si mueve el sitio a otro
dominio se rompern todos los vnculos de las rutas absolutas locales.
Rutas relativas
Son las ms adecuadas para los vnculos locales. Particularmente tiles cuando el documento
actual y el documento con el que se establece el vnculo se encuentran en la misma carpeta. En
una ruta relativa al documento se omite la parte del URL absoluto que coincide en los
documentos actual y vinculado y se indica nicamente la parte de la ruta que difiere.
Rutas relativas a la raz del sitio
Las rutas relativas a la raz del sitio indican la ruta desde la carpeta raz del sitio hasta un
documento. Puede utilizar este tipo de rutas si trabaja con un sitio Web grande que usa varios
servidores o un servidor que alberga varios sitios distintos. Sin embargo, si no est familiarizado
con este tipo de ruta, le resultar ms cmodo mantener las rutas relativas al documento.
Una ruta relativa a la raz del sitio comienza por una barra diagonal, que representa la carpeta
raz del sitio.
Sin embargo, al mover o cambiar el nombre de documentos con vnculos relativos a la raz,
deber actualizar esos vnculos, incluso aunque las rutas de los documentos no hayan cambiado
en su relacin mutua.

Mapa conceptual Vnculos

En el siguiente cuadro elabora un mapa conceptual donde se
identifique los trminos de vnculos, ruta, tipos de ruta de vnculos

147

1. Es el tipo de ruta que representa direcciones externas.
a) Relativa b) Absoluta

c) Subjetiva d) Objetiva e) Referencial
2. Martn se encuentra elaborando un sitio web, para ello necesita hacer una conexin entre
pginas que se encuentran en el mismo sitio y adems pertenecen a la misma carpeta, que
tipo de ruta tiene que establecer.
a) Absoluta

b) Objetiva c) Subjetiva d) Relativa

e) Referencial

3. Jazmn necesita hacer una conexin entre pginas, el hipervnculo que utilizara se refiere
a un URL externo que tipo de ruta debe establecer.
a) Objetiva b) Referencial c) Absoluta d) Relativa e) Subjetiva

Insertar hipervnculos

En dreamweaver se puede establecer los diferentes
hipervnculos, se puede realizar por medio del men Insertar,
desde el inspector de propiedades al insertar texto o una
imagen, o mediante el icono desde de la barra de
insertar en la categora comn, estos servirn de enlace y se
manipulan mediante la vista diseo.
El procedimiento es el siguiente:
1. Seleccionar el objeto o texto que desees ligar a otro archivo, por ejemplo la palabra Galera.
2. Especificar la direccin a donde se va a ligar, buscando la carpeta o unidad donde se
encuentra el archivo que se abrir al acceder al hipervnculo.
3. Especificar el destino en este caso _blank, _parent,
_self, _top
4. Pulsar el botn acepta.


148

Una vez que se acepta el hipervnculo, la palabra o texto seleccionado para hacer liga cambia de
color azul. Al colocar el puntero del mouse sobre el vnculo aparece la ruta de acceso al
documento al que se lig.
Desde el inspector de propiedades una vez seleccionado texto o imagen aparece:

Simplemente hay que explorar la carpeta donde se encontrara el nombre del archivo a ligar, as
mismo se tendr que configurar el destino como en el paso 3.

_blank

_parent

_self

_top

En la siguiente tabla completa en que consiste cada uno de los
parmetros que se configuran en la casilla destino (_blank,
_parent, _self, _top)

A continuacin se te presentan una serie de cuadros de forma
desordenados, indica sobre la lnea el orden correcto para crear un
sitio web.


149

Orden: ________________________

1. Es el parmetro que se utiliza al crear un hipervnculo que carga el documento vinculado en
una nueva ventana sin nombre del navegador.
a) _parent b) _down

c) _blank d) _self e) _top
2. Carga el documento vinculado en la ventana completa del navegador, eliminando de esta
forma todos los marcos.
a) _parent

b) _blank c) _down d) _top

e) _self

3. Indica el orden correcto para insertar un hipervnculo desde el men insertar.
1. Examinar archivo a vincular 2. Comando hipervnculo 3. Men insertar
4. Escribir texto 5. Botn aceptar 6. Seleccionar parmetro
a) 4, 5, 1, 6, 2, 3 b) 3, 2, 4, 1, 6, 5 c) 2, 3, 5, 1, 6, 4 d) 3, 5, 1, 4, 6, 2 e) 3, 1, 5, 4, 6, 2


150

Insertar imgenes dentro de una pgina web.

En Macromedia Dreamweaver, puede trabajar en la vista Diseo o en la vista Cdigo para
insertar imgenes en un documento. Al aadir imgenes a un documento de Dreamweaver,
puede establecer o modificar las propiedades de imagen y ver los cambios directamente en la
ventana de documento.
Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se
utilizan tres formatos de archivo grfico: GIF, JPEG y PNG. Actualmente, GIF y JPEG son los
formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayora de los
navegadores.
Los archivos GIF utilizan un mximo de 256 colores y son idneos para visualizar imgenes con
grandes reas de color homogneo, como barras de navegacin,
botones, iconos, logotipos u otras imgenes con colores y tonos
uniformes.
El formato de archivo JPG es el mejor para imgenes fotogrficas o
de tonos continuos, ya que puede contener millones de colores. A
medida que la calidad de un archivo JPEG aumenta, tambin lo
hace su tamao y el tiempo que tarda en descargarse.

Al insertar una imagen en un documento de Dreamweaver, el programa genera automticamente
una referencia al archivo de imagen en el cdigo HTML. Para asegurarse de que esta referencia
es correcta, el archivo de imagen deber
estar en el sitio actual. Si no lo est,
Dreamweaver le preguntar si desea
copiar el archivo en el sitio.
Coloque el punto de insercin en el
lugar de la ventana del documento
donde quiere que aparezca la imagen.

En la categora Comn de la barra de herramientas Insertar, haga clic en el botn de
Imagen.
En el cuadro de dilogo que aparece elija la imagen que quiera. Al insertarse la imagen
se abre automticamente el Inspector de propiedades, puede cambiar el ancho, el alto, darle
nombre o establecer el texto alternativo de manera que al pasar el ratn por encima de la
imagen aparezca una breve explicacin de la misma.
Para alinear la imagen es muy til el men que se abre al seleccionar la imagen y abrir el men
emergente con el botn derecho del ratn.
En este men emergente Imagen hay mltiples posibilidades. En el Inspector de propiedades de
la imagen hay un apartado especfico Dreamweaver proporciona unas funciones bsicas de
edicin de imgenes que permiten modificar las imgenes sin tener que iniciar una aplicacin
externa de edicin de imgenes como Macromedia Fireworks.

Sesin

Sesin
51

151

1

2

3

4

5

6

7

8

9

A continuacin se te presenta el cuadro de dialogo de la insercin
de imagen explica la funcin que tiene cada uno de los apartados
que se estn indicando con la numeracin del 1 al 9, indcalo en la
tabla que se encuentra abajo del cuadro.


152

Orden ________________________________________

A continuacin se te presentan una serie de cuadros de forma
desordenados, indica sobre la lnea el orden correcto para insertar
una imagen.

153

1. Combinacin de teclas que te sirve para insertar una imagen en dreamweaver.
a) Ctrl. + I b) Ctrol. + Alt +F

c) Alt + I d) Ctrl. + Alt + I e) Ctrl. + M
2. Es el formato de imagen que utiliza un mximo de 256 colores ideal para proyectar logotipos
o imgenes con colores uniformes.
a) PNG

b) JPG c) GIF d) MP3

e) OGG

3. A continuacin se te presenta pasos de forma desordenada para insertar imgenes, indica la
secuencia correcta, considera que el paso 5. Botn aceptar se repite 2 veces.
1. Selecciona el archivo de imagen 2. Escribe texto alternativo 3. Men insertar 4.
Selecciona la carpeta imgenes 5. Botn aceptar 6. Opcin imagen
a) 3, 6, 4, 1, 5, 2, 5 b) 3, 5, 1, 6, 2, 4, 5 c) 4, 5, 1, 3, 2, 6, 5
d) 3, 5, 1, 4, 2, 5, 6 e) 3, 1, 5, 2, 6, 4, 5

Cambio de tamao de una imagen
Si necesitas cambiar el tamao de una imagen, desde dreamweaver lo puedes hacer
visualmente, pero el navegador del usuario deber escalar la
imagen cuando se cargue la pgina, haciendo que aumenten el
tiempo de descargue de la pgina y puede ser que la imagen no
se vea correctamente en el navegador del usuario. Es necesario
para reducir el tiempo de descarga se utilice una aplicacin de
edicin de imgenes.
Desde dreamweaver puede cambiar el tamao seleccionando la
imagen y con los manejadores de tamao que aparecen dar el
tamao que desea. En caso de que quiera respetar la relacin
ancho y alto, presione Mays. mientras arrastra el manejador.
Para mayor precisin especificar el nuevo tamao en los apartados de altura y anchura del
Inspector de propiedades. Para volver al tamao original haga clic en el botn Restablecer
tamao.
Recorte de una imagen
Se puede hacer desde el Inspector de propiedades, botn Recorte o desde Modificar >
Imagen > Recortar
Aparecern manejadores de recorte alrededor de la imagen.
Arrastre los manejadores hasta la zona que quiere visualizar y presione Intro.
En caso de querer deshacer el recorte vaya a Edicin > Deshacer o Ctrl+Z.
Sesin
52



154

Crea una imagen de sustitucin
Una imagen de sustitucin es una imagen que, al visualizarse en un navegador, cambia cuando
el puntero pasa sobre ella. Son conocidas tambin por imgenes Rollover.
Se puede crear una imagen de sustitucin con dos archivos de imgenes: la imagen principal (la
que aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar
el puntero sobre la imagen principal).
Ambas imgenes deben tener el mismo tamao. Si tienen tamaos distintos, Dreamweaver
cambia automticamente el tamao de la segunda imagen para que se ajuste a las propiedades
de la primera.
Site el puntero de insercin donde quiera que aparezca la imagen de sustitucin. En la
categora Comn de la barra herramientas Insertar, haga clic en el botn o bien Insertar >
Objetos de imagen > Imagen de sustitucin

Rellene el cuadro que aparece con el nombre de la
imagen de sustitucin, la ubicacin de imagen
principal y la secundaria. El texto alternativo o la accin a realizar para que aparezca la imagen
de sustitucin.
Para ver el efecto F12 o Archivo > Vista previa en el navegador.

Cambiar tamao a
una imagen

Recortar la imagen

Crear imagen de
sustitucin

A continuacin se te presentan una tabla donde debes indicar los
pasos para cambiar el tamao de la imagen, recorte de la imagen
y crear una imagen de sustitucin.

155

1. Es el icono que se utiliza para recortar una imagen, se encuentra en la barra de propiedades
al seleccionar la imagen.
a) b)

c)
d) e)
2. Jazmn est diseando una pgina web, ella le ha insertado una imagen, se da cuenta que
en la imagen hay mucho espacio que no quiere proyectar indcale los pasos que debe seguir
para recortar la imagen.
1. Aceptar la advertencia 2. Opcin imagen 3. Seleccionar imagen
4. Seleccionar recorte 5. Pulsar Enter 6. Arrastrar los maneadores 7. Men modificar
a) 3, 1, 5, 7, 2,
4, 6

b) 6, 7, 1, 4, 2,
3, 5
c) 3, 2, 5, 1, 4,
6, 7
d) 3, 7, 2, 4, 1,
6, 5

e) 3, 5, 6, 1, 7,
2, 4

3. La maestra Anah le ha pedido a su grupo que agreguen una imagen de sustitucin, para ello
tuvieron que buscar los pasos para realizar dicha accin, ordnale los pasos que deben de
seguir.
1. Botn aceptar 2. India imagen de sustitucin 3. Opcin imagen de sustitucin
4. Indica imagen original 5. Opcin objetos de imagen 6. Men insertar
a) 6, 2, 4, 1, 5, 3 b) 6, 5, 3, 4, 2, 1 c) 6, 4, 1, 3, 2, 5 d) 5, 3, 6, 4, 2, 1 e) 5, 3, 6, 2, 4, 1

Insertar y editar tablas en una pgina web.

Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el
diseo de texto y grficos en una pgina HTML.





Sesin
53

156

Insercin de una tabla y adicin de contenido
En la vista de diseo coloque el punto de insercin en el lugar donde quiere la Tabla e indique
Insertar > Tabla

Otra manera es por medio de la categora Comn de la barra de Insertar haga clic en el
botn.
Aparece el cuadro de dialogo Insertar tabla, en este
deben indicar el numero de filas y columnas que desea
de la tabla, el ancho en pixeles de la tabla y el grosor de
los bordes, el relleno entre celas y el espacio que se le
dar entre cada celda, tambin le indicara un formato
para el encabezado este puede ser: ninguna, izquierda,
superior o ambos.

Los datos se pueden traer de otra tabla elaborada con otra aplicacin (por ejemplo, Microsoft
Excel) y guardados en un formato de texto delimitado (con elementos separados por
tabuladores, comas, dos puntos, puntos y comas u otros delimitadores) se pueden importar a
Dreamweaver.

Archivo > Importar > Datos de tabla
Insertar > Objetos de tabla > Importar datos
de tabla
Aparecer el cuadro de dialogo: en el
indicaras el nombre del archivo donde se
encuentran los datos, indicaras un delimitador
que puede ser: tabulacin, coma, punto y
coma, dos puntos, otro, indicaras el ancho de
la tabla que se puede ajustar a los datos, si
va a llevar relleno de celda, espacio entre
celdas y el grosor del borde.
Esto te ayudara a ganar tiempo en tu edicin de la pgina ya que no abra necesidad de escribir
en dreamweaver si ya tienes escrito el texto en otro documento.

157

1

2

3

4

5

6

7

8

9

de tabla explica la funcin que tiene cada uno de los apartados

158

1. Es el icono que te servir para agregar una tabla.
a)
b)

c)
d)
e)
2. Ariadna necesita agregar una tabla en su pgina web aydala indicando los pasos que debe
de seguir.
1. Indicar nm. filas, columnas 2. Pulsar botn aceptar 3. Men insertar 4. Opcin tabla
5. Indicar grosor de la tabla 6. Indicar ancho de la tabla
a) 4, 1, 3, 5, 6, 2

b) 3, 4, 1, 6, 5, 2 c) 3, 1, 4, 5, 6 , 2 d) 4, 3, 1, 5, 6, 2

e) 4, 5, 1, 6, 3, 2

3. Es la combinacin de tecla que te sirve para activar el cuadro de dialogo para insertar tabla.
a) Ctrl. + T b) Alt. + T c) Ctrl. + A d) Ctrl. + Alt. + T e) Alt. + M

Seleccionar tabla, filas, columnas y celdas
Hay ocasiones que se necesita hacer una modificacin en la tabla que se est trabajando para
ello se puede seleccionar una tabla, filas, columnas y celdas.

Seleccionar una tabla
Hay varios procedimientos como Modificar > Tabla > Seleccionar tabla, hacer clic en la esquina
superior izquierda de la tabla. Cuando una celda est seleccionada podemos seleccionar toda la
tabla en Edicin > Seleccionar todo

Seleccionar filas y columnas
Situar el puntero en el borde izquierdo de una fila o en el borde superior de la columna. Cuando
el cursor se convierta en una flecha de seleccin arrastre para seleccionar lo que quiera.

Seleccionar celdas
Hay varios procedimientos como presionar la tecla Control y hacer clic en la celda deseada



Sesin
54

159

Al seleccionar lo que nos interesa (tabla, fila, columna o celda) aparece el Inspector de
propiedades donde podemos ver y modificar las propiedades, aparecer

Formato a las tablas
En dreamweaver tambin se puede aplicar un formato a las tablas para hacerlo ver ms
profesional, es decir dndole un toque. Seleccione la tabla que le interese, Comandos >
Formatear tabla. Aparece el cuadro de dialogo Formatear tabla personalizando las opciones
como desee.

A continuacin se te presentan una tabla donde debes indicar para
que se utiliza el icono que aparece en el lado izquierdo, en cuanto
a la seleccin de tabla, celda, filas y columnas.


160

1

2

3

4

5

6

7

de imagen explica la funcin que tiene cada uno de los apartados


161

1. Es el icono que te presenta el inspector de propiedades cuando seleccionas una celda de la
tabla ya sea para aplicarle algn color de celda, tipo de letra, entre otros formatos.
a)
b)

c) d)
e)
2. Es el men donde puedes aplicarle un formato a la tabla, entre ellos se encuentra simple1,
AltRows:Blue&Yellow, DblRows:Cyan.
a) Modificar

b) Insertar c) Texto d) Comandos

e) Sitio

3. Maritza agreg una tabla en su pgina web y necesita darle un formato a la tabla indcale
los pasos que debe de seguir si el formato que desea aplicarle es simple 3.
1. Seleccionar simple3 2. Pulsar botn aceptar 3. Seleccionar tabla
4. Opcin formatear tabla 5. Men comandos

a) 5, 4, 3, 1, 2 b) 3, 4, 5, 1, 2 c) 3, 1, 2, 5, 4 d) 3, 5, 4, 1, 2 e) 4, 5, 3, 1, 2

Insertar filas y
columnas

Eliminar filas y
columnas

Combinar celdas

Dividir celdas

A continuacin investiga los pasos para insertar, eliminar,
combinar y dividir celda, filas y columnas



162

Manipular marcos.

Un marco es una zona de una ventana de navegador que puede mostrar un documento HTML
independiente de lo que se muestra en el resto de la ventana.
Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de
marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos.
El archivo de conjunto de marcos de un sitio suele llamarse index.html. As, cuando el visitante
no especifica ningn nombre de archivo, este archivo se muestra de forma predeterminada.
En realidad los marcos son contenedores que albergan documentos y que se combinan para
mostrar los documentos en una sola pgina. El uso ms comn de los marcos es la navegacin.
Sesin
56

3. En la pgina index.htm, inserta una tabla de 2 X 2 (columna,
fila), ancho de la tabla 600 pixeles, grosor del borde 3, relleno de
celda 1, espacio entre celdas 5, encabezado Ninguna. Agrgale el
texto, tu nombre en una celda, tu grupo, especialidad y escuela en
el resto de las celdas.
4. En la pgina familia, inserta una tabla de 2 X 5 (columna, fila),
ancho de la tabla 850 pixeles, grosor del borde 2, relleno de celda
1, espacio entre celdas 3, encabezado: Superior. En la cabecera
indcale parentesco, nombre. Llena la tabla con los datos de tu
familia, en el parentesco apunta padre, madre, hermano, hermana
segn sea el caso y en la columna nombre apunta su nombre.
Agrgale formato de tabla: Simple3.
5. En la pgina galera.htm, inserta una tabla de 3 X 3, agrgale
una foto de cada uno de los integrantes de tu familia, considera
tambin una foto donde se encuentre toda la familia junta. Puedes
repetir las fotos de los integrantes para completar los 9 cuadros.
Lista de cotejo al final de la unidad.
Individual
Prctica no.10

Sesin
55

163

Sin embargo, el diseo con marcos puede resultar complicado y, en ocasiones, las pginas Web
que no los incluyen logran prcticamente los mismos objetivos.

Creacin de Marcos
La forma ms sencilla es seleccionar entre varios conjuntos
de marcos predefinidos.
Solo se puede insertar un conjunto de marcos predefinido en
la vista Diseo de la ventana de documento.
Insertar > HTML > Marcos
o bien en la categora Diseo de la barra de herramientas de
Insertar haga clic en el botn Marcos y elija la distribucin
que ms le interese

Los iconos proporcionan una representacin visual. El rea
azul de un icono de conjunto de marcos representa el
documento actual y las reas blancas representan marcos
que mostrarn otros documentos.

Para borrar un marco slo tenemos que mover el borde fuera de nuestro entorno de trabajo.
Para obtener una vista previa de un conjunto de marcos en un navegador, deber guardar antes
el archivo de conjunto de marcos y todos los documentos que se mostrarn en los marcos.
Puede guardar cada archivo de conjunto de marcos y documento con marcos individualmente, o
guardar al mismo tiempo el archivo de conjunto de marcos y todos los documentos que aparecen
en los marcos.

De la seccin de recortables ordena los cuadros para agregar
una macro en el siguiente cuadro.

Individual
Ejercicio no. 100

164

1. Para agregar un marco es necesario activar este men:
a) Modificar b) Comandos

c) Texto d) Insertar e) Archivo
2. Es una zona de una ventana de navegador que puede mostrar un documento HTML
independiente de lo que se muestra en el resto de la ventana.
a) Tabla

b) Hipervnculo c) Marco d) Imagen

e) Formulario

3. Ordena los pasos para agregar una macro:
1. Posicin de la macro 2. HTML 3. Indicar atributo 4. Men insertar 5. Macro
a) 4, 2, 5, 1, 3 b) 2, 4, 5, 3, 1 c) 4, 5, 2, 3, 1 d) 4, 3, 5, 2, 1 e) 5, 4, 2, 1, 3


Individual
Ejercicio no. 101

En equipo de tres integrantes de manera extra-clase, disea un
Sitio Web, se pondrn de acuerdo con el profesor para representar
el sitio de algn comercio, institucin u organizacin de los
alrededores. El sitio contendr al menos 5 pginas, incluirs la
pgina index, misin, visin, servicio o productos que ofrece,
fotografas en una pgina de galera, le incluirs el logotipo de la
empresa mismo que puedes disear en Corel Draw, organiza la
informacin en tablas, incluye colores de acuerdo a la teora del
color, las pginas deben de estar vinculadas con el index y entre
s, procura realizar un mapa de navegacin del sitio.
Se te calificar con la lista de cotejo del final de la unidad.

Grupo
Ejercicio no. 102


165

Secuencia didctica
3.3. UTILIZAR ELEMENTOS MULTIMEDIA A UNA PGINA WEB.
3.3.1. Agregar archivos de audio (WAV, MP3, OGG).
3.3.3. Insertar animaciones flash.


Cuntos formatos de audio conoces?
Cmo se insertan videos en dreamweaver?
Se pueden insertar pelculas de flash en dreamweaver?
Escribe tus comentarios:

Comenta ante el grupo tus comentarios.

Sesin
57

Agrega diversos archivos de audio (mp3, wav, ogg).


166

Agregar archivos de audio
En dreamweaver se puede incluir sonido en
una pgina web, aunque no es muy habitual
ya que algunos usuarios acostumbran a escuchar su tipo de
msica al estar navegando, por lo que el escuchar tambin
sonido en cada pgina que se visita puede resultar algo
molesto.
Pero a pesar de ello, el incluir un sonido agradable, apropiado
al contenido de la pgina, puede hacerla ms atractiva, esto
es si se selecciona la msica mas apropiada para el sitio.
Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o
desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina
puedan desactivarlo.
Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y
en algunas ocasiones el MIDI, aunque existen otros formatos diferentes como el OGG que
tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho
espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda,
opcin Plug-in.

En el siguiente recuadro elabora un mapa conceptual donde
expliques el tema de insercin de audio en una pgina web y los
tipos de formato que maneja.
Individual
Ejercicio no. 103

167

1. Es el tipo de audio que se puede agregar en dreamweaver EXCEPTO:
a) MP3 b) WAV

c) MIDI d) OGG e) BMP
2. Orden los pasos para agregar un archivo de audio en dreamweaver.
1. Opcin Media 2. Men insertar 3. Pulsar aceptar 4. Seleccionar archivo 5. Plug-in
a) 2, 4, 5, 1, 3

b) 2, 1, 5, 4, 3 c) 1, 5, 2, 4, 3 d) 5, 1, 2, 4, 3

e) 2, 5, 1, 4, 3

Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente
una vez. Estos valores no pueden cambiarse a travs del inspector de propiedades, pero s a
travs del cdigo.
Por ejemplo, al insertar un archivo de audo el cdigo aparer
como <embed src="varios/audio.MID"></embed>. Pero
para que no se reproduzca automticamente se le aade
autostart="false", y para que se reproduzca continuamente
se le aade loop="true". La lnea de cdigo del archivo de
audio quedar del siguiente modo:
<embed src="varios/audio.MID" autostart="false" loop="true"></embed>
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los
controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea.
Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio,
puedes escribir este cdigo directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despues de la etiqueta </title> Con el parmetro loop puedes decidir cuantas veces
quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
Sesin
58


Individual
Ejercicio no. 104

EJEMPLO
168

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son
insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen
como la siguiente:

embed

src

autostar

loop

bgsound

Del siguiente cuadro explica la funcin de cada uno de los
comandos y parmetros que se utilizan al insertar un archivo de
sonido mediante el cdigo de HTML, esto complementa la accin
en dreamweaver.
Individual
Ejercicio no. 105


Individual
Ejercicio no. 106

169

1. Este comando te sirve para indicar el nmero de veces que deseas que se reproduzca el
archivo de audio.
a) scr b) loop

c) embed d) bgsound e) autostar
2. Este parmetro se inscribe al agregar un archivo de audio para que no se reproduzca
automticamente..
a) autostar=true

b) loop=-1 c) autostar=false d) loop=true

e) embed=false

3. Es la imagen que aparece al hacer referencia en dreamweaver que se trata de un archivo
de audio.
a) b) c) d) e)


Al igual que insertar archivos de audio, se pueden cargar archivos de video. En ocasiones
puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los
vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para
descargarse.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda,
opcin Plug-in.
El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo
que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen
solamente una vez. Estos valores pueden cambiarse a travs del cdigo, del mismo modo que
en el caso de los archivos de audio, aadiendo autostart="false" y loop="true".
Sesin
59

Agrega archivos de video en una pgina web.


170

Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga
instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del
inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que
ha de reproducirse.
En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en
el campo URL plg una pgina en la que pueda encontrarlo.

A continuacin se te presenta el cuadro de insercin de audio y
video explica cada una de las partes que se te indica, anotando la
funcin en la tabla que se encuentra abajo del cuadro.
Individual
Ejercicio no. 107

171

1

2

3

4

5

1. Es un tipo de archivo de video que puede reproducir al disear una pgina web.
a) OGG b) WAV c) MIDI d) MP3 e) MPEG
2. Ren necesita saber cules son los pasos para agregar un archivo de video ya que necesita
reproducir una entrevista que realizo y mostrarla en su pgina web, indcale cuales son los
pasos correctos que debe seguir.
1. Plug-in 2. Seleccionar el archivo 3. Men insertar 4. Botn aceptar
5. Comando media.
a) 2, 3, 1, 5, 4 b) 3, 5, 1, 2, 4 c) 2, 5, 3, 1, 4 d) 3, 1, 5, 2, 4 e) 5, 1, 3, 2, 4
3. Es la barra de insertar donde puedes encontrar el icono para agregar un Plug-in a tu
pgina web.
a) Diseo b) Comn c) Formularios d) Texto e) HTML

Individual
Ejercicio no.108

Sesin
60

172

3.3.3. Insertar animaciones flash

Previamente selecciona dos archivos de audio uno MP3 y uno
MIDI, y un archivo de video en formato MPEG, de no mas de 2
minutos.
3. En la pgina index.html agrgale un archivo de audio en formato
MP3.
4. En la pgina familia.html agrega el archivo de audio en formato
MIDI.
5. en la pgina galera.html, inserta el archivo de video.
Muestra tu pgina desde el navegador de internet a tu maestro.
Se utilizar la lista de cotejo del final de la unidad.
Individual
Prctica no.11
11

Sesin
61

Inserta animaciones flash.


173

Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la
extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de
presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de
animacin.
Estas pelculas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el
usuario tenga instalado el plug-in para poder ser visualizadas.
Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Meda, opcin
Flash, o pulsando Ctrl+Alt+F.
Tambin pueden insertarse pulsando sobre la opcin Flash que aparece en la pestaa Comn
del panel Insertar, botn Media.
El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el
texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualizacin de la
pelcula.

La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar
desde el principio.
La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada
ms cargarse la pgina comenzar a reproducirse la pelcula Flash.
Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula.
Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn
comportamiento.

A continuacin se te presenta el cuadro de insercin de audio y
video explica cada una de las partes que se te indica, anotando la
funcin en el tabla que se encuentra abajo del cuadro.
Individual
Ejercicio no.109

174

1 2

3 4

5 6

7

1. Es el botn que utilizas para agregar un archivo de video desde flash.
a)
b)
c) d) e)
2. Es la combinacin de teclas que utilizas para insertar una pelcula de flash.
a) Ctrl. + F b) Ctrl. + Alt.+ P c) Ctrl.+ Alt. + F d) Ctrl. + A e) Ctrl. + Alt
3. Ordena los pasos que son necesarios para agregar una pelcula que hayas realizado
en flash.
1. Botn aceptar 2. Indicar la ruta del vnculo 3. Opcin Flash 4. Men
insertar 5. Comando media
a) 4, 2, 3, 5, 1 b) 4, 5, 3, 2, 1 c) 4, 3, 2, 5, 1 d) 3, 4, 1, 5, 2 e) 4, 5, 2, 1, 3

Individual
Ejercicio no. 110

175

3. En el archivo index.html agrgale un archivo de flash que hayas
realizado en el laboratorio de computo del sub-modulo 2.
4. Agrgale una pgina web, gurdala con el nombre de
deportes.html, inserta una tabla de 5 X 3, haz una lista de 5
deportes, haz el vnculo del index.html hacia deportes.html y
viceversa, agrega al menos 10 imgenes representando los
deportes mencionados.
5. Agrega sobre deportes.html, la cancin representativa del
mundial 2010, previamente debers de conseguirla en formato
mp3, indica que se reproduzca automticamente de forma
continua.
6. En galeria.html, inserta una pelcula flash, con las imgenes de
tu familia.

Individual
Prctica no.12

Sesin
62

176


Previamente tomaras fotografas de las instalaciones de tu plantel.
1. Crea un nuevo sitio web, con el nombre de mi plantel
2. Crea 3 pginas web, nmbralas index.html, especialidades.html,
instalaciones.html
3. En la pgina index.html agrega el logotipo de CECyTES, e indica
en hipervnculo para acceder a las pginas especialidades e
instalaciones, tomaras la fotografa de la entrada del plantel y la
agregaras en el index, dale color al fondo y el color de la letra que
est relacionada con los colores del plantel, investiga los
antecedentes del plantel y lo agregaras en index.
4. En la pgina de especialidades, agrega hipervnculos con las
otras dos pginas, agrega una resea de las especialidades de tu
plantel, adems toma fotografas alusivas a las especialidades,
puede ser de tus compaeros realizando prcticas en los
laboratorios, agrega un archivo de audio.
5. En la pgina instalaciones, agrega fotografas que representen
las instalaciones de tu plantel, agrega hipervnculo para las pginas
index y especialidades.
Nota: puedes complementar tu sitio, agregando ms informacin
como lista de docentes, administrativos, direccin del plantel.
Individual
Prctica no.13

Sesin
63

177

En el siguiente cuadro elabora un cuadro sinptico donde
desarrolles el tema de insercin de archivos multimedia (audio,
video y pelcula flash) destacando los pasos que se ocupan para
insertarlos, en qu consiste cada uno de ellos y porque es
importante utilizarlos en una pgina web. Lista de cotejo al final de
la unidad.

Individual
Ejercicio no. 111

178

MATERIAL RECORTABLE
179

180

MATERIAL RECORTABLE
181

1. Es un conjunto de pginas web, que pueden ser creadas en dreamweaver.
a) Dominio

b) WWW

c) Archivos d) Carpeta e) Sitio Web
2. Es un diseador de pginas web, que automticamente te genera el cdigo HTML.
a) Word b) PowerPoint c) Excel d) Access e) Dreamweaver

3. Es la extensin que toman los archivos creados en dreamweaver, como formato de pgina
web.
a) .DBF b) .DOC c) .HTM d) .PPT e) . XLS

4. Mostrara el documento actual mientras lo estas creando y editando.
a) Barra
insertar
b) Ventana de
documento

c) Inspector de
propiedades
d) barra de
herramientas
e) Panel de
archivo
5. Permite ver y cambiar diversas caractersticas del objeto o texto seleccionado, esta cambiara
para cada tipo de objeto que est haciendo referencia.
a) Inspector de
propiedades

b) Barra
insertar
c) Barra de
herramientas
d) Panel de
archivo

e) Selector de
etiquetas

6. Es el men que te servir para darle formato a la fuente que utilizaras en el diseo de tu
pgina web.
a) Archivo b) Insertar c) Modificar d) Comandos e) Texto
7. Este icono presenta el rea de trabajo del documento en vista de diseo.
a)
b)

c)
d)
e)
8. Es la combinacin de tecla que te sirve para activar el cuadro de dialogo para insertar tabla.
a) Ctrl. + T b) Alt. + T c) Ctrl. + A d) Ctrl. + Alt. + T e) Alt. + M

9. El inspector de propiedades aparece en este tipo de vista:
a) Cdigo b) Dividir c) Diseo d) Formato e) Cdigo y
diseo
10. Es el tipo de vista donde aparecen los comandos de HTML.
a) Diseo b) Dividir

c) Cdigo d) Completa e) Documento

Nombre: ________________________________________________

Grupo: ________________________ Turno: __________________

Fecha: _________________________________________________

AUTOEVALUACIN
182

11. Es la vista donde aparece el rea de trabajo en dos parte una muestra el cdigo y otra
parte muestra el diseo de la pgina web
a) Cdigo b) Dividir c) Diseo d) Documento e) Texto

12. Es la barra de herramientas que aparece en el lado izquierdo al activar la vista cdigo.
a) Propiedades b) Insertar

c) Programacin d) Documento e) Estndar
13. A continuacin se te presenta una serie de pasos para crear un sitio web, ordena los pasos
1. Botn nuevo 2. Men sitio 3. Seleccionar sitio 4. Administrar sitio 5.
Definir el sitio
a) 1, 5, 2, 3, 4

b) 2, 4, 1, 3, 5 c) 2, 3, 5, 1, 4 d) 2, 5, 2, 1, 3

e) 4, 1, 5, 2, 3

14. Es el men donde puedes activar el comando para crear una nueva pgina web.
a) Insertar b) Texto

c) Modificar d) Sitio e) Archivo
15. Es el nombre que se recomienda se le asigne a la primera pgina web del sitio.
a) Uno b) Primera

c) Principal d) Pagina1 e) Index
16. Es una de las caractersticas que aparecen con el comando estilo EXCEPTO:
a) Negrita

b) Cursiva c) Subrayada d) Tachado

e) Georgia

17. Al indicar el formato de prrafo cual de los siguientes encabezados representa el texto ms
grande.
a) Encabezado 2 b) Encabezado 1

c) Encabezado 6 d) Encabezado 3 e) Encabezado 4
18. Es el parmetro que se utiliza al crear un hipervnculo que carga el documento vinculado en
una nueva ventana sin nombre del navegador.
a) _parent b) _down

c) _blank d) _self e) _top
19. Es el icono que se utiliza para recortar una imagen, se encuentra en la barra de propiedades
al seleccionar la imagen.
a) b)

c)
d) e)
20. Es un tipo de archivo de video que puede reproducir al disear una pgina web.
a) OGG b) WAV c) MIDI d) MP3 e) MPEG

183

Evaluacin del conocimiento. Para conocer tu calificacin de cada evaluacin, realiza lo
siguiente:

1. Compara tus respuestas con las claves de respuestas que se te proporcionan al final del
cuadernillo

2. Cuenta las respuestas correctas

3. Multiplica el nmero de aciertos por 10

4. Divide el resultado entre el nmero total de preguntas en cada evaluacin y obtendrs tu
calificacin.

Interpreta tu resultado y verifica tu aprendizaje

Tu esfuerzo es insuficiente, necesitas repasar varios contenidos y dedicar ms tiempo para su
estudio, para ello revisa los temas correspondientes a las preguntas que contestaste
errneamente y repsalos.

Tu esfuerzo slo ha sido suficiente, no tienes una preparacin adecuada, por lo que tienes que
estudiar ms los temas relacionados con las preguntas que no pudiste contestar correctamente.

Aunque ests preparado, todava puedes mejorar tu calificacin revisando los errores cometidos
y reforzando los contenidos que no manejaste en la evaluacin.

Te encuentras muy preparado, pero no alcanzaste la mxima calificacin y ello te ser muy fcil
si revisas los mnimos errores que cometiste y tratas de superarlos.

Felicidades! Tu resultado es excelente, lo que significa que tu proceso de aprendizaje se
desarrolla de manera ptima.

184


Entorno de la
aplicacin de
dreamweaver

Evidencia por desempeo: Disear pginas web con un software de
aplicacin
Caractersticas
Cumple
Subtema 3.1.1
SI NO
Ventana de inicio de software
e) Entrega puntual del trabajo.

f) Presenta al menos 10 imgenes para representar los logotipos de los
productos.

g) Existe calidad en el trabajo.

h) Presenta coherencia el trabajo que le fue asignado.

Observaciones:

Subtema 3.1.2
SI NO
Componentes de la ventana de desarrollo
f) Entrega puntual del trabajo.

g) Contiene todos los trminos del cuadro sinptico

h) Cumple reglas ortogrficas, de redaccin y sintaxis.

i) Existe calidad en el trabajo.

j) Presenta coherencia el trabajo que le fue asignado.

Observaciones:

Caractersticas
Cumple
Subtema 3.1.2
SI NO
Componentes de la ventana de desarrollo
185


f) Indico correctamente cada barra de recortables

g) Existe calidad en la presentacin trabajo.

Observaciones:
Subtema 3.1.3
SI NO
Vistas del entorno de Dreamweaver (disear, cdigo y dividir)
f) Entrega puntual del trabajo.

g) Presenta la totalidad de los paneles a investigar.

h) Cumple reglas ortogrficas, de redaccin y sintaxis.

i) Existe calidad en el trabajo.

j) Presenta coherencia el trabajo que le fue asignado.

Observaciones:
Subtema 3.1.3
SI NO
Vistas del entorno de Dreamweaver (disear, cdigo y dividir)

f) Tiene buena redaccin el ensayo encargado

g) Cumple reglas ortogrficas, de redaccin y sintaxis.

h) Existe calidad en la presentacin trabajo.

i) Entrego en el ensayo impreso con la extensin mnimo de dos cuartillas

Observaciones:
Caractersticas
Cumple
Subtema 3.2.
SI NO
Insertar componentes a una pgina web
b) Entrego el diseo completo de un sitio web


186

h) Todos los integrantes del equipo participaron en la realizacin del trabajo
Observaciones:
Subtema 3.3.
SI NO
Utilizar elementos multimedia en una pgina web
b) Cumple con los elementos en el cuadro sinptico.

c) incluye los temas de insercin de archivos multimedia, explicando en qu
consiste cada uno de ellos.



Observaciones:

Listas de cotejo para prcticas

Lista de cotejo: tema 3.2. - 3.3.
Diseador de Pginas
Web
Evidencia por desempeo: Disear pginas web con un software de
aplicacin.
Subtemas 3.2.1 (Prctica no. 1)

Caractersticas:
Cumple
Si No
f) Crea y nombra el sitio web
g) Crea tres pginas web
h) Guarda los archivos con los nombres solicitados
187

i) Ejecuta el orden de los pasos de manera correcta
j) Desarrolla los temas encomendados en cada archivo
k) Present responsabilidad y orden

Observaciones:

Caractersticas:
Cumple
Si No
a) Localiza el sitio web
b) Accede a las pginas del sitio
c) Agrega la informacin recomendada en la pagina index, con el formato
solicitado

d) Agrega la informacin recomendada en la pgina familia, con el formato de
texto solicitado

e) Agrega la informacin en la pgina galera con el formato de texto solicitado
f) Present responsabilidad y orden

Observaciones:

Caractersticas:
Cumple
Si No
c) Inserta los hipervnculos solicitados para cada pgina bajo el parmetro
solicitado.

d) Present responsabilidad y orden

Observaciones:
Subtemas 3.2.5 - 3.2.6. (Prctica no. 4)

188

Caractersticas:
Cumple
Si No
c) Agrega las tablas solicitadas.
d) Agrega las imgenes solicitadas
e) Present responsabilidad y orden

Observaciones:

Caractersticas:
Cumple
Si No
c) Agrega los archivos de audio solicitados en los formatos.
d) Agrega un archivo de video
e) Present responsabilidad y orden

Observaciones:
Subtemas 3.3.3. (Prctica no. 6)

Caractersticas:
Cumple
Si No
c) Agrega el archivo de flash
d) Crea una pgina web
e) Agrega la tabla solicitada
f) Agrega imgenes
189

g) Crea el hipervnculo solicitado
h) Present responsabilidad y orden

Observaciones:
Subtemas 3.3.3. (Prctica no. 7)

Caractersticas:
Cumple
Si No
a) Crea el sitio web
b) Crea tres pginas web
c) Cada pgina tiene la informacin solicitada
d) Agrega la tabla solicitada
e) Crea hipervnculos entre las pginas
f) Agrega imgenes
g) Crea el hipervnculo solicitado
h) Present responsabilidad y orden

Observaciones:

190

Unidad IV

Publicar pginas
Web en servidores
de Internet
191


En la utilizacin de un software de aplicacin de diseo, ser capaz de crear pginas web manipulando las
Identifica los conceptos de servidores local, remoto y publicar
Identifica los servidores disponibles para publicar una pgina Web
Identifica dominios a utilizar en la publicacin de una pgina Web
Aplica el procedimiento para la publicacin de la pgina Web en un servidor
Aplicar el procedimiento para la publicacin de una pgina Web en un servidor gratuito

TEMARIO

4.1. Define los conceptos bsicos de la publicacin
4.1.1. Concepto de servidor local, servidor remoto y publicar
4.1.2. Identificar los servidores de Internet disponibles para el alojamiento de pginas Web
4.2. Almacenar pginas web en un servidor
4.2.1. Verificacin de dominios
4.2.2. Publicar una pgina en un servidor dedicado
4.2.3. Publicar una pgina en un servidor gratuito

192

4.1 DEFINE LOS CONCEPTOS BSICOS DE PUBLICACIN
4.1.1. Concepto de servidor local, servidor remoto y publicar
4.1.2. Identificar los servidores de internet disponibles para el alojamiento de pginas
web (gratuito y comercial).


Servidor
Un servidor es un "gran ordenador" que est siempre en online, donde se aloja la
informacin de las pginas Web.

Conceptos
Tipos de servidores
Servidores gratuitos:
Estos servidores son gratis, por lo que te ponen publicidad de otras empresas en la Web y
carecen de recursos necesarios para la programacin Web.

Identifica los conceptos de servidores local, remoto y publicar

Sesin
64
Escribe sobre la lnea la definicin de servidor

Qu diferencia existe entre un servidor local y uno remoto ?

193

Diferencias de servidores privados de pago:

Muchas empresas se dedican a la gestin de esta clase de servidores por lo que ya vienen
totalmente provistos de todo lo necesario para alojar en ellos una Web profesional.

Velocidad del server:
Lo principal de un servidor es que funcione siempre bien y rpido. Depende el ancho de banda y
de las visitas que visitan la web, el servidor ira ms o menos rpido.

Transferencia del server:
La transferencia es el consumo de un servidor. Es decir, cuando un usuario est navegando por
una web, ese usuario esta descargndose informacin, a esa descarga de datos se la llama
transferencia.
Contra ms transferencia mayor ser el coste del servidor

La seguridad de los datos:
Un buen servidor deber tener buenas protecciones de seguridad contra posibles ataques de
hackers.

Publicar
La publicacin de una pgina web significa el alojamiento de una cantidad de pginas con
informacin de su empresa o institucin en un servidor configurado, programado y
permanentemente conectado a internet a nivel mundial.

Publicar un sitio web generalmente significa copiar todos los archivos de la carpeta del sitio a un
destino particular, por ejemplo del disco duro de la mquina donde fue creado el sitio hasta un
servidor.

Planificar
Establecer un plan de trabajo
Es necesario establecer un plan de trabajo, un camino tentativo que gue las acciones futuras del
equipo. El plan de trabajo estar presente a la hora de estructurar la informacin, seleccionar los
contendidos, elaborar, dar forma a los documentos y evaluar la gestin en sus conjuntos.
Tambin se debern establecer las etapas y los tiempos.
Concebir
El equipo de trabajo ha reunido, a la luz de la informacin recabada y las pautas acordadas, en
esta etapa debern pensar el sitio Web que se encamina a construir.
Mientras en la etapa de la planificacin se buscaba establecer que suministramos y a quien?,
en esta etapa se formula Cmo?
Se trata de cumplir los objetivos establecidos para las audiencias ya determinadas. Es el
momento de planificar el estado futuro, Y pensar libremente en el punto de llegada y establecer
los caminos a recorrer.
194

Construir, visualizar y testar

Una vez que un sitio Web ha sido planeado y concebido, corresponde su materializacin en una
estructura a ser analizada y confrontada con los propsitos iniciales antes de ser puesta al
dominio pblico.
Se debern tambin corroborar el cumplimiento de las pautas acordadas en las etapas
anteriores, en trminos de contenidos, estructura de la informacin, y criterios de calidad.

La promocin
Se debe tener siempre presente que un sitio Web es un espacio de accin para un producto, la
extensin de una institucin, un mbito a ser cuidado y promocionado como una herramienta
ms de mercadeo.
La promocin de un sitio Web debe responder a un plan. Existen muchas formas distintas de
efectuar esa tarea, todas pueden coexistir, y ninguna debe ser descartada.
Veamos algunas de estas formas:
* Registros en buscadores de directorios.
* Incorporar el sitio Web al mensaje corporativo.
* Intercambiar anuncios grficos conocidos como banners.

Evaluar
Es un factor esencial en la construccin de la Web, ejecucin y mantenimiento de un sitio Web.
Se trata de una actividad que se efecta, en forma constante, a lo largo de todas las etapas del
proyecto Web. Es deseable que una vez que el sitio Web este en lnea la evaluacin contine en
forma sistemtica, con el fin de garantizar su vigencia y calidad.
La informacin obtenida a travs de las diferentes formas de evaluacin permite:
Confrontar la planificacin y concepcin con el producto.
Identificar carencias de contenido, diseo y actualizacin.
Identificar dificultades operativas y de navegacin.
Conocer el impacto en los usuarios; as como las pginas ms exitosas o menos
visitadas.
Conocer necesidades no contempladas hasta ahora.

Actualizacin
El mantenimiento y la actualizacin son tan, o ms importantes que el crecimiento en trminos
de nmeros de pginas o enlaces, sobre todo si estas incorporaciones no son cuidadas. Ningn
sitio Web es bueno o confiable, solamente por su magnitud.
Tan constante como la evaluacin y a consecuencia de ella, se debe crear un plan de
mantenimiento de desarrollo que contemple los resultados de la evaluacin y el cumplimiento de
los objetivos del sitio y la entidad que le dio origen.
Es importante determinar dentro del diseo de la Web:
Quin actualiza?, Qu se actualiza y que cada cuanto tiempo?, Qu formacin se realiza?
Quin la revisa y quien cada cuanto tiempo?, Qu informacin es de actualidad?, Que la
incorpora y cmo?, Dnde se almacena despus?
195

Identificar los servidores de Internet disponibles para el alojamiento de pginas Web
(gratuito, comercial)

Aqu tienes algunos Servidores que ofrecen alojamiento gratuito para tu espacio en Internet
adems de otras ventajas que podrs conocer accediendo a su pgina de condiciones.
Recuerda leer bien sus condiciones en su pgina ya que existen ciertos servidores que prohben
ciertas cosas mientras que otros dan total libertad a la hora de publicar.

4.2 ALMACENAR PGINAS WEB EN UN SERVIDOR
4.1.1. Verificacin de dominios.
4.1.2. Publicar una pgina en un servidor dedicado.
4.1.3. Publicar una pgina en un servidor gratuito.

DOMINIO
Un dominio es el nombre o direccin de un siio Web en Internet, en
otras palabras, es un nombre fcil de recordar y que se puede
utilizar para que los usuarios de Internet localicen y acceden a una
pgina Web.
Por ejemplo, nuestro dominio es: www.cecytes.edu.mx

Identifica los servidores disponibles para publicar una pgina Web

Identifica los dominios a utilizar en la publicacin de una pgina
Web

Sesin
65
196

DNS
DNS proviene de una sigla en ingls que significa Domain Name System, o Sistema de Nombres
de Dominio. Sirve para transformar los nombres de dominio (por ejemplo www.cecytes.edu.mx) a
una IP o direccin de Internet correspondiente al servidor que aloja la pgina.

Los servidores DNS son Computadoras muy robustas en los cuales estn alojadas las Pginas
Web, y tienen la capacidad de recibir conexiones de diversos usuarios al mismo tiempo. Estn
configurados de forma tal que muestran las pginas asociadas a cada dominio. Por cada pgina
debe haber mnimo dos servidores DNS, pues en caso que uno presente inconvenientes, el otro
permitir desplegar correctamente la pgina.
http://www.pagerank.electronica2000.com/dminios.php
http://www.publiweb.com.mx/whois.php
http://elhosting.com/dominio.htm

Publicar una pgina en un servidor dedicado

Aplica el procedimiento para la publicacin de una pgina Web en
un servidor

Sesin
66
197

Una vez que hayas construido tu pgina Web, necesitas subirla a un servidor que est
conectado a Internet para que los visitantes puedan verla en cualquier hora del da, los 365 das
del ao y desde cualquier parte del mundo. Lo ms normal es que para este fin recurras al
servicio que te proporcione una empresa de hosting, ya que estas empresas tienen la
infraestructura necesaria para tener los servidores conectados de manera permanente a Internet.
Este tipo de servicios suele recibir el nombre de Web hosting, hospedaje Web, alojamiento o
alojamiento Web.
Servidores dedicados
Este trmino se refiere a una forma avanzada de alojamiento Web, en la cual el cliente alquila o
compra un ordenador completo, y por tanto tiene el control completo y la responsabilidad de
administrarlo. El cuidado fsico de la mquina y de la conectividad a Internet es tarea de la
empresa de alojamiento, que suele tenerlo en un centro de datos.
Publicar una pgina en un servidor gratuito

Servidor gratis.
Una de las dudas ms comunes cuando acabas un proyecto Web por primera vez es: cmo
subir mi pgina Web? qu hago para que est mi Web en Internet?.
Pues bien, una vez tengas tu Web lista para compartirla con el resto del mundo, necesitas subir
los archivos HTML, imgenes y todos los dems contenidos creados a tu servidor Web (al
alojamiento Web que tengas). Es decir, que tienes que subir la pgina Web a Internet o de otro
modo slo podrs verla t desde tu ordenador. Para ello, lo ms sencillo es usar un cliente FTP,
ya que agilizas muchos pasos del proceso de subir archivos al servidor. Adems, el modo de
trabajo es similar en muchos aspectos al (tan) famoso explorador de Windows, por lo que si no
ests muy acostumbrado a manejar estos programas su aprendizaje ser rpido (quin no
conoce Windows?).
Antes de nada, lo primero es conseguir un cliente FTP. En esta gua voy a utilizar el cliente Cute
FTP por ser con el que trabajo normalmente, pero el proceso es bastante similar para todos los
clientes. Bjate el programa para empezar con la explicacin: Cute FTP.
Instalacin de Cute FTP
A da de hoy, la ltima versin de este cliente FTP es la 8.0.3, por tanto es con esa con la que
trabajaremos en este artculo (exactamente con la versin de prueba) para explicar cmo subir la
Web al servidor.
Identifica lo servidores para publicar una pgina Web

198

Bien, una vez descargado el programa lo ejecutamos. Tendremos que seguir una serie de pasos
comunes a toda instalacin, como elegir el directorio para instalarlo, el tipo de instalacin (tpica,
compacta o personalizada). En este caso elegimos tpica, la instalacin comienza enseguida y
no presenta mayores problemas.
Configuracin de Cute FTP
Una vez instalado el programa, al ser una versin de prueba, te ofrece la opcin de introducir la
licencia del programa o continuar, nosotros le damos a continuar y nos aparece una pantalla con
el siguiente cuadro de dilogo:

Llegados a este punto, necesitamos los siguientes datos para configurar el cliente CuteFTP, los
cuales debe proporcionarte tu servicio de hosting:
1. Direccin de tu servidor Web.
2. Contrasea y usuario para acceder al servidor web va FTP.
Donde pone Host Address debes introducir el nombre del servidor, y en Site Name el nombre
que le quieras poner a la configuracin que estamos haciendo (puedes poner el nombre de tu
web o cualquier otra cosa con tal de que luego sepas qu es). Hacemos clic en siguiente.
La prxima pantalla es similar a la anterior, pero en este caso debes introducir el nombre de
usuario de tu cuenta FTP (User Name) y la clave de dicha cuenta (password). Otra vez damos a
siguiente.
199

Ahora nos pide que seleccionemos la carpeta local con la que queremos trabajar (Default Local
Folder), no es necesario que seleccionemos carpeta remota por el momento (Default Remote
Folder). La carpeta local debera ser la carpeta en la que tienes los archivos de tu web. Le
damos a siguiente nuevamente y a continuacin a finalizar. Una vez conectado al servidor, ya
podemos empezar a subir archivos.
Subir la pgina web al servidor
La siguiente pantalla que aparece es similar a esta:

Me he permitido dibujar algunas flechas para explicar un poco la estructura bsica del cliente
cute FTP:
200

1. La flecha verde seala la carpeta de tu disco duro, esa que configuraste como
carpeta local. En ella deberas tener todos los archivos de la web que has hecho.
2. La flecha roja seala el servidor web. Es el sitio al que tendrs que copiar los
archivos que tienes en tu disco duro.
Ahora ya podemos empezar a subir la web, para ello lo que tienes que hacer es seleccionar los
archivos de tu carpeta local que quieras copiar al servidor y arrastrarlos:

Otras operaciones sencillas
1. Borrar y renombrar archivos del servidor: para hacerlo slo tienes que seleccionar el
archivo que quieras borrar, renombrar, etc. hacer clic en el botn derecho del ratn y pulsar en la
opcin del men emergente:
201

Para borrar la opcin a seleccionar es delete, para cambiar el nombre del archivo rename, para
ver el cdigo fuente view, para editarlo edit
2. Cambiar permisos de escritura: para cambiar los permisos de escritura de un archivo tienes
que seguir los mismos pasos que para borrar, editar, etc. Es decir, seleccionas el archivo, pulsas
el botn derecho del ratn y haces clic en la opcin llamada Properties / CHMOD. Te aparece
una pantalla como esta en que que puedes dar los permisos de escritura que necesites para
cada archivo o carpeta:

202

Ubica mnimo 3 empresas de tu localidad que tengan su sitio Web
y realiza las siguientes preguntas:
1. tipo de servidor en la cual tienen su sitio web
2. costo, mensual, anual, etc.
Elabora un reporte con la informacin y envala al correo a tu
maestro
Individual
Ejercicio no. 112

Desarrolla las siguientes actividades para evaluar los aprendizajes

203

El proyecto final de la materia de SM3 consiste en disear un sitio
Web que este alojado en el servidor gratuito
http://www.everyoneweb.es. El sitio Web deber contener las
siguientes especificaciones:
1. La pagina principal del sitio Web deber llamarse index.htm.
a. La pgina Web index.htm deber tener una plantilla
invisible de fondo, para que los textos e imgenes
estn acomodados en una forma ordenada.
b. La pgina Web index.htm deber contener un enlace
a una pgina Web llamada formulario.htm que
previamente se habr creado en Dreamweaver.
c. La pgina Web index.htm deber contener un enlace
a una pgina Web llamada multimedia.htm que
previamente se habr creado en Dreamweaver.

Individual
Prctica no.14

Sesin
67
204

INSTRUMENTOS DE EVALUACION

Asignatura: Elaboracin de pginas Web
Elementos
fundamentales de
diseo

Evidencia por desempeo: Publicar pginas Web en servidores de
Internet
Caractersticas
Cumple
Subtema 4.2.3. (Practica No.1 )
SI NO
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones.

b) El sitio cumple con las instrucciones proporcionadas en la prctica



Observaciones:

205

206

MATERIAL RECORTABLE
207

208

Recortables:

209

210

Claves de respuesta
Unidad 1
Diagnstica 1. C 2. A 3. D 4. D 5. A
6. E 7. D 8. A 9. B 10. E
Autoevaluacin 1. A 2. A 3. B 4. C 5. B
6. E 7. E 8. B 9. A 10. C
11. B 12. B 13. A 14. A 15. D
16. D 17. A 18. A 19. C 20. E

Unidad 2
Diagnstica
1. B 2. B 3. E 4. B 5. A
6. C 7. C 8. D 9. E 10. C
Autoevaluacin
1. 2. 3. 4. E 5.
6. 7. 8. 9. E 10.
11. 12. 13. 14. B 15.
16. 17. 18. 19. E 20.

Unidad 3
Diagnstica 2. B 2. C 3. A 4. D 5. E
6. D 7. A 8. C 9. D 10. E
Autoevaluacin 1. E 2. E 3. C 4. B 5. B
6. E 7. B 8. D 9. C 10. C
11. B 12. C 13. B 14. E 15. E
16. E 17. B 18. C 19. D 20. E

211

GLOSARIO
. (punto): Es de gran importancia en Internet, ya que es utilizado en las direcciones de
correo electrnico, como www.cecytes.mx.
@ (arroba): Componente importante de las direcciones de correo electrnico. Ejemplo
marysilvia@hotmail.com.
Aplicacin: Es un programa informtico que tiene una aplicacin especfica.
ASP (Active Server page). Lenguaje de programacin del cual es Microsoft propietario.
ASP suele ser usado para combinar HTML con bases de datos y generar pginas Web
dinmicas.
Cdigo fuente: conjunto de instrucciones que forman un programa o subprograma
informtico.
Etiqueta (tag): Instrucciones con las cuales podemos realizar pginas en el lenguaje
HTML. Un ejemplo es <i> que no permite poner en cursiva las letras que estn entre esta
etiqueta. Las etiquetas son interpretadas por los diferentes navegadores a la hora de
reproducir las pginas HTML.
File Transfer (transferencia de ficheros): Copia o envo de un fichero de un ordenador a
otro por medio de una red de ordenadores.
File Transfer Protocol FTP (Protocolo de Transferencia de Archivos): permite al usuario
acceder y transferir desde una computadora o red a otra.
Frame (Marco): Instruccin del lenguaje HTML que permite de dividir una pgina Web en
varias zonas o marcos. Cada una de los frames o marcos puede tener un contenido
independiente de las dems.
Hiperenlace : Enlace que existe en un documento hipertexto que enlaza con otro
documento que puede ser o no otro documento HTML.
Hipertexto: Enlaces que conducen a otras pginas que pueden ser a su vez pginas de
hipertexto. Las pginas de hipertexto son mostradas a travs de navegadores.
HTML: El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de formato de
documentos de hipertexto), es un lenguaje para el diseo de docmuentos en forma de
hipertexto, que es el formato estndar de las pginas Web.
HTTP: "Protocolo de Transferencia de Hipertexto". Es el tipo de comunicacin utilizado
entre un servidor y un navegador.
Link (enlace): Es el enlace de hipertexto que nos muestra la informacin de otra pgina
Web, de una pgina a otra, o de un servidor a otro.
212

Multimedia: Informacin digitalizada que puede combinar tanto texto, grficos, audio y
video.

Navegador: Aplicacin software que permite al usuario recuperar y visualizar
documentos de hipertexto, comnmente descritos en HTML, desde servidores Web de
todo el mundo a travs de Internet.
Pgina inicial: la Primera pgina que se carga al entrar en un sitio web.
Portal: Sitio web cuya misin es ofrecer al usuario, el acceso a unos recursos y servicios.
Fcilmente e integrado en el mismo dominio.
Servidor: (host) Ordenador conectado a Internet capaz de prestar uno o ms servicios a
otros ordenadores llamados "clientes". Ejemplos de servicios: conexin, cuenta de
correo, sitio web, ftp, news, etc.
Servidor web: Ordenador conectado a la red en cual proporciona una serie de servicios
que puden ser portales o pginas web.
URL (Localizador Uniforme de Recursos): Sistema unificado de identificacin de recursos
en la red. Ejemplos de URL son: http://www.pcweb.es, ref.=imgenes/dibujo.jpg
Webmaster: administrador de Web, persona que dirige la gestin y mantenimiento de un
sitio web.
World Wide Web (WWW): (del ingls, Telaraa Mundial), la Web o WWW, es un sistema
de hipertexto que funciona sobre Internet. Para ver la informacin se utiliza una
aplicacin llamada navegador web para extraer elementos de informacin (llamados
"documentos" o "pginas web") de los servidores web (o "sitios") y mostrarlos en la
pantalla del usuario.

213

REFERENCIAS
Documentales
Biblioteca del diseo grfico. Barcelona, Naves Internacional de Ediciones, 1994.
BRIDGWATER, Peter. Introduccin al diseo grfico. Mxico, Editorial Trillas, 1992.
DONDIS, A. D. Dondis. Sintaxis de la imagen. Mxico, Gustavo Gilli Editores, 1998.
FERRER, Eulalio. Los lenguajes del color. Mxico, Fondo de Cultura Econmica/CNCA-INBA,
1999.
GUIRAUD, Pierre. La semiologa. Mxico, Siglo XXI Editores, 1972.
KEIL, John M. Creatividad. Mxico, McGraw Hill, 1990.
LAING, Jhon. Haga usted mismo su diseo grfico. Barcelona, Ediciones Herman Blume, 1984.
MEGGS, Philip B. Historia del diseo grfico. Mxico, Trillas, 1991.
MULHERIN, Jenny. Tcnicas de representacin para el arte grfico. Barcelona, Gustavo Gilli
Editores, 1993.
PUENTE, Rosa. Dibujo y comunicacin grfica. Mxico, Gustavo Gilli Editores, 1992.
SANDERS, N. y Bervinggton, W. Manual de produccin del diseo grfico. Mxico, Gustavo Gilli
Editores,1992.
TUBAU, Ivan. Dibujando carteles. Barcelona, CEAC Editores, 1987.
WONG, Wucios. Fundamentos del diseo. Mxico, Gustavo Gilli Editores, 1995.

Vnculos en Internet
Importancia del diseo, recuperado 4 febrero de 2010.
http://antiguo.itson.mx/dii/jgaxiola/articulos/diseno_web.html Recuperado,

Arquitectura de la informacin, recuperado 2 de febrero de 2010.
http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n

Conceptualismo, recuperado 4 febrero de 2010.
http://es.wikipedia.org/wiki/Arte_conceptual
Circulo cromtico, recuperado 23 de marzo de 2010.
http://es.wikipedia.org/wiki/C%C3%ADrculo_crom%C3%A1tico

Collage, recuperado 05 de marzo de 2010.
http://es.wikipedia.org/wiki/Collage

Diseo grfico, recuperado 2 de febrero de 2010.
http://es.wikipedia.org/wiki/Comunicaci%C3%B3n_visual
Conceptualismo, recuperado 4 febrero de 2010.
http://es.wikipedia.org/wiki/Conceptualismo
Contraste, recuperado 23 de marzo de 2010.
214

http://es.wikipedia.org/wiki/Contraste

http://es.wikipedia.org/wiki/Dise%C3%B1o_gr%C3%A1fico

http://es.wikipedia.org/wiki/Dise%C3%B1o_visual#Alcances_de_Dise.C3.B1o_Visual
Minimalismo, recuperado 10 de febrero de 2010.
http://es.wikipedia.org/wiki/Minimalismo

Minimalismo, recuperado 10 de febrero de 2010.
http://es.wikipedia.org/wiki/Pintura_minimalista
Arte conceptual, recuperado 2 de febrero de 2010.
http://es.wikipedia.org/wiki/Ready-made
Teoras del color, recuperado 1 de marzo de 2010.
http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color

Diseo y elementos, recuperado 12 febrero de 2010.
http://html.rincondelvago.com/diseno-publicitario.html
http://html.rincondelvago.com/diseno-y-comunicacion.html
http://www.articulosinformativos.com.mx/Diseno_Grafico-a1073108.html
Manejo de Dreamweaver, recuperado 11 de mayo de 2010.
http://www.aulaclic.es/dream2004/t_10_1.htm

Manejo de Dreamweaver, recuperado 11 de mayo de 2010.
http://www.aulaclic.es/dream2004/t_10_2.htm
http://www.cristalab.com/tutoriales/fundamentos-del-diseno-grafico-c126l/
http://www.desarrolloweb.com/articulos/1276.php


Contrastes, recuperado 13 de marzo de 2010.
215

http://www.fotonostra.com/grafico/arteydiseno.htm

Colores objetos, recuperado 23 de marzo de 2010.
http://www.fotonostra.com/grafico/coloresobjetos.htm

http://www.fotonostra.com/grafico/contrastestono.htm
http://www.fotonostra.com/grafico/definiciondiseno.htm
Teora del color, recuperado 2 de febrero de 2010.
http://www.fotonostra.com/grafico/elcolor.htm

Zonas ureas, recuperado 12 de marzo de 2010.
http://www.fotonostra.com/grafico/reglaaurea.htm

http://www.google.com.mx/imgres?imgurl=http://www.aloj.us.es/galba/digital/cuatrimestre_ii/imag
en-
pagina/color/contrastes.jpg&imgrefurl=http://www.aloj.us.es/galba/digital/cuatrimestre_ii/imagen-
pagina/2elementos4c.htm&usg=__bue7Ws6MAEB2c37qoYu4F46TO2Q=&h=330&w=335&sz=52
&hl=es&start=17&um=1&itbs=1&tbnid=b5-
X8OwaDZAY5M:&tbnh=117&tbnw=119&prev=/images%3Fq%3Dcontrastes%26um%3D1%26hl
%3Des%26sa%3DX%26tbs%3Disch:1

Teora del color, recuperado 2 de febrero de 2010.
http://www.newsartesvisuales.com/funda/COLOR1.HTM
Equilibrio, recuperado 23 de marzo de 2010.
http://www.newsartesvisuales.com/funda/compo5.htm

http://www.slideshare.net/sayojas/importancia-del-diseo-grfico-en-los-proyectos-2073045
http://www.taringa.net/posts/apuntes-y-monografias/1218053/Introducci%C3%B3n-al-
dise%C3%B1o-gr%C3%A1fico.html
Circulo cromtico, recuperado 23 de marzo de 2010.
http://www.todacultura.com/acuarelas/circulo_cromatico.htm

216

http://www.uned.es/ntedu/espanol/master/primero/modulos/teoria-de-la-
representacion/fundamentos-composicion.htm
Zonas ureas, recuperado 12 marzo de 2010.
http://zeret1405.blogspot.com/2008/10/zonas-aureas.html
www.cristalab.com
Manuales y tutoriales de Dreamweaver, recuperado y consultado 30 de abril de 2010.
www.lawebdelprogramador.com

http://www.merca-tech.com.mx/articulos/37-articulos/98-los-diferentes-tipos-de-paginas-web.html
http://www.galeon.com/famosillas/servidores.htm

217

Fecha de terminacin de la impresin
Diseada por
Direccin donde fue diseada

Nmero de ejemplares impresos

LIBRO - Sem3 - Elab Pag Web 2011

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

LIBRO - Sem3 - Elab Pag Web 2011

Caricato da

Copyright:

Formati disponibili

1

Potrebbero piacerti anche