dot Next - Siti internet, Web, Comunicazione, Grafica, Multimedia, Realtà Aumentata, Software, Applicazioni web, iPhone, iPad - Genova

ABC Alfabeto Magnetico

giorgio — 2010-08-30T16:14:25Z

Ci sono cose che i bambini non ameranno mai: un lungo viaggio in macchina, un volo che sembra non finire mai, una noiosa cena al ristorante... Con l'alfabeto magnetico non sarà più un problema! - portfolio / grafica, iOS

OctoPaul

giorgio — 2010-08-30T16:05:47Z

È la tua ultima occasione, se rinunci non ne avrai altre. Pillola azzurra, fine della storia: domani ti sveglierai in camera tua, e crederai a quello che vorrai. Pillola rossa, resti nel paese delle meraviglie, e vedrai quant'è profonda la tana del bianconiglio. Ti sto offrendo solo la verità, ricordalo. Niente di più. - portfolio / iOS

SMS Azzurri

giorgio — 2010-06-23T16:03:30Z

Progettazione e realizzazione grafica. - portfolio

Fireworks: creare set di icone con i simboli e gli stili

giorgio — 2010-06-14T09:55:51Z

In questo tutorial vedremo come creare diversi set di icone, partendo da un'immagine di base, sfruttando alcune semplici funzionalità di Fireworks. Alla fine del tutorial potrete scaricare un piccolo set di icone e il file sorgente… iniziamo!

L'immagine di partenza è un'icona minimale composta da un cerchio e un tracciato.

Siccome il cerchio sarà la base di tutti i nostri set e verrà ripetuto per ogni icona, per prima cosa creiamo un simbolo (elabora > simbolo > converti in simbolo) Modificando il simbolo andremo ad agire su tutte le istanze presenti nello stage.

Da questa prima immagine creiamo le altre icone su questo stile: pochi tratti per definire i soggetti ed ecco un primo set di icone.

Partendo da questo possiamo definire, grazie agli “stili”, un secondo set con effetto "metallico".

Dal menu "finestra" apriamo "stili". Questa palette permette di applicare con un click alcuni stili predefiniti (sostanzialmente sfumature, tracciati e filtri combinati tra loro e modificabili) all'oggetto selezionato.

Entriamo nel simbolo (doppio click su un'istanza), selezioniamo il cerchio e clicchiamo sul secondo stile della tendina "cromato scuro". Per ottenere il risultato in figura andiamo a modificare la brillantezza dell'oggetto con "proprietà > filtro > tonalità saturazione".

Ovviamente avremmo potuto modificare il gradiente, ma in questo modo il colore è più controllabile e si modifica più velocemente.

Ora diamo un effetto incavato al tracciato dell'icona “home”, come se il disegno fosse inciso nel metallo: rendiamo il tratto più spesso di un pixel e applichiamo "filtro > ombra interna". E a questo punto, selezionando il tracciato, creiamo un nuovo stile (stili > nuovo stile) in modo da applicare queste stesse caratteristiche a tutte le altre icone.

Pochi minuti di lavoro ed ecco il risultato!

È molto semplice modificare lo stile di tutte le icone, vediamo, per esempio, come ottenere in pochi passaggi uno stile molto diverso da questo: effetto grunge!

Entriamo nuovamente nel simbolo. L'immagine successiva mostra i primi passaggi:

Applichiamo una texture da “proprietà > riempimento > motivo > altro”... carichiamo una nostra texture e la scaliamo sull'oggetto. Associamo poi un tratto al quale diamo l'effetto “olio” e una texture “stucco” dal pannello “tproprietà > tratto > opzioni tratto”.

Nella figura successiva sono mostrati gli step finali.

Utilizzando il pannello “tracciato” e seguiamo le indicazioni mostrate in figura per ottenere una forma vettoriale con i bordi frastagliati. Tutte le istanze del nostro simbolo sono state nuovamente modificate.

Non ci resta quindi che modificare le icone sopra la base. Un'idea realizzabile in 30 secondi può essere questa:

Ed ecco quindi come in pochissimo tempo e con pochi elementi abbiamo realizzato tre set di icone con stili completamente differenti:

Naturalmente questo lavoro serve solo da spunto per mostrare come con pochi strumenti e un po di creatività possiamo raggiungere risultati efficaci in breve tempo.

Scaricate il file del tutorial. Contenente un piccolo set di icone da modificare a vostro piacimento prendedo spunto dalle idee mostrate nel tutorial o da utilizzare per il vostro sito.

Gestione degli eventi di Piazza UNICEF

giorgio — 2010-05-20T15:53:09Z

Sistema di geolocalizzazione con interfaccia avanzata per la gestione dei dati e widget javascript per la presentazione dei dati come mappa. - portfolio / software

Un Gol per l'Africa UNICEF

giorgio — 2010-05-20T15:14:46Z

Progettazione e realizzazione grafica: intefaccia, banner e DEM. - portfolio / grafica, web

Spip: 10 casi di utilizzo avanzato

giorgio — 2010-05-12T08:14:17Z

In questo post parliamo di Spip, un CMS opensource che utilizziamo spesso per i nostri progetti. Nello specifico vedremo alcuni tip and tricks; casi particolari di utilizzo avanzato del codice.
Per qualsiasi informazione sul CMS e la guida base di Spip rimandiamo al sito ufficiale: www.spip.net

1. Passare variabili agli include

Con spip, per includere un file nella nostra squelette si utilizza questa sintassi

per utilizzare nel file sottoMenu i valori della squelette, ad esempio ci servisse l'id della rubrica per estrarre solo gli articoli di quella rubrica (il caso tipico di un sottomenu), dovremmo passare il parametro id_rubrique nello script di inclusione

2. I segnaposti di Spip nel codice php

il codice di Spip può interagire senza problemi con il php. Un semplice esempio pratico può essere utilizzare i segnaposti di spip per creare una condizione in php

 echo("titolo 1 o titolo 2");
 } ?>

3. Passare un'ancora da url

Può essere necessario passare dei parametri o un'ancora tramite url ad una squelette personalizzata. Il link sarà simile a questo: #URL_PAGE{miaPagina, lang=it#ancora}

Nel nostro esempio passiamo il parametro della lingua e un'ancora ad un articolo specifico. Per passare l'ancora di un articolo generato dinamicamente possiamo scrivere:

#URL_PAGE{miaPagina, lang=#LANG##ID_ARTICLE}

Considerando che il link sia dentro un ciclo dal quale estrarre ID_ARTICLE (notare il doppio # davanti a ID_ARTICLE).

4. Recuperare un parametro

Per recuperare un valore passato nell'url basta semplicemente passare una parametro personalizzato, in questo caso "mia_variabile"

miosito.it/spip.php?page=miapagina&mia_variabile=valore

e recuperarla nella squelettes tramite il segnaposto che dovrà avere lo stesso nome del parametro. #MIA_VARIABILE

5. Il codice di Spip in uno script javascript!

il codice di Spip si integra perfettamente anche con javascript. Può essere utile ad esempio per richiamare un div che ha il nome dell'id generato dinamicamente, nel nostro caso utilizzando come suffisso del nome l'anno di pubblicazione di un articolo (per esempio possiamo creare delle tab divise per anno).

6. Utilizzare un segnaposto di un ciclo contenitore

Per recuperare un elemento di un ciclo esterno a quello in cui ci troviamo possiamo utilizzare questa sintassi: [(#_nomeCicloEsterno:TITRE)]


 
 [(#_uno:TITRE)] > #TITRE

nel nostro esempio stampiamo il titolo della rubrica. In questo caso il titolo della rubrica verrà ciclato tante volte quante sono il numero degli articoli.

7. Filtrare gli allegati per tipo

Potrebbe essere utile in alcuni casi inserire un thickbox nel caso gli allegati di un articolo fossero immagini, ma allo stesso tempo poter dare la possibilità di scaricare altri tipi di allegato, per esempio il pdf. Può esserci di aiuto filtrare gli allegati per tipo di file.

[(#TYPE_DOCUMENT|=={PDF}|?{' ',''})[(#LOGO_DOCUMENT)] [(#FICHIER)]]
 
 [(#TYPE_DOCUMENT|=={PDF}|?{'',' '})[(#LOGO_DOCUMENT)]]

Nel nostro esempio se i file allegati sono PDF mostriamo l'icona e il nome del file, se non sono PDF diamo al link la classe "thickbox" e non mostriamo il nome del file.

8. Raggruppare in liste secondo un criterio

Creare delle liste chiare e con un codice pulito è molto importante. Si può presentare la possibilità di dover ordinare delle lunghe liste secondo un criterio. Nel nostro esempio abbiamo una lista di allegati che vengono ordinati secondo la "descrizione" (#DESCRIPTIF). Nella descrizione abbaino scritto il tipo di file (ad esempio zip, pdf…). quello che vogliamo ottenere è una lista di questo tipo:

PDF
file uno
file due
…

ZIP
file uno
file due
…

il codice è questo:


  
 [(#DESCRIPTIF|unique)
]
 
 
  
 #LOGO_DOCUMENT

da notare il filtro "unique" nel segnaposto #DESCRIPTIF, che stampa la descrizione una sola volta, e le parentesi quadre prima e dopo il tag LI, che ci permette di non stampare il codice quando il #DESCRIPTIF è vuoto, quindi SEMPRE tranne la prima volta.

9. Maschera sulle immagini

Una semplice funzionalità per rendere accattivanti le vostre immagini è il filtro maschera sulle immagini. Spip permette di utilizzare una maschera sulle vostre immagini.

[(#FICHIER|image_masque{squelettes/images/mask.png})]

Alcune cose utili da sapere:

. l'immagine "maschera" deve essere una png24 (quindi con il canale alpha)

. se l'immagine è più grande della maschera si ridimensiona automaticamente con le dimensioni di quest'ultima

. la maschera modifica anche la luminosità dei colori: per utilizzare solo la proprietà di "taglio" della maschera basta creare la png24 con i grigi al 50%

10. Estrarre dati da una tabella aggiuntiva

In alcuni casi si può presentare la necessità di inserire una tabella nel database esterna a quelle di spip. Recuperare i dati è molto semplice:


 
 #NOME

 #FORMATO

Nell'esempio il ciclo estrae i campi della tabella "fotografie" e i segnaposti stampano i campi della tabella stessa.

La barchetta di dotNext in realtà aumentata

giorgio — 2010-04-21T15:10:05Z

Realtà aumentata: la barchetta di dotNext in 3d... attiva la tua webcam, stampa il marker e buon divertimento!

- varie / news

Bianco e nero di quadricromia

giorgio — 2010-03-19T16:31:08Z

Per creare un buon bianco e nero digitale sono sufficienti pochi passaggi su photoshop e un po' di dimestichezza con i canali. Apriamo la nostra immagine in CMYK apriamo il pannello "canali" e salviamola con un altro nome.

Convertiamo quindi il nuovo file in metodo "scala di grigio" e successivamente di nuovo in quadricromia.

Apriamo ora tutte e due le immagini e affianchiamo le finestre. Avremo 2 file entrambi in quadricromia ma una in bianco e nero a l'altra colori.

Selezioniamo l'immagine a colori e convertiamola in metodo colore LAB.

A questo punto vedremo che nella palette canali avremo un livello colore e uno luminosità.

Posizionandoci su quest'ultimo selezioniamo tutto (cmd + A) e andiamo a copiare il canale (cmd + C).

Posizioniamoci ora sull'altra immagine, andiamo a selezionare il canale del nero e incolliamo la nostra selezione (cmd + V). Riattivando tutti i canali vedremo il risultato: un bianco e nero decisamente più profondo!

3. Social Network

giorgio — 2010-03-17T11:09:14Z

La comunicazione sul web è in continua evoluzione, attraverso canali sempre nuovi. YouTube, Facebook, Twitter, MySpace: non basta essere online, bisogna saper scegliere gli strumenti e il linguaggio appropriati. - comunicazione