Sì, lo so che il mondo ha problemi più urgenti a cui pensare :) Fatto sta che, come sottolinea anche Sophia Lucero, il terzo sito più popolare al mondo ha preferito tornare indietro rispetto all'uso degli angoli arrotondati, preferendo la consistenza di un design che si vuole in primo luogo minimale, concepito per essere pratico e utile all'adesione ad una moda. Così viene infatti motivata la scelta sul blog di Facebook: We like to think of Facebook's design as very minimal and utilitarian; extra ornamentation like rounded corners does not align well with those values. Se si aggiunge, sempre a detta degli uomini di Facebook, la difficoltà  derivante dal mancato supporto su IE della proprietà  CSS border-radius, il gioco è fatto, si passa da così a così. Chissà  se altri seguiranno...

Continua a leggere Facebook elimina gli angoli arrotondati

Categoria: Web Design

Ho raccolto negli ultimi tempi link a diversi plugin per JQuery che vorrei presentarvi. Premesso che ci sono davvero tantissimi plugin disponibili anche sul sito ufficiale, questa è una piccola selezione di quelli che hanno catturato la mia attenzione per la loro originalità  e utilità . Il primo è Humanized Messages (qui l'esempio), un'alternativa alle finestre modali o agli obsoleti messaggi di alert. Si tratta di messaggi semitrasparenti che spariscono quando l'utente compie un'azione (per esempio digitare sulla tastiera o muovere il mouse). Rimanendo in tema di finestre modali, Impromptu è un plugin per ottenerle: al suo interno è possibile anche disporre form e messaggi di conferma. Altro plugin interessante è il Lazy loader: ideale per migliorare usabilità  e navigabilità  degli utenti con connessioni analogiche, oltre che ridurre il carico sul server, questo plugin ritarda il caricamento delle immagini non visibili su pagine lunghe, immagini che vengono poi caricate quando effettivamente l'utente scrolla la pagina. (more...)

Continua a leggere Dieci plugin per JQuery

Categoria: Scripting

àˆ da un po' che non si sente parlare di soluzioni per gli angoli arrotondati senza immagini con CSS e Javascript. Steffen Rusitschka, dopo aver presentato circa un anno fa Ruzee.Borders citata a suo tempo qui sul blog, ha recentemente rilasciato ShadedBorder. Si tratta uno script per creare angoli e bordi arrotondati con effetto glow o drop shadow con una precisione grafica simile a Photoshop, senza l'ausilio di immagini ma solo con Javascript e CSS: ecco l'esempio.Non ho ancora avuto tempo di dare uno sguardo allo script, che è leggero in quanto a peso (7.7 Kb non compresso, e senza la necessità  di librerie esterne) ma a parer mio piuttosto pesante per cià che riguarda il rendering e l'albero DOM delle pagine in cui è applicato. Discreta la compatibilità  cross-browser e davvero eccellenti graficamente i risultati.

Continua a leggere ShadedBorder: bordi e dropshadow senza immagini

Categoria: Scripting

Non so se vi sia mai capitato, ma ogni tanto, visitando i siti che leggo abitualmente o scoprendone di nuovi, noto alcuni dettagli grafici che pian piano popolano le pagine, fino a diventare vere e proprie tendenze.Le ultime due che ho notato sono gli alert message e i fading corners, di cui riporto lo screenshot qui sotto: Segnalo così due tutorial semplici per realizzare questi due effetti. Il primo per gli alert message, che possono racchiudere anche informazioni e non solo messaggi di errore o alert, è Create a valid CSS alert message. Per i fading corners, ecco CSS for fading corners: mi raccomando di usare solo la prima soluzione presentata se vorrete implementarli, dato che non richiede markup aggiuntivo.

Continua a leggere Alert message e fading corners

Categoria: CSS

Trovo ormai decisamente comiche certe cose. E chiedo pubblicamente scusa se in qualcuno dei miei interventi ho in qualche modo avallato o dato l'impressione di sostenere associazioni di idee del tipo 'Web 2.0 = Ajax' o 'Web 2.0 = siti con certe caratteristiche grafiche'.Parlavo di cose comiche. Prendete questo RoundedCornr, e iniziate a notare l'immancabile scritta 'Beta' accanto al logo, please. àˆ un'applicazione che consente di generare online e tramite una serie di form piccole PNG o GIF di angoli arrotondati (qualitativamente non eccelse, direi). Ecco come viene presentato il servizio sulla home page (il grassetto è mio): Welcome to RoundedCornr. Generate HTML/CSS code and images for rounded corners.Instantly make your web site disruptive, innovative, revolutionary, and... Web 2.0!! Ogni commento è superfluo. E non c'è nemmeno da infierire su chi ha coniato questo slogan. àˆ naturale guardarsi intorno, fiutare quello che ci gira intorno e tentare di farsi notare sfruttando i tormentoni del momento. Mi chiedo solo cosa accadrà  quando la gente si stancherà  di angoli arrotondati, loghi con il riflesso & Co. Sarà  il segno del passaggio al Web 3.0? O di una regressione colta sul modello dei Preraffaelliti inglesi?Ah, giusto per non farci mancare niente: qualcuno ha scoperto l'esistenza di una sorta di generatore di angoli arrotondati di Google. Se volete giocarci un po', il post sul Zach's Journal spiega tutto.

Continua a leggere Il Web 2.0 é un angolo arrotondato

Categoria: Web Design

Credo sia in realtà  una segnalazione già  passata qui sul blog tempo fa, ma si tratta di una risorsa in continuo aggiornamento il CSS rounded corners roundup. Presenta moltissime tecniche CSS e/o Javascript per ottenere i tanto cari angoli arrotondati. Sono categorizzate in base criteri come il numero di immagini, la necessità  o meno di usare Javascript e la possibilità  di usare la tecnica anche su elementi a larghezza variabile.Già  che ci sono mi aggancio all'argomento con una segnalazione di casa: la scorsa settimana è stato pubblicato su HTML.it il mini-tutorial sugli angoli arrotondati modulari: una soluzione semplice e piuttosto leggera sia per l'HTML sia per il CSS e che richiede di fatto un'unica immagine. Se c'è la necessità  di avere elementi a larghezza fissa con angoli arrotondati, magari affiancati e della stessa altezza, può valere la pena darci una lettura.

Continua a leggere Tutti gli angoli arrotondati del mondo (o quasi)

Categoria: CSS

Appuntamento con i bookmark dedicato a strumenti, soluzioni pratiche e tutorial Javascript. Robert Nyman ha rilasciato di recente tre script: l'aggiornamento di JAS - Javascript slides, uno slideshow per immagini facilmente configurabile, FaT - Focus at This, per avere un effetto focus molto marcato e GLT - Good Looking Tooltips per tooltip con Javascript e CSS.A proposito di aggiornamenti, davvero notevole Transparent custom corners and borders 2 di Roger Johansson per ottenere angoli arrotondati grafici senza markup aggiuntivo ma con i CSS e Javascript.Procediamo con due idee piuttosto innovative che forse potrebbero contribuire a un miglioramento della user experience (li ho trovati su Humanized). In Monolog Boxes and Transparent Messages viene presentata un'alternativa al classico messaggio di alert per segnalare all'utente, ad esempio, un campo di form mancante o errato: trovo che sia però poco persistente. In No more more "pages" si trova un'idea per eliminare la navigazione di paginazione: nel loro Reader, basta arrivare a fondo pagina e, grazie ad AJAX, vengono aggiunte altre entry. Davvero notevole e innovativa come idea, ma vedo almeno due potenziali problemi: potrebbero risultare pagine molto lunghe (quindi difficili da consultare) e l'assenza del caching dei dati.Concludo con due tutorial su Digital Web Magazine davvero ben fatti: Scope in Javascript e Objectifying Javascript. Buona lettura!

Continua a leggere Bookmark Javascript

Categoria: Scripting

Gli angoli arrotondati con i CSS sono da sempre uno degli argomenti più seguiti in tema di web design. Segnalo così due articoli piuttosto recenti: il primo è Simple rounded corners with CSS boxes e il secondo è More rounded corners with CSS. Niente di particolarmente innovativo, ma due articoli ben scritti con tecniche semplici e robuste allo stesso tempo. Ho però una piccola riflessione da fare su More rounded corners with CSS, dato che mi sono soffermato su un passaggio dell'articolo: A lot of other approaches (do a search for "css rounded corners") use CSS hacks, inline images or even Javascript to accomplish the desired behaviour. Some have programmatically tried to generate corners via one-pixel div elements using Javascript; while perhaps a minor technical feat, they are ultimately kludgy, slow and perhaps unreliable. Credo che chi conosca i Nifty Corners abbia intuito il riferimento, neanche troppo velato. Se mi è consentita una piccola parola di difesa: è vero, Javascript non dovrebbe essere usato per la presentazione, ma neanche l'HTML. Ecco il markup necessario per ottenere angoli arrotondati con la tecnica "More rounded corners with CSS": (more...)

Continua a leggere Ancora angoli arrotondati con i CSS

Categoria: CSS

àˆ passato più di un anno dalla prima versione dei Nifty Corners e oltre ai tre articoli in italiano (primo - parte prima e seconda - secondo e terzo) sono state pubblicate le versioni in inglese per l'audience internazionale (primo, secondo e terzo) che sono state spunto per diverse soluzioni derivate e varianti.Cominciamo con le versioni solo HTML e CSS. Stu Nicholls dopo la pubblicazione del primo articolo ha presentato gli Snazzy Borders e i Krazy Korners; mentre recentemente sono stati pubblicati gli Spiffy Corners, che includono un generatore dell'HTML e CSS necessario per avere angoli arrotondati con antialias. Quest'ultima soluzione è stata duramente criticata su Sitepoint per il fatto che si basa su HTML presentazionale e vincolato al contenuto, critica che condivido.Ora le soluzioni con Javascript. In ordine di tempo dopo il primo articolo sono comparsi diverse varianti e soluzioni derivate. Gli Anti-alias Nifty Corners e i Rounded corners without images, le prime due soluzioni per avere angoli arrotondati con antialias. Dopo il secondo i rounded corners di Rico, parte di un framework Javascript che include ajax e effetti dinamici, con detection automatica dei colori e bordi. Successivamente sono stati pubblicati i rounded corners di EditSite, che combinano alcune delle soluzioni precedenti con la possibilità  di scegliere la dimensione degli angoli arrotondati con antialias, solo sui div.Le più recenti soluzioni sono i Curvy Corners, che offrono la possibilità  di bordi con antialias e spessore a piacere, e i recentissimi RuzeeBorders, che consentono di ottenere angoli arrotondati con antialias ed effetti drop shadow e glow con una precisione quasi pari a Photoshop: davvero notevole.In molti casi purtroppo la compatibilità  cross-browser non è dichiarata (da verificare soprattutto su IE5.x e Safari), e c'è solo un esempio ad accompagnare lo script o l'articolo. Soprattutto per le ultime due librerie citate, in alcuni casi lo script si presenta lento e ho il sospetto che appesantisca veramente troppo l'albero DOM della pagina. Una buona fase di test è quindi necessaria se avete intenzione di adottarle, ma ho ritenuto fosse opportuno presentare le soluzioni derivate e/o alternative.

Continua a leggere Nifty Corners e derivati

Categoria: Web Design

Alessandro lo aveva preannuciato qui sul blog. Ecco l'articolo definitivo sui Nifty Corners Cube, versione corretta e potenziata della tecnica per creare angoli arrotondati con l'ausilio di CSS e Javascript e senza far ricorso ad immagini. Il pezzo è lungo, ma la tecnica è più che mai semplice da implementare. A farla da padrone sono infatti i tanti esempi (ben tredici più un paio di varianti) che Ale ha voluto creare per mostrare cosa si può fare con questa libreria. Chapeau!.

Continua a leggere Ecco i Nifty Corners Cube

Categoria: Scripting