Undolog.com

Very short snippet: formattare un data di un controllo UIDatePicker

Giovambattista Fazioli — Fri, 06 Nov 2009 02:28:38 PST

Il controllo UIDatePicker è forse il più bel controllo grafico presente su Apple iPhone. Oltre alla bellezza risulta anche semplice da utilizzare, versatile ed estremamente utilizzato in moltissime situazioni.

Diventa quindi importate saper "leggere" la data impostata nel controllo:

PLAIN TEXT

Objective-C:

// questo metodo funziona sia sul Simulatore sia sul Device (SDK 2.2.1)
NSDate *date = dateInsert.date;
NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
[dateFormat setDateFormat:@"yyyy-MM-dd HH:mm"];
NSLog(@"Data formattata: %@", [dateFormat stringFromDate:date] );

PLAIN TEXT

Objective-C:

// anche questo funziona su entrambi, Simulatore e Device, ma quando lo si
// compila per il Device emette un Warning
// warning: 'NSDate' may not respond to '-descriptionWithCalendarFormat:timeZone:locale:'
NSLog(@"Data formattata: %@", [dateInsert.date descriptionWithCalendarFormat:@"%Y%m%d %H:%M" timeZone:nil locale:nil] );

Tags: Device, Format, iPhone, iPhone, Mobile, NSDateFormatter, Objective-C, SDK 2.2.1, Snipp, Sviluppo, UIDatePicker

Post correlati

Adobe Flash CS4: creare un Ajax Loader o Activity Indicator

Giovambattista Fazioli — Wed, 04 Nov 2009 06:19:44 PST

Creare un Ajax Loader (o Activity indicator per chi è ormai abituato ad usare l'Apple iPhone) per il Web non è una cosa difficile: esistono servizi che generano immagini gif animate di tutti i tipi. Tuttavia il formato GIF ha il grosso difetto di non supportare le trasparenze come si deve. La trasparenza, nel formato GIF attuale, coinvolge un solo piano di bit con la conseguenza che se non abbiamo un colore di sfondo uniforme, i bordi dell'immagine risultano notevolmente sgranati e frammentati.
L'animazione mostrata qui sotto è stata realizzata impostando come colore di trasparenza il bianco.

Quindi se lo sfondo è bianco (o un colore simile) non ci sono problemi. Al contrario, appena sostituiamo lo sfondo, ecco cosa accade:

In attesa, quindi, della diffusione del formato APNG (Animated PNG) - che supporterà un vero e proprio canale alpha per le trasparenze, importare GIF animati in contesti come Adobe Flash risulta "graficamente" una pessima scelta. Ecco allora come realizzare un'animazione in Adobe Flash del tutto simile a quelle presenti sul Web.

Costruiamo il nostro Ajax Loader in Adobe Flash: il "petalo"

Prima di tutto creiamo un MovieClip vuoto (o se preferite potete lavorare direttamente sullo stage) e disegnamo una linea verticale nera, il nostro petalo, alta 60/70 pixel per comodità, impostando uno spessore (tratto) di 10:

Selezioniamo la nostra linea e trasformiamola temporaneamente in un oggetto immagine (F8). Dal pannello Allinea, centriamola nello stage. Adesso duplichiamo (CTRL+D o CMD+D) la nostra linea, centriamo la linea duplicata e ruotiamola dal pannello Trasforma di 30 gradi:

Ripetiamo questa operazione (duplica, centra, ruota di 30 gradi) fino ad ottenere:

Selezioniamo tutta l'immagine, cioè la somma degli oggetti:

Dal menu Elabora selezionate Dividi (CTRL+B o CMD+B):

Poi, sempre dal menu Elabora, selezionate Forma > Converti linee in riempimenti. In questo modo abbiamo ottenuto una figura "unica".

Adesso dobbiamo "bucare" il centro della nostra immagine. Per fare questo aumentate un po' lo zoom (tipo 400). Create un nuovo livello e proteggiamo quello con il lavoro svolto fino adesso:

Su questo nuovo livello potremmo lavorare in tranquillità, senza danneggiare l'altra nostra immagine. Disegniamo, partendo dal centro (mantenete premuto il tasto ALT insieme al tasto maiuscole SHIFT) un cerchio rosso senza bordo:

Nella figura qui sopra ho impostato la trasparenza del cerchio per evidenziare la sua posizione rispetto alla nostra figura (che si trova sul livello sottostante). Notate che ho appositamente "tagliato" gli spigoli dove si congiungono i "petali" della nostra figura. Il cerchio, quindi, dev'essere della giusta grandezza, cosa che ci tornerà comoda più avanti. Fatto questo selezionate il cerchio, copiatelo (CTRL+C o CMD+C) ed eliminate pure l'ultimo livello creato, sbloccate il livello con la nostra figura, e incollate!

Cliccate adesso sul bianco dello stage in modo da deselezionare il cerchio rosso. Ora abbiamo "fuso" i nostri due oggetti. Selezionate nuovamente il cerchio rosso ed eliminatelo!

Ottimo! Adesso selezioniamo tutto il nostro oggetto e cambiamogli colore con un grigio chiaro:

Selezioniamo poi il primo petalo (ore 12) e impostiamolo a nero (voi ovvimente potete scegliere la gradazione di colori che preferite):

Impostiamo ora il secondo petalo (ore 13) ad un grigio scuro:

Proseguiamo per gli altri due petali (scegliete vuoi quanta gradazione applicare) fino ad ottenere:

L'animazione

Perfetto, ci siamo quasi, l'ultimo sforzo richiesto è creare la rotazione. Questa non deve riguardare i petali ma solo il colore. Per fare questo avremmo potuto procedere anche in altri modi (vedi ad esempio con luso delle maschere...), tuttavia questo mi sembra più semplice. Spostiamoci di qualche fotogramma avanti, tipo al 5 e inseriamo un Fotogramma chiave.

Da pannello Trasforma ruotiamo la nostra immagine di 30 gradi, gli stessi gradi utilizzati durante la creazione dei nostri "petali". Ripetiamo questa operazione (inserimento Fotogramma chiave e rotazione di 30 gradi) mantenedo sempre costanti in numero di fotogrammi tra una chiave e un'altra, fino ad ottenere:

Finito! Il nostro Ajax Loader in Adobe Flash è terminato! Ecco qui sotto la versione GIF esportata da Flash.

Qui sotto il filmato Flash con uno sfondo in movimento (notate che non ci sono distorzioni o sgranature):

Il sorgente

Tags: Actionscript 3.0, Activity Indicator, Adobe Flash CS4, Ajax Loader, Flash, Flash CS3, Flash CS4, PNG, Sviluppo, Tutorials, Tutorials

Post correlati

Objective-C: NSLog() su struct C

Giovambattista Fazioli — Thu, 29 Oct 2009 02:02:46 PDT

La sintassi NSLog(@"%@", ... ); funziona ed è utilizzata per ottenere informazioni sugli oggetti, ma non funziona su tipi dato C come struct CGRect o CGPoint, ad esempio. Per poter sfruttare NSLog(@"%@", ... ); anche su struct di tipo C possiamo appoggiarci a funzioni di conversione come NSStringFromCGRect() o NSStringFromCGPoint:

PLAIN TEXT

Objective-C:

CGrect mioRect = (CGRect){10,20,30,40};
CGPoint mioPoint = (CGPoint){32,64};
//
NSLog( @"Info rettangolo: %@", NSStringFromCGRect(mioRect) );
NSLog( @"Info point: %@", NSStringFromCGPoint(mioPoint) );

Nello specifico è possibile perfezionare tale procedure scrivendosi delle piccole macro utili come:

PLAIN TEXT

Objective-C:

#define NSLogRect(rect) NSLog(@"%s: (%0.0f, %0.0f) %0.0f x %0.0f", #rect, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height)

Oppure:

PLAIN TEXT

Objective-C:

#define NSLogCGPoint(point) NSLog(@"%s: (%0.0f, %0.0f)", #point point.x, point.y)
 
CGPoint mioPoint = (CGPoint){32,64};
NSLogCGPoint(mioPoint);

Che darà come output:

PLAIN TEXT

Objective-C:

mioPoint: (32, 64)

Tags: Apple, CGPoint, CGRect, iPhone, iPhone, Mobile, NSLog(), NSString, NSStringFromCGRect(), Object, Objective-C, Objective-C, struct, Sviluppo

Post correlati

Very short trick: 3 trick per gli sviluppatori Apple iPhone

Giovambattista Fazioli — Wed, 28 Oct 2009 06:06:11 PDT

Icona applicazione

L'icona 57x57 pixel che andrà a rappresentare la nostra applicazione viene "alterata" automaticamente dall'Apple iPhone: viene aggiunto un bordo arrotondato, un effetto luminoso e 3D. Questa impostazione può essere cambiata selezionando il file [nome applicazione]-Info.plist e aggiungendo la property "Icon already includes gloss and bevel effects":

Fullscreen, eliminare la status bar

Sempre agendo sul file [nome applicazione]-Info.plist è possibile "nascondere" la barra di stato che si trova nella parte alta dello schermo, così da realizzare applicazioni in fullscreen. Anche in questo caso basta aggiungere la property "Status bar is initially hidden":

XCode: eliminare una riga

Per eliminare una riga intera in XCode si può utilizzare la combinazione: CTRL+A, CTRL+K, CTRL+K.

Tags: Apple, fullscreen, iPhone, iPhone, Mobile, Objective-C, Sviluppo, tips-&-tricks, trick, XCode

Post correlati

XCode Objective-C: abbreviazioni utili da tastiera

Giovambattista Fazioli — Mon, 26 Oct 2009 08:09:49 PDT

XCode è davvero un ambiente di sviluppo potente e riserva sempre qualche sorpresa. Esso permette una funzione simile agli "snippet" del noto editor TextMate. In pratica è possibile inserire blocchi di codice utilizzando la sequenza tasto ESC + una combinazione di una o più sequenze di caratteri. Ad esempio se volete inserire un blocco if prova a premere ESC+if e otterrete:

Come mostrato in figura, appare un menu (lo stesso del completamento automatico) dove è possibile scegliere tra un semplice blocco if o if/else. Cliccando "invio" si ottiene:

Ecco due link utili per avere la lista completa delle combinazioni da tastiera:

Tags: Completamento automatico, iPhone, Macros, Mobile, Objective-C, Objective-C, Software, Sviluppo, XCode

Post correlati

Web Analytics

Giovambattista Fazioli — Fri, 23 Oct 2009 15:49:42 PDT

L'analisi degli accessi di un sito Web è un'argomento vasto ed interessantissimo. La maggioranza delle volte l'analisi viene affidata a strumenti come Google Analitycs, Woopra, Reinvigorate, etc... tuttavia, per i più smaliziati, potrebbe venire in mente di costruire un proprio personale strumento di analisi o, semplicemente, di dare un'occhiata ai "misteriosi" file di log del nostro Web Server. Consiglio, allora, la lettura di Web Analytics di Davide Vasta, testo utilissimo per comprendere in modo dettagliato tutti i processi che si trovano dietro il tracciamento degli accessi.

La guida è davvero completa in quanto analizza ogni aspetto che ruota intorno all'argomento di Web Analitycs. Utilissimi anche i consigli indirizzati ai coder, a chi sviluppa pagine Web, su come usare "correttamente" tag e attributo. Elenco qui sotto gli argomenti principali trattati nel testo evidenziando, a mio parere, quelli più interessanti ed utili anche ai "coder", cioè a coloro che non si interessano direttamente di analisi SEO:

Le basi delle Web Analytics: log file e metriche
Gli strumenti di analisi
Prime analisi: visite, frequenza di rimbalzo, pagine viste, percorsi di navigazione, link un uscita
Analisi storiche, stagionali e geografiche
Analisi di keyword e pagine rilevanti
Analisi per referrer e dei KPI
Analisi delle conversioni
Analisi in tempo reale
Serach engine marketing (SEM) e Web Analytics
Strumenti di analisi per i log
Aumentare la visibilità di un sito
Aspetti legali della Web Analytics

Tags: accessi, Davide Vasta, google, Internet, reinvigorate, SEM, seo, Sviluppo, Tecnologia, Web Analytics

Post correlati

Argomenti variabili in Javascript: due alternative

Giovambattista Fazioli — Fri, 09 Oct 2009 05:00:00 PDT

In Javascript è possibile scrivere funzioni con argomenti variabili, cioè funzioni che non accettano necessariamente un numero predefinito di inputs. Ad esempio è possibile scrivere funzioni come questa:

PLAIN TEXT

JavaScript:

// Questa funzione mostra il numero e il valore degli argomenti
// passati facendo riferimento all'oggetto interno arguments e
// non richiedendo nessuna dichiarazione 
function parametri_variabili() {
    alert ( 'Numero argomenti passati = ' + arguments.length );
    // stampa tutti gli argomenti
    var o = '';
    for (var i = 0; i <arguments.length; i++) {
        o += arguments[i] + '\n';
    }
    alert( o );
}

Quindi si ha:

PLAIN TEXT

JavaScript:

parametri_variabili();  // nessuno
 
parametri_variabili( "ciao", 32 );  // due argomenti: stringa e numero

Questa tecnica è davvero utile in moltissimi casi, tuttavia - a mio parere - è possibile migliorarla in quanto questo approccio comporta:

Gli argomenti devono seguire sempre lo stesso ordine: arguments[0] è il primo, arguments[1] è il secondo, e via discorrendo...
L'accesso agli argomenti è per indice (arguments[0] o arguments[4] ad esempio), quindi poco "leggibile" nell'implementazione all'intero del codice

Un'alternativa potrebbe essere quela di usare gli oggetti-inline (Object Literal). Ad esempio potremmo scrivere:

PLAIN TEXT

JavaScript:

function parametri_variabili( args ) {
    alert( args.miaStringa );
    alert( args.mioNumero );
}
 
// Utilizzando
parametri_variabili( {
    miaString: 'ciao',
    mioNumero: 32
});
 
// Oppure
parametri_variabili( {
    mioNumero: 32,
    miaString: 'ciao'
});

Come si può vedere dal codice, l'ordine degli argomenti, essendo proprietà di un oggetto, non è importante. Inoltre nell'implementazione della funzione il codice risulta esssere più chiaro, trattando "proprietà" di un oggetto invece di indici di un array.
Questa tecnica è decisamente ottima nel caso di funzioni con molti argomenti, ovviamente.

Tags: Argomenti funzione, arguments, Internet, Javascript, Javascript, Object, Object Literal, Parametri, Sviluppo

Post correlati

Very short snippet: iPhone, numeri casuali

Giovambattista Fazioli — Fri, 09 Oct 2009 02:19:29 PDT

Se avete bisogno di generare numeri casuali in una applicazione Apple iPhone dovete mettere da parte Objective-C, in quanto non propone nessuna classe allo scopo. La soluzione viene dal C che propone: rand(), srand(), random(), srandom() e arc4random().
Tra tutte la più gettonata è sicuramente arc4random(), in quanto non richiede nessuna inizializzazione speciale o funzioni di seeding, restituendo un buon valore "randomico"; potremmo dire che è auto-inizializzante.

PLAIN TEXT

Objective-C:

// Genera un numero casuale da 0 a 99
int rnd = arc4random() % 100;
 
// Genera un numero casuale da 20 a 50
int rnd =  (arc4random() % 51) + 20;

Tags: Apple, arc4random(), iPhone, iPhone, Mobile, numeri casuali, Objective-C, Objective-C, Snipp, Snippets, Sviluppo

Post correlati

Adobe Flash Professional CS5 per Apple iPhone

Giovambattista Fazioli — Wed, 07 Oct 2009 01:16:54 PDT

Tags: Adobe, Adobe Flash Professiona 5, Apple, Eventi & Iniziative, Flash, iPhone, Mobile, Sviluppo, Tecnologia

Post correlati

bbPress: integrare e utilizzare le funzioni di Wordpress

Giovambattista Fazioli — Mon, 28 Sep 2009 03:02:15 PDT

bbPress è un semplice ma completo Forum scritto in PHP e MySQL che fornisce un'ottima integrazione con Wordpress.
L'integrazione con Wordpress è costruita su vari livelli, che avremmo modo di analizzare in seguito. Per iniziare ecco un semplice snippet da inserire nel file di configurazione di bbPress: bb-config.php.

PLAIN TEXT

PHP:

// Carica l'engine Wordpress
// La doppia chiamata a dirname() corrisponde, ovviamente
// ad un "../" e dipende da dove è posizionato bbPress
// rispetto alla root di Wordpress
require_once( dirname( dirname( __FILE__ ) ) . '/wp-blog-header.php' );
define('WP_BB', true);

Questo codice permette di utilizzare il kernel di Wordpress all'interno dell'ambiente bbPress. In pratica, quindi, è possibile inserire funzioni come get_bloginfo() (o qualsiasi altra funzione come get_header()) nelle pagine facenti parte del tema del Forum. In questo modo sarò semplice, ad esempio, uniformare il layout grafico, permettendo al tema bbPress di accedere all'impaginazione Wordpress.

Tags: bbPress, Forum, PHP, PHP, Sviluppo, WordPress, WordPress

Post correlati

5 estensioni per FireFox da avere dedicate ai Web Developer

Giovambattista Fazioli — Mon, 14 Sep 2009 05:25:08 PDT

Uno degli enormi vantaggi di Mozilla FireFox, rispetto agli altri browser, è stato, è lo è tutt'ora, quello di possedere una grande quantità di estensioni gratuite che permettono di personalizzare ed estendere l'applicazione. Come sviluppatore web non posso - oramai - farne a meno di alcune utilissime estensioni che mi aiutano nella costruzione, controllo e manutenzione delle pagine Web.

FireBug

Un "must" per tutti gli sviluppatori Web. Probabilmente è lo strumento più evoluto di editing e debug in tempo reale di pagine Web disponibile oggi su Internet. Supera sicuramente in usabilità e funzionalità (nonchè in Plugin e estensioni disponibili) anche gli strumenti di controllo forniti con WebKit (vedi Safari e Chrome) e il nuovo Explorer 8.

Web Developer

Insieme a FireBug questa estensione permette di attivare una comoda barra degli strumenti con moltissime funzioni, utilissime per il debug e controllo delle pagine: controllo della cache, meta, stili css, motore javascript, cookie, form, immgaini, strumenti di evidenziazione, misure, ridimensionamento della finestra del browser, controllo sorgente generato e eventuali riquadri iframe, etc...

HTML Validator

Questa estensione l'ho scoperta da poco e mi ha davvero stupito per la precisione e la comodità d'uso. Permette di effettuare una serie di controlli sulla sintassi delle pagine così da far saltare fuori errori di markup o tag usati male o non chiusi. Comodissima soprattutto a chi sviluppa con Wordpress o sistemi simili, dove una pagina è costruita con varie parti (header, body, sidebar e footer) difficili da esaminare e visualizzare come tutt'uno.

Nota bene: questa estensione viene segnalata sul repository di Mozilla come NON disponibile per i sistemi MacOS. Tuttavia se andate sulla pagina dello sviluppatore, trovere invece tutte le versioni. Io infatti la uso tranquillamente sul mio Mac!

YSlow

Prodotto da Yahoo, YSlow è un Add-on di FireBug e permette di avere dei report estremamente avanzati sulle pagine che stiamo sviluppando! Con tanto di voti! Dall'analisi è possibile ottenere tutta una serie di suggerimenti - spesso utilissimi - per migliorare la stabilità e le performance delle nostre pagine Web.

CodeBurder

Questa estensione è presente sia come Add-on per FireBug, sia come estensione stand-alone per FireFox. Sono in sviluppo anche le versioni in Adobe AIR e Adobe Dreamweaver. Code Burner fornisce un Help contestuale - evoluto - al markup HTML e CSS, indicando la compatibilità tra i browser, informazioni generali, sintassi, esempio e altro:

Tags: CodeBurner, CSS, Estensioni, Featured, FireBug, firefox, Html Validator, Internet, Javascript, jQuery, Mozilla, Plugins, Software, Sviluppo, Tecnologia, web-developer, YSlow

Post correlati

Very short snippet: PHP, tagliare a parole, contando i caratteri

Giovambattista Fazioli — Sun, 13 Sep 2009 23:00:42 PDT

Come già visto in Very short snippet: PHP word cut è più gradevole spezzare un testo a "parole", in quanto si evita di tagliare una parola. C'è comunque chi preferisce tagliare contando i caratteri, in quanto rende i "tagli" più omogenei e simili tra loro, nonostante il forte rischio di tagliare una parola, mozzandola di netto! Inoltre bisogna sempre considerare che, fatta eccezzione per casi particolari, i Font non sono proporzionali e di conseguenza la parola "WWW" può occupare uno spazio orizzontale in pixel differente da "Wii".
Allo stesso modo quando si contano le parole si può incorrere in situazioni paraddosali, generando evidenti differenze tra i testi che si sìvoglione spezzare. Ad esempio la frase: "a tu per tu" contiene quattro parole, esattamente come "Washington, la casa bianca". Tuttavia, risulta evidente che l'ultima frase è visibilmente più "lunga", in pixel.
Una possibile soluzione al problema è una funzione ibrido, che tenga conto quindi sia della lunghezza dei caratteri, sia del "taglio" a fine parola:

PLAIN TEXT

PHP:

/**
 * Taglia una stringa per parole contanto i caratteri
 * In questa versione non vengono "contati" gli spazi
 * decommentare la riga in caso si vuole un taglio
 * esatto a carattere 
 * 
 * @author  =undo=
 * @date    2009-09-11
 * 
 * @param (string) $c   Stringa da tagliere
 * @param (int)    $l   Numero di caratteri massimo
 * @param (string) $e   Stringa da appendere, default "[...]"
 * @return 
 */
function word_cut_for_chars($c, $l, $e = "[...]") {
    if( strlen($c)> $l) {
        $a = explode(' ',$c);
        $s = 0;
        $r = "";
        for($i=0; $i<count($a); $i++) {
            $s += strlen($a[$i]);
            // $s += ( strlen($a[$i]) + 1);  // conta anche "lo spazio"
            if($s> $l ) return ($r . $e);
            $r .= $a[$i] . " ";
        }
    }
    return $c;
}

Tags: PHP, PHP, Snippets, strlen(), Sviluppo, Sviluppo

Post correlati

Very short trick: Wordpress, resettare una query

Giovambattista Fazioli — Wed, 09 Sep 2009 04:51:52 PDT

A me capita spessissimo di personalizzare le Home Page (index.php), o altre sezioni come ad esempio la Sidebar, di un sito Web realizzato con Wordpress. Molte delle personalizzazioni riguardano loop con parametri specifici, al fine di visualizzare ad esempio gli ultimi articoli di una specifica categoria o tag. Questa operazione la svolgo quasi sempre utilizzando la query_posts(). Quando si esegue una query_posts() vengono influenzate anche alcune variabili globali e, spesso, si hanno comportamenti fastidiosi quando - subito dopo - si usano funzioni come is_category() o is_page(). Dalla release 2.3.0 di Wordpress è disponibile una comoda funzione che ha proprio il compito di resettare lo stato alterato da query_posts(): wp_reset_query().
Per utilizzarla è sufficiente chiamare la funzione al termine del nostro loop personalizzato, in modo da non lasciare traccia nel sistema e non influenzare così altre funzioni che fanno riferimento alle variabili globali utilizzate da query_posts():

PLAIN TEXT

PHP:

// esempio in una ipotetica index.php
// a fine pagina, dopo aver eseguito una o più
// query_posts() personali
 wp_reset_query(); get_sidebar(); get_footer(); ?>

Tags: Internet, Internet, PHP, PHP, query_posts(), Sviluppo, tips-&-tricks, trick, WordPress, WordPress, wp_reset_query()

Post correlati

Very short snippet: Wordpress, migliorare il campo cerca

Giovambattista Fazioli — Mon, 07 Sep 2009 01:33:15 PDT

Oltre all'aspetto grafico del campo input del cerca di Wordpress, è possibile intervenire su di esso a livello di codice in modo da renderlo un tantino interattivo quando si clicca al suo interno. Un effetto facile da realizzare permette di inserire un testo all'interno del campo cerca che scompare (e ricompare quando si esce dal campo lasciato vuoto) quando si clicca al suo interno. Questa tecnica è comonda in quanto informa l'utente della funzionalità del campo in questione senza costringerci ad aggiungere una label esterna che, a volte, ruberebbe spazio al tema grafico.
Questo procedimento, inoltre, può essere utilizzato anche in altri contesti: come un modulo contatti ad esempio.
Il codice che riporto qui sotto potete inserirlo nel file searchform.php del vostro tema.

PLAIN TEXT

PHP:

 bloginfo('url'); ?>/">
    $i = 'Cerca su undolog...';    // stringa a piacere
    $q = get_search_query();       // recupero l'eventuale stringa di una ricerca precedente
    $v = ( $q == "" ) ? $i : $q;   // se non è stata fatta nessuna ricerca imposta la mia stringa
?>
$i?>':this.value" onfocus="this.value=(this.value == '$i?>')?'':this.value" type="text" value="$v?>" name="s" id="s" />

Tags: get_search_query(), Internet, Javascript, PHP, PHP, Snipp, Snippets, Sviluppo, tips-&-tricks, WordPress, WordPress

Post correlati

Recuperare le immagini caricate in un Post

Giovambattista Fazioli — Mon, 31 Aug 2009 16:20:17 PDT

Quando scriviamo un Post in Wordpress è possibile caricare delle immagini contestualmente alle stesura dell'articolo. Queste immagini, che fanno parte della libreria media, vengono associate a quel determinato post. La particolarità di questo comportamento risiede nella possibilità di estrarre queste immagini a prescindere se queste sono state inserite fisicamente all'interno del post. Tale procedimento, dunque, è molto più interessante rispetto all'uso dei campi personallizzati (custom fields) o di "incomprensibili" (per alcuni) regexp (regular expressions) all'interno del corpo del Post. Recentemente, inoltre, Wordpress permette di inserire una semplice, tuttavia immediata, galleria, sfruttando propria questo legame tra post e immagine caricata. A basso livello le immagini caricate vengono trattate esattamente come un post, cioè la tabella sul database e i campi sono esattamente gli stessi.
Ad esempio se per un determinato post - con delle immagini caricate - usiamo il seguente codice:

PLAIN TEXT

PHP:

// dove è $post_id è l'id del post
// se siamo in un loop possiamo usare $post-ID
$ai =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post_id );
foreach($ai as $image) {
    echo '' . $image->post_title . '
';
}

Otteniamo la lista dei titoli delle immagini caricate. Per visualizzare le immagini basta modificare l'output in:

PLAIN TEXT

PHP:

echo '' . $image->post_title . ' . $image->guid . '" />
';

Tuttavia è più corretto - per ragioni di compatibilità con futuri aggiornamenti - utilizzare le funzioni che Wordpress mette a disposizione per recuperare l'url dell'immagine. Ad esempio possiamo visualizzare sia l'immagine in dimesioni reali che l'immagine in miniatura tramite:

PLAIN TEXT

PHP:

echo '' . $image->post_title . 
    ' . wp_get_attachment_thumb_url( $image->ID ) . '" />' .
    ' . wp_get_attachment_url( $image->ID ) . '" />
';

Ordinamento

Negli esempi che abbiamo visto sopra le immagini vengono recuperate senza nessun ordine specifico, al massimo per ordine inverso di caricamento. Se avete mai provato ad usare la galleria di Wordpress, vi sarete accorti che questa permette di ordinare le immagini caricate; l'ordinamento può avvenire attraverso il titolo, la data e ora o una modalità casuale. In aggiunta è possibile usare la modalità manuale, scegliendo quindi noi un'ordine delle immagini; rispetto sempre al concetto di galleria, quindi di sequenza (la prima, la seconda, la terza, e così via ...). Inoltre è possibile indicare la modalità crescente o decrescente del criterio che abbiamo scelto. In particolare, l'ordinamento manuale, funziona come per le pagine, cioè sfruttando il campo menu_order (inizialmente impostato a 0 per tutte le immagini caricate).
Se avete dunque caricato una serie di immagini in un post e manipolato queste con l'ordinamento manuale, dobbiamo far in modo che nel nostro ciclo venga preso in considerazione anche l'ordine. Un modo rapido, ed estremamente semplice, per fare questo è utilizzare la funzione usort() per riordinare il nostro array per qualsiasi tipo di campo (menu_order, ID, data, etc...):

PLAIN TEXT

PHP:

// dove è $post_id è l'id del post
// se siamo in un loop possiamo usare $post-ID
$ai =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post_id );
 
// applico una mia funzione di ordinamento così
// da poter sceglere il campo su cui effettuare
// il sorting (nel nostro caso menu_order)
usort( $ai, "sortImage");
    
foreach($ai as $image) {
   echo '' . $image->post_title . ' . wp_get_attachment_thumb_url( $image->ID ) . '" />
';
}
 
function sortImage( $a, $b ) {
    if($a->menu_order == $b->menu_order) return 0;
    return ($a->menu_order> $b->menu_order) ? 1 : -1;
    //return ($a->menu_order> $b->menu_order) ? -1 : 1; // decrescente
}

Manco a dirlo, ovviamente, se volete recuperare la "prima" e sola immagine caricata basta eliminare il foreach().

Tags: get_children(), Internet, library, media, PHP, Sviluppo, tips-&-tricks, Tutorials, usort(), WordPress, WordPress, wp_get_attachment_thumb_url(), wp_get_attachment_url()

Post correlati

Come ottenere latitutine e longitudine in Google Maps

Giovambattista Fazioli — Mon, 31 Aug 2009 09:00:53 PDT

Per trovare le coordinate di un indirizzo, ovvero Latitudine e Longitudine, possiamo usare questo semplice e utile hack. Aprire il sito di Google Maps. Una volta sulla mappa cercate l'indirizzo che desiderate (ad esempio Via Cortese 10, Modena). Quando l'indirizzo è visualizzato sulla mappa, inserite questa riga nella barra indirizzi del browser:

PLAIN TEXT

JavaScript:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Si aprirà una finestra pop-up con le coordinate utilizzabile nel codice:

Tags: Google-Maps, Hack, Internet, Javascript, Javascript, Latitudine, Longitudine, Sviluppo, Tecnologia, tips-&-tricks

Post correlati

Come usare Google Maps in Adobe Flash CS4

Giovambattista Fazioli — Fri, 28 Aug 2009 15:34:40 PDT

In Adobe Flash è possibile utilizzare un vasto assortimento di Web API esterne fornite da servizi come Facebook, Twitter o Flickr. In questo tutorial vedremo come integrare, in modo davvero semplice, i servizi di Google Maps in un filmato/applicazione Adobe Flash CS4. Premetto che il procedimento per poter utilizzare Google Maps in Flash è molto simile a quello che accade in HTML/Javascript (vedi per dettagli Come inserire Google Map nel proprio Web).

Download ed installazione delle SDK

Per prima cosa memorizziamo nei bookmark del nostro browser l'indirizzo del sito Google Maps API per Flash. Su questo sito troviamo tutto ciò che ci server per utilizzare le API di Google. Sulla destra della pagina è possibile accedere ad una serie di risorse, tra cui il link per scaricare le SDK da usare in Flash. Salvate lo ZIP sulla vostra scrivania (o Desktop) e scompattatelo. Nella cartella sdk/lib troverete un file chiamato map_1_16.swc. Copiate questo file nella clipboard (Command-C per Mac o Ctrl-C per PC) e posizionatelo all'interno di questo percorso:

PLAIN TEXT

CODE:

// Mac
[cartella utente]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components
 
// Windows
[cartella utente]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components

Se la cartella Components non esiste già, createla e in questa create una cartella Google e incollate il file map_1_16.swc. Se per caso avevate già aperto Flash (frettolosi...), chiudetelo e rapritelo, in modo che possa ricaricare il componente appena installato.

Creiamo il filmato Flash

A questo punto apriamo Flash e creiamo un nuovo filmato. Aprite la finestra Componenti e dovreste trovare Google Maps:

Selezionate il componente GoogleMapsLibrary e trascinatelo nello stage. Nel primo frame del nostro filmato inserite il seguente semplice codice:

PLAIN TEXT

Actionscript:

// Importo le classi Google Maps
import com.google.maps.*;
import com.google.maps.overlays.*;
import com.google.maps.controls.*;
 
var map:Map = new Map();
map.key     = "API_KEY"; // vedi sotto per ottenere una tua chiave
// In questo esempio imposto la dimensione della Mappa Google della
// stessa grandezza del filmato. In alternativa potete inserire le
// dimensioni che preferite.
map.setSize( new Point(stage.stageWidth, stage.stageHeight));
addChild(map);

Nella riga 7 dovete sostituire la stringa API_KEY con la chiave di attivazione che fornisce Google. Per ottenerla basta tornare sul sito Google Maps API for Flash e richiedere una API Key cliccando su Sign up for a Google Maps API Key. Quando vi verrà chiesto di inserire l'url del sito sul quale volete utilizzare il filmato Flash che accede alle API di Google, nel caso non lo sapete ancora o voletete semplicemente provare il filmato in locale, inserite http://localost e cliccate su Generate API Key:

A questo punto possiamo già provare il filmato, ottenendo:

Aggiungiamo qualche controllo

Per prima cosa aggiungiamo i classici controlli di Posizione, Zoom e Tipo Mappa. Per fare questo dobbiamo essere sicuri che la mappa sia pronta all'uso. Basta quindi creare un listener sull'evento MapEvent.MAP_READY. Aggiungiamo quindi le seguenti righe di codice:

PLAIN TEXT

Actionscript:

// Aggiungiamo i controlli
map.addEventListener( MapEvent.MAP_READY, onMapReady );
 
function onMapReady(e:MapEvent):void {
    map.addControl( new PositionControl() );
    map.addControl( new ZoomControl() );
    map.addControl( new MapTypeControl() );
}

Impostiamo un indirizzo

A questo punto possiamo impostare la mappa in modo che visualizzi un indirizzo specifico, come la sede della mia società Saidmade a Modena - o qualsiasi altro indirizzo che preferite.
Suggerimento: per trovare le coordinate del nostro indirizzo, ovvero Latitudine e Longitudine, possiamo usare questo semplice e utile hack. Aprire il sito di Google Maps. Una volta sulla mappa cercate l'indirizzo che desiderate (ad esempio Via Cortese 10, Modena). Quando l'indirizzo è visualizzato sulla mappa, inserite questa riga nella barra indirizzi del browser:

PLAIN TEXT

JavaScript:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Si aprirà una finestra pop-up con le coordinate utilizzabile nel codice:

Torniamo ad ActionScript e aggiungiamo le seguenti righe di codice nella funzione onMapReady():

PLAIN TEXT

Actionscript:

// centro la mappa su una specifica località
map.setCenter( new LatLng( 44.639828, 10.941795), 18, MapType.SATELLITE_MAP_TYPE );

Eseguiamo il filmato:

Aggiungiamo un Marker

Sempre all'interno della funzione onMapReady() aggiungiamo le seguenti righe di codice:

PLAIN TEXT

Actionscript:

// aggiungiamo il default marker
var m:Marker = new Marker( new LatLng( 44.639828, 10.941795) );
map.addOverlay(m);

I Marker possono essere personalizzati a piacimento, sia tramite gli stili fornite dalle API stesse di Google, sia tramite Flash. Ad esempio aggiungendo questa import all'inizio del codice:

PLAIN TEXT

Actionscript:

import com.google.maps.styles.*;

e sostituiendo il codice di creazione Marker visto prima con:

PLAIN TEXT

Actionscript:

// aggiungiamo il default marker
var m:Marker = new Marker(
  new LatLng(44.639828, 10.941795),
  new MarkerOptions({
     strokeStyle: new StrokeStyle({color: 0x987654}),
     fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
     radius: 12,
     hasShadow: true
}));
map.addOverlay(m);

otteniamo il seguento effetto:

In alternativa è possibile associare direttamente un MovieClip come Marker. Essendo un MovieClip, ovviamente, esso potrà contenere animazioni, video o qualsiasi altro tipo di contenuto interattivo supportato in Flash. Inoltre è possibile disegnare linee e forme così da creare delle mappe interattive e ricche di contenuti multimediali.
Per aggiungere un MovieClip e sufficiente crearlo, usando ad esempio un'immagine o un'animazione Flash, e impostare le sue proprietà in questo modo:

Fatto questo modificate il codice di creazione Marker in:

PLAIN TEXT

Actionscript:

// aggiungiamo il default marker
var m:Marker = new Marker( new LatLng(44.639828, 10.941795),
               new MarkerOptions( {icon: new myMarkerMovieClip() } ) );
map.addOverlay(m);

Tutte le informazioni sulle API, le classi, metodi, eventi e proprietà sono disponibili su Google Maps API ActionScript Reference.
Inoltre l'intero pacchetto è stato recentemente aggiornato con molte novità interessanti, come le Mappe 3D.

Tags: ActionScript, Actionscript 3.0, Adobe-Flash, api, Featured, Flash CS4, Flash CS4, Google Maps API, Google Maps API ActionScript Reference, Latitudine, Longitudine, Marker, Overlay, RIA, Tutorials

Post correlati

Photoshop tutorial: effetti con le ombre

Giovambattista Fazioli — Thu, 27 Aug 2009 16:16:01 PDT

In questo tutorial voglio mostrarvi alcune effetti particolari che si possono applicare ad un semplice oggetto rettangolare giocando con le ombre. Ovviamente non mi riferisco all'effetto shadow applicabile su un layer, ma a vere e proprie ombre realizzate manualmente. Prima di tutto disegniamo su un layer un rettangolo tipo questo:

Gli effetti che si possono creare sono vari e le varianti si basano tutte sul medesimo procedimento, lasciando ampio spazio all'immaginazione. Ecco alcuni esempi:

Tutti questi effetti hanno in comune l'estrema semplicità della loro realizzazione. Per realizzarli, infatti, è sufficiente aggiungere un layer sotto il nostro rettangolo, che sarà il layer ombra. Su questo traccieremo un'immagine (nera) identica al rettangolo originale. Per fare questo si può procedere in vari modi, dipendenti dalla complessità della forma principale. Nel nostro caso è possibile selezionare i contorni del rettangolo cliccando sul layer mantenendo premuto il tasto Command (Control su PC). Ottenuta la selezione clicchiamo sul layer ombra e riempiamolo del colore nero:

Tasto destro del mouse sulla selezione e click su Riempi
Command + Cancel (ALT + Cancel su PC) se avete impostato il colore nero come colore di sfondo

A questo punto applichiamo un effetto Sfocatura al layer ombra: dal menu Filtri selezionate Sfocatura->Controllo sfocatura... e inserito un valore di 3/4 a seconda del gusto. Ora ridimensionate l'ombra (che con la sfocatura sarà visibile sotto il nostro rettangolo) di un 90%. Fatto questo non rimane che decidere il tipo di effetto ombra da applicare. Potete infatti distorcere il layer con l'apposita funzione presente nel menu Modifica:

Arrivati a questo punto la vostra immaginazione determinerà il risultato finale. Se non volete Alterare manualmente l'ombra potete sfruttare alcune delle distorsioni predefinite nel menu che trovate in alto a destra:

Selezionando Arcata, ad esempio, potete aggiustare la deformazione e ricreare l'ultimo effetto mostrato negli esempi di sopra. Giocando poi con la trasparenza e le simmetrie è possibile ottenere:

Tags: Case Study, Effetti, Featured, Grafica & Design, Grafica & Design, Photoshop, Photoshop, shadow, Tutorials, Tutorials

Post correlati

Come impostare XCode per usare l’iPhone al posto del simulatore

Giovambattista Fazioli — Wed, 26 Aug 2009 16:05:21 PDT

In rete ho trovato un bellissimo screencast su come configurare il nostro device iPhone in modo da poterlo utilizzare per il test di un'applicazione; al posto quindi del simulatore. Lo screencast dura circa sette minuti e ci guiderà passo per passo su tutto il processo di configurazione dell'ambiente XCode, la richiesta dei certificati, etc... così da poter lanciare il codice sorgente sul dispositivo iPhone. Contestualmente allo screencast potete avvalervi anche di una spiegazione testuale presente nel pacchetto.

Tags: Apple, Debug, Device, Featured, iPhone, iPhone, Mobile, Screencast, Sviluppo, Sviluppo, Tutorials

Post correlati

Impedire la propagazione degli eventi con jQuery

Giovambattista Fazioli — Fri, 21 Aug 2009 02:53:39 PDT

Due elementi del DOM HTML sovrapposti, entrambi sensibili ad un evento click, soffrono dell'annoso problema della propagazione degi eventi tra gli strati del DOM stesso: il cosidetto event bubbling. Questo comportamento (che ritroviamo anche in altri ambienti di sviluppo: vedi Actionscript 3.0: MovieClip over MovieClip) è di per se utile in moltissimi casi. Tuttavia, in altri, genera non pochi problemi. Ad esempio immaginiamo di avere un div contenitore sensibile all'evento click. Sovrapposto a questo troviamo un classico link anchor a. Cliccando sul link oltre al "cambio pagina" scatterà l'evento associato al div contenitore. Per impedire la propagazione dell'evento click dall'anchor a al div contenitore, possiamo usare jQuery in questo modo:

PLAIN TEXT

HTML:

 id="box">
  id="mylink" href="#">Link

id="box">

id="mylink" href="#">Link

Tramite jQuery è possibile impedire che l'evento click sul tag anchor a si propaghi agli elementi sottostanti:

PLAIN TEXT

JavaScript:

$('a#mylink').click(
    function(event) {
        document.location = event.target.href;
        event.stopPropagation();
        event.preventDefault();
    }
);

Tags: Bubbling, Event Bubbling, eventi, Internet, Javascript, jQuery, jQuery, preventDefault(), stopPropagation(), Sviluppo