Riconoscere il browser dell’utente che naviga le nostre pagine è davvere molto utile. Un buon browser detect può trarci d’impaccio e fornire una degradazione accettabile delle prestazioni e delle funzionalità delle nostre pagine.

jQuery fornisce diverse soluzioni per soddisfare questa necessità, di una ne avevamo già parlato, tuttavia ultimamente mi sono imbattuto in un plugin davvero semplice e comodo. Con BrowserDetect è sufficiente richiamare il plugin per farlo funzionare: lo script aggiunge al body una classe (generalmente due, una più generico e l’altra specifica per la versione) che sta ad indicare il browser che si sta utilizzando.

Qui di seguito la lista delle classi aggiunte dinamicamente:

.browserIE
.browserIE6
.browserIE7
.browserIE8
.browserChrome
.browserChrome1
.browserSafari
.browserSafari1
.browserSafari2
.browserSafari3
.browserMozilla
.browserFirefox
.browserFirefox1
.browserFirefox2
.browserFirefox3
.browserOpera

Sovrascrivere uno stile per un determinato browser diventa davvero molto semplice non vi pare?

Segnalo questa (per ora) piccola guida su jQuery in italiano che può essere utile per chi non ha una grande dimestichezza con la lingua anglosassone. Attualmente c’è solamente un introduzione e la prima lezione sui selettori ma immagino che “fioriranno” a breve anche le altre parti sicuramente più interessanti

Alla faccia della crisi, a quanto pare in tre giorni si sono raggiunte le medesime cifre di vendita della precedente generazione al debutto.

Passando per attendibili queste cifre la cosa sconcerta non poco… non per l’ottimo prodotto (dal mio punto di vista il 3gs è decisamente un ottimo cellulare) ma per il prezzo esorbitante che, a quanto pare, un milione di persone hanno giudicato accettabile.

Se questa è la risposta del pubbblico allora gli operatori e Apple hanno fatto bene ad alzare i prezzi… mha

Questo lunedì al WWD09 Key note 09 di Apple è stato presentato il nuovo iPhone: un processore più potente, fotocamera migliore e nuove feature ma aspetto immutato. Gli utenti vecchi e nuovi DEL cellulare di casa Apple navigheranno internet sostanzialmente nello stesso modo (in realtà il 3gs è sensibilmente più veloce ma per il resto…).

L’uscita dell’iPhone 3gs mi fa pensare che, forse, stiamo raggiungendo qualcosa di simile ad uno standard per quanto riguarda la fruizione mobile. Considerando un pò le cifre viene fuori che, ad esempio, Safari risulta saldamente in testa fra i browser mobili con oltre il 77% seguito dall’ottimo Opera mini e dal pessimo Explorer… Più in generale l’iphone sarebbe il 4° sistema più utilizzato per accedere ad internet.

L’aspetto interessante di tutto questo, a mi avviso, risiede sul fatto che ci troviamo ad avere a che fare con un dispositivo mobile “uniforme” nelle sue varie incarnazioni (siamo alla terza generazione), sempre più diffuso e fortemente orientato al web.

Tralasciando gli aspetti tecnici c’è da dire che, l’iPhone è uno dei pochi dispositivi mobili che permette una buona esperienza utente relativa alla navigazione web. Rispetto alla concorrenza offre al contempo un ottimo browser preinstallato (non sopravvalutiamo l’utenza media) un ampio display ed un interfaccia tattile pensata (e non adattata) per le dita. Ad oggi credo abbia senso sviluppare una versione del proprio sito “ottimizzata” per questa piattaforma.

Per chi volesse muovere i primi passi su questo argomento consiglio:

• un framework css per pensato per iphone
• un approfondimento per la progettazione di fogli stile per dispositivi mobili
• un framework js per iphone
• scrivere pagine web per iPhone
• una gallery di siti sviluppati per iphone
• emulatore web-based di Safari su iPhone

Qui di seguito vi segnalo 4 corsi di formazione continua superiore tenuti presso l’istituto San Marco di Mestre (qui come raggiungerlo) finanziabili tramite voucher:

• Le funzioni creative di Adobe Photoshop cs studio di differenti tipologie di effetti creativi, sviluppo di interfacce grafiche per il web, principi del fotoritocco ecc.
• Web publishing con html-xhtml-css - II edizione:utilizzo di dreamweaver (dalle basi all’utilizzo avanzato), studio delle basi dell’xhtml e dei fogli di stile attraverso esempi e progetti pratici. Esercizi e Implementazioni pratiche di Spry e jQuery. Integrazione di elementi flash e filmati nelle pagina html.
  
• Adobe Flash studio dell’interfaccia, delle funzionalità base ed avanzate. Creazione di animazioni ed utilizzo dell’actionscript 2.
• Adobe Premiere utilizzo pratico di Adobe Premiere attraverso le fasi di acquisizione e digitalizzazione di materiale video proveniente da qualsiasi fonte, per la generazione di videoclip digitali che possono essere modificate, tagliate o mixate consentendo rapidamente l’inserimento di titoli, transizioni, musiche ed effetti speciali video e sonori.

Se volete inforazioni aggiuntive o iscrivervi

Personalmente credo che il web, in questi anni sarebbe stato diverso se internet explorer 6 fosse stato privo dei suoi innumerevoli bachi e limitazioni.

Detto questo, la necessità, e il dovere, di fornire un esperienza di navigazione degna di questo nome anche a quella che si spera divenga una minoranza in estinzione, permane.

Vi propongo qui di seguito una breve lista di quelli che a mio avviso, rappresentano i peggiori bachi di ie6. Ovviamente la lista dovrebbe essere molto più lunga ma eliminando questi normalmente mi cavo di impaccio, spero possano esservi utili:

• float: errata gestione dell’overflow [IE6]
• difformità negli stili di default [IE6-7]
• float: doppio margine per l’elemento flottato [IE6]
• Peekaboo bug [IE6]
• Baco Float annidati - Holly Hack [IE6]
• baco nel posizionamento assoluto [IE6]
• problema trasparenze delle PNG per [IE6]
• Baco interlinea elemento lista [IE6]

• Crea un Photo Admin Site usando PHP e jQuery
• Come validare i Forms usando sia PHP che jQuery
• PHP / jQuery Image Replacement

Sukiland

Dantestyle

Decisamente più elegante, quasi “bucolico”, questo portfolio è decisamente più nelle mie corde. Strutturazione in orizzontale, a schede. Un portfolio essenziale che presenta lavori di pregevole fattura.

Booreiland

Questo è uno dei pochi casi in cui mi trovo ad avere a che fare con un sito in flash (in questo caso un portfolio) che coniuga uno stile interessante ed un interfaccia intuitiva. Il menu ad albero è piacevole, originale e al contempo essenziale come, nel complesso, tutta la struttura del portfolio. I lavori riportati sono di ottima fattura.

Jameslaicreative

Portfolio “grundge” con un sapiente uso della tipografia. Indubbiamente di pregefole fattura come i lavori che vengono riportati.

Designchapel.com

Questo è uno dei casi in cui i lavori parlano da soli. Lo stile \”blog\” qui è più che apprezzato, l’incredibile qualità dei lavori basta e avanza…

Neoganda

Anche qui una grande qualità dei lavori presentata adottando una buona combinazione di elementi in flash e filmati (un collage dei lavori montati in rapida successione).

Seb

Un portfolio multicolonna molto denso di materiale. Semplice, essenziale e ordinato; qui l’obiettivo non è stupire ma elencare un gran numero di risorse.

205.234.171.197

Completiamo la rassegna con il solito portfolio in flash che adotta la metafora “fantasiosa” della scrivania. Belle animazioni ma decisamente “troppo”….

Carousel Slideshow

Polaroid Gallery v.1.01

PolaroidGallery è un progetto opensource. La gallery carica le immaigni impostate in un file xml oppure da un account flickr via RSS. Delle voto viene caricata ovviamente l\’immagine ed il titolo ad essa associata.

Flash Photo Gallery

Flash Photo Gallery è una galleria immagini semplice ed essenziale. Customizzabile via XML, semplicissima da implementare ed estremamente leggera (solo 11kb).

Imagevuex

Questa gallery è fra le più complete. Utile per gestire collezioni di immagini vaste ed eterogenee.
Permette la separazione per alcum e categorie di album in multi-livello. Sono disponibilità decine di features e templatre per la visualizzazione delle immagini. Fra le decine di funzione anche un player musicale multi traccia.

Picsengine

Picsengine è una photogallery standalone con funzionalità di backend e client ftp integrato.

flash gallery

Gallery fra le più semplici ed automatizzate. Data una cartella popola automaticamente la gallery creando automaticamente le necessarie miniature.
Totalmente configurabile e dimensionabile nelle sue parti costituienti.

NicEdit si installa con due righe di codice, i file necessari al suo funzionamento sono due: nicEdit.js e nicEditorIcons.gif. Dentro il file js è inclusa la configurazione dell’editor.

In base alle vostre esigenze potete configurare NicEdit prima di scaricarlo. Infatti dalla pagina download del sito potete decidere i moduli da includere.

Vi segnalo questo utile post che riporta 10 snippet PHP particolarmente utili. Qui di seguito la lista degli snippet riportati nel post:

• Validazione di un indirizzo di posta elettronica
  
• generatore random di password
• stampa dell’indirizzo IP
  
• trasformazione XSL
  
• Forzare il download del file modificando il mime type
  
• Effettuare l’encoding di stringhe per prevenire codice malevolo
• Inviare una email
• Effettuare l’upload di un file
• Stampare i file contenuti in una directory
  

Le tecniche illustrate sono:

• Bordi arrotondati per box
• Uso delle Immagini per i bordi
• Backgrounds multipli
• Ombreggiatura per testo e box
• Gestione delle trasparenze e dell’opacità

L’autore propone per ognuna di queste proprietàil corrispondente plugin. L’articolo è ottimo e pieno di esempi; buona lettura

• la nuova interfaccia: forse la “novità più appariscente” presenta una disposizione dei pannelli più flessibile e funzionale. Fata per sfruttare al meglio lo spazio e al contempo facilitare le abitudini degli utenti più smaliziati. Benchè l’estetica sia cambiata molto e in meglio le grosse variazioni funzionali sono tre:
  • il tasto di “gestione aree di lavoro” che permette di passare istantaneamente ad una differente disposizione dei pannelli. Oltre alle disposizioni predefinite è possibile sceglierne di customizzate. In questo modo è possibile massimizzare la produttività in base al tipo di attività che si sta svolgendo. Anche nella precedente release era possibile personalizzare le aree di lavoro, ma per farlo era necessario entrare nelle preferenze.
  • la nuova finestra di ispezione proprietà: decisamente un segno di buona volontà da parte di adobe. Ora le proprietà degli elementi html sono distinte. Con il pannello html si effettuano cambiamenti al codice html mentre con il pannello css si creano nuove regole o si modificano le regole già esistenti. Nella precedente versione il pannello era unico e l’effetto di ogni proprietà “non era chiaro”.
  • la live view: questa nuova funzionalità non fa che andare in contro ad un abitudine già instaurata in ogni webdesigner. Ovvero: diffidare della vista progettazione ma testare il layout esclusivamente su browser. In pratica la live view sostituisce il pannello progettazione con un anteprima basata su Webkit, il medesimo motore di rendering di Chrome e Safari. Selezionando parti della pagina di riflesso vengono evidenziate parti del codice. Inoltre il liveview è accompagnato dal live code che permette di vedere il codice generato da javascript e script lato server (in questo caso è necessario configurare un server di prova). Anche in questo caso Adobe ha dato prova lungimiranza considerando quanto sono diffusi strumenti come firebug, webdeveloper ecc.
• Suggerimenti codice potenziati: i suggerimenti codice di Dreamweaver sono sempre stati molto utili. Ora diventano “intelligenti” e rendono disponibili anche la sintassi js e gli oggetti avanzati disponibili nei vari framework. Se ad esempio collegate jQuery alla pagina, oggetti e funzioni del framework divengono disponibili.
• File correlati sempre disponibili: personalmente ho apprezzato molto questa nuova impostazione. In pratica Dreamweaver riporta in un apposita barra tutti i file collegati al documento aperto, in questo modo è possibile avere sempre sottomano tutti i file su cui si sta lavorando (file css, js ecc.).
  
• Navigazione codice: premendo il tasto alt mentre si seleziona un elemento nell’area progettazione apre una finestra che vi indica sinteticamente i selettori css applicati all’elemento. cliccando su uno di questi elementi si aprirà il documento css nel punto che contiene la regola.
• Oggetti avanzati di Photoshop: questa novità è stata molto pubblicizzata; in effetti è piuttosto interessante! In pratica è possibile inserire un immagine in formato PSD in una pagina html. Dreamweaver si occuperà di convertire il documento nel formato grafico desiderato (in pratica è stato integrato il pannello “salva per il web” di Photoshop in Dreaweaver). Inoltre se aggiornate il file psd anche il documento inserito nella pagina web si aggiornerà mantenendo di fatto la sincronizzazione. L’unico limite che ho riscontrato sta nel fatto che se provate ad usare un file psd per definire un immagine di background via css questa sincronizzazione si perde. La seconda novità, che io reputo di gran lunga più utile, è la possibilità di copiare e incollare porzioni di immagine da Photoshop a Dreamweaver. Questo vi permette di montare al volo le porzioni grafiche desiderate in modo molto immediato.
  

È possibile che un design più funzionale ma meno estetico spinga l’utente a metterne in dubbio l’usabilità. Tale percezione condiziona le interazioni successive e può rivelarsi resistente al cambiamento.

L’estetica gioca un ruolo importante nel determinare le modalità di fruizione del design. Il design estetico è più efficace nel suscitare un’impressione positiva rispetto a quello non estetico e induce gli utenti a un maggiore grado di tolleranza nei confronti dei problemi legati all’uso.

Le relazioni positive producono un’interazione che stimola il pensiero creativo e la capacità di problem solving; le relazioni negative producono un tipo di interazione che ostacola la riflessione e inibisce la creatività.

Il design estetico è da preferire in qualunque circostanza, perché è percepito come più semplice da utilizzare, viene accettato con maggiore facilità, è usato più a lungo e promuove il pensiero creativo e la capacità di risoluzione dei problemi. Il design estetico favorisce anche una relazione positiva con gli utenti, i quali mostrano una tolleranza maggiore nei confronti dei problemi connessi all’uso.

Sviluppare un nuovo layout è sempre un attività impegantiva. Spesso capita di fissare il foglio bianco (e con foglio intendo sia un il classico foglio di carta bianca che un nuovo progetto html piuttosto che il programma di grafica preferito come Photoshop, Illustrator e compagnia bella) per ore abbozzando che non raggiungono mai lo status di bozze.

Qui di seguito 5 conigli che dovrebbero aiutarvi a superare il “blocco del webdesigner” :

• mettetevi in gabbia e buttate via la chiave: è bello essere liberi e creativi ma spesso troppa libertà ci fa perdere di vista i riferimenti necessari allo sviluppo di un buon design. Create una griglia di impaginazione che suddivida lo spazio di lavoro in aree ben distinte.
  960 grid system oltre ad essere un buon framework css fornisce diverse griglie di partenza per creare layout grafici in fireworks, e photoshop. La griglia vi fornirà la struttura base e le giuste proporzioni; in molti casi questo è sufficiente per sbloccare la creatività…
• ispirarsi non equivale a copiare: l’ispirazione va cercata; quando un design è riuscito racchiude in se una propria coerenza rispetto ad un tema o concetto. Capire il “mood” emanato da un buon layout può sbloccare l’ispirazione. Oltre alle migliaia di gallerie sparse per la rete sono molto utili le raccolte e i “best of”. Forse 2 delle migliori raccolte “best of 2008” sono:
  • Top 100 Web Designs in 2008
  • 100 Websites With Outstanding Artistic Design
• un immagine vale più di mille parole: del buon materiale fotografico, illustrazioni grafiche e vettoriali di qualità spesso possono rappresentare il cardine rispetto al quale costruire un layout di forte impatto. Flickr mette a disposizione una ricerca avanzata estremamente efficiente che vi permette di ricercare materiale fornito sotto licenza creative commons. Tuttavia spesso il materiale è inutile se non pensato appositamente per essere utilizzato nel design. Per pochi euro è possibile acquistare materiale fotografico ed illustrazioni di qualità; le migliori risorse in questo senso sono sicuramente Istockphoto e fotolia.
• essenziale è bello: costruire un layout essenziale è più difficile che crearne uno saturo di elementi. Spesso layout troppo densi tradiscono la mancanza di idee. Come insegna il principio del rasoio di Occam: prendete il vostro layout e provate a eliminare tutto quello che non è essenziale; molte volte un layout che esce da questa cura dimagrante migliora nettamente trovando nuovi equilibri.
• leggete una guida al sul webdesing o un articoli specializzati. Spesso sono materiale illuminante che getta nuova luce sul modo di considerare la materia. Ottimi libri tradotti anche in italiano sono:
  • Oltre i CSS - La sottile arte del Web Design di Andy Clarke
  • Il sempreverde Lo Zen e il design con i CSS di E. Holzschlag e Dave Shea
  • L’ottimo articolo sul tred 2.o - web 2.0 design style guide
  • 9 essential principles for good web design