UAA-INTRODUCCION AL DISEO Y CONSTRUCCION DE PGINAS WEB Seccin:I1C - curs : !

"" - #T$L %CLASE &: Sesi nes 1 ' (

Semestre: Primavera/2011 Fecha: 23/08/11 Aula: 205-lab. Pg. 1 Lic. AnaFM

TE$A DEL DIA: 1) Estructuras Jerrquicas de la Web. Planificacin y dise ! de siti!s Web. Anat!"#a de una $resentacin Web. %iagra"as de na&egacin. (ya en clase anterior) ') (ntr!duccin al )*ML. Estructura de un d!cu"ent! )*ML. Esque"a de una $gina. Etiquetas+ ,!nce$t!. *i$!s de etiquetas+ Abiertas. ,erradas. -eglas sintcticas. E.ce$ci!nes. Estndares+ W/,. E.tensi!nes de l!s na&egad!res. Edicin de un d!cu"ent!. E.tensi!nes de un d!cu"ent! )*ML. ,!nse0!s y rec!"endaci!nes $ara el dise ! de Web c!n )*ML. /) F!r"ate! de te.t!s+ Estil!s de carcter 1lgic!s y f#sic!s). La cabecera de la $gina. El cuer$! de la $gina. *#tul!s. ,!"entri!s. Acent!s y !tr!s s#"b!l!s. 2alt!s de l#nea. Es$aci! entre $alabras. 3er cdig! fuente. Prraf!s ! 4l!ques. Estil!s del te.t!+ 5egrita. ,ursi&a. 2ubrayad!. 6tras etiquetas de resaltad!. Prraf!s que c!nte"$len ti$!7 ta"a ! y c!l!r del te.t!. %eter"inar c!l!res de l!s enlaces. F!nd!s de $ginas c!n c!l!res unif!r"es ! i"genes. *i$!s de letras $redefinid!s. %irecci!nes. ,itas. 2angrad!s y alineaci!nes de $rraf!s. (nsercin de l#neas de se$aracin. Trabajo Prctico + Entrega de f!r"ulari! de a$r!bacin de te"a $ara $r!yect! de siti! 8eb a l!s alu"n!s.19) 4) Tarea para practicar - Presentacin y aprobacin de Anteproyecto de sitios web - Ver modelo tapa y partes (objet. Gral y especificos.) en e-campus Des)rr ** +e * s ,e-)s +e* +.): 1) Estructuras Jerrquicas de la Web. Planificacin y dise ! de siti!s Web. Anat!"#a de una $resentacin Web. %iagra"as de na&egacin. (ver contenido, en clase anterior). Anatoma de una presentacin Web. Sitio web: concepto. Presentacin web: concepto, diferencia con sitio web. Pgina web: concepto. Utilidad. Pgina de inicio: concepto. Diferencia entre pgina web pgina de inicio. Planificacin y diseo de sitios eb. !sabilidad y Accesibilidad de un sitio eb "aracter#sticas de la web $ %esumen cap & !ibro de !aura !ema 'area anterior( )eer "apitulo & y * del libro( )emay+ )aura Aprendiendo ,'-). para web. ".# $rgancese: Planear de antemano # %aractersticas del contenido de cada pagina Web o seccin. &.# 'stablecer ob(eti)os: *.# +erar,uas: $rgani-ar los contenidos ..# Diagramacin secuencial para su presentacin web Diagramas de na)egacin. /apa del sitio 2) Introduccin al HT !. "structura de un docu#ento HT !. "s$ue#a de una p%ina. "ti$uetas& 'oncepto. Tipos de eti$uetas& (biertas. 'erradas. )e%las sintcticas. "*cepciones. "stndares& +,'. "*tensiones de los nave%adores. "dicin de un docu#ento. "*tensiones de un docu#ento HT !. 'onsejos y reco#endaciones para el dise-o de +eb con HT !. HT !: Hi"er Te#t ar$u" !a%&ua&e ' le%&ua(e )e marca)' )e hi"erte#t'* es el le%&ua(e c'% +ue est,% escritas t')as las ",&i%as -eb. .a)a )'cume%t' HT ! tie%e )'s "artes /u%)ame%tales: el c'%te%i)' 0l' +ue se ver, e% i%ter%et1 2 c'ma%)'s Html +ue "erma%ecer,% 'cult's. Pue)e% i%cluir: - Hi"ere%laces +ue lleva% a 'tras "a&i%as -eb* a archiv's multime)ia ' a 'tr's servici's )e i%ter%et. - 3m,&e%es &r,/icas +ue sirve% )e e%lace c'% 'tr's )'cume%t's. - a"as )e im,&e%es c'% )isti%t's e%laces. - 4leme%t's activ's +ue '/rece% la "'sibili)a) )e recibir "r'&ramas 2 )e e(ecutarl's e% la P..* escrit's e% 5A6A 0l"'' )e c771 +ue es "'rtable e% t')' ti"' )e "c au%+ue sea% i%c'm"atibles e%tre si. - )ivers's estil's )e ti"'&ra/8a* e%cabe9amie%t's 2 marc's* "ara me('rar la "rese%taci:% )el te#t'. - listas 2 tablas c'% )ivers's estil's.

UAA-INTRODUCCION AL DISEO Y CONSTRUCCION DE PGINAS WEB Seccin:I1C - curs : !"" - #T$L %CLASE &: Sesi nes 1 ' (
Semestre: Primavera/2011 Fecha: 23/08/11 Aula: 205-lab. Pg. ' Lic. AnaFM

E*e-en, s /un+)-en,)*es 0)r) ,r)1)2)r c n #T$L: )3 E+i, r +e ,e4, s: 0rec'me%)a)' el bl'c$ )e %'tas1. 3 P;<TA=T4: "ara &uar)ar %'mbre.html ' %'mbre.htm 0c'% e#te%si:% .htm "ara +ue %' &uar)e .t#t1. 13 N)5e6)+ r: usarem's 3%ter%et 4#"l'rer. c3 Ser5i+ r We1 0%ecesari' "ara el m'me%t' )e "ublicar la "a&i%a1. Es,ruc,ur) +e un + cu-en, #T$L 77777 6u)r+)r c .abecera 0titul'1* cuer"' 0c'%te%i)'1 >HT !? >H4A@? >T3T!4? >/H4A@? >C;@D? ...c'%te%i)' +ue se ver, e% la ",&i%a >/C;@D? >/HT !? T.,u* s9 enc)1e:)+ s9 0;rr)< s9 ,)6s9 re6*)s sin,;c,ic)s9 e4ce0ci nes7 ,)6s: )e/i%e la c'm"a&i%aci:% )e las i%/'rmaci'%es. re6*)s sin,;c,ic)s: c -)n+ s cerr)+ s =U> =?U> 0tie%e% eti+ueta )e cierre1 c -)n+ s )1ier, s =P> 0%' tie%e% eti+ueta )e cierre1 L s c -)n+ s n se 5isu)*i:)n )* e2ecu,)r7 Bcuer"' 0c'%te%i)'1 1)se78,-

i "rimera "a&i%a Aeb >/T3T!4?

Bcabecera 0titul'1

CO$ANDOS:
>H1? "ara e%cabe9a)' c'% tamaE's )el #1 )* #" =?#1> >C<? "ara salt' )e l8%ea @re)*i:)r e2e-0* s en c*)seA-),eri)* en e-c)-0us3

3%ici'/Pr'&ramas/Acces'ri's/Cl'c$ )e ='tas "/escribir c'ma%)'s HT !: rec'me%)a)' i%)e%tarl's. Fuar)ar c'm' .... clase1.htm 0c'% e#te%si:% .htm ' .html1 Pr'bar )es)e G 3 P.H ' G4#"l'rerH c'% )'ble clic$ s'bre el ic'%' Para m')i/icar...cerrar la ve%ta%a )e 3%ter%et 4#"l'rer 2 e% bl'c$ )e %'tas * abrir 0visuali9ar I.htm1 6'lver a &uar)ar 2 "r'bar. Es,;n+)res: W&C: ver material e% e-cam"us. C nse2 s ' rec -en+)ci nes 0)r) e* +iseB +e We1 c n #T$L : ver material e% e-cam"us. ,) .or#ateo de te*tos& "stilos de carcter (l%icos y /0sicos). !a cabecera de la p%ina. "l cuerpo de la p%ina. T0tulos. 'o#entrios. (centos y otros s0#bolos. 1altos de l0nea. "spacio entre palabras. 2er cdi%o /uente. Prra/os o 3lo$ues. "stilos del te*to& 4e%rita. 'ursiva. 1ubrayado. 5tras eti$uetas de resaltado. Prra/os $ue conte#plen tipo, ta#a-o y color del te*to. 6eter#inar colores de los enlaces. .ondos de p%inas con colores uni/or#es o i#%enes. Tipos de letras prede/inidos. 6irecciones. 'itas. 1an%rados y alineaciones de prra/os. Insercin de l0neas de separacin. 2er #aterial en e-ca#pus& ,lase/:Estil!s f#sic!s y Estil!s lgic!s.d!c 2er #aterial en e-ca#pus& ,lase/:,aracteres latin!s y es$eciales:acent! tilde.d!c

A,ri1u, s +e* BODY 0)r) c * r +e < n+ ' c * r +e* ,e4, 7 =BODY BGCOLORCRED TEDTCW#ITE> 16c * r es e* ),ri1u, 0)r) c)-1i)r e* c * r +e* < n+ +e *) 0;6in)7 Te4, es e* ),ri1u, 0)r) c)-1i)r e* c * r +e* ,e4, 7 $)s c -)n+ s 0)r) < r-),e +e ,e4, :
=I> P)r) *e,r) cursi5) i,)*ic) =?I> =U> P)r) su1r)')+ =?U> =B> P)r) ne6ri,)s =?B>

UAA-INTRODUCCION AL DISEO Y CONSTRUCCION DE PGINAS WEB Seccin:I1C - curs : !"" - #T$L %CLASE &: Sesi nes 1 ' (
Primavera/2011 Fecha: 23/08/11 Aula: 205-lab. Pg. / Lic. AnaFM enc)1e:)+ s +e* =#1> )* =#">777, + s c -)n+ s cerr)+ s Anecesi,)n e,iEue,) +e cierre37 Para e#"'%e%ciaci:%: 454 P!; @4 J=A 4.JA.3;=K3>SJP?2>/SJP?LKM>C<? Para sub-8%)ices: !A F;< J!A @4! AFJA 4S H>SJC?2>/SJC?;>C<?>C<?>C<? Para i%sertar u%a ra2a* "'%erle c'l'r 2 tamaE'* ali%eaci:% 2 si% s'mbras: >H< A3@THK50N .;!;< F<44= S3O4K5? >H< A3@THK30N A!iF=K<3FHT =;SHA@4? Para achicar ' a&ra%)ar el ti"' )e letra: J=A PA!AC<A>S A!!?P4PJ4QA>/S A!!?D ;T<A>C3F?F<A=@4>/C3F?>C<? En 1 +' )6re6)r * s6,e: TAREA: 0r)c,ic)r en *)1 r), ri +e c -0u,)cin777 >C? "ara )es"le&ar %e&ritas 2 C< "ara salt' )e l8%ea>/C?>C<? >3? "ara )es"le&ar cursiva ' it,lica >/3?>C<? >J? "ara )es"le&ar subra2a)'s >/J?>C<? >C?>3?>J? se "ue)e% c'mbi%ar l's tres ...>/J?>/3?>/C?>C<? >.4=T4<? el te#t' sal)r, ce%tra)'...>/.4=T4<?>C<?>C<? >P ali&%Kle/t? mi "rimer ",rra/' a la i9+uier)a >C<? >P ali&%Kce%ter? el se&u%)' ",rra/' ce%tra)' >C<? >P ali&%Kri&ht? >3?el tercer ",rra/' a la )erecha e it,lica >C<? >P ali&%Kce%ter? =' es la r,/a&a )el vie%t' >C<? +ue se /iltra "'r la "uerta >C<? %' es el ra2' +ue calie%ta >C<? el s'l )el atar)ecer. >C<?>/.4=T4<?>br? Semestre:

4) Tarea para 7oy& Presentacin y aprobacin de Anteproyecto de sitios weblos /ue no 0inieron a clase( en0iar por email a)tema b)inte1rantes del 1rupo c)bre0e descripcin sobre el tema /ue abordar2n. Ver modelo tapa y partes (objet. Gral y especificos.)

Falea%' F* F. S,%che9 A* 5... @8a9 * P. 0200M1. Manual Imprescindible de HTML. Edicin revisada y actualizada 2009. a)ri): A%a2a ultime)ia. 3SC= MR8-8S-S15-2503-0 .:)i&': 001.TS25.1S.533 !ema2* !. 01MMS1. Aprendiendo HTML Pre%tice Hall His"a%'america%a. .:)i&': 001.TS2.5.T.3TR para !eb en una semana. 02)a. 4).1. U#ic':