 Allora, comunicazione di servizio, finito questo talk, non ci sarà più pausa. Andiamo tutti direttamente in traccuno per i closing remarks e per fare la foto tutti insieme, quindi non scappate a casa, restate con noi, che è molto bello il momento dei closing remarks, dove facciamo un po' il riassunto della giornata e i saluti di Dennis, il nostro lead. E poi vi ricordo ancora, dopo il work-amp, di solito ci troviamo sempre a bere qualcosa tutti insieme a festeggiare, a chiacchierare. Quest'anno ci troviamo all'Olivood, che è in corso Como 15, alle 8. Mi raccomando portate tutti il badge, così potete avere il free drink. No badge, no free drink, no party. Mi raccomando ricordatevelo perché se non ce l'avete non possiamo fare niente. Allora, non vedo gente arrivare quindi direi che cominciamo così anticipiamo un pochino sui tempi. Allora, vi presento andremo a Marchetti, che sviluppe utilizza WordPress dal 2008. Il suo prima tema, che si chiama Fulby, lo troveto nella ripositori di WordPress, ha totalizzato più di 100.000 download. Oggi ci parlerà di una nuova cosa, quindi di creare degli effetti accattivanti con le transizioni style app. Lascio subito la parola a lui, grazie. Grazie. Ciao a tutti ragazzi, grazie di essere qui e grazie agli organizzatori del work-amp, che si fanno sempre un bel mazzo per fare questi fantastici eventi. Oggi parliamo di come realizzare transizioni di pagina in WordPress rendendoli accattivanti e efficaci. Partiamo facendo una riflessione perché nel mondo delle app e nel mondo mobile c'è grande attenzione all'utilizzo delle transizioni e delle animazioni all'interno delle interfacce, come possiamo vedere qui da questo piccolo video. I motivi sono vari. Sicuramente le animazioni e le transizioni aiutano a guidare l'utente all'interno della navigazione della nostra app o del nostro sito, rendono la UX più fluida. Per UX, logicamente, intendiamo user experience, ovvero l'esperienza utente all'interno del nostro sito è più fluida ed immersiva grazie alle transizioni e possono essere anche utilizzate e vengono utilizzate nelle app per focalizzare l'attenzione su determinati elementi del design che per esempio vogliamo fare entrare nell'interfaccia prima. Se noi facciamo entrare un elemento prima all'interno dell'interfaccia, poniamo attenzione, focalizziamo la nostra attenzione su quell'elemento. Perché non vengono utilizzate su tutti i siti web? Sicuramente il primo motivo, almeno quello che è stato il primo motivo per me, è stata la difficile implementazione, cioè fino a qualche tempo fa realizzare transizioni di questo tipo all'interno di un sito web era particolarmente difficile e oltre a essere difficile dava problemi l'atoseo, perché se i motori di ricerca non sono in grado di vedere il cambio di pagina, non riusciamo a tracciare bene a livello di analytics la navigazione dell'utente e non riusciamo a far indicizzare correttamente il nostro sito e poi visto che ci voglie più tempo per realizzare transizioni e animazioni di questo tipo anche a livello di budget impattano notevolmente, quindi questi principalmente sono i tre motivi per i quali non li vediamo secondo me così tanto su siti web. Oggi però cosa succede? Succede che la cosa sta un po' cambiando soprattutto con l'avvento del mobile, praticamente le transizioni vengono utilizzate per guidare l'utente e a furia di avere esperienze utente mobile customizzate e pensate in un certo modo siamo arrivati a avere una serie di convenzioni. Ora io ve ne faccio vedere qualcuno, le più classiche, quella che possiamo vedere qua per esempio è che al cambiamento di un livello di profondità nella navigazione cioè se noi abbiamo un listato di contenuti possono essere delle categorie, possono essere dei post o possono essere degli hotel come per esempio qua nell'app di booking. E apriamo il contenuto singolo, cioè andiamo giù di un livello nella navigazione quindi da categoria sotto categoria o dall'istato pagina singola, solitamente su mobile abbiamo uno slide in da destra quindi questo è diventato un po' una convenzione ed è relativamente semplice da implementare e può guidare l'utente che capisce Finland che stiamo entrando in un livello o nella pagina singola in un sottolivello all'interno della navigazione che stiamo che stiamo svolgendo. Come possono essere utilizzati a livello di user experience? Le transizioni qui abbiamo un esempio, questo è un esempio estremamente sofisticato e figo, un esempio di un designer Brandon Gross seguito lo su Instagram perché fa delle robe molto molto interessanti. Le transizioni possono essere utilizzate come abbiamo detto per migliorare la user experience ma per guidare l'utente nel flusso di navigazione senza interromperlo verso l'obiettivo che noi vogliamo per esempio qui verso l'acquisto. Questo un esempio diciamo non è un sito reale è un concept però in questo concept possiamo vedere come posso navigare la categoria delle scarpe della Nike posso andarla a visualizzare quasi come sul negozio cioè che dallo scaffale prendo la scarpa, scelgo la taglia e in un clic praticamente posso comprare il prodotto senza avere nessun tipo di interruzione durante la navigazione. In un e-commerce normale questo non accade ovvero a ogni step cioè dall'istato pasto la pagina singola, pagina singola vado al check out c'è un'interruzione nella esperienza utente del navigatore e praticamente la pagina bianca che mi ricarica mi va un po' a interrompere tutta la magia che ho creato facendo tutte le mie belle animazioni o tutto il mio messaggio super curato a livello di design quindi possiamo spendere ora a rendere il nostro sito molto curato ma se poi quando clicco per andare nella pagina singolo nel check out mi appare la pagina bianca di botto tutta l'esperienza utente cade un po' a pezzi. Detto questo quindi alcune linee guida generali no ad animazioni fino a sé stesse le animazioni devono avere sempre uno scopo quindi no ad animazioni che confondono rendono difficile la navigazione o utilizzano troppe risorse del nostro device questo è una cosa che ho imparato anche sulla mia pelle fino a una netto faccia una animazione sul mio sito che consumava troppe risorse era un po' fina se stessa quindi si impara anche mettendo le mani in pasta e provando un po' a fare le cose si invece ad animazioni funzionali ovvero le animazioni usate per attrarre l'attenzione per guidare l'utente nella navigazione per farlo immergere nella storia nella comunicazione del mio sito nel messaggio che io sto sto spingendo all'interno del mio sito sia le animazioni per presentare stupire però responsabilmente cioè dobbiamo sempre trovare il giusto balance a livello di transizione animazioni perché se esageriamo otteniamo l'effetto contrario cioè confondiamo troppo l'utente e lo facciamo scappare e lo facciamo infastidire detto questo qualche piccolo esempio di transizione questa è una semplicissima transizione per un'esperienza immersiva ovvero io clicco su un elemento del mio design questo elemento si ingrandisce politica mi salta fuori diciamo dal layout e al suo interno appare il contenuto quindi mi immergo un po' nel contenuto che sto apprendo questa un esempio di transizione di tipo immersivo qui è una carrellata di un po' di animazioni comuni e di convenzioni che vengono utilizzate all'interno del mondo delle transizioni il primo è il più semplice fade in e fade out che viene spesso utilizzato per un nuovo contenuto se noi prendiamo qualsiasi sito li mettiamo il menu fisso adesso facciamo e faccio vedere codice per farlo e mettiamo un semplice fade in fade out al click del mouse sul menu già l'esperienzutente cambia perché non abbiamo questo stacco forte tra il cambio dei contenuti e quindi l'esperienzutente già un pochino più fluida. Un altro esempio è lo slide in e slide out che l'abbiamo appena visto prima nella slide dove quando io vado dentro di un livello nella navigazione posso far apparire il contenuto da destra e quando vado indietro mi riappare da sinistra che questo vediamo dopo come farlo e poi lo slide up che viene spesso utilizzato nelle applicazioni per la pagina di opzioni o per pagine funzionali che sono un po' fuori dal contesto dell'analogazione del menu e possiamo utilizzarlo nella pagina contacti per esempio all'interno di un sito questi sono l'ineguida generali ragazzi quindi non è che sono non è per forza così però diciamo sono delle convenzioni che possiamo riconoscere in tantissimi progetti poi abbiamo gli overlay ovvero un elemento che mi appare sopra nel design mi va a coprire l'interfaccia e mi rivela poi la nuova pagina sotto e l'overlay immersivo che è un po' quello che abbiamo visto prima con l'esempio di transizione immersiva dove praticamente questo qua è molto simile clicco su un elemento e mi appare il nuovo contenuto però mi appare praticamente con questo effetto di overlay con all'interno il contenuto appunto detto questo questi tra l'altro questi esempi qua sono tutti esempi veri cioè questi non li ho fatti con un software di grafica ma li ho fatta all'interno di un browser quindi con la tecnologia che vi faccio vedere oggi si possono creare queste transizioni in maniera relativamente semplice tempi nelle animazioni a livello di tempistiche sembra una cosa diciamo un po' superficiale in realtà è molto importante il timing nelle animazioni ora questo questo video questa gif è relativa alle animazioni su mobile su desktop in realtà i tempi si possono alzare un pochino un'animazione su desktop può avere una se una animazione di overlay per esempio può avere tranquillamente anche 600 mili secondi di tempo come come transizione logicamente 600 secondi su desktop 600 mili secondi su desktop se io faccio la stessa animazione con 600 mili secondi su mobile lo schermo è quattro volte più piccolo quindi è un'animazione molto quattro volte più lenta su mobile su mobile dobbiamo fare possiamo tramite una media query andare a cambiare il tempo di velocità dell'animazione andandolo a diminuire per esempio a 300 mili secondi che è un po' lo sweet spot che possiamo utilizzare un po' come come base per le nostre animazioni sia desktop che mobile detto questo come si realizzano le transizioni in warpress io ho provato ciò sbattuto la testa per per un bel po' di tempo ci sono varie vie io le ho provate tutte la prima è uno utilizzare i framework js che adesso vanno molto di moda sicuramente hanno tantissimi vantaggi hanno tantissime cose molto diciamo allettanti come per esempio le performance estremamente estremamente potenti e alte possono essere utilizzati in progetti anche molto grandi possono crescere per esempio react è utilizzato per fare rbnb per fare spotify per in tantissimi grandi siti quindi il sito può crescere tantissimo questa tecnologia però hanno dei downside degli svantaggi sono di difficile implementazione se voi volete creare una applicazione in react anche semplice con vi dovete comunque scaricare tutto uno stack c'è tutto una un'architettura della tecnologia che se uno arriva da php warpress html css è dura non è proprio semplicissimo a livello seo sono comunque hanno dei problemi perché google non è in grado di comunque è in grado però non si capisce prende una zona grigia di indicizzare correttamente pagine fatte con questa tecnologia la cosa secondo me il punto che nel mio caso è stato quello che mi ha fatto dire non non utilizzo questo che è la flessibilità che io ho con warpress il mio normale modo di utilizzare warpress non la posso avere qui perché se io utilizzo un frontend fatto in react adesso senza dilungarmi troppo però e aggiungo un plug-in per aggiungere una funzionalità comunque devo incominciare a fare delle chiamate pie se questo plug-in ottimizzato con le resti pie posso non riuscire a andare a prendere il dato quindi mi perdo un po la flessibilità di warpress e poi anche la mantenibilità e c'è la nuova versione di react spacca tutto oppure c'è la nuova versione di react dicono che a pagamento e che il sito chiude come è successo due anni fa poi hanno detto no va bene stava scherzando non è più pagamento l'altra strada è g query e ajax ovvero utilizzare un po il vecchio metodo di utilizzare g query facendo delle chiamate dirette anche qui una tecnologia più semplice possiamo installare plug-in a livello di sé possiamo avere problemi comunque l'implementazione è un po più lunga di di quello che per me potrebbe essere l'implementazione ottimale quindi qual è l'obiettivo cosa vogliamo fare noi con queste transizioni warpress qual è il nostro obiettivo vogliamo avere delle transizioni senza perdere troppo tempo avere problemi seo e rinunciare alla flessibilità di warpress la soluzione e su e ci sono anche altri sistemi quindi io non sono diciamo un non dico che per forza bisogna utilizzare su ma ci sono delle librerie come anche barba j s che ti permettono tramite javascript di creare transizioni senza perdere flessibilità senza avere problemi lato seo e hanno poi ottime performance ti permettono anche di essere estese con plug-in e script senza diventare mato quindi questa soluzione qua è una libreria pesa 20k lo inseriamo nel nostro sito facciamo un po di configurazione e possiamo avere delle transizioni avere un esperienza utente come in react senza avere tutti quei problemi che abbiamo visto prima come realizzeremo c'è cosa realizzeremo con supe warpress realizzeremo una single page application che non è altro che una pagina web che carica una volta e poi non carica più quando io clicco sul menu il contenuto all'interno della della mia applicazione del mio sito viene iniettato all'interno dell'interfaccia senza far ricaricare con la rotellina la pagina quindi menu e footer rimangono sempre lì cambia solo il contenuto al clic vedremo come realizzare delle transizioni come queste qua che abbiamo visto qua che abbiamo qui al lato vedremo come integrare la search di warpress quindi io faccio una ricerca e i risultati mi saltano fuori dal con una transizione e vedremo come installare plugin per aggiungere funzionalità quindi dopo questa premessa qui in cominciamo parlano un po di codice e di struttura del nostro progetto utilizzerò il tema chaplin che è un tema molto carino e free è disponibile sull'arepo ufficiale di warpress è fatto da uno sviluppatore molto bravo svedese e è un secondo me io qui lo utilizzo come un framework più che come un tema cioè l'utilizzo come una base sul quale andare a lavorare queste tecniche qua che vi faccio vedere possono più o meno essere utilizzate su qualsiasi tema perché comunque si può rendere una single page application con questo sistema qualsiasi tema ok quindi utilizzeremo questo tema più svupe come funziona svupe è molto semplice svupe è una libreria javascript quindi dobbiamo includerla all'interno del nostro progetto dobbiamo andare a definire un container che non è altro che appunto il container dove andiamo poi a caricare dentro il contenuto al clic del mouse dobbiamo andare a fare un po di settings e dobbiamo andare a stilizzare le transizioni la cosa interessante di svupe è che il trigger ha delle classi all'interno dell'html e io posso usare queste classi per applicare delle animazioni quindi come prima cosa andiamo a scaricarci svupe dalla repo ufficiale su github questa qua è la struttura di chaplin del tema chaplin se vedete abbiamo la cartella css js come praticamente in tutti i temi e poi abbiamo i soliti file di warpress footer punto php function adder punto php su tutti i file che modificheremo tra poco come prima cosa vado a inserire la libreria giustamente nella nella mia cartella js mi creo anche un file script punto js vuoto che inserisco nella cartella js perché dopo li andremo a mettere le opzioni poi mi creo sempre uno un file svupe punto css che inserisco all'interno della cartella css anche questo è un file vuoto andremo noi dopo a mettere qui il codice css delle animazioni e poi in cominci ad andare a lavorare un po sul tema qui mi apro function punto php e vado a inserire lo stile tramite l'anchiù classico di warpress per raggiungere gli stili poi vado a fare la stessa cosa con i javascript quindi mi includo i due file che ho trascinato prima la cartella js questi file sono queste funzioni sono delle funzioni di anchiù script quindi non fanno altro che inserire nel tema queste risorse questi file poi successivamente devo andare a definire il container questo è molto importante perché come abbiamo detto qui dentro verranno caricati i contenuti del nostro sito se vedete io appena dopo la body class appena quindi mi apro eder punto php appena dopo la body class vado ad aprire il mio container il container deve avere ed svupe e gli applicchiamo la classe transition che ci servirà dopo per triggerare le animazioni ok poi mi apro footer punto php e qui in footer punto php apro il file e la prima linea del di codice che c'è in questo file nella prima linea di codice vado a chiudere il mio container facendo così abbiamo il vp footer e poi ho messo i tre puntini che logicamente indicano tutto il codice che c'era nel footer sono fuori dal container questo è importante perché wordpress nel vp footer carica un botto di roba carica le risorse javascript carica la top bar carica tutta una serie di cose che noi vogliamo far caricare fuori dal nostro container solo al primo caricamento in maniera tale che diciamo carichiamo la cornice del nostro sito e poi il contenuto lo andiamo a modificare senza ogni volta rinserire il vp footer e caricare delle risorse che abbiamo già caricato non ci serve caricarle facendo così ottimizziamo le performance c'è c'è un però nel senso che c'è un però qui se abbiamo dei plugin che vanno a inserire delle risorse per esempio non so solo nella pagina di check out e dv commerce oppure se abbiamo delle ottimizzazioni particolari che inseriscono nel footer del codice solo nella pagina dei contatti per esempio dobbiamo utilizzare poi una tecnica che vi faccio vedere per dire a svup ok guarda che nella pagina contatti mi serve anche lo script del del check del form dei contatti perché se no se noi utilizziamo questa tecnica ottimizziamo però poi non va il form dei contatti adesso vediamo dopo come sistemarlo questo è una precisazione detto questo apriamo il file script punto js qui è proprio paro paro l'inizializzazione di svup copiata dalla documentazione ufficiale sembra un casino ma in realtà è molto complessa cioè molto semplice è la melanzana e la parmigiana che sta salendo praticamente qui abbiamo definito la classe transition che è la classe che utilizziamo per le animazioni poi sotto abbiamo il container che è quello che abbiamo definito li d che abbiamo definito prima poi abbiamo case true che non fa altro che andare ad abilitarmi la cache front end di svup quindi se io vado a vedere la pagina contatti poi torno nella oma poi ritorno nella pagina contatti la seconda volta io avrò già la pagina contatti in cache quindi svup me la butterà fuori in tempo zero e poi ho link selector che è un selettore quindi non è in realtà così complesso una combinazione di più selettori il primo pezzo dove c'è hf e window location origin dice semplicemente che questo selettore va a praticamente a selezionare tutti i link che hanno nel attributo a caref il nome del mio sito www.miosito.it ok quindi tutti i link che hanno nel mio sito l'url del mio sito stesso vengono selezionati da questo selettore questo selettore dice svup ok se tu vai a vedere mio sito.it slash contatti questa è una pagina sul tuo sito quindi non la devi andare a mostrare come si fa normalmente ma passa questa selezione a svup e svup farà tutti i suoi ragionamenti utilizzerà interverrà e farà le transizioni poi ci sono altri selettori c'è questo condata no svup che praticamente se vogliamo che un link non sia processato da svup e quindi non abbia le transizioni basta che gli mettiamo data no svup e non viene processato come un link da attivare le transizioni e poi abbiamo e la stessa cosa vale anche per il selettore dopo se ha il cancelletto ok apriamo il file svup punto css abbiamo la nostra classe transition dove appliciamo una classe da una transition da 0.6 secondi quindi 600 millisecondi gli diamo pacità 1 posizion relative top 0 left 0 quindi il nostro container nella configurazione base a opacità 1 e top 0 left 0 poi abbiamo due classi che vengono aggiunte da svup in punti chiave all'interno del appena prima e appena dopo del caricamento del contenuto per andare ad applicare l'animazione quindi dove c'è il commento in quella lì è l'animazione di ingresso il nuovo contenuto apparirà da top meno venti opacità 0 diventerà top 0 opacità 1 quindi farà un leggero fade in dall'alto verso il basso il contenuto che invece va via avrà opacità da 1 a 0 e top 70 quindi andrà giù di un bel po di più rispetto quello in ingresso e avrà opacità 0 il risultato di tutta questa bella roba poi questo qua va beh è uno screenshot delle classi che vengono messe da svup nell'html il risultato di tutto questa cosa qua è questo ovvero io ho il mio container che mi contiene tutto il sito anche il menu e quando io clicco un un link nel menu il contenuto vecchio va giù e il contenuto nuovo arriva da sopra con una leggera con un leggero fade in dall'alto questa è una single page application nì nel senso che il menu se vedete è un effetto carino però il menu non dovrebbe fare questo il menu dovrebbe essere fuori dal container dovrebbe rimanere sempre fisso quindi cosa facciamo andiamo nell'header.php e andiamo a spostare l'apertura del container da appena dopo la l'apertura del tag body alla fine del tag alla fine del header.php facendo così tra body e la chiusura del mio container ho tutto il codice del menu che ora è fuori il risultato nel browser è questo quindi ho il menu fisso e al clic il contenuto cambia già più carino già più simile a una web application c'è un problema però che quando clicchiamo sul link all'interno del menu la pagina non rimane selezionata perché WordPress non ricarica quella porzione di pagina quindi non viene applicata la classe current menu item che è la classica classe che utilizza WordPress per andare ad selezionare ad attivare praticamente lo stile del link della pagina corrente per sistemare questa cosa possiamo farlo con un piccolo snippet di codice g query semplicemente al clic del mouse sul link del menu che è la linea 4 gli diciamo di rimuovere tutte le classiche ci sono nel menu che hanno nome current menu item così facendo se abbiamo una pagina selezionata o più pagina perché abbiamo sbagliato abbiamo messo due pagini uguali nel menu lui tira via la classe current e la va ad applicare all'elemento che stiamo cliccando non al link ma all'elemento padre tramite parent alla linea 6 perché in WordPress le classiche current sono applicate non al link ma è lei che è l'elemento padre che contiene il link il risultato nel browser è questo se io clicco su senza categoria rimane selezionata se clicco su pagina di esempio rimane selezionata e il contenuto cambia di conseguenza ok con questo abbiamo visto praticamente l'implementazione super base di swoop con un'animazione sola per tutti le transizioni di tutto il sito swoop però è una libreria molto potente infatti ti permette di andare a definire a stabilire delle animazioni custom indeterminati punti del nostro sito se per esempio io voglio andare nell'istato dei miei articoli e dirgli ok quando io clicco su un elemento all'interno dell'istato degli articoli al posto che farmi il fade mi fai uno slide in da destra perché sono in un listato e la convenzione diciamo delle animazioni delle transizioni mi dice che devo fare entrare il contenuto a destra questo ripeto non è una regola 100% però è buona norma lo posso fare così vado a cercare il mio listato all'interno del codice di warpress in chaplina in parts preview punto php in un tema diciamo più semplice potrebbe essere in index punto php vado a cercare il link che mi apre la pagina singola e gli applico questo attributo data transition questo data transition passa un parametro che in questo caso è slide è un parametro custom e questa qua non è altro che la classe che svupe va a mettermi nel nel leder per dire ok questo questo link qua questa pagina questa transizione che arriva da questo link la voglio con la classe slide nel leder non con la classe normale la classe normale rimane però noi la possiamo sovrascrivere perché se vedete qua in alto viene creata questa classe tu slide tu tratino e lo slide è preso da lì se io li mettessi pippo sarebbe tu tratino pippo e poi ci sono tutte le solite classi di svupe che vengono applicati nei momenti chiave della della transizione quindi se vanno di svupe punto css ora devo crearmi l'animazione slide in e per farlo cosa faccio innanzitutto qui ho fatto dei test e ho visto che a me l'animazione su desktop mi piaceva un pochino più veloce rispetto al fade di default quindi cambio il tempo dell'animazione utilizzando la classe tu slide a 0.3 secondi che sono 300 mili secondi nell'animazione di ingresso gli dico opacity 0 left 50 top 0 il top 0 un refuso potrebbe essere anche non esserci vuol dire che praticamente questo questo elemento qua che arriva arriva da left 50 quindi mi arriva da destra mi giro perché se no e mi arriva così ma arriva da destra a 0 che è la condizione di default left 0 l'auto invece fa l'opposto quindi avrà il contenuto che esce avrà left meno 50 quindi esce da sinistra e va all opacity 0 il risultato è questo quindi clicco sul sull'articolo e l'articolo mi entra così clicco ancora e mi entra così se vedete però io se clicco su senza categoria l'auto me lo fa con sul sul senza categoria me lo fa col vecchio sistema perché perché su quell'inclin non ho definito nessuna classe custom che ci siamo quindi cosa faccio vado a cercarmi quell'inclin all'interno del codice vado a definire un'altra transizione di back quindi data transition back vado nel mio stile e gli dico quando clicchi su questo link qua al posto che farmi il fade out a farmi una animazione di ingresso da da sinistra facendo left meno 50 e in uscita mi fai mi sposte il contenuto in uscita a destra sembra è più difficile raccontarlo faccio prima farvelo vedere sostanzialmente così mi va fuori così mi torna indietro quindi slide e back queste sono due animazioni custom fatte in swoop se avete visto è una cosa molto molto semplice sono 10 linee di codice ok se voglio aggiungere funzionalità a swoop mi permette di aggiungere tramite i suoi plug-in ha tutta una serie di plug-in molto utili uno serve per esempio per tracciare google analytics perché con questo sistema se io carico una volta la pagina e poi cambio il contenuto come una single page application le google analytics vengono falsate c'è un plug-in per quello c'è un plug-in per far funzionare il form all'interno di warpress andiamo a vedere come impostarlo lo scarico lo sposto nella mia cartella js lo includo nel mio function punto php come abbiamo fatto prima con gli altri file e poi nel mio file di configurazione gli dico guarda sto usando il plug-in sto usando il plug-in form plug-in e gli passo il selettore model search form che non è altro che la classe che sarà applicata sul form della mia ricerca di warpress il risultato è questo apro la ricerca digito clicco in bio e vedete che i risultati mi appaiono da sotto potrai migliorare l'esperienza utente di questo di questa iterazione assolutamente sì potrei fare che quando clicco mi si chiude la ricerca per esempio oppure potrei fare che quando digito dopo non so 150 mili secondi lui automaticamente mi fa l'invio del form diciamo per gli scopi di questo tolco diventava se no troppo lungo vi voglio solo far vedere questa questa cosa qui come facciamo ad inserire script esterni all'interno di questo sistema se proviamo ad esempio a inserire uno slider una pagina per esempio nella om se io inserisco uno slider se io carico la om e inserisco lo slider come sono solito fare senza utilizzare questo load script se io visualizzo la pagina direttamente nel browser la prima volta vedo lo slider che funziona se vado nella pagina contatti e ritorni indietro il contenuto della della om mi verrà iniettato tramite ajax e quando quando torno nella om e praticamente lo slider non funzionerà perché è perché non è stato inizializzato correttamente adesso senza entrare in troppi tecnicismi sostanzialmente io lì il codice di inizializzazione dello slider lo devo anche mettere dentro questo evento che non fa altro che rinizializzarmi lo slider quando c'è la transizione e il contenuto viene inserito all'interno della pagina concludo facendo vi vedere il quello che abbiamo fatto con anche la barra di rl così vedete che al cambiamento di stato del del mio contenuto sopra cambia anche l'url questo logicamente è solo un esempio si può fare molto di più di così si possono utilizzare più container si possono fare per esempio come abbiamo visto l'esempio della nike prima c'è un elemento che rimane fisso nel design nella transizione la scarpa da piccola diventa grande e poi diventa entra nella scatola viene spedita via con svupe teoricamente si può fare questo c'è un po di lavoro da fare ma con dei container multipli si può fare e quindi da oggi le transizioni sono più semplice da realizzare e con un po di lavoro si può rendere una single page application qualsiasi tipo di sito volendo anche un e-commerce io ho fatto dei test di convocò dei test convocommerse con un po di lavoro si può fare grazie allora sono sicura che ci saranno tantissime domande però dobbiamo essere veloci veloci veloci veloci domande domande domande prova speriamo ragazzi non so più neanche io senti domanda tecnica il volo tutta la parte renderezzata la piac ap quindi non c'è più e quindi contatti le resta e pie implicitamente usando svupe mi sfugge il concetto come warpress e non possa più ricaricare la pagina però come tu riesco comunque a feceri contenuti senza fare un'altra chiamata quindi in realtà poi alla fine c'è una chiamata haggi sotto il cofano non saranno le resta e pie di warpress ma sarà ok fatta diversamente ok grazie mille ok ciao ciao volevo chiederti a livello seo nell'ultima slide vi vediamo che praticamente c'è index punto piac ap esatto quello perché sono il locale sono io la zarone non ho sistemato il permaling però in un contesto diciamo finale in produzione non c'è questo ho utilizzato xamp e per fare in fretta questa demo non ho settato correttamente in realtà in un sito normale tu non vede non lo vedi index punto piac ap ok quindi tu comunque crei tutti i contenuti con il loro slug e poi li verri chiamare in un unico container quindi lo fa su per noi non c'è bisogno tu fai un sito normale ok quindi tutta l'ottimizzazione che tu fai su tutte le pagine mettiamo la fare la puoi fare comunque assolutamente il adesso magari sono nato un po veloce per questioni proprio di tempo però la cosa bella di questo approccio secondo me è proprio che tu puoi prendere un sito warpress come lei sempre fatto e con queste accortezze più o meno riesce a rifare a riavere tutti i plugin che utilizzavi prima ho fatto l'esempio dello slider magari devi rinizializzare lo script con quel content replace quell'evento lì però tu si spegni su perché un giorno dici non voglio più le transizioni il tuo sito funziona come è sempre funzionato e non ti dà problemi lato seo perché l'autore proprio di questa libreria ha creato questa libreria con avendo in mente di fare una cosa che a livello seo non cambiasse le cose rispetto un sito normale quindi per google questo è un sito normale poi noi abbiamo tutto questo discorso di transizioni ecc. però per google per un crawler di google che viene a scansionare il sito è uguale ok io ho fatto anche sul mio sito ho fatto un test perché te lo dico perché comunque l'ho provato sul mio sito io ho sempre avuto delle analytics di un certo tipo a settembre ho messo a inizio settembre ho messo swoop le performance sono sono andate molto bene rispetto prima sono il sito va molto più veloce e a livello di visite è rimasto tutto uguale non è cambiato niente quindi è veramente così funziona ecco ciao una domanda soltanto facilissima hai detto che la cache viene caricata so swoop precaricata non è possibile ci dunque non lo so la verità è che non lo so ti posso dire come funziona la cache di swoop praticamente la cache di swoop rimane le browser quindi a un livello di cache solo front end non è una cache come non so può avere un dominio site ground che ti cache a lui ha una cache che ti staticizza tutta piaccia quant'altro quindi è una cosa solo front end e rimane penso che usi web storage quindi rimane solo nel tuo browser quindi non so se può essere precaricata il primo caricamento comunque sarà sempre quello più lento rispetto al secondo sì assolutamente la cosa bella è però che se tu poi come dicevo torni una pagina che hai già visto in quella sessione praticamente istantaneo il caricamento già va forte perché devi caricare soltanto il contenuto e basta poi ha un'altra opzione che io disattivato qui che ti permette di fare il caricamento da desktop all over quindi questo è un trick che ti permette quando tu è all over lui in realtà è come se tu avessi già cliccato quindi quando clicchi magari 300 mili secondi dopo lui già 300 mili secondi di vantaggio quindi ti butta fuori contenuti in maniera estremamente veloce se lo provi fa impressione il permalink come viene gestito o lo slang il permalink sopra si e sopra con quello lì è normale di warpes adesso c'è l'index tu fai finta che non ci sei index quindi c'è un cambio di pagina effettivo solo che viene precaricato praticamente dall'over sembra così veloce fluido in realtà il cambio di pagina non è che il cambio di pagina adesso non c'è nel senso che il cambio di pagina c'è però è javascript che va a mettere l'url ad aggiornare l'url in realtà se tu metti con un elemento per esempio nel nel menu della home e poi vai a nella pagina contatti non c'è tu quando si entri dalla home tutti quello che vi di sopra rimarrà sempre il menu della home poi noi con javascript cambiamo la classe active però il menu rimane la cornice rimane quella da dove entri sul sito metti la così ok grazie innanzitutto complimenti per il talk io la domanda come farte questa allora tu ed essi fatto vedere il modo come si intercettano i click quindi sulle su gli hf è possibile intercettare anche altri eventi e in particolare allo scroll della pagina è possibile utilizzare sempre la stessa libreria per animare anche altri elementi bella domanda bella domanda c'è un plugin che si chiama scroll all'interno di zoop che ti permette di fare cose di questo tipo vero lanciare eventi allo scroll e ti può far anche scrollare l'interfaccia quindi non l'ho mai fatto però secondo me con quel plugin lì e con gli eventi che ti metta disposizione su tipo quello che ho fatto vedere alla fine il content replaced puoi fare questa cosa qua si può fare secondo me quindi in teoria utilizzando le classe degli elementi all'interno della pagina io posso attivare altre animazioni non poi attiva allo scroll puoi attivare sì ti puoi attivare un po come funziona con white points nel senso che nel momento in cui la zona della pagina è visibile l'animazione mi sa via sì sì secondo me questo si può fare però non ho ti dico se non lo fai puro con zoop ci sono per esempio c'è scroll monitor per esempio che ti permette di fare questo ci sono comunque altri script che tu puoi inserire e inizializzare come abbiamo visto prima per fare questo tipo di attività comunque secondo me è possibile con questo plugin che tu hai detto grazie mille allora mi dicono della regia che purtroppo abbiamo finito il tempo delle domande quindi esatto andare a resta qui con noi ci ha dato i suoi link comunque potete trovarlo ovunque se volete poi scriverli approfondire il discorso allora non scappate andiamo tutti in track 1 per ascoltare closing remarks e però adesso vi saluto grazie