I.E.

P Marista Siglo XXI

MÓDULO DE
COMPUTACIÓN PARA
SECUNDARIA
 MÓDULO DE COMPUT
COMPUTACIÓN
PARA
SECUNDARIA
CRONOGRAMA
CRONOGRAMA DE CLASES

Semana
Unidades Temas Exámenes
s
IV 7ma Photoshop: Convertir Una Del 16 al 20
BIMESTRE Unidad (19 oto!ra"a en b#anco $ ne!ro a de Noviembre
de Octubre 29 co#or% &ecto de ue!o en
- 13 de Photoshop'
Noviembre) Photoshop: os pi*e#es% eecto
3 de te*to con nieve en Photoshop

Photoshop: +prendiendo
+prendiendo a hacer
31
eecto ro##o de pe#"cu#a'
32 Photoshop: +p
+prendiendo a cr
crear
nuestro propio #o!o% ,oto!ra"a
di!ita#'
 acromedia 0reameaver 
Portab#e: ntroducci4n%
33
convenciones tipo!r5icas%
+spectos 65sicos'
65sicos'
0reameaver: +rchivos de
0reameaver% Crear nuevos
3 archivos $ !uardar#os%
Coni!uraci4n de# sitio de#
pro$ecto
va Unidad 0reameaver: 0ise8o eb% htm#
( 1. de /% #as etiuetas $ #os archivos en
3/ Del 09 al 1
Noviembre htm#''
htm# de Di!iembre
- 1/ de
0iciembre)
0reameaver: Creaci4n de un
dise8o de p5!ina basado en
3. tab#as $ a#macenamiento de una
p5!ina

0reameaver: c4di!os htm#

37
b5sicos

"la#s#ra $ en%re&a de In'ormes iernes 1 de 0iciembre

 IV
TRIMESTRE
Semana 29
()*T*S)*(+ "*NVERTIR UN, -*T*.R,-/, EN B,N"* 
NE.R* , "**R E-E"T* DE -UE.* EN ()*T*S)*(3
I3 "onver%ir #na 'o%o&ra'4a en blan!o $ ne&ro a !olor+

II3 E'e!%o de '#e&o en (5o%os5o

+ continuaci4n
continuaci4n se e*p#icara
e*p#icara c4mo hacer un eecto de ue!o de orma senci##a en
+dobe Photoshop' Para e# e;emp#o uti#i<ar= #etras pero puede ap#icarse
perectamente en cua#uier i!ura'

Paso 1

+brimos un nuevo documento% de un tama8o acorde con e# #ar!o de #a pa#abra ue

se desea escribir% en mi caso #as dimensiones ueron de 3 * 12 p"*e#es' Para
ma$or comodidad visua#% recomiendo traba;ar sobre un ondo ne!ro' Con este in
puedes crear un rect5n!u#o ne!ro de #as dimensiones de# documento% esco!er
como co#or de ondo e# ne!ro a# abrir e# documento o simp#emente re##enar e# ondo
de ese co#or con #a herramienta bote de pintura '
Paso 2

ue!o% creamos una capa (ctr#' > shit > N) $ escribimos #a pa#abra a #a ue #e
ap#icaremos e# eecto% preerib#emente con una uente !ruesa $ !rande% como por
e;emp#o +ria# b#ac? (en esta ocasi4n traba;= con +ria# simp#e)% $ de co#or naran;a
uerte' @sta representa #a parte menos #um"nica de #a ima!en $ sobre e##a ir5n #as
dem5s capas' Posteriormente% creamos dos capas m5s% procediendo de #a misma
orma% pero cambiando cada ve< e# tama8o (menor ue e# anterior en 2 p"*e#es
apro*imadamente) $ e# co#or de #a uente (amari##o $ b#anco)' +s"% a# ina# debemos
tener 3 capas (sin contar e# ondo) con #a pa#abra A?#ibur% o #a ue ha$as e#e!ido% en
#os co#ores naran;a% amari##o $ b#anco de dierentes tama8os% (cada uno menor ue
e# anterior en ese orden)'
Paso 3

Be!uidamente% ubicamos #as pa#abras% una encima de #a otra% por orden de

tama8o (#a m5s !rande a# ondo $ as" sucesivamente) $ rasteri<amos #as
capas ue contienen #os te*tos para poder traba;ar#os'

Para esto simp#emente se#eccionamos #a herramienta dedo $ tratamos de diuminar

#a #etra' +# hacer esto inmediatamente sa#dr5 este mensa;e $ e#e!ir5s o? para
rasteri<ar e# te*to'

ambi=
mbi=nn pued
puedes menD !aa $ e#e!
es ir a# menD ir ras%eri7ar E %ex%o'
e#e!ir %ex%o' Otra
tra orma es
haciendo c#ic con e# bot4n derecho de# mouse sobre #a capa a rasteri<ar'

Paso 

Con #a herram
herramien
ienta
ta dedo
dedo diumi
diuminam
namos
os #os bordes
bordes de #as #etras
#etras%% de
de
aden
adentr
tro
o haci
hacia
a uer
uera%
a% hast
hasta
a #o!r
#o!rar
ar dar#
dar#es
es un eec
eecto
to de rast
rastro
ro de ##am
##amaa
reu#!ente' Facemos esto con todas #as capas rasteri<adas' &n esta #abor
debemos tapar cua#uier desperecto ori!inado por #a ubicaci4n de #as #etras
diuminando hacia #as 5reas desi!ua#es para dar#e un acabado uniorme'
 Paso /

+;ustamos e# co#or se!Dn nuestro a!rado

a!rado para otor!ar#e ma$or uer<a a #a ##ama% en
menD ima&en E a8#s%es E e#i
e# menD e#ilib
librio
rio de !olor
!olor' !ua#
!ua#men
mente%
te% podemo
podemoss crear
crear
un eecto de re#e;o para dar#e un acabado m5s atractivo'

Como puedes ver% s4#o se reuieren / senci##os pasos para #o!rar este pr5ctico
eecto de ue!o ue puede emp#earse en cua#uier ob;eto o i!ura' 65sicamente #a
t=cnic
t=cnica
a consi
consiste
ste en diumi
diuminar
nar #os
#os borde
bordess de un ob;et
ob;eto%
o% hacie
haciendo
ndo movimi
movimien
entos
tos
a#ar!ados% de adentro hacia auera% emp#eando varias capas para contro#ar #a
#uminosidad'
#uminosidad' ientras m5s capas uses m5s rea#ista uedar5'
Semana :0
()*T*S)*(+ *S (I;EES E-E"T* DE TE;T* "*N NIEVE
EN ()*T*S)*(
III3 os 4xeles+

os p"*e#es son aue##os puntos ue orman #as im5!enes di!ita#es% como por
e;emp#o% #as de #a panta##a de# computador% o de #a ima!en ue resu#ta de una
impresora' Cada uno de estos puntos se denomina p"*e#% $ a# observar#os todos
;untos se orma una ima!en' a cantidad de puntos o pi*e#es con ue cuente
una ima!en va a indicar #a ca#idad de su reso#uci4n' &n t=rminos senci##os son
#os GpuntitosG con #os ue est5n hechas #as im5!enes en e# mundo de #a
computaci4n'

&# t=rmino p"*e# proviene de# idioma in!#=s $ se orma !racias a #a uni4n de dos
pa#abras% Hpicture e#ementI' &n espa8o#% es posib#e de ser traducido como
He#emento de ima!enI'

+mp#iando #o suiciente una ima!en (<oom) en #a panta##a de una computadora%

pueden observarse #os p"*e#es ue componen #a ima!en' os p"*e#es son #os
puntos de co#or (siendo #a esca#a de !rises una !ama de co#or monocrom5tica)'
as im5!enes se orman como una sucesi4n de p"*e#es' a sucesi4n marca #a
coherencia de #a inormaci4n presentada% siendo su con;unto
una matri< coherente de inormaci4n para e# uso di!ita#' &# 5rea donde se
pro$ectan estas matrices sue#e ser rectan!u#ar' a representaci4n de# p"*e# en
panta##a% a# punto de ser accesib#e a #a vista por unidad% orma un 5rea
homo!=nea en cuanto a #a variaci4n de# co#or $ densidad por pu#!ada% siendo
esta variaci4n nu#a% $ deiniendo cada punto sobre #a base de #a densidad% en #o
reerente a# 5rea'
&n #as im5!enes de mapa de bits% o en #os dispositivos !r5icos% cada p"*e# se
codiica mediante un con;unto de bits de #on!itud determinada (es #a ##amada
pro
proun
undi
dida
dad
d de co co#o
#orr )J por e;e
e;emp#o
mp#o%% puede
uede codi
odiic
icar
arse
se un p"* p"*e# con
un b$te ( bits
bits)%
)% de manera ue cada p"*e# admite hasta 2/. variaciones de
co#or (2posibi#idades binarias)% de  a 2//' &n #as im5!enes ##amadas de co#or
verdadero%% norma#mente se usan tres b$tes (2 bits) para deinir e# co#or de un
verdadero
p"*e#J es decir% en tota# se puede representar un tota# de 2 2 co#ores% esto es 1.
777 21. variaciones de co#or' Una ima!en en #a ue se uti#icen 32 bits para
representar un p"*e# tiene #a misma cantidad de co#ores ue #a de 2 bits% $a
ue #os otros  bits son usados para eectos de transparencia'
Para poder visua#i<ar% a#macenar $ procesar #a inormaci4n num=rica ue se
representa de cada p"*e#% se debe conocer% adem5s de #a proundidad $ bri##o
de# co#or% e# mode#o de co#or ue se est5 uti#i<ando' Por e;emp#o% e# mode#o de
co#or KL6 (Ked-Lreen-6#ue) permite crear un co#or compuesto por #os tres
co#ores primarios se!Dn e# sistema de me<c#a aditiva' 0e esta orma% en unci4n
de #a cantidad de cada uno de e##os ue se use en cada p"*e# ser5 e# resu#tado
de# co#or ina# de# mismo' Por e;emp#o% e# co#or ma!enta se obtiene me<c#ando
e# ro;o $ e# a<u#% sin componente verde (este b$te se pone en cero)' as
distintas tona#idades de# mismo co#or se obtienen variando #a proporci4n en ue
intervienen ambas componentes (se a#tera e# va#or de esos dos b$tes de co#or
de# p"*e#)' &n e# mode#o KL6 #o m5s recuente es ue se usen  bits para
repres
represent
entar
ar #a propor
proporci4
ci4n
n de cada
cada una de #as tres compon
componenentes
tes de co#or
co#or
primarias' 0e esta orma% cuando una de #as componentes va#e % si!niica ue
e##a no interviene en #a me<c#a $ cuando va#e 2// (2  M 1) si!niica ue
interviene aportando e# m5*imo de ese tono% va#ores intermedios proveen #a
intensidad correspondiente'
a ma$o
ma$orr part
parte
e de #os
#os disp
dispos
osititiv
ivos
os ue
ue se usan
usan con
con una
una comp
compututad
ador
ora
a
(monitor% esc5ner% etc') usan e# mode#o KL6 (mode#o de re#e*i4n o aditivo)%
e*cepto #os ue aportan tintes% como #as impresoras% ue sue#en usar e# mode#o
C (mode#o sustractivo)'
(ro'#ndidad de !olor
Un p"*e#% comDnmente% se representa con:  bits (2  co#ores)% con 2 bits
(22 co#ores%  bits por cana# de co#or) o con  bits (2  co#ores)J en oto!ra"a
avan<ada$$ di!ita#i<aci4n de im5!enes proesiona# se uti#i<an proundidades aDn
avan<ada
ma$ores% e*presadas siempre en va#ores de bitscana# de co#or en #u!ar de #a
suma de #os tres cana#es' os primeros son #os m5s uti#i<ados% reservando e#
de  bits para im5!enes de a#ta ca#idad pero en tonos de !rises% o bien con 2/.
co#ores en pa#eta se#eccionada para ba;a ca#idad co#orim=tricaJ e# de 2 bits es
e# m5s comDn $ de a#ta ca#idad% se #o uti#i<a en #a ma$or"a de #as im5!enes
oto!r5icas'
Me&a4xel
Un me!ap"*e# o me!ap"*e# (p*) euiva#e a 1 mi##4n de p"*e#es% a dierencia de
otras medidas usadas en #a computaci4n en donde se sue#e uti#i<ar #a base de
12 para #os prei;os% en #u!ar de 1% debido a su conveniencia respecto de#
uso de# sistema binario'
binario' Usua#mente se uti#i<a esta unidad para e*presar #a
reso#u
res o#uci4
ci4n
n de ima
ima!en
!en de c5ma
c5maras
ras di!ita
di!ita#es
#esJJ por
por e;em
e;emp#
p#o%
o% una
una c5ma
c5mara
ra ue
ue
puede tomar oto!ra"as con una reso#uci4n de 2 Q 1/3. p"*e#es se dice ue
tiene 3%1 me!ap"*e#es (2 Q 1/3. R 3'1/'72)'
a cantidad de me!ap"*e#es ue ten!a una c5mara di!ita# deine e# tama8o de
#as oto!ra"as ue puede tomar $ e# tama8o de #as impresiones ue se pueden
rea#i<arJ sin embar!o% ha$ ue tener en cuenta ue #a matri< de puntos est5
siendo distribuida en un 5rea bidimensiona# $% por tanto% #a dierencia de #a
ca#i
ca#ida
dadd de #a ima!
ima!en
en no crec
crecee prop
propor
orcciona
iona#m
#men
ente
te con
con #a cant
cantid
idad
ad de
me!ap"*e#es ue ten!a una c5mara% a# i!ua# ue #as x de una !rabadora de
discos compactos'
as c5maras di!ita#es usan componentes de e#ectr4nica otosensib#e% como
#os CC0 (de# in!#=s Char!e-Coup#ed 0evice) o sensores COB COB%% ue !raban
nive#es de bri##o en una base por-p"*e#' &n #a ma$or"a de #as c5maras di!ita#es%
e# CC0 est5 cubierto con un mosaico de i#tros de co#or % teniendo re!iones co#or
ro;o% verde $ a<u# (KL6
( KL6)) or!ani<adas comDnmente se!Dn e# i#tro de 6a$er% as"
ue cada p"*e#-sensor puede !rabar e# bri##o de un so#o co#or primario' a
c5mara interpo#a #a inormaci4n de co#or de #os p"*e#es vecinos% mediante un
proceso ##amado interpo#aci4n crom5tica%
crom5tica % para crear #a ima!en ina#'
Dimensiones de ima&en se&<n roor!i=n $ !an%idad de ixeles
Para saber e# nDmero tota# de p"*e#es de una c5mara% basta mu#tip#icar e# ancho
de #a ima!en m5*ima ue puede !enerar por e# a#to de #a misma -desactivando
previamente e# <oom di!ita#-J
di!ita#-J tambi=n es posib#e dividir e# nDmero de p"*e#es de
ancho entre e# nDmero correspondiente a# a#to% $ conocer #a proporci4n de #a
ima!en obtenida' +u" se presenta una #ista de #as reso#uciones comunes de
c5maras di!ita#es bas5ndose en esta re#aci4n de aspecto:

Me&a4xele Tama>o ima&en :+2 Tama>o ima&en A+:

s ?(4xeles@ ?(4xeles@

%3 .71*7 .32*7

1 122*1. 11//*..

1%2 131*9 12./*99

2 1733*11// 1.33*122/

3 2121*11 2*1/

 2/*1.33 239*1732

/ 2739*12. 2/1*193.

/%3 22*1 2./9*199

. 3*2 22*2121

.%3 37*29 299*217

 3.*239 32./*29

1 373*2/2 3./2*2739

12 22*22 *3

1 /3*3// 32*32

1/ 73*31.2 72*33/

1. 99*32.. .19*3.

1 /19.*3. 99*3.7
2 /77*3./1 /1.*373

21 /.13*372 /292*39.9

22 /7/*33 /1.*.2

2 .* /./7*23

2/ .123*2 /773*33

2 .*32 .111*/3

3 .7*72 .32*73

32 .929*.19 ./32*99

3 712*7.1 .733*//

3/ 72/*3 .31*/123

3. 739*99 .92*/19.

39 7.9*/99 7211*/

 77.*/1. 733*/77

 12*/1. 7..*/7/

 .*/./7 *.
/ ..1*/77 1./*.12

.i&a4xel
Un !i!a p"*e# (Lp*) euiva#e a un mi##ardo o mi# mi##ones de p"*e#es% uti#i<ando
#a base 1 de #os prei;os de# sistema internaciona#%
internaciona# % en ve< de #a base
12BO&C
12BO&C  o prei;o binario uti#i<ados norma#mente en e# entorno de
#a inorm5tica
inorm5tica'' Usua#mente se uti#i<a esta unidad para e*presar #a reso#uci4n de
ima!en de c5maras di!ita#es'
di!ita#es '
&*isten c5maras di!ita#es capaces de rea#i<ar oto!ra"as en !i!a p"*e#es% como
por
por e;em
e;emp#
p#o
o #a +KLUB-B de #a +!encia de Pro$ectos de nvesti!aci4n
(0+K P+))2 $ #a GsDper c5maraG desarro##ada por 0avid
+van<adoss de 0eensa (0+KP+
+van<ado
6rad$ $ su euipo de in!enieros de #a Universidad de 0u?e'
0u?e '

IV3 E'e!%o de %ex%o !on nieve en (5o%os5o

&ste es un tip mu$ senci##o pero no por eso menos interesante% #a verdad es
ue ueda mu$ bien'

o primero es abrir un archivo nuevo con #as si!uientes caracter"sticas:

&n una capa nueva% con #a herramienta de te*to escribimos a#!o:

ue!o creamos otra capa por encima de# te*to $ en !aaCes%ilo de !aa #e damos
#os si!uientes va#ores:
Para acabar% con un pince# dibu;amos #a nieve $ no  puede uedar a#!o as":
 Semana :1
V3 ()*T*S)*(+ ,(RENDIEND* , ),"ER E-E"T* R** DE
(E/"U,3
0entro de #os mD#tip#es otomonta;es ue podemos hacer en Photoshop se
encuentra tambi=n% e# eecto ro##o de pe#"cu#a% e# cua# es usado en a#!unas
promociones de carte#eras en cines'
1' Primero
Primero vamos
vamos a crear e# marco
marco ne!ro ue ##eva #as otos%
otos% hace
hacemos
mos con
con
#a herramienta de marco rectan!u#ar $ tra<amos una tira #ar!a en #a ue
apro*% uepan unas cuatro im5!enes'

2' e das c#ic

c#ic derecho%
derecho% se#ecci
se#ecciona
ona contorn
contornear
ear $ da#e e# !rosor
!rosor de 33 pi*' (se
puso m5s !rueso)' ue!o para hacer #as separaciones haces #o mismo
pero #e das un contorneado de / pi*' $ $a tienes dividido tu cinta en cuatro
partes'

3' +hora hacemo

hacemoss #os a!u;eros
a!u;eros de
de #a cinta con
con e# pince#
pince# de cuadros%
cuadros% $ vamos
vamos
a a;ustes preestab#ecidos de pinc#e' $ hacemos e# espaciado necesario
para ue se miren bien #os cuadros de co#or b#anco% para no hacer cuadro
por cuadro a trav=s de toda #a cinta hacemos e# primer cuadro% presionas
Bhit $ haces c#ic en e# espacio ue uieras ue este e# D#timo cuadro $
vera< ue te contorneo toda una #"nea% ha< #o mismo en #a otra de aba;o'

' ahora
ahora ponemos
ponemos #as im5!ene
im5!eness de #a pe#"cu#
pe#"cu#a
a en #os cuatro
cuatro espaci
espacios%
os% no
importa si se te deorman% da i!ua# porue ese es e# eecto' $ como te van
a sa#ir en capas dierentes #as tienes ue unir todas'

/' ahora
ahora unes #a capa
capa de im5!enes
im5!enes $ #a de#
de# marco $ te vas a Ctr#
Ctr# > '
' $ te vas
vas
a# icono de arriba en Gmodos de transormaci4n #ibre $ deormaci4nG ah"
se#eccionas #a opci4n de bandera $ tu cinta de pe#"cu#a se dar5 con #a
orma
orma de ununa a ba
band
nder
era'
a' ah
ah"" mi
mism
smo
o #e pu
pued
edes
es da
darr #a pe
pers
rspe
pect
ctiv
iva%
a% #a
distorsionas% #a ses!a<% #a deormas a tu !usto'

.' Para
Para #a som
sombra
bra de #a cinta ha$ varia
variass opciones
opciones $o te ense8ar
ense8are
e so#o una%
una%
vamos a sacar#e copia a #a capa de #a cinta $ #e vamos a ba;ar toda #a
#uminosidad con Ctr# >U' $ #e vamos a ap#icar un i#tro de 0esenoue S
desenoue !aussiano% $ #o har5 parecer una sombra #o acomodas con #a
herramienta mover o con #as #echitas hasta donde tu consideres ue es
una sombra'

7' +!r=!a
+!r=!a#e
#e eectos
eectos ,* (eect
(eectos)
os) a #a cinta de tu pe#"cu#
pe#"cu#a
a $ tod
todo
o #o ue se
desee'
Semana :2
()*T*S)*(++ ,(RENDIEND* , "RE,R NUESTR* (R*(I* *.*
()*T*S)*(
VI3 ,(RENDIEND* , "RE,R NUESTR* (R*(I* *.*
Haciendo el logo desde cero con trazados : Lo primero que necesitamos es el
cont
contorn
orno
o u imag
imagen
en a darl
darle
e un real
realza
zado
do o extr
extrus
usió
ión
n (ext
(extru
ruda
dado
do),
), por
por lo que
que
mediante la herramienta Pluma (en este caso, como ejemplo tenemos el logo de
Blender) haremos el dibujo mediante trazados:

Prev
Previa
iame
ment
nte
e elegi
elegido
do un colo
colorr ron
ronta
tall para
para el cont
contorn
orno
o en este
este caso
caso nara
naranj
nja,
a,
elegimos la herramienta selección de trazado, damos clic sobre el trazado, luego clic
derecho ! del men" desplegado elegimos #ellenar sub trazado:

$n la ventana de rellenar sub trazado agregaremos al contorno el relleno de color

elegido:

#epetimos esto con el c%rculo interior pero con un color rontal en azul, el resultado
es el siguiente:
&os vamos a la ventana trazados ! abajo de Trazado de trabajo damos clic en el
area grid vacia para deseleccionar el contorno ! trabajar con comodidad:

#egresamos ! elegimos la capa que llamaremos logo, luego nos vamos al men"
$ditar ' ransormar
ransormar ' Perspectiva:

oviendo los nodos ajustamos la perspectiva:

Extruir Logo:

Para la extrusión del ejemplo tuve que crear *+ copias del logo original sumadas a
este
este son
son un tota
totall de *
*,, para
para real
realiizar
zar el truc
truco,
o, con
con la capa
capa sele
selecc
ccio
iona
nada
da
pulsamos -#L . /012 . 3na de las teclas direccionales, (4jo: $n caso de no
servir
servir la combinaci
combinación ón usen 5L
5L . 6irecciona
6ireccional)
l) para este ejemplo:
ejemplo: manteniend
manteniendo o
presionadas
presionadas -#L . /012
/012 pulsando
pulsando *+ veces la direcc
direccional
ional derecha
derecha quedand
quedando o la
capa logo copia *+ como la parte superior del objeto ! la capa Logo como la base:
5s% quedar7 la imagen con el volumen +6:

5hora mezclaremos todas las copias intermedios entre la capa logo copia *+ ! capa
logo8
/i queremos seleccionar muchas capas:
 98 6amos
6amos clic
clic para
para en logo
logo copia
copia *
8 &os posi
posicio
cionam
namos
os sobre
sobre la
la capa
capa logo
logo
copia
+8 Pulsam
Pulsamosos shit
shit sin
sin soltar
soltar ! pulsamo
pulsamos s en
la capa logo copia8
8 odas
odas las
las copias
copias selecciona
seleccionadas
das estar7n
estar7n
sombreadas en azul8

Para
Para mezcla
mezclarr las capas
capas damos
damos clic
clic derecho
derecho
sobre las capas marcadas en azul ! del men"
seleccionamos -ombinar capas:

5s% quedar
quedar7 7 entonc
entonces
es tres
tres capas
capas,, logo
logo copia
copia
*+ que
que es el renrente,
te, logo
ogo copia
opia 9 a * lo
extruido ! logo, que es el ondo:

$stos son los estilos de capas aplicados; la /ombra paralela es para la capa que
har7 de ondo, el /at%n sirve para dar un relleno variable ! volum<trico, puede
usarlo en modo de usión multiplicar para la capa que hace de parte intermedia o
en modo normal con dierentes colores en la capa que hace de rente, el Bisel !
relieve "selo para los brillos de las esquinas en la capa que hace de rente:

$ste es el resultado con los estilos de capa aplicado:

/i metemos todas las capas en una carpeta de grupo podemos rotar el objeto a
nuestro gusto, con algunos ajustes en el /at%n de la parte intermedia se mejora el
eecto de volumen ! m7s un ondo bonito <ste es el resultado:

Semana ::
M,"R*MEDI, DRE,ME,VER  (*RT,BE+
INTR*DU""IFN "*NVEN"I*NES TI(*.RG-I",S ,S(E"T*S
BGSI"*S3

I3 INTR*DU""IFN
acromedi
acrom edia
a 0re
0ream
ameaveaver
er  es un ed edito
itorr F
F  pro
proes esion
iona#
a# par
para
a dis
dise8a
e8ar%
r%
codiic
codiicar
ar $ des
desarr
arro##
o##ar
ar sit
sitios
ios%% p5!
p5!ina
inass $ ap#
ap#ica
icacio
ciones
nes Te Teb'b' anto si des
desea
ea
contro#ar manua#mente e# c4di!o F como si preiere traba;ar en un entorno
de ed
edicici4
i4n
n vi
visu
sua#
a#%% 0r
0rea
eam
mea eave
verr #e prprop
opororci
cion
onaa Dt
Dti#i#es
es heherr
rram
amie
ient
ntas
as u
ue
e
me;orar5n su e*periencia de creaci4n Teb'
&sta !u"a es una introducci4n para uti#i<ar acromedia 0reameaver  diri!ida
a #os usuarios ue no est5n ami#iari<ados con a#!Dn aspecto undamenta# de
esta ap#icaci4n' os tutoria#es de ue consta #e !u"an a trav=s de# proceso de
creaci4n de un sitio Teb senci##o pero unciona#'
o #e #ede 5a!er !on DreamHeaver 
as unciones de edici4n visua# de 0reameaver permiten crear p5!inas eb
de orma r5pida% sin escribir una so#a #"nea de c4di!o' Puede ver todos #os
e#em
e#emen
ento
toss o acactitivo
voss de
de## si
sitio
tio $ ar
arra
rast
stra
rar#
r#os
os de
desd
sde e un pa
pane ne## 5
5ci
ci## de us
usar
ar
dire
direct
ctam
amen ente
te ha
hast
sta a un do docu
cume
ment
nto'
o' Pu
Puededee a!
a!i#i
i#i<a
<arr e# ##u;
u;o
o de trtrab
aba;
a;o
o de
desa
de sarro
rro####o
o me
medi
dian
ante te #a crcrea
eaci
ci4n
4n $ ededic
ici4
i4n
n de im im5!
5!en
enes
es en a acr crom
omed
edia
ia
,ireor?s o en otra ap#icaci4n de !r5icos $ su posterior importaci4n directa a
0reameaver' 0reameaver tambi=n contiene herramientas ue aci#itan #a
adici4n de activos de ,#ash a #as p5!inas eb'
Novedades en DreamHeaver 
0reameaver  incorpora muchas unciones nuevas ue #e a$udar5n a dise8ar
p5!
5!iina
nass Te
Teb
b $ apap##ic
icac
acio
ion
nes con un m"m"nnim
imo
o de titie
emp
mpoo $ esesu
uer
er<o
<o''
0reameaver simp#iica #as tecno#o!"as m5s comp#e;as $ #as hace accesib#es%
a$ud5ndo#e a conse!uir m5s en menos tiempo'
@stas son a#!unas de #as nuevas unciones de 0reameaver :
 Ferramienta Voom $ !u"as
 incu#aci4n de datos visua# de A
 Nuevo pane# de esti#os CBB
 isua#i<aci4n de dise8o CBB
 Contracci4n de c4di!o
 6arra de herramientas de codiicaci4n
 ranserencia de archivos en se!undo p#ano
 nserci4n de comando de ,#ash ideo
II3 "*NVEN"I*NES TI(*.RG-I",S
TI(*.R G-I",S
&n esta !u"a se uti#i<an #as convenciones tipo!r5icas si!uientes:
si!uientes:
 os e#ementos de #os menDs se muestran en este ormato: nombre de# menD
E no
nomb
mbre
re de
de## e#
e#em
emen
ento
to de
de## me
menD
nD'' o
oss e#
e#em
emen
ento
toss de #o
#oss su
sub
b me
menD
nDss se
muestran en este ormato: nombre de# menD nombre de# submenD E nombre
de# e#emento de# menD'
 a uente de c4di!o indica nombres de etiuetas $ atributos F% as" como
e# te*to #itera# emp#eado en #os e;emp#os'
 a uente de c4di!o en cursiva indica e#ementos reemp#a<ab#es (tambi=n
denominados meta s"mbo#os) en e# c4di!o'
 &# te*to Koman en ne!rita permite distin!uir e# te*to ue debe introducirse
#itera#mente'
III3 ,S(E"T*S BGSI"*S
Para sac
Para sacar
ar e# m5*
m5*imo
imo pro
provec
vecho
ho de acacrom
romedi
edia
a 0re
0ream
ameav
eaver
er % deb
deber5
er5
conocer cu5#es son #os conceptos ue sub$acen a# espacio de traba;o de
0reameaver' &n
&n cap"tu#o presenta #os
# os e#ementos m5s importantes $ uti#i<ados
de# espacio de traba;o $ e*p#ica c4mo rea#i<ar a#!unas tareas b5sicas con
0reameaver'
&# espacio de traba;o de 0reameaver permite ver #as propiedades de #os
documentos $ #os ob;etos' +dem5s% co#oca muchas de #as operaciones m5s
recuentes en barras de herramientas para ue pueda rea#i<ar cambios en #os
documentos r5pidamente'
&n Tindos% 0reameaver proporciona un dise8o inte!rado en una Dnica
ventana' &n e# espacio de traba;o inte!rado% todas #as ventanas $ pane#es
est5n inte!rados en una Dnica ventana de #a ap#icaci4n de ma $or tama8o'

Ven%ana de do!#men%o+ a ventana de documento muestra e# documento

actua#' Puede e#e!ir entre una de #as
# as vistas si!uientes:
a vi
vis%
s%aa Di
Dise
se>o
>o++ &s un entorno de dise8o para e# dise8o visua# de #a
p5!ina% #a edici4n visua# $ e# desarro##o r5pido de ap#icaciones' &n esta
vista%
vista% 0re
0ream
ameav
eaver
er mue
muestr
stra
a un
una
a rep
repres
resent
entaci
aci4n
4n vis
visua#
ua# de# doc
docume
umento
nto
comp#etamente editab#e% simi#ar a #a ue aparecer"a en un nave!ador'
a vis%a "=di&o+ &s un entorno de codiicaci4n manua# para escribir $
editar c4di!o F% WavaBcript% c4di!o de #en!ua;e de servidor% como por
e;emp#o PFP o Co#d,usion ar?up an!ua!e (C,)% $ otros tipos de
c4di!
c4di!o'
o' Par
Para
a m5s in
inorm
ormac
aci4n
i4n%% con
consu
su#te
#te Cap
Cap"tu
"tu#o
#o 2% HCo
HCodi
diica
icaci4
ci4n
n en
0reameaverI en Uti#i<aci4n de 0reameaver'
&s posib#e ver e# mismo documento en #as dos vistas% C4di!o $ 0ise8o% en una
so#a ventana de documento' Cuando #a ventana de documento tiene una barra
de t"tu#o% =sta muestra e# t"tu#o de #a p5!ina $% entre par=ntesis% e# nombre $ #a
ruta de# archivo' Bi se han rea#i<ado cambios ue aDn no se han !uardado%
despu=s de# nombre de# archivo 0reameaver inc#u$e un asterisco'
Cuando se ma*imi<a #a ventana de documento en e# dise8o inte!rado de
espacio de traba;o (s4#o Tindos)% no aparece #a barra de t"tu#oJ en este caso%
e# t"tu#o de #a p5!ina $ e# nombre $ #a ruta de# archivo aparecen en #a barra de
t"tu#o de #a ventana principa# de# espacio de traba;o'
+dem5s% cuando una ventana de documento
documento est5 ma*imi<ada% aparecen ichas
en #a parte superior de #a misma con #os nombres de archivo de todos #os
documentos abiertos' Para cambiar a un documento% ha!a c#ic en su icha'
Barra de 5erramien%as de Do!#men%o
a bar
barra
ra de her
herram
ramien
ientas
tas de 0oc
0ocume
umento
nto con
contien
tiene
e bot
botone
oness ue per
permit
miten
en
a#ternar entre dierentes vistas de# documento r5pidamente: vista C4di!o% vista
0ise8o $ una vista dividida ue muestra #as vistas C4di!o $ 0ise8o'
a barra de herramientas contiene tambi=n a#!unos comandos $ opciones
re#ativos a #a visua#i<aci4n de# documento $ a su transerencia entre #os sitios
#oca# $ remoto'

&n #a barra de herramientas de 0ocumento% aparecen #as si!uientes opciones:

Mos%rar vis%a de !=di&o+ B4#o muestra #a vista C4di!o en #a ventana de
documento'
Mos%rar vis%as de !=di&o $ dise>o+ uestra #a vista C4di!o en una parte de
#a ventana de documento $ #a vista 0ise8o en #a otra parte' Cuando se#eccione
esta
esta vis
vista
ta com
combin
binad
ada%
a% se enc
encont
ontrar5
rar5 dis
dispo
ponib
nib#e
#e #a opc
opci4n
i4n i
ista
sta de dis
dise8
e8o
o
encima de# menD er' Uti#ice esta opci4n para especiicar u= vista debe
aparecer en #a parte superior de #a ventana de documento'
De#ra!i=n del servidor+ uestra un inorme ue #e a$udar5 a depurar #a
p5!ina de Co#d,usion actua#' &# inorme contiene #os errores de #a p5!ina% si #os
ha$'
T4%#lo del do!#men%o+ Permite introducir un t"tu#o para e# documento% ue
aparecer5 en #a barra de t"tu#o de# nave!ador' Bi e# documento $a tiene t"tu#o%
=ste aparecer5 en dicho campo'
No ha
ha$$ ererro
rore
ress de cocomp
mpro
roba
baci
ci4n
4n de na
navve!
e!ad
ador
or pe
perm
rmitite
e co
comp
mpro
roba
barr #a
compatibi#idad con distintos nave!adores'
Validar 'orma
Validar 'orma%o+
%o+ Per
ermi
mite
te va#
a#id
idar
ar e# do
doccum
umen
ento
to ac
actu
tua#
a# o un
una
a et
eti
iue
ueta
ta
se#eccionada'
,dminis%ra!i=n de ar!5ivos+ uestra e# menD emer!ente +dministraci4n de
archivos'
Vis%a r
Vis%a revi
eviaD
aDe#
e#rar
rar en exexlor
lorado
ador+
r+ Pe
Perm
rmitite
e ve
verr un
una
a vi
vist
sta
a pr
prev
evia
ia de
de##
documento o depurar#o en un nave!ador' Be#eccione un nave!ador en e# menD
emer!ente'
,!%#ali7ar vis%a de dise>o+ +ctua#i<a #a vista 0ise8o tras rea#i<ar cambios en
#a vista C4di!o' os cambios rea#i<ados en #a vista C4di!o no aparecer5n de
orma autom5tica en #a vista 0ise8o hasta ue se eectDen determinadas
acciones% como !uardar e# archivo o hacer c#ic en este bot4n'
Ver o!iones+ Permite deinir #as opciones de #as vistas C4di!o $ 0ise8o% $
estab#ecer u= vista va a aparecer en #a parte superior de #a ventana' as
opciones de# menD corresponden a #a vista actua#: #a vista 0ise8o% #a vista
C4di!o o ambas'
,$#das vis#ales+ Permite uti#i<ar distintas a$udas visua#es para e# dise8o de
#as p5!inas
Barra de es%ado
a barra de estado% situada en #a parte inerior de #a ventana de documento%
proporciona inormaci4n adiciona# sobre e# documento ue est5 creando'

El sele!%or de e%i#e%as+ uestra #a ;eraru"a de etiuetas ue rodea a #a

se#e
se#ecc
cci4
i4n
n acactu
tua#
a#'' Fa
Fa!a
!a c#
c#ic
ic en cucua#
a#u
uieierr et
eti
iue
ueta
ta de #a ;e ;era
rar
ru"
u"a
a pa
para
ra
se#e
se#ecc
ccio
iona
narr #a et
eti
iue
ueta
ta $ to
todo
do su co
cont
nten
enid ido'
o' FaFa!a
!a c#
c#ic
ic en Sb Sbod
od$E
$E pa
para
ra
se#eccionar todo e# cuerpo de# documento' Para deinir #os atributos c#ass o id
para una etiueta en e# se#ector de etiuetas% ha!a c#ic con e# bot4n de derecho
de## ra
de rat4
t4nn (T
(Tin
indo
dos
s)) o ma
mantnten
en!a
!a pr
pres
esio
iona
nadada #a tetec#
c#a
a Co
Cont
ntro
ro## $ ha
ha!a
!a c#
c#ic
ic
(acintosh) en #a etiueta $ e#i;a una c#ase o un 0 de# menD conte*tua#'
&# se
se#e
#ect
ctor
or de et
eti
iue
ueta
tass es e# m=t
m=tod
odo
o m5
m5ss ad
adec
ecua
uado
do pa
para
ra se
se#e
#ecc
ccio
iona
narr
etiuetas% porue #e !aranti<a ue siempre se est5 se#eccionado #a etiueta de
manera precisa'
a 5erramien%a Mano+ Permite hacer c#ic en e# documento $ arrastrar#o hasta
#a ve
vent
ntan
anaa de dodocu
cume
ment
nto'
o' Fa
Fa!a
!a c#
c#ic
ic en #a he
herr
rram
amie
ient
nta
a Be
Be#e
#ecc
ccio
iona
narr pa
para
ra
desactivar #a herramienta ano'
a 5erramien%a Joom $ el men< emer&en%e+ Permiten estab#ecer nive# de
aumento permiten estab#ecer e# nive# de amp#iaci4n de# documento' Para m5s
inorm
inormac
aci4
i4n%
n% co
cons
nsu#
u#te
te HU
HUti#
ti#i<
i<ac
aci4
i4n
n de +ce
cerc
rcar
ar $ +#e
#e;a
;arI
rI en Ut
Uti#i#i<
i<ac
aci4
i4n
n de
0reameaver'
El men< emer&en%e Tama>o de ven%ana+ (s4#o aparece en #a vista 0ise8o)
permite cambiar e# tama8o de #a ventana de documento para ue adopte
dimens
dimension
iones
es pre
predet
determ
ermina
inada
dass o per
person
sona#i
a#i<ad
<adas'
as' Par
Para
a m5s in
inorm
ormaci
aci4n%
4n%
consu#te HCambio de# tama8o de #a ventana de documentoI en Uti#i<aci4n de
0reameaver'
+ #a derecha de# menD emer!ente ama8o de ventana aparecen #a estimaci4n
de# tama8o de# documento $ de# tiempo de descar!a de #a p5!ina% inc#uidos
todos #os archivos dependientes% como im5!enes $ otros archivos mu#timedia'
Barra Inser%ar
a barra nsertar contiene botones para #a creaci4n e inserci4n de diversos
tipos de ob;etos% como tab#as% capas e im5!enes' +# pasar e# puntero sobre un
bot4n% aparece una descripci4n de #a herramienta con e# nombre de# bot4n'

os botones est5n or!ani<ados en cate!or"as% a #as ue puede cambiar en #a

parte i<uierda de #a barra nsertar' Bi e# documento actua# contiene c4di!o de
serv
servido
idorr% co
como
mo #o#oss do
docu
cume
mentntos
os +BP o C, C,
%% ap
apar
arec
ecen
en tatamb
mbi=
i=n
n ot
otra
rass
cate!or"as' Cuando se inicia 0reameaver% se abre #a D#tima cate!or"a con #a
ue ha traba;ado'

+#!unas cate!or"as tienen botones con menDs emer!entes' +# se#eccionar una

opci
opci4n
4n de un me menD
nD em
emer
er!e
!ent
nte%
e% di
dich
chaa op
opci
ci4n
4n se co
conv
nvie
iert
rte
e en #a acacci
ci4n
4n
predeterminada de# bot4n' Por e;emp#o% si se#ecciona arcador de posici4n de
ima!en en e# menD emer!ente de# bot4n ma!en% #a si!uiente ve< ue ha!a c#ic
en e# bot
bot4n
4n ma
ma!en
!en%% 0re
0ream
ameav
eaver
er ins
insert
ertar5
ar5 un mar
marcad
cador
or de pos
posici
ici4n
4n de
ima!en
ima!en'' Bie
Biempr
mpre
e ue sese#ec
#eccio
cione
ne una nuenueva
va opc
opci4n
i4n de# men
menD
D eme
emer!e
r!ente
nte
cambiar5 #a acci4n predeterminada de# bot4n'

a barra nsertar est5 or!ani<ada en #as cate!or"as si!uientes:

 a !a%e&or4a "om<n+ permite crear e insertar #os ob;etos ue se uti#i<an

con m5s recuencia% como #as im5!enes $ #as tab#as'

 a !a%e&
!a%e&or4a
or4a Dise
Dise>o+
>o+ per
permit
mite
e ins
insert
ertar
ar tab
tab#as
#as%% eti
etiu
ueta
etass div
div%% cap
capas
as $
marcos'

ambi=n puede e#e!ir entre #as tres vistas de #as tab#as: &st5ndar (va#or
predeterminado)% ab#as e*pandidas $ 0ise8o' Bi se se#ecciona e# modo
de dise8o% se pueden uti#i#i< i<a
ar #as herra ram
mientas de dise8o de
0reameaver: 0ibu;ar ce#da de dise8o $ 0ibu;ar tab#a de dise8o'
  a !a%
!a%e&o
e&or4a
r4a -o
-orm#
rm#lar
larios
ios++ co
cont
ntie
iene
ne bo
boto
tone
ness u
ue
e pe
perm
rmititen
en cr
crea
earr
ormu#arios e insertar e#ementos de ormu#ario'

 a !a%e&or4a Tex%o+ permite insertar diversas etiuetas de ormato de

te*to $ #istas% como b% em% p% h1 $ u#'

 a !a%e&or4a )TM+ permite insertar etiuetas F para #as re!#as

hori<onta#es% e# contenido de #a secci4n head% #as tab#as% #os marcos $ #os
scripts'

 as !a%e&or4as de !=di&o de servidor+ B4#o est5n disponib#es para #as

p5!inas ue emp#ean un #en!ua;e de servidor determinado% como +BP%
+BP''N&
+BP N&%% C, 6asic% C, ,#o% C, +dvanced
+dvanced%% WBP $ PFP
PFP'' Cada
una de estas cate!or"as contiene ob;etos de c4di!o de servidor ue
pueden insertarse en #a vista C4di!o'

 a !a%e&or4a ,li!a!i=n+ permite insertar e#ementos din5micos como

;ue!os de re!istros% re!iones repetidas $ !rabar ormu#arios de
inserci4n $ actua#i<aci4n'
 a !a%e
!a%e&or4a
&or4a Elemen%os -las5+ PerPermit
mite
e ins
insert
ertar
ar e#e
e#emen
mentos
tos de
acromedia ,#ash'
 a !a%e&or4a -avori%os+ e permite a!rupar $ or!ani<ar #os botones
de #a barra nsertar ue uti#i<a con m5s recuencia en un #u!ar
comDn'

Barra de 5erramien%as de "odi'i!a!i=n

a ba
barr
rra
a de he herr
rram
amie
ient
ntas
as de Co Codidiiica
caci
ci4n
4n co
cont
ntie
iene
ne bo
boto
tone
ness u
ue
e #e
permiten rea#i<ar numerosas operaciones de codiicaci4n est5ndar% como
amp#iar $ contraer #as se#ecciones de c4di!o% resa#tar c4di!o no v5#ido%
insert
insertar
ar o e#i e#imin
minar
ar co
comen
mentar
tarios
ios%% ap#
ap#ica
icarr sa san!r
n!r"a
"a a# c4d
c4di!o
i!o e ins
insert
ertar
ar
ra!mentos de c4di!o uti#i<ados recientemente' a barra de herramientas
de CoCoddiiic
icac
aci4
i4n
n s4#o esest5
t5 vivisi
sib#
b#e
e en #a vis ista
ta C4C4di
di!
!o $ apa pare
rece
ce
vertica#mente en e# #ado i<uierdo de #a ventana de documento'

No puede desacop#ar ni mover #a barra de herramientas de Codiicaci4n% pero

s" puede ocu#tar#a' Para m5s inormaci4n% consu#te Hisua#i<aci4n de barras de
herramientasI en Uti#i<aci4n de 0reameaver
0reameaver''

Para m5
Para m5ss in
ino
orm
rmac
aci4i4n
n so
sobr
bre
e c4
c4mo
mo ututi#i
i#i<a
<arr #a ba
barra
rra de he
herra
rrami
mien
enta
tass de
Codiicaci4n% consu#te Hnserci4n r5pida de c4di!o con #a barra de herramientas
Codiicaci4nI en Uti#i<aci4n de 0reameaver
0reameaver''

El Inse!%or de roiedades

&# inspector de propiedades permite e*aminar $ editar #as propiedades m5s

comunes de# e#emento de p5!ina se#eccionado actua#mente% como te*to o un
ob;eto insertado' &# contenido de# inspector de propiedades es distinto en
unci4n de# e#emento se#eccionado' Por e;emp#o% si se#ecciona una ima!en en
#a p5!ina% e# inspector de propiedades cambiar5 para mostrar #as propiedades
de #a ima!en (como #a ruta de# archivo de ima!en% e# ancho $ a#to de #a ima!en%
e# borde ue #a rodea% etc')'

&#

inspector de propiedades se encuentra en #a parte inerior de# espacio de

traba;o de orma predeterminada% pero puede co#ocar#o en #a parte superior si #o
desea' aambi=n puede convertir#o en un pane# #otante en e# espacio de traba;o'
Para m5s inormaci4n sobre c4mo mover e# nspector de propiedades% consu#te
H+co
H+ cop#
p#am
amie
ient
nto
o $ de
desa
saco
cop#
p#am
amie
ient
nto
o de papane
ne#e
#ess $ !r
!rup
upos
os de papane
ne#e
#esI
sI en
Uti#i<aci4n de 0reameaver
0reameaver''

El anel ,r!5ivos

&# pane# +rchiv ivo

os se uti ti##i<a para ver $
administrar #os archivos de# sitio de
0reameaver'

+# visua#i<ar sitios% archivos o carpetas en e#

pane# +rchivos% puede cambiar e# tama8o de#
5rea de visua#i<aci4n $ e*pandir o contraer e#
pane# +rchivos'

Cuando e# pane# +rchivos se contrae% muestra

e# contenido de# sitio #oca#% e# sitio remoto o e#
servidor de prueba como una #ista de archivos'
Cuando
Cua ndo se e* e*pan
pande% de% mue
muestr
stra
a e# sit
sitio
io #oc
#oca#%
a#%
adem
ad em5s
5s de
de## si
sititio
o re
remo
moto
to o e# seserv
rvid
idor
or de
prue
prueba
ba'' &# pa
pane
ne## +rc rchi
hivo
voss ta
tamb
mbi=
i=n
n pu pued
ede
e
mostrar un mapa visua# de# sitio #oca#'

Para sitios de 0reameaver% tambi=n puede persona#i<ar e# pane# +rchivos

camb
cambia
iand
ndoo #a vis
ista
ta (s
(sititio
io #o
#oca
ca## o si
sititio
o re
remo
moto
to)) u
ue
e ap
apar
arec
ece
e de o
orm
rma
a
predeterminada en e# pane# contra"do'

+# visua#i<ar sitios% archivos o carpetas en e# pane# +rchivos% puede cambiar e#

tama8o de# 5rea de visua#i<aci4n $ e*pandir o contraer e# pane# +rchivos'

Cuando e# pane# +rchivos se contrae% muestra e# contenido de# sitio #oca#% e#

sitio remoto o e# servidor de prueba como una #ista de archivos' Cuando se
e*pande% muestra e# sitio #oca#% adem5s de# sitio remoto o e# servidor de prueba'
&# pane# +rchivos tambi=n puede mostrar un mapa visua# de# sitio #oca#' Para
sitio
sitioss de 0r0rea
eam
meaeave
verr% ta tamb
mbi=
i=nn pu
pued
ede e pe
pers
rson
ona#
a#i<
i<ar
ar e# pa
pane
ne## +rc
rchi
hivo
voss
camb
ca mbiaiand
ndo
o #a vis
ista
ta (s
(sititio
io #o#oca
ca## o si
sititio
o re
remo
moto
to)) u
ue e ap
apar
arec
ece
e de o orm
rmaa
predeterminada en e# pane# contra"do

El anel Es%ilos "SS

&# pane# &sti#os CBB #e permite supervisar #as

re!#as $ propiedades CBB ue aectan a un
e#emento de p5!ina actua#mente se#eccionado
e# modo +ctua# o #as re!#as $ propiedades ue
aectan a todo un documento% con e# modo
odo'

Un bot4n situado en #a parte superior de# pane#

&sti#os CBB #e permite cambiar entre estos dos
mod
mo dos' &# pananee# &s
&sti
ti#o
#oss CB
CBB
B ta
tam
mbi
bi=
=n #e
permite modiicar propiedades CBB tanto en
modo odo como en modo +ctua#'

Puede cambiar e# tama8o de cua#uiera de #os pane#es arrastrando #os bordes

ue separan un pane# de otro'

&n modo +ctua#% e# pane# &sti#os CBB muestra tres secciones: un resumen de#
pane# Be#ecci4n ue muestra #as propiedades de CBB de #a se#ecci4n actua# de#
documento% un pane# Ke!#as ue muestra #a ubicaci4n de #as propiedades
se#eccionadas (o una cascada de re!#as para #a etiueta se#eccionada% en
unci4n de #a se#ecci4n) $ un pane# Propiedades ue #e permite editar #as
propiedades CBB a# deinir re!#as para #a se#ecci4n'

&n modo odo% e# pane# &sti#os CBB muestra tres secciones: un pane# odas
#as re!#as arriba $ un pane# Propiedades aba;o' &# pane# odas #as re!#as
muestra una #ista de re!#as deinidas en e# documento actua#% as" como #as
re!#as deinidas en #as ho;as de esti#o ad;untas a# documento actua#' &# pane#
Prop
Propie
ieda
dade
dess #e pe
perm
rmitite
e ed
edititar
ar pr
prop
opie
ieda
dade
dess CB
CBBB pa
para
ra cu
cua#
a#u
uie
ierr re
re!#
!#a
a
se#eccionada en e# pane# odas #as re!#as'

odos #os cambios ue rea#ice en e# pane# Propiedades se ap#ican de orma

inmediataJ de este modo% puede pre visua#i<ar e# traba;o a medida ue #o va$a
##evando a cabo'

T,RE, DE INVESTI.,"IFN
Resonde las si&#ien%es re&#n%as+
1'- XPor ui=n creado
creado 0reameaver $ cu5#es
cu5#es son sus
sus versionesY
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
2'- XZu= otros pro!ramas e*isten para #a creaci4n de p5!ina ebY
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK

3'- XZu= si!niica $ ue es e# #en!ua;e FY

KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK

'- XZu= si!niica TTTY

KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK

/'- XZu= si!niica $ cu5# es #a dierencia entre FP $ FPBY

KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
Semana:A
DRE,ME ,VER+ ,R")IV*S DE DRE,ME
DRE,ME, DRE,ME,,VER "RE,R NUEV*S
,R")IV*S  .U,RD,R*S "*N-I.UR,"IFN DE SITI* DE
(R*E"T*
V3 ,r!5ivos de DreamHeaver
&n 0reameaver% puede traba;ar con distintos tipos de archivo' &# principa# tipo
de archivo de traba;o es e# archivo F' os archivos
 F: +rchivos de #en!ua;e de ormato de hiperte*to ue inc#u$en un
#en!ua;e basado en etiuetas ue es e# responsab#e de mostrar #a p5!ina
Teb
Te b a trtrav
av=s
=s de
de## na
nave
ve!a
!ado
dor'
r' Pu
Pued
ede
e !u
!uar
arda
darr ar
arch
chiv
ivos
os ht
htm#
m# co
con
n #a
#ass
e*tensiones'htm# o'htm' 0reameaver !uarda #os archivos uti#i<ando por
deecto #a e*tensi4n'htm#'
&n 0reameaver tambi=n se traba;a con #os si!uientes tipos de archivo:

 CBB: ienen #a e*tensi4n 'css' Be uti#i<an para dar ormato a# contenido

F $ para deinir #a situaci4n de diversos e#ementos de #a p5!ina'
  L,: ormato L, es un ormato !r5ico popu#ar en #a Teb para c4mics%
#o!oti
#o!otipos
pos%% !r5
!r5ic
icos
os con <o
<onas
nas tra
trans
nspar
parent
entes
es $ ani
animac
macion
iones'
es' os L,
L,ss
tienen un m5*imo de 2/.'

 WP&L: ienen #a e*tensi4n ';p! $ sue#en ser oto!ra"as o im5!enes ricas

en co#or' &# ormato'

WP&L:: &s m5
WP&L m5ss ad
adec
ecua
uado
do pa
para
ra o
oto
to!r
!ra
a"a
"ass di
di!i
!ita
ta#e
#ess o es
esca
cane
nead
adas
as%%
im5!enes con te*turas% im5!enes con !radaciones de co#or $ cua#uier
ima!en ue necesite m5s de 2/. co#ores'

 A: ienen #a e*tensi4n'*m#' &stos archivos contienen datos en su orma

ori!ina# ue se pueden ormatear uti#i<ando AB (en!ua;e de ho;as de
esti#o amp#iab#e)'
VI3 "rear n#evos ar!5ivos !on DreamHeaver
&n esta secci4n se e*p#ica c4mo crear un nuevo documento en b#anco con
0reameaver' ambi=n puede crear nuevos documentos con 0reameaver
bas5ndose en un archivo de dise8o de 0reameaver o en una p#anti##a $a
e*istente'
Para crear un documento nuevo en b#anco:
1' Be#
Be#ecc
eccion
ione
e +r
+rchi
chivoE
voE Nu
Nuevo
evo'' +par
parec
ecer5
er5 e# cua
cuadro
dro de di5
di5#o!
#o!o
o Nue
Nuevo
vo
documento' a icha Lenera# $a aparece se#eccionada'
2' &n #a #ista Cate!or"a% se#eccione P5!ina b5sica% P5!ina
P5!ina din5mica% P5!ina
de p#anti##a% Otro o Con;untos de marcos' + continuaci4n% en #a #ista de #a
derecha% se#eccione e# tipo de documento ue desea crear'
Por e;emp#o% se#eccione P5!ina b5sica para crear un documento F o
e#i;a P5!ina din5mica para crear un documento Co#d,usion o +BP% etc'
Para m5s inormaci4n sobre #as opciones de este cuadro de di5#o!o% ha!a
c#ic en e# bot4n +$uda
+$uda de# mismo'
3' Fa!a c#ic en e# bot4n Crear' &# documento nuevo se abrir5 en #a ventana
de# documento'
VII3 .#ardar ar!5ivos !on DreamHeaver
+# crear un documento nuevo% es necesario !uardar#o' Para !uardar un
documento nuevo:
1' Be#eccione +rchivo E Luardar'
2' &n e# cuadro de di5#o!o ue aparece a continuaci4n% va$a hasta #a
carpeta en #a ue desea !uardar e# archivo'
3' &n e# cuadro de te*to Nombre de archivo% introdu<ca un nombre para e#
archivo'
 &vite uti#i<ar espacios $ caracteres especia#es en #os nombres de archivos $
carp
ca rpet
etas
as'' +si
simi
mism
smo%
o% no cocomi
mien
ence
ce #o
#oss no
nomb
mbre
ress de #o
#oss ar
arch
chiv
ivos
os co
con
n
nDmeros' &n concreto% no uti#ice caracteres especia#es (como =% [ o \) ni
si!nos de puntuaci4n (como dos puntos% barras inc#inadas o puntos) en #os
nombres de archivos ue desee co#ocar en un servidor remotoJ muchos
servidores cambian estos caracteres durante #a car!a% #o ue provoca ue
se rompan #os v"ncu#os e*istentes con #os archivos'
' Fa!a c#ic en Luardar'
VIII3 "on'i&#ra!i=n del si%io del ro$e!%o
&n 0reameaver% el %Lrmino SITI* se emp#ea para reerirse tanto a un sitio
Teb como a una ubicaci4n de a#macenamiento #oca# de #os documentos ue
pertenecen a un sitio Teb' &sto D#timo es #o ue tiene ue estab#ecer antes de
comen<ar a crear su sitio Teb' Un sitio de 0reameaver or!ani<a todos #os
docu
do cume
ment
ntos
os as
asoc
ocia
iado
doss a su si
sititio
o Te
Teb
b $ #e peperm
rmitite
e co
cont
ntro
ro#a
#arr $ ma
mantnten
ener
er
v"ncu#os% administrar $ compartir archivos% $ transerir #os archivos de# sitio a un
servidor Teb'
a !are%a lo!al+ &s e# directorio de traba;o' &n 0reameaver esta carpeta se
conoce como sitio #oca#' a carpeta #oca# sue#e ser una carpeta situada en su
disco duro'
En la !are%a remo%a: Be a#macenan #os archivos% se!Dn e# entorno% para ines
de pru
prueb
eba%
a% pro
produc
ducci4
ci4n%
n% co
co#ab
#abora
oraci4
ci4n
n $ pu
pub#ic
b#icaci
aci4n'
4n' &n 0re
0ream
ameav
eaver
er est
esta
a
carpeta se conoce como sitio remoto' a carpeta remota es una carpeta situada
en e# euipo donde se e;ecuta e# servidor Teb' &# euipo donde reside e#
servidor Teb sue#e ser (aunue no siempre) e# sistema ue permite ue su sitio
eb est= disponib#e pDb#icamente en #a Teb'
a !are%a ara á&inas dinámi!as ?!are%a del servidor de r#eba@+ &s #a
carpet
car peta
a don
donde
de 0re
0ream
ameav
eaver
er pro
proces
cesa
a #as p5
p5!in
!inas
as din
din5mi
5micas
cas'' &st
&sta
a car
carpet
peta
a
sue#e coincidir con #a carpeta remota' B4#o tendr5 ue preocuparse por esta
carpeta si desarro##a una ap#icaci4n Teb' Para m5s inormaci4n sobre c4mo
uti#i<ar #a carpeta de# servidor de prueba% consu#te H&speciicaci4n de d4nde
pueden procesarse #as p5!inas din5micasI en Uti#i<aci4n de 0reameaver'

T,RE, DE INVESTI.,"IFN
, !on%in#a!i=n se %e m#es%ra #na lis%a de 'orma%os ,veri&#ar #L es $
ara #L sirve !ada #no de ellos3
1'- CBB:
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
2'- L,:
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
3'- WP&L:
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
'- A
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK
KKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKKKKKKKKKKKKK
KKKKKKKKKKKKKK
KK

IM(*RT,NTE+ ESTUDI,R (,R, E E;,MEN *R, (RF;IM, SEM,N,3

Semana :
DRE,ME,VER+ DISE* EB )TM  ,S ETIUET,S  *S
,R")IV*S EN )TM3
)TM3

I;3 El dise>o Heb+ &s una actividad ue consiste en #a p#aniicaci4n% dise8o e
imp#ementaci4n de sitios eb' eb' No es simp#emente una ap#icaci4n de dise8o
convenciona#% $a ue reuiere tener en cuenta
#a nave!abi#idad
nave!abi#idad%% interactividad
interactividad%% usabi#idad
usabi#idad%% aruitectura de #a inormaci4n $ #a
interacci4n de medios como e# audio audio%% te*to
te*to%% ima!en
ima!en%% en#aces $ video
video''
a uni4n de un buen dise8o con una ;eraru"a bien e#aborada de contenidos%
aumenta #a eiciencia de #a eb como cana# de comunicaci4n e intercambio de
datos% ue brinda posibi#idades como e# contacto directo entre e# productor $
e# consumidor de contenidos'
&# dise8o
dise8o eb
eb ha visto
visto amp#ia
amp#ia ap#ica
ap#icaci4
ci4nn en #os sector
sectores
es comerc
comercia#
ia#es
es de
nternet especia#mente en #a Tor#d Tide Teb' Teb' + menudo
menudo #a eb se uti#i<a como
medio de e*presi4n p#5stica en s"' +rtistas $ creadores hacen de #as p5!inas en
nternet un medio m5s para orecer sus producciones $ uti#i<ar#as como un
cana# m5s de diusi4n de su obra'
El dise>o Heb ,li!ado+
&# dise8o de p5!inas eb se trata b5sicamente de rea#i<ar un documento con
inormaci4n hiperen#a<ado con otros documentos $ asi!nar#e una presentaci4n
para
para die
diere
rent
ntes
es disp
dispos
osititiv
ivos
os de sa#i
sa#idada (en
(en una
una pant
panta#
a##a
#a de computador%
en pape#
pape#%% en un te#=ono m4vi#%
m4vi#% etc)'
&stos documentos o p5!inas eb pueden ser creadas: creando archivos de
te*to en F
F%% +sp
+sp%% +sp*
+sp*%% WavaBcript
WavaBcript%% WBP
WBP%% P$thon
P$thon%% Kub$
Kub$''
• uti#i<ando un pro!rama visua# TBTL o TBT de creaci4n de
p5!inas'

• uti#i<ando #en!ua;es de pro!ramaci4n de# #ado servidor% para !enerar #a

p5!ina eb'
E%aas
Para e# dise8o de p5!inas eb debemos tener en cuenta tres etapas:

1' &# dise8o

dise8o visua# de #a inormaci4n
inormaci4n ue
ue se desea editar'
editar' &n
&n esta etapa se
trab
traba;
a;a
a dist
distri
ribu
bu$$endo
endo e# te*t
te*to%
o% #os
#os !r5
!r5ic
icos
os%% #os
#os v"ncu#os a otros
ros
documentos $ otros ob;etos mu#timedia ue se consideren pertinentes'
&s importante ue antes de traba;ar sobre e# computador se rea#ice un
boceto o predise8o sobre e# pape#' &sto aci#itar5 tener un orden c#aro
sobre e# dise8o'

2' &struc
&structur
tura
a $ re#ac
re#aci4n
i4n ;er5ru
;er5ruica
ica de #as p5!ina
p5!inass de# sitio eb'
eb' Una ve<
ue se tiene e# boceto se pasa a ]escribir] #a p5!ina eb' Para esto% $
undamenta#mente para mane;ar #os v"ncu#os entre documentos% se cre4
e# #en!
#en!ua
ua;e
;e de marc
marcac
aci4
i4n
n de hiperte*to o FF'' os
os en#a
en#ace
cess ue
ue
apar
aparececen
en subr
subra$
a$ad
ados
os en esteeste docu
docume
ment
nto
o $ otro
otross de Ti?ipedia son
e;emp#os de hiperte*to% puesto ue a# pu#sar sobre e##os conducen a
otra
otrass p5!i
p5!ina
nass con
con ino
inorm
rmac
aci4
i4n
n re#a
re#aci
cion
onad
ada'
a' a impo
importa
rtanc
ncia
ia de #a
estructura $ arborescencia eb radica en ue #os visitantes no siempre
entran por #a p5!ina principa# o inicia# $ en ese caso e# sitio debe dar#e #a
respuesta a #o ue busca r5pido% adem5s permitir#e nave!ar por e# sitio'

3' Posicionamiento en buscadores o B&O B&O'' @sta consiste en optimi<ar #a

estructura de# contenido para me;orar #a posici4n en ue aparece #a
p5!i
5!ina en deter etermi
mina
nad
da bDsu
Dsuededa'a' &ta
&tapa no !usto
ustosa
sa porpor #os
#os
dise8adores !r5icos% porue a dierencia de# te*to% aDn para e# a8o
21 no se pueden tener nuevos resu#tados en #os buscadores con
sitios mu$ !r5icos'
&# F consta de una serie de e#ementos ue estructuran e# te*to $ son
presentados en orma de hiperte*to por a!ente de usuario o nave!adores
nave!adores'' &sto
se puede hacer con un simp#e editor de te*tos (debe !uardarse como te*to
p#ano%% sin nin!Dn tipo de ormato $ con e*tensi4n 'htm# o 'htm)' +prender
p#ano
F es re#ativamente 5ci#% as" ue es senci##o crear p5!inas eb de este
modo' &sta era #a Dnica manera de !enerar#as hasta ue aparecieron% a
medi
mediad
ados
os de 199.
199.%% a#!unos editores visua#es de F% como MS
FrontPage $ Adobe Dreamweaver
Dreamweaver' Con estas herramientas no es necesario
aprend
aprenderer F
F (aunu
(aunue e s" aconse
aconse;ab
;ab#e)
#e)%% con
con #o cua#
cua# e# desar
desarro#
ro##ad
#ador
or se
concentra en #o m5s importante% e# dise8o de# documento'
odo esto teniendo en cuenta e# nive# de pro!ramaci4n en e# dise8o de #as
ap#icaciones $ de# impacto visua# ue se uiere !enerar en e# usuario'
-#ndamen%os
Un correcto dise8o eb imp#ica conocer c4mo se deben uti#i<ar cada uno de #os
e#ementos permitidos en e# F% es decir% hacer un uso correcto de este
#en!ua;e dentro de #os est5ndares estab#ecidos por #a T3C $ en #o reerente a
#a eb sem5ntica'
sem5ntica' 0ebido a #a permisibi#idad de a#!unos nave!adores eb
como nternet &*p#orer% esta premisapremisa ori!ina#
ori!ina# se ha perdido' Por e;emp#o% este
nave!ador permite ue no sea necesario cerrar #as etiuetas de# marcado%
uti#i<a c4di!
c4di!oo propi
propietario
etario%% etc'
etc' &sto
&sto impi
impide
de ue
ue ese
ese docu
documementnto
o eb
eb sea
sea
universa# e independiente de# medio ue se uti#ice para ser mostrado'
a eb sem5ntica%
sem5ntica% por otra parte% abo!a por un uso #4!ico de #os e#ementos
se!Dn e# si!niicado para e# ue ueron concebidas' Por e;emp#o se uti#i<ar5 e#
e#emento SPE para marcar p5rraos% $ S+6&E para tabu#ar datos (nunca
para disponer de manera visua# #os dierentes e#ementos de# documento)' &n su
D#tima instancia% esto ha supuesto una aut=ntica revo#uci4n en e# dise8o eb
puesto ue apuesta por separar tota#mente e# contenido de# documento de #a
visua#i<aci4n'
0e esta
esta orma
orma se uti#i<
uti#i<aa e# docum
document
entoo F
F Dnicam
Dnicamententee para
para conten
contenerer%%
or!ani<ar $ estructurar #a inormaci4n $ #as ho;as de esti#o CBB para indicar
como
como se mostra
mostrar5r5 dicha
dicha inorm
inormaci
aci4n
4n en #os diere
dierente
ntess medios
medios (como
(como por
e;em
e;emp#p#o%
o% una
una mo
moni nito
torr de co comp
mput
utad
ador
ora
a% un te# te#=on
=onoo m4v
m4vi#%
i#% imp
impres
reso en
pape#% leída por
por unsin
unsintet teti<a
i<ador
dor de vovo<<% etc'
etc')'
)' Por
Por #4!i
#4!ica
ca%% esta
esta meto
metodo
do#o
#o!"
!"a
a
beneicia enormemente #a accesibi#idad de# documento'
ambi=n e*isten p5!inas din5micas% #as cua#es permiten interacci4n entre #a
eb $ e# visitante% proporcion5ndo#e herramientas ta#es como
buscadores% chat
chat%% oros
oros%% sistemas de encuestas
encuestas%% etc' $ poseen de un pane# de
contro# de admin
administ
istrac
raci4n
i4n de conten
contenido
idos'
s' &ste
&ste permit
permitee crear
crear%% actua
actua#i<a
#i<arr $
administrar cantidades i#imitadas de contenido en #a misma'

,!!esibilidad
&# dise8o
dise8o eb
eb debe
debe se!ui
se!uirr unos
unos reuer
reuerimie
imiento
ntoss m"nimo
m"nimoss de accesibi#idad
eb ue ha!a ue sus sitios eb o ap#icaciones puedan ser visitados por e#
ma$or nDmero de personas' Para conse!uir estos ob;etivos de accesibi#idad se
han
han desadesarr
rro#
o##a
#ado
do paut
pautas
as como
como #as #as de#
de# T3C
T3C:: Paut
Pautas
as de acce
accesi
sibi
bi#id
#idad
ad a#
contenido Teb 1' TC+L'
)TM 
a D#tima versi4n de este #en!ua;e b5sico corresponde a# F/ F/%% donde se
introducen nuevos e#ementos ue me;oran #a nave!aci4n $ #a usabi#idad de #os
sitios eb en #os distintos nave!adores% como por e;emp#o e# uso de ScanvasE%
SvideoE o SooterE'
&sta nueva versi4n no se trata so#amente de cambiar $ e#iminar etiuetas' a
mucho m5s a##5'
&n todo sitio eb ha$ e#ementos ue se uti#i<an' &# encabe<ado (header)%
barras #atera#es (sidebars)% e# pie de p5!ina (ooter)% #os menDs de nave!aci4n%
se uti#i<ar5n en esta nueva versi4n como etiuetas $a estab#ecidas% brindando
una me;ora en #a intuici4n para e# desarro##o'
+s" mismo una de #as ma$ores me;oras es #a uti#i<aci4n de G Canvas CanvasGG o marcos
de traba;
traba;o%
o% ue sirve
sirven
n para
para uti#i<
uti#i<ar
ar animac
animacion
iones
es sin necesi
necesidad
dad de insta#
insta#ar
ar
p#u!
p#u!ininss ni usar
usar un repr
reprod
oduc
ucto
torr +dobe ,#ash parapara vide
videos
os eb%
eb% est5
est5nd
ndar
ar
considerado de facto' &sta opci4n es un !ran avance% $a ue ,#ash tiene
!ra
!rande
ndes desven
sventa
ta;a
;ass en #os
#os !r5
!r5ic
icos
os eb% como
omo ue #os#os mo
moto
tore
ress de
bDsueda no puedan #eer e# te*to dentro% ue pesan mucho $ tardan en car!ar'
+# imp#ementarse con canvas% se usar5 Dnicamente c4di!o WavascriptWavascript%%
a#i!erando e# peso de #a p5!ina'
ambi=n
ambi=n uedan obso#etos a#!unos e#ementos de# F %% ra<4n por #a cua# es
conven
convenien
iente
te repasa
repasarr acerc
acerca
a de #as noveda
novedades
des ue inc#u$
inc#u$e
e F/%
F/% cu$ocu$o
#en!ua;e es re!u#ado por T3C
T3C''
Si&ni'i!ado $ ori&en del )TM

F es uno de esos acr4nimos ue con e# correr de# tiempo casi han perdido
su tota#idad' Bi #e pre!untamos a muchas personas u= si!niica en rea#idad
F%
F% pues no sabr"an
sabr"an responde
respondernos
rnos con e*actitud' F es )$er Tex%
con e*actitud'
MarO# an&#a&e (o #en!ua;e de marcas de hiperte*to) $ no debe conundirse
con un #en!ua;e de pro!ramaci4n' Be trata m5s bien de una 'orma semán%i!a
de or&ani7ar #na es%r#!%#ra $a sea á&inas Heb o ali!a!iones a %ravLs
de mar!
mar!asas de se sen
n%ido
%ido' as marcas de sentido son otor!adas por
#as e%i#e%as% de #as cua#es hab#aremos en a#!unas #"neas'

+s" como tenemos ue a!radecer#e #a creaci4n de internet% tambi=n ue Bir Tim
Bernersee e# responsab#e% en parte% de #a creaci4n de# F' &n #a d=cada
de# ^% cuando se encontraba traba;ando para e# C&KN% e# "sico ide4 un
#en!ua;e de hiperte*to ue aci#itar"a compartir documentos con sus co#e!as'
+unue e# sistema de hiperte*to $a hab"a sido desarro##ado un tiempo antes%
ue 6erners-ee uien #o pereccion4 $ #o present4 para ser usado en internet'
Wunto
Wunto con Kobert
Kobert Cai##ia
Cai##iau%
u% presen
presentar
taron
on #a propue
propuesta
sta Tor#d
Tor#dTide
TideTe
Teb
b (T3)'
(T3)'
0urante #a d=cada de# ^9 se ueron presentando otras versiones' Fo$ en d"a%
e# #en!
#en!ua
ua;e
;e F
F puro $ duroduro ha sido
sido reem
reemp#
p#a<
a<ad
ado por e# ;)TM% m5s
o por
comp#eto% $ D#timamente por e# )TM% ue se corresponde con #os tiempos
ue corren'

Fo$ estaremos hab#ando de# #en!ua;e transiciona#% e# AF% ue aDn se si!ue
imp#ementando en una !ran ma$or"a de sitios eb% aunue #entamente se est5
de;ando #u!ar a# F/ $ sus amp#ias venta;as'

;I3 as e%i#e%as

0ec"amos anteriormente ueue e# F unciona
unciona a trav=s de marcas de sentido
##amadas e%i#e%as' Es%as e%i#e%as son in%erre%adas or el nave&ador :
as" es como podemos ver im5!enes% te*to% p5rraos% en deinitiva% estructuras%
en ununa
a p5
p5!i
!ina
na eb
eb%% $ no e# si
simp
mp#e
#e c4
c4di
di!o
!o'' Po
Porr es
eso
o ha
hab#
b#am
amos
os ad
adem
em5s
5s
de mar!as de sen%ido' Bin F% no tendr"amos #a posibi#idad de disrutar
internet ho$ en d"a' 65sicamente% #os nave!adores como Chrome o ,ireo* son
P%rad#!%oresQ de )TM ue di!ieren todo este c4di!o $ #o convierten en a#!o
visib#e para nosotros'

&tiuetas% marcas de sentido_ Xu= son verdaderamenteY Cada etiueta tiene

un nomb
nombrere $ enci
encier
erra
ra en e##a
e##a M#it
M#iter
era#
a#me
ment
nte%
e% como
como vere
veremo
moss ahor
ahora-
a- un
determinado si!niicado' as etiuetas se escriben con #os si!nos ma$or $
menor a' Por eso cuando abrimos un documento F veremos esto:

Shtm#E SheadE Stit#eE6ienvenidos a 6ite#iaStit#eE SheadE Sbod$E

Por supuesto este es un comien<o de F mu$ burdo% pero se entiende #a

idea' a etiueta Shtm#E en este caso est5 indicando e# inicio de un documento
F% $ esta inormaci4n es #e"da por e# nave!ador' Por otra parte% tenemos #a
etiue
etiueta
ta SheadE
SheadE%% #a cua#
cua# merece
merece su propio
propio aparta
apartado
do por #a import
importanc
ancia%
ia% $
#ue!oSbod$E% ue contendr5 todas #as cosas ue nosotros como usuarios
podemos ver en panta##a'

as etiuetas uncionan por partes% ue se denominan e%i#e%as de aer%#ra $

e%i#e%as de !ierre' as etiuetas
etiuetas de apertura
apertura #e indican
indican a# nave!ado
nave!adorr d4nde
d4nde
comen<ar a interpretar a#!o de determinada orma% $ #as de cierre #e indican
d4nde terminar#o' Por eso es '#ndamen%al #e se !ierren %odas las etiuetas
ue se abren en un determinado documento: aunue se vea bien% nos puede
traer prob#emas a #ar!o p#a<o' a pro#i;idad nunca est5 de m5s'
+# ser un #en!ua;e de etiuetas% e# F es por ende mu$ 5ci# de #eer'
Cua#uiera puede aprender F% no reuiere ser un !enio% sino nada m5s
tener a#!o de or!ani<aci4n' &n #a se!unda parte de este curso hab#aremos
sobre #a estructura b5sica de un documento F% a#!o undamenta#% adem5s
de #as etiuetas m5s importantes $ b5sicas ue necesitamos saber'
saber' Por e# resto
de esta entre!a% nos dedicaremos a entender otros datos importantes de F
$% ina#mente% por u= tenemos ue saber#o si no nos dedicamos a# dise8o o
pro!ramaci4n eb'

;II3 os ar!5ivos en )TM

os documentos F pueden inc#uir archivos como im5!enes $ animaciones

en ,#ash ue estar5n a#o;ados en e# mismo servidor% para ue e# usuario pueda
ver#os'
ver#os' Pero para poder ser interpreta
interpretados correcta% la nomen!la%#ra
dos de orma correcta%
de es%os ar!5ivos %iene #e ser exa!%a ' &s a#!o ue es mu$ va#orado por
e#: "onsor%i#m Mentidad encar!ada de hacer #as normas ue deben se!uir
#os dise8adores- $ ue no est5 de m5s saber'

os archivos F $ otros archivos ue usemos en nuestra p5!ina tienen ue
estar nombrados de orma particu#ar' Fa$ una serie de re!#as b5sicas ue
compartiremos con ustedes% ue sirven como puntapi= inicia#:

 os nombres de #os archivos deben estar en min<s!#las% para poder

ser compatib#es en todos #os nave!adores'

 &# archivo principa# ser5 index35%ml% dado ue ser5 e# primer archivo
ue e# nave!ador buscar5 cuando in!rese en nuestro servidor a trav=s de
#a direcci4n P' No se puede tener e# archivo de #a home ##amado de orma
dierente% tiene ue s" o s" ##amarse inde*'

 No se #eden #sar !ara!%eres no válidos para #a nomenc#atura de#

archivo% por e;emp#o% #a #etra 8' Bo#amente se pueden usar e# !ui4n (-) $ e#
!ui4n ba;o (`)'

 No impo
mporta ivo F% %odo
rta si es una ima!en o un archivo %odoss los
los
do!#men%ostienen ue se!uir estas re!#as para poder ser interpretados
de orma correcta por e# nave!ador'
nave!ador'
Por e;emp#o% aunue nos veamos tentados de ##amar ,oto 22';p! a un
archivo% #a nomenc#atura correcta ser"a 'o%oK22038&'

(or #L arender )TM

Bi no somos dise8adores eb% $ por e;emp#o tenemos un emp#eo re#acionado

con #a comunicaci4n% en a#!Dn momento nos hemos topado con e# F'
+prender#o nunca est5 de m5s% dado ue es una habi#idad ue puede ser
apreciada en e# 5mbito #abora#'

Para #os Communit$ ana!ers% es una e*ce#ente posibi#idad dado ue permite
;u!ar con #as herramientas ue nos proporciona% por e;emp#o ,aceboo?% para
crear tabs persona#i<adas en #as anpa!es' Be puede crear a#!o b5sico e
interesante con un conocimiento m"nimo de F !racias a #os irames (de #os
cua#es hab#aremos en otra entre!a% pero ue permiten insertar una p5!ina eb
dentro de otra)'

Para #os periodistas $ b#o!!ers% saber de F nos permite poder ;u!ar m5s
con #as p#ataormas $ dar#e un ormato dierente a nuestros te*tos' +dem5s% nos
permit
permitee reso#v
reso#ver
er prob#e
prob#emas
mas de ormat
ormatoo ue
ue muchas
muchas veces
veces sur!en
sur!en en #as
p#ataormas m5s popu#ares de b#o!!in! de# mundo (no ten!an miedo de entrar
a #a vista F a corre!ir% nos da una visi4n m5s c#ara de u= es #o ue
estamos haciendo)'

"omrender )TM es !omrender el idioma en el #e se mane8a in%erne% '

Cuando
Cuando sabemo
sabemoss sus concep
conceptos
tos b5sico
b5sicos%
s% es como
como entend
entender
er #as primer
primeras
as
pa#abras cuando estamos mirando una pe#"cu#a en otro idioma% un idioma ue
estamos estudiando'

Semana :6
 DRE,ME,VER+ "RE,"IFN DE UN DISE* DE (G.IN,
( G.IN,
B,S,D* EN T,B,S  ,M,"EN,MIENT* DE UN,
(G.IN,
;III3 "rea!i=n de #n dise>o de á&ina basado en %ablas
Un dise8o de p5!ina determina c4mo va a aparecer #a p5!ina en e# nave!ador%
most
mo stra
rand
ndo%
o% po
porr e;
e;em
emp#
p#o%
o% #a si
situ
tuac
aci4
i4n
n de #o
#oss me
menD
nDs%
s% #a
#ass im
im5!
5!en
enes
es%% $ e#
contenido de acromedia ,#ash'
as tab#as constitu$en una herramienta mu$ eica< para presentar datos de
tab#a $ estab#ecer e# dise8o de te*to $ !r5icos en una p5!ina F' Puede
uti#i<ar #as tab#as para crear su propio dise8o de un modo r5pido $ senci##o'
&n es
este
te tu
tuto
tori
ria#
a#%% va a cr
crea
earr va
vari
rias
as ta
tab#
b#as
as en un nunuev
evo
o do
docu
cume
ment
nto
o de
0reameaver' as i#as $ ce#as de #as tab#as sirven de cuadros contenedores
para e# contenido ue a8adir5 posteriormente'
Ma#e%a de dise>o
o habitua# no es empe<ar a construir un sitio Teb iniciando 0reameaver $
creando p5!inas directamente' os primeros pasos para crear un sitio Teb
debe dar#os sobre una ho;a de pape#% o en una ap#icaci4n de edici4n !r5ica
como acromedia ,ireor?s'
os dise8adores !r5icos sue#en crear un boceto art"stico !enera# de# sitio Teb
(tambi=n conocido como HmauetaI)% con e# in de mostr5rse#o a# c#iente $
ase!urarse de ue #a idea inicia# para e# sitio Teb recibe #a aprobaci4n de#
c#iente'

Una maueta est5 -*RM,D, por una cantidad indeterminada de e#ementos

de p5!inas ue e# c#iente ha so#icitado para su sitio Teb' Por e;emp#o% e# c#iente
podr"a haber dicho: Guiero un #o!otipo en #a parte superior de #a p5!ina% una
<ona de nave!aci4n ue en#ace con estas otras p5!inas% una secci4n para una
tienda on#ine $ una parte donde pueda insertar videoc#ips'I + partir de esto% e#
dise8ador comien<a a p#aniicar e# dise8o de #a p5!ina $ rea#i<a bocetos de
p5!inas de muestra ue cump#en #os reuisitos de# c#iente'
I;3 "rea!i=n $ alma!enamien%o de #na á&ina
0espu=s de crear un sitio nuevo $ e*aminar #os comps% $a puede empe<ar a
crear p5!inas Teb' Comience creando una p5!ina nueva $ !uard5ndo#a en #a
carpeta ra"< #oca# (donde ueremos !uardar#a)'
1' &n 0reameaver
0reameaver%% Be#eccione +rchivo E Nuevo'
2' &n #a icha Lenera# de# cuadro de di5#o!o Nuevo documento% se#eccione
P5!ina b5sica en #a #ista Cate!or"a% se#eccione F en #a #ista P5!ina
b5sica $ ha!a c#ic en Crear'
3' Be#eccione +rchivo E Luardar como'
' &n e# cuadro de di5#o!o Luardar como% busue $ abra carpeta donde est5
su p5!ina de inicio'
/' Escriba index.htl en el cuadro de teto No!bre de arc"i#o $ "a%a clic en
Guardar& El no!bre de arc"i#o a'arecer( a"ora en la barra de t)tulo en la 'arte
su'erior de la #entana de la a'licaci*n +Estos 'asos se re'iten 'ara cada nue#a
'(%ina ,ue desee!os crear-&

.' En el cuadro de teto T)tulo del docu!ento en la 'arte su'erior del nue#o
docu!ento. escriba el no!bre de su '(%ina. 'or e/e!'lo Ca!e To"nsend&
To"nsend&

@ste es e# t"tu#o de #a p5!ina (distinto a# nombre de archivo)' os visitantes

de# sitio ver5n este t"tu#o en #a barra de# t"tu#o de# nave!ador cuando accedan
accedan
a e##a a trav=s
tra v=s de su nave!ador Teb'
7' Be#eccione +rchivo E Luardar para !uardar #a p5!ina'
Inser!i=n de %ablas
+ continuaci4n% vamos a introducir una tab#a ue inc#uir5 te*to% !r5icos $
activos de acromedia ,#ash'
1' Fa!a
Fa!a c#ic una ve<
ve< en #a p5!
p5!ina
ina para
para co#ocar
co#ocar e# punto
punto de inserci
inserci4n
4n en #a
esuina superior i<uierda de #a p5!ina'

2' Be#
Be#ecc
eccion
ione
e nserta
nsertarE
rE a
ab#a
b#a''

3' &n e# cuadro

cuadro de di5#o!o
di5#o!o a
ab#a% si!a este
este procedimie
procedimiento:
nto:

 &scriba 3 en e# cuadro de te*to ,i#as'

 &scriba 1 en e# cuadro de te*to Co#umnas'
  &scriba 7 en e# cuadro de te*to +ncho de tab#a'
 Be#eccione P"*e#es en e# menD emer!ente +ncho de tab#a'
 &scriba  en e# cuadro de te*to Lrosor de# borde'
 &scriba  en e# cuadro de te*to Ke##eno de ce#da'
 &scriba  en e# cuadro de te*to &spacio entre ce#das'

0& 1a%a
1a%a clic
clic en
en Ace'
Ace'tar
tar&&
A'arece en su docu!ento una tabla con tres 2las $ una colu!na& La tabla
tiene 344 ')eles de anc"o. sin bordes. relleno de celda ni es'acio entre
celdas&

5& 1a%a
1a%a clic una
una #e6 a la derec"a
derec"a de
de la tabla
tabla 'ara anular
anular la selecc
selecci*n&
i*n&

7& Seleccion
Seleccione
e Insertar8
Insertar8 Tabla
Tabla 'ara
'ara insertar
insertar otra tabla&
tabla&

3& En el cuadro de di(lo%o

di(lo%o Insertar
Insertar tabla. si%a este
este 'rocedi!iento
'rocedi!iento 'ara la
se%unda tabla9

Escriba # en el cuadro de teto :ilas&

Escriba $ en el cuadro de teto Colu!nas&
Escriba %&& en el cuadro de teto Anc"o de tabla&
Seleccione P)eles en el !en; e!er%ente Anc"o de tabla&
Escriba & en el cuadro de teto Grosor del borde&
Escriba & en el cuadro de teto Relleno de celda&
Escriba & en el cuadro de teto Es'acio entre celdas&

3 1a%a clic en Ace'tar& A'arece una se%unda tabla con una 2la $ tres
colu!nas deba/o de la 'ri!era tabla&

93 1a%a clic a la derec"a de la tabla 'ara anular la selecci*n&

103 Inserte una tercera tabla seleccionando Insertar 8 tabla e introduciendo

los si%uientes #alores en el cuadro de di(lo%o Insertar tabla9
Escriba # en el cuadro de teto :ilas&
Escriba # en el cuadro de teto Colu!nas&
Escriba %&& en el cuadro de teto Anc"o de tabla&
Seleccione P)eles en el !en; e!er%ente Anc"o de tabla&
Escriba & en el cuadro de teto Grosor del borde&
Escriba & en el cuadro de teto Relleno de celda&
Escriba & en el cuadro de teto Es'acio entre celdas&

<<& 1a%a clic en Ace'tar

Ace'tar&&
A'arece una tercera tabla con una 2la $ una colu!na deba/o de la se%unda
tabla&

1a%a clic a la derec"a de la tabla 'ara anular la selecci*n& La '(%ina creada debe
ser 'arecida a la si%uiente9

Semana :
DRE,ME,VER+ "*DI.*S )TM B,SI"*S -UN"I*N,MIENT* DE
SITI*S EB VERSI*NES DE )TM  "SS

&tiuetas 65sicas

E%i#e%as Des!ri!i=n E8
Sh1E'''Sh.E "tu#os de dierentes tama8os'
SpE &scribir un p5rrao'

S--E Poner un comentario en e# c4di!o'

SbrE Para hacer un sa#to de #"nea'

ShrE 0ibu;ar una #"nea hori<onta#'

,ormatos de te*to
 E%i#e%as Des!ri!i=n E8
SbE e*to en ne!rita'
Sbi!E e*to !rande'

SemE e*to enati<ado'

S iE e*to en it5#ica'

Ssma##E e*to peue8o'

Sstron!E e*to uerte'

SsubE e*to por deba;o'

SsupE e*to por encima'

SinsE e*to subra$ado'

Sde#E e*to tachado'

S ttE e*to te#etipo'

&n#aces M in?s

E%i#e%as Des!ri!i=n E8
SaE Crear un v"ncu#o simp#e'
arcap5!inas de un documento'

+brir un v"ncu#o en una nueva

nueva ventana'
+brir un v"ncu#o en e# rameset
rameset padre'

+brir un v"ncu#o en e# mismo rame'

rame'

+brir un v"ncu#o en una ventana

ventana de tama8o comp#eto'
comp#eto'

,ormu#arios
 E%i#e%as Des!ri!i=n E8
SormE Crear un ormu#ario simp#e'
a respuesta a# ormu#ario se abrir5 en una nueva ventana'

a respuesta a# ormu#ario se abrir5 en e# mismo rame de#

ormu#ario'
a respuesta a# ormu#ario se abrir5 en e# rameset padre'

a respuesta a# ormu#ario se abrir5 en una ventana de tama8o

comp#eto'
SinputE Usar un bot4n !r5ico para mandar #os ormu#arios'

Un ormu#ario tipo chec?bo*'

Un ormu#ario para subir archivos'

Un ormu#ario con datos ocu#tos'

Un ormu#ario con un bot4n persona#i<ado con una ima!en'

Un ormu#ario con in!reso de passord'

Un ormu#ario de# tipo radio'

Sie#dsetE 0ibu;ar un
un re
recuadro a#rededor de
de# o
ormu#ario co
con un
un t"t"tu#o'

Sse#ectE enD desp#e!ab#e'

Sopt!roupE Poner subt"tu#os dentro de# me

menD desp#e!ab#e'

m5!enes

E%i#e%as Des!ri!i=n E8
Sim!E Co#ocar una ima!en en e# documento'
odiicar #as medidas de una ima!en'
Crear un mapa de una ima!en'

,rames M arcos
 E%i#e%as Des!ri!i=n E8
SramesetE 0einir marcos vertica#es'
0einir marcos hori<onta#es'

SrameE 0ivisi4n de marcos sin bordes'

Uso de m5r!enes dentro de #os marcos'

arcos i;os ue no permiten cambiar su tama8o'

Uso de #a barra de desp#a<amiento dentro de #os marcos'

SnoramesE &n ca
caso u
ue e#
e# na
nave!ador de
de# us
usuario no
no so
soporte ma
marcos'

SirameE +#in=amos un irame a #a derecha de #a p5!ina'

ostrar un irame s"n #os bordes'

0einir #a a#tura de# irame a nuestro !usto'

0einir e# ancho de# irame'

ostrar un irame s"n #as

# as barras de desp#a<amiento'

ab#as

E%i#e%as Des!ri!i=n E8
Stab#eE 0einir e# espesor de# borde de una tab#a'
ama8o de# re##eno de cada ce#da de #a tab#a'
Beparaci4n entre ce#das de una tab#a'

&speciicar #os bordes ue ser5n visib#es de #a tab#a'

isua#i<ar so#o #as #"neas hori<onta#es de una tab#a'

&speciicar e# ancho de #a tab#a'

StrE +#inear hori<onta#mente e# contenido de #as ce#das de una i#a'

+#inear vertica#mente e# contenido

contenido de #as ce#das de una
una i#a'
StdE +#inear hori<onta#mente e# contenido de una ce#da'

+#inear vertica#mente e# contenido

contenido de una ce#da'

+!rupamos un nDmero
nDmero de ce#das hori<onta#mente'
hori<onta#mente'
+!rupamos un nDmero
nDmero de ce#das vertica#mente'
vertica#mente'

istas

E%i#e%as Des!ri!i=n E8
So#E Facer una #ista ordenada'
Su#E Facer una #ista s"n orden a#!uno'

Sd#E Facer una #ista descriptiva'

-#n!ionamien%o de si%ios Heb

XC4mo uncionan #os sitios ebY No ten!as miedo de hacer pre!untas% inc#uso
si piensas ue son absurdas' &s mu$ importante hab#ar un poco antes de
entrar de ##eno en e# dise8o de# sitio'
&sto$ se!uro de ue visitas sitios eb a diario' Para e##o% se e;ecuta un
pro!rama ##amado nave!ador eb% (Chrome% ,ireo*% Opera% etc) haciendo c#ic
en uno de #os iconos ue se muestran en #a si!uiente i!ura $ ue es habitua#
ue est=n disponib#es en #a ma$or"a de ordenadores'
Con
Co n e# na
naveve!a
!ado
dor%
r% se pu
pued
ede e vi
visi
sita
tarr cu
cua#
a#u
uieierr si
sititio
o e
eb'
b' Po
Porr e;
e;em
emp#
p#o%
o% un
e*p#orador muestra sitios como Ti?ipedia% un peri4dico de #a ciudad en ue
resido% etc'
Fas o"do hab#ar de F $ CBB% Xtiene esto ue ver con e# uncionamiento de
sitios
sitios e
ebY
bY Po
Porr su
supue
puesto
sto &st
&stos
os son #os #en #en!u!ua;e
a;ess de pro pro!ra
!ramac
maci4n
i4n ue
permiten crear sitios eb' odos #os sitios eb se basan en estos #en!ua;es%
ue
u e so
son
n #a babase
se de #o#oss si
sititios
os de in inte
ternet'' )TM u
rnet ue
e in
inve
vent
ntad
ado porr Tim
o po
Bernersee en 1991% uien todav"a si!ue de cerca #a evo#uci4n de #a Teb'
Cre4 e# orld ide eb "onsor%i#m ?:"@% ue deine #as nuevas versiones
de internet re#acionadas
r e#acionadas con #os #en!ua;es de pro!ramaci4n a
ambi=n ha creado
m5s recientemente% #a ,undaci4n Tor#d Tide Teb% ue hace e# se!uimiento $
an5#isis de #a evo#uci4n de #a Teb'
ucha !ente conunde (err4neamente) internet $ #a Teb' 0ebes saber ue #a
Teb es parte de internet' &s un !ran pauete ue inc#u$e% entre otros: #a Teb%
correos e#ectr4nicos% mensa;er"a instant5nea% etc' im 6ernersee no es e#
inventor de internet% es Gso#oG inventor de #a Teb'
F $ CBB son #a base de# uncionamiento de casi todos #os sitios eb'
Cuando visitas un sitio mediante un nave!ador% debes saber ue% detr5s de #as
escenas% #as HruedasI se activan para permitir ue e# sitio eb se muestre' &#
ordenador se basa en #o ue se indica en F $ CBB para saber #o ue ha de
mostrar% #a i!ura si!uiente indica parte de# c4di!o de #a p5!ina mostrada
previamente'
Versiones de )TM $ "SS
Con e# tiempo% F $ CBB han evo#ucionado' a primera versi4n de F
(F 1') ni siuiera orec"a #a posibi#idad de mostrar
m ostrar #as im5!enes'
Una mu$ breve historia de estos #en!ua;es
# en!ua;es para conocimiento !enera#:
F 1: es #a primera versi4n creada por im 6ernersee en 1991' F 2: #a
se!unda versi4n de F apareci4 en 199 $ se termin4 en 199. con #a
aparici4n de F 3'% esta es #a versi4n ue en rea#idad p#antea #as bases de
#as si!uientes versiones de F' as re!#as $ e# uncionamiento de esta
versi4n est5n dadas por e# T3C (mientras ue #a primera versi4n ue creada
por una persona)'
F 3: apareci4 en 199.% esta nueva versi4n de F% a8ade muchas
posibi#idades a# #en!ua;e como tab#as% app#ets% scripts% posicionamiento de te*to
a#rededor de im5!enes% etc'
F : &sta es #a versi4n m5s comDn de F (en concreto% es F '1)'
+pareci4 por primera ve< en 199
199 $ propone e# uso de marcos (ue dividen
dividen una
p5!ina eb en varias partes)% tab#as m5s comp#e;as% me;oras en #as ormas%
etc' 5s importante aDn% esta versi4n permite por primera ve< uti#i<ar ho;as de
esti#o de# amoso CBB'
F /: es #a D#tima versi4n' +Dn no est5 mu$ e*tendida% ##ama mucho #a
atenci4n porue trae muchas me;oras como #a posibi#idad de inc#uir 5ci#mente
v"deos% me;orar e# contenido% nuevas caracter"sticas para #os ormu#arios% etc'
&sta es #a versi4n ue vamos a describir en esta documentaci4n' & est5ndar
estar5 comp#etado en e# a8o 21'
CBB 1: en 199.% apareci4 #a primera versi4n de CBB' &n e##a se estab#ecen #as
bases de este #en!ua;e ue permiten me;oras de presentaci4n en p5!inas eb%
ta#es como co#ores% m5r!enes% uentes% etc'
CBB 2: apareci4 en 1999 $ ue comp#etado por CBB 2'1% esta nueva versi4n de
CBB%
CB B% a8
a8ad
ade
e nu
numer
meros
osas
as op
opci
cion
ones
es'' +ho
hora
ra se pu
pued
eden
en ututi#i#i<
i<ar
ar t=
t=cn
cnic
icas
as de
posicionamiento mu$ precisas ue permiten ver #os e#ementos en e# #u!ar
deseado en #a p5!ina'
CBB 3: esta es #a D#tima versi4n% ue a!re!a caracter"sticas mu$ esperadas%
ta#es como bordes redondeados% de!radados% sombras% etc'
0e F
F
// $ CB
CBB3
B3 aD
aDn
n no se ha
han
n iina
na#i#i<a
<ado
do to
tota
ta#m
#men
ente
te #a
#ass ver
ersi
sion
ones
es
estandari<adas de T3C'
Bin embar!o% inc#uso si puede haber cambios menores en estos #en!ua;es% te
reco
recomi
mien
endo
do u
uee co
comi
mien
ence
cess ah
ahor
ora
a co
conn es
esta
tass nu
nuev
evas
as ve
vers
rsio
ione
nes'
s' Bu
Buss
contribuciones son muchas $ va#e #a pena'
+dem5s% muchos sitios eb proesiona#es se constru$en ho$ en d"a en #as
versiones recientes'