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