Ho creato questo programma scaricabile gratuitamente dal mio sito web, il programma fatto con poche righe di codice consente di inserire nel proprio sito dei tabs verticali con del testo nascosto che si aprono  per visualizzare del contenuto.

Per poterlo utilizzare bisogna scaricare un apposito plugin che permette di gestire delle funzioni avanzate di jquery, il plugin in questione si chiama easing ed è facilmente reperibile da questo sito web

Il plugin permette di dare un’animazione particolare al testo che si apre.

Gli effetti che possiamo dare modificando un parametro sono questi:

easeOutBounce

easeInOutExpo

easeOutCirc

easeOutElastic

Cambiando uno solo di questi parametri all’interno delle righe di codice che ho inserito nel file zip vedremo diversi comportamenti dello sliding.

Il programma gratuito è scaricabile da questo sito di realizzazione siti web

Pronti per la seconda lezione?

Nella prima abbiamo visto come importare la libreria jquery all’interno del nostro sito web e fare comparire, una volta caricato tutto il sito, un bel popup.

Jquery come è stato detto interviene direttamente sul dom del nostro sito andando ad intervenire sui selettori css.

Ecco il nostro primo programma della scorsa lezione:

$(document).ready(function(){

alert(‘questo è il mio primo programma in jquery’);

});

Come abbiamo ripetuto $ sta per jquery, come dice il codice “parlante” sta ad indicare: Quando il documento è pronto attiva la funzione sottostante, cioè l’alert.

Tutto questo può essere ancora di più abbreviato in questo modo:

$(function(){

alert(‘questo è il mio primo programma in jquery’);

});

Fantastico vero?

Ora vediamo come modificare una classe di un determinato elemento all’interno del codice html

Supponiamo che abbiamo nella nostra pagina web un paragrafo <p>

All’interno di questo paragrafo vogliamo modificare il colore del testo.

$(function(){

$(‘p’).css(‘color’,'red’);

});

Tutte le scritte contenute all’interno del paragrafo p saranno di colore rosso

Il nostro cliente ci ha commissionato una modifica sul sito web, tutti i caratteri in grassetto su una sola pagina dovranno essere più grandi e di colore rosso.

Il testo contenuto tra i tag <strong></strong> è ripetuto circa una settantina di volte.

Dovremmo quindi andare a creare una classe con le caratteristiche che ci ha detto il nostro cliente ed andare a modificare manualmente tag dopo tag aggiungendo la classe.

Un lavoro noioso, che ci richiede del tempo e che non ci da la garanzia di farlo correttamente , in quanto potremmo saltare qualche tag.

Jquery ci viene in aiuto.

All’interno della pagina da modificare creiamo questo codice.

$(function(){

$(‘strong’).addClass(‘grassetto’);

})

Ecco quindi che il testo contenuto all’interno del tag strong sarà del colore e delle dimensioni che il vostro cliente vi avrà detto di fare, con due righe di codice e senza nessun margine di errore.

Jquery ha aggiunto a tutti i strong la classe grassetto che abbiamo creato nel nostro foglio di stile.

Per rimuovere la classe in questione invece faremo la stessa cosa ma con la proprietà

$(‘strong’).removeClass(‘grassetto’);

Quali sono le parole più ricercate nel 2011?
Goggle, il motore di ricerca per eccellenza ci viene in aiuto con google Zeitgeist, un fantastico prodotto messo a punto da Google per darci le indicazioni sulle parole più cliccate, strumento molto caro ai SEO per pianificare la propria campagna di indicizzazione di un sito web.

In Italia la parola più ricercata nel 2011 è stata Marco Simoncelli se si parla di persone, la sua scomparsa è ancora viva nei nostri ricordi.

Da questo interessante programma possiamo anche , in un certo senso, dare una fotografia degli italiani vista in chiave web.

L’italiano internauta  è quindi visto cosi:

Non sa cosa vogliono  dire LOL e Tamarro;

Ha sognato donne incinte e di perdersi;

Ha paura di sbagliare e di vivere;

Vule sapere come fare uno screenshot al pc e tanti soldi;

Si è interessato di Melania Rea e di Alberto Sposini

Ha guardato le recensioni di Fast & Furius 5 e Il Grinta;

Voleva cucinare una CheesCake e la pasta di zucchero;

Musicalmente ha cercato il termine Benvenuto e Arriverà.

Una statistica di cosa ha fatto l’italiano sul web la potete trovare a questo indirizzo

Ah, il sito è stato interamente sviluppato in HTML 5 e se lo fa google…..

Innanzitutto un buo anno a tutti, non scrivo spesso , ma volevo iniziare l’anno nuovo con un tutorial su jquery.

Il mio obiettivo sarà quello di farvi capire con parole non troppo tecniche la programmazione in jquery, e vorrà essere anche un libro online di appunti personali durante il mio studio di questo fantastico linguaggio.

Iniziamo:

Che cosa vi serve per iniziare questa nuova avventura con questo fantastico linguaggio di programmazione?

Conoscere:

css , html ed avere un’infarinatura anche semplice di programmazione.

Sapere quindi cosa sono i selettori, cos’è il DOM e che cos’è un if vi aiuteranno in modo ancora più semplice ad imparare con più velocità.

Che cos’è jquery?

Jquery è un linguaggio di programmazione che permette di rendere interattivo il vostro sito web creando affascinanti gallery/animazioni o controlli complessi su form, in una sola parola, jquery è una potente libreria che darà un’esperienza unica al vostro visitatore.

Si pensi ad esempio ad un effetto light box , ad una gallery animata, ad uno slide di immagini oppure ad un controllo sul form per invio dei dati , tutto questo viene eseguito anche con jquery (ma non è l’unico modo per farlo)

Jquery ad esempio ci viene utile anche per creare siti web fruibili anche da i-phone andando a sostituire animazioni in flash (non supportati dal dispositivo della Apple)

Vi può bastare?

Eccone un esempio di quello che può fare:

Photo Gallery in jquery

La prima cosa che dovete fare per poter prorammare è scaricare la libreria dal sito web ufficiale, sempre aggiornata:

Scaricabile da qui: Jquery library

La seconda cosa da fare , una volta scaricata è inglobarla all’interno del vostro sito web in questo modo:

<script type=”text/javascript” src=”jquery-1.6.4.js”></script>

da inserire prima della fine del tag </head>

In questo modo avrai all’interno del tuo sito web la libreria per poter iniziare a programmare.

La prima cosa da sapere quando iniziamo a programmare con jquery è a cosa serve il simbolo $

Il simbolo $ altro non è che il semplice sostituto della parola jquery da utilizzare prima di un selettore.

Si userà moltissimo all’interno di un programma quasi fino alla noia, ecco perchè è nata l’idea di sostituire la parola jquery con il simbolo $ , molto più veloce da digitare.

JQuery(‘p’).css(‘color’, ‘red’);

Rimane in questo modo:

$(‘p’).css(‘color’,'red’);

Con questa semplice riga di codice andiamo ad intervenire direttamente sul dom del sito web come faremmo con i CSS.

Risultato:

Tutto il testo contenuto tra <p> sarà di colore rosso.

Messo cosi però all’interno del sito web prima del tag </head> non funzionerebbe.

Infatti essendo un codice script andrà inserito tra questi tag

<script type=”text/javascript”></script>

Inoltre per funzionare a dovere il codice che abbiamo creato la pagina dovrà essere completamente caricata.

Pensiamo infatti se questo paragrafo <p> è nell’ultima parte del sito web, e lo script invece si trova ad inizio pagina. Non succederà nulla.

Per ovviare a questo dovremmo inserire il codice tra queste righe

$(document).ready(function(){

alert(‘questo è il mio primo programma in jquery’);

});

Cosi facendo quando la pagina sarà tutta caricata il jquery inizierà a leggere le righe interne ed un splendido alert comparirà sulla nostra pagina.

Per ora terminiamo cosi, a breve il prossimo passo.

Questa è la fatidica domanda che si pone ogni web designer alle prime esperienze?
Risposta veloce se non avete tempo di leggere tutto…. Meglio averli entrambi.
Però facciamo prima un passo indietro…

E’ da molto tempo che mi attirava l’idea di avere in casa un prodotto della Apple che non sia un i-phoneo un i-pod, ma un vero e proprio pc.

Cosi dopo 20 anni di anarchia Microsoft mi sono preso lo sfizio due settimane fa di comprarmi un bellissimo i-mac da 27″ per poterci sviluppare i miei siti web e fare del fotritocco (il monitor mi sono accorto dopo è veramente esagerato)

Mi ci sono subito trovato a mio agio tranne per un paio di cose con cui bisogna prendere confidenza.

La prima è l’uscita dalle applicazione, la seconda è la navigazione tra le mille cartelle aperte che generalmente tengo sul mio pc (server web, cartelle siti sul desktop, varie finestre di firefox aperte).

Semplicissimo, per la prima non basta cliccare la x, ma bisogna proprio andare sul dock ed uscire dal programma per il secondo c’è expose che è una cosa veramente spaziale (fa vedere tutte le cartelle parte permettendo la navigazione).

Ritorniamo a noi, Mac…. o non Mac per fare siti web.

Allora i programmi  come  Photoshop funzionano a meraviglia, si aprono in un secondo e non ci sono crash di sorta.

Per il web ho abbandonato Dw ed attualmente sto usando Aptana che però mi da qualche problema sul funzionamento ed ha secondo me un fastidioso sfondo nero, ma permette di gestire facilmente siti interi con annessi file php, js e css ed altre diavolerie.

Quindi….ho tutto il necessario per lo sviluppo.

Un pc velocissiomo, un sistema stabile, nessun rallentamento, ho fatto diverse disinstallazioni di programmi e tutto funziona come il primo giorno, direi fantastico, nell’Hw e nel design. Un monitor ed un filo. Ho tutto quello che mi serve davanti a me nulla di più nulla di meno.

Lato pratico, ho tutti gli strumenti per sviluppare, ho un sistema stabile, ma poi come testiamo il risultato su IE e su altre Browser che girano su Windows?

Abbiamo due alternative valide senza dover cambiare pc:

La prima è quella di cercare sul web un sito che emula più browser e che mi renderizza il sito web sul server visualizzato da diverse macchine e da diversi browser (ma dobbiamo però averlo online quindi con i disastri visibili)

La seconda è quella di installare windows su Mac come macchina virtuale, per ora non l’ho fatto, perchè se sono passato a Mac è proprio per non vedere più Windows.

La terza ed ultima è quella di avere un pc dedicato al test, anche non veloce ma con montati tutti i browser disponibili ed utilizzati e qualche IE vecchio.

1)E’ quindi conveniente sviluppare su Mac ed investire diverse centinaia di euro per fare il grande passo?

Si, dimenticherete Windows in 3 giorni.

2)Costruisce codice sporco che non funziona su Windows?

No, se lavorate in ambienti professionali, il codice lo metterete voi non il programma.

3)Quindi creo il sito web e lo metto online senza errori?

No, un sito va testato su diverse piattaforme e su diversi browser, serve un sistema windows su cui visualizzarlo per vedere se i nostri css girano al meglio, ma qui non stiamo parlando di sviluppo ma di test che va fatto anche se utilizziamo Windows come piattaforma di sviluppo.

4)Quindi mi consiglieresti di passare a Mac?

Si, ma tenendo un pc su cui testare i siti web montato con quanti più browser potete.

Ho scritto questo post perchè ci sono diverse idee controcorrente e molti dubbi sul web, io faccio anche fotografia ed il mac con il suo monitor ad alta definizione è veramente una manna dal cielo.

Ecco il pensiero di uno scettico che ora si è convertito alla nuova religione Mac, perchè sarà anche una favola estetica, ma è un prodotto ottimo.

Maccanizzatevi senza problema quindi.

A tutti piacerebbe sapere nella vita comune chi parla di noi e cosa dice, google ci da questo strumento.

Google Alert.

Che cosa bisogna fare per utilizzare questo prezioso strumento?

Semplicissimo, basta registrarci a google o semplicemente avere gmail ed entreremo nel fantastico mondo di google.

Troveremo quindi un pannello molto semplice su cui inserire 5 variabili.

• La prima, quella più importante, è proprio quella dell’argomento specifico che vogliamo inserire (ad esempio il nome del nostro blog o del sito a cui stiamo curando la parte seo)
• Il secondo punto in quale settore vorremo prendere l’informazione (se da un sito di news, da un blog, da video, da aggiornamenti, da un forum di discussione oppure semplicemente da tutto )
• La cadenza della mail, se giornaliera o settimanale
• Che tipo di risultati trovare, se i migliori o tutti
• Ed infine l’inserimento della mail a cui verrà recapitata

Semplicissimo ed immediato direi.

A cosa ci può servire tutto questo?

In ambito Seo ci è utilissimo per vedere se qualche directory ci ha linkato o se quell’azione virale ha dato i frutti sperati, oppure se ci retwittano un nostro post.

Potremo in questo caso monitorare chi parlerà di noi ed in che modo, tenendoci costantemente aggiornati se l’azione che abbiamo intrapreso a livello di link popularity sta funzionando oppure no.

Un piccolo appunto, personalmente eviterei di mettere la query  link:http://nostrosito.com in quanto non ci viene fornita una lista completa di siti che ci linkano, piuttosto prenderei un termine genereico come il nostro nome o il nostro sito che abbraccia molti più riferimenti sul web (nel mio caso bd-webdesign).

Comodo vero?

Praticamente abbiamo un nostro robottino che scandaglia la rete in cerca delle informazioni che desideriamo.

Io la applico in ambito seo e voi che esperienze avete avuto con google alert?

Come sempre i miei post parono sempre da una domanda che mi pongo.

A chi non piacerebbe far aumentare le visite al proprio blog in modo semplice senza perdere tantissimo tempo a fare prove SEO diventando matti e perdendo la vista consumata davanti al picci ?

Io mi metterei in fila.

Allora, come sicuramente avrete letto su tantissimi blog è importantissimo scrivere materiale di qualità (e si intende che quando parlo di qualità non parlo del font ricercato e particolarmente bello), evitando i soliti listoni di siti che propongono collezioni jquery e gallerie varie  sia in jquery che in flash (grazie dell’impegno, sono utilissimi ma ce ne sono tantissime in giro ed a volte ripetute tra più blog).

Una volta iniziata la strada dell’articolo originale , mai abbandonarla, piuttosto meno articoli , ma più qualitativi.

Il titolo deve essere accattivante, deve ovviamente rispecchiare ciò che l’articolo tratta.

Qui andrebbe aperta una parentesi grande come una diga.

Come scelgo un titolo valido?

Innanzitutto dobbiamo entrare nella testa dei nostri utenti e pensare come un motore di ricerca, in quanto se il nostro blog sarà creato con wordpress o joomla ed opportunamente settato con tutti i criteri seo oriented, il titolo si trasformerà in un fondamentale punto di ricerca da parte dei nostri motori.

Guardate il mio che ho usato. Dite che scaturirà interesse?

Quanti utenti vorranno fare decolarre il loro blog?

Quanti utenti cercheranno nel web questa frase nella speranza di trovare la pozione magica per attrarre 1000 utenti in un colpo?

Altra cosa che dobbiamo fare a livello seo è abilitare rss del proprio blog e permettere ai nostri utenti di sottoscrivere alle news, per essere sempre aggiornati e per ricordar loro che esistiamo, argomento che poi approfondiremo meglio.

Altro vantaggio dell’ rss è una maggior velocità da parte di google di indicizzarlo.

Un altro valido espediente da utilizzare è fidelizzarsi gli utenti tramite facebook e twitter, associamo il nostro blog ai due social network per farci conoscere e vedrete che se troveranno interessanti i nostri contenuti il link del nostro articolo inizierà a girare facendoci tantissima pubblicità.

Eccoci quindi al nocciolo del discorso.

Mi è capitato di postare nel mio blog in orari dove le persone normali sono già nelle braccia di morpheo  quindi in automatico i post vengono riversati su twitter e facebook.

Quanto potranno essere visibili quindi questi articoli  in un blog nuovo che ha pochi contatti giornalieri?

Direi veramente nulla.

Ecco quindi l’importanza strategica di cercare un orario di punta dove questi social network sono particolarmente affollati e dove più persone possibili possono vedere il nostro scritto e scoprire quindi il nostro blog.

Ma shhhh non ditelo a nessuno .

E voi invece quale tecniche pubblicitarie usate per promuovere il vostro blog?

Come ogni buon web designer si arriva prima o poi alla fatale richiesta:

Ma tu riusciresti a portarmi tra i primi posti se metto in google questa parola chiave?

Attimo di silenzio.

Si inizia a pensare in quanto tempo potrei apprendere questa tecnica, quali siti ho visto, quali ho in archivio, quanto potrebbe risultare difficile, quali risultati potrei dare.

Dopo un breve mmmmmm che sa molto di incertezza, guardi negli occhi il cliente che attende la risposta e fai uscire un timido : Si???????  SI!

E poi ne esce: certo i risultati non sono assicurati perchè google cambia spesso i suoi criteri, perchè a volte un forte inserimento di parole chiave può fare penalizzare, perchè comunque bisogna sempre seguire il corso dell’indicizzazione e ci vuole tempo e pazienza, e tante altre stupende scuse inventate ad hoc al momento.

Cosi da questa richiesta che è stata fatta tempo e tempo fa, ne è nata prima una sfida e poi quasi una passione (olè altra cosa da studiare e da inserire nella mia moleskine).

Ma che cos’è lo studio che ne sta dietro a tutto ciò?

SEO da cui il nome  mi fa ricordare una stupidissima barzelletta dell’infanzia ” SEO PER SEO TRENTASEO ” che invece altro non è che un abbreviazione di SEARCH ENGINE OPTIMIZATION , detto tra noi (come ti frego gooogle)

Gira che ti rigira durante le mie interminabili ricerche  approdo ad forum, per me  il più autorevole, quello di Giorgio Tave.

E da li inizia lo studio ed il confronto con tanti altri utenti appassionati di SEO

Dopo qualche oretta di navigazione compulsiva, approdo al libro di Giorgio Taverniti, SEO Essere visibili sui motori di ricerca.

Interessante penso, cavolo, questo ne sa, penso.

Occhio al prezzo, 14 euro?

Ma si, prendiamolo al massimo ho buttato via 14 euro.

Appena mi arriva il libro subito mi rimane impresso lo spessore, cavolo se c’è vento e non mi piace non riesco neanche ad usarlo come ferma porta penso.

Dopo una prima lettura, mi sono ricreduto.

Il libro è si molto concetrato ma le nozioni spiegate vengono descritte  in modo approfondito e molto molto tecnico.

Il linguaggio è semplice, si va al dunque con esempi concreti, si prendono in considerazione test effettuati, si spiegano le basi e si va oltre, si spiega cosa bisogna fare e cosa NON bisogna fare.

Ho trovato in queste 173 pagine il concentrato di molte sue esperienze reali, e ricchissimi spunti su cui proseguire nel suo forum.

Insomma devo dire che il libro è veramente valido, di certo come tutti i libri non vi farà diventare un esperto SEO, ne tanto meno quello di Harry Potter un mago, ma sicuramente vi darà le basi per poter iniziare a lavorare in questo mondo vastissimo.

Attendo ulteriori tuoi libri.

CONSIGLIATISSIMO (non mi ha pagato ne tantomeno lo conosco di persona)

Voi invece che rapporti idilliaci avete avuto con la SEO?

Avete intenzione di approfondire l’argomento?

E se si con che testi avete avuto modo di studiare?

Dopo un periodo di latitanza purtroppo forzata rieccomi a scrivere in questo accumulo disordinato di idee.

Ci stavo pensando prima, volevo fare questa domanda in qualche forum di spessore, tematico sul web design ed invece eccomi qui a scrivere un post.

Ok, scrivo in un blog, quindi dovrei fare la parte di quello superespertissimo che sa tutto su come realizzare un sito web….. e forse anche di più, visto che sto cercando di condividere con i miei letturi vari imput.

Invece la tecnologia va avanti, quello che una volta andava di moda, ora non si usa più, flash sta per essere quasi rimpiazzato da jquery (ed allora tutti a studiare jquery) i css3 sono alla porta in attesa del benestare del sommo w3c e l’html5 si accoda a quest’ultimo (ed insieme ne prometteranno delle belle)

Vabbè, ritorniamo a noi.

Quindi nel web design come nella programmazione bisogna essere aggiornatissimi (per non parlare del SEO) , sempre alla ricerca nel web, sempre alla ricerca di tutorial e di siti interessanti, blog da seguire, appunti da prendere.

Eccoci siamo arrivati al punto.

Appunti da prendere.

Io purtroppo per mia sfortuna, sono molto disordinato (dicono sia sinonimo di creatività), ho il desktop del mio povero pc con tante di quelle cartelle che si potrebbe giocare a Risiko, ma nel mio disordine riesco a ritrovare sempre tutto.

Ecco quindi come mi sono organizzato:

1) Google Reader con tanto di abbonamento ai feed dei blog più interessanti italiani e non.

2) Cartella sul mio desktop divisa per sottocartelle con script jquery e moduli o componenti di joomla

3) Una lista pressochè infinita di siti divisi per argomenti salvati nel mio segnalibri di Firefox. ( e vi giuro che è veramente infinita) dove sono sparsi qua e la siti con script o tutorial che mi sono serviti nel corso dei miei studi.

4)Una Moleskine da 14 euro.

Ora mi vorrei soffermare su questa Moleskine.

Inizialmente l’avevo presa per portarla sempre con me da un possibile cliente e prendere gli appunti, ma mi sono accorto che era adatta a prendere appunti “duraturi” nel tempo e quindi l’ho reinventata a quaderno degli appunti da piccolo chimico dell’html.

Ecco quindi dove prendo i miei appunti (che passano da esperimenti seo fino ad un elenco di siti dove prelevare qualche script interessante o qualche appunto di jquery) .

Perchè la scelta di un quaderno?

1) Il contatto con la carta mi piace, posso portarmelo sempre in giro e se mi frulla qualche cosa nel cervello lo appunto.

2) Quando scrivo in automatico lo memorizzo.

3) E’ come un libro con la sua praticità e  lo posso rileggere in posti impensabili (no li no)

Voi invece come fate a prendere appunti? Li prendete? Avete anche voi una lunga lista di siti nel vostro segnalibri di Firefox?