Risorse Web per i Developer e Designer

1) Come creare Bottoni in stile Media Player

Tutorial di Photoshop che illustra la procedura per realizzare pulsanti in stile Windows Media Player 11.

2) Esempio di Layout Orizzontale

La moda del layout Orizzontale sta dilagando. Questo esempio può essere utile per analizzarne i pro e contro.

3) Creare form Html

Un servizio web 2.0 molto valido in grado di crearci il codice html di Form. Non dovremmo fare altro che selezionare le nostre preferenze: colore, quantità di campi, dimensioni ecc. ecc.

4) Creare effetti Javascript con Moo.rd

Moo.rd è una libreria Javascript molto potente e utile basata sul framework Mootools. Molti degli script che vengono pubblicati su questo blog, sono realizzati tramite moo.rd.

5) Scaricare Icone, Immagini e ClipArt vettoriali gratis

JuliusDesign presenta un elenco di 50 link a siti dove poter scaricare tante risorse vettoriali gratuitamente. Imperdibile per i Web Designer e bloggers: si trova davvero tanto materiale utile.

Trucchi per Blogger

Nonostante Blogger sia di proprietà di Google, quest'ultimo non gli dedica tutto il supporto dovuto per fare una concorrenza seria alle altre piattaforme. Gli ultimi aggiornamenti non hanno soddisfatto granchè gli utenti, e chissà quando verranno rilasciati i prossimi.

Vediamo di migliorare alcuni parametri per aumentare la visibilità sui motori di ricerca.

Come inserire il titolo del post come titolo della pagina

Questo trucco permette una migliore indicizzazione da Google. Infatti normalmente sul titolo della pagina viene visualizzato il titolo del Blog, e poi quello del post. In questa maniera verrà mostrato solo il titolo del post, che contiente molte keyword e quindi avrà più possibilità di salire tra i risultati.

Accedi alla tua bacheca, vai su Layout e Modifica Html. Tra le prime righe di codice dovresti trovare questo codice:
<title><data:blog.pageTitle/></title>
cancellalo, e al suo posto copia e incolla questo:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.title/></title>

<b:else/>

<title><data:blog.pageName/></title>

</b:if>

Mostrare solo l'immagine dell'header, e nascondere il titolo del blog.

Molti utenti preferiscono, come io, inserire nell'header una bella immagine jpg, piuttosto che lasciare il normale titolo del blog in testo h1. In tal caso scegliendo questa soluzione si perde qualcosa in termini di indicizzazione. L'ideale è inserire l'immagine come sfondo del div che contiene l'header e "nascondere" l'h1 dalla grafica, ma renderlo sempre visibile per Google.

Il codice css a cui dobbiamo fare riferimento cambia da template a template, quindi non posso dirvi quale classe specifica modificare. Ma vediamo di arrangiarci.

Accedi alla sezione Modifica html e cerca #header. Subito dopo il primo }, inserisci questo codice:
#header h1 {text-indent:-10000px}

Aumentare la percentuale di keyword importanti

Possiamo realizzare lo stessa tecnica del titolo, anche sulla descrizione del Blog. Prima di tutto è da notare che la maggior parte dei template scrive la descrizione come semplice testo, ma se inseriamo una descrizione con tante keyword, la impostiamo in h2 e la nascondiamo, possiamo ottenere dei buoni risultati su Google.

Sul codice Css #header h1 di cui abbiamo già parlato sopra, apporta questa modifica:
#header h1, h2 {text-indent:-10000px}

Dopo aver salvato, spunta la casella Espandi i modelli widget, e cerca la scritta:

class='description'

Il tag contenente questa classe dovrebbe iniziare con p, sostituiscila con h2, e accertati che anche la chiusura del tag sia in h2.

Tutti questi trucchetti aumenteranno sicuramente la tua posizione su Google, non subito ovviamente, i risultati incominceranno a vedersi dopo qualche settimana.

Nei prossimi post vedremo altri trucchi. Mentre se hai qualche problema nell'applicarli, non esitare a chiedere aiuto, siamo qui per questo.

2° Mese: alcune considerazioni

Sembra ieri quando ho deciso di aprire questo blog, e invece sono già passati 2 splendidi mesi. Questa nuova "experience" mi sta portando tante soddisfazioni: sto conoscendo tante persone nuove, le mie conoscenze sul developing e design sono sempre maggiori, e scopro ogni giorno angoli del web di nicchia che prima mai avrei potuto conoscere.

I risultati del blog sono molto soddisfacenti: Google Analitycs segna una costante crescita, e da qualche settimana, grazie ad un piccola modifica alla struttura del codice del template, il Blog è parecchio salito sulla serp di Google, e di conseguenza gli accessi provenienti dalle ricerche sono tanti ogni giorno. Buona parte dei post risulta tra i primi risultati per le querry di ricerca con domande relative al developing, e FeedBurner.com mi segnala ogni giorno tanti lettori ai Feed.

Insomma, tante soddisfazioni! Ma purtroppo il tempo non basta mai: lavoro, impegni e vita sociale. Infatti vorrei poter riuscire a scrivere un post al giorno, ma non sempre è possibile, non tanto per scriverlo in se stesso, ma per quanto riguarda lo studio che ne faccio prima che porta via tanto tempo: realizzazione del codice o video, semplificazione, realizzazione grafica, ottimizzazione ecc. ecc.

Ringrazio di cuore chi segue il Blog, chi porta il suo contributo con i commenti o con i voti ai post, e chi si limita solo a leggere, chi mi ha segnalato gli errori che ho commesso, e chi mi ha suggerito alcuni consigli, chi mi ha aggiunto al suo BlogRoll nel suo Blog e chi mi chiede aiuto via email..insomma..tutti i presenti!

Approffito del post per fare una proposta. Chi ha qualche idea per qualche speciale collaborazione, iniziativa, partnership o altro, mi contatti. Da Settembre vorrei poter realizzare qualcosa di nuovo in collaborazione con altri Blog, quindi se siete interessati o conoscete qualcuno che lo è, o avete link da segnalarmi, fatemi sapere!

Creare l'effetto riflesso su un' immagine e testo

Nell'era del web 2.0 l'effetto riflesso la fà da padrona. Per realizzarlo basta un minuto su Photoshop, vediamo come.

Sul video potrai seguire passo passo le procedure, mentre per i dettagli tecnici consulta il post qua sotto.

Guarda l'esempio.

1) Inserisci un testo o un'immagine, e dagli una leggero riempinto sfumatura su opzione di fusione.

2) Crea un nuovo livello, seleziona un'ovale a metà del testo o immagine, riempilo di bianco e imposta l'opacità a circa 10 o 20%;

3) Duplica l'immagine, capovolgila, mettila sotto l'originale e dagli una sfumatura alta che finisca col bianco o con un colore uguale allo sfondo della pagina web.