Web-O-Matic

Sprout è finalmente aperto al pubblico ed ora chiunque può creare il proprio widget fatto davvero su misura.

Sprout offre, tramite una semplice ma completa interfaccia in flash, diversi strumenti per creare dei widget dai contenuti su misura e dalla grafica altamente personalizzabile.

Ma andiamo subito a vedere come funziona.

In questo esempio procederemo alla creazione di un widget contenente un elenco dei post del proprio blog.

Andiamo allora su http://sproutbuilder.com/ e clicchiamo sul pulsantone rosso “GET STARTED!”. La pagina seguente ci avviasa che possiamo utilizzare il servizio senza neanche registrarci (anche se per portare a termine l’operazione dobbiamo farlo, ma anche in seguito va bene), clicchiamo ancora sul pulsante rosso al centro ed attendiamo qualche secondo.

Ora possiamo scegliere tra una piccola serie di progetti base, oppure partire con una pagina bianca.

Tra i modelli, scegliamo “Cause Sprout” (quello bianco e verde), posizioniamoci sopra col puntatore e quindi scegliamo “Open in builder”. Successivamente inseriamo un nome per identificarlo e salvarlo successivamente. Diamo inizio al progetto ed attendiamo che venga caricata l’interfaccia.

Se usiamo programmi come Photoshop o simili, noteremo un’interfaccia piuttosto familiare e questo ci renderà tutto molto più intuitivo.

Al centro c’è il progetto appena aperto, ma contiene elementi e pagine (perchè ogni progetto può contenere anche più pagine) che non ci servono. Andiamo quindi ad eliminare le parti in più.

Clicchiamo una volta sulla scritta in alto, così che apparirà un bordo trattecciato, quindi premiamo il tasto CANC sulla nostra tastiera; proseguiamo così anche con l’immagine al centro e con i 4 pulsanti in basso.

Ora rimane soltanto l’immagine curva in basso, che decidiamo di tenere, però spostiamola un po’ verso il basso, così da renderla solo un elemeto di abbellimento e lasciare così più spazio al testo. 

Clicchiamoci sopra e trasciniamola in basso.

Mentre l’immagine ha ancora la selezione (il contorno tratteggiato) posizioniamoci col puntatore sul pallino in basso e rendiamo l’immagine più sottile, andando a trascinare il pallino verso l’alto.

Ora abbiamo la base per la nostra pagina, ma più in basso notiamo una barra che ci mostra le altre pagine presenti nel progetto. Visto che non c’interessano, possiamo eliminarle. Non dovremo far altro che selezionare la pagina che vogliamo cancellare e poi cliccare su “Delete”, infine confirmare l’eleminazione. Procediamo, rimuovendo anche le altre pagine.

Ora siamo rimasti solo con la nostra prima pagina e continuamo a lavorarci per aggiungere altri elementi.

Iniziamo inserendo la parte più “gustosa” ovvero dove comparirà l’elenco dei post del nostro (o altrui) blog.

Clicchiamo sulla barra a sinistra denominata “Components” ed espandiamo, cliccandoci sopra, il menu “General”.

Qui possiamo notare diversi oggetti che saranno la parte più importante dei widget che creeremo. Troviamo così un calendario, una barra di progresso, anteprime per le immagini, ecc.

A noi però ora interessa ”News Feed”, allora clicchiamoci sopra e automaticamente che il campo apparirà sul nostro progetto.

Adattiamolo come ci pare, allungandolo, stringendolo, ecc.

Quando questo campo è selezionato, possiamo inoltre definire altri parametri, andando nella barra a destra.

Qui possiamo innanzitutto inserire l’indirizzo RSS del nostro blog, il numero di risultati massimi, il colore, ecc.

Insomma non c’è che da sbizzarrirsi.

Spostiamo ora il campo “News Feed” appena sopra la nostra immagine verde, dopodiché sulla barra degli strumenti “Tools” a sinistra, clicchiamo sull’icona che presenta un rettangolo bianco sopra e uno azzurro sotto (Move objects back).

Così facendo il testo passerà sotto all’immagine verde andando a creare un’effetto semplice ma carino.

Il più è fatto, ma possiamo abbellire ulteriormente il nostro widget, inserendo qualche scritta e magari un pulsante che rimandi al nostro blog.

Per le scritte è sufficiente scegliere nella barra degli strumenti l’icona a forma di “A” maiuscola, quindi inserire il testo e modificare le varie opzioni.

Per il pulsante che rimanda al nostro blog, andiamo di nuovo su “Components” e su “General”. Sta volta scegliamo l’elemento “Button”. Adattiamo anche quest’oggetto alle nostre esigenze regolandone le dimensioni, il testo e il collegamento al nostro blog.

Per fare quest’ultima cosa dobbiamo però espandere il menu a destra denominato “Links & Tracking”, inserire il nostro indirizzo e, se vogliamo, far aprire la pagina su una nuova finestra.

Il nostro progetto è finito, ma prima di salvarlo e pubblicarlo possiamo vedere l’anteprima cliccando nella barra in basso su “Preview” (Per uscire dalla modalità di anteprima, cliccare di nuovo in basso su “Exit Preview”).

Se il risultato ci soddisfa, possiamo salvarlo tramite il pulsante “Save” in alto e poi pubblicarlo così da renderlo disponibile a tutti, cliccando, sempre in alto, su “Publish”.

A questo punto se non abbiamo effettutato precedentemente la registrazione, possiamo farlo adesso.

Ora possiamo scegliere tra numerose piattaforme dove inserire il nostro widget.

Fortunatamente è supportato anche Wordpress (non sembra vero ), infatti basta copiare il codice che ci viene mostrato, per poi incollarlo nelle nostre pagine.

Il risultato è questo:

La cosa ottima poi, (tra i tanti pregi di Sprout) è il piccolo pulsante “Share” che appare in basso a destra del nostro widget, che permette a chiunque di poter prelevare il codice e pubblicarlo su altri siti.

Le applicazioni creabili con questo strumento sono molte e tutte da scoprire, ma naturalmente la cosa più gustosa è il poter personalizzare tutto come più ci piace.

Se volete segnalare i vostri widget, inseriteli nei commenti.

Condividi

(1 voti, media: 5 su 5)

 Loading ...