€¦ · 10 ÍNDICE...

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.

17

Unidad I Utilizar 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.


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.


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.



Sesión

3

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

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

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.


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.



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.


Completa el siguiente crucigrama que integra los conceptos de las

diversas vanguardias que perfilaron grandes cambios en el diseño

gráfico.


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



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.


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.



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.


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

http://es.wikipedia.org/w/index.php?title=Sol_LeWit&action=edit&redlink=1

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

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


http://es.wikipedia.org/w/index.php?title=Robert_Morris&action=edit&redlink=1

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.


unidad.


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

http://es.wikipedia.org/w/index.php?title=Sol_LeWit&action=edit&redlink=1

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


http://es.wikipedia.org/w/index.php?title=Robert_Morris&action=edit&redlink=1

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






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

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.


EJEMPLO

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

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





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





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.


Sesión

9

Contesta las siguientes actividades

38


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.








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?


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.


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





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.


unidad.


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.


unidad.



opciones de respuesta. Subraya la respuesta correcta que corresponda

a cada una de ellas.


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.


unidad.






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.


unidad.


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.


unidad.





Individual

Ejercicio no.30

47


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.









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.


unidad.


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






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


unidad.






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.


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





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.


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





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.


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.





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.


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





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.


Sesión

19

62

Formato CMY





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.


unidad.




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.



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



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:


Subtema 1.1.1

SI NO


67


b) Visito los 5 sitios web.

c) Describió para cada sitio visitado la imagen, colores, estilo y la información

d) Existe calidad en la presentación trabajo.

Observaciones:

Subtema 1.1.2

SI NO

Origen y enfoque del diseño


b) Presenta la totalidad de los conceptos a investigar.




Observaciones:

Subtema 1.1.2

SI NO

Origen y enfoque del diseño


b) Esta completas las clasificaciones del área del diseño


d) Existe calidad en la presentación trabajo.

Observaciones:


Subtema 1.1.3 SI NO

Teorías del diseño: minimalismo.


b) Indico correctamente cada una de las imágenes según el diseñador


68

Observaciones:


Subtema 1.1.3. SI NO

Teorías del diseño: minimalismo


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.



Observaciones:


Subtema 1.1.3. SI NO

Teorías del diseño: conceptualismo


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



Observaciones:


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.


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:



Asignatura: Elaboración de Páginas Web

Formatos de

diseño

Evidencia por desempeño: Formatos de diseño




Subtema 1.2.1

SI NO

Formatos de diseño


b) Presenta al menos 10 imágenes para representar las fotografías, imágenes, anuncios y paisajes.



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

Observaciones:


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:


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.


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

Observaciones:


Subtema 1.2.3., 1.2.4.

SI NO

Sentido y equilibrio






Observaciones:


Subtema 1.2.1., 1.2.2., 1.2.3., 1.2.4.

SI NO

Formatos de diseño


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.



Observaciones:

71


Subtema 1.2.1., 1.2.2., 1.2.3., 1.2.4.

SI NO

Formatos de diseño






f) Todos los integrantes participaron en la elaboración y presentación del mapa.

Observaciones:



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




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:


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:


Subtema 1.3.1.

SI NO

Circulo cromático


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



Observaciones:


Subtema 1.3.1.

SI NO

Circulo cromático


b) Elaboro el circulo cromático en manta de un metro cuadrado

c) Coloreo e indico los colores de círculo cromático.



f) Todos los participantes del equipo participaron

Observaciones:


73

Subtema 1.3.2.

SI NO

Contrastes


b) Indico el mapa con los tipos de contrastes


d) Entrega puntual del trabajo.

Observaciones


Subtema 1.3.2.

SI NO

Contrastes, psicología del color


b) Indico el significado de los colores solicitados en el cuadro sinóptico


d) Entrega puntual del trabajo.

Observaciones


Subtema 1.3.3.

SI NO

Colores RGB


b) Indico cada uno de los colores

c) Coloreo el formato RGB

d) Presenta limpieza en el trabajo que le fue asignado

Observaciones


Subtema 1.3.3.

SI NO

Colores CMY

74


b) Indico cada uno de los colores

c) Coloreo el formato CMY

d) Presenta limpieza en el trabajo que le fue asignado

Observaciones

75

UNIDAD II

Manejar los

elementos

básicos de un

lenguaje usado

en la creación de

páginas Web

(HTLM)

76


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.


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


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.


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


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.




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



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




83

1. Son sitios con una finalidad económica, no son fáciles de crear ni mantener y no siempre

siguen sus reglas


2. Son sitios creados para promocionar los negocios de una empresa y su finalidad es

meramente económica.


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


Aplica los comandos básicos para la elaboración de páginas Web





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





Sesión

25



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.


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


Aplica las etiquetas básicas para la elaboración de páginas Web.

Actúa con responsabilidad en el cumplimiento de tareas.






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


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



Sesión

27



91

Etiquetas de hipervínculos


Aplica las etiquetas de hipervínculos en la elaboración de páginas

Web.



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?

http://www.google.com/

93

Enlace a Tema 4: Hipervínculos


<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


<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)

http://www.cecytes.edu.mx/

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?



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.



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.



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.



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

http://www.google.com.mx/

http://www.yahoo.com.mx/

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?


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





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


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


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.



Sesión

32

Qué es un tabla?

Cuál es la función de una tabla?


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



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



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


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




Aplicar las etiquetas para el manejo de imágenes en una página

Web.



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.





104

1. Es la etiqueta que utilizamos par incluir una imagen en un documento HTML


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.



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?



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.


Se te evaluará utilizando la lista de cotejo que se encuentra al final de la unidad.


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


Individual Ejercicio No. 60

EJEMPLO



107

Implementar servicios de correo en una página Web



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




Aplica el servicio de correo en una página Web.



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:[email protected]">Escribeme</A>

Cuando dé clic sobre el enlace se abrirá una ventana de "escribir mensaje".

Un ejemplo de esto sería:

<FORM action = "mailto: [email protected]" 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 [email protected]. Si pulsas el

botón Borrar se borraran los datos que hayas introducido en el Formulario.



Tu Nombre: No. Control:

Archivos a Enviar:

Manual de Html Manual de Word Manual de Excel

Tu Edad:

Menos de 20 años

Entre 20 y 40 años

Mas de 40 años

Como nos localizaste:

De casualidad

Tus Comentarios:

Enviar

Borrar

110


práctica:

Desarrolla el formulario anterior en un archivo nuevo y guárdalo

con el nombre Prac8_apellido_grupo.html



Sesión

39

111

1. Cuál es el atributo que especifica la página a la cual será asociado un vínculo?


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


4. Son sitios con una finalidad económica, no son fáciles de crear ni mantener y no siempre

siguen sus reglas


5. Etiqueta de HTML, la cual pone un texto en negritas


6. El atributo de la etiqueta de sonido que sirve para que se repita el archivo de audio es:

a) loop b) bgsound c) balance d) volume e) scr 7. Sitios que promueven cursos presenciales y a distancia, 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


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


113


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


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.


Asignatura: Módulo 2, submódulo 3

Software de Diseño Evidencia por desempeño: Utilizar etiquetas en una Página Web



Subtemas 2.1.3. (Práctica No. 1) Cumple

Características Si No

Los procedimientos realizados, cumplen con:


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:


Características:


Si No


b) Incluye los datos que proporciona las instrucciones de la práctica

c) Utiliza los botones de enviar y borrar datos


Observaciones:


Características:


Si No


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


Observaciones:


Características:


Si No



c) Utiliza imágenes con el formato sugerido en las instrucciones


Observaciones:

115


Características:


Si No



c) Utiliza la práctica indicada en las instrucciones

d) Incluye archivo de sonido con reinicio


Observaciones:


Características:


Si No



c) Utiliza la práctica indicada en las instrucciones

d) Incluye archivo de sonido con reinicio


Observaciones:

116

Unidad III Diseñar Páginas Web

con un software de

aplicación

117


El alumno:

En la utilización de un software de aplicación de diseño, será capaz de crear páginas web manipulando las


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


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.


Identifica los elementos que conforman la ventana de inicio de software de creación de páginas web.



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.


120


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.


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



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.


Sesión

41

123

1 5

2 6

3 7

4



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.


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



Identifica los elementos que conforman la ventana de inicio de software de creación de páginas web.



127

Componentes de la ventana de desarrollo.

Todo programa contiene como ya lo viste una serie de elementos para su manejo, como parte de

estos elementos encontramos los 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.


unidad del módulo de aprendizaje.


Identifica los componentes de la ventana de desarrollo del software de creación de páginas Web.



128

Texto

Menús de

dream

weaver

Archivo

Insertar

Modificar

129

Menús

de

dream

weaver

Ventana

Ayuda

130



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


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.


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.


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.





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.


unidad del módulo de aprendizaje.


136

( )

( )

( )

( )

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

c) Origen d) Formato e) Fuente

2. Es la barra que te presenta directamente algunas características que se aplican en el texto, imágenes, tablas.


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





Identifica las vistas del entorno de dreamweaver.



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.


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.





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.


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)





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.



142

Mediante la aplicación de Dreamweaver, completa las

características de los comandos utilizados para el formato de texto.






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.


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





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


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


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.





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)


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.


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





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.


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.


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





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.


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.







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


de tabla explica la función que tiene cada uno de los apartados




158

1. Es el icono que te servirá para agregar una tabla.

a) b)

c) d) e)

2. Ariadna necesita agregar una tabla en su 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





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.


160

1

2

3

4

5

6

7


de imagen explica la función que tiene cada uno de los apartados




161

1. Es el icono que te presenta el inspector de propiedades cuando seleccionas una celda de la tabla ya sea para aplicarle 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






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




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.


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.


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





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.




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.


¿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).



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.


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





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.






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.



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.


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





Sesión

60

172

3.3.3. Insertar animaciones flash


Previamente selecciona dos archivos de audio uno MP3 y uno

MIDI, y un archivo de video en formato MPEG, de no mas de 2

minutos.



3. En la 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.


11

Sesión

61

Inserta animaciones flash.



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.


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





175




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.



Sesión

62

176




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.



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.


178

MATERIAL RECORTABLE

180

MATERIAL RECORTABLE

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.


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


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





Entorno de la aplicación de dreamweaver

Evidencia por desempeño: Diseñar páginas web con un software de aplicación




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:


Subtema 3.1.2

SI NO

Componentes de la ventana de desarrollo

185


f) Indico correctamente cada barra de recortables

g) Existe calidad en la 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)


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:


Subtema 3.2. SI NO

Insertar componentes a una página web


b) Entrego el diseño completo de un sitio web


186

h) Todos los integrantes del equipo participaron en la realización del trabajo

Observaciones:


Subtema 3.3. SI NO

Utilizar elementos multimedia en una página web


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.



Observaciones:

Listas de cotejo para prácticas

Lista de cotejo: tema 3.2. - 3.3.



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


Subtemas 3.2.1 (Práctica no. 1)

Características:


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:


Características:


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:


Características:


Si No



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:


Si No



c) Agrega las tablas solicitadas.

d) Agrega las imágenes solicitadas

e) Presentó responsabilidad y orden

Observaciones:


Características:


Si No



c) Agrega los archivos de audio solicitados en los formatos.

d) Agrega un archivo de video

e) Presentó responsabilidad y orden

Observaciones:

Subtemas 3.3.3. (Práctica no. 6)

Características:


Si No



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:


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:

190

Unidad IV

Publicar páginas

Web en servidores de Internet

191


En la utilización de un software de aplicación de diseño, será capaz de crear páginas web manipulando las


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


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



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



Identifica los dominios a utilizar en la publicación de una página Web



Sesión

65

http://www.cecytes.edu.mx/

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



Sesión

66

http://www.pagerank.electronica2000.com/dminios.php

http://www.publiweb.com.mx/whois.php

http://elhosting.com/dominio.htm

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



http://www.lawebera.es/de0/cliente-ftp.php

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


Desarrolla las siguientes actividades para evaluar los aprendizajes


203


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.


Sesión

67

http://www.everyoneweb.es/

204

INSTRUMENTOS DE EVALUACION



Asignatura: Elaboración de páginas Web

Elementos fundamentales de

diseño

Evidencia por desempeño: Publicar páginas Web en servidores de Internet




Subtema 4.2.3. (Practica No.1 ) SI NO


a) Realiza su trabajo de forma ordenada y siguiendo instrucciones.

b) El sitio cumple con las instrucciones proporcionadas en la práctica



Observaciones:

206

MATERIAL RECORTABLE

208

Recortables:

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

[email protected].

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.

http://www.cecytes.mx/

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.

http://antiguo.itson.mx/dii/jgaxiola/articulos/diseno_web.html

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

http://es.wikipedia.org/wiki/C%C3%ADrculo_crom%C3%A1tico

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

http://es.wikipedia.org/wiki/Comunicaci%C3%B3n_visual

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

214

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


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


http://es.wikipedia.org/wiki/Dise%C3%B1o_visual#Alcances_de_Dise.C3.B1o_Visual

Minimalismo, recuperado 10 de febrero de 2010.

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

Minimalismo, recuperado 10 de febrero de 2010.

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

Arte conceptual, recuperado 2 de febrero de 2010.

http://es.wikipedia.org/wiki/Ready-made

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


http://html.rincondelvago.com/diseno-y-comunicacion.html


http://www.articulosinformativos.com.mx/Diseno_Grafico-a1073108.html

Manejo de Dreamweaver, recuperado 11 de mayo de 2010.

http://www.aulaclic.es/dream2004/t_10_1.htm

Manejo de Dreamweaver, recuperado 11 de mayo de 2010.



http://www.cristalab.com/tutoriales/fundamentos-del-diseno-grafico-c126l/


http://www.desarrolloweb.com/articulos/1276.php



Contrastes, recuperado 13 de marzo de 2010.


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

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

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

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

http://es.wikipedia.org/wiki/Ready-made

http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color

http://html.rincondelvago.com/diseno-publicitario.html

http://html.rincondelvago.com/diseno-y-comunicacion.html

http://www.articulosinformativos.com.mx/Diseno_Grafico-a1073108.html



http://www.cristalab.com/tutoriales/fundamentos-del-diseno-grafico-c126l/




215


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

Colores objetos, recuperado 23 de marzo de 2010.

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


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


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

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


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


http://www.slideshare.net/sayojas/importancia-del-diseo-grfico-en-los-proyectos-2073045


http://www.taringa.net/posts/apuntes-y-monografias/1218053/Introducci%C3%B3n-al-

dise%C3%B1o-gr%C3%A1fico.html

Circulo cromático, recuperado 23 de marzo de 2010.

http://www.todacultura.com/acuarelas/circulo_cromatico.htm


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

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

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

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

http://www.google.com.mx/imgres?imgurl=http://www.aloj.us.es/galba/digital/cuatrimestre_ii/imagen-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







http://www.newsartesvisuales.com/funda/compo5.htm

http://www.slideshare.net/sayojas/importancia-del-diseo-grfico-en-los-proyectos-2073045

http://www.taringa.net/posts/apuntes-y-monografias/1218053/Introducci%C3%B3n-al-dise%C3%B1o-gr%C3%A1fico.html

http://www.taringa.net/posts/apuntes-y-monografias/1218053/Introducci%C3%B3n-al-dise%C3%B1o-gr%C3%A1fico.html

216

http://www.uned.es/ntedu/espanol/master/primero/modulos/teoria-de-la-

representacion/fundamentos-composicion.htm

Zonas áureas, recuperado 12 marzo de 2010.

http://zeret1405.blogspot.com/2008/10/zonas-aureas.html


www.cristalab.com

Manuales y tutoriales de Dreamweaver, recuperado y consultado 30 de abril de 2010.

www.lawebdelprogramador.com

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

http://www.galeon.com/famosillas/servidores.htm

http://www.uned.es/ntedu/espanol/master/primero/modulos/teoria-de-la-representacion/fundamentos-composicion.htm

http://www.uned.es/ntedu/espanol/master/primero/modulos/teoria-de-la-representacion/fundamentos-composicion.htm

http://zeret1405.blogspot.com/2008/10/zonas-aureas.html

http://www.cristalab.com/

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

http://www.galeon.com/famosillas/servidores.htm

217

“Fecha de terminación de la impresión”

“Diseñada por”

Dirección donde fue diseñada

“Número de ejemplares impresos”

€¦ · 10 ÍNDICE...

Documents

Transcript of €¦ · 10 ÍNDICE...