<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar/16734928?origin\x3dhttp://sid05.blogspot.com', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Google Spreadsheets Form, facile e indolore 10/10/08

Google spreadsheets form

Come molti faccio largo uso dei servizi di Google; i motivi fondamentali credo siano due e piuttosto facili da comprendere: perchè funzionano e perchè sono semplici da usare.

Avrete sicuramente letto della possibilità di utilizzare e modificare documenti condivisi tramite form; i campi di utilizzo di Google Docs quindi, possono trovare spazio anche nelle più comuni "operazioni" richieste ad un blog. Soprattutto in quei casi nei quali non sia possibile operare lato server (Blogger e Tumblr ad esempio).

» continua

Forse qualcuno avrà notato che il modulo submit del mio nuovo progetto è realizzato utilizzando Google Docs; si tratta in pratica di un iframe che è possibile inserire in qualsiasi pagina, ad esempio un post. Per farvi un esempio concreto ho realizzato un semplicissimo form di contatto che trovate alla fine di questo post.

Vediamo ora quali sono i pochi passi necessari per realizzarlo, dando per scontato che abbiate un account Google, e che siate nella vostra pagina di Google Docs. Potete scegliere se realizzare un nuovo foglio di lavoro e poi passare al form oppure iniziare direttamente da quello; questo ultimo metodo è assai più diretto e veloce ed è quello al quale mi riferirò.

Selezionate la prima voce del menù, New e quindi Form (come nell'immagine che trovate all'inizio del post). A questo punto siete nella pagina di editing e potete aggiungere i campi necessari.

Google spreadsheets form - step 1

In questo esempio abbiamo bisogno di tre campi, il nome, l'indirizzo email ed un'area di testo per il messaggio. Il nome lo troviamo di default, aggiungiamo quindi una "domanda" utilizzando il pulsante Add question, in questo caso sarà il campo per l'indirizzo email; possiamo aggiungere una descrizione (Help Text) e scegliere il tipo di campo (Question Type, di default Text) infine spuntiamo la voce Make this a required question per rendere il campo obbligatorio. Done.

Ora ripetiamo l'operazione per aggiungere il corpo del messaggio, unica differenza il tipo di campo che in questo caso sarà Paragraph text.

Google spreadsheets form - step 2

Rendiamo anche questo campo obbligatorio e clicchiamo su Done; a questo punto basterà salvare e tornare nella home di Google Docs. Aprite il nuovo documento che avrà il titolo che avrete scelto per il form (dimenticavo, mettete un titolo :)). Il risultato sarà un foglio di calcolo contenente i campi inseriti in precedenza ed aggiornato con l'input degli utenti.

Per utilizzare il form in un post o in una pagina HTML selezionate Form e quindi Embed form; copiate il codice ed incollatelo nel post/pagina ed il risultato sarà questo:

ps. utilizzando le notifiche via mail oppure un foglio più complesso è possibile rendere molto più funzionale il modulo, diciamo che tra le cose da approfondire ci sarebbero queste ;)

Etichette: , , , ,

Kwout: citare per immagini 27/12/07

Oggi voglio segnalarvi un servizio veramente carino, Kwout. Non lasciatevi ingannare dal nome misterioso, il servizio giapponese permette di salvare porzioni di pagine web come immagini ed in maniera davvero semplicissima.

La cosa che lo rende a suo modo unico è la possibilità di mappare la pagina/porzione con tutti i link presenti...

» continua

Per farvi capire di cosa si tratta provate a passare il cursore sull' immagine sotto, i link sono attivi:

Come funziona

kwout step 1

Per prima cosa possiamo utilizzare il sito, ma la vera efficacia di servizi simili è la possibilità di utilizzarli in ogni momento e fuori dal loro contesto. In pratica il bookmarklet: kwout ne rende disponibili due, in uno aprirete l' applicazione nella stessa scheda mentre nell' altro ne verrà aperta una nuova.

Una volta aperta l' applicazione caricherà lo screenshot; avete la possibilità di selezionare tre diverse dimensioni, small, medium e large (large=100%, medium=75% e small=50%). A questo punto selezionate con il mouse l' area di interesse (cliccando su un punto e trascinando il cursore senza rilasciare) e cliccate su Cut Out.

La nuova pagina che si aprirà conterrà tutte le opzioni di pubblicazione ovvero:

  1. Le opzioni di visualizzazione dell' immagine; con o senza bordi, con o senza angoli arrotondati e con o senza ombra esterna. Infine potete selezionare un colore di sfondo.
  2. Potete scegliere se includere o meno la mappatura dell' immagine.
  3. Il tipo di embed disponibile, di default è selezionato web site ma potete scegliere anche flickr o Tumblr (???)
  4. Il codice vero e proprio da copiare e incollare.

Rispetto ad altri servizi "simili" (mi viene in mente picnik) è assolutamente più veloce e semplice; inoltre la mappatura dell' immagine è oggettivamente un punto importante.

Un campo di utilizzo pratico potrebbe essere quello della ricerca e documentazione di cloni... molto meglio della cache di Google ;)

Etichette: , , ,

YouTube ancora al lavoro 14/06/07

YouTube

Ormai lo sapete, YouTube ha cambiato il suo player video, ma anche la piattaforma ha introdotto alcune novità...

» continua

Nella colonna di destra, di fianco al video, trovate un bel link che vi invita a provare la nuova versione della pagina (ovviamente beta):

YouTube - particolare

Cliccando noterete subito delle differenze; nella stessa colonna compaiono anche altri video dell' utente, video inclusi nel canale.

YouTube - particolare nuova versione

Ma la novità più interessante è nella parte dedicata alla condivisione: infatti troviamo le note del filmato ed il link alla pagina (dobbiamo cliccare su more info per quest' ultimo) e soprattutto la possibilità di visualizzare o meno i video suggeriti. Questa funzione, attiva di default, non era piaciuta a molti e gia era possibile agire "manualmente" (nella coda dell' URL, sostituendo rel=1 con rel=0, che in realtà è quello che si ottiene spuntando una delle due opzioni):

YouTube - particolare nuova versione

I commenti ancora una volta sono stati ascoltati, bene... vi lascio con una curiosità, guardatevi il video utilizzato negli screenshot, un' esperimento della TV canadese con Facebook... interessante...

Etichette: , ,

Il prossimo player YouTube 27/05/07

You Tube

Sul blog Google Operating System è comparso questo post dedicato al nuovo player che YouTube sta testando.

Grazie ad alcuni screenshot possiamo apprezzare i cambiamenti (assai minimali ma sostanziali) e "la mano di google"...

» continua

Prima evidente novità - ereditata da google video - la possibilità di scorrere il filmato fin dall' inizio; potremo saltare da una parte all' altra del video senza aspettare il caricamento completo.

YouTube screenshot 1

Per ogni video avremo i filmati collegati (related) non più nella pagina ma direttamente nel player, con un menù stile Mac OS:

YouTube screenshot 2

Il tasto menù apre il codice embed e l' url della pagina, sempre all' interno del video e senza interrompere la riproduzione:

YouTube screenshot 3

Chiaro che una foto è una foto ma sembra proprio che google creda fermamente nel sistema (visto quanto gli è costato vorrei vedere)... bene no?

Etichette: , ,

Picnik: editor immagini #2 08/05/07

Picnik editor d' immagini online

Vi avevo segnalato in questo breve post questo utilissimo tool: Picnik, applicazione dedicata all' editing e salvataggio di immagini da browser; torno sull' argomento perchè ho notato una piccola novità nella home che in realtà nasconde una vera e propria chicca.

Una volta registrati potete installare un estensione per Firefox (anche per IE) che renderà la cattura di immagini e schermate del browser un gioco da ragazzi...

» continua

Prima cosa, dopo la registrazione, installate l' estensione per Firefox (versione 1.5 ma è richiesta la 2.0 per alcune operazioni tipo lo screenshot di pagine web) che trovate in questa pagina.

Ora, ogni qual volta abbiate necessità di salvare/editare qualsiasi immagine passi dal browser, basterà spostare il cursore del mouse sull' immagine e cliccare il tasto destro.

Selezionando Edit Image in Picnik (come nella foto), verrete reindirizzati nella pagina di login ed effettuato l' accesso potrete "lavorare" la vostra immagine a vostro piacere... ma il bello deve ancora arrivare...

Se volete salvare uno screenshot di una pagina web potrete farlo direttamente dal browser e potrete decidere se salvare solo la parte visualizzata nella finestra o (bellissimo) l' intero documento

Anche qui tasto destro e poi Send Page to Picnik: Visible Page per "fotografare" solo la porzione di pagina visualizzata o Full Page per lo screenshot del documento intero, facile, veloce e utilissimo.

Non mi dilungo sugli strumenti a disposizione una volta entrati nell' applicazione; ci sono tutte le funzionalità di un editor di immagini (certo non è Photoshop) come ridimensionamento, selezione di porzioni, ottimizzazione colori, contrasto ed alcuni filtri di base (seppia, scala di grigi ed altri - non manca nemmeno un "arrotondatore" di angoli o la possibilità di creare un bordo colorato).

Certo non è uno strumento paragonabile ad un software professionale, ma l' utilità (ad esempio se vogliamo pubblicare immagini sul blog) è fuori discussione e considerando che è gratuito un test lo merita sicuramente.

Etichette: , ,

Nokia E61: cercasi guru 04/05/07

Dopo un pò di tentennamenti mi sono deciso: ho comprato il Nokia E61. Molto in ritardo rispetto alla segnalazione ma motivato e disposto ad apprendere (nello screenshot vedete le prime applicazioni che ho installato) sono qui a scroccare consulenze.

Se hai anche tu l' E61 e vuoi descrivermi la tua esperienza fallo liberamente. Se sei uno smanettone con la vocazione da evangelista evangelizzami. Se sei un guru del Symbian OS e vuoi svelarmi i segreti nascosti di questo pocket-office non aspetto altro... aggiungimi pure a skype!!!

Etichette: , ,

New Blogger: post espandibili 18/04/07

Con questo tutorial colmo una lacuna che il precedente Blogger- post espandibili aveva: non funzionava con la nuova versione di Blogger (ex beta)... in realtà con un pò di lavoro è possibile adattarlo ai nuovi tags ma ci vuole un pò di pratica e comunque, meglio essere precisi.

Grazie ad alcuni screenshot vedremo come realizzare un post espandibile con la nuova piattaforma e per farlo useremo il metodo ormai più diffuso (in attesa che Blogger aggiorni la guida): Super Peek-A-Boo Posts ci permetterà di creare i nostri sommari espandibili grazie a javascript, CSS ed una paio di tags condizionali...

» continua

La descrizione dettagliata (in inglese) dello script, realizzato da Ramani e Hans, la trovate a questo indirizzo. Dovremmo fare attenzione nell' inserire il codice al nostro modello, per questo ho voluto "fotografare" il tutto quindi cliccate sugli screenshot per ingrandirli e fate attenzione ad incollare il codice nei punti indicati (trovare il punto esatto sarà l' unica difficoltà). Ma andiamo con ordine:

1.Nel pannello di controllo di Blogger, entriamo nel nostro Modello e selezioniamo Modifica HTML ricordandoci di spuntare la voce espandi i modelli widget.

Tutorial Post Espandibili - screenshot 1

2. Ora dobbiamo cominciare ad inserire il codice, partendo con l' inclusione del javascript : copiate il seguente codice ed incollatelo subito dopo il tag <head>:

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Tutorial Post Espandibili - screenshot 2

3. Prestate molta attenzione, adesso, alla zona di pagina, dobbiamo trovare <div class='post-body'>; scorrete la pagina nell' editor fino a trovare la parte indicata (fate riferimento allo screenshot successivo) e sostituitela con questo codice:

<div class='post-body' expr:id='"post-" + data:post.id'>
Tutorial Post Espandibili - screenshot 3

4. Andiamo a capo ed incolliamo nella nuova riga questo:


<b:if cond='data:blog.pageType == "item"'>
Tutorial Post Espandibili - screenshot 4

5. Andiamo a capo dopo <p><data:post.body/></p> (che lasceremo inalterato) e incolliamo il codice seguente:


il codice è qui
Tutorial Post Espandibili - screenshot 5

6. Salviamo e procediamo alla formattazione dell' editor, siamo alla fine....

7. Entriamo nelle Impostazioni e selezioniamo Formattazione:

Tutorial Post Espandibili - screenshot 6

8. Scorriamo fino in fondo la pagina ed inseriamo il seguente codice nell' ultimo campo, Modello post:

Qui il sommario <span id="fullpost"> Qui il resto del post </span>
Tutorial Post Espandibili - screenshot 7

9. Adesso vi ricordo solo che il vostro editor, nella pagina di posting, si presenterà in questo modo:


Qui il sommario <span id="fullpost"> Qui il resto del post </span>

Non c' è molto da aggiungere (anzi si, andate a capo tre volte per avere la stessa formattazione dell' ultimo screenshot): se volete utilizzare l' espansione del post, inserite un sommario nella prima riga e il resto dell' articolo nella terza; ora il post prevederà, in un nuovo paragrafo finale, il link continua a leggere... che permetterà di leggere tutto il post. Se non volete servirvene (un breve post, un video etc.) cancellate le quattro righe e scrivete il vostro post, in questo modo il link scomparirà... è tutto

Etichette: , , ,


Ultimi commenti