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.
Articoli con Tag ‘Style Sheet’
Personalizzare graficamente un Form
Very short trick: CSS condizionali e ottimizzazione
L’uso delle condizioni all’interno del browser viene spesso utilizzato per decidere quale foglio di stile caricare in base al tipo di browser. Ad esempio possiamo utilizzare questo codice per caricare un particolare foglio di stile quando il browser è Internet Explorer 6:
Very short trick: versatilità delle classi CSS
I più esperti lo sapranno già, tuttavia mi viene spesso chiesto che differenza c’è tra class e id nei fogli di stile CSS. Una panoramica su alcune differenze e avvertenze è possibile trovarla in Classi e ID nei CSS, tuttavia una caratteristica utile, che distingue class da id, è la possibilità di usare classi multiple.
CSS3: qualcuno ha visto Internet Explorer?
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 */ } |
Safari, eliminare il blue border sui campi input
Safari, il browser Apple disponibile anche per Windows, produce un bordo blu (blue border) quando si clicca all’interno di un campo input. Se in alcuni casi può risultare piacevole, in altri diventa davvero fastidioso! Per eliminarlo basta inserire nel nostro foglio di stile:
1 2 | /* ____________________________ remove blue border */ input { outline: 0 none } |
O, in alternativa, direttamente come attributo nel tag input:
1 | <input style="outline: 0 none" ... /> |
Accessibilità e Usabilità: unobtrusive Javascript
Permettere agli utenti di interagire con una pagina Web ha prodotto negli ultimi anni un notevole aumento nell’uso di script lato client: codice Javascript in grado di rispondere e manipolare in tempo reale tutta una serie di informazioni. Il Web2.0 è la massima espressione di questa capacità di interazione, dove l’utente finale – il navigatore -partecipa attivamente alla costruzione e all’evoluzione del sito Web, interagendo con esso e contribuendo personalmente. Si parla quindi di User-Generated Content (o UGC – contenuto generato dagli utenti) che vede il “navigatore” sicuramente meno passivo!
Per realizzare questa interazione, per permettere quindi all’utente finale di aggiungere il suo contributo, sono state sviluppate una serie di tecniche che hanno modificato l’aspetto e il comportamento delle pagine Web (statiche sino ad oggi, mentre adesso simili alle tradizionali applicazioni dei Desktop) negli ultimi anni. Modificare il contenuto di una pagina, inviare dei file, dare il proprio voto ad un video o a un documento, registrarsi o modificare i propri dati, sono solo alcune delle operazioni richeste in tanti servizi (2.0 beta) presenti sul Web.
Net Software
È successo alla TV di trasformarsi in Net TV, come già era successo alla Radio di diventare Net Radio, per non parlare della musica! Ora, come anticipato in altri Post, è ufficiale anche per il Software di trasformarsi a breve in Net Software!
Adobe, che come sappiamo ha da poco acquisito Macromedia, ufficializza le Web Application – del Web 2.0 – in vere e proprie RIA (Rich Internet Applications) con l’annuncio di voler portare sul Web il noto software di fotoritocco Photoshop. È recente l’accordo tra Adobe e Photobucket per rendere disponibile online una tecnologia per l’editing e il remix video. Grazie alla nuova tecnologia sviluppata per Flash 9, con ActionScript 3.0, Adobe punta in alto, anticipando che entro sei mesi sarà disponibile online una versione di Photoshop basata, appunto, su tecnologia Flash.
Effettivamente le nuove potenzialità di ActionScript 3.0 (che coinvolgono progetti come Flex e Apollo – vedi anche Web2.0: Adobe ci prova con Apollo e Ajax: Rich Internet Application) lo rendono il candidato perfetto per l’implementazione di vere RIA sul Web. Ajax, dal canto suo, si vede spodestato dal suo trono in questo nuovo scenario. Nonostante gli innumerevole Framework Ajax, alcuni di ottimo livello, prodotti nel corso di questi ultimi anni, Flash garantisce un’ambiente più evoluto e semplice da manipolare. Inoltre parliamo di uno dei Plugin più diffuso al mondo: Flash ha infatti alle spalle qualche anno in più rispetto ad Ajax e derivati.
Inoltre risulta ovvio che Adobe scelga Flash, essendo oramai lui il produttore. Tuttavia ci sono da considerate questioni tecniche che possono – ad oggi – essere risolte in modo armonico unicamente ricorrendo a tecnologie come quella Flash. Dando uno sguardo al nuovo ActionScript 3.0 ci si rendo subito conto delle enormi possibilità di sviluppo che offre questa nuova piattaforma. Lo standard ECMA del linguaggio e i nuovi oggetti messi a disposizione dal Framework, permettono di arrivare ad un livello di dettaglio impensabile con le precedenti versioni di Flash: una su tutte, ad esempio, la possibilità di accedere ai dati Bitmap di un’immagine caricata da disco!
L’attacco da parte di Adobe sembra svolgerersi quindi su due fronti distinti che hanno in comune la tecnologia Flash (che ricordiamo ha da sempre la capacità di interagire attivamente con il browser e quindi con Javascript lato Client e Scripting lato Server).
Il primo attacco avviene dall’esterno, sul versante browser, dove la tecnologia Apollo si propone di fatto come alternativa ai Kernel usuali delle diverse piattoforme oggi disponibili (Windows, Mac OS, Linux, ecc…); usare Adobe Apollo, quindi, al posto del browser per ottenere prestazioni e applicazioni (vere e proprie RIA) impensabili, aggirando così le incompatibilità tra Internet Explorer, FireFox e compagnia. Inoltre Apollo garantisce una piattaforma unica di sviluppo, al pari di Javascript-Ajax, ma senza i problemi di compatibilità. Quest’ultimo punto è uno scacco notevole a tecnologie come Ajax che ancora oggi soffrono enormemente delle questioni legate alla compatibilità tra browser; non dimentichiamo, inoltre, tutta la questione legata alla resa (rendering) grafica dei CSS!
L’altro attacco avviene direttamente dall’interno, colpendo i Framework Ajax con la carta Flash. L’elemento vincente in questa strategia risiede nell’uso di Flash, della tecnologia Flash, che trova applicazione sia in Flex, sia in Apollo, sia in versione standalone come già siamo abituati a vedere (semplici file SWF per intenderci)! Non c’è dubbio che tale scenario è estremamente invitante per gli sviluppatori, Web e non. Ciò che realizzo in Flash diventa immediatamente riusabile in vari modi, senza costringermi a modificare una sola riga di codice e, inoltre, senza preoccuparmi della compatibilità!
Tutto questo, a mio avviso, è un’importante passo avanti, una svolta di proporzioni notevoli che coinvolge anche il mondo dei giochi e del Marketing. Ne parleremo ancora prossimamente, statene certi!
Nascondimi
Una caratteristica dei fogli di stili (i file .css) è quella di poter essere specificati a seconda del media di output. Gli Style Sheet permettono infatti di specificare la stessa classe, lo stesso ID lo stesso TAG, ecc… per media diversi. Ad esempio posso scrivere un file .css con la seguente sintassi:
1 2 3 4 5 6 7 | @media screen { div#myBox {display:none} } @media print { div#myBox {display:block} } |
Quello che ne deriva, alla fine, è che il contenuto del DIVcon id myBoxnon sarà visibile sul browser, sullo schermo, ma quando provo a stampare la pagina troverò un contenuto diverso da quello che mi aspettavo.
I motori di ricerca, spider, crawler o aggregatori, normalmente (per ora) non risolvono i file css. A loro interessa il contenuto non la formattazione visiva. Tuttavia questa tecnica potrebbe avere risvolti interessanti se non inquietanti. Proprio per le caratteristiche dei sistemi di indicizzazione una situazione come quella mostrata qui sotto sarebbe quantomeno curiosa:
1 2 3 4 5 6 7 |
Correlato con un file .css di questo tipo:
1 2 3 4 5 6 7 8 9 | @media screen { div#visibile_a_video {display:block} div#visibile_in_stampa {display:none} } @media print { div#visibile_a_video {display:none} div#visibile_in_stampa {display:block} } |
Google, ad esempio, indicizzerebbe entrambi i contenuti del nostro HTML, anche se a video saremmo in grado di vederne solo uno. Se stampiamo la pagina troveremmo con sorpresa un nuovo contenuto. Il trucco, tuttavia, sarebbe svelato eliminando l’applicazione degli stili nei browser che lo supportano. Normalmente nessuno esegue un’operazione di questo tipo quando naviga su Internet. Tale indagine scaturirebbe solo dopo aver trovato un’incongruenza tra ciò che è visibile a video e ciò che si è stampato!
Ad oggi non mi risultano casi eclatanti di questo tipo di manipolazioni tramite CSS. Un tempo si cercava di aumentare la visibilità su Internet inserendo una serie di testi, parole, dello stesso colore dello sfondo della pagina Web, così da rendere tale artifizio oscuro agli occhi dei navigatori. Con il tempo i motori di indicizzazione si sono cautelati contro queste “frodi”. Sarà forse il momento di anticipare qualche burlone prima di creare un precedente?
Attualmente gli Style Sheet consentono di specificare tutta una serie di media type di output. Per una lista completa vedi il W3C.
Classi e ID nei CSS
Ecco alcuni brevi consigli su come usare class e id nei fogli di stile. Tenete subito in considerazione che l’uso di tecniche Javascript avanzate, come lo stesso uso di motori Ajax, può entrare in conflitto con i consigli esposti qui! E vedremo alla fine il perchè.
Le meraviglie del CSS2.0+
A causa forse delle incompatibilità stilistiche e di output – ancora presenti – tra i vari browser, non tutti conoscono le innumerevoli potenzialità dei fogli di stile. Vogliamo mostrare, quindi, alcune caratteristiche della sintassi CSS sconosciute ai più e per ricordarci quanto poco – spesso – sfruttiamo a pieno gli strumenti che abbiamo a disposizione.
Nota: tutti gli esempio sono stati provati su Firefox 1.5.0.5
Selezione per attributi
1 2 3 4 5 |
1 2 3 | div#myInput input[type=submit] {color:#f00} div#myInput input[type=button] {color:#0f0} div#myInput input[value=Annulla] {color:#00f} |
Questa caratteristica, spesso indicata cone CSS2 avanzata, permette cose strabiglianti, se ci riflettiamo un attimo. Il maggior vantaggio lo si ottinene lato HTML, dove non sono necessarie classi o id per distinguere i TAG nel CSS. Sono proprio gli attributi – comunque presenti – nel TAG ad indicare quale stile associare. Inoltre qualsiasi attributo del TAG può essere preso come selettore: alt, title, accesskey, ecc…
Selezione per profondità
Questo tipo di selezione è a dir poco spettacolare, se considerate che può essere sommata a quella precedente. Essa permette di definire la gerarchia degli elementi. Guardando l’esempio qui sotto ci si rendo subito conto della straordinaria portata di questo tipo di selezione, che mantiene il codice HTML pulito e senza indicatori superflui.
1 2 3 4 5 6 7 |
1 2 3 | div#myBox > p {color:#f00} div#myBox > p + p {color:#0f0} div#myBox > p:last-child {color:#00f} |
Addirittura, giusto per concludere questo sorvolo, oltre a last-child esiste first-child e – fantastico – first-letter! Provate voi.
Abbiamo ovviamente appena sfiorato l’argomento, alquanto vasto a dire il vero, che vede i CSS come strumento evoluto per la definizione del layput di pagine. Esistono altri selettori e comportamenti e grandi novità per le specifiche dei file CSS di futura generazione.
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...