Curso Cms Julio2014 PDF

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

Sevilla, Julio de 20!
Paulino Ruiz de Clavijo Vzquez <paulino@dte.us.es>
Copyright 2014 Paulino Ruiz de Clavijo Vzquez <paulino@dteu!e!" # $niver!idad de %evilla
&ulio de 2014 Revi!i'n 4(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
*!te o.ra !e di!tri.uye .ajo una /i-en-ia Creative Co++on! 0tri.u-i'n 10 $nported2 u!ted e! li.re de
-o+partir2 -opiar2 di!tri.uir2 eje-utar2 -o+uni-ar p3.li-a+ente la o.ra2 ha-er o.ra! derivada! y ha-er un
u!o -o+er-ial de e!ta o.ra2 !ie+pre que !e -ite la 4uente y !e re!peten la! -ondi-ione! de la li-en-ia
0tri.u-i'n 10 $nported de Creative Co++on!
5e6to -o+pleto de la li-en-ia en http788-reative-o++on!org8li-en!e!8.y8108deede!
I 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...........................................................................................7
1Re!u+en(
29nternet y -on-epto! .!i-o! !o.re rede! de -o+putadore!(
21:ire--ione! 9P y %ervidore! de no+.re!;
22Puerto!11
1%o4t<are li.re y re-ur!o! li.re!12
11/i-en-ia! de %o4t<are /i.re14
12Copyle4t2 =eneral Pu.li- /i-en!e >=P/? y Creative Co++on!1@
4Prepara-i'n del entorno de tra.ajo1(
41Aavegador ,ire4o61(
42*ditor de te6to! AotepadBB1;
41Cliente ,5P ,ilezilla20
44*ditor de i+gene! =9CP21
@Realiza-i'n op-ional21
)Re4eren-ia!22
Modulo 1b - HTML y CSS..............................................................................................................23
1Re!u+en21
29ntrodu--i'n21
1/enguaje D5C/2@
4Doja! de e!tilo! en -a!-ada C%%2E
41Regla! C%%2;
42%ele-tore!2;
41Prioridad de !ele-tore!11
44Codelo de -aja!14
4@Cedida!1;
4)5ipogra4Fa!41
4(Cedio! y -on!ulta! de +edio! C%%41
4EGtro! a!pe-to!4(
@*je+plo! de di!eHo! .a!ado! en hoja! de e!tilo C%%4E
@1*6ten!i'n ,ire.ug para ,ire4o64;
)Con!ejo! C%%@0
(Realiza-i'n op-ional@1
EC%%1 y eje+plo! tratado! a lo largo del -ur!o@1
;Re4eren-ia!@2
Mdulo 1c - Platafora! "MP - #itnai......................................................................................$3
1Re!u+en@1
29ntrodu--i'n@1
19n!tala-i'n de Iitna+i J0CP@4
4:e!arrollo -on Iitna+i@@
41%ervidor Je. 0pa-he@)
'ndice de contenido (
42Copia de !eguridad@)
@/enguaje de progra+a-i'n PDP@E
)Realiza-i'n op-ional@;
(Re4eren-ia!@;
Mdulo 1d - #a!e de dato! M%S&L...............................................................................................'1
1Re!u+en)1
29ntrodu--i'n)1
10d+ini!tra-i'n de Cy%K/)2
11=e!ti'n de u!uario! y privilegio!)1
12Con-epto! .!i-o! en .a!e! de dato! rela-ionale!)4
119+porta-i'n y e6porta-i'n)(
4Con-epto! avanzado!)E
@Re4eren-ia!)E
Mdulo 2a - (i)i!.........................................................................................................................'*
1Re!u+en);
29ntrodu--i'n);
1:oLuJiLi(0
119n!tala-i'n de :oLuJiLi(1
12=e!ti'n de u!uario!2 grupo! y li!ta! de -ontrol del a--e!o >/C0 # 0C/?(1
110!pe-to vi!ual y plantilla!(@
14Plantilla! y -o+ple+ento!()
1@Copia de !eguridad2 -lona-i'n del !itio y a-tualiza-ione!(E
4CediaJiLi(E
419n!tala-i'n y ad+ini!tra-i'n(E
@Re4eren-ia!E2
Mdulo 2b - +e!tore! de foro!......................................................................................................,3
1Re!u+enE1
29ntrodu--i'nE1
1%i+ple Ca-hine! ,oru+ # %C,E4
119n!tala-i'n y ad+ini!tra-i'n de %C,E4
129n!tala-i'n de -o+ple+ento!EE
110!pe-to vi!ualE;
40!pe-to! avanzado!;2
41Clona-i'n del !itio;1
42Control de %P0C;@
@php Iulletin Ioard;(
)Re4eren-ia!;(
Mdulo 2d - Pre!taS-o.................................................................................................................**
1Re!u+en;;
29ntrodu--i'n;;
19n!tala-i'n y ad+ini!tra-i'n .!i-a100
) 'ndice de contenido
11C'dulo! y di!po!i-i'n de la pgina101
12Crea-i'n del -atlogo104
11G4erta! y pro+o-ione!10E
4=e!ti'n del pago y envFo10E
41Pa!arela! de pago110
42Paypal !and.o6111
@ConMgura-i'n de la pre!enta-i'n114
@19n!tala-i'n de nuevo! te+a!11@
@2:e!arrollo de un te+a11)
)0d+ini!tra-i'n avanzada121
)1Produ-to! Virtuale!122
)2Canteni+iento del -atlogo122
)1=e!ti'n de u!uario!7 -liente! y e+pleado!122
)4Pue!ta en e6plota-i'n121
)@Gtra! -ara-terF!ti-a!124
))CodiM-a-ione! e6tra2 .ug en el -orreo ele-tr'ni-o124
(Re4eren-ia!12@
Mdulo 2e - (ordPre!!...............................................................................................................127
1Re!u+en12(
29ntrodu--i'n12(
19n!tala-i'n y -onMgura-i'n .!i-a12E
4Pu.li-a-i'n de -ontenido!12;
41Contenido +ulti+edia112
@:i!po!i-i'n del .log y a!pe-to111
@1Pgina prin-ipal y pgina! e!tti-a!111
@2Cen3!114
@1Jidget!11)
@45e+a!11(
@@Crea-i'n de te+a!11E
)Plugin!141
(Gp-ione! avanzada!141
(1$R/! a+iga.le!142
(25ra-L.a-L! y Ping.a-L!142
(1=e!ti'n de u!uario!144
(4Clona-i'n del !itio144
(@Gtra! -ara-terF!ti-a!14)
ERe4eren-ia!14(
Mdulo 3a - /oola.....................................................................................................................10*
1Re!u+en14;
29ntrodu--i'n14;
19n!tala-i'n1@0
40d+ini!tra-i'n de -ontenido!1@1
41CategorFa! y artF-ulo!1@1
420d+ini!tra-i'n de +en3!1@1
'ndice de contenido *
41=e!tor +ulti+edia1@(
@Pre!enta-i'n de -ontenido!1@E
@10d+ini!tra-i'n de +'dulo!1@E
@2Plantilla!1)4
@1Crea-i'n de una plantilla!1)4
)0d+ini!tra-i'n avanzada1(1
)1Clona-i'n del !itio1(1
)20d+ini!tra-i'n de u!uario!1(1
)1Co+ple+ento!1(2
)4C! -o+ponente!1(1
(Re4eren-ia!1(1
Mdulo 3b - 1ru.al.....................................................................................................................17$
1Re!u+en1(@
29ntrodu--i'n1(@
19n!tala-i'n y -onMgura-i'n .!i-a1()
11ConMgura-i'n .!i-a1()
129n!tala-i'n de -o+ple+ento! 8 +'dulo!1((
40d+ini!tra-i'n de -ontenido!1(E
41Crea-i'n de -ontenido!1(;
42Cen3!1E1
415ipo! de -ontenido!1E2
445a6ono+Fa1E@
4@Iloque!1E(
@0d+ini!tra-i'n de u!uario! y per+i!o!1EE
)5e+a!1;2
(Co+ple+ento! de!ta-ado!1;@
E:i!tri.u-ione!1;(
;Re4eren-ia!1;(
+ 'ndice de contenido
&odulo a ' I#%e(#e% ) So*%+a(e Li,(e
Conceptos bsicos de redes, Internet y TCP/IP
!lternativas al so"t#are co$ercial
- Re.u/e#
:ura-i'n e!ti+ada7 1 hora
Caterial di!poni.le en http788<<<dteu!e!8-ur!o!8-+!8julio201 4
2ic-ero 1e!cri.cin
,ire4o6 %etup 100e6e Ver!i'n para Jindo<! del navegador ,ire4o6
npp)@@9n!tallere6e *ditor de te6to! AotepadBB
,ileNillaO1E0O<in12#!etupe6e ,ilezilla -liente ,5P
pri+eraOpaginazip *je+plo !i+ple de pgina Je.
tpl#.luetide!zip2 tpl#re!pon!ivezip Plantilla! Je. de eje+plo
,abla -. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%e(#e% ) $o#$e0%o. ,1.i$o. .o,(e (ede. de $o/0u%ado(e.
9nternet e! una red de -o+uni-a-ione! de ordenadore! que utilizan un proto-olo de -o+uni-a-ione!
lla+ado 5CP89P Aa-i' -o+o un proye-to deno+inado 0RP0A*5 en-argado por el :eparta+ento de
:e4en!a de lo! *!tado! $nido! :e 4or+a +uy re!u+ida2 !e puede de-ir que la! -o+uni-a-ione! de
9nternet !e .a!an en tre! -on-epto! .!i-o!7 dire--ione! 9P2 proto-olo! y !ervi-io!
/a dire--i'n 9P identiM-a a un ordenador en 9nternet2 ha-e po!i.le !u -o+uni-a-i'n -on el re!to de
ordenadore! ya que2 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 di4erente 9P *n prin-ipio2 una deter+inada dire--i'n 9P !olo puede pertene-er
a un equipo -one-tado en la red en un in!tante de tie+po2 aunque a-tual+ente2 e!t! dire--ione! !e
Rev 4(2)
-o+parten $n eje+plo de -o+parti-i'n de dire--i'n 9P o-urre en -ualquier router 0:%/ de lo! que
di!pone+o!2 real+ente el router e! quien po!ee la dire--i'n 9P que no! o4re-e nue!tro proveedor de
!ervi-io y !e en-arga de -o+partirla entre lo! di4erente! equipo! que tenga+o! -one-tado! al router
Por otro lado2 en 9nternet en-ontra+o! diver!o! !ervi-io! -o+o -orreo ele-tr'ni-o2 pgina! Je.2 !ervi#
dore! de hora2 tele4onFa2 vFdeo -on4eren-ia!2 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+3n 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+plo2 el -orreo ele-tr'ni-o utiliza el proto-olo
%C5P para envFo y PGP1 o 9C0P para le-tura2 la! pgina! Je. utilizan el proto-olo D55P2 y la!
tran!4eren-ia! de ar-hivo! !e realizan2 tradi-ional+ente2 utilizando el proto-olo ,5P
$na dire--i'n 9P e!t 4or+ada por 4 n3+ero!2 -ada uno de ello! en un rango P0#2@@Q2 por eje+plo
1001210 *l n3+ero total de -o+.ina-ione! e! del orden de 4000 +illone! de dire--ione!2 que por
-ierto2 a-tual+ente e!tn agotada!2 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 9P del equipo re+oto
Para !i+pliM-ar el u!o de la! dire--ione! de 9nternet !e invent' el !ervi-io de 9nternet :A% >Do"ain
0a"e S1ste"? *!te !ervi-io !e a!e+eja a un dire-torio de telR4ono!2 !e utiliza para tradu-ir no+.re! de
do+inio a dire--ione! 9P /o! no+.re! de do+inio e!tn nor+alizado! y !e 4or+an uniendo do! o +!
parte! !eparada! por punto! *l punto !irve para 4or+ar una e!tru-tura jerrqui-a y tratando el no+.re
de dere-ha a izquierda !e ha-en divi!ione! en -ada punto2 -ada !u.divi!i'n !e lla+a !u.do+inio Por
eje+plo2 <<<dteu!e! ha-e re4eren-ia una deter+inada dire--i'n 9P :i-ho no+.re ha !ido a!ignado
jerrqui-a+ente a vario! re!pon!a.le! de ge!ti'n de do+inio!7 Se!T e! re!pon!a.ilidad de *%A9C PRe4
1Q y ha a!ignado Su!T a la $niver!idad de %evilla2 SdteT e! re!pon!a.ilidad de la $niver!idad de %evilla y
lo ha a!ignado al :eparta+ento de 5e-nologFa *le-tr'ni-a y S<<<T ha !ido a!ignado por el
:eparta+ento de 5e-nologFa *le-tr'ni-a al !ervidor de pgina! Je. -uya 9P e! 1@02141411;)
9C0AA e! la -orpora-i'n en-argada de la a!igna-i'n de no+.re! de do+inio y dire--ione! de 9nternet
*! re!pon!a.le de la ad+ini!tra-i'n y -oordina-i'n de todo el !i!te+a de no+.re! de do+inio y
garantiza que -ada dire--i'n !ea 3ni-a y que todo! lo! no+.re! de do+inio tengan a!ignada una
dire--i'n 9P =e!tiona dire-ta+ente la jerarquFa .co"2 net2 or2 et-2 +ientra! que delega otra!
jerarquFa! -o+o !on es2ar2de et- a organi!+o! lo-ale! en-argado! de la ge!ti'n en -ada paF! *n el
-a!o de *!paHa el organi!+o en-argado de la jerarquFa Se!T !e lla+a *%A9C
Gtro tRr+ino utilizado de +anera -o+3n en la ter+inologFa de 9nternet e! $R/2 a-r'ni+o de %ni3or"
4esource Locator5 y generalizado a-tual+ente en el tRr+ino $R9 >%ni3or" 4esource Identi6er? $n
$R/8$R9 e! una !e-uen-ia de -ara-tere! nor+alizada para no+.rar re-ur!o! en 9nternet *n la Mgura 1
!e +ue!tran 2 eje+plo! de $R/!2 la pri+era de ella! e! -ono-ida -o+o dire--i'n Je. y la !egunda ha-e
re4eren-ia a una -one6i'n -on el proto-olo ,5P a un !ervidor de M-hero!
0+.o! eje+plo! +ue!tran lo! di4erente! -o+ponente! que 4or+an parte de una dire--i'n2 de!ta-a+o! el
pri+ero de ello! que ha-e re4eren-ia al proto-olo u!ado en la -o+uni-a-i'n 0 lo largo de e!te -ur!o
tra.ajare+o! prin-ipal+ente -on lo! proto-olo! D55P2 ,5P2 D55P%2 ,5P%2 9C0P y %C5P
7 Modulo -a 8 Internet 1 So3t9are Libre
!i2ura -. E:e"plos de %4Ls para protocolo ;,,#
1 protocolo !,#.
2.1. Direcciones IP y Servidores de nombres
Realizare+o! alguna! prue.a! -on lo! no+.re! de do+inio y dire--ione! 9P en Jindo<! Ae-e!i#
ta+o! tra.ajar -on la lFnea de -o+ando! >CC:? de Jindo<! que e! un progra+a que !e puede lo-alizar
en el +en3 de 9ni-io
T1. 9ni-ie la lFnea de -o+ando! de Jindo<! >CC:? *!t en Cen3 de 9ni-io U 5odo! lo! progra+a! U
0--e!orio! U %F+.olo del !i!te+a %e a.rir una ventana -on 4ondo negro donde !e pueden te-lear
-o+ando!
T1.1. 5e-lee el te6to ipconfig y pul!e la te-la de !alto de lFnea2 de.erFa o.tener un re!ultado
pare-ido al +o!trado7
Microsoft Windows [Versin 6.1.7601]
Copyright (c) 200 Microsoft Corpor!tion. "eser#!dos todos $os derechos.
C%&'sers&#(o)*ipconfig
Config+r!cin ,- de Windows
.d!pt!dor de /thernet Cone)in de 0re! $oc!$%
1+fi2o 341 espec5fico p!r! $! cone)in. . % pcte6.dte.+s.es
V5nc+$o% direccin ,-#6 $oc!$. . . % fe70%%1cc%6f27%72c6%678911
3ireccin ,-#6. . . . . . . . . . . . . . % 192.168.19.125
M0sc!r! de s+(red . . . . . . . . . . . . % 288.288.288.0
-+ert! de en$!ce predeter:in!d! . . . . . % 12.167.1.1
.d!pt!dor de t;ne$ is!t!p.pcte6.dte.+s.es%
/st!do de $os :edios. . . . . . . . . . . % :edios desconect!dos
1+fi2o 341 espec5fico p!r! $! cone)in. . % pcte6.dte.+s.es
.d!pt!dor de t;ne$ <eredo <+nne$ing -se+do=,nterf!ce%
1+fi2o 341 espec5fico p!r! $! cone)in. . %
3ireccin ,-#6 . . . . . . . . . . % 2001%0%d>7%6!(d%20e%>!e%>f87%ec72
V5nc+$o% direccin ,-#6 $oc!$. . . % fe70%%20e%>!e%>f87%ec7291>
-+ert! de en$!ce predeter:in!d! . . . . . % %%
Cdi2o -. Co"ando ipcon62 de Windo9s.
Modulo -a 8 Internet 1 So3t9are Libre <
http%??www.dte.+s.es%70?c+rsos?c:s
Proto-olo
0nMtri'n
Puerto
Ruta de re-ur!o
ftp%??2+!n%12>6@ftp.e2e:p$o.co:%21?doc?
Proto-olo
0nMtri'n
Puerto
Re-ur!o
Contra!eHa
$!uario
$tilizando la lFnea de -o+ando! de Jindo<! >CC:? !e pueden averiguar la dire--ione! 9P de alguno!
no+.re! de do+inio %e pro-eder a la navega-i'n -on dire--ione! 9P en vez de -on no+.re para
-o+pro.ar la utilidad de lo! !ervidore! de no+.re! >:A%?
T2. $tilizando la ventana anterior te-lee el -o+ando pin2 !eguido de un e!pa-io y el no+.re del
do+inio que de!ee pro.ar2 por eje+plo ping www.goog$e.es7
C%&3oc+:ents !nd 1ettings&#(o)=+ser*ping www.goog$e.es
A!ciendo ping ! www.goog$e.es [17>.16.68.26] con >2 (ytes de d!tos%
"esp+est! desde 17>.16.68.26% (ytesB>2 tie:poB70:s <<CB8>
/st!d5stic!s de ping p!r! 17>.16.68.26%
-!D+etes% en#i!dos B 6E reci(idos B 6E perdidos B 0
(09 perdidos)E
<ie:pos !pro)i:!dos de id! y #+e$t! en :i$iseg+ndos%
M5ni:o B 66:sE M0)i:o B 111:sE Medi! B 7:s
Cdi2o =. Co"probacin pin2.
T2.1. $tili-e la dire--i'n 9P o.tenida por el -o+ando pin2 y de!de el navegador de 9nternet
e!-ri.a en la .arra de dire--i'n http7886666 donde >.>.>.> e! la 9P2 para el -a!o anterior e!
http7881(11;44@24
T2.2. Repita el pro-e!o -on alguno! no+.re! de do+inio2 por eje+plo7 <<<u!e!2 <<<dteu!e!2
<<<rediri!e! y 4tprediri!e!
5ra! +o!trar el 4un-iona+iento de lo! !ervidore! :A%2 puede intentar adquirir alg3n do+inio :e.e+o!
.u!-ar por internet alg3n regi!trador oM-ial2 !egura+ente en-ontre+o! -iento! de +ile! %in ni+o de
ha-er ning3n tipo de pu.li-idad2 tra.ajare+o! -on uno de ello! e!-ogido en +i -a!o para +i! aloja+ien#
to! per!onale!
T3. Aavegue a la dire--i'n http788<<<pien!a!olution!-o+2 donde apare-er un proveedor de !ervi#
-io! e!paHol :e.e+o! pul!ar !o.re la pe!taHa :o+inio! y apare-er un -uadro para regi!trar
no+.re! de do+inio!
T3.1. *!-ri.a /opeplone y pul!e !o.re .u!-ar 0pare-er un li!tado -on toda! la! e6ten!ione!
po!i.le! para el no+.re2 el pre-io e indi-a-ione! !o.re la di!poni.ilidad
T3.2. *n la !egunda -olu+na apare-e in4or+a-i'n !o.re el e!tado7 li.re u o-upado Pul!e !o.re
el i-ono -on una interroga-i'n para el do+inio /opeplone.es para ver lo! dato! di!poni.le! !o.re
el +i!+o
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 !iga lo! pa!o!2 pero en alg3n +o+ento le !oli-itarn el pago
-? Modulo -a 8 Internet 1 So3t9are Libre
2.2. Puertos
*l 3lti+o -on-epto !o.re 9nternet tratado e! el lla+ado puerto en el proto-olo 5CP89P *n la!
-o+uni-a-ione! 5CP89P entre do! ordenadore! pueden e6i!tir varia! -one6ione! a-tiva! !i+ultnea#
+ente2 para di4eren-iarla!2 !e le a!igna a -ada -one6i'n un n3+ero deno+inado puerto *!to! n3+ero!
en el proto-olo 5CP e!tn li+itado! al rango P02)@@1@Q
Cuando un equipo tiene el papel de !ervidor de !ervi-io! de red >Je.2 *Cail2 ,5P2 et-?2 -ada uno de lo!
!ervi-io! e!t a!o-iado a un puerto *n toda -o+uni-a-i'n 5CP89P 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 -one6i'n /o! pri+ero! puerto! P0#1021Q !e
deno+inan puertos bien conocidos >9ell @no9n ports? *!to! tienen a!o-iado! alguno! de lo! !ervi-io!
+! -ono-ido! en 9nternet -o+o7 puerto E0 proto-olo D55P2 puerto 2@ proto-olo %C5P >-orreo
ele-tr'ni-o?2 puerto 21 proto-olo ,5P2 puerto 441 proto-olo D55P%2 et-
Daga+o! alguna! prue.a! para -o+prender el -o+porta+iento de e!te +e-ani!+o 5C9P89P
T0. *!ta! pri+era! prue.a! !e realizarn -on el navegador de 9nternet Aavegue a la dire--i'n
4tprediri!e! pero en la dire--i'n aHada el puerto7 http7884tprediri!e!7E0 y o.!erve el re!ultado
T0.1. Ca+.ie en la dire--i'n el n3+ero del puerto a 212 quedando la dire--i'n a!F7
http7884tprediri!e!721 G.!erve el +en!aje en el navegador ,ire4o62 no! indi-a que el puerto no !e
utiliza ha.itual+ente para navega-i'n Je.
T0.2. *l puerto 21 e! utilizado para el !ervi-io ,5P de tran!4eren-ia! de M-hero! Ca+.ie el
proto-olo de D55P a ,5P en la dire--i'n $R/2 de.e quedar -o+o !igue7 4tp7884tprediri!e!721
G.tendr un li!tado de lo! M-hero! e6i!tente! en el !ervidor de M-hero! de Red9ri!
T0.3. 0hora navegue al puerto 441 -on http788+ailzopeplonee!74418 *!te puerto requiere
-one6ione! !egura! D55P%2 prue.e ahora http!788+ailzopeplonee!74418 0Hada la -orre!pon#
diente e>cepcin de se2uridad para entrar en el !itio
T0.0. Por 3lti+o navegue al !ervidor de pro4e!or2 pero al puerto E0E0 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!Mri' un
ar-hivo que -ontenFa la pgina Je. en 4or+ato D5C/ *l -ontenido de e!te ar-hivo e! legi.le y
puede ver!e en el +en3 Ver U C'digo 4uente de la pgina /o! 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 9P2 puerto y proto-olo
!e realizar una 3lti+a prue.a -on una herra+ienta de .ajo nivel deno+inada telnet. *!te herra+ienta
4un-iona en la lFnea de -o+ando! de Jindo<! >CC:? y +ue!tra en la pantalla lo! dato! tran!4erido!
entre lo! ordenadore! tal y -o+o !e tran!+iten2 no -o+o lo! navegadore! que lo! interpretan
T$. 0--eda al panel de -ontrol de Jindo<! ( y .u!que la entrada Progra+a! y -ara-terF!ti-a!
:e!de la parte izquierda de la nueva ventana a--eda a 0-tivar o de!a-tivar la! -ara-terF!ti-a! de
Jindo<!
Modulo -a 8 Internet 1 So3t9are Libre --
T$.1. $na vez !e rellene la nueva ventana2 !ele--ione Cliente 5elnet y pul!e 0-eptar
T$.2. 0hora2 a.ra el interprete de -o+ando! CC: del +i!+o +odo que !e indi-' en 51
T$.3. *je-ute el !iguiente -o+ando te$net www.dte.+s.es 70 al pul!ar la te-la de nueva lFnea !e
quedar la pantalla va-Fa y el -ur!or parpadeando 0hora de.e te-lear un te6to2 no !e preo-upe
-uando al te-lear el te6to no !e +ue!tre en pantalla2 e! nor+al 5e-lee e6a-ta+ente get ? 4Fje!e
que ante! de la .arra hay un e!pa-io %i pul!a la te-la el !alto de lFnea2 el !ervidor le re!ponder
-on la pgina Je.
T$.0. Realizare+o! una !egunda prue.a -one-tndono! al puerto 21 >,5P? de Red9ri! 5e-lee
te$net ftp.rediris.es 21 re-i.ir un +en!aje de .ienvenida 5ra! e!to e!-ri.a he$p2 pul!e la te-la
!alto de lFnea y re-i.ir una li!ta de -o+ando! vlido! en el proto-olo de -o+uni-a-i'n *!-ri.a
D+it y a.andonar la -o+uni-a-i'n
C%&3oc+:ents !nd 1ettings&+ser*telnet ftp.rediris.es 21
220========== We$co:e to -+re=F<-d [pri#sep] [<C1] ==========
220=Go+ !re +ser n+:(er 87 of >000 !$$owed.
220=HH
220= Iien#enido !$ F<- !nJKni:o de "ed,",1.
220=We$co:e to the "ed,",1 !nony:o+s F<- ser#er.
220=**
220=Coc!$ ti:e is now 1>%6>. 1er#er port% 21.
220=Ln$y !nony:o+s F<- is !$$owed here
220=,-#6 connections !re !$so we$co:e on this ser#er.
220 Go+ wi$$ (e disconnected !fter 8 :in+tes of in!cti#ity.
he$p
216=<he fo$$owing 1,</ co::!nds !re recogniMed
.C,.1
CAML3
,3C/
'<,M/
216 -+re=F<-d = http788pure4tpdorg8
Cdi2o (. E:e"plo de co"unicacin !,# con el co"ando telnet.
T$.$. Repita en el puerto 2@ -on el -o+ando te$net tec$i).dte.+s.es 282 pul!e la te-la de !alto
de lFnea y e!pere el +en!aje de .ienvenida 5ra! e!to te-lee he$p para o.tener ayuda !o.re el
proto-olo $!e D+it para !alir2 !i el !ervidor no le e6pul!a ante!
T$.'. Repita lo! -on te$net www.Mopep$one.es 877 y o.!erve la !i+ilitude! -on el anterior Va que
!ervi-io !e ha -one-tadoW
T$.7. Iu!que en =oogle la 4ra!e puertos tcpip o -ualquier 4ra!e pare-ida y vea lo! n3+ero! de
puerto! a!o-iado! a -ada proto-olo de red y averigXe -ual e! n3+ero de puerto del !ervi-io :A%
2- So*%+a(e li,(e ) (e$u(.o. li,(e.
Ri-hard %tall+an2 un progra+ador e!tadouniden!e de re-ono-ido pre!tigio2 e! el 4undador del
deno+inado +ovi+iento por el !o4t<are li.re *!te +ovi+iento ha revolu-ionado el +odelo de nego-io
de la indu!tria del !o4t<are Co+enz' en 1;E@ -uando Ri-hard %tall+an 4und' una organiza-i'n !in
-= Modulo -a 8 Internet 1 So3t9are Libre
ni+o de lu-ro lla+ada !ree So3t9are !oundation PRe4 2Q donde deMne el !o4t<are li.re %eg3n Ri-hard
%tall+an el !o4t<are li.re !e reMere a la li.ertad de lo! u!uario! para eje-utar2 -opiar2 di!tri.uir2
e!tudiar2 +odiM-ar el !o4t<are y di!tri.uirlo +odiM-ado *!en-ial+ente2 el !o4t<are li.re e! di4erente al
!o4t<are gratuito lla+ado ha.itual+ente 3ree9are2 aunque R!te 3lti+o en prin-ipio e! li.re2 puede !er
Mnal+ente u!ado -o+er-ial+ente2 al Mn y al -a.o e! !o4t<are -o+er-ial
Ri-hard %tall+an deMne el !o4t<are li.re en la !ree So3t9are !oundation PRe4 1Q -o+o7
El Aso3t9are libreB es una cuestin de libertad5 no de precio. #ara entender el
concepto5 deberCa pensar en AlibreB co"o en Alibre e>presinB5 no co"o en Abarra
libreB.
El so3t9are libre es una cuestin de la libertad de los usuarios de e:ecutar5 copiar5
distribuir5 estudiar5 ca"biar 1 "e:orar el so3t9are. MDs precisa"ente5 si2ni6ca Eue
los usuarios de pro2ra"as tienen las cuatro libertades esenciales.
%eg3n Ri-hard %tall+an un !o4t<are e! li.re -uando garantiza e!ta! -uatro li.ertade!7
/a li.ertad de eje-utar el progra+a para -ualquier prop'!ito >li.ertad 0?
/a li.ertad de e!tudiar -'+o tra.aja el progra+a2 y -a+.iarlo para que haga lo que u!ted quiera
>li.ertad 1? *l a--e!o al -'digo 4uente e! una -ondi-i'n ne-e!aria para ello
/a li.ertad de redi!tri.uir -opia! para que pueda ayudar al pr'ji+o >li.ertad 2?
/a li.ertad de di!tri.uir -opia! de !u! ver!ione! +odiM-ada! a ter-ero! >la 1Y li.ertad? %i lo ha-e2
puede dar a toda la -o+unidad una oportunidad de .eneM-iar!e de !u! -a+.io! *l a--e!o al
-'digo 4uente e! una -ondi-i'n ne-e!aria para ello
*!te +ovi+iento -uyo origen !e puede datar en 1;E@ ha dado !u! 4ruto! en +ultitud de !o4t<are li.re
donde2 proye-to! -o+o FpenFGice8!reeFGice2 Wi@ipedia2 !ire3o> y G0%HLinu> !on -on!iderado! .uque!
in!ignia 0-tual+ente e6i!ten Je.! lla+ada! 4orja! de !o4t<are >Git;ub2 Source!or2e2 et-? que !on
in-u.adora! de de!arrolladore! donde -ola.oran en lo! proye-to! allF alojado! Co+o +ue!tra de la
+agnitud de e!te tipo +ovi+iento!2 Source!or2e -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 !o4t<are li.re en toda! la! etapa! del de!arrollo de lo! !itio! Je. %e
podrFa di!-utir a+plia+ente !o.re la -alidad de -ada herra+ienta de !o4t<are li.re 4rente a una
-o+er-ial2 !egura+ente2 no !e llegarFa a ninguna -on-lu!i'n -onvin-ente 9ndependiente+ente de la
4un-ionalidad2 -alidad u otro! a!pe-to! del !o4t<are que !e anali-en2 hoy en dFa e! una realidad poder
-u.rir toda! la! etapa! del de!arrollo de un !itio Je. .a!ado en un ge!tor de -ontenido! >CC%? !in u!ar
ning3n !o4t<are -o+er-ial2 -on una !erie ventaja! y otra !erie de in-onveniente!
:urante la realiza-i'n del -ur!o !e utilizarn diver!a! herra+ienta! !o4t<are2 toda! ella! !o4t<are li.re
$n -onjunto !uM-iente de herra+ienta! !o4t<are ne-e!aria! para poder -on!truir un !itio Je. .a!ado en
un CC% !erFa7
Modulo -a 8 Internet 1 So3t9are Libre -(
*ditor de te6to!7 0unque Jindo<! di!pone del .lo- de nota!2 propone+o! -o+o alternativa
utilizar 0otepadII PRe4 4Q2 el -ual in-luye un navegador de ar-hivo! y un -liente ,5P
*ditor de i+gene!7 Gi"p de =A$ PRe4 @Q2 tra.aja -on -ualquier 4or+ato de i+agen en +apa de
.it!
*ditor de grM-o! ve-toriale!7 In@scape PRe4 )Q el -ual e! !i+ilar al !o4t<are -o+er-ial Illustrator2
!ree.and2 CorelDra9 o Jara J =uarda lo! grM-o! u!ando el e!tndar Scalable ector Grap.ics
>%V=? de J1C
Aavegador J*I7 !ire3o>2 navegador de 9nternet de Mo/illa PRe4 (Q a+plia+ente -ono-ido
Progra+a para -o+uni-a-ione! -on el proto-olo ,5P7 !ileKilla PRe4 EQ e! una !olu-i'n ,5P li.re
4or+ada por do! progra+a!7 un -liente ,5P y un !ervidor ,5P
Co+pre!or8:e!-o+pre!or li.re7 (zip PRe4 ;Q !er 3til para de!-o+pri+ir la in!tala-i'n de alguno!
CC% y para ha-er -opia de !eguridad del tra.ajo realizado *l -o+pre!or N9P in-orporado -on
C%Jindo<! tiene alguna! deM-ien-ia! y no -onviene u!arlo2 !e pueden perder ar-hivo! y
-arpeta!
Con la +i!+a Mlo!o4Fa que el !o4t<are li.re2 apare-en +ultitud de ini-iativa! en el +i!+o !entido pero
-on todo tipo de re-ur!o! -o+o pueden !er .i.liogrM-o!2 4otogrM-o!2 artF!ti-o!2 et- Gtro! tipo!
re-ur!o! li.re! e intere!ante! para el de!arrollo del -ur!o !in lo! !iguiente!7
=alerFa li.re de i+gene! ve-toriale!7 FpenClipart2 PRe4 10Q in-luye ver!i'n de!-arga.le e
In@scape trae in-luido un enla-e dire-to -on e!te !itio
=alerFa de 4oto! li.re!7 Fpenp.oto PRe4 11Q entre otra! 4un-ionalidade! per+ite .ajar la!
4otogra4Fa! a di4erente! re!olu-ione!2 evitando tener que editarla! -on el editor de i+gene!
Gpen Je. :e!ign7 PRe4 12Q e! un -atlogo de plantilla! D5C/ y hoja! de e!tilo C%% li.re! para !u
u!o en !itio! Je.
=oogle ,ont!7 PRe4 11Q e! una galerFa de tipogra4Fa! li.re! que !e pueden utilizar o de!-argar
Per+ite u!arla! dire-ta+ente de!de lo! !ervidore! de =oogle o de!-argarla! para !u u!o y tiene
una inter4az +uy a+iga.le -on vi!ta previa de toda! la! tipogra4Fa! di!poni.le!
3.1. Licencias de Software Libre
0nte! de ter+inar e!te +'dulo e! i+portante -o+entar alguno! a!pe-to! !o.re la! li-en-ia!2 !o.re
todo en la parte -on-erniente al !o4t<are y a lo! re-ur!o! grM-o! e6i!tente! en la red *n prin-ipio una
-rea-i'n !ie+pre e!t .ajo un -opyright2 por de4e-to nadie puede -opiar2 di!tri.uir2 -o+uni-ar2 -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!
4or+a! de li-en-ia -on el Mn de au+entar la! po!i.ilidade! de di!tri.u-i'n2 !o.re todo en 9nternet
*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.ra2 pero a !u vez2 la li-en-ia deja -laro -uale! !on la! li+ita-ione! de u!o de la
o.ra *l tipo de li-en-ia e!t Fnti+a+ente rela-ionado -on el tipo de o.ra del que !e trate2 en lo que
-) Modulo -a 8 Internet 1 So3t9are Libre
ataHe a e!te -ur!o la! li-en-ia! !e re4erirn a do-u+ento!2 a progra+a! !o4t<are y a re-ur!o! grM-o!
prin-ipal+ente Para o.ra! e!-rita! el +ovi+iento open @no9led2e PRe4 14Q e!ta.le-e uno! prin-ipio!
para -on!iderar una o.ra li.re y en el !o4t<are !ree So3t9are !oundation >,%,? e! el lugar de re4eren#
-ia
Para e!to! do! -a!o! la! li-en-ia! li.re! +! -ono-ida! !on Lttribution de Creati&e Co""ons PRe4 1@Q
para o.ra! e!-rita! y G0% General #ublic License PRe4 1)Q de ,%, para !o4t<are Puede -on!ultar la!
re4eren-ia! para o.tener +! in4or+a-i'n al re!pe-to
*n la red !e pueden en-ontrar tanta! li-en-ia! -o+o !o4t<are /a e6i!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 !u o.ra /o! plantea+iento!
ha.ituale! a la hora de e!-oger una li-en-ia u otra !on lo! !iguiente!7 !e puede la o.ra redi!tri.uir2
+odiM-ar2 vender2 utilizar -o+o parte de otra o.ra2 e! o.ligatorio +en-ionar la autorFa del tra.ajo2 et-
9n-lu!o e6i!ten li-en-ia! que -onte+plan que2 en -a!o de 4or+ar parte de otra o.ra2 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! e6i!tente! !e +ue!tra en la ta.la 2 la! li-en-ia! del +aterial
utilizado a lo largo del -ur!o
Licencia! u!ada!
*!te do-u+ento Creative Co++on! # 0tri.u-i'n 10 $nported
,ire4o6 Cozilla Pu.li- /i-en!e >CP/ 20?
AotepadBB =A$ =eneral Pu.li- /i-en!e >=P/?
,ilezilla =A$ =eneral Pu.li- /i-en!e >=P/?
Iitna+i 0pa-he %o4t<are /i-en!e ver!ion 20
Cy%K/ =A$ =eneral Pu.li- /i-en!e >=P/?
0pa-he 0pa-he %o4t<are /i-en!e
PDP PDP /i-en!e
:oLuJiLi =A$ =eneral Pu.li- /i-en!e >=P/?
CediaJiLi =A$ =eneral Pu.li- /i-en!e >=P/?
%i+ple Ca-hine ,oru+! IerLeley %o4t<are :i!tri.ution /i-en!e >I%:?
Pre!ta!hop Gpen %o4t<are /i-en!e >G%/?
JordPre!! =A$ =eneral Pu.li- /i-en!e >=P/?
&oo+la =A$ =eneral Pu.li- /i-en!e >=P/?
:rupal =A$ =eneral Pu.li- /i-en!e >=P/?
,abla =. Licencias del "aterial utili/ado en este curso.
3.2. Copyleft, eneral Public License !PL" y Creative Commons
Cop1le3t e! un tRr+ino que na-e en -ontrapo!i-i'n a Cop1ri2.t -on o.jeto de eli+inar de una o.ra
toda! la! re!tri--ione! de e!te 3lti+o Copyle4t no de.e -on!iderar!e en !F -o+o un tipo de li-en-ia2 !ino
que a.ar-a a un tipo de li-en-ia que al +eno! dota a una o.ra de la po!i.ilidad de !er u!ada2 +odiM-ada2
Modulo -a 8 Internet 1 So3t9are Libre -*
redi!tri.uida y ver!ionada !in la ne-e!idad de !oli-itar -on!enti+iento e6plF-ito al autor de la +i!+a
Copyle4t i+pli-a una e6igen-ia que puede !er -on!iderada -o+o una re!tri--i'n2 e6ige que la! o.ra!
derivada! o +odiM-ada! ta+.iRn !ean li.re! *!ta 3lti+a i+pli-a-i'n provo-a un e4e-to vFri-o !o.re
-ualquier o.ra derivada
Ca.e de!ta-ar la +ultitud de li-en-ia! e6i!tente! en 9nternet -on!iderada! li.re! aunque no -u+plan el
prop'!ito de Cop1Le3t %e tratarn do! de la! +! utilizada!7 G#L PRe4 1)Q y Creati&e Co""ons PRe4
1@Q y !e de.en -ono-er al +eno! !u! i+pli-a-ione!2 pue!to que e! -lave para u!ar ade-uada+ente lo!
re-ur!o! di!poni.le! en la red2 evitando tener pro.le+a! -on lo! !itio! Je. una vez e!tRn en
e6plota-i'n Cientra! la li-en-ia =P/ e!t rela-ionada -on produ-to! !o4t<are2 la! li-en-ia! Creative
Co++on! !e apli-an a do-u+ento!2 i+gene! y o.ra! artF!ti-a!
/a li-en-ia =P/ e! a+plia+ente u!ada para el !o4t<are2 !e puede -on!iderar de tipo Copyle4t y -onlleva
la! !iguiente! i+pli-a-ione!7
/o! u!uario! o -o+paHFa! que otorgan a !u! tra.ajo! la li-en-ia =P/2 pueden -o.rar o di!tri.uirla!
gratuita+ente
*n u!o interno o privado >-uando no hay venta! ni di!tri.u-ione! i+pli-ada!? !e per+ite +odiM-ar
el !o4t<are !in li.erar el -'digo 4uente *n -a+.io2 !i hay i+pli-ada! venta! o di!tri.u-ione!2 el
-'digo 4uente y -ualquier -a+.io realizado en Rl de.e e!tar di!poni.le para lo! u!uario!
%i un !o4t<are utiliza 4rag+ento! de -'digo =P/ y el !o4t<are e! di!tri.uido2 el -'digo 4uente en
!u totalidad de.e e!tar di!poni.le y .ajo la +i!+a li-en-ia
Por otro lado2 la! li-en-ia! Creati&e Co""ons utilizada! prin-ipal+ente para do-u+ento! e i+gene!
-on!i!ten en otorgar a la o.ra una -o+.ina-i'n de 4 re!tri--ione! e!-ogida! por el autor7 re-ono-i#
+iento2 no -o+er-ial2 !in o.ra! derivada! y -o+partir igual *!ta! re!tri--ione! !e pueden -o+.inar
apare-iendo !'lo una o varia! de ella! !i+ultnea+ente2 en la Je. PRe4 1@Q !e detallan la! li-en-ia!2 !on
4-il+ente -o+pren!i.le! e in-luyen un a!i!tente Je. para generar la li-en-ia de!eada Co+o eje+plo2
e!te do-u+ento !e di!tri.uye .ajo li-en-ia Creative Co++on! de re-ono-i+iento -uya li-en-ia e i-ono
-orre!pondiente !e puede ver en http788-reative-o++on!org8li-en!e!8.y8108deede!
/a reutiliza-i'n del +aterial ya di!poni.le en 9nternet e! ha.itual2 !e propone realizar lo !iguiente para
o.tener +aterial .ajo li-en-ia! li.re!7
T'. *ntre en la Je. de !lic@r donde hay -antidad de 4otogra4Fa! 0--eda a la !e--i'n Creati&e
Co""ons -on el enla-e http788<<<Zi-Lr-o+8-reative-o++on!8 0pare-en varia! +odalidade! de
li-en-ia! !o.re di4erente! -atlogo! de 4otogra4Fa! *l o.jetivo e! ir a un deter+inado -atlogo !eg3n
el u!o que reali-e de la i+agen7
T'.1. Con!idere que de!ea utilizar varia! 4otogra4Fa! para -on!truir una i+agen de -a.e-era de
!u !itio Je.2 por tanto a reto-ar2 -ortar o +odiM-ar la i+gene! original VKuR -atalogo8! de.e
e!-ogerW
T'.2. Con!idere que de!ea utilizar tal -ual una 4otogra4Fa en !u !itio Je. para de-orar una
-+ Modulo -a 8 Internet 1 So3t9are Libre
!e--i'n VKuR -atalogo8! puede e!-ogerW
T'.3. ,inal+ente a--eda al +en3 !uperior de !lic@r *6plorar U 5he -o++on!2 o.!erve que e!ta
!e--i'n no e! la +i!+a que la anterior2 pero ta+.iRn -ontiene i+gene! para li.re u!o -on po-a!
re!tri--ione!
T'.0. 0--eda a http788-o++on!<iLi+ediaorg8 y .u!que alguna i+agen y -o+prue.e la!
re!tri--ione! e6i!tente! !o.re la +i!+a
T'.$. ,inal+ente intente o.tener una 4otogra4Fa para !u u!o de!de http788pi6a.ay-o+ pero
teniendo -laro la li-en-ia y el u!o que puede ha-er de la +i!+a
!- 3(e0a(a$i4# del e#%o(#o de %(a,a5o
Para a4rontar el -ur!o !e realizarn alguno! aju!te! en Jindo<! y !e in!talarn herra+ienta!
4unda+entale! para el de!arrollo de !itio! Je. %e harn alguna! prue.a! -on e!ta! herra+ienta! en la!
!iguiente! !e--ione!
0nte! de -o+enzar la! in!tala-ione! !e propone alterar la -onMgura-i'n predeter+inada del !i!te+a
Jindo<! Pue!to que a lo largo del -ur!o !e editarn -ontinua+ente M-hero! de te6to para realizar
+odiM-a-ione!2 a!F2 para lo-alizar -'+oda+ente lo! ar-hivo! a travR! del no+.re y la e6ten!i'n !e
propone realizar la !iguiente -onMgura-i'n en el e6plorador de Jindo<!7
T7. :e!de el +en3 de ini-io de Jindo<! ( a.ra la op-i'n *quipo para llegar al ad+ini!trador de
ar-hivo! *n la nueva ventana de.e de!plegar el +en3 Grganizar y !ele--ionar Gp-ione! de -arpeta
y .3!queda2 -o+o !e +ue!tra en la Mgura 2
T7.1. :e!a-tive la op-i'n G-ultar la! e6ten!ione! de ar-hivo para lo! tipo! de ar-hivo -ono-ido!
T7.2. %ele--ione la op-i'n7 Co!trar ar-hivo!2 -arpeta! y unidade! o-ulto!
#.1. $ave%ador &irefo'
,ire4o6 e! el navegador de la 4unda-i'n Cozilla PRe4 (Q2 4unda-i'n !in ni+o de lu-ro dedi-ada a la
-rea-i'n de !o4t<are li.re *!te navegador e! uno de lo! proye-to! de !o4t<are li.re +! -ono-ido y
utilizado a nivel +undial /a gran ventaja que pre!enta 4rente a !u! -o+petidore!2 tanto -o+er-iale!
-o+o li.re!2 e! la 4a-ilidad de a+pliar !u 4un-ionalidad -on -o+ple+ento! y un .ajo n3+ero de 4allo! de
!eguridad
:e entre la +ultitud de -o+ple+ento! de!ta-an e6-elente! herra+ienta! para de de!arrollo Je. que !e
enu+eran a -ontinua-i'n /a! in!talare+o! para poder tra.ajar -'+oda+ente en lo! di!eHo! Je.
realizado! en -ada CC% e!tudiado en el -ur!o *!to! -o+ple+ento! re-o+endado! !on7
,ire.ug7 *! la herra+ienta de de!arrollo por e6-elen-ia2 para e!tudiarla !e ne-e!itarFa dedi-ar un
+'dulo del -ur!o %e utilizar de +anera -ontinuada a lo largo del -ur!o y !e ir adquiriendo
de!treza en !u +anejo
Modulo -a 8 Internet 1 So3t9are Libre -M
Colorzilla7 Captura -olore! de -ualquier Je.2 trae un !ele-tor -olor y enlaza -on un generador de
gradiente! C%%1
%-reengra.7 Captura pantalla! en ,ire4o62 e! la herra+ienta -on la -ual !e han -apturado la!
i+gene! de lo! do-u+ento! de e!te -ur!o
T,. 9n!tale la 3lti+a ver!i'n de ,ire4o6 de!-argndolo de!de
pgina oM-ial de Cozilla PRe4 (Q
T,.1. 0--eda al +en3 prin-ipal de !ire3o> !ituado en la parte
!uperior dere-ha >Mgura 1? y !ele--ione la op-i'n
Co+ple+ento! 9n!tale la! 1 e6ten!ione! enu+erada!
utilizando el -uadro de .3!queda de e6ten!ione! in-orporado
para en-ontrarla!
T,.2. Reini-ie ,ire4o6 y 4Fje!e en lo! nuevo! i-ono! que han
apare-ido en la parte !uperior dere-ha del navegador2 3!elo!
para la! !iguiente! tarea!
T,.3. $tili-e Color/illa !o.re una pgina Je. para o.tener el
-'digo de -olor de 4ondo2 u!e el zoo+ para -apturar -on
pre-i!i'n
T,.0. $tili-e Screen2rab para o.tener una i+agen -o+pleta
de una pgina Je.2 de.e -apturar la zona de la pgina no
vi!i.le en el navegador
-7 Modulo -a 8 Internet 1 So3t9are Libre
!i2ura (. MenN principal de !ire3o>.
!i2ura =. Con62uracin del ad"inistrador de arc.i&os de Windo9s M.
#.2. (ditor de te'tos $otepad))
AotepadBB e! un editor para -'digo 4uente de -ar-ter general y tiene li-en-ia =P/ *!t pen!ado
para tra.ajar -on -ualquier lenguaje de progra+a-i'n o de etiqueta!2 -o+o e! D5C/ o C%% %e puede
de!-argar de!de la dire--i'n indi-ada en PRe4 4Q o u!ar la ver!i'n in-luida -on el +'dulo %e in!talar y
!e realizarn alguna! prue.a!
T*. 9n!tale el editor te6to! AotePadBB -on la! op-ione! por de4e-to de in!tala-i'n Cuando ter+ine
la in!tala-i'n ini-ie la apli-a-i'n
T*.1. 0--eda al +en3 Plugin! U App,5P y a-tive la op-i'n %ho< App,5P Jindo< :e.e
apare-er un panel lateral -on el -liente ,5P y do! .otone! a-tivo! $tili-e el .ot'n %etting! y
apare-er un +en3 de!plega.le2 !ele--ione la op-i'n del +en3 ProMle !etting!
T*.2. Pare-er una ventana -o+o la +o!tada en la Mgura 4 que per+ite -onMgurar -one6ione!
,5P a !ervidore! re+oto!8lo-ale! Cree una nueva -one6i'n al !ervidor de prue.a! de 9nternet
rellenando lo! dato!7 ;ostna"e2 %ser y #ass9ord $!e lo! dato! !u+ini!trado! -on la
do-u+enta-i'n del -ur!o
!i2ura ). Con62uracin de cone>in !,# con 0otepadII.
T*.3. :e!-argue el M-hero pri"eraOpa2ina./ip y de!-o+pri+a el M-hero2 el -ual -ontiene un
3ni-o M-hero lla+ado inde>..t"l 0.ra e!te M-hero -on AotepadBB y utili-e el .ot'n $pload ,ile
de la .arra de herra+ienta! de App,5P Co+prue.e en el navegador que la pgina !e +ue!tra en
9nternet navegando a la dire--i'n .ttpPHHsu8no"bre8de8do"inio5 e! de-ir2 el no+.re do+inio de
prue.a! per!onal di!poni.le en !u do-u+enta-i'n del -ur!o
Modulo -a 8 Internet 1 So3t9are Libre -<
T*.0. Prue.e a a-tivar la! di4eretente! tipo! de -one6ione! en Conne-tion type VCual de ella!
4un-ionaW
%e propone realizar alguna! +odiM-a-ione! en la -onMgura-i'n predeter+inada de Jindo<! *l o.jetivo
e! utilizar e!te editor de te6to! -o+o predeter+inado en Jindo<! para alguno! tipo! de M-hero! Day
que !eguir lo! !iguiente! pa!o!7
T13. *n el +en3 ConMgura-i'n U Pre4eren-ia! apare-e un dilogo -on varia! pe!taHa! y -on toda!
la! op-ione! de AotepadBB *n la pe!taHa 0!o-ia-i'n de ar-hivo! apare-en do! -uadro! de !ele--i'n
donde !e re-o+ienda .u!-ar la! e6ten!ione! .lo22 .p.p2 .t>t y .css y aHadirla! -on .ot'n S#"T al
-uadro de la izquierda
0l igual que o-urre en la +ayorFa del !o4t<are a-tual2 AotepadBB 4a-ilita el de!arrollo e in!tala-i'n de
e6ten!ione! que a+plFan !u 4un-ionalidad .a!e %e in!talar una e6ten!i'n -on!iderada 3til el de!arrollo
del -ur!o
T11. 0--eda a la op-i'n de +en3 de AotepadBB Pluging! U Plugin Canager U %ho< Plugin
Canager 0pare-er una nueva ventana -on tre! pe!taHa! donde !e pueden -on!ultar la!
e6ten!ione! di!poni.le!2 a-tualiza.le! e in!talada! 9n!tale la e6ten!i'n *6plorer !i no la tiene
previa+ente in!talada y -o+prue.e !u utilidad Para ello .u!que una nueva entrada de +en3 en el
+en3 prin-ipal Pluging!
#.3. Cliente &*P &ile+illa
0unque -on e!te editor de te6to! !e puede tra.ajar !o.re lo! M-hero! re+oto!2 en la +ayorFa de lo!
-a!o! ha.r que !u.ir gran -antidad de M-hero! Para ello2 e6i!ten -liente! ,5P orientado! a
tran!4eren-ia! +a!iva! de M-hero! a lo! !ervidore! ,5P *!te e! el -a!o de !ile/illa2 -on el que !e
propone realizar la! !iguiente! tarea!7
T12. 9n!tale el -liente ,5P ,ilezilla -on la -onMgura-i'n de in!tala-i'n por de4e-to2 puede
de!-argarlo de PRe4 EQ
T12.1. *je-3telo y -onMgure un nuevo !itio
,5P de!de el +en3 0r-hivo U =e!tor de !itio!
$tili-e la -onMgura-i'n indi-ada en la Mgura @
para que la -one6i'n !ea !egura
T12.2. %u.a la pgina! J*I -o+pleta! de la
plantilla de eje+plo7 tpl8bluetides./ip. Aave#
gue a !u do+inio para ver !i el !itio Je.
4un-iona -orre-ta+ente
T12.3. Para !u.ir una nueva plantilla .orre el
-ontenido -o+pleto del !itio <e. u!ando
,ilezilla 5ra! .orrar2 !u.a la plantilla tpl8
=? Modulo -a 8 Internet 1 So3t9are Libre
!i2ura *. Con62uracin !,# se2ura con 6le/illa.
responsi&e./ip 2 navegue de nuevo a !u !itio <e. y -a+.ie el ta+aHo de la ventana del navegador2
e!tre-hndola -o+o !i 4uera la pantalla de un di!po!itivo +'vil para ver el -o+porta+iento de la
pgina
#.#. (ditor de im,%enes I-P
Para reto-ar la! i+gene! !e propone la herra+ienta Gi"p PRe4 @Q de =A$ Real+ente !e puede
utilizar -ualquier otro !o4t<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! !e realizarn la! !iguiente! tarea!
T13. CodiMque en el equipo lo-al alguna de la! i+gene! de la plantilla que !e ha tran!4erido al
!ervidor de 9nternet y guarde lo! -a+.io! !in -a+.iar ni el no+.re2 ni el 4or+ato del M-hero de la
i+agen
T13.1. $tili-e el -liente ,5P para tran!4erir la i+agen +odiM-ada de nuevo al !itio Je. de
9nternet Co+prue.e !i lo! -a+.io! !e vi!ualizan en el navegador re-argado la pgina
T13.2. ,uer-e en el navegador la re-arga -o+pleta de la pgina para que !e +ue!tren lo!
-a+.io! pul!ando !i+ultnea+ente la! te-la! C5R/ y ,@
6- Reali7a$i4# o0$io#al
Gtro! progra+a! 3tile! en e!te -ur!o !on el !ervidor ,5P !ile/illa Ser&er y el editor de i+gene!
ve-toriale! In@scape.
T10. :e!-argue e in!tale el !ervidor ,5P !ile/illa Ser&er.
T10.1. ConMgure nuevo! u!uario! para que puedan a--eder a alguna -arpeta del equipo lo-al
T10.2. Co+prue.e el a--e!o de!de otro ordenador del aula
T10.3. Ca+.ie lo! per+i!o! a lo! u!uario! para que puedan e!-ri.ir en !u! M-hero!
T10.0. Co+prue.e !i de!de otro equipo !e puede a--eder -on 0otepadII a lo! M-hero! del
ordenador re+oto y !i lo! puede +odiM-ar
T1$. :e!-argue In@scape e in!tlelo2 u!e la dire--i'n indi-ada en PRe4 )Q
T1$.1. Prue.e de!de lo! +en3! de In@scape la op-i'n de .u!-ar e i+portar di.ujo! ve-toriale!
de!de FpenClipLrt.
T1$.2. Prue.e a e6portar lo! di.ujo! ve-toriale! de!-argado! a M-hero! de i+agen -on di4erente!
re!olu-ione! Prue.e de!de 12 pi6el! de an-ho ha!ta )40 pi6el! de an-ho y -o+prue.e lo!
re!ultado!
T1$.3. *n la pgina Je. oM-ial de In@scape a--eda a la galerFa de i+gene! ve-toriale! para
editar alguna en el equipo lo-al
Modulo -a 8 Internet 1 So3t9are Libre =-
8- Re*e(e#$ia.
PRe4 1Q *%A9C2 <http!788<<<ni-e!8"
PRe4 2Q ,ree %o4t<are ,oundation2 <http788<<<4!4org8"
PRe4 1Q :eMni-i'n de !o4t<are li.re !eg3n =A$2 <http788<<<gnuorg8philo!ophy84ree#!<e!ht+l"
PRe4 4Q *ditor de te6to! AotepadBB2 <http788notepad#plu!#plu!org8"
PRe4 @Q *ditor de i+gene! de =A$ =i+p2 <http788<<<gi+porg8"
PRe4 )Q *ditor de grM-o! ve-toriale! 9nL%-ape2 <http788inL!-apeorg8"
PRe4 (Q ,unda-i'n Cozilla2 <http788<<<+ozillaorg8"
PRe4 EQ Cliente ,5P ,ilezilla2 <http788Mlezilla#proje-torg8"
PRe4 ;Q Co+pre!or (zip2 9gor Pavlov2 <http788<<<(#ziporg8"
PRe4 10Q GpenClip0rt2 <http788<<<open-lipartorg8"
PRe4 11Q =alerFa de 4otogra4Fa! li.re2 <http788openphotonet8"
PRe4 12Q Gpen Je. :e!ign2 <http788<<<open<e.de!ignorg8"
PRe4 11Q =oogle ,ont!2 <http788<<<google-o+84ont!8"
PRe4 14Q 5he Gpen [no<ledge ,oundation2 <http788oL4norg8"
PRe4 1@Q ,unda-i'n Creative Co++on!2 <http788-reative-o++on!org8"
PRe4 1)Q =A$ =eneral Pu.li- /i-en!e2=A$ <http788<<<gnuorg8-opyle4t8gplht+l"
== Modulo -a 8 Internet 1 So3t9are Libre
&odulo , ' 9T&L ) CSS
Conceptos bsicos de %T&'( y de %ojas de estilo en cascada C))*
- Re.u/e#
:ura-i'n e!ti+ada7 4 hora!
2ic-ero 1e!cri.cin
-a.e-era!zip *je+plo .!i-o de pgina D5C/
-!!zip ,i-hero! para tra.ajar -on C%%
-aja!zip Pgina Je. para pr-ti-a! -on el +odelo de -aja!
+edida!zip *je+plo !e u!o de +edida! a.!oluta! y relativa!
tipograMa!zip *je+plo de u!o de tipogra4Fa!
+edia#querie!zip *je+plo de di!eHo !en!i.le >re!pon!ive?
tpl#.u!ine!!Ode!ignzip ,i-hero -o+pri+ido -on un plantilla Je. li.re
,abla (. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
*l lenguaje D5C/ >;1per,e>t Mar@up Lan2ua2e? e! el origen de lo! utilizado! hoy en dFa para la!
pgina! Je.2 tanto D5C/ -o+o !u! derivado! !on lenguaje! +uy 4-ile! de aprender *!te -ur!o !o.re
ge!tore! de -ontenido! e!t orientado a +ini+izar el u!o de D5C/2 pero una! no-ione! .!i-a!
ayudarn a -o+prender +ejor el 4un-iona+iento de un !itio Je. 0de+!2 para poder per!onalizar
-o+pleta+ente -ada uno de lo! !itio! -reado! !e de.e -o+prender al +eno! la e!tru-tura del lenguaje
D5C/2 aunque no !e -onoz-a en pro4undidad toda !u !inta6i!
%o.re el lenguaje D5C/ e6i!te gran -antidad de literatura donde !e puede -on!ultar !u origen y evolu#
Rev 4(2)
-i'n a lo largo de !u! di4erente! ver!ione! Ao !e entrar en detalle!2 pero e! i+portante -ono-er la
e6i!ten-ia de un organi!+o en-argado de la e!tandariza-i'n de la! te-nologFa! rela-ionada! -on el Je.
lla+ado ,.e World Wide Web Consortiu" >J1C? PRe4 1(Q2 R!te e! un -on!or-io interna-ional -uyo
dire-tor e! pre-i!a+ente el -reador de D5C/2 5i+ Ierner!#/ee 5anto el lenguaje D5C/ -o+o la! hoja!
de e!tilo en -a!-ada C%% >Cascadin2 St1le S.eets? e!tn e!tandarizada! por e!te organi!+o
*n la! pri+era! ver!ione! del lenguaje D5C/ la! pgina! e!-rita! en e!te lenguaje in-luFan7 el -ontenido
a pre!entar2 la e!tru-tura del do-u+ento y el 4or+ato de la pre!enta-i'n de -ada ele+ento >ta+aHo2
-olore!2 et-? *l di!eHo de pgina! Je. -on e!ta! e!pe-iM-a-ione! tiene un e4e-to perver!o en el -'digo
D5C/ re!ultante2 llegando a !er total+ente ininteligi.le y re!ultando i+po!i.le de +antener o +odiM#
-ar *n -ualquier de!arrollo in4or+ti-o !e divide en -apa! el !i!te+a a -on!truir2 y apli-ado a la!
pgina! Je.2 !e de-ide !eparar todo el -'digo pertene-iente a la pre!enta-i'n del -ontenido del do-u#
+ento 0!F !urgen la! ;o:as de Estilo en Cascada C%% que !on regla! !eparada! del -'digo D5C/
en-argada! de indi-ar al navegador -o+o pre!entar la! pgina! >ver Mgura )?
!i2ura +. E&olucin del len2ua:e ;,ML.
/a! hoja! de e!tilo en -a!-ada C%% !on una herra+ienta 4unda+ental para lo! di!eHadore! Je. 5ienen
+u-ha! ventaja! 4rente al de!arrollo -on !'lo D5C/2 alguna! !on7
Centraliza-i'n de todo el -'digo rela-ionado -on la pre!enta-i'n del !itio en el -'digo C%%
4a-ilitando !u +odiM-a-i'n
%e puede -on+utar el ar-hivo C%% -on!iguiRndo!e au+entar la a--e!i.ilidad2 !e puede u!ar
-'digo C%% di4erente para per!ona! -on deM-ien-ia! vi!uale!
*l -'digo D5C/ re!ultante e! +u-ho +! legi.le al e!tar el -'digo C%% !eparado
%e pueden -on+utar la! hoja! de e!tilo !eg3n el di!po!itivo utilizado2 generando di4erente! ver!io#
ne! de la +i!+a pgina por eje+plo2 ver!i'n i+pre!a o ver!i'n pantalla e!tre-ha
Con C%%1 !e +ejoran a!pe-to! grM-o! -o+o !on .orde! redondeado!2 gradiente!2 !o+.ra!2 et-
:e la! ver!ione! e6i!tente!2 a-tual+ente e! po!i.le tra.ajar -on D5C/@ y C%%1 al !er !oportado! por
una a+plia ga+a de navegadore! J*I 0 4e-ha de hoy >junio de 2014? D5C/@ no tiene -o+pletada !u
=) Modulo -b 8 ;,ML 1 CSS
HTML0
%e+nti-a Contenido
Pre!enta-i'n
Pre!enta-i'n
CSS
Pgina
J*I
Pgina
J*I
HTML$
%e+nti-a
Contenido
e!pe-iM-a-i'n pero la! parte! ter+inada! !on !oportada! por la +ayorFa de lo! navegadore! J*I y
parte de !u! e!pe-iM-a-ione! !e pueden -on!iderar e!ta.le!
0 lo largo del -ur!o !e ver -o+o todo! lo! CC% utilizan C%% para -ontrolar la pre!enta-i'n del !itio
Je. y 4a-ilitar al ad+ini!trador el -a+.io de la aparien-ia !in ne-e!idad realizar +odiM-a-ione! en el
-'digo del CC%
2- Le#:ua5e 9T&L
/a e!tru-tura del lenguaje D5C/ !e .a!a en la! etiqueta! \!ta! etiqueta! rodean el -ontenido que !e
quiere +o!trar2 y utilizada! -orre-ta+ente2 -ontienen in4or+a-i'n !e+nti-a !o.re el -ontenido +o!tra#
do *!ta in4or+a-i'n !e+nti-a ha-e re4eren-ia a la e!tru-tura del do-u+ento -o+o !on7 -a.e-era!2
prra4o!2 et- *!ta! etiqueta! !iguen el !iguiente 4or+ato7
!i2ura M. !or"ato de una etiEueta ;,ML.
/a! etiqueta! D5C/ -on!i!ten en un no+.re de etiqueta rodeada de lo! -ara-tere! +ayor8+enor7
Qno"breOetiEuetaR 5oda etiqueta tiene un punto de apertura y otro de -ierre2 el -ierre !e di4eren-ia en
la apertura en el -ar-ter ]8]2 por eje+plo2 el -ierre de la anterior e! QHno"breOetiEuetaR *l navegador
Je. +ue!tra el -ontenido de la! etiqueta! pero no la! etiqueta! *!ta! etiqueta! -orre!ponden a la
in4or+a-i'n !e+nti-a del D5C/2 y !e anidan para e!ta.le-er una jerarquFa en el do-u+ento *l
anida+iento de etiqueta! -on!i!te en -ontener una! dentro de otra! y !e -on!igue a.riendo una nueva
etiqueta !in ha.er -errado la anterior previa+ente Para que un do-u+ento !ea -orre-to hay que
re!petar un orden en la apertura y -ierre de etiqueta! !iguiendo e!ta regla7 la 3lti+a etiqueta en a.rir!e
de.e !er la pri+era en -errar!e
$n do-u+ento D5C/ tiene una e!tru-tura predeMnida +Fni+a 4or+ada por do! parte!7 -uerpo y
-a.e-era *l -ontenido de -ada una de e!ta! parte! 4or+an la pgina Je.2 el eje+plo de -'digo 4
+ue!tra el +Fni+o -ontenido que tendrFa+o! en una pgina
*n e!te eje+plo !e o.!erva -o+o toda la pgina D5C/ e!t rodeada del par de etiqueta! HA<MC* ...
H?A<MC* y la! do! parte! que 4or+an la pgina !on HA/.3* ... H?A/.3* y HIL3G* ... H?IL3G* *l -ontenido
del -uerpo !er lo que !e +ue!tre en el rea de vi!ualiza-i'n del Aavegador Je. %e de.e -on!iderar
que lo! no+.re! de la! etiqueta! no !on !en!i.le! a +ay3!-ula! y +in3!-ula!
Modulo -b 8 ;,ML 1 CSS =*
Hstrong* Copyright NcopyO 2011 yo :is:o H?strong*
*tiqueta ,in de etiqueta Car-ter e!pe-ial
Contenido
<!DOCTYPE A<MC>
<T!">
<E#D>
<T$T"E>Mi pri:er! p!gin! A<MC<%T$T"E>
<%E#D>
<&ODY>
<1>Mi -ri:er! p!gin!<%1>
<' %>

/st! pri:er! p0gin! tiene :+y poco contenido.
<%P>
<%&ODY>
<%T!">
Cdi2o ). MCni"a pD2ina ;,ML* de e:e"plo.
T1'. Copie el 4rag+ento de -'digo 4 en un nuevo M-hero en 0otepadII y gurdelo -on el no+.re
pa2ina..t"l en alguna -arpeta >por eje+plo Mis Docu"entos? 0hora a.ra el M-hero -on el
navegador2 u!e el +en3 de ,ire4o6 0r-hivo U 0.rir ar-hivo2 tendr que lo-alizar la -arpeta donde
guardo el ar-hivo Pul!e la te-la 0/5 para a-tivar lo! +en3! en ,ire4o6
:e la +ultitud de etiqueta! >10) en D5C/@ !eg3n PRe4 1;Q a 4e-ha de junio 2014? a lo largo del -ur!o
pre!tare+o! e!pe-ial aten-i'n a la! !iguiente!7
*tiqueta! para -a.e-era!7 Corre!pondiente! a ) nivele! en un do-u+ento2 e!tru-turado de!de
HA1*...H?A1* ha!ta HA6*...H?A6*
*tiqueta de prra4o7 Contendrn lo! prra4o! del te6to2 H-*...H?-*
*tiqueta! para enla-e!7 %on lo! hipervFn-ulo! en D5C/ y u!an la etiqueta H. hrefBP...P*...H?.*
*tiqueta! de li!ta!7 Day di4erente! tipo! de li!ta! en D5C/ y !e utilizan vario! tipo! de etiqueta!7
H'C*
HC,*'n (o$o H?C,*
HC,*Ltro (o$o H?C,*
H?'C*
Cdi2o *. Lista desordenada.
HLC*
HC,*'n n+:ero H?C,*
HC,*Ltro n+:ero H?C,*
H?LC*
Cdi2o +. Lista ordenada.
*tiqueta! para i+gene!7 Con ella! !e pueden in-luir grM-o! en la! pgina!2 e! H,MQ srcBP...P ?*
*tiqueta! para ta.la!7 /a! ta.la! en D5C/ !e ha-en -on un -onjunto de etiqueta! que deMnen la
ta.la Mla por Mla y -olu+na por -olu+na %e utilizan la! etiqueta! +o!trada! en el -'digo (
Gtro -on-epto i+portante en D5C/ y ne-e!ario para tra.ajar a lo largo de e!te -ur!o !on lo! atributos
e6i!tente! en la! etiqueta! D5C/ Cualquier etiqueta D5C/ puede -ontener una li!ta de atri.uto!2
alguna! ve-e!2 in-lu!o e! o.ligatorio utilizar atri.uto! -o+o o-urre -on
lo! enla-e! y la! i+gene!
*!to! atri.uto! apare-en dentro de la etiqueta de apertura y van !epara#
do! del no+.re de la etiqueta y de otro! atri.uto! por un e!pa-io *l
4or+ato e6a-to !e +ue!tra en la Mgura E -on un eje+plo de tre! atri.uto!
Con-reta+ente2 -ada atri.uto en D5C/ tiene un no+.re y un valor
a!o-iado2 !iendo la !inta6i! no:(reR!tri(+to B S#!$or de$ !tri(+toT >el
=+ Modulo -b 8 ;,ML 1 CSS
H<.IC/*
H<"*
H<3*1E1H?<3*
H<3*1E2H?<3*
H<3*1E>H?<3*
H?<"*
H<"*
H<3*2E1H?<3*
H<3*2E2H?<3*
H<3*2E>H?<3*
H?<"*
H?<.IC/*
Cdi2o M. ,abla ;,ML.
no+.re del atri.uto no ad+ite e!pa-io!?
%e di!tinguen do! tipo! de atri.uto! para la! etiqueta! D5C/7 glo.ale! y e!pe-F M-o! /o! glo.ale! !e
pueden in-luir en -ualquier etiqueta D5C/ y alguna! etiqueta! D5C/2 ade+! de ad+itir la! glo.ale!2
ad+iten otro! atri.uto! e!pe-FM-o! !'lo para e!ta etiqueta
/a! etiqueta! utilizada! para in-luir hipervFn-ulo! e i+gene! !on eje+plo! de etiqueta! que o.ligatoria#
+ente ne-e!itan a-o+paHar!e de atri.uto! e!pe-FM-o! Para la! i+gene! e! o.ligatorio u!ar el atri.uto
src indi-ando la i+agen a +o!trar2 y para enla-e!2 el atri.uto .re3 indi-a la dire--i'n ha-ia donde ir para
!eguir el enla-e *n el eje+plo de -'digo E !e +ue!tran lo! atri.uto! e!pe-FM-o! de la! etiqueta! H.* e
H,MQ* >hipervFn-ulo e i+gene!? G.!erve -o+o ade+! de atri.uto! e!pe-FM-o! >.re3 y src? a+.a!
etiqueta! llevan el atri.uto glo.al title
H. A"/FBPhttp%??www.+s.esP tit$eBU'ni#ersid!dU*'n en$!ceE p+$s!:eH?.*
H,MQ 1"CBP$ogo.2pgP tit$eBUCogotipo de $! 'ni#ersid!dU?*
Cdi2o 7. Ltributos para las etiEuetas L e IMG.
T17. *dite de nuevo el M-hero pa2ina..t"l -on AotepadBB y aHada lo! 4rag+ento! de -'digo @2 ) y
( :e.e aHadirlo! en el interior del -uerpo2 e! de-ir2 de!puR! de la etiqueta de apertura HIL3G* pero
ante! del -ierre H?IL3G*
T17.1. 0hora de!-argue de 9nternet alguna 4otogra4Fa en 4or+ato .:p2 y reno+.re el ar-hivo a
lo2o.:p2 Copie e!te ar-hivo en la +i!+a -arpeta donde tiene el ar-hivo pa2ina..t"l
T17.2. 0Hada el 4rag+ento indi-ado en el -'digo E al M-hero pa2ina..t"l y -o+prue.e !i apare-e
la i+agen en el navegador Para que el navegador reZeje lo! -a+.io! realizado! en la pgina Je.
de.e re-argar la pgina2 u!e la te-la ,@
T1,. $tili-e el M-hero cabeceras./ip y de!-o+pri+a lo! ar-hivo! en una nueva -arpeta 0.ra el
M-hero cabeceras..t"l -on el navegador y de!puR! -on el editor 0otepadII para realizar lo!
!iguiente! -a+.io!7
T1,.1. Iu!que en el -'digo un 4rag+ento de te6to -orre!pondiente a un prra4o >etiqueta H-*?
9ntente !eparar do! pala.ra! de un prra4o por +u-ho! e!pa-io!2 guarde el M-hero y vi!ulalF-elo
-on el navegador Je. Re-uerde de.e pul!ar ,@ en el navegador para re-argar el M-hero
T1,.2. 9ntente ahora in!ertar vario! !alto! de lFnea en un prra4o y vi!uali-e en el navegador Je.
Modulo -b 8 ;,ML 1 CSS =M
!i2ura 7. Ltributos en las etiEuetas ;,ML.
H! hrefBThttp%??www.+s.esT tit$eBT'ni#ersid!dT c$!ssBTen$!ce=e)ternoT* -ort!$ We( H?!*
0pertura de etiqueta
Cierre de
etiqueta
0tri.uto
Contenido
Valor del atri.uto 0tri.uto! glo.ale! 0tri.uto e!pe-FM-o
lo! re!ultado!
T1,.3. %epare el te6to de un prra4o en do! prra4o! di4erente! aHadiendo etiqueta! de apertura
y -ierre de prra4o H-* y H?-*
T1,.0. Prue.e aHadir la etiqueta H(r ?* +3ltiple! ve-e! entre do! pala.ra! de un prra4o y
-o+prue.e el re!ultado en el navegador Je.
T1*. Aavegue a la dire--i'n http788<<<<1org8!tandard!8<e.de!ign8ht+l-!! *!ta e! una pgina de
introdu--i'n a D5C/ y C%% de J1C :e!pliegue el +en3 prin-ipal de ,ire4o6 y !ele--ione la entrada
de +en3 :e!arrollador Je. U C'digo 4uente de la pgina2 alternativa+ente puede pul!ar
CGA5RG/B$
!- 9o5a. de e.%ilo. e# $a.$ada CSS
/a! !igla! C%% !on a-r'ni+o de Cascadin2 St1le S.eets y e! un lenguaje de te6to donde !e e!pe-iM-a
el a!pe-to de una pgina D5C/ Per+ite e!pe-iM-ar la di!po!i-i'n de ele+ento!2 tipogra4Fa! de te6to2
-olore!2 et- 0de+! -onte+pla alternativa! de a!pe-to para di4erente! di!po!itivo!7 ordenadore!2
+'vile!2 i+pre!ora!2 et- *!te lenguaje ha !ido e!pe-iM-ado por el -on!or-io J1C -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 D5C/@ el o.jetivo ha !ido
eli+inar de D5C/48^D5C/ toda! la! etiqueta! re4erente! a la pre!enta-i'n del -ontenido -o+o !on7
Hfont*2 H(ig*2 Hcenter*2 y otra!
*l u!o de hoja! de e!tilo 4a-ilita enor+e+ente el de!arrollo y +anteni+iento de !ito! Je.2 !iendo a-tual #
+ente in-on-e.i.le de!arrollar !itio! Je. !i u!arla! $!ando -orre-ta+ente C%%2 toda la in4or+a-i'n
!o.re el a!pe-to de un !itio Je. queda -entralizado2 a!F e! 4-il lo-alizar lo! 4rag+ento! C%% a per!ona#
lizar y -a+.iar la aparien-ia de parte o la totalidad de pgina! Je. 5a+.iRn 4a-ilita la ho+ogeneidad
en la pre!enta-i'n de la! pgina! de un !itio Je. *!to !e -on!igue vin-ulando toda! la! pgina! una
+i!+a hoja de e!to!2 a!F2 un -a+.io de e!tilo a4e-ta a toda! la! pgina! vin-ulada!
Da.itual+ente la! hoja! de e!tilo !on M-hero! !eparado! del -'digo D5C/ 0 lo largo de -ur!o !e in!i!#
tir en realizar todo! lo! -a+.io! de a!pe-to +ediante hoja! de e!tilo !eparada! del -'digo D5C/ y
nun-a en el +i!+o M-hero donde re!ide el -'digo D5C/ 0unque D5C/ per+ite in-luir C%% en el propio
D5C/ o en la! propia! etiqueta!2 un .uen di!eHador de.e evitar !u u!o2 e!ta pr-ti-a no e! una .uena
!olu-i'n *n todo! lo! CC% en-ontrare+o! e!ta! hoja! de e!tilo! en M-hero! -on la e6ten!i'n .css y
-lara+ente !eparada! del -'digo D5C/
*n el -'digo D5C/ !e vin-ulan lo! M-hero! que -ontienen lo! e!tilo! +ediante la etiqueta H$inV*2 y !e
pueden deMnir e!tilo! en el +i!+o M-hero D5C/ a.riendo y -errando la etiqueta Hsty$e* *!ta!
etiqueta! de e!tilo !'lo pueden apare-er en la -a.e-era de un do-u+ento D5C/ *l pro-edi+iento
ha.itual e! vin-ular pgina! Je. -on hoja! de e!tilo! en M-hero! !eparado! *6i!te otro +Rtodo de
vin-ular hoja! de e!tilo +ediante la i+porta-i'n de e!tilo! en la etiqueta Hsty$e*2 a+.o! +Rtodo! !e
+ue!tran en el -'digo ; *l e4e-to de la !enten-ia @i:port e! -o+o !i !e -opiara todo el -ontenido del
M-hero i+portado en la lFnea po!terior a la !enten-ia @i:port
=7 Modulo -b 8 ;,ML 1 CSS
<lin( re$BUsty$esheetU typeBUte)t?cssU hrefBUho2!Resti$os.cssU :edi!BUscreenU %>
<st)le typeBUte)t?cssU :edi!BUscreenU>
@i:port U+n!Rho2!RdeResti$o.cssUO
@i:port +r$(Uotr!Rho2!RdeResti$o.cssU)O
<%st)le>
Cdi2o <. inculacin de una pD2ina Web con una .o:as de estilos en 6c.eros separados.
#.1. .e%las CSS
/a! hoja! de e!tilo !e -on!truyen +ediante un -onjunto de regla! e!-rita! en te6to *l 4un-iona+iento
.!i-o !e puede re!u+ir -o+o !igue7
/a! hoja! de e!tilo! e!tn 4or+ada! por un -onjunto de regla! e!-rita! de +anera ordenada2
ha.itual+ente en M-hero! de te6to
/a! regla! !e apli-an a un !ele-tor y e6i!ten di4erente! tipo de !ele-tore!
*n -a!o de -onZi-to! entre regla! !e re!uelven dando -o+o vlida la 3lti+a regla
$na regla e!t 4or+ada por un !ele-tor o !ele-tore!2 y un
-onjunto de propiedade! entre llave! ter+inada! por pun#
to y -o+a >vRa!e Mgura ;? /o! !ele-tore! ha-en re4eren#
-ia a ele+ento! del do-u+ento D5C/ a4e-tado! por la
regla2 indi-ando el a!pe-to de!eado para la! etiqueta!
!ele--ionada! *6i!ten -er-a de 100 atri.uto! di4erente!
para apli-ar en -ada regla2 aunque a lo largo del -ur!o no !e -u.ran todo!2 !er 4-il de entender el
4un-iona+iento de lo! re!tante! una vez -o+prendido el 4un-iona+iento .!i-o de C%%
/a -lave para -on!eguir que un !itio Je. tenga el a!pe-to de!eado e!t en el u!o ade-uado de la! regla!
C%% *l o.jetivo en e!te -ur!o !er identiM-ar aquella! parte! de una pgina Je. a la! que !e de!ea
-a+.iar el a!pe-to y -on!eguir2 +ediante !ele-tore!2 per!onalizar -o+pleta+ente -ada ele+ento del
!itio Je.
#.2. Selectores
/o! !ele-tore! per+iten alterar el a!pe-to del -ontenido de la! etiqueta! e6i!tente! en el -'digo
D5C/ de una pgina Je. :urante el di!eHo Je. e! 4unda+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! de ello! entre !F2 pudiendo apare#
-er !ele-tore! real+ente -o+plejo! /o! tipo! de !ele-tore! .!i-o! !on7
%ele-tor univer!al7 *l -ar-ter ]_] ha-e re4eren-ia a todo! lo! ele+ento! de la pgina $na regla de
e!te tipo a4e-ta a todo! lo! ele+ento! de una pgina Je.
%ele-tore! de tipo! o etiqueta!7 Da-en re4eren-ia a la! etiqueta! e6i!tente! en D5C/ /a regla !e
apli-arFa a toda! la! etiqueta! D5C/ que -oin-idan -on el !ele-tor Por eje+plo2 la regla p
Modulo -b 8 ;,ML 1 CSS =<
!i2ura <. !or"ato de una re2la CSS.
*1 Wfont=siMe%1809O co$or%($!cVOX
%ele-tor Propiedade!
Wco$or%redOX e!ta.le-e el -olor rojo para todo! lo! prra4o! de la pgina
%ele-tore! de -la!e!7 0!ignan e!tilo! !'lo a la! etiqueta! D5C/ -uyo atri.uto class -oin-ida -on el
!ele-tor *!te !ele-tor e! el utilizado para -on!eguir que alguna! etiqueta! D5C/ tengan di4eren#
te! a!pe-to! $n !ele-tor de -la!e !e -on!truye indi-ando el no+.re de -la!e pre-edido de un
punto ST
.dest+c+do ,
-+c(gro.nd/color0 ye$$ow1
color0red1 2
.nor3+l , color0($!cV1 2
Cdi2o -?. Selectores de clases CSS.
 /ste te)to
est0 dest!c!do con fondo !:!ri$$o
H?p*
 /ste te)to
tiene $! $etr! en negro<%p>
Cdi2o --. EtiEuetas ;,ML con atributos de clase.
%ele-tore! 9:7 ,un-ionan de 4or+a pare-ida a lo! !ele-tore! de -la!e2 pero !ele--ionan un 3ni-o
ele+ento de todo el -'digo D5C/ $na etiqueta D5C/ puede ir a-o+paHada de un atri.uto 9: *l
valor 9: de.e !er 3ni-o en todo el do-u+ento D5C/2 e! de-ir2 no pueden e6i!tir +! etiqueta! -on
el +i!+o valor para el atri.uto 9: Por tanto2 una regla para un !ele-tor de tipo 9: !'lo !e apli-a
una vez en todo el do-u+ento D5C/ *!te tipo de regla -o+ienzan !ie+pre por el -ar-ter `
4-lo5.e/notici+s
W
-order01p) so$id ($!cV1
X
Cdi2o -=. Selector ID con CSS.
<di6 idBU($oD+e=notici!sU>
<*2>'n! notici!<%*2>
<od!s $!s notici!s !D+i<%p>
<%di6>
Cdi2o -(. EtiEueta ;,ML con atributo ID.
0nte! de -ontinuar -on +! tipo! de !ele-tore! !e realizarn una prue.a! !o.re do-u+ento! D5C/ ya
preparado! para -o+prender +ejor el 4un-iona+iento de lo! !ele-tore! C%% %eg3n !e utili-en di4eren#
te! regla! !e irn introdu-iendo di4erente! atri.uto! para -ono-er !u 4un-iona+iento
T23. :e!-o+pri+a el M-hero css./ip en una -arpeta va-Fa de !u di!-o
T23.1. *ntre en la -arpeta y edite !i+ultnea+ente en AotepadBB lo! M-hero! pa2ina8te>to..t"l
y estilos8te>to.css
T23.2. Vi!uali-e el -'digo D5C/ en AotepadBB2 utili-e el +en3 *je-utar U /aun-h in ,ire4o6 y
-o+prue.e -o+o !e vi!ualiza el -'digo D5C/ en el navegador
T23.3. %in -errar ,ire4o62 vuelva al editor AotepadBB y -a+.ie el -ontenido de la -a.e-era D1
Vuelva a ,ire4o6 y -o+prue.e que el te6to !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! en la
pgina Je.
T23.0. 5ra.ajare+o! en el M-hero estilos8te>to.css +odiM-ando y -reando regla! *n el M-hero
podr o.!ervar -o+entario! que no a4e-tan al -o+porta+iento de la! hoja! de e!tilo!2 puede
utilizarlo! para e!-ri.ir !u! anota-ione! *l pri+er !ele-tor ya preparado en el M-hero e! el
!ele-tor univer!al2 +odi4Fquelo aHadiendo la propiedad !iguiente7 Y Wco$or%($+eOX =uarde el
M-hero y o.!erve en ,ire4o6 el re!ultado
T23.$. /a !egunda regla del M-hero estilos8te>to.css ha-e re4eren-ia a la! etiqueta! de prra4o
del do-u+ento D5C/ CodiMque e!ta regla para -on!eguir e!ta.le-er el te6to a verde >green?
(? Modulo -b 8 ;,ML 1 CSS
T23.'. 0hora !e aHadirn do! propiedade! a una +i!+a regla2 +odiMque la regla -o+o !e indi-a
en el -'digo 14 Prue.e -a+.iar el valor del atri.uto te)t=!$ign a lo! valore!7 right o center2 y
-o+prue.e el e4e-to en el Aavegador
p , color0green1
te7t/+lign02+stify12
Cdi2o -). E:e"plo de re2la con "Ds de un atributo.
T23.7. /a ter-era regla del M-hero C%% -orre!ponde a un !ele-tor de -la!e :e.e .u!-ar en el
-'digo D5C/ de la pgina la! etiqueta! +ar-ada! -on e!ta -la!e2 toda! e!ta! etiqueta! !e vern
a4e-tada! por e!ta regla CodiMque la regla de e!ta 4or+a7 .:w=he!d$ine Wfont=sty$e%it!$icOX
T23.,. /a -uarta regla ha-e re4eren-ia a un !ele-tor tipo 9:2 e!te !ele-tor !ele--iona una 3ni-a
etiqueta de todo el -'digo D5C/ Iu!que en el -'digo D5C/ la etiqueta -on el atri.uto idBTnot!T
y +odiMque la regla C%% -o+o !igue7 Znot! W(!cVgro+nd=co$or% ZFFF../OX
0 lo largo del -ur!o apare-ern regla! C%% -o+pleja! donde hay vario! !ele-tore! -o+.inado! o
agrupado!2 lo! -a!o! +! 4re-uente! !on lo! !iguiente!7
0grupa-i'n de !ele-tore!7 *6i!te la po!i.ilidad de agrupar lo! !ele-tore! utilizando una -o+a para
evitar tener que e!-ri.ir +u-ha! regla! 0!F !e -on!igue apli-ar un +i!+o e!tilo a varia! etiqueta!
-o+o !e +ue!tra en el -'digo 1@
*18 *28 *98 *:8 *58 *6 , te7t/s*+do;0 2p) 2p) 1p)12
Cdi2o -*. 4e2la con "Nltiples selectores.
Co+.ina-i'n de !ele-tore!7 /o! !ele-tore! de etiqueta! y -la!e! pueden -o+.inar!e para -on!e#
guir !ele--ionar etiqueta! D5C/ +! e!pe-FM-a! %on utilizado! 4re-uente+ente y una po!i.le
-o+.ina-i'n -on!i!ten en e!-ri.ir el no+.re de etiqueta junto -on el no+.re de -la!e
p.res+lt+do ,
color0red1
te7t/decor+tion0+nder$ine1
X
li.res+lt+do ,
color0red1
te7t/decor+tion0$ine=thro+gh1
X
Cdi2o -+. Co"binacin de selectores.
T21. *n el -'digo D5C/ !e han +ar-ado do! etiqueta! -on el atri.uto c$!ssBTdest!c!doT CodiMque
la hoja de e!tilo! -on AotepadBB aHadiendo la! regla! +o!trada! en el -'digo 1@ y 1) Co+prue.e
en el navegador y en el -'digo D5C/ la! etiqueta! a4e-tada! por e!ta! regla!
/o! !ele-tore! !e pueden -o+.inar entre !F para -on!eguir una +ayor pre-i!i'n en la !ele--i'n de
ele+ento! !iendo en alguna! o-a!ione! +uy 3til2 pero llegan a -o+pli-ar en gran +edida la! regla! 0
deter+inada! -o+.ina-ione! de !ele-tore! !e le! deno+ina !ele-tore! de!-endiente!2 de hijo! y de
her+ano! adya-ente! %'lo !e +o!trarn lo! de!-endiente!2 ya que el re!to !on +eno! ha.ituale!
%ele-tor de de!-endiente7 /a! etiqueta! D5C/ e!tn in-luida! una! dentro de otra! 4or+ando un
r.ol jerrqui-o *!te tipo de !ele-tor per+ite !ele--ionar toda! la! etiqueta! de un tipo e6i!tente!
Modulo -b 8 ;,ML 1 CSS (-
dentro de otra etiqueta *l -'digo 1( +ue!tra un eje+plo donde !e !ele--ionan todo! lo! eje+plo!
de -'digo e6i!tente! dentro de lo! prra4o! =eneral+ente e!te tipo de !ele-tore! -o+pli-an el
-'digo C%% re!ultante2 !e re-o+ienda li+itar !u u!o
p code ,-+c(gro.nd/color0grey1color0white12
Cdi2o -M. 4e2la con selector descendiente.
%ele-tore! de atri.uto!7 %ele--ionan ele+ento! del -'digo D5C/ !eg3n !u! atri.uto! o -ontenido
de lo! +i!+o! %on un po-o +! -o+plejo! y !e pueden evitar en la +ayorFa de lo! -a!o! utilizan#
do lo! !ele-tore! ya e!tudiado! $n eje+plo tFpi-o de u!o de e!te tipo de !ele-tore! e! la !ele--i'n
del tipo de M-hero en un enla-e Je. para alterar la aparien-ia
![href [BP.pdfP] ,
-+c(gro.nd0 tr!nsp!rent +r$(Ppdf.pngP) no=repe!t1
p+dding/left020p)1
X
![href [BP.!#iP] ,
-+c(gro.nd0 tr!nsp!rent +r$(P#ideo.pngP) no=repe!t1
p+dding/left020p)1
X
Cdi2o -7. 4e2las para todos los enlaces a 6c.eros #D! 1 LI.
Gtro tipo de !e-tore! utilizado! -o+3n+ente !on lo! lla+ado! p!eudo#-la!e! y p!eudo#ele+ento! Da-en
re4eren-ia a propiedade! e!pe-iale!2 -o+o por eje+plo2 un enla-e vi!itado o el he-ho de pa!ar el rat'n
en-i+a de un enla-e /a! regla! +o!trada! en el -'digo 1; -on!iguen poner un 4ondo gri! en un enla-e
-uando el rat'n e!t !o.re Rl2 donde la p!eudo -la!e e! %ho#er /a !egunda regla del -'digo 1; au+enta
el ta+aHo de la pri+era letra de todo! lo! prra4o!2 utilizando el p!eudo#ele+ento %first=$etter
+%ho#er W
-+c(gro.nd/color0 grey1
X
p%first=$etter ,
font/si<e0 18091
font/;eig*t0 (o$d1
X
Cdi2o -<. #seudos clasesHele"entos.
T22. 5ra.ajando de nuevo !o.re lo! M-hero! anteriore!2 o.!erve que en lo! prra4o! de te6to e6i!ten
4rag+ento! de -'digo envuelto! por etiqueta! Hcode*...H?code*2 ade+! hay un eje+plo de C%% no
in-luido en ning3n prra4o *l o.jetivo e! dar una aparien-ia lo! 4rag+ento! de -'digo de lo!
prra4o! y otra al -'digo de eje+plo
T22.1. 0Hada una regla C%% para toda! la! etiqueta! Hcode* que e!ta.lez-a el -olor de 4ondo7
code W (!cVgro+nd=co$or% ZCCCCCCOX
T22.2. 0hora aHada la regla +o!trada en el -'digo 1( y -o+prue.e la! etiqueta! a4e-tada!
viendo el re!ultado en el navegador
T23. Para pro.ar el !ele-tor de atri.uto! aHada la! do! regla! +o!trada! en el -'digo 1E y o.!erve
el re!ultado al Mnal de la pgina2 en la !e--i'n 4e3erencias *!ta regla aHade una i+agen de 4ondo a
la etiqueta en la parte izquierda y de!plaza un po-o el te6to2 en la! !iguiente! !e--ione! !e
(= Modulo -b 8 ;,ML 1 CSS
+o!trarn detallada+ente e!to! atri.uto! C%%
T20. 0hora -on la! p!eudo -la!e! -on!eguire+o! el e4e-to de -a+.io de -olor en enla-e! a pa!ar -on
el rat'n por en-i+a2 para ello2 utili-e la regla !%ho#er W(!cVgro+nd=co$or%greenOX Prue.e ta+.iRn a
-a+.iar el ta+aHo de la pri+era letra de -ada prra4o -on p%first=$etter Wfont=siMe%1809OX Puede
-opiar el eje+plo dire-ta+ente de!de del -'digo 1;
T20.1. Iu!que un !ele-tor -apaz de alterar 3ni-a+ente la pri+era letra del pri+er prra4o de
-ada !e--i'n2 no toda! la! pri+era! letra! de -ada prra4o2 -o+o !i de un li.ro !e tratara Para
!olu-ionarlo !e re-o+ienda a--eder al +anual re4eren-iado en PRe4 20Q
#.3. Prioridad de selectores.
Para per!onalizar plantilla! D5C/BC%% -reada! por ter-era! per!ona! !e de.e +anejar -on !oltura
el !i!te+a de prioridad e!ta.le-ido en C%% Cuando do! o +! !ele-tore! e!ta.le-en una +i!+a propie#
dad para una etiqueta pero -on valore! di!tinto!2 !e produ-e una -oli!i'n *l valor Mnal de la propiedad
!e re!uelve apli-ando prioridade! -lara+ente deMnida! /a prioridad entre !ele-tore! !igue e!ta! regla!
generale! y en e!te orden de prioridad7
1# 0tri.uto e!pe-ial7 Car-a \i:port!nt en un atri.uto Ao !e ha -ontado de.ido a que !uele !er una
+ala pr-ti-a en el di!eHo C%%2 intentare+o! evitarlo Con!i!te en aHadir una -oletilla al Mnal de
un atri.uto C%% y e! utilizado para ro+per todo el !i!te+a de prioridad C%%
2# %ele-tore! -o+.inado!7 /a -o+.ina-i'n de !ele-tore! !on lo! +! prioritario! al !er +uy e!pe#
-FM-o!
1# 5ipo de !ele-tor7 *l !ele-tor ID e! el +! prioritario2 el !iguiente e! el !ele-tor CLLSS2 de!puR!
!igue el !ele-tor de etiqueta Por 3lti+o2 el !ele-tor univer!al e! el +eno! prioritario
4# *n -a!o de igualdad de prioridad entre varia! regla! !e apli-a la 3lti+a que apare-e *!ta 3lti+a
regla e! -lave para per!onalizar !itio! Je. +ediante C%%
*n el eje+plo +o!trado a -ontinua-i'n >-'digo 20 y 21? !e +ue!tra un prra4o D5C/ -on tre! regla! que
a4e-tan a di-ho prra4o Cada una de ella! e!ta.le-e un -olor di4erente2 el pro-edi+iento para averiguar
-ual e! el -olor deMnitivo e! apli-ar el !i!te+a de prioridad

/ste te)to es de co$or ...
<%p>
Cdi2o =?. EtiEuetas ;,ML atributos ID 1 clase.
4p+rr+fo2 ,color0 red12
.te7to ,color0 ($+e12
4p+rr+fo2 ,color0 green12
p ,color0 ye$$ow12
Cdi2o =-. Colisin de re2las CSS.
0pli-ando el !i!te+a de prioridad e!ta.le-ida en C%%2 la! tre! regla! del -'digo 21 -orre!ponden a tre!
!ele-tore!2 y !eg3n la! regla! de prioridad nu+erada! anterior+ente hay que !ele--ionar la regla de
prioridad 1 que e!ta.le-e que el !ele-tor 9: e! el +! prioritario $na vez !ele--ionado el !ele-tor
Zp!rr!fo22 al apare-er do! ve-e!2 !e de.e apli-ar la regla de prioridad 42 la -ual indi-a que en -a!o de
-oli!i'n apli-a la 3lti+a :eMnitiva+ente el -olor del te6to e! verde
Modulo -b 8 ;,ML 1 CSS ((
0veriguar la regla! que a4e-tan a un 4rag+ento de pgina Je. e! -o+plejo de deter+inar2 a3n +!2 al
-ontener la! hoja! de e!tilo -iento! de regla! e! pr-ti-a+ente invia.le 0de+!2 !erFa ne-e!ario -ono-er
detallada+ente el !i!te+a de prioridad apli-ado y lo! ele+ento! a4e-tado! /a !olu-i'n utilizada -on!i!te
en tra.ajar -on la! herra+ienta! para de!arrolladore! in-luida! en lo! navegadore! *n la !iguiente
!e--i'n !e avanzar en el !i!te+a de prioridad y !e -o+pro.ar -o+o no ha-e 4alta -ono-erlo en pro4un#
didad
#.#. -odelo de ca/as
*l -on-epto de +odelo de -aja! en C%% e! 4unda+ental ya que -ontrola la di!po!i-i'n del -ontenido
de toda! la! etiqueta! en una pgina Je. 5oda la +aqueta-i'n de una pgina Je. -on C%% !e realiza
+ediante el deno+inado +odelo de -aja! de C%% I!i-a+ente2 e!te +odelo e!ta.le-e la e6i!ten-ia de
una -aja -uadrada por -ada etiqueta D5C/ a.ierta y -errada *n D5C/ la! etiqueta! -ontienen +!
etiqueta! enton-e!2 por tanto2 -ada -aja pueden -ontener +u-ha! +! -aja! dentro
$na pgina Je. +o!trada en el navegador e!t 4or+ada por +ultitud de -aja! una! dentro de otra!2 y
-ada -aja puede !er !ele--ionada +ediante regla! C%% para per!onalizar !u pre!enta-i'n *!te +odelo
e! +uy 4-il de utilizar una vez -o+prendido !u 4un-iona+iento2 para ello2 !e realizarn alguna!
prue.a!
T2$. $tilizando AotepadBB edite el M-hero estilos8te>to.css 0Hada al !ele-tor univer!al la! propie#
dade! +o!trada! del -'digo 22 y o.!erve lo! -a+.io! en el navegador
Y , -order01p) so$id1
3+rgin00.8e:1
p+dding00.8e:1 2
Cdi2o ==. Modelo de ca:as.
T2$.1. Iorre e!ta 3lti+a regla ya que era !'lo ilu!trativa2 +odiMque el M-hero C%% dejando el
!ele-tor univer!al va-Fo Y W X Vuelva a ,ire4o62 re-argue la pgina y a--eda al +en3
:e!arrollador U 9n!pe-tor Cueva el rat'n !o.re la pgina y -o+pro.ar -o+o ,ire4o6 +ue!tra el
+odelo de -aja! VRe-ono-e la etiqueta D5C/ -orre!pondiente a -ada -ajaW
T2$.2. %ele--ione alguna -aja y en la parte in4erior de ,ire4o6 a-tive lo! .otone! Regla!2
Co+putada y Codelo de -aja2 apare-ern -ontrole! -o+o lo! +o!trado! en la Mgura 10 %ele-#
-ione un prra4o y prue.e de!de el panel de e!tilo! a -a+.iarlo! dire-ta+ente dentro de ,ire4o6
T2$.3. 5ra! lo! -a+.io! realizado! vuelva a re-argar la pgina y o.!ervar que !e han perdido
5odo! lo! -a+.io! realizado! dire-ta+ente de!de el navegador no !on per+anente!2 de.e ir al
M-hero original2 editarlo -on AotepadBB y guardar lo! -a+.io! realizado!
5ra! o.!ervar el eje+plo anterior !e puede -on-luir que -ada !ele-tor en C%% !ele--iona -aja! 5odo!
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 Je.2 ya que2 -on C%% !e puede indi-ar para -ada -aja el a!pe-to2 la u.i-a-i'n
y el -o+porta+iento
() Modulo -b 8 ;,ML 1 CSS
!i2ura -?. Modo desarrollador de !ire3o>.
*l -ontrol de la -aja! !e -on!igue !ele--ionando -aja! +ediante regla! C%% y +odiM-ando lo! atri.uto!
-orre!pondiente! al +odelo de -aja! *l +odelo de -aja! e!ta.le-e lo! !iguiente! atri.uto!7 +rgene!2
relleno!2 .orde! y 4ondo /a Mgura 11 +ue!tra un e!que+a general del +odelo de -aja! -on lo! no+.re!
de lo! atri.uto! C%% :e 4or+a general !e puede de-ir que el -ontenido de una etiqueta D5C/ e!t
!ie+pre dentro de una -aja2 y el +odelo de -aja! e!ta.le-e que2 toda -aja tiene alrededor tre!
ele+ento!7 +argen2 .orde y relleno Cada uno de e!to! ele+ento! !e repre!enta por di4erente!
propiedade! -o+o !e ilu!tra de +anera e!que+ti-a en la Mgura 11 0 -ontinua-i'n !e detalla -ada una
de la! parte!7
area del -ontenido7 *! el -ontenido D5C/ de la etiqueta2 dentro de ella pueden e6i!tir +! -aja!
/a propiedad bac@2round e!ta.le-e el -olor de 4ondo2 .ien un -olor !'lido2 una i+agen de 4ondo2
un gradiente en -a!o de C%%12 et-
area del relleno >padding?7 *! un e!pa-io que puede e6i!tir entre el .orde y el -ontenido /a
propiedad bac@2round ta+.iRn a4e-ta a e!ta rea2 e! de-ir2 !e e6tiende de!de el relleno al -onte#
nido
area del .orde >.order?7 *! una lFnea que rodea la -aja y no tiene por quR e6i!tir en !u totalidad
*6i!ten -uatro .orde! y puede tener !'lo alguno de ello! /a propiedad border e!ta.le-e el an-ho2
-olor y tipo de .orde Con C%%1 e!te .orde puede !er una i+agen pero no e! !oportado en todo!
lo! navegadore!
area del +argen >+argin?7 *! una !epara-i'n entre e!ta -aja y el re!to de -aja! /o! +rgene! !on
!ie+pre tran!parente! y !e -ontrolan -on la propiedad "ar2in
Modulo -b 8 ;,ML 1 CSS (*
!i2ura --. Modelo de ca:as CSS.
/a! propiedade! que o4re-en +! juego en lo! di!eHo! Je. !on "ar2in2 paddin22 bac@2round y border
/a propiedad bac@2round -ontrola el 4ondo de la! -aja! y per+ite e!ta.le-er tanto -olor de 4ondo -o+o
una i+agen de 4ondo Day una -aja que envuelve a toda la pgina Je. y e! la -orre!pondiente a la
etiqueta D5C/ H(ody* por ello !e !uele per!onalizar ha.itual+ente *n el eje+plo de -'digo 21 !e
e!ta.le-e una i+agen de 4ondo para toda la pgina2 un .orde in4erior para el titulo D1 y uno! +rgene!
alrededor de toda la pgina Je.
(ody , -+c(gro.nd0 tr!nsp!rent +r$(Udegr!d!do=!M+$.pngU) no=repe!t fi)edO
3+rgin0 >e:1 2
h1 , -order/-otto30 1p) dotted ($!cV12
Cdi2o =(. Di3erentes 3ondos 1 bordes en CSS.
Para 4a-ilitar al di!eHador el -ontrol -o+pleto de la pre!enta-i'n de la pgina Je. e6i!te una etiqueta
D5C/ e!pe-ial H3,V* para -rear -aja! D5C/2 el u!o de e!ta e!ta etiqueta e! e!en-ial en el di!eHo Je.
para -on!eguir dividir la pgina en regione! y apli-ar a -ada regi'n uno! e!tilo! deter+inado! *!
-o+3n el a.u!o en el u!o de e!ta etiqueta de lo! di!eHadore! prin-ipiante! llegando a quedar el -'digo
D5C/ ilegi.le y el +odelo de -aja! po-o -ontrola.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!
Da.r que realizar alguna! +odiM-a-ione! en la hoja de e!tilo! de un pequeHo l.u+ de 4oto! -on el
-'digo D5C/ ya preparado en .a!e a etiqueta! H3,V*
T2'. Cree una nueva -arpeta en !u di!-o duro y de!-o+pri+a el ar-hivo de eje+plo ca:as./ip Vi!ua#
li-e -on el navegador el ar-hivo ca:as..t"l2 ver varia! 4oto! y te6to!2 el ejer-i-io -on!i!te en -on!e#
guir un a!pe-to de l.u+ de 4oto! +ediante hoja! de e!tilo
T2'.1. 0.ra el do-u+ento estilos8ca:a.css y ca:as..t"l -on AotepadBB para tra.ajar !o.re ello!
Re-orra el -'digo D5C/2 ver que e! .a!tante !i+ple y e!t e!tru-turado !eg3n el e!que+a de
-aja! de la Mgura 12 ,Fje!e que e!ta e!tru-tura e!ta.le-e el +odelo de -aja! pero no !u u.i-a#
-i'n2 para -on!eguir la di!tri.u-i'n +o!trada en la Mgura !e irn in-luyendo regla! C%%
(+ Modulo -b 8 ;,ML 1 CSS
Contenido
padding#top
padding#.otto+
p
a
d
d
i
n
g
#
r
i
g
h
t p
a
d
d
i
n
g
#
l
e
4
t
.order#.otto+
+argin#.otto+
.
o
r
d
e
r
#
r
i
g
h
t
+
a
r
g
i
n
#
r
i
g
h
t
+argin#top
.order#top
.
o
r
d
e
r
#
l
e
4
t
+
a
r
g
i
n
#
l
e
4
t
T2'.2. /a pgina e!t -o+pue!ta por do! -aja! prin-ipale!2 u!ando lo! !ele-tore! Z$ogo y
Zcontenido !e -a+.ian !u! propiedade! 5ra.ajando !o.re el M-hero estilos8ca:as.css e!ta.lez-a la
!iguiente propiedad en el !ele-tor 9: del -ontenido7 Zcontenido W (!cVgro+nd=co$or% ZFFF3IOX
T2'.3. =uarde el M-hero y re-argue la pgina en el navegador para ver el rea a4e-tada
T2'.0. Repita el pro-edi+iento anterior pero -on el !ele-tor Z$ogo y el -'digo de -olor Z3FFC6
Podr vi!ualizar la! do! -aja! +ayore! deMnida! en e!ta pgina Je.
Para -on!eguir u.i-ar y8o di!tri.uir la! -aja! D5C/ en la pgina Je. !e -o+.inan do! propiedade! C%%
Soat y clear /a pri+era !e utiliza para ha-er -aja! Zotante! dentro de la -aja padre2 una -aja Zotante !e
puede alinear a la izquierda o dere-ha /o! ele+ento! Zotante! !e puede !olapar entre !F2 el navegador
lo! u.i-a donde queda e!pa-io di!poni.le2 la propiedad clear evita e!te !olapa+iento Para -o+pren#
derlo +ejor !e !eguir tra.ajando !o.re el l.u+ de 4oto!
T27. %e ha deMnido una -la!e lla+ada 3oto para apli-ar un e!tilo -o+3n toda! la! -aja! que
-ontienen una 4otogra4Fa y !u te6to de!-riptivo Para intentar que e!ta! -aja! !e di!tri.uyan por todo
el rea de -ontenido !e u!ar la propiedad Soat de la! -aja!
T27.1. *n la hoja de e!tilo! +odiMque la regla -o+o !igue7 .foto Wf$o!t%$eftOX
T27.2. Prue.e Zotar la! -aja! a la dere-ha -on .foto Wf$o!t%rightOX
*6i!ten do! propiedade! +! rela-ionada! -on el ta+aHo de -aja!7 9idt. y .ei2.t >an-ho y alto? Da!ta
ahora el an-ho y el alto de -ada -aja era e!ta.le-ido por el navegador2 y e!te -al-ula el ta+aHo para que
el -ontenido a +o!trar quepa dentro de la -aja Con la! propiedade! 9idt. y .ei2.t !e 4uerza al navega#
Modulo -b 8 ;,ML 1 CSS (M
!i2ura -=. Estructura de ca:as establecida en ;,ML para el Dlbu" de 3otos.
Hi:g srcBUMoo.2pgU ?*
Hh1*/2e:p$o de :ode$o de c!2!sH?h1*
idbTlo4oT
idbTcontenidoT
Hi:g srcBU01.2pgU ?*
,oto de un
-la!!bTfotoT
,oto de un
-la!!bTfotoT
Hi:g srcBU0>.2pgU ?*
,oto de un
-la!!bTfotoT
,oto de un
-la!!bTfotoT
,oto de un
-la!!bTfotoT
,oto de un
-la!!bTfotoT
,oto de un
-la!!bTfotoT
,oto de un
-la!!bTfotoT
Hi:g srcBU0.2pgU ?*
,oto de un
-la!!bTfotoT
dor a un ta+aHo en la -aja !ele--ionada
0l 4orzar un ta+aHo de -aja !e pre!entan -ierto! pro.le+a!2 prin-ipal+ente2 -ono-er -ual e! el -o+por#
ta+iento del navegador -uando el -ontenido de una -aja no -a.e dentro /a !olu-i'n por de4e-to e!
!i+ple2 todo el -ontenido que no quepa en una -aja !e +ue!tra2 aunque !e !alga de la -aja Co+o
-on!e-uen-ia de e!to2 !u-ede que lo! -ontenido! !e !olapan en alguna! regione! quedando ilegi.le la
pgina
*n C%% para -ontrolar lo! !olapa+iento! !e utiliza la propiedad o&erSo9 Con ella2 el di!eHador de-ide !i
el -ontenido !o.re!aliente de una -aja !e +ue!tra2 !e o-ulta o !e per+ite de!plazar la -aja para verlo
T2,. Para di!tri.uir la! -aja! de la! 4otogra4Fa! propor-ional+ente !e 4orzar el ta+aHo de la! -aja!
que -ontienen 4otogra4Fa! a un ta+aHo u!ando la! propiedade! 9idt. y .ei2.t /a regla quedarFa
-o+o !e indi-a en el -'digo 242 tra! in-luirla en la hoja de e!tilo! -o+prue.e el re!ultado en el
navegador
.foto ,
;idt*0160p)1
*eig*t0>00p)1
flo+t0 $eft1 2
Cdi2o =). Distribucin Sotante de ca:as.
T2,.1. /a! 4otogra4Fa! e6i!tente! en el l.u+ tienen toda! el +i!+o an-ho pero alto di4erente2
para -o+pro.ar el e4e-to de la! propiedade! overZo< !e e!ta.le-er un alto +enor a la! -aja!2 de
e!te +odo2 alguna! 4otogra4Fa! no -a.rn Ca+.ie en la regla +o!trada en el -'digo 24 el alto a
height%180p)O Re-argue la pgina y e!tre-he la ventana del navegador ha!ta vi!ualizar i+gene!
in-o+pleta!2 aquella! que no -a.en en la -aja
T2,.2. 0Hada a la regla del -'digo 24 la propiedad o#erf$ow%hiddenO y -o+pro.ar en el navega#
dor -o+o todo el -ontenido que no quepa en la -aja 1)061@0 no e! +o!trado en el navegador
T2,.3. Ca+.ie la propiedad anterior a o#erf$ow%!+toO2 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 Mjado ha o-urrido un e4e-to e6traHo en el rea de -ontenido2 !e ha perdido el -olor de 4ondo %e
perdi' tra! ha-er la! -aja! que -ontienen la! 4otogra4Fa! Zotante! %e de.e a que lo! ele+ento! Zotante!
no -o+putan -o+o -ontenido de la! -aja!2 por ello el ta+aHo de la -aja -ontenido e! -ero
T2*. 0Hada al !ele-tor Zcontenido el atri.uto o#erf$ow%!+toO para -o+pro.ar el e4e-to en el
navegador y !olu-ionar el pro.le+a anterior
T33. Para +ejorar el a!pe-to general de la pgina !e aHadirn +! regla! a la hoja de e!tilo *n el
-'digo 2@ tiene la !olu-i'n -o+pleta2 pero !e re-o+ienda !eguir lo! pa!o! indi-ado! a -ontinua-i'n2
para ver el e4e-to de -ada regla y propiedad C%% apli-ada %i tiene duda! -on!ulte la !olu-i'n
T33.1. 5ra.ajare+o! pri+ero !o.re el !ele-tor .(ody para in-re+entar lo! hue-o! laterale!
+ediante la propiedad :!rgin% >e:O Co+prue.e el re!ultado en el navegador en -ada pa!o
T33.2. Vi!uali-e la i+agen de2radado8a/ul.pn2 que !e en-uentra entre lo! M-hero! de e!te
(7 Modulo -b 8 ;,ML 1 CSS
ejer-i-io *!ta i+agen !e utilizar -o+o i+agen de 4ondo de toda la pgina y la puede e!ta.le-er
aHadiendo a la regla .(ody utili-e el 4rag+ento de -'digo 2@ para e!te Mn Co+prue.e en el
navegador -o+o la i+agen de 4ondo queda detr! de lo! -olore! de 4ondo de la -aja Zcontenido y
Z$ogo
T33.3. Para !eparar la! 4otogra4Fa! entre !F e!ta.le-ere+o! +rgene! para la -la!e .foto
+ediante la propiedad :!rgin% 1e:O
T33.0. ,lote la i+agen de la -aja Z$ogo +ediante la regla Z$ogo i:g Wf$o!t%$eftOX Co+prue.e el
e4e-to en el navegador y ver que !e ha de!-uadrado la -o+po!i-i'n de la pgina
T33.$. /a propiedad clear per+ite reu.i-ar lo! .loque! de.ajo de otro! .loque! Zotante!
0pli-ando a la -aja -ontenido la propiedad c$e!r%(othO !e indi-a al navegador que alrededor de la
-aja Zcontenido no pueden e6i!tir -ontenido! Zotante! 0Hada di-ha propiedad y -o+prue.e el
e4e-to
T33.'. Para Mnalizar e!ta.le-ere+o! un alto Mjo a la -aja Z$ogo +ediante la propiedad
height%120p)O
T33.7. $tili-e la regla para el !ele-tor h1 +o!trada en el -'digo 2@ para -entrar el tFtulo en la
pantalla /a regla +o!trada no e! una .uena tR-ni-a2 en la pr'6i+a !e--i'n !e tra.ajar !o.re la!
unidade! de +edida en C%%
T33.,. Ca+.ie en la !olu-i'n del -'digo 2@ la! propiedade! o#erf$ow=) y o#erf$ow=y a lo! valore!
!+to y hidden ha!ta que -o+prenda !u 4un-iona+iento
(ody W
-+c(gro.nd0 tr!nsp!rent +r$(Udegr!d!do=!M+$.pngU) no=repe!t fi)ed1
3+rgin0 >e:1 ?Y M!rgen !$rededor de $! p0gin! Y?
X
h1 ,
p+dding0 60p) 10p) 80p) 2>0p)1 ?Y M!$! t]cnic! p!r! centr!r +n t5t+$o Y?
X
.foto ,
3+rgin0 1e:1
o6erflo;/)0!+to1
o6erflo;/70hidden1
;idt*0 160p)1
*eig*t0200p)1
flo+t0 $eft1
X
4logo i:g ,flo+t0$eft12
4logo ,
*eig*t0120p)1
-+c(gro.nd/color0Z3FFC61
X
4contenido , ?Y /st! c!2! tiene todo s+ contenido f$ot!nteE d!r0 pro($e:!s Y?
-+c(gro.nd/color0ZFFF3I1
o6erflo;0hidden1 ?Y Conseg+ir D+e no teng! t!:!^o ceroE todo es f$ot!nte Y?
cle+r0(oth1 ?Y -!r! e#it!r c!2!s f$ot!ntes !$rededor de est! c!2! Y?
X
Cdi2o =*. Solucin CSS co"pleta desde ,=+. .asta ,(?. inclusi&e.
#.0. -edidas
0lguno! de la! propiedade! +o!trada! ha!ta ahora in-luyen +edida! /a! +edida! en C%% e!pe-iM#
Modulo -b 8 ;,ML 1 CSS (<
-an general+ente ta+aHo! a!o-iado! al +odelo de -aja! y ta+aHo! de letra!2 e!ta! +edida! !e apli-an a
la! propiedade! !iguiente!7
0n-ho y alto del -ontenido7 propiedade! 9idt. y .ei2.t re!pe-tiva+ente
0n-ho! +Fni+o y +6i+o7 propiedade! "in89idt. y "a>89idt. re!pe-tiva+ente
Crgene! y relleno7 propiedade! "ar2in y paddin2
5ipogra4Fa!7 propiedad 3ont8si/e -orre!pondiente al ta+aHo de letra
*n aquella! propiedade! donde !e e!pe-iMquen +edida!2 C%% ha.ilita do! tipo! de e!pe-iM-a-ione!7
relativa! o a.!oluta! /a! relativa! !e -al-ulan e!ta.le-iendo una rela-i'n -on otra! +edida! ya e!ta.le#
-ida! y en la! a.!oluta! !e e!pe-iM-a !u valor real
Sinta5i! Ti.o 1e!cri.cin
1@e+ Relativa
Re!pe-to al an-ho de la letra ]C]2 el valor 1 e! la an-hura de
la letra +ay3!-ula C y el n3+ero e! un +ultipli-ador
0Ee6 Relativa
Re!pe-to de la altura de la letra +in3!-ula ]6] *l n3+ero e!
un +ultipli-ador
2p6 0.!oluta
1
A3+ero de pi6el! de la pantalla del u!uario
0@in 0.!oluta Pulgada! >1inb2@4-+?
10-+ 0.!oluta CentF+etro!
100++ 0.!oluta CilF+etro!
12pt 0.!oluta Punto! >1ptb01@++?
40p- 0.!oluta Pi-a! >1p-b421++?
E0c Relativa Cedida relativa re4erente a !u ele+ento -ontenedor
,abla ). Medidas CSS para propiedades con "edidas.
/a! +edida! relativa! !on el +ejor +Rtodo para e!pe-iM-ar unidade! en lo! di!eHo! Je. %on a+plia#
+ente utilizada! por lo! de!arrolladore! +a! e6peri+entado!2 +ientra! que en lo! prin-ipiante! u!an
+a!iva+ente unidade! p>.
J1C re-o+ienda el u!o de +edida! relativa!2 -on-reta+ente e" para 4uente! y por-entaje! para an-ho!
y alto! de -aja! *l +otivo e! do.le2 por un lado -on!eguir pgina! +! a--e!i.le! para per!ona! -on
di!-apa-idad2 y por otro lado2 -on!eguir llegar a di4erente! di!po!itivo! donde la 4rag+enta-i'n en
ta+aHo! de pantalla y re!olu-ione! pre!enta verdadero! que.radero! de -a.eza para lo! de!arrolladore!
Je.
Gtro a!pe-to i+portante a -on!iderar e! el +Rtodo de -al-ulo C%% en la! +edida! relativa! /a! +edida!
relativa! !on !ie+pre relativa! re!pe-to al ta+aHo del ele+ento padre *l ele+ento padre de toda
pgina e! la etiqueta H(ody*2 e! aquF donde un .uen di!eHador e!ta.le-e una 3ni-a +edida a.!oluta y
a!F2 el re!to de la pgina -al-ula !u! ta+aHo! en 4un-i'n de e!te valor /a ventaja de e!te +Rtodo e! que
-on -a+.iar el 3ni-o valor a.!oluto de la pgina2 !e re-al-ulan todo! lo! ta+aHo! al !er R!to! relativo!
1 *! di!-uti.le2 !e puede -on!iderar relativa de.ido al -o+porta+iento de lo! navegadore! en pantalla! de alta re!olu-i'n
)? Modulo -b 8 ;,ML 1 CSS
Para +o!trar el +odo de -l-ulo !e realizar un eje+plo -on la propiedad 3ont8si/e u!ado para e!ta.le#
-er lo! ta+aHo! en la! tipogra4Fa!2 en la !iguiente !e--i'n !e e!tudian la! tipogra4Fa!
T31. :e!-o+pri+a el M-hero "edidas./ip en una nueva -arpeta y edite -on AotepadBB lo! M-hero!
"edidas..t"l y estilos8"edidas.css Vi!uali-e en el navegador el ar-hivo "edidas..t"l
T31.1. *n el M-hero de e!tilo! !e han e!ta.le-ido @ e!tilo! de te6to -on +edida! relativa!2
-o+prue.e en el -'digo D5C/ lo! prra4o! -on e!to! e!tilo! y el ta+aHo de letra que +ue!tra el
navegador
T31.2. Ca+.ie el valor de la 3ni-a +edida a.!oluta e6i!tente en el !ele-tor C%% (ody y -o+prue#
.e en el navegador -o+o a4e-ta el -a+.io a todo! lo! ta+aHo! relativo!
T31.3. 9ntente -o+prender el e4e-to perver!o o-urrido -on el 3lti+o te6to2 para ello2 +ire el
-'digo D5C/ Para ver el re!ultado del -l-ulo de ta+aHo realizado por el navegador2 puede
utilizar el +en3 de :e!arrollador U 9n!pe-tor !ele--ionando la -aja que -ontiene el te6to $na vez
!ele--ionada di-ha -aja2 u!e la pe!taHa Co+putada de la ventana del de!arrollador y .u!que la
propiedad 3ont8si/e
#.1. *ipo%raf2as
*l 4un-iona+iento de la! tipogra4Fa! en C%% diMere en gran +edida del u!o en progra+a! de
oM+ti-a tradi-ionale!2 ello -ondu-e a -o+eter errore! al ini-iar!e en C%% 0l tra.ajar en un equipo
in4or+ti-o -on un paquete de !o4t<are in!talado !e di!pone de -antidad de tipogra4Fa! !ele--iona.le!
*!ta! tipogra4Fa! 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 e i+pri+en de di4erente 4or+a en -ada
equipo in4or+ti-o
*n ver!ione! anteriore! a C%%1 el pro.le+a !e e6tendFa a la! pgina Je.2 o-urriendo que en -ada
equipo !e vi!uali-en lo! te6to! de pgina! Je. -on tipogra4Fa! di4erente! *!te pro.le+a !e !olu-iona
utilizando 4a+ilia! de tipogra4Fa!2 no tipogra4Fa! -on-reta!2 por eje+plo2 !egura+ente todo! -ono-e+o!
la tipogra4Fa ,i"es 0e9 4o"an2 en C%% -orre!ponde a la 4a+ilia seri3 Para e!ta.le-er la 4a+ilia !e
utiliza la propiedad 3ont83a"il15 y el navegador a partir del no+.re de la 4a+ilia .u!-a una pare-ida
entre la! tipogra4Fa! in!talada! en el equipo /a! 4a+ilia! genRri-a! y !oportada! en todo! lo! navega#
dore! y !i!te+a! operativo! !on7 seri32 !ans8seri32 "onospace2 cursi&e y 3antas1
C%%1 va +! all de la! 4a+ilia! tipogrM-a! y !olu-iona e!te pro.le+a dejando utilizar tipogra4Fa! !in
ne-e!idad de e!tar in!talada! en el equipo lo-al Cediante la regla @3ont83ace pode+o! indi-ar la
u.i-a-i'n en 9nternet de un M-hero -on la tipogra4Fa y el navegador la de!-argar junto -on la pgina
para ha-er u!o de ella /a! prin-ipale! de!ventaja! de e!te +Rtodo !on7 la !o.re-arga de an-ho de .anda
de la pgina Je. al de!-argar la tipogra4Fa2 y que en la li-en-ia de +ayorFa de la! tipogra4Fa! no per+ite
-o+partirla!
T32. :e!-o+pri+a el M-hero tipo2ra6as./ip en una nueva -arpeta de !u di!-o *!te eje+plo -ontiene
una pgina D5C/ y una hoja de e!tilo! C%% $tili-e AotepadBB para editarlo! y para -ada -a+.io
Modulo -b 8 ;,ML 1 CSS )-
realizado po!terior+ente vi!uali-e el e4e-to en el navegador
T32.1. $!ando el !ele-tor univer!al e!ta.lez-a la 4a+ilia de tipogra4Fa! +ediante la propiedad
font=f!:i$y%c+rsi#eO Prue.e la! 1 4a+ilia! genRri-a! re!tante! +en-ionada! -on anterioridad7
seri32 !ans8seri32 "onospace y 3antas1
T32.2. Cree una nueva regla para e!ta.le-er el -olor de letra de todo! lo! prra4o! en +arr'n2
u!e la propiedad co$or%Z..6700O
T32.3. Para -a+.iar e! a!pe-to de lo! tFtulo! utili-e el !iguiente !ele-tor7 h1Eh2 W X2 aHdalo a la
hoja de e!tilo! para realizar lo! -a+.io! indi-ado! a -ontinua-i'n7
Ca+.ie el an-ho de la tipogra4Fa de lo! tFtulo! +ediante la propiedad
font=weight% $ighterO
*!ta.lez-a lo! tFtulo! en ver!alita! -on la !iguiente propiedad font=#!ri!nt%s:!$$=c!psO
T33. $tilizare+o! @3ont83ace para u!ar una 4uente de!-argada de!de 9nternet2 pero no in!talada en
el equipo lo-al *l pro-edi+iento en C%%1 -on!i!te en de-larar una tipogra4Fa u!ando un nuevo
no+.re e indi-ando la u.i-a-i'n de!de donde !e puede o.tener
T33.1. Co+prue.e lo! ar-hivo! .tt3 e6i!tente! en la +i!+a -arpeta donde e!t e!te eje+plo y
utili-e alguno de ello! para deMnir una nueva tipogra4Fa2 utili-e el -'digo 2) para realizar la
+odiM-a-i'n en el M-hero C%%
=font/f+ce W
font/f+3il)0 PCooVieP1 ?Y 4o:(re de $! n+e#! tipogr!f5! Y?
font/st)le0 nor:!$1
font/;eig*t0 nor:!$1
src0 +r$(PCooVie="eg+$!r.ttfP)1X
Cdi2o =+. De6nicin de nue&a tipo2ra3Ca en CSS(.
T33.2. $tili-e e!ta nueva tipogra4Fa >Coo@ie en el eje+plo? para apli-arla a lo! prra4o! del
do-u+ento
T33.3. 9ntente repetir el pro-edi+iento -on la 4uente Ti"0i2.ts.ade y apli-arla !ola+ente a la!
-a.e-era! D1 y D2
T33.0. /ea el M-hero F!L.t>t que -ontiene la li-en-ia de la! 4uente tipogrM-a que e!t u!ando
$!e Goo2le !onts PRe4 11Q para o.tener una nueva tipogra4Fa li.re y 3!ela en e!te eje+plo
0 -ontinua-i'n !e realizar otro ejer-i-io !o.re el +odelo de -aja! aprove-hando e!ta pgina Je.
Con!i!tir en e!ta.le-er una i+agen de 4ondo Mja no repetitiva2
-on-reta+ente un perga+ino !o.re el que hay que -uadrar el te6to -o+o
!e +ue!tra en la Mgura 11
T30. Con el vi!or de i+gene! e!-oja el perga+ino que +! le gu!te
de lo! e6i!tente! en la -arpeta de eje+plo *l o.jetivo e! e!ta.le-erlo
-o+o 4ondo de toda la pgina Je.
)= Modulo -b 8 ;,ML 1 CSS
!i2ura -(. !ondo de
per2a"ino.
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 sbados, lentejas los
viernes, algn palomino de aadidura los domingos, consuman
las tres partes de su hacienda. El resto della concluan sayo de
velarte, calzas de velludo para las fiestas con sus pantuflos de
lo mismo, los das 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 ...
T30.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 te6to
T30.2. *l te6to e! +ayor !ie+pre que la i+agen de 4ondo y ter+inar !o.re!aliendo in4erior#
+ente2 para !olu-ionarlo puede intentar alguna de la! !olu-ione! indi-ada! >no e! ne-e!ario
realizarla! toda!?7
1# /a +a! !i+ple -on!i!te en -ortar el te6to en prra4o! y ha-er varia! pgina! Je.
2# Con!eguir que el te6to !e de!pla-e interior+ente al perga+ino2 para ello de.e aHadir al
-'digo D5C/ una etiqueta :9V para el -ontenido
1# Partir la i+agen de 4ondo en tre! parte!7 -a.e-era2 -uerpo y pie Colo-ar -ada i+agen en
una etiqueta :9V y ha-er que la i+agen -uerpo !e repita2 pero de.e -on!eguir un patr'n
de perga+ino en la parte -entral a partir de la i+agen
(ody ,
-+c(gro.nd/i3+ge0 +r$(P___P)1
-+c(gro.nd/repe+t0no=repe!t1
;idt*0 ___p)1
p+dding/top0 ___p)1
p+dding/-otto30 ___p)1
p+dding/left0 ___p)1
p+dding/rig*t0 ___p)1
X
Cdi2o =M. I"a2en de 3ondo para pD2ina Web.
#.3. -edios y consultas de medios CSS
9ni-ial+ente D5C/ 4ue -on-e.ido para !er vi!ualizado -on un progra+a de ordenador en una
pantalla2 por ello2 !e !uponFan -ierto! ta+aHo! y propor-ione! de pantalla Doy en dFa el a--e!o a
9nternet !e realiza de!de di4erente! di!po!itivo! donde la! propor-ione!2 ta+aHo! y re!olu-ione! de
pantalla !on +uy heterogRnea!
*n e!ta realidad e! donde C%% -o.ra +ayor !entido2 el he-ho de !eparar la in4or+a-i'n de la pre!enta#
-i'n 4a-ilita la +odiM-a-i'n del a!pe-to para adaptar!e a -ada di!po!itivo /o! di!eHo! Je. pueden
-on!iderar di4erente! hoja! de e!tilo en 4un-i'n del di!po!itivo que de!ee o.tener la pgina Je.2 y
ade+! C%% provee propiedade! e!pe-FM-a! para deter+inado! +edio! -o+o !on la i+pre!ora! o
!intetizadore! de voz
0l -o+ienzo de e!ta !e--i'n !e +o!tr' -o+o !e enlaza.a una hoja de e!tilo! e6terna en una pgina
D5C/ >ver -'digo ;2 pgina 2;? /a etiqueta H$inV* -ontiene un atri.uto lla+ado "edia donde el de!a#
rrollador e!ta.le-e para que di!po!itivo o +edio e! la hoja de e!tilo! Cuando !e a--ede al do-u+ento
D5C/2 !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 @
Modulo -b 8 ;,ML 1 CSS )(
Medio 6b7eti8o
all 5odo! lo! +edio!
!-reen Grdenadore!
print 9+pre!ora
handheld :i!po!itivo! +'vile! o -on pantalla pequeHa
.raille :i!po!itivo! t-tile! .raille
proje-tion Pre!enta-ione!
,abla *. 0o"bres de "edios "Ds utili/ados en CSS.
Para -rear pgina! -o+pati.le! -on di4erente! +edio! !e de.en -rear varia! hoja! de e!tilo y enlazarla!
al de!de el -'digo D5C/ -o+o !e indi-a en el -'digo 2E *n -ada hoja de e!tilo2 y utilizando -orre-ta#
+ente el +odelo de -aja!2 !e -on!igue adaptar el !itio Je. a -ada di!po!itivo un -on-reto
...
<lin( re$BTsty$esheetT typeBTte)t?cssT :edi!BTscreenT hrefBTp!nt!$$!.cssT%>
<lin( re$BTsty$esheetT typeBTte)t?cssT :edi!BT*+nd*eldT hrefBS:o#i$.cssT%>
<lin( re$BTsty$esheetT typeBTte)t?cssT :edi!BTprintT hrefBSi:presor!.cssT%>
...
Cdi2o =7. ;o:as de estilo para di3erentes "edios.
$na +ejora !igniM-ativa in-luida en C%%1 e! la po!i.ilidad de -ontrolar la! regla! C%% apli-ada! en
4un-i'n de la! -ara-terF!ti-a! del +edio de vi!ualiza-i'n *!te pro-edi+iento !e lla+a CSS "edia
Eueries y per+ite e!ta.le-er regla! en 4un-i'n de -ierta! -ondi-ione! 0lternativa+ente al u!o de la
etiqueta H$inV* u!ada en el -'digo 2E para !ele--ionar una hoja u otra2 e6i!te otro +Rtodo para in-luir
una hoja de e!tilo! de +anera -ondi-ional Para ello2 !e utilizan la regla @:edi! condici>n W ` X
in-luyendo entre la! llave! la! regla! e!pe-FM-a! a apli-ar2 !'lo !i !e -u+ple la -ondi-i'n *l 4or+ato de
la -ondi-i'n puede llegar a !er -o+plejo y -onte+pla -ara-terF!ti-a! de +edio -o+o !on7 ta+aHo2
nu+ero de -olore!2 rela-i'n de a!pe-to2 orienta-i'n2 et- !e puede -on!ultar la! po!i.ilidade! di!poni #
.le! en PRe4 1;Q
$n u!o +uy -o+3n de CSS "edia Eueries e! el -ontrol de la di!po!i-i'n de una pgina en 4un-i'n del
an-ho de la pantalla2 +uy utilizado para di!po!itivo! +'vile! $na tR-ni-a de di!eHo +uy utilizada y
alta+ente re-o+endada e! el di!eHo responsi&e >!en!i.le? -on!i!tente .!i-a+ente en pgina! -apa-e!
de adaptar!e auto+ti-a+ente al an-ho de la pantalla de vi!ualiza-i'n -a+.iando la di!po!i-i'n2 ta+aHo
y vi!i.ilidad de lo! -ontenido! &unto al -on-epto responsi&e apare-en otra! tR-ni-a! de di!eHo -on
di4erente! -onnota-ione! -o+o !on7 di!eHo! Ze6i.le!2 di!eHo! adaptativo!2 di!eHo! lFquido! y otro!
%e ilu!trar -on un eje+plo la tR-ni-a de di!eHo responsi&e +ediante CSS "edia Eueries *l o.jetivo e!
-a+.iar la di!po!i-i'n de lo! .loque! e6i!tente! en una pgina Je. y el ta+aHo de la! i+gene! a
+edida que el an-ho de la pantalla de vi!ualiza-i'n di!+inuye 0!F !e harn do! eje+plo! a -ontinua-i'n2
uno !o.re reu.i-a-i'n de .loque! +ediante po!i-iona+iento a.!oluto y un !egundo donde !e apli-an
di4erente! hoja! de e!tilo en 4un-i'n del an-ho de la pantalla
)) Modulo -b 8 ;,ML 1 CSS
T3$. :e!-o+pri+a el M-hero "edia8Eueries./ip y a.ra en AotePadBB lo! M-hero! responsi&e..t"l2
pantalla8anc.a.css y pantalla8estrec.a.css
T3$.1. $!ando ,ire4o6 vi!uali-e la pgina responsi&e..t"l y ver lo! .loque! prin-ipale! del
+odelo de -aja! -on lFnea! punteada! en una di!po!i-i'n -o+o la +o!trada en la parte izquierda
de la Mgura 14 *l o.jetivo e! reu.i-ar lo! .loque! de la 4or+a indi-ada en la parte dere-ha de la
Mgura 14 u!ando po!i-iona+iento a.!oluto de -aja!2 no -o+o en el eje+plo de la Mgura 12 >pg
1(? donde !e u!a.an -aja! Zotante!
T3$.2. 9ni-ie de nuevo el +odo de!arrollador de ,ire4o6 >Mgura 10? de!de el +en3 :e!arrollador
U *ditor de e!tilo! 0pare-er el panel de de!arrollo pero -on un editor de te6to donde puede
+odiM-ar dire-ta+ente la hoja de e!tilo! 0de+! puede guardar lo! -a+.io! realizado! >!i y !'lo
!i e!t tra.ajando !o.re M-hero! de !u di!-o?
!i2ura -). Disposicin 6nal de bloEues con posiciona"iento absoluto.
T3$.3. Para -on!eguir reu.i-ar la! -aja! indi-ada! Mje el ta+aHo del panel izquierdo aHadiendo el
atri.uto width%180p)O a la regla ade-uada2 ya e6i!tente en el M-hero css G.!erve -o+o -a+.ia la
pgina en tie+po real !eg3n -a+.ia lo! e!tilo!
T3$.0. Para reu.i-ar el .loque de -ontenido !e e!ta.le-er un po!i-iona+iento a.!oluto re!pe-to
a la pgina Je. para el panel izquierdo 0Hada a la regla que -ontrola el panel izquierdo el
atri.uto position%!(so$+teO *l e4e-to en el navegador e! la !uperpo!i-i'n de la! de+! -aja!
!o.re la que tiene po!i-i'n a.!oluta /o! ele+ento! -on po!i-i'n a.!oluta no -o+putan -o+o rea
o-upada en una pgina Je.2 por ello2 todo! lo! de+! .loque! !e !uperponen a ello!
T3$.$. Para evitar e!te e4e-to e! ne-e!ario !ituar -ada -aja +anual+ente +ediante C%% en
po!i-ione! donde no !e !uperpongan entre !F 0!F2 !e u.i-ar el .loque de -ontenido a 1(0p6 del
+argen dere-ho de la pgina2 para ello aHada en la regla que -ontrola la -aja de -ontenido do!
atri.uto!7 position%!(so$+teO y $eft%170p)O
T3$.'. 03n de.e e!tar !uperpue!ta la -aja que al.erga el piR de pgina2 vuelva a utilizar para el
piR el po!i-iona+iento a.!oluto2 +ediante el atri.uto top% ___p)O u.Fquelo -orre-ta+ente
T3$.7. =uarde lo! -a+.io! en la hoja de e!tilo! de!de el propio ,ire4o6 y edite el -'digo D5C/ de
Modulo -b 8 ;,ML 1 CSS )*
`panel#izquierdo
`-ontenido
`pie
`-a.e-era
`panel#
izquierdo
`-ontenido
`pie
`-a.e-era
la pgina -on AotePadBB aHadiendo al +eno! do! .loque! de anun-io! +! 0l -re-er e!ta parte
de la pgina y el pie tener u.i-a-i'n a.!oluta pro.a.le+ente !e !uperponga de nuevo el pie de
pgina
T3$.,. $na !olu-i'n -orre-ta y que evita e!te tipo de e4e-to! e! no tener +u-ha! -aja! -on
po!i-iona+iento a.!oluto *n la !olu-i'n propue!ta en el -'digo 2; !e e!ta.le-e 3ni-a+ente el
panel izquierdo en +odo a.!oluto2 y el re!to de -aja! !e le! apli-a un +argen en la izquierda para
que no !e !uperpongan Copie y pegue el -'digo +o!trado en !u hoja de e!tilo! para ver el e4e-to
4p+nel/i<5.ierdo ,
position0!(so$+te1
;idt*0180p)1
X
4contenido ,
3in/*eig*t0600p)1
3+rgin/left0170p)1
X
4pie ,
te7t/+lign0center1
3+rgin/left0170p)1
X
Cdi2o =<. #osiciona"iento absoluto de ca:as.
T3'. 0hora en un !egundo eje+plo !e +o!trar la ne-e!idad de realizar di!eHo! !en!i.le! al tipo de
di!po!itivo de vi!ualiza-i'n utilizado Para e+ular una pantalla de +enor re!olu-i'n de.e a-tivar el
+odo de Vi!ta de di!eHo adapta.le *!ta op-i'n e!t tanto en el +en3 de de!arrollo de ,ire4o6 -o+o
en un .ot'n de la parte dere-ha del panel de de!arrollo %it3e el puntero del rat'n !o.re lo! .otone!
dere-ho! del panel de de!arrollo y e!pere un !egundo para leer la 4un-i'n de -ada .ot'n
T3'.1. $na vez a-tivado el +odo de di!eHo adapta.le puede di+en!ionar li.re+ente el rea de la
pgina para ver el e4e-to :i+en!ione a uno! 120p6 de an-ho2 puede u!ar un -uadro de!plega.le
!ituado en la parte !uperior -on re!olu-ione! tFpi-a!2 12064E0 e! la pantalla ha.itual de un
telR4ono +'vil de ga+a .aja2 o.!ervar que e!ta pgina no e!t .ien adaptada a e!te tipo de
di!po!itivo!
T3'.2. *dite -on AotePadBB el M-hero responsi&e..t"l para aHadir en la -a.e-era una nueva
hoja de e!tilo! -ondi-ional +ediante7 el -'digo +o!trado2 4Fje!e que ya !e en-uentra -o+entada
di-ha !enten-ia2 puede quitar la! +ar-a! de -o+entario para a-tivarla
<lin( re$BUsty$esheetU 3edi+?@A3+7/;idt*0 :5Bp7C@ hrefBUp!nt!$$!=estrech!.cssU %>
Cdi2o (?. ;o:a de estilo condicional usando "edia8Euer1.
T3'.3. *!ta nueva hoja de e!tilo! !olo !e apli-a .ajo la -ondi-i'n e!pe-iM-ada en el atri.uto
:edi!2 e! de-ir2 !olo !e apli-a para un an-ho +enor de 4@0p6 *dite -on AotepadBB la hoja de
e!tilo! a!o-iada pantalla8estrec.a.css y -a+.ie la regla del panel izquierdo aHadiendo la
propiedad disp$!y%noneO la -ual ha-e que !e o-ulte la -aja
T3'.0. Re-argue la pgina y -a+.ie -on el rat'n el ta+aHo de vi!ualiza-i'n para -o+pro.ar que
una -aja de!apare-e por de.ajo de 4@0p6 de an-ho
)+ Modulo -b 8 ;,ML 1 CSS
T3'.$. *l 3lti+o a!pe-to a tratar e! el -o+porta+iento de la! i+gene! ante el -a+.io de ta+aHo
del rea de vi!ualiza-i'n *dite el -'digo D5C/ -on AotepadBB y .u!que do! etiqueta! ,MQ
-o+entada!2 quite lo! -o+entario! >!in .orrar la etiqueta ,MQ?2 guarde lo! -a+.io! y re-argue la
pgina en el navegador G.!ervar al redi+en!ionar la pantalla -on re!olu-ione! e!tre-ha! la!
i+gene! no !e -o+portan .ien
T3'.'. $n pro-edi+iento u!ado ha.itual+ente e! indi-ar al navegador que reduz-a el ta+aHo de
la! i+gene! que no quepan en -a!o de pantalla pequeHa! Para ello edite el M-hero pantalla8
estrec.a.css y aHada la !iguiente regla7 .notici! i:g , 3+7/;idt*0100912 *!ta regla indi-ar al
navegador que el an-ho +6i+o de -ualquier i+agen dentro de una -aja de noti-ia no de.e !er
+ayor que el 100c del an-ho di!poni.le para la -aja padre Prue.e redi+en!ionar el rea de
vi!ualiza-i'n
#.4. 5tros aspectos
%e tratan .reve+ente otro! a!pe-to! relevante! -o+o !on7 -olore!2 agrupa-i'n de propiedade!2
do.le! -la!e! y -o+entario!
Re!pe-to a lo! -olore!2 han apare-ido en lo! valore! de alguno! atri.uto! en do! 4or+ato!7 pala.ra -lave
y valor R=I he6ade-i+al *n C%% e6i!ten alguna! otra! 4or+a! para e!pe-iM-ar e!to! -olore!2 pero el
u!o +! e6tendido e! R=I *!te 4or+ato -on!i!te en la e!pe-iM-a-i'n de un -olor -o+o +ez-la de tre!
-olore!7 R e! rojo2 = e! verde y I e! azul /a inten!idad de -ada uno de e!to! -o+ponente! !e e!pe-iM-a
-on un n3+ero2 por eje+plo7 "QI(288E0E0) e! rojo puro y "QI(288E288E0) e! a+arillo /a 4or+a -o+pa-ta
para indi-ar el valor de -olor -on!i!te en poner lo! tre! n3+ero! en he6ade-i+al pre-edido! de ` *l
eje+plo anterior7 ZFF0000 e! rojo puro y ZFFFF00 e! a+arillo
Gtro a!pe-to e! la po!i.ilidad de agrupar alguna! propiedade! Cu-ho! de la! propiedade! +o!trada!
ha!ta el +o+ento !oportan una !inta6i! agrupada2 -on!i!tente en e!ta.le-er de una +anera -o+pa-ta
vario! atri.uto! !i+ultnea+ente /a 4or+a +! 4-il de -o+prenderlo e! -on la! propiedade! "ar2in y
paddin2 -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 Mgura 1@ !e +ue!tran do! equivalen-ia! en una deMni-i'n de -la!e2 4Fje!e -o+o -ada
propiedad agrupada -orre!ponde a -uatro propiedade!2 donde el orden de apari-i'n de lo! valore! e!t
predeter+inado en C%% *6i!ten +! propiedade! agrupada! en C%% -o+o !on7 3ont2 border2
bac@2round2 list8st1le y otra!
!i2ura -*. L2rupacin de propiedades.
Modulo -b 8 ;,ML 1 CSS )M
.c!2!1 W
3+rgin0 10p) 18p) 20p) 28p)1
p+dding0 0.1e: 0.2e: 0.6e: 0.7e:1
d
.c!2!1 W
3+rgin/top0 10p)1
3+rgin/rig*t0 18p)1
3+rgin/-otto30 20p)1
3+rgin/left0 28p)1
p+dding/top0 0.2e:1
p+dding/rig*t0 0.6e:1
p+dding/-otto300.6e:1
p+dding/left0 0.7e:1
d
5a+.iRn e! ha.itual en-ontrar en lo! CC% la! hoja! de e!tilo dividida! en vario! M-hero!2 !iendo el
3lti+o el de +ayor prioridad Gtra !inta6i! +uy utilizada e! la apli-a-i'n de varia! -la!e! a un ele+ento
D5C/2 -on!iguiRndo!e !eparando por un e!pa-io toda! la -la!e! dentro del atri.uto class2 por eje+plo
c$!ssBTte7tores+lt+do ele3ento3en.T
/o! di!eHo! -on C%% tienen di4erente! !olu-ione!2 pero +u-ha! ve-e! al intentar apli-ar -ierta!
propiedade! que pare-en equivalente! lo! e4e-to! no !on lo! de!eado! :o! eje+plo! !on lo! di!eHo!
+ulti-olu+na o la o-ulta-i'n de ele+ento! Re!pe-to al +odelo +ulti-olu+na2 en C%%1 !e -onte+pla la
po!i.ilidad de dividir una -aja en varia! -olu+na!2 pero !e de.e -on!iderar que no e! +uy utilizada por
!er di4F-il de -ontrolar lo! !alto! de -olu+na Re!pe-to a la vi!i.ilidad de -aja!2 la o-ulta-i'n !e puede
realizar +ediante la! propiedade! disp$!y%noneO o #isi(i$ity%hiddenO2 y aunque puedan pare-er
equivalente!2 no lo !on 0+.a! o-ultan la -aja de la vi!ualiza-i'n pero #isi(i$ity deja un hue-o va-Fo en
el rea de vi!ualiza-i'n donde e!ta.a el ele+ento
,inal+ente al igual que todo! lo! lenguaje! in4or+ti-o!2 !e in-orporan lo! -o+entario! que !on te6to!
e!-rito! por el de!arrollador y que el progra+a in4or+ti-o ignora C%% lo in-orpora -opiando la !inta6i!
del lenguaje C *n el -'digo 2@ apare-en vario! -o+entario! de eje+plo2 !e puede ver que -o+ienzan
por ?Y y ter+inan por Y? ade+!2 pueden tener varia! lFnea!
Para pro4undizar en el re!to de a!pe-to! de C%% !e re-o+ienda la le-tura del +anual -itado en PRe4 20Q
el -ual2 no e! +uy e6ten!o y e! 4-il de a!i+ilar
6- E5e/0lo. de di.e;o. ,a.ado. e# <o5a. de e.%ilo CSS
$tilizando plantilla! li.re! o.tenida! de FpenWebDesi2n PRe4 12Q !e realizarn pequeHo! -a+.io! en
la aparien-ia %e utilizar en pri+er lugar la plantilla tpl8businessOdesi2n./ip que !eg3n !e ha podido
-o+pro.ar utiliza de +anera -orre-ta la! hoja! de e!tilo 4a-ilitando lo! -a+.io! y ho+ogeneizando el
!itio Je. %e pro-eder a realizar uno! -a+.io! .!i-o! en lo! e!tilo! dire-ta+ente en el !ervidor de
9nternet
T37. %u.a al !ervidor de 9nternet del -ur!o lo! M-hero! de la plantilla businessOdesi2n *n -a!o de
ha.er -olo-ado la otra plantilla anterior+ente2 de.e .orrar todo! lo! M-hero! del !ervidor y pro-eder
a !u.ir la -orre-ta
T37.1. *je-ute el progra+a AotepadBB2 -one-te -on el !ervidor +ediante ,5P2 y lo-ali-e el
M-hero business.css en el !ervidor para a.rirlo -on el editor
T37.2. /o-ali-e el !iguiente 4rag+ento de -'digo7
4top ,
color0 ZFFFFFF1
;idt*0 221p)1
*eig*t0 160p)1
-+c(gro.nd/olor0 Z777CI>1
2
Cdi2o (-. Estilos de la cabecera de la plantilla de e:e"plo.
)7 Modulo -b 8 ;,ML 1 CSS
T37.3. Ca+.ie la entrada -+c(gro.nd0 Z777CI>1 a -+c(gro.nd0 Z66>>>>1 guarde lo! -a+.io! y
re-argue la pgina en el navegador :e.erFa o.!ervar -a+.io! en la pgina -uando la hoja de
e!tilo! !e tran!Mera -o+pleta+ente
T37.0. 9n!erte una nueva propiedad ante! del -ierre de la llave y aHada la !iguiente entrada7
font/si<e 0 18091 =uarde lo! -a+.io!2 tran!Mera la hoja de e!tilo! y re-argue la pgina en el
navegador
T37.$. 0u+ente el an-ho y alto para ver el e4e-to -a+.iando la! propiedade! width y height y
-o+prue.e !u! e4e-to!
T37.'. Ca+.ie el valor de propiedad -olor a un -'digo que -orre!ponda al -olor a+arillo y
-o+prue.e el e4e-to $tili-e la e6ten!i'n de ,ire4o6 ColorKilla para !ele--ionar -olore!
/a! plantilla! de !itio! Je. no !iguen una! pauta! generale! en !u realiza-i'n *l -'digo que en-on#
tra+o! en lo! M-hero! de hoja! de e!tilo! !on +uy diver!o! /o! no+.re! de !ele-tore! de e!tilo!
ta+po-o !on ho+ogRneo!2 -ada de!arrollador lo! utiliza de +anera di4erente Para poder -a+.iar el
a!pe-to de un !itio Je. 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 te6to! el -'digo D5C/ !e pueden -ono-er lo! e!tilo! de -ada parte de la
pgina Je.2 pero e!te pro-edi+iento e! tedio!o y requiere tener una gran e6perien-ia en di!eHo Je.
/o! navegadore! +oderno! in-luyen herra+ienta! para 4a-ilitar el de!arrollo Je.2 !e utilizarn e!ta!
-ara-terF!ti-a! para poder alterar la aparien-ia -on 4a-ilidad
0.1. ('tensi6n &irebu% para &irefo'
/a herra+ienta de tra.ajo para lo! -a+.io! de e!tilo! en e!te -ur!o !er el propio navegador Je.
0unque el -ur!o e!t -entrado en el navegador ,ire4o62 el re!to de navegadore! ta+.iRn in-luyen la!
herra+ienta! de di!eHo que !e van a +o!trar para e!te navegador 0nterior+ente !e utilizaron la!
herra+ienta! para de!arrollo in-luida! en el propio ,ire4o6 0hora !e propone utilizar una a+plia+ente
utilizada y que pre!enta alguna! +ejora! 4rente a la in-orporada en ,ire4o6
*n el +'dulo anterior !e in!talaron -o+ple+ento! en ,ire4o6 y !e re-o+enda.a in!talar !irebu22 !i ya lo
tiene in!talado puede o+itir lo! do! pri+ero! pa!o!7
T3,. Co+prue.e !i el equipo tiene in!talado ,ire4o62 en -a!o -ontrario de!-rguelo de!de
"o/illa.or2 y pro-eda a in!talarlo
T3,.1. 0--eda al +en3 Co+ple+ento! donde !e pueden de!-argar nueva! -ara-terF!ti-a! para el
navegador %ele--ione el -ontrol izquierdo G.tener -o+ple+ento! y e!-ri.a en el -uadro de
.3!queda !ituado en la parte !uperior dere-ha la pala.ra 6rebu2 :e todo! lo! -o+ple+ento! que
apare-en in!tale el que !e lla+a !i+ple+ente !irebu2 5ra! la in!tala-i'n e! ne-e!ario reini-iar
,ire4o6
T3,.2. Aavegue a !u !itio Je. en 9nternet y a-tive !irebu2 u!ando el .ot'n !ituado a la dere-ha
del -uadro de .3!queda de ,ire4o6 %e de!plegar un panel in4erior -on -antidad de -ontrole!
Modulo -b 8 ;,ML 1 CSS )<
-o+o el +o!trado en la Mgura 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 %eg3n !e !it3e en un ele+ento !e le +o!trarn la! regla! C%% apli-ada! a di-ho
ele+ento2 el M-hero donde e!tn deMnido! y la lFnea dentro de e!e M-hero %ele--ione el -uadro
naranja y averigXe la! regla! apli-ada! y el M-hero
T3,.0. *dite el M-hero2 lo-alizando la regla e intente -a+.iar el -olor de 4ondo naranja de e!a
-aja por otro -olor $tili-e ColorKilla para e!-oger un -olor a !u gu!to
T3*. Aavegue a una pgina -on gran -antidad de -ontenido!2 por eje+plo2 una red !o-ial o un
peri'di-o de tirada na-ional 0-tive !irebu2 y dentro de !irebu2 a-tive el panel de red Re-argue la
pgina -on ,@ y o.!erve la in4or+a-i'n +o!trada en di-ho panel2 intente interpretarla
!i2ura -+. ista 2eneral de la e>tensin !irebu2 de !ire3o>.
8- Co#.e5o. CSS
/a prin-ipal -on!idera-i'n a tener en -uenta e! que la +ayorFa de lo! di!eHo! !e pueden per!onalizar
realizando !'lo +odiM-a-ione! C%% en lugar de D5C/ Canejar e!ta tR-ni-a -on Zuidez le per+itir
per!onalizar -o+pleta+ente el a!pe-to y pre!enta-i'n de -ualquier ge!tor de -ontenido +oderno
%i a3n a!F !e -a+.ia el -'digo D5C/ nun-a utili-e ta.la! en la +aqueta-i'n de -ontenido2 la! ta.la! !on
e6-lu!iva+ente para pre!entar dato! y no a.u!e de la! etiqueta! :9V en el di!eHo2 puede llegar a -rear
un -'digo D5C/ in-ontrola.le
*? Modulo -b 8 ;,ML 1 CSS
Iot'n de
in!pe--i'n
Iot'n de
in!pe--i'n
0-tivar
,ire.ug
0-tivar
,ire.ug
%ele-tore! apli-ado!
%ele-tore! apli-ado!
,i-hero y lFnea del !ele-tor
,i-hero y lFnea del !ele-tor
Partiendo de e!to! prin-ipio! otra! -on!idera-ione! i+portante! !on7
Valide !u -'digo D5C/ y C%% utilizando la! herra+ienta! W(C ;,ML &alidator2 CSS &alidator
Reduz-a el ta+aHo de la! i+gene! en el propio M-hero de la i+agen2 no -on atri.uto! C%%
Prue.e !u te+a en vario! navegadore! <e. y no de!arrolle en 9nternet *6plorer e!te navegador no
-u+ple lo! e!tndare! J1C Cozilla ,ire4o62 0pple %a4ari2 =oogle Chro+e y Gpera -u+plen lo!
e!tndare!
Cantenga lo! no+.re! de ar-hivo en +in3!-ula!2 tanto de i+gene! -o+o hoja! de e!tilo y
pgina! D5C/
Ponga !ie+pre el -'digo C%% en un M-hero e6terno o vario!2 evite in-luir el atri.uto st1le en una
etiqueta D5C/ para 4orzar un e!tilo
Ao a.u!e de lo! atri.uto! 9:2 e! +!2 !e re-o+ienda +ini+izar !u u!o para 4a-ilitar el u!o de
&Kuery
*!-ri.a -o+entario! en la! -la!e!2 el -'digo -o+entado e! 4-il de +antener
=- Reali7a$i4# o0$io#al
*6i!ten +ultitud de herra+ienta! de ayuda al de!arrollo Je. entre lo! -o+ple+ento! de ,ire4o62
puede in!talar alguno! +! que !ern 3tile! a lo largo del -ur!o 0de+!2 todo! lo! navegadore! de
e!-ritorio di!ponen de la! herra+ienta! para de!arrolladore! in-orporada! !in ne-e!idad de plugin!
adi-ionale!
T03. 9n!tale el navegador C.ro"e de =oogle
T03.1. Prue.e la! herra+ienta! de de!arrollo in-orporada! en el propio navegador -on la
plantilla utilizada anterior+ente
T03.2. Iu!que -o+ple+ento! para de!arrolladore! en e!te navegador Por eje+plo2 .u!que alg3n
!ele-tor de -olore! equivalente a ColorKilla
T01. :e!-argue alguna! plantilla! de FpenWebDesi2n PRe4 12Q y edite la! hoja! de e!tilo para
-o+pro.ar -o+o e!tn he-ha!
>- CSS2 ) e5e/0lo. %(a%ado. a lo la(:o del $u(.o
C%%1 trae innu+era.le! +ejora! re!pe-to a la ver!i'n anterior Con C%%1 !e han intentando uniM-ar
e6ten!ione! parti-ulare! in-luida! por lo! de!arrolladore! de di4erente! navegadore! Je. C%%1 e!
+u-ho +! e6ten!o que !u ver!i'n prede-e!ora2 de he-ho2 de.ido a !u +agnitud !e han divido la!
e!pe-iM-a-ione! en di4erente! +'dulo! !o.re lo! que !e tra.aja independiente+ente Por e!to! +otivo!
lo! navegadore! e6i!tente! no in-orporan C%%1 -o+pleta+ente2 !eg3n avanzan !u! de!arrollo! van
in-orporando nueva 4un-ionalidad
Modulo -b 8 ;,ML 1 CSS *-
%e de!ta-a de C%%1 la! !iguiente! novedade! re!pe-to a C%%2 ya operativa! en la +ayorFa de lo!
navegadore! y re-o+endada! por J1C7 po!i.ilidad de poner i+gene! en lo! .orde!2 !o+.ra! para el
te6to y la! -aja!2 +3ltiple! i+gene! de 4ondo y u.i-a-i'n relativa de la! +i!+a!2 redi+en!ionado de
-aja!2 gradiente! para 4ondo!2 te6to! +ulti-olu+na2 +ar-o! do.le! >outline? y otra!
0 lo largo del -ur!o apare-ern +3ltiple! eje+plo! u!ando e!ta! y otra! -ara-terF!ti-a! de C%%12 aunque
no !e -u.rir todo C%%1 en toda !u e6ten!i'n *n el !iguiente li!tado !e enlazan lo! eje+plo! +!
relevante! realizado! a lo largo del do-u+ento2 en ello! !e tratan -on-epto! +! avanzado! tanto de
C%%2 -o+o C%%17
*4e-to de !o+.ra en te6to7 C'dulo 2d # Pre!ta%hop >-'digo 1;2 pg ()?
*4e-to 4uego e!tti-o y ani+ado en te6to7 C'dulo 2d # Pre!ta%hop >-'digo! 41 y 422 pg 121?
*4e-to lFnea e6terior en te6to7 C'dulo 2e # JordPre!! >-'digo 4@2 pg 141?
%o+.ra en -aja! C'dulo 2a # JiLi! >pg ()?
Re!plandor en -aja!7 C'dulo 2e # JordPre!! >51)(12 pg 140?
G-ulta-i'n de -aja!7 C'dulo 2. # =e!tore! de 4oro! >51022 pgina ;2?
Iorde -on i+agen C%%17 C'dulo 1a # &oo+la >-'digo @12 pgina 1)(?
Iorde! redondeado! C%%17 C'dulo 2a # JiLi! >-'digo 112 pgina ()?2 C'dulo 2e # JordPre!!
>-'digo 4@2 pg 141?
Po!i-iona+iento de -aja!7 C'dulo 2d # Pre!ta%hop2 >-'digo 402 pgina 11;?
Ca+.io de i+agen de .olo! en li!ta!7 C'dulo 1a # &oo+la2 >-'digo @02 pgina 1)(?
?- Re*e(e#$ia.
PRe4 1(Q 5he Jorld Jide Je. Con!ortiu+2 J1C2 <http788<<<<1org8"
5a+.iRn di!poni.le en7 <http788<<<<1-e!8"
PRe4 1EQ J1%-hool!-o+2 Re4!ne! :ata2 <http788<<<<1!-hool!-o+8-!!re48-!!O!ele-tor!a!p"
PRe4 1;Q C%% Re4eren-e2 Cozilla :eveloper Aet<orL >C:A?2 <http!788developer+ozillaorg8en#
$%8do-!8Je.8C%%8Re4eren-e"
PRe4 20Q 9ntrodu--i'n a C%%2 *guFluz PRrez2 &avier2 5 <http788<<<li.ro!<e.e!8-!!8"
*= Modulo -b 8 ;,ML 1 CSS
&4dulo $ ' 3la%a*o(/a. A&3 ' Bi%#a/i
)ervidor +,-, servidor de base de datos,
len.uaje de pro.ra$aci/n P%P
- Re.u/e#
2ic-ero 1e!cri.cin
.itna+i#<a+p!ta-L#@42)#0#<indo<!#in!tallere6e 9n!talador del Iitna+i J0CP %ta-L
tpl#arti-azip2 tpl#earthy2zip2 tpl#+y!teryplanetzip Plantilla! li.re! D5C/@ B C%%1
eje+plo!phpzip *je+plo! de progra+a! en PDP
,abla +. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
0CP e! a-r'ni+o de 0pa-he2 Cy%K/ y PDP e!to! -o+ponente! -orre!ponden a una in4rae!tru-tura
.!i-a para el de!arrollo o pue!ta en e6plota-i'n de un !itio Je. .a!ado en e!ta te-nologFa y -on lo!
!iguiente! -o+ponente!7 un !ervidor Je. >0pa-he?2 una .a!e de dato! >Cy%K/? y un lenguaje de
progra+a-i'n >PDP?
Iitna+i e! un paquete de !o4t<are a.ierto -on la pila te-nol'gi-a 0CP in-orporada2 vario! -o+ponente!
adi-ionale! de !o4t<are in-luido!2 pen!ado para 4a-ilitar el de!arrollo y la pue!ta en e6plota-i'n de un
!itio Je. Prin-ipal+ente e! 3til para la.ore! de de!arrollo en equipo! lo-ale!2 ini-ial+ente 4ue
-on-e.ido -on e!te Mn2 !'lo para tra.ajo lo-al Doy en dFa e! !uM-iente+ente ro.u!to -o+o para
i+plantarlo en un entorno de e6plota-i'n2 aunque no e! +uy -o+3n u!arlo en !ervidore!
Rev 4(2)
0de+! de Iitna+i a-tual+ente e6i!ten +ultitud de plata4or+a! -l'ni-a! -on alguna! +Fni+a! di4eren#
-ia! *!ta! di4eren-ia! re!iden ha.itual+ente en la! utilidade! in-luida!2 en lo! lenguaje! de
progra+a-i'n !oportado! o en .a!e! de dato! utilizada!2 de!ta-ando -o+o +! -ono-ida!7 J0CP PRe4
21Q y ^0CPP PRe4 24Q 0unque e!ta! plata4or+a! 4a-ilitan la in!tala-i'n de todo! lo! -o+ponente!
ne-e!ario! para la pue!ta en 4un-iona+iento de un !ervidor de 9nternet2 en un !ervidor para u!o
pro4e!ional2 todo! e!to! -o+ponente! !e in!talan y !e +antienen de +anera !eparada
Iitna+i va +! all de !er una plata4or+a de de!arrollo2 real+ente e! una pre-onMgura-i'n de
apli-a-ione! para pue!ta dire-ta+ente en e6plota-i'n de un !ervi-io Je. :e he-ho2 -uando !e a--ede a
la pgina de de!-arga! !e puede ver la -antidad de !ervi-io! y ge!tore! de -ontenido pre-onMgurado!
que !e pueden de!-argar para !u pue!ta en 4un-iona+iento in+ediata
2- I#.%ala$i4# de Bi%#a/i WA&3
/a in!tala-i'n de Iitna+i J0CP %ta-L no pre!enta ninguna diM-ultad2 !'lo hay que a-eptar la!
op-ione! predeter+inada! /a ver!i'n utilizada en e!te -ur!o in!talar do! !ervi-io! -orre!pondiente! a
lo! !ervidore! 0pa-he >!ervidor J*I? y Cy%K/ >!ervidor de .a!e! de dato!? *!to! !ervi-io! !e
-onMguran en +odo auto+ti-o de +anera predeter+inada2 por ello hay que utilizar el panel de -ontrol
Iitna+i en -a!o de ne-e!itar reini-iarlo! o detenerlo!
T02. Para la realizar la in!tala-i'n !iga utili-e el in!talador bitna"i89a"pstac@8*.).=+8?89indo9s8
installer.e>e !u+ini!trado -on el +aterial del -ur!o %iga la in!tala-i'n -on la! op-ione! e!ta.le-ida!
de 4or+a predeter+inada y no olvide de la -ontra!eHa elegida durante la in!tala-i'n
T02.1. *! i+portante de!.loquear el -orta4uego! de Jindo<! tra! la in!tala-i'n2 de lo -ontrario
lo! !itio! Je. -reado! no !ern a--e!i.le! de!de otro! equipo! de la red %'lo hay que pul!ar el
.ot'n Per+itir a--e!o +o!trado por Jindo<! durante la in!tala-i'n >ver Mgura 1(?
T02.2. 5a+.iRn a-epte lo! -a+.io! en el equipo +o!trado! en la Mgura 1E2 a!F Iitna+i !e ini-iar
auto+ti-a+ente -on Jindo<!
!i2ura -M. DesbloEueo del corta3ue2os. !i2ura -7. Inicio co"o ad"inistrador de Bitna"i..
*) Mdulo -c 8 #lata3or"as LM# 8 Bitna"i
T02.3. ,inal+ente2 apare-er un progra+a para -ontrolar lo! -o+ponente! in!tado! de Iitna+i
*!te panel de -ontrol de Iitna+i ta+.iRn e! a--e!i.le de!de el +en3 de Jindo<! 9ni-io U 5odo!
lo! progra+a! U Iitna+i J0CP %ta-L U <a+p!ta-L +anager tool
!- De.a((ollo $o# Bi%#a/i
*l -ontrol de Iitna+i !e realiza +ediante progra+a de ad+ini!tra-i'n de Iitna+i >9a"pstac@
"ana2er tool? +o!trado tra! la in!tala-i'n %e -o+enzar -o+pro.ando !i el !ervidor Je. e!t
operando -orre-ta+ente7
T03. 9ni-ie el navegador Je. y navegue a la dire--i'n .ttpPHHlocal.ost :e.e ver una pgina -on el
i-ono de Iitna+i :e lo -ontrario2 el !ervidor Je. lo-al no e!t 4un-ionando %i no 4un-iona intente
ini-iar lo! !ervi-io! de!de el ad+ini!trador de Iitna+i2 en la pe!taHa Canage %erver!
T00. %e pro-eder a -a+.iar la pgina Je. que
+ue!tra nue!tro !ervidor :e.e !ele--ionar el .ot'n
del panel de -ontrol Gpen 0ppli-ation ,older de la
Mgura 1;2 y !e a.rir la -arpeta la -arpeta prin-ipal de
Iitna+i
T00.1. *!ta -arpeta e!t pen!ada para -opiar
di4erente! apli-a-ione! preparada! por lo!
e+paquetadore! de Iitna+i Para no depender de
Iitna+i2 durante el -ur!o utilizare+o! la -arpeta
e!tndar para proye-to! per!onale! /a u.i-a-i'n
de e!ta -arpeta e! apa-he2 U htdo-!2 u!e la Mgura
20 -o+o re4eren-ia para en-ontrarla
T00.2. Iorre 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
T00.3. Co+prue.e navegando a la dire--i'n http788lo-alho!t !i vi!ualiza la! pgina! -olo-ada! en
!u !ervidor Je.
T0$. 0hora !e pro-eder a tener do! !itio! <e. di4erente! !i+ultnea+ente en !u !ervidor Je.
lo-al
T0$.1. Iorre todo el -ontenido de !u !itio Je. .orrando el -ontenido de la -arpeta .tdocs de
Iitna+i
T0$.2. Cree tre! -arpeta! dentro de la -arpeta .tdoc lla+ada!7 plantilla-2 plantilla= y plantilla(
:e!-o+pri+a la! plantilla! tpl8artica./ip5 tpl8eart.1=./ip y tpl8"1ster1planet./ip -ada una en una
-arpeta di4erente
T0$.3. *l o.jetivo e! -on!eguir u.i-ar -ada plantilla en una dire--i'n Je. de !u !ervidor lo-al2
-on-reta+ente7 http788lo-alho!t8plantilla12 http788lo-alho!t8plantilla2 y http788lo-alho!t8plantilla1
:e.e u.i-ar lo! ar-hivo! de la! plantilla! -orre-ta+ente en -ada -arpeta al de!-o+pri+irlo
Mdulo -c 8 #lata3or"as LM# 8 Bitna"i **
!i2ura -<. #anel de control de Bitna"i.
!i2ura =?. %bicacin predeter"inada para pD2inas Web en Bitna"i.
T0'. Cree un acceso directo en el e!-ritorio para la -arpeta .tdocs y a!F no tener que repetir e!te
pro-e!o reiterada+ente a lo largo de e!te -ur!o 5a+.iRn e! re-o+enda.le aHadirlo -o+o 4avorito en
el e6plorador de ar-hivo! de Jindo<!
#.1. Servidor 7eb 8pac9e
*l !ervidor Je. 0pa-he e! el -o+ponente de la plata4or+a 0CP en-argado de !ervir pgina! Je. a
travR! de la red por el puerto E02 de 4or+a predeter+inada Iitna+i per+ite el a--e!o de!de otro!
equipo! de la red Reali-e la !iguiente prue.a7
T07. 9ndique a alguno de !u! -o+paHero! -ual e! !u dire--i'n 9P para que a--eda a !u !itio Je.
de!de otro equipo Para ello2 !u -o+paHero tendr que introdu-ir la !iguiente dire--i'n en el
navegador http78810 1@ 012 donde 101@01 de.e !u!tituirla por !u dire--i'n 9P
#.2. Copia de se%uridad
Realizar -opia! de !eguridad de todo! lo! de!arrollo! que !e e!tRn realizando en Iitna+i e! pro-e!o
!en-illo Iitna+i al+a-ena todo! lo! -ontenido!2 ya !ean Je. o .a!e! de dato!2 .ajo !u -arpeta de
in!tala-i'n2 por de4e-to en la ruta cPUBitna"i del di!-o duro
*+ Mdulo -c 8 #lata3or"as LM# 8 Bitna"i
/a -opia de !eguridad -on!i!te en -opiar todo! lo! ar-hivo!2 pero ante!2 e! i+portante detener lo!
!ervi-io! de Iitna+i -o+pleta+ente de!de el panel de -ontrol *n -a!o -ontrario no !e podrFa ter+inar
la -opia al e6i!tir +ultitud de M-hero! a.ierto! por todo! lo! -o+ponente! de Iitna+i en eje-u-i'n
Realizare+o! un eje+plo de -opia de !eguridad utilizando el -o+pre!or M/ip el -ual per+ite realizar una
!in-roniza-i'n !'lo de lo! M-hero! -a+.iado! de!de la 3lti+a -opia de !eguridad2 e!to redu-e en gran
+edida el tie+po de eje-u-i'n de la -opia
T0,. 9ni-ie el panel de -ontrol de Iitna+i y en la pe!taHa Canage %erver! pare el !ervidor de .a!e
de dato! Cy%K/ :ata.a!e y el !ervidor Je. 0pa-he Je. %erver utilizando el .ot'n %top o %top 0ll
%i no ha in!talado el progra+a (#zip previa+ente2 puede de!-argarlo de!de la pgina oM-ial PRe4 ;Q
T0,.1. 9ni-ie el progra+a (zip y navegue por la! -arpeta! del equipo lo-al ha!ta !ituar!e en -7e2
ver en el li!tado la -arpeta Iitna+i $!ando el .ot'n dere-ho !o.re e!ta -arpeta apare-ern lo!
+en3! +o!trado! en la Mgura 212 !ele--ione el +en3 (#zip U 0Hadir al ar-hivo2 !ele--ione la
+e+oria $%I y e!ta.lez-a un no+.re de ar-hivo $na vez ter+inado la -opia de.e re-ordar el
ar-hivo -on e6ten!i'n (z que utiliz' para repetir el pro-e!o
!i2ura =-. Bac@up con M/ip.
T0,.2. /a pri+era -opia realizada tarda un tie+po -on!idera.le al tener que -opiar todo! lo!
ar-hivo!2 ahora realizare+o! otro pro-edi+iento +! rpido partiendo de la -opia ya e6i!tente
0nte! de -ontinuar -opie2 aHada o .orre alguno! ar-hivo! en el dire-torio .tdocs de Iitna+i2 tra!
e!to detenga Iitna+i Vuelva a realizar la -opia -o+o !e indi-' anterior+ente pero 4Fje!e en la
Mgura 222 en el -uadro de!plega.le !e !ele--iona la op-i'n %in-ronizar ar-hivo!2 -on e!ta op-i'n
el progra+a analiza la -opia e6i!tente y !olo tra.aja -on lo! M-hero! que -a+.iaron de!de la
Mdulo -c 8 #lata3or"as LM# 8 Bitna"i *M
3lti+a -opia *!ta pro-e!o tardar +u-ho +eno! tie+po
!i2ura ==. Sincroni/acin con M/ip.
6- Le#:ua5e de 0(o:(a/a$i4# 393
PDP e! un lenguaje de progra+a-i'n para el di!eHo de pgina! Je. din+i-a! y e! un a-r'ni+o de
;1perte>t #re8processor PDP e!t pu.li-ado -on una li-en-ia -on!iderada li.re y e! un lenguaje +uy
4-il de entender y aprender por -ualquier progra+ador 0unque el o.jetivo en e!te -ur!o no e! la
progra+a-i'n en e!te lenguaje2 e! i+portante entender la di4eren-ia entre D5C/ y PDP ya que +u-ho!
ge!tore! de -ontenido! e!tn e!-rito! en e!te lenguaje *l 3ni-o o.jetivo aquF planteado e! di4eren-iar
la! pgina! Je. din+i-a! de la! e!tti-a! y para e!te Mn !e han preparado una !erie de eje+plo!
Da!ta ahora !e ha tra.ajado -on pgina! D5C/ -uyo -ontenido !e edita.a -on AotepadBB2 ahora e!e
-ontenido D5C/ e! generado por un progra+a PDP2 el !ervidor Je. al dete-tar un M-hero PDP en vez
de enviar el -ontenido del M-hero por la red eje-uta un intRrprete de PDP y R!te devuelve un -'digo
D5C/ generado tra! la eje-u-i'n del progra+a Co!tre+o! e!to -on el !iguiente eje+plo
T0*. :e!-o+pri+a el M-hero e:e"plosp.p./ip en una nueva -arpeta dentro del dire-torio .tdocs de
Iitna+i2 por eje+plo -on no+.re e:e"plosp.p
T0*.1. :e.en apare-er vario! M-hero!2 uno! !on pgina! D5C/ y otro! M-hero! -on e6ten!i'n
php
T0*.2. Aavegue a la dire--i'n http788lo-alho!t8eje+plo!php y o.!erve la pgina +o!trada2 0pa-he
ha +o!trado la pgina lla+ada inde>..t"l Para -o+pro.arlo edite el M-hero inde>..t"l -on
AotepadBB y -o+pare -on lo vi!to en ,ire4o6
T0*.3. *!ta pgina -ontiene ) enla-e! a ) pgina! %iga el pri+er enla-e -on el navegador2 utili-e
la! te-la! C5R/B$ en ,ire4o6 para ver el -'digo D5C/ devuelto por Iitna+i
T0*.0. ,Fje!e en el no+.re del M-hero que apare-e en la $R/ del navegador7 e:e"plo-.p.p 0.ra
*7 Mdulo -c 8 #lata3or"as LM# 8 Bitna"i
e!te M-hero -on AotepadBB y -o+prue.e !i el -'digo D5C/ del M-hero e! el +i!+o que ha vi!to
en el pa!o anterior -on ,ire4o6
T0*.$. Repita e!te pro-edi+iento -on -ada uno de lo! enla-e!
8- Reali7a$i4# o0$io#al
*6i!ten +ultitud de alternativa! a Iitna+i2 de la! e6i!tente!2 !e propone que de!-argue de 9nternet la
plata4or+a J0CP %erver o la lla+ada ^0CPP
J0CP %erver y ^0CPP !on !i+ilare! a Iitna+i2 ^0CPP tiene la pe-uliaridad de !er un paquete de
!o4t<are +ultiplata4or+a2 e! de-ir2 !e puede in!talar en di4erente! !i!te+a! operativo! ^0CPP e! un
a-r'ni+o donde la pri+era letra ha-e re4eren-ia al !i!te+a operativo !o.re el que 4un-iona >J Jindo<!2
/ /inu6 o C Ca-G!? y el re!to de letra! ha-en re4eren-ia a 0pa-he2 Cy%K/ y PDP
Pro-eda a !u in!tala-i'n y -o+prue.e la! di4eren-ia! e6i!tente! entre Iitna+i J0CP %erver y ^0CP2 !e
proponen la! !iguiente! tarea!7
T$3. Daga una -opia de !eguridad de Iitna+i y de!puR!2 de!de el panel de -ontrol de Jindo<!2
de!in!tale la plata4or+a Iitna+i
T$3.1. 9n!tale ^0CP o J0CP %erver e intente repetir lo he-ho previa+ente en 54@
T$3.2. Iu!que lo! +en3! de -onMgura-i'n de ^0CP y o.!ervar di4eren-ia! -on Iitna+i
0unque durante el -ur!o !e in!talarn lo! ge!tore! de -ontenido! u!ando el -'digo oM-ial de -ada uno de
ello!2 Iitna+i tiene pree+paquetado! +u-ho! de ello! pero no e! re-o+enda.le u!arlo! al depender de
lo! e+paquetadore! de Iitna+i -uando e6i!tan a-tualiza-ione! :e toda! 4or+a! !e propone in!talar
alguno pre-onMgurado a -ontinua-i'n
T$1. 0--eda a la pgina -on lo! +'dulo! adi-ionale! para Iitna+i PRe4 2@Q y de!-argue el +'dulo
Coodle2 el -ual e! un ge!tor de -ontenido! para en!eHanza no e!tudiado en e!te -ur!o
T$1.1. *je-ute el progra+a de in!tala-i'n e introduz-a lo! dato! requerido! u!ando la hoja
!u+ini!trada -on el +aterial del -ur!o
T$1.2. 5ra! Mnalizar la in!tala-i'n !e a.rir el navegador2 de.iendo identiM-ar!e -on el u!uario y
-lave e!ta.le-ido durante la in!tala-i'n
=- Re*e(e#$ia.
PRe4 21Q IitAa+i2 <http788.itna+i-o+8"
PRe4 22Q %ervidor Je. 0pa-he2 <http788httpdapa-heorg8"
PRe4 21Q Plata4or+a Ja+p%erver2 <http788<<<<a+p!erver-o+8"
PRe4 24Q Plata4or+a ^0CPP2 <http788<<<apa-he4riend!org8en86a+ppht+l"
PRe4 2@Q C'dulo! pre-onMgurado! para Iitna+i2 <http!788.itna+i-o+8!ta-L8<a+p8+odule!"
Mdulo -c 8 #lata3or"as LM# 8 Bitna"i *<
&4dulo d ' Ba.e de da%o. &@SAL
Conceptos bsicos y ad$inistraci/n
- Re.u/e#
:ura-i'n e!ti+ada 2 hora!
2ic-ero 1e!cri.cin
<orld!ql Ia!e de dato! %K/ para i+portar en Cy%K/
!aLila#d.!qlzip Ia!e de dato! %K/ -o+pri+ida para Cy%K/
,abla M. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
$na .a!e de dato! in4or+ti-a e! un al+a-Rn de dato! en 4or+ato digital *l !o4t<are en-argado de
ge!tionar e!to! dato! !e deno+ina %i!te+a de =e!ti'n de Ia!e de :ato! >%=I:? y e!t dedi-ado a
4a-ilitar el a--e!o a lo! dato! de 4or+a rpida y e!tru-turada *6i!ten +ultitud de 4or+a! de organizar la
in4or+a-i'n en un !i!te+a in4or+ti-o2 a!F !urge el -on-epto de +odelo de dato!
$n +odelo de dato! ha-e re4eren-ia al +odo en que !e al+a-ena la in4or+a-i'n2 a-tual+ente2 el +!
utilizado e! el +odelo rela-ional2 pero e6i!ten deter+inada! apli-a-ione! en la! que e!te tipo de +odelo
de dato! no e! 'pti+o =oogle2 ,a-e.ooL2 5<itter y :igg !on eje+plo! donde el +odelo rela-ional no
llega a -u.rir la! ne-e!idade! de !u! apli-a-ione! Je.2 de he-ho utilizan otro! !i!te+a! de .a!e! dato!
no rela-ionale! lla+ado! Iig5a.le >=oogle? y Ca!!andra >,a-e.ooL2 5<itter y :igg?
$n eje+plo de eM-ien-ia lo +ue!tra hoy en dFa Ca!!andra !iendo e! -apaz de e!-ri.ir en di!-o !u! dato!
una! 2@00 ve-e! +! rpido que Cy%K/2 una de la! .a!e! de dato! rela-ionale! +! utilizada! *n 200;
Rev 4(2)
na-i' un +ovi+iento en -ontra de la! .a!e! de dato! rela-ionale!2 lla+ado Ao%K/2 que agrupa a todo!
e!to! !i!te+a! alternativo! y +ue!tra -o+o el +odelo rela-ional pre!enta !erio! in-onveniente!
/o! CC% e!tudiado! en e!te -ur!o utilizan el +odelo de .a!e! de dato! rela-ional y el lenguaje %K/ %K/
e! un lenguaje de -on!ulta! para .a!e! de dato! rela-ione! e!tandarizado ini-ial+ente por 0A%9 y
-onMr+ado por 9%G *!te lenguaje eje-uta -on!ulta! de dato!2 R!ta! 4a-ilitan la progra+a-i'n de
!o4t<are ya que2 una -on!ulta puede equivaler a uno o +! progra+a! !i !e tra.ajara 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!2 no !e -onte+plar el
lenguaje %K/ al no !er ne-e!ario para lo! o.jetivo! del -ur!o2 aunque !u -ono-i+iento e! o.ligatorio !i
!e planea progra+ar apli-a-ione! Je. Ao! -entrare+o! en la .a!e de dato! Cy%K/ PRe4 2)Q la -ual e!
un !o4t<are di!tri.uido .ajo li-en-ia do.le2 por un lado e! li.re >=P/? pero tiene alguna! li+ita-ione!7
Ao !e puede +odiM-ar Cy%K/ para redi!tri.uirlo y -o.rar por la +odiM-a-i'n
Ao !e puede in-luir Cy%K/ dentro de otro !o4t<are2 e! de-ir2 no !e puede di!tri.uir !o4t<are junto
-on Cy%K/ -o+o un !olo !o4t<are integrado
*l proye-to Cy%K/ e! a-tual+ente +uy -riti-ado tra! !u adqui!i-i'n por parte de Gra-le :e he-ho una
ver!i'n derivada lla+ada MariaDB e! la que a-tual+ente e!t to+ando el relevo2 prin-ipal+ente tra!
tener el apoyo de JiLi+edia8JiLipedia *l he-ho de u!ar Cy%K/ o Caria:I PRe4 2(Q en e!te -ur!o no
!e -on!idera relevante al !er pr-ti-a+ente -lone! Por ello2 -o+o Iitna+i trae pre-onMgurado el
!ervidor Cy%K/2 en e!te +'dulo !e tra.ajar !o.re Rl +o!trndo!e alguno! eje+plo! de u!o
2- Ad/i#i.%(a$i4# de &)SAL
/a .a!e de dato! Cy%K/ e! el ter-er -o+ponente de la! plata4or+a! 0CP *n el panel de -ontrol
Iitna+i di!pone+o! de un .ot'n para a--eder a la ad+ini!tra-i'n de la .a!e de dato! +ediante una
apli-a-i'n lla+ada p.pM1Ld"in *!te progra+a 4a-ilita la ad+ini!tra-i'n del !ervidor Cy%K/ de!de un
navegador %i p.pM1Ld"in e!t .ien -onMgurado2 per+ite al ad+ini!trador -one-tar!e a +otor de la
.a!e de dato! de!de -ualquier punto de la red2 y a!F2 realizar tarea! ad+ini!trativa! !in ne-e!idad de
a--eder 4F!i-a+ente a la +quina pero2 +al -onMgurada2 puede -o+pro+eter la !eguridad de todo el
!ervidor
Co+pro.are+o! !i Cy%K/ 4un-iona -orre-ta+ente2 y !e -o+pro.ar la re!tri--i'n de a--e!o para
equipo! equipo! re+oto!
T$2. :e!de el panel de -ontrol de Iitna+i utili-e el .ot'n Gpen phpCy0d+in %e a.rir el
navegador de 9nternet y apare-er el progra+a de ge!ti'n de la .a!e de dato! Cy%K/ Para poder
a--eder de.e utilizar el u!uario root y la -ontra!eHa que e!ta.le-i' durante la in!tala-i'n de
Iitna+i
T$2.1. Real+ente no e! ne-e!ario utilizar el panel de -ontrol de Iitna+i para a--eder a
+= Mdulo -d 8 Base de datos MVSWL
phpCy0d+in2 .a!ta -on re-ordar la dire--i'n2 la -ual e! http788lo-alho!t8php+yad+in Cierre el
navegador y al a.rirlo de nuevo navegue a la dire--i'n indi-ada
T$2.2. 9ntente de!de otro equipo navegar al ge!tor de .a!e! de dato! de un -o+paHero2 para
ello2 de.e !a.er la dire--i'n 9P del ordenador del -o+paHero y e!-ri.ir lo !iguiente en la .arra de
dire--ione! del navegador7 http7881011@^8php+yad+in2 !u!tituyendo 1011@^ por la dire--i'n
9P -orre!pondiente
3.1. esti6n de usuarios y privile%ios.
*n un !i!te+a Cy%K/ .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 nuevo! 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!2 de he-ho2 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 di4erente! .a!e! de dato! a -ada uno de ello!2 e!te pro-edi+iento !e repetir
+ultitud de ve-e! a lo largo del -ur!o2 !iendo una tarea ha.itual durante la in!tala-i'n de -ualquier
CC%
T$3. 0--eda -o+o ad+ini!trador a !u !i!te+a
Cy%K/ -on phpCy0d+in Cree una nueva .a!e
de dato! lla+ada clientes u!ando la pe!taHa
Ia!e! de dato! *n el -uadro +o!trado en la M#
gura 21 introduz-a el no+.re de la nueva .a!e
de dato!
T$3.1. *ntre en la nueva .a!e de dato!
-reada de!de el r.ol de .a!e! de dato!
>!ituado a la izquierda? y apare-er un -uadro para -rear una nueva ta.la *n la parte !uperior
a--eda a la pe!taHa Privilegio!2 >lo en-ontrar al de!plegar el +en3 C!? y utili-e el enla-e
0gregar nuevo u!uario Ver un 4or+ulario -o+o el de la Mgura 24 donde tiene que -rear un
nuevo u!uario lla+ado dptoclientes -on a--e!o de!de el !ervidor local >equipo lo-al? y de.e
e!ta.le-erle una -ontra!eHa tal y -o+o !e +ue!tra en la Mgura 24 Ao +odiMque la !e--i'n de
privilegio! glo.ale! para un u!uario2 !erFa un error de !eguridad2 e!a !e--i'n de.e per+ane-er
todo inha.ilitado 0l Mnal de la pgina en-ontrar el .ot'n Continuar
T$3.2. 0hora -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 +Rtodo a utilizar a lo largo del -ur!o Aavegue al ini-io
de phpCy0d+in2 puede pul!ar !o.re el logotipo !uperior izquierdo y en la nueva pantalla a--eda
de a la pe!taHa $!uario!
T$3.3. 5enga ahora en -uenta que no e!t en la pgina de una deter+inada .a!e de dato!2 e!t
Mdulo -d 8 Base de datos MVSWL +(
!i2ura =(. Crear base de datos.
en la pgina de u!uario!8privilegio! de todo el !i!te+a Cy%K/ $tili-e el enla-e 0gregar un nuevo
u!uario y apare-er un 4or+ulario pare-ido al de la Mgura 24 :e igual +odo -ree un u!uario
stoc@ que pueda a--eder de!de local.ost -on una -ontra!eHa pero +arque !'lo la op-i'n Crear
.a!e de dato! -on el +i!+o no+.re y otorgar todo! lo! privilegio!
T$3.0. Co+prue.e -o+o !e ha -reado un u!uario lla+ado stoc@ y una .a!e de dato! lla+ada
stoc@ Para ello li!te lo! u!uario! e6i!tente! y la! .a!e! de dato! e6i!tente!
T$3.$. 0.andone phpCy0d+in y vuelva a entrar -on lo! u!uario! -reado!7 stoc@ y dtpoclientes
Co+prue.e -o+o al entrar -on -ada uno de lo! u!uario! !olo de apare-en la! .a!e! de dato!
!o.re la! que tiene per+i!o!
!i2ura =). Concesin de pri&ile2ios para un usuario en una base de datos.
3.2. Conceptos b,sicos en bases de datos relacionales
5ra.ajare+o! -on un eje+plo -reando una !i+ple .a!e de dato! 4a+iliar y vere+o! -'+o au+enta la
-o+plejidad !eg3n lo! dato! que de!ee+o! al+a-enar
T$0. 0nterior+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 3a"ilia
T$0.1. 0--eda a phpCy0d+in -on el u!uario 3a"ilia re-iRn -reado
T$0.2. Cree una ta.la lla+ada personas y aHada lo! !iguiente! -a+po!7
Ca+po lla+ado no"bre de tipo &arc.ar longitud 1@ >por tanto !olo ad+ite 1@ letra! en el
no+.re?
+) Mdulo -d 8 Base de datos MVSWL
Ca+po lla+ado apellidos de tipo &arc.ar >elegir longitud ade-uada?
Ca+po lla+ado 3ec.aOalta7 Vque tipo de.e ponerW
Ca+po correoOelectrnico7 Vque tipo de.e ponerW
T$0.3. 0Hada alguno! regi!tro!2 al +eno! do! para poder !eguir tra.ajando
T$0.0. V%e puede aHadir un -a+po a la ta.la una vez que -ontiene dato!W Por eje+plo2 intente
aHadir el -a+po telX3ono5 y tra! e!to2 li!te lo! regi!tro! utilizando la pe!taHa *6a+inar VCo+o
apare-e el -a+poW
T$0.$. Rellene el -a+po telR4ono para lo! u!uario!
%i navega+o! a la pe!taHa *!tru-tura de la ta.la personas >ver Mgura 2@? !e li!tan todo! lo! -a+po!
e6i!tente! en la ta.la Para que la! .a!e! de dato! rela-ionale! operen eM-iente+ente ne-e!itan Fndi-e!
para lo-alizar regi!tro! $n eje+plo de Fndi-e e! el n3+ero de :A92 -on!i!te en a!ignar un 3ni-o n3+ero
a -ada per!ona 4F!i-a quedando inequFvo-a+ente identiM-ada
!i2ura =*. Estructura de la tabla personas.
T$$. 0Hada+o! un Fndi-e a la ta.la de per!ona! Aavegue ha!ta la ta.la personas y !ele--ione la
pe!taHa *!tru-tura 0Hada un -a+po +ar-ando la op-i'n 0l -o+ienzo de la ta.la y pul!ando el .ot'n
Continuar
T$$.1. /la+e al nuevo -a+po 9:2 e!ta.lez-a el tipo -o+o 9A52 !ele--ione en el -uadro de!ple#
ga.le fndi-e la op-i'n PR9C0Rg2 y a-tive la -a!illa 0$5GO9ACR*C*A5
T$$.2. $tili-e el .ot'n =ra.ar2 de.iRndo!e a!F -rear el Fndi-e Para -o+pro.ar lo! re!ultado! hay
que a--eder a la pe!taHa *6a+inar y ver -o+o todo! lo! regi!tro! tienen a!ignado de +anera
-on!e-utiva un n3+ero
T$$.3. Prue.e aHadir otra per!ona a la ta.la y no rellene el -a+po 9: Ver -o+o la .a!e de dato!
a!igna auto+ti-a+ente un valor al -a+po 9: no -oin-idiendo -on ninguno de lo! e6i!tente!
5ra.ajar dire-ta+ente en la .a!e dato! puede llegar a !er -o+plejo2 para ello !e realizan progra+a!
Mdulo -d 8 Base de datos MVSWL +*
Pe!taHa e!tru-tura
Pe!taHa e!tru-tura
0Hadir nuevo -a+po
0Hadir nuevo -a+po
in4or+ti-o! en-argado! de e!ta! tarea! 0hora2 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-enar2 por eje+plo2
+odelare+o! la rela-i'n hijo!8padre! y e+pleado8je4e en la .a!e dato! Para ello ne-e!itare+o! una
nueva ta.la que al+a-ene e!ta! rela-ione! *l +odo de al+a-enar rela-ione! en la! .a!e! de dato!
rela-ionale! !e .a!a en la utiliza-i'n de Fndi-e! Para entender el +odo de realizarla! !upondre+o! un
-ontenido ini-ial en la ta.la de per!ona!2 +o!trado en la ta.la E2 y otro -ontenido en la ta.la de
rela-ione!2 +o!trada ta.la ;2 e!tando la! rela-ione! !eg3n el +odelo rela-ional .a!ado en Fndi-e!
I1 nobre
0 Ro!ario
1 &uan
2 CarFa
1 Pedro
4 %ilvia
@ 0ntonio
) Aatividad
( /ui!
,abla 7. E:e"plo de tabla de personas.
ori4en relacin de!tino
0 progenitor @
1 progenitor @
0 progenitor 4
1 progenitor 4
2 je4e 1
4 progenitor )
2 je4e @
1 progenitor (
2 progenitor (
,abla <. E:e"plo de tabla de relaciones.
Para entender el !igniM-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 re4eren-ia a regi!tro! de la ta.la de per!ona! *l !igniM-ado Mla por Mla e!
el !iguiente >lla+are+o! regi!tro a -ada Mla?7
Regi!tro 17 Ro!ario e! +adre de 0ntonio
Regi!tro 27 &uan e! padre de 0ntonio
Regi!tro 17 Ro!ario e! +adre de %ilvia
Regi!tro 47 &uan e! padre de %ilvia
Regi!tro @7 CarFa e! je4a de Pedro
Regi!tro )7 %ilvia e! +adre de Aatividad
Regi!tro (7 CarFa e! je4a de 0ntonio
Regi!tro E7 Pedro e! padre de /ui!
Regi!tro ;7 CarFa e! +adre de /ui!
0de+! de la! rela-ione! e6plF-ita! de la ta.la ; !e pueden e6traer otra! i+plF-ita!7
%ilvia y 0ntonio !on her+ano!
Ro!ario y &uan tienen 2 hijo!
++ Mdulo -d 8 Base de datos MVSWL
Aatividad e! nieta de Ro!ario y de &uan2 y ade+! !o.rina de 0ntonio
Ro!ario y &uan tienen !'lo una nieta
0ntonio e! tFo de Aatividad y tiene !'lo un !o.rino
CarFa tiene do! e+pleado! y un hijo
%iendo +ali-io!o2 !e podrFan intentar e6traer alguna! -on-lu!ione! +!2 e!te pro-e!o !e lla+a +inerFa
de dato!2 pero no e! o.jeto de e!tudio en e!te -ur!o
T$'. Cree una nueva ta.la lla+ada rela-ione! -on lo! !iguiente! -a+po!7 ori2en de tipo 9A52
relacin var-har>@0? y destino de tipo 9A5 Cree al +eno! do! rela-ione! de tipo padre y otra! do! de
tipo je4e
3.3. Importaci6n y e'portaci6n
/a i+porta-i'n y e6porta-i'n de lo! dato! entre di4erente! !ervidore! Cy%K/ e! una tarea -lave y
-o+3n -uando !e di!eHan y +antienen !itio! Je. .a!ado! en PDP y Cy%K/ /o! di!eHo! realizado! en el
equipo lo-al de.en !er +igrado! a un !ervidor de 9nternet una vez ter+inado!2 e!te pro-e!o i+pli-a una
e6porta-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-a2 -on!ta !ie+pre de lo! +i!+o! pa!o! pero hay que !er -uidado!o en el pro-e!o2
pue!to que la .a!e de dato! puede !er e6portada de do! +anera!7 por ta.la! o la .a!e de dato!
-o+pleta %e realizar una pri+era prue.a para poner de +aniMe!to la di4eren-ia entre la e6porta-i'n
de una .a!e de dato! -o+pleta y la e6porta-i'n !'lo de lo! dato! de la .a!e dato!
T$7. ConR-te!e a !u phpCy0d+in utilizando el u!uario -reado anterior+ente lla+ado dptoclientes
T$7.1. 0.ra -on AotepadBB el M-hero 9orld.sEl !u+ini!trado -on e!te +'dulo Vea la !inta6i! de
la! !enten-ia! %K/ pero no +odiMque nada
T$7.2. 0--eda a la .a!e de dato! clientes de!de phpCy0d+in -on el u!uario dptoclientes y utili-e
la pe!taHa 9+portar Iu!que un -uadro donde pueda in-luir un M-hero2 -oloque el M-hero
9orld.sEl y pul!e el .ot'n Continuar %i apare-e un error pro.a.le+ente e! por no ha.er !ele--io#
nado la .a!e de dato! clientes ante! de i+portar
T$7.3. Co+prue.e la! tre! ta.la! de dato! i+portada! u!ando la pe!taHa *6a+inar VCree que
e6i!te alguna rela-i'n que per+ite li!tar toda! la! -iudade! pertene-iente! un paF!W2 VPuede
averiguar -uanto! idio+a! di4erente! ha.lan en -ada paF!W2 VpodrFa e!ti+ar la po.la-i'n rural de
-ada paF!W 5oda! e!ta! -ue!tione! !e pueden re!olver analizando la! rela-ione!
T$,. 9ntente ahora i+portar M-hero sa@ila8db.sEl./ip pro.a.le+ente o.tenga un error *l +otivo e!
que e!te M-hero -ontiene una .a!e de dato! entera2 no la! ta.la! por !eparado -o+o en el -a!o
anterior
T$,.1. Para poder i+portar la .a!e de dato! entera ne-e!ita realizar la opera-i'n -on un u!uario
Mdulo -d 8 Base de datos MVSWL +M
-on privilegio! !uM-iente! -o+o para -rear nueva! .a!e! de dato! 0.andone phpCy0d+in y
entre ahora -o+o ad+ini!trador
T$,.2. 9ntente de nuevo i+portar el M-hero sa@ila8db.sEl./ip y tenga pa-ien-ia2 puede tardar un
po-o
T$,.3. Co+prue.e la -o+plejidad de e!ta nueva .a!e de dato!2 e!t repleta de ta.la! y
rela-ione!
T$*. Para ter+inar intente realizar la i+porta-i'n de 9orld.sEl en la .a!e de dato! del !ervidor del
-ur!o y 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
!- Co#$e0%o. ava#7ado.
%e re-o+ienda ta+.iRn utilizar =oogle para en-ontrar in4or+a-i'n !o.re el pro-e!o de re-upera-i'n
de la -ontra!eHa de ad+ini!tra-i'n de Cy%K/ perdida
T'3. Prue.e el pro-e!o de re-upera-i'n que ha en-ontrado
6- Re*e(e#$ia.
PRe4 2)Q Je. oM-ial de Cy%K/2 <http788<<<+y!ql-o+8"
PRe4 2(Q Caria:I2 <http!788+ariad.org8"
+7 Mdulo -d 8 Base de datos MVSWL
&4dulo 2a ' WiBi.
0o1u+i1i y &edia+i1i
- Re.u/e#
2ic-ero 1e!cri.cin
doLu<iLi#140@0@tgz :oLuJiLi in!tala.le
re-ur!o!#doLu<iLizip Re-ur!o! u!ado! en e!te +'dulo
doLu<iLi#tpl#green!teelzip Plantilla para :oLuJiLi
doLu<iLi#pro4e!or#2011zip Copia del JiLi del pro4e!or
+edia<iLi#122)targz CediaJiLi in!tala.le
JiLili.ro!#juego!populare!6+2l
JiLili.ro!#arte!#-ulinaria!6+l2
JiLili.ro!#tie+po6+l
*6porta-ione! de!de JiLiIooL!
,abla -?. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
$n 9i@i e! un !itio Je. -ola.orativo donde diver!o! u!uario! van -reando y +odiM-ando pgina! *l
tRr+ino viene original+ente la pala.ra 9i@i proveniente del ha<aiano y !igniM-a rpido /a apli-a-i'n
+! 4a+o!a de un 9i@i e! la 9i@ipedia2 que no e! +! que una en-i-lopedia -ola.orativa
/o! <iLi! !on +uy utilizado! en la genera-i'n do-u+enta-i'n de proye-to! de +anera -ola.orativa2 !e
puede de-ir que2 e! una herra+ienta +uy 3til 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
Rev 4(2)
Gtra ventaja de e!te tipo de ge!tore! de -ontenido! e! que !on
4-ile! de +antener2 y la in4or+a-i'n al+a-enada puede +igrar
4-il+ente entre di4erente! !itio! Je. al u!ar una !inta6i! e!tn#
dar y utilidade! de e6porta-i'n online
:e entre la! prin-ipale! -ara-terF!ti-a! de un <iLi de!ta-an7
Control de -a+.io!7 /o! -a+.io! en la! pgina! quedan
regi!trado! Per+ite ver y -o+parar todo! lo! -a+.io! de
-ada pgina pudiRndo!e re!taurar -ualquier ver!i'n
anterior2 en un <iLi nun-a !e .orra nada
Control de !pa+ y vandali!+o7 *! una de la! +ayore! plaga! hoy en dFa en la red2 pgina! llena!
de enla-e! .a!ura o per!ona! que +odiM-ando pgina! llegan a e!-ri.ir .ar.aridade! Cuando !e
tra.aja -on <iLi! -errada! el pro.le+a de!apare-e
*di-i'n !i+ultnea y re!olu-i'n de -onZi-to!7 /o! <iLi! llevan un -ontrol !o.re la! pgina! que !e
e!tn editando2 in4or+ando a lo! u!uario! !i e!tn .loqueada!
*n e!te -ur!o tra.ajare+o! -on :oLuJiLi y CediaJiLi2 ade+! de la in!tala-i'n y ad+ini!tra-i'n inten#
tare+o! i+portar dato! de otra! <iLi! p3.li-a! e6i!tente! en 9nternet
2- DoBuWiBi
:oLuJiLi e! el ge!tor de -ontenido! +! !i+ple utilizado en el -ur!o *! 4-il de in!talar y +antener
y e!t pen!ado para -rear rpida+ente <iLi! !in ne-e!idad de di!poner de +u-ho! re-ur!o! ni -ono#
-i+iento! in4or+ti-o!
0nte! de -o+enzar -on la in!tala-i'n y ad+ini!tra-i'n !e propone realizar un ejer-i-io para 4a+ilia#
rizar!e -on un <iLi *n e!te ejer-i-io !e ha preparado una in!tala-i'n de :oLuJiLi -on una pgina
ini-ial para que lo! alu+no! tra.ajen !o.re ella %e ver -o+o la !inta6i! utilizada en un <iLi e!t
pen!ada para 4a-ilitar la parti-ipa-i'n a per!ona! !in -ono-i+iento! del 4un-iona+iento de !itio! Je.
Con e!ta! pri+era! tarea! no! 4a+iliarizare+o! -on e!ta !inta6i!7
T'1. Cone-te -on el !ervidor del pro4e!or2 el -ual tiene un <iLi in!talado y rellene alguno! tRr+ino!
para 4a+iliarizar!e -on la !inta6i! <iLi y el editor integrado %eg3n intente editar la pgina2 podr
en-ontrar que alguna! e!tn .loqueada! por otro! u!uario!2 de.e .u!-ar una li.re
T'1.1. :e.e -rear una e!tru-tura en el do-u+ento utilizando -a.e-era!2 a!F :oLuJiLi le aHadir
a !u pgina una ta.la de -ontenido! y per+itir la edi-i'n por zona!
T'1.2. *n una de la! !e--ione! -reada aHada una nu+era-i'n de igual +odo que e!t en
Clasi6cacin 2anadera
T'1.3. *n otra !e--i'n -ree una li!ta de .olo! -o+o la +o!trada en tipos de 2anaderCa
T'1.0. Con!iga poner alguna pala.ra en negrita2 aHada una nota al pie e intente -olo-ar alguno!
M? Mdulo =a 8 Wi@is
!i2ura =+. !oto2ra3Ca de Wi@i8Wi@i
e+oti-ono!
T'2. 0hora pro.are+o! lo! enla-e!2 para ello2 aHada un enla-e e6terno en la !e--i'n de Enlaces
e>ternos Ao edite la pgina -o+pleta !olo la !e--i'n para no inter4erir -on lo! de+! alu+no!
5enga en -uenta que e!to! enla-e! !on e6terno!2 de.e u!ar el .ot'n ade-uado en el editor
T'3. Para pro.ar el ge!tor de i+gene! integrado en :oLuJiLi !e propone -rear nueva! pgina!
Cada alu+no de.e -rear !u propia pgina -on !u no+.re en la !e--i'n #D2inas personales /a
pgina de.e partir de!de la pgina prin-ipal >ver el eje+plo del pro4e!or?
T'3.1. :entro de ella intente -olo-ar una 4otogra4Fa que de.e de!-argar de 9nternet a !u di!-o y
de!puR! !u.irla en el <iLi 0linee la i+agen a la dere-ha
T'3.2. %u.a M-hero! .inario!2 por eje+plo2 ar-hivo! P:, utilizando el Gestor de 6c.eros Puede
-rear un e!pa-io de no+.re! nuevo para que no !e +ez-len lo! ar-hivo! de todo! lo! -o+paHero!
del -ur!o 0nteponga ]7] en el no+.re del M-hero ante! de pul!ar el .ot'n Cargar
T'3.3. Con!ultando la guFa de !inta6i! in-luida en :oLuJiLi intente ha-er alg3n tipo de ta.la en
una pgina2 -o+prue.e -o+o puede re!ultar de in-'+odo
T'0. Con!ulte la! revi!ione! de al +eno! 2 pgina! del <iLi y -o+pare la! +odiM-a-ione! !u4rida! en
la 3lti+a a-tualiza-i'n de -ada una de ella!
T'0.1. Reali-e alguna +odiM-a-i'n en una pgina del <iLi y !alve di-ha pgina Co+pare la!
di4eren-ia! entre la pgina a-tual y la anterior +ediante el !i!te+a de revi!ione!
T'0.2. 9ntente re-uperar la pgina original
3.1. Instalaci6n de Do:u7i:i
/a 3lti+a ver!i'n de :oLuJiLi !e puede de!-argar dire-ta+ente de!de la pgina oM-ial PRe4 2EQ2
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 4or+ato tar.2/ y Jindo<! no !oporta la de!-o+pre!i'n de e!te tipo de ar-hivo!2 ne-e!itare+o! un
de!-o+pre!or -o+o por eje+plo M/ip
:oLuJiLi no utiliza .a!e de dato! %K/ para el al+a-ena+iento de !u! dato! por lo que !i+pliM-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!7
T'$. :e!-argue la 3lti+a ver!i'n de :oLuJiLi de!de la pgina oM-ial o utili-e el M-hero !u+ini!#
trado -on el +'dulo
T'$.1. 0.ra el dire-torio .tdocs de Iitna+i +ediante el a--e!o dire-to que de.i' -rear -uando
realizo 54) >pg @)? Cree un nueva -arpeta en el !itio Je. lo-al por eje+plo2 -on el no+.re
do@u9i@i
T'$.2. 0.ra el ar-hivo de!-argado do@u9i@i8>.t2/ -on el progra+a de!-o+pre!or y e6traiga 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!tino2 4Fje!e en la Mgura 10 donde !e
arra!tran M-hero! de!de (zip a una -arpeta
Mdulo =a 8 Wi@is M-
T'$.3. %i la de!-o+pre!i'n e! -orre-ta2 navegando a la dire--i'n http788lo-alho!t8doLu<iLi de.e
apare-er un <iLi va-Fo %i en el pa!o 5)@1 -re' una -arpeta -on di4erente no+.re2 enton-e!
de.er navegar a la dire--i'n http788lo-alho!t8+iO-arpeta2 !iendo "iOcarpeta el no+.re de la
-arpeta que ha -reado
5ra! e!te pro-e!o tene+o! un <iLi operativo pero !in -onMgurar2 de he-ho2 !i !e deja 4un-ionando a!F
pode+o! perder el -ontrol del !itio2 -ualquiera podrFa ro.arlo 5odo! lo! CC% tienen un pro-e!o de
in!tala-i'n y8o -onMgura-i'n y !uele realizar!e de!de un navegador Para -onMgurar :oLuJiLi hay que
navegar ha!ta la pgina de in!tala-i'n7
T''. Aavegue a la pgina del <iLi http788lo-alho!t8doLu<iLi8in!tallphp 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 *% y !e +o!trarn la!
pgina! en -a!tellano
T''.2. Rellene lo! dato! !oli-itado! en el 4or+ulario y re-uerde el no+.re de u!uario y
-ontra!eHa que introduz-a2 po!terior+ente lo ne-e!itar para ad+ini!trar el !itio ,Fje!e en el
-uadro PolFti-a de 0C/ ini-ial2 R!ta e! la polFti-a de edi-i'n de pgina! y tiene tre! op-ione!
%ele--ione la que le intere!e para !u <iLi2 el !igniM-ado de e!ta! polFti-a! de 4un-iona+iento !on7
0.ierta7 Cualquier vi!itante an'ni+o puede leer2 -a+.iar y aHadir -ontenido
P3.li-a7 Cualquier vi!itante an'ni+o puede leer2 pero !'lo lo! u!uario! regi!trado!
pueden aHadir y -a+.iar el -ontenido
Cerrada7 %olo lo! u!uario! regi!trado! tienen a--e!o
T''.3. 5ra! Mnalizar e! +uy i+portante .orrar el ar-hivo de in!tala-i'n install.p.p2 de lo
-ontrario -ontinuar el !itio de!protegido 0.ra el dire-torio .tdocs2 lo-ali-e el ar-hivo install.p.p
dentro de la -arpeta del <iLi y .'rrelo
T'7. Aavegue a la raFz de !u :oLuJiLi y a--eda -o+o ad+ini!trador u!ando el .ot'n Cone-tar!e
5ra! identiM-ar!e utili-e el .ot'n 0d+ini!trar y !iga el enla-e Par+etro! de -onMgura-i'n y ver la
-antidad de ele+ento! de -onMgura-i'n e6i!tente! %e realizar una +Fni+a -onMgura-i'n re-o+en#
dada7
T'7.1. Ca+.ie el Ao+.re de la pgina ini-ial2 por eje+plo2 -+.iela a cursoc"s2 pero no ponga
e!pa-io! en el nuevo no+.re *!ta pgina !er la que !e +ue!tre al entrar en el !itio Je.
T'7.2. 0unque no e! ne-e!ario -a+.ie el Ao+.re de la .arra lateral a "enulateral para tra.ajar
po!terior+ente !o.re e!te ele+ento
T'7.3. *!ta.lez-a el A3+ero de pa!o! de traza al valor 0 para eli+inar la traza no jerrqui-a
T'7.0. 0-tive la op-i'n 5raza jerrqui-a *!to +o!trar la .arra de navega-i'n !iguiendo lo!
e!pa-io! de no+.re! deMnido! en el !itio :e.er u!ar -orre-ta+ente lo! e!pa-io! de no+.re!2
lo! -uale! !e e!tudian po!terior+ente
M= Mdulo =a 8 Wi@is
T',. 5ra! ter+inar la -onMgura-i'n !i navega a la pgina ini-ial del <iLi re-i.ir un avi!o indi-ando
que no e6i!te la pgina ini-ial Cree e!ta pgina para -o+enzar a tra.ajar
T',.1. Aavegue el enla-e fndi-e !ituado en la parte !uperior dere-ha del <iLi *!te Fndi-e
jerrqui-o !e 4or+a utilizando lo! e!pa-io! de no+.re! e6i!tente! en el <iLi %iga el enla-e
e!pa-io! de no+.re! !ituado en e!ta +i!+a pgina y podr leer do-u+enta-i'n al re!pe-to
T',.2. %e van a -rear do! e!pa-io! de no+.re!2 uno para alu+no! y otro para pro4e!ore!
$tilizando el -uadro de .3!queda te-lee alu+no!7indi-e y pul!e la lupa para .u!-ar Re-i.ir una
avi!o indi-ando que no e6i!te la pgina2 -rRela y guarde lo! -a+.io!
T',.3. 0hora vuelva a navegar al Fndi-e general del <iLi para -o+pro.ar el re!ultado
T',.0. Repita lo! pa!o! -on pro4e!ore!7indi-e 9ntente ta+.iRn -rear tre! o +! !u.nivele! de
e!pa-io! de no+.re!
T',.$. 0de+! del Fndi-e auto+ti-o2 :oLuJiLi !oporta una pgina e!pe-ial para utilizarla -o+o
en la parte izquierda del <iLi *n 5)(2 !e e!ta.le-i' "enulateral -o+o la par+etro de
-onMgura-i'n para la .arra lateral Ia!ta -on -rear una pgina -on e!te no+.re para que la .arra
lateral !e a-tive $tilizando de nuevo el .u!-ador te-lee "enulateral y -ree la nueva pgina
3.2. esti6n de usuarios, %rupos y listas de control del acceso !LC8 ; 8CL"
/a! li!ta! de -ontrol de a--e!o /C0 >Lccess Control List 8 LCL? !on un +e-ani!+o u!ado en !i!te+a!
in4or+ti-o! para e!ta.le-er privilegio! entre lo! u!uario! del !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
Ao todo! lo! ge!tore! de -ontenido! i+ple+entan la !eguridad +ediante e!te tipo de li!ta!2 a lo largo del
-ur!o !e utilizarn otro! +e-ani!+o! -o+o lo! role! Pro.are+o! la! /C0 realizando el !iguiente
eje+plo7
Creare"os un 2rupo 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 2rupo
alu"nos.
Se crearD una pa2ina de Cndice para los alu"nos donde se irDn a2re2ando pD2inas de
e>D"enes personali/ados para cada alu"no.
Cada alu"no debe poder &er 1 editar su e>a"en pero5 no poder copiarse del e>a"en
del co"paero5 el siste"a debe controlar los per"isos adecuada"ente.
T'*. *l pri+er pa!o e! entrar en la pgina de ad+ini!tra-i'n para -rear lo! u!uario! alu+no! en el
enla-e 0d+ini!tra-i'n de u!uario!
T'*.1. *n la ad+ini!tra-i'n de u!uario! aHada do! u!uario! y en el -a+po grupo! e!ta.lez-a que
a+.o! pertene-en al grupo alu"nos
T'*.2. %i no lo -re' anterior+ente de.e -rear un nuevo e!pa-io de no+.re! lla+ado alu"nos en
Mdulo =a 8 Wi@is M(
el <iLi Para ello2 en el .u!-ador introduz-a la -adena alu+no!7indi-e Re-uerde que en lo! <iLi!
lo! e!pa-io! de no+.re! !e !eparan por el -ar-ter S7T2 entendiRndo!e un e!pa-io de no+.re!
-o+o una !e--i'n
T'*.3. 5ra! .u!-arla2 -rearla o editarla in-luya e!te -ontenido para -rear do! enla-e! interno! a
lo! e6+ene! de lo! alu+no!7
BBBBBB /sp!cio de no:(res de !$+:nos BBBBBB
.D+5 est!n $os e)0:enes de est! se:!n!E c!d! !$+:no de(e re$$en!r e$ s+yo.
Y [[e)!:en1a/)!:en de$ !$+:no 1]]
Y [[e)!:en2a/)!:en de$ !$+:no 2]]
Cdi2o (=. Contenido de la pD2ina de e>D"enes para los alu"nos.
T'*.0. =uarde lo! -a+.io! y -ree la! do! pgina! de e6+ene! de lo! alu+no! e!-ri.iendo en
-ada una la! pregunta! o lo que de!ee
T'*.$. 0--eda de!de la pgina de 0d+ini!trar U 0d+ini!tra-i'n de li!ta de -ontrol de a--e!o
:e.e apare-er en el r.ol el nuevo e!pa-io de no+.re! -reado :e.e -on!eguir e!ta.le-er la!
regla! /C0 +o!trada! en la Mgura 2(
!i2ura =M. 4e2las LCL para prote2er pD2inas 1 espacios de no"bres.
/o! !igniM-ado! de la! regla! de la ta.la de la Mgura 2( !on lo! !iguiente!7
:enegar el a--e!o al e!pa-io de no+.re! alu+no! a todo! lo! u!uario! >Mla 2?
Per+itir a todo! lo! u!uario! pertene-iente! al grupo alu"nos ver la pgina de Fndi-e del
e!pa-io de no+.re! alu"nos >Mla @?
Per+itir al alu"no- editar la pgina e>a"en- del e!pa-io de no+.re! alu"nos >Mla 1?
Per+itir el alu"no= editar la pgina e>a"en= del e!pa-io de no+.re! alu"nos >Mla 4?
T'*.'. Para -o+pro.ar !i la! regla! operan -orre-ta+ente de.e navegar utilizando di4erente!
u!uario! Para ello tendrFa que -errar la !e!i'n de ad+ini!trador en el navegador2 pero e6i!te la
po!i.ilidad de utilizar un !egundo navegador o una ventana de navega-i'n privada !i e!t
navegando -on ,ire4o6 $tilizando alguno de lo! pro-edi+iento! anteriore! navegue al Fndi-e del
<iLi -on un u!uario an'ni+o2 e! de-ir !in identiM-ar V0pare-en la! pgina! del e!pa-io de
no+.re! de lo! alu+no!W
T'*.7. 9denti4Fque!e en el <iLi -o+o el alu"no- y -o+prue.e de nuevo el Fndi-e del <iLi 9ntente
M) Mdulo =a 8 Wi@is
ver el e>a"en=2 a!ignado al alu"no= %i !u -onMgura-i'n e! -orre-ta -are-er de per+i!o!.
3.3. 8specto visual y plantillas
$no de lo! prin-ipale! o.jetivo! de lo! de!arrolladore! de lo! CC% e! 4a-ilitar la per!onaliza-i'n de
lo! +i!+o! a lo! intere!ado! en u!ar el CC% *!ta per!onaliza-i'n e! tanto a nivel de pre!enta-i'n -o+o
a nivel de 4un-ionalidad y para -on!eguirlo e!ta.le-en una !erie de ar-hivo!2 va-Fo! en prin-ipio2 donde
!e pueden realizar la! +odiM-a-ione!
Aun-a !e de.en +odiM-ar lo! ar-hivo! originale! de un CC%2 e!to -o+pli-a el +anteni+iento !iendo la!
nueva! a-tualiza-ione! que aparez-an del CC% -o+pli-ada! de in!talar Para per!onalizar :oLuJiLi en
la propia Je. oM-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 CC% Ao o.!tante2 realizare+o! alguna! prue.a! a -ontinua-i'n
T73. *n pri+er lugar !e -a+.iar el logotipo utilizando el propio Gestor de 6c.eros Para ello
u!ando ,ire4o6 averigXe el ta+aHo del logotipo a-tual2 u!e ,ire.ug o la! herra+ienta! de de!arrollo
Para ree+plazarla de.e -rear o utilizar una i+agen en un M-hero que !e lla+e e6a-ta+ente7
logopng2 puede u!ar el M-hero de re-ur!o! !u+ini!trado! -on e!te +'dulo :e!de el Gestor de
!ic.eros -ree un nuevo M-hero logopng y !o.re!-ri.a el M-hero
T71. %e per!onalizar el a!pe-to de :oLuJiLi u!ando regla! C%% *! i+portante la realiza-i'n de
e!ta prue.a pa!o a pa!o2 e! de-ir2 -on -ada -a+.io propue!to2 de.e volver al navegador Je. y ver el
re!ultado o.tenido2 !i realiza todo! lo! -a+.io! a la vez no -o+prender el e4e-to de -ada regla %i
tiene duda! puede -on!ultar el -'digo 112 pero !i -opia e!ta !olu-i'n -o+pleta diM-ultar la
-o+pre!i'n de la! propiedade! C%% u!ada! a -ontinua-i'n
T71.1. *ntre en la -arpeta con3 de la in!tala-i'n de !u in!tala-i'n de :oLuJiLi y -ree un M-hero
-on el no+.re userst1le.css *!te M-hero e! in-luido auto+ti-a+ente por :oLuJiLi y podr
agregar regla! C%% *dFtelo -on AotepadBB
T71.2. %e tra.ajar -on do! !ele-tore! (ody WX y ZdoV+wiVi WX *l !egundo e! un !ele-tor de 9:
-reado por lo! -readore! de :oLuJiLi para poder per!onalizar el -ontenido del <iLi 0Hada en el
M-hero userst1le.css la regla7 4do(.;i(iDDsite , 3+7/;idt*0none12 =uarde el M-hero y o.!erve el
re!ultado en el navegador2 !e ha eli+inado una li+ita-i'n de an-ho para -onvertir el di!eHo en
total+ente Ze6i.le
T71.3. 0Hada una propiedad a la regla ZdoV+wiViRRsite WX para -ontrolar el .orde del <iLi7
-order0so$id 1p) Z7C.CII1 y vuelva a ver el re!ultado *l .orde e!tar de+a!iado -er-a de lo!
.orde del navegador2 por ello2 aHada una regla para e!ta.le-er un +argen para toda la pgina
+ediante7 (ody , 3+rgin0 2e:12
T71.0. %eguire+o! tra.ajando !o.re la regla ZdoV+wiViRRsite WX2 aHadiendo la propiedad -order/
r+di.s0 10p)1 Vuelva a ver el e4e-to en el navegador
T71.$. ,inal+ente aHada a e!ta propiedad -o7/s*+do;0 10p) 10p) 8p) Z7777771 y o.!erve el
e4e-to en el navegador
Mdulo =a 8 Wi@is M*
T71.'. 0hora !e +odiM-ar el 4ondo del <iLi2 para ello utilizare+o! el !ele-tor ZdoV+wiViRRsite WX
aHadiendo alguna! propiedade! *!ta.lez-a el -olor de 4ondo de la pgina -on 4do(.;i(iDDsite
,-+c(gro.nd/color0Z333333122 o e!-oja un -olor a !u gu!to -on Colorzilla
T72. %e avanzar en la per!onaliza-i'n +odiM-ando el 4ondo de la pgina utilizando patrone! $n
patr'n no e! +! que una i+agen de 4ondo repetida indeMnida+ente Vi!uali-e en !u ordenador la!
i+gene! !u+ini!trada! en el M-hero de re-ur!o! de e!te +'dulo lla+ada!7 patron8linea.pn2 y
patron8circulo.:p2
T72.1. 0-tive ,ire.ug para !ele--ionar el 4ondo del <iLi y o.!erve la regla C%% a4e-tada2 de.e
apare-erle una regla ht:$E (ody W`X -on un 4ondo ya e!ta.le-ido >propiedad (!cVgro+nd?
T72.2. Copie lo! M-hero! -on la! i+gene! en la !iguiente -arpeta de !u in!tala-i'n de !u
:oLuJiLi7 $i( U i:!ges *dite !u M-hero de e!tilo! y -ree una regla u!ando idRnti-o !ele-tor a la
vi!ta en ,ire.ug2 pero -on una i+agen de 4ondo nueva2 quedar -o+o ht:$E (ody ,-+c(gro.nd0
+r$(P$i(?i:!ges?p!tron=$ine!.pngP) repe!t12
T72.3. Co+prue.e el re!ultado en el navegador pul!ando la! te-la! C5R/ y B !i+ultnea+ente
varia! ve-e! Para volver a la po!i-i'n original puede u!ar C5R/ y 02 o la -o+.ina-i'n de te-la!
C5R/ y #
T72.0. CodiMque la i+agen de 4ondo por patron8circulo.:p2
T72.$. Iu!que en =oogle i+gene! u!ando la 4ra!e de .3!queda Sbac@2round patterns 9ebT y
de!-argue un patr'n que le gu!te para u!arlo -o+o 4ondo de !u <iLi
ht:$E(ody , -+c(gro.nd0 +r$(P$i(?i:!ges?p!tron=circ+$o.2pgP) repe!t12
(ody , 3+rgin0 2e:12
4do(.;i(iDDsite ,
3+7/;idt*0none1
-order0so$id 1p) Z7C.CII1
-order/r+di.s0 10p)1
-o7/s*+do;0 10p) 10p) 8p) Z7777771
-+c(gro.nd/color0Z3333331
2
Cdi2o ((. 4esultado esperado de ,M-. 1 ,M=.
3.#. Plantillas y complementos
Cu-ho! de!arrolladore! de !itio! Je. -o+parten !u! di!eHo!2 -on e!te Mn2 la +ayorFa de lo! CC%
e!ta.le-en un +e-ani!+o para poder in!talar 4-il+ente un di!eHo realizado por otro de!arrollador *n
el -a!o de :oLuJiLi lo! di!eHo! preparado! para !u in!tala-i'n !e lla+an plantillas y el pro-edi+iento
de in!tala-i'n e!ta.le-ido por lo! -readore! de :oLuJiLi e!t auto+atizado
0unque e6i!te un pro-edi+iento +anual -on!i!tente en -rear una !u.-arpeta en la -arpeta e6i!tente
>tpl? y tra.ajar !o.re una !erie de M-hero! en e!ta -arpeta2 no lo u!are+o! *!te !i!te+a !e utiliza para
de!arrollar nueva! plantilla! y no !e a.orda la -rea-i'n plantilla! nueva! para :oLuJiLi2 pero !i
utilizare+o! la! de otro! di!eHadore! en lo! po!teriore! eje+plo!
M+ Mdulo =a 8 Wi@is
T73. 0nte! de in!talar plantilla! adi-ionale! de.e de!ha-er la per!onaliza-i'n realizada en el M-hero
userst1le.css pue!to que la! regla! de e!ta hoja de e!tilo tienen +ayor prioridad que la! de -ualquier
plantilla adi-ional que in!tale Para ello -o+ente toda! la! regla! del M-hero u!ando ?Y al prin-ipio
del M-hero y Y? al Mnal del +i!+o
T73.1. 0--eda a la -arpeta de !u in!tala-i'n de :oLuJiLi2 entre en $i( U tpl y de!-o+pri+a el
M-hero do@u9i@i8tpl82reensteel./ip2 a!eg3re!e que lo! M-hero! e!tn dentro de una nueva -arpeta
dentro de -arpeta tpl *n tpl pueden aHadir nueva! plantilla!2 tanta! -o+o !e de!ee
T73.2. Aavegue a !u <iLi y a--eda a la pgina 0d+ini!trar U Par+etro! de -onMgura-i'n *n la
op-i'n Plantilla apare-ern toda! la! plantilla! in!talada!2 -o+prue.e que apare-e green!teel
5ra! !ele--ionarla y guardar lo! -a+.io! -a+.iar todo el a!pe-to del <iLi
T73.3. 0--eda ahora a la pgina 0d+ini!trar U *6ten!ion Canager y li!te la! plantilla!
in!talada! Podr o.!ervar que !e han dete-tado errore! en el pro-e!o de in!tala-i'n +anual2 por
ello !e propone realizar la in!tala-i'n auto+atizada Aavegando a la pe!taHa Iu!-ar e in!talar
e!-ri.a en el -uadro de .3!queda =?Cones e in!tale la plantilla que apare-e 0-tive la plantilla
para ver !i la in!tala-i'n 4ue -orre-ta
T73.0. :e!-argue alguna otra plantilla u!ando el +i!+o pro-edi+iento
*n general todo! lo! CC% ad+iten -o+ple+ento! para a+pliar la 4un-ionalidad o -a+.iar el a!pe-to ga
!e ha +o!trado en el -a!o de la! plantilla! el pro-edi+iento de in!tala-i'n Para el -a!o de la
4un-ionalidad2 :oLuJiLi ad+ite -o+ple+ento! y lo! lla+a plu2ins *n la Je. oM-ial de :oLuJiLi !e
puede o.tener un li!tado +uy e6ten!o de lo! e6i!tente!
:oLuJiLi no e!t +uy orientado a la in!tala-i'n de -o+ple+ento! y a3n peor2 la +ayorFa de lo! -o+ple#
+ento! e6i!tente! en la red no 4un-ionan o !on -o+pli-ado! de poner en 4un-iona+iento *n otro! CC%
a lo largo del -ur!o !e har hin-apiR en lo! -o+ple+ento!2 de toda! 4or+a! -o+o 3lti+a prue.a -on
:oLuJiLi !e in!talarn alguno! -o+ple+ento! previa+ente te!tado! -on la ver!i'n a-tual
T70. Aavegue a la pgina oM-ial de :oLuJiLi y a--eda a la pgina e>tensions del +en3 lateral
:e!de e!ta pgina !e puede a--eder tanto a la! plantilla! -o+o a lo! plugin! /a pgina de plugin!
e!t organizada en tipo! de -o+ple+ento! y etiqueta! >tag!? para 4a-ilitar la .3!queda
T70.1. Iu!que la etiqueta &Cdeo en la pgina y li!te lo! -o+ple+ento! di!poni.le! ,Fje!e que
e!tn agrupado! por -o+pati.ilidad !eg3n la ver!i'n :oLuJiLi *n e!te -ur!o e!ta+o! tra.ajando
la ver!i'n #onder Stibbons
T70.2. Por !i+pli-idad !e !eguir el pro-edi+iento auto+ti-o de in!tala-i'n de :oLu<iLi2
a--ediendo a la pgina de !u <iLi 0d+ini!trar U *6ten!ion Canager2 pe!taHa Iu!-ar e in!talar
9ntroduz-a en el .u!-ador la pala.ra &ideo2 y en el li!tado in!tale el lla+ado ideo S.are #lu2in.
T70.3. Aavegue a la pe!taHa Plugin! in!talado!2 .u!que el -o+ple+ento re-iRn in!tado y !iga el
enla-e :o-u+ento! para ver la! in!tru--ione! 9ntente introdu-ir un vFdeo de gou5u.e en alguna
pgina de !u <iLi !iguiendo la! in!tru--ione! indi-ada!
Mdulo =a 8 Wi@is MM
T70.0. Repita el pro-e!o -on lo! !iguiente! -o+ple+ento!7 %p2rade2 !olded y ,ranslation
3.0. Copia de se%uridad, clonaci6n del sitio y actuali+aciones
0l no utilizar :oLuJiLi .a!e! de dato!2 ha-er una -opia de !eguridad e! +uy !i+ple2 !'lo hay que
-opiar lo! M-hero! del !itio Je. Real+ente !olo !e ne-e!itarFa -opiar el dire-torio data de :oLuJiLi2
pero e! re-o+enda.le realizar la -opia -o+pleta para in-luir lo! -o+ple+ento! y plantilla! que tenga
in!talado! y8o per!onalizado!
T7$. Clone !u :oLuJiLi en el !ervidor de 9nternet del -ur!o tran!Mriendo todo! lo! M-hero! por ,5P
Co+prue.e -on el navegador !i ha 4un-ionado %i o.!erva -o+porta+iento! e6traHo! en el <iLi
-lonado reali-e lo !iguiente7
T7$.1. :oLuJiLi guarda un -a-hR para a-elerar la! pgina! y R!te2 +u-ha! ve-e! in-luye la $R/
del <iLi Cuando !e -a+.ia de dire--i'n pueden o-urrir pro.le+a! por ha.er -a+.iado la $R/
/a 4or+a +! 4-il de a-tualizar todo el -a-hR e! en la pgina 0d+ini!tra-i'n U Par+etro! de
-onMgura-i'n pul!ando !o.re el .ot'n guardar2 !in -a+.iar nada en la -onMgura-i'n
T7'. :e!-o+pri+a el <iLi del pro4e!or del aHo 2011
T7'.1. Cone-te -o+o ad+ini!trador2 el u!uario y -lave lo en-ontrar en un M-hero de te6to
lla+ado 4ELDME.t>t Repita la opera-i'n 5(@1 para evitar pro.le+a! de -a-hR
T7'.2. 9ntente a-tualizar a la 3lti+a ver!i'n el <iLi +ediante el plugin %p2rade \!te plugin ya
!e en-uentra in!talado
!- &ediaWiBi
CediaJiLi 4ue de!arrollado para JiLipedia y e!t !oportado por la 4unda-i'n JiLi+edia2 puede
-on!ultar la pgina oM-ial en -a!tellano en PRe4 2;Q CediaJiLi e! un !i!te+a <iLi +u-ho +! -o+plejo
que :oLuJiLi al e!tar de!arrollado para !oportar gran -antidad de in4or+a-i'n y gran -antidad de
trM-o
5ra! !u in!tala-i'n a--ediendo a la zona de ad+ini!tra-i'n !e ve la +ultitud de op-ione! e6i!tente!
Cu-ha! de ella! apare-ern en lo! !iguiente! ge!tore! de -ontenido del -ur!o2 por ello2 no !e entrar en
pro4undidad en la ad+ini!tra-i'n de e!te CC%
*l prin-ipal o.jetivo -on CediaJiLi e! +o!trar la el pro-e!o de in!tala-i'n de un CC% donde el al+a#
-ena+iento de dato! no !e realiza en el !i!te+a de M-hero!2 !e al+a-ena en una .a!e de dato! Cy%K/
en e!te -a!o /a +ayorFa 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 aquF e6pli-ado
#.1. Instalaci6n y administraci6n
/a in!tala-i'n de CediaJiLi !e realiza a travR! del navegador2 pero para llevarla a -a.o e! ne-e!ario
M7 Mdulo =a 8 Wi@is
di!poner de un !ervidor Cy%K/ y una .a!e de dato! a la que poda+o! a--eder +ediante un u!uario y
una -ontra!eHa Iitna+i trae in-orporado el !ervidor Cy%K/2 el pa!o previo a la in!tala-i'n de -ualquier
CC% que utili-e al+a-ena+iento Cy%K/ e! -rear una .a!e de dato! nueva y un u!uario -on !u
-ontra!eHa2 y a !er po!i.le2 que !'lo pueda a--eder a e!ta .a!e de dato!
*! +uy i+portante en -ada in!tala-i'n de un CC% di!poner una .a!e de dato! di4erente -on !u propio
u!uario re!tringido !olo a una .a!e de dato!2 a!F2 !i alg3n ge!tor de -ontenido! !u4riera alg3n pro.le+a
de !eguridad2 el re!to de !itio! Je. no !e verFan a4e-tado!
T77. 0--eda al ad+ini!trador de .a!e! de dato! phpCy0d+in in-ludo -on Iitna+i >re-uerde !olo
hay que navegar a http788lo-alho!t8php+yad+in? y navegue a la pgina de $!uario! $tili-e el enla-e
0gregar u!uario +o!trado en la Mgura 2E
T77.1. *n el !iguiente 4or+ulario -ree un u!uario -on el no+.re "edia9i@i que !'lo pueda
a--eder de!de la +quina lo-al >local.ost?2 y e!ta.lez-a una -ontra!eHa :e.e !ele--ionar la
op-i'n indi-ada en la Mgura 2;2 a!F !e -rear auto+ti-a+ente una nueva .a!e de dato! -on el
no+.re "edia9i@i2 -on-ediRndo!e al u!uario "edia9i@i todo! lo! privilegio! en e!ta nueva .a!e
de dato!
T77.2. $na vez -reada la .a!e de dato! de.e u!ar el ar-hivo "edia9i@i8-.==.+.tar.2/ o de!-argar
la 3lti+a ver!i'n de!de la pgina oM-ial PRe4 2;Q $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 CediaJiLi2 4Fje!e en la Mgura 10 donde !e utilizan do! ventana!2 !e !ele--ionan todo!
lo! ar-hivo! dentro de la ventana de (zip y !e arra!tran a la -arpeta .tdocsH"edia9i@i de Iitna+i
-on el rat'n :e e!te +odo !e de!-o+pri+en auto+ti-a+ente
!i2ura =7. Ladir usuario desde p1p"1ad"in.
Mdulo =a 8 Wi@is M<
Pgina de
u!uario!
Pgina de
u!uario!
0gregar
u!uario
0gregar
u!uario
!i2ura =<. Ladir usuario 1 una base de datos con el "is"o no"bre.
!i2ura (?. Desco"presin de "edia9i@i.
7? Mdulo =a 8 Wi@is
%ele--ione todo!
lo! ar-hivo! y
arr!trelo!
%ele--ione todo!
lo! ar-hivo! y
arr!trelo!
T77.3. Aavegue a la dire--i'n http788lo-alho!t8+edia<iLi para -o+enzar la in!tala-i'n %iga lo!
pa!o! de in!tala-i'n y -on!idere que7
:e.e rellenar el -a+po Ao+.re de .a!e de dato! -on la .a!e dato! que -re'2 "edia9i@i5 y
en el -a+po u!uario ta+.iRn e!-ri.ir "edia9i@i
:e.e rellenar el -a+po Cuenta de u!uario para in!tala-i'n -on la -uenta de ad+ini!tra-i'n
de Cy%K/2 e! de-ir2 el u!uario y -lave de ad+ini!tra-i'n -on el que a--ede de!de
phpCy0d+in
2
T77.0. Contin3e lo! pa!o! de in!tala-i'n ha!ta e!ta.le-er un u!uario ad+ini!trador del <iLi -on
una -ontra!eHa
T77.$. *n la !iguiente pantalla !e +ue!tran una !erie de op-ione! de in!tala-i'n *!ta.le-ere+o!
la! !iguiente!7 JiLi privado2 Da.ilitar la !u.ida de ar-hivo! y en e6ten!ione! !ele--ionar JiLi
*ditor
T77.'. 5er+ine la in!tala-i'n y en el 3lti+o pa!o !e generar el ar-hivo de -onMgura-i'n lla+ado
LocalSettin2s.p.p 5iene que guardarlo en la -arpeta del di!-o donde e!tR in!talado el <iLi2
pro.a.le+ente en CPUBitna"iU9a"pstac@8*.).=+8?Uapac.e=U.tdocsU"edia9i@i
T77.7. Aavegue a !u nuevo <iLi en http788lo-alho!t8+edia<iLi
T7,. 0--eda -on la -uenta de ad+ini!trador al <iLi y en el +en3 izquierdo de herra+ienta! !iga el
enla-e Pgina! e!pe-iale! CediaJiLi trae +ultitud de op-ione! de -onMgura-i'n dividida! en
!e--ione! que no entrare+o! a e6pli-ar detallada+ente2 !'lo a--eda a la! que -rea de utilidad
T7*. %e realizarn uno! ejer-i-io! de i+porta-i'n y e6porta-i'n entre <iLi! %e han !ele--ionado
alguno! 4rag+ento! de otra! <iLi! para realizar la! prue.a! y +o!trar la organiza-i'n de -ontenido!
en -ategorFa!
T7*.1. *n el +en3 de ad+ini!tra-i'n a--eda a Derra+ienta! de pgina! U 9+portar pgina!
9+porte el M-hero Wi@ilibros8:ue2ospopulares.>"l
T7*.2. Aavegue la! pgina! y -ategorFa! i+portada!2 utili-e para -on!eguirlo el .u!-ador o el
enla-e de pgina! re-iente! Prue.e en el .u!-ador la! pala.ra! :ue2os populares
T7*.3. 9+porte ahora Wi@ilibros8tie"po.>"l y Wi@ilibros8artes8culinarias.>"l2 !ea pa-iente ya que
!on +u-ha! pgina!
T,3. Aavegue a la dire--i'n Wi@iBoo@s PRe4 10Q y a--eda al +en3 lateral Derra+ienta! U Pgina!
e!pe-iale! U *6portar pgina! 0pare-e un -uadro donde puede agregar pgina! a e6portar
T,3.1. *!-ri.a en el -uadro 0Hadir pgina! de!de la -ategorFa el te6to CategorFa7Cate+ti-a! y
pul!e el .ot'n aHadir *6porte la -ategorFa e intente i+portarla en !u <iLi
T,3.2. 0hora .u!que una -ategorFa a !u gu!to en el <iLi y e6p'rtela -o+pleta2 tenga -uidado -on
el ta+aHo del ar-hivo
2 $!ar el u!uario ad+ini!trador no e! ha.itual en lo! CC% y !e -on!idera un po!i.le origen de 4allo! de !eguridad Con lo! de+!
CC% del -ur!o no !e !oli-itar ni !e u!ar el u!uario ad+ini!trador de Cy%K/
Mdulo =a 8 Wi@is 7-
T,1. 0--eda al enla-e PRe4 11Q que -ontiene -opia! de lo! -ontenido! de di4erente! <iLi! p3.li-a!
para poder de!-argarla y ha-er rRpli-a! 0--eda al enla-e es9i@i o en9i@i que -ontiene la <iLipedia
-o+pleta en -a!tellano e inglR! re!pe-tiva+ente y o.!erve el ta+aHo de lo! M-hero!
6- Re*e(e#$ia.
PRe4 2EQ Pgina oM-ial de :oLuJiLi2 <http788<<<doLu<iLiorg8"
PRe4 2;Q Pgina oM-ial de CediaJiLi2 <http788<<<+edia<iLiorg8<iLi8CediaJiLi8e!"
PRe4 10Q JiLiIooL!2 <http788e!<iLi.ooL!org8"
PRe4 11Q :e!-arga pu.li-a de <iLi!2 <http788du+p!<iLi+ediaorg8.a-Lup#inde6ht+l"
7= Mdulo =a 8 Wi@is
&4dulo 2, ' Ge.%o(e. de *o(o.
)i$ple &ac2ines 3oru$ 4)&35, P%P -ulletin -oard 4p2p--5
- Re.u/e#
2ic-ero 1e!cri.cin
!+4O2#0#(Oin!tallzip 9n!talador para %C, 2
ani+ated#avatar!zip Conjunto de avatare! ani+ado! para %C,
add4.liLet<eetplu!onezip CodiM-a-i'n para %C,
Cineral=e+Culti-olorzip 5e+a para %C,
4oro#zopeplonezip2 4oro#zopeplone!qlzip Copia de un 4oro real
phpII#1012zip 9n!talador de phpII
!pani!hO4or+alOhonoriM-!O1O0O)zip 5radu--i'n al e!paHol de phpII
1)0*liteO100zip 0!pe-to vi!ual para phpII
,abla --. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
/o! ge!tore! de 4oro! Je. !on CC% dedi-ado! a al.ergar di!-u!ione! !o.re te+a!2 !on a+plia+ente
utilizado! para 4or+ar todo tipo -o+unidade! en 9nternet Co+parado! -on lo! <iLi!2 la! aporta-ione! de
-ada u!uario no !e pueden +odiM-ar2 en -a+.io2 !F !e pueden -onte!tar -reando un hilo de di!-u!i'n2
donde vario! u!uario! aportan re!pue!ta! *!to! ge!tore! !oportan la -rea-i'n de rea! te+ti-a!
di4eren-iada!2 deno+inada! !u.4oro!
/o! ge!tore! de 4oro! e!tn -entrado! pri+ordial+ente en la ge!ti'n de lo! u!uario! regi!trado!2 o4re#
Rev 4(2)
-iendo un gran juego de po!i.ilidade! en la ad+ini!tra-i'n de e!to! u!uario! %e e!ta.le-en di4erente!
role! para lo! u!uario! -o+o !on ad+ini!tradore! o +oderadore!2 in-lu!o !e -la!iM-an u!uario! en
rango! en 4un-i'n del volu+en de aporta-ione! realizada! en el 4oro 5a+.iRn !uelen agrupar a lo!
u!uario! en grupo! -on deter+inado! per+i!o! y a!ignando grupo! a !u.4oro! te+ti-o!
*!ta.le-iendo di4erente! polFti-a! de ge!ti'n de u!uario! y de a--e!o2 -on e!te tipo de CC% !e o.tienen
!itio! Je.! que repre!entan -o+unidade! -errada!2 4oro! de ayuda te+ti-a!2 4oro! de inter-a+.io de
in4or+a-i'n2 et-
Para el de!arrollo de e!te -ur!o !e han e!-ogido do! de lo! +! -ono-ido! p.pBB y SM!2 a+.o! utilizan
PDP y Cy%K/ !iendo !u in!tala-i'n y -onMgura-i'n vFa Je.2 aunque !e pro4undiza en +ayor +edida en
%C, !e ver -o+o phpII e! .a!tante !i+ilar
2- Si/0le &a$<i#e. Co(u/ ' S&C
0nte! de realizar la in!tala-i'n de %C, realizare+o! una vi!ita -o+o u!uario a un 4oro ya operativo
para -o+pro.ar el +anejo a nivel de u!uario
T,2. RegF!tre!e -o+o nuevo u!uario en el 4oro %C, http788<<<zopeplonee!84oro!
T,2.1. Co+prue.e en !u perMl la! di4erente! op-ione! que po!ee
T,2.2. Ca+.ie !u avatar2 lo puede e!-oger de!de alguna de la pgina! de dedi-ada! a lo!
avatare! -o+o2 por eje+plo7 http788<<<avatarity-o+ o http788<<<avatari!t-o+
T,2.3. *ntre en el !u.4oro Gestores de Contenidos y re!ponda al hilo Curso 2estores de
contenido =?-)
T,2.0. Cree un hilo de !u interR! en alguno de lo! !u.4oro! y re!ponda a alguno! de lo! hilo!
-reado! por lo! -o+paHero! del -ur!o
T,2.$. Iu!que una 4otogra4Fa en 9nternet de alguna -o+ida y pu.lique alg3n po!t que in-luya
di-ha 4otogra4Fa
T,2.'. $tili-e la +en!ajerFa interna del 4oro para -o+uni-ar!e -on alg3n -o+paHero del -ur!o
3.1. Instalaci6n y administraci6n de S-&
Con e!ta vi!i'n general de %C, -o+o u!uario !e pro-eder a la in!tala-i'n del ge!tor de 4oro! /a
in!tala-i'n !igue el +i!+o pro-edi+iento que el e6pli-ado en el +'dulo anterior -on JiLiCedia
T,3. :e!-argue la 3lti+a ver!i'n di!poni.le de la ra+a 2^ de!de la pgina oM-ial de %,C PRe4 12Q
o utili-e el M-hero !u+ini!trado -on el +'dulo :e!-o+pri+a el -ontenido en una nueva -arpeta
dentro del dire-torio .tdocs de Iitna+i2 por eje+plo2 en una -arpeta -on el no+.re s"3
T,3.1. Aavegue a la dire--i'n http788lo-alho!t8!+4 y -o+prue.e !i apare-e la pgina de in!tala#
-i'n %i !e Mja2 en e!ta pgina de in!tala-i'n ver que e! ne-e!ario utilizar una .a!e de dato!
7) Mdulo =b 8 Gestores de 3oros
Cy%K/
T,3.2. 0--eda -on el navegador a phpCy0d+in para -rear un nuevo u!uario -on -ontra!eHa y
una nueva .a!e dato! a!o-iada Reali-e e!ta tarea de!de la pe!taHa $!uario! de phpCy0d+in
Re-uerde que aquF puede -rear un u!uario2 una .a!e de dato! -on el +i!+o no+.re y otorgar
todo! lo! per+i!o! en un !olo pa!o >Mgura! 2E y 2;?2 ju!ta+ente lo que requieren la +ayorFa de
lo! CC%
T,3.3. 5er+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 !eguridad2 !e puede ha-er +ar-ando el -uadro que apare-e en la 3lti+a
pantalla de in!tala-i'n
Con la in!tala-i'n ter+inada2 !i navega+o! por el ge!tor de 4oro! re-iRn in!talado no! dare+o! -uenta
-o+o por de4e-to el idio+a e! inglR! %C, no in-orpora di4erente! idio+a! en !u in!tala-i'n .a!e2 -ada
paquete de idio+a de.er !er de!-argado por !eparado Pro-eda+o! al -a+.io de idio+a
T,0. Aavegue a la pgina de !u nuevo 4oro y -o+prue.e que le apare-en lo! +en3! de ad+ini!tra#
-i'n del 4oro en inglR!
T,0.1. 5al y -o+o !e +ue!tra en la Mgura 112 a--eda al +en3 0d+in U ConMguration U
/anguage! y !ele--ione 0dd /anguage 0pare-er una nueva pgina -on un -uadro para .u!-ar
idio+a!2 te-lee spanis.
T,0.2. %ele--ione aquella que -rea -orre-ta utilizando el enla-e 9n!tall y ter+ine el pro-e#
di+iento a-eptando la! op-ione! por predeter+inada! 5enga -uidado -on la -odiM-a-i'n
e!-ogida o tendr pro.le+a! -on la! tilde!
T,0.3. $na vez aHadido el nuevo idio+a2 el 4oro -ontinuar en inglR!2 hay que pro-eder al -a+.io
de idio+a en la op-i'n *dit /anguaje! 2donde de.er !ele--ionar el e!paHol
T,0.0. Re-argue la pgina
*! e!en-ial en un 4oro -o+pro.ar el -orre-to 4un-iona+iento
del !i!te+a de regi!tro de u!uario! y e!ta.le-er una polFti-a
ade-uada de u!uario! para el 4oro %C, -onte+pla tre! polF#
ti-a! di4erente!7
Regi!tro in+ediato7 Cualquier vi!itante puede regi!#
trar!e en el 4oro -on !olo rellenar el 4or+ulario de
regi!tro
0-tiva-i'n por e+ail7 Cuando un vi!itante !e regi!tra
de.e introdu-ir una dire--i'n de -orreo ele-tr'ni-o
vlida *l !i!te+a le enviar un -orreo para -o+pro.ar
!i la dire--i'n e!-rita e! -orre-ta
0pro.a-i'n por el ad+ini!trador7 *! la +! re!tri-tiva2
tra! regi!trar!e un u!uario queda pendiente de a-epta#
Mdulo =b 8 Gestores de 3oros 7*
!i2ura (-. Ca"bio de idio"a.
-i'n por un ad+ini!trador
%e pro-eder a -onMgurar %C, -on la polFti-a de a-tiva-i'n por e+ail para veriM-ar la -orre-ta
-onMgura-i'n del -orreo ele-tr'ni-o
T,$. 0nte! de nada a-tive+o! el +odo de +anteni+iento del 4oro *!t en la !e--i'n de 0d+ini!tra#
-i'n2 +en3 ConMgura-i'n del ,oro U ConMgura-i'n del %ervidor U =eneral 0-tive la -a!illa Codo de
Canteni+iento
T,$.1. 0.ra una nueva ventana de navega-i'n an'ni+a y vi!ite !u 4oro para ver el re!ultado al
a-tivar el +odo de +anteni+iento
T,$.2. 0--eda de!de la !e--i'n de 0d+ini!tra-i'n al +en3 Controle! de $!uario! U Regi!tro de
$!uario! U ConMgura-i'n *!ta.lez-a el +odo de 0-tiva-i'n por *+ail y revi!e la! op-ione!
*!ta.le-er no+.re! re!ervado! y Carta de 0-epta-i'n e!ta.le-iRndola! a !u gu!to
T,$.3. :e!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 e6i!tente
para que pueda -o+pro.ar el -orreo re-i.ido
T,$.0. Pro.a.le+ente no re-i.a ning3n -orreo de!de !u 4oro
Da.itual+ente la -onMgura-i'n del -orreo ele-tr'ni-o e! una de la! tarea! +! deli-ada! de.ido la
-antidad de +edida! anti!pa+ e6i!tente! en lo! !ervidore! de -orreo %i no ha re-i.ido el -orreo de la!
tarea! anteriore! !e pro-eder a averiguar lo o-urrido de!de el propio %C,
T,'. 0--eda -o+o ad+ini!trador a !u 4oro %C, y navegue dentro de la !e--i'n de ad+ini!tra-i'n al
+en3 Canteni+iento U Regi!tro U /og de errore!
T,'.1. *!ta !e--i'n -ontiene todo! lo! errore! generado! por el ge!tor de -ontenido! :e.erFa
en-ontrar alguna! entrada! indi-ando -ual e! el +otivo por el que no !e envi' el -orreo
T,'.2. %e e!ta.le-er una -onMgura-i'n de -orreo -orre-ta en la !e--i'n de ad+ini!tra-i'n2
+en3 Canteni+iento U Correo U ConMgura-i'n del -orreo :e.e -a+.iar el tipo de -orreo a
%C5P2 -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 -onMgura-i'n de -orreo en la do-u+enta-i'n entregada
al prin-ipio del -ur!o
T,'.3. 0nte! de pro-eder a intentar de nuevo el regi!tro de otro u!uario de.e -o+pro.ar la li!ta
de u!uario! *l -orreo ele-tr'ni-o de veriM-a-i'n no 4ue entregado por %C,2 pero el u!uario !F ha
!ido -reado y per+ane-e en e!tado ina-tivo Aavegue en la !e--i'n de ad+ini!tra-i'n a Controle!
de lo! $!uario! U Ver todo! lo! u!uario! ,iltre el li!tado por la op-i'n *!perando 0-tiva-i'n y
eli+ine lo! u!uario! que -u+plan e!ta -ondi-i'n
T,'.0. 0.andone la -uenta de ad+ini!trador de !u 4oro 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 polFti-a de a-epta-i'n de +ie+.ro! en el 4oro Creare+o! un 4oro donde el ad+ini!tra#
7+ Mdulo =b 8 Gestores de 3oros
dor !ea notiM-ado -uando un nuevo +ie+.ro quiera parti-ipar *!ta e! una -onMgura-i'n ha.itual en
+u-ha! -o+unidade! online2 por eje+plo2 -o+unidade! de juego! online donde !e de-ide en lo! 4oro! la
e!trategia del grupo y !e -oordina la partida *! +uy i+portante en e!to! -a!o! no tener e!pFa! ni
inMltrado! para ganar la partida
T,7. *ntre de nuevo -o+o ad+ini!trador en el 4oro y -a+.ie la -onMgura-i'n del regi!tro de
u!uario! al +odo 0pro.a-i'n del 0d+ini!trador %e de.e a-tivar ta+.iRn la -a!illa AotiM-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,7.1. 0.andone el +odo de ad+ini!trador y regi!tre un nuevo u!uario -o+pro.ando el +en!aje
re-i.ido
T,7.2. %i ha llegado a !u -orreo ele-tr'ni-o una notiM-a-i'n indi-ando que un nuevo u!uario !e
ha regi!trado2 a--eda de nuevo -o+o ad+ini!trador y en el +en3 Controle! de lo! $!uario! ver
en el li!tado el u!uario en e!tado *!perando 0pro.a-i'n 0-Rptelo -o+o u!uario -on la op-i'n
0pro.ar y enviar e+ail y -o+prue.e el -orreo re-i.ido
,inal+ente e!ta.lez-a la polFti-a que de!ee en !u 4oro 0hora !e pro-eder a -onMgurar lo! 4oro! -on
una +Fni+a -onMgura-i'n para ha-er alguna! prue.a! tal y -o+o !e indi-a a -ontinua-i'n
T,,. Cree una e!tru-tura para !u 4oro -on lo! 4oro! y !u.4oro! indi-ado! en la Mgura 12
T,,.1. 0--eda de!de la !e--i'n de ad+ini!tra-i'n al +en3 Controle! de 5e+a! y :i!eHo U ,oro!
U CodiM-ar ,oro! 0Hada lo! nuevo! 4oro! y !u.4oro!
T,,.2. 0Hada al 4oro lo! !iguiente! u!uario!7 Deidi2 0.uelo2 Pedro y Clara y a!igne +oderadore! a
lo! !u.4oro! que !e indi-an en la ta.la 12
T,,.3. /o! rango! +ue!tran la popularidad de -ada u!uario en el 4oro !eg3n el n3+ero de
+en!aje! enviado! al 4oro >+ediante e!trella! u otro !F+.olo? :e.e e!ta.le-er lo! indi-ado! en la
ta.la 11 de!de el +en3 de ad+ini!tra-i'n Controle! de lo! u!uario! U =rupo! de u!uario! U
*ditar grupo!
Con!truire+o! una -o+unidad -on zona! re!tringida! para -o+partir la!
re-eta! !e-reta! del re!taurante El Bulli Creare+o! un 4oro donde !'lo a
lo! po-o! u!uario! que pertenez-an a la cre"e dela cre"e puedan
-o+partir la! re-eta!.
T,*. Cree un grupo de u!uario! deno+inado la cre"e dela cre"e.
T,*.1. 0hora -ree un nuevo 4oro lla+ado alto standin2 donde !'lo
tenga per+i!o! e!te grupo
T,*.2. Cree un u!uario Bulli que !ea +oderador en el 4oro y un
u!uario Lr2uiano que pueda pu.li-ar y leer en di-ho 4oro
T,*.3. 0.andone la -uenta de ad+ini!trador e intente entrar en el
Mdulo =b 8 Gestores de 3oros 7M
!i2ura (=. !oros 1 sub3oros.
Co-ina general
Co-ina general
Progra+a! 5V
Progra+a! 5V
%e--i'n +i-roonda!
%e--i'n +i-roonda!
Co-ina -a!era
Co-ina -a!era
Re-eta!
Re-eta!
Con!ejo!
Con!ejo!
Con!ulta!
Con!ulta!
Re!taurante!
Re!taurante!
%C,
%C,
4oro alto standin2
Heidi "buelo Pedro Clara
Progra+a! de 5V
%e--i'n +i-roonda!
Re-eta!
Con!ejo!
Con!ulta!
Co+ida regional
Re!taurante!
,abla -=. Moderadores del 3oro de cocina.

9an4o Conteo
Pin-he 0
Co-inero @
Che4 10
%uperChe4 20
,abla -(. 4an2os de usuarios.
Para ter+inar e!ta !e--i'n de prue.a! .!i-a! del 4oro !e re-o+ienda pro.ar alguna! op-ione! +! en
la ge!ti'n de 4oro! Para ello navegue por lo! +en3! de ad+ini!tra-i'n e intente realizar alguna de e!ta!
3lti+a! tarea!
T*3. $tilizando alguno de lo! u!uario! pu.lique una en-ue!ta2 VKue op-ione! tiene la en-ue!taW
T*1. Pu.lique vario! te+a! y prue.e la opera-i'n Mo&er para +over un te+a de un 4oro a otro VKue
o-urre -on el originalW
T*2. 0-tive de!de el +en3 ConMgura-i'n del ,oro U Gp-ione! Prin-ipale! alguna! de la! op-ione!
e6tra in-orporada! -o+o por eje+plo7 Yar"a y Calendario
3.2. Instalaci6n de complementos
:e igual +odo que en lo! CC% e!tudiado! ha!ta el +o+ento2 %C, e!t pen!ado para !er 4-il+ente
+odiM-ado y8o a+pliado por -ualquier de!arrollador Para poder -o+partir lo! de!arrollo! de di4erente!
progra+adore! !e !uele e!ta.le-er un pro-edi+iento o +etodologFa parti-ular para -ada CC% *!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 +Rtodo de in!tala-i'n -o+3n
*n la +ayorFa de lo! -a!o! -uando !e de!ea a+pliar un CC% para dotarlo de -ierta 4un-ionalidad ya
alguien en la -o+unidad del CC% !uele ha.er realizado alguna a+plia-i'n en e!te !entido Aor+al#
+ente !e pone todo el !o4t<are a di!po!i-i'n de la -o+unidad de u!uario! del CC% 0nte! de realizar
ning3n de!arrollo e! re-o+enda.le .u!-ar la pgina donde !e li!tan todo! lo! -o+ple+ento! e6i!tente!
Pro.a.le+ente !e en-uentre alguno que en-aja en +ayor o +enor +edida en !u! ne-e!idade!2 !i no
!irve en !u totalidad2 e! un .uen punto de partida para -ontinuar el de!arrollo
*n %C, lo! -o+ple+ento! !e deno+inan paquete! y pueden de!-argar!e de!de la Je. para in!talar!e
de!de una pgina de ad+ini!tra-i'n interna de %C, Con %C, ni !iquiera e! ne-e!ario .u!-ar lo!
li!tado! de paquete! en 9nternet2 el propio %C, lo! lo-aliza de!de vario! repo!itorio! -one-tado! a la!
pgina! de ad+ini!tra-i'n y lo! in!tala .ajo de+anda
77 Mdulo =b 8 Gestores de 3oros
Realizare+o! alguna! prue.a! pero de.e !er -on!-iente de la e6i!ten-ia de gran -antidad de paquete!
que no 4un-ionan -orre-ta+ente2 no hay pro-e!o de revi!i'n de lo! +i!+o! Puede utilizar lo! -o+enta#
rio! de otra! per!ona! dejado! en el !itio Je. indi-ando !i lo! paquete! 4un-ionan2 tienen 4allo!2 et-
*l pro-edi+iento de in!tala-i'n para %C, !e realiza en do! pa!o!7 !u.ir el paquete a %C, y a-tivar el
paquete
T*3. 0--eda -o+o ad+ini!trador al +en3 0d+ini!tra-i'n U =e!tor de Paquete! G.!ervar vario!
enla-e!2 a--eda a :e!-argar Paquete! *n e!te ad+ini!trador de paquete! !e pueden in!talar
paquete! por tre! pro-edi+iento!7
1# *6a+inar el li!tado de paquete! de 9nternet y e!-oger alguno
2# *!-ri.ir dire-ta+ente el $R/ de un paquete
1# %u.ir un paquete previa+ente de!-argado de!de nue!tro di!-o
T*3.1. $tili-e la op-i'n 1 -on el M-hero ani"ated8a&atars./ip !u+ini!trado -on el +aterial de
e!te +'dulo u!ando el 4or+ulario %u.ir un paquete %ele--ione e!te ar-hivo y pul!e el .ot'n
%u.ir $na vez !u.ido el M-hero la 4un-ionalidad no e!t in!talada2 hay que realizar otro! pa!o!
T*3.2. %i a--ede al li!tado de paquete! >+en3 Ver paquete!?2 apare-e un li!tado donde e!t el
nuevo paquete re-iRn !u.ido Para a-tivar el paquete pul!e en el enla-e 9n!talar +odiM-a-i'n2
apare-er una pgina indi-ando donde !e e!-ri.irn lo! M-hero! de e!te paquete2 de.e a-eptar
pul!ando el .ot'n 9n!talar 0hora
T*3.3. 0--ediendo al enla-e Paquete! in!talado! ver un li!tado -on lo! avatare! re-iRn
in!talado! Co+prue.e !i 4un-iona a--ediendo al +en3 PerMl U *ditar PerMl U PerMl del 4oro y
utili-e la op-i'n *!-oger un avatar de la galerFa
T*0. Repita el pro-e!o -on el M-hero add3bli@et9eetplusone./ip y averigXe la 4un-ionalidad que
aHade2 a--eda al +en3 de ad+ini!tra-i'n ConMgura-i'n del 4oro U ConMgura-i'n de la! +odiM-a#
-ione! para -onMgurarlo
T*$. 0--eda de nuevo la pgina :e!-argar Paquete! y prue.e el enla-e *6a+inar del li!tado de
%ervidore! de paquete! 9ntente in!talar alguno2 pro.a.le+ente no 4un-ione
T*'. 0--eda a la -o+unidad %,C en dire--i'n Je. indi-ada en PRe4 11Q y li!te lo! paquete! por
-ategorFa *!-oja alguno2 a!eg3re!e que e! -o+pati.le -on !u ver!i'n de %C,2 de!-rguelo e
in!tlelo
3.3. 8specto visual
*l a!pe-to del 4oro !e -ontrola en %C, +ediante 5e+a! y !e pueden de!-argar de!de PRe4 11Q2 donde
hay +ultitud /o! te+a! en %C, o4re-en la! !iguiente! po!i.ilidade!7
%e pueden tener in!talado! vario! te+a! !i+ultnea+ente
Mdulo =b 8 Gestores de 3oros 7<
Cada te+a trae diver!a! op-ione! de -onMgura-i'n2 ha.itual+ente vario! juego! de -olore!
Cada u!uario puede e!-oger un te+a de entre lo! in!talado! para ver el 4oro
Cada 4oro puede tener un te+a a!o-iado2 e! una -ara-terF!ti-a intere!ante !i tene+o! diver!a!
te+ti-a! en lo! 4oro!2 pode+o! a!o-iar un a!pe-to a -ada te+ti-a
/o! te+a! in!talado! pueden !er +odiM-ado! de!de el propio navegador2 aunque no e! re-o+enda#
.le !i tene+o! a--e!o a lo! ar-hivo! del !ervidor y pode+o! u!ar un editor de te6to!
9n-lu!o !e puede -rear un nuevo te+a de!de el navegador2 pero ta+po-o e! .uena idea
9n!talare+o! alguno! te+a! para pro.ar la! -ara-terF!ti-a! indi-ada!
T*7. 0--eda al +en3 de %C, 0d+ini!tra-i'n U ConMgura-i'n del 4oro U 5e+a! y di!eHo U 0d+ini!#
trar e 9n!talar 0pare-er una pgina y en uno de lo! -uadro! podr in!talar un nuevo te+a de!de un
ar-hivo
T*7.1. $tili-e el M-hero MineralGe"Multicolor./ip !u+ini!trado -on el +aterial del +'dulo
:e!de el -uadro 9n!talar un nuevo te+a U :e!de un ar-hivo !ele--ione el M-hero y pul!e el .ot'n
9n!talar
T*7.2. 5ra! la in!tala-i'n2 a--ediendo de nuevo a 0d+ini!tra-i'n U ConMgura-i'n del 4oro U
5e+a! y di!eHo2 !ele--ione en 5e+a de invitado el nuevo te+a >MineralGe" Multicolor?
%ele--ione ta+.iRn en el -uadro Re!ta.le-er todo! a el nuevo te+a y pul!e el .ot'n =uardar
T*7.3. 0--eda al +en3 0d+ini!tra-i'n U ConMgura-i'n del 4oro U 5e+a a-tual Iu!que la
!e--i'n titulada Variante del te+a y -a+.ie la op-i'n Variante del te+a por de4e-to Prue.e la!
di4erente! op-ione! $tili-e el .ot'n =uardar !ituado al Mnal de la pgina para ver el re!ultado
T*7.0. *n la !e--i'n de e!ta pgina titulada Gp-ione! y Pre4eren-ia! del te+a -a+.ie aquella!
para la! que intuya la 4un-ionalidad
T*,. Vuelva a a--eder al +en3 0d+ini!tra-i'n U ConMgura-i'n del 4oro U 5e+a! y di!eHo
T*,.1. Iu!que en e!ta pgina la !e--i'n hlti+o! y +ejore! te+a! *!-oja do! o +! de ello! e
in!tlelo! en !u %C,
T*,.2. 0--eda al +en3 0d+ini!tra-i'n U Controle! de te+a y di!eHo U ,oro! U CodiM-ar 4oro!
CodiMque -ada 4oro a!ignando un te+a di4erente a -ada uno y -o+prue.e el re!ultado navegando
de!de la pgina de ini-io de !u %C, a -ada uno de lo! 4oro!
*n la +ayorFa de la! o-a!ione! !e de!ea +odiM-ar o -rear un nuevo te+a para el CC% *n e!te -ur!o !e
a.ordar la -rea-i'n de nuevo! te+a!8plantilla! para lo! CC% en lo! que e!te pro-e!o no requiera
-ono-i+iento! de progra+a-i'n Da.itual+ente la -rea-i'n de un nuevo te+a para un CC% -on!i!te en
-lonar uno ya e6i!tente para de!puR! realizar aquella! +odiM-a-ione! !o.re el te+a -lonado ha!ta
adaptarlo a !u gu!to 0unque !e podrFa tra.ajar dire-ta+ente !o.re un te+a2 +odiM-ndolo2 no e!
re-o+enda.le Cantener el original inta-to per+ite volver al original !i al realizar -a+.io! !e -o+enten
errore!
<? Mdulo =b 8 Gestores de 3oros
0l tener a--e!o a la -arpeta donde e!t in!talado %C, tra.ajare+o! !o.re lo! M-hero! de te+a! en vez
de tra.ajar de!de el navegador2 lo -ual -o+pli-arFa en e6-e!o el tra.ajo
T**. 0--eda a la -arpeta de Iitna+i donde tenga in!talado %C,2 entre en la -arpeta 5he+e! y haga
una -opia de -arpeta -ore en e!ta +i!+a -arpeta Reno+.re la -opia a -ur!oO-+!
T**.1. *ntre en la -arpeta -ur!oO-+! y edite -on AotepadBB el M-hero the+eOin4o6+l realizan#
do la! +odiM-a-ione! re!altada! en negrita7
H_):$ #ersionBU1.0U_*
Hthe:e=info ):$nsBUhttp%??www.si:p$e:!chines.org?):$?the:e=infoU
):$ns%s:fBUhttp%??www.si:p$e:!chines.org?U*
Hn!:e*Te3+ C.rso C!EH?n!:e*
H!+thor n!:eBU1i:p$e M!chinesU*)o=)o.orgH?!+thor*
Hwe(site**ttp0%%;;;.dte..s.es%H?we(site*
H$!yers*ht:$E(odyH?$!yers*
Hte:p$!tes*inde)H?te:p$!tes*
H(!sed=on*Def+.lt t*e3eH?(!sed=on*
H?the:e=info*
Cdi2o (). Con62uracin "Cni"a para un nue&o te"a en SM!.
T**.2. 0--eda al +en3 de %C, 0d+ini!tra-i'n U ConMgura-i'n del 4oro U 5e+a! y di!eHo U
0d+ini!trar e 9n!talar *n la parte in4erior de la pgina2 en la !e--i'n 9n!talar un nuevo te+a
aHada al -uadro de te6to :e!de un dire-torio el te6to cursoOc"s :e.erFa quedar -o+o
CPUBitna"iU9a"pstac@8*.).=+8?Uapac.e=U.tdocsUs"3U,.e"esUcursoOc"s aunque puede di4erir !i la
in!tala-i'n de %C, e!t u.i-ada en otra -arpeta del di!-o
T**.3. Pul!e el .ot'n 9n!talar y a--eda al +en3 ConMgura-i'n de te+a! para -o+pro.ar !i el
nuevo te+a apare-e en el in!talador y !e titula ,e"a Curso CMS
T**.0. *!ta.lez-a para todo el 4oro el nuevo te+a2 revi!e -o+o !e hizo en 5;(2
Para +odiM-ar el te+a re-iRn -reado !e utilizar ,ire.ug y AotepadBB %ele--ionando di4erente! zona!
del 4oro !e -a+.iarn lo! e!tilo!2 y -uando el a!pe-to no! agrade -opiare+o! lo! -a+.io! al M-hero .css
-orre!pondiente ha-iendo a!F lo! -a+.io! per+anente!
T133. Aavegue a la pgina ini-ial de !u 4oro 0-tive ,ire.ug e intente -apturar el .loque de
-ontenido -on la in4or+a-i'n e!tadF!ti-a *n la Mgura 11 !e indi-a el !ele-tor de -la!e de e!te .loque7
Zinfocenterfr!:e2 corre!pondiente a una etiqueta Hdi#*2 el o.jetivo e! -on!eguir +o!trar do!
-olu+na! en e!te .loque2 una -on la! e!tadF!ti-a! y otra -on lo! u!uario!
T133.1. :e!plegando el r.ol .ajo e!ta etiqueta de .loque en-ontrar que -ada !u.#.loque e!t
4or+ado por otra etiqueta Hdi# idBPinfocenterRsectionP*2 !ele--ione una de ella! -on ,ire.ug
T133.2. 5ra.ajando dire-ta+ente en ,ire.ug2 en la pe!taHa *!tilo2 aHada la propiedad
width%669O 0Hada ta+.iRn la! propiedade! f$o!t%$eftO y :!rgin%29O2 y anule la propiedad e6i!ten#
te c$e!r%(othO
T133.3. Ca+.ie lo! por-entaje! de la! propiedade! anteriore! ha!ta que queden a !u gu!to
T133.0. 0Hada e!ta nueva propiedad font=siMe%789O y -a+.ie el por-entaje intentando +antener
Mdulo =b 8 Gestores de 3oros <-
el te6to legi.le
T133.$. *l 3lti+o pa!o -on!i!te en -on!eguir -a+.io! per+anente!2 para ello2 4Fje!e en el no+.re
del M-hero .css y la lFnea indi-ada en ,ire.ug >inde>.css2 lFnea 1@00 apro6i+ada+ente? /o-ali-e
e!te M-hero en la -arpeta de !u nuevo te+a2 edFtelo -on AotepadBB y avan-e ha!ta la lFnea
indi-ada Copie lo! -a+.io! he-ho! de!de ,ire.ug a AotepadBB2 guarde lo! -a+.io! y navegue
por el 4oro
!i2ura ((. Captura con !irebu2 del bloEue de in3or"acin.
T131. 9ntente repetir el pro-e!o alterando el .loque de -a.e-era y el .loque que -ontiene el li!tado
de 4oro! *n e!te -a!o no intente o.tener varia! -olu+na!2 !'lo -a+.ie lo! +rgene! para aprove#
-har toda el rea del navegador2 e! de-ir2 !in +argen
T132. ,inal+ente !e propone o-ultar un ele+ento de la pgina2 por eje+plo el .u!-ador /o!
.u!-adore! interno! !uelen !o.re-argar de+a!iado lo! CC% .a!ado! en PDP Para ello de.e .u!-ar
un !ele-tor ade-uado -on ,ire.ug y aHadir al Mnal del M-hero inde).css una regla -on la propiedad
disp$!y%noneO
!- A.0e$%o. ava#7ado.
5ratare+o! do! pro-e!o! .a!tante -o+une! en lo! todo! lo! CC%7 -lonar un !itio Je. de nue!tra
propiedad y -ontrolar a lo! u!uario! que generan %P0C /a pri+era e! una tarea ha.itual tanto en el
de!arrollo de un !itio Je. -o+o en el +anteniendo y la !egunda2 !uele !er una tarea +uy tedio!a y !'lo
e4e-tiva a -orto plazo
<= Mdulo =b 8 Gestores de 3oros
#.1. Clonaci6n del sitio
/a -lona-i'n de un !itio Je. e! una tarea +uy -o+3n en el tra.ajo diario -on lo! CC% Puede !er en
do! !entido! !eg3n el +otivo7
:e!de una -opia de de!arrollo a una -opia en e6plota-i'n7 *! la +! -o+3n2 lo! !itio! Je. !e
de!arrollan en un equipo lo-al y -uando e!tn ter+inado! !e -opia todo el -ontenido al !ervidor de
9nternet2 donde !e ha-en lo! 3lti+o! aju!te!
:e!de una -opia en e6plota-i'n a una lo-al7 *!te otro pro-edi+iento e! 3til -uando !e pretende
a+pliar la 4un-ionalidad del !itio Je. o realizar grande! -a+.io! en el !itio Je. Ao e! .uena
idea realizar prue.a! en un !itio en e6plota-i'n2 podrFan ver!e a4e-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 %P0C tratado en la !iguiente !e--i'n Con-reta+ente ne-e!itar lo! M-hero!
3oro8/opeplone.sEl./ip y 3oro8/opeplone./ip
T133. Cree una nueva .a!e de dato! -on un nuevo u!uario de!de phpCy0d+in2 por eje+plo2
3oroi"portado *ntre en la .a!e de dato! re-iRn -reada e i+porte el M-hero
3oro8/opeploneplone.sEl./ip2 e!te M-hero 4ue previa+ente e6portado -on otro phpCy0d+in
T133.1. Cree una nueva -arpeta en .tdocs de Iitna+i lla+ada 3oroi"portado y de!-o+pri+a el
M-hero 3oro8/opeplone./ip dentro
T133.2. Aavegue a http788lo-alho!t84oroi+portado y o.!erve el re!ultado Ao podr vi!ualizar la
pgina -lonada por e!to! +otivo!7
1# /a .a!e de dato! en el !itio original tenFa otro no+.re
2# *l u!uario8-ontra!eHa de la .a!e de dato! no e! -orre-ta a-a.a de -rear una y en el !itio
original ha.Fa otra
1# /a dire--i'n del !itio Je. >$R/? ahora e! http788lo-alho!t2 ante! era otra
T133.3. Para !olu-ionar e!to! pro.le+a! edite -on AotepadBB el M-hero de -onMgura-i'n de
e!te 4oro lla+ado Settin2s.p.p Iu!que la !e--i'n indi-ada en el -'digo 1@ y rellene lo! dato! de
-one6i'n a !u .a!e de dato! -orre-ta+ente2 de.e -a+.iar lo re!altado en negrita7
ZZZZZZZZZZ 3!t!(!se ,nfo ZZZZZZZZZZ
[d(Rser#er B P$oc!$hostPO
Fd-Dn+3e ? G3i-+seDdeDd+tosG1
Fd-D.ser ? G3iD.s.+rioG1
Fd-Dp+ss;d ? G.nDsecretoG1
[d(Rprefi) B Ps:fRp$oneRPO
[d(Rpersist B 0O
[d(RerrorRsend B 1O
Cdi2o (*. Con62uracin en #;# de la base de datos de SM!.
T133.0. Aavegue de nuevo a !u !itio -lonado y ver el 4oro Pare-e que 4un-iona -orre-ta+ente
pero navegue a un 4oro y o.!erve la dire--i'n >$R/? en la .arra del navegador %i pul!a !o.re
Mdulo =b 8 Gestores de 3oros <(
-ualquier enla-e le +anda al 4oro original Day que -orregirlo en el +i!+o M-hero de
-onMgura-i'n .u!-ando la !e--i'n indi-ada y e!ta.le-iendo e!to! valore!7
ZZZZZZZZZZ For+: ,nfo ZZZZZZZZZZ
[:(n!:e B PForo de -$onePO Z <he n!:e of yo+r for+:.
[$!ng+!ge B Psp!nish=+tf7PO Z <he def!+$t $!ng+!ge fi$e set for the for+:.
F-o+rd.rl ? G*ttp0%%loc+l*ost%foroploneG1 Z '"C to yo+r for+:Ps fo$der.
Cdi2o (+. Con62uracin en #;# de la direccin %4L base del 3oro SM!.
T133.$. 0hora puede navegar por el 4oro2 pero puede que tenga +al a!pe-to o no2 depende !i
tiene -one6i'n a 9nternet $tilizare+o! ,ire.ug para .u!-ar el origen del pro.le+a2 a-tive
,ire.ug en el navegador y a--eda a la pe!taHa de Red2 ver Mgura 14 ,ire.ug le indi-ar que e!t
ina-tiva2 a-tFvela y re-argue la pgina utilizando la te-la CGA5RG/ y ,@ !i+ultnea+ente :e.e
o.tener un re!ultado pare-ido al de la Mgura 14
T133.'. Pa!ando el rat'n por en-i+a de lo! ele+ento! -uyo do+inio no e! local.ost !e +ue!tra
la dire--i'n de 9nternet donde e!t el ele+ento2 la -lona-i'n !igue a--ediendo a la pgina
original *!ta! dire--ione! e!tn +al2 ya que todo el !itio Je. e!t en local.ost *!to !e !olu-iona
re-onMgurando %C, -on el u!uario de ad+ini!tra-i'n *n e!te 4oro el ad+ini!trador e! un
u!uario -on el no+.re y -ontra!eHa indi-ada en el M-hero C%4SFCMS.t>t in-luido en el M-hero
-o+pri+ido *n -uanto a--eda apare-er un avi!o en rojo -on el +en!aje El directorio de los
te"as es incorrecto...
<) Mdulo =b 8 Gestores de 3oros
Pe!taHa de red
Pe!taHa de red
/i!tado de
o.jeto! re4eren-iado!
por e!ta pgina
/i!tado de
o.jeto! re4eren-iado!
por e!ta pgina
:ire--i'n
re+ota
del o.jeto
:ire--i'n
re+ota
del o.jeto
!i2ura (). #estaa de red de !irebu2.
T133.7. Con la -uenta de ad+ini!trador entre en el +en3 0d+ini!tra-i'n U ConMgura-i'n del
4oro U ConMgura-i'n de te+a! *n la parte in4erior de la pgina en-ontrar un 4or+ulario -on un
.ot'n 9ntentar reini-iar todo! lo! te+a! P3l!elo y de.erFa arreglar!e el 4oro deMnitiva+ente
0!eg3re!e u!ando el panel de red de ,ire.ug de nuevo
#.2. Control de SP8-
*l %P0C o +en!aje! no de!eado!2 e! uno de lo! +ayore! pro.le+a! tanto
en el -orreo ele-tr'ni-o -o+o en toda la Je. 0unque e6i!ten di4eren-ia! de
opini'n !o.re el origen del tRr+ino2 pare-e a-eptado la pro-eden-ia de una
+ar-a de enlatado! %P0C2 -o+ida u!ada por el ejRr-ito de **$$ para
ali+entar a la! tropa! en la !egunda guerra +undial
$tilizare+o! e!ta -lona-i'n del 4oro para +o!trar la! tarea! de ad+ini!tra#
-i'n requerida! para 4renar e!ta plaga2 en la +edida de lo po!i.le %i navega
por el 4oro que a-a.a de i+portar o.!ervar +u-ho! +en!aje! de %P0C que
han dejado di4erente! u!uario!
T130. *ntre en el pri+er 4oro y .u!que el pri+er +en!aje de %P0C e6i!tente Pul!e !o.re el no+.re
de u!uario para ver la in4or+a-i'n di!poni.le /a -lave e!t en la dire--i'n 9P2 pul!e !o.re ella
T130.1. *n la nueva pgina puede o.tener dato! !o.re la dire--i'n 9P Pri+ero averiguare+o!
-uanto! u!uario! e!tn ha-iendo %P0C de!de la! rede! -on e!a! 9P! /a dire--i'n 9P e! del tipo
126.160.>8.22 -a+.ie lo! 3lti+o! dFgito! por un a!teri!-o!7 126.160.Y.Y y pul!e !o.re :ire--ion 9P
Co+prue.e !i hay +! u!uario! de e!a red ha-iendo !pa+ en el li!tado +o!trado
T130.2. Prue.e la red -la!e 0 177.Y.Y.Y2 por !i hay alguno +! /a -ue!ti'n e! que !i .loquea+o!
una red de -la!e 02 .loquea+o! a +! de 1) +illone! de equipo! Pro.a.le+ente .loquee+o!
vario! paF!e! o un -ontinente entero2 aunque por de!e!pera-i'n2 en e!te 4oro e!t .loqueada a
toda Ru!ia y 0!ia
T130.3. Pul!e !o.re una de la! dire--ione! 9P li!tada! y utili-e lo! enla-e! Iu!-ar 9P en un
!ervidor regional de <hoi! para .u!-ar in4or+a-i'n !o.re e!ta 9P Aor+al+ente puede averiguar
el proveedor y el rango de 9P! a!ignada! al proveedor /o ha.itual e! .loquear al proveedor
-o+pleto !i no e! de *uropa2 prue.e vario! de lo! enla-e! para o.tener el rango de 9P!
T130.0. Con-reta+ente e!te -a!o !e trata de una !itua-i'n real o-urrida el 12 de +ayo de 20112
y !i -o+prue.a la dire--i'n 126.160.>8.2 en 0PA9C >Regi'n 0!ia Pa-iM-o? ver que el origen del
ataque viene de!de un proveedor de !ervi-io! de China
T13$. 0--eda al +en3 0d+ini!tra-i'n U Controle! de $!uario! U /i!ta de a--e!o! prohi.ido! y
o.tendr una li!ta de re!tri--ione!
T13$.1. :e la! do! li!ta! que apare-en una no e!t e6pirada2 a--eda pri+ero a la e6pirada
utilizando el enla-e CodiM-ar G.tendr una li!ta de re!tri--ione!2 alguna! por 9P y otra! por
no+.re ,Fje!e -ual e! la que !e ha o-urrido +! ve-e!
Mdulo =b 8 Gestores de 3oros <*
!i2ura (*. Lata de S#LM.
T13$.2. 0--eda ahora a la no e6pirada y aHada una nueva regla por 9P -on la -adena 126.160.Y.Y2
-on e!te .loqueo quedan una! )@000 dire--ione! 9P !in per+i!o para poder pu.li-ar en el 4oro2
pero pueden vi!itarlo !in re!tri--ione!
T13$.3. Vuelva a ver el perMl del u!uario que hizo %P0C2 de.erFa ver -o+o apare-e en rojo un
+en!aje indi-ando que e!t .loqueado !u a--e!o
T13$.0. *n el +en3 !uperior dere-ho utili-e el enla-e 0--ione! U Iorrar e!ta -uenta %ele--ione
en el -uadro la op-i'n Iorrar todo! lo! te+a! y +en!aje! y pul!e !o.re el .ot'n Iorrar
T13$.$. Aavegue el 4oro y .u!que otro +en!aje de %P0C Co+prue.e !i el u!uario e!t ya
.loqueado por alguna regla %i lo e!t repita el pro-e!o 510@42 !i no e!t .loqueado -ree una
regla que .loquee !u rango de 9P! de -la!e I2 e!to e! lo +! razona.le 5ra! e!to repita el
pro-e!o 510@4
T13$.'. Repita el pa!o 510@@ ha!ta que el 4oro quede li+pio de %P0C
$n +Rtodo +uy utilizado para generar %P0C en lo! !itio! Je. e! regi!trar +ultitud de u!uario! y
dejarlo! latente! -ierto tie+po 5ra! e!te periodo de laten-ia e!to! u!uario! -o+ienzan a generar %P0C
diM-ultando la dete--i'n del origen del %P0C2 !e regi!tran de!de -ierta! 9P! y po!terior+ente de!de
otra! generan %P0C2 in-lu!o +e!e! de!puR! Co+pro.e+o! e!te he-ho7
T13'. 0--eda a la li!ta de u!uario! del portal de!de el +en3 de 0d+ini!tra-i'n U Controle! de lo!
u!uario! U $!uario!
T13'.1. /i!te lo! u!uario! regi!trado! que no han dejado ning3n +en!aje2 para ello pul!e !o.re la
-olu+na Cen!aje! de la li!ta para ordenarlo por e!ta -olu+na
T13'.2. Co+prue.e que !on todo! u!uario! preparado! para ha-er %P0C y .'rrelo! todo!
0-tual+ente e6i!ten +ultitud de progra+a! en-argado! de vi!itar de +anera auto+ti-a lo! 4oro!
e6i!tente! en la red intentando regi!trar u!uario! para po!terior+ente generar %P0C /a pri+era
.arrera que !e de.e poner e!t en el regi!tro de u!uario!2 aquF e6i!ten +ultitud de tR-ni-a! !iendo la
+! tradi-ional la i+agen -on letra! lla+ada Captc.a Cu-ho! !i!te+a! de re-ono-i+iento !on -apa-e!
de !altar e!ta .arrera %e -onMgurar otra .arrera e6tra +! di4F-il !e !altar
T137. 0--eda al panel de -ontrol del 4oro y navegue a 0d+ini!tra-i'n U ConMgura-i'n del 4oro U
%eguridad y Codera-i'n U 0ntiO%pa+ *n la parte in4erior de e!ta pgina podr en-ontrar una
!e--i'n lla+ada Pregunta! de veriM-a-i'n *!-ri.a alguna! -uya re!pue!ta !ea 4-il2 por eje+plo
V-uanta! rueda! tiene una +otoW
T13,. ,inal+ente !e propone que a-tuali-e el 4oro a la 3lti+a ver!i'n di!poni.le y vea la 4a-ilidad
que o4re-e %C, en !u pro-e!o de a-tualiza-i'n 0--eda al +en3 0d+ini!tra-i'n U Controle! del 4oro
U Centro de 0d+ini!tra-i'n %C, Iu!que un -uadro indi-ando que e6i!te una a-tualiza-i'n di!poni#
.le y !iga el enla-e +o!trado en prra4o interior del +i!+o -uadro
<+ Mdulo =b 8 Gestores de 3oros
6- 0<0 Bulle%i# Boa(d
phpII e! uno de lo! ge!tore! de 4oro! -on +ayor re-orrido2 data del aHo 2000 Ao e! +uy di4erente a
-ualquier otro ge!tor de 4oro!2 en -uanto a 4un-ionalidad e! !i+ilar a %C,2 pero e! +uy intere!ante al
poder integrar!e en otro! ge!tore! de -ontenido! +! -o+pleto! del tipo Portal
/a +ayor diM-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 CC% e!tru-tura lo! 4or+ulario! de ad+ini!tra-i'n de +anera di4erente *n
la! tarea! de e!ta !e--i'n no !e va a detallar -o+o !e realiza la -onMgura-i'n2 -on la de!treza adquirida
en %C, de.e averiguar -'+o ad+ini!trar phpII a-udiendo a do-u+enta-i'n e6i!tente en el !itio oM-ial
de phpII y re-orriendo todo! lo! +en3! de ad+ini!tra-i'n
T13*. :e!-argue la ver!i'n 1^ de phpII2 .ien de!de la pgina de +aterial del -ur!o o de!de el !itio
oM-ial de phpII PRe4 14Q Cree la nueva .a!e de dato! y !u u!uario a!o-iado2 de!-o+pri+a el
M-hero que -ontiene phpII y pro-eda a la in!tala-i'n del +i!+o +odo que hizo -on %C,
T113. $tili-e el M-hero spanis.O3or"alO.onori6csO-O?O*./ip para in!talar la tradu--i'n al e!paHol de
phpII Con!ulte la do-u+enta-i'n oM-ial en PRe4 1@Q2 allF !e e6pli-a -o+o in!talar el idio+a %i tiene
diM-ultade! -on el inglR!2 a--eda a la dire--i'n indi-ada en PRe4 1)Q2 e! la -o+unidad de e!paHol de
phpII donde hay +u-ha do-u+enta-i'n2 pero di!tri.uida por lo! 4oro!
T111. Cree una jerarquFa de 4oro! y p'ngala operativa Prue.e el !i!te+a de per+i!o!2 u!uario!2 et-
Re-orra todo! lo! +en3! de ad+ini!tra-i'n
T112. Ca+.ie el a!pe-to vi!ual de lo! 4oro! utilizando nuevo! e!tilo! de!-argado! de!de la pgina
oM-ial de phpII 0lternativa+ente puede utilizar el M-hero (+?EliteO-.?.?./ip2 intente in!talarlo
8- Re*e(e#$ia.
PRe4 12Q Je. oM-ial de %i+ple Ca-hine! ,oru+2 <http788<<<!i+ple+a-hine!org8"
PRe4 11Q Co+ple+ento! para %C,2 <http788-u!to+!i+ple+a-hine!org8"
PRe4 14Q Je. oM-ial de phpII2 <http788<<<php..-o+8"
PRe4 1@Q :o-u+enta-i'n de phpII2 <http788<<<php..-o+8!upport8"
PRe4 1)Q Co+unidad phpII en *!paHol2 <http788<<<php..#e!-o+8"
Mdulo =b 8 Gestores de 3oros <M
&4dulo 2d ' 3(e.%aS<o0
Co$ercio electr/nico y tiendas online
- Re.u/e#
:ura-i'n e!ti+ada7 @ hora!
2ic-ero 1e!cri.cin
pre!ta!hopO1)0)zip 9n!talador de Pre!ta%hop
re-ur!o!#pre!ta!hopzip Re-ur!o! para el -ontenido de la tienda
pre!ta!hop#pro4e!orzip2
pre!ta!hop#pro4e!or!qlzip
Copia de una tienda para prue.a!
te+a#pre!ta!hopzip Re-ur!o! para la ela.ora-i'n de un te+a
,abla -). !ic.eros necesarios para la reali/acin de este "dulo.
2- 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+3n hoy en dFa y ha pa!ado de !er algo e6-lu!ivo para grande! -orpo#
ra-ione! a !er +uy ha.itual en la! pequeHa! e+pre!a! *6i!ten +ultitud de apli-a-ione! para -o+er-io
ele-tr'ni-o tanto li.re! -o+o privativa!2 y toda! la! entidade! Mnan-iera! di!ponen de !olu-ione! de
pago para e!te tipo de -o+er-io
0 pe!ar de la! ventaja! que o4re-e2 lo! prin-ipale! in-onveniente! !uelen provenir por parte de lo!
-liente! /a de!-onManza por parte del -liente ha-ia la tienda virtual !uele !er elevada2 !o.re todo2 !i no
e6i!te una tienda 4F!i-a detr!2 aquF tienen ventaja quiene! teniendo un nego-io lo a+plFan para tener
pre!en-ia en la red2 4rente a la! tienda! pura+ente virtuale!
Rev 4(2)
*l +ejor punto de partida ante! de -o+enzar a de!plegar una tienda en 9nternet e! -on!ultar el Libro
blanco del co"ercio electrnico PRe4 1(Q que e! de 4-il -o+pren!i'n 0de+!2 de.e -on!iderar que lo!
prin-ipale! e!-ollo! !on la nor+ativa vigente donde lo! prin-ipale! re4erente! !on7
/a dire-tiva europea 1082001 !o.re -o+er-io ele-tr'ni-o y !ervi-io! de la !o-iedad de la 9n4or+a#
-i'n
/a ley 1482002 !o.re Co+er-io *le-tr'ni-o y %ervi-io! de la %o-iedad de 9n4or+a-i'n
/ey 1282001 =eneral de 5ele-o+uni-a-ione! !o.re Co+uni-a-ione! *le-tr'ni-a! que +odiM-a la
/ey de Co+er-io *le-tr'ni-o y %ervi-io! de la %o-iedad de 9n4or+a-i'n
5oda! !on 4-ile! de o.tener en P:, en 9nternet 0de+!2 e! i+portante -on!iderar !i !e realizarn
tran!a--ione! interna-ionale! y 4uera de la zona euro2 -o+pli-a +! la nor+ativa apli-a.le2 ya que
depende de -ada paF!2 pero en general2 al !er la /GP: >/ey Grgni-a de Prote--i'n de :ato!? e!paHola
una de la +! re!tri-tiva! de *uropa2 -u+pliendo R!ta no !e de.en tener pro.le+a! a nivel europeo
*6i!te +u-ha do-u+enta-i'n en la pgina oM-ial de la L2encia Espaola de #roteccin de Datos PRe4
1EQ
9ndependiente+ente de -ue!tione! legale!2 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 G%/ >Gpen %o4t<are /i-en!e? *!te
ge!tor tiene po-o re-orrido2 na-i' en 200( pero ha tenido un gran R6ito al de!arrolla!e -on te-nologFa!
+oderna! 4rente a !u! prede-e!ore! *n lo! 3lti+o! aHo! pre!enta un 4uerte -re-i+iento en tanto en !u
-o+unidad li.re -o+o en n3+ero de in!tala-ione!
2- I#.%ala$i4# ) ad/i#i.%(a$i4# ,1.i$a
0l e!tar Pre!ta%hop de!arrollado en PDP8Cy%K/ la in!tala-i'n !igue el pro-edi+iento ha.itual
utilizado en otro! CC% :urante la ela.ora-i'n del -ur!o !e han dete-tado pro.le+a! en alguna! de la!
in!tala-ione! de Pre!ta%hop2 por ello2 !e re-o+ienda tra.ajar -on la ver!i'n !u+ini!trada en e!te
+'dulo aunque puede de de!-argar dire-ta+ente de la Je. PRe4 1;Q la 3lti+a ver!i'n
T113. :e!-o+pri+a el M-hero N9P de in!tala-i'n de Pre!ta%hop indi-ado en la ta.la 14 en una
nueva -arpeta dentro de .tdocs2 por eje+plo
CPUBitna"iU9a"pstac@8*.).=+8?Uapac.e=U.tdocsU"=cUprestas.op.
T113.1. 0--eda a phpCy0d+in para -rear una nueva .a!e de dato! y un u!uario para e!te ge!tor
de -ontenido! $tili-e el +Rtodo tradi-ional -on!i!tente en a--eder a la pe!taHa $!uario! y aHadir
un nuevo u!uario lla+ado prestas.op -on !u .a!e de dato! a!o-iada
T113.2. Cuando ter+ine e! ne-e!ario que .orre de!de el ad+ini!trador de ar-hivo! de Jindo<!
la -arpeta de in!tala-i'n install y .u!que una -arpeta que -o+ien-e por ad"in !eguida de 4
n3+ero! *!te e! el punto de entrada a la zona de ad+ini!tra-i'n de la tienda2 para e!te -ur!o2 !e
re-o+ienda reno+.rarla a ad"inc"s
T113.3. Aavegue por la tienda re-iRn in!talada para ver el -ontenido de eje+plo in-luido 0--eda
-?? Mdulo =d 8 #restaS.op
a lo! produ-to! para ver !u! -ara-terF!ti-a! y aHada alguno! a la -e!ta de la -o+pra
%e realizar una -onMgura-i'n .!i-a ante! de -o+enzar a aHadir produ-to! a la tienda 9ni-ial+ente
Pre!ta%hop tiene do! +odo! de 4un-iona+iento7 +odo tienda o +odo -atlogo *l +odo -atlogo e!t
pen!ado para utilizarlo -o+o un e!-aparate2 !in op-ione! de -o+pra de!de 9nternet2 el +odo tienda
in-luye toda la 4un-ionalidad de -o+pra operativa
T110. 0--eda a la zona de ad+ini!tra-i'n de la tienda u!ando la dire--i'n .a!e de la in!tala-i'n de
!u tienda y aHadiendo el no+.re de la -arpeta de ad+ini!tra-i'n del pa!o anterior2
http788lo-alho!t8pre!ta!hop8ad+in -+!
T110.1. ConMgure la tienda en "odo catDlo2o para ver la di4eren-ia2 u!e el +en3 Pre4eren-ia! U
Produ-to! Vi!ite !u tienda para ver la di4eren-ia en el +odo de opera-i'n
T110.2. Vuelva al +en3 Pre4eren-ia! U Produ-to! y de!a-tive el Codo -atlogo Revi!e e!ta
pgina de op-ione! para e!ta.le-er la! que -rea oportuna!
T110.3. *dite la pgina! de in4or+a-i'n .!i-a en el +en3 de ad+ini!tra-i'n de Pre4eren-ia! U
CC% Aavegue la tienda para lo-alizar donde !e +ue!tran la! pgina! que ha editado
T110.0. *n el +en3 Pre4eren-ia! U 5e+a! puede -a+.iar el logotipo de la tienda $tili-e el
M-hero lo2otipo8tienda8peE.pn22 lo en-ontrar dentro del M-hero de re-ur!o! de e!te +'dulo
lla+ado recursos8prestas.op./ip :e!-o+pri+a e!te M-hero en alg3n lugar del di!-o para u!arlo a
lo largo del +'dulo
3.1. -6dulos y disposici6n de la p,%ina
5ra! la in!tala-i'n Pre!ta%hop trae -ontenido y op-ione! pre-onMgurada! a +odo de de+o!tra-i'n
0de+! de un -atlogo ini-ial de de+o!tra-i'n trae vario! -o+ponente! a-tivado! 0nte! de llenar la
tienda de -on produ-to! e! re-o+enda.le e!ta.le-er una di!po!i-i'n ini-ial de lo! -ontenido!2 aunque
Mnal+ente !e -a+.ien de u.i-a-i'n o !e de!a-tiven
Para entender el +odelo de pre!enta-i'n de -ontenido! de Pre!ta%hop hay que e!tudiar uno!
-o+ponente! lla+ado! "dulos *l -ontenido !e pre!enta +ediante lo! +'dulo! e ini-ial+ente no todo!
lo! +'dulo! e!tn a-tivo! *!to! +'dulo! di!tinguen !u u!o entre a la inter4az +o!trada al -liente > 3ront8
oGice? y la inter4az del ad+ini!trador8e! de la tienda >bac@8oGice? /o! +'dulo!2 ade+! de 4un-iona#
lidad2 in-luyen un .loque de pre!enta-i'n de -ontenido y puede apare-er en di4erente! pgina! y
regione! *l ad+ini!trador de.e -onMgurar pre!enta-i'n de la tienda indi-ado al !i!te+a lo! +'dulo!
a-tivo! y en que regi'n de la pgina lo! de!ea /a pre!enta-i'n de +'dulo! !e -o+pli-a al o4re-er al
ad+ini!trador varia! op-ione! para la -onMgura-i'n del +'dulo en di4erente! parte! del +en3 de
ad+ini!tra-i'n Para -on!eguir +anejar -orre-ta+ente la pre!enta-i'n de lo! +'dulo! !e de.en
-on!iderar la! !iguiente! regla! de pre!enta-i'n en Pre!ta%hop7
*6i!ten di4erente! pgina! de pre!enta-i'n !eg3n la zona de la tienda que !e e!tR vi!itando y -ada
una tiene di4erente! regione! Por eje+plo2 pgina prin-ipal2 pgina del -arrito2 pgina de
Mdulo =d 8 #restaS.op -?-
produ-to2 et-
Cada una de e!ta! pgina! tienen +ultitud de regione! >lla+ada! po!i-ione! en Pre!ta%hop?2 pero
no toda! la! regione! e!tn di!poni.le! en toda! la! pgina! Por eje+plo2 la -a.e-era e6i!te en
toda! la! pgina!2 pero la! -olu+na! izquierda y dere-ha !on op-ionale!2 de.en a-tivar!e para la!
pgina! que !e de!ee
Para que un +'dulo !ea vi!i.le de.e !e a!o-iar!e a una regi'n y e!a regi'n de.e e6i!tir >o e!tar
a-tiva? en la pgina que !e e!tR vi!itando
$n +'dulo puede -ontener e6-ep-ione! de vi!i.ilidad2 e! de-ir2 !e a!igna a una regi'n pero !e
indi-a que para -ierta! pgina! no de.e +o!trar!e *!ta 3lti+a 4un-ionalidad -ondu-e a errore! a
lo! ad+ini!tradore! prin-ipiante! en Pre!ta%hop
Con el !iguiente eje+plo !e pretende +o!trar -o+o !iguiendo e!ta! regla! e! po!i.le -a+.iar por
-o+pleto la di!po!i-i'n de la pre!enta-i'n de la! pgina! de la tienda
T11$. 0--eda al +en3 de ad+ini!tra-i'n Pre4eren-ia! U 5e+a! y en el 3ni-o te+a di!poni.le pul!e
!o.re el .ot'n CodiM-ar 0pare-ern la! op-ione! del te+a
T11$.1. 0-tive la! op-ione! Colu+na izquierda por de4e-to y Colu+na dere-ha por de4e-to2 ello
le per+itir -onMgurar la vi!i.ilidad la! -olu+na! para -ada pgina independiente+ente
T11$.2. *n la parte in4erior de la pgina tiene un li!tado de pgina!2 !on la! di4erente! pgina!
que !e +ue!tran al -liente -uando navega por la tienda ,Fje!e -o+o la -olu+na izquierda e!t
a-tiva para alguna de ella!2 pero no para la pgina prin-ipal >inde>? Iu!que en la tienda
navegando -o+o -liente una pgina donde !e +ue!tre la -olu+na izquierda Por eje+plo2 a--eda
a la -ategorFa Wo"en
T11$.3. :e!de la pgina prin-ipal a--eda al enla-e Capa del !itio y ver la -olu+na izquierda
a-tiva2 de!a-tFvela para e!ta pgina y ter+ine de -onMgurar la! -olu+na! para la! pgina! -o+o
!e indi-a en la ta.la 1@
P:4ina 1e!cri.cin I;<. 1er.
*rror 404 *rror de pgina no en-ontrada
0utenti-a-i'n Pgina de ini-io de !e!i'n de -liente

/o! +! vendido! Pgina -on el li!tado de produ-to! +! vendido!
Carro de la -o+pra Pgina -on el li!tado de produ-to! en la -e!ta

Category Pgina interior -uando !e vi!ita una -ategorFa
C+!

inde6 Pgina ini-ial de la tienda
Produ-t Pgina de in4or+a-i'n de un produ-to

Capa del !itio fndi-e de todo el -ontenido de la tienda
Proveedore! /i!tado de proveedore! de la tienda

,abla -*. Seleccin de pD2inas rele&antes de las e>istentes en #restaS.op.
T11$.0. Aavegue a la pgina prin-ipal de la tienda y a una pgina interior de alguna -ategorFa de
-?= Mdulo =d 8 #restaS.op
produ-to! G.!ervar la di4eren-ia en la -olu+na izquierda2 a pe!ar de ha.er a-tivado la -olu+na
izquierda en la pgina prin-ipal2 R!ta no apare-e
Para -on!eguir -ontrolar el a!pe-to de la! regione! de -ontenido! hay que tra.ajar -on lo! +'dulo! de
Pre!ta%hop Co+o ya !e indi-'2 lo! +'dulo! !uelen tener .loque! de -ontenido a!o-iado! a -ierta regi'n
de la! pgina!2 pero pueden e!tar o-ulto! en alguna! pgina! a peti-i'n del ad+ini!trador *!te e! el
+otivo por lo que no apare-e la -olu+na izquierda en la pgina prin-ipal y en alguna! otra! pgina!
interiore!
T11'. 0--eda al +en3 de ad+ini!tra-i'n y navegue a C'dulo! U C'dulo!
T11'.1. /a li!ta de +'dulo! !e agrupa en di4erente! -ategorFa!2 li!te la -ategorFa 0pli-a-ione!
,ront Gii-e y de!a-tive el Mdulo BloEue de Banner y navegue a la tienda para ver lo que ha
de!a-tivado
T11'.2. CodiMque la -onMgura-i'n de lo! +'dulo! !iguiendo la ta.la 1) Para no ir +'dulo por
+'dulo2 la parte in4erior de la pgina en-ontrar un .ot'n para in!talar lo! !ele--ionado! -on
0--ione! +a!iva! U 9n!talar !ele--i'n Ao altere la -onMgura-i'n de ning3n +'dulo2
po!terior+ente !e tratar
Mdulo
Iloque CC%
Iloque de Ianner
Iloque de -arrito
Iloque de -ategorFa!
Iloque de -onta-to!
Iloque de enla-e!
Iloque de enla-e!
per+anente!
Iloque de idio+a!
Iloque de in4or+a-i'n de
-onta-to!
Iloque de in4or+a-i'n de
u!uario
Iloque de logo! de pago

Iloque de +ar-a!
Iloque de +oneda
Iloque de novedade!
Iloque de priva-idad de
dato! del -liente
Mdulo
Iloque de produ-to! vi!to!
Iloque de <i!hli!t
Iloque etiqueta!
Iloque ,a-e.ooL
Iloque 4uente! R%%
Iloque +i -uenta
Iloque +i -uenta en el pie de
pgina
Iloque lo! +! vendido!

Iloque navega-i'n por
4a-eta!
Iloque ne<!letter
Iloque proveedor
Iloque !o-ial
Iloque tienda!
Iloque -o+partir en
,a-e.ooL
Iloque de rea!eguro!
Mdulo
CategorFa de produ-to!
Co+entario !o.re el
produ-to
ConMgurador de te+a!
*ditorial
,avourite produ-t!
,eeder
9+agen de -ontrol de!lizante
Cen3 horizontal !uperior
C'dulo enviar a un a+igo
Per!onalizar .loque de
in4or+a-i'n CC%
Produ-to! de!ta-ado! en
pgina de ini-io
Ventana de in4or+a-i'n
produ-to
Venta! -ruzada!
,abla -+. Mdulos !ront FGice acti&os e inacti&os para el curso.
T11'.3. ,iltre el li!tado de +'dulo! en el -uadro de!plega.le por Mdulos instalados y a-tuali-e
todo! lo! +ar-ado! ne-e!iten !er a-tualizado!
Mdulo =d 8 #restaS.op -?(
T11'.0. Aavegue a la tienda -on otra pe!taHa del navegador para ver la u.i-a-i'n de lo!
+'dulo! 9ntente identiM-arlo! en la pgina +ediante el tFtulo del .loque de -ontenido
T117. 0--eda ahora a la zona de ad+ini!tra-i'n C'dulo! U Po!i-ione! de lo! +'dulo!2 pul!e el
.ot'n 9ni-ie /ive*dit y prue.e +over lo! +'dulo! de u.i-a-i'n a !u gu!to Ao olvide guardar lo!
-a+.io! -on el .ot'n !uperior =uardar
T117.1. 0l !alir del +odo de edi-i'n2 navegue a la! pgina! interiore!2 !ele--ionando por eje+plo
una -ategorFa de produ-to! G.!erve -o+o ahora apare-en a-tiva! la! -olu+na! y hay +'dulo!
di4erente!
*n la 3lti+a zona de ad+ini!tra-i'n apare-i' un li!tado de po!i-ione! di!poni.le! para lo! +'dulo!
Pre!ta%hop tiene la pre!enta-i'n del !itio Je. dividido en +u-ha! regione! Pero no toda! la! regione!
!on vi!i.le! en toda! la! pgina!2 por eje+plo2 alguna! !on !'lo para la! pgina! en la! que el -liente
e!t realizando el pedido Para -o+prender el +odelo de pre!enta-i'n de e!te CC% reali-e lo!
!iguiente! -a+.io!7
T11,. 0--eda de nuevo a la zona de ad+ini!tra-i'n C'dulo! U Po!i-ione!2 y en el -uadro de Mltrado
Co!trar !ele--ione BloEue de bNsEueda rDpida :e!pl-e!e por toda la pgina2 -ada -uadro
-orre!ponde a una regi'n di!poni.le2 .u!que en que regione! e!ta a-tivo el BloEue de bNsEueda
rDpida y eli+Fnelo de toda! la! regione! Vi!ite la tienda para -o+pro.ar que ha de!apare-ido la
.3!queda
T11,.1. Vuelva a la pgina de ad+ini!tra-i'n C'dulo! U Po!i-ione! y pul!e el .ot'n verde
titulado 9n!ertar un hooL !ituado en la parte !uperior dere-ha *n el -uadro de!plega.le C'dulo!
!ele--ione el Iloque de .3!queda rpida y en el -uadro de!plega.le 9n!ertar hooL en !ele--ione
di!play/e4tColu+n =uarde lo! -a+.io!2 vi!ite la tienda y o.!erve donde apare-e ahora el -uadro
de .3!queda
3.2. Creaci6n del cat,lo%o
*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-er repre!entado en el +en3 de
navega-i'n del !itio Je. Para +anipular -orre-ta+ente el -atlogo en Pre!ta%hop hay que 4a+iliariza#
r!e -on lo! -on-epto! que 4or+an parte de di-ho -atlogo7
CategorFa! y !u.-ategorFa!7 *! la .a!e del -atlogo2 !e trata en una organiza-i'n jerrqui-a para
lo! produ-to! de la tienda
Produ-to!7 5odo! lo! produ-to! !e -rean dentro de una -ategorFa o !u.-ategorFa y tendrn una
!erie de atri.uto! y -ara-terF!ti-a!
Cara-terF!ti-a!7 *n Pre!ta%hop la! -ara-terF!ti-a! de lo! produ-to! e! in4or+a-i'n adi-ional !o.re
el +i!+o2 pero el u!uario no tiene +odo de alterarlo! durante la -o+pra
0tri.uto! de produ-to!7 /o! produ-to! pueden tener di4erente! varia-ione! -o+o puede !er el
-?) Mdulo =d 8 #restaS.op
-olor2 el ta+aHo u otro! %i e!ta varia-i'n e! !ele--iona.le por el u!uario !e -on!ideran atri.uto!
Pre!ta%hop !oporta varia-ione! del pre-io en 4un-i'n de la !ele--i'n de u!uario2 !e e!tudiar
po!terior+ente
,a.ri-ante!7 *n -ierto tipo! de tienda! !e li!tan lo! 4a.ri-ante!2 aunque e! op-ional el u!o de lo!
+i!+o!
:e.e -on!iderar!e -ierta a+.igXedad en el u!o de la! pala.ra! atri.uto y
-ara-terF!ti-a en Pre!ta%hop2 !e -on!ideran -on-epto! di4erente! y e!tn
ligado! a 4un-ionalidade! di4erente!2 po!terior+ente !e detallarn *n pri+er
lugar !e e+pezar -reando un -atlogo .!i-o de produ-to!
T11*. 0--eda al +en3 de ad+ini!tra-i'n Catlogo U CategorFa! 2 entre en
la 3ni-a -ategorFa e6i!tente y !ele--ione toda! la! !u.-ategorFa! para
.orrarla! *l !i!te+a le avi!ar !i de!ea .orrar todo! lo! produ-to!
ta+.iRn2 .'rrelo! todo!
T11*.1. Iorre ta+.iRn la -ategorFa ini-ial para dejar la e!tru-tura de
produ-to! va-Fa y -ree una nueva e!tru-tura -o+o la +o!trada en la
Mgura 1) Ao e! ne-e!ario -rear el r.ol entero2 al +eno! -ree Cuentos
y inos -o+pleto $!e la! i+gene! preparada! para -ada -ategorFa
%e har una pri+era prue.a aHadiendo un produ-to -on uno! dato! .!i-o!
in-luyendo -ara-terF!ti-a! y viendo !u pre!enta-i'n
T123. :e!de Catlogo U Produ-to! eli+ine todo! lo! produ-to! e6i!tente! y aHada un nuevo
produ-to u!ando el enla-e 0Hadir nuevo
T123.1. 0pare-ern 12 4or+ulario! !ele--iona.le!
de!de un +en3 !uperior -on dato! para rellenar
Rellene lo! dato! .!i-o! !iguiendo la ta.la 1( y
u!ando el te6to del M-hero te>tos8prestas.op.t>t $!e
el .ot'n =uardar y per+ane-er para no !alir de la
edi-i'n del produ-to
T123.2. *n 9+gene! !u.a la i+agen preparada para
e!te li.ro7 producto8libro8platero8181o.:p2
T123.3. *n Cara-terF!ti-a! u!e el enla-e 0gregar una
nueva -ara-terF!ti-a! para aHadir -ara-terF!ti-a! %i
!e Mja ha !alido de la edi-i'n del produ-to y e!t en el
+en3 de ad+ini!tra-i'n Catlogo U Cata-terF!ti-a!
de produ-to! 0Hada la! !iguiente!7 ISB02 Lutor2 Lo
e Idio"a
T123.0. Aavegue a Catlogo U Produ-to! para en#
Mdulo =d 8 #restaS.op -?*
!i2ura (+. Cate2orCas.
Inforacin
Ao+.re Platero y go
Ireve de!-rip-i'n te>tos8prestas.op.t>t
:e!-rip-i'n te>tos8prestas.op.t>t
Precio
Pre-io +ayori!ta
!in 9V0
@
Pre-io de venta
!in 9V0
(
Regla de
i+pue!to!
*% IooL! Rate 4c
"!ociacione!
CategorFa!
9ni-io
/i.ro!
Tran!.orte
Pe!o 0@
Cantidade!
Cantidad 10
,abla -M. Datos necesarios para un producto.
/i.ro!
/i.ro!
Cuento!
Cuento!
Poe!Fa
Poe!Fa
Aarrativa
Aarrativa
Vino!
Vino!
Rioja
Rioja
Ri.era del :uero
Ri.era del :uero
Vino! de Coguer
Vino! de Coguer
g de+!
g de+!
0-eite
0-eite
PapelerFa
PapelerFa
Regalo!
Regalo!
-ontrar el li.ro que e!ta.a editando y rellene la! -ara-terF!ti-a! que a-a.a de aHadir
T123.$. Aavegue en !u tienda ha!ta e!te produ-to para ver donde apare-en la! -ara-terF!ti-a!
T121. 0 pe!ar de ha.er .orrado lo! produ-to! in-luido! de de+o!tra-i'n !iguen apare-iendo en
alguna! zona! de la tienda Para realizar una li+pieza de lo! dato! in-luido! de eje+plo in!tale el
+'dulo Li"piador de #restas.op2 puede que !e lla+e ps cleaner2 de.e .u!-ar la pala.ra cleaner en
el .u!-ador de +'dulo!
T121.1. $na vez in!talado 3!elo -on -uidado ya que puede .orrar todo el -ontenido :e!de el
li!tado de +'dulo! pul!e el .ot'n ConMgurar del +'dulo /i+piador de Pre!ta%hop
T121.2. Iorre lo! pedido! de lo! -liente!2 +ar-ando la -a!illa %F2 y de!puR! u!e el .ot'n /i+piar
y organizar de la !e--i'n /i+pieza de la .a!e de dato!
T121.3. Aavegue de nuevo a la tienda y -o+pro.ar que han de!apare-ido toda! la! re4eren-ia!
a lo! produ-to! de eje+plo
5ra! +o!trar la ad+ini!tra-i'n .!i-a de produ-to! y !u! -ara-terF!ti-a! !e u!arn la! propiedade! para
-o+prender -ual e! la di4eren-ia entre e!to! do! -on-epto! en Pre!ta%hop2 que en prin-ipio por !u
no+en-latura pre!entan -ierta a+.igXedad
*n el eje+plo propue!to !e di!pondr de una +ar-a de a-eite en .otella! de 02(@ litro! pero2 el -liente
e!-oge !i quiere enva!ado de -ri!tal o P*5
1
2 evidente+ente la ele--i'n del enva!e altera el pre-io Mnal2
ade+! indi-are+o! di4erente! !to-L! para -ri!tal y P*5
T122. %i no aHadi' ante! la -ategorFa Lceite aHdala ahora junto -on !u -ategorFa padre V de"Ds2
utili-e la! i+gene! predi!eHada!
T122.1. 0--eda a Catlogo U 0tri.uto! de produ-to!2 .orre todo! lo! e6i!tente! y utili-e el .ot'n
0Hadir nuevo atri.uto 0Hada un nuevo atri.uto lla+ado En&asado y !ele--ione! en 5ipo de
atri.uto la op-i'n Botones de radio
T122.2. 5ra! guardarlo apare-er en la li!ta de atri.uto!2 entrando en Rl puede aHadir valore!
+ediante el .ot'n 0Hadir nuevo valor 0Hada do! valore! para el atri.uto de enva!ado7 Cristal y
#E,
T122.3. 0Hada ahora un nuevo produ-to en la -ategorFa a-eite titulado Lceite de oli&a .E. ?.M*l5
Mje un pre-io2 ponga el pe!o a 1[g y no rellene el !to-L ini-ial $!e 9+gene! para in-luir do!
i+gene!7 producto8aceite8pet.:p2 y producto8aceite8cristal.:p2 ConMgure -orre-ta+ente la!
a!o-ia-ione! y lo! te6to!
T122.0. 0--eda Co+.ina-ione! 0quF e! donde !e indi-an la di4erente! po!i.ilidade! para lo!
produ-to! y !u! varia-ione! de pre-io! $tili-e el enla-e =enerador de -o+.ina-ione! para -rear
do! -o+.ina-ione! !ele--ionando de la li!ta de atri.uto! enva!ado P*5 y Cri!tal !i+ultnea+ente
tal y -o+o !e +ue!tra en la Mgura 1( y pul!ando el .ot'n 0Hadir
1 5ipo de pl!ti-o -uya! !igla! !on de origen anglo!aj'n re4erente a Polyethylene 5erephtalate
-?+ Mdulo =d 8 #restaS.op
T122.$. ,Fje!e en la Mgura 1( donde !e ha -reado la -o+.ina-i'n En&asadoP Cristal -on un
9+pa-to en el pre-io de 1]1j y !e han e!ta.le-ido 10 unidade! di!poni.le! para -ada -o+.ina-i'n
Pul!e el .ot'n =enerar e!ta! -o+.ina-ione!
!i2ura (M. Co"binaciones de productos.
T122.'. Vuelva a la edi-i'n del produ-to y aHada la! i+gene! lla+ada! producto8aceite8pet.:p2 y
producto8aceite8cristal.:p2 5ra! aHadirla!2 en Co+.ina-ione! edite -ada -o+.ina-i'n para
e!ta.le-er una i+agen di4erente a -ada una de ella! Vi!ite la tienda para ver -o+o +ue!tra
Pre!ta%hop la! -o+.ina-ione!
T122.7. CodiMque la -o+.ina-i'n para enva!ado de -ri!tal aHadiendo un i+pa-to de 1[g en el
pe!o
T122.,. %e van a e!pe-iM-ar lo! dato! adi-ionale! para el produ-to *dite de nuevo el a-eite y
!ele--ione el 4or+ulario 0djunto 0Hada el M-hero ce8aceite.pd32 tit3lelo 4e2la"ento Lceites
T122.*. =uarde lo! -a+.io! y aHada un proveedor u!ando el +en3 Catlogo U Proveedore! $!e
lo! dato! del M-hero te6to! y el logotipo -orre!pondiente Iorre todo! lo! e6i!tente! y deje !'lo el
que a-a.a de -rear
T122.13. 0!igne al a-eite el proveedor que a-a.a de -rear y vi!ite el produ-to para ver -o+o al
e!-oger di4erente! -o+.ina-ione! -a+.ia la 4oto y el pre-io2 pero ver que la! -ara-terF!ti-a! y
Mdulo =d 8 #restaS.op -?M
lo! M-hero! adjunto! !on lo! +i!+o!
T122.11. :el +i!+o +odo que ha aHadido el proveedor puede aHadir el 4a.ri-ante Para nue!tro
-a!o !er el +i!+o2 por lo que de.e aHadir un nuevo 4a.ri-ante -on lo! +i!+o! dato! y
e!ta.le-erlo para el a-eite u!ando el 4or+ulario del produ-to 0!o-ia-ione!
T122.12. G.!erve en la -olu+na izquierda lo! -uadro! donde !e +ue!tra tanto el li!tado de
proveedore! -o+o de 4a.ri-ante!
3.3. 5fertas y promociones
*l !i!te+a tradi-ional u!ado en tienda! 4F!i-a! para de!ta-ar -ierto! produ-to! !e tra!lada al
-o+er-io ele-tr'ni-o de +anera !i+ilar Pre!ta%hop !oporta tre! +odo! para de!ta-ar lo! produ-to!2
toda! ella! pueden !er utilizada! !i+ultnea+ente y !on7
Produ-to de!ta-ado7 *! la +! agre!iva +o!trndo!e !ie+pre en la pgina de ini-io Para de!ta-ar
produ-to! !e aHade a la -ategorFa Inicio2 ya que en la edi-i'n de produ-to! en Pre!ta%hop e!t
per+itido !ele--ionar varia! -ategorFa! para -ualquier produ-to
G4erta7 0l poner el produ-to en o4erta apare-e un i-ono +ar-ado la o4erta
:e!-uento!7 Con!i!ten en alterar el pre-io en 4un-i'n de la -antidad de produ-to! -o+prado!
0 -ontinua-i'n !e pro.arn la! -uatro po!i.ilidade! -on di4erente! produ-to! de lo! introdu-ido!
anterior+ente y alguno +!
T123. 0Hada para ello alguno de lo! vino! u!ando lo! te6to! del M-hero de te6to! y -ree la! nueva!
-ara-terF!ti-a! indi-ada!2 ne-e!aria! para todo! lo! vino!
T123.1. *!-oja do! produ-to! y aHdalo! a la -ategorFa 9ni-io2 de e!ta 4or+a e!tarn de!ta-ado!
en la pgina de ini-io Cantenga la -ategorFa original del produ-to +ar-ada !i+ultnea+ente
T123.2. *dite uno de lo! vino! y +arque la -a!illa Co!trar en la pgina produ-to el i-ono ken
re.aja!k 2 podr en-ontrar e!ta op-i'n en el 4or+ulario Pre-io de edi-i'n del produ-to
T123.3. *n e!te +i!+o 4or+ulario u!e el .ot'n 0Hadir un pre-io e!pe-FM-o y e!ta.lez-a una
redu--i'n del pre-io a partir de 1 unidade! del 1c
!- Ge.%i4# del 0a:o ) e#vDo
*l pro-e!o de -o+pra en la! tienda! ele-tr'ni-a! !igue un patr'n -o+3n utilizando -o+o .a!e el
lla+ado -arrito de la -o+pra2 que no e! +! que una li!ta de lo! produ-to! !ele--ionado! durante la
vi!ita a la tienda
:e!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 di4erente! 4or+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 +odiM-ar -ierto! dato! y !e pide -onMr+a-i'n de otro! 5ra! la -o+pra por parte
-?7 Mdulo =d 8 #restaS.op
del -liente el pro-e!o -ontin3a por parte del vendedor2 el -ual2 realizar otra !erie de pa!o! en la tienda
ele-tr'ni-a2 a!F2 el -liente ir re-i.iendo notiM-a-ione! !o.re el e!tado de !u pedido
*l pro-e!o de -o+pra !e +ue!tra de 4or+a e!que+ti-a en la Mgura 1E2 en la pri+era 4a!e interviene el
-liente2 donde puede to+ar de-i!ione! en 4un-i'n de la -onMgura-i'n e!ta.le-ida por el ad+ini!trador
de la tienda 5ra! la -o+pra2 el vendedor de.e pro-e!ar el pedido y para ello2 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 -liente2 y a!F el -liente puede ha-er !egui+iento de !u pedido de!de !u -uenta
!i2ura (7. 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! -onMgurar la! 4or+a!
de pago y lo! tran!porti!ta! Para realizar prue.a! !e -onMgurar la tienda -on alguno! +odo! de envFo y
pago a elegir por el -liente
Re!pe-to al tran!porti!ta !e -onte+pla el -l-ulo del -o!te en 4un-i'n del pe!o y la zona de envFo2 por
ello en lo! produ-to! !e in-luFan dato! de pe!o *l +odo de opera-i'n -on!i!te en -rear 4ranja! de pe!o y
zona! a!ignando el -o!te a -ada 4ranja2 Pre!ta%hop har el -l-ulo de -o!te! de envFo para el
tran!porti!ta en 4un-i'n de lo! dato! di!poni.le!
T120. Regi!tre un nuevo u!uario en la tienda para realizar -o+pra! /lene la -e!ta -on alguno!
produ-to! y en el -arrito de la -o+pra u!e el .ot'n ConMr+ar %iga el pro-e!o de -o+pra para ver
lo! di4erente! 4or+ulario! que apare-en durante la -o+pra
T120.1. ConMgure el -orreo en Par+etro! avanzado! U Correo ele-tr'ni-o u!ando el !ervidor
%C5P del -ur!o2 a!eg3re!e que 4un-iona -orre-ta+ente u!ando el .ot'n *nviar un e+ail de
prue.a %i no 4un-iona de.e realizar lo! pa!o! indi-ado! en la !e--i'n )) >pg 124? de.ido a un
po!i.le error de e!ta ver!i'n de Pre!ta%hop
T120.2. 0--eda al +en3 de ad+ini!tra-i'n C'dulo! U Pago2 in!tale el #a2o contra ree"bolso
(Cas. on deli&er1)2 de!a-tive el pago -on C.eEue y -onMgure el +'dulo de ,rans3erencia
Mdulo =d 8 #restaS.op -?<
/lenado de
la -e!ta
/lenado de
la -e!ta
:ire--i'n de
entrega
:ire--i'n de
entrega
,or+a
de pago
,or+a
de pago
Co!te! del
pedido y
-onMr+a-i'n
Co!te! del
pedido y
-onMr+a-i'n

Prepara-i'n
*n -ur!o
Prepara-i'n
*n -ur!o
*ntregado
*ntregado
*le--i'n de
5ran!porte
*le--i'n de
5ran!porte
Can-elado
Can-elado
*nviado
*nviado
Ree+.ol!ado
Ree+.ol!ado
*!pera
de pago
por
tran!4eren-ia
o -heque
*!pera
de pago
por
tran!4eren-ia
o -heque
%in !to-L2 e!perando !to-L
%in !to-L2 e!perando !to-L
*rror de pago
*rror de pago
C
/
9
*
A
5
*
V
*
A
:
*
:
G
R
bancaria
T120.3. 0--eda a la pe!taHa 5ran!porte U 5ran!porti!ta! y de!a-tive el tran!porti!ta e6i!tente
:e.e tener do!2 uno !eg3n lo! dato! !eg3n la ta.la 1E y otro titulado 4eco2er en tienda -on la
op-i'n 0pli-ar lo! ga!to! de envFo de!a-tivada
T120.0. *n el pa!o 2 de edi-i'n del tran!porti!ta2
+en3 /ugar y ga!to! de envFo2 e!ta.lez-a para
CRJ do! rango!7 uno de 0Lg a @Lg y otro de @Lg
a 10Lg 9ndique para la zona Europe un -o!te de
12j para el pri+er rango y 2@j para el !egundo
T120.$. Repita el pro-e!o de -o+pra pro.ando
lo! tran!porti!ta! Co+o -liente2 li!te lo! pedido!
del -liente y o.tenga !u 4a-tura en P:,
/o! ad+ini!tradore! de la tienda ge!tionan lo! pedido! -a+.indolo! de e!tado y +andando avi!o! a lo!
-liente! /a ge!ti'n de pedido! tiene +u-ha! po!i.ilidade! y e! +uy Ze6i.le en !u -onMgura-i'n2 in-lu!o
lo! e!tado! +o!trado! en la Mgura 1E pueden !er alterado!2 aHadiRndo!e o quitndo!e !eg3n la!
ne-e!idade! de la tienda Co+o eje+plo !e realizar una ge!ti'n .!i-a del pedido
T12$. 0--eda -o+o ad+ini!trador al +en3 Pedido!2 de.er en-ontrar el pedido realizado anterior#
+ente y editarlo para realizar lo !iguiente7
T12$.1. Ca+.ie de e!tado el pedido de Prepara-i'n en -ur!o a *nviado :e!de la -uenta del
-liente -o+prue.e el e!tado del pedido tra! el -a+.io
T12$.2. Co+prue.e el -orreo del -liente para ver !i ha re-i.ido notiM-a-i'n del -a+.io de e!tado
de !u pedido
T12$.3. Co+o ad+ini!trador2 o.tenga lo! do-u+ento! P:, para el pedido del -liente pul!ando en
lo! i-ono! del li!tado de pedido!
T12$.0. 0--eda de nuevo al pedido del -liente y pul!e el i-ono rojo de =oogle Cap! para lo-alizar
la dire--i'n de entrega del pedido *n e!ta +i!+a pgina de pedido2 utili-e el -uadro Auevo
+en!aje para indi-ar al -liente que no ha podido lo-alizar la dire--i'n de envFo
#.1. Pasarelas de pa%o
$na pa!arela de pago e! un proveedor de un !ervi-io en 9nternet en-argado de ge!tionar la!
tran!a--ione! de pago entre un -liente y vendedor *n e!te pro-e!o intervienen el -liente2 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
0-tual+ente toda! la! entidade! Mnan-iera! po!een pa!arela! de pago para pro-e!ar pago! en la red2
pero lo! +! pionero! y +! e6tendido! en la red no -orre!ponden -on la! tradi-ionale! entidade!
Mnan-iera! /a! que na-en en la red y para la red o4re-en un !ervi-io 4-il de utilizar y +uy -'+odo para
--? Mdulo =d 8 #restaS.op
Ao+.re CRJ
5rn!ito 4E hora!
/ogo transporte8"r9.:p2
,a-tura-i'n l -on el pe!o
9+pue!to! 21c
,uera de la ga+a :e!ha.ilitar
Rango! %iga 51244
Pe!o +6i+o 10
,abla -7. Datos de transportistas.
el de!arrollador2 el vendedor y el -liente
$no de lo! +! -ono-ido! e! #a1#al PRe4 40Q el -ual e! propiedad de *.ay *!te !i!te+a e!t tan
e6tendido 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 pago2 PayPal o4re-e un entorno de de!arrollo lla+ado #a1#al Sandbo> PRe4 41Q
-on el -ual !e puede pro.ar el 4un-iona+iento de la pa!arela de pago2 realizar tran!a--ione! y ver lo!
re!ultado!2 evidente+ente2 -on dinero virtual *n el enla-e PRe4 42Q !e li!tan +ultitud de !olu-ione! que
o4re-e PayPal para el pago en tienda! ele-tr'ni-a! -on -antidad de !i!te+a! !oportado!
0nte la! 4a-ilidade! o4re-ida! por PayPal para de!arrolladore! lo -onvierten en el -andidato ideal para
u!arlo en el -ur!o *! i+portante -ono-er ta+.iRn que la! -uenta! PayPal tienen di4erente! perMle! y
para poder a-eptar pago! de.e tener !u -uenta PayPal al +eno! en el tipo #re"ier *!ta +odalidad no
tiene -o!te +en!ual2 pero !i -o+i!ione! !o.re la -o+pra2 -on!ulte la! tari4a!
5a+.iRn puede en-ontrar para entidade! Mnan-iera! +'dulo! pa!arela! de pago pero2 e!to! +'dulo! no
!e di!tri.uyen gratuita+ente
T12'. Aavegue a la pgina oM-ial de Pre!ta%hop2 enla-e PRe4 1;Q *n la zona de C'dulo!2 !ele--io#
ne en el +en3 C'dulo! Pre!ta%hop !ele--ione Pago!
T127. *ntre en la! pgina! de ad+ini!tra-i'n de !u tienda y en la pgina de C'dulo! U Pago!
de!pliegue la !e--i'n -on lo! +'dulo! de pago 9n!tale el +'dulo de pago de PayPal
Con PayPal y !u entorno de prue.a! !e pueden realizar tran!a--ione! u!ando la pa!arela de pago Co+o
ade+! !e di!tri.uye !in -o!te adi-ional !e realizar la in!tala-i'n y prue.a del entorno de PayPal2 pero
al !er un pro-e!o tedio!o2 realF-elo !'lo !i tiene interR! en -ono-er el pro-edi+iento de pago ele-tr'ni-o
#.2. Paypal sandbo'
PayPal !and.o6 e! una -lona-i'n del entorno de pago! PayPal -on el que !e pueden realizar
tran!a--ione! y pro.ar toda! la! -onMgura-ione! de lo! -liente! y vendedore! -on dinero no real *! +uy
3til ya que 4a-ilita la to+a de de-i!ione! en la -onMgura-i'n de la -uenta del vendedor de la tienda y
4a-ilita la realiza-i'n de prue.a! de +odo! 4un-iona+iento para el vendedor
*!ta herra+ienta !e puede u!ar li.re+ente tra! regi!trar!e y tiene di!poni.le gran -antidad de do-u#
+enta-i'n tR-ni-a !o.re !u 4un-iona+iento para 4a-ilitar a lo! de!arrolladore! de !o4t<are la integra#
-i'n en !u! apli-a-ione!
%e realizar un eje+plo !in entrar en otra! op-ione! o -onMgura-ione! e6i!tente! para e!te +odo de
pago2 el o.jetivo e! -on!eguir ponerlo operativo en la tienda del -ur!o2 en un -a!o real !e de.en e!tudiar
en pro4undidad toda! la! po!i.ilidade!
T12,. *l pri+er pa!o e! di!poner de una -uenta de PayPal2 identiM-ar!e -on ella y navegar al enla-e
http!788developerpaypal-o+8 para entrar en el !i!te+a !and.o6 $na vez dentro podr -rear -uenta!
Mdulo =d 8 #restaS.op ---
PayPal M-ti-ia! -on di4erente! perMle! u!ando dinero virtual para poder realizar tran!a--ione!
T12,.1. Aavegue en el +en3 !uperior al enla-e 0ppli-ation! y u!e la op-i'n %and.o6 a--ount!
para -rear -uenta! de prue.a Pre!te aten-i'n a -o+o -rear do! -uenta! para que operen
-orre-ta+ente7
/a pri+era -uenta de.e !er de vendedor >Iu!ine!!?2 e! +uy i+portante e!ta.le-er el paF!2
de lo -ontrario2 Pre!ta%hop no autorizar la -o+pra Ponga un -rRdito ini-ial y no olvide
apuntar la -ontra!eHa2 no podr o.tenerla de!puR!
/a !egunda -uenta !er la del -o+prador >Per!onal?2 e!ta.lez-a de nuevo el paF!2 el -rRdito
y la -ontra!eHa
T12,.2. /legado a e!te punto2 e! i+portante que nun-a -ierre la ventana del navegador que
-ontiene el li!tado de -uenta! de prue.a!2 !i la -ierra2 dejar de 4un-ionar el !and.o6 %e
re-o+ienda +antener en una pe!taHa del navegador !ie+pre a.ierto PayPal %and.o6
T12,.3. Pro-eda a pro.ar la -uenta del vendedor $!e el enla-e *nter %and.o6 !ite >ver Mgura
1;? 0pare-er una nueva ventana para introdu-ir el u!uario y la -ontra!eHa del vendedor
T12,.0. $na vez dentro de la -uenta del vendedor -o+prue.e el -rRdito di!poni.le Repita el
pro-e!o -on el -o+prador
5ra! e!te pro-e!o ya !e di!pone de -uenta! virtuale! para operar en +odo !and.o62 in-lu!o durante el
pro-e!o de -rea-i'n de -uenta! !e pudieron ha.ilitar tarjeta! de -rRdito virtuale! para realizar +!
prue.a! de tran!a--ione! -on e!ta! tarjeta! ha-ia la -uenta PayPal del vendedor 0 -ontinua-i'n !e
pro-eder a realizar la -onMgura-i'n en Pre!ta%hop del vendedor
--= Mdulo =d 8 #restaS.op
!i2ura (<. #a1#al sandbo>.
0gregar
u!uario
0gregar
u!uario
0--eder -on la
-uenta virtual
0--eder -on la
-uenta virtual
PerMl del
vendedor
PerMl del
vendedor
T12*. Vuelva a Pre!ta%hop2 y !i no lo hizo
anterior+ente2 a-tive el +'dulo de pago de
PayPal %iga el enla-e de -onMgura-i'n de e!te
+'dulo y ver la -onMgura-i'n de PayPal en
Pre!ta%hop
T12*.1. Re!ponda %F a la pregunta Vga tiene
una -uenta PayPal *+pre!a!W y al Mnal de la
pgina !e a-tivar un 4or+ulario adi-ional
-o+o el de la Mgura 40
T12*.2. :e.e a-tivar el Codo de Prue.a que
-orre!ponde al !and.o6 indi-ado en la Mgura
40
T12*.3. Para rellenar la! -lave! del vendedor
de.e o.tener lo! dato! 0P9 !oli-itado!
a--ediendo al perMl del vendedor indi-ado en
la Mgura 1;
T12*.0. Gtra op-i'n e! entrar en la -uenta
!and.o6 y dentro de la -uenta Paypal del
vendedor a--eda a PerMl U %oli-itar
-reden-iale! de 0P9 U Ver Mr+a de 0P9 o.tendr tre! dato!7 0o"bre de usuario de L#I2
Contrasea de L#I y !ir"a :e uno u otro +odo2 de.e -opiar e!to! tre! dato! en la -onMgura-i'n
de PayPal de Pre!ta%hop >Mgura 40?
T133. $na vez -onMgurado el vendedor de la tienda puede realizar la -o+pra -on la -uenta -liente
!iguiendo el pro-e!o de -o+pra ha.itual2 reali-e lo! !iguiente! pa!o!7
T133.1. Cantenga ini-iada la !e!i'n en el navegador -on !u -uenta de de!arrollador de Paypal en
una pe!taHa2 o no 4un-ionar el pro-e!o de -o+pra
T133.2. *n otra pe!taHa2 o -on una ventana de navega-i'n an'ni+a2 a--eda a la tienda -on la
-uenta de -ualquier -liente ya regi!trado Ao tiene que -oin-idir -on el -o+prador de PayPal
Reali-e una -o+pra y en el +Rtodo de pago u!e PayPal
T133.3. %altar a una pgina de PayPal donde tiene que rellenar lo! dato! del -o+prador2 en e!te
-a!o la -uenta !and.o6 del -o+prador que -re'2 u!e el enla-e V5iene una -uenta PayPalW
T133.0. ,inali-e la -o+pra y entre en la -uenta !and.o6 del vendedor2 para ello a--eda a
http788<<<!and.o6paypal-o+ e identi4Fque!e -on la -uenta vendedor de prue.a! Para -o+pro#
.ar !i ha re-i.ido el dinero2 ade+! ver un .ot'n *+itir Ree+.ol!o junto a la tran!a--i'n
T133.$. 0--eda -o+o ad+ini!trador a la tienda y en la pe!taHa de pedido! ver el nuevo pedido
en e!tado Pago a-eptado *ntre en el pedido y ver ta+.iRn un -uadro lla+ado PayPal Re4und -on
un .ot'n para ha-er el reintegro -o+pleto
Mdulo =d 8 #restaS.op --(
!i2ura )?. Con62uracin del "dulo #a1#al.
Codo
%and.o6
Codo
%and.o6
Clave! del
vendedor
Clave! del
vendedor
T133.'. Por 3lti+o en la pe!taHa de !and.o6 que +antuvo a.ierta !iga el enla-e de u!uario
vendedor AotiM-ation! para ver lo! -orreo! que re-i.irFa el vendedor RepFtalo para el -o+prador
%i a--ede -on el perMl del vendedor podr pro.ar otra! op-ione! de -onMgura-i'n en el %and.o6 de
PayPal2 e! re-o+enda.le e6plorar toda! la! po!i.ilidade! e6i!tente! ante! de u!ar una -uenta de
vendedor real en la tienda
6- Co#E:u(a$i4# de la 0(e.e#%a$i4#
/a pre!enta-i'n de la tienda en Pre!ta%hop !e a.orda de!de do! a!pe-to! 4unda+entale!7 la
di!po!i-i'n de la pgina y el a!pe-to
/a di!po!i-i'n de la pgina depende de la u.i-a-i'n e!ta.le-ida para lo! +'dulo! in!talado! *n un
pri+er -onta-to -on Pre!ta%hop puede pare-er que e!ta! u.i-a-ione! e!t deter+inada! por
Pre!ta%hop2 pero no e! a!F2 e!ta! u.i-a-ione! e!tn e!ta.le-ida! en una! plantilla! 4-il+ente +odiM#
-a.le! *l a!pe-to2 al igual que en otro! CC%2 !e e!ta.le-e +ediante te+a! -on!i!tente! en un -onjunto
de M-hero! -on plantilla!2 i+gene! y hoja! de e!tilo u.i-ada! en una !u.-arpeta dentro de la in!tala-i'n
del CC%
0nte! de -o+enzar a tra.ajar !o.re el a!pe-to +ediante te+a! e! re-o+enda.le re-orrer la -onM#
gura-i'n de lo! +'dulo! e6i!tente! para la pre!enta-i'n de la tienda %e re-o+ienda -onMgurar alguno!
de ello! ahora que ya hay produ-to! en el -atlogo de la tienda
T131. 0--eda al +en3 de ad+ini!tra-i'n C'dulo! y de!pliegue la !e--i'n 0pli-a-ione! ,ront Gii-e
T131.1. ConMgure el +'dulo 9+agen de -ontrol de!lizante para !u pgina <e. eli+inando la!
i+gene! e6i!tente! y aHadiendo la! tre! !u+ini!trada! -on el +aterial el +'dulo7 diapositi&a8
&ino.:p22 diapositi&a8libreria.:p2 y diapositi&a8aceituna.:p2
T131.2. ,Fje!e -o+o para aHadir -ada diapo!itiva e! ne-e!ario in-luir un enla-e y un tFtulo Para
poner el enla-e -orre-ta+ente de.e o.tener el enla-e de la -ategorFa que de!ee +o!trar2 para
ello2 navegue la tienda
T131.3. Vi!ite la tienda2 averigXe el an-ho y alto de la! diapo!itiva! !u+ini!trada! 0ju!te la
-onMgura-i'n del +'dulo a la! di+en!ione! -orre-ta!
T131.0. :e!a-tive del Iloque -ategorFa! el +odo din+i-o y +arque la CategorFa raFz -o+o
Inicio
T131.$. ConMgure el Iloque de priva-idad de dato! de lo! -liente!2 aquF e! donde de.e poner un
te6to adaptado a la /GP:
T131.'. *ntre en la -onMgura-i'n del Iloque <i!hli!t Vque dato! +ue!traW
Para -onMgurar la di!po!i-i'n de lo! +'dulo! en la! pgina! de Pre!ta%hop !e de.en e!tudiar la!
u.i-a-ione! de la! regione! Con Pre!ta%hop e6i!ten +ultitud de regione! y R!ta! no e!tn pre!ente! en
--) Mdulo =d 8 #restaS.op
toda! la! pgina! 0de+! e6i!ten +ultitud de pgina!2 por lo que el e!tudio por+enorizado no !e
a4ronta en e!te -ur!o Co+o eje+plo !e tratar 3ni-a+ente la pgina ini-ial >inde>? y la de pre!enta-i'n
de produ-to! /a! regione! e6i!tente! en la pgina ini-ial !e +ue!tran en la Mgura 41 -on la que !e
realizar la per!onaliza-i'n indi-ada
!i2ura )-. Disposicin de re2iones en la
pD2ina inicial de #restaS.op.
Po!icin Mdulo!
di!play5op Cen3 horizontal
di!play5opColu+n Va-Fo
di!playDo+e5a. Va-Fo
di!playDo+e5a.Content Va-Fo
di!playDo+e
9+agen de -ontrol
de!lizante
Produ-to! de!ta-ado! en
pgina de ini-io
Per!onalizar .loque de
in4or+a-i'n CC%
di!play/e4tColu+n
Iloque -ategorFa!
Aue!tra! tienta!
Iloque de produ-to! vi!to!
di!playRightColu+n
Iloque de .3!queda rpida
Iloque novedade!
Iloque +! vendido
Iloque de +ar-a!
Iloque proveedor
di!play,ooter
Iloque in4or+a-i'n de
-onta-to!
Iloque ne<! letter!
Iloque !o-ial
Iloque CC%
,abla -<. Disposicin de los "dulos para
con62urar la pD2ina inicial.
T132. 0--eda a la pgina de ad+ini!tra-i'n C'dulo! U Po!i-ione! de lo! +'dulo! *li+ine y aHada
+'dulo! en di4erente! regione! !iguiendo la ta.la 1;
T132.1. :e!de la pgina de ad+ini!tra-i'n de +'dulo! de!ha.ilite lo! +'dulo!7 banner y enlaces
T132.2. ConMgure -orre-ta+ente lo! +'dulo!7 .loque de in4or+a-i'n CC% y .loque CC%
T132.3. Iu!que el +'dulo donde -a+.iar lo! dato! de -onta-to !ituado! en el piR de pgina de la
tienda
0.1. Instalaci6n de nuevos temas
*n la pgina oM-ial de Pre!ta%hop !e li!tan +ultitud de te+a! di!poni.le! para la tienda pero la
+ayorFa !on de pago %i lo de!ea2 y en -a!o de ha.er alguno gratuito2 de!-argue alguno a !u gu!to de!de
el enla-e 0dd#Gn! de la pgina oM-ial de Pre!ta%hop PRe4 1;Q
Mdulo =d 8 #restaS.op --*
di!play,ooter
d
i
!
p
l
a
y
/
e
4
t
C
o
l
u
+
n
di!playDo+e
d
i
!
p
l
a
y
R
i
g
h
t
C
o
l
u
+
n
di!playDo+e5a.Content
di!playDo+e5a.
di!play5op
di!playDeader
di!play5opColu+n
T133. 0--eda al +en3 de ad+ini!tra-i'n de +'dulo! e in!tale el +'dulo +ediante 9+portar 8
e6portar un te+a
T133.1. $!e el enla-e -onMgurar del +'dulo re-iRn in!talado *n un 4or+ulario podr e!-oger un
ar-hivo de !u di!-o2 u!e el ar-hivo de!-argado y u!e el .ot'n %iguiente !iguiendo todo! lo! pa!o!
ha!ta Mnalizar la i+porta-i'n
T133.2. Vuelva al +en3 Pre4eren-ia! U 0!pe-to2 a-tive el nuevo te+a y vi!ite !u tienda
0.2. Desarrollo de un tema
9ni-iar el de!arrollo de un nuevo te+a para Pre!ta%hop e! un pro-e!o !en-illo y +uy .ien e!tru-tu#
rado2 pero tedio!o al u!ar -antidad de ar-hivo! para 4un-ionar *6i!te una do-u+enta-i'n tR-ni-a en la
pgina oM-ial de Pre!ta%hop2 lla+ada GuCa del diseador2 donde !e detalla e!te pro-e!o *n e!te +i!+o
do-u+ento re-o+iendan realizar el pro-e!o +! !en-illo2 -on!i!tente en -lonar el te+a ini-ial ya
e6i!tente -a+.iando el no+.re2 y realizando la! +odiM-a-ione! oportuna! en la nueva -opia
Para -rear un nuevo te+a por tanto !e -lonar el te+a original y !o.re Rl !e realizarn +odiM-a-ione!2
el o.jetivo e! !'lo +o!trar -o+o -on!eguir realizar la! +odiM-a-ione! u!ando C%% *n e!te +'dulo no !e
realizar un te+a -o+pleto2 en po!teriore! CC% !e repetir el pro-e!o pro4undizando +! en el
de!arrollo de te+a!
Para poder realizar -orre-ta+ente el te+a !e re-o+ienda tener la tienda -on !uM-iente! produ-to! -o+o
para llenar lo! -uadro! #roductos Destacados2 Lo "Ds endido5 etc %e ha preparado una -opia del
pro4e!or -on alguno! produ-to! in-luido! de 4or+a que !olo hay que -lonarla en un equipo lo-al
T130. %i no tiene al +eno! 4 produ-to! en !u tienda y quiere pro.ar el pro-e!o de -lona-i'n de la
tienda reali-e e!ta tarea de i+porta-i'n
T130.1. Cree una nueva .a!e de dato! y un u!uario de!de phpCy0d+in2 e i+porte el M-hero %K/
-on lo! dato! de!de el M-hero prestas.op8pro3esor.sEl./ip
T130.2. Cree una nueva -arpeta en la -arpeta .tdocs de Iitna+i2 por eje+plo prestas.op8
i"portado y de!-o+pri+a en ella lo! M-hero! de prestas.op8pro3esor./ip
T130.3. *ntre en la -arpeta -onMg de e!ta nueva in!tala-i'n de Pre!ta%hop y edite -on AotePadB
B el M-hero settin2s.inc.p.p :e.e e!ta.le-er lo! valore! indi-ado! en el -'digo 1( al valor
-orre-to
...
define(PR3IR4.M/RPE PHHHP)O ?? 4o:(re de $! (!se de d!tos
define(PR3IR'1/"RPE PHHHP)O ?? 's+!rio de $! (!se de d!tos
define(PR3IR-.11W3RPE PHHHP)O ?? Contr!se^! de$ +s+!rio de $! (!se de d!tos
...
Cdi2o (M. Con62uracin base de #restaS.op.
T130.0. *ntre en la zona de ad+ini!tra-i'n de la tienda -lonada e!-ri.iendo dire-ta+ente la
dire--i'n de ad+ini!tra-i'n en el navegador2 de.erFa quedar -o+o7 http788lo-alho!t8pre!ta!hop#
--+ Mdulo =d 8 #restaS.op
pro4e!or8adinc! $!e lo! dato! de a--e!o in-luido! en el M-hero R*0:C*t6t e6i!tente en la
raFz de la -lona-i'n de Pre!ta%hop
T130.$. 0--eda al +en3 de ad+ini!tra-i'n Pre4eren-ia! U %*G B $R/! y aju!te el :ire-torio raFz
a la -arpeta donde tenga in!talada la tienda
$na vez -lonado el !itio del pro4e!or o partiendo del !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 CC%
T13$. :e!-o+pri+a el ar-hivo te"a8prestas.op./ip en alguna -arpeta de !u di!-o *!te ar-hivo
-ontiene i+gene! para u!ar durante el de!arrollo del nuevo te+a
T13$.1. 0--eda al +en3 de ad+ini!tra-i'n Pre4eren-ia! U 5e+a! y utili-e el .ot'n 0Hadir nuevo
*n el 4or+ulario rellene en Ao+.re de plantilla cursoc"s e indique el dire-torio ta+.iRn -o+o
cursoc"s2 !ele--ione en $!ar e!te te+a -o+o +odelo la op-i'n de4ault#.oot!trap y guarde lo!
-a+.io!
T13$.2. *ntre -on el ad+ini!trador de ar-hivo! en la -arpeta donde e!tR 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'n2 -ada
uno en una -arpeta y veriMque !i !e ha -reado una nueva -arpeta -on el no+.re cursoc"s Copie
en e!ta -arpeta la i+agen !u+ini!trada pre&ie9.:p2 !o.re!-ri.iendo la anterior
T13$.3. *ntre de nuevo al +en3 de ad+ini!tra-i'n Pre4eren-ia! U 5e+a! y !ele--ione el nuevo
te+a que a-a.a de -rear y a-tive el te+a dejando la! op-ione! por de4e-to
T13$.0. %i navega a la pgina !e han de!-onMgurado la di!po!i-i'n de lo! +'dulo! Para poder
realizar la! !iguiente! tarea! de.e a-tivar al +eno! la -olu+na izquierda -on alguno! ele+ento!
en la pgina prin-ipal
$n te+a en Pre!ta%hop e!t 4or+ado por plantilla!2 i+gene!2 hoja! de e!tilo C%%2 et- *n e!te -ur!o
intere!an prin-ipal+ente la! hoja! de e!tilo2 aunque para poder -a+.iar la di!po!i-i'n de lo! ele+ento!
de la pgina !e de.en editar la! plantilla!
T13'. *ntre en la -arpeta the+e! U -ur!o-+! U -!! del nuevo te+a2 lo en-ontrar en la -arpeta de
in!tala-i'n de Pre!ta%hop Con AotepadBB edite el M-hero 2lobal.css2 a.ra !i+ultnea+ente la
pgina prin-ipal de !u tienda -on el navegador y a-tive ,ire.ug
T13'.1. *n el M-hero 2lobal.css avan-e -on el editor de te6to! ha!ta la 3lti+a lFnea y aHada un
-o+entario que o-upe toda la lFnea para +ar-ar a partir de donde realizar lo! -a+.io!2 puede
!er de la 4or+a7 ?YYY . p!rtir de !D+5 co:ienM! e$ te:! de$ c+rso CM1 YYYYYYYYYYYYYYYYYYYYYYY?
T13'.2. /o! -a+.io! -on!i!tirn en aHadir regla! C%% !in -a+.iar nada en el -'digo original
anterior a la +ar-a que a-a.a de poner *! la 4or+a ha.itual de tra.ajar2 !i -o+ente un error !'lo
tiene que .orrar !u lFnea y no re-ordar o .u!-ar la! regla! C%% originale! del te+a
T13'.3. $!ando ,ire.ug vi!uali-e en el navegador la! -aja! -orre!pondiente! a lo! !ele-tore!7
Zp!ge2 Zhe!der2 Zco$+:ns2 Z$eftRco$+:n2 ZcenterRco$+:n2 ZrightRco$+:n y Zfooter *!to! !on lo!
Mdulo =d 8 #restaS.op --M
!ele-tore! que dividen la pgina en -ontenedore! para lo! .loque! de -ontenido de Pre!ta%hop
T13'.0. *n el -'digo D5C/ de lo! !ele-tore! anteriore! e!t e!t e!ta.le-ida una -la!e adi-ional
para -ontrolar el an-ho +6i+o de la pgina Con-reta+ente e! .cont!iner2 aHada al Mnal de la
hoja de e!tilo! la regla indi-ada a -ontinua-i'n y re-argue la pgina para -o+pro.ar el e4e-to
.cont+iner , 3+7/;idt*0 none12
T13'.$. 0Hada el -'digo 1E al Mnal 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! 5ra.aje !o.re e!to! !ele-tore!
ha!ta -on!eguir +! e!pa-io en la -olu+na dere-ha2 para ello au+ente el an-ho de la -olu+na
dere-ha y di!+inuya el an-ho de la -olu+na izquierda >propiedade! 9idt.? Con!idere el u!o de
la! unidade! p) y 9
4leftDcol.3n ,
3+rgin0 __p) __p) __p) __p)1
;idt*0 __912
4centerDcol.3n ,
3+rgin0 __p) __p) __p) __p)1
;idt*0 __912
4rig*tDcol.3n , ;idt*0 __912
Cdi2o (7. Selectores de distribucin de las colu"nas en #restaS.op.
T13'.'. :e!-o+pri+a el M-hero te"a8prestas.op./ip y vi!uali-e la! i+gene!2 toda! ella! !ern
utilizada! -o+o 4ondo en di4erente! !itio! Copie e!to! ar-hivo! en la -arpeta i+g del te+a y
aHada e!ta regla en la hoja de e!tilo!7
.-loc( .titleD-loc( ,-+c(gro.nd/i3+ge0 +r$(P..?i:g?fondo=c!(ecer!=1.gifP)12
T13'.7. Re-argue la pgina prin-ipal de la tienda y o.!erve la i+agen de 4ondo en la! -a.e-era!
de lo! .loque! $na tR-ni-a ha.itual en C%% e! repetir la i+agen de 4ondo indeMnida+ente2 e!to
!e -on!igue -on el atri.uto bac@2round8repeat prue.e e!ta.le-er en la regla anterior la propiedad
-+c(gro.nd/repe+t0 no=repe!t1 Re-argue la pgina y vuelva a e!ta.le-erlo a repe!t
T13'.,. 0 pe!ar de no repetir!e la i+agen de 4ondo -o+o patr'n2 R!ta no e! del !uM-iente
ta+aHo -o+o para -u.rir todo el 4ondo de la -aja Prue.e aHadir a la regla la propiedad que
-ontrola el ta+aHo de la i+agen de 4ondo -on7 -+c(gro.nd/si<e0co#er1
T13'.*. Para ter+inar de de-orar la! -a.e-era! !e aHadir e4e-to de !o+.ra C%%1 al te6to de
e!ta! -a.e-era! y un .orde in4erior en rojo $!e el -'digo 1; para -on!eguirlo
T13'.13. %iguiendo el eje+plo anterior .u!que un !ele-tor para e!ta.le-er la .arra negra de
enla-e! !uperior -on la +i!+a i+agen de 4ondo2 del +i!+o +odo que !e hizo en el -'digo 1;
.-loc( .titleD-loc( ,
-+c(gro.nd/i3+ge0 +r$(P..?i:g?fondo=c!(ecer!=1.gifP)1
-+c(gro.nd/si<e0co#er1
color0 ZFFFFFF1 ?Y Co$or de$ te)to en ($!nco Y?
te7t/s*+do;0 >p) >p) >p) rg(!(0E 0E 0E 0.8)1
-order/top0none1 ?Y /$i:in!r (orde s+periorY?
-order/-otto30so$id 8p) Z/830F1 ?Y Iorder inferior en ro2o Y?
X
Cdi2o (<. Solucin para el 3ondo las cabeceras de los bloEues.
--7 Mdulo =d 8 #restaS.op
T137. 0hora de.e repetir el ejer-i-io anterior pero -on la!
-a.e-era! de lo! .loque! de la -olu+na -entral2 !iendo el
o.jetivo -on!eguir el a!pe-to de +o!trado en la Mgura 42
Para ello tenga en -uenta la! !iguiente! -on!idera-ione!7
*l !ele-tor a u!ar e!7 ZrightRco$+:n .($ocV .tit$eR($ocV
/a i+agen de 4ondo utilizada e! 3ondo8cabecera8derec.a.pn2 g para u.i-arla -orre-ta#
+ente de.e u!ar la propiedad (!cVgro+nd=position% __e: __e:O
*l -olor de 4ondo u!ado e! Z/F7606
/a lFnea in4erior !e -on!igue aHadiendo un .orde in4erior de >p) de -olor Z/F7606
%e de.e aju!tar -orre-ta+ente el ta+aHo de 4uente y la propiedad p!dding
T13,. *l nuevo o.jetivo e! +odiM-ar 3ni-a+ente el .loque Lo "Ds &endido ha!ta -on!eguir el
a!pe-to +o!trado en la Mgura 41
T13,.1. Iu!que -on ,ire.ug el !ele-tor -orre!pondiente
a e!te .loque2 veriMque que e!7
Z(est=se$$ersR($ocVRright
T13,.2. Cree una regla C%% que !ele--ione la -a.e-era
e!te .loque7
Z(est=se$$ersR($ocVRright.($ocV .tit$eR($ocV 0Hada a
e!te !ele-tor la i+agen de 4ondo 3ondo8cabecera8=.pn2
*li+ine ta+.iRn el .orde in4erior en e!te !ele-tor
T13,.3. *l !ele-tor Znew=prod+ctsR($ocVRright
!ele--iona toda la -aja Lo "Ds &endido 0Hada un .orde
alrededor -on la propiedad (order%so$id 1p) ZCCCCCCO2 la
!o+.ra -on la propiedad (o)=sh!dow% >p) >p) 1p)
Z777777O y el -olor de 4ondo -on (!cVgro+nd=
co$or%Z//////O
T13,.0. %'lo queda u.i-ar la -a.e-era -on el te6to Lo "Ds &endido y
di!+inuir el an-ho del .loque Para +over el te6to li.re+ente !e utilizar
el po!i-iona+iento C%% pa!ando a relativo re!pe-to a la -aja padre *n el
-'digo 40 !e +ue!tran la! propiedade! que de.e aHadir al !ele-tor Z(est=
se$$ersR($ocVRright.($ocV .tit$eR($ocV :e.e utilizar alguno! valore!
negativo! en la! propiedade! de po!i-iona+iento >top y le4t? para
-on!eguirlo
position0 re$!ti#e1
;idt*0 HHp)1
top0 HHp)1
left0 HHp)1
Cdi2o )?. E:e"plo de posiciona"iento absoluto para una ca:a.
Mdulo =d 8 #restaS.op --<
!i2ura )=. Estilo 6nal para las cabeceras
de la colu"na central.
!i2ura )(. Estilo 6nal para
el bloEue Lo "Ds &endido.
!i2ura )). Lspecto de
los botones.
T13*. $n po-o +! -o+plejo e! -on!eguir que lo! .otone! Ladir al carrito tengan el a!pe-to
+o!trado en la Mgura 44
T13*.1. Para -on!eguir un !ele-tor e6a-to !e propone un +Rtodo2 no +uy re-o+endado pero 3til
en -a!o de diM-ultad2 -apaz de o.tener un !ele-tor e6a-to para una -aja del -'digo D5C/
$!ando ,ire.ug de.e !ele--ionar la -aja que +ue!tra el te6to Ladir al carrito2 en el -'digo
D5C/ de ,ire.ug -orre!pondiente a e!ta -aja2 pul!e el .ot'n dere-ho del rat'n y apare-er el
+en3 +o!trado en la Mgura 4@ %ele--ione la op-i'n Copiar ruta C%%
T13*.2. Vuelva a AotepadBB y pegue el -ontenido del portapapele! en la hoja de e!tilo y tendr
el !ele-tor -al-ulado por ,ire.ug 5enga -uidado -on e!te pro-edi+iento ya que genera un
!ele-tor de gran ta+aHo
T13*.3. Para el nuevo gran !ele-tor !e de.e u!ar la i+agen de 4ondo boton8carrito.pn22 e!ta.le#
-iendo -orre-ta+ente lo! +rgene! y ta+aHo de 4uente
!i2ura )*. Fbtencin de un selector con !irebu2.
T103. ,inal+ente !e pro.ar un e4e-to en la tipogra4Fa para el tFtulo del .loque #roductos "Ds
&istos
T103.1. $tili-e la tipogra4Fa Spic14ice84e2ular.tt3 !u+ini!trada -on el +aterial y !iguiendo el
pro-edi+iento indi-ado anterior+ente >-'digo 2)2 pg 42? aHdala a !u hoja de e!tilo!
T103.2. 0!eg3re!e que lo ha realizado -orre-ta+ente e!ta.le-iendo di-ha tipogra4Fa para el
!ele-tor Z#iewed=prod+ctsR($ocVR$eft .tit$eR($ocV -on un ta+aHo de 4uente de >0p)2 para ello2
re-argue la pgina de la tienda
T103.3. Para -on!eguir el e4e-to aHada al !ele-tor anterior la! !iguiente! propiedade!7
-=? Mdulo =d 8 #restaS.op
-+c(gro.nd0 none1
-order0none1
te7t/s*+do;0 0 =0.08e: 0.2e: ZFFFE 0.01e: =0.02e: 0.18e: ZF/0E
0.01e: =0.08e: 0.18e: ZFC0E 0.02e: =0.18e: 0.2e: ZF0E
0.06e: =0.20e: 0.>e: ZF70E0.08e: =0.28e: 0.6e: ZF70E
0.06e: =0.2e: 0.e: ZF80E 0.1e: =0.1e: 1.0e: ZF601
Cdi2o )-. E3ecto 3ue2o para tipo2ra3Cas utili/ando so"bras.
T103.0. Para la regla anterior e!ta.lez-a el -olor de la 4uente a Z3>C6>I ya que -on el e4e-to
re-iRn aHadido no !e lee .ien 0de+! au+ente la !epara-i'n entre lFnea! -on la propiedad $ine=
height
T103.$. ,inal+ente prue.e aHadir el -'digo 42 para -on!eguir el e4e-to de 4uego ani+ado
Iu!que en 9nternet otro! e4e-to! para tipogra4Fa! .a!ado! en C%%1
=/3o</(e)fr+3es f.ego ,
09 Wte7t/s*+do;0 0 =0.08e: 0.2e: ZFFFE 0.01e: =0.02e: 0.18e: ZF/0E
0.01e: =0.08e: 0.18e: ZFC0E 0.02e: =0.18e: 0.2e: ZF0E
0.06e: =0.20e: 0.>e: ZF70E0.08e: =0.28e: 0.6e: ZF70E
0.06e: =0.2e: 0.e: ZF80E 0.1e: =0.1e: 1.0e: ZF6012
289 ,te7t/s*+do;0 0 =0.08e: 0.2e: ZFFFE 0 =0.08e: 0.17e: ZF/0E
0.06e: =0.12e: 0.22e: ZFC0E 0.06e: =0.1>e: 0.27e: ZF0E
0.08e: =0.2>e: 0.>>e: ZF70E 0.07e: =0.27e: 0.67e: ZF70E
0.1e: =0.>e: 0.7e: ZF80E 0.1e: =0.>e: 0.e: ZF6012
809 ,te7t/s*+do;0 0 =0.08e: 0.2e: ZFFFE 0.01e: =0.02e: 0.18e: ZF/0E
0.01e: =0.08e: 0.18e: ZFC0E 0.02e: =0.18e: 0.2e: ZF0E
0.06e: =0.20e: 0.>e: ZF70E0.08e: =0.28e: 0.6e: ZF70E
0.06e: =0.2e: 0.e: ZF80E 0.1e: =0.1e: 1.0e: ZF6012
789 ,te7t/s*+do;0 0 =0.08e: 0.2e: ZFFFE 0 =0.06e: 0.17e: ZF/0E
0.08e: =0.18e: 0.2>e: ZFC0E 0.08e: =0.18e: 0.>e: ZF0E
0.07e: =0.28e: 0.6e: ZF70E 0.0e: =0.>e: 0.8e: ZF70E
0.1e: =0.>e: 0.e: ZF80E 0.1e: =0.>e: 1.0e: ZF6012
1009,te7t/s*+do;0 0 =0.08e: 0.2e: ZFFFE 0.01e: =0.02e: 0.18e: ZF/0E
0.01e: =0.08e: 0.18e: ZFC0E 0.02e: =0.18e: 0.2e: ZF0E
0.06e: =0.20e: 0.>e: ZF70E0.08e: =0.28e: 0.6e: ZF70E
0.06e: =0.2e: 0.e: ZF80E 0.1e: =0.1e: 1.0e: ZF6012
X
46ie;ed/prod.ctsD-loc(Dleft .titleD-loc( ,
-moz-animation-duration00.7s1
-moz-animation-name0f+ego1
-moz-animation-iteration-count0infinite1
-moz-animation-direction0!$tern!te1
X
Cdi2o )=. E3ecto 3ue2o ani"ado para tipo2ra3Cas utili/ando so"bras en !ire3o>.
8- Ad/i#i.%(a$i4# ava#7ada
*6plotar 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 !e han dado pin-elada! a -ara-terF!ti-a! -o+une! de todo! lo! CC% de -o+er-io
ele-tr'ni-o
*n e!ta !e--i'n !e tratan re!u+ida+ente alguna! -ara-terF!ti-a! relevante! pero no !e -u.re Pre!ta#
%hop en !u totalidad2 para a+pliar lo! -ono-i+iento! e!t di!poni.le en la pgina oM-ial un +anual de
u!uario que detalla toda! la! op-ione! di!poni.le!
Mdulo =d 8 #restaS.op -=-
1.1. Productos <irtuales
Cu-ha! tienda! venden +aterial en 4or+ato ele-tr'ni-o o intangi.le -o+o pueden !er li.ro!2 progra#
+a!2 !ervi-io!2 et- /o! produ-to! virtuale! en Pre!ta%hop !on aquello! para lo! que no hay envFo 4F!i-o y
tienen un -o+porta+iento adi-ional una vez -o+prado Para -o+prenderlo !e aHadirn a la tienda li.ro!
en 4or+ato ele-tr'ni-o para !u venta
T101. 0Hada un nuevo produ-to titulado Cuentos de los ;er"anos Gri"" en la !e--i'n ade-uada2
u!e lo! te6to! preparado!2 e!ta.lez-a el pre-io y la! unidade! di!poni.le!
T101.1. *n el +en3 de 9n4or+a-i'n e!ta.lez-a el 5ipo de produ-to a Produ-to virtual
T101.2. 0--eda al 4or+ulario Produ-to virtual2 !u.a el P:, -on el li.ro y e!ta.lez-a a 10 el
n3+ero de de!-arga! per+itida!
T101.3. Reali-e una -o+pra del produ-to virtual -on una -uenta de -liente Co+o ad+ini!trador
a--eda a la li!ta de pedido! y -a+.ie el e!tado a *ntregado g -o+o -liente entre en el li!tado de
pedido! y de!-argue el li.ro en 4or+ato P:,
1.2. -antenimiento del cat,lo%o
Cantener una .uena -alidad en el -atlogo en un una tienda ele-tr'ni-a e! 4unda+ental ya que un
-liente en la red e! +u-ho +! -uidado!o que en la! tienda! 4F!i-a! y -on!ulta toda la in4or+a-i'n
di!poni.le ante! de realizar una -o+pra online *!ta tarea e! -lave para el R6ito de la tienda y !o.re
todo para evitar po!i.le! devolu-ione! o re-la+a-ione! po!teriore!
T102. 0--eda al +en3 de ad+ini!tra-i'n Catlogo U Conitoreo y -o+prue.e lo! avi!o! !o.re lo!
produ-to! y -ategorFa! e intente !olu-ionarlo!
*l -ontrol del !to-L e! otro de lo! a!pe-to! relevante!2 lo! +ovi+iento! de !to-L quedan regi!trado! para
poder !er analizado! Cada +ovi+iento de !to-L tiene a!o-iado un +otivo2 por eje+plo2 podrFa !er un
+ovi+iento entre di4erente! tienda!
T103. 0--eda al +en3 Pre4eren-ia! U Produ-to! y a-tive la op-i'n Da.ilitar la ad+ini!tra-i'n
avanzada de !to-L 0pare-er un nuevo +en3 lateral titulado *6i!ten-ia!
T103.1. *n el +en3 *6i!ten-ia! U 0l+a-ene! aHada do!2 uno el prin-ipal lla+ado tienda y otro el
!e-undario lla+ado na&e
T103.2. *n el +en3 *6i!ten-ia! U =e!ti'n de e6i!ten-ia! au+ente el !to-L en alg3n produ-to
T103.3. Co+prue.e la li!ta de Covi+iento! de !to-L
T103.0. Vi!ite la -onMgura-i'n de *6i!ten-ia!
1.3. esti6n de usuarios= clientes y empleados
Co+o en otro! CC%2 e! po!i.le tener di4erente! tipo! de u!uario! en el !i!te+a /a naturaleza de un
-== Mdulo =d 8 #restaS.op
!i!te+a de -o+er-io ele-tr'ni-o lleva i+plF-ito! do! perMle! de u!uario!7 -liente y vendedor 0de+! de
e!to! perMle! .!i-o!2 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! perMle! a!ignando per+i!o! !o.re
-ada una de la! parte! de Pre!ta%hop Co+o eje+plo !e -rear un u!uario -on un perMl de reponedor de
+er-an-Fa2 por tanto2 tendr a--e!o !'lo al -atlogo
T100. 0--eda al +en3 0d+ini!tra-i'n U PerMle! y aHada un nuevo perMl lla+ado 4eponedor.
T100.1. :e!de 0d+ini!tra-i'n U Per+i!o! edite lo! per+i!o! del perMl 4eponedor a-tivando
todo! per+i!o! para el Catlogo y la! *6i!ten-ia!2 !i pul!a !o.re 5odo !e !ele--ionan auto+ti-a#
+ente
T100.2. :e!de 0d+ini!tra-i'n U *+pleado! aHada un nuevo e+pleado -on el perMl de
4eponedor Cierre la !e!i'n de ad+ini!trador y vuelva a entrar -on el nuevo u!uario
5a+.iRn !e -onte+pla la -rea-i'n de perMle! para lo! -liente!2 el pro-edi+iento utilizado e! agrupar
-liente! en grupo! -on -ierta! propiedade!2 !iga el !iguiente eje+plo
T10$. :e!de el +en3 Cliente! -ree un grupo de -liente! lla+ado #or Ma1or para apli-ar un
de!-uento del 1c *dite un -liente de!de el li!tado de -liente! y aHdalo a e!te grupo
Gtra op-i'n intere!ante e! pre+iar a lo! .ueno! -liente! -on de!-uento!
T10'. 0--eda al +en3 Regla! de de!-uento! U Regla! de -o+pra y aHada una regla -on un
de!-uento del @c y a!Fgnela a alg3n -liente
T10'.1. 0--eda -o+o el u!uario y en el .loque Ci Cuenta -o+prue.e en el enla-e Ci! Vale! !i
apare-e el vale de de!-uento
T10'.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
1.#. Puesta en e'plotaci6n
/a! tienda! online e!tn e6pue!ta! la! 24 hora! del dFa al vandali!+o *! ha.itual la e6plota-i'n de
4allo! de !eguridad en la! tienda!2 -on!iguiRndo!e +odiM-ar el -ontenido de la tienda2 aunque el ro.o de
-reden-iale! para la realiza-i'n de tran!a--ione! e! +uy in4re-uente *!to! -a!o! !e produ-en ha.itual #
+ente por error del ad+ini!trador y no por 4allo! en el CC%
Para evitar e!ta! !itua-ione! !e re-o+ienda una +Fni+a -onMgura-i'n de !eguridad indi-ada por el
equipo de de!arrollo de Pre!ta%hop que !e re!u+e en lo! !iguiente! punto!7
Reno+.rar la -arpeta ad"in -on un no+.re de -arpeta -o+pli-ado2 -on una +ez-la de -i4ra! y
letra! e! una .uena !olu-i'n
Proteger di-ha -arpeta -on un ar-hivo ..taccessH..tpass9d2 e!te M-hero e! del !ervidor Je.
0pa-he y 4uerza una -ontra!eHa para -ualquier a--e!o a e!a dire--i'n
Mdulo =d 8 #restaS.op -=(
Ao guarde !u! -lave! de a--e!o en !u ordenador ni +u-ho +eno! en la red2 olvFde!e de la nu.e
para guardar -ontra!eHa! y u!e un +Rtodo tradi-ional
*lija una -ontra!eHa -o+pleja y +odi4Fquela -on 4re-uen-ia2 no reutili-e -ontra!eHa!2 !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 install 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! in3tile! tra! la in!tala-i'n o a-tualiza-i'n de Pre!ta%hop7
read"eO3r.t>t2 read"eOen.t>t2 read"eOes.t>t2 C;L0GELFG2 -arpeta docs2 et-
ProhF.a el a--e!o a !u! ar-hivo! de te+a >te"plates? puede u!ar otro ar-hivo ..taccess
-onMgurado ade-uada+ente
0unque de +anera predeter+inada una in!tala-i'n de Pre!ta%hop de.e traer toda! e!to! a!pe-to!
pre-onMgurado!2 e! re-o+enda.le -o+pro.ar !i e4e-tiva+ente !e -u+plen todo! lo! punto! indi-ado!
anterior+ente 0de+! de lo e6pue!to e! re-o+enda.le -uidar -ierto! a!pe-to!2 !o.re todo! lo! legale!2
per!onalizando todo! lo! te6to! que apare-en en di4erente! parte! de la tienda
T107. :e!de el +en3 Pre4eren-ia! U CC% li!te lo! te6to! y -a+.ie aquello! donde !e de.a
+en-ionar la /GP:
T10,. Co+o ejer-i-io de pue!ta en e6plota-i'n !e propone repetir el pro-e!o de -lona-i'n ya
realizado -on la tienda del pro4e!or2 pero -on !u tienda y en !u do+inio per!onal2 u!ando el !ervidor
de 9nternet del -ur!o Para ello2 e6porte !u .a!e de dato! de Pre!ta%hop2 tran!Mera lo! M-hero! y
repita lo! pa!o! indi-ado! en 5114 >pg 11)?
1.0. 5tras caracter2sticas
:e la +ultitud de -ara-terF!ti-a! no e!tudiada! !e pueden de!ta-ar la! e!tadF!ti-a!2 la! devolu-ione!
>RC0?2 +'dulo! de -o+paHFa! de tran!porte pre-onMgurado!2 e!tadF!ti-a! Je. -on =oogle 0nalyti-! y
po!i.ilidad de i+porta-ione! +a!iva! de!de M-hero! -o+pati.le! -on hoja! de -l-ulo!
/i!tando lo! +'dulo! de la !e--i'n de anli!i! y e!tadF!ti-a! apare-en +ultitud de +'dulo! in!tala.le!
-on lo! que o.tener e!tadF!ti-a! de gran utilidad una vez operativa la tienda $na vez a-tivado! !e
-on!ultan en el +en3 de ad+ini!tra-i'n titulado e!tadF!ti-a!
*n la zona de ad+ini!tra-i'n de Pedido! U :evolu-ione! de +er-an-Fa !e puede a-tivar la 4un-ionalidad
para devolu-i'n de +er-an-Fa >RC0? y vale! de devolu-i'n2 ina-tiva ini-ial+ente
,inal+ente en el +en3 Par+etro! 0vanzado! !e pueden ver eje+plo! de i+porta-i'n de dato! y ha-er
-opia! de !eguridad de la tienda
1.1. -odi>caciones e'tra, bu% en el correo electr6nico
Por de4e-to e!ta ver!i'n trae un tie+po de -one6i'n a lo! !ervidore! %C5P +uy -orto y la +ayorFa
e!tn -onMgurado! para tardar en re!ponder para evitar que envFen %P0C +a!iva+ente a travR! de Rl
-=) Mdulo =d 8 #restaS.op
Por ello para que opere -orre-ta+ente !e proponer ha-er la !iguiente +odiM-a-i'n en el -'digo 4uente
de Pre!ta%hop
T10*. 0--eda a !u in!tala-i'n de Pre!ta%hop y edite -on AotepadBB el M-hero Mail.p.p u.i-ado en
la -arpeta -la!!e! Iu!que lo! do! 4rag+ento! de -'digo indi-ado! y au+ente el tie+po de e!pera de
@ al +eno! a 2@ -o+o !e indi-a en el !iguiente -'digo7
[s:tp=*set<i:eo+t(25)O
...
[connection=*set<i:eo+t(25)O
Cdi2o )(. Lu"ento del tie"po de espera para el ser&idor SM,# en #restaS.op.
=- Re*e(e#$ia.
PRe4 1(Q /i.ro .lan-o del -o+er-io ele-tr'ni-o2 0!o-ia-i'n *!paHola de la *-ono+Fa :igital2
<http788<<<li.ro.lan-oadigitalorg8"
PRe4 1EQ 0gen-ia e!paHola de prote--i'n de dato!2 <http788<<<agpde!8"
PRe4 1;Q Pgina oM-ial de Pre!ta%hop2 <http788<<<pre!ta!hop-o+8"
PRe4 40Q PayPal2 <http!788<<<paypal-o+8"
PRe4 41Q Nona para de!arrolladore! de PayPal2 <http!788developerpaypal-o+8"
PRe4 42Q %olu-ione! de pago PayPal para e#-o++er-e2 <http!788<<<paypal-o+8+pp8+er-hant"
Mdulo =d 8 #restaS.op -=*
&4dulo 2e ' Wo(d3(e..
-lo.s
- Re.u/e#
2ic-ero 1e!cri.cin
<ordpre!!#1;1#e!O*%zip Jordpre!! in!tala.le en e!paHol
re-ur!o!#<ordpre!!zip 9+gene! y te6to! utilizado! en el .log de eje+plo
re!pon!ive1;)0zip2 di!-over1(1;zip2
pin.oard11@zip2 zee!tyle12zip
5e+a! para Jordpre!!
,abla =?. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
Jordpre!! e! el ge!tor de -ontenido! por e6-elen-ia para la realiza-i'n de .log! en 9nternet /a Je.
oM-ial en e!paHol e! PRe4 41Q y -uenta -on +ultitud de do-u+enta-i'n2 ta+.iRn di!poni.le en diver!o!
idio+a! en PRe4 44Q
*6i!ten +ultitud de deMni-ione! de !o.re lo que e! un .log en 9nternet2 toda! -onvergen en una idea
-o+3n7 e! un !itio Je. donde lo! -ontenido! e!tn ordenado! -ronol'gi-a+ente 5ra! la apari-i'n de lo!
pri+ero! !itio! Je. -on e!ta -ara-terF!ti-a2 lleg' una rpida e6pan!i'n de lo! .log! a lo largo de la red
Con un gran n3+ero de .log! a-tivo! au+entaron la! re4eren-ia! -ruzada! entre lo! di4erente! autore!
de lo! .log! Por ello2 !e ha avanzado en +e-ani!+o! para auto+atizar la ge!ti'n de e!ta! re4eren-ia!
-ruzada! y han llegado a !er nor+alizada! u!ando lo! tRr+ino! trac@bac@s y pinbac@s -uya e!pe-iM-a#
-i'n puede -on!ultar!e en PRe4 4@Q Co+o tRr+ino ligado al he-ho de la inter-one6i'n de .log! !e a-uHa
Rev 4(2)
el tRr+ino .logo!4era2 ha-iendo re4eren-ia al -onjunto de todo! lo! .log! e6i!tente! en la red y !u!
interrela-ione!
Re!pe-to a JordPre!! na-i' en el aHo 20012 e! un ge!tor de .log! -on +u-ho re-orrido y -on a+plia!
po!i.ilidade! de -onMgura-i'n Por !u a+plitud2 e! i+po!i.le -u.rir en pro4undidad JordPre!! en e!te
-ur!o2 pero !e tratar a.ar-ar el nivel de pre!enta-i'n de -ontenido! y un nivel .!i-o de ad+ini!tra-i'n
del .log
2- I#.%ala$i4# ) $o#E:u(a$i4# ,1.i$a
JordPre!! e! un CC% para .log! +uy Ze6i.le2 ad+ite +ultitud de -onMgura-ione! tanto a nivel de
pre!enta-i'n de -ontenido!2 -o+o a nivel de ge!ti'n del 4un-iona+iento del !itio Je. %e realizar una
-onMgura-i'n .!i-a para el u!o de e!te CC% en el -ur!o
T1$3. Cree una -arpeta nueva en el dire-torio .tdocs de Iitna+i lla+ada 9ordpress y de!-o+pri+a
en ella lo! ar-hivo! del M-hero 9ordpress8(.<.-8esOES./ip
T1$3.1. Aavegue a !u !ervidor Je. lo-al en http788lo-alho!t8<ordpre!! 0van-e en la in!tala-i'n
ha!ta que en el ter-er pa!o !e le !oli-ita una .a!e de dato! Cy%K/ y un u!uario para poder
-ontinuar
T1$3.2. $tilizando el pro-edi+iento ha.itual -on phpCy0d+in -ree una nueva .a!e de dato! -on
un u!uario a!o-iado que tenga todo! lo! per+i!o! %e re-o+ienda -rear el u!uario 9ordpress
a!o-iado a la .a!e de dato! 9ordpress
T1$3.3. %iga todo! lo! pa!o! de in!tala-i'n y no olvide !u u!uario y -ontra!eHa para u!arlo
po!terior+ente
5ra! la in!tala-i'n de JordPre!! !e de.e e!-oger el tipo de .log de!eado -onMgurando la! op-ione!
4unda+entale! del .log -o+o !on la! polFti-a! para lo! -o+entario! y u!uario! /o! u!uario! del .log !e
e!tudiarn en la !e--i'n (1 al requerir -onMgura-i'n adi-ional
Re!pe-to a lo! -o+entario!2 !eg3n el tipo de .log de!eado !e de.e aju!tar la polFti-a de -o+entario!
de!de do! po!i.le! e6tre+o!7 per+itir todo! lo! -o+entario! o no per+itir -o+entario! al !er un .log
+uy per!onal
T1$1. Aavegue a la pgina prin-ipal de !u .log y utili-e el enla-e 0--eder $na vez en el e!-ritorio
de ad+ini!tra-i'n ver di4erente! -uadro! -on -ontrole!2 y en la parte izquierda de la pgina
en-ontrar todo! lo! +en3! de ad+ini!tra-i'n que utilizare+o! para realizar toda! la! tarea!
T1$1.1. $!ando el +en3 lateral izquierdo a--eda a 0ju!te! U =enerale! y rellene lo! -a+po!
tFtulo -on Decoracin 1 pintura2 de!-rip-i'n -on Ideario de decoracin de tu .o2ar
T1$1.2. 0--eda al +en3 0ju!te! U Co+entario!2 optare+o! por per+itir lo! -o+entario! pero
teniendo la op-i'n de revi!arlo! previa+ente Carque la -a!illa *l -o+entario de.e apro.ar!e
+anual+ente
-=7 Mdulo =e 8 Word#ress
T1$1.3. *n e!ta +i!+a pgina de -onMgura-i'n elija un avatar a !u gu!to
T1$1.0. 0--eda a 0ju!te! U Cedio! +ire la! op-ione! para di+en!ione! de i+gene!2 no e!
ne-e!ario que aju!te nada en e!ta !e--i'n
T1$1.$. 0--eda al +en3 $!uario! U 5u perMl y rellene lo! dato! que -rea oportuno! de !u perMl
T1$2. %e realizar ta+.iRn una -onMgura-i'n .!i-a de la aparien-ia2 po!terior+ente2 en la !e-#
-i'n @2 !e e!tudiar en pro4undidad -o+o per!onalizar -o+pleta+ente la aparien-ia del .log
T1$2.1. 0--eda a 0parien-ia U 5e+a! y ver que hay tre! te+a! di!poni.le! 0-tive el te+a
5<enty 5<elve ya que trae alguna! op-ione! +!
T1$2.2. 0--eda al +en3 0parien-ia U Ca.e-era y !u.a la! i+gene! cene3a8-.:p2 y cene3a8=.:p2
%ele--ione la -a!illa 0leatoria para que aparez-an la! i+gene! al azar
T1$2.3. $tili-e el enla-e Per!onalizar en el te+a a-tivo y prue.e a -a+.iar lo! -olore!2 no altere
el re!to de op-ione! ya que !e tratarn po!terior+ente
!- 3u,li$a$i4# de $o#%e#ido.
JordPre!! !epara lo! -ontenido! del .log en do! tipo! de -ontenido! -on -ara-terF!ti-a! di4erente!7
entrada! del .log y pgina! de -ontenido Re!u+ida+ente la! di4eren-ia! !on la! !iguiente!7
*ntrada! del .log7 %on ordenada! -ronol'gi-a+ente y !e le a!ignan -ategorFa! >tag!? 0pare-en en
todo! lo! li!tado! di!poni.le! en el .log
Pgina!7 *! -ontenido e!tti-o y !on ele+ento! para !er enlazado! de!de alg3n lugar del .log
/a! pgina! e!tn rela-ionada! -on el -ontenido di!pue!to a lo largo del .log -o+o e!7 in4or+a-i'n de
-onta-to2 Fndi-e! adi-ionale! !o.re el .log2 et- /a !e--i'n @1 !e dedi-a al e!tudio de la! po!i.ilidade!
o4re-ida! por e!te tipo de -ontenido
0nte! de -rear -ontenido !e de.e !er -on!-iente del volu+en de in4or+a-i'n e6i!tente en 9nternet2 por
ello la -la!iM-a-i'n de la in4or+a-i'n de la! pgina! Je. e! -ru-ial /o! .u!-adore! de 9nternet !on el
punto de entrada de la +ayorFa de lo! a--e!o! a la! Je.!2 y la in4or+a-i'n re-opilada por e!to!
.u!-adore! !e .a!a2 -ada vez +!2 en la in4or+a-i'n o.tenida +ediante +etadato!
4
*!to! +etadato!
-on!i!ten en in4or+a-i'n adi-ional propor-ionada por el -reador para -ada pgina Je.2 -on ello! !e
-on!igue una +ejor -la!iM-a-i'n de la in4or+a-i'n en 9nternet
/a -la!iM-a-i'n de la in4or+a-i'n en 9nternet e! o.jeto de e!tudio2 inve!tiga-i'n y de!arrollo de!de lo!
orFgene! de la Je.2 de he-ho D5C/ 4ue -reado -on e!te prop'!ito -o+partir in4or+a-i'n -ientFM-a entre
inve!tigadore! 0Ho! atr! no e6i!tFa un +odelo -laro para la -la!iM-a-i'n y pro-e!a+iento de la
in4or+a-i'n de la Je.2 a!F !urge hoy en dFa la <e. !e+nti-a $n tRr+ino +uy u!ado e! la ta6ono+Fa2 el
-ual2 ha !ido i+portado de!de la .iologFa y !e u!a en in4or+ti-a -o+o +Rtodo de -la!iM-a-i'n de la
in4or+a-i'n +ediante etiqueta!
4 /o! +etadato! !on o.jeto de e!tudio en lo! -apFtulo! po!teriore! dedi-ado! a lo! ge!tore! de -ontenido! para portale! Je.
Mdulo =e 8 Word#ress -=<
Para -o+prender la i+portan-ia de la ta6ono+Fa i+agine+o! una entrada en un .log en 9nternet !o.re
el te+a +er-urio2 un .u!-ador no tiene -apa-idad de -o+pren!i'n del te6to e!-rito2 por ello no
di!tingue !i el te6to trata !o.re un +etal2 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!iM-ada
JordPre!! !oporta una -la!iM-a-i'n .!i-a de la! entrada! del .log +ediante -ategorFa! y etiqueta!7
*tiqueta!7 *! un -onjunto de pala.ra! !eparada! por -o+a y que e! utilizado para .u!-ar entrada!
rela-ionada! Cada etiqueta e! una !ola pala.ra y el -onjunto de etiqueta! rela-ionada! -on la!
entrada! 4or+an la ta6ono+Fa
CategorFa!7 Con!i!te en una -la!iM-a-i'n jerrqui-a de la in4or+a-i'n y de -ar-ter +! general
de la! entrada! del .log Cada -ategorFa o !u.-ategorFa puede -ontener varia! pala.ra! aunque !e
re-o+ienda u!ar do! pala.ra! %e utilizan para ha-er +! a--e!i.le la in4or+a-i'n para lo!
vi!itante! del !itio Je.
/a -la!iM-a-i'n jerrqui-a en -ategorFa! o4re-ida por JordPre!! diMere en parte de la tradi-ional
-la!iM-a-i'n jerrqui-a de -arpeta! de lo! !i!te+a! in4or+ti-o! Cientra! en un !i!te+a de ar-hivo!
in4or+ti-o un ar-hivo !olo puede e!tar u.i-ado en una -arpeta
@
2 una entrada de .log puede e!tar
a!o-iada a varia! -ategorFa!
/a -la!iM-a-i'n de la! entrada! e! uno de lo! a!pe-to! +! relevante! e i+portante! de un .log2 !e de.e
!er -uidado!o en la -la!iM-a-i'n2 ya que2 la navega-i'n e inde6a-i'n de -ontenido! en 9nternet !e .a!a
4unda+ental+ente en la -la!iM-a-i'n que !e reali-e en -ada entrada del .log /a! -ara-terF!ti-a! +!
relevante! que !e de.en -uidar en la! entrada! del .log para -on!eguir +ejor orden2 a--e!i.ilidad y
vi!i.ilidad de lo! -ontenido! de un .log !e pueden re!u+ir -o+o !igue7
Grdenar .ien lo! -ontenido! u!ando -ategorFa!2 e! i+portante llegar a -o+prender la di4eren-ia
entre -ategorFa y etiqueta >la -ategorFa !uele !er +! genRri-a?
*tiquetar -orre-ta+ente -ada entrada del .log y e!-oger un -onjunto de etiqueta! ade-uado para
!u u!o en el .log
Ao a.u!ar del n3+ero etiqueta! en -ada entrada y -on!iderar una regla genRri-a !o.re la
ordena-i'n7 el e6-e!o de orden e! de!orden
0tender lo! -o+entario! pendiente! de +odera-i'n y evitar re-hazarlo! aunque no !ean de
nue!tro agrado
5ra! pre!entar el +odelo de -la!iM-a-i'n de entrada! de .log a -ontinua-i'n !e trata el pro-edi+iento
de -rea-i'n de entrada! en JordPre!! *n e!te !entido2 -uando !e -rean la! entrada! e6i!te la po!i.ili #
dad de guardarla! -o+o .orrador y ter+inarla! po!terior+ente $na vez ter+inada la entrada2 la pu.li#
-a-i'n puede !er in+ediata o !e puede progra+ar para una 4e-ha y hora deter+inada
:urante la edi-i'n de una entrada e6i!ten varia! po!i.ilidade! para la pre!enta-i'n2 lla+ado! !or"atos
@ Ao e! e!tri-ta+ente -ierto2 lo! !i!te+a! de M-hero! a-tuale! per+iten enlazar un ar-hivo a vario! dire-torio!2 pero de!de el punto
de vi!ta de u!uario e!ta 4un-ionalidad ha.itual+ente no e! utilizada por de!-ono-i+iento
-(? Mdulo =e 8 Word#ress
de las entradas 0unque e!tn di!poni.le! en la! 3lti+a! ver!ione! de JordPre!! la i+ple+enta-i'n
depende del de!arrollador del te+a en u!o2 y a-tual+ente2 la +ayorFa de lo! te+a! e6i!tente! no la!
-onte+plan *l o.jetivo de e!ta -ara-terF!ti-a e! +o!trar la! entrada! -on di4erente a!pe-to2 pero el
a!pe-to no e!t deMnido en JordPre!!2 e! el -reador de un te+a el en-argado de -rear una vi!ta
di4erente 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$3. :e!-o+pri+a en pri+er lugar el ar-hivo recursos89ordpress./ip en alguna -arpeta para
utilizar !u -ontenido a lo largo de e!te +'dulo
T1$3.1. 0--eda de!de el +en3 de ad+ini!tra-i'n del .log a *ntrada! U 0Hadir nueva entrada
T1$3.2. 5itule !u entrada -o+o #intar con broc.a y aHada la entrada a una nueva -ategorFa
lla+ada #intura $tili-e el te6to preparado en el M-hero te>tos89ordpress.t>t -orre!pondiente a
e!ta entrada y -opie el te6to
T1$3.3. $!e el .ot'n aHadir o.jeto >ver Mgura 4)? para in!ertar una i+agen de!de !u ordenador2
puede utilizar la i+agen bote.pn2 0linee la i+agen a la dere-ha o izquierda !eg3n de!ee
T1$3.0. $tili-e el -uadro CategorFa! para aHadir una -ategorFa lla+ada #intura y !ele--i'nela
para e!ta entrada
Mdulo =e 8 Word#ress -(-
!i2ura )+. Editor de entradas en Word#ress.
0gregar CategorFa
0gregar CategorFa
0Hadir o.jeto
0Hadir o.jeto
Gp-ione! de pantalla
Gp-ione! de pantalla
T1$3.$. *n el -uadro de *tiqueta! aHada para e!ta entrada la etiqueta broc.a
T1$3.'. Pu.lique la entrada2 vi!ite !u .log y aHada alguno! -o+entario! a !u entrada
T1$0. Creare+o! una -la!iM-a-i'n jerrqui-a u!ando -ategorFa! para
-la!iM-ar la! entrada! del .log -reada! po!terior+ente 0--eda de!de el
+en3 de ad+ini!tra-i'n del .log a *ntrada! U CategorFa! y -ree una
jerarquFa -o+o la +o!trada en la Mgura 4(
T1$$. Cree una !egunda entrada titulada #intar con aerosol y utili-e el te6to
preparado en te>tos89ordpress.t>t *tiquete e!ta entrada -on la pala.ra
ecol2ico y aHdala a la -ategorFa pintura
T1$$.1. *n la parte !uperior de!pliegue un -uadro lla+ado Gp-ione! de
pantalla >ver Mgura 4)?2 a-tive al +eno! la! op-ione! Co+entario!2 0utor
y %lug
T1$$.2. Co+prue.e en la parte in4erior !i han apare-ido nuevo! -uadro! -on op-ione! y de!a-#
tive lo! -o+entario! para e!ta entrada Vi!uali-e la entrada en el .log -on la! nueva! op-ione!
T1$$.3. Cree una ter-era entrada titulada Clasi6cacin de "aderas utilizando el te6to preparado
en te>tos89ordpress.t>t $tilizando el -uadro Pu.li-ar edite la vi!i.ilidad2 proteja por -ontra!eHa
la entrada y progra+e la pu.li-a-i'n para dentro de @ +inuto!
T1$$.0. Vi!ite la pgina prin-ipal del .log para ver -o+o !e +ue!tra la entrada protegida
#.1. Contenido multimedia
Gtro -o+ponente de JordPre!! e! la li.rerFa +ulti+edia -reada para 4a-ilitar la -la!iM-a-i'n de lo!
ar-hivo! que !e de!een aHadir en el .log %u 4un-ionalidad e! .a!tante .!i-a y 4-il de entender
T1$'. 0--eda al +en3 de ad+ini!tra-i'n Cedio! y utili-e el enla-e aHadir nuevo :e!de una ventana
del ad+ini!trador de ar-hivo! de Jindo<! puede arra!trar M-hero! al -uadro +o!trado en el
navegador 0rra!tra lo! ar-hivo! aquF 0rra!tre toda! la i+gene! de la -arpeta i"a2enes de!-o+pri#
+ida anterior+ente de!de rescursos89ordpress./ip
T1$'.1. 0--eda al +en3 de ad+ini!tra-i'n Cedio! U /i.rerFa Culti+edia y +ire en el li!tado la
-olu+na %u.ido a para lo-alizar lo! ar-hivo! o i+gene! no utilizada! en ninguna entrada del
.log
T1$'.2. 0Hada lo! ar-hivo! P:, in-luido! en la -arpeta pd3 *!ta.lez-a -orre-ta+ente el tFtulo2
leyenda y de!-rip-i'n
T1$'.3. Cree una nueva entrada donde !e enla-en e!to! do! M-hero! P:,2 utili-e el enla-e 0Hadir
o.jeto de la Mgura 4) para poder !ele--ionar el ar-hivo de!de la li.rerFa +ulti+edia *!ta nueva
entrada e!tar en una nueva -ategorFa lla+ada Decoracin 0a&idea2 -o+o etiqueta e!ta.lez-a
na&idad y pd3 !eparada! por -o+a
-(= Mdulo =e 8 Word#ress
!i2ura )M. Cate2orCas
9nteriori!+o
9nteriori!+o
Cl!i-o
Cl!i-o
Cini+ali!ta
Cini+ali!ta
R3!ti-o
R3!ti-o
Pintura
Pintura
Pintar interiore!
Pintar interiore!
Pintar +adera
Pintar +adera
Pintar +etale!
Pintar +etale!
6- Di.0o.i$i4# del ,lo: ) a.0e$%o
/a Ze6i.ilidad de JordPre!! ha-e po!i.le la -on!tru--i'n de un !itio Je. -on e!te ge!tor de
-ontenido! que no ne-e!aria+ente !ea un .log2 !ie+pre y -uando !e -onMgure -orre-ta+ente /a
ge!ti'n de la pre!enta-i'n en JordPre!! e!t -entralizada en el ,e"a que !on -o+ponente! in!tala.le!2
e6i!tiendo +ultitud de te+a! di!poni.le! en la -o+unidad JordPre!! para !u u!o en el .log
0l igual que el re!to de ge!tore! la pgina <e. generada e!t divida en di4erente! regione! donde !e
u.i-an lo! -ontenido! 0lguna! de e!ta! regione! !on -onMgura.le! de!de el inter4az de ad+ini!tra-i'n y
otra! !'lo !on -onMgura.le! alterando lo! M-hero! que 4or+an el te+a
*n e!te !entido2 JordPre!! pre!enta una pe-uliaridad en !u arquite-tura -on!i!tente en una +ez-la de
lo! -o+ponente! en-argado! del -ontrolar el a!pe-to y el -ontenido *! de-ir2 la! -apa! no e!tn .ien
!eparada!2 y lo! de!arrolladore! en-argado! de per!onalizar el a!pe-to pueden progra+ar parte de
4un-ionalidad en-argada de +o!trar el -ontenido %eg3n el punto de vi!ta de la +ayorFa de de!arrolla#
dore! puede !er un a!pe-to negativo2 ya que la! +etodologFa! de progra+a-i'n o -ualquier de!arrolla#
dor e6peri+entado ver e!to -o+o un error en el di!eHo del CC%2 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 JordPre!! ha!ta que no !e indique en e!te
+anual2 de lo -ontrario la 4un-ionalidad e6pli-ada a -ontinua-i'n puede di4erir o in-lu!o no e6i!tir
0.1. P,%ina principal y p,%inas est,ticas
%i !e tra.aja -on el te+a original de JordPre!! e6i!ten do! po!i.ilidade! de pre!enta-i'n de la
pgina prin-ipal del .log7 +o!trar la! 3lti+a! entrada! del .log o +o!trar una pgina e!tti-a /a!
pgina! e!tti-a! 4ueron introdu-ida! anterior+ente y ahora !e +o!trar -uale! !on !u! o.jetivo!
5ra.ajando -on pgina! e!tti-a! !e -on!igue +antener perpetua+ente en el .log lo! -ontenido!
-on!iderado! +! relevante!2 independiente+ente de la 4e-ha de pu.li-a-i'n Ao !e re-o+ienda realizar
un .log !'lo -on pgina! e!tti-a!2 !i a!F 4ue!e pro.a.le+ente JordPre!! no e! el ge!tor +! ade-uado
para el !itio Je. que e!tR -on!truyendo
Ao o.!tante2 !e de.en -on!iderar alguno! in-onveniente! de la! pgina! e!tti-a!2 ya que2 al no !er
-on!iderada! entrada! de .log pierden una !erie de propiedade! -o+o !on7
Ao !e +ue!tran en lo! li!tado! -ronol'gi-o! de entrada! del .log
Ao utilizan -ategorFa! ni etiqueta!2 por ello2 no !e pueden -la!iM-ar
Ao apare-en en la! .3!queda!
*n -a+.io2 !F !e pueden organizar de +anera jerrqui-a !iendo +uy 3tile! para +anuale! en lFnea2
-ur!o!2 pgina! per!onale!2 pgina de pre!enta-i'n del .log2 et- *! +uy re-o+enda.le en -ualquier
.log aHadir alguna! pgina! e!tti-a! -on in4or+a-i'n adi-ional !o.re el propio .log %eguida+ente !e
Mdulo =e 8 Word#ress -((
-rearn alguna! pgina!
T1$7. 0--eda al +en3 de ad+ini!tra-i'n Pgina! y -ree una nueva pgina titulada ZEuien so1[
0Hada el te6to -opindolo de!de el M-hero te>tos89ordpress.t>t -uyo titulo e! #D2ina de presen8
tacin personal =uarde la pgina y -o+prue.e en el .log donde apare-e
T1$7.1. *dite la pgina de nuevo y de!pliegue la! Gp-ione! de pantalla >ver Mgura 4)?2 a-tive la
-a!illa Co+entario! y -onMg3relo! -orre-ta+ente para evitar lo! -o+entario! en e!ta pgina
T1$7.2. *dite de nuevo la pgina y utili-e el -uadro de la parte dere-ha lla+ado 0tri.uto! de
pgina para !ele--ionar di4erente! op-ione! en el -uadro de!plega.le Plantilla 5ra! ver el e4e-to
de a+.a! !o.re la pre!enta-i'n de.erFa e!-oger la Plantilla de an-ho -o+pleto2 !in laterale!2 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 JordPre!! Cree
otra pgina titulada Lcti&idades pro3esionales y otra L6ciones 0+.a! de.en tener en el -uadro
0tri.uto! de Pgina -o+o +en3 %uperior la entrada ZEuien so1[
T1$,.1. Vi!ite !u .log y -o+prue.e !i !e de!pliega ZEuien so1[ -o+o !i 4uera un +en3
T1$,.2. :e!de el +en3 de ad+ini!tra-i'n Pgina! li!te toda! la! pgina! y prue.e de!de el
+i!+o li!tado la edi-i'n rpida de la! entrada! -reada! anterior+ente :e.e e!ta.le-er el -a+po
orden de la! entrada! de 4or+a que la! aM-ione! aparez-an en pri+er lugar -uando !e de!pliegue
el +en3 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'n2 -on!iguiendo -rear un !itio Je. !in entrada! de .log2 e! de-ir2 un !itio Je. -on la pgina
de pre!enta-i'n per!onalizada y la! entrada! del .log !eparada!
T1$*. 0--eda al +en3 0ju!te! U /e-tura y -a+.ie la pgina ini-ial a una pgina e!tti-a %ele--ione
la pgina ZEuien so1[ -o+o pgina ini-ial
T1$*.1. %i navega a !u .log ver que la! pgina! hija! no apare-en ahora en el +en3 de!plega.le
de la entrada prin-ipal2 apare-en -o+o pgina! !eparada! en el +en3 0de+! !e han perdido la!
entrada! del .log y no hay enla-e ha-ia ella!
T1$*.2. Cree una nueva pgina titulada Blo2 de decoracin2 y e!ta.lez-a la plantilla a Plantilla
predeter+inada
T1$*.3. 0--eda al +en3 0ju!te! U /e-tura y e!ta.lez-a en el -uadro Pgina de entrada! la
pgina re-iRn -reada =uarde lo! -a+.io! y navegue a la pgina de ini-io de !u .log2 ver que
apare-e en el +en3 !uperior la entrada Blo2 de decoracin2 al entrar de.erFan apare-er toda! la!
entrada! de !u .log
0.2. -en?s
%e -ontinuar la per!onaliza-i'n del .log utilizando otra -ara-terF!ti-a que per+ite -rear y organizar
-() Mdulo =e 8 Word#ress
+en3! /o! +en3! !on un +e-ani!+o +! Ze6i.le que la! pgina! e!tti-a! para la organiza-i'n de lo!
enla-e! en el .log2 -on!i!tente en una organiza-i'n jerrqui-a de un -onjunto de enla-e! JordPre!!
!oporta la -rea-i'n de vario! +en3! di4erente! /a pre!enta-i'n de uno o +! +en3! en la pgina del
.log depende del te+a en u!o2 para el te+a -on el que e!t tra.ajando !'lo hay di!poni.le un +en3
!ituado en-i+a de la -ene4a de-orativa Po!terior+ente apare-ern +! +en3! -uando !e in!talen otro!
te+a!
T1'3. 0--eda al +en3 0parien-ia U Cen3! y -ree un +en3 lla+ado MenN #rincipal
T1'3.1. Carque la -a!illa $.i-a-i'n del te+a y pul!e el .ot'n =uardar Cen3 Vi!ite !u .log y
ver -o+o la .arra de +en3 ha de!apare-ido2 el +otivo e! que el +en3 re-iRn -reado e!t va-Fo
T1'3.2. Para aHadir alguno! enla-e! vuelva a la edi-i'n del +en3 ,Fje!e en la Mgura 4E2 en el
-uadro Pgina! utili-e la pe!taHa Ver todo2 !ele--ione toda! la! pgina! +ediante el enla-e elegir
todo y aHdalo al +en3 -on el .ot'n 0Hadir al +en3
!i2ura )7. Edicin de "enNs en Word#ress.
T1'3.3. 5ra! aHadir lo! ele+ento! al +en3 apare-ern en el -uadro que -ontiene el +en32 -o+o
!e +ue!tra en la en la Mgura 4E *n e!te -uadro !e puede utilizar el rat'n para reu.i-ar lo!
ele+ento! verti-al+ente 0de+!2 para -on!eguir vario! nivele! en la jerarquFa !'lo hay que
de!plazarlo! -on el rat'n ha-ia la dere-ha 9ntente dejar la e!tru-tura del +en3 -o+o la +o!trada
Mgura 4E y no olvide pul!ar el .ot'n =uardar +en3 ante! de volver a la pgina prin-ipal de !u
.log
T1'3.0. /legado a e!te punto no e6i!te ning3n enla-e ha-ia la! entrada! del .log2 !olo hay
enla-e! a pgina! e!tti-a! Para !olu-ionarlo tiene do! op-ione!2 utilizar lo! pa!o! indi-ado! en
la 51@; y e!-oger alguna de e!ta! do! !olu-ione! >quRde!e -on la !olu-i'n que -rea +!
oportuna?7
1# %ele--ione -o+o pgina prin-ipal la op-i'n 5u! 3lti+a! entrada!
2# %ele--ione -o+o Pgina de entrada! alguna de la! e6i!tente!
T1'3.$. Por 3lti+o2 de!de el +en3 de ad+ini!tra-i'n edite el +en3 prin-ipal y de!pliegue la!
Gp-ione! de pantalla para a-tivar toda! la! po!i.ilidade! que ad+ite el +en3 0Hada alguna!
entrada! del +en3 a partir del -uadro *tiqueta! y edite la *tiqueta de la entrada de +en3 para
Mdulo =e 8 Word#ress -(*
Pri+er nivel
Pri+er nivel
%egundo nivel
%egundo nivel
que -ontenga do! pala.ra!2 no !olo la etiqueta
T1'3.'. 5er+ine el +en3 !iguiendo la e!tru-tura de la Mgura 4;2 -on!idere que alguno! de lo!
ele+ento! ha-en re4eren-ia a -ategorFa!
!i2ura )<. Estructura del "enN principal del blo2.
0.3. 7id%ets
/o! <idget! en progra+a-i'n !on ele+ento! grM-o! u!ado! para -on!truir la inter4az grM-a de un
progra+a2 e!to! ele+ento! !e u.i-an en la! ventana! del progra+a2 lo! dilogo! del progra+a2 +en3!2
.arra! de herra+ienta!2 et- JordPre!! u!a e!te !F+il reMriRndo!e a 9id2ets -o+o .loque! de -ontenido
que el ad+ini!trador del .log u.i-a li.re+ente en alguna! de la! regione! di!poni.le! en la pgina Je.
generada por el CC%
5anto la! regione! di!poni.le! -o+o la u.i-a-i'n de la! +i!+a! dependen del te+a en u!o2 para el te+a
original de JordPre!! la Mgura @0 +ue!tra la! regione! e6i!tente! Con e!ta -onMgura-i'n original !e
pueden aHadir <idget! en .arra lateral prin-ipal y lo! pie! Po!terior+ente !e in!talar otro te+a -on el
que apare-ern +! regione!
T1'1. 0--eda al +en3 0parien-ia U Jidget!2 apare-er una pantalla !i+ilar a la +o!trada en la
Mgura @1 *!ta pantalla -ontiene lo! <idget! di!poni.le! para !er arra!trado! a la! rea! e6i!tente!
$na vez u.i-ado un <idget en un rea2 un +en3 de!plega.le per+ite per!onalizarlo
T1'1.1. :e!pliegue el -uadro CategorFa! utilizando el
.ot'n indi-ado en la Mgura @1 *!ta.lez-a un tFtulo y
+arque la! tre! -a!illa! Vi!ite el .log para ver el e4e-to
T1'1.2. :e!de el -uadro Jidget! di!poni.le! arra!tre el
<idget 5e6to a la zona %egunda rea de <idget! de la
pgina prin-ipal *dite e!te te6to2 -a+.ie el tFtulo a
Derec.os de autor y e!-ri.a !u no+.re
T1'1.3. Para Mnalizar aHada el <idget Au.e de etiqueta!
a %egunda rea de <idget! de la pgina prin-ipal y vi!ite
!u .log para ver el re!ultado2 de.e .u!-ar una pgina
donde !ean vi!i.le! e!ta! regione!
-(+ Mdulo =e 8 Word#ress
!i2ura *?. Disposicin de la
pD2ina en Word#ress.
Ilog de de-ora-i'n
Ilog de de-ora-i'n
9nteriori!+o
9nteriori!+o
Cl!i-o
Cl!i-o
Cini+ali!ta
Cini+ali!ta
R3!ti-o
R3!ti-o
Pintura
Pintura
Pintar interiore!
Pintar interiore!
Pintar +adera
Pintar +adera
Pintar +etale!
Pintar +etale!
VKuien !oyW
VKuien !oyW
0M-ione!
0M-ione!
0-tividad pro4e!ional
0-tividad pro4e!ional
Cen3 de nivel !uperior
Ca.e-era
Iarra
lateral
prin-ipal
area de
-ontenido
Pri+er rea
Iarra de +en3
%egunda rea l
!i2ura *-. Ld"inistracin de 9id2ets.
0.#. *emas
/o! te+a! !on el pro-edi+iento utilizado para -o+partir y reutilizar lo! di!eHo! realizado! por lo!
u!uario! y de!arrolladore! de JordPre!! /a prin-ipal -on!idera-i'n2 ya -o+entada -on anterioridad2
e!t en que lo! te+a! no !'lo -a+.ian la aparien-ia del .log2 !i no que ta+.iRn -a+.ian la 4un-iona#
lidad
Por e!te +otivo lo! te+a! de.en !er pro.ado! e6hau!tiva+ente ante! de de-idir!e por alguno g tra!
e!-oger uno y -onMgurarlo 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 aHaden +u-ha 4un-ionalidad e6tra al .log2 4un-ionalidad no e6i!tente en
otro! te+a!
/o! pri+ero! te+a! a pro.ar !on lo! que vienen -on la in!tala-i'n .a!e de JordPre!!7 ,9ent1 !ourteen
y ,9ent1 ,.irteen Co+o R!to! !oportan po-a! op-ione!2 !e in!talarn alguno! adi-ionale! que -a+.ian
total+ente la pgina prin-ipal del .log -reando una pgina ini-ial .a!ada en rea! per!onaliza.le!2
Mdulo =e 8 Word#ress -(M
:e!pliegue de -uadro!
:e!pliegue de -uadro!
0rra!tre de <idget!
0rra!tre de <idget!
rea! de <idget! y -on !oporte para +3ltiple! +en3!
T1'2. 0--eda al +en3 de ad+ini!tra-i'n 0parien-ia U 5e+a! y a-tive el te+a ,9ent1 !ourteen *!te
e! el te+a predeter+inado de la ver!i'n a-tual de JordPre!!
T1'2.1. Aavegue !u .log para ver la nueva aparien-ia2 a--eda a la ad+ini!tra-i'n de +en3! para
a-tivar el +en3 -reado anterior+ente ya que ha.r de!apare-ido
T1'2.2. *dite la! entrada! ya -reada! del .log y utili-e el -uadro 9+agen de!ta-ada para
!ele--ionar i+gene! de pequeHo ta+aHo repre!entativa! de -ada entrada 5ra! navegar el .log
de.erFan apare-er e!ta! i+gene! junto -on la! entrada!
T1'2.3. *dite de nuevo alguna entrada del .log y .u!que el -uadro de 4or+ato2 -+.ielo a
Cinientrada y en la pgina que li!ta la! entrada! del .log -o+prue.e el e4e-to
T1'2.0. 0d+ini!tre lo! <idget! para -o+pro.ar la! di4erente! rea! e6i!tente! en e!te te+a2
ver que !on di4erente! que -on el te+a u!ado anterior+ente :e.e arra!trar <idget! a toda! la!
rea! para vi!ualizar la u.i-a-i'n de -ada una
T1'3. 0--eda al +en3 de ad+ini!tra-i'n 0parien-ia U 5e+a! y u!e el enla-e 0Hadir un te+a nuevo
Iu!que el te+a responsi&e e in!tlelo 0-tive el te+a 4esponsi&e y ver que e!te te+a -ontiene gran
-antidad de 4un-ionalidad Aavegue !u .log ante! de -onMgurar nada2 ver -o+o trae una pgina de
ini-io di4erente y -o+pleta+ente per!onaliza.le
T1'3.1. Per!onali-e la pgina de!de el +en3 de ad+ini!tra-i'n 0parien-ia U Gp-ione! del te+a
ConMgure -orre-ta+ente la pgina de ini-io2 el logotipo y de!a-tive el .ot'n lla+ada a la a--i'n
en *le+ento! del te+a
T1'3.2. 0d+ini!tre lo! 4 +en3! e6i!tente!2 para ello en 0parien-ia U Cen3! vi!ite la pe!taHa
=e!tionar lugare! 0verigXe donde !e u.i-a -ada uno de ello!2 no todo! e!tn pen!ado! para !er
+en3! +ultinivel2 en el !uperior ponga la! entrada!7 Mapa del sitio2 Contacto y 0otas le2ales
T1'3.3. 5er+ine de per!onalizar la pgina aHadiendo <idget! a la! rea! de <idget! lla+ada!
Jidget 1 de la pgina ini-ial2 Jidget 2 de la pgina ini-ial y Jidget 1 de la pgina ini-ial.
T1'0. ,inal+ente prue.e lo! te+a! disco&er y pinboard y de!-u.ra la 4un-ionalidad e6tra que traen
0.0. Creaci6n de temas
Crear nuevo! te+a! para JordPre!! requiere -ono-i+iento! de PDP al e!tar lo! te+a! -o+pue!to!
de plantilla! he-ha! en e!te lenguaje 0de+! de la! plantilla! en PDP lo! te+a! in-luyen diver!a! hoja!
de e!tilo C%% que deMnen el a!pe-to Mnal del .log
:e!de la propia la inter4az Je. de ad+ini!tra-i'n !e puede -a+.iar -ualquiera de lo! te+a! pre!ente!
en el .log2 pero no !'lo pre!enta diM-ultad realizarlo de!de el navegador2 !ino que en -a!o de -o+eter
errore!2 lo! -a+.io! !on per+anente! en el te+a original Para evitar e!te 3lti+o pro.le+a y !i+pliM-ar
la +odiM-a-i'n de lo! te+a! e6i!tente! apare-e en JordPre!! >y en otro! CC%? un pro-edi+iento
-(7 Mdulo =e 8 Word#ress
alternativo lla+ado !u.te+a -on el que !e evita la ne-e!idad de ini-iar el de!arrollo un te+a de!de -ero
/a idea de un !u.te+a e! partir de uno ya e6i!tente y pare-ido en !u +ayor parte al de!eado2 ya !ea por
aparien-ia o 4un-ionalidad
0 -ontinua-i'n !e pre!entarn la! op-ione! +! relevante! en lo! te+a! de JordPre!! y !e -rear un
!u.te+a partiendo de uno ya e6i!tente
T1'$. :e!de el +en3 de ad+ini!tra-i'n navegue a 0parien-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'$.1. %ele--ione en e!ta +i!+a pgina2 en la parte in4erior Doja de e!tilo! R5/ >rtl-!!? *n el
-uadro de edi-i'n puede ver la +ultitud de regla! que -ontrolan el a!pe-to del te+a Ao -a+.ie
nada aquF pue!to que lo! -a+.io! !erFan per+anente! en e!te te+a
T1'$.2. 9n!tale y a-tive el te+a /eeSt1le de!de el ar-hivo /eest1le.-.=./ip !u+ini!trado -on el
+aterial del -ur!o :e.e .u!-ar un .ot'n titulado %u.ir te+a en la zona de ad+ini!tra-i'n de
te+a! Aavegue !u .log para ver el nuevo a!pe-to en detalle
T1'$.3. Aavegue al +en3 de ad+ini!tra-i'n 0parien-ia U 5he+e Gption! para repa!ar la
+ultitud de op-ione! de e!te te+a
T1'$.0. Pro-edere+o! a -rear un !u.te+a .a!ado en e!te 3lti+o Con el e6plorador de ar-hivo!
de Jindo<! a.ra la -arpeta <p#-ontent U the+e! de !u in!tala-i'n de JordPre!! *!ta -arpeta
-ontiene lo! te+a! di!poni.le! -ada uno en una -arpeta di4erente
T1'$.$. Cree una nueva -arpeta lla+ada cursoc"s 0.ra AotepadBB2 en un nuevo M-hero va-Fo
introduz-a el -'digo 44 y guarde e!te M-hero -on el no+.re st1le.css dentro de la -arpeta re-iRn
-reada >cursoc"s?
?Y
T*e3e I+3e0 C+rso CM1
Description0 Mi te:! p!dre es Meesty$e
#.t*or0 -!+$ino "+iM de C$!#i2o V0MD+eM
Te3pl+te0 Meesty$e
Y?
=i3port +r$(P..?Meesty$e?sty$e.cssP)O
Cdi2o )). Contenido del 6c.ero st1le.css para crear un te"a .i:o del te"a padre /eest1le.
T1'$.'. Aavegue al +en3 de ad+ini!tra-i'n de !u .log 0parien-ia U 5e+a!2 -o+prue.e !i apare#
-e en el li!tado de te+a! !u nuevo te+a y a-tFvelo
T1'$.7. Vuelva a 0parien-ia U 5he+e Gption! y ver -o+o a pe!ar de e!tar a-tivo !u nuevo
te+a2 e!te -on!erva toda! la! -ara-terF!ti-a! del te+a padre
T1'$.,. 0--eda al +en3 de ad+ini!tra-i'n 0parien-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! !on del te+a padre %'lo puede editar
el ar-hivo st1le.css -reado anterior+ente
Mdulo =e 8 Word#ress -(<
/legado a e!te punto el M-hero st1le.css del nuevo te+a e! el lugar donde aHadir toda! la! regla! C%%
ha!ta -on!eguir la aparien-ia del .log de!eada
T1''. Para realizar alguna! +odiM-a-ione! utilizare+o! ,ire.ug 0-tFvelo y navegando a la pgina
ini-ial de !u .log u!e la pe!taHa D5C/ para ver el r.ol de -'digo D5C/ y el .u!-ador de ,ire.ug
:e.e lo-alizar lo! !iguiente! 9:! de -aja y vi!ualizar el rea de pgina a4e-tada7 Zwr!pper2 Zwr!p2
Zcontent y Zside(!r
T1''.1. $na vez lo-alizada! e!ta! -aja! de.e tener una vi!i'n de la -o+po!i-i'n de la pgina en
di4erente! rea! *li+inare+o! el 4ondo de la envoltura del .log -on el !ele-tor Zwr!pper2 de.e
aHadir la !iguiente regla al M-hero st1le.css del !u.te+a7 Zwr!pper W (!cVgro+nd=
co$or%tr!nsp!rentOX
T1''.2. Con el eje+plo anterior ha -o+pro.ado -o+o la! regla! e!-rita! en !u !u.te+a tienen
prioridad 4rente a la! originale! 9ntente au+entar el hue-o de !epara-i'n entre lo! .loque!
Zcontent y Zside(!r aHadiendo nueva! regla! a !u hoja de e!tilo2 ay3de!e de ,ire.ug para
averiguar la! propiedade! de.e alterar Puede realizar lo! -a+.io! de!de ,ire.ug y de!puR!
-opiarlo! en el M-hero st1le.css
T1'7. Pro.are+o! alguno! e4e-to! de C%%1 -o+o re!plandore! y gradiente!
T1'7.1. *l pri+er e4e-to -on!i!te en utilizar la propiedad de !o+.ra! para -rear un e4e-to de
re!plandor /o-ali-e -on ,ire.ug la -la!e 9id2et apli-ada a todo! lo! <idget! pre!entado! en la
pgina
T1'7.2. Cree una nueva regla en el M-hero st1le.css para au+entar el +argen en la! -aja! de lo!
<idget!7 .widget W :!rgin% >0p)OX. Re-argue la pgina para ver !i el e!tilo !e ha apli-ado
-orre-ta+ente
T1'7.3. $tilizando la e6ten!i'n de ,ire4o6 Colorzilla !ele--ione el +en3 %ele-tor de -olor para
o.tener un -'digo de -olor de un a+arillo -laro 0Hada a la regla anterior la propiedad (o)=
sh!dow% 0p) 0p) 20p) Z______O !u!tituyendo la! interroga-ione! por el -'digo de -olor o.tenido
Re-argue la pgina para ver un e4e-to de re!plandor
T1'7.0. *n C%%1 la !inta6i! de lo! gradiente! e! -o+pleja2 Colorzilla trae una herra+ienta de
ayuda para generar gradiente! a la que !e a--ede de!de el +en3 de Colorzilla C%% =radient
=enerator2 utilF-elo para generar un gradiente que apli-are+o! a la! -a.e-era! de lo! <idget!
T1'7.$. ,Fje!e -o+o el -'digo C%% generado e! +uy -o+plejo2 e!t pen!ado para que 4un-ione
-orre-ta+ente en la +ayorFa de lo! navegadore! ya que C%%1 no e!t i+ple+entado en todo!
a-tual+ente Cree una nueva regla .widgettit$e W ` X y pegue el -ontenido C%% generado ahF
5ra! re-argar la pgina !i no apare-e el gradiente2 -o+prue.e -on ,ire.ug -ual e! el pro.le+a
>nota7 el !ele-tor Zside(!r .widgettit$e tiene +! prioridad?
T1'7.'. :e toda! la! propiedade! C%% generada! hay una que e! e!tndar2 indi-ada -o+o J1C
Prue.e eli+inar de la regla C%% toda! la! propiedade! +eno! la J1C y -o+prue.e en di4erente!
navegadore! !i el gradiente e! !oportado
-)? Mdulo =e 8 Word#ress
T1'7.7. ,inal+ente !e pro.ar otro e4e-to -on la! tipogra4Fa! !o.re el tFtulo del .log $tili-e
,ire.ug para o.tener un !ele-tor para el tFtulo de la -a.e-era del .log $!ando e!e !ele-tor
aplique la !iguiente! propiedade! indi-ada! en el -'digo 4@2 el o.jetivo e! o.tener un +ar-o
a+plio en .lan-o alrededor del tFtulo para poder o.!ervar el e4e-to -on -laridad
JEelectorH W
-+c(gro.nd/color0ZFFFFFF1
-order/r+di.s0 _p)1
p+dding0_p) _p) _p) _p)1
te7t/s*+do;00 1p) 1p) Z000E 0 =1p) 1p) Z000E 1p) 0 1p) Z000E =1p) 0 1p) Z0001
color0 Zfff1
X
Cdi2o )*. E3ecto outline sobre la tipo2ra3Ca.
8- 3lu:i#.
/o! -o+ple+ento! de!arrollado! por ter-ero! en JordPre!! !e deno+inan #lu2ins /o! plugin!
aHaden o -a+.ian 4un-ionalidad al CC% pero e! i+portante veriM-ar el e!tado de de!arrollo y
+anteni+iento ante! de de-idir !u u!o en el .log *l +anteni+iento del .log y la! a-tualiza-ione!
generarn pro.le+a! !i !e u!an -o+ple+ento! de!a-tualizado! o a.andonado!
*6i!ten +ultitud de -o+ple+ento! en la pgina oM-ial de JordPre!! y de!de lo! propio! +en3! de
ad+ini!tra-i'n del .log !e pueden .u!-ar e in!talar Co+o eje+plo !e propone in!talar iper\s ideo
Wuic@ta2s que 4a-ilita la in!er-i'n de vFdeo! de 4uente! e6terna! en el .log 5a+.iRn !e re-o+ienda
in!talar el -one-tor %C5P de 51)E2 para !u po!terior u!o en la !e--i'n (1
T1',. 0--eda al +en3 Plugin! U 0Hadir nuevo2 en el -uadro de .3!queda te-lee &ideo e in!tale
iper\s ideo Wuic@ta2 ReMne la .3!queda !i e! ne-e!ario para en-ontrar di-ho -o+ple+ento
T1',.1. $na vez in!talado y a-tivado -ree una nueva entrada en el .log G.!erve en el editor lo!
nuevo! i-ono! e6i!tente! para in-luir vFdeo! e6terno! Pul!e el i-ono de gou5u.e > ? y apare-er
un -uadro donde de.e -olo-ar la $R/ del vFdeo que de!ee in!ertar2 navegue gou5u.e y !ele--ione
un vFdeo %olo tiene que -opiar la $R/ del vFdeo en el -uadro anterior
T1',.2. 9n!tale ahora el plugin lla+ado SM,# *!te -o+ple+ento per+ite u!ar un !ervidor de
-orreo e6terno en el .log
T1',.3. 0--eda al +en3 0ju!te! y ver una nueva entrada -on el no+.re de e!te -o+ple+ento
ConMgure el !ervidor de -orreo e6terno di!poni.le durante el -ur!o $!e el .ot'n %end para
-o+pro.ar !i la -onMgura-i'n e! -orre-ta
T1',.0. Prue.e lo! plugin! para rede! !o-iale! di!poni.le!
=- O0$io#e. ava#7ada.
*!ta !e--i'n de!-ri.e la! op-ione! de ad+ini!tra-i'n avanzada! +! -o+une! -on!iderada! i+por#
tante! -uando !e pretende poner un .log p3.li-o en la red Por orden de i+portan-ia !e re-o+ienda
Mdulo =e 8 Word#ress -)-
pre!tar e!pe-ial aten-i'n a la! $R/! a+iga.le! y a lo! trac@bac@s8pin2bac@s al e!tar +uy ligada! a la
vi!i.ilidad del un .log en la red y por tanto al R6ito del +i!+o 5a+.iRn el pro-e!o de -lona-i'n del .log
para !u pue!ta en e6plota-i'n pre!enta alguna! pe-uliaridade!
3.1. @.Ls ami%ables
$na $R/ e! -on!iderada a+iga.le
)
-uando e!t 4or+ada por pala.ra! 4-il+ente entendi.le! por el
u!uario y rela-ionada! -on el -ontenido +o!trado 5odo! lo! CC% !on pgina! Je. din+i-a! donde la!
varia.le! !e pa!an en la $R/ tra! el -ar-ter SWT llegando a !er la $R/ e6ten!a y di4F-il de re-ordar
Para entenderlo +ejor2 !i navega !u .log y a--ede alguna entrada ver una $R/ del tipo
http788lo-alho!t8<ordpre!!8Wpb101 -onvertir e!ta $R/ en a+iga.le -on!i!te en !u!tituir SWpb101T por
pala.ra! rela-ionada! -on la entrada por eje+plo http788lo-alho!t8<ordpre!!8pintar#-on#.ro-h a
/a! ventaja! de e!te tipo de $R/! no !'lo e! para lo! vi!itante! del !itio Je.2 lo! +otore! de .3!queda
-on!ideran +! relevante! e!te tipo de dire--ione! Je.2 !ie+pre y -uando no !e a.u!e del n3+ero de
pala.ra! u!ada! *n JordPre!! !e utiliza el tRr+ino slu2 -o+o re4eren-ia a la $R/ a+iga.le y !e
per+ite e!pe-iM-ar !lug! para +u-ho! ele+ento! del .log7 entrada! de .log2 pgina!2 -ategorFa! y
etiqueta!
T1'*. Aavegue ha!ta el +en3 de ad+ini!tra-i'n 0ju!te! U *nla-e! per+anente! y !ele--ione la
op-i'n Ao+.re de entrada
T1'*.1. 5ra! guardar lo! -a+.io! navegue !u .log y veriMque !i lo! enla-e! 4un-ionan -orre-ta#
+ente
T1'*.2. *dite alguna entrada de !u .log y a-tive la -a!illa %lug !ituada en Gp-ione! de pantalla
de la pgina de edi-i'n de entrada! 0unque el -a+po slu2 e! generado auto+ti-a+ente
-+.ielo +anual+ente
T1'*.3. 0--eda de nuevo 0ju!te! U *nla-e! per+anente! y e!ta.lez-a en *!tru-tura per!onali#
zada el !iguiente te6to7 8c-ategoryc8cpo!tna+ec8 *!ta e! una de la! +ejore! op-ione! ya que
e!tru-tura la! $R/! del !itio Je. !eg3n la! -ategorFa! de la! entrada! del .log
T1'*.0. Aavegue el .log y o.!erve la! $R/! de!plegando lo! +en3! de la! !e--ione! del .log
3.2. *rac:bac:s y Pin%bac:s
/o! 5ra-L.a-L! y Ping.a-L! !on +Rtodo! para interrela-ionar .log! y !u 4un-i'n e! avi!ar a un autor
!i otro autor e!t ha.lando !o.re Rl *n !u origen 4ueron de!arrollado! -o+o plugin! adi-ionale! pero
e!tn a-tual+ente in-luido! en el n3-leo de JordPre!!
*n la Je. e6i!te +ultitud de do-u+enta-i'n !o.re e!te te+a y !ie+pre apare-e un +i!+o eje+plo que
intenta pre!entar el 4un-iona+iento de e!to! +e-ani!+o!2 e!te eje+plo e! el !iguiente7
) 5a+.iRn !e deno+ina $R/ !e+nti-a
-)= Mdulo =e 8 Word#ress
I"a2ine"os un autor L Eue escribe sobre un co"ple"ento de 3oto Dlbu" del
CMS Too"la en un blo2 Eue trata el CMS lla"ado Too"la.
Ftra persona B escribe sobre di3erentes 3or"as de .acer 3oto Dlbu"es 1 re3erencia al
autor L desde su blo2 indicando co"o se .ace usando el CMS Too"la.
5ra! pu.li-ar la entrada la per!ona I el autor 0 re-i.e un ping.a-L e+itido auto+ti-a+ente por el .log
de e!ta per!ona de!-ono-ida Cientra! el ping.a-L e! un pro-e!o auto+ti-o2 el tra-L.a-L e! un
pro-e!o 4orzado por la per!ona I -on!i!tente en aHadir a !u entrada de Ilog in4or+a-i'n adi-ional
in-luyendo una $R/! del .log del autor 0 para lla+ar al pro-edi+iento de tra-L.a-L a+.o! !e pueden
-on!ultar en el e!-ritorio de ad+ini!tra-i'n de JordPre!! y aunque dependen de la plantilla utilizada2
lo! ping.a-L! y tra-L.a-L! ha.itual+ente apare-en en lo! -o+entario! de la! entrada! auto+ti-a#
+ente
Para realizar prue.a! !e re-o+ienda tener el .log operativo en una dire--i'n que no !ea lo-al >lo-alho!t?
para poder enviar tra-L.a-L! de!de otro .log2 otra op-i'n e! in!talar do! JordPre!! lo-al+ente en
di4erente! $R/!
T173. G.tenga la dire--i'n 9P de !u ordenador y 3!ela para e!ta.le-er en el +en3 de ad+ini!tra-i'n
0ju!te! U =enerale! la! dire--ione! :ire--i'n de JordPre!! >$R/? y :ire--i'n del !itio >$R/? :e.e
-a+.iar la pala.ra local.ost por !u dire--i'n 9P
T173.1. Aavegue el .log de alg3n -o+paHero que haya realizado el pa!o anterior y -apture la
$R/ de una entrada del .log del -o+paHero
T173.2. *dite alguna entrada de !u .log2 en Gp-ione! de pantalla a-tive la -a!illa *nviar
tra-L.a-L! y apare-er un -uadro en la pgina donde puede e!-ri.ir la $R/ del tra-L.a-L /a
$R/ -on!i!te en aHadir a la dire--i'n del -o+paHero la -oletilla S8tra-L.a-LT2 pero !'lo 4un-iona#
r !i e!tn a-tiva! la! $R/! a+iga.le!
T173.3. Pu.lique la entrada de nuevo y pida a !u -o+paHero que entre en la ad+ini!tra-i'n del
.log *n *!-ritorio o en Co+entario! de.erFa apare-er un -o+entario pendiente de +odera-i'n
-o+o el +o!trado en la Mgura @2 indi-ando que !e trata de un tra-L.a-L
!i2ura *=. 0oti6caciones de trac@bac@s.
Mdulo =e 8 Word#ress -)(
3.3. esti6n de usuarios
*l !oporte +ultiu!uario de JordPre!! e!t .a!ado en la utiliza-i'n de role! para lo! di4erente!
u!uario! del .log /a pri+era de-i!i'n ante! de la pue!ta en 4un-iona+iento de un .log e! !i ha.ilitar el
regi!tro de u!uario! o aHadir lo! u!uario! +anual+ente
*l -on-epto de rol en lo! CC% -on!i!te en un -onjunto de per+i!o! agrupado! a lo! que !e le! da un
no+.re *n el -a!o de JordPre!! e6i!ten e!to! role! predeter+inado!7
%u!-riptor7 *! el rol -on +eno! per+i!o!2 !'lo puede -a+.iar !u perMl
Cola.orador7 Puede -rear -ontenido pero2 para pu.li-arlo2 el ad+ini!trador de.e apro.arlo
0utor7 Puede -rear y pu.li-ar !u! propia! entrada! de .log2 y ta+.iRn puede !u.ir ar-hivo!
*ditor7 5iene privilegio! para -rear y pu.li-ar entrada! y pgina! del .log 5a+.iRn puede editar y
pu.li-ar -ontenido no -reado por Rl 0de+! puede +oderar -o+entario!2 +odiM-ar -ategorFa!2
enla-e!2 et-
0d+ini!trador7 5iene privilegio! para a--eder a lo! +en3! de ad+ini!tra-i'n del .log
Ao !e pro4undizar en el -ontrol de u!uario! y role!2 pero !F !e realizarn alguna! prue.a! .!i-a! a
-ontinua-i'n
T171. 0--eda de!de el +en3 ad+ini!tra-i'n a 0ju!te! U =enerale! y ha.ilite la op-i'n Cualquiera
puede regi!trar!e
T171.1. Cierre la !e!i'n de ad+ini!trador y regi!tre un nuevo u!uario %'lo 4un-ionar !i ha
-onMgurado -orre-ta+ente el -o+ple+ento de envFo de -orreo in!talado en 51)E2
T171.2. /ea el -orreo ele-tr'ni-o para poder ini-iar la !e!i'n en JordPre!! 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
T171.3. Co+o ad+ini!trador a--eda al .log y en el +en3 de ad+ini!tra-i'n a--eda a $!uario! U
5odo! lo! u!uario! para editar el perMl del nuevo u!uario
T171.0. Ca+.ie el rol de e!te u!uario a Colaborador2 y a--ediendo -on el nuevo u!uario vea !i
puede agregar entrada! en el .log VPuede pu.li-ar la nueva entradaW
T171.$. Vuelva a entrar -o+o ad+ini!trador y repita la opera-i'n pro.ando el re!to de lo! role!
e6i!tente!
3.#. Clonaci6n del sitio
%e realizar la -lona-i'n del !itio para !u pue!ta en e6plota-i'n en el !ervidor de 9nternet di!poni.le
durante el -ur!o *l pro-edi+iento -o+3n en -ualquier CC% -on te-nologFa PDP8Cy%K/ e! -opiar lo!
M-hero! al !ervidor e i+portar la .a!e de dato!
Con JordPre!! hay que realizar alguno! pa!o! adi-ionale!2 en pri+er lugar !e de.e editar un ar-hivo de
-onMgura-i'n PDP para e!ta.le-er todo! lo! valore! de -one6i'n a la .a!e de dato! y ade+! la .a!e de
-)) Mdulo =e 8 Word#ress
dato! no !e puede !er i+portada tal -ual JordPre!! al+a-ena en la .a!e de dato! la $R/ del .log en
nu+ero!o! regi!tro!2 hay que -a+.iar toda! e!ta! dire--ione! por la nueva dire--i'n del .log
T172. Cone-te +ediante ,5P al !ervidor re+oto para !u.ir todo! !u! ar-hivo! lo-ale! de JordPre!!
%e re-o+ienda -rear una -arpeta nueva en el !ervidor re+oto para JordPre!!2 de lo -ontrario
de.er .orrar -ualquier otro -ontenido y el .orrado ,5P e! lento
T172.1. Cientra! lo! ar-hivo! !e -opian por ,5P puede ir e6portando la .a!e de dato! lo-al de
JordPre!! *n la e6porta-i'n no e6porte la .a!e de dato! -o+pleta2 de.e !ele--ionar toda! la!
ta.la! y e6portar la! ta.la! ,Fje!e en la Mgura @1 para o.tener un M-hero .sEl para !u po!terior
edi-i'n
T172.2. *dite -on AotepadBB el M-hero o.tenido >9ordpress.sEl? para ree+plazar toda! la!
$R/! e6i!tente! por la nueva dire--i'n de !u .log Con AotepadBB utili-e el +en3 Iu!-ar U
Ree+plazar y ver el dilogo +o!trado en la Mgura @12 4Fje!e -o+o !e ha ree+plazado la dire--i'n
antigua http788lo-alho!t8+2e8<ordpre!! por http788pro4e!orzopeplonee!8<ordpre!!2 pul!ando
Ree+plazar todo quedar el M-hero pro-e!ado
T172.3. Aavegue a la dire--i'n Je. de phpCy0d+in del !ervidor de 9nternet e i+porte el
M-hero .sEl que a-a.a de +odiM-ar
!i2ura *(. E>portacin de tablas de Word#ress.
Mdulo =e 8 Word#ress -)*
*6portar
!i2ura *). Sustitucin "anual en un 6c.ero SWL.
T172.0. %i navega la dire--i'n Je. donde ha in!talado JordPre!! o.tendr el +en!aje Error
estableciendo una cone>in con la base de datos $tilizando AotepadBB -one-te al !ervidor ,5P
-on el plugin 0pp!,# y edite el M-hero re+oto 9p8con62.p.p de la raFz de la in!tala-i'n de
JordPre!! :e.e .u!-ar y e!ta.le-er -orre-ta+ente el 4rag+ento de -'digo 4)
?YY /$ no:(re de t+ (!se de d!tos de Word-ress Y?
define(P3IR4.M/PE PHHHHP)O
?YY <+ no:(re de +s+!rio de My1bC Y?
define(P3IR'1/"PE PHHHHP)O
?YY <+ contr!se^! de My1bC Y?
define(P3IR-.11WL"3PE PHHHHP)O
Cdi2o )+. !ra2"ento del 6c.ero de con62uracin 9p8con62.p.p de Word#ress.
T172.$. Aavegue a la dire--i'n de 9nternet de !u .log y vi!uali-e el -ontenido %iga lo! enla-e!
de lo! +en3!2 !i 4allan de.e entrar en la ad+ini!tra-i'n del .log u!ando la dire--i'n http7888<p#
ad+in y en el +en3 0ju!te! U =enerale! e!ta.le-er de nuevo la! dire--ione! $R/
3.0. 5tras caracter2sticas
Gtro u!o -o+3n de lo! .log! e! la -rea-i'n de 4oto.log!2 aunque e6i!ten CC% dedi-ado! a e!te Mn2
in!talando alguno! -o+ple+ento! -o+o VL#B y #.otoW #.otoblo2 !e puede utilizar JordPre!! -o+o 4oto
.log
Gtra -ara-terF!ti-a intere!ante e! la po!i.ilidad de -rear un !itio +ulti.log2 e! un po-o +! -o+plejo
pero !e puede en-ontrar +ultitud de in4or+a-i'n en 9nternet al re!pe-to y tutoriale! 4-ile! de !eguir
-)+ Mdulo =e 8 Word#ress
Ao !e entrar en detalle en e!ta -ue!ti'n
Por 3lti+o2 entre la! op-ione! de ad+ini!tra-i'n e6i!tente! en JordPre!! no tratada! -on anterioridad
-a.en de!ta-ar7 i+porta-i'n 8 e6porta-i'n de -ontenido!2 -rea-i'n de !itio! Je. +ulti.log y herra+ien#
ta! para -rea-i'n de .log +ultilingXe!
T173. 9n!tale lo! -o+ple+ento! Vet Lnot.er #.otoblo2 o #.otoblo2 para intentar -rear un 4oto.log
T170. 0--eda al +en3 de ad+ini!tra-i'n Derra+ienta! U *6portar y e6porte la! pgina! de !u .log
T170.1. 0hora navegue a Derra+ienta! U 9+portar donde !e li!tan lo! di4erente! -o+ple+ento!
para i+portar -ontenido! en JordPre!! 9n!tale el 3lti+o lla+ado JordPre!!2 -on e!te -o+ple#
+ento podr i+portar el M-hero e6portado anterior+ente
T170.2. 0--eda a Derra+ienta! U 9+portar y u!e la op-i'n R%% 5ra! in!talarla !e le !oli-ita un
ar-hivo2 pul!e e6a+inar pero en vez de !ele--ionar un ar-hivo pegue la !iguiente $R/7
http7884eed!4eed.urner-o+80ndroid0yuda Pul!e 0.rir2 e!pere uno! !egundo!2 y u!e el .ot'n
%u.ir ar-hivo e i+portar %i todo ha ido .ien a-a.a de i+portar +ediante R%% toda! la!
novedade! del otro Ilog
T17$. 9n!tale y prue.e el -o+ple+ento W#ML Wid2ets para -rea-i'n de !itio! .ilingXe! y
+ultilingXe!
>- Re*e(e#$ia.
PRe4 41Q Je. oM-ial de JordPre!! en *!paHol2 <http788e!<ordpre!!org8"
PRe4 44Q :o-u+enta-i'n oM-ial de JordPre!!2 <http788-ode6<ordpre!!org8e!7CainOPage"
PRe4 4@Q *!pe-iM-a-i'n oM-ial de Ping.a-L2 <http788<<<hi6ie-h8!pe-!8ping.a-L8ping.a-L"
Mdulo =e 8 Word#ress -)M
&4dulo 2a ' Joo/la
Portales +eb -asados en 6oo$la
- Re.u/e#
:ura-i'n e!ti+ada 4 hora!
2ic-ero 1e!cri.cin
&oo+laO110#%ta.le#,ullOPa-Lagezip &oo+la 9n!tala.le
e!#*%Ojoo+laOlangO4ullO110v1zip 5radu--i'n de &oo+la a *!paHol
re-ur!o!#joo+lazip 9+gene! y te6to! para utilizar en lo! -ontenido!
joo+la#pro4e!orzip2 joo+laOpro4e!or!qlzip Clona-i'n del !itio Je. del pro4e!or
-aptura#plantillapng Captura de la plantilla a realizar
uniteOhorizontalO-arou!elO12zip *6ten!i'n para +o!trar -arru!ele! de i+gene!
,abla =-. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
*l portal Je. !urge tra! la ne-e!idad de integrar en un !itio Je. di4erente! !ervi-io! o4re-ido! por
ge!tore! de -ontenido! dedi-ado! $n portal Je. de!de el punto de vi!ta del u!uario pre!enta la
in4or+a-i'n de +anera ho+ogRnea tanto en el a!pe-to -o+o en la 4un-ionalidad2 y de!de el punto de
vi!ta del ad+ini!trador -entraliza toda la ge!ti'n de lo! di4erente! !ervi-io! di!poni.le! en el !itio
*n lo! CC% e!tudiado! ha!ta ahora lo! tipo! de -ontenido! alojado! e!ta.an rela-ionado! -on el tipo de
CC% -on el que !e tra.aja *n el -a!o del ge!tor de 4oro! !e +aneja.an 4oro! y !u.4oro! -on +en!aje! de
u!uario!2 -uando !e tra.aja -on ge!tore! de -ontenido! para -o+er-io ele-tr'ni-o prin-ipal+ente !e
tra.aja -on produ-to! organizado! en di4erente! -ategorFa! y a!F !u-ede -on todo! lo! CC% dedi-ado!
Rev 4(2)
*n -a+.io2 un CC% para portale! Je. e!t di!eHado para tra.ajar -on di4erente! tipo! de -ontenido!
-o+o pueden !er noti-ia!2 +anuale! de u!uario!2 galerFa! de i+gene!2 ar-hivo! .inario!2 et- *!to!
CC% !uelen traer en !u in!tala-i'n .!i-a !'lo alguno! de e!to! tipo! de -ontenido dejando al ad+ini!#
trador o de!arrollador la po!i.ilidad de in-luir +!2 .ien aHadiendo 4un-ionalidad di!poni.le o .ien
de!arrollando nuevo! -o+ple+ento!
*l R6ito de un CC% para portale! Je. radi-a en !u Ze6i.ilidad2 4a-ilitan a lo! di!eHadore!2 de!arrolla#
dore! y ad+ini!tradore! el pro-e!o de adapta-i'n del portal a !u! ne-e!idade! *!to! CC% -u.ren un
a+plio a.ani-o de po!i.ilidade! de u!o2 y para -on!eguirlo optan por 4a-ilitar el de!arrollo e in!tala-i'n
de -o+ple+ento! -apa-e! de +odiM-ar o aHadir -ualquier nueva 4un-ionalidad
Gtro a!pe-to i+portante en lo! portale! Je. e! la ge!ti'n de la in4or+a-i'n2 nor+al+ente !e llegan a
al-anzar vol3+ene! -on!idera.le! -on e!to! CC% *!to +otiva el u!o de lo! lla+ado! +etadato!
a-tual+ente e!tandarizado! en +odelo! lla+ado! :u.linCore PRe4 4)Q2 R:, PRe4 4(Q2 et- y !on
in-luido! general+ente -o+o parte 4unda+ental de lo! tipo! de -ontenido /o! +etadato! !on
in4or+a-i'n adi-ional !o.re la propia in4or+a-i'n2 -o+o por eje+plo7 autor2 4e-ha de -rea-i'n2 idio+a2
et- *!to! +etadato!2 utilizado! ade-uada+ente2 !on -ru-iale! para au+entar la vi!i.ilidad del !itio Je.
ya que lo! .u!-adore! de 9nternet !on -apa-e! de re-opilar in4or+a-i'n de!de el CC% re-ono-iendo e
inde6ando dato! -o+o autor8e!2 4e-ha! de pu.li-a-i'n2 idio+a2 li-en-ia!2 et-
$tilizare+o! &oo+la -o+o punto de ini-io a lo! CC% para portale! Je. ya que e! .a!tante .!i-o en la
4un-ionalidad2 -'+odo en la ad+ini!tra-i'n y 4a-ilita en gran +edida el -ontrol de la pre!enta-i'n
:e!ta-a en e!te 3lti+o a!pe-to por !u gran Ze6i.ilidad *n -ontra partida trae una po.re ge!ti'n de
u!uario! y e! .a!tante rFgido en la organiza-i'n de la in4or+a-i'n dentro del portal
0 lo largo del -ur!o o.!ervare+o! grande! di4eren-ia! entre lo! CC% para portale! e!tudiado!2 pero
todo! ello! in-luyen al +eno! la! -ara-terF!ti-a! de!-rita! en e!ta introdu--i'n
2- I#.%ala$i4#
5ra.ajare+o! -on la ra+a 11 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 diM-ultad2 !eguire+o! lo! pa!o! ha.ituale!
T17'. :e!-argue la 3lti+a ver!i'n de la ra+a 11 de!de la pgina oM-ial de &oo+la PRe4 4EQ o utili-e
el ar-hivo !u+ini!trado -on e!te +'dulo :e!-o+prF+alo en una nueva -arpeta2 por eje+plo :oo"la2
dentro de la -arpeta .tdocs de Iitna+i
T17'.1. Cree un nuevo u!uario y una nueva .a!e de dato! a!o-iada de!de phpCy0d+in
utilizando el pro-edi+iento ha.itual
T17'.2. Aavegue a la dire--i'n http788lo-alho!t8joo+la para realizar la in!tala-i'n2 n'te!e -o+o
el pro-e!o de in!tala-i'n !e puede realizar en -a!tellano 9n!tale el -ontenido de eje+plo titulado
:ato! de eje+plo predete+inado! en inglR! re-o+endado en lo! pa!o! de in!tala-i'n
T17'.3. 0nte! de ter+inar la in!tala-i'n in!tale el idio+a u!ando el .ot'n Pa!o! e6tra7in!talar
-*? Mdulo (a 8 Too"la
idio+a! y !ele--ione -o+o idio+a por de4e-to %pani!h
T17'.0. 5ra! Mnalizar la in!tala-i'n !e de.e !eguir la indi-a-i'n para .orrar la -arpeta de in!tala#
-i'n2 de lo -ontrario2 &oo+la no 4un-ionar
T17'.$. Aavegue por el !itio re-iRn in!talado
0nte! de -ontinuar -on la ad+ini!tra-i'n e! re-o+enda.le -o+pro.ar el e!tado de la -onMgura-i'n
glo.al del portal
T177. 0Hada a la dire--i'n .a!e de !u in!tala-i'n de &oo+la la pala.ra ad"inistrator y entrar en la
zona de ad+ini!tra-i'n 0--eda a la entrada de +en3 %i!te+a U ConMgura-i'n =lo.al *n la parte
!uperior a--eda a la! tre! pe!taHa!7 %itio2 %i!te+a y %ervidor Repa!e toda! la! op-ione!2 -onMgure
el -orreo ade-uada+ente y deje la! op-ione! que de!-onoz-a !in alterar
!- Ad/i#i.%(a$i4# de $o#%e#ido.
/o! -ontenido! en &oo+la 16 !e organizan en una jerarquFa +ultinivel de cate2orCas
M
*l -ontenido
e!t a!o-iado a la! -ategorFa!2 !i el volu+en de in4or+a-i'n +anejado en el CC% e! grande2 e!
re-o+enda.le organizar el -ontenido vario! nivele! pero2 no !e re-o+ienda en un !itio Je. e6-eder tre!
nivele! de jerarquFa en la organiza-i'n de -ontenido!
0l igual que o-urrFa -on otro! ge!tore! de -ontenido!2 la pre!enta-i'n de la in4or+a-i'n depende en
gran +edida de la plantilla >te+a? utilizada 0unque la! plantilla! de &oo+a !e tratan en pro4undidad
po!terior+ente2 e! re-o+enda.le ante! de introdu-ir -ontenido! e!ta.le-er -o+o predeter+ina una
plantilla in-luida en la in!tala-i'n .a!e lla+ada Bee/(2 ya que2 -ontiene +ayor 4un-ionalidad %iga lo!
pa!o! indi-ado! a -ontinua-i'n
T17,. 0--eda al +en3 de ad+ini!tra-i'n aHadiendo a la dire--i'n .a!e de !u in!tala-i'n de &oo+la
la pala.ra ad"inistrator $!e el u!uario y -lave de ad+ini!trador y una vez dentro ver en la parte
!uperior de la pgina un +en3 de ad+ini!tra-i'n de -olor negro
T17,.1. :e!de el +en3 de ad+ini!tra-i'n a--eda a *6ten!ione! U =e!tor de plantilla! y
e!ta.lez-a Ieez1 m :e4ault -o+o predeter+inada pul!ando !o.re la e!trella > ? de la -olu+na
Predeter+inado del li!tado de plantilla!
#.1. Cate%or2as y art2culos
Realizare+o! un eje+plo de -ontenido -reando una pu.li-a-i'n digital de una pequeHa lo-alidad
5odo! lo! te6to! e i+gene! !e to+arn del M-hero recursos8:oo"la./ip para 4a-ilitar la introdu--i'n de
-ontenido!
T17*. :e!-o+pri+a en una nueva -arpeta de !u di!-o el M-hero recursos8:oo"la./ip para utilizar la!
i+gene! y te6to! in-luido! 0.ra el M-hero te>tos8:oo"la.t>t -on AotepadBB para -opiar y pegar
( *n ver!ione! anteriore! !'lo e6i!tFan do! nivele! lla+ado! !e--ione! y -ategorFa!
Mdulo (a 8 Too"la -*-
T1,3. Aavegue a la pgina de ad+ini!tra-i'n de &oo+la y de!de el +en3 prin-ipal de ad+ini!tra-i'n
Contenido o de!de el panel de -ontrol2 a--eda al =e!tor de -ategorFa!
T1,3.1. *n el ad+ini!trador de -ategorFa! -ree la! -ategorFa! y
!u.-ategorFa! indi-ada! en la Mgura @@ 0l +eno! -ree la!
prin-ipale! y la! !u.-ategorFa! de 0oticias2 el re!to lo puede
-rear !eg3n la! ne-e!ite
T1,3.2. *! i+portante u!ar la pe!taHa Gp-ione! para aHadir a
-ada -ategorFa la 9+agen -orre!pondiente e in-luya el te6to
de!-riptivo de!de el M-hero te>tos8:oo"la.t>t Para la! i+gene!
utili-e lo! M-hero! de re-ur!o! in-luido! en e!te +'dulo >!e
re-ono-en por el no+.re?
T1,1. Con la e!tru-tura -reada aHadire+o! -ontenido a alguna! de
la! -ategorFa! Creare+o! nuevo! artF-ulo! de!de el ad+ini!trador
de artF-ulo! +o!trado en la Mgura @) 0--eda a Rl de!de el +en3 de
ad+ini!tra-i'n Contenido! U =e!tor de 0rtF-ulo!
T1,1.1. *li+ine el artF-ulo e6i!tente y -o+prue.e utilizando el enla-e Ver !itio !i e4e-tiva+ente
ha de!apare-ido *! re-o+enda.le va-iar la papelera ante! de -ontinuar2 para ello utili-e lo!
-uadro! de Mltrado de ele+ento!
T1,1.2. $tili-e el .ot'n Auevo y aHada un artF-ulo en la !u.-ategorFa Aoti-ia! U /o-ale! titulado
Casetas elada =?-) y rellRnelo de la 4or+a indi-ada >no !e olvide de guardar lo! -a+.io!?7
$tili-e el te6to in-luido en el M-hero te>tos8:oo"la.t>t
*n la pe!taHa Gp-ione! de pu.li-a-i'n e!ta.lez-a la! 4e-ha! indi-ada! en el te6to
Carque ta+.iRn la op-i'n :e!ta-ado al valor %F
-*= Mdulo (a 8 Too"la
!i2ura **. TerarEuCa de cate2orCas.
Aoti-ia!
Aoti-ia!
Aoti-ia! /o-ale!
Aoti-ia! /o-ale!
0-tividade!
0-tividade!
0-tividade! deportiva!
0-tividade! deportiva!
,e!tejo!
,e!tejo!
Cultura
Cultura
5e-nologFa
5e-nologFa
Gpini'n
Gpini'n
Aoti-ia! Provin-iale!
Aoti-ia! Provin-iale!
!i2ura *+. Ld"inistrador de cate2orCasHartCculos.
Ca+.io de e!tado
Ca+.io de e!tado
%ele--ionar todo!
%ele--ionar todo!
,iltro!
,iltro!
5ra! el te6to en Gp-ione! de i+gene! y enla-e! y utili-e la i+agen articulo83eria.pn2 -o+o
9+agen de introdu--i'n
#.2. 8dministraci6n de men?s
*n &oo+la el a--e!o a todo! lo! -ontenido! del portal !e realiza +ediante el u!o de "enNs /o! +en3!
-ontienen un li!tado de enla-e! ordenado! y !on el punto de partida para enlazar a la! di4erente!
-ategorFa!2 li!tado! u otro! ele+ento! de -ontenido en el portal *6i!te un +en3 e!pe-ial +ar-ado -on
una e!trella -orre!pondiente al +en3 prin-ipal del portal
T1,2. Realizare+o! -a+.io! en el +en3 prin-ipal2 ini-ial+ente le -a+.iare+o! el no+.re2 para ello
a--eda al +en3 de ad+ini!tra-i'n Cen3! U =e!tor de Cen3! 0pare-er un li!tado -on lo! +en3!
e6i!tente! en el !itio
T1,2.1. *n la -olu+na C'dulo! enlazado! del
+en3 titulado Cain Cen3 de!pliegue el -uadro de
!ele--i'n para editar la! propiedade! del +en32
de.e !ele--ionar la entrada tal y -o+o !e +ue!tra
en la Mgura @( *dite la! op-ione! y !ele--ione en
0!igna-i'n del +'dulo la op-i'n *n toda! la!
pgina! para ha-er vi!i.le el +en3
T1,2.2. Vuelva al li!tado de +en3! y -a+.ie Rl
tFtulo de Main MenN a MenN principal Para
-on!eguirlo de.e +ar-ar la -a!illa de !ele--i'n del
+en3 y pul!ar el .ot'n !uperior *ditar
T1,2.3. :e!de el ge!tor de +en3! entre en el
+en3 prin-ipal Para -o+enzar de!de -ero -on el
+en3 !ele--ione todo! lo! ele+ento! e6i!tente! >!i
lo! hay? y +ndelo! a la papelera $no de lo!
ele+ento! no !e .orrar2 e! el enla-e a la pgina
de ini-io2 reno+.re e!te ele+ento a Inicio
T1,2.0. 0Hada un nuevo ele+ento de +en3 -on el .ot'n Auevo Pul!e el .ot'n %ele--ionar
>-a+po 5ipo de ele+ento del +en3? 0pare-er una nueva ventana >ver Mgura @E?2 !ele--ione
0rtF-ulo! U Co!trar una -ateogrFa en 4or+ato .log
T1,2.$. 5itule e!te ele+ento 0oticias y en el -uadro %ele--ionar una -ategorFa !ele--ione la
-ategorFa de pri+er nivel 0oticias =uarde lo! -a+.io!2 vi!ite el !itio para ver el re!ultado del
+en3
T1,2.'. Vi!ite !u !itio y !iga el enla-e de +en3 que a-a.a de -rear le llevar a una pgina donde
!'lo !e +ue!tran la! !u.-ategorFa! e6i!tente! *n 51E01 de.i' in-luir uno! te6to! e i+gene!
de!-riptivo! de alguna! -ategorFa!2 !i no lo hizo no notar -a+.io! en lo! !iguiente! pa!o!
Mdulo (a 8 Too"la -*(
!i2ura *M. Edicin de propiedades del "enN.
T1,2.7. *dite la entrada de +en3 0oticias y en la pe!taHa CategorFa2 e!ta.lez-a el valor Co!trar
para lo! -uadro! de!plega.le! 5Ftulo de la -ategorFa2 :e!-rip-i'n de la -ategorFa2 9+agen de la
-ategorFa y CategorFa! va-Fa! =uarde lo! -a+.io! y al vi!itar de nuevo e!te +en3 apare-ern lo!
te6to! e i+gene! de!-riptivo!
*6i!ten +ultitud de op-ione! di!poni.le! en el -uadro Fpciones de la cate2orCa vi!to anterior+ente Ao
!olo en e!te -uadro2 -ada vez que !e aHade alg3n ele+ento en &oo+la la ventana de edi-i'n e!t lleno de
-uadro! -on gran -antidad po!i.ilidade! de -onMgura-i'n
5oda! la! op-ione! to+an un valor por de4e-to2 e! intere!ante ante! de llenar el !itio de -ontenido
e!ta.le-er -ual e! el 4or+ato y la! op-ione! predeter+inada! del !itio Je. 0!F en la +ayorFa de lo!
-a!o! no hay que -onMgurar -o+pleta+ente -ada ele+ento aHadido
*n todo! lo! +en3! de ad+ini!tra-i'n en-argado! de ge!tionar di4erente! ele+ento! >-ategorFa!2 artF-u#
lo!2 +en3!2 et-? e!t di!poni.le un -uadro de op-ione! para -onMgurar lo! valore! predeter+inado!
de!eado! en lo! ele+ento!
T1,3. Aavegue al +en3 de ad+ini!tra-i'n %i!te+a U ConMgura-i'n glo.al *n el +en3 izquierdo
!ele--ione 0rtF-ulo! y en la parte !uperior apare-ern +ultitud de pe!taHa! para e!ta.le-er la!
op-ione! glo.ale! *!ta.lez-a la! op-ione! indi-ada! en la ta.la 22
Pe!ta=a 6.cin> ?alor
0rtF-ulo!
Co!trar 0utor7 G-ultar
/F+ite leer +a!7 20
Gp-ione! de edi-i'n
,lota-i'n de la i+agen para el te6to de introdu--i'n7 :ere-ha
,lota-i'n de la i+agen para el te6to al -o+pleto7 :ere-ha
CategorFa
5Ftulo de la -ategorFa7 Co!trar
:e!-rip-i'n de la -ategorFa7 Co!trar
9+agen de la -ategorFa7 Co!trar
CategorFa! va-Fa!7 Co!trar
-*) Mdulo (a 8 Too"la
!i2ura *7. ,ipos de ele"entos de "enN.
Pe!ta=a 6.cin> ?alor
Gp-ione! del
4or+ato del tipo
.log o de!ta-ado!
Cantidad de artF-ulo! de introdu--i'n7 2
Cantidad de artF-ulo! de!puR! de lo! de introdu--i'n7 )
Cantidad de -olu+na!7 2
Grden en -olu+na! +3ltiple!7 Cruzado
9ntegra-i'n
:e -ada noti-ia !indi-ada +o!trar7 5e6to -o+pleto
Co!trar S/eer +!T7 Co!trar
,abla ==. alores 2lobales de con62uracin para el 2estor de artCculos.
T1,3.1. /o! valore! e!ta.le-ido! !e apli-arn de 4or+a predeter+inada al li!tar -ategorFa!2 pero
!e pueden indi-ar valore! di4erente! en deter+inada! entrada! de +en3 Para pro.arlo aHada un
!egundo artF-ulo titulado L"pliacin de carril bici en la -ategorFa 0oticias locales2 to+ando el
te6to de lo! te6to! ya preparado! y aHadiendo la 9+agen de introdu--i'n -orre!pondiente
T1,3.2. :e!de el ge!tor de +en3! edite la entrada de +en3 0oticias del MenN principal 0--eda
a la pe!taHa de edi-i'n ,or+ato tipo .log o de!ta-ado! e!ta.lez-a lo! valore!7 Cantidad de
artF-ulo! de introdu--i'n U 02 Cantidad de artF-ulo! de!puR! l U 4 e 9n-luir !u.-ategorFa! U
5odo!
T1,3.3. Vi!ite el !itio y navegue el enla-e 0oticias del +en3 prin-ipal para ver la! do! noti-ia! en
do! -olu+na!2 pero el te6to e6i!tente en la noti-ia del -arril .i-i e! e6-e!ivo
T1,3.0. *dite de nuevo el artF-ulo y !ituR
el -ur!or de edi-i'n tra! el !egundo
prra4o Pul!e el .ot'n !ituado en la parte
.aja del editor lla+ado /eer +! $na
.arra roja -o+o la +o!trada en la Mgura
@; apare-er indi-ando una divi!i'n de
te6to
T1,3.$. Aavegue de nuevo el +en3
0oticias para ver lo! -a+.io! e4e-tivo!2
!'lo !e +o!trar el te6to ha!ta el lugar
indi-ado
T1,0. *dite la entrada de +en3 +ar-ada
-o+o Inicio +ediante una e!trella a+arilla %ele--ione en el -uadro 5ipo de ele+ento de +en3 la
vi!ta Co!trar todo! lo! artF-ulo! de!ta-ado! Vi!ite !u !itio Je. y navegue al enla-e 9ni-io
Para ver -orre-ta+ente lo! di4erente! nivele! del +en3 !e a pro-eder a -a+.iar la u.i-a-i'n del +en3
prin-ipal de la .arra !uperior a la -olu+na izquierda Po!terior+ente !e e!tudia el po!i-iona+iento de
-ontenido!2 por lo que ahora 3ni-a+ente !iga lo! pa!o! indi-ado!
T1,$. 0--eda al +en3 de ad+ini!tra-i'n *6ten!ione! U =e!tor de +'dulo! Iu!que el +'dulo
titulado Cain Cenu y edFtelo *n el -uadro po!i-i'n !ele--ione la po!i-i'n per!onalizada po!ition#( y
guarde lo! -a+.io! Aavegue a !u !itio y veriMque !i el +en3 prin-ipal e!t en la -olu+na dere-ha
Mdulo (a 8 Too"la -**
!i2ura *<. Editor de Too"la.
T1,'. Cree un nuevo +en3 titulado ,op2 rellene el -uadro de te6to 5ipo de +en3 -on el valor
top"enu
T1,'.1. Vuelva al li!tado de +en3! y para el nuevo +en3 ver un enla-e -on el te6to 0Hadir un
+'dulo para e!te tipo de +en3 *!te enla-e e! para a!ignar el +en3 a una deter+inada regi'n de
la pgina >po!terior+ente en la !e--i'n @ !e e!tudiar en pro4undidad?2 !iga el enla-e y en el
nuevo 4or+ulario e!ta.lez-a un tFtulo y en Po!i-i'n !ele--ione la position8-
T1,'.2. *dite el +en3 5op y aHada do! entrada!7 0oticias locales y #ro&inciales Cada una de
e!ta! entrada! enlazar -on la !u.-ategorFa -orre!pondiente2 de.e !ele--ionar en 5ipo de
ele+ento de +en3 la op-i'n Co!trar una -ategorFa en 4or+ato li!tapara a+.a! Ao e!ta.lez-a
ninguna op-i'n adi-ional en la! pe!taHa! de -onMgura-i'n adi-ional y vi!ite !u !itio Je.
T1,'.3. Cree un nuevo artF-ulo en el ad+ini!trador de artF-ulo! titulado Concenos2 a!'-ielo a
una nueva -ategorFa lla+ada Sin clasi6car $!e el te6to !u+ini!trado y aHada al te6to una i+agen
de!de el .ot'n in4erior 9+agen >ver Mgura @;? $na vez in!ertada !ele--i'nela e intente alinearla
a la dere-ha
T1,'.0. *dite el +en3 !uperior y enla-e e!te nuevo artF-ulo titulando el ele+ento de +en3 -o+o
ZWuienes so"os[ Para -on!eguirlo2 en el -uadro 5ipo de ele+ento del +en3 de.e !ele--ionar
Co!trar un !olo artF-ulo y de!puR! !ele--ionar el artF-ulo que de!ea que !e +ue!tre :e.e
!ele--ionar el artF-ulo -reado anterior+ente titulado Concenos
T1,'.$. Vi!ite la nueva entrada de +en3 y ver que apare-e ante! del te6to dato! -o+o7
-ategorFa2 4e-ha de pu.li-a-i'n2 et- *n una pgina de pre!enta-i'n de e!te tipo no de.en
apare-er2 edite de nuevo el ele+ento de +en3 y -onMg3relo -orre-ta+ente +odiM-ando todo lo
que -rea ne-e!ario en la! pe!taHa! de -onMgura-i'n adi-ionale!
T1,7. 5er+ine de -on!truir el +en3 prin-ipal !iguiendo la ta.la 21 y teniendo en -uenta la!
!iguiente! -on!idera-ione!7
T1,7.1. Para el ele+ento del +en3 0oticias 0acionales !e utilizar un -anal e6terno R%% 0--eda
al +en3 Co+ponente! U Canale! ele-tr'ni-o! y -ree una -ategorFa de Canales electrnicos
lla+ado 0oticias nacionales Cree vario! -anale! ele-tr'ni-o! en e!ta -ategorFa .u!-ando en
peri'di-o! de tirada na-ional lo! -anale! R%% di!poni.le!
T1,7.2. Para la entrada ,ecnolo2Ca de.e -rear ante! un nuevo -anal ele-tr'ni-o u!ando la
dire--i'n indi-ada en la ta.la
-*+ Mdulo (a 8 Too"la
Men@ ni8el 1 Aleento! de ni8el 2 Ti.o 6.cione!
Aoti-ia!
Aoti-ia! de nue!tra lo-alidad ,or+ato .log CategorFa7 Aoti-ia! lo-ale!
Aoti-ia! Provin-iale! ,or+ato .log CategorFa7 Provin-iale!
Aoti-ia! Aa-ionale!
Canale! ele-tr'ni-o!2
de una -ategorFa
CategorFa7 Aoti-ia! na-ionale!
Di!t'ri-o 0rtF-ulo! ar-hivado! 0 !u gu!to
0-tividade!
0-tividade! deportiva! ,or+ato .log
CategorFa7 0-tividade!
deportiva!
,e!tejo! 0 !u gu!to 0 !u gu!to
Cultura
5e-nologFa
Co!trar un !'lo -anal
ele-tr'ni-o
Canal7
http7884eed!4eed.urner-o+80ndr
oid0yudaW4or+atb6+l
Gpini'n ,or+ulario de a--e!o
,abla =(. Estructura del "enN principal del sitio Web.
#.3. estor multimedia
*l ge!tor +ulti+edia !irve para al+a-enar di4erente! tipo! de ar-hivo! en el !itio Je. y utilizarlo! en
lo! -ontenido! del portal *!te ad+ini!trador e!t orientado prin-ipal+ente a tra.ajar -on i+gene!2
aunque intentare+o! utilizarlo para enlazar do-u+ento! de!de pgina! Je. -on alguna diM-ultad
0nterior+ente2 al !u.ir la! i+gene! a la! -ategorFa! y artF-ulo! apare-i' una ventana donde !e
vi!ualiza.an la! i+gene! di!poni.le! *!te ge!tor deja al u!uario al+a-enar lo! -ontenido! en
di4erente! -arpeta! para organizar lo! ar-hivo! y tra.ajar -'+oda+ente
/a 3ni-a pe-uliaridad en &oo+la e! la u.i-a-i'n Je. de lo! -ontenido! +ulti+edia2 todo! !e al+a-enan
.ajo la ruta i"a2es2 e! de-ir la dire--i'n .a!e e! http788<<<+ido+ioe!8joo+la -ualquier -ontenido
!u.ido e!tar !ie+pre .ajo e!ta u.i-a-i'n http788<<<+ido+ioe!8joo+la8 ia4e! 8 Co+o todo! lo!
-ontenido! e!tn .ajo la ruta i"a2es2 e!ta dire--i'n tendr tre! parte!7 >1? i"a2es2 >2? no+.re de la
-arpeta dentro del ge!tor +ulti+edia y >1? no+.re del M-hero *!ta! parte! -o+o en -ualquier dire--i'n
Je. !e !eparan por .arra! S8T2 y !e -o+ponen quedando la! dire--ione! -o+o
http788<<<+ido+ioe!8joo+la8i+age!8+i-arpeta8+i4otojpg
T1,,. Aavegue al +en3 de ad+ini!tra-i'n Contenido U =e!tor +ulti+edia
T1,,.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 4or+ato P:, que en-ontrar -on el +aterial del +'dulo
T1,,.2. 0hora intente !u.ir do! li.ro! en 4or+ato *P$I que ta+.iRn e!tn entre el +aterial del
+'dulo G-urrir un error al no e!tar per+itido e!te 4or+ato en el ad+ini!trador +ulti+edia
T1,,.3. $tili-e el .ot'n Gp-ione! del ge!tor +ulti+edia y aHada la e6ten!i'n epub !eparada por
-o+a en la li!ta de e6ten!ione! per+itida! =uarde lo! -a+.io! y repita el pro-e!o para !u.ir lo!
li.ro!
T1,,.0. Cree un nuevo artF-ulo titulado Libros reco"endados en la -ategorFa Cultura -on lo!
Mdulo (a 8 Too"la -*M
tFtulo! de lo! -uatro li.ro! en una li!ta de .olo!2 puede utilizar lo! te6to! preparado! %ele--ione
uno de lo! te6to! 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 en la Mgura )02 4Fje!e en la Mgura la ruta e!ta.le-ida para uno de lo! li.ro!
T1,,.$. =uarde lo! -a+.io! y enla-e el ele+ento de +en3 Cultura para que pre!ente toda la
-ategorFa de artF-ulo! de -ultura en 4or+ato li!ta Co+prue.e !i el enla-e al li.ro 4un-iona y
ter+ine la edi-i'n del artF-ulo enlazando lo! re!tante! li.ro!
!i2ura +?. Insertar enlace a arc.i&o interno desde el editor inte2rado.
6- 3(e.e#%a$i4# de $o#%e#ido.
/a di!po!i-i'n y el a!pe-to de lo! -ontenido! en &oo+la e!tn Fnti+a+ente rela-ionado! Co+o en
otro! CC% la pre!enta-i'n !e e!ta.le-e +ediante plantilla! >!in'ni+o de te+a! en otro! CC%? y e!ta!
plantilla! deter+inan la! regione! e6i!tente! para u.i-ar -ontenido en la pgina Je. /o! do! -on-epto!
prin-ipale! para -on!eguir -onMgurar la pre!enta-i'n de un !itio Je. -on &oo+la !on lo! +'dulo! y la!
plantilla!
0.1. 8dministraci6n de m6dulos
$n +'dulo en &oo+la -orre!ponde a un .loque de -ontenido2 no !e de.e -on4undir -on un -o+ple#
+ento2 en otro! CC% !e lla+a +'dulo a -o+ponente! que aHaden 4un-ionalidad al !itio Je. &oo+la trae
di4erente! tipo! de +'dulo! -la!iM-ado! por la in4or+a-i'n que +ue!tran7 +'dulo! para +en3!2 para
vota-ione!2 pu.li-idad2 noti-ia!2 et- Para un +i!+o tipo de +'dulo !e pueden tener vario! +'dulo!
a-tivo! !i+ultnea+ente2 por eje+plo2 pode+o! tener do! en-ue!ta! a-tiva! +o!trndo!e -ada una en
di4erente! !e--ione!
5ra! la in!tala-i'n del portal tene+o! +u-ho! +'dulo! a-tivo!2 -ada uno de lo! .loque! e6i!tente! en la
pgina prin-ipal e! un +'dulo 5anto &oo+la -o+o la +ayorFa de lo! CC% dividen la! pgina! en regio#
ne! -on un no+.re a!ignado *n la Mgura )1 !e +ue!tra la u.i-a-i'n y lo! no+.re! de la! di4erente!
regione! para la plantilla Bee/(
-*7 Mdulo (a 8 Too"la
5e6to !ele--ionado
5e6to !ele--ionado
Iot'n de enla-e
Iot'n de enla-e
:ire--i'n del enla-e
:ire--i'n del enla-e
!i2ura +-. 4e2iones disponibles en las pD2inas de Too"la para la plantilla Bee/(.
*!ta! regione! dependen del te+a8plantilla que !e e!tR utilizando y para 4a-ilitar !u u!o &oo+la tiene una
op-i'n para +o!trar al di!eHador la! po!i-ione! de la! regione! !uperpue!ta! al !itio Je.
T1,*. Aavegue al +en3 de ad+ini!tra-i'n *6ten!ione! U =e!tor de plantilla! $!e el .ot'n
Gp-ione! para ha.ilitar Previ!ualizar la po!i-i'n de lo! +'dulo! y guarde lo! -a+.io!
T1,*.1. Aavegue a la pgina ini-ial de !u !itio Je. y aHada a la $R/ del navegador Wtpb12 !u
$R/ quedarFa a!F http788lo-alho!t8joo+la8Wtpb1 Re-argue la pgina y o.!erve la -orre!ponden-ia
-on la! po!i-ione! de la Mgura )1
5anto el -o+porta+iento -o+o el a!pe-to de lo! +'dulo! ad+iten +ultitud de op-ione! de -onMgura#
-i'n /o! prin-ipale! a!pe-to! a -on!iderar !on lo! !iguiente!7
0!igna-i'n de +en37 /o! +'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 +en3 de!eado!2 -uando !e
a--eda a e!o! ele+ento! de +en3 apare-er el +'dulo
Po!i-i'n y orden7 Regi'n donde !e u.i-ar el +'dulo y orden re!pe-to al re!to de +'dulo!
pre!ente! en la +i!+a regi'n
5ipo de +'dulo7 Cada tipo de +'dulo !e puede poner +3ltiple! ve-e!2 ha-iendo di4erente!
Mdulo (a 8 Too"la -*<
/G=G
!uperior izquierda !uperior dere-ha
-entral#!uperior
CGA5*A9:G
3lti+o pie
.u!-ar
ruta de navega-i'n
!uperior
-entral izquierda -entral dere-ha
in4erior dere-ha
pie !uperior pie in4erior pie -entral
in4erior izquierda
-onMgura-ione! !e -on!igue u!ar un +i!+o +'dulo en di4erente! regione! y8o pgina! -on
-ontenido! di4erente!
Para -o+poner pgina! no e! ne-e!ario di!poner de +u-ho! tipo! de +'dulo! di4erente! Prin-ipal+ente
!e de.e a que -ada tipo de +'dulo puede in!tan-iar!e varia! ve-e!2 y -ada in!tan-ia2 per+ite +u-ha
variedad en !u -onMgura-i'n
%e -onMgurarn a -ontinua-i'n di4erente! tipo! de +'dulo! para -on!eguir una di!tri.u-i'n y una
pre!enta-i'n -o+o la de la Mgura )2 %e -on!eguir u!ando el ge!tor de +'dulo!2 .a!ndo!e en el
e!que+a de la Mgura )1 y -onMgurando lo! +'dulo! +o!trado! en la ta.la 24 /a -onMgura-i'n de
alguno! +'dulo! requiere pa!o! adi-ionale! no -onte+plado! en la ta.la2 !e re-o+ienda !eguir lo!
pa!o! indi-ado! y utilizar di-ha ta.la -o+o apoyo
T1*3. 0--eda al +en3 de ad+ini!tra-i'n *6ten!ione! U =e!tor de +'dulo! %e -onMgurarn todo!
lo! +'dulo! de la ta.la 24 !iguiendo lo! pa!o! indi-ado! $!e la! po!i-ione! y -onMgura-i'n indi-ada
en la ta.la para -ada +'dulo2 y en -ada pa!o vi!uali-e el !itio Je. para ver el re!ultado
T1*3.1. *n el li!tado de +'dulo! de!a-tive todo! lo! +'dulo! +eno! lo! !iguiente!7 Searc.2 ,op
"enu 2 Main "enu y Breadcru"bs
T1*3.2. ConMgure el +'dulo que +ue!tra el +en3 !uperior horizontal2 el +en3 prin-ipal y el
-uadro .u!-ar u.i-ndolo en la! po!i-ione! indi-ada! en la ta.la 24 Para que aparez-a en toda!
la! pgina! de.e !ele--ionar en el -uadro de 0!igna-i'n del +'dulo la op-i'n *n toda! la!
pgina!
T1*3.3. 0Hada un nuevo +'dulo del tipo 9+agen 0leatoria lla+ado Cabeceras :e!de el ge!tor
+ulti+edia -ree una nueva -arpeta lla+ada cabeceras y !u.a a &oo+la la! i+gene! cabecera8
aleatoria8-.:p2 y cabecera8aleatoria8=.:p2 *!ta.lez-a la! Gp-ione! .!i-a! indi-ada! en la ta.la
24
T1*3.0. Para -rear una li!ta de enla-e! a organi!+o! oM-iale! a--eda al +en3 Co+ponente! U
*nla-e! Je. Cree una -ategorFa lla+ada Fr2anis"os pNblicos y aHada alguno! enla-e! en e!ta
-ategorFa 0hora ya puede -rear el +'dulo Fr2anis"os y a!ignar la -ategorFa re-iRn -reada
T1*3.$. %iguiendo la ta.la ahora aHada el +'dulo ;istrico del tipo 0rtF-ulo! ar-hivado! *!te
+'dulo !olo de.e +o!trar!e en la! pgina! de noti-ia! e hijo!2 por tanto2 a!eg3re!e que en la
pgina prin-ipal no apare-e
T1*3.'. *l +'dulo Lcti&idades +ue!tra la! noti-ia! de una deter+inada !e--i'n2 pero +ue!tra
tanto el -ontenido -o+o la! i+gene! Para pro.arlo de.e aHadir un artF-ulo en la -ategorFa
acti&idades2 u!e el te6to preparado de la -arrera popular y aHada a di-ho te6to la i+agen articulo8
carrera.:p2 de!de el editor de te6to! del artF-ulo
T1*3.7. Para el .loque InterXs utili-e el -'digo D5C/2 preparado en el M-hero de te6to2 .u!que
una 4or+a -on el editor para pegar el -'digo D5C/ 0de+!2 de.e -rear -on el ge!tor +ulti+edia
una -arpeta lla+ada iconos y !u.ir la! -uatro i+gene!7 icono8a1unta"iento.pn22 icono8
3ar"acia.pn22 icono8policia.pn2 e icono8ur2encias.pn2.
-+? Mdulo (a 8 Too"la
T1*3.,. *l +'dulo Lnuncios requiere -onMgura-i'n adi-ional de!de el +en3 Co+ponente! U
0nun-io! *!te -o+ponente e! -o+plejo !'lo -ree una -ategorFa lla+ada Lnuncios Locales y
aHada do! anun-io! en e!ta -ategorFa -uya! i+gene! !ean anuncio83rutas.pn2 y anuncio8
taller.pn2. 0hora aHada el +'dulo y e!ta.lez-a la -onMgura-i'n para que +ue!tren e!to! anun#
-io!
T1*3.*. *!ta.lez-a un pie de pgina2 !ele--ionando la regi'n ade-uada y u!ando un +'dulo del
tipo ade-uado2 para poner !u no+.re2 apellido! y el -opyle4t
T1*1. Para ter+inar la -o+po!i-i'n de la pgina !e propone intentar a!e+ejar !u !itio Je. a la
-aptura pre!entada en la Mgura )2 *!ta Mgura e! una -aptura de la pgina prin-ipal de.e -on!iderar
lo !iguiente7
%e pre!entan !olo lo! artF-ulo! +ar-ado! -o+o de!ta-ado! en 2 -olu+na! -on un lF+ite de )
artF-ulo! -o+o +6i+o
*l orden indi-ado para lo! +'dulo! en la! -olu+na! de.er re!petar!e
/a! i+gene! de noti-ia! de.en !er !ie+pre del +i!+o ta+aHo
Mdulo (a 8 Too"la -+-
P:4ina! B
?i!ibilidad
TCtulo Ti.o de dulo Po!icin
Aleento de
referencia B 6.cione!
5oda!
Cen3
!uperior
Cen3 Po!ition#1 Cen37 5op
5oda!
Cen3
prin-ipal
Cen3 Po!ition#( Cen37 Cen3 prin-ipal
5oda! Iu!-ar Ca+po .3!queda Po!ition#0 Ao pro-ede
5oda! Iread-ru+.! Ruta de navega-i'n Po!tion#2 0 !u gu!to
5oda! Ca.e-era! 9+agen aleatoria Po!ition#1
:ir7 i+age!8-a.e-era!
5a+aHo7 ;E( n 100
5oda! Grgani!+o! *nla-e! Je. Po!ition#11
CategorFa7 Grgani!+o!
p3.li-o!
5oda! *!tado Kuien e!t en lFnea Po!ition#; 0 !u gu!to
Aoti-ia! e hijo! Di!t'ri-o 0rtF-ulo! ar-hivado! Po!ition#E 0!igna-i'n de +en3
Cultura e hijo!
Canal
5e-nol'gi-o
Canale!
ele-tr'ni-o!
Po!ition#)
http788e!noti-ia!yahoo-o
+8r!!8te-nologia
Di!t'ri-o CategorFa!
CategorFa! de
artF-ulo!
Po!ition#E 0 !u gu!to
9ni-io /o +! vi!to /o! +! populare! Po!ition#E 5oda! la! -ategorFa!
9ni-io 0-tividade!
0rtF-ulo! # Aoti-ia!
de a-tualidad
Po!ition#1
CategorFa7 0-tividade!
Co!trar 9+gene!7 %F
Co!trar tFtulo art7 %F
9ni-io :e interR!
D5C/
per!onalizado
Po!ition#@ /eer 51;0(
9ni-io2
Aoti-ia! e hijo!
0nun-io! 0nun-io! Po!ition#)
Co!trar tFtulo7 G-ultar
Contador7 1
CategorFa7 0nun-io!
lo-ale! /eer 51;0E
9ni-io R%% %indi-a-i'n del !itio Po!ition#10
5Ftulo7 %u.!-rip-i'n a
noti-ia!
9ni-io VFdeo $R/ e+.e.ida Po!ition#(
$R/7
http788<<<youtu.e-o+8
e+.ed8v.2eG.v+vd9
0n-ho7 200
,abla =). Mdulos5 ubicacin 1 con62uracin para la pD2ina de e:e"plo.
-+= Mdulo (a 8 Too"la
!i2ura +=. Co"posicin de la pD2ina principal "ediante "dulos.
Mdulo (a 8 Too"la -+(
0.2. Plantillas
*!en-ial+ente la! 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!eHo +uy utilizado y vi!to -on anterioridad en todo! lo!
CC% e!tudiado!
/a! plantilla! -ontrolan el a!pe-to vi!ual del !itio Je. en !u totalidad $na plantilla en &oo+la e!t
4or+ada por do! parte! di4eren-iada!7 la! hoja! de e!tilo y el -'digo de la plantilla >PDPBD5C/? *!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 0de+!2 e! po!i.le -a+.iar el a!pe-to de todo el portal o de parte2 una -ara-terF!ti-a de &oo+la
e! la po!i.ilidad de a!ignar di4erente! plantilla! a -ada ele+ento del +en3 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 9nternet
T1*2. *n el +en3 de ad+ini!tra-i'n *6ten!ione! a--eda al =e!tor de plantilla!
T1*2.1. $!e la pe!taHa Plantilla! para o.tener vi!ta! previa! y u!ando la plantilla protostar
utili-e el .ot'n Previ!ualizar para ver el a!pe-to de !u portal -on e!ta plantilla
T1*2.2. Co+prue.e -o+o alguno! +'dulo! e i+gene! +o!trada! en la Mgura )1 de!apare-en
%e de.e a que la! regione! !on e!ta.le-ida! por la plantilla de -ada te+a2 pudiendo de!apare-er
parte de lo! +'dulo! de !u !itio Je.
T1*2.3. :e!de el +en3 de ad+ini!tra-i'n edite la! op-ione! de la plantilla protostar y a!igne
e!ta plantilla a la entrada del +en3 prin-ipal Nona 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 +en3
*ntre la! op-ione! e6i!tente! en el li!tado de plantilla! e!t la edi-i'n de la plantilla y del -'digo C%%
de!de el propio navegador Con e!ta 4un-ionalidad !e puede editar de!de el navegador lo! e!tilo! y la
di!po!i-i'n del -ontenido en la! pgina!2 pero la edi-i'n de una plantilla en el navegador re!ulta tedio!a2
real+ente e!te pro-edi+iento e!t pen!ado para realizar -a+.io! +enore! de!de el navegador Para
+odiM-ar o di!eHar nueva! plantilla! !e a--eder dire-ta+ente a lo! M-hero! del di!-o y a!F !e tra.ajar
-on +ayor -o+odidad
0.3. Creaci6n de una plantillas
*n PRe4 4;Q !e puede de!-argar un e6-elente +anual donde !e e6pli-a detallada+ente e!te pro-e!o
%e realizar un pro-e!o de -lona-i'n de una e6i!tente para ha-er alguna! +odiM-a-ione! +anteniendo
inta-ta la -opia original
0nte! de -o+enzar la -rea-i'n de la nueva plantilla !e re-o+ienda tener el !itio relleno de -ontenido y
-on vario! +'dulo! u.i-ado! para poder o.!ervar lo! -a+.io! !eg3n !e reali-en %i en la! !e--ione!
anteriore! no ter+in' de -onMgurar lo! +'dulo! y de introdu-ir -ontenido !e re-o+ienda to+ar la -opia
-+) Mdulo (a 8 Too"la
del pro4e!or ya preparada en lo! M-hero!7 :oo"la8pro3esor./ip y :oo"laOpro3esor.sEl./ip Para utilizar e!ta
-opia puede !altar a la !e--i'n)1 y -on!ultar el pro-e!o de -lona-i'n del !itio
*n la +ayorFa de lo! -a!o! e!-ogiendo una plantilla que no! agrade vi!ual+ente2 .a!ta -on alterar
-onveniente+ente lo! e!tilo! de la plantilla ha!ta -on!eguir el a!pe-to de!eado 0!F2 una vez -lonado el
!itio del pro4e!or o u!ando !u propio !itio reali-e lo! !iguiente! pa!o! para -rear un nuevo te+a
T1*3. 0--eda en !u di!-o al dire-torio dentro de .tdocs donde tiene lo! M-hero! -on la in!tala-i'n
de &oo+la *ntre en la -arpeta te"plates y ver varia! !u.-arpeta!7 bee/(2 protostar5 et-
T1*3.1. Copie la -arpeta bee/( en alguna -arpeta 4uera de Iitna+i y reno+.re la -opia a
cursoc"s
T1*3.2. *ntre en la -arpeta cursoc"s y -on el editor 0otepadII edite el M-hero
te"plateDetails.>"l +odiM-ando lo indi-ado en el !iguiente -'digo7
Hn!:e*C.rso C!EH?n!:e*
Hcre!tion3!te*16 c+nio 2016H?cre!tion3!te*
H!+thor*-!+$ino "+iM de C$!#i2o V0MD+eMH?!+thor*
H!+thor/:!i$*p!+$ino@dte.+s.esH?!+thor/:!i$*
H!+thor'r$*http%??www.dte.+s.esH?!+thor'r$*
Hcopyright*CopyCeft 2016H?copyright*
H$icense*Q-CH?$icense*
H#ersion*>.1.0H?#ersion*
Hdescription*-$!nti$$! de pr+e(!s p!r! e$ c+rso CM1H?description*
...
H$!ng+!ges fo$derBU$!ng+!geU*
H$!ng+!ge t!gBUen=QIU*en=QI?en=QI.tp$Rc.rsoc3s.iniH?$!ng+!ge*
H$!ng+!ge t!gBUen=QIU*en=QI?en=QI.tp$Rc.rsoc3s.sys.iniH?$!ng+!ge*
H?$!ng+!ges*
Cdi2o )M. Ca"bios en te"plateDetails.>"l para co"en/ar una nue&a plantilla.
T1*3.3. :e.e .u!-ar do! ar-hivo! .ini language U en#=I y -a+.iarle! el no+.re a lo! no+.re!
indi-ado! en el -'digo 4(
T1*3.0. $na vez ter+inado! lo! -a+.io! de.e -o+pri+ir la -arpeta del nuevo te+a en 4or+ato
N9P2 de.erFa quedar un M-hero -on no+.re cursoc"s./ip
T1*3.$. 0--eda al =e!tor de e6ten!ione! de &oo+la2 de!de la op-i'n %u.ir e in!talar l !u.a el
M-hero N9P :e!puR! de!de el =e!tor de Plantilla! a-tive el nuevo te+a re-iRn -reado2
e!ta.le-iRndolo -o+o predeter+inado %i o.!erva que la -olu+na izquierda no e!t u.i-ada
-orre-ta+ente edite la! propiedade! de la plantilla y -a+.ie la op-i'n Po!ition o4 Aavigation
T1*3.'. :e!de la -onMgura-i'n de la plantilla -a+.ie el logotipo del nuevo te+a u!ando el
M-hero lo2otipo.pn2
T1*3.7. *!ta.lez-a en la -onMgura-i'n del te+a la op-i'n 5e+plate -olour a Custo" :e.e ver la
pgina -on la di!po!i-i'n -orre-ta pero -on una -o+.ina-i'n de -olore! .lan-a
0 partir de aquF !e editarn lo! M-hero! dire-ta+ente en la nueva -arpeta -reada que -ontiene la plan#
Mdulo (a 8 Too"la -+*
tilla Para -o+enzar a tra.ajar de.e -ono-er que la! plantilla! -ontienen un M-hero PDP donde !e deMne
la e!tru-tura D5C/ de la pgina y !e u.i-an lo! .loque! de -ontenido de &oo+la *!te M-hero utiliza
de-lara-ione! deno+inada! &:GC para u.i-ar -ontenido *!ta! !enten-ia! tienen e!ta !inta6i!7
H2doc%inc$+de typeBU:od+$esU n!:eBU4LMI"/RML3'CLU sty$eBU/1<,CLU ?*2 donde 0FMB4EOMFD%LF ha-e
re4eren-ia al +'dulo a +o!trar y ES,ILF al tipo de 4or+ato u!ado al pre!entar el +'dulo Puede ver lo!
!iguiente! eje+plo!
HKdoc%inc$+de typeBU:od+$esU n!:eBUposition=7U sty$eBU(eeM3i#isionU he!derCe#e$BU>U
?*
HKdoc%inc$+de typeBU:od+$esU n!:eBUposition=6U sty$eBU(eeMAideU he!derCe#e$BU>U
st!teBU0 U ?*
HKdoc%inc$+de typeBU:od+$esU n!:eBUposition=8U sty$eBU(eeM<!(sU he!derCe#e$BU2U
idBU>U ?*
Cdi2o )7. E:e"plos de sentencias TDFC.
T1*0. *dite -on 0otepadII el M-hero inde>.p.p de la nueva plantilla
T1*0.1. Iu!que la! !enten-ia! &:GC para -o+pro.ar la! po!i-ione! en el -'digo D5C/
T1*0.2. 9ntente -a+.iar la u.i-a-i'n de la !enten-ia &:GC que ha-e re4eren-ia a alguna po!i-i'n
de un +'dulo >position8>? 9ntente -olo-arla en la parte !uperior del di!eHo D5C/ %i no tiene
-ono-i+iento! de D5C/2 en-ontrar diM-ultade!2 o.vie e!ta tarea
Para realizar lo! -a+.io! en la! hoja! de e!tilo! hay do! op-ione!2 -a+.iar la! hoja! e6i!tente! o -rear
una nueva hoja C%% a!ignndole +ayor prioridad *n C%% la! 3lti+a! regla! que apare-en !on la! de
+ayor prioridad2 ha.rFa que aHadir una nueva tra! toda! la! e6i!tente! y !e opta ha.itual+ente por e!ta
!olu-i'n
T1*$. *ntre en la -arpeta del nuevo te+a2 edite el M-hero inde>.p.p y .u!que la zona donde aparez#
-an la! hoja! de e!tilo >.u!que H$inV re$BUsty$esheetU ` ?
T1*$.1. :e.e aHadir una -opia de la !enten-ia que aHade C%% en 3lti+o lugar para que tenga
+ayor prioridad y ha-iendo re4eren-ia al M-hero cursoc"s.css *!te M-hero !e -rear po!terior#
+ente2 la !inta6i! PDP quedarFa -o+o !e +ue!tra en el -'digo 4;2 de.e .u!-ar la zona -on lo!
C%% y aHadir tra! lo indi-ado en negrita
[doc=*!dd1ty$e1heet(c'ri%%(!se() . Pte:p$!tes?syste:?css?syste:.cssP)O
[doc=*!dd1ty$e1heet(c'ri%%(!se() . Pte:p$!tes?P . [this=*te:p$!te .
P?css?position.cssPE [type B Pte)t?cssPE [:edi! B PscreenEpro2ectionP)O
P?css?$!yo+t.cssPE [type B Pte)t?cssPE [:edi! B PscreenEpro2ectionP)O
P?css?print.cssPE [type B Pte)t?cssPE [:edi! B PprintP)O
...
Fdoc/>+ddEt)leE*eetALMri00-+seAC . Gte3pl+tes%G . Ft*is/>te3pl+te .
G%css%c.rsoc3s.cssG8 Ft)pe ? Gte7t%cssG8 F3edi+ ? Gscreen8proKectionGC1
Cdi2o )<. Ca"bios en inde>.p.p para aadir una nue&a .o:a de estilos prioritaria.
T1*$.2. 0Hada la! do! 3lti+a! lFnea! del -'digo 4; al M-hero inde>.p.p de !u te+a2 -ree un
nuevo M-hero va-Fo -on AotepadBB y gurdelo en la -arpeta css de !u nuevo te+a -on el no+.re
cursoc"s.css
-++ Mdulo (a 8 Too"la
T1*$.3. 0Hada una regla en e!te nuevo M-hero -o+o la !iguiente7 p Wco$or%redOX2 !i la hoja de
e!tilo! e!t 4un-ionando2 -uando re-argue la pgina de !u !itio lo! te6to! !e pondrn en rojo
0nte! de per!onalizar el te+a por -o+pleto !e introdu-irn alguno! a!pe-to! +! !o.re C%%2 -on-reta#
+ente do! +Rtodo! di4erente! para -a+.iar la! i+gene! de li!ta! D5C/ y el e4e-to C%%1 de .orde -on
i+agen
T1*'. %i !e Mja en el .loque Lo "Ds &isto hay una li!ta de .olo! Para -a+.iar el .olo por una
i+agen utili-e la !iguiente regla7 .:ostre!d W$ist=sty$e% +r$(P..?i:!ges?!rrow.pngP)OX
T1*'.1. Repita el pro-edi+iento pero -on lo! ele+ento! de !egundo nivel del +en3 prin-ipal
u!ando el !ele-tor .n!#=chi$d W`X Pro.a.le+ente el e4e-to no e! el de!eado2 por ello !e pro.ar
otro pro-edi+iento
T1*'.2. *l -'digo @0 e!ta.le-e una i+agen de 4ondo para una -aja2 pero la i+agen no !e repite y
queda alineada a la izquierda Con e!te e4e-to e! -o+o !i e6i!tiera un .olo2 4or+ado por la i+agen
de 4ondo Prue.e el -'digo en !u hoja de e!tilo!
.n+6/c*ild $i !
W
-+c(gro.nd0 tr!nsp!rent +r$(P..?i:!ges?!rrowRwhiteRgrey.pngP) 8p) center no=repe!t1
X
Cdi2o *?. !ondo de de ca:a con i"a2en no repetiti&a.
T1*7. Con el !iguiente pro-edi+iento !e e!ta.le-e una i+agen repetitiva -o+o .orde de una -aja
Copie en pri+er lugar la i+agen star.pn2 a la -arpeta i+age! e6i!tente dentro de la -arpeta del te+a
-ur!o-+!
T1*7.1. $tilizando el !ele-tor del .loque de pu.li-idad .(!nnergro+p aHada la! propiedade!
indi-ada! en el -'digo @1
-order/top016p) so$id tr!nsp!rent1
-order/-otto3016p) so$id tr!nsp!rent1
-order/i3+ge0 +r$(P..?i:!ges?st!r.pngP) 28 0 28 0 repe!t1
Cdi2o *-. I"a2en en borde de ca:a con CSS(.
T1*7.2. Prue.e alterar lo! n3+ero!2 -a+.iar la propiedad repe!t por ro+nd y vea el e4e-to
T1*,. ,inal+ente !o.ree!-ri.a el M-hero 3a&icon.ico del te+a por el !u+ini!trado -on el +aterial
del +'dulo *!te i-ono e! el que +o!trar el navegador -uando !e aHada a lo! 4avorito! el !itio Je.
*l o.jetivo del re!to de e!ta !e--i'n e! -on!eguir el a!pe-to lo +! pare-ido a la Mgura )1 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
T1**. :e.e tra.ajar -on ,ire.ug y AotepadBB aHadiendo regla!2 guardando la hoja de e!tilo! y
re-argando la pgina en el navegador en -ada -a+.io para ver lo! e4e-to!
T1**.1. *n pri+er lugar revi!e la! op-ione! de la plantilla de!de el +en3 de ad+ini!tra-i'n
*6ten!ione! U Plantilla! -a+.iado el logo a lo2otipo.pn2 y en 5e+plate -olour e!ta.lez-a el valor
Mdulo (a 8 Too"la -+M
-u!to+ -on un -olor de 4ondo total+ente .lan-o
T1**.2. Co+ien-e a tra.ajar !o.re el M-hero C%% aHadiendo do! tipogra4Fa!2 de.e -opiar lo! tre!
M-hero! -on tipogra4Fa! in-luida! -on el +aterial del +'dulo a una nueva -arpeta -on no+.re
4ont! dentro nuevo te+a %iguiendo el eje+plo de -'digo @2 de.e aHadir do! tipogra4Fa! +!
lla+ada! Ber@s.ireS9as. e Inder
=font/f+ce ,
font/f+3il)0 P3e2!V+1erifP1
src0 +r$(P..?fonts?3e2!V+1erif.ttfP)1
font/;eig*t0 nor:!$1
font/st)le0 nor:!$1
X
Cdi2o *=. Ladir nue&a tipo2ra3Ca Web en CSS.
T1**.3. $tilizando el navegador Je. u!e el +en3 0r-hivo U 0.rir ar-hivo y de lo! re-ur!o! de
e!te +'dulo a.ra la i+agen :oo"la8captura.pn2 0hora -on Color/illa -apture lo! di4erente!
-olore! de la +ue!tra del te+a
SelectorBe! 6b7eti8o
.ody
*!ta.lez-a ,a+ilia de tipogra4Fa De:auSeri3 /ea 51;;2
9ntente -a+.iar el ta+aHo de la 4uente a 11pt2 .u!que en ,ire.ug -ual e! el
pro.le+a de la plantilla e intente !olu-ionarlo -on \i:port!nt
V%ele-torW 5odo! lo! prra4o! -on un alto de lFnea de 1.6e:
V%ele-torW 5odo! lo! enla-e! -on -olor de te6to Z1/771I
`all
*nvoltura de &oo+la para toda la pgina7
Day que -entrar la pgina +ediante :!rgin=$eft%!+toO y :!rgin=right%!+toO
0n-ho igual que el de la! i+gene! de la -a.e-era
`header *nvoltura para toda la -a.e-era2 .3!quelo -on Mre.ug2 e!ta.lez-a p!dding%0O
V%ele-torW /ogotipo -on un +argen alrededor de 10p)
`header ul+enu
*nvoltura del +en3 horizontal !uperior2 e! -o+plejo de -ontrolar7
$!e Colorzilla para -apturar el -olor de 4ondo y e!ta.lRz-alo /ea 51;;1
*!ta.lez-a el an-ho y +rgene! para que -oin-ida -on la i+agen de la
-a.e-era
:e.e e!tar pegado verti-al+ente a la i+agen2 intente eli+inar el .orde
.lan-o in4erior2 ne-e!itar en-ontrar -on ,ire.ug un nuevo !ele-tor
`-ontentarea2
`<rapper
le4t1
`right
*!to! !ele-tore! -ontrolan el +odelo de -aja! 9denti4Fquelo! -on ,ire.ug y7
/a -olu+na izquierda de.e tener -olor de 4ondo verde2 la dere-ha gri!
,uer-e una deter+inada altura en la -olu+na izquierda
Cini+i-e lo! hue-o! entre -olu+na! -on :!rgin y p!dding
/a -olu+na izquierda e!t pegada a la izquierda de la pgina >!in +argen?
`nav h1
Ca.e-era del +en3 de navega-i'n7
5ipogra4Fa a Ber@s.ireS9as.
Capture lo! -olore! de 4ondo y de la tipogra4Fa
Ponga !o+.ra al te6to -on7 te)t=sh!dow% 2p) 2p) 2p) Z333333O
*!ta.lez-a la! propiedade! :!rgin y p!dding ade-uada!
V%ele-torW
*l -olor del te6to de lo! enla-e! del +en3 de navega-i'n de.e ponerlo! en
.lan-o y -on la tipogra4Fa Inder
V%ele-torW /a !epara-i'n entre -ada ele+ento del +en3 de.e redu-ir!e
-+7 Mdulo (a 8 Too"la
`nav +oduleta.le
Caja para -ada +'dulo de la parte izquierda7
0u+ente el hue-o entre ello!
*!ta.lez-a un .orde de !epara-i'n in4erior .lan-o y de an-ho vi!i.le
`right h1
Ca.e-era! de lo! +'dulo! de la -olu+na dere-ha7
$!e la tipogra4Fa Ber@s.ireS9as.
0u+ente el ta+aHo de la 4uente al +eno! al 1809
Ponga !o+.ra a e!te te6to -on te)t=sh!dow% 2p) 2p) 2p) Z777777O
&uegue -on lo! valore! de te>t8s.ado9 para -o+pro.ar el e4e-to
*!ta.lez-a un .orde in4erior
V%ele-torW
/o! te6to! de lo! prra4o! de la -olu+na dere-ha de.en tener el ta+aHo de la
tipogra4Fa +! pequeHa2 -on-reta+ente a 0.e:
V%ele-torW
/o! tFtulo! de la! noti-ia! de la -olu+na dere-ha 0-tividade! tienen un e4e-to
!o+.ra -on la propiedad te)t=sh!dow% 2p) 2p) 2p) Z77777O
V%ele-tor8e!W
Ca.e-era! de la! noti-ia! de la -olu+na -entral7
*!ta.lez-a la 4uente a Ber@s.ireS9as..
0ju!te un +ayor ta+aHo de 4uente
$!e el -olor to+ndolo de la i+agen de re4eren-ia
*!ta.lez-a un .orde !uperior e in4erior de 1p) de an-ho y de -olor gri!
V%ele-torW
/o! -uadro! de in4or+a-i'n de -ada artF-ulo de.en e!tar alineado! a la
dere-ha -on letra itli-a y de +enor ta+aHo
V%ele-torW 0linee lo! enla-e! Leer "Ds a la dere-ha
V%ele-torW
/a! i+gene! de la! noti-ia! de la pgina de ini-io de.en tener un e4e-to
+ar-o apli-ando e!ta! propiedade!77 (order% so$id 1p)O p!dding%2p)O
intere!
intere! i+g
*! el -ontenido del +'dulo De interXs2 de.e elegir a -ual de lo! do! !ele-tore!
indi-ado! !e le apli-a -ada una de e!ta! propiedade!7
0linee verti-al+ente el te6to a la i+agen al -entro
*!ta.lez-a un -olor de 4ondo y +argene! ade-uado!
0plique e4e-to de !o+.ra -on (o)=sh!dow% 8p) 8p) 2p) Z777777O
V%ele-torW Iu!que un !ele-tor ade-uado para el te6to C/G%* 9A,G y o-3ltelo
V%ele-tore!W
Para el pie2 u!ando di4erente! !ele-tore! de.e -on!eguir7
*!ta.le-er un an-ho igual que la -a.e-era de 77p)
*!ta.le-er -o+o 4ondo un gradiente gri! u!ando propiedade! de C%%1
Cada uno de lo! tre! +'dulo! e!tn !eparado! por una lFnea gri! de 1p)
/a tipogra4Fa de la -a.e-era e! Inder en negrita
V%ele-torW *l 3lti+o pie de.e quedar -o+o el de la i+agen de +ue!tra
,abla =*. Selectores i"plicados en el te"a Curso CMS.
Mdulo (a 8 Too"la -+<
!i2ura +(. Lspecto del nue&o subte"a.
-M? Mdulo (a 8 Too"la
8- Ad/i#i.%(a$i4# ava#7ada
Para Mnalizar el +'dulo !e tratarn alguno! a!pe-to! avanzado! de la ad+ini!tra-i'n del !itio Je.
-o+o !on la ge!ti'n de u!uario!2 -o+ple+ento! y alguno! -o+ponente! in-luido! -on &oo+la no tratado!
-on anterioridad
1.1. Clonaci6n del sitio
/a -lona-i'n del !itio !e realiza +ediante la tR-ni-a ha.itual +o!trada en CC% anteriore! -on!i!tente
en -opiar lo! M-hero! y -lonar la .a!e de dato! %eguida+ente !e realizan alguna! -on!idera-ione!
T233. Copie todo! lo! M-hero! de &oo+la a la nueva u.i-a-i'n y e6traiga la .a!e de dato! en un M#
-hero %K/ *n la nueva -opia edite el M-hero de la raFz de &oo+la lla+ado con62uration.p.p y
e!ta.lez-a -orre-ta+ente lo! valore! indi-ado! en el -'digo @1 -on interroga-i'n
...
p+($ic [host B P$oc!$hostPO
p+($ic [+ser B PHHHPO
p+($ic [p!ssword B PHHHPO
p+($ic [d( B PHHHPO
p+($ic [d(prefi) B PiriedDDPO
...
p+($ic [$ogRp!th B PC%&&w!:p&&wwwNNHHH%$ogsPO
p+($ic [t:pRp!th B PC%&&w!:p&&wwwNNHHH%t:pPO
Cdi2o *(. Modi6cacin de con62uration.p.p de la con62uracin base de Too"la.
1.2. 8dministraci6n de usuarios
*n un portal Je. -on -ierto volu+en de in4or+a-i'n la ge!ti'n !uele di!tri.uir!e entre vario! u!ua#
rio! $na -onMgura-i'n tFpi-a -on!i!te en delegar la! di4erente! !e--ione! a u!uario! o grupo! Da.itual #
+ente e!to! u!uario! repre!entan per!ona! 4F!i-a! +ientra! lo! grupo! !uelen repre!entar departa+en#
to! o grupo! de la organiza-i'n *!te tipo de ge!ti'n !e .a!a en la rela-i'n e6i!tente entre u!uario2
grupo y per+i!o /a 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 Ze6i.le en -o+para-i'n -on otro! CC% pero -u.re una gran
parte de la! -onMgura-ione! tFpi-a! de !itio! Je. /a ge!ti'n de u!uario! y per+i!o! en e!te CC% e!t
dividida en7 u!uario!2 grupo! de u!uario! y nivele! de a--e!o /o! per+i!o! !e pueden apli-ar a lo!
-ontenido!2 a lo! ele+ento! de +en32 +'dulo!2 et-
*6i!ten +ultitud de po!i.le! -onMgura-ione! de per+i!o! para el !itio2 !'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!
T231. 0nte! de -o+enzar de.e -onMgurar el !ervidor de -orreo ele-tr'ni-o para el regi!tro de
u!uario! Iu!que en el +en3 de ad+ini!tra-i'n ConMgura-i'n =lo.al el lugar donde -onMgurar el
!ervidor %C5P del -ur!o
Mdulo (a 8 Too"la -M-
T231.1. Regi!tre alg3n u!uario para -o+pro.ar el !i!te+a de regi!tro por e+ail
T232. 0--eda al +en3 de ad+ini!tra-i'n $!uario! U =e!tor de u!uario!
T232.1. Cree un grupo lla+ado 4eporteros locales -uyo grupo padre !ea 4e2istered y -ree un
nivel de a--e!o lla+ado 4eportero local a!ignando a e!te nivel de a--e!o el grupo 4eporteros
locales.
T232.2. *n el ad+ini!trador de +'dulo! -ree un +'dulo en una u.i-a-i'n ade-uada que +ue!tre
el +en3 %ser Menu 0d+ini!tre e!te +en3 y edite el ele+ento %u.+it an 0rti-le e!ta.le-iendo
0--e!o a Reportero /o-al
T232.3. *dite la -ategorFa de artF-ulo! 0oticias locales y a!igne todo! lo! per+i!o! a 4eporteros
locales
T232.0. 0Hada a alg3n u!uario regi!trado a lo! grupo! 4e2istered y 4eporteros locales
T232.$. :e!de el +en3 prin-ipal -ree una pgina donde !e !oli-iten lo! dato! de entrada al
u!uario Puede u!ar el ele+ento de +en3 Kona Interna y u.i-ar un +'dulo o pgina para el ini-io
de !e!i'n de u!uario
T232.'. *ntre -on el nuevo u!uario u!ando la pgina anterior y una vez identiM-ado2 de.erFa
apare-er el +en3 de u!uario -on un enla-e para -rear un artF-ulo2 pero !olo en la -ategorFa para
la que tiene per+i!o!
1.3. Complementos
/o! -o+ple+ento! aHaden 4un-ionalidad e6tra al !itio &oo+la $n -o+ple+ento puede aHadir uno o
vario! -o+ponente! al portal -o+o pueden !er +'dulo!2 editore!2 utilidade!2 e!tadF!ti-a!2 et- Para
ad+ini!trarla! e!t el ge!tor de e6ten!ione! !ituado en el +en3 E>tensiones *n el ge!tor de e6ten!ione!
!e li!tan toda! la! e6ten!ione! di!poni.le! en el portal2 pero no tienen porque e!tar a-tiva! %e re-o+ien#
da no de!a-tivar ninguna !in !a.er a que parte de &oo+la pertene-e2 podrFa perder parte del portal
*n la pgina oM-ial de &oo+la hay un enla-e en lo! +en3! titulado E>tends %iguiRndolo !e a--ede
dire-ta+ente a la dire--i'n indi-ada en PRe4 @0Q y apare-e un li!tado organizado en -ategorFa! -on la!
e6ten!ione! di!poni.le! Puede -o+pro.ar la -antidad de e6ten!ione! e6i!tente!2 pero no toda! 4un-io#
nan -orre-ta+ente2 ni e!tn di!poni.le! para la ver!i'n que tenga+o! in!talada de &oo+la Co+prue.e
lo! -o+entario! e in!tru--ione! ante! de de!-argar ninguna
Para realizar prue.a! !e u!ar una e6ten!i'n para pre!entar -arru!ele! de i+gene! -on e4e-to! previa#
+ente te!tada para veriM-ar el -orre-to 4un-iona+iento
T233. 0--eda de!de el +en3 de ad+ini!tra-i'n *6ten!ione! U =e!tor de *6ten!ione! a la op-i'n
9n!talar
T233.1. %ele--ione el M-hero uniteO.ori/ontalOcarouselO-.=./ip y pul!e !o.re el .ot'n %u.ir e
9n!talar 0pare-ern un te6to indi-ando lo! -o+ponente! in!talado! en !u portal
-M= Mdulo (a 8 Too"la
T233.2. Aavegue al +en3 izquierdo =e!tionar2 li!te toda! la! e6ten!ione! y .u!que %nite 4Fje!e
en la -olu+na 5ipo para ver que !e ha in!talado2 e! un +'dulo en e!te -a!o
T233.3. 0nte! de tra.ajar -on el nuevo -o+ponente !u.ire+o! alguna! i+gene! de prue.a
0--eda al ge!tor +ulti+edia y -ree una -arpeta lla+ada carousel5 en e!ta nueva -arpeta !u.a la!
1 i+gene! de eje+plo lla+ada! slider8-.:p22 slider8=.:p2 y slider8(.:p2
T233.0. 0--eda a Co+ponente! U $nite D Carou!el y aHada un nuevo carousel *!ta.lez-a el
an-ho a 1(0p6 y .u!que la 4or+a de aHadir la! 1 i+gene! a e!te -arou!el
T233.$. 0--eda al ge!tor de +'dulo! y aHada uno nuevo del tipo $nite Dorizontal Carou!el en la
po!i-i'n ( o po!i-i'n 1 !eg3n de!ee
T233.'. Aavegue a !u pgina prin-ipal y vea el re!ultado
1.#. -,s componentes
%i !e o.!erva el +en3 de -o+ponente! de &oo+la2 ade+! de lo! pro.ado! en la! !e--ione! anteriore!
e6i!ten +! Ao !e -on!idera ne-e!ario de!-ri.ir la 4un-ionalidad de -ada uno de ello! ya que todo! ello!
!e .a!an en +'dulo!2 ele+ento! de +en3 y otra! -ara-terF!ti-a! ya e!tudiada! %F !e re-o+ienda que
reali-e alguna! prue.a! -on lo! indi-ado! a -ontinua-i'n7
T230. Prue.e el ge!tor de -onta-to!
T23$. Prue.e la +en!ajerFa
T23'. Prue.e la! nota! de u!uario
=- Re*e(e#$ia.
PRe4 4)Q Je. GM-ial de :u.lin Core2 <http788<<<du.lin-oreorg8"
PRe4 4(Q Re!our-e :e!-ription ,ra+e<orL >R:,? de J1C2 <http788<<<<1org8R:,8"
PRe4 4EQ Pgina oM-ial de &oo+la2 <http788<<<joo+laorg8"
PRe4 4;Q :e!arrollo .!i-o de plantilla! para &oo+la2 /eandro :]Gno4rio2 0go!to de 2011
<http788.i.liote-a-o+unidadjoo+laorg8li.ro!8plantilla!#joo+la8"
PRe4 @0Q *6ten!ione! para &oo+la2 <http788e6ten!ion!joo+laorg8"
Mdulo (a 8 Too"la -M(
&4dulo 2, ' D(u0al
Portales +eb basados en 0rupal
- Re.u/e#
2ic-ero 1e!cri.cin
drupal#(2Ezip 9n!tala-i'n de :rupal (
drupal#(2Ee!po %oporte de e!paHol para :rupal (
!+tp#(6#10zip %oporte %C5P -on autenti-a-i'n
<y!i<yg#(6#22zip %oporte para editore! enrique-ido!
tiny+-eO1@Ezip Ver!i'n original de 5inyCC*
-LeditorO1))1zip Ver!i'n original de C[*ditor
re-ur!o!#drupalzip 5e6to! y grM-o! preparado! para en e!te +'dulo
,abla =+. !ic.eros necesarios para la reali/acin de este "dulo.
2- I#%(odu$$i4#
:rupal e! uno de lo! ge!tore! de -ontenido -on te-nologFa PDPBCy%K/ +! avanzado! y +!
-ono-ido! *!t di!eHado -on un Mn +ultiprop'!ito2 por ello2 !e adapta a +ultitud tipo! de portale! Je.2
e! +uy Ze6i.le y el di!eHo interno 4a-ilita a lo! progra+adore! la -rea-i'n de -o+ple+ento! -apa-e! de
re!olver -ualquier +odo de 4un-iona+iento para un !itio Je. 0lguno! eje+plo! tFpi-o! para +o!trar el
u!o de :rupal e! la pgina oM-ial de /a Ca!a Ilan-a PRe4 @1Q y 5he *-ono+i!t PRe4 @2Q2 allF ver
:rupal en 4un-iona+iento
Ao o.!tante2 pre!enta -ierta diM-ultad en !u aprendizaje al e!tar di!eHado -on un prop'!ito +uy gene#
Rev 4(2)
ral Para -o+prender la Mlo!o4Fa de organiza-i'n de lo! -ontenido! del portal en :rupal hay que
4a+iliarizar!e -on -ierto! -on-epto! -o+o !on7 tipo! de -ontenido2 jerarquFa de +en3!2 .loque! y
ta6ono+Fa Por otro lado2 en la ge!ti'n de u!uario! y prote--i'n de -ontenido apare-en lo! per+i!o! y
role! que ta+.iRn !ern e!tudiado!
*n -ontra partida2 -on una in!tala-i'n .!i-a de :rupal en-ontrare+o! un 4un-iona+iento +uy po.re y
-o+plejo -o+o punto de partida para realizar un !itio Je. Para o.tener una e6perien-ia gratiM-ante y
o.tener .ueno! re!ultado! -on e!te CC% e!t -o+3n+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 :rupal2 el de!arrollo2
+anteni+iento y la in4or+a-i'n di!poni.le !o.re lo! -o+ple+ento! e!t +uy -uidada en !u pgina Je.
%'lo -on vi!itar la pgina de de!-arga de -ualquier -o+ple+ento2 !e +ue!tran e!tadF!ti-a! del +i!+o2
in-lu!o n3+ero de in!tala-ione!
Co+o :rupal e! +uy e6ten!o2 -reare+o! un !itio Je. de eje+plo in-luyendo todo el -ontenido de e!te
-ur!o2 durante e!te pro-e!o no !e re-orrern toda! la! op-ione! di!poni.le! de :rupal2 pero !e
o.!ervar el poten-ial de e!te CC% 4rente &oo+la e!tudiado en el +'dulo anterior
2- I#.%ala$i4# ) $o#E:u(a$i4# ,1.i$a
/a in!tala-i'n de :rupal !igue el pro-edi+iento e!tndar utilizado en la +ayorFa de lo! ge!tore! de
-ontenido! PDPBCy%K/ e!tudiado! a lo largo del -ur!o /a 3ni-a di4eren-ia e! la po!i.ilidad de in!talar
el !oporte de e!paHol ante! de realizar la in!tala-i'n2 a!F la in!tala-i'n la realizare+o! en nue!tro
idio+a
T237. :e!-o+pri+a el ar-hivo drupal8M.=7./ip2 en una nueva -arpeta dentro de .tdocs de Iitna+i
T237.1. :rupal tiene tradu--i'n di!poni.le para la propia in!tala-i'n2 la in!talare+o! -opiando el
ar-hivo drupal8M.=7.es.po en la !u.-arpeta de :rupal proMle! U !tandard U tran!lation!
T237.2. 0hora !e puede -rear el u!uario2 la .a!e de dato! Cy%K/ para :rupal y pro-eder a la
in!tala-i'n de!de el navegador
T237.3. 9ni-ie la in!tala-i'n en +odo e!tndar2 en el !egundo pa!o de in!tala-i'n podr
!ele--ionar el idio+a e!paHol Contin3e la in!tala-i'n y -uando ter+ine a.andone el u!uario de
ad+ini!trador y vi!ite el nuevo !itio Je.
3.1. Con>%uraci6n b,sica
*!ta.le-ere+o! una -onMgura-i'n +Fni+a para poder tra.ajar -on :rupal2 todo e!to !e realiza de!de
el +en3 de ad+ini!tra-i'n2 -on!i!tente en una !erie de enla-e! en la parte !uperior de la pgina Je.
T23,. 0--eda al +en3 de ad+ini!tra-i'n y en ConMgura-i'n U %i!te+a U 9n4or+a-i'n del !itio e!ta#
.lez-a el Ao+.re del !itio Je. y /e+a2 por eje+plo2 Curso CMS y Edicin Tulio =?-) re!pe-tiva#
+ente
-M+ Mdulo (b 8 Drupal
T23*. 0-tivare+o! la op-i'n lla+ada $R/! li+pia!2 para ello2 a--eda al +en3 de ad+ini!tra-i'n
ConMgura-i'n U I3!queda y +etadato! U $R/! li+pia!
T213. ConMgurare+o! una -arpeta e!pe-ial para que :rupal pueda al+a-enar lo! ar-hivo! privado!
*!ta -arpeta no puede e!tar vi!i.le de!de el !ervidor Je.2 por ello hay que -rearla 4uera de la
-arpeta .tdocs de Iitna+i
T213.1. Con el e6plorador de Jindo<! -ree una -arpeta dentro de Iitna+i2 pero 4uera de la
-arpeta .tdocs2 ll+ela drupalpri&ado
T213.2. 0--eda al +en3 de ad+ini!tra-i'n ConMgura-i'n U Culti+edia U %i!te+a de ar-hivo!
*l -uadro de te6to Ruta al !i!te+a privado de ar-hivo! de.e rellenarlo -on la ruta de la -arpeta
que ha -reado2 de.erFa !er7 CPUBitna"iU9a"pstac@8*.).=+8?Udrupalpri&ado %i la -arpeta
drupalpri&ado indi-ada anterior+ente no e6i!te en el di!-o o no e!t .ien u.i-ada2 :rupal
+o!trar errore!
3.2. Instalaci6n de complementos A m6dulos
5ra! tra.ajar -on %C,2 JordPre!!2 &oo+la y otro!2 la in!tala-i'n de -o+ple+ento! en :rupal no
revi!te +ayor diM-ultad %'lo hay que -on!iderar la no+en-latura utilizada2 para :rupal un +'dulo e!
un -o+ple+ento2 +ientra! en &oo+la era un .loque de -ontenido
ga !e +en-ion' que :rupal e! un CC% genRri-o y Ze6i.le2 pero la in!tala-i'n .a!e no trae +u-ha
4un-ionalidad 0l e!tar pen!ando para !er total+ente per!onalizado +ediante +'dulo!2 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 Je. oM-ial
%i navega a la !e--i'n de +'dulo! de la pgina oM-ial PRe4 @1Q2 R!to! e!tn per4e-ta+ente -atalogado! y
-ontienen -antidad de in4or+a-i'n !o.re !u el 4un-iona+iento2 ver!ione! di!poni.le!2 a-tividad del
proye-to2 errore! et- *! re-o+enda.le revi!ar .ien la in4or+a-i'n !o.re un +'dulo ante! de utilizarlo2
!o.re todo en lo re4erente a la indi-a-i'n !o.re la a-tividad de lo! de!arrolladore!2 pode+o! en-ontrar
+'dulo! a.andonado!2 !iendo un error utilizarlo!
9n!talare+o! un +'dulo +uy 3til que no viene por de4e-to -on la -onMgura-i'n .!i-a *! un -one-tor
para !ervidore! de -orreo e6terno!
T211. 0--eda al +en3 de ad+ini!tra-i'n C'dulo! y u!e al enla-e 9n!talar un nuevo +'dulo !ituado
al prin-ipio del li!tado de +'dulo!
T211.1. %iga el enla-e 9n!talar nuevo +'dulo y utili-e el 4or+ulario %u.ir un ar-hivo de +'dulo o
te+a para in!talar el ar-hivo s"tp8s"tp8M.>8-.?./ip di!poni.le -on el +aterial del +'dulo
T211.2. /i!te lo! +'dulo! y -o+prue.e !i %C5P 0uthenti-ation %upport apare-e en el li!tado de
+'dulo!2 pero !in a-tivar
T211.3. Carque el +'dulo -o+o a-tivo y guarde lo! -a+.io! u!ando el .ot'n =uardar ConMgura#
-i'n
T211.0. 0--eda al +en3 de ad+ini!tra-i'n !uperior ConMgura-i'n y .u!que alguna re4eren-ia al
Mdulo (b 8 Drupal -MM
+'dulo re-iRn in!talado >%C5P 0uthenti-ation %upport?
T211.$. *ntre en el enla-e y -onMgure el !ervidor de -orreo -orre-ta+ente2 en el -a+po %end
te!t e#+ail e!-ri.a !u -orreo ele-tr'ni-o para que :rupal envFe un -orreo de prue.a y veriMque !i
lo re-i.e
T211.'. Ao !e olvide de a-tivar la -a!illa 5urn thi! +odule on or oi en on
0 lo largo de e!te +'dulo !e in!talarn +! -o+ple+ento! utilizando e!te +i!+o pro-edi+iento !eg3n
!ean ne-e!ario! para -on!eguir adaptar :rupal a nue!tra! ne-e!idade!
!- Ad/i#i.%(a$i4# de $o#%e#ido.
*l +odelo de -ontenido! en :rupal e!t pen!ado y de!arrollado para -on!eguir la +ayor generalidad
po!i.le %e -on!igue in-luyendo un generador de tipo! de -ontenido y dejando al ad+ini!trador del !itio
Je. deMnir -ada tipo de -ontenido y !u! -a+po! a!o-iado! de una 4or+a +uy Ze6i.le
Cuando !e -rea un -ontenido -on :rupal2 el -ontenido !er de alg3n tipo >pgina2 artF-ulo2 et-? y -ada
ele+ento de -ontenido -reado !e lla+a nodo Cada nodo !igue un +odelo de organiza-i'n de la in4or+a#
-i'n -la!iM-ada por tre! atri.uto!7
5ipo de -ontenido7 :eMne lo! -a+po! e6i!tente! que puede tener2 por eje+plo2 el tipo noticia tiene
un te6to y una i+agen2 +ientra! el tipo arc.i&o #D! -ontiene un 3ni-o ar-hivo P:,
5a6ono+Fa7 &uego de etiqueta! que -ara-teriza la in4or+a-i'n -ontenida2 por eje+plo2 una noti-ia
puede !er !o.re &oo+la2 un ar-hivo !o.re un -o+ple+ento de :rupal y una pgina tratar !o.re un
-o+ple+ento de %C, *l juego de etiqueta! !erFa Drupal2 Too"la2 Co"ple"ento y SM!
Cen3!7 /o! +en3! e!ta.le-en una jerarquFa en la in4or+a-i'n2 lo! -ontenido! pueden e!tar a!o-ia#
do! a una entrada de +en32 a!F el r.ol del +en3 !e de!plegar auto+ti-a+ente al a--eder a
-ierto -ontenido y la .arra de navega-i'n >.read-ru+!? operar -orre-ta+ente
Para pro4undizar en e!to! -on-epto! !e -rear un !itio Je. que in-luya toda la in4or+a-i'n re4erente a
e!te -ur!o de CC% *l pri+er pa!o en :rupal2 ante! de -o+enzar el de!arrollo2 e! -la!iM-ar la in4or#
+a-i'n a al.ergar2 e!ta tarea e! -ru-ial en -ualquier de!arrollo Je. Partir de una .uena organiza-i'n
ante! de -o+enzar el de!arrollo !e -on!igue adquiriendo -ierta e6perien-ia en organiza-i'n de -onteni #
do! Je. $na organiza-i'n -l!i-a de la in4or+a-i'n tanto en lo! CC% -o+o en lo! !i!te+a! in4or+#
ti-o! utiliza una organiza-i'n jerrqui-a2 en -a+.io2 en lo! !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! -onteni #
do!2 no !ie+pre e! ade-uada y e!t hoy en dFa o.!oleta Vere+o! alternativa! po!terior+ente
$!are+o! el eje+plo de -la!iM-a-i'n +o!trado en la ta.la 2(2 donde !e pone de +aniMe!to -o+o la
organiza-i'n jerrqui-a genera -ierta! duda! %uponga un !itio Je. para al.ergar +'dulo! y te+a! para
:rupal2 &oo+a2 %C,2 y +u-ho! +! %e podrFa ha-er un razona+iento -o+o el !iguiente7
Desde un punto de &ista clDsico se pensarCa en una seccin por CMSP Drupal5 Too"la5
-M7 Mdulo (b 8 Drupal
etc. Cada una de ellos tendrCa dos subseccionesP Co"ple"entos 1 ,e"as.
I"a2ine"os Eue un &isitante Eue desea reali/ar su Dlbu" de 3otos pero no .a
decidido el CMS a usar5 tiene Eue &isitar todos los CMS 1 listar los co"ple"entos de
cada uno de ellos.
Z0o se podrCa tener una seccin Eue liste todos los co"ple"entos5 independiente de
Drupal o Too"la[5 pues aada"os una seccin lla"ada ,odos los co"ple"entos.
La solucin :erDrEuica 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!iM-ando .ien la in4or+a-i'n +ediante la! deno+inada! etiqueta! o ta6o#
no+Fa 0unque ya apare-ieron anterior+ente en otro! CC%2 en :rupal -o.ran e!pe-ial i+portan-ia al
!er un CC% di!eHado para al.ergar gran -antidad de in4or+a-i'n Con la in4or+a-i'n .ien etiquetada !e
generan li!tado! en 4un-i'n de la -la!iM-a-i'n realizada 0de+!2 utilizando lo! +etadato!2 ta+.iRn
-onte+plado! en :rupal2 !e aporta in4or+a-i'n adi-ional
Contenido Ti.o de contenido Ati<ueta!
5e+a -on Zore! a+arilla! Pgina -on adjunto! :rupal2 5e+a
5e+a -on -a+po de 43t.ol Pgina -on adjunto! &oo+la2 5e+a
al.u+ de 4oto! +yPhoto Pgina -on adjunto! Co+ple+ento2 :rupal
al.u+ de 4oto! +yPhoto Pgina -on adjunto! Co+ple+ento2 &oo+la
Pgina de 9n4or+a-i'n al.u+ de 4oto! Pgina .!i-a Co+ple+ento2 :rupal
Pgina de in4or+a-i'n !o.re te+a -on Zore! a+arilla! Pgina .!i-a 5e+a2 :rupal
,abla =M. E:e"plo de clasi6cacin por tipo de contenido 1 ta>ono"Ca.
#.1. Creaci6n de contenidos
0nte! de tra.ajar -on lo! tipo! de -ontenido! utilizare+o! lo! e6i!tente!2 -o+enzando por -rear la
pgina prin-ipal del !itio -o+o una pgina e!tti-a -on un te6to de pre!enta-i'n del !itio Je.
T212. Aavegue a la pgina prin-ipal del !itio Je. y podr leer un +en!aje indi-ando que todavFa no
!e ha -reado -ontenido para la pgina prin-ipal $tili-e el enla-e de la pgina prin-ipal 0Hadir nuevo
-ontenido para -rear la pgina
T212.1. 0pare-er un li!tado de tipo! de -ontenido! di!poni.le!2 ini-ial+ente :rupal in-luye do!7
LrtCculo y #D2ina bDsica Cree una pgina .!i-a para la pgina prin-ipal
T212.2. Rellene lo! -a+po! 5itle y Iody2 en tFtulo e!-ri.a Curso CMS y en el te6to utili-e el te6to
preparado en te>tos8drupal.t>t ,Fje!e -o+o no e6i!te un editor enrique-ido -o+o en &oo+la y
otro! CC% Co+o !e indi-'2 :rupal trae po-a 4un-ionalidad .a!e2 po!terior+ente in!talare+o!
alguno de lo! di!poni.le!
T212.3. Para que el -'digo D5C/ no !ea Mltrado e! ne-e!ario que !ele--ione .ajo el -uadro de
edi-i'n en ,or+ato de te6to !ele--ione la op-i'n ,ull D5C/ %i ya guard' lo! -a+.io! puede
Mdulo (b 8 Drupal -M<
volver a editar la pgina y a-tivar e!ta op-i'n po!terior+ente
T212.0. 0--eda al +en3 in4erior Gp-ione! de ruta $R/ y rellene el -a+po 0lia! de $R/ -on un
no+.re que re-uerde2 !in e!pa-io! ni -ara-tere! e6traHo!2 por eje+plo pa2ina8principal =uarde
lo! -a+.io! !in rellenar ning3n dato +!
T212.$. %i vi!ita de nuevo !u !itio ver que todavFa no !e ha e!ta.le-ido !u nueva pgina -o+o
pgina prin-ipal 0--eda al +en3 de ad+ini!tra-i'n ConMgura-i'n U %i!te+a U 9n4or+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+ente7
pa2ina8principal
T212.'. Vi!ite !u !itio Je.
Para tra.ajar -'+oda+ente de!de el navegador lo! ge!tore! de -ontenido in-luyen editore! enrique#
-ido!2 ya han apare-ido en otro! CC% Day +ultitud de ello! y !on de!arrollo! independiente! de lo!
CC%2 de he-ho2 :rupal tiene un +'dulo -apaz de enlazar -on -ualquiera de lo! +! u!ado!
9n!talare+o! e!te +'dulo
T213. *n el +en3 de ad+ini!tra-i'n C'dulo! a--eda al enla-e 9n!talar nuevo +'dulo 9n!tale el
+'dulo 91si9128M.>8=.=./ip2 a-tFvelo y a--eda a !u -onMgura-i'n
T213.1. *n la -onMgura-i'n de e!te +'dulo !i de!pliega la !e--i'n 9n!tallation in!tru-tion! ver
-o+o trae !oporte para +ultitud de editore! integra.le! en el navegador Je.2 pero ninguno e!t
in!talado en !u !i!te+a Puede intentar de!-argar alguno e in!talarlo2 por e6perien-ia propia2
puede tener pro.le+a! 9n!talare+o! una ver!i'n -on-reta de 5inyCC* y de C[*ditor de!-ar#
gada previa+ente de!de PRe4 @@Q y PRe4 @)Q te!tada! a prop'!ito para e!te -ur!o
T213.2. 0.ra el ar-hivo -o+pri+ido tin1"ceO(.*.7./ip %eg3n la! in!tru--ione! indi-ada! en la
pgina de -onMgura-i'n Jy!i<yg proMle!2 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 :rupal7 !ite! U all U li.rarie! /a -arpeta li.rarie! puede que no
e6i!ta -rRela en e!te -a!o *n e!ta -arpeta !e de.e de!-o+pri+ir el ar-hivo tin1"ceO(.*.=./ip
T213.3. 5ra! la de!-o+pre!i'n tendre+o! una nueva -arpeta en el di!-o -on no+.re tin1"ce %i
!e re-arga la pgina de -onMgura-i'n Jy!i<yg proMle! apare-er e!te editor -o+o in!talado
:e.e !ele--ionarlo del +odo +o!trado en la Mgura )4
T213.0. Repita el pro-e!o -on C[*ditor2 M-hero c@editorO(.+.+.-./ip
T213.$. Por 3lti+o hay que -onMgurarlo Cuando pul!e guardar apare-er un enla-e en la
-olu+na Gpera-ione! lla+ado *ditar Para el
+odo ,ullD5C/ entre en Rl y podr -onMgurar 4
!e--ione!
T213.'. :e!pliegue la !e--i'n Iutton! and
Plugin! y +arque toda! la! op-ione! +eno! la
op-i'n IICode2 e!ta 3lti+a e! para 4oro! tipo
phpII >no lo tene+o! in!talado en :rupal? 5enga
pa-ien-ia2 le llevar uno! +inuto! +ar-ar tanta!
-7? Mdulo (b 8 Drupal
!i2ura +). Seleccin de editor.
op-ione!2 -uando ter+ine2 guarde lo! -a+.io!
0Hadire+o! +! -ontenido para pro.ar el 4un-iona+iento del nuevo editor
T210. 0--eda al +en3 de ad+ini!tra-i'n Contenido y utili-e el enla-e 0gregar -ontenido /e
preguntar el tipo de -ontenido a aHadir2 !ele--ione Pgina .!i-a *!ta.lez-a el ,or+ato de te6to al
+odo ,ull D5C/ y rellene la pgina de la !iguiente 4or+a7
T210.1. *n tFtulo e!-ri.a Matriculacin y en el te6to e!-ri.a alg3n te6to pro.ando !i el editor
in!talado 4un-iona -orre-ta+ente o intente pegar el -'digo D5C/ preparado para e!ta pgina
T210.2. Iaje la pgina ha!ta en-ontrar varia! op-ione! +! para rellenar /a pri+era -ontiene el
te6to Gp-ione! del +en32 +arque la -a!illa Propor-iona un enla-e de +en3 y e!-ri.a en el -a+po
5Ftulo del enla-e del +en3 la 4ra!e MatrCcula
T210.3. $tili-e el .ot'n =uardar y vi!ite la pgina prin-ipal de !u portal Je.2 ver -o+o apare-e
una nueva pe!taHa enlazando -on la pgina re-iRn -reada
#.2. -en?s
0l igual que &oo+la lo! +en3! en :rupal !on un r.ol jerrqui-o de enla-e! ordenado! -on el o.jetivo
de 4a-ilitar el a--e!o a lo! -ontenido! del !itio en el +odo de!eado por el ad+ini!trador :rupal per+ite
-rear tanto! +en3! -o+o !e de!een y trae -uatro predeMnido!7
0d+ini!tra-i'n7 *! el +en3 que !e e!t utilizando para ad+ini!trar el !itio2 e! total -onMgura.le
Cen3 prin-ipal7 Corre!ponde al +en3 !uperior2 no !e de.e -on4undir -on el +en3 de navega-i'n
Aavega-i'n7 *! un +en3 jerrqui-o donde !e puede e!ta.le-er -'+oda+ente una e!tru-tura para
el !itio Je.
Cen3 de u!uario7 %'lo apare-e para lo! u!uario! regi!trado!2 e! un .uen lugar para enlazar a--io#
ne! o -ontenido re!tringido
Co+enzare+o! -reando una e!tru-tura en el +en3 de navega-i'n -on la e!tru-tura indi-ada en la Mgura
)@
T21$. 0--eda al +en3 de ad+ini!tra-i'n *!tru-tura U Cen3! *n el li!tado de +en3! !iga el enla-e
li!tar enla-e! del +en3 de Aavega-i'n
T21$.1. Co+pro.ar la e6i!ten-ia de enla-e! en e!te +en32 no lo!
de!a-tive o tendr pro.le+a! al aHadir nuevo -ontenido
T21$.2. 0nte! de -rear un nuevo ele+ento de +en3 !e ne-e!ita
tener un -ontenido -on el que enlazar 0-eda al +en3 Contenido y
u!e el enla-e 0gregar -ontenido para -rear una Pgina I!i-a
*!ta.lez-a el tFtulo a Gestores de contenidos del curso2 y en el
-uerpo -opie -'digo el D5C/ preparado que enu+era todo! lo!
Mdulo (b 8 Drupal -7-
!i2ura +*. TerarEuCa del sitio.
Cen3 prin-ipal
Cen3 prin-ipal
=e!tore! de -ontenido
=e!tore! de -ontenido
%C,
%C,
&oo+la
&oo+la
:rupal
:rupal
5e+a!
5e+a!
Co+ple+ento!
Co+ple+ento!
ge!tore! de -ontenido e!tudiado! ha!ta el +o+ento
T21$.3. *!ta.lez-a en la op-i'n de la pgina Gp-ione! de $R/ el -a+po 0lia! de $R/ a un
no+.re que re-uerde2 lo ne-e!itar para poder enlazar el +en3 -on e!ta pgina2 por eje+plo u!e
presenta82estores y guarde la pgina
T21$.0. Vuelva a la pgina de ad+ini!tra-i'n de +en3! y li!te lo! enla-e! del +en3 de navega#
-i'n $tili-e 0Hadir enla-e para -rear un nuevo ele+ento de +en3 Rellene el tFtulo -on la 4ra!e
Gestores de contenido2 en la ruta de.e indi-ar el alia! e!ta.le-ido en el pa!o anterior presenta8
2estores y e!ta.lez-a la op-i'n Pe!o al valor #1
T21$.$. Aavegue a !u !itio Je.2 o.!erve -o+o apare-e el +en3 de navega-i'n y utili-e el enla-e
re-iRn -reado para -o+pro.ar !i e! -orre-to
T21'. Cree tre! pgina! .!i-a! de!de el +en3 de ad+ini!tra-i'n Contenido!2 una para -ada ge!tor
de -ontenido! *!ta.lez-a el tFtulo en -ada una de ella! a7 Si"ple Mac.ines !oru"2 Too"la y Drupal
Ao olvide e!ta.le-er un alia! para el $R/2 utili-e7 presenta8s"32 presenta8:oo"la2 presenta8drupal
re!pe-tiva+ente
T21'.1. 0--eda de nuevo al ge!tor de +en3! y li!te lo! enla-e! del +en3 de navega-i'n :e.e
aHadir tre! nueva! entrada! a e!te +en3 re4eren-iando la! pgina! -reada!2 pero de.en tener
-o+o padre el ele+ento de +en3 -reado en 521@4 >Gestores de contenido? Para -on!eguirlo
utili-e el -uadro de!plega.le *nla-e Padre
T21'.2. G.!erve la e!tru-tura de +en3 -reada navegando el !itio y -on!iga que el pri+er
ele+ento del !u.+en3 !ea %C, 0de+! de.e intentar -onMgurar la entrada Gestores de
contenido para que aparez-an !ie+pre e6pandido! !u! hijo!
T21'.3. *dite ahora el +en3 titulado Cen3 Prin-ipal y aHada un enla-e titulado Centro de
!or"acin #er"anente -uya ruta !ea http788<<<-4pu!e!
#.3. *ipos de contenidos
/a ad+ini!tra-i'n de lo! tipo! de -ontenido -o.ra una +ayor i+portan-ia en lo! CC% de -ar-ter
general -o+o e! :rupal *l tipo de -ontenido ayuda a di!tinguir el tipo de dato! al+a-enado2 pero no e!
el pro-edi+iento que !e de.e u!ar en :rupal para di!tinguir la in4or+a-i'n -ontenida
%e de.en utilizar lo! tipo! de -ontenido ade-uada+ente2 para ello !e pueden e!ta.le-er alguna! regla!
de .uena! pr-ti-a!7
Ao a.u!ar -reando +u-ho! tipo! de -ontenido! en un !itio
Ao -la!iM-ar el tipo de in4or+a-i'n en 4un-i'n del tipo de -ontenido2 para e!o e!tn la! etiqueta!
>ta6ono+Fa?
%'lo -rear un nuevo tipo de -ontenido -uando ninguno de lo! e6i!tente! !e adapte al tipo de
in4or+a-i'n para al+a-enar Por eje+plo2 ninguno de lo! tipo! e6i!tente! en una in!tala-i'n .a!e
de :rupal puede al+a-enar ar-hivo! adjunto!2 enton-e!2 ne-e!itare+o! un nuevo tipo
-7= Mdulo (b 8 Drupal
*n nue!tro eje+plo de !itio Je. ne-e!ita+o! al+a-enar lo! te+a!2 plantilla! y lo! -o+ple+ento! para
lo! di4erente! CC% e!tudiado! $na +ala pr-ti-a en nue!tro eje+plo !erFa -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'neo7
Para al+a-enar un te+a en nue!tro !itio Je. ne-e!ita+o! -rear un tipo de -ontenido que -onten#
ga un te6to 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 te6to de!-rip#
tivo y un ar-hivo para poder de!-argarlo
Real+ente !on el +i!+o tipo de -ontenido2 -reare+o! un tipo de -ontenido lla+ado #D2ina con ad:untos2
y para di!tinguir !i e! un te+a o un -o+ple+ento u!are+o! etiqueta! /a! etiqueta! la! tratare+o!
po!terior+ente2 !e e+pezar -reando e!te tipo de -ontenido
T217. 0--eda al +en3 de ad+ini!tra-i'n *!tru-tura U 5ipo! de Contenido y utili-e el enla-e 0Hadir
5ipo de Contenido
T217.1. 5itule al nuevo tipo de -ontenido #D2ina con ad:untos2 e!-ri.a una de!-rip-i'n ade-uada
para el nuevo tipo y guarde lo! -a+.io!
T217.2. *n el li!tado de tipo! de -ontenido apare-er el nuevo tipo 0hora hay que -onMgurar lo!
-a+po! de e!te nuevo tipo2 para ello utili-e el enla-e ad+ini!trar -a+po!
T217.3. *!to! -a+po! !on lo! -uadro! de entrada en la pgina a2re2ar contenidos de :rupal
Ver -o+o por de4e-to ya e6i!ten do! -a+po!2 tCtulo y cuerpo2 e!to! no lo! to-are+o! y aHadire#
+o! uno nuevo u!ando el 4or+ulario +o!trado en la Mgura ))2 donde !e han rellenado lo! !iguien#
te! -a+po!7
*tiqueta7 0djunto!
Ao+.re del -a+po7 0djunto!
5ipo! de dato! a al+a-enar7 0r-hivo
*le+ento de 4or+ulario7 0r-hivo
T217.0. =uarde lo! -a+.io! y en la !iguiente pantalla a--eda a la pe!taHa *ditar *!te nuevo
4or+ulario !irve para e!ta.le-er la! op-ione! del -a+po y !e -onMgurar para que ad+ita tanto!
ar-hivo! adjunto! -o+o el u!uario quiera RellRnelo de la !iguiente 4or+a7
5e6to de ayuda7 5e-lee el te6to Inclu1a tantos ad:untos co"o necesite
*6ten!ione! de M-hero! per+itido!7 :e.e !eparar por -o+a la! e6ten!ione! per+itida!2
per+itire+o! la! !iguiente!7 zip2 gz2 po
A3+ero de valore!7 *!ta.lez-a e!te -ontrol a 9li+itado
Mdulo (b 8 Drupal -7(
!i2ura ++. Ladir nue&o ca"po a un tipo de contenido.
T217.$. %e aHadir un 3lti+o -a+po2 pero e!te ya e!t predeMnido Vuelva a la pe!taHa =e!tionar
Ca+po! !in !alir del tipo de -ontenido -reado $tili-e ahora el 4or+ulario titulado 0Hadir -a+po
e6i!tente -on lo indi-ado en la Mgura )( Con e!to aHadi+o! el etiquetado2 el -ual viene -o+o
-a+po predeMnido en :rupal para u!arlo en -ualquier tipo de -ontenido
T21,. 0hora aHadire+o! una pgina .a!ada en el nuevo tipo de -ontenido 0--eda al +en3
Contenido y agregue un nuevo -ontenido u!ando el tipo Pgina -on adjunto! /a nueva pgina !er
uno de lo! -o+ple+ento! de &oo+la utilizado! en el +'dulo anterior
T21,.1. Rellene el nuevo -ontenido -on lo !iguiente7 5itulo U GalerCa de 3otos2 5e6to U Co"ple8
"ento de Too"la para "ostrar GalerCa de 3otos2 0djunto! U %u.a el ar-hivo del -o+ple+ento que
e!ta en 4or+ato N9P
T21,.2. *!ta.lez-a el -a+po 0lia! de $R/ el valor :oo"la82aleria para poder enlazarlo po!terior#
+ente
T21*. *nlazare+o! la pgina prin-ipal de pre!enta-i'n de &oo+la Aavegue por el +en3 de !u !itio
Je. y edite la pgina de &oo+la2 aHada te6to para li!tar lo! -o+ple+ento! y enla-e el -o+ple+ento
u!ando -o+o enla-e el alia! :oo"la82aleria Co+prue.e el enla-e
/legado a e!te punto e6i!ten do! pro.le+a! en la organiza-i'n del -ontenido7
%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 +en3 de navega-i'n la !e--i'n &oo+la :e.erFa de!plegar!e2 al e!tar viendo un -o+ple+ento
de &oo+la
-7) Mdulo (b 8 Drupal
!i2ura +M. Ladir nue&o ca"po a un tipo de contenido.
Cada vez que !e aHade una pgina para un -o+ple+ento de &oo+la tene+o! que editar la pgina
para aHadir un enla-e al nuevo -o+ple+ento Day que .u!-ar un pro-edi+iento para tener li!ta#
do! auto+ti-o!
T223. *l pri+ero !e !olu-iona editando el +en3 de navega-i'n 0--eda al li!tado de lo! enla-e! del
+en3 de navega-i'n y aHada un nuevo enla-e
T223.1. *!ta.lez-a el tFtulo que de!ee para el enla-e *n la ruta e!ta.lez-a el alia! del -o+ple#
+ento >:oo"la82aleria?2 !ele--ione -o+o padre el +en3 Too"la y guarde lo! -a+.io!
T223.2. Por 3lti+o en el li!tado de enla-e! del +en3 de!a-tive e!ta entrada de +en3 y a!F2 no !e
de!plegar un ter-er nivel en el +en3 de navega-i'n
T223.3. Prue.e ahora navegar a la pgina del -o+ple+ento
Cantener el +en3 prin-ipal -on e!te pro-edi+iento llega a !e una tarea en :rupal +uy tedio!a2 por ello
-ierto! +'dulo! aHaden en el +en3 de navega-i'n enla-e! auto+ti-a+ente Gtro +Rtodo para li!tar e!
la ta6ono+Fa y la e!tudiare+o! en la !iguiente !e--i'n
0nte! de ter+inar e!ta !e--i'n tratare+o! una -ue!ti'n pendiente2 V-o+o aHadir i+gene! junto al te6to
en la! pgina!W Para -on!eguirlo alterare+o! el tipo #D2ina bDsica del !iguiente +odo7
T221. *dite el tipo de -ontenido #D2ina bDsica y aHada un -a+po etiquetado I"D2enes que al.ergue
i+gene!2 -onMg3relo para que el u!uario pueda !u.ir tanta! i+gene! -o+o de!ee
T221.1. $na vez aHadido el -a+po2 a--eda a la pe!taHa =e!tionar pre!enta-i'n *!ta pe!taHa
li!ta lo! -a+po! que !e +o!trarn a lo! u!uario! -uando vean e!te -ontenido *n la -olu+na
4or+ato !ele--ione Didden para el -a+po I"D2enes y guarde lo! -a+.io!
T221.2. *dite la pgina que de!-ri.e &oo+la y aHada la i+agen i"a2en8:oo"la.pn2 en el nuevo
-a+po que ha -reado Vi!uali-e la pgina y no de.erFa ver la! i+gene!
T221.3. Vuelva a editar la pgina e in!erte una i+agen de!de .ot'n aHadir i+agen del editor2
utili-e la dire--i'n $R/ 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 el enla-e de la i+agen y u!ar la entrada de +en3 Copiar la ruta del
enla-e
#.#. *a'onom2a
/a ta6ono+Fa en :rupal e! un +Rtodo de -la!iM-a-i'n de in4or+a-i'n pen!ada para !uperar la!
.arrera! de la organiza-i'n jerrqui-a ga !e -o+ent' y utiliz' en otro! CC%2 re-ordar que .!i-a+ente
el 4un-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 di4erente! etiqueta!
:rupal va +! all del !i+ple etiquetado de -ontenido generalizando el +Rtodo de etiquetado y per+i #
tiendo -rear di4erente! grupo! de etiqueta! lla+ado! ocabularios Para ilu!trar !u utilidad u!are+o! un
vo-a.ulario de etiqueta! ya -reado por :rupal y aHadire+o! un !egundo vo-a.ulario adi-ional para
Mdulo (b 8 Drupal -7*
-la!iM-ar +ejor la! pgina!
T222. 0--eda al +en3 *!tru-tura U 5a6ono+Fa
T222.1. Ver que e6i!te un vo-a.ulario -reado -on el no+.re *tiqueta! *ntre en Rl para agregar
lo! tRr+ino! +o!trado! en la ta.la 2E
T222.2. 0hora -ree un nuevo vo-a.ulario lla+ado CMS -on lo! tRr+ino! +o!trado! en la ta.la
2;
Dobre 1e!cri.cin "lia! de E9L
5e+a
0!pe-to vi!ual para
un CC%
te+a
Co+ple+ento
Co+ple+ento para
un CC%
-o+ple+ento
CC%
=e!tor de
-ontenido!
ge!tor
,abla =7. ,Xr"inos para el &ocabulario EtiEuetas.
Dobre 1e!cri.cin "lia! de E9L
%C,
%i+ple Ca-hine!
,oru+
!+4
&oo+la
=e!tor para
portale! JI
joo+la
:rupal
=e!tor para
portale! J*I
drupal
,abla =<. ,Xr"inos para el &ocabulario CMS.
Para -o+enzar poder -atalogar -ontenido! -ada tipo de -ontenido de.e tener un -a+po para !ele--ionar
un tRr+ino de -ada vo-a.ulario 0ltere+o! lo! tipo! de -ontenido -o+o !igue7
T223. 0--eda al +en3 *!tru-tura U 5ipo! de Contenido
T223.1. *dite el tipo de -ontenido #D2ina bDsica y en la pgina de edi-i'n a--eda a la pe!taHa
=e!tionar Ca+po! $!e el 4or+ulario 0gregar nuevo -a+po y rellRnelo -on lo +o!trado en la
Mgura )E
T223.2. Cuando guarde lo! -a+.io! apare-er un nuevo 4or+ulario donde de.e !ele--ionar el
vo-a.ulario CC%
T223.3. Para aHadir el vo-a.ulario de etiqueta!2 utilizare+o! otro pro-edi+iento2 repita lo! pa!o!
que realiz' en 521(@ y que !e +o!tra.an en la Mgura )(
T223.0. :rupal re-uerda todo! lo! -a+po! que !e -rean2 e!to 4a-ilita el pro-e!o para aHadir un
-a+po para el vo-a.ulario CC% en el otro tipo de -ontenido *dite el tipo de -ontenido Pgina
-on adjunto! y aHada el -a+po CC% pero u!ando el 4or+ulario 0Hadir un -a+po e6i!tente
:e!pliegue el -uadro %ele--ione un -a+po e6i!tente y ver que ya e6i!te el -a+po CC% que -re'
en 522112 !ele--ione e!te -a+po y aHdalo
T223.$. 0--eda al +en3 de ad+ini!tra-i'n Contenido y edite toda! la! pgina! -la!iM-ndola!
-7+ Mdulo (b 8 Drupal
!i2ura +7. Ladir nue&o ca"po para un &ocabulario.
-orre-ta+ente u!ando lo! vo-a.ulario!
T223.'. 0hora navegue por la pgina y -o+prue.e -o+o lo! tRr+ino! apare-en en -ada pgina
T223.7. Aavegue a la! !iguiente! dire--ione!7 http788lo-alho!t8drupal8te+a2
http788lo-alho!t8drupal8ge!tor2 http788lo-alho!t8drupal8-o+ple+ento2 y a!F -on todo! lo! alia! de la!
ta.la! 2E y 2;
#.0. BloCues
:rupal utiliza el +i!+o +e-ani!+o de parti-i'n de la! pgina! en regione! donde !e puede u.i-ar
-ontenido :rupal lla+a .loque a -ada -ontenido que !e pueden u.i-ar en una regi'n2 re-uerde -o+o en
&oo+la !e lla+a +'dulo /a di!po!i-i'n de e!ta! regione! en :rupal !e +ue!tra en la Mgura );
*6i!te una di4eren-ia entre lo! .loque! de :rupal y lo! +'dulo! de &oo+la2 +ientra! en &oo+la !e
pueden -rear vario! +'dulo! de un +i!+o tipo2 en :rupal un .loque !'lo puede apare-er una vez2 no !e
pueden tener do! .loque! del +i!+o tipo en di4erente! pgina! G.!ervare+o! e!ta li+ita-i'n realizan#
do la! !iguiente! prue.a!
T220. 0--eda de!de el +en3 de ad+ini!tra-i'n al +en3 *!tru-tura U Iloque!
T220.1. $tili-e el enla-e :e+o!trar regione! de .loque! para -o+pro.ar !i e! -orre-ta la Mgura
); de e!te do-u+ento Re-uerde utilizar e!te enla-e !i -a+.ia el te+a de :rupal pue!to que la!
regione! pueden -a+.iar de u.i-a-i'n
T220.2. Ca+.ie a la pe!taHa %even y vuelva a utilizar el enla-e anterior para vi!ualizar la!
regione! 0quF apare-en po-a! regione! de.ido a que e!t vi!ualizando el te+a de ad+ini!tra-i'n2
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
T220.3. Vuelva a la pe!taHa IartiL y en el li!tado de .loque! o.!erve todo! lo! que e!tn de!a-#
tivado! $tili-e el enla-e Co!trar pe!o! de la Mla para -ontrolar el orden de lo! .loque!2 o
de!a-tive la -olu+na de pe!o! para poder arra!trar lo! .loque! pul!ando !o.re la Ze-ha de 4
punta! de -ada .loque
Mdulo (b 8 Drupal -7M
!i2ura +<. Disposicin de los bloEues en la pD2ina.
T220.0. $tilizando la +ue!tra de la Mgura (0 -on!iga u.i-ar en la po!i-i'n indi-ada lo!
!iguiente! .loque!7 4or+ulario de .3!queda2 -ontenido re-iente2 quien e!t -one-tado2 ini-io de
!e!i'n y navega-i'n
0gregue un nuevo .loque para poner el -opyright y prue.e la! regione! in4eriore! para u.i-arlo
-orre-ta+ente
6- Ad/i#i.%(a$i4# de u.ua(io. ) 0e(/i.o.
:rupal trae un potente ad+ini!trador de u!uario! y per+i!o!2 !e -o+enzar per!onalizando el
4or+ulario de regi!tro de u!uario! -reando -a+po! para que lo! nuevo! u!uario! lo! rellenen ante! de
poder a--eder al Portal
T22$. 0--eda al +en3 de ad+ini!tra-i'n ConMgura-i'n U $!uario! U Gp-ione! de la Cuenta
T22$.1. *n la parte in4erior de la pgina apare-en la! plantilla! u!ada! por el !i!te+a para
+andar -orreo! ele-tr'ni-o! Per!onali-e la! que -rea oportuno2 pero tenga -uidado -on la!
varia.le! del tipo [c!:po%#!$or]2 3!ela! ade-uada+ente en la plantilla de -orreo
T22$.2. =uarde e!ta -onMgura-i'n y a--eda ahora a la pe!taHa =e!tionar Ca+po! 0Hadire+o!
alguno! -a+po! -on una! -ara-terF!ti-a! deter+inada!2 utili-e la Mgura (1 para guiar!e !o.re el
-77 Mdulo (b 8 Drupal
*n-a.ezado
:e!ta-ado
Iarra
lateral
pri+ero
Iarra
lateral
!egunda
Re!altado
0yuda
Titulo .:4ina
Contenido
5rFpti-o pri+ero 5rFpti-o al +edio 5rFpti-o al Mnal
Pri+era -olu+na
del pie de pagina
%egunda -olu+na
del pie de pagina
5er-era -olu+na
del pie de pagina
Cuarta -olu+na
del pie de pagina
Lo4oti.o
Pie de pgina
a!pe-to Mnal /o! -a+po! a aHadir !on7
:ire--i'n po!tal7 Ca+po de tipo te6to2 -on Control de tipo de te6to2 +arque la op-i'n
Ca+po Ae-e!ario2 rellene el te6to de ayuda ade-uada+ente y deje el re!to de op-ione! a
!u! valore! predeter+inado!
5elR4ono!7 *n e!te -a+po el u!uario podr e!pe-iM-ar +! de un telR4ono2 la! op-ione! !on7
-a+po de tipo te6to2 -ontrol de tipo te6to li+itado a 1@ -ara-tere!2 el -a+po e! ne-e!ario2
en el -a+po A3+ero de valore! hay que e!ta.le-er 9li+itado y rellene la de!-rip-i'n
ade-uada+ente
%oli-ita Ie-a7 Ca+po tipo .ooleano -on Valor para a-tivado en %F y Valor para de!a-tivado
en Ao2 en tipo de -ontrol !ele--ionar Ca!illa de !ele--F'n2 +ar-ar el -a+po -o+o ne-e!ario2
el valor predeter+inado -o+o Ao y rellenar la de!-rip-i'n ade-uada+ente
CurrF-ulu+7 Ca+po de tipo ar-hivo2 no +ar-ar Ca+po ne-e!ario2 !F +ar-ar Co!trar en el
4or+ulario de regi!tro -o+o u!uario2 en el -a+po *6ten!ione! de M-hero! per+itido! poner
!eparada! por -o+a t>t5 doc5 pd35 odt y dejar lo! de+! -a+po! en !u valor predeter+inado
0-tive la -a!illa indi-ada -on :e!tino de la !u.ida al !ervidor para guardar e!to! ar-hivo!
en Ca+po! privado!
,otogra4Fa7 $tili-e en e!te -a!o el 4or+ulario in4erior donde !e puede elegir un -a+po
e6i!tente %ele--ione ta+.iRn para e!te -a+po el :e!tino de la !u.ida al !ervidor a Ca+po!
Mdulo (b 8 Drupal -7<
!i2ura M?. Lspecto 6nal de la disposicin de bloEues.
privado!
Co+entario!7 Ca+po de tipo te6to largo2 -onMg3relo ade-uada+ente para que !e +ue!tre en la
pantalla de regi!tro de u!uario
!i2ura M-. !or"ulario de re2istro con ca"pos personali/ados.
-<? Mdulo (b 8 Drupal
T22$.3. Co+prue.e !i ha o.tenido el +i!+o re!ultado en el 4or+ulario de regi!tro de u!uario!
que el +o!trado en la Mgura (1 $!e la pe!taHa =e!tionar pre!enta-i'n y arra!tre lo! -a+po! o
utili-e el enla-e Co!trar pe!o! de la Mla para ordenar -orre-ta+ente lo! -a+po! del 4or+ulario
que a-a.a de -rear
T22$.0. Regi!tre do! u!uario! !u.iendo ar-hivo! P:, en el -a+po -urrF-ulu+ 0--eda al +en3
de ad+ini!tra-i'n Per!ona! y de!.loquee a lo! do! u!uario! re-iRn -reado! para que puedan
a--eder al Portal
*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 di4erente! parte! del portal :rupal 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!uario2 !e agrupan lo! per+i!o!
en un rol y lo! role! !e apli-an a u!uario!2 adquiriendo lo! u!uario! lo! per+i!o!
Creare+o! un rol lla+ado Llu"no ad"itido y !ele--ionare+o! lo! u!uario! ad+itido! para apli-arle!
e!te rol
T22'. 0--eda al +en3 de ad+ini!tra-i'n $!uario! y ver do! pe!taHa!2 a--eda a la pe!taHa
Per+i!o!
T22'.1. *!ta pe!taHa li!ta lo! per+i!o! y lo! role! en 4or+a de ta.la2 per+itiendo a!ignar a -ada
rol vario! per+i!o! *!ta pgina -ontiene un enla-e para poder ad+ini!trar lo! role!2 en la Mgura
(2 !e indi-a 0--eda a e!te enla-e y -ree el rol Llu"no ad"itido
!i2ura M=. 4oles 1 per"isos en Drupal.
T22'.2. *dite lo! per+i!o! de e!te nuevo rol a-tivando lo! !iguiente!7 &er co"entarios y publicar
co"entarios
T22'.3. 0l rol usuario anni"o y usuario autenticado quite lo! per+i!o!7 &er co"entarios y
publicar co"entarios
Mdulo (b 8 Drupal -<-
0d+ini!tra-i'n de role!
0d+ini!tra-i'n de role!
Role! e6i!tente!
Role! e6i!tente!
Per+i!o!
apli-ado! al rol
Per+i!o!
apli-ado! al rol
T22'.0. 0--eda al li!tado de u!uario! y a!igne a !'lo uno de lo! u!uario! que -re' ante! el rol
Llu"no ad"itido
T22'.$. 0--eda al +en3 de ad+ini!tra-i'n de .loque! y -onMgure el .loque Contenido reciente
para que !'lo puedan vi!ualizarlo lo! alu+no! ad+itido! al -ur!o
*ntre la! deM-ien-ia! del !i!te+a de per+i!o! en :rupal de!ta-an la! !iguiente!7
Ao !e pueden e!ta.le-er lo! per+i!o! para un nodo de -ontenido parti-ular
Ao !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 un +'dulo adi-ional re-o+endado po!terior+ente en e!te do-u+ento
8- Te/a.
*l o.jetivo de e!ta !e--i'n e! +odiM-ar -o+pleta+ente el a!pe-to de :rupal *n la pgina oM-ial de
:rupal e6i!ten +ultitud de te+a! para de!-argar2 pero partire+o! del que trae de +anera predeter#
+inada ya que +odiM-ar -ualquier te+a e6i!tente !eguir el +i!+o pro-edi+iento 0nte! de -o+enzar a
+odiM-ar o -rear un te+a e! re-o+enda.le -o+pro.ar la! po!i.ilidade! que o4re-e :rupal de!de el
navegador -on lo! te+a! e6i!tente!
T227. :e!de el +en3 de ad+ini!tra-i'n 0parien-ia li!te lo! te+a! in!talado!
T227.1. :e!de el enla-e 9n!talar nuevo te+a puede in!talar alguno que previa+ente de!-argue
T227.2. 0--eda a la pe!taHa Gp-ione! y en la! op-ione! de IartiL2 -a+.ie lo! juego! de -olore!
a !u gu!to
Para -rear un nuevo te+a -on :rupal no e! ne-e!ario partir de una te+a e6i!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 e6i!tente y per!onalizarlo !in
alterar el te+a original2 no hay que -opiar lo! M-hero!
del te+a original2 !'lo .a!ta -on uno! po-o! M-hero!
para -on!eguir el a!pe-to de!eado $tilizare+o! e!ta
-ara-terF!ti-a en e!te -ur!o para !i+pliM-ar y no
tener que -rear te+a! nuevo! o -lonar lo! e6i!tente!
-o+o !e ha-Fa en otro! CC% Para -rear un nuevo
!u.te+a !iga lo! !iguiente! pa!o!7
T22,. Cree una -arpeta nueva en la -arpeta de
:rupal !ite! U all U the+e! por eje+plo2 -on el
no+.re -ur!oO-+!
T22,.1. $tilizando el .ot'n dere-ho del rat'n
dentro de la nueva -arpeta -ree un nuevo
M-hero -on Jindo<!2 o.!erve el +en3 de la
-<= Mdulo (b 8 Drupal
!i2ura M(. Ladir nue&o 6c.ero en una carpeta.
Mgura (12 apare-e -on el .ot'n dere-ho del rat'n en el e6plorador de Jindo<!2 de.e !ele--ionar
:o-u+ento de te6to
T22,.2. Reno+.re el M-hero a cursoOc"s.in3o y edFtelo -on AotepadBB *l M-hero de.e tener el
4rag+ento indi-ado en el -'digo @4
n!:e B C+rso CM1
description B 1+(te:! p!r! e$ c+rso de CM1
core B 7.)
#ersion B 1.0
engine B phpte:p$!te
-+se t*e3e ? -+rti(
Cdi2o *). !ic.ero de con62uracin de un subte"a en Drupal.
T22,.3. /a 3lti+a lFnea2 de!ta-ada en negrita2 e! la -lave para -rear un !u.te+a2 indi-a que el
te+a lla+ado Curso CMS e! un !u.te+a del te+a barti@ *vidente+ente2 barti@ de.e e!tar
in!talado de lo -ontrario2 el !u.te+a no 4un-ionar Iu!que entre lo! M-hero! de :rupal el te+a
IartiL para ver !u u.i-a-i'n
T22,.0. $na vez en-ontrada la -arpeta del te+a IartiL2 edite el M-hero barti@.in3o para ver !u
-ontenido Copiare+o! alguno! trozo! de te6to de e!te M-hero a nue!tro nuevo !u.te+a2 -opie
toda! la! !enten-ia! regions[...] B... al M-hero cursoOc"s.in3o2 -on e!to +antendre+o! inta-ta!
la! regione! del te+a original
T22,.$. 0Hadire+o! a nue!tro nuevo !u.te+a una hoja de e!tilo!2 para ello2 aHada al Mnal del
M-hero cursoOc"s.in3o una lFnea -on sty$esheets[!$$][] B c+rsoRc:s.css
T22,.'. :e.e -rear enton-e! en la -arpeta de !u nuevo !u.te+a un nuevo M-hero lla+ado
cursoOc"s.css2 repita lo! pa!o! 522E1
T22,.7. Aavegue al +en3 de ad+ini!tra-i'n 0parien-ia y li!te lo! te+a! para ver !i e4e-tiva#
+ente apare-e !u nuevo !u.te+a 0-tFvelo y e!ta.lRz-alo -o+o predeter+inado para todo el !itio
Co+prue.e -on ,ire.ug !i la hoja de e!tilo! cursoOc"s.css e!t in-luida en la pgina >aunque por
ahora el M-hero e!tR va-Fo?
Per!onalizare+o! el te+a utilizando lo! re-ur!o! grM-o! in-luido! en el ar-hivo drupal8recursos./ip2 !i
tiene -urio!idad !o.re -o+o !e han he-ho e!ta! i+gene!2 utili-e 9n!L-ape para a.rir lo! M-hero!
originale! en 4or+ato %V=
T22*. :e!-o+pri+a el M-hero recursos8drupal./ip para utilizar la! i+gene! !eg3n la! ne-e!ite
T22*.1. 0-tive y e!ta.lez-a -o+o predeter+inado el te+a Curso CMS que -re' anterior+ente
T22*.2. Copie lo! ar-hivo! lo2o.pn22 3a&icon.ico2 3a"a.:p22 bloEueO.=.2i3 y estrella.pn2 a la
-arpeta del nuevo te+a
T22*.3. $tilizando -o+o guFa la Mgura (4 -ree en el M-hero cursoOc"s.css !ele-tore! para
-on!eguir el a!pe-to de!eado2 la ta.la 10 +ue!tra todo! lo! -a+.io! que de.e realizar y lo!
!ele-tore! a u!ar
Mdulo (b 8 Drupal -<(
averigXe el !ele-tor Ca+.ie el 4ondo de toda la pgina al -olor ZC8I7I7
`page#<rapper
*nvoltura de :rupal para toda la pgina7
*!ta.lez-a +rgene! ade-uado! y el 4ondo -on -olor .lan-o
Redondee lo! .orde! -on +eno! de 10p)
*!ta.lez-a una !o+.ra
`header
*nvoltura para toda la -a.e-era7
*li+ine el -olor de 4ondo
*!ta.lez-a el an-ho al 10092 pro.a.le+ente ne-e!ite otro !ele-tor
Ponga una lFnea dorada arri.a u!ando la propiedad (order -on el -olor
ZI/386
`+ain#+enu
`+ain#+enu#linL!
Corre!ponden -on la li!ta de enla-e! !uperiore!7
*l 4ondo de.e !e una .arra de -olor Z!70c>0
Ca+.ie la tipogra4Fa a Qeorgi!
*n la parte dere-ha de -ada enla-e apare-e la i+agen estrella.pn2.
*l ele+ento a-tivo tiene -olor en el te6to ZFI/70.
`+ain
`!ide.ar#Mr!
`-ontent
`!ide.ar#!e-ond
*!to! !ele-tore! !on del -uerpo y la! tre! -olu+na! que 4or+an la pgina
*l o.jetivo e! aprove-har al +6i+o la pgina
%i el navegador -a+.ia de ta+aHo la pgina de.e alargar!e o redu-ir!e
>re!pon!ive?
`-ontent
*l .loque -ontenido de la pgina de.e tener -o+o 4ondo la +ar-a de la
univer!idad2 e! el M-hero 3a"a.:p22 alinee el 4ondo a.ajo a la dere-ha
5Ftulo! de pgina
5ienen un .orde in4erior punteado de 2p) de an-ho2 tanto el te6to -o+o el
.orde tienen el -olor Z!70c>0
!ide.ar
.lo-L
%ele-tore! de lo! .loque! de la! -olu+na!7
/a -a.e-era del .loque tiene una i+agen de-orativa a la izquierda
lla+ada bloEueO.=.2i3 y el -olor de 4ondo de e!ta -a.e-era e! ZCF30I
/o! .loque! tienen un .orde e6terior de 1p) del -olor ZCF30I
5ienen un +argen de 2p) para ha-er un e4e-to de hue-o -on la -a.e-era
/o! .orde! de la -aja e!tn redondeado! a 18p)
/o! .orde! del tFtulo e!tn !'lo redondeado! en la! e!quina! !uperiore!
5ienen una !o+.ra del +i!+o -olor que el .orde y -on di4u+inado
`4ooter#<rapper
*!te !ele-tor e! del pie2 de.e -on!eguir un ta+aHo +Fni+o y un -olor de
4ondo Z666666 :e.er .u!-ar -on ,ire.ug +a! !ele-tore! en e!ta zona
para -on!eguir redu-ir !u ta+aHo
,abla (?. Selectores i"plicados en el te"a Curso CMS.
5er+inare+o! el di!eHo del te+a pro.ando otro! tipo! de !ele-tore! %i !e Mja en la Mgura (4 apare-en
en el te6to do! i-ono!2 R!to! no !e han aHadido +anual+ente -o+o i+gene! en el editor de :rupal
Cediante !ele-tore! C%% !e han dete-tado lo! enla-e!2 uno e6terior2 otro a un do-u+ento .doc y otro a
un do-u+ento .pd3 *l -'digo !erFa el !iguiente7
![href [BP.pdfP] ,
p+dding/left0 17p)1
-+c(gro.nd0 tr!nsp!rent +r$(iconoRpdf.gif) no=repe!t center $eft1
X
![href [BP.docP] ,
p+dding/left0 17p)1
-+c(gro.nd0 tr!nsp!rent +r$(iconoRdoc.png) no=repe!t center $eft1
X
![href dBPhttpP] ,
p+dding/rig*t0 17p)1
-+c(gro.nd0 tr!nsp!rent +r$(iconoRen$!ce.gif) no=repe!t center right1
Cdi2o **. Selectores para deteccin de atributos ;,ML.
-<) Mdulo (b 8 Drupal
T233. 9n-luya el -'digo @@ en la! hoja! de e!tilo del te+a *dite alguna de la! pgina! de :rupal en
el navegador y enla-e -on !itio! e6terno!2 -on do-u+ento! .doc y .pd32 no !e preo-upe !i lo! enla-e!
no e6i!ten2 !'lo e! para -o+pro.ar el e4e-to
=- Co/0le/e#%o. de.%a$ado.
Para Mnalizar -on :rupal !e enu+eran y !e de!-ri.en .reve+ente alguno! de lo! +'dulo!
-on!iderado! de +ayor interR! para -on!eguir ha-er +! a+iga.le el +anejo de :rupal
Mdulo (b 8 Drupal -<*
!i2ura M). Lspecto 6nal del te"a Curso CMS para Drupal.
IooL7 *!te +'dulo viene -on :rupal pero no e!t a-tivado2 -on Rl puede -rear li.ro! o pgina! de
+anuale! -on Fndi-e!
Aodea--e!!7 Per+ite !ele--ionar per+i!o! por -ada nodo de -ontenido 0Hade una nueva pe!taHa
en la edi-i'n de -ada -ontenido >=rant? -on la que !e pueden !ele--ionar lo! u!uario! y +ar-ar lo!
per+i!o! de!eado! !o.re el -ontenido
Vie<!7 *! un +'dulo +uy utilizado en lo! portale! -on :rupal2 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 Je. -on gran volu+en de in4or+a-i'n
Chao! tool !uite7 *! un +'dulo lleno de utilidade! ne-e!ario para que otro! +'dulo! 4un-ionen
-orre-ta+ente2 !e re-o+ienda tenerlo !ie+pre in!talado2 por eje+plo2 el +'dulo ie9s no
4un-ionar +ientra! no !e in!tale e!te
Panel!7 *! otro de lo! +'dulo! +! u!ado! para poder -o+poner pgina!2 per+ite e!ta.le-er la
di!po!i-i'n de la pgina en di4erente! panele!
9CC*7 ,a-ilita la edi-i'n de pgina! -on i+gene!2 !e integra -on lo! editore! C[*ditor y
5inyCC* *! +uy 3til pero requiere tie+po !u -onMgura-i'n
9n!ert7 0Hade de una 4or+a +uy -'+oda uno! .otone! para poder in!ertar i+gene! en lo!
editore! de te6to *! independiente del editor enrique-ido que !e utili-e y +uy 4-il de -onMgurar
Cuando in!tale +'dulo! en :rupal revi!e en la pgina de in4or+a-i'n del +'dulo la! po!i.le! dependen#
-ia!2 +u-ho! +'dulo! no 4un-ionan ha!ta que no !e in!talan +! +'dulo! dependiente! *!to o-urre -on
alguno! de lo! li!tado! anterior+ente
5ra! la! de!-rip-i'n de e!to! +'dulo! !e proponen varia! tarea! a!o-iada! a -ada una de ella!2 e!-oja
la! que -on!idere de !u interR! e intente llevarla! a -a.o
T231. $tilizando el +'dulo Boo@ -ree un +anual de u!uario -on varia! pgina!
T232. Cree alguna! pgina! de -ontenido y -onMg3rela! utilizando el +'dulo 0odeaccess para que
!'lo -ierto! u!uario! la puedan ver
T233. 9n!tale el +'dulo ie9s2 tiene dependen-ia! -on otro lla+ado C.aos tool suite de.er
in!talarlo ta+.iRn ante! de a-tivar ie9s
T233.1. :e.e a-tivar lo! +'dulo! ie9s %I y ie9s
T233.2. 0--eda al +en3 de ad+ini!tra-i'n *!tru-tura y ver un nuevo enla-e Vie<! 0-tive
alguna vi!ta e intente enlazarla al +en3 prin-ipal
T233.3. 9ntente -rear una nueva vi!ta para alg3n tipo de -ontenido
T230. 9n!tale el +'dulo 9CC* 0nte! de pro-eder a la -onMgura-i'n vi!ite la pgina oM-ial de :rupal
y .u!que e!te +'dulo2 allF en-ontrar un enla-e a una de+o!tra-i'n Para integrarlo en 5inyCC* lea
la! in!tru--ione!
T23$. 9n!tale el +'dulo #anels e intente +anejarlo :e.e -rear -ontenido -on tipo de -ontenido
-<+ Mdulo (b 8 Drupal
#anel y -rear Minipanels para u!arlo en !u! nodo! de tipo #anel 5enga pa-ien-ia -on e!te +'dulo2 !i
-on!igue -ontrolarlo podr di!eHar -ualquier tipo de pgina -on :rupal
>- Di.%(i,u$io#e.
:rupal e! -on!iderado por +u-ho! de!arrolladore! -on un 4ra+e<orL de de!arrollo de !itio! Je.2 no
-o+o un CC% Para -on!eguir poner un !itio Je. operativo partiendo de la in!tala-i'n .a!e hay que
realizar +ultitud de tarea! de ad+ini!tra-i'n en :rupal2 ade+! de in!talar y -onMgurar +ultitud de
-o+ple+ento! adi-ionale!
/a! di!tri.u-ione! en :rupal intentan !olu-ionar la! tarea! de -onMgura-i'n en el !itio Je. $na
di!tri.u-i'n e! una in!tala-i'n de :rupal pero que in-luye una -onMgura-i'n adi-ional que !e realiza
auto+ti-a+ente durante el pro-e!o de in!tala-i'n 9n-luyen el n3-leo de :rupal junto -on vario!
-o+ple+ento! ya -onMgurado! para la pue!ta en 4un-iona+iento de un deter+inado !itio Je. de una
4or+a gil
*n la pgina oM-ial de :rupal podr en-ontrar +ultitud de di!tri.u-ione! .a!ada! en di4erente! ver!io#
ne! de :rupal2 -o+o eje+plo en e!te -ur!o !e han e!-ogido do!7 Co""erce Yic@start -on!i!tente en una
tienda ya preparada y Fpen#ublic para ha-er pgina! de organi!+o! oM-iale!
T23'. 9n!tale la! di!tri.u-ione! !iguiendo lo! +i!+o! pa!o! que -on la in!tala-i'n de :rupal %e
re-uerdan .reve+ente lo! pa!o!
T23'.1. Iu!que en la pgina oM-ial de :rupal la di!tri.u-i'n Fpen#ublic Cree una nueva
-arpeta dentro de .tdocs de Iitna+i 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 :rupal2 de.e poner en op-ione! avanzada! un preMjo de ta.la! di4erente al
del re!to de in!tala-ione!
T23'.3. 5enga pa-ien-ia2 la! di!tri.u-ione! !on lenta! en la in!tala-i'n y !i apare-e alg3n error
lRalo detenida+ente para intentar !olventarlo
T23'.0. Repita lo! pa!o! -on Co""erce Yic@start
?- Re*e(e#$ia.
PRe4 @1Q Jhite Dou!e2 <http788<<<<hitehou!egov8"
PRe4 @2Q 5he e-ono+i!t2 <http788<<<e-ono+i!t-o+8"
PRe4 @1Q Je. GM-ial de :rupal2 <http788drupalorg8"
PRe4 @4Q Je. de :rupal Di!pano2 <http788<<<drupalorge!8"
PRe4 @@Q Je. oM-ial de 5inyCC*2 Co6ie-ode %y!te+! 0I <http788<<<tiny+-e-o+8"
PRe4 @)Q C[*ditor2 ,rederi-o [na..en2 <http788-Leditor-o+8"
Mdulo (b 8 Drupal -<M
Glo.a(io de e5e/0lo. CSS
.a-Lground1;2 ()
.a-Lground#-olor122 1;2 ()
.a-Lground#i+age412 11E
.a-Lground#repeat41
.a-Lground#!ize11E
.order142 ()
.order#i+age1)(
.order#radiu!()2 141
.o6#!hado<()2 11;2 140
-lear1;
-olor102 422 11E
di!play4)2 4E2 ;2
Mr!t#letter12
Zoat1;
4ont#4a+ily422 1)E
4ont#!ize122 ;1
4ont#!tyle112 422 1)E
4ont#variant42
4ont#<eight122 422 1)E
height1;
hover12
le4t11;
line#height121
+argin142 1;
+a6#<idth402 ()
+in#height4)
+in#<idth40
overZo<1;
overZo<#61;
overZo<#y1;
padding142 1;
po!ition4)2 11;
te6t#align4)
te6t#de-oration11
te6t#!hado<112 11E2 1212 141
top11;
vi!i.ility4E
<idth1;2 41
oi+portant11
@4ont#4a-e422 1)E
@+edia44
Glosario -<<

Curso Cms Julio2014 PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso Cms Julio2014 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

IV CURSO DISEO DE SITIOS WEB BASADOS EN

GESTORES DE CONTENIDO DE LIBRE DISTRIBUCIN

,abla -=. Moderadores del 3oro de cocina.

Iloque de logo! de pago

Iloque lo! +! vendido!

Das könnte Ihnen auch gefallen