ASIGNATURA:

ELABORACION DE PAGINAS WEB

BLOQUE 1: UTLIZAR LOS ELEMENTOS FUNDAMENTALES DEL
DISEÑO
CONTENIDO O COMPETENCIA 1
UTILIZAR LOS ELEMENTOS
FUNDAMENTALES DEL DISEÑO
• ANALIZAR LAS TEORIAS DEL DISEÑO
(MINIMALISMO, CONCEPTUALISMO,
ETC.).
• IDENTIFICAR EL IMPACTO Y EL
ENFOQUE EN DISEÑOS EXISTENTES.
• DISEÑAR FORMATOS CONSIDERANDO
LAS ZONAS AUREAS, DIRECCION,
SENTIDO Y EQUILIBRIO.
• APLICAR LA TEORIA DEL COLOR
CONSIDERANDO EL CIRCULO
CROMATICO, CONTRASTE, EL RGB
(RED, GREEN, BLUE) Y CMY (CYAN,
MAGENTA, YELLOW)
CONTENIDO O COMPETENCIA 2
MANEJAR LOS ELEMENTOS BASICOS DE
UN LENGUAJE EN LA CREACION DE
PAGINAS WEB (HTML,DHTML,ASP,JAVA
SCRIPT, CSS, DREAMWEAVER)
• DEFINIR OBJETIVOS Y CONTENIDOS DE
LA PAGINA WEB.
• ESQUEMATIZAR LA ESTRUCTURA
GENERAL DE UNA PAGINA WEB.
• UTILIZAR ETIQUETAS EN UNA PAGINA
WEB…
• ESTABLECER VINCULOS E
HIPERVINCULOS.
• MANIPULAR IMÁGENES Y
ANIMACIONES EN UNA PAGINA WEB.
• DEFINIR SECCIONES DE MAPEO DE
IMÁGENES EN UNA PAGINA WEB.
• INSERTAR SONIDO Y VIDEO EN UNA
PAGINA WEB.
• IMPLEMENTAR SERVICIOS DE CORREO
EN UNA PAGINA WEB.
Contenido o competencia 3 Contenido o competencia 4
Diseñar una pagina web con un Publicar paginas web
software de aplicación
(dreamweaver)
• Definir objetivos y contenidos • Identificar los servidores de la
de la pagina web. internet disponibles para
• Establecer etiquetas publicacion de informacion.
(principales y secundarias, • Seleccionar un servidor de
caracteres especiales) en la internet considerando las
pagina web. caracteristicas de la pagina
• Establecer links dentro de la web.
pagina web y entre • Verificar el funcionamiento
servidores. de la pagina web dentro del
• Manipular imágenes dentro servidor seleccionado.
de una pagina web.
• Estructurar tablas en una
pagina web.
• Insertar sonido y video en
una pagina web.
• Almacenar paginas web en
un servidor dedicado o
gratuito
 Evaluación
Practicas 60%
Examen 40%
 Teorías de diseño

Elementos
Formatos de
fundamentales
diseño
de diseño

Teorías de color

Contenidos de
una pagina web
Lenguaje HTML
Etiquetas de una
pagina web

Elaborar paginas web

Entorno de la
aplicación

Software de
Insertar
aplicación
componentes
dreamweaver

Elementos
multimedia

Conceptos de
publicación
Publicar en
servidores de
internet Almacenar
paginas web en
un servidor
Muchos ven en el diseño, como la rama que se dedica a
hacer que las cosas se vean bonitas, si bien esto es parte
del diseño no abarca en su totalidad la funcion del diseño
como tal.
Si miramos a nuestra alrededor por un momento,
veremos que el diseño de los inmuebles no solamente
esta para adornar, por ejemplo un escritorio.- un
escritorio bien diseñado no solo ofrece una apariencia
externa agradable, sino que debe cumplir con ciertas
funciones como ser duradero, contar con el espacio
superior necesario para colocar otros objetos, si es
posible que tenga cajones para guardar otras cosas.
El diseño también es una actividad técnica y creativa
encaminada a idear un proyecto útil, funcional y
estético.
Entonces realmente el diseño no solo cumple con la
funcion de embellecer un lugar, sino esta concebido a
partir de un proceso de creacion con el objetivo de
cumplir con una funcion en especial (o varias).
¿QUE ES DISEÑO?

Proceso de creacion visual con un proposito, el cual

cumple con exigencias practicas. Un buen diseño es
la mejor expresión visual de la escencia de «algo»
cuya creación o debe ser solo estética sino tambien
funcional.
 Individual
Actividad: Diseñar la siguiente representación en
CorelDraw

ELEMENTOS DEL DISEÑO

Linea Balance
Forma
Contraste
Tamaño
Composiscion Enfasis
Espacio

Color Patrones
Textura
Valores gradacion

Elementos Principales
LINEA:
UNA LINEA BIEN DEFINIDA COMO UNA MARCA
CON LONGITUD Y DIRECCION, CREADA
MEDIANTE UN PUNTO QUE SE MUEVE A LO
LARGO DE UA SUPERFICIE.
FORMA:
UNA FIGURA PLANA O UNA FORMA CREADA
CUANDO LINEAS ACTUALES O IMPLICITAS SE
ENCUUENTRAN ALREDEDOR DE UN ESPACIO. UN
CAMBIO EN EL COLOR O EL SOMBREADO PUEDE
DEFINIR SU FORMA.
TAMAÑO:
ESTE SE REFIERE A LAS VARIACIONES DE LAS
PROPORCIONES DE LOS OBJETOS, LINEAS O
FORMAS. HAY UNA VARIACION DE TAMAÑO EN
OBJETOS YA SEAN REALES O IMAGINARIOS.

CECyTEM

CECyTEM
CECyTEM
ESPACIO:
ES EL AREA VACIA O ABIERTA ENTRE,
ALREDEDOR, ARRIBA O ENTRE OBJETOS.
FIGURAS Y FORMAS SON REALIZADAS EN EL
ESPACIO ALREDEDOR Y ENTRE EL.
COLOR:
ES EL CARÁCTER PERCIBIDO DE UNA SUPERFICIE
DE ACUERDO CON LA LONGITUD DE ONDA O LA
LUZ REFLEJADA DESDE ESTA.
TEXTURA:
ES LA FORMA COMO SE SIENTE LA SUPERFICIE
(TEXTURA ACTUAL O COMO PUDE SER
OBSERVADA)
VALORES:
ES QUE TAN OSCURO O CLARO SE VE ALGO.
PODEMOS ALCANZAR CAMBIOS EN EL COLOR
POR MEDIO DE LA ADICCION DE BLANCO O
NEGRO A DICHO COLOR.
BALANCE:
ES EL SENTIDO DE EQUIDAD VISUAL EN UNA
FORMA, FIGURA, VALOR,COLOR, ETC.
4 imágenes de zonas áureas
 Sentido y equilibrio:
Cada forma o figura representada sobre un papel se comporta como un peso (un peso
visual), porque ejerce una fuerza optica.nuestos elementos de nuestra composocion
grafica pueden ser imaginados colo pesos de una balanza . Una composicion se
encuentra en equilibrio si los pesos de los distintos elementos que la forman se
compensan entre si.
Este criterio se aplica principalmente al diseño global, es decir, a la disposicion de los
elementos sobre la superficie de trabajo. Normalmente se busca este equilibrio,
aunque en alguna ocacion se provoca un desequilibrio intencionado para conseguir
unos resultados especificos en un diseño.
Se define al equilibrio como una apreciacion subjetiva, en la cual los elementos de una
composicion no se van a desprender y se consideran dos tipos que son: equilibrio
estatico y equilibrio dinamico. El equilibrio estatico presenta el centro de gravedad
dentro del area delimitada por los contornos externos de los diez. El equilibrio
dinamico, es aquel estado durante el cual la persona se mueve, y durante este
movimiento se modifica constantemente su sustentacion.
 Actividad
A continuación se te presentara una serie de
preguntas con 5 opciones de respuesta. Subraya la
respuesta correcta que corresponda a cada una de
ellas.
1.- es el tipo de equilibrio que proyecta el centro de gravedad dentro del area
delimitada por los contornos externos de los pies.
e) dimencional
a) direccional b) funcional c)dinamico d) estatico
2.- es el tipo de equilibrio que representan un estado durante el cual la persona se
mueve, durante este movimiento modifica constantemente su sustentacion.

d) estatico a) direccional e) dimencional c)dinamico b) 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) direccion d) Zona aurea e) contorno

Aplicar la teoria del color considerando el circulo cromatico, contraste el RGB (red,
green, blue) y CMY (cyan, magenta, yellow)
Actividad: a continuacion se te presentan una serie de preguntas contestalas lo mas
ampliamente, comenta tus respuestas ante el grupo para compartir sus conocimientos previos
bajo la lluvia de ideas dirigidas por el docente.
1.- menciona los colores que se denominan primarios.
son la tríada cian - magenta - amarillo, conocidas igualmente por sus siglas CMYK (del inglés
Cyan, Magenta, Yellow y BlacK); su mezcla en partes iguales (sustracción) da origen a
tonalidades grises oscuras, las cuales tienden -en el modelo ideal- al negro.
2.- indica que significado tiene el color azul según la psicologia del color.
el azul simboliza armonía, fidelidad, simpatía, paz, serenidad, confianza, honestidad,
comunicación, etc
3.- indica que colores representan al circulo cromatico.
Tres colores primarios lumínicos rojo, verde y azul.
Tres colores secundarios amarillo, cian y magenta.
Seis colores terciarios naranja, verde limón, turquesa, azul claro, violeta y rojo azulado, que
son el resultado de mezclar lumínicamente los colores adyacentes.
4.- que colores representan las siglas CMY.
cian, magenta y amarillo
Actividad: individual
Busca y recorta al menos seis logotipos de productos conocidos, pega en la primera columna el
logotipo y anota en una lista los colores que los representa.

no logotipo Lista de colores del logotipo

1 Azul, blanco

2 Azul, rojo, verde, amarillo

3 Amarillo, rojo

4 Rojo, blanco, azul

5 Rojo, amarillo, blanco, negro

6 Azul, blanco, negro

Como atro aspecto a considerar al diseñar tenemos la teoria del
color, ya que ello forma parte escencial en toda comunicación visual
ya que es el ojo humano quien persivira los colores que tienen cada
una de las ilustraciones. A traves de los años encontramos al filosofo
aristoteles quien indico que todos los colores se forman de la mezcla
de 4 colores y otorgo un papel fundamental en la incidencia de la luz
y la sombra sobre los mismos; los colores basicos eran los de la tierra,
fuego, agua y cielo.
Leonardo da vinci tambien definio al color como propio de la materia
estableciendo la siguiente
Blanco como el principal, este permite resivir a los demas, despues
establecio al amarillo para la tierra, verde para el agua, azul para el
cielo, rojo para el fuego, negro para la oscuridad.
 Actividad: elabora un cuadro sinoptico donde
representes la propiedades del color como parte de
las teorias del color, para ello consulta la liga:
http://www.fotonostra.com/grafico/teoriacolor.htm
también es conocido como matiz, tinte, croma o su
nombre en inglés, Hue. Es la propiedad que diferencia un
color de otro y por la cual designamos los colores: verde,
Tono violeta, rojo, etc.

representa la intensidad cromática o pureza de un

color. En otras palabras, es la claridad u oscuridad de
Saturacion un color, está determinado por la cantidad de luz que
iedades del un color tiene.
color
Luz intensa, muy clara o limpia que desprende o
Brillo refleja un cuerpo.

es la cantidad de luz reflejada por una superficie en

comparación con la reflejada por una superficie
Luminosidad blanca en iguales condiciones de iluminación. En
teoría del color, la luminosidad hace referencia a
Circulo cromatico.
Se domina circulo cromatico a la representacion grafica
sobre un circulo con seis colores reflejados en la
descomposicion de la luz visible del espectro solar según
el siguiente orden: purpura, rojo, amarillo, verde, azul
cian, azul obscuro.por lo tanto en principio se tiene tres
colores primarios purpura, amarillo, azul cian y tres
secundarios rojo, verde, azul obscuro, completandose con
otros seis resultantes de las mezclas de los primarios con
los secundarios mas proximos, con lo que el circulo
cromatico estaria compuesto por doce colores: tres
primarios, tres secundarios, seis terciarios.
Actividad
A continuacion se te presenta el circulo cromatico
colorealo de acuerdo a los tres colores primarios, tres
secundarios y seis terciarios. Lista de cotejo al final
de la unidad
Contraste:
es un fenomeno con el que se puede diferenciar colores atendiendo a la
luminosidad, al color de fondo sobre el que se proyecta, es una aspecto
importante a la hora de una composicion grafica ya que una de la formas mas
efectivas de conseguirlo es mediante el color.
Cuando dos colores diferentes entran en contraste de directo, este contraste
intensifica la diferencia entre ambos colores.
Todo diseñador y en especial de paginas web toma en cuenta esta
caracteristica, al contrstar los colores pueden ser beneficos el aser una buena
contrastacion en los colores que representaran la interfaz del sitio web,
aunque claro las empresas ya lo representan un color en sus logotipos y que al
momento de crear el sitio el diseñador se basa en los colores representativos
de la empresa solo es necesario para verlos contrastar para dar un mejor
impacto en el usuario.

Imagen con contrastes

Actividad:
A continuacion se te presentan un mapa donde se represente los
tipos de contraste y la descripcion que representa el mismo.
http://www.fotonostra.com/grafico/teoriacolor.htm

Contrastes

color cálido y color Contraste

colores puros. claro – oscuro
frío cuantitativo

Saturación de Tenemos dos

color 100% colores pero cada
La diferencia de
produce un alto Yuxtaposición de uno tiene un área
temperatura de
contraste visual. dos colores con diferente, o
cada color
Estos colores no diferente tamaño. Por lo
aumenta el
contienen ni una luminosidad o que esa diferencia
contraste visual
chispa de otro valor tonal también genera
entre ambos.
color, ni blanco ni un contraste de
negro. cantidad.
Psicologia del color: el color desprende diferentes expreciones del
ambient, pueden transmitironos calma, plenitud, alegria, violencia,
maldad, etc.
La psicologia 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 sensacion que es
reconocida por el cerebro humano la persive y representa una accion.
Color blanco: es el que mayor sensibilidad posee frente a la luz. Es la
suma o sintesis de todos los colores y el simbolo de lo absoluto, de la
unidad y de la inocencia, significa paz o rendicion. Los cuerpos blancos
nos dan la idea de molestia. El blanco crea una impresión luminosa de
vacio, positivo infinito.
Imagen de la psicologia del color.
El color negro: simbolo del errror, del mal, el misterio y en
ocasiones simbolica algo impuro y maligno. Es la muerte, es
la ausencia del color. Tambien transmite nobleza y
elegancia.
Color gris: es el centro de todo ya que se encuentra entre la
transicion entre el blanco y el negro, y producto de la
mezcla de ambos. Simboliza neutralidad indesicion y
ausencia de energia. Muchas veces expresa tristeza, duda y
melancolía. El color gris es una fusion de alegrias y penas,
de bien y del mal. Da la impresión de frialdad metalica pero
tambien situacion de brillantes y elegancia
 A continuacion se te presenta un cuadro sinoptico para que describas
de cada uno de los colores según la psicologia del color.
http://www.fotonostra.com/grafico/teoriacolor.htm
representa el lado opuesto de todo lo que
asociamos al negro, y las personas que usan
elblanco transmiten una imagen de bondad, pureza
e inocencia, ya que este color simboliza paz,
humildad y amor.
Blanco
El color favorito del poder, violencia, muerte y el
universo. ... Simboliza negación, elegancia, el color de
la elegancia, de la exposición al peligro. Transmite
nobleza y elegancia. Caracteriza al misterio, el error, el
Negro mal y en forma negativa lo impuro y maligno.
ología del
tiene dos caras opuestas y contradictorias, por un lado
color simboliza energía, alegría, iluminación, optimismo y
diversión y por el otro simboliza envidia, celos,
incertidumbre e inquietud (dependiendo de la tonalidad
Amarillo
usada… las tonalidades más cercanas a la luz solar y al oro
son las percibidas como “buenas”
Simpatía, Amistad, Confianza y Fidelidad. El azul es
Azul el color que más asociamos con la simpatía, la armonía,
la amistad y la confianza, todos ellos sentimientos que
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 computadoras o
que serán impresas de papel fotográfico.
Las imágenes rgb utilizan tres colores para reproducir
pantalla hasta 16.7 millones de colores. Rgb es el modo
por defecto para las imágenes de photoshop los
monitores de ordenadores muestran siempre los
colores rgb. Significa que como cmyk, fotoshop
combierte con modos de color diferentes. Como cmyk.
El modo rgb asigna un valor de intensidad de cada pixel
que oscile entre 0 (negro) y 255 (blanco).para cada uno
de los componentes rgb de una imagen en color
Actividad: a continuacion se te presenta el formato RGB
colorealo de acuerdo a los tres colores que representan como
primarios y los que resultan de su combinacion sobre la linea el
color que representan en el circulo.

Amarillo

Rojo
Verde

Magenta

Cian
Blanco

azul
CMY: el modelo CMY se basa en la cualidad de absorber y rechazar la luz de los
objetos. Si un objeto es rojo esto significa que el mismo absorbe todos los
componentes de la luz exceptuando la componente rojo. 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 mas claros
(iluminados) tienen un porcentaje pequeño de cinta, mientras que en los mas
obscuros (sombras) tienen porcentajes mayores, por ejemplo un rojo brillante podría
tener 2% de cian, 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 de 0%.
Como ya se comento se utiliza el modelo cmy en la preparacion de imágenes que se
van a imprimir en cualquier sistema de impresión de tinta. Aunque cmy es un modelo
de color estandar, puede variar el rango exacto de los colores representados,
dependiendo de la imprenta y las condiciones de impresión.

Imágenes de colores cmy.

Actividad: a continuacion se te presenta el circulo cromatico
colorealo de acuerdo a los tres colores primarios y los que
resulten de su combinacion.

Azul

cian
magenta

verde

Rojo
negro

Amarillo
Actividad: en equipo de tres integrantes dibuja en una manta de un
metro cuadrado el circulo cromatico, donde colores con pinturas de
agua e indiques el nombre de los colores primarios, secundarios y
terciarios, expon ante el grupo el grupo el resultado de tu trabajo.

Colores primarios

Colores terciarios

Colores secundarios
Los principios del circulo cromatico estan basados en los colores primarios rojo azul
y amarillo mismos que son aplicados en pequeños detalle.
Del rojo azul y amarillo se desprenden los colores primarios y terciarios, sumando
en total 12 colores cuya combinacion del tono y matices son limitados.
Dentro del circulo cromatico, los colores secundarios son aquellos que resultan de
la combinacion de los tres colores primarios azul, rojo y amarillo, que al mezclarse
entre si derivan los colores violeta, verde y naranja.

Buscar porcentajes de colores primarios para obtener los secundarios.

Actividad:

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

2.- es la accion de programar, proyectar y realizar comunicaciones visuales.

a) Diseño b) dibujar c) Pintar d) Elaborar e) Graficar

grafico croquis
3.- en una pagina 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 combinacion de ello.

a) Texto b) Tamaño c) Tipografia d) Color e) Imagen

4.- es un formato en el diseño que se refiere ha realizar una divicion de lineas

horizontales y verticales a una imagen que se quiere proyectar.

a) Direccion b) Sentido c) Equilibrio d) Zona aurea e) Circulo cromatico

5.- son los colores que repesentan a la teoria del color CMY.

a) cian, magenta, b) café, c) yellow, marron, d) cielo, e) café,

yellow. morado, cafe magenta, marron,
yellow yellow yellow

6.- es el numero de colores que forman el numero cromatico, representando a los colores
primarios, secundarios y terciarios.

a) 3 b) 10 c) 9 d) 6 e) 12

7.- todo sitio web debe tener una pagina principal con la informacion principal constituida por
medio de una botonera de opciones a esta pagina se le conoce como:

a) Pagina 1 b) First c) Index d) Inicio e) Primera

 Contenido o competencia 2
Manejar los elementos basicos de un lenguaje
usado en la creacion de paginas web (HTML, ASP,
JAVA SCRIPT, CSS, DREAMWEAVER U OTROS)

En esta ocasión juntos incursionaremos en el novedoso mundo de la programacion y el diseño

de paginas para internet. Es importante que sepas que vamos a desarrollar nuestras
capacidades, para transformar ideas en un documento creado en un lenguaje de
programacion, para la creacion de paginas web, logrando con ello transmitir informacion,
colores, imágenes, movimiento, etc, es decir, todos estos elemntos tan manejados en la
actualidad
 Fundamentos basicos de html
HTML es la columna vertebral de la web, es el
esqueleto de su pagina web. Como los huesos
de un cuerpo, es la estructura y esencia de
internet, aunque normalmente es invisible salvo
para el diseñador web. Dream weaver tiene
muchas características que le permiten acceder,
crear y crear código HTML de la forma rápida y
eficaz.