Too Cool for Internet Explorer

Articoli e Tutorial sul web e dintorni – a cura di Salvatore Laisa

Post con tag ‘webdesign’

Pixus: uno strumento essenziale!

22 febbraio, 2010

PixusTutti i webdesigner incappano nel momento in cui bisogna prendere delle misure di un qualche oggetto sullo schermo. Che sia per disegnare un banner, una parte di un sito o elementi per l’interfaccia utente spesso si finisce col fare uno screenshot dello schermo, aprire Photoshop (con i suoi simpaticissimi tempi di caricamento), usare guide e strumenti di selezione per prendere le misure che ci servono e rendersi poi conto di averlo evocato per un lavoro cosi semplice.

Ora cambiamo completamente argomento, sappiamo che grazie ad Adobe AIR chiunque sa programmare in ActionScript 3 è ora in grado di realizzare applicazioni desktop, quindi se hai bisogno di qualcosa… a volte fai prima a farlo da te… o scaricare programmini fatti da qualcun’altro nella tua stessa situazione.

Come unire questi due discorsi apparentemente sconnessi? grazie a Pixus! Ovvero un’applicazione AIR gratuita che ci fornisce un simpatico ed utilissimo righello sullo schermo sempre in primo piano per misurare qualunque cosa sia visualizzabile sul nostro schermo!

PS: oh a proposito… post numero 100!

  • Share/Bookmark

Tags: , ,
Posted in Senza categoria | No Comments »

Redesign #2 – il mood

18 febbraio, 2010

Come tutte le cose nel tempo, anche i gusti cambiano. La “splashata” di vernice multicolarata sullo sfondo mi è sempre piaciuta, ma sentivo che potevo migliorarla e metterla un po più in evidenza, mentre il nero come colore principale… effettivamente mi ha stufato!

Ovviamente non passerò da un layout nero a uno bianco in una sola “passata” :D nel senso che questo nuovo design sarà un po più grigio, quindi il mood generale del sito sarà molto meno cupo e potrò giocare con combinazioni di colori un po più vive e un po meno scontate delle attuali.

Se speravate in un layout bianco e pulitissimo, mi sa che dovrete aspettere il 3° o 4° redesign :P

  • Share/Bookmark

Tags:
Posted in Senza categoria | No Comments »

CSS Tip #10 – Primi e ultimi

15 febbraio, 2010

CSS tipsI selettori Css in genere ci permettono di bersagliare oggetti specifici all’interno di strutture Html più o meno complesse, ma a volte siamo costretti a mettere mano a quest’ultimo per riuscire a prendere proprio solo ed esclusivamente l’ultimo o il primo oggetto di una serie… ma scavando a fondo nei meandri di questo linguaggio si scopre in realtà che esiste un selettore anche per quelle occasioni :) .

Abbiamo due pseudo selettori (tipo quello per il passaggio del mouse su un oggetto) per poter modificare gli aspetti dei primi e ultimi elementi di una serie, diciamo per esempio di una lista non ordinata: (continua…)

  • Share/Bookmark

Tags: ,
Posted in Senza categoria | No Comments »

Redesign #1 – Photoshop vs Illustrator

11 febbraio, 2010

Illustrator vs PhotoshopPurtroppo si, esiste anche questo conflitto, specialmente nel webdesign!

Il primo design è stato realizzato in Photoshop, quello nuovo che sto realizzando invece in Illustrator. Il fatto è che da un anno abbondante sono definitivamente migrato nel realizzare i layout grafici con il tool vettoriale di Adobe, sicuramente ha il pro della facilità nel disegnare in quanto ha molti più strumenti e controlli da disegno che Photoshop non ha (ricordiamoci che Photoshop è un editor per grafica non-vettoriale), tuttavia si perde in quegli effetti foto-realistici che il grande Ps sa realizzare senza problemi.

E’ solo che ormai mi sono “innamorato” della grafica vettoriale nel webdesign (e non sono proprio l’unico), ma è solo questione di gusti…

  • Share/Bookmark

Tags:
Posted in Senza categoria | No Comments »

BrowserLab – Tanti browser in uno

27 gennaio, 2010

Testare le pagine Html su diversi browser, e talvolta anche su diversi sistemi operativi, è sempre stato il problema principale di tutti i Web Designers. Le soluzioni sono molteplici e ovviamente ognuno preferisce il proprio metodo di test, ma da oggi abbiamo uno strumento in più per cercare di rendere questa operazione sempre meno dolorosa: Adobe Browser Lab.

Questo servizio (attualmente gratuito in fase di “preview”) è una potente applicazione in Flash che ci consente di avere degli screenshot del sito che vogliamo esaminare su diversi browser e persino su diversi sistemi operativi (per ora Windows e MacOS). Tra i browser supportati ci sono IE 6-7-8 , Firefox 2 e 3.5, Chrome e Safari 3-4. (continua…)

  • Share/Bookmark

Tags: , , , , ,
Posted in Senza categoria | No Comments »

CSS Tip #9 – Css di Natale!

8 dicembre, 2009

CSS tipsIn quest’edizione “speciale” dei Css tips, dedico qualche minuto a spiegare come ho scritto i Css per il “Christmas Pack 2009″. Come vedrete, molte delle proprietà che uso per inserire questi elementi nella pagina le abbiamo già incontrate in precedenti tips, quello che voglio spiegarvi qui è come organizzare gli stili per ottenere il miglior risultato scrivendo il minor numero di righe di codice possibili.

Sapendo che alcune proprietà sono comuni per tutti gli elementi mentre altre sono specifiche per ogni elemento, ho raggruppato quelle comuni come posizionamento fisso, display in blocco e text-indent in una classe generica: (continua…)

  • Share/Bookmark

Tags: ,
Posted in Christmas Special Week - 2009 | 1 Comment »

Il set di risorse definitivo… gratis!

10 novembre, 2009

Credeteci o no, Tutorial9 mette a disposizione un pacchetto di materiale e risorse per webdesigners assolutamente gratis!

The Ultimate Resource Package for WebDesigners” è un mega archivio di risorse , tra cui 400 icone vettoriali e 4 temi Premium per WordPress, scaricabile gratuitamente dal sito Tutorial9 a patto di iscriversi alla loro newsletter, quindi depositando presso di loro solo il vostro indirizzo email.

Ovviamente è tutta un’operazione di marketing per ottenere un’altissimo numero di iscritti alla nuova newsletter, ma considerando il valore dei contenuti del “Package” e la qualità degli articoli e tutorial su Tutorial9, direi che il gioco vale la candela ;) .

Ma attenzione, l’offerta vale solo fino alla fine di questa settimana, quindi affrettatevi!

  • Share/Bookmark

Tags: , ,
Posted in Senza categoria | No Comments »

CSS Tip #8 – “Vedo e non vedo”, ovvero: la trasparenza

17 ottobre, 2009

CSS tipsLe trasparenze sono un’effetto molto gradevole se ben utilizzato, tuttavia per creare simulazioni di trasparenza spesso si usa Photoshop e successivamente si esporta il tutto come immagine normale.

Da qualche tempo ormai gran parte dei browser (per non dire tutti) offrono il supporto alla trasparenza tramite Css, l’unico vero problema al momento è che ogni browser ha un po una sua sintassi per questo effetto.

Quando i CSS3 saranno completamente sviluppati e supportati da tutti browser potremo finalmente gestire questo effetto con una sola regola Css… per ora invece ci tocca doverci rimboccare le maniche e chiarire un paio di cose :) .

(continua…)

  • Share/Bookmark

Tags: ,
Posted in Senza categoria | No Comments »

Tutorial – Sistemiamo il CSSTip #6 con jQuery

13 aprile, 2009

logo jQueryCome ha puntualizzato qualcuno (grazie Stefano!) leggendo il CSS Tip #6, può verificarsi il caso che l’elemento contenuto dall’elemento “contenitore” possa essere più alto di questo e di conseguenza ne esca al di fuori. Ovviamente dipende cosa si sta facendo, in alcuni casi si può volere di proposito che questo accada, in altri casi no.

Facendo riferimento al caso in cui questo non sia l’effetto desiderato, vi propongo un modo semplice per sistemare questa cosa con un paio di righe di jQuery. Considerando che la soluzione che vi sto per illustrare è dinamica, può tornare utile anche nel caso l’elemento contenuto non abbia sempre la stessa altezza, per esempio se al suo interno carica contenuti dinamici che cambiano di volta in volta, impedendo cosi di utilizzare un valore fisso di altezza per sistemare il tutto. (continua…)

  • Share/Bookmark

Tags: , , ,
Posted in Senza categoria | 3 Comments »

CSS tip #6 – Assoluto nel relativo

31 marzo, 2009

CSS tipsDal titolo può sembrare una notevole contraddizione, ma in ambito di CSS è una tecnica molto utile che tra le altre cose chiarisce alcuni dubbi che si hanno i primi tempi riguardo le proprietà di posizione (absolute , relative).

In precedenza avevo accennato al discorso di come posizionare oggetti in modo fisso alla pagina, l’unico problema di quella nozione era che non vi permetteva di posizionare gli oggetti all’interno di blocchi <div>, questo perche il posizionamento assoluto nei Css al momento della visualizzazione “rimuove” l’oggetto con la suddetta proprietà dalla struttura Html (ripeto è una rimozione che avviene solo a livello visivo, il vostro codice rimane inalterato!) e lo posizione liberamente alle coordinate specificate della pagina.

(continua…)

  • Share/Bookmark

Tags: ,
Posted in Senza categoria | 5 Comments »