Arxiu d'etiquetes: Entrades

Edició de les imatges inserides en les entrades del blog (amb WordPress.com)

Un cop inserida una imatge en una entrada del blog, podrem editar-la en qualsevol moment per canviar els paràmetres establerts en inserir-la.

Per fer-ho, fem clic a sobre de la imatge. Apareixeran dos botons:

Els botons d'edició i esborrat

El primer ens permet editar-la, el segon esborrar-la.

En fer clic en el primer botó, “Edita la imatge”, accedim a una finestra on establirem els paràmetres que interessin. La finestra d’edició té dues pestanyes: “ Edita la imatge ” i “ Opcions avançades “.

Les opcions de la primera pestanya són les següents:

  1. Mida :  en fer clic en l’escala de percentatges, podrem canviar la mida de la imatge. A la dreta, una vissualització prèvia mostrarà els efectes que produeix el redimensionament.
  2. Alineació :  podrem indicar una nova posició per a la imatge. La visualització prèvia ens indicarà quin efecte provoca cadascun dels alineaments possibles (cap, esquerra, centrat i dret).
  3. Títol : podem escriure el títol de la imatge. Aquest és el text que es mostrarà als navegants quan situïn el cursor del ratolí a sobre.
  4. Text alternatiu :  podem escriure el text que es llegirà si la imatge no està disponible, o que utilitzaran els lectors de pantalla per interpretrar el contingut de la imatge.
  5. Llegenda : podem escriure el text que apareixerà com a peu de la imatge.
  6. URL : podem escriure la URL amb la qual ha d’enllaçar la imatge.

Les opcions de la pestanya “ Opcions avançades ” són les següents:

Relatives a la imatge

  1. Codi font :  es refereix a la URL real de la imatge en cas que es desitgi un control total sobre els seus paràmetres.
  2. Mida : control de l’amplada i l’alçada de la imatge, amb l’opció de restablir els valors originals de la imatge fent clic al botó “Mida original”.
  3. Classe CSS : el control del format de les imatges es fa mitjançant el llenguatge CSS. Segons el tema escollit, les imatges tindran aplicades unes regles CSS que podríem anul·lar des d’aquesta opció.
  4. Styles : amb aquesta opció podem indicar regles CSS pròpies per a la presentació de les imatges.
  5. Propietats de la imatge : amb aquesta opció podem proporcionar algunes opcions de format a les imatges. Podem indicar que la imatge tingui una vora (donarem un valor que serà interpretat en píxels), que se separi verticalment (en píxels) o horitzontalment (també en píxels) dels elements que tingui al seu voltant. Els canvis que farem en aquest apartat es visualitzaran automàticament com a regles CSS en l’apartat “Styles”.

Relatives a l’enllaç (si la imatge és un àncora que ha de portar a alguna destinació web)

  1. Títol : text per al títol que es mostrarà en situar el cursor del ratolí a sobre de la imatge.
  2. Relatiu a l’enllaç : els enllaços poden tenir diversos atributs que podem especificar en aquest apartat. Per exemple podríem afegir l’atribut “nofollow”, per evitar que els robots de Google segueixin l’enllaç. Llegiu-ne més sobre aquest atribut en aquest enllaç .
  3. Classe CSS : regles CSS aplicades als enllaços que, si escau, podem eliminar.
  4. Styles : regles CSS pròpies per a canviar el format dels enllaços.
  5. Destinació : indicació de si l’enllaç s’ha d’obrir en la mateixa finestra (o pestanya) o en una de nova.

Inserir imatges en les entrades del blog (amb WordPress.com)

Les imatges que inserirem en les entrades d’un blog poden estar emmagatzemades en el mateix espai que el web o en URL externes. Els tipus d’imatges que poden utilitzar són els següents:

  • .jpg / .jpeg
  • .gif
  • .png

Inserir una imatge que allotjarem al servidor del propi blog

Per inserir una imatge seguim el procediment següent:

  1. Situem el cursor allà on ha de visualitzar-se la imatge i fem clic al botó “Afegeix un mèdia” que trobem a sobre de les barres d’eines de l’editor.

    Icona Afegeix un mèdia

  2. A continuació, apareixerà una pantalla amb diverses opcions. Una d’elles, “Upload Files”, dóna accés a un aplicatiu que ens permet penjar la imatge de dues maneres diferents:
    • arrossegant-la des d’un dels dispositius d’emmagatzematge del nostre ordinador, o bé
    • fent clic al botó “Selecciona” per seleccionar-la utilitzant el quadre de diàleg que obrià el nostre ordinador per donar-nos accés a les imatges que hi tinguem emmagatzemades.
  3. Un cop penjada la imatge el procés ja s’ha completat.
  4. A l’esquerra de la pantalla apareix un formulari amb informacions diverses (nom de la imatge, data en què ha estat penjada i mida original en píxels) i diversos camps de text amb informació sobre la imatge que haurem de completar:
    • Títol : donem un títol a la imatge. Aquest títol, però no és el text que es mostrarà si els navegants situen el cursor a sobre de la imatge, si volem que això passi haurem d’escriure el títol editant la imatge un cop inserida (Vegeu l’entrada “ Edició de les imatges inserides en les entrades del blog (amb WordPress) “).
    • Llegenda : text que apareixerà com a peu de la imatge.
    • Alt text : si la imatge no està disponible, el text que s’escrigui en aquest camp serà el que es visualitzarà en el seu lloc. Aquest és també el text que utilitzen els lectors de pantalla per interpretar el contingut de la imatge.
    • Descripció : podem incloure una descripció més completa de la imatge o fer comentaris sobre ella. En completar aquest apartat estarem creant una pàgina a la qual es podrà accedir en fer clic a sobre d’ella.
    • Alineació : indicarem la posició de la imatge en relació al text. Hi ha 4 alineaments possibles:
      • Esquerra : la imatge flota a l’esquerra del text, el text flueix a la seva dreta.
      • Centrat : la imatge se situa en el centre de l’entrada i el text queda a dalt i a baix de la imatge.
      • Dreta : la imatge flota a la dreta del text, el text flueix a la seva esquerra.
      • Cap : la imatge se situa en línia amb el text.
    • Link to : és la URL amb la qual ha d’enllaçar la imatge. Hi ha quatre opcions:
      • Custom URL : podem indicar una URL, dins o fora del nostre blog.
      • Media File : les imatges poden inserir-se en la seva mida original o més petites. Si les hem inserit en una mida reduïda i volem que els navegants puguin veure la imatge amb la seva mida original, llavors utilitzarem aquesta opció, ja que la imatge queda emmagatzemada amb la seva mida real en un enllaç permanent del lloc web on tenim el blog.
      • Pàgina adjunta : si hem afegit una descripció a la imatge, en fer clic a sobre de la imatge, hi accedirem.
      • Cap : la imatge no enllaçarà amb cap recurs.
    • Mida : quan pengem una imatge, aquesta tindrà una mida que pot excedir l’espai disponible en la nostra entrada. És per això que l’aplicatiu realitza un redimensionament. En aquest cas ens pots oferir diverses mides que escollirem en funció de les nostres intencions de disseny. Segons de la grandària del fitxer penjat, les mides que ens pot arribar a oferir seran “miniatura”, “mitjana”, “gran” o “mida original”.
  5. Per finalitzar fem clic al botó “ Insert into post “.

La imatge ha quedat inserida. Si volem modificar algun dels paràmetres introduïts, haurem d’editarla (Vegeu l’entrada “ Edició de les imatges inserides en les entrades del blog (amb WordPress) “).

Un cop les imatges ja han estat penjades en el servidor, les tindrem disponibles per inserir-les en qualsevol entrada del blog ja que estaran emmagatzemades a la nostra mediateca.

Inserir una imatge del web

Si la imatge que volem penjar està en una ubicació fora del nostre lloc web, seguirem el procediment següent:

  1. Situem el cursor allà on ha de visualitzar-se la imatge i fem clic al botó “Afegeix un mèdia” que trobem a sobre de les barres d’eines de l’editor.

    Icona Afegeix un mèdia

  2. En la pantalla que apareixerà a continuació, fem clic a l’opció “ Insert from URL “.
  3. Un formulari ens permetrà establir els paràmetres de la imatge:
    • URL de la imatge (adreça completa de la imatge que es troba en un altre servidor d’Internet).
    • Llegenda : text que apareixerà al peu de la imatge.
    • Alt text : text alternatiu que es llegirà si la imatge no està disponible i que serà utilitzat pels lectors de pantalla.
    • Alineació : posició de la imatge respecte del text (esquerra, centrat, dreta, cap).
    • Link to : crearà l’enllaç al recurs que indiquem (l’adreça URL on està la imatge, una URL diferent a la que conté la imatge i que pot apuntar a qualsevol altre recurs d’Internet o, finalment, cap).

Incrustrar videos de Youtube en les entrades del blog (amb WorPress.com)

Actualment, WordPress.com permet incrustar vídeos des del següents serveis: Youtube , Vimeo , Hulu , Flickr , DailyMotion , Viddler , Blip.tv , TEDTalks , Educreations i Videolog .

Expliquem com introduir un vídeo allotjat a Youtube en una entrada del blog.

La manera més ràpida d’integrar el video consisteix a copiar la URL del vídeo que és la que es mostra en la barra d’adreces del navegador mentre estem visualitzant el video, en la posició de l’entrada on volem que es visualitzi (des de l’editor de text), WordPress.com s’encarrega de fer que es visualitzi el vídeo.

Una altra manera de fer aquesta inserció consisteix a utilitzar el que WordPress anomena shortcode (codi abreujat). Aquest shortcode és un codi específic de WordPress que permet personalitzar algunes opcions d’una manera no gaire complicada.

El format d’aquest shortcode és el següent:

[ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ ]

On el que apareix darrere del signe d’igual és la referència al vídeo que apareix en la URL.

A partir d’aquest codi base podem personalitzar diverses opcions:

  • Canviar l’amplada i l’alçada del vídeo:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385 ]
  • Deshabilitar els vídeos relacionats que apareixen quan el vídeo s’ha reproduït completament:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385&rel=0 ]
  • Per començar en vídeo en un moment concret, especificant, en segons, el punt concret on cal que comenci:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385&rel=0&start=70 ]
  • Per especificar on ha d’acabar-se la visualització del vídeo:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385&rel=0&start=70&end=90 ]

Què són Shortcodes de WordPress.com?

Un shortcode és un codi específic de WordPress que permet inserir codi complex seguint unes directrius marcades per l’aplicació de tal manera que, escrivint molt poc codi, aconseguim que es realitzin accions que d’altra manera exigirien molts línies de codi.

Aquests shortcodes ens permeten inscrustar i personalitzar diversos objectes:

Vídeo

  • [ blip.tv] inscrusta vídeos de Blip.tv
  • [ cnnmoney-video] inscrusta vídeos de CNNMoney
  • [ dailymotion] inscrusta vídeos de DailyMotion
  • [ flickr] inscrusta vídeos de Flickr
  • [ ted] inscrusta vídeos de TED Talks
  • [ vimeo] inscrusta vídeos de Vimeo
  • [ wpvideo] inscrusta vídeos de VideoPress
  • [ youtube] inscrusta vídeos de YouTube
  • [ hulu] inscrusta vídeos de Hulu

Àudio

  • [ audio] mostra els arxius d’àudio penjats al servidor com a reproductors d’àudio
  • [ playlist] mostra una llista de reproducció dels àudios penjats
  • [ soundcloud] incrusta àudio de SoundCloud
  • [ rdio] incrusta música de Rdio
  • [ spotify] incrusta música de Spotify
  • [ bandcamp] incrusta música de Bandcamp
  • [ 8tracks] incrusta música de 8tracks

Imatges i documents

  • [ gallery] insereix una galeria d’imatges en una entrada o en una pàgina
  • [ instagram] insereix una imatges d’Instagram
  • [ scribd] incrusta un document/arxiu d’Scribd
  • [ slideshare] incrusta una presentació de Slideshare.net
  • [ slideshow] incrusta una presentació de fotos penjades en el servidor
  • [ googleapps] incrusta un document de Google Docs
  • [ office] incrusta un document d’Excel document de Microsoft Office Live

En l’entrada “ Incrustrar videos de Youtube en les entrades del blog (amb WorPress) ” expliquem la manera d’utilitzar els shortcodes relacionats amb aquest servei. Tota la informació sobre la manera d’aplicar els shortcodes la trobem a la pàgina d’ajudes de WordPress:
http://en.support.wordpress.com/shortcode (en anglès).

Crear enllaços en les entrades d’un blog (amb WordPress.com)

Els enllaços són elements que apunten cap a altres recursos web. Aquests recursos poden estar dins del mateix lloc web que conté l’enllaç o fora d’ell. Els enllaços són activats pels usuaris d’un lloc quan fan clic en un element (text, imatge…) que es coneix amb el nom d’àncora.

Per introduir un enllaç seguim el procediment següent:

  1. Seleccionem el text que ha de servir d’àncora.
  2. Fem clic en la icona  “Insereix / Edita un enllaç ” Icona Insereix / Edita un enllaç
  3. En la finestra emergent escrivim:
    • La URL de l’enllaç que ha d’incloure http://
    • El títol (opcional): aquest títol permet afegir informació addicional. Els navegadors mostraran un indicador que els visitants podran llegir quan passin el cursor del ratolí sobre l’enllaç.
    • Obre l’enllaç en una finestra nova : si marquem la casella de verificació el recurs s’obrirà en una finestra o pestanya nova del navegador.
    • O enllaça a un contingut existent : si fem clic en aquest enllaç es despleguen les opcions que ens permeten cercar, o seleccionar d’un llistat, les entrades o pàgines dins del nostre blog a les quals podem enllaçar.
  4. Per finalitzar, fem clic al botó “Afegeix un enllaç”.

[youtube=http://www.youtube.com/watch?v=rbQWsz4IMto&rel=0]

Introducció i formatació de les entrades des de l’editor “de text” (amb WordPress.com)

A més de l’editor visual, disposem d’un editor de text amb menys opcions, però que ens permet escriure les entrades directament en llenguatge HTML. Aquest editor serà l’utilitzat per persones amb coneixement d’aquest llenguatge.

El llenguatge HTML és un llenguatge de marques que descriu el contingut dels documents del web perquè sigui interpretat pel navegador. Aquest llenguatge utilitza etiquetes que marquen els diversos elements d’un document web. Així el text d’un paràgraf serà marcat amb l’etiqueta <p> al principi i </p> al final.

<p>Aquest seria el paràgraf marcat per les 
etiquetes d'obertura i tancament.</p>

WordPress ens permet utilitzar les etiquetes següents:

address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var

Per saber quin és el valor d’aquestes etiquetes recomanem la consulta d’aquest recurs: http://dochub.io/#html

En accedir a l’editor de text, la barra d’eines ens ajudarà a inserir algunes de les etiquetes més habituals del llenguatge HTML.

Editor de text

b : insereix l’etiqueta <strong> que enfasitza el text i que el navegador representa visualment en negreta. Exemple:

<strong>Text emfasitzat. Visualment 
representat en negreta</strong>.

El resultat visual del codi anterior seria: Text emfasitzat. Visualment representat en negreta .

i : insereix l’etiqueta <em> que enfasitza el text i que el navegador representa visualment en cursiva. Exemple:

<em>Text emfasitzat. Visualment 
representat en cursiva</em>.

El resultat visual del codi anterior seria: Text emfasitzat. Visualment representat en cursiva .

link : insereix l’enllaç al recurs web indicat amb l’etiqueta <a> i el seu atribut “href”. Exemple:

<a href="canaldebits.wordpress.com">Canal de Bits</a>

b-quote : insereix l’etiqueta <blockquote> que marca cites textuals d’un autor. Exemple:

<p>Salvador Espriu va dir:</p>
<blockquote>I com m’agradaria 
d’allunyar-me’n, nord enllà</blockquote>

El resultat visual del codi anterior, que variarà en funció del tema en què es basi el nostre blog, seria:

Salvador Espriu va dir:

I com m’agradaria d’allunyar-me’n, nord enllà

del : insereix l’etiqueta <del>, text ratllat, amb l’atribut  “datetime” que contindrà informació sobre el dia i l’hora en què s’ha produït la rectificació del text. Exemple:

<p>El dia 14 de juny de 2012
<del datetime="2013-05-20T10:33:31+00:00">, és 
a dir avui, </del> tindrà lloc la 
inauguració del nou local de l'associació.</p>

El resultat visual serà el següent: El dia 14 de juny de 2012 , és a dir avui , tindrà lloc la inauguració del nou local de l’associació.

ins :insereix l’etiqueta <ins>, text afegit, amb l’atribut “datetime” que contindrà informació sobre el dia i l’hora en què s’ha produït la seva introducció. Exemple:

<p>El dia 14 de juny de 2012
<ins datetime="2013-05-20T10:33:31+00:00">, dijous,</ins>
tindrà lloc la inauguració del nou local 
de l'associació.</p>

img : insereix l’etiqueta <img> que indicarà al navegador que ha de presentar en la finestra la imatge referenciada en l’atribut “src”. Dues finestres emergents ens demanaran la URL de la imatge (atribut “src”) i el text alternatiu (atribut “alt”). Exemple:

<img src="http://canaldebits.files.fotoescola" 
alt="Fotografia del patí d'una escola on es 
veu tres nenes jugant a la pilota" />

ul / ol / li : aquests tres botons ens permeten introduir llistes. El llenguatge HTML té dos tipus bàsics de llistes: les llistes no ordenades (amb pics) i les llistes ordenades (amb nombres). Per introduir una llista no ordenada, utilitzem l’etiqueta <ul>, les llistes ordenades es marquen amb <ol>, i cada element de la llista, indistintament en les llistes no ordenades i en les ordenades es marca amb l’etiqueta <li>. Exemple:

<ul>
   <li>primer element de la llista,</li>
   <li>segon element de la llista.</li>
</ul>

El resultat visual del codi anterior seria:

  • primer element de la llista,
  • segon element de la llista.
<ol>
   <li>primer element de la llista,</li>
   <li>segon element de la llista.</li>
</ol>

El resultat visual del codi anterior seria:

  1. primer element de la llista,
  2. segon element de la llista.

code : amb aquest botó podrem representar un fragment de codi informàtic. Per defecte, és mostrat pel navegador amb un tipus de font monoespaiada. Exemple:

<code>var a = new String( "0123")</code>

El resultat visual del codi anterior seria:

var a = new String( "0123")

more : si l’entrada és molt llarga, afegirem aquest comentari <!–more –> que farà que el text quedi tallat en la posició on l’haurem inserit quan l’entrada es mostri a la pàgina d’inici. Els lectors del blog trobaran un enllaç que els permetrà accedir a l’entrada completa.  El text per defecte serà el de l’idioma del nostre blog; així en català el text que es llegeix en aquesta posició és “Llegeix més…”. Aquest text pot personalitzar-se afegint al comentari el text que ens interessi. Per exemple

<!--more Llegiu-ne l'entrada completa... -->

El text que veurem serà “Llegiu-ne l’entrada completa…”.

Si enganxem codi des d’una font externa (Youtube, Instagram, Twitter…) o quan ens calgui utilitzar codi abreujat, en anglès, shortcode , també utilitzarem l’editor de text en comptes de l’editor visual.

A l’entrada “ Què són Shortcodes ?”  trobareu més informació sobre aquest tipus especial de codi que WordPress.com permet utilitzar en les nostres entrades.

Introducció i formatació de les entrades des de l’editor “Visual” (amb WordPress.com) (i 2)

En una entrada anterior explicàvem les opcions de formatació que ens oferia la primera barra d’eines de l’editor Visual. En aquesta entrada explicarem les opcions de la segona barra que activem en clicar a la icona per mostrar o amagar la segona barra d’eines de l’editor visual.

Icona Mostra / Amaga la segona barra de formatació ràpida Barra de formatació de l'editor visual

La funció de cadascuna de les icones és la següent:

Icona Etiquetatge del contingut textual

La primera de les icones, permet marcar el text segons la seva funció.

Per defecte, el text és marcat com a paràgraf . Quan premem la tecla “Intro”, automàticament introduïm un nou paràgraf (i tanquem l’anterior); a efectes visuals el resultat que obtenim és la separació entre els paràgrafs del text de l’article. Si el que volem és canviar de línia i no de paràgraf, en comptes de prémer la tecla “Intro”, premem la tecla de Majúscula, i sense deixar-la anar pitgem la tecla “Intro” (Majúscula + Intro).
Tenim, a més, les opcions següents:
Adreça : només marcarem amb aquest tipus de format els textos que ofereixin informació de contacte de l’autor o autors de l’entrada del blog. Aquesta informació pot ser un nom, una adreça electrònica, una adreça postal o un enllaç a una altra pàgina amb més informació de contacte. No farem servir aquest estil de format per marcar qualsevol altra adreça que aparegui a l’entrada.
Preformatat : si ens cal escriure un fragment de text on el format i els espais en blanc són importants, llavors marcarem el text amb aquest tipus de format. És un recurs que s’utilitza sovint per escriure, per exemple, fragments de codi de programació com ara aquest:

#contenidor {
      margin-left: 10px;
}

Si no haguéssim marcat aquest text com a preformatat, els espais en blanc que precedeixen a “margin-left” haurien estat ignorats.
Capçalera 1 , Capçalera 2 , Capçalera 3 … fins a Capçalera 6 : utilitzarem aquestes opcions del menú desplegable si cal descriure el document pel que fa a seccions i subseccions. Per exemple, si escrivim un article on hi ha un subítol el marcarem com a Capçalera 2 , si dins d’aquest apartat hi ha una altra secció la podem marcar com a Capçalera 3 i així successivament. No utilitzarem mai l’opció Capçalera 1 ja que el títol de l’entrada és marcat per defecte amb aquest nivell. Només utilitzarem les “capçaleres” si l’entrada té aquesta complexitat; la seva utilització, si escau,  és important per fer que el text sigui més comprensible per als lectors de pantalla i per als robots d’indexació (com ara els de Google).

Icona Text subratllat Subratlla text.

Icona Justifica text Justifica els paràgrafs seleccionats per tal que quedin alineats al marge esquerre i també al dret.

Icona Canvia el color del text Amb aquesta icona accedirem a l’opció de canviar el color del text seleccionat. Si fem clic a la punta de fletxa, s’obre una paleta de colors, on podrem escollir el color desitjat

Icona Enganxa com a text pla Si enganxem text des d’algun altre lloc, pot passar que no sempre aparegui amb el format que ens convé. Utilitzant l’opció “Enganxa com a text pla”, el processador de textos realitzarà una operació de neteja que eliminarà el format especial que haurem importat en copiar el text. Un cop hem fet clic en aquesta icona apareix una finestra on podrem enganxar el text (Ctrl+V), si marquem/desmarquem la casella “Manté la separació de línies”, a la part superior dreta d’aquesta finestra podrem conservar, o no conservar, els canvis de línia originals del text que enganxem.

Icona Enganxa des del Word Si enganxem text des del processador de textos Word, és preferible utilitzar l’opció “Enganxa des del Word” que deslliurarà el text d’una quantitat important d’instruccions de format que podrien interferir amb les opcions gràfiques del text de la plantilla del nostre blog.

Icona Suprimeix el format La icona “Suprimeix el format” permetrà eliminar el format (negreta, cursiva, subratllat, colors…) del text que prèviament seleccionem.

Icona Insereix un caràcter especial A més dels caràcters que podem inserir directament des del teclat, podem també inserir, en la posició on es trobi el punt d’inserció, caràcters especials que seleccionarem de la finestra emergent que s’obrirà en fer clic a aquesta icona.

Icona Treu / Afegeix sagnia als textos Amb les icones per treure (la primera) o afegir (la segona) sagnia, podrem gestionar les sagnies per l’esquerra dels paràgrafs seleccionats; és a dir, podrem separar del marge esquerre les línies dels paràgrafs seleccionats.

Icona Desfés / Refés una acció Aquestes dues icones ens permet refer o desfer, respectivament, una acció.

Icona Ajuda Aquesta última icona de la barra d’eina de formatació de l’editor visual ens permet accedir a les ajudes de WordPress sobre l’edició de textos.

Introducció i formatació de les entrades des de l’editor “Visual” (amb WordPress.com) (1)

Una entrada constarà d’un títol i d’un text que podrà incloure també enllaços, imatges, vídeos…

Per introduir-la accedirem a l’opció “Afegeix” de l’apartat “Entrades” del panell de l’Administrador. A l’àrea de treball disposarem d’un formulari amb dos camps: el primer ens permetrà escriure el títol i el segon, que compta amb una barra d’edició, l’utilitzarem per escriure la nostra entrada.

En escriure les nostres entrades podrem treballar de la mateixa manera que ho fem amb un processador de textos. Així un cop escrit el text, podrem formatar-lo.

La barra d’eines de formatació ràpida presenta aquestes icones bàsiques:

Barra de formatació de l'editor visual

La funció de cadascuna de les icones és la següent:

Icona Text en negreta Marca el text en negreta.

Icona Text en cursiva Marca el text en cursiva.

Icona Ratlla un text Ratlla el text.

Icona Llista amb pics Per crear una llista amb pics.

Icona Llista numerada Per crear una llista numerada.

Icona Citació de text Per marcar el text d’un altre autor que és citat; es mostrarà sagnat.

Icona Alineació de paràgrafs: esquerra, centre, dreta Per alinear els paràgrafs a l’esquerra, al centre o a la dreta.

Icona Marcar / Eliminar enllaços a altres recursos web Per marcar/eliminar els enllaços a un altre recurs web.

Icona Afegir enllaç al text complet de l'entrada Si l’entrada és molt llarga, clicarem aquesta icona per afegir l’etiqueta més. En la pàgina d’inici del bloc, l’entrada no es llegirà completa. El text quedarà tallat en la posició on l’haurem inserida. Els lectors trobaran un enllaç que els permetrà accedir a l’entrada completa. El text d’enllaça per defecte pot ser personalitzat utilitzant l’editor de text.

Icona Activació del corrector ortogràfic, gramatical i d'estil Utilitzarem aquesta icona per corregir textos. Els errors ortogràfics es marquen en vermell, els gramaticals en verd i els suggeriments d’estil en blau. El corrector de WordPress.com està habilitat per als idiomes següents: anglès, francès, alemany, portuguès i espanyol. L’idioma que el corrector utilitzarà per defecte és el que tinguem indicat als nostres ajustaments personals.
(Per accedir als ajustaments personals, cliquem a l’opció “Ajustaments personals”, Personal Settings en anglès, de l’apartat “Usuaris” del tauler de l’administrador. És també des d’aquest espai des d’on podrem indicar que el gestor detecti automàticament l’idioma per corregir els textos de les entrades i de les pàgines; i que ignori frases o paraules durant aquest procés de correcció).

Icona Accés al mode de pantalla completa Mentre escrivim l’entrada podem fer desaparèixer tots els elements que no siguin estrictament el formulari d’introducció de text. S’amagaran els elements de l’esquerra i de la dreta. A la part superior de l’àrea de treball de la finestra del navegador, apareixerà una barra amb les eines bàsiques d’edició de textos, un enllaç que ens permetrà sortir del mode d’escriptura a pantalla completa i un botó per desar l’esborrany de l’entrada.

Icona Mostra / Amaga la segona barra de formatació ràpida L’última icona d’aquesta barra permet obrir (o tancar) una segona barra de formatació les opcions de la qual tractarem en una propera entrada en aquest mateix blog.

Barra de formatació de l'editor visual

Accedeix a l’entrada “ Introducció i formatació de les entrades des de l’editor “Visual” (amb WordPress) (i 2) ” per conèixer les opcions aquesta segona barra d’eines

Enllaços curts de les entrades d’un blog (a wordpress.com)

Si volem compartir una URL (en un correu electrònic, en un missatge a Twitter…) podem fer-ho escrivint tota l’adreça o bé, normalment si l’adreça és molt llarga, podem utilitzar un servei escurçador d’enllaços.

Entre els serveis més populars podem esmentar:

El funcionament de tots ells és similar: cal enganxar en un camp de formulari la URL que volem escurçar i clicar al botó d’enviar per obtenir l’adreça curta a compartir.

WordPress ens permet obtenir aquesta adreça curta en la pantalla d’edició de l’entrada, clicant al botó “Obté l’enllaç curt” que hi ha al costat de l’enllaç permanent.

Enllaços permanents a les entrades d’un blog (a wordpress.com)

L’ enllaç permanent , en anglès permanent link (Permalink), és la URL que porta a una entrada (o a una pàgina) del blog. Per defecte, l’estructura d’aquesta entrada és la següent:

http://exemple.wordpress.com/?p=14

Quan publiquem l’entrada l’estructura canvia, i passa a tenir la següent:

http://exemple.wordpress.com/aaaa/nn/dd/titol-de-lentrada

Durant l’edició de l’entrada, aquest enllaç es mostra sota el títol. Si el volem canviar, podem fer-ho, clicant al botó “Edita” que apareix al costat de l’enllaç; fem el canvi i, per finalitzar, cliquem al botó “D’acord”. Cal saber que l’estructura d’aquesta URL té més opcions de personalització, però només les podem utilitzar si tenim el blog de WordPress instal·lat en servidor propi. En aquest cas les opcions per canviar-la es troben a l’opció “Enllaços permanents” del menú “Paràmetres” del tauler de l’administrador.