Il termine XHTML sta per eXtensible HiperText Markup Language e fonde le caratteristiche di un linguaggio statico quale HTML alle potenzialità dell’XML.  Proprio per questo occorre utilizzare una sintassi ben precisa, affinchè il documento da noi realizzato risulti well-formed e possa superare con successo la procedura di validazione del W3C (Organizzazione che definisce gli standard per le pagine WEB).

Fatta questa breve premessa, è ora necessario elencare alcune delle differenze fondamentali esistenti tra L’XHTML ed HTML versione 4.0.

1) I tag utilizzati non devono essere “incastrati” tra loro bensì annidati. Ad esempio:

<b><i>testo</b></i>

tag incastrati (consentiti con HTML anche se sintatticamente errati – vietati in XHTML)

<b><i>testo</i></b>

tag annidati  (sintassi corretta)

2) I nomi dei tag ed i loro attributi devono essere scritti in minuscolo, poichè l’XML è un linguaggio case sensitive (XHTML):

<table><tr><td>un test</td></tr></table>

mentre per HTML la seguente sintassi è corretta:

<TABLE><TR><TD>un test</TD></TR></TABLE>

3) I valori assegnati agli attributi devono necessariamente essere posti tra virgolette (XHTML):

<img src="test.gif">

4) Ogni attributo deve avere un valore (XHTML):

<option selected="selected">test</option>

mentre in HTML esistono i cossidetti attributi “standalone” che non necessitano di valore alcuno.

5) Gli attributi vuoti devono terminare con / (XHTML):

<br/>
<img src="test.gif"/>

6) Per identificare un dato elemento occorre utilizzare l’attributo id e non name (XHTML). Per ragioni di retrocompatibilità è comunque consentito l’uso in tandem degli attributi id e name:

<a id="test">

Per compatibilità:

<a id="test" name="test">

Spero di essere stato esaustivo, a presto! 

Quante volte vi sarà capitato di non visualizzare correttamente una pagina da voi editata, soprattutto se utilizzate i browser di casa Microsoft (ie 6 e compagnia bella)? Oggi possiamo testare la copatibilità del nostro sito con ben 61 browser diversi collegandoci a questo indirizzo. Esso, in poco tempo, ci fornirà lo screenshot della pagina che abbiamo specificato all’interno dell’apposita sezione (tramite URL – vedi immagine sottostante)

Il risultato del nostro test sarà simile al seguente:

 A presto!

Come abbiamo già visto per l’interpolazione movimento, anche l’interpolazione forma può essere realizzata in pochi semplici passi. Ecco come operare:

Apriamo l’applicativo Flash MX e sul primo fotogramma della linea temporale creiamo una qualsiasi forma (per questa guida ho scelto un ovale);

Posizioniamoci adesso sul fotogramma 25, pulsante destro sullo stesso e selezioniamo dal menù a tendina l’opzione “Inserisci fotogramma chiave vuoto”;

Creiamo sul piano di lavoro un rettangolo e posizioniamoci sul fotogramma 1;

In basso, nel menù “Proprietà”, di fianco alla dicitura “Interpolazione” selezioniamo “Forma”;

Adesso sulla timeline ci apparirà una freccia continua che parte dal fotogramma 1 e culmina sul fotogramma 25.

Clickiamo su Controlli -> Prova filmato e potremo goderci la piccola animazione da noi realizzata.

A presto! 

Il termine “favicon” (letteralmente “favorite icon”) indica quella piccola icona presente alla sinistra dell’URL da noi digitato. Personalizzarla è un’operazione piuttosto semplice e richiede l’uso di un programma particolare, cioè imagicon (potete scaricarlo da qui – è gratuito) ed una conoscenza di base del linguaggio HTML. Nella fattispecie, imagicon servirà proprio a convertire in icona l’immagine da noi selezionata (di solito la dimensione da scegliere è 16×16 pixel – la visualizzazione corretta del file risultante cambia di browser in browser).

Una volta ricavata la nostra icona non ci resta che caricarla sul blog:

Pannello di controllo ->  gestione files e selezioniamo l’immagine da noi creata. Da notare, inoltre, che è consigliabile modificare l’estensione del file da *.ico a *.jpeg, poichè myblog ha qualche problema con la prima tipologia menzionata.

Bene, ora possiamo creare l’href. Andiamo dunque in Opzioni-> avanzate -> presentazione -> modifica homepage -> modifica modello; subito dopo la chiusura del tag <title> (cioè </title>) inseriamo la seguente stringa:

<link href=’http://nazarenolatella.myblog.it/images/icona.jpg‘ rel=’shortcut icon’/>;

e salviamo. Ovviamente la parte scritta in rosso va sostituita con il pathname dell’icona caricata sul blog.

La guida termina qui, a presto. 

Molti di voi sapranno che una delle grane più toste che ci riserva Macromedia Flash MX è la creazione dei menù, soprattutto quelli a scorrimento. Infatti tale operazione richiede spesso una mole di tempo e di lavoro spropositata rispetto a quello che è il nostro obiettivo (saper gestire le interpolazioni, manipolare correttamente i fotogrammi ecc.). Possiamo finalmente scordarci di tutto ciò da quando è stato rilasciato “123 Flash Menu”, un programma (trial) che permette di editare il nostro menù Flash in pochi minuti (potete scaricarlo da qui).

Mandiamo dunque in esecuzione il nostro applicativo e cerchiamo di capire come si articola il suo funzionamento. Come potete notare, la prima schermata ci presenta una serie di template per il nostro menù, ognuno dei quali rientra in una determinata categoria (Art, Business, Classic ecc.). Scegliamo quindi quello che più ci piace e clickiamo su “Ok”.

Bene adesso il nostro menù si trova sul tavolo di lavoro, possiamo modificarlo come meglio crediamo. In particolare, alla vostra sinistra è presente la sezione “Menu Items”, in cui possiamo rinominare ogni sezione del menù, possiamo definire il link a cui deve fare riferimento e possiamo persino scegliere la modalità di apertura della pagina “on click” (_self, _blank, _top, _parent). Ma non finisce qui! Infatti sulla vostra destra è presente un’ulteriore sezione suddivisa in 3 blocchi (Menu Properties, Flash Properties e Web Page Properties), dalla quale il vostro menù sarà COMPLETAMENTE customizzabile (dimensione, colore del font ecc). Una volta completato il lavoro sarà possibile pubblicarlo, scegliendo il formato *.swf oppure HTML code ed .*swf, semplicemente clickando sull’apposito pulsante della toolbar (denominato appunto “Publish”).

Non vi resta sbizzarrirvi!

A presto! 

Grazie a Mix-FX è possibile creare delle animazioni testo in pochissimi minuti. Ovviamente, tale applicativo si basa sostanzialmente su degli effetti template, evitando al webmaster di strutturare delle animazioni partendo da zero (come accadrebbe se si utilizzasse Flash-MX). Potete scaricarlo da qui (è trial).

Apriamo dunque questo programmino e cerchiamo di capire come si articola la schermata principale (vedi immagine sottostante).

Sono presenti 4 sezioni:

1) text – in cui è possibile inserire il testo, scegliere il font e l’effetto;

2) text effect – utile per personalizzare l’effetto scelto in precedenza;

3) background effect – in cui è possibile scegliere l’effetto da riprodurre sullo sfondo del testo;

4) movie settings – dalla quale si potrà selezionare la dimensione del filmato che vogliamo creare (espressa in termini di pixel) ed il colore dello stesso.

Scegliamo dunque il giusto “mix” di effetti e colori da attribuire alla nostra animazione ed il gioco è fatto.

NB: Al termine della procedura verranno creati dei file *.swf che potrete pubblicare sulla vostra pagina HTML. 

A presto! 

Volete che sul vostro blog vengano visualizzate le news RSS di uno o più portali? Basta inserire un piccolo widget, detto appunto RSS reader, seguendo questa semplice guida.

Prima di tutto andiamo su questo sito, dove è disponibile il widget di cui abbiamo bisogno. Una voltra dentro occorre personalizzarlo, modificandone i colori e soprattutto inserendo i siti a cui deve fare riferimento per le news. Clickiamo quindi su “Customize This Widget” e da “Set widget embed size” potremo sceglierne la dimensione mentre da “Feed URLs” potremo inserire l’indirizzo dei siti di interesse. Infine, da “Border color”, sceglieremo il colore che più si addice alla skin grafica del nostro blog.

Ora andiamo su “Get the widget code”, clickiamo sull’icona “HTML”, selezioniamo il codice sorgente -> pulsante destro del mouse -> copia.

Entriamo sul nostro blog e nella sezione “Presentazione” -> “Contenuto delle barre laterali di navigazione”, nell’apposito form denominato “Aggiungi nuovo oggetto” come “Nome dell’oggetto” scegliamo RSS Reader e come “Contenuto dell’oggetto” incolliamo il codice precedentemente copiato. Clikiamo quindi su “Aggiorna questi dati” ed il gioco è fatto.

Attraverso gli strumenti messi a disposizione da myblog.it anche l’inserimento di un contatore visite risulta essere un’operazione estremamente semplice. Basta creare un account su shinystat.it (clicka qui)  e successivamente  accedere alla sezione  “Configurazione”. Potremo quindi selezionare il formato del nostro contatore classico (l’unico disponibile con la versione free), il colore ed anche le informazioni che dovrà visualizzare (Vedi figura).

Una volta completata la configurazione, clickiamo su modifica per rendere effettive le nuove impostazioni. Infine accediamo alla sezione “Codice HTML”, selezioniamo il codice sorgente -> pulsante destro del mouse -> copia.

Effetuamo ora il login sul nostro blog e nella sezione “Presentazione” -> “Contenuto delle barre laterali” creiamo un nuovo oggetto sfruttando l’apposito form  “Aggiungi un oggetto personalizzato” inserendo come “Titolo dell’oggetto” contatore visite e come “Contenuto dell’oggetto” il codice sorgente precedentemente copiato. Clikiamo infine su “Aggiorna questi dati” e finalmente il contatore sarà attivo sul nostro blog 🙂

E’ possibile guadagnare qualcosa mediante il nostro blog semplicemente utilizzando uno dei servizi offerti da Google, nella fattispecie gli AdSense. Essi non sono altro che dei banner pubblicitari contestualizzati al contenuto del nostro sito. Per poterne usufruire occorre andare a questo indirizzo. Una volta dentro clickate su “Iscriviti Adesso” e compilate l’apposito form: di fianco alla dicitura “URL del sito web” inserite l’indirizzo del vostro blog (o del vostro sito), per “Lingua del sito web” selezionate ovviamente “Italiano” e successivamente mettete una spunta per “Non pubblicherò annunci su siti che forniscono incentivi per indurre gli utenti a fare clic sugli annunci” e per “Non pubblicherò annunci su siti che presentano contenuto pornografico”. Adesso su “Tipo di account” scegliete “Privato” e successivamente inserite i vostri dati personali in quanto beneficiari del credito accumulato (dovete essere maggiorenni). In fondo alla pagina, nella sezione “Regolamento” dovrete mettere un check per “Dichiaro che non farò click sugli annunci Google pubblicati con AdSense”, “Dichiaro di aver letto le Norme del programma AdSense di Google” e “Non possiedo ancora un Account AdSense approvato”.

Bene, nella pagina successiva vi verranno richieste ulteriori informazioni (ad esempio se possedete già un account per i servizi di Google) ed a procedura terminata verrà inoltrata la vostra richiesta. Sperando che tutto vada a buon fine, il vostro account verrà approvato nel giro di 24 ore ed a notifica di ciò vi verrà inviata un’email opportuna. Una volta ricevuta questa email non vi resta che attivare l’account clickando sull’apposito link e finalmente avrete accesso al servizio AdSense.

Abbiamo finito con “l’iter burocratico”, ora possiamo dedicarci al web editing vero e proprio. Effettuamo il login a Google AdSense e clickiamo su “Impostazioni AdSense”. Adesso selezioniamo “AdSense per i contenuti” e nella pagina successiva scegliamo “Insiemi di annunci”. Clickiamo su “Continua” ed accederemo alla pagina in cui verrà da noi personalizzata la skin grafica degli AdSense. Il formato che vi consiglio (e che utilizzo sul mio blog) è Skycraper, ma va bene anche Skycraper Largo.

Skycraper 

 Skycraper Largo

Volendo potete anche modificare i colori, affinchè non siano in contrasto con quelli utilizzati per il layout del vostro blog.

A procedura terminata verrà mostrato il codice sorgente relativo agli annunci: selezioniamolo e con il pulsante destro del mouse scegliamo “Copia”.

Accediamo al pannello di controllo del nostro blog, clickiamo su “Presentazione” -> “Contenuto delle barre laterali di navigazione” ed in fondo alla pagina, nella sezione “Aggiungi un oggetto personalizzato”, in “Nome dell’oggetto” inseriamo AdSense ed in “Contenuto dell’oggetto” incolliamo il codice che avevamo precedentemente copiato. Clickiamo quindi su “Aggiorna questi dati” e dopo un pò di tempo (necessario per la contestualizzazione degli annunci al contenuto del nostro blog) potremo visualizzare il nostro AdSense attivo 🙂

Qui di seguito riporto una breve guida su come creare delle semplici interpolazioni movimento mediante l’applicativo Macromedia Flash MX. Apriamo il programma e successivamente attraverso l’apposito pannello selezioniamo lo strumento rettangolo.

Disegnamo la figura sul nostro piano di lavoro e scegliamo il nero come colore di riempimento.

Bene, adesso trasformiamo la nostra figura in un oggetto (pulsante destro sulla stessa -> converti in sibolo) e successivamente spostiamoci al fotogramma numero 20 della linea temporale.

Una volta selezionato il fotogramma 20 clickiamoci sopra con il pulsante destro del mouse e scegliamo “inserisci fotogramma chiave”.

Bene, adesso selezioniamo nuovamente il rettangolo e spostiamolo verso sx.

Clickiamo adesso sul fotogramma numero 1 con il pulsante destro del mouse e scegliamo “Crea interpolazione movimento”. 

Adesso potremo notare la presenza tra i fotogrammi 1 e 20 di una freccia (vedi figura successiva). Ciò significa che la nostra interpolazione è stata creata con successo.

Ora non ci resta che riprodurre il nostro piccolo filmato selezionando Controlli -> Prova Filmato.

A presto!