Non sono solo i browser dei desktop o portatitli a navigare sui siti da noi realizzati, ormai l’era del mobile – del browser mobile – è diffusa, grazie a device come l’Apple iPhone, iPad, Android, etc… Inoltre, anche per chi sviluppa per Apple iPhone è diventato obbligatorio capire su quale device l’applicazione sta girando.
Sul Web la situazione è simile a quella esposta in Browser o Mobile Browser?, con la variante:
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):
1 2 3 4 5 6 | // 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.
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.
In tutti i browser sviluppati partendo dal motore di rendering WebKit (come apputo Safari o Google Chrome), i campi textarea mostrano, in basso a destra, la caratteristica funzionalità di resizing. Se questa particolarità può risultare davvero utile in certi casi, in altri si trasforma in un elemento fastidioso.
Non è che io me la prendo sempre con Internet Explorer, è solo che ogni dannata cosa positiva dello sviluppo Web (HTML e CSS) sembra non funzionare con il browser – ancora – più diffuso (un giorno qualcuno mi spiegherà il perchè). Un metodo assai comodo per posizionare un elemento al centro della finestra del browser è quello di sfrutture la proprietà auto dello stile margin; ad esempio ecco come posizionare un div al centro dello schermo:
Trovo sempre un certo “malore” quando affronto l’argomento “compatibilità tra i browser”. Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più “antipatico” rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.
A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:
Mozilla FireFox permette di gestire più profili, funzionalità utile a chi, come me, sviluppa siti web e necessita di tutta una serie di estensioni dedicate al debug e all’analisi delle pagine Web. Tramite l’uso dei profili è possibile configurare differenti impostazioni di FireFox:
Firefox salva le informazioni personali come i segnalibri, le password e le preferenze in un gruppo di file chiamato profilo situato in una posizione diversa rispetto ai file di programma di Firefox.
Su Windows Vista (vedi qui per altri sistemi operativi) è possibile accedere alla gestione dei profili dal comando Esegui usando:
1 | firefox -ProfileManager |
Uno dei vantaggi nell’uso dei profili è quello di poter avere un FireFox per navigare, senza quindi tutte le toolbar e le estensioni per il debug e un FireFox per sviluppare, corredato da FireBug e tutti gli altri tool di sviluppo.
Io proprio no…
1 2 3 4 5 6 7 8 9 | p { /* Rounded Corners */ border-radius: 9px; /* CSS 3 */ -o-border-radius: 9px; /* Opera */ -icab-border-radius: 9px; /* iCab */ -khtml-border-radius: 9px; /* Konqueror */ -moz-border-radius: 9px; /* Firefox */ -webkit-border-radius: 9px; /* Safari */ } |
Commento l’articolo Net+Television di Tommaso Tessarolo, da alcuni giudicato «un bel pezzo [...]», da altri «[...] un tentativo di giustificazione [...]», da altri ancora «[...] rassegnazione [...]»! Potrebbe essere tutto questo ma il vero nodo della questione, a mio avviso, è lungi dall’essere stato sviscerato! N3TV, il progetto dove ho avuto la fortuna di partecipare attivamente, è stata una fantastica esperienza, vissuta da tutti i partecipanti con grande e autentico entusiasmo (lo dico perchè ero presente). Non tutti, purtroppo, me compreso, hanno potuto dedicargli il tempo e le risorse necessarie! Non nego – e Tommaso lo sa – che l’evoluzione del progetto è stata quantomai curiosa, mutando la sua forma iniziale in qualcosa che alla fine – secondo me – aveva poco a che fare con il Web, con la cosiddetta Net-Television, insomma! Quantomeno non aveva più nulla a che fare con le premesse iniziali del progetto. Ma ciò è normale! Un progetto innovativo evolve e muta nel corso tempo, a causa degli eventi imprevisti, e non è quindi motivo di stupore se le premesse iniziali cambiano.
Ultimi Commenti
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
Marco: Scusa lo spam.. ho notato che c’è un errore.. ecco la correzione [cc_objc] /** PrimaClasse.h **/ #import...
Marco: dimenticato.. in [cci]OptionViewController[/cci ] il [cci]@syntetize[/cci] del delegato l’ho messo
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...