[Day 835] [Tutorial] Formattazione Articoli

Day 835, 09:29 • Published in Italy Italy • by Gaston Richards
http://i48.tinypic.com/j0eglh.jpg" width="500px" height="200px">



1.0 FORMATTAZIONE TESTO

Iniziamo questa guida con la formattazione di base, la fomattazione classica prevede tre modifiche di base al testo, che sono:

Il corsivo che utilizza la tag http://i49.tinypic.com/59yjhl.jpg" width="50 px" height="25 px">

Il grassetto che utlizza la tag http://i49.tinypic.com/72u99c.jpg" width="50 px" height="25 px">

E il testo sottolineato che utilizza la tag http://i50.tinypic.com/iputmb.jpg" width="50 px" height="25 px">

Questa è la formattazione classica, che è già presente tra le opzioni fornite dall'editor del giornale.
Ma Erepublik è comunque composto da codici, questi codici, in Html possono essere riutilizzati per abbellire la vostra produzione. In particolare è possibile riutilizzare alcuni "stili" che Erepublik riconosce come predefiniti. Un esempio!?

In Html, la tag "strong" viene utilizzata per evidenziare un determinato tipo di testo, è un'alternativa valida al "grassetto", ma può essere integrata dai vari stili riconosciuti da Erepublik.
Andiamo a vedere qual'è il principio per cui è possibile riutilizzare queste stringhe di codice.





STRONG

La stringa di codice che ci permette di usare questa tag è:

http://i47.tinypic.com/2cmnos8.jpg" width="300 px" height="25 px" align="top">

Il testo da evidenziare va in mezzo alle due tag, è importante la chiusura, perchè altrimenti il testo non viene evidenziato.

Il risultato!? Eccolo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Perfetto, ma come possiamo applicare un diverso stile a questa tag?

Semplice, riutilizziamo una stringa di codice che è possibile reperire nel codice sorgente delle pagine di Erepublik: ad esempio, se noi vogliamo utilizzare lo sfondo classico che troviamo nella pagina di addestramento, quello in cui è inserito il consiglio di Lana, andiamo a ricercare nella pagina sorgente del training quel determinato consiglio e preleviamo la parte di codice denominata "class". In questo caso il class è definito "lana_tip".
Andiamo quindi a inserirlo in questa maniera nella Tag strong:

http://i47.tinypic.com/3328k6h.jpg" width="300 px" height="25 px" align="top">

Ed otteniamo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Facile no!? Stesso discorso per il tipo di stile "informer", prendiamo la stringa di codice "informer" e la inseriamo così nella tag strong:

http://i48.tinypic.com/2870u9i.jpg" width="300 px" height="25 px" align="top">

Ed Otteniamo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit

E così via, adesso che vi ho spiegato in breve come ottenere gli stili predefiniti di Erep, provate a trovarne voi di nuovi, e se volete preparare una recensione sugli stili che troverete di volta in volta, sarò felice di aggiungerla al tutorial, con relativi crediti all'autore. Io ne ho già trovate altre, che lascerò provare a voi: "hero tooltip" (grazie a William Sack), "attacker", "defender" e così via..




2.0 FORMATTAZIONE IMMAGINE

Per l'inserimento delle immagini, è possibile utilizzare due differenti tag, la prima, quella fornita dall'editor di articoli è (img) con relativa chiusura (naturalmente con le parentesi quadre), che però permette un limitato, per non dire nullo, controllo sulle dimensioni e sul posizionamento delle immagini.

La seconda, invece, è più complessa e consente un controllo maggiore sulle dimensioni e sul posizionamento in layout dell'immagine.

Questa è il tag: http://i46.tinypic.com/jkanoy.jpg" width="300 px" height="25 px" align="middle">

Naturalmente, la tag scritta semplicemente così non è differente da quella scritta nell'altra maniera, però in questo caso abbiamo degli alleati preziosi.

La funzione width, che permette di controllare la lunghezza effettiva dell'immagine postata, naturalmente le migliori come qualità sono le immagini postate con la loro lunghezza originale. Un esempio..

http://i50.tinypic.com/1embvb.jpg" width="300 px" height="25 px" align="middle">

se io inserisco width="300px" per un'immagine di 300 pixels otterrò l'immagine a lunghezza naturale, ma se inserisco width="150 px" otterrò l'immagine con la lunghezza dimezzata..

400 px http://i47.tinypic.com/ay54pu.jpg" width="400 px" height="25 px" align="top">

300 px http://i47.tinypic.com/ay54pu.jpg" width="300 px" height="25 px" align="top">

150 px http://i47.tinypic.com/ay54pu.jpg" width="150 px" height="25 px" align="top">


Nota: l'immagine può essere ridimensionata al massimo a 400 px, come suggerito da amdx





height

La funzione height, che permette di controllare l'altezza effettiva dell'immagine postata, è una stretta parente della funzione presentata prima e va inserita come l'altra. Un esempio..

http://i50.tinypic.com/i5c804.jpg" width="400 px" height="25 px" align="middle">

se io inserisco height="25 px" per un'immagine di 25 pixels otterrò l'immagine ad altezza naturale, ma se inserisco height="50 px" otterrò l'immagine con l'altezza raddoppiata..

10 px http://i45.tinypic.com/x38yux.jpg" width="300 px" height="10 px" align="top">

25 px http://i45.tinypic.com/x38yux.jpg" width="300 px" height="25 px" align="top">

50 px http://i45.tinypic.com/x38yux.jpg" width="300 px" height="50 px" align="top">



align


La funzione align è quella che ci permette di rendere la lettura e la composizione dei nostri articoli il più scorrevole possibile, se dobbiamo infatti inserire immagini di dimensioni non troppo elevate e vogliamo far sì che siano circondate dal testo, questa funzione è la nostra migliore arma.

http://i48.tinypic.com/2411mic.jpg" width="500 px" height="25 px" align="middle">

La funzione align ha più di un output possibile:

1 - bottom l'immagine si allinea con il limite inferiore del testo

http://i48.tinypic.com/25r2tcx.jpg" width="50 px" height="50 px" align="bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit



2 - left l'immagine si pone alla sinistra del testo

http://i48.tinypic.com/25r2tcx.jpg" width="50 px" height="50 px" align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit



3 - middle l'immagine si pone a metà tra il limite inferiore e il limite superiore del testo

http://i48.tinypic.com/25r2tcx.jpg" width="50 px" height="50 px" align="middle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit



4 - right l'immagine si pone a destra rispetto al testo

http://i48.tinypic.com/25r2tcx.jpg" width="50 px" height="50 px" align="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit



5 - top l'immagine si allinea con il limite superiore del testo.

http://i48.tinypic.com/25r2tcx.jpg" width="50 px" height="50 px" align="top"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Ognuna di queste funzioni ci permette di gestire le immagini dei nostri articoli come preferiamo, rendendo la lettura più gradevole per tutti.







3.0 FORMATTAZIONE LINK

Quando vogliamo inserire un link all'interno di un articolo è possibile che si voglia inserirlo in un'immagine o in una posrzione di testo, in entrambi i casi la procedura è simile e immediata.

Se il link vogliamo inserirlo in una porzione di testo, utilizziamo questa stringa di codice:

http://i49.tinypic.com/2liy8h1.jpg" width="500 px" height="25 px">

Se invece vogliamo inserirlo in un'immagine, utilizziamo questa stringa di codice:

http://i49.tinypic.com/2ywa9a8.jpg" width="500 px" height="25 px">

Come vedete il codice resta sempre lo stesso, cambia solamente quello che inseriamo all'interno della Tag. Naturalmente nel caso dell'immagine possiamo inserire tutte le estensioni che abbiamo visto prima, come "width", "height" e "align".

Anche nel caso dei link è possibile riutilizzare elementi che ci fornisce Erepublik, come ad esempio i bottoni per la sottoscrizione dei giornali, o quelli per il reindirizzamento verso guerre o altri articoli.



Esistono moltissimi stili anche in questo caso, ve ne mostrerò solo alcuni:


1 - "tourstart padded"

Con questo stile è possibile inserire un bottone di questo tipo

http://google.it">Bottone di Prova

Attraverso l'inserimento di questo codice:

http://i48.tinypic.com/r90vg2.jpg" width="500 px" height="25 px">

Come vedete è possibile perfino editare il testo contenuto all'interno del bottone di prova





2 - "registersmall"

Ecco il risultato di questo stile

http://google.it">Tutorial

Con relativo codice da utilizzare per ottenerlo:

http://i48.tinypic.com/2gt1zjn.jpg" width="500 px" height="25 px">






3 - "vround"

Volete ottenere questo bottone!?

http://google.it">Prova ora il tutorial!!

Ecco quale codice usare:

http://i50.tinypic.com/6t1lr8.jpg" width="500 px" height="25 px">





4 – Torna all'inizio

Volete un bottone che vi permetta alla fine dell'articolo di tornare in cima automaticamente!?

http://i46.tinypic.com/24q3e50.jpg" width="300 px" height="100 px">

Ecco quale codice usare:

http://i49.tinypic.com/21ajrwk.jpg" width="500 px" height="25 px">


E con questo possiamo concludere questa prima versione di un Tutorial che spero possa rivelarsi utile per molti, vi rinnovo l'invito a collaborare con me e a mandarmi altri stili da aggiungere al tutorial.

Arrivederci al prossimo articolo.