Chimera - Firefox Plugin

In attesa della creazione di un nuovo sito web, postiamo qui sul "vecchio e tralasciato" blog un video dell'ultima creazione di eqepa: Chimera.
Chimera è un'estensione per il browser Mozilla Firefox che mette a disposizione dell'utente un'interfaccia semplice ed intuitiva per la creazione di progetti JavaScript. L'estensione si trova adesso in una versione da testare profondamente quindi non è ancora iscritta nella repository Mozilla.
Le features di questa versione:

• Creazione di progetti in MooTools.
• 3 Preset disponibili: "Fx.Morph", interfaccia all'omonima classe MooTools, "New/Edit Element" che permette la creazione e l'editing via JavaScript di elementi nella pagina, "FunctionCall" che permette di richiamare funzioni definite dall'utente.
• DOM - Inspector. Strumento per la visualizzazione della pagina corrente e utilizzato dall'intera applicazione quando è necessaria la selezione di elementi.

Ecco il video:

Se siete interessati a partecipare alla fase di testing fatecelo sapere!

Continua...

Torna al riassunto...

Web Roundup Giugno: 10 tutorial per creare icone in photoshop e illustrator

Il mese scorso abbiamo raccolto 10 set di icone totalmente gratuite per uso personale e commerciale. Questo mese scaviamo leggermente più a fondo.
Esiste un metodo migliore per non pagare per ottenere una cosa se non farsela da soli?
Questo mese quindi riproponiamo il problema dell'inserimento delle icone nella nostra applicazione/sito web dall'altro lato: come fare da soli icone di effetto.

Di seguito vi proponiamo 10 tutorial per photoshop ed illustrator utili non solo per creare l'icona che fa al caso nostro ma anche, se siamo alle prime armi, per prendere dimestichezza con gli strumenti offerti da tali programmi e le tecniche usate.
Naturalmente questa non è una classifica, i tutorial sono presentati in ordine sparso.

1.Anatomy of an Icon

In questo tutorial per photoshop viene spiegata la tecnica di realizzazione di icone semplici ma efficaci come quella che vedete in alto. A partire da questo si possono realizzare icone raffiguranti qualsiasi cosa, mantendo sempre lo stesso stile.

2.Beginner Illustrator Tutorial - Create a Vector RSS Icon

Tutorial per Illustrator molto dettagliato per la creazione di un'icona di feed RSS. La guida spiega passo passo le tecniche e gli strumenti utilizzati.

3. Vista Error Icon

In questa guida l'autore prende la vera icona di errore di vista e ne crea una simile in photoshop. Utilissimo per apprendere le tecniche utilizzate da grafici professionisti.

4. How to Create an Alarm Clock Icon

Da VectorTuts una guida passo passo per realizzare l'icona di una sveglia in Illustrator. Da notare il livello di dettaglio dell'immagine realizzata, il tutorial infatti è composto da ben 36 passi da seguire per realizzare gli effetti di riflesso, luci ed ombre.

5. Craft a Delicious Chinese Food Icon

Il tema non è dei più utilizzati (non ho visto molti siti in giro con icone del genere...) ma quello che interessa è che in questa guida vengono utilizzate una quantità industriale di tecniche di disegno vettoriale in Illustrator.

6. How to Make a Folder Icon

Tutorial per creare icone raffiguranti cartelle in photoshop. La guida è molto ben fatta, ma mancano gli screenshot di esempio propri del programma: ad esempio l'autore si limita a dire "utilizzate queste caratteristiche di gradiente" senza far vedere come fare...un pò di "googlate" ed il gioco è fatto!

7. How to Design a Set of Multicolored Buddy Icons

Questo tutorial sfrutta tool basilari come le shapes o i gradienti in Illustrator per realizzare icone da utilizzare come avatar di default degli utenti delle vostre applicazioni.

8. Carbon Style Icon

Come realizzare icone in stile "fibra di carbonio" in photoshop.

9. 100% Satisfaction Guaranteed Seal/Badge Photoshop Tutorial

Realizziamo una icona in stile coccarda molto utile nei siti di e-commerce. A partire da questa se ne possono realizzare di tutti i tipi. Tutorial per photoshop.

10. How to Create a Transparent Battery Icon

Un'altro tutorial di tutto rispetto da parte di VectorTuts. Il risultato finale è semplicemente d'impatto e utilizzabile in qualsiasi tipo di design. Inoltre le tecniche che si imparano da questo tutorial sono utilissime.

Fine
Anche questo mese a stento siamo riusciti a postare il nostro appuntamento con il web design.
Alcuni avranno notato che il blog è poco "vivo" ultimamente...La spiegazione sta sempre dietro gli impegni universitari.
Inoltre abbiamo intenzione di spostarci su una piattaforma più potente di blogspot (un hosting serio insomma) che ci permetta di offrirvi un'esperienza migliore.

Dunque, cosa ne pensate di questi tutorial?
State cominciando a "smanettare" con photoshop ed illustrator?
Fateci vedere i vostri risultati!

Continua...

Torna al riassunto...

Web Roundup Maggio: 10 set di icone free

Ecco il primo della serie di Web RoundUps mensili sul web design. Ogni mese cercheremo di trovare nella rete tutorial, freebies ed articoli sugli argomenti che interessano i web designer.
Il mese di maggio lo dedichiamo alle icone.
"Ora mi servirebbe una bella icona a forma di cavatappi" oppure "Qui starebbe bene proprio una bella freccia marrone": quanti di noi non hanno mai pronunciato una frase del genere almeno una volta? Ebbene eccovi una bella raccolta di frecce marroni e icone a forma di cavatappi da utilizzare nel vostro bel blog/sito/programma!

A parte gli scherzi qui di seguito troverete i link alle raccolte di quasi 600 icone (sinceramente non le ho contate bene, è un numero indicativo).
E' bene precisare che tutto il materiale linkato è tutto gratuito per scopo personale o commerciale, riteniamo sia inutile farvi scaricare set ad uso prettamente personale in quanto potrete utilizzarle in progetti commerciali incappando in problemini non banali. E' comunque sempre richiesto (naturalmente) dai creatori dei set un link al loro sito/blog.

1. Onebit Free IconSet

Una raccolta che comprende 50 icone di alta qualità, molto professionali ed indubbiamente carine. Queste icone sono utilizzabili in praticamente tutti i tipi di design.
Dimensioni: 48x48px
Formato: png

2. Handycons 2 from Janko at warp speed

Set di 20 icone in stile "hand drawn" rappresentanti i loghi dei social network e dei principali portali web. Il set contiene i loghi di Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo e You Tube.
Dimensioni: 16x16, 32x32, 64x64 e 12x128px
Formato: png

3. Free Hand Drawn Doodle Icon Set for Bloggers

Set che contiene 14 icone sempre "hand drawn" specificatamente pensato per i blogger.
Dimensioni: variabili, dai 150x120px ai 150x155px
Formato: png

4. Function icon set

Set di ben 128 icone in stile "glossy" utilizzabili per applicazioni desktop e per il web design. Sono gratuite per ogni tipo di progetto solo con il vincolo di linkare la pagina http://wefunction.com/2008/07/function-free-icon-set/.
Dimensioni: 48x48px
Formato: png

5. Image Editing Icons

40 icone utilissime per la creazione di applicazioni di editing di immagini o semplicemente per creare pannelli di strumenti per web apps avanzate.
Formato: unico file per Illustrator CS2 oppure in SVG (alta qualità, disegni vettoriali).

6. Vector Arrow Icons

In questo set possiamo trovare 64 frecce di tutti i tipi, tutte in un unico file ad alta qualità in vettoriale.
Formato: unico file per Illustrator CS2 oppure in SVG.

7. Sweetie Icons

Icone molto ben fatte di svariati generi. Nel link sopra riportato si possono scaricare 2 versioni del pacchetto. La versione "BasePack" contiene 182 icone, mentre la versione "WebComunication" ne contiene 37.
Formato: png-8 bit, png-24 bit e file photoshop.
Dimensioni: dagli 8x8px a 24x24px.

8. GrayScale Icon

Un set di 40 icone in scala di grigi raffiguranti frecce, simboli di più, meno e delete, simboli di cd/dvd ecc ecc...
Formato: 1 file png ed un file gif contenente tutte le 40 icone più 40 file gif con un'icona a file.
Dimensioni: 34x34px.

9. Smashing Retro Icon Set

Uno dei cosidetti "freebies" da parte di SmashingMagazine (sito segnalato nel roundUp precedente riguardante le sorgenti migliori per tutorial e freebies) presenta 10 spettacolari icone in alta qualità nel tema "retrò".
Dimensioni: 128x128px e 512x512px
Formato: Ico e png.

10. Markup Icon set

9 set di icone da utilizzare per blog e siti. Ritengo che questo tipo di iconcine faccia la differenza, in particolare se usato accanto agli elementi di menù a tendina o liste di argomenti.
Dimensione: 20x20px
Formato:gif

Allora, che ne pensate? Si accettano suggerimenti per migliorare la lista, condividete le vostre conoscenze!

Continua...

Torna al riassunto...

Mootools - cap 2 - gli Elements

Gli Elements
I Browser implementano quello che è conosciuto come DOM(Document Object Model), Javascript non è direttamente legato ai browser (falsa opinione comune) che sono solo il luogo dove gli sviluppatori solitamente usano questo linguaggio per accedere a questa struttura. I browser stessi d’altro canto, estendono il linuaggio di base aggiungendo metodi e proprietà agli oggetti Javascript ( nativi del linguaggio stesso) che sono la rappresentazione dei tag html utilizzati per definire la grafica di una pagina web(e non solo).



I metodi nativi degli oggetti Element, come molti altri metodi nativi di Javascript, lasciano a desiderare e non pemettono la scrittura di un codice pulito e ben strutturato in oltre, per le motivazioni enunciate in precedenza, dipendono direttamente dai browser in cui il codice viene eseguito limitandone la portabilità.

MooTools, il cui scopo è quello di mettere un web developer nella condizione di produrre un codice riusabile e di ingegnerizzare un mondo in cui la buona progettazione è un argomento tabù, mette a disposizione un tipo di oggetto Element e molti metodi che estendono le potenzialità base del linguaggio offrendo la possibilità di migliorare la qualità del lavoro prodotto.

Istanziare un Element MooTools
Istanziamo un element che rappresenta un tag img

var myImg = new Element('img',
{
src: '/foo.jpg',
alt: 'this is foo',
'class': 'fooClass',
events: {
click: function(){ alert('click!');}
},
styles: {
border: '1px solid blue',
marginTop: '10px'
}
});

la sintassi è molto piu simile a quella di un linguaggio OO class-based, all’element istanziato vengono associati in fase di creazione anche altri attributi come gli styles ed events che vedremo in seguito.

Al costruttore viene passato come parametro, una stringa identificativa del tag html che l’element deve rappresentare e un oggetto Javascript che rappresenta le options dell’element cioè gli attributi aggiuntivi che ne descrivono lo stile e la reazione a particolari eventi, quindi possiamo generalizzare e scrivere

Var element=new Element(
‘HtmlTag’,
{
Src:’bla bla’
// insomma oggetto javascript che ha come attributi
// gli attributi da passare al nuovo element al
// momento dell’istaziazione
//options del nuovo element
},
Styles
{
//stile dell’element che si sta istanziando
} );

la dichiarazione di un elemento può essere anche divisa dalla sua caratterizzazione usando i metodi degli Element definiti da mootools come generalizzazione di quelli forniti dal linguaggio.

Element.set(property,value);
metodo che permette di settare qualsiasi proprietà di un element accettando in ingresso parametri nella forma chiave valore.

Element.setStyle(attribute,style);
metodo che permette di modificare lo stile associato ad un particolare Element.

Element.get(property);
Element.getStyle(attribute);
Relativi metodi get che tornano ripettivamente il valore di una proprietà associata all’element o di un attributo css;
grazie all’utilizzo di questi metodi possiamo creare e modificare interamente la struttura di un element.
In aggiunta ai metodi precedenti nella libreria è presente anche il metodo

Element.erase(property);
che permette di cancellare un attributo associato in precedenza ad un element.

Quello che è stato fatto fino ad ora riguarda come istanziare e modificare la struttura di un element, questo però non avrà un effettivo valore fino a quando non sarà inserito nel dom per questo analizziamo i metodi che MooTools mette a disposizione per adempiere a questo compito.


Injection and Removal

Element.inject(newElement,position);
Questo metodo sposta o inserisce l’oggetto di invocazione nella posizione specificata,inoltre prevede la possibilità di specificare la posizione di inserimento:

• "before" inserisce l’elemento come fratello precedente;



• "after" inserisce l’elemento come fratello successivo;



• "top" inserisce l’elemento come padre;



• "bottom" inserisce l’elemento come ultimo figlio.

Element.grab, Element.adopt assolvono allo stesso compito con piccole differenze quindi per la loro trattazione si rimanda alla documentazione ufficiale.

Element.empty();
elimina tutti i figli dell’ elemento su cio è invocato.

Element.destroy();
elimina l’elemento dal dom e ne libera lo spazio di memoria occupato.

Element.dispose();
rimuove l’elemento dalla posizione occupata senza però rimuoverlo dalle strutture di memoria permettendo un suo futuro reinserimento.

Ora conosciamo gli strumenti principali per creare,modificare e eliminare Elements, nei prossimi post analizzaremo caratteristiche piu avanzate degli Elements che mootools ci mette a disposizione come Events e Storage.

Continua...

Torna al riassunto...

Mootools - cap 1 - Il pane quotidiano

Il Pane quotidiano - funzioni $ e gli Element
Javascript è un linguaggio di scripting che fondamentalmente svolge la funzione di dare logica a quello che è la grafica data da HTML e CSS in una pagina web.
Il pane quotidiano quindi di un "programmatore web" è prendere un elemento dalla pagina, manipolarlo e fare computazione. Vediamo come Mootools ci viene in aiuto nella stesura del nostro codice.



Le funzioni $ e $$
Dicevamo che "accattarsi" un elemento dalla pagina e manipolarlo è un'operazione presente forse in ogni script javascript. Javascript ci mette a disposizione la funzione document.getElementById('id') fortunatamente cross-browser (con un solo piccolo problema) ma eccessivamente scomoda (troppo lunga! ricordiamoci che 'ctrl+c' + 'ctrl+v' = 'problemi') e limitata (limitata lo direte dopo aver letto quest'articolo...).
Mootools ci mette a disposizione la funzione $ che ha la duplice funzione di restituirci un elemento a partire dal suo id e restituirci quell'elemento come oggetto nativo di tipo Element (nel prossimo paragrafo).

• Funzione $
  var myElement=$('myElementId');
  Restituisce un Element se ne esiste uno con quell'id, null altrimenti.
  var div=document.getElementById('myElementId');
div=$(div);
  Restituisce un Element a partire dall'element nella pagina. Attenzione, non ho sbagliato a scrivere la frase precedente (cerco di mettervi un pò di curiosità sugli Element, o ci sto riuscendo o vi sto creando confusione in testa...fatemelo sapere).


• Funzione $$
  $$('a'); //Ritorna tutti i tag a nella pagina (i link per capirci).
$$('a', 'b'); //Ritorna tutti i tag a e tutti i tag b nella pagina.
  Restituisce un Array contenente tutti gli Element che "matchano" con i criteri inseriti tra le virgolette. I criteri sono i selettori utilizzati per definire il css nella pagina quindi:
  $$('.classe'); //Ritorna tutti gli elementi del dom con class="classe"
$$('#unId .unaClasse'); //Ritorna tutti gli elementi del dom figli dell'elemento con id="unId" e con class="unaClasse".
$$('#unId a.unAltraClasse'); //Ritorna tutti i tag a figli dell'elemento con id="unId" ma con class="unAltraClasse".
  

Grazie a queste due funzioni "si ha il dom in mano" (questa è una citazione...) con una sintassi estremamente ridotta e facile da ricordare.

Gli Element
A questo punto almeno uno dei lettori di quest'articolo mi starà maledicendo dicendo "ma questi Element cosa sono?"... ci penso subito caro lettore!
Gli Element sono un'estensione del tipo nativo element del dom grazie al quale è possibile invocare tutti i metodi definiti dalla libreria.
Tratteremo il tipo Element bene nel prossimo capitolo ma giusto per darvi un piccolo assaggio vi facciamo vedere un esempietto.

Un bel div 100x100px

Premimi

Beh, il codice (una sola riga) vedetelo con firebug XD...

Continua...

Torna al riassunto...