tutorial per a la creació d’un blog ... -...

48
Tutorial per a la creació d’un blog per a la biblioteca escolar amb XTECBlocs Document del curs de formació del professorat: El Blog de la biblioteca escolar: estructura i continguts http://ateneu.xtec.cat/wikiform/wikiexport/cmd/bib/bebl/index Programa biblioteca escolar “puntedu” Octubre de 2014 A càrrec de Maria Dolors Martos Gómez

Upload: others

Post on 31-Aug-2019

0 views

Category:

Documents


0 download

TRANSCRIPT

Tutorial per a la creacioacute drsquoun blog per a la biblioteca

escolar amb XTECBlocs

Document del curs de formacioacute del professorat

El Blog de la biblioteca escolar estructura i continguts

httpateneuxteccatwikiformwikiexportcmdbibbeblindex

Programa biblioteca escolar ldquopuntedurdquo

Octubre de 2014

A cagraverrec de Maria Dolors Martos Goacutemez

2

Iacutendex

1 CREACIOacute I CONFIGURACIOacute INICIAL DEL BLOG3

11 Acceacutes al blog3

12 Personalitzacioacute del blog4

13 Seleccioacute de la plantilla 5

14 Personalitzacioacute de la capccedilalera 6

15 Personalitzacioacute del fons 8

16 Afegir els descriptors de cerca 9

17 Permisos drsquoadministracioacute 10

18 Completar el perfil 11

2 ESTRUCTURACIOacute DE LA INFORMACIOacute CREACIOacute DE PAgraveGINES DEL

MENUacute HORITZONTAL12

21 Entrada al blog 12

22 Proposta de pagravegines del menuacute horitzontal 13

221 Creacioacute drsquouna pagravegina nova 14

3 ESTRUCTURACIOacute DE LA INFORMACIOacute CREACIOacute DELS GINYS

LATERALS17

31 Com fer el giny de contacte amb la biblioteca 17

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves 18

33 Com fer el giny de Comparteix la informacioacute 22

34 Insercioacute de la resta de ginys 23

35 Com fer el giny Creative Commons 24

36 Com fer el giny Comptador de visites 25

37 Com fer el giny per inserir la imatge del Departament 27

4 ESTRUCTURACIOacute DE LA INFORMACIOacute CREACIOacute DELS GINYS DE

CATEGORIES I ETIQUETES28

41 Com fer el giny Cerca per nivells i destinataris (giny de categories) 28

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes) 31

5 PUBLICACIOacute DE CONTINGUTS EDICIOacute DrsquoARTICLES INSERCIOacute DE

FOTOGRAFIES VIacuteDEOS I FORMULARIS35

51 Edicioacute drsquoarticles 35

52 Insercioacute drsquouna imatge en lrsquoarticle 36

53 Insercioacute drsquoun enllaccedil web dins la imatge 38

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge 39

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa 39

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo 42

57 Insercioacute drsquoun formulari dins del blog 43

6 COM FER LA COgravePIA DE SEGURETAT47

3

1 Creacioacute i configuracioacute inicial del blog

(Mogravedul 1 pragravectica 4a)

11 Acceacutes al blog

Accediu a XTECBlocs (httpblocsxteccat) i cliqueu Crea el teu blog

Si no us heu identificat apareixeragrave aquest missatge

ldquoPrimer heu diniciar la sessioacute i despreacutes podeu crear un nou blocrdquo

Un cop iniciada la sessioacute apareixeragrave la pantalla seguumlent Heu de posar un nom i un tiacutetol al nou blog i premeu Crea un blog

4

El nom del blog formaragrave part de la URL amb la qual cosa lrsquoescriurem sense espais ni majuacutescules Exemples bibliotecaescolaxxx bibliotecainsxxxx

El tiacutetol del blog seragrave el que aparegui a la capccedilalera Admet espais perograve no majuacutescules Meacutes endavant podrem canviar-lo

12 Personalitzacioacute del blog

Podeu accedir a personalitzar el disseny visual del blog (tiacutetol plantilla capccedilalera i fons) clicant a la pantalla seguumlent

XTECBlocs per defecte ofereix una de les darreres plantilles de disseny creada que eacutes Twenty Thirteen perograve nosaltres facilitarem els tutorials basant-nos en la plantilla Twenty Twelve

Des de Personalitza la pagravegina web entreu solament a Tiacutetol i descripcioacute curta del blog el completeu i tanqueu aquesta finestra

Les altres accions les farem des del menuacute Aparenccedila

5

13 Seleccioacute de la plantilla

Cada plantilla teacute unes funcionalitats diferents amb la qual cosa srsquoaconsella triar-ne una abans de personalitzar el blog Sha de tenir en compte que un canvi posterior de plantilla pot fer desaparegraveixer tots els elements personalitzats afegits

Situats al Tauler seleccioneu del menuacute Aparenccedila lrsquoopcioacute Temes i trieu la plantilla que desitgeu

Per les funcionalitats que ofereix es recomana la plantilla Twenty Twelve perograve cada centre podragrave triar la que meacutes li agradi

Situeu el cursor damunt de la plantilla seleccionada i apareixeragrave el botoacute activa Premeu-lo

6

Un cop seleccionada la plantilla podrem personalitzar els colors la imatge de la capccedilalera i del fons clicant sobre el botoacute Personalitza

14 Personalitzacioacute de la capccedilalera

Si accedim a Colors podrem personalitzar el color de text i el color del fons del blog

Clicant a Imatge de la capccedilalera podem pujar una imatge des del nostre ordinador Cada plantilla o tema suggereix una mida diferent de la imatge

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

2

Iacutendex

1 CREACIOacute I CONFIGURACIOacute INICIAL DEL BLOG3

11 Acceacutes al blog3

12 Personalitzacioacute del blog4

13 Seleccioacute de la plantilla 5

14 Personalitzacioacute de la capccedilalera 6

15 Personalitzacioacute del fons 8

16 Afegir els descriptors de cerca 9

17 Permisos drsquoadministracioacute 10

18 Completar el perfil 11

2 ESTRUCTURACIOacute DE LA INFORMACIOacute CREACIOacute DE PAgraveGINES DEL

MENUacute HORITZONTAL12

21 Entrada al blog 12

22 Proposta de pagravegines del menuacute horitzontal 13

221 Creacioacute drsquouna pagravegina nova 14

3 ESTRUCTURACIOacute DE LA INFORMACIOacute CREACIOacute DELS GINYS

LATERALS17

31 Com fer el giny de contacte amb la biblioteca 17

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves 18

33 Com fer el giny de Comparteix la informacioacute 22

34 Insercioacute de la resta de ginys 23

35 Com fer el giny Creative Commons 24

36 Com fer el giny Comptador de visites 25

37 Com fer el giny per inserir la imatge del Departament 27

4 ESTRUCTURACIOacute DE LA INFORMACIOacute CREACIOacute DELS GINYS DE

CATEGORIES I ETIQUETES28

41 Com fer el giny Cerca per nivells i destinataris (giny de categories) 28

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes) 31

5 PUBLICACIOacute DE CONTINGUTS EDICIOacute DrsquoARTICLES INSERCIOacute DE

FOTOGRAFIES VIacuteDEOS I FORMULARIS35

51 Edicioacute drsquoarticles 35

52 Insercioacute drsquouna imatge en lrsquoarticle 36

53 Insercioacute drsquoun enllaccedil web dins la imatge 38

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge 39

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa 39

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo 42

57 Insercioacute drsquoun formulari dins del blog 43

6 COM FER LA COgravePIA DE SEGURETAT47

3

1 Creacioacute i configuracioacute inicial del blog

(Mogravedul 1 pragravectica 4a)

11 Acceacutes al blog

Accediu a XTECBlocs (httpblocsxteccat) i cliqueu Crea el teu blog

Si no us heu identificat apareixeragrave aquest missatge

ldquoPrimer heu diniciar la sessioacute i despreacutes podeu crear un nou blocrdquo

Un cop iniciada la sessioacute apareixeragrave la pantalla seguumlent Heu de posar un nom i un tiacutetol al nou blog i premeu Crea un blog

4

El nom del blog formaragrave part de la URL amb la qual cosa lrsquoescriurem sense espais ni majuacutescules Exemples bibliotecaescolaxxx bibliotecainsxxxx

El tiacutetol del blog seragrave el que aparegui a la capccedilalera Admet espais perograve no majuacutescules Meacutes endavant podrem canviar-lo

12 Personalitzacioacute del blog

Podeu accedir a personalitzar el disseny visual del blog (tiacutetol plantilla capccedilalera i fons) clicant a la pantalla seguumlent

XTECBlocs per defecte ofereix una de les darreres plantilles de disseny creada que eacutes Twenty Thirteen perograve nosaltres facilitarem els tutorials basant-nos en la plantilla Twenty Twelve

Des de Personalitza la pagravegina web entreu solament a Tiacutetol i descripcioacute curta del blog el completeu i tanqueu aquesta finestra

Les altres accions les farem des del menuacute Aparenccedila

5

13 Seleccioacute de la plantilla

Cada plantilla teacute unes funcionalitats diferents amb la qual cosa srsquoaconsella triar-ne una abans de personalitzar el blog Sha de tenir en compte que un canvi posterior de plantilla pot fer desaparegraveixer tots els elements personalitzats afegits

Situats al Tauler seleccioneu del menuacute Aparenccedila lrsquoopcioacute Temes i trieu la plantilla que desitgeu

Per les funcionalitats que ofereix es recomana la plantilla Twenty Twelve perograve cada centre podragrave triar la que meacutes li agradi

Situeu el cursor damunt de la plantilla seleccionada i apareixeragrave el botoacute activa Premeu-lo

6

Un cop seleccionada la plantilla podrem personalitzar els colors la imatge de la capccedilalera i del fons clicant sobre el botoacute Personalitza

14 Personalitzacioacute de la capccedilalera

Si accedim a Colors podrem personalitzar el color de text i el color del fons del blog

Clicant a Imatge de la capccedilalera podem pujar una imatge des del nostre ordinador Cada plantilla o tema suggereix una mida diferent de la imatge

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

3

1 Creacioacute i configuracioacute inicial del blog

(Mogravedul 1 pragravectica 4a)

11 Acceacutes al blog

Accediu a XTECBlocs (httpblocsxteccat) i cliqueu Crea el teu blog

Si no us heu identificat apareixeragrave aquest missatge

ldquoPrimer heu diniciar la sessioacute i despreacutes podeu crear un nou blocrdquo

Un cop iniciada la sessioacute apareixeragrave la pantalla seguumlent Heu de posar un nom i un tiacutetol al nou blog i premeu Crea un blog

4

El nom del blog formaragrave part de la URL amb la qual cosa lrsquoescriurem sense espais ni majuacutescules Exemples bibliotecaescolaxxx bibliotecainsxxxx

El tiacutetol del blog seragrave el que aparegui a la capccedilalera Admet espais perograve no majuacutescules Meacutes endavant podrem canviar-lo

12 Personalitzacioacute del blog

Podeu accedir a personalitzar el disseny visual del blog (tiacutetol plantilla capccedilalera i fons) clicant a la pantalla seguumlent

XTECBlocs per defecte ofereix una de les darreres plantilles de disseny creada que eacutes Twenty Thirteen perograve nosaltres facilitarem els tutorials basant-nos en la plantilla Twenty Twelve

Des de Personalitza la pagravegina web entreu solament a Tiacutetol i descripcioacute curta del blog el completeu i tanqueu aquesta finestra

Les altres accions les farem des del menuacute Aparenccedila

5

13 Seleccioacute de la plantilla

Cada plantilla teacute unes funcionalitats diferents amb la qual cosa srsquoaconsella triar-ne una abans de personalitzar el blog Sha de tenir en compte que un canvi posterior de plantilla pot fer desaparegraveixer tots els elements personalitzats afegits

Situats al Tauler seleccioneu del menuacute Aparenccedila lrsquoopcioacute Temes i trieu la plantilla que desitgeu

Per les funcionalitats que ofereix es recomana la plantilla Twenty Twelve perograve cada centre podragrave triar la que meacutes li agradi

Situeu el cursor damunt de la plantilla seleccionada i apareixeragrave el botoacute activa Premeu-lo

6

Un cop seleccionada la plantilla podrem personalitzar els colors la imatge de la capccedilalera i del fons clicant sobre el botoacute Personalitza

14 Personalitzacioacute de la capccedilalera

Si accedim a Colors podrem personalitzar el color de text i el color del fons del blog

Clicant a Imatge de la capccedilalera podem pujar una imatge des del nostre ordinador Cada plantilla o tema suggereix una mida diferent de la imatge

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

4

El nom del blog formaragrave part de la URL amb la qual cosa lrsquoescriurem sense espais ni majuacutescules Exemples bibliotecaescolaxxx bibliotecainsxxxx

El tiacutetol del blog seragrave el que aparegui a la capccedilalera Admet espais perograve no majuacutescules Meacutes endavant podrem canviar-lo

12 Personalitzacioacute del blog

Podeu accedir a personalitzar el disseny visual del blog (tiacutetol plantilla capccedilalera i fons) clicant a la pantalla seguumlent

XTECBlocs per defecte ofereix una de les darreres plantilles de disseny creada que eacutes Twenty Thirteen perograve nosaltres facilitarem els tutorials basant-nos en la plantilla Twenty Twelve

Des de Personalitza la pagravegina web entreu solament a Tiacutetol i descripcioacute curta del blog el completeu i tanqueu aquesta finestra

Les altres accions les farem des del menuacute Aparenccedila

5

13 Seleccioacute de la plantilla

Cada plantilla teacute unes funcionalitats diferents amb la qual cosa srsquoaconsella triar-ne una abans de personalitzar el blog Sha de tenir en compte que un canvi posterior de plantilla pot fer desaparegraveixer tots els elements personalitzats afegits

Situats al Tauler seleccioneu del menuacute Aparenccedila lrsquoopcioacute Temes i trieu la plantilla que desitgeu

Per les funcionalitats que ofereix es recomana la plantilla Twenty Twelve perograve cada centre podragrave triar la que meacutes li agradi

Situeu el cursor damunt de la plantilla seleccionada i apareixeragrave el botoacute activa Premeu-lo

6

Un cop seleccionada la plantilla podrem personalitzar els colors la imatge de la capccedilalera i del fons clicant sobre el botoacute Personalitza

14 Personalitzacioacute de la capccedilalera

Si accedim a Colors podrem personalitzar el color de text i el color del fons del blog

Clicant a Imatge de la capccedilalera podem pujar una imatge des del nostre ordinador Cada plantilla o tema suggereix una mida diferent de la imatge

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

5

13 Seleccioacute de la plantilla

Cada plantilla teacute unes funcionalitats diferents amb la qual cosa srsquoaconsella triar-ne una abans de personalitzar el blog Sha de tenir en compte que un canvi posterior de plantilla pot fer desaparegraveixer tots els elements personalitzats afegits

Situats al Tauler seleccioneu del menuacute Aparenccedila lrsquoopcioacute Temes i trieu la plantilla que desitgeu

Per les funcionalitats que ofereix es recomana la plantilla Twenty Twelve perograve cada centre podragrave triar la que meacutes li agradi

Situeu el cursor damunt de la plantilla seleccionada i apareixeragrave el botoacute activa Premeu-lo

6

Un cop seleccionada la plantilla podrem personalitzar els colors la imatge de la capccedilalera i del fons clicant sobre el botoacute Personalitza

14 Personalitzacioacute de la capccedilalera

Si accedim a Colors podrem personalitzar el color de text i el color del fons del blog

Clicant a Imatge de la capccedilalera podem pujar una imatge des del nostre ordinador Cada plantilla o tema suggereix una mida diferent de la imatge

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

6

Un cop seleccionada la plantilla podrem personalitzar els colors la imatge de la capccedilalera i del fons clicant sobre el botoacute Personalitza

14 Personalitzacioacute de la capccedilalera

Si accedim a Colors podrem personalitzar el color de text i el color del fons del blog

Clicant a Imatge de la capccedilalera podem pujar una imatge des del nostre ordinador Cada plantilla o tema suggereix una mida diferent de la imatge

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

7

En aquest cas la mida aconsellada eacutes 960 times 250 piacutexels Guardem els canvis tanquem

Si meacutes endavant volem canviar la imatge de la capccedilalera ho podem fer accedint per Aparenccedila | Capccedilalera

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

8

15 Personalitzacioacute del fons

El fons tambeacute es pot personalitzar des del Tauler Seleccionarem del menuacute Aparenccedila lrsquoopcioacute Fons

Podeu seleccionar un color de fons o inserir una imatge

Si volem inserir una imatge des del nostre ordenador podem agafar-ne una de petita i que la mostri repetida moltes vegades o agafar-ne una de grans mides i que la mostri sense repeticions Les mides suggerides per a la imatge de grans dimensions soacuten 1500x650 pixels

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

9

Seleccionarem una imatge del nostre ordenador prement el botoacute Selecciona el fitxer i quan srsquohagi carregat hem de preacutemer penja

Configurarem les opcions seguumlents o Posicioacute Esquerra o Repeteix Sense repeticioacute si eacutes una imatge gran o mosaic

horitzontal o vertical si eacutes una imatge petita o Adjuncioacute triarem Fixat (no mareja tant) o Color de fons Seleccionarem un color de fons que solament es veuragrave

mentre es carrega la imatge Despreacutes aquest color no es veuragrave Si no hi posem imatge llavors seragrave aquest color de fons el que tindragrave el nostre blog

Podrem modificar el disseny que hem triat sempre que vulguem accedint a la capccedilalera i al fons

Trobareu meacutes indicacions sobre el disseny visual del blog si consulteu el mogravedul 3 pragravectica 2 El punt 25 tracta de com fer un disseny visual atractiu i accessible

16 Afegir els descriptors de cerca

Un cop acabat o perfilat el disseny visual del blog haurem drsquoincorporar uns descriptors per tal que els cercadors el puguin localitzar

Des del Tauler seleccionem Paragravemetres | Descriptors

Afegiu els descriptors que meacutes identifiquin la tasca que voleu difondre de la vostra biblioteca

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

10

17 Permisos drsquoadministracioacute

Cal donar permisos drsquoadministracioacute a la persona responsable que gestionaragrave el blog

Accedirem al menuacute Usuaris | afegeix des del Tauler per incorporar la persona responsable del blog i despreacutes li atorgarem permisos drsquoadministrador Drsquoaquesta manera podragrave gestionar el blog amb les seves credencials perograve la titularitat seragrave del centre

Cal tenir en compte que srsquoha drsquoescriure solament lidentificatiu de lrsquousuari sense la part xteccat

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

11

18 Completar el perfil

Per acabar cal completar el perfil amb les dades que es remarquen en aquesta imatge

Accedirem des de Tauler | El vostre perfil

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

12

2 Estructuracioacute de la informacioacute creacioacute de pagravegines del

menuacute horitzontal

(Mogravedul 2 pragravectica 2a)

21 Entrada al blog

Accediu a XTECBlocs (httpblocsxteccat) i premeu Entra

En la pantalla seguumlent us haureu de validar amb lrsquousuari i la contrasenya XTEC que vau usar per obrir el blog o amb la vostra identificacioacute XTEC si teniu permisos drsquoedicioacute del blog

A la pantalla seguumlent apareixeragrave a la dreta una llista dels blogs que teacute oberts lrsquoescola o dels quals sou administradors o editors Caldragrave solament clicar sobre el nom del blog per entrar-hi

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

13

22 Proposta de pagravegines del menuacute horitzontal

Les pagravegines soacuten similars als articles perquegrave tenen tiacutetol cos i metadades associades

perograve com ja hem dit anteriorment no soacuten part del flux cronologravegic del blog soacuten com

articles permanents Eacutes per aixograve que es recomana usar-les per mostrar la

informacioacute fixa

Les pagravegines en XTECBlocs no tenen categories ni etiquetes perograve poden tenir

jerarquia Podeu niar unes pagravegines sota les altres en fer que una sigui ldquoparerdquo de

laltra i crear un grup jeragraverquic Per exemple podeu tenir una pagravegina principal titulada

ldquoEl projecte de bibliotecardquo i fer que en situar el cursor a sobre es despleguin les

pagravegines ldquoGuia de la bibliotecardquo Horarisrdquo i ldquoEquip humagraverdquo No hi ha liacutemit de nivells per

fer pagravegines niades perograve no es recomana meacutes de dos nivells jeragraverquics

Les pagravegines que proposem crear soacuten les seguumlents

Presentacioacute (pagravegina niada ldquoparerdquo) o Guia de la biblioteca (pagravegina niada) o Horaris (Pagravegina niada) o Equip humagrave (pagravegina niada)

El projecte biblioteca escolar (podeu abreujar projecte be)

Pla de lectura (pagravegina niada ldquoparerdquo amb acceacutes a pagravegines niades si eacutes el cas)

Acceacutes al catagraveleg (pagravegina o menuacute lateral)

Normativa de preacutestec (pagravegina) Aquesta informacioacute de vegades ja estagrave inclosa en la guia de la biblioteca i per tant si eacutes el vostre cas no caldragrave pagravegina

Recursos digitals (pagravegina amb enllaccedil a la biblioteca digital) Hi aprofundirem una mica meacutes en el capiacutetol 4 Ara solament ens caldragrave crear la pagravegina

Novetats bibliogragravefiques (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Professorat (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Famiacutelies (pagravegina o categoria en funcioacute de la periodicitat de publicacioacute daquesta informacioacute)

Biblioteca puacuteblica (pagravegina o categoria en funcioacute de la relacioacute que hi hagi)

Cada centre pot adaptar aquesta distribucioacute de pagravegines a la informacioacute que teacute previst

difondre

Per exemple

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

14

La informacioacute sobre lrsquoequip humagrave pot estar inclosa al final de la pagravegina de presentacioacute o de la pagravegina del projecte de biblioteca perograve si a la nostra biblioteca hi ha una important colmiddotlaboracioacute de les famiacutelies o dels alumnes i volem destacar-lo caldragrave dedicar una pagravegina a mostrar lrsquoequip de treball i la tasca de suport que realitza

Podem crear una pagravegina estagravetica anomenada Professorat i posar informacioacute fixa dinteregraves o podem crear un enllaccedil dins de la pagravegina que mostri tots els articles adreccedilats al professorat si pregraveviament els hem etiquetat

El mateix criteri que per a Professorat podriacuteem aplicar a Novetats bibliogragravefiques Famiacutemiles i Biblioteca puacuteblica

Crear una pagravegina eacutes molt similar a crear un article Leditor de pagravegines eacutes molt

semblant al dels articles tal com veurem en el mogravedul 3 pragravectica 4a perograve hi ha

algunes caracteriacutestiques especiacutefiques de les pagravegines que cal explicar a continuacioacute

221 Creacioacute drsquouna pagravegina nova

Des del Tauler cliqueu sobre Pagravegines | Afegeix

Cal escriure el tiacutetol de la pagravegina

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

15

A la dreta de la pantalla o a sota del contingut de la pagravegina trobareu les caixes de publicacioacute i drsquoatributs En Publica podeu configurar lrsquoestat de la pagravegina (esborrany pendent de revisioacute publicada) el tipus de visibilitat (puacuteblica privada protegida amb contrasenya) i la data de publicacioacute de la pagravegina (immediatament o en una data del calendari) En acabar premeu Drsquoacord i Publica si voleu publicar-la immediatament

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

16

En Atributs de la pagravegina podeu configurar si voleu una pagravegina ldquoparerdquo o ldquoniadardquo i en alguns temes podeu definir la plantilla de visualitzacioacute de la pagravegina que pot ser diferent de la pagravegina principal Tambeacute podeu seleccionar lrsquoordre en quegrave apareixeragrave la pagravegina en el menuacute horitzontal Si no sersquon selecciona cap per defecte es mostren en ordre alfabegravetic

Lrsquoentorn drsquoedicioacute de la pagravegina i el dels articles tambeacute soacuten molt similars i tots dos soacuten molt intuiumltius ja que srsquoassemblen forccedila al de qualsevol tractament de textos Eacutes per aixograve que les explicacions de com inserir fitxers multimegravedia i documents les trobareu al mogravedul 3 pragravectica 4 quan parlem de lrsquoedicioacute drsquoarticles

Aquiacute solament avanccedilarem que podeu penjar i inserir fitxers multimegravedia (imatges agraveudio documents etc) en fer clic al botoacute Afegeix megravedia Podeu seleccionar dentre les imatges i fitxers ja penjats a la mediateca o penjar un nou fitxer multimegravedia per afegir a la pagravegina Per crear una galeria dimatges seleccioneu les imatges que voleu afegir i feu clic al botoacute Crea una galeria nova

Tambeacute podeu incrustar elements multimegravedia des de moltes pagravegines web com ara el Twitter el Youtube el Flickr i altres en enganxar la URL de lrsquoelement multimegravedia al contingut de larticle o pagravegina Us remetem al Codex per aprendren meacutes sobre les incrustacions (en anglegraves)

Tambeacute mostra la possibilitat drsquoentrar en el codi html i modificar-ne alguna part si en sabem

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

17

3 Estructuracioacute de la informacioacute creacioacute dels ginys

laterals

(Mogravedul 2 pragravectica 3a)

31 Com fer el giny de contacte amb la biblioteca

Dins del menuacute lateral cal clicar Aparenccedila i quan es desplegui el menuacute

premeu Ginys Seleccioneu el giny de Textprement Afegeix

Poseu un tiacutetol com per exemple ldquoContacta amb la bibliotecardquo

I en la part de contingut heu drsquoafegir aquesta sintaxi

ltpgtlta href=mailtoxxxxxgmailcomgtxxxxxgmailcom ltagtltpgt

Les xxxxx srsquohan de substituir pel correu de la biblioteca

Marqueu la posicioacute 1 a la barra lateral principal i premeu Desa

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

18

Una altra forma de mostrar el contacte amb la biblioteca eacutes inserir una imatge dins del giny o fins i tot un formulari Aquestes dues utilitats sexpliciten en el mogravedul 3 pragravectica 5a quan tractem dels articles

32 Com fer els ginys Enllaccedilos del centre i enllaccedilos drsquointeregraves

Recordeu que eacutes aconsellable oferir els enllaccedilos del centre agrupats

en un mateix giny i en un altre posar-hi els enllaccedilos drsquointeregraves que

voleu destacar El procediment a seguir seragrave el mateix per als dos

ginys

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

19

321 Procediment teograveric

Srsquoha de crear una categoria drsquoenllaccedilos Exemple Enllaccedilos del centre

Srsquohan drsquoescriure els enllaccedilos un per un i assignar-los a aquesta categoria

Srsquoha drsquoafegir el giny drsquoenllaccedilos i configurar-lo

322 Procediment pragravectic

3221 Crear la categoria de lrsquoenllaccedil

Cal que aneu a Enllaccedilos | Categories Drsquoenllaccedilos i creeu la categoria

Introduiumlu el Nom de la categoria per exemple Enllaccedilos del centre

I premeu Afegir una categoria

3222 Afegir els enllaccedilos i assignar-los la categoria

Aneu a Enllaccedilos | Afegeix i poseu-hi les dades de lrsquoenllaccedil

Exemple

Nom Web del centre

Adreccedila web httpwwwxteccat

Categoria Enllaccedilos del centre

Destinacioacute Cal marcar blank per tal que lrsquoenllaccedil srsquoobri en una finestra

nova

Premeu Afegeix

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

20

Aneu afegint tots els enllaccedilos que vulgueu agrupar sota la categoria Enllaccedilos del

centre

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

21

323 Crear el giny lateral drsquoenllaccedilos

Seleccioneu Aparenccedila i quan es desplegui el menuacute premeu Ginys

Seleccioneu el giny d Enllaccedilos i premeu Afegeix

Configureu el giny amb els paragravemetres seguumlents

o Seleccioneu Categoria de lrsquoenllaccedil Enllaccedilos del centre

o Seleccioneu Ordenat per Tiacutetol de lrsquoenllaccedil

o Marqueu Mostra el nom de lrsquoenllaccedil

o Marqueu Barra lateral principal i seleccioneu la posicioacute que voleu que

aparegui en la part lateral

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

22

33 Com fer el giny de Comparteix la informacioacute

Aneu a Aparenccedila | Ginys trieu Giny AddThis Share i premeu Afegeix

Configureu-lo tal com indica la imatge Podeu perograve triar qualsevol dels estils que

hi ha

No oblideu marcar la barra lateral principal i seleccionar la posicioacute que voleu de

surti

Premeu Desa el Giny

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

23

34 Insercioacute de la resta de ginys

XtecBlocs ofereix la possibilitat drsquoinserir una segraverie de ginys clicant Aparenccedila | Ginys El proceacutes drsquoinsercioacute eacutes el mateix que el que acabem de veure Els ginys que creiem que no poden faltar en el blog soacuten els que permeten recuperar la informacioacute que anem publicant que soacuten

Cerca

Arxiu del blog

Els ginys de categories i drsquoetiquetes es tractaran en el mogravedul 3

Els ginys de text permeten inserir textos imatges i fins i tot formularis Moltes aplicacions ja ens faciliten el codi embed necessari per mostrar la utilitat desitjada i no ens cal saber codi html Tot i aixograve tenir alguns coneixements de codi html ens facilitaragrave la tasca A continuacioacute mostrem algunes utilitats drsquoaquests ginys

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

24

35 Com fer el giny Creative Commons

Aneu a httpcreativecommonsorgchooselang=ca i seleccioneu la llicegravencia

Creative Commons que meacutes us interessi i copieu el codi embed que facilita

lrsquoaplicacioacute

Torneu al blog i seleccioneu Aparenccedila | Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

25

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que hi aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

El mogravedul 4 drsquoaquest curs ofereix meacutes informacioacute sobre les diferents llicegravencies Creative Commons

36 Com fer el giny Comptador de visites

Aneu a la pagravegina httpcontador-de-visitascomestilos-contadorhtm

Seleccioneu el model de comptador que us interessi i introduiumlu les dades que

demana lrsquoaplicacioacute per obtenir el codi del comptador i copieu-lo

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

26

Torneu al blog i seleccioneu Aparenccedila|Ginys | Giny de text i cliqueu Afegeix

Escriviu el tiacutetol i enganxeu el codi que heu copiat anteriorment en el contingut del

giny

A continuacioacute configureu la barra lateral i la posicioacute en quegrave voleu que aparegui i

premeu Desa el Giny

Si visualitzeu el blog veureu el resultat

Hi ha diverses aplicacions que faciliten comptadors de visites de

forma gratuiumlta amb dissenys ben diferents i atractius i el

procediment per a lrsquoobtencioacute del codi embed eacutes similar Podeu

comprovar-lo en aquesta cerca de Google

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

27

37 Com fer el giny per inserir la imatge del Departament

Torneu a seleccionar un altre giny de text

No poseu cap tiacutetol i en el contingut afegiu directament aquest codi html

lta href=httpwww20gencatcatportalsiteensenyament

target=_blankgtltimg src=

httpwwwxteccatxtec_themeimatgescapaleraxtecvermellalogo_genepnga=

Departament drsquoEnsenyament gtltagt

Visualitzeu el blog per veure el resultat

Normalment aquest giny es posa al final de blog

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

28

4 Estructuracioacute de la informacioacute creacioacute dels ginys de

categories i etiquetes

41 Com fer el giny Cerca per nivells i destinataris (giny de categories)

411 Procediment teograveric

No hi cap giny anomenat cerca per nivells i destinataris perograve nosaltres usarem

la utilitat del giny de Categories

Primer cal afegir totes les categories accedint a Tauler | Articles | Categories

Segon cal crear el giny lateral Categories des drsquoAparenccedila | Ginys

Les categories solament es visualitzaran en el blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament

les haureu de seleccionar i apareixeran al giny lateral de Cerca per nivells i

destinataris

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als

articles que publicarem

412 Procediment pragravectic

4121 Introduccioacute de les categories

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Categories

Introduiumlu totes les categories que vulgueu fer constar prement Afegeix cada

vegada

Si les numereu apareixeran ordenades aixiacute al giny lateral

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

29

Exemple per a primagraveria

1 Cicle inicial

2 Cicle Mitjagrave

3

4 Professorat

5 Famiacutelies etc

Exemple per a secundagraveria

1 ESO

2 Batxillerat

3 (altres estudis)

3 Professorat

4 Famiacutelies etc

La categoria General lrsquoofereix lrsquoaplicacioacute per defecte perograve tambeacute la podem

ordenar perquegrave aparegui en lrsquoordre que ens interessi

La supressioacute duna categoria no esborra els seus articles Els articles que

estaven assignats nomeacutes a aquesta categoria passaran a formar part de la

categoria General

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

30

4122 Creacioacute del giny Categories

Un cop acabades drsquoescriure totes les categories aneu a Aparenccedila Ginys i

seleccioneu Categories prement Afegeix

Configureu el giny

1 Tiacutetol Cerca per nivells i destinataris o el que es consideri meacutes adient

2 Activeu si voleu Mostra el nombre drsquoarticles etiquetats amb cada

categoria

3 Activeu la barra lateral principal posant la posicioacute que volem queaparegui

4 Premeu Desa el Giny

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

31

Recordeu que les categories no es visualitzaran al blog fins que no les assignem als articles que publicarem

42 Com fer el giny Cerca per temes (giny drsquoEtiquetes)

421 Procediment teograveric

El proceacutes eacutes molt similar al de les categories

No hi cap giny anomenat Cerca per temes perograve nosaltres usarem les utilitats del

giny Etiquetes

Primer cal afegir totes les etiquetes (paraules que descriuran millor els temes que

difondrem al blog) accedint a Tauler | Articles | Etiquetes

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

32

Segon cal crear el giny lateral Etiquetes des drsquoAparenccedila | Ginys

Les etiquetes solament es visualitzaran al blog si les assignem a algun article

Mentrestant lrsquoaplicacioacute les teacute guardades i quan publiqueu els articles solament les

haureu de seleccionar i apareixeran al giny lateral Cerca per temes

Per confeccionar la llista drsquoetiquetes reviseu el contingut de la pragravectica 4 del mogravedul 2

422 Procediment pragravectic

4221 Introduccioacute de les etiquetes

Accediu a Tauler | Articles i del menuacute desplegable seleccioneu Etiquetes

Introduiumlu totes les etiquetes que vulgueu fer constar prement Afegeix cada vegada

Les etiquetes es colmiddotlocaran de manera automagravetica ordenades alfabegraveticament a la part

dreta de la pantalla

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

33

4222 Creacioacute del giny Etiquetes

Un cop acabades drsquoescriure totes les etiquetes aneu a Aparenccedila | Ginys i

seleccioneu el giny Nuacutevol drsquoetiquetesprement Afegeix

Configureu el giny

1 Tiacutetol Cerca per temes o el que es consideri meacutes adient

2 Taxonomia Etiquetes

3 Activeu la Barra lateral principal posant la posicioacute en quegrave volem que

aparegui

4 Premeu Desa el Giny

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

34

Recordeu que les etiquetes no es visualitzaran al blog fins que no les

assignem als articles que publicarem

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

35

5 Publicacioacute de continguts edicioacute drsquoarticles insercioacute de

fotografies viacutedeos i formularis

51 Edicioacute drsquoarticles

Aneu a Tauler | Articles i seleccioneu Afegeix

Escriviu el tiacutetol el contingut i assigneu les etiquetes i categories relacionades

amb lrsquoarticle

Si ja heu introduiumlt pregraveviament les etiquetes i categories a lrsquoaplicacioacute nomeacutes

caldragrave seleccionar-les Drsquoaquesta manera ens estalviem errades en lrsquoescriptura

Lrsquoentorn drsquoedicioacute de lrsquoarticle mostra les eines drsquoedicioacute similar a qualsevol

tractament de text Tambeacute el de la insercioacute drsquoenllaccedilos en el text o en les imatges

com despreacutes veurem Tambeacute mostra la possibilitat drsquoentrar en el codi html i

modificar-ne alguna part si en sabem

Podeu configurar els diferents paragravemetres de publicacioacute com ara desar lrsquoarticle en esborrany o programar en el temps la seva publicacioacute

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

36

52 Insercioacute drsquouna imatge en lrsquoarticle

Colmiddotloqueu el cursor on voleu inserir la imatge i cliqueu a Insereix | Add Media

Podem seleccionar la imatge del nostre ordinador i penjar-la a la mediateca del

blog clicant sobre Penja fitxers

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

37

Un cop a la mediateca cliqueu-hi i configureu els paragravemetres Tiacutetol Alineacioacute i

Mida Un cop acabat cliqueu Insereix a lrsquoarticle

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

38

Si voleu crear una galeria drsquoimatges seleccioneu Crea una galeria No obstant

aixograve es recomana penjar imatges amb poc pes per no colmiddotlapsar la capacitat del

blog

53 Insercioacute drsquoun enllaccedil web dins la imatge

Un cop ja tenim la imatge inserida en lrsquoarticle si volem inserir un enllaccedil per tal que clicant a la imatge enviiuml lrsquousuari a un altre lloc web hi ha diversos procediments El meacutes ragravepid eacutes aquest

Seleccioneu la imatge clicant-hi a sobre drsquoella i a continuacioacute cliqueu a la icona

drsquoinserir un enllaccedil

Introduiumlu lrsquoadreccedila de destinacioacute marqueu Obre enllaccedil en una finestra nova i

premeu Actualitza

Quan tinguem lrsquoarticle acabat premerem Publica per tal que desi els canvis

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

39

54 Insercioacute drsquoun enllaccedil de correu electrogravenic dins la imatge

Srsquoha de procedir igual que per inserir un enllaccedil web perograve a la casella de la URL srsquoha drsquoescriure mailtoxxxxxxteccat o el correu electrogravenic que vulguem Quan cliquem la imatge srsquoobriragrave el compte de correu per enviar el missatge

55 Insercioacute drsquouna presentacioacute de diapositives en lrsquoarticle des del Picasa

Entreu al Picasa des de lrsquoadreccedila httpspicasawebgooglecomhome i creeu

lrsquoagravelbum de fotos Donarem un tiacutetol i triarem lrsquoordre en quegrave les volem visualitzar

Tingueu cura de seleccionar que lrsquoagravelbum tingui Visibilitat Puacuteblica a la xarxa

perquegrave si no no es veuragrave

A la part inferior dreta de lrsquoagravelbum hi ha lrsquoopcioacute drsquoenllaccedilar a aquest agravelbum Si hi

cliqueu es desplega un menuacute Caldragrave seleccionar Incrustar projeccioacute de

diapositives

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

40

Seleccioneu el codi embed per inserir en mode de passi de diapositives Abans

perograve podeu seleccionar la mida que voleu mostrar Una mida de 400 px ja estagrave

beacute La seguumlent mida de 600px eacutes forccedila gran Tambeacute cal seleccionarReproduir

automagraveticament i a continuacioacute copieu el codi embed que apareix en el

requadre groc Per copiar-lo meacutes fagravecilment podeu estirar la cantonada inferior

dreta i es faragrave meacutes gran

Torneu a lrsquoarticle del blog i primer si voleu podeu redactar un text en mode

Visual

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

41

Cliqueu a la pestanya de mode Text i a continuacioacute del que hi ha escrit inseriu el

codi copiat Si voleu que les diapositives quedin centrades cal escriure aquest

altre codi entre el codi de Picasa Exemple

ltdiv style=text-align centergt

codi que hem copiat de Picasa

ltdivgt

Torneu a mode Visual perograve des drsquoaquiacute no es veuragrave beacute el que heu inserit Si

publiqueu lrsquoarticle i visualitzeu el blog podreu comprovar que les diapositives es

veuen perfectament

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

42

56 Insercioacute drsquoun viacutedeo en lrsquoarticle des del YouTube o Vimeo

Cliqueu sobre la icona del YouTube o Vimeo

Enganxeu lrsquoadreccedila URL del viacutedeo i cliqueu a insereix Podeu modificar les mides

de visualitzacioacute del viacutedeo Les mides meacutes comuns en els blogs soacuten 420 x 315

piacutexels

Si el voleu colmiddotlocar al mig caldragrave que entreu al codi html clicant a Text i escriure

la mateixa sintaxi que per a les fotos

ltdiv style=text-align centergt

codi del viacutedeo

ltdivgt

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

43

Un cop incrustat el viacutedeo no ens hem drsquooblidar drsquoescriure algun text i de

seleccionar les etiquetes i les categories corresponents Un cop acabat ja podeu

clicar a Actualitza o Publica

57 Insercioacute drsquoun formulari dins del blog

571 Procediment teograveric

Podem fer formularis per preguntar diferents quumlestions al llarg del curs

Per recollir les desiderates dels usuaris

Per saber els seus gustos lectors

Per rebre suggeriments etc

El procediment eacutes obrir un formulari amb Google Drive i despreacutes inserir-lo en una pagravegina estagravetica del blog i fins i tot el podem inserir en un gadget de text en un lateral si li canviem la mida

572 Procediment pragravectic

Amb el compte de correu gmail de la biblioteca aneu a Drive i cliqueu

sobre Crea i seleccioneu Formulari del menuacute que es desplegui

Seleccioneu la plantilla que vulgueu i comenceu a editar-lo perograve

primer desmarqueu lrsquoopcioacute solmiddotlicita inici de sessioacute

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

44

Creeu totes les preguntes i premeu Fet a cada pregunta

Quan tingueu el formulari acabat caldragrave configurar el missatge que es mostraragrave

als usuaris un cop hagin enviat el formulari (pagravegina de confirmacioacute) Per exemple

Les vostres dades srsquohan rebut correctament o Gragravecies El seu missatge sha enviat correctament

Caldragrave desmarcar la casella que srsquoindica a baix

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

45

Un cop acabat de dissenyar el formulari premeu Envia el formulari i en la

seguumlent finestra premeu insereix per obtenir el codi embed

Aquesta eacutes la mida que mostraragrave per defecte el formulari perograve nosaltres la podem canviar

Copieu el codi embed i inseriu-lo a la pagravegina del blog que heu triat

Exemple de codi

ltiframe src=httpsdocsgooglecomaxteccatformsd1GBHpC2VPVBTJe-

i76Qup7oxkwxsf8OxCB-HeVnZJ3Ucviewformembedded=true width=760

height=500

frameborder=0 marginheight=0 marginwidth=0gtSamp39estagrave

carregantltiframegt

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

46

Si voleu inserir-lo en un giny o gadget lateral de Text caldragrave modificar-ne

lrsquoamplada i lrsquoalccedilada En els gadgets laterals les mides solen ser width 300 i

height 200 perograve dependragrave del contingut del formulari

Les respostes del formulari es rebran en una base de dades que es crea automagraveticament en el Drive no en el correu electrogravenic

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

47

6 Com fer la cogravepia de seguretat

Aneu a Tauler | Eines i cliqueu Exporta

Apareixeragrave aquest missatge

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs

48

Seleccioneu exportar Tot el contingut i premeu Descarrega el fitxer

drsquoexportacioacute

Generaragrave un arxiu en format XML Guardeundashlo amb el nom i la data Exemple

copia_blog_biblioteca_20141001xml

Aquest arxiu lrsquoheu de conservar perquegrave eacutes la cogravepia de seguretat del vostre blog

Es recomana que feu aquesta operacioacute almenys un cop a lrsquoany preferentment en

acabar el curs