Mostrare emoticon animate nei commenti di un post di Blogger.

Il fascino delle emoticon deriva dalla impossibilità di manifestare in modo chiaro in un testo uno stato d'animo. Fu per questo che agli albori del web furono inventate le emoticon. All'inizio si trattava di di una semplice unione di caratteri che riproduceva in modo stilizzato le espressioni facciali. Successivamente sono state introdotte delle vere e proprie immagini che vengono largamente utilizzate in servizi quali Messenger, social quali Facebook e applicazioni quali WhatsApp.

In un articolo di Blogger è facilissimo inserire selle emoticon se si utilizza l'Editor Windows Live Writer che ci mette a disposizione tutte le emoticon della Microsoft. Questa possibilità è ovviamente una prerogativa esclusiva dell'autore degli articoli. Può però essere utile ed è senza dubbio carino poter inserire delle emoticon anche nei commenti.

Mi sono più volte occupato di questo tema. Ricordo tra gli altri gli articoli

1. Emoticon animate su Blogger -
2. Emoticon per blog con commenti nidificati -

Cascata di cuoricini animati per San Valentino da inserire in tutti i blog.

Come negli anni passati vado a proporre un widget adatto agli innamorati e a quelli che vorrebbero esserlo. Si tratta di uno script molto semplice che può essere installato nei blog situati praticamente su tutte le piattaforme. Per un sito su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript mentre per Wordpress si va su Aspetto > Widget > Testo. Su altri servizi esisteranno certo degli strumenti analoghi per incollare un codice javascript. Al limite può anche essere incollato nella pagina web in modalità HTML.

Quest'anno San Valentino e il Carnevale arrivano quasi in contemporanea quindi ero indeciso sulla personalizzazione da pubblicare per prima. Visto che San Valentino precede il Carnevale di qualche giorno ho pensato di riproporre una cascata di cuoricini animati che cadono nel blog.

Effetto Groovy 1970s per inserire barre colorate e animate sullo sfondo del blog.

Dallo stesso autore del Tinkerbell Mouse Effect di cui potete vedere una demo in questo post, e che crea una scia di stelline colorate al passaggio del mouse, vi presento il Groovy 1970s Effect. Si tratta di visualizzare nello sfondo del blog delle animazioni di barre colorate di cui si possono personalizzare i colori, la velocità e la dimensione.

Si può vederlo all'opera nello sfondo del blog che uso come motore di ricerca esterno: Demo Effetto Groovy 1970s. Le animazioni sono visualizzate solo nella parte di background non occupata dai contenuti del blog come l'area del post e le sidebar

3D Package per creare immagini in tre dimensioni.

3D-Package è una bella applicazione online per creare delle scatole di immagini in tre dimensioni e per orientare la visione a nostro piacimento. Per prima cosa ci dobbiamo procurare delle foto che siano compatibili con le facce del parallelepipedo della presentazione. E' consigliabile che le dimensioni delle foto siano simili e che due di esse siano "strette".

Come inserire nel blog effetti di cuori animati per San Valentino.

Lo scorso hanno avevo creato questo effetto e avevo postato lo script su Google Page Creator che adesso ha chiuso i battenti. Ritengo quindi utile riproporlo per tutti i blog che vogliono in qualche modo festeggiare San Valentino. E' chiaro che l'effetto può anche essere lasciato tutto l'anno ed è molto indicato per siti che fanno del romanticismo la loro principale prerogativa.
Gli effetti che ho preparato sono due e mostrano delle cascate di cuoricini animati che attraversano tutto il blog.


Cuori lampeggianti

<script src="http://idee-per-computer-ed-internet-script.googlecode.com/files/cuore-che-lampeggia.js" type="text/javascript"></script>

 Mentre clicca nel collegamento per vedere un dimostrazione della "Cascata dei cuori che lampeggiano".




Cuori pulsanti

<script src="http://idee-per-computer-ed-internet-script.googlecode.com/files/cuore-che-pulsa.js" type="text/javascript"></script>

 Per vedere la demo clicca su "Cascata di cuori che pulsano".


Per inserire gli effetti basta andare su Layout >Aggiungi un gadget > HTML/Javascript, incollare il codice in Sezioni del sito senza inserire il Titolo. Salvare il modello e posizionare con il mouse l'elemento in una posizione centrale e possibilmente in alto. 


L'effetto sarà maggiore quando si apre la pagina e quando la si scorre.

Voki per creare divertenti avatar animati e che parlano.

Voki è uno di quei servizi che apparentemente hanno solo uno scopo di puro divertimento ma che invece possono essere un utile strumento didattico soprattutto per quando riguarda la scuola materna e primaria. Si tratta infatti di creare avatar animati che riescono anche a parlare. Occorre una registrazione e la successiva attivazione mediante email. Se si clicca su Get Started si apre il pannello di lavoro

Si può cercare l'avatar che ci piace di più in una vasta scelta, quindi personalizzarlo scegliendo il colore della bocca, degli occhi, della pelle e dei capelli. Si può anche inserire l'audio attraverso il telefono, un microfono, un file o la mera immissione di un testo.

In quest'ultimo caso gli accenti disponibili sono solo l'inglese, il basco, il catalano e il cinese. Si può anche scegliere un'immagine di sfondo e un tema. Infine si procede alla pubblicazione. Il processo può durare diversi secondi ma ne vale la pena.

Motion Portrait è un'applicazione giapponese che trasforma le foto in animazioni in 3D.

Motion Portrait fa parte di quelle applicazioni che forse servono a poco ma che sono decisamente stupefacenti. Quando siete in Homepage cliccate su CHANGE, quindi su Upload per caricare una vostra foto che dovrà essere in formato JPG inferiore ai 5MB.

Successivamente cliccate su You per sostituire la foto di default con la vostra

 

La vostra immagine, che dovrà essere preferibilmente con le labbra chiuse e gli occhi aperti, comincerà ad animarsi con movimenti degli occhi e della testa.

Per il momento si tratta di sperimentazioni quindi non è possibile scaricare il risultato in formato GIF o Flash. Si può però registrarlo con un programma di screencast. Ho caricato una foto di Marylin Monroe ed ecco la registrazione video, convertita in SWF con Format Factory, caricata nel web su ImageShack  e inserita nel post secondo le regole del W3C 

Se qualcuno che conosce il giapponese ha qualche idea per poter scaricare le realizzazioni non mi offendo se lo scrive nei commenti. Si possono anche cambiare i capelli, acconciatura, aggiungere, baffi e barba. Insomma un sito per giocherelloni .

EmotiYou per creare delle emoticon animate da delle immagini.

Se siete degli appassionati di emoticon animate (animoticon) avrete certamente visto che in questo blog c’è la personalizzazione per inserirle nei commenti. Ci sono dei siti web-based in cui crearle da delle nostre foto o da foto di amici, per esempio FGT Makers, oppure Emoticon Maker o anche Loogix che forse è il più carino.

EmotiYou è un altro servizio di questo tipo che consente di creare emoticon animate oppure di scaricare quelle create dagli altri utenti. E’ disponibile in lingua inglese e francese e, per iniziare, si clicca su Create My Emoticon e si carica la foto cliccando su Send, quindi con l’apposito rettangolo si ritaglia la parte della foto che si vuole utilizzare e si va su Next Step

Si sceglie l’effetto che più ci piace tra

1. Static -
2. Fun – l’immagine sobbalza in senso verticale
3. Appears- Bottom to top, Top to Bottom, Right to Left, ecc – Cioè appare dal basso verso l’alto, dall’alto verso il basso, ecc
4. Egyptian – ha un moto oscillatorio orizzontale sulla falsariga dei dipinti egizi
5. Mirror – Appare alternativamente insieme alla sua immagine speculare
6. Zoom – Si ingrandisce e si rimpicciolisce in modo ciclico

Si clicca nuovamente su Next Step, si inserisce il nostro indirizzo email e si prosegue con lo stesso bottone. Si mette il segno di spunta sull’accettazione dei termini d’uso, eventualmente si può inserire anche la flag per mostrare la nostra realizzazione in galleria, finalmente si va su Create My Emoticon. L’immagine ci verrà recapitata all’indirizzo email che abbiamo fornito entro pochi minuti.

Se volete inserire questa emoticon animata su Messenger andate su Strumenti > Emoticon e cliccate su Crea

             

quindi su Trova immagine per selezionarla dal computer. Facoltativamente si può anche inserire un nome e una scorciatoia da tastiera. L’immagine sarà ridimensionata automaticamente.

Ecco alcuni esempi di emoticon animate create dai frequentatori di EmotiYou.

 

Come inserire emoticon animate (animoticon) nei commenti di un blog su Blogger con l’opzione pagina intera o finestra pop-up.

In un blog su Blogger si può scegliere di inserire i commenti in tre diversi modi

1. Pagina intera
2. Finestra popup
3. Incorporato sotto il post

Per selezionare l’opzione preferita si va su Impostazioni > Commenti > Posizionamento modulo dei commenti e si mette il segno di spunta sulla modalità prescelta ricordandosi di Salvare le impostazioni

In questo blog per il momento ho scelto la Finestra popup. In un articolo di diverse settimane fa avevo parlato di come inserire delle emoticon animate nei commenti ad un articolo. Il metodo illustrato però funzionava solo se si avevano i commenti incorporati sotto il post.
Purtroppo esiste Internet Explorer che è tuttora il browser più usato anche se, per fortuna, sta perdendo utenti continuamente! Il fatto è che detto browser non riusciva ad aprire le pagine di questo blog con quella modalità di commenti e con la presenza del widget Google Friend Connect.

Tutta la storia l’ho raccontata nell’articolo

• Il blog si vede nuovamente anche con Internet Explorer -

Per quanto riguarda il widget Google friend Connect ho supplito con l’inserimento di uno screenshot come spiegato nel post

• Come farsi seguire con Google Friend Connect senza inserire il widget -

Restava quindi il problema delle emoticon animate che non potevano essere più inserite. Adesso ho risolto anche questo piccolo problema e brevemente ne illustro il procedimento.
Andare su Layout > Modifica HTML, scaricare un modello completo e espandere i modelli widget. Cercare la seguente linea di codice

<div class='post-footer-line post-footer-line-3'/>

Se non si trova questa linea può essere che ci sia un altro numero al posto del 3. In ogni caso possiamo anche procedere per tentativi visto che abbiamo salvato il modello e quindi lo possiamo all’occorrenza ripristinare.

L’idea è quella di mettere le faccine proprio alla fine dell’articolo, sotto anche al nome dell’autore, l’ora di pubblicazione e le etichette. E’ ovvio che a secondo dei modelli uno può scegliere un’altra posizione. Per quanto riguarda questo blog immediatamente sopra alla succitata riga di codice è stato inserito quest’altro codice, come mostrato in questo screenshot

Il codice in questione deve essere personalizzato a seconda del modello del nostro blog. Alcune personalizzazioni potrebbero essere queste

- Togliere i due tag <center> e </center> se si vuole che il rettangolo con le faccine sia sulla sinistra e non al centro

-Il colore del testo #191919 e il background #FFFFFF può essere variato a seconda dei colori del blog

- La percentuale del rettangolo è del 68% ed è stata calcolata per questo layout dopo vari tentativi. Se avete un layout più stretto vi consiglio di partire con una percentuale superiore (p.e. 80%) per poi scegliere quella che dà i migliori risultati estetici. Detta percentuale rappresenta la larghezza del rettangolo in cui sono rinchiuse le faccine animate.

- L’espressione “Combinazione di tasti per inserire emoticon animate nei commenti” può essere ovviamente sostituita con un altra.

Dopo aver salvato il modello vi accorgerete che la Homepage avrà lo stesso aspetto ma i singoli articoli, nella parte bassa si presenteranno più o meno così

Per completare l’opera bisogna aggiungere lo script che consente di sostituire automaticamente i gruppi di segni ortografici con le relative faccine.

Sempre in Layot > Modifica HTML cerchiamo la seguente riga di codice

</body>

che si trova nella parte conclusiva del modello e, immediatamente sopra, inserite quest’altro codice

<script src='http://is.gd/3pxvm' type='text/javascript'/>
<noscript><a href='http://parsifal32.blogspot.com' target='_blank'><span style='font-size: x-small;'>Aggiungi emoticons</span></a></noscript>
come mostrato nello screenshot seguente

Salvate il modello. Adesso provate ad inserire come commento delle combinazioni di tasti presenti nel riquadro alla fine del post

Ecco come sarà visualizzato da Firefox, Chrome, Opera (non Internet Explorer!)
 
Termino questo lungo post ricordando che il segno della tilde (~) si ottiene digitando 126 con il tastierino numerico tenendo premuto Alt e che lo script è retroattivo; cioè se in qualche commento precedente sono presenti delle combinazioni come quelle previste allora vi apparirà anche la relativa animoticon.


Aggiornamento Importante: Questo tutorial è obsoleto. Per inserire le emoticon nei commenti di Blogger consultate quest'altro articolo

Screedbot per creare scritte con effetto macchina da scivere, ideale per banner e annunci da inserire nel blog.

Screedbot è della stessa famiglia del già recensito Roflbot ed è un tool molto carino per generare scritte che si manifestano progressivamente come fossero digitate momento per momento. Forse è il caso che ne mostri una e poi illustro il procedimento semplicissimo per crearla

Per generarla bisogna

1. Digitare il testo
2. Scegliere la larghezza della scritta e la dimensione del font in pixel
3. Immettere i codici dei colori del testo e dello sfondo
4. Cliccare su Crea Massetto

L’immagine in GIF ottenuta può essere scaricata cliccando con il destro del mouse e salvata come una normale immagine. Si può anche caricare su Flickr, ImageShack o usarla come immagine personale su LiveJournal.

Come creare avatar animati con effetti speciali usando Avatar Photo!

Avevo già parlato di Makeup Photo per migliorare le nostre foto online. In un’altra sezione dello stesso sito, Avatar Photo!, esiste anche la possibilità di creare degli avatar animati veramente sensazionali

Non vi resta che scegliere se fare l’upload della vostra foto dal computer (Browser) o direttamente inserendone l’URL quindi cliccare su uno dei numerosi effetti presenti. Quelli a disposizione sono veramente tantissimi

Ho voluto provare qualche variante al mio classico avatar , che inoltre può essere personalizzato anche come dimensioni e scaricato cliccando su Save to disk. Ecco degli esempi

                           

La modella che fa l’occhiolino è decisamente più carina di me!

Come creare scritte animate in formato GIF con Live Typing.

 Live Typing non ha bisogna di registrazione ma questa è consigliata per salvare le nostre realizzazioni. Si possono scegliere

1. Caratteri
2. Dimensioni
3. Velocità della digitazione virtuale
4. Larghezza dell’immagine generata da 100 a 1000 pixel

Si digita il testo e si va su ENLIVEN. Se si clicca con il destro del mouse sulla scritta generata, questa si può scaricare come fosse un’immagine ed in effetti lo è. Basta scegliere Salva immagine con nome. Volendo si può caricare su un hosting tipo Skydrive ed inserirla in un post o nel blog. Ecco un esempio

Fonte | Killerstatups -

 

Come creare dei cartoni animati simili alle marionette con Animata.

Certamente avrete assistito, se non dal vivo almeno in televisione, a degli spettacoli di marionette in cui mediante dei fili vengono fatti muovere i pupazzi che sono in scena.

Con Animata, che è un progetto Open Source, si può creare  qualcosa di molto simile ai movimenti delle marionette. Il software mette a disposizione un tool per creare uno scheletro a maglie da inserire dentro delle  immagini che hai già nel tuo hard-disk. Non occorre essere un’artista basta fissare dei punti fissi e altri mobili. 

Il software lo puoi scaricare da questo collegamento. Ci sono versioni per Windows e per Macintosh. Il video seguente spiega meglio delle parole come procedere

Per altri video-tutorial consultate questa pagina. Per vedere una realizzazione completa guardate il video qui in basso (ci vuole qualche secondo di attesa)

Textanim per creare testo animato in GIF.

Il sito è disponibile in inglese, francese, spagnolo e italiano e permette di creare scritte animate con colori e testo personalizzato.

Textanim ha un funzionamento molto intuitivo

Si inserisce il testo, si scelgono il tipo di font e le sue dimensioni, il colore dello sfondo, il tipo di ombra infine il ritardo di circolazione. Non appena fatto, si clicca su Generare.

Il testo così editato apparirà in alto e per scaricarlo basterà cliccarci sopra col destro del mouse e scegliere Salva immagine con nome. Ecco un esempio

E’ un tool semplice ma che può essere utile quando si vuol creare qualcosa di originale.