Questo tutorial molto dettagliato ti aiuterà a capire come inserire delle meta informazioni all’interno delle immagini che inserisci nel tuo sito o blog, per aumentare le informazioni che offri ai motori di ricerca e anche allo stesso lettore.
Se userai questo metodo, hai buone possibilità di ottenerne un miglioramento nei risultati di ricerca, come google immagini.

Ecco di seguito tutti i dettagli.

Vuoi posizionarti anche su Google immagini? Ecco come fare

Ti racconto una breve storia per capire i vantaggi di consultare e usare a tuo favore questo tutorial che troverai qui sotto.

Nel mio blog sul cinema, avevo deciso di inserire una fotogallery sulle anteprime dei film che i miei collaboratori andavano a vedere come inviati speciali.

Il plugin che ho usato, mi permette anche di inserire delle meta informazioni, utili perchè ho la possibilità di posizionarmi nei motori di ricerca verticali come google immagini o simili.

Altro vantaggio da non sottovalutare nell’uso delle meta informazioni su un blog wordpress, è che puoi usarle per personalizzare le gallerie e offrire maggiori informazioni al lettore.
Puoi aggiungere ad esempio il nome dell’attore o del regista, mentre si sfogliano le varie fotografie.

Visto che collaboro con ragazzi che partecipano a delle anteprime di film, e la mole di immagini che dovevo caricare e modificare a mano diventava davvero insostenibile per me, un mio autore appassionato di fotografia, ha deciso di spiegare agli altri ragazzi dei blog, come aggiungere da soli queste meta informazioni all’interno dell’immagine, nelle foto scattate durante questi eventi.

E’ uscito fuori questo tutorial molto preciso, che ho deciso di rendere pubblico e gratuito.

Come aggiungere le meta informazioni in un’immagine usando questo software gratuito?

di Pasquale Mesiano autore e inviato speciale per cinemio.it

In questo tutorial scoprirai che tipo di software scegliere per editare le tue foto per inserirle nel tuo sito o blog oltre che segnalarti come didascalizzare, ridimensionare e rinominare le varie immagini seguendo un percorso a passaggi successivi.

Purtroppo non esiste un software preinstallato su piattaforma Windows (XP o 7) ne su piattaforma Mac, in grado di fare contemporaneamente (e soprattutto in pochi passaggi ) ciò che servirebbe a noi.
Diverso il discorso per Linux che in teoria ha tutto il software (libero) del mondo, ma suppongo che pochi di noi usino abitualmente Linux.

Ho pensato quindi che la cosa migliore, soprattutto per chi è alle prime armi con i software d’ archiviazione fotografici, sia scaricare dalla rete un programma semplice, gratuito e facile da usare.

La scelta è ricaduta su XnView, uno dei software che uso abitualmente.
Per chi non lo conoscesse, insieme a Gimp, è il free software più usato (anche da professionisti del settore), per:

• editare,
• visualizzare,
• trasformare,
• convertire,
• ma soprattutto archiviare foto.

Qui sotto trovi tutti i passaggi per capire come usare il programma.

Passo 1: Scarica e installa il programma

Ecco i link da dove puoi scaricarlo.

• Per Windows XP e 7

(clicca sul grande bottone verde con scritto Download Now. Gli altri lasciali perdere )

• Per Mac o Linux.

Ora non ti rimane che scaricare e installare il programma.

Passo 2: Come didascalizzare le immagini

Crea due cartelle sul desktop (vedi l’esempio qui sopra):

• una dove aggiungerai le immagini scelte che puoi nominare “Foto originali”,
• l’altra dove verranno messe le immagini una volta editate e che chiamerai “Foto da pubblicare” e dove saranno presenti le foto una volta editate.

Avvia XnView (icona con l’occhione giallo e rosso sul desktop).

Come vedi dall’immagine qui sopra, la schermata di XnView si divide in due parti:

• la prima a sinistra
  (dove avrai l’opportunità di navigare tra le cartelle);
• una seconda a destra
  (dove potrai visualizzare le foto in gruppi o singolarmente).

Naviga tra le cartelle nella parte sinistra dell’interfaccia per trovare la cartella dove hai posizionato le tue foto da editare.
Ti appariranno ora sulla destra le foto che hai aggiunto nella cartella in ordine nominale.

Seleziona una foto con un singolo click (adesso avrà un contorno azzurro), e poi digita contemporaneamente “ctrl+i”, si aprirà la tabella dell’IPTC della foto (cioè i dati a corredo della foto).
In alternativa puoi cliccare col tasto destro del mouse sulla foto e scegliere nella finestra a tendina “Modifica dati IPTC”.

Come vedi si apre direttamente nella tab che vogliamo, cioè “Didascalia”.
Non ci resta ora che aggiungere il nome della persona ritratta (nel nostro caso mettiamo ”nome_cognome” ) nel campo bianco sotto la scritta “Didascalia”, quindi clicchiamo su “Scrivi” in basso a sinistra (vedi esempio qui sotto).

Ripeti queste operazioni per ogni foto.
Se hai più foto con la stessa didascalia basta che le selezioniate tutte, quindi digita “ctrl+i”, e una volta didascalizzata una, clicca su “Scrivi tutti i selezionati” che ti apparirà accanto a “Scrivi”.

Nota bene: non lasciare spazi tra le parole della didascalia, ma aggiungi un trattino (preferibilmente “_”  o “-” ) per motivi di indicizzazione (google preferisce così; a quanto pare con questo sistema la ricerca risulta facilitata).

Seleziona tutte le foto e digita “ctrl+u” in contemporanea (o in alternativa tasto destro del mouse sulle foto e dal menù a tendina clicca su “conversione…”).

Passo 3: Come ridimensionare e convertire in jpg più immagini

Scegli la cartella dove verranno indirizzati i file che XnView provvederà a ridimensionare.
Basta cliccare sul bottoncino coi tre puntini, navigando nelle cartelle dal menù che salterà fuori.

Se i file caricati non sono in formato “jpeg”, seleziona dal “JPG – JPEG / JFIF” dal menu “Formato”, in modo da convertirli.

Sempre dalla stessa finestra “Conversione multipla di file” cambia Tab e passa a “Trasformazioni”.

Dalla serie di voci in colonna sulla sinistra seleziona “Imposta DPI” e quindi sul pulsante aggiungi (Questo farà passare la voce “Imposta DPI” nel menu a destra); segui la stessa procedura con “Ridimensiona immagine” per importarlo a destra.

Rimani posizionato su “Ridimensiona immagine e imposta in “Parametri” la “Larghezza” delle foto (nel nostro esempio: 800 px).

Nota bene: In realtà dovresti settare 800 alla voce”Larghezza” solo per le foto orizzontali, e ripetere l’operazione per le foto verticali mettendo 800 alla voce “Altezza”, ma è meglio non complicarci troppo la vita, dato che spesso e volentieri le foto sono orizzontali.

Adesso clicca alla voce “Imposta DPI” sul menù di destra (diventerà blu) e nella sezione “Parametri”,  inserisci il valore 72 sia su X che su Y (in genere è di default).

Ora clicca sul bottone “Inizia” in basso a sinistra e XnView lavorerà le foto e le metterà nella cartella “Foto da pubblicare”.

Procedi a questo punto a rinominare i file selezionando la cartella “Foto da pubblicare” dall’elenco sulla sinistra nella schermata principale di XnView.

Selezionia tutte le foto e digita da tastiera “F2” (o in alternativa tasto destro del mouse e dal menù a tendina scegli “Rinomina in serie…”).

Passo 4: Come rinominare in sequenza le immagini e aggiungere altre impostazioni

• Nella finestra che esce seleziona “Modello di nome” (in alto a destra) e cliccando sul bottone “Inserisci” clicca dal menu a tendina la voce “IPTC – Didascalia”e poi “Didascalia”.
  (oppure copia e incolla nel campo bianco sotto “Modello di nome” questa scritta: “<IPTC:Caption>”.

• Clicca sulla voce “Estensione” in alto a destra e scriviamo nel campo bianco sottostante “jpg”.
• Vai su “Caratteri” e dal menù a tendina seleziona “Nome ed Estensione : Minuscoli”.
• Clicca sul bottone inizia e le foto verranno rinominate in serie nel modo che serve a noi.

Nota Bene: tutte queste operazioni dovrai eseguirle solo la prima volta, riprendendo il programma rimarranno le impostazioni dell’ultimo utilizzo.

Ora hai archiviato le immagini nella cartella “Foto da pubblicare” pronte per essere caricate nella fotogallery del tuo blog wordpress o sul tuo sito.

Ricorda che le foto iniziali non sono state minimamente toccate e che sono rimaste così com’erano nella cartella “Foto originali”.

Autore: Pasquale Mesiano – Collaboratore e inviato speciale per Cinemio.it.
Appassionato fotografo, si occupa di Cad 2D3/3D e di modellazione 3DStudio/Vray.

Se hai apprezzato questo dettagliato tutorial, aiutami a diffonderlo in rete ai tuoi amici e colleghi cliccando su mi piace qui sotto.

Vuoi addentrarti nel mondo della grafica ma non sai da dove iniziare?

Stai cercando una lista di risorse per Photoshop?

Puoi utilizzare questo articolo come guida di base.

Sono segnalati 9 articoli, dove sono presenti sia video che post tutorial.

Se hai già esperienze con questo programma, e vuoi condividere con i lettori di blographik i migliori articoli che hai scovato in rete,
sei invitato ad aggiungere le tue chicche nei commenti qui sotto.

Ecco di seguito tutti i dettagli di questa lista.

Tutorial Photoshop:

• MrWebmaster: 61 Articoli Photoshop – Qui troverai alcune guide in italiano dove potrai cominciare a dilettarti con Photoshop.
• PayTuts: Video Tutorial in Italiano – PlayTuts raccoglie video tutorial in italiano realizzati da professionisti e da appassionati di grafica.
• JuliusDesign: BecomeDesigner – Alcuni Tutorial realizzati da Julius, WebDesigner Freelance & Blogger.
• TuttoRials: Raccolta dei migliori Tutorials per il Web disponibili per la Rete.
• Grafica: Guida Photoshop – Imparare da Principio lo potenzialità di Photoshop.
• Blographik: 40 Tutorial per Photoshop – Vuoi migliorarti con Photoshop? Ecco 40 fantastici tutorial selezionati per te.
• JuliusDesign: 41 spettacolari effetti su foto – Julius ci offre questi spettacolari effetti su foto con la rispettiva guida per crearli.
• TotalPhotoshop:  Video Tutorial Gratuiti per Photoshop, DreamWeaver, Illustrator, after effects, Premiere, Flash etc.
• Photoshoppista: Canale Youtube – Ecco i video tutorial da Photoshoppista!

Hai altri tutorial per photoshop da segnalare?

Aggiungi pure la selezione dei tuoi post preferiti qui nei commenti.
Preferirei non segnalassi risorse autoreferenziali , i lettori del blog lo capirebbero subito.

Autore: Sebastiano Raffa, blogger e Amministratore di Informania.it

La nostra mente ha bisogno di aggiornamenti, un po’ come il nostro computer.

Per migliorare bisogna continuare ad imparare cose nuove e ad approfondire quelle  che già conosciamo.

I tutorials sono utili proprio a questo, aiutano a tenere in allenamento  la mente con nozioni nuove o approfondimenti.

Oggi ti propongo 10 tutorials per Illustrator divertenti e di alta qualità.
Ce n’è davvero un’infinità nel web ma sono riuscito a trovare quelli che ritengo i migliori.

Sono molto chiari nelle spiegazioni,  nonostante siano scritti in inglese, grazie alle immagini che ti aiutano passo dopo passo per raggiungere il risultato migliore.

Se conosci qualche tutorial che pensi meriti di rientrare tra i migliori trascrivine il link in un commento, o se hai avuto delle difficoltà e vuoi fare qualche domanda sarò disponibile a risponderti !

Buon Lavoro!

How to Create a Rocketing, Vector Aircraft Shuttle

How to Create a Caramel Ripple Effect

How To Create A Vector Wacom Tablet In Illustrator

Reader Tutorial Geometric Flower Effect Logo Illustrator

How to Create a Golden, Vector Compass in Illustrator

How to Create a Photorealistic iMac and Magic Mouse

How to Create an Elegant, Vector Pen in Illustrator

How to Create Dotted Surface Effects in Illustrator

Create a Happy Sun Character

Create a Cute Panda Bear Face Icon

Autore: Maxselmi Diaz di creativebubbles.net

Questa è una raccolta di 20 tutorials, che comprende parecchie delle spiegazioni importanti per un lavoro grafico professionale in Adobe Photoshop.

Ho raccolto quelli che spiegano alcune tra le funzioni per TEXT EFFECT (Effetti Per Il Testo),  più utilizzate di questo programma.

Nonostante siano scritti in Inglese sono facilmente intuibili anche grazie alle immagini; da questi  potrai imparare molte cose necessarie per facilitare l’utilizzo di Photoshop e velocizzarne i tempi.

Sicuramente esistono dei percorsi alternativi per ognuna di queste funzionalità, ma quelli descritti in questi tutorials sono a mio parere semplici e veloci a tal punto da non indurre l’utente a cercane di alternativi.

Ti consiglio di seguirli con attenzione e provare ad applicarli. Se pensi che qualcosa di questi tutorial possa essere ulteriormente semplificato o se non ti è chiaro qualche passaggio segnalalo tramite i commenti! Buon Lavoro!

1 Grass Text Effect

2 Hell of Tutorial

3 Old School Type

4 Super Cool Frilly Bits Typography

5 Design a Rocket-Powered Retrofuturistic Digital Illustration

6 How to Quickly Create a Stylish Retro Text Effect

7 Recessed Watercolor Typography

8 Wooden Text

9 How to Design a Stunning, 3D, Sunset Type Illustration

10 How to Create a Richly Ornate Typographic Illustration

11 Smokin’ Bullet Holes and a Wanted Sign

12 Candy Coated Photoshop Tutorial

13 3D Flowery Text

14 Create Smokey Typography in 12 Steps

15 Vanity License Plate

16 Design Soft Stylized 3D Type

17 Patch on Clothes

18 Dramatic Text on Fire Effect in Photoshop

19 How to make a Typographic, Retro, Space Face

20 Neon Glow Text

Autore: Maxselmi Diaz di creativebubbles.net

E’ molto semplice creare lo stile fumetto su un immagine, bisogna solamente inserire un pattern di mezzitoni. Spesso per questo tipo di effetto è necessario utilizzare Adobe Illustrator, ma per chi non ce l’ha e per  chi non lo sa usare riporterò qui sotto il metodo più semplice da adottare utilizzando Adobe Photoshop.

E’ necessario impiegare dei filtri e qualche metodo di fusione dei livelli.

Apri l’immagine desiderata.

Nel pannello “Livelli” fai clic con il tasto destro del mouse sul livello “Sfondo” e seleziona “Duplica livello” rinomina il livello duplicato e premi OK. Ora apri il menu immagine e seleziona  Regolazioni>Soglia.

Vedrai che l’impostazione predefinita sarà su 128, regola il valore su 50 in modo da creare linee ben definite.

Segui le varie prove  per assicurarti di ottenere il risultato desiderato. Premi OK.

Seleziona il livello a cui hai applicato le impostazioni appena descritte e apri “Filtro>Schizzo>Pattern Mezzetinte”.

Controlla che il pattern sia impostato su “Punto” e regola “Dimensione” e “Contrasto”  per arrivare all’effetto che desideri. Premi OK.

Nel mio esempio ho impostato “Dimensione” su 3 e “Contrasto” su 8.

Ora fai clic con il tasto destro del mouse sul livello duplicato, seleziona “Opzioni Di Fusione”  e imposta il metodo di fusione su “Sovrapponi”.

Per finire duplica il livello di sfondo originale, fai clic con il tasto destro, seleziona “Duplica Livello” e apri “Filtro>Sfocatura>Controllo Sfocatura.

Modifica le impostazioni come preferisci per ottenere il risultato che desideri.

Con questo metodo potrai sbizzarrirti con l’effetto Fumetto. Spero che questo tutorial possa esserti di aiuto. Se conosci un metodo per migliorare lo stile Fumetto o vuoi aggiungere degli accorgimenti, non esitare a riportarlo tramite i commenti. Sarei contento di imparare altri metodi o di migliorare il mio!

Autore: Maxselmi Diaz di creativebubbles.net

Chi vuole creare un sito, deve tenere conto di molti fattori, uno dei quali è la scelta della grafica.

Da qualche tempo a questa parte ho notato che sono sempre di più i siti che adottano, al posto di lavori di grafica come le sfumature o i pattern, una foto come background.

Se ci pensiamo bene, in effetti, una bella foto cattura molto di più l’attenzione, e aumenta la voglia di visitare il sito. Una bella immagine parla chiaro: da sola rende infatti l’idea dello scopo del sito.

Sicuramente viene da pensare che a questo punto il lavoro del Web Designer potrebbe venire annullato … non è così. L’immagine aiuta molto, ma il tocco di un grafico sull’immagine stessa serve proprio a concludere in bellezza il lavoro.

Ho inserito degli esempi per farti capire bene quale può essere il risultato finale. Dopo questi ti invito a seguire i miei suggerimenti su come inserire una immagine di sfondo autoscalabile.

come abbiamo detto prima per cambiare l’aspetto di una pagina è sufficiente aggiungere un‘immagine di sfondo a tutto schermo.

Il problema è scalare l’immagine affinche si adatti a qualsiasi risoluzione. Questa tecnica illustra come aggiungere un’immagine a un tag div e rendere entrambi scalabili Con Dreamweaver.

seleziona l’immagine desiderata, che deve avere dimensioni e proporzioni simili alla risoluzione maggiore che si puo avere.

Imposta tutti i margini della pagina su zero (Elabora>Proprietà di pagina>aspetto) per assicurarci che non vengano mostrati spazi vuoti.

Ora crea un tag div(inserisci>oggetti layout>tag div>nuova regola CSS), seleziona id come tipo di selettore, assegnagli un nome e premi ok.

Seleziona elementi di pagina e imposta altezza e larghezza del tag su 100%. Ora inserisci l’immagine nel tag div e imposta larghezza e altezza su 100%. Salva la pagina e visualizza un’anteprima.

Per popolare la pagina usa i tag div AP, che consente ai designer di rimuovere i tag sopra la parte superiore dell’immagine.

Autore: Maxselmi Diaz di creativebubbles.net

In esclusiva a te che sei fortunato lettore di Blographik, Michele Caivano ci offre la possibilità di acquisire maggiori conoscenze su come dotarsi di una versione mobile, allo scopo di ricevere traffico anche dai motori di ricerca specializzati.

Di seguito tutti i dettagli.

Ecco come puoi aumentare il tuo traffico: Aggiungi una versione mobile al tuo blog

di Michele Caivano

Prima di andare avanti, se non lo hai ancora fatto, ti consiglio vivamente di seguire la mia video intervista a Michele Caivano durante il IV Convegno GT, in cui offre diversi spunti utili da cui partire per ottimizzare il tuo blog per il mobile search.

Hai visto il video?

Bene, allora puoi andare avanti .

In esclusiva ai lettori di Blographik, Michele ci regala molte nozioni tecniche su come dotare il nostro blog di una versione mobile.

Per qualsiasi domanda, inizierò sicuramente io , apriamo una bella discussione nei commenti.
Michele sarà felice di riuscire aiutarci nell’impresa.

Se vogliamo “sfruttare” anche questo ulteriore canale di ricerca  (google possiede 2 motori di ricerca separati, uno per il mobile l’altro per il web), e accrescere la nostra visibilità, non lasciamoci sfuggire la possibilità di interagire con Michele, è un vero esperto in questo campo.

• Hai dotato il tuo blog di una versione mobile?
• Cosa ne pensi di questi suggerimenti, ti saranno di aiuto per ottenere maggiore traffico e visibilità?

Se hai seguito la prima parte del video di Robin Good sulle “strategie per creare titoli efficaci“, allora non puoi perderti questa chicca .

Parlavo proprio oggi con Robin via Skype, e mi segnalava un suo errore di valutazione:
mi aveva concesso l’autorizzazione a filmare ciò che volevo e a ripubblicarlo qui su blographik.

Infatti così è stato.

Nei precedenti articoli ho pubblicato diversi video del Workshop di Roma ma Robin, vedendo il filmato durante l’evento, ha capito che stavo offrendo del materiale esclusivo, che i partecipanti (incluso me ) hanno pagato per vedere, quindi mi ha contattato per risolvere questo piccolo disguido.

Ecco quindi come potrai comunque vedere la seconda parte del video di Robin su “come creare dei titoli efficaci per il tuo blog”.

Iscriviti a questa lista per ricevere gratuitamente delle chicche sul blogging

Con Robin, abbiamo deciso di offrire comunque questo tipo di materiale di prima qualità, ma solo a coloro che si iscriveranno al seguente form, e sceglieranno di ricevere sia il video che altre mie chicche realizzate da me.

Quindi, se vuoi ricevere informazioni che altri pagherebbero per avere, ti consiglio di abbonarti a questa lista; riceverai poi oltre al video di Robin, altre idee, suggerimenti, podcast, offerte per convegni e workshop, tutti correlati al blogging e dintorni.

Non è detto che lasci attivo questo form per sempre, visto che (come concordato anche con Robin), vorrei preservare e non svalutare le informazioni esclusive che saranno consultabili solo a coloro che sceglieranno di lasciare la loro email qui sotto.

Cogli la palla al balzo e iscriviti ora!

Come creare un pianeta con Photoshop in poche mosse con un risultato di sicuro effetto.

Vediamo il video:

Approfondimento del video tutorial su Photoshop

La prima cosa che devi fare è quella di procurarti una texture di base per la superficie del pianeta.
Quella che ho usato io nell’ esempio la trovi qui.

Una volta salvata e aperta, seleziona la texture e definisci un pattern (nell’ esempio io l’ho chiamato “texture pianeta”).

A questo punto sei in grado di cominciare il vero e proprio tutorial.

1. Visto che si tratta di un pianeta io ho scelto un background nero; al limite puoi anche provare con un gradiente nero à blu scuro.
2. Scegli il colore del tuo pianeta; nel nostro caso, è un pianeta roccioso, e quindi io ho preso un marrone; comincia con il tracciare il cerchio e riempilo con un gradiente che sfumi nel nero.
3. Applica al cerchio il pattern che hai creato all’ inizio; mi raccomando, metodo di fusione Multiply, in modo da mantenere visibili i colori di base del cerchio.
4. A questo punto entra in gioco il filtro Spherize; prima di poterlo applicare, devi però duplicare e raggruppare il livello del cerchio (questa operazione è necessaria perché il filtro Spherize non applicherebbe la distorsione al pattern, e quindo con questa operazione si crea un layer “normale” senza effetti speciali). Io ho applicato DUE volte lo Spherize (al 100%).
5. Ora devi dare le ombre e i rilievi al pianeta; per le ombre, basta il gradient overlay in bianco e nero; di nuovo, scegli Multiply come metodo di fusione.
6. Ora è il turno dei rilievi: duplica il livello e sul livello copia applica il filtro Emboss (io ho lasciato i paramerti a 135 gradi, 3px di altezza, e 500%); imposta il metodo di fusione del nuovo livello con i rilievi ad Overlay, e abbassa un poco l’opacità (io l’ho impostata al 70%).
7. Ora unisci il livello con i rilievi con quello sottostante ed applica l’effetto Inner Glow; io ho preso un azzurrino come colore (tu sperimenta pure altri colori se vuoi).
8. Per rifinire la zona d’ombra, di nuovo, duplica il livello e raggruppa; prendi un pennello sfumato e molto grande e e dai l’ombra (ovviamente nera) al pianeta.
9. Per finire, io mi sono divertito ad usare un lens flare al background per ottenere un “effetto sole”, che coi pianeti ci sta sempre bene J

Ovviamente, se vuoi ottenere pianeti diversi, basta scaricare le texture appropriate per la superficie che hai in mente (magari potresti provare a realizzare un pianeta d’acqua) ed applicare lo stesso metodo.

Spero che tu abbia gradito e alla prossima!

Autore: Mauro Cassani di easy-grafica.com, non è un architetto o un informatico, ma un chimico! Realizza siti internet, loghi, illustrazioni e tutto quello che può essere definito “grafica”.

Ho realizzato un breve video tutorial che mostra in dettaglio come creare velocemente una pagina fan e come apportare delle personalizzazione per renderla più attraente.

Inoltre, nell’articolo sull’utilizzo delle statistiche di facebook insigns, un lettore mi chiedeva come inserire gli articoli del blog nella bacheca della pagina fan.

Invece di rispondere direttamente, ho preferito creare un video tutorial ad hoc.

Ecco di seguito il video.
Ovviamente possiamo parlarne nei commenti, sia sul contenuto del video tutorial, sia su come è stato realizzato questo mio primo screencast .

Ecco il video tutorial su come creare e ottimizzare una pagina fan per aumentare la visibilità del tuo blog

Lo scopo di creare una pagina fan per un blogger, dovrebbe essere quello di utilizzare Facebook per migliorare la propria presenza in rete, affermare ulteriormente il proprio brand, incentivare alla discussione attraverso un altro canale oltre al solo blog”.

Cosa ne pensi di questo video tutorial?

Ultimamente stanno aumentando sempre di più i “cloni” di lightbox, per ovviare alle limitazioni di questo script dove è possibile aprire solo immagini.

Anche io stesso ultimamente ho parlato di ottime alternative a lightbox e la scelta di quale usare può dipendere dal tipo di effetto, da cosa si può caricare nelle finestre e dalla compatibilità con i browser.

L’ultimo clone è nato pochi giorni, e si chiama BumpBox, script basato su Mootools.

La caratteristica più importante di BumpBox è la possibilità di poter aprire all’interno della finestra idocumenti PDF, oltre a poter aprire pagine HTML, immagini, video flv e oggetti flash, con un effetto a “rimbalzo”.

Di seguito il video el a descrizione dettagliata del funzionamento di BumBox.

Tutorial Javascript: BumpBox, un’ottima alternativa a lightbox

di Federico Pian

Altro aspetto molto importante è la compatibilità del plugin con tutti i browser:

• internet explorer 6,7 e 8;
• firefox;
• safari;
• opera;
• chrome.

Andiamo a vedere insieme come utilizzarlo in questo video:

Come hai potuto vedere utilizzare questo script è davvero semplice, e dopo aver scaricato i file necessari dovrai seguire questi passi:

Passo 1

Inserire le righe di codice tra i tag head necessarie per richiamare i vari script, come nell’esempio qui sotto:

<script language="javascript" type="text/ecmascript" src="mootools.js"></script>
<script language="javascript" type="text/ecmascript" src="mootoolsmore.js"></script>
<script type="text/javascript" src="flowplayer.min.js"></script>
<script type="text/javascript" src="bumpbox.js"></script>

Passo 2

Nel tag body, dove sono stati effettuati i collegamenti ipertestuali (a href), aggiungere gli attributi:

• class=”bumpbox”;
• title per mettere il titolo alla finestra;
• rel per impostare le dimensioni della finestra bumpbox.

<ul>
<li><a href=”test.flv” title=”FLV lightbox” rel=”640,480″ class=”bumpbox”>Apri un video flv</a></li>
<li><a href=”anim.swf” title=”SWF Lightbox” rel=”400,300″ class=”bumpbox”>Apri un filmato swf</a> </li>
<li><a href=”foto.jpg” title=”Image Lightbox”  class=”bumpbox”>Apri un’immagine </a></li>
<li><a href=”http://www.google.it” rel=”900,600″ title=”Google” class=”bumpbox”>Apri una pagina html</a></li>
<li><a href=”test.pdf” title=”PDF Lightbox” rel=”800,600″ class=”bumpbox”>Apri un file PDF</a></li>
</ul>

Puoi scaricarti i sorgenti dell’esempio, scompattare il file .rar e testare il funzionamento in locale sul tuo pc o sul tuo sito web o blog di questa utile alternativa a Lighbox.

Autore: Autore: Federico Pian di Fedeweb.net

La terza ed ultima parte della mini serie di articoli dedicata all’utilizzo di un tema gratuito in wordpress per creare il tuo blog porfolio.

Nel primo appuntamento abbiamo visto come scegliere un tema gratuito in wordpress per la creazione di un blog porfolio di buona qualità grafica.
Nel secondo appuntamento sono stati approfonditi alcuni dettagli su come personalizzare graficamente Folio Elements.

In questo ultimo post dedicato alle modifiche di questo tema in wordpress, scoprirai come modficare lo stile del portfolio secondo le tue esigenze.

Ecco tutti i dettagli in merito.

Apportiamo le ultime modifiche al tuo blog porfolio

di Federico Pian

La prima cosa che dovremo andare a modificare è l’immagine di sfondo bg.jpg, che trovi all’interno della cartella images del tema.

Quello che dovrai fare è semplicemente creare un’immagine grande 1600×1200 pixel, dove il limite sarà solo la tua fantasia; ti consiglio di utilizzare uno sfondo di colore uniforme, come l’esempio qui sotto.

La seconda cosa che dovrai modificare sono le immagini prev.png e next.png, che permettono la sfumatura delle immagini.

Le zone riempite con una tinta unica ti basterà riempirle con il colore che hai scelto per l’immagine bg.jpg.
Per quanto riguarda le zone sfumate, dovrai utilizzare un gradiente, dal colore di sfondo verso la trasparenza, ottenendo questo risultato:

Il resto, come i testi nei menu, o i titoli sotto le immagini, li puoi modificare nel foglio di stile style.css.

Per le finestre facebox, cioè quelle che si aprono una volta premuto su un lavoro, dovrai modificare le immagini nella cartella facebox, all’interno della cartella scripts.

Qui dovrai modificare i colori delle immagini b.png, bg.png, bl.png, br.png, tl.png e tr.png.

Per qualunque dubbio chiedi pure nei commenti!

Se hai utilizzato questo tema per il tuo blog porfolio, segnalalo pure di seguito nella discussione di questo articolo .

Autore: Federico Pian di Fedeweb.net

La seconda parte di queste mini serie di post dedicati esclusivamente all’utilizzo ed alla gestione di un tema gratuito in wordpress per un blog portfolio.

Nella prima parte abbiamo mostrato come inserire i vari lavori all’interno del portfolio (basta scrivere l’articolo e inserire l’anteprima), in questo articolo potrai scoprire come inserire le pagine, e come poter personalizzare graficamente il portfolio.

Di seguito tutti i dettagli.

Blogging: come personalizzare graficamente Folio Elements per il tuo Blog Porfolio

di Federico Pian

Ecco come inserire le pagine e personalizzare questo tema gratuito.

Per pagine intendo quelle in alto a destra (nell’esempio about, contact, sample page).

Per modificare i nomi di queste pagine, posizionati nel pannello di amministrazione di wordpress, nella sezione “aspetto” e poi in “editor”.

Ora vai alla pagina header.php, e alla riga 46 troverai queste righe di codice:

<li><a href=”<?php get_content(‘page’, ‘about’); ?>” rel=”facebox”
title=”About”>About</a></li>
<li><a href=”<?php get_content(‘page’, ‘contact’); ?>” rel=”facebox”
title=”Contact”>Contact</a></li>

Quindi il primo passo è quello di modificare i nomi delle pagine con ciò che preferisci.
Ad esempio se vorrai cambiare il nome della pagina “about”, con “chi sono”, dovrai procedere come segue:

<li><a href=”<?php get_content(‘page’, ‘Chi sono’); ?>” rel=”facebox”
title=”Chi sono”>Chi sono</a></li>

Dovrai fare la stessa cosa per le altre pagine; se vorrai aggiungerne una nuova, dovrai copiare e incollare il codice tra i tag <li></li> e modificare come preferisci il nome della pagina.

Sistemata questa parte, ti basterà aggiungere le pagine nel pannello di amministrazione, dando il nome che hai scelto nel codice.

Ad esempio se nel codice hai messo la pagina “Chi sono”, quando aggiungerai la pagina dovrà chiamarsi “Chi sono”.

La prossima settimana vedremo come si può personalizzare “stilisticamente” il portfolio.

Se non vuoi perderti la terza ed ultima parte di questa mini serie, e seguire gli ultimi aggiornamenti di blographik, puoi abbonarti alla newsletter o al feed rss di questo blog.

Autore: Autore: Federico Pian di Fedeweb.net

In questop video tutorial dedicato questa volta a Photoshop, scoprirai come creare in pochi steps un bell’effetto legno con la versione CS2.

Di seguito il filmato con alcuni approfondimenti:

Come creare un effetto legno con Photoshop CS2

Approfondimento

1. Per l’effetto “nuvola”, mi raccomando di scegliere due colori molto diversi tra loro, uno molto scuro e uno molto chiaro. Al limite, puoi prendere il bianco e il nero e poi aggiustare il colore alla fine (passaggio 5) per rendere il marrone del legno.
2. Non esagerare con il livello del noise, e assicurati che sia monocromatico; nel video io ho usato un 15%.
3. Il motion blur è molto importante, perché hai la possiblità di deciderne quella che sarà l’inclinazione delle venature e dei nodi del legno: io ho usato una angolazione leggermente obliqua. Mi raccomando, come prima non esagerare con la sfocatura, altrimenti perdi l’effetto (usa sempre la funziona “preview” quando usi questi tools così ti regoli meglio).
4. Arriviamo al cuore di questo tutorial: il tool Liquify. Ricordati di selezionare la funzione Twirl, che serve per creare l’effetto dei nodi del legno. Comincia da sinistra o da destra, non ha importanza: quello che importa è che passi progressivamente  il pennello da un lato all’altro, senza esagerare (altrimenti otterrai una cosa senza forma!).
5. Ora che hai ottenuto l’effetto legno, gioca coi contrasti e le regolazioni dei colori: puoi ottenere un legno dai colori caldi, oppure un legno chiaro, oppure molto scuro. Ovviamente tutto dipende dal tuo gusto!
6. A questo punto quello che hai ottenuto puoi essere applicato come “clipping mask” a tutto quello che vuoi: nel mio caso, ho creato una semplice scritta (tu potresti disegnare tanti rettangoli e creare l’effetto parquet, per esempio) .

Reputi utile questo video tutorial di Photoshop?

A te la parola, e segui blographik tramite newsletter o feed rss per non perderti il prossimo “video appuntamento” .

Il linguaggio CSS ha davvero rivoluzionato il mondo del Web Design. Grazie alla sua potenza e alla sua versatilità oggi non abbiamo limiti nella creazione di siti internet. Guardiamo il filmato:

Approfondimento

I documenti CSS vengono genericamente chiamati fogli di stile, e possono essere esterni o interne alle pagine. Permettimi di ripetermi: usa solo e sempre fogli di stile CSS esterni alle pagine HTML. Non appesantiscono il codice e soprattutto, puoi modificare l’aspetto di tutte le pagine che usano lo stesso foglio di stile in un attimo. Il cuore del CSS è rappresentato dalle dichiarazioni:

Selettore {proprietà:valore;}

Non ci sono mai eccezioni, una dichiarazione CSS va sempre scritta così.

1. Il selettore sarà un tag HTML di cui vogliamo modificare le proprietà (es:h1, p, a, q etc…). Puoi modificare e creare una regola per ogni tag presente nelle tue pagine HTML;
2. Le proprietà e i valori usano un linguaggio predefinito (il linguaggio CSS, appunto). Che, guarda un po’, è in inglese e non può essere tradotto. Lo studio del linguaggio CSS ha proprio lo scopo di imparare ad usare correttamente le proprietà e i valori.

Una cosa mi preme sottolineare e che non ho specificato nel video:

il linguaggio CSS deve essere al servizio dell’ HTML e non il contrario.

Quindi, prima scrivi il tuo codice HTML, possibilmente senza pensare a come sarà l’aspetto grafico del sito, e dopo aggiungi il foglio di stile; in questo modo ottieni un sito con un markup HTML significativo e, tra l’altro, anche estremamente accessibile (parlerò dell’accessibilità in altri video-tutorial;) ). Al prossimo video tutorial!

Autore: Mauro Cassani di easy-grafica.com, non è un architetto o un informatico, ma un chimico! Realizza siti internet, loghi, illustrazioni e tutto quello che può essere definito “grafica”.

Formattare correttamente il testo delle pagine Web ha una duplice importanza:

1. dal punto di vista semantico:  la formattazione organizza al meglio il significato di un testo;
2. dal punto di vista SEO: una corretta formattazione favorisce una migliore indicizzazione sui motori di ricerca.

Ricorda sempre:  nel testo di una pagina c’è tutto il suo significato!

Ora guardiamo il filmato:

Approfondimento

Prova a pensare di essere il Googlebot:  come vorresti che fosse il testo di un sito?…senza capo né coda oppure ben strutturato e gerarchizzato, in modo da capire al meglio di quello che si sta parlando?..la risposta mi sembra ovvia.

Quindi non tralasciare MAI la formattazione dei tuoi testi.

Ora ritorniamo su alcuni punti del Video:

1. Stai attento a come mettere i tag di titolo (h1….h6).Un solo h1 per pagina, e possibilmente, più in alto possibile nel codice della pagina (a volte vedo siti con montagne di codice, come javascript  e CSS interni, sopra al contenuto del sito…); il Googlebot vuole capire di che parla la pagina e cercherà il tag h1..vedi di farglielo trovare prima.
   Ricorda sempre di gerarchizzare i testi e i titoli: una buona idea è quella di usare h1 e h2 nella parte pricipale del sito, poi gli h3 nelle sidebar, e l’h4 nel footer.
2. Dopo il titolo sempre un paragrafo!..è logico non trovi?…cosa penseresti nel vedere un titolo e poi..niente?!?
3. I grassetti: usa il tag <strong>, lascia perdere gli altri due.
   Mi raccomando, non dare i grassetti a casaccio, ma solo quando c’è la reale necessità, quando vuoi enfatizzare il contenuto.
4. Non ti dimenticare mai che esiste  il tag <q>:  quando citi usalo, è carino (lo puoi anche personalizzare coni i CSS), utile e significativo.

Una cosa mi preme sottolineare più di tutte:
non usare la formattazione solo per creare l’effetto grafico che vuoi..
Non usare un tag h3, un grassetto, una virgoletta o quello che vi pare solo….. “perché ci sta bene”.

Il linguaggio web E’ SEMANTICA, E’ SIGNIFICATO.

Ricorda:  SIGNIFICATO (HTML) – -> ASPETTO (CSS) – -> COMPORTAMENTO (Javascript)

Al prossimo video tutorial!

Autore: Mauro Cassani di easy-grafica.com, non è un architetto o un informatico, ma un chimico!

Realizza siti internet, loghi, illustrazioni e tutto quello che può essere definito “grafica”.

Le favicon sono quelle iconcine che compaiono nella barra degli indirizzi del broswer. Sebbene non abbiano un’ effettiva utilità, è bene che un buon sito o blog ne abbia una.

Ecco i dettagli di seguito

Come creare una Favicon in photoshop

di Mauro Cassani

Il primo passo è quello di scaricare l’estensione .ICO per Photoshop.

Una volta scaricato, apri il file .zip e copia il file ICOFormat.8bi nella cartella Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats.
Se avevi già aperto Photoshop, chiudilo e riavvialo.

Ora sei pronto per seguire i restanti step al seguente filmato:

Davvero importante, da ripetere di nuovo:
realizzate un disegno o una scritta molto semplice!

Qualsiasi logo troppo complicato ridotto alle dimensioni  16 x 16 pixel diventa una cosa indecifrabile.

Un giro sul Web per prendere ispirazione ti farà capire meglio di cosa sto parlando .
Il più delle volte noterai che le favicon sono fatte dalle iniziali del nome del sito.

Prova a guardare due siti a caso: Google e Yahoo!

Al prossimo video tutorial!

Autore: Mauro Cassani di easy-grafica.com, non è un architetto o un informatico, ma un chimico!

Realizza siti internet, loghi, illustrazioni e tutto quello che può essere definito “grafica”.

Una problematica importante, spesso trascurata, nella creazione di un sito web è la programmazione dei contenuti delle pagine 404.
Può capitare occasionalmente che gli utenti, a causa di una scorretta digitazione di un URL o magari di un link rotto all’interno del tuo blog o portale, cerchino di accedere a pagine inesistenti.

Progettare delle pagine 404 personalizzate che guidino il lettore verso contenuti reali, potrebbe migliorare di molto la navigazione sul sito garantendo la permanenza di un utente che altrimenti andrebbe perso.

Quali sono le operazioni da evitare?

Migliorare la navigabilità del tuo blog ottimizzando la pagina di errore 404

di Gabriele Costamagna

Assicurati che la pagina 404 possa essere indicizzata nei motori di ricerca

Sicuramente puoi far si che le pagine 404 non vengano indicizzate dai motori di ricerca.
Assicurati quindi che il tuo blog o sito web server sia configurato in modo da restituire dei messaggi 404 HTTP Status code nel momento in cui queste pagine vengono richieste.

Non fornire messaggi vaghi

…del tipo “Non trovato”,“errore” e simili.

Inserisci piuttosto un link che rimandi ad altre pagine del vostro sito usando una frase del tipo “Quello che stai cercando non si trova qui prova con…”.
Un’alternativa potrebbe essere quella di offrire un form di ricerca che il lettore può utilizzare per trovare la pagina corretta.

Google, a dimostrazione che questi piccoli accorgimenti sono importanti, offre lo strumento 404 widget che può essere inserito nel vostro sito per personalizzare le pagine 404.

Utilizzare un plugin gratuito per WordPress

Un ultimo consiglio per tutti i blogger che utilizzano WordPress.
Esiste un plugin gratuito, 404-Notifier, che una volta installato e configurato permette di ricevere nella vostra casella di posta un’e-mail recante i tentativi di accedere a pagine inesistenti del vostro sito.
In alternativa, per individuare le sorgenti di traffico inesistenti potete utilizzare gli “Strumenti per i Webmaster” forniti da Google.

Un esempio di pagina 404 con wordpress

Solitamente tutti i temi wordpress hanno un file 404.php che viene richiamato quando non viene trovata una pagina. Dopo aver aperto il file troverete del codice simile:

<?php get_header(); ?>

<div id=”content-wrap”>

<div id=”back_top”>

<?php get_sidebar(); ?>

<div id=”content”>

<h2 class=”center”>ERROR 404! Not FOUND</h2>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Modifica il codice inserendo al posto della riga “<h2 class=”center”>ERROR 404! Not FOUND</h2>” queste righe di codice:

<h2 class=”center”>OPS! Quello che stai cercando non &egrave; qui!</h2>

Prova ad effettuare una ricerca nel sito:

<form id=”searchform” method=”get” action=”http://www.tuosito.com/“>

<div>

<input type=”text” value=”Cerca nel sito..” name=”s” id=”s” size=”15″ class=”txt”/>

<input type=”submit” class=”button” value=”VAI”/>

</div>

</form>

Questo è solo un esempio, divertiti nel rendere User Friendly le vostre pagine di errore!

Autore: Gabriele Costamagna, neo Dottore laureato all’università di Torino in Informatica. Ha appena aperto un suo blog personale dedicato alla sua “passione per il design“.

Con questo tutorial vedremo come applicare il fotoritocco sulla fotografia di una giovane donna.
La tecnica utilizzata è molto semplice, e con un po’ di applicazione tutti possono ottenere degli ottimi risultati.

Come migliorare il volto in una foto, con un pò di Photoshop-Make-Up 

di Gabriele Costamagna

Ecco la fotografia sulla quale andremo a lavorare ed il risultato finale:

Mettiamoci al lavoro!

Apri l’immagine originale e salvala con l’estensione .psd.
Questa sarà l’immagine che andremo a modificare.
Apri il .psd e con lo strumento Lazzo Magnetico (L) effettuate una selezione di tutta la pelle del soggetto.

Con la selezione attiva vai sul menu:

Selezione -> Salva

seleziona e dai il nome “pelle“.

Copia la selezione (Ctrl+C) e crea un nuovo livello immediatamente sopra lo sfondo.

Chiama il livello pelle.

Selezionate il nuovo livello e da:

Filtri -> Sfocatura -> Controllo Sfocatura

applica una sfocatura con raggio 5px.

Dovresti ottenere il risultato in figura:

Dal menu:

Selezione -> Carica Selezione (con il livello pelle selezionato)

carica la selezione pelle creata in precedenza.

Ancora sul menu:

Selezione->Inversa (Maiusc+Ctrl+I)

verrà selezionata tutta l’immagine ad esclusione del viso del vostro soggetto.

Premi Canc e verrà cancellato quell’alone che si era formato applicato la sfocatura.
Imposta l’opacità del livello pelle al 50%.

Dovremmo ora andare a rifinire le parti del viso e del corpo.

Selezioniamo lo strumento Gomma, grandezza 10px, metodo pennello opacità e flusso settate al 50%.
Passa quindi la gomma sulle parti da rifinire ovvero:

• gli occhi;
• la bocca;
• le sopraciglia;
• il naso.

Non dimenticare anche le pieghe del viso e sul collo.
Questo procedimento può cambiare da soggetto a soggetto, toccherà a te rifinire i particolari della fotografia in modo da renderla il più realistica possibile.

E’ arrivato il momento di dare un po’ di luce agli occhi!

Utilizza lo stesso metodo con cui hai selezionato la pelle anche per gli occhi.
Come fatto in precedenza salva la selezione chiamandola “occhi”, Ctrl+C per copiare, crea un nuovo livello e copia la selezione.

Posiziona il livello sopra lo sfondo e dal menu:

Immagine -> Regolazioni -> Luminosità/Contrasto impostate la luminosità a +25.

Procedimento identico per i denti, però quando dovrai impostare la luminosità è meglio che sia più bassa, diciamo +10.

Per concludere, trucchiamo con un leggero rosseto il nostro soggetto.

Con il solito metodo, selezionate sia il labbro inferiore che quello superiore.
Copia la selezione e incollala su un nuovo livello (chiamatelo “labbra”).
Con il livello “labbra” selezionato vai in:

Immagine -> Regolazioni -> Bilanciamento Colore con livelli di colore Cyan:+35, Magenta:-25, Giallo:-25.

Un saluto a tutti gli appassionati lettori di Blographik.it

Autore:  Gabriele Costamagna, neo Dottore laureato all’università di Torino in Informatica. Ha appena aperto un suo blog personale dedicato alla sua “passione per il design“.

In un web dove la quasi totalità delle pagine sono realizzate dall’accoppiata (X)HTML e CSS, Flash e simili a parte, viene di grande aiuto agli sviluppatori ed ai web designer la preziosa utility per Firefox “Firebug“ ad oggi giunta alla versione 1.3.

Grazie a Firebug, prelevabile direttamente dal sito ufficiale, lo sviluppatore avrà la possibilità di modificare in tempo reale una qualsiasi pagina visitata su Firefox.
Avremo infatti accesso diretto al codice HTML, CSS e Javascript, con possibilità di modifica e già in fase di battitura osservare l’effetto delle nuove istruzioni.
E’ facile rendersi conto quanto ciò possa facilitare la vita del web designer che non si troverà più a dover aggiornare decine e decine di volte la stessa pagina ma prima ancora di modificare realmente il file HTML, le sue regole CSS o quant’altro, potrà rendersi conto visivamente dell’effetto creato.

Tutto ciò che devi sapere per lavorare con Firebug

mini guida esaustiva in un unico articolo a cura di Attilio Fiumanò

• A chi può essere utile?
• Devo essere per forza esperto?

Assolutamente no, questa estensione per Firefox tornerà utile agli utenti più esperti quanto, se non di più, a quelli che sono ancora alle prime armi.

Il suo utilizzo è infatti consigliatissimo anche per chi vuole prendere confidenza con tag attributi classi html, regole CSS o codice Java Script.
Tornerà molto utile infatti, visitando un sito web qualsiasi durante la vostra navigazione, la possibilità di vedere le proprietà e le regole CSS di ogni singolo elemento e conseguentemente di imparare a fare web design semplicemente studiando il lavoro altrui.

Requisiti

• Firefox – Consigliata v.3.0.10;
• Mouse;
• Tastiera;
• Tempo per smanettare (non è esattamente un requisito ma più ne avete meglio è)

Insomma, requisiti decisamente alla portata di tutti.

Per inziare a lavorare con Firebug

Effettuare l’installazione del plugin direttamente dal sito ufficiale segnalato all’inizio dell’articolo.
L’installazione è semplice e veloce, basta seguire le istruzioni, riavviare Firefox al termine e siete pronti.

La scheda HTML

A primo impatto dopo l’installazione non sembrerebbe cambiato molto, salvo un piccolo “insetto” collocato nell’angolo in basso a destra del vostro browser.
Sarà proprio da questa piccola nuova icona che avremo accesso a tutte le potenzialità offerte da questa estensione.

Come è chiaro già dall’immagine sarà possibile visualizzare tutto il codice html della pagina in maniera ordinata, con la possibilità di “navigare” nei vari annidamenti dei tag all’interno di html, body e così via.

Scorrendo in profondità tra i vari tag html si noterà subito che al solo passaggio del mouse sul nome del tag l’elemento verrà evidenziato sulla pagina web con vari colori.
Il giallo identificherà il margine dell’oggetto, il viola ne identificherà il padding e in azzurro il contenuto.

Dall’immagine si evince come firebug fornisca una chiara rappresentazione dell’elemento selezionato e del suo box model.

Nella finestra di destra, sotto la scheda Stile, potremo verificare tutte le regole CSS che agiscono sull’oggetto in questione.

Verranno indicate le regole ereditate, quelle sovrascritte in base alla tabella delle priorità CSS e i file di riferimento da dove tali regole vengono caricate.
Come se non bastasse attraverso il doppio click su una regola specifica o attraverso il click destro avremo la possibilità di modificare, annullare o creare nuove regole specifiche per l’elemento selezionato e contemporaneamente verificarne gli effetti.

La stessa operazione può essere fatta in modo analogo nella finestra HTML dove potremo variare le classi, gli attributi, gli id o anche il testo o qualsiasi altro parametro con la corrispondente variazione dinamica della pagina.

Nella scheda Layout avremo un’altra rappresentazione grafica del box model.

Dalla scheda DOM (della finestra di destra) potremo invece accedere a tutta la “genealogia” dell’elemento secondo le regole W3C, molto utile anche per il debugging Java Script.

Le schede CSS e DOM

Com’è facile immaginarsi da queste due schede, avremo accesso rispettivamente all’intero CSS e DOM (Document Object Model) della pagina caricata.

Non mi soffermerò molto su queste due schede poiché il loro funzionamento oltre ad essere facilmente intuibile è analogo alle schede trovate sotto la scheda HTML sopradescritta.

Nella scheda CSS potremo disabilitare le istruzioni (semplicemente clickando sul divieto d’accesso a fianco alle regole), modificarle cliccando due volte sul valore di ogni singola regola, oppure aggiungerne nuove, inserendo manualmente le nuove istruzioni dopo aver cliccato col destro e aver selezionato “Nuova proprietà”.

Nella parte superiore della scheda potremo scegliere quale dei files di stile caricati vogliamo modificare (nel caso ve ne siano più d’uno).
Di default verrà visualizzato l’intero codice CSS caricato.

Come è lecito aspettarsi nella scheda DOM troveremo l’intero Document Object Model della nostra pagina a partire dall’elemento window per poi poter navigare nei vari document, html, body eccetera.
Per ogni elemento sarà possibile visualizzare tutte le proprietà, elementi figlio, padre, fratello e tutto ciò che prevede lo standard W3C.
Interessante anche la possibilità di accedere al contenuto di tutte le variabili globali usate in javascript, utilissimo in fase di debugging.

Anche in questo caso sarà possibile cambiare il contenuto dei vari campi delle variabili ma personalmente sconsiglio di agire direttamente dal DOM per modificare i valori degli oggetti.
Risulta invece molto utile verificare che tali valori corrispondano con l’effetto desiderato dal vostro codice Java Script.

La scheda Java Script

La scheda Java Script come le schede Console e Net sono di default disabilitate.

Questo accade perché potrebbero verificarsi dei cali di prestazione dovuti, in particolari contesti, alle ingenti risorse richieste per il caricamento di alcune pagine web dalle suddette schede.

Una volta abilitate le tre schede potremo accedere alla scheda Java Script come in immagine.

Anche in questo caso avremo la possibilità di muoverci tra i vari file .js caricati dalla pagina e selezionare il file che vorremo analizzare, analogamente a quello che accadeva nella scheda CSS.

Come nei migliori tool di programmazione avremo la possibilità di debuggare il nostro codice con l’inserimento di breakpoint nei punti chiave del nostro codice per analizzare a run-time l’effettivo valore delle variabili e il funzionamento della nostra applicazione Java Script.

Per chi non lo sapesse un breakpoint è un punto del nostro codice in cui noi faremo fermare temporaneamente l’esecuzione del programma, e dal quale potremo controllare istruzione dopo istruzione il suo comportamento con la corrispondente variazione delle variabili associate.

Per impostare un breakpoint nel nostro codice basterà effettuare un doppio click alla sinistra del numero di riga corrente.
Se hai impostato correttamente il breakpoint comparirà un cerchio colorato di rosso accanto alla riga selezionata.

A questo punto una volta che l’esecuzione del codice Java Script raggiungerà la linea selezionata, ammesso che ciò avvenga, l’applicazione andrà in pausa e avremo la possibilità di controllare i valori delle variabili, nella scheda di destra, e di procedere passo passo con le istruzioni successive attraverso l’uso dei pulsanti sulla barra superiore.

Le schede Net e Console

Da queste due schede potremo vedere come “lavora” effettivamente la nostra pagina Web.

Dalla scheda Net otterremo informazioni circa il caricamento dei vari files della pagina.
Con ciò ci riferiamo ad esempio ai file CSS importati per via esterna, oppure alle immagini caricate col tag <img src=”..”/> o ancora i file Java Script esterni, oggetti Flash e tutto ciò che viene caricato nella pagina e il cui contenuto non sia incluso nella pagina html richiesta.

Come da immagine anche questa scheda racchiude informazioni preziose.

Sarà facile rendersi conto se stiamo sovraccaricando il lavoro di acquisizione di files esterni da parte del browser rallentando così il caricamento della pagina stessa.
Il dettaglio dei millisecondi impiegati per ogni singolo file ci darà subito una chiara idea del carico di lavoro affidato al nostro browser.

Procedendo nel dettaglio per ogni singolo file potremo leggerne l’header http di richiesta e di risposta con tanto di cookie (che nell’immagine ho offuscato per motivi di sicurezza), variabili passate con metodo GET o POST, file non trovati, url che subiscono redirect e tutto ciò che il protocollo http prevede.

Nella scheda Console (l’immagine in alto), troveremo sempre informazioni riguardo a richieste fatte dal browser per l’acquisizione di informazioni o file esterni, ma in questo caso si tratta di richieste che vengono effettuate tramite Ajax e solitamente le informazioni scambiate saranno in formato XML o JSON.

Nello screen allegato è mostrato il risultato di una richiesta Ajax in formato JSON.
Anche qui si può entrare nel dettaglio visualizzando l’header di richiesta, di risposta e le variabili scambiate.

In aggiunta a tutto questo in questa scheda troveremo anche informazioni riguardo a eventuali errori rilevati nel codice Java Script (nell’esempio Firebug ci riporta nel dettaglio l’errore rilevato).

I pulsanti Analizza e Modifica

Per concludere vorrei spendere due parole sui pulsanti Analizza e Modifica che probabilmente avrai notato negli altri screen nella parte superiore della barra di Firebug.

Se da una parte il funzionamento del secondo possa essere facilmente intuibile, è dal primo che con molta probabilità cominceremo quando dovremo analizzare i vari elementi della nostra pagina.

Una volta selezionato il pulsante Analizza, infatti, non dovremo far altro che portare il mouse sull’oggetto che ci interessa all’interno della finestra di navigazione e dinamicamente comparirà un rettangolo attorno all’elemento puntato.

Prima ancora di effettuare il click verranno evidenziate nella scheda Html e Css le relative caratteristiche e regole.
Se quello è veramente l’oggetto che ci interessa allora effettuiamo un normale click col sinistro, l’oggetto verrà selezionato e tranquillamente potremo analizzarne i contenuti come già spiegato in precedenza.

Personalmente faccio un forte uso del pulsante Analizza perché permetterà in pochi passaggi di analizzare un determinato oggetto e studiarne le caratteristiche, evitando la perdita di tempo di navigare tra i vari annidamenti dei tag.

Il pulsante Modifica rappresenta un altro modo per modificare i contenuti HTML o CSS (a seconda della scheda in cui ci troviamo) di un determinato elemento.

Tuttavia consiglio di modificare tali contenuti tramite il doppio click o click destro nelle relative schede, poiché non correremo il rischio di snaturare la sintassi HTML o CSS.
In questo modo, infatti, nel caso dovessimo scrivere delle istruzioni scorrette Firebug sarà in grado di riconoscerle e semplicemente le ignorerà.

Dal pulsante Modifica noi potremo testualmente modificare ogni singola parentesi graffa o tag quindi, sebbene ciò aumenti il nostro “potere” di modifica, Firebug non sarà più in grado di riconoscere i nostri eventuali errori e quindi di correggerli.

Conclusioni

Come avrai dedotto leggendo questo articolo le potenzialità offerte da questo plugin sono veramente vaste.
Con tutta probabilità una volta installato non vi separerete più e lo terrete sempre a portata di mano ogni volta che vorrete studiare un layout, un codice Java Script o semplicemente per testare le vostre applicazioni Web.

Con ciò concludo il mio primo articolo su Blographik.it, e invito tutti i lettori a rilasciare nei commenti il loro parere sull’articolo, sulla sua utilità o per eventuali dubbi e chiarimenti.
Sono inoltre ben accette critiche costruttive a partire dalle quali possa migliorare la qualità dei miei articoli.

Un ringraziamento particolare a Mirko D’Isidoro che mi ha dato la possibilità di condividere questo argomento con voi.

Un saluto a tutti gli appassionati lettori di Blographik.it

Autore:  Attilio Fiumanò, studente di Ingegneria Informatica al Politecnico di Milano, appassionato di programmazione e sviluppo applicativi basati su C# e Java.
Ottime conoscenze di PHP, MySql, JavaScript oltre ai più tradizionali xHTML e CSS.