Post on 30-Apr-2020
2
COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS
DEL ESTADO DE SONORA
Módulo de aprendizaje
ELABORACIÓN DE PÁGINAS WEB
Hermosillo, Sonora; Agosto de 2010.
COLEGIO DE ESTUDIOS CIENTÍFICOS Y
TECNOLÓGICOS DEL ESTADO DE SONORA
Dirección Académica
Subdirección de Desarrollo Académico
Departamento de Desarrollo Curricular
Calle La Escondida #34, Col. Santa Fe,
Hermosillo, Sonora, México. CP. 83249
Elaboración de Páginas Web
Módulo de aprendizaje
Tercer Semestre
Elaboradores
Mary Silvia León Soto
Lizbeth Corral García
Supervisión académica
María Asunción Santana Rojas
Jesús Enrique Córdova Bustamante
Cora Aguilar Partida
Edición y diseño
Elisa Sofía Valdez Alcorn
Coordinación técnica
Sandra Elivia Becerril López
Coordinación general
José Carlos Aguirre Rosas
Copyright ©, 2010 por Colegio de Estudios
Científicos y Tecnológicos del Estado de Sonora
Todos los derechos reservados
Primera edición 2010. Impreso en México
Registro ISBN:
6
Directorio
MTRO. Martín Alejandro López García
Director General
M.C. José Carlos Aguirre Rosas
Director Académico
ING. José Francisco Arriaga Moreno
Director Administrativo
L.A.E. Martín Francisco Quintanar Luján
Director de Finanzas
LIC. Alfredo Ortega López
Director de Planeación
LIC. Gerardo Gaytán Fox
Director de Vinculación
L.A. Mario Alberto Corona Urquijo
Director del Órgano de Control
7
Nombre _____________________________________________
Plantel _______________________________________________
Grupo ______ Turno _________ Teléfono __________________
Correo Electrónico _____________________________________
Domicilio _____________________________________________
Datos del alumno
Ubicación Curricular
Componente:
Formación Profesional
Campo de Conocimiento:
Informática
Créditos:
10
Horas:
5 HSM
Asignatura Antecedente:
Modulo I
Asignatura Consecuente:
Modulo III
8
ESTRUCTURA GENERAL DEL SUBMÓDULO III:
ELABORACION DE PÁGINAS WEB
Elaborar
páginas web
Elementos
fundamentales
de diseño
Software de
Aplicación
Dreamweaver
Lenguaje HTML
Teorías de diseño
Teorías del color
Contenidos de
una página web
Etiquetas en una
página web
Publicar en
servidores de
internet
Entorno de la
aplicación
Insertar
Componentes
Elementos
multimedia
Conceptos de
publicación
Almacenar
páginas web en
un servidor
Formatos de diseño
10
ÍNDICE
Presentación……………………………………………………………………………………. 12
Recomendaciones para el alumno…………………………………………………………… 13
Competencias…………………………………………………………………………………… 15
Unidad 1. Utilizar los elementos fundamentales de diseño.
Evaluación diagnóstica………………………………………………………………………… 18
1.1. Las teorías del diseño.
1.1.1. Importancia del diseño y su impacto…………………………………………… 23
1.1.2. Origen y enfoque del diseño…………………………………………….……… 25
1.1.3. Teorías del diseño: minimalismo, conceptualismo…….……………………... 31
1.2. Formatos de diseño.
1.2.1. Zonas áureas……………..………………………………………………………. 40
1.2.2. Dirección………………………………………………………………………….. 40
1.2.3. Sentido …….……………………………………………………………………… 42
1.2.4. Equilibrio…………………………………………………………………………… 42
1.3. Teoría del color.
1.3.1. Circulo cromático…………………………………………………………………. 51
1.3.2. Contrastes…………………….…………………………………………………… 53
1.3.3. Colores RGB (Red, Green y Blue) y CMY (Cian, Magenta y Yellow)……… 57
Autoevaluación…………………………………………………………………………………. 63
Instrumentos de evaluación…………………………………………………………………… 65
Unidad 2. Manejar los elementos básicos de un lenguaje usado en la creación de una página Web.
Evaluación Diagnóstica………………………………………………………………………... 76
2.1. Identificar los contenidos de una página Web
2.1.1. Conceptos básicos……………………………………………………………….. 78
2.1.2. Objetivo y clasificación de una página Web…………………………………… 80
2.1.3. Estructura de una página Web ……………………………………………....... 82
2.2. Utilizar las etiquetas en una página Web
11
2.2.1. Sintaxis de etiquetas ...……………………….………………….…………………. 86
2.2.2. Etiquetas primarias ……………………………….………………..……….………. 87
2.2.3. Etiquetas de hipervínculo ……………………………………..….………………… 90
2.2.4. Manipular formularios en una página Web…………….……..………………….. 94
2.2.5. Insertar y editar tablas en una página Web…………………….………………… 99
2.2.6. Manipular imágenes y animaciones en una página Web….…………………… 101
2.2.7. Insertar sonido y video en una página Web……………………………………… 103
2.2.8. Implementar servicios de correo en una página Web………………..…………. 106
Autoevaluación………………………………………………………………………..…………. 110
Instrumentos de evaluación…………………………………………………………………….. 112
Unidad 3. Diseñar páginas Web con un software de aplicación.
Evaluación Diagnóstica…………………………………………………………………………. 117
3.1. Entorno de la aplicación 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 página Web en Dreamweaver
3.2.1. Formato de texto y párrafos..……….……………………….………………..
3.2.2. Establecer vínculos dentro de la página Web, entre páginas y
servidores……………………….…………………………………………….
3.2.3. Insertar imágenes dentro de una página Web………..…………………….
3.2.4. Insertar y editar tablas en una página Web………….……………………...
3.2.5. Manipular macros……………………………………………………..………..
3.3. Utilizar elementos multimedia a una página Web.
3.3.1. Agregar archivos de audio……………………………………………………..
3.3.2. Archivos de video……………………………………………………………….
3.3.3. Insertar animaciones flash…………………………………………..………...
Material Recortable………………………………………………………………………….
Autoevaluación………………………………………………………………………………..
Instrumentos de evaluación………………………………………………………………….
121
126
135
140
144
149
154
161
165
168
171
177
180
182
12
Unidad 4. Publicar páginas Web en servidores de Internet.
4.1. Define los conceptos básicos de publicación
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
páginas Web…………………………………………………………………..
194
4.2. Almacenar páginas de web en un servidor.
4.2.1. Verificación de dominios…………………………………………………….. 194
4.2.2. Publicar una página en un servidor dedicado…………………………….. 195
4.2.3. Publicar una página en un servidor gratuito………..……………………… 196
Instrumentos de evaluación………………………………………………………………...… 203
Material recortable ………….……………………............................................................. 205
Claves de respuesta………………………………………………………………………..… 209
Glosario………………………………………………………………………………………… 210
Referencias…………………………………………………………………………………….. 212
13
PRESENTACIÓN
El Colegio de Estudios Científicos y Tecnológicos del Estado de Sonora, comprometido
con la calidad educativa, ha implementado acciones que apoyan tu desarrollo académico,
por lo cual incluye en su plan de estudios el Submódulo III: Elaboración de Páginas Web
del Módulo II: Creación de Productos Multimedia a través de Software de diseño, del
tercer semestre de la Especialidad de Informática; el cual cumple con un objetivo integral
en su formación 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 publicación de cualquier empresa por lo que el diseño de página Web
ayuda a todo técnico en informática.
Por tal motivo CECyTES procura con el presente Módulo de aprendizaje, ayudarte a
obtener los conocimientos sobre la creación y diseño de productos multimedia para la
elaboración de páginas Web.
El presente material se conforma de cuatro unidades, en la primera unidad la cual tiene
como título “Utilizar los elementos fundamentales de diseño” conocerás los conceptos
básicos de diseño, la segunda unidad, “manejar los elementos básicos de un lenguaje
usado en la creación de páginas web (HTML)”, en la cual podrás desarrollar páginas Web
utilizando las etiquetas de un lenguaje de diseño, en la tercera unidad “diseñar páginas
web con un software de aplicación”, aquí elaboraras páginas por medio de Dreamweaver,
y en la cuarta unidad “publicar páginas Web en servidores de Internet” , las páginas Web
elaboradas las subirás en línea.
Así que, como te puedes dar cuenta, tenemos mucho que aprender de este módulo, y lo
más 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 diseño.
UNIDAD II. Manejar los elementos básicos de un lenguaje usado en la creación de
páginas Web.
UNIDAD III. Diseñar páginas Web con un software de aplicación
UNIDAD IV. Publicar páginas Web en servidores de Internet.
En el contenido de estas unidades, se relaciona la teoría con la práctica, a través de
lecturas y ejercicios, encaminados a apoyarte en el desarrollo de las competencias
requeridas para los alumnos que cursan esta asignatura.
Seguros de que harás de este material, una herramienta de aprendizaje, te invitamos a
realizar siempre tu mayor esfuerzo y dedicación para que logres adquirir las bases
necesarias, para tu éxito académico.
14
RECOMENDACIONES PARA EL ALUMNO
El presente módulo de aprendizaje, representa un importante esfuerzo que el Colegio de
Estudios Científicos y Tecnológicos del Estado de Sonora, ha realizado, para brindarte los
contenidos que se abordarán en el Submódulo de Elaboración de Páginas Web.
Los contenidos del presente Submódulo, serán abordados a través de diversos textos,
ejercicios, evaluaciones, entre otras actividades. Cabe mencionar, que algunas de las
actividades propuestas las deberás realizar de manera individual mientras que en algunas
otras, colaborarás con otros compañeros formando equipos de trabajo bajo la guía de tu
profesor.
Para lograr un óptimo uso de este módulo de aprendizaje, deberás:
Considerarlo como el texto rector de la asignatura, que requiere sin embargo, ser
enriquecido consultando otras fuentes de información.
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 información relevante en el área
de la Informática, a ser utilizado incluso después de concluir esta asignatura.
Identificar las imágenes que te encontrarás en los textos que maneja el módulo de
aprendizaje, mismas que tienen un significado particular:
15
Simbología
Esperando que este material de apoyo sea de gran utilidad en tu proceso de aprendizaje,
y así mismo despierte el interés por conocer y aprender más sobre esta ciencia, te
deseamos el mejor de los éxitos.
Evaluación diagnóstica 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 cómputo.
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 investigación.
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 autoevaluación que se resolverá al final de cada unidad.
Aprendizajes a lograr al inicio de cada subtema.
16
COMPETENCIA DE LA ASIGNATURA
COMPETENCIAS
Genéricas
Disciplinarias
Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e implícitos en un
texto, considerando el contexto en el que se generó y en el que se recibe.
Plantea supuestos sobre los fenómenos de su entorno, con base en la consulta de
diversas fuentes.
Valora la función de las expresiones artísticas y de los medios de comunicación, en la
recreación y transformación 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 comunicación.
Utiliza las tecnologías de la información y comunicación para producir diversos materiales
de estudio e incrementar sus posibilidades de formación.
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
utilización de medios, códigos y herramientas apropiadas.
Contribuye al desarrollo sustentable de manera crítica en acciones responsables.
Desarrolla innovaciones y propone soluciones a problemas a partir de métodos
establecidos.
Sustenta una postura personal sobre temas de interés y relevancia general,
considerando otros puntos de vista de manera crítica y reflexiva.
Aprende por iniciativa e interés 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 prácticas sociales.
Al término del curso, el estudiante será capaz de crear Páginas Web empleando
software de diseño y un lenguaje de programación en el diseño de páginas,
considerando los elementos fundamentales de diseño.
18
COMPETENCIAS DE LA UNIDAD
El alumno:
En la utilización de los elementos fundamentales de diseño, el alumno será capaz de aplicar las teorías de diseño,
los formatos de diseño y las teorías del color, mediante los siguientes logros:
Describe la importancia del diseño y su impacto.
Describe el origen y enfoque del diseño.
Describe los elementos y características de las teorías del diseño: minimalismo y conceptualismo.
Identifica los elementos de las zonas áureas.
Identifica los conceptos de dirección, sentido y equilibrio en las teorías del color.
Aplica las teorías del color considerando las características del círculo cromático y los contrastes en el diseño.
Aplica las combinaciones y configuraciones de los colores RGB, CMY.
TEMARIO
1.1. Las teorías del diseño.
1.1.1. Importancia del diseño y su impacto.
1.1.2. Origen y enfoque del diseño.
1.1.3. Teorías del diseño: minimalismo, conceptualismo.
1.2. Formatos de diseño.
1.2.1. Zonas áureas.
1.2.2. Dirección.
1.2.3. Sentido.
1.2.4. Equilibrio.
1.3. Teoría del color.
1.3.1. Circulo cromático.
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) Fotografía
( ) 2. Es la acción de programar, proyectar y realizar comunicaciones visuales. a) Diseño
gráfico b) Dibujar c) Pintar d) Elaborar
croquis e) Graficar
( ) 3. Movimiento artístico que se centro en las formas geométricas como el triángulo,
cuadrado, cruz. a) Dadaismo b) Futurismo c) Cubismo d) Suprematismo e) Constructivismo
( ) 4. En una página Web, esta es una característica que impacta como parte de la
interfaz, por ello se debe de tomar en cuenta al realizarla y hacer una buena combinación de ello.
a) Texto b) Tamaño c) Tipografía 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. Técnica 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 diseño que se refiere ha realizar una división de líneas
horizontales y verticales a una imagen que se quiere proyectar. a) Dirección b) Sentido c) Equilibrio d) Zona áurea e) Circulo
cromático
( ) 8. Son los colores que representan a la teoría del color CMY. a) Cian,
Magenta, Yellow
b) Café, morando, yellow
c) Yellow, marrón, café
d) Cielo, Magenta, yellow
e) Café, marrón, yellow
( ) 9. Es una de las propiedades del color EXCEPTO: a) Tono b) Cantidad c) Luminosidad d) Saturación e) Brillo
( ) 10. Es el número de colores que forman el número cromático, representando a los
colores primarios, secundarios y terciarios. a) 3 b) 10 c) 9 d) 6 e) 12
Evaluación diagnóstica
La siguiente evaluación 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 paréntesis de la izquierda las letras de la respuesta correcta. En la página 209 se encuentran las respuestas correctas.
20
Secuencia didáctica 1
1.1. LAS TEORÍAS DEL DISEÑO.
1.1.1. Importancia del diseño y su impacto.
1.1.2. Origen y enfoque del diseño.
1.1.3. Teorías del diseño: minimalismo, conceptualismo.
Conocimientos previos: A continuación se te presentan una serie de
preguntas contéstalas lo más ampliamente, comenta tus respuestas ante
el grupo para compartir sus conocimientos previos bajo lluvia de ideas
dirigidas por el docente.
Individual Ejercicio no. 1
Sesión
1
1. ¿Qué es el diseño?
Contesta las siguientes actividades
Describe la importancia del diseño y su impacto.
Describe el origen y enfoque del diseño.
Describe los elementos y características de las teorías del diseño: minimalismo y conceptualismo.
Actúa 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 diseños de logotipos (al menos 10) de los
productos que conoces. Para realizar este ejercicio, deberás traer
revistas, tijeras, pegamento, marcadores, una cartulina o papel
bond. Se te calificará con la lista de cotejo de la página __ del
módulo de aprendizaje.
Grupo Ejercicio no. 2
2. ¿En donde se aplica el diseño?
3. ¿Qué es un logotipo?
4. Menciona al menos 10 empresas que conozcas e
identifiques su logotipo
22
1. Es la acción de concebir, programar, proyectar y realizar comunicaciones visuales, destinadas a transmitir mensajes a grupos sociales determinados.
a) Diseño industrial
b) Diseño gráfico
c) Conceptualismo d) Grafías e) Simbolismo
2. Julián se encuentra plasmando mediante dibujos un posible logotipo de una empresa que pidió inventaran el maestro de administración a esta acción se le llama:
a) Plasmar
b) organizar
c) Esquematizar d) Diseñar e) Dibujar
3. Símbolo que utiliza normalmente una empresa o marca para que la identifiquen con más facilidad.
a) Dibujo
b) Imagen
c) Logotipo d) Esquema e) Croquis
Has visto como en los centros comerciales cada uno de los productos están
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 (diseño gráfico que es utilizado como una continuación del símbolo
por una compañía, organización o marca, y es a menudo, la forma de una
adaptación del nombre de la compañía o de la marca, o es utilizado conjuntamente con el
nombre).
Toda compañía que ofrezca productos o servicios
necesita identificarse ante los posibles consumidores
para ello es necesario diseñarse acorde a su nombre de
empresa y giro que lo representa, en general el diseño
se aplica en todos los ámbitos y se encuentra por todas
partes es decir: en publicidad, revistas, anuncios, libros, en la red (internet
en páginas web), inclusive en los productos que utilizamos en nuestros
hogares, ropa y los alimentos que consumimos están llenos de diseño.
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 3
Sesión
2
23
El diseño se podría dividir en tres grupos principales:
La edición, diseño de todo tipo de libros, periódicos, y revistas.
La publicidad, diseño de carteles publicitarios, anuncios, folletos.
La identidad, diseño de una imagen corporativa de una empresa.
En cada diseño gráfico debe considerarse algunos aspectos básicos de comunicación: un
método para diseñar, un objetivo que comunicar y un campo visual. Ello es necesario tener en
cuenta para hacer una buena proyección del diseño creado.
EJEMPLO
Hay muchas empresas que son reconocidas por sus
logotipos estos han sido diseñados para atrapar la
atención de sus clientes potenciales entre ellos
encontramos: coca-cola, sabritas, gamesa, quienes
en su diseño hacen notar la gama de colores y su
estilo muy particular.
Elabora de un mapa conceptual donde represente los términos de
diseño, diseño gráfico, grafismo, elementos del diseño, conceptos
relacionados al diseño. Podrás consultar la siguiente liga:
http://www.articulosinformativos.com.mx/Diseno_Grafico-
a1073108.html
Se te calificará con la lista de cotejo de la página __ del módulo de
aprendizaje.
Individual Ejercicio no. 4
24
1. Es cualquier elemento o cosa llamado arte creado o modificado a través 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 simetrías.
a) Contornos
b) Agrupaciones
c) Tamaños d) Contrastes e) Equilibrios
3. Es un creador de comunicaciones, es el profesionista que mediante un diseño construye mensajes con medios visuales.
a) Diseñador gráfico
b) Pintor
c) Dibujante d) Arquitecto e) Ingeniero Industrial
La importancia del diseño
Has visitado páginas web, algún sitio de empresas o instituciones, te has
dado cuenta de que siempre está organizada dependiendo de lo que
quieren proyectar. Todo sitio cuenta con un índex, donde indican los
principales temas que contienen, también está representado por los
colores de la institución o siempre tratan de buscar una combinación de los
colores de su logotipo.
Se dice que el diseño de una página Web tiene la esencial misión de
vincular al usuario con el vasto mundo informativo, de un modo agradable y eficiente, este se
debe de poder mover en el sitio sin dificultad.
Cuando un diseñador está elaborando un trabajo de diseño ya sea un logotipo, un cartel, un
volante, una página web va a depender de algunos criterios del perfil profesional bajo los
criterios de: habilidades personales, ámbito profesional y aspecto tecnológico.
Entre los criterios de las habilidades personales se encuentran: poder de análisis y síntesis,
flexibilidad mental, claridad de juicio, sensibilidad visual, conocimiento técnico, destreza manual,
actualización permanente y aplicación de los Procesos Psicológicos Superiores (PPS). Por lo
que la importancia del diseño radica en una buena inspiración por parte del diseñador.
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 5
Sesión
3
25
SITIO WEB IMAGEN COLORES ESTILOS
LETRAS
INFORMACION
CECyTES
Bimbo
Gamesa
Sabritas
Visita 5 sitios web e indica algunas características que encuentres
entre ellos, el color de su sitio, color del fondo, relación que tienen
estos colores con su logotipo, tamaño y estilo de la letra que
maneja, la cantidad de información que maneja.
Se te calificará con la lista de cotejo de la página __ del módulo de
aprendizaje.
Individual Ejercicio no. 6
26
ITSON
1. En una página web al momento de diseñarla, las empresas consideran en su diseño algunas características basadas en el logotipo de sus productos, esta características está basada en:
a) Color
b) Estilo
c) Letra d) tamaño e) textura
2. Todo sitio web debe tener una página principal con la información principal constituida por medio de una botonera de opciones a esta página se le conoce como:
a) Página1
b) First
c) Index d) Inicio e) Primera
3. La importancia del diseño gráfico que se está elaborando dependerá en gran parte del: a) Dibujante b) Diseñador
c) Empresario d) Cliente e) Publicista
Origen del diseño
El diseño no es nuevo se tiene toda una historia, se cuenta con una serie de personalidades que
se dedicaron a dar a conocer el diseño como todo un arte visual de
comunicación, aunque se considera que la profesión del diseñador gráfico es
reciente en lo que se refiere a su preparación, su actividad y sus objetivos,
pero podemos nombrar, aquí te nombro algunas de ellas que se consideran
antecedentes: la historia de la tipografía (arte y técnica del manejo y
selección de tipo –tipo de letras- originalmente de plomo para crear trabajos
de impresión), está vinculada con el diseño gráfico describiéndose la
tipografía de la columna , las miniaturas medievales, la imprenta de Johannes
Gutenberg, la evolución de la industria del libro, los afiches parisinos, el
movimiento de artes y oficios, William Morris, además de estos también encontramos a las
diferentes vanguardias del diseño y el arte generaron dramáticos cambios en el diseño gráfico.
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 7
Sesión
4
27
Entre las principales vanguardias se encuentran:
dadaísmo, suprematismo, cubismo, constructivismo,
futurismo.
Antecedentes del diseño gráfico
EJEMPLO
En el siguiente cuadro realiza un resumen indicando los
antecedentes del diseño gráfico considerando los principales
acontecimientos de las escuelas del diseño desde Jan Tschichold
hasta la actualidad, para realizarlo consulta en wikipedia el tema
de diseño gráfico. Se utilizará la lista de cotejo del final de la
unidad.
Individual Ejercicio no. 8
Completa el siguiente crucigrama que integra los conceptos de las
diversas vanguardias que perfilaron grandes cambios en el diseño
gráfico.
Individual Ejercicio no. 9
28
Vertical Horizontal
1.- Movimiento artístico ruso que incorporo al arte
la estética funcional, tecnológica y materiales
industriales.
______________________________
3.- Movimiento que surge en Francia, que se
caracterizo por el uso de formas geométricas y la
superposición de diferentes planos de las figuras
entre los principales representantes están
Picasso.
__________________________
2.- Movimiento artístico que se centro en las
formas geométricas fundamentales como el
triángulo, el cuadrado, cruz y círculo.
_____________________________
4.- Este movimiento surge en Italia que utilizaba
la velocidad y el maquinismo como símbolos 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 tipografía moderna en su libro de 1928, aunque más tarde la
califico de fascista (del régimen político que promulgaba un gobierno autoritario).
a) William Morris
b) Jan Tschichold
c) Herbert Bayer d) László Moholy-Nagy
e) El Lissitzky
2. Dirigió el taller de tipografía y publicidad creando las condiciones del diseñador gráfico y
agrego la asignatura de publicidad en el programa de enseñanza.
a) Jan Tschichold
b) Willam Morris
c) László Moholy-Magy
d) El Lissitzky
e) Herbert Bayer
3. Movimiento artístico que se centro en las formas geométricas fundamentales como el triágulo, el
cuadrado, cruz y círculo.
a) Dadaismo b) Constructivismo
c) Futurismo d) Suprematismo e) Cubismo
4. Este movimiento surge en Italia que utilizaba la velocidad y el maquinismo como símbolos de la
sociedad industrial.
a) Dadaismo b) Constructivismo c) Futurismo d) Suprematismo e) Cubismo
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 10
30
Enfoque del diseño
El diseño hoy en la actualidad está ocupando gran parte de
la atención del individuo, como ya comentamos el diseño
gráfico es una representación de comunicación visual y se
considera que se enfoca en cuatro áreas principalmente:
diseño para información, para persuasión, educación y
administración.
De la manera que se muestre la información, un logotipo,
una página web, llamara más la atención de las personas
es por ello que se debe considerar algunos aspectos como
el color, la tipografía, tamaño.
Así también es necesario considerar cuatro principios rectores del diseño gráfico que se deben
de tomar en cuenta a la hora de elaborar un proyecto y son:
El hombre: concebido como unidad ética y estética 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 información y ésta es comunicación.
El ambiente: porque nos exige el conocimiento de la realidad física para contribuir a la
armonía del hábitat, y la realidad de otros contextos para entender la estructura y el
significado del ambiente humano.
La economía: porque engloba todos los aspectos relacionado con el estudio del costo y la
racionalización de los procesos y materiales para la ejecución de los elementos.
Sesión
5
31
Áreas
del
Diseño
Gráfico
Para información
Para administración
Completa el siguiente cuadro sinóptico donde se indique la
clasificación de las áreas del diseño gráfico.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 11
32
1. José Raúl está preparando un volante donde representa un logotipo para la publicidad de un
producto nuevo a que área del diseño gráfico se está enfocando.
a) Mercadeo
b) Persuasión
c) Administración d) Educación e) Información
2. María trabaja en una fabrica le asignaron realizar señalamientos para abordar la seguridad
industrial de acuerdo al manejo del espacio del trabajo, a que área del diseño se enfoca:
a) Persuasión
b) Administración
c) Información d) Educación e) Mercadeo
3. Juan Francisco está elaborando un material didáctico del tema elaboración de páginas
web con un instructivo de cómo realizar tu sitio web, indica que área del diseño gráfico
está representando.
a) Persuasión b) Mercadeo
c) Administración d) Información e) Educación
4. Patricia es una escritora su editorial le está preparando la portada que representara su
libro, que área del diseño gráfico se enfocara en este trabajo.
a) Persuasión b) Mercadeo
c) Administración d) Información e) Educación
Teorías del diseño
Minimalismo
Para diseñar es necesario conocer algunas teorías que ayuda al diseñador a plasmar la idea
central de lo que quiere comunicar aumentando la calidad de los diseños, entre estas teorías que
han dado un realce a los diseños 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 años sesenta y está representada por Donald Judd, Sol LeWitt, Carl Andre, Dan
Flavin y Robert Morris. Se dice que esta teoría está basada en la tendencia
constructivista que ya describiste.
Al estudiar los antecedentes del diseño encontramos que algunos
diseñadores se basaron en la dirección de la Escuela de Arte y Diseño 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 artísticos así que
podemos decir que el diseño es todo un arte,
Sesión
6
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 12
33
Por ello vamos a analizar la teoría del minimalismo, como sus principales características
encontramos que utiliza colores puros, le asigna importancia al todo sobre las partes, utiliza
formas simples y geométricas.
A continuación se te presentan una serie de imágenes 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.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 13
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 teoría del minimalismo, EXCEPTO: a) Sol LeWitt
b) Carl Andre
c) Robert Morris d) El Lissitzky e) Dan Flavin
3. Entre las principales características de esta teoría se encuentra el uso de colores puros, formas simples y geométricas.
a) Minimalismo b) Cubismo
c) Conceptualismo d) Futurismo e) Simplismo
Conceptualismo:
Así como analizamos la teoría Minimalista el diseño gráfico está
involucrado en otras teorías que han hecho de los diseñadores unos
buenos comunicadores visuales encontrando al Conceptualismo como una
de ellas. Esta teoría describe que existen ideas o conceptos en la mente
implicando más que meras palabras, además mantiene que aunque los
universales (abstracciones o ideas abstractas) no tienen existencia en el
mundo externo, pero son producto de la mente.
Sesión
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 módulo de
aprendizaje. Para realizar este ejercicio, deberás conseguir
material que puedas utilizar como popotes, cartón, cartulina,
colores según la obra que quieras representar, lo deberás
presentar ante el grupo explicando cómo lo elaboraste y porque
seleccionaste este modelo
Grupo Ejercicio no. 14
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 15
35
Como parte del conceptualismo encontramos al arte conceptual conocido como idea art,
identificando que las ideas en un obra son el elemento más importante dejando al objeto como
segundo término. 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 .
Déjame contarte que Marcel Duchamp tomo del collage
(técnica artística que ensambla elementos diversos en un
todo unificado) los principios para desarrollar el objeto
encontrado. Es decir un objeto encontrado es una
representación de un collage.
En el recuadro que se te presenta a continuación 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 teorías del diseño gráfico utiliza los
recortables que aparecen al final de la unidad. Se te calificará con
la lista de cotejo del final de la unidad.
Individual Ejercicio no. 16
EJEMPLO
36
1. Teoría que mantiene que los universales (ideas abstractas) no tienen existencia en el mundo externo, existen como ideas en la mente donde implican más que meras palabras.
a) Cubismo b) Conceptualismo
c) Dadaísmo 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. Técnica 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 diseñador gráfico tome en cuenta antes los conceptos de las teorías del
diseño así como la importancia que tiene el diseño y el impacto que representa hoy en la
actualidad, de la misma manera debe conocer los orígenes y el enfoque que se le da al diseño.
Hoy en la actualidad la sociedad bombardeada de las nuevas tecnologías de
la información, 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
educación.
Como ejemplo primordial del ciberespacio se
encuentran los medios visuales por versiones
electrónicas, para ello es necesario conocer las formas de dar a mostrar
e interactuar la información, hay por lo tanto que saber diseñar.
Sesión
8
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 17
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
37
1. El cubismo, futurismo, conceptualismo, dadaísmo entre otros forman parte de __________ del diseño.
a) Antecedentes b) Importancia
c) Teorías d) Enfoque
e) Impacto
2. El diseño gráfico es considerado un arte por lo que todo diseñador debe contar con ciertas habilidades personales tales como:
a) Autoestima y creatividad
b) poder de análisis y síntesis
c) Presencia y liquidez
d) Entusiasmo y persuasión
e) Imaginación y Autoestima
3. Estas son algunas teorías del diseño que repercuten en los orígenes y han establecido criterios para ser utilizados por un diseñador gráfico.
a) Cubismo, Dadaísmo
b) Futurismo, Minimalismo
c) Minimalismo, Conceptualismo
d) Dadaísmo, Futurismo
e) Conceptualismo, Cubismo
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 19
Elabora un ensayo donde representes la importancia del diseño y
su impacto con relación al su origen y enfoque basados en las
teorías del diseño.
Captura tu ensayo en el procesador de textos, tomando en cuenta
que como extensión mínima dos cuartillas, entrega el ensayo
impreso. Comenta con tus compañeros 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
Sesión
9
Contesta las siguientes actividades
38
Secuencia didáctica 2
1.2. FORMATOS DE DISEÑO.
1.2.1. Zonas áureas
1.2.2. Dirección
1.2.3. Sentido
1.2.4. Equilibrio
Identifica las reglas de las zonas áureas.
Identifica los conceptos de dirección, sentido y equilibrio en las teorías del color.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
Conocimientos previos: A continuación se te presentan una serie de
preguntas contéstalas lo más ampliamente, comenta tus respuestas ante
el grupo para compartir sus conocimientos previos bajo lluvia de ideas
dirigidas por el docente.
Individual Ejercicio no. 20
39
1 ¿Qué es un formato?
2 ¿A qué se refiere Dirección dentro del diseño gráfico?
3 ¿Qué son las Zonas Áureas?
En equipo de tres personas, elabora un collage en el que se
ilustre diversas fotografías (al menos 10) de artistas, paisajes,
anuncios publicitarios entre otros. Para realizar este ejercicio,
deberás 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 módulo de aprendizaje.
Grupo Ejercicio no. 21
40
1. Cuando se pretende proyectar una fotografía o paisaje se toman en cuenta algunas reglas una de ellas indica que hay que realizar una división de dos líneas verticales y dos horizontales esto se refiera a:
a) Formato b) Dirección
c) Equilibrio d) Zonas áureas
e) Sentido
2. Al tomar una fotografía o al mostrar imágenes se debe considerar esta característica que representa un acomodo de los objetos que se están proyectando de forma uniforme.
a) Formato
b) Dirección c) Sentido d) Zonas áureas
e) Equilibrio
3. Es la forma y el tamaño del trabajo realizado ya sea para presentarlo o para imprimirlo, en diseño se encuentran de este tipo los de ISO (A0…A12, B0…B12, C0…C12), DIN (A3, A4).
a) Formato
b) Diseño
c) Imagen d) Papel e) Estilo
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 22
Sesión
10
Realiza las siguientes actividades
41
Zonas áureas
En diseño gráfico encontramos que hay que tomarse fotografías 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 proporción y el encuadre, en el sentido de que las propiedades geométricas hacen de la
razón áurea algo más interesante que una división simple.
En todas las composiciones simples y de mucho impacto visual están presentes las zonas
áureas, solo es necesario dividir en con dos líneas horizontales y dos verticales las imágenes.
Dirección
Dirección es para donde va uno o varios elementos del diseño
puede tener un elemento 15 grados o 45, etc. El diseño gráfico
tiene como propósito la conceptualización y posterior confección o
facturación de objetos en serie. El diseño viene a redescubrir la
forma de los objetos; viene de hecho a presentarlos y
representarlos según la ocasión, gustos del consumidor,
necesidades del producto,
factores económicos, sociales e históricos.
Todo diseño debe cubrir esta característica ya que ello
impactara al consumidor (si se tratase de un anuncio
publicitario), al cibernauta (en el caso de un diseño visto
en Internet), esta dirección en el diseño tratara de
proyectar esta comunicación visual como lo es un diseño gráfico.
Otro elemento importante en un diseño gráfico es el contorno para ello también se considera la
dirección principalmente en las figuras geométricas como el cuadrado, círculo, triángulo entre
otros comentando lo siguiente como ejemplo:
Dependiendo de cómo coloquemos ciertas figuras podremos tener una sensación u otra, por
ejemplo, el triángulo y el cuadrado si los representamos apoyados en la base nos dará una
sensación de estabilidad y también 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 continuación elabora un
paisaje tomando en cuenta la característica de la zona áurea y
representa la dirección del gráfico, para ello deberás de traer
colores.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 23
42
En equipo de tres personas, toma cinco fotografías de diversos
paisajes, objetos o personas, donde tomes como característica la
zona áurea, entrega impresas las imágenes con las dos divisiones
horizontales y dos verticales.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Grupo Ejercicio no. 24
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que corresponda
a cada una de ellas.
Individual Ejercicio no. 25
43
1. Como parte de la característica de zona áurea se debe de dividir la imagen en cuatro líneas 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 característica a considerar en el diseño gráfico que puede representarse a 15 o 45 grados:
a) Equilibrio
b) Dirección 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 composición gráfica pueden ser
imaginados como los pesos de una balanza. Una composición se encuentra en equilibrio si los
pesos de los distintos elementos que la forman se compensan entre sí.
Este criterio se aplica principalmente al diseño global, es decir, a la
disposición de los elementos sobre la superficie de trabajo.
Normalmente se busca este equilibrio, aunque en alguna ocasión se
provoca un desequilibrio intencionado para conseguir unos resultados
específicos en un diseño.
Se define al equilibrio como una apreciación subjetiva, en la cual, los
elementos de una composición no se van a desprender y se
consideran dos tipos que son: Equilibrio estático y equilibrio dinámico:
El equilibrio estático proyecta el centro de gravedad dentro del área delimitada por los contornos
externos de los pies. El equilibrio dinámico, es aquel estado durante el cual la persona se
mueve, y durante este movimiento modifica constantemente su
sustentación.
Según la física el equilibrio es el estado en el cual las fuerzas que
operan en él se compensan mutuamente. Es la distribución de las
partes por la cual el todo ha llegado a una situación de reposo. No
obstante, la idea de equilibrio implica fuerza y dirección, por lo tanto
también movimiento. Esta noción recibe cabida también en el arte
mediante la percepción 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 escénico). El equilibrio se
relaciona principalmente con el peso compositivo, la dirección y la anisotropía (en todas las
direcciones).
Sesión
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) Dinámico d) Estático 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 sustentación.
a) Estático
b) Direccional c) Dimensional d) Dinámico
e) Funcional
3. Se considera como una apreciación subjetiva, en la cual, los elementos de una composición no se van a desprender ejerciendo una fuerza óptica.
a) Sentido b) Equilibrio c) Dirección d) Zona áurea e) Contorno
Elabora un mapa conceptual donde representes los conceptos de
equilibrio y sentido en diseño gráfico.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 26
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 27
45
Para el diseño gráfico es necesario que el diseñador tenga conocimientos de algunos formatos
en el diseño como se ha mencionado entre ellos se destaca las
zonas áureas, enfocando lo que se quiere mostrar en esa división
de líneas horizontales y verticales para enfocar lo que se quiere dar
a presentar, al proyectar algunos elementos considerar también el
equilibrio que mostraran, la dirección y el sentido. Esto lleva a
considerar en el diseño gráfico su capacidad comunicativa se mida
por la influencia que ejerce en el público y por
la eficacia de los medios utilizados para
difundir esos mensajes, por lo que estos formatos ayudan a tal influencia.
La dirección de lo que se quiere proyectar es algo que también se debe
tomar muy en cuenta, dependiendo de ello es el impacto que provocara la
imagen en el cliente, espectador o usuario.
Además debe de quedar equilibrado entre los colores, tipografías,
imágenes que se proyecten porque hay que saber organizar en un cartel por ejemplo la idea que
se necesite de la publicación.
Sesión
12
Elabora un cartel indicando los valores de CECyTES, toma en
cuenta los formatos de diseño, deberá incluir la Zona áurea de la
imagen que se proyecte, dirección, sentido y equilibrio
Comparte el cartel ante el grupo, indicando las partes del cartel
donde representaste cada formato.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 28
Desarrolla la siguiente actividad para evaluar los aprendizajes logrados
durante el desarrollo de la secuencia.
46
1. Joaquín desea proyectar una imagen como parte de un cartel para darle realce dicha imagen se recomienda dividirla en dos líneas verticales y dos horizontales, a este formato se le llama:
a) Dirección b) Sentido
c) Equilibrio d) Zona áurea e) Estilo
2. Al proyectar diseños gráficos como parte del formato se debe considerar un acomodo de los elementos que formaran el diseño esto es para que se vea una fuerza óptica a este acomodo se le conoce como:
a) Equilibrio
b) Estilo c) Zona áurea d) Dirección
e) Sentido
3. Martha se encuentra estudiando diseño gráfico le solicitaron elaborar un gráfico de una empresa para ello tiene que acomodar a 45 grados la imagen este formato en el diseño se llama:
a) Estilo b) Equilibrio c) Dirección d) Sentido e) Zona áurea
En equipo de tres personas, Elabora un mapa conceptual donde
representes los formatos del diseño: Zona áurea, dirección,
sentido y equilibrio. Explicarás tu mapa conceptual ante el grupo.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Grupo Ejercicio no. 29
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual
Ejercicio no.30
47
Secuencia didáctica 3
1.3. TEORIAS DEL COLOR.
1.3.1. Circulo cromático
1.3.2. Contrastes
1.3.3. Colores RGB (Red, Green y Blue) y CMY (Cain, Magenta y Yellow)
Sesión
13
Aplicar la teoría del color considerando el círculo cromático, contrastes y colores RGB y CMY.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
Realiza las siguientes actividades
Conocimientos previos: A continuación se te presentan una serie de
preguntas contéstalas lo más ampliamente, comenta tus respuestas ante
el grupo para compartir sus conocimientos previos bajo lluvia de ideas
dirigidas por el docente.
Individual Ejercicio no. 31
48
1. Menciona los colores que se denominan primarios
2 Indica que significado tiene el color azul según la
psicología del color.
3 Indica que colores representan al círculo cromático
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.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 32
50
1. Son los colores que representan a la teoría del color CMY. a) Cian, Magenta, Yellow
b) Cielo, Morado, Yellow
c) Café Magenta Yellow
d) Yellow Marrón Café
e) Magenta Cielo Yellow
2. Martin está elaborando un gráfico, el maestro Juan Carlos le indico que tiene que basarse en el círculo cromático para colorearlo, indícale como cuantos colores primarios conforma dicho circulo.
a) Doce
b) Seis c) Cuatro d) Dos
e) Tres
3. Que colores representan a la teoría del color RGB: a) Rosa, Gris, Blanco
b) Rojo, Verde, Azúl
c) Rosa, Verde, Blanco
d) Rojo, Verde, Negro
e) Rojo, Gris, Negro
Teoría del color
Como otro aspecto a considerar al diseñar tenemos las teorías del color, ya que ello forma parte
esencial en toda comunicación visual ya que es el ojo humano quien percibirá los colores
quienes tienen mucho que contar.
A través de los años encontramos al filósofo Aristóteles quien indicó que todos los colores se
forman de la mezcla de cuatro colores y otorgó un papel
fundamental a la incidencia de la luz y la sombra sobre los
mismos; los colores básicos eran los de tierra, fuego, agua y
cielo.
Leonardo Da Vinci también definió al color
como propio de la materia estableciendo la siguiente escala de colores básicos:
blanco como el principal, este permite recibir a los demás, después estableció
al amarillo para la tierra, verde para el agua, azul para el cielo, rojo para el
fuego y negro para la obscuridad
Propiedades del color: tono, saturación, brillo y luminosidad.
Sesión
14
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 33
Realiza las siguientes actividades
51
El tomate nos parece de color rojo, porque el ojo sólo recibe la luz roja reflejada por la hortaliza,
absorbe el verde y el azul y refleja solamente el rojo. Un plátano amarillo absorbe el color azul y
refleja los colores rojo y verde, los cuales sumados permiten visualizar el color amarillo.
Elabora un cuadro sinóptico donde representes las propiedades
del color como parte de las teorías del color, para ello consulta la
liga: http://www.fotonostra.com/grafico/teoriacolor.htm
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 34
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 35
Propiedade
s del color
Tono
Brillo
Saturación
Luminosida
d
___________________________________
___________________________________
___________________________________
_________
___________________________________
___________________________________
___________________________________
_________
___________________________________
___________________________________
___________________________________
_________
___________________________________
___________________________________
___________________________________
_________
52
1. Es el atributo que diferencia el color identificando los colores verde, violeta y anaranjado. . a) Saturación 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) Saturación
3. Es la cantidad de luz emitida por una fuente lumínica o reflejada por una superficie. a) Brillo b) Tono c) Saturación d) Color e) Luminosidad
Circulo cromático
Se denomina círculo cromático a la representación gráfica sobre un círculo con seis colores
reflejados en la descomposición de la luz visible del espectro solar
según el siguiente orden: púrpura, rojo, amarillo, verde, azul cian y
azul obscuro. Por lo tanto, en principio se tienen tres colores primarios
púrpura, amarillo y azul cian y tres secundarios rojo, verde y azul
obscuro, completándose con otros seis resultantes de las mezclas de
los primarios con los secundarios más próximos, con lo que el circulo
cromático estaría compuesto por doce colores: tres primarios (P), tres
secundarios (S) y seis terciarios (T).
Sesión
15
A continuación se te presenta el circulo cromático coloréalo de
acuerdo a los tres colores primarios, tres secundarios y seis
terciarios. Lista de cotejo al final de la unidad.
Individual Ejercicio no. 36
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 teoría del color que lo representan 3 colores primarios, tres secundarios y seis terciarios, como se llama este formato:
a) RGB b) CMY
c) Círculo cromático 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 cromático para combinar colores terciarios indícales 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
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 38
En equipo de tres integrantes dibuja en una manta de un metro
cuadrado el círculo cromático, donde colores con pinturas de agua
e indiques el nombre de los colores primarios, secundarios y
terciarios, expón ante el grupo el resultado de tu trabajo. Tu guía
es el siguiente dibujo. Lista de cotejo al final de la unidad.
Grupo Ejercicio no. 37
Colores primarios
Colores secundarios
Colores terciarios
54
3. Joaquín se encuentra elaborando una pintura al óleo, le indicaron que hay un formato de la
teoría del color que nombra a los colores primarios, secundarios y terciarios, indícale 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 fenómeno 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
composición gráfica ya que una de las formas más 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 cálidos, fríos y neutros. Se llaman colores cálidos
aquellos que van del rojo al amarillo y los colores fríos son los que van del azul al verde, aunque
va a depender un mismo color se puede comportar como cálido si se combina con un color o
bien frío.
El amarillo puede ser cálido con respecto a un azul y frío con
respecto a un rojo. Y también un mismo amarillo puede ser
más cálido si está rodeado de colores fríos y menos cálidos si
lo rodean con rojo, naranja, etc.
Existen diferentes tipos de contrastes: de luminosidad, de valor, de saturación, de temperatura,
entre otros.
Todo diseñador y en especial de páginas Web debe tomar en
cuenta esta característica, al contrastar los colores puede ser
benéfico el hacer una buena contrastación 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 diseñador se base en los colores representativos
de la empresa solo es necesario saberlos contrastar para dar un
mejor impacto en el usuario o cibernauta.
Sesión
16
EJEMPLO
55
A continuación se te presenta un mapa donde se representa los
tipos de contrastes completa sobre los cuadros el tipo de contraste
y la descripción que representa el mismo. Lista de cotejo al final de
la unidad.
Individual Ejercicio no.39
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 40
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) Saturación
c) Luminosidad d) Temperatura e) Complementario
2. Mariza se encuentra diseñando 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) Saturación
b) Temperatura c) Valor d) Simultáneo
e) Metamerismo
3. Al estar contrastando dos colores, cuando el color más claro parecerá el más alto y el más obscuro parecerá el más bajo, que tipo de contraste se comporta de esta manera.
a) Complementario b) Temperatura c) Luminosidad d) Saturación e) Valor
Psicología del color
El color desprende diferentes expresiones del ambiente, que pueden transmitirnos la sensación
de calma, plenitud, alegría, violencia, maldad, etc.
La psicología 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 sensación que es reconocida por el cerebro
humano, la percibe y representa una acción.
Color Blanco: Es el que mayor sensibilidad posee frente a la luz. Es la
suma o síntesis de todos los colores, y el símbolo de lo absoluto, de la
unidad y de la inocencia, significa paz o rendición. Mezclado con
cualquier color reduce su croma y cambia sus potencias psíquicas, la
del blanco es siempre positiva y afirmativa. Los cuerpos blancos nos
dan la idea de pureza y modestia. El blanco crea una impresión
luminosa de vacío, positivo infinito.
El color Negro: Símbolo del error, del mal, el misterio y en
ocasiones simbólica algo impuro y maligno. Es la muerte, es la
ausencia del color. También transmite nobleza y elegancia.
Color gris: Es el centro de todo ya que se encuentra entre la
transición entre el blanco y el negro, y el producto de la mezcla de ambos. Simboliza neutralidad,
indecisión y ausencia de energía. Muchas veces también expresa tristeza, duda y melancolía. El
color gris es una fusión de alegrías y penas, del bien y del mal. Da la impresión de frialdad
metálica, pero también sensación de brillantez, lujo y elegancia.
EJEMPLO
Sesión
17
57
A continuación se te presenta un cuadro sinóptico para que
describas el significado de cada uno de los colores según la
psicología del color. Se te calificará con la lista de cotejo que se
encuentra al final de la unidad.
Individual Ejercicio no. 41
Psicología del
color
Blanco
Amarillo
Negro
Azul
_____________________________________________
_____________________________________________
_______________
_____________________________________________
_____________________________________________
_______________
_____________________________________________
_____________________________________________
_______________
_____________________________________________
_____________________________________________
_______________
58
1. Según la psicología del color, este indica que arrogancia, fuerza, voluntad y estímulo, relacionado con la inteligencia.
a) Violeta b) Amarillo
c) Rojo d) Blanco e) Negro
2. Es el color que representa alegría, acción, destrucción e impulso, expresa además sensualidad, virilidad y energía.
a) Blanco b) Verde c) Negro d) Rojo e) Amarillo
3. Hace algunos años algunos pintores al momento de proyectar sus pinturas se basaban en la emoción que proyectaría la imagen de acuerdo a los colores que utilizaban, esto se refiere a:
a) Psicología del color
b) Teoría 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 imágenes que serán mostradas en
monitores de computadora o que serán impresas en impresoras de
papel fotográfico.
Las imágenes RGB utilizan tres colores para reproducir en pantalla
hasta 16,7 millones de colores. RGB es el modo por defecto para
las imágenes 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 visualización.
El modo RGB asigna un valor de intensidad a cada píxel 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 podría tener un valor R de 246, un valor G de 20 y un valor B de 50. El rojo más
brillante que se puede conseguir es el R: 255, G: 0, B: 0. Cuando los valores de los tres
componentes son idénticos, 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.
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 42
Sesión
18
59
Este modo es el más cercano ya que es el usado en la iluminación artificial y en la mayoría de
monitores y pantallas gráficas proporcionando la mayoría del espectro visible mezclando las
luces generadas por fósforos rojos, verdes y azules. Estos tres colores primarios crean el blanco
cuando se combinan simultáneamente por eso se llaman también "aditivos".
Espacio de color RGB
Al mezclarse dos a dos, crean los colores secundarios. Al mezclarse luz verde con azul se
obtiene el cián, 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 básicos se van
originando los diferentes tonos de la gama del espectro.
Este formato de color se recomienda para la creación de páginas
web, utilizando una buena combinación provocara la reacción y la
proyección que necesite tomar del auditorio o cibernautas.
A continuación se te presenta el formato RGB coloréalo de
acuerdo a los tres colores que representa como primarios y los que
resultan de su combinación, indica sobre la línea el color que
representa en el círculo. Lista de cotejo al final de la unidad.
Individual Ejercicio no. 43
60
Formato RGB
1. Es el formato de color de acuerdo a la teoría que representa colores primarios Rojo, Verde, Azul.
a) VGA b) Psicología del color
c) Circulo cromático
d) RGB e) CMY
2. Al combinar los tres colores primarios según la teoría 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
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 44
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
más claros (iluminados) tienen un porcentaje pequeño de tinta,
mientras que los más oscuros (sombras) tienen porcentajes mayores.
Por ejemplo, un rojo brillante podría tener 2% de cyan, 93% de
magenta, 90% de amarillo y 0% de negro.
En las imágenes 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 preparación de imágenes que se van a
imprimir en cualquier sistema de impresión de tintas. Aunque CMY es un modelo de color
estándar, puede variar el rango exacto de los colores representados, dependiendo de la
imprenta y las condiciones de impresión.
A continuación se te presenta el circulo cromático coloréalo 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.
Individual Ejercicio no.45
Sesión
19
62
Formato CMY
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 46
63
1. Este tipo de formato según la teoría 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 cromático
2. Es la combinación 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 diseñadores y en especial de los creadores de páginas
Web es necesario tener conocimiento de las teorías 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.
Sesión
20
Basándote en una página web de alguna empresa comercial,
examínala para describir las siguientes características: colores que
utiliza, tipos de letra.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad.
Individual Ejercicio no. 47
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
64
1. Es un creador de comunicaciones, es el profesionista que mediante un diseño construye mensajes con medios visuales.
a) Diseñador gráfico
b) Pintor
c) Dibujante d) Arquitecto e) Ingeniero Industrial
2. En una página web al momento de diseñarla, las empresas consideran en su diseño algunas características basadas en el logotipo de sus productos, esta características está basada en:
a) Color
b) Estilo
c) Letra d) tamaño e) textura
3. La importancia del diseño gráfico que se está elaborando dependerá en gran parte del: a) Dibujante b) Diseñador
c) Empresario d) Cliente e) Publicista
4. Símbolo que utiliza normalmente una empresa o marca para que la identifiquen con más facilidad.
a) Dibujo
b) Imagen
c) Logotipo d) Esquema e) Croquis
5. Plasmó los principios de la tipografía moderna en su libro de 1928, aunque más tarde la califico
de fascista (del régimen político que promulgaba un gobierno autoritario).
a) William Morris
b) Jan Tschichold
c) Herbert Bayer d) László Moholy-Nagy
e) El Lissitzky
6. Movimiento artístico que se centro en las formas geométricas fundamentales como el triángulo,
el cuadrado, cruz y círculo.
a) Dadaismo b) Constructivismo
c) Futurismo d) Suprematismo e) Cubismo
7. Juan Francisco está elaborando un material didáctico del tema elaboración de páginas web con
un instructivo de cómo realizar tu sitio web, indica que área del diseño gráfico está
representando.
a) Persuasión b) Mercadeo
c) Administración d) Información e) Educación
8. Teoría que mantiene que los universales (ideas abstractas) no tienen existencia en el mundo externo, existen como ideas en la mente donde implican más que meras palabras.
a) Cubismo b) Conceptualismo
c) Dadaísmo d) Futurismo e) Minimalismo
9. Técnica 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: _________________________________________________
AUTOEVALUACIÓN
65
10. Estas son algunas teorías del diseño que repercuten en los orígenes y han establecido criterios
para ser utilizados por un diseñador gráfico.
a) Cubismo, Dadaísmo
b) Futurismo, Minimalismo
c) Minimalismo, Conceptualismo
d) Dadaísmo, Futurismo
e) Conceptualismo, Cubismo
11. Como parte de la característica de zona áurea se debe de dividir la imagen en cuatro líneas 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 apreciación subjetiva, en la cual, los elementos de una composición no se
van a desprender ejerciendo una fuerza óptica.
a) Sentido b) Equilibrio c) Dirección d) Zona áurea e) Contorno
13. Son los colores que representan a la teoría del color CMY. a) Cian, Magenta, Yellow
b) Cielo, Morado, Yellow
c) Café Magenta Yellow
d) Yellow Marrón 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 cromático para combinar colores terciarios indícales 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 según la teoría del color crean el color: a) Negro
b) Amarillo c ) Cian d) Blanco
e) Anaranjado
16. Este tipo de formato según la teoría 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 cromático
17. Es la combinación 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 años algunos pintores al momento de proyectar sus pinturas se basaban en la
emoción que proyectaría la imagen de acuerdo a los colores que utilizaban, esto se refiere a:
a) Psicología del color
b) Teoría 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) Saturación
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) Saturación
66
INSTRUMENTOS DE EVALUACIÓN
LISTA DE COTEJO : TEMA 1.1
Nombre del alumno(a): Campo De Aplicación
Asignatura: Elaboración de páginas web
Elementos fundamentales de
diseño
Evidencia por desempeño Teorías del diseño
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de la actividades
Características Cumple
Subtema 1.1.1 SI NO
Importancia del diseño y su impacto
a) Entrega puntual del trabajo.
b) Presenta al menos 10 imágenes 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
Importancia del diseño y su impacto
a) Entrega puntual del trabajo.
b) Contiene cada concepto en el mapa
c) Cumple reglas ortográficas, de redacción y sintaxis.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Características Cumple
Subtema 1.1.1
SI NO
Importancia del diseño y su impacto
67
a) Entrega puntual del trabajo.
b) Visito los 5 sitios web.
c) Describió para cada sitio visitado la imagen, colores, estilo y la información
d) Existe calidad en la presentación trabajo.
Observaciones:
Subtema 1.1.2
SI NO
Origen y enfoque del diseño
a) Entrega puntual del trabajo.
b) Presenta la totalidad de los conceptos a investigar.
c) Cumple reglas ortográficas, de redacción y sintaxis.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Subtema 1.1.2
SI NO
Origen y enfoque del diseño
a) Entrega puntual del trabajo.
b) Esta completas las clasificaciones del área del diseño
c) Cumple reglas ortográficas, de redacción y sintaxis.
d) Existe calidad en la presentación trabajo.
Observaciones:
Características Cumple
Subtema 1.1.3 SI NO
Teorías del diseño: minimalismo.
a) Entrega puntual del trabajo.
b) Indico correctamente cada una de las imágenes según el diseñador
c) Existe calidad en el trabajo.
68
Observaciones:
Características Cumple
Subtema 1.1.3. SI NO
Teorías del diseño: minimalismo
a) Entrega puntual del trabajo.
b) Cumple con las características del diseño con respecto a la teoría minimalista.
c) Todos los integrantes del equipo participaron en la elaboración del prototipo.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Características Cumple
Subtema 1.1.3. SI NO
Teorías del diseño: conceptualismo
a) Entrega puntual del trabajo.
b) Cumple con las características del diseño con respecto a la teoría
conceptualista.
c) Utilizó todas las imágenes de los recortables
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Características Cumple
Subtema 1.1.1, 1.1.2, 1.1.3 SI NO
Elementos fundamentales de diseño: impacto, origen y teorías del diseño.
a) Entrega puntual del trabajo.
b) Cumple reglas ortográficas, de redacción y sintaxis.
c) Realizo la descripción detallada de la importancia del diseño 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:
LISTA DE COTEJO : TEMA 1.2
Nombre del alumno(a): Campo De Aplicación
Asignatura: Elaboración de Páginas Web
Formatos de
diseño
Evidencia por desempeño: Formatos de diseño
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de la actividades
Características Cumple
Subtema 1.2.1
SI NO
Formatos de diseño
a) Entrega puntual del trabajo.
b) Presenta al menos 10 imágenes para representar las fotografías, imágenes, anuncios y paisajes.
c) Existe calidad en el trabajo.
d) Presenta coherencia el trabajo que le fue asignado.
a) Entrega del trabajo en tiempo y forma (responsabilidad).
Observaciones:
Características Cumple
Subtema 1.2.1
SI NO
Zonas áureas, dirección
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:
Características Cumple
70
Subtema 1.2.1., 1.2.2.
SI NO
Zonas áureas, dirección
a) Entrego las cinco fotografías impresas
b) Dividió las cinco fotografías en dos líneas verticales y dos líneas horizontales.
c) Se visualiza la sección áurea en las imágenes fotografiadas.
d) Existe calidad en el trabajo.
e) Entrega del trabajo en tiempo y forma (responsabilidad).
Observaciones:
Características Cumple
Subtema 1.2.3., 1.2.4.
SI NO
Sentido y equilibrio
a) Entrega puntual del trabajo.
b) Contiene cada concepto en el mapa
c) Cumple reglas ortográficas, de redacción y sintaxis.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Características Cumple
Subtema 1.2.1., 1.2.2., 1.2.3., 1.2.4.
SI NO
Formatos de diseño
a) Entrega puntual del trabajo.
b) Contiene buena presentación del cartel elaborado.
c) Cumple con las características de zona áurea, dirección, sentido y equilibrio al mostrar el cartel.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
71
Características Cumple
Subtema 1.2.1., 1.2.2., 1.2.3., 1.2.4.
SI NO
Formatos de diseño
a) Entrega puntual del trabajo.
b) Contiene cada concepto en el mapa
c) Cumple reglas ortográficas, de redacción y sintaxis.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
f) Todos los integrantes participaron en la elaboración y presentación del mapa.
Observaciones:
LISTA DE COTEJO : TEMA 1.3
Nombre del alumno(a): Campo De Aplicación
Asignatura: Elaboración de Páginas Web
Teorías del
Color
Evidencia por desempeño: Teorías del color, circulo cromático, contrastes, RGB, CMY
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de la actividades
Características Cumple
Subtema 1.3. 1
SI NO
Circulo cromático
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 presentación de su trabajo
Observaciones:
Características Cumple
72
Subtema 1.3.1.
SI NO
Circulo cromático
a) Entrega puntual del trabajo
b) Completo el cuadro sinóptico con todos los términos de la teoría del color
c) Presento limpieza el trabajo que le fue encargado
d) Cumple con las reglas ortográficas
Observaciones:
Características Cumple
Subtema 1.3.1.
SI NO
Circulo cromático
a) Entrega puntual del trabajo.
b) Coloreo correctamente el círculo de acuerdo a los colores primarios, secundarios y terciarios.
c) Existe calidad en el trabajo.
d) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Características Cumple
Subtema 1.3.1.
SI NO
Circulo cromático
a) Entrega puntual del trabajo.
b) Elaboro el circulo cromático en manta de un metro cuadrado
c) Coloreo e indico los colores de círculo cromático.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
f) Todos los participantes del equipo participaron
Observaciones:
Características Cumple
73
Subtema 1.3.2.
SI NO
Contrastes
a) Entrega puntual del trabajo.
b) Indico el mapa con los tipos de contrastes
c) Existe calidad en el trabajo.
d) Entrega puntual del trabajo.
Observaciones
Características Cumple
Subtema 1.3.2.
SI NO
Contrastes, psicología del color
a) Entrega puntual del trabajo.
b) Indico el significado de los colores solicitados en el cuadro sinóptico
c) Existe calidad en el trabajo.
d) Entrega puntual del trabajo.
Observaciones
Características Cumple
Subtema 1.3.3.
SI NO
Colores RGB
a) Entrega puntual del trabajo
b) Indico cada uno de los colores
c) Coloreo el formato RGB
d) Presenta limpieza en el trabajo que le fue asignado
Observaciones
Características Cumple
Subtema 1.3.3.
SI NO
Colores CMY
74
a) Entrega puntual del trabajo
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
básicos de un
lenguaje usado
en la creación de
páginas Web
(HTLM)
76
COMPETENCIAS DE LA UNIDAD
El alumno:
En la utilización de un software de aplicación de diseño, será capaz de crear páginas Web manipulando las
herramientas de Dreamweaver, mediante los siguientes logros:
Identificar los conceptos básicos para la creación de una página Web
Identificar la clasificación de las páginas Web
Identificar la estructura que conforma una página Web
Identificar la sintaxis de las etiquetas HTML
Aplicar las etiquetas primarias en a creación fe una página Web
Aplicar la etiqueta de hipervínculos en una página Web
Aplicar los controles básicos de un formulario en la creación de una página Web
Aplica las etiquetas de inserción y edición de tablas
Aplica las etiquetas en el manejo de imágenes en una página Web
Aplica las etiquetas en la inserción de sonidos y videos en la página Web
Aplicar el servicio de correo en una página Web
TEMARIO
2.1. Identificar los contenidos de una página web
2.1.1. Conceptos básicos (página Web, sitio Web, lenguajes Web)
2.1.2. Objetivo y clasificación de página Web
2.1.3. Estructura de una página Web
2.2. Utilizar etiquetas en una página web
2.2.1. Sintaxis de etiquetas
2.2.2. Etiquetas primarias
2.2.3. Etiquetas de hipervínculo
2.2.4. Manipular formularios en una página Web
2.2.5. Insertar y editar tablas en una página Web
2.2.6. Manipular imágenes y animaciones en una página Web
2.2.7. Insertar sonido y video en una página Web
2.2.8. Implementar servicios de correo en una página 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 económica, no son fáciles de crear ni mantener y no siempre
siguen sus reglas
a) Comercial b) Buscador c) Político d) Educativo e) Ocio
4.- Cuál 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 diseñar 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.- Cuál es el símbolo que permite que una etiqueta se cierre?
a) $ b) | c) % d) / e) \
9.- Cuál es el atributo que especifica la página a la cual será asociado un vínculo?
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 evaluación 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 paréntesis de la izquierda las letras de la respuesta correcta. En la página 208 se encuentran las respuestas correctas.
Evaluación diagnóstica
78
2.1. IDENTIFICAR LOS CONTENIDOS DE UNA PÁGINA WEB
2.1.1. Conceptos básicos (página Web, sitio Web, lenguajes Web)
2.1.2. Objetivo y clasificación de pagina web
2.1.3. Estructura de una página web
En el grupo con tu maestro, realiza una lluvia de ideas de los siguientes
cuestionamientos: ¿Te has preguntado cómo hacen las páginas que visitas en
Internet. ¿Qué programa o qué lenguaje se utiliza para crearlas?
Definiciones básicas en la creación de páginas Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Sesión
21
Anota tus comentarios
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
79
Conceptos
Una página Web, también conocida como página de Internet, es un documento elaborado en un
lenguaje de programación y que es adaptado para la Web y que normalmente forma parte de
un sitio Web. La característica principal de una página Web los enlaces a otras páginas
conocidos como hiperenlaces, siendo esto el fundamento de la Web.
Toda página Web está compuesta fundamentalmente por información (sólo texto o multimedia) e hiperenlaces. Las páginas Web están 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 páginas Web, típicamente 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 públicamente constituyen la gigantesca www (world wide web) de información.
Lenguajes Web
La funcionalidad del lenguaje HTML (Hypertext Markup Language) es la
de representar cualquier clase de información que se encuentre
almacenada en una página Web.
En la programación Web, el HTML es el lenguaje que permite codificar o preparar documentos
de hipertexto, que viene a ser el lenguaje común para la construcción de una pagina Web.
Existen otros lenguajes para elaborar páginas Web como los son: ASP, JSP, Perl, PHP.
Editor
Un editor es un programa que permite hacer documentos en lenguaje HTML. Hoy en día
existen un gran número de editores que permiten crear páginas Web sin la necesidad de
escribir ni una sola línea de código HTML. Dichos editores contienen un entorno visual y
automáticamente generan el código HTML de las páginas. Algunos de los editores visuales con
los que podrás crear tus páginas Web son Macromedia Dreamweaver, Microsoft FrontPage
entre otros.
Instrucciones: Realiza una investigación bibliográfica en la cual deberás 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 páginas Web
a) Página Web b) Lenguaje Web c) WWW d) Sitio Web e) Lugar Web
3. Es un lenguaje el cual se utilizar para estructurar y diseñar documentos para la Web
a) HTML b) TAG c) HYPERTEXT d) TMLH e) BODY
Concepto Definición
Lenguaje
WWW
Dominio
Subdominio
Instrucciones: A continuación 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
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
81
Objetivo y clasificación de página Web
Contesta las siguientes preguntas:
Existen muchas variedades de sitios Web, cada uno especializándose en un tipo
particular de contenido o uso, y pueden ser arbitrariamente clasificados de
muchas maneras. Unas pocas clasificaciones pueden incluir:
Comerciales: están creados para promocionar los negocios de una empresa. Su
finalidad es económica. Su audiencia puede estar formada por clientes,
empleados, e incluso la competencia y los medios de comunicación. Se pueden dividir en
corporativas (informan sobre la empresa) y promocionales (que promocionan productos)
Informativos: su finalidad principal es distribuir información. La audiencia de este tipo de sitios
depende del tipo de información que distribuyen.
Ocio: son sitios con finalidad económica, no son sitios fáciles de crear ni mantener ya que a
veces es más importante sorprender al usuario con innovaciones; a veces siguen reglas propias.
Definiciones básicas en la creación de páginas Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Sesión
22
Cuál crees que sea el objetivo de las páginas Web?
Menciona una página Web y el objetivo de esta
82
Navegación: su finalidad es ayudar al usuario a encontrar lo que busca en Internet; en este
grupo se sitúan los llamados portales, que intentan abarcar prácticamente todo dentro del propio
sitio.
Artístico: son un medio de expresión artística 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 expresión de su creador. Sus objetivos y su audiencia
pueden ser de lo más variado. Dentro de este sitio se puede hacer de todo, desde colecciones
de fotos de la familia hasta tratados científicos de primer orden.
Sitio Objetivo
Descargas
Buscador
Noticias
Educativo
Político
Instrucciones: Investiga en Internet la clasificación y objetivo de las páginas Web, localiza las de la siguiente lista y llena el siguiente cuadro
Individual Ejercicio no. 50
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
83
1. Son sitios con una finalidad económica, no son fáciles de crear ni mantener y no siempre
siguen sus reglas
a) Comercial b) Buscador c) Político d) Educativo e) Ocio
2. Son sitios creados para promocionar los negocios de una empresa y su finalidad es
meramente económica.
a) Comercial b) Buscador c) Político d) Educativo e) Ocio
3. Sitios que promueven cursos presenciales y a distancia, información a profesores y
estudiantes.
a) Personal b) Político c) Educativo d) Ocio e) Comercial
4. Sitios que contienen colecciones de fotos de la familia hasta tratados científicos de primer
orden
a) Personal b) Buscador c) Comercial d) Educativo e) Ocio
Estructura de una página Web
Contesta las siguientes preguntas:
Aplica los comandos básicos para la elaboración de páginas Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Instrucciones: A continuación 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. 51
Sesión
23
Conoces cuál es la estructura de una página Web?
Nombra cuál es dicha estructura.
84
Para poder generar una página 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 después seleccionar Guardar como.
2. Aparecerá la siguiente ventana donde
seleccionaremos la ubicación a Guardar de
nuestro documento en HTML.
3.- Ya una vez seleccionada la ubicación escribir el nombre que le vayamos a dar, en la opción
, sin pasar por alto a lo último la extensión (.HTML), Ejem.
, y hacemos clic en . De NO ser así el
documento no lo podrá leer nuestro navegador.
Una página Web consta de dos partes principales que son: Cabecera y Cuerpo del documento.
Todas las páginas Web escritas en HTML deben tener la extensión .html o .htm.| Al mismo tiempo, deben tener las etiquetas <HTML> y </HTML>, ya que entre estas etiquetas estará comprendido el código HTML de la página.
85
Estructura de una página Web
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
Indica el inicio del documento. Inicio de la cabecera. Inicio del título del documento. Final del título 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 página se utiliza para agrupar información sobre ella, como
puede ser el título. 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 título <TITLE>, solo puede haber un título 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 página Web.
<html> <head> <title>Mi primer página Web</title> </head> <body> Este es un pequeño ejemplo de una página Web </body> </html>
Sesión
24
Instrucciones: En el laboratorio de cómputo realiza la práctica que se describe a continuación:
Abre el bloc de notas de Windows y realiza lo siguiente.
1. Crea las estructura de una página Web incluyendo las
etiquetas HTML, HEAD, TITLE, BODY.
2. En la etiqueta de título deberás 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 Práctica 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. Cuál 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 PÁGINA WEB
2.2.1. Sintaxis de etiquetas
2.2.2. Etiquetas primarias
2.2.3. Etiquetas de hipervínculo
2.2.4. Manipular formularios en una página web (label, checkbox, action, input, type, value)
2.2.5. Insertar y editar tablas en una página web
2.2.6. Manipular imágenes y animaciones en una página web
2.2.7. Insertar sonido y video en una página web
2.2.8. Implementar servicios de correo en una página web
Aplica la estructura de los comandos básicos para la elaboración de páginas Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Instrucciones: A continuación 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. 52
Sesión
25
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
87
Contesta las siguientes preguntas
Sintaxis de etiquetas
La mayoría de los documentos tienen estructuras comunes (títulos, párrafos,
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 vacías o abiertas, traduciendo
directamente del inglés (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 acción que representan.
La mayoría 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 recomendación que se te hace es que Las etiquetas en general se suelen escribir en
mayúsculas para distinguirlas claramente, pero los navegadores reconocen también las
minúsculas, así como las combinaciones de mayúsculas y minúsculas.
( ) Indica un salto de línea ( ) Muestra una imagen ( ) Sirve para colocar una línea
Instrucciones: Investiga en Internet cuáles 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. Cuál es el símbolo que permite que una etiqueta se cierre?
a) $ b) | c) % d) / e) \
2. Cuál 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
Contesta las siguientes preguntas:
Aplica las etiquetas básicas para la elaboración de páginas Web.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Instrucciones: A continuación 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. 54
Desarrolla la siguiente actividad para evaluar los aprendizajes logrados
durante el desarrollo de la secuencia.
Qué es una etiqueta?
Cuáles son las etiquetas primarias en HTML?
Sesión
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 más importante del lenguaje, ya que esta indica que el documento es una
página Web.
<head> y </head> Son las etiquetas de la cabecera, en ellas se incluyen las etiquetas del
título de la página, las palabras clave, la descripción de la página, etc.
<title> y </title> En él se escribe el título de la página, es decir, lo que se lee en
la parte superior de la ventana.
<body> y </body> Es junto con la etiqueta HTML la etiqueta más importante
de HTML, en ella se define absolutamente todo lo que aparece en el
documento, párrafos, texto, imágenes, 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 página. background=”imagen” Se utiliza para establecer una imagen de fondo de la página. text=”color” Establece el color de texto de la página. link=”color” Establece el color de los vínculos de la página que aún no han sido visitados. vlink=”color” Establece el color de los vínculos de la página que ya han sido visitados. alink=”color” Establece el color de los enlaces de la página activos.
Etiquetas que modifican la presentación de los textos.
<FONT> La etiqueta Font tiene atributos que pueden manipular la apariencia del texto, entre
los más utilizados encontramos
Size=valor, con este atributo cambiamos el tamaño del texto, puede tomar valores de 1 a 7,
siendo el 7 el tamaño más 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 específico al texto.
<H1>, <H2>, <H3>... Títulos. 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 tamaño de letra más pequeña.
<P> Párrafos. En principio, sin entrar en detalles de alineación u otras características,
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 vínculos de la página 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
a) <A> … </A> b) <font>..</font> c) <B> … </B> d) <U> … </U> e) <P> … </P>
3. Etiqueta que se utiliza para poner párrafos
a) <BODY> b) <B> c) <P> d) <FONT> e) <A>
Instrucciones: En el laboratorio de cómputo, realiza cada uno de los siguientes pasos:
Elabora una página con las etiquetas mínimas para encabezados, párrafos y formato básico.
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad del módulo de aprendizaje.
Individual Práctica no.2
Instrucciones: A continuación 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. 55
Sesión
27
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
91
Etiquetas de hipervínculos
Contesta las siguientes preguntas:
Aplica las etiquetas de hipervínculos en la elaboración de páginas
Web.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Sesión
28
1. Abre el bloc de notas.
2. Escribe como título de la página: Encabezados, párrafos y
formato básico.
3. Dentro del cuerpo del programa:
a) Escribe con la etiqueta H1: Encabezados, párrafos y
formato básico.
b) Con la etiqueta H2: Encabezados.
c) Sin formato escribe una descripción e lo que son los
encabezados.
d) Con la etiqueta H2: Párrafos.
e) sin formato escribe una definición de lo que son los
párrafos.
f) Con etiqueta H2: Formato básico.
f) Sin formato escribe el siguiente texto: conjunto de
etiquetas que permiten dar formato especial a los textos.
A continuación 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 hipervínculos son un elemento esencial para cualquier
página Web, ya que al ser pulsados nos lleva a una página o
archivo. Veamos para qué nos sirven y como crearlos.
Un hipervínculo puede ser un texto, imagen, etc., sobre el
cual se desee insertar el vínculo, estos elementos deben de
encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado al vínculo, la página que
se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el vínculo:
Visita www.google.com
Tendrás 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 página a través del atributo href.
Referencia absoluta:
Te lleva a una ubicación externa al sitio en el que se encuentra el documento. La ubicación 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 página.
Por ejemplo, "http://www.cecytes.edu.mx" tendrá el mismo efecto que
"http://www.cecytes.edu.mx/index.htm"
Para insertar el vínculo:
Visita www.cecytes.edu.mx
Habría 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 diseño similar o un
objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz
del sitio.
Por ejemplo, teniendo en cuenta que el documento tema_4.htm se encuentra directamente
dentro de la carpeta raíz del sitio, para insertar el vínculo:
Qué es un hipervínculo?
Para qué sirve un hipervínculo?
93
Enlace a Tema 4: Hipervínculos
Habría que escribir:
<a href="/tema_4.htm">Enlace a Tema 4: Hipervínculos</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada
indica la carpeta raíz 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 raíz del sitio, habría que
escribir:
<a href="/tema4/tema_4_1.htm">Enlace a Tema 4: Hipervínculos</a>
La etiqueta <A> cuenta con los siguientes valores que estarán relacionadas al atributo target,
los cuales determinan en qué ventana va a ser abierta la página 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 vínculo o en
el conjunto de marcos padre.
_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador.
Veamos cómo se utilizan estos valores, con el siguiente ejemplo:
Visita www.cecytes.edu.mx en una ventana nueva
Habría 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 opción cuando la página de destino está fuera de nuestro sitio para
que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la
página desde la que había salido (que vuelva a nuestro sitio).
Formato de los enlaces
Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la
etiqueta <body>. Estos colores se asignan a través de los atributos link(vínculo), alink (vínculo
activo), y vlink (vínculo 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 código:
...
<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 página www.aulaclic.com, el enlace será de color rojo (#FF0000)
94
Mientras la página www.aulaclic.com sea la última visitada, el enlace será de color fucsia
(#FF0099)
Cuando se haya visitado la página 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. Cuál es la etiqueta que se utiliza para insertar hipervínculos en un documento HTML?
a) <blank> b) <alink> c) <a> d) <href> e) <link>
3. Cuál es el atributo que especifica la página a la cual será asociado un vínculo?
a) sef b) link c) top d) a e) ref
Individual Ejercicio no. 56
Instrucciones: A continuación se presentan una serie de
preguntas con cinco opciones de respuesta. Subraya la respuesta
correcta que corresponda a cada una de ellas.
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
95
Manipular formularios en una página Web (label, checkbox, action, input, type, value)
Aplica los comandos para insertar controles básicos en la generación de formularios.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Sesión
30
Instrucciones: En el laboratorio de cómputo, realiza cada uno de los siguientes pasos:
Elabora una página con las etiquetas mínimas para encabezados, párrafos y formato básico.
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad del módulo de aprendizaje.
Individual Práctica no.3
1. Abre el bloc de notas.
2. Escribe como título de la página: Hipervínculos.
3. Dentro del cuerpo del programa:
a) Escribe con la etiqueta H1: Buscadores.
b) Genera los siguientes hipervínculos de texto en el cual
hagas acceso a la página Google que nos hará llegar a
la página www.google.com.mx, otra Yahoo la cual llevará
al sitio www.yahoo.com.mx, estos enlaces tendrán que
estar configurados para que abra los buscadores en
ventanas nuevas de los navegadores.
c) Ahora incluye los hipervínculos con las imágenes que
representan dichos buscadores y realiza los mismos
enlaces pero ahora que se abran en la misma página.
4. Guarda tu documento como Prac3_apellido_grupo.html
Sesión
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 cómo registrar los datos en el servidor.
Estructura básica 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 línea, cuadros de chequeo, radios de selección etc. Confeccionaremos un formulario para el ingreso de nuestro nombre y un botón para el envío 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?
Contesta las siguientes preguntas:
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 página que procesará los datos en el
servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacené en la raíz de este
sitio una página codificada en PHP que recibe los datos del formulario y los imprime en una
nueva página (Te recordamos que no veremos cómo programar en el servidor)
Todo los formularios deben llamar a esta página: "/registrardatos.php" más adelante cuando conozcas un lenguaje de servidor podrás 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 envía mediante post (los datos se envían con el cuerpo del formulario) En caso de utilizar get los datos se envían en la cabecera de la petición de la página, utilizando el método get estamos limitados en la cantidad de datos a enviar, no así con el método 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 línea) 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">
También mediante el elemento input definimos un botón para el envío de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botón para el envío de datos.
La propiedad value almacena la etiqueta que debe mostrar el botón.
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. Cuál 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
Instrucciones: A continuación 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. 57
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
99
Sesión
Así quedará el formulario
Nombre
Apellidos
F. Nacimiento
Calle y
Número
Código postal
Provincia Teléfono
Sexo Hombre Mujer Estado
Civil
Comentarios
Personales
enviar los datos
borrar los datos
Individual Práctica no. 4
En el laboratorio de cómputo realiza la siguiente práctica:
1. Hacer un formulario que contengas la entrada de los siguientes
datos:
Nombre, apellidos, fecha de nacimiento, dirección (calle, número
y código postal), teléfono, ciudad, estado, sexo, estado civil.
2. Deberás incluir los botones enviar datos y borrar datos.
Nombre del archivo Prac4_apellido_grupo.html
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad del módulo de aprendizaje.
Sesión
31
100
Insertar y editar tablas en una página Web
Hoy en día, la mayoría de las páginas Web se basan en tablas, ya que resultan
de gran utilidad al mejorar notablemente las opciones de diseño, ya que
mantienen ordenada la información en los distintos navegadores.
Todos los objetos se alinean por defecto a la izquierda de las páginas Web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes
al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de
realizarse.
Para definir el orden o la estructura de una página Web se utilizan tablas con bordes ocultos. La
mayoría de las páginas 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 página.
Dentro de las etiquetas <TABLE> … </TABLE>, usaremos las siguientes etiquetas dependiendo
del número de columnas y renglones que llevará nuestra tabla.
TR: atributo para definir las filas que llevará la tabla
TD: atributo par indicar el número de columnas dentro de una fila
Aplicar las etiquetas para la inserción y edición de tablas en la
elaboración de páginas Web.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Sesión
32
Qué es un tabla?
Cuál es la función de una tabla?
Contesta las siguientes preguntas:
101
Por ejemplo construyamos una tabla con el borde visible de
tamaño 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
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
Instrucciones: En el laboratorio de cómputo realiza la siguiente
práctica:
Elabora el diseño de una página Web en la cual deberás incluir
una tabla. El título de la tabla será Buscadores de Internet, haz
una columna de nombres de buscadores y otra de imágenes de
dichos buscadores. Incluye hipervínculos a las páginas de dichos
buscadores.
Guárdala con el nombre Prac5_apellido_grupo.html
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad del módulo de aprendizaje.
Individual Práctica no. 5
Sesión
33
102
1. Selecciona cuál es la etiqueta que define a un renglón 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
a) td b) border c) table d) tabla e) tr
3. Cuál es la etiqueta para definir una columna en una tabla
a) tr b) td c) tc d) trow Tcol
Manipular imágenes y animaciones en una página Web
Contesta las siguientes preguntas:
Instrucciones: A continuación 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. 58
Aplicar las etiquetas para el manejo de imágenes en una página
Web.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Sesión
34
De qué formatos deben ser las imágenes que se incluyan en las páginas web?
Define qué es una imagen animada?
103
La mayoría de las páginas Web contienen imágenes, que permiten mejorar su
apariencia, o dotarla de una mayor información 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 través del atributo src.
Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las
imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico 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
visualización.
La etiqueta <IMG> tiene varios atributos:
src = "imagen". Indica el nombre del fichero gráfico a mostrar.
alt = "Texto". Mostrará el texto indicado en el caso de que el navegador utilizado para ver la
página no sea capaz de visualizar la imagen.
lowsrc ="imagen". Muestra una segunda imagen "superpuesta" sobre la primera una vez se
carga la página. Este parámetro no es reconocido por la totalidad de los navegadores ya que
esta en estudio su aplicación, así que en la mayoría de los casos será ignorado mostrándose
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 = tamaño. Indica el tamaño 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 = tamaño. Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
width = tamaño. Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
Instrucciones: A continuación 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. 59
104
1. Es la etiqueta que utilizamos par incluir una imagen en un documento HTML
a) alt b) width c) img d) scr e) align
2. Elige cuál de los siguientes atributos no corresponde a la etiqueta de imagen
a) td b) alt c) scr d) align e) lowscr
3. Cuáles 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 página Web
Aplicar las etiquetas en la inserción de sonido y videos en una
página Web.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Sesión
36
De qué formato deben ser los archivos de sonido que se incluyan en las páginas web?
Cuál es la etiqueta que sirve para incluir un video en una página Web?
Contesta las siguientes preguntas:
Instrucciones: En el laboratorio de cómputo realiza la siguiente
práctica:
Elabora una página Web en la cual incluyas imágenes de los
formatos .jpg o bine .gif, el tema te lo proporcionará tu maestro.
Guárdala con el nombre Prac6_apellido_grupo.html
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad.
Individual Práctica no. 6
Sesión
35
105
Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún 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 través 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 página web, sonidos que se ejecutan
automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo
es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque
generalmente también 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 número 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
(mínimo) y 0 (máximo). No es soportado por los equipos MAC.
106
Al introducir la siguiente serie de etiquetas para el sonido de
nuestra página Web, cada vez que la abramos se reproducirá
dicho sonido, y al cerrarla o minimizarla se quitará, para iniciar de
nuevo cuando maximicemos la página.
<bgsound src="C:\Documents and Settings\ Mis documentos\Mi música\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 página Web.
a) sound b) track c) sound track d) bgsound e) sonido
2. Cuál 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
Instrucciones: A continuación 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. 60
EJEMPLO
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
107
Implementar servicios de correo en una página Web
Contesta las siguientes preguntas:
Instrucciones: En el laboratorio de cómputo realiza la siguiente
práctica:
Utiliza la práctica anterior llamada Prac6_apellido_grupo.html y
agrégale sonido de fondo, es necesario que al terminar el sonido
vuelva a empezar
Guárdala con el nombre Prac7_apellido_grupo.html
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad del módulo de aprendizaje.
Individual Práctica no. 7
Aplica el servicio de correo en una página Web.
Actúa con responsabilidad en el cumplimiento de tareas.
Aprendizajes a lograr
Sesión
37
Qué es un correo?
Qué elementos son necesarios para enviar un correo en HTML?
Sesión
38
108
Para que las personas que visitan tu página puedan enviarte mensajes, es sencillo, ya que puedes poner un enlace. El enlace debe contener la dirección 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 sería:
<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 años <INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años <INPUT type = radio name = edad value = "+40" > Mas de 40 años <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 quedaría así:
Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se
generará un mensaje de correo a mi dirección de correo marysilvia@cecytes.mx. Si pulsas el
botón Borrar se borraran los datos que hayas introducido en el Formulario.
Desarrolla la siguiente actividad para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
Tu Nombre: No. Control:
Archivos a Enviar:
Manual de Html Manual de Word Manual de Excel
Tu Edad:
Menos de 20 años
Entre 20 y 40 años
Mas de 40 años
Como nos localizaste:
De casualidad
Tus Comentarios:
Enviar
Borrar
110
Instrucciones: En el laboratorio de cómputo realiza la siguiente
práctica:
Desarrolla el formulario anterior en un archivo nuevo y guárdalo
con el nombre Prac8_apellido_grupo.html
Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad del módulo de aprendizaje.
Individual Práctica no. 8
Sesión
39
111
1. Cuál es el atributo que especifica la página a la cual será asociado un vínculo?
a) sef b) link c) top d) a e) ref
2. Se le conoce así al conjunto de páginas Web
a) Página Web b) Lenguaje Web c) WWW d) Sitio Web e) Lugar Web
3. Es un lenguaje el cual se utilizar para estructurar y diseñar documentos para la Web
a) HTML b) TAG c) HYPERTEXT d) TMLH e) BODY
4. Son sitios con una finalidad económica, no son fáciles de crear ni mantener y no siempre
siguen sus reglas
a) Comercial b) Buscador c) Político d) Educativo e) Ocio
5. 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>
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, información a profesores y
estudiantes.
a) Personal b) Político c) Educativo d) Ocio e) Comercial
8. Sitios que contienen colecciones de fotos de la familia hasta tratados científicos de primer
orden
a) Personal b) Buscador c) Comercial d) Educativo e) Ocio
9. Cuál es la única etiqueta que puede ir dentro de la etiqueta HEAD? a) <BODY> b) <HTML> c) </TITLE> d) e) <TITLE>
10. Cuál es el símbolo que permite que una etiqueta se cierre?
a) $ b) | c) % d) / e) \
11. Cuál 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 vínculos de la página que no han
sido visitados.
a) link b) vlink c) hiperlink d) alink e) clink
13. Etiqueta que se utiliza para poner párrafos
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: _________________________________________________
AUTOEVALUACIÓN
112
15. Cuál es la etiqueta que se utiliza para insertar hipervínculos en un documento HTML?
a) <blank> b) <alink> c) <a> d) <href> e) <link>
16. Selecciona cuál es la etiqueta que define a un renglón 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
a) td b) border c) table d) tabla e) tr
18. Cuál 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
a) alt b) width c) img d) scr e) align
113
INSTRUMENTOS DE EVALUACIÓN
Lista de cotejo: tema 2.2.
Nombre del alumno(a): Campo de Aplicación
Asignatura: Módulo 2, submódulo 3
Software de Diseño Evidencia por desempeño: Utilizar etiquetas en una página Web
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de las prácticas como se indican.
Subtemas 2.2.3. (Práctica No. 3)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Utiliza hipervínculos de texto que abren otra ventana
c) Utiliza hipervínculos de imagen que abren en la misma ventana
Lista de cotejo: Tema 2.1.
Nombre del alumno(a): Campo de Aplicación
Asignatura: Módulo 2, submódulo 3
Software de Diseño Evidencia por desempeño: Utilizar etiquetas en una Página Web
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de las prácticas como se indican.
Subtemas 2.1.3. (Práctica No. 1) Cumple
Características Si No
Los procedimientos realizados, cumplen con:
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Utiliza correctamente la estructura básica de una página Web
c) Utiliza el título sugerido para la práctica
d) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
114
d) Respeta las reglas de sintaxis
e) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
Subtemas 2.2.4. (Práctica No. 3)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Incluye los datos que proporciona las instrucciones de la práctica
c) Utiliza los botones de enviar y borrar datos
d) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
Subtemas 2.2.5. (Práctica No. 5)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Incluye los hipervínculos que proporciona las instrucciones de la práctica
c) Utiliza imágenes sugeridas en las instrucciones de la práctica
d) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
Subtemas 2.2.6. (Práctica No. 6)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Incluye los datos que proporciona las instrucciones de la práctica
c) Utiliza imágenes con el formato sugerido en las instrucciones
d) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
115
Subtemas 2.2.7. (Práctica No. 7)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Incluye los datos que proporciona las instrucciones de la práctica
c) Utiliza la práctica indicada en las instrucciones
d) Incluye archivo de sonido con reinicio
e) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
Subtemas 2.2.8. (Práctica No. 8)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones
b) Incluye los datos que proporciona las instrucciones de la práctica
c) Utiliza la práctica indicada en las instrucciones
d) Incluye archivo de sonido con reinicio
e) Guarda el archivo generado con el nombre y extensión sugerido
Observaciones:
117
COMPETENCIAS DE LA UNIDAD
El alumno:
En la utilización de un software de aplicación de diseño, será capaz de crear páginas web manipulando las
herramientas de Dreamweaver, mediante los siguientes logros:
Describe las partes que conforman el software de diseño, ventana de inicio del dreamweaver.
Describe la función de los componentes de la ventana de desarrollo de dreamweaver.
Identificara las vistas del entorno de dreamweaver.
Aplica la configuración de un sitio web desde una nueva carpeta.
Crea una página web: documento en blanco, archivo de diseño y plantilla existente.
Aplica los formatos de texto y párrafo en la creación de una página web.
Aplica diferentes tipos de vínculos en la página web (dentro de la página, entre páginas web y servidores).
Inserta imágenes dentro de la página web.
Inserta y edita tablas en una página web. Aplica marcos en el diseño de una página web. Agrega diversos archivos de audio (mp3, wav, ogg). Agrega archivos de video en una página web. Inserta animaciones flash.
TEMARIO
3.1 Entorno de la aplicación 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 (diseñar, código y dividir).
3.2 Insertar componentes a una página web en dreamweaver.
3.2.1 Configuración del sitio web: nueva carpeta.
3.2.2 Creación de una página web: documento en blanco, archivo de diseño y plantilla existente.
3.2.3 Formato de texto y párrafo.
3.2.4 Establecer vínculos de la página web, entre páginas web y servidores.
3.2.5 Insertar imágenes dentro de una página web.
3.2.6 Insertar y editar tablas de una página web.
3.2.7 Manipular marcos.
3.3 Utilizar elementos multimedia a una página 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 aplicación de dreamweaver que se utiliza para diseñar páginas web.
a) b) c) d) e)
( ) 2. Es la barra de la ventana de dreamweaver que contiene botones de diversos tipos de objetos como imágenes, tablas y capas, en un documento.
a) Estándar b) Propiedades c) Insertar d) Documentos e) Etiquetas
( ) 3. Es el menú que sirve para modificar formato de fuente y párrafo. a) Texto b) Modificar c) Sitio d) Comandos e) Insertar
( ) 4. Es un conjunto de páginas 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 hipervínculo. 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 párrafo en cuanto a la alineación 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) Hipervínculo
( ) 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 página 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 página web.
a) Código b) Dividir c) Hoja d) Diapositiva e) Diseño
Evaluación diagnóstica
La siguiente evaluación 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 paréntesis de la izquierda las letras de la respuesta correcta. Al final del módulo de aprendizaje se encuentran las respuestas correctas.
119
Secuencia didáctica
3.1 ENTORNO DE LA APLICACIÓN 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 (diseñar, código y dividir)
Conocimientos previos: A continuación se te presentan una serie
de preguntas contéstalas lo más ampliamente, comenta tus
respuestas ante el grupo para compartir sus conocimientos previos
bajo lluvia de ideas dirigidas por el docente.
Individual Ejercicio no. 61
Identifica los elementos que conforman la ventana de inicio de software de creación de páginas web.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
Sesión
40
1. Has utilizado el software DreamWeaver
2. Si lo has utilizado, enlista las vistas en la elaboración
de una página web.
Contesta las siguientes preguntas:
120
En equipo de tres personas, elabora un collage en el que se
ilustre diversos diseños de logotipos (al menos 10) de los
productos que conoces. Para realizar este ejercicio, deberás 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.
Grupo Ejercicio no. 62
3.
4.
5.
121
1. Es un conjunto de páginas web, que pueden ser creadas en dreamweaver. a) Dominio
b) WWW
c) Archivos d) Carpeta e) Sitio Web
2. Es un diseñador de páginas web, que te automáticamente te genera el código HTML. a) Word b) PowerPoint c) Excel d) Access e) Dreamweaver
3. Es la extensión que toman los archivos creados en dreamweaver, como formato de página
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 podría realizar ventas en todo el mundo, que software podrá utilizar Juan para elaborar las páginas web.
a) Word b) PowerPoint
c) Flash d) Paint e) Dreamweaver
5. Es el icono que representa al software para la ceración de páginas web. a)
b) c) d)
e)
6. A continuación se te presentan una serie de pasos para activar el diseñador 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 podría realizar ventas en todo el mundo, que software podrá utilizar Juan para elaborar las páginas web.
a) Word b) PowerPoint
c) Flash d) Paint e) Dreamweaver
8. Es el icono que representa al software para la ceración de páginas web. a)
b) c) d)
e)
9. A continuación se te presentan una serie de pasos para activar el diseñador de páginas 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
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 63
122
Ventana de inicio del software
Macromedia Dreamweaver es un editor HTML para diseñar, codificar y
desarrollar sitios, páginas y aplicaciones Web. Dreamweaver te proporciona
útiles herramientas tanto si deseas controlar manualmente el código HTML
como si prefiere trabajar en un entorno de edición visual. Con Dreamweaver se
puede controlar todo el proceso de creación de un sitio web: creación del sitio,
estructurar el árbol de links, diseñar las páginas y la subida de nuestro trabajo a
nuestro servidor web.
Puede crear y editar imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash.
También ofrece un entorno de codificación con todas las funciones. Incluye herramientas para la edición de código (tales como coloreado de código y terminación automática 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 automáticamente el código del lenguaje HTML, solo tendrás que utilizar la aplicación tal como lo realizas en un procesador de textos.
A continuación se te presenta una imagen de la ventana del
diseñador de páginas web, con sus elementos identificados con un
número y una tabla en la parte inferior de la imagen en el cual
deberás colocar en cada línea donde indica el número, el nombre
del elemento que le corresponda.
Individual Ejercicio no. 64
Sesión
41
123
1 5
2 6
3 7
4
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 65
Sesión
42
1
2
7
6
4
3
3 5
124
La primera vez que inicies Dreamweaver aparecerá un cuadro de diálogo que le permitirá elegir
un diseño para el espacio de trabajo. Si cambia de idea posteriormente, podrá cambiar a otro
espacio de trabajo distinto a través del cuadro de diálogo 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 continuación se te presenta una imagen de la ventana del
diseñador de páginas web, con sus elementos identificados con
una la letra, en la parte inferior se encuentra una serie de
enunciados con la función de lo elementos coloca dentro del
paréntesis la letra que corresponda a cada elemento y escribe
sobre la línea el nombre del elemento que le corresponda.
Individual Ejercicio no. 66
125
( ) __________________________Muestra el documento actual mientras lo estas creando
y editando.
( ) ____________________________ Contiene botones que proporcionan opciones para
diferentes vistas de la ventana de documento (diseño, código) diversas opciones de visualización
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 jerarquía de etiquetas que rodean a la
selección actual.
( ) _____________________________ Contiene una serie de botones para las operaciones
más habituales de los menús Archivo y Edición.
( ) ______________________________ Conjunto de paneles relacionados apilados bajo
un encabezado común.
( ) __________________________ Contiene botones para la inserción de diversos tipos de
“objetos”, como imágenes, 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 características 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 diseño, código o dividir
a) Estándar b) Paneles c) Inspector de propiedades
d) Insertar e) Documentos
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 67
Identifica los elementos que conforman la ventana de inicio de software de creación de páginas web.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
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 menús, la barra insertar, inspector de propiedades, barra de
herramientas estándar, mismos que utilizaras al crear tu página Web.
Para visualizar las barras de
herramientas es necesario
activar el menú Ver, opción
barra de herramientas y con
ello muestras parte de las
principales opciones de estos
elementos.
Los menús que se manejan en dreamweaver son diez, todos ellos necesarios para
manipular la aplicación en torno a la creacion y diseño de las paginas web.
Sesión
43
EJEMPLO
A continuación se te presenta un cuadro sinóptico con los menús
de Dreamweaver, complétalos indicando las opciones de cada uno
de ellos, es necesario para ello que te encuentres en el centro de
cómputo.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad del módulo de aprendizaje.
Individual Ejercicio no. 68
Identifica los componentes de la ventana de desarrollo del software de creación de páginas Web.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
130
A continuación se te presentan una serie de preguntas con cinco opciones de respuesta. Subraya la respuesta correcta que corresponda a cada una de ellas.
Individual Ejercicio no. 69
Instrucciones: En el laboratorio de cómputo realiza lo siguiente:
1. Abre tu sitio web.
2. Abre las tres páginas web que contiene.
3. En la página index.htm, escribe el enunciado “Mi Primer Sitio Web”, con encabezado 1, fuente Verdana, color con las características (RGB) rojo: 0, verde: 0, azul 255; Alinear: centro.
4. En la página familia, escribe el enunciado “Mi Familia” con encabezado 1, en cada renglón 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 página galería, escribe “Mis fotos”, con encabezado 1, selecciona un tipo de letra, color y dale alinear: centro.
La práctica se revisará con la lista de cotejo que se encuentra al final de la unidad del modulo de aprendizaje
Individual Práctica no.9
131
1. En este menú se encuentran las opciones para presentar el área del documento que se está diseñando en código, diseño, dividir.
a) Archivo b) Edición
c) Ver d) Insertar e) Ayuda
2. Julián se encuentra diseñando una página 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, indícale en que menú encontrara este comando.
a) Edición
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 diseño de tu página 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 continuación:
La barra de herramientas estándar al igual que otros programas maneja
los comandos básicos 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 imágenes, puedes pasar el puntero del mouse sobre el botón y aparecerá una
descripción del nombre del botón.
Los botones están organizados en categorías que te aparecen en un menú desplegable al
seleccionar la categoría se te presentan los botones representantes a cada una de ellas.
Sesión
44
132
A G
B H
C I
D J
E K
F
A continuación se te presentan las barras de herramientas de
documento, estándar 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.
Individual Ejercicio no. 70
A B C D
Ç
D
E F
G H I J K
133
1.- _______________________ Esta categoría presenta los botones de formato de fuente,
negrita, cursiva, cabeceras, párrafo.
2.- ________________________ Esta barra presenta botones para la inserción de un campo de
texto, casilla de verificación, lista/menú, botón de opción entre otros.
3.- ________________________ Esta barra contienen botones que sirven para insertar tablas,
etiquetas, dibujar capa.
4.- ___________________________ Esta barra permite insertar hipervínculo, imágenes, vínculo
de correo electrónico, fecha.
5.- ____________________________ Esta barra contiene los botones para agregar una regla
vertical, etiquetas frame, table.
A continuación se te presentan una tabla donde pegaras de la
sección de recortables la barra de insertar dependiendo de la
categoría que se te indica, además indica sobre la línea el nombre
de la categoría a la que representa. Se te calificará con la lista de
cotejo del final de la unidad.
Individual Ejercicio no. 71
134
1. Este icono presenta el área de trabajo del documento en vista de diseño.
a) b)
c) d) e)
2. Este icono de la barra de herramientas documento nos presenta el área de trabajo en vista de código, mostrándonos los comandos en HTML.
a)
b) c)
d)
e)
3. Es la categoría de la barra de insertar que presenta los botones para insertar tablas, etiquetas, dibujar capa:
a) HTML b) Común c) Diseño d) Formularios e) Texto
4. Lucía se encuentra diseñando una página web, ella necesita agregar una casilla de verificación en que categoría de la barra insertar tiene que seleccionar para utilizar dicho elemento.
a) Formulario b) HTML
c) Texto d) Común e) Diseño
5. José Alberto es un magnífico diseñador de páginas web, el necesita insertar un hipervínculo
a que categoría de la barra de insertar tendrá que elegir para que le muestre el icono para
utilizar el hipervínculo.
a) Formulario b) HTML c) Texto d) Común e) Diseño
Inspector de propiedades.
Como parte de los elementos de la venta de desarrollo encontramos otros componentes que
permiten desarrollar y diseñar la página Web entre ellos encontramos: inspector de propiedades
Permite examinar y editar las propiedades más comunes del elemento de página seleccionado
actualmente, como texto o un objeto insertado.
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 72
Sesión
45
135
El contenido del inspector de propiedades es distinto en función del elemento seleccionado, esto
es si te encuentras editando texto aparecerán 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 características de la imagen en cuestión esta se presentan en la imagen siguiente:
( )
( )
( )
( )
A continuación se te presentan una serie de partes de las barras
de propiedades de texto y de imagen, donde deberás de identificar
dentro del paréntesis a que barra se refiere apuntando una T si es
de texto y una I si es propiedad de imagen.
Se te calificará con la lista de cotejo que se encuentra al final de la
unidad del módulo de aprendizaje.
Individual Ejercicio no. 73
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 características que se aplican en el texto, imágenes, tablas.
a) Inspector de propiedades
b) Estándar c) Documento d) Insertar
e) Paneles
3. El inspector de propiedades aparece en este tipo de vista: a) Código b) Dividir c) Diseño d) Formato e) Código y
diseño
Vistas del entorno de Dreamweaver (diseñar, código y dividir).
Sesión
46
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 74
Identifica las vistas del entorno de dreamweaver.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
137
Para trabajar en dreamweaver es necesario conocer los modos de edición, los cuales constan de
tres vistas (código, diseño, código y diseño –dividir-) en el que se pueden visualizar los
documentos en los que se están 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 opción: diseño, código,
código y diseño.
1. Identifica la barra de herramientas
documento.
2. Selecciona el botón de la vista que
deseas activar
A continuación se te presenta una tabla, completa en que consiste
cada una de las vistas.
Individual Ejercicio no. 75
138
1. Es el tipo de vista donde aparecen los comandos de HTML. a) Diseño b) Dividir
c) Código d) Completa e) Documento
2. Es el menú que se utiliza para mostrar el área de trabajo en código, diseño, código y diseño. 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 código y otra parte muestra el diseño de la página web
a) Código b) Dividir c) Diseño d) Documento e) Texto
Elementos de la barra de programa dentro de la vista código
La vista de diseño, se te presenta como un procesador de textos ahí deberás de escribir e
insertar cada uno de los elementos que tendrá tu página web, pero como ya viste dreamweaver
te va produciendo el código en el formato HTML, para ello como parte de la vista de código te
presenta una barra de programación con botones que sirven para el manejo del código, algunos
de ellos son abrir documentos que te presenta un listado de todos los archivos que tienes
abiertos dentro del sitio web que estás diseñando, también te aparece un botón para contraer
etiqueta completa, contraer la selección, expandir todo en este caso las etiquetas que se
contrajeron.
Esta barra se puede ocultar o mostrar, una vez activada la vista de diseño te vas al menú ver >
barra de herramientas > programación, aparecerán los botones al lado izquierdo de forma
vertical.
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 76
Sesión
47
139
( )
A Contraer selección
( )
B Abrir documentos
( )
C Expandir todo
( )
D Números de línea
( )
E Contraer etiqueta completa
( )
F Resaltar código no válido
A continuación se te presentan los botones de la vista de código
indica en el paréntesis el numero de la función que le corresponde.
Individual Ejercicio no. 77
Botones de
programación
140
1. Es la barra de herramientas que aparece en el lado izquierdo al activar la vista código. a) Propiedades b) Insertar
c) Programación d) Documento e) Estándar
2. Icono de la barra de programación que sirve para resaltar código no válido.
a)
b) c)
d)
e)
3. Es el icono de la barra de programación que se utiliza contraer una etiqueta completa.
a)
b)
c) d)
e)
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 78
141
3.2. INSERTAR COMPONENTES A UNA PÁGINA WEB EN DREAMWEAVER.
Formato de texto
Una vez creado tu página web, se encuentra listo para empezar a diseñarla, 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 aplicación, solo que al copiarlo desde otra aplicación no te guardara el formato
original del texto, desde dreamweaver podrás darle un nuevo formato.
Para ello podrás modificarlo desde el menú texto o bien directamente desde la barra de
propiedades.
En cuanto al uso del menú texto se pueden modificar las características para el formato del texto
utiliza los comandos: fuente, estilo, tamaño, color y ortografía.
Desde la barra de propiedades hay características que se pueden configurar directamente desde
sus casillas, como es:
Sesión
48
Aplica el editor (dreamweaver) inserta links, imágenes y tablas en una web.
Aplica los formatos de texto y párrafo en la creación de una página web.
Aplica diferentes tipos de vínculos en la página web (dentro de la página, entre páginas web y servidores).
Inserta imágenes dentro de la página web.
Inserta y edita tablas en una página web.
Aplica marcos en el diseño de una web.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
142
Mediante la aplicación de Dreamweaver, completa las
características de los comandos utilizados para el formato de texto.
Individual Ejercicio no. 79
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 80
Fuente
Estilo
143
1. Es el menú donde puedes cambiar la fuente. a) Comandos b) Edición c) Texto d) Modificar e) Sitio 2. Es una de las características que aparecen con el comando estilo EXCEPTO: a) Negrita b) Cursiva c) Subrayada d) Tachado e) Georgia 3. María se creando una página web, para ello necesita cambiarle el color a una fuente
utilizada, a continuación se presentan los pasos desordenados para utilizar esta característica, ordénalas para que María pueda cambiarle el color a la fuente. 1. Seleccionar color del texto 2. Menú texto 3. Opción 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 párrafo
Otro formato que se debe de aplicar en el diseño de la página web es el párrafo para ello es
necesario identificar los comandos dentro del menú texto se refieren y utilizan al párrafo, también
desde la barra de propiedades se encuentran algunas formatos de párrafo
Entre el formato del párrafo encontramos que se clasifican en encabezados estas se reconocen
con la etiqueta <h>, con 6 tamaños que van desde 1…6, donde encabezado 1 es el tamaño mas
grande que encabezado 6.
En el formato de párrafo también puedes alinear al texto a la izquierda, centro, derecha y
justificar.
Original Con formato Escribe los pasos
Sesión
49
A continuación 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.
Individual Ejercicio no. 81
144
1. Al indicar el formato de párrafo cual de los siguientes encabezados representa el texto más grande.
a) Encabezado 2 b) Encabezado 1
c) Encabezado 6 d) Encabezado 3 e) Encabezado 4
2. Es uno de los formatos de párrafos 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. Opción Formato de párrafo 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
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 82
Mediante la aplicación de Dreamweaver, completa el siguiente
cuadro sinóptico con las opciones de las características para el
formato de párrafo: Formato de párrafo, Alinear
Individual Ejercicio no. 83
145
Establecer vínculos dentro de una página web, entre páginas web y servidores.
Una vez creadas las páginas HTML o web deberá establecer las conexiones entre sus
documentos y otros documentos. También puede establecer vínculos con cualquier texto o
imagen de cualquier lugar del mismo documento.
Los vínculos se pueden crear y administrar de varias forma distintas. Algunos diseñadores de
sitios Web prefieren crear vínculos con páginas o archivos que todavía no existen cuando están
trabajando, mientras que otros prefieren crear primero todos los archivos y las páginas y añadir
los vínculos más tarde.
A la hora de crear vínculos resulta fundamental conocer la ruta de archivo entre el documento
desde el que establece el vínculo y el documento con el que lo establece.
Cada página Web tiene una dirección exclusiva, denominada URL (Localizador Uniforme de
Recursos, Uniform Resource Locator).
Sin embargo, cuando se crea un vínculo local (un vínculo 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 raíz
del sitio.
En lugar de escribir las rutas, conviene acceder a los vínculos a través del botón Examinar,
método que asegura la correcta introducción de la ruta.
Existen tres tipos de rutas de vínculos:
Formato de párrafo
Formato de párrafo
Alinea
r
Sesión
50
146
• Rutas absolutas
Proporcionan la URL completa y se utilizan para vincular con páginas Web externas.
No se aconseja poner rutas absolutas para vínculos locales porque si mueve el sitio a otro
dominio se romperán todos los vínculos de las rutas absolutas locales.
• Rutas relativas
Son las más adecuadas para los vínculos locales. Particularmente útiles cuando el documento
actual y el documento con el que se establece el vínculo 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 raíz del sitio
Las rutas relativas a la raíz del sitio indican la ruta desde la carpeta raíz 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á más cómodo mantener las rutas relativas al documento.
Una ruta relativa a la raíz del sitio comienza por una barra diagonal, que representa la carpeta
raíz del sitio.
Sin embargo, al mover o cambiar el nombre de documentos con vínculos relativos a la raíz,
deberá actualizar esos vínculos, incluso aunque las rutas de los documentos no hayan cambiado
en su relación mutua.
Mapa conceptual Vínculos
En el siguiente cuadro elabora un mapa conceptual donde se
identifique los términos de vínculos, ruta, tipos de ruta de vínculos
Individual Ejercicio no. 84
147
1. Es el tipo de ruta que representa direcciones externas. a) Relativa b) Absoluta
c) Subjetiva d) Objetiva e) Referencial
2. Martín se encuentra elaborando un sitio web, para ello necesita hacer una conexión entre páginas que se encuentran en el mismo sitio y además pertenecen a la misma carpeta, que tipo de ruta tiene que establecer.
a) Absoluta
b) Objetiva c) Subjetiva d) Relativa
e) Referencial
3. Jazmín necesita hacer una conexión entre páginas, el hipervínculo 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 hipervínculos
En dreamweaver se puede establecer los diferentes
hipervínculos, 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 categoría común, estos servirán de enlace y se
manipulan mediante la vista diseño.
El procedimiento es el siguiente:
1. Seleccionar el objeto o texto que desees ligar a otro archivo, por ejemplo la palabra Galería.
2. Especificar la dirección a donde se va a ligar, buscando la carpeta o unidad donde se
encuentra el archivo que se abrirá al acceder al hipervínculo.
3. Especificar el destino en este caso _blank, _parent,
_self, _top
4. Pulsar el botón acepta.
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 85
148
Una vez que se acepta el hipervínculo, la palabra o texto seleccionado para hacer liga cambia de
color azul. Al colocar el puntero del mouse sobre el vínculo 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
parámetros que se configuran en la casilla destino (_blank,
_parent, _self, _top)
Individual Ejercicio no. 86
A continuación se te presentan una serie de cuadros de forma
desordenados, indica sobre la línea el orden correcto para crear un
sitio web.
Individual Ejercicio no. 87
149
Orden: ________________________
1. Es el parámetro que se utiliza al crear un hipervínculo 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 hipervínculo desde el menú insertar. 1. Examinar archivo a vincular 2. Comando hipervínculo 3. Menú insertar
4. Escribir texto 5. Botón aceptar 6. Seleccionar parámetro 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
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 88
150
Insertar imágenes dentro de una página web.
En Macromedia Dreamweaver, puede trabajar en la vista Diseño o en la vista Código para
insertar imágenes en un documento. Al añadir imágenes 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 gráfico, aunque para páginas Web generalmente se
utilizan tres formatos de archivo gráfico: GIF, JPEG y PNG. Actualmente, GIF y JPEG son los
formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayoría de los
navegadores.
Los archivos GIF utilizan un máximo de 256 colores y son idóneos para visualizar imágenes con
grandes áreas de color homogéneo, como barras de navegación,
botones, iconos, logotipos u otras imágenes con colores y tonos
uniformes.
El formato de archivo JPG es el mejor para imágenes fotográficas o
de tonos continuos, ya que puede contener millones de colores. A
medida que la calidad de un archivo JPEG aumenta, también lo
hace su tamaño y el tiempo que tarda en descargarse.
Al insertar una imagen en un documento de Dreamweaver, el programa genera automáticamente
una referencia al archivo de imagen en el código 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 inserción en el
lugar de la ventana del documento
donde quiere que aparezca la imagen.
En la categoría Común de la barra de herramientas Insertar, haga clic en el botón de
Imagen.
En el cuadro de diálogo que aparece elija la imagen que quiera. Al insertarse la imagen
se abre automáticamente el Inspector de propiedades, puede cambiar el ancho, el alto, darle
nombre o establecer el texto alternativo de manera que al pasar el ratón por encima de la
imagen aparezca una breve explicación 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 botón derecho del ratón.
En este menú emergente Imagen hay múltiples posibilidades. En el Inspector de propiedades de
la imagen hay un apartado específico Dreamweaver proporciona unas funciones básicas de
edición de imágenes que permiten modificar las imágenes sin tener que iniciar una aplicación
externa de edición de imágenes como Macromedia Fireworks.
Sesión
Sesión
51
151
1
2
3
4
5
6
7
8
9
A continuación se te presenta el cuadro de dialogo de la inserción
de imagen explica la función que tiene cada uno de los apartados
que se están indicando con la numeración del 1 al 9, indícalo en la
tabla que se encuentra abajo del cuadro.
Individual Ejercicio no. 89
152
Orden ________________________________________
A continuación se te presentan una serie de cuadros de forma
desordenados, indica sobre la línea el orden correcto para insertar
una imagen.
Individual Ejercicio no. 90
153
1. Combinación 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 máximo de 256 colores ideal para proyectar logotipos o imágenes con colores uniformes.
a) PNG
b) JPG c) GIF d) MP3
e) OGG
3. A continuación se te presenta pasos de forma desordenada para insertar imágenes, indica la secuencia correcta, considera que el paso 5. Botón aceptar se repite 2 veces. 1. Selecciona el archivo de imagen 2. Escribe texto alternativo 3. Menú insertar 4.
Selecciona la carpeta imágenes 5. Botón aceptar 6. Opción 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 tamaño de una imagen
Si necesitas cambiar el tamaño de una imagen, desde dreamweaver lo puedes hacer
visualmente, pero el navegador del usuario deberá escalar la
imagen cuando se cargue la página, haciendo que aumenten el
tiempo de descargue de la página 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 aplicación de
edición de imágenes.
Desde dreamweaver puede cambiar el tamaño seleccionando la
imagen y con los manejadores de tamaño que aparecen dar el
tamaño que desea. En caso de que quiera respetar la relación
ancho y alto, presione Mayús. mientras arrastra el manejador.
Para mayor precisión especificar el nuevo tamaño en los apartados de altura y anchura del
Inspector de propiedades. Para volver al tamaño original haga clic en el botón Restablecer
tamaño.
Recorte de una imagen
Se puede hacer desde el Inspector de propiedades, botón Recorte o desde Modificar >
Imagen > Recortar
Aparecerán 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 Edición > Deshacer o Ctrl+Z.
Sesión
52
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 91
154
Crea una imagen de sustitución
Una imagen de sustitución es una imagen que, al visualizarse en un navegador, cambia cuando
el puntero pasa sobre ella. Son conocidas también por imágenes Rollover.
Se puede crear una imagen de sustitución con dos archivos de imágenes: la imagen principal (la
que aparece al cargarse inicialmente la página) y la imagen secundaria (la que aparece al pasar
el puntero sobre la imagen principal).
Ambas imágenes deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver
cambia automáticamente el tamaño de la segunda imagen para que se ajuste a las propiedades
de la primera.
Sitúe el puntero de inserción donde quiera que aparezca la imagen de sustitución. En la
categoría Común de la barra herramientas Insertar, haga clic en el botón o bien Insertar >
Objetos de imagen > Imagen de sustitución
Rellene el cuadro que aparece con el nombre de la
imagen de sustitución, la ubicación de imagen
principal y la secundaria. El texto alternativo o la acción a realizar para que aparezca la imagen
de sustitución.
Para ver el efecto F12 o Archivo > Vista previa en el navegador.
Cambiar tamaño a
una imagen
Recortar la imagen
Crear imagen de
sustitución
A continuación se te presentan una tabla donde debes indicar los
pasos para cambiar el tamaño de la imagen, recorte de la imagen
y crear una imagen de sustitución.
Individual Ejercicio no. 92
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. Jazmín está diseñando una página web, ella le ha insertado una imagen, se da cuenta que en la imagen hay mucho espacio que no quiere proyectar indícale los pasos que debe seguir para recortar la imagen. 1. Aceptar la advertencia 2. Opción 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 sustitución, para ello tuvieron que buscar los pasos para realizar dicha acción, ordénale los pasos que deben de seguir. 1. Botón aceptar 2. India imagen de sustitución 3. Opción imagen de sustitución
4. Indica imagen original 5. Opción 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 página web.
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el
diseño de texto y gráficos en una página HTML.
Inserta y edita tablas en una página web.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no.93
Sesión
53
156
Inserción de una tabla y adición de contenido
En la vista de diseño coloque el punto de inserción en el lugar donde quiere la Tabla e indique
Insertar > Tabla
Otra manera es por medio de la categoría Común de la barra de Insertar haga clic en el
botón.
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, también 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 aplicación (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: tabulación, 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 edición de la página 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
A continuación se te presenta el cuadro de dialogo de la inserción
de tabla explica la función que tiene cada uno de los apartados
que se están indicando con la numeración del 1 al 9, indícalo en la
tabla que se encuentra abajo del cuadro.
Individual Ejercicio no. 94
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 página web ayúdala indicando los pasos que debe de seguir. 1. Indicar núm. filas, columnas 2. Pulsar botón aceptar 3. Menú insertar 4. Opción 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 combinación 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 modificación 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 Edición > 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 selección arrastre para seleccionar lo que quiera.
Seleccionar celdas
Hay varios procedimientos como presionar la tecla Control y hacer clic en la celda deseada
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 95
Sesión
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 también se puede aplicar un formato a las tablas para hacerlo ver más
profesional, es decir dándole un toque. Seleccione la tabla que le interese, Comandos >
Formatear tabla. Aparece el cuadro de dialogo Formatear tabla personalizando las opciones
como desee.
A continuación se te presentan una tabla donde debes indicar para
que se utiliza el icono que aparece en el lado izquierdo, en cuanto
a la selección de tabla, celda, filas y columnas.
Individual Ejercicio no. 96
160
1
2
3
4
5
6
7
A continuación se te presenta el cuadro de dialogo de la inserción
de imagen explica la función que tiene cada uno de los apartados
que se están indicando con la numeración del 1 al 9, indícalo en la
tabla que se encuentra abajo del cuadro.
Individual Ejercicio no. 97
161
1. Es el icono que te presenta el inspector de propiedades cuando seleccionas una celda de la tabla ya sea para aplicarle algún 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 página web y necesita darle un formato a la tabla indícale los pasos que debe de seguir si el formato que desea aplicarle es simple 3. 1. Seleccionar simple3 2. Pulsar botón aceptar 3. Seleccionar tabla
4. Opción 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 continuación investiga los pasos para insertar, eliminar,
combinar y dividir celda, filas y columnas
Individual Ejercicio no. 98
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 99
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 ningún 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 página. El uso más común de los marcos es la navegación.
Sesión
56
Instrucciones: En el laboratorio de cómputo realiza lo siguiente:
1. Abre tu sitio web.
2. Abre las tres páginas web que contiene.
3. En la página 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. Agrégale el texto, tu nombre en una celda, tu grupo, especialidad y escuela en el resto de las celdas.
4. En la página 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 indícale parentesco, nombre. Llena la tabla con los datos de tu familia, en el parentesco apunta padre, madre, hermano, hermana según sea el caso y en la columna nombre apunta su nombre. Agrégale formato de tabla: Simple3.
5. En la página galería.htm, inserta una tabla de 3 X 3, agrégale una foto de cada uno de los integrantes de tu familia, considera también 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 Práctica no.10
Sesión
55
163
Sin embargo, el diseño con marcos puede resultar complicado y, en ocasiones, las páginas Web
que no los incluyen logran prácticamente los mismos objetivos.
Creación de Marcos
La forma más sencilla es seleccionar entre varios conjuntos
de marcos predefinidos.
Solo se puede insertar un conjunto de marcos predefinido en
la vista Diseño de la ventana de documento.
Insertar > HTML > Marcos
o bien en la categoría Diseño de la barra de herramientas de
Insertar haga clic en el botón Marcos y elija la distribución
que más le interese
Los iconos proporcionan una representación visual. El área
azul de un icono de conjunto de marcos representa el
documento actual y las áreas blancas representan marcos
que mostrarán otros documentos.
Para borrar un marco sólo 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 mostrarán 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 sección 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) Hipervínculo c) Marco d) Imagen
e) Formulario
3. Ordena los pasos para agregar una macro: 1. Posición 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
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 101
En equipo de tres integrantes de manera extra-clase, diseña un
Sitio Web, se pondrán de acuerdo con el profesor para representar
el sitio de algún comercio, institución u organización de los
alrededores. El sitio contendrá al menos 5 páginas, incluirás la
página index, misión, visión, servicio o productos que ofrece,
fotografías en una página de galería, le incluirás el logotipo de la
empresa mismo que puedes diseñar en Corel Draw, organiza la
información en tablas, incluye colores de acuerdo a la teoría del
color, las páginas deben de estar vinculadas con el index y entre
sí, procura realizar un mapa de navegación del sitio.
Se te calificará con la lista de cotejo del final de la unidad.
Grupo Ejercicio no. 102
Desarrolla la siguiente actividad para evaluar los aprendizajes logrados
durante el desarrollo de la secuencia.
165
Secuencia didáctica
3.3. UTILIZAR ELEMENTOS MULTIMEDIA A UNA PÁGINA WEB.
3.3.1. Agregar archivos de audio (WAV, MP3, OGG).
3.3.2. Archivos de video.
3.3.3. Insertar animaciones flash.
Contesta las siguientes preguntas:
¿Cuántos formatos de audio conoces?
¿Cómo se insertan videos en dreamweaver?
¿Se pueden insertar películas de flash en dreamweaver?
Escribe tus comentarios:
Comenta ante el grupo tus comentarios.
Sesión
57
Agrega diversos archivos de audio (mp3, wav, ogg).
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
166
Agregar archivos de audio
En dreamweaver se puede incluir sonido en
una página web, aunque no es muy habitual
ya que algunos usuarios acostumbran a escuchar su tipo de
música al estar navegando, por lo que el escuchar también
sonido en cada página que se visita puede resultar algo
molesto.
Pero a pesar de ello, el incluir un sonido agradable, apropiado
al contenido de la página, puede hacerla más atractiva, esto
es si se selecciona la música mas apropiada para el sitio.
Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o
desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página
puedan desactivarlo.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y
en algunas ocasiones el MIDI, aunque existen otros formatos diferentes como el OGG que
también pueden utilizarse. Lo ideal es incluir algún 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, Medía,
opción Plug-in.
En el siguiente recuadro elabora un mapa conceptual donde
expliques el tema de inserción de audio en una página 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. Opción 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 automáticamente al cargarse la página, y se reproducen solamente
una vez. Estos valores no pueden cambiarse a través del inspector de propiedades, pero sí a
través del código.
Por ejemplo, al insertar un archivo de audo el código aparerá
como <embed src="varios/audio.MID"></embed>. Pero
para que no se reproduzca automáticamente se le añade
autostart="false", y para que se reproduzca continuamente
se le añade loop="true". La línea de código 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 música de fondo en una página web, sin que aparezcan los controles de audio,
puedes escribir este código directamente en la vista Código.
<bgsound src="cancion1.wav" loop="-1">
Insértalo despues de la etiqueta </title> Con el parámetro loop puedes decidir cuantas veces
quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
Sesión
58
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 104
EJEMPLO
168
En Dreamweaver no se mostrarán 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 función de cada uno de los
comandos y parámetros que se utilizan al insertar un archivo de
sonido mediante el código de HTML, esto complementa la acción
en dreamweaver.
Individual Ejercicio no. 105
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 106
169
1. Este comando te sirve para indicar el número de veces que deseas que se reproduzca el
archivo de audio. a) scr b) loop
c) embed d) bgsound e) autostar
2. Este parámetro se inscribe al agregar un archivo de audio para que no se reproduzca automáticamente..
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)
3.3.2. Archivos de video.
Al igual que insertar archivos de audio, se pueden cargar archivos de video. En ocasiones
puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los
vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para
descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía,
opción Plug-in.
El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo
que el de los archivos de audio, ya que ambos se insertan como Plug-in.
Los vídeos también se reproducen automáticamente al cargarse la página, y se reproducen
solamente una vez. Estos valores pueden cambiarse a través del código, del mismo modo que
en el caso de los archivos de audio, añadiendo autostart="false" y loop="true".
Sesión
59
Agrega archivos de video en una página web.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
170
Todos los objetos insertados a través de la opción 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 vídeo) que
ha de reproducirse.
En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en
el campo URL plg una página en la que pueda encontrarlo.
A continuación se te presenta el cuadro de inserción de audio y
video explica cada una de las partes que se te indica, anotando la
función 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 diseñar una página web. a) OGG b) WAV c) MIDI d) MP3 e) MPEG
2. René necesita saber cuáles son los pasos para agregar un archivo de video ya que necesita reproducir una entrevista que realizo y mostrarla en su página web, indícale cuales son los pasos correctos que debe seguir. 1. Plug-in 2. Seleccionar el archivo 3. Menú insertar 4. Botón 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 página web.
a) Diseño b) Común c) Formularios d) Texto e) HTML
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no.108
Sesión
60
172
3.3.3. Insertar animaciones flash
Instrucciones: En el laboratorio de cómputo realiza lo siguiente:
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.
1. Abre tu sitio web.
2. Abre las tres páginas web que contiene.
3. En la página index.html agrégale un archivo de audio en formato MP3.
4. En la página familia.html agrega el archivo de audio en formato MIDI.
5. en la página galería.html, inserta el archivo de video.
Muestra tu página desde el navegador de internet a tu maestro.
Se utilizará la lista de cotejo del final de la unidad.
Individual Práctica no.11
11
Sesión
61
Inserta animaciones flash.
Actúa con responsabilidad en el cumplimiento de las actividades.
Aprendizajes a lograr
173
Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animación.
Estas películas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el
usuario tenga instalado el plug-in para poder ser visualizadas.
Las películas Flash pueden insertarse en una página a través del menú Insertar, Medía, opción
Flash, o pulsando Ctrl+Alt+F.
También pueden insertarse pulsando sobre la opción Flash que aparece en la pestaña Común
del panel Insertar, botón Media.
El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el
texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización de la
película.
La opción Bucle indica que al finalizar la película, ésta volverá a comenzar
desde el principio.
La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada
más cargarse la página comenzará a reproducirse la película Flash.
Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película.
Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún
comportamiento.
A continuación se te presenta el cuadro de inserción de audio y
video explica cada una de las partes que se te indica, anotando la
función en el tabla que se encuentra abajo del cuadro.
Individual Ejercicio no.109
174
1 2
3 4
5 6
7
1. Es el botón que utilizas para agregar un archivo de video desde flash.
a) b) c) d) e)
2. Es la combinación de teclas que utilizas para insertar una película 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 película que hayas realizado en flash. 1. Botón aceptar 2. Indicar la ruta del vínculo 3. Opción 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
A continuación se te presentan una serie de preguntas con cinco
opciones de respuesta. Subraya la respuesta correcta que
corresponda a cada una de ellas.
Individual Ejercicio no. 110
175
Instrucciones: En el laboratorio de cómputo realiza lo siguiente:
1. Abre tu sitio web.
2. Abre las tres páginas web que contiene.
3. En el archivo index.html agrégale un archivo de flash que hayas realizado en el laboratorio de computo del sub-modulo 2.
4. Agrégale una página web, guárdala con el nombre de deportes.html, inserta una tabla de 5 X 3, haz una lista de 5 deportes, haz el vínculo del index.html hacia deportes.html y viceversa, agrega al menos 10 imágenes representando los deportes mencionados.
5. Agrega sobre deportes.html, la canción representativa del mundial 2010, previamente deberás de conseguirla en formato mp3, indica que se reproduzca automáticamente de forma continua.
6. En galeria.html, inserta una película flash, con las imágenes de tu familia.
Se utilizará la lista de cotejo del final de la unidad.
Individual Práctica no.12
Sesión
62
176
Desarrolla la siguiente actividad para evaluar los aprendizajes logrados
durante el desarrollo de la secuencia.
Instrucciones: En el laboratorio de cómputo realiza lo siguiente:
Previamente tomaras fotografías de las instalaciones de tu plantel.
1. Crea un nuevo sitio web, con el nombre de mi plantel
2. Crea 3 páginas web, nómbralas index.html, especialidades.html, instalaciones.html
3. En la página index.html agrega el logotipo de CECyTES, e indica en hipervínculo para acceder a las páginas especialidades e instalaciones, tomaras la fotografía 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 página de especialidades, agrega hipervínculos con las otras dos páginas, agrega una reseña de las especialidades de tu plantel, además toma fotografías alusivas a las especialidades, puede ser de tus compañeros realizando prácticas en los laboratorios, agrega un archivo de audio.
5. En la página instalaciones, agrega fotografías que representen las instalaciones de tu plantel, agrega hipervínculo para las páginas index y especialidades.
Nota: puedes complementar tu sitio, agregando más información como lista de docentes, administrativos, dirección del plantel.
Se utilizará la lista de cotejo del final de la unidad.
Individual Práctica no.13
Sesión
63
177
En el siguiente cuadro elabora un cuadro sinóptico donde
desarrolles el tema de inserción de archivos multimedia (audio,
video y película flash) destacando los pasos que se ocupan para
insertarlos, en qué consiste cada uno de ellos y porque es
importante utilizarlos en una página web. Lista de cotejo al final de
la unidad.
Individual Ejercicio no. 111
181
1. Es un conjunto de páginas web, que pueden ser creadas en dreamweaver. a) Dominio
b) WWW
c) Archivos d) Carpeta e) Sitio Web
2. Es un diseñador de páginas web, que automáticamente te genera el código HTML. a) Word b) PowerPoint c) Excel d) Access e) Dreamweaver
3. Es la extensión que toman los archivos creados en dreamweaver, como formato de página
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 características 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 diseño de tu página web.
a) Archivo b) Insertar c) Modificar d) Comandos e) Texto 7. Este icono presenta el área de trabajo del documento en vista de diseño.
a) b)
c) d) e)
8. Es la combinación 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) Código b) Dividir c) Diseño d) Formato e) Código y
diseño 10. Es el tipo de vista donde aparecen los comandos de HTML. a) Diseño b) Dividir
c) Código d) Completa e) Documento
Nombre: ________________________________________________
Grupo: ________________________ Turno: __________________
Fecha: _________________________________________________
AUTOEVALUACIÓN
182
11. Es la vista donde aparece el área de trabajo en dos parte una muestra el código y otra parte muestra el diseño de la página web
a) Código b) Dividir c) Diseño d) Documento e) Texto
12. Es la barra de herramientas que aparece en el lado izquierdo al activar la vista código. a) Propiedades b) Insertar
c) Programación d) Documento e) Estándar
13. A continuación se te presenta una serie de pasos para crear un sitio web, ordena los pasos 1. Botón 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 página web. a) Insertar b) Texto
c) Modificar d) Sitio e) Archivo
15. Es el nombre que se recomienda se le asigne a la primera página web del sitio. a) Uno b) Primera
c) Principal d) Pagina1 e) Index
16. Es una de las características que aparecen con el comando estilo EXCEPTO: a) Negrita
b) Cursiva c) Subrayada d) Tachado
e) Georgia
17. Al indicar el formato de párrafo cual de los siguientes encabezados representa el texto más grande.
a) Encabezado 2 b) Encabezado 1
c) Encabezado 6 d) Encabezado 3 e) Encabezado 4
18. Es el parámetro que se utiliza al crear un hipervínculo 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 diseñar una página web. a) OGG b) WAV c) MIDI d) MP3 e) MPEG
183
INSTRUMENTOS DE EVALUACIÓN
Evaluación del conocimiento. Para conocer tu calificación de cada evaluación, 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 número de aciertos por 10 4. Divide el resultado entre el número total de preguntas en cada evaluación y obtendrás tu calificación. Interpreta tu resultado y verifica tu aprendizaje
Tu esfuerzo es insuficiente, necesitas repasar varios contenidos y dedicar más tiempo para su estudio, para ello revisa los temas correspondientes a las preguntas que contestaste erróneamente y repásalos.
Tu esfuerzo sólo ha sido suficiente, no tienes una preparación adecuada, por lo que tienes que estudiar más los temas relacionados con las preguntas que no pudiste contestar correctamente.
Aunque estás preparado, todavía puedes mejorar tu calificación revisando los errores cometidos y reforzando los contenidos que no manejaste en la evaluación.
Te encuentras muy preparado, pero no alcanzaste la máxima calificación y ello te será muy fácil si revisas los mínimos 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
INSTRUMENTOS DE EVALUACIÓN
LISTA DE COTEJO : TEMA 3.1
Nombre del alumno(a): Campo De Aplicación
Asignatura: Elaboración de páginas web
Entorno de la aplicación de dreamweaver
Evidencia por desempeño: Diseñar páginas web con un software de aplicación
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de la actividades
Características Cumple
Subtema 3.1.1 SI NO
Ventana de inicio de software
e) Entrega puntual del trabajo.
f) Presenta al menos 10 imágenes 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 términos del cuadro sinóptico
h) Cumple reglas ortográficas, de redacción y sintaxis.
i) Existe calidad en el trabajo.
j) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Características Cumple
Subtema 3.1.2
SI NO
Componentes de la ventana de desarrollo
185
e) Entrega puntual del trabajo.
f) Indico correctamente cada barra de recortables
g) Existe calidad en la presentación trabajo.
Observaciones:
Subtema 3.1.3
SI NO
Vistas del entorno de Dreamweaver (diseñar, código y dividir)
f) Entrega puntual del trabajo.
g) Presenta la totalidad de los paneles a investigar.
h) Cumple reglas ortográficas, de redacción 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 (diseñar, código y dividir)
e) Entrega puntual del trabajo.
f) Tiene buena redacción el ensayo encargado
g) Cumple reglas ortográficas, de redacción y sintaxis.
h) Existe calidad en la presentación trabajo.
i) Entrego en el ensayo impreso con la extensión mínimo de dos cuartillas
Observaciones:
Características Cumple
Subtema 3.2. SI NO
Insertar componentes a una página web
a) Entrega puntual del trabajo.
b) Entrego el diseño completo de un sitio web
c) Existe calidad en el trabajo.
186
h) Todos los integrantes del equipo participaron en la realización del trabajo
Observaciones:
Características Cumple
Subtema 3.3. SI NO
Utilizar elementos multimedia en una página web
a) Entrega puntual del trabajo.
b) Cumple con los elementos en el cuadro sinóptico.
c) incluye los temas de inserción de archivos multimedia, explicando en qué
consiste cada uno de ellos.
d) Existe calidad en el trabajo.
e) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
Listas de cotejo para prácticas
Lista de cotejo: tema 3.2. - 3.3.
Nombre del alumno(a): Campo de Aplicación
Asignatura: Elaboración de páginas web
Diseñador de Páginas
Web
Evidencia por desempeño: Diseñar páginas web con un software de
aplicación. Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de las prácticas como se indican.
Subtemas 3.2.1 (Práctica no. 1)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
f) Crea y nombra el sitio web
g) Crea tres páginas 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:
Subtemas 3.2.3 (Práctica no. 2)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Localiza el sitio web
b) Accede a las páginas del sitio
c) Agrega la información recomendada en la pagina index, con el formato solicitado
d) Agrega la información recomendada en la página familia, con el formato de texto solicitado
e) Agrega la información en la página galería con el formato de texto solicitado
f) Presentó responsabilidad y orden
Observaciones:
Subtemas 3.2.4 (Práctica no. 3)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Localiza el sitio web
b) Accede a las páginas del sitio
c) Inserta los hipervínculos solicitados para cada página bajo el parámetro solicitado.
d) Presentó responsabilidad y orden
Observaciones:
Subtemas 3.2.5 - 3.2.6. (Práctica no. 4)
188
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Localiza el sitio web
b) Accede a las páginas del sitio
c) Agrega las tablas solicitadas.
d) Agrega las imágenes solicitadas
e) Presentó responsabilidad y orden
Observaciones:
Subtemas 3.3.1 (Práctica no. 5)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Localiza el sitio web
b) Accede a las páginas del sitio
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. (Práctica no. 6)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Localiza el sitio web
b) Accede a las páginas del sitio
c) Agrega el archivo de flash
d) Crea una página web
e) Agrega la tabla solicitada
f) Agrega imágenes
189
g) Crea el hipervínculo solicitado
h) Presentó responsabilidad y orden
Observaciones:
Subtemas 3.3.3. (Práctica no. 7)
Características:
Los procedimientos realizados cumplen con: Cumple
Si No
a) Crea el sitio web
b) Crea tres páginas web
c) Cada página tiene la información solicitada
d) Agrega la tabla solicitada
e) Crea hipervínculos entre las páginas
f) Agrega imágenes
g) Crea el hipervínculo solicitado
h) Presentó responsabilidad y orden
Observaciones:
191
COMPETENCIAS DE LA UNIDAD
En la utilización de un software de aplicación de diseño, será capaz de crear páginas web manipulando las
herramientas de Dreamweaver, mediante los siguientes logros:
Identifica los conceptos de servidores local, remoto y publicar
Identifica los servidores disponibles para publicar una página Web
Identifica dominios a utilizar en la publicación de una página Web
Aplica el procedimiento para la publicación de la página Web en un servidor
Aplicar el procedimiento para la publicación de una página Web en un servidor gratuito
TEMARIO
4.1. Define los conceptos básicos de la publicación
4.1.1. Concepto de servidor local, servidor remoto y publicar
4.1.2. Identificar los servidores de Internet disponibles para el alojamiento de páginas Web
4.2. Almacenar páginas web en un servidor
4.2.1. Verificación de dominios
4.2.2. Publicar una página en un servidor dedicado
4.2.3. Publicar una página en un servidor gratuito
192
4.1 DEFINE LOS CONCEPTOS BÁSICOS DE PUBLICACIÓN
4.1.1. Concepto de servidor local, servidor remoto y publicar
4.1.2. Identificar los servidores de internet disponibles para el alojamiento de páginas
web (gratuito y comercial).
Contesta las siguientes preguntas:
Servidor
Un servidor es un "gran ordenador" que está siempre en online, donde se aloja la información de las páginas 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 programación Web.
Identifica los conceptos de servidores local, remoto y publicar
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Sesión
64
Escribe sobre la línea la definición 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 gestión 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 rápido. Depende el ancho de banda y de las visitas que visitan la web, el servidor ira más o menos rápido.
Transferencia del server:
La transferencia es el consumo de un servidor. Es decir, cuando un usuario está navegando por una web, ese usuario esta descargándose información, a esa descarga de datos se la llama transferencia.
Contra más 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 publicación de una página web significa el alojamiento de una cantidad de páginas con información de su empresa o institución 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 máquina 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 guíe las acciones futuras del equipo. El plan de trabajo estará presente a la hora de estructurar la información, seleccionar los contendidos, elaborar, dar forma a los documentos y evaluar la gestión en sus conjuntos. También se deberán establecer las etapas y los tiempos.
Concebir
El equipo de trabajo ha reunido, a la luz de la información recabada y las pautas acordadas, en esta etapa deberán pensar el sitio Web que se encamina a construir.
Mientras en la etapa de la planificación se buscaba establecer ¿que suministramos y a quien?, en esta etapa se formula ¿Cómo?
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 materialización en una estructura a ser analizada y confrontada con los propósitos iniciales antes de ser puesta al dominio público.
Se deberán también corroborar el cumplimiento de las pautas acordadas en las etapas anteriores, en términos de contenidos, estructura de la información, y criterios de calidad.
La promoción
Se debe tener siempre presente que un sitio Web es un espacio de acción para un producto, la extensión de una institución, un ámbito a ser cuidado y promocionado como una herramienta más de mercadeo.
La promoción 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 gráficos conocidos como banners.
Evaluar
Es un factor esencial en la construcción de la Web, ejecución y mantenimiento de un sitio Web. Se trata de una actividad que se efectúa, en forma constante, a lo largo de todas las etapas del proyecto Web. Es deseable que una vez que el sitio Web este en línea la evaluación continúe en forma sistemática, con el fin de garantizar su vigencia y calidad.
La información obtenida a través de las diferentes formas de evaluación permite:
Confrontar la planificación y concepción con el producto.
Identificar carencias de contenido, diseño y actualización.
Identificar dificultades operativas y de navegación.
Conocer el impacto en los usuarios; así como las páginas más exitosas o menos visitadas.
Conocer necesidades no contempladas hasta ahora.
Actualización
El mantenimiento y la actualización son tan, o más importantes que el crecimiento en términos de números de páginas o enlaces, sobre todo si estas incorporaciones no son cuidadas. Ningún sitio Web es bueno o confiable, solamente por su magnitud.
Tan constante como la evaluación y a consecuencia de ella, se debe crear un plan de mantenimiento de desarrollo que contemple los resultados de la evaluación y el cumplimiento de los objetivos del sitio y la entidad que le dio origen.
Es importante determinar dentro del diseño de la Web:
¿Quién actualiza?, ¿Qué se actualiza y que cada cuanto tiempo?, ¿Qué formación se realiza? ¿Quién la revisa y quien cada cuanto tiempo?, ¿Qué información es de actualidad?, ¿Que la incorpora y cómo?, ¿Dónde se almacena después?
195
Identificar los servidores de Internet disponibles para el alojamiento de páginas Web (gratuito, comercial)
Aquí tienes algunos Servidores que ofrecen alojamiento gratuito para tu espacio en Internet además de otras ventajas que podrás conocer accediendo a su página de condiciones.
Recuerda leer bien sus condiciones en su página ya que existen ciertos servidores que prohíben ciertas cosas mientras que otros dan total libertad a la hora de publicar.
4.2 ALMACENAR PÁGINAS WEB EN UN SERVIDOR
4.1.1. Verificación de dominios.
4.1.2. Publicar una página en un servidor dedicado.
4.1.3. Publicar una página en un servidor gratuito.
DOMINIO
Un dominio es el nombre o dirección de un siio Web en Internet, en otras palabras, es un nombre fácil de recordar y que se puede utilizar para que los usuarios de Internet localicen y acceden a una página Web. Por ejemplo, nuestro dominio es: www.cecytes.edu.mx
Identifica los servidores disponibles para publicar una página Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Identifica los dominios a utilizar en la publicación de una página Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Sesión
65
196
DNS DNS proviene de una sigla en inglés 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 dirección de Internet correspondiente al servidor que aloja la página. Los servidores DNS son Computadoras muy robustas en los cuales están alojadas las Páginas Web, y tienen la capacidad de recibir conexiones de diversos usuarios al mismo tiempo. Están configurados de forma tal que muestran las páginas asociadas a cada dominio. Por cada página debe haber mínimo dos servidores DNS, pues en caso que uno presente inconvenientes, el otro permitirá desplegar correctamente la página. http://www.pagerank.electronica2000.com/dminios.php
http://www.publiweb.com.mx/whois.php
http://elhosting.com/dominio.htm
Publicar una página en un servidor dedicado
Aplica el procedimiento para la publicación de una página Web en un servidor
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
Sesión
66
197
Una vez que hayas construido tu página Web, necesitas subirla a un servidor que esté conectado a Internet para que los visitantes puedan verla en cualquier hora del día, los 365 días del año y desde cualquier parte del mundo. Lo más 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 término 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 físico de la máquina y de la conectividad a Internet es tarea de la empresa de alojamiento, que suele tenerlo en un centro de datos.
Publicar una página en un servidor gratuito
Servidor gratis.
Una de las dudas más comunes cuando acabas un proyecto Web por primera vez es: ¿cómo subir mi página 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, imágenes y todos los demás contenidos creados a tu servidor Web (al alojamiento Web que tengas). Es decir, que tienes que subir la página Web a Internet o de otro modo sólo podrás verla tú desde tu ordenador. Para ello, lo más sencillo es usar un cliente FTP, ya que agilizas muchos pasos del proceso de subir archivos al servidor. Además, el modo de trabajo es similar en muchos aspectos al (tan) famoso explorador de Windows, por lo que si no estás muy acostumbrado a manejar estos programas su aprendizaje será rápido (¿quién no conoce Windows?).
Antes de nada, lo primero es conseguir un cliente FTP. En esta guía voy a utilizar el cliente Cute FTP por ser con el que trabajo normalmente, pero el proceso es bastante similar para todos los clientes. Bájate el programa para empezar con la explicación: Cute FTP.
Instalación de Cute FTP
A día de hoy, la última versión de este cliente FTP es la 8.0.3, por tanto es con esa con la que trabajaremos en este artículo (exactamente con la versión de prueba) para explicar cómo subir la Web al servidor.
Identifica lo servidores para publicar una página Web
Actúa con responsabilidad en la realización de páginas Web
Aprendizajes a lograr
198
Bien, una vez descargado el programa lo ejecutamos. Tendremos que seguir una serie de pasos comunes a toda instalación, como elegir el directorio para instalarlo, el tipo de instalación (típica, compacta o personalizada). En este caso elegimos típica, la instalación comienza enseguida y no presenta mayores problemas.
Configuración de Cute FTP
Una vez instalado el programa, al ser una versión de prueba, te ofrece la opción de introducir la licencia del programa o continuar, nosotros le damos a continuar y nos aparece una pantalla con el siguiente cuadro de diálogo:
Llegados a este punto, necesitamos los siguientes datos para configurar el cliente CuteFTP, los cuales debe proporcionarte tu servicio de hosting:
1. Dirección de tu servidor Web.
2. Contraseña y usuario para acceder al servidor web vía FTP.
Donde pone Host Address debes introducir el nombre del servidor, y en Site Name el nombre que le quieras poner a la configuración 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 próxima 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 debería ser la carpeta en la que tienes los archivos de tu web. Le damos a siguiente nuevamente y a continuación a finalizar. Una vez conectado al servidor, ya podemos empezar a subir archivos.
Subir la página web al servidor
La siguiente pantalla que aparece es similar a esta:
Me he permitido dibujar algunas flechas para explicar un poco la estructura básica del cliente cute FTP:
200
1. La flecha verde señala la carpeta de tu disco duro, esa que configuraste como carpeta local. En ella deberías tener todos los archivos de la web que has hecho.
2. La flecha roja señala el servidor web. Es el sitio al que tendrás 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 sólo tienes que seleccionar el archivo que quieras borrar, renombrar, etc. hacer clic en el botón derecho del ratón y pulsar en la opción del menú emergente:
201
Para borrar la opción a seleccionar es delete, para cambiar el nombre del archivo rename, para ver el código 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 botón derecho del ratón y haces clic en la opción 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 mínimo 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 información y envíala al correo a tu
maestro
Individual Ejercicio no. 112
Desarrolla las siguientes actividades para evaluar los aprendizajes
logrados durante el desarrollo de la secuencia.
203
Instrucciones: En el laboratorio de cómputo realiza lo siguiente:
El proyecto final de la materia de SM3 consiste en diseñar 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 página Web “index.htm” deberá tener una plantilla
invisible de fondo, para que los textos e imágenes estén acomodados en una forma ordenada.
b. La página Web “index.htm” deberá contener un enlace a una página Web llamada “formulario.htm” que previamente se habrá creado en Dreamweaver.
c. La página Web “index.htm” deberá contener un enlace a una página Web llamada “multimedia.htm” que previamente se habrá creado en Dreamweaver.
Individual Práctica no.14
Sesión
67
204
INSTRUMENTOS DE EVALUACION
LISTA DE COTEJO : TEMA 1.1
Nombre del alumno(a): Campo De Aplicación
Asignatura: Elaboración de páginas Web
Elementos fundamentales de
diseño
Evidencia por desempeño: Publicar páginas Web en servidores de Internet
Evidencia de actitud asociada: Orden y responsabilidad
Instrucciones para el alumno: Seguir las instrucciones de la actividades
Características Cumple
Subtema 4.2.3. (Practica No.1 ) SI NO
Importancia del diseño y su impacto
a) Realiza su trabajo de forma ordenada y siguiendo instrucciones.
b) El sitio cumple con las instrucciones proporcionadas en la práctica
c) Existe calidad en el trabajo.
d) Presenta coherencia el trabajo que le fue asignado.
Observaciones:
210
Claves de respuesta
Unidad 1
Diagnóstica 1. C 2. A 3. D 4. D 5. A
6. E 7. D 8. A 9. B 10. E
Autoevaluación 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
Diagnóstica 1. B 2. B 3. E 4. B 5. A
6. C 7. C 8. D 9. E 10. C
Autoevaluación
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
Diagnóstica 2. B 2. C 3. A 4. D 5. E
6. D 7. A 8. C 9. D 10. E
Autoevaluación 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 electrónico, como www.cecytes.mx.
@ (arroba): Componente importante de las direcciones de correo electrónico. Ejemplo
marysilvia@hotmail.com.
Aplicación: Es un programa informático que tiene una aplicación específica.
ASP (Active Server page). Lenguaje de programación del cual es Microsoft propietario.
ASP suele ser usado para combinar HTML con bases de datos y generar páginas Web
dinámicas.
Código fuente: conjunto de instrucciones que forman un programa o subprograma
informático.
Etiqueta (tag): Instrucciones con las cuales podemos realizar páginas en el lenguaje
HTML. Un ejemplo es <i> que no permite poner en cursiva las letras que están entre esta
etiqueta. Las etiquetas son interpretadas por los diferentes navegadores a la hora de
reproducir las páginas HTML.
File Transfer (transferencia de ficheros): Copia o envío 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): Instrucción del lenguaje HTML que permite de dividir una página Web en
varias zonas o marcos. Cada una de los frames o marcos puede tener un contenido
independiente de las demás.
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 páginas que pueden ser a su vez páginas de
hipertexto. Las páginas de hipertexto son mostradas a través de navegadores.
HTML: El HTML, acrónimo inglés de Hypertext Markup Language (lenguaje de formato de
documentos de hipertexto), es un lenguaje para el diseño de docmuentos en forma de
hipertexto, que es el formato estándar de las páginas Web.
HTTP: "Protocolo de Transferencia de Hipertexto". Es el tipo de comunicación utilizado
entre un servidor y un navegador.
Link (enlace): Es el enlace de hipertexto que nos muestra la información de otra página
Web, de una página a otra, o de un servidor a otro.
212
Multimedia: Información digitalizada que puede combinar tanto texto, gráficos, audio y
video.
Navegador: Aplicación software que permite al usuario recuperar y visualizar
documentos de hipertexto, comúnmente descritos en HTML, desde servidores Web de
todo el mundo a través de Internet.
Página inicial: la Primera página que se carga al entrar en un sitio web.
Portal: Sitio web cuya misión es ofrecer al usuario, el acceso a unos recursos y servicios.
Fácilmente e integrado en el mismo dominio.
Servidor: (host) Ordenador conectado a Internet capaz de prestar uno o más servicios a
otros ordenadores llamados "clientes". Ejemplos de servicios: conexión, 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 páginas web.
URL (Localizador Uniforme de Recursos): Sistema unificado de identificación de recursos
en la red. Ejemplos de URL son: http://www.pcweb.es, ref.=”imágenes/dibujo.jpg”
Webmaster: administrador de Web, persona que dirige la gestión y mantenimiento de un
sitio web.
World Wide Web (WWW): (del inglés, Telaraña Mundial), la Web o WWW, es un sistema
de hipertexto que funciona sobre Internet. Para ver la información se utiliza una
aplicación llamada navegador web para extraer elementos de información (llamados
"documentos" o "páginas web") de los servidores web (o "sitios") y mostrarlos en la
pantalla del usuario.
213
REFERENCIAS
Documentales
Biblioteca del diseño gráfico. Barcelona, Naves Internacional de Ediciones, 1994.
BRIDGWATER, Peter. Introducción al diseño gráfico. México, Editorial Trillas, 1992.
DONDIS, A. D. Dondis. Sintaxis de la imagen. México, Gustavo Gilli Editores, 1998.
FERRER, Eulalio. Los lenguajes del color. México, Fondo de Cultura Económica/CNCA-INBA,
1999.
GUIRAUD, Pierre. La semiología. México, Siglo XXI Editores, 1972.
KEIL, John M. Creatividad. México, McGraw Hill, 1990.
LAING, Jhon. Haga usted mismo su diseño gráfico. Barcelona, Ediciones Herman Blume, 1984.
MEGGS, Philip B. Historia del diseño gráfico. México, Trillas, 1991.
MULHERIN, Jenny. Técnicas de representación para el arte gráfico. Barcelona, Gustavo Gilli
Editores, 1993.
PUENTE, Rosa. Dibujo y comunicación gráfica. México, Gustavo Gilli Editores, 1992.
SANDERS, N. y Bervinggton, W. Manual de producción del diseño gráfico. México, Gustavo Gilli
Editores,1992.
TUBAU, Ivan. Dibujando carteles. Barcelona, CEAC Editores, 1987.
WONG, Wucios. Fundamentos del diseño. México, Gustavo Gilli Editores, 1995.
Vínculos en Internet
Importancia del diseño, recuperado 4 febrero de 2010.
http://antiguo.itson.mx/dii/jgaxiola/articulos/diseno_web.html Recuperado,
Arquitectura de la información, 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 cromático, 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
Diseño gráfico, 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
Diseño gráfico, recuperado 1 de febrero de 2010.
http://es.wikipedia.org/wiki/Dise%C3%B1o_gr%C3%A1fico
Diseño gráfico, recuperado 1 de febrero de 2010.
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
Teorías del color, recuperado 1 de marzo de 2010.
http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color
Diseño y elementos, recuperado 12 febrero de 2010.
http://html.rincondelvago.com/diseno-publicitario.html
Importancia del diseño, recuperado 4 febrero de 2010.
http://html.rincondelvago.com/diseno-y-comunicacion.html
Diseño gráfico, recuperado 2 de febrero de 2010.
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
Diseño y elementos, recuperado 12 febrero de 2010.
http://www.cristalab.com/tutoriales/fundamentos-del-diseno-grafico-c126l/
Diseño gráfico, recuperado 2 de febrero de 2010.
http://www.desarrolloweb.com/articulos/1276.php
Diseño gráfico, recuperado 2 de febrero de 2010.
http://www.desarrolloweb.com/articulos/1277.php
Contrastes, recuperado 13 de marzo de 2010.
http://www.desarrolloweb.com/articulos/1509.php
215
Diseño gráfico, recuperado 2 de febrero de 2010.
http://www.fotonostra.com/grafico/arteydiseno.htm
Colores objetos, recuperado 23 de marzo de 2010.
http://www.fotonostra.com/grafico/coloresobjetos.htm
Contrastes, recuperado 13 de marzo de 2010.
http://www.fotonostra.com/grafico/contrastestono.htm
Diseño gráfico, recuperado 2 de febrero de 2010.
http://www.fotonostra.com/grafico/definiciondiseno.htm
Teoría 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
Contrastes, recuperado 12 de marzo de 2010.
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
Teoría 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
Importancia del diseño, recuperado 4 febrero de 2010.
http://www.slideshare.net/sayojas/importancia-del-diseo-grfico-en-los-proyectos-2073045
Diseño y elementos, recuperado 12 febrero de 2010.
http://www.taringa.net/posts/apuntes-y-monografias/1218053/Introducci%C3%B3n-al-
dise%C3%B1o-gr%C3%A1fico.html
Circulo cromático, recuperado 23 de marzo de 2010.
http://www.todacultura.com/acuarelas/circulo_cromatico.htm
Diseño y elementos, recuperado 12 febrero de 2010.
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
Importancia del diseño, recuperado 4 febrero de 2010.
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