Grafica

Se sei appassionato di grafica e vuoi approfondire i temi della comunicazione visiva e della creatività attraverso animazioni e stili, sei nella sezione giusta

Le email animate sono comunicazioni di posta che, anziché comprendere solo testo e immagini statiche, sono arricchite dalla presenza di gif, immagini dinamiche e video.

I contenuti animati sono risorse fondamentali per la creatività della comunicazione aziendale  poiché possono rendere molto più accattivanti email e newsletter e far aumentare, di conseguenza, anche le conversioni.

Leggi tutto 19 febbraio 2018

Le favicon sono un’ icona associata ad un particolare sito web. Si trovano di fianco alla URL ed il loro utilizzo principale è quello di essere visualizzata nella finestra dei preferiti.

Questa icona è in grado di identificare graficamente il sito così come un marchio identifica graficamente una azienda. È molto importante perché garantisce di essere riconosciuti subito, soprattutto da coloro che utilizzano internet aprendo molte finestre.

Più tardi è stato creato un sistema usando il linguaggio HTML per indicare la posizione dell’icona per ogni singola pagina, bisogna quindi usare una riga così: <link rel=”shortcut icon” href=”/favicon.ico” /> in <head>.

In questo modo qualunque immagine di dimensione appropriata (16×16 pixel) può essere utilizzata come favicon e oggi con i browser moderni è possibile generare favicon anche con estensione jpg, png o gif, ma a tutt’oggi il formato “ico” viene letto in maniera corretta dalla maggior parte dei browser.

 

Il formato gif e png serve a creare gif animate, ma bisogna avere un browser che supporti questa funzionalità. (tabella in fondo alla pagina).

È necessario caricare l’immagine sul server sui cui avete il vostro sito, successivamente bisogna aggiungere il tag html nella sezione <head> delle pagine in cui volete che la favicon animata venga vista.

Oggi le estensioni gif. e png. possono essere visualizzate solamente dai browser di ultima generazione. Ci sono 3 estensioni possibili: il formato .ico Pixel 16×16 oppure 32×32 con 256 o 16 milioni di colori.

in formato .gif Pixel 16×16 con 256 colori. Purtroppo le favicon in formato gif animato sono supportate solo da Firefox e Opera.

in formato .png Pixel 16×16 con 256 colori o 24-bit. Fattore molto importante è il nome che dovrà sempre essere favicon.

L’estensione .jpg è identica alla .png con la differenza che non è supportata da Internet Explorer e non supporta la trasparenza.

Supporto dei tipi di favicon

Browser

ICO

PNG

GIF

GIF animato

JPEG

Google Chrome Da 4.0 Da 4.0 No Da 4.0      
Internet Explorer Da 4.0 Da 8.0 No No Da 8.0      
Mozilla Firefox      
Opera No      
Safari Da 4.0 Da 4.0 No Da 4.0      
Allegato: favicon

E-commerce Automation marketing. Titolare web agency magicnet.it a Bologna dal 1996

Pianificazione e sviluppo campagne web-marketing / social marketing / comunicazione per progetti web ed e-commerce.

Buona conoscenza delle tecniche di Search Engine Optimization (SEO) e Search Egine Marketing (SEM), oltre a competenze nella gestione dei social network, dei network di affiliazione e degli strumenti attualmente utilizzati in rete.

Esperienza e conoscenza settore e-commerce, vendita online ai privati (BTC) e ad aziende (BTB)

Leggi tutto 14 marzo 2011

Captify è un plug-in che consente di stilizzare la caption (cioè il testo descritto nel tag alt di un’immagine), permettendo di creare effetti grafici davvero piacevoli.

Ecco qui il sito ufficiale, contenente anche alcuni esempi del plug-in all’opera: jQuery Captify Demo (v1.1.3)

1stonthenet è la discarica dei miei deliri digitali. (cit. Paolo Attivissimo)

Leggi tutto 28 gennaio 2010

Animazione in Flash con testo in movimento, modificabile attraverso un txt esterno

1-    Creare un nuovo documento di testo e assegnargli un nome (es. ‘testo.txt’) 2-    Dare  un nome alla/e variabile/i testo, così:

scritta1=bla bla bla &scritta2=trallallero &scritta3=boh??? ‘scritta1’, ‘scritta2’, ‘scritta3’ sono i nomi delle variabili testuali, precedute (dalla seconda variabile in poi) da ‘&’, seguite da ‘=’ (senza spazi).

3-    Eventualmente, attribuire del codice e formattare il testo (es. scritta1=<font><b><p>DISPLAY ELETTRONICI</p><p>IN VENDITA ONLINE.</p><p>CHIEDI UN PREVENTIVO</p></font></b>).

4-    Aprire un nuovo file in Flash, nella stessa cartella in cui è posizionato il file ‘testo.txt’.

5-    Creare una casella di testo dinamico, senza digitarvi alcun testo all’interno. Scegliere il font e il colore, selezionare ‘multiriga’ e digitare nel campo ‘Var’ il nome della prima variabile, cioè della prima scritta che comparirà nell’animazione, in questo caso ‘scritta1’. Convertirla il un clip filmato.

6-    Al primo frame del livello in uso attribuire la seguente azione: loadVariablesNum(“news.txt”, 0);

7-    In nuovi livelli, inserire gli altri campi di testo dinamico a cui saranno assegnate le variabili ‘scritta2’, ‘scritta3’, ecc.

Questo è il metodo più semplice.

Si può gestire il movimento del testo anche attraverso pulsanti, o uno scroller. Per approfondire, altri tutorial e informazioni utili trovati online: http://www.yappy.it/caricamento_testi_flash.php http://www.flashwork.it/tutorial-flash/casella-di-testo-scorrevole-con-t…

Si può inserire il testo anche a partire da file esterni di diverso formato: http://livedocs.adobe.com/flash/9.0_it/main/wwhelp/wwhimpl/common/html/w…

Ho provato a farlo con un file xml esterno, questo: banner-led.swf \\giobbe\comune\_progetti interni\Banner\display-elettronici\prova-animazione\banner-led E’ solo una prova, molto grezza:  c’è un po’ più di codice in cui sbrogliarsi.. sono partita da qui: http://articoli.v2online.it/newsticker.html

E-commerce Automation marketing. Titolare web agency magicnet.it a Bologna dal 1996

Pianificazione e sviluppo campagne web-marketing / social marketing / comunicazione per progetti web ed e-commerce.

Buona conoscenza delle tecniche di Search Engine Optimization (SEO) e Search Egine Marketing (SEM), oltre a competenze nella gestione dei social network, dei network di affiliazione e degli strumenti attualmente utilizzati in rete.

Esperienza e conoscenza settore e-commerce, vendita online ai privati (BTC) e ad aziende (BTB)

Leggi tutto 23 settembre 2009

Immaginiamo di trovarci nella seguente situazione:

e di aver stilizzato i nostri elementi, tramite il foglio di stile, in questo modo

Tramite le regole del nostro foglio di stile verrà applicata una immagine di sfondo al nostro collegamento ipertestuale.

Supponiamo ora di trovarci nella seguente situazione:

Secondo le regole presenti nel foglio di stile l’immagine di sfondo per il collegamento ipertestuale viene applicata all’immagine del collegamento. Questo può però creare effetti graficamente sgradevoli.

Per ovviare al nostro problema a questo punto bisognerebbe stilizzare l’elemento a che ha al suo interno un elemento img, ossia l’elemento padre dell’elemento img.

E’ possibile farlo attraverso i fogli di stile? Al momento no, per cui, per risolvere il problema dobbiamo rivolgerci a javascript, in particolare a Jquery.

Tramite jquery è infatti possibile risalire al padre di un elemento tramite la funzione parent() e applicare uno stile solo all’elemento selezionato.

Il codice da utilizzare nell’head del nostro documento è

tramite il quale risaliamo all’elemento a che contiene al suo interno un elemento img, e vi applichiamo uno stile (nel nostro caso rimuoviamo l’immagine di sfondo).

1stonthenet è la discarica dei miei deliri digitali. (cit. Paolo Attivissimo)

Leggi tutto 22 settembre 2009

Problema iniziale

La temizzazione dell’elemento HTML Checkbox è un argomento complicato e difficile da standardizzare, a causa delle differenze esistenti tra i browser nel trattarli.

Possibile soluzione

Grazie a JQuery siamo in grado di ovviare al problema con una soluzione rapida e leggera. L’idea è quella di nascondere il checkbox input con i fogli di stile e creare una copia che ne sostituisca la funzionalità in tutto e per tutto. Il clone che utilizzeremo sarà il tag <a>, che potrà pertanto essere completamente personalizzato via CSS.

Applicazione degli script

Dopo aver provveduto all’integrazione delle librerie necessarie, creiamo il nostro clone, facendo attenzione che l’id del vero checkbox corrisponda alla parola chiave utilizzata per il clone; nel nostro caso utilizziamo prova:

FINTO CHECKBOX: <a href=”#prova” id=”fakeprova”>Prova</a>

CHECKBOX ORIGINALE: <input id=”prova” type=”checkbox”/>

Inoltre dovremo inserire nel nostro foglio di stile le proprietà necessarie per rappresentare il nostro tag come preferiamo. Ad esempio:

Il file checkbox.jpg conterrà entrambe le versioni del finto checkbox: spuntata e non spuntata.

checkbox

Il foglio di stile si occuperà poi di spostare l’immagine a seconda dell’intervento dell’utente sulla checkbox.

Ora siamo pronti per creare il codice JQuery necessario per allineare il nostro finto checkbox con quello reale.

Ecco fatto. A seconda della personalizzazione, in particolare dell’immagine scelta per il checkbox, sarà necessario aggiornare alcuni valori del foglio di stile.

1stonthenet è la discarica dei miei deliri digitali. (cit. Paolo Attivissimo)

Leggi tutto 4 settembre 2009