Your Inspiration Magazine #01 by Nando Pappalardo

www.yourinspiration-magazine.com

È NATA LA NUOVA RIVISTA PER I WEB DESIGNER Ora puoi avere il web a portata di mano Tutoria l WORD PRESS Diam uno sg o ua al Looprdo

Errori da freelancer: alcuni consigli per lavorare meglio

Sketch e doodles

per un (web) design originale e creativo

Web

Tutorial

Pensieri e Parole

Sicurezza e siti web:

PHP

Prendere ispirazione o copiare:

come trovare le cause di code injection, tecniche di validazione

come sviluppare una navigazione dinamica e mantenibile

TUTORIAL Come disegnare un layout in stile magazine?

che differenza c’è?

Luglio 2010 ·· N° 1 web: www.yourispiration-magazine.com web: www.yourispirationweb.com

COLLABORA CON YIM

Your Inspiration Magazine è aperto a chiunque desideri condividere le proprie conoscenze attraverso articoli tematici, tutorial, guide e quant’altro. Inoltre, sei invitato a far parte del team se vuoi: - Collaborare nelle fasi di progettazione e impaginazione del magazine; - Occuparti della revisione degli articoli; - Distribuire YIM nella tua zona, contribuendo cosi a far conoscere il progetto e a conferirgli la visibilità che merita. - Contribuire alla ricerca di sponsor che, acquistando spazi pubblicitari all’interno della rivista, permettano di coprire i costi di produzione.

per saperne di piu: http://www.yourinspiration-magazine.com/collabora/

Editoriale ·· Luglio 2010 ·· N° 1 ·· ·· www.yourinspiration-magazine.com ·· ·· info@yourinspiration-magazine.com ··

AUTORI: ·· Sara Presenti ·· ·· Web Designer ··

Un punto d’incontro ideato da e per i web designer italiani, per offrire informazioni utili in un vero e proprio magazine, assicurandone la portabilità dei contenuti anche offline. Sempre più lettori desiderosi di intraprendere la professione del web designer ci chiedono quali riviste del settore possiamo consigliare per facilitare la loro formazione. In Italia, in effetti,

·· Nando Pappalardo ·· ·· Trainer ··

non si trova molto in materia e quel poco che c’è non sembra analizzare come dovrebbe gli argomenti cardini di questa professione (usabilità, accessibilità, design, ecc.) spaziando invece su argomenti secondari che non sempre destano l’interesse

·· Giustino Borzacchiello ·· ·· Web Designer ··

di chi vuole apprendere questa professione. Ci siamo detti allora: perché non provare a creare una rivista “Open Source” scritta direttamente da web designer per

·· Marco Di Mauro ·· ·· Studente ··

web designer e aspiranti tali? Lo scopo di questo magazine è quello di creare un prodotto che in questo momento nel nostro panorama è richiesto,

·· Maurizio Tarchini ·· ·· Programmatore ··

ma non c’è. Non c’è nessun fine di lucro, il progetto nasce per essere completamente free. Inizialmente la rivista sarà distribuita solo in formato digitale

·· Cristian Angelini ·· ·· Informatico ··

(pdf da scaricare o da sfogliare online) ma l’obiettivo che intendiamo raggiungere è di stampare la rivista per distribuirla come free - press (gratuitamente) nelle principali città italiane. Anche se in questo primo numero troverai articoli pubblicati su Your Inspiration Web il mese scorso, il prossimo numero raccoglierà materiale inedito preparato e raccolto dai diversi web designer che stanno aderendo all’iniziativa. Nell’attesa del prossimo numero ti auguriamo buone vacanze e buona lettura sotto l’ombrellone!

Nando Pappalardo

PROGETTO GRAFICO ·· Salvatore Giuliano ·· ·· Web & Graphic Designer ·· ·· www.giulianosalvatore.com ··

Direttore Responsabile: Nando Pappalardo Progetto Grafico: Salvatore Giuliano Your Ispiration Magazine non è una Testata Giornalistica poichè i contenuti della rivista stessa non hanno una periodicità recolare e quindi ai sensi della legge n. 62/2001 non può essere considerata un prodotto editoriale

Your Ispiration Magazine è una rivista dedicata al web design che offre materiale (risorse, articoli di ispirazione e di dibattito, tutorial, guide) realizzato da diversi professionisti del settore. Un punto d’incontro ideato e progettato da e per i web designer italiani, per offrire informazioni utili in un vero e proprio magazine, assicurandone la portabilità dei contenuti anche offline.

Somm Contenuti IN QUESTO NUNERO

04 08 10 14 18 22 30 34 32 98 116

ERRORI DA FREELANCE: ALCUNI CONSIGLI PER LAVORARE MEGLIO DIBATTITO: ESTETICA VS FUNZIONALITÀ PRENDERE ISPIRAZIONE O COPIARE? CHE DIFFERENZA C'È? SICUREZZA E SITI WEB: CODE INJECTION COME UTILIZZARE LE ESPRESSIONI REGOLARI IN JAVASCRIPT SICUREZZA E SITI WEB: COME TROVARE LE CAUSE DI CODE INJECTION, TECNICHE DI VALIDAZIONE PILLOLE CSS: COME MODIFICARE LA RESA VISIVA DEL TESTO CON LA PROPRIETÀ WHITE-SPACE

108··

SICUREZZA SITI WEB: CODE INJECTION, ESCAPING ED INDIREZIONE LA NOSTRA RACCOLTA DI TECNICHE E TUTORIAL DATE UNO SGUARDO ALLE NOSTRE GALLERIE PER PRENDERE ISPIRAZIONE SUGGERIMENTI DALLA REDAZIONE DI YOUR INSPIRATION WEB

02 ·· your inspiration magazine

PRENDERE ISPIRAZIONE O COPIARE? CHE DIFFERENZA C'È

PENSIERI E PAROLE

10··

Numero

mario

TUTORIAL

GALLERY

Apache:

Wordpress:

PHP:

Wordpress:

70 78 84

Wordpress:

Il mod_rewrite e la magia di riscrivere gli URL Come realizzare l'Header del tema [Parte 1] Come sviluppare una navigazione dinamica e mantenibile Come realizzare l'Header del tema [Parte 2] Diamo uno sguardo al loop

Wordpress:

Aggiungiamo la Sidebar al nostro tema

WebDesign:

Come disegnare un layout in stile magazine Come rendere dinamici Header e Sidebar del template?

A colpo d’occhio 98 Gallery Ispirazione: Africa, terra di colori e creatività MAGGIO: SUGGERIMENTI DELLA REDAZIONE

SUGGERIMENTI

116··

108 Gallery Sketch e Doodles per un (web)design originale e creativo

·· 03

PENSIERI E PAROLE ERRORI DA FREELANCER: ALCUNI CONSIGLI PER LAVORARE MEGLIO

•• Scegliere di lavorare come freelance comporta, questo è ovvio, tutta una serie di vantaggi e svantaggi con cui ognuno di noi deve in qualche modo relazionarsi. Da una parte la tanto agognata libertà professionale e la voglia di autogestire la propria professionalità, dall’altra l’insicurezza economica (perlomeno nei primi tempi), le difficoltà di gestione burocratica (come stilare un buon preventivo? Quale tipo di contratto utilizzare?) e organizzativa (come trovare i primi clienti?

Autore: Sara Presenti

Su quanti progetti posso lavorare contemporaneamente?).

Lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

In realtà, tolte le difficoltà iniziali dettate perlopiù dall’inesperienza, il freelancing offre

www.mascaradesign.it

Il passaggio da dipendente a lavoratore autonomo è sempre molto entusiasmante

più opportunità che vincoli e ostacoli, sempre che si sappia reagire in modo appropriato e positivo alle varie problematiche che via via si presenteranno, e si riesca ad evitare quei piccoli errori tipici di chi lavora in libertà e deve rendere conto solo a se stesso delle proprie scelte e azioni. Di quali errori sto parlando? Vediamoli insieme.

PRENDERE IL PROPRIO LAVORO ALLA LEGGERA e il primo errore che può capitare di commettere, quasi sempre inconsciamente, è quello di prendersela troppo comoda: finalmente possiamo annullare l’odiosa sveglia delle sette del mattino, e prenderci una pausa decente per il pranzo, e magari dopo il pranzo riposare un’oretta…per poi ritrovarsi con una marea di lavoro accumulato da sbrigare e decine di scadenze non rispettate.

04 ·· your inspiration magazine

Errori da freelancer: alcuni consigli per lavorare meglio Essere freelance non significa non avere un capo, ma essere capo di te stesso e dipendente di ogni tuo singolo cliente, a cui devi la massima professionalità e dedizione. Il mio consiglio è quello di darti fin da subito delle regole da rispettare circa orari, pause e organizzazione del lavoro. Considera che, a differenza di quando lavoravi come dipendente, dovrai ritagliare del tempo anche per elaborare delle strategie di vendita, per contattare potenziali clienti, per aggiornare il tuo portfolio e chi più ne ha più ne metta…un lavoratore autonomo non può permettersi il lusso di sedersi sugli allori! Prima di rilassarsi c’e’ ancora molto lavoro da fare.

I miei consigli: [1] ·· Elimina le distrazioni: se tu fossi dipendente in orario di lavoro non potresti ricevere telefonate dal tuo migliore amico o parlare liberamente su skype (certo, come no..) o perdere ore e ore saltellando da un blog sul web design all’altro.. tutte queste distrazioni ti fanno solo perdere tempo

staccare la spina, almeno per un po’. Una bella doccia fresca

e concentrazione, rendendo impossibile portare a termine

(soprattutto in questi mesi di calura che, ahimè, ci aspettano),

un progetto. Stabilisci dei momenti precisi per controllare la posta

una pausa per un caffè o un gelato, mezz’ora di televisione

elettronica, togli la suoneria al cellulare e chiudi i social network.

o di lettura di un libro. Le pause ci rendono sereni, appagati e più produttivi, questo è ormai un dato di fatto. Il mio consiglio,

[2] ·· Compra un’agenda in cui contrassegnare, quotidianamente (per una maggiore organizzazione puoi gestire anche le varie ore del giorno) le attività da svolgere, ordinando le stesse per priorità.

in questo caso, è solo uno: approfittane!

ACCETTARE OGNI LAVORO CHE VIENE OFFERTO

[3] ·· Lascia alla fine della giornata le attività più leggere come backup, aggiornamenti e risposte alle e-mail.

Leggo spesso di freelance che si lamentano per la mole di lavoro

Queste attività richiedono un minor dispendio di energia

che hanno da svolgere, perché non esiste sabato e domenica,

e meno concentrazione rispetto a quelle principali.

perche si lavora “più che da dipendenti”.

NON CONCEDERSI TEMPO

Questo può anche essere vero, ma in realtà nessuno ti obbliga ad accettare ogni offerta di lavoro che ti viene proposta: sei tu che valuti, soppesi le opportunità (tot ore di lavoro, tot ricavi)

D’altro canto anche massacrarsi con ore e ore di lavoro

e scegli se sei in grado di accettare un lavoro in più o meno.

non ha alcun senso: inutile darsi all’attività autonoma da casa se poi non ci si alza dalla scrivania per tutto il giorno o si saltano

Non essere ingordo: anche se sei agli inizi e l’assenza

i pasti per poter lavorare di più. Un aspetto positivo dell’attività

di uno stipendio sicuro si fa sentire, non dire di si ad ogni lavoro,

freelance è la possibilità di concedersi degli spazi e di poter

a prescindere da quanto sarai pagato o da cosa si aspetta da te

·· 05

PENSIERI E PAROLE

ERRORI DA FREELANCER: ALCUNI CONSIGLI PER LAVORARE MEGLIO

il tuo cliente. Valuta sempre i tempi che ti vengono concessi

non preventivato, scrivi una postilla e falla firmare al cliente:

e gli altri progetti su cui stai già lavorando e sii pronto a declinare

a meno che egli non si meriti la tua fiducia incondizionata,

l’offerta se ti rendi conto che, semplicemente, non puoi farcela.

non svolgere lavoro extra senza essere in qualche modo tutelato

Sei tu il responsabile delle tue scelte e sei tu che dovrai rispondere di eventuali ritardi di consegna o di progetti mal realizzati: sempre meglio essere onesto riconoscendo i propri limiti che fare

DARE TROPPA CONFIDENZA AL CLIENTE

una pessima figura e dare prova di essere un dilettante alle prime armi che non sa organizzare il proprio lavoro o che, per qualche

In un mondo ideale questo non verrebbe considerato

soldo in più, ha accettato un lavoro per cui non possiede le giuste

un errore ma tant’é. Può succedere che, per carattere

competenze.

o per una spontanea simpatia, o per chissà cos’altro, si conceda al cliente più confidenza di quella che é opportuna per

Riassumendo: meglio due clienti soddisfatti che dieci clienti

un rapporto professionale alla pari. Questo spesso si traduce

trascurati, non credi?

con richieste pressanti di lavoro gratuito (“tanto é una cosa veloce,

NON TUTELARE IL PROPRIO LAVORO CON UNA SCRITTURA PRIVATA Questo é un principio cardine dell’attività freelance: sii l’avvocato di te stesso. Tutto ciò che ha a che fare con il servizio offerto, i prezzi, le modalità di pagamento e i tempi di consegna deve essere messo nero su bianco e firmato da entrambe le parti. Anche se il prezzo del servizio viene accettato a voce, o tramite e-mail, invia e fai contrassegnare un preventivo ufficiale. Inoltre, anche se il cliente é simpatico e ti affida più progetti in un arco di tempo, per ogni singolo progetto stila un contratto contenente prezzo, lavoro da svolgere e tempi entro cui il progetto sarà terminato e consegnato, anche se questo significa inviare tre contratti nell’arco di una settimana e sembra, per entrambe le parti, una routine burocratica tediosa ed inutile. Ogni qualvolta verrà richiesta una modifica o un lavoro aggiuntivo

06 ·· your inspiration magazine

la fai in un attimo!”), con ritardi di pagamento (“dai, vienimi incontro”), con telefonate ad ogni ora del giorno e cosi via perché, purtroppo, é cosa umana e (in)giusta che, se ti concedo un dito,

LINK: http://ow.ly/2d4iy

tu di conseguenza ti sentirai in diritto di prendermi tutta

solo tuo per prenderti cura delle tue competenze: compra (e leggi)

una mano, e senza neanche chiedermi il permesso.

libri, prendi una pausa per dare un’occhiata ai blog sul settore

Il mio consiglio non è, ovviamente, quello di mantenere a priori

o per seguire un tutorial, tieniti in esercizio e cerca sempre

le distanze con il cliente: siamo umani, ed è umano che nascano

modi migliori per fare quello che fai: se non ne esistono oggi,

simpatie, magari amicizie, o che a lungo termine si rafforzino

sicuramente esisteranno domani, o il giorno dopo ancora.

i rapporti di collaborazione e di fiducia reciproca. Quello che ti consiglio è di essere pronto a rimettere i paletti

CONCLUSIONI

non appena la tua disponibilità viene travisata e sfruttata per ottenere un prezzo più vantaggioso, uno sconto,

In questo articolo ho voluto darti, da amica, qualche consiglio

un lavoro extra, un qualsiasi tornaconto da parte del cliente.

riguardante la gestione della tua attivita’ di freelancer: soprattutto se sei alle prime armi, o se stai pensando a lasciare

Difendi sempre la tua professionalità: questo non ha niente a

la comoda culla del lavoro salariato per metterti in proprio, alcune

che vedere con la tua simpatia e con le tue capacità interpersonali.

di queste dritte potrebbero tornarti utili.

SMETTERE DI STUDIARE E MIGLIORARSI

Se invece ti riconosci in qualcuno di questi errori, sii sincero… qual’e’ il tuo punto debole? in quale di questi “errori da freelancer” ti riconosci di piu? ••

Tanto lavoro e poco tempo, un gran brutto mix per un web designer freelance. Le tecnologie vanno avanti, le tendenze cambiano, escono nuovi libri e nuovi modi (quasi sempre migliori) per svolgere lo stesso lavoro: chi si ferma è perso, si dice. Nel nostro lavoro continuare a studiare, leggere e rimanere informati e’ essenziale dato che ci vuole veramente poco per rimanere indietro ed essere etichettati come obsoleti e disinformati. Cerca quindi di ritagliarti uno spazio ·· 07

PENSIERI E PAROLE DIBATTITO: ESTETICA VS FUNZIONALITÀ

Dibattito: estetica vs funzionalità •• I Mondali di calcio: quattro anni, d’astinenza adepti e praticanti, di pace per gli anti-pallonari, di attesa per chi trasforma, la più importante manifestazione calcistica del pianeta, in espediente per avviare business, fare affari sull’onda dell’entusiasmo e del momento. D’altronde, un target planetario ingolosisce qualunque azienda, anche la più lontana dal mondo del calcio, figuriamoci quindi quelle legate

Autore: Marco Di Mauro

a doppio filo a questo sport, come ad esempio la Adidas, che dal 1930 realizza in esclusiva i palloni del Mondiale.

Chi è l'autore: Marco Di Mauro. Non sapendolo bene ancora lui stesso, non è in grado di fornire adeguate risposte in merito; attualmente frequenta la Facoltà di Ingegneria Gestionale di Catania.

Valutarne l’evoluzione, soffermarsi sulle ragioni che hanno portato dalla semplice cura tecnologica all’attenta strategia di marketing, basata su design e nome stesso del pallone, rende l’idea di come il mondo del calcio sia passato dall’essere un semplice sport ad un vero e proprio salvadanaio da rompere all’occorrenza, anzi, alla ricorrenza giusta. Così, se nel 1970 il pallone cambia radicalmente design e struttura in funzione di una nuova tecnologia di costruzione, che permette una forma molto più sferica dei precedenti palloni in cuoio rosso, dal 1978 in poi è l’immagine commerciale da dare al pallone e non più il suo contenuto tecnologico a spingere la casa tedesca a cambiare colori e design dei palloni dei Mondiali, pur restando ogni cambio di look simbiotico ed indicativo d’una qualche (ma non meglio precisata o importante) miglioria tecnologica. Dal 1990 infatti, con l’introduzione della schiuma sintetica, ben poco è cambiato nella progettazione delle sfere da calcio più moderne. Eppure, esteticamente, com’è verificabile dalla foto, il design è stato completamente stravolto.

08 ·· your inspiration magazine

LINK: http://ow.ly/2d4j6

Il principio è chiaro: se per

Otto

una quindicina di giorni i palloni

di forma sferica in EVA e TPU

dovranno

sono

esigenze

accondiscendere ed

alle

richieste

alle

tra

dei

elementi

tridimensionali

saldati loro

termicamente si

armonicamente

calciatori impegnati nei mondiali,

congiungono attorno

alla

carcassa interna, e il risultato è una

che ne decreteranno il successo

sfericità perfetta.

tecnologico, per i successivi quattro anni saranno i giocatori di piazzette

Venendo all’introduzione di migliorie

e campetti ad averlo tra i piedi, qualche milione

tecnologiche,

di “clienti”, e saranno proprio e solo loro a decretarne il successo commerciale, preferendolo ad altri sugli scaffali dei negozi sportivi, non provandolo ma guardandolo.

però:

«Le

“aero

grooves”

sono scanalature chiaramente visibili sulla superficie e che circondano l’intero pallone in modo ottimale. Questi solchi conferiscono proprietà ineguagliabili di stabilità in volo e rendono

Ardua la scelta tra un “buon” pallone ed un “bel” pallone,

questo pallone il più preciso tra quelli realizzati da adidas».

sia nel comprarlo che costruirlo; per quanto emerge dalle prime impressioni dei calciatori impegnati nei Mondiali del Sud Africa

I pareri dei giocatori sono ben distanti dai proclami

2010, pare che Adidas, nel suo “Jabulani” (pallone ufficiale

della casa costruttrice:

del mondiale), si sia concentrata fin troppo sull’estetica, sul marketing, sul design, dando poco (o per nulla, ndr) ascolto

[Buffon] ·· “Il nuovo modello è assolutamente inadeguato

alle istanze di portieri e calciatori:

e credo che sia vergognoso far disputare una competizione così importante, alla quale prendono parte tanti campioni,

tratto da “Il Corriere dello Sport”

con un pallone del genere”.

[IL NOME] ·· “Jabulani” è una parola in lingua bantu isiZulu,

[Julio Cesar] ·· “Un pallone da supermercato”.

una delle undici lingue ufficiali della Repubblica Sudafricana [...] significa “festeggiare” o “celebrare” [...] il nome

[Casillas] ·· “È davvero triste il fatto che una competizione

del nuovo pallone sta a simboleggiare la grande festa

così importante come i Mondiali debba essere giocata

calcistica che gli appassionati di calcio desiderano celebrare

con un pallone davvero orrendo”.

il prossimo anno insieme al popolo sudafricano.

[Marchetti] ·· “Quando si studiano i nuovi palloni [IL DESIGN] ·· Undici colori diversi sono stai utilizzati

si consultano sempre i giocatori: ma sempre chi calcia,

nell’undicesimo pallone Adidas per i campionati

non chi para. La Fifa dovrebbe mettere in commissione

del mondo, undici colori che simboleggiano gli 11 giocatori

anche un portiere”.

di ciascuna squadra, le 11 lingue ufficiali del Sudafrica e le 11 tribù sudafricane che fanno di questo paese uno

Hanno avuto da ridire anche gli attaccanti: “È difficile anche

dei più etnicamente “variegati” del continente africano.

per noi – spiegava Giampaolo Pazzini – perchè se arriva

Il design dai colori vivaci riconduce così l’enorme molteplicità

un cross e tu calibri il colpo di testa, poi il pallone scarta

del paese in un’unità armonica (“Diversity in Unity”).

e rischi il liscio. Per me è un disastro”.

Quattro elementi triangolari su sfondo bianco conferiscono al pallone un aspetto unico, in cui si riconosce lo spirito

Dove stia la verità non è dato saperlo, di certo tra qualche

africano. Così come nel rivestimento esterno dello stadio

mese lo “Jabulani” starà in tutte le vetrine dei negozi sportivi

Soccer City di Johannesburg, anche nei singoli elementi

del mondo, e quelli saranno sì i giorni della verità, i più attesi

di design del pallone si esprime l’enorme bellezza

dall’Adidas. ••

dei colori del Sudafrica. Conformazione tridimensionale dei pannelli del pallone.

·· 09

PENSIERI E PAROLE PRENDERE ISPIRAZIONE O COPIARE: CHE DIFFERENZA C’È?

Articolo da ato segnal ner

t o p e d g

si Webde

SHBkU bit.ly/9 http://

•• Qualche settimana fa sul nostro forum l’utente Giavara ha posto agli utenti di Your Inspiration Web un intrigante interrogativo: “Secondo voi è corretto “prendere ispirazione” da lavori che vedete in giro?” ovvero: in poche parole, si può veramente parlare di ispirazione, e come tale di un processo creativo inevitabile ed eticamente corretto, o quando si “prende ispirazione” in realtà si tende a copiare più’ o meno spudoratamente e consapevolmente – il lavoro altrui?

Autore: Sara Presenti Partiamo dal presupposto che tra prendere ispirazione e copiare c’é un confine molto Lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

www.mascaradesign.it

labile che spesso, soprattutto se si é frustati dopo ore passate a cercare la giusta idea, é veramente semplice oltrepassare. Non sempre si tratta di disonestà (del resto sono una persona molto tollerante): semplicemente quel menù ci sembra perfetto per il progetto su cui stiamo lavorando, e anche quella sfumatura ha una tonalità cosi calda, per non parlare del background che e’ esattamente come quello richiesto dal nostro cliente…e cosi via, finché, quasi senza rendersene conto, il sito che abbiamo ammirato nella gallery di turno adesso é interamente nel nostro documento di lavoro su Photoshop. O almeno, una brutta copia, perché quando si copia per intero il design realizzato da qualcun altro, è un assioma inconfutabile che se ne realizzerà soltanto una brutta copia.

ALCUNI BUONI MOTIVI PER NON COPIARE IL LAVORO ALTRUI  Se non fai, non sai. Limitandoti a copiare di sana pianta pulsanti, menu e background disegnati da altri, ti precludi la possibilità – e il dovere, anche – di camminare

10 ·· your inspiration magazine

Prendere ispirazione o copiare: che differenza c’é? Scopriamolo insieme

con le tue gambe nel mondo del web design.

non ha trovato il progetto dentro l’uovo di pasqua,

Non imparerai mai come si realizza quell’effetto cosi piacevole

molto probabilmente ci ha passato ore e solo per questo merita

a vedersi e non potrai mai essere indipendente e spontaneo

un po’ di rispetto. Ma copiare é scorretto soprattutto

nel tuo lavoro, dato che a lungo andare diventeresti dipendente

nei confronti di chi ha investito su di te e ti ha creduto degno

dalla creatività altrui. E se un cliente ti richiedesse un effetto

di fiducia tanto da assumerti e pagarti per il tuo operato:

particolare che, per forza di cose, non puoi copiare?

stai, in pratica, truffando il tuo committente. Gli stai

 Ciò che é bello per Tizio, può non funzionare per Caio.

vendendo un oggetto che già appartiene ad altri e che non hai nessun diritto di far passare come tuo. E se proprio l’argomento

Un sito non é solo estetica, questo ormai é ovvio.

etica ti lascia impassibile, ricordati che con la nascita

Per cui, anche se ti innamori follemente di un background

delle gallery css oggi è veramente semplice risalire a cloni

grunge o di un certo pulsantone verde che ad occhio sembra

e brutte copie: per quel che mi riguarda, solo in questa

proprio fare al caso tuo, non é assolutamente detto

settimana ho notato 6 cloni spudorati di altrettanti design

che questi elementi siano i più appropriati per il design che devi

originali. Perciò, se proprio ti prudessero forte le mani in preda

progettare per il tuo cliente. Non sai perché il designer ha scelto

ad una cleptomania artistica acuta, ricordati questo:

quel particolare colore o perché ha posizionato il box proprio

e se qualcuno se ne accorge? Sarebbe veramente difficile

a destra del menu. Ci sono strategie grafiche, estetiche e visive

rifarsi un nome, senza contare i possibili risvolti legali.

che lavorano solo nella loro univocità e che raramente possono avere gli stessi risultati su progetti per cui non sono stati ideati.

ISPIRAZIONE O PLAGIO?

 Se mettere in codice richiede 3 ore, copiare lo stesso

Disse T.S.Eliot: “I poeti immaturi imitano, i poeti maturi rubano.

codice ne richiede 9. Se hai mai provato a modificare codice

I cattivi poeti deturpano ciò che prendono e i grandi poeti

sviluppato da altri, sai benissimo di cosa parlo.

lo trasformano in qualcosa di meglio, o almeno di diverso”.

Copiare interamente il codice di un sito altrui significa perdere ore e ore cercando di modificare classi e markup,

Non siamo poeti, ma la teoria é giusta. L’ispirazione funziona

di comprendere dove si trovano gli stili per i link e perché,

solo se, alla fine, si riesce a creare qualcosa di totalmente

proprio in quel punto, é stato inserito un float.

nostro. Se non migliore, perlomeno diverso. Va benissimo

E tutto questo ad ogni aggiornamento, per ogni piccolo

quindi fare stamp sulla pagina in questione e incollarla sul nostro

tentativo di personalizzazione, perché il metodo di sviluppo

Photoshop, ma solo se il nostro intento é quello di assorbire

é personale, una specie di impronta del programmatore,

le tecniche e lo stile dell’autore, comprenderle e riadattarle

e come tale richiederà patimento e sacrificio anche per

al nostro progetto. Cosa ti ha colpito cosi tanto? Come si realizza

le modifiche più stupide. Hai davvero tempo da perdere?

questa sfumatura? Semplicemente provando, accostando,

Non sarebbe più soddisfacente imparare a fare da sé?

paragonando i nostri risultati con l’originale, fino a che

 Copiare é eticamente scorretto: il motivo più ovvio

non otteniamo l’effetto voluto. In questo modo non si può più parlare di plagio ma di studio, case-study per l’esattezza,

e rilevante. Copiare é sleale nei confronti di chi ha lavorato

perché solo sperimentando possiamo imparare e migliorare

duramente per ottenere quel risultato che tanto ti ha colpito:

le nostre capacità professionali.

·· 11

PENSIERI E PAROLE

PRENDERE ISPIRAZIONE O COPIARE: CHE DIFFERENZA C’È?

COME PRENDERE ISPIRAZIONE, MA SENZA COPIARE Non sono molto d’accordo con chi demonizza le gallery css come

che tanto ti piace, senza metterci niente di tuo.

DALLA TEORIA ALLA PRATICA: BE INSPIRED

un “monito a rubare il design di terzi”: il libero arbitrio dell’uomo Un articolo molto simpatico apparso tempo fa sul blog

é assai vasto e comprende anche la libertà di scegliere cosa é bene

e cosa é male, indipendentemente dall’occasione che gli si pone

di ThemeForest mi ha dato un’idea: che ne dici di fare

davanti.

un esempio pratico? Prendiamo ispirazione da qualche sito trovato qua e là

La ricerca dell’ispirazione e’ un processo lungo e creativo

e realizziamo il nostro layout, stando ben attenti a non copiare

e non c’é assolutamente niente di riprovevole o truffaldino

(non é questo lo scopo di questo articolo): quello che dobbiamo

in questo. Provare per credere.

fare é prendere spunto e rielaborare alcune proposte grafiche che, a prima vista, ci ispirano e ci sembrano adatte al nostro scopo.

[Step 1] ·· Non cercare ciò che devi realizzare, semplicemente osserva.

Il sito che dobbiamo realizzare questa settimana riguarda,

L’errore più comune é quello di cercare un layout che ricalchi

facciamo un esempio…un locale glamour, un posto dove é

perfettamente ciò che dobbiamo realizzare: se devi disegnare

possibile mangiare, bere e ballare. Un punto di ritrovo dei giovani,

un layout per un sito di un’impresa edile, non limitarti a scartabellare

diciamo. E, dopo un bagno di ispirazione, il risultato é il seguente:

la categoria “building” delle gallery, anzi evita proprio di farlo. Ciò che cerchi é l’ispirazione generale per il tuo design, quindi evita di restringere il campo proprio all’area tematica di tuo interesse: é ovvio che, in questo modo, finirai facilmente con il ricalcare il lavoro di qualcun altro! Perciò, osserva semplicemente, senza un criterio logico: guarda i menù, gli effetti di background, la tipografia. Annota i dettagli che, a occhio, ti colpiscono di più e che a intuito credi possano fare al caso tuo. Fai una specie di collage, un

patchwork

più

siti,

prendendo

da ognuno un particolare che credi di poter adattare/personalizzare nel tuo progetto.

[Step 2] ·· Non prendere ispirazione da un solo sito, anche se perfetto Anche se ti innamori a prima vista di un sito e sai che sarebbe perfetto per i tuoi scopi, non commettere l’errore di prendere spunto solo da questo per il design del tuo progetto. Cerca ancora, distogli il focus, cerca di creare delle

combinazioni

mentali,

fai

qualche

schizzo sul blocco note. Deciditi a prendere solo il meglio di quel tema e di cercare altrove per il resto del layout, altrimenti corri il rischio di copiare il sito

12 ·· your inspiration magazine

Niente male, no?

1 http://bit.ly/3OJnXb

LINK: http://ow.ly/2d4jA

Ma vediamo a cosa mi sono ispirata durante la fase

tutto un altro design, che io stessa ho ideato e personalizzato:

di realizzazione del layout. Per prima cosa mi sono innamorata a

diverso è il taglio delle foto, il posizionamento e le scritte sotto

prima vista della palette di colori del sito 2SHS Nutrition e l’ho

di esse. E comunque l’idea della polaroid è ormai piuttosto

voluta riproporre, con una gradazione simile, nel mio layout.

comune nel web design.

Girando per le gallery ho trovato 3un sito dalla testata veramente

Infine, per quanto riguarda il footer, mi sono ispirata

accattivante: da questa ho preso l’idea della foto a tutto schermo

totalmente al sito 5Chocri.de: diviso in due sezioni, separate

e del menu sopra di essa, con le voci accompagnate da icone

da un’ombreggiatura, la sezione superiore più chiara di quella

tematiche.

inferiore… e cosi via, fino a raggiungere il seguente risultato:

Come vedi lo stile é quello, ma di certo non si può dire che

Molto simile, n’est pas? Eppure cosi diversi.

ho copiato il menu del sito di Ergpa: ho di fatto utilizzato una

Questo perché mi sono ispirata, é vero, ma non ho

trasparenza, le icone sono sopra e non laterali alle voci di menu,

assolutamente copiato né scimmiottato il lavoro altrui.

font e stile delle icone completamente diverse, inoltre non ho né previsto uno slider, né inserito del contenuto testuale sulla foto,

CONCLUSIONI

e il logo invece di essere posizionato in una sezione apposita in alto a sinistra, é inserito all’interno del background.

In questo articolo abbiamo visto, con alcuni validi esempi,

Sono più le similitudini o le differenze, a questo punto?

qual’e’ la sottile (ma forse neanche tanto) differenza che c’e’ tra prendere ispirazione da un sito e copiarne o ricalcarne

All’interno del layout, ispirandomi ad un sito visto pochi giorni fa

pesantemente il design e lo stile. Pensi sempre che prendere

su Css Mania, ho inserito alcune polaroid, che trasmettono l’idea

ispirazione sia eticamente scorretto? Che cosa ne pensi

di freschezza e giovinezza necessarie al mio locale.

dell’argomento “cloni & web design”? Condividi le tue idee

ed esperienze con il popolo di YIW! •• Come puoi vedere non hanno assolutamente niente in comune: mi sono ispirata al sito JustALove, é vero, ma le polaroid hanno

2 http://bit.ly/bcHz0i

3 http://bit.ly/7xp289

4 http://bit.ly/4uXWdd

5 http://bit.ly/17ni36

·· 13

WEB SICUREZZA E SITI WEB: CODE INJECTION

•• Dopo aver parlato di sicurezza su web in generale, ed aver osservato l’enorme complicazione che sta dietro alla semplice navigazione di un sito web, ti sarai reso conto dell’impossibilità di poter garantire la sicurezza totale. Ma come realizzatori di siti web possiamo fare molto, partendo dal rendere il nostro HTML più robusto senza scordarci di JavaScript, PHP e tutti gli altri linguaggi che dobbiamo gestire in un sito. Mettere in sicurezza il proprio codice è il primo passo, e quello in cui noi,

Autore: Cristian Angelini

come realizzatori di siti web, abbiamo maggior controllo (e responsabilità).

Cristian è un informatico freelance, specializzato nella progettazione e produzione di siti web e, più in generale, nelle tecnologie internet e correlate diavolerie.

Come fare? La prima cosa da evitare è pensare esclusivamente in termine di HTML. Un sito web è un’opera che integra numerosi linguaggi (uso una definizione un po’ più ampia di quello che è in termini informatici un linguaggio, non si offendano i puristi):

http://www.cangelini.com/sito-it/

 HTML/HTTP

 JAVASCRIPT  CSS

 PHP

 SQL

 SHELL DI COMANDI/NAVIGAZIONE FILE SYSTEM  ESPRESSIONI REGOLARI

Nella creazione di un sito web, io in realtà incrocio e collego tra di loro tutti questi linguaggi: creo HTML e CSS partendo da PHP, creo query in SQL ed espressioni regolari

14 ·· your inspiration magazine

Sicurezza e siti web: code injection Con questo termine vengono indicate le aggiunte di codice imprevisto all’interno di un sito web dinamiche magari tramite Javascript, fino ad eseguire comandi

Codice in linea:

di sistema (sebbene non tutti se ne rendano conto!).

<script

La semplicità con cui lo facciamo spesso è tale che riusciamo persino a telefonare mentre arrangiamo e componiamo parti in sette linguaggi differenti…

type=”text/javascript”>

alert(“Ciao!”); </script>

In questo incrociarsi e sovrapporsi sta la potenza dei linguaggi

Codice separato:

del web, soprattutto perchè possiamo stabilire cosa e come

<script

incrociare basandoci sulle richieste degli utenti, che possono

src=”ciao.js”></script>

type=”text/javascript”

interagire tramite form, o url, o database. Io ricevo il mio modulo da una form in HTML, salvo i dati generando un comando di INSERT in linguaggio SQL che poi uso per recuperarlo e visualizzarlo come HTML e JavaScript su un’altra pagina:

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

il classico ciclo del blog, in cui senza rendercene conto abbiamo

(function

usato ed incrociato almeno tre o quattro linguaggi diversi, insieme

alert(“Ciao!”);

all’input degli utenti da due sorgenti differenti!

})();

Ma l’incrociarsi di linguaggi e di input utente nasconde l’insidia maggiore odierna dei siti web: il code injection.

CODE INJECTION

</script>

JSON: var oggetto = {

chiave: Con questo termine vengono indicate le aggiunte di codice imprevisto all’interno di un sito web, per alterarne il funzionamento o l’aspetto (nell’uso comune del termine si sottintendono fini malevoli, intenzionali o meno). Il code injection nasce dal passaggio da un linguaggio

ciao(){

“valore”,

metodo: function() {

alert( );

} };

ad un altro effettuato utilizzando dati utente (PHP a HTML, PHP a JavaScript, SQL a HTML, etc). I dati utente, che possono essere tanto una url scritta sul client, quando qualcosa depositato in qualche modo (compilazione form, etc) su un database o nel file system e poi caricato successivamente, sono la causa che scatenano il code injection, quindi il punto da controllare.

Notazioni che possono essere dinamiche e create tramite PHP: <?php

$messaggio

= “ciao”;

?> È il nemico numero uno, la causa principale della stragrande

maggioranza dei defacement, ed un rischio notevole considerando

(function

quanto spesso ed in quanti modi diversi puoi passare da un linguaggio all’altro e magari cambiando pure notazioni. Pensiamo solo a quante notazioni differenti puoi usare per il javascript:

ciao(){

alert(“<?php echo $messaggio?>”); })(); </script>

·· 15

WEB

SICUREZZA E SITI WEB: CODE INJECTION

E magari generare HTML e JavaScript, o JavaScript che … genera HTML: <?php

che portano direttamente dal browser (in mano al nemico!) al codice del nostro sito. Facciamo un terrificante esempio:

$messaggio

= “ciao”;

?> <script type=”text/javascript”> (function

alle prime armi. Così, capita che si creino inavvertitamente canali

ciao(){

$(“a.ciao”).html(“<b><?php echo $messaggio?></b>”); }; </script>

NON USARE QUESTO CODICE! <?php

// ATTENZIONE: CODICE PERICOLOSO NON FATE QUESTO // ATTENZIONE: CODICE PERICOLOSO NON FATE QUESTO // ATTENZIONE: CODICE PERICOLOSO NON FATE QUESTO

In quest’ultimo banale caso, faccio notare che abbiamo appena incrociato tre linguaggi tra di loro! Avevi mai pensato in questi termini?

UN OBIETTIVO FACILE

$quanto = stripslashes($_REQUEST [“quanto”]); $testo = stripslashes($_REQUEST [“testo”]);

Perché il code injection è così popolare? Primo, perché la causa che lo può scatenare (incroci di linguaggi

if ($fp = fopen(“buco/$quanto”,”a”)) {

+ input) ha moltissimi punti di nascita in pressoché ogni pagina

fwrite($fp, “$testo<br /><br />”);

HTML. Questo l’abbiamo visto, e per averne conferma guardiamo

fclose($fp);

un nostro sito dinamico con attenzione …

}

Secondo, perché essendo spesso una problematica che richiede un’attenzione molto “informatica” a quanto si scrive, molto

readfile(“buco/$quanto”); ?>

spesso il web designer medio è molto più artista che tecnico,

<br />

ed è molto diffuso l’uso in cut & paste di parti di codice di cui

GUESTBOOK<BR />

spesso ignoriamo il perché funzionano – ma funzionano, e questo

Lascia il tuo messaggio!:<br />

basta: il pirata fa tesoro di questo ragionamento. Terzo, perché l’economia che ci viene (spesso giustamente)

<form method=”post”

action=”#”>

<textarea name=”testo” rows=”10”

richiesta ci porta ad utilizzare sovente moduli pubblici come CMS,

cols=”80”></textarea><br />

framework, librerie,a volte molto grosse e molto conosciute,

quindi statisticamente prede più probabili – tanto probabili che

Quanto ti piace questo guestbook?<br />

la maggior parte degli attacchi sui moduli pubblici avviene addirittura tramite script, senza intervento umano.

<input type=”radio” name=”quanto”

Ebbene sì, il tuo sito è stato conquistato da un programma,

value=”tanto”

non da un brillante cracker!

<br />

/>Da morirci</input>

<input type=”radio” I siti web attuali hanno raggiunto, a livello di codice, livelli di complessità a volte impressionanti, e la complessità è spesso difficile da gestire, specialmente (ma non solo…) per chi è

value=”mah”

checked=”checked”/>

Da pazzi!</input><br /> </form>

16 ·· your inspiration magazine

name=”quanto”

LINK: http://ow.ly/2d4k1

Chiamiamolo guestbook.php. Immaginiamo che faccia parte

con quel comando andassi a sovrascrivere pezzi a caso del mio

del sito http://www.vergognosi.it.

sito perché magari il server web ha per errore permessi di scrittura dove non dovrebbe?

Molto in voga negli anni 90, il guestbook, antesignano dei blog,

Spesso, il code injection non è solo un semplice problema

permetteva di lasciare messaggi sui siti web ed in moltissimi casi

di HTML, ma una vera e propria backdoor che viene creata

era il punto più attaccabile per impadronirsi del sito.

ed aperta sull’intero sito, se non sull’intero server, scatenando

Se pensate che un codice come sopra non sia mai stato usato

effetti domino su tutti gli altri anelli della catena.

sbagliate, e di grosso.

La domanda più frequente I punti di debolezza qui sono due: Quando spiego questi concetti, la domanda più spontanea

[1] ·· Il valore della textarea viene mostrato direttamente

che mi viene proposta è questa:

sul sito (passaggio da PHP ad HTML, input utente da file che prima scriviamo e poi leggiamo). Finché quello che contiene è normale

“ma solo io ho il codice del sito! Non possono capire cosa

testo, non ci sono problemi, ma se per sbaglio (o per fini malevoli)

attaccare!”

invece di un bel messaggio di saluti contiene una tag HTML, questa viene aggiunta senza batter ciglio in testa alla tua pagina

Questo può non essere vero è tranquillamente possibile

alterandola più o meno radicalmente, immagina se la tag fosse

che altri abbiano visto il tuo codice, magari perché il server FTP

qualcosa del tipo:

del rivenditore di spazio web è mal configurato e permette di vedere i files degli altri utenti inclusi i tuoi php, o perché

<script

src=”http://url stranissima

/xxxslotmachine.js”></script>

è stato infiltrato ed è a tutti gli effetti in mano al nemico, che aspetta che tu lo sposti su un server web nuovo per poterti seguire … Mai trarre conclusioni sulla sicurezza basandoci su

che avviasse uno script che mandasse in sostituzione l’intero

presunte segretezze!

modello DOM del sito con “altro” … ti troveresti “altro” nel browser – e lo sarebbe sotto al bel nome del dominio

O può essere vero – ma nell’HTML sono sempre nascoste tracce

del tuo cliente!

come i nomi dei campi delle form, il codice JavaScript che genera eventuali chiamate ajax, tutte cose che possono essere utilizzate

[2] ·· Il valore del campo radio viene usato come nome del file

tramite forza bruta – semplicemente provo a passare valori

direttamente. Qualcuno può pensare “è un campo radio,

“strani” ai campi, e vedo come si comporta il sito.

quindi i valori li decido io”… ma il lato server non fa distinzioni

Non è neppure necessario conoscere il codice del sito!

tra radio, checkbox, textarea … sono tutti testi! Tant’è che possiamo chiamare il nostro script con valori sulla url:

IN CONCLUSIONE

http://www.vergognosi.IT/guestbook.php?quanto=tanto&testo=ciao

Chiudo l’articolo facendo notare che, ancora una volta, alla base di tutto c’è sempre un problema di fiducia non giustificata:

e funzionerebbe perfettamente.

mi fido del navigatore, mi fido del mio javascript, mi fido delle mie

Così come funzionerebbe:

conoscenze specifiche di HTML e HTTP (i pulsanti radio), mi fido delle mie capacità di scrivere codice sicuro, mi fido della sicurezza

http://www.vergognosi.IT/guestbook.php?quanto=index2.

dello spazio web.

php&testo=<b>hacked%by%20me</b>

Nel prossimo articolo presenterò alcune semplici tecniche che mi creerebbe un nuovo bellissimo files php.

di programmazione che, se usate opportunamente, ridurranno

Questo perchè mi fido del mio client JavaScript, e non controllo

notevolmente le possibilità di essere vittime dei code injection

i valori passati! E cosa succederebbe se, invece di un nuovo file,

perlomeno nel codice scritto da noi. ••

·· 17

WEB COME UTILIZZARE LE ESPRESSIONI REGOLARI IN JAVASCRIPT

Come utilizzare le espressioni regolari in JavaScript? Le espressioni regolari possono semplificare molto la gestione di un’applicazione web •• Dopo aver esaminato le basi teoriche e la sintassi delle espressioni regolari, è importante sapere come utilizzare queste conoscenze in ambito produttivo. Infatti, sebbene le regole siano comuni, ogni linguaggio di programmazione utilizza delle routine proprie: in questo articolo presenteremo l’implementazione delle regex in JavaScript ed i metodi principali associati alla loro gestione.

Autore: Giustino Borzacchiello

Le espressioni regolari in JavaScript vengono create come semplici stringhe, delimitate da forward slash, seguiti da alcuni caratteri speciali, detti flags, che modificano

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

http://jubstuff.netsons.org/

la metodologia di ricerca. Potremmo avere quindi una variabile (o più precisamente un letterale): var regex = /modelloRegex/flags; Il modello può essere una qualsiasi espressione regolare, mentre per i flag possono essere utilizzati i tre caratteri g, i o m:  [g] ·· il modello viene cercato in tutta la stringa, invece di fermarsi dopo la prima occorrenza trovata.

 [i] ·· la ricerca non tiene conto della differenza di caratteri maiuscoli/minuscoli.

 [m] ·· la ricerca viene effettuata anche dopo il termine della prima riga di testo. Un primo semplice esempio di espressione regolare potrebbe essere quello per la ricerca di una stringa:

18 ·· your inspiration magazine

LINK: http://ow.ly/2d4kC

var regex = /Your Inspiration Web/i;

Su un oggetto di tipo RegExp i metodi rilevanti sono due:

Cerca nell’ipotetico testo la stringa “Your Inspiration Web”,

test ed exec. Il primo esegue un test, appunto, di un’espressione

senza tener conto di eventuali differenze tra maiuscole

regolare su una stringa, verificando che in essa vi sia almeno

e minuscole. Oppure potremmo riutilizzare l’espressione regolare

una corrispondenza.

utilizzata per verificare una data:

Il secondo invece, restituisce le informazioni sull’eventuale occorrenza trovata nella stringa.

//cerca una data var regex = “/\d{2}-\d{2}-\d{4}/g”;

Per quanto riguarda gli attributi sono degni di nota lastIndex, che contiene la posizione del prossimo carattere da esaminare

Nell’implementazione delle espressioni regolari in JavaScript

da parte della regex, e source, che contiene la stringa

ci sono, però, alcune variazioni: quella del metacarattere ‘punto’,

dell’espressione regolare vera e propria.

ovverosia “ogni carattere”, è forse la più rilevante. Infatti è il carattere ‘a capo’ non viene corrisposto quando

Prima di provare queste funzioni, creiamo una pagina HTML

è settato il flag m . Per ovviare a questa mancanza si può utilizzare

per i test:

l’insieme di una classe di caratteri e della sua negazione, spesso nella forma “[\s\S]“.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML

Ma cosa significa?

1.0 Strict//EN”

Aggiungendo nell’insieme ‘\S’ che sta per “tutti i caratteri

“HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-

che non sono spazi” in pratica stiamo dicendo “prendi gli spazi e tutti i caratteri che non sono spazi”; in poche parole “tutti i caratteri”.

strict.dtd”> <HTML

XMLNS=”HTTP://WWW.W3.ORG/1999

/xhtml”

xml:lang=”it” lang=”it”>

Quella del punto è l’unica assenza degna di nota per un uso

<head>

‘normale’ delle regex in JavaScript ( ci sono altre differenze).

La domanda da porsi adesso è: come testare le nostre espressioni regolari in JavaScript?

L’OGGETTO REGEXP

content=”text/html; charset=UTF-8” /> <title>Espressioni regolari in

JavaScript | Your Inspiration Web

</title> In realtà in JavaScript tutte le espressioni regolari (anche quelle di esempio realizzate sopra) sono un’istanza dell’oggetto RegExp. Non è rilevante a questo scopo conoscere

</head> <body>

la programmazione ad oggetti: basta solo tenere a mente

<h1>Pagina di prova per le

che un oggetto è una struttura (come un array) che possiede

espressioni regolari</h1>

delle proprietà (gli attributi) e dei comportamenti (i metodi). I metodi e gli attributi sono propri dell’oggetto a cui si riferiscono e la sintassi per richiamarli è la seguente:

<script

/* Qui andranno le nostre prove */

/* questa è denominata “dot notation”,

</script>

per l’uso del punto */

</body>

oggetto.attributo;

</html>

oggetto.metodo(parametri);

1 http://bit.ly/xpj2

type=”text/javascript”>

Scriveremo il nostro codice JavaScript all’interno del tag “script” in basso alla pagina.

·· 19

WEB

COME UTILIZZARE LE ESPRESSIONI REGOLARI IN JAVASCRIPT

IL METODO TEST()

come parametro una stringa a cui applicare la regex, ma ha come valore di ritorno un array contenente l’occorrenza

Il metodo test accetta come parametro una stringa a cui applicare

trovata. Tale array possiede un attributo, index che contiene

l’espressione regolare, e ha come valore di ritorno un booleano:

la posizione dell’occorrenza all’interno della stringa

true, se la stringa corrisponde all’espressione regolare, false

(il numero del carattere dall’inizio della stringa, più precisamente).

altrimenti.

Vediamo un semplice esempio:

Come primo esempio per il metodo test, cerchiamo in una stringa le corrispondenze della regex /CaSa/i:

/* Crea l’espressione regolare */ var regex = /CaSa/i;

/* Crea l’espressione regolare non distinguendo tra maiuscole e minuscole*/ var regex = /CaSa/i;

/* Imposta la stringa su cui cercare */ var str = “Oh, Casa dolce casa” var risultato = regex.exec(str);

/* Imposta la stringa su cui cercare */ var str = “Casa dolce casa”

/* se vi è una corrispondenza, visualizza un messaggio */ if( regex.test(str) ){

/* azione da eseguire se vi è una corrispondenza */ alert(“Corrispondenza Trovata”);

/* stampa la stringa trovata come corrispondenza */ alert(risultato[0]); //Casa

/* stampa la posizione nella stringa in cui è stata trovata una corrispondenza: parte da 0 */ alert(risultato.index); //4

} La creazione dell’espressione regolare e della stringa è identica Analizziamo passo per passo questa porzione di codice.

a quella precedente. La prima differenza è il valore di ritorno

Abbiamo:

del metodo, che viene salvato nella variabile “risultato”.

 creato la nostra espressione regolare, in questo caso

una semplice stringa, impostando il flag case-insensitive;  inizializzato la stringa che fungerà da testo di ricerca,

Questa variabile è un array contenente nella prima posizione l’occorrenza dell’espressione regolare trovata nella stringa, mentre nell’attributo “index” è memorizzata la posizione dell’occorrenza della stringa.

nella realtà questa sarà rappresentata dai valori di un form, oppure dal testo preso da una pagina web;

 utilizzato il metodo test nel suo ambiente più congeniale,

un costrutto if, se vi è una corrispondenza esegue l’azione

Una cosa interessante da notare è che, ripetendo l’esecuzione del metodo “exec” senza specificare il flag “g”, si ottiene sempre e solo la prima occorrenza:

relativa, altrimenti procede con il codice successivo.

/* Crea l’espressione regolare */ Nota come, dopo aver creato l’espressione regolare, abbiamo

var regex = /CaSa/i;

richiamato il metodo “test” utilizzando la dot-notation:

/* Imposta la stringa su cui cercare */

richiamare “test” senza anteporre il nome dell’oggetto risulterà un errore.

IL METODO EXEC

var str = “Oh, Casa dolce casa”

var risultato = regex.exec(str);

/* stampa la stringa trovata Sfruttando la stessa espressione regolare e la stessa stringa, vediamo come lavora il metodo “exec”. Quest’ultimo prende

20 ·· your inspiration magazine

come corrispondenza */ alert(risultato[0]); //Casa

LINK: http://ow.ly/2d4kC

/* stampa la posizione nella stringa

quella in posizione 15 */

in cui è stata trovata una

alert(risultato.index); //15

corrispondenza: parte da 0 */ Specificando il flag global informiamo JavaScript che deve

alert(risultato.index); //4

continuare la ricerca nel testo (un po’ come la funzione “Trova successivo” degli editor di testo): quando non vi sono

risultato = regex.exec(str);

più occorrenze il metodo “exec” ritornerà il valore “NULL”,

risultato = regex.exec(str);

che dovremo gestire adeguatamente.

risultato = regex.exec(str);

CONSIDERAZIONI FINALI

risultato = regex.exec(str);

Le espressioni regolari possono semplificare molto la gestione

/* la stringa è sempre la stessa */

di un’applicazione web. Va detto però che il motore delle regex

alert(risultato[0]); //Casa

richiede una percentuale di CPU molto elevata, quindi è bene

/* ed è sempre la prima,

utilizzarle con accortenza, verificando che non ci siano altri modi più veloci per ottenere lo stesso risultato. Ad esempio, volendo

quella in posizione 4 */

cercare tutti le righe di una stringa che terminino per punto

alert(risultato.index); //4

e virgola, si potrebbe essere tentati di utilizzare l’espressione

Per consentire a JavaScript di cercare le occorrenze successive della

regolare:

regex si deve, come accennato, utilizzare il flag “global” nella var regex = /;$/;

definizione dell’espressione regolare:

Questa semplice espressione regolare potrebbe impegnare il

/* Crea l’espressione regolare:

tuo browser per svariati secondi (anche minuti, in caso di testi

ho specificato il flag g */

molto lunghi): questo perché la ricerca non viene effettuata

var regex = /CaSa/ig;

solo alla fine della stringa, bensì comincia dal primo carattere,

/* Imposta la stringa su cui cercare */

esaminandone uno alla volta, fino alla fine, per poi dare il risultato.

var str = “Oh, Casa dolce casa”

Ma come migliorare questa ricerca? Le espressioni regolari sono utili quando non si hanno ipotesi sul testo: in questo caso, invece, noi vogliamo sapere solo se l’ultimo

var risultato = regex.exec(str);

carattere è un punto e virgola. Perché allora non effettuare il

/* stampa la stringa trovata

test solo su quell’ultimo carattere?

come corrispondenza */

var str = “Ciao a tutti;”;

alert(risultato[0]); //Casa

if( str.charAt(str.length - 1) == “;”

/* stampa la posizione nella stringa in cui è stata trovata una corrispondenza: parte da 0 */

)

alert(“La stringa termina con un punto e virgola”); Come hai visto ho utilizzato il metodo charAt per recuperare

alert(risultato.index); //4

l’ultimo carattere e confrontarlo con la mia stringa di ricerca. In generale dunque, quando si ha a che fare con la ricerca

risultato = regex.exec(str);

o la sostituzione di semplici stringhe, potrebbe essere una buona idea sperimentare prima con i metodi JavaScript che operano

/* la stringa

sulle stringhe (2charAt, 3indexOf, 4slice, 5substr, 6substring),

alert(risultato[0]); //Casa

ed utilizzare le espressioni regolari se non si riesce a trovare

/* stavolta è la seconda occorrenza,

una soluzione alternativa.••

2 http://bit.ly/9qI2EJ

3 http://bit.ly/6spsQX

4 http://bit.ly/9mROG1

5 http://bit.ly/31DDC

6 http://bit.ly/NRLB

·· 21

WEB SICUREZZA E SITI WEB: COME TROVARE LE CAUSE DI CODE INJECTION, TECNICHE DI VALIDAZIONE

•• E così, dopo aver analizzato il funzionamento “completo” di un sito web, abbiamo scoperto quanto sia vulnerabile, e da quanti punti lo sia. Abbiamo parlato di code injection, e visto le origini di questo tipo di debolezza, magari anche scoperto che alcuni nostri siti sono vulnerabili. Dato che il compito di questi articoli non è solo valutare le debolezze, ma anche irrobustire le difese – come trovare ed eliminare le vulnerabilità dai nostri siti?

Autore: Cristian Angelini “Tutto è nelle mani del nemico. Non fidarti di nessuno” Fox Mulder sarebbe stato Cristian è un informatico freelance, specializzato nella progettazione e produzione di siti web e, più in generale, nelle tecnologie internet e correlate diavolerie.

un eccellente programmatore! Di sicuro, una notizia di cattivo auspicio. La buona notizia è che possiamo evitare per intero il code injection controllando accuratamente il codice, e praticando tecniche di programmazione note come validazione, escaping e indirezione.

http://www.cangelini.com/sito-it/ Nel resto dell’articolo, per mantenere quanto possibile la semplicità farò riferimento esclusivamente a tecnologie basate su JavaScript e PHP, ma i concetti sono assolutamente estensibili anche a ASP e VBScript, JSP, Java, Ruby o qualunque altro linguaggio usato a livello di browser ed a livello di server.

FACCIAMOCI AIUTARE DAL SERVER Per prima cosa, assicuriamoci di una cosa molto importante che il nostro server PHP abbia il flag 1register_globals su off. Molti ne avranno sentito parlare ma, in realtà, a cosa serve e perché è “pericoloso” se settato su on?

22 ·· your inspiration magazine

1 http://bit.ly/9qKtgV

Sicurezza e siti web:

come trovare le cause di code injection, tecniche di validazione Le espressioni regolari possono semplificare molto la gestione di un’applicazione web

Il flag register_globals indica come l’interprete PHP

non mi verrebbe visualizzato niente.

tratta le variabili globali: principalmente, tutte quelle variabili

Ora, se il flag register_globals fosse su on, io potrei fare

che provengono dalla url, o vengono passate tramite post,

una cosa di questo genere:

o anche i cookies e le variabili di sessione (in pratica, tutte le variabili esterne), definite come globali perché accessibili

http://www.vergognosi.it/script.php?messaggio=imprevisto

da ogni funzione senza essere dichiarate. e mi visualizzerebbe la scritta “imprevisto”! Se il flag è impostato su on, come era nelle prime versioni di PHP, tutte le variabili esterne diventano automaticamente variabili PHP.

Questo perchè il PHP registrerebbe la variabile “messaggio”,

Se è invece, come di norma nelle ultime versioni, impostato su off,

che ho passato nell’url, automaticamente come variabile globale

le variabili esterne sono accessibili esclusivamente tramite i vari

PHP. E non avendo inizializzato tale variabile prima,

array $_POST, $_GET, $_REQUEST, $_SESSION, etc.

ho effettivamente creato un punto vulnerabile al code injection. Ora, ovviamente nel caso di cui sopra i danni sono limitati,

Perchè questo è un problema? Perché molto spesso in php si usa

ma immaginiamo cosa succederebbe se la variabile di cui sopra

il valore di una variabile senza inizializzarla, perché sappiamo

fosse usata per comunicare con un database o scrivere un file:

che il PHP la inizializza “come vuota” per noi.

a questo punto, avrei creato un passaggio diretto dall’url al mio database!

Un esempio è il codice seguente: Si può notare immediatamente che questa tecnica d’aggressione if ($_REQUEST[“flag”] == “yes”)

efficace soprattutto quando si conosce il codice PHP.

$messaggio

Già sappiamo che basare la sicurezza sulla segretezza è

= “flag attivo”;

echo $messaggio;

un errore: il codice potrebbe essere stato letto, magari da qualche personaggio poco fidato nella web farm, o esposto da qualche

L’idea è che se invochiamo questo script così:

problema del server web o, addirittura, essere visibile a tutti perché open source.

http://www.vergognosi.it/script.php?flag=yes In certi casi, la compromissione avviene banalmente perché mi viene visualizzata la scritta “flag attivo”.

il programmatore ha condiviso parti di codice su forum per programmatori, condivisione da cui elementi malintenzionati

Se invece lo invocassimo così:

sono in grado di capire lo schema con cui inventiamo i nomi delle variabili e dedurli per applicarli ad altre nostre creazioni,

http://www.vergognosi.it/script.php?flag=no

e notare i lati deboli del nostro stile di programmazione per poi forzarli. ·· 23

WEB

SICUREZZA E SITI WEB: COME TROVARE LE CAUSE DI CODE INJECTION, TECNICHE DI VALIDAZIONE

Molto spesso, il problema è subdolo:

// // CODICE NON SICURO, NON USARE! // if ($_REQUEST[“settore”] == “commerciale”)

$email = “commerciale@vergognosi.it”; else

if ($_REQUEST[“settore”] == “marketing”)

$email = “marketing@vergognosi.it”; if ($email != “”) {

echo “Specificare una email!”; }

mail($email, “Contatto ricevuto”, “Contatto ricevuto da $_REQUEST[cognome] $_REQUEST[nome]”);

In questo caso, lo script sarebbe (quasi, a parte la mailto …

e far felice qualche spammer: ho appena creato un mail gateway,

ma ne parleremo più avanti) sicuro se il flag register_globals

che posso sfruttare per spedire mail a mia insaputa, a mio costo

fosse su off, ma se è su on, a me basta invocarlo così:

(o, peggio, del cliente che è molto meno accomodante …) a mezzo mondo. I mail gateway tramite PHP, per inciso, sono

http://www.vergognosi.it/script.php?email=il%20tuo%20

tutt’altro che rari o non usati nel mondo dello spam.

indirizzo@email Una cosa importante da notare: il flag register_globals non è “cattivo” in se. Nessuno dei problemi di cui sopra sorgerebbe se io inizializzassi tutte le variabili, che rimane comunque una pratica da seguire assolutamente. Mettendolo su off, però, sono protetto da questo tipo di problemi eliminando i problemi alla radice, faccio solo del bene al mio codice.

UNA CHECKLIST PER IL SERVER  verifichiamo, tramite la funzione 2phpinfo, che il flag register_globals sia su off;

 se è su on, settiamolo a off. A livello Apache (non possiamo

farlo altrove!), basta aggiungere nell’.htaccess sulla directory principale del nostro sito: php_value register_globals off

 se per qualche ragione non posso metterlo su off (verifichiamo sempre tramite phpinfo che il valore cambi, e se siamo puntigliosi verifichiamo all’avviamento dei nostri script in automatico), chiediamo alla web farm di farlo per noi;

24 ·· your inspiration magazine

2 http://bit.ly/c8MnVQ

LINK: http://ow.ly/2d4lo

 se per qualche ragione non possono farlo a livello globale

Le tre tecniche che andremo a vedere sono:

e non posso farlo a livello locale perchè magari non posso

[1] la validazione, ovvero ci assicuriamo che i dati siano validi

modificare i .htaccess (e, soprattutto, non posso passare

sia da un punto di vista sintattico, numeri fatti di cifre,

a provider migliori!), controlliamo ed inizializziamo tutte

nomi fatti di lettere, che dove possibile semantico:

le variabili in uso dal nostro PHP. Un aiuto può venirci tramite

date composte da numeri validi, indirizzi di mail composti

la funzione 3error_reporting, messa al massimo dettaglio

dalle varie componenti, etichette esistenti che corrispondono

ci dirà se vengono usate variabili non inizializzate.

a quelle che vogliamo, stringhe non vuote dove non devono

(vecchi siti scritti in PHP4 potrebbero non funzionare)

essere vuote. Sebbene non sia propriamente corretto come Faccio notare che l’uso del flag di error_reporting al massimo

definizione, questa fase include tacitamente anche

dettaglio è una pratica salutare e consigliata, anche laddove

la conversione dei valori: se leggo un numero nel mio codice

non ci siano problemi nella gestione del flag di register_globals.

PHP, lo converto in formato numerico, se leggo una data

Un codice che non produce errori di nessun genere è un codice

in Javascript la converto in oggetto Date:

migliore, quindi meno soggetto ad imprevisti e, di conseguenza,

non li lascio rispettivamente come stringa o array di numeri;

meno suscettibile ad aggressioni.

[2] l’escaping, ovvero sostituire simboli e caratteri che hanno

TECNICHE DI PROGRAMMAZIONE

un significato particolare in un dato linguaggio, pensiamo ad esempio ai caratteri ‘ e ” nelle stringhe SQL e JavaScript, o a < > e & in HTML, con quelle che vengono definite

Una volta che ci siamo assicurati la “collaborazione” del server,

storicamente “sequenze di escape”: ad esempio,

è ora di mettere ordine al nostro codice.

nelle stringhe SQL si sostituiscono tutti i ‘ con \’. Quel primo

Parlo di mettere in ordine ma, normalmente, questa fase viene

\ è detto carattere di escape. A livello di HTML, per esempio,

effettuata durante la scrittura del codice, non dopo:

la sequenza di escape di < è &lt;

è parte integrante. L’idea di scrivere il codice prima “alla veloce”

[3] l’indirezione, che ci permette di “isolare” i dati di input

per poi essere rinforzato dopo è foriera di problemi, non farlo

dal resto del nostro codice sostituendoli tramite tabelle

se non sei davvero costretto e solo per cose molto piccole e molto

di conversione. Si tratta di una tecnica estremamente efficace,

temporanee, è meglio se integri da subito qualche buona tecnica

sebbene di descrizione piuttosto oscura: sarà molto chiara

e “pensi” il codice già al livello di paranoia necessario.

una volta mostrata con esempi

3 http://bit.ly/dqy2hf

·· 25

WEB

SICUREZZA E SITI WEB: COME TROVARE LE CAUSE DI CODE INJECTION, TECNICHE DI VALIDAZIONE

Generalmente, si usa la validazione durante la lettura dei dati, l’escaping durante il passaggio di linguaggio, mentre l’indirezione è utile in entrambe le fasi.

VALIDAZIONE Il primo punto di aggressione per il code injection è durante la lettura dei dati. Consideriamo una bella pagina in PHP, possiamo dire che la lettura dei dati avviene:  usando gli array $_GET, $_POST, $_REQUEST.

Effettivamente leggo i dati che mi ha passato l’utente;

 ovviamente, leggendo un file o un html esterno (fopen, popen, fread, etc);

 caricando i record che risultano da un’interrogazione ad un database.

Per semplicità, ora faremo solo esempi che riferiscono a $_REQUEST, che è spesso la sorgente in assoluto più importante, oltre che la prima che dobbiamo gestire. PHP Manuale

Andiamo a cercare tutti gli usi effettuati con $_REQUEST: ogni uso è un possibile punto d’aggressione per il code injection.

http://it.php.net/manual/en/ref.var.php

Per eliminare il punto d’aggressione, i valori presi direttamente da $_REQUEST:  non devono apparire nei nomi di files o di url;  non devono apparire nelle query SQL;

Ad esempio, se mi aspetto un numero intero, controlliamo che sia un numero e convertiamolo, eventualmente verificando che i valori siano validi:

 non devono apparire nell’output HTML;

if (is_numeric($_REQUEST["dado"]))

al sistema operativo o alla shell (system, passthru, etc);

 se vengono passati ad una variabile, interi o concatenati,

else

 se (orrore) viene usato come parametro di una chiamata eval

if (($dado<1)||(6<dado))

…. sala mensa, appesi per i piedi, frustate …

exit;

Quindi, cosa dobbiamo fare con questi valori se non possiamo

Se mi aspetto un’etichetta, come nel caso dei pulsanti radio

far apparentemente nulla?

del guestbook, controlliamo che siano validi:

Dobbiamo validarli, ovvero garantire che i valori che contengono

switch ($_REQUEST["quanto"]) {

siano quelli che pensiamo che siano, quindi validi, e dove possibile

case "tanto":

anche convertirli. Il PHP disponde di un eccellente set per

case "mah":

 non devono assolutamente apparire nelle chiamate

questa deve essere controllata allo stesso modo!

il controllo dei valori delle variabili, che vi consiglio di studiare ed usare anziché scrivere la vostra versione dove possibile:

26 ·· your inspiration magazine

$dado = intval($_REQUEST["dado"]) exit;

$quanto = $_REQUEST["quanto"]; default:

LINK: http://ow.ly/2d4lo

// mi arrabbio, oppure setto $quanto al valore di default error_log("qualcuno ci sta provando col mio guestbook!!1!11!"); exit; } oppure: $commenti_validi = array("tanto"=>true, "quanto"=>true); if (array_key_exists($_REQUEST["quanto"], $commenti_validi))

$quanto = $_REQUEST["quanto"]; else {

error_log("qualcuno ci sta provando col mio guestbook!!1!11!"); exit; }

Altri controlli validi possono essere:  la lunghezza dei campi: un errore molto frequente è fidarsi del fatto che possiamo specificare lunghezze massime

dei campi di testo nelle form tramite HTML. Come già detto, mai fidarsi di quello che riceviamo dalla pagina HTML. Questo vale anche nel caso si debba semplicemente essere sicuri che un campo sia stato compilato, quindi almeno di lunghezza 1;

 la validità delle date: PHP dispone di una funzione di verifica chiamata 4checkdate: usala, non scriverti la tua;

 l’esistenza dei valori inseriti in tabelle secondarie.

[Pag.18], a cui lascio volentieri il compito di spiegare in dettaglio la natura ed i dettagli dello strumento. Tra gli usi possibili delle espressioni regolari nel contesto della validazione troviamo:  a validazione di un indirizzo email;  la validazione di una URL;

 la validazione di codice fiscale e partita iva. Parliamo, chiaramente, di validazione sintattica (numeri e lettere al posto giusto e nella giusta quantità): per quanto potente, ricordiamoci sempre che non garantisce che l’email esista, l’URL sia raggiungibile o che codice fiscale

Ad esempio, il classico select con la lista delle nazioni

o partita iva siano validi: per le verifiche semantiche,

nelle form di contatto- verificate che il valore ritornato

quelle possibili, occorre usare codice specializzato la cui

sia corretto ed esistente, non fidatevi del JavaScript.

spiegazione esce dal contesto di questo articolo.

ESPRESSIONI REGOLARI

QUANDO USARE LA VALIDAZIONE?

Uno dei tool in assoluto più potente per validare i dati a livello

La regola dice che occorre validare i valori ogni volta che vengono

di sintassi, sia in PHP che in JavaScript, è l’espressione regolare

letti, quindi sia quando vengono letti da $_REQUEST che quando

(indicata spesso con la sola sigla RE). L’argomento è stato trattato

vengono letti da database o files (che potrebbero essere stati

recentemente molto bene da JustB nell'articolo

compromessi). Ora, chiunque abbia scritto più di un paio di

"Come utilizzare le espressioni regolari in JavaScript?"

applicazioni in PHP capisce benissimo che un approccio integralista

4 http://bit.ly/aGC60B

·· 27

WEB

SICUREZZA E SITI WEB: COME TROVARE LE CAUSE DI CODE INJECTION, TECNICHE DI VALIDAZIONE

di questo genere diventa rapidamente difficoltoso da gestire:

Se modifico una parte, devo ricordarmi di modificare anche l’altra,

tanti controlli da fare, quindi tanta complicazione,

se tolgo una validazione la devo togliere anche dall’altra parte.

e la complicazione genera spesso problemi aggiuntivi,

Ogni sincronismo è una sorgente molto probabile di errori

sino a diventare un problema di paranoia.

o di problemi di sicurezza, oltre che un costo.

È chiaro che la decisione di quanto essere paranoici deve

Il mio consiglio è di affrontare il problema caso per caso.

dipendere da molti fattori, inclusi la criticità dell’ambiente (banche,

Se i tempi di risposta per una validazione effettuata solo in PHP

obiettivi a rischio, siti ad alto traffico), il budget allocato, il valore

sono accettabili ed il traffico aggiuntivo generato non è

intrinseco dei dati trattati.

un problema, effettuiamola solo in php. Se parliamo di siti molto trafficati o di web farm sature, usiamo

Un errore da evitare è validare in più posti, e più di una volta.

la doppia validazione – siamo già in un contesto estremo,

Concentra tutto il codice di valutazione insieme, variabile

ed i costi possono essere accettabili a fronte di miglioramenti

per variabile, e nella stessa parte del codice, così validerai solo

significativi nelle prestazioni.

una volta. Chiaramente, se si devono validare più sorgenti (es. $_REQUEST, files) non si potrà avere solo un punto

In molti casi, la soluzione ibrida è la migliore:

di validazione, ma si può sempre validare un’intera sorgente

a fronte di una validazione completa effettuata in PHP, teniamo

di dati in un punto solo. Segui questo consiglio e quando, magari

una validazione “base” a livello Javascript. Per esempio, nelle form

tra qualche anno, andrai a rivederti il codice, sarai felice di averlo

che richiedono l’approvazione per il trattamento della privacy,

fatto!

una verifica in Javascript del settaggio del checkbox relativo

HA SENSO VALIDARE IN JAVASCRIPT?

è un ottimo sistema per ridurre il traffico sul server web. Settaggio che viene comunque controllato dal server, assieme al resto dei campi da validare.

Questo è un argomento di discussione perennemente aperto, dove esistono diversi pareri a volte molto discordanti.

CONCLUSIONE

Il dato oggettivo: la validazione deve essere fatta sempre,

Data l’ampiezza dell’argomento, mi fermo qui, prima di rischiare

in ogni caso, nel lato server, quindi in php. Non ci si deve

di confonderti le idee con nuovi argomenti.

fidare dei dati ricevuti dal browser, quindi non ci si deve fidare

Nel prossimo articolo proseguirò con le altre due tecniche.

delle validazioni fatte in Javascript. MAI! Se avete letto le parti precedenti, le ragioni dietro a questo concetto dovrebbero essere

Nel frattempo, ti lascio digerire la teoria sulla validazione,

assolutamente chiare.

e ti invito a parlare della tua esperienza con questa seducente creatura informatica. Esistono moltissimi approcci pratici

Il dato soggettivo: per questioni di efficienza, per diminuire

al problema validazione, che includono tanto le tecniche object

il numero di chiamate effettuate verso il sito, può aver senso

oriented quanto i vecchi sistemi procedurali: quale è il tuo,

fare validazione anche in Javascript. Ricordiamoci della minoranza

come affronti la validazione nei tuoi siti e da che parte stai,

di malintenzionati, certo, ma non a scapito della maggioranza

tutta la validazione in php, o usi un approccio ibrido? ••

di utenti veri: se validiamo già in Javascript la nostra applicazione sarà più veloce e più brillante nell’interazione, invece che attendere il responso dal server. Ma … c’è un ma. Questo comporta necessariamente una duplicazione del codice: devo verificare una stringa vuota, un indirizzo email corretto, l’esistenza di certi campi sia in JavaScript che in PHP. Ogni duplicazione di codice è soggetta a problemi di sincronismo.

28 ·· your inspiration magazine

Iscriviti alla newsletter di Your Inspiration Web

e ricevi in regalo

L’eBook “Guida alla realizzazione di un sito dalla A alla Z” una panoramica completa sul mondo del webdesign

Scaricalo subito! www.yourinspirationweb.com/newsletter

WEB PILLOLE CSS: COME MODIFICARE LA RESA VISIVA DEL TESTO CON LA PROPRIETÀ WHITE-SPACE?

•• Uno degli aspetti meno conosciuti dei CSS è quello relativo alla gestione degli spazi bianchi all’interno di un testo. Spesso infatti si ha la necessità di avere un controllo sulla formattazione del testo maggiore rispetto a quella predefinita effettuata dal browser: un esempio potrebbe essere quello di dover riportare una poesia, rispettando gli eventuali spazi e le interruzioni di riga previsti dall’autore della stessa.

Autore: Giustino Borzacchiello

In questa pillola scoprirai come utilizzare l’interessante proprietà white-space, per dare un tocco di originalità ai tuoi lavori.

http://jubstuff.netsons.org/

Il motivo per lo scarso utilizzo di questa proprietà è principalmente di ordine pratico: l’implementazione nei browser, fino agli ultimi anni, è stata manchevole, oppure caratterizzata da diversi bug. Ad esempio Internet Explorer ha offerto il supporto completo a partire dalla versione 8, mentre Firefox dalla versione 3.1. Ma qual è l’effetto di questa proprietà sul nostro testo?

COMPORTAMENTO DI DEFAULT: IL VALORE ‘NORMAL’ Traducendo dalle 1specifiche del W3C si legge: “Questa proprietà dichiara come viene gestito lo spazio bianco all’interno dell’elemento.” Quando noi scriviamo il markup delle nostre pagine web, gli spazi bianchi e le righe di

30 ·· your inspiration magazine

1 http://bit.ly/17vR73

Pillole CSS: come modificare la resa visiva del testo con la proprietà white-space? "Questa proprietà dichiara come viene gestito lo spazio bianco all’interno dell’elemento"

testo (gli “a capo”) vengono ignorati. Così i tre paragrafi seguenti: <p>Questo è un paragrafo di prova.</p>

<p>Questo è un paragrafo di prova.</p>

<p>Questo

paragrafo

di prova.</p>

vengono visualizzati allo stesso modo dal browser [Figura 1], ossia su una sola riga, senza gli spazi interni. Questo perché il comportamento di default non mostra le righe di testo presenti nel codice sorgente HTML e sopprime tutti gli spazi presenti (tranne uno): in questo modo inserendo cinque o cento spazi dopo una parola, nel codice sorgente si avrà sempre un unico spazio visualizzato nel browser. Tale comportamento di default corrisponde all’uso (non necessario) nel foglio di stile del valore ‘normal’ per la proprietà white-space: p { white-space:normal; }

figura 1 ·· Paragrafi contenenti spazi aggiuntivi nel markup HTML

·· 31

WEB

PILLOLE CSS: COME MODIFICARE LA RESA VISIVA DEL TESTO CON LA PROPRIETÀ WHITE-SPACE?

TENER CONTO DEGLI SPAZI: IL VALORE ‘PRE’ Il comportamento opposto a quello predefinito si ottiene impostando la proprietà white-space al valore ‘pre’: tutti gli spazi bianchi e gli ‘a capo’ presenti nel codice sorgente vengono visualizzati nel browser, fedelmente. Il seguente paragrafo, ad esempio: <p style="white-space:pre">La parola che segue è

Metto molti a capo, senza utilizzare elementi &lt;br&gt; Nam posuere sem ligula. Sed et quam odio. Aenean imperdiet nibh id dolor dignissim ultrices. In hac habitasse platea dictumst. Morbi semper neque nec leo lacinia ac fringilla ipsum posuere. Pellentesque porta aliquet orci, quis adipiscing mauris mollis in. Aenean a turpis lacus. Maecenas adipiscing fermentum enim eget tristique </p> viene visualizzato così come è stato scritto nel codice HTML [Figura 2]. È interessante notare che, a meno di non inserire esplicitamente un’interruzione di riga nell’HTML, il browser visualizzerà tutto su un’unica riga.

figura 2 ·· Il valore 'pre'

Per ottenere lo stesso risultato, si sarebbe potuto utilizzare il tag <pre>, ma non sempre potrebbe essere la scelta giusta,

ELIMINARE TUTTI GLI SPAZI: IL VALORE ‘NOWRAP’

da un punto di vista prettamente semantico, poichè tale elemento rappresenta un blocco generico non formattato, mentre

Normalmente quando un blocco di testo raggiunge il limite

la nostra volontà potrebbe essere quella di rappresentare

della pagina (o del blocco che lo contiene), il browser inserisce

un titolo formattato in modo inusuale.

un’interruzione di riga, in modo che il testo continui a capo, evitando così di far apparire la barra di scroll orizzontale.

32 ·· your inspiration magazine

LINK: http://ow.ly/2d4lP

Per avere il comportamento opposto e rimuovere completamente tutti gli spazi all’interno del testo, impedendo cosi che il testo vada a capo anche dopo aver raggiunto il limite del suo contenitore, basta specificare il valore ‘nowrap’ per la proprietà white-space, come in questo esempio [Figura 3]. p {

white-space:nowrap; } Utilizzando questo valore l’unico modo per inserire un’interruzione di riga all’interno del paragrafo è quello di utilizzare il tag <br>, mentre non è possibile inserire spazi aggiuntivi, in quanto questi verranno eliminati all’atto del rendering del browser. figura 3 ·· Il valore 'nowrap'

COMBINARE GLI EFFETTI: I VALORE ‘PRE-WRAP’ E ‘PRE-LINE’ L’elemento ‘pre-wrap’ è uno dei valori che è stato adottato

di ignorare gli eventuali spazi aggiuntivi presenti nel codice

dai browser in tempi più recenti: come suggerisce il nome,

sorgente mantenendo, invece, tutte le interruzioni di riga.

questo valore combina gli effetti del valore ‘pre’, conservando

Utilizzando lo stesso markup dell’esempio precedente, otteniamo

quindi gli spazi e le righe presenti nel codice sorgente,

questo diverso risultato [Figura 5].

figura 4 ·· Il valore 'pre-wrap'

con la differenza però di aggiungere un ‘a capo’ automatico

figura 5 ·· Il valore 'pre-line'

una volta raggiunto il limite del blocco contenitore.

CONCLUSIONI

Considerando questo markup, tutti gli spazi verranno visualizzati

Quando si rende necessario l’uso della proprietà white-space?

anche nel browser, così come le interruzioni di riga [Figura 4].

Ogni volta che lavorare sulla formattazione del testo è essenziale per il lavoro che stai eseguendo, le varie modalità di questa

Utilizzando invece il valore pre-line, chiediamo al browser

proprietà possono tornarti utili. ••

·· 33

WEB SICUREZZA E SITI WEB: CODE INJECTION, ESCAPING ED INDIREZIONE

•• Hai visto nell’articolo precedente (Sicurezza e siti web: come trovare le cause di code injection, tecniche di validazione ·· Pag22) che un’ottima fase di validazione, oltre che migliorare significativamente la qualità dei tuoi dati, può impedire il passaggio di valori indesiderati al tuo sito, specialmente quelli che possono causare problemi di sicurezza. Validare, però, è solo metà dell’opera: occorre anche essere sicuri che i dati ‘validi’ non causino problemi. Come?

Autore: Cristian Angelini Se ricordi i code injection si generano nel passaggio da un linguaggio ad un altro: Cristian è un informatico freelance, specializzato nella progettazione e produzione di siti web e, più in generale, nelle tecnologie internet e correlate diavolerie.

e questo succede quando i dati che usiamo nel passaggio di linguaggio contengono caratteri che hanno un significato speciale, come ad esempio < e > per l’HTML, o ” e ‘ per JavaScript. Ad esempio: $frutto = $_REQUEST["frutto"];

http://www.cangelini.com/sito-it/ echo "Il mio frutto preferito: $frutto"; Se “frutto” contiene “mela”, tutto funziona. Se “frutto” contiene “<script src=”sitostrano/slotmachine.js”></script>”, abbiamo un problema. Questo dovrebbe oramai essere molto chiaro, ma … Perché, in sostanza, è un problema? Perchè contiene “<” e “>”, che in HTML hanno un significato particolare: di apertura e chiusura di una tag. In situazioni come queste, la domanda che devi porti è questa:

34 ·· your inspiration magazine

Sicurezza e siti web:

code injection, escaping ed indirezione Le espressioni regolari possono semplificare molto la gestione di un’applicazione web

“la variabile in questione deve contenere testo normale oppure può contenere HTML?”

echo $campo; // passaggio ad html! da PHP a SQL:

Nel secondo caso (HTML), dovrai validare la stringa, eliminando

$records = pg_query($dbh, "INSERT INTO

le tag non desiderate (ne parleremo più avanti in questo articolo).

anagrafica(nome) VALUES( '$campo')");

Nel primo caso, invece, dovrai effettuare l’escaping dei caratteri

da PHP a JavaScript:

con significato particolare: ovvero, sostituire questi caratteri con sequenze di caratteri normali, tradizionalmente chiamate

$("textarea.messaggio").val("<?php echo

sequenze di escape. Nel caso dell’HTML, ad esempio, si usano

$campo?>");

queste sequenze di escape:  < diventa &lt;

 > diventa &gt;

Come hai visto, il passaggio di linguaggio diventa un punto di aggressione quando utilizza valori di provenienza esterna:

 & diventa &amp;

$campo = $_REQUEST["testo"];

Giusto come curiosità: quel & all’inizio delle sequenze è detto

echo $campo;

carattere di escape. L’ultima sequenza di escape converte … il carattere di escape.

// provenienza esterna // passaggio di linguaggio mal fatto!

Questa è una caratteristica di tutte le sequenze di escape:

In ogni caso, è comunque buona norma effettuare l’escaping

avere una sequenza di escape per il carattere di escape.

nei passaggi a prescindere dalla provenienza dei dati.

Gli informatici, strano incrocio tra matematici, filosofi e psicologi,

Ricordati sempre che i siti sono soggetti a cambiare,

provano un gusto particolare per questo tipo di ginnastiche

i programmi ad essere riscritti parzialmente, le logiche

mentali, tanto rigorose quanto foriere di confusione per chi

adattate; quello che oggi è un valore statico e fisso, domani

ha approcci meno logici e più creativi … se a questo punto hai

potrebbe essere variabile, fornito dall’utente o letto

l’impressione del cane che si morde la coda, o del dilemma uovo/

da un database.

gallina, non farci caso: prendila come una curiosità e passa oltre …

ESCAPING

Le tecniche di escaping, nel dettaglio, variano a seconda dei linguaggi coinvolti: mentre i concetti di base sono certamente identici, è importante conoscere nel dettaglio cosa fare nelle varie

I siti internet moderni sono tutto un passare, molto spesso

situazioni. Come più volte indicato in questa guida, mi limito

assolutamente inconscio, da un linguaggio all’altro.

a considerare php, html, javascript, sql ed i comandi a sistema

Ad esempio, da PHP a HTML:

operativo, che sono di gran lunga i casi più frequenti nello sviluppo

·· 35

WEB

SICUREZZA E SITI WEB: CODE INJECTION, ESCAPING ED INDIREZIONE

web odierno. Gli altri linguaggi hanno equivalenti e meccanismi simili, che vi invito ad approfondire nel caso dobbiate usarli.

DA PHP A HTML Di gran lunga il passaggio più usato nello sviluppo dei siti internet, fortunatamente è anche il più semplice da controllare. Come abbiamo visto sopra, occorre convertire i caratteri <,> e &, che hanno significato particolare. Il php ci viene incontro con una funzione ad hoc: 1htmlspecialchars [figura 1]. $campo = stripslashes($_REQUEST["testo"]); echo htmlspecialchars($campo); figura 2 ·· 'htmlspecialchars'

A volte, è necessario passare dell’HTML come parametro “valido” di una form. In molti forum o applicazioni particolari, è possibile inserire tag HTML semplici (es. strong, em>, a) nel testo, magari tramite Rich Text Editor come tinyMCE. In questo caso, occorre controllare in php che le tag presenti nel valore letto siano quelle che ci aspettiamo: può venirci incontro la funzione 2

strip_tags [Figura 2] , che ci aiuta ad eliminare tutte le tag

al di fuori di quelle che permettiamo: figura 2 ·· 'strip_tags'

$campo = stripslashes($_REQUEST["testo"]); echo htmlspecialchars($campo); È buona norma anche validare: $testo = stripslashes($_REQUEST["testo"]); if (strip_tags($testo, "<b><i><a>") != $testo) {

echo "Non fare il furbo, il testo contiene tag non valide!"; exit; } Se le variabili contengono dati di cui conosciamo il tipo, imponilo tramite conversione prima di usarlo: $numero = intval($_REQUEST["numero"]); echo "Esce $dado";

ATTENZIONE:

Oltre a gestire tutti i possibili casi, anche quelli meno noti, sono

Non reinventare mai l’acqua calda! Per quanto possa essere

molto spesso più efficenti e, se per qualche ragione cambiassero

semplice scriversi la propria funzione, usiamo sempre ed in ogni

in un futuro i modi od i simboli da convertire, i nostri siti sarebbero

posto possibile le funzioni di conversione fornite dal linguaggio.

tutti aggiornati automaticamente per gestire i nuovi casi.

36 ·· your inspiration magazine

1 http://bit.ly/ctGbQx

2 http://bit.ly/946BmX

LINK: http://ow.ly/2d4mq

DA JAVASCRIPT A HTML Si tratta di un passaggio molto in uso nei siti moderni: spesso, è l’anello finale di una catena che parte da una richiesta AJAX, che ritorna un valore da visualizzare, poi, a livello HTML. Sfortunatamente, JavaScript non contiene funzioni di escaping HTML… dobbiamo pensarci noi: function escapehtml(s) { return s.replace(/&/g,"&amp;").replace (/</g,"&lt;").replace(/>/g,"&gt;"); } document.writeln("Attenzione a passare

figura 3 ·· '.html( htmlString )'

"+escapehtml("<script>")+" verso HTML!"); ma la soluzione migliore in assoluto è sfruttare i framework. Ad esempio, con jQuery il tutto si riduce a: $("p.commento").text("Attenzione a passare <script> verso HTML!"); Nel caso di jQuery, esistono due metodi: 3html [FIgura 3] che scriverà il testo con tag e tutto, e 4text [Figura 4] che invece farà correttamente l’escaping della stringa. Usiamo sempre il secondo, a meno che non dobbiamo usare testo HTML, ed in quest’ultimo caso, validiamo per essere certi che siano le tag che ci interessano. Esistono e vanno usate, le funzioni di conversione a tipo. figura 4 ·· '.text( textString )'

Ad esempio, parseInt: $("p.commento").text("Attenzione a passare <script> verso HTML!");

DA PHP A JAVASCRIPT Con l’aumentare esponenziale dell’importanza che ha il JavaScript nei nostri siti, fenomeno cui assistiamo in questi anni, questo è un passaggio che diventerà sempre più importante saper gestire correttamente. Il JavaScript, nella notazione JSON, viene e verrà utilizzato molto spesso come “contenitore” per il passaggio di dati strutturati dai siti al lato server – questo oltre a tutti gli usi

figura 5 ·· 'addcslashes'

“normali” all’interno dei nostri siti, per la gestione delle interfacce utente. Anche in questo caso, il php ci è d’aiuto. La funzione più

$("textarea.messaggio").val("<?php echo

importante è 5addcslashes [Figura 5], che ci permette di gestire

addcslashes($campo,"\\\'\"\n\r")?>");

l’escaping dei caratteri ‘,” e \, oltre che i caratteri di controllo:

3 http://bit.ly/bzQGTb

4 http://bit.ly/aN14gn

5 http://bit.ly/aAsSGy

·· 37

WEB

SICUREZZA E SITI WEB: CODE INJECTION, ESCAPING ED INDIREZIONE

Quanto detto per i valori di testo html ed i tipi, vale allo stesso modo anche qui: int dado = <?php echo intval($dado)?>; Merita un discorso a parte la funzione (disponibile solo con php 5.2 e superiore) 6json_encode [Foto 6]. Sebbene il nome dia l’idea figura 2 ·· 'json_encode'

di qualcosa “da usare solo quando creiamo strutture JSON”, in realtà la funzione è spesso usata al posto di addcslashes: $("textarea.messaggio").val(<?php echo json_encode($campo)?>); // nota: senza " !

Il problema di questa funzione, è che non abbiamo alcun controllo sul tipo di conversione effettuata. Potrebbe essere una stringa, ed allora verrebbe convertita correttamente, inclusi i quote ” attorno al valore. Potrebbe essere un numero, o essere NULL e in questo caso ci troveremmo con valori numerici o null, o magari addirittura array … Se preferiamo questo approccio, usiamo sempre un po’ di validazione prima: $("textarea.messaggio").val(<?php echo is_string($campo)?json_encode($campo):""?>); Nel caso usiamo json_encode per creare strutture complesse come array o oggetti, verifichiamo sempre che le strutture contengano valori corretti, validandole prima di convertirle, json_encode converte tutto a prescindere dal tipo e possiamo trovarci in situazioni molto scomode altrimenti.

DA PHP A SQL Qui, caratteri speciali e funzioni da utilizzare variano a seconda del database utilizzato. Rimanendo sui due più in voga, per MySQL si può usare 7mysql_real_escape_string [Figura 7], mentre per postgres si usa 8pg_escape_string [FIgura 8]: figura 7 ·· 'mysql_real_escape_string'

$records = pg_query($dbh, "INSERT INTO anagrafica(nome) VALUES( '".pg_escape_string($dbh, $campo)."')"); Porta particolare attenzione, nel caso di salvataggi su database, all’uso di operatori o funzioni SQL che accettano wildcards o espressioni regolari, come ad esempio l’operatore ILIKE figura 8 ·· 'pg_escape_string'

di postgresql! In questo caso, l’escaping può essere davvero complesso, e va affrontato caso per caso (raramente sono disponibili funzioni di escaping così specializzate):

e le ore, siano forniti in un formato unico e magari dichiarato in

sempre meglio riferirsi alla documentazione!

anticipo. I campi vuoti diventino NULL dove sono effettivamente

Anche in questo caso, è importante forzare i tipi delle variabili

vuoti, o stringhe vuote o zeri dove invece rappresentano campi

convertendoli, dove necessario. La tentazione è cadere in

dichiarati ma vuoti. In questo modo, il database ci darà una mano

ragionamenti del tipo “tanto ci pensa il database!” e passare

effettuando, anziché conversioni impreviste, controlli sui tipi salvati

tutte stringhe. Non farlo mai! I numeri diventino numeri, le date

e letti.

38 ·· your inspiration magazine

6 http://bit.ly/anz57n

7 http://bit.ly/chCoPP

8 http://bit.ly/bGMzCK

LINK: http://ow.ly/2d4mq

DA PHP AD ESPRESSIONE REGOLARE Chiunque usi le espressioni regolari, sa con assoluta certezza quanto complicato sia scriverle, visto che praticamente ogni simbolo ha un significato particolare … per aiutarci, ci viene incontro la funzione 9preg_quote: figura 9 ·· 'preg_quote '

$frase = "Questo (e quello)."; if (preg_match("#"+preg_quote($frase)+"#", $testo))

echo "Frase trovata"; In questo caso non solo contribuiamo a migliorare la sicurezza del codice, specialmente se la RE è usata per prendere decisioni sull’autorizzazione ad eseguire parti di codice, ma rendiamo la nostra vita molto, molto più semplice.

DA PHP A SISTEMA OPERATIVO (SHELL)

Nei prossimi articoli amplierò questo argomento, per ora mi limito a segnalare le funzioni di escaping 10escapeshellarg e 11escapeshellcmd:

Ultimo in ordine di utilizzo, ma in assoluto quello a rischio maggiore perché un errore nella gestione di questo passaggio può aprire le porte direttamente al file system ed al sistema operativo, il passaggio a shell deve essere assolutamente limitato e controllato in modo paranoico: passthru("/bin/grep -r allegati figura 10 ·· 'escapeshellarg'

$nome","r"); Cosa succederebbe se $nome contenesse, invece che un nome valido, qualcosa del tipo "/dev/null ; cat index.php" ? O magari "/dev/null ; rm -rf . &" ? Se a questo punto state guardando quella massa di caratteri senza capire, ve lo dico io: nel primo caso, vi prelevano index.php in formato sorgente, magari per cercare altri punti deboli per compromettere il sito.

figura 11 ·· 'escapeshellcmd'

Nel secondo, vi cancellano intere porzioni di sito. La chiave è quel “;” che nelle shell sta ad indicare, in modo

passthru("/bin/grep -r allegati "

non esatto ma per scopo di semplicità accontentiamoci, la fine

.escapeshellarg($nome),"r");

del comando e l’inizio di uno da eseguire subito dopo.

escapeshellarg converte un argomento in una stringa che non sia interpretabile dalla shell in altri modi, effettuando l’escaping dove

Quel "/dev/null" serve per far eseguire il comando da saltare

necessario e quotandola tra ‘. Escapeshellcmd fa la stessa cosa,

(grep) molto velocemente – hanno fretta.

ma per un intero comando: normalmente è sempre più chiaro e pulito costruire il comando da passare alla shell pezzo per pezzo,

Quello che segue dopo il “;” è il comando che ti hanno appena

come ho fatto sopra, ma possono esserci casi in cui può essere

iniettato. Il tuo sito è compromesso, ai massimi livelli: hai appena

conveniente usare la conversione per intero… o almeno credo.

creato una porta di accesso completo a tutto.

Personalmente, credo di non averne mai sentito la necessità.

9 http://bit.ly/cZmqxA

10 http://bit.ly/a7ZJHH

11 http://bit.ly/91EkPk

·· 39

WEB

SICUREZZA E SITI WEB: CODE INJECTION, ESCAPING ED INDIREZIONE

QUANDO NON USARE L’ESCAPING

La risposta è sì, se proprio devi con mille precauzioni e con un milione di distinguo. Se si può evitare (e si può molto più spesso

Uno degli errori più frequenti è quello di considerare solo la prima

di quanto non si possa) meglio evitare. Ma se vogliamo cercarci

fase della vita del valore, e dichiarare il problema chiuso una volta

grane … validiamo, molto pesantemente:

che, per esempio, il dato è salvato nel database (o in un file: il discorso è identico) dopo un regolare escaping. La tentazione, in questi casi, è di effettuare, oltre all’escaping necessario per

 per nessuna ragione, ancor più di ogni altro caso, fidiamoci di quello che ci arriva come parametro; se si tratta di nomi

il passaggio php-sql, anche quello per la successiva visualizzazione

di tabelle o comandi shell o SQL, trattiamoli come etichette

html, e sentirci al riparo da ogni problema.

e validiamoli con uno switch o con un array;

ERRORE!

 se si tratta di nomi di files, assicuratevi che siano nomi di files e non path! Se non possono essere validati come etichette,

Occorre sempre considerare l’uso che faremo del dato per il resto

può aiutare l’utilizzo di funzioni come basename:

della sua vita! Se, per esempio, i dati nel database verranno letti e visualizzati nell’HTML dopo, dovrà essere eseguito l’escaping

$nome = basename($_REQUEST["file"]);

dei valori letti: quindi, non ha senso farlo salvandoli!

// elimina eventuali path lasciando

Perchè questo? Per due ragioni.

il solo nome

Primo, perchè il database è in mano al nemico, che ha provveduto a salvarci dentro valori tali da causare problemi

e arricchite il codice che segue con controlli sull’esistenza

non durante la scrittura, ma durante la lettura! Quindi, se i dati

del file (se dovete leggerlo), il fatto che sia scrivibile la directory

vengono salvati da qualche parte, facciamoci la domanda:

dove dovete scrivere, e così via … sempre avere piedi

ho gestito l’escaping correttamente nei successivi caricamenti?

di piombo;

Secondo, perchè l’uso dei dati può cambiare in futuro. È inutile effettuare l’escaping, per esempio, di quello che scriviamo in un database ipotizzandone l’uso per l’HTML.

 sempre se lavorate con i files, non trascurate i file speciali . e .. ! Potreste avere sorprese poco piacevoli, quindi scartate sempre files di quel genere. Basta una semplicissima espressione regolare:

Magari in un futuro prossimo verranno utilizzati, su nuove richieste del cliente, in un applicazione Flex, o tradotti in CSV,o usati

if (preg_match("/^\.\.?$/",

per creare un PDF dinamico. Meglio sempre mantenerli il più

$_REQUEST["file"])) {

possibile indipendenti dal formato d’uso!

error_log("Bel tentativo!");

In breve: è assolutamente fondamentale non cercare di proteggere in anticipo gli usi futuri mentre salviamo i dati, ma farlo mentre usiamo i dati. Pratichiamo l’escaping durante

exit; }

l’uso, non durante il salvataggio se non sul solo linguaggio

In ogni caso, visto che il browser è in mano al nemico, ricordati

necessario a salvare i dati.

che dare troppe informazioni sulla struttura del lato server

INDIREZIONE

è da evitare: già questo è un ottimo motivo per non passare direttamente nomi di files o di tabelle, ma usare la tecnica chiamata comunemente indirezione, quando possibile.

Una delle cose più complesse, in uno scenario di sicurezza,

Indirezione, in parole povere, significa sostituire ogni valore

è passare come parametri ad uno script il nome di un file

che l’utente ci passa senza usarlo direttamente. È anche una forma

o di una tabella sql o un comando shell o SQL. La ragione è ovvia:

molto più elegante, chiara e pulita che passare nomi di tabelle

se posso modificare ogni parametro, posso anche imporre i miei

o files direttamente, perchè ti perme di cambiare facilmente

comandi, e se ho in bella mostra il mio comando SQL,

il nome delle tabelle stesse senza dover toccare il lato client.

posso creare il mio ad hoc, magari per leggerti i record a sbafo,

L’indirezione paga bene sugli interessi futuri, credimi.

o peggio

Per esempio, invece che passare il comando SQL o il nome

.Ma … posso farlo?

della tabella, puoi indicare l’operazione da compiere:

40 ·· your inspiration magazine

LINK: http://ow.ly/2d4mq

switch ($_REQUEST["azione"]) { case "creautente":

$cmd = "INSERT INTO utenti(nome) VALUES('tizio')"; break; case "aggiornautente":

$cmd = "UPDATE utenti SET nome='tizio'"; break; default:

error_log("Manco da qui passi, mi spiace!"); exit; }

// da qui in poi $_REQUEST["azione"] non viene più usata, al suo posto si usa $cmd L’indirezione si applica tanto nella fase di validazione quanto tin quella di passaggio ad altro linguaggio. Lo strumento più usato è, appunto, il comando 12switch [Figura 12], ma in certi frangenti può anche essere comodo usare, ad esempio, un array: $comandi = array(

"creautente"=>"INSERT INTO utenti figura 12 ·· 'switch'

(nome) VALUES('tizio')", "aggiornautente"=>"UPDATE utenti SET nome='tizio'" ); if (array_key_exists($_REQUEST["azione"], $comandi))

$cmd = $comandi[$_REQUEST["azione"]); else {

error_log("Manco da qui passi, mi spiace!"); exit; }

// da qui in poi $_REQUEST["azione"] non viene più usata, al suo posto si usa $cmd

CONCLUSIONE

I concetti, più che gli esempi, sono la parte fondamentale da comprendere: da questi – e dagli esempi che ho riportato –

Abbiamo visto ed approfondito cause e rimedi al code injection,

puoi partire per rinforzare le tue applicazioni, imparando nel

soprattutto nei lati che riguardano lo sviluppo web. A questo

frattempo a migliorare le tecniche usate adattandole al tuo stile di

punto, l’errore è considerare il capitolo come chiuso e completo:

programmazione, e crearne di tue.

non farlo! Tutto ciò che riguarda la sicurezza è sempre e

Nei prossimi articoli tratteremo altri problemi legati alla sicurezza,

costantemente in evoluzione, nuove tecniche e nuove trappole

questa volta concentrandoci sul lato server: quali sono i rischi

sono all’ordine del giorno: tutto quanto ho raccontato, serve

che corriamo quando pubblichiamo un sito in php? Da cosa

soprattutto a capire qual è la logica che causa questi problemi, e

dobbiamo guardarci? Nel frattempo, lascio spazio alle riflessioni

quale tipo di soluzione può essere adottata per impedirli. La caccia

finali sull’argomento code injection con il finale più classico della

non ha mai termine: chiedi a Wiley il coyote, se non ci credi.

letteratura didattica … “Domande?” ••

12 http://bit.ly/9HGSDC

·· 41

Realizzare un tema per WordPress adesso Ă¨ un gioco da bambini. Vuoi sapere perchĂ¨? http://tinyurl.com/39ttfdq

your inspiration web

SOMMARIO TUTORIAL

Apache ·· Il Mod_Rewrite e la magia di riscrivere gli URL

PHP ·· Come sviluppare una navigazione dinamica e mantenibile

44 50 58 64 70 78 84 84

IL MOD_REWRITE E LA MAGIA DI RISCRIVERE GLI URL COME REALIZZARE L'HEADER DEL TEMA [PARTE 1] COME SVILUPPARE UNA NAVIGAZIONE DINAMICA E MANTENIBILE COME REALIZZARE L'HEADER DEL TEMA [PARTE 2] WORDPRESS: DIAMO UNO SGUARDO AL LOOP AGGIUNGIAMO LA SIDEBAR AL NOSTRO TEMA COME REALIZZARE UN LAYOUT IN STILE MAGAZINE? WORDPRESS: COME RENDERE DINAMICI HEADER E SIDEAR DEL TEMPLATE?

WebDesign ·· Come realizzare un layut in stile magazine

·· 43

TUTORIAL ·· APACHE IL MOD_REWRITE E LA MAGIA DI RISCRIVERE GLI URL

Apache

Spider

•• In questo articolo vedremo le basi di una tecnica molto diffusa ed utile ovvero

googlebot

Google

fast

Fast - Alltheweb

mod_rewrite, implementabile

slurp

Inktomi - Yahoo!

e configurabile tramite una nostra vecchia

scooter

Altavista

mercator

Altavista

l’url rewrite. Si tratta di una funzionalità di Apache resa possibile dal modulo

Autore: Maurizio Tarchini

Motore di ricerca

conoscenza: i files .htaccess. Il maggiore beneficio di riscrivere gli url

Maurizio è sposato con la triade

é una migliore indicizzazione da parte

Ask Jeeves

PHP - MySql - Apache e, non pago,

dei motori di ricerca. Pare infatti che gli

teoma_agent

Teoma

ha un'amante chiamata Jquery.

Ha un blog dove cerca di descrivere

string (?id=34&type=5&mod=user),

ia_archiver

Alexa - Internet Archive

nei minimi particolari sia la moglie che

in particolare se passano molti parametri.

Yahoo! Slurp

Yahoo

spider siano “disturbati” dalle query

l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web.

Sei pronto dunque a calarti in questo misterioso ed affascinate campo del web?

COME AVVIENE LA TRADUZIONE DELL’URL?

http://www.mtxweb.ch/php_learn/ Poniamo che nel nostro sito, la pagina prodotti.php mostri un prodotto in base all’id passato nell’url. http://www.tuosito.com/prodotti.php?id=79 difficoltà: alta tempo: 30 min.

44 ·· your inspiration magazine

Questa pagina mostra i dettagli del prodotto salvato nel database con id=79

1 http://bit.ly/bRkopJ

Il mod_rewrite e la magia di riscrivere gli URL Il beneficio di riscrivere gli url é una migliore indicizzazione da parte dei motori di ricerca

Con una semplice regola, possiamo riscrivere l’url in questo modo: http://www.tuosito.com/prodotto-79.html

COME DICHIARARE UNA REGOLA? Il modello generale per dichiarare una regola di rewrite é il seguente:

Quello che dobbiamo fare é dire ad Apache: Quando trovi nell’url prodotto seguito da un trattino seguito

RewriteEngine On

da un numero seguito da .html, richiedi la pagina

RewriteRule cosa-mi-aspetto-di-trovare

prodotti.php?id=quelNumero

-nella-barra-dell-url

Come avrai intuito, bisognerà lavorare con le 2espressioni

come-devo-tradurre-quello-che-trovo

regolari [Figura 1]. Se ne sei a digiuno, non ti preoccupare.

In primo luogo va inizializzato il motore del mod_rewrite

Giustino ha scritto un’3ottima guida al riguardo.

con la dichiarazione RewriteEngine On. In seguito va dichiarata la regola (o le regole). Ma passiamo alla pratica ed implementiamo quanto proposto nel paragrafo precedente. Iniziamo a scrivere la pagina prodotti.php che realizzeremo semplicemente così: <?php echo 'Questa pagina mostra il prodotto numero ' . $_GET['id']; ?> Tanto basterà per verificare il corretto funzionamento della nostra regola. Ora vediamo il file .htaccess che dovrà essere salvato nella stessa (o gerarchicamente superiore) cartella del file prodotti.php. RewriteEngine On RewriteRule ^prodotto-([0-9]+)\.html$ prodotti.php?id=$1

figura 1 ·· Espressione regolare

2 http://bit.ly/atEYej

3 http://bit.ly/9pqkzU

·· 45

TUTORIAL - APACHE

IL MOD_REWRITE E LA MAGIA DI RISCRIVERE GLI URL

Quanto dice questa regola, é esattamente quello che abbiamo

Modifichiamo il file prodotti.php in modo da poter verificare

visto in precedenza: Quando trovi nell’url qualcosa che inizia con

il funzionamento anche di questo secondo esempio in questo

(^ significa inizio della stringa) prodotto seguito da un trattino

modo:

seguito da un numero di una o più cifre (+ significa uno o più) e che termina ($ significa fine della stringa) con .html, richiedi

<?php

la pagina prodotti.php?id=quelNumero

echo 'Questa pagina mostra il prodotto numero ' . $_GET['id'] . ' appartenente

$1 si riferisce infatti a quanto é stato trovato dalla prima (e in questo caso unica) sottostringa.

alla categoria ' . $_GET['category']; ?>

Ora impostando come url: Ora digitando l’url: http://www.tuosito.com/prodotto-34.html http://www.tuosito.com/bevande/ Dovresti visualizzare a video la seguente scritta:

prodotto-12.html

“Questa pagina mostra il prodotto numero 34.”

Visualizzerai a video la seguente scritta.

UN ESEMPIO CON DUE PARAMETRI

Questa pagina mostra il prodotto numero 12 appartenente alla categoria bevande.

Poniamo ora che la nostra pagina prodotti.php dipenda da due parametri: l’id e la categoria del prodotto.

Fino ad ora abbiamo visto le basi dell’url rewrite. Ti sarai reso

L’URL originale potrebbe essere questo:

conto di quanto sia importante una buona conoscenza delle espressioni regolari per poter padroneggiare questa tecnica.

http://www.tuosito.com/prodotti .php?category=bevande&id=12

Quello che faremo adesso sarà inserire il nome del prodotto nell’url. Perchè?

Mentre riscritto potrebbe avere questo aspetto: http://www.tuosito.com/bevande/ prodotto-12.html Vediamo dunque una possibile regola per poi commentarla:

Dato che l’url riscritto sarà quello registrato dal motore di ricerca, diventa estrememente interessante visualizzare il nome del prodotto nell’url. Un aspetto al quale dovremo prestare particolare attenzione riguarda il limite per cui la stringa di un url non ammette spazi e

RewriteEngine On

caratteri speciali o accentati. Dovremo dunque passare la stringa

RewriteRule ^([a-z]+)/prodotto-([0-9]+)\

che rappresenta il nome del prodotto in un “filtro” che sostituisca

.html$ prodotti.php?category=$1&id=$2

gli spazi con dei trattini, le lettere accentate con le corrispondenti non accentate e che elimini gli eventuali caratteri speciali.

Cosa dice questa regola? WordPress utilizza il metodo dei permalink, ovvero trasforma Se trovi una stringa che inizia con uno o più caratteri seguiti da /

il titolo dell’articolo in un dato univoco. Se utilizzi WordPress,

seguiti da prodotto seguito da un trattino seguito

puoi provare a creare un articolo ed intitolarlo prova test. Verrà

da un numero di una o più cifre seguito da .html, richiedi

creato il permalink prova-test. Se ora provi a creare

la pagina prodotti.php?category=quelloCheHaiTrovatoNellaP

un altro articolo ed intitolarlo ancora prova test, il permalink

rimaSottostringa& id=quelloCheHaiTrovatoNallaSecondaSot

che verrà creato sarà prova-test-2.

tostringa. 46 ·· your inspiration magazine

LINK: http://ow.ly/2d4ne

Questo in quanto il permalink sarà l’unico dato a disposizione

function CleanString($string)

per andare a riprendere l’articolo e dunque dovrà essere – come

{

già detto – un dato univoco. Il sistema utilizzato da WordPress

$strResult = str_ireplace("à",

è piuttosto complesso, prevede delle trasformazioni e delle verifiche e utilizza chiamate asincrone. In questo articolo vedremo un modello semplificato ma comunque valido (inoltre, per inciso, sono di vecchia scuola e per quello che mi riguarda il dato univoco ha un solo nome: chiave primaria). Passeremo dunque il nome del prodotto, ma in qualche modo anche l’id.

CHE TIPO DI URL VOGLIAMO OTTENERE PER OTTIMIZZARE L’INDICIZZAZIONE? Quello che vogliamo ottenere é un url di questo genere:

"a", $string); $strResult = str_ireplace("á", "a", $strResult); $strResult = str_ireplace("è" "e", $strResult); $strResult =

"e", $strResult); $strResult = str_ireplace("ì", "i", $strResult); $strResult = $strResult);

tosa-erba-elettrico-grande

$strResult =

visualizzare i dettagli del prodotto, sarebbe simile a questa:

str_ireplace("í",

"i", $strResult);

http://www.tuosito.com/prodotto56/

Se non utilizzassimo l’url rewrite, la costruzione del link per

str_ireplace("é",

str_ireplace("ó",

"o", $strResult); $strResult =

str_ireplace("ù",

"u", $strResult); //lettura

dei valori dal database

echo '<a href="prodotti.php?id=' . $id .

$strResult = str_ireplace("ù", "u", $strResult);

'">' . $nomeProdotto . '</a>';

$strResult =

Se vogliamo produrre un url come quello visto in precedenza dovremo invece procedere in questo modo:

str_ireplace("ú",

"u", $strResult); $strResult =

str_ireplace("ú",

"u", $strResult); //lettura dei valori dal database

$strResult =

//filtraggio

$strResult);

del nome prodotto

str_ireplace("ç", "c",

echo '<a href="prodotto' . $id . '/' .

$strResult =

$nomeProdotto . '</a>';

"o", $strResult);

str_ireplace("ö",

Come abbiamo visto all’inizio, se vogliamo passare il nome

$strResult =

str_ireplace("û", "u",

prodotto nell’url, dovremo prima ripulirlo da lettere accentate e caratteri speciali che potrebbero creare problemi e

$strResult); $strResult =

str_ireplace("ê", "e",

successivamente sostituire anche gli spazi con dei trattini.

$strResult);

RIPULIAMO IL NOME DEL PRODOTTO CHE VOGLIAMO PASSARE COME URL

$strResult = $strResult); $strResult =

Creiamo la funzione CleanString() ed iniziamo a rimpiazzare

str_ireplace("ü", "u", str_ireplace("ë",

"e", $strResult);

le lettere accentate con le medesime lettere ma senza accenti

$strResult =

utilizzando la funzione str_ireplace().

"a", $strResult);

str_ireplace("ä",

·· 47

TUTORIAL - APACHE

IL MOD_REWRITE E LA MAGIA DI RISCRIVERE GLI URL

Sostiuiamo anche l’apostrofo con uno spazio:

$strResult =

str_ireplace("í", "i",

$strResult); $strResult =

str_ireplace("'", " ",

$strResult);

$strResult =

$strResult);

Ora possiamo rimuovere tutto quello che non è un carattere

$strResult

str_ireplace("ó", "o",

str_ireplace("ú", "u",

str_ireplace("ç", "c",

$strResult);

normale o un numero:

$strResult $strResult

str_ireplace("ò", "o",

= preg_replace('/[^A-Za-z0-9

]/', "", $strResult);

$strResult); $strResult

In seguito rimuoviamo eventuali spazi prima e/o dopo la stringa

$strResult); $strResult =

con la funzione trim():

str_ireplace("ö", "o",

$strResult); $strResult = trim($strResult); Adesso una piccola rifinitura. Se mai dovessero esserci dei doppi (o più) spazi all’interno della stringa, riduciamoli ad un solo spazio:

$strResult =

str_ireplace("û", "u",

$strResult); $strResult =

str_ireplace("ê", "e",

$strResult); $strResult

= preg_replace('/[ ]{2,}/',

" ", $strResult);

$strResult

str_ireplace("ü", "u",

$strResult);

L’espressione regolare precedente trova tutto quello che è due o

$strResult =

str_ireplace("ë", "e",

più spazi e li sostituisce con un solo spazio.

$strResult);

Ora non ci resta che sostituire gli spazi con dei trattini:

$strResult =

$strResult = str_replace("

", "-",

$strResult);

str_ireplace("ä", "a",

$strResult); $strResult

str_ireplace("'", " ",

$strResult);

Ed ecco la nostra funzione

$strResult = preg_replace('/[^A-Za-z0-9 function CleanString($string) {

$strResult = trim($strResult);

$strResult = str_ireplace("à", "a", $string);

$strResult); $strResult

= str_ireplace("á", "a",

$strResult); $strResult =

str_ireplace("è", "e",

$strResult); $strResult =

str_ireplace("é", "e",

$strResult); $strResult =

]/', "", $strResult);

str_ireplace("ì", "i",

48 ·· your inspiration magazine

$strResult =

preg_replace('/[ ]{2,}/',

" ", $strResult); $strResult = str_replace(" ", "-", $strResult); return $strResult; }

LINK: http://ow.ly/2d4ne

una stringa alfanumerica (che può contenere il carattere “-”) In questo modo la creazione del nostro link sarà molto semplice:

//lettura

dei valori dal database

di uno o più caratteri, richiedi la pagina prodotti.php?id=ilNume roCheHaiTrovatoNellaPrimaSottostringa. La seconda sottostringa non ci interessa in quanto disponiamo già

echo '<a href="prodotto' . $id . '/' .

dell’id che servirà a caricare i dettagli del prodotto, ma interesserà

CleanString($nomeProdotto) .

invece l’ottimizzazione per i motori di ricerca, per i quali sarà così

. $nomeProdotto . '</a>';

disponibile, già a livello di url, il nome

SCRIVIAMO LA REGOLA DI REWRITE URL

del prodotto.

CONCLUSIONE Abbiamo visto tre esempi basilari di come implementare la

A questo punto possiamo procedere con l’implementazione della

riscrittura degli url. Teoricamente non vi sono limiti alle possibilità

regola di rewrite in questo modo:

offerte da questo modulo di Apache se non nella conoscenza

RewriteEngine On RewriteRule

^prodotto([0-9]+)/

che abbiamo delle espressioni regolari. Infatti, come hai visto, si tratta in gran parte di questo. E tu, utilizzi questa tecnica per migliorare l’indicalizzazione dei tuoi siti? ••

([a-zA-Z0-9-]+)$ prodotti.php?id=$1 Questa regola stabilisce che: Quando trovi la stringa prodotto seguita da un numero di una o più cifre, seguita da “/”, seguita da

·· 49

TUTORIAL ·· WORDPRESS COME REALIZZARE L’HEADER DEL TEMA? [ PARTE 1 ]

Wordpress

•• In questa lezione vedremo come realizzare la parte superiore del nostro blog, quello che generalmente in gergo tecnico è indicato come “header” del sito.

1·· SCRIVIAMO LE NOSTRE PRIME RIGHE DI CODICE Apriamo dunque (con il nostro 1editor preferito) il file principale del tema denominato

Autore: Nando Pappalardo

“index.php” che abbiamo 2creato nella precedente lezione e scriviamo il markup (X)HTML necessario a visualizzare i nostri primi contenuti sul sito.

Nando è amministratore di Edi Group, società di comunicazione e formazione

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

fondata nel 2005.

"http://www.w3.org/TR/xhtml1-strict.dtd">

È inoltre Trainer Microsoft e docente

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi di formazione professionale regionali

lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;

e privati.

charset=utf-8"/>

www.yourispirationweb.com

<title>Your Inspiration WordPress</title> <link rel="stylesheet" href="wp-content/themes/YIW/ style.css" type="text/css" media="screen" /> </head>

difficoltà: media tempo: 45 min.

50 ·· your inspiration magazine

<body>

1 http://bit.ly/aM2EUe

2 http://bit.ly/dyIQMN

Come realizzare l’Header del tema

[parte 1]

html, body, div, span, object, iframe, h1, h2, </body>

h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q,

</html>

dl, dt, dd, ol, ul, li, fieldset, form, abel, legend, table, caption, tbody, tfoot,

Non abbiamo ancora fatto nulla di particolare, ci siamo

thead, tr, th, td {margin:0; padding:0;

semplicemente limitati a definire il DOCTYPE del documento,

border:0; font-weight:inherit;

il set di caratteri, un titolo per la pagina e infine abbiamo collegato

font-style:inherit; font-size:100%;

il foglio di stile denominato “style.css” al nostro documento.

font-family:inherit; vertical-align:baseline;}

Se carichiamo adesso la Home Page del blog noteremo che è stato aggiunto il titolo della pagina che abbiamo indicato [Figura 1].

body {line-height:1.5;} table {border-collapse:separate; border-spacing:0;} caption, th, td {text-align:left; font-weight:normal;} table, td, th {vertical-align:middle;} blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } a img {border:none;}

figura 1 ·· Pagina bianca con Titolo del sito

2 ·· PERSONALIZZARE IL MODO IN CUI SARANNO VISUALIZZATI I CONTENUTI

.clearer {height:0px;overflow:hidden; margin:0px;clear:both;} .center {text-align:center;} Dopo aver azzerato i valori predefiniti degli elementi andiamo

Apriamo il foglio di stile denominato “style.css” e – subito

a definire – nel foglio di stile – una sezione che farà da contenitore

dopo i commenti inseriti nella precedente lezione per definire

ai contenuti che vogliamo visualizzare sul sito.

alcune informazioni riguardanti il tema che stiamo sviluppando – aggiungiamo un reset generale in modo da azzerare i valori

.container

{width:960px;margin:0 auto;

che i vari browser associano in modo predefinito ad alcuni

min-height:100px;border:1px solid red;}

elementi per poi ridefinirli quando sarà il momento con i valori che effettivamente ci servono. In questo modo rendiamo

Ho aggiunto un bordo rosso e un’altezza di 100 pixel

uguale la visualizzazione di ogni elemento su tutti i

al contenitore in modo da poterlo visualizzare sullo schermo

principali browser.

poiché non esistendo ancora altri contenuti ci saremmo trovati

/*********************************************

davanti una semplice pagina bianca.

**************** reseat.css *****************

Adesso ritorniamo sulla pagina “index.php” e nel markup

********************************************/

(X)HTML, subito dopo il tag body, andiamo ad aggiungere

3 http://bit.ly/63UPQe

·· 51

TUTORIAL - WORDPRESS

COME REALIZZARE L'HEADER DEL TEMA? [PARTE 1]

la sezione contenitore che abbiamo appena definito nel foglio di stile: ... <body> <div class="container">

</div> </body> ... Se adesso andiamo a visualizzare la Home Page del nostro blog dovremmo vedere qualcosa di simile a quanto mostrato figura 3 ·· Nome assegnato al Blog

in [Figura 2].

Sostituiamo la riga di codice nel markup (X)HTML che definisce il titolo della pagina: <title>Your Inspiration WordPress</title> figura 2 ·· Home Page del Blog con contenitore centrato

con questa nuova riga che utilizza il tag del template denominato: bloginfo(‘name’) [Figura 4]

Riassumendo: abbiamo iniziato a scrivere le prime righe di markup nel documento principale del tema (“index.php”), gli abbiamo collegato il foglio di stile e adesso stiamo iniziando a personalizzare il modo in cui i contenuti saranno visualizzati sullo schermo.

3 ·· AGGIUNGERE DINAMICAMENTE ALCUNE INFORMAZIONI AL TEMPLATE Per il momento ci siamo solamente limitati a scrivere del semplice markup html e qualche regola di CSS, ora vediamo come rendere dinamiche alcune delle cose che abbiamo già realizzato utilizzando i tag messi a disposizione dal template di WordPress.

[3.1] ·· Aggiungere Il Titolo Della Pagina figura 4 ·· Function Reference/bloginfo

Iniziamo col rendere dinamico il titolo della pagina e facciamo in modo che questo sia preso automaticamente dal nome che

abbiamo assegnato al sito in fase d’installazione e che possiamo cambiare in qualsiasi momento dal menù:

In questa riga non abbiamo fatto altro che sostituire il titolo

“Impostazioni ->Generale” [Figura 3].

della pagina inserito manualmente in precedenza con il titolo

52 ·· your inspiration magazine

4 http://bit.ly/VBK31

LINK: http://ow.ly/2d4nT

del sito preso in modo dinamico dalle impostazioni assegnate

Se aggiorniamo nuovamente la Home Page del blog

sul nostro WordPress in fase di configurazione.

e visualizziamo il codice (X)HTML generato dalla pagina

Infatti, il tag del template bloginfo permette di recuperare

possiamo vedere che il collegamento al foglio di stile è stato

informazioni riguardanti il blog in questione e può essere

inserito dinamicamente grazie al corretto utilizzo del tag

utilizzato in qualsiasi punto del template per stampare a video

bloginfo(’stylesheet_url’) come mostrato nella [Figura 5].

questi dati. Nel nostro caso al tag bloginfo abbiamo passato il parametro name e questo ci ha permesso di stampare a video il nome assegnato al blog. Se desideri approfondire gli 5altri parametri supportati dal tag bloginfo ti consiglio di leggere la documentazione sul sito ufficiale di WordPress. Dopo aver eseguito questa modifica, se proviamo ad aggiornare la Home Page del nostro blog, possiamo notare che il titolo

figura 6 ·· Collegamento dinamico del foglio di stile

4 ·· QUALI SONO I TAG CHE POSSONO ESSERE UTILIZZATI ALL’INTERNO DI UN TEMPLATE?

della pagina adesso viene recuperato in modo completamente I tag sono utilizzati all’interno dei template per visualizzare

dinamico [Figura 5].

informazioni in modo dinamico o comunque per aiutarti a personalizzare il tuo blog, infatti forniscono tutti gli strumenti necessari per rendere il tema personalizzabile a tuo piacimento. Se ti stai chiedendo quali sono i tag che possono essere utilizzati figura 5 ·· Titolo del Blog recuperato in modo dinamico

nello sviluppo di un template di WordPress ti consiglio di leggere l’ottima 6documentazione presente sul sito ufficiale [Figura 7]

[3.2] ·· Aggiungere Il Collegamento Al Foglio Di Stile

di WordPress. Nella pagina suggerita, è riportato un elenco generale di tutti i tag disponibili in WordPress, ordinati per

Adesso rendiamo dinamico anche il collegamento al foglio

categorie di specifiche funzioni.

di stile che abbiamo associato al nostro documento. Individuiamo dunque la riga di codice interessata: <link

rel="stylesheet" href="wp-content/

themes/YIW/style.css" type="text/css" media="screen" /> In questa riga rimpiazziamo il collegamento al foglio di stile in modo che questo possa essere passato dinamicamente mediante l’utilizzo del tag bloginfo (che abbiamo visto in precedenza). Questa volta però per farci restituire i l collegamento al foglio di stile del tema passiamo il parametro stylesheet_url, come mostrato nella riga sotto: <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" media="screen" /> figura 7 ·· Template Tags

5 http://bit.ly/d1YjQE

6 http://bit.ly/y3rR

·· 53

TUTORIAL - WORDPRESS

COME REALIZZARE L'HEADER DEL TEMA? [PARTE 1]

5 ·· AGGIUNGERE DINAMICAMENTE ALTRI ELEMENTI NELL’HEAD DELLA PAGINA

[5.2] ·· Aggiungere l’URL Per Gestire I Pingbackt Il Pingback è un protocollo definito da Stuart Langridge e Ian Hickson per permettere a blogger e autori del Web

Nel paragrafo tre abbiamo visto come richiamare dinamicamente

di ricevere una notifica quando un altro sito web inserisce un link

alcuni elementi all’interno del template mediante l’utilizzo del tag

verso uno dei propri documenti, per poi, in genere, elencarli

bloginfo. Procediamo dunque con questa operazione in modo

alla fine del documento stesso [fonte 7Wikipedia].

da rendere dinamici altri elementi tipici presenti nell’head del documento.

WordPress dispone di questa funzionalità ma per usufruirne occorre definire la seguente riga all’interno dell’head

Iniziamo con il meta tag, che definisce il contenuto del documento

del documento:

e il set di caratteri utilizzati: <link rel="pingback" href="<?php bloginfo <meta http-equiv="Content-Type"

('pingback_url'); ?>" />

content="text/html; charset=utf-8"/> Questo è ciò che consente di inviare e ricevere pingback da altri E sostituiamolo con la riga che segue: <meta http-equiv="Content-Type"

blog che possono essere collegati al nostro contenuto.

[5.3] ·· Aggiungere Un Gancio Per I Plugin

content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Molti plugin di WordPress inseriscono dei propri fogli di stile CSS o codice Javascript direttamente nell’intestazione

[5.1] ·· Aggiungere Un Collegamento Ai Feed

del documento. Per fare questo utilizzano un “gancio” messo a disposizione da WordPress che permette l’inserimento dinamico

Alcuni lettori di Feed possono avere problemi a riconoscere i Feed

del codice. Questo gancio deve essere posizionato prima

disponibili sul tuo blog WordPress.

della chiusura del tag </head> come mostrato nella riga sotto.

Di conseguenza è utile inserire queste righe di codice all’interno

<?php wp_head(); ?>

dell’head del documento per facilitarne la loro lettura:

</head>

//RSS 2.0

Il gancio non è obbligatorio da inserire per il funzionamento

del Tema, ma senza questo molti plugin potrebbero

('%s RSS Feed', 'yiw'), get_bloginfo('name'));

non funzionare correttamente.

?>" href="<?php bloginfo('rss2_url'); ?>" />

Riassumendo un po’ tutto quello che abbiamo fatto fino a questo punto, la parte iniziale del nostro documento index.php dovrebbe presentarsi come segue:

//ATOM <link rel="alternate" title="<?php printf(__ ('%s Atom Feed', 'yiw'), get_bloginfo('name')) ; ?>" href="<?php bloginfo('atom_url'); ?>" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/ xhtml" xml:lang="en" lang="en">

54 ·· your inspiration magazine

http://bit.ly/d2qXJH

LINK: http://ow.ly/2d4nT

<head>

Apriamo il file index.php e aggiungiamo il seguente markup

(X)HTML:

<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/ rss+xml" title="<?php printf(__ ('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application

<h1> <a href="<?php echo get_option('home'); ?>/" title="Ritorna alla Home Page"> <?php bloginfo('name'); ?> </a> </h1> <p class="center"><?php bloginfo

/atom+xml" title="<?php printf(__ ('%s Atom

('description'); ?></p>

Feed', 'yiw'), get_bloginfo('name')); ?>"

href="<?php bloginfo('atom_url'); ?>" />

</div>

</body>

('pingback_url'); ?>" /> <?php wp_head(); ?>

Abbiamo aggiunto il nome del blog come titolo (<h1>…</h1>) del documento da visualizzare in alto mediante il tag bloginfo

</head>

(già utilizzato in questa lezione), inoltre lo abbiamo reso un collegamento ipertestuale alla home page del blog passandogli l’URL in modo dinamico mediante l’utilizzo di un altro tag

<body>

del Template: get_option(‘home’), il quale restituisce appunto

l’url della Home Page del blog.

</div> </body>

Subito sotto il titolo abbiamo aggiunto un paragrafo che richiama dinamicamente la descrizione (che abbiamo assegnato al blog in fase di configurazione, [Figura 8]) tramite il solito tag bloginfo, questa volta richiamato mediante il passaggio del parametro

</html>

“description”.

6 ·· COME AGGIUNGERE TITOLO E DESCRIZIONE DEL BLOG NELL’HEADER? Finalmente è arrivato il momento di aggiungere e visualizzare qualche contenuto nel nostro documento che fino ad ora mostra una semplice pagina bianca. Iniziamo con l’aggiungere il titolo e la descrizione del blog nella parte superiore del documento.

figura 8 ·· Titolo e Descrizione del Blog definiti nel Pannello di Amministrazione di WordPress

·· 55

TUTORIAL - WORDPRESS

COME REALIZZARE L'HEADER DEL TEMA? [PARTE 1]

figura 9 ·· Home Page del Blog con Titolo e breve descrizione

Adesso apriamo il foglio di stile del tema, style.css, e aggiungiamo

Ricarichiamo la home del nostro blog e visualizziamo

alcune regole per definire il modo in cui presentare il contenuto

i cambiamenti [Figura 9].

che abbiamo inserito: Come puoi notare adesso sul blog sono apparsi come per magia /* Intestazioni */

il titolo e la descrizione del blog definiti mediante il Pannello di

h1, h2, h3, h4, h5, h6 {font-weight:bold;

Amministrazione di WordPress.

color:#7f192f;} h1 {font-size:150%;line-height:1; margin-bottom:0.5em;text-align:center;}

CONCLUSIONE E anche questa settimana siamo giunti alla fine della lezione, purtroppo mi sono già dilungato abbastanza e non sono riuscito

/* Paragrafi */

a far rientrare in questa lezione l’argomento riguardante la

p { padding:4px 0 10px 0; line-height:20px;}

visualizzazione delle pagine del blog, argomento che richiede qualche piccolo approfondimento e a cui desidero dedicare l’intera lezione della prossima settimana.

/*link*/ a:link, a:visited {color:#7f192f;

Come vedi il corso inizia a farsi sempre più interessante e stiamo

text-decoration:none;}

per entrare nel vivo della creazione di un tema per WordPress.

a:hover, a:active {color:#b2030b;}

Non perderti la prossima puntata. ••

/* Web Site */ body {background:#fbf7f7; font-family:georgia,verdana,Arial,sans-serif;} .container

{width:960px;

margin:20px auto 0;min-height:100px; border:2px solid red;}

56 ·· your inspiration magazine

TUTORIAL ·· PHP COME SVILUPPARE UNA NAVIGAZIONE DINAMICA E MANTENIBILE

PHP

•• In questo articolo vedremo com’é possibilie realizzare una navigazione che sia in grado di evidenziare la pagina corrente nelle voci del menù come in [Figura 1]. Come puoi vedere, lo stile della voce del menù applicato alla pagina visualizzata é diverso dalle altre voci. Per ottenere questo risultato in un modo elegante e soprattutto mantenibile dovremo costruire la navigazione “dinamicamente”, ovvero attraverso la programmazione

Autore: Maurizio Tarchini

e nella fattispesce con PHP. Anche se i passaggi sono spiegati in modo approfondito, sono comunque necessarie delle conoscenze medie di questo lin guaggio per poter

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata Jquery.

seguire e comprendere appieno l’argomento trattato dall’articolo.

PREPARIAMO LE PAGINE (X)HTML

Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che

Iniziamo a preparare le pagine. Nulla di complesso, un elemento per la navigazione

l'amante. La sua vera specialità è la

a sinistra ed uno per i contenuti a destra.

realizzazione di gestionali complessi

Iniziamo con la pagina index.php:

anche se non rifiuta mai un sito web.

<!DOCTYPE HTML PUBLIC

http://www.mtxweb.ch/php_learn/

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> <html>

58 ·· your inspiration magazine

</head>

Come sviluppare una navigazione dinamica e mantenibile rendere la nostra navigazione dinamica aggiungendo un effetto active al menù

<body>

Come detto nulla di speciale.

Ora puoi salvare questa pagina anche come profile.php, contact.

</div>

php, newsletter.php, avendo cura di modificare il titolo contenuto nei tag h1.

<div id="content"> <h1>Pagina home</h1> </div> </body> </html>

figura 1 ·· Esempio di Navigazione dinamica

·· 59

TUTORIAL - PHP

COME SVILUPPARE UNA NAVIGAZIONE DINAMICA E MANTENIBILE

IL FOGLIO DI STILE

rendere molto felici in futuro. Crea dunque il file navigation.txt nel quale scrivere le voci

Passiamo ora al foglio di stile (da me nominato style.css) che come

del menù ed il relativo link separati dal segno “:”.

puoi vedere l’ho già collegato al documento nell’head delle pagine home:index.php

appena realizzate.

profilo:profile.php body{ font-family: Verdana, Geneva,

contatti:contact.php Arial,

newsletter:newsletter.php

Helvetica, sans-serif; font-size: 14px; }

SVILUPPARE LA FUNZIONE “NAVIGATION()”

#navigation{

Crea ora il file funtions.php. Ho scelto questo nome in quanto

a:link,a:visited{

potremmo utilizzarlo non solo per generare la navigazione,

text-decoration: none; }

li{ list-style-type: none; margin-bottom: 5px; }

ma anche per portarci appresso una serie di altre funzioni d a utilizzare nelle nostre pagine. Iniziamo a sviluppare la funzione. Quello che dovremo fare é:  Stabilire in che pagina ci troviamo (index.php, contact.php,…);

 Leggere il contenuto del file navigation.txt ed elaborarlo in modo da disporre delle voci e dei relativi link;

 Verificare se il link corrisponde al nome della pagina

visualizzata, nel qual caso dovremo aggiungere la classe active; li.active{ color:gray; list-style-type: disc; }

Ma prima di tutto é necessario che vi spieghi cos’é un array in quanto ci sarà molto utile. L’array é un tipo di variabile che contiene una collezione di valori associati ad una chiave. Detto così può sembrare molto complesso, dunque farò subito un esempio pratico.

Anche il foglio di stile é piuttosto semplice. Negli elementi della lista eliminiamo il marcatore per poi mostrarlo invece

Dichiariamo l’array $colori

negli elementi con classe active. Questa classe é quella che attribuiremo alla voce di menù relativa alla pagina

$colori =

array("rosso","verde","giallo");

visualizzata.

RENDERE LA NAVIGAZIONE MANTENIBILE Visto che, come detto precedentemente, la navigazione verrà

Ora, la variabile $colori[0] restituirà rosso (il primo elemento di un array ha chiave 0), mentre

creata tramite script PHP, é importante tenere fuori dal codice elementi che potrebbero necessitare di aggiunte

$colori[2]

o modifiche. Questo piccolo sforzo sull’altare della 1mantenibilità ci potrebbe

60 ·· your inspiration magazine

restituirà giallo (come dire che la chiave “2 ha valore “giallo”).

1 http://bit.ly/8XUrI1

LINK: http://ow.ly/2d4oE

Un array può essere anche di tipo associativo: $persona

= array("nome" => "Maurizio",

"cognome" => "Tarchini");

A questo punto quello che dobbiamo fare é:  Per ogni valore dell’array $rows “spezzare” la stringa

sul segno “:” in modo da ottenere il nome da visualizzare nel menù e il link al quale dovrà puntare;

In questo caso la chiave non é più numerica ma inserita esplicitamente, dunque:

 Verificare se il nome della pagina corrisponde alla pagina

visualizzata (se sì aggiungere la classe active, se no stampare il link);

$persona['nome'] Per fare questo utilizzeremo un ciclo foreach, si tratta di un ciclo restituirà il nome Maurizio.

appositamente studiato per “sfogliare” gli array.

Mi fermo qui. In realtà un array può raggiungere un livello

echo

di complessità enorme; posso ad esempio inserire come valore

foreach($rows as $row)

di un array un altro array. Si parlerà in questo caso di array

{

multidimensionali. Potremmo inoltre dire che ci sono altri modi di valorizzare e manipolare gli array, ma ora non ci interessa.

'<ul>';

}

Iniziamo ora a dichiarare la funzione Navigation() ed a procurarci

Prima di iniziare questo ciclo stampo il tag di apertura della lista.

il nome della pagina attiva.

In sintesi la sintassi di foreach significa questo: “Esegui il codice contenuto nelle parentesi graffe (che non

<?php

abbiamo ancora scritto) tante volte quanti sono i valori dell’array

function

Navigation()

$rows. Ad ogni ciclo fai assumere alla variabile $row uno dei valori dell’array $rows.”

{ $activePage = basename($_SERVER['PHP_SELF']);

Dunque al primo passaggio $row sarà uguale a $rows[0], al secondo passaggio $row sarà uguale a $rows[1], e così via.

$_SERVER é una array associativo creato automaticamente, sempre e ovunque disponibile (tecnicamente si dice un array

Adesso dovremo “spezzare” sul “:” la stringa (nome:link).

superglobale) che contiene diverse indicazioni riguardanti

Utilizzeremo la funzione explode() che serve proprio a questo.

il server. La chiave PHP_SELF restituisce il percorso/nomeFile

Infatti explode() prende due argomenti: il separatore (nel nostro

della pagina visualizzata.

caso il “:“) e la stringa. Restituisce un array i cui valori sono

Tramite la funzione basename() “depuriamo” il risultato

le parti di stringa spezzati.

dal percorso ottenedo così quello che vogliamo:

Ad esempio al primo passaggio la situazione sarà questa:

il nome della pagina visualizzata che inseriremo nella variabile $activePage. Dovremo ora leggere ed elaborare il contenuto del

$result

= explode(":" , "home:index.php");

file navigation.txt. La via migliore é utilizzare la funzione file(). Quindi $result[0] conterrà home e $result[1] conterrà index.php $rows

= file('navigation.txt'); Dunque il nostro ciclo sarà così:

Questa funzione legge il contenuto del file che passiamo come argomento e restituisce un array basato sulle righe di questo

$nav = explode(":", $row);

documento (ogni riga un valore).

$page

= trim($nav[0]);

$link = trim($nav[1]); Ad esempio $rows[0] conterrà home:index.php

if($link == $activePage)

·· 61

TUTORIAL - PHP

COME SVILUPPARE UNA NAVIGAZIONE DINAMICA E MANTENIBILE

{

echo '<li>'

. $page

. '</li>';

echo '<li><a href="' . $link .

}

. $page

else

}

{

}

echo '<li><a href="' . $link . '">'

echo '</ul>';

}

echo '</ul>';

'">'

. '</a></li>';

Ora non resta che includere il file functions.php in tutte le pagine ed invocare la funzione Navigation(), in questo modo:

Valorizzo $page con il primo valore della riga e $link con il secondo. Applico la funzione trim() per eliminare eventuali spazi

<div

vuoti prima e dopo.

<?php

E finalmente andiamo a verificare se si tratta della pagina

include 'functions.php';

attualmente visualizzata tramite la struttura di controllo if/else. Se lo é stamperò il tag <li> con classe active, altrimenti lo stamperò “liscio” ma avendo cura di dichiarare il link. Una volta terminato il ciclo (quindi una volta stampata tutta la navigazione), chiuderemo il tag ul.

id="navigation">

Navigation(); ?> </div>

CONCLUSIONE

Ed ecco la funzione completa: In questo articolo abbiamo visto una semplice possibilità <?php function

per rendere la nostra navigazione dinamica aggiungendo Navigation()

un effetto active al menù. Abbiamo inoltre implementato un metodo basilare per separare i valori della navigazione

{ $activePage

= basename($_SERVER

['PHP_SELF']);

dal codice che la produce aumentando la 2mantenibilità. Infatti, se hai necessità di aggiungere una voce al menù, non dovrai fare altro che aprire il file navigation.txt

$rows = file('navigation.txt');

ed aggiungere la voce nella posizione desiderata.

echo '<ul>';

Aggiungere, rimuovere, spostare saranno operazioni molto

foreach($rows as $row)

semplici e veloci. Unico aspetto al quale prestare un minimo di attenzione: dopo l’ultima riga del file navigation.php

{ $nav = explode(":", $row); $page = trim($nav[0]);

non dovranno esserci delle interruzioni di riga in quanto potrebbero essere interpretati come una voce di navigazione vuota. ••

$link = trim($nav[1]); if($link == $activePage) { echo '<li . $page

class="active">' . '</li>';

} else

62 ·· your inspiration magazine

2 http://bit.ly/8XUrI1

your inspiration web

Entra nella community di Your Inspiration Web http://forum.yourinspirationweb.com

il nostro forum aspetta solo te. Forum di discussione su PHP, XHTML, CSS, JAVASCRIPT, CMS, GRAFICA e non solo Suggerimenti, ispirazione e migliorie per i tuoi progetti Feedback dalla community suoi tuoi lavori Aneddoti, curiosita’, di tutto un po’

TUTORIAL ·· WORDPRESS COME REALIZZARE L’HEADER DEL TEMA? [ PARTE 2 ]

Wordpress

•• L’argomento di questa settimana, riguardante la realizzazione di un Tema per WordPress, è molto interessante e ci permetterà di visualizzare le pagine del nostro blog/sito che desideriamo mostrare in un qualsiasi punto del nostro template e di completare così il processo di personalizzazione dell’header del tema che avevamo iniziato già la scorsa settimana.

Autore: Nando Pappalardo

In questa esercitazione creeremo delle pagine per il blog e faremo in modo che queste siano visualizzate nel punto desiderato, immediatamente sotto l’intestazione del blog

Nando è amministratore di Edi Group,

che abbiamo realizzato nella lezione della scorsa settimana. Ovviamente nulla vieta

società di comunicazione e formazione

di posizionare l’elenco delle pagine in qualsiasi altro punto del template.

fondata nel 2005. È inoltre Trainer Microsoft e docente di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi

Sei pronto per cominciare questa nuova lezione?

1. ·· CREIAMO LE PAGINE DEL NOSTRO BLOG.

di formazione professionale regionali

WordPress fornisce la possibilità di creare, oltre ai classici articoli che costituiscono

e privati.

le fondamenta di un blog, anche delle pagine come in un normalissimo sito Web.

www.yourispirationweb.com

Così facendo possiamo per esempio creare delle pagine in cui descrivere chi siamo, i nostri servizi offerti, le ultime news che ci riguardano, il nostro portfolio clienti in cui mostrare gli ultimi lavori, una pagina contatti, ecc. insomma un po’ le classiche pagine che siamo soliti trovare su un sito che fa da vetrina all’attività/prodotto da promuovere. Andiamo dunque a creare queste pagine nel blog che abbiamo installato come

difficoltà: media tempo: 30 min.

64 ·· your inspiration magazine

esercitazione per questo corso.

Come realizzare l’Header del tema

[parte 2]

Dal Pannello di Amministrazione clicchiamo sul menù Pagine > Aggiungi nuova e nell’ordine aggiungiamo al nostro

[1.1] ·· Come impostare una pagina di WordPress come Home Page del sito?

blog le pagine About, Portfolio, News e Contact avendo cura di inserire su ognuna di esse un contenuto d’esempio, il classico

La cosa si fa ancora più interessante se consideriamo che

“Lorem ipsum…” utilizzato per riempire le bozze può andare

WordPress dà anche la possibilità – sempre dal Pannello

più che bene [Figura 1]

di Amministrazione – di scegliere quale contenuto desideriamo visualizzare come home page del nostro sito. A questo punto, se lo volessimo, potremmo scegliere di rendere una delle nostre pagine statiche, per esempio la pagina “About”, la home page del nostro sito [Figura 3].

figura 1 ·· Creazione di una pagina su WordPress

Cancelliamo la pagina Info – creata in modo automatico da WordPress durante il processo d’installazione – e a questo punto l’elenco delle pagine dovrebbe apparire così come mostrato in [Figura 2] figura 3

In questo modo se abbiamo installato WordPress sotto la Root principale del sito, ogni qual volta si accederà al sito in questione, questo visualizzerà il contenuto della pagina About come Home Page del sito. Quest’ultimo paragrafo riguardante l’impostazione di una pagina iniziale per WordPress è stato affrontato solo a scopo didattico, invece per esercitarci nella realizzazione del nostro template lasciamo inalterata la visualizzazione della pagina iniziale del sito tenendo l’impostazione predefinita fornita da WordPress figura 2 ·· Elenco delle pagine presenti su WordPress

in fase d’installazione: “Gli ultimi articoli”.

·· 65

TUTORIAL - WORDPRESS

COME REALIZZARE L'HEADER DEL TEMA [PARTE 2 ]

Compreso questo, possiamo rimettere finalmente le mani sulla

<?php bloginfo(‘name’); ?>

realizzazione del nostro template riprendendo esattamente

</a>

dal punto in cui eravamo rimasti la scorsa settimana.

</h1>

2. ·· COME VISUALIZZARE LE PAGINE DEL NOSTRO BLOG ALL’INTERNO DEL TEMPLATE?

Per visualizzare le pagine all’interno del nostro template, WordPress mette a disposizione due funzioni, la prima – quella più datata – disponibile sin dalla versione 1.5 è denominata: wp_list_pages(); la seconda invece, wp_page_menu(), è molto più recente ed è stata introdotta con la versione 2.7.

<ul class=”nav”> <?php wp_list_pages(); ?> </ul>

[2.1] ·· La Funzione wp_list_pages() Questa funzione (wp_list_pages) permette di visualizzare le pagine con un alto livello di personalizzazione, tutto questo è possibile passando 1alcuni parametri che la funzione mette

</div> </body>

a disposizione. A questo punto se andiamo a visualizzare il contenuto della Home Vediamo subito un esempio pratico applicato al nostro template.

del nostro blog dovremmo vedere le pagine che abbiamo creato in precedenza disposte all’interno di un elenco puntato, così come

Apriamo il file index.php del template e aggiungiamo le seguenti

mostrato in [Figura 4].

righe di codice nel punto esatto in cui vogliamo mostrare il menù  <ul class=”nav”> <?php wp_list_pages(); ?> </ul>  di navigazione contenente l’elenco delle pagine del nostro sito/blog: In questo caso abbiamo posizionato il menù subito dopo

figura 4 ·· Pagine mostrate nell’header del blog

il paragrafo contenente la descrizione del nostro blog, come puoi vedere dal markup riportato sotto: <body> <div class=”container”>

Se guardi attentamente, ti accorgerai che l’elenco delle pagine ha un titolo che per impostazione predefinita è Pagine, questo titolo può essere modificato o eliminato passando uno dei parametri messi a disposizione dalla funzione wp_list_page, nello specifico dal parametro “title_li”.

<h1>

<a href=”<?php echo get_option (‘home’); ?>/” title=”Ritorna

alla Home Page”>

66 ·· your inspiration magazine

[2.1.1] ·· Modificare il titolo dell’intestazione dell’elenco delle Pagine Il parametro “title_li”, se non specificato, per impostazione predefinita mostra la stringa “Pagine”, per modificarla basta

1 http://bit.ly/FdpqK

LINK: http://ow.ly/2d4pd

semplicemente passare una stringa diversa come valore

Possiamo personalizzare ulteriormente il menù di navigazione

del parametro. Vediamo subito un esempio:

utilizzando gli altri parametri messi a disposizione dalla funzione wp_list_pages().

<?php wp_list_pages(‘title_li= le mie pagine’); ?>

[2.1.3] ·· Escludere una pagina dall’elenco delle pagine da mostrare

Il risultato dovrebbe essere quello mostrato in [Figura 5]. Abbiamo

Nel caso fosse necessario non visualizzare alcune pagine

passato la stringa le mie pagine come valore del parametro title_li.

nel nostro menù di navigazione, è possibile farlo escludendo le pagine interessate mediante l’utilizzo del parametro exclude. Esempio: nel nostro template non vogliamo visualizzare la pagina News nel menù di navigazione. Basta recuperare l’id assegnato da WordPress alla pagina che vogliamo escludere e passare questo valore attraverso il parametro exclude della funzione wp_list_pages().

figura 4 ·· Personalizzazione del titolo assegnato alle pagine del blog

Nel file index.php del nostro template, modifichiamo la nostra funzione wp_list_pages come mostrato di seguito:

[2.1.2] ·· Eliminare il titolo dell’intestazione dell’elenco delle Pagine

Volendo possiamo eliminare del tutto il titolo dall’intestazione

dell’elenco delle pagine.

<?php wp_list_pages(‘title_li= &exclude=8’); ?>

Come?

</ul>

Semplicemente passando un valore vuoto al parametro title_li.

<!-- END

NAVIGATION -->

Vediamo subito un esempio: Il risultato dovrebbe essere quello mostrato in Figura 7. <?php wp_list_pages(‘title_li=’); ?>

La pagina News – come puoi vedere – adesso non è più presento nell’elenco in quanto è stata esclusa esplicitamente.

Se ora visualizziamo la pagina del nostro blog noterai che il titolo

Se lo si desidera è possibile escludere più pagine

che prima era impostato all’elenco delle pagine è magicamente

contemporaneamente, basta passare i valori (id delle pagine

sparito [Figura 6].

da escludere) separati tramite virgola.

figura 6 ·· Eliminazione del titolo dall’elenco delle pagine del blog

figura 4 ·· Esclusione della pagina News dal menù di navigazione

·· 67

TUTORIAL - WORDPRESS

COME REALIZZARE L'HEADER DEL TEMA [PARTE 2 ]

più pulito e mantenibile. Andiamo a vedere la nuova funzione Puoi approfondire ulteriormente gli altri parametri messi

in azione sul nostro template.

a disposizione dalla funzione wp_list_pages, a tal proposito ti consiglio di consultare la 2documentazione ufficiale

Apriamo il file index.php, eliminiamo le righe di codice

che è ben realizzata e ricca di esempi.

che avevamo inserito in precedenza per caricare il menù di navigazione e cerchiamo di ottenere lo stesso risultato

[2.2] ·· La Funzione wp_page_menu

utilizzando la nuova funzione:

Abbiamo detto che dalla versione 2.7, WordPress ha reso disponibile una nuova funzione (wp_page_menu) per visualizzare l’elenco delle pagine da mostrare. Perché è stata implementata questa nuova funzione? E da cosa differisce dalla precedente?

<?php wp_page_menu(); ?>  La funzione wp_page_menu() genererà automaticamente il seguente markup html:

La funzione che abbiamo analizzato nel paragrafo precedente (wp_list_pages) ha due limiti.

Il primo limite è che la funzione wp_list_pages() non è

in grado di generare l’intero codice necessario a visualizzare

</ul>

il menù, infatti, se ben ricordi, siamo stati noi ad aggiungere

</div>

manualmente il markup nel nostro template necessario a visualizzare la lista non ordinata.

Verifica analizzando il codice sorgente della home page del tuo blog.

[2.2.1] ·· Cambiare La Classe Di Default Associata Al Menù

<?php wp_list_pages(); ?>

Attraverso uno dei parametri messi a disposizione dalla nuova

</ul>

funzione è possibile cambiare il nome della classe che è associata

di default al menù. Il parametro in questione è: menu_class. Esempio: assegniamo la classe denominata “nav” al nostro menù

Questo è stato necessario poiché la funzione si occupa di restituire semplicemente tutte le pagine create sul nostro

blog/sito all’interno di elementi <li>…</li>.

<?php wp_page_menu(‘menu_class=nav’); ?>

Il secondo limite della funzione wp_list_page() è dato dal fatto page, almeno che non si intervenga sempre sul codice

[2.2.2.] ·· Visualizzare anche il collegamento alla Home Page del sito/blog

e si aggiunga manualmente un elemento <li>…</li> nel punto

E se volessimo visualizzare anche la home page del nostro sito

che si desidera collegare alla home page del blog.

all’interno del nostro menù di navigazione?

La nuova funzione wp_page_menu() sopperisce ad entrambi

Basterà semplicemente passare il parametro appropriato

i limiti. Essa è infatti in grado di generare automaticamente

(show_home) con valore uguale a uno (o true) alla funzione

l’intero codice necessario alla visualizzazione del menù

wp_page_menu():

che non è in grado di visualizzare il collegamento alla home

di navigazione e nello stesso tempo rende possibile stabilire se visualizzare o meno un collegamento alla home page.

Utilizzeremo dunque questa nuova funzione per il nostro template

<?php wp_page_menu(‘menu_class=

piuttosto che la precedente, poiché il nostro codice così sarà molto

nav&show_home=1’); ?>

68 ·· your inspiration magazine

2 http://bit.ly/72dA

LINK: http://ow.ly/2d4pd

<!-- END

NAVIGATION -->

In questo modo dovremmo visualizzare sullo schermo un menù

Il risultato lo puoi vedere chiaramente nella Figura 8, adesso

di navigazione con le varie voci che lo compongono disposte

nella navigazione del sito è presente anche la voce “Home”.

orizzontalmente [Figura 9].

figura 8 ·· Utilizzo della funzione wp_page_menu() per includere la Home nel menù di navigazione

figura 9 ·· Personalizzazione della presentazione del menù di navigazione del nostro blog

Puoi approfondire ulteriormente l’utilizzo dalla funzione

Ovviamente ci stiamo limitando a personalizzazioni estetiche

wp_page_menu() e i relativi parametri messi a disposizione,

minime, giusto per rendere l’idea di come procedere. Nei progetti

consultando la 3documentazione ufficiale.

“veri” saremo liberi di dare completo sfogo alla nostra fantasia e rendere l’aspetto estetico molto più accattivante.

Adesso sistemiamo il modo in cui questo elenco di pagine è visualizzato sullo schermo e rendiamolo esteticamente

A questo punto direi che potremmo togliere anche quel fastidioso

un po’ più carino.

bordo rosso che avevamo assegnato al nostro contenitore alcune

3 ·· PERSONALIZZIAMO LA PRESENTAZIONE DEL NOSTRO MENÙ DI NAVIGAZIONE

lezioni fa, quando ancora non avevamo nessun contenuto da mostrare.

4 ·· CONCLUSIONE

Mettiamo le mani sul nostro foglio di stile e impostiamo alcune

Ecco come si mostra il nostro template al termine delle prime

regole che avranno effetto sul nostro menù di navigazione appena

quattro lezioni (Figura 10).

creato: /*navigation*/ .nav ul {list-style-type:none; margin:0; padding:0;} .nav ul li {margin:0; padding:10px; display:block; float:left;} Non abbiamo fatto nulla di eccezionale, ci siamo semplicemente limitati a:

 eliminare il marcatore predefinito della lista (list-style-type);

figura 10 ·· Come si presenta il nostro tema dopo le prime personalizzazioni

 azzerare margini e padding della lista non ordinata;

Siamo partiti completamente da zero, abbiamo realizzato

10px di padding per ciascuno dei quattro lati (superiore, destro,

che al momento è composto dal titolo, dalla descrizione

inferiore, sinistro);

e dal menù di navigazione comprendente tutte le pagine

 azzerare i margini e impostare, per ogni elemento della lista,  rendere la visualizzazione degli elementi della lista di tipo

il markup necessario a visualizzare l’header del nostro tema

che abbiamo creato in precedenza. ••

blocco e allineare questi ultimi a sinistra.

3 http://bit.ly/J2lN

·· 69

TUTORIAL ·· WORDPRESS WORDPRESS: DIAMO UNO SGUARDO AL LOOP

Wordpress

•• Nei precedenti articoli di questa guida siamo riusciti – partendo completamente da zero – a sviluppare la parte superiore (l’header) Che cos’è questo loop e a cosa serve? Questa sicuramente è una delle tante domande che affiorano nella mente di chi si trova per la prima volta a dissezionare un tema di WordPress nel tentativo di personalizzarlo a proprio piacimento. Vediamo dunque di rispondere a questo interrogativo e di rendere

Autore: Nando Pappalardo

tutto più chiaro.

Nando è amministratore di Edi Group,

1 ·· CHE COSA È IL LOOP E COME SI UTILIZZA?

società di comunicazione e formazione fondata nel 2005.

Loop letteralmente significa “esecuzione ripetuta” di “qualcosa”;

È inoltre Trainer Microsoft e docente

nel nostro caso si tratta dell’esecuzione ripetuta “n” volte di un set di istruzioni

di Webdesign con anni di esperienza,

necessarie alla visualizzazione di un articolo. Ripetendo queste istruzioni “n” volte

anche in qualità di progettista, in corsi

saranno visualizzati “n” articoli nel punto in cui è richiamato il loop.

di formazione professionale regionali

Tornando al tema che stiamo realizzando, supponiamo di volerlo dividere in due colonne

e privati.

subito sotto l’header. Nella colonna sinistra visualizzeremo l’elenco degli ultimi articoli

www.yourispirationweb.com

pubblicati mentre nella colonna destra mostreremo una sidebar su cui andremo a inserire (in una delle prossime lezioni) alcune informazioni utili che vogliamo rendere visibili su tutte le pagine del sito/blog. Insomma stiamo definendo il classico layout di un blog. Ti ricordo che nulla ci vieta di definire in maniera completamente diversa le sezioni: il modo in cui questi contenuti saranno presentati sullo schermo andrà poi definito

difficoltà: alta tempo: 45 min.

70 ·· your inspiration magazine

nel nostro foglio di stile.

WordPress: diamo uno sguardo al Loop esecuzione ripetuta “n” volte di un set di istruzioni necessarie alla visualizzazione di un articolo

Realizziamo dunque il markup HTML necessario per visualizzare

float:left;border:1px solid red;}

la colonna sinistra che dovrà contenere i nostri articoli: Piccola premessa prima di analizzare più nel dettaglio il markup

che abbiamo realizzato. Come puoi notare, per processare il loop

<?php if (have_posts()) : ?>

è stato utilizzato qualche costrutto tipico del linguaggio PHP, ecco perché per una buona comprensione è consigliabile avere

<?php

while (have_posts()) : the_post();

un minimo di nozioni per lo meno sul significato dei costrutti principali di questo linguaggio.

[1.1] ·· L’avvio del loop

Ora passiamo ad analizzare più nel dettaglio il markup

...contenuto post... </div>

che abbiamo scritto:  Come prima cosa si definisce la sezione che delimita la colonna sinistra (content).

 In seguito eseguiamo quello che nel linguaggio

di programmazione è definito un controllo condizionale, mediante il costrutto “if” del linguaggio PHP verifichiamo la funzione have_posts() di WordPress per controllare

<?php

endwhile; ?>

<?php endif; ?>

se esistono post; infatti la funzione restituirà il valore “true” (cioè vero) nel caso in cui siano presenti post.

 Se ci sono post è avviato un ciclo while (il famoso loop di cui si parla) il quale continua a essere eseguito finché la funzione have_posts() continua a restituire un valore true, cioè fino a quando ci sono post da mostrare.

 Quando la funzione have_posts() restituisce un valore false -

</div>

cioè nel momento in cui non ci sono più post da mostrare – il ciclo viene interrotto.

Questa invece la regola da definire nel nostro foglio di stile per visualizzare la sezione content a sinistra del nostro layout con

[1.2] ·· Generazione degli articoli

una dimensione di 650 pixel (nota: per renderla ancora più visibile provvisoriamente ho aggiunto il solito bordo rosso di un pixel).

La funzione the_post() prende l’elemento (l’articolo/post) corrente del ciclo e lo rende disponibile per l’uso all’interno di questa

#content

{width:650px; margin:30px 0;

iterazione. Senza questa funzione molti dei tag utilizzati per

·· 71

TUTORIAL - WORDPRESS DIAMO UNO SGUARDO AL LOOP

stampare le informazioni riguardanti i post non funzionerebbero. Una volta che le informazioni relative ai post sono rese disponibili, il template può iniziare a mostrare i dati sulla pagina per renderli visibili agli utenti. Per il momento, avendo inserito solo la stringa “contenuto post” e non avendo utilizzato ancora nessun tag per la visualizzazione delle informazioni relative ai post, la nostra pagina si presenterà come mostrato in [Figura 1].

figura 2 ·· Function Reference/the title figura 1 ·· Generazione degli articoli all'interno del loop.

[1.3] ·· Mostrare il titolo, la data e l’autore Adesso proviamo a sostituire la scritta statica che abbiamo inserito all’interno del loop (…contenuto post…) con alcuni tag che ci restituiranno le informazioni inerenti i post che vogliamo mostrare. Per visualizzare il titolo del post basta utilizzare la funzione the_title() [Figura 2] come mostrato sotto:

<h2><?php the_title(); ?></h2> Se adesso andiamo a vedere la pagina del nostro blog dovremmo vedere il titolo del post così come mostrato in [Figura 3]. figura 4 ·· Function Reference/the permalink

<h2> <a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a> figura 3 ·· Mostrare il titolo del post all'interno del loop.

</h2> Adesso il titolo del nostro post è diventato un collegamento

Se desideriamo rendere il titolo del post linkabile in modo

ipertestuale che punta al contenuto dell’articolo.

da collegarlo al contenuto dell’articolo, possiamo utilizzare la funzione 2the_permalink() [Figura 4]:

Che ne dici, mostriamo anche la data di pubblicazione e il nome dell’autore dell’articolo?

72 ·· your inspiration magazine

1 http://bit.ly/4hjBnT

2 http://bit.ly/g9gpe

LINK: http://ow.ly/2d4pU

Subito sotto il titolo, aggiungiamo queste due righe richiamando le funzioni messe a disposizione da WordPress 3the_time() [Figura 5] e 4the_author() [Figura 6] per mostrare rispettivamente data di pubblicazione e autore dell’articolo: <h2> <a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a> </h2>

figura 5 ·· Function Reference/the time

Definiamo la classe data nel nostro foglio di stile per formattare la presentazione di questi contenuti: p.data

{font-style:italic;font-size:85%;}

A questo punto la nostra pagina dovrebbe mostrarsi così come visualizzato in [Figura 7].

figura 6 ·· Function Reference/the author

figura 7 ·· Visualizzare la data e l'autore di un articolo all'interno del loop

[1.4] ·· Mostrare il contenuto dell’articolo La funzione 5the_content() serve a mostrare il contenuto

figura 8 ·· Function Reference/the content

dell’articolo. C’è una cosa però a cui è necessario prestare attenzione: la funzione in questione visualizza nel documento il contenuto dell’articolo fino al tag <!–more–>, nel caso in cui questo fosse stato usato durante la scrittura dell’articolo. Per quanti non lo sapessero, il tag <!–more–> permette di definire una porzione di articolo da visualizzare come eventuale incipit/introduzione dello stesso [Figura 4]. Così facendo la parte dell’articolo inserita subito dopo questo tag verrà mostrata successivamente, quando – e se – l’utente deciderà di leggerne l’intero contenuto cliccato sul relativo collegamento ipertestuale. figura 9 ·· Utilizzo del tag more 3 http://bit.ly/14RnOL

4 http://bit.ly/9TiIw1

5 http://bit.ly/qM6e0

·· 73

TUTORIAL - WORDPRESS DIAMO UNO SGUARDO AL LOOP

Aggiungendo sul nostro template la funzione the_content() subito dopo la data e l’autore, nella nostra home page visualizzeremo il contenuto dell’articolo fino al tag more, con un testo (passato come parametro alla funzione) che invita a proseguire alla lettura e che collega in modo automatico all’articolo. <div class="entry"> <?php

the_content(__('|| continua

a leggere &raquo;')); ?> </div> Andiamo a vedere il contenuto della nostra home page che comincia a prendere forma [Figura 10].

figura 11 ·· Function Reference/the category

figura 10 ·· Visualizzare il contenuto dell'articolo all'interno del loop

[1.5] ·· Mostrare altri dettagli aggiuntivi Vogliamo aggiungere qualche altro dettaglio riguardante i nostri articoli? Magari subito dopo l’incipit ci farebbe comodo visualizzare le categorie cui l’articolo è stato assegnato o il numero figura 12 ·· Function Reference/comments popup link

di commenti ricevuti. Mediante l’utilizzo delle funzioni the_category() [Figura 11] e 7comments_popup_link()

[Figura 12] possiamo soddisfare le nostre esigenze: <p class="postmetadata">

'% Commenti &raquo;'); ?> </p>

Pubblicato in <?php the_category(', ') ?> Alla funzione the_category() abbiamo passato come parametro

</p>

una virgola (,); nel caso in cui all’articolo fossero state assegnate <p class="right"> <?php

più categorie questo sarà il carattere separatore utilizzato per dividere sullo schermo le varie categorie l’una dall’altra.

comments_popup_link('Nessun commento

&raquo;', '1 Commento &raquo;',

Alla funzione comments_popup_link() sono stati passati tre parametri:

74 ·· your inspiration magazine

6 http://bit.ly/qXak

7 http://bit.ly/hE4sM

LINK: http://ow.ly/2d4pU

 il primo rappresenta il testo da visualizzare nel caso in cui l’articolo non avesse nessun commento;

 il secondo rappresenta il testo da visualizzare nel caso in cui l’articolo avesse un unico commento;

 il terzo ed ultimo parametro rappresenta il testo da mostrare nel caso in cui l’articolo avesse più di un commento.

Nella [Figura 13] puoi vedere un’anteprima di come si presenta adesso la nostra home page.

figura 14 ·· Function Reference/the title

<div class="navigation"> <div class="alignleft"><?php next_posts_link figura 13 ·· Visualizzare le categorie e i commenti dell'articolo all'interno del loop

(__('&laquo; Precedenti')) ?></div> <div class="alignright"><?php previous_

Per quanto riguarda la visualizzazione degli articoli possiamo dire che ci siamo. Adesso diamo gli ultimi ritocchi alla pagina prima di terminare con la lezione odierna.

link(__('Successivi &raquo;')) ?></div> </div>

2 ·· AGGIUNGERE LA PAGINAZIONE ALLA FINE DEL LOOP

3 ·· AGGIUNGERE UN TESTO DA VISUALIZZARE NEL CASO NON CI SIANO ARTICOLI

Per impostazione predefinita WordPress visualizza gli ultimi dieci

Dobbiamo prevedere anche il caso in cui, nel nostro blog, non sia

articoli sulla home page del blog, questa impostazione può

presente nessun articolo. All’inizio di questa lezione abbiamo detto

comunque essere facilmente modificata dal pannello

che prima dell’avvio del loop verifichiamo se sono presenti

di amministrazione (Impostazioni -> Lettura) indicando

degli articoli mediante la funzione have_posts():

il numero di articoli che desideriamo visualizzare. Nel caso in cui nell’home page del blog sono presenti più articoli

<?php if

(have_posts()) : ?>

di quelli indicati, questi vengono suddivisi in più pagine in modo automatico direttamente da WordPress.

In caso affermativo si procede all’avvio del loop e alla visualizzazione degli articoli, ma nel caso la verifica restituisse

A questo punto è indispensabile visualizzare una paginazione

un valore negativo?

alla fine del loop che ci fornisca la possibilità di navigare da una pagina all’altra qualora questo fosse necessario.

Per ovviare a questa particolare condizione, aggiungiamo prima

A tal proposito WordPress mette a disposizione delle funzioni

della chiusura del costrutto if (endif), un messaggio alternativo

di 8navigazione per le paginazioni dei post [Figura 14].

da mostrare nel caso in cui la condizione iniziale non fosse vera:

Aggiungiamo queste righe di codice subito dopo la fine del loop:

8 http://bit.ly/8q5m6J

<?php

else: ?>

·· 75

TUTORIAL - WORDPRESS DIAMO UNO SGUARDO AL LOOP

figura 15 ·· Aggiunta di un nuovo articolo.

figura 16 ·· Home page del tema che abbiamo realizzato.

<h2><?php _e('Non trovato'); ?></h2> <p class="center"><?php _e('Siamo spiacenti, quello che stavi cercando non è su questa pagina'); ?></p> <?php

endif; ?>

4 ·· CONCLUSIONE Fino a questo momento sul nostro blog abbiamo un unico articolo

Se sei riuscito a comprenderne il meccanismo senza grandi

creato da WordPress in modo automatico in fase d’installazione.

difficoltà WordPress non avrà più segreti per te, potrà essere

Prima di concludere proviamo ad aggiungere un nuovo articolo

sezionato e ricostruito in qualsiasi momento secondo le tue

[Figura 15] di prova per vedere come questo sarà visualizzato

effettive esigenze.

sul template che abbiamo finora realizzato [Figura 16]. Il mio consiglio comunque è sempre quello di consultare l’ottima Ho tolto il bordo rosso che avevo utilizzato inizialmente

documentazione sul sito ufficiale per approfondire tutte le funzioni

esclusivamente per fini didattici e adesso il nostro template,

affrontate in questa lezione in modo da comprenderne appieno

come puoi vedere, inizia a prendere forma.

le potenzialità e sfruttarle dunque nel modo più idoneo alle nostre esigenze. Nella prossima lezione andremo a definire la sidebar

Per aiutarti ulteriormente nella comprensione di queste lezioni

del nostro blog, la colonna laterale che generalmente si ripete

ti metto a disposizione i file del tema che abbiamo finora

su tutte le pagine del sito. Sei pronto? ••

sviluppato. In questa lezione abbiamo affrontato la parte più complessa della realizzazione di un tema per WordPress, il loop.

76 ·· your inspiration magazine

Iscriviti alla newsletter di Your Inspiration Web

e ricevi in regalo

L’eBook “Guida alla realizzazione di un sito dalla A alla Z” una panoramica completa sul mondo del webdesign

Scaricalo subito! www.yourinspirationweb.com/newsletter

TUTORIAL ·· WORDPRESS AGGIUNGIAMO LA SIDEBAR AL NOSTRO TEMA

Wordpress

•• Quello che affronteremo in questo articolo riguarda la realizzazione della sidebar, una colonna (dalle dimensioni più o meno ridotte che quasi tutti i blog hanno, generalmente sul lato destro) riservata alla segnalazione di contenuti che possono essere visualizzati su più pagine. Andiamo dunque a vedere cosa possiamo mettere sulla sidebar del tema che stiamo realizzando.

Autore: Nando Pappalardo

1 ·· CHE COSA POSSIAMO METTERE NELLA SIDEBAR?

Nando è amministratore di Edi Group, società di comunicazione e formazione

Nella sidebar possiamo visualizzare tutto quello che desideriamo: un modulo per eseguire

fondata nel 2005.

la ricerca all’interno del sito/blog, l’elenco delle pagine del sito, l’elenco delle categorie,

È inoltre Trainer Microsoft e docente

le ultime news pubblicate, dei pulsanti o banner pubblicitari e chi più ne ha più ne metta.

di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi

Precisiamo che volendo possiamo anche decidere di non inserire nulla sulla sidebar,

di formazione professionale regionali

cioè non utilizzare alcuna sidebar e concedere più spazio al contenuto principale

e privati.

della pagina. Nessuno ci obbliga ad avere una sidebar sul nostro blog/sito sviluppato con WordPress.

www.yourispirationweb.com [1.1] ·· Esempi di alcune sidebar realizzate con WordPress Prima di addentrarci nella realizzazione della sidebar del nostro tema voglio mostrarti alcuni siti che, in conformità ad alcune esigenze richieste dal cliente, ho sviluppato proprio con WordPress. Questo per mostrarti nella pratica le diverse tipologie di sidebar difficoltà: media tempo: 30 min.

78 ·· your inspiration magazine

che possiamo realizzare e che non sono le classiche cui siamo soliti trovare nei blog.

Aggiungiamo la Sidebar al nostro tema una colonna riservata alla segnalazione di contenuti che possono essere visualizzati su pi霉 pagine

1 Alcuni pulsanti inseriti nella sidebar di un sito

sviluppato su piattaforma WordPress 2 Altro esempio di pulsanti mostrati nella sidebar

di un sito sviluppato su piattaforma WordPress

3 Un esempio di news pubblicate sulla sidebar

di un sito sviluppato su piattaforma WordPress

Dopo aver visto questa carrellata di diverse tipologie di sidebar passiamo a realizzare la nostra e, dato che in questo caso stiamo sviluppando il layout di un blog, andremo a definire passo dopo passo quella che 猫 generalmente la sidebar standard di un blog.

3 路路 79

TUTORIAL - WORDPRESS

AGGIUNGIAMO LA SIDEBAR AL NOSTRO TEMA

2 ·· COME REALIZZARE LA SIDEBAR DEL NOSTRO TEMA? Tutti gli elementi che compongono la sidebar del tema sono generalmente visualizzati all’interno di una lista non ordinata

Adesso è il momento di iniziare ad aggiungere i primi elementi all’interno della nostra sidebar.

[2.1] ·· Come aggiungere un modulo di ricerca all’interno della sidebar?

(<ul>…</ul>), dove ogni oggetto presente non è altro che un elemento della lista (<li>…</li>).

Proviamo ad aggiungere come primo elemento della nostra sidebar un modulo che ci permetta di eseguire la ricerca

La prima cosa che dobbiamo fare è creare quindi una sezione

tra tutti i documenti pubblicati sul sito/blog.

da dedicare alla sidebar nel nostro layout. Scriviamo il seguente

Aggiungiamo dunque il seguente markup HTML:

markup HTML:

<li> <h2>Cerca</h2>

<div id="sidebar">

<form method="get" id="searchform" action="

<ul>

<?php bloginfo('url'); ?>/"> </ul>

<input

type="text" name="s" id="s"

</div>

value="<?php the_search_query(); ?>"

<input

type="submit" id="searchsubmit"

value="cerca" /> E nel foglio di stile andiamo ad aggiungere le seguenti regole

</form>

associate alla nostra sidebar:

</li>

#sidebar {

Basta realizzare un normalissimo modulo che sarà inviato

width:290px; margin:30px 0 30px 20px;

con metodo “get” e assegnare al campo (input) di ricerca

border:1px solid red; } #sidebar ul {list-style-type:none;}

il nome “s”, questo permetterà al motore di WordPress di ricercare la stringa immessa all’interno di tutti i contenuti pubblicati sul blog. Inoltre abbiamo passato come valore del campo di ricerca la funzione di WordPress denominata the_search_query() [Figura 4], la quale non fa altro

Come puoi vedere abbiamo:

che restituire il valore della stringa ricercata.

 definito una sezione denominate “sidebar”;  assegnato una dimensione di 290px;

 assegnato un margine superiore/inferiore di 30px,

0 pixel a destra mentre a sinistra abbiamo impostato 20px di margine in modo da distanziare la sidebar dai contenuti principali del blog;

 posizionata a sinistra (subito dopo la sezione dedicata al contenuto);

 assegnato a scopo didattico il solito bordo rosso di un pixel

per vedere fisicamente lo spazio occupato da questa sezione all’interno del nostro layout;

 eliminato infine il marcatore della lista.

80 ·· your inspiration magazine

figura 4 ·· Function Reference/the search query 1 http://bit.ly/3U7qg3

LINK: http://ow.ly/2d4qf

Così facendo – dopo una qualsiasi ricerca – la pagina sarà ricaricata mostrando i risultati e nel campo di ricerca continuerà a essere mostrata la stringa che abbiamo tentato di trovare.

figura 5 ·· Modulo di ricerca aggiunto sulla sidebar del tema che stiamo realizzando

figura 6 ·· Function Reference/wp get archives

Nella [Figura 5] puoi vedere in azione la sidebar con il modulo

di ricerca che abbiamo appena aggiunto sul nostro tema.

<li> <h2>Archivio</h2>

[2.2] ·· Visualizzare l’archivio sulla sidebar del nostro tema Sulla sidebar del tema vogliamo visualizzare l’archivio del nostro blog come secondo elemento, subito sotto il modulo di ricerca.

WordPress offre la funzione wp_get_archives( ) [Figura 6] per 2

visualizzare un archivio basato sulla data di pubblicazione degli articoli presenti sul blog.

</ul> </li>

Questa funzione può essere utilizzata in qualsiasi posto all’interno

Come puoi vedere abbiamo passato solo due parametri

del template che stiamo realizzando.

alla funzione:

Sulla base dei vari parametri che possono essere passati

 “type” con valore uguale a “monthly”: sta a indicare

alla funzione, è possibile configurare la visualizzazione dell’archivio secondo le proprie esigenze. Per esempio è possibile visualizzare gli archivi per ciascun mese, settimana, giorno, oppure scegliere il numero di archivi da far vedere, il formato in cui mostrarli, ecc. Per approfondire i vari parametri accettati dalla funzione,

di visualizzare l’archivio degli articoli suddiviso per mesi dell’anno;

 “show_post_count” con valore impostato a “1”: specifica

a WordPress che accanto al nome del mese deve essere mostrato anche il numero di articoli pubblicati per quel mese.

ti consiglio di leggere 3l’ottima documentazione. Nota anche che la funzione è stata inserita all’interno Aggiungiamo dunque queste righe di codice al nostro markup

di un ulteriore elemento <ul>…</ul> in quanto (così per come

HTML:

l’abbiamo richiamata) restituisce i risultati sotto forma di elementi <li>…</li>.

2 http://bit.ly/bbfp2

3 http://bit.ly/bbfp2

·· 81

TUTORIAL - WORDPRESS

AGGIUNGIAMO LA SIDEBAR AL NOSTRO TEMA

Nella [Figura 7] puoi vedere il risultato prodotto da questo markup applicato sul nostro tema.

figura 8 ·· Template Tags/wp list categories figura 7 ·· Figura con markup applicato

[2.3] ·· Mostriamo l’elenco delle categorie sulla sidebar Aggiungiamo adesso come terzo elemento della sidebar l’elenco delle categorie. Come già visto per le pagine del blog [Pag.64], WordPress mette a disposizione una funzione analoga anche per le categorie denominata 4wp_list_categories() [Figura 8]. La funzione mostra l’elenco delle categorie (come link) presenti sul blog. Quando si clicca sul link di una categoria, tutti gli articoli presenti in questa categoria vengono visualizzati su una pagina utilizzando – se presente – l’apposito template dedicato alla visualizzazione delle categorie, così come previsto dalle 5regole di gerarchia dei template [Figura 9]. figura 9 ·· Template Hierarchy

Questa funzione – come 6puoi vedere sulle pagine della documentazione ufficiale – accetta diversi parametri

che ne permettono una personalizzazione piuttosto avanzata.

<ul>

Vediamo di applicarla al nostro tema.

<?php

Per avere qualcosa da visualizzare nel nostro blog, creiamo alcune categorie di esempio. Io ne ho realizzate tre oltre la categoria predefinita di WordPress denominata “Senza categoria”.

wp_list_categories('title_li=

<h2>Categorie</h2>&hide_empty=0'); ?> </ul>

I nomi delle categorie che ho creato sono: Eventi, Novità

Alla funzione – come puoi vedere – abbiamo passato

e Testing. Scriviamo adesso il seguente markup nella pagina

due parametri:

del nostro template, subito sotto l’archivio aggiunto in precedenza alla sidebar.

82 ·· your inspiration magazine

 title_li che indica il titolo da visualizzare prima di mostrare

4 http://bit.ly/bbp37

5 http://bit.ly/pd1XO

6 http://bit.ly/bbp37

LINK: http://ow.ly/2d4qf

l’elenco delle categorie;

 hide_empty invece permette di mostrare (o meno) nell’elenco anche le categorie che al momento sono vuote, cioè senza nessun articolo ancora associato. Nella Figura 6 puoi vedere il risultato di questa funzione applicato al tema che stiamo sviluppando.

[2.4] ·· Aggiungere il blogroll

figura 11 ·· Function Reference/wp list bookmarksa

figura 10 ·· Categorie del blog aggiunte sulla sidebar

Abbiamo visto nella 7seconda lezione di questo corso che WordPress fornisce la possibilità di gestire un elenco di link ad altri blog/siti direttamente dal pannello di amministrazione. figura 12 ·· Blogroll aggiunto alla sidebar del nostro tema

Se lo desideriamo possiamo aggiungere questo elenco di siti sulla nostra sidebar mediante la funzione 8wp_list_bookmarks(),

A questo punto dovresti aver capito com’è semplice aggiungere

[Figura 11] anch’essa funzionante in modo molto simile a quanto

i vari elementi che t’interessano all’interno della sidebar del tuo

visto per le funzioni che restituivano la lista delle categorie

blog.

o delle pagine.

3 ·· CONCLUSIONE

Aggiungiamo il seguente markup alla nostra pagina: Per il momento – per quanto riguarda la sidebar – ci fermiamo qui, riprenderemo il discorso tra qualche lezione quando affronteremo

l’argomento widget e vedremo nel dettaglio come rendere una

<?php

sidebar pronta a ospitare dei widget gestibili direttamente dal

wp_list_bookmarks(); ?>

Andiamo a visualizzare il risultato ottenuto sul nostro tema

pannello di amministrazione.

[Figura 12] dopo aver tolto anche il bordo rosso che avevamo

In questa lezione ci siamo limitati a creare una semplice sidebar

inizialmente assegnato alla sidebar per fini didattici.

i cui elementi da visualizzare sono definiti in modo manuale all’interno del codice del template. ••

7 http://bit.ly/chgrc6

8 http://bit.ly/11mD5d

·· 83

TUTORIAL ·· WEB DESIGN COME DISEGNARE UN LAYOUT IN STILE MAGAZINE?

WebDesign

•• La nostra rubrica sugli stili del web design procede: nuovo giro, nuovo tutorial… questa volta tocca ad un layout in stile magazine, realizzato sulla base delle caratteristiche e dei trend analizzati nel precedente articolo. Sul sito di 1youispirationweb troverete il sorgente free del layout che andremo a progettare: inutile dire che puoi utilizzarlo per i tuoi progetti, personali o non.

Autore: Sara Presenti Rimbocchiamoci le maniche ed iniziamo. Lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

[STEP 1] ·· SCEGLIAMO LA GRIGLIA PIÙ ADATTA Nonostante abbiamo utilizzato la griglia per molti dei templates progettati finora, questo tipo di layout è quello che più richiede un buon frame work che aiuti a disporre i contenuti (che possono essere molto numerosi) in modo semplice e immediato. Dato che dovremo realizzare un gran numero di sezioni, alle classiche griglie da 12 o 16 colonne preferiamo un framework composto da 24 colonne (scaricabile, come al solito, in 2questa pagina).

www.mascaradesign.it Apriamo un nuovo documento in Photoshop (larghezza 1680px, altezza 1100px, 72dpi) e, una volta impostati i margini a 360px dai bordi in modo da ottenere una sezione di 960px di larghezza, importiamo la griglia nel documento [1]. difficoltà: bassa tempo: 45 min.

84 ·· your inspiration magazine

1 http://bit.ly/9OCiWg

2 http://bit.ly/QmEeb

Come disegnare un layout in stile magazine? La nostra rubrica sugli stili del web design procede: nuovo giro, nuovo tutorial… questa volta tocca ad un layout in stile magazine

[STEP 2] ·· IL CONTENITORE DEL SITO E IL NOSTRO LOGO

3 Posizioniamo subito il nostro logo, una semplice scritta realizzata con il bellissimo font 3Comfortaa, in alto e al centro del nostro layout. Ho utilizzato il colore verde poiché, insieme all’azzurro, é uno dei colori più adatti per un’attività’ che tratta di salute,

Creiamo un contenitore per il nostro magazine,

fitness e bellezza: YourBodyHealth, infatti, é un magazine

con un background di colore bianco (#fff). Per il background

tematico su tutto ciò che può riguardare la cura del nostro

del documento, invece, impostiamo un grigio chiaro (#f4f5f5) [2]

corpo[4].

2 Diamo una leggera ombra al contenitore e nascondiamo momentaneamente la griglia, per vedere il risultato [3].

3 http://bit.ly/pCbso

·· 85

TUTORIAL - WEB DESIGN

COME DISEGNARE UN LAYOUT IN STILE MAGAZINE?

[STEP 3] ·· IL MENU DI NAVIGAZIONE, LE NEWS E I SOCIAL

[STEP 4] ·· SEPARIAMO GRAFICAMENTE LE VARIE SEZIONI

Adesso creiamo il nostro menu di navigazione, utilizzando un font

Adesso dobbiamo trovare un modo per dividere graficamente

semplice e leggibile (Century gothic) che richiama in qualche

il logo dal menu, il menu dalle news e cosi via:

modo le curve morbide del logo. Impostiamo un grigio per le voci

qualcosa di visivamente carino, non troppo marcato e in linea

di menu (#7b7c7c) e, per risaltare l’effetto hover, un verde acceso

con lo stile minimalista del nostro magazine.

(#92a801) [5].

Optiamo quindi per delle linee tratteggiate, sempre di colore grigio chiaro, poste orizzontalmente tra le varie sezioni create [8].

Sotto il menu decidiamo di inserire una piccola sezione orizzontale denominata “Flash news” che contenga uno slider in JavaScript

che permette di visualizzare, con scorrimento automatico, alcune news brevi ed essenziali. Aggiungiamo anche due piccole

Ora che abbiamo disegnato la sezione superiore del nostro layout

freccette che permettono all’utente di sfogliare le news [6].

in stile magazine, cominciamo a dividere la sezione inferiore in diverse colonne, aiutandoci ovviamente con la griglia. Scegliamo di creare un layout a 3 colonne, con una sezione sinistra più larga delle altre - che conterrà un articolo in evidenzae le rimanenti due colonne di dimensioni identiche [9].

6 Aggiungiamo anche le icone dei social network, che in un magazine digitale sono sempre importanti [7].

86 ·· your inspiration magazine

LINK: http://ow.ly/2d4qQ

[STEP 5] ·· L’ARTICOLO IN EVIDENZA

[STEP 6] ·· I CONTENUTI DELLE ALTRE COLONNE

Inseriamo l’articolo in evidenza nella sezione di sinistra: titolo, sottotitolo, immagine e incipit dell’articolo [10].

Nella seconda colonna inseriamo alcuni articoli brevi ed incisivi: titolo ed incipit, in modo da poterne inserire un maggior numero e fornire all’utente molte informazioni al primo sguardo. Continuiamo a rendere il titolo di un colore acceso rispetto al grigio del contenuto testuale, in modo da evidenziarlo e farlo risaltare in modo efficace [13].

10 Per sottolineare visivamente che questo articolo é in primo piano, aggiungiamo un leggero sfondo (disegnando un rettangolo

con l’apposito strumento) di colore verde chiaro (#f2f7e7) [11]: L’ultima colonna a destra é generalmente riservata ai banner pubblicitari: nel nostro caso, invece, scegliamo di inserire un menu che ci permette di navigare tra le diverse categorie di articoli presenti nel nostro magazine: bellezza, sport, alimentazione, e cosi via. Per dare un’impronta estetica più gradevole e funzionale creiamo dei pulsanti (strumento rettangolo arrotondato), alternando due colori per rendere meno monocromatica la sezione (colore azzurro #a4c9ce e verde #c3e0030) [14]:

11 Un piccolo tocco grafico in più? inseriamo anche, in alto a destra, una piccola icona che rappresenta una puntina [12].

·· 87

TUTORIAL - WEB DESIGN

COME DISEGNARE UN LAYOUT IN STILE MAGAZINE?

Inseriamo nei pulsanti il nome della categoria, accompagnandolo

Adesso, sotto le icone di categoria, inseriamo un altro articolo,

con un’icona che rappresenti visivamente la stessa [15].

anch’esso evidenziato da un leggero background (questa volta un azzurro tenue #e6eeef) e da un’altra icona. Inseriamo anche una foto, per ravvivare l’insieme e scegliamo un colore diverso per il testo: esagerare con i colori potrebbe rendere il sito una pagliacciata, ma alternare due tonalità fa si che i contenuti sembrino meno “piatti” e attirino l’attenzione dell’utente in diversi punti della pagina. [18]

15 Diamo un’occhiata al nostro layout? [16]

18 16

Nello spazio vuoto tra le colonne, per non appesantire troppo il layout con i contenuti testuali, inseriamo un’immagine,

Inseriamo altri due mini articoli sotto il post in evidenza, dividendo

che potrebbe riprendere le funzionalità di un banner pubblicitario,

la sezione in due parti delle stesse dimensioni [18].

o di una call-to-action [19].

88 ·· your inspiration magazine

LINK: http://ow.ly/2d4qQ

Adesso, se togliamo le guide, ci rendiamo conto che i contenuti

CONCLUSIONI

non sono separati tra di loro e questo potrebbe creare una leggera confusione [20].

Il nostro layout é pronto: veloce da realizzare, semplice, pulito e leggibile, perfetto per esporre in modo efficace e gradevole una grande mole di contenuti [22]. ••

20 A nostra discrezione scegliamo allora di separare le varie colonne

con la stessa linea tratteggiata utilizzata in alto, questa volta con delle linee verticali. Per farlo duplichiamo il livello della linea tratteggiata utilizzata per delineare il menu (tasto destro sul livello > duplica livello) e lo ruotiamo di 90 gradi (Modifica > trasforma > ruota > 90 gradi orari) [21].

·· 89

TUTORIAL ·· WORDPRESS WORDPRESS: COME RENDERE DINAMICI HEADER E SIDEBAR DEL TEMPLATE?

Wordpress

•• Nel corso delle lezioni di questa guida abbiamo realizzato buona parte del nostro template; prima di spingerci avanti introducendo la personalizzazione di altri elementi riguardanti il tema, vedremo com’è possibile migliorare l’organizzazione del codice finora scritto. WordPress, infatti, mette a disposizione delle funzioni che permettono di includere

Autore: Nando Pappalardo

automaticamente – all’interno dei template – il codice di alcuni file .php presenti all’interno della cartella del nostro tema. In questo modo è possibile migliorare

Nando è amministratore di Edi Group,

la comprensione del codice e rendere il tutto più modulare, richiamando in modo

società di comunicazione e formazione

dinamico porzioni di codice da utilizzare su diversi template all’interno dello stesso tema.

fondata nel 2005. È inoltre Trainer Microsoft e docente

In una delle prime lezioni abbiamo detto che quando si realizza un tema per WordPress

di Webdesign con anni di esperienza,

è possibile creare più template (differenti tra di loro) da assegnare ai diversi elementi

anche in qualità di progettista, in corsi

del blog: archivi, categorie, singoli articoli, pagine, ecc.

di formazione professionale regionali

Se volessimo creare un template dedicato alla visualizzazione del singolo articolo

e privati.

che sia leggermente diverso dal template standard che stiamo realizzando

www.yourispirationweb.com

(per esempio vogliamo che contenga l’elenco dei commenti, il modulo per lasciare un nuovo commento, una breve descrizione dell’autore, ecc), con molta probabilità utilizzeremmo comunque degli elementi comuni, come per esempio l’header e la sidebar che abbiamo già realizzato (intestazione e barra laterale). Le funzioni 1get_header() [Figura 1] e 2get_sidebar() [Figura 2] fornite da WordPress

difficoltà: media tempo: 30 min.

90 ·· your inspiration magazine

permettono rispettivamente di includere in modo dinamico il contenuto di due file

1 http://bit.ly/2SQ55u

2 http://bit.ly/v4ZXu

WordPress: come rendere dinamici Header e Sidebar del template? una colonna riservata alla segnalazione di contenuti che possono essere visualizzati su più pagine

denominati: header.php e sidebar.php che dovranno essere presenti all’interno della cartella del tema.

COME RENDERE DINAMICO L’HEADER DEL TEMPLATE? Per rendere dinamico il contenuto dell’header del nostro template – in modo da poterlo richiamare in seguito mediante la funzione get_header() - è necessario creare un nuovo file che salveremo nella stessa cartella del tema con il nome header.php. A questo punto basterà togliere dal file index.php del nostro template tutta la parte di codice riguardante la visualizzazione dell’header e incollarla all’interno del nuovo file che abbiamo appena creato. figura 1 ·· Function Reference/get header

Questo sarà dunque il markup della nostra pagina header.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <meta http-equiv="Content-Type" content= <html xmlns="http://www.w3.org/1999/xhtml" "<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?></title>

figura 2 ·· Function Reference/get sidebar

·· 91

TUTORIAL - WORDPRESS

WORDPRESS: COME RENDERE DINAMICI HEADER E SIDEBAR DEL TEMPLATE?

Adesso nel nostro file index.php, al posto della porzione di codice

('stylesheet_url'); ?>" type="text/css"

che abbiamo tolto, basterà inserire la funzione get_header()

media="screen" />

che una volta eseguita includerà in modo dinamico tutto il codice

presente nel file header.php. La parte iniziale della nostra pagina index.php a questo punto sarà così composta: <?php

get_header(); ?>

<div id="content"> <?php

if (have_posts()) : ?>

...

<?php wp_head(); ?>

Dopo la creazione di questo nuovo file – che abbiamo chiamato

</head>

header.php - la cartella contenente il nostro tema sarà composta come mostrato nella [Figura 3].

<body>  <div class="container">  <h1> <a href="<?php echo get_option('home') ; ?>/"title="Ritorna alla Home Page"> <?php bloginfo('name'); ?> </a> </h1> figura 3 ·· Elenco file presenti all'interno della cartella del tema

<?php wp_page_menu('menu_class=

COME RENDERE DINAMICA ANCHE LA SIDEBAR? Lo stesso concetto è applicabile anche alla sidebar, basterà infatti tagliare tutto il codice relativo alla sidebar che abbiamo realizzato

nav&show_home=1'); ?>

nella precedente lezione e incollarlo all’interno di un nuovo file,

che chiameremo sidebar.php e che salveremo nella cartella principale del tema che stiamo realizzando.

92 ·· your inspiration magazine

Di seguito il contenuto del file sidebar.php:

LINK: http://ow.ly/2d4rj

<ul>

<?php wp_list_bookmarks(); ?>

<li> <h2>Cerca</h2>

</ul> </div>

<form

method="get" id="searchform"

action="<?php bloginfo('url'); ?>/"> <input type="text" name="s" id="s" value="<?php the_search_query(); ?>" /> <input

E questo invece il contenuto del file index.php come si presenta adesso: <?php

get_header(); ?>

type="submit" id="searchsubmit"

value="cerca" />

</form>

</li>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<li> <h2>Archivio</h2>

<div <?php post_class(); ?>>

<ul> <?php wp_get_archives ('type=monthly

&show_post_count=1'); ?>

<h2>

<?php bloginfo('name'); ?>

</ul>

<?php the_title(); ?> </a>

</li>

</h2>

<ul>

<?php

wp_list_categories ('title_li=<h2>

<?php

the_time('j F Y') ?>

Categorie</h2>&hide_empty=0'); ?>

di <?php

the_author() ?>

</ul>

</p>

路路 93

TUTORIAL - WORDPRESS

WORDPRESS: COME RENDERE DINAMICI HEADER E SIDEBAR DEL TEMPLATE?

</div>

<?php the_content(__('|| continua a

leggere &raquo;')); ?> </div>

<?php else: ?>

<?php _e('Siamo spiacenti, quello

che stavi cercando non è su questa

Pubblicato in <?php the_category

pagina'); ?>

(', ') ?>

</p>

<?php

endif; ?>

</div>

<p class="right"> <?php comments_popup_link('Nessun

commento &raquo;', '1 Commento

<?php get_sidebar(); ?>

&raquo;', '% Commenti &raquo;'); ?>

</p>

</div>

</div>

</body>

<?php

</html>

endwhile; ?>

Nota che adesso nel markup della pagina index.php tutta

la parte riguardante l’header e la sidebar sono state rimosse e che al loro posto sono state utilizzate le funzioni get_header()

e get_sidebar() per richiamare dinamicamente il codice

necessario. Nella [Figura 2] puoi vedere come si presenta adesso

<?php

la struttura dei file presenti all’interno della cartella del tema.

next_posts_link(__('&laquo;

Precedenti')) ?> </div> <div class="alignright"> <?php

previous_posts_link

(__('Successivi &raquo;')) ?> </div> figura 4 ·· Elenco file presenti all'interno della cartella del tema

94 ·· your inspiration magazine

LINK: http://ow.ly/2d4rj

QUAL È LA DIFFERENZA TRA TEMPLATE E TEMA?

I PARAMETRI DELLE FUNZIONI GET_HEADER() E GET_SIDEBAR()

Per i meno esperti forse è meglio spiegare la differenza

Le funzioni get_header() e get_sidebar() accettano

che sussiste tra tema e template quando parliamo di WordPress

un parametro che, se passato, andrà a includere il contenuto

perché ho notato che molti tendono a utilizzare indistintamente

di un file che come nome ha il nome del file principale

entrambi i termini come fossero sinonimi.

(header.php o sidebar.php ) seguito da un trattino e dalla stringa che è stata passata come parametro.

Con il termine template indichiamo i singoli layout grafici da applicare alle diverse tipologie di pagine

Così facendo get_header(‘nome’) includerà il contenuto

che compongono il sito, possiamo quindi avere un template

del file header-nome.php.

per le pagine che visualizzano gli articoli, un template per le pagine che visualizzano l’indice delle categorie, un template

Facciamo subito un esempio pratico per chiarire un po’ le idee:

per le pagine che visualizzano i risultati delle ricerche, ecc.

sulla pagina Contatti vogliamo visualizzare un header diverso da quello utilizzato sulle altre pagine del blog/sito.

L’insieme di questi template, che comporranno le varie pagine

Possiamo quindi creare un nuovo file che chiameremo header-

del sito/blog, prende il nome di tema.

contatti.php all’interno del quale andremo a inserire il markup relativo all’header che intendiamo visualizzare solo sulla pagina

Fatta chiarezza su questi due termini vediamo perché rendere

Contatti.

dinamiche alcune sezioni del template.

PERCHÉ RENDERE DINAMICHE ALCUNE SEZIONI DEL TEMPLATE?

Possiamo in seguito richiamare il contenuto di questo file mediante la solita funzione passandogli come parametro la stringa contatti che abbiamo aggiunto al nome del file: get_header(‘contatti’) includerà dunque il contenuto del file

Rendendo dinamiche alcune sezioni del template principale

header-contatti.php.

abbiamo reso molto più leggibile e comprensibile il codice oltre ad averlo reso modulare, possiamo cioè caricare queste

Quanto detto è valido anche per la funzione get_sidebar(),

porzioni di codice anche su altri template dello stesso tema.

così se desiderassimo caricare una sidebar diversa su una determinata pagina, potremmo creare un file ad hoc, esempio:

Per esempio se volessimo realizzare un nuovo template

sidebar-news.php e richiamarne il contenuto mediante

da applicare alla visualizzazione degli articoli e desiderassimo

la funzione get_sidebar(‘news’).

che questo template avesse lo stesso header e la stessa sidebar di quello generale (come spesso accade in molti blog), basterà

Vedremo in azione queste funzionalità nelle prossime lezioni,

richiamare – all’interno del nuovo template – le due sezioni in

quando ci occuperemo di sviluppare altri template per il tema

modo dinamico con le relative funzioni che abbiamo visto.

che stiamo realizzando.

In questo modo aumentiamo anche la mantenibilità poiché se dovessimo apportare in futuro una modifica all’header

AGGIUNGERE IL FOOTER AL TEMPLATE

(o alla sidebar) utilizzati contemporaneamente da più template diversi del nostro tema, basterà modificare semplicemente

Nelle lezioni affrontate finora abbiamo realizzato l’header

un unico file header.php o sidebar.php che contiene il markup

(l’intestazione), il contenuto principale (gli articoli da mostrare)

utilizzato.

e la sidebar (la barra laterale) del nostro template. Prima di addentrarci nella personalizzazione di altri elementi

Così facendo la modifica avrà effetto in modo istantaneo su tutti

ultimiamo lo sviluppo del template generale (index.php)

i template.

con l’aggiunta di un footer in fondo alla pagina.

·· 95

TUTORIAL - WORDPRESS

WORDPRESS: COME RENDERE DINAMICI HEADER E SIDEBAR DEL TEMPLATE?

Sulla nostra pagina index.php, subito dopo il richiamo della sidebar, aggiungiamo la seguente riga: <div class="clearer"></div> Nel foglio di stile andiamo ad aggiungere la regola appropriata: .clearer {height:0px;overflow:hidden; margin:0px;clear:both;} L’uso del div con classe clearer non ha motivo strutturale ma solo di presentazione: nel caso in cui il contenuto di una delle due sezioni (l’elenco degli articoli e la sidebar posizionati mediante la proprietà float dei CSS) sia troppo corto e non riesca a coprire figura 5 ·· Function Reference/get header

l’altezza dell’altra sezione, è necessario contenere il float. Adesso aggiungiamo questo markup al file index.php per ottenere il footer del nostro template:  <div class="footer"> <p>Copyright 2010 &copy; Your Inspiration WordPress</p> </div>

figura 6 ·· Function Reference/get sidebar

E questa nuova regola sul foglio di stile associato:

A questo punto dovresti essere in grado di richiamare dinamicamente il contenuto del footer che abbiamo appena

/*footer*/ .footer p

inserito. Lascio a te questo piccolo compito come esercitazione {text-align:center;

font-size:90%;margin:20px 0;}

da portare a termine.

CONCLUSIONE

Nella [Figura 5] puoi vedere il template generale del nostro tema come si presenta alla fine di questa lezione.

COME RENDERE DINAMICA L’INCLUSIONE DEL FOOTER SUL TEMPLATE?

Con questa lezione abbiamo ultimato lo sviluppo del template generale del nostro tema. Al momento questo contiene un unico template (index.php) che sarà impiegato per visualizzare qualsiasi tipo di contenuto presente all’interno del nostro blog, poiché non ci sono altri template disponibili.

Il concetto esposto in questa lezione per l’header e la sidebar vale

E se nella pagina dedicata alla visualizzazione dei singoli articoli

anche per il footer, infatti WordPress ci mette a disposizione

volessimo impostare una visualizzazione diversa? Nelle prossime

la funzione 3get_footer() [Figura 6] per richiamare dinamicamente

lezioni vedremo come personalizzare la visualizzazione

il contenuto del file footer.php. Non dimentichiamo che tale file

di altre sezioni del blog attraverso la creazione di ulteriori

dovrà essere posto all’interno della cartella principale del tema.

template all’interno dello stesso tema. ••

96 ·· your inspiration magazine

3 http://bit.ly/aNQQyo

Realizzare un tema per WordPress adesso Ă¨ un gioco da bambini. Vuoi sapere perchĂ¨? http://tinyurl.com/39ttfdq

your inspiration web

GALLERY ISPIRAZIONE: AFRICA, TERRA DI COLORI E CREATIVITÀ

•• Misteriosa, seducente, luogo di affascinanti leggende e di esotiche terre da scoprire: in questo periodo tutti, in un modo o nell’altro parlano di lei. Si tratta dell’Africa, una terra che come nessun’altra é capace di dare forte emozioni e, perché no, di ispirare. Sono numerosi i siti legati in qualche modo a questa terra, vuoi perché si tratta di una meta turistica molto apprezzata (basti pensare ai tanto amati Safari),

Autore: Sara Presenti

vuoi per i diversi progetti umanitari che sono emersi nel tempo e che vengono ampiamente promossi attraverso la realizzazione, per l’appunto, di pagine web.

www.mascaradesign.it

98 ·· your inspiration magazine

Paesaggi caldi, colori accesi (con una scala cromatica che va dall’arancione al marrone), conturbanti foto di animali che a noi é dato modo di conoscere solo tramite i documentari in tv, e molte foto per risaltare la realtà umana di questa terra cosi lontana. Tutto questo applicato ad un design sporco, tendente al grunge, con linee irregolari e colori sfumati, per un effetto veramente accattivante. Che ne dici, dunque, di lasciarti tentare e ispirare dai colori dell’Africa?

Ispirazione: Africa, terra di colori e creatività 1 http://www.liveafrica.com/

http://www.olseki.com/

3 http://wisergirls.org/

·· 99

GALLERY

ISPIRAZIONE: AFRICA, TERRA DI COLORI E CREATIVITÀ

4 http://www.impactsouthafrica.com/

5 5 http://www.africasafari.es/

6 http://reviveafrica.com/

http://www.stopchildlabour.eu/africatour2008/

100 ·· your inspiration magazine

LINK: http://ow.ly/2d4rN

http://www.footballmadeinafrica.com

http://www.hereslifeafrica.com/

10 http://www.riseofaryan.com/ 10

11 http://pioneerafrica.net/home.html

路路 101

GALLERY

ISPIRAZIONE: AFRICA, TERRA DI COLORI E CREATIVITÀ

http://www.deliaexplorers.com/ 12 http://www.placeswego.com.au/ 13

http://championsforafrica.es/ 14

15 http://www.africaguestbook.com/

102 ·· your inspiration magazine

LINK: http://ow.ly/2d4rN

L’Africa non ha influenzato solo il web design, ma tutta l’arte in generale. Quadri, stampe su tela, tessuti dai colori sgargianti, suppellettili per l’ambiente domestico, e cosi via. A tributo di questo paese nascono ogni giorno disegni, logotipi, poster che vogliono, in un modo o nell’altro, rappresentare visivamente e concettualmente il paese stesso e i suoi popoli, i suoi colori, la sua fauna e le sue straordinarie tradizioni folkloristiche. 16

16 http://bit.ly/caBJJw 17 http://bit.ly/aNCmER 18 http://bit.ly/9JpThv

·· 103

GALLERY

ISPIRAZIONE: AFRICA, TERRA DI COLORI E CREATIVITÀ

19 19 http://bit.ly/bh7y4g 20 http://bit.ly/buibNO 21 http://bit.ly/csDIo5 22 http://bit.ly/cScUTq

104 ·· your inspiration magazine

LINK: http://ow.ly/2d4rN

23 http://bit.ly/dDA5Q3 24 http://bit.ly/9fM6RT 25 http://bit.ly/axOFD0 26 http://bit.ly/d53SK2

路路 105

GALLERY

ISPIRAZIONE: AFRICA, TERRA DI COLORI E CREATIVITÀ

28 http://bit.ly/9ZEMD1 29 http://bit.ly/cvTf0E 30 http://bit.ly/9frRfe 31 http://bit.ly/aewgMI

Qual’e', tra questi, il design che preferisci e che piu’ di avvicina alla tua idea di Africa? Apriamo un sondaggio con il popolo di YIW!

LETTURE CONSIGLIATE The Best Website Designs of the 2010 World Cup

106 ·· your inspiration magazine

1 http://bit.ly/b5MXLn

your inspiration web

Entra nella community di Your Inspiration Web http://forum.yourinspirationweb.com

GALLERY SKETCH E DOODLES PER UN (WEB)DESIGN ORIGINALE E CREATIVO

•• C’è chi si ostina a definirli “scarabocchi” e a non riconoscere che spesso, dietro alcuni ghirigori e disegni apparentemente senza senso, possa nascondersi una vera e propria arte. I “doodles” in pratica sono questo: disegni rigorosamente a mano. Complesse figure arzigogolate, piccole caricature, punti esclamativi, freccette, scritte calligrafiche in stile “carboncino”: quel genere di immagini che nascono, quasi per caso,

Autore: Sara Presenti

quando si gioca con una matita distrattamente.

Cosi, indipendentemente da quanto la nostra tecnologia possa andare avanti e in barba

www.mascaradesign.it

Abbiamo detto che i doodles per eccellenza nascono su carta: annotazioni a margine

ai potenti software di grafica digitale presenti sul mercato, questo tipo di arte – affascinante come poche- richiede solo un foglio e una matita. E tanta, tanta verve creativa. Non ci credi? Ho selezionato per te alcuni design in stile doodles che, sono certa, ti lasceranno a bocca aperta.

DOODLES SU CARTA dei nostri libri scolastici, frattali su post-it durante una conversazione telefonica casuale, schizzi e macchie senza un senso apparente e che, chissà come, hanno preso vita su carta.

108 ·· your inspiration magazine

Sketch e doodles per un (web)design originale e creativo 2

1 http://bit.ly/9nnWYA 2 http://bit.ly/dgVwy2 3 http://bit.ly/c9NeMR 4 http://bit.ly/arIRdC

路路 109

GALLERY

SKETCH E DOODLES PER UN (WEB)DESIGN ORIGINALE E CREATIVO

5 http://bit.ly/dkUHhp 6 http://bit.ly/b5mPtS 7 http://bit.ly/bBPWd6 8 http://bit.ly/btLZ8a 9 http://bit.ly/a7M3zG

110 路路 your inspiration magazine

LINK: http://ow.ly/2d4sd

DOODLES NEL WEB DESIGN Sul web già da un po’ sono numerosi i siti (soprattutto i portfolio dei designer) che arricchiscono il design dei loro layout con questo tipo di grafica, per dare un’aria leggera e creativa e un’impronta realistica al design, che in questo modo prende spunto diretto da elementi della realtà quotidiana di ognuno di noi

10 http://bit.ly/ahQWry

(lo stesso motivo per cui molti preferiscono font hand-drawn

11 http://bit.ly/H0bs3

invece di font digitali). Personalmente trovo questo stile molto

12 http://bit.ly/dhKt9U

caratteristico e affascinante, ragion per cui conto di utilizzare

13 http://bit.ly/2j23nB

presto qualche doodles in un mio progetto personale.

14 http://bit.ly/ZBGNQ

·· 111

GALLERY

SKETCH E DOODLES PER UN (WEB)DESIGN ORIGINALE E CREATIVO

15 http://bit.ly/2nHVVd

16 http://bit.ly/2qgquX 17 http://bit.ly/aPYCXt 18 http://bit.ly/b9PYux 19 http://bit.ly/dhl4tX 20 http://bit.ly/8XJVrV 21 http://bit.ly/17JtbU 22 http://bit.ly/8YRTss 23 http://bit.ly/Gkfhg

112 路路 your inspiration magazine

LINK: http://ow.ly/2d4sd

24 http://bit.ly/cacXyv

25 http://bit.ly/G4Xmy 26 http://bit.ly/aOFn7f 27 http://bit.ly/kUEl 28 http://bit.ly/9z1n9 29 http://bit.ly/bZSFsO 30 http://bit.ly/4zgdX 31 http://bit.ly/M9ncI 32 http://bit.ly/4wcv4b

路路 113

GALLERY

SKETCH E DOODLES PER UN (WEB)DESIGN ORIGINALE E CREATIVO

LETTURE CONSIGLIATE Se stai lavorando su questo stile e sei alla ricerca di ulteriore materiale di ispirazione, ti consiglio di dare un’occhiata a queste due bellissime raccolte di doodles design:  120 bellissime illustrazioni in bianco e nero  225 esempi creativi di arte doodles

RISORSE Se i doodles da te disegnati sono poco accattivanti e vuoi comunque utilizzare questo stile nel tuo prossimo progetto grafico, non preoccuparti: il web e’ pieno di risorse gia’ pronte, di grandissimo impatto estetico: brush, dingbat, font, shapes in stile doodles aspettano solo te.

40 set di brush doodles

Doodles brush by Obsidiant

sito ·· http://bit.ly/1zOV9h

22 set di brush in stile doodles di alta qualità

sito ·· http://bit.ly/gxyk3

50+ doodle brush set

sito ·· http://bit.ly/bgthO3

Deviant art doodle brush

sito 1 ··http://bit.ly/bQGgUt ·· sito2 ·· http://bit.ly/buFhML sito3 ·· http://bit.ly/9nz8GJ

Transportation doodle shapes

sito ··http://bit.ly/cB2AZx

114 ·· your inspiration magazine

sito ·· http://bit.ly/bSIqEgt 1 http://bit.ly/9kaXAq

2 http://bit.ly/9CEn5c

LINK: http://ow.ly/2d4sd

FONT IN STILE DOODLES Sketchy Smiley font

Clementine Sketch

sito ·· http://bit.ly/aHppYs

Mtf doodle font

sito ·· http://bit.ly/3SccoF

Mtf doodle heart

sito ·· http://bit.ly/bkJcfs

Sketch block

sito ·· http://bit.ly/zQGOM

Denne Sketchy font

sito ·· http://bit.ly/eAOT8

sito ·· http://bit.ly/cQCIsg

·· 115

SUGGERIMENTI MAGGIO: SUGGERIMENTI DALLA REDAZIONE

•• Eccoci di nuovo al nostro appuntamento mensile con i “suggeriti dalla redazione”. Questo mese il materiale interessante che vogliamo condividere con voi e’ veramente molto: risorse, tutorial, curiosita’…e tantissime letture consigliate, alcune delle quali veramente simpatiche e curiose. Cominciamo con i soliti “più belli”, ovvero quei siti/font/ loghi che siano, a cui dedichiamo un piccolo spazio “pubblicitario” perchè riteniamo che lo meritino.

Autore: Sara Presenti Lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

I PIÙ BELLI Sito del mese: Fudge Il primo sito che questo mese merita “la palma d’oro” è 1Made by Fudge per la sua originalità decisamente fuori dal comune. Il layout infatti si presenta in tutto e per tutto come una schermata di Photoshop, con tanto di cursore lampeggiante sul testo (come se il livello testo fosse attivo, per intenderci), guide spostabili all’interno del layout e, come titolo della pagina, il nome del documento, la percentuale di visualizzazione e il metodo colore utilizzato (Fudge 100% RGB). Però, che fantasia!

www.mascaradesign.it

116 ·· your inspiration magazine

1 http://bit.ly/9KPKPn

Maggio: suggerimenti dalla redazione ..e Blue sky resumes

Font del mese: Rezland

Un altro sito che ha attirato le mia attenzione è Blue Sky

Un font dalle curvature morbide e molto leggibile, adatto

Resumes: grafica web 2.0, molto azzurro, piacevole da vedersi.

per il design di logotipi e progetti grafici moderni, in stile web 2.0.

Ma la caratteristica più simpatica è senz’altro la presenza di alcuni dello staff, che fanno capolino, tutti sorridenti, dalla sezione

La particolarità della lettera A, che richiama il design di una goccia,

laterale in mezzo busto. Molto bello anche l’utilizzo delle ombre

lo rende ancora più accattivante.

che sembra dare, in alcune parti del layout, un gradevole effetto 3d.

sito ·· http://bit.ly/avwg23 sito ·· http://www.blueskyresumes.com/

ISPIRAZIONE

Blog del mese: Fuse box creations

Ispirazione: showcase di bellissimi moduli contatto

Questo blog invece è da premiare per la grande intuizione artistica

Form sulla sabbia, moduli effetto cartolina, background retro’…

di chi ne ha progettato il layout, colorato, allegro, originale

tante idee per disegnare un bellissimo modulo contatti per il tuo

e curato. Ma quello che mi ha veramente affascinata è il footer:

sito web.

le scarpe da tennis che sembrano piegare come un lenzuolo il sito, e l’abile uso di doodles ed elementi di fumettistica, rendono il design del sito una vera chicca artistica.

sito ·· http://www.fuseboxcreations.com/

sito ·· http://bit.ly/at0nPF

·· 117

SUGGERIMENTI

MAGGIO: SUGGERIMENTI DALLA REDAZIONE

Ispirazione: 50 e-commerce di alta qualità

i 25 siti in bianco e nero più accattivanti

Progettare il design di un e-commerce può rivelarsi un compito

Bianco e nero, due colori di estrema eleganza e raffinatezza.

estremamente arduo, data l’ampiezza dei contenuti.

Una raccolta dei 25 siti più belli che, forse, devono la loro

Questo showcase può aiutarti a trovare l’intuizione giusta

efficacia estetica proprio alla scelta cromatica di questi due colori

per mixare in modo corretto design, usabilità e buona fruizione

diametralmente opposti.

dei contenuti.

sito ·· http://bit.ly/auMtZc sito ·· http://bit.ly/91xW5Q

I trend nei siti delle associazioni mediche/sanitarie 30 esempi creativi di background twitter Una risorsa che potrebbe essere molto utile soprattutto ad alcuni I background per twitter sono un altro modo per manifestare

nostri lettori che so impegnati nella realizzazione di siti internet

la propria creatività sul web. Se sei in cerca di idee e di esempi,

per istituti medici e cliniche sanitarie e che mi hanno chiesto alcuni

questa raccolta fa al caso tuo.

consigli in privato. Questo articolo fa al caso vostro!

sito ·· http://bit.ly/asQMpo

sito ·· http://bit.ly/cpYQTN

30 loghi ispirati alla musica

RISORSE: FONT, BRUSH, TEXTURE..

Pianoforti stilizzati, chitarre e note musicali: 30 loghi eleganti,

10 curriculum professionali in html e css

moderni, classici, intramontabili, dedicati o ispirati al bellissimo mondo della musica.

La nuova tendenza per i professionisti del web (ma non solo)? Un curriculum digitale, in xhtml e css, sobrio e professionale, per presentarsi in modo immediato ed efficace a potenziali clienti o datori di lavoro. Qua trovi alcuni curriculum free davvero interessanti e facili da personalizzare. sito ·· http://bit.ly/cwdlH4

118 ·· your inspiration magazine

LINK: http://ow.ly/2d4sI

150 free e premium immagini di animali in vettoriale Una massiccia raccolta di silhouette di animali in vettoriale.

sito ·· http://bit.ly/bjWTcb

50 stili di livello, files .psd e template per velocizzare i tuoi progetti grafici

sito ·· http://bit.ly/bBuZJR

GraphicRiver, del team Envato, raccoglie numerosi template grafici (biglietti da visita, coordinati grafici, pulsanti, tabelle..)

Uno showcase di font ..fuori dal comune

che possono esserti veramente utili per i tuoi lavori. Alcuni sicuramente li conoscerai (come il Cocktail Bubby, il font Con pochi dollari potrai acquistare del materiale di estrema

che abbiamo utilizzato per il sito dell’asilo della guida di web

qualità e dal design unico.

design) , questa raccolta di font stravaganti e’ tutta da scoprire.

sito ·· http://bit.ly/aDPYGT

sito ·· http://bit.ly/bg7RFG

40 file sorgenti di Photoshop per i vostri progetti grafici

Più di mille texture (e brush) free a cui non puoi dire di no

Qualcuno non e’ più disponibile, ma rimane comunque

Una bellissima raccolta di texture, brush e pattern in tanti

una straordinaria raccolta di risorse. Wallpaper, background

stili diversi.

astratti, icone…un po’ di tutto.

sito ·· http://bit.ly/bg7RFG

sito ·· http://bit.ly/bYWxKp

·· 119

SUGGERIMENTI

MAGGIO: SUGGERIMENTI DALLA REDAZIONE

Aqualine: un tema Wordpress free rilasciato da Onextrapixel

Le 10 migliori tecniche Css che non richiedono l’utilizzo di Javascript

Un bel tema di Wordpress free offerto questo mese da Onextrapixel: minimal, essenziale e intuitivo, con una grafica

Anche se al nostro Nic sembrerà una bestemmia, non sempre

pulita e moderna. Veramente grazioso.

Javascript e’ essenziale. Ce lo dimostra questo articolo che ci presenta 10 tecniche realizzabili interamente tramite CSS. Provare per credere!

sito ·· http://bit.ly/bMqhLT

CSS, JAVASCRIPT & CO. jquery best of: gallery e slider

sito ·· http://bit.ly/bWX6qC

Gallery, Animazioni e slider: una raccolta completa dei migliori effetti jQuery per le tue foto e gallerie fotografiche.

le 5 basilari leggi sull’usabilità da evitare di infrangere ad ogni costo Usabilità, questa sconosciuta? Cerca di osservare almeno queste 5 semplici regole.

sito ·· http://bit.ly/9Wtnc1

Uno sguardo approfondito all’ottimizzazione del database di Wordpress Se sei un amante di Wordpress sempre alle prese con sito ·· http://bit.ly/bQW1H1

l’ottimizzazione della piattaforma, non farti sfuggire questo articolo.

LETTURE CONSIGLIATE Io amo il nero, soprattutto in abbinamento con il giallo e l’arancione. Il nero nel web design lo trovo elegante, profondo, affascinante. Perciò questa analisi sulla rappresentazione del colore nero nel web design non poteva che intrigarmi. sito ·· http://bit.ly/dzX2ws

120 ·· your inspiration magazine

LINK: http://ow.ly/2d4sI

che il vero must siano i css3, da chi sottolinea l’utilizzo di font serif…in alcuni punti, ovviamente, si contraddicono. Sta a voi decidere a chi credere e capire quali, tra questi, sono i veri ed unici trend del 2010. Webdesignerdepot

sito ·· http://bit.ly/99MlEJ

Le similitudini tra l’architettura e il web design Che cosa hanno in comune architettura e web design? Molto più di quanto si possa immaginare.

sito ·· http://bit.ly/cXNrGc

Smashing Magazine

sito ·· http://bit.ly/cVTwmv

Evitare la sindrome della “foto perfetta sul sito web” Un altro bellissimo articolo di Web designer Depot riguardante la scelta della giusta immagine da inserire nel layout del sito. Un problema che credo coinvolga da vicino tutti i designers. sito ·· http://bit.ly/9mojAx

Web design ledger

sito ·· http://bit.ly/9Yeo2G

Web design e logo design trend 2010: le opinioni generali Ho voluto raccogliere tutti gli articoli usciti finora sui possibili trend del 2010 nel webdesign: ce n’e’ per tutti i gusti, da chi crede sito ·· http://bit.ly/46k3cW

·· 121

SUGGERIMENTI

MAGGIO: SUGGERIMENTI DALLA REDAZIONE

CURIOSITÀ

Web designer Wall

Curiosità: poster minimal ispirati ai capolavori di Tim Burton Non hanno niente a che vedere con il web design, ma li trovo estremamente inquietanti e…straordinari. Una raccolta di poster davvero originali.

sito ·· http://bit.ly/6GNafl

Designer Daily sito ·· http://bit.ly/9WAkeN

35 wallpaper cartoons un po’ pazzi Simpatici e un po’ buffi, questi wallpaper vi faranno tornare un po’ bambini.

sito ·· http://bit.ly/a1dp42

Trend del logodesign sito ·· http://bit.ly/cZkTNk

5 personaggi poco popolari nella storia da cui i web designer possono imparare qualcosa Può un designer imparare qualcosa da Hitler? Ma certo. Ce lo dimostra, con questo interessante articolo, Onextrapixel. ••

sito ·· http://bit.ly/bttMnN

sito ·· http://bit.ly/aNG5YS

122 ·· your inspiration magazine

SOSTIENI YIM Se questo Magazine è stato per te un’occasione di maggiore comprensione e crescita professionale, se la sua lettura è stata fonte di ispirazione, o semplicemente se senti che è giusto e vuoi contribuire alla sua crescita, puoi sostenere questo progetto in differenti modi: inserendo un banner o un semplice link nel tuo sito/blog o effettuando una donazione. Per saperne di piu: http://www.yourinspiration-magazine.com/sostieni/

·· web: www.yourispiration-magazine.com ·· ·· mail: info@yourispiration-magazine.com ··