In particolare andiamo ad aggiornare la lista di tutorial iniziata tempo fa dove si impara a realizzare il template con photoshop e come passare poi al codice HMTL CSS.

Oggi andiamo a vedere 3 tutorial, tutti realizzati da Piervix per il blog Wegraphics, che ti consiglio caldamente di seguire.

Designing a highly-professional website, from the sketch to the code

Template Photoshop + Codice HTML CSS

How to create a professional and clean web layout (with PSD-to-HTML conversion)

Template Photoshop + Codice HTML CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Template Photoshop + Codice HTML CSS

Questa lista verrà aggiornata man mano che troverò nuovi tutorial interessanti in giro per il web, quindi ti consiglio di abbonarti gratuitamente ai feed RSS per non perderti neanche un aggiornamento!

Se ti sei perso gli altri articoli della serie eccoli qui:

• 10 Script e Plugin Per Gimp Che Non Puoi Perderti
• Gimp Plugin – Resynthesizer: Il Content Aware Di Adobe Photoshop CS5
• G’MIC Gimp Plugin – Tantissimi Nuovi Filtri Per Gimp
• 5 Ottimi Plugin e Script per Gimp

Oggi vediamo 2 nuovi script, per realizzare testi in 3D e per dare un effetto di carta antica alle foto; se non sai come installarli, ti invito a guardare il video tutorial che ho realizzato appositamente.

3D Text

Una volta installato lo script potrai realizzare in pochi secondi un testo 3D.

Quello che dovrai fare sarà prendere lo strumento testo, scrivere quello che preferisci e andare nel menu su Xtns – Script-Fu – 3dtext – make-3d.

Old weathered paper effect

Con questo script potrai ottenere un effetto di foto impressa su una carta antica

Per utilizzarlo, una volta aperta la foto aggiungi il canale alfa (Livello – Trasparenza – Aggiungi Canale Alfa) e poi vai sempre nel menu su Filtri – Decorativi – Old paper, dove potrai impostare alcuni parametri per personalizzare l’effetto.

Chi pensa che ad agosto sono stato per un mese a rilassarmi si sbaglia di grosso.  Infatti c’è subito una bella novità di cui ti voglio parlare.

Da più di un mese è nato Your Inspiration Magazine, la rivista per web designer che si preannuncia la più completa sul mondo del web design.

Io un po’ per gioco avevo commentato l’articolo che parlava della rivista su Your Inspiration Web , dicendo che mi sarebbe piaciuto partecipare parlando di grafica e in particolare di Gimp. Dopo poche ore mi arriva un messaggio su Facebook di Nando Pappalardo che mi chiede se sono interessato a scrivere per la rivista: io non ci credevo e ora eccomi li in mezzo alle più grandi firme del web design italiano.

In particolare realizzerò una guida che parte da zero su Gimp, adatta per persone che non sanno niente di grafica, per poi arrivare a realizzare lavori più complessi. Sono felice di avere un nuovo mezzo, oltre al blog, per parlare di questo potente programma open source, che in alcuni casi può rimpiazzare egregiamente photoshop.

Il primo numero è già uscito a luglio, dove sono stati raccolti alcuni tra i migliori articoli di Your Inspiration Web, mentre il 13 settembre uscirà il nuovo numero, assolutamente da non perdere!

Ed ecco quindi un augurio speciale di buone ferie a tutti i lettori del blog!

Come già ho detto nel video, continuerò ad aggiornare la pagina fan di facebook con nuovi articoli che trovo in giro per il web, quindi se vuoi restare sempre aggiornato sul mondo del web design ti consiglio di diventare mio fan!

Ancora auguri a tutti di buone vacanze!

Altre volte si è parlato di questo browser nel blog, andando a vedere delle risorse per affrontare al meglio questo browser. Ma ne vale la pena?

Per rispondere meglio alla domanda ho testato con IE Tester e browserlab di adobe i blog italiani e internazionali che più seguo.

Per superare il test, i contenuti e tutte le funzionalità del blog in IE6 devono essere accessibili allo stesso modo degli altri browser.

Ecco cosa è venuto fuori.

I blog che supportano IE6

Tom Stardust

La soluzione di Tomstardust è la migliore che ho trovato fra tutti i blog che ho testato: non solo IE6 viene supportato, ma si viene anche invitati ad aggiornare il proprio browser, consigliando delle alternative.

Credo che questa soluzione TUTTI la dovrebbero addottare. Bravo Tommaso!

Pikadilly

Il blog smanettona più famosa del web, supporta a pieni voti Internet Explorer 6. Non c’è alcun commento: si vede che sei una smanettona, molto brava però!

Yes Web Can

Ottima la resa di Yes Web Can su IE 6, dove tutti i contenuti sono fruibili senza ostacoli. Bisogna proprio andare a trovare i pelo nell’uovo per trovare qualcosa che non va: ci sono problemi di allineamento nel motore di ricerca; inoltre nei pulsanti di condivisione, essendo delle PNG, non viene mantenuta la trasparenza, dato che IE 6, come ben sai non le supporta.

Francesco Gavello

Anche questo supporta bene IE6: uniche pecche l’immagine del logo, di cui si vede una piccola parte sotto il menu e le barre di scorrimento nella seconda colonna nel menu, che permette di vedere gli articoli in base a diversi criteri.

Blog americani

Per quanto riguarda i blog americani, si distinguono in modo positivo line25, spoongrapshics, 1stwebdesigner, abduzeedo, spyrestudios e van delay design.

I blog che non supportano IE6

Italian Web Design

Questo è l’unico altro blog, insieme a tomstardust, che invita l’utente ad aggiornare il browser, dicendo che il blog non è supportato da IE6.

I problemi si riscontrano nel layout, dove la sidebar va a finire sotto i contenuti.

Blographik

Anche in Blographik il problema è il layout, con la sidebar di destra che misteriosamente sparisce. Ma non mi stupisco più di tanto: con IE può succedere questo ed altro!

P.V.M Garage

Nell’home page quasi tutto bene, a parte le trasparenze delle PNG, a cui non è stata pensata un’alternativa dedicata a IE6. Nei singoli articoli, la sidebar non resta a destra ma va in fondo. Nel footer la terza colonna non resta a fianco ma va a capo, per un problema di margini.

Julius Design

Il blog presenta diversi problemi con IE6: il sottomenu non cambia (passando con il mouse sopra webdesign, tutorial ecc.); sotto i titoli degli articoli, viene tagliata una parte dell’immagine di sfondo.

Infine anche in questo caso il layout non viene mantenuto, con la sidebar che va a finire sotto, e non di fianco ai contenuti.

Web Fandom

Un blog dal design rivoluzionario, che però fa a botte con IE 6. Ci sono problemi nel box di ricerca avanzata, dove le 4 aree sono posizionate una sotto l’altra e di conseguenza anche la zona dedicata ai link social trasla più in basso, rendendo il layout confusionario.

Poi ci sono problemi con le PNG, come visto prima in PVM Garage, e nella sidebar. Nel sideblog precisamente ci sono problemi di margini tra le immagini e il testo, come anche nel footer, dove l’ultima colonna va sotto le altre, invece che rimanere a destra.

Your Inspiration Web

I ragazzi di your inspiration web, da molti considerato il miglior blog di web design in Italia (e io sono fra quelli), non so se a posta o incosapevolmente ma IE 6 proprio non lo digerisce. IE tester addirittura subito sotto il logo e il menu, mostra bello grande il box per iscriversi alla newsletter, che va anche un po’ sopra i contenuti.

Inoltre, anche in questo caso la sidebar va sotto i contenuti, e non rimane a destra.

Blog americani

Anche qui ci sono nomi illustri, come smashing magazine, noupe, six revisions, dove i problemi riguardano anche qui il layout che non viene mantenuto.

Alla luce di questi risultati, credo che le soluzioni che tutti dovremmo addottare sono quelle di Tomstardust e Italian Web Design : supportare totalmente o parzialmente IE 6 invitando l’utente ad aggiornare il proprio browser. Mi ha stupito che solo 2 blogger abbiano pensato di proporre l’aggiornamento. Se tutti lo facessero, IE 6 avrebbe vita breve.

Tu cosa ne pensi? come ti comporti con IE 6? Mi piacerebbe anche avere un’opinione delle persone interessate dall’articolo, per sapere se hanno intenzionalmente voluto supportare o meno Internet Explorer 6.

Oggi parliamo di Slideshow Maker, un ottimo servizio che ti permetterà di creare dei slideshow in pochi minuti.

Tutto quello che dovrai fare sarà scegliere le foto, gli effetti di transizione e avrai il tuo file swf pronto ad essere inserito nel tuo sito!

Ecco quello che potrai fare:

• aggiungere ombre e angoli arrotondati
• scegliere l’effetto di transizione e la sua durata
• impostare il tempo di permanenza della foto
• aggiungere dei testi dove potrai impostare il colore di primo piano, di sfondo e l’opacità

Come vedi potrai fare tutto quello che desideri! e senza avere una minima conoscenza di flash!

L’unica piccola pecca è che nello slideshow, in basso a destra, ci sarà il logo del servizio. Se proprio non ti va giù, ti ricordo che ci sono una serie di miei tutorial jquery per realizzare degli slideshow!

Provalo e dimmi cosa ne pensi!

Oggi andiamo a vedere un piccolo tutorial sui CSS Sprites realizzato da Sohtanka, dove imparerai un piccolo trucchetto che ti porterà dei vantaggi nel tuo lavoro di web designer.

In particolare questa tecnica è pensata per un cliente che vorrà modificare le immagini di primo piano e di hover del suo sito. Di base si dovrebbe agire sui CSS cosa che la maggior parte dei clienti non saprebbe fare.

Se invece gli si da la possibilità di caricare le foto direttamente dall’interfaccia del CMS le cose cambiano per il cliente, e per noi.

Vai al tutorial

Guarda subito la demo per capire di cosa si tratta.

Non ti basta? Vai a vedere il sito di Samuele Bersani, dove non è stato usato panel magic, ma qualcosa di molto simile. Bello vero?

Il plugin è compatibile con tutti i browser, compreso Internet Explorer 6! Andiamo a vedere come utilizzarlo al meglio.

Passo 1. Inizializzazione

Il primo passo, come per qualsiasi script, è quello di inserire le righe di codice necessarie per l’inizializzazione.

Passo 2. Inseriamo le “pagine”

Ora, tra i tag body, dobbiamo inserire il codice necessario per i diversi pannelli, ognuno dei quali sarà un div.

About
Contenuto div





Service
Contenuto div





Contact
Contenuto div

E così via per tutti i div che vorrai inserire.

Inoltre dovrai inserire il div “griglia”.

sitemap

Passo 3. Un po’ di stile

Per quanto lo riguarda lo stile, non bisogna fare grandi cose, a parte definire le dimensioni dei diversi panel, agendo sul selettore .content, ad esempio in questo modo.

.content {
	 background:#FFF;
	 border:5px solid #BFBFBF;
	 padding:10px;
	 width:900px;
	 height:450px;
	 overflow:auto;
	 margin:0 auto 0 auto;
}

Passo 4. Applichiamo lo script

Infine applichiamo lo script, mettendo prima della fine del tag body queste righe di codice.

Guarda l’esempio
Scarica il sorgente

Oggi ti segnalo Seamless Colour Pattern, un sito nato da pochi giorni, dove potrai trovare migliaia di pattern da usare per il tuo sito.

Potrai cercare il pattern in base al colore di cui hai bisogno e in più potrai vederne subito un’anteprima a pieno schermo.

Inoltre potrai vedere anche i voti degli utenti, in modo da avere un ulteriore parametro per scegliere o meno un determinato pattern.

Ma non è finita qui!

Grazie a Repper Lite, potrai creare il tuo pattern, partendo da una foto o dal video.

Non male vero? A parte la mia faccia!

Allora forse hai bisogno di PIE (Progressive Internet Explorer), un hack che permetterà a IE (6-7-8) di usare diverse proprietà CSS3.

Una volta scaricato l’hack, ti basterà aggiungere alla fine delle proprietà CSS3 questa riga di codice: behavior: url(path/to/PIE.htc);

Tutto qui!

Le proprietà al momento supportate del tutto o parzialmente sono:

• border-radius
• box-shadow
• border-image
• background multipli
• gradienti

Ti consiglio di leggere la documentazione per vedere come poter utilizzare al meglio queste proprietà in IE, e quali sono i possibili problemi.

Ricordo anche che questo hack è stato creato da pochi giorni e quindi ha tutto il tempo per crescere e supportare altre proprietà.