Manual de Wordpress

Crear un lloc web habilitat per SEO i SEM

COM CREAR UN LLOC WEB HABILITAT PER
SEO i SEM
Exemple pràctic amb WordPress

Alfons González
Curs de Marketing Digital de la Cambra de Sabadell

18 i 25 de Març de 2011

Curs d’especialització en Màrqueting Digital Alfons González 1


Introducció i objectius................................................................................................................... 5

Primera part: Pàgines HTML i llenguatges de script ..................................................................... 6

La pàgina HTML bàsica .............................................................................................................. 6

Per què s'ha de formatar el contingut? ................................................................................ 6

Quins aspectes tècnics s'han de definir? .............................................................................. 6

Versionat ............................................................................................................................... 7

Internacionalització............................................................................................................... 7

Què és l'HTML? ..................................................................................................................... 8

Què necessitem per escriure pàgines HTML? ....................................................................... 9

Programació incrustada en HTML ......................................................................................... 9

Programació del costat client i programació del costat del servidor.................................... 9

Criteri de privacitat i copyright del costat servidor............................................................. 10

Llenguatges de programació per a costat client i costat servidor ...................................... 10

Exemple: crear una pàgina web que mostri la data des del costat client amb Javascript.. 10

Un programa del costat client es pot veure i copiar ........................................................... 12

Exemple: crear una pàgina web que mostri la data des del costat servidor amb PHP....... 13

Google Analytics: un script del costat client ........................................................................... 16

Què necessitem per utilitzar Google Analytics? ................................................................. 17

Com donar‐nos d'alta en Google Analytics? ....................................................................... 17

Moure pàgines cap a i des d'un servidor web......................................................................... 24

El protocol FTP .................................................................................................................... 24

Què és un número de port? ................................................................................................ 25

On trobar programes gratuïts d'FTP ................................................................................... 25

Descarregar i instal∙lar Filezilla............................................................................................ 25

On trobar allotjament web (servidor) gratuït ..................................................................... 36

On és el negoci dels servidors gratuïts?.............................................................................. 37



Com treballar amb Zymic ........................................................................................................ 37

Crear un compte d'usuari en Zymic .................................................................................... 38

Pujant i baixant pàgines al nostre nou lloc web...................................................................... 46

Index.html o index.php ....................................................................................................... 47

Pràctica 1 ............................................................................................................................. 47

Pràctica 2 ............................................................................................................................. 48

Títols H1 que puntuen en màrqueting digital en Google.................................................... 49

Salts a noves pàgines (“links” o “enllaços”) ........................................................................ 50

Carregant plantilles ................................................................................................................. 50

Buscant un descompressor ZIP ........................................................................................... 51

Veure les opcions de plantilles i carregar una en el nostre lloc web .................................. 59

Ja podem plantejar‐nos la compra d’una eina de disseny web .............................................. 64

Escollir un servidor web i un entorn de desenvolupament d'aplicacions............................... 65

Què necessitem per publicar pàgines a Internet? Opcions barates ................................... 65

Opcions més cares per estar presents a Internet ............................................................... 66

Un petit consell, si me l’accepteu ....................................................................................... 66

L'opció de la subcontractació global ................................................................................... 67

Pros i contres de la subcontractació ................................................................................... 67

Segona part: WordPress.............................................................................................................. 69

Instal∙lació de WordPress........................................................................................................ 69

Crear un nou espai d'allotjament web .................................................................................... 69

Com descarregar WordPress................................................................................................... 70

On podem trobar WordPress en castellà? .......................................................................... 70

On podem trobar WordPress en català?............................................................................. 70

Com descomprimir WordPress ............................................................................................... 71

Eliminar l'arxiu ZIP inicial..................................................................................................... 76

Com enviar WordPress al nostre lloc web .............................................................................. 76



Eviti transferències multitasca amb Zymic.......................................................................... 76

Començant la transferència ................................................................................................ 77

Crear la base de dades MySQL per a WordPress .................................................................... 79

Fase 1: Generar la base de dades........................................................................................ 82

Fase 2: Crear l'usuari ........................................................................................................... 82

Fase 3: Donar drets a l'usuari.............................................................................................. 83

Com instal∙lar WordPress........................................................................................................ 83

Eliminar index.html ............................................................................................................. 83

Obrir el web per configurar................................................................................................. 84

Una parada en el camí per veure ja el nostre bloc actiu..................................................... 88

Com publicar els nostres primers articles ............................................................................... 89

Ús de les categories............................................................................................................. 91

Com assignar una categoria a un article ............................................................................. 93

Com canviar l'aparença de WordPress ................................................................................... 93

Modificar els elements gràfics d'una plantilla .................................................................... 93

Canviar de plantilla (tema) .................................................................................................. 95

Com podem canviar de plantilla?........................................................................................ 95

On podem trobar plantilles de WordPress?........................................................................ 96

Inserció de plugins. El Plugin de Google Analytics. ................................................................. 96

Inserció de plugins. El Plugin de Facebook.............................................................................. 98

Activació i configuració del plugin de Facebook ............................................................... 100

Editar la posició dels widgets de Facebook dins del blog ................................................. 102

Plugins de comerç electrònic (botiga virtual) ....................................................................... 103



Introducció i objectius

El contingut d’aquestes dues sessions està pensat des del punt de vista de l’emprenedor que
copça la realitat d’un món en continu canvi i que vol posar‐se al dia en temes de marketing
digital via Internet.

S’assumeix que els assitents i lectors d’aquest curs no tenen coneixements tècnics més enllà
de l’ofimàtica a nivell d’usuari.

Per tant, el plantejament del curs és el d’una guia pas a pas, amb molta informació visual de les
pantalles que anirem veient i què fer en cada cas per aconseguir els següents objectius de
forma ràpida i econòmica:

1. Saber de què parlem quan volem crear un lloc web per fer màrketing digital.

2. Saber per nosaltres mateixos el grau de facilitat (que no pas de dificultat) que
representa crear un lloc web.

3. No haver d’invertir diners fins que realment sapiguem si ens volem involucrar dins del
projecte tècnicament a partir dels coneixements assolits al curs.

4. Experimentar en primera persona amb els elements bàsics necessaris per muntar un
lloc web, aprenent a utilitzar les eines més comuns.

5. Assolir els coneixements necessaris per poder fer llocs web o per negociar amb un
proveïdor de serveis web amb el coneixement de causa i de terminologia adients,
valorant hores i materials en la seva justa mesura.

Finalment, l’alumne podrà valorar amb la seva satisfacció personal el grau de coneixement
pràctic que ha assolit.

Des del punt de vista del professor, em dono per més que satisfet si l’estudiant acaba estimant
el món del màrqueting digital i creant els seus propis llocs web amb èxit pel seu negoci.

Alfons González

Enginyer de software i màster en Euroasian International Business per la UAB.



Primera part: Pàgines HTML i llenguatges de script

La pàgina HTML bàsica
Com comentàvem al parlar de servidors web, el material bàsic que intercanviem amb ells és la
pàgina web.

Els programadors “carreguen” o “pugen” les pàgines web, i els clients les “descarreguen” o
“baixen”.

Quan es descàrrega una pàgina web, no s'elimina del servidor. Simplement se li envia una
còpia al client.

El client veu el contingut a través d'un navegador (Microsoft Internet Explorer, Mozilla Firefox,
Apple Safari, Google Chrome…).

La funció del navegador és formatar aquest contingut que li arriba del servidor perquè sigui
visualment consumible pel client.

Per què s'ha de formatar el contingut?
O el que és el mateix no es pot mostrar directament el que arriba del servidor?

Realment, dins d'una pàgina web tenim un contingut que resulta interessant per al client i
també tenim unes dades tècniques i de format (els filòsofs com Spinoza en dirien substància i
accidents).

És a dir: hi ha un QUÈ i un COM.

Dins del QUÈ tenim el contingut.

Dins del COM tenim els aspectes estètics i els aspectes tècnics (aspectes informàtics que
veurem tot seguit).

És a dir:

Pàgina web:

• Contingut

• Forma

o Aspectes estètics

o Aspectes tècnics (informàtics)

Quins aspectes tècnics s'han de definir?
Força aspectes. Anem a resumir‐los molt per no fer‐nos un embolic amb temes que encara no
tocarem directament.



Versionat
La forma de construir pàgines web ha anat canviant amb el temps. A mesura que els
programadors i els dissenyadors anaven creant pàgines, anaven afegint noves prestacions als
navegadors perquè les pàgines fossin més atractives per als clients.

Això va fer necessari escriure convenis per posar‐se d'acord amb el que anava a ser normatiu i
el que no, ja que algunes d'aquestes especificacions implicaven un esforç suplementari per
part del servidor web o per part del navegador.

Per tant, un dels aspectes tècnics que es defineixen és la versió de l'HTML utilitzada.

Internacionalització
Un altre dels aspectes tècnics és el conjunt de caràcters usats per representar el contingut.

A l'incorporar‐se els països asiàtics (Xina, Japó, Corea, Vietnam), l'Índia i els països de l'orient
Mitjà a la globalització, ha fet falta concebre noves formes de “pintar” els caràcters que
s'utilitzen en les seves escriptures per no limitar tot a l'alfabet occidental.

Per aquesta raó es defineix també el conjunt de caràcters que se'n van a utilitzar, perquè el
navegador pugui interpretar i visualitzar correctament la pàgina web.

Vegem una pàgina web “en cru” a la qual denominarem Pagina00.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin título</title>

</head>

<body>

Este es un ejemplo de página básica.

</body>

</html>

Aquesta pàgina web es mostra al client mitjançant un navegador per aparèixer així:



En aquest cas, el navegador és Safari, però podria ser Internet Explorer o Firefox.

Tots els navegadors formaten aproximadament igual les pàgines web, encara que la manera de
mostrar‐les no és exactament igual. Uns estan especialitzats en uns temes i altres fan millor
altres coses.

De moment, la pàgina bàsica que mostrem es veuria igual a tots ells.

El text “en cru” que hem vist abans està escrit seguint les normes de l'HTML. Per això la veiem
de manera diferent.

Què és l'HTML?

L'HTML és un conveni de paraules clau útils per definir el contingut, l'estil i les dades tècniques
d'una pàgina web.

Ja que un conjunt de paraules es pot considerar un llenguatge, podem definir HTML com el
llenguatge utilitzat per construir pàgines web.

L'HTML és un llenguatge derivat de l'XML. Va començar sent un dialecte poc ortodox d'XML
(com el castellà ho va ser del llatí) i ara ha guanyat estatus propi de llenguatge.

HTML al seu torn ha evolucionat en diverses versions, com el XHTML o el WML.



El XHTML és l’anomenat HTML ben format: un HTML ortodox que requereix marques d'inici i
de final per a totes les seccions. Cap a aquí evoluciona l'HTML usat en la major part dels
servidors web del món. Per tant, va creixent en adeptes.

El WML, en canvi, va en recessió. És una reducció de l'HTML per usar‐se en els primers models
de telèfons mòbils amb accés a Internet (llegiu Nokia 7111 o Nokia 8210) al voltant de l'any
2000. Aquests mòbils disposaven d'una quantitat de memòria limitada i WML establia normes
estrictes per reduir el volum d'informació circulant en forma de fitxes o cartes d'una mida
reduït.

Amb l'aparició de telèfons mòbils amb major capacitat de memòria, el seu software s'ha
adaptat per treballar amb HTML directament.

Què necessitem per escriure pàgines HTML?
Un editor. Ara bé: n’hi han de diferents preus i funcionalitats, per la qual cosa podem dir que
triar‐ne un depèn de quina productivitat vulguem assolir per la nostra quota de producció.

Podem ser molt avars i poc productius. En aquest cas, no necessitem més que el que ve de
sèrie amb un ordinador portàtil: un editor de text pla.

També podem ser molt gastadors i molt productius. En aquest cas tindrem diferents suites
d'eines que serveixen per dissenyar pàgines web i combinar el disseny amb la programació
dels servidors web: Dreeamweaver, Visual Studio, etc. i les seves edicions per a altres
plataformes com Linux, Macintosh, dispositius mòbils…

Dins d'aquest rang tenim llenguatges de programació que es poden incrustar en les pàgines
web.

Programació incrustada en HTML
Les pàgines web permeten obrir seccions al seu interior en les que s'alberguen programes.

Per a què volem inserir programes dins de pàgines HTML?

Perquè una pàgina web ofereixi informació actualitzada que depèn de factors exteriors.

L'exemple més senzill és posar la data en la capçalera de la pàgina.

Un altre exemple és construir la informació de la pàgina a partir de les dades de cotitzacions
borsàries. Aquest és un exemple molt interessant, ja que les cotitzacions s'actualitzen
constantment i no podem tenir a un programador que cada minut sigui capaç d'escriure una
pàgina amb 4000 valors canviants per col∙locar‐la en un servidor d'Internet.

Programació del costat client i programació del costat del servidor
Imaginem que tenim una pàgina en la qual hem de mostrar la data del dia.

La data és una dada que depèn de factors exteriors.

Depenem del moment en què veiem la pàgina i també del punt del planeta que ens trobem.
Recordem que no en tots els llocs del planeta vivim el mateix dia.



Mentre a la Xina surt el sol començant un nou dia, als Estats Units és de nit. El dia comença a
l'Est. Per tant, un client que estigui navegant per un servidor web que estigui en l'altra punta
del planeta es trobarà en un mateix instant, però en dates diferents.

Per tant quina data mostrem? la del client o la del servidor?

La resposta depèn del tipus d'aplicació que tinguem.

Per exemple: si un inversor nord‐americà de borsa vol comprar o vendre accions en un servidor
de Hong Kong, comprarà en l'horari del mercat de Hong Kong. Per tant, l'hora que haurà de
mostrar és la del costat del servidor.

En la major part de les aplicacions de bases de dades, es contempla la data i hora del servidor
com hora en la qual s'anoten les operacions, sense prejudici que es mostra l'hora local del
client a títol informatiu.

Un programa del costat del client exigeix treballar al navegador web que usi el client.

Un programa del costat del servidor exigeix treballar al servidor web que subministra les
pàgines.

Criteri de privacitat i copyright del costat servidor
Els programes que funcionen del costat servidor no envien les seccions de programa que
contenen les pàgines web.

És a dir, les pàgines web que contenen programació del costat servidor no envien els
programes, sinó les dades obtingudes pels programes.

Això vol dir que el client no pot veure com hem fet el programa (protegim la nostra propietat
intel∙lectual) ni com pot accedir a les nostres dades fora del web (hackers).

Llenguatges de programació per a costat client i costat servidor
Podem barrejar dins d'una pàgina web la programació del costat client i la del costat servidor.

La programació del costat client s'envia a través d'Internet.

La programació del costat servidor s'executa en el servidor i només s'envia el seu contingut,
mai el programa que ho genera.

Els llenguatges de programació més comuns per al costat client són Javascript i Visual Basic
Script. Se solen anomenar llenguatges de script.

Els llenguatges de programació més comuns per al costat servidor són PHP, Java, ASP,
ASP.NET, C# i VB.NET.

Exemple: crear una pàgina web que mostri la data des del costat
client amb Javascript
Vegem ara un exemple de pàgina web amb una secció incrustada de programació que
s'encarrega de mostrar la data del costat client.



Per a això anem a utilitzar el llenguatge Javascript, que és un derivat de Java dissenyat per
treballar des del costat client.

<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">


<head>

<meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" />


</head>

<body>

La fecha de hoy del lado cliente es:

<script>

var f = new Date();

document.write(f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear());

</script>

</body>

</html>

Fixem‐nos que existeix una marca d'inici <script> i una de final </script>

Entre aquestes dues marques es troba el programa en qüestió, i aquest programa amb el seu
text viatja des del servidor al client perquè es pugui executar en la banda client pel navegador
web. És per tant un codi font visible des del client; un codi font que ens poden copiar.

El seu resultat és el següent:



Un programa del costat client es pot veure i copiar
Els programes creats per córrer des del costat client es poden veure i copiar.

Com? Jo només veig el resultat. On és el programa?

Podem demanar‐li al navegador que ens mostri el codi font que ha rebut en format “cru
HTML”. Això es pot aconseguir amb el navegador Safari anant al menú Visualització i
seleccionant l'opció Veure codi font.

En Internet Explorer, tenim una opció equivalent. Si no aparegués el menú en Explorer, podem
forçar que es mostri polsant la tecla de funció F10. Una vegada que el menú està visible,
podem anar al menú Veure i seleccionar Codi font.

S'obrirà una finestra com aquesta:



Aquesta és la constatació pràctica que tot el que viatja per la xarxa és copiable i que hem de
tenir cura de quins programes deixem a la vista dels clients.

Exemple: crear una pàgina web que mostri la data des del costat
servidor amb PHP
Vegem ara la part equivalent de l'exemple anterior des del costat servidor.

La primera cosa que hem de fer és canviar l'extensió (les tres o quatre últimes lletres que van
després del punt) en el nom de l'arxiu.

Si el nom de l'arxiu fins ara acabava en “.htm” o en “.html”, ara ha d'acabar en “.php”. Això
indica al servidor web que ha de treballar amb l'arxiu de la forma típica de PHP, amagant els
codis font i enviant només els resultats de sortida.

Per tant, si anàvem a crear un arxiu anomenat “Pagina02.html”, el que farem és gravar‐ho amb
el nom “Pagina02.php”.

El seu contingut serà el següent:



<head>





</head>

<body>

La fecha de hoy del lado servidor en PHP es:

<?

$fecha = time ();

echo date ( "j/m/Y" , $fecha );

?>

</body>

</html>

Aquesta pàgina s’ha de pujar a un servidor web per veure com funciona.

Més endavant veurem com moure pàgines cap a i des d'un servidor web amb el protocol FTP.
De moment anem a assumir que ja ho sabem i aprofitarem per veure tres detalls:

1. L'aparença de la pàgina en el navegador d'Internet.

2. El codi font que hem utilitzat (que realment ja hem vist en el llistat anterior).

3. El codi font enviat al client des del servidor web.

L'aparença de la pàgina web és:



El codi font php que hem utilitzat és:



<head>



</head>

<body>

La fecha de hoy del lado servidor en PHP es:

<?

$fecha = time ();

echo date ( "j/m/Y" , $fecha );

?>

</body>

</html>

I ara, el codi que rep el client és el que ja sabem com revelar (seleccionant en el navegador el
menú Veure, opció codi font):



Com podem veure, no existeix cap rastre del codi font. És com si un dissenyador hagués escrit
una pàgina estàtica directament en el navegador.

Això té el seu pros i els seus contres:

• Pro: el client no pot veure el nostre codi font.

• Pro: el navegador del client no realitza cap esforç d'execució de programa; no gasta els
seus recursos.

• Contra: el servidor realitza aquesta tasca, gastant els seus recursos de temps de
processador.

• Contra: com més complex és el codi font que ha de processar del costat servidor, més
potent haurà de ser la cpu per no col∙lapsar‐se amb les peticions d'un número creixent
d'usuaris.

Google Analytics: un script del costat client
La gent corrent pensa que el màrqueting és una activitat purament creativa en la que no
intervenen les ciències matemàtiques.

El bon màrqueting és el que genera idees i després les justifica amb xifres reals i resultats
estadístics.

Google Analytics és una eina de Google que s'encarrega d'obtenir estadístiques d'èxit o de
fracàs d'un lloc web i de les seves diferents campanyes de màrqueting digital.

Dades com ara: quanta gent em visita? quants estan interessats en el meu producte X i/o en el
meu producte Z? Els clients que arriben al meu lloc a través d'on arriben? Els que se'n van cap
a on se'n van? Quants són? Quin percentatge de creixement o decreixement tinc en el temps?
Quin percentatge de respostes tinc sobre una campanya determinada?



Què necessitem per utilitzar Google Analytics?
Google Analytics és un servei gratuït. Només cal donar‐nos d'alta i saber com inserir uns scripts
de client per començar a obtenir resultats.

Com donar-nos d'alta en Google Analytics?
Per donar‐nos d'alta en Google Analytics necessitem un compte de correu electrònic i omplir
les dades d'un formulari que podem trobar en www.google.es

En la cantonada superior dreta de la pàgina tenim una opció que posa “Accedir” en castellà o
“entra” en català.

Polsarem aquesta opció amb el ratolí. Ens apareixerà la següent pàgina:

Mitjançant el cercle vermell volem assenyalar millor a on hem dde fer clic si volem crear un
nou compte de Google. Fem clic en “crear una gratis”.



Només ens queda omplir les dades i el contingut del Captcha (les lletres recargolades de color
vermell) com a mesura de seguretat.

Després d'això, premerem el botó “Accepto. Crear el meu compte”.

Google ens enviarà un missatge de correu electrònic al nostre compte per verificar la nostra
identitat.



Farem clic en el primer enllaç del missatge per activar el nostre compte.

Ara que ja tenim compte en Google, anem a enregistrar‐nos amb un procés específic de
registre per a Google Analytics. La direcció és:

www.google.com/analytics

Farem clic en “Registri's ara mateix”.



Entrarem les nostres dades del compte de Google que hem creat en el pas anterior, i
premerem el botó “Accedir”.

Premerem el botó “Registre”.



Omplirem les dades (en aquest cas són d'exemple, cadascun ha de tenir els seus) i premerem
el botó “Continuar”.

Després d'omplir les dades tornarem a prèmer “Continuar”.



Aquesta pantalla conté les condicions legals del servei. Després de revisar‐les, marcarem la
caixa de comprovació que accepta els termes de contracte i premerem el botó “Crear un
compte nou”.

A continuació, Google ens proporciona el fragment de script i les instruccions necessàries
perquè cada vegada que un client vegi una de les nostres pàgines, es registri aquest fet en el
sistema d'estadístiques de Google Analytics:

Com podem apreciar, les instruccions diuen que hem d'inserir aquesta seqüència de script
abans de finalitzar el bloc de capçalera d'HTML.



Per tant, una pàgina preparada per reflectir les seves estadístiques en Google pot ser aquesta:




<head>



<script type="text/javascript">

  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA‐20664689‐1']);

  _gaq.push(['_trackPageview']);

  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google‐

analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();

</script>

</head>

<body>

La fecha de hoy del lado cliente es:

<script>



var f = new Date();

document.write(f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear());

</script>

</body>

</html>

El codi que es veu marcat en negreta és el meu codi de compte de Google Analytics i només
serveix per a la meva web.

Varia en cada lloc web per a cada usuari de Google Analytics.

La nostra pàgina ja està llista per ser pujada al servidor web. Cada vegada que un usuari l'obri,
això es reflectirà en les estadístiques de Google.

Més endavant veurem com podem obtenir les estadístiques.

Moure pàgines cap a i des d'un servidor web
De moment, hem hagut de fer un acte de fe i creure el que ens diu el professor, això és, que la
pàgina web que hem de pujar al servidor funciona correctament.

Hem hagut d'assumir‐lo perquè no sabem encara com pujar continguts a un servidor web.

Aquest és el tema que anem a tractar en aquesta secció.

El protocol FTP
Quan es va crear Internet, es van crear protocols de comunicacions entre clients i servidors.

Els humans tenim protocols per comunicar‐nos entre iguals i amb superiors jeràrquics. Hem de
saber en quin ordre hem d'intervenir, què podem demanar i quin no, i les paraules adequades
per demanar‐ho.

El protocol FTP és justament això: un conjunt de normes socials entre ordinadors que serveix
per col∙locar un arxiu en un lloc concret d'un servidor. És a dir: el transferim des del client cap
al servidor.

Arxiu en anglès es tradueix per “File”. Per això l'FTP significa “File Trànsfer Protocol” o protocol
de transferència d'arxius.

Funciona en els dos sentits: pot enviar arxius des del client al servidor i també pot abaixar‐los
des de servidor cap a client.

Bé, però no teníem ja una forma d'abaixar‐los mitjançant el navegador?

Certament, però els baixàvem censurats, com acabem de veure: els codis font no els baixa
mitjançant el navegador (protocol HTTP). En canvi, sí que els baixa quan els sol∙licitem
mitjançant FTP.



Llavors tampoc estan segurs els nostres codis font?

Els nostres codis font estan molt segurs perquè només tindran resposta per FTP aquells usuaris
que hagin estat prèviament autoritzats mitjançant un codi d'usuari i una contrasenya o
password.

Això vol dir que hem d'aprendre un nou llenguatge per demanar arxius?

No fa falta. Existeixen programes que treballen amb el protocol FTP i que s'encarreguen de
pujar i baixar arxius.

Només necessiten saber el nom del servidor FTP, el codi d'usuari autoritzat i la contrasenya.
Alguns servidors necessiten a més que se'ls especifiqui un número de port.

Què és un número de port?
De ben segur que hem vist alguna vegada el moll de càrrega de camions d'una empresa de
transports. Té un seguit de portes numerades (porta 1, porta 2, i així successivament). El
nostre ordinador també té portes per treballar amb Internet. La porta més usual per al
protocol FTP és la 21. Alguns servidors disposen de més d'un port per a FTP o bé, per qüestions
de seguretat, operen amb un altre nombre de port que mantenen en l'anonimat per evitar
intents de hackers. Si no ens diuen el contrari, el nostre servidor utilitzarà el port 21.

El codi d'usuari, la contrasenya, el nom del servidor, l'arxiu a transferir, el directori de destí i el
nombre de port d'FTP constitueixen el que denominem paràmetres de servidor d'FTP.

On trobar programes gratuïts d'FTP
Filezilla és un programa gratuït d'FTP que té en compte tots aquests paràmetres de servidor
d'FTP.

Trobar‐lo és fàcil. Podem utilitzar Google preguntant per “Filezilla download” o bé podem anar
directament a un dels múltiples llocs web d'utilitats en els quals està disponible.

Per exemple: http://www.utilitats‐utiles.com/download‐filezilla‐windows‐xp.php

Si volem anar al lloc original de Filezilla: http://filezilla‐project.org/

Aquest lloc web proporciona una versió per a Windows XP. Existeixen versions per a una gran
varietat de sistemes operatius (Windows de de diferents versions, Macintosh, Linux…).

Descarregar i instal·lar Filezilla
Suposem que hem anat al lloc original de Filezilla i que ens apareix la seva pàgina típica:



Farem clic en el botó gris etiquetatge com “Download Filezilla Client”.

Ara ens demana que seleccionem el sistema operatiu que tenim:



Si és Windows, seleccionarem la primera opció: “Filezilla_3.3.5.1_win32‐setup.exe
(recommended)”.

Aquesta opció executa directament l'instal∙lador de Filezilla i és la recomanada perquè és la
més ràpida.

La següent opció que descàrrega un arxiu ZIP és útil si estem pensant a utilitzar un sol paquet
descomprimible per instal∙lar‐lo en diverses estacions de treball.

De moment, per a aquest curs, seleccionarem la primera opció.

És possible que el navegador ens adverteixi que anem a descarregar un arxiu i ens demani
confirmació. Se la donarem en aquest cas.

Després d'això ens apareixerà aquest quadre de diàleg:



Premerem el botó Run o Executar (depenent de l'idioma que ens aparegui) i començarà la
descàrrega:

Un cop finalitzada, ens preguntarà:



Farem clic a executar.

Sembla que s'està baixant la versió en anglès és això correcte?

Tranquils. Els diàlegs són en anglès, però el lloc web de Filezilla detecta l'idioma del navegador
que fem servir i descàrrega la versió que encaixa amb l'idioma del navegador.

Ens apareix la pantalla de llicència d'usuari. Si estem d'acord, polsarem el botó “I agree”.

Ens està preguntant si la instal∙lació serà vàlida només per a l'usuari actual de la sessió o si en
canvi volem que l'utilitzi qualsevol usuari. Si no ens importa, deixarem seleccionada l'opció per
defecte (Anyone) i premerem el botó Next.



Si ho volem així, podem marcar també l'opció Desktop Icon , que ens col∙locarà la icona de
Filezilla en la superfície de l'escriptori. Sol ser més còmode, sempre que tinguem espai en
pantalla per més icones.

Ens pregunta ara la ubicació del programa en el nostre disc dur. Per defecte ja és correcta.
Premerem el botó Next.



Ara ens pregunta si estem d'acord que el nom del menú d'accés sigui “FileZilla FTP Client”. En
principi ja està correcte. Premem el botó “Install”.

Ens apareix una barra de progrés segons va instal∙lant l'aplicació.

Finalment ens indica que el programa està instal∙lat i llest per utilitzar‐se.



volem executar el programa ja, directament.

Com veurem de primer serà el quadre de diàleg que ens ofereix informació sobre Filezilla. El
programa es lliura juntament amb un manual d'usuari, així que si tenim dubtes, cada vegada
que desitgem usar‐lo, podrem consultar‐ho.

També ofereix documentació addicional.

Premerem el botó Acceptar per tancar aquest quadre de diàleg.

Ens apareixerà la pantalla principal de Filezilla:



Fixem‐nos que els paràmetres d'FTP són els que ens apareixen en la part frontal superior de la
finestra, en les caixes de text que apareixen etiquetades com

• Servidor

• Nom d'usuari

• Contrasenya

• Port

Una vegada que sapiguem els paràmetres que cal especificar, els omplirem i podrem polsar el
botó de “connexió ràpida”per connectar‐nos amb el servidor.

Dins dels serveis que proporciona el protocol FTP tenim el de copiar les estructures de
carpetes del servidor. Per aquesta raó tenim en la meitat de l'esquerra l'estructura de carpetes
del nostre ordinador local. És la part del client.

La part de la dreta estarà buida fins que connectem amb el servidor.

En la part esquerra, dedicada al client, ens apareixen els nostres discos durs.

En un d'aquests discos durs, dins d'una de les seves carpetes, guardarem els continguts que
volguem col∙locar en el servidor.



En el meu PC, la carpeta que utilitzo per salvaguardar els continguts del meu lloc web es troba
en Els meus documents/Alfons/Lloc sense nom 1

Això vol dir que, en sentit contrari (de servidor a client) serà la carpeta en la qual guardem la
copa de seguretat del nostre lloc web.

Potser no sigui el nom més adequat (necessitaríem un nom més explícit com per exemple
MiWeb), però de moment en tenim prou.

Aquesta és la carpeta que he seleccionat per a la còpia local del web en la banda client.

Jo ara vaig a connectar amb el meu servidor utilitzant els meus paràmetres per veure què
apareix en la part dreta, dedicada al servidor.

Per a això introdueixo els paràmetres d'FTP del servidor i pols el botó “Connexió ràpida”.



El contingut del servidor apareix en la meitat dreta que fins ara teníem buida. Normalment el
web es troba en un dels directoris que es presenten en primera instància. Concretament en el
directori “web”.

Si faig doble clic sobre ell, veuré, directament, el contingut del web:



A partir d'aquest moment, pujar i baixar arxius serà tan fàcil com arrossegar i deixar anar des
de la part esquerra a la dreta o viceversa.

On trobar allotjament web (servidor) gratuït
Quan comencem a estudiar una nova matèria, com en el nostre cas els aspectes tècnics de la
creació de llocs web, és normal que ens sentim insegurs i barroers.

Per això necessitem fer els experiments amb gasosa i saber que, si ens equivoquem, no passa
res i no ens tocarà rascar‐nos la butxaca per no res.

Aquells que ens hem dedicat a fer maquetes d'aeromodelisme, si ens recordem dels primers
temps, fa 20 anys, quan només es construïen models utilitzant fusta de balsa, cada cop i cada
caiguda dels nostres avions de prova ens costava molts diners i molt temps per reparar‐los.

Ara estem en l'era d'Internet, i d'igual manera que ens acabem de descarregar un programa
d'FTP gratuïtament i hem començat a utilitzar‐lo en cinc minuts, també podem trobar llocs
d'allotjament gratuït.

Es tracta de llocs limitats en prestacions, que no són òptims per fer SEO o SEM, però que ens
van a servir per provar els nostres llocs web fins a estar segurs que funcionaran prou bé a
l'entorn de destí.

Un d'aquests proveïdors d'allotjament gratuït és Zymic (www.zymic.com).



Per utilitzar l'allotjament gratuït de Zymic hem de crear un compte d'usuari de manera molt
senzilla i amb pocs requisits.

No fa falta reservar noms de domini. Per defecte Zymic subministra un nom de subdomini (per
exemple lamevaempresa.zxq.net) on zxq.net és el domini i lamevaempresa és el subdomini.

Zymic proporciona un servei de suport tècnic molt competent que pot ajudar‐te quan tinguis
dubtes sobre com administrar el teu lloc web.

També disposa de fòrums on els diferents clients es comuniquen entre ells, escrivint preguntes
i respostes sobre qüestions tècniques.

On és el negoci dels servidors gratuïts?
És a dir, que hi ha persones a Internet disposades a ajudar‐te, a donar‐te programes
gratuïtament i a proporcionar‐te consell i suport tècnic.

Potser Internet és una ONG? Passerells sense fronteres?

No. El que existeix, en realitat, és una concepció de negoci innovadora i molt diferent de la que
pugui tenir un país de cultura llatina com el nostre.

Podem comparar‐lo en certa manera amb una tenda de roba, on podem anar a veure roba,
emprovar‐nos‐la i comprar només la que ens hagi agradat.

Zymic proporciona també, com opció, allotjament professional de pagament, amb prestacions
elevades i diferents opcions de capacitat. Aquest allotjament és òptim per a màrqueting digital
només si la nostra web ha d'allotjar‐se forçosament als EUA. Si no, (en cas de tenir un lloc
espanyol o de qualsevol altre nacionalitat) les puntuacions de Google no ens afavoriran en
absolut.

Zymic també proporciona complements de programació vendibles. Per exemple plantilles de
lloc web realitzades amb PHP amb dissenys personalitzats. Nosaltres podem utilitzar‐les com a
base per als nostres dissenys estètics, però no podem prendre'ls la nota del copyright fins que
paguem 35 dòlars al seu autor.

Zymic, al proporcionar allotjament gratuït, es beneficia del trànsit destinat a aquests llocs, que
passa a engrandir les seves estadístiques, atorgant‐li un rànquing notori a Alexa. Una bona
estadística a Alexa es tradueix per un bon possicionament i per tant una valoració econòmica
(de cara a una possible compra/venda) més gran.

És, en gran part, una forma objectiva de valorar un intangible.

Estem dient que Zymic és el proveïdor d'allotjament ideal? No. Simplement és una molt bona
opció per començar a desenvolupar el lloc web d'una petita i mitjana empresa, en vistes a
traslladar‐ho després a un domini propi amb tots els requisits de SEO i SEM.

Com treballar amb Zymic



Zymic es troba en la següent URL: www.zymic.com

Zymic basael seu servei, tal com dèiem en la secció anterior, en comptes d'usuari.

Cada compte d'usuari té un identificador d'usuari i una contrasenya.

Cada compte pot tenir diversos llocs allotjats.

Com dèiem abans, no fa falta reservar noms de domini. Per defecte Zymic subministra un nom
de subdomini (per exemple lamevaempresa.zxq.net) on zxq.net és el domini i lamevaempresa
és el subdomini.

Existeixen diversos dominis generals disponibles.

Crear un compte d'usuari en Zymic
Vista la pantalla anterior, veiem que disposa en la part frontal d'un menú amb l'opció Sign
Up/login (donar‐se d'alta / entrar).

Fem clic en aquesta opció.



Veiem en la capçalera “Why register?” o “Per què registrar‐se?”. Traduirem el text per a major
comoditat:

“Faci’s membre de Zymic i serà capaç de crear un número il∙limitat de comptes d'allotjament,
opinar en fòrums sobre Internet, comentar i puntuar manuals d'ús i plantilles i molt més!
Registrar‐se és fàcil i només le prendrà uns minuts del seu temps.”

Per registrar‐nos només haurem d'omplir aquests camps:



Recordem que cal apuntar amb meticulositat les dades que anem a donar, amb la finalitat que
puguem consultar‐los si alguna vegada se'ns obliden.

En username va el nom d'usuari, normalment una sola paraula, com per exemple
cursomarketing o jperez.

A continuació ve el compte de correu electrònic. Podem donar el nostre compte de correu
existent, o crear una prèviament per tal fi a gmail.

Després ve la contrasenya o password, que haurem de teclejar dues vegades per assegurar‐nos
que és la correcta.

Sota tenim un requadre on apareixen unes lletres rares. Es tracta d'un truc anomenat Captcha.

La intenció és comprovar que el que sol∙licita el compte és un operador humà. Un mètode molt
comú per fastiguejar a la competència consisteix a sobrecarregar els seus servidors amb
comptes sol∙licitades per un programa robot que es dóna d'alta milers de vegades en el
sistema.

Per comprovar que és un operador humà, imprimeix en pantalla dues paraules distorsionades
de tal forma que un OCR no pugui llegir‐les.

Si les llegeix una persona, podrà seguir endavant amb la seva gestió de compte. Si es tracta
d'un robot, el sistema ho discriminarà.



Una vegada teclejades les dues paraules que apareixen, podem polsar el botó groc que posa
“Confirm registration”.

El servidor ens redirigirá a la pàgina del panell de control.

La pàgina que es mostra a continuació és la meva pàgina de compte personal, per la qual cosa
el lector podrà veure els llocs de proves que tinguem donats d'alta.

Per crear un nou lloc d'allotjament, polsarem el botó gris gran que posa “Create New Web Host
Account”.



En aquest cas anem a crear un lloc web al qual anomenarem profemktg. Aquest serà el nom
del nostre subdomini.

El nom del domini real ho podrem escollir dins dels disponibles a la caixa de llista combinada.

Podem deixar el que ens apareix per defecte: zxq.net

Després d'especificar aquests dos valors, prosseguirem polsant el botó blau “Continue”.

Ara ens demana una contrasenya, que haurem de repetir dues vegades. Aquesta contrasenya
no té per què coincidir amb la mateixa que hem donat en el compte.

Per tant, la pensem, la teclegem dues vegades i l’apuntem en un paper.

Premem el botó Continue.

Zymic ens avisa que no podem usar l'allotjament gratuït amb finalitats fraudulentes o il∙legals.

Per continuar haurem de donar el nostre consentiment i marcar els tres checkboxes (quadrats
per marcar) que es troben al final de la pàgina:



Marcarem aquestes tres checkboxes, omplirem un Captcha que es troba sota, i premerem el
botó gran “Create web site account”.

Després d'uns moments, el lloc web es crearà i Zymic ens informarà dels paràmetres d'FTP i
d’altres detalls tècnics:

El més recomanable ara és imprimir la pàgina en la nostra impressora. Si no tenim cap
impressora disponible, apuntem acuradament els detalls tècnics del protocol FTP.

Des d'aquest moment, el nostre lloc web està disponible i és visible a tot el món Gratis!



Podem veure'l ja obrint un segon navegador d'Internet i teclejant la direcció URL:

Aquesta és l'aparença d'un allotjament acabat de crear.

Tancarem de moment aquest navegador amb el lloc bàsic creat per defecte i tornarem al
navegador en el que hem realitzat tot el procés d'alta.

A sobre dels detalls d'FTP, tenim un botó que ens envia al panell de control. El premem.



En aquesta pàgina veiem tots els llocs web que gestionem. L'últim d'ells és el que acabem de
crear.

Premem el seu botó groc.

Teclejarem la contrasenya i entrarem en el panell de control concret d'aquest nou allotjament
web:

Els tres llums en verd de la part esquerra ens indiquen que estan actius els serveis de servidor
(http), els dóna base de dades (MySQL) i els de transferència d'arxius (FTP).

En la part central de la pàgina tenim les opcions del panell de control:



File Mànager serveix per transferir arxius sense usar el FileZilla. Nosaltres no utilitzarem el File
Mànager per aquesta tasca.

• Database Mànager: serveix per crear noves bases de dades amb opcions tècniques
(per exemple escollir el motor d'indexació i el joc de caràcters internacionals).

• Database Administrator ens permet crear estructures d'informació a la base de dades
(com per exemple taules de clients o de productes).

• L'opció Add Custom Domain permet assignar un nom de domini extern (per exemple
www.profe.com) a aquest domini que de moment es diu www.profemktg.zxq.net .
Representa una forma de redireccionar‐lo. És un pas més, però recordem que no ens
resultarà òptim des del punt de vista del màrqueting digital fins que no resideixi en
una IP del país en el qual tinguem el nostre mercat objectiu de clients. Si no està en
una IP del país, les estadístiques no es reflectiran correctament.

• Support fòrum és un fòrum de preguntes i respostes en anglès sobre el funcionament i
les habilitats necessàries per crear llocs web.

• Live support xat és un xat de diàleg immediat amb la finalitat anterior.

• Password change ens permetria canviar en qualsevol moment la contrasenya de
l'allotjament web.

Deixarem tot tal i com està en aquest punt. Més endavant entrarem en els apartats que
acabem d'enumerar breument. Tancarem la nostra sessió d'administració (log out) i tancarem
el navegador.

Per sortir de la sessió, anirem a la part superior de la pàgina, a mà dreta i veurem una etiqueta
que posa “log out!”. La polsarem amb el ratolí.

A continuació podrem tancar el navegador.

En la següent secció veurem com podem gestionar continguts en el nostre nou lloc web.

Pujant i baixant pàgines al nostre nou lloc web
Ja hem vist com és de fàcil crear un nou lloc web i a més és gratis!

Ara tornarem a recordar el que ja sabem de FileZilla i ho utilitzarem per recuperar el contingut
del servidor web i per col∙locar (pujar) nou contingut perquè sigui visible des de tot el món.

Posem en marxa FileZilla fent doble clic sobre la seva icona o seleccionant des del menú Inici ‐>
Programes ‐> FileZilla FTP Client. Ens apareixerà la pantalla principal de FileZilla.

En la part frontal superior introduirem els paràmetres tècnics d'FTP que hem de tenir apuntats
des que vam crear el nostre nou lloc web.



Premerem el botó “Conexión rápida”.

Index.html o index.php
Veurem que en la part dreta ens apareixen una carpeta i dos arxius.

Centrem la nostra atenció a l'arxiu Index.html.

Aquest arxiu és la pàgina d'inici del nostre lloc web; el lloc per on comença el web quan algú
tecleja la seva direcció URL a Internet: la pàgina principal.

Existeixen servidors que utilitzen altres noms per conveni per a la pàgina d'inici, però un dels
més utilitzats és Index.html.

Una pàgina index.php pot substituir a una pàgina index.html com pàgina d'inici del lloc web.

Normalment una pàgina index.html té prioritat sobre una pàgina index.php, de manera que
quan totes dues estiguin presents, manarà la index.html.

Pràctica 1
Amb FileZilla: Crear una nova carpeta en un lloc del nostre disc dur i copiar en ella el contingut
actual del web (backup).



Comentari 1: per crear una carpeta sobre una ja existent, faci clic en la carpeta pare amb el
botó dret del ratolí. Veurà aparèixer un menú emergent des del qual podrà escollir l'opció
“Crear nova carpeta”.

Comentari 2: l'arxiu ftpquota no es deixa copiar, per la qual cosa només podrem traslladar
l'arxiu index.html.

Pràctica 2
Obrir l'arxiu index.html amb un editor de text, canviar el seu contingut per alguna cosa similar
a “Estem treballant per construir aquest lloc…” i tornar a enviar‐lo cap al servidor.

Comentari 1: atenció amb les paraules que porten accent. On posem una “á” deurem
substituir‐la per una “á” (amb punt i coma) i on tinguem una “à” l’haurem de substituïr
per una “à” també acabada en punt icoma). Per exemple:

Plourà ha de substituir‐se per Plourà

Una vegada enviat l'esmentat arxiu, obrir el lloc web amb un navegador com Internet Explorer,
Safari o Mozilla.

Comentari 2: deixarem obert FileZilla i obrirem l'arxiu index.html amb el bloc de notes de
Windows. Una vegada modificat l'arxiu index.html, tornarem a FileZilla per a arrossegar‐lo des
del client fins al servidor.

Aquest és un resultat possible:



Títols H1 que puntuen en màrqueting digital en Google
En la pàgina que hem modificat hem trobat estils de text com l'H1. H1 és l'abreviatura de
Header 1 i té el valor de ser un estil per a titulares.

Quan Google ho troba, indexa el contingut del titular.

Els titulars H1 es codifiquen en HTML amb una marca d'inici, un text de contingut i una marca
de final, de la següent manera:

<H1>

Text del titular

</H1>

A la nostra pàgina tenim aquest titular:

<h1>Prova de lloc web amb Zymic</h1>

Per aquesta raó, quan passin les aranyes de Google pel nostre nou lloc web, l’indexaran segons
aquest titular, que ens farà servei des d'aquest moment com a criteri de recerca.

D'aquí la importància d'estudiar amb cura el contingut d'aquests estils.



Salts a noves pàgines (“links” o “enllaços”)
En aquesta mateixa pàgina que hem modificat hem trobat elements que serveixen per a
redirigir‐nos a d’altres pàgines (saltar vers a una referència o hiperenllaç).

Vegem una porció de la pàgina en la qual utilitzem aquest tipus de salts:

Si desea visitar mi blog personal: <a href="http://www.alfonsgonzalez.com/" title="Web de
l’Alfons">Alfons González</a>

Realment es tracta d'un estil de text “a”. Això vol dir que en HTML que comença amb <a> i
acaba amb </a>.

Aquest estil té un atribut que es diu href. La paraula clau href és una abreviatura d’hiper‐
referència. El seu valor figura darrere de l'igual i és, en realitat, la direcció URL cap a la que ha
de saltar.

Té un segon atribut anomenat title, que és una etiqueta que apareix sobre la pàgina web quan
sobrevolem l'enllaç amb el ratolí.

És a dir, que la marca d'inici inclou els atributs, després ve el text en si i finalment la marca de
tancament:

<a

Atribut href (direcció URL de destí) amb el seu valor entre cometes

Atribut title amb el seu valor entre cometes

>

Text que volem que aparegui ressaltat

</a>

El llenguatge HTML és molt ampli i existeixen molts llibres i guies gratuïtes a Internet que
parlen de les seves successives versions.

La discussió detallada sobre el propi llenguatge HTML excedeix el propòsit d'aquest temari.

Carregant plantilles
Zymic ens proporciona una gran quantitat de plantilles amb una gran riquesa d'estils que ens
poden servir com a base dels nostres dissenys web.

Aquestes plantilles es proporcionen com arxius descomprimibles en format ZIP amb pàgines
predissenyades.

Per utilitzar‐les s'han de descomprimir. Amb quin programa podem descomprimir‐les? Existeix
algun programa gratuït?



Buscant un descompressor ZIP
Existeixen desenes de descompressors gratuïts a Internet. Un d'ells és IZArc.

Busquem‐lo a Google amb la cadena de recerca “Izarc download” i obtindrem aquesta
direcció:

www.izarc.org/download.html

Atenció!! NO s’ha de prèmer el botó per descarregar el Free Compressor!!

Polsarem en el botó verd “Download now”, que es pot veure en la part inferior de la pantalla i
que es refereixi al IZarc.

La pantalla correcta que ens haurà d'aparèixer és:



Premerem el botó verd assenyalat com “Download Now”.

Premerem el botó Run (executar).



Premerem el botó “Next”.

Acceptem la llicència fent click a l’opció “I accept the agreement” i premem el botó “Next”.



Acceptem per defecte el lloc on anem a instal∙lar la carpeta d’Izarc. Premem el botó “Next”.

Dues possibilitats a escollir:

1. Si volem un menú d'accés ràpid: Acceptem el valor del títol del menú d'accés ràpid



2. Si no volem un menú d'accés ràpid, marquem la caixa de comprovació “Don't create a
Start Menú folder”.

Premem el botó “Next”.

Més opcions per accedir a la icona d’IZarc. Jo personalment escullo:

Premem el botó “Next”.



Aquesta és una estratègia de publicitat força creativa. Aplicació gratuïta amb l'opció d'instal∙lar
un cercador d'ofertes via Internet.

Cada lector decidirà el que prefereixi.

Premem el botó “Install”.



Ara ens demana seleccionar un idioma per a l'interfície de programa. Jo terra demanar la
versió anglesa, que sol ser la que té menys errors de traducció.



Deixarem la selecció per defecte i premerem OK.



Ja està instal∙lat. No fa falta que vegem les novetats. Podem desmarcar aquesta opció i prèmer
el botó “Finish”.

Aquesta instal∙lació ens facilita el treball amb arxius ZIP com els que, tot seguit, ens n'anem a
descarregar de Zymic.

Veure les opcions de plantilles i carregar una en el nostre lloc web
Anem‐nos‐en a l'explorador i obrim el lloc web de Zymic de nou (www.zymic.com)

Seleccionem l'opció Free Web Templates (veure imatge):

Ens apareixerà un catàleg gràfic de les plantilles (templates) disponibles.



Existeixen unes 90 plantilles. Podem seleccionar la que més ens agradi, veure‐la en viu amb
l'opció “Live preview” i descarregar‐la amb “Download”.

Posem que jo decideixo seleccionar la primera plantilla (la que té un franctirador dibuixat) i
vaig a descarregar‐la. Premo el botó “Download”.

Al fer clic, ja s'ha activat el programa IZArc que hem descarregat en la secció anterior.

Ens diu que l'arxiu que anem a obrir es diu 141.zip. Al seu interior conté els arxius necessaris
per col∙locar la plantilla com a base del nostre lloc web.

Ara premerem el botó Open.



Anem a extreure el seu contingut en la carpeta del nostre disc dur local, en la que col∙loquem
l'arxiu index.html.

Aquest quedarà sobre‐escrit pel nou que anem a col∙locar.

Premerem el botó Extract que està en la barra d'eines d’IZarc.



Ens pregunta on volem que descomprimeixi els arxius.

La ruta que ens dóna per defecte no és la que volem, així que polsarem la icona de la carpeta
groga que es troba en la cantonada superior dreta del quadre de diàleg i seleccionarem la
carpeta que ens interessi.

La idea consisteix a descomprimir els arxius i després “apujar‐los” al servidor mitjançant
FileZilla.

En el meu cas, la carpeta es troba en C:Documents and SettingsagonzalezMy
DocumentsAlfonsweb_profemktg

Premem el botó “Extract”.

Un cop extrets els arxius, podem tancar l’IZarc.

Ens n'anem a FileZilla, aplicació que teníem minimitzada en segon pla.



Fixem‐nos a la zona remarcada dins del cercle vermell. Aquí és on tenim la plantilla de la nostra
futura web.

L'operació és així de fàcil: arrosseguem element per element des de la meitat esquerra fins a la
meitat dreta per anar pujant els arxius al servidor web.

Començarem per la carpeta “images”, continuarem amb la carpeta “PSD”, després la carpeta
“Read Me…”, i els arxius index.html, remove copyright i style.css.

Al final els dos costats, client i servidor han de tenir el mateix contingut (a excepció, clar està,
de l'arxiu ftpquota, que només es troba en el servidor).

Ja podem obrir el nostre lloc web i veure què passa:



¡Èxit total!

Tenim el nostre lloc web dissenyat professionalment. Ja podem començar a modificar‐lo al
nostre gust.

Ja podem plantejar-nos la compra d’una eina de disseny web
A partir d'aquest moment, si estem satisfets del que hem aconseguit i veiem possibilitats
d’anar seriosament pel camí del futur, ja podem plantejar‐nos adquirir una eina de disseny
web.

Diguem que, a partir d'ara, podem seguir utilitzant el bloc de notes per editar pàgines web,
però el temps que això ens consumirà en assaig/error ens pot penalitzar molt si busquem tenir
una certa productivitat.

També podem buscar alguna eina de manipulació de gràfics que ens ajudi a transformar
fotografies, imatges de producte, etc., de l'estil de Photoshop, Fireworks o Picture Publisher,
per dir‐ne tres de possibles.

Amb mitja hora de treball i aquestes eines, la nostra web de prova té ja aquesta aparença:



Escollir un servidor web i un entorn de desenvolupament
d'aplicacions
Què necessitem per publicar pàgines a Internet? Opcions barates
Necessitem un servidor d'allotjament que ja estigui dins d'Internet o col∙locar un nostre dins
d'Internet.

De la mateixa manera que parlàvem d'opcions més barates i més cares per dissenyar pàgines
web en la banda client, en la banda servidor també tenim un ampli ventall per escollir.

Si som petits empresaris i el nostre objectiu és crear una web amb un catàleg de productes de
mida reduït, n'hi haurà prou amb reservar un nom de domini i contractar un allotjament per
un any amb les prestacions mínimes en un servidor Apatxe sobre Linux.

Això ens pot costar aproximadament 25 € a l'any.

Si volem tenir una web senzilla, de tipus bloc, optimitzada per a SEO i SEM, on volguem
col∙locar periòdicament articles, canviar la seva aparença fàcilment mitjançant plantilles, rebre
opinions i realitzar conversions de lectors a leads, n'hi haurà prou que l'allotjament proporcioni
un espai de 40 MB, que permeti programació PHP i que disposi d'un servidor de base de dades
MySQL. El nostre software de servidor pot ser perfectament WordPress. Això ens pot costar
entre 40 i 60 € a l'any.

Si volem elaborar llocs que incloguin venda directa per Internet també ens n'hi ha prou amb el
preu anterior, però utilitzar el software de Magento.

Si volem les dues coses amb una major flexibilitat, complements més potents però major
complexitat tècnica, podem optar pel mateix preu i el software de Joomla.

Fins aquí el nivell d'empreses petites o mitjanes (PIMES).



Existeixen opcions més cares, que tractarem posteriorment, quan tinguem una visió global dels
continguts del curs.

Opcions més cares per estar presents a Internet
Parlem ara d'empreses de mida gran amb una herència de sistemes d'informació que
condicionen l'allotjament web.

Es tracta d'empreses que han comprat sistemes gestors de bases de dades de gran capacitat,
que necessiten una xarxa Intranet per proporcionar el seu sistemes d'informació a diverses
subsidiàries i oficines distribuïdes per tot el món.

Requereixen un desenvolupament constant de noves aplicacions internes degudes a nous
plantejaments de negoci (reenginyeria de processos, gestió de la qualitat, impacte
mediambiental, transparència interna, internacionalització i expansió) i amb el boom
d'Internet necessiten enllaçar íntimament els seus sistemes d'informació interna amb la seva
cara externa amb vista al client.

Entre elles es compten les Fortune 500, les empreses financeres, sector assegurances,
navilieres i multinacionals de gran mida.

Un petit consell, si me l’accepteu
Aquí tenim la primera recomanació: no es deixi adular per cap consultor del sector de noves
tecnologies si no té vostè una empresa d'aquesta mida: no li caldrà pas aquest tipus de
solucions de consultoria en un 90% dels casos.

Les empreses de gran mida que entren en el joc de multinacionals del sector de les T.I., tenen
uns cicles d'amortització de sistemes d'informació més llargs que els els cicles de vida de les
aplicacions de software i tecnologies de la informació que utilitzen.

El plantejament d'estar a Internet és per a ells un resultat del seu plantejament de màrqueting
estratègic, per la qual cosa al cap i a la fi no valoren l'amortització amb criteris quantitatius
sinó qualitatius.

Si es troba vostè dins del marge de dubte, necessitarà conèixer casos d'estudi d'èxit i de fracàs
en empreses de similar mida entre la seva competència.

La tecnologia Microsoft és més cara i té majors requisits d’equipament (de màquinari) per al
servidor. Implica també majors costos de mà d'obra especialitzada. Ens movem ja en el terreny
dels milers d'Euros fins als centenars de milers d'Euros anuals i el software és força més
delicat.

El proveïdor d'allotjament de Microsoft sol proporcionar SQL Server com a base de dades, però
hi ha opcions més cares, com Sharepoint Portal Server i la seva complexitat de
desenvolupament és notòria. Els proveïdors amb aquesta tecnologia solen oferir com opció
balancejos de càrrega entre clústers de servidors i connexions punt a punt per fibra òptica, la
qual cosa no sempre està disponible en qualsevol ubicació geogràfica.



Un altre pas en l'escala és ubicar un servidor propi nostre dins d'una granja de servidors
externa del proveïdor d'allotjament. Això ens permetria col∙locar aplicacions d'alt grau de
privacitat que utilitzessin protocols propis sobre TCP/IP o UDP mitjançant sockets o connexió
per telefonia SMS. Per exemple reserves de lloguer via web i control de flotes de vehicles o
control de dispositius remots.

L'opció de la subcontractació global
Arribats a aquest nivell tenim l'opció de la Subcontractació. Una empresa (típicament hindú)
ofereix externalitzar tots els serveis d'informàtica i telecomunicacions amb web inclosa.

Això vol dir que:

• Li manté en funcionament les aplicacions de negoci (ERPs com ara SAP, Intentia,
Vanenburg, etc…).

• Implementa tots els requisits de software.

• Renova el hardware dels servidors periòdicament.

• S'ocupa de les còpies de seguretat.

• Li garanteix suport 24x365.

• Puntualment li desenvolupa aplicacions a mida.

• Li proporciona la connectivitat amb les seves subsidiàries per banda ampla.

• Li canalitza les trucades de veu externes a nivell mundial i internes a través de
centraletes digitals (VoIP).

• I realitza pertinentment les actualitzacions de software requerides.

Les empreses de Subcontractació cobren un lloguer pel conjunt dels serveis aportats.

El negoci dels proveïdors de subcontractació és rendibilitzar la seva inversió, llogant els seus
serveis al màxim possible de companyies de gran mida.

Pros i contres de la subcontractació
Si vostè es decanta per la Subcontractació gaudirà dels següents avantatges:

• Simplicitat.

• Podrà concentrar‐se en el seu negoci i en el que realment sap fer.

• Estalvi en mà d'obra especialitzada.

• No quedarà lligat a un fabricant de T.I. concret.

• Podrà contemplar comptablement la despesa tecnològic sense arrossegar partides
d'amortització.



També patirà els següents desavantatges:

• El principal obstacle és que no es gestiona el coneixement de les persones ni del propi
negoci.

• En la Subcontractació tampoc queda prou clar si un tercer pot utilitzar resultats
parcials de dades per a benefici estadístic propi o de tercers. Efectivament, la privacitat
de les dades queda regulada per contracte amb el proveïdor de Subcontractació, però
no queden protegits:

o Els resultats obtinguts a partir d'aquestes dades mitjançant mineria de dades.

o Les estadístiques ni les tendències o patrons de comportament dels nostres
clients.

o Els models funcionals de negoci.

Aquests tres objectes, per anomenar‐los d'alguna manera, són prou abstractes com per ser
descrits de manera efectiva i ben delimitada mitjançant terminologia legal internacional, més
quan s'actua amb lleis aplicables sota diverses jurisdiccions i malgrat estar aquestes incloses en
països de la WTO.

Finalment, una altra possibilitat és convertir‐nos nosaltres en proveïdors d'allotjament i ubicar
una granja de servidors en la nostra pròpia empresa, amb tots els requisits anteriorment
comentats. En la pràctica aquest model, enfocat a la gran empresa, requereix assumir costos
basant‐se en estratègies, i sol donar‐se en empreses de noves tecnologies on amb gran
impacte d'aquestes en el model de negoci.



Segona part: WordPress
Instal·lació de WordPress
En el mòdul dedicat a HTML i servidors web hem vist com podem descarregar aplicacions,
descomprimir‐les i enviar‐les a través d'FTP a un allotjament web.

Ara anem a veure com podem descarregar‐nos WordPress, descomprimir‐ho, enviar‐ho al
nostre lloc web, configurar‐ho i publicar els nostres primers articles.

Crear un nou espai d'allotjament web
També en el mòdul anterior hem vist com crear espais d'allotjament web. Podem donar d'alta
un en Zymic.com, a CDMon o a Sync.es o al proveïdor amb el qual ens sentim més còmodes.

Hem de tenir en compte que Zymic i altres proveïdors d'allotjament web, que tenen el seu IP
ubicada en USA, no són adequats per obtenir bones estadístiques de trànsit, i que si desitgem
que les nostres estadístiques comptin al nostre país, haurem de contractar l'allotjament al
nostre país en un domini propi i no en un subdomini d'algú que sí es beneficiaria del nostre
trànsit.

Com ja sabem donar d'alta un espai d'allotjament web, ho donarem d'alta sense més seguint
les instruccions exposades en el mòdul anterior.

En l'exemple concret empleat per a aquest curs, he creat el lloc web
www.profemktgwp.zxq.net en Zymic.

Aquest és el seu panell de control:



Com descarregar WordPress
WordPress és una aplicació gratuïta que ens podem descarregar des d'Internet. Té versions en
molts idiomes. En el nostre cas anem a descarregar‐la en castellà o en català.

On podem trobar WordPress en castellà?
Podem trobar WordPress en castellà en: http://és.wordpress.org/

On podem trobar WordPress en català?
Podem trobar WordPress en català en: http://ca.wordpress.org/

Haurem de polsar en el rectangle de color taronja “Descarrega el WordPress 3.0.3 ‐.zip ‐3.2
MB”

Com ja tenim instal∙lat IZArc (el descompressor que vam obtenir al capítol anterior), Windows
reconeix automàticament el paquet ZIP i ho relaciona amb l'aplicació que anem a utilitzar per a
descomprimir‐ho.

De totes maneres, aquesta vegada anem a guardar‐ho comprimit i ho descomprimirem
després.



Polsarem el botó “Save” (guardar).

Ho guardarem en un directori o carpeta a part que no coincideixi amb el qual hem usat abans
en el web de prova amb HTML i PHP.

És a dir, utilitzarem una carpeta nova que tindrem prevista per pujar continguts a un nou web.

Al polsar el botó “Save” ens apareix un quadre de diàleg de selecció de carpeta.

En el meu cas he creat una carpeta anomenada web_profemktg_wp.

Com descomprimir WordPress
Obrim amb l'explorador de Windows la carpeta que cadascun té prevista i en la qual hem
descarregat el paquet de WordPress.

Trobarem en ella el paquete .zip corresponent.



Com ja tenim instal∙lat el descompressor, veurem que l'arxiu apareix amb la icona del
descompressor. Per tant, ja podem fer doble clic sobre ell.

Ens apareixerà l'aplicació de descompressió, amb el contingut del paquet.



Polsarem el botó “Extract” (Extreure).

IZArc ens proposa una carpeta que poc té a veure amb la qual nosaltres tenim preparada.
Polsant la icona groc de la cantonada superior dreta, podrem seleccionar la carpeta que volem
utilitzar.



WordPress descomprimirà els arxius, que podrem veure mitjançant l'explorador de Windows:

Atès que al descomprimir ens ha creat una sub carpeta anomenada WordPress, anem a treure
els arxius d'aquesta carpeta i anem a col∙locar‐los en la carpeta pare.

Fem clic en la meitat dreta de la pantalla i després d'això ens n'anem al menú Edició ‐>
Seleccionar tot (Ctrl‐E).



Ara arrosseguem tot cap a la carpeta pare (en el meu cas web_profemktg_wp).

Ara ja podem eliminar la sub carpeta wordpress. Per a això seleccionem dita subcarpeta i
premem la tecla <Supr>. Confirmem amb la tecla <S> que esborri aquesta sub carpeta que ara
està buida.



Eliminar l'arxiu ZIP inicial
No fa falta transferir el ZIP inicial, que ocupa més de 3 MB. Podem estalviar el temps necessari
per a això eliminant aquest arxiu abans de transferir.

Ho seleccionarem amb el ratolí i premerem la tecla <Supr>.

Ja tenim llista la carpeta per usar FileZilla i transferir el seu contingut al nostre nou web.

Com enviar WordPress al nostre lloc web
Una vegada descomprimits els arxius i col∙locats en el seu directori apropiat, obrim FileZilla i, si
estem treballant amb servidors de Zymic, observarem una mesura de precaució.

Eviti transferències multitasca amb Zymic
Si està utilitzant Zymic com proveïdor, haurà de tenir en compte que els servidors de Zymic
sempre van molt col∙lapsats per ser d'accés gratuït i per tenir molts usuaris connectats
simultàniament.

FileZilla pot transferir més d'un arxiu a la vegada. Pot obrir diverses tasques al mateix temps,
com si obrís diferents canals per transferir per cadascun un arxiu diferent.

Els servidors FTP poden treballar normalment amb cinc transferències simultànies, però degut
a la càrrega de treball de Zymic, és millor autolimitar‐se a enviaments unitaris.

Podem configurar FileZilla perquè treballi enviant arxius un a un.

Per configurar aquesta prestació, anirem al menú Editar ‐> Opcions.



Ens apareixerà un quadre de diàleg amb un diagrama d'arbre en la part esquerra. Dins
d'aquest arbre seleccionarem la branca “Transferències”.

En la part dreta del quadre de diàleg ens apareixeran les opcions que controlen la
transferència.

La primera d'aquestes opcions posa “Màxim nombre de transferències simultànies”. El seu
valor ha de ser 1.

Després de posar aquest valor a 1, polsarem el botó “Acceptar”.

Començant la transferència
Col∙loquem els paràmetres tècnics d'FTP en la part frontal superior de FileZilla i premem el
botó “Connexió ràpida”:



En la part esquerra veiem una carpeta local però… Atenció! No és la carpeta que nosaltres
volem usar aquesta vegada.

FileZilla recorda sempre l'última carpeta local amb la qual ha treballat.

Hem de canviar de carpeta per anar a la del nostre nou web. En el meu cas, l'esmentada
carpeta es troba sota de la seleccionada en la part superior esquerra. Per tant, amb un simple
clic la seleccionaré.

Si el nom o la ubicació és diferent, haurà de trobar la carpeta abans de continuar.

Una vegada trobada, seleccionarem tots els seus elements a la vegada. Com? Fent clic mentre
tenim polsada la tecla <Ctrl>. Això ens permet realitzar una selecció múltiple d'elements.

Per a major comoditat encara, podem seleccionar el primer element que volem transferir (en
el nostre cas la carpeta wp‐admin), desplaçar‐nos fins a l'últim element de la llista, mantenir
polsada la tecla de majúscules (<shift>) i fer clic en l'últim element (l'arxiu xmlrpc.php).
Veurem com apareixen tots els elements seleccionats.

Precaució: No seleccionarem la carpeta dels dos punts (..) que és la primer que apareix, perquè
aquesta carpeta vol dir saltar a la carpeta pare i copiar‐la també en el servidor.

Una vegada seleccionats aquests elements, els arrossegarem tots a la meitat dreta que
representa l'allotjament del servidor web.



Nota: La transferència consta d'uns 700 arxius, per la qual cosa podem assumir que tardarà des
de diversos minuts fins a una mica més de mitja hora, depenent de la velocitat efectiva que
tinguem en la nostra connexió de banda ampla.

Intentar transferir un WordPress a través d'una línia convencional de 56 K és un exercici de
paciència pràcticament irrealitzable.

Això ens porta a la consideració que deurem sempre treballar amb una línia que d'un cabal de
banda ampla: com a mínim un ADSL d'1 Mb.

Crear la base de dades MySQL per a WordPress
WordPress emmagatzema en una base de dades els articles i la disposició en pantalla (el
disseny) del bloc.

Per a aquest fi necessita que el servidor d'Internet tingui també integrat un servidor de bases
de dades de MySQL.

MySQL és un servidor de base de dades gratuït que pertany des de fa poc a la companyia
Oracle. Se sol instal∙lar en servidors amb sistemes operatius Linux i Windows que equipen el
servidor d'Internet Apatxe, tot això basat en tecnologia de desenvolupament PHP.

Per crear una base de dades concreta en un servidor MySQL del proveïdor Zymic, anirem al
panell de control de Zymic.



Veiem una sèrie de botons grocs que corresponen cadascun amb un lloc web que hem creat en
el nostre compte.

Polsarem el botó groc “login” que correspon al nostre lloc web (en el meu cas és l'últim:
profemktgwp.zxq.net).

Teclejarem la nostra contrasenya de lloc web i entrarem al panell de control.

Ara farem clic en “Database Management” que tenim assenyalat en vermell en la imatge
anterior.

Ens apareixerà la següent pantalla:



Tenim un botó per crear una base de dades, un altre botó per crear un usuari i un botó per
assignar drets (privilegis en l'argot de base de dades) a l'usuari encarregat d'administrar‐la i
accedir a ella.

Anem a actuar en tres fases:

1. Generar la base de dades.

2. Crear l'usuari.

3. Assignar‐li privilegis.



Fase 1: Generar la base de dades
Generar la base de dades és un procés intern en el que prenem prestat un espai del servidor
per emmagatzemar les nostres dades. Per gestionar aquest espai s'han de crear estructures
que MySQL generarà automàticament.

Atès que existeixen molts llocs web diferents, Zymic pren precaucions i evita que hagi bases de
dades que tinguin el mateix nom. Per a això ens obliga que el principi del nom de la base de
dades sigui fix.

D'aquesta manera, si a algú se li ocorre posar el nom clients, existiran dues bases de dades
diferents: clients precedida del nom del lloc web 1 i clients precedida del nom del lloc web 2.

Nosaltres indicarem com nom “wordpress” i ho anotarem en un paper.

En el paper escriurem:

Nom de la base de dades: profemktg_zxq_wordpress

Premerem el botó “Create Database” per continuar.

Fase 2: Crear l'usuari
Hem de crear un usuari amb drets sobre la base de dades: drets per llegir, escriure, crear
estructures, administrar…

Abans de donar‐li drets hem de crear l'usuari.

Igual que en el cas anterior, Zymic s'assegura que no hagi noms d'usuaris que coincideixin. Per
això ens obliga que el nom de l'usuari comenci per un número que ell sap que és únic per a
nosaltres.

Aquest serà el prefix. El sufix serà wordpress.

Després d'indicar el nom d'usuari, especificarem una contrasenya. Per assegurar‐se que no la
teclegem per error, devem repetir‐la en les dues caixes de text i que coincideixi.

Anotarem en el paper la contrasenya escollida al costat del nom de l'usuari i polsarem el botó
“Create User”.



Fase 3: Donar drets a l'usuari
Ara donarem drets a l'usuari que acabem de crear perquè pugui treballar amb la base de
dades.

Per defecte ja ens surt seleccionat l'usuari que hem creat i apareixen seleccionats tots els drets
possibles.

Premerem el botó “Assign privileges”.

La part final de la pàgina serviria per modificar o eliminar el que hem creat, així que de
moment no ens interessa tocar‐la.

Sortim del panell de control clicando sobre “Log out!” en la cantonada superior dreta de la
pàgina:

I, finalment, guardem el paper en el qual hem apuntat totes les dades, perquè els
necessitarem per instal∙lar WordPress.

Com instal·lar WordPress
Eliminar index.html
Si recordem el contingut inicial del servidor web, recordarem que sempre existeix una pàgina
d'inici anomenada index.html, la qual té prioritat sobre qualsevol altra.

Wordpress no conté cap pàgina index.html, sinó una pàgina index.php.

Atès que la prioritat està del costat de la pàgina index.html, no es mostrarà res de wordpress
fins que no eliminem aquesta primera pàgina i deixem que arrencada a través de index.php.

Per tant, abans que arrencada WordPress en manera instal∙lació, hem d'eliminar, des de
FileZilla, l'arxiu index.html.



Seleccionarem index.html en la part dreta de FileZilla (costat servidor) i polsarem la tecla
<Supr>. Confirmarem l'eliminació.

Ja podem obrir el lloc web amb nostre navegador d'Internet.

Obrir el web per configurar
A l'obrir el lloc, ens estarà esperant la pàgina de configuració per a la instal∙lació.

Si no apareix, això vol dir que no hem eliminat l'arxiu index.html. Eliminem‐ho amb FileZilla
des del cantó del servidor.

És habitual que a l'inici de la instal∙lació no existeixi un arxiu de configuració.

Per aquesta raó haurem de polsar el botó per crear‐lo.

Una vegada creat, apareix la pantalla d'instal∙lació pròpiament dita.



Anem a seguir les seves instruccions per poder veure, finalment, la pàgina principal del nostre
bloc en marxa.

Com podem comprovar, ens demanarà totes les dades que tenim apuntats en el paper, així
que prosseguim amb la instal∙lació polsant el botó “Vamos a ello!”.

En el meu paper tinc escrits les següents dades. Tu pots tenir uns diferents, però en general
podràs fer‐te una idea del que has de posar:

Premem el botó “Enviar”.



Ja hem acabat la configuració. Ara podem realitzar la instal∙lació pròpiament dita. Premem el
botó “Iniciar la instal∙lació”.

Ara ens demana el títol que anem a donar‐li al nostre bloc, el nom de l'usuari que va a
administrar‐ho i una contrasenya per assegurar‐se que és el propietari del bloc.



També demana l'adreça de correu electrònic per notificar la participació d'usuaris.

Apuntem aquestes dades en el nostre paper, diferenciant‐los dels de la base de dades. Ara es
tracta del nom d'usuari administrador del bloc i de la contrasenya del bloc.

Finalment, fixem‐nos que existeix un checkbox o caixa de comprovació marcada indicant que
volem que indexi continguts en Google i altres motors de cerca.

Aquesta és l'habilitació per a SEO.

Vam entrar les dades necessàries i premem el botó “Instal∙lar Wordpress”.

A Zymic ens apareixerà aquesta pantalla, perquè paguem si volem que el lloc web ens enviï
directament missatges al nostre compte de correu electrònic i missatges als comptes de correu
electrònic dels usuaris que es registrin en el nostre bloc.

Això és opcional i es pot fer en un altre moment.

Anant un poc més a sota, cap a la part inferior de la pàgina, trobarem un botó que posa
“Accedir”. El premem.

Ara ens apareixerà la pantalla d'entrada al panell de control per a l'administrador del nostre
bloc.



Si volguéssim entrar en l'administració, n'hi hauria prou amb teclejar el nom d'administrador
del bloc i la seva contrasenya. Després d'això, podríem polsar el botó “Accedir”, però en el
nostre cas deixarem això per més endavant i tancarem l'explorador d'Internet.

Una parada en el camí per veure ja el nostre bloc actiu
En aquest moment, entrem o no dins del panell de control del nostre bloc, aquest ja està actiu
i visible a tot el món.

Si obrim un navegador d'Internet i escrivim la seva direcció , podrem veure ja la seva aparença:



Com publicar els nostres primers articles
Per entrar en el panell de control de wordpress utilitzarem la següent direcció URL:

nuestroweb/wp‐admin

on nostre web és la direcció del web.

En el cas que ens ocupa, la meva web es diu www.profemktgwp.zxq.net, per tant, la direcció
web serà:

www.profemktgwp.zxq.net/wp‐admin

Després d'entrar usuari i contrasenya, ens apareixerà el panell de control de WordPress:

Un article és el que WordPress denomina una entrada, així que si el que volem és escriure el
nostre primer article, podem polsar el botó blanc de la part superior dreta de la pantalla que
posa “Nova entrada”.



L'ús dels controls i la barra de botons és molt intuïtiu, i funciona com en la major part dels
processadors de text.

Tenim tres valors importants per introduir un article:

1. Títol: En primera instància tenim el títol, que apareixerà en lletres amb una mida
(caixa) superior.

2. Text de l'article: El contingut de l'article en si, amb negretes, cursives i tipus de lletra al
nostre gust.

3. Extracte o ressenya: Un resum del mateix que serveix per presentar‐lo.

Hem de recordar que cal omplir els tres perquè sigui realment efectiu amb vista a SEO.

Observem que existeix una pestanya que treballa en HTML. Aquesta pestanya ens serveix per
introduir seqüències d'instruccions en HTML, amb la qual cosa podem incrustar objectes
remots, seqüències de codis per a Google Analytics, etc.

Una vegada que tinguem l'article llest per enviar al bloc, polsarem el botó blau “Enviar” perquè
quedi publicat:



Ús de les categories
Podem escriure articles de diversos tipus. Cadascun d'aquests tipus és el que anomenem
categories.

Les categories s'utilitzen per classificar els articles de manera temàtica, de manera que un
lector pot escollir veure un llistat de tots els articles d'economia o de ciències naturals.

Un article pot pertànyer a més d'una categoria i WordPress és capaç de gestionar les
categories i assignar‐les als articles si s'ho vam indicar correctament.

Les categories no deuen confondre's amb les etiquetes.

Vegem a continuació com podem gestionar aquestes categories i després veurem com podem
assignar‐les als articles.

Dins de la pantalla del panell de control tenim una columna vertical a l'esquerra.

En aquesta columna tenim un requadre dalt titulat “Entrades”. En ell trobarem tant la gestió
de les entrades (articles) com la gestió de les categories.



Polsant l'enllaç anirem a la gestió de categories:

En aquesta pantalla estem donant d'alta una categoria anomenada “marketing” (en català
correcte seria “màrqueting”). El seu “slug” o abreviatura és “mktg” i en la descripció podem
col∙locar qualsevol text descriptiu.

Sota la descripció existeix un botó que posa “Afegir nova categoria”. Premem el botó per
crear‐la.



Com assignar una categoria a un article
Assignar una categoria a un article és una forma de classificar‐lo. Per assignar una categoria a
un article des del panell de control, ens n'anem a Entrades, seleccionem l'article que volem
modificar (per afegir‐hi una categoria) i premem “Editar”.

Ens apareixerà aquesta pantalla:

Fixem‐nos que en la banda dret, un poc més sota de la meitat de la pantalla apareixen les
categories. Treiem la marca del checkbox “Sense categoria” i marquem en el seu lloc
“màrqueting”.

Premem a continuació el botó “Actualitzar”.

Si tornem ara a la finestra principal del bloc, veurem la categoria “Màrqueting”. Si fem clic
sobre ella, només ens apareixeran els articles d'aquesta categoria.

Com canviar l'aparença de WordPress
Tenim diverses formes de canviar l'aparença de WordPress:

• Modificant els elements gràfics que apareixen per defecte a la plantilla o substituint‐
los per altres.
• Reordenant les seccions.
• Inserint widgets.
• Canviant de plantilla.

Modificar els elements gràfics d'una plantilla
En el mòdul educatiu anterior dedicat a HTML teníem un gràfic de capçalera més atractiu que
el que ve per defecte amb la plantilla de WordPress.

Anem a veure com podem substituir aquest pel del mòdul anterior.



Des del panell de control del bloc, seleccionarem Aparença en la columna esquerra. Una
vegada desplegat el requadre d'opcions d'Aparença, seleccionarem “Capçalera”.

Ens apareixerà la següent pantalla:

En aquesta pantalla ens adverteixen que si canviem el gràfic, haurem de posar un de mida 940
píxels d'ample per 198 píxels d'alt. Si no té aquestes proporcions, pot aparèixer distorsionat.

En aquest punt del curs no podem perdre molt temps a retocar una imatge.

Hem de pensar, no obstant això, que els aspectes gràfics són els que més temps porten per
polir i encaixar en les dimensions que volem sense que perdin naturalitat.

Per aquesta raó, i per no perdre temps, subministrarem la imatge ja modificada:

Buscarem la imatge amb el botó “Browse”.

Després de trobar‐la polsarem el botó “Pujar”.

Aquest és el resultat:



Els llocs basats en servidors de Zymic han de corregir un tema de drets per permetre la pujada
d'arxius. Si experimentes problemes, consulta amb el professor.

Canviar de plantilla (tema)
WordPress permet canviar de disseny global del bloc. El disseny global es troba en uns
objectes anomenats “plantilles” (templates o themes en anglès).

Es poden instal∙lar i seleccionar diferents plantilles de WordPress. Unes són gratuïtes i altres de
pagament.

Existeixen negocis a Internet dedicats únicament a la venda de plantilles de WordPress.

Podem tenir carregades 1,2 o N plantilles, però una sola serà la plantilla activa.

Com podem canviar de plantilla?
Tenim dues formes de canviar‐la:

1. Des del panell de control. Amb aquesta opció estem limitats als temes oficials de
WordPress i no a la immensa quantitat de temes o plantilles existents a Internet.
Només anem a veure aquells temes que WordPress coneix oficialment. Ens n'anem al
panell de control, seleccionem “Aparença” i dins d'aquesta “Temes”. Ens apareixerà
una pantalla amb dues pestanyes. Seleccionem la segona pestanya i buscarem el tema
que ens vingui de gust per a carregar‐ho posteriorment.
2. Des d'un lloc independent a Internet: baixant‐nos un tema en un ZIP, descomprimint‐
ho i pujant‐ho mitjançant FileZilla a una subcarpeta pròpia dins de la carpeta del
servidor wp‐content/themes.



On podem trobar plantilles de WordPress?
Hi ha tot un seguit de webs dedicades a la producció i/o comercialització de plantilles de
WordPress. Entre aquestes webs podem citar‐ne algunes:

www.ithemes.com

www.themeforest.net

http://graphpaperpress.com/

http://www.megumithemes.com/

http://www.wpthemes360.com/

http://www.nattywp.com/

http://wordpress.org/extend/themes/

…

Inserció de plugins. El Plugin de Google Analytics.
Els plugins són complements de programa modulars que s'insereixen sobre WordPress.

Aquests complements serveixen per alterar el contingut de les pàgines, inserint objectes dins
del codi HTML.

Una de les seves aplicacions més conegudes consisteix a registrar les accions dels usuaris sobre
les nostres pàgines per afectar les estadístiques de Google Analytics.

Els plugins s'administren des del panell de control de Wordpress (
www.nuestrositioweb.com/wp‐admin ).

Després d'identificar‐nos com a administradors, anirem al requadre de Plugins.



El fet més és que probable no tinguem instal∙lat el plugin. Per això anem a polsar el botó
“Afegir nou”, que es troba al costat del títol de capçalera “Plugins”.

Sota l'epígraf “Buscar” teclejarem les paraules “Google Analytics” i premerem “Buscar
Plugins”.

Ens apareixerà el següent llistat:



Tenim diverses opcions, però escollirem per començar “Google Analytics for WordPress” (la
quarta opció del llistat).

Després d'instal∙lar aquest Plugin, ho activarem.

Després de configurar‐ho, haurem d'entrar les nostres dades de compte de Google Analytics,
anant a l'opció del Plugin titulada “Ajustos”. Allà col∙locarem el codi de compte de Google
Analytics.

Inserció de plugins. El Plugin de Facebook.
Existeix més d'un plugin que permet veure les comparticions o en anglès sharings d'articles de
bloc que s'han realitzat des de Facebook.

També permet duplicar automàticament les publicacions del nostre blog fet amb WordPress
perque apareguin automàticament com a novetat del nostre perfil de Facebook i afegir un
botó “M’agrada” al nostre blog, comptabilitzant el nombre de lectors que els hi ha agradat
tant a FB com al nostre blog.

La comunicació es fa mitjançant una aplicació de Facebook que s’ha de configurar perque
sincronitzi el nostre blog amb el nostre perfil concret de Facebook.

Per buscar aquest plugin, anirem al menú Plugins del panell de control del nostre WordPress i
seleccionarem l’opció “Añadir nuevo”. Ens sortirà la següent pantalla:



A la caixa de text que ens pregunta per quin terme hem de buscar, teclejem “SFC” (Simple
Facebook Connect) i premem el botó “Buscar plugins”. Ens apareixerà una llista amb plugins
que coincideixen.

Seleccionarem el que posa “Simple Facebook Connect” amb quatre estrelles grogues, que en
aquesta pantalla es troba en segon lloc del llistat.

Com que jo ja el tinc instal∙lat, em proposa actualitzar‐lo, però pels usuaris que no ho tenen
prèviament instal∙lat, apareixerà “Instalar ahora”. Seleccionem aquesta darrera opció.

Engegarà un procés d’instal∙lació.



Aquest plugin de Facebook és en realitat un conjunt de petits widgets que ens apareixeran en
una llista, llestos per ser activats.

Activació i configuració del plugin de Facebook
Hi ha un d’ells, anomenat Plugin Base (SFC – Simple Facebook Connect) que és necessari per
poder activar els altres. Per tant, de la llista que ens apareixerà, activarem aquest Plugin Base
en primer lloc.

A l’activar‐ho, ens demanarà que generem una aplicació de Facebook per sincronitzar les dues
entitats. Hi ha un enllaç que ens apareixerà per crear aquesta aplicació automàticament.

Després d’haver‐la creat, el generador d’aplicacions ens donarà tres dades essencials per
connectar l’aplicació amb el blog:

• API Key (Clau API)

• Application ID (ID de l’aplicació)

• Secret Key (Secret de l’aplicació)

S’han d’introduïr al panell de control del nostre WordPress. Si no està ben configurat, ens
apareixerà un avís al frontal del panell de control amb un enllaç cap a una plana que ens
ajudarà a configurar‐lo correctament.

Un cop que la configuració està correcta, podrem col∙locar qualsevol dels serveis de plugin i
també podrem veure la configuració de la nostra alicació des de Facebook (he tapat els
elements clau de números privats amb un rectangle vermell):

La plana de Facebook que conté totes les aplicacions que depenen del nostre perfil es pot
trobar entrant, en primer lloc, dins de Facebook i, un cop a dins, teclejar la següent adreça
URL:



• http://www.facebook.com/developers/apps.php#!/developers/

La plana que ens apareixerà serà molt semblant a aquesta:

Els serveis widget del plugin que podem activar per connectar amb Facebook poden ser
aquests:

• Simple Facebook Connect – Base: és el widget base que acabem de comentar i el que
ha d’estar ben configurat perque tota la resta dels widgets que depenen d’ell estigui
en condicions de funcionament.

• SFC – Activity Feed Widget. Crea un registre d’activitat pels usuaris de Facebook que
han visitat el nostre blog.

• SFC – Bookmark Widget. Mostra un botó d’”Afegir marca” que permet als lectors
afegir el blog a la seva barra d’eines de Facebook.

• SFC – Comments: permet als usuaris deixar comentaris al blog fent servir les
credencials d’entrada a Fadcebook. Fa que el procés de deixar comentaris sigui molt
més fàcil pels usuaris de FB.

• SFC – Find us in Facebook Widget: Mostra un botó per saltar a la plana de Facebook
del propietari del blog, vinculant així de forma molt estreta el blog amb el perfil de
Facebook.

• SFC – Like button: mostra una icona de botó “M’agrada” al costat de cada article
publicat al blog, actualitzant automàticament al perfil de Facebook el nombre de
persones a les que les agrada.

• SFC – Login: permet identificar‐se i entrar als usuaris de Facebookdins del nostre blog
compartint els detalls del perfil.



• SFC – Publish: Permet compartir automàticament els articles que escrivim anunciant‐
los al nostre perfil de Facebook.

Editar la posició dels widgets de Facebook dins del blog
La posició en la que apareixen els widgets que hem activat dins de la plana principal del nostre
blog es pot configurar amb el panell de control del blog, dins del menú “Apariencia”, amb
l’opció “Widgets”.

Això farà que ens aparegui la següent pantalla:

Arrossegant amb el ratolí des de la zona central de widgets cap a la barra lateral, farem que
apareguin els widgets que nosaltres volguem.

El resultat a la plana principal del nostre blog serà aquest:



Plugins de comerç electrònic (botiga virtual)
WordPress es pot transformar en una plataforma web per la venda de productes mitjançant
Internet.

Podem buscar plugins de WordPress que ens permetin vendre productes virtuals (arxius
digitals que es poden descarregar) o articles reals que s’han d’enviar per companyies de
transport o de correu.

Aquests plugins munten un “carret de la compra” on s’acumulen els productes que va
seleccionant l’usuari, el qual pot pagar per diferents mitjans que, normalment, són tarja de
crèdit o compte de PayPal.

Només hem de buscar‐los amb el criteri “e‐commerce” o “virtual shop” dins del menú Plugins
del panell de control de WordPress.

Un dels millor integrats amb WordPress i Facebook és “WP E‐Commerce” de GetShopped.org.
Permet crear botigues virtuals senceres amb diferents apariències, formes de pagament i
possibilitat de llançar campanyes de marketing via Facebook.

El seu lloc web d’informació de producte és www.getshopped.org.


Manual de Wordpress

More Related Content

Similar to Manual de Wordpress (20)

More from Montserrat Peñarroya (20)

Manual de Wordpress