Blog su Wordpress, Web Design, Web Development e Seo

Bellissima foto in HDR di una sala da pranzo.

Inauguriamo una sezione del blog dedicata alla raccolta dei psd scaricabili gratuitamente dal Web con questo bellissimo iPhone, direttamente da DevianArt:

Avrete così sempre a disposizione tutto quello che di cui avete bisogno se avete a che fare con l’ iPhone. Download PSD iPhone

Appena installato, una delle prime domande a cui vorremmo una risposta istantanea è sicuramente: ma come si scrive un articolo in Joomla?

E poi come inserirlo? Dove? La struttura dei contenuti di Joomla è abbastanza semplice ed è suddivisa in sezioni, categorie e articoli.

Le sezioni sono le macro-aree del sito. Una sezione può contenere una o più categorie.

Le categorie invece contengono gli articoli. E’ importante sottolineare che un articolo non può essere inserito in più di una categoria. Pertanto è bene progettare la suddivisione degli argomenti prima di iniziare ad inserirli.

Ma come progettare Sezioni e Categorie? Vediamo come possiamo fare.

Prima di tutto, dobbiamo tenere sempre bene in mente di cosa parlerà il nostro sito e in che modo vogliamo parlarne. Resistiamo alla tentazione di iniziare immediatamente a creare sezioni e categorie, altrimenti tra qualche mese ci accorgeremo che una categoria X doveva invece essere una sezione o viceversa. Dopo qualche mese sarà però troppo tardi per cambiare le cose. Prendiamo invece carta e penna e iniziamo a scrivere una scaletta di sezioni e categorie. Facciamo tutto con calma, aggiungiamo gli argomenti principali, vediamo quali possono essere contenitori per altri, riflettiamo un attimo sul risultato e quando saremo soddisfatti possiamo finalmente iniziare a creare Sezioni e Categorie.

Come creare sezioni e categorie in Joomla

Per creare una sezione, una volta entrati nel pannello di controllo, andiamo in Gestione Sezioni dal Menù Contenuti

Cliccando su Nuovo possiamo inserire facilmente una nuova Sezione, scegliendo nome, descrizione e poco altro.

Allo stesso modo da Gestione Categorie, inseriamo le nostre categorie compilando tutti i campi necessari.

A questo punto siamo pronti per inserire un pò di contenuti, i nostri articoli finalmente!

I brushes (o pennelli) sono diventati ormai spesso indispendabili per la realizzazione di layout, sfondi, banner, blend e molto altro. Spesso ci capita di doverli cercare su internet magari anche per ore senza trovare ciò che fa al caso nostro. Perchè quindi non crearceli da soli?
Prima di cominciare, dobbiamo decidere cosa vogliamo diventi il nostro brush, le sue dimensioni (perchè non essendo un vettore non possiamo ingrandirlo in seguito altrimenti diventerà sgranato e brutto da guardare) e assicurarci che l’immagine sia nitida. Come esempio ho scelto questa simpatica tazza.

Apritela in Photoshop e trasformatela in livello: Livello > Nuovo > Livello dallo sfondo … Altrimenti non potreste lavorarci su.
Per prima cosa, selezionate lo strumento penna … Dobbiamo realizzare un tracciato dell’immagine. Prima di procedere con l’utilizzo dello strumento, prestate attenzione all’opzione selezionata nella sua barra, dovete selezionare l’opzione seleziona tracciato come nell’esempio:

questo per evitare che man mano che disegnate il tracciato esca fuori la forma colorata.
Cominciate quindi a dare forma al vostro tracciato inserendo i punti della penna intorno alla sagoma fino a tornare al punto di partenza e avvalendovi delle manigliette dei punti per tracciare le curve. Spero che sappiate come si utilizza lo strumento penna …
Effettuate la stessa operazione per l’interno del manico perchè ovviamente il bianco dello sfondo non dovrà comparire nel vostro brush …
A questo punto potrete osservare che la vostra tazza è contornata da una linea che rappresenta il tracciato su cui adesso andremo a lavorare.
Aprite la palette tracciato (quella a fianco alla palette livelli. Se non la trovate potete farla comparire andando da: finestra > tracciati). Cosa notate nella palette? C’è un livello con il tracciato che avete disegnato! Dovrebbe essere più o meno così:

Dal menù che trovate in basso nella palette tracciati, selezionate il tasto “Carica tracciato come selezione” e come per magia, la vostra tazza comparirà con il tipico contorno della selezione (come se aveste utilizzato il lazo ad esempio). Procedete da menù con: selezione > inversa (tasti rapidi da tastiera Shift+ctrl+i) e premete il tasto canc.
in questo modo non avremo più il nostro sfondo (direte voi: potevamo farlo anche con la bacchetta magica … Si! Ma se lo sfondo non fosse stato completamente bianco ma con colore non uniforme? Lo strumento penna molto spesso è più preciso). Deselezionate (ctrl+d)
Dobbiamo a questo punto regolare i livelli in modo automatico pertanto: Immagine > regolazione > livelli e nella finestra che esce cliccate sul pulsante Automatico.
Regoliamo quindi la soglia per togliere un pò di colore: Immagine > Regolazione > soglia dando come valore 218 (in questo caso e se non volete mantenere i dettagli, altrimenti a vostro piacimento).
Questo dovrebbe essere il risultato:

Non vi resta che fare: Modifica > Definisci pennello predefinito, dargli un nome e salvarlo.
Questi alcuni esempi dei vari tipi di soglia che ho applicato …

In questo caso la migliore è quella centrale ma in alcuni casi è possibile non oscurare del tutto il soggetto per lasciare dei particolari interessanti come ad esempio:

24 esempi di menù orizzontali in css da cui prendere spunto o ispirazione

Con WordPress per posizionare i contenuti usiamo i widget e le sidebar, con Joomla invece si usano i moduli posizione. Con Joomla 1.0 questo tipo di modulo poteva essere creato direttamente dal pannello di amministrazione e in particolare dalla gestion dei moduli.

Con Joomla 1.5 le cose sono un pò cambiate e non possiamo più creare un nuovo modulo posizione dal pannello. Dobbiamo infatti editare direttamente alcuni file del template.

Nella cartella del nostro template troviamo templateDetails.xml e index.php

• Il primo file da editare è templateDetails.xml. Cercate l’ elenco dei moduli posizione, in genere qualcosa di simile a:

e prima del tag di chiusura </positions> inserite il nome del vostro modulo <position>lamiaposizione. Salvate e aggiornate il file.


• Il secondo file da editare è l’ index.php, sempre nella root del template che volete utilizzare, individuate dove volete posizionare il modulo e inserite il codice html in questo modo:

 

countModules('galleria')) : ?>

Salvate e aggiornate anche il file index.php. A questo punto se tutto è andato a buon fine, quando attivate un modulo, nell’ elenco delle posizioni dovrebbe comparire anche la nuova posizione appena creata.

Quando si crea un layout c’ è sempre il problema di doverlo testare su tutti i browser e principalmente su quelli più utilizzati. Abbiamo già parlato altre volte degli strumenti che abbiamo per testare la compatibilità, sia on line che offline. Ma è bene sapere che esiste uno strumento creato e messo a disposizione gratuitamente direttamente dalla Microsoft: Expression Web 3 Superview è un software nato per confrontare e testare le visualizzazioni su Internet Explorer 6, 7 e 8.

Visualizza il layout all’ indirizzo indicato e permette di avere due visualizzazioni diverse in due finestre affiancate in orizzontale o in verticale. Si possono selezionare i gli elementi e scorrere il layout contemporaneamente nei due browser scelti. Infine è possibile modificare la risoluzione dello schermo.

Poche funzioni ma buone insomma. Unica pecca: non permette la navigazione, quindi se dovete testare una pagina che sta dietro ad un login ad esempio, non è utilizzabile.

L’ effetto rollover su un’ immagine o su un testo è  l’ effetto che vi permette di cambiarne l’ aspetto al passaggio del mouse.

Il testo può cambiare colore e formattazione, mentre l’ immagine può essere sostituita da un’ altra,  simile o completamente diversa.

E’ una delle prime tecniche che si imparano quando si iniziano a studiare i css. Vediamo come fare. Nel mio caso ho un’ icona dei feed rss che vorrei si illuminasse al passaggio del mouse.

Questa è la mia icona rss-icon.png

La schiarisco un pò con Photoshop e ottengo rss-icon-hover.png

inserisco nel template il link ai miei feed in questo modo:

E’ un semplice link come vedete e per poterlo personalizzare e inserire l’ immagine ho aggiunto il tag class=”rss-icon”.

Ora apriamo il nostro foglio di stile e aggiungiamo


.rss-icon {
background-image:url(images/rss-icon.png);
height:29px;
width:29px;
display:block;
}
.rss-icon:hover {
background-image:url(images/rss-icon-hover.png);
height:29px;
width:29px;
display:block;
}

I parametri height e width sono l’ altezza e la larghezza della nostra immagine. Come vedete non c’è nulla di complicato, infatti abbiamo già finito!

Beh si a volte siamo un pò a corto d’ idee e di fantasia, capita purtroppo. Ma come risvegliare i sensi, dove cercare e come trovare l’ ispirazione per ideare il vostro logo?

Sono tante le gallerie che raccolgono i loghi più belli del web e non solo e alcune vi offrono anche la possibilità di condividere il vostro lavoro. Ottimi posti anche se volete farvi un pò di pubblicità, dunque. Ma vediamo subito quali sono i migliori siti web che raccolgono i migliori loghi.

Allora l’ avete trovata?

Esistono molti modi per scontornare una foto ma può capitare di avere tra le mani la foto di una modella ad es. che abbia i capelli in questo modo … Secondo voi sarebbe possibile scontornare questa foto con il lazo o la penna? Si, se vogliamo che i capelli vengano tagliati (ma noi non facciamo i parrucchieri ).

Mi è capitato spesso di dover utilizzare un soggetto cambiando lo sfondo ma se la foto è questa l’unico modo per farlo è utilizzando lo strumento livelli. Vediamo come fare!
Aprite la foto in photoshop, se la foto è bloccata (ossia il livello è denominato sfondo e ha un lucchetto) fate doppio clic sul livello per poterci lavorare.
Applicate alla foto una maschera di livello e spostatevi poi nella palette canali. Per far si che lo scontorno sia efficace, dovete scegliere dei tre canali, quello più scuro quindi il blu. Duplicate il canale trascinandolo verso il pulsante del nuovo livello che trovate in fondo alla palette e rinominate il livello a piacimento (io l’ho chiamato secondo).
Come avrete notato, il livello del canale è diventato in bianco e nero … Proseguite in questo modo:
Immagine > regolazioni > livelli (tasto rapido da tastiera ctrl+l). Nella finesta che si apre, troverete una specie di grafico di intensità del colori, quel che serve a noi è il primo quadratino che vi ho cerchiato in rosso in questo esempio:

Con il livello del canale duplicato selezionato, spostate solo questo quadratino verso il secondo finchè i capelli non diventano totalmente neri (in questo caso, il valore del quadratino deve corrispondere a 98 approssimativamente). La foto dovrebbe essere così:

Date l’ok e scegliete lo strumento brucia rappresentato da una mano chiusa (tasto rapido da tastiera O ). Impostate le opzioni della palette in questo modo:

Passate quindi con il pennello su tutte le parti del corpo rimaste più chiare affinchè diventi tutto nero come i capelli e il resto ovviamente facendo attenzione a non uscire fuori dai bordi.
Dovrebbe uscirvi un risultato simile a questo:

Nota: nel caso vi siano parti più chiare nell’immagine che non debbano essere scontornate, potete utilizzare lo strumento brucia per schiarirle ulteriormente ed evitare che vengano fuori insieme al soggetto.
A questo punto scegliete dal menù immagine > regolazioni > inverti, l’immagine vi apparirà come una specie di negativo.
Ctrl+click del mouse sul livello per selezionare la parte mascherata, selezione > inversa (tasto rapido da tastiera Maiusc+Ctrl+i), passate nella palette livelli, cliccate sul livello, premete il tasto canc e deselezionate (ctrl+d).
Lo sfondo sarà quindi cancellato e la vostra modella sarà proprio come era all’inizio ma senza sfondo e con tutti i capelli

A questo punto potete applicare lo sfondo che volete e utilizzarla per qualsiasi scopo.