SVG con un piccolo aiuto da Raphaël

Volete creare delle immagini vettoriali scalabili (SVG) che siano creative, interattive, appaiano bellissime ad ogni risoluzione eme/em degradino con grazia? Brian Suda vi spinge ad usare Raphaël per il lavoro duro con SVG.

Per favore, ingrandite quel background!

Le immagini di background che riempiono lo schermo elettrizzano gli uomini del marketing ma sprecano band nei device con piccole viewport e sono soggette a problemi di rifilatura ed allineamento nei monitor ad alta risoluzione e widescreen. Invece di usare una singola dimensione prefissata per il background, una suoluzione migliore sarebbe quella di scalare l’immagine per fare sì che vada bene nelle differenti dimensioni della finestra. E con i background CSS e le media query CSS3 possiamo proprio fare questo. Bobby van der Sluis ci mostra come.

Prefisso o Post-Hack

Vendor prefixes: segno premonitore o minaccia? Man mano che il supporto dei browser (incluso IE9) ci spinge a tuffarci in CSS3, i vendor prefixes come -moz-border-radius e -webkit-animation possono mettere alla prova le nostre coscienze e la nostra pazienza. Ma mentre a nessuno piace particolarmente scrivere la stessa cosa quattro o cinque volte di fila, i prefissi possono effettivamente accelerare l’avanzamento ed il perfezionamento di CSS. Il re dei CSS Eric Meyer ci spiega perché.

Basta fork con CSS3

Forse vi ricordate di quando JavaScript era un’arte oscura. Si era guadagnato quella reputazione perché, per fare una qualsiasi cosa che avesse la minima consistenza cross-browser, dovevate fare fork del vostro codice per le varie versioni di Netscape e di IE. Oggi, grazie al sostegno dato agli standard web e grazie ai diligenti autori di librerie JavaScript, il nostro codice è relativamente fork-free. Ahimé, per la nostra smania di usare alcune delle feature disponibili in CSS3, siamo ricaduti in errore. Annotatevi eCSStender, la libreria JavaScript di Aaron Gustafson che vi permette di usare le proprietà ed i selettori di CSS3 mantenendo il vostro codice fork-free e hack-free.

Il problema delle password

La recente rubrica del ricercatore esperto di usabilità Jakob Nielsen promuove un cambio fondamentale nella progettazione del campo password nel web. Egli ritiene che sia giunto il momento di mostrare le password in chiaro mentre l’utente le scrive, abbandonando l’approccio tradizionale consistente nel mostrare una serie di asterischi o pallini al posto della password stessa.

Usare SVG per un background flessibile, scalabile e divertente, Parte II

In questo articolo, esaminerò la tecnologia che sta dietro l’uso di SVG per il design del vostro sito. Esploreremo come incorporare SVG in maniera cross-browser friendly, incluso l’utilizzo di SVGWeb per essere sicuri che SVG verrà visualizzato in Internet Explorer. Inoltre, coprirò anche l’unica caratteristica che rende SVG l’ideale per gli sfondi delle pagine: la scalabilità.

Usare SVG per un background flessibile, scalabile e divertente, Parte I

SVG, ossia Scalable Vector Graphics, consiste di cerchi, rettangoli e percorsi creati in XML e combinati in disegni sulle pagine web. Ad un oggetto SVG si possono applicare colori solidi, gradienti ed un certo numero di filtri sofisticati – sebbene non tutti i browser implementino tutti i tipi di filtri. Potete incorporarvi del testo così come delle immagini, e potete copiare e clonare il vostro SVG tutte le volte che volete. Principalmente, utilizziamo il formato SVG per programmi di grafica, diagrammi, illustrazioni o animazioni. Tuttavia possiamo incorporare oggetti SVG nel design complessivo di un sito: è una potenzialità straordinariamente versatile del web design ed è divertente da usare.
In questo articolo introduttivo, farò alcune importanti considerazioni su come lavorare con SVG, inclusi il supporto dei browser e l’accessibilità. Leggete la Parte II (mettere il link alla seconda parte tradotta) per scoprire come trovare ed adattare alle vostre esigenze oggetti SVG che si