Manual de pràctica amb Blogger                                 1
Sumari 1. Com crear un bloc .................................................................................................
Arribem a una interfície similar a la següent, en la que clicarem a “Nou bloc”. Podeu veure que quan hagueucreat més d’un ...
A continuació hem de triar el nom del bloc, la URL i un disseny, que podrem canviar més endavant, per tant noens preocupar...
5
Com podeu veure ja ens apareix el bloc que acabem de crear en el nostre llistat:Si cliquem a “Veure bloc”, podem veure que...
Ara mateix l’aparença del bloc és molt senzilla i poc atractiva. Per tant, anem a personalitzar el nostre bloc iomplir-lo ...
No ens aturarem massa en aquesta part. Passem a modificar la plantilla.2.1 Modificar la plantillaCliquem a “Plantilla” i a...
Aquí podrem tornar a triar quina imatge de fons volem posar, el tema, el color i definir l’estructura que tindranles nostr...
Seleccionem per exemple el tema “Etereo” i el color blau, que quedarà millor amb la imatge de capçalera quehem creat amb e...
Una vegada hem triat l’estil del bloc podem canviar el color i la imatge de fons que millor s’adaptin al nostreestil. Anem...
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 ...
Teniu l’opció també de dissenyar la vostra pròpia imatge i carregar-la des del vostre ordinador utilitzant laprimera opció...
14
2.2 Modificar el dissenyAra toca decidir si volem estructurar el bloc en una sola columna, dues, tres o combinacions vàrie...
Si anem ara a “Veure bloc” podem veure com ha millorat força l’aspecte respecte del disseny bàsic que teníemal començament...
2.3 Alguns GadgetsMés coses sobre el disseny. Si tornem a la pàgina inicial de Blogger i anem a la pestanya de “Disseny” v...
Si anem a “Afegir un gadget” ens apareix una finestra emergent en la que podem triar els gadgets. Estanclassificats entre:...
2.3.1 Informació textualPer començar veurem un gadget que pot ser molt útil per afegir informació de tipus text com per ex...
Desem i ja tenim el gadget afegit.2.3.2 Presentació d’imatgesUn altre gadget interessant pot ser el d’afegir una galeria d...
Aquí podrem aprofitar per posar els àlbums de fotos que tenim a Picasa, com ara fotos del propi club o imatgesrelacionades...
3.2.3 VídeoUn altre gadget molt interessant és el del vídeo. Podem per exemple ensenyar els vídeos de la nostra activitatd...
Veiem com queda publicat.                            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 quefa baixar...
Després cliquem a “Desa l’organització” i ja apareix publicat.                                                            ...
2.3.4 EnquestesTambé pot ser d’utilitat el gadget per publicar enquestes i preguntar directament als nostres lectors, pere...
27
28
3. Crear entradesLes entrades seran la principal font d’alimentació del nostre bloc i la primera via de comunicació amb el...
Com veieu disposem també d’unes opcions a la part lateral de la dreta on, entre d’altres coses, podem designaretiquetes qu...
Per acabar amb el tema de les entrades dir que, per afegir comentaris sobre cada entrada és suficient clicant aon posa “Ca...
Cliquem a “Publica” i ja ens apareix el comentari a sota de l’entrada.Després podem respondre el comentari o afegir-ne de ...
4. Crear pàginesBlogger ens ofereix la possibilitat de crear pàgines independents de la plana inicial. Aquestes pàgines no...
Si us fixeu en la següent imatge veureu que la interfície d’edició és idèntica a la que trobem quan creem unaentrada, per ...
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...
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 A...
Copiarem l’enllaç permanent al registre clicant el botó dret i a “Copia l’enllaç”.                                        ...
Ara tornem al bloc, cliquem a sobre de la imatge i després a “Enllaç” (        ). Enganxem l’enllaç que havíemcopiat en el...
I ja ens apareix el vídeo que hem triat.                                           39
Existeix encara una altra manera d’afegir un vídeo de Youtube o de qualsevol altra plataforma i és incrustant elcodi del v...
Per fer-ho tornem a la pàgina, triem la visualització de disseny HTML i enganxem el codi allà on vulguem queaparegui.Quan ...
Però com dèiem aquesta pàgina no és visible si anem al blog. El que farem serà crear una nova entrada ienllaçar-la des d’a...
A la barra de navegació trobem l’enllaç que ens interessa.                                                             43
Creem una entrada nova de la mateixa manera que hem vist abans i aprofitarem també per explicar cominserir un àudio en una...
Si anem a la pàgina inicial, a sobre de l’entrada que hem creat i cliquemt a sobre d’aquest text “podeu consultarles recom...
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 n...
Tornem al bloc, triem la visualització de disseny en HTML per veure el codi, i l’enganxem allà a on volem quees vegi. Fixe...
48
Publiquem i ja ho tenim visible per tots els usuaris.                                                        49
5. Crear un menú de navegacióPer crear un menú de navegació superior primer haurem de crear les pàgines de la mateixa mane...
Per crear un menú bàsic haurem de crear un llistat en codi HTML, és molt senzill. No caldrà que aprengueu aprogramar amb H...
Cliquem a “Desa l’organització” i ja tenim el menú creat.                                                            52
53
Upcoming SlideShare
Loading in...5
×

Manual pràctic de blogger

364

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
364
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Manual pràctic de blogger

  1. 1. Manual de pràctica amb Blogger 1
  2. 2. Sumari 1. Com crear un bloc ...........................................................................................................................................................2 2. Personalització del bloc...................................................................................................................................................7 2.1 Modificar la plantilla..................................................................................................................................................8 2.2 Modificar el disseny.................................................................................................................................................15 2.3 Alguns Gadgets........................................................................................................................................................17 2.3.1 Informació textual............................................................................................................................................19 2.3.2 Presentació d’imatges.......................................................................................................................................20 3.2.3 Vídeo.................................................................................................................................................................22 2.3.4 Enquestes.........................................................................................................................................................26 3. Crear entrades...............................................................................................................................................................29 4. Crear pàgines.................................................................................................................................................................33 4.1 Afegir una imatge....................................................................................................................................................35 4.1.1 Afegir un enllaç del catàleg Aladí a una imatge................................................................................................36 4.2 Afegir un vídeo........................................................................................................................................................38 4.3 Afegir àudio.............................................................................................................................................................45 5. Crear un menú de navegació.........................................................................................................................................501. 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”: 2
  3. 3. Arribem a una interfície similar a la següent, en la que clicarem a “Nou bloc”. Podeu veure que quan hagueucreat més d’un bloc us apareixerà un llistat amb tots ells, des d’on podrem veure’ls i editar-los: 3
  4. 4. A continuació hem de triar el nom del bloc, la URL i un disseny, que podrem canviar més endavant, per tant noens 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. 4
  5. 5. 5
  6. 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! 6
  7. 7. Ara mateix l’aparença del bloc és molt senzilla i poc atractiva. Per tant, anem a personalitzar el nostre bloc iomplir-lo de continguts!2. Personalització del blocTornem 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 depublicitat i una secció d’ajuda. 7
  8. 8. No ens aturarem massa en aquesta part. Passem a modificar la plantilla.2.1 Modificar la plantillaCliquem a “Plantilla” i arribem a una interfície en la que seleccionarem l’opció de “Personalitzar”. 8
  9. 9. Aquí podrem tornar a triar quina imatge de fons volem posar, el tema, el color i definir l’estructura que tindranles nostres pàgines.La primera opció és la de triar els “Templates” o temes pel nostre bloc. Això ens permetrà canviar-ne l’estil depresentació. Proveu vàries opcions fins que trobeu la que més us agradi. 9
  10. 10. Seleccionem per exemple el tema “Etereo” i el color blau, que quedarà millor amb la imatge de capçalera quehem creat amb el Gimp. 10
  11. 11. Una vegada hem triat l’estil del bloc podem canviar el color i la imatge de fons que millor s’adaptin al nostreestil. 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 desinhaurem d’enrecordar-nos de clicar a la part de dalt a la dreta a “Aplicar al blog”. Ho podem fer en qualsevolmoment per evitar que es perdi per algun accident o bé quan ja haguem fet tots els canvis. 11
  12. 12. 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. Unavegada l’hagueu triat clicarem a “Finalitzar”.* Recordeu de triar un tema i una imatge d’acord amb la capçalera que haguem creat 12
  13. 13. Teniu l’opció també de dissenyar la vostra pròpia imatge i carregar-la des del vostre ordinador utilitzant laprimera opció del llistat “Uploaded image”. D’aquesta manera podeu aconseguir un bloc únic i del totpersonalitzat: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. 13
  14. 14. 14
  15. 15. 2.2 Modificar el dissenyAra toca decidir si volem estructurar el bloc en una sola columna, dues, tres o combinacions vàries. La méstí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’aquestamanera 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 laubicació “En lugar del título y la descripción” i clicar a “Desar”. 15
  16. 16. Si anem ara a “Veure bloc” podem veure com ha millorat força l’aspecte respecte del disseny bàsic que teníemal començament. 16
  17. 17. 2.3 Alguns GadgetsMés coses sobre el disseny. Si tornem a la pàgina inicial de Blogger i anem a la pestanya de “Disseny” veureuque tenim més opcions, com ara afegir gadgets (petita aplicació o programa que és executat per un motor i quedóna fàcil accés a certs continguts que són utilitzats més freqüentment o simplement per proporcionarinformació visual).Per defecte ens apareixen els gadgets de l’arxiu del bloc o de la informació personal. Veureu que alguns no espoden eliminar ja que es consideren obligatoris però d’altres si. La recomanació és que només n’afegiu a lacolumna lateral, per no saturar la pàgina. Tot i això no és cap obligació i trobarem casos en que serà millorposar-los al mig.Mireu també de que continguin informació transversal a tot el bloc ja que apareixeran a totes les pàgines quecreeu. Com per exemple, el gadget de l’Arxiu del bloc amb el llistat a totes les entrades, o bé el del calendarique 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 heud’anar remenant i cercant les que més us interessin. 17
  18. 18. Si anem a “Afegir un gadget” ens apareix una finestra emergent en la que podem triar els gadgets. Estanclassificats entre: bàsics, populars, destacats i més gadgets. A l’última opció teniu un cercador en el que buscargadgets per paraula clau i un llistat amb tots els que hi ha disponibles. 18
  19. 19. 2.3.1 Informació textualPer començar veurem un gadget que pot ser molt útil per afegir informació de tipus text com per exemplel’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 textenriquit. 19
  20. 20. Desem i ja tenim el gadget afegit.2.3.2 Presentació d’imatgesUn altre gadget interessant pot ser el d’afegir una galeria d’imatges en forma de presentació. Procedim de lamateixa manera. 20
  21. 21. Aquí podrem aprofitar per posar els àlbums de fotos que tenim a Picasa, com ara fotos del propi club o imatgesrelacionades 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 dePicasa 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 canviarl’ordre i la posició dels gadgets, per defecte, l’últim que afegim apareix en primer lloc. 21
  22. 22. 3.2.3 VídeoUn altre gadget molt interessant és el del vídeo. Podem per exemple ensenyar els vídeos de la nostra activitatdel canal propi de Youtube, o de varis canals alhora, o fins i tot que mostri vídeos que continguin unes paraulesclau 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 uninterè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. 22
  23. 23. Veiem com queda publicat. 23
  24. 24. Seria un dels casos en que podria ser més interessant posar el gadget a la part central i no en el lateral ja quefa baixar molt a la resta de gadgets.Per fer-ho no més hem d’arrossegar el gadget fins a on volem. 24
  25. 25. Després cliquem a “Desa l’organització” i ja apareix publicat. 25
  26. 26. 2.3.4 EnquestesTambé pot ser d’utilitat el gadget per publicar enquestes i preguntar directament als nostres lectors, perexemple 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ésrespostes i la data en la que acabarà l’enquesta. 26
  27. 27. 27
  28. 28. 28
  29. 29. 3. Crear entradesLes entrades seran la principal font d’alimentació del nostre bloc i la primera via de comunicació amb elsusuaris. 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ícied’edició del bloc.Sempre ens apareix una primera entrada per defecte que podem editar clicant a sobre del títol. Les entradesposteriors les crearem clicant a “Entrada nova” . Les podem deixar com a esborrany, llavors no seran visiblespel públic, només ho seran quan decidim publicar-les, i evidentment tenim l’opció d’eliminar-les en qualsevolmoment 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 ivídeos o afegir el codi HTML que nosaltres vulguem. 29
  30. 30. Com veieu disposem també d’unes opcions a la part lateral de la dreta on, entre d’altres coses, podem designaretiquetes que facilitaran la recuperació de la informació.Publiquem l’entrada i automàticament apareix en el bloc. 30
  31. 31. Per acabar amb el tema de les entrades dir que, per afegir comentaris sobre cada entrada és suficient clicant aon posa “Cap comentari” a la part inferior, juntament amb la informació de l’autor, les opcions de compartir a lesxarxes socials i les etiquetes. 31
  32. 32. 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. 32
  33. 33. 4. Crear pàginesBlogger ens ofereix la possibilitat de crear pàgines independents de la plana inicial. Aquestes pàgines no seranvisibles a simple vista quan les publiquem, a diferència de les entrades que apareixen automàticament a lahome.Quan es crea una pàgina se li assigna una URL única que ens permetrà cridar a aquesta pàgina des d’una deles entrades que haguem creat a la part central, des d’un gadget lateral o bé quan creem un menú denavegació 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 elnom.Per crear-ne una de nova clicarem a “Pàgina nova”. Veurem que ens apareixen dues opcions: pàgina en blanco adreça web. Amb la primera crearem una pàgina web que tindrà el format i l’aspecte de la resta del bloc iamb la segona l’únic que fem és crear un enllaç a una pàgina externa al nostre bloc. Ens centrarem en laprimera opció. 33
  34. 34. Si us fixeu en la següent imatge veureu que la interfície d’edició és idèntica a la que trobem quan creem unaentrada, 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ó ipoden interessar als nostres lectors. Crearem per tant una pàgina de recomanacions. 34
  35. 35. 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 laicona 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 elbloc, o bé a través dels nostres àlbums de Picasa, des del mòbil, directament d’una webcam o posant la URLd’una imatge d’Internet. Nosaltres expliquem la primera, la resta són iguals de senzilles. 35
  36. 36. 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 imatgeUna vegada tenim la imatge, farem que aquesta enllaci a una cerca del catàleg. Primer anem al catàleg a onagafarem la URL que volem que enllaci. 36
  37. 37. Copiarem l’enllaç permanent al registre clicant el botó dret i a “Copia l’enllaç”. 37
  38. 38. Ara tornem al bloc, cliquem a sobre de la imatge i després a “Enllaç” ( ). Enganxem l’enllaç que havíemcopiat en el requadre i la nostra imatge ja enllaça al registre del catàleg!4.2 Afegir un vídeoTambé 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 illavors deixarà de veure’s i donarà error.) 38
  39. 39. I ja ens apareix el vídeo que hem triat. 39
  40. 40. Existeix encara una altra manera d’afegir un vídeo de Youtube o de qualsevol altra plataforma i és incrustant elcodi 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. 40
  41. 41. Per fer-ho tornem a la pàgina, triem la visualització de disseny HTML i enganxem el codi allà on vulguem queaparegui.Quan acabem de posar tota la informació clicarem a publicar i ja tindrem la pàgina creada. 41
  42. 42. Però com dèiem aquesta pàgina no és visible si anem al blog. El que farem serà crear una nova entrada ienllaçar-la des d’allà.Primer clicarem a “Visualització” i ens copiarem l’enllaç que apareix al navegador i que necessitarem mésendavant. 42
  43. 43. A la barra de navegació trobem l’enllaç que ens interessa. 43
  44. 44. Creem una entrada nova de la mateixa manera que hem vist abans i aprofitarem també per explicar cominserir 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 abansamb les imatges enganxem l’enllaç clicant a “Enllaç”. 44
  45. 45. Si anem a la pàgina inicial, a sobre de l’entrada que hem creat i cliquemt a sobre d’aquest text “podeu consultarles recomanacions” anirem a parar a la pàgina que hem creat de Recomanacions4.3 Afegir àudioPer 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. 45
  46. 46. 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. 46
  47. 47. Tornem al bloc, triem la visualització de disseny en HTML per veure el codi, i l’enganxem allà a on volem quees vegi. Fixeu-vos que el codi comença per <object> i acaba per </object>. 47
  48. 48. 48
  49. 49. Publiquem i ja ho tenim visible per tots els usuaris. 49
  50. 50. 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 hemvist 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 tipusHTML/Javascript. 50
  51. 51. Per crear un menú bàsic haurem de crear un llistat en codi HTML, és molt senzill. No caldrà que aprengueu aprogramar 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 lespestanyes del menú. Veieu que el conjunt <li>....</li> es va repetint per cada pestanya, tampoc cal abusar icrear 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ú, idesem. 51
  52. 52. Cliquem a “Desa l’organització” i ja tenim el menú creat. 52
  53. 53. 53

×