Undolog.com » Sviluppo

Very short trick: rendere invisibili i commenti HTML

Giovambattista Fazioli — Thu, 18 Mar 2010 14:23:31 +0000

Commentare codice HTML è una prassi durante le prime fasi di sviluppo Web. Tuttavia il codice commentato rimane visibile all'interno della pagina, anche se viene ignorato dal browser. Selezionando "Visualizza Sorgente" o "Visualizza Codice" dal nostro browser, saremo sempre in grado di vederlo. I commenti in HTML si applicano utilizzando la sintassi:

PLAIN TEXT

HTML:

Visibile
Visibile

All'interno dei marcatore è possibile inserire - quindi commentare - sezioni HTML:

PLAIN TEXT

HTML:

Visibile
Visibile

Come detto sopra, la parte di codice commentata, quella compresa tra le marcature , è visibile perchè inviata comunque dal web server a noi client. Il ché produce sicuramente due svantaggi:

Il codice HTML è visibile, quando vorrei rimanesse nascosto perchè riguarda sezioni demo o di futura implementazione
Le sezioni commentate - se corpose - appesantiscono inutilmente la pagina; sono inviate ma non processate

Un piccolo trucco/consiglio se si ha a disposizione un linguaggio server-side, come PHP o ASP, è quello che utilizzare le procedure di commento di questi ultimi per commentare codice HTML. Tornando agli esempi di sopra, se avete a disposizione PHP si potrebbe usare:

PLAIN TEXT

HTML:

Visibile
<?php /*
  class="right">
    Commentato
 

*/ ?>

Visibile

In pratica invece di usare la coppia , si usa la coppia e */ ?>. In questo caso, infatti, la pagina viene processata dal vostro server-side-language (PHP o ASP) prima di essere inviata al browser-client. Così facendo il commento PHP viene a scomparire nella nostra pagina e non inviato al browser ma, ovviamente, sempre presente nei sorgenti.






	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: browser, Codice, Commento, HTML, Internet, PHP, Sviluppo, Sviluppo, trick


	Post correlati
	
	Very short trick: come centrare elementi sulla pagina, anche su IE5 (3)
	Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
	Web2.0: Adobe ci prova con Apollo? (2)
	Snipplr code 2.0: frammenti (snipp) di codice utile (0)
	Nascondimi (0)



Very short snippet: come identificare le chiamate Ajax in PHP
Giovambattista Fazioli — Wed, 17 Mar 2010 14:52:19 +0000
Quando si costruisce un Gateway Ajax, cioè un file che viene richiamato dall'oggetto XmlHTTPRequest Javascript, si può involontariamente creare un tunnel per intrusioni non gradite. Essendo infatti un file come gli altri, posizionato sul nostro server, risulta raggiungibile anche dalla barra indirizzi del browser. Fortunatamente esiste un modo semplice per identificare il tipo di richiesta:
PLAIN TEXT
PHP:




if (@isset($_SERVER['HTTP_X_REQUESTED_WITH']) ) {


    // Chiamata dall'oggetto HTTPRequest (Ajax)


} else {


    // Non fare nulla o mostra un alert


}






In questo modo abbiamo impedito le chiamate dalla barra indirizzi del browser. La chicciola (@, at) non è strettamente necessaria, tuttavia, se gli header sono stati già inviati alla pagina, si potrebbe ottenere uno spiacevole Warning.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Ajax, Ajax, Gateway, http, Internet, Javascript, Javascript, PHP, PHP, Snipp, Sviluppo, xml, XMLHttpRequest


	Post correlati
	
	Very short trick: proxy RSS con SimplePie (1)
	Tunneling e proxy server per Ajax e non solo (4)
	Snipplr code 2.0: frammenti (snipp) di codice utile (0)
	Javascript Content vs PHP (0)
	Wordpress: come creare passo passo un proprio login (21)





10,000 WP Thanks
Giovambattista Fazioli — Tue, 16 Mar 2010 14:38:48 +0000

Un bel record e una bella soddisfazione!




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Eventi & Iniziative, PHP, PHP, Plugin, Plugins, Software, Sviluppo, Widget, WordPress, WordPress, WordPress MU, WP-Bannerize


	Post correlati
	
	WP Bannerize 2.4.1 (0)
	Very short snippet: Wordpress, lista categorie con checkbox (1)
	WP CleanFix 0.3.0 beta release (3)
	Wordpress: rimuovere i menu dell’amministrazione (12)
	Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)





setAnimationDidStopSelector: usi diversi ed avanzati
Giovambattista Fazioli — Mon, 08 Mar 2010 20:42:06 +0000
Nella maggioranza dei casi, o perchè siamo abituati o perchè l'abbiamo visto in tutorial e in alcuni testi, utilizziamo il setAnimationDidStopSelector in questa maniera:
PLAIN TEXT
Objective-C:




[UIView beginAnimations:nil context:NULL];


[UIView setAnimationDuration:1.5];


[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];


[UIView setAnimationDelegate:self];


[UIView setAnimationDidStopSelector:@selector(removeView)];


    


myView.alpha = 0;


    


[UIView commitAnimations];


 


//


 


- (void) removeView {


    [myView removeFromSuperview];


}






Nel codice sopra esposto la setAnimationDelegate imposta self come delegato e tramite la setAnimationDidStopSelector gli invia un messaggio removeView quando l'animazione è terminata. Il codice è di per sé corretto, tuttavia fa uso di una definizione di messaggio (removeView) che potrebbe essere omessa. Guardate adesso lo stesso codice, con il medesimo effetto, senza il messaggio removeView:
PLAIN TEXT
Objective-C:




[UIView beginAnimations:nil context:NULL];


[UIView setAnimationDuration:1.5];


[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];


[UIView setAnimationDelegate:myView];


[UIView setAnimationDidStopSelector:@selector(removeFromSuperview)];


    


myView.alpha = 0;


    


[UIView commitAnimations];






La cosa interessante di questo approccio è che myView potrebbe essere una sottoclasse di una UIView! Potrebbe quindi essere una nostra classe personalizzata con propri messaggi ed, nel modo esposto, tranquillamente richiamabile da setAnimationDidStopSelector. Inoltre, la setAnimationDidStopSelector accetta selettori con parametri:
PLAIN TEXT
Objective-C:




[UIView beginAnimations:nil context:NULL];


[UIView setAnimationDuration:1.5];


[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];


[UIView setAnimationDelegate:myView];


[UIView setAnimationDidStopSelector:@selector(myMessage:param1)];


    


myView.alpha = 0;


    


[UIView commitAnimations];






Questo esempio può essere esteso a tutti qui casi dove impostiamo un delegato che, atro non è, che un puntatore ad un'istanza di un oggetto qualsiasi.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Apple iPhone, iPad, iPhone, Mobile, Objective-C, Objective-C, selector, self, setAnimationDelegate, setAnimationDidStopSelector, Sviluppo, UIView


	Post correlati
	
	iPhone: creare un metodo per rispondere agli eventi cross class (0)
	Come creare un proprio protocollo con delegato (0)
	Very short snippet: Apple iPhone file system (0)
	Objective-C: esporre proprietà in una classe (0)
	iPhone SecondApp: indovina il numero – parte 2 (0)





WP CleanFix 0.3.0 beta release
Giovambattista Fazioli — Thu, 04 Mar 2010 12:17:25 +0000
WP CleanFix è un Plugin per Wordpress (compatibile anche con Wordpress MU - finchè esisterà questa distinzione) che ho scritto per ottimizzare, manutenere, pulire e sistemare il nostro Database Wordpress.

Questa è ancora una versione preliminare, tuttavia le funzioni disponibili funzionato correttamente. Ricordo che operando direttamente sul Database, prima di provare qualsiasi funzioni di eliminazione, è bene eseguire un backup del Database.
Le caratteristche di questa release sono:

Compatibilità con Wordpress MU
Completamente in Ajax per eseguire i controlli in modo asincrono
Localizzazione Italiano/Inglese
Controlla gli User Meta non utilizzati
Controlla/Rimuove le Revisioni dei Posts
Controlla/Rimuove i Post Meta non utilizzati
Controlla/Rimuove i Tags non utilizzati
Controlla se esistono Posts senza un Autore valido
Controlla/Rimuove Categorie non utilizzate
Controlla/Rimuove Termini (terms) non correttamente collegati
Controlla/Rimuove Taxonomie (taxonomy) non correttamente collegate
Controlla/Rimuove i Commenti non approvati: con visualizza veloce
Controlla/Rimuove i Commenti SPAM: con visualizza veloce





	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Database, Internet, PHP, Plugin, Plugins, Software, Sviluppo, WordPress, WordPress, WordPress MU, WP CleanFix


	Post correlati
	
	WP Bannerize 2.4.1 (0)
	10,000 WP Thanks (0)
	Wordpress: rimuovere i menu dell’amministrazione (12)
	Wordpress: bugs nell’installazione dei plugins da un archivio ZIP (3)
	Un tema Wordpress per tutti (20)





WP Bannerize 2.4.1
Giovambattista Fazioli — Wed, 03 Mar 2010 21:37:31 +0000
Era un po' che volevo segnalarlo, visto che WP Bannerize sta per raggiungere quota 10.000 Download! Ma il tempo - ultimamente - è davvero tiranno!

Ho rilasciato una nuova major release con alcune novità importanti, tra cui la localizzazione in Italiano, Inglese e in Portoghese (Brasile) - un grazie a Fernando Lopes per la spontanea, gentile e rapidissima traduzione.
Tra le caratteristiche di questa versione ricordo:

Localizzate for Italian, English and Portuguese
Create your list (group/key) Banners image
Show your banners list by php code or Widget
Set random, limit and catories filters
Wordpress Admin Contextual HELP
Wordpress MU compatible





	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Eventi & Iniziative, Featured, Internet, Localizzazione, PHP, PHP, Plugin, Plugins, Software, Sviluppo, Widget, WordPress, WordPress, WordPress MU, WP-Bannerize


	Post correlati
	
	10,000 WP Thanks (0)
	Very short snippet: Wordpress, lista categorie con checkbox (1)
	WP CleanFix 0.3.0 beta release (3)
	Wordpress: rimuovere i menu dell’amministrazione (12)
	Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)





iPhone: eliminare l’effetto ombra durante lo scroll in un UIWebView
Giovambattista Fazioli — Thu, 25 Feb 2010 00:37:08 +0000
In questo ultimo periodo ho lavorato su tre applicazioni per Apple iPhone, praticamente in contemporanea. Due sono state già approvate da Apple e si trovano su App Store: TheFirst e iMakeLove.
 
In entrambe le applicazioni ho adottato l'uso di un oggetto UIWebView per visualizzare le istruzioni.

L'oggetto UIWebView si è ilevato davvero comodo in questo caso. Mi ha permesso di visualizzare in modo rapido e gradevole una testo, corredandolo in caso di immagini e qualsiasi altra cosa sia visualizzabile su una pagina Web (Flash escluso su iPhone).

L'oggetto UIWebView è davvero versatile e necessita di pochissime impostazioni per essere utilizzato. Unico difetto riscontrato è la presenza di una misteriosa ombra che appare quando si effettua uno scroll fuori dall'area del controllo, sia in basso che in alto:

Dopo varie ricerche ho capito che questo comportamento dipende dalle SDK, in particolare dagli ultimi aggiornamenti. Inoltre Apple non ha rilasciato nessuna dichiarazione ufficiale su come rimuoverlo, al contrario ha bollato come codice non permesso una serie di hack che fanno uso di funzioni riservate o non documentante. Alla fine avevo lasciato perdere, sia per questioni di tempo, sia perchè le soluzioni sembravano tutte fuori dagli schemi Apple.

Fortunatamente mi è arrivata la soluzione, spero abbastanza regolare, che sembra proprio risolvere il problema (grazie ad  Adolfo):
PLAIN TEXT
Objective-C:




// webView è il controllo UIWebView


id scroller = [webView.subviews objectAtIndex:0];


 


for (UIView *subView in [scroller subviews])


    if ([[[subView class] description] isEqualToString:@"UIImageView"])


        subView.hidden = YES;






Come sottolineato da Adolfo questo è comunque un hack che potrebbe smettere di funzionare con futuri rilasci delle SDK.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Apple, Apple iPhone, iMakeLove, iPhone, iPhone, iTunes, Objective-C, Sviluppo, TheFirst, UIImageView, UIWebView, Web


	Post correlati
	
	Very short snippet: streaming mp3 file su Apple iPhone (0)
	The First: disponibile su iTunes (1)
	Apple iPhone: creare un custom toggle button (0)
	10 utili trucchi e snippet per Apple iPhone e Xcode (0)
	XCode: organizzare il codice con la direttiva #pragma mark (0)





Come localizzare immagini e viste di Interface Builder
Giovambattista Fazioli — Tue, 23 Feb 2010 21:41:15 +0000
Dopo aver illustrato come localizzare le nostre stringhe in Xcode, vediamo adesso quanto risulta semplice - applicando la medesima tecnica - localizzare immagini e viste/interfacce realizzate con Interface Builder.
Localizzare risorse grafiche
Il processo, come accennato, è il medesimo; se abbiamo un'immagine già inserita nelle nostre risorse, o ne inseriamo una nuova, e vogliamo "localizzarla" - cioè gestire due o più immagini in base alle lingue supportate - basterà cliccare con il tasto destro sull'immagine (Adium.png in questo esempio) e selezionare Get Info:

Clicchiamo Make File Localizable in basso a sinistra.

Clicchiamo su Add Localization e inseriamo Italian:

In modo da ottenere:

La nostra immagine viene spostata (fisicamente, una delle rare volte in cui quello che accade nell'alberatura Xcode si riflette sul filesystem) sotto le cartelle virtuali English.lproj e Italian.lproj esattamente come accadeva con il testo:

A questo punto ognuna delle cartelle English.lproj e Italian.lproj contiene una stessa versione dell'immagine. Questa immagine è manipolabile all'interno di Interface Builder, dove ne vedremo - per default - la versione inglese.

Arrivati a questo punto, basta sovrascrivere uno (o entrambi i file Adium.png) per ottenere una localizzazione delle immagini "lampo".
Localizzare i file XIB
Anche le interfacce costruite con Interface Builder possono essere localizzate nella loro interezza, quando lo si ritiene necessario. Il procedimento è identico a quello svolto con le risorse grafiche: aggiungiamo un ViewController (ad esempio infoViewController) con interfaccia XIB, lo selezioniamo, scegliamo Get Info dal menu contestuale, rendiamo il file localizzabile, aggiungiamo la localizzazione in italiano:

Cliccando su English o su Italian si aprirà Interface Builder! Questa volta, sul filesystem, noteremo che sono state create due cartelle (English.lproj e Italian.lproj) all'interno della classica cartella Classes. Entrambe avranno il loro file infoViewController.xib. La comodità, in questo, risolta evidente nel codice; quando andremo ad istanziare il nostro controller si avrà un codice "pulito" di questo tipo:
PLAIN TEXT
Objective-C:




InfoViewController *info = [InfoViewController alloc];


[self.view addSubview:info.view];






Come vedete non c'è traccia di nessuna dichiarazione relativa alla localizzazione, totalmente gestita da sistema. Le due interfacce, ovviamente, possono essere completamente differenti, in quanto risultano a tutti gli effetti come due file XIB separati.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: AppleSide, Immagini, Interface Builder, iPad, iPhone, iPhone, Localizzazione, Mobile, Objective-C, Objective-C, Tutorials, XCode


	Post correlati
	
	iPhone SecondApp: indovina il numero – parte 2 (0)
	iPhone FirstApp: indovina il numero – parte 1 (0)
	Hi phone (7)
	XCode: organizzare il codice con la direttiva #pragma mark (0)
	Xcode shortcut (0)





Come creare un proprio protocollo con delegato
Giovambattista Fazioli — Wed, 10 Feb 2010 10:43:54 +0000
Anche nei tutorial più semplici è possibile incontrare l'uso dei protocolli. Sarà certamente capitato a molti di utilizzare nel vostro view controller un protocollo, inserendo, accanto alla definzione dell'interfaccia, una dicitura simile a:
PLAIN TEXT
Objective-C:




@interface myViewController : UIViewController  {


...


}






I protocolli (nell'esempio sopra ) sono un particolare modo di Objective-C di far ereditare comportamenti di una classe in un'altra. Nell'esempio mostrato sopra il nostro view controller probabilmente gestisce un componente UIWebView. Volendo rispondere agli eventi di quest'ultimo ne incorpora il protocollo UIWebViewDelegate.

Così, implementato il protocollo UIWebViewDelegate nel nostro view controller, possiamo inserire nel file .m di implementazione i metodi (messaggi) che saranno invocati dal componente UIWebView, come ad esempio:
PLAIN TEXT
Objective-C:




- (void)webViewDidFinishLoad:(UIWebView *)webView {


// Caricamento pagina terminato


}






In altre parole il nostro view controller condivide l'interfaccia , cioè ne eredita "alcune" caratteristice.
Scrivere un nostro protocollo
Immaginiamo di avere due classi: ClasseA e ClasseB. La classe ClasseA istanzia al suo interno la ClasseB che, a sua volta, genera un messaggio quando accade un determinato evento. Vorremo quindi scrivere un delegato per la ClasseB tale che possa essere utilizzato da ClasseA per rispondere e intercettare gli "eventi" rilasciati da ClasseB.

La prima cosa da fare è aggiungere la definizione del protocollo nella ClasseB insieme ad una property (nello standard Apple) delegate:
PLAIN TEXT
Objective-C:




@protocol ClasseBDelegate 


@optional


- (void)mioEvento:(id)sender;


@end


 


@interface ClasseB : NSObject {


    // altre definizioni


    id  delegate;


}


 


@property (assign) id  delegate;






Come da prassi, nel file .m della ClasseB inserire:
PLAIN TEXT
Objective-C:




@synthesize delegate;






Nel file di implementazione della classe ClasseB possiamo inserire il "fire" del nostro evento in questo modo:
PLAIN TEXT
Objective-C:




if (self.delegate != NULL && [self.delegate respondsToSelector:@selector(mioEvento:)]) {


    [delegate mioEvento:self];


}






Prima di tutto verifichiamo che sia stato impostato un delegato: self.delegate != NULL e che questo delegato fornisca, o possa rispondere, al messaggio mioEvento: [self.delegate respondsToSelector:@selector(mioEvento:)]. Se entrambi le condizioni sono verificate allora viene invocato mioEvento; in questo esempio questo evento prevede anche un parametro (id) che è il puntatore all'istanza della classe ClassB.

La classe ClassA non dovrà far altro che implementare il delegato e inserire il metodo mioEvento:
PLAIN TEXT
Objective-C:




#import "ClasseB.h"


 


@interface ClasseA : NSObject  {


...


}


 


- (void)mioEvento:(id)sender;






Nel file di implementazione quando creiamo la ClassB useremo:
PLAIN TEXT
Objective-C:




ClasseB *classeB = [ClasseB alloc];


[classeB setDelegate: self];






Poi, inseriremo:
PLAIN TEXT
Objective-C:




- (void)mioEvento:(id)sender {


    NSLog(@"mioEvento");


}










	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: @protocol, Apple, class, eventi, Featured, iPad, iPhone, message, Mobile, Object, Objective-C, Objective-C, property, protocolli, selector, self, Sviluppo


	Post correlati
	
	iPhone: creare un metodo per rispondere agli eventi cross class (0)
	setAnimationDidStopSelector: usi diversi ed avanzati (0)
	Objective-C: NSLog() su struct C (0)
	XCode: organizzare il codice con la direttiva #pragma mark (0)
	Xcode shortcut (0)





Wordpress: filtrate il contenuto dei commenti
Giovambattista Fazioli — Fri, 05 Feb 2010 23:30:16 +0000
Mi è capitato di dover sistemare un fastidioso problema su un blog Wordpress: gli utenti lasciavano commenti con frasi lunghissime. Questo produceva la fuoriuscita del testo, sia nel backend che, ancor peggio, nel frontend. L'effetto era davvero orribile e, onde evitare di moderare a mano ogni singolo commento, l'unica soluzione era quella di filtrare - in qualche modo - l'output dei commenti.

Fortunatamente (ed è una delle ragione per cui tutto sommato adoro WP) Wordpress permette di aggiungere un filtro all'output dei commenti. Nel mio caso è bastato aggiungere nel file functions.php le seguenti righe di codice:
PLAIN TEXT
PHP:




function filter_comment($content) {


    $a = explode(" ", $content);


    $content = "";


    foreach($a as $word) {


        if(strlen($word)> 20) $word = substr($word, 0, 20) . "[t...]";


        $content .= ($content == "") ? $word: (" " . $word);


    }


    return $content;


}


 


add_filter('comment_text','filter_comment');


add_filter('get_comment_text ','filter_comment');






Le parole troppo lunghe (maggiori di 20) vengono tagliate e, alla fine, gli aggiungo [t...] - per indicare che è una parola tagliata.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: add_filter(), Commento, comment_text, content, functions.php, get_comment_text, Internet, PHP, PHP, strlen(), substr(), Sviluppo, WordPress, WordPress


	Post correlati
	
	Wordpress: usare gli shortcodes (5)
	Wordpress: functions.php, qualche funzione utile (0)
	Wordpress: estendere le informazioni utente (0)
	Very short snippet: Wordpress, lista categorie con checkbox (1)
	WP Bannerize 2.4.1 (0)





Very short snippet: ottenere l’output di un URL in Objective-C
Giovambattista Fazioli — Fri, 05 Feb 2010 00:23:41 +0000
Avrei forse dovuto scrivere "Very very very, short snippet", tuttavia è un ottimo e comodissimo "trucchetto" questo che sto per mostrare. Eseguendo le "due" righe di codice indicate qui sotto, è possibile ottenere l'output di qualsiasi URL e manipolarlo.
PLAIN TEXT
Objective-C:




NSString *url = [NSString stringWithFormat:@"http://www.appleside.it/"];


NSString *result = [NSString stringWithContentsOfURL:[NSURL URLWithString:url]


                    encoding:NSASCIIStringEncoding 


                    error:nil];


NSLog(@"Read from : %@ = ",apiEndpoint, result);






Ad esempio potremmo sfruttare molti servizi API REST per risolvere svariate problematiche. Tanto per fare un esempio pratico, immaginiamo di volre "comprimere"(trim) l'url http://www.undolog.com, come fanno molti servizi come Twitter, FriendFeed o Facebook. Ebbene potremmo sfruttare questo semplice codice:
PLAIN TEXT
Objective-C:




NSString *url = @"http://www.undolog.com";


NSString *apiRest = [NSString stringWithFormat:@"http://api.tr.im/v1/trim_simple?url=%@",url];


NSString *result = [NSString stringWithContentsOfURL:[NSURL URLWithString:apiEndpoint] 


                    encoding:NSASCIIStringEncoding 


                    error:nil];


NSLog(@"URL Originale: %@ - URL Compresso: %@",url, result);






Tutto il merito, ovviamente, è del metodo stringWithContentsOfURL: in quanto permette di caricare in una stringa il contenuto (output) di un URL.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: api, Mobile, NSString, Objective-C, Objective-C, REST, Snipp, Snippets, stringWithContentsOfURL, Sviluppo


	Post correlati
	
	Very short snippet: iPhone, numeri casuali (0)
	Very short snippet: Wordpress, separare le categorie in due colonne (1)
	Very short snippet: Wordpress, migliorare il campo cerca (3)
	Very short snippet: Wordpress administrator? (1)
	Very short snippet: PHP plain date (1)





AppleSide: iPad, Apple e molto altro
Giovambattista Fazioli — Thu, 28 Jan 2010 09:53:14 +0000
AppleSide è il nuovo magazine targato Saidmade dedicato all'universo Apple, presentato a ridosso della presentazione del nuovo Apple iPad. Sul magazine - con una taglio professionale - troverete moltissime news ed info dedicate alla mela morsicata: tra cui una sezione tutta dedicata al nuovissimo iPad! Inoltre sarà presente una sezione tutta dedicata allo sviluppo, curata dal sottoscritto. Con l'occasione, inauguro anche una nuova categoria qui su undolog, dedicata appunto all'Apple iPad. Sono riuscito già a provare le nuove SDK 3.2 beta - a causa della NDA vi posso svelare davvero poco - tuttavia vi consiglio di leggere iPad SDK 3.2: installazione, novità, prima prova, dove qualcosina sono riuscito a mostrare.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Apple, AppleSide, Develop, Eventi & Iniziative, Featured, iPad, iPad, Magazine


	Post correlati
	
	XCode: organizzare il codice con la direttiva #pragma mark (0)
	XCode: consigli sul Debugging Preferences (0)
	Xcode shortcut (0)
	Windows Vista: caro prezzi (1)
	Web2.0: Adobe ci prova con Apollo? (2)





Come selezionare un gruppo di tag che non hanno figli di un certo tipo
Giovambattista Fazioli — Tue, 26 Jan 2010 15:09:15 +0000
jQuery è giunto alla versione 1.4! Oltre a varie nuove features e la "solita" riscrittura del codice, tutta la documentazione è stata rivista in maniera davvero più leggibile rispetto a prima. Ma vediamo alla questione di questo post; problema: aggiungere, tramite jQuery, una classe a tutti i tag a che possiedono l'attributo target impostato a _blank!

Questo l'avevamo già visto in Very short snippet: jQuery auto target blank link. La questione è che spesso anche le immagini hanno un link ad una nuova finestra e aggiungere un'ulteriore immagine al bordo non è molto bello. Per far in modo che su particolare link non venga applicata la classe esistono due modi:
Aggiungere una classe
Il primo metodo, che vale con qualsiasi link, è quello di aggiungere una classe, ad esempio noexternal, a tutti quei link che, nonostante contengono l'attributo target="_blank", non vogliamo mostrino l'immagine. In pratica vogliamo far in modo che jQuery non li prenda in considerazione.
PLAIN TEXT
JavaScript:




$('a[target=_blank]').not('.noexternal').addClass('external');






Questo meotdo, seppur efficace, costringe comunque ad inserire nel link che vogliamo escludere la classe noexternal:
PLAIN TEXT
HTML:




 target="blank" href="http://www.undolog.com">Link esterno con immagine


 


 target="blank" class="noexternal" href="http://www.appleside.it">Link esterno senza immagine






Usare un ciclo each()
In alternativa, per disabilitare l'uso della classe external su tutti quei link che contengono un'immagine, possiamo usare:
PLAIN TEXT
JavaScript:




$('a[target=_blank]:not(.noexternal)').each(


        function() {


            var me = this;


            if(!($(me).children('img').length> 0) ) 


                 $(me).addClass('external');


        }


    );






Questa svolge la medesima funzione di quella precedente con l'aggiunta della verifica se il "primo" figlio è un'immagine. In caso affermativo la classe external non viene aggiunta al tag a.

Sarebbe interessante capire se esiste un metodo per fare la stessa cosa senza usare un "ciclo" each()!




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: addClass(), class, CSS, each(), Internet, Javascript, jQuery, jQuery, link, NOT, Snipp, Sviluppo, target, _blank


	Post correlati
	
	Very short snippet: jQuery auto target blank link (3)
	Wordpress: personalizzare la navigazione tra i post (5)
	Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)
	Wordpress: migliorare la lista dei commenti (3)
	Wordpress: eliminare i post duplicati nei loop multipli (3)





Wordpress: estendere le informazioni utente
Giovambattista Fazioli — Mon, 25 Jan 2010 23:18:54 +0000
Le informazioni su un utente, o autore, di un blog Wordpress possono essere estese in modo semplice. Potrebbe ad esempio essere utile inserire la data di nascita, delle informazioni bibliografiche, l'indirizzo della sede di lavoro o, estremamente comodo, un campo per dei permessi speciali - da controllare in seguito nel template.

L'operazione che ci accingiamo a fare non necessita di un Plugin, ma il codice che serve può essere posizionato nel - consueto - file functions.php.
Nota: per situazioni più articolate l'uso di un Plugin potrebbe essere la scelta migliore. Agendo sul file functions.php leghiamo il nostro codice al tema. Un Plugin, soprattutto se il codice scritto è "abbondante", risulta di più facile riutilizzo.
Apriamo dunque il file functions.php e iniziamo scrivendo il codice che visualizzerà il nostro campo aggiuntivo nell'amministrazione utente di Wordpress:
PLAIN TEXT
PHP:




// Questa funzione - vedi add_action() più sotto, si occupa di visualizzare


// il nostro campo aggiuntiva nell'amministrazione di Wordpress


function nuovo_user_meta($user) { ?>


    Campi aggiuntivi


        
            

                

                

            

        




Nuovo Campo




                     echo esc_attr( get_the_author_meta( 'nuovo_user_meta', $user->ID ) ); ?>" class="regular-text" />



                    Inserisci il tuo campo aggiuntivo.


                






 }


 


// Aggiungiamo la nostra funzione all'amministrazione di Wordpress


// in questo "semplice" caso, la funzione "mostra" (show_user_profile)


// e quella di "modifica" (edit_user_profile) coincidono, ma in casi


// più articolati potrebbero essere differenti


add_action( 'show_user_profile', 'nuovo_user_meta' );


add_action( 'edit_user_profile', 'nuovo_user_meta' );






Andando a sbirciare nell'amministrazione, selezionando il vostro utente, troverete già il nuovo campo. Tuttavia per adesso il nuovo campo è solo visualizzato, ma basteranno poche altre righe di codice per gestire la sua memorizzazione:
PLAIN TEXT
PHP:




// Memorizza, per l'utente $user_id, un nuovo campo identificato come


// 'nuovo_user_meta'


function nuovo_user_meta_update( $user_id ) {


    // solo chi ha i permessi di editing 


    if ( !current_user_can( 'edit_user', $user_id ) ) return false;


 


    /* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */


    update_usermeta( $user_id, 'nuovo_user_meta', $_POST['nuovo_user_meta'] );


}


// Anche in questo caso ci avvaliamo della add_action() per aggiungere


// il nostro pezzo di codice. Notate che permettiamo l'aggiornamento


// sia all'utente che visualizza il proprio profilo (personal_options_update) 


// che a qualsiasi utente amministratore o che ha i permessi di edit (edit_user_profile_update)


add_action( 'personal_options_update', 'nuovo_user_meta_update' );


add_action( 'edit_user_profile_update', 'nuovo_user_meta_update' );






A questo punto il nostro campo aggiuntivo è completo e non resta altro che utilizzarlo. Per recuperare un campo di questo tipo è sufficiente chiamare la funzione get_the_author_meta() o the_author_meta():
PLAIN TEXT
PHP:




Campo Aggiuntivo:  the_author_meta('nuovo_user_meta') ?>










	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: add_action(), functions.php, get_the_author_meta(), Internet, PHP, PHP, Sviluppo, Template, the_author_meta(), WordPress, WordPress


	Post correlati
	
	Wordpress: usare gli shortcodes (5)
	Wordpress: rimuovere i menu dell’amministrazione (12)
	Wordpress: personalizzare la navigazione tra i post (5)
	Wordpress: migliorare la lista dei commenti (3)
	Wordpress: functions.php, qualche funzione utile (0)





FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine
Giovambattista Fazioli — Wed, 20 Jan 2010 22:41:26 +0000
A volte basta spostare un elemento, cambiando punto di vista, per risolvere un problema apparentemente insuperabile. Quando poi si ha a che fare con compatibilità tra i browser e CSS, inventarsi soluzioni "spettacolari" (acrobazie direi) è all'ordine del giorno. Quello che vi mostro è un modo semplice per applicare bordi arrotondati a delle immagini utilizzando -moz-border-radius, disponibile per Mozilla FireFox e -webkit-border-radius, per Safari e Google Chrome.

Normalmente questi attributi CSS vengono applicati a container come il div:
PLAIN TEXT
CSS:




div#box {


    width:100px;


    height:100px;


    -moz-border-radius:16px;


    -webkit-border-radius:16px;


    background: #eee;


    border: 1px solid #666;


}






Con codice HTML del tipo:
PLAIN TEXT
HTML:




 id="box"></div>






Ottenendo:

Volendo fare la stessa cosa su un'immagine, ci si accorge che il risultato è parzialmente raggiunto! Utilizzando un CSS di questo tipo:
PLAIN TEXT
CSS:




img#round-border {


    -moz-border-radius:8px;


    -webkit-border-radius:8px;


    background: #eee;


    border: 1px solid #666;


}






Su una formattazione HTML come questa:
PLAIN TEXT
HTML:




 id="round-border" src="images/undolog.png" alt="Round Image Test" />






Safari e Google Chrome rispondono bene:

Mentre FireFox stupisce mostrando:

Com'è possibile vedere dallo screenshot qui sopra, in FireFox 3.5.7 il bordo "arrotondato" sembra esserci ma l'immagine è rimasta squadrata!

Un semplice espediente - utile in particolari casi - permette di risolvere agevolmente il problema:
PLAIN TEXT
CSS:




div#box {


    -moz-border-radius:8px;


    -webkit-border-radius:8px;


    background: url(http://dominio.com/images/undolog.png) no-repeat;


    border: 1px solid #666;


}






In pratica invece di utilizzare direttamente il tag img, sfruttiamo un contenitore qualsiasi - in questo caso un div - impostando il suo sfondo con l'immagine che vogliamo visualizzare con i bordi arrotondati.

Questa soluzione ha ovviamente una serie di inconvenienti:

Abbiamo perso il tag img (con il suo attributo alt), di conseguenza nel DOM html non esiste nessuna immagine, il ché significa che eliminando i fogli di stile la nostra immagine scompare
Dovendo definire un contenitore (nel nostro caso un div) tramite i fogli di stile, dobbiamo conoscere in partenza la sua dimensione

Come ho più volte scritto su questo blog sarebbe proprio il caso che lo "standard" CSS (2 o 3 che sia) modificasse il suo nome in "ognuno fa quello che gli pare" ...




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: -moz-border-radius, -webkit-border-radius, border-radius, browser, Chrome, Compatibilità, CSS, CSS, firefox, google, IMG, Immagini, Internet, Mozilla, Safari, Snipp, Sviluppo, Web, WebKit


	Post correlati
	
	jQuery: bordi rotondi sulle immagini per sovrapposizione (1)
	Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
	Very short trick: disabilitare il ridimensionamento di una textarea su Safari (7)
	CSS3: qualcuno ha visto Internet Explorer? (5)
	Creare applicazioni Desktop con Google Chrome e FireFox? (1)





10 utili snippet per Apple iPhone
Giovambattista Fazioli — Thu, 07 Jan 2010 22:53:28 +0000
Eseguire un metodo dopo n secondi
Tutta la famiglia performSelector è davvero interessante e può essere utile in una moltitudine di casi. La sua applicazione più semplice e comune è la seguente:
PLAIN TEXT
Objective-C:




[self performSelector:@selector(myMethod) withObject:nil afterDelay:3];


//


- (void)myMethod {


    NSLog(@"Hello World!");


}






Tuttavia considerate che il "timer" non è preciso. Questa procedura, quindi, va usata quando non è richiesta una "notevole" precisione temporale.
Recuperare la versione dell'applicazione
PLAIN TEXT
Objective-C:




NSString *version = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleVersion"];


NSLog(@"versione = %@", version);






YES, true o TRUE?
Andando a spulciare nel Kernel Apple iPhone è possibile renderci conto che YES, true e TRUE sono in pratica la stessa edentica cosa:
PLAIN TEXT
Objective-C:




// definizione di YES


#define YES (BOOL)1


#define NO  (BOOL)0


 


// definizione di true


#define true  1


#define false 0


 


// definizione di TRUE


#if !defined(TRUE)


    #define TRUE 1


#endif


 


#if !defined(FALSE)


    #define FALSE 0


#endif






Almeno per adesso...
Vibrazione
PLAIN TEXT
Objective-C:




#import 


//


AudioServicesPlaySystemSound (kSystemSoundID_Vibrate);






Puntatore CGImageRef a partire da un UIImage
PLAIN TEXT
Objective-C:




UIImage *heart = [UIImage imageNamed:@"LittleHeart.png"];


CGImageRef image = [heart CGImage];


// L'immagine adesso può essere "rasterizzata" su un CGContextRef


CGContextDrawImage(c, (CGRect){0, 0, 100, 100}, image);






Animazioni
PLAIN TEXT
Objective-C:




[UIView beginAnimations:nil context:NULL];


[UIView setAnimationDuration:1.5];


[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];


// ...


[UIView commitAnimations];






NSLog
PLAIN TEXT
Objective-C:




NSLog(@"NSString object %@ ", myString);


NSLog(@"Float: %f ", myFloat); 


NSLog(@"Integer: %i ", myInt);






Convertitore da RGB a UIColor
PLAIN TEXT
Objective-C:




#define RGBA(r,g,b,a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]






Passare parametri ad un NSTimer
Sfruttando il parametro userInfo è possibile inviare un puntatore ad un nostro oggetto al metodo richiamato da timer.
PLAIN TEXT
Objective-C:




[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timerMethod) userInfo:objectPointer repeats:YES];


 


// ...


 


-(void)timerMethod:(NSTimer*)timer {


// Recupero il puntatore al mio oggetto


objectPointer = [timer userInfo];


// oppure


[[timer userInfo] myMethod]; 


int a = [[timer userInfo] myProperty];


// che è lo stesso


int a = [objectPointer myProperty];


}






Tempo di esecuzione
Ecco un semplice modo per calcolare tempi brevi utili per verificare la velocità di esecuzione del codice:
PLAIN TEXT
Objective-C:




CFAbsoluteTime initialTime = CFAbsoluteTimeGetCurrent();


// ... code


CFAbsoluteTime finalTime = CFAbsoluteTimeGetCurrent(); 


NSLog(@"Tempo trascorso %f", finalTime-initialTime);










	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: Apple, iPhone, iPhone, Mobile, Objective-C, Snippets, Sviluppo


	Post correlati
	
	Very short snippet: iPhone, numeri casuali (0)
	XCode: organizzare il codice con la direttiva #pragma mark (0)
	XCode: consigli sul Debugging Preferences (0)
	Xcode shortcut (0)
	Very short trick: fermare NSTimer (0)





Commodore 64 Javascript emulator
Giovambattista Fazioli — Tue, 05 Jan 2010 23:18:38 +0000
Un po' di tempo fa avevo segnalato la versione di un emulatore Commodore 64 scritto in Adobe Actionscript 3.0, oggi in una nuova versione:

Adesso è possibile apprezzare il porting della versione Adobe Flash in Javascript:



Sicuramente più lenta della sua controparte in Flash, questa versione in javascript si avvale di jQuery e, di fatto, ne diventa un'estensione per non dire Plugin   (assai riduttivo). Buon divertimento...




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: ActionScript-3.0, Adobe-Flash, Commodore-64, emulatori, Eventi & Iniziative, Flash, Internet, Javascript, Javascript, jQuery, Porting, Software, Sviluppo


	Post correlati
	
	Emulatore Assembler 6502 (3)
	Commodore 64 Web Emulator (4)
	Codice per Commodore 64 (5)
	Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
	Unobtrusive Flash Objects (1)





Objective-C: esporre proprietà in una classe
Giovambattista Fazioli — Mon, 14 Dec 2009 16:30:11 +0000
Vorrei mostrare e discutere alcuni esempi sul come aggiungere e manipolare proprietà in una Classe Objective-C. Un esempio classico, per l'appunto, è il seguente; nella definizione della nostra interfaccia di classe definiamo due proprietà nome e cognome:
PLAIN TEXT
Objective-C:




// MyClass.h


#import 


 


@interface MyClass : NSObject {


    NSString *nome;


    NSString *cognome;


}


 


@property (retain) NSString *nome;


@property (retain) NSString *cognome;


@end






Nel file di implementazione inseriamo la dichiarazione @synthesize in modo tale che Xcode produca per noi i metodi getter e setter usati rispettivamente per leggere ed impostare le nostre due proprietà:
PLAIN TEXT
Objective-C:




// MyClass.m


#import "MyClass.h"


 


@implementation MyClass


 


@synthesize nome, cognome;


 


@end






Quando andremo ad utilizzare la nostra classe MyClass, cioè quando istanziaremo un oggetto di tipo MyClass, possiamo scrive:
PLAIN TEXT
Objective-C:




// qualsiasi altra classe, come AppDelegate


// nel file .h


#import 


#import "MyClass.h"


 


@class TestViewController;


 


@interface TesAppDelegate : NSObject  {


    UIWindow *window;


    TestViewController *viewController;


 


    MyClass *miaClasse;


}


 


// nel file .m


miaClasse = [MyClass alloc];


miaClasse.nome = @"Giovambattista";


NSLog(@"miaClasse.nome = %@", miaClasse.nome);






Oppure, che è equivalente:
PLAIN TEXT
Objective-C:




// sempre nel file .m


[miaClasse setNome:@"Undolog"];


NSLog(@"miaClasse.nome = %@",[miaClasse nome]);






Fin qui tutto bene. Tuttavia potrebbe fuorviare l'equivalenza delle "variabli" interne (ivar) con il nome della proprietà vera e propria. Per capire la differenza, ripropongo lo stesso esempio facendo a meno, questa volta, di @synthesize. Ora, quindi, dovremmo occuparci noi di scrivere i metodi getter e setter. Per sottolineare ulteriormente le differenze, rinominerò le variabili interne inserendo un underscore davanti al nome. Ma vediamo il codice:
PLAIN TEXT
Objective-C:




#import 


 


@interface MyClass : NSObject {


    NSString *_nome;


    NSString *_cognome;


}


 


- (NSString *) nome;                               // get


- (NSString *) cognome;                            // get


 


- (void) setNome: (NSString *)stringaIngresso;     // set


- (void) setCognome: (NSString *)stringaIngresso;  // set


 


@end






A differenza dell'esempio precedente i puntatori alla variabili interne (incapsultate) sono diventati _nome e _cognome. Inoltre troviamo quattro definizioni di metodi che rappresentano le nostre get e set. @property è scomparso, in quanto non serve più.

Vediamo il file di implementazione MyClass.m:
PLAIN TEXT
Objective-C:




#import "MyClass.h"


 


@implementation MyClass


 


// get per "nome"


- (NSString *) nome {


    return _nome;


}


// set per "nome"


- (void) setNome: (NSString *)stringaIngresso {


    _nome = stringaIngresso;


}


 


// get per "cognome"


- (NSString *) cognome {


    return _cognome;


}


// set per "cognome"


- (void) setCognome: (NSString *)stringaIngresso {


    _cognome = stringaIngresso;


}


 


@end






Una classe così scritta potrà essere utilizzata esattamente come la precedente, cioè:
PLAIN TEXT
Objective-C:




miaClasse = [MyClass alloc];


miaClasse.nome = @"Giovambattista";


NSLog(@"miaClasse.nome = %@", miaClasse.nome);


 


// Oppure, che è equivalente:


 


[miaClasse setNome:@"Undolog"];


NSLog(@"miaClasse.nome = %@",[miaClasse nome]);






A livello didattico l'abbandono di @synthesize ci ha costretto a scrivere "da soli" i metodi di get e set, evidenziando - anche con l'aggiunta dell'underscore - le differenze tra il nome della proprietà e la sua ivar interna _nome.

A livello funzionale l'uso dei metodi personali get e set permette un reale controllo del dato prima della sua impostazione (o prima della sua lettura) e quindi un reale incapsulamento per proteggere la variabile interna.

Ad esempio sarebbe possibile impedire il passaggio di stringhe vuote alla proprietà nome:
PLAIN TEXT
Objective-C:




- (void) setNome: (NSString *)stringaIngresso {


    if( stringaIngresso == @"" ) stringaIngresso = @"senza nome";


    _nome = stringaIngresso;


}






Ulteriore variante
Se desiderate utilizzare le variabili interne con l'underscore davanti (chi rpoviene da Adobe Actionscript potrebbe essere abituato così) non è necessario abbandonare l'uso della direttiva @synthesize. Xcode permette infatti di "fondere" i metodi sopra indicati:
PLAIN TEXT
Objective-C:




@synthesize nome = _nome;


@synthesize cognome = _cognome;






Così facendo potremmo usare internamente il puntatore a _nome, "sintetizzato" - verso l'esterno - come proprietà nome. Inoltre, se è vero che l'uso di @synthesize produce la generazione automatica dei metodi (messaggi) di getter e setter, è vero anche che lo fa solo se non li trova, quindi se desiderate "implementare" un vostro metodo di getter e/o setter potete farlo anche se avete usato la direttiva @synthesize.
Allocazioni di memoria
Negli esempi di sopra ho omesso alcuni dettagli importanti ai fini di una reale implementazione. Prima di tutto non ho illustrato nessun metodo init(), utile ai fini dell'inizializzazione dell'oggetto e dei sui valori di default. Inoltre, manca l'aggiunta di un metodo dealloc():
PLAIN TEXT
Objective-C:




// file MyClass.m


#import "MyClass.h"


 


@implementation MyClass


 


- (id) init { 


    if ( self = [super init] ) { 


        _nome = @"Nome preimpostato"; 


        _cognome = @"Cognome preimpostato"; 


    } 


    return self; 


} 


 


- (void) dealloc { 


    [_nome release]; 


    [_cognome release]; 


    [super dealloc]; 


}


 


- (NSString *) nome {


    return _nome;


}


- (void) setNome: (NSString *)stringaIngresso {


    if( stringaIngresso == @"" ) stringaIngresso = @"senza nome";


    _nome = stringaIngresso;


}


 


- (NSString *) cognome {


    return _cognome;


}


- (void) setCognome: (NSString *)stringaIngresso {


    _cognome = stringaIngresso;


}


 


@end






In futuro vedremo poi i dettagli sulle proprietà readonly, retain, etc...  




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: @synthesize, Apple iPhone, classe, getter, iPhone, Mobile, Object-Oriented, Objective-C, Objective-C, property, Release, retain, setter, Sviluppo


	Post correlati
	
	Aggiungere proprietà ad un MovieClip (3)
	Very short snippet: Apple iPhone file system (0)
	setAnimationDidStopSelector: usi diversi ed avanzati (0)
	Da Actionscript ad Objective-C (1)
	Come eliminare NSLog() dai sorgenti XCode (0)





Browser o Mobile Browser?
Giovambattista Fazioli — Fri, 11 Dec 2009 00:30:28 +0000
Il nostro sito Web ormai non è visualizzato solo da postazioni PC. Con la diffusione del mobile, grazie soprattutto ad Apple iPhone, l'accesso al sito o blog viene sempre più spesso effettuato da dispositivi mobili di vario tipo. Diventa quindi esigenza di molti Web Developer saper intercettare ed identificare i diversi "agenti", cioè gli strumenti con cui un utente visualizza (naviga) le nostre pagine.

Per Wordpress, ad esempio, che rappresenta una delle piattaforme Blog più diffuse, esistono da tempo Plugin che permettono di visualizzare in modo differente il nostro Blog in base al "device" che si utilizza. Questi Plugin non fanno altro che intercettare il tipo di dispositivo usato e re-indirizzare un tema appropriato. Chi possiede un Apple iPhone avrà infatti notato che alcuni Blog vengono visualizzati in modo totalmente differente, proprio grazie al cambio del tema effettuato da questi Plugin.

La procedura, tuttavia, può essere generalizzata e applicata a qualsiasi pagina Web. Sfruttando PHP è possibile identificare l'agente e decidere che tipo di output emettere:
PLAIN TEXT
PHP:







    // fornisce le informazioni sull'agente che ha richiesto


    // questa pagina


    echo $_SERVER['HTTP_USER_AGENT'];


    // l'output sarà tipo:


    // Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; it; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 


?>






Analizzando la stringa contenuta in $_SERVER['HTTP_USER_AGENT'] è possibile identificare l'agente e comportarsi di conseguenza. Se ad esempio avete la necessità di mostrare un contenuto con un layout differente agli utenti Apple iPhone, potete inserire queste righe di codice nella vostra pagina PHP:
PLAIN TEXT
PHP:







if( eregi('iphone', $_SERVER['HTTP_USER_AGENT']) ) {


    // Apple iPhone


} else {


    // Tutti gli altri


}


?>






Le combinazioni sono varie e, senza impazzire più di tanto, consiglio di scaricare questa piccola libreria (che poi non è nemmeno una libreria) scritta da Andy Moore: mobile_device_detect.php.

Il suo uso è davvero semplice e permette di intercettare moltissimi device: Apple iPhone/iPod, Android, Palm, ...

Per utilizzarla basta includere il file mobile_device_detect.php e controllare il rotorno della funzione mobile_device_detect():
PLAIN TEXT
PHP:




// ...


require_once ('mobile_device_detect.php');


$mobile = mobile_device_detect();






La funzione accetta otto (8) parametri (opzionali) in ingresso che ne determinano il comportamento, compreso un re-direct nel caso sia stato trovato il device specificato nei parametri d'ingresso. Sul sito è disponibile anche un comodo "generatore" di funzione che chiarisce il funzionamento.




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: $_SERVER['HTTP_USER_AGENT'], Apple iPhone, browser, Device, Internet, iPhone, iPod, Layout, Mobile, Mobile, PHP, PHP, Plugin, Sviluppo, Tema, user-agent, WordPress, WordPress


	Post correlati
	
	Wordpress: come scrivere un reply to comment usando jQuery (18)
	Un tema Wordpress per tutti (20)
	WP Bannerize 2.4.1 (0)
	Wordpress: scrivere un logout personale (2)
	Wordpress: rimuovere i menu dell’amministrazione (12)





Personalizzare graficamente un Form
Giovambattista Fazioli — Fri, 04 Dec 2009 13:52:34 +0000
Mi è stato chiesto come personalizzare graficamente un form, in particolare un form di ricerca come quello presente su questo blog. La tecnica utilizzata, o meglio che utilizzo io, è ovviamente valida per qualsiasi tipo di modulo form. Quello che cambia è solo la complessità del lavoro da svolgere in funzione della complessità del form stesso.
Le basi
Tramite i fogli di stile è possibile personalizzare completamente il layout di un qualsiasi modulo form. Uno degli ostacoli che si possono incontrare, come spesso accade, è relativo alla compatibilità con i vari browser in commercio e quindi con diversi risultati finali in base al browser utilizzato.

Per questo, spesso, si opta per una soluzione sostanzialmente grafica, cioè si sfruttano delle immagini per ridefinire il layout grafico del form. Le immagini, infatti, sono le uniche entità che, salvo rai casi, sino ad oggi sono visualizzate sempre allo stesso modo su tutti i browser.
Senza immagini
Prima di vedere come alterare il layout di un form con delle immagini, vediamo quello che "sarebbe" possibile fare con i soli CSS. Un modulo form è formato nella maggiornza dei casi da campi INPUT. Tuttavia quello che vedremo è, in linea generale, applicabile a qualsiasi altro campo modulo. Tramite i CSS possiamo ridefinire l'aspetto del nostro campo INPUT agendo sulla sua dimensione, sul bordo, sullo sfondo, sul tipo di carattere, etc...

Ad esempio è possibile migliorare la resa impostando semplicemente:
PLAIN TEXT
CSS:




input {


    border:1px solid #aaa;


    padding:4px;


    width:200px;


    font-size:12px;


}






Mozilla FireFox e Safari permettono anche di regolare in modo semplice la rotondità dei bordi (vedi anche CSS3: qualcuno ha visto Internet Explorer?):
PLAIN TEXT
CSS:




input {


    border:1px solid #aaa;


    padding:4px;


    width:200px;


    font-size:12px;


 


    -moz-border-radius:6px;


    -webkit-border-radius:6px;






In aggiunta possiamo inserire un'immagine come sfondo, per rendere più "accessibile" il significato del campo stesso:
PLAIN TEXT
CSS:




input {


    border:1px solid #aaa;


    padding:4px;


    width:200px;


    font-size:12px;


 


    -moz-border-radius:6px;


    -webkit-border-radius:6px;


 


    background:url(images/icon.png) no-repeat;


    padding-left:20px;






Se icon.png è un'icona di larghezza 16 pixel, tramite il padding permettiamo di posizionarla all'inizio del campo ma fuori dal testo.
Le immagini nel Form
L'ultimo esempio visto porterebbe ad una semplice soluzione nel momento in cui decidiamo di realizzare il layout del nostro campo INPUT completamene in grafica. Infatti in linea teorica basterebbe eliminare il bordo del campo e inserire un'immagine di background direttamente nel campo INPUT:
PLAIN TEXT
CSS:




input {


    border:none;


    padding:4px;


    width:200px;


    font-size:12px;


 


    background:url(images/custominput.png) no-repeat;






Dico in linea teorica perchè se da un lato questa tecnica funziona (vedi FireFox), dall'altro produce strani effetti su altri browser (vedi Microsoft Internet Explorer).

Per sperare l'ostacolo si rende completamente trasparente il campo INPUT e l'immagine la si associa direttamente al tag FORM:
PLAIN TEXT
CSS:




input {


    border:none;


    background:none;


    padding:4px;


    width:200px;


    font-size:12px;


}


form {


    display:block;


    width:200px;


    height:24px;


    background:url(images/custominput.png) no-repeat;


}






Il tutto con una "taggatura" HTML del tipo:
PLAIN TEXT
HTML:







     type="text" name="cerca" />









In base alla grafica scelta e alla complessità del form, bisognerà solo "sovrapporre" in modo corretto, e quindi posizionare, il campo INPUT all'immagine grafica sottostante posta come sfondo del form. Questo è possibile inserendo gli opportuni margini al campo INPUT stesso, per farlo coincidere con il nostro layout: 
PLAIN TEXT
CSS:




input {


    border:none;


    background:none;


    padding:4px;


    width:200px;


    font-size:12px;


 


    margin-top:12px;


    margin-left:24px;


}










	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	





	Tags: -moz-border-radius, -webkit-border-radius, background-image, CSS, CSS, CSS3, form, Internet, Style Sheet, Sviluppo, Tutorials, WebKit


	Post correlati
	
	FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine (1)
	CSS3: qualcuno ha visto Internet Explorer? (5)
	Very short trick: versatilità delle classi CSS (3)
	Very short trick: disabilitare il ridimensionamento di una textarea su Safari (7)
	Very short trick: CSS condizionali e ottimizzazione (1)