 | :: Tutorial per IoBloggo, JavaScript, Dhtml e affini | | | | | | | | | | | Visualizzatore di immagini | Ecco uno script interessante soprattutto per chi ha necessità di mostrare,
sul proprio blog, un tot di immagini (anteprime di template, foto, pixel art,
ecc) e non vuole fare una colonna lunghissima di preview. Qui trovate l'esempio. Partiamo dalla pagina html:
Questo invece è lo script in sé:
Iniziamo a studiarlo.
Uno: *deve* essere inserito uno style (interno
al tag head) con i dati del selettore input! Questo modifica la
grafica dei pulsanti che, nell'esempio, sono chiamati: precedente, play
- stop e successiva.
Due: il restante testo è settato o nel body o in td (se lo
script è interno ad una tabella).
Tre: nei tre tag input c'è l'opzione value: potete
modificarla (tipo mettere "prima" invece che "precedente" o
quello che volete); quello sarà il testo che compare sui pulsanti.
Quattro: nel resto modificate solo ciò che è *esterno* ai tag
(ad esempio "Descrizione:") ma NON toccate i comandi INTERNI ai vari
TAG!!
Cinque: passiamo allo script. Trovate questa frase: //configure the below images and description to your own.
Nell'elenco sottostante (di g_ImageTable[g_imax++] = new Array)
dovete:
- prima coppia di virgolette ("..."):
mettete l'url delle immagini che volete inserire (le immagini *possono*
essere di dimensioni differenti);
- seconda coppia di virgolette ("..."):
mettete il testo che comparirà a fianco della Descrizione.
Sei: dovete mettere tante frasi di cui sopra quante immagini volete
inserire. Se volete mettere quindici immagini ci dovranno essere quindici
di g_ImageTable[g_imax++] = new Array, ognuno con l'url della propria immagine
e la sua descrizione.
Sette: immediatamente sotto c'è la frase g_dwTimeOutSec=3
che indica i secondi che passano nella visualizzazione automatica
tra un'immagine e l'altra. Settatelo come più vi sembra adatto (io ho messo 3).
Fine ^^ Se avete domande, chiedete pure :) | | | | Sondaggio | Ho chiuso il sondaggio "Su cosa preferisci dei tutorial?" Risultati: Ora il nuovo sondaggio è "Su cosa preferisci gli script?"; votate =P almeno so cosa vorreste trovare su questo blog ^_- | | | | Drop Down Link con descrizione | Per questo ho fatto due differenti esempi:
- uno con lo style interno ai tag (qui);
- uno con lo style interno ai CSS (qui). Poiché la modifica dello script è identica per entrambi, inizio col
far vedere le due differenze grafiche. DropDown Menu con Descrizione
(style interno ai vari tag)
DropDown Menu con Descrizione
(style interno ai CSS)
Nel primo caso (style interno ai tag) bisogna segnare,
all'interno dei tag select, input e span le diverse
caratteristiche del font (font-family, font-size, color e tutto ciò che volete,
anche bold, italics, ecc), dello sfondo (background-color) e dei bordi (border). Nel secondo caso (style interno ai css) ho segnato,
nel tag style, dei selettori (select, input e #descriptions),
dando loro le caratteristiche che, nell'esempio precedente, erano interne ai
vari tag. Personalmente mi trovo meglio coi CSS ma mi rendo conto che
c'è, in effetti, una differenza; avete notato come, nel primo caso, il
bottoncino "visita" abbia il contorno mentre, se impostato coi CSS,
questo compaia solo quando si clicca il bottoncino stesso, mentre di norma non
c'è? Ecco, questa è la differenza. Ad ogni modo scegliete il metodo che vi è
più congeniale dato che questo è irrilevante ai fini del funzionamento dello
script. Lo script deve essere inserito nel tag body,
precisamente nel punto in cui volete che compaia questo form (le tabelle che ho
inserito nella pagina servono appunto a mostrare come questo compaia ovunque lo
si desideri). Come personalizzare lo script. I dati da modificare sono:
- i vari option value, dove vanno inseriti gli url (indirizzi) dei link e
il testo che deve comparire all'interno del form;
- per far aprire il link in una *nuova* pagina bisogna usare, sempre nel tag
"option value", il comando target="newwin" (che
corrisponde al target="_blank" dell'html);
- in corrispondenza agli option value bisogna modificare, nello script,
i textdisplay, che poi è il testo che compare *sotto* il form; sono
ordinati da [0] a [N] (dove N indica il numero di link che avete inserito). Il resto va lasciato come è. Il funzionamento di questo script è molto semplice, più che
altro può essere noioso da settare se si hanno davvero MOLTI link ma, per
contro, evitereste una colonna lunghissima di testo, riducendola notevolmente ^^ Al solito non sono stata molto approfondita nella spiegazione
e di certo avrò dato per scontato che si capisse ogni cosa; se così non fosse
non esitate a lasciare un commento e a chiedere delucidazioni ^_^ | | | | Link ToolTip | Questa è la pagina di esempio e sotto trovate il codice HTML:
Il codice per ottenere quel risultato (completamente personalizzabile, come
vedremo poi) è suddiviso in tre parti. Prima parte da inserire nel tag head (dopo title) Seconda parte da inserire nel tag body (subito dopo l'apertura del tag) Terza parte da inserire nel tag link (in ogni link in cui volete presente il tooltip) Adesso vediamo, punto per punto, dove effettuare eventuali personalizzazioni. Prima parte.
E' un normalissimo CSS, quindi completamente configurabile a proprio piacimento
^^
- position: lasciatelo come è;
- font-family: mettete il tipo di carattere;
- font-size: grandezza del carattere in pixel;
- color: colore del carattere;
- font-weight: scegliete tra bold, normale, sottile, ecc;
- width: larghezza, in pixel, della tabella tooltip;
- border: spessore tipo e colore di bordo;
- padding: distanza (interna) tra il testo e il bordo della tabella;
- background-color: colore di sfondo;
- visibility: lasciate come è;
- z-index: lasciate come è;
- filter: se lo lasciate compare quell'effetto "ombra", di cui potete modificare il colore (color) e la
direzione (direction) - giocate coi parametri ^_-
Importante! Come vedremo poi, si può modificare la larghezza e lo sfondo
della tabella *anche* nei vari link, magari per dare maggiore risalto a qualcuno
in particolare ma se invece volete un effetto omogeneo, QUESTI parametri saranno
quelli che si ripeteranno per ogni tooltip, quindi sceglieteli bene ^_- Seconda parte
Lasciate tutto esattamente come è. Terza parte
La terza parte è quella che va aggiunta al tag <a href="....>
(guardare la pagina HMTL d'esempio).
Le personalizzazioni sono:
- 'Testo del tooltip' (nell'esempio: 'Esh Blog - il mio blog personale') - ci va il testo che volete far
comparire. IMPORTANTISSIMO! Se ci sono apici (') all'interno del testo, dovete mettere un backslash davanti!!! (esempio:
'Maria\'s Blog');
- all'interno della seconda coppia di apici (') potete mettere un colore di sfondo alternativo rispetto a quello
impostato di standard (nell'esempio: '#FFFFDD');
- l'ultimo dato, separato da una virgola e che non ho inserito, è la possibile larghezza alternativa della
tabella, da non indicare con px! (nell'esempio: 300 e NON 300px) | | | | Promo 1 | Questa nuova categoria nasce con due obiettivi:
1) fare da promemoria a me per quello che devo fare (elencando le richieste non evase)
2) dare la possibilità a voi di avere una categoria in cui lasciare commenti con le richieste. Da fare:
- finestra di alert con scritta su più righe;
- tabella personalizzabile a passaggio sui link ("alt") Se mi sono dimenticata qualche richiesta... rinfrescatemi la memoria ^^" | | | | Statusbar inferiore | Ci sono diversi tipi di modi in cui si può personalizzare, con una scritta,
la barra inferiore di status del browser. Io qui ne proporrò tre, che sono:
- scritta fissa;
- scritta che compare al passaggio del mouse su un link (ma si può fare
anche su immagini e altro se si accoda il codice);
- scritta lampeggiante. Scritta fissa L'esempio è qui. Questo l'html della pagina: Per far comparire la scritta basta copiare e incollare il JavaScript subito dopo il tag body e
ovviamente, personalizzarlo (c'è solo una riga di codice, credo non necessiti di spiegazioni ^_- La solita
raccomandazione è: non cancellate quello che DEVE rimanere, in questo caso le virgolette => ")
Scritta che compare al passaggio del mouse su un link (e non solo) L'esempio lo trovate qui. Ecco il codice html della pagina: 1) il codice JS va sempre inserito dopo il tag body, in questo caso va anzi messo
all'interno del tag link (ma funziona anche con il tag img);
2) la personalizzazione avviene nel comando onMouseOver, dove dovete mettere il vostro testo al posto di
quello che vedete comparire nella barra inferiore di status (mi raccomando, lasciate gli apici!). Scritta lampeggiante L'esempio lo trovate qui. Ecco il codice html della pagina: 1) non cancellate i credits dell'autore!
2) dopo var yourwords dovete inserire il testo che volete veder lampeggiare (non cancellate le virgolette => ")
3) var speed riguarda la velocità di lampeggiamento; più il valore è elevato, più lampeggia lentamente; più il
valore è basso, più lampeggia velocemente (vi sconsiglio di farlo lampeggiare troppo velocemente; non si leggerebbe
nulla di ciò che c'è scritto e sarebbe fastidioso). | | | | No ImageToolbar | L'imagetoolbar è quella opzione che fa sì che compaiano delle iconcine
sulle immagini, per facilitarne il salvataggio, la stampa o l'invio tramite
e-mail.
C'è ovviamente il modo di aggirare questa possibilità.
Per l'esempio andate qui: come vedrete, anche passandoci sopra col mouse non
compariranno quelle icone (NB: non ho inserito all'interno della pagina la
possibilità di *non* salvare le immagini! Questo esempio serve solo per
togliere le suddette icone e va affiancato per forza ad uno script se si vuole
rendere complicata la vita ai "ladri" di immagini). Farlo è semplicissimo; ecco l'html della pagina. Il comando è dato dal meta tag "imagetoolbar"
con opzione content="no". Se volete
dunque disabilitare quella funzionalità, basta che lo copiate e lo incolliate
(subito dopo il tag html e subito prima del tag title). | | | | Login, sondaggi, aggregator, ecc | Molte delle opzioni fornite da IoBloggo (sondaggi, login, aggregators, calendario) sono inserite nelle tabelle e questo può portare dei problemi per settarne il carattere (colore, grandezza, ecc). Il metodo più facile è, all'interno del tag style, inserire:
TD { font-family: tipo di carattere; font-size: grandezza in pixel del carattere; }
TD { font-family: Verdana, Arial; font-size: 10px; } Se per caso ci fossero però più tabelle all'interno del vostro layout e queste necessitassero di un diverso settaggio, Anija ha creato un id (il cancelletto "#" è obbligatorio) a parte.
#tabellaiobloggo { font-family: tipo di carattere; font-size: grandezza in pixel del carattere; }
#tabellaiobloggo {font-family: Verdana, Arial; font-size: 10px; } | | | | Scrollbar trasparenti | Per l'esempio visivo di questo tutorial, andate qui. Per avere la scrollbar trasparente è necessario o utilizzare i colori ad hoc
oppure usare il filtro "chroma". Innanzitutto c'è da dire che i dati impostati per la scrollbar nel selettore
body sono sì ereditari (quindi i div e non solo la pagina stessa li
utilizzeranno) ma non sono "fissi", nel senso che nel selettore div
(o in eventuali classi) è possibile impostare di volta in volta dei dati
differenti. Vediamo l'html della pagina che ho fatto. Per le prime due classi di div, cioè .div1 e .div2
ho impostato un colore di sfondo (diverso per entrambi) e ho reinserito i dati
della scrollbar, che così appare completamente "fusa" con il div
stesso. Per il terzo div, cioè .div3, ho invece utilizzato filter: chroma(color=#87A2D3) allowTransparency;
dove #87A2D3 è il colore scelto per il face, per l'highlight,
per il darkshadow e per il track nel settaggio iniziale (quello
del selettore body) della scrollbar, ottenendo così l'effetto
trasparente. Le differenze tra le due possibilità sono visibili: nel
primo caso la scrollbar appare interna al div, nel secondo caso è invece
esterna. Non è possibile rendere trasparente la barra di scorrimento
della pagina, dato che il selettore body non interpreta il filtro chroma
e non è nemmeno possibile contenerlo in un div. Nel caso in cui un div abbia come sfondo una immagine
e si voglia che la scrollbar sia trasparente, è sufficiente dare un qualsiasi
colore (strano, che si abbia la certezza che non venga utilizzato*) tanto al chroma
quanto agli attributi su cui deve agire per apparire trasparente ^^
* esempio: se lo sfondo è nero basterà cercare un colore vicinissimo al nero
(ma non nero stesso!), tipo #141414. Ovviamente questo esempio è "sterile", nel senso
che si può rendere totalmente trasparente una scrollbar oppure lasciare solo la
freccina o ancora avere solo parte del suo perimetro. Per questo basta che
giochiate un po' con i dati ^__^ | | | | CSS: Alpha | Con il comando (di stile) filter: Alpha(opacity=NN); (dove NN corrisponde ad un numero di al massimo due cifre) si ottiene un effetto opaco di un dato elemento della pagina. Questa è la "tabella base" che useremo per l'esempio
Il problema principale, sollevato da demiurgo77, è che anche i contenuti di questo elemento (quali il testo e le immagini) risultano opachi.
Ho fatto diverse prove e, nel dubbio di essermi persa qualcosa, ho anche controllato su internet, ma pare non ci sia una soluzione diretta a questo problema. Ho provato allora ad aggirarlo. La prima soluzione, un po' "banalotta", è quella di dare un colore di sfondo alla tabella che sembri opaco.
Tenedo presente la tabella di cui sopra, ho agito così.
Sono quindi partita da un colore a caso (blu - #0000FF) ed, in una pagina di prova, lo ho inserito come colore di sfondo alla tabella, a cui ho poi dato opacity pari a 50.
Ho fatto il print-screen (in alcune tastiere, stamp), ho aperto Photoshop, ho selezionato "nuovo file" (la cui dimensione sarà pari alla risoluzione del vostro schermo), ho fatto "incolla" e ho successivamente tagliato una porzione della tabella colorata, ho rifatto "nuovo file - incolla" e ho chiuso (senza salvare), il file "senza_nome_1" (quello corrispondente al vostro schermo).
Quindi, con un solo file aperto (la porzione colorata di tabella) l'ho ingrandita al massimo, guardando di quanti colori fossero i pixel. Primo problema: sono di due colori.
Con lo strumento contagocce ho selezionato il colore più chiaro ma dato che da solo mi sembrava comunque troppo forte per dare la sensazione di opaticità, ho selezionato una sfumatura un po' più chiara (#9A94FB) e il risultato è questo:
il testo, ovviamente, si vede come sempre |
Conviene comunque fare diverse prove di colore; io ho scelto il primo che mi sembrava potesse andare ^_- La seconda soluzione è un pochettino più "complicata" (cioè, non lo è per niente, ma magari per chi non ha assolutamente mai usato dei programmi di grafica, potrebbe apparire più difficile).
Ritorniamo a Photoshop (o al vostro programma di grafica, è la stessa cosa ^^); abbiamo in nostro pezzettino di tabella colorata, ingrandita al massimo. Dobbiamo riuscire a tagliarne un frammento, di modo che se questi venisse ripetuto, non ci sarebbero sfasamenti; in pratica si tratta un po' di occhio e un po' di mente logica, nulla di eccezionale ^_- Esempio della parte che ho tagliato io
vista come ingrandimento massimo
 Ed ecco il risultato del frammento nella stessa tabella di cui sopra ^^ il testo, ovviamente, si vede come sempre |
Come è facile notare, a colpo d'occhio le differenze tra le due opzioni non si notano nemmeno ^^ In pratica la sensazione di "opaco" è data proprio dai contenuti che risultano tali, non tanto dal colore della tabella ^^ | | | | Scritta del cursore (tipo marquee) | Qui trovate l'esempio. Importante: questo script funziona solo con IE (Internet Explorer), non con altri browser. A differenza di molti altri javascript, questo va inserito nel tag body. Come personalizzarlo Cercare questo punto: var scroller_msg='Spero che gli script che propongo su http://tutorial.iobloggo.com vi siano utili ^^' e mettere il proprio testo, sempre tra l'apice (') iniziale e finale. Cercare questo punto: style="position: absolute; width: 150px; border: 1px solid #000000; font-family: Verdana; font-size: 9px; background-color: #E4BFF9; visibility: hidden" e sostituire width, border, font-family, font-size, background-color come desiderate che siano. Non cambiate position e visibility!
| | | | | | | | Barre di scorrimento: i DIV. | I div consentono di creare dei layer (piani) differenti dal resto della pagine, con degli attributi propri. L'esempio, il cui il codice HTML è quello sottostante, è QUESTO. Codice HTML della pagina d'esempio
Considerazioni: il settaggio dei DIV si trova nel tag STYLE, che è interno ad HEAD; per comodità ho usato delle classi, cosa che si capisce perché il selettore (ad esempio divblu) è preceduto da un punto (.) sempre per comodità ho inserito dei commenti all'interno del tag STYLE, che sono quelli tra questi simboli: /* e */ nel body è presente una tabella (table) che non si vede perché il bordo è settato a zero (border="0"); la tabella è divisa in due celle (td) e ogni div è interno ad una sua cella - questo per una maggiore facilità gestionale dei div stessi [NB: e ogni cella è settata con valign="top", cioè all'interno della cella i vari contenuti si dispongono partendo dall'alto della stessa, mentre come settaggio standard si trovano al centro] per richiamare una classe all'interno dell'html, il comando è class="nomeclasse" senza che il "nomeclasse" abbia il punto davanti (nell'esempio: div class="divblu" e div class="divgiallo").
Approfondimento sui due DIV. Il .divblu ha come attributi:
- il carattere (font-family) Tahoma;
- il carattere ha la dimensione (font-size) di 12px;
- il colore del carattere (color) è bianco (#ffffff);
- il colore di sfondo del div (background-color) è blu scuro (#587492);
- l'altezza del div (height) è di 150px e la larghezza (width) è di 100px;
- la barra di scorrimento comparirà in automatico (overflow: auto;) non appena il testo immesso all'interno del div richiederà uno spazio maggiore rispetto ai 150px di altezza. Il .divgiallo ha come attributi:
- il carattere (font-family) Verdana;
- il carattere ha la dimensione (font-size) di 9px;
- il colore del carattere (color) è nero (#000000);
- il colore di sfondo del div (background-color) è giallo chiaro (#FFFFDD);
- l'altezza del div (height) è di 100px e la larghezza (width) è di 200px;
- è presente un bordo (border) con: uno spessore di 1 px (1px), di tipo intero (solid) e di colore nero (#000000);
- la barra di scorrimento comparirà in automatico (overflow: auto;) non appena il testo immesso all'interno del div richiederà uno spazio maggiore rispetto ai 100px di altezza . Lo stile della barra di scorrimento ha carattere ereditario; ne consegue che, se avete messo il selettore body e avete dato degli attributi di colore alla barra, questi saranno gli stessi che si ripeteranno nel div. | | | | Blocco tasto destro del mouse (per immagini) | Prima di tutto, il solito esempio, che trovate QUI. A differenza del classico script che blocca il tasto destro, questo si riferisce UNICAMENTE alle immagini, quindi non impedisce di salvare il testo (magari qualcuno vuole riproporre ciò che scrivete), aprire link in un'altra pagina e così via. Importantissimo: questo script *non* si può usare se ci sono già altri script che funzionano con il comando OnLoad nel tag BODY!!! Lo script è formato da due parti; lo script vero e proprio (sempre da inserire tra head e /head, possibilmente *dopo* un eventuale style) e il comando Onload, da mettere nel tag body. Ecco la prima parte, lo script.
Da modificare: alert("Non ci provare! Se vuoi qualcosa, chiedi."); dove dovrete mettere, sempre all'interno delle virgolette ("), la frase che volete far comparire nel pop up ^^ Ecco la seconda parte, quella da inserire nel tag body
Non c'è niente da modificare, tenete presente che però all'interno del tag body possono esserci tranquillamente altri comandi, come il bgcolor, ecc. La sola avvertenza, che ho già messo in alto, è che *non* ci siano più script che utilizzino il comando OnLoad! | | | | Titolo con frecce in movimento | Questo DHTM modifica il titolo sulla barra in alto del browser; per un esempio guardate QUI. Esempio di pagina HTML con il codice.
Osservazioni:
1) il titolo *deve* essere messo; è indifferente cosa mettiate tra i tag title e /title; ci deve però essere scritto qualcosa;
2) il solo punto da modificare nel codice è dove compare la scritta //change title text to your own e, più precisamente, var titletext="Benvenuti!" - dove, al posto di Benvenuti!, dovete mettere il titolo del vostro blog ^^ (le virgolette ["] devono esserci!)
3) per il resto è una normalissima pagina HTML ^^ | | | | Immagine sfumata | Questo DHTML riguarda prettamente la grafica e, va detto subito, viene
visualizzato unicamente dal browser Explorer, non da Netscape (dubito su
Mozilla). Innanzitutto l'esempio pratico, che trovate QUI.
Come potete vedere, il suo effetto è quindi di rendere visibile al passaggio
del mouse, poco a poco, l'immagine inizialmente opaca. Lo script è formato da due parti; un JavaScript da inserire all'interno del
tag HEAD e la stringa di codice da inserire nel punto dell'immagine (dunque
all'interno del tag BODY). Questo è il JavaScript da copiare e incollare,
SENZA MODIFICARE NULLA.
Questo invece è il comando che va messo con l'immagine;
DELLE MODIFICHE PARLO SUBITO SOTTO.
Modifiche:
1) la sola modifica (ovvia) è che al posto dell'immagine che ho inserito io,
dovete mettere quella che voi volete vedere con questo effetto (dunque cambiare
IMG SRC="url dell'immagine");
2) dovrete di conseguenza modificare WIDTH (qui segnato su 250) e HEIGHT (qui
segnato su 300), che sono rispettivamente la larghezza e l'altezza
dell'immagine;
3) il BORDER è indifferente; io ho messo 0 (cioè senza bordo), voi potete pure
mettere 1 (di un pixel di spessore), 2 (di due pixel di spessore) e così via;
4) potete modificare anche il valore di opacity (l'opacità iniziale
dell'immagine) - tanto minore lo metterete, tanto più l'immagine apparirà,
inizialmente, "opaca" (settato a 0 l'immagine sarà trasparente ||
settato a 100 l'immagine sarà totalmente visibile);
5) onMouseover e onMouseout vanno lasciati esattamente come sono. Bene, per questo piccolo DHTML è tutto; se avete problemi o
dubbi, chiedete pure, vedrò che posso fare ^^ | | | | Cosa sono i DHTML | Questa sarà la premessa più breve che io abbia mai fatto. I DHTML sono semplici script che, inseriti nella pagina web, la rendono dinamica (cioè interattiva per l'utente che la visita); difatti DHTML non significa altro che Dynamic HTML. Spesso (quasi sempre) si appoggiano a dei JavaScript inseriti nel tag HEAD, mentre i comandi DHTML si trovano essenzialmente nel tag BODY e, più specificatamente, nel punto dove si vuole far "apparire" il loro funzionamento. Direi che per dire cosa sono, questo basti e avanzi ^^ | | | | Personalizzazione INPUT | All'interno del CSS del TEMPLATE PAGINA è possibile personalizzare anche l'INPUT, che corrisponde al **ricerca** e anche ai vari form (nome, url) della **tagboard** (ma della seconda, parlerò dopo). L'INPUT ha, come dati principali:
- border: colore __ pixel di spessore __ tipo di bordo
- font-size: grandezza del carattere
- font-family: tipo di carattere
- color: colore del carattere
- background-color: colore di sfondo dell'input stesso. Esempio: Questo è il settaggio attuale dell'INPUT.
Come potete vedere, sia **ricerca** sia **tagboard** hanno questi parametri;
- un bordo di colore scuro (#918D8D), spesso 1 pixel ed intero (solid);
- il carattere è di 9 pixel di grandezza (la parola "cerca", "invia", ecc)
- il tipo di carattere è il Verdana;
- il colore del carattere è il nero (#000000);
- lo sfondo è un rosa pallido (#F1EBF1) Per la **tagboard** il discorso è un po' diverso, dato che all'interno di TEMPLATE TAGBOARD, nello STYLE, è già inserito (e, nel caso non ci sia, si può inserire) l'id: #tagboard input. Sinceramente non l'ho mai usato in contrapposizione all'INPUT generico della pagina, quindi non so se apporterebbe grosse modifiche settandolo in modo differente dal primo.
Per convenienza (pure visiva) è meglio che lo stile di INPUT e #tagboard input siano uguali ^__^ | | | | Feed RSS | I feed rss non so cosa siano, non in termini tecnici almeno, però hanno una loro funzione, che è quella di "preferiti visualizzabili".
Mi spiego meglio.
I feed rss creano una pagina che, visualizzata tramite il browser, non sembra altro che un'accozzaglia di tag e testo; questo perché serve un feedreader, che vi consiglio di scaricare QUI (ho preso l'ultima versione, che pesa poco più di un mega).
Attraverso un feed rss è possibile visualizzare gli ultimi contenuti del blog a cui si riferisce, il tutto attraverso quel programmino; in pratica crea una sorta di "blog preferiti" (chi ha usato Splinder sa cosa intendo), cosa sia utile che comoda. Ora vediamo *come inserirli* e *come usarli*. Come inserire un feed rss. Su IoBloggo, per inserire nel proprio blog un feed rss, basta semplicemente scrivere il comando rss (sempre tra una coppia di trattini iniziali e finali) nel template della pagina. Così facendo, verrà visualizzato questo bottoncino: 
Per gli altri, non vi so dire... passate a IoBloggo o boh XD Come utilizzare i feed rss. Scaricate un feedreader qui: feedreader. Personalmente ho preso il FeedReader 2.5 Alpha 610, scaricandolo dal server mirror svizzero (e viaggia bene). Cliccate sul file salvato e seguite i vari passi del setup. Fatto questo (non serve riavviare il pc) vi troverete una schermata con in alto cinque comandi (New - Update - Search - Properties - About) e, sotto, una colonna a sinistra e due celle a destra. Andate sul blog con i feed rss che volete "salvare"; per questa volta utilizzerò, come esempio, il mio blog personale.
Cliccate sul pulsante "xml" (quello di cui sopra) e si aprirà una nuova pagina, con questo indirizzo:
http://www.iobloggo.com/admin/rss.php?blogid=14
Copiate l'indirizzo. Tornate alla finestra del programma.
Cliccate semplicemente su New.
Si aprirà una finestrella che vi chiede di inserire un URL o un Feed: incollate l'indirizzo preso in precedenza e premete Next.
Vi comparirà in automatico un nome (nel caso specifico, esh); lasciate così o modificatelo come più vi piace.
Cliccate Finish. Nella cartella My feeds comparirà il link "esh" (o quello che avete scritto); cliccandolo, nella cella in alto a destra verranno elencati i titoletti dei vari post della home page del mio blog. Cliccandoli di volta in volta, nella cella immediatamente sotto, compare il post stesso (privo della grafica del blog, ma con eventuali immagini e suoni del post). Se poi, nel scorrerlo, andate alla fine, troverete "READ ON"; premendolo, si aprirà il blog stesso (sempre all'interno della cella). Così, se inserite gli rss di tutti i blog che seguite (e che hanno questa opzione), potrete visualizzare i loro nuovi post (i link NON letti sono in grassetto e, a fianco del nome - nell'esempio esh - compare il loro numero). Quindi, come detto in precedenza, non sono altro che una sorta di "preferiti visualizzabili" molto utili ^_- | | | | Tagboard | Il TEMPLATE TAGBOARD ha un suo STYLE, che si trova all'inizio del template.
Questo è composto essenzialmente da tre id (id perché hanno il cancelletto "#" davanti):
- #tagboard td, A
- #tagboard input
- #tagboard textarea #tagboard input e #tagboard textarea possono andare insieme, separati da una virgola (,), come nell'esempio sotto, dato che è consigliabile abbiano le stesse caratteristiche (consigliabile perché graficamente più piacevole alla vista). L'esempio pratico segue quello teorico. In questo modo avremo il carattere, in entrambi i casi, di tipo Verdana (o, se il pc dell'utente non ha il Verdana, l'Arial), di 10 pixel (10px) di grandezza e di colore nero (color #000000).
I campi in cui inserire i propri dati e il messaggio, saranno con sfondo bianco (#FFFFFF) e bordo di 1 pixel (1px) intero (solid) nero (#000000). La larghezza della tagboard è invece settabile attraverso il primo tag <table> che si trova nel suo template.
Quello che, dipendentemente dalle necessità, dovete modificare (il fixed dovete lasciarlo come è) è la larghezza, in pixel, del width che, nell'esempio, è impostata su 150px (ricordate di mettere *sempre* px subito dopo il valore, senza spaziature).
Quindi potrete mettere width: 100px o width: 200px o ancora width: 127px - in pratica quanto vi serve sia larga la tagboard. | | | | Il Calendario | Il calendario di IoBloggo è graficamente personalizzabile ma, per far ciò, è necessario modificare (se si parte da un template base) o aggiungere (se ci si costruisce il template da soli) alcuni parametri. Le stringhe che vanno modificate si trovano all'interno del tag <STYLE> che si trova all'interno del tag <HEAD> e sono: #calBorder: la tabella che contiene tutto il calendario, quindi lo sfondo, il bordo, il carattere, la grandezza, ecc.
#calHeader: intestazione con i giorni (d, l, m, m, g, v, s)
#calDay: le celle dei giorni numerici.
#calToday: la cella del giorno odierno.
#calToday A: influisce sul *link* ("A") della data odierna.
#calHeader A: influirebbe sui link dei giorni (d, l, ecc) se questi fossero cliccabili. Ora due esempi tratti da due template base: SIMPLY ANGY BLU e MOVABLE TYPE. Calendario Simply Angy Blu 
#calBorder {}
::: non è indicato nessun colore di sfondo e non ha bordo esterno
#calHeader {
border:1px solid #666666;
background-color: #DFE5ED;
color:#214A84;
}
::: bordo esterno intero (1px solid) e grigio (666666), sfondo azzurrino (DFE5ED), testo blu (214A84).
#calDay {
border:1px solid #666666;
background-color: #FFFFFF;
color:#000000;
}
::: bordo esterno intero (1px solid) e grigio (666666), sfondo bianco (FFFFFF), numeri (SE NON SI E' SCRITTO IN QUALCHE GIORNO E QUINDI NON SONO LINKABILI, tipo il 24 e il 28) neri (000000).#calToday {
border:1px solid #666666;
background-color: #88A5CC;
color:#FFFFFF;
font-weight:bold;
}
::: bordo esterno intero (1px solid) e grigio (666666), sfondo azzurro intenso (88A5CC), colore testo bianco (FFFFFF) e in grassetto (bold). E' il 31. #calToday A {
color:#FFFFFF;
}
::: link del giorno odierno (31) bianco (FFFFFF). #calHeader A {
color:#FFFFFF;
font-weight:bold;
}
::: se i giorni fossero cliccabili, sarebbero scritti in bianco (FFFFFF) ed in grassetto (bold). Calendario Movable Type. 
#calBorder {
background-color:#FFFFFF;
border:1px solid #999999;
}
::: indica lo sfondo bianco (FFFFFF) della tabella e il bordo grigio (999999)#calHeader {
border:1px solid #6699CC;
background-color: #6699CC;
color:#FFFFFF;
font-weight:bold;
}
::: bordo intero azzurro (6699CC) e sfondo dello stesso colore azzurro (6699CC), colore del testo bianco (FFFFFF) e in grassetto (bold). #calDay {
border:1px solid #999999;
background-color: #CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
::: bordo intero grigio (999999) e sfondo grigio chiaro (CCCCCC), colore dei numeri (non linkati, tipo il 24 e il 28) bianco (FFFFFF) e in grassetto (bold). #calToday {
border:1px solid #6699CC;
background-color: #6699CC;
color:#FFFFFF;
font-weight:bold;
}
::: bordo intero azzurro (6699CC) e sfondo dello stesso colore (6699CC), testo bianco (FFFFFF) e in grassetto (bold). E' il 31. #calToday A {
color:#FFFFFF;
}
::: link bianco (FFFFFF) della data odierna (31).
#calHeader A {
color:#FFFFFF;
font-weight:bold;
}
::: se i giorni fossero cliccabili (d, l, ecc) sarebbero bianchi (FFFFFF) e in grassetto (bold). Suggerimento: se il carattere del vostro calendario risultasse troppo grosso, inserite all'interno del #calBorder il parametro necessario per settarlo.
Esempio:
#calBorder {
font-family: Verdana, Arial;
font-size: 10px;
color: #000000;
}
::: il tipo di carattere (font-family) sarà il Verdana o, in alternativa, l'Arial; le sue dimensioni saranno di 10 pixel e il suo colore sarà nero (#000000). | |
|
|
| |
Accessori per computer