L’incredibile numero di novità portate da Wordpress 2.7 non smette mai di stupirmi, infatti prima utilizzare un differente stile per i commenti dell’Autore richiedeva l’utilizzo di qualche stratagemma (vedi sotto), mentre adesso, come potete notare questo è molto più semplice e non dovrete neanche toccare il fiel comments.php:

li.bypostauthor {
    /* Stile CSS dell'autore */
}

li.byuser {
    /* Stile CSS degli utenti */
}

2. Per versioni Wordpress precedenti la 2.7

<?php
$authcomment = ($comment->user_id==1)?' commento-autore':'';
$classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : '';
?>
<li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

In questo modo se l’autore scrive un commento, avrà la classe .commento-autore. Quindi aprite il file style.css del vostro tema ed aggiungete il seguente codice:

li.commento-autore {
    /* Stile CSS dell'autore */
}

N.b. Come potete vedere abbiamo sottointeso che l’id dell’autore sia 1 (solitamente è così), in caso contrario correggete.

1. Realizzate un’immagine .jpg 1×1 pixel

Ralizzate un’immagine .jpg 1×1 pixel e rinominatela nohotlink.jpg

2. Caricare con su FTP

Entrate nel vostro FTP, create una cartella images (se esiste tanto meglio) e caricate la vostra immagine

3. Modificate file .htaccess

Ora sempre dal vostro client FTP, cercate il file .htaccess ed in fondo inserite il seguente codice:

RewriteEngine On
#Replace ?mysite\.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Quindi salvate.

Conclusioni

Con queste poche semplice mosse, riuscirete a risparmiare quei Megabyte di banda sfruttati da alcuni furbacchioni. Per eventuali problemi, non esitate a lasciare un commento!

Via | wprecipes

Questo a livello formale porta una grave svantaggio al nostro blog, infatti quando verremo citati automaticamente da servizi come Liquida, verrà riportato (Articoli scritto da Admin) e perderemo un’ottima opportunità per pubblicizzare anche noi stessi. E’ bene riuscire a distinguerci dalla massa, in particolar modo, nel mondo del blogging! Per questo motivo oggi ricorreremo ad un piccolo ma utilissimo Hack!

1. Accedi al tuo account phpMyAdmin

Per prima cosa devi accedere al tuo account phpMyAdmin. Se non ti ricordi come fare, apri il file wp-config.php da un normale clientFTP e visualizza i dati di accesso.

2. Seleziona il database

Quindi adesso dalla lista alla tua sinistra seleziona il database che utilizzi per Wordpress. Se c’è più di un database e non ricordi quale è abbinato a Wordpress, ricorri sempre al file wp-config.php

3. Seleziona wp_users

Adesso visualizzerai la lista di tabelle che Wordpress sfrutta per funzionare. Quindi cerca wp_users e clicca sull’icona mostra.

4. Seleziona account Admin

In questo modo potrai visualizzare la lista completa di account registrati al tuo blog. Quindi cerca Admin e clicca sull’icona modifica.

5. Rinominiamo

Da qui avrai a tua disposizione tutte le caratteristiche del tuo account. Quindi rinomina i campi user_login e display_name con un nickname differente.

Conclusioni

In questo modo, con meno di 2 minuti di lavoro, avrai rinominato l’autore di tutti gli articoli del tuo blog.

N.b.

Quando effettuerai il login, non dovrai più utilizzare utilizzare “admin” come user, ma il nuovo nickname da te scelto ed inserito nel databese.

Allora da qui potete visualizzare l’anteprima del suggestivo effetto, metre da qui potete scaricare il file allegato al tutorial. Vi invito inoltre a leggere la procedura, che pur essendo scritta in inglese è abbastanza comprensibile. L’effetto è raggiungibile grazie l’ausilio dell’ormai famosa libreria JQuery e del CSS per la parte grafica-

… si può fare? Ma certo ed oggi scopriremo come.

Questi giorni stavo realizzando un sito internet per un gruppo di amici (per questo motivo non mi sono più fatto sentire), che hanno aperto un’agenzia ed avevo la necessità di linkare un div. Ho quindi fatto qualche ricerche su internet, ma non sono riuscito a trovare niente.

Preso dalla disperazione, ho iniziato a spulciare il codice di qualche sito internet e sono giunto infine a questa soluzione:

<div style="cursor:pointer;" onclick="location.href='http://www.example.com';" >

Con questo:

onclick="location.href='http://www.example.com';"

Si rende il div linkabile, ma si avrà il problema che del cursore, che non muterà nella “manina”, come in tutti i normali link. Quindi inseriamo:

style="cursor:pointer;"

Chiusa questa piccola parentesi, oggi vi mettiamo a disposizione di un nuovo video tutorial, grazie al quale impareremo a realizzare icone con photoshop, nel caso specifico una lettera. Il video è disponibile anche in qualità HD! Per non perderti nessun video tutorial, iscriviti ai nostri FeedRSS.

1. Codice HTML

Per prima cosa buttiamo giù il codice html:

<div id="map">
<div id="america"></div>
<div id="europe"></div>
<div id="africa"></div>
<div id="asia"></div>
<div id="australia"></div>
<div id="southAmerica"></div>
</div>

2. Codice CSS

#map {
   width:669px;
   height:351px;
   background-image:url('map.jpg');
   position:relative;
}
#map div {
   width: 120px;
   height:60px;
   position:absolute;
   cursor:pointer;
   background-repeat:no-repeat;
}

Nella prima parte del codice css, abbiamo specificato che il contenitore dovrà avere una larghezza di 669px e un’altezza di 351px ed abbiamo impostato lo sfondo.

Nella seconda parte, abbiamo specificato che ogni spillo, dovrà avere 120px come larghezza e 60px come altezza, che la sua posizione sarà assoluta (e verrà specificata successivamente) e che al passaggio del mouse il cursore deve essere una manina, la stessa dei colelgamenti ipertestuali.

Adesso dovremo analizzare la cartina e vedere come posizionare i vari “spilli”:

#america {
   background-image:url('america_small.png');
   top:60px;
   left:30px;
   background-position:right bottom;
}
#america:hover {
   background-image:url('america_big.png');
}

Dalle istruzioni top:60px e left:30px abbiamo specificato in quale punto della cartina posizionare i vari “spilli”. Inoltre da #america:hover, abbiamo inserito quale sfondo mostrare una volta che il mouse si trova sopra il div.

Il tutorial è terminato! VI invito inoltre a visualizzarne una demo.

si ringrazia Janko Jovanovis per aver permesso pubblicazione del suo tutorial su ziosteve.com [jankoatwarpspeed]

• Guida alla realizzazione di un blog [Prima Parte]
• Guida alla realizzazione di un blog [Seconda Parte]

Continuiamo questa nuova serie di articoli, affrontando un argomento ben preciso, ovvero il layout o per meglio dire la veste grafica di un blog. Nel caso in cui abbiate deciso di utlizzare la piattaforma CMS Wordpress (che vi ho consigliato nel precedente articolo), sappiate che su internet sono reperibili centinaia di teme gratuiti, molti dei quali di ottima qualità (io che sono di parte vi consiglio il mio!).

Di seguito andremo ad elencare le caratteristiche che un tema Wordpress deve e non deve avere, per essere considerato eccellente!

1. Anche l’occhio vuole la sua parte

Sicuramente la prima cosa che dovete controllare in un tema Wordpress è la parte grafica che deve:

• Essere adatta al tema del vostro blog
• Non “dovrebbero” prevalere colori troppo scuri (consiglio di cercare dei temi dove la parte centrale, ovvero quella che accoglierà gli articoli, abbia uno sfondo bianco, che facilita la lettura agli utenti)

2. Widget-Ready

La sidebar di un tema, è quella barra laterale che accoglie informazioni come: gli utlimi articoli, gli ultimi commenti, categorie, link ecc…Vi consiglio quindi di cercare dei temi con una sidebar Widget-Ready, il che vi faciliterà in futuro l’inserimento di Widget.

3. Link RSS

Controllate che il link verso gli RSS sia ben visibile. In caso potreste inserirlo manualmente, magari attirando l’attenzione con una di queste splendite icone.

One more link

Ecco un ottimo link che contiene ben 100 temi di ottima qualità già selezionati dai ragazzi di SmashingMagazine. Buona ricerca!

http://www.smashingmagazine.com/2008/01/08/100-excellent-free-high-quality-wordpress-themes/

Nella prossima puntata…

parleremo dell’importanza dei FeedRSS e di come aumentarne gli iscritti.

P.s. Per non perderti questa puntata, iscriviti ai nostri di FeedRSS!

Oggi vi segnalo Chevereto, uno script in PHP, realizzato dal cileno rodolfoberrios. Lo script permette di realizzare in maniera veramente semplice, un sito di image-hosting. Le funzionalità che caratterizzano Chevereto sono molteplici:

• A differenza di CMS come Wordpress, non richiede l’utilizzo di un database
• Permette di ridimensionare le immagini caricate
• Permette di accorciare (mediante tinyURL l’url delle vostre immagini)
• Permette di caricare immagini gia presenti nel web
• Sono utilizzate le librerie JS prototype e scriptaculous
• Personalizzando i css è possibile personalizzare il template, adattandolo alle proprie esigenze

Guida all’installazione

1. Verificare la presenza di PHP5
2. Moficare opportunamente il file config.php
3. Modificare il file .htacces in modo tale da farlo funzionare con il tuo dominio
4. Aprire il file js/rules.js e cercare la linea di codice numero 44
5. Modificare:

   var url = ‘http://dev.chevereto.com/pref.php?url=’+checked;

   in:

   var url = ‘http://tuodominio.com/pref.php?url=’+checked;

• Guida alla realizzazione di un blog [Prima Parte]
• Guida alla realizzazione di un blog [Seconda Parte]

Prima di aprire un blog occorre analizzare attentamente i motivi che ci spingono a questa decisione: monetizzare, guadagnare popolarità o semplicemente condividere le proprie conoscenze. Con questa guida spiegheremo in maniera semplice (in modo tale da giungere anche ad un pubblico non ferrato in materia), come giungere ai propri obiettivi.

1. IL TITOLO ED IL DOMINIO

In molti casi l’importanza che può assumere il titolo di un blog viene sottovalutata. Con un massimo di due parole dobbiamo riuscire a far comprendere all’utente, in maniera immediata, gli argomenti che intendiamo trattare con i nostri articoli. Esso deve essere originale, unico e semplice da memorizzare. Inoltre dovrebbe avere un significato universale, cronologicamente parlando, quindi dovrebbe mantenere le stesse qualità nel tempo.

Una volta deciso il titolo (questo potrebbe richiedere anche più di una settimana), occore verificare la disponibilità del dominio.

2. IL LOGO

Il titolo naturalmente deve essere accompagnato da un logo, ovvero un immagine che ti identifica. La realizzazione di un logo non è per niente banale, in quanto occorre: fantasia, capacità tecniche, conoscenza della psicologia dei colori e delle forme ecc… Un buon logo deve essere realizzato in vettoriale grazie a software specifici come Adobe Illustrator. Se pensi di non possedere le capacità, ti consiglio di rivolgerti ad un buon grafico.

3. HOSTING

Questo è un tema sul quale si potrebbe discutere a lungo… Il costo mensile di un hosting varia dai 2 euro al mese fino ai 400 euro al mese, è evidente che tra i due piani hosting esiste una differenza. Il costo dell’hosting deve essere proporzionato: al numero di visite che si riceve quotidianamente ed al traffico che si pensa verrà utilizzato. Agli inizi hosting come Netsons vanno più che bene, con il tempo potreste avere la necessità di passare a servizi più seri, come dreamhost o meglio ancora mediatemple.

4. PIATTAFORMA

Esistono centinaia di piattaforme utili alla realizzazione di un blog, ma la migliore in assoluto è certamente Wordpress. La sua installazione è ben documentata sul sito internet originale ed è veramente semplice… molto probabilmente non riscontrerete alcun genere di difficoltà.

Ne è la prova questo ottimo tutorial, che spiega passo, passo, come realizzare un realistico ZUNE, il famoso lettore MP3 della Microsoft, con il quale pensava di poter “sbaragliare” gli iPod della Apple.

Quindi Fazioli, ispirato da questo articolo di Julius, ha ben pensato di realizzare un plugin per Wordpress. Personalmente non l’ho ancora testato, in caso fatemi sapere delle vostre prove…

Oggi vi segnaliamo questo ottimo set di pennelli per Photoshop, realizzati in Illustrator ed esportati con un’eccellente risoluzione, ben 1885px x 2500px a 300dpi, utili quindi nella realizzazione di diversi tipi di progetti.

Via | PsdTuts

P.s. Buon San Valentino!

Il blog già adesso conta svariati articoli, di cui vi segnalo “Top 7 Twitter Apps for Mac“, il quale descrive dettagliatamente 7 ottime applicazioni per gestire il Social Network Twitter da Mac.

P.s. A proposito, perchè non inizi a seguirmi anche sul mio account di Twitter!?

Sinceramente ho trovato dellle difficoltà a tradurre le varie funzionalità o filtri di Photoshop, dall’inglese all’italiano, per questo motivo vi consiglio di utilizzare questa completa ed accurata traduzione del menu e degli strumenti.

Via | PsdTuts

In generale il tema è pulito e semplice. Ho inoltre dato una sbirciata al codice; il tema adotta la libreria javascript jQuery, inoltre l’effetto slider iniziale si basa sul famoso plugin Coda.

Il tema è sponsorizzato da Smashing Magazine ed è possibile:

• Visualizzare la demo
• Scaricare il .zip del tema

Via | Smashing Magazine

1. Crea la striscia di base

Aiutandoti con il PenTool di Photoshop, crea la strisia di base del tuo lavoro.

2. Scelta delle immagini

Scegli tre o più immagini da utilizzare per questo tutorial.

3. Adattamento delle immagini – Strumento Warp

Abbassa l’opacità del livello dell’immagine da adattare al 40 o 50%, in modo tale da visualizzare le linee guida della striscia base, che hai precedentemente creato.  Quindi andate su Modifica>Trasforma>Warp e adatta l’immagine, come illustrato qui sotto:

Ora ripeti la stessa cosa per le altre immagini:

4. Mascheriamo le immagini

Adesso organizziamo i nostri livelli all’interno di gruppi (es. 1,2,3,4)

Adesso applica ad ogni gruppo creato una maschera di livello.

5. Le ombre

Per rendere più realistico l’effetto finale dovremo applicare dell ombre. Creiamo quindi all’interno del gruppo numero uno un nuovo livello, usa lo strumento Gradiente e trascina dalla cima in fondo. (come da immagine)

6. Applichiamo degli effetti di luce

Adesso realizza seleziona lo strumento “seleziona cerchio” e crea un ellisse. Vai su Seleziona>Modifica>Sfumatura ed applicare un valore a piacere (consiglio 10). Adesso riempire con il “secchiello” l’ellisse utilizzando un colore bianco (#FFFFFF). Adesso ruotarla come da immagine:

7. Risultato finale

Via | WebDesignerWall

Via | Tutorial9

1. Layout
Iniziamo con il layout, più fresco, più semplice, più nuovo, insomma, più! Nella homepage sono presenti ben 3 colonne che donano al blog un’area più autorevole, al contempo ammorbidita da colori vivaci e divertenti. Inoltre l’intento di questo rilancio è quello di rendere più sociale il blog, per quest motivo alla vostra destra avrete sempre sotto controllo gli ultimi commenti. Sempre per rimanere in tema “social”, potrete votare velocemente i singoli articoli, con uno dei pulsanti presenti alla fine di ogni articolo.

2. Organizzazione
Con questo rilancio non ci limitiamo a delle semplici modifiche estetiche. Vogliamo migliorare la nostra organizzazione, per questo motivo abbiamo deciso di non postare gli articoli in modo casuale, ma con una precisa cadenza, sia temporale che tematica:

1. Lunedì – News riguardanti Apple
2. Mercoledì – Segnalazione servizi online
3. Giovedì – News generali
4. Sabato – Freebies (temi/plugin Wordpress, icone ecc…)
5. Domenica – Tutorial (Photoshop, Wordpress, Css, JS ecc…)

Facendo due conti, ci proponiamo di pubblicare ben 5 articoli a settimana!

N.b. Questa cadenza verrà rispettata a partire dal 26/01/09 (dalla prossima settimana )

3. Twitter
Finalmente anche io ho aperto un account su Twitter. Questa sarà una specie di zona off-topic del blog. Potrete fare richieste, chiedere consigli, dare dei consigli per migliorare il blog o magari segnalare articoli o servizi interessanti.

Attendo le vostre opinioni !!!

photo credit: peterastn

1. Layout
Iniziamo con il layout, più fresco, più semplice, più nuovo, insomma, più! Nella homepage sono presenti ben 3 colonne che donano al blog un’area più autorevole, al contempo ammorbidita da colori vivaci e divertenti. Inoltre l’intento di questo rilancio è quello di rendere più sociale il blog, per quest motivo alla vostra destra avrete sempre sotto controllo gli ultimi commenti. Sempre per rimanere in tema “social”, potrete votare velocemente i singoli articoli, con uno dei pulsanti presenti alla fine di ogni articolo.

2. Organizzazione
Con questo rilancio non ci limitiamo a delle semplici modifiche estetiche. Vogliamo migliorare la nostra organizzazione, per questo motivo abbiamo deciso di non postare gli articoli in modo casuale, ma con una precisa cadenza, sia temporale che tematica:

1. Lunedì – News riguardanti Apple
2. Mercoledì – Segnalazione servizi online
3. Giovedì – News generali
4. Sabato – Freebies (temi/plugin Wordpress, icone ecc…)
5. Domenica – Tutorial (Photoshop, Wordpress, Css, JS ecc…)

Facendo due conti, ci proponiamo di pubblicare ben 5 articoli a settimana!

N.b. Questa cadenza verrà rispettata a partire dal 26/01/09 (dalla prossima settimana )

3. Twitter
Finalmente anche io ho aperto un account su Twitter. Questa sarà una specie di zona off-topic del blog. Potrete fare richieste, chiedere consigli, dare dei consigli per migliorare il blog o magari segnalare articoli o servizi interessanti.

Attendo le vostre opinioni !!!

photo credit: peterastn

1. Layout
Iniziamo con il layout, più fresco, più semplice, più nuovo, insomma, più! Nella homepage sono presenti ben 3 colonne che donano al blog un’area più autorevole, al contempo ammorbidita da colori vivaci e divertenti. Inoltre l’intento di questo rilancio è quello di rendere più sociale il blog, per quest motivo alla vostra destra avrete sempre sotto controllo gli ultimi commenti. Sempre per rimanere in tema “social”, potrete votare velocemente i singoli articoli, con uno dei pulsanti presenti alla fine di ogni articolo.

2. Organizzazione
Con questo rilancio non ci limitiamo a delle semplici modifiche estetiche. Vogliamo migliorare la nostra organizzazione, per questo motivo abbiamo deciso di non postare gli articoli in modo casuale, ma con una precisa cadenza, sia temporale che tematica:

1. Lunedì – News riguardanti Apple
2. Mercoledì – Segnalazione servizi online
3. Giovedì – News generali
4. Sabato – Freebies (temi/plugin Wordpress, icone ecc…)
5. Domenica – Tutorial (Photoshop, Wordpress, Css, JS ecc…)

Facendo due conti, ci proponiamo di pubblicare ben 5 articoli a settimana!

N.b. Questa cadenza verrà rispettata a partire dal 26/01/09 (dalla prossima settimana )

3. Twitter
Finalmente anche io ho aperto un account su Twitter. Questa sarà una specie di zona off-topic del blog. Potrete fare richieste, chiedere consigli, dare dei consigli per migliorare il blog o magari segnalare articoli o servizi interessanti.

Attendo le vostre opinioni !!!

photo credit: peterastn

Bg Texture Wood

di nortago

Dark Wood Texture Pack

di cloaks

Grey Wood

di Loona-Loup

45 Wood Textures

di Jammurch

Wood 01 Patterns

di Silver

Wood Textures

di QBit71

Wood Texture

di SilensTemplum

Wood Uncut

di borysses

Wood Textures

di nureen-REStock

Wood Texture

di shadowh3

Wood Texture

di pabloalvin

Wood Texture

di DayDreamsPhotography

Wood Texture

di xNickixstockx

Wood Texture2

di elenulin

Wood Floors

di gnrbishop

Wood CSS Pack

di Bobbyperux

Wood

di valkiria-stock

Wood

di Breyer Stock

Wood & Rays

di yc

Valle old wood texture

di enframed

Tileable Wood Texture

di ftIsis-Stock

Old Wood Texture Pack

di prigix

Wood Breaker

di Beyond-Oddities

Trhee by One

di Beyond-Oddities

Dark Wood

di zygat3r

Wood Texture Wallpaper

di sebgonz

via | hongkiat

Una volta trovato il testo desiderato, basta cliccare su “GET CSS”. Si aprirà dinamicamente una sottofinestra, con il codice da poter utilizzare.

Esempio

font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;


questo naturalmente dovete associarlo ad una classe o un div, quindi:

.testo {
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;
}

nel codice in specifico ecco l’effetto che si ottiene:

Testo di Prova

1. Andare su edit>color setting. Adesso sotto “Working Spaces“, dovreste selezionare, (dal menu a tendina), “sRGB IEC61966-2.1“.
2. Adesso andate su View>Monitor RGB
3. In fine, andate nuovamente su View>Proof Colors

P.s. Per problemi non esitate a lasciare un commento.

Una volta terminato il nostro lavoro, basta andare su File>Save to My Computer per salvarlo direttamente sul nostro pc. Inoltre è possibile importare immagini, applicare dei filtri, gestire i livelli, realizzare sfumature, insomma, è un’ottima alternativa online, al tanto blasonato Photoshop.

Personalmente, sono abituato ad utilizzare Photoshop con le scorciatoie da tastiera, sarebbe fantastico, se le medesime, si potessero importare.

Video Tutorial from Federico on Vimeo.

Step 1

Scaricate queste texture e aprite nel vostro Photoshop, il file “stonetexture4.jpg”

Step 2

Create un nuovo file, (come da immagine)

Step 3

Sbloccate il livello sfondo di questo nuovo file, (cliccate con il tasto destro su “Sfondo”>Livello dallo sfondo). Entrate nelle opzioni di fusione di questo livello, e andate su Sovrapposizione Sfumatura.

Clicchiamo sul gradiente di default, e settiamo al posto del nero un marrone chiaro, (#5f4545) e al posto del bianco, un marrone scuro, (#392727). Cliccate su ok, (qui sotto il risultato che dovreste raggiungere):

Step 4

Quindi andesso ritorniamo nel file “stonetexture4.jpg” e lo copiamo, quindi lo importiamo nel file di lavoro e se necessario lo ridimensioniamo, attivando la funzione, premendo la combinazione di tasti ctrl+t (o cmd+t)

Step 5

Adesso portiamo il riempimento di questo nuovo livello al 10% ed applichiamo un nuovo filtro da Filtri>Disturbo>Aggiungi disturbo.

Settiamo quindi le opzioni come da immagine:

Step 6

Adesso apriamo l’immagine che vogliamo trasformare nella nostra polaroid, se necessario, ritagliamola e modifichiamo i livelli, in modo tale da renderla più scuro, (facendo risaltare le ombre). Una volta ritoccata, l’immagine è prota ad essere importata nel nostro file di lavoro.

Step 7

Adesso, (se necessario), ridimensioniamola e poniamola al centro del nostro lavoro.

Quindi selezionare una porzione di immagine inferiore e andare su, Immagine>Tonalità>Regolazione>Tonalita/Saturazione, (Ctrl+u o Cmd+u) e portiamo a +100 la luminosità. Cliccate quindi su OK

Step 8

Andiamo su opzioni di fusione del livello immagine e clicchiamo su traccia. Settiamo su dimensione “6″, poszione, “interna” e colore bianco (#ffffff). Adiamo su Ombra esterna e settiamola come da immagine:

Ecco il risultato che si dovrebbe ottenere:

Step 9

Selezioniamo lo strumento testo e digitiamo nell’area bianca, inferiore all’immagine, ciò che desideriamo, (settando opportunamente font e dimensione)

Step 10

Duplichiamo adesso il livello della nostra immagine e ruotiamolo, in modo tale da ottenere questo effetto:

Step 11

Adesso possiamo unire i due livelli ed applicare un filtro finale. Andiamo quindi su Filtri>Disturbo>Polvere e grana e settiamola come da video

Bene oggi vi presento un set di icone per blogger, realizzate prettamente a mano e che quindi potrebbero integrarsi  magnificamente con questo stile. Le icone rappresentano servizi (prettamente utilizzati dai blogger) come Delicious, StumbleUpon, Technorati, Flickr, Digg e icone come RSS, Home, Commenti, Contatti e Wordpress.

Via [blog.spoongraphics.co.uk]

Bene oggi vi presento un set di icone per blogger, realizzate prettamente a mano e che quindi potrebbero integrarsi  magnificamente con questo stile. Le icone rappresentano servizi (prettamente utilizzati dai blogger) come Delicious, StumbleUpon, Technorati, Flickr, Digg e icone come RSS, Home, Commenti, Contatti e Wordpress.

Via [blog.spoongraphics.co.uk]

Vi invito inoltre a prendere visione del nuovo arrivato, TutorialPSD, un nuovo blog entrato a far parte del network di grafhismes, il quale si occupa, (principalmente), di proporre con una discreta regolarità, tutorial riguardanti il famoso software di grafica, Photoshop.

Nick La, sul suo blog personale, WebDesignWall, ha ben pensato, di elencare alcuni dei migliori script, ed è uscita una mega lista, divisa per categorie, che vi riporto qui sotto per intero… buona lettura…

Image Zoom and Popup

Lightbox

You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

Thickbox

Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites (check out the Gap site for a sample).

Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.

jQuery Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the website to view the demos.

Product Slider (demo)

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the Apple – Mac website.

Carousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

YUI Carousel Component

The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).

DynamicDrive – Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

iCarousel – MooTools

iCarousel is an open source (free) javascript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.

Panel Slider

Coda Slider Plugin

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Coda Slide Tutorial (demo)

This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.

Sliding Tabs (demo)

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tabs Tutorial (demo)

Another awesome tutorial from jQueryForDesigners.com to show you how to create a basic tab navigation with jQuery.

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its main purpose is to help out with the creation of simple tab navigation.

Sliding Tabs Tutorial (demo)

A tutorial from Nettuts.com to show you how to create a sliding tab with jQuery.

Scroll to Anchor

jQuery ScrollTo (demo)

A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.

SmoothScroll (demo)

A simple MooTools script that creates smooth scrolling to anchors on a web page.

Animated Scrolling with jQuery

Learning jQuery shows you how to create an animated “scroll to anchor” with just a few lines of code.

Tooltips

jTips (demo)

A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.

jQuery Tooltip Plugin (demo)

Another nice Tooltip plugin.

Tooltip and Image Preview (demo)

A very simple jQuery script that displays tooltip and image preview (I use it on Best Web Gallery).

Accordion

jQuery Accordion (demo)

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com shows you how to create the accordion slider as seen on the Apple website.

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

Flash and Image Text Replacement

sIFR 3 (demo)

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

jQuery sIFR (demo)

A jQuery plugin that does the sIFR for you.

FLIR (demo)

Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

CSS Stylesheet Switcher

A List Apart – Alternative Style

The original stylesheet switcher by Paul Sowden. Believe it or not, this trick was invented in 2001 (not a modern trick after all).

Switch Stylesheets with jQuery (demo)

Stylesheet switcher with jQuery.

MooTools Styleswitcher (demo)

CSS stylesheet switcher with MooTools.

Form Styling

FancyForm – MooTools (demo)

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

PrettyCheckboxes – jQuery

Same as FancyForm, but using jQuery library.

jQuery Selectbox Plugin (demo)

A simple plugin that allows you to replace the form select list with custom styles.

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover with this Javascript and CSS.

jQuery Form Input Example Plugin (demo)

A jQuery plugin that gives user hints on what to enter in the input fields.

Unobtrusive Slider Control V2 (demo)

This script lets you create custom slider controls associated with input fields.

More Form styling links at Noupe.com/css/form-elements…

Form Validation

jQuery Validate (demo)

A very plugin that allows you to build client-side validation and Ajax form.

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

JSValidate (demo)

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.

via|WebDesignerWall

Nick La, sul suo blog personale, WebDesignWall, ha ben pensato, di elencare alcuni dei migliori script, ed è uscita una mega lista, divisa per categorie, che vi riporto qui sotto per intero… buona lettura…

Image Zoom and Popup

Lightbox

You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

Thickbox

Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites (check out the Gap site for a sample).

Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.

jQuery Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the website to view the demos.

Product Slider (demo)

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the Apple – Mac website.

Carousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

YUI Carousel Component

The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).

DynamicDrive – Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

iCarousel – MooTools

iCarousel is an open source (free) javascript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.

Panel Slider

Coda Slider Plugin

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Coda Slide Tutorial (demo)

This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.

Sliding Tabs (demo)

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tabs Tutorial (demo)

Another awesome tutorial from jQueryForDesigners.com to show you how to create a basic tab navigation with jQuery.

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its main purpose is to help out with the creation of simple tab navigation.

Sliding Tabs Tutorial (demo)

A tutorial from Nettuts.com to show you how to create a sliding tab with jQuery.

Scroll to Anchor

jQuery ScrollTo (demo)

A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.

SmoothScroll (demo)

A simple MooTools script that creates smooth scrolling to anchors on a web page.

Animated Scrolling with jQuery

Learning jQuery shows you how to create an animated “scroll to anchor” with just a few lines of code.

Tooltips

jTips (demo)

A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.

jQuery Tooltip Plugin (demo)

Another nice Tooltip plugin.

Tooltip and Image Preview (demo)

A very simple jQuery script that displays tooltip and image preview (I use it on Best Web Gallery).

Accordion

jQuery Accordion (demo)

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com shows you how to create the accordion slider as seen on the Apple website.

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

Flash and Image Text Replacement

sIFR 3 (demo)

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

jQuery sIFR (demo)

A jQuery plugin that does the sIFR for you.

FLIR (demo)

Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

CSS Stylesheet Switcher

A List Apart – Alternative Style

The original stylesheet switcher by Paul Sowden. Believe it or not, this trick was invented in 2001 (not a modern trick after all).

Switch Stylesheets with jQuery (demo)

Stylesheet switcher with jQuery.

MooTools Styleswitcher (demo)

CSS stylesheet switcher with MooTools.

Form Styling

FancyForm – MooTools (demo)

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

PrettyCheckboxes – jQuery

Same as FancyForm, but using jQuery library.

jQuery Selectbox Plugin (demo)

A simple plugin that allows you to replace the form select list with custom styles.

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover with this Javascript and CSS.

jQuery Form Input Example Plugin (demo)

A jQuery plugin that gives user hints on what to enter in the input fields.

Unobtrusive Slider Control V2 (demo)

This script lets you create custom slider controls associated with input fields.

More Form styling links at Noupe.com/css/form-elements…

Form Validation

jQuery Validate (demo)

A very plugin that allows you to build client-side validation and Ajax form.

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

JSValidate (demo)

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.

via|WebDesignerWall

si ringrazia nihonbunka per l’immagine

1. Installa il plugin Wp Super Cache
2. O installa il plugin Wp Cache
3. Comprimi tutti gli eventuali file .js esterni con Cleancss
4. Comprimi il file style.css del tuo tema con Cleancss
5. Se spesso modifichi il file style.css, ricorri a questo ottimo metodo
6. Non utilizzare plugin inutili
7. Hosta le immagini e i file, nei server di ImageShack
8. Non utilizzare temi molto pesanti
9. Pensi ti servano veramente tutti quegli effetti Ajax!? Inizia a dare una pulita
10. Disattiva i plugin che non utilizzi e cancellali dall’ftp
11. Da un ordinata alla tua sidebar, cancellando quegli inutili plugin che ancora non hai capito per quale motivo hai installato
12. Non esagerare con i banner flash, (al massimo hostali nei server dei tuoi clienti!)
13. Rendi statiche le url del tuo tema wordpress. Quindi <?php echo get_settings('home'); ?> diventa http://www.tuahome.it
14. Cancella i link esterni inutili
15. Segui questa ottima guida di computer-acquisti.com
16. Installa eAccelerator, (un acceleratore PHP) seguendo passo passo, la guida ufficiale (in inglese).
17. Oppure installa APC, un altro acceleratore PHP
18. Assicurati un buon servizio hosting, per iniziare ti consiglierei il paccheto big di netsons
19. Importare i file .js e .css, nelle vostre pagine da fogli esterni
20. Installa il plugin Bad Behavior, in questo modo gli spammer non sfrutteranno le risorse dei tuoi server
21. Installa questo ottimo plugin per WordPress. Ti permetterà di velocizzare il tuo blog in maniera veramente semplice.

Se pensi che questa lista sia utile, puoi segnalarla sul tuo blog, citando la fonte ho inserendo questo semplice codice html <a href="http://www.ziosteve.com/blog/velocizzare-wordpress-blogvelocizzare-wordpress-blog">Velocizzare Blog Wordpress</a>; puoi anche abbonarti ai nostri feed RSS, in questo modo, riceverai direttamente sul tuo computer articoli simili, che possono sempre tornare utili.

1. In primo luogo, tengo a precisare che in questa nuova versione, è possibile farsi un idea di cosa sia realmente Android, con un emulatore messo a disposizione, direttamente da Google, disponibile per Windows e Mac Intel. Qui sotto, potete visualizzare un video tutorial, dove vi viene spiegato passo, passo, come attivare l’emulatore di Android su Mac, (l’operazione, dovrebbe essere molto simile anche su windows)

(realizzato da www.ziosteve.com)

2. La Home Screen è completamente cambiata dalla versione precedente e gode di una grafica semplice ma accattivante.
3. Sono state inoltre incluse alcune nuovi applicazione, come: Sveglia, Calcolatrice, Fotocameta, Player Musicale, Visualizzatore di immagini e programmi per messaggiare, con SMS/MMS.

I primi cellulari con Android installato, dovrebbero uscire sul mercato entro il 2008; se invece non volete proprio aspettare, vi segnalo questa guida, scritta da un gruppo di hacker… spero mastichiate qualche cosa di inglese

Cosa ne pensate?

Per inserire alla fine di ogni articolo questo banner, sul tuo blog Wordpress, basta modificare opportunamente il tema, inserendo uno dei seguenti codici. Per problemi, non esitate a lasciare un commento.

<p style="text-align: center;"><a href="url vostro feed rss"><img src="http://www.ziosteve.com/wp-content/uploads/2008/08/rss01.jpg"></a></p>

<p style="text-align: center;"><a href="url vostro feed rss"><img src="http://www.ziosteve.com/wp-content/uploads/2008/08/rss02.jpg"></a></p>
A proposito, perchè non ti iscrivi anche tu ai nostri, di feed rss? Potresti ricevere direttamente sul tuo computer, news, tutorial, video tutorial e molto altro ancora, in maniera completamente gratuita.

Dopo aver parlato dei tutorial di PsdTuts, oggi parliamo dei video tutorial, grazie ai quali, si possono apprendere gli applicativi più svariati, in modo semplice, veloce e pratico. Ma questo genere di materiale, è tanto prezioso, quanto raro.

Ben presto però Dynamick, aprirà una nuova rubrica, che ogni settimana, (il giorno preciso è ancora da prefiggere), metterà a disposizione dei video tutorial dedicati, al famoso software di casa Adobe, Photoshop, versione CS3.

Io collaborerò a questa iniziativa e non nascondo di esserne contento. La pubblicazione vera e propria avverrà (si spera), entro la prossima settimana. Vi invito quindi a tenere d’occhio questo blog, www.dynamick.it, in questi giorni, perchè le soprese stanno per arrivare !!!

Per ogni genere di dubbio o curiosità, non esitate a lasciare un commento (vi ricordo, che abbiamo liberato questo blog dal nofollow). ]]> http://www.ziosteve.com/altro/video-tutorial-tanto-preziosi-quanto-rari/feed/ 0 http://www.ziosteve.com/altro/psdtuts-guardate-che-spettacolo/ http://www.ziosteve.com/altro/psdtuts-guardate-che-spettacolo/#comments Thu, 24 Jul 2008 07:15:59 +0000 ZioSteve http://www.ziosteve.com/?p=33

Sta crescendo molto in quest’ultimo periodo e probabilmente i photoshoppisti più appassionati, gia lo conosceranno. Stò parlando di PsdTuts, che mette a disposizione gratuitamente, tutorial per Photoshop, professionali, dettagliatamente descritti e completi.

Non si smette mai di imparare e grazie a questo blog, potremo imparare procedure, per realizzare effetti spettacolari e degni di un professionista.

Inoltre, se anche voi avete qualche idea per realizzare tutorial dedicati al software di casa Adobe, non esitate a scrivere per PsdTuts, che vi paga ben 150$ a tutorial.

Qui sotto, il risultato finale, di uno dei tutorial che mi ha maggiormente stupito: