6.1.2 Entrades (posts): creació i administració.

La següent passa, abans de començar a dissenyar i estructurar el nostre blog, serà introduir-hi una primera entrada. D'aquesta manera, podrem comprovar com queden "visualment" els nostres posts, el que ens serà de molta ajuda quan ens fiquem de ple en el disseny.

Aquesta primera entrada pot esser un missatge de benvinguda o una petita presentació dels nostres propòsits amb aquest nou projecte.

• Consola d'administració d'entrades:

Administrar una entrada és molt senzill. A la interfície de Blogger tenim, a la part superior, l'element "Entrades". Quan haguem accedit a ell, veurem una pantalla com aquesta...

1. Entrades. Permet l'accés a la gestió de les entrades del nostre blog. Una vegada tinguem entrades creades, aquestes "s'organitzaran" en Publicades, Esborranys o Totes (és a dir, ambdues opcions) i es mostraran per ordre cronològic a la interfície principal d'entrades (nº 3).
2. Entrada nova. Permet l'accés a la consola de creació de noves entrades.
3. Entrades creades al nostre blog (com ja hem esmentat, ordenades cronològicament). Podrem veure també les etiquetes que haguem atorgat a cada entrada, qui n'és l'autor, el nombre de comentaris que ha rebut cadascuna, el nombre de visualitzacions de cada entrada i la seva data de publicació.
4. Gestor d'entrades. Ens permet, una vegada haguem seleccionat l'entrada o entrades que desitgem, gestionar la seva publicació (publicar, passar-les a esborranys o el·liminar-les).
5. Nombre d'entrades que es mostren a la consola d'edició d'entrades.
6. Cerca d'entrades per etiquetes (s'indexen les entrades que contenguin les etiquetes que indiquem),

• Consola de creació d'entrades.

Una vegada cliquem sobre "Entrada nova" accedirem a una consola d'edició per crear l'entrada:

A continuació veurem a grans trets que ens ofereix cadascú d'aquests elements, encara que després aprofundirem en els elements d'edició.

1. Titol de l'entrada. Aquí escriurem el títol que vulguem per a la nostra entrada (serà el que es veurà com a títol del post).

2. Edició. Podem seleccionar si volem redactar l'entrada amb un panell semblant a editors de text o amb llenguatge de programació HTML.

3. Elements d'edició d'entrada: tipografia, enllaços, imatges, vídeos... (després els veurem amb mes detall a l'apartat 6.1.2.1).

4. Contingut de l'entrada.

5. Etiquetes que assignarem a l'entrada. Les etiquetes (o tags) són paraules clau que pots afegir a una entrada per "classificar-la". Aquestes paraules serveixen per identificar el contingut de l'entrada i permeten a l'usuari visualitzar d'una forma ràpida tots aquells posts que incloguin l'etiqueta seleccionada.

6. Programa. Per establir la data de publicació. Si no fem res, la data de publicació serà la que correspongui en el moment que es publiqui l'entrada per primera vegada, però si volem, podem editar aquesta data, ja sigui indicant una data anterior o posterior (en aquest cas, l'entrada es publicarà en la data programada).

7. Enllaç permanent. Quan escrivim una entrada, Blogger genera de forma automàtica un enllaç permanent basat en el títol de l'entrada, però si volem, podem generar una url pròpia amb l'objectiu de facilitar la seva cerca o aportar més detalls sobre el seu contingut.

8. Ubicació. Si volem, podem indicar la ubicació des de la qual es publica l'entrada.
9. Opcions (sobre llenguatge HTML i mode de redacció: mostrar l'HTML de forma literal (si necessitem que es vegin alguns codis) o interpretar-ho; i utilitzar l'etiqueta <br> per als salts de línia o efectuar-los amb la tecla Enter del teclat).
10. En aquesta secció trobam diverses opcions:

• Publica (la primera vegada que cream l'entrada) / Actualitza (per tornar a publicar l'entrada una vegada l'hem modificada) 
• Desa (per desar els canvis que hem fet). Alerta! Aquesta opció desa les modificacions fetes a l'entrada, però no les publica.
• Reverteix a esborrany. Per canviar una entrada publicada a esborrany (l'entrada ja no serà pública)
• Previsualitza. Abans de publicar l'entrada pots comprovar com quedarà una vegada la publiquis.
• Tanca. Per tancar la consola de redacció de l'entrada. L'entrada es guardarà com esborrany si no s'ha publicat.

6.1.2.1 Consola de redacció.

Com hauràs comprovat, la consola de redacció d'entrades permet, a més d'afegir text, incrustar enllaços, imatges, vídeos, caràcters especials...

Ara veurem que ens ofereix aquesta consola de redacció en l'opció "Redacta", ja que en l'opció HTML les utilitats són més limitades atès que aquestes s'apliquen directament escrivint en aquest llenguatge. Tanmateix, de vegades haurem d'accedir a "la consola" HTML, sobretot si volem afegir elements externs (és a dir, aferrar un codi HTML que ens ofereix alguns serveis) o fer un canvi molt precís.

1. Desfer / Refer el darrer canvi.

2. Font: pots escollir el tipus de lletra entre Arial, Courier, Geòrgia, Helvetica, Estafis, Trebuchet o Verdana, així com utilitzar la font predeterminada establerta en el dissenyador de plantilles.
3. Tamany de la font: pots escollir la grandària de la lletra entre la més petita, petita, normal, gran o la més gran.
4. Format: pots escollir el format que utilitzaràs en el text entre encapçalament, subencapçalament, encapçalament secundari o normal. A més de dotar al teu blog d'una estructura òptima, els motors de recerca assignen als encapçalaments una major rellevància que a altres elements del post.
5. Negreta, Cursiva, Subratllat i Ratllat. 
6 / 7. Color del text i color de fons del text: en ambdues opcions pots seleccionar entre una gran varietat de colors:

8. Enllaç. Per inserir un enllaç a la nostra entrada. Quan cliquem se'ns obrirà una finestra com aquesta:

• A: Text que inclourà l'enllaç (si tenim el text seleccionat ens apareixerà directament).
• B: Adreça web (o correu electrònic) a la qual ha de remetre l'enllaç.
• C: Opcions d'enllaç: obrir l'enllaç a una nova finestra (si es deixa en blanc s'obrirà a la mateixa finestra) i atribut "nofollow" (per evitar el rastreig - més informació)

9. Imatge. Introduir una imatge és molt senzill. Si vols, basta que arrosseguis des del teu escriptori la imatge a la consola de redacció. Això sí, aquesta imatge és pujarà al teu "Google Fotos", ocupant espai. És per això que disposam d'altres mètodes per incrustar imatges:

• A: Per penjar imatges des del teu equip (ja hem esmentat que pot fer-se també arrossegant-les a la consola de redacció);
• B: Si la imatge ja l'has fet servir al teu blog amb anterioritat, pots cercar-la des d'aquesta opció, i així evitaràs duplicar-la i ocupar més espai dins els teus àlbums de Google.
• C: Si la imatge la tens allotjada a altres blogs de Blogger o dins els teus Àlbums de Google també podràs rescatar-la des d'aquí, evitant duplicar l'arxiu.
• D: Més:
• Si tens activat el perfil de Google+ al teu telèfon, podràs cercar una imatge que es trobi dins ell i pujar-la.
• Si tens una càmera web, també podràs fer una foto i pujar-la directament.
• Si coneixes l'enllaç d'una imatge que ja es troba allotjada a Internet, pots incloure aquí l'enllaç de la imatge per incorporar-la. Tingués present vàries coses:
• Els drets d'autor. Creative Commons i cercadors d'imatges lliures.
• Si l'administrador del lloc web on es troba allotjada la imatge canvia el seu nom o l'elimina, la imatge la perdràs). 
• Recorda que el que has d'aferrar aquí és la url de la imatge, no del lloc web on es troba la imatge. Obtenir l'url d'una imatge d'internet és molt senzill: clica sobre ella amb el botó dret i selecciona "Copiar adreça de la imatge".

10. Vídeo. A l'igual que amb les imatges, per penjar un vídeo es tan fàcil com arrossegar-lo dins l'entrada (si ja el tens al teu equip).

• A: Penjar un vídeo que es troba allotjat al teu equip.
• B: Incrustar un vídeo que es troba a Youtube.
• C: Incrustar un vídeo teu que es troba a Youtube.

Si vols incrustar un vídeo des d'una font externa, hauràs de fer-lo des de la consola HTML, aferrant el codi HTML que se'ns ofereix amb el recurs (després veurem com funciona la consola de redacció HTML):

• Ex. Incrustar un vídeo de Vimeo:

11. Insereix caràcters especials. Se'ns obrirà una finestra emergent des de la qual podrem seleccionar quins caràcters volem inserir. Conté un cercador de paraules o fins i tot un espai per dibuixar com és aproximadament el caràcter que volem cercar.

12. Insereix un salt de línia. Aquesta opció és molt recomanada quan escriguis una entrada molt llarga, ja que pots indicar fins on vols que es vegi l'entrada a la pàgina principal i facilitar no només la càrrega del lloc, sinó també la visualització d'altres entrades. L'usuari podrà visualitzar l'entrada completa quan cliqui damunt el títol d'aquesta o sobre l'opció "Llegir més..."

13. Alineació del contingut: pots alinear el text (i altre contingut) a l'esquerra, centrat, a la dreta o justificat.
14. Llista numerada i de pics.
15. Pressupost (per destacar o citar contingut).
16. Suprimir el format (permet eliminar el format del text: mida, negreta, alineació...). Aquesta opció és molt útil quan fem un "copy-paste" de contingut extern (per exemple, un text que haguem redactat prèviament en un document de text al word) per eliminar tot el format que tenia.
17. Comprovar l'ortografia (si cliquem, se'ns posaran sobre fons groc aquells termes que no estiguin bé escrits o que no es trobin dins el diccionari ortogràfic de l'idioma establert). Òbviament, el corrector que farà servir en aquest cas serà aquell que tinguem activat. Per canviar l'idioma de revisió, simplement has de clicar amb el botó dret del ratolí sobre la consola de redacció. En fer-ho, se'ns obrirà un petit menú des del qual podrem canviar "el diccionari corrector":

18. Transliteració: per si és necessari emprar alfabets diferents del llatí (per exemple si volem escriure un vocable en grec o hebreu...).
19. Direcció de lectura (per canviar la direcció de lectura del text). Destinat sobretot a aquells alfabets que es de dret a esquerra, com l'àrab o l'hebreu).

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.5.1. Creació de pàgines.

Per crear una pàgina haurem de clicar sobre l'element Pàgines des de la interfície principal del blog (1) i posteriorment sobre l'element "Pàgina nova" (2):

En aquest moment, accedirem a una finestra d'edició semblant a la finestra d'edició o creació d'entrades, tot i que se'ns "adverteix" que es tracta d'una pàgina i no d'una entrada.

El títol que donis a la pàgina serà el que es mostrarà a la pàgina principal del blog i el contingut d'aquesta pàgina serà aquell que incloguis dins el quadre de text. Si necessites recordar que ens ofereixen els elements de la barra d'edició en l'opció "Redacta", podràs fer-ho a l'apartat 6.1.2.1 d'aquest curs.

A la part dreta "Configuració de la pàgina" podrem seleccionar algunes opcions (mostrar o no comentaris -si els tenim activats-) i opcions de mode de redacció.

Una vegada redactada, ja només ens quedarà clicar sobre "Publica". Els usuaris podran accedir a aquesta pàgina des del gadget "Pàgines" (si no es veu aquest gadget o la pàgina no surt, hauràs d'anar a Disseny, i afegir o editar el gadget "Pàgines" -ho hem vist a la secció 6.1.4-). També pots incorporar-lo com enllaç des de qualsevol banda del teu blog.