Undolog.com

Aggiornamento: Blogbabel ha chiuso – tutti i servizi, widget e plugin non sono più attivi

Quando si deve “verificare” una nuova tecnologia, la cosa migliore da fare è trovare un’applicazione da scrivere e darsi da fare per realizzarla. In questo modo si imparano moltissime cose in brevissimo tempo. Bisogna avere un obiettivo, insomma! Premetto che io non ho niente a che fare con Blogbabel Italia. Qualcuno penserà che lavoro per loro… Assolutamente no!! Il motivo per cui ho scelto di realizzare questa applicazione è dovuto al fatto che avevo il codice in Flash (Actionscript 3.0 nell’ultima release) e volevo vedere cosa accadeva ri-scrivendo l’applicazione in AIR/HTML. E poi, ormai, mi sono affezionato a questo “tormentone” del ranking di Blogbabel
Per realizzare questa “prima” applicazione AIR, dopo numeose prove, ho usato esclusivamente Dreamweaver. Blogbabel Rank è scritto totalemte in AIR/HTML. Per installarlo scaricate le runtime Adobe AIR e cliccate qui.

Continua...

PASSO 1

Create un’immagine di almeno 800×600 pixel. Aggiungete un layer (bck) – che sarà il nostro sfondo – e disegnate lo spazio. Dev’essere un’immagine scura! Potete divertirvi a realizzarla voi o inserire (come ho fatto io) alcune spettacolari immagini della nasa, regolando i livelli in modo che venga comunque scura. Dal menu Filtro selezionate Rendering/Riflesso lente – creiamo il nostro sole! Potete farlo “sorgere” dove volete… io l’ho posizionato al centro verso l’alto dell’immagine:

Continua...

Come aveva previsto Julius arrivano le prime richieste di Logo restyling… da amici che, giustamente, hanno detto “e a me?!”. Ovviamente abbiate pietà… sia perchè lo faccio come lavoro sia perchè ho famiglia!

Comunque, come al solito, sono partito da:

ORIGINALE

SEMPLICE WEB 2.0 STYLE

Estremamente semplice! Ho voluto giocare sugli esagoni dell’alveare…

Un logo, secondo me, è “bello” quando può essere visto anche a due colori.

 

VARIANTE “PHOTOREALISTICA”?

Questa è una prova… non è propriamente un logo! Si differenzia dal precedente per lo “style” del tratto, nulla più.

(clicca sull’imagine per ingrandire)

Continua...

Se un esempio vale più di mille spiegazioni, ecco come comprendere la differenza tra la percentuale di trasparenza (alpha) della proprietà opacità e la percentuale di riempimento. Entrambe, infatti, agiscono sul Layer e, in alcuni casi sembrano davvero identiche. Comunque sia, se Adobe l’ha separate, un motivo ci sarà! La differenza è semplice: opacità agisce sull’intero Layer, effetti compresi. Riempimento, invece, si limita al contenuto del Layer senza influire su eventuali effetti aggiuntivi. Create un’immagine simile a quella mostrata qui sotto:

   

Impostando alternativamente opacità su 10% e poi riempimento a 10%, ci rendiamo subito conto della differenza:

  

Tutto questo può essere utile, ad esempio, per realizzare cose come questa:

(clicca sull’immagine per ingrandire)

Prossimamente pubblicherò un post con il tutorial – passo passo – per realizzare l’illustrazione mostrata qui sopra!

Continua...

Ogni tanto mi piace rielaborare qualche bel logo che vedo… Visto che JuliusDesign ha appena rinnovato il suo look, non ho resistito alla tentazione di “giocherellare” con il bel nuovo logo da lui realizzato!

ORIGINALE

Questo è il logo da cui sono partito, semplice, style web2.0, perfetto!

IDEA

Tra l’altro, appeno l’ho visto mi ha ricordato qualcosa di orientale. Io ci vedo un Ninja – o giù di lì – rovesciato. Caso mai con due occhietti:

 

RESTYLE

Ecco una rielaborazione spettacolare! Formato Lux, per così dire.

 

Con sfondo e rilfesso…

(clicca sull’immagine per ingrandire)

Continua...

Segnalo un’interessante «[...] guida per chi vuole (o deve) passare da Freehand MX a Illustrator CS3». Lo si può acquistare in forma cartacea tramite Lulu e leggere in PDF direttamento sul sito web dell’autore.

«Ho pensato “Grafici al bivio” come un manuale di sopravvivenza per tutti quei grafici che vogliono (o devono) fare il grande passo verso Illustrator CS3. Abbandonare Freehand non è semplice, si sa… il problema di fondo, oltre alla diversa interfaccia e alle funzionalità, è proprio la “forma mentis” del tipico Freehandista. Ecco quindi che in questo libro, con serenità e oggettività, ho cercato di affrontare l’argomento, concentrandomi non solo sulle novità di Illustrator CS3, ma descrivendo come, per un “Freehandista”, determinate azioni, possano essere compiute in Illustrator, oltre ovviamente a delineare quale deve essere l’approccio globale al progetto. In buona sostanza poi il testo è anche ottimo libro e manuale per Illustrator CS3.»

Continua...

Appena rilasciata ecco l’ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch’essa le funzioni per “aprire” delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 – che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.

Un’aspetto interessante di questa libreria è l’estrema cura della grafica con cui si presenta.

Voto: 9 – Home page di Lightview

Continua...

Ho pensato a quanti “bozzetti” e Case Study ho fatto per i clienti, così ho deciso di proporli, con una categoria propria (Case Study), invece di lasciarli “marcire” nel mio HD. Il cliente, infatti, sceglie una delle n proposte, spesso quella che non ti aspetti e le altre, alcune che ritenevi valide, rimangono sconosciute zippate nell’HD! Le proposte grafiche per un sito Web, ad esempio, o semplici studi su loghi o effetti.

PERSONALI: CASE STUDY E-LEMENTI.COM

Alcuni studi, realizzati da me e da =stid=, sul sito e-lementi.com

Per la galleria ho utilizzato Shadowbox.js: usa il tasto ESC per chiudere l’anteprima e i tasti cursore per andare avanti e indietro.

Continua...

Qualcuno potrebbe dire -  e non a torto – basta! Di librerie Javascript (Unobtrusive – non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.

SLIMBOX 1.41

Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l’estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime… al limite può essere utile questo

Voto: –6 – Home Page Slimbox, Home Page Reflection.js for MooTools

LIGHTBOX2

Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l’attributo rel per identificare i link delle immagini da processare:

Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:

Voto: 6 – Home Page Lightbox2

LIGHTWINDOW 2.0

Anche questa è abbastanza diffusa! Dopo tutto come capire qual’è la più usata? . Comunque sia è estremamente completa  e versatile. Sul sito campeggia la richiesta di donazioni per l’acquisto di un Mac… un tantino invasiva e pressante… Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author,caption e title) altri obbligatori (class e  params -per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l’attributo rel:

Voto: 8 – Home Page LightWindow 2.0

SHADOWBOX 1.0B

Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file “adapter” appositamente realizzati e fornite dall’autore:

• Yahoo! User Interface Library (yahoo, dom, event, anim)
• Ext (standalone, ext-core.js)
• Prototype + Scriptaculous
• jQuery
• MooTools (requires Fx.Styles and its dependancies)
• Dojo Toolkit (thanks Peter Higgins)

L’effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:

Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:

Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria… Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.

Voto: 9 – Home Page Shadowbox 1.0B

Continua...

Ecco una dimostrazione di quanto è semplice sviluppare applicazioni in Flash CS3. Dopo le varie discussioni sullo sviluppo di uno strumento “erase”, propongo una semplice applicazione che implementa in modo completo alcune delle cose dette nei precedenti Post. In questo esempio ho inserito una ToolBar “draggabile”, la possibilità di scegliere il colore del pennello e quello di sfondo, la selezione dello strumento “erase” e un leggero effetto “blur” durante il disegno!

Scarica il sorgente per Adobe Flash CS3 Professional

Continua...