6.1.2.2 Consola de redacció HTML

Tot i que per norma general en la redacció de les nostres entrades farem servir la consola de redacció "Redacta", convé que coneguem la consola de redacció HTML (HyperText Markup Language) [Llenguatge de marques d'hipertext], atès que potser qualque vegada haurem de fer-la servir per canviar qualque cosa que és "complicada" de fer a l'altra consola o perquè volem aferrar un codi que un servei extern ens dóna per poder incrustar un element aliè dins la nostra entrada (per exemple, un presentació Slideshare, una presentació Prezi, una activitat Jclic...). En tot cas, aquest curs no està destinat a conèixer aquest llenguatge (tanmateix, és impossible amb la seva càrrega lectiva!).

Per poder accedir a la consola d'edició HTML només hem de clicar sobre el botó HTML que es troba  devora el botó "Redacta", a la part superior esquerra:

Una vegada hagis clicat, la consola de redacció canviarà la seva aparença (comprovaràs que el menú d'opcions de redacció es disminuirà considerablement).

Si encara no has afegit contingut a l'entrada veuràs que "la zona del contingut" està en blanc:

Però si ja has afegit contingut des de la consola "Redacta", observaràs que aquest contingut se'ns mostra de forma diferent a com ho fa a "Redacta" (i més complicat d'entendre!). Per exemple, observa la següent imatge, la qual es correspon amb l'inici d'aquest post vist des de la consola de redacció HTML:

Els elements d'HTML d'un lloc web estan especificats per etiquetes, que bàsicament s'identifiquen amb els símbols < (per obrir) i > (per tancar) l'etiqueta. Ex: <Exempleetiqueta>. Així mateix, habitualment és necessari indicar on volem que comenci la funció desitjada i on volem que acabi. En aquest sentit, la funció conclourà amb la inclusió d'una barra inclinada després del símbol d'obertura de l'etiqueta que tanca el comandament. Ex. </Exemplefidel'etiqueta>. En resum, ambdues etiquetes marquen on comença i on acaba la indicació que volem que s'executi.

Aquí et mostro algunes de les etiquetes més usuals, per a què puguis identificar-les i modificar-les si ho necessites.

---

• Tipus de lletra, color i mida: 

<font face="nomdelletra" color="nomdelcolorenanglès" size=10 (mida numèrica)>Text amb aquestes característiques</font>

• Ex.: <font face="Helvetica" color="black" size=10>Text amb lletra Helvetica, de color negre i mida 10</font>, es veurà així:
Text amb lletra Helvetica, de color negre i mida 10.

• Sobre els colors... A més de la designació en anglès del color, també és possible adjudicar-lo mitjançant codificacions. Per exemple, la codificació del color black és #000000. En aquesta web podràs trobar les codificacions pels principals colors: HTML Color Codes. Això sí... és molt important que escriguis el símbol # abans de la codificació i sense espais, sinó el codi no tindrà efectes. 

• Ex.: <font face="Arial" color="#FFFF66" size=12>Text amb lletra Arial, de color groc i mida 12</font>, es veurà així:
Text amb lletra Arial, de color groc i mida 12

• Negreta: 

<b>Text en negreta</b>

• Cursiva: 

<i>Text en cursiva</i>

• Subratllat:

<u>Text subratllat</u>

• Alineació del text: 

<left>Text a l'esquerra</left>
<center>Text centrat</center>

<right>Text a la dreta</right>

<justify>Text justificat</justify>

[de vegades aquest comandament ho trobaràs sota l'etiqueta: <span style="text-align: xxxx;"> on només cal substituir les XXXX per la posició que desitgis: left, center, right o justify].

• Inclusió d'una línia visible: 

<hr>

---

• Si vols que la línia no ocupi tot el llarg de la pàgina és necessari incloure la mida d'aquesta:
• Ex.: <hr width= "100">

---

• Si a més a més, vols afegir un color i un gruix determinat a la línia, hauràs d'indicar-ho abans de tancar l'etiqueta:
• Ex. <hr color="red" size="9" width="200">

---

• Inserir una imatge:  

<img src="adreçawebdelaimatge"> 

[recorda que, tal i com ja hem vist al punt anterior (6.1.2.1), cada imatge té una adreça url pròpia, i aquí hem d'incloure aquesta, no l'url de la pàgina on es troba la imatge]

Ex.: 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUanvC9mAhhl6SH7CIuDDt5yhslUrWD-tlx5YRumArU1EW90eL-tlxu0XRmex7IzkBa4BHeGC9PqESO2CGRYtCE6GqmaUmErBeLE4p_ICHa_6QtndeBVzP_gnMpRx_iD-rnVuej6alsNtW/s200/TIC.png">

• Alinear la imatge: abans de l'etiqueta d'inserir imatge, afegirem l'etiqueta d'alineació (les mateixes que hem vist per alinear el text).

 <center><img src="adreçawebdelaimatge"></center>

• Canviar la mida de la imatge (o d'un vídeo o un altre recurs) i/o incloure un marc en aquesta:

<img border="0" height="200" src="adreçawebdelaimatge" width="150" /></div>

[en aquest cas border="0" ens indica que no volem emmarcar-la, height="200" fixa una mida de 200px d'alçada i width="150" fixa una amplada de 150 px]

• Ex: imaginem que volem incloure la imatge anterior en una mida molt més petita de la que ens permet la consola de redacció (per exemple 30px):

<img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUanvC9mAhhl6SH7CIuDDt5yhslUrWD-tlx5YRumArU1EW90eL-tlxu0XRmex7IzkBa4BHeGC9PqESO2CGRYtCE6GqmaUmErBeLE4p_ICHa_6QtndeBVzP_gnMpRx_iD-rnVuej6alsNtW/s200/TIC.png" width="30" /></div>

• Afegir un enllaç a la imatge: (és a dir, que quan cliquin damunt porti a un lloc web): 

<a href="adreçawebonvolemqueenllaci"><img src="adreçawebdelaimatge"></a>

• Si volem que l'enllaç de la imatge s'obri dins una nova finestra haurem d'incloure el comandament target="_blank":

<a href="adreçawebonvolemqueenllaci" target=-"_blank"><img src="adreçawebdelaimatge"></a>

• Inserir un enllaç: 

<a href="http://adreçaweb">Text que inclou l'enllaç</a>

• Ex. <a href="http://urkocuevasgomez.blogspot.com.es/">El Calaix de n'Urko</a>, es mostrarà així: El Calaix de n'Urko.

• Si volem que l'enllaç s'obri dins una nova finestra, abans del tancament de l'etiqueta haurem d'incloure el comandament target="_blank". Per obrir el blog anterior en una nova pestanya seria: 

<a href="http://urkocuevasgomez.blogspot.com" target="_blank">

• Text en moviment: 

<marquee>Exemple text en moviment</marquee>

Hola! Aquest és un exemple de text en moviment

• Separar en línies: 

<br>

• Ex: <br>Separar<br>en<br>línies, es veurà així:
Separar
en
línies

• Inserir una taula: 

[tot plegat, si trobes que això és molt complicat, pots crear la taula a un document "word" i fer un copy-paste d'aquesta dins la consola "Redacta"!].

• Una columna i una filera: 

<table border=0><td>Contingut de la taula</td></table>

• El nombre 0 indica en aquest cas el gruix de la línia (si indicam 0 no es mostrarà).
• Ex: <table border=1><td>Hola!</td></table>, es veurà així:

Hola!

• Si volem afegir una altra columna:

<table border=0><td>Contingut columna 1</td><td>Contingut columna 2</td></table>

Contingut columna 1

Contingut columna 2

• Si volem afegir una altra filera: (afegirem <tr> allà on vulguem que comenci la nova filera):
• Ex.: Taula de 2 columnes i 2 fileres:

<table border=0><td>Contingut columna 1 filera 1</td><td>Contingut columna 2 filera 1</td><tr><td>Contingut columna 1 filera 2<td>Contingut columna 2 filera 2</td></table>

Contingut columna 1 filera 1	Contingut columna 2 filera 1
Contingut columna 1 filera 2	Contingut columna 2 filera 2

• Si volem afegir més columnes o més fileres, és tan fàcil com anar afegint els codis <td></td> per les columnes i <tr> per les fileres (en aquest cas no és necessari tancar el <tr>, simplement indicar on vols que comenci la següent filera.
• Ex: Taula de 3 columnes i 3 fileres: 

 <table border=0><td>Contingut columna 1 filera 1</td><td>Contingut columna 2 filera 1</td><td>Contingut columna 3 filera 1</td><tr><td>Contingut columna 1 filera 2<td>Contingut columna 2 filera 2</td><td>Contingut columna 3 filera 2</td><tr><td>Contingut columna 1 filera 3<td>Contingut columna 2 filera 3</td><td>Contingut columna 3 filera 3</td></table>

Contingut columna 1 filera 1	Contingut columna 2 filera 1	Contingut columna 3 filera 1
Contingut columna 1 filera 2	Contingut columna 2 filera 2	Contingut columna 3 filera 2
Contingut columna 1 filera 3	Contingut columna 2 filera 3	Contingut columna 3 filera 3

• També és possible canviar el color de la línia de la taula i el color de fons d'aquesta:
• Ex: <table border=1 bordercolor="red" bgcolor="black"><td><font color="white">Taula amb línia de color vermell i fons negre . El color de la lletra és blanc.</font></td></table>

Taula amb línia de color vermell i fons negre . El color de la lletra és blanc.

6.1.2.2.1 Incrustar un codi HTML extern.

Abans hem comentat que alguns serveis externs a Blogger (Vimeo, Slideshare, Jclic, Formularis de Google...-un llarg i llarg etcètera-) ens ofereixen un codi HTML per poder inserir aquell recurs propi dins llocs webs (al nostre cas, dins el blog).

El primer que hem de fer és obtenir el codi del recurs a inserir. Seguint l'exemple que hem vist abans sobre com incorporar un vídeo de Vimeo, el procés és el següent:

1. Anam a Vímeo (o on vulguem!) i cercam el vídeo que volem incrustar.

2. Cliquem a "Compartir".

3. Copiam el codi que apareix al requadre "Insertar" (segons on, ens apareixerà com a codi EMBED - un abreujament de la paraula anglesa embedded, que significa que està incrustat, encaixat, acoblat...).

4. Tornam a la pàgina de redacció de l'entrada i clicam en el mode de redacció HTML:

5. Aferram al final de l'entrada el codi que hem copiat prèviament (pots fer-ho clicant a la vegada Ctrl + V) [si entens el llenguatge HTML també pots aferrar-lo allà on vulguis que aparegui].

• Si desitjam canviar la mida, podrem fer-ho canviant els paràmetres de height i width. Al meu cas, els he posat a 200 i 460 respectivament, per a què comprovis que podem jugar amb la mida

La Historia de la humanidad, from Ecoalfa on Vimeo.

6. Tornam a la consola en mode Redacta. El  recurs apareixerà al final de l'entrada (o allà on l'hagem aferrat). De vegades podràs moure'l arrossegant-lo pel document, altres hauràs d'aferrar el codi allà on vols que aparegui ja que no se'ns permet moure'l...

6.1.3 Temes.

Ja sé que estàs ansiós o ansiosa per poder continuar publicant més entrades al teu blog, però convé primer que el continuem donant forma abans de continuar.

Segur que recordau que quan creàrem el blog, Blogger ens va fer seleccionar un tema (perquè ens entenguem, com una plantilla), pel nostre blog. Però potser aquesta no ens satisfà, ja sigui per motius gràfics o perquè no s'ajusta a l'estructura que havíem pensat. Cap problema! Blogger ens permet canviar el tema del nostre blog, ja sigui escollint un altre de tots els que Blogger ens ofereix, o ja sigui carregant un tema d'una font externa.

Si clicam sobre l'opció Tema de la interfície del nostre blog veurem una cosa semblant a aquesta:

1. Permet personalitzar el disseny del blog d'una manera senzilla i intuïtiva. Habitualment, si hem fet servir un tema descarregat de la xarxa, des d'aquesta opció no se'ns permet modificar gairebé res, però si hem fet servir una plantilla de blogger, ens apareixerà una cosa semblant a aquesta:

[els canvis que facem aquí seran visibles a la part inferior de la pantalla, així sempre podrem comprovar, abans de desar-los, com queda allò que estam fent]

• 1/6. Tema. Permet anar canviant el tema (de Blogger) i l'aparença d'aquest.
• 2. Fons. Podem canviar la imatge i els colors del fons.

• 3. Ajusta les amplades. Podem canviar la tipografia dels diversos apartats i elements del blog.

• 4. Gadgets. Per modificar alguns elements dels gadgets que tinguem al nostre blog (tot i això, des de la secció "Disseny" de la interfície del blog, aquest procés és molt més adient).
• 5. Avançat. Algunes plantilles inclouen aquí alguns elements complementaris d'edició.
• 6. Temes de Blogger.
• 7. Tornar al blog sense desar canvis, veure el blog en format "esborrany" i/o desar els canvis (= Aplicar al blog).
• Alerta! Pensa en desar els canvis (és a dir, en aplicar els canvis de disseny al teu blog) si vols que aquests siguin efectius.

2. Modifica l'HTML. Si tens coneixements de llenguatge HTML podràs accedir a una pantalla d'edició del Tema. L'avantatge d'aquest sistema és que gairebé pots fer allò que vulguis en el disseny del teu blog; l'inconvenient és que has de conèixer aquest llenguatge... En tot cas, no et desesperis. Si necessites fer un canvi en aquesta plantilla, per internet trobaràs solucions al que cerques (però recorda que abans de fer qualsevol canvi, has de fer una còpia de seguretat del teu tema -veure punt 5-).

3. Configuració en la visualització del blog mitjançant un dispositiu mòbil. Des d'aquesta opció podrem seleccionar una plantilla adaptada per a dispositius mòbils (molt més senzilla que la versió d'escriptori) o establir la versió d'escriptori.

4. Temes de Blogger.

5. Crear còpia de seguretat i restaurar. 

• Se'ns permet desar dins el nostre equip una còpia de seguretat del tema que tenim al nostre blog (ves alerta! els gadgets/widgets no queden a la còpia de seguretat i poden "pedrer-se" quan apliquem un tema "extern").
• Podem penjar un tema "extern" o restaurar un tema anterior que prèviament tinguem desat al nostre equip (és un arxiu amb extensió .xml).

6.1.4 Disseny

Una vegada hem creat el blog, hem publicat una primera entrada i hem escollit un tema, la següent passa que farem serà endinsar-nos dins el disseny dels elements del blog, 

Per accedir a aquesta secció, hem de clicar sobre l'element "Disseny" de la consola principal del blog:

Des d'aquesta secció podrem afegir, suprimir i editar els widgets/gadgets del nostre blog: petites eines que se solen afegir en les barres laterals per fer els blogs més atractius, però també útils. Per exemple, podem afegir un comptador de visites, enllaços, àlbum de fotos, vídeos, cites, reproductors de música, els nostres tuits i un llarg etcètera de coses (això sí, és important no abusar d'aquests elements, ja que endarrereixen la càrrega del lloc).

Cada "Tema" implica un disseny propi, per la qual cosa, les captures de pantalla que observaràs a partir d'ara poden variar quant a la forma de les teves, ja que fan referència al disseny d'aquest blog, Tot i això, canvia la forma. No el fons! ;).

Quan hagis accedit a Disseny, veuràs a la part dreta l'estructura del teu blog a mode de "taula", i hi trobaràs els següents elements (recorda que l'estructura pot variar depenent del teu tema i que aquesta s'ajusta només a aquest blog):

A. Icona de web. Des d'aquí podràs incorporar una imatge a mode d'icona del teu blog, la qual es mostrarà a la part superior de la pestanya en la seva versió publicada. Si no poses cap, es mostrarà el logo de Blogger.



Canviar la icona és molt senzill. Només hauràs de clicar sobre EDITA. En fer-ho, s'obrirà una finestra des de la qual podràs pujar l'arxiu d'imatge (ha de ser inferior a 100 Kb).

B. Header. Es correspon amb l'encapçalament del teu blog: títol, descripció (o subtítol) i imatge de capçalera (la qual pot esser pujada des del teu equip o incrustada des d'un altre lloc web).

C. Pages Menú (Menú de pàgines). Com veurem més tard, les pàgines dels blogs són molt útils per introduir contingut poc variable però important i que per tant volem que sigui localitzable d'una manera relativament fàcil. Amb aquest widget el que farem serà determinar quines són les pàgines que voldrem que es mostrin al nostre blog i en quin ordre.

Aquest widget/gadget pot variar la seva ubicació [és a dir, normalment se'ns permet moure'l, el que farà també que canviï la seva aparença: situat a la part superior les pàgines se'ns mostraran a mode de "pestanyes", però si l'ubicam als laterals, aquestes es mostraran a mode d'enllaços).

Segurament, en més d'una ocasió has vist que alguns menús són desplegables (per exemple, el menú de pàgines de la Delegació), permetent crear un menú amb "subpàgines" (tot i que són pàgines en sí mateixes) o enllaços externs:

Aquesta funció ja no és tan senzilla de fer, ja que requereix treballar amb codi HTML, però aquí tens un Tutorial on trobaràs passa a passa com fer-ho: Menú desplegable para Blogger.

D. Mainblogsec. Aquesta secció és on es troba el cos de les entrades (tot i que segons el tema que tinguem també se'ns permetrà incloure altres widgets/gadgets a la part superior i/o inferior de les entrades del blog).

Si accedim al gadget d'Entrades del blog se'ns obrirà una finestra emergent des de la qual podrem configurar alguns aspectes de la configuració i l'aparença de les entrades. A més d'indicar quantes entrades volem que es mostrin a la pàgina principal, podem fer que es mostrin (o no) la data i hora de publicació, l'autor, botons per compartir a les xarxes socials... Durant la sessió presencial ens detindrem un poc en cadascú d'aquests elements, tot i que són fàcils de reconèixer i entendre.

E. Sidebar. És una barra lateral (al meu cas al costat esquerre, però segons el tema escollit pot ubicar-se a la dreta o fins i tot tenir ambdues) dins la qual inclourem la majoria de widgets/gadgets que desitgem incorporar al nostre blog. Com veuràs, a la part superior d'aquesta secció hi figura "Afegeix un gadget".  Si cliquem, s'obrirà una finestra emergent des de la qual Blogger et permetrà afegir tota una sèrie de gadgets/widgets:

1. Bàsic; Podràs accedir als gadgets més habituals (i bàsics), els quals han estat dissenyats per blogger. En aquest moment són 27. Els més emprats:

• Entrada destacada. Per mostrar aquella entrada que desitgem com a destacada.
• HTML/Javascript. Per incloure un gadget/widget propi realitzat amb llenguatge HTML, o per incrustar un element extern del qual disposam del codi a incrustar (un mapa de google, un vídeo extern, una presentació Prezi...).
• Perfil. Per mostrar una descripció teva als visitants del lloc.
• Arxiu del blog. Permet navegar més fàcilment per antigues entrades del blog.
• Imatge. Tot i que jo no empro aquest gadget (ho faig amb el gadget HTML/Javascript per ajustar la imatge a les meves preferències), amb ell podrem incrustar una imatge (des del nostre equip o indicant la seva url) i incorporar, si volem, un enllaç extern en fer clic sobre ella).
• Etiquetes. Per mostrar el llistat d'etiquetes que hem assignat a les nostres publicacions, afavorint la recerca d'e contingut amb temàtica específica. 
• Pàgines. Per mostrar les pàgines del teu blog. Recorda que abans hem explicat que l'aparença d'aquest gagdet variarà segons la seva ubicació).
• Llista d'enllaços. Per mostrar una llista d'enllaços a altres webs, blogs...
• Text. per afegir un quadre amb contingut textual.
• Entrades polurars: permet mostrar una llista de les entrades més populars del teu blog.
• Estadístiques del blog. Mostra el nombre total de pàgines vistes al teu blog.
• Seguiment per correu electrònic. Amb aquesta eina facilitaràs als visitants subscriure's a l'enviament de correu electrònic quan publiquis una entrada.
• Enquesta. Pots conèixer l'opinió dels visitants afegint una enquesta al teu blog
• Enllaços de subscripció. Permet que els lectors se subscriguin fàcilment al  blog amb els lectors de feeds més coneguts com Feedly).
• Tradueix. Permet que els visitants tradueixin el blog a diferents idiomes.
• Llista. Permet afegir una llista de llibres i pel·lícules, o de qualsevol cosa que ens interessi.

2. Més gadgets de Google. Podràs accedir a altres gadgets que han estat dissenyats per tercers per a Blogger. En aquest moment a la base de dades hi ha 779.

3. Afegeix els vostres. Des d'aquí podràs afegir un gadget teu (o fet per un tercer) indicant la seva adreça web.

Una vegada hagis afegit els gadgets que vulguis, aquests podràs moure'ls a altres llocs on el tema permeti incorporar-los o col·locar-los en l'ordre que desitgis. Només has de clicar sobre ells i moure'ls!

Alguns usuaris amb coneixements de llenguatge HTML solen fer servir el gadget HTML/JavaScript ja que els permet, emprant el llenguatge HTML, incloure un gadget personalitzat i sense les "limitacions" que podrien oferir els gadgets "estandars" (per exemple, com ja hem dit, el gadget bàsic IMATGE et permet afegir una imatge, però no modificar la seva mida o la seva alineació dins la barra, modificacions que sí poden fer-se des del gadget HTML si s'escriuen els comandaments necessaris per fer-ho).