Articoli

mercoledì, novembre 18th, 2015

Come modificare lo stile dei placeholder tramite css3

HTML5 ha aggiunto alcune nuove funzionalità per i campi di testo input e textarea. Una di queste funzionalità si ispira alla casella di ricerca di Safari: placeholder. Questa funzionalità aggiunge un testo predefinito se il campo di testo è vuoto.

Di default l’attributo CSS placeholder ha una colorazione grigio/chiara e una dimensione standard. Ecco come modificare il tag. In questo tutorial vediamo come cambiare colore al testo del nuovo tag HTML5 placeholder grazie all’uso dei nuovi stili CSS3. Questo trucco è essenziale se volete dare un tocco di unicità ai vostri progetti.

Utilizzando gli appositi selettori CSS3 potremo attuare le modifiche al colore del testo dei placeholder in modo che siano compatibili con tutti i browser senza problemi (questa pratica non funziona con ie8 e precedenti). Oltre al colore del testo possiamo anche definire una dimensione standard del testo a seconda delle vostre necessità.

Questo è puro HTML5 e CSS. Quello che si dovrebbe vedere è il testo in grigio per i placeholder (a destra) e normale testo nero per la label (a sinistra).

NOTA: Il tag placeholder funziona in Webkit, Firefox, Chrome e Safari mentre NON è compatibile con IE10(e inferiori) ed Opera.


Modifica placeholder tramite CSS3

Codice

Esempio


giovedì, giugno 25th, 2015

Come implementare uno stile a:hover inline

Quesito di oggi: come è possibile implementare uno stile a:hover inline? In realtà non esiste nessun supporto per utilizzare una pseudoclasse tramite i fogli di stile in linea. E anche se esistesse sarebbe una pratica non proprio corretta poichè dovremmo utilizzare il nostro foglio di stile CSS esterno per implementarla. E allora vi chiederete perchè arrovellarsi così tanto se alla fine la prassi è quella di non utilizzare uno stile inline con una pseudoclasse che tra l’altro non è neanche supportata.

La risposta è semplice … quando si presenta un nuovo progetto le variabili in gioco sono potenzialmente infinite e guarda caso mi è proprio capitato di lavorare su un progetto che richiedeva questo tipo di funzionalità, ovvero l’utilizzo di una pseudoclasse a:hover inline. Vi spiego subito il perchè … il progetto in questione tratta articoli di una rivista ordinati tramite una scaletta generata dinamicamente. Questa scaletta viene visualizzata nella colonna destra accanto all’articolo ed essendo generata in PHP riporta l’ordine di visualizzazione in base alla scaletta della rivista degli articoli. Ogni pulsante della scaletta ha un colore diverso che viene ricavato in base alla categoria di appartenenza dell’articolo, il tutto dinamicamente. Per riuscire ad implementare questa funzionalità sono ricorso a Javascript onmouseover e onmouseout. Di seguito vi mostro il codice utilizzato.

Implementare a:hover inline tramite Javascript

Implementare a:hover inline tramite Jquery


sabato, giugno 20th, 2015

Rilevamento automatico della lingua del browser e redirect in PHP

Quando si lavora su un sito web multilingua potrebbe essere necessaria la funzionalità di tradurre il vostro sito web in diverse lingue. Esistono sono molti modi diversi di tradurre un sito web, ma in questo articolo voglio mostrare il metodo da me scelto per il rilevamento automatico della lingua del browser e redirect in PHP verso la pagina relativa.

Per iniziare è necessario sapere quale lingua bisogna utilizzare quando un utente naviga sul sito web ed atterra nella pagina interessata. Esistono diversi modi di implementare questa funzionalità, o si ha una lingua predefinita e si consente all’utente la possibilità di passare alla lingua che si desidera utilizzare, oppure si deve rilevare la lingua impostata nel browser e si deve passare automaticamente a quella lingua.

La variabile HTTP_ACCEPT_LANGUAGE

Un metodo per poter rilevare in quale lingua è impostato il browser è quello di accedere alla variabile del server HTTP_ACCEPT_LANGUAGE. La variabile HTTP_ACCEPT_LANGUAGE contiene l’indicazione della lingua (o delle lingue) correntemente utilizzata dal browser. Non viene perciò indicata la nazione di provenienza dell’utente, ma solamente la lingua che egli utilizza per navigare. Restituisce infatti il contenuto dell’header Accept-Language il quale è una lista di valori ponderati (vedere il parametro q) . Ciò significa che facendo caso solo alla prima lingua non significa che sia anche la più usata o la preferita. Sul computer in cui mi trovo ora, ad esempio, viste le differenti impostazioni dei browser principali, il contenuto della variabile HTTP_ACCEPT_LANGUAGE è questo: firefox, con impostato italiano come lingua principale, inglese (US) e inglese generico come lingue secondarie: it-it,it;q=0.8,en-us;q=0.5,en;q=0.3.

Esempio di rilevamento della lingua e redirect


venerdì, giugno 19th, 2015

Media Queries e Responsive Web Design: Differenza tra width e device-width

Le media queries relative ai CSS permettono di definire delle regole di stile sulla base delle caratteristiche del dispositivo in uso. Quindi possono rappresentare uno strumento fondamentale per applicare i criteri del Responsive Design ovvero in base a differenti tipi di visualizzazione vengano applicati stili CSS diversi.

Sostanzialmente tali stili riguardano tre fattori: larghezza, altezza (nei loro valori minimi e massimi) e orientamento. Ma … chiariamo meglio un quesito fondamentale a livello di media queries. Qual è la vera differenza (in parole povere) tra width e device-width?

Sostanzialmente la width è basata sulla dimensione della finestra del browser, mentre device-width prende invece come riferimento la dimensione del display che non necessariamente corrisponde a quella dell’area di visualizzazione. Vediamo la definizioni tecniche riguardo le due proprietà.


Width

La width descrive la larghezza della superficie di rendering del dispositivo di uscita (ad esempio la larghezza della finestra del browser).

Device width

Descrive la larghezza fisica del dispositivo in uso(cioè la larghezza dell’intero schermo visualizzabile o una pagina , piuttosto che solo l’area di rendering , come la finestra del documento).

La device-width si riferisce alla risoluzione del display (ad es. 1024 di larghezza in una risoluzione di 1024×768 pixel), mentre width si riferisce alla larghezza del browser stesso (che sarà diversa dalla risoluzione del dispositivo se il browser non è ingrandito al massimo). Se la risoluzione fisica dello schermo è abbastanza grande per arrivare ad un “break point” nel responsive design, ma la larghezza del browser è più piccola in modo tale che targetizza un altro “break point”, vi ritroverete in una strana combinazione di entrambi i casi e probabilmente non vedrete alcun risultato o ci sarà qualche malfunzionamento inaspettato.


In conclusione

A meno che non abbiate espressamente bisogno di limitare i fogli di stile in base alla risoluzione fisica del dispositivo e non in base alla dimensione della finestra del browser, è consigliato usare ad esempio min-width mentre cercate di evitare min-device-width. Questo perchè min-device-width non prevede che i contenuti vengano adattati su device che permettono di ridimensionare le finestre, proprio per via del fatto che le media query si basano sulle dimensioni dello schermo del dispositivo e non su quelle delle finestre di riferimento.


Un esempio di media queries

In primo luogo, per poter avere un sito responsive e per poter far fronte alle richieste delle media queries, il meta tag viewport deve essere inserito nella sezione della tua pagina web. La versione standard di base di questo meta tag è mostrata sotto.

Ecco a voi le nostre media queries di esempio:

Come funzionano:

  • 1° media query: se la dimensione del browser è pari ad almeno 980 pixel o superiore lo sfondo sarà rosso.
  • 2° media query: se la dimensione del browser ha una dimensione tra 0 e 979 pixel lo sfondo sarà blue.
  • 3° media query: se la dimensione del browser ha una dimensione tra 0 e 500 pixel lo sfondo sarà verde.

mercoledì, febbraio 4th, 2015

Centrare una immagine orizzontalmente e verticalmente in un div con i CSS

I Cascading Style Sheets (CSS) costituiscono un ottimo metodo per centrare le immagini, blocchi di testo e persino l’intero layout. La maggior parte di queste proprietà sono stati introdotte nei CSS dalla versione 1 e funzionano benissimo con i CSS3. Il processo di allineamento al centro può essere molto utile per i web designer e l’uso delle proprietà dei CSS sono fondamentali per centrare qualsiasi elemnto HTML.

Centrare una immagine ed altri elementi con i CSS è una sfida per molti web designer all’inizio poiché esistono tanti modi diversi di farlo ma non tutte le tecniche funzionano su ogni elemento. Comunque sia imparare a centrare gli oggetti della pagina HTML con i CSS è fondamentale dal momento che l’elemento HTML CENTER è stato deprecato e non può essere più supportato in futuro.

Vediamo ora alcuni metodi di come implementare questa tecnica per centrare una immagine orizzontalmente e verticalmente in un div di una pagina HTML. Il primo metodo metodo è più tradizionale e utilizza alcune proprietà classiche dei CSS. Il secondo metodo è più avanzato e utilizza la proprietà “transform” dei CSS3 la quale applica una trasformazione 2D o 3D di un elemento html. Questà proprietà ci permette di ruotare, scalare, traslare, stretchare elementi. Nel nostro esempio applicheremo il valore “translate” alla proprietà “transform”. Translate definisce una traslazione 2D dell’oggetto in questione sull’asse X e sull’asse Y.

Metodo classico


Metodo CSS3

Compatibilità
  • Chrome 36.0
  • Internet Explorer 9.0 / 10.0
  • Mozilla 16.0
  • Safari 9.0
  • Opera 23.0
Codice


giovedì, novembre 20th, 2014

Integrare i commenti di Facebook sul proprio sito

Da quando Facebook ha reso possibile i commenti di Facebook sono stato attirato da questa funzione sia per i blog in WordPress che per i siti web. Obbligare gli utenti a registrarsi per il tuo sito solo per lasciare un commento è sempre stato scomodo e fastidioso ed è intuibile che ciò sia stato un freno al coinvolgimento degli utenti nella comunità. Così, quando Facebook è arrivato nel 2011 e disse: “Ehi, sai cosa? Noi abbiamo qualcosa come 500 milioni (1,23 miliardi nel 2014) di persone nella nostra rete? Bene, ora è possibile sfruttarla e configurare il sistema di commenti di Facebook in modo che chiunque sia iscritto e che visita il tuo sito può commentare liberamente i tuoi post senza doversi registrare in nessun altro servizio”.

  • Conoscenze richieste: HTML base
  • Requisiti funzionamento: HTML, registrazione per utilizzo di API
  • Difficoltà: livello base

Funzionamento

Ad oggi si può sincronizzare il sistema in modo che ogni commento che qualcuno lascia sul tuo sito web appaia anche su Facebook e vice versa. Inoltre, grazie al funzionamento dei feed di Facebook, basta il semplice gesto di lasciare un commento da parte dell’utente per rendere visibile il tuo sito web di fronte a centinaia o addirittura migliaia di nuovi utenti, il che rende molto più probabile che il contenuto diventi qualcosa di virale. In parole povere questo è il vantaggio principale dei commenti di Facebook e il motivo per cui si dovrebbe prendere in considerazione il fatto di inserirli nel proprio sito.

Inoltre il sistema di commenti di Facebook permette agli utenti di commentare sul tuo blog WordPress o sul tuo sito direttamente tramite il loro account Facebook. Non c’è bisogno quindi di inserire nome e cognome, oppure l’email o creare un account sul tuo blog. Tutte queste azioni potrebbero far desistere l’utente a lasciare il proprio pensiero ammazzando la discussione prima ancora di crearla. Con il box dei commenti di Facebook tutto ciò viene evitato, aumentando le probabilità che l’articolo venga commentato.

Come vedremo in seguito esistono dei plugin per creare quello che vogliamo realizzare in meno passaggi, ma il vero vantaggio dell’integrare manualmente i commenti di Facebook sul proprio sito web è che si possono scegliere le funzionalità da attivare o meno, e comunque la parte più ardua riguardo al fatto di creare una Facebook APP generica viene richiesto da tutti i tipi di plugin. Ma come vedremo non è neanche così difficile, basta solamente eseguire questi 3 passaggi.


1. Creare una Facebook APP

La prima cosa da fare è andare su: developers.facebook.com e accurarsi di iscriversi come sviluppatore. Quindi selezionare Applicazioni > Crea nuova App (o aggiungere una nuova applicazione se sei già uno sviluppatore) dal menù di navigazione in alto. Quando viene visualizzato un pannello di opzioni, scegliere “website”.

Vi verrà richiesto di inserire il nome della vostra applicazione. Nell’immagine qui sotto ho semplicemente inserito “Test App”, ma si può decidere di fare qualcosa sulla falsariga di “[ilnomedeltuosito] Commenti”.

Facebook New App

Facebook poi vi fornirà un codice da inserire dopo l’apertura del tag all’interno del tuo sito web. Se il vostro obiettivo è semplicemente quello di usare i commenti di Facebook sul tuo blog (senza altre caratteristiche), allora non c’è bisogno di far nulla con questo codice. Basta compilare il modulo sottostante con il tuo indirizzo web e fare clic su Avanti.

Facebook New App Site Name

Vi verrà data anche la possibilità di testare un pulsante mi piace con un altro pezzo di codice. Ancora una volta, non sarà necessario. È sufficiente scorrere fino alla sezione “Next Steps” e selezionare l’opzione “Social Plugins”.

Facebook New App Next Steps

Tutto ciò vi porterà ad una pagina con le opzioni che vedete qui sotto. Scegliete “Comments”.

Facebook New App Comments

Per quelli di voi a cui può essere utile vi mostro direttamente questo URL: developers.facebook.com/docs/plugins/comments. Questo è il punto dove si è rapidamente in grado di inserire l’URL del sito che si desidera utilizzare per i commenti su Facebook. Qui è possibile impostare la larghezza (in pixel), impostare il numero di commenti da mostrare per impostazione predefinita, e la combinazione di colori. Una volta che questa informazioni sono state impostate, fare clic su Get Code.

Facebook New App Comments

2. Inserire il codice dei commenti di Facebook nel proprio sito

Come potete vedere nello screenshot qui sotto, ci sono due frammenti di codice che dovrete aggiungere al vostro sito web. Il box contiene il codice che dovrebbe essere idealmente collocato dopo l’apertura tag .

Il secondo frammento di codice deve essere posizionato all’interno della vostra pagina html nel punto in si vuole che il box dei commenti Facebook appaia.

Facebook New App Code

Nota: è ​​possibile che quando vedrete questa finestra ci sarà un richiamo di colore giallo che indica che l’applicazione che avete creato e state tentando di utilizzare non è ancora pubblica. Per risolvere ciò tutto quello che dovete fare è seguire il testo del collegamento nella didascalia e fare in modo che la vostra applicazione sia impostato su pubblico. Di solito questo richiamo appare perché non si dispone di un contatto e-mail inserito per l’applicazione.

Quando si visualizza in anteprima ciò che il nuovo codice mostrerà sul front-end, vedrete che ora avete due sezioni dedicate ai commenti. Questo è quello che in realtà è molto popolare su alcuni siti web in stile magazine che pubblicano un sacco di contenuti. L’idea è che la maggior parte dei loro lettori hanno Facebook e quindi la discussione sarà organica per loro. Tuttavia, per quei pochi che non hanno un account Facebook o semplicemente non vogliono usare i commenti di quella piattaforma, verrà mantenuto il sistema standard di commenti in tandem con quello di Facebook.

Ma supponiamo che non si desideri avere due sistemi di commenti, e si voglia semplicemente cambiare quello di Facebook con quello esistente. Beh, per tutti utenti che hanno un blog od un sito, è sufficiente eliminare il codice relativo al sistema di commenti originale dalla pagina ovunque si è incollato il frammento di codice relativo al sistema di Facebook.

3. Configurare le impostazioni dei commenti di Facebook

Ora che hai il tuo nuovo sistema di commenti Facebook è in funzione, ci sono altre due cose che si dovranno fare: configurare le impostazioni e moderare i nuovi commenti. Per fare una di queste due cose, andare su: developers.facebook.com/tools/comments.

Facebook New App Settings


giovedì, ottobre 30th, 2014

Geolocalizzazione HTML5

Come poter individuare la posizione corrente dell’utente che sta navigando sul nostro sito web? Vediamo di fare luce su questa tecnica tramite la quale saremo in grado di mostrare la posizione reale di chi sta navigando e di poterla utilizzare per fornire particolari tipi di servizi. Ultimamente infatti, per un lavoro recente che ho dovuto progettare, mi è stato chiesto di implementare un servizio web tramite il quale sia possibile recuperare la posizione dell’utente e di mostrare una lista di locali dal più vicino al più lontano in base alle coordinate di latitudine e longitudine.

Nota: E’ importante menzionare che per proteggere la privacy dell’utente è fatto divieto di utilizzo delle suddette informazioni senza preventivo consenso esplicito.

Nota: La geolocalizzazione è molto più precisa ed accurata per dispositivi dotati di GPS, come ad esempio gli smartphone.

  • Conoscenze richieste: Javascript intermedio, HTML base, programmazione base
  • Requisiti funzionamento: JavaScript, HTML, CSS, registrazione per utilizzo di API
  • Difficoltà: livello intermedio

Che cos’è la geolocalizzazione?

Innanzitutto spieghiamo in breve che cosa si intende per geolocalizzazione.

Secondo la definizione fornita da Wikipedia la geolocalizzazione è l’identificazione della posizione geografica nel mondo reale di un dato oggetto, come ad esempio un telefono cellulare o un computer connesso o meno ad Internet, secondo varie possibili tecniche.

Le tecnologie più utilizzate si suddividono tra sistemi di localizzazione basati su segnale radio (radiolocalizzazione), sistemi per via cablata o sistemi ibridi:

  • GPS: è basato sui segnali radio ottenuto da satelliti artificiali in orbita attorno alla Terra;
  • Localizzazione tramite le celle della rete telefonica cellulare: si analizza la potenza del segnale radio di ogni cella telefonica in relazione alla rispettiva stazione radio base (che ha coordinate geografiche note) collegata con il dispositivo mobile o terminale e ne viene determinata la distanza da questa in base alla conoscenza dell’attenuazione dell’ambiente di radiopropagazione;
  • Tramite la rete WiFi o WLAN: è basato sul segnale delle diverse fonti WiFi, le quali vengono a loro volta localizzate tramite la Rete Internet;
  • Rete Internet: tramite l’indirizzo IP della propria rete Internet, dove la localizzazione dipende dalla registrazione del collegamento ad un database;

Compatibilità col Browser

La proprietà geolocalizzazione dell’oggetto globale navigator ci fornisce una mano nell’identificare se il browser supporta le API per la geolocalizzazione.


La geolocalizzazione HTML5

Useremo il metodo getCurrentPosition() per ottenere la posizione attuale dell’utente. Nell’esempio sottostante viene mostrate una semplice implementazione di Geolocalizzazione ritornando come valori la latitudine e la longitudine della posizione dell’utente.

Nell’esempio precedente viene prima di tutto verificato se la geolocalizzazione è supportata. Nel caso sia vera la condizione viene chiamato il metodo getCurrentPosition(), altrimenti viene visualizzato un messaggio all’utente.

Se il metodo getCurrentPosition() viene invocato allora ritorna un oggetto con le coordinate di posizione alla funzione specificata come parametro ( showPosition ). La funzione showPosition() mostrerà a schermo la latitudine e la longitudine.

Questo esempio è un implementazione base della tecnica di Geolocalizzazione, senza la gestione degli errori.


lunedì, febbraio 3rd, 2014

Facebook Plugin per visualizzare i post della bacheca di una Pagina FAN – PHP & Json

Questo plugin, creato in Php & JSON, restituisce i post della bacheca da una pagina fan di Facebook e li pubblica sul tuo sito personale.


DEMO | DOWNLOAD


Qualche tempo fa ero alla ricerca di qualcosa di molto semplice per pubblicare i feed delle pagine facebook, ma non ho trovato alcuna soluzione sul web. Quello che vorrei ottenere sono i post (solo dalla mia pagina fan personale, non da altre) della bacheca di una pagina FB (si tratta di una fan page, non profili privati) e di pubblicarla sul mio sito. Speravo di ottenere i post nel formato XML o JSON e poi di codificarli in modo da utilizzare FB come un sistema di news. Purtroppo non ho trovato alcuna soluzione del genere poichè non voglio che l’utente debba effettuare il login tramite il suo account per vedere qualcosa quindi deve essere un flusso di feed pubblico. Così ho deciso di codificare il plugin.

1) Scaricare la Facebook Php SDK

Per usare la Facebook Php SDK è necessario scaricarla usando questo link: https://github.com/facebook/facebook-php-sdk. Questo è il primo esempio di come funziona:

Questo codice restituirà un array di feed.

2) Facebook App ID

Come posso ottenere un App ID ??

  1. Esegui il login su Facebook
  2. Vai alla pagina Applicazione su Facebook Developers: https://developers.facebook.com/apps
  3. Clicca il pulsante Crea un’applicazione (se non vedi l’opzione per creare una nuova app nell’angolo a destra allora clicca su Registrati come sviluppatore). fb-stream-01
  4. Inserisci un nome per l’applicazione nel campo Display Name.
  5. Potrebbe apririsi un controllo Captcha di sicurezza. Inserisci il codice Captcha e clicca il pulsante Continua.
  6. All’interno della descrizione troverai il tuo App ID e l’App Secret. fb-stream-02
  7. Nella pagina delle Impostazioni dell’app troverai il nome che hai inserito nel punto 4 nel campo di testo Display Name. Controlla se il nome è corretto, e che il tuo indirizzo email sia corretto.fb-stream-03
  8. Se vuoi rendere la tua App pubblica entra nella pagina Status & Review e imposta Page Stream a “Si”. fb-stream-04

3) Trova la tua facebook page ID

Poichè ti servirà la tua page ID, questo sito ti aiuterà a trovarla: http://findmyfacebookid.com/.

fb-stream-04

4) Primi passi in Html & Php

Prima di tutto è necessario creare una pagina base in HTML5 dove verranno mostrati i nostri post. Nell’head della pagina inseriremo il codice php necessario a salvare la variabili App ID, App Secret, Page Id. In seguito si dovrà includere il file fb_stream.php. Questo file è necessario per creare un App Acces Token(*) che ci permetterà di ottenere i feed della tua pagina.

[ (*): Se la tua app pubblica contenuti per conto dei propri utenti e richiede un token di accesso senza scadenza ai fini della pubblicazione, è necessario utilizzare un App token di accesso. Questo viene creato usando il vostro App Secret e non scadrà mai, ma sarà invalidato se resettate l’App Secret dell’applicazione. Questo tipo di token serve per modificare e leggere le impostazioni dell’applicazione. Può anche essere utilizzato per pubblicare le azioni delle Open Graph API. Fonte: FB DOCS: Open Graph ActionsFB DOCS: Access Tokens ]

5) Lo script da includere nella pagina: fb-stream.php

Questo script si occupa prima di tutto di includere le API di Facebook e di recuperare le variabili appId, secret e cookie che sono state definite precedentemente. In seguito, tramite l’utilizzo di quest’ultime, viene creato un “App Access Token” per accedere alle Open Graph API. Viene eseguita poi la richiesta di accesso alle OG API utilizzando l’url “https://graph.facebook.com/”.$page_id.”/feed/?access_token=”.$params['access_token']” e il token precedentemente creato. Questa richiesta restituirà un feed di informazioni della pagina facebook indicata nella variabile $page_id. Infine viene serializzato il risultato in JSON tramite l’utilizzo della funzione json_decode(). L’ultima parte dello script utilizza le FQL (Facebook Query Language) per interrogare la tabella del database della pagina ed ottenere il numero di fan, il nome e la foto profilo.

6) Dentro il body della pagina

Nella prima parte di codice vengono recuperati i valori delle variabili fb_pic, fb_name e fb_fans precedentemente ottenuti tramite le Facebook Query Language. Successivamente, una volta impostato il nostro ID di pagina nella variabile pageId, creeremo il classico pulsante I LIKE tramite l’utilizzo della funzione document.write() in Javascript.

In seguito dalla riga 30 è stato implementato il codice che servirà a visualizzare i post restituiti tramite le Open Graph API. Sono state inserite inoltre due funzioni per modificare il testo dei post. La funzione cropWord_($str) si occupa di limitare le parole troppo lunghe mentre la funzione cropString_($str, $chars) serve per delimitare le stringhe al numero di parole inserito come parametro.

Sono stati considerati tre tipi di post: link, status, e photo. Per poter valutare il tipo di post pubblicato dovremo accedere alla variabile type(**) all’interno del feed. Nella figura seguente è possibile vedere il feed con tutti i post della pagina generato dalle Open Graph API. Per vedere il vostro feed personale è necessario incollare il vostro page ID e il vostro access token nell’url della pagina (esempio: https://graph.facebook.com/VOSTRO-PAGE-ID/feed/?access_token=VOSTRO-ACCESS-TOKEN). screenshoot-post

Quindi in base al tipo di post vengono stampati diversi tipi di contenuti. Nel caso in cui type sia un “link” allora si dovrà valutare se all’interno del post vi è un “message” o una “story” e in seguito se il link consiste in un collegamento vero e proprio o se il link è costituito da un’immagine ovvero una “picture”. Nel caso in cui type sia uno “status” si dovrà valutare se stampare la “story” o il “message” come nel caso precedente ed in seguito stampare la data del post. Ed infine nel caso in cui type sia una “photo” si dovrà sempre valutare se stampare la “story” o il “message” e successivamente stampare l’immagine (con il collegamento a se stessa su facebook), il link relativo all’immagine ed infine la data del post.

[ (**) Documentazione ufficiale sui campi di testo disponibili in un post: https://developers.facebook.com/docs/reference/api/post ]


martedì, novembre 5th, 2013

Come funzionano le Fluid Grid (Griglie Fluide) nel Responsive Web Design

Il Responsive web design è il processo di organizzare il layout in modo che tutte le informazioni importanti siano presentate in modo leggibile dall’utente in qualsiasi tipo di dispositivo o dimensioni dello schermo. La maggior parte dei progettisti sceglie un layout a griglia in quanto è più facile gestire i layout basati su una griglia in diversi tipi di dispositivi.

Sta in voi scegliere tra una griglia fissa o fluida per la progettazione del layout. In questo tutorial ci accingiamo a concentrarsi sulle griglie fluide e la loro importanza nel responsive design.

Che cos’è una griglia fluida?

E’ importante conoscere il significato delle griglie fluide prima di cominciare a pensare al design. Non c’è spiegazione migliore della definizione data da Wikipedia al concetto di fluido.

Un fluido è una sostanza che si deforma continuamente (flussi) nell’ambito di un sforzo applicato – Wikipedia

Spieghiamo ora la definizione appena illustrata sopra in termini pratici. Nel web design, fluidasarà la nostra struttura o il layout e la sollecitazione sarà la dimensione dello schermo o dispositivo dell’utente. Indipendentemente da ciò che è il dispositivo o la dimensione dello schermo, le componenti nelle griglie fluide vanno a fluire e ad adattarsi al sistema dell’utente.

Importanza delle Griglie Fluide

Nelle griglie adattive (*) (a predefined set of layout sizes based on device screen size), si definiscono dimensioni basate sui pixel. Quindi dovremo regolare la larghezza e l’altezza manualmente in determinate viewport. Dal momento che le griglie fluide scorrono e si adattano naturalmente entro le dimensioni del contenitore principale, saranno necessari adeguamenti limitati per i vari formati degli schermi e dei dispositivi.

I dispositivi mobili sono sempre più piccoli nelle dimensioni e la gente preferisce adoperarli per uso personale. D’altra parte, i monitor dei desktop sono sempre più ampi con risoluzioni sempre più elevate. Quindi noi non possiamo partire dai piccoli dispositivi nel responsive design. Il vantaggio della griglia fluida è che siamo in grado di regolare la max-width che funzionerò anche su schermi sempre più grandi a causa dei calcoli basati sulle percentuali.

(*) http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

Come funzionano le Griglie Fluide

Eravamo abituati a progettare dentro le griglie fisse con il sistema della 960px Grid System. Poi il layout divenne adattivo utilizzando diverse dimensioni in pixel a seconda della diverse dimensioni dello schermo. E’ stata tutta una questione di layout design basato sui pixel. Ora è giunto il momento di creare progetti basati sulle percentuali quelli che sono anche conosciuti come fluid design.

Nelle griglie fluide definiamo una dimensione massima di layout per il design. La griglia è divisa in un numero specifico di colonne per mantenere il layout pulito e facile da maneggiare. Poi ci occuperemo di ogni elemento con larghezze e altezze proporzionali invece di dimensioni basate sui pixel. Così ogni volta che il dispositivo o il formato dello schermo cambia, gli elementi si adatteranno con le loro larghezze e altezze in base alle proporzioni indicate dal contenitore principale.

Prima di scavare più a fondo sulle griglie fluide, diamo uno sguardo ad alcuni disegn fluidi per avere un’idea di come il layout fluido funziona.

Dusty Cartridge

fluid_grid_sample1

Palantir.net

fluid_grids_sample2

Sistemi basati su Griglia Fluida e Generatori

La creazione di una griglia fluida da zero non è un compito facile e richiede tempo e fatica. Quindi è consigliabile scegliere un CSS Grid Framework o Grid Generator come base per la progettazione del layout. Nell’elenco seguente troviamo alcuni CSS grid systems e generatori.

La maggior parte CSS Grid Framework si presentano con funzionalità avanzate incorporate e sono stati testati attraverso molti browser. Lo scopo di questo tutorial è quello di capire le griglie fluide da cima a fondo. Quindi sarebbe saggio generare una griglia fluida che vi permetterà di imparare le basi.

Userò il sistema Variable Grid System per generare una griglia fluida in base alle nostre preferenze. Segui questo link e aggiusta i valori delle variabili. Io inserirò i seguenti valori.

Column width – 60
Number of columns – 12
Gutter width – 20

Poi scaricate la versione fluida del file CSS. Ora apritelo nel vostro editor di testo preferito e cercate: Grid >> 12 Columns. Il codice seguente mostra il contenuto della sezione: Grid >> 12 Columns.

Come si può vedere container_12 è il contenitore principale. Ogni elemento del nostro design dovrebbe essere all’interno di un contenitore con la classe container_12. Poi larghezze base percentuali sono assegnati alle classi: .grid_1,  grid_2 … .grid_n. Le griglie fluide sono costruite utilizzando le colonne che sono considerati le colonne fluide. Quando la dimensione dello schermo cambia, la larghezza di queste colonne vengono regolate proporzionalmente al contenitore principale.

Abbiamo 12 colonne fluide nella nostra griglia. Quindi, diamo uno sguardo a come le colonne sono impostate nel nostro layout.

Fluid_Grid_Default

Il codice per la pagina visualizzata sopra è riportato qui sotto. È possibile controllare i file da scaricare per ulteriori informazioni.

Demo

Ogni insieme di componenti è contenuto all’interno di un elemento con la classe container_12. All’interno del contenitore si può utilizzare la classe grid_n per creare colonne fluide con larghezze specifiche. Utilizzando grid_1 avremo un 1/12 della larghezza della griglia originale e utilizzando grid_2 avremo un 2/12.

È possibile caricare la demo e ridimensionare il browser per visualizzare la natura fluida di colonne della griglia.

Demo

Oltre il design della griglia fluida

La maggior parte dei progettisti che sono appena agli inizi pensano che usare un framework CSS reattivo renderà il vostro design responsive ma … purtroppo il responsive design non è così semplice. Le colonne delle griglie fluide si adatteranno alla variazione della finestra del browser o del dispositivo. A meno che non si pianifichi con cura la progettazione, gli utenti avranno problemi nel leggere i contenuti su piccoli dispositivi.

Si consideri la seguente schermata.

Fluid_Grid_Small_Screen

Questo è come il layout della griglia fluida discusso nelle sezioni precedenti verrà visualizzato su schermi di piccole dimensioni. Queste sono solo le colonne della griglia senza dati corretti. Anche in questo caso il numero 1 non è visualizzato correttamente. Quando si tratterà di inserire un contenuto reale potrebbe essere un disastro totale. Quind in questo scenario abbiamo bisogno di regolare la larghezza delle colonne al fine di fornire una migliore esperienza utente.

È possibile utilizzare le CSS media query per regolare la larghezza delle colonne in diverse dimensioni dello schermo. Nello scenario precedente si può raddoppiare la larghezza della colonna e mantenere 6 colonne invece di 12 per fornire una migliore leggibilità dei contenuti. Quindi assicuratevi di non dipendere solo delle griglie fluide.

Testare le Griglie Fluide

Ora che abbiamo completato le basi sulle griglie fluide, siamo in grado di creare una semplice demo con jQuery per testare la griglia fluida su diverse dimensioni dello schermo. In primo luogo ci accingiamo a creare il layout di pagina e la navigazione come illustrato di seguito.

Tester