Está en la página 1de 214

II CURSO DISEO GESTORES

DE

DE

SITIOS WEB
DE

BASADOS EN

CONTENIDO

LIBRE DISTRIBUCIN

Sevilla, julio de 2012

Paulino Ruiz de Clavijo Vzquez <paulino@dte.us.es>

Copyright 2012 Paulino Ruiz de Clavijo Vzquez <paulino@dte.u .e ! " #niver idad de $evilla. %ulio de 2012. Revi i&n 2.'(. ) te *anual ha ido realizado para el Cur o de +or*a,i&n Continua titulado Diseo de Sitios WEB

basados en Gestores de Contenido (CMS) de Libre Distribucin del Centro de +or*a,i&n Per*anente de la #niver idad de $evilla. $e di tri-uye -ajo li,en,ia .ttri-ution"$hare ali/e de Creative Co**on 0 u ted e di tri-uir y ,o*uni,ar p1-li,a*ente la o-ra y de ha,er o-ra derivada e re peten la ,ondi,ione de la li,en,ia .ttri-ution"$hare ali/e de Creative Co**on . 3e4to ,o*pleto de la li,en,ia en http566,reative,o**on .org6li,en e 6-y"n," a6'.06e 6 li-re de ,opiar0

ie*pre que e ,ite la 2uente y

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

!di"e de "o!#e!ido
Modulo 1a - Internet y Software Libre...........................................................................................9 1.Re u*en..................................................................................................................................................7 2.Re2eren,ia ..............................................................................................................................................7 '.8nternet y ,on,epto - i,o o-re rede de ,o*putadore ...............................................................10 '.1.9ire,,ione 8P y $ervidore de no*-re ......................................................................................11 '.2.Puerto ...........................................................................................................................................1' :.$o2t;are li-re........................................................................................................................................1< :.1.=avegador +ire2o4.........................................................................................................................1> :.2.)ditor de te4to =otepad??.........................................................................................................1( :.'.Cliente +3P +ilezilla......................................................................................................................17 :.:.)ditor de i*gene @8AP.............................................................................................................20 <.Realiza,i&n op,ional..............................................................................................................................20 >.Bi,en,ia de $o2t;are Bi-re..................................................................................................................20 Modulo 1b - HTML y CSS..............................................................................................................23 1.Re u*en................................................................................................................................................2' 2.Re2eren,ia ............................................................................................................................................2' '.8ntrodu,,i&n...........................................................................................................................................2' :.Benguaje C3AB.....................................................................................................................................2< <.Coja de e tilo en ,a ,ada C$$...........................................................................................................2D <.1.Regla C$$....................................................................................................................................27 <.2.$ele,tore ......................................................................................................................................27 <.'.Prioridad de ele,tore .................................................................................................................'' <.:.Aodelo de ,aja .............................................................................................................................': <.<.Aedida .........................................................................................................................................'7 <.>.3ipogra2Ea .....................................................................................................................................:1 <.(.Aedio C$$....................................................................................................................................:' <.D.Ftro a pe,to ...............................................................................................................................:' <.7.C$$'..............................................................................................................................................:: >.)je*plo de di eGo -a ado en hoja de e tilo C$$...........................................................................:< >.1.)4ten i&n +ire-ug para +ire2o4....................................................................................................:> (.Con ejo .................................................................................................................................................:( D.Realiza,i&n op,ional..............................................................................................................................:D Mdulo 1c - Platafor a !"MP.....................................................................................................#9

1.Re u*en................................................................................................................................................:7 2.Re2eren,ia ............................................................................................................................................:7 '.8ntrodu,,i&n...........................................................................................................................................:7 :.8n tala,i&n de H.AP.............................................................................................................................<0 <.9e arrollo ,on H.AP............................................................................................................................<1 <.1.$ervidor He- .pa,he....................................................................................................................<2 <.2.Copia de eguridad........................................................................................................................<'

&ndice de contenido

'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

>.Benguaje de progra*a,i&n PCP...........................................................................................................<: (.Realiza,i&n op,ional..............................................................................................................................<< Mdulo 1d - $a%e de dato% M&S'L...............................................................................................() 1.Re u*en................................................................................................................................................<( 2.Re2eren,ia ............................................................................................................................................<( '.8ntrodu,,i&n...........................................................................................................................................<( :..d*ini tra,i&n de Ay$IB.....................................................................................................................<D :.1.Con2igura,i&n de eguridad..........................................................................................................<D :.2.@e ti&n de u uario y privilegio ..................................................................................................>1 :.'.Con,epto - i,o en -a e de dato rela,ionale ......................................................................>2 :.:.8*porta,i&n y e4porta,i&n............................................................................................................>< <.Con,epto avanzado ............................................................................................................................>> Mdulo 2a - !i*i%.........................................................................................................................+) 1.Re u*en................................................................................................................................................>( 2.Re2eren,ia ............................................................................................................................................>( '.8ntrodu,,i&n...........................................................................................................................................>D :.9o/u;i/i................................................................................................................................................>D :.1.8n tala,i&n de 9o/uHi/i................................................................................................................>7 :.2.# uario grupo y li ta de ,ontrol del a,,e o JBC. " .CBK........................................................(1 :.'.. pe,to vi ual y plantilla .............................................................................................................(2 :.:.Co*ple*ento ...............................................................................................................................(: :.<.Copia de eguridad y ,lona,i&n del itio......................................................................................(< <.Aedia;i/i..............................................................................................................................................(< <.1.8n tala,i&n y ad*ini tra,i&n.........................................................................................................(> Mdulo 2b - ,e%tore% de foro%......................................................................................................-1 1.Re u*en................................................................................................................................................D1 2.Re2eren,ia ............................................................................................................................................D1 '.8ntrodu,,i&n...........................................................................................................................................D2 :.$i*ple Aa,hine +oru* " $A+.............................................................................................................D2 :.1.8n tala,i&n y ad*ini tra,i&n de $A+...........................................................................................D2 :.2.8n tala,i&n de ,o*ple*ento ........................................................................................................D> :.'.Aodi2i,a,i&n de la pre enta,i&n...................................................................................................DD <.. pe,to avanzado ...............................................................................................................................70 <.1.Clona,i&n del itio.........................................................................................................................70 <.2.Control de $P.A...........................................................................................................................7' >.php Lulletin Loard.................................................................................................................................7: Mdulo 2c - .,rou/!are..............................................................................................................9) 1.Re u*en................................................................................................................................................7( 2.Re2eren,ia ............................................................................................................................................7( '.8ntrodu,,i&n...........................................................................................................................................7( :.3ra-ajo en grupo ,on )@roupHare......................................................................................................7D

&ndice de contenido

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

:.1.Calendario.....................................................................................................................................7D :.2..d*ini trador de re,ur o y ar,hivo ..........................................................................................77 :.'..d*ini trador de proye,to y hoja de pre en,ia.......................................................................100 :.:.$i te*a de egui*iento J3ra,/erK..............................................................................................101 :.<.Ftro *&dulo .............................................................................................................................102 :.>.$in,roniza,i&n.............................................................................................................................10' <.8n tala,i&n y ad*ini tra,i&n...............................................................................................................10' <.1.8n tala,i&n...................................................................................................................................10: <.2.Con2igura,i&n re,o*endada.......................................................................................................10< <.'.)je*plo de ,on2igura,i&n...........................................................................................................10> >.3area adi,ionale ...............................................................................................................................10> Mdulo 2d - Pre%taS0o/..............................................................................................................119 1.Re u*en..............................................................................................................................................107 2.Re2eren,ia ..........................................................................................................................................107 '.8ntrodu,,i&n........................................................................................................................................110 :.8n tala,i&n y ad*ini tra,i&n - i,a....................................................................................................110 :.1.A&dulo y di po i,i&n de la pgina............................................................................................111 :.2.Crea,i&n del ,atlogo..................................................................................................................11' :.'.F2erta y pro*o,ione ................................................................................................................11< <.@e ti&n del pago y envEo.....................................................................................................................11> <.1.Pa arela de pago........................................................................................................................11D <.2.Paypal and-o4............................................................................................................................117 >.Con2igura,i&n de la pre enta,i&n.......................................................................................................122 >.1.8n tala,i&n de nuevo te*a .......................................................................................................122 >.2.9e arrollo de un te*a.................................................................................................................122 (..d*ini tra,i&n avanzada....................................................................................................................12> (.1.Aante*i*iento del ,atlogo.......................................................................................................12> (.2.@e ti&n de u uario 5 ,liente y e*pleado .................................................................................12> (.'.Pue ta en e4plota,i&n.................................................................................................................12( (.:.Ftra ,ara,terE ti,a ...................................................................................................................12D Mdulo 2e - !ordPre%%...............................................................................................................129 1.Re u*en..............................................................................................................................................127 2.Re2eren,ia ..........................................................................................................................................127 '.8ntrodu,,i&n .......................................................................................................................................127 :.8n tala,i&n y ,on2igura,i&n - i,a......................................................................................................1'0 <.Pu-li,a,i&n de ,ontenido ...................................................................................................................1'1 <.1.Contenido *ulti*edia.................................................................................................................1': >.9i po i,i&n del -log y a pe,to............................................................................................................1'< >.1.Pgina prin,ipal y pgina e tti,a ...........................................................................................1'< >.2.Aen1 ..........................................................................................................................................1'( >.'.Hidget ........................................................................................................................................1'D >.:.3e*a ...........................................................................................................................................1'7 >.<.Crea,i&n de te*a .......................................................................................................................1:0 (.Plugin .................................................................................................................................................1:2

&ndice de contenido

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

D.Fp,ione avanzada ............................................................................................................................1:' D.1.#RB a*iga-le ...........................................................................................................................1:' D.2.3ra,/-a,/ y Ping-a,/ ..............................................................................................................1:: D.'.@e ti&n de u uario .....................................................................................................................1:< D.:.Clona,i&n del itio.......................................................................................................................1:> D.<.Ftra ,ara,terE ti,a ...................................................................................................................1:D Mdulo 3a - 2oo la.....................................................................................................................1#9

1.Re u*en..............................................................................................................................................1:7 2.Re2eren,ia ..........................................................................................................................................1:7 '.8ntrodu,,i&n........................................................................................................................................1<0 :.8n tala,i&n...........................................................................................................................................1<1 <..d*ini tra,i&n de ,ontenido .............................................................................................................1<2 <.1.CategorEa y artE,ulo .................................................................................................................1<2 <.2..d*ini tra,i&n de *en1 ............................................................................................................1<: <.'.@e tor *ulti*edia.......................................................................................................................1<( >.Pre enta,i&n de ,ontenido ................................................................................................................1<D >.1..d*ini tra,i&n de *&dulo .........................................................................................................1<7 >.2.Plantilla ......................................................................................................................................1>2 >.'.Crea,i&n de una plantilla ..........................................................................................................1>: (..d*ini tra,i&n avanzada....................................................................................................................1>D (.1.Clona,i&n del itio.......................................................................................................................1>D (.2..d*ini tra,i&n de u uario .........................................................................................................1>7 (.'.Co*ple*ento .............................................................................................................................1(0 (.:.A ,o*ponente ........................................................................................................................1(1 Mdulo 3b - 3ru/al.....................................................................................................................1)3 1.Re u*en..............................................................................................................................................1(' 2.Re2eren,ia ..........................................................................................................................................1(' '.8ntrodu,,i&n........................................................................................................................................1(: :.8n tala,i&n y ,on2igura,i&n - i,a......................................................................................................1(: :.1.Con2igura,i&n - i,a...................................................................................................................1(< :.2.8n tala,i&n de ,o*ple*ento 6 *&dulo .....................................................................................1(< <..d*ini tra,i&n de ,ontenido .............................................................................................................1(> <.1.Crea,i&n de ,ontenido ...............................................................................................................1(D <.2.Aen1 ..........................................................................................................................................1(7 <.'.3ipo de ,ontenido .....................................................................................................................1D0 <.:.3a4ono*Ea....................................................................................................................................1D: <.<.Lloque ........................................................................................................................................1D< >..d*ini tra,i&n de u uario y per*i o ..............................................................................................1D( (.3e*a ...................................................................................................................................................170 D.Co*ple*ento de ta,ado ..................................................................................................................17: 7.9i tri-u,ione ......................................................................................................................................17< Mdulo #a - Plone.......................................................................................................................19) 1.Re u*en..............................................................................................................................................17(

&ndice de contenido

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

2.Re2eren,ia ..........................................................................................................................................17( '.8ntrodu,,i&n........................................................................................................................................17( :.Aodelo de ge ti&n de ,ontenido en Plone........................................................................................17D :.1.+lujo de tra-ajo JHor/2lo;K........................................................................................................201 :.2.Ci t&ri,o y ver ione de do,u*ento .......................................................................................202 :.'.Per*i o ......................................................................................................................................20' <.8n tala,i&n y ad*ini tra,i&n...............................................................................................................20: <.1.Hor/2lo;......................................................................................................................................20( <.2.# uario grupo y role ...............................................................................................................20D >..d*ini tra,i&n avanzada....................................................................................................................210 >.1.Mope MA8.....................................................................................................................................210 >.2.9i po i,i&n de la pgina en Plone...........................................................................................210 >.'.8n tala,i&n de ,o*ple*ento ......................................................................................................212

&ndice de contenido

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$odulo 1a % I!#e&!e# ' So(#)a&e Li*&e


Conceptos bsicos de redes, Internet y TCP/IP !lternativas al so"t#are co$ercial

1+ Re,u-e!
9ura,i&n e ti*ada5 1 hora. Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero +ire2o4 $etup 1'.0.e4e npp.>.1.2.8n taller.e4e pri*eraNpagina.zip +ileMillaN'.<.'N;in'2" etup.e4e pet ";e- ite.zip0 organi,"2ar*.zip
,abla -.

3e%cri/cin Ver i&n para Hindo; del navegador +ire2o4 < )ditor de te4to =otepad?? )je*plo i*ple de pgina HeCliente +3P 2ilezilla Plantilla He- de eje*plo

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O1P O2P O'P O:P O<P O>P O(P ODP O7P )$=8C0 <http 566;;;.ni,.e !. 9e2ini,i&n de o2t;are li-re eg1n @=#0 <http566;;;.gnu.org6philo ophy62ree" ;.e .ht*l!. +ree $o2t;are +oundation0 <http566;;;.2 2.org6!. )ditor de te4to =otepad??0 <http566notepad"plu "plu .org6!. Plugin para =otePad??0 <http566 our,e2orge.net6app 6*edia;i/i6notepad"plu 6!. )ditor de i*gene de @=# @i*p0 <http566;;;.gi*p.org6!. )ditor de gr2i,o ve,toriale 8n/$,ape0 <http566in/ ,ape.org6!. +unda,i&n Aozilla0 <http566;;;.*ozilla.org6!. +ilezilla0 <http5662ilezilla"proje,t.org6!.
Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

O10P Co*pre or (zip0 8gor Pavlov0 <http566;;;.("zip.org6!. O11P FpenClip.rt0 <http566;;;.open,lipart.org6!. O12P @alerEa de 2otogra2Ea li-re0 <http566openphoto.net6!. O1'P Fpen $our,e He- 9e ign JF$H9K0 +ran,i %. $/ettino <http566;;;.o ;d.org6!. O1:P +unda,i&n Creative Co**on 0 <http566,reative,o**on .org6!. O1<P @=# @eneral Pu-li, Bi,en e0@=# <http566;;;.gnu.org6,opyle2t6gpl.ht*l!.

.+ I!#e&!e# ' "o!"e/#o, *0,i"o, ,o*&e &ede, de "o-/u#ado&e,


8nternet e una red de ,o*uni,a,ione de ordenadore que utilizan un proto,olo de ,o*uni,a,ione lla*ado 3CP68P. =a,i& ,o*o un proye,to deno*inado .RP.=)3 en,argado por el 9eparta*ento de 9e2en a de lo ) tado #nido . 9e 2or*a *uy re u*ida0 e puede de,ir que la ,o*uni,a,ione de 8nternet e -a an en tre ,on,epto - i,o 5 dire,,ione 8P0 proto,olo y ervi,io . Ba dire,,i&n 8P identi2i,a a un ordenador en 8nternet y ha,e po i-le u ,o*uni,a,i&n ,on el re to de ordenadore ya que0 gra,ia a e a dire,,i&n e ,ono,e el ,a*ino que de-e eguir la ,o*uni,a,i&n de de un ordenador a otro ,on di2erente 8P. )n prin,ipio0 una deter*inada dire,,i&n 8P olo puede pertene,er a un equipo ,one,tado en la red en un in tante de tie*po0 aunque a,tual*ente0 e t dire,,ione e ,o*parten. #n eje*plo de ,o*parti,i&n de dire,,i&n 8P o,urre en ,ualquier router .9$B de lo que di pone*o 0 real*ente el router e quien po ee la dire,,i&n 8P que no o2re,e nue tro proveedor de ervi,io y e en,arga de ,o*partirla entre lo di2erente equipo que tenga*o ,one,tado al router. Por otro lado0 en 8nternet en,ontra*o diver o ervi,io ,o*o ,orreo ele,tr&ni,o0 pgina He-0

ervidore de hora0 tele2onEa0 vEdeo ,on2eren,ia0 et,. Cada uno de e to

ervi,io per*ite enviar y re,i-ir

dato gra,ia a que ,o*parten un proto,olo ,o*1n de ,o*uni,a,i&n. #n proto,olo no e *a que un ,onjunto de regla ,o*une para ,o*uni,ar dato . Por eje*plo0 el ,orreo ele,tr&ni,o utiliza el proto,olo $A3P para envEo y PFP' o 8A.P para le,tura0 la tran 2eren,ia de ar,hivo pgina He- utilizan el proto,olo C33P 0 y la e realizan tradi,ional*ente utilizando el proto,olo +3P. en un rango O0"2<<P0 por eje*plo

#na dire,,i&n 8P e t 2or*ada por : n1*ero 0 ,ada uno de ello

10.0.1.2'0. )l n1*ero total de ,o*-ina,ione e del orden de :000 *illone de dire,,ione 0 que por ,ierto0 a,tual*ente e tn agotada 0 pero no toda e tn en u o. Para poder e ta-le,er una ,o*uni,a,i&n el pri*er pa o e ,ono,er la dire,,i&n 8P del equipo re*oto. Para i*pli2i,ar el u o de la dire,,ione de 8nternet e invent& el ervi,io de 8nternet 9=$ J Do!ain 0a!e S1ste!K. ) te ervi,io e ,o*o una i*ple li-reta de telQ2ono 0 e utiliza para tradu,ir no*-re de do*inio a dire,,ione 8P. Bo no*-re de do*inio e tn nor*alizado y e 2or*an uniendo do o * parte eparada por punto . )l punto irve para 2or*ar una e tru,tura jerrqui,a tratando el no*-re ha,e re2eren,ia una deter*inada dire,,i&n 8P. 9i,ho no*-re ha ido a ignado de dere,ha a izquierda0 lla*ndo e ,ada u-divi i&n eparada por punto un u-do*inio. Por eje*plo0 ;;;.dte.u .e jerrqui,a*ente a vario re pon a-le de ge ti&n de do*inio 5 R.e S e re pon a-ilidad de )$=8C O1P y ha a ignado R.u S a la #niver idad de $evilla0 RdteS e re pon a-ilidad de la #niver idad de $evilla y lo ha a ignado al 9eparta*ento de 3e,nologEa )le,tr&ni,a y R;;;S ha ido a ignado por el 9eparta*ento

-2

Modulo -a 3 Internet 1 So4t5are Libre

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

de 3e,nologEa )le,tr&ni,a al ervidor de pgina He- ,uya 8P e 1<0.21:.1:1.17>. 8C.== e la ,orpora,i&n en,argada de la a igna,i&n de no*-re de do*inio y dire,,ione de 8nternet. ) re pon a-le de la ad*ini tra,i&n y ,oordina,i&n de todo el ea 1ni,a y que todo lo no*-re i te*a de no*-re de do*inio y garantiza que ,ada dire,,i&n de do*inio tengan a ignada una que delega otra

dire,,i&n 8P. @e tiona dire,ta*ente la jerarquEa .co!0 .net0 .or6 et,.0 *ientra ,a o de ) paGa el organi *o en,argado de la jerarquEa R.e S e lla*a )$=8C. Ftro tQr*ino utilizado de *anera ,o*1n en la ter*inologEa de 8nternet e #RB0 a,r&ni*o de $ni4or! 7esource Locator8 1 generalizado a,tual*ente en el tQr*ino #R8 J$ni4or! 7esource Identi4ierK. #n #RB6#R8 e una e,uen,ia de ,ara,tere nor*alizada para no*-rar re,ur o en 8nternet. )n la 2igura 1 e *ue tran 2 eje*plo de
# uario Proto,olo Puerto .n2itri&n

jerarquEa ,o*o on .es0.ar0.de et,. a organi *o lo,ale en,argado de la ge ti&n en ,ada paE . )n el

Ruta de re,ur o

http://www.dte.us.es:80/cursos/cms

.n2itri&n

Re,ur o

#RB 0 la pri*era de ella e ,ono,ida ,o*o dire,,i&n He- y la egunda ha,e re2eren,ia a una ,one4i&n ,on el proto,olo +3P a un ervidor de 2i,hero .

ftp://juan:1234@ftp.ejemplo.com:21/doc/
Proto,olo Contra eGa Puerto

i6ura -. E9e!plos de $7Ls para protocolo :,," 1 protocolo ,".

.*-o eje*plo *ue tran lo di2erente ,o*ponente que 2or*an parte de una dire,,i&n0 de ta,a*o el pri*ero de ello que ha,e re2eren,ia al proto,olo u ado en la ,o*uni,a,i&n. . lo largo de e te ,ur o tra-ajare*o prin,ipal*ente ,on lo proto,olo C33P0 +3P0 C33P$0 +3P$0 8A.P y $A3P.

3.1. Direcciones IP y Servidores de nombres


Realizare*o alguna prue-a ,on lo no*-re de do*inio y dire,,ione 8P en Hindo; . =e,e iT

ta*o tra-ajar ,on la lEnea de ,o*ando JCA9K de Hindo; y e un progra*a que e puede lo,alizar en el *en1 de 8ni,io. T1. )je,ute la lEnea de ,o*ando de Hindo; JCA9K de de el *en1 de 8ni,io. ) t en Aen1 de

8ni,io U 3odo lo progra*a U .,,e orio U $E*-olo del i te*a. $e a-rir una ventana ,on 2ondo negro donde e pueden te,lear ,o*ando . T1.1. 3e,lee el te4to ipconfig y pul e la te,la de pare,ido al *o trado5 alto de lEnea0 de-erEa o-tener un re ultado

Modulo -a 3 Internet 1 So4t5are Libre

--

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Microsoft indows !" #$ersi%n &.1.2'00( )*+ *op,right 1-8&.2001 Microsoft *orp. *:/0ocuments and 1ettings/23o4.user5ipconfig *onfiguraci%n 6" de indows : : : 1-2.1'8.1.3' : 2&&.2&&.2&&.0 : 1-2.1'8.1.1

7daptador 8thernet *one4i%n de 9rea local 1ufijo de cone4i%n espec:fica 0;1 0irecci%n 6". . . . . . . . . . . M9scara de su3red . . . . . . . . "uerta de enlace predeterminada *:/0ocuments and 1ettings/23o4.user5

Cdi6o -. Co!ando ipcon4i6 de Windo5s.

#tilizando la lEnea de ,o*ando de Hindo; JCA9K e pueden averiguar la dire,,ione 8P de alguno no*-re de do*inio. $e pro,eder a la navega,i&n ,on 8P en vez de ,on no*-re para ,o*pro-ar la utilidad de lo ervidore de no*-re J9=$K.

T2. #tilizando la *i *a ventana anterior te,lee el ,o*ando pin6 eguido de un e pa,io y el no*-re del do*inio que de ee pro-ar0 por eje*plo ping www.terra.es5
*:/0ocuments and 1ettings/user5ping www.terra.es <aciendo ping a www.terra.es #213.4.130.210( con 32 3,tes de datos: =espuesta =espuesta =espuesta =espuesta desde desde desde desde 213.4.130.210: 213.4.130.210: 213.4.130.210: 213.4.130.210: 3,tes>32 3,tes>32 3,tes>32 3,tes>32 tiempo>&8ms tiempo>&3ms tiempo>&3ms tiempo>&2ms ??@>123 ??@>123 ??@>123 ??@>123

8stad:sticas de ping para 213.4.130.210: "aAuetes: en2iados > 4B reci3idos > 4B perdidos > 0 )0C perdidos+B ?iempos apro4imados de ida , 2uelta en milisegundos: M:nimo > &2msB M94imo > &8msB Media > &4ms Cdi6o ;. Co!probacin pin6.

T2.1. #tili,e la dire,,i&n 8P o-tenida por el ,o*ando ping y de de el navegador de 8nternet e ,ri-a en la -arra de dire,,i&n http5664.4.4.4 donde 4.4.4.4 e http56621'.:.1'0.210 T2.2. Repita el pro,e o ,on alguno no*-re de do*inio0 por eje*plo5 ;;;.google.e 0 la 8P0 para el ,a o anterior e

;;;.u .e 0 ;;;.dte.u .e 0 ;;;.rediri .e y 2tp.rediri .e . 3ra *o trar el 2un,iona*iento de lo ervidore 9=$0 pro,edere*o intentar adquirir alg1n do*inio.

9e-e*o -u ,ar por internet alg1n regi trador o2i,ial0 egura*ente en,ontre*o ,iento de *ile . $in ni*o de ha,er ning1n tipo de pu-li,idad0 tra-ajare*o ,on uno de ello e ,ogido en *i ,a o para *i aloja*iento per onale . T3. =avegue a la dire,,i&n http566;;;.pien a olution .,o*0 donde apare,er un proveedor de

-;

Modulo -a 3 Internet 1 So4t5are Libre

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

ervi,io

) paGol. 9e-e*o

pul ar

o-re la pe taGa 9o*inio

donde apare,e un ,uadro para

regi trar no*-re de do*inio . T3.1. ) ,ri-a /opeplone y pul e o-re -u ,ar. .pare,ern un li tado ,on toda la e4ten ione po i-le del no*-re0 el pre,io e indi,a,ione o-re la di poni-ilidad. o-re el

T3.2. $o-re la ,olu*na ) tado apare,e un enla,e ,on la pala-ra Regi trado. Pul ar enla,e de /opeplone.es para ver lo dato *o trado o-re el do*inio.

T3.3. )n,uentre un no*-re de do*inio li-re para regi trarlo. $i quiere regi trarlo y u arlo durante el ,ur o ,rQdito. iga lo pa o 0 pero en alg1n *o*ento le oli,itarn el pago ,on tarjeta de

3.2. Puertos
)l 1lti*o ,on,epto ,o*uni,a,ione o-re 8nternet tratado e ordenadore el deno*inado puerto en el proto,olo 3CP68P. )n la pueden e4i tir varia ,one4ione a,tiva i*ultneaT

3CP68P entre do

*ente0 para di2eren,iarla 0 e le a igna un n1*ero deno*inado puerto a ,ada ,one4i&n. ) to n1*ero en el proto,olo 3CP e tn li*itado al rango O00><<'<P. Cuando un equipo tiene el papel de ervidor de ervi,io de red JHe-0 ,orreo0 +3P 0 et,.K0 ,ada uno de lo ervi,io e t a o,iado a un puerto. )n toda ,o*uni,a,i&n 3CP68P hay que indi,ar la dire,,i&n de tino y el puerto del ordenador re*oto ha,ia el que e e ta-le,e la ,one4i&n. Bo pri*ero puerto O0"102'P e deno*inan "uertos Bien Conocidos JWell <no5n portsK. ) to tienen a o,iado alguno de lo * ,ono,ido ele,tr&ni,oK0 puerto 21 proto,olo +3P 0 puerto ::' proto,olo C33P$0 et,. Caga*o alguna prue-a para ,o*prender el ,o*porta*iento de e te *e,ani *o 3C8P68P. T#. Ba pri*era prue-a e realizarn ,on el navegador de 8nternet. =avegue a la dire,,i&n ervi,io en 8nternet ,o*o5 puerto D0 proto,olo C33P 0 puerto 2< proto,olo $A3P J,orreo

http5662tp.rediri .e re ultado.

pero en la dire,,i&n aGada el puerto5 http5662tp.rediri .e 5D0 y o- erve el

T#.1. Ca*-ie la dire,,i&n el n1*ero del puerto a 210 la dire,,i&n le quedar ,o*o http5662tp.rediri .e 521. F- erve el *en aje en el navegador +ire2o40 no indi,a que el puerto no e utiliza ha-itual*ente para navega,i&n HeT#.2. )l puerto 21 e utilizado para el ervi,io +3P de tran 2eren,ia de 2i,hero . Ca*-ie la

dire,,i&n en la -arra de navega,i&n a la iguiente5 2tp5662tp.rediri .e 521. F-tendr un li tado de lo 2i,hero e4i tente en el ervidor de 2i,hero de Red8ri . T#.3. .hora navegue*o ,one4ione al puerto ::' de http566*ail.zopeplone.e 5::'6. ) te puerto requiere

egura 0 pro-e*o ahora http 566*ail.zopeplone.e 5::'6.

T#.#. Por 1lti*o navegue al ervidor de pro2e or pero al puerto D0D0 y vea la pgina o-tenida. Real*ente la durante la ,o*uni,a,i&n entre nue tro ordenador y el ervidor e tran 2iri& un ar,hivo ,on ,ontenEa la pgina He- en 2or*ato C3AB. )l ,ontenido de e te ar,hivo e legi-le y

Modulo -a 3 Internet 1 So4t5are Libre

-'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

puede ver e en el *en1 Ver U C&digo 2uente de la pgina. Bo navegadore interpretan di,ho ,&digo para *o trar la pgina. Para ,o*prender *ejor ,o*o e ha realizado la ,o*uni,a,i&n u ando la dire,,i&n 8P0 puerto y proto,olo e realizar una 1lti*a prue-a ,on una herra*ienta de -ajo nivel deno*inada telnet. ) te herra*ienta 2un,iona en la lEnea de ,o*ando de Hindo; JCA9K y *ue tra en la pantalla lo dato tran 2erido entre lo ordenadore tal y ,o*o e tran *iten0 no ,o*o lo navegadore que lo interpretan. T(. .-ra el interprete de ,o*ando CA9 del *i *o *odo que e indi,& en 31. T(.1. )je,ute el iguiente ,o*ando telnet www.dte.us.es 80 al pul ar la te,la de nueva lEnea e quedar la pantalla va,Ea y el ,ur or parpadeando. .hora de-e te,lear un te4to0 no e preo,upe i *ientra te,lea el te4to no e *ue tra en pantalla0 e nor*al. 3e,lee e4a,ta*ente get / 2Eje e que ante de la -arra hay un e pa,io0 i pul a la te,la el alto de lEnea el ervidor le re ponder ,on la pgina He-. T(.2. Realizare*o una egunda prue-a ,one,tndono al puerto 21 J+3PK de Red8ri . 3e,lee

telnet ftp.rediris.es y volver o-tener una pantalla en -lan,o0 no toque ninguna te,la ha ta que

e le *ue tre un *en aje de -ienvenida. 3ra e to e ,ri-a help0 pul e la te,la alto de lEnea. y re,i-ir una li ta de ,o*ando vlido en el proto,olo de ,o*uni,a,i&n. ) ,ri-a Auit y a-andonaT r la ,o*uni,a,i&n.
*:/0ocuments and 1ettings/user5telnet ftp.rediris.es 21 220.......... elcome to "ure.D?"d #pri2sep( #?@1( .......... 220.Eou are user num3er &F of 3000 allowed. 220.GG 220. Hien2enido al D?" anIJnimo de =ed6=61. 220. elcome to the =ed6=61 anon,mous D?" ser2er. 220.55 220.@ocal time is now 13:43. 1er2er port: 21. 220.Knl, anon,mous D?" is allowed here 220.6"2' connections are also welcome on this ser2er. 220 Eou will 3e disconnected after & minutes of inacti2it,. help 214.?he following 16?8 commands are recogniLed 7@671 *<MK0 60@8 M?6M8 214 "ure.D?"d . http566pure2tpd.org6 Cdi6o '. E9e!plo de co!unicacin ," con el co!ando telnet.

T(.3. Repita en el puerto 2< ,on el ,o*ando telnet tecli4.dte.us.es 2&0 pul e la te,la de alto de lEnea y e pere el *en aje de -ienvenida. 3ra e to te,lee help para o-tener ayuda o-re el proto,olo. # e Auit para alir i el ervidor le e4pul a ante . T(.#. Repita lo ,on telnet mail.Lopeplone.es &8F y o- erve la i*ilitude ,on el anterior Va que ervi,io e ha ,one,tadoW T(.(. Lu que en @oogle la 2ra e puertos tcpip o ,ualquier 2ra e pare,ida y vea lo n1*ero de

-(

Modulo -a 3 Internet 1 So4t5are Libre

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

puerto a o,iado a ,ada proto,olo de red y averigXe ,ual e n1*ero de puerto del ervi,io 9=$.

1+ So(#)a&e li*&e
Ri,hard $tall*an0 un progra*ador e tadouniden e de re,ono,ido pre tigio0 e de la indu tria del $tall*an el el 2undador del in deno*inado *ovi*iento por el o2t;are li-re. ) te *ovi*iento ha revolu,ionado el *odelo de nego,io o2t;are y ,o*enz& en 17D< ,uando Ri,hard $tall*an 2und& la organiza,i&n ree So4t5are oundation O'P donde de2ine el u uario e re2iere a la li-ertad de lo ni*o de lu,ro lla*ada o2t;are li-re. $eg1n Ri,hard

o2t;are li-re

para eje,utar0 ,opiar0 di tri-uir0

e tudiar0 *odi2i,ar el o2t;are y di tri-uirlo *odi2i,ado. ) en,ial*ente0 el o2t;are li-re e di2erente al o2t;are gratuito lla*ado ha-itual*ente 4ree5are0 aunque Q te 1lti*o en prin,ipio e li-re0 puede er 2inal*ente u ado ,o*er,ial*ente0 al 2in y al ,a-o e Ri,hard $tall*an lo de2ine en la o2t;are ,o*er,ial.

ree So4t5are oundation ,o*o5

El =so4t5are libre> es una cuestin de libertad8 no de precio. "ara entender el concepto8 deber?a pensar en =libre> co!o en =libre e@presin>8 no co!o en =barra libre>. El so4t5are libre es una cuestin de la libertad de los usuarios de e9ecutar8 copiar8 distribuir8 estudiar8 ca!biar 1 !e9orar el so4t5are. MAs precisa!ente8 si6ni4ica Bue los usuarios de pro6ra!as tienen las cuatro libertades esenciales. $eg1n Ri,hard $tall*an un o2t;are e li-re ,uando garantiza e ta ,uatro li-ertade 5 Ba li-ertad de eje,utar el progra*a para ,ualquier prop& ito Jli-ertad 0K. Ba li-ertad de e tudiar ,&*o tra-aja el progra*a y0 ,a*-iarlo para que haga lo que u ted quiera Jli-ertad 1K. )l a,,e o al ,&digo 2uente e una ,ondi,i&n ne,e aria para ello. Ba li-ertad de redi tri-uir ,opia para que pueda ayudar al pr&ji*o Jli-ertad 2K. Ba li-ertad de di tri-uir ,opia de u ver ione *odi2i,ada a ter,ero Jla 'Y li-ertadK. $i lo ha,e0 puede dar a toda la ,o*unidad una oportunidad de -ene2i,iar e de ,&digo 2uente e una ,ondi,i&n ne,e aria para ello. ) te *ovi*iento ,uyo origen e puede datar en 17D< ha dato u 2ruto en *ultitud de o2t;are li-re donde0 proye,to ,o*o CpenC44ice6 reeC44ice0 Wi<ipedia0 in ignia. .,tual*ente e4i ten Hein,u-adora de de arrolladore lla*ada 2orja de donde ,ola-oran en lo ire4o@ y G0$DLinu@ on ,on iderado -uque o2t;are J Git:ub0 Source or6e0 et,.K que proye,to on allE alojado . Co*o *ue tra de la u ,a*-io . )l a,,e o al

*agnitud de e te tipo *ovi*iento 0 Source or6e ,uenta ,on * de 2 *illone de de arrolladore en *a de 200 *illone de proye,to a,tivo . )n e te ,ur o e propone utilizar o2t;are li-re en toda la etapa del de arrollo de lo podrEa di ,utir a*plia*ente ,o*er,ial0 egura*ente0 no o-re la ,alidad de ,ada herra*ienta de itio He-. $e

o2t;are li-re 2rente a una

e llegarEa a ninguna ,on,lu i&n ,onvin,ente. 8ndependiente*ente de la

2un,ionalidad0 ,alidad u otro a pe,to del o2t;are que e anali,en0 hoy en dEa e una realidad poder

Modulo -a 3 Internet 1 So4t5are Libre

-)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,u-rir toda la etapa del de arrollo de un itio He- -a ado en un ge tor de ,ontenido JCA$K in u ar ning1n o2t;are ,o*er,ial0 ,on una erie ventaja y otra erie de in,onveniente . 9urante la realiza,i&n del ,ur o e utilizarn un ,onjunto de herra*ienta li-re. #n ,onjunto u2i,iente de herra*ienta o2t;are ne,e aria -a ado en un CA$ erEa5 )ditor de te4to 5 .unque Hindo; di pone del -lo, de nota 0 propone*o ,o*o alternativa o2t;are0 toda ella o2t;are itio He-

para poder ,on truir un

utilizar 0otepadEEO:P0 el ,ual in,luye un navegador de ar,hivo y un ,liente +3P. )ditor de i*gene 5 Gi!p de @=# O>P0 tra-aja ,on ,ualquier 2or*ato de i*agen en *apa de -it . )ditor de gr2i,o J$V@K de H'C. =avegador H)L5 ire4o@0 navegador de 8nternet de Mo/illa ODP a*plia*ente ,ono,ido. ,on el proto,olo +3P 5 ileHilla O7P e una olu,i&n +3P li-re ve,toriale 5 In<scape O(P el ,ual e i*ilar al o2t;are ,o*er,ial Illustrator0

ree.and0 CorelDra5 o Fara F. @uarda lo gr2i,o u ando el e tndar Scalable Gector Grap.ics

Progra*a para ,o*uni,a,ione

2or*ada por do progra*a 5 un ,liente +3P y un ervidor +3P. Co*pre or69e ,o*pre or li-re5 (zip O10P er 1til para de ,o*pri*ir la in tala,i&n de alguno CA$ y para ha,er ,opia de eguridad del tra-ajo realizado. )l ,o*pre or M8P in,orporado ,on A$Hindo; ,arpeta . Ftro re,ur o li-re e intere ante para el de arrollo del ,ur o5 @alerEa li-re de i*gene ve,toriale 5 CpenClipart0 O11P in,luye ver i&n de ,arga-le e In<scape trae in,luido un enla,e dire,to ,on e te itio. @alerEa de 2oto li-re 5 Cpenp.oto O12P entre otra 2un,ionalidade per*ite -ajar la 2otogra2Ea a di2erente re olu,ione 0 evitando tener que editarla ,on el editor de i*gene . F$H95 Fpen $our,e He- 9e ign O1'P e una galerEa de plantilla li-re para u u o en itio He-. Realizare*o *&dulo. alguna prue-a ,on la herra*ienta de ,rita en la iguiente e,,ione de e te C3AB y hoja de e tilo C$$ tiene alguna de2i,ien,ia y no ,onviene u arlo0 e pueden perder ar,hivo y

4.1. Navegador Firefox


+ire2o4 e el navegador de la 2unda,i&n Aozilla ODP0 2unda,i&n in ni*o de lu,ro dedi,ada a la

,rea,i&n de o2t;are li-re. ) te navegador e uno de lo proye,to de o2t;are li-re * ,ono,ido y utilizado a nivel *undial. Ba gran ventaja que pre enta 2rente a eguridad. u ,o*petidore 0 tanto ,o*er,iale ,o*o li-re 0 e la 2a,ilidad de a*pliar u 2un,ionalidad ,on ,o*ple*ento y un -ajo n1*ero de 2allo de

-*

Modulo -a 3 Internet 1 So4t5are Libre

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

9e entre la *ultitud de ,o*ple*ento de ta,an e4,elente herra*ienta para de de arrollo He- que e enu*eran a ,ontinua,i&n. Ba in talare*o para poder tra-ajar ,&*oda*ente en lo on5 di eGo Herealizado en ,ada CA$ e tudiado en el ,ur o. ) to ,o*ple*ento re,o*endado

+ire-ug5 Para de ,ri-ir e ta herra*ienta e ne,e itarEa dedi,ar un *&dulo del ,ur o. $e utilizar de *anera ,ontinuada a lo largo del ,ur o y e ir adquiriendo ha-ilidad en u *anejo. ) di2E,il en,ontrar de arrolladore He- que no la utili,en. Colorzilla5 Captura ,olore de ,ualquier He-0 trae un ele,tor ,olor y enlaza ,on un generador de gradiente C$$'. $,reengra-5 Captura pantalla en +ire2o40 e la herra*ienta ,on la ,ual e han ,apturado toda la i*gene de lo do,u*ento de e te ,ur o. T+. Co*prue-e la ver i&n del navegador +ire2o4 in talada en u equipo a,,ediendo al *en1 de

+ire2o4 .yuda U .,er,a de Aozilla +ire2o4. $i no tiene in talada 1lti*a ver i&n re,i-ir un avi o.. T+.1. .,,eda en +ire2o4 al *en1 Cerra*ienta U Co*ple*ento . T+.2. )n la parte lateral izquierda ele,,ione )4ten ione e in tale la ' e4ten ione enu*eraT da 0 u e el -u ,ador in,orporado para en,ontrarla . T+.3. Reini,ie +ire2o4 y 2Eje e en lo nuevo i,ono que han apare,ido en la e quina in2erior y uperior dere,ha del navegador0 1 elo para la iguiente tarea .

T+.#. #tili,e Color/illa o-re una pgina He- para o-tener el ,&digo de ,olor de 2ondo0 u e el zoo* para ,apturar ,on pre,i i&n. T+.(. #tili,e Screen6rab para o-tener una i*agen ,o*pleta de una pgina He-0 de-e ,apturar in,lu o la zona de la pgina no vi i-le en el navegador.

4.2. Editor de textos Note ad!!


=otepad?? e un editor para ,&digo 2uente de ,ar,ter general y tiene li,en,ia @PB. ) t pen ado para tra-ajar ,on ,ualquier lenguaje de progra*a,i&n o de etiqueta 0 ,o*o e C3AB o C$$. $e puede de ,argar de de la dire,,i&n indi,ada en O:P o u ar la ver i&n in,luida ,on el *&dulo. $e in talar y e realizarn alguna prue-a . T). 8n tale el editor te4to apli,a,i&n =otepad??. T).1. .,,eda al *en1 Plugin U =pp+3P y a,tive la op,i&n $ho; =pp+3P Hindo;. 9e-e a,tivo . #tili,e el -ot&n $etting y =otePad?? ,on la op,ione por de2e,to de in tala,i&n. 8ni,iar la

apare,er un panel lateral ,on el ,liente +3P y do -otone

apare,er un *en10 ele,,ione la op,i&n del *en1 de plega-le Pro2ile etting . T).2. Ba nueva ventana per*ite ,on2igurar ,one4ione "ass5ord. # e lo dato +3P a ervidore re*oto 6lo,ale . Cree

una nueva ,one4i&n al ervidor de prue-a de 8nternet rellenando lo dato 5 :ostna!e0 $ser y u*ini trado ,on la do,u*enta,i&n del ,ur o.

Modulo -a 3 Internet 1 So4t5are Libre

-+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T).3. 9e ,argue el 2i,hero pri!eraIpa6ina./ip y de ,o*pri*a el 2i,hero0 ,ontendr un 1ni,o 2i,hero lla*ado inde@..t!l. .-ra el 2i,hero ,on =otepad?? utili,e el -ot&n #pload +ile de la -arra de herra*ienta de =pp+3P. Co*prue-e en el navegador que la pgina e *ue tra en 8nternet navegando a la dire,,i&n .ttpJDDsu3no!bre3de3do!inio8 e de,ir0 el no*-re do*inio de prue-a per onal di poni-le en u do,u*enta,i&n del ,ur o. T).#. Prue-a a a,tivar la ,one4ione egura en Conne,tion type0 pero *anteniendo ie*pre la

,one4i&n al puerto 21. VCual de ella 2un,ionaW #tilizare*o e te editor de te4to ,o*o predeter*inado en Hindo; para alguno tipo de 2i,hero. Cay que eguir e to pa o 5 T-. )n el *en1 Con2igura,i&n U Pre2eren,ia apare,e un dilogo ,on varia pe taGa y ,on toda la op,ione de =otepad??. )n la pe taGa . o,ia,i&n de ar,hivo apare,en do ,uadro de ele,,i&n donde e re,o*ienda -u ,ar la e4ten ione .php0 .t4t y ., la izquierda. . lo largo del ,ur o editare*o lo,alizar ,&*oda*ente lo ,ontinua*ente 2i,hero a travQ de te4to para realizar *odi2i,a,ione . Para e re,o*ienda realizar la y aGadirla ,on -ot&n R"!S al ,uadro de

ar,hivo

del no*-re y la e4ten i&n

iguiente ,on2igura,i&n en el e4plorador de Hindo; 5 T9. 9e de el *en1 de ini,io de Hindo; a-ra la ventana AiPC. $ele,,ione el *en1 de Cerra*ienta U Fp,ione de ,arpeta *o trado en la 2igura 20 en ,a o de Hindo; ZP. T9.1. )n la nueva ventana a,,eda a la pe taGa Ver y ,a*-ie la op,ione -ajo el no*-re Con2igura,i&n .vanzada5 iguiente op,ione en la li ta de

i6ura ;. Con4i6uracin del ad!inistrador de arc.i%os de Windo5s F".

-K

Modulo -a 3 Internet 1 So4t5are Libre

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura '. Con4i6uracin del ad!inistrador de arc.i%os de Windo5s +

9e a,tive la ,a illa F,ultar la e4ten ione de ar,hivo para tipo de ar,hivo ,ono,ido $ele,,ione la op,i&n Ao trar todo lo ar,hivo y ,arpeta o,ulto . T9.2. $i e t utilizando Hindo; ( la para llegar a e ta ,on2igura,i&n de-e a-rir )quipo de de el *en1 de ini,io0 en la nueva ventana de plegar el *en1 Frganizar y ,arpeta y -1 queda0 puede verlo en la 2igura '. ele,,ionar Fp,ione de

4.3. "#iente F$P Fi#e%i##a


.unque ,on e te editor de te4to ,a o e ne,e ario *a iva tran 2eren,ia +3P. ) te e de 2i,hero e puede tra-ajar o-re lo 2i,hero re*oto 0 en la *ayorEa de lo +3P orientado a a lo ervidore e

u-ir gran ,antidad de 2i,hero . Para ello0 e4i ten ,liente

el ,a o de +ilezilla0 ,on el que iguiente tarea 5

propone realizar la

T11. 8n tale el ,liente +3P +ilezilla ,on la ,on2igura,i&n de in tala,i&n por de2e,to. )je,1teT lo y ,on2igure un nuevo itio +3P de de el *en1 .r,hivo U @e tor de ,one4i&n ea egura. T11.1. $u-a la pgina H)L ,o*pleta de
i6ura (. Con4i6uracin ," se6ura con 4ile/illa.

itio . #tili,e la ,on2iT

gura,i&n indi,ada en la 2igura : para que la

alguna de la do plantilla de eje*plo5 pets3

Modulo -a 3 Internet 1 So4t5are Libre

-L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

5ebsite./ip o or6anic34ar!./ip. =avegue a u do*inio para ver i el itio He- 2un,iona ,orre,taT *ente.

4.4. Editor de im&genes 'I(P


Para reto,ar la ,ualquier otro i*gene e propone la herra*ienta Gi!p de @=#. Real*ente e realizarn la iguiente tarea . e puede utilizar

o2t;are pue to que el ,ur o no e t orientado al trata*iento digital de i*gene .

#tilizando Gi!p o ,ualquier otro editor de i*gene

T11. Aodi2ique en el equipo lo,al alguna de la i*gene de la plantilla que e ha tran 2erido al ervidor de 8nternet y guarde lo ,a*-io i*agen. T11.1. #tili,e el ,liente +3P para tran 2erir la i*agen *odi2i,ada de nuevo al 8nternet. Co*prue-e i lo ,a*-io itio He- de in ,a*-iar ni el no*-re0 ni el 2or*ato del 2i,hero de la

e vi ualizan en el navegador re,argado la pgina.

2+ Reali3a"i4! o/"io!al
Ftro progra*a 1tile en e te ,ur o on el ervidor +3P ile/illa Ser%er y el editor de i*gene ve,toriale In<scape. T12. 9e ,argue e in tale el ervidor +3P ile/illa Ser%er.

T12.1. Con2igure nuevo u uario para que puedan a,,eder a alguna ,arpeta del equipo lo,al. T12.2. Co*prue-e el a,,e o de de otro ordenador del aula. T12.3. Ca*-ie lo per*i o a lo u uario para que puedan e ,ri-ir en u 2i,hero . T12.#. Co*prue-e i de de otro equipo e puede a,,eder ,on 0otepadEE a lo 2i,hero del

ordenador re*oto y e pueden *odi2i,ar. T13. 9e ,argue In<scape e in tlelo. T13.1. Prue-e de de lo *en1 de In<cape la op,i&n de -u ,ar e i*portar di-ujo ve,toriale de de CpenClipMrt. T13.2. Prue-e a e4portar lo di-ujo ve,toriale de ,argado a 2i,hero de i*agen a di2erente re olu,ione . Prue-e de de '2 pi4el re ultado . de an,ho ha ta >:0 pi4el de an,ho y ,o*prue-e lo

5+ Li"e!"ia, de So(#)a&e Li*&e


.nte de ter*inar e te *&dulo e i*portante ,o*entar alguno a pe,to o-re la li,en,ia 0 o-re todo en la parte ,on,erniente al o2t;are. )n prin,ipio una ,rea,i&n ie*pre e t -ajo un ,opyright por de2e,to ,on el que nadie puede ,opiar0 di tri-uir0 ,o*uni,ar0 ,a*-iar una o-ra in el per*i o del autor. ) te ,opyright e -a tante re tri,tivo y por ello apare,en nueva 2or*a de li,en,ia ,on el 2in de au*entar la po i-ilidade de di tri-u,i&n0 o-re todo en 8nternet.

;2

Modulo -a 3 Internet 1 So4t5are Libre

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)l prin,ipal o-jetivo de la li,en,ia li-re e evitar el tener que pedir el ,on enti*iento previo del autor ante de utilizar u o-ra0 pero a u vez0 la li,en,ia deja ,laro ,uale ataGe a e te ,ur o la li,en,ia e re2erirn a do,u*ento o a progra*a on la li*ita,ione de u o de la o2t;are. Para o-ra e ,rita el o-ra. )l tipo de li,en,ia e t Enti*a*ente rela,ionado ,on el tipo de o-ra del que e trate0 en lo que *ovi*iento open <no5led6e e ta-le,e uno prin,ipio para ,on iderar una o-ra li-re y en el o2t;are ree So4t5are oundation J+$+K e el lugar de re2eren,ia. Para e to do ,a o la li,en,ia li-re * ,ono,ida para o-tener * in2or*a,i&n al re pe,to. )n la red e pueden en,ontrar tanta li,en,ia ,o*o o2t;are. Ba e4i ten,ia de *ultitud de li,en,ia li-re tiene u origen en la atri-u,ione que ,ada autor de ea dar a on lo iguiente 5 u o-ra. Bo plantea*iento ha-ituale a la hora de e ,oger una li,en,ia u otra e puede la o-ra redi tri-uir0 on Mttribution de Creati%e Co!!ons O1:P para

o-ra e ,rita y G0$ General "ublic License O1<P de +$+ para o2t;are. Puede ,on ultar la re2eren,ia

*odi2i,ar0 vender0 utilizar ,o*o parte de otra o-ra0 e o-ligatorio *en,ionar la autorEa del tra-ajo0 et,. 8n,lu o e4i ten li,en,ia que ,onte*plan que0 en ,a o de 2or*ar parte de otra o-ra0 la o-ra derivada de-e tener la *i *o tipo de li,en,ia. Co*o eje*plo de la variedad de li,en,ia e4i tente utilizado a lo largo del ,ur o. Licencia% u%ada% ) te do,u*ento +ire2o4 =otepad?? +ilezilla H.AP $erver Ay$IB .pa,he PCP 9o/uHi/i AediaHi/i $i*ple Aa,hine +oru* )groupHare Aanti Lug 3ra,/er Pre ta hop HordPre %oo*la 9rupal Plone $hare"ali/e [ Creative Co**on Aozilla Pu-li, Bi,en e JAPBK @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK .pa,he $o2t;are Bi,en e PCP Bi,en e @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK Ler/eley $o2t;are 9i tri-ution Bi,en e JL$9K @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK Fpen $o2t;are Bi,en e JF$BK @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK @=# @eneral Pu-li, Bi,en e J@PBK
,abla ;. Licencias del !aterial utili/ado en este curso.

e *ue tra en la ta-la 2 la li,en,ia del *aterial

Modulo -a 3 Internet 1 So4t5are Libre

;-

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$odulo 1* % 6T$L ' CSS


Conceptos bsicos de %T&'( y de %ojas de estilo en cascada C))*

1+ Re,u-e!
9ura,i&n e ti*ada5 ' hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero ,a-e,era .zip , .zip 3e%cri/cin )je*plo - i,o de pgina C3AB +i,hero para tra-ajar ,on C$$ Pgina He- para pr,ti,a ,on el *odelo de ,aja . )je*plo e u o de *edida a- oluta y relativa . )je*plo de u o de tipogra2Ea

,aja .zip *edida .zip tipogra2ia .zip

pet ";e- ite.zip +i,hero ,o*pri*ido ,on un plantilla He- li-re


,abla '. ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O1>P 3he Horld Hide He- Con ortiu*0 H'C0 <http566;;;.;'.org!. 3a*-iQn di poni-le en5 <http566;;;.;',.e !. O1(P Fpen $our,e He- 9e ign JF$H9K0 +ran,i %. $/ettino0 <http566;;;.o ;d.org6!. O1DP H'$,hool .,o*0 Re2 ne 9ata0 <http566;;;.;' ,hool .,o*6!. O17P 8ntrodu,,i&n a C$$0 )guEluz PQrez0 %avier0 8 <http566;;;.li-ro ;e-.e 6, 6!.

.+ I!#&odu""i4!
)l lenguaje C3AB J:1per,e@t Mar<up Lan6ua6eK e el utilizado para ,rear pgina He- y e un

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

lenguaje *uy 2,il de aprender. ) te ,ur o o-re @e tore de Contenido e t orientado a *ini*izar el u o de C3AB0 pero una no,ione - i,a ayudarn a ,o*prender *ejor el 2un,iona*iento de un itio He-. .de* 0 para poder per onalizar ,o*pleta*ente ,ada uno de lo inta4i . $o-re el lenguaje C3AB e4i te gran ,antidad de literatura donde e puede ,on ultar u origen y itio ,reado e de-e ,o*prender al *eno la e tru,tura del lenguaje C3AB0 aunque no e ,onoz,a en pro2undidad toda u

evolu,i&n a lo largo de u di2erente ver ione . =o e entrar en detalle pero e i*portante ,ono,er la e4i ten,ia de un organi *o en,argado de la e tandariza,i&n de la te,nologEa rela,ionada ,on el Hella*ado ,.e World Wide Web Consortiu! JH'CK O1>P0 Q te e un ,on or,io interna,ional ,uyo dire,tor e pre,i a*ente el ,reador de C3AB0 3i* Lerner "Bee. 3anto el lenguaje C3AB ,o*o la hoja de e tilo en ,a ,ada C$$ JCascadin6 St1le S.eetsK e tn e tandarizada por H'C. )n la pri*era ver ione del lenguaje C3AB una pgina e ,rita en e te lenguaje in,luEa5 el ,ontenido a pre entar0 la e tru,tura del do,u*ento y el 2or*ato de la pre enta,i&n de ,ada ele*ento Jta*aGo0 ,olore 0 et,.K. )l di eGo de pgina He- ,on e ta e pe,i2i,a,ione tiene un e2e,to perver o en el ,&digo C3AB re ultante0 llegando a pgina He-0 e de,ide er total*ente ininteligi-le y re ultando i*po i-le de *antener o *odi2i,ar. )n ,ualquier de arrollo in2or*ti,o epara en ,apa el i te*a a ,on truir0 y apli,ado a la eparar todo el ,&digo pertene,iente a la pre enta,i&n del ,ontenido del eparada del ,&digo C3AB do,u*ento. . E apare,en la :o9as de Estilo en Cascada C$$ que on regla

en,argada de indi,ar al navegador ,o*o pre entar la pgina Jver 2igura <K.

i6ura ). E%olucin del len6ua9e :,ML.

Ba hoja de e tilo en ,a ,ada C$$ on una herra*ienta 2unda*ental para lo di eGadore He-. 3ienen *u,ha ventaja 2rente al de arrollo ,on &lo C3AB0 alguna on5 itio en el ,&digo C$$

Centraliza,i&n de todo el ,&digo rela,ionado ,on la pre enta,i&n del 2a,ilitando u *odi2i,a,i&n.

$e puede ,on*utar el ar,hivo C$$ ,on iguiQndo e au*entar la a,,e i-ilidad0 ,&digo C$$ di2erente para per ona ,on de2i,ien,ia vi uale .

e puede u ar

;(

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)l ,&digo C3AB re ultante e *u,ho * legi-le al e tar el ,&digo C$$ eparado. $e pueden ,on*utar la hoja de e tilo eg1n el di po itivo utilizado0 generando di2erente ver ioT ne de la *i *a pgina por eje*plo0 ver i&n i*pre a o ver i&n *&vil. C$$' *ejora a pe,to gr2i,o ,o*o on -orde redondeado 0 gradiente 0 o*-ra 0 et,. 9e la ver ione e4i tente 0 a,tual*ente e po i-le tra-ajar ,on C3AB< y C$$' al er oportado por una a*plia ga*a de navegadore H)L. . 2e,ha de hoy Jjunio de 2012K C3AB< no tiene ,o*pletada u e pe,i2i,a,i&n pero la parte ter*inada on oportada por la *ayorEa de lo navegadore H)L.

. lo largo del ,ur o e ver ,o*o todo lo CA$ utilizan C$$ para ,ontrolar la pre enta,i&n del itio He- y 2a,ilitar al ad*ini trador el ,a*-io de la pre enta,i&n in ne,e idad realizar *odi2i,a,ione en el ,&digo del CA$.

1+ Le!7uaje 6T$L
Ba e tru,tura del lenguaje C3AB e -a a en la etiqueta . \ ta etiqueta rodean el ,ontenido que e quiere *o trar0 y utilizada *o trado. ) ta in2or*a,i&n ,orre,ta*ente0 ,ontienen in2or*a,i&n iguen el iguiente 2or*ato5 Contenido e*nti,a o-re el ,ontenido on5 e*nti,a ha,e re2eren,ia a la e tru,tura del do,u*ento ,o*o

,a-e,era 0 prra2o 0 et,. ) ta etiqueta

Gstrong5 *op,right Ncop,O 2011 ,o mismo G/strong5

)tiqueta

Car,ter e pe,ial
i6ura *. or!ato de una etiBueta :,ML.

+in de etiqueta

Ba

etiqueta

C3AB ,on i ten en un no*-re de etiqueta rodeada de lo

,ara,tere

*ayor6*enor5

Nno!breIetiBuetaO. 3oda etiqueta tiene un punto de apertura y otro de ,ierre0 el ,ierre e di2eren,ia en la apertura en el ,ar,ter ]6]0 por eje*plo el ,ierre de la anterior e NDno!breIetiBuetaO. )n navegador He- *ue tra el ,ontenido de la etiqueta pero no la etiqueta . ) ta etiqueta ,orre ponden ,on la in2or*a,i&n etiqueta e*nti,a del C3AB0 y e anidan para e ta-le,er una jerarquEa en el do,u*ento. )l ea ,orre,to hay que anida*iento de etiqueta ,on i te en ,ontener una dentro de otra y e ,on igue a-riendo una nueva in ha-er ,errado la anterior previa*ente. Para que un do,u*ento re petar un orden en la apertura y ,ierre de etiqueta de-e er la pri*era en ,errar e. #n do,u*ento C3AB tiene una e tru,tura prede2inida *Eni*a 2or*ada por do ,a-e,era. )l ,ontenido de ,ada una de e ta parte *ue tra el *Eni*o ,ontenido que tendrEa*o en una pgina. parte 5 ,uerpo y iguiendo e ta regla5 la 1lti*a etiqueta en a-rir e

2or*an la pgina He-0 el eje*plo de ,&digo :

Modulo -b 3 :,ML 1 CSS

;)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa GP0K*?E"8 <?M@5 G<?M@5 G<8705 G?6?@85Mi primera pagina <?M@G/?6?@85 G/<8705 GHK0E5 G<15Mi "rimera paginaG/<15 G<= /5 G"5 8sta primera p9gina tiene mu, poco contenido. G/"5 G/HK0E5 G/<?M@5 Cdi6o (. M?ni!a pA6ina :,ML) de e9e!plo.

)n e te eje*plo e o- erva ,o*o toda la pgina C3AB e t rodeada del par de etiqueta del ,uerpo er lo que e *ue tre en el rea de vi ualiza,i&n del =avegador He-.

G<?M@5 ...

G/<?M@5 y la do parte que 2or*an la pgina on G<8705 ... G/<8705 y GHK0E5 ... G/HK0E5. )l ,ontenido

T1#. Copie el 2rag*ento de ,&digo : en un nuevo 2i,hero en 0otepadEE y gurdelo ,on el no*-re pa6ina..t!l en alguna ,arpeta Jpor eje*plo Mis Docu!entosK. .hora a-ra el 2i,hero ,on el e4plorador de 8nternet0 utilizando el *en1 de +ire2o4 .r,hivo U .-rir ar,hivo tendr que lo,alizar la ,arpeta donde guardo el ar,hivo. 9e la *ultitud de etiqueta J10< en C3AB< a 2e,ha de junio 2012K a lo largo del ,ur o pre tare*o e pe,ial aten,i&n a la )tiqueta iguiente 5 a > nivele en un do,u*ento e tru,turado de de

para ,a-e,era 5 Corre pondiente

G<15...G/<15 ha ta G<'5...G/<'5.

)tiqueta de prra2o5 Contendrn lo prra2o del te4to0 G"5...G/"5. )tiqueta de enla,e 5 $on lo hipervEn,ulo en C3AB y u an la etiqueta G7 href>Q...Q5...G/75. )tiqueta de li ta 5 Cay di2erente tipo de li ta en C3AB y e utilizan vario tipo de etiqueta 5
GM@5 G@65Mn 3olo G/@65 G@65Ktro 3olo G/@65 G/M@5 Cdi6o ). Lista desordenada. GK@5 G@65Mn numero G/@65 G@65Ktro numero G/@65 G/K@5 Cdi6o *. Lista ordenada.

)tiqueta para i*gene 5 Con ella

e pueden in,luir gr2i,o en la pgina 0 e G6MR src>Q...Q /5


G?7H@85 G?=5 G?051B1G/?05 G?051B2G/?05 G?051B3G/?05 G/?=5 G?=5 G?052B1G/?05 G?052B2G/?05 G?052B3G/?05 G/?=5 G/?7H@85 Cdi6o +. ,abla :,ML.

)tiqueta para ta-la 5 Ba ta-la en C3AB e ha,e ,on un ,onjunto de etiqueta que de2inen la ta-la 2ila por 2ila y ,olu*na por ,olu*na. $e utilizan la etiqueta *o trada en el ,&digo (. Ftro ,on,epto i*portante en C3AB y ne,e ario para tra-ajar a lo largo de e te ,ur o ve,e 0 in,lu o e on lo atributos e4i tente en la etiqueta C3AB. Cualquier etiqueta C3AB puede ,ontener una li ta de atri-uto 0 algunga o-ligatorio utilizar atri-uto ,o*o o,urre ,on lo

;*

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

enla,e y la i*gene . ) to atri-uto apare,en en la etiqueta de apertura y van eparado del no*-re de la etiqueta y de otro atri-uto por un e pa,io. )l 2or*ato e4a,to e *ue tra en la 2igura ( ,on un eje*plo de tre atri-uto . Con,reta*ente0 ,ada atri-uto en C3AB tiene un no*-re y un valor a o,iado0
nom3reSatri3uto > T2alor del atri3utoU Jel no*-re el atri-uto no ad*ite e pa,io K.

iendo la

inta4i

$e di tinguen do tipo de atri-uto para la etiqueta C3AB5 glo-ale y e pe,E2i,o . Bo glo-ale ad*iten otra etiqueta e pe,E2i,a . )l ,a o de la etiqueta utilizada para in,luir hipervEn,ulo e i*gene e

pueden in,luir en ,ualquier etiqueta C3AB. .lguna etiqueta C3AB0 ade* de ad*itir la glo-ale 0

un eje*plo de atri-uto

e pe,E2i,o . Para la i*gene e o-ligatorio u ar el atri-uto src indi,ando la i*agen a *o trar0 y para enla,e 0 el atri-uto .re4 indi,a la dire,,i&n ha,ia donde ir para eguir el enla,e. )n el eje*plo de ,&digo D e *ue tran lo atri-uto e pe,E2i,o de la etiqueta Ga5 e Gimg5 JhipervEn,ulo e i*gene K. F- erve ,o*o ade* de atri-uto e pe,E2i,o J.re4 y srcK a*-a etiqueta llevan el atri-uto glo-al title.
Cierre de etiqueta e3 G/a5

.pertura de etiqueta

Contenido

Ga href>Uhttp://www.us.esU title>UMni2ersidadU class>Uenlace.e4ternoU5 "ortal

.tri-uto e pe,E2i,o

.tri-uto glo-ale

.tri-uto

Valor del atri-uto

i6ura +. Mtributos en las etiBuetas :,ML.

G7 <=8D>Qhttp://www.us.esQ title>VMni2ersidadV5Mn enlaceB pulsameG/75 G6MR 1=*>Qlogo.jpgQ title>V@ogotipo de la Mni2ersidadV/5 Cdi6o K. Mtributos para las etiBuetas M e IMG.

T1(. )dite de nuevo el 2i,hero pa6ina..t!l ,on =otepad?? y aGada lo 2rag*ento de ,&digo <0 > y (. T1(.1. .hora de ,argue de 8nternet alguna 2otogra2Ea en 2or*ato .9p6 y reno*-re el ar,hivo a lo6o.9p6. Copie e te ar,hivo en la *i *a ,arpeta donde tiene el ar,hivo pa6ina..t!l. T1(.2. .Gada el 2rag*ento indi,ado en el ,&digo D al 2i,hero pa6ina..t!l y ,o*prue-e i apare,e la i*agen en el navegador. Para que el navegador re2leje lo ,a*-io realizado en la pgina Hede-e re,argar la pgina. T1+. #tili,e 2i,hero cabeceras./ip y de ,o*pri*a lo ar,hivo en una nueva ,arpeta. .-ra el 2i,hero cabeceras..t!l ,on el editor 0otepadEE y reali,e lo iguiente ,a*-io 5

T1+.1. Lu que en el ,&digo un 2rag*ento de te4to ,orre pondiente a un prra2o Jetiqueta G"5K. 8ntente eparar do pala-ra de un prra2o por *u,ho e pa,io 0 guarde el 2i,hero y vi ulalE,elo

Modulo -b 3 :,ML 1 CSS

;+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,on el navegador He-. T1+.2. 8ntente ahora in ertar vario lo re ultado . T1+.3. $epare el te4to de un prra2o en do prra2o di2erente aGadiendo etiqueta de apertura y ,ierre de prra2o G"5 y G/"5 T1+.#. Prue-e aGadir la etiqueta G3r /5 *1ltiple ,o*prue-e el re ultado en el navegador He-. T1). =avegue a la dire,,i&n http566;;;.;'.org6 tandard 6;e-de ign6ht*l, . ) ta e una pgina de ve,e entre do pala-ra de un prra2o y alto de lEnea en un prra2o y vi uali,e en el navegador He-

introdu,,i&n a C3AB y C$$ de H'C. 9e pliegue el *en1 Ver de la -arra de *en1 de +ire2o4 y utili,e la entrada de *en1 C&digo 2uente de la pgina0 alternativa*ente puede pul ar CF=3RFB?#.

2+ 6oja, de e,#ilo, e! "a,"ada CSS


Ba igla C$$ on a,r&ni*o de Cascadin6 St1le S.eets y e un lenguaje de te4to donde e e pe,i2i,a el a pe,to de una pgina C3AB. Per*ite e pe,i2i,ar la di po i,i&n de ele*ento 0 tipogra2Ea de te4to0 ,olore y ade* 0 alternativa de a pe,to para di2erente di po itivo 5 ordenadore 0 *&vile 0 i*pre oT ra 0 et,. ) te lenguaje ha ido e pe,i2i,ado por el ,on or,io H'C ,on el o-jetivo de eparar el ,ontenido de un do,u*ento de la pre enta,i&n. Con la apari,i&n de C3AB< el o-jetivo ha NcenterO0 et,. )l u o de hoja de e tilo 2a,ilita enor*e*ente el de arrollo y *anteni*iento de ito He-. 3oda la ido eli*inar de C3AB:6ZC3AB toda la etiqueta re2erente a la pre enta,i&n del ,ontenido ,o*o on5 N4ontO0 Nbi6O0

in2or*a,i&n o-re el a pe,to de un itio He- queda ,entralizado y e 2,il lo,alizar donde realizar lo ,a*-io y ,a*-iar la aparien,ia de la pgina . .de* 0 2a,ilita la ho*ogeneidad en la pre enta,i&n de toda la pgina de un itio He-0 ya que un ,a*-io de e tilo0 a2e,ta a toda la pgina vin,ulada ,on Q to e tilo . Ca-itual*ente la in i tire*o hoja de e tilo lo on 2i,hero eparado del ,&digo C3AB. . lo largo de ,ur o de e tilo eparada del ,&digo

en realizar todo

,a*-io

de a pe,to *ediante hoja

C3AB y nun,a en el *i *o 2i,hero donde re ide el ,&digo C3AB. .unque C3AB per*ite in,luir C$$ en el propio C3AB o en la propia etiqueta un -uen di eGador de-e evitar u u o0 e ta pr,ti,a no e una -uena olu,i&n. )n todo lo CA$ en,ontrare*o e ta hoja de e tilo en 2i,hero ,on la e4ten i&n .css y eparada del ,&digo C3AB. )n el ,&digo C3AB e vin,ulan lo 2i,hero que ,ontienen lo e tilo *ediante la etiqueta NS,PLEO. ) ta etiqueta de e tilo &lo pueden apare,er en la ,a-e,era de un do,u*ento C3AB y irven para vin,ular pgina He- ,on hoja de e tilo J2i,hero eparado K. )4i te un otro *Qtodo de vin,ular hoja e *ue tran en el ,&digo 7. de e tilo *ediante la etiqueta NLI0QO0 a*-o *Qtodo

;K

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa <style t,pe>Vte4t/cssV media>VscreenV> @import VunaShojaSdeSestilo.cssVO @import url)VotraShojaSdeSestilo.cssV+O </style> <link rel>Vst,lesheetV t,pe>Vte4t/cssV href>Vhoja2.cssV media>VscreenV /> Cdi6o L. Ginculacin de una pA6ina Web con una .o9as de estilos.

).1. *eg#as "SS


Ba hoja de e tilo e ,on truyen *ediante un ,onjunto de regla e ,rita en te4to. )l 2un,iona*iento - i,o e puede re u*ir ,o*o igue5 Ba hoja de e tilo e tn 2or*ada por un ,onjunto de regla e ,rita de *anera ordenada0

ha-itual*ente en 2i,hero de te4to. Ba regla e apli,an a un ele,tor y e4i ten di2erente tipo de ele,tore . e re uelven dando ,o*o vlida la 1lti*a regla.

)n ,a o de ,on2li,to entre regla

#na regla e t 2or*ada por un ele,tor o ele,tore 0 y un ,onjunto de propiedade entre llave por punto y ,o*a JvQa e 2igura DK. Bo a2e,tado por la regla0 y lo atri-uto eparada ele,tore

h1 Wfont.siLe:1&0CO color:3lacXOY

ha,en re2eren,ia a ele*ento del do,u*ento C3AB indi,an el a pe,to de eado para la etiqueta ele,,ionada .

$ele,tor

Propiedade

i6ura K. or!ato de una re6la CSS.

)4i ten ,er,a de '00 atri-uto di2erente para apli,ar en ,ada regla aunque a lo largo del ,ur o no e ,u-ran todo 0 er 2,il de entender el 2un,iona*iento de lo re tante una vez ,o*prendida la hoja C$$. Ba ,lave para ,on eguir que un itio He- tenga el a pe,to de eado e t en el u o ade,uado de la regla C$$ a E0 el o-jetivo er identi2i,ar aquella parte de una pgina He- a la que e de ea ,a*-iar el a pe,to y ,on eguir0 *ediante ele,tore 0 per onalizar ,o*pleta*ente ,ada ele*ento del itio He-.

).2. Se#ectores
Bo ele,tore per*iten alterar el a pe,to del ,ontenido de la etiqueta e4i tente en el ,&digo

C3AB de una pgina He-. 9urante el di eGo He- e 2unda*ental e ,oger un ele,tor ade,uado para la regi&n de la pgina que e de ea alterar. C$$ ,onte*pla vario tipo de ele,tore y per*ite ,o*-inar *u,ho on5 de ello entre E pudiendo

apare,er ele,tore real*ente ,o*plejo . Bo tipo de ele,tore

$ele,tor univer al5 )l ,ar,ter ]^] ha,e re2eren,ia a todo lo ele*ento de la pgina. #na regla de e te tipo a2e,ta a todo lo ele*ento de una pgina He-. $ele,tore de tipo o etiqueta 5 Ca,en re2eren,ia a la etiqueta e4i tente en C3AB. Ba regla e apli,arEa a toda la etiqueta C3AB que ,oin,idan ,on el ele,tor. Por eje*plo0 la regla p

Modulo -b 3 :,ML 1 CSS

;L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa Wcolor:redOY e ta-le,e el ,olor rojo para todo lo prra2o de la pgina.

$ele,tore de ,la e 5 . ignan e tilo ele,tor. ) te un punto R.S.


.destacado W 3acXground.color: ,ellowO color:redO Y .normal W color:3lacXO Y Cdi6o -2. De4inicin de clases CSS.

&lo a la etiqueta C3AB ,uyo atri-uto class ,oin,ida ,on el etiqueta C3AB tengan

ele,tor e

el utilizado para ,on eguir que alguna

di2erente a pe,to . #n ele,tor de ,la e e ,on truye indi,ando el no*-re de ,la e pre,edido de

Gp class>VdestacadoV5 8ste te4to est9 destacado con fondo amarillo G/p5 Gp class>VnormalV5 8ste te4to tiene la letra en negroG/p5 Cdi6o --. EtiBuetas :,ML con selectores de clase.

$ele,tore 895 +un,ionan de 2or*a pare,ida a lo

ele,tore de ,la e0 pero ele,,ionan un 1ni,o

ele*ento de todo el ,&digo C3AB. #na etiqueta C3AB puede ir a,o*paGada de un atri-uto 89. )l valor 89 de-e er 1ni,o en todo el do,u*ento C3AB0 e de,ir0 no pueden e4i tir * etiqueta ,on el *i *o 89. Por tanto0 una regla para un ele,tor de tipo 89 &lo e apli,a una vez en todo el do,u*ento C3AB. ) te tipo de regla ,o*ienzan ie*pre por el ,ar,ter _.
#bloque-noticias W 3order:1p4 solid 3lacXO Y Cdi6o -;. De4inicin de clases CSS. Gdi2 id>Vbloque-noticiasV5 Gh25Mna noticiaG/h25 Gp5?odas las noticias aAuiG/p5 G/di25 Cdi6o -'. EtiBuetas :,ML con selectores de clase.

.nte de ,ontinuar ,on * tipo de ele,tore preparado di2erente regla

e realizarn una prue-a

o-re do,u*ento C3AB ya C$$. $eg1n e utili,en

para ,o*prender *ejor el 2un,iona*iento de lo

ele,tore

e irn introdu,iendo di2erente atri-uto para ,ono,er u 2un,iona*iento.

T1-. 9e ,o*pri*a el 2i,hero css./ip en una ,arpeta va,Ea de u di ,o. T1-.1. )ntre en la ,arpeta y edite i*ultnea*ente en =otepad?? lo 2i,hero pa6ina3te@to..t!l y estilos3te@to.css. T1-.2. Vi uali,e el ,&digo C3AB en =otepad??0 utili,e el *en1 )je,utar U Baun,h in +ire2o4 y ,o*prue-e ,o*o e vi ualiza el ,&digo C3AB en el navegador. T1-.3. $in ,errar +ire2o40 vuelva al editor =otepad?? y ,a*-ie el ,ontenido de la ,a-e,era C1. Vuelva a +ire2o4 y ,o*prue-e que el te4to olo ,a*-iar ,uando utili,e el -ot&n de re,argar la pgina. Re,uerde utilizar re,argar durante todo el ,ur o ,ada vez que reali,e ,a*-io pgina He-. T1-.#. 3ra-ajare*o en el 2i,hero estilos3te@to.css *odi2i,ando y ,reando regla . )n el 2i,hero podr o- ervar ,o*entario utilizarlo para e ,ri-ir u que no a2e,tan al ,o*porta*iento de la anota,ione . )l pri*er hoja de e tilo 0 puede el ele,tor ya preparado en el 2i,hero e en la

ele,tor univer al0 *odi2Equelo aGadiendo la propiedad 2i,hero y o- erve en +ire2o4 el re ultado.

iguiente5 Z Wcolor:3lueOY. @uarde el

'2

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1-.(. Ba egunda regla del 2i,hero estilos3te@to.css ha,e re2eren,ia a la etiqueta de prra2o del do,u*ento C3AB. Aodi2ique e ta regla para ,on eguir e ta-le,er el te4to a verde J greenK. T1-.+. .hora e aGadirn do propiedade a una *i *a regla0 *odi2ique la regla ,o*o e indi,a en el ,&digo 1:. Prue-e ,a*-iar el valor del atri-uto te4t.align a lo valore 5 right o center0 y ,o*prue-e el e2e,to en el =avegador.
p W color:greenO te4t.align:justif,OY Cdi6o -(. E9e!plo de re6la con !As de un atributo.

T1-.). Ba ter,era regla del 2i,hero C$$ ,orre ponde a un ele,tor de ,la e. 9e-e -u ,ar en el ,&digo C3AB de la pgina la etiqueta *ar,ada ,on e ta ,la e0 toda e ta etiqueta e vern a2e,tada por e ta regla. Aodi2ique la regla de e ta 2or*a5 .mw.headline Wfont.st,le:italicOY. T1-.-. Ba ,uarta regla ha,e re2eren,ia a un ele,tor tipo 890 e te ele,tor ele,,iona una 1ni,a etiqueta de todo el ,&digo C3AB. Lu que en el ,&digo C3AB la etiqueta ,on el atri-uto id>UnotaU y *odi2ique la regla C$$ ,o*o igue5 [nota W3acXground.color: [DDD778OY. . lo largo del ,ur o apare,ern regla C$$ ,o*pleja donde apare,en vario agrupado 0 lo ,a o * 2re,uente on lo iguiente 5 ele,tore utilizando una ,o*a para ele,tore ,o*-inado o

.grupa,i&n de ele,tore 5 )4i te la po i-ilidad de agrupar lo ,o*o e *ue tra en el ,&digo 1<.
h1 h2 h! h" h# h$ W te4t.shadow: 2p4 2p4 1p4OY

evitar tener que e ,ri-ir *u,ha regla . . E e ,on igue apli,ar un *i *o e tilo a varia etiqueta

Cdi6o -). 7e6la con !Rltiples selectores.

Co*-ina,i&n de

ele,tore 5 Bo

ele,tore

de etiqueta

y ,la e

pueden ,o*-inar e para

,on eguir ele,,ionar etiqueta C3AB * e pe,E2i,a . $on utilizado 2re,uente*ente y ,on i ten en e ,ri-ir el no*-re de etiqueta junto ,on el no*-re de ,la e.
p.resaltado W color:redOte4t.decoration:underlineOY li.resaltado W color:redOte4t.decoration:line.throughOY Cdi6o -*. Co!binacin de selectores.

T19. )n el ,&digo C3AB

e han *ar,ado do

etiqueta

,on ,on el atri-uto class>UdestacadoU.

Aodi2ique la hoja de e tilo ,on =otepad?? aGadiendo la regla *o trada en el ,&digo 1< y 1>. Co*prue-e en el navegador y en el ,&digo C3AB la etiqueta a2e,tada por e ta regla . Bo ele,tore e pueden ,o*-inar entre ,o*-ina,ione de ele,tore E para ,on eguir una *ayor pre,i i&n en la e le deno*ina ele,tore ele,,i&n de y de

ele*ento

iendo en alguna o,a ione *uy 1til0 pero llegan a ,o*pli,ar en gran *edida la regla . . de ,endiente 0 de hijo

deter*inada

her*ano adya,ente . $&lo e *o trarn lo de ,endiente 0 ya que el re to on *eno ha-ituale .. $ele,tor de de ,endiente5 Ba etiqueta C3AB e tn in,luida una dentro de otra 2or*ando un

Modulo -b 3 :,ML 1 CSS

'-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

r-ol jerrqui,o. ) te tipo de ele,tor per*ite ele,,ionar toda la etiqueta de un tipo e4i tente dentro de otra etiqueta. )l ,&digo 1( *ue tra un eje*plo donde e ele,,ionan todo lo eje*plo de ,&digo e4i tente dentro de lo prra2o . @eneral*ente e te tipo de ele,tore ,o*pli,an el ,&digo C$$ re ultante0 e re,o*ienda li*itar u u o.
p code W3acXground.color:gre,Ocolor:whiteOY Cdi6o -+. 7e6la con !Rltiples selectores.

$ele,tore de atri-uto 5 $ele,,ionan ele*ento del ,&digo C3AB eg1n u atri-uto o ,ontenido de lo *i *o . $on un po,o * ,o*plejo y e pueden evitar en la *ayorEa de lo ,a o utilizanT do lo ele,tore ya e tudiado . #n eje*plo tEpi,o de u o de e te tipo de ele,tore e la ele,,i&n del tipo de 2i,hero en un enla,e He- para alterar la aparien,ia.
a%href &'(.pdf() W 3acXground: transparent url)Qpdf.pngQ+ no.repeatO padding.left:20p4O Y a%href &'(.a*i() W 3acXground: transparent url)Q2ideo.pngQ+ no.repeatO padding.left:20p4O Y Cdi6o -K. 7e6las para todos los enlaces a 4ic.eros "D 1 MGI.

Ftro tipo de e,tore utilizado ,o*1n*ente on lo lla*ado p eudo",la e y p eudo ele*ento . Ca,en re2eren,ia a propiedade e pe,iale 0 ,o*o por eje*plo0 un enla,e vi itado o el he,ho de pa ar el rat&n en,i*a de un enla,e. Ba regla *o trada en el ,&digo 17 ,on iguen poner un 2ondo gri en un enla,e ,uando el rat&n e t o-re Ql0 donde la p" eudo ,la e e :ho2er.0 Ba egunda regla del ,&digo 17 au*enta el ta*aGo de la pri*era letra de todo lo prra2o 0 utilizando el p eudo"ele*ento :first.letter.
a+ho*er W 3acXground.color: gre,O Y p:first-letter W font.siLe: 1&0CO font.weight: 3oldO Y Cdi6o -L. "seudos clasesDele!ento.

T21. 3ra-ajando de nuevo o-re lo 2i,hero anteriore 0 en lo prra2o de te4to e4i ten 2rag*ento de ,&digo envuelto por etiqueta Gcode5...G/code50 ade* hay un eje*plo de C$$ no in,luido en ning1n prra2o. )l o-jetivo e dar una aparien,ia lo 2rag*ento de ,&digo de lo prra2o y otra al ,&digo de eje*plo. T21.1. .Gada una regla C$$ para toda la etiqueta
code W 3acXground.color: [******OY. Gcode5 que e ta-lez,a el ,olor de 2ondo5

T21.2. .hora aGada la regla *o trada en el ,&digo 1( y ,o*prue-e la viendo el re ultado en el navegador. T21. $e pro-ar el ele,tor de atri-uto aGadiendo la do regla *o trada

etiqueta

a2e,tada

en el ,&digo 1D y

o- erve el re ultado al 2inal de la pgina0 en la e,,i&n 7e4erencias. ) ta regla aGade una i*agen de

';

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

2ondo a la etiqueta en la parte izquierda y de plaza un po,o el te4to0 en la *o trarn detallada*ente e to atri-uto C$$.

iguiente

e,,ione

T22. .hora ,on la p eudo ,la e ,on eguire*o el e2e,to de ,a*-io de ,olor en enla,e a pa ar ,on el rat&n por en,i*a0 para ello0 utili,e la regla a:ho2er W3acXground.color:greenOY. Prue-e ta*-iQn a ,a*-iar el ta*aGo de la pri*era letra de ,ada prra2o ,on p:first.letter Wfont.siLe:1&0COY. Puede ,opiar el eje*plo dire,ta*ente del ,&digo 17. T22.1. Lu que un ele,tor ,apaz de alterar 1ni,a*ente la pri*era letra del pri*er prra2o de ,ada e,,i&n0 no toda la pri*era letra de ,ada prra2o0 ,o*o i de un li-ro e tratara. Para olu,ionarlo e re,o*ienda a,,eder al *anual re2eren,iado en O17P.

).3. Prioridad de se#ectores.


Para per onalizar plantilla C3AB?C$$ ,reada por otro prioridad5 1." .tri-uto e pe,ial5 Aar,ado Pimportant0 no e ha ,ontado de-ido a que uele er una *ala pr,ti,a en el di eGo C$$0 intentare*o evitarlo. Con i te en aGadir una ,oletilla al 2inal de un atri-uto C$$ e utilizado para ro*per todo el i te*a de prioridad C$$. 2." $ele,tore e pe,E2i,o . '." 3ipo de ele,tor5 )l ele,tor 89 e el * prioritario0 el iguiente e el ele,tor CB.$$0 de puQ igue el ele,tor de etiqueta. Por 1lti*o el ele,tor univer al e el *eno prioritario. :." )n ,a o de igualdad de prioridad entre varia regla e apli,a la 1lti*a que apare,e. ,o*-inado 5 Ba ,o*-ina,i&n de ele,tore on lo * prioritario al er *uy e de-e *anejar ,on oltura el i te*a de

prioridad de regla e ta-le,ido en C$$. Ba prioridad igue e ta regla generale y en e te orden de

)n el eje*plo *o trado a ,ontinua,i&n J,&digo 20 y 21K e *ue tra un prra2o C3AB ,on tre regla que a2e,tan a di,ho prra2o. Cada una de ella e ta-le,e un ,olor di2erente0 el pro,edi*iento para averiguar ,ual e el ,olor de2initivo e apli,ar el i te*a de prioridad.

Gp id>Uparafo2U <ola te4to G/p5

class>Ute4toU5

[parrafo2 .te4to [parrafo2 p

Wcolor: Wcolor: Wcolor: Wcolor:

redOY 3lueOY greenOY ,ellowOY

Cdi6o ;2. De4inicin de clases CSS.

Cdi6o ;-. EtiBuetas :,ML con selectores de clase.

.pli,ando la prioridad e ta-le,ida en C$$0 la tre regla del ,&digo 21 ,orre ponden a tre

ele,tore 0 y

eg1n la regla de prioridad nu*erada anterior*ente hay que ele,,ionar la regla de prioridad ' que e ta-le,e que el ele,tor 89 e el * prioritario. #na vez ele,,ionado el ele,tor [parrafo20 al apare,er do ve,e 0 e de-e apli,ar la regla de prioridad :0 la ,ual indi,a que en ,a o de igualdad e apli,a la 1lti*a. 9e2initiva*ente el ,olor del te4to e verde. .veriguar la regla que a2e,tan a un 2rag*ento de pgina He- e ,o*plejo de deter*inar0 a1n * 0 al

Modulo -b 3 :,ML 1 CSS

''

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,ontener la hoja de e tilo ,iento de regla e pr,ti,a*ente invia-le. .de* 0 erEa ne,e ario ,ono,er detallada*ente el i te*a de prioridad apli,ado y lo ele*ento a2e,tado . Ba olu,i&n utilizada ,on i te en tra-ajar ,on la e,,i&n pro2undidad. herra*ienta para de arrolladore in,luida en lo navegadore . )n la iguiente e avanzar en el i te*a de prioridad y e ,o*pro-ar ,o*o no ha,e 2alta ,ono,erlo en

).4. (ode#o de ca+as


Ba *aqueta,i&n de una pgina He- ,on C$$ e realiza *ediante el deno*inado *odelo de ,aja de C$$. ) te *odelo e ta-le,e la e4i ten,ia de una ,aja por ,ada etiqueta C3AB a-ierta y ,errada. Co*o en C3AB una etiqueta ,ontiene * etiqueta enton,e 0 ,ada ,aja ,ontiene *u,ha ,aja dentro. #na pgina He- e t 2or*ada por *ultitud de ,aja ele,,ionada *ediante regla C$$ para per onalizar una dentro de otra 0 y ,ada ,aja puede er

u pre enta,i&n. ) te *odelo e

*uy 2,il de

utilizar una vez ,o*prendido u 2un,iona*iento0 para ello0 e realizar la iguiente prue-a5 T23. #tilizando =otepad?? edite el 2i,hero estilos3te@to.css. .Gada al ele,tor univer al lo te atri-uto del ,&digo 22 y vi uali,e lo ,a*-io en el navegador.
Z W border:1p4 solidO margin:0.&emO padding:0.&emO Y Cdi6o ;;. Modelo de ca9as.

iguienT

T23.1. Lorre e ta 1lti*a regla ya que era &lo ilu trativa0 *odi2ique el 2i,hero C$$ dejando el ele,tor univer al va,Eo Z W Y. Vuelva a +ire2o40 re,argue la pgina0 y a,,eda al *en1 Cerra*ienta U 9e arrollador He- U 8n pe,,ionar. Aueva el rat&n o-re la pgina y ,o*pro-ar ,o*o +ire2o4 *ue tra el *odelo de ,aja . VRe,ono,e la etiqueta C3AB ,orre pondiente a ,ada ,ajaW T23.2. )n la parte in2erior de +ire2o4 a,tive lo -otone C3AB y ) tilo0 y apare,ern do panele ,o*o lo *o trado en la 2igura 7. $ele,,ione un prra2o y prue-e en el panel de e tilo ,a*-iarlo dire,ta*ente dentro de +ire2o4. T23.3. 3ra lo ,a*-io realizado vuelva a re,argar la pgina y o- ervar que e han perdido. 3odo lo ,a*-io realizado dire,ta*ente de de el navegador no on per*anente 0 de-e ir al 2i,hero original0 editarlo ,on =otepad?? y guardar lo ,a*-io realizado . 3ra o- ervar el eje*plo anterior e puede ,on,luir que ,ada ele,tor en C$$ ele,,iona ,aja . 3odo lo lo ele,tore C$$ ele,,ionan una o varia ,aja . Con la ,aja e ,on igue un ,ontrol total o-re la pre enta,i&n de la pgina He-0 ya que0 ,on C$$ e puede indi,ar para ,ada ,aja el a pe,to0 la u-i,a,i&n y el ,o*porta*iento. para ,o*prender u 2un,iona*iento. )l ,ontrol de la ,aja e ,on igue ele,,ionando ,aja *ediante regla C$$ y *odi2i,ando lo atri-uto iguiente atri-uto 5 *rgene 0

,orre pondiente al *odelo de ,aja . )l *odelo de ,aja e ta-le,e lo

relleno 0 -orde y 2ondo. Ba 2igura 10 *ue tra un e que*a general del *odelo de ,aja ,on lo no*-re

'(

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura L. Modo desarrollador de

ire4o@.

de lo atri-uto C$$. 9e 2or*a general

e puede de,ir que el ,ontenido de una etiqueta C3AB e t

ie*pre en una ,aja y alrededor de ella pueden e tar todo lo ele*ento de la 2igura 100 alguno de ello o ninguno. . ,ontinua,i&n e detalla ,ada una de la parte 5 `rea del ,ontenido5 ) el ,ontenido C3AB de la etiqueta0 dentro de ella pueden e4i tir * ,aja . Ba propiedad bac<6round e ta-le,e de 2ondo0 -ien un ,olor &lido o una i*agen de 2ondo. `rea del relleno JpaddingK5 ) ,ontenido. `rea del -orde J-orderK5 ) una lEnea que rodea la ,aja y no tiene por quQ e4i tir en u totalidad. )4i ten ,uatro -orde y puede tener &lo alguno de ello . Ba propiedad border e ta-le,e el an,ho0 ,olor y tipo de -orde. `rea del *argen J*arginK5 ) una epara,i&n entre e ta ,aja y el re to de ,aja . Bo *rgene ie*pre tran parente y e ,ontrolan ,on la propiedad !ar6in. Ba propiedade que o2re,en * juego en lo di eGo Heon paddin60 bac<6round y border. Ba on un e pa,io que puede e4i tir entre el -orde y el ,ontenido. Ba de,ir0 e e4tiende de de el relleno al

propiedad bac<6round ta*-iQn a2e,ta a e ta rea0 e

propiedad bac<6round ,ontrola el 2ondo de la ,aja y per*ite e ta-le,er tanto ,olor de 2ondo ,o*o una i*agen de 2ondo. Cay una ,aja que envuelve a toda la pgina He- y e la ,orre pondiente a la etiqueta C3AB Nbod1O por ello e uele per onalizar ha-itual*ente. )n el eje*plo 2' e e ta-le,e una i*agen de 2ondo para toda la pgina0 un -orde in2erior para el titulo C1 y uno *rgene alrededor de toda la pgina He-.
3od, , background+ transparent url)Vdegradado.aLul.pngV+ no.repeat fi4edmargin+ 3em- . h1 , border-bottom+ 1p4 dotted 3lacX-. Cdi6o ;'. Di4erentes 4ondos 1 bordes en CSS.

Modulo -b 3 :,ML 1 CSS

')

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

*argin"top -order"top padding"top Contenido padding"-otto*

padding"right

*argin"right

-order"right

padding"le2t

*argin"le2t

-order"le2t

-order"-otto* *argin"-otto*

i6ura -2. Modelo de ca9as CSS.

Para 2a,ilitar al di eGador el ,ontrol ,o*pleto de la pre enta,i&n de la pgina He- e4i te una etiqueta C3AB e pe,ial NDIGO para ,rear ,aja di eGadore para ,on eguir dividir lo C3AB0 el u o de e ta e ta etiqueta e di eGo en regione e en,ial en lo e tilo y apli,ar a ,ada regi&n lo

deter*inado . ) ,o*1n el a-u o en el u o de e ta etiqueta de lo di eGadore prin,ipiante llegando a quedar el ,&digo C3AB ilegi-le. $e ha preparado un eje*plo para *o trar la utilidad de e ta etiqueta y pra,ti,ar ,on el *odelo de ,aja realizando alguna *odi2i,a,ione en la hoja de e tilo de un pequeGo l-u* de 2oto ,on el ,&digo C3AB ya preparado en -a e a etiqueta NDIGO. T2#. Cree una nueva ,arpeta en u di ,o duro y de ,o*pri*a el ar,hivo de eje*plo ca9as./ip.

Vi uali,e ,on el navegador el ar,hivo ca9as..t!l0 ver varia 2oto y te4to 0 el ejer,i,io ,on i te en ,on eguir un a pe,to de l-u* de 2oto *ediante hoja de e tilo. T2#.1. .-ra el do,u*ento estilos3ca9a.css y ca9as..t!l ,on =otepad?? para tra-ajar o-re ello . Co*prue-e el ,&digo C3AB0 ver que e -a tante i*ple y e t e tru,turado eg1n el e que*a de ,aja de la 2igura 11. +Eje e que e ta e tru,tura e ta-le,e el *odelo de ,aja pero no u u-i,a,i&n0 para ,on eguir la di tri-u,i&n *o trada en la 2igura e irn in,luyendo regla C$$. T2#.2. Ba pgina e t ,o*pue ta por do
[contenido

,aja

prin,ipale

y u ando lo

ele,tore

[logo y

e ,a*-ian

propiedade . ) ta-lez,a e ta-lez,a la

iguiente propiedad en el

ele,tor del ,ontenido vi ualizar la ,aja en el navegador5 [contenido W 3acXground.color:


[DDD0-HOY.

T2#.3. Repita el pro,edi*iento anterior pero ,on el ele,tor [logo y el ,&digo de ,olor [0-DD*4. Podr vi ualizar lo do -loque e4i tente en la pgina He-. Para ,on eguir u-i,ar y6o di tri-uir la ,aja C3AB en la pgina He- e ,o*-inan do propiedade C$$ 4loat y clear. Ba pri*era e utiliza para ha,er ,aja 2lotante dentro de la ,aja padre0 una ,aja 2lotante e puede alinear a la izquierda o dere,ha. Bo ele*ento 2lotante e puede olapar entre E0 el navegador

'*

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

idaSlo5oS Gimg src>VLoo.jpgV /5 Gh158jemplo de modelo de cajasG/h15

idaScontenidoS ,la aSfotoS ,la aSfotoS ,la aSfotoS

Gimg src>V01.jpgV /5 +oto de un.... ,la aSfotoS

Gimg src>V02.jpgV /5 +oto de un.... ,la aSfotoS

Gimg src>V03.jpgV /5 +oto de un.... ,la aSfotoS

Gimg src>V04.jpgV /5 +oto de un.... ,la aSfotoS

Gimg src>V0&.jpgV /5 +oto de un.... ,la aSfotoS

Gimg src>V0'.jpgV /5 +oto de un.... ,la aSfotoS

Gimg src>V0F.jpgV /5 +oto de un....

Gimg src>V08.jpgV /5 +oto de un....

Gimg src>V0-.jpgV /5 +oto de un....

i6ura --. Estructura de ca9as establecido en :,ML para el Albu! de 4otos.

lo

,olo,a donde queda e pa,io di poni-le0 la propiedad clear evita e te

olapa*iento. Para

,o*prenderlo *ejor e eguir tra-ajando o-re l-u* de 2oto . T2(. $e ha de2inido una ,la e lla*ada 4oto para apli,ar un e tilo ,o*1n toda ,ontienen la 2oto y u te4to de ,riptivo. Para intentar que e ta ,aja de ,ontenido utilizare*o la propiedad 4loat de la ,aja . T2(.1. )n la hoja de e tilo *odi2ique la regla ,o*o igue5 .foto Wfloat:leftOY. T2(.2. Prue-e 2lotar la ,aja a la dere,ha ,on .foto Wfloat:rightOY. )4i ten do propiedade * rela,ionada ,on el ta*aGo de ,aja 5 5idt. y .ei6.t Jan,ho y altoK. Ca ta ahora el an,ho y el alto de ,ada ,aja era e ta-le,ido por el navegador y e te ,al,ula el ta*aGo para que el ,ontenido a *o trar quepa dentro de la ,aja. Con la navegador a un ta*aGo en la ,aja ele,,ionada. .l 2orzar un ta*aGo de ,aja e e pre entan ,ierto pro-le*a 0 prin,ipal*ente0 ,ono,er ,ual e el propiedade 5idt. y .ei6.t e 2uerza al la ,aja que

e di tri-uyan por todo el rea

,o*porta*iento del navegador ,uando el ,ontenido de una ,aja no ,a-e dentro. Ba olu,i&n por de2e,to i*ple0 todo el ,ontenido que no quepa en una ,aja e *ue tra0 aunque e alga de la ,aja. Co*o e olapan en alguna regione quedando ilegi-le la ,on e,uen,ia de e to0 u,ede que lo ,ontenido pgina. Ba olu,i&n C$$ a lo olapa*iento ,on i te en el u o de la propiedad o%er4lo50 ,on la que el di eGador

de,ide i el ,ontenido o-re aliente de una ,aja e *ue tra0 e o,ulta o e per*ite de plazar la ,aja para

Modulo -b 3 :,ML 1 CSS

'+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

verlo. T2+. Para di tri-uir la ,aja de la 2otogra2Ea propor,ional*ente e 2orzar el ta*aGo de la ,aja que ,ontienen 2otogra2Ea ,o*o navegador.
.foto , width+1'0p4height+300p4float+ left- . Cdi6o ;(. Distribucin 4lotante de ca9as.

a un ta*aGo u ando la

propiedade

5idt. y .ei6.t. Ba regla quedarEa ,o*prue-e el re ultado en el

e indi,a en el ,&digo 2:0 tra

in,luirla en la hoja de e tilo

T2+.1. Ba 2otogra2Ea e4i tente en el l-u* tienen toda el *i *o an,ho pero alto di2erente0 para ,o*pro-ar el e2e,to de lo atri-uto over2lo; e e ta-le,er un alto *enor a la ,aja 0 de e te *odo0 alguna 2otogra2Ea no ,a-rn. Ca*-ie en la regla *o trada en el ,&digo 2: el alto a
height:200p4O. Re,argue la pgina y e tre,he la ventana del navegador ha ta vi ualizar i*gene

in,o*pleta al no ,a-er en la ,aja. T2+.2. .Gada la regla del ,&digo 2: la propiedad o2erflow:hiddenO y ,o*pro-ar en el navegador ,o*o todo el ,ontenido que no quepa en la ,aja 1>04200 no e *o trado en el navegador. T2+.3. Ca*-ie la propiedad anterior a o2erflow:autoO0 el navegador *o trar una -arra de

de plaza*iento para que el u uario pueda vi ualizar el ,ontenido de la ,aja que no ,a-e. $i e ha 2ijado ha o,urrido un e2e,to e4traGo en el rea de ,ontenido0 e ha perdido el ,olor de 2ondo. $e ha perdido tra ha,er la ,aja que ,ontienen la 2otogra2Ea 2lotante y e de-e a que lo ele*ento 2lotante no ,o*putan ,o*o ,ontenido de la ,aja 0 por ello el ta*aGo de la ,aja ,ontenido e ,ero. T2). .Gada a la regla ,reada en 32:.2. el atri-uto o2erflow:autoO para ,o*pro-ar el e2e,to en el navegador y olu,ionar el pro-le*a anterior. T2-. Para *ejorar el a pe,to general de la pgina e aGadirn * regla a la hoja de e tilo. )n el ,&digo 2< tiene la olu,i&n ,o*pleta0 pero e re,o*ienda eguir lo pa o indi,ado a ,ontinua,i&n para ver el e2e,to de ,ada regla y atri-uto C$$. $i tiene duda ,on ulte la olu,i&n. T2-.1. 3ra-ajare*o pri*ero o-re el ele,tor .3od, para in,re*entar lo hue,o laterale

*ediante el atri-uto margin: 3emO Co*prue-e el re ultado en el navegador en ,ada pa o. T2-.2. Vi uali,e la i*agen de6radado3a/ul.pn6 que e en,uentra entre lo 2i,hero de e te

ejer,i,io. ) ta i*agen e utilizarn ,o*o i*agen de 2ondo de toda la pgina y la puede e ta-le,er aGadiendo a la regla .3od, utili,e el 2rag*ento de ,&digo 2< para e te 2in. Co*prue-e en el navegador ,o*o la i*agen de 2ondo queda detr de lo ,olore de 2ondo de la ,aja [contenido y
[logo.

T2-.3. Para

eparar la

2otogra2Ea

entre

E e ta-le,ere*o

*rgene

para la ,la e .foto

*ediante el atri-uto margin: 1emb. T2-.#. +lote la i*agen de la ,aja [logo *ediante la regla [logo img Wfloat:leftOY. Co*prue-e el

'K

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

e2e,to en el navegador y ver que e ha de ,uadrado la ,o*po i,i&n de la pgina. T2-.(. )l atri-uto clear per*ite reu-i,ar lo -loque de-ajo de otro -loque 2lotante . .pli,ando a la ,aja ,ontenido el atri-uto clear:3othO e indi,a al navegador que alrededor de la ,aja
[contenido no pueden e4i tir ,ontenido 2lotante . .Gada di,ho atri-uto y ,o*prue-e el e2e,to.

T2-.+. Para 2inalizar e ta-le,ere*o


height:120p4O.

un alto 2ijo a la ,aja [logo *ediante el atri-uto

T2-.). #tili,e la regla he,ha para h1 *o trada en el ,&digo 2< para ,entrar el tEtulo en la pantalla. Ba regla *o trada no e una -uena tQ,ni,a0 en la pr&4i*a e,,i&n e tra-ajar o-re la unidade de *edida en C$$. T2-.-. Ca*-ie en la olu,i&n del ,&digo 2< la propiedade o2erflow.4 y o2erflow., a lo valore
auto y hidden ha ta que ,o*prenda u 2un,iona*iento. 3od, , background+ transparent url)Vdegradado.aLul.pngV+ no.repeat fi4edmargin+ 3em- /Z Margen alrededor de la p9gina Z/ . h1 , padding+ 40p4 10p4 &0p4 230p4- /Z Mala t\cnica para centrar un titulo Z/ . .foto , margin+ 1emo*erflow-y+autoo*erflow-/+hiddenwidth+1'0p4height+200p4float+ left. #logo img ,float+left-. #logo , height+120p4background-color+[0-DD*4. #contenido , /Z 8sta caja tiene todo su contenido flotanteB dar9 pro3lemas Z/ background-color+[DDD0-Ho*erflow+hidden- /Z *onseguir Aue no tenga tama]o ceroB todo es flotante Z/ clear+3oth/Z "ara e2itar cajas flotantes alrededor de esta caja Z/ . Cdi6o ;). Solucin CSS co!pleta desde ,;(. .asta ,;K. inclusi%e.

).). (edidas
.lguno de lo atri-uto *o trado iguiente 5 ha ta ahora in,luyen *edida . Ba al *odelo de ,aja *edida en C$$ *edida

prin,ipal*ente e pe,i2i,an ta*aGo ,orre ponden a la propiedade

a o,iado

y ta*aGo de letra 0 e ta

.n,ho y alto del ,ontenido5 propiedade 5idt. y .ei6.t re pe,tiva*ente. .n,ho *Eni*o y *4i*o5 propiedade !in35idt. y !a@35idt. re pe,tiva*ente. Argene y relleno5 propiedade !ar6in y paddin6. 3ipogra2Ea 5 propiedad 4ont3si/e ,orre pondiente al ta*aGo de letra.

Modulo -b 3 :,ML 1 CSS

'L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)n aquella relativa

propiedade

donde

e e pe,i2iquen *edida 0 C$$ ha-ilita do e e pe,i2i,a u valor real.

tipo

de e pe,i2i,a,ione 5 *edida ya

o a- oluta . Ba

relativa

e ,al,ulan e ta-le,iendo una rela,i&n ,on otra

e pe,i2i,ada y en la a- oluta

Sinta6i% 1.<e* 0.De4 2p4 0.<in 10,* 100** 12pt :0p, D0c

Ti/o Relativa Relativa .- oluta1 .- oluta .- oluta .- oluta .- oluta .- oluta Relativa

3e%cri/cin Re pe,to al an,ho de la letra ]A]0 el valor 1 e la an,hura de la letra *ay1 ,ula A y el n1*ero e un *ultipli,ador Re pe,to de la altura de la letra *in1 ,ula ]4]. )l n1*ero e un *ultipli,ador. =1*ero de pi4el de la pantalla del u uario Pulgada J1ina2.<:,*K CentE*etro AilE*etro Punto J1pta0.'<**K Pi,a J1p,a:.2'**K Aedida relativa re2erente a u ele*ento ,ontenedor

,abla (. Medidas CSS para propiedades con !edidas.

Ba *edida relativa

on el *ejor *Qtodo para e pe,i2i,ar unidade en lo di eGo He-. $on a*plia T que en lo prin,ipiante u an

*ente utilizada por lo de arrolladore *a e4peri*entado 0 *ientra *a iva*ente unidade p@.

H'C re,o*ienda el u o de *edida relativa 0 ,on,reta*ente e! para 2uente y por,entaje para an,ho y alto de ,aja . )l *otivo e do-le0 por un lado ,on eguir pgina * a,,e i-le para per ona ,on di ,apa,idad0 y otro lado0 ,on eguir llegar a di2erente di po itivo donde la 2rag*enta,i&n en ta*aGo de pantalla y re olu,i&n pre enta verdadero que-radero de ,a-eza para lo de arrolladore He-. ) i*portante ,on iderar el *Qtodo de ,al,ulo C$$ en la *edida relativa . Ba *edida relativa ie*pre relativa re pe,to al ta*aGo del ele*ento padre. )l ele*ento padre de toda pgina e etiqueta Nbod1O0 e on la

para aquE donde un -uen di eGador e ta-le,e una *edida a- oluta para que el

re to de la pgina ,al,ule u ta*aGo en 2un,i&n de e te valor. Ba ventaja de e te *Qtodo e que ,on ,a*-iar el 1ni,o valor a- oluto de la pgina0 e re,al,ulan todo lo ta*aGo al er Q to relativo . Para *o trar el *odo de ,l,ulo e realizar un eje*plo ,on el atri-uto 4ont3si/e u ado para e ta-le,er ta*aGo en la tipogra2Ea 0 en la iguiente e,,i&n e e tudian la tipogra2Ea . T29. 9e ,o*pri*a el 2i,hero !edidas./ip en una nueva ,arpeta y edite ,on =otepad?? lo 2i,hero !edidas..t!l y estilos3!edidas.css. Vi uali,e en el navegador el ar,hivo !edidas..t!l. T29.1. )n el 2i,hero de e tilo navegador.
1 ) di ,uti-le0 e puede ,on iderar relativa de-ido al ,o*porta*iento de lo navegadore en pantalla de alta re olu,i&n

e han e ta-le,ido < e tilo

de te4to ,on *edida

relativa 0

,o*prue-e en el ,&digo C3AB lo prra2o ,on e to e tilo y el ta*aGo de letra que *ue tra el

(2

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T29.2. Ca*-ie el valor del la 1ni,a *edida a- oluta e4i tente en el ,o*prue-e ,o*o en el navegador a2e,ta a todo lo ta*aGo relativo .

ele,tor C$$ -ody y

T29.3. 8ntente ,o*prender el e2e,to perver o o,urrido ,on el 1lti*o te4to0 para ello0 *ire el ,&digo C3AB.

).,. $i ograf-as
)l 2un,iona*iento de la tipogra2Ea en C$$ di2iere en gran *edida del u o en progra*a o2i*ti,o tradi,ionale 0 ello ,ondu,e a ,o*eter errore al ini,iar e en C$$. .l tra-ajar en un equipo in2or*ti,o ,on un paquete e di pone de ,antidad de tipogra2Ea ele,,iona-le . ) ta tipogra2Ea e tn di poni-le en el equipo lo,al pero no ie*pre e tn en otro equipo. ) un pro-le*a ha-itual ,o*partir do,u*ento y ver ,o*o e ven de di2erente 2or*a en ,ada ordenador. )n ver ione 2a*ilia anteriore a C$$' el pro-le*a e e4tendEa a la pgina He-0 o,urriendo que en ,ada egura*ente todo ,ono,e*o la

equipo e vi uali,en lo te4to pgina ,on tipogra2Ea di2erente . ) te pro-le*a e olu,iona utilizando de tipogra2Ea 0 no tipogra2Ea ,on,reta 0 por eje*plo0 tipogra2Ea ,i!es 0e5 7o!an0 en C$$ ,orre ponde a la 2a*ilia seri4. Para e ta-le,er la 2a*ilia e utiliza la propiedad 4ont34a!il18 y el navegador a partir del no*-re de la 2a*ilia -u ,a una pare,ida entre la tipogra2Ea in talada en el equipo. C$$' olu,iona e te pro-le*a dejando utilizar tipogra2Ea in ne,e idad de e tar in talada en el equipo.

Aediante la propiedad @4ont3ace pode*o indi,ar la u-i,a,i&n en 8nternet del 2i,hero de la tipogra2Ea y el navegador la de ,argar junto ,on la pgina para ha,er u o de ella. Ba prin,ipale de ventaja de e te *Qtodo on5 la o-re,arga de an,ho de -anda de la pgina He- al de ,argar la tipogra2Ea0 y que en la li,en,ia de *ayorEa de la tipogra2Ea no e per*ite ,o*partirla . T31. 9e ,o*pri*a el 2i,hero tipo6ra4ias./ip en una nueva ,arpeta de u di ,o duro0 e te eje*plo ,ontiene una pgina C3AB y una hoja de e tilo C$$. #tili,e =otepad?? para editarlo y para ,ada ,a*-io realizado po terior*ente vi uali,e el e2e,to en el navegador. T31.1. # ando el ele,tor univer al e ta-lez,a la 2a*ilia de tipogra2Ea *ediante el atri-uto font.
famil,:cursi2eO

T31.2. Cree una nueva regla para e ta-le,er el ,olor de letra de todo lo prra2o en *arr&n0 u e el atri-uto color:[774F00O. T31.3. Para ,a*-iar e a pe,to de lo tEtulo utili,e e el iguiente ele,tor5 h1Bh2 W Y0 aGdalo a la hoja de e tilo para realizar lo ,a*-io indi,ado a ,ontinua,i&n. T31.#. Ca*-ie el an,ho de la tipogra2Ea de lo tEtulo *ediante el atri-uto font.weight: lighterO. T31.(. Para poner lo tEtulo en ver alita utili,e la iguiente regla font.2ariant:small.capsO. T31. #tilizare*o @4ont3ace para u ar una 2uente de ,argada de 8nternet previa*ente pero no

in talada en el equipo lo,al. )l pro,edi*iento en C$$' ,on i te en de,larar una tipogra2Ea u ando un nuevo no*-re e indi,ando de de donde e puede o-tener.

Modulo -b 3 :,ML 1 CSS

(-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T31.1. Co*prue-e lo utili,e alguno de ello

ar,hivo

.tt4 e4i tente

en la *i *a ,arpeta donde e t e te eje*plo y

para de2inir una nueva tipogra2Ea0 utili,e el ,&digo 2> para realizar la

*odi2i,a,i&n en el 2i,hero C$$.


0font-face , font-family+ font-style+ font-weight+ src+ Y purisa/* Nombre de la nueva tipografa */ normalnormalurl)Qpurisa.ttfQ+Cdi6o ;*. De4inicin de nue%a tipo6ra4?a en CSS'.

T31.2. #tili,e e ta nueva tipogra2Ea Jpurisa en el eje*ploK para apli,arla a lo do,u*ento. . ,ontinua,i&n e realizar otro ejer,i,io o-re el *odelo de ,aja

prra2o

del

aprove,hando e ta pgina He-.

Con i tir en e ta-le,er una i*agen de 2ondo 2ija no repetitiva0 ,on,reta*ente un perga*ino o-re el que hay que ,uadrar el te4to ,o*o e *ue tra en la 2igura 12. T32. Con el vi or de i*gene e ,oja el perga*ino que * le gu te para e ta-le,erlo ,o*o 2ondo de toda la pgina He-. T32.1. #tili,e la regla C$$ indi,ada en el ,&digo 2( y u tituya la interroga,ione por valore ade,uado ha ta ,on eguir ,uadrar el te4to. T32.2. )l te4to e ter*inar intentar alguna de la 1." Ba *a *ayor ie*pre que la i*agen de 2ondo y olu,ionarlo puede
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que viva un hidalgo de los de lanza en astillero, adarga antigua, rocn flaco y galgo corredor. Una olla de algo ms vaca que carnero, salpicn las ms noches, duelos y quebrantos los s bados, lentejas los viernes, algn palomino de aadidura los domingos, consuman las tres partes de su hacienda. El resto della conclu an sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los d as de entre semana se honraba con su vellori de lo ms fino. Tena en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que as ensillaba el rocn como tomaba la podadera. Frisaba la edad de nuestro hidalgo con ...

o-re aliendo in2erior*ente0 para

i6ura -;. ondo de per6a!ino.

olu,ione indi,ada Jno e ne,e ario realizarla K5

i*ple ,ortar el te4to en prra2o y ha,er varia pgina He-.

2." Con eguir que el te4to e de pla,e interior*ente al perga*ino0 para ello de-e aGadir al ,&digo C3AB una etiqueta 98V para el ,ontenido. '." Partir la i*agen de 2ondo en tre parte 5 ,a-e,era0 ,uerpo y pie. Colo,ar ,ada i*agen en una etiqueta 98V y ha,er que la i*agen ,uerpo e repita0 pero de-e ,on eguir un patr&n de perga*ino en la parte ,entral a partir de la i*agen.
3od, , background-image+ url)Q^^^Q+background-repeat+no.repeatwidth+ ^^^p4padding-top+ ^^^p4padding-bottom+ ^^^p4padding-left+ ^^^p4padding-right+ ^^^p4Y Cdi6o ;+. I!a6en de 4ondo para pA6ina Web.

(;

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)... (edios "SS


8ni,ial*ente el C3AB 2ue ,on,e-ido para er vi ualizado en un progra*a de ordenador0 por ello0 e uponEa ,ierto ta*aGo y propor,ione de pantalla. Coy en dEa el a,,e o a 8nternet e realiza de de di2erente di po itivo donde la propor,ione 0 ta*aGo y re olu,ione de pantalla on *uy heterogQnea . )n e ta realidad e donde C$$ ,o-ra *ayor entido0 el he,ho de eparar la in2or*a,i&n de la

pre enta,i&n 2a,ilita la *odi2i,a,i&n del a pe,to para adaptar e a ,ada di po itivo. Bo di eGadore Hepueden e ta-le,er di2erente hoja de e tilo en 2un,i&n del di po itivo que de ee o-tener la pgina He-0 y ade* C$$ provee propiedade e pe,E2i,a para deter*inado *edio ,o*o on la i*pre ora o intetizadore de voz. .l ,o*ienzo de e ta e,,i&n e *o tr& ,o*o e enlaza-a una hoja de e tilo e4terna en una pgina

C3AB Jver ,&digo 70 pgina 27K. Ba etiqueta Nlin<O ,ontiene un atri-uto lla*ado !edia donde el de arrollador e ta-le,e para que di po itivo o *edio e la hoja de e tilo . Cuando e a,,ede al do,u T *ento C3AB e de,ide la hoja de e tilo a u ar de la di poni-le para el do,u*ento iendo lo * ha-ituale lo enu*erado en la ta-la <.

Medio all ,reen print handheld 3odo lo *edio Frdenadore 8*pre ora

7b8eti9o

9i po itivo *&vile o ,on pantalla pequeGa

,abla ). 0o!bres de !edios !As utili/ados en CSS.

Para ,rear pgina ,o*pati-le ,on di2erente *edio

e de-en ,rear varia hoja de e tilo y enlazarla

al de de el ,&digo C3AB ,o*o e indi,a en el ,&digo 2D.


... GlinX rel>Ust,lesheetU t,pe>Ute4t/cssU media>UscreenU href>Upantalla.cssU/5 GlinX rel>Ust,lesheetU t,pe>Ute4t/cssU media>UhandheldU href>Tmo*il.cssU/5 GlinX rel>Ust,lesheetU t,pe>Ute4t/cssU media>UprintU href>Timpresora.cssU/5 ... Cdi6o ;K. :o9as de estilo para di4erentes !edios.

)n ,ada hoja de e tilo utilizando ,orre,ta*ente el *odelo de ,aja di po itivo un ,on,reto.

e ,on igue adaptar el itio He- al

)./. 0tros as ectos


$e tratan -reve*ente otro otra . Re pe,to a lo ,olore 0 han apare,ido en lo valore de alguno atri-uto en do 2or*ato 5 pala-ra ,lave a pe,to relevante ,o*o on5 ,olore 0 agrupa,i&n de propiedade y

Modulo -b 3 :,ML 1 CSS

('

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

y valor R@L he4ade,i*al. )n C$$ e4i ten alguna otra 2or*a para e pe,i2i,ar e to ,olore 0 pero el u o *a e4tendido e R@L. ) te 2or*ato ,on i te en la e pe,i2i,a,i&n de un ,olor ,o*o *ez,la de tre ,olore 5 R e rojo0 @ e verde y L e azul. Ba inten idad de ,ada uno de e to ,o*ponente e e pe,i2i,a ,on un n1*ero0 por eje*plo5 =RH)2&&B0B0+ e rojo puro y =RH)2&&B2&&B0+ e a*arillo. Ba 2or*a ,o*pa,ta para indi,ar el valor de ,olor ,on i te en poner lo tre n1*ero en he4ade,i*al pre,edido de _. )l eje*plo anterior5 [DD0000 e rojo puro y [DDDD00 e a*arillo. Ftro a pe,to e la po i-ilidad de agrupar alguna propiedade . Au,ho de la propiedade *o trada ha ta el *o*ento oportan una inta4i agrupada0 ,on i tente en e ta-le,er de una *anera ,o*pa,ta vario atri-uto i*ultnea*ente. Ba 2or*a * 2,il de ,o*prenderlo e ,on la propiedade !ar6in y e *ue tran do equivalen,ia propiedade en una de2ini,i&n de ,la e0 2Eje e ,o*o ,ada agrupada en C$$ ,o*o on5 4ont0 border0 paddin6 ,on la que e po i-le en una ola regla e ta-le,er lo valore de lo ,uatro lado del *odelo de ,aja . )n la 2igura 1' propiedad agrupada ,orre ponde a ,uatro propiedade 0 donde el orden de apari,i&n de lo valore e t predeter*inado en C$$. )4i ten *a bac<6round0 list3st1le y otra .
.caja1 W margin-top+ 10p4margin-right+ 1&p4margin-bottom+ 20p4margin-left+ 2&p4padding-top+ 0.2empadding-right+ 0.4empadding-bottom+0.'empadding-left+ 0.8emd

.caja1 W margin+ 10p4 1&p4 20p4 2&p4padding+ 0.1em 0.2em 0.4em 0.8emd

i6ura -'. M6rupacin de propiedades.

Ca-itual*ente en lo

CA$ en,ontrare*o

la

hoja

de e tilo dividida

en vario

2i,hero 0

iendo el

1lti*o el de *ayor prioridad. 3a*-iQn otra inta4i *uy utilizada e la apli,a,i&n de varia ,la e a un ele*ento C3AB0 ,on iguiQndo e eparando por un e pa,io toda la ,la e dentro del atri-uto class0 por eje*plo class>Ute/toresaltado itemmenuU. 3odo lo lenguaje in2or*ti,o in,orporan lo ,o*entario 0 on te4to e ,rito por el de arrollador y que el progra*a in2or*ti,o ignora0 C$$ lo in,orpora ,opiando la inta4i del lenguaje C. )n el ,&digo 2< apare,en vario ,o*entario de eje*plo0 e puede ver que ,o*ienzan por /Z y ter*inan por Z/ ade* 0 pueden tener varia lEnea . Para pro2undizar en el re to de a pe,to de C$$ e re,o*ienda la le,tura del *anual ,itado en O 17P el ,ual0 no e *uy e4ten o y e 2,il de a i*ilar

).1. "SS3
C$$' trae innu*era-le *ejora re pe,to a la ver i&n anterior. Con C$$' e ha intentando uni2i,ar e4ten ione *u,ho * parti,ulare e4ten o que in,luida por lo de arrolladore de di2erente navegadore u *agnitud He-. C$$' e e han divido la u ver i&n prede,e ora0 de he,ho0 de-ido a

((

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

e pe,i2i,a,ione en di2erente *&dulo lo navegadore e4i tente in,orporando nueva 2un,ionalidad. $e de ta,a de C$$' la navegadore 5 iguiente

o-re lo que e tra-aja independiente*ente. Po e to *otivo eg1n avanzan u de arrollo van

no in,orporan C$$' ,o*pleta*ente0

novedade

re pe,to a C$$2 ya operativa

en la *ayorEa de lo

Po i-ilidad de poner i*gene en lo -orde . $o*-ra para el te4to y la ,aja . A1ltiple i*gene de 2ondo y u-i,a,i&n relativa de la *i *a . Redi*en ionado de ,aja . @radiente para 2ondo . 3e4to *ulti,olu*na. Aar,o do-le JFutlineK. Rotura de pala-ra larga . . lo largo del ,ur o apare,ern *1ltiple eje*plo u ando e ta y otra ,ara,terE ti,a de C$$'0 aunque no e ,u-rir todo C$$' en u totalidad.

5+ Eje-/lo, de di,e8o, *a,ado, e! 9oja, de e,#ilo CSS


#tilizando platilla li-re o-tenida de F$H9 O1(P e realizarn pequeGo ,a*-io en la aparien,ia. $e utilizar en pri*er lugar la plantilla pets35ebsite./ip que eg1n e ha podido ,o*pro-ar utiliza de *anera ,orre,ta la hoja de e tilo para 2a,ilitar lo ,a*-io y ho*ogeneizar el itio He-. $e pro,eder a realizar uno ,a*-io - i,o en lo e tilo dire,ta*ente en el ervidor de 8nternet. T33. Coloque en el ervidor de 8nternet lo 2i,hero de la plantilla pet35ebsite. )n ,a o de ha-er ,olo,ado la otra plantilla anterior*ente0 de-e -orrar todo u-ir la ,orre,ta. T33.1. )je,ute el progra*a =otepad??0 ,one,te ,on el 2i,hero st1le.css en el ervidor para a-rirlo ,on el editor. T33.2. Bo,ali,e el iguiente 2rag*ento de ,&digo5
#na* , background+ padding+ te/t-align+ color+ . [Fa2e4010p4 20p4right[f'dde3Cdi6o ;L. Estilos de la cabecera de la plantilla de e9e!plo.

lo 2i,hero

del

ervidor y pro,eder a

ervidor *ediante +3P 0 y lo,ali,e el

T33.3. Ca*-ie la entrada background+ [Fa2e40- a

background+ [00''00- guarde lo

,a*-io

re,argue la pgina en el navegador. 9e-erEa o- ervar ,a*-io en la pgina.

Modulo -b 3 :,ML 1 CSS

()

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T33.#. 8n erte una nueva propiedad ante del ,ierre de la llave y aGada la iguiente entrada5
font-si1e + 1&0C-. @uarde lo ,a*-io y re,argue la pgina en el navegador.

T33.(. Ca*-ie lo n1*ero 10 y 20 que e tn tra la propiedad padding y ,o*prue-e u e2e,to . T33.+. Ca*-ie el valor de propiedad ,olor a un ,&digo que ,orre ponda al ,olor a*arillo y ,o*prue-e el e2e,to. #tili,e la e4ten i&n de +ire2o4 ColorMilla para ele,,ionar ,olore . Ba plantilla de itio He- no iguen una pauta generale en u realiza,i&n. )l ,&digo que

en,ontra*o en lo 2i,hero de hoja de e tilo ta*po,o

on *uy diver o . Bo no*-re de ele,tore de e tilo utiliza de *anera di2erente. Para poder ,a*-iar el

on ho*ogQneo 0 ,ada de arrollador lo

a pe,to de un itio He- ne,e ita*o ,ono,er en ,ada parte de la pgina que ele,tor de e tilo e utiliza. Vi ualizando en el editor de te4to el ,&digo C3AB e pueden ,ono,er lo e tilo de ,ada parte de la pgina He-0 pero e te pro,edi*iento e tedio o y requiere tener una gran e4perien,ia en di eGo He-. Bo navegadore *oderno in,luyen herra*ienta para 2a,ilitar el de arrollo He-0 e utilizarn e ta ,ara,terE ti,a para poder alterar la aparien,ia ,on 2a,ilidad.

,.1. Extensi2n Firebug ara Firefox


Ba herra*ienta de tra-ajo para lo ,a*-io de e tilo en e te ,ur o er el propio navegador He-. .unque el ,ur o e t ,entrado en el navegador +ire2o40 el re to de navegadore ta*-iQn in,luyen la herra*ienta de di eGo que e van a *o trar para e te navegador. )n el *&dulo anterior e in talaron ,o*ple*ento en +ire2o4 y e re,o*enda-a in talar +ire-ug0 i ya lo tiene lo tiene in talado puede o*itir lo do pri*ero pa o 5 T3#. Co*prue-e i el equipo tiene in talado +ire2o40 en ,a o ,ontrario de ,rguelo de de

!o/illa.or6 y pro,eda a in talarlo. T3#.1. .,,eda al *en1 Cerra*ienta U Co*ple*ento donde e pueden de ,argar nueva ,aT ra,terE ti,a para el navegador. $ele,,ione el ,ontrol dere,ho Cbtener co!ple!entos y e ,ri-a en el ,uadro de -1 queda ituado en la parte uperior dere,ha la pala-ra 4irebu6. 9e toda lo ,o*ple*ento que apare,en. 8n tale el que e lla*a i*ple*ente ne,e ario reini,iar +ire2o4. T3#.2. =avegue a u itio He- en 8nternet y a,tive ,o*o el *o trado en la 2igura 1:. T3#.3. Pul e o-re el -ot&n de in pe,,i&n y *ueva el rat&n por en,i*a de la pgina que e t vi ualizando. $eg1n e it1e en un ele*ento e le *o trarn la regla C$$ apli,ado a di,ho ele*ento0 el 2i,hero donde e tn de2inido y la lEnea dentro de e e 2i,hero. $ele,,ione el ,uadro gri indi,ado en la 2igura 1:0 averigXe la regla apli,ada y el 2i,hero. T3#.#. )dite el 2i,hero0 lo,alizando la regla e intente ,a*-iar el ,olor de 2ondo gri ,olor. #tili,e ColorMilla para e ,oger un ,olor a u gu to. por otro irebu6 u ando el -ot&n ituado a la dere,ha irebu6. 3ra la in tala,i&n e

del ,uadro de -1 queda de +ire2o4. $e de plegar un panel in2erior ,on ,antidad ,on ,ontrole

(*

Modulo -b 3 :,ML 1 CSS

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.,tivar +ire-ug

Lot&n de in pe,,i&n

$ele,tore apli,ado

+i,hero y lEnea donde e de2ine el ele,tor

i6ura -(. Gista 6eneral de la e@tensin

irebu6 de

ire4o@.

:+ Co!,ejo,
Ba prin,ipal ,on idera,i&n a tener en ,uenta e que la *ayorEa de lo di eGo realizando &lo *odi2i,a,ione C$$ en lugar de C3AB. $i a1n a E e ,a*-ia el ,&digo C3AB nun,a utili,e ta-la en la *aqueta,i&n de ,ontenido0 la ta-la e4,lu iva*ente para pre entar dato y no a-u e de la etiqueta 98V en el di eGo. Partiendo de e to prin,ipio otra ,on idera,ione on5 on e pueden per onalizar

Valide u ,&digo ZC3AB y C$$ utilizando la herra*ienta H'C C3AB validator0 C$$ validator. Reduz,a el ta*aGo de la i*gene en el propio 2i,hero de la i*agen no ,on atri-uto C$$. Prue-e u te*a e vario navegadore ;e- y no de arrolle en 8nternet )4plorer e te navegador no ,u*ple lo e tndare H'C. Aozilla +ire2o40 .pple $a2ari0 @oogle Chro*e y Fpera ,u*plen lo e tndare . Aantenga lo no*-re de ar,hivo en *in1 ,ula 0 tanto de i*gene ,o*o hoja de e tilo y

pgina C3AB. Poner ie*pre el ,odigo C$$ en un 2i,hero e4terno. =o a-u ar de lo atri-uto 890 e * 0 e re,o*ienda *ini*izar u u o para 2a,ilitar el u o de

Modulo -b 3 :,ML 1 CSS

(+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

%Iuery. ) ,ri-ir ,o*entario en la ,la e 0 el ,&digo ,o*entado e 2,il de *antener. #n ,o*entario adi,ional0 i no e ne,e ario no e ,ri-a ,&digo adi,ional C$$ para 8nternet )4plorer0 le requerir *u,ho tie*po y e 2uerzo0 e * pr,ti,o re,o*endar el u o de otro navegador que realizar todo e e e 2uerzo0 a E entre todo e ,on eguir que la 2utura ver ione ,u*plan lo e tndare H'C.

;+ Reali3a"i4! o/"io!al
)4i ten *ultitud de herra*ienta de ayuda al de arrollo He- entre lo ,o*ple*ento de +ire2o4. Puede in talar alguno * que ern 1tile a lo largo del ,ur o. T3(. .Gada a +ire2o4 la e4ten i&n He-9eveloper y ,o*prue-e la *ultitud de op,ione que po ee. T3+. 9e ,argue alguna ,o*o e tn he,ha . plantilla del enla,e O1DP y a,,eda a la hoja de e tilo para ,o*pro-ar

(K

Modulo -b 3 :,ML 1 CSS

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 1" % <la#a(o&-a WA$<


)ervidor +,-, servidor de base de datos, len.uaje de pro.ra$aci/n P%P

1+ Re,u-e!
9ura,i&n e ti*ada5 '0 *inuto . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero ;a*p erver2.2d"4'2.e4e deli,iou N2ruit.zip0 +ree"Lu ine "He- ite3e*plate.zip0 ;e-pilot.zip eje*plo php.zip
,abla *.

3e%cri/cin Plata2or*a H.AP $erver Plantilla li-re C3AB< ? C$$' )je*plo de progra*a en PCP

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O20P Plata2or*a Ha*p$erver0 <http566;;;.;a*p erver.,o*!. O21P Co*para,i&n de todo lo paquete .AP0 <http566en.;i/ipedia.org6;i/i6Co*pari onNo2NH.AP !. O22P $ervidor He- .pa,he0 <http566httpd.apa,he.org6!. O2'P Plata2or*a Z.AP <http566;;;.apa,he2riend .org6en64a*pp.ht*l!.

.+ I!#&odu""i4!
H.AP e un paquete de o2t;are a-ierto ,on vario ,o*ponente o2t;are in,luido pen ado para 2a,ilitar el de arrollo y la pue ta en e4plota,i&n de un itio He-. Prin,ipal*ente e 1til para la-ore de de arrollo en equipo lo,ale 0 ini,ial*ente 2ue ,on,e-ido ,on e te 2in0 &lo para tra-ajo lo,al. Coy en dEa
Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

u2i,iente*ente ro-u to ,o*o para i*plantarlo en un entorno de e4plota,i&n0 aunque no e

*uy

,o*1n u arlo en ervidore . H.AP e a,r&ni*o de Hindo; 0 .pa,he0 Ay$IB y PCP. \ to y pre,on2igurado para que 2un,ionen ,onjunta*ente tra on lo ,o*ponente in,luido en H.AP

u in tala,i&n. ) to ,o*ponente ,orre ponT

den a una in2rae tru,tura te,nol&gi,a - i,a para el de arrollo o pue ta en e4plota,i&n de un itio He-0 on5 un ervidor He- J.pa,heK0 una -a e de dato JAy$IBK y un lenguaje de progra*a,i&n JPCPK. .de* de H.AP a,tual*ente e4i ten *ultitud de plata2or*a di2eren,ia re iden ha-itual*ente en la utilidade ,l&ni,a ,on alguna *Eni*a de

di2eren,ia . ) ta

in,luida 0 en lo

lenguaje

progra*a,i&n oportado o en -a e de dato utilizada . $e re,o*ienda vi itar el enla,e de la re2eren,ia O21P para ,o*parar lo e4i tente . .unque H.AP 2a,ilita la in tala,i&n de todo te e in talan y e *antienen de *anera eparada. lo ,o*ponente ne,e ario para la pue ta en

2un,iona*iento de un ervidor de 8nternet0 en un ervidor para u o pro2e ional0 todo e to ,o*ponen T

1+ I!,#ala"i4! de WA$<
Ba in tala,i&n de H.AP no pre enta ninguna di2i,ultad0 predeter*inada 0 aunque in tala,i&n. )ntre la op,ione de H.AP e4i te la po i-ilidad de ini,iar la plata2or*a ,o*o un ervi,io. Cuando e ini,ia un progra*a ,o*o ervi,io igni2i,a que el progra*a e ini,ia auto*ti,a*ente0 e de,ir0 no e ne,e ario que el u uario ini,ie la e i&n y -u que el progra*a en el *en1 de ini,io. Ba de ventaja e que la eje,u,i&n de e to progra*a de*ora el arranque del i te*a operativo y ,on u*e re,ur o . T3). 8n tale H.AP de ,argndolo de de la pgina o2i,ial o utilizando el *aterial u*ini trado ,on el *&dulo. $i tiene un i te*a operativo de >:-it e re,o*ienda u ar la ver i&n de >:-it de H.AP. &lo hay que a,eptar la op,ione e re,o*ienda ,a*-iar el navegador por de2e,to durante el pro,e o de

T3).1. 9urante la in tala,i&n de H.AP le preguntar ,ual e el navegador por de2e,to que e utilizar. )n el dilogo apare,er pre ele,,ionado e@plorer.e@e Jver 2igura 1<K0 aunque po terior*ente e podr ,a*-iar0 e re,o*ienda e ,oger +ire2o4. Puede en,ontrarlo en la ,arpeta Ai PC U .r,hivo de progra*a U Aozilla +ire2o4. T3).2. )l 1lti*o dilogo0 *o trado en 2igura 1>0 apare,e ante de 2inalizar la in tala,i&n. \ te oli,ita lo dato de un ervidor de ,orreo glo-al para poder enviar ,orreo dire,ta*ente ,on PCP. .l er el ervidor de ,orreo glo-al para toda la in tala,i&n no e re,o*enda-le ,on2igurarlo. CualT quier ataque o *al 2un,i&n per*itirEa enviar ,orreo a ,ualquier dire,,i&n de 8nternet. Ca-itual*ente ,ada CA$ per*ite e ta-le,er de-en dejar lo valore predeter*inado . T3).3. ) i*portante de -loquear el 2ire;all de Hindo; tra la in tala,i&n0 de lo ,ontrario lo itio He- ,reado no ern a,,e i-le de de otro equipo de la red. $&lo hay que pul ar el u propia ,on2igura,i&n de ,orreo0 por tanto0 e

)2

Mdulo -c 3 "lata4or!a WMM"

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

-ot&n 9e -loquear *o trado por Hindo; tra la in tala,i&n Jver 2igura 1(K.

i6ura -). Instalacin de WMM".

i6ura -*. Con4i6uracin del correo.

i6ura -+. DesbloBueo del 4ire5all.

T3).#. +inal*ente0 ,on,luida la in tala,i&n apare,er un nuevo i,ono en la -arra de tarea . ) te i,ono e un a,,e o rpido para ,ontrolar el 2un,iona*iento de H.AP. #na pri*era poner la inter2az en ,a tellano pul ando el -ot&n dere,ho o-re el *i *o0 re,o*enda,i&n e

apare,er el *en1 Banguage y &lo tiene que ele,,ionar spanis..

2+ De,a&&ollo "o! WA$<


)l ,ontrol de H.AP e realiza *ediante el i,ono ituado en la -arra de noti2i,a,i&n. Pul ando o-re el i,ono de H.AP ,on el -ot&n izquierdo del rat&n e *ue tran toda la op,ione Jver 2igura 1DK. Co*enzare*o ,o*pro-ando i el ervidor He- e t 2un,ionando ,orre,ta*ente5

Mdulo -c 3 "lata4or!a WMM"

)-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T3-. 8ni,ie el navegador He- y navegue a la dire,,i&n .ttpJDDlocal.ost. 9e-e ver una pgina ,on el i,ono de H.AP. 9e lo ,ontrario0 el ervidor He- lo,al no e t 2un,ionando. $i no 2un,iona hay que ini,iarlo utilizando el i,ono de H.AP y ele,,ionando la op,i&n de *en1 8ni,iar todo lo T39. $e pro,eder a ,a*-iar la pgina He- que *ue tra nue tro He-. T39.1. Lorre todo el ,ontenido de e ta ,arpeta y ,opie todo lo ar,hivo de la pgina ;e- de eje*plo utilizado en el *&dulo anterior. T39.2. Co*prue-e navegando a la dire,,i&n http566lo,alho t i vi ualiza la pgina ,olo,ada en u ervidor He-. T#1. .hora lo,al. T#1.1. Lorre todo el ,ontenido de u itio He- tal y ,o*o e hizo en 3'7.1.0 e de,ir0 va,Ee la ,arpeta ;;; de H.AP. T#1.2. Cree tre ,arpeta dentro de la ,arpeta 555 lla*ada 5 plantilla-0 plantilla; y plantilla'. 9e ,o*pri*a la plantilla deliciousI4ruit./ip0 ,ada una en una ,arpeta di2erente. T#1.3. )l o-jetivo e ,on eguir u-i,ar ,ada plantilla en una dire,,i&n He- de u ervidor lo,al0 ,on,reta*ente5 http566lo,alho t6plantilla10 http566lo,alho t6plantilla2 y http566lo,alho t6plantilla'. 9e-e u-i,ar lo ar,hivo de la plantilla ,orre,ta*ente en ,ada ,arpeta al de ,o*pri*irlo. ree3Business3Website3,e!plate./ip y 5ebpilot./ip e pro,eder a tener do itio ;e- di2erente i*ultnea*ente en u ervidor Heervidor. Cay ervi,io .

ele,,ionar a la

entrada de *en1 dire,torio ;;; de la 2igura 1D0 que a-re la ,arpeta donde e ,olo,an la pgina

).1. Servidor 3eb 4 ac5e


)l ervidor He- .pa,he e el ,o*ponente de H.AP en,argado de ervir pgina He- a travQ de la red por el puerto D00 pero por de2e,to0 iguiente prue-a5 T#1. 8ndique a alguno de u ,o*paGero ,ual e He-0 para ello0 http56610.0.0.10 donde 10.0.0.1 de-e Pro-a-le*ente no tenga a,,e o. Para ha-ilitar el a,,e o de de el re to de ordenadore ha ta u ervidor lo,al hay que ,a*-iar la ,on2igura,i&n de .pa,he. ) ta ,on2igura,i&n re ide en un 2i,hero de te4to -a tante e4ten o y ,o*plejo0 puede leer en la do,u*enta,i&n e4i tente en la pgina o2i,ial de .pa,he O22P el 2or*ato de e te 2i,hero. Con2igurar .pa,he para *odi2i,ar u ,o*porta*iento no e uno de lo o-jetivo de e te ,ur o0 pero i realizare*o una pequeGa *odi2i,a,i&n de e ta ,on2igura,i&n0 ,on o-jeto de per*itir el a,,e o a nue tra He- de de toda la red. Bo pa o on lo iguiente 5
i6ura -K. Control de WMM".

&lo per*ite el a,,e o de de el ordenador lo,al. Reali,e la

u dire,,i&n 8P para intentar que a,,eda a u itio iguiente dire,,i&n en el navegador u dire,,i&n 8P.

u ,o*paGero tendr que introdu,ir la u tituirla por

);

Mdulo -c 3 "lata4or!a WMM"

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T#2. 9e pliegue el *en1 de H.AP ,o*o e *o tr& en la 2igura 1D y a,,eda a la op,i&n de *en1 .pa,he U httpd.,on2. 9e-e apare,er en un editor de te4to -u ,ar el iguiente 2rag*ento Japro4i*ada*ente lEnea 2'0K5
<2irectory Vc:/wamp/www/V> ... ... Krder 0en,B7llow 0en, from all 3llow from 12F.0.0.1 </2irectory> Cdi6o '2. ra6!ento del 4ic.ero de con4i6uracin de Mpac.e .ttpd.con4.

un 2i,hero *uy e4ten o donde de-e

T#2.1. Lorre la lEnea 0en, from all y o aGada una al*ohadilla R_S delante #2eny from all. .l introdu,ir delante el ,ar,ter _ .pa,he ignorar la lEnea. #na vez ,a*-iado el 2rag*ento de ,&digo '0 guarde el 2i,hero utilizando la entrada de *en1 .r,hivo U @uardar de de el editor de te4to . T#2.2. Para ha,er e2e,tivo lo ,a*-io e de-e reini,iar del ervidor He- .pa,he. 9e de el

*en1 de H.AP a,,eda a la entrada .pa,he U $ervi,e U Reini,iar $ervi,io. Co*pro-ar ,o*o el i,ono de H.AP ,a*-ia de ,olor0 tra uno nueva ,on2igura,i&n egundo volver al ,olor verde. ) to igni2i,a que la e queda en rojo o naranja0 e ha apli,ado ,orre,ta*ente. $i el i,ono

pro-a-le*ente la *odi2i,a,i&n del 2i,hero de ,on2igura,i&n he,ha ,ontiene alg1n error. T#2.3. Vuelva a oli,itarle a un ,o*paGero que navegue ha,ia la dire,,i&n 8P de u ordenador y ,o*prue-e i e vi ualizan u pgina He-.

).2. "o ia de seguridad


Realizar ,opia de eguridad de todo lo de arrollo que e e tQn realizando en H.AP e pro,e o en,illo. H.AP al*a,ena todo lo ,ontenido ya ean He- o -a e de dato -ajo u ,arpeta de in tala,i&n0 por de2e,to en la ruta cJS5a!p del di ,o duro. Ba ,opia de eguridad ,on i te en ,opiar todo lo ar,hivo 0 pero ante 0 e i*portante detener H.AP ,o*pleta*ente de de el i,ono de ,ontrol. )n ,a o ,ontrario no e podrEa ter*inar la ,opia al e4i tir *ultitud de 2i,hero a-ierto por todo lo ,o*ponente H.AP en eje,u,i&n. Realizare*o un eje*plo de ,opia de eguridad utilizando el ,o*pre or (zip el ,ual per*ite realizar una in,roniza,i&n &lo de lo 2i,hero ,a*-iado de de la 1lti*a ,opia de eguridad0 e to redu,e en gran *edida el tie*po de eje,u,i&n de la ,opia. T#3. # ando el -ot&n dere,ho del rat&n o-re el i,ono de H.AP utili,e la op,i&n del *en1 $alida. 3ra e to el i,ono de H.AP de-e de apare,er0 de lo ,ontrario H.AP igue eje,utndo e y la ,opia de eguridad 2allar. T#3.1. .-ra el e4plorador de Hindo; 0 de de Mi"C li te la ,arpeta raEz del di ,o y -u que la ,arpeta de in tala,i&n de H.AP (cJS5a!pK. Pul e el -ot&n dere,ho o-re la ,arpeta y apare,er un *en1 ,o*o el de la 2igura 170 i tiene in talado (zip apare,er el *en1 indi,ado en la 2igura

Mdulo -c 3 "lata4or!a WMM"

)'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

17. #na vez ter*inado la ,opia de-e re,ordar el ar,hivo ,on e4ten i&n (z que utiliz& para repetir el pro,e o. T#3.2. Ba pri*era ,opia realizada tarda un

tie*po ,on idera-le al tener que ,opiar todo lo ar,hivo 0 ahora realizare*o otro pro,edi*iento * rpido partiendo de la ,opia que ya tene*o . .nte de ,ontinuar ,opie0 aGada o -orre alguno ar,hivo en el dire,torio 555 de H.AP 0 tra e to detenga H.AP. Vuelva a realizar la ,opia ,o*o e indi,& anterior*ente pero 2Eje e en la 2igura 200 en el ,uadro de plega-le e ele,,iona la op,i&n $in,ronizar ar,hivo 0 ,on e ta op,i&n el progra*a analiza la ,opia e4i tente y 2i,hero olo tra-aja ,on lo
i6ura -L. Bac<up con +/ip.

que ,a*-iaron de de la 1lti*a ,opia.

) ta pro,e o tardar *u,ho *eno tie*po.

5+ Le!7uaje de /&o7&a-a"i4! <6<


PCP e un lenguaje de progra*a,i&n para el di eGo de pgina He- din*i,a y e un a,r&ni*o de :1perte@t "re3processor. PCP e t pu-li,ado ,on una li,en,ia ,on iderada li-re y e un lenguaje *uy 2,il de entender y aprender por ,ualquier progra*ador. ) te ,ur o no tiene ,o*o o-jetivo la *anipula,i&n de e te lenguaje0 pero i u u o ya que *u,ho

i6ura ;2. Sincroni/acin con +/ip.

)(

Mdulo -c 3 "lata4or!a WMM"

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

ge tore de ,ontenido e tn e ,rito en e te lenguaje. )l 1ni,o o-jetivo aquE planteado e di2eren,iar la pgina He- din*i,a de la e tti,a y para e te 2in e han preparado una erie de eje*plo . Ca ta ahora e ha tra-ajado ,on pgina C3AB ,uyo ,ontenido e edita-a ,on =otepad??0 ahora e e ,ontenido C3AB e generado por un progra*a PCP 0 el ervidor He- al dete,tar un 2i,hero PCP en vez de enviar el ,ontenido del 2i,hero por la red eje,uta un intQrprete de PCP y Q te devuelve un ,&digo C3AB generado tra la eje,u,i&n progra*a. Ao tre*o e to ,on el iguiente eje*plo. T##. 9e ,o*pri*a el 2i,hero e9e!plosp.p./ip en una nueva ,arpeta dentro del dire,torio ;;; de H.AP 0 por eje*plo ,on no*-re e9e!plosp.p. T##.1. 9e-en apare,er vario 2i,hero 0 uno .php T##.2. =avegue a la dire,,i&n http566lo,alho t6eje*plo php y o- erve la pgina *o trada0 .pa,he ha *o trado la pgina lla*ada inde@..t!l. Para ,o*pro-arlo edite el 2i,hero inde@..t!l ,on =otepad?? y ,o*pare ,on lo vi to en +ire2o4. T##.3. ) ta pgina ,ontiene > enla,e a > pgina . $iga el pri*er enla,e ,on el navegador0 utili,e el *en1 del navegador Ver U C&digo 2uente para ver el ,&digo C3AB devuelto por H.AP. T##.#. +Eje e en el no*-re del 2i,hero que apare,e en la #RB del navegador5 e9e!plo-.p.p. .-ra e te 2i,hero ,on =otepad?? y ,o*prue-e i el ,&digo C3AB del 2i,hero e el *i *o que ha vi to en el pa o anterior ,on +ire2o4. T##.(. Repita e te pro,edi*iento ,on ,ada uno de lo enla,e . on pgina C3AB y otro 2i,hero ,on e4ten i&n

:+ Reali3a"i4! o/"io!al
)4i ten *ultitud de alternativa a H.AP e li tan en el enla,e O21P. 9e la e4i tente 0 e propone que de ,argue de 8nternet la plata2or*a alternativa H.AP lla*ada Z.AP. Z.AP e i*ilar a H.AP pero ,on la pe,uliaridad de er un paquete de o2t;are *ultiplata2or*a0 e i te*a operativo . Z.AP e un a,r&ni*o donde la pri*era letra

de,ir0 e puede in talar en di2erente

ha,e re2eren,ia al i te*a operativo o-re el que 2un,iona JH Hindo; 0 B Binu4 o A Aa,F K y el re to de letra ha,en re2eren,ia a .pa,he0 Ay$IB y PCP. Pro,eda a u in tala,i&n y ,o*prue-e la di2eren,ia e4i tente entre H.AP y Z.AP0 e proponen la iguiente tarea 5 T#(. 9e de el panel de ,ontrol de Hindo; de in tale la plata2or*a H.AP T#(.1. 8n tale Z.AP e intente repetir lo he,ho previa*ente en 3:0. T#(.2. Lu que lo *en1 de ,on2igura,i&n de Z.AP y o- ervar di2eren,ia ,on H.AP.

Mdulo -c 3 "lata4or!a WMM"

))

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 1d % Ba,e de da#o, $=S>L


Conceptos bsicos y ad$inistraci/n

1+ Re,u-e!
9ura,i&n e ti*ada 2 hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero ;orld. ql 3e%cri/cin La e de dato $IB para i*portar en Ay$IB

a/ila"d-. ql.zip La e de dato $IB ,o*pri*ida para Ay$IB


,abla +. ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O2:P He- o2i,ial de Ay$IB0 <http566;;;.*y ql.,o*6!.

.+ I!#&odu""i4!
#na -a e de dato in2or*ti,a e un al*a,Qn de dato en 2or*ato digital. )l o2t;are en,argado de ge tionar e to dato e deno*ina $i te*a de @e ti&n de La e de 9ato J$@L9K y e t dedi,ado a 2a,ilitar el a,,e o a lo dato de 2or*a rpida y e tru,turada. )4i ten *ultitud de 2or*a de organizar la in2or*a,i&n en un i te*a in2or*ti,o0 a E urge el ,on,epto de *odelo de dato . #n *odelo de dato ha,e re2eren,ia al *odo en que e al*a,ena la in2or*a,i&n0 a,tual*ente0 el * utilizado e el *odelo rela,ional0 pero e4i ten deter*inada apli,a,ione en la que e te tipo de *odelo de dato no e &pti*o. @oogle0 +a,e-oo/0 3;itter y 9igg on eje*plo donde el *odelo rela,ional no llega a ,u-rir la ne,e idade de u apli,a,ione He-0 de he,ho utilizan otro no rela,ionale lla*ado Lig3a-le J@oogleK y Ca i te*a de -a e dato andra J+a,e-oo/0 3;itter y 9iggK.
Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

#n eje*plo de e2i,ien,ia lo *ue tra hoy en dEa Ca

andra iendo e ,apaz de e ,ri-ir en di ,o u dato

una 2<00 ve,e * rpido que Ay$IB0 una de la -a e de dato rela,ionale * utilizada . )n 2007 na,i& un *ovi*iento en ,ontra de la -a e de dato rela,ionale 0 lla*ado =o$IB0 que agrupa a todo e to i te*a alternativo y *ue tra ,o*o el *odelo rela,ional pre enta erio in,onveniente . . lo largo del ,ur o apare,er una -a e de dato =o$IB utilizada en uno de lo CA$. Ba *ayorEa de lo CA$ e tudiado en e te ,ur o utilizan el *odelo de -a e de dato rela,ionale y el lenguaje $IB. $IB e un lenguaje de ,on ulta para -a e de dato rela,ione e tandarizado i e tra-ajara a ini,ial*ente por .=$8 y ,on2ir*ado por 8$F. ) te lenguaje eje,uta ,on ulta de dato 0 Q ta 2a,ilitan la progra*a,i&n de o2t;are ya que0 una ,on ulta puede equivaler a uno o * progra*a nivel de regi tro o-re una -a e de dato .

)n e ta e i&n e tratan lo ,on,epto - i,o de la -a e de dato rela,ionale 0 no e ,onte*plar el lenguaje $IB al no er ne,e ario para lo o-jetivo del ,ur o0 aunque u ,ono,i*iento e o-ligatorio i e planea progra*ar apli,a,ione He-. =o ,entrare*o en la -a e de dato Ay$IB la ,ual e un o2t;are di tri-uido -ajo li,en,ia do-le0 por un lado e li-re J@PBK pero tiene alguna li*ita,ione 5 =o e puede *odi2i,ar Ay$IB para redi tri-uirlo y ,o-rar por la *odi2i,a,i&n. =o e puede in,luir Ay$IB dentro de otro o2t;are0 e de,ir0 no e puede di tri-uir o2t;are junto ,on Ay$IB ,o*o un olo o2t;are integrado. H.AP trae pre,on2igurado el ervidor Ay$IB0 en e te *&dulo &lo realizare*o uno ,a*-io *Eni*o en la ,on2igura,i&n y *o trare*o alguno eje*plo de u o.

1+ Ad-i!i,#&a"i4! de $'S>L
Ba -a e de dato Ay$IB e el ter,er ,o*ponente de H.AP. )n el *en1 de ad*ini tra,i&n de H.AP di pone*o de un u-*en1 dedi,ado a u ge ti&n y una apli,a,i&n lla*ada phpAy.d*in para 2a,ilitar la ad*ini tra,i&n del ervidor Ay$IB de de un navegador. ) ta apli,a,i&n0 -ien ,on2igurada0 per*ite al ad*ini trador ,one,tar e a *otor de la -a e de dato realizar tarea ad*ini trativa puede ,o*pro*eter la eguridad de todo el ervidor. de de ,ualquier punto de la red0 a E0 puede in ne,e idad de a,,eder 2E i,a*ente a la *quina pero0 *al ,on2igurada0

4.1. "onfiguraci2n de seguridad


)l pri*er pa o tra la in tala,i&n de Ay$IB e realizar una *Eni*a ,on2igura,i&n de eguridad en el ervidor. Con i tir en e ta-le,er una ,ontra eGa para el ad*ini trador de la -a e de dato 0 de lo ,ontrario0 todo el ervidor e tar ,o*pro*etido0 e podrEa a,,eder de de ,ualquier apli,a,i&n He- a ,ualquier otra apli,a,i&n He- alojada en el ervidor. Co*pro-are*o i Ay$IB 2un,iona ,orre,ta*ente0 e ta-le,ere*o una ,ontra eGa para el ad*ini T

trador0 y tra e to ha-ilitare*o el a,,e o re*oto para poder ge tionar la -a e de dato de de ,ualT

)K

Mdulo -d 3 Base de datos MPSTL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

quier equipo de la red. T#+. #tilizare*o un progra*a e ,rito en PCP *uy e4tendido para 2a,ilitar la ge ti&n lla*ado

p.pM1Md!in y que viene integrado en H.AP. T#+.1. )n el *en1 de H.AP utili,e la entrada phpAy.d*in. $e a-rir el navegador de 8nternet y apare,er el progra*a de ge ti&n de la -a e de dato Ay$IB. .uto*ti,a*ente e ,one,ta a la -a e de dato Ay$IB de u equipo0 y 2Eje e ,o*o no ha oli,itado ninguna ,ontra eGa. T#+.2. Bea el *en aje de eguridad en rojo al 2inal de la pgina. Para olu,ionarlo a,,eda a la pe taGa Privilegio donde e li tan lo u uario e4i tente en la -a e dato 0 el u uario ad*ini trador e el lla*ado root. )n la 2igura 21 e te ad*ini trador apare,e ' ve,e ,orre ponT diente a tre ,one4ione 5 de de la 8P 12(.0.0.10 de de local.ost y de de 551 J,ualquier lugarK.

Pe Pe taGa taGade de privilegio privilegio

)di,i&n )di,i&ndel delu u uario uario ad*ini ad*ini trador trador i6ura ;-. Ca!bio de contrasea del ad!inistrador.

T#+.3. ) ta-lez,a la *i *a ,ontra eGa para la ,o*pli,ado re ta-le,erla.

tre

,one4ione

per*itida

al ad*ini trador

JrootK u ando lo tre i,ono indi,ado en la 2igura 210 ea ,uidado o i olvida la ,ontra eGa er

T#+.#. Cierre el navegador y vuelva a entrar en phpAy.d*in0 pro-a-le*ente o-tendr un error indi,ando a,,e o denegado. . partir de ahora e ne,e ario introdu,ir la ,ontra eGa para entrar pero no apare,e ning1n lugar donde poder introdu,irla. T#+.(. Realizare*o un ,a*-io en la ,on2igura,i&n de phpAy.d*in para 2orzarlo a preguntar la ,ontra eGa y el u uario. )dite ,on =otepad?? 2i,hero con4i6.inc.p.p ituado en la ,arpeta del di ,o ;a*p U app U php*yad*in'.:.10.
/Z 1er2er: localhost #1( Z/ _i``O _cfg#Q1er2ersQ(#_i(#Q2er3oseQ( > QlocalhostQO _cfg#Q1er2ersQ(#_i(#QhostQ( > QlocalhostQO _cfg#Q1er2ersQ(#_i(#QportQ( > QQO _cfg#Q1er2ersQ(#_i(#QsocXetQ( > QQO _cfg#Q1er2ersQ(#_i(#QconnectSt,peQ( > QtcpQO

Mdulo -d 3 Base de datos MPSTL

)L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa _cfg#Q1er2ersQ(#_i(#Qe4tensionQ( > Qm,sAliQO //_cfg#Q1er2ersQ(#_i(#QauthSt,peQ( > QconfigQO &cfg%(4er*ers()%&i)%(auth5type() ' (cookie(_cfg#Q1er2ersQ(#_i(#QuserQ( > QrootQO _cfg#Q1er2ersQ(#_i(#QpasswordQ( > QQO _cfg#Q1er2ersQ(#_i(#Q7llow;o"asswordQ( > trueO Cdi6o '-. ra6!ento del arc.i%o de con4i6uracin de p.pM1Md!in lla!ado con4i6.inc.p.p.

T#+.+. Reali,e el ,a*-io indi,ado en el ,&digo '1 que ,on i te en ,a*-iar el tipo de autenti,a,i&n Jaut.It1peK de con4i6 a coo<ie. )n el ,&digo e ha ,o*entado una lEnea ,on do-le -arra0 pero i de ea0 -a ta ,on ,a*-iar la pala-ra con4i6 por coo<ie. @uarde el 2i,hero e intente entrar en phpAy.d*in de nuevo ,on el u uario root y la ,ontra eGa.

T#). #na vez a egurada la in tala,i&n lo,al de Ay$IB ha-ilitare*o el a,,e o re*oto para per*itir ,one4ione de de ,ualquier punto de la red al ad*ini trador de la -a e de dato . 9e-e poner e de a,uerdo ,on alg1n ,o*paGero para realizar prue-a de ,one4i&n un ordenador a otro. T#).1. F-tenga la dire,,i&n 8P de u equipo y de de el ordenador de otro ,o*paGero intente

entrar en u phpAy.d*in u ando la dire,,i&n http56610.Z.Z.Z6php*yad*in donde -2.F.F.F de-e u tituirlo por u dire,,i&n 8P. F-tendr un *en aje indi,ado el a,,e o prohi-ido. T#).2. Ba la vi ita olu,i&n e a nue tro pare,ida a la realizada en el ervidor He-. )n e te ,a o la e lla*a

*&dulo de in tala,i&n de H.AP donde e autoriza-an ,on2igura,i&n e t en un 2i,hero que ,on2igura la ruta Dp.p!1ad!in del ervidor He-0 e ta ruta alias y u ,on2igura,i&n e a,,e i-le de de el *en1 de H.AP. .,,eda a editar el alias p.pM1Md!in iguiendo la indi,a,i&n de la 2igura 225 .pa,he U 9ire,torio .lia U http566lo,alho t6php*yad*in U )dit alia . T#).3. $e a-rir auto*ti,a*ente un editor de te4to 0
from all utilizando el ,ar,ter _. Cuando ter*ine reini,ie el i6ura ;;. Edicin de alias en WMM".

,a*-ie la ,on2igura,i&n ,o*o e indi,a en el ,&digo '20 ,on i tente en ,o*entar la lEnea [0en, ervidor .pa,he de de el *en1 de H.AP.
G2irectory Vc:/wamp/apps/phpm,admin3.4.10.1/V5 Kptions 6nde4es Dollow1,m@inXs Multi$iews 7llowK2erride all Krder 0en,B7llow #2eny from all 7llow from 12F.0.0.1 G/2irectory5 Cdi6o ';. Mcti%ar el acceso re!oto a p.pM1Md!in en Mpac.e.

T#).#. Co*prue-e de nuevo el a,,e o a u -a e de dato de de el ordenador de un ,o*paGero. 9e-erEa apare,er la pgina de entrada oli,itando u uario y ,ontra eGa.

*2

Mdulo -d 3 Base de datos MPSTL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

4.2. 'esti2n de usuarios y rivi#egios.


)n un i te*a Ay$IB -ien ge tionado nun,a e de-e tra-ajar ,on el u uario ad*ini trador. )l

u uario ad*ini trador e utilizar olo para ,rear -a e de dato y otro u uario . Cada u uario entrar en el i te*a ,on u no*-re de u uario y &lo tendr a,,e o a aquella -a e de dato a ignada por el ad*ini trador. Con e te *odelo de tra-ajo e puede ,o*partir un *i *o ervidor de -a e de dato entre *u,ho

u uario y apli,a,ione 0 de he,ho0 utilizare*o un u uario di tinto y una -a e de dato di tinta para ,ada ge tor de ,ontenido in talado a lo largo del ,ur o. Co*o eje*plo ,reare*o do u uario para realizar prue-a a ignando di2erente -a e de dato a ,ada uno de ello 0 e te pro,edi*iento e repetir *ultitud de ve,e CA$. T#-. .,,eda ,o*o ad*ini trador a u i te*a a lo largo del ,ur o0 iendo una tarea ha-itual durante la in tala,i&n de ,ualquier

Ay$IB ,on phpAy.d*in. Cree una nueva -a e de dato lla*ada clientes0 u ando la pe taGa La e de dato . )n el ,uadro *o trado en la 2igura 2' introduz,a el no*-re de la nueva -a e de dato .
i6ura ;'. Crear base de datos.

T#-.1. )ntre en la nueva -a e de dato ,reada de de el r-ol de -a e de dato J ituado a la izquierdaK y apare,er un ,uadro para ,rear una nueva ta-la. )n la parte uperior a,,eda a Privilegio 0 apare,e al de plegar el *en1 A y utili,e el enla,e .gregar nuevo u uario. Ver un 2or*ulario ,o*o el de la 2igura 2: donde tiene que ,rear un nuevo u uario lla*ado dptoclientes ,on a,,e o de de el ervidor local Jequipo lo,alK y de-e e ta-le,erle una ,ontra eGa tal y ,o*o e *ue tra en la 2igura 2:. =o *odi2ique la e,,i&n de privilegio glo-ale para un u uario0 erEa un error de eguridad0 e a e,,i&n de-e per*ane,er todo inha-ilitado. .l 2inal de la pgina en,ontrar el -ot&n Continuar. T#-.2. .hora ,reare*o un u uario lla*ado stoc< y una -a e de dato a o,iada en un olo pa o *ediante otro pro,edi*iento. ) te er el *Qtodo a utilizar a lo largo del ,ur o. =avegue al ini,io de phpAy.d*in0 puede pul ar o-re el logotipo y a,,eda de nuevo a la pe taGa Privilegio . T#-.3. 3enga ahora en ,uenta que no e t en la pgina de privilegio de una deter*inada -a e de dato 0 e t en la pgina de privilegio de todo el i te*a Ay$IB. #tili,e el enla,e .gregar un nuevo u uario y apare,er un 2or*ulario pare,ido al de la 2igura 2:. 9e igual *odo ,ree un u uario stoc< que pueda a,,eder de de local.ost ,on una ,ontra eGa pero *arque &lo la op,i&n Crear -a e de dato ,on el *i *o no*-re y otorguar todo lo privilegio . T#-.#. Co*prue-e ,o*o stoc<. T#-.(. .-andone phpAy.d*in y vuelva a entrar ,on lo u uario ,reado 5 stoc< y dtpoclientes. Co*prue-e ,o*o al entrar ,on ,ada uno de lo o-re la que tiene per*i o . u uario olo de apare,en la -a e de dato e ha ,reado un u uario lla*ado stoc< y una -a e de dato lla*ada

Mdulo -d 3 Base de datos MPSTL

*-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura ;(. Concesin de pri%ile6ios para un usuario en una base de datos.

4.3. "once tos b&sicos en bases de datos re#aciona#es


3ra-ajare*o ,on un eje*plo ,reando una i*ple -a e de dato 2a*iliar y vere*o ,&*o au*enta la ,o*plejidad eg1n lo dato que de ee*o al*a,enar. T#9. .nterior*ente ,rea*o un u uario dtpoclientes ,on a,,e o a la -a e de dato clientes ,reada por el ad*ini trador. Repita el pro,e o para ,rear una -a e de dato y un u uario lla*ado 4a!ilia. T#9.1. .,,eda a phpAy.d*in ,on el u uario 4a!ilia re,iQn ,reado. T#9.2. Cree una ta-la lla*ada lla*ada personas y aGada lo iguiente ,a*po 5

Ca*po lla*ado no!bre de tipo %arc.ar longitud 1< Jpor tanto olo ad*ite 1< letra en el no*-reK Ca*po lla*ado apellidos de tipo %arc.ar Jelegir longitud ade,uadoK Ca*po lla*ado 4ec.aIalta5 Vque tipo de-e ponerW Ca*po correoIelectrnico5 Vque tipo de-e ponerW T#9.3. .Gada alguno regi tro 0 al *eno do para poder eguir tra-ajando T#9.#. V$e puede aGadir un ,a*po a la ta-la una vez que ,ontiene dato W Por eje*plo0 intente aGadir el ,a*po telU4ono8 y tra e to0 li te lo regi tro utilizando la pe taGa )4a*inar VCo*o apare,e el ,a*poW T#9.(. Rellene el ,a*po telQ2ono para lo u uario .

*;

Mdulo -d 3 Base de datos MPSTL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

$i navega*o a la pe taGa ) tru,tura de la ta-la personas Jver 2igura 2<K o- ervare*o una adverten,ia indi,ando que no e ha de2inido un Endi,e. Ba -a e de dato ne,e itan Endi,e para lo,alizar regi tro e2i,iente*ente. #n eje*plo de Endi,e e el n1*ero de 9=80 ,on i te en a ignar un 1ni,o n1*ero a ,ada per ona 2E i,a quedando inequEvo,a*ente identi2i,ada.
Pe Pe taGa taGae e tru,tura tru,tura

.Gadir .Gadirnuevo nuevo,a*po ,a*po i6ura ;). Estructura de la tabla personas.

T(1. .Gada*o un Endi,e a la ta-la de per ona . =avegue ha ta la ta-la personas y ele,,ione la pe taGa ) tru,tura. .Gada un ,a*po *ar,ando la op,i&n .l ,o*ienzo de la ta-la y pul ando -ot&n Continuar. T(1.1. Bla*e al nuevo ,a*po 890 e ta-lez,a el tipo ,o*o 8=30 ele,,ione en el ,uadro el

de plega-le endi,e la op,i&n PR8A.Rf0y a,tive la ,a illa .#3FN8=CR)A)=3. T(1.2. #tili,e el -ot&n @ra-ar0 de-iQndo e a E ,rear el Endi,e. Para ,o*pro-ar lo re ultado hay que a,,eder a la pe taGa )4a*inar y ver ,o*o todo lo ,on e,utiva un n1*ero. T(1.3. Prue-e aGadir otra per ona a la ta-la y no rellene el ,a*po 89. Ver ,o*o la -a e de dato a igna auto*ti,a*ente un valor al ,a*po 89 no ,oin,idiendo ,on ninguno de lo e4i tente . 3ra-ajar dire,ta*ente en la -a e dato puede llegar a er ,o*plejo0 para ello e realizan progra*a in2or*ti,o en,argado de e ta tarea . Partiendo de e ta i*ple -a e de dato ,reare*o rela,ione para al*a,enar * dato y vere*o ,o*o au*enta la ,o*plejidad. )l o-jeto de la rela,ione e *odelar la realidad de lo dato que e quieren al*a,enar0 por eje*plo0 *odelare*o rela,ionale la rela,i&n hijo 6padre y e*pleado6je2e en la -a e dato . Para ello ne,e itare*o en la -a e una nueva ta-la que al*a,ene e ta rela,ione . )l *odo de al*a,enar rela,ione de dato regi tro tienen a ignado de *anera

e -a an en la utiliza,i&n de Endi,e . Para entender el *odo de realizarla

upondre*o un

,ontenido ini,ial en la ta-la de per ona 0 *o trado en la ta-la D0 y otro ,ontenido en la ta-la de rela,ione 0 *o trada ta-la 70 e tando la rela,ione eg1n el *odelo rela,ional -a ado en Endi,e .

Mdulo -d 3 Base de datos MPSTL

*'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

I3 0 1 2 ' : < > (

:o

bre

ori5en 0 1 0 1 2 : 2 ' 2

relacion progenitor progenitor progenitor progenitor je2e progenitor je2e progenitor progenitor

de%tino < < : : ' > < ( (

Ro ario %uan AarEa Pedro $ilvia .ntonio =atividad Bui

,abla K. E9e!plo de tabla de personas.

,abla L. E9e!plo de tabla de relaciones.

Para entender el

igni2i,ado de la ta-la de rela,ione

hay que ,on iderar que tanto el ,a*po origen

,o*o el ,a*po de tino ha,en re2eren,ia a regi tro de la ta-la de per ona . )l igni2i,ado 2ila por 2ila e el iguiente Jlla*are*o regi tro a ,ada 2ilaK5 Regi tro 15 Ro ario e *adre de .ntonio. Regi tro 25 %uan e padre de .ntonio. Regi tro '5 Ro ario e *adre de $ilvia. Regi tro :5 %uan e padre de $ilvia. Regi tro <5 AarEa e je2a de Pedro. Regi tro >5 $ilvia e *adre de =atividad. Regi tro (5 AarEa e je2a de .ntonio. Regi tro D5 Pedro e padre de Bui . Regi tro 75 AarEa e *adre de Bui . .de* de la rela,ione e4plE,ita de la ta-la 7 e pueden e4traer otra i*plE,ita 5 $ilvia y .ntonio on her*ano . Ro ario y %uan tienen 2 hijo . =atividad e nieta de Ro ario y de %uan0 y ade* Ro ario y %uan tienen &lo una nieta. .ntonio e tEo de =atividad y tiene &lo un o-rino. AarEa tiene do e*pleado y un hijo. $iendo *ali,io o0 e podrEan intentar e4traer alguna ,on,lu ione * 0 e te pro,e o e lla*a *inerEa de dato 0 pero no e o-jeto de e tudio en e te ,ur o. o-rina de .ntonio.

*(

Mdulo -d 3 Base de datos MPSTL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T(1. Cree una nueva ta-la lla*ada rela,ione tipo je2e.

,on lo

iguiente

,a*po 5 ori6en de tipo 8=30

relacin var,harJ<0K y destino de tipo 8=3. Cree al *eno do rela,ione de tipo padre y otra do de

4.4. Im ortaci2n y ex ortaci2n


Ba i*porta,i&n y e4porta,i&n de lo dato entre di2erente lo,al de-en er *igrado a un ervidore Ay$IB e una tarea ,lave y

,o*1n ,uando e di eGan itio He- -a ado en PCP y Ay$IB. Bo di eGo realizado en el ordenador ervidor de 8nternet una vez ter*inado 0 e te pro,e o i*pli,a una e4porta,i&n de de el equipo lo,al de tra-ajo y una i*porta,i&n en el equipo re*oto. ) ta tarea e i te*ti,a0 ,on ta ie*pre de lo *i *o pa o pero hay que e ,uidado o en el pro,e o puede er e4portada de do *anera 5 por ta-la o la -a e de dato

pue to que la -a e de dato

,o*pleta. $e realizar una pri*era prue-a para poner de *ani2ie to la di2eren,ia entre la e4porta,i&n de una -a e de dato ,o*pleta y la e4porta,i&n &lo de lo dato de la -a e dato . T(2. ConQ,te e a u phpAy.d*in utilizando el u uario ,reado anterior*ente lla*ado dptoclientes. T(2.1. .-ra ,on =otepad?? el 2i,hero 5orld.sBl u*ini trado ,on e te *&dulo. Vea la inta4i de la enten,ia $IB pero no *odi2ique nada.

T(2.2. .,,eda a la -a e de dato clientes de de phpAy.d*in ,on el u uario dptoclientes y utili,e la pe taGa 8*portar. Lu que un ,uadro donde pueda in,luir un 2i,hero0 ,oloque el 2i,hero 5orld.sBl y pul e el -ot&n Continuar. T(2.3. Co*prue-e la tre ta-la de dato i*portado u ando la pe taGa )4a*inar VCree que la ,iudade pertene,iente un paE W0 VPuede

e4i te alguna rela,i&n que per*ite li tar toda ,ada paE W. 3oda e ta ,ue tione

averiguar ,uanto idio*a di2erente ha-lan en ,ada paE W0 VpodrEa e ti*ar la po-la,i&n rural de e pueden re olver analizando la rela,ione .

T(3. 8ntente ahora i*portar 2i,hero sa<ila3db.sBl./ip pro-a-le*ente o-tenga un error. )l *otivo e que e te 2i,hero ,ontiene una -a e de dato entera0 no la ta-la por eparado ,o*o el anterior. T(3.1. Para poder i*portar la -a e de dato entera ne,e ita realizar la opera,i&n ,on un u uario ,on privilegio u2i,iente ,o*o para ,rear nueva -a e de dato . .-andone phpAy.d*in y entre ahora ,o*o ad*ini trador. T(3.2. 8ntente de nuevo i*portar el 2i,hero sa<ila3db.sBl./ip y tenga pa,ien,ia0 puede tardar un po,o. T(3.3. Co*prue-e la ,o*plejidad de e ta nueva -a e de dato 0 e t repleta de ta-la rela,ione . T(#. Para ter*inar intente realizar la i*porta,i&n de 5orld.sBl en la -a e de dato del ervidor del ,ur o y ,o*prue-e la i*porta,i&n. Cuando ter*ine -orre la ta-la ya que ne,e itar e ta -a e de dato para pro-ar diver o ge tore de ,ontenido e tudiado en el ,ur o. y

Mdulo -d 3 Base de datos MPSTL

*)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

2+ Co!"e/#o, ava!3ado,
$e re,o*ienda para evitar 2uturo pro-le*a ,on lo CA$ realizar una ,on2igura,i&n adi,ional de Ay$IB. ) ta ,on2igura,i&n e de-e realizar en el ar,hivo de ,on2igura,i&n !1.ini. T((. 9e de el *en1 H.AP a,,eda a la entrada Ay$IB U *y.ini. .pare,er en un editor de te4to el 2i,hero de ,on2igura,i&n de Ay$IB0 &lo e re,o*ienda ,a*-iar el tipo de al*a,ena*iento por M1ISMM de2e,to ya que pode*o tener pro-le*a ,on alguno ge tore de ,ontenido . #tilizare*o

de-ido a que per*ite inde4ar ,a*po de te4to ,o*pleto . 9e-e -u ,ar la e,,i&n O*y qldP y realizar el ,a*-io indi,ado en el ,&digo ''. $i no lo ha,e ahora0 lo tendr que ha,er a lo largo del ,ur o.
%mysqld) port>330' default.storage.engine>6y7436 Cdi6o ''. Cpciones de con4i6uracin del ser%idor M1STL.

T(+. $e re,o*ienda ta*-iQn utilizar @oogle para en,ontrar in2or*a,i&n re,upera,i&n indi,ado.

o-re el pro,e o de

re,upera,i&n de una ,ontra eGa de ad*ini tra,i&n de Ay$IB perdida. Prue-e el pro,e o de

**

Mdulo -d 3 Base de datos MPSTL

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 2a % Wi?i,
0o1u#i1i y &edia#i1i

1+ Re,u-e!
9ura,i&n e ti*ada5 2 hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero do/u;i/i"2012"01"2<a.tgz 3e%cri/cin 9o/u;i/i in tala-le

*ohd ha/ir"o Pyra*id"><<,2':.zip Plantilla para 9o/u;i/i patron"linea.png0 patron",ir,ulo.jpg Patrone de 2ondo para He*edia;i/i"1.1D.'.tar.gz *edia;i/i"logo.png Hi/ili-ro "deporte .4*l Hi/ili-ro "juego populare .4*l Hi/ili-ro "arte ",ulinaria .4*l
,abla -2.

AediaHi/i in tala-le. Bogotipo Hi/i )4porta,i&n de de Hi/iLoo/ )4porta,i&n de de Hi/iLoo/ )4porta,i&n de de Hi/iLoo/

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O2<P Pgina o2i,ial de 9o/uHi/i0 <http566;;;.do/u;i/i.org6!. O2>P Pgina o2i,ial de *edia Hi/i0 <http566;;;.*edia;i/i.org6;i/i6AediaHi/i6e !. O2(P 9e ,arga pu-li,a de ;i/i 0 <http566du*p .;i/i*edia.org6-a,/up"inde4.ht*l!. O2DP Hi/iLoo/ 0 <http566e .;i/i-oo/ .org!.

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.+ I!#&odu""i4!
#n 5i<i e un itio He- ,ola-orativo donde diver o u uario van ,reando y *odi2i,ando pgina . )l tQr*ino viene la original*ente la pala-ra ;i/i proveniente del ha;aiano y igni2i,a rpido. Ba apli,a,i&n * 2a*o a de un 5i<i e 5i<ipedia0 que no e * que una en,i,lopedia ,ola-orativa. Bo Hi/i proye,to on *uy utilizado en la genera,i&n do,u*enta,i&n de de *anera ,ola-orativa0 e puede de,ir0 que e una
i6ura ;*. oto6ra4?a de Wi<i3Wi<i

herra*ienta *uy 1til para realizar -a e de ,ono,i*iento donde todo lo i*pli,ado pueden ,a*-iar ,ualquier parte del ,ontenido de *anera in tantnea. Ftra ventaja e que on ge tore de ,ontenido *uy 2,ile de *antener y la in2or*a,i&n al*a,enada puede *igrar e 2,il*ente entre itio He- al u ar una inta4i online. 9e entre la prin,ipale ,ara,terE ti,a de un Hi/i de ta,an5 Control de ,a*-io 5 Per*ite ver y ,o*parar todo lo ,a*-io de ,ada pgina pudiQndo e e tndar y utilidade de e4porta,i&n

re taurar ,ualquier ver i&n anterior0 en un Hi/i nun,a e -orra nada. Control de pa* y vandali *o5 ) una de la *ayore plaga hoy en dEa en la red0 pgina llena de enla,e -a ura o per ona que *odi2i,ando pgina llegan a e ,ri-ir -ar-aridade . Cuando e tra-aja ,on Hi/i ,errada el pro-le*a de apare,e. )di,i&n i*ultnea y re olu,i&n de ,on2li,to 5 Bo Hi/i llevan un ,ontrol o-re la pgina que e e tn editando0 in2or*ando a lo u uario i e tn -loqueada .

)n e te ,ur o tra-ajare*o ,on 9o/u;i/i y Aedia;i/i0 ade* de la in tala,i&n y ad*ini tra,i&n inten T tare*o i*portar dato de otra ;i/i p1-li,a e4i tente en 8nternet.

1+ Do?u)i?i
9o/u;i/i e el ge tor de ,ontenido * ,ono,i*iento in2or*ti,o . .nte de ,o*enzar ,on la in tala,i&n y ad*ini tra,i&n alu*no tra-ajen e propone realizar un ejer,i,io para 2a*ilia T inta4i utilizada en un Hi/i e t i*ple utilizado en el ,ur o. ) 2,il de in talar y *antener in ne,e idad de di poner de *u,ho re,ur o ni y e t pen ado para ,rear rpida*ente Hi/i

rizar e ,on un Hi/i. )n e te ejer,i,io ini,ial para que lo

e ha preparado una in tala,i&n de 9o/u;i/i ,on una pgina o-re ella. $e vr ,o*o la in ,ono,i*iento del 2un,iona*iento de itio He-.

pen ada para 2a,ilitar la parti,ipa,i&n a per ona

Con e ta pri*era tarea no 2a*iliarizare*o ,on e ta inta4i 5

*K

Mdulo ;a 3 Wi<is

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T(). Cone,te ,on el ervidor del pro2e or0 el ,ual tiene un Hi/i in talado y rellene alguno tQr*ino para 2a*iliarizar e ,on la inta4i Hi/i y el editor integrado. $eg1n intente editar la pgina podr en,ontrar que alguna e tn -loqueada por otro u uario 0 de-e -u ,ar una li-re. T().1. 9e-e ,rear una e tru,tura en el do,u*ento utilizando ,a-e,era 0 a E 9o/uHi/i le aGadir a u pgina una ta-la de ,ontenido y per*itir la edi,i&n por zona . T().2. )n una de la Clasi4icacin 6anadera. T().3. )n otra e,,i&n ,ree una li ta de -olo ,o*o la de tipos de 6anader?a. T().#. Con iga poner alguna pala-ra en negrita0 aGada una nota al pie e intente ,olo,ar alguno e*oti,ono . T(-. .hora pro-are*o lo enla,e 0 para ello0 rellene la li-reta de dire,,ione . =o edite la pgina ,o*pleta enla,e olo la e,,i&n para no inter2erir ,on lo de* alu*no . 3enga en ,uenta que e to on e4terno . nueva pgina y pro-e*o el ge tor de i*gene integrado en 9o/uHi/i. Cada e,,ione ,reada aGada una nu*era,i&n de igual *odo que e t en

T(9. Cree*o

alu*no de-e ,rear u propia pgina ,on u no*-re. Ba pgina de-e partir de de la pgina prin,ipal Jver el eje*plo del pro2e orK. 9entro de ella intente ,olo,ar una 2otogra2Ea que de-e de ,argar de 8nternet a u di ,o y de puQ u-irla en el Hi/i . .linee la i*agen a la dere,ha.

T+1. $u-a 2i,hero -inario 0 por eje*plo0 ar,hivo P9+ utilizando el ge tor de i*gene 6ar,hivo . 9e-e ,rear un e pa,io de no*-re nuevo para que no e *ez,len lo ar,hivo de todo lo ,o*pa T Gero del ,ur o. T+1. Con ultando la guEa de inta4i in,luida en 9o/uHi/i intente ha,er alg1n tipo de ta-la en una pgina0 ,o*prue-e ,o*o puede re ultar de in,&*odo. T+2. Con ulte la revi ione de al *eno 2 pgina del Hi/i y ,o*pare la *odi2i,a,ione en la 1lti*a a,tualiza,i&n de ,ada una de ella . T+2.1. Reali,e alguna *odi2i,a,i&n en una pgina del Hi/i y alve di,ha pgina. Co*pare la u2rida

di2eren,ia entre la pgina a,tual y la anterior *ediante el i te*a de revi ione . T+2.2. 8ntente re,uperar la pgina original.

4.1. Insta#aci2n de Do6u3i6i


Ba 1lti*a ver i&n de 9o/uHi/i e puede de ,argar dire,ta*ente de de la pgina o2i,ial O2<P0

alternativa*ente puede u ar la ver i&n in,luida en el *aterial de e te *&dulo. )l ar,hivo original e t en 2or*ato tar.6/ y Hindo; no oporta la de ,o*pre i&n de e te tipo de ar,hivo 0 ne,e itare*o un de ,o*pre or ,o*o por eje*plo (zip . 9o/u;i/i no utiliza -a e de dato $IB para el al*a,ena*iento de u dato por lo que i*pli2i,a tanto la in tala,i&n ,o*o la ,opia de eguridad. Para realizar la in tala,i&n iga e to pa o 5

Mdulo ;a 3 Wi<is

*L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T+3. 9e ,argue la 1lti*a ver i&n de 9o/u;i/i de de la pgina o2i,ial o utili,e el 2i,hero u*ini trado ,on el *&dulo. T+3.1. # e el *en1 de H.AP para a-rir el dire,torio 555 y ,ree un nueva ,arpeta en el itio He- lo,al por eje*plo0 ,on el no*-re do<u5i<i. T+3.2. .-ra el ar,hivo de ,argado do<u5i<i3@.t6/ ,on el progra*a de ,o*pre or y e4traiga todo el ,ontenido en la nueva ,arpeta ,reada. $e pueden ele,,ionar todo lo ar,hivo en el progra*a de de ,o*pre i&n y arra trarlo ,on el rat&n a la ,arpeta de tino0 2Eje e en la 2igura '0 donde e arra tran 2i,hero de de (zip a una ,arpeta. T+3.3. $i la de ,o*pre i&n e ,orre,ta0 navegando a la dire,,i&n http566lo,alho t6do/u;i/i de-e apare,er un Hi/i va,Eo. $i en el pa o 3>'.1. ,re& una ,arpeta ,on di2erente no*-re0 enton,e de-er navegar a la dire,,i&n http566lo,alho t6*iN,arpeta0 ,arpeta que ha ,reado. 3ra e te pro,e o tene*o un Hi/i operativo pero in ,on2igurar0 de he,ho0 i e deja 2un,ionando a E pode*o perder el ,ontrol del itio0 ,ualquiera podrEa ro-arlo. 3odo lo CA$ tienen un pro,e o de in tala,i&n y6o ,on2igura,i&n y uele realizar e de de un navegador. Para ,on2igurar do<u5i<i hay que navegar ha ta la pgina de in tala,i&n5 T+#. =avegue a la pgina del Hi/i http566lo,alho t6do/u;i/i6in tall.php donde apare,er una pgina titulada Do<uWi<i Installer. T+#.1. )n la parte uperior dere,ha ele,,ione el idio*a de in tala,i&n es ,on iguiendo a E que e *ue tren la pgina en ,a tellano. T+#.2. Rellene lo ,uadro donde dato oli,itado en el 2or*ulario y re,uerde el no*-re de u uario y itio. +Eje e en el y tiene tre la polEti,a de edi,i&n de pgina iendo !iIcarpeta el no*-re de la

,ontra eGa que introduz,a0 po terior*ente lo ne,e itar para ad*ini trar el PolEti,a de .CB ini,ial0 Q ta e op,ione . $ele,,ione la que le intere e para u Hi/i. T+#.3. 3ra 2inalizar e

*uy i*portante -orrar el ar,hivo de in tala,i&n install.p.p0 de lo

,ontrario ,ontinuar ,on el itio de protegido. .-ra el dire,torio ;;; de de el *en1 de H.AP 0 lo,ali,e el ar,hivo install.p.p dentro de la ,arpeta del Hi/i y -&rrelo. )n 3>:.2. e ele,,ion& una polEti,a para el Hi/i0 e ta polEti,a e puede ,a*-iar en ,ualquier *o*ento utilizando el u uario y la ,ontra eGa de ad*ini trador. )l *iento del Hi/i on5 .-ierta5 Cualquier vi itante an&ni*o puede leer0 ,a*-iar y aGadir ,ontenido. P1-li,a5 Cualquier vi itante an&ni*o puede leer0 pero &lo lo u uario regi trado pueden aGadir y ,a*-iar el ,ontenido. Cerrada5 $olo lo u uario regi trado tienen a,,e o. $eg1n el o-jeto de u Hi/i de-e e ,oger la ade,uada0 aunque po terior*ente podr ,on2igurar lo igni2i,ado de e ta polEti,a de 2un,iona T

+2

Mdulo ;a 3 Wi<is

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

per*i o para ,a*-iar e ta polEti,a. T+(. =avegue a la raEz de u 9o/u;i/i y a,,eda ,o*o ad*ini trador u ando el -ot&n Cone,tar e. 3ra identi2i,ar e utili,e el -ot&n .d*ini trar y vea en el enla,e Par*etro de ,on2igura,i&n la ,antidad de ele*ento de ,on2igura,i&n e4i tente . Per onali,e la pgina de ini,ial del Hi/i0 por

eje*plo0 ,*-iela a cursoc!s.

4.2. 7suarios gru os y #istas de contro# de# acceso 89"4 : 4"9;


Ba li ta de ,ontrol de a,,e o BC. JMccess Control List 3 MCLK on un *e,ani *o in2or*ti,o para e ta-le,er privilegio entre lo u uario de un i te*a. Con i te en a ignar a ,ada o-jeto o re,ur o que e quiere proteger una li ta de per*i o donde e indi,a el no*-re de u uario y lo per*i o ,on,edido al u uario en e e o-jeto. =o todo lo ge tore de ,ontenido i*ple*entan la eguridad *ediante e te tipo de li ta 0 a lo largo del ,ur o e utilizarn otro *e,ani *o ,o*o lo role . Pro-are*o la BC. realizando el iguiente eje*plo5 ,endre!os un 6rupo de alu!nos con %arios alu!nos (al !enos dos). $tili/are!os un espacio de no!bres (seccin) donde slo tienen acceso los usuarios del 6rupo alu!nos. Se crearA una pa6ina de ?ndice para los alu!nos donde se irAn a6re6ando pA6inas de e@A!enes personali/ados para cada alu!no. En cada pA6ina de e@a!en se escribirAn las pre6untas Bue debe responder el alu!no 1 cada alu!no debe poder %er 1 editar su e@a!en pero8 no poder copiarse del e@a!en del co!paero. T++. )l pri*er pa o e a,,eder la pgina de ad*ini tra,i&n para ,rear lo u uario alu*no . T++.1. )n la ad*ini tra,i&n de u uario aGada do u uario y en el ,a*po grupo e ta-lez,a que a*-o pertene,en al grupo alu!nos. T++.2. .hora ,reare*o un nuevo e pa,io de no*-re lla*ado alu!nos en el Hi/i0 para ello en el -u ,ador introduz,a la ,adena alu*no 5indi,e. )n lo Hi/i lo e pa,io de no*-re e eparan por el ,ar,ter R5S0 entendiQndo e un e pa,io de no*-re ,o*o una e,,i&n. T++.3. 3ra -u ,arla0 indi,ar que la pgina no e4i te0 pero el -ot&n para ,rearla e tar a,tivo. Cree e ta pgina y en el ,ontenido in,luya do enla,e interno ,o*o e indi,a5
>>>>>> 8spacio de nom3res de alumnos >>>>>> 7Au: estan los e49menes de esta semanaB cada alumno de3e rellenar el su,o. Z ##alumno1a84amen del alumno 1(( Z ##alumno2a84amen del alumno 2(( Cdi6o '(. Contenido de la pA6ina de e@A!enes para los alu!nos.

T++.#. @uarde lo ,a*-io y ,ree la do pgina de e4*ene de lo alu*no e ,ri-iendo en

Mdulo ;a 3 Wi<is

+-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,ada una la pregunta o lo que de ee. T++.(. .,,eda de de la pantalla de ad*ini tra,i&n a la li ta de ,ontrol de a,,e o. 9e-e

apare,er en el r-ol el nuevo e pa,io de no*-re ,reado. 9e-e ,on eguir e ta-le,er la regla BC. *o trada en la 2igura 2(0 ,uando lo ,on iga0 ,o*prue-e que el alu!no- puede ha,er u e4a*en in ,opiar e del e4a*en del alu!no;.

4.3. 4s ecto visua# y #anti##as


#no de lo prin,ipale o-jetivo de lo de arrolladore de CA$ e 2a,ilitar la per onaliza,i&n de lo *i *o a lo intere ado en u ar el CA$. ) ta per onaliza,i&n e tanto a nivel de pre enta,i&n ,o*o a nivel de 2un,ionalidad y para ,on eguirlo e ta-le,en una erie de ar,hivo 0 va,Eo en prin,ipio0 donde e pueden realizar la *odi2i,a,ione . =un,a e de-en *odi2i,ar lo ar,hivo originale del CA$0 de lo ,ontrario la nueva a,tualiza,ione que aparez,an del CA$ ern ,o*pli,ada de in talar. Para per onalizar de 9o/u;i/i en la propia Heo2i,ial e puede -u ,ar la pala-ra C$$ y la pri*era entrada *ue tra in tru,,ione o-re la per onaliza,i&n de e te CA$. =o o- tante0 realizare*o alguna prue-a a ,ontinua,i&n. T+). $e per onalizar el a pe,to de do<u5i<i u ando regla C$$. ) i*portante la realiza,i&n de e ta prue-a pa o a pa o0 e de,ir0 en ,ada ,a*-io propue to po terior*ente de-e volver al navegaT dor He- y ver el re ultado o-tenido0 i realiza todo lo ,a*-io a la vez no ,o*prender el e2e,to de ,ada regla. $i tiene duda puede ,on ultar el ,&digo '<0 pero i ,opia e ta olu,i&n ,o*pleta di2i,ultar u ,o*pre i&n de lo atri-uto C$$ ,ontado a ,ontinua,i&n. T+).1. )ntre en la ,arpeta con4 de la in tala,i&n de u in tala,i&n de do/u;i/i y ,ree un 2i,hero ,on el no*-re userst1le.css. ) te 2i,hero e agregar regla C$$. )dEtelo ,on =otepad??. T+).2. $e tra-ajar ,on do ele,tore 3od, WY y .doXuwiXi WY. )l egundo e un ele,tor de ,la e in,luido auto*ti,a*ente por 9o/u;i/i y podr

,reado por lo ,readore de do/u;i/i para poder per onalizar el ,ontenido del Hi/i. .Gada en el 2i,hero userst1le.css la regla5 .doXuwiXi W margin:2emO Y. @uarde el 2i,hero y o- erve el re ultado en el =avegador. T+).3. .Gada un atri-uto a la regla .doXuwiXi WY para ,ontrolar el -orde del Hi/i5 3order:solid

+;

Mdulo ;a 3 Wi<is

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa 1p4 [8*7*HHO y vuelva a ver el re ultado.

T+).#. $eguire*o tra-ajando o-re la regla .doXuwiXi WY0 aGadiendo el atri-uto 3order.radius:
10p4O. Vuelva a ver el e2e,to en el navegador.

T+).(. +inal*ente aGada a e ta regla 3o4.shadow: 10p4 10p4 &p4 [888888O y o- erve el e2e,to en el navegador. T+).+. .hora e *odi2i,ar el 2ondo de la pgina0 para ello utilizare*o el ele,tor 3od, WY

aGadiendo alguna propiedade . ) ta-lez,a el ,olor de 2ondo de la pgina ,on 3od, W3acXground.
color:[000000OY.

T+).). .l ,o*pro-ar el re ultado en el navegador e o- erva ,o*o el ,olor de 2ondo gri a2e,ta a todo el ,ontenido. $e e ta-le,er el ,olor del rea del ,ontenido del ;i/i en -lan,o aGadiendo a la regla .doXuwiXi WY el atri-uto 3acXground.color:[DDDDDDO. Co*prue-e i la ,orre,,i&n ha 2un,ioT nado en el navegador.

T+-. $e avanzar en la per onaliza,i&n *odi2i,ando el 2ondo de la pgina utilizando patrone . #n patr&n no e * que una i*agen de 2ondo repetida inde2inida*ente. Vi uali,e en u ordenador la i*gene u*ini trada ,on el *aterial del ,ur o lla*ada 5 patron3linea.pn6 y patron3circulo.9p6. 2i,hero ,on la i*gene en la iguiente ,arpeta de u in tala,i&n de u

T+-.1. Copie lo

do/u;i/i5 li3 U images. )dite el 2i,hero de e tilo y al ele,tor -ody agregue la i*agen de 2ondo ,on 3acXground.image: url)Qli3/images/patron.linea.pngQ+O. T+-.2. Co*prue-e el re ultado en el navegador pul ando la te,la C3RB y ? i*ultnea*ente varia ve,e . Para volver a la po i,i&n original puede u ar C3RB y 00 o la ,o*-ina,i&n de te,la C3RB y " T+-.3. Aodi2ique la i*agen de 2ondo por patron3circulos.9p6. T+-.#. Lu que en @oogle i*gene u ando la 2ra e de -1 queda R bac<6round patterns 5ebS y de ,argue un patr&n que le gu te para u arlo ,o*o 2ondo de u Hi/i.
3od, , background-color+[000000background-image+ url)Qli3/images/patron.linea.pngQ+. .doXuwiXi , margin+2emborder+solid 1p4 [8*7*HHbackground-color+[DDDDDDbo/-shadow+ 10p4 10p4 &p4 [888888border-radius+ 10p4. Cdi6o '). 7esultado esperado de ,*+. 1 ,*K.

Au,ho de arrolladore de itio He- ,o*parten u di eGo y la *ayorEa de lo CA$ e ta-le,en un *e,ani *o para poder in talar 2,il*ente un di eGo realizado por otro de arrollador. )n el ,a o de 9o/u;i/i lo di eGo preparado para u in tala,i&n e lla*an plantillas. )l pro,edi*iento e ta-le,ido por lo ,readore de 9o/u;i/i ,on i te en ,rear una u-,arpeta en la ,arpeta e4i tente J tplK y tra-ajar

Mdulo ;a 3 Wi<is

+'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

o-re una erie de 2i,hero en e ta ,arpeta. =o ,reare*o plantilla nueva para 9o/u;i/i pero i utilizare*o la de otro di eGadore en el

iguiente eje*plo5

T+9. .,,eda a la ,arpeta de u in tala,i&n de 9o/u;i/i0 entre en la ,arpeta tpl de ,ree una ,arpeta lla*ada pyra*id y de ,o*pri*a lo 2i,hero dentro de e ta nueva ,arpeta. Ba ,arpeta tpl e la donde e pueden aGadir nueva plantilla 0 tanta ,o*o e de ee. T+9.1. =avegue a u ;i/i y a,,eda a la pgina .d*ini trar U Par*etro de ,on2igura,i&n. )n la op,i&n Plantilla apare,ern toda la plantilla in talada 0 ,o*prue-e que apare,e pyra*id. 3ra ele,,ionarla y guardar lo ,a*-io ,a*-iar todo el a pe,to del Hi/i. T+9.2. 9e ,argue alguna otra plantilla de de la He- o2i,ial de 9o/u;i/i pero ,o*prue-e ante e ,o*pati-le ,on u ver i&n. i

4.4. "om #ementos


)n general todo lo CA$ ad*iten ,o*ple*ento para a*pliar la 2un,ionalidad o ,a*-iar el a pe,to. fa e ha *o trado en el ,a o de la plantilla el pro,edi*iento para 2a,ilitar la in tala,i&n. )l ,a o de la 2un,ionalidad0 9o/u;i/i lo ad*ite ,o*ple*ento y lo lla*a plu6ins. )n la He- o2i,ial de 9o/u;i/i e puede o-tener un li tado *uy e4ten o de lo e4i tente . 9o/u;i/i no e t *uy orientado a la in tala,i&n de ,o*ple*ento y a1n peor0 la *ayorEa de lo ,o*ple T *ento e4i tente en la red no 2un,ionan o on ,o*pli,ado de poner en 2un,iona*iento. )n otro CA$ a lo largo del ,ur o e har hin,apiQ en lo ,o*ple*ento 0 de toda 2or*a ,o*o 1lti*a prue-a ,on 9o/uHi/i e in talarn alguno ,o*ple*ento previa*ente te tado ,on la ver i&n a,tual. T)1. =avegue a la pgina o2i,ial de 9o/u;i/i y a,,eda a la e,,i&n de plu6ins. Ba pgina e t

organizada en tipo de ,o*ple*ento y etiqueta JtagK para 2a,ilitar la -1 queda. T)1.1. Lu que la etiqueta vEdeo en la pgina y li te lo la ver i&n Mn6ua. T)1.2. )n el li tado a,,eda al lla*ado Gs.are plu6in y navegue al ,o*ple*ento para ver in tru,,ione . Ba in tala,i&n e puede realizar de do 2or*a di2erente 5 1." 9e ,argando el ,o*ple*ento y ,opiando lo 2i,hero de ,o*pri*ido a la in tala,i&n de 9o/u;i/i. 2." Copiando la dire,,i&n de de ,arga del ,o*ple*ento y dejar que 9o/u;i/i reali,e todo el pro,e o de in tala,i&n. T)1.3. $e intentar el pro,edi*iento J2K aunque puede 2allar. =avegue a u Hi/i y a,,eda al u ,o*ple*ento di poni-le . +Eje e que

e tn agrupado por ,o*pati-ilidad eg1n la ver i&n 9o/u;i/i. )n e te ,ur o e ta*o tra-ajando

*en1 de .d*ini tra,i&n U .d*ini tra,i&n de Plugin . 9e-e e ,ri-ir la dire,,i&n He- de la de ,arga del ,o*ple*ento y utilizar el -ot&n 9e ,argar. Para ,opiar la dire,,i&n He- del

+(

Mdulo ;a 3 Wi<is

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,o*ple*ento utili,e en otra pe taGa del navegador el -ot&n dere,ho el navegador o-re el enla,e que de-e de ,argar0 en el *en1 de plega-le podr e ,oger la op,i&n Copiar la ruta del enla,e. . E puede pegar la #RB en ad*ini trador de plugin de u 9o/u;i/i. T)1.#. $i 9o/u;i/i pre enta errore general*ente en el pro,e o puede er por vario *otivo pero

uele de-er e a la in tala,i&n de PCP e4i tente en H.AP. $i el enla,e al l de PCP0 re,uede que e

,o*ple*ento e de tipo .ttpsJDD ne,e itar ha-ilitar la e4ten i&n open puede ha,er de de el *en1 de H.AP.

T)1.(. $i 2inal*ente no 2un,iona el pro,edi*iento auto*ti,o hay que utilizar el pro,edi*iento J2K0 ,on i tente en ha,er la de ,arga *anual y de ,o*pri*ir el ,o*ple*ento en la ,arpeta de 9o/u;i/i li- U plugin. T)1.+. Con uno u otro pro,edi*iento de-erEa apare,er 2inal*ente el ,o*ple*ento en el li tado de plu6ins del *en1 de ad*ini tra,i&n. T)1.). 8ntente introdu,ir un vEdeo de fou3u-e en alguna pgina de in tru,,ione indi,ada en la pgina del ,o*ple*ento Gs.are. T)1.-. Repita el pro,e o ,on el ,o*ple*ento Mce Editor y averigXe para que irve. u ;i/i iguiendo la

4.). "o ia de seguridad y c#onaci2n de# sitio


.l no utilizar 9o/uHi/i -a e de dato la ha,er una ,opia de eguridad e *uy i*ple0 &lo hay que ,opiar lo 2i,hero del itio He-. Real*ente olo e ne,e itarEa ,opiar el dire,torio data de 9o/uHi/i0 pero e re,o*enda-le realizar la ,opia ,o*pleta para in,luir lo ,o*ple*ento y plantilla que tenga in talado y6o per onalizado . T)1. Clone u 9o/u;i/i en el ervidor de 8nternet del ,ur o tran 2iriendo todo lo 2i,hero por +3P. Co*prue-e ,on el navegador i ha 2un,ionado.

2+ $edia)i?i
AediaHi/i 2ue de arrollado para Hi/ipedia y e t in2or*a,i&n y gran ,antidad de tr2i,o. 3ra u in tala,i&n a,,ediendo a la zona de ad*ini tra,i&n e ve la *ultitud de op,ione e4i tente . oportado por la 2unda,i&n Hi/i*edia. ) un i te*a Hi/i *u,ho * ,o*plejo que 9o/u;i/i al e tar de arrollado para oportar gran ,antidad de

Au,ha de ella apare,ern en lo

iguiente ge tore de ,ontenido del ,ur o0 por ello0 no e entrar en

pro2undidad en la ad*ini tra,i&n de e te CA$. )l prin,ipal o-jetivo ,on AediaHi/i e *o trar la el pro,e o de in tala,i&n de un CA$ donde el al*aT ,ena*iento de dato no e realiza en el i te*a de 2i,hero 0 e al*a,ena en una -a e de dato Ay$IB en e te ,a o. Ba *ayorEa de lo ge tore de ,ontenido e tudiado en el ,ur o utilizan e te tipo de al*a,ena*iento y el pro,e o de in tala,i&n er i*ilar al aquE e4pli,ado.

Mdulo ;a 3 Wi<is

+)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

).1. Insta#aci2n y administraci2n


Ba in tala,i&n de AediaHi/i e realiza a travQ del navegador0 pero para llevarla a ,a-o e ne,e ario di poner de un ervidor Ay$IB y una -a e de dato a la que poda*o a,,eder *ediante un u uario y una ,ontra eGa. H.AP trae in,orporado el ervidor Ay$IB0 el pa o previo a la in tala,i&n de ,ualquier CA$ que utili,e al*a,ena*iento Ay$IB e ,rear una -a e de dato nueva y un u uario ,on u ,ontra eGa0 y a er po i-le0 que &lo pueda a,,eder a e ta -a e de dato . ) *uy i*portante en ,ada in tala,i&n de un CA$ di poner una -a e de dato di2erente ,on u propio u uario re tringido olo a una -a e de dato 0 a E0 i alg1n ge tor de ,ontenido de eguridad0 el re to de itio He- no e verEan a2e,tado . T)2. .,,eda de de el *en1 de H.AP al ad*ini trador de -a e de dato phpAy.d*in y navegue a la pgina de privilegio . #tili,e el enla,e agregar u uario *o trado en la 2igura 2D. T)2.1. )n el iguiente 2or*ulario ,ree un u uario ,on el no*-re !edia5i<i que &lo pueda u2riera alg1n pro-le*a

a,,eder de de la *quina lo,al Jlocal.ostK0 y e ta-lez,a una ,ontra eGa. 9e-e

ele,,ionar la

op,i&n indi,ada en la 2igura 270 a E e ,rear auto*ti,a*ente una nueva -a e de dato ,on el no*-re !edia5i<i0 ,on,ediQndo e al u uario !edia5i<i todo lo privilegio en e ta nueva -a e de dato . T)2.2. #na vez ,reada la -a e de dato de-e de ,o*pri*ir el ar,hivo !edia5i<i3-.-K.'.tar.6/. #na -uena op,i&n e a-rir el ar,hivo ,on (zip y ver el ,ontenido del ar,hivo ,o*pri*ido. )ntre en la ,arpeta de de (zip ha ta en,ontrar lo ar,hivo de AediaHi/i0 2Eje e en la 2igura '0 donde e utilizan do ventana 0 e ele,,ionan todo lo ar,hivo dentro de la ventana de (zip y e arra tran a la ,arpeta 555D!edia5i<i de H.AP ,on el rat&n. 9e e te *odo e de ,o*pri*en auto*ti,a*ente.

Pgina Pginade de privilegio privilegio .gregar .gregar u u uario uario

i6ura ;K. Madir usuario desde p1p!1ad!in.

+*

Mdulo ;a 3 Wi<is

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura ;L. Madir usuario 1 una base de datos con el !is!o no!bre.

T)2.3. =avegue a la dire,,i&n http566lo,alho t6*edia;i/i para ,o*enzar la in tala,i&n. Reali,e lo pa o de in tala,i&n ha ta llegar al 2or*ulario de ,one4i&n ,on -a e de dato . 9e-e rellenar el ,a*po =o*-re de -a e de dato ,on la -a e dato que ,re&0 !edia5i<i8 y en el ,a*po u uario ta*-iQn e ,ri-ir !edia5i<i. =o e olvide de introdu,ir la ,ontra eGa del u uario !edia5i<i. T)2.#. Contin1e lo pa o de in tala,i&n ha ta e ta-le,er un u uario ad*ini trador del Hi/i ,on una ,ontra eGa. T)2.(. )n el iguiente dilogo e *ue tran una erie de op,ione de in tala,i&n. ) ta-le,ere*o la iguiente 5 Hi/i privado0 Ca-ilitar la u-ida de ar,hivo y en e4ten ione ele,,ionar Hi/i )ditor. T)2.+. 3er*ine la in tala,i&n y en el 1lti*o pa o e generar el ar,hivo de ,on2igura,i&n lla*ado LocalSettin6s.p.p. 3iene que guardarlo en la ,arpeta del di ,o donde e tQ in talado el Hi/i0 pro-a-le*ente en CJS5a!pS555S!edia5i<i. T)2.). =avegue a u nuevo Hi/i en http566lo,alho t6*edia;i/i.

T)3. .,,eda ,on la ,uenta de ad*ini trador al Hi/i y en el *en1 izquierdo de herra*ienta enla,e Pgina e pe,iale . AediaHi/i trae *ultitud de op,ione e,,ione que no entrare*o a e4pli,ar detallada*ente0 &lo a,,eda a la que ,rea de utilidad.

iga el en

de ,on2igura,i&n dividida

T)#. $e realizarn uno ejer,i,io de i*porta,i&n y e4porta,i&n entre Hi/i . $e han ele,,ionado alguno 2rag*ento de otra ;i/i para realizar la prue-a y *o trar la organiza,i&n del ,ontenido en ,ategorEa . T)#.1. )n el *en1 de ad*ini tra,i&n a,,eda a Cerra*ienta de pgina U 8*portar pgina .

8*porte lo 2i,hero Wi<ilibros3deportes.@!l y Wi<ilibros39ue6ospopulares.@!l.

Mdulo ;a 3 Wi<is

++

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

$ele,,ione $ele,,ionetodo todo lo lo ar,hivo ar,hivo y y arr arr trelo trelo

i6ura '2. Desco!presin de !edia5i<i.

T)#.2. =avegue la re,iente .

pgina

y ,ategorEa

i*portada 0 utili,e para ello el -u ,ador o pgina

T)#.3. 8*porte ahora Wi<ilibros3artes3culinarias.@!l0 puede que o-tenga un error durante la i*porta,i&n. $i el error indi,a que e ha uperado el *4i*o tie*po de eje,u,i&n0 igni2i,a que el ervidor He- .pa,he a *atado el pro,e o de i*porta,i&n pen ando que e ha-Ea -loqueado. Para olu,ionarlo edite el 2i,hero de ,on2igura,i&n p.p.ini y e ta-lez,a el tie*po de eje,u,i&n a un par de *inuto 0 ,o*o e *ue tra en el ,&digo '>.
O Ma4imum e4ecution time of each scriptB in seconds O http://php.net/ma4.e4ecution.time O ;ote: ?his directi2e is hardcoded to 0 for the *@6 17"6 ma/5e/ecution5time ' 128 Cdi6o '*. Con4i6uracin de tie!po !A@i!o de e9ecucin de p.p en Mpac.e.

T)(. =avegue a la dire,,i&n Hi/iLoo/

O2DP y a,,eda al *en1 lateral Cerra*ienta

U Pgina

e pe,iale U )4portar pgina . .pare,e un ,uadro donde puede agregar pgina a e4portar. T)(.1. ) ,ri-a en el ,uadro .Gadir pgina de de la ,ategorEa el te4to CategorEa5Aate*ti,a y pul e el -ot&n aGadir. )4porte la ,ategorEa e intente i*portarla en u Hi/i.

+K

Mdulo ;a 3 Wi<is

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T)(.2. .hora -u que una ,ategorEa a u gu to en el Hi/i y e4p&rtela ,o*pleta0 tenga ,uidado ,on el ta*aGo del ar,hivo.

Mdulo ;a 3 Wi<is

+L

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 2* % Ge,#o&e, de (o&o,


)i$ple &ac2ines 3oru$ 4)&35, P%P -ulletin -oard 4p2p--5

1+ Re,u-e!
9ura,i&n e ti*ada5 2 hora y '0 *inuto . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero *2N2"0"2Nin tall.zip *2N2"0"2N pani hNe "ut2D.tar.gz '0N. ortedN.ni*atedN.vatar .zip 3e%cri/cin 8n talador para $A+ 2 3radu,,i&n al e paGol de $A+ 2 Conjunto de avatare ani*ado para $+A 3;itter para $A+ 3e*a para $A+ Copia de un 2oro real 8n talador de phpLL '.0D

CallingNyourNt;itterN2.<.zip Aineral@e* Aulti,olor.zip 2oroplone" *2.zip0 2oroplone. ql.zip phpLL"'.0.10.zip

pani hN2or*alNhonori2i, N1N0N'a.zip 3radu,,i&n al e paGol de phpLL erenityNpurpleN2.0.<.zip


,abla --.

. pe,to vi ual para phpLL

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O27P He- o2i,ial de $i*ple Aa,hine +oru*0 <http566;;;. i*ple*a,hine .org6!. O'0P Co*ple*ento para $A+0 <http566,u to*. i*ple*a,hine .org!. O'1P He- o2i,ial de phpLL0 <http566;;;.php--.,o*6!. O'2P 9o,u*enta,i&n de phpLL0 <http566;;;.php--.,o*6 upport6!. O''P Co*unidad phpLL en ) paGol <http566;;;.php--"e .,o*6!.

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.+ I!#&odu""i4!
Bo ge tore de 2oro He- on CA$ dedi,ado a al-ergar di ,u ione o-re te*a 0 on a*plia*ente utilizado para 2or*ar todo tipo ,o*unidade en 8nternet. Co*parado ,on lo Hi/i 0 la aporta,ione de ,ada u uario no e pueden *odi2i,ar0 en ,a*-io0 E e pueden ,onte tar ,reando un hilo de di ,u i&n0 donde vario u uario aportan re pue ta . ) to u-2oro . pri*ordial*ente en la ge ti&n de lo en la ad*ini tra,i&n de e to u uario regi trado 0 ge tore oportan la ,rea,i&n de rea te*ti,a di2eren,iada 0 deno*inada Bo ge tore de 2oro

e tn ,entrado

o2re,iendo un gran juego de po i-ilidade

u uario . $e e ta-le,en

di2erente role para lo u uario ,o*o on ad*ini tradore o *oderadore 0in,lu o ,la i2i,an u uario en un rango en 2un,i&n del volu*en de aporta,ione realizada en el 2oro. 3a*-iQn uelen agrupar a lo u uario en grupo a o,iando deter*inado per*i o y a ignando grupo a u-2oro te*ti,o . ) ta-le,iendo di2erente polEti,a de ge ti&n de u uario y de a,,e o0 ,on e te tipo de CA$ e o-tienen 2oro He- que repre entan ,o*unidade ,errada 0 2oro de ayuda te*ti,a 0 2oro de inter,a*-io de in2or*a,i&n0 et,. Para el de arrollo de e te ,ur o e han e ,ogido do de lo * ,ono,ido p.pBB y SM 0 a*-o utilizan PCP y Ay$IB iendo u in tala,i&n y ,on2igura,i&n vEa He-0 aunque e pro2undiza en *ayor *edida en $A+ e ver ,o*o phpLL e -a tante i*ilar.

1+ Si-/le $a"9i!e, @o&u- % S$@


.nte de realizar la in tala,i&n de $A+ realizare*o una vi ita ,o*o u uario a un 2oro ya operativo para ,o*pro-ar el *anejo a nivel de u uario. T)+. RegE tre e ,o*o nuevo u uario en el 2oro $A+ http566;;;.zopeplone.e 62oro . T)+.1. Co*prue-e en u per2il la di2erente op,ione que po ee. T)+.2. Ca*-ie u avatar0 por eje*plo0 lo puede ,oger de http566;;;.avatarity.,o*. T)+.3. )ntre en el contenido ;2-;. T)+.#. Cree un hilo de u interQ en alguno de lo ,reado por lo ,o*paGero del ,ur o. T)+.(. Lu que una 2otogra2Ea en 8nternet de alguna ,o*ida y pu-lique alg1n po t que in,luya di,ha 2otogra2Ea. T)+.+. #tili,e la *en ajerEa interna del 2oro para ,o*uni,ar e ,on alg1n ,o*paGero del ,ur o. u-2oro y re ponda a alguno de lo hilo u-2oro Gestores de Contenidos y re ponda al hilo Curso 6estores de

4.1. Insta#aci2n y administraci2n de S(F


Con e ta vi i&n general de $A+ ,o*o u uario e pro,eder a la in tala,i&n del ge tor de 2oro . Ba

K;

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

in tala,i&n igue el *i *o pro,edi*iento que el e4pli,ado en el *&dulo anterior ,on Hi/iAedia. T)). 9e ,argue la 1lti*a ver i&n di poni-le de la ra*a 2.Z de de la pgina o2i,ial o utili,e el 2i,hero u*ini trado ,on el *&dulo. 9e ,o*pri*a el ,ontenido en una nueva ,arpeta dentro del dire,torio 555 de H.AP 0 por eje*plo0 en una ,arpeta ,on el no*-re s!4. T)).1. =avegue a la dire,,i&n http566lo,alho t6 *2 y ,o*prue-e i apare,e la pgina de in talaT ,i&n. $i Ay$IB. T)).2. .,,eda ,on el navegador a phpAy.d*in para ,rear un nuevo u uario ,on ,ontra eGa y una nueva -a e dato a o,iada. Reali,e e ta tarea de de la pe taGa privilegio de phpAy.d*in. Re,uerde que aquE puede ,rear un u uario0 una -a e de dato ,on el *i *o no*-re y otorgar todo lo per*i o en un olo pa o0 ju ta*ente lo que requieren la *ayorEa de lo CA$. T)).3. 3er*ine en el navegador todo lo pa o de la in tala,i&n y -orre el ar,hivo de in tala,i&n para evitar pro-le*a de eguridad0 e puede ha,er *ar,ando el ,uadro que apare,e en la 1lti*a pantalla de in tala,i&n. Con la in tala,i&n ter*inada0 i navega*o por el ge tor de 2oro re,iQn in talado no dare*o ,uenta ,o*o por de2e,to el idio*a e inglQ . $A+ no in,orpora di2erente idio*a en u in tala,i&n -a e0 ,ada paquete de idio*a de-er er de ,argado por eparado. Pro,eda*o al ,a*-io de idio*a. T)-. =avegue a la pgina de ad*ini tra,i&n del 2oro en inglQ . T)-.1. 3al y ,o*o Banguage e *ue tra en la 2igura '10 a,,eda al *en1 .d*in U Con2iguration U u nuevo 2oro y ,o*prue-e que le apare,en lo *en1 de e 2ija en e ta pgina de in tala,i&n ver que e ne,e ario utilizar una -a e de dato

y ele,,ione .dd Banguage. .pare,er una nueva pgina ,on un ,uadro para -u ,ar

idio*a 0 te,lee spanis.. T)-.2. $ele,,ione aquella que ,rea ,orre,ta

utilizando el enla,e 8n tall y ter*ine el pro,edi*iento a,eptando la op,ione por de2e,to. T)-.3. #na vez aGadido el 2oro ,ontinuar en inglQ 0 hay que pro,eder al ,a*-io de idio*a en la op,i&n )dit Banguaje y ele,,ionar el e paGol. T)-.#. Re,argue la pgina. ) e en,ial en un 2oro ,o*pro-ar el ,orre,to 2un,iona*iento del i te*a de regi tro de u uario y e ta-le,er una polEti,a ade,uada de u uario para el 2oro. $A+ ,onte*pla tre polET ti,a di2erente 5 Regi tro 8n*ediato5 Cualquier vi itante puede regi T trar e en el 2oro ,on olo rellenar el 2or*ulario de
i6ura '-. Ca!bio de idio!a.

Mdulo ;b 3 Gestores de 4oros

K'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

regi tro. .,tiva,i&n por )*ail5 Cuando un vi itante ele,tr&ni,a vlida. )l ,orre,ta. .pro-a,i&n por el .d*ini trador5 ) la * re tri,tiva0 tra regi trar e un u uario queda e regi tra de-e introdu,ir una dire,,i&n de ,orreo i la dire,,i&n e ,rita e

i te*a le enviar un ,orreo para ,o*pro-ar

pendiente de a,epta,i&n por un ad*ini trador. $e pro,eder a ,on2igurar $A+ ,on la polEti,a de a,tiva,i&n por e*ail para veri2i,ar la ,orre,ta ,on2igura,i&n del ,orreo ele,tr&ni,o. T)9. .nte de nada a,tive*o el *odo de *anteni*iento del 2oro. ) t en la e,,i&n de ad*ini traT ,i&n0 *en1 Con2igura,i&n del +oro U Con2igura,i&n del $ervidor U @eneral. .,tive la ,a illa Aodo de Aanteni*iento. T)9.1. Cierre la e i&n y vi ite u 2oro para ver el re ultado de a,tivar el *odo de *anteni*iento. T)9.2. .,,eda de de el *en1 de .d*ini tra,i&n a Controle de # uario U Regi tro de # uario U Con2igura,i&n. ) ta-lez,a el *odo de a,tiva,i&n por )*ail y revi e la no*-re re ervado y Carta de .,epta,i&n e ta-le,iQndola a u gu to. T)9.3. 9e a,tive el *odo de *anteni*iento. Cierre la e i&n de ad*ini tra,i&n o ,a*-ie a otro navegador para regi trar un nuevo u uario. #tili,e en el regi tro una ,uenta de e*ail verdadera para que pueda ,o*pro-ar el ,orreo re,i-ido. T)9.#. Pro-a-le*ente no re,i-a ning1n ,orreo de de u 2oro. Ca-itual*ente la ,on2igura,i&n del ,orreo ele,tr&ni,o e una de la tarea * pro-le*ti,a de-ido la ,antidad de *edida anti pa* e4i tente en lo tarea anteriore ervidore de ,orreo. $i no ha re,i-ido el ,orreo de la e pro,eder a averiguar lo o,urrido de de el propio $A+. op,ione ) ta-le,er

T-1. .,,eda ,o*o ad*ini trador a u 2oro $A+ y navegue dentro de la e,,i&n de ad*ini tra,i&n al *en1 Aanteni*iento U Regi tro U Bog de errore . T-1.1. ) ta e,,i&n ,ontiene todo lo errore generado por el ge tor de ,ontenido . 9e-erEa en,ontrar alguna entrada indi,ando ,ual e el *otivo por el que no e envi& el ,orreo. T-1.2. ) ta-le,ere*o una ,on2igura,i&n de ,orreo ,orre,ta en la e,,i&n de ad*ini tra,i&n0

*en1 Aanteni*iento U Correo U Con2igura,i&n del ,orreo. 9e-e*o e ta-le,er el *e,ani *o $A3P ,on i tente en tra-ajar dire,ta*ente ,on el proto,olo de ,orreo ele,tr&ni,o y un ervidor re*oto. Podr en,ontrar lo dato de u ,on2igura,i&n de ,orreo en la do,u*enta,i&n entregada al prin,ipio del ,ur o. T-1.3. .nte de pro,eder a intentar de nuevo el regi tro de otro u uario hay que ,o*pro-ar la li ta de u uario . )l ,orreo ele,tr&ni,o de veri2i,a,i&n no 2ue entregado por $A+0 pero el u uario i ha ido ,reado y per*ane,e en e tado ina,tivo. =avegue en la de lo # uario U Ver todo lo e,,i&n de ad*ini tra,i&n a Controle u uario . +iltre el li tado por la op,i&n ) perando

K(

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.,tiva,i&n y eli*ine lo u uario que ,u*plan e ta ,ondi,i&n. T-1.#. .-andone la ,uenta de ad*ini trador de u 2oro e intente regi trar otra vez un u uario. )ntre en u ,orreo ele,tr&ni,o para ver i e ha re,i-ido un ,orreo para a,tivar la ,uenta. Ca*-iare*o la polEti,a de a,epta,i&n de *ie*-ro en el 2oro. Creare*o un 2oro donde el ad*ini tra T dor ea noti2i,ado ,uando un nuevo *ie*-ro quiera parti,ipar. ) ta e una ,on2igura,i&n ha-itual en *u,ha ,o*unidade online0 por eje*plo0 ,o*unidade de juego online donde e de,ide en lo 2oro la e trategia del grupo y e ,oordina la partida. ) *uy i*portante en e to ,a o no tener e pEa ni in2iltrado para ganar la partida. T-1. )ntre de nuevo ,o*o ad*ini trador en el 2oro y ,a*-ie la ,on2igura,i&n del regi tro de u uario al *odo .pro-a,i&n del .d*ini trador. $e de-e a,tivar ta*-iQn la ,a illa =oti2i,ar a lo ad*ini tradore ,uando e une un nuevo *ie*-ro. Con e to de-e re,i-ir un ,orreo ele,tr&ni,o ,ada vez que un u uario e regi tre. T-1.1. .-andone el *odo de ad*ini trador y regi tre un nuevo u uario ,o*pro-ando el *en aje re,i-ido. T-1.2. $i ha llegado a u ,orreo ele,tr&ni,o una noti2i,a,i&n indi,ando que un nuevo u uario e ha regi trado0 a,,eda de nuevo ,o*o ad*ini trador y en el *en1 Controle de lo # uario ver en el li tado el u uario en e tado ) perando .pro-a,i&n. .,Qptelo ,o*o u uario ,on la op,i&n .pro-ar y enviar e*ail y ,o*prue-e el ,orreo re,i-ido. +inal*ente e ta-lez,a la polEti,a que de ee en u 2oro y para pro,eder a ,on 2igurar lo 2oro ,on una *Eni*a ,on2igura,i&n para ha,er alguna prue-a tal y ,o*o e indi,a a ,ontinua,i&n. T-2. Cree una e tru,tura para u 2oro ,on lo 2oro y u-2oro indi,ado en la 2igura '2. T-2.1. .,,eda de de la Controle de 3e*a e,,i&n de ad*ini tra,i&n al *en1 U Aodi2i,ar +oro .
Co,ina en general Progra*a de televi i&n

y 9i eGo U +oro

.Gada lo nuevo 2oro y u-2oro . T-2.2. .Gada al 2oro lo Pedro y Clara. T-2.3. . igne *oderadore a lo la ta-la 12 y lo ta-la 1'. T-2.#. Bo a,tivarlo rango en o /ar*a *ue tra la popularidad de ,ada u otro E*-oloK. Para U a,,eda al *en1 .d*ini tra,i&n rango para lo u-2oro que e indi,an en u uario *o trado en la iguiente u uario 5 Ceidi0 a-uelo0

Co,ina en *i,roonda F22"topi, Co,ina ,a era Re,eta de ,o,ina Con ejo Con ulta Re taurante Co*ida regional Co*ida Qtni,a Ftro re taurante

u uario en el 2oro J*ediante e trella $A+

Con2igura,i&n del +oro U Fp,ione prin,ipale .

i6ura ';. oros 1 sub4oros.

Mdulo ;b 3 Gestores de 4oros

K)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Heidi "buelo Pedro Clara Progra*a de televi i&n Co,ina en *i,roonda F22"topi, Re,eta de ,o,ina Con ejo Con ulta Co*ida regional Co*ida Qtni,a Ftro re taurante
,abla -;. Moderadores del 4oro de cocina.

;an5o Pin,he Co,inero Che2 $uperCher Conteo 0 < 10 20

,abla -'. 7an6os de usuarios.

Con truire*o una ,o*unidad ,on zona re tringida para ,o*partir la re,eta puedan ,o*partir la re,eta . T-3. Cree un grupo de u uario deno*inado la cre!e dela cre!e.

e,reta del re tauranT

te El Bulli. Creare*o un 2oro donde &lo a lo po,o u uario que pertenez,an a la cre!e dela cre!e

T-3.1. .hora ,ree un nuevo 2oro lla*ado alto standin6 donde olo tenga per*i o e te grupo. T-3.2. Cree un u uario Bulli que ea *oderador en el 2oro y un u uario . r6uiano que pueda pu-li,ar y leer en di,ho 2oro. T-3.3. .-andone la ,uenta de ad*ini trador e intente entrar en el 2oro alto standin6. Para ter*inar e ta e,,i&n de prue-a - i,a del 2oro e re,o*ienda pro-ar alguna op,ione * en la ge ti&n de 2oro . Para ello navegue por lo *en1 de ad*ini tra,i&n e intente realizar alguna de e ta 1lti*a tarea . T-#. #tilizando alguno de lo u uario pu-lique una en,ue ta VIue op,ione tiene la en,ue taW. T-(. Pu-lique vario te*a y prue-e la opera,i&n Mo%er para *over un te*a de un 2oro a otro. VIue o,urre ,on el originalW

4.2. Insta#aci2n de com #ementos


9e igual *odo que en lo CA$ e tudiado ha ta el *o*ento0 $A+ e t pen ado para er 2,il*ente *odi2i,ado y6o a*pliado por ,ualquier de arrollador. Para poder ,o*partir lo de arrollo de di2erente progra*adore e uele e ta-le,er un pro,edi*iento o *etodologEa parti,ular para ,ada CA$. ) te tipo de pro,edi*iento ,on i te e ta-le,er alguna regla para progra*ar y di tri-uir lo de arrollo junto ,on un *Qtodo de in tala,i&n ,o*1n. )n la *ayorEa de lo ,a o ,uando e de ea a*pliar un CA$ para dotarlo de ,ierta 2un,ionalidad ya alguien en la ,o*unidad del CA$ uele ha-er realizado alguna a*plia,i&n en e te entido. =or*al*ente e ponen todo el o2t;are a di po i,i&n de la ,o*unidad de u uario del CA$. .nte de realizar ning1n de arrollo e re,o*enda-le -u ,ar la pgina donde e li tan todo lo ,o*ple*ento

K*

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

e4i tente . Pro-a-le*ente

e en,uentre alguno que en,aja en *ayor o *enor *edida en nue tra

ne,e idade 0 i no irve en u totalidad0 e un -uen punto de partida para ,ontinuar el de arrollo. )n $A+ lo ,o*ple*ento e deno*inan paquete y pueden de ,argar e de de la He- para in talar e iquiera e ne,e ario -u ,ar lo

de de una pgina de ad*ini tra,i&n interna de $A+. Con $A+ ni ad*ini tra,i&n y lo in tala -ajo de*anda.

li tado de paquete en 8nternet0 el propio $A+ lo lo,aliza de de vario repo itorio en la pgina de

Realizare*o alguna prue-a pero de-e er ,on ,iente de la e4i ten,ia de gran ,antidad de paquete que no 2un,ionan ,orre,ta*ente0 no hay pro,e o de revi i&n de lo *i *o . Puede utilizar lo ,o*enta T rio de otra per ona dejado en el itio He- indi,ando i lo paquete 2un,ionan0 tienen 2allo 0 et,. )l pro,edi*iento de in tala,i&n para $A+ e realiza en do pa o 5 u-ir el paquete a $A+ y a,tivar el paquete. T-+. .,,eda ,o*o ad*ini trador al *en1 .d*ini tra,i&n U Paquete . F- ervar vario a,,eda a 9e ,argar Paquete . )n e te ad*ini trador de paquete tre pro,edi*iento 5 1." )4a*inar el li tado de paquete de 8nternet y e ,oger alguno. 2." ) ,ri-ir dire,ta*ente el #RB de un paquete. '." $u-ir un paquete previa*ente de ,argado de de nue tro di ,o. T-+.1. #tili,e la op,i&n ' ,on el 2i,hero '2IMssortedIMni!atedIM%atars./ip u*ini trado ,on el *aterial de e te *&dulo u ando el 2or*ulario $u-ir un paquete. $ele,,ione e te ar,hivo y pul e el -ot&n $u-ir. #na vez u-ido el 2i,hero la 2un,ionalidad no e t in talada hay que realizar otro pa o . T-+.2. $i a,,ede al li tado de paquete donde e t el nuevo re,iQn J*en1 Ver paquete K0 apare,e un li tado de paquete enla,e 0

e pueden in talar paquete por

u-ido. Para a,tivar el paquete pul e en el enla,e 8n talar

*odi2i,a,i&n0 apare,er una pgina indi,ando donde e e ,ri-irn lo 2i,hero de e te paquete0 de-e a,eptar pul ando el -ot&n 8n talar .hora. T-+.3. .,,ediendo al enla,e Paquete in talado . Co*prue-e Vapare,e el nuevo juego de avatare W. T-). Repita el pro,e o ,on el 2i,hero Callin6I1ourIt5itterI;.)./ip y averigXe la 2un,ionalidad que aGade0 a,,eda al *en1 de ad*ini tra,i&n 3e*a a,tual para ,on2igurarlo. T--. .,,eda de nuevo la pgina 9e ,argar Paquete y prue-e el enla,e )4a*inar del li tado de in talado ver un li tado ,on lo avatare re,iQn

i 2un,iona a,,ediendo al *en1 Per2il U )ditar Per2il U Per2il del 2oro0

$ervidore de paquete . 8ntente in talar alguno0 pro-a-le*ente no 2un,ione. T-9. .,,eda a la ,o*unidad $+A en dire,,i&n He- indi,ada en O'0P y li te lo ,ategorEa. ) ,oja alguno0 a eg1re e que e in tlelo. ,o*pati-le ,on paquete por

u ver i&n de $A+0 de ,rguelo e

Mdulo ;b 3 Gestores de 4oros

K+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

4.3. (odificaci2n de #a resentaci2n


)l a pe,to del 2oro e ,ontrola en $A+ *ediante 3e*a y e pueden de ,argar de de O'0P0 donde hay *ultitud. Bo te*a en $A+ o2re,en la iguiente po i-ilidade 5 i*ultnea*ente.

$e pueden tener in talado vario te*a

Cada te*a trae diver a op,ione de ,on2igura,i&n0 ha-itual*ente vario juego de ,olore . Cada u uario puede e ,oger un te*a de entre lo in talado para ver el 2oro. Cada 2oro puede tener un te*a a o,iado0 e una ,ara,terE ti,a intere ante i tene*o diver a te*ti,a en lo 2oro 0 pode*o a o,iar un a pe,to a ,ada te*ti,a. Bo te*a in talado pueden er *odi2i,ado de de el propio navegador0 aunque no e re,o*endaT -le i tene*o a,,e o a lo ar,hivo del ervidor y pode*o u ar un editor de te4to . 8n,lu o e puede ,rear un nuevo te*a de de el navegador0 pero ta*po,o e -uena idea. 8n talare*o alguno te*a para pro-ar la 2un,ionalidad. T91. .,,eda al *en1 de $A+ .d*ini tra,i&n U Con2igura,i&n del 2oro U 3e*a y di eGo U .d*ini T trar e 8n talar. .pare,er una pgina y en uno de lo ,uadro podr in talar un nuevo te*a de de un ar,hivo. T91.1. #tili,e el 2i,hero MineralGe! Multicolor./ip 8n talar. T91.2. 3ra la in tala,i&n0 en la parte uperior de la pgina puede ele,,ionar el 3e*a de invitaT do de de un ,uadro de li ta. $ele,,ione el nuevo te*a J MineralGe! MulticolorK del ,uadro de plega-le0 a,tive ta*-iQn la op,i&n Re ta-le,er todo a y pul e el -ot&n guardar. T91.3. .,,eda al *en1 .d*ini tra,i&n U Con2igura,i&n del 2oro U 3e*a a,tual. Lu que la u*ini trado ,on el *aterial del *&dulo.

9e de el ,uadro 8n talar un nuevo te*a U 9e de un ar,hivo ele,,ione el 2i,hero y pul e el -ot&n

e,,i&n titulada Variante del te*a y ,a*-ie la op,i&n Variante del te*a por de2e,to. Prue-e la di2erente op,ione . #tili,e el -ot&n @uardar ituado al 2inal de la pgina para ver el re ultado. T91.#. )n la e,,i&n de e ta pgina titulada Fp,ione y Pre2eren,ia del te*a ,a*-ie aquella para la que intuya la 2un,ionalidad. T91. Vuelva a a,,eder al *en1 .d*ini tra,i&n U Con2igura,i&n del 2oro U 3e*a y di eGo. T91.1. Lu que en e ta pgina la e,,i&n glti*o y *ejore te*a . ) ,oja do o * de ello e in tlelo en u $A+. T91.2. .,,eda al *en1 .d*ini tra,i&n U Controle de te*a y di eGo U +oro U Aodi2i,ar 2oro . Aodi2ique ,ada 2oro a ignando un te*a di2erente a ,ada uno y ,o*prue-e el re ultado navegando de de la pgina de ini,io de u $A+ a ,ada uno de lo 2oro . Ba ,rea,i&n de un nuevo te*a para un CA$ ,on i te en ,lonar uno ya e4i tente para de puQ realizar aquella *odi2i,a,ione o-re el te*a ,lonado ha ta adaptarlo a u gu to. $e podrEa tra-ajar

KK

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

dire,ta*ente o-re un te*a0 *odi2i,ndolo0 pero no e re,o*enda-le. Aanteniendo el original inta,to e puede volver al original i al realizar ,a*-io e ,o*enten errore . o-re lo 2i,hero de te*a en vez

.l tener a,,e o a la ,arpeta donde e t in talado $A+ tra-ajare*o

de tra-ajar de de el navegador0 lo ,ual ,o*pli,arEa en e4,e o el tra-ajo. T92. .,,eda a la ,arpeta de H.AP donde tenga in talado $A+0 entre en la ,arpeta ,.e!es y ,opie la ,arpeta core en e ta *i *a ,arpeta y reno*-re la ,opia a cursoIc!s. T92.1. )ntre en la ,arpeta cursoIc!s y edite ,on =otepad?? el 2i,hero t.e!eIin4o.@!l realizanT do la *odi2i,a,ione re altada en negrita5
G^4ml 2ersion>V1.0V^5 Gtheme.info 4mlns>Vhttp://www.simplemachines.org/4ml/theme.infoV 4mlns:smf>Vhttp://www.simplemachines.org/V5 Gname59ema :urso :64G/name5 Gauthor name>V1imple MachinesV5yo0yo.orgG/author5 Gwe3site5http+//www.dte.us.es/G/we3site5 Gla,ers5htmlB3od,G/la,ers5 Gtemplates5inde4G/templates5 G3ased.on52efault themeG/3ased.on5 G/theme.info5 Cdi6o '+. Con4i6uracin !?ni!a para un nue%o te!a.

T92.2. .,,eda al *en1 de $A+ .d*ini tra,i&n U Con2igura,i&n del 2oro U 3e*a aGada al ,uadro de te4to 9e de un dire,torio cursoIc!s. 9e-erEa

y di eGo U ,o*o

.d*ini trar e 8n talar. )n la parte in2erior de la pgina0 en la e,,i&n 8n talar un nuevo te*a quedar CJS5a!pS555Ss!4S,.e!esScursoIc!s aunque puede di2erir i la in tala,i&n de $A+ e t u-i,ada en otra ,arpeta del di ,o. T92.3. Pul e el -ot&n 8n talar y a,,eda al *en1 Con2igura,i&n de te*a nuevo te*a apare,e en el in talador y e titula ,e!a Curso CMS. T92.#. ) ta-lez,a para todo el 2oro el nuevo te*a0 revi e ,o*o e hizo en 370.2. Para *odi2i,ar el te*a re,iQn ,reado e utilizar +ire-ug y =otepad??. $ele,,ionando di2erente zona del 2oro e ,a*-iarn lo e tilo 0 y ,uando el a pe,to no agrade ,opiare*o lo ,a*-io al 2i,hero .css ,orre pondiente ha,iendo a E lo ,a*-io per*anente . T93. =avegue a la pgina ini,ial de u 2oro. .,tive +ire-ug e intente ,apturar el -loque de ,ontenido ,on la in2or*a,i&n e tadE ti,a. )n la 2igura '' e indi,a el ele,tor de ,la e de e te -loque5 ,on eguir *o trar do Vin4ocenter4ra!e0 corre pondiente a una etiqueta Gdi250 el o-jetivo e ,olu*na en e te -loque0 una ,on la e tadE ti,a y otra ,on lo u uario . T93.1. 9e plegando el r-ol -ajo e ta etiqueta de -loque en,ontrar que ,ada u--loque e t 2or*ado por otra una etiqueta Gdi2 id>QinfocenterSsectionQ50 +ire-ug. T93.2. 3ra-ajando dire,ta*ente en +ire-ug0 en la pe taGa e tilo0 aGada la propiedad width:44CO. .Gada ta*-iQn la propiedade float:leftO y margin:2CO ele,,ione una de ella ,on para ,o*pro-ar i el

Mdulo ;b 3 Gestores de 4oros

KL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T93.3. Ca*-ie lo por,entaje de la propiedade anteriore ha ta que queden a u gu to. T93.#. .Gada e ta nueva propiedad font.siLe:8&CO y ,a*-ie el por,entaje intentando *antener el te4to legi-le. T93.(. )l 1lti*o pa o ,on i te en ,on eguir ,a*-io per*anente 0 para ello0 2Eje e en el no*-re del 2i,hero .css y la lEnea indi,ada en +ire-ug0 inde@.css y 1<00 apro4i*ada*ente. Bo,ali,e e te 2i,hero en la ,arpeta de u nuevo te*a0 edEtelo ,on =otepad?? y avan,e ha ta la lEnea indi,ada. Copie lo ,a*-io he,ho de de +ire-ug a =otepad??0 guarde lo ,a*-io y navegue por el 2oro. T9#. 8ntente repetir el pro,e o alterando el -loque de ,a-e,era y el -loque que ,ontiene el li tado de 2oro . )n e te ,a o no intente o-tener varia ,olu*na 0 &lo lo *rgene para aprove,har todo el rea del navegador0 e de,ir0 in *argen.

i6ura ''. Captura con

irebu6 del bloBue de in4or!acin.

2+ A,/e"#o, ava!3ado,
3ratare*o do pro,e o -a tante ,o*une en lo todo lo CA$5 ,lonar un itio He- de nue tra propiedad y ,ontrolar a lo u uario que generan $P.A. Ba pri*era e una tarea ha-itual tanto en el de arrollo de un itio He- ,o*o en el *anteniendo y la egunda0 uele er una tarea *uy tedio a y &lo e2e,tiva a ,orto plazo.

).1. "#onaci2n de# sitio


Ba ,lona,i&n de un itio He- e una tarea *uy ,o*1n en el tra-ajo diario ,on CA$. Puede er en do entido eg1n el *otivo5

L2

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

9e de una ,opia de de arrollo a una ,opia en e4plota,i&n5 ) de arrollan en un equipo lo,al y ,uando e tn ter*inado 8nternet0 donde e ha,en lo 1lti*o aju te .

la *

,o*1n0 lo

itio

He-

e ,opia todo el ,ontenido al ervidor de

9e de una ,opia en e4plota,i&n a una lo,al5 ) te otro pro,edi*iento e 1til ,uando e pretende a*pliar la 2un,ionalidad del itio He- o realizar grande ,a*-io en el itio He-. =o e -uena idea realizar prue-a en un itio en e4plota,i&n0 podrEan ver e a2e,tado lo u uario ,on todo lo que ello ,onlleva. Realizare*o una ,lona,i&n de un itio real en nue tro equipo lo,al ,on el o-jetivo de poder a-ordar el pro-le*a del $P.A tratado en la iguiente e,,i&n. Con,reta*ente ne,e itar lo 2i,hero 4oroplone.sBl./ip y 4oroplone3s!4./ip. T9(. Cree una nueva -a e de dato ,on un nuevo u uario de de phpAy.d*in0 por eje*plo0 4oroc!s. )ntre en la -a e de dato re,iQn ,reada e i*porte el 2i,hero 4oroplone.sBl./ip0 e te 2i,hero 2ue previa*ente e4portado ,on otro phpAy.d*in. T9(.1. Cree una nueva ,arpeta en 555 de H.AP lla*ada 4oroplone y de ,o*pri*a el 2i,hero 4oroplone3s!4./ip dentro. T9(.2. =avegue a http566lo,alho t62oroplone y o- erve el re ultado. =o podr vi ualizar la pgina ,lonada por e to *otivo 5 1." Ba -a e de dato en el itio original tenEa otro no*-re 2." )l u uario6,ontra eGa de la -a e de dato no e ,orre,ta a,a-a de ,rear una y en el itio original ha-Ea otra '." Ba dire,,i&n del itio He- J#RBK ahora e http566lo,alho t0 ante era otra. T9(.3. Para olu,ionar e to pro-le*a edite ,on =otepad?? el 2i,hero de ,on2igura,i&n de e te 2oro lla*ado Settin6s.p.p. Lu que la e,,i&n indi,ada en el ,&digo 'D y rellene lo dato de ,one4i&n a u -a e de dato ,orre,ta*ente0 de-e ,a*-iar lo re altado en negrita5
[[[[[[[[[[ 0ata3ase 6nfo [[[[[[[[[[ _d3Sser2er > QlocalhostQO &db5name ' (mibase5de5datos(&db5user ' (mi5usuario(&db5passwd ' (un5secreto(_d3Sprefi4 > QsmfSploneSQO _d3Spersist > 0O _d3SerrorSsend > 1O Cdi6o 'K. Con4i6uracin en ":" de la base de datos de SM .

T9(.#. =avegue de nuevo a u itio ,lonado y ver el 2oro. Pare,e que 2un,iona ,orre,ta*ente pero navegue a un 2oro y o- erve la dire,,i&n J#RBK en la -arra del navegador. $i pul a o-re ,ualquier enla,e le *anda al 2oro original. Cay que ,orregirlo en el *i *o 2i,hero de ,on2igura,i&n -u ,ando la e,,i&n indi,ada y e ta-le,iendo e to valore 5
[[[[[[[[[[ Dorum 6nfo [[[[[[[[[[ _m3name > QDoro de "loneQO [ ?he name of ,our forum. _language > Qspanish.utf8QO [ ?he default language file set for the forum.

Mdulo ;b 3 Gestores de 4oros

L-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa &boardurl ' (http+//localhost/foroplone([ M=@ to ,our forumQs folder.

Cdi6o 'L. Con4i6uracin en ":" de la direccin $7L base del 4oro SM .

T9(.(. .hora puede navegar por el 2oro0 pero puede que tenga *al a pe,to. #tilizare*o +ire-ug para -u ,ar el origen del pro-le*a0 a,tive +ire-ug en el navegador y a,,eda a la pe taGa de Red0 ver 2igura ':. +ire-ug le indi,ar que e t ina,tiva0 a,tEvela y re,argue la pgina utilizando la te,la +<. 9e-e o-tener un re ultado pare,ido al de la 2igura ':. T9(.+. Pa ando el rat&n por en,i*a de lo ele*ento *ar,ado en rojo le indi,a la dire,,i&n de 8nternet de de la que intent& traer e el ele*ento0 igue a,,ediendo a la pgina original. ) ta dire,,ione e tn *al0 ya que todo el itio He- e t en local.ost. ) to e olu,iona un re,on2igurando $A+ ,on el u uario de ad*ini tra,i&n. )n e te 2oro el ad*ini trador e

u uario ,on el no*-re y ,ontra eGa indi,ada en el 2i,hero C$7SCCMS.t@t in,luido en el 2i,hero ,o*pri*ido. )n ,uanto a,,eda apare,er un avi o en rojo ,on el *en aje El directorio de de4ault de los te!as es incorrecto8 4a%or de corre6irlo .aciendo clic< en este te@to. T9(.). Con la ,uenta de ad*ini trador entre en el *en1 .d*ini tra,i&n U Con2igura,i&n del 2oro U Con2igura,i&n de te*a . )n la parte in2erior de la pgina en,ontrar un 2or*ulario ,on un -ot&n 8ntentar reini,iar todo de2initiva*ente. lo te*a . P1l elo y de-erEa arreglar e el a pe,to del 2oro

Pe Pe taGa taGade dered red

Bi Bi tado tadode deo-jeto o-jeto re2eren,iado re2eren,iado por pore e ta tapgina pgina

i6ura '(. "estaa de red de

irebu6.

L;

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

).2. "ontro# de SP4(


)l $P.A o *en aje no de eado 0 e uno de lo *ayore pro-le*a tanto en el ,orreo ele,tr&ni,o ,o*o en toda la He-2.0. .unque e4i ten di2eren,ia de opini&n o-re el origen del tQr*ino0 pare,e a,eptado la pro,eden,ia de una *ar,a de enlatado $P.A0 ,o*ida u ada por el ejQr,ito de ))## para ali*entar a la tropa en la egunda guerra *undial. #tilizare*o e ta ,lona,i&n del 2oro para *o trar la tarea de

ad*ini tra,i&n requerida

para 2renar e ta plaga0 en la *edida de lo

po i-le. $i navega por el 2oro que a,a-a de i*portar o- ervar *u,ho *en aje de $P.A que han dejado di2erente u uario .
i6ura '). Lata de S"MM.

T9+. )ntre en el pri*er 2oro y -u que el pri*er *en aje de $P.A e4i tente en el 2oro. Pul e o-re el no*-re de u uario para ver la in2or*a,i&n di poni-le. Ba ,lave e t en la dire,,i&n 8P 0 pul e o-re ella. T9+.1. )n la nueva pgina puede o-tener dato o-re la dire,,i&n 8P. Pri*ero averiguare*o o-re Ra trear 8P.

,uanto u uario e tn ha,iendo $P.A de de la rede ,on e a 8P . Ba dire,,i&n 8P e del tipo


1F8.13F.1'0.'80 ,a*-ie el 1lti*o dEgito por un a teri ,o5 1F8.13F.Z.Z y pul e

Pare,e que vario u uario e tn a,,ediendo de de e a red ,la e C V on todo u uario que ha,en $P.AW T9+.2. Pro-e*o ,on la red de ,la e L 1F8.13F.Z.Z o prue-e la red ,la e . 1F8.Z.Z.Z0 por i hay todavEa * . Ba ,ue ti&n e i -loquea*o una red ,la e . -loquea*o a * de 1> *illone de vario paE e o un ,ontinente entero0 aunque por equipo . Pro-a-le*ente -loquee*o

de e pera,i&n0 en e te 2oro e t -loqueada a toda Ru ia y . ia. T9+.3. Pul e o-re una de la dire,,ione a ignada 8P li tada y utili,e lo enla,e Lu ,ar 8P en un

ervidor regional de ;hoi para -u ,ar in2or*a,i&n o-re e ta 8P. =or*al*ente puede averiguar el proveedor y el rango de 8P al proveedor. Bo ha-itual e -loquear al proveedor ,o*pleto i no e de )uropa0 prue-e vario de lo enla,e para o-tener el rango de 8P . T9+.#. Con,reta*ente e te ,a o e trata de una itua,i&n real o,urrida el 2: de *ayo de 20120 y i ,o*prue-a la dire,,i&n 1(D.1'(.1>0.>D en .P=8C JRegi&n . ia Pa,i2i,oK ver que el origen del ataque viene de de un operador de tele2onEa *&vil de #,rania0 alguien por #,rania tiene un *arthone in2e,tado. T9). .,,eda al *en1 .d*ini tra,i&n U Controle o-tendr una li ta de re tri,,ione . T9).1. 9e la 2 li ta que apare,en una no e t e4pirada0 a,,eda pri*ero a la e4pirada por 8P y otra por de # uario U Bi ta de a,,e o prohi-ido y

utilizando el enla,e Aodi2i,ar. F-tendr una li ta de re tri,,ione 0 alguna no*-re. +Eje e ,ual e la que e ha o,urrido * ve,e .

T9).2. .,,eda ahora a la no e4pirada y aGada una nueva regla por 8P ,on la ,adena 1F8.13F.Z.Z0 ,on e te -loqueo quedan uno >0000 dire,,ione 8P in per*i o para poder pu-li,ar en el 2oro0

Mdulo ;b 3 Gestores de 4oros

L'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

pero pueden vi itarlo in re tri,,ione . T9).3. Vuelva a ver el per2il del u uario que hizo $P.A0 de-erEa ver ,o*o apare,e en rojo un *en aje indi,ando que e t -loqueado u a,,e o. T9).#. )n el *en1 de la Lorrar. T9).(. =avegue el 2oro y -u que otro *en aje de $P.A. Co*prue-e regla que -loquee pro,e o 37(.:. T9).+. Repita el pa o 37(.<. ha ta que el 2oro quede li*pio de $P.A. #n *Qtodo *uy utilizado para generar $P.A en lo di2i,ultando la dete,,i&n del origen del $P.A0 itio He- e regi trar *ultitud de u uario y u rango de 8P de ,la e L0 e to e lo * i el u uario e t ya e to repita el uperior dere,ha utili,e el enla,e .,,ione lo te*a y *en aje U Lorrar e ta ,uenta. y pul e o-re el -ot&n

$ele,,ione en el ,uadro la op,i&n Lorrar todo

-loqueado por alguna regla. $i lo e t repita el pro,e o 37(.:.0 i no e t -loqueado ,ree una razona-le. 3ra

dejarlo latente ,ierto tie*po. 3ra e te periodo de laten,ia e to u uario ,o*ienzan a generar $P.A e regi tran de de ,ierta 8P y po terior*ente de de otra generan $P.A0 in,lu o *e e de puQ . Co*pro-e*o e te he,ho5 T9-. .,,eda a la li ta de u uario del portal de de el *en1 de .d*ini tra,i&n U Controle de lo u uario U # uario . T9-.1. Co*prue-e la *ultitud de u uario regi trado que no han dejado ning1n *en aje. T9-.2. #tili,e la op,i&n Lu ,ar por # uario ,ero *en aje . T9-.3. Co*prue-e que on todo u uario preparado para ha,er $P.A y -&rrelo todo . .,tual*ente e4i ten *ultitud de progra*a e4i tente -arrera que en,argado de vi itar de *anera auto*ti,a lo 2oro iendo de y 2iltre lo u uario por aquello que han dejado

en la red intentando regi trar u uario

para po terior*ente generar $pa*. Ba pri*era i te*a de re,ono,i*iento on ,apa,e

e de-e poner e t en el regi tro de u uario 0 aquE e4i ten *ultitud de tQ,ni,a lla*ada Captc.a. Au,ho

tradi,i&n la i*agen ,on letra

altar e ta -arrera. $e ,on2igurar otra -arrera e4tra * di2E,il e altar. T99. .,,eda al panel de ,ontrol del 2oro y navegue a .d*ini tra,i&n U Con2igura,i&n .nti"$pa*. )n la parte in2erior de e ta pgina podr en,ontrar una e,,i&n lla*ada Pregunta de veri2i,a,i&n. ) ,ri-a alguna ,uya re pue ta ea 2,il0 por eje*plo V,uanta pata tiene un gatoW

5+ /9/ Bulle#i! Boa&d


phpLL e uno de lo ge tore de 2oro ,on *ayor re,orrido0 data del aGo 2000. =o e *uy di2erente a ,ualquier otro ge tor de 2oro 0 en ,uanto a 2un,ionalidad e i*ilar a $A+0 pero e *uy intere ante al poder integrar e en otro ge tore de ,ontenido * ,o*pleto del tipo Portal.

L(

Mdulo ;b 3 Gestores de 4oros

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Ba *ayor di2i,ultad apare,e al navegar entre la

op,ione

de ad*ini tra,i&n ,uando

e -u ,a una

deter*inada op,i&n. Cada CA$ e tru,tura lo 2or*ulario de ad*ini tra,i&n de *anera di2erente. )n la tarea de e ta e,,i&n no e va a detallar ,o*o e realiza la ,on2igura,i&n0 ,on la de treza adquirida en $A+ de-e averiguar ,&*o ad*ini trar phpLL a,udiendo a do,u*enta,i&n e4i tente en el itio o2i,ial de phpLL y re,orriendo todo lo *en1 de ad*ini tra,i&n. T111. 9e ,argue la ver i&n '.Z de phpLL -ien de de la pgina de *aterial del ,ur o o de de el itio o2i,ial de phpLL O'1P. Cree la nueva -a e de dato y u u uario a o,iado0 de ,o*pri*a el 2i,hero que ,ontiene phpLL y pro,eda a la in tala,i&n del *i *o *odo que hizo ,on $A+. T111. #tili,e la 2i,hero spanis.I4or!alI.onori4icsI-I2I'a./ip para in talar la tradu,,i&n al e paGol de phpLL. Con ulte la do,u*enta,i&n o2i,ial Jre2eren,ia O'2PK0 allE e e4pli,a ,o*o in talar el idio*a. $i tiene di2i,ultade ,on el inglQ 0 a,,eda a la dire,,i&n indi,ada en O''P0 e la ,o*unidad de e paGol de phpLL donde hay *u,ha do,u*enta,i&n0 pero di tri-uida por lo 2oro . T112. Cree una jerarquEa de 2oro y p&ngala operativa. Prue-e el i te*a de per*i o 0 u uario 0 et,. re,orriendo lo *en1 de ad*ini tra,i&n. T113. Ca*-ie el a pe,to vi ual de lo 2oro utilizando nuevo e tilo de de la pgina o2i,ial de

phpLL. .lternativa*ente puede utilizar el 2i,hero serenit1IpurpleI;.2.)./ip0 intente in talarlo.

Mdulo ;b 3 Gestores de 4oros

L)

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 2" % EG&ou/Wa&e


6estores de contenidos, so"t#are libre

1+ Re,u-e!
9ura,i&n e ti*ada5 2 hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero e@roup;are"1.D.zip jpgraph"1.2(.1.tar.gz e@roup;are"eg;"pear"1.D.zip e@roup;are"gallery"1.D.zip 3e%cri/cin )groupHare 1.D in tala-le +uente php de %pgraph .pli,a,i&n para )@roupHare .pli,a,i&n para )@roupHare

e@roup;are"php2ree,hat"1.D.zip .pli,a,i&n para )@roupHare egroup;are"re,ur o .zip


,abla -(.

Conjunto de i*gene utilizada

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O':P Pgina o2i,ial de )@roupHare0 <http566;;;.egroup;are.org6!. O'<P Pgina o2i,ial de %P@raph0 <http566jpgraph.net6!. O'>P Pgina o2i,ial de Aanti Lug 3ra,/er0 <http566;;;.*anti -t.org!.

.+ I!#&odu""i4!
Bo ge tore de ,ontenido para tra-ajo en grupo o ,ola-orativo per ona en,argada de de arrollar proye,to e tn di eGado para *ejorar la ,o*uni,a,i&n de la en organiza,ione . ) te tipo de

ge tore per*iten utilizar la red para a,,eder a re,ur o re*oto y ,o*partir la in2or*a,i&n de *anera

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

e2i,az entre lo integrante de una organiza,i&n o proye,to. ) to ge tore 2o*entan y 2a,ilitan el tra-ajo en equipo *ejorando la ,o*uni,a,i&n y dando a,,e o a todo lo *ie*-ro a nor*a 0 re,ur o 0 pro-le*a 0 olu,ione 0 et,. .de* 0 -ien ge tionado e ,on igue auto*atizar tarea de *odo de ,entralizada in apena ,on u*ir re,ur o hu*ano . )n e te ,ur o e tudiare*o la uite lla*ada )@roupHare0 la ,ual e un o2t;are ,on un un largo que e irn la

re,orrido y en un e tado *uy e ta-le. ) ta de* apli,a,ione en Ql.

uite ,ontiene ,antidad de apli,a,ione

*o trando a lo largo del *&dulo0 pero de ta,a el ge tor de proye,to 0 ,apaz de integrar a toda

1+ T&a*ajo e! 7&u/o "o! EG&ou/Wa&e


3ra-ajare*o o-re una in tala,i&n real en e4plota,i&n y di poni-le en el ervidor de e4terno utilizado en el ,ur o. T11#. )ntre en la pgina de ini,io de e i&n del ervidor He-Aail u ado en el ,ur o0 pero no ini,ie la e i&n de ,orreo. T11#.1. 9e pliegue el ,uadro de do*inio y ele,,ione el do*inio CA$. 8ntroduz,a u no*-re de u uario pero in el do*inio0 e de,ir0 i u ,orreo e u uario alu*no1 y la ,ontra eGa ,orre pondiente. T11#.2. #na vez ini,iada la ,o*prue-e i puede editar e i&n a,,eda a la li-reta de dire,,ione 0 li te lo u entrada de la li-reta0 e ta-lez,a u no*-re y lo ,onta,to 0 dato que alu*no1@zopeplone.e de-e introdudir el

,on idere oportuno para que otro alu*no lo puedan re,ono,er. T11#.3. .,,eda a la li-reta de dire,,ione la que e in,ronizar ,on u di po itivo . T11#.#. Cree una nueva li ta de di tri-u,i&n y agregue a alguno ,o*paGero del ,ur o0 u e el ,uadro de plega-le Bi ta de di tri-u,i&n. )n la iguiente e,,ione e repa arn la prin,ipale apli,a,ione in,luida en e te paquete de per onal0 Jutili,e uno de lo ,uadro de plega-le

uperiore K. Co*prue-e i e ta li-reta e t va,Ea0 aquE puede aGadir u ,onta,to . ) ta li-reta e

o2t;are para tra-ajo en grupo.

4.1. "a#endario
)l ,alendario e una de la apli,a,ione ,entrale de )@roupHare0 ade* de la 2un,i&n tEpi,a de ,ita y evento per*ite realizar plani2i,a,ione ,ruzando ,alendario de di2erente per ona 0 grupo 0 et,. Bo ,alendario per onale e pueden ,o*partir ,on u uario y ade* e ta-le,er ,ierto per*i o 0

por eje*plo0 e pueden ,o*partir un ,alendario pero *anteniendo ,ita privada . T11(. .,,eda al ,alendario y aGada alguna ,ita 0 al *eno una de-e er privada.

LK

Mdulo ;c 3 EGroupWare

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T11(.1. )n el li tado de ,alendario e*ana .

a,,eda al ,alendario del pro2e or. Co*prue-e ,o*o

apare,en la ,ita p1-li,a y privada 0 para ello ,a*-ie la vi ta del ,alendario a Vi ta *1ltiple

T11(.2. 8ntente ver el ,alendario de alg1n ,o*paGero del ,ur o. # e el enla,e Con,eder a,,e o para per*itir que todo lo ,o*paGero del ,ur o puedan ver u ,alendario0 pero a eg1re e que no pueden a,,eder a u ,ita privada . T11(.3. )lija un ,o*paGero de ,on2ianza y ,on,eda a,,e o a toda privada . T11(.#. $ele,,ione vario ,alendario de ,o*paGero del ,ur o i*ultnea*ente y ,o*prue-e la vi ualiza,i&n de vario ,alendario i*ultnea*ente en Vi ta e*anal y Vi ta *en ual. 9e-e pul ar o-re un i,ono pequeGo ,on do ,a-eza . T11(.(. Vea ahora el ,alendario del grupo Curso CMS. Pa e el rat&n por en,i*a de lo i,ono de la per ona para ver quien e el re pon a-le de ,ada ,ita. Para ello e re,o*ienda utilizar la vi ta Plani2i,a,i&n de grupo. T11(.+. .hora ,on el ,alendario del grupo ,o*pleto intente aGadir una nueva ,ita0 ele,,ione u ,ita 0 in,luyendo la

,o*o parti,ipante al grupo Curso CMS ,o*pleto. .hora utili,e el -ot&n Lu ,ar tie*po li-re para -u ,ar un hue,o de una hora y *edia0 ele,,ione el hue,o que en,uentre y titule la ,ita ,o*o 7eunin de alu!nos. ) te evento de-er apare,er en el ,alendario de todo lo ,o*paGero .

4.2. 4dministrador de recursos y arc5ivos


)l ad*ini trador de re,ur o e una apli,a,i&n *uy 1til y per*ite ge tionar lo re,ur o del grupo realizando re erva de lo *i *o *ediante un ,alendario para evitar ,on2li,to . T11+. .,,eda al ad*ini trador de re,ur o y ,o*prue-e que hay 2 aula 0 < ordenadore porttile y 2 proye,tore . T11+.1. 9e-e re ervar un aula un -loque de do hora junto ,on un proye,tor0 a lo largo de la pr&4i*a e*ana. )l dEa que tenga el aula re ervada de-e re ervar un ordenador porttil *edio dEa0 *aGana o tarde. T11+.2. Pueden o,urrir ,on2li,to ,on lo ,o*paGero del ,ur o0 de-en re olver todo lo

,on2li,to y e ta-le,er un ,alendario para ,ada aula. )n todo CA$ de tra-ajo en grupo e e en,ial di poner de un *e,ani *o para ,o*partir ar,hivo y la ne,e idad de e ta-le,erlo ,orre,ta*ente i de ea*o

in2or*ti,o . )l ad*ini trador de ar,hivo de )@roupHare no pre enta ninguna di2i,ultad en u *anejo0 &lo *en,ionar la e4i ten,ia de per*i o ,o*partir ar,hivo . T11). .,,eda al ad*ini trador de ar,hivo y prue-e u-ir do,u*ento . T11).1. $u-a de nivel u ando el i,ono .rri-a J K y a,,eda a la ,arpeta del grupo Cur o CA$.

$u-a un ar,hivo y e ta-lez,a lo per*i o del ar,hivo para que lo *ie*-ro del grupo puedan

Mdulo ;c 3 EGroupWare

LL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

leerlo pero no *odi2i,arlo. T11).2. $u-a al pri*er nivel del ad*ini trador de ar,hivo y entre en la ,arpeta .pli,a,ione U Re,ur o . Co*prue-e que e4i te una ,arpeta por ,ada re,ur o del ad*ini trador de re,ur o 0 aquE e puede ,olo,ar la do,u*enta,i&n o-re el re,ur o0 ,o*o podrEa er un *anual de in tru,,ione .

4.3. 4dministrador de royectos y 5o+a de resencia


)l ad*ini trador de proye,to junto ,on el ,alendario entre E. Real*ente e on la do apli,a,ione ,entrale de

)@roupHare y e tn *uy rela,ionada ge ti&n de per*i o . Ftro de lo

e podrEa de,ir que toda la proye,to

uite gira *ediante

alrededor del ad*ini trador de proye,to . ) te ad*ini trador e de ,ierta ,o*plejidad0 o-re todo en la a pe,to relevante la repre enta,i&n de lo diagra*a de @antt y la e4i ten,ia de una *aquinaria de ,l,ulo de ,o te para lo proye,to . 8ndi,ar que un diagra*a de @antt e una repre enta,i&n gr2i,a del e tado de progre o6plani2i,a,i&n de un proye,to. ) to diagra*a repre entan en el eje el verti,al la tarea del proye,to y en el horizontal el tie*po0 2Eje e en la 2igura '> la plani2i,a,i&n de la tarea de e te ,ur o y el e tado al dEa de e ,ritura de e te do,u*ento. )l ele*ento *ar,ado ,on un dia*ante e deno*ina hito0 e el dEa en el que de-erEa e tar e ta do,u*enta,i&n i*pre a.

i6ura '*. E9e!plo de dia6ra!a de Gantt.

)l ge tor de proye,to e t rela,ionado ta*-iQn ,on la apli,a,i&n .o9a de presencia en,argada de ha,er egui*iento per onal o del grupo en alguna a,tividad por eje*plo0 un proye,to. ) ta hoja de pre en,ia per*iten introdu,ir 2e,ha de eje,u,i&n0 hora invertida y el pre,io a ignado al *i *o. Con ella puede ha,er un egui*iento del per onal de un grupo. Para entender e te 2un,iona*iento *ejor parti,ipa,i&n de todo lo alu*no en Ql. T11-. .,,eda al ad*ini trador de proye,to 0 o-tendr un li tado de proye,to y tarea . F-tenga el li tado de proye,to y a,,eda a lo dato del proye,to titulado Curso CMS. T11-.1. #tili,e el diagra*a de @antt para ,o*pro-ar el e tado del proye,to. 9e-e ele,,ionar lo *e e %unio y %ulio en el intervalo de 2e,ha para o-tener una vi i&n ,o*pleta del proye,to. e ha in,luido un proye,to de eje*plo y e propone la e

-22

Mdulo ;c 3 EGroupWare

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T11-.2. )l proye,to ,on ta de un u-proye,to ,orre pondiente a la ,la e de aula. .,,eda a e te u-proye,to y ,o*prue-e en el li tado de *ie*-ro del proye,to i pertene,e a Ql. T11-.3. Por pertene,er a e te u-proye,to puede aGadir entrada 0 aGada un hoja de pre en,ia indi,ando que ha parti,ipado en el ,ur o ,o*o pro2e or durante 2 hora y e ta-lez,a un pre,io a u hora de tra-ajo. )n la 2igura '( e *ue tra el *en1 a utilizar aunque ta*-iQn lo puede realizar dire,ta*ente de de Coja de Pre en,ia. T11-.#. Co*prue-e en el diagra*a de @antt i apare,en la hora que ha dedi,ado y la di poni T -le . .de* ver la hora dedi,ada por lo ,o*paGero .

i6ura '+. Madir nue%a entrada al pro1ecto.

4.4. Sistema de seguimiento 8$rac6er;


Bo i te*a de egui*iento on herra*ienta in2or*ti,a *uy utilizada en ,ualquier *-ito. e uelen lla*ar bu6 por organi *o

8ni,ial*ente de arrollada trac<ers y

para proye,to

o2t;are a,tual*ente lo de arrollo ya

e pueden utilizar para i*ple*entar ean Q to realizado

,ualquier tipo de egui*iento de in,iden,ia . )n in2or*ti,a e ta herra*ienta e utilizan *a iva*ente en todo privado 0 p1-li,o o por ,o*unidade de de arrollo. #tilizada para el de arrollo o2t;are0 e ta herra*ienta

a eguran una ,o*uni,a,i&n entre lo

de arrolladore y lo u uario 0 donde Q to 1lti*o ha,en reporte indi,ando lo de2e,to en,ontrado en el o2t;are. ) to de2e,to Jlla*ado tic<etsK on analizado por el per onal en,argado del *anteniT *iento y e ta-le,en5 una prioridad para tic<et0 un e tado en el que e en,uentra y una a igna,i&n de per onal para la tarea. ) ta de arrollo para el herra*ienta van * all de la noti2i,a,i&n de de2e,to 0 en *u,ho indi,ando la nueva ,ara,terE ti,a que de ean e per*ite a lo u uario ,rear entrada

o2t;are0 el equipo de de arrollo lo analiza y la eje,uta o po pone para una 2utura ver i&n.

9e ta,an ,o*o i te*a * ,ono,ido Lugzilla y Aanti . Centrndono de en )@roupHare0 Q te i*ple*enta un i te*a de egui*iento dividido en ,ola er ie*pre a E0 de e

egui*iento. )l ad*ini trador del itio puede de2inir tanta ,ola de egui*iento ,o*o de ee. #na ,ola egui*iento nor*al*ente e tar a o,iada a un proye,to0 pero no tiene que pueden tener ,ola de egui*iento para ,ualquier prop& ito.

Mdulo ;c 3 EGroupWare

-2-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

#n ,o*porta*iento i*pli2i,ado e puede re u*ir ,o*o igue5 una vez a-ierta una in,iden,ia por un u uario queda en e tado abierto ha ta que un re pon a-le la analiza y de,ide la ,a*-iar de e tado a pendiente o rec.a/ada ade* 0 e ta-le,e la prioridad y otro atri-uto . +inal*ente ,uando e re uelve la in,iden,ia e ,ierra in,luyendo toda la in2or*a,i&n adi,ional que e ,rea oportuna. 3anto )@roupHare ,o*o ,ualquier otro ge tor de in,iden,ia per*iten ,on2igurar el i te*a de

egui*iento de2iniendo lo e tado por lo que pa an la in,iden,ia 0 ,ategorEa a la que pertene,en0 la prioridade 0 ver ione de produ,to a2e,tada 0 equipo de tra-ajo y *u,ha ,on un eje*plo alguna de ella . T119. .,,eda de de el ad*ini trador de proye,to al u-proye,to 9o,en,ia y *ue tre la Bi ta de ele*ento . T119.1. .Gada una in,iden,ia0 ,orre pondiente a una nueva entrada del tipo $i te*a de egui*iento0 indi,ando una errata en deter*inada pgina de la do,u*enta,i&n de ,ur o. Para ello en el 2or*ulario de nueva in,iden,ia rellene5 Cola 9o,u*enta,i&n y Ver i&n U %ulio2012. T119.2. .,,eda de de el *en1 prin,ipal uperior al i te*a de egui*iento ,o*pleto. ) ,oja una entrada de in,iden,ia en e tado a-ierta y a Egne ela a E *i *o guardando lo ,a*-io . #na vez a ignada al a-rirla podr e ta-le,er el e tado ,o*o pendiente y la re olu,i&n a .,eptada. T119.3. .,,eda a otra in,iden,ia0 ,ierre la in,iden,ia y *rquela ,o*o re,hazada0 deje un ,o*entario a la per ona que la a-ri& indi,ando el *otivo del re,hazo. T119.#. .Gada una nueva in,iden,ia en la ,ola Aejora . de egui*iento U Lug 0 CategorEa U * op,ione . Vere*o

4.). 0tros m2du#os


.de* de la apli,a,ione de ,rita ha ta ahora0 )@roupHare di pone de otra apli,a,ione

de ,rita -reve*ente a ,ontinua,i&n5 .d*ini trador de noti,ia 5 ) in,luye 2un,ionalidad R$$. $ondeo 5 Per*ite realizar en,ue ta entre lo u uario . Aar,adore 5 Bi ta de enla,e e4terno del *i *o e tilo que lo e4i tente en ,ualquier navegador de 8nternet. ) to enla,e i*portar. La e de ,ono,i*iento 5 $e pueden guardar pregunta y re pue ta e tilo +.I. $e puede ,one,tar ,on el i te*a de egui*iento para re olver in,iden,ia reportada por u uario . 3a*-iQn e pueden in,luir pregunta in re pue ta en e pera de que alg1n u uario e ,ri-a la re pue ta. e pueden ,o*partir entre *ie*-ro de grupo de tra-ajo y e4portar e un ge tor de noti,ia organizado en ,ategorEa -a tante i*ple0

Cone,tor $.AL.5 ) una utilidad para ,one,tar a travQ de )@roupHare la ,arpeta ,o*partida en lo ordenadore de la organiza,i&n. Hi/i5 )l Hi/i ya ha ido a*plia*ente e tudiado en e te ,ur o0 no pre enta ninguna ,ara,terE ti,a

-2;

Mdulo ;c 3 EGroupWare

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

adi,ional a lo vi to . Plantilla ele,tr&ni,a5 ) una apli,a,i&n avanzada para ,rear -a e de dato 0 2or*ulario a o,iado y ,&digo para *anipular lo dato en )@roupHare. Puede -u ,ar e,e!plate en la pgina o2i,iale de )groupHare0 para o-tener * in2or*a,i&n.

4.,. Sincroni%aci2n
Ftra ,ara,terE ti,a de gran utilidad de )@roupHare e la ,apa,idad de in,roniza,i&n ,on di2erente di po itivo y progra*a de o2i*ti,a. Ba in,roniza,i&n per*ite tener dato ,o*o li-reta de dire,,io T ne 0 ,alendario0 tarea 0 nota 0 et,. en *odo o22line J2uera de lEneaK y poder realizar *odi2i,a,ione . Cuando el di po itivo o progra*a vuelva a e tar en lEnea0 in,roniza lo dato lo,ale ,on lo re*oto 0 in,lu o0 re uelve ,on2li,to . Ba ti,o in,roniza,i&n ha,e que la e ,on igue i*ple*entando proto,olo ie*pre 2un,ione en a*plia*ente utilizado ve,e y e tandarizado o,urren dupli,iT

,o*o on $yn,AB0 iCal0 @roup9.V0 et,. Ba gran variedad de di po itivo *&vile y progra*a in2or*T in,roniza,i&n no u totalidad. .lguna dade en la agenda y li-reta0 y en el peor de lo ,a o pQrdida de dato . $i e de,ide a utilizar la in,roniza,i&n ,on idere realizar ,opia de eguridad de u dato a idua*ente. )@roupHare tiene una e4,elente pgina titulada S1nc.ronisation C%er%ie5 indi,ando lo ,o*pati-le y la ,on2igura,i&n para ,ada uno de ello . )ntre la prue-a realizada ,orre,to 2un,iona*iento de lo di po itivo e ha ,o*pro-ado el

iguiente 5 A$ Futloo/ 200( Ju ando el ,liente 2una*-olK0 )volution0

3hunder-ird0 *&vile ,on $y*-ian0 *&vile ,on Hindo; Ao-ile y *&vile ,on .ndroid. $i lo de ea puede realizar prue-a pero haga ,opia de eguridad de u dato ante 5 T111. )n la parte uperior de la pgina0 en,i*a de lo i,ono de enla,e de )@roupHare a,,eda al enla,e Pre2eren,ia . T111.1. )n el li tado de apli,a,ione -u que una lla*ada s1nc!l. .,,eda a la pre2eren,ia 0 &lo para verla no ,a*-ie nada. T111.2. .,,eda a la do,u*enta,i&n0 aquE en,ontrar la di2erente apli,a,ione ,on u progra*a o di po itivo. T111.3. Reali,e varia prue-a entre equipo y provoque ,on2li,to ante de de,idir e a utilizarla de2initiva*ente. #RB a utilizar para in,ronizar la

2+ I!,#ala"i4! ' ad-i!i,#&a"i4!


)ntre la *ultitud de op,ione e4i tente en )@roupHare e t el *ultido*inio0 una in tala,i&n de e te ge tor puede er utilizada para ge tionar vario do*inio . #n do*inio uele e tar a o,iado a una organiza,i&n a E0 e pueden alojar di2erente organiza,ione o u-organiza,ione de una *i *a entidad -ajo una *i *a in tala,i&n.

Mdulo ;c 3 EGroupWare

-2'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

F-viare*o e ta ,ara,terE ti,a0 tra ,on2igurar un do*inio agregar * no pre enta *ayor di2i,ultad0 no ,entrare*o en ge tionar un 1ni,o do*ino.

).1. Insta#aci2n
Puede de ,argarlo de de la pgina o2i,ial en la e,,i&n de de ,arga 9o;nload U Co*unity Ver ion o utilizar el 2i,hero eGroup5are3-.K.@./ip propor,ionado ,on el *&dulo. $i e de,ide a de ,argarlo0 e ,oja la op,i&n ,on el ,&digo 2uente original ,o*pri*ido en M8P. T111. Cree una nueva ,arpeta en el dire,torio 555 de H.AP lla*ada0 por eje*plo e6roup5are. 9e ,o*pri*a el ,ontenido del 2i,hero M8P0 evitando la apari,i&n de una do-le ,arpeta e6roup5are0 e de,ir0 evite que dentro de 555Se6roup5are aparez,a otra ,arpeta e6roup5are. T111.1. =avegue a la dire,,i&n http566lo,alho t6egroup;are para realizar la in tala,i&n. ) ta-lez,a el idio*a a e paGol y utili,e el enla,e )je,utar prue-a de in tala,i&n0 pro-a-le*ente 2alte 9p6rap.0 po terior*ente e in talar. T111.2. Pa e al iguiente pa o de in tala,i&n lla*ado Gestor de encabe/ados y ,o*pro-ar que ne,e ita una -a e de Ay$IB. Cree un u uario y una -a e de dato a o,iada por el pro,edi*iento ha-itual en phpAy.d*in. T111.3. ) i*portante a egurar e que el el tipo de al*a,ena*iento por de2e,to de Ay$IB e M1ISMM0 para ello de-e *irar el ar,hivo de ,on2igura,i&n de Ay$IB de de el *en1 de H.AP 0 ,on ulte la 1lti*a e,,i&n del *&dulo dedi,ado a Ay$IB Jpgina >>K. T111.#. Con2igure ,orre,ta*ente la in tala,i&n de )@roupHare y utili,e el -ot&n ) ,ri-ir para ,rear el itio ;e-.

T112. #na vez ,reado el itio de-e ,on2igurarlo0 entre ,on el u uario de ad*ini tra,i&n y la ,lave que e ,ogi& en el 2or*ulario de 8n tala,i&n Jno en el ad*ini trador del en,a-ezadoK. 9e-e eguir todo lo pa o indi,ado en la pgina teniendo en ,uenta la iguiente ,on idera,ione 5

T112.1. )n el pri*er pa o hay un ge tor de apli,a,ione 0 de-e in talar toda la apli,a,ione . $i o-tiene un error rela,ionado ,on $LL,EF, de-e entrar en phpAy.d*in y -orrar toda la ta-la ,reada por )groupHare0 de-e ,on2igurar Ay$IB eg1n e indi,a en 3111.'. T112.2. .hora ,on2igure el itio en el pa o 20 J-ot&n )ditar la ,on2igura,i&n a,tualK. )n la

pri*era op,i&n indique que va a al*a,enar lo ar,hivo en la -a e de dato 0 aunque no e &pti*o0 para nue tro prop& ito ervir. =o e olvide de ,on2igurar el ervidor de ,orreo ,orre,ta*ente. T112.3. )n el pa o ' ,ree una ,uenta de ad*ini tra,i&n y a,tive la ,a illa 9ar per*i o de ad*ini tra,i&n a toda la apli,a,ione in talada 0 no e olvide de la ,ontra eGa. T112.#. )n el pa o < e t el ad*ini trador de apli,a,ione . 9e-en apare,er *u,ha apli,a,ione in talada pero pro-a-le*ente 2alte el ge tor de ,orreo. . partir e t operativo el itio0 pero ante de ,o*enzar a tra-ajar en Ql in talare*o la apli,a,ione que

-2(

Mdulo ;c 3 EGroupWare

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

han 2altado. ) ta

apli,a,ione

e di tri-uyen por

eparado0 aGadire*o

toda

la

apli,a,ione

di poni-le para pro-ar todo el i te*a ,o*pleto. T113. 9e de el itio o2i,ial o de de el *aterial del *&dulo to*e el 2i,hero eGroup5are3e653pear3 -.K.@./ip. T113.1. Para realizar la in tala,i&n hay que de ,o*pri*ir e te 2i,hero en la ,arpeta donde e tQ in talado )@roupHare. T113.2. Co*prue-e en el ad*ini trador de apli,a,ione ituado al 2inal de la pgina. T113.3. $i la in tala,i&n e ,orre,ta e a,tivara el ,o*ple*ento e!ailad!in y puede ele,,ionar la op,i&n in talar0 in tlelo. T113.#. Repita el pro,e o de in tala,i&n ,on 4ela!i!ail. T113.(. Re,uerde que para volver a lo *en1 de in tala,i&n hay que aGadir la ,oletilla setup a la dire,,i&n de u itio )@roupHare. T113.+. Iueda por in talar 9p6rap. ne,e ario para la genera,i&n de lo diagra*a de @antt. ) ta in tala,i&n e *anual0 de-e ,rear en el dire,torio 555 de H.AP una ,apeta lla*ada 9p6rap.. 9entro del ar,hivo ,o*pri*ido 9p6rap.3-.;+.-.tar.6/ en,ontrar una ,arpeta lla*ada src0 entre en e ta ,arpeta y ,opie todo el ,ontenido en el dire,torio que ,re&0 555S9p6rap.. T11#. =avegue al nuevo itio ,reado y entre ,o*o ad*ini trador. la apli,a,i&n e653pear ,o*o no

in talada Jre,argando la pginaK. Aarque e ta apli,a,i&n para in talar y u e el -ot&n @uardar

).2. "onfiguraci2n recomendada


)@roupHare e t di eGado para adaptar e a di2erente ,a uE ti,a de organiza,ione 0 por ello

,ontiene gran ,antidad de op,ione y *odo de 2un,iona*iento que no a-ordare*o en e te ,ur o. $E realizare*o una ,on2igura,i&n tEpi,a orientada a una pequeGa organiza,i&n y que e adapta a *u,ha itua,ione reale . ) ta-le,ere*o en pri*er lugar una *Eni*a ,on2igura,i&n re,o*endada del CA$ ante de a-ordar u u o para un ,a o de eje*plo. T11(. .l er ad*ini trador apare,er un pri*er i,ono .d*ini tra,i&n donde e li tan lo enla,e para e ta-le,er toda la ,on2igura,i&n. 9e-erEa repa ar toda que ha-itual*ente on ne,e aria ,a*-iar. T11(.1. Per*itire*o a lo u uario editar u propio ,a*po per onale . Para ,on eguirlo0 itio0 ele,,ione la op,ione de la pri*era de la e,,ione lla*ada ad*ini tra,i&n. =o ,entrare*o en per onalizar la * di2E,ile de lo,alizar y

avan,e la pgina ha ta la lo dato de u ,uenta.

e,,i&n Bi-reta de dire,,ione

U Con2igura,i&n del

todo lo ,a*po que de ee per*itir a lo u uario ,a*-iar en Per*itir a lo u uario *antener

Mdulo ;c 3 EGroupWare

-2)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T11(.2. Per*itire*o

a lo

u uario

ad*ini trar

identidade

y agregar * ,a illa Bo

,uenta

de

,orreo en el He-Aail. .van,e la pgina de ad*ini tra,i&n ha ta e*ailad*in U Con2igura,i&n del itio. )dite el per2il e4i te o aGada un nuevo per2il y *arque la u uario pueden de2inir u propia identidade y Bo u uario pueden de2inir u propia ,uenta de ,orreo.

).3. E+em #o de configuraci2n


#tilizare*o ,o*o eje*plo una pequeGa organiza,i&n e intentare*o ge tionarla ,on )@roupHare. Ba organiza,i&n tiene la 9i pone de lo iguiente ,ara,terE ti,a 5

iguiente re,ur o 5 una 2lota de ' vehE,ulo 0 una ala de reunione 0 2 tallere y :

equipo porttile . .tiende in,iden,ia de u ,liente y tiene un equipo de *anteni*iento para in,iden,ia interna . )l per onal e t divido en per onal de aten,i&n al ,liente0 tQ,ni,o y je2e de proye,to . $e proponen una erie de tarea para ,on2igurar el ge tor para e ta organiza,i&n. T11+. .,,eda al ,alendario para ge tionar lo dEa 2e tivo . ) ta-lez,a el *e de ago to entero de va,a,ione . T11). 9e de alta lo re,ur o en di2erente ,ategorEa 5 2lota0 e pa,io y equipo . .Gada lo re,ur o enu*erado en ,ada ,ategorEa. T11-. Cree tre grupo para el per onal de la organiza,i&n. .Gada alguno u uario para prue-a . T119. Cree do ,ola per onal tQ,ni,o. T121. Cree alguno proye,to pero a eg1re e que no tiene a,,e o el per onal de aten,i&n al ,liente. T121. .,,eda al ge tor de proye,to y genere una li ta de pre,io . ) ta-lez,a tari2a de hora 5 hora del tQ,ni,o a 2<h0 la hora del je2e de proye,to :0h. . igne per onal a u proye,to0 e ta-lez,a la hora y ,o*prue-e el pre,io. T122. )ntre en ,ada apli,a,i&n y en el *en1 lateral0 a,,eda a la pre2eren,ia . Co*prue-e que de in,iden,ia 0 una de ,liente y otra interna. Ba ,ola de ,liente de aten,i&n al ,liente0 la ,ola interna e de-e er

ge tionada por el grupo de per ona

ge tionada por el

puede e ta-le,er para ,ada apli,a,i&n Pre2eren,ia predeter*inada y Pre2eren,ia 2orzada .

5+ Ta&ea, adi"io!ale,
T123. 8n tale la apli,a,ione de )@roupHare 6aller1 y p.p4reec.at y prue-e u 2un,iona*iento. T12#. #tili,e el ad*ini trador de noti,ia de )@roupHare para u ,ri-ir e al R$$ del proye,to

)@roupHare de $our,e2orge0 a E a-r ,uando apare,e una nueva ver i&n e )@roupHare T12(. 8ntente ,on2igurar el ,orreo ele,tr&ni,o para que e ,one,te a u ,uenta de @*ail. T12+. 9e ,argue Corde y ,o*prelo ,on )groupHare.

-2*

Mdulo ;c 3 EGroupWare

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T12). Prue-e Aanti Lug3ra,/er Jre2eren,ia O'>PK0 e un ge tor dedi,ado 1ni,a*ente a la ge ti&n de in,iden,ia 0 e *uy 2,il de in talar y u ar.

Mdulo ;c 3 EGroupWare

-2+

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 2d % <&e,#aS9o/
Co$ercio electr/nico y tiendas online

1+ Re,u-e!
9ura,i&n e ti*ada5 ' hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero pre ta hopN1.:.D.2.zip re,ur o "pre ta hop.zip 3e%cri/cin 8n talador de Pre ta$hop Re,ur o para el ,ontenido de la tienda

pre ta hop",hri t*a "2011.zip 3e*a para Pre ta$hop pre ta hop"pro2e or.zip0 pre ta hop"pro2e or. ql.zip te*a"pre ta hop.zip
,abla -).

Copia de una tienda para prue-a Re,ur o para la ela-ora,i&n de un te*a

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O'(P Pgina o2i,ial de Pre ta$hop0 <http566;;;.pre ta hop.,o*6!. O'DP Pgina de de arrollo de Pre ta$hop0 <http566,ode.google.,o*6p6pre ta hop6!. O'7P 9o,u*enta,i&n 9o,u*enta,i&n tQ,ni,a de la $olu,i&n e",o*er,io open" our,e Pre ta$hop0 v1.00 di, 20100 <http566;;;.pre ta hop.,o*6do;nload63e,hguideNe .pd2!. O:0P PayPal0 <http 566;;;.paypal.,o*6!. O:1P $olu,ione de pago PayPal para tienda ele,tr&ni,a 0 <http 566;;;.paypal.,o*6*pp6*er,hant!. O:2P $and-o4 para prue-a ,on PayPal0 <http 566developer.paypal.,o*6!.

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.+ I!#&odu""i4!
Pre ta$hop e un ge tor de ,ontenido de arrollado para el ,o*er,io ele,tr&ni,o o e",o**er,e. )l ,o*er,io ele,tr&ni,o e *uy ,o*1n hoy en dEa y ha pa ado de er algo e4,lu ivo para grande ,orpo T ra,ione a er *uy ha-itual en la pequeGa e*pre a . )4i ten *ultitud de apli,a,ione para ,o*er,io ele,tr&ni,o tanto li-re ,o*o privativa 0 y toda la entidade 2inan,iera di ponen de olu,ione de pago para e te tipo de ,o*er,io. . pe ar de la ventaja que o2re,e0 lo prin,ipale in,onveniente uelen provenir por parte de lo

,liente . Ba de ,on2ianza por parte del ,liente ha,ia la tienda virtual uele er elevada0 o-re todo0 i no e4i te una tienda 2E i,a detr 0 aquE tienen ventaja quiene teniendo un nego,io lo a*plEan para tener pre en,ia en la red0 2rente a la tienda pura*ente virtuale . Ftro de lo prin,ipale e ,ollo e la nor*ativa vigente donde lo prin,ipale re2erente ante de

,o*enzar ,on e te tipo de nego,io on5 Ba dire,tiva europea '062001 8n2or*a,i&n. Ba ley ':62002 o-re Co*er,io )le,tr&ni,o y $ervi,io de la $o,iedad de 8n2or*a,i&n. Bey '26200' @eneral de 3ele,o*uni,a,ione o-re Co*uni,a,ione )le,tr&ni,a que *odi2i,a la o-re ,o*er,io ele,tr&ni,o y ervi,io de la o,iedad de la

Bey de Co*er,io )le,tr&ni,o y $ervi,io de la $o,iedad de 8n2or*a,i&n. 3oda on 2,ile de o-tener en P9+ en 8nternet. .de* 0 e i*portante ,on iderar i e realizarn

tran a,,ione

interna,ionale

y 2uera de la zona euro0 ,o*pli,a *

la nor*ativa apli,a-le ya que

depende de ,ada paE . 8ndependiente*ente de ,ue tione legale 0 en e te ,ur o tra-ajare*o ,on el ge tor de ,ontenido para ,o*er,io ele,tr&ni,o Pre ta$hop ,on li,en,ia ,on iderada li-re F$B JFpen $o2t;are Bi,en eK. ) te ge tor tiene po,o re,orrido0 na,i& en 200( pero ha tenido un gran Q4ito al de arrolla e ,on te,nologEa *oderna 2rente a u prede,e ore . )n lo 1lti*o aGo pre enta un 2uerte ,re,i*iento en tanto en u ,o*unidad li-re ,o*o en n1*ero de in tala,ione .

1+ I!,#ala"i4! ' ad-i!i,#&a"i4! *0,i"a


.l e tar Pre ta$hop de arrollado en PCP6Ay$IB la in tala,i&n utilizado en otro CA$. 9urante la ela-ora,i&n del ,ur o Pre ta$hop0 por ello0 e han dete,tado pro-le*a en alguna de la in tala,ione de igue el pro,edi*iento ha-itual

e re,o*ienda tra-ajar ,on la ver i&n

u*ini trada en e te *&dulo en vez de

de ,argar dire,ta*ente de la He- la 1lti*a ver i&n. T12-. 9e ,o*pri*a el 2i,hero zip de in tala,i&n de Pre ta$hop indi,ado en la ta-la 1< en una nueva ,arpeta del u H.AP lo,al0 por eje*plo cJS5a!pS555Sprestas.op.

--2

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T12-.1. .,,eda a phpAy.d*in para ,rear una nueva -a e de dato y un u uario para e te ge tor de ,ontenido . #tili,e el *Qtodo tradi,ional ,on i tente en a,,eder a la pe taGa Privilegio aGadir un nuevo u uario lla*ado prestas.op ,on u -a e de dato a o,iada. T12-.2. =avegue lo,al*ente a http566lo,alho t6pre ta hop para ini,iar la in tala,i&n0 durante la in tala,i&n de-e ,on iderar lo iguiente5 )n la egunda pantalla5 en 3ipo de in tala,i&n ele,,ione Aodo - i,o5 in tala,i&n y

i*pli2i,ada J@R.38$K. )n la egunda pantalla5 en Par*etro de envEo de e*ail rellene ade,uada*ente lo dato a partir u hoja de re,ur o )n in2or*a,i&n u*ini trada al prin,ipio del ,ur o.

o-re el vendedor5 $u-a el logotipo in,luido ,on el *aterial del *&dulo

Jre,ur o "pre ta hop.zipK. T12-.3. Cuando ter*ine -orre de de el ad*ini trador de ar,hivo de Hindo; la ,arpeta de

in tala,i&n install y reno*-re la ,arpeta ad!in por eje*plo a ad!inc!s. $e realizar una ,on2igura,i&n - i,a ante de ,o*enzar a aGadir produ,to a la tienda. 8ni,ial*ente Pre ta$hop tiene do *odo de 2un,iona*iento5 *odo tienda o *odo ,atlogo. )l *odo ,atlogo e t pen ado para utilizarlo ,o*o un e ,aparate0 in op,ione de ,o*pra de de 8nternet0 en el *odo tienda toda la 2un,ionalidad de ,o*pra e t operativa. T129. .,,eda a la zona de ad*ini tra,i&n de la tienda u ando la dire,,i&n e u tienda aGadiendo el no*-re de la ,arpeta de ad*ini tra,i&n del pa o anterior0 http566lo,alho t6pre ta hop6ad*in,* . T129.1. ) ta-lez,a lo par*etro - i,o de la nueva tienda en el *en1 de ad*ini tra,i&n de Pre2eren,ia U 9ato . T129.2. .,,eda ahora a la op,i&n Produ,to y en,ontrar ,o*o pri*era op,i&n el *odo de tienda que de ee. Revi e e ta pgina de op,ione para e ta-le,er la que ,rea oportuna . T129.3. Revi e el re to de op,ione 0 e re,o*ienda dejarla a u valore por de2e,to. T129.#. Ba pri*era op,i&n e . pe,to u-a el 2i,hero lo6otipo3tienda.9p60 en el ,uadro Bogo de en,a-eza*iento lo en,ontrar dentro del 2i,hero de re,ur o de e te *&dulo lla*ado recursos3 prestas.op./ip. 9e ,o*pri*a e te 2i,hero en alg1n lugar del di ,o para u arlo a lo largo del *&dulo.

4.1. (2du#os y dis osici2n de #a &gina


$i e vi ita un tienda Pre ta$hop re,iQn in talada apare,er va,Ea ini,ial*ente. =o &lo e t va,Ea por 2alta de produ,to en la tienda0 ino porque ade* todo lo ,o*ponente que *ue tran el ,ontenido e tn de a,tivado . .nte de llenar la tienda de produ,to e re,o*enda-le e ta-le,er una di po i,i&n ini,ial de lo ,ontenido aunque 2inal*ente e ,a*-ien de u-i,a,i&n o e de a,tiven0 de lo ,ontrario no e podrn ir viendo lo produ,to a *edida que e introdu,en.

Mdulo ;d 3 "restaS.op

---

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)n Pre ta$hop el ,ontenido e pre enta *ediante ,o*ponente lla*ado *&dulo e ini,ial*ente todo lo *&dulo e tn ina,tivo . T131. .,,eda al *en1 de ad*ini tra,i&n y navegue la pe taGa A&dulo . T131.1. Ba li ta de *&dulo un -ot&n para in talar lo e agrupa en di2erente e,,ione 0 de pliegue la e,,i&n

.pli,a,ione +ront F22i,e y ele,,ione lo indi,ado en la ta-la 1>. )n la parte in2erior en,ontrar ele,,ionado ,on el te4to 8n talar ele,,i&n. =o altere la ,on2igura,i&n de ning1n *&dulo0 po terior*ente e tratar. Mdulo Lloque de *ejore venta Lloque de ,ategorEa Lloque de *oneda Lloque de idio*a Lloque de enla,e Lloque Ai ,uenta Lloque ne; letter Lloque de enla,e per*anente Lloque tienda Lloque etiqueta Lloque de produ,to vi to Venta ,ruzada +uente de produ,to R$$ Produ,to 9e ta,ado en la Pgina de ini,io BiveMilla Co*entario o-re el produ,to Ventana de in2or*a,i&n produ,to 3reepodia v1.>.1
,abla -*. Mdulos ront C44ice acti%os inicial!ente.

S<: Carrito Lloque CA$

Mdulo

S<:

Priva,idad de dato de lo ,liente Lloque navega,i&n por 2a,eta Lloque de *ar,a Lloque de novedade Lloque de logo de pago Lloque 2uente R$$ Lloque proveedor Lloque de in2or*a,i&n per onal Lloque de ;i hli t )ditor de te4to pgina de ini,io $ello de ,on2ianza de la +8."=)3 i.dvize Aailjet CategorEa de produ,to A&dulo enviar a un a*igo

T131.2. =avegue a la tienda ,on otra pe taGa del navegador para ver la u-i,a,i&n de lo *&dulo . T131.3. .,,eda ahora a la zona de ad*ini tra,i&n A&dulo U Po i,ione 0 pul e el -ot&n )je,utar Bive)dit y prue-e *over lo *&dulo de u-i,a,i&n a u gu to. =o olvide guardar lo ,a*-io ,on el -ot&n in2erior para ha,erlo per*anente . )n la 1lti*a ulti*a zona de ad*ini tra,i&n apare,i& un li tado de po i,ione regione on vi i-le en toda la pgina 0 por eje*plo0 alguna di poni-le para lo

*&dulo . Pre ta$hop tiene la pre enta,i&n del itio He- dividido en *u,ha regione . Pero no toda la on &lo para la pantalla en la que el ,liente e t realizando el pedido.

--;

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

4.2. "reaci2n de# cat&#ogo


)l *odelo de tienda de Pre ta$hop e -a a en la ,rea,i&n de un ,atlogo de produ,to . )l ,atlogo igue un *odelo de organiza,i&n de produ,to jerrqui,o que apare,ern en el *en1 de navega,i&n del itio He-. Para *anipular ,orre,ta*ente el ,atlogo en Pre ta$hop hay que 2a*iliarizar e ,on lo ,on,epto que 2or*an parte del ,atlogo5 CategorEa y u-,ategorEa 5 ) la -a e del ,atlogo0 e trata en una organiza,i&n jerrqui,a para lo produ,to de la tienda. Produ,to 5 3odo lo produ,to e ,rean dentro de una ,ategorEa o u-,ategorEa y tendrn una

erie de atri-uto y ,ara,terE ti,a . Cara,terE ti,a 5 )n Pre ta$hop la ,ara,terE ti,a de lo produ,to e in2or*a,i&n adi,ional o-re el *i *o0 pero el u uario no tiene *odo de alterarlo durante la ,o*pra. .tri-uto de produ,to 5 Bo produ,to pueden tener di2erente varia,ione ,o*o puede er el e

,olor0 el tipo de enva e u otro . $i e ta varia,i&n e atri-uto . Pre ta$hop oporta varia,ione e tudiar po terior*ente. +a-ri,ante 5 )n ,ierto tipo de tienda *i *o .

ele,,iona-le por el u uario e ,on ideran ele,,i&n de u urario0

del pre,io en 2un,i&n de la

e li tan lo 2a-ri,ante 0 aunque e op,ional el u o de lo

9e-e ,on iderar e ,ierta a*-igXedad en el u o de la pala-ra atri-uto y ,ara,terE ti,a en Pre ta$hop0 e ,on ideran ,on,epto di2erente y e tn ligado a 2un,ionalidade di2erente . Po terior*ente e entrar en * detalle al re pe,to0 e e*pezar ,reando un ,atlogo - i,o de produ,to . T131. .,,eda al *en1 de ad*ini tra,i&n Catlogo y ,ree una nueva e tru,tura ,o*o la *o trada en la 2igura 'D. T131.1. =o e ,ategorEa. T131.2. Vi ite u tienda para ver ,o*o apare,en la i*gene y el r-ol de navega,i&n. $e har una pri*era prue-a aGadiendo un produ,to ,on uno in,luyendo ,ara,terE ti,a y viendo u pre enta,i&n. T132. 9e de la pe taGa Catlogo aGada un nuevo produ,to u ando el enla,e .Gadir un nuevo produ,to. T132.1. .pare,ern ( 2or*ulario eparado en pe taGa ,on dato dato - i,o ne,e ario ,rear el r-ol entero0 al *eno i*gene preparada ,ree lo para ,ada
Bi-ro Bi-ro Cuento Cuento Poe Poe Ea Ea =arrativa =arrativa Vino Vino Rioja Rioja Ri-era Ri-era del del 9uero 9uero Vino Vino de de Aoguer Aoguer f f de* de* .,eite .,eite PapelerEa PapelerEa Regalo Regalo i6ura 'K. Cate6or?as.

,uento 0 el vino ,o*pleto. # e la

para rellenar. Rellene lo dato - i,o en la pe taGa 1.8n2o iguiendo la

Mdulo ;d 3 "restaS.op

--'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

ta-la 1( y u ando el te4to del 2i,hero te@tos3prestas.op.t@t. # e el -ot&n $alvar y guardar para no alir de la edi,i&n del produ,to. T132.2. )n la egunda pe taGa J2. 8*gene K u-a la i*gen preparada para e te li-ro5 producto3 libro3platero3131o.9p6. T132.3. )n la pe taGa <. Cara,terE ti,a enla,e aGadir una nueva ,ara,terE ti,a u e el para =o*-re Pe o Pre,io *ayori ta Pre,io in 8V. Regla de i*pue to $to,/ ini,ial Lreve de ,rip,i&n 9e ,rip,i&n Platero y fo 0.< < ( 1Dc 10 Pi*er prra2o te@tos3prestas.op.t@t

aGadir ,ara,terE ti,a . $e e 2ija ha alido de la edi,i&n del produ,to y e t en el *en1 de ad*ini tra,i&n .Gada la Catlogo U Cata,terE ti,a . iguiente 5 8$L=0 .utor0 .Go e 8dio*a la pe taGa Catlogo para

T132.#. =avegue

en,ontrar el li-ro que e ta-a editando y rellene apare,en la ,ara,terE ti,a .

,abla -+. Datos necesarios para un producto.

la ,ara,terE ti,a que a,a-a de aGadir. =avegue en u tienda ha ta e te produ,to para ver donde

3ra *o trar la ad*ini tra,i&n - i,a del produ,to y u ,ara,terE ti,a ,o*prender ,ual e la di2eren,ia entre e to do ,on,epto no*en,latura pre entan ,ierta a*-igXedad.

e u arn la propiedade para u

de Pre ta$hop que en prin,ipio por

)n el eje*plo propue to e di pondr de una *ar,a de a,eite en -otella de 00(< litro pero0 el ,liente e ,oge i quiere enva ado de ,ri tal o P)3 20 evidente*ente la ele,,i&n del enva e altera el pre,io 2inal0 ade* indi,are*o di2erente to,/ para ,ri tal y P)3.

T133. $i no aGadi& ante la ,ategorEa Mceite aGdala ahora junto ,on u ,ategorEa padre P de!As0 utili,e la i*gene predi eGada . T133.1. Co*pletare*o en e te produ,to *u,ho * dato 0 por ello a,,eda al *en1 Catlogo U +a-ri,ante y aGada 2a-ri,ante 0 lo puede to*ar el 2i,hero de te4to preparado . T133.2. .,,eda a Catlogo U .tri-uto y grupo y aGada un nuevo grupo lla*ado En%asado. 3ra guardar el grupo utili,e el enla,e .Gadir atri-uto y aGada do atri-uto de enva ado5 Cri tal y P)3. T133.3. .Gada ahora un nuevo produ,to en la ,ategorEa a,eite titulado Mceite de oli%a G.E. 2.+)l8 2ije un pre,io0 ponga el pe o a 1ig y no rellene el to,/ ini,ial. # e la egunda pe taGa para in,luir do i*gene 5 producto3aceite3pet.9p6 y producto3aceite3cristal.9p6. T133.#. .,,eda a la pe taGa :.Co*-ina,ione donde e indi,an la di2erente po i-ilidade para lo produ,to . +Eje e en la 2igura '7 donde u ando el -ot&n aGadir e ha aGadido la ,o*-ina,i&n )nva ado5 P)3 y rellenado lo dato apli,ando un 8*pa,to en el pre,io U 9e ,uento e i*pa,to en el pe o U 9e ,uento. Para e ta ,o*-ina,i&n *arque la i*agen ade,uada. T133.(. Cree otra ,o*-ina,i&n para enva ado de ,ri tal in i*pa,to en el pre,io ni en el pe o
2 3ipo de pla ti,o ,uya igla on de origen anglo aj&n re2erente a Polyethylene 3erephtalate.

--(

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

pero utilizando la i*agen ade,uada y ,on un to,/ di2erente al del enva ado P)3. T133.+. Para 2inalizar lo dato del produ,to en la pe taGa (. .djunto aGada el 2i,hero ce3

aceite.pd48 rellene el 2a-ri,ante y la ,ara,terE ti,a 5 Cri6en y Golu!en. T133.). Vi ite el el produ,to para ver ,o*o al e ,oger di2erente ,o*-ina,ione ,a*-ia la 2oto y el pre,io0 pero la ,ara,terE ti,a y lo 2i,hero adjunto on lo *i *o .

4.3. 0fertas y romociones


)l *odo tradi,ional u ado en tienda 2E i,a para de ta,ar ,ierto produ,to pueden er apli,ada i*ultnea*ente y e pueden de ,ri-ir ,o*o igue5 e tra lada al ,o*er,io

ele,tr&ni,o de *anera i*ilar. Pre ta$hop oporta ,uatro *odo de de ta,ar lo produ,to 0 toda ella

Produ,to de ta,ado5 ) la * agre iva *o trndo e ie*pre en la pgina de ini,io. Para de ta,ar produ,to e aGade a la ,ategorEa Inicio0 ya que en la edi,i&n de produ,to en Pre ta$hop e t per*itido ele,,ionar varia ,ategorEa para ,ualquier produ,to. Aapa de i*gene 5 Con i ten en una i*agen que ,ontiene vario produ,to o *ar,a . ) ta

i*gene intera,t1an ,on el puntero del rat&n en ,ierta zona apare,iendo el produ,to pro*oT ,ionado. F2erta5 .l poner el produ,to en o2erta apare,e un i,ono *ar,ado la o2erta. 9e ,uento 5 Con i ten en alterar el pre,io en 2un,i&n de la ,antidad de produ,to ,o*prado .

Mdulo ;d 3 "restaS.op

--)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

. ,ontinua,i&n anteriore*ente.

e pro-arn la

,uatro po i-ilidade

,on di2erente

produ,to

de lo

introdu,ido

T13#. ) ,oja do produ,to y aGdalo a la ,ategorEa 8ni,io0 de e ta 2or*a e tarn de ta,ado en la pgina de ini,io. Aantenga la ,ategorEa original del produ,to *ar,ada i*ultnea*ente. T13(. )dite uno de lo re-aja j ... T13(.1. $in ,errar la edi,i&n del produ,to0 a,,eda a la pe taGa de edi,i&n del produ,to '.Pre,io0 aquE puede e ta-le,er de ,uento e pe,iale . T13(.2. #tili,e el enla,e .Gadir un pre,io e pe,E2i,o y e ta-lez,a una redu,,i&n del pre,io a partir de ' unidade del 10c. T13+. .,,eda a Catlogo U Aapeo de i*agen y aGada un nuevo *apeo utilizando la i*agen !apa3 %inos.pn6 y a o,indolo a la ,ategorEa Vino T13+.1. 9e-e aGadir tre produ,to para *apear en la i*agen ,ada logotipo a un produ,to. vino 0 *arque la ,a illa Ao trar en la pgina produ,to el i,ono jen

#tili,e la i*gene y te4to preparado . T13+.2. Vuelva a editar el *apa de i*agen y ,on el rat&n *arque un re,uadro en alguno de lo logotipo 0 tra introdu,ir el re,uadro de-ajo de la i*agen puede -u ,ar un produ,to para a ignar a e a zona e ,ri-iendo alguna letra del no*-re del produ,to. T13+.3. Repita el pro,e o en ,ada uno de lo logotipo y tra guardar lo ,a*-io navegue a la e,,i&n vino para ver el ,o*porta*iento de la i*agen. 9e-e pa ar el rat&n por en,i*a de la rea que ele,,ion&.

2+ Ge,#i4! del /a7o ' e!vAo


)l pro,e o de ,o*pra en la vi ita a la tienda. 9e de el ,arrito de la ,o*pra o ,uenta de u uario e pro,ede a ini,iar el pro,e o de ,o*pra donde la tienda *ue tra di2erente 2or*ulario en una erie de pa o ,on e,utivo . )n ,ada uno de lo pa o e da op,i&n al ,liente de *odi2i,ar ,ierto dato y e pide ,on2ir*a,i&n de otro . 3ra la ,o*pra por parte del ,liente el pro,e o ,ontin1a por parte del vendedor0 el ,ual0 realizar otra erie de pa o en la tienda ele,tr&ni,a0 y el ,liente ir re,i-iendo noti2i,a,ione o-re el e tado de u pedido. tienda ele,tr&ni,a igue un patr&n ,o*1n utilizando ,o*o -a e el ele,,ionado durante la lla*ado ,arrito de la ,o*pra0 que no e * que una li ta de lo produ,to

)l pro,e o de ,o*pra e *ue tra de 2or*a e que*ti,a en la 2igura :00 en la pri*era 2a e interviene el ,liente0 donde puede to*ar de,i ione en 2un,i&n de la ,on2igura,i&n e ta-le,ida por el ad*ini trador de la tienda. 3ra la ,o*pra0 el vendedor de-e pro,e ar el pedido y para ello0 Pre ta$hop ge tiona lo pedido *ar,ndolo ,on un e tado. Cualquier ,a*-io de e tado produ,ido en un pedido e ,o*uni,ado al ,liente0 y a E el ,liente puede ha,er egui*iento de u pedido de de u ,uenta.

--*

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

CB8)=3)

Blenado Blenadode de la la,e ,e ta ta

9ire,,i&n 9ire,,i&nde de entrega entrega

)le,,i&n )le,,i&nde de 3ran 3ran porte porte

+or*a +or*a de depago pago

Co Co te te del del pedido pedidoy y ,on2ir*a,i&n ,on2ir*a,i&n

V)=9)9FR

)ntregado )ntregado

)nviado )nviado

Can,elado Can,elado Ree*-ol Ree*-ol ado ado $in $in to,/ to,/

Prepara,i&n Prepara,i&n )n )n,ur ,ur o o

) ) pera pera de depago pago por por tran tran 2eren,ia 2eren,ia

de pago y lo tran porti ta . Para realizar prue-a y pago a elegir por el ,liente.

)rror )rrorde depago pago

i6ura (2. Modelo de co!pra de "restas.op.

)n Pre ta$hop el pri*er pa o para poner operativo el pro,e o de ,o*pra online e ,on2igurar la 2or*a e ,on2igurar la tienda ,on alguno *odo de envEo

Re pe,to al tran porti ta e ,onte*pla el ,l,ulo del ,o te en 2un,i&n del pe o y la zona de envEo0 por ello en lo produ,to e in,luEan dato de pe o. )l *odo de 2un,iona*iento ,on i te en ,rear 2ranja de pe o y zona a ignando el ,o te a ,ada 2ranja y Pre ta$hop har el ,l,ulo de ,o te de envEo para el tran porti ta en 2un,i&n de lo dato di poni-le . T13). Blene la ,e ta ,on alguno produ,to y en el ,arrito de la ,o*pra u e el -ot&n Con2ir*ar. T13).1. Regi tre un nuevo u uario y iga el pro,e o de ,o*pra. ) i*portante que ,o*prue-e el ,orreo ele,tr&ni,o del nuevo ,liente para ,o*pro-ar i u tienda e t 2un,ionando ,orre,ta*ente. =o podr 2inalizar al no e4i tir tran porte para ninguna zona0 no e ta-le,ido lo *odo de pago. T13).2. .,,eda a la pe taGa de ad*ini tra,i&n A&dulo y de pliegue la e,,i&n Pago. 8n tale lo iguiente 5 ,rans4erencia bancaria y "a6o contra ree!bolso. T13).3. 9e-e ,on2igurar el *&dulo de ,rans4erencia bancaria u ando el enla,e Con2igurar e4i tente de-ajo del no*-re del *&dulo. T13).#. .,,eda a la pe taGa 3ran porte U 3ran porti ta . Bea detenida*ente la in tru,,ione indi,ada 0 e te pro,e o rellene lo dato e detalla a ,ontinua,i&n. .Gada por tanto un nuevo tran porti ta y )*pre a Bogo 3rn ito Mona 3a a $to,/ ini,ial +a,tura,i&n +uera de la ga*a... ARH transporte3!r5.9p6 :D hora )urope 1Dc 10 +un,i&n del pe o 9e ha-ilitar eg1n la ta-la 1D. olo e o ade* no e tn

T13).(. .,,eda al *en1 3ran porte U +ranja de pe o y e ta-lez,a para e te tran porti ta do 2ranja una de 0/g a 10/g y otra de 10/g a <0/g. T13).+. Vuelva a la pe taGa 3ran porte y en la parte in2erior de la pgina en,ontrar un re,uadro ,on el te4to 3a a . # ando el ,uadro de plega-le e ta-lez,a para el tran porti ta en la zona Europe

,abla -K. Datos de transportistas

Mdulo ;d 3 "restaS.op

--+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

una ta a de 12h y de 2<h para la 2ranja de pe o. T13).). 3er*ine el pro,e o de ,o*pra eligiendo el tran porti ta re,iQn ,reado. Bi te lo pedido del ,liente y o-tenga u 2a,tura en P9+. Bo ad*ini tradore de la tienda ge tionan lo pedido ,a*-indolo de e tado y *andando avi o a lo ,liente . Ba ge ti&n de pedido tiene *u,ha po i-ilidade y e *uy 2le4i-le en u ,on2igura,i&n0 in,lu o lo e tado *o trado en la 2igura :0 pueden er alterado 0 aGadiQndo e o quitndo e eg1n la ne,e idade de la tienda. Co*o eje*plo e realizar una ge ti&n - i,a del pedido a ,ontinua,i&n. T13-. .,,eda ,o*o ad*ini trador al *en1 Pedido anterior*ente. T13-.1. Ca*-ie de e tado el pedido a Prepara,i&n en ,ur o. T13-.2. Co*prue-e el ,orreo del ,liente para ver i ha re,i-ido noti2i,a,i&n del ,a*-io de e tado de u pedido. T13-.3. @enere lo do,u*ento P9+ para el pedido del ,liente pul ando lo i,ono en el li tado de pedido . T13-.#. .,,eda de nuevo al pedido del ,liente y pul e el i,ono de @oogle Aap Jal lado de la dire,,i&n de envEoK para lo,alizar la dire,,i&n de entrega del pedido. y de-er en,ontrar el pedido realizado

).1. Pasare#as de ago


#na pa arela de pago e un proveedor de un ervi,io en 8nternet en,argado de ge tionar la

tran a,,ione de pago entre un ,liente y vendedor. )n e te pro,e o intervienen el ,liente0 el vendedor y el proveedor del ervi,io. ) ta pa arela de pago on ,o*o lo ter*inale de punto de venta pero en la red. .,tual*ente toda la entidade 2inan,iera po een pa arela de pago para pro,e ar pago en la red0 pero lo * pionero y *a e4tendido en la red no ,orre ponden ,on la tradi,ionale entidade 2inan,iera . Ba que na,en en la red y para la red o2re,en un ervi,io 2,il de utilizar y *uy ,&*odo para el de arrollador0 el vendedor y el ,liente. #no de lo * ,ono,ido e PayPal el ,ual e propiedad de )-ay. ) te i te*a e t tan e4tendido que puede in,orporar e a ,ualquier tipo de ge tor de ,ontenido para ,o*er,io ele,tr&ni,o. Para realizar prue-a de pago0 PayPal o2re,e un entorno de de arrollo lla*ado "a1"al Sandbo@ O:2P donde e puede pro-ar el 2un,iona*iento de la pa arela de pago0 realizar tran a,,ione o2re,e PayPal para el pago en tienda ele,tr&ni,a ,on ,antidad de i te*a y ver lo re ultado 0 que evidente*ente0 ,on dinero virtual. )n el enla,e O:1P puede ,o*pro-ar la *ultitud de oportado . olu,ione

.nte la 2a,ilidade o2re,ida por PayPal para de arrolladore lo ,onvierten en el ,andidato ideal para u arlo en el ,ur o. ) i*portante ,ono,er ta*-iQn que la ,uenta PayPal tienen di2erente per2ile y para poder a,eptar pago de-e tener u ,uenta PayPal al *eno en el tipo "re!ier. ) ta *odalidad no

--K

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

tiene ,o te *en ual0 pero i ,o*i ione 3a*-iQn puede en,ontrar para *u,ha

o-re la ,o*pra0 ,on ulte la tari2a . entidade 2inan,iera un *&dulo para la pa arela de pago

pero0 e to *&dulo no e di tri-uyen gratuita*ente. T139. )ntre en la pgina de ad*ini tra,i&n de Pre ta$hop y en la pgina de *&dulo de pliegue la e,,i&n ,on lo *&dulo de pago. 8n tale lo *&dulo de pago PayPal y @oogle ,he,/out. T1#1. =avegue a la pgina o2i,ial de Pre ta$hop0 enla,e O'(P0 y en la zona de ,o*ple*ento J.ddFn K. )n el r-ol de ,ategorEa ele,,ione Pago y ,on el -u ,ador e ,ri-a el no*-re de alguno -an,o e paGole para ver el pre,io de la pa arela de pago. 3anto @oogle ,o*o PayPal o2re,en entorno de prue-a para realizar tran a,,ione ,on u re pe,tiva pa arela de pago. Co*o ade* e di tri-uyen in ,o te adi,ional e realizar la in tala,i&n y prue-a del entorno de PayPal0 para el ,a o de @oogle e pare,ido.

).2. Pay a# sandbox


PayPal and-o4 e una ,lona,i&n del entorno de pago PayPal ,on el que e pueden realizar

tran a,,ione y pro-ar toda la ,on2igura,ione de lo ,liente y vendedore ,on dinero no real. ) *uy 1til ya que 2a,ilita la to*a de de,i ione en la ,on2igura,i&n de la ,uenta del vendedor de la tienda y 2a,ilita la realiza,i&n de prue-a de *odo 2un,iona*iento para el vendedor. ) ta herra*ienta e puede u ar li-re*ente tra o-re regi trar e y tiene di poni-le gran ,antidad de de arrolladore de o2t;are la

do,u*enta,i&n tQ,ni,a

u 2un,iona*iento para 2a,ilitar a lo

integra,i&n en u apli,a,ione . $e realizar un eje*plo in entrar en otra en pro2undidad toda la po i-ilidade . T1#1. )l pri*er pa o e podr ,rear ,uenta tran a,,ione . T1#1.1. =avegue en el *en1 lateral al enla,e 3e t .,,ount y ,ree ,uenta de prue-a ,on el ,rear una ,uenta de de arrollador en el entorno $and-o4 de PayPal. per2ile y ,on dinero virtual para poder realizar op,ione o ,on2igura,ione e4i tente para e te *odo de

pago0 el o-jetivo e ,on eguir ponerlo operativo en la tienda del ,ur o0 en un ,a o real e de-e e tudiar

=avegue al enla,e http 566developer.paypal.,o*6 para regi trar un nuevo u uario0 ,on e te u uario PayPal ,on di2erente

enla,e Pre,on2igured. Pre te aten,i&n a ,o*o ,rear do ,uenta para que operen ,orre,ta*ente5 Ba pri*era ,uenta de-e er de vendedor J$ellerK0 e *uy i*portante e ta-le,er el paE 0 de lo ,ontrario0 Pre ta$hop no autorizar la ,o*pra. Ponga un ,rQdito ini,ial y no olvide apuntar la ,ontra eGa0 no podr o-tenerla de puQ . Ba egunda ,uenta er la del ,o*prador JLuyerK0 e ta-lez,a de nuevo el paE 0 el ,rQdito y la ,ontra eGa.

Mdulo ;d 3 "restaS.op

--L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.gregar .gregar u u uario uario

.,,eder .,,ederen enla la ,uenta ,uentavirtual virtual

i6ura (-. Sandbo@ de "a1"al.

T1#1.2. Blegado a e te punto0 e ,ontiene el li tado de ,uenta

i*portante que nun,a ,ierre la ventana del navegador que i la ,ierra0 dejar de 2un,ionar el and-o4. $e

de prue-a 0

re,o*ienda *antener en una pe taGa del navegador ie*pre a-ierto PayPal $and-o4. T1#1.3. Pro,eda a pro-ar la ,uenta del vendedor. $ele,,ione la ,uenta del vendedor en el li tado de ,uenta y pul e el -ot&n naranja )nter $and-o4 3e t $ite Jver 2igura :1K. .pare,er una ventana e*ergente para introdu,ir la ,ontra eGa del vendedor. T1#1.#. #na vez dentro de la ,uenta del vendedor ,o*prue-e el ,rQdito di poni-le. Repita el pro,e o ,on el ,o*prador. 3ra e te pro,e o ya e di pone de ,uenta virtuale para operar en *odo and-o40 in,lu o durante el pro,e o de ,rea,i&n de ,uenta tran a,,ione ,on e ta tarjeta e ha-ilitaron tarjeta de ,rQdito virtuale para realizar * prue-a ,on ha,ia la ,uenta PayPal del vendedor. . ,ontinua,i&n e pro,eder a

realizar la ,on2igura,i&n en Pre ta$hop. T1#2. Vuelva a Pre ta$hop0 y i no hizo anterior*ente0 a,tive el *&dulo de la e,,i&n Pago de

PayPal. $iga el enla,e de ,on2igura,i&n de e te *&dulo y ver que la ,on2igura,i&n de PayPal en Pre ta$hop tiene tre pe taGa 0 a,,eda a la egunda Con2igura,i&n y ver el 2or*ulario *o trado en la 2igura :2. T1#2.1. 9e-e a,tivar el Aodo de entorno Prue-a que ,orre ponde al and-o4. Rellene el ,orreo

-;2

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

ele,tr&ni,o del vendedor generado por PayPal. T1#2.2. Para o-tener lo dato .P8 oli,itado tiene que entrar en la ,uenta virtual del vendedor ,o*o e hizo en 31:1.'. T1#2.3. #na vez en u ,uenta de vendedor genere la 2ir*a .P80 puede ver el vEdeo enlazado de de Pre ta$hop o in tru,,ione del iguiente punto. T1#2.#. 9entro de la ,uenta Paypal del vendedor a,,eda a Per2il U .,,e o .P8 U Ver 2ir*a de .P8 o-tendr tre M"I y dato 5 0o!bre de usuario de M"I0 Contrasea de ir!a. 9e-e ,opiar e to tre dato en la ,on2igura,i&n de PayPal de Pre taT $hop J2igura :2K. T1#3. #na vez ,on2igurado el vendedor de la tienda puede realizar la ,o*pra ,on la ,uenta ,liente iguiendo el pro,e o de ,o*pra0 reali,e lo iguiente pa o 5
i6ura (;. Con4i6uracin del !dulo "a1"al.

eguir la

T1#3.1. Aantenga ini,iada la e i&n en el navegador u ,uenta de de arrollador and-o40 en una pe taGa del navegador o no 2un,ionar el pro,e o de ,o*pra. T1#3.2. )n otra pe taGa a,,eda a la tienda ,on la ,uenta de ,ualquier ,liente ya regi trado. =o tiene que ,oin,idir ,on el ,o*prador de PayPal. Reali,e una ,o*pra ele,,ionando y en el *Qtodo de pago u e PayPal. T1#3.3. $altar a una pgina de PayPal donde tiene que rellenar lo dato del ,o*prador0 en e te ,a o la ,uenta and-o4 del ,o*prador que ,re&0 u e el enla,e V3iene una ,uenta PayPalW. T1#3.#. +inali,e la ,o*pra y entre en la ,uenta and-o4 del vendedor para ,o*pro-ar i ha

re,i-ido el dinero0 ade* ver un -ot&n )*itir Ree*-ol o junto a la tran a,,i&n. T1#3.(. .,,eda ,o*o ad*ini trador a la tienda y en la pe taGa de pedido ver el nuevo pedido en e tado Pago a,epta*o . )ntre en el pedido y ver ta*-iQn un ,uadro lla*ado PayPal ,on un -ot&n para ha,er el reintegro. T1#3.+. Por 1lti*o en la pe taGa del and-o4 que *antuvo a-ierta u e la entrada del *en1

izquierdo 3e t *ail para ver lo ,orreo que ha-rEan re,i-ido el vendedor y el ,o*prador. $i a,,ede ,on el per2il del vendedor podr pro-ar otra PayPal0 e re,o*enda-le e4plorar toda la vendedor real en la tienda. op,ione de ,on2igura,i&n en el $and-o4 de e4i tente ante de u ar una ,uenta de

po i-ilidade

Mdulo ;d 3 "restaS.op

-;-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

5+ Co!(i7u&a"i4! de la /&e,e!#a"i4!
Ba pre enta,i&n de la tienda en Pre ta$hop di po i,i&n de la pgina y el a pe,to. Ba di po i,i&n de la pgina depende de la u-i,a,i&n e ta-le,ida para lo pri*er ,onta,to ,on Pre ta$hop puede pare,er que e ta *&dulo in talado . )n un por e a-orda de de do a pe,to 2unda*entale 5 la

u-i,a,ione

e t deter*inada

Pre ta$hop0 pero no e a E0 e ta u-i,a,ione e tn e ta-le,ida en una plantilla 2,il*ente *odi2iT ,a-le . )l a pe,to0 al igual que en otro CA$0 e e ta-le,e *ediante te*a ,on i tente en un paquete de 2i,hero ,on plantilla 0 i*gene y hoja de e tilo u-i,ada en una u-,arpeta de la in tala,i&n del CA$. .nte de ,o*enzar a tra-ajar o-re el a pe,to *ediante te*a e re,o*enda-le re,orrer la

,on2igura,i&n de lo *&dulo e4i tente para la pre enta,i&n de la tienda. T1##. .,,eda al *en1 de ad*ini tra,i&n A&dulo y de pliegue la e,,i&n .pli,a,ione +ront F22i,e. T1##.1. Con2igure el *&dulo )ditor de te4to pgina de ini,io ,on te4to e i*gene . T1##.2. 9e a,tive del Lloque ,ategorEa el *odo din*i,o. T1##.3. Prue-e la op,ione del Lloque CA$. T1##.#. .,tive y prue-e lo *&dulo +ront F22i,e que ,on idere de u interQ tra leer la de ,ripT ,i&n de ,ada uno de ello .

,.1. Insta#aci2n de nuevos temas


)n la pgina o2i,ial de Pre ta$hop e li tan *ultitud de te*a di poni-le para la tienda pero0 la

*ayorEa on de pago0 lo gratuito pueden er de ,argado previo regi tro en la pgina. $e in talar uno de ,argado previa*ente o i lo de ea regE tre e en la He- y de ,argue alguno a u gu to. T1#(. .,,eda al *en1 de ad*ini tra,i&n Pre2eren,ia U . pe,to y en la e,,i&n 3e*a iga el

enla,e que le indi,a que in tale el *&dulo 3e*a 8n talador. T1#(.1. 8n tale el *&dulo y u e el enla,e ,on2igurar del *&dulo re,iQn in talado. )n un 2or*ulario podr e ,oger un ar,hivo de u di ,o0 u e el ar,hivo prestas.op3c.rist!as3;2--./ip y u e el -ot&n $iguiente iguiendo todo lo pa o ha ta 2inalizar la i*porta,i&n. T1#(.2. Vuelva al *en1 Pre2eren,ia U . pe,to0 a,tive el nuevo te*a y vi ite u tienda.

,.2. Desarro##o de un tema


8ni,iar el de arrollo de un nuevo te*a para Pre ta$hop e e tru,turado0 pero tedio o al u ar ,antidad de ar,hivo tQ,ni,a Jre2eren,ia O'7PK en ,a tellano donde un pro,e o en,illo y *uy -ien

para 2un,ionar. )4i te una do,u*enta,i&n

e detalla e te pro,e o0 en e te *i *o do,u*ento

-;;

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

re,o*iendan realizar un pro,e o *

en,illo ,on i tente en ,opiar un te*a ya e4i tente ,a*-iando el

no*-re0 y realizar la *odi2i,a,ione oportuna en la nueva ,opia. Para ,rear un nuevo te*a por tanto ,opiare*o el te*a original y o-re Ql e realizarn *odi2i,a,ione 0 el o-jetivo e &lo *o trar ,o*o ,on eguir realizar la *odi2i,a,ione u ando C$$. )n e te *&dulo no e CA$ e repetir el pro,e o pro2undizando * en el realizar un te*a ,o*pleto0 en po teriore de arrollo de te*a . Para poder realizar ,orre,ta*ente el te*a e de-e tener la tienda ,on u2i,iente produ,to ,o*o para llenar lo ,uadro "roductos Destacados0 Lo !As Gendido8 etc. $e ha preparado una ,opia del pro2e or ,on alguno produ,to in,luido de 2or*a que olo hay que ,lonarla en un equipo lo,al. T1#+. $i no tiene al *eno : produ,to en u tienda y quiere pro-ar el pro,e o de ,lona,i&n de la tienda reali,e e te ejer,i,io. T1#+.1. Cree una nueva -a e de dato y u uario de de phpAy.d*in0 e i*porte el 2i,hero $IB ,on lo dato de la tienda prestas.op3pro4esor.sBl./ip. T1#+.2. Cree una nueva ,arpeta en la ,arpeta 555 de H.AP y de ,o*pri*a en ella lo 2i,hero de prestas.op3pro4esor./ip. T1#+.3. )ntre en la ,arpeta ,on2ig de e ta nueva in tala,i&n de Pre ta$hop y edite ,on =otePad? ? el 2i,hero settin6s.p.p. 9e-e e ta-le,er lo valore indi,ado en el ,&digo :0 al valor ,orre,to.
... define)QS0HS;7M8SQB Q^^^Q+O define)QS0HSM18=SQB Q^^^Q+O define)QS0HS"711 0SQB Q^^^Q+O ... define)QSS"1SH718SM=6SSQB Q^^^Q+O ... // ;om3re de la 3ase de datos // Msuario de la 3ase de datos // *ontrase]a del usuario de la 3ase de datos // *arpeta dentro de wwww donde esta "resta1hop

Cdi6o (2. Con4i6uracin base de "restaS.op.

T1#+.#. )ntre en la zona de ad*ini tra,i&n de la tienda ,lonada u ando lo dentro de-er aju tar la #RB de la tienda ,orre,ta*ente. Clonado el itio del pro2e or o partiendo del

dato

de a,,e o

in,luido en el 2i,hero C#R$FCA$.t4t e4i tente en la raEz de la ,lona,i&n de Pre ta$hop. #na vez

uyo podr ,o*pro-ar a ,ontinua,i&n lo

i*ple que e

pro,edi*iento de ,rea,i&n de un nuevo te*a en e te CA$. T1#). )ntre ,on el ad*ini trador de ar,hivo en una ,arpeta. T1#).1. Copie la ,arpeta pre ta hop y ,a*-ie el no*-re a la ,opia por eje*plo a ,ur o,* . T1#).2. )ntre ,on el navegador en la zona de ad*ini tra,i&n de la tienda y navegue al *en1 Pre2eren,ia U . pe,to. )n la e,,i&n 3e*a de e ta pgina apare,er el nuevo te*a re,iQn ,reado0 ele,,i&nelo y guarde lo ,a*-io . en la ,arpeta donde e tQ in talado Pre ta$hop y

a,,eda a la ,arpeta the*e . ) ta ,arpeta ,ontiene lo te*a di poni-le en e ta in tala,i&n ,ada uno

Mdulo ;d 3 "restaS.op

-;'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

#n te*a en Pre ta$hop e t 2or*ado por plantilla 0 i*gene 0 hoja de e tilo C$$0 et,. )n e te ,ur o intere an prin,ipal*ente la hoja de e tilo0 aunque para poder ,a*-iar la di po i,i&n de lo ele*ento de la pgina e de-en editar la plantilla . T1#-. )ntre en la ,arpeta , del nuevo te*a y ,on =otepad?? edite el 2i,hero 6lobal.css. .-ra

i*ultnea*ente la pgina prin,ipal de u tienda ,on el navegador y a,tive +ire-ug. T1#-.1. )n el 2i,hero 6lobal.css avan,e ,on el editor de te4to ha ta la 1lti*a lEnea y aGada un ,o*entario que o,upe toda la lEnea para *ar,ar a partir de donde realizar lo ,a*-io 0 puede er de la 2or*a5 /ZZZ 7 partir de aAu: comienLa el tema del curso *M1 ZZZZZZZZZZZZZZZZZZZZZZZ/ T1#-.2. Bo ,a*-io ,on i ten en aGadir regla C$$ in ,a*-iar nada en la lEnea anteriore a la *ar,a que a,a-a de poner. ) la 2or*a ha-itual de tra-ajar0 i ,o*ente un error &lo tiene que -orrar u lEnea y no re,ordar o -u ,ar la regla C$$ originale del te*a. T1#-.3. # ando +ire-ug vi uali,e en el navegador la ,aja ,orre pondiente a lo on lo ele,tore 5 ele,tore

[page0 [header0 [columns0 [leftScolumn0 [centerScolumn y [rightScolumn. ) to

que dividen la pgina en ,ontenedore para lo -loque de ,ontenido de Pre ta$hop. T1#-.#. .Gada el ,&digo :1 al 2inal de la hoja de e tilo y u tituya la interroga,ione por

valore ade,uado para *ini*izar lo hue,o entre la ,olu*na . 3ra-aje o-re e to

ele,tore

ha ta ,on eguir * e pa,io en la ,olu*na ,entral0 para ello au*ente el an,ho Jpropiedad 5idt.K.
#left5column , margin+ ;;p4 ;;p4 ;;p4 ;;p4-. #right5column , margin+ ;;p4 ;;p4 ;;p4 ;;p4-. #center5column , margin+ ;;p4 ;;p4 ;;p4 ;;p4-. width+ ;;p4. Cdi6o (-. Selectores de distribucin de las pA6inas en "restaS.op.

T1#-.(. 9e ,o*pri*a el 2i,hero te!a3prestas.op./ip y vi uali,e la i*gene 0 toda ella utilizada ,o*o 2ondo en di2erente itio . Copie e to ar,hivo

ern

en la ,arpeta i*g del te*a y

aGada e ta regla en la hoja de e tilo 5 di2.3locX h4 W 3acXground.image: url)Q../img/fondo.


ca3ecera.1.gifQ+OY.

T1#-.+. Re,argue la pgina prin,ipal de la tienda y o- erve la i*agen de 2ondo en la ,a-e,era de lo -loque . #na tQ,ni,a ha-itual en C$$ e repetir la i*agen de 2ondo inde2inida*ente0 e to e ,on igue aGadiendo el atri-uto 3acXground.repeat: repeatO a la regla anterior. T1#-.). Para ter*inar de de,orar e ta ,a-e,era e aGadir e2e,to de o*-ra C$$' al te4to de

e ta ,a-e,era y un -orde in2erior en rojo. # e el ,&digo :2 para ,on eguirlo.


di*.block h" , background-image+url)Q../img/fondo.ca3ecera.1.gifQ+background-repeat+ repeatcolor+ [DDDDDD/Z *olor del te4to en 3lanco Z/ te/t-shadow+ 0 1p4 1p4 rg3a)0B 0B 0B 0.F&+border-bottom+solid 3p4 [8-&00D/Z Horder inferior en rojo Z/ . Cdi6o (;. Solucin para el 4ondo las cabeceras de los bloBues.

-;(

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1#9. .hora de-e repetir el ejer,i,io anterior pero ,on la ,a-e,era de lo -loque de la ,olu*na ,entral0 ,uenta la iendo el o-jetivo ,on eguir el a pe,to de *o trado en la 2igura :'. Para ello tenga en iguiente ,on idera,ione 5

)l ele,tor a u ar e 5 [centerScolumn di2.3locX h4 Ba i*agen de 2ondo utilizada e central.pn6. )l ,olor de 2ondo u ado e _)+D:0:. Ba lEnea in2erior e ,on igue aGadiendo un -orde in2erior de 2p4 de ,olor _)+D:0:. T1(1. )l nuevo o-jetivo e *odi2i,ar 1ni,a*ente el -loque novedade ha ta ,on eguir el a pe,to *o trado en la 2igura ::. T1(1.1. Lu que ,on +ire-ug el ele,tor ,orre pondiente a e te 4ondo3cabecera3
i6ura ('. Estilo 4inal para las cabeceras de la colu!na central.

-loque0 ,o*prue-e que e [new.productsS3locXSright. T1(1.2. Cree una regla C$$ que ele,,ione la ,a-e,era C: de e te -loque5 [new.productsS3locXSright in2erior en e te ele,tor. T1(1.3. Lu que un ele,tor para que el te4to 0CGEDMDES ,a*-ien al ,olor -lan,o0 u e +ire-ug. 3a*-iQn de-er ,entrar el te4to ,on el 2ondo de i*agen. T1(1.#. )l ele,tor [new.productsS3locXSright ele,,iona toda la ,aja novedade . .Gada un -orde alrededor ,on la propiedad 3order:solid
1p4 [777777O y la o*-ra ,on la propiedad 3o4.shadow: 3p4 3p4 1p4 [888888O. i6ura ((. Estilo 4inal para el bloBue 0o%edades. h4. .Gada a e te

ele,tor la

i*agen de 2ondo 4ondo3cabecera3;.pn6. )li*ine ta*-iQn el -orde

T1(1.(. $&lo queda *over el -loque C: ,on el te4to =FV)9.9)$. Para *overlo li-re*ente e utilizar el po i,iona*iento C$$ pa ando a a- oluto en vez de relativo a la ,aja. )n el ,&digo :' e *ue tran la propiedade que de-e aGadir al ele,tor [new.productsS3locXSright h4. 9e-e utilizar alguno valore negativo en lo *rgene para ,on eguirlo.
position+ margin-left+ margin-top+ width+ a3solute;;p4;;p4;;p4Cdi6o ('. E9e!plo de posicin absoluta para una ca9a.

T1(1. Para 2inalizar de-e ,on eguir que lo -otone Madir al carrito tengan el a pe,to *o trado en la 2igura :<0 u e la i*agen de 2ondo boton3 carrito.pn6 y -u que ,on +ire-ug el ele,tor ade,uado para aGadir la regla en el 2i,hero C$$.
i6ura (). Mspecto de los botones.

Mdulo ;d 3 "restaS.op

-;)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

:+ Ad-i!i,#&a"i4! ava!3ada
)4plotar toda la ,apa,idad de Pre ta$hop requiere una dedi,a,i&n *uy uperior a la ,onte*plada en e te ,ur o. $&lo ele,tr&ni,o. )n e ta e,,i&n e tratan re u*ida*ente alguna ,ara,terE ti,a relevante pero no e ,u-re e han dado pin,elada a ,ara,terE ti,a ,o*une de todo lo CA$ de ,o*er,io

Pre ta$hop en

u totalidad0 para a*pliar lo

,ono,i*iento

e t di poni-le en la pgina o2i,ial un

*anual de u uario que detalla toda la op,ione di poni-le .

..1. (antemimiento de# cat&#ogo


Aantener una -uena ,alidad en el ,atlogo en un una tienda ele,tr&ni,a e 2unda*ental ya que un ,liente en la red e *u,ho * ,uidado o que en la tienda 2E i,a y ,on ulta toda la in2or*a,i&n di poni-le ante de realizar una ,o*pra online. ) ta tarea e 2unda*ental para el Q4ito de la tienda y o-re para evitar po i-le devolu,ione o re,la*a,ione . T1(2. .,,eda al *en1 de ad*ini tra,i&n Catlogo U Ra treo y ,o*prue-e lo produ,to y ,ategorEa e intente olu,ionarlo . )l ,ontrol del to,/ e otro de lo a pe,to relevante 0 lo *ovi*iento de to,/ quedan regi trado para poder er analizado . Cada *ovi*iento de to,/ tiene a o,iado un *otivo0 por eje*plo0 podrEa er un *ovi*iento entre di2erente tienda . T1(3. .,,eda Catlogo U Aovi*iento al*a,ene . T1(3.1. .u*ente o di *inuya el to,/ en alg1n produ,to indi,ando e te *otivo. T1(3.2. Co*prue-e la li ta de *ovi*iento de to,/ y ele,,ione e te produ,to de de la li ta. de to,/ y aGada do *otivo de *ovi*iento de to,/5 avi o o-re lo

In%entario al al/a y In%entario a la ba9a. Carn re2eren,ia a inventario he,ho ha-itual*ente en lo

..2. 'esti2n de usuarios< c#ientes y em #eados


Co*o en otro CA$0 e po i-le tener di2erente tipo de u uario en el i te*a. Ba naturaleza de un i te*a de ,o*er,io ele,tr&ni,o lleva i*plE,ito do per2ile de u uario 5 ,liente y vendedor. .de* de e to per2ile - i,o 0 de de el punto de vi ta del ad*ini trador e pueden ,rear u uario en,argado de ge tionar parte o la totalidad de la tienda. )l ad*ini trador ,rea e to per2ile a ignando per*i o o-re ,ada una de la parte de Pre ta$hop. Co*o eje*plo e ,reara un u uario ,on un per2il de reponedor de *er,an,Ea0 por tanto0 tendr a,,e o &lo al ,atlogo. T1(#. .,,eda al *en1 )*pleado U Per2ile y aGada un nuevo per2il lla*ado 7eponedor. T1(#.1. 9e de la pe taGa Per*i o edite lo per*i o del per2il 7eponedor a,tivando todo

per*i o para el ,atlogo0 on 10 2ila ,on todo a,tivo.

-;*

Mdulo ;d 3 "restaS.op

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1(#.2. 9e de la pe taGa )*pleado

aGada un nuevo e*pleado ,on el per2il de 7eponedor.

Cierre la e i&n de ad*ini trador y vuelva a entrar ,on el nuevo u uario. 3a*-iQn e ,onte*pla la ,rea,i&n de per2ile para lo ,liente 0 el pro,edi*iento utilizado e agrupar ,liente en grupo ,on ,ierta propiedade 0 iga el iguiente eje*plo. T1((. Cree un grupo de ,liente lla*ado "or Ma1or para apli,ar un de ,uento del 'c. )dite un

,liente de de el li tado de ,liente y aGdalo a e te grupo. Ftra op,i&n intere ante e pre*iar a lo -ueno ,liente ,on vale de de ,uento. T1(+. .,,eda al *en1 Pago U Vale de de ,uento y ,ree un nuevo vale de de ,uento del <c para la ,ategorEa de vino dirigido a un deter*inado ,liente. T1(+.1. .,,eda ,o*o el u uario y en el -loque Ai Cuenta ,o*prue-e en el enla,e Ai Vale apare,e el vale de de ,uento. T1(+.2. Reali,e una ,o*pra y u e el ,&digo del vale de de ,uento en el pri*er pa o del pro,e o de ,o*pra. i

..3. Puesta en ex #otaci2n


Ba tienda online e tn e4pue ta la 2: hora del dEa al vandali *o. ) ha-itual la e4plota,i&n de 2allo de eguridad en la tienda ,on iguiQndo e *odi2i,ar la tienda0 aunque el ro-o de ,reden,iale para la realiza,i&n de tran a,,ione e *uy in2re,uente0 e to ,a o e produ,en ha-itual*ente por error del ad*ini trador y no por 2allo en el CA$. Para evitar e ta itua,ione e re,o*ienda una *Eni*a ,on2igura,i&n de eguridad indi,ada parte del iguiente punto 5

equipo de de arrollo de Pre ta$hop que e re u*e en lo

Reno*-rar la ,arpeta ad!in ,on un no*-re de ,arpeta ,o*pli,ado0 ,on una *ez,la de ,i2ra y letra e una -uena olu,i&n. Proteger di,ha ,arpeta ,on un ar,hivo ..taccessD..tpass5d0 e te 2i,hero e .pa,he y 2uerza una ,ontra eGa para ,ualquier a,,e o a e a dire,,i&n. =o guarde u ,lave de a,,e o en u ordenador ni *u,ho *eno en la red0 olvEde e de la nu-e para guardar ,ontra eGa y u e un *Qtodo tradi,ional. )lija una ,ontra eGa ,o*pleja y *odi2Equela ,on 2re,uen,ia0 no reutili,e ,ontra eGa 0 i le ro-an una no e vern ,o*pro*etido el re to de ervi,io . $upri*a i te*ti,a*ente la ,arpeta in tall tra la in tala,i&n o a,tualiza,i&n de Pre ta$hop. $upri*a i te*ti,a*ente lo ar,hivo in1tile tra la in tala,i&n o a,tualiza,i&n de Pre ta$hop5 read!eI4r.t@t0 read!eIen.t@t0 read!eIes.t@t0 C:M0GELCG0 ,arpeta docs0 et,. ProhE-a el a,,e o a u ar,hivo de te*a J te!platesK puede u ar otro ar,hivo ..taccess y del ervidor He-

,on2igurado ade,uada*ente.

Mdulo ;d 3 "restaS.op

-;+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

..4. 0tras caracter-sticas


9e la *ultitud de ,ara,terE ti,a no e tudiada e pueden de ta,ar la e tadE ti,a 0 la devolu,ione

JRA.K0 *&dulo de ,o*paGEa de tran porte pre,on2igurado 0 e tadE ti,a He- ,on @ooggle .nalyti, y po i-ilidad de i*porta,ione *a iva de de 2i,hero ,o*pati-le ,on hoja de ,l,ulo . 9e plegando lo *&dulo de la e,,i&n de e tadE ti,a apare,en *ultitud de *&dulo in tala-le ,on lo que o-tener e tadE ti,a de gran utilidad una vez operativa la tienda. #na vez a,tivado la pe taGa de ad*ini tra,i&n titulada e tadE ti,a . )n la zona de ,ontrol de pedido e puede a,tivar la 2un,ionalidad para devolu,i&n de *er,an,Ea JRA.K e ,on ultan en

y vale de devolu,i&n0 ina,tiva ini,ial*ente. +inal*ente en la pe taGa de herra*ienta de la zona de ad*ini tra,i&n e pueden ver eje*plo de

i*porta,i&n de dato y ha,er ,opia de eguridad de la tienda.

-;K

Mdulo ;d 3 "restaS.op

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 2e % Wo&d<&e,,
-lo.s

1+ Re,u-e!
9ura,i&n e ti*ada5 ' hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero ;ordpre "'.'.2"e N)$.zip .zip Hordpre 3e%cri/cin in tala-le en e paGol

re,ur o ";ordpre

8*gene y te4to utilizado en el -log de eje*plo

zee tyle.1.0.2.zip0 ;p tart.1.0.<.zip 3e*a para Hordpre


,abla -L. ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O:'P He- o2i,ial de Hordpre en ) paGol0 <http566e .;ordpre .org6!. .org6e 5AainNPage!. O::P 9o,u*enta,i&n o2i,ial de Hordpre 0 <http566,ode4.;ordpre

O:<P ) pe,i2i,a,i&n o2i,ial de Ping-a,/0 <http566;;;.hi4ie.,h6 pe, 6ping-a,/6ping-a,/!.

.+ I!#&odu""i4!
Hordpre e el ge tor de ,ontenido por e4,elen,ia para la realiza,i&n de -log en 8nternet. )n el enla,e O:'P e e u-i,a la He- o2i,ial en e paGol y ,uenta ,on *ultitud de do,u*enta,i&n di poni-le en diver o idio*a en O::P. Aultitud de de2ini,ione apari,i&n de lo pri*ero de o-re lo que e un -log apare,en por 8nternet0 toda ,onvergen en una

,ara,terE ti,a ,o*1n5 e un itio He- donde lo ,ontenido e tn ordenado ,ronol&gi,a*ente. 3ra la itio He- ,on e ta ,ara,terE ti,a0 lleg& una rpida e4pan i&n de lo -log en
Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

8nternet. Ba apari,i&n de *ultitud de ello ,ruzada entre lo di2erente autore auto*atizar la ge ti&n de e ta la inter,one4i&n de -log re2eren,ia

,onllev& a la e4i ten,ia de gran ,antidad de re2eren,ia -log . Por ello0 e ha avanzado en *e,ani *o er nor*alizada para ,ruzada y han llegado a ,on tQr*ino

de lo

tra,/-a,/ y pin-a,/ ,uya e pe,i2i,a,i&n puede ,on ultar e en O:<P. Co*o tQr*ino ligado la he,ho de e a,uGa el tQr*ino -logo 2era0 ha,iendo re2eren,ia al ,onjunto de todo lo -log e4i tente en la red y u interrela,ione . Re pe,to a Hordpre CA$ ,o*pleto pero na,i& en el aGo 200'0 e un ge tor de -log ,on *u,ho re,orrido y ,on a*plia e tratar a-ar,ar el nivel de pre enta,i&n de ,ontenido y un nivel - i,o de

po i-ilidade de ,on2igura,i&n. ) i*po i-le en pro2undidad ,u-rir en e te ,ur o en pro2undidad e te ad*ini tra,i&n del -log.

1+ I!,#ala"i4! ' "o!(i7u&a"i4! *0,i"a


Hordpre e un CA$ para -log *uy 2le4i-le0 ad*ite *ultitud de ,on2igura,ione tanto a nivel de pre enta,i&n de ,ontenido ,o*o a nivel de ge ti&n del 2un,iona*iento del itio He-. $e realizar una ,on2igura,i&n - i,a para el u o de e te CA$ en el ,ur o. T1(). Cree una ,arpeta nueva en el dire,torio 555 de H.AP lla*ada 5ordpress y de ,o*pri*a en ella lo ar,hivo del 2i,hero 5ordpress3'.'.;3esIES./ip. T1().1. =avegue a u ervidor He- lo,al en http566lo,alho t6;ordpre poder ,ontinuar. T1().2. #tilizando el pro,edi*iento ha-itual ,on phpAy.d*in ,ree una nueva -a e de dato ,on un u uario a o,iado que tenga todo a o,iado a la -a e de dato 5ordpress. T1().3. $iga todo po terior*ente. 3ra la in tala,i&n de Hordpre e de-e e ,oger el tipo de -log de eado ,on2igurando la op,ione lo pa o de in tala,i&n y no olvide u u uario y ,ontra eGa para u arlo lo per*i o . $e re,o*ienda ,rear el u uario 5ordpress . .van,e en la in tala,i&n

ha ta que en el egundo pa o donde e le oli,ita una -a e de dato Ay$IB y un u uario para

2unda*entale del -log ,o*o on la polEti,a para lo ,o*entario y u uario . Bo u uario del -log e e tudiarn en la e,,i&n D.' al requerir ,on2igura,i&n adi,ional. Re pe,to a lo ,o*entario 0 eg1n el tipo de -log de eado e de-e aju tar la polEti,a de ,o*entario de eada de de lo do e4tre*o 5 per*itir todo lo ,o*entario o no per*itir ,o*entario al er un -log *uy per onal. T1(-. =avegue a la pgina prin,ipal de u -log y utili,e el enla,e .,,eder. #na vez en el e ,ritorio de ad*ini tra,i&n ver que e divide en tre e,,ione 0 y en la parte izquierda de la pgina en,ontrar todo lo *en1 de ad*ini tra,i&n que utilizare*o para realizar toda la tarea . T1(-.1. # ando el *en1 lateral izquierdo a,,eda al *en1 .ju te U @enerale y rellene lo

-'2

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,a*po tEtulo ,on Decoracin 1 pintura0 de ,rip,i&n ,on Ideario de decoracin de tu .o6ar. T1(-.2. .,,eda al *en1 .ju te ,o*entario. T1(-.3. )n e ta *i *a pgina de ,on2igura,i&n elija un avatar a u gu to. T1(-.#. .,,eda a .ju te U Aulti*edia *ire la op,ione para di*en ione de i*gene y U Co*entario 0 optare*o por per*itir lo ,o*entario pero

teniendo la op,i&n de revi arlo previa*ente. Aarque la ,a illa #n ad*ini trador de-e apro-ar el

vEdeo 0 no e ne,e ario que aju te nada en e ta e,,i&n. T1(-.(. .,,eda al *en1 # uario U 3u per2il y rellene lo dato que ,rea oportuno de u per2il. T1(9. $e realizar ta*-iQn una ,on2igura,i&n - i,a de la aparien,ia0 po terior*ente0 en la e,i&n >0 e e tudiar en pro2undidad ,o*o per onalizar la aparien,ia del -log. T1(9.1. .,,eda al *en1 .parien,ia U Ca-e,era y u-a la i*gene cene4a3-.9p6 y cene4a3;.9p6. $ele,,ione la ,a illa .leatoria para que aparez,an la i*gene al azar. T1(9.2. .,,eda al *en1 .parien,ia U Fp,ione del te*a y podr ele,,ionar la di po i,i&n de la pgina0 prue-e e ta-le,er el ,ontenido a la dere,ha. T1(9.3. .,,eda al re to de op,ione del *en1 .parien,ia y prue-e ,a*-iar el ,olor de 2ondo. =o e re,o*ienda ,a*-iar el te*a0 po terior*ente e e tudiar en *ayor pro2undidad el re to de op,ione rela,ionada ,on la aparien,ia.

2+ <u*li"a"i4! de "o!#e!ido,
Hordpre epara lo ,ontenido del -log en do tipo ,on ,ara,terE ti,a di2erente 5 entrada del on la iguiente 5 -log y pgina de ,ontenido. Re u*ida*ente la di2eren,ia

)ntrada del -log5 $on ordenada ,ronol&gi,a*ente y e le a ignan ,ategorEa Jtag K. .pare,en en todo lo li tado di poni-le en el -log. Pgina 5 ) ,ontenido e tti,o y u ,o*etido e Ba pgina e tn rela,ionada er enlazado de de alg1n lugar del -log.

,on ,ontenido di pue to a lo largo del -log ,o*o e 5 in2or*a,i&n de

,onta,to0 Endi,e adi,ionale

o-re el -log he,ho *anual*ente0 et,. Ba e,,i&n >.1 e dedi,a al e tudio

de la po i-ilidade o2re,ida por e te tipo de ,ontenido. .nte de ,rear ,ontenido e de-e er ,on ,iente del volu*en de in2or*a,i&n e4i tente en 8nternet0 por ello la ,la i2i,a,i&n de la in2or*a,i&n de la pgina He- e ,ru,ial. Bo -u ,adore de 8nternet on el punto de entrada de la *ayorEa de lo -u ,adore a,,e o a la Hey la in2or*a,i&n re,opilada por e to e -a a0 ,ada vez * 0 en la in2or*a,i&n o-tenida *ediante *etadato '. ) to *etadato

,on i ten en in2or*a,i&n adi,ional propor,ionada para ,ada pgina He- y ,on eguir una *ejor ,la i2i,a,i&n de la in2or*a,i&n ,ontenida en 8nternet.

'

Bo *etadato

on o-jeto de e tudio en lo ,apEtulo po teriore dedi,ado a lo ge tore de ,ontenido para Portale He-

Mdulo ;e 3 Word"ress

-'-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Ba ,la i2i,a,i&n de la in2or*a,i&n en 8nternet e o-jeto de e tudio0 inve tiga,i&n y de arrollo de de lo orEgene de la He-0 de he,ho C3AB 2ue ,reado ,on e te prop& ito ,o*partir in2or*a,i&n ,ientE2i,a entre univer idade . .Go atr no e4i tEa un *odelo ,laro para la ,la i2i,a,i&n y pro,e a*iento de la in2or*a,i&n de la He- urgiendo a,tual*ente la ;e- e*nti,a. #n tQr*ino *uy u ado e la ta4ono*Ea0 el ,ual0 ha ido i*portado de de la -iologEa y e u a en in2or*ti,a ,o*o *Qtodo de ,la i2i,a,i&n de la in2or*a,i&n *ediante etiqueta . Para ,o*prende la i*portan,ia de la ta4ono*Ea i*agine*o una entrada en un -log en 8nternet o-re el te*a *er,urio0 un -u ,ador no tiene ,apa,idad de ,o*pren i&n del te4to e ,rito0 por ello no di tingue i el te4to trata o-re un *etal0 un planeta o un dio ro*ano. Pro-a-le*ente in la ayuda de *etadato e ta entrada apena aparez,a en la entrada del -u ,ador al no e tar -ien ,la i2i,ada. Hordpre oporta una ,la i2i,a,i&n - i,a de la entrada del -log *ediante ,ategorEa y etiqueta 5 un ,onjunto de pala-ra una eparada por ,o*a y e utilizado para -u ,ar entrada rela,ionada ,on la

)tiqueta 5 )

rela,ionada . Cada etiqueta e entrada 2or*an la ta4ono*Ea.

ola pala-ra y el ,onjunto de etiqueta

CategorEa 5 Con i te en una ,la i2i,a,i&n jerrqui,a de la in2or*a,i&n y de ,ar,ter * general de la entrada del -log. Cada ,ategorEa o u-,ategorEa puede ,ontener varia pala-ra aunque e re,o*ienda u ar do vi itante de la He-. Ba ,la i2i,a,i&n jerrqui,a en ,ategorEa ,la i2i,a,i&n jerrqui,a de ,arpeta de lo varia ,ategorEa . Ba ,la i2i,a,i&n de la entrada e uno de lo a pe,to * relevante e i*portante de un -log0 e de-e pre tar e pe,ial aten,i&n en la ,la i2i,a,i&n0 ya que0 la navega,i&n e inde4a,i&n de ,ontenido 8nternet e -a a 2unda*ental*ente en la ,la i2i,a,i&n que en e reali,e en ,ada entrada del -log. Ba o2re,ida por Hordpre i te*a
:

pala-ra . $e utilizan para ha,er *

a,,e i-le la in2or*a,i&n para lo

di2iere en parte de la tradi,ional en un i te*a de ar,hivo

in2or*ti,o . Aientra

in2or*ti,o un ar,hivo olo puede e tar en una ,arpeta 0 una entrada de -log puede e tar a o,iada a

,ara,terE ti,a * relevante que e de-en ,uidar en la entrada del -log para ,on eguir *ejor orden0 a,,e i-ilidad y vi i-ilidad de lo ,ontenido de un -log e pueden re u*ir ,o*o igue5 Frdenar -ien lo ,ontenido u ando ,ategorEa 0 e i*portante llegar a ,o*prender la di2eren,ia entre ,ategorEa y etiqueta Jla ,ategorEa uele er * genQri,aK. )tiquetar ,orre,ta*ente ,ada entrada del -log y e ,oger un ,onjunto de etiqueta ade,uado para u u o en el -log. =o a-u ar del n1*ero etiqueta en ,ada entrada y ,on iderar una regla genQri,a o-re la

ordena,i&n5 el e4,e o de orden e de orden. .tender lo ,o*entario pendiente de *odera,i&n y evitar re,hazarlo aunque no ean de

nue tro agrado.


: =o e e tri,ta*ente ,ierto0 lo i te*a de 2i,hero a,tuale per*iten enlazar un ar,hivo a vario dire,torio 0 pero de de el punto de vi ta de u uario e ta 2un,ionalidad ha-itual*ente no e utilizada por de ,ono,i*iento.

-';

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

3ra pre entar el *odelo de ,la i2i,a,i&n de entrada de -log a ,ontinua,i&n e trata el pro,edi*iento de ,rea,i&n de entrada en Hordpre . )n e te entido0 ,uando e ,rean la entrada e4i te la po i-ilidad de guardarla ,o*o -orrador y ter*inarla po terior*ente. #na vez ter*inada la entrada0 la pu-li,a,i&n puede er in*ediata o e puede progra*ar para una 2e,ha y hora deter*inada. 9urante la edi,i&n de una entrada e4i ten varia po i-ilidade para la pre enta,i&n0 lla*ado de las entradas. .unque e tn di poni-le en la 1lti*a ver ione de Hordpre depende del de arrollador del te*a en u o0 y a,tual*ente0 la *ayorEa de lo te*a ,onte*plan. )l o-jetivo de e ta ,ara,terE ti,a e a pe,to no e t de2inido en Hordpre di2erente para ,ada tipo de entrada. $e realizar un -log de eje*plo que tratar o-re de,ora,i&n para pra,ti,ar ,on todo lo ,on,epto de ,rito . T1+1. 9e ,o*pri*a en pri*er lugar el ar,hivo recursos35ordpress./ip en alguna ,arpeta para utilizarlo a lo largo de e te *&dulo. T1+1.1. .,,eda de de el *en1 de ad*ini tra,i&n del -log a )ntrada U .Gadir nueva entrada. T1+1.2. 3itule u entrada ,o*o "intar con broc.a y aGada la entrada a una nueva ,ategorEa 0 e *o trar la entrada or!atos

la i*ple*enta,i&n e4i tente no la

,on di2erente a pe,to0 pero el

el ,reador de un te*a el en,argado de ,rear una vi ta

lla*ada "intura. #tili,e el te4to preparado en el 2i,hero te@tos35ordpress.t@t ,orre pondiente a

.Gadir .Gadiro-jeto o-jeto

Fp,ione Fp,ione de depantalla pantalla

.gregar .gregarCategorEa CategorEa

i6ura (*. Editor de entradas en Wordpress.

Mdulo ;e 3 Word"ress

-''

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

e ta entrada y ,opie el te4to. T1+1.3. # e el -ot&n aGadir o-jeto Jver 2igura :>K para in ertar una i*agen de de u ordenador0 puede utilizar la i*agen bote.pn6. .linee la i*agen a la dere,ha o izquierda eg1n de ee. T1+1.#. #tili,e el ,uadro CategorEa para e ta entrada. T1+1.(. )n el ,uadro de )tiqueta aGada para e ta entrada la etiqueta broc.a. T1+1.+. Pu-lique la entrada0 vi ite u -log y aGada alguno ,o*entario a u entrada. T1+1. Creare*o una ,la i2i,a,i&n jerrqui,a u ando ,ategorEa para intentar ,la i2i,ar la entrada del -log ,reada po terior*ente. .,,eda de de el *en1 de ad*ini tra,i&n del -log a )ntrada U CategorEa y ,ree una jerarquEa ,o*o la *o trada en la 2igura :(. T1+2. Cree una egunda entrada titulada "intar con aerosol y utili,e el te4to preparado en te@tos3 5ordpress.t@t. )tiquete e ta entrada ,on la pala-ra ecol6ico y aGdala a la ,ategorEa pintura. T1+2.1. )n la parte uperior de pliegue un ,uadro lla*ado Fp,ione de pantalla Jver 2igura :>K0 a,tive al *eno la op,ione Co*entario 0 .utor y Revi ione . T1+2.2. Co*prue-e en la parte in2erior de a,tive lo op,ione . T1+2.3. Cree una ter,era entrada titulada Clasi4icacin de !aderas utilizando el te4to preparado en en te@tos35ordpress.t@t. #tilizando el ,uadro Pu-li,ar edite la vi i-ilidad0 proteja por ,ontra eGa la entrada y progra*e la pu-li,a,i&n para dentro de < *inuto . T1+2.#. Vi ite la pgina prin,ipal del -log para ver ,o*o e *ue tra la entrada protegida. ,o*entario i han apare,ido nuevo ,uadro ,on op,ione y para aGadir una ,ategorEa lla*ada "intura y ele,,i&nela

para e ta entrada. Vi uali,e la entrada en el -log ,on la

nueva

).1. "ontenido mu#timedia


Ftro ,o*ponente de Hordpre e la li-rerEa *ulti*edia ,reada para 2a,ilitar la ,la i2i,a,i&n de lo

ar,hivo que e de een aGadir en el -log. $u 2un,ionalidad e -a tante - i,a y 2,il de entender. T1+3. .,,eda al *en1 de ad*ini tra,i&n Aulti*edia y utili,e el enla,e aGadir nuevo. 9e de una ventana del ad*ini trador de ar,hivo navegador .rra tra lo ,arpeta i!a6enes 5ordpress./ip. T1+3.1. .,,eda al *en1 de ad*ini tra,i&n Aulti*edia U Bi-rerEa Aulti*edia y *ire en el li tado la ,olu*na .djunto a para lo,alizar lo ar,hivo o i*gene no utilizada en ninguna entrada del -log. T1+3.2. .Gada lo ar,hivo P9+ in,luido en la ,arpeta pd4. ) ta-lez,a ar,hivo aquE. .rra tre toda anterior*ente la i*gene de de de Hindo; arra tre todo lo 2i,hero P9+ y P=@ al ,uadro *o trado en el de la de ,o*pri*ida rescursos3
8nteriori 8nteriori *o *o Cl Cl i,o i,o Aini*ali Aini*ali ta ta R1 R1 ti,o ti,o Pintura Pintura Pintar Pintar interiore interiore Pintar Pintar *adera *adera Pintar Pintar *etale *etale i6ura (+. Cate6or?as

-'(

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,orre,ta*ente el tEtulo leyenda y de ,rip,i&n. T1+3.3. Cree una nueva entrada donde enla,e e to do 2i,hero P9+0 utili,e el enla,e .Gadir o-jeto de la 2igura :> para poder ele,,ionar el ar,hivo de de la li-rerEa *ulti*edia. ) ta nueva entrada e tar en una nueva ,ategorEa lla*ada Decoracin 0a%idea0 ,o*o etiqueta e ta-lez,a na%idad y pd4 eparada por ,o*a.

5+ Di,/o,i"i4! del *lo7 ' a,/e"#o


Ba 2le4i-ilidad de Hordpre ,ontenido ha,e po i-le la ,on tru,,i&n de un ea un -log0 ie*pre y ,uando itio He- ,on e te ge tor de e ,on2igure ,orre,ta*ente. Ba que no ne,e aria*ente

ge ti&n de la pre enta,i&n en Hordpre

e t ,entralizada en el ,e!a que on ,o*ponente in tala-le 0 para u u o en el -log.

e4i tiendo *ultitud de te*a di poni-le en la ,o*unidad Hordpre

.l igual que el re to de ge tore la pgina ;e- generada e t divida en divida en di2erente regione donde e u-i,an lo ,ontenido . .lguna de e ta regione on ,on2igura-le de de el inter 2az de ad*ini tra,i&n y otra &lo on ,on2igura-le alterando te*a. pre enta una pe,uliaridad en u arquite,tura ,on i tente en una *ez,la de en,argado de per onalizar el a pe,to pueden progra*ar parte de

)n e te entido0 Hordpre eparada 0 y lo

lo ,o*ponente en,argado del ,ontrolar el a pe,to y el ,ontenido. ) de,ir0 la ,apa no e tn -ien de arrolladore 2un,ionalidad en,argada de *o trar el ,ontenido. $eg1n el punto de vi ta de la *ayorEa de de arrolladore puede er un a pe,to negativo0 ya que la *etodologEa de progra*a,i&n o ,ualquier de arrollador e4peri*entado ver e to ,o*o un error en el di eGo del CA$0 donde no e ha eparado ,lara*ente la ,apa de ,ontenido y pre enta,i&n. Por e ta pe,uliaridad e re,o*ienda no ,a*-iar el te*a de Hordpre ha ta que no e indique en e te

*anual0 de lo ,ontrario la 2un,ionalidad e4pli,ada a ,ontinua,i&n puede di2erir o in,lu o no e4i tir.

,.1. P&gina rinci a# y &ginas est&ticas


$i e tra-aja ,on el te*a original de Hordpre 1lti*a e4i ten do po i-ilidade de pre enta,i&n de la on u o-jetivo . ,ontenido

pgina prin,ipal del -log5 *o trar la

entrada

del -log o *o trar una pgina e tti,a. Ba

pgina e tti,a 2ueron introdu,ida anterior*ente y ahora e *o trar ,uale 3ra-ajando ,on pgina e tti,a

e ,on igue *antener perpetua*ente en el -log lo

,on iderado * relevante 0 independiente*ente de la 2e,ha de pu-li,a,i&n. =o e re,o*ienda realizar un -log &lo ,on pgina e tti,a 0 i a E 2ue e pro-a-le*ente Hordpre para el itio He- que e tQ ,on truyendo. =o o- tante0 e de-en ,on iderar alguno in,onveniente de la pgina e tti,a 0 ya que0 al no er no e el ge tor * ade,uado

,on iderada entrada de -log pierden una erie de propiedade ,o*o on5 =o e *ue tran en lo li tado ,ronol&gi,o de entrada del -log.

Mdulo ;e 3 Word"ress

-')

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

=o utilizan ,ategorEa ni etiqueta 0 por ello0 no e pueden ,la i2i,ar. =o apare,en en la -1 queda . )n ,a*-io0 E e pueden organizar de *anera jerrqui,a iendo *uy 1tile para *anuale en lEnea0

,ur o 0 pgina per onale 0 pgina de pre enta,i&n del -log0 et,. ) ,rearn alguna pgina . T1+#. .,,eda al *en1 de ad*ini tra,i&n Pgina

*uy re,o*enda-le en ,ualquier

-log aGadir alguna pgina e tti,a ,on in2or*a,i&n adi,ional o-re el propio -log. $eguida*ente e

y ,ree una nueva pgina titulada WBuien so1X. "A6ina de

.Gada el te4to ,opindolo de de el 2i,hero te@tos35ordpress.t@t ,uyo titulo e presentacin personal. @uarde la pgina y ,o*prue-e en el -log donde apare,e.

T1+#.1. )dite la pgina de nuevo y de pliegue la Fp,ione de pantalla Jver 2igura :>K0 a,tive la ,a illa Co*entario y ,on2ig1relo ,orre,ta*ente para evitar lo ,o*entario en e ta pgina. T1+#.2. )dite de nuevo la pgina y utili,e el ,uadro de la parte dere,ha lla*ado .tri-uto de pgina para ele,,ionar di2erente op,ione en el ,uadro de plega-le Plantilla. 3ra ver el e2e,to de a*-a o-re la pre enta,i&n de-erEa e ,oger la plantilla Sidebar0 la otra plantilla *ue tra la pgina y la entrada del -log. T1+(. $e ,rearn do pgina para pre entar la organiza,i&n jerrqui,a in,luida en Hordpre otra pgina titulada Mcti%idades pro4esionales y otra M4iciones. .*-a .tri-uto de Pgina ,o*o *en1 $uperior la entrada WBuien so1X. T1+(.1. Vi ite u -log y ,o*prue-e i e de pliega WBuien so1X ,o*o i 2uera un *en1. T1+(.2. 9e de el *en1 de ad*ini tra,i&n Pgina li te toda la pgina y prue-e de de e e . Cree

de-en tener en el ,uadro

li tado la edi,i&n rpida de la entrada ,reada anterior*ente. 9e-e e ta-le,er el ,a*po orden de la entrada de 2or*a que la a2i,ione aparez,an en pri*er lugar ,uando e de pliegue el *en1 en el -log. +inal*ente e ,a*-iar la di po i,i&n del -log para *o trar ,o*o pgina ini,ial del -log una pgina de pre enta,i&n ,on iguiendo ,rear un itio Hein entrada de -log o un itio He- ,on la pgina de pre enta,i&n per onalizada y la entrada del -log eparada . T1++. .,,eda al *en1 .ju te U .ju te de le,tura y ,a*-ie la pgina ini,ial a una pgina e tti,a. $ele,,ione la pgina WBuien so1X ,o*o pgina ini,ial. T1++.1. $i navega a u -log ver que la pgina hija no apare,en ahora en el *en1 de plega-le de la entrada prin,ipal. .de* e han perdido la entrada del -log y no hay enla,e ha,ia ella . ne,e ario que ,ontenga

T1++.2. Cree una nueva pgina titulada Blo6 de decoracin0 no e ning1n te4to. T1++.3. .,,eda al *en1 .ju te U .ju te

de le,tura y e ta-lez,a en el ,uadro Pgina de

entrada la pgina re,iQn ,reada. @uarde lo ,a*-io y navegue a la pgina de ini,io de u -log0 ver que apare,e en el *en1 uperior la entrada Blo6 de decoracin0 al entrar de-erEan apare,er

-'*

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

toda la entrada de u -log.

,.2. (en=s
$e ,ontinuar la per onaliza,i&n del -log utilizando otra ,ara,terE ti,a que per*ite ,rear y organizar *en1 . Bo *en1 enla,e en el -log. Con i ten en una organiza,i&n jerrqui,a de un ,onjunto de enla,e y Hordpre para el te*a original &lo e t di poni-le un *en1 oporta la ,rea,i&n de on un *e,ani *o *a 2le4i-le que la pgina e tti,a para la organiza,i&n de lo

*en1 di2erente . Ba pre enta,i&n de uno o * *en1 en la pgina del -log depende del te*a en u o0 ituado de-ajo de la ,ene2a de,orativa. Po terior*ente apare,ern * *en1 ,uando e in talen otro te*a . T1+). .,,eda al *en1 .parien,ia U Aen1 y ,ree un *en1 lla*ado Menu "rincipal. T1+).1. )n el ,uadro #-i,a,i&n del te*a re,iQn ,reado e t va,Eo. T1+).2. Para aGadir alguno enla,e vuelva a la edi,i&n del *en1. +Eje e en la 2igura :D0 en el ,uadro Pgina utili,e la pe taGa Ver todo0 ele,,ione toda la pgina *ediante el enla,e elegir todo y aGdalo al *en1 ,on el -ot&n .Gadir al *en1. ele,,ione el *en1 re,iQn ,reado y pul e el -ot&n

@uardar. Vi ite u -log y ver ,o*o la -arra de *en1 ha de apare,ido0 el *otivo e que el *en1

Pri*er Pri*ernivel nivel

$egundo $egundonivel nivel

i6ura (K. Edicin de !enRs en Wordpress.

T1+).3. 3ra aGadir lo ele*ento al *en1 apare,ern en el ,uadro que ,ontiene el *en10 ,o*o e *ue tra en la en la 2igura :D. )n e te ,uadro ele*ento e puede utilizar el rat&n para reu-i,ar lo nivele en la jerarquEa &lo hay que verti,al*ente. .de* 0 para ,on eguir vario

de plazarlo ,on el rat&n ha,ia la dere,ha. 8ntente dejar la e tru,tura del *en1 ,o*o la *o trada 2igura :D y no olvide pul ar el -ot&n @uardar *en1 ante de volver a la pgina prin,ipal de u -log. T1+).#. Blegado a e te punto no e4i te ning1n enla,e ha,ia la en la 31>>. y e ,ogiendo ,on alguna de e ta do entrada del -log0 olo hay

enla,e a pgina e tti,a . Para olu,ionarlo tiene do op,ione 0 utilizando lo pa o indi,ado olu,ione JquQde e ,on la olu,i&n que ,rea

Mdulo ;e 3 Word"ress

-'+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

* oportunaK5 1." $ele,,ione ,o*o pgina prin,ipal la op,i&n 3u 1lti*a entrada . 2." $ele,,ione ,o*o Pgina de entrada alguna de la e4i tente . T1+).(. Por 1lti*o de de el *en1 de ad*ini tra,i&n edite el *en1 y de pliegue la Fp,ione de pantalla para a,tivar toda la po i-ilidade que ad*ite el *en1. .Gada alguna entrada del *en1 a partir del ,uadro )tiqueta y edite la )tiqueta de navega,i&n de la entrada de *en1 para que ,ontenga do pala-ra 0 no olo la etiqueta. T1+).+. 3er*ine el *en1 iguiendo la e tru,tura de la 2igura :7.
Aen1 de nivel uperior

Llog Llog de de de,ora,i&n de,ora,i&n

8nteriori 8nteriori *o *o Cl Cl i,o i,o Aini*ali Aini*ali ta ta R1 R1 ti,o ti,o

Pintura Pintura Pintar Pintar interiore interiore Pintar Pintar *adera *adera Pintar Pintar *etale *etale

VIuien VIuien oyW oyW .2i,ione .2i,ione .,tividad .,tividad pro2e pro2e ional ional

i6ura (L. Estructura del !enR principal del blo6.

,.3. 3idgets
Bo ;idget en progra*a,i&n on ele*ento gr2i,o u ado para ,on truir la inter2az gr2i,a de un progra*a0 e to ele*ento -arra e u-i,an en la ventana del progra*a0 lo dilogo del progra*a0 *enu 0 u a e te E*il re2iriendo ,o*o 5id6ets -loque regione di poni-le de ,ontenido en la pgina Hede herra*ienta 0 et,. Hordpre

que el ad*ini trador del -log u-i,a li-re*ente en alguna generada por el CA$.

3anto la regione di poni-le ,o*o la u-i,a,i&n de la *i *a dependen del te*a en u o0 para el te*a original de Hordpre la 2igura <0 *ue tra la regione e4i tente . Con e ta ,on2igura,i&n original e pueden aGadir ;idget en -arra lateral prin,ipal y lo pie . Po terior*ente e in talar otro te*a ,on el que apare,ern * regione .
Ca-e,era

T1+-. .,,eda al *en1 .parien,ia U Hidget 0 apare,er una pantalla i*ilar a la *o trada en la 2igura <1. ) ta pantalla ,ontiene lo ;idget di poni-le para er arra trado a la
Larra lateral prin,ipal Larra de *en1

rea e4i tente . #na vez u-i,ado un ;idget en un rea un *en1 de plega-le per*ite per onalizarlo. T1+-.1. 9e pliegue lo tre ,uadro ,orre pondiente a
`rea de ,ontenido

lo pie utilizando el -ot&n indi,ado en la 2igura <1. Ba -arra prin,ipal ,ontiene alguno ;idget 0 arra tre el
Pie1 Pie2 Pie'

lla*ado Aeta a `rea 1 del pie y .r,hivo a `rea 2 del pie. T1+-.2. 9e de el ,uadro Hidget di poni-le arra tre el ;idget 3e4to a `rea 2 del pie. )dite e te te4to0 ,a*-ie el

i6ura )2. Disposicin de la pA6ina en Wordpress.

-'K

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

tEtulo a Derec.os de autor y e ,ri-a u no*-re. T1+-.3. Para 2inalizar aGada el ;idget =u-e de etiqueta a Larra lateral pin,ipal y vi ite u -log para ver el re ultado. T1+9. .,,eda al *en1 de ad*ini tra,i&n )nla,e y ,ree alguno enla,e . 9e de la pgina de

,on2igura,i&n .parien,ia U Hidget -u que uno lla*ado )nla,e y aGdalo al rea que de ee.

9e 9e pliegue plieguede de,uadro ,uadro

.rra .rra tre trede de;idget ;idget

i6ura )-. Md!inistracin de 5id6ets.

,.4. $emas
Bo te*a on el pro,edi*iento utilizado para ,o*partir y reutilizar lo di eGo realizado por lo . Ba prin,ipal ,on idera,i&n0 ya ,o*entada ,on anterioridad0

u uario y de arrolladore de Hordpre lidad.

e t en que lo te*a no &lo ,a*-ian la aparien,ia del -log0 i no que ta*-iQn ,a*-ian la 2un,iona T

Por e te *otivo lo te*a de-en er pro-ado e4hau tiva*ente ante de de,idir e por alguno. f tra e ,oger uno y ,on2igurarlo pro-a-le*ente el -log quede ligado al te*a iendo *uy ,o*pli,ado un ,a*-io de te*a ,uando el -log tiene ,ontenido. Para la realiza,i&n de e te ,ur o e han evaluado vario y e ,ogido do relevante que aGaden *u,ha 2un,ionalidad e4tra al -log0 2un,ionalidad no e4i tente en

Mdulo ;e 3 Word"ress

-'L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

otro te*a . )l pri*er te*a en pro-ar e W"Start que oporta vario *en1 0 *ue tra la i*agen de ta,ada en la entrada 0 pre enta la entrada re u*ida 0 pero ,uando pero en la edi,i&n de entrada no oporta el *en1 de 2or*ato. )l egundo0 lla*ado 7esponsi%e8 ,a*-ia total*ente la pgina prin,ipal del -log ,reando una pgina ini,ial -a ada en rea per onaliza-le y rea de ;idget . T1)1. .,,eda al *en1 de ad*ini tra,i&n .parien,ia U 3e*a donde e en,uentra el 2i,hero /ip ,on el te*a. T1)1.1. =avegue u -log para ver la nueva aparien,ia0 a,,eda a la ad*ini tra,i&n de *en1 para a,tivar el *en1 ,reado anterior*ente ya que ha-r de apare,ido. T1)1.2. )dite la entrada ya ,reada del -log y utili,e el ,uadro 8*agen de ta,ada para y en la pe taGa 8n talar -u que el

te*a W"Start. 8n tale y a,tive di,ho el te*a0 alternativa*ente puede utilizar el *aterial del ,ur o

ele,,ionar i*gene de pequeGo ta*aGo repre entativa de ,ada entrada. 3ra navegar el -log de-erEan apare,er e ta i*gene junto ,on la entrada . T1)1.3. )dite de nuevo alguna entrada del -log y -u que el ,uadro de 2or*ato0 al no oportarlo e te te*a0 e te ,uadro no e t di poni-le. T1)1.#. .d*ini tre lo ;idget para ,o*pro-ar la di2erente rea e4i tente en e te te*a.

9e-e arra trar ;idget a toda la rea para vi ualizar la u-i,a,i&n de ,ada una. T1)1. 8n tale y a,tive el te*a 7esponsi%e0 e te te*a ,ontiene gran ,antidad de 2un,ionalidad. =avegue u -log ante de ,on2igurar nada0 ver ,o*o trae una pgina de ini,io di2erente y ,o*pleT ta*ente per onaliza-le. T1)1.1. Per onali,e la pgina de de el *en1 de ad*ini tra,i&n .parien,ia U Fp,ione del te*a. Con2igure ,orre,ta*ente la pgina de ini,io0 el logotipo y de a,tive el -ot&n lla*ada a la a,,i&n en )le*ento del te*a T1)1.2. .d*ini tre lo : *en1 e4i tente . .verigXe donde e u-i,a ,ada uno de ello 0 no todo e tn pen ado para er *en1 *ultinivel0 en el uperior ponga la entrada 5 Mapa del sitio0 Contacto0 0otas le6ales. T1)1.3. 3er*ine de per onalizar la pgina aGadiendo ;idget a la rea de ;idget lla*ada Hidget 1 de la pgina ini,ial0 Hidget 2 de la pgina ini,ial y Hidget ' de la pgina ini,ial.

,.). "reaci2n de temas


Crear nuevo en Hordpre requiere ,ono,i*iento de PCP por e tar lo te*a ,o*pue to de

plantilla he,ha en e te lenguaje. .de* de la plantilla en PCP lo te*a in,luyen diver a hoja de e tilo C$$ que de2inen el a pe,to 2inal del -log. 9e de la propia la inter2az He- de ad*ini tra,i&n e puede ,a*-iar ,ualquiera de lo te*a pre ente en el -log0 pero no olo pre enta di2i,ultad realizarlo de de el navegador ino que en ,a o de ,o*eter errore en lo ,a*-io el te*a original queda alterado.

-(2

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Para evitar e te 1lti*o pro-le*a indi,ado y i*pli2i,ar la *odi2i,a,i&n de lo te*a e4i tente apare,e en Hordpre Jy en otro CA$K un pro,edi*iento alternativo lla*ado u-te*a ,on el que e evita la u-te*a e partir de uno ya ne,e idad de ini,iar el de arrollo un te*a de de ,ero. Ba idea de un

e4i tente y pare,ido en u *ayor parte al de eado0 ya ea por aparien,ia o 2un,ionalidad. . ,ontinua,i&n e pre entarn la op,ione * relevante en lo te*a de Hordpre u-te*a partiendo de uno ya e4i tente. T1)2. 9e de el *en1 de ad*ini tra,i&n navegue a .parien,ia U )ditor. )n la parte dere,ha tiene un li tado de la plantilla y hoja de e tilo del te*a ele,,ionado. Puede ,a*-iar la edi,i&n a otro te*a en el ,uadro de plega-le ituado en la parte uperior dere,ha. T1)2.1. $ele,,ione en e ta *i *a pgina0 en la parte in2erior Coja de e tilo J tyle., nada aquE pue to que lo ,a*-io erEan per*anente en e te te*a. K. )n el y e ,rear un

,uadro de edi,i&n puede ver la *ultitud de regla que ,ontrolan el a pe,to del te*a. =o ,a*-ie

T1)2.2. 8n tale y a,tive el te*a /eeSt1le de de el ar,hivo /eest1le.-.2.;./ip u*ini trado ,on el *aterial del ,ur o. =avegue u -log para ver el nuevo a pe,to en detalle. T1)2.3. =avegue al *en1 de ad*ini tra,i&n .parien,ia U 3he*e Fption *ultitud de op,ione de e te te*a. T1)2.#. Pro,edere*o a ,rear un u-te*a -a ado en e te 1lti*o. Con el e4plorador de ar,hivo de Hindo; a-ra la ,arpeta ;p",ontent U the*e de u in tala,i&n de Hordpre ,ontiene lo te*a di poni-le ,ada uno en una ,arpeta di2erente. T1)2.(. Cree una nueva ,arpeta lla*ada curso3c!s. .-ra =otepad??0 en un nuevo 2i,hero va,Eo introduz,a el ,&digo :: y guarde e te 2i,hero ,on el no*-re st1le.css dentro de la ,arpeta re,iQn ,reada Jcurso3c!sK.
/Z 9heme <ame+ *urso *M1 2escription+ Mi tema padre es Leest,le 3uthor+ "aulino =uiL de *la2ijo 9emplate+ Leest,le Z/ 0import url)Q../Leest,le/st,le.cssQ+O Cdi6o ((. Contenido del 4ic.ero st1le.css para crear un te!a .i9o del te!a padre /eest1le.

para repa ar la

. ) ta ,arpeta

T1)2.+. =avegue al *en1 de ad*ini tra,i&n de apare,e en el li tado de te*a

u -log .parien,ia U 3e*a 0 ,o*prue-e

u nuevo te*a y a,tEvelo. y ver ,o*o a pe ar de e tar a,tivo u nuevo

T1)2.). Vuelva a .parien,ia U 3he*e Fption

te*a0 e te ,on erva toda la ,ara,terE ti,a del te*a padre. T1)2.-. .,,eda al *en1 de ad*ini tra,i&n .parien,ia U )ditor y ver en el li tado de ar,hivo del te*a una nota indi,ando que toda a plantilla u ada el ar,hivo st1le.css ,reado anterior*ente. on del te*a padre. $&lo puede editar

Mdulo ;e 3 Word"ress

-(-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Blegado a e te punto el 2i,hero st1le.css del nuevo te*a e el lugar donde aGadir toda la regla C$$ ha ta ,on eguir la aparien,ia del -log de eada. T1)3. Para realizar alguna ini,ial de *odi2i,a,ione utilizare*o +ire-ug. .,tEvelo y navegando la pgina

u -log u e la herra*ienta

ele,tor y el r-ol de ,&digo C3AB. 9e-e lo,alizar lo

iguiente 89 de ,aja y vi ualizar el rea de pgina a2e,tada5 [wrapper0 [wrap0 [content y [side3ar. T1)3.1. #na vez lo,alizada e ta ,aja de-e tener una idea *ental de la ,o*po i,i&n de la

pgina en di2erente rea . )li*inare*o el 2ondo de la envoltura del -log [wrapper0 de-e aGadir la iguiente regla al 2i,hero st1le.css del u-te*a5 [wrapper W 3acXground.color:transparentOY. T1)3.2. Con el eje*plo anterior ha ,o*pro-ado ,o*o la regla e ,rita en u u-te*a tienen prioridad 2rente a la averiguar la originale . 8ntente au*entar el hue,o de regla a de-e alterar. Puede realizar lo epara,i&n entre lo -loque
[content y [side3ar aGadiendo nueva

u hoja de e tilo0 ay1de e de +ire-ug para ,a*-io de de +ire-ug y de puQ

propiedade

,opiarlo en el 2i,hero st1le.css. T1)#. Pro-are*o alguno e2e,to de C$$' ,o*o re plandore y gradiente . T1)#.1. )l pri*er e2e,to ,on i te en utilizar la propiedad de o*-ra para ,rear un e2e,to de re plandor. Bo,ali,e ,on +ire-ug la ,la e 5id6et apli,ada a todo lo ;idget pre entado en la pgina. T1)#.2. Cree una nueva regla en el 2i,hero st1le.css para au*entar el *argen en la ,aja de lo ;idget 5 .widget W margin: 30p4OY. Re,argue la pgina para ver ,orre,ta*ente. T1)#.3. #tilizando la e4ten i&n de +ire2o4 Colorzilla ele,,ione el *en1 $ele,tor de ,olor para o-tener un ,&digo de ,olor de un a*arillo ,laro. .Gada a la regla anterior la propiedad 3o4.
shadow: 0p4 0p4 20p4 [^^^^^^O

i el e tilo

e ha apli,ado

u tituyendo la interroga,ione por el ,&digo de ,olor o-tenido.

Re,argue la pgina para ver un e2e,to de re plandor. T1)#.#. )n C$$' la inta4i de lo gradiente e ,o*pleja. Colorzilla trae una herra*ienta de ayuda para generar gradiente a la que e a,,ede de de el *en1 de Colorzilla C$$ @radient @enerator0 utilE,elo para generar un gradiente que apli,are*o a la ,a-e,era de lo ;idget . T1)#.(. +Eje e ,o*o el ,&digo C$$ generado e ,orre,ta*ente en la *ayorEa de lo navegadore *uy ,o*plejo0 e t pen ado para 2un,ione ya que C$$' no e t i*ple*entado en todo

a,tual*ente. Cree una nueva regla .widgettitle W b Y y pegue el ,ontenido C$$ generado ahE0 i no apare,e el gradiente0 ,o*prue-e ,on +ire-ug ,ual e el pro-le*a Jnota5 [side3ar ul li h2 tiene * prioridadK.

:+ <lu7i!,
Bo ,o*ple*ento de arrollado de de,idir por ter,ero en Hordpre e deno*inan "lu6ins. Bo plugin aGaden o ,a*-ian 2un,ionalidad al CA$ pero e *anteni*iento ante i*portante veri2i,ar el e tado de de arrollo y a,tualiza,ione

u u o en el -log. )l *anteni*iento del -log y la

-(;

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

generarn pro-le*a

i e u an ,o*ple*ento de a,tualizado o a-andonado . en la pgina o2i,ial de Hordpre y de de lo propio *en1 de

)4i ten *ultitud de ,o*ple*ento

ad*ini tra,i&n del -log e pueden -u ,ar e in talar. Co*o eje*plo e propone in talar GiperYs Gideo Tuic<ta6s que 2a,ilita la in er,i&n de vEdeo de 2uente e4terna en el -log. 3a*-iQn re,o*ienda in talar el ,one,tor $A3P de 31(<.2. para u po terior u o en la e,,i&n D.'. T1)(. .,,eda al *en1 Plugin GiperYs Gideo Tuic<ta6. T1)(.1. #na vez in talado ,ree una nueva entrada en el -log. F- erve en el editor lo nuevo i,ono e4i tente para in,luir vEdeo e4terno . Pul e el i,ono de foutu-e J K y apare,er un U .Gadir nuevo0 en el ,uadro de -1 queda te,lee %ideo e in tale

,uadro donde de-e ,olo,ar la #RB del vEdeo que de ee in ertar0 navegue foutu-e y ele,,ione un vEdeo. $olo tiene que ,opiar la #RB del vEdeo en el ,uadro anterior. T1)(.2. 8n tale ahora el plugin lla*ado Ci!1 S5i4t SM,". ) te ,o*ple*ento per*ite u ar un ervidor de ,orreo e4terno en el -log. T1)(.3. .,,eda al *en1 .ju te y ver una nueva entrada ,on el no*-re de e te ,o*ple*ento. T1)(.#. Con2igure el ervidor de ,orreo e4terno di poni-le durante el ,ur o. # e el -ot&n $end 3e t para ,o*pro-ar u la ,on2igura,i&n e ,orre,ta.

;+ O/"io!e, ava!3ada,
) ta e,,i&n de ,ri-e la op,ione de ad*ini tra,i&n avanzada * ,o*une ,on iderada i*portante i e pretende poner un -log p1-li,o en la red. e re,o*ienda pre tar e pe,ial aten,i&n a la #RB a*iga-le y a lo

Por orden de i*portan,ia

trac<bac<s6pin6bac<s al e tar *uy ligada a la vi i-ilidad del un -log en la red y por tanto al Q4ito del *i *o. 3a*-iQn el pro,e o de ,lona,i&n del -log para pe,uliaridade . u pue ta en e4plota,i&n pre enta alguna

/.1. 7*9s amigab#es


#na #RB e ,on iderada a*iga-le < ,uando e t 2or*ada por pala-ra 2,il*ente entendi-le por el u uario y rela,ionada ,on el ,ontenido *o trado. 3odo lo CA$ on pgina He- din*i,a donde la varia-le e pa an en la #RB tra el ,ar,ter RWS llegando a er la #RB e4ten a y di2E,il de re,ordar. i navega u -log y a,,ede alguna entrada ver una #RB del tipo 6pintar",on"-ro,ha.

Para entenderlo *ejor0

http566lo,alho t6*2e";ordpre

6Wpa10' ,onvertir e ta #RB en a*iga-le ,on i te en u tituir RWpa10'S

por pala-ra rela,ionada ,on la entrada por eje*plo http566lo,alho t6*2e";ordpre

Ba ventaja de e te tipo de #RB no &lo e para lo vi itante del itio He-0 lo *otore de -1 queda
< 3a*-iQn e deno*ina #RB e*nti,a.

Mdulo ;e 3 Word"ress

-('

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,on ideran * relevante e te tipo de dire,,ione He-0 ie*pre y ,uando no e a-u e del n1*ero de pala-ra u ada . )n Hordpre lug e utiliza el tQr*ino slu6 ,o*o re2eren,ia a la #RB a*iga-le y ele*ento del -log5 entrada de -log0 pgina 0 ,ategorEa e y per*ite e pe,i2i,ar etiqueta . T1)+. =avegue ha ta el *en1 de ad*ini tra,i&n .ju te op,i&n =o*-re de entrada. T1)+.1. 3ra guardar lo ,a*-io navegue u -log y veri2ique i lo enla,e 2un,ionan ,orre,taT *ente. T1)+.2. )n ,a o de no 2un,ionar de-e a,tivar una e4ten i&n del ervidor He- .pa,he. Pul e el -ot&n izquierdo del rat&n o-re el i,ono de e tado de H.AP y u e el *en1 .pa,he U A&dulo de .pa,he0 -u que en el li tado el *&dulo re;riteN*odule y a,tEvelo. H.AP reini,iar .pa,he ,argando e ta e4ten i&n. T1)+.3. )dite alguna entrada de u -log y a,tive la ,a illa $lug ituada en Fp,ione de pantalla de la pgina de edi,i&n de entrada . .unque el ,a*po slu6 e ,*-ielo *anual*ente. T1)+.#. .,,eda de nuevo .ju te U )nla,e per*anente y e ta-lez,a en ) tru,tura generado auto*ti,a*ente U )nla,e per*anente y ele,,ione la para *u,ho

per onalizada el iguiente te4to5 6c,ategoryc6cpo tna*ec6. ) ta e una de la *ejore op,ione ya que e tru,tura la #RB del itio He- eg1n la ,ategorEa de lo po t . T1)+.(. =avegue el -log y o- erve la #RB de plegando lo *en1 de la e,,ione del -log.

/.2. $rac6bac6s y Pingbac6s


Bo 3ra,/-a,/ y Ping-a,/ i otro autor e t ha-lando on *Qtodo para interrela,ionar -log y u 2un,i&n e avi ar a un autor o-re Ql. )n u origen 2ueron de arrollado . ,o*o plugin adi,ionale y

e tando e tn a,tual*ente in,luido en el n1,leo de Hordpre

)n la He- e4i te *ultitud de do,u*enta,i&n o-re el te*a y ie*pre apare,e un *i *o eje*plo que intenta pre entar el 2un,iona*iento de e to *e,ani *o 0 e te eje*plo e el iguiente5 I!a6ine!os un autor M Bue escribe sobre un co!ple!ento de 4oto Albu! del CMS "lone en un blo6 Bue trata el CMS lla!ado "lone. Ctra persona B escribe sobre di4erentes 4or!as de .acer 4oto Albu!es 1 re4erencia al autor M desde su blo6 indicando co!o se .ace usando el CMS "lone. 3ra pu-li,ar la entrada la per ona L el autor . re,i-e un ping-a,/ e*itido auto*ti,a*ente por el -log de e ta per ona de ,ono,ida. Aientra el ping-a,/ e un pro,e o auto*ti,o0 el tra,/-a,/ e un pro,e o 2orzado por la per ona L ,on i tente en aGadir a ,on ultar en el e ,ritorio de ad*ini tra,i&n de Hordpre lo ping-a,/ y tra,/-a,/ ha-itual*ente apare,en u entrada de Llog in2or*a,i&n adi,ional e pueden entrada

in,luyendo una #RB del -log del autor . para lla*ar al pro,edi*iento de tra,/-a,/. `*-o en lo ,o*entario de la

y aunque dependen de la plantilla utilizada0

-((

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

auto*ti,a*ente. Para realizar prue-a di2erente #RB . T1)). F-tenga la dire,,i&n 8P de u ordenador y 1 ela para e ta-le,er en el *en1 de ad*ini tra,i&n .ju te U @enerale la dire,,ione 9ire,,i&n de HordPre ,a*-iar la pala-ra local.ost por u dire,,i&n 8P. T1)).1. =avegue el -log de alg1n ,o*paGero que haya realizado el pa o anterior y ,apture la #RB de una entrada del -log del ,o*paGero. T1)).2. )dite alguna entrada de u -log0 en Fp,ione de pantalla a,tive la ,a illa )nviar &lo J#RBK y 9ire,,i&n del itio J#RBK. 9e-e e re,o*ienda tener el -log operativo en una dire,,i&n que no ea lo,al Jlo,alho tK de de otro -log0 otra op,i&n e in talar do Hordpre lo,al*ente en

para poder enviar tra,/-a,/

tra,/-a,/ y apare,er un ,uadro en la pgina donde puede e ,ri-ir la #RB del tra,/-a,/. Ba #RB ,on i te en aGadir a la dire,,i&n del ,o*paGero la ,oletilla R6tra,/-a,/S0 pero 2un,ionar i e tn a,tiva la #RB a*iga-le . T1)).3. Pu-lique la entrada de nuevo y pida a u ,o*paGero que entre en la ad*ini tra,i&n del -log. )n ) ,ritorio o en Co*entario de-erEa apare,er un ,o*entario pendiente de *odera,i&n ,o*o el *o trado en la 2igura <2 indi,ando que e trata de un tra,/-a,/.

i6ura );. 0oti4icaciones de trac<bac<s.

/.3. 'esti2n de usuarios


)l oporte *ultiu uario de Hordpre e t -a ado en la utiliza,i&n de role para lo di2erente

u uario del -log. Ba pri*era de,i i&n de ante la pue ta en 2un,iona*iento de un -log e regi tro de u uario o lo u uario aGadir u uario *anual*ente.

i ha-ilitar el

)n lo CA$ un rol e un ,onjunto de per*i o ha-ilitado a lo que e le da un no*-re. )n el ,a o de Hordpre e4i ten e to role predeter*inado 5

$u ,riptor5 ) el rol ,on *eno per*i o 0 &lo puede ,a*-iar u per2il. Cola-orador5 Puede ,rear ,ontenido pero para pu-li,arlo el ad*ini trador de-e apro-arlo. .utor5 Puede ,rear y pu-li,ar u propia entrada de -log ta*-iQn puede u-ir ar,hivo .

Mdulo ;e 3 Word"ress

-()

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)ditor5 3iene privilegio para ,rear y pu-li,ar entrada y pgina del -log. 3a*-iQn puede editar y pu-li,ar ,ontenido no ,reado por Ql. .de* puede *oderar ,o*entario 0 *odi2i,ar ,ategorEa 0 enla,e 0 et,. .d*ini trador5 3iene privilegio para a,,eder a lo *en1 de ad*ini tra,i&n del -log. $in entrar en pro2undidad en el ,ontrol de u uario ,ontinua,i&n. T1)-. .,,eda de de el *en1 ad*ini tra,i&n a .ju te U @enerale y ha-ilite la op,i&n Cualquiera puede regi trar e. T1)-.1. Cierre la e i&n de ad*ini trador y regi tre un nuevo u uario. $&lo 2un,ionar i ha y role e realizarn alguna prue-a - i,a a

,on2igurado ,orre,ta*ente el ,o*ple*ento de envEo de ,orreo in talado en 31(<.2. T1)-.2. Bea el ,orreo ele,tr&ni,o para poder ini,iar la e i&n en Hordpre . Co*pro-ar ,o*o

,on e te u uario no tiene a,,e o a toda la op,ione de ad*ini tra,i&n del -log. T1)-.3. Cierre la e i&n del nuevo u uario y a,,eda al -log ,o*o ad*ini trador. )n el *en1 de ad*ini tra,i&n a,,eda a # uario U 3odo lo u uario para editar el per2il del nuevo u uario. T1)-.#. Ca*-ie el rol de e te u uario a Colaborador0 ,ierre la e i&n de ad*ini trador y a,,eda ,on el nuevo u uario para ver i puede agregar entrada entradaW T1)-.(. Vuelva a entrar ,o*o ad*ini trador y repita la opera,i&n pro-ando el re to de lo role e4i tente . en el -log. VPuede pu-li,ar la nueva

/.4. "#onaci2n de# sitio


$e realizar la ,lona,i&n del itio para u pue ta en e4plota,i&n en el ervidor de 8nternet di poni-le durante el ,ur o. )l pro,edi*iento ,o*1n en ,ualquier CA$ ,on te,nologEa PCP6Ay$IB e ,opiar lo 2i,hero al ervidor e i*portar la -a e de dato . Con Hordpre hay que realizar alguno pa o adi,ionale 0 en pri*er lugar e de-e editar un ar,hivo de al*a,ena en la -a e de dato la #RB del -log en

,on2igura,i&n PCP para e ta-le,er todo lo valore de ,one4i&n a la -a e de dato y ade* la -a e de dato no e puede er i*portada tal ,ual. Hordpre nu*ero o regi tro 0 hay que ,a*-iar toda e ta dire,,ione por la nueva dire,,i&n del -log. T1)9. Cone,te *ediante +3P al ervidor re*oto para u-ir todo $e re,o*ienda ,rear una ,arpeta nueva en el de-er -orrar ,ualquier otro ,ontenido y el -orrado +3P e lento.. T1)9.1. Aientra lo ar,hivo Hordpre edi,i&n. e ,opian por +3P puede ir e4portando la -a e de dato lo,al de u ar,hivo lo,ale de Hordpre .

ervidor re*oto para Hordpre

0 de lo ,ontrario

. )n la e4porta,i&n no e4porte la -a e de dato ,o*pleta0 de-e ele,,ionar toda la

ta-la y e4portar la ta-la . +Eje e en la 2igura <' para o-tener un 2i,hero .sBl para u po terior

-(*

Mdulo ;e 3 Word"ress

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)4portar

i6ura )'. E@portacin de tablas de Wordpress.

T1)9.2. )dite ,on =otepad?? el 2i,hero o-tenido J 5ordpress.sBlK para ree*plazar toda #RB e4i tente por la nueva dire,,i&n de

la

u -log. Con =otepad?? utili,e el *en1 Lu ,ar U 0 pul ando

Ree*plazar y ver el dilogo *o trado en la 2igura <'0 2Eje e ,o*o e ha ree*plazado la dire,,i&n antigua http566lo,alho t6*2e";ordpre por http566pro2e or.zopeplone.e 6;ordpre Ree*plazar todo quedar el 2i,hero propeparado.

i6ura )(. Sustitucin !anual en un 4ic.ero STL.

T1)9.3. =avegue a la dire,,i&n He- de phpAy.d*in del 2i,hero .sBl que a,a-a de *odi2i,ar.

ervidor de 8nternet e i*porte el

Mdulo ;e 3 Word"ress

-(+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1)9.#. $i navega la dire,,i&n He- donde ha in talado Hordpre

o-tendr el *en aje Error

estableciendo una cone@in con la base de datos . #tilizando =otepad?? ,one,te ,on al ervidor +3P ,on el plugin 0pp ," y edite el 2i,hero re*oto 5p3con4i6.p.p de la raEz de la in tala,i&n de Hordpre . 9e-e -u ,ar y e ta-le,er ,orre,ta*ente el 2rag*ento de ,&digo :<.
ord"ress Z/

/ZZ 8l nom3re de tu 3ase de datos de define)Q0HS;7M8QB Q;;;;Q+O /ZZ ?u nom3re de usuario de M,1c@ Z/ define)Q0HSM18=QB Q;;;;Q+O /ZZ ?u contrase]a de M,1c@ Z/ define)Q0HS"711 K=0QB Q;;;;Q+O Cdi6o ().

ra6!ento del 4ic.ero de con4i6uracin 5p3con4i6.p.p de Wordpress.

T1)9.(. =avegue a la dire,,i&n de 8nternet de u -log y vi uali,e el ,ontenido.

/.). 0tras caracter-sticas


Ftro u o ,o*1n de lo -log e la ,rea,i&n de 2oto-log 0 aunque e4i ten CA$ dedi,ado a e te 2in0 in talando alguno ,o*ple*ento ,o*o PM"B y ".otoT ".otoblo6 e puede utilizar Hordpre -log. Ftra ,ara,terE ti,a intere ante e la po i-ilidad de ,rear un itio *ulti-log0 e un po,o * ,o*plejo pero e puede en,ontrar *ultitud de in2or*a,i&n en 8nternet al re pe,to y tutoriale 2,ile de eguir. =o e entrar en detalle en e ta ,ue ti&n. Por 1lti*o0 entre la op,ione de ad*ini tra,i&n e4i tente en Hordpre herra*ienta para ,rea,i&n de -log *ultilingXe . T1-1. 8n tale lo ,o*ple*ento PM"B o ".otoT ".otoblo6 para intentar ,rear un 2oto-log. T1-1. .,,eda al *en1 de ad*ini tra,i&n Cerra*ienta U )4portar y e4porte la pgina de u -log. T1-1.1. .hora navegue a Cerra*ienta U 8*portar donde e li tan lo di2erente ,o*ple*ento para i*portar ,ontenido en Hordpre . 8n tale el 1lti*o lla*ado Hordpre 0 ,on e te ,o*ple*ento podr i*portar el 2i,hero e4portado anterior*ente. T1-1.2. .,,eda a Cerra*ienta U 8*portar y u e la op,i&n R$$. 3ra in talarla e le oli,ita un ar,hivo0 pul e e4a*inar pero en vez de ele,,ionar un ar,hivo pegue la iguiente #RB5 la http5662eed .2eed-urner.,o*6.ndroid.yuda. Pul e .-rir0 e pere uno novedade del otro Llog. T1-2. 8n tale y prue-e el ,o*ple*ento HPAB para ,rea,i&n de itio -ilingXe y *ultilingXe . egundo 0 y u e el -ot&n y no tratada ,on anterioridad itio He- *ulti-log y ,o*o 2oto

,a-en de ta,ar5 i*porta,i&n y e4porta,i&n de ,ontenido 0 ,rea,i&n de

$u-ir ar,hivo e i*portar. $i todo ha ido -ien a,a-a de i*portar *ediante R$$ toda

-(K

Mdulo ;e 3 Word"ress

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo .a % Boo-la
Portales +eb -asados en 7oo$la

1+ Re,u-e!
9ura,i&n e ti*ada : hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero %oo*laN2.<.:"$ta-le"+ullNPa,/age.zip e ")$Njoo*laNlangN2ullN2.<.:v2.zip re,ur o "joo*la.zip joo*la"pro2e or.zip0 joo*laNpro2e or. ql.zip0 ,aptura"plantilla.png p/gNdji*age liderN1.'.1. ta-leN%2.<.zip
,abla ;2.

3e%cri/cin %oo*la 8n tala-le 3radu,,i&n de %oo*la a ) paGol 8*gene y te4to para utilizar en lo ,ontenido Clona,i&n del itio He- del pro2e or Captura de la plantilla a realizar )4ten i&n para *o trar ,on truir y *o trar galerEa de 2oto

ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O:>P He- F2i,ial de 9u-lin Core0 <http566;;;.du-lin,ore.org6!. O:(P Re our,e 9e ,ription +ra*e;or/ JR9+K de H'C0 <http566;;;.;'.org6R9+6!. O:DP Pgina o2i,ial de %oo*la0 <http566;;;.joo*la.org!. O:7P Co*unidad %oo*la0 e4,elente *anual en ,a tellano0 <http566,o*unidadjoo*la.org6!. O<0P %oo*la Ci pano0 <http566;;;.joo*lahi pano.org6!. O<1P 9e arrollo - i,o de plantilla para %oo*la0 Beandro 9]Fno2rio <http566-i-liote,a.,o*unidadjoo*la.org6li-ro 6plantilla "joo*la!.

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

O<2P )4ten ione para %oo*la0 <http566e4ten ion .joo*la.org6!.

.+ I!#&odu""i4!
)l portal He- urge tra la ne,e idad de integrar en un itio He- di2erente ge tore de ,ontenido ervi,io o2re,ido por dedi,ado . #n portal He- de de el punto de vi ta del u uario pre enta la ervi,io di poni-le en el itio.

in2or*a,i&n de *anera ho*ogQnea tanto en el a pe,to ,o*o en la 2un,ionalidad0 y de de el punto de vi ta del ad*ini trador ,entraliza toda la ge ti&n de lo di2erente

)n lo CA$ e tudiado ha ta ahora lo tipo de ,ontenido alojado e ta-an rela,ionado ,on el tipo de CA$ ,on el que e tra-aja. )n el ,a o del ge tor de 2oro u uario 0 ,uando e tra-aja ,on ge tore de ,ontenido e *aneja-an 2oro y u-2oro ,on *en aje de para ,o*er,io ele,tr&ni,o prin,ipal*ente e

tra-aja ,on produ,to organizado en di2erente ,ategorEa y a E u,ede ,on todo lo CA$ dedi,ado . )n ,a*-io0 un CA$ para portale He- e t di eGado para tra-ajar ,on di2erente tipo de ,ontenido ,o*o pueden CA$ er noti,ia 0 *anuale de u uario 0 galerEa &lo alguno de i*gene 0 ar,hivo de e to tipo -inario 0 et,. ) to uelen traer en u in tala,i&n - i,a de ,ontenido dejando al

ad*ini trador o de arrollador la po i-ilidad de in,luir * 0 -ien aGadiendo 2un,ionalidad di poni-le o -ien de arrollando nuevo ,o*ple*ento . )l Q4ito de un CA$ para portale He- radi,a en 2a,ilitar a lo di eGadore 0 de arrolladore y ad*ini tra T dore el pro,e o de adapta,i&n del portal a u ne,e idade . ) to CA$ ,u-ren un a*plio a-ani,o de po i-ilidade de u o0 y para ,on eguirlo optan por 2a,ilitar el de arrollo e in tala,i&n de ,o*ple*ento ,apa,e de *odi2i,ar o aGadir ,ualquier nueva 2un,ionalidad. Ftro a pe,to i*portante en lo portale He- e la ge ti&n de la in2or*a,i&n0 nor*al*ente e llegan a al,anzar vol1*ene ,on idera-le ,on e to CA$. ) to *otiva el u o de lo tipo de ,ontenido. Bo lla*ado *etadato on in,luido a,tual*ente e tandarizado adi,ional *etadato on ,apa,e en *odelo lla*ado 9u-linCore O:>P0 R9+ O:(P0 et,. y *etadato

general*ente ,o*o parte 2unda*ental de lo

on in2or*a,i&n

o-re la propia in2or*a,i&n0 ,o*o por eje*plo5 autor0 2e,ha de ,rea,i&n0 idio*a0 et,. ) to on ,ru,iale para lo -u ,adore de 8nternet0 utilizado ade,uada*ente0 e to -u ,adore de re,opilar in2or*a,i&n de de el CA$ re,ono,iendo e inde4ando dato ,o*o autor6e 0

2e,ha de pu-li,a,i&n0 idio*a0 li,en,ia 0 et,. #tilizare*o %oo*la ,o*o punto de ini,io a lo CA$ para portale He- ya que e -a tante - i,o en la 2un,ionalidad0 ,&*odo en la ad*ini tra,i&n y 2a,ilita en gran *edida el ,ontrol de la pre enta,i&n de ta,a en e te 1lti*o a pe,to por er *uy 2le4i-le. )n ,ontra partida trae una po-re ge ti&n de u ua T rio y e -a tante rEgido en la organiza,i&n de la in2or*a,i&n dentro del portal. . lo largo del ,ur o o- ervare*o grande di2eren,ia entre lo CA$ para portale e tudiado 0 pero

todo ello in,luyen al *eno la ,ara,terE ti,a de ,rita en e ta introdu,,i&n.

-)2

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

1+ I!,#ala"i4!
3ra-ajare*o ,on la ra*a 2.< ya que tiene la tradu,,i&n al ,a tellano ,o*pleta. )l pro,edi*iento de in tala,i&n no revi te *ayor di2i,ultad0 eguire*o lo pa o ha-ituale . T1-3. 9e ,argue la 1lti*a ver i&n de la ra*a 2.< de de la pgina o2i,ial de %oo*la o utili,e el ar,hivo u*ini trado ,on e te *&dulo. 9e ,o*prE*alo en una nueva ,arpeta0 por eje*plo 9oo!la0 dentro de la ,arpeta 555 de H.AP. T1-3.1. Cree un nuevo u uario y una nueva -a e de dato utilizando el pro,edi*iento ha-ittual. T1-3.2. =avegue a la dire,,i&n http566lo,alho t6joo*la para realizar la in tala,i&n0 n&te e ,o*o el pro,e o de in tala,i&n e puede realizar en ,a tellano. 8n tale el ,ontenido de eje*plo re,o*endado en lo pa o de in tala,i&n. T1-3.3. 3ra 2inalizar la in tala,i&n e de-e eguir la indi,a,i&n para -orrar la ,arpeta de in talaT ,i&n0 de lo ,ontrario0 %oo*la no 2un,ionar. T1-3.#. =avegando al nuevo inglQ . )l oporte para lo idio*a e in tala ,o*o un ,o*ple*ento adi,ional en %oo*la. Ba in tala,i&n de itio vere*o en un portal ,on ,ontenido de eje*plo0 pero en a o,iada de de phpAy.d*in

,o*ple*ento en %oo*la no requiere ,opiar ar,hivo dire,ta*ente a la ,arpeta donde e t in talado el CA$. %oo*la trae un ge tor de e4ten ione en la e,,i&n de ad*ini tra,i&n de de el ,ual e tran 2ieren ar,hivo ,on e4ten ione y Q ta e in talan. ) te pro,edi*iento ya e *o tr& en otro ge tore de ,ontenido ,o*o $A+. T1-#. Pro,eda*o para el a in talar el oporte la

e paGol

de ,argando

tradu,,ione de de uno de lo

u-*en1
i6ura )). Instalador de e@tensiones en Zoo!la.

en la pgina o2i,ial de %oo*la. Lu que la

entrada 3ran lation y lo,ali,e la tradu,,i&n6e al e paGol. T1-#.1. $i todo ha ido -ien0 o-tendr el 2i,hero5 es3ESI9oo!laIlan6I4ullI;.).(%;./ip. =o de ,o*T pri*a ninguno de e to 2i,hero 0 no e ne,e ario ya que %oo*la 2a,ilita todo el pro,e o. .lternativa*ente puede utilizar el 2i,hero in,luido ,on el *aterial del *&dulo. T1-#.2. )ntre en la e,,i&n de ad*ini tra,i&n0 para ello -u que el enla,e en la pgina prin,ipal ,on el te4to $ite .d*ini trator0 alternativa*ente puede utilizar la #RB de u itio He- aGadiendo la ,oletilla ad!inistrator5 http566lo,alho t6ad*ini trator. T1-#.3. .,,eda al *en1 )4ten ion U 8n tall6#nin tall Jver 2igura <<K. #na vez allE0 en el ,uadro #pload Pa,/age +ile de-e ele,,ionar el 2i,hero de ,argado anterior*ente J-ot&n )4a*inarK y pul ar el -ot&n #pload k 8n tall.

Mdulo 'a 3 Zoo!la

-)-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1-#.#. Para a,tivar el idio*a e de-e a,,eder al *en1 )4ten ion U Banguage Aanager donde apare,er la pantalla de la 2igura <>. 9e-e e ta-le,er el e paGol tanto para el portal ,o*o para lo *en1 de ad*ini tra,i&n0 ele,,ione el idio*a y pul e en el -ot&n predeter*inado. .nte de ,ontinuar ,on la ad*ini tra,i&n e re,o*enda-le ,o*pro-ar el e tado de la ,on2igura,i&n

glo-al del portal. T1-(. .,,eda a la entrada de *en1 $itio U Con2igura,i&n @lo-al. )n la parte uperior a,,eda a lo tre enla,e 5 $itio0 $i te*a y $ervidor. Repa e toda la op,ione 0 ,on2igure la de ,orreo ade,uadaT *ente y deje la op,ione que de ,onoz,a in alterar.

2+ Ad-i!i,#&a"i4! de "o!#e!ido,
Bo ,ontenido en %oo*la 2.4 e organizan en una jerarquEa *ultinivel de cate6or?as*. )l ,ontenido e t a o,iado a la ,ategorEa 0 i el volu*en de in2or*a,i&n *anejado en el CA$ e grande0 e re,o*enda-le organizar el ,ontenido vario nivele pero0 no e re,o*ienda en un itio He- e4,eder tre nivele de jerarquEa en la organiza,i&n de ,ontenido .

).1. "ategor-as y art-cu#os


Realizare*o ,ontenido . T1-+. 9e ,o*pri*a en una nueva ,arpeta de u di ,o el 2i,hero recursos39oo!la./ip para utilizar la i*gene y te4to in,luido . .-ra el 2i,hero te@tos39oo!la.t@t ,on =otepad?? para ,opiar y pegar.
> )n ver ione anteriore &lo e4i tEan do nivele lla*ado e,,ione y ,ategorEa .

un eje*plo de ,ontenido ,reando una pu-li,a,i&n digital de una pequeGa lo,alidad. e to*arn del 2i,hero recursos39oo!la./ip para 2a,ilitar la introdu,,i&n de

3odo lo te4to e i*gene

-);

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1-). =avegue a la pgina de ad*ini tra,i&n de

u %oo*la y de de el *en1 prin,ipal de

ad*ini tra,i&n Contenido o de de el panel de ,ontrol0 a,,eda al @e tor de ,ategorEa . T1-).1. $ele,,ione toda la ,ategorEa que vienen de eje*plo para *andarla a la papelera. # e el ,uadro de ele,,i&n uperior para ele,,ionar todo y pul e el -ot&n uperior dere,ho Papelera. T1-).2. )n el ad*ini trador de ,ategorEa ta-la 21. .l *eno ,ree la prin,ipale y la eg1n la ne,e ite. Rellene lo te4to ,ree la ,ategorEa y u-,ategorEa indi,ada en la

u-,ategorEa de 0oticias0 el re to lo puede ,rear i*gene utilizando lo 2i,hero de re,ur o

y u e la

in,luido en e te *&dulo J e re,ono,en por el no*-reK. T1-).3. ) i*portante que de pliegue el ,uadro Fp,ione - i,a para aGadir a ,ada ,ategorEa la 8*agen ,orre pondiente e in,luya el te4to de ,riptivo de de el 2i,hero te@tos39oo!la.t@t. Cate5or=a% =oti,ia .,tividade Cultura Sub-Cate5or=a% >ni9el 2? =oti,ia Bo,ale 0 =oti,ia Provin,iale 0 =a,ionale 0 =oti,ia 8nterna,ionale .,tividade deportiva 0 +e tejo 3e,nologEa0 Fpini&n
,abla ;-. ZerarBu?a de cate6or?as.

T1--. Con la e tru,tura ,reada aGadire*o nuevo

,ontenido a alguna

de la

,ategorEa . Creare*o

artE,ulo de de el ad*ini trador de artE,ulo *o trado en la 2igura <(. .,,eda a Ql de de el

*en1 de ad*ini tra,i&n Contenido U @e tor de .rtE,ulo . T1--.1. 8ni,ial*ente tene*o ,antidad de artE,ulo ,reado ,o*o eje*plo de ,ontenido0

ele,,ione todo para enviarlo a la papelera.

+iltro +iltro

$ele,,ionar $ele,,ionar todo todo

Ca*-io Ca*-io de de e e tado tado

i6ura )+. Md!inistrador de art?culos.

Mdulo 'a 3 Zoo!la

-)'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T1--.2. Co*prue-e utilizando el enla,e Ver itio i e2e,tiva*ente han de apare,ido de u portal lo artE,ulo que ha enviado a la papelera. ) re,o*enda-le va,iar la papelera ante de ,ontinuar. T1--.3. #tili,e el -ot&n =uevo y aGada un artE,ulo en la u-,ategoria 0oticias U Locales titulado Casetas Gelada ;2-; y rellQnelo de la 2or*a indi,ada Jno e olvide de guardar lo ,a*-io K5 #tili,e el te4to in,luido en el 2i,hero te@tos39oo!la.t@t. )n el ,uadro Fp,ione de pu-li,a,i&n e ta-lez,a la 2e,ha indi,ada en el te4to. Aarque ta*-iQn la op,i&n 9e ta,ado al valor $E. 9e pliegue el ,uadro Fp,ione ,o*o 8*agen de introdu,,i&n. de i*gene y enla,e y utili,e la i*agen 4eria3-.pn6

).2. 4dministraci2n de men=s


)n %oo*la el a,,e o a todo lo ,ontenido del portal e realiza *ediante el u o de !enRs. Bo *en1 ,ontienen un li tado de enla,e ordenado y on el punto de partida para enlazar a la di2erente ,ategorEa 0 li tado u otro ele*ento de ,ontenido en el portal. )4i te un *en1 e pe,ial *ar,ado ,on una e trella ,orre pondiente al *en1 prin,ipal del portal. T1-9. Realizare*o ,a*-io en el *en1 prin,ipal0 ini,ial*ente le ,a*-iare*o el no*-re0 para ello a,,eda al *en1 de ad*ini tra,i&n Aen1 U .d*ini trador de Aen1 . .pare,er un li tado ,on lo *en1 e4i tente en el itio0 reno*-re el lla*ado Main MenR ,a*-indole el tEtulo a MenR principal. Para ,on eguirlo de-e *ar,ar la ,a illa de ele,,i&n del *en1 y pul ar el -ot&n uperior dere,ho )ditar. T1-9.1. 9e de el *en1 de ad*ini tra,i&n ele,,ione la op,i&n Aen1 y o-tendr un li tado de todo lo *en1 e4i tente en el itio He-. )dite el *en1 prin,ipal. T1-9.2. Para ,o*enzar de de ,ero ,on el *en1 ele,,ione todo lo ele*ento e4i tente para *andarlo a la papelera. #no de lo ele*ento no e -orrar0 e el enla,e a la pgina de ini,io0 reno*-re e te ele*ento a Inicio. T1-9.3. .Gada un nuevo ele*ento de *en1 ,on el -ot&n =uevo. Pul e el -ot&n $ele,,ionar pertene,iente al ,a*po 3ipo de ele*ento del *en1. .pare,er una nueva ventana Jver 2igura <DK0 ele,,ione Ao trar una ,ategorEa en 2or*ato -log. T1-9.#. 3itule e te ele*ento 0oticias y en el ,uadro Fp,ione *en1. T1-9.(. $i al vi itar u itio igue el enla,e de *en1 que a,a-a de ,rear le llevar a una pgina donde pa o . &lo e *ue tran la u-,ategorEa e4i tente . )n 31D(.'. de-i& in,luir uno te4to iguiente e i*gene de ,riptivo de alguna ,ategorEa 0 i no lo hizo no notar ,a*-io en lo o-ligatoria ele,,ione la

,ategorEa de pri*er nivel 0oticias. @uarde lo ,a*-io 0 vi ite el itio para ver el re ultado del

-)(

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura )K. ,ipos de ele!entos de !enR.

T1-9.+. )dite la entrada de *en1 0oticias y de pliegue el ,uadro Fp,ione la ,ategorEa e 8*agen de la ,ategorEa. @uarde lo apare,ern lo te4to e i*gene de ,riptivo . ,a*-io

de la ,ategorEa.

) ta-lez,a el valor Ao trar para lo ,uadro de plega-le 3itulo de la ,ategorEa0 9e ,rip,i&n de y al vi itar de nuevo e te *en1

)4i ten *ultitud de op,ione di poni-le en el ,uadro Cpciones de la cate6or?a vi to anterior*ente. =o olo en e te ,uadro0 ,ada vez que e aGade alg1n ele*ento en %oo*la la ventana de edi,i&n e t lleno de ,uadro ,on gran ,antidad po i-ilidade de ,on2igura,i&n. 3oda la op,ione to*an un valor por de2e,to0 e intere ante ante de llenar el itio de ,ontenido

e ta-le,er ,ual e el 2or*ato y la op,ione predeter*inada del itio He-. . E en la *ayorEa de lo ,a o no hay que ,on2igurar ,o*pleta*ente ,ada ele*ento aGadido. )n todo artE,ulo 0 lo *en1 de ad*ini tra,i&n en,argado et,K e t di poni-le un de ge tionar di2erente de op,ione para ele*ento ,on2igurar J,ategorEa 0 lo valore

*en1 0

,uadro

predeter*inado de eado en lo ele*ento . T191. =avegue al *en1 de ad*ini tra,i&n Aen1 Fp,ione ta-la 22. Pe%ta@a .rtE,ulo CategorEa 7/cinA Balor Ao trar .utor5 =o BE*ite leer *a 5 20 3Etulo de la ,ategorEa5 Ao trar 9e ,rip,i&n de la ,ategorEa5 Ao trar 8*agen de la ,ategorEa5 Ao trar U @e tor de CategorEa . Pul e o-re el i,ono

ituado en la parte uperior dere,ha de la pgina y e ta-lez,a la op,ione indi,ada en la

Cantidad de artE,ulo de introdu,,i&n5 2 Cantidad de artE,ulo de puQ de lo de Fp,ione del 2or*ato del introdu,,i&n5 > tipo -log o de ta,ado Cantidad de ,olu*na 5 2 Frden en ,olu*na *1ltiple 5 Cruzado

Mdulo 'a 3 Zoo!la

-))

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Pe%ta@a 8ntegra,i&n

7/cinA Balor 9e ,ada noti,ia indi,ada *o trar5 3e4to ,o*pleto

,abla ;;. Galores 6lobales de con4i6uracin para el 6estor de art?culos.

T191.1. Bo

valore

e ta-le,ido

e apli,arn por de2e,to al li tar ,ategorEa 0 pero

e pueden

indi,ar valore di2erente en deter*inada entrada de *en1. Para pro-arlo aGada un egundo artE,ulo titulado M!pliacin de carril bici en la ,ategorEa 0oticias locales0 to*ando el te4to de lo te4to ya preparado y aGadiendo la i*agen ,orre pondiente. T191.2. 9e de el ge tor de *en1 9e pliegue el ,uadro Fp,ione artE,ulo 3odo . T191.3. Vi ite el itio y navegue el enla,e 0oticias del *en1 prin,ipal para ver la do noti,ia en do ,olu*na 0 pero el te4to e4i tente en la noti,ia del ,arril -i,i e e4,e ivo. T191.#. )dite de nuevo el artE,ulo y ,ur or de edi,i&n tra Pul e el -ot&n la *o trada el ituQ el edite en el MenR principal el ele*ento de *en1 0oticias. valore 5 Cantidad de u-,ategorEa U de puQ l U : e 8n,luir

de 2or*ato tipo -log y e ta-lez,a lo

de introdu,,i&n U 00 Cantidad de artE,ulo

egundo prra2o.

ituado en la parte -aja del en la 2igura <7 apare,er

editor lla*ado Beer * . #na -arra roja ,o*o indi,ando una divi i&n de te4to. T191.(. =avegue de nuevo el *en1 0oticias para ver lo ,a*-io e2e,tivo 0 &lo e *o trar el te4to ha ta el lugar indi,ado.

T191. )dite el *en1 3op para que olo ,ontenga do entrada 0oticias locales y "ro%inciales. entrada enlazar ,on la u-,ategorEa ,orre pondiente pero no e ta-lez,a Cada una de e ta

ninguna op,i&n adi,ional en lo panele dere,ho de edi,i&n del *en1. T191.1. =avegue el *en1 uperior 0oticias locales para o- ervar la di2eren,ia de pre enta,i&n entre e te y el ele*ento del *en1 prin,ipal 0oticias. T191.2. Cree un nuevo artE,ulo en el ad*ini trador de artE,ulo titulado Concenos0 no lo a o,ie a ninguna ,ategorEa. # e el te4to u*ini trado y aGada al te4to una i*agen de de el -ot&n uperior J K *ientra la i*agen in2erior 8*agen Jver 2igura <7K. #na vez in ertada ele,,i&nela e intente alinearla a la dere,ha0 de-e pul ar el -ot&n de i*agen de la -arra de herra*ienta e t ele,,ionada en el editor T191.3. )dite el *en1 Ao trar un uperior y enla,e e te nuevo artE,ulo titulando el Ete* de *en1 ,o*o ele,,ionar ele,,ionar el artE,ulo que de ea que e *ue tre0 de-e

WTuienes so!osX. Para ,on eguir en el ,uadro 3ipo de ele*ento del *en1 de-e olo artE,ulo y de puQ ele,,ionar el artE,ulo ,reado anterior*ente titulado Concenos.

-)*

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T191.#. Vi ite la nueva entrada de *en1 y ver que apare,en ante

del te4to dato

,o*o5

,ategorEa0 2e,ha de pu-li,a,i&n0 et,. )n una pgina de pre enta,i&n de e te tipo no de-en apare,er0 edite de nuevo el artE,ulo y ,on2igure e te artE,ulo ,orre,ta*ente *odi2i,ando todo lo que ,rea ne,e ario en lo ,uadro de ,on2igura,i&n dere,ho . T192. 3er*ine de ,on truir el *en1 prin,ipal iguiendo la ta-la 2' teniendo en ,uenta la ,on idera,ione . T192.1. Para el ele*ento del *en1 0oticias 0acionales e utilizar un ,anal e4terno R$$. .,,eda al *en1 Co*ponente U Canale ele,tr&ni,o y ,ree una ,ategorEa de Canales electrnicos ele,tr&ni,o en e ta ,ategorEa -u ,ando en lla*ado 0oticias nacionales. Cree vario ,anale iguiente

peri&di,o de tirada na,ional lo ,anale R$$ di poni-le . T192.2. Para la entrada ,ecnolo6?a de-e ,rear ante dire,,i&n indi,ada en la ta-la. MenC ni9el 1 .ntrada% de ni9el 2 Ti/o 7/cione% CategorEa5 =oti,ia e hija CategorEa5 Provin,iale CategorEa5 =oti,ia na,ionale . u gu to CategorEa5 .,tividade deportiva . u gu to Canal5 http566;;;.giz*odo.e 62eed6ato* un nuevo ,anal ele,tr&ni,o u ando la

=oti,ia de nue tra lo,alidad +or*ato -log =oti,ia =oti,ia Provin,iale =oti,ia =a,ionale Ci t&ri,o .,tividade .,tividade deportiva +e tejo Cultura 3e,nologEa Fpini&n +or*ato -log Canale ele,tr&ni,o .rtE,ulo ar,hivado +or*ato -log . u gu to Ao trar un &lo ,anal ele,tr&ni,o +or*ulario de a,,e o

,abla ;'. Estructura del !enR principal del sitio Web.

).3. 'estor mu#timedia


)l ge tor *ulti*edia irve para al*a,enar di2erente tipo de ar,hivo en el itio He- y utilizarlo en lo ,ontenido del portal. ) te ad*ini trador e t orientado prin,ipal*ente a tra-ajar ,on i*gene 0 aunque intentare*o utilizarlo para enlazar do,u*ento de de pgina He- ,on alguna di2i,ultad. .nterior*ente0 al vi ualiza-an la u-ir la i*gene a la ,ategorEa y artE,ulo apare,i& una ventana donde ,ontenido e en

i*gene

di poni-le . ) te ge tor deja al u uario al*a,enar lo

di2erente ,arpeta para organizar lo ar,hivo y tra-ajar ,&*oda*ente. Ba 1ni,a pe,uliaridad en %oo*la e la u-i,a,i&n He- de lo ,ontenido *ulti*edia0 todo -ajo la ruta i!a6es0 e u-ido e tar de,ir la dire,,i&n -a e e ie*pre -ajo e ta u-i,a,i&n http566;;;.*ido*io.e 6joo*la6i e ala*a,enan lo

http566;;;.*ido*io.e 6joo*la ,ualquier ,ontenido a5e%6. Co*o todo

,ontenido e tn -ajo la ruta i!a6es0 e ta dire,,i&n tendr tre parte 5 J1K i!a6es0 J2K no*-re de la ,arpeta dentro del ge tor *ulti*edia y J'K no*-re del 2i,hero. ) ta parte ,o*o en ,ualquier dire,,i&n

Mdulo 'a 3 Zoo!la

-)+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

He- e eparan por -arra R6S0 quedando la dire,,ione ,o*o http566;;;.*ido*io.e 6joo*la6i*age 6*i,arpeta6*i2oto.jpg. T193. =avegue a la pgina prin,ipal de ad*ini tra,i&n de %oo*la u ando el enla,e .d*ini tra,i&n ituado en,i*a de lo *en1 y en la ,uadrE,ula de i,ono e ,oja @e tor *ulti*edia. T193.1. Cree una nueva ,arpeta en el ge tor *ulti*edia lla*ada li-ro . $u-a en la nueva ,arpeta lo do li-ro en 2or*ato P9+ que en,ontrar ,on el *aterial del *&dulo. T193.2. .hora intente u-ir do li-ro en 2or*ato )P#L que ta*-iQn e tn entre el *aterial del *&dulo. F,urrir un error al no e tar per*itido e te 2or*ato en el ad*ini trador *ulti*edia. T193.3. #tili,e el -ot&n Fp,ione del ge tor *ulti*edia y aGada la e4ten i&n epub eparada por ,o*a en la li ta de e4ten ione per*itida . .de* a,tive la ,a illa Ca-ilitar la u-ida en 2la h0 al guardar lo ,a*-io pro-a-le*ente tenga que aGadir un ,o*ple*ento a +ire2o4. T193.#. Con e te nuevo ,o*ple*ento podr u-a lo do ar,hivo )P#L re tante . T193.(. Cree un nuevo artE,ulo titulado Libros reco!endados ,on lo tEtulo de lo ,uatro li-ro en una li ta de -olo 0 puede utilizar lo te4to preparado . $ele,,ione uno de lo te4to y pul e el -ot&n de enla,e y apare,er una ventana oli,itando la dire,,i&n del enla,e ,o*o la de la 2igura >00 2Eje e en la 2igura la ruta e ta-le,ida para uno de lo li-ro . T193.+. @uarde lo ,a*-io enla,e el ele*ento de *en1 Cultura a e te artE,ulo. Co*prue-e i el enla,e 2un,iona y ter*ine la edi,i&n del artE,ulo enlazando lo re tante li-ro . u-ir vario ar,hivo i*ultnea*ente a %oo*la0

9ire,,i&n 9ire,,i&n del del enla,e enla,e

Lot&n Lot&n de de enla,e enla,e 3e4to 3e4to ele,,ionado ele,,ionado

i6ura *2. Insertar enlace a arc.i%o interno desde el editor inte6rado.

5+ <&e,e!#a"i4! de "o!#e!ido,
Ba di po i,i&n y el a pe,to de lo ,ontenido en %oo*la e tn Enti*a*ente rela,ionado . Co*o en otro la pre enta,i&n e e ta-le,e *ediante plantilla J in&ni*o de te*a en otro CA$K y e ta

-)K

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

plantilla deter*inan la regione e4i tente para u-i,ar ,ontenido en la pgina He-. Bo do ,on,epto prin,ipale para ,on eguir ,on2igurar la pre enta,i&n de un itio He- ,on %oo*la on lo *&dulo y la plantilla .

,.1. 4dministraci2n de m2du#os


#n *&dulo en %oo*la ,orre ponde a un -loque de ,ontenido0 no e de-e ,on2undir ,on un ,o*ple T *ento0 en otro CA$ e lla*a *&dulo a ,o*ponente que aGaden 2un,ionalidad al itio He-. %oo*la trae di2erente tipo de *&dulo a,tivo eg1n la in2or*a,i&n que *ue tran5 *&dulo para *en1 0 para e pueden tener vario *&dulo

vota,ione 0 pu-li,idad0 noti,ia 0 et,. Para un *i *o tipo de *&dulo di2erente e,,ione .

i*ultnea*ente0 por eje*plo0 pode*o tener do en,ue ta a,tiva *o trndo e ,ada una en

3ra la in tala,i&n del portal tene*o *u,ho *&dulo a,tivo 0 ,ada uno de lo -loque e4i tente en la pgina prin,ipal e un *&dulo. 3anto %oo*la ,o*o la *ayorEa de lo CA$ dividen la pgina en regio T ne ,on un no*-re a ignado. )n la 2igura >1 e *ue tra la u-i,a,i&n y lo no*-re de la di2erente regione .

-u ,ar

BF@F

uperior ruta de navega,i&n uperior",entral uperior izquierda uperior dere,ha

,entral izquierda CF=3)=89F

,entral dere,ha

in2erior izquierda

in2erior dere,ha

pie uperior

pie ,entral 1lti*o pie de pgina

pie in2erior

i6ura *-. 7e6iones disponibles en las pA6inas de Zoo!la.

Mdulo 'a 3 Zoo!la

-)L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

) ta regione dependen del te*a6plantilla que e e tQ utilizando y para 2a,ilitar u u o %oo*la tiene una op,i&n para *o trar al di eGador la po i,ione de la regione T19#. =avegue al *en1 de ad*ini tra,i&n )4ten ione uperpue ta al itio He-. U @e tor de plantilla . # e el -ot&n

Fp,ione para ha-ilitar Previ ualizar la po i,i&n de lo *&dulo y guarde lo ,a*-io . T19#.1. =avegue a la pgina ini,ial de u itio He- y aGada a la #RB del navegador Wtpa10 u #RB quedarEa a E http566lo,alho t6joo*la6Wtpa1. Re,argue la pgina y o- erve la ,orre ponden,ia ,on la po i,ione de la 2igura >1. 3anto el ,o*porta*iento ,o*o el a pe,to de lo *&dulo ad*iten *ultitud de op,ione de

,on2igura,i&n. Bo prin,ipale a pe,to a ,on iderar on lo

iguiente 5

. igna,i&n de *en15 Bo *&dulo pueden apare,er en toda la pgina o &lo en alguna . Para ello e puede a o,iar *anual*ente un *&dulo a lo ele*ento de *en1 de eado 0 ,uando e a,,eda a e o ele*ento de *en1 apare,er el *&dulo. Po i,i&n y orden5 Regi&n donde pre ente en la *i *a regi&n. 3ipo de *&dulo5 Cada tipo de *&dulo ,on2igura,ione ,ontenido di2erente . Para ,o*poner pgina no e ne,e ario di poner de *u,ho tipo de *&dulo di2erente . Prin,ipal*ente e de-e a que ,ada tipo de *&dulo puede in tan,iar e varia ve,e 0 y ,ada in tan,ia0 per*ite *u,ha variedad en u ,on2igura,i&n. $e ,on2igurarn a ,ontinua,i&n di2erente e que*a de la 2igura >1 y ,on2igurando lo alguno *&dulo requiere pa o adi,ionale tipo de *&dulo para ,on eguir una di tri-u,i&n y una en el en la ta-la 2:. Ba ,on2igura,i&n de e re,o*ienda eguir lo e puede poner *1ltiple ve,e 0 ha,iendo di2erente regione y6o pgina ,on e u-i,ar el *&dulo y orden re pe,to al re to de *&dulo

e ,on igue u ar un *i *o *&dulo en di2erente

pre enta,i&n ,o*o la de la 2igura >2. $e ,on eguir u ando el ge tor de *&dulo 0 -a ndono *&dulo *o trado no ,onte*plado en la ta-la0

iguiente pa o y utilizar di,ha ta-la ,o*o apoyo. T19(. .,,eda al *en1 de ad*ini tra,i&n )4ten ione U .d*ini trador de *&dulo . $e ,on2igurarn todo lo *&dulo de la ta-la 2: iguiendo lo pa o indi,ado . # e la po i,ione y ,on2igura,i&n indi,ada en la ta-la para ,ada *&dulo0 y en ,ada pa o vi uali,e el itio He- para ver el re ultado. T19(.1. )n el li tado de *&dulo *ande a la papelera todo lo *&dulo *eno lo re,o*ienda a,,eder a la papelera y -orrarlo uperiore para li tar la papelera. T19(.2. Con2igure el *&dulo que *ue tra *en1 uperior horizontal0 el *en1 prin,ipal y el de2initiva*ente. # e lo 2iltro de lo iguiente 5 e ,uadro

,op0 $ser !enu0 Menu principal y Breadcru!bs. Por ,o*odidad a la hora de tra-ajar

,uadro -u ,ar u-i,ndolo en la po i,ione indi,ada en la ta-la 2:. Para que aparez,a en toda la pgina de-e ele,,ionar en el ,uadro de . igna,i&n de Aen1 la op,i&n )n toda la pgina .

-*2

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T19(.3. .Gada un nuevo *&dulo del tipo 8*agen .leatoria lla*ado Cabeceras. 9e de el ge tor *ulti*edia ,ree una nueva ,arpeta lla*ada cabeceras y u-a a %oo*la la i*gene 2:. T19(.#. Para ,rear una li ta de enla,e a organi *o o2i,iale a,,eda al *en1 Co*ponente U )nla,e He-. Cree una ,ategorEa lla*ada Cr6anis!os o4iciales y aGada alguno enla,e en e ta ,ategorEa. .hora ya puede ,rear el *&dulo Cr6anis!os y a ignar la ,ategorEa re,iQn ,reada. T19(.(. $iguiendo la ta-la ahora aGada el *&dulo :istrico del tipo .rtE,ulo ar,hivado . ) te *&dulo olo de-e *o trar e en la pgina de noti,ia e hijo 0 por tanto0 a eg1re e que en la pgina prin,ipal no apare,e. T19(.+. )l *&dulo Mcti%idades *ue tra la noti,ia de una deter*inada e,,i&n0 pero *ue tra tanto el ,ontenido ,o*o la i*gene . Para pro-arlo de-e aGadir un artE,ulo en la ,ategorEa acti%idades0 u e el te4to preparado de la ,arrera popular y aGada a di,ho te4to la i*agen articulo3 carrera.9p6 de de el editor de te4to del artE,ulo. T19(.). Para el -loque InterUs utili,e el ,&digo C3AB preparado en el 2i,hero de te4to y aGada ,on el ge tor *ulti*edia la ,uatro i*gene 5 icono3a1nta!iento.pn60 icono34ar!acia.pn60 icono3 policia.pn6 e icono3ur6encias.pn6. T19(.-. )l *&dulo Mnuncios requiere ,on2igura,i&n adi,ional de de el *en1 Co*ponente .nun,io . ) te ,o*ponente e aGada do anun,io ,o*plejo en e ta ,ategorEa ,uya i*gene U cabecera3 aleatoria3-.9p6 y cabecera3aleatoria3;.9p6. ) ta-lez,a la Fp,ione - i,a indi,ada en la ta-la

&lo ,ree una ,ategorEa lla*ada Mnuncios Locales y ean anuncio34rutas.pn6 y anuncio3

taller.pn6. .hora aGada el *&dulo y e ta-lez,a la ,on2igura,i&n para que *ue tre e to anun,io . T19(.9. ) ta-lez,a un pie de pgina en la regi&n ade,uada y del tipo ade,uado donde ponga u no*-re y apellido . .le ento de referencia < 7/cione%

PD5ina% 3oda 3oda 3oda 3oda 3oda 3oda 3oda =oti,ia e hijo Cultura e hijo Ci t&ri,o

:o

bre

Ti/o de Aen1 Aen1

dulo

Po%icin Po ition"0 Po ition"( Po ition"0 Po tion"2 Po ition"1< Po ition"11 Po ition"7 Po ition"D Po ition"> Po ition"D

Aenu uperior Aenu prin,ipal Lu ,ar Lread,ru*Ca-e,era Frgani *o ) tadE ti,a Ci t&ri,o

Aen1 3op Aen1 prin,ipale =o pro,ede . u gu to 9ir5 i*age 6,a-e,era 3a*aGo5 7D( 4 100 CategorEa5 Frgani *o p1-li,o . u gu to =o pro,ede http5662eed .2eed-urner.,o* 6.ndroid.yuda . u gu to

Ca*po -1 queda Ruta de navega,i&n 8*agen aleatoria )nla,e He) tadE ti,a .rtE,ulo ar,hivado

Canal .ndroid Canale ele,tr&ni,o CategorEa CategorEa de

Mdulo 'a 3 Zoo!la

-*-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

PD5ina%

:o

bre

Ti/o de artE,ulo

dulo

Po%icin

.le

ento de referencia < 7/cione%

8ni,io 8ni,io 8ni,io 8ni,io0 =oti,ia e hijo 8ni,io 8ni,io

Bo *a vi to .,tividade 9e interQ .nun,io R$$ VEdeo

Bo * populare .rtE,ulo " =oti,ia de a,tualidad C3AB per onlaizado A&dulo de anun,io $indi,a,i&n del itio #RB e*-e-ida

Po ition"D Po ition"' Po ition"( Po ition"D

3oda la ,ategorEa CategorEa5 .,tividade Ao trar 8*gene 5 $E Beer 317<.(. CategorEa5 .nun,io lo,ale Beer 317<.D.

yndi,ateload =o pro,ede Po ition"10 #RB5 http566;;;.youtu-e.,o*6e* -ed6v-2eF-v*vd8 .n,ho5 200

,abla ;(. Mdulos8 ubicacin 1 con4i6uracin para la pA6ina de e9e!plo.

,.2. P#anti##as
) en,ial*ente la CA$ e tudiado . Ba plantilla ,ontrolan el a pe,to vi ual del itio He- en u totalidad. #na plantilla en %oo*la e t plantilla en %oo*la on un *e,ani *o utilizado para eparar el ,ontenido del

portal de la pre enta,i&n. ) un *odelo de di eGo *uy utilizado y vi to ,on anterioridad en todo lo

2or*ada por do parte di2eren,iada 5 la hoja de e tilo y el ,&digo de la plantilla JPCP?ZC3ABK. ) ta ,o*-ina,i&n ha,e po i-le ,a*-iar la pre enta,i&n y la di po i,i&n de lo -loque de ,ontenido en la pgina. .de* 0 e po i-le ,a*-iar el a pe,to de todo el portal o de parte0 una ,ara,terE ti,a de %oo*la e la po i-ilidad de a ignar di2erente plantilla a ,ada e,,i&n del *en1 del portal. Realizare*o alguna prue-a ,on la plantilla in,luida en la in tala,i&n de %oo*la ante de ,rear nueva plantilla o de ,argar alguna de 8nternet. T19+. )n el *en1 de ad*ini tra,i&n )4ten ione a,,eda al @e tor de plantilla . T19+.1. # e la pe taGa Plantilla para o-tener vi ta previa y u ando la plantilla Mto!ic utili,e el -ot&n Previ ualizar para ver el a pe,to de u portal ,on e ta plantilla. T19+.2. Co*prue-e ,o*o la Co*o la regione lo *&dulo de u itio HeT19+.3. Vuelva a la edi,i&n de la plantilla y a igne e ta plantilla a la entrada del *en1 Hona interna. Co*prue-e navegando el portal el ,a*-io de a pe,to auto*ti,o al entrar en e ta e,,i&n del *en1. )ntre la op,ione e4i tente en la edi,i&n de la plantilla e tn do -otone 5 )ditar C3AB y )ditar C$$. u-i,a,ione *o trada en la 2igura >1 apare,en uperpue ta .

on e ta-le,ida por la plantilla de ,ada te*a ver ,o*o ha perdido parte de

-*;

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Con ello

e puede editar de de el navegador lo e tilo y la di po i,i&n del ,ontenido en la pgina . Ba plantilla e a,,eder

edi,i&n de una plantilla en el navegador re ulta tedio a0 real*ente e tn pen ada para poder realizar alg1n ,a*-io *enor de de el ad*ini trador. Para *odi2i,ar o di eGar nueva dire,ta*ente a lo 2i,hero del di ,o y a E e tra-ajar ,on *ayor ,o*odidad.

i6ura *;. Co!posicin de la pA6ina principal !ediante !dulos.

Mdulo 'a 3 Zoo!la

-*'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,.3. "reaci2n de una #anti##as


)n O<1P e puede de ,argar un e4,elente *anual donde e e4pli,a detallada*ente e te pro,e o. $e realizar un pro,e o de ,lona,i&n de una e4i tente para ha,er alguna inta,ta la ,opia de la original. .nte de ,o*enzar la ,rea,i&n de la nueva plantilla e de-e tener el itio relleno de ,ontenido y ,on vario *&dulo u-i,ado para poder ver lo ,a*-io ya preparada en lo eg1n e reali,en. $i en la e,,ione anteriore no ter*in& de ,on2igurar lo *&dulo y de introdu,ir ,ontenido e re,o*ienda to*ar la ,opia del pro2e or 2i,hero 5 9oo!la3pro4esor./ip y 9oo!laIpro4esor.sBl./ip. Para utilizar e ta ,opia puede altar a la e,,i&n (.1 para ,on ultar el pro,e o de ,lona,i&n del itio. #na vez ,lonado el itio del pro2e or o u ando u propio itio reali,e lo iguiente pa o para ,rear un *odi2i,a,ione *anteniendo

nuevo te*a. )n la *ayorEa de lo ,a o e ,ogiendo una plantilla que no agrade vi ual*ente0 -a ta ,on alterar ,onveniente*ente lo e tilo de la plantilla ha ta ,on eguir el a pe,to de eado. T19). .,,eda en u di ,o al dire,torio dentro de 555 donde tiene lo 2i,hero ,on la in tala,i&n de %oo*la. )ntre en la ,arpeta te!plates y ver varia u-,arpeta 5 bee/)0 bee/;28 ato!ic8 s1ste!0 et,.

T19).1. Copie la ,arpeta bee/) en alguna ,arpeta 2uera de H.AP y reno*-re la ,opia a cursoc!s. T19).2. )ntre en la ,arpeta cursoc!s y ,on el editor 0otepadEE edite el 2i,hero

te!plateDetails.@!l *odi2i,ando lo indi,ado en el iguiente ,&digo5


Gname5:urso :64G/name5 Gcreation0ate510 dune 2011G/creation0ate5 Gauthor5Eo mismoG/author5 Gauthor8mail5,o@,o.esG/author8mail5 GauthorMrl5http://www.dte.us.esG/authorMrl5 Gcop,right5G/cop,right5 Glicense5R;M/R"@G/license5 G2ersion52.&.0G/2ersion5 Gdescription5"lantilla de prue3as para el curso *M1G/description5 ... Glanguages folder>VlanguageV5 Glanguage tag>Ven.RHV5en.RH/en.RH.tplScursocms.iniG/language5 Glanguage tag>Ven.RHV5en.RH/en.RH.tplScursocms.s,s.iniG/language5 G/languages5 Cdi6o (*. Ca!bios en te!plateDetails.@!l para co!en/ar una nue%a plantilla.

T19).3. 9e-e -u ,ar do ar,hivo .ini language U en"@L y ,a*-iarle el no*-re a lo no*-re indi,ado en el ,&digo :>. T19).#. #na vez ter*inado lo ,a*-io de-e ,o*pri*ir la ,arpeta del nuevo te*a en 2or*ato M8P0 de-erEa quedar un 2i,hero ,on no*-re cursoc!s./ip. T19).(. .,,eda al @e tor de e4ten ione de %oo*la0 de de la pe taGa 8n talar u-a el 2i,hero M8P. 9e puQ de de el @e tor de Plantilla a,tive el nuevo te*a re,iQn ,reado e ta-le,iQndolo ,o*o predeter*inado. $i o- erva que la ,olu*na izquierda no e t u-i,ada ,orre,ta*ente edite la

-*(

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

propiedade de la plantilla y ,a*-ie la op,i&n Po ition o2 =avigation. T19).+. 9e de la ,on2igura,i&n de la plantilla ,a*-ie el logotipo del nuevo te*a u ando el 2i,hero lo6otipo.pn6. . partir de aquE e editarn lo 2i,hero dire,ta*ente en la nueva ,arpeta ,reada que ,ontiene la planT tilla. Para ,o*enzar a tra-ajar de-e ,ono,er que la plantilla ,ontienen un 2i,hero PCP donde e de2ine la e tru,tura C3AB de la pgina y e u-i,an lo -loque de ,ontenido de %oo*la. ) te 2i,hero utiliza de,lara,ione deno*inada %9FC para u-i,ar ,ontenido. ) ta enten,ia tienen e ta inta4i 5
Gjdoc:include t,pe>VmodulesV name>V;KMH=8SMK0M@KV st,le>V81?6@KV /50 donde 0CMB7EIMCD$LC ha,e

re2eren,ia al *&dulo a *o trar y ES,ILC al tipo de 2or*ato u ado al pre entar el *&dulo. Puede ver lo iguiente eje*plo .
Gjdoc:include Gjdoc:include Gjdoc:include Gjdoc:include Gjdoc:include Gjdoc:include t,pe>UmodulesU t,pe>UmodulesU t,pe>UmodulesU t,pe>UmodulesU t,pe>UmodulesU t,pe>UmodulesU name>UleftU st,le>UroundedU /5 name>UrightU st,le>U4htmlU /5 name>UtitleU /5 name>UtopU /5 name>Uuser1e st,le>U4htmlU /5 name>Uuser3e /5

Cdi6o (+. E9e!plos de sentencias ZDCC.

T19-. )dite ,on 0otepadEE el 2i,hero inde@.p.p de la nueva plantilla. T19-.1. Lu que la enten,ia %9FC para ,o*pro-ar la po i,ione en el ,&digo C3AB.

T19-.2. 8ntente ,a*-iar la u-i,a,i&n de la enten,ia %9FC que ha,e re2eren,ia a alguna po i,i&n de un *&dulo Jposition3@K. 8ntente ,olo,arla en la parte uperior del di eGo C3AB. $i no tiene ,ono,i*iento de C3AB0 en,ontrar di2i,ultade 0 o-vie e ta tarea. Para realizar lo ,a*-io en la hoja de e tilo hay do op,ione 0 ,a*-iar la hoja e4i tente o ,rear una nueva hoja C$$ a igndole *ayor prioridad. )n C$$ la olu,i&n. T199. )ntre en la ,arpeta del nuevo te*a0 edite el 2i,hero inde@.p.p y -u que la zona donde aparez,an la hoja de e tilo J-u que GlinX rel>Vst,lesheetV b K. T199.1. 9e-e aGadir una ,opia de una etiqueta GlinX
b /5 en 1lti*o lugar para que tenga

1lti*a

regla

que apare,en on la

de

*ayor prioridad0 ha-rEa que aGadir una nueva tra toda la e4i tente y e opta ha-itual*ente por e ta

*ayor prioridad y ha,iendo re2eren,ia al 2i,hero cursoc!s.css. ) te 2i,hero :D.


GlinX rel>Vst,lesheetV href>VG^php echo _this.53aseurl ^ 5/templates/s,stem/css/s,stem.cssV t,pe>Vte4t/cssV /5

e ,rear

po terior*ente0 la inta4i C3AB quedarEa ,o*o e *ue tra en la 1lti*a etiqueta lin< del ,&digo

GlinX rel>Vst,lesheetV href>VG^php echo _this.53aseurl ^5/templates/G^php echo _this.5templateO ^5/css/position.cssV t,pe>Vte4t/cssV media>VscreenBprojectionV /5 GlinX rel>Vst,lesheetV href>VG^php echo _this.53aseurl ^5/templates/G^php echo _this.5templateO ^5/css/la,out.cssV t,pe>Vte4t/cssV media>VscreenBprojectionV /5 GlinX rel>Vst,lesheetV href>VG^php echo _this.53aseurl ^5/templates/G^php echo

Mdulo 'a 3 Zoo!la

-*)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa _this.5templateO ^5/css/print.cssV t,pe>Vte4t/cssV media>V"rintV /5 GlinX rel>Vst,lesheetV href>VG^php echo _this.53aseurl ^5/templates/G^php echo _this.5templateO ^5/css/3eeL&.cssV t,pe>Vte4t/cssV /5 GlinX rel>Vst,lesheetV href>VG^php echo _this.53aseurl ^5/templates/G^php echo _this.5templateO ^5/css/cursocms.cssV t,pe>Vte4t/cssV /5 Cdi6o (K. Ca!bios en inde@.p.p para aadir una nue%a .o9a de estilos prioritaria.

T199.2. .Gada la 1lti*a lEnea del ,&digo :D al 2i,hero inde@.p.p de 2i,hero va,Eo ,on =otepad?? y gurdelo en la ,arpeta C$$ de cursoc!s.css.

u te*a0 ,ree un nuevo

u nuevo te*a ,on el no*-re

T199.3. .Gada una regla en e te nuevo 2i,hero ,o*o la iguiente5 p Wcolor:redOY0 i la hoja de e tilo e t 2un,ionando0 ,uando re,argue la pgina de u itio lo te4to e pondrn en rojo.

)l o-jetivo del re to de e ta e,,i&n e ,on eguir el a pe,to lo * pare,ido a la 2igura >' u ando la ta-la 2< ,o*o ayuda para en,ontrar lo ele,tore ,on +ire-ug. $iga la indi,a,ione para no perder e. y

T211. 9e-e tra-ajar ,on +ire-ug y =otepad?? aGadiendo regla 0 guardando la hoja de e tilo re,argando la pgina en el navegador en ,ada ,a*-io para ver lo e2e,to .

T211.1. Pri*ero aGada do tipogra2Ea ,opiando lo do 2i,hero ,on tipogra2Ea in,luida ,on el *aterial del *&dulo a la ,arpeta 2ont del nuevo te*a. $iguiendo el eje*plo de ,&digo :7 de-e aGadir una egunda tipogra2Ea lla*ada Sabatica re2eren,iando el 2i,hero Sabatica3re6ular.ot4
@font.face W font.famil,: Q=uraQO src: url)Q../fonts/=ura->ook.ttfQ+ format)Qtruet,peQ+O font.weight: normalO font.st,le: normalO Y Cdi6o (L. Madir nue%a tipo6ra4?a Web en CSS.

T211.2. #tilizando el navegador He- u e el *en1 .r,hivo U .-rir ar,hivo y de lo re,ur o de e te *&dulo a-ra la i*agen captura3plantilla.pn6. .hora ,on Color/illa ,apture lo ,olore de la *ue tra del te*a" Selector<e% -ody V$ele,torW _all _header V$ele,torW 7b8eti9o +a*ilia de tipogra2Ea Sabatica. Bea 3200.1. 3odo lo prra2o ,on un alto de lEnea de 1.1e* )nvoltura de %oo*la para toda la pgina5 Cay que ,entrar la pgina *ediante margin.left:autoO , margin.right:autoO .n,ho igual que el de la i*gene de la ,a-e,era )nvoltura para toda la ,a-e,era0 -1 quelo ,on 2ire-ug y no aGada nada Bogotipo 2lotante a la izquierda ,on un *argen alrededor de 10p4 di2erente

-**

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Selector<e%

7b8eti9o )nvoltura del *en1 horizontal uperior0 e ,o*plejo de ,ontrolar5 .Gada position:relati2eO para que no 2lote de *anera e4traGa # e ,olorzilla para ,apturar el ,olor de 2ondo y e ta-lQz,alo. Bea 3200.2. ) ta-lez,a el an,ho y *rgene para que ,oin,ida ,on la i*agen de la ,a-e,era 9e-e e tar pegado verti,al*ente a la i*agen0 intente eli*inar el hue,o -lan,o0 ne,e itar en,ontrar ,on +ire-ug un nuevo ele,tor. ) to ele,tore ,ontrolan el *odelo de ,aja . 8ndeti2Equelo en +ire-ug y5 Ba ,olu*na izquierda tiene ,olor de 2ondo verde0 la dere,ha gri +uer,e una deter*inada altura en la ,olu*na izquierda Aini*i,e lo hue,o entre ,olu*na ,on *argin y padding Ba ,olu*na izquierda e t pegada a la izquierda de la pgina J in *argenK Ca-e,era del *en1 de navega,i&n5 3ipogra2Ea a $a-ati,a Capture lo ,olore de 2ondo y de la tipogra2Ea Ponga o*-ra al te4to ,on5 te4t.shadow: 2p4 2p4 2p4 [000000O ) ta-lez,a la propiedade *argin y padding ade,uada )l ,olor del te4to de lo enla,e del *en1 de navega,i&n de-e ponerlo en -lan,o Ba epara,i&n entre ,ada ele*ento del *en1 de-e redu,ir e Caja para ,ada *&dulo de la parte izquierda5 .u*ente el hue,o entre ello ) ta-lez,a un -orde de epara,i&n in2erior -lan,o y de an,ho vi i-le. Ca-e,era de lo *&dulo de la ,olu*na dere,ha5 .u*ente el ta*aGo de la 2uente al *eno al 1<0c Ponga o*-ra a e te te4to ,on te4t.shadow: 2p4 2p4 2p4 [888888O %uegue ,on lo valore de te@t3s.ado5 para ,o*pro-ar el e2e,to. Ca-e,era de la noti,ia de la ,olu*na ,entral5 ) ta-lez,a la 2uente a Zura .ju te un *ayor ta*aGo de 2uente # e el ,olor to*ndolo de la i*agen de re2eren,ia .linee lo enla,e Beer *a a la dere,ha 8*gene de la noti,ia de la pgina de ini,io. Con iga un e2e,to *ar,o apli,ando e to atri-uto 5 3order: solid 1p4O padding:2p4O ) el ,ontenido del *&dulo De interUs0 de-e elegir de a ,ual de lo do ele,tore indi,ado apli,a ,ada una de e ta propiedade 5 .linee verti,al*ente el te4to a la i*agen al ,entro ) ta-lez,a un ,olor de 2ondo y *argene ade,uado .plique e2e,to de o*-ra ,on 3o4.shadow: &p4 &p4 2p4 [888888O
,abla ;). Selectores i!plicados en el te!a Curso CMS.

_header ul.*enu

_,ontentarea _,ontentarea2 .le2t1 _right

_nav h'

V$ele,torW V$ele,torW _nav .*oduleta-le

_right h'

V$ele,tor6e W

V$ele,torW V$ele,torW

.intere .intere i*g

Mdulo 'a 3 Zoo!la

-*+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura *'. Mspecto del nue%o subte!a.

:+ Ad-i!i,#&a"i4! ava!3ada
Para 2inalizar el *&dulo e tratarn alguno a pe,to avanzado de la ad*ini tra,i&n del itio He,o*o on la ge ti&n de u uario 0 ,o*ple*ento y alguno ,o*ponente in,luido ,on %oo*la no tratado anterior*ente.

..1. "#onaci2n de# sitio


Ba ,lona,i&n del itio e realiza *ediante la tQ,ni,a ha-itual *o trada en CA$ anteriore ,on i tente en ,opiar lo 2i,hero y ,lonar la -a e de dato . $eguida*ente e realizan alguna ,on idera,ione . T211. Copie todo lo 2i,hero de %oo*la en una nueva ,arpeta y e4traiga la -a e de dato en un

-*K

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

2i,hero $IB. )n la nueva ,opia edite el 2i,hero con4i6uration.p.p y e ta-lez,a ,orre,ta*ente lo interroga,i&n.
... pu3lic pu3lic pu3lic pu3lic pu3lic _host > QlocalhostQO _user > Q;;;QO _password > Q;;;QO _d3 > Q;;;QO _d3prefi4 > Qn*hsr5QO

ituado en la raEz de %oo*la lla*ado valore indi,ado en el ,&digo <0 ,on

...

pu3lic _logSpath > Q*://wamp//www??;;;/logsQO pu3lic _tmpSpath > Q*://wamp//www??;;;/tmpQO Cdi6o )2. Madir nue%a tipo6ra4?a Web en CSS.

..2. 4dministraci2n de usuarios


)n un portal He- ,on ,ierto volu*en de in2or*a,i&n la ge ti&n u uario . #na ,on2igura,i&n tEpi,a ,on i te en delegar la Ca-itual*ente e to u uario repre entan per ona 2E i,a di2erente *ientra uele di tri-uir e entre vario e,,ione lo grupo a u uario o grupo . uelen repre entar

departa*ento o grupo de la organiza,i&n. ) te tipo de ge ti&n e -a a en la rela,i&n e4i tente entre u uario0 grupo y per*i o. Ba rela,i&n ha-itual ,on i te en a ignar per*i o a grupo y agrupar u uario en grupo . %oo*la no tiene *odelo de per*i o *uy 2le4i-le en ,o*para,i&n ,on otro CA$ pero ,u-re una gran parte de la ,on2igura,ione tEpi,a de itio He-. Ba ge ti&n de u uario y per*i o en e te CA$ e t dividida en5 u uario 0 grupo de u uario y nivele de a,,e o. Bo per*i o e pueden apli,ar a lo ,ontenido 0 a lo ele*ento de *en10 *&dulo et,. )4i ten *ultitud de po i-le ,on2igura,ione de per*i o para el itio0 &lo e realizar un eje*plo

i*ple re,orriendo la ad*ini tra,i&n de u uario para ,ono,er la op,ione di poni-le . T212. .,,eda al *en1 de ad*ini tra,i&n # uario U @e tor de u uario . T212.1. Cree un grupo lla*ado 7eporteros locales ,uyo grupo padre ea 7e6istered y ,ree un nivel de a,,e o lla*ado 7eportero local a ignando a e te nivel de a,,e o el grupo 7eporteros locales. T212.2. )n el ad*ini trador de *&dulo ,ree un *&dulo en una u-i,a,i&n ade,uada que *ue tre el *en1 $ser Menu. .d*ini tre e te *en1 y edite el ele*ento $u-*it an .rti,le e ta-le,iendo .,,e o a Reportero Bo,al. T212.3. )dite la ,ategorEa de artE,ulo 0oticias locales y a igne todo lo per*i o a 7eporteros locales. T212.#. .hora ,ree un nuevo u uario y aGdalo a lo grupo 7e6istered y 7eporteros locales. T212.(. 9e de el *en1 prin,ipal ,ree una pgina donde e oli,iten lo dato de entrada al

u uario. Puede u ar el ele*ento de *en1 Hona Interna y u-i,ar un *&dulo o pgina para el ini,io

Mdulo 'a 3 Zoo!la

-*L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

de e i&n de u uario. T212.+. )ntre ,on el nuevo u uario u ando la pgina anterior y una vez identi2i,ado0 de-erEa apare,er el *en1 de u uario ,on un enla,e para ,rear un artE,ulo0 pero olo en la ,ategorEa para la que tiene per*i o .

..3. "om #ementos


Bo ,o*ple*ento aGaden 2un,ionalidad e4tra al itio %oo*la. #n ,o*ple*ento puede aGadir uno o vario ,o*ponente al portal ,o*o pueden e li tan toda er *&dulo 0 editore 0 utilidade 0 e tadE ti,a 0 et,. Para ituado en el *en1 E@tensiones. )n el di poni-le en el portal0 pero no tienen la e4ten ione ad*ini trarla e t en el ad*ini trador de e4ten ione

ad*ini trador de e4ten ione podrEa perder parte del portal.

porque e tar a,tiva . $e re,o*ienda no de a,tivar ninguna in a-er a que parte de %oo*la pertene,e0

)n la pgina o2i,ial de %oo*la hay un enla,e en lo *en1 titulado E@tends donde e a,,ede dire,taT *ente a la dire,,i&n indi,ada en O<2P y apare,e un li tado organizado en ,ategorEa ,on la e4ten ione di poni-le . Puede ,o*pro-ar la ,antidad de e4ten ione ,o*entario e in tru,,ione ante de de ,argar ninguna. Para realizar prue-a e u ar una e4ten i&n en,argada de pre entar y organizar galerEa de i*gene e4i tente 0 pero no toda 2un,ionan ,orre,ta*ente ni e tn di poni-le para la ver i&n que tenga*o in talada de %oo*la. Co*prue-e lo

previa*ente te tada para veri2i,ar el ,orre,to 2un,iona*iento. T213. .,,eda al *en1 de ad*ini tra,i&n )4ten ione 8n talar. T213.1. $ele,,ione el 2i,hero p<6Id9i!a6esliderI-.'.-.stableIZ;.)./ip y pul e o-re el -ot&n $u-ir e 8n talar. .pare,ern un te4to indi,ado lo ,o*ponente in talado en u portal. T213.2. =avegue a la pe taGa @e tionar0 li te toda la e4ten ione y -u que 9%"8*age$lider U @e tor de )4ten ione y u e pe taGa

apare,er varia ve,e indi,ando lo ,o*ponente in talado . T213.3. .nte de tra-ajar ,on el nuevo ,o*ponente u-ire*o alguna i*gene de prue-a.

.,,eda al ge tor *ulti*edia y ,ree una ,arpeta lla*ada 4otos8 en e ta nueva ,arpeta u-a la ' i*gene de eje*plo lla*ada slider3-.9p60 slider3;.9p6 y slider3'.9p6. T213.#. .,,eda al *en1 de ad*ini tra,i&n )4ten ione U @e tor de *&dulo y aGada un nuevo *&dulo del tipo 9%"8*age$lider u-i,ado en la ,olu*na izquierda Jpo ition"<K. ) ta-lez,a e ta op,ione 5 $lider our,e U +older0 $lider type U Corizontal0 8*age +older U i*age 62oto 0 $lide Hidth U 1D< y $lide Ceight U 1'7. @uarde lo ,a*-io . T213.(. =avegue a u pgina prin,ipal y vea el re ultado.

-+2

Mdulo 'a 3 Zoo!la

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

..4. (&s com onentes


$i e o- erva el *en1 de ,o*ponente de %oo*la0 ade* de lo pro-ado en la e,,ione anteriore

e4i ten * . =o e ,on idera ne,e ario de ,ri-ir la 2un,ionalidad de ,ada uno de ello ya que todo ello e -a an en *&dulo 0 ele*ento de *en1 y otra ,ara,terE ti,a ya e tudiada . $i e re,o*ienda que reali,e alguna prue-a ,on lo indi,ado a ,ontinua,i&n5 T21#. Prue-e el ge tor de ,onta,to . T21(. Prue-e la *en ajerEa. T21+. Prue-e la nota de u uario.

Mdulo 'a 3 Zoo!la

-+-

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo .* % D&u/al
Portales +eb basados en 0rupal

1+ Re,u-e!
9ura,i&n e ti*ada5 ' hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero drupal"(.1:.zip drupal"(.1'.e .po *tp"(.4"1.4"dev.zip ;y i;yg"(.4"2.1.zip tiny*,eN'.<.2.zip re,ur o "drupal.zip 3e%cri/cin 8n tala,i&n de 9rupal (.2 $oporte de e paGol para 9rupal $oporte $A3P ,on autenti,a,i&n $oporte para editore enrique,ido Ver i&n original de 3inyAC) 3e4to y gr2i,o preparado para en e te *&dulo

openpu-li,"(.4"1.0"-etaD",ore.zip 9i tri-u,i&n de eje*plo de 9rupal opendeal "(.4"1.0"-eta11",ore.zip 9i tri-u,i&n de 9rupal


,abla ;*. ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O<'P He- F2i,ial de 9rupal0 <http566drupal.org6!. O<:P He- de 9rupal Ci pano0 <http566;;;.drupal.org.e 6!. O<<P Hhite Cou e0 <http566;;;.;hitehou e.gov6!. O<>P He- o2i,ial de 3inyAC)0 <http566tiny*,e.*o4ie,ode.,o*6!.

Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

.+ I!#&odu""i4!
9rupal e uno de lo ge tore de ,ontenido ,on te,nologEa PCP?Af$IB * avanzado y * ,ono,ido . ) t di eGado ,on un 2in *ultiprop& ito0 por ello0 e adapta a *ultitud tipo de portale He-0 e *uy 2le4i-le y el di eGo interno 2a,ilita a lo progra*adore la ,rea,i&n de ,o*ple*ento ,apa,e de re olver ,ualquier *odo de 2un,iona*iento para un itio He-. #n eje*plo tEpi,o u ado para *o trar el u o de 9rupal e la pgina o2i,ial de Ba Ca a Llan,a O<<P0 allE ver un 9rupal en 2un,iona*iento. =o o- tante0 pre enta ,ierta di2i,ultad en u aprendizaje al e tar di eGado ,on un prop& ito *uy gene T ral. Para ,o*prender la 2ilo o2Ea de organiza,i&n de lo ,ontenido del portal en 9rupal hay que 2a*iliarizar e ,ierto ,on,epto ,o*o on5 tipo de ,ontenido0 jerarquEa de *en1 0 -loque 0 ta4ono*Ea. Por otro lado0 en la ge ti&n de u uario y prote,,i&n de ,ontenido apare,en lo per*i o y role que ta*-iQn ern e tudiado . )n ,ontra partida0 ,on una in tala,i&n - i,a de 9rupal en,ontrare*o un 2un,iona*iento *uy po-re y ,o*plejo para realizar un itio He-. Para o-tener una e4perien,ia grati2i,ante y o-tener -ueno re ultado ,on e te CA$ e t ,o*u*ente a,eptado un ,onjunto de ,o*ple*ento ,on iderado de *uy alta ,alidad. ) te e uno de lo *ejore a pe,to de 9rupal0 el de arrollo0 *anteni*iento y la in2or*a T ,i&n di poni-le o-re lo ,o*ple*ento e t *uy ,uidada en u pgina He-. $olo ,on vi itar la pgina de de ,arga de un ,o*ple*ento0 e *ue tran e tadE ti,a del *i *o0 in,lu o n1*ero de in tala,ione . Co*o 9rupal e *uy e4ten o0 ,reare*o un itio He- de eje*plo in,luyendo todo el ,ontenido de e te ,ur o0 durante e te pro,e o no e re,orrern toda la op,ione di poni-le de 9rupal0 pero e o- ervar el poten,ial de e te CA$ 2rente %oo*la e tudiado en el *&dulo anterior.

1+ I!,#ala"i4! ' "o!(i7u&a"i4! *0,i"a


Ba in tala,i&n de 9rupal igue el pro,edi*iento e tndar utilizando en la *ayorEa de lo ge tore de ,ontenido PCP?Af$IB e tudiado a lo largo del ,ur o. Ba 1ni,a di2eren,ia e la po i-ilidad de in talar el oporte de e paGol ante de realizar la in tala,i&n0 a E la in tala,i&n la realizare*o en nue tro idio*a. T21). 9e ,o*pri*a el ar,hivo drupal3+.-(./ip0 en una nueva ,arpeta dentro de 555 de H.AP. T21).1. 9rupal tiene tradu,,i&n di poni-le para la propia in tala,i&n0 la in talare*o ,opiando el ar,hivo drupal3+.-'.es.po en la u-,arpeta de 9rupal pro2ile U tandard U tran lation . T21).2. .hora e puede ,rear el u uario0 la -a e de dato Ay$IB para 9rupal y pro,eder a la in tala,i&n de de el navegador. T21).3. 8ni,ie la in tala,i&n en *odo e tndar0 en el ad*ini trador y vi ite el nuevo itio He-. egundo pa o de in tala,i&n podr

ele,,ionar el idio*a e paGol. Contin1e la in tala,i&n y ,uando ter*ine a-andone el u uario de

-+(

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

4.1. "onfiguraci2n b&sica


) ta-le,ere*o una ,on2igura,i&n *Eni*a para poder tra-ajar ,on 9rupal0 todo e to e realiza de de el *en1 de ad*ini tra,i&n0 ,on i tente en una erie de enla,e en la parte uperior de la pgina He-. T21-. .,,eda al *en1 de ad*ini tra,i&n y en Con2igura,i&n U $i te*a U 8n2or*a,i&n del itio e taT -lez,a el =o*-re del itio He- y Be*a0 por eje*plo0 Curso CMS y Edicin Zulio ;2-; re pe,tivaT *ente. T219. .,tivare*o la op,i&n lla*ada #RB li*pia 0 para ello0 a,,eda al *en1 de ad*ini tra,i&n

Con2igura,i&n U L1 queda y *etadato U #RB li*pia . T219.1. Reali,e la prue-a de #RB li*pia. $i 2alla de-e a,tivar un *&dulo de .pa,he en el *en1 de H.AP. Con el rat&n o-re el i,ono de H.AP a,,eda al *en1 .pa,he U A&dulo de .pa,he y en el li tado0 a,tive el *&dulo lla*ado re;riteN*odule. T219.2. 3ra el reini,io del ervidor y pul ando de nuevo el -ot&n en la pgina de ,on2igura,i&n de 9rupal0 apare,er la op,i&n .,tivar #RB Bi*pia 0 *rquela y utili,e el -ot&n @uardar ,on2igura,i&n. T211. Con2igurare*o una ,arpeta e pe,ial para que 9rupal pueda al*a,enar lo ar,hivo privado . ) ta ,arpeta no puede e tar vi i-le de de el ,arpeta 555 de H.AP. T211.1. Con el e4plorador de Hindo; ,arpeta 5550 ll*ela drupalpri%ado. T211.2. .,,eda al *en1 de ad*ini tra,i&n Con2igura,i&n U Aedio U $i te*a de ar,hivo . )l ,uadro de te4to Ruta al i te*a privado de ar,hivo de-e rellenarlo ,on la ruta de la ,arpeta que ha ,reado0 de-erEa er5 cJD5a!pDdupalpri%ado. $i la ,arpeta drupalpri%ado indi,ada anterior*enT te no e4i te en el di ,o o no e t -ien u-i,ada0 9rupal *o trar errore . ,ree una ,arpeta dentro de H.AP 0 pero 2uera de la ervidor He-0 por ello hay que ,rearla 2uera de la

4.2. Insta#aci2n de com #ementos > m2du#os


3ra tra-ajar ,on $A+0 Hordpre 0 %oo*la y otro 0 la in tala,i&n de ,o*ple*ento en 9rupal no

revi te *ayor di2i,ultad. $&lo hay que ,on iderar la no*en,latura utilizada0 para 9rupal un *&dulo e un ,o*ple*ento0 *ientra en %oo*la era un -loque de ,ontenido. fa e *en,ion& que 9rupal e un CA$ genQri,o y 2le4i-le0 pero la in tala,i&n -a e no trae *u,ha

2un,ionalidad. .l e tar pen ando para er total*ente per onalizado *ediante *&dulo 0 el pro,edi*iento de de arrollo y pue ta a di po i,i&n de la ,o*unidad e t *uy -ien organizada en la pgina He- o2i,ial. $i navega a la e,,i&n de *&dulo 0 Q to e tn per2e,ta*ente ,atalogado y ,ontienen ,antidad de in2or T *a,i&n o-re u el 2un,iona*iento0 ver ione di poni-le 0 a,tividad del proye,to0 errore et,. ) re,oT *enda-le revi ar -ien la in2or*a,i&n o-re un *&dulo ante de utilizarlo0 o-re todo en lo re2erente a la indi,a,i&n o-re la a,tividad de lo de arrolladore 0 pode*o en,ontrar *&dulo a-andonado 0 iendo un error utilizarlo .

Mdulo 'b 3 Drupal

-+)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

8n talare*o un *&dulo *uy 1til que no viene por de2e,to ,on la ,on2igura,i&n - i,a. ) un ,one,tor para ervidore de ,orreo e4terno . T211. .,,eda al *en1 de ad*ini tra,i&n A&dulo y u e al enla,e 8n talar un nuevo *&dulo ituado al prin,ipio del li tado de *&dulo . T211.1. #tili,e el 2or*ulario $u-ir un ar,hivo de *&dulo o te*a para in talar el ar,hivo s!tp3 +.@3-.@3de%./ip di poni-le ,on el *aterial del *&dulo. T211.2. Bi te lo *&dulo y ,o*prue-e i $A3P .uthenti,ation $upport apare,e en el li tado de *&dulo 0 pero in a,tivar. T211.3. Aarque el *&dulo ,o*o a,tivo y guarde lo ,a*-io u ando el -ot&n @uardar Con2iguraT ,i&n. T211.#. .,,eda al *en1 de ad*ini tra,i&n uperior Con2igura,i&n y -u que alguna re2eren,ia al *&dulo re,iQn in talado J$A3P .uthenti,ation $upportK. T211.(. )ntre en el enla,e y ,on2igure el ervidor de ,orreo ,orre,ta*ente0 en el ,a*po $end te t e"*ail e ,ri-a u ,orreo ele,tr&ni,o para que 9rupal envEe un ,orreo de prue-a y veri2ique i lo re,i-e. T211.+. =o e olvide de a,tivar la ,a illa 3urn thi *odule on or o22 en on. . lo largo de e te *&dulo e in talarn *a ,o*ple*ento utilizando e te *i *o pro,edi*iento eg1n ean ne,e ario para ,on eguir adaptar 9rupal a nue tra ne,e idade .

2+ Ad-i!i,#&a"i4! de "o!#e!ido,
)l *odelo de ,ontenido en 9rupal e t pen ado y de arrollado para ,on eguir la *ayor generalidad po i-le. Bo ,on iguen in,luyendo un generador de tipo de ,ontenido y dejando al ad*ini trador del itio He- de2inir ,ada tipo de ,ontenido y u ,a*po a o,iado . Cuando e ,rea un ,ontenido ,on 9rupal0 el ,ontenido er de alg1n tipo Jpgina0 artE,ulo0 et,.K y ,ada ele*ento de ,ontenido ,reado e lla*a nodo. Cada nodo igue un *odelo de organiza,i&n de la in2or*a T ,i&n ,la i2i,ada por tre atri-uto 5 3ipo de ,ontenido5 9e2ine lo ,a*po e4i tente que puede tener0 por eje*plo0 el tipo noticia tiene un te4to y una i*agen0 *ientra el tipo arc.i%o "D ,ontiene un 1ni,o ar,hivo P9+.

3a4ono*Ea5 %uego de etiqueta que ,ara,teriza la in2or*a,i&n ,ontenida0 por eje*plo0 una noti,ia puede er o-re %oo*la0 un ar,hivo o-re un ,o*ple*ento de 9rupal y una pgina tratar o-re un ,o*ple*ento de %oo*la. )l juego de etiqueta erEa Drupal0 Zoo!la0 Co!ple!ento.

Aen1 5 Bo *en1 e ta-le,en una jerarquEa en la in2or*a,i&n0 lo ,ontenido pueden e tar a o,iaT do a una entrada de *en10 a E el r-ol del *en1 e de plegar auto*ti,a*ente al a,,eder a ,ierto ,ontenido y la -arra de navega,i&n J-read,ru* K operar ,orre,ta*etne.

-+*

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Para pro2undizar en e to ,on,epto

e ,rear un itio He- que in,luya toda la in2or*a,i&n re2erente a

e te ,ur o de CA$. )l pri*er pa o en 9rupal0 ante de ,o*enzar el de arrollo0 e ,la i2i,ar la in2orT *a,i&n a al-ergar0 e ta tarea e ,ru,ial en ,ualquier de arrollo He-. Partir de una -uena organiza,i&n ante de ,o*enzar el de arrollo e ,on igue adquiriendo ,ierta e4perien,ia en organiza,i&n de ,onteni T do He-. #na organiza,i&n ,l i,a de la in2or*a,i&n tanto en lo CA$ ,o*o en lo i te*a in2or*ti,o utiliza una organiza,i&n jerrqui,a0 en ,a*-io0 lo en i te*a *oderno e ,onte*plan

otro tipo de organiza,i&n. )l tipo de organiza,i&n jerrqui,a e -a a en una rela,i&n padre hijo entre lo ,ontenido 0 no ie*pre e ade,uada y e t hoy en dEa o- oleta. Vere*o alternativa po terior*ente. # are*o el eje*plo de ,la i2i,a,i&n *o trado en la ta-la 2(0 donde e pone de *ani2ie to ,o*o la

organiza,i&n jerrqui,a genera ,ierta duda . $uponga un itio He- para al-ergar *&dulo y te*a para 9rupal0 %oo*a0 $A+0 y *u,ho * . $e podrEa ha,er un razona*iento ,o*o el iguiente5 Desde un punto de %ista clAsico se pensar?a en una seccin por CMSJ Drupal8 Zoo!la8 etc. Cada una de ellos tendr?a dos subseccionesJ Co!ple!entos 1 ,e!as. I!a6ine!os Bue un %isitante Bue desea reali/ar su Albu! de 4otos pero no .a decidido el CMS a usar8 tiene Bue %isitar todos los CMS 1 listar los co!ple!entos de cada uno de ellos. W0o se podr?a tener una seccin Bue liste todos los co!ple!entos8 independiente de Drupal o Zoo!laX8 pues aada!os una seccin lla!ada ,odos los co!ple!entos. La solucin 9erArBuica necesita copiar o enla/ar los todos !dulos de todos los CMS a la nue%a seccin. ) ta itua,i&n e re uelve ,la i2i,ando -ien la in2or*a,i&n *ediante la deno*inada etiqueta o

ta4ono*Ea. .unque ya apare,ieron anterior*ente en otro CA$ en 9rupal ,o-ran e pe,ial i*portan,ia al er un CA$ di eGado para al-ergar gran ,antidad de in2or*a,i&n. Con la in2or*a,i&n -ien etiquetada e generan li tado en 2un,i&n de la ,la i2i,a,i&n realizada. .de* 0 utilizando lo *etadato 0 ta*-iQn ,onte*plado en 9rupal0 e aporta in2or*a,i&n adi,ional.

Contenido 3e*a ,on 2lore a*arilla 3e*a ,on ,a*po de 21t-ol `l-u* de 2oto *yPhoto

Ti/o de contenido Pgina ,on adjunto Pgina ,on adjunto Pgina ,on adjunto Pgina ,on adjunto Pgina - i,a Pgina - i,a

.tiEueta% 9rupal0 3e*a %oo*la0 3e*a Co*ple*ento0 9rupal Co*ple*ento0 %oo*la Co*ple*ento0 9rupal 3e*a0 9rupal

`l-u* de 2oto *yPhoto Pgina de 8n2or*a,i&n `l-u* de 2oto Pgina de in2or*a,i&n o-re te*a ,on 2lore a*arilla

,abla ;+. E9e!plo de clasi4icacin por tipo de contenido 1 ta@ono!?a.

Mdulo 'b 3 Drupal

-++

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

).1. "reaci2n de contenidos


.nte de tra-ajar ,on lo tipo de ,ontenido utilizare*o lo e4i tente ,o*enzando por ,rear la

pgina prin,ipal del itio ,o*o una pgina e tti,a donde un te4to pre ente del itio He-. T212. =avegue a la pgina prin,ipal del itio He- y podr leer un *en aje indi,ando que todavEa no e ha ,reado ,ontenido para la pgina prin,ipal. #tili,e el enla,e de la pgina prin,ipal .Gadir nuevo ,ontenido para ,rear la pgina. T212.1. .pare,er un li tado de tipo de ,ontenido di poni-le 0 ini,ial*ente 9rupal in,luye do 5 Mrt?culo y "A6ina bAsica. Cree una pgina - i,a para la pgina prin,ipal. T212.2. Rellene lo ,a*po 3itle y Lody0 en tEtulo e ,ri-a Curso CMS y en el te4to utili,e el te4to preparado en te@tos3drupal.t@t. +Eje e ,o*o no e4i te un editor enrique,ido ,o*o en %oo*la y otro CA$. Co*o e indi,&0 9rupal trae po,a 2un,ionalidad -a e0 po terior*ente in talare*o alguno de lo di poni-le . T212.3. .,,eda al *en1 in2erior Fp,ione de ruta #RB y rellene el ,a*po .lia de #RB ,on un no*-re que re,uerde0 in e pa,io ni ,ara,tere e4traGo 0 por eje*plo pa6ina3principal. @uarde lo ,a*-io in rellenar ning1n dato * .

T212.#. $i vi ita de nuevo u itio ver que todavEa no e ha e ta-le,ido u nueva pgina ,o*o pgina prin,ipal. .,,eda al *en1 de ad*ini tra,i&n Con2igura,i&n U $i te*a U 8n2or*a,i&n del itio y e ta-lez,a en el ,a*po Pgina ini,ial predeter*inada el alia e ta-le,ido anterior*ente5 pa6ina3principal. T212.(. Vi ite u itio He-. Para tra-ajar ,&*oda*ente de de el navegador lo ge tore de ,ontenido in,luyen editore * enriqueT u ado .

,ido 0 ya han apare,ido en otro CA$. Cay *ultitud de ello y on de arrollo independiente de lo CA$0 de he,ho0 9rupal tiene un *&dulo ,apaz de enlazar ,on ,ualquiera de lo 8n talare*o e te *&dulo. T213. )n el *en1 de ad*ini tra,i&n A&dulo a,,eda al enla,e 8n talar nuevo *&dulo . 8n tale el *&dulo 51si5163+.@3;.-./ip0 a,tEvelo y a,,eda a u ,on2igura,i&n. T213.1. )n la ,on2igura,i&n de e te *&dulo i de pliega la e,,i&n 8n tallation in tru,tion ver ,o*o trae oporte para *ultitud de editore integra-le en el navegador He-0 pero ninguno e t in talado en u i te*a. Puede intentar de ,argar alguno e in talarlo0 por e4perien,ia propia0 puede tener pro-le*a . 8n talare*o una ver i&n ,on,reta de 3inyAC) de ,argada previa*ente de de O<>P y te tada a prop& ito para e te ,ur o. T213.2. .-ra el ar,hivo ,o*pri*ido tin1!ceI'.).;./ip. $eg1n la in tru,,ione indi,ada en la pgina de ,on2igura,i&n Hy i;yg pro2ile 0 la in tala,i&n ,on i te en a,,eder a la ,arpeta de ter,er nivel de la in tala,i&n de 9rupal5 ite U all U li-rarie . Ba ,arpeta li-rarie puede que no e4i ta ,rQela en e te ,a o. )n e ta ,arpeta e de-e de ,o*pri*ir el ar,hivo tin1!ceI'.).;./ip. T213.3. 3ra la de ,o*pre i&n tendre*o una nueva ,arpeta en el di ,o ,on no*-re tin1!ce. $i

-+K

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

e re,arga la pgina de ,on2igura,i&n Hy i;yg pro2ile apare,er e te editor ,o*o in talado y de-e ele,,ionarlo del *odo *o trado en la 2igura >:. T213.#. Por 1lti*o hay que ,on2igurarlo. Cuando pul e guardar apare,er un enla,e en la ,olu*na Fpera,ione lla*ado )ditar. )ntre en Ql y podr ,on2igurar : e,,ione . T213.(. 9e pliegue Plugin la e,,i&n la Lutton *eno para 2oro and la tipo
i6ura *(. Seleccin de editor.

y *arque toda

op,ione

op,i&n LLCode0 e ta 1lti*a e

phpLL Jno lo tene*o in talado en 9rupalK. 3enga

pa,ien,ia0 le llevar uno *inuto *ar,ar tanta op,ione 0 ,uando ter*ine0 guarde lo ,a*-io . .Gadire*o * ,ontenido para ,o*pro-ar el 2un,iona*iento del nuevo editor. T21#. .,,eda al *en1 de ad*ini tra,i&n Contenido y utili,e el enla,e .gregar ,ontenido. Be preguntar el tipo de ,ontenido a aGadir0 ele,,ione Pgina - i,a. Rellene la pgina de la iguiente 2or*a5 T21#.1. )n tEtulo e ,ri-a Matriculacin y en el te4to e ,ri-a alg1n te4to pro-ando i el editor in talado 2un,iona ,orre,ta*ente o intente pegar el ,&digo C3AB preparado para e ta pgina. T21#.2. Laje la pgina ha ta en,ontrar varia op,ione * para rellenar. Ba pri*era ,ontiene el te4to Fp,ione del *en10 *arque la ,a illa Propor,iona un enla,e de *en1 y e ,ri-a en el ,a*po 3Etulo del enla,e del *en1 la 2ra e Matr?cula. T21#.3. #tili,e el -ot&n @uardar y vi ite la pgina prin,ipal de u portal He-0 ver ,o*o apare,e una nueva pe taGa enlazando ,on la pgina re,iQn ,reada.

).2. (en=s
.l igual que %oo*la lo *en1 en 9rupal on un r-ol jerrqui,o de enla,e ordenado ,on el o-jetivo de 2a,ilitar el a,,e o a lo ,ontenido del itio en el *odo de eado por el ad*ini trador. 9rupal per*ite ,rear tanto *en1 ,o*o e de een y trae ,uatro prede2inido 5 .d*ini tra,i&n5 ) el *en1 que e e t utilizando para ad*ini trar el itio0 e total ,on2igura-le. Aen1 prin,ipal5 Corre ponde al *en1 uperior0 no e de-e ,on2undir ,on el *en1 de navega,i&n. =avega,i&n5 ) un *en1 jerrqui,o donde e puede e ta-le,er ,&*oda*ente una e tru,tura para el itio He-. Aen1 de u uario5 $&lo apare,e para lo a,,ione o ,ontenido re tringido. u uario regi trado 0 e un -uen lugar para enlazar

Mdulo 'b 3 Drupal

-+L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Co*enzare*o ,reando una e tru,tura en el *en1 de navega,i&n ,on la e tru,tura indi,ada en la 2igura ><. T21(. .,,eda al *en1 de ad*ini tra,i&n ) tru,tura U Aen1 . )n el li tado de *en1 li tar enla,e del *en1 de =avega,i&n. T21(.1. Co*pro-ar la e4i ten,ia de enla,e en e te *en10 no lo de a,tive o tendr pro-le*a al aGadir nuevo ,ontenido. T21(.2. .nte de ,rear un nuevo ele*ento de *en1 e ne,e ita tener un ,ontenido ,on el que enlazar. .,eda al *en1 Contenido y u e el enla,e .gregar ,ontenido para ,rear una Pgina L i,a. ) ta-lez,a el tEtulo a Gestores de contenidos del curso 0 y en el ,uerpo ,opie ,&digo el C3AB preparado que enu*era todo lo ge tore de ,ontenido e tudiado ha ta el *o*ento. T21(.3. ) ta-lez,a en la op,i&n de la pgina Fp,ione presenta36estores y guarde la pgina. T21(.#. Vuelva a la pgina de ad*ini tra,i&n de *en1 y li te lo enla,e del *en1 de de #RB el ,a*po .lia de #RB a un iga el enla,e

no*-re que re,uerde0 lo ne,e itar para poder enlazar el *en1 ,on e ta pgina0 por eje*plo u e

navega,i&n. #tili,e .Gadir enla,e para ,rear un nuevo ele*ento de *en1. Rellene el tEtulo ,on la 2ra e Gestores de contenido0 en la ruta de-e indi,ar el alia presenta36estores y e ta-lez,a la op,i&n Pe o al valor "1. T21(.(. =avegue a u itio He-0 o- erve ,o*o apare,e el *en1 de navega,i&n y utili,e el enla,e re,iQn ,reado para ,o*pro-ar i e ,orre,to. T21+. Cree tre pgina - i,a de de el *en1 de ad*ini tra,i&n Contenido 0 una para ,ada ge tor de ,ontenido . ) ta-lez,a el tEtulo en ,ada una de ella a5 Si!ple Mac.ines oru!0 Zoo!la y Drupal. =o olvide e ta-le,er un alia re pe,tiva*ente. T21+.1. .,,eda de nuevo al ge tor de *en1 y li te lo enla,e del *en1 de navega,i&n. 9e-e aGadir tre nueva entrada a e te *en1 re2eren,iando la pgina ,reada 0 pero de-en tener ,o*o padre el ele*ento de *en1 ,reado en 321<.:. JGestores de contenidoK. Para ,on eguirlo utili,e el ,uadro de plega-le )nla,e Padre. T21+.2. F- erve la e tru,tura de *en1 ,reada navegando el ele*ento del u-*en1 ea $A+ T21). )dite ahora el *en1 titulado Aen1 Prin,ipal y aGada un enla,e titulado Centro de or!acin "er!anente ,uya ruta ea http566;;;.,2p.u .e .
Aen1 prin,ipal @e tore de ,ontenido $A+ %oo*la 9rupal

e ta-le,ido en el pa o anterior

para el #RB0 utili,e5 presenta3s!40 presenta39oo!la0 presenta3drupal

itio y ,on iga que el pri*er

).3. $i os de contenidos
Ba ad*ini tra,i&n de lo tipo de ,ontenido e un a pe,to ,lave en
3e*a

,ualquier CA$ de ,ar,ter general ,o*o e 9rupal. )l tipo de ,ontenido

Co*ple*ento i6ura *). ZerarBu?a del sitio.

-K2

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

ayuda a di tinguir el tipo de dato al*a,enado0 pero no e el pro,edi*iento que e de-e u ar en 9rupal para di tinguir la in2or*a,i&n ,ontenida. 9e-e*o utilizar lo tipo de ,ontenido ade,uada*ente0 para ello e pueden e ta-le,er alguna regla de -uena pr,ti,a 5 =o a-u ar ,reando *u,ho tipo de ,ontenido en un itio. =o ,la i2i,ar el tipo de in2or*a,i&n en 2un,i&n del tipo de ,ontenido0 para e o e tn la etiqueta Jta4ono*EaK. $&lo ,rear un nuevo tipo de ,ontenido ,uando ninguno de lo in2or*a,i&n para al*a,enar. Por eje*plo0 ninguno de lo tipo e4i tente e4i tente e adapte al tipo de en un 9rupal re,iQn

in talado puede al*a,enar ar,hivo adjunto 0 enton,e 0 ne,e itare*o un nuevo tipo. )n nue tro eje*plo de itio He- ne,e ita*o al*a,enar lo te*a 6plantilla y lo ,o*ple*ento para lo di2erente CA$ e tudiado . #na *ala pr,ti,a en nue tro eje*plo erEa ,rear un tipo de ,ontenido para al*a,enar lo te*a y otro para lo ,o*ple*ento . )l iguiente razona*iento e err&neo5 Para al*a,enar un te*a en nue tro itio He- ne,e ita*o ,rear un tipo de ,ontenido que

,ontenga un te4to de ,riptivo y un ar,hivo para poder de ,argarlo. Para al*a,enar un ,o*ple*ento ne,e ita*o un tipo de ,ontenido que ,ontenga un te4to de ,ripT tivo y un ar,hivo para poder de ,argarlo. Real*ente on el *i *o tipo de ,ontenido0 ,reare*o un tipo de ,ontenido lla*ado "A6ina con ad9untos0 y para di tinguir i e un te*a o un ,o*ple*ento u are*o etiqueta . Ba etiqueta la tratare*o po terior*ente0 e e*pezar ,reando e te tipo de ,ontenido. T21-. .,,eda al *en1 de ad*ini tra,i&n ) tru,tura U 3ipo de Contenido y utili,e el enla,e .Gadir 3ipo de Contenido. T21-.1. 3itule al nuevo tipo de ,ontenido "A6ina con ad9untos0 e ,ri-a una de ,rip,i&n ade,uada para el nuevo tipo y guarde lo ,a*-io . T21-.2. )n el li tado de tipo de ,ontenido apare,er el nuevo tipo0 ahora hay que ,on2igurar lo ,a*po de e te nuevo tipo0 para ello utili,e el enla,e ge tionar ,a*po . T21-.3. ) to ,a*po on lo ,uadro de entrada en la pgina a6re6ar contenidos de 9rupal. ,a*po 0 titulo y ,uerpo0 e to no lo to,are*o y

Ver ,o*o por de2e,to ya e4i ten do iguiente ,a*po 5 )tiqueta5 .djunto . =o*-re del ,a*po5 adjunto . 3ipo de dato a al*a,enar5 .r,hivo. )le*ento de 2or*ulario5 .r,hivo.

aGadire*o uno nuevo u ando el 2or*ulario *o trado en la 2igura >>0 donde e han rellenado lo

Mdulo 'b 3 Drupal

-K-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T21-.#. @uarde lo ,a*-io y en la iguiente pantalla a,,eda a la pe taGa )ditar. ) te nuevo 2or*ulario irve para e ta-le,er la op,ione del ,a*po y e ,on2igurar para que ad*ita tanto ar,hivo adjunto ,o*o el u uario quiera. RellQnelo de la iguiente 2or*a5 3e4to de ayuda5 3e,lee el te4to Inclu1a tantos ad9untos co!o necesite. )4ten ione de 2i,hero per*itido 5 9e-e eparar por ,o*a la e4ten ione per*itida 0

per*itire*o la

iguiente 5 zip0 gz0 po.

=1*ero de valore 5 ) ta-lez,a e te ,ontrol a 8li*itado.

T21-.(. $e aGadir un 1lti*o ,a*po0 pero e te ya e t prede2inido. Vuelva a la pe taGa @e tionar Ca*po in alir del tipo de ,ontenido ,reado. #tili,e ahora el 2or*ulario titulado .Gadir un ,a*po e4i tente ,on lo indi,ado en la 2igura >(. Con e to aGadi*o el etiquetado0 el ,ual viene ,o*o ,a*po prede2inido en 9rupal para u arlo en ,ualquier tipo de ,ontenido.

T219. .hora aGadire*o

una pgina -a ada en el nuevo tipo de ,ontenido. .,,eda al *en1

Contenido y agregue un nuevo ,ontenido u ando el tipo Pgina ,on adjunto . Ba nueva pgina er uno de lo ,o*ple*ento de %oo*la utilizado en el *&dulo anterior. T219.1. Rellene el nuevo ,ontenido ,on lo iguiente5 3itulo U Galer?a de 4otos0 3e4to U Co!ple[ !ento de Zoo!la para !ostrar Galer?a de 4otos 0 .djunto U $u-a el ar,hivo del ,o*ple*ento que e ta-a en 2or*ato zip. T219.2. ) ta-lez,a el ,a*po .lia de #RB el valor 9oo!la36aleria para poder enlazarlo po teriorT *ente.

-K;

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T221. )nlazare*o la pgina prin,ipal de pre enta,i&n de %oo*la. =avegue por el *en1 de u itio He- y edite la pgina de %oo*la0 aGada te4to para li tar lo ,o*ple*ento y enla,e el ,o*ple*ento ,o*o enla,e el alia 9oo!la36aleria. Co*prue-e el enla,e. Blegado a e te punto e4i ten do pro-le*a en la organiza,i&n del ,ontenido5 $i a,,ede de de la pgina de %oo*la a la pgina del ,o*ple*ento que ha ,reado no e de pliega en el *en1 de navega,i&n la e,,i&n %oo*la. 9e-erEa de plegar e0 al e tar viendo un ,o*ple*ento de %oo*la. Cada vez que e aGade una pgina para un ,o*ple*ento de %oo*la tene*o que editar la pgina para aGadir un enla,e al nuevo ,o*ple*ento. Cay que -u ,ar un pro,edi*iento para tener li tado auto*ti,o . T221. )l pri*ero e olu,iona editando el *en1 de navega,i&n. .,,eda al li tado de lo enla,e del *en1 de navega,i&n y aGada un nuevo enla,e. T221.1. ) ta-lez,a el tEtulo que de ee para el enla,e. )n la ruta e ta-lez,a el alia del ,o*ple T *ento J9oo!la36aleriaK0 e ta-lez,a ,o*o padre el *en1 Zoo!la y guarde lo ,a*-io . T221.2. Por 1lti*o en el li tado de enla,e del *en1 de a,tive e ta entrada de *en1 y a E no e de plegar un ter,er nivel en el *en1 de navega,i&n. T221.3. Prue-e ahora navegar a la pgina del ,o*ple*ento. Aantener el *en1 prin,ipal ,on e te pro,edi*iento llega a e una tarea en 9rupal *uy pe ada0 por ello ,ierto *&dulo aGaden en el *en1 de navega,i&n enla,e auto*ti,a*ente. Ftro *Qtodo para li tar e la ta4ono*Ea y la e tudiare*o en la iguiente e,,i&n. .nte de ter*inar e ta e,,i&n tratare*o una ,ue ti&n pendiente0 V,o*o aGadir i*gene junto al te4to en la pgina W. Para ,on eguirlo alterare*o el tipo "A6ina bAsica del iguiente *odo5 T222. )dite el tipo de ,ontenido "A6ina bAsica y aGada un ,a*po etiquetado I!A6enes que al-ergue i*gene 0 ,on2ig1relo para que el u uario pueda u-ir tanta i*gene ,o*o de ee. T222.1. #na vez aGadido el ,a*po0 a,,eda a la pe taGa @e tionar pre enta,i&n. ) ta pe taGa li ta lo ,a*po que e *o trarn a lo u uario ,uando vean e te ,ontenido. )n la ,olu*na 2or*ato ele,,ione Cidden para el ,a*po 8*gene y guarde lo ,a*-io . T222.2. )dite la pgina que de ,ri-e %oo*la y aGada la i*agen i!a6en39oo!la.pn6 en el nuevo ,a*po que ha ,reado. Vi uali,e la pgina y no de-erEa ver la i*gene . T222.3. Vuelva a editar la pgina e in erte una i*agen de de -ot&n aGadir i*agen del editor y utilizando la dire,,i&n #RB de la i*agen. Para a-er ,ual e e ta dire,,i&n de-e utilizar el -ot&n dere,ho del rat&n o-re la i*agen y u ar la entrada de *en1 Ver i*agen.

Mdulo 'b 3 Drupal

-K'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

).4. $axonom-a
Ba ta4ono*Ea en 9rupal e un *Qtodo de ,la i2i,a,i&n de in2or*a,i&n pen ada para uperar la

-arrera de la organiza,i&n jerrqui,a. fa e ,o*ent& y utiliz& en otro CA$0 re,ordar que - i,a*ente el 2un,iona*iento ,on i te en e ta-le,er una o varia etiqueta a ,ada ,ontenido para luego a,,eder al ,ontenido de de di2erente etiqueta . 9rupal va * u are*o all del i*ple etiquetado de ,ontenido generalizando el *Qtodo de etiquetado grupo de etiqueta lla*ado Gocabularios. Para ilu trar un u utilidad ya ,reado por 9rupal y aGadire*o egundo vo,a-ulario

per*itiendo ,rear di2erente

un vo,a-ulario de etiqueta

adi,ional para ,la i2i,ar *ejor la pgina . T223. .,,eda al *en1 ) tru,tura U 3a4ono*Ea. T223.1. Ver que e4i te un vo,a-ulario ,reado ,on el no*-re )tiqueta . )ntre en Ql para agregar lo tQr*ino *o trado en la ta-la 2D. T223.2. .hora ,ree un nuevo vo,a-ulario lla*ado CMS ,on lo tQr*ino *o trado en la ta-la 27.

:o

bre

3e%cri/cin . pe,to vi ual para un CA$ Co*ple*ento para un CA$ @e tor de ,ontenido

"lia% de F;L te*a ,o*ple*ento ge tor

:o

bre

3e%cri/cin $i*ple Aa,hine +oru* @e tor para portale HL @e tor para portale H)L

"lia% de F;L *2 joo*la drupal

3e*a Co*ple*ento CA$

$A+ %oo*la 9rupal

,abla ;K. ,Ur!inos para el %ocabulario EtiBuetas.

,abla ;L. ,Ur!inos para el %ocabulario CMS.

Para ,o*enzar a ,atalogar ,ontenido ,ada tipo de ,ontenido de-e tener un ,a*po donde ele,,ionar un tQr*ino de ,ada vo,a-ulario. .ltere*o lo tipo de ,ontenido5 T22#. .,,eda al *en1 ) tru,tura U 3ipo de Contenido. T22#.1. )dite el tipo de ,ontenido "A6ina bAsica y en la pgina de edi,i&n a,,eda a la pe taGa @e tionar Ca*po . # e el 2or*ulario .gregar nuevo ,a*po y rellQnelo ,on lo *o trado en la 2igura >D. T22#.2. Cuando guarde lo ,a*-io apare,er un nuevo 2or*ulario donde de-e ele,,ionar el vo,a-ulario CA$.

-K(

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T22#.3. Para aGadir el vo,a-ulario de etiqueta 0 utilizare*o otro pro,edi*iento0 repita lo pa o que realiz& en 321D.<. y que e *o tra-an en la 2igura >(. T22#.#. 9rupal re,uerda todo lo ,a*po que e ,rean0 e to 2a,ilita el pro,e o para aGadir un ,a*po para el vo,a-ulario CA$ en el otro tipo de ,ontenido. )dite el tipo de ,ontenido Pgina ,on adjunto y aGada el ,a*po CA$ pero u ando el 2or*ulario .Gadir un ,a*po e4i tente0 de pliegue el ,uadro $ele,,ione un ,a*po e4i tente y ver que ya e4i te el ,a*po CA$ que ,re& en 322:.1.0 ele,,ione e te ,a*po y aGdalo. T22#.(. .,,eda al *en1 de ad*ini tra,i&n Contenido y edite toda ,orre,ta*ente u ando lo vo,a-ulario . T22#.+. .hora navegue por la pgina y ,o*prue-e ,o*o lo tQr*ino apare,en en ,ada pgina. T22#.). =avegue a la ta-la 2D y 27. iguiente dire,,ione 5 http566lo,alho t6drupal6te*a0 la pgina ,la i2i,ndola

http566lo,alho t6drupal6ge tor0 http566lo,alho t6drupal6,o*ple*ento0 y a E ,on todo lo alia de la

).). ?#o@ues
9rupal utiliza el *i *o *e,ani *o de parti,i&n de la pgina en regione donde e puede u-i,ar ,ontenido. 9rupal lla*a -loque a ,ada trozo de ,ontenido que e pueden u-i,ar en una regi&n0 re,uerde ,o*o en %oo*la e lla*a *&dulo. Ba di po i,i&n de e ta regione en 9rupal e *ue tra en la 2igura >7.

Lo5oti/o
9e ta,ado

)n,a-ezado

Re altado

Titulo /D5ina
Larra lateral pri*ero .yuda Larra lateral egunda

Contenido

3rEpti,o pri*ero Pri*era ,olu*na del pie de pagina

3rEpti,o al *edio $egunda ,olu*na del pie de pagina 3er,era ,olu*na del pie de pagina

3rEpti,o al 2inal Cuarta ,olu*na del pie de pagina

Pie de pgina

i6ura *L. Disposicin de los bloBues en la pA6ina.

Mdulo 'b 3 Drupal

-K)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)4i te una di2eren,ia entre lo pueden tener do realizando la -loque

-loque

de 9rupal y lo

*&dulo

de %oo*la0 *ientra

en %oo*la

pueden ,rear vario *&dulo de un *i *o tipo0 en 9rupal un -loque &lo puede apare,er una vez0 no e del *i *o tipo en di2erente pgina . F- ervare*o e ta li*ita,i&n iguiente prue-a .

T22(. .,,eda de de el *en1 de ad*ini tra,i&n al *en1 ) tru,tura U Lloque . T22(.1. #tili,e en enla,e 9e*o trar regione de -loque para ,o*pro-ar i e ,orre,ta la 2igura >7 de e te do,u*ento. Re,uerde utilizar e te enla,e i ,a*-ia el te*a de 9rupal pue to que la regione pueden ,a*-iar de u-i,a,i&n. T22(.2. Ca*-ie a la pe taGa $even y vuelva a utilizar el enla,e anterior para vi ualizar la regione . .quE no apare,en la regione de-ido a que e t vi ualizando el te*a de ad*ini tra T ,i&n0 no a-ordare*o ,a*-io en el a pe,to de la zona de ad*ini tra,i&n en e te ,ur o. T22(.3. Vuelva a la pe taGa Larti/ y en el li tado de -loque o- erve todo lo que e tn

de a,tivado . #tili,e el enla,e Ao trar pe o de la 2ila para ,ontrolar el orden de lo -loque o i de a,tiva la ,olu*na de pe o puede arra trar lo -loque pul ando o-re la 2le,ha de : punta de ,ada -loque. T22(.#. #tilizando la *ue tra de la 2igura (0 ,on iga u-i,ar en la po i,i&n indi,ada lo iguiente -loque 5 2or*ulario de -1 queda0 ,ontenido re,iente0 quien e t ,one,tado0 ini,io de e i&n y navega,i&n.

i6ura +2. Mspecto 4inal de la disposicin de bloBues.

-K*

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T22(.(. .gregue un nuevo -loque para poner el ,opyright y prue-e la regione in2eriore para u-i,arlo ,orre,ta*ente.

5+ Ad-i!i,#&a"i4! de u,ua&io, ' /e&-i,o,


9rupal trae un potente ad*ini trador de u uario a,,eder al Portal. T22+. .,,eda al *en1 de ad*ini tra,i&n Con2igura,i&n U Per ona U Fp,ione de la Cuenta. T22+.1. )n la parte in2erior de la pgina apare,en la plantilla u ada por el i te*a para y per*i o 0 e ,o*enzar per onalizando el 2or*ulario de regi tro de u uario ,reando ,a*po para que lo nuevo u uario rellenen ante de poder

*andar ,orreo ele,tr&ni,o . 3raduz,a aquella que no e tQn en e paGol0 pero tenga ,uidado ,on la varia-le del tipo #campo:2alor(0 1 ela ade,uada*ente en la plantilla de ,orreo. T22+.2. @uarde e ta ,on2igura,i&n y a,,eda ahora a la pe taGa @e tionar Ca*po 0 ituado en la parte dere,ha de la pgina. .Gadire*o alguno ,a*po ,on una ,ara,terE ti,a deter*inada 0 utili,e la 2igura (1 para guiar e o-re el a pe,to 2inal. Bo ,a*po a aGadir on5 9ire,,i&n po tal5 Ca*po de tipo te4to0 ,on Control tipo de te4to0 *arque la op,i&n Ca*po =e,e ario0 rellene el te4to de ayuda ade,uada*ente y deje el re to de op,ione valore predeter*inado . 3elQ2ono 5 )n e te ,a*po el u uario podr e pe,i2i,ar * de un telQ2ono0 la op,ione en el ,a*po =1*ero de valore ade,uada*ente. $oli,ita Le,a5 Ca*po tipo -ooleano ,on Valor para a,tivado en $E y Valor para de a,tivado en =o0 en tipo de ,ontrol ele,,ionar Ca illa de ele,,E&n0 *ar,ar el ,a*po ,o*o ne,e ario0 el valor predeter*inado ,o*o =o y rellenar la de ,rip,i&n ade,uada*ente. CurrE,ulu*5 Ca*po de tipo ar,hivo0 no *ar,ar Ca*po ne,e ario0 E *ar,ar Ao trar en el 2or*ulario de regi tro ,o*o u uario0 en el ,a*po )4ten ione de 2i,hero per*itido poner eparada por ,o*a t@t8 doc8 pd48 odt y dejar lo de* ,a*po en u valor predeter*inado. .,tive la ,a illa indi,ada ,on 9e tino de la u-ida al ervidor para guardar e to ar,hivo en Ca*po privado . +otogra2Ea5 #tili,e en e te ,a o el 2or*ulario in2erior donde privado . Co*entario 5 Ca*po de tipo te4to largo0 ,on2ig1relo ade,uada*ente para que e *ue tre en la pantalla de regi tro de u uario. T22+.3. Co*prue-e i ha o-tenido el *i *o re ultado en el 2or*ulario de regi tro de u uario que el *o trado en la 2igura (1. # e la pe taGa @e tionar pre enta,i&n y arra tre lo ,a*po o utili,e el enla,e Ao trar pe o de la 2ila para ordenar ,orre,ta*ente lo ,a*po del 2or*ulario e puede elegir un ,a*po on5 a u

,a*po de tipo te4to0 ,ontrol de tipo te4to li*itado a 1< ,ara,tere 0 el ,a*po e ne,e ario0 hay que e ta-le,er 8li*itado y rellene la de ,rip,i&n

e4i tente. $ele,,ione ta*-iQn para e te ,a*po el 9e tino de la u-ida al ervidor a Ca*po

Mdulo 'b 3 Drupal

-K+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

que a,a-a de ,rear. T22+.#. Regi tre do u uario de ad*ini tra,i&n Per ona a,,eder al Portal. u-iendo ar,hivo P9+ en el ,a*po ,urrE,ulu*. .,,eda al *en1 do u uario re,iQn ,reado para que puedan

y de -loquee a lo

i6ura +-. or!ulario de re6istro con ca!pos personali/ados.

-KK

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

)l o-jetivo e per*itir el regi tro de u uario para el ,ur o y que el ad*ini trador de,ida lo u uario ad*itido para que tengan a,,e o a di2erente parte del portal. 9rupal utiliza un i te*a de per*i o -a ado en role . )n vez de apli,ar ,ada per*i o por eparado a ,ada u uario0 e agrupan lo per*i o en un rol y lo role Creare*o e te rol. T22). .,,eda al *en1 de ad*ini tra,i&n Per ona Per*i o . T22).1. ) ta pe taGa li ta lo per*i o y lo role en 2or*a de ta-la0 per*itiendo a ignar ,ada rol a vario per*i o . ) ta pgina ,ontiene un enla,e para poder ad*ini trar lo role 0 en la 2igura (2 e indi,a. .,,eda a e a pe taGa y ,ree el rol Mlu!no ad!itido. y ver do pe taGa 0 a,,eda a la pe taGa e apli,an a u uario adquiriendo lo u uario lo per*i o . ele,,ionare*o lo u uario ad*itido para apli,arle

un rol lla*ado Mlu!no ad!itido y

T22).2. )dite lo per*i o de e te nuevo rol a,tivando lo co!entarios.

iguiente 5 %er co!entarios y publicar

T22).3. .l rol usuario anni!o y usuario re6istrado quite lo publicar co!entarios.

per*i o 5 %er co!entarios y

T22).#. .,,eda al li tado de per ona y a igne a &lo uno de lo u uario que ,re& en 322>.:. el rol Mlu!no ad!itido. T22).(. .,,eda al *en1 de ad*ini tra,i&n de -loque y ,on2igure el -loque Contenido reciente para que &lo puedan vi ualizarlo lo alu*no ad*itido al ,ur o. )ntre la de2i,ien,ia del i te*a de per*i o en 9rupal de ta,an la iguiente 5

=o e pueden e ta-le,er lo per*i o para un nodo de ,ontenido parti,ular.

Mdulo 'b 3 Drupal

-KL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

=o e pueden e ta-le,er lo per*i o para un tipo de ,ontenido. Para olu,ionar e ta ,ue ti&n puede utilizar el *&dulo 0ode per!issions re,o*endado po terior*ente en e te *&dulo.

:+ Te-a,
)l o-jetivo de e ta e,,i&n e *odi2i,ar ,o*pleta*ente el a pe,to de 9rupal. )n la pgina o2i,ial de 9rupal e4i ten *ultitud de te*a para de ,argar0 pero partire*o del que trae de *anera predeterT *inada ya que *odi2i,ar ,ualquier te*a e4i tente eguir el *i *o pro,edi*iento. .nte de ,o*enzar a *odi2i,ar o ,rear un te*a e re,o*enda-le ,o*pro-ar la po i-ilidade que o2re,e 9rupal de de el navegador ,on lo te*a e4i tente . T22-. 9e de el *en1 de ad*ini tra,i&n .parien,ia li te lo te*a in talado . T22-.1. 9e de el enla,e 8n talar nuevo te*a puede in talar alguno que previa*ente de ,argue. T22-.2. .,,eda al enla,e a la pe taGa Fp,ione juego de ,olore y ,*-ielo ,olore a u gu to. Para ,rear un nuevo te*a ,on 9rupal no e ne,e ario partir de una te*a e4i tente o ,lonado ya que tiene la ha-ilidad de ,rear u-te*a . #n u-te*a ,on i te utilizar un te*a e4i tente y per onalizarlo in alterar el te*a original0 no hay que ,opiar lo 2i,hero 2i,hero del te*a original0 &lo -a ta ,on uno po,o para ,on eguir el a pe,to de eado. #tilizare*o e ta ,ara,terE ti,a en e te ,ur o para y en la op,ione de Larti/0 ,o*prue-e lo

i*pli2i,ar y no tener que ,rear te*a nuevo o ,lonar lo e4i tente ,o*o e ha,Ea en otro CA$. Para ,rear un nuevo u-te*a iga lo iguiente pa o 5

T229. Cree una ,arpeta nueva en la ,arpeta de 9rupal ite U all U the*e por eje*plo0 ,on el no*-re ,ur oN,* . T229.1. #tilizando el -ot&n dere,ho del rat&n dentro de la nueva ,arpeta ,ree un nuevo 2i,hero ,on Hindo; 0 o- erve el *en1 de la 2igura ('0 apare,e ,on el -ot&n dere,ho del rat&n en el e4plorador de Hindo; 0 de-e ele,,ionar
i6ura +'. Madir nue%o 4ic.ero en una carpeta.

=otepad?? 9o,u*ent. T229.2. Reno*-re el 2i,hero a cursoIc!s.in4o y edEtelo ,on =otepad??.

name > *urso *M1 description > 1u3tema para el curso de *M1 core > F.4 2ersion > 1 engine > phptemplate base theme ' bartik Cdi6o )-. Selectores para deteccin de atributos :,ML.

-L2

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T229.3. )l 2i,hero de-e tener el 2rag*ento indi,ado en el ,&digo <1. T229.#. Ba 1lti*a lEnea0 de ta,ada en negrita0 e la ,lave para ,rear un u-te*a0 indi,a que el te*a lla*ado Curso CMS e el te*a Larti/. T229.(. #na vez en,ontrada la ,arpeta del te*a Larti/0 edite el 2i,hero barti<.in4o para ver u ,ontenido. Copiare*o alguno trozo de te4to de e te 2i,hero a nue tro nuevo u-te*a0 ,opie toda la enten,ia regions#...( >... al 2i,hero cursoIc!s.in4o0 ,on e to *antendre*o inta,ta la regione del te*a original. T229.+. .Gadire*o a nue tro nuevo u-te*a una hoja de e tilo 0 para ello0 aGada al 2inal del 2i,hero cursoIc!s.in4o una lEnea ,on st,lesheets#all(#( > cursoScms.css. T229.). 9e-e ,rear enton,e en la ,arpeta de u nuevo u-te*a un nuevo 2i,hero lla*ado un u-te*a del te*a barti<. )vidente*ente0 barti< de-e e tar in talado de lo ,ontrario0 el u-te*a no 2un,ionar. )nton,e -u que entre lo 2i,hero de 9rupal

cursoIc!s.css0 repita lo pa o 3227.1. T229.-. =avegue al *en1 de ad*ini tra,i&n .parien,ia y li te lo la hoja de e tilo va,EoK. Per onalizare*o el te*a utilizando lo re,ur o gr2i,o in,luido en el ar,hivo drupal3recursos./ip0 i tiene ,urio idad o-re ,o*o e han he,ho e ta i*gene 0 utili,e 8n /,ape para a-rir lo 2i,hero originale en 2or*ato $V@. T231. 9e ,o*pri*a el 2i,hero recursos3drupal./ip para utilizar la i*gene eg1n la ne,e ite. te*a para ver i

e2e,tiva*ente apare,e u nuevo u-te*a. .,tEvelo para todo el itio y ,o*prue-e ,on +ire-ug i cursoIc!s.css e t in,luida en la pgina Jaunque por ahora el 2i,hero e t

T231.1. .,tive y e ta-lez,a ,o*o predeter*inado el te*a Curso CMS que ,re& anterior*ente. T231.2. Copie lo ar,hivo lo6o.pn60 4a%icon.ico0 4a!a.9p60 bloBueI.;.6i4 y estrella.pn6 a la

,arpeta del nuevo te*a. T231.3. #tilizando ,o*o guEa la 2igura (: ,ree en el 2i,hero cursoIc!s.css ,on eguir el a pe,to de eado0 la ta-la '0 *ue tra todo ele,tore a u ar. Selector<e% averigXe el ele,tor _page";rapper 7b8eti9o Ca*-ie el 2ondo de toda la pgina al ,olor _C<L(L(. )nvoltura de 9rupal para toda la pgina0 e ta-lez,a *argene ade,uado y el 2ondo ,on ,olor -lan,o. )nvoltura para toda la ,a-e,era5 )li*ine el ,olor de 2ondo. ) ta-lez,a el an,ho al 100c0 pro-a-le*ente ne,e ite otro ele,tor. Ponga una lEnea dorada arri-a u ando la propiedad border ,on el ,olor _L)79<>. lo ,a*-io ele,tore para

que de-e realizar y lo

_header

Mdulo 'b 3 Drupal

-L-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Selector<e%

7b8eti9o Corre ponde ,on la li ta de enla,e uperiore 5 )l 2ondo de-e e una -arra de ,olor _aD0,'0. Ca*-ie la tipogra2Ea a @eorgia )n la parte dere,ha de ,ada enla,e apare,e la i*agen estrella.pn6. )l ele*ento a,tivo tiene ,olor en el te4to _+L)D0.. ) to ele,tore del ,uerpo y la tre ,olu*na que 2or*an el ,uerpo del portal. )l o-jetivo e aprove,har al *4i*o la pgina. $i el navegador ,a*-ia de ta*aGo la pgina de-e alargar e o redu,ir e. )l -loque ,ontenido de la pgina de-e tener ,o*o 2ondo la *ar,a de la univer idad0 e el 2i,hero 4a!a.9p60 alinee el 2ondo a-ajo a la dere,ha. 3iene un -orde in2erior punteado de 2 pi4el de an,ho0 tanto el te4to ,o*o el -orde tienen el ,olor _aD0,'0. $ele,tore de lo -loque de la ,olu*na 5 Ba ,a-e,era del -loque tiene una i*agen de,orativa a la izquierda lla*ada bloBueI.;.6i4 y el ,olor de 2ondo de e ta ,a-e,era e _C+90L7. Bo -loque tienen un -orde e4terior de 1 pi4el del ,olor _C+90L7. 3ienen un *argen de 2p4 para ha,er un e2e,to de hue,o ,on la ,a-e,era. ) te ele,tor e del pie0 de-e ,on eguir un ta*aGo *Eni*o y un ,olor de 2ondo _>>>>>>. 9e-er -u ,ar ,on +ire-ug *a ele,tore en e ta zona para ,on eguir redu,ir u ta*aGo.
,abla '2. Selectores i!plicados en el te!a Curso CMS.

_*ain"*enu _*ain"*enu"lin/

_*ain _ ide-ar"2ir _,ontent _ ide-ar" e,ond _,ontent 3Etulo de pgina

. ide-ar .-lo,/

_2ooter";rapper

3er*inare*o el di eGo del te*a pro-ando otro tipo de ele,tore . $i e 2ija en la 2igura (: apare,en en el te4to tre i,ono 0 Q to no e han aGadido *anual*ente ,o*o i*gene en el editor de 9rupal. Aediante ele,tore C$$ e han dete,tado lo enla,e 0 uno e4terior0 otro a un do,u*ento .doc y otro a un do,u*ento .pd4. )l ,&digo erEa el iguiente5

a%href _>Q.pdfQ) , padding-left+ 18p4O background+ transparent url)iconoSpdf.gif+ no.repeat center leftO Y a%href _>Q.docQ) , padding-left+ 18p4O background+ transparent url)iconoSdoc.png+ no.repeat center leftO Y a%href f>QhttpQ) , padding-right+ 18p4O background+ transparent url)iconoSenlace.gif+ no.repeat center rightO Y Cdi6o );. Selectores para deteccin de atributos :,ML.

T231. 8n,luya el ,&digo <2 en la hoja de e tilo del te*a. )dite alguna de la pgina de 9rupal en el navegador y enla,e ,on itio e4terno 0 ,on do,u*ento .doc y .pd40 no e preo,upe i lo enla,e no e4i ten0 &lo e para ,o*pro-ar el e2e,to.

-L;

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura +(. Mspecto 4inal del te!a Curso CMS para Drupal.

Mdulo 'b 3 Drupal

-L'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

;+ Co-/le-e!#o, de,#a"ado,
Para 2inalizar el *&dulo o-re 9rupal e enu*eran y e de ,ri-en -reve*ente alguno de lo *&dulo ,on iderado de *ayor interQ para ,on eguir ha,er * a*iga-le el *anejo de 9rupal. Loo/5 ) te *&dulo viene ,on 9rupal pero no e t a,tivado0 ,on Ql puede ,rear li-ro o pgina de *anuale ,on Endi,e . =ode per*i ion 5 Per*ite ele,,ionar per*i o por tipo de ,ontenido. .Gade una nueva pgina

de ,on2igura,i&n en Per ona ,on la pe taGa Per*i o . Vie; 5 ) un *&dulo *uy utilizado en lo portale ,on 9rupal0 per*ite ,rear vi ta para li tar

,ontenido en ,ierto orden y *ultitud de ,riterio . ) te *&dulo e ,o*plejo de *anejar pero e ne,e ario i e de ea ,rear un portal He- ,on gran volu*en de in2or*a,i&n. Chao tool uite5 ) un *&dulo lleno de utilidade ne,e ario para que otro *&dulo 2un,ionen ,orre,ta*ente0 e re,o*ienda tenerlo ie*pre in talado0 por eje*plo0 el *&dulo Gie5s no 2un,ionar *ientra no e in tale e te. Panel 5 ) otro de lo *&dulo * u ado para poder ,o*poner pgina 0 per*ite e ta-le,er la di po i,i&n de la pgina en di2erente panele . 8AC)5 +a,ilita la edi,i&n de pgina ,on i*gene 0 e integra ,on lo editore ,/)ditor y

3inyAC). ) *uy 1til pero requiere tie*po u ,on2igura,i&n. Cuando in tale *&dulo en 9rupal revi e en la pgina de in2or*a,i&n del *&dulo la po i-le

dependen,ia 0 *u,ho *&dulo no 2un,ionan ha ta que no e in talan * *&dulo dependiente . ) to o,urre ,on alguno de lo li tado anterior*ente. 3ra la de ,rip,i&n de e to *&dulo e proponen varia tarea a o,iada a ,ada una de ella 0 e ,oja

la que ,on idere de u interQ e intente llevarla a ,a-o. T232. #tilizando el *&dulo Boo< ,ree un *anual de u uario ,on varia pgina . T233. Cree un nuevo tipo de ,ontenido lla*ado Docu!ento del curso ,on un ,a*po que in,luya un adjunto P9+. Con2ig1relo utilizando el *&dulo 0ode per!issions para que &lo lo u uario ,on el rol Mlu!no ad!itido puedan a,,eder a e te tipo de ,ontenido. T23#. 8n tale el *&dulo Gie5s0 tiene dependen,ia in talarlo ta*-iQn para a,tivar Gie5s. T23#.1. 9e-e a,tivar lo *&dulo Gie5s $I y Gie5s. T23#.2. .,,eda al *en1 de ad*ini tra,i&n ) tru,tura y ver un nuevo enla,e Vie; . .,tive alguna vi ta e intente enlazarla al *en1 prin,ipal. T23#.3. 8ntente ,rear una nueva vi ta para alg1n tipo de ,ontenido. T23(. 8n tale el *&dulo 8AC). .nte de pro,eder a la ,on2igura,i&n vi ite la pgina o2i,ial de ,on otro lla*ado C.aos tool suite de-er

9rupal y -u que e te *&dulo0 allE en,ontrar un enla,e a una de*o tra,i&n. Para integrarlo en

-L(

Mdulo 'b 3 Drupal

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

3inyAC) lea la in tru,,ione . T23+. 8n tale el *&dulo "anels e intente *anejarlo. 9e-e ,rear ,ontenido ,on tipo de ,ontenido "anel y ,rear Minipanels para u arlo en u nodo de tipo "anel. 3enga pa,ien,ia ,on e te *&dulo0 i ,on igue ,ontrolarlo podr di eGar ,ualquier tipo de pgina ,on 9rupal.

C+ Di,#&i*u"io!e,
9rupal e ,on iderado por *u,ho de arrolladore ,on un 2ra*e;or/ de de arrollo de itio He-0 no ,o*o un CA$. Para ,on eguir poner un itio He- operativo partiendo de la in tala,i&n -a e hay que realizar *ultitud de tarea ,o*ple*ento adi,ionale . Ba di tri-u,ione en 9rupal intentan olu,ionar la tarea de ,on2igura,i&n en el itio He-. #na de ad*ini tra,i&n en 9rupal ade* de in talar y ,on2igurar *ultitud de

di tri-u,i&n e una in tala,i&n de 9rupal pero que in,luye una ,on2igura,i&n adi,ional que e realiza auto*ti,a*ente durante el pro,e o de in tala,i&n. 8n,luyen el n1,leo de 9rupal junto ,on vario ,o*ple*ento ya ,on2igurado para la pue ta en 2un,iona*iento de un deter*inado itio He- de una 2or*a gil. )n la pgina o2i,ial de 9rupal podr en,ontrar *ultitud de di tri-u,ione tienda ya preparada y Cpen"ublic para ha,er pgina de organi *o o2i,iale . T23). 8n tale la di tri-u,ione re,uerdan -reve*ente lo pa o T23).1. Cree una nueva ,arpeta dentro de 555 de H.AP y de ,o*pri*a la di tri-u,i&n. T23).2. Cree una nueva -a e de dato o u e alguna otra. $i e utiliza la *i *a -a e de dato que en otra in tala,i&n de 9rupal0 de-e poner en op,ione avanzada un pre2ijo de ta-la di2erente al del re to de in tala,ione . T23).3. 3enga pa,ien,ia0 la di tri-u,ione on lenta en la in tala,i&n y i apare,e alg1n error iguiendo lo *i *o pa o que i 2uera la in tala,i&n de 9rupal. $e -a ada en di2erente

ver ione de 9rupal0 ,o*o eje*plo en e te ,ur o e ha e ,ogido do 5 CpenDeals ,on i tente en una

lQalo detenida*ente para intentar olventarlo.

Mdulo 'b 3 Drupal

-L)

II CURSO DISEO DE SITIOS WEB BASADOS EN GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

$4dulo 1a % <lo!e
)ervidor de aplicaciones 8ope y .estor de contenidos Plone

1+ Re,u-e!
9ura,i&n e ti*ada5 ' hora . Aaterial di poni-le en http566;;;.dte.u .e 6,ur o 6,* 6julio2012. 4ic0ero 3e%cri/cin

etup"plone:1":.1.<"<''D";in'2.e4e 8n talador de Plone para Hindo;


,abla '-. ic.eros necesarios para la reali/acin de este !dulo.

2+ Re(e&e!"ia,
O<(P He- o2i,ial de Plone0 <http566;;;.plone.org!. O<DP He- o2i,ial de Mope0 <http566;;;.zope.org6!. O<7P Aanual de u uario en e paGol0 <http566;;;.zopeplone.e 6do, 6*anual"de"u uario"de"plone"'"v2!.

.+ I!#&odu""i4!
Plone e un ge tor de ,ontenido orientado a lo u uario 2inale y *uy ,o*pleto en u 2un,ionalidad. ) t *uy ,uidado en e a pe,to ,o*o el inter2az de u uario y *anipula,i&n de ,ontenido 0 pero la progra*a,i&n de ,o*ple*ento y per onaliza,i&n requiere per onal tQ,ni,o alta*ente ,uali2i,ado y ,on e4perien,ia en e te ge tor. Co*o el o-jetivo prin,ipal de Plone e 2a,ilitar la ge ti&n de lo ,ontenido al u uario0 utiliza una vi i&n de la organiza,i&n de lo ,ontenido e*ejante a la organiza,i&n de lo ar,hivo en un di ,o -a ado en una jerarquEa de ,arpeta Jdire,torio K. Ba 2ilo o2Ea de Plone e ,o*pleta*ente di2erente de 9rupal0 *ientra una in tala,i&n - i,a de 9rupal apena tiene 2un,ionalidad0 una in tala,i&n - i,a de Plone trae gran ,antidad de 2un,ionalidad iendo
Rev. 2.'(

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

inne,e ario aGadir ning1n tipo de ,o*ple*ento en la *ayorEa de lo ,a o . )n ,a*-io0 Plone e -a tante in2le4i-le en el *odelo de dato u ado y di2i,ulta *u,ho al progra*ador u a*plia,i&n0 9rupal e t *ejor orientado en e te a pe,to ya que 2a,ilita toda la tarea a un progra*ador He-. Cay do a pe,to i*portante o-re la ge ti&n de ,ontenido donde Plone upera a 9rupal. #no e en la

ge ti&n de per*i o de u uario y el otro e en el 2lujo de tra-ajo JHor/2lo;K del ,ontenido. Re pe,to a la ge ti&n de u uario Plone trae una ge ti&n -a ada en u uario 0 grupo y role . )l i te*a de per*i o tiene gran granularidad0 e de,ir0 e4i ten gran ,antidad de per*i o iendo ,o*pli,ado tratar dire,ta T en role y poder a ignar *ente ,on todo 0 a E ,o-ra un *ayor valor el he,ho de agrupar per*i o

per*i o no olo a un u uario0 ino a ,ada ,ontenido del portal por eparado. .de* 0 Plone delega la ge ti&n de per*i o en lo u uario 0 ,ualquier u uario ,on un per*i o en un ,ontenido puede ,on,eder di,ho per*i o a otro u uario en e e ,ontenido. Por otro lado0 el 2lujo de tra-ajo per*ite a lo ,ontenido ir ,a*-iando de e tado -ajo ,ierta ,ir,un tanT ,ia 0 ,ada vez que un ,ontenido ,a*-ia de e tado e ,a*-ian u per*i o auto*ti,a*ente. )n el 2lujo de tra-ajo lo role de lo u uario to*an e pe,ial relevan,ia0 &lo u uario ,on deter*inado role tienen per*i o para realizar un ,a*-io de e tado en un ,ontenido. Por eje*plo0 ,ualquier u uario puede ,rear un ,ontenido pero &lo un revi or puede pu-li,ar el ,ontenido del u uario que lo ha ,reado. ) to 2lujo de tra-ajo on total*ente per onaliza-le pero la ad*ini tra,i&n del 2lujo de tra-ajo llega a er una tarea ,o*pleja en alguna itua,ione . que no utiliza plata2or*a .AP0 2un,iona o-re un ervidor de

Ftra ,ara,terE ti,a de Plone e

apli,a,ione lla*ado Mope0 el ,ual e t de arrollado ,on el lenguaje de progra*a,i&n p1t.on0 Plone e t ta*-iQn de arrollado en e te lenguaje. $o-re Mope &lo indi,ar que e un 2ra*e;or/ de progra*a,i&n He- y ervidor de apli,a,ione que in,orpora *u,ho lla*ada MF9L. ) ta -a e de dato ervi,io ,o*o on5 ervidor He-0 ervidor +3P0 ya que guarda ervidor He-9av0 et,. ) i*portante ,ono,er que Mope tra-aja o-re una -a e de dato no rela,ional e t ligada a la progra*a,i&n orientada a o-jeto in tan,ia de o-jeto de2inido en ,la e de *anera jerrqui,a. 3oda e ta 2le4i-ilidad en Plone y ,o*plejidad en Mope tiene un alto pre,io0 poner en e4plota,i&n un portal ,on Plone requiere gran ,antidad de re,ur o en la *quina donde e eje,uta y ade* 0 no e 2,il en,ontrar aloja*iento e4terno para Plone en 8nternet iendo lo po,o que hay ,aro . Prin,ipalT *ente e to e t *otivado por la lentitud de Plone en ,a o de tener *u,ho u uario editando ,ontenido i*ultnea*ente. Ba in tala,ione tEpi,a para itio ,on ,arga de tr2i,o requieren ,lu ter de ervidoT re Mope irviendo un itio Plone0 y e ta ,on2igura,ione on ,o*pleja de *antener.

) tudiare*o la Plone a nivel de u uario para *o trar u -ondade y vere*o ,o*o la ad*ini tra,i&n ,onlleva ,ierta ,o*plejidad.

1+ $odelo de 7e,#i4! de "o!#e!ido, e! <lo!e


Ba organiza,i&n de ar,hivo en un di ,o de un i te*a in2or*ti,o tradi,ional ,on i te en al*a,enar dato en ar,hivo y e ta-le,er una jerarquEa de ar,hivo y ,arpeta . Bo u uario de ordenadore e tn

-LK

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

ha-ituado ,on e te *odelo de organiza,i&n de ,ontenido 0 por ello Plone e ta-le,e un *odelo i*ilar0 donde lo u uario o ad*ini tradore ,rean e tru,tura jerrqui,a de ,arpeta y0 ,ada ,arpeta0 puede ,ontener di2erente ,ontenido . .pare,e una di2eren,ia en la di tin,i&n de lo Hindo; tipo todo lo 2i,hero on iguale pero0 de 2i,hero . #na e4ten i&n e tipo de ,ontenido al*a,enado lla*ada e4ten ione en una ,arpeta0 en para re,ono,er lo

e utilizan la

el te4to po terior al 1lti*o punto en el no*-re del 2i,hero0 por

eje*plo docu!ento.pd40 docu!ento.doc y docu!ento..t!l0 on tre ar,hivo ,on 2or*ato di2erente . )n Plone e utilizan tipo de ,ontenido en vez de la e4ten ione 0 ,uando e aGade un ,ontenido el

u uario ele,,iona el tipo de ,ontenido que de ea agregar0 y ,o*o o,urrEa en 9rupal0 eg1n el tipo de ,ontenido apare,ern uno ,a*po para rellenar u otro . Realizare*o prue-a a nivel de u uario para ,o*prender el 2un,iona*iento de Plone. T23-. =avegue a la in tala,i&n de Plone el pro2e or0 regi tre un nuevo u uario en Plone y vi ite de de el *en1 de u uario u Pre2eren,ia Je t ituado en la e quina pe taGa uperiore uperior dere,ha de la u 8n2or*a,i&n pginaK. #na vez a,,eda a la pgina0 u ando la per onal y en la pe taGa Pre2eren,ia per onale e ta-lez,a

ele,,ione el editor Cieditor.

T239. Lu que una ,arpeta lla*ada "ruebas de usuarios y navegue a e ta u-i,a,i&n. # e el -u ,ador para ver ,o*o *ue tra lo re ultado *ientra e ,ri-e. T239.1. )n e ta ,arpeta todo lo u uario pueden agregar ,ontenido0 por ello0 la aparien,ia de la pgina ,a*-ia y apare,en uno *en1 de plega-le en la parte uperior. #tilizando el *en1 de plega-le .gregar nuevo ,ree una ,arpeta ,on u no*-re para tra-ajar en ella. T239.2. .hora0 utilizando e te *i *o *en1 aGada una pgina y rellQnela ,on alg1n te4to. T239.3. Reali,e alguna prue-a ,on el editor Ci)ditor0 para ello0 utili,e el -ot&n para in ertar i*gene y apare,er un dilogo. #tili,e el -ot&n Ver $ervidor del dilogo de in er,i&n de i*agen y apare,er otro nuevo dilogo donde puede -u ,ar una i*agen o u-ir una a Plone0 u-a alguna de de u di ,o. T239.#. Prue-e el ,a*-io de ta*aGo de la i*agen y alinee la i*agen a la dere,ha0 ,on iga que el te4to e di tri-uya alrededor de la i*agen. T239.(. .gregue una ta-la ,on < 2ila y < ,olu*na . Prue-e el -ot&n dere,ho del rat&n o-re la 2ila y ,olu*na para ver la op,ione . T239.+. #tilizando otra ventana del navegador ,o*prue-e el ,o*porta*iento del editor integrado ,uando e ,opia ,ontenido de de otra pgina He-. #tili,e ,opiar6pegar de Hindo; Jte,la CF=3RFB?C 6 CF=3RFB ? VK VAantiene el 2or*atoW Vf la i*gene y ta-la W T239.). Prue-e ,opiar6pegar de de otro progra*a ,o*o Hord o )4,el. T239.-. #tili,e la ,orre,,i&n ortogr2i,a. T239.9. Prue-e enlazar pgina e4terna y enla,e a pgina interna 0 por eje*plo a la ,arpeta

Mdulo (a 3 "lone

-LL

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

de alg1n otro ,o*paGero. Plone trae prede2inido alguno tipo de ,ontenido y realizare*o alguna prue-a . T2#1. #tili,e el *en1 de plega-le .gregar nuevo para pro-ar di2erente ,on,reta*ente agregue una noti,ia0 un enla,e y un ar,hivo. T2#1.1. )dite la noti,ia y utili,e la pe taGa +e,ha intervalo de una para progra*ar la noti,ia0 e ta-lez,a un *etadato tipo de ,ontenido0

e*ana para la noti,ia. Ver en la pe taGa de Propietario lo

di poni-le para la noti,ia. #tili,e la pe taGa Categoriza,i&n para aGadir un ele*ento del portal rela,ionado ,on la noti,ia. T2#1.2. =avegue a la ,arpeta ,on u no*-re y o- erve ,o*o e li tan todo lo ,ontenido que ha ,reado. Ca*-ie la vi ta de la ,arpeta de de el *en1 de plega-le Ao trar. T2#1.3. +Eje e en la 1lti*a entrada del *en1 Ao trar0 ,ontiene el te4to $ele,,ione un ele*ento de ,ontenido ,o*o vi ta por de2e,to. #tilE,ela y ele,,ione la pri*era pgina que ,re& y vi ite la ,arpeta de de el r-ol de navega,i&n. T2#1. Cree una ,arpeta lla*ada docu!entos dentro de u ,arpeta de tra-ajo0 entre en ella y aGada vario 2i,hero P9+ Jal *eno tre K. Puede u-irlo de uno en uno o utilizar el -loque izquierdo $u-ir ar,hivo . T2#1.1. .,,eda a la pe taGa ,ontenido 2i,hero P9+ en la ,arpeta. T2#1.2. #tili,e el *en1 Ao trar para ,on eguir que al entrar en la ,arpeta do,u*ento *ue tre una ta-la que li te lo P9+ en el orden e ta-le,ido en el apartado anterior. T2#2. Plone trae utilidade para organizar el ,ontenido de una *anera ,&*oda0 ,reare*o un e y prue-e ,o*o alterar el orden de apari,i&n en lo

*anual dividido en varia pgina . T2#2.1. Cree una ,arpeta va,Ea y dentro varia !anual0 Introduccin0 7eali/acin0 Conclusiones. T2#2.2. Con iga que al entrar en la ,arpeta e *ue tre la pgina de Endi,e y no el li tado de la ,arpeta. T2#2.3. )n ,ada una de la pgina ,reada a,,eda a la pe taGa Con2igura,i&n0 de-e editar la pgina para a,,eder a e ta pe taGa. )n e ta pe taGa a,tive la ,a illa 3a-la de ,ontenido . Para ver el 2un,iona*iento de e ta ta-la de-e ,rear en la pgina una e tru,tura de tEtulo 2or*ato )n,a-ezado 2 y )n,a-ezado '. T2#2.#. .,,eda a la pe taGa Contenido de la ,arpeta y edite la ,arpeta0 ta*-iQn apare,er una pe taGa de Con2igura,i&n0 a,tive la ,a illa Ca-ilitar la navega,i&n iguiente6anterior. T2#2.(. =avegue a alguna de la pgina del *anual que e t ,reado y 2Eje e en lo enla,e ,on lo pgina ,on lo iguiente tEtulo 5 &ndice del

Si6uiente y Mnterior. Co*prue-e el orden e ta-le,ido para la pgina

de u *anual0 i no e

,orre,to0 en la pe taGa de ,ontenido de la ,arpeta de-e ,orregirlo0 para *over y ordenar lo

;22

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Pe Pe taGa taGa,ontenido ,ontenido Mona Monapara paraordenar ordenar ,on ,onel elrat&n rat&n

i6ura +). 7estricciones de tipos.

,ontenido utili,e el rat&n en la zona indi,ada en la 2igura (<. T2#3. Prue-e lo -otone ,opiar y pegar de de la pe taGa ,ontenido de alguna ,arpeta para

,o*pro-ar ,o*o dupli,ar ,ontenido .

4.1. F#u+o de traba+o 83or6f#oA;


)l 2lujo de tra-ajo e una parte e en,ial para el tra-ajo en grupo0 en Plone ,ada ,ontenido e t en un e tado0 por eje*plo pu-li,ado o privado. )l ,ontenido puede ,a*-iar de e tado ,uando un u uario lo de ee pero &lo puede al,anzar aquello e tado para lo que e tQ autorizado el u uario. .quE entra en juego el i te*a de per*i o -a ado en role . )n la 2igura (> e *ue tra uno de lo po i-le 2lujo de tra-ajo di poni-le en Plone0 donde la 2le,ha repre entan la tran i,ione po i-le entre lo tre po i-le e tado . )l igni2i,ado e el iguiente5 Privado5 ) te e tado e el ini,ial ,uando un u uario ,rea un ,ontenido. =ing1n vi itante ni ning1n otro u uario del itio He- puede ver e ta in2or*a,i&n. Revi i&n pendiente5 =ing1n vi itante ni ning1n otro u uario tiene a,,e o al ,ontenido0 el u uario que lo ,re& puede verlo pero no editarlo y lo pueden verlo para pu-li,arlo. Pu-li,ado5 Bo vi itante y lo u uario pueden a,,eT der a la in2or*a,i&n0 pero no puede er editado por nadie. $uponga ,o*o eje*plo do otro u uario u uario ,on role di tinto
Re,hazar ;e9i%in Pendiente Pu-li,ar Pu-li,ar Publicado Pri9ado Retirar

revi ore

e ta-le,ido en Plone. #n u uario tiene el rol de re%isor y el &lo el rol de !ie!bro del portal. Cuando el u uario que no e revi or aGade una pgina e t queda en un e tado pri%ado Jo,ultoK0 i qui iera pu-li,arla0 el u uario
)nviar para pu-li,a,i&n

i6ura +*. Wor<4lo5 si!ple publicacin.

Mdulo (a 3 "lone

;2-

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,a*-ia el e tado de la pgina a pendiente de re%isar porque el i te*a no le per*ite pu-li,arla. #n revi or er avi ado de ,ontenido pendiente de pu-li,ar y podr eje,utar do po i-le tran i,ione 5 publicar o rec.a/ar. Plone po ee una ge ti&n de 2lujo de tra-ajo *uy avanzada0 ade* de traer vario tipo de 2lujo de tra-ajo prede2inido y trae un *e,ani *o para el ad*ini trador ,on el que puede ,rear nuevo 2lujo de tra-ajo. .de* ,ada tipo de ,ontenido puede tener un 2lujo de tra-ajo di2erente y a1n * 0 ,ada ,arpeta puede tener per onalizado el 2lujo de tra-ajo. )n la e,,i&n de ,on2igura,i&n y ad*ini tra,i&n e pre entarn el re to de op,ione avanzada re2eren T te a e te te*a0 ahora realizare*o un ejer,i,io donde e *ue tra el ,o*porta*iento de lo ,ontenido ,on un 2lujo de tra-ajo i*ple. T2##. .Gada un evento en u ,arpeta para una 2e,ha pr&4i*a y utilizando el *en1 de plega-le

) tado ele,,ione )nviar para pu-li,a,i&n. T2##.1. $oli,ite al revi or de Plone que le pu-lique el evento y vea i apare,e en el ,alendario. T2##.2. Realizare*o una pu-li,a,i&n *a iva de todo el *anual que ha ,reado anterior*ente. .,,eda a la pe taGa de ,ontenido ele*ento enviQ todo el *anual a pu-li,ar. T2##.3. .,,eda ahora la ,arpeta lla*ada ,abln de anuncios. 9e de el r-ol de navega,i&n progra*e la pu-li,a,i&n de alguna noti,ia para dentro de 10 *inuto . Co*prue-e ahora ,o*o en e ta ,arpeta tiene per*i o para pu-li,ar0 e de,ir0 no ne,e ita enviar a revi i&n la noti,ia. Pu-lique la noti,ia y ,o*prue-e de de otro navegador que la noti,ia apare,e. donde e al-erga todo el *anual0 ele,,ione todo lo y utili,e el -ot&n Ca*-iar e tado0 ahora rellene alg1n ,o*entario para el revi or y

4.2. Bist2ricos y versiones de documentos


Ftra ,ara,terE ti,a de Plone e el ,i,lo de vida de lo ,ontenido . Plone *antiene un hi t&ri,o ,on la po i-ilidad de a,,eder a todo lo ,a*-io o,urrido en ,ualquier pgina y re taurar ,ualquier ver i&n anterior. $e pueden ,o*parar entre ,a*-io . T2#(. Para pro-ar el i te*a de ver ione la pgina . T2#(.1. #tilizando la pri*era pgina que ,re&0 a,,eda a un enla,e lla*ado Ci t&ri,o. .quE puede ,o*pro-ar lo ,ualquier ver i&n anterior. T2#(.2. Creare*o ahora una ,opia de tra-ajo para a,tualizar la pgina. 9e de el *en1 ,a*-io o,urrido ituado al lado del tEtulo er ne,e ario que reali,e vario ,a*-io en alguna de E la di2erente ver ione y ver lo u uario i*pli,ado en lo

en el do,u*ento y volver a

de plega-le .,,ione utili,e la entrada Retirar ver i&n y ele,,ione la op,i&n Carpeta de ini,io. T2#(.3. .hora reali,e ,a*-io en e ta nueva ver i&n0 ,o*prue-e que *ientra realiza lo

,a*-io la ver i&n anterior e t di poni-le.

;2;

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T2#(.#. Cuando ter*ine utili,e el enla,e del *en1 de plega-le de .,,ione U @uardar ver i&n0 auto*ti,a*ente e u tituir la pgina vi i-le por la nueva ver i&n.

4.3. Permisos
Ba ge ti&n de per*i o en Plone e otro de lo a pe,to donde de ta,a e te CA$. Bo per*i o e tn *uy ligado al 2lujo de tra-ajo0 olo e pueden realizar ,ierta opera,ione en un ,ontenido dependiendo del e tado en el que e tQ el ,ontendido0 y eg1n e te e tado ,ada u uario tendr uno per*i o u otro . )l a pe,to 2unda*ental en el i te*a de per*i o en Plone e la delega,i&n de per*i o en lo propio u uario . ) to 2a,ilita el tra-ajo en grupo dentro del Portal y ,on i te en per*itir a un u uario ,on un per*i o en un o-jeto0 o2re,er e te per*i o a otro u uario o grupo del Portal que de ee. Con e to ,ualquier u uario puede ,o*partir u ,ontenido en el Portal ,on otro u uario. Plone trae en u ,on2igura,i&n - i,a tre role 6per*i o a igna-le a lo u uario en ,ada ,ontenido5 Puede agregar5 ) te per*i o ,ontenido en la ,arpeta. Puede editar5 Con e te per*i o puede editar un ,ontenido e4i tente. Puede ver5 $&lo puede a,,eder a la in2or*a,i&n para vi ualizarla. Puede revi ar5 Per*ite al u uario pu-li,ar ,ontenido 0 igni2i,a que puede ,a*-iar el e tado de pri%ado a publicado o de pendiente de re%isin a publicado. Real*ente quien tiene e te per*i o o-re un ,ontenido e ,onvierte en revi or de e te ,ontenido. ) te i te*a de per*i o ,onvive ,on el 2lujo de tra-ajo y lo altera -ajo ,ierta ,ir,un tan,ia 0 uponga un ,a o donde un u uario ,rea una pgina y Q ta per*ane,e en e tado privado. )n e te e tado ning1n u uario puede verla0 pero el u uario puede ha-ilitar a otro u uario lo u uario igue iendo ina,,e i-le. i te*a * per*i o puede %er y puede editar. Con e to ,on igue ,o*partir un do,u*ento para tra-ajar en grupo0 pero para el re to de e e ta-le,e en la ,arpeta y per*ite a un u uario aGadir

) te i te*a de per*i o ,o*-inado ,on el 2lujo de tra-ajo ,onvierte a Plone en uno de lo ver tile a nivel de u uario. $e propone realizar a ,ontinua,i&n la iguiente prue-a5

T2#+. .,,eda a la ,arpeta Docu!entos que ,re& y utili,e la pe taGa Co*partir para per*itir a todo lo u uario ,one,tado que puedan verla. T2#+.1. .,,eda a la ,arpeta donde ,on truyo u *anual y de per*i o de edi,i&n a un ,o*paGero del ,ur o0 ,o*prue-e que di,ho ,o*paGero puede ,a*-iar la pgina pero no puede agregar una pgina nueva. T2#+.2. .hora ,on,eda el per*i o a6re6ar a todo lo u uario quitando el per*i o editar en una nueva ,arpeta. )l ,o*porta*iento en e ta ,arpeta de-e puede editar el ,ontenido que agregue otro u uario. er el iguiente5 puede agregar ,ontenido ,ualquiera0 pudiendo editar el ,ontenido que ,ada u uario ha agregado0 en ,a*-io0 no

Mdulo (a 3 "lone

;2'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T2#+.3. Co*prue-e e te he,ho realizando varia prue-a ,on u ,o*paGero .

2+ I!,#ala"i4! ' ad-i!i,#&a"i4!


. pe ar de er Plone un i te*a *uy *aneja-le para lo u uario e *uy ,o*plejo de ad*ini trar y *antener. Para u 2un,iona*iento e ne,e ita una plata2or*a ,o*pleta y propia di2erente a H.AP. )l 2un,iona*iento de Plone requiere lo $ervidor He-5 $e ne,e ita Mope. La e de dato 5 MF9L e una -a e de dato no rela,ional0 e una -a e de dato de o-jeto . Benguaje de progra*a,i&n5 $e utiliza python. )l propio CA$5 Plone. Ba in tala,i&n de todo e to ,o*ponente pre enta eria di2i,ultade por ello0 la ,o*unidad Plone iguiente ,o*ponente 5

e*paqueta el CA$ junto ,on todo lo ,o*ponente en un in talador *ultiplata2orr*a lla*ado Luildout. Pode*o pen ar que e te paquete de o2t;are e ,o*o un i te*a pare,ido a la plata2or*a H.AP pero preparado eje,utar Plone. )l in talador para Hindo; ning1n pro-le*a. $ea ,on ,iente que Mope6Plone e una plata2or*a *uy pe ada0 e de,ir0 requiere gran ,antidad de e puede de ,argar de de la pgina He- o2i,ial de Plone o utilizar el

u*ini trado ,on e te *&dulo. Ba in tala,i&n e t ,o*pleta*ente auto*atizada y no de-e pre entar

re,ur o en u eje,u,i&n y puede llegar re ponder lenta*ente i ,are,e de ello . Para *u,ho u uario ne,e itar di*en ionar lo equipo y re,ur o in2or*ti,o en 2un,i&n del tr2i,o previ to. T2#). Pro,eda a la in tala,i&n de Plone eje,utando u in talador. 3ra la in tala,i&n tendr la

plata2or*a eje,utndo e y e ,u,hando en el puerto D0D00 para no ,rear ,on2li,to ,on H.AP. T2#).1. =avegue a u puerto D0D0 *ediante la dire,,i&n http566lo,alho t5D0D0. # e el -ot&n para ,rear un nuevo itio He- -a ado en Plone0 ne,e itar per*i o de ad*ini trador0 el u uario e ad!in y la ,ontra eGa ad!in. T2#).2. .,,eda a Con2igura,i&n del itio de de el *en1 del ad*ini trador J*en1 ituado en la e quina uperior dere,haK. T2#).3. Para tener una la ,on2igura,i&n *Eni*a a,,eda a la entrada de ,on2igura,i&n Correo y e ta-lez,a lo dato del ervidor de ,orreo ade,uada*ente. T2#).#. .,,eda ta*-iQn al *en1 # uario y grupo y agregue un u uario para realizar prue-a 0 no lo agregue a ning1n grupo en el 2or*ulario. T2#-. =avegue a la pgina prin,ipal y edEtela0 2Eje e en el editor y ,o*prue-e lo di poni-le . T2#-.1. Ca*-iare*o la ,on2igura,i&n de e te editor para per*itir * 2un,ione . .,,eda la -otone

;2(

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

pgina de Con2igura,i&n del itio U )ditor Vi ual 3inyAC) y en la pe taGa Larra de herra*ienta a,tive todo lo -otone . T2#-.2. Vuelva a editar la pgina. Ftro ,on,epto en Plone e el portlet0 e lla*a portlet a ,ada -loque de ,ontenido que puede apare,er en la ,olu*na izquierda o ,olu*na dere,ha del Portal. #n portlet puede apare,er *1ltiple la ve,e y en ,ada ,arpeta del Portal e puede tener un ,onjunto di2erente de porlet . ) ta-le,iendo en la ,arpeta de ini,io de Plone lo portlet de eado 0 todo lo portlet a ignado aquE e heredan al re to de ,arpeta e ta ,arpeta. T2#9. )n la parte in2erior de la pgina prin,ipal u e el enla,e .d*ini trar portlet . 9e de el *en1 aGada lo iguiente 5 Bi ta de revi i&n0 Calendario y te4to e tti,o. del itio He-. $i e de ean ,a*-iar lo portlet en una ,arpeta hija ,on,reta0 el ad*ini trador de porlet y per*ite o,ultar lo portlet heredado y aGadir lo de eado en

T2#9.1. Con2igure el de navega,i&n para que e *ue tre de de el =ivel ini,ial 0. T2#9.2. Cree una nueva ,arpeta0 entre en ella y vuelva a u ar el enla,e .d*ini itrar portlet para -loquear todo lo porlet ,on iguiendo que de aparez,an la do ,olu*na . Con Plone no on ne,e ario lo ,on,epto de e,,ione y ,ategorEa e4i tente en otro CA$. Ba

e tru,tura jerrqui,a de ,arpeta

generaliza e te *odelo0 ,o*o eje*plo aGadire*o

un ta-l&n de

anun,io al portal. Para aGadirlo -a ta ,on ,rear una ,arpeta lla*ada ,abln de anuncios y ,on2igurarla ade,uada*ente ,on la herra*ienta de ad*ini tra,i&n. T2(1. Cree una ,arpeta en la raEz del portal lla*ada ,abln de anuncios y pu-lique la ,arpeta. T2(1.1. )n la pe taGa ,o*partir de la ,arpeta0 ,on,eda a lo Puede agregar. T2(1.2. )ntre en la ,arpeta y ahora en el *en1 de la ,arpeta .gregar nuevo re trinja lo tipo per*itido en e ta ,arpeta *ediante el enla,e *o trado en la 2igura ((. $&lo e per*itirn e e ta ,arpeta ,ontenido del tipo =oti,ia. T2(1.3. )n el *en1 Ao trar ,a*-ie la vi ta a Vi ta re u*en. T2(1.#. #tilizando el u uario de prue-a 0 ,onQ,te e al portal e intente aGadir una noti,ia en el ta-l&n de anun,io que a,a-a de ,rear. T2(1.(. #na vez aGadida intente pu-li,arla. .-andone la e i&n de u uario y vi ite el portal an&ni*a*ente. T2(1.+. )ntre en el portal ,o*o ad*ini trador y ,o*prue-e i en un portlet apare,e la li ta de revi i&n pendiente. $iga e te enla,e para pu-li,ar la noti,ia del u uario.
i6ura ++. 7estricciones de tipos.

# uario ,one,tado

el per*i o

Mdulo (a 3 "lone

;2)

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Ftra herra*ienta de ta,a-le para el ad*ini trador e el i te*a de noti2i,a,ione -a ado en regla . Con e te i te*a el ad*ini trador puede ,rear regla para ,ontenido ,on una erie de ,ondi,ione 0 tal que al ,u*plir e e ta 0 e di para auto*ti,a*ente una a,,i&n. ) ta regla e ,rean de de el panel de ,ontrol de Plone pero no e tn operativa ha ta que no on a ignada a alg1n ,ontenido. ) to per*ite al ad*ini trador noti2i,ar la ,rea,i&n de nuevo ,ontenido 0 re,hazar pu-li,a,ione auto*ti,a*ente -ajo ,ierta ,ir,un tan,ia y *u,ha * op,ione . T2(1. 3ra-ajare*o Regla o-re la regla de ,ontenido de de la pgina de Con2igura,i&n del una que itio U

de ,ontenido. .gregare*o

e di pare ,uando un ele*ento pa e al e tado de

revi i&n0 enton,e Plone de-e *andar un ,orreo ele,tr&ni,o a una dire,,i&n. T2(1.1. #tili,e el -ot&n .gregar0 aGada un tEtulo0 una de ,rip,i&n ade,uada y en )vento di paraT dor ele,,ione ) tado de 2lujo de tra-ajo ,a*-iado. T2(1.2. @uarde lo ,a*-io y en el li tado de regla apare,er u nueva regla. .hora e

ne,e ario ,on2igurarla iguiendo el enla,e del te4to de la regla. )n la regla hay que e ta-le,er do ele*ento 5 la ,ondi,i&n que la di para y la a,,i&n a realizar. ) ta-lez,a lo iguiente5 Ba ,ondi,i&n a agregar e ) tado de 2lujo de tra-ajo y el ) tado de 2lujo de tra-ajo a ReviT i&n pendiente. Ba a,,i&n a agregar e )nviar ,orreo donde podr generar un ,orreo u ando lo ele*ento de plantilla indi,ado plantilla de envEo5
8l usuario &,user5fullname. est9 esperando re2isi%n del contenido &,absolute5url.. <a esta3lecido como fecha de pu3licaci%n &,effecti*e.. "or fa2or re2:selo antes de esta fecha. Cdi6o )'. E9e!plo de plantilla de correo en "lone.

en el 2or*ulario po terior. Con idere el

iguiente eje*plo ,o*o

T2(1.3. #na regla de ,ontenido no opera ha ta que no e a ignada a alg1n ,ontenido. .,,eda al ta-l&n de anun,io ta-l&n de anun,io . T2(1.#. .,,eda ,on el u uario de prue-a 0 aGada una noti,ia y veri2ique i la regla 2un,iona al intentar pu-li,arla0 de-erEa re,i-ir un ,orreo ele,tr&ni,o. T2(1.(. .hora de-e ,rear una regla que e di pare ,uando e agregue ,ontenido y la e4ten i&n del ar,hivo aGadido ea M8P. Ba a,,i&n a realizar e ) tado de tran i,i&n de 2lujo de tra-ajo y e di parar una tran i,i&n a Reje,t0 de 2or*a que el o-jeto queda pendiente de revi ar auto*ti,aT *ente. Ftro punto a tratar e Plone. ) ta ,ole,,ione un tipo de ,ontenido e pe,ial al que el ad*ini trador tiene a,,e o lla*ado irven para realizar -1 queda y li tar ,ontenido que ,u*plen ,ierta ,reado anterior*ente y utili,e la pe taGa Regla para agregarla a todo el

Coleccin0 no e t di poni-le para lo u uario 0 aunque e to e puede ,a*-iar en la ,on2igura,i&n de

;2*

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

,ondi,ione . .de* 0 generan auto*ti,a*ente ,anale de u- ,rip,i&n R$$. $on o-jeto di2E,ile de ,on2igurar al tener gran ,antidad de op,ione en u 2or*ulario de edi,i&n pero evitan la ne,e idad de tener progra*ar para realizar pgina de li tado 0 *uy ,o*une en ,ualquier itio He-. $e ,o*portan ,o*o ,arpeta 0 pudiendo in,luir u-,arpeta iendo Q ta real*ente u-"-1 queda . iguiente ,ole,,ione 5

T2(2. Cree una ,arpeta en la raEz del portal y aGada la

T2(2.1. Bi tado de o-jeto en e tado privado en todo Plone. T2(2.2. Bi tado de o-jeto pu-li,ado en la do 1lti*a T2(2.3. Bi tado de o-jeto que han e4pirado0 e e*ana .

de,ir0 ya ha pa ado la 2e,ha de e4pira,i&n

indi,ada por el autor del o-jeto. T2(2.#. Co*prue-e que puede pu-li,ar e ta ,ole,,ione o dejarla privada para u u o ,o*o ad*ini trador del itio He-.

).1. 3or6f#oA
)n itio ,on ,ierta ,o*plejidad una -uena ad*ini tra,i&n del 2lujo de tra-ajo en Plone 2a,ilita toda la tarea 0 tanto a lo u uario ,o*o a lo ad*ini tradore del itio. .de* del 2lujo de tra-ajo i*ple *o trado ,on anterioridad e in,luyen prede2inido otro do lla*ado 5or<4lo5 para co!unidad J2igura (7K y 5or<4lo5 para intranet J2igura D0K. Bo 2lujo de tra-ajo on apli,a-le a tipo de ,ontenido o a ,arpeta . $i un 2lujo de tra-ajo e apli,ado a un tipo de ,ontenido u e2e,to e glo-al en todo el itio He-. )n ,a*-io0 a ve,e 2lujo de tra-ajo a e ta ,arpeta. #n a pe,to de ad*ini tra,i&n ,on el que e de-e er ,uidado o e ,on el ,a*-io de 2lujo de tra-ajo. $i un itio He- e t 2un,ionando ,on uno deter*inado y e quiere ,a*-iar a otro0 e ne,e ario *apear lo e tado del antiguo 2lujo al nuevo0 i e ,o*enten errore 0 ,ontenido o,ulto podrEa apare,er p1-li,o o ,ontenido pu-li,ado de apare,er. T2(3. Para tra-ajar o-re el ;or/2lo; a,,eda a la pgina de Con2igura,i&n del itio U 3ipo . .quE puede ,a*-iar el ;or/2lo; de todo lo o-jeto del portal o lo de un ,ierto tipo. T2(3.1. Co*prue-e el 2lujo de tra-ajo e4i tente para lo tipo de ,ontenido I!a6en y Mrc.i%o. =o de-erEan tener a ignado ninguno. T2(3.2. Para proteger lo ar,hivo u-ido al portal a igne un 2lujo de tra-ajo a lo ar,hivo . . e ne,e ita utilizar ,ierta ,arpeta ,o*o privada o ,on di2erente ,o*porta*iento0 enton,e 0 e puede apli,ar un deter*inado

la i*gene no e ha-itual a o,iar ninguno0 pero ta*-iQn puede ha,erlo. T2(#. .,tivare*o un ,o*ple*ento que per*ite a ignar un ;or/2lo; di tinto a una ,arpeta

deter*inada0 e ta uele er la *ejor polEti,a en la *ayorEa de lo ,a o .

Mdulo (a 3 "lone

;2+

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

T2(#.1. .,,eda a la pgina de Con2igura,i&n del itio U Co*ple*ento y a,tive el ,o*ple*ento $oporte de PolEti,a de +lujo de tra-ajo. T2(#.2. Cree una nueva ,arpeta lla*ada Intranet y en el *en1 de ,a*-io de e tado utili,e la op,i&n PolEti,a Jver 2igura (DK. ) ta-lez,a para e ta ,arpeta y toda 8ntranet. T2(#.3. Cree ,ontenido y ,o*prue-e la e4i ten,ia de lo e tado *o trado en la 2igura D0. u u-,arpeta la polEti,a

).2. 7suarios gru os y ro#es


Bo grupo y lo role on lo 2unda*ento del i te*a de per*i o en Plone. .unque apli,ando role u uario en grupo y en vez de apli,ar role a u uario

dire,ta*ente a ,ada u uario no e ne,e itarEan lo grupo 0 i 2a,ilitan *u,ho la tarea de ad*ini traT ,i&n el he,ho de poder agrupar a ,ierto apli,arlo a grupo . Bo role de2inido en Plone on lo iguiente 5

Contri-uyente5 Puede agregar ,ontenido en la ,arpeta donde tenga e te rol. )ditor5 Puede editar lo ,ontenido . Aie*-ro5 Repre enta u uario regi trado 0 puede ,a*-iar u pre2eren,ia per onale . Be,tor5 Puede a,,eder a la in2or*a,i&n pero no *odi2i,arla. Revi or5 Puede pu-li,ar ,ontenido en e tado pendiente de revi ar. .d*ini trador5 Puede ad*ini trar el portal. Para utilizar ,orre,ta*ente e to role hay ,on iderar ,ual e u *-ito de apli,a,i&n0 ,ada u uario

puede tener un deter*inado rol lo,al*ente o glo-al*ente. $i a un u uario le a igna*o el rol de revi or glo-al*ente podr revi ar y pu-li,ar ,ualquier ,ontenido pendiente en ,ualquier ,arpeta de todo el itio He-. )n ,a*-io0 a un u uario e le puede a ignar el rol revi or para una deter*inada ,arpeta a E0 olo puede revi ar y pu-li,ar lo ,ontenido de la *i *a. ) ta egunda op,i&n e *u,ho * razona-le. T2((. .,,eda ,o*o ad*ini trador a Con2igura,i&n del pe taGa itio U # uario y grupo . #tili,e la

uperiore para ver lo grupo e4i tente y lo role . grupo lla*ado Dpto recursos .u!anos y Dpto calidad. Cree y agregue

T2((.1. .Gada do

alguno u uario a di2erente grupo . T2((.2. Co*prue-e que todo lo u uario e4,epto el

ad*ini trador tienen &lo el rol *ie*-ro. T2((.3. Co*prue-e que lo grupo ,reado no tienen ning1n rol.

i6ura +K. "ol?tica de 5or<4lo5.

;2K

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Para pro2undizar * en el i te*a de per*i o de u uario el o-jetivo e tra-ajar ,on e to grupo en di2erente ,arpeta . T2(+. Cree do ,arpeta en la raEz del itio He-. T2(+.1. . igne de de la pe taGa Co*partir todo lo role en la pri*era ,arpeta a un grupo y en la egunda al otro grupo. T2(+.2. .hora ,ree un nuevo u uario lla*ado Gi6ilante y aplique glo-al*ente el rol lector a e te
Pri9ado Ca,er privado

Vi i-le $orrador /Cblico

Pu-li,ar

Publicado

Retirar

Re,hazar ;e9i%in Pendiente Pu-li,ar

)nviar para pu-li,a,i&n

i6ura +L. Wor<4lo5 co!unidad. Retirar

Ca,er privado Pri9ado

Re

ar tir

Publicado interno
te en

-li Pu 4te re ,a e a* rn

er na *

Ao trar interna*ente

$orrador Interno

a i, -l u P

en te

a* rn e t in

nt e

)nviar para pu-li,a,i&n

;e9i%in Pendiente

Pu-li,ar e4terna*ente i6ura K2. Wor<4lo5 intranet.

Mdulo (a 3 "lone

Pu -li ,

ar int

Publicado e6terno

a az ,h Re r

;2L

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

u uario. # e e te u uario para ,o*pro-ar i tiene a,,e o a ,ualquier ,ontenido del itio He-.

5+ Ad-i!i,#&a"i4! ava!3ada
#tilizar Plone para prop& ito para lo que no ha ido di eGado ,onlleva un e 2uerzo ,on idera-le0 llegando a no er renta-le el e 2uerzo ne,e ario 2rente a otro CA$ ,onven,ional. 3area CA$ ,o*o on la ,rea,i&n de te*a 0 en Plone e ,o*pli,an iendo ne,e ario progra*a,i&n en python y de Mope. Ba ad*ini tra,i&n avanzada de Plone en e te ,ur o queda *uy li*itada0 pero opera,ione tEpi,a que realizan ad*ini tradore de Plone. e indi,arn alguna i*ple en otro ,ono,i*iento de

,.1. Co e C(I
Puede navegar en la ,on2igura,i&n del itio por la re tante op,ione llegando a ,ontrolar alguno a pe,to adi,ione de Plone pero0 para tener ,ontrol ,o*pleto de e te CA$ e ne,e ario entrar en la inter2az ad*ini trativa del ervidor Mope donde e eje,uta Plone. .Gadiendo la #RB de Plone la ,oletilla !ana6e a,,eder a Mope o de de el panel de ,ontrol de Plone ta*-iQn di pone de un a,,e o dire,to a la Inter4a/ de Md!inistracin de Hope lla*ada MA8 JHope Mana6e!ent Inter4aceK. Ba ,o*plejidad de Mope e *uy elevada tanto a nivel de ad*ini tra,i&n ,o*o a nivel de progra*a,i&n. $in pro2undizar en e te a pe,to hare*o un pequeGo re,orrido. T2(). )ntre en la pgina de Con2igura,i&n del auto*ti,a de pe taGa en Plone. T2().1. )ntre en la 8nter2az de .d*ini tra,i&n de Mope y a,,eda al o-jeto portalNa,tion . )l o-jeto portalNta- ,ontiene la pe taGa de Plone0 intente agregar una ,opiado la e4i tente. T2().2. 9e de e te *i *o o-jeto aGada un enla,e en el *en1 per onal que apare,e ,uando el u uario ha entrado en el i te*a. T2(-. Cree un ;or/2lo; propio de de el MA8 de Mope0 para ello ,opie uno de lo e4i tente y reali,e lo ,a*-io oportuno . 3enga en ,uenta la ,o*plejidad de e ta tarea. itio U =avega,i&n y de ha-ilite la genera,i&n

,.2. Dis osici2n de #as &ginas en P#one


Co*o en ,ualquier CA$ el nivel de pre enta,i&n de la in2or*a,i&n e t eparado del de dato y e -a a en el *odelo tradi,ional de divi i&n del rea del itio He- en di2erente regione . )n la 2igura D1 e repre entan de *anera e que*ti,a e ta regione .

;-2

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Cabecera Bogotipo

$ele,tor idio*a

Larra6*en1 per onal L1 queda

$e,,ione glo-ale

Enci!a del contenido Larra de navega,i&n

Gistas del contenido

Vi ta

.,,ione

Enci!a del t?tulo del contenido

Titulo /D5ina
Deba9o del t?tulo del contenido .utor [ 2e,ha " hi t&ri,o

9e ,rip,i&n del ,ontenido Portlet izquierdo Enci!a del cuerpo del contenido Portlet dere,ho

Contenido

Deba9o del cuerpo del contenido )le*ento rela,ionado .,,ione del do,u*ento

Deba9o del contenido Pala-ra ,lave $iguiente6.nterior Co*entario

"ie del portal Pie Colo2&n .,,ione del itio .nalyti,

i6ura K-. Disposicin de los Gie5lets en "lone.

Mdulo (a 3 "lone

;--

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

Plone organiza la regione *ediante %ie5lets y %ie5lets!ana6ers. #n %ie5let!ana6er e un ,onteneT dor de %ie5lets y un %ie5let equivale a un -loque de ,ontenido. 9entro de un %ie5let!ana6er e puede ,a*-iar el orden de pre enta,i&n de lo %ie5lets pero0 un %ie5let no puede ,a*-iar e de %ie5let!ana6er a otro in i*ple*entar un te*a que 2uer,e el ,a*-io. )n la 2igura D1 e han *ar,ado ,on lEnea di ,ontinua lo ,ontenedore de %ie5lets J%ie5lets!ana6ersK y en lEnea ,ontinua lo 2un,ionalidad. T2(9. Per onali,e pgina ,a*-iando de orden0 o,ultando y *o trando lo para ello utili,e el #RB http566lo,alho t6@@*anage"vie;let . T2(9.1. Con iga ,a*-iar de orden alguno de ello y o,ultar otro . T2(9.2. +Eje e en lo no*-re de lo %ie5lets y a,,eda al MA8 e intente editar el ,ontenido del vie;let ,orre pondiente al piQ del portal. Bo %ie5lets e pueden per onalizar en portalNvie;N,u to*ization . T2(9.3. 8ntente ahora per onalizar el 2or*ulario de entrada0 e t en portalN /in U ploneNlogin U loginN2or*. Gie5lets que intere en0 di2erente %ie5lets de Plone. Realizare*o alguna prue-a ,on e ta

,.3. Insta#aci2n de com #ementos


Ftra di2eren,ia entre e ta plata2or*a y H.AP e la ine4i ten,ia de un i,ono de ,ontrol. 9urante el pro,e o de in tala,i&n arran,ar el equipo. T2+1. )n el panel de ,ontrol de Hindo; a-ra Cerra*ienta ad*ini trativa U $ervi,io . .pare,er una ventana ,o*o la *o trada en la 2igura D20 -u que en la li ta lo do -a e de dato Meo y otro el ervidor He- Mope. Ba in tala,i&n de ,o*ple*ento en Plone requiere una parada ,o*pleta del ervidor Mope. Ba ,on2igura T ,i&n de Mope y de Plone e ,entraliza en un ar,hivo de ,on2igura,i&n de no*-re buildout.c46 y e puede en,ontrar en el dire,torio de in tala,i&n de Plone. $i lo ha in talado en la ruta por de2e,to0 lo podr en,ontrar en CJS"lone(-. $i edita e te ar,hivo ,on =otepad?? ver que e t divido en e,,ione donde e ,on2iguran ,ada una de la parte del ervidor Mope y el ge tor de ,ontenido Plone. ) ta e,,ione e di tinguen por u ,o*ienzo0 e*piezan ,on un te4to entre ,or,hete del *odo #nom3reSseci%n(. )n la do,u*enta,i&n de o-re Buildout en la pgina o2i,ial de Plone e tn do,u*entada toda la e,,ione . =o ,entrare*o en la e,,i&n #3uildout( donde e pueden aGadir ,o*ple*ento a Mope y Plone. $ie*pre tra la *odi2i,a,i&n del 2i,hero buildout.c46 hay que parar el ervidor y eje,utar un ,o*ando de a,tualiza,i&n0 *ientra no e eje,ute no e a,tualizar Mope y Plone0 por * que e ini,ie y e pare el ervidor. Co*o eje*plo de e te pro,e o e in talar Ci)ditor0 ,o*ple*ento ya utilizado en otro CA$. ervi,io de Plone0 uno e la e aGadieron do ervi,io al i te*a0 a E0 zope 2un,iona auto*ti,a*ente al

;-;

Mdulo (a 3 "lone

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa

i6ura K;. Ser%icios de "lone en Windo5s.

T2+1. )dite ,on =otepad?? el 2i,hero buildout.c46 y -u que en la e,,i&n #3uildout( el 2rag*ento de ,&digo indi,ado en el ,&digo <: y aGada el te4to indi,ado en negrita. ) te 2rag*ento indi,a al ,on2igurador Luildout que de-e -u ,ar en el repo itorio collecti%e de 8nternet el paquete python J2i,hero .eggK lla*ado c<editor.
eggs > "lone collecti*e.ckeditor Lcml > collecti*e.ckeditor Cdi6o )(. ra6!ento del 4ic.ero de con4i6uracin del "lone.

T2+1.1. .hora de-e detener lo do Hindo; Jver 2igura D2K.

ervi,io

de Plone de de el ad*ini trador de ervi,io

de

T2+1.2. #na ver parado hay que eje,utar la lEnea de ,o*ando de Hindo; de de e ta lEnea de ,o*ando al dire,torio *:/"lone41. #na vez

JCA9K y a,,eder e

ituado en e te dire,torio

eje,uta el ,o*ando 3in/3uildout.e4e. )l iguiente te4to *ue tra lo ,o*ando u ado en CA9 y la alida o-tenida tra la in tala,i&n del produ,to.
Microsoft indows !" #$ersi%n &.1.2'00( )*+ *op,right 1-8&.2001 Microsoft *orp. *:/0ocuments and 1ettings/23o4.user5cd c:/ *:/5cd c:/"lone41 *:/"lone415cd "lone *:/"lone415bin?buildout.e/e ... ... ...

Mdulo (a 3 "lone

;-'

II Curso de Diseo de Sitios WEB basados en Gestores de Contenidos de libre distribucin Centro de or!acin "er!anente # $ni%ersidad de Se%illa ... ZZZZZZZZZZZZZZZ "6*g80 $8=16K;1 ZZZZZZZZZZZZZZZZ #2ersions( collecti2e.cXeditor > 3.'.2 collecti2e.flowpla,er > 3.0rc4 collecti2e.plonefinder > 1.0.2 collecti2e.AuicXupload > 1.&.1 enfold.recipe.winser2ice > 0.F.2 hachoir.core > 1.3.3 hachoir.metadata > 1.3.3 hachoir.parser > 1.3.4 redturtle.2ideo > 0.F.3 ZZZZZZZZZZZZZZZ /"6*g80 $8=16K;1 ZZZZZZZZZZZZZZZ *:/"lone415 Cdi6o )). E9ecucin de la actuali/acin de "lone con buildout.

T2+1.3. 8ni,ie Plone de de el ad*ini trador de ervi,io de Hindo; y navegue a la pgina de ,on2igura,i&n del itio para ,o*pro-ar i apare,e el ,o*ple*ento Ci)ditor y a,tivarlo. 3ra a,tivarlo de-er ,on2igurarlo. T2+2. Lu que un produ,to en la pgina o2i,ial de Plone para galerEa de 2oto 0 intente aGadirlo en el 2i,hero buildout.c46 repitiendo el pro,e o anterior de in tala,i&n.

;-(

Mdulo (a 3 "lone

También podría gustarte