Transcript
Page 1: Manual pràctic amb Blogger

1

Manual de p ràctica amb Blogger

Page 2: Manual pràctic amb Blogger

2

Sumari

1. Com crear un bloc ....................................................................................................................................... 3

2. Personalització del bloc ............................................................................................................................... 7

2.1 Modificar la plantilla ................................................................................................................................ 8

2.2 Modificar el disseny .............................................................................................................................. 14

2.3 Alguns Gadgets .................................................................................................................................... 16

2.3.1 Informació textual .......................................................................................................................... 18

2.3.2 Presentació d’imatges .................................................................................................................... 19

3.2.3 Vídeo ............................................................................................................................................. 21

2.3.4 Enquestes ...................................................................................................................................... 25

3. Crear entrades ........................................................................................................................................... 28

4. Crear pàgines ............................................................................................................................................ 32

4.1 Afegir una imatge. ................................................................................................................................ 34

4.1.1 Afegir un enllaç del catàleg Aladí a una imatge .............................................................................. 35

4.2 Afegir un vídeo ..................................................................................................................................... 37

4.3 Afegir àudio .......................................................................................................................................... 44

5. Crear un menú de navegació ..................................................................................................................... 49

Page 3: Manual pràctic amb Blogger

3

1. Com crear un bloc El primer que necessitem per crear un bloc amb Blogger és disposar d’un compte de correu de Gmail. Una vegada el tenim, ens validem i anem a buscar la pestanya “Més” en la que trobarem l’opció de “Blogger”:

Arribem a una interfície similar a la següent, en la que clicarem a “Nou bloc”. Podeu veure que quan hagueu creat més d’un bloc us apareixerà un llistat amb tots ells, des d’on podrem veure’ls i editar-los:

Page 4: Manual pràctic amb Blogger

4

A continuació hem de triar el nom del bloc, la URL i un disseny, que podrem canviar més endavant, per tant no ens preocuparem per això ara.

Nosaltres crearem un club de lectura juvenil de còmic o manga a mode d’exemple.

Veieu que, en el camp “Adreça” apareix un símbol que ens indica que el nom que hem triat pel bloc està lliure Si apareix en canvi una creu vermella voldrà dir que ja està agafat i n’haurem de pensar un altre.

Page 5: Manual pràctic amb Blogger

5

Page 6: Manual pràctic amb Blogger

6

Com podeu veure ja ens apareix el bloc que acabem de crear en el nostre llistat:

Si cliquem a “Veure bloc”, podem veure que ja tenim el bloc creat!

Ara mateix l’aparença del bloc és molt senzilla i poc atractiva. Per tant, anem a personalitzar el nostre bloc i omplir-lo de continguts!

Page 7: Manual pràctic amb Blogger

7

2. Personalització del bloc Tornem a la pantalla inicial que hem vist abans, però ara clicarem a sobre del nom del bloc.

La primera interfície que ens apareix és la de la visió general, amb algunes dades estadístiques, una mica de publicitat i una secció d’ajuda.

No ens aturarem massa en aquesta part. Passem a modificar la plantilla.

Page 8: Manual pràctic amb Blogger

8

2.1 Modificar la plantilla Cliquem a “Plantilla” i arribem a una interfície en la que seleccionarem l’opció de “Personalitzar”.

Aquí podrem tornar a triar quina imatge de fons volem posar, el tema, el color i definir l’estructura que tindran les nostres pàgines.

La primera opció és la de triar els “Templates” o temes pel nostre bloc. Això ens permetrà canviar-ne l’estil de presentació. Proveu vàries opcions fins que trobeu la que més us agradi.

Page 9: Manual pràctic amb Blogger

9

Seleccionem per exemple el tema “Etereo” i el color blau, que quedarà millor amb la imatge de capçalera que hem creat amb el Gimp.

Page 10: Manual pràctic amb Blogger

10

Una vegada hem triat l’estil del bloc podem canviar el color i la imatge de fons que millor s’adaptin al nostre estil. Anem a la secció de “Fons”.

Abans de continuar cal que sapigueu que perquè tots els canvis que anem fent s’apliquin al bloc i es desin haurem d’enrecordar-nos de clicar a la part de dalt a la dreta a “Aplicar al blog”. Ho podem fer en qualsevol moment per evitar que es perdi per algun accident o bé quan ja haguem fet tots els canvis.

Page 11: Manual pràctic amb Blogger

11

Si cliquem a la part de “Imatge de fons”:

Se’ns desplegaran un munt de possibilitats per triar, si mireu a l’apartat d’Art trobareu imatges amb llibres. Una vegada l’hagueu triat clicarem a “Finalitzar”.

* Recordeu de triar un tema i una imatge d’acord amb la capçalera que haguem creat

Page 12: Manual pràctic amb Blogger

12

Teniu l’opció també de dissenyar la vostra pròpia imatge i carregar-la des del vostre ordinador utilitzant la primera opció del llistat “Uploaded image”. D’aquesta manera podeu aconseguir un bloc únic i del tot personalitzat:

A continuació se’ns presenta l’opció de modificar l’amplada de les columnes de les pàgines. És l’opció de “Adjust widths”. En principi no cal que ho toquem, ja està bé com surt per defecte.

Page 13: Manual pràctic amb Blogger

13

Page 14: Manual pràctic amb Blogger

14

2.2 Modificar el disseny Ara toca decidir si volem estructurar el bloc en una sola columna, dues, tres o combinacions vàries. La més típica és la d’una columna central gran i una de més petita a la dreta.

A la “Capçalera” podem afegir la imatge que hem creat amb el Gimp com a capçalera del bloc, d’aquesta manera el farem més atractiu i original.

Per fer-ho cliquem a “Edita” en el quadre de “Capçalera” i se’ns obre una finestra emergent com la següent.

L’única cosa que hem de fer és seleccionar la imatge que està desada en el nostre ordinador, designar-li la ubicació “En lugar del título y la descripción” i clicar a “Desar”.

Page 15: Manual pràctic amb Blogger

15

Si anem ara a “Veure bloc” podem veure com ha millorat força l’aspecte respecte del disseny bàsic que teníem al començament.

Page 16: Manual pràctic amb Blogger

16

2.3 Alguns Gadgets

Més coses sobre el disseny. Si tornem a la pàgina inicial de Blogger i anem a la pestanya de “Disseny” veureu que tenim més opcions, com ara afegir gadgets (petita aplicació o programa que és executat per un motor i que dóna fàcil accés a certs continguts que són utilitzats més freqüentment o simplement per proporcionar informació visual).

Per defecte ens apareixen els gadgets de l’arxiu del bloc o de la informació personal. Veureu que alguns no es poden eliminar ja que es consideren obligatoris però d’altres si. La recomanació és que només n’afegiu a la columna lateral, per no saturar la pàgina. Tot i això no és cap obligació i trobarem casos en que serà millor posar-los al mig.

Mireu també de que continguin informació transversal a tot el bloc ja que apareixeran a totes les pàgines que creeu. Com per exemple, el gadget de l’Arxiu del bloc amb el llistat a totes les entrades, o bé el del calendari que marqui el dia, o informació sobre la ubicació de la biblioteca, un àlbum d’imatges, o un vídeo entre d’altres, però que sigui informació genèrica, no pròpia d’una pàgina en concret. Hi ha infinitat d’opcions, només heu d’anar remenant i cercant les que més us interessin.

Page 17: Manual pràctic amb Blogger

17

Si anem a “Afegir un gadget” ens apareix una finestra emergent en la que podem triar els gadgets. Estan classificats entre: bàsics, populars, destacats i més gadgets. A l’última opció teniu un cercador en el que buscar gadgets per paraula clau i un llistat amb tots els que hi ha disponibles.

Page 18: Manual pràctic amb Blogger

18

2.3.1 Informació textual Per començar veurem un gadget que pot ser molt útil per afegir informació de tipus text com per exemple l’horari del club de lectura, la ubicació o informació variada sobre el Club del lectura.

Cliquem a la creueta i apareix una altra finestra en la que podem afegir un títol i una informació de tipus text enriquit.

Page 19: Manual pràctic amb Blogger

19

Desem i ja tenim el gadget afegit.

2.3.2 Presentació d’imatges Un altre gadget interessant pot ser el d’afegir una galeria d’imatges en forma de presentació. Procedim de la mateixa manera.

Page 20: Manual pràctic amb Blogger

20

Aquí podrem aprofitar per posar els àlbums de fotos que tenim a Picasa, com ara fotos del propi club o imatges relacionades amb la temàtica del bloc o del llibre que estiguem llegint.

Només cal donar un nom a la presentació d’imatges, triar l’opció d’àlbum, posar el nostre nom d’usuari de Picasa i triar l’àlbum que desitgem.

Desem i ja ho tenim actualitzat en el bloc. Recordeu que des de la mateixa interfície de disseny podeu canviar l’ordre i la posició dels gadgets, per defecte, l’últim que afegim apareix en primer lloc.

Page 21: Manual pràctic amb Blogger

21

3.2.3 Vídeo Un altre gadget molt interessant és el del vídeo. Podem per exemple ensenyar els vídeos de la nostra activitat del canal propi de Youtube, o de varis canals alhora, o fins i tot que mostri vídeos que continguin unes paraules clau concretes i que no formin part de cap canal en concret.

Pel nostre exemple, volem fer difusió d’uns vídeos que ensenyen a dibuixar manga perquè hem detectat un interès dins del nostre club de lectura en el tema. Com que no tenim vídeos propis hem triat un canal extern (markcrilley) que ofereix el producte que ens interessa.

Page 22: Manual pràctic amb Blogger

22

Veiem com queda publicat.

Page 23: Manual pràctic amb Blogger

23

Seria un dels casos en que podria ser més interessant posar el gadget a la part central i no en el lateral ja que fa baixar molt a la resta de gadgets.

Per fer-ho no més hem d’arrossegar el gadget fins a on volem.

Page 24: Manual pràctic amb Blogger

24

Després cliquem a “Desa l’organització” i ja apareix publicat.

Page 25: Manual pràctic amb Blogger

25

2.3.4 Enquestes També pot ser d’utilitat el gadget per publicar enquestes i preguntar directament als nostres lectors, per exemple sobre quin llibre volen que tractem properament en el nostre club de lectura.

És molt senzill, només hem de triar la pregunta, les opcions de resposta, decidir si volem que triïn una o més respostes i la data en la que acabarà l’enquesta.

Page 26: Manual pràctic amb Blogger

26

Page 27: Manual pràctic amb Blogger

27

Page 28: Manual pràctic amb Blogger

28

3. Crear entrades Les entrades seran la principal font d’alimentació del nostre bloc i la primera via de comunicació amb els usuaris. Totes les entrades que creem es visualitzaran només a la pàgina inicial del bloc i no a la resta. Apareixeran en ordre cronològic invers, per tant, les últimes que publiquem es veuran en primer lloc.

Per crear una entrada ens situem a la secció “Entradas” o “Escrits” del menú de l’esquerra de la interfície d’edició del bloc.

Sempre ens apareix una primera entrada per defecte que podem editar clicant a sobre del títol. Les entrades posteriors les crearem clicant a “Entrada nova” . Les podem deixar com a esborrany, llavors no seran visibles pel públic, només ho seran quan decidim publicar-les, i evidentment tenim l’opció d’eliminar-les en qualsevol moment a través de la icona de la paperera.

Editem la primera entrada. Sempre hem de posar un títol i un cos de text en el que hi podrem afegir imatges i vídeos o afegir el codi HTML que nosaltres vulguem.

Page 29: Manual pràctic amb Blogger

29

Com veieu disposem també d’unes opcions a la part lateral de la dreta on, entre d’altres coses, podem designar etiquetes que facilitaran la recuperació de la informació.

Publiquem l’entrada i automàticament apareix en el bloc.

Page 30: Manual pràctic amb Blogger

30

Per acabar amb el tema de les entrades dir que, per afegir comentaris sobre cada entrada és suficient clicant a on posa “Cap comentari” a la part inferior, juntament amb la informació de l’autor, les opcions de compartir a les xarxes socials i les etiquetes.

Page 31: Manual pràctic amb Blogger

31

Cliquem a “Publica” i ja ens apareix el comentari a sota de l’entrada.

Després podem respondre el comentari o afegir-ne de nous.

Page 32: Manual pràctic amb Blogger

32

4. Crear pàgines Blogger ens ofereix la possibilitat de crear pàgines independents de la plana inicial. Aquestes pàgines no seran visibles a simple vista quan les publiquem, a diferència de les entrades que apareixen automàticament a la home.

Quan es crea una pàgina se li assigna una URL única que ens permetrà cridar a aquesta pàgina des d’una de les entrades que haguem creat a la part central, des d’un gadget lateral o bé quan creem un menú de navegació superior com veurem en el següent apartat del manual.

Per defecte, quan entrem a “Pàgines” només surt la pàgina d’inici de la que no podem modificar res més que el nom.

Per crear-ne una de nova clicarem a “Pàgina nova”. Veurem que ens apareixen dues opcions: pàgina en blanc o adreça web. Amb la primera crearem una pàgina web que tindrà el format i l’aspecte de la resta del bloc i amb la segona l’únic que fem és crear un enllaç a una pàgina externa al nostre bloc. Ens centrarem en la primera opció.

Page 33: Manual pràctic amb Blogger

33

Si us fixeu en la següent imatge veureu que la interfície d’edició és idèntica a la que trobem quan creem una entrada, per tant no suposarà cap dificultat afegida.

Imaginem que en el nostre bloc volem recomanar altres còmics que no estem llegint però que hi tenen relació i poden interessar als nostres lectors. Crearem per tant una pàgina de recomanacions.

Page 34: Manual pràctic amb Blogger

34

Comencem introduint el text i el títol de la pàgina.

A continuació veurem com afegir una imatge, un vídeo i com crear enllaços que portin al catàleg.

4.1 Afegir una imatge.

Primer hem de tenir la imatge tractada amb Gimp i desada en el nostre ordinador. A continuació cliquem la

icona de la imatge i la seleccionem.

Veureu que hi ha altres maneres de seleccionar la imatge, com ara triar-ne d’altres que ja haguem utilitzat en el bloc, o bé a través dels nostres àlbums de Picasa, des del mòbil, directament d’una webcam o posant la URL d’una imatge d’Internet. Nosaltres expliquem la primera, la resta són iguals de senzilles.

Page 35: Manual pràctic amb Blogger

35

Una vegada s’ha carregat, cliquem a sobre de la imatge i després a “Afegeix selecció”.

4.1.1 Afegir un enllaç del catàleg Aladí a una imatge

Una vegada tenim la imatge, farem que aquesta enllaci a una cerca del catàleg. Primer anem al catàleg a on agafarem la URL que volem que enllaci.

Page 36: Manual pràctic amb Blogger

36

Copiarem l’enllaç permanent al registre clicant el botó dret i a “Copia l’enllaç”.

Page 37: Manual pràctic amb Blogger

37

Ara tornem al bloc, cliquem a sobre de la imatge i després a “Enllaç” ( ). Enganxem l’enllaç que havíem copiat en el requadre i la nostra imatge ja enllaça al registre del catàleg!

4.2 Afegir un vídeo

També podem acompanyar la recomanació amb algun vídeo. Per afegir-ne clicarem a la icona de la pel·lícula

. Hi ha vàries opcions, des de pujar el vídeo des del nostre ordinador, des d’una cerca de Youtube, directament des del nostre canal de Youtube, del mòbil o des de la webcam.

Pel nostre exemple triarem un vídeo d’una cerca de Youtube (Comte que si no és nostre pot ser eliminat i llavors deixarà de veure’s i donarà error.)

Page 38: Manual pràctic amb Blogger

38

I ja ens apareix el vídeo que hem triat.

Page 39: Manual pràctic amb Blogger

39

Existeix encara una altra manera d’afegir un vídeo de Youtube o de qualsevol altra plataforma i és incrustant el codi del vídeo a la nostra pàgina.

Des de la pàgina de Youtube per exemple podem fer el següent.

Clicar a Comparteix� Insereix�copiar el codi que ens apareix en el requadre i enganxar-lo a la nostra pàgina. Fixeu-vos que a sota ens donen diferents opcions de tamany pel vídeo.

Page 40: Manual pràctic amb Blogger

40

Per fer-ho tornem a la pàgina, triem la visualització de disseny HTML i enganxem el codi allà on vulguem que aparegui.

Quan acabem de posar tota la informació clicarem a publicar i ja tindrem la pàgina creada.

Page 41: Manual pràctic amb Blogger

41

Però com dèiem aquesta pàgina no és visible si anem al blog. El que farem serà crear una nova entrada i enllaçar-la des d’allà.

Primer clicarem a “Visualització” i ens copiarem l’enllaç que apareix al navegador i que necessitarem més endavant.

Page 42: Manual pràctic amb Blogger

42

A la barra de navegació trobem l’enllaç que ens interessa.

Page 43: Manual pràctic amb Blogger

43

Creem una entrada nova de la mateixa manera que hem vist abans i aprofitarem també per explicar com inserir un àudio en una publicació.

Primer preparem el text.

Per enllaçar amb la pàgina que havíem creat seleccionarem el text que vulguem enllaçar i com hem fet abans amb les imatges enganxem l’enllaç clicant a “Enllaç”.

Page 44: Manual pràctic amb Blogger

44

Si anem a la pàgina inicial, a sobre de l’entrada que hem creat i cliquemt a sobre d’aquest text “podeu consultar les recomanacions” anirem a parar a la pàgina que hem creat de Recomanacions

4.3 Afegir àudio

Per inserir un àudio que tinguem guardat en el nostre compte de Ivoox treballarem amb la versió HTML d’edició que ens permetrà copiar el codi “object” del fitxer.

Anem a Ivoox, triem el fitxer i cliquem la icona de compartir.

Page 45: Manual pràctic amb Blogger

45

Després triem l’opció “Llévate este audio a tu web o blog”.

I copiem el codi del que més ens interessi per enganxar en el nostre bloc.

Page 46: Manual pràctic amb Blogger

46

Tornem al bloc, triem la visualització de disseny en HTML per veure el codi, i l’enganxem allà a on volem que es vegi. Fixeu-vos que el codi comença per <object> i acaba per </object>.

Page 47: Manual pràctic amb Blogger

47

Page 48: Manual pràctic amb Blogger

48

Publiquem i ja ho tenim visible per tots els usuaris.

Page 49: Manual pràctic amb Blogger

49

5. Crear un menú de navegació Per crear un menú de navegació superior primer haurem de crear les pàgines de la mateixa manera que hem vist a l’apartat anterior. Un cop les tinguem creades copiarem les URL que necessitarem més endavant.

Ja tenim creades les pàgines i anem a la secció de “Disseny o Format” i afegim un gadget de tipus HTML/Javascript.

Page 50: Manual pràctic amb Blogger

50

Per crear un menú bàsic haurem de crear un llistat en codi HTML, és molt senzill. No caldrà que aprengueu a programar amb HTML, només haureu de copiar un codi molt curt. El codi que necessitem és el següent:

<ul>

<li><a href=”url de la pàgina que hem creat”>Text que volem que surti a cada pestanya del menú</a></li>

<li><a href=”url de la pàgina que hem creat”>Text que volem que surti a cada pestanya del menú</a></li>

<li><a href=”url de la pàgina que hem creat”>Text que volem que surti a cada pestanya del menú</a></li>

</ul>

Només heu de copiar aquest codi en el gadget canviant el text en vermell per les URLs i els noms de les pestanyes del menú. Veieu que el conjunt <li>....</li> es va repetint per cada pestanya, tampoc cal abusar i crear un menú massa llarg.

Vegem un exemple. Copiem el codi del requadre, canviem el text en vermell per les URLs i els títols del menú, i desem.

Page 51: Manual pràctic amb Blogger

51

Cliquem a “Desa l’organització” i ja tenim el menú creat.

Page 52: Manual pràctic amb Blogger

52


Recommended