Come creare dei collegamenti con vari URL in aree diverse della stessa immagine SVG.

Leggere questo articolo fino all'aggiornamento a fine post in cui sono state aggiunte importanti informazioni -

Le informazioni assolutamente basiche sull'uso di Inkscape sono comunque sufficienti per realizzare degli oggetti che non sarebbe possibile creare con i normali programmi di grafica. Una immagine classica può essere linkata solo nella sua interezza mentre con una immagine SVG lo si può fare con una singola area.

Una funzionalità di questo tipo è possibile implementarla anche con immagini JPG o PNG ma bisogna utilizzare degli strumenti esterni che ci permettano di creare delle mappe di immagini. Vediamo un modesto esempio di come si possa linkare con URL diversi varie zone di una immagine SVG. Dopo aver aperto Inkscape si va su File > Importa per importare nell'area di lavoro le immagini in SVG, JPG, PNG o altro formato

Come inserire un iframe in un post o in una pagina.

L'iframe ovvero inline frame è un modo per richiamare una pagina web all'interno di un'altra pagina web attraverso il suo indirizzo. Insieme al tag <iframe> possono essere usati diversi attributi tra cui quelli della larghezza e dell'altezza. Molti di questi attributi sono stati però deprecati in HTML5.

Fino a qualche anno fa insieme al contenuto dell'iframe veniva inserito anche un testo da visualizzare in quei browser che non supportavano questo tag. Adesso si tratta di una pratica superflua visto che l'iframe è supportato da tutti i browser. L'iframe viene comunemente utilizzato per la condivisione dei video di Youtube. Quando andate su Condividi > Codice da incorporare non fate altro che copiare il codice di un iframe che oltre all'indirizzo del video mostrerà anche i dati delle dimensioni del player. 

Personalizzare player e riproduzione dei video di Youtube.

Dopo aver mostrato pochi giorni fa come personalizzare il player di Youtube con reEmbed e avere illustrato i principali tag per modificare la riproduzione dei video di Youtube ho ricevuto un commento nella mia pagina Facebook che mi ha convinto a tornare su questo stesso tema.  

Youtube oltre alla lista dei parametri da usare per configurare la riproduzione dei video ha messo a disposizione degli utenti anche una pagina demo in cui la scelta delle varie impostazioni comporta automaticamente la modifica del codice in tempo reale. 

Su Youtube Player Demo possiamo inserire l'Identificativo del video, che è la parte finale dell'URL e si può copiare dal browser, insieme alle altre opzioni di configurazione. 

Come creare degli slideshow anche misti di video, immagini e iframe con PrettyPhoto.

Tra tutti i plugin che ho presentato probabilmente PrettyPhoto è quello che probabilmente è il più versatile visto che permette di creare slideshow e gallerie di immagini, slideshow e gallerie di video e anche slideshow e gallerie di iframe in cui inserire pagine web. Inoltre per i video possiamo utilizzare Youtube ma anche Vimeo ed è addirittura possibile mostrare con effetto Lightbox un file flash in formato SWF.

Mi sono già occupato di PrettyPhoto circa tre anni fa e la dimostrazione del successo che ha ottenuto è anche dovuta al Page Rank di quella pagina che è PR3 paragonabile a quello della homepage di un buon blog. Gli effetti Lightbox che si ottengono cliccandoci sopra permettono di visualizzare gli elementi che compongono la galleria insieme agli strumenti di navigazione

Come incorporare nel blog i documenti di Google Drive.

Quando in un sito c'è bisogno di visualizzare un documento in formato Word, Excel, Powerpoint o PDF è sicuramente meglio optare per la incorporazione nel sito piuttosto che tentare di ricopiarlo o di metterci una semplice istantanea. Questo è inevitabile quando il documento sia formato da più pagine. In passato ho già illustrato il metodo su come implementare i documenti di Google Drive ma forse è il caso di riprendere il tema per mostrare alcune semplici operazioni che possono essere fatte per mostrare ai lettori anche degli utili strumenti con cui interagire con il documento.

Per condividere un qualsiasi documento è opportuno che questo sia caricato in una cartella Pubblica. Dopo aver effettuato l'accesso a Google Drive quindi è essenziale crearla se non fosse già presente nel nostro account. Si va su Crea > Cartella e le si dà il nome

PrettyPhoto per slideshow di foto, gallerie di video e pagine web.

L'introduzione dell'Effetto nativo tipo Lightbox su Blogger ha provocato delle reazioni contrastanti. Ci sono coloro che lo hanno amato immediatamente visto che non avranno più la necessità di installare effetti manualmente ma ci sono anche quelli che sono rimasti irritati perché tale effetto va a incidere pesantemente su layout che erano già stati accuratamente personalizzati e configurati.

La pubblicazione di un codice che disabilita questo effetto ha lasciato soddisfatti quelli che usano Facebox ma non altrettanto felici gli utenti di Lightbox visto che lo script che ho presentato provoca dei problemi anche al Lightbox non nativo . Dopo la lettura di un commento in cui venivo informato che lo script KillingLightbox non influenzava il plugin PrettyPhoto, ho pensato di illustrare la sua installazione. Potrebbe essere utile a quei lettori che non amano questa nuova feature di Blogger, che avevano installato Lightbox e che si ritrovano con effetti sovrapposti.

Come incorporare i video di Youtube nel blog senza mostrarne il logo.

Quando si inserisce nel blog un video di Youtube, nel fotogramma iniziale e durante la riproduzione, si vede in basso a destra del player il loro logo. Con un articolo sul blog ufficiale, quelli di Youtube ci informano che sarà adesso possibile implementare i video senza mostrare il marchio del celebre sito di video sharing. Insieme a questa nuova feature sono state introdotte anche le miniature in alta qualità, questo perché l'immagine spesso non aveva la stessa risoluzione del video ed era considerata un deterrente per gli utenti che ci avessero voluto cliccare sopra.

 

Come visualizzare i menù a tendina quando sono coperti da un video di Youtube.

Se nel vostro blog avete un menù a tendina che si apre verticalmente e siete soliti inserire dei video nella parte alta dei post, vi capiterà senz'altro che alcune voci del menù rimangano nascoste sotto al video

Per ovviare a questo fastidioso inconveniente si deve necessariamente acquisire il vecchio codice di Youtube e non quello nuovo basato sull'iFrame. In teoria si potrebbe far diventare trasparente l'iFrame mediante l'attributo allowtransparency="true" e modificare il CSS di body { aggiungendo background:transparent; o background-color:transparent; ma ho verificato che il metodo non funziona. Se qualcuno più bravo di me riesce a trovare un sistema alternativo con il nuovo codice sarei molto lieto che me lo indicasse nei commenti.

Youtube modifica il metodo di incorporamento dei video.

La ragione per la quale c'è stata una modifica del codice per incorporare i video di Youtube forse risale all'introduzione del HTML5 che avrà un grosso impatto proprio nella gestione dei video. Al posto del contenitore object è quindi stato preferito un più flessibile iFrame che del resto verrà tra poco utilizzato anche da Facebook e che manderà in pensione applicazioni che hanno fatto la sua storia come Static FBML.  

Quando si inserisce un video con Windows Live Writer non si noteranno differenze perché, tramite l'apposito plugin, si incollerà solo l'URL del video. Se invece si usano altri metodi di pubblicazione dei post, per inserire un video dovremo andare su Codice da incorporare e sarà visibile un codice molto più corto basato come detto su un iFRame

Google Docs Viewer per aprire qualsiasi documento e per embeddarlo nel blog.

Google Docs Viewer è una funzionalità che mi risulta essere poco utilizzata ma che ha grandi potenzialità. Viene anche chiamato Visualizzatore di Documenti e permette di aprire direttamente nel browser tutta una serie di file di diversi formati. Proprio ieri il blog ufficiale di Google ha dato la notizia che ne sono stati aggiunti altri 12 a quelli che già erano supportati. Praticamente vengono aperti tutti i formati della Microsoft oltre ai PDF e molti altri quali .PAGES della Apple, .Al della Adobe, .PSD di Photoshop, .DXF di Autocad, .SVG, .EPS, .XML, .XPS, .TTF, ecc

Per visualizzare un documento presente in rete ne dobbiamo solo acquisire l'URL. Successivamente si incolla nell'apposito campo di Google Docs Viewer e si clicca su Genera link. Per rendere più chiaro il funzionamento ho inserito un documento DOCX su DropBox nella cartella Public e ne ho copiato l'URL pigiando sul destro del mouse e, successivamente, andando su DropBox > Copy Public Link

 

Come impostare la privacy sui file di Google Documenti per renderli privati, accessibili solo agli amici o visibili a tutti.

Su Google Documenti possiamo caricare file di ogni genere e, molti di questi, possono anche essere modificati. Parlo soprattutto di quelli realizzati in un qualsiasi formato Office (doc, docx, ppt, xls, ecc). Si possono naturalmente creare anche documenti di sana pianta andando su File > Nuovo e scegliendone il tipo tra: Documento, Presentazione, Foglio di lavoro, Modulo e Disegno

I 22 migliori effetti per Gallerie fotografiche e Slideshow basati su JQuery.

Con l'avvento di framework Javascript come JQuery, Prototype, Mootools, ecc si è enormemente ampliata la possibilità di creare gallerie fotografiche e slideshow di grande effetto. Il sito Hongkiat.com ha stilato un elenco veramente completo. Per ogni effetto è riportata la homepage con le istruzioni, una demo e il link di download dei file da caricare nel modello.

Per alcuni di questi effetti straordinari ho trovato il modo di renderli in qualche modo compatibili con i blog su Blogger in articoli già pubblicati. In linea di massima, uno mediamente esperto, leggendosi le istruzioni riesce senz'altro a installare tutti gli effetti proposti. Il problema è che magari non tutti sono così funzionanti sulla piattaforma Blogger. Vi posto tutta la lista con delle brevi descrizioni. Nel caso in cui qualche galleria fosse particolarmente interessante, vi prego di farmelo sapere e, senza impegno, guardo quello che si può fare per installarla su Blogger.

Supersized

E' uno slideshow a tutto schermo basato su JQuery, sono presenti anche effetti di transizione

Demo | Download

Come vedere il pulsante "Mi piace" di Facebook ovunque e non solo nei post.

Ho ricevuto delle richieste via email e anche nei commenti per mostrare il pulsante "Mi piace" (o Consiglia) di Facebook, non solo nei singoli post ma anche in Homepage e nelle cartelle delle etichette. Questa opzione funziona nei modelli offerti da Blogger ma può non funzionare in alcuni template personalizzati. Vi posto due opzioni di codici ma se ne possono creare altre

Pulsante Mi Piace che si vede ovunque

<!--PULSANTE FACEBOOK INIZIO-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:40px;'/> 
<!--PULSANTE FACEBOOK FINE-->

I plugin Like e le statistiche di Facebook Insights per il nostro blog.

Facebook ha da poco cambiato il classico "Diventa fan" in un meno impegnativo "Mi Piace" per agevolare la condivisione di contenuti. Insieme a questa piccola rivoluzione ha anche messo a disposizione degli sviluppatori tutta una serie di plugin. E' naturale che in questo momento la loro utilizzazione non è esattamente immediata per un blogger che non sia particolarmente esperto.
Digital Inspiration ha già creato dei codici per utenti Wordpress e Blogger (modello classico e versione moderna). I plugin inseriscono nelle pagine dei siti un iFrame con questo aspetto

Come togliere completamente la NavBar (o Barra di Navigazione) in un blog su Blogger.

Qualche tempo fa Blogger ha reso personalizzabile la Navbar aggiungendo anche l'opzione della semitrasparenza. Personalmente ritengo la Barra di Navigazione utile visto che mi serve per entrare nel blog o uscirne con un solo click. La uso quindi per accedere alle schede Layout, Impostazioni e a tutte le funzionalità offerte. Non la utilizzo invece per scrivere i post visto che preferisco il più efficiente editor Windows Live Writer.

Ci sono blogger che invece non la sopportano anche per un fondato motivo tecnico. La Navbar infatti non è altro che un iFrame inserito nel modello proprio nella parte iniziale della pagina. La sua rimozione potrebbe comportare quindi una più semplice indicizzazione da parte dei motori di ricerca. Non parlo tanto di Google visto che Blogger fa parte della stesso gruppo e quindi avranno escogitato certo un algoritmo per non penalizzare gli utenti della loro piattaforma. Mi riferisco ai motori quali Yahoo, Bing e Ask che portano una fetta non indifferente del traffico.

Come inserire una pagina web nel blog con Lytebox tramite un iFrame.

Nell'articolo precedente ho illustrato Lytebox che serve per inserire suggestivi effetti nelle immagini del blog e può essere utilizzato anche per creare delle gallerie fotografiche o degli slideshow. Per seguire questo post è quindi necessario prima leggere quello che spiega come inserire Lytebox nel blog.

Senza modificare in niente l'installazione di Lytebox, per inserire una pagina web all'interno di un nostro articolo sotto forma di un iFrame, basta incollarne l'URL in un collegamento e specificare rel="lyteframe". Facendo un esempio pratico se noi, quando scriviamo un post, andiamo in modalità HTML e incolliamo un codice simile a questo

<a href="http://www.google.it" rel="lyteframe" title="Ricerca su Google"
   rev="width: 600px; height: 450px; scrolling: no;">Ricerca su Google</a>

si realizzerà un classico collegamento ad una pagina. In questo caso abbiamo

1. Il collegamento è alla pagina www.google.it
2. Le dimensioni della finestra che si apre sono di 600 pixel di larghezza e 400 di altezza, che possono essere modificate 
3. Il testo che si vede è Ricerca su Google
4. Il riferimento a Lytebox avviene mediante l'inserimento di rel="lyteframe". Da notare che in questo caso si utilizza lyteframe al posto di lytebox per le immagini o lyteshow per gli slideshow.
5. Ovviamente possiamo scegliere una qualsivoglia pagina web e un qualsiasi testo da visualizzare 

Se cliccate su uno dei collegamenti di questo articolo

vedrete apparire una finestra di questo tipo

con la pagina dell'iFrame che si illuminerà e andrà in primo piano, mentre l'articolo resterà in sottofondo in posizione oscurata. Può essere un effetto particolarmente sorprendente per i visitatori del blog e dà l'idea di un sito accurato e quindi affidabile.

Come inserire una mappa di Google Maps in un sito.

Continuo la rassegna degli elementi web di Google che possono essere inseriti nel blog. Ho iniziato con un articolo generale di presentazione con una particolare attenzione al Calendario, poi ho parlato di come inserire un box di messaggi che forse è riduttivo definire chat, adesso è la volta delle mappe interattive che sono uno dei tanti fiori all'occhiello di Google. Premetto che esistono anche degli ottimi servizi per raggiungere lo scopo di inserire una cartina nel blog, ricordo "en passant" UMapper.

Anche in questo caso si può personalizzare la dimensione della cartina interattiva tra Small (300x250), Medium (400x300) e Large (500x375). Si può scegliere il tipo di mappa tra quelle classiche Street, Hybrid, Satellite, Terrain. Si inserisce il Titolo della Mappa e l'Indirizzo della Mappa

quindi si copia il codice da inserire nel blog in un elemento pagina del tipo HTML/Javascript andando su Layout > Aggiungi un gadget oppure in un post del blog selezionando la modalità HTML. Anche in questo caso si tratta di un iFrame che non dovrebbe dare problemi di visualizzazione con i browser

Per quanto riguarda l'indirizzo bisogna utilizzare il formato classico di Google Maps oppure ripiegare su un semplice nome di città.

Come inserire la chat di Google Friend Connect nel nostro blog.

Andare in Google Web Elements Conversation e personalizzare la nostra chat a cui si potrà accedere attraverso un account di Google Friend Connect e che potrà essere inserita in qualsiasi blog anche su una piattaforma diversa da Blogger

In Size verranno scelte le dimensioni tra Tall (250x440), Wide (600x410) e Full Page (600x700). In Topic dovrà essere digitata la categoria della conversazione oppure selezionata una di quelle predisposte. Una scelta potrebbe essere "Blog & Blogger"; in Scope si può scegliere se restringerla ai frequentatori del nostro sito o allargarla a tutto il web.
Verrà generato un codice, esattamente un iFrame da selezionare, copiare ed incollare in un elemento pagina del nostro blog (andando su Layout > Aggiungi un gadget > HTML/Javascript) oppure anche in un articolo passando alla modalità HTML



Premetto che non so come reagirà il famigerato Internet Explorer a questo widget. Inserirò comunque degli aggiornamenti o lascerò solo lo screenshot nel caso non riuscisse ad aprire la pagina.

Aggiornamento n°1: Sembra che la chat funzioni con tutte le versioni di IE superiori alla 6 quindi anche con la più recente IE8. Il proprietario del sito vedrà la chat in questo modo

e potrà moderare i commenti eventualmente anche cancellandoli.

QuickMaps per generare delle mappe per itinerari o percorsi di viaggio da inserire in un sito.

Mettiamo che si voglia organizzare una gita in qualche località con partecipanti reclutati online oppure che si abbia la necessità di pubblicizzare un’attività commerciale con tanto di itinerario per poterla raggiungere. Google Maps mette a disposizione delle API per fare dei lavori veramente interessanti.

Mi ero già occupato di UMapper come di un sito che permetteva l’inserimento nei blog di itinerari generati dagli utenti adesso è nato QuickMaps che ne ricalca le orme

Si può scegliere il tipo di visualizzazione solito di Google Maps cioè Mappa, Satellite, Ibrida, Terreno. Inserendo un nome di una località se ne visualizza subito la mappa. Si possono fare le seguenti personalizzazioni

1. Inserire dei contrassegni trascinandoli con il mouse dalla  barra di destra
2. Inserire delle note per ogni contrassegno cliccandoci sopra con il sinistro del mouse
3. Eliminare i contrassegni cliccandoci con il destro del mouse
4. Aggiungere delle linee alla mappa cliccando su Draw Lines, quindi su una serie di punti, infine su “normal mode” per terminare il lavoro
5. Tracciare delle linee a mano andando su Scribble
6. Personalizzare i contrassegni (icone marcatori) andando su Markers e scegliendo la categoria più appropriata
7. Inserire delle etichette di testo nella mappa trascinando con il mouse la tabella di testo che sta sotto a Other Stuff
8. Si può sempre azzerare il lavoro compiuto andando su Clear
9. Consultare questa pagina di istruzioni per ulteriori funzionalità -
10. Titolare e descrivere la mappa che abbiamo editato
11. Salvarla andando su Save it oppure inserirla in un sito andando su Save and Generate Code

Verrà generato del codice HTML di un Iframe che potrà essere inserito nel blog su Blogger in modalità HTML. E’ anche possibile inserirlo su Typepad, iGoogle o acquisirne il widget per implementare la mappa su qualsiasi sito

Google Ricerca Libri introduce nuove funzionalità e la possibilità di incorporare un libro nel blog con un iFrame.

Google ha annunciato alcune interessanti migliorie al suo Google Ricerca Libri che riguardano soprattutto il modo di visualizzarli e condividerli.

Attraverso i bottoni presenti in alto si può scegliere se vedere solo una pagina del libro, due pagine o le miniature di tutte le pagine. E’ pure prevista la possibilità della visione a schermo intero.

E’ stata introdotta anche una casella di ricerca per cercare del testo specifico all’interno del libro. Sulla parte destra sono presenti altre interessanti opzioni.

In Solo testo si possono escludere le immagini  presenti nel libro e visualizzarne solo il testo. L’opzione Ritaglia permette di selezionare del testo o immagini dal libro quindi di ottenerne il link o il codice HTML per implementare la parte selezionata nel blog. Inoltre c’è la possibilità di scaricarlo in formato PDF (questo vale ovviamente solo per i libri non soggetti a copyright).

L’icona del collegamento, a sinistra di PDF, permette di ottenere il codice HTML del libro per inserirlo come documento nel blog. Diciamo che è una funzionalità che ricorda un po’ Scribd,

c’è la possibilità di ottenere il link diretto al libro in oggetto o quello di incorporarlo nel blog come un iFrame.  Ecco un esempio di questo secondo caso. Per navigare all’interno del libro usare le opzioni di zoom, frecce e cursori presenti in alto a destra