Alcuni utenti ci hanno segnalato di aver ricevuto da Final Cut l'errore DTD validation failed importando gli xml prodotti da Fast Titles.

Che significa DTD validation failed?

Tipicamente questo errore indica un problema nel formato del file che si sta importando, ad esempio potrebbe esserci un carattere speciale all'interno del testo.

Può succedere a causa di un copia-incolla da un altro programma che mantiene la formattazione del testo, oppure quando ci sono parole in lingua straniera (ad esempio caratteri orientali), oppure virgolette non standard.

Cos'è Fast titles? Per chi non la conosce Fast titles è un'applicazione gratuita per importare massivamente sottotitoli su Final Cut. Può essere utilizzata senza installare nulla sul proprio computer e senza limiti da qui

Come risolvere?

Innanzitutto leggere bene il messaggio. Dopo DTD validation failed spesso c'è scritta la riga che contiene l'errore e anche il tipo di errore. Alcuni esempi:

- invalid character in attribute value. Significa che c'è un carattere non valido

- Document is empty l'xml è vuoto

In ogni caso dovete aprire il file xml con text edit e mettervi alla ricerca del pezzo che provoca l'errore. Se lo trovate potere editare il file manualmente, salvare e riprovare ad importare in Final Cut. Se non lo trovate potete provare a suddividere il testo in pezzi più piccoli, per ciascun pezzo provate ad esportare un xml diverso da Fast Titles per restringere il campo e individuare la riga esatta che provoca il malfunzionamento.

Se nessuno di questi tentativi va a buon fine inviateci una mail con il file xml "incriminato" e uno screenshot del messaggio d'errore completo. Proveremo a darci un'occhiata appena possibile.

NB. Fast titles è un progetto Open Source, significa che lo distribuiamo liberamente e gratuitamente. Proviamo a dare supporto a chi ce lo chiede garbatamente ma compatibilmente con i nostri impegni lavorativi e personali.

Ho pubblicato su github una soluzione veloce in javascript e css per realizzare tabelle responsive, cioè adattabili a dispositivi mobili. Nella demo ho usato bootstrap per creare rapidamente il layout ma funziona anche senza, dipende da Jquery ma si può facilmente replicare lo stesso principio con altre librerie o con Javascript vanilla.

IL PROBLEMA

Nel vecchio Final Cut 7 c'era una funzione che ci permetteva di mandare singole clip, ma anche intere timeline, a Motion 4 senza doverle esportare.

Tra Final Cut Pro X e Motion 5 questo non è più possibile e per passare da un software all'altro è necessario esportare l'intero progetto perdendo tutti i tagli e la separazione tra le clip originali. Per colmare questa mancanza abbiamo realizzato un'applicazione web che si chiama Final Cut to Motion.

Final Cut to Motion

Final Cut to motion serve per trasferire progetti da Final Cut a Motion tramite xml. Si tratta di una funzionalità piuttosto ricercata da chi utilizza abitualmente entrambe le piattaforme ma al momento non esistono molti strumenti che permettano di farlo in maniera veloce e gratuita. Nel dettaglio i vantaggi di utilizzare questo workflow sono:

• Si risparmia tempo perché non serve esportare.
• Rimane intatta la timeline di Final Cut. Non si perdono i tagli, i livelli separati e la distinzione tra le clip originali del progetto.
• Si può evitare il trimming di precisione in Motion, facendolo direttamente in Final Cut con molti più strumenti a disposizione (sappiamo infatti che in Motion non esiste neanche la taglierina).

Progetti per il futuro?

Abbiamo rilasciato questo tool in versione beta, solo con le funzionalità base indispensabili per il workflow. La nostra intenzione è farlo crescere poco a poco, come abbiamo fatto per Fast Titles, seguendo anche i feedback che ci arriveranno da voi utilizzatori di Final Cut. Quindi se usate la nostra App e trovate il tempo di inviarci un commento (sul blog, su youtube, in posta privata, sulla pagina di Facebook o, perché no, se siete a Milano davanti a una birra) ci fate molto, molto felici. 

In particolare abbiamo bisogno di:

• Segnalazioni di bug (ebbene sì, i primi rilasci non sono mai perfetti).
• Funzionalità che vi piacerebbe vedere implementate.
• Consigli sull'usabilità.
• Pull request, a breve metteremo il codice su Github.

Come usare il tool

1) Da Final cut esportare un XML del progetto (non un xml dell'evento e non un xml della library).

2) All'interno della pagina del tool (qui) caricare il file appena scaricato (l'estensione deve essere .fcpxml).

3) Clic su "export file".

1) Aprire il file esportato con Motion.

L'alternativa di Automatic Duck

Se state cercando un modo per trasformare gli XML di Final Cut in progetti di Motion potete prendere in considerazione anche il plugin rilasciato qualche mese fa da Automatic Duck, Xsend Motion. E' fatto molto bene, costa 99$ e si utilizza direttamente tramite l'interfaccia di Final Cut. 

E il video?

Non poteva mancare, ovviamente, il videotutorial di Andrea :) 

Che significa pixel perfect? Nel gergo del design e dello sviluppo frontend viene chiamata pixel perfect una pagina web realizzata in maniera perfettamente identica (al pixel appunto) alla grafica fornita dal progettista. 

Lo dico o non lo dico?

Beh, lo dico. Quest'espressione non mi ha mai convinto molto. "Ti farò un lavoro pixel perfect" o "voglio un risultato pixel perfect" o persino con delle percentuali: "pixel perfect all'80%". Di solito a queste richieste rispondo senza esitare: "Certo, avrà il suo 80% di pixel perfect. Sono 82%. Che faccio, lascio?".

Ma dato che siamo tra di noi lo posso dire senza timore: il pixel perfect è una cagata pazzesca.

E' finita l'era del tubo catodico

Oggi sia il designer che lo sviluppatore si trovano alle prese con una quantità di dispositivi fino a pochi anni fa inimmaginabile: diverse le dimensioni, diverse le risoluzioni, diverse le tecnologie supportate. Una pagina web non può essere identica su tutti dispositivi e nessun designer umano è in grado di produrre tanti psd quanti sono gli schermi esistenti. Anche se potesse, non potrebbe replicare tutte le interazioni possibili su ciascuno di questi schermi.  

Un enorme spreco di tempo

Anche un orologio rotto due volte al giorno segna l'ora esatta. Poniamo che la nostra pagina sia identica alle due/tre risoluzioni per le quali è stata disegnata. Quanto tempo c'è voluto? Prima il grafico ha disegnato tutto il sito almeno per desktop, tablet e mobile. Se è una piattaforma complessa avrà disegnato tante pagine, come si può calcolare l'80% di pixel perfect se non c'è il psd della pagina di recupero password?

Ma non basta. Ogni psd contiene livelli differenti per stati differenti della pagina: carrello vuoto, carrello pieno, che succede quando il carrello è pieno ma ha molti oggetti? e quando ne ha pochi?. Un designer esperto può prevedere queste casistiche ma disegnarle tutte in modo da permettere l'agognato pixel perfect è oltremodo oneroso. Nella nostra storia poniamo di avere un grafico espertissimo con molto tempo libero che ha effettivamente prodotto 5G di psd. Bene, le grafiche sono passate allo sviluppatore che con molta pazienza si è messo a misurare tutti  gli elementi, tutte le interlinee e infine, pagina per pagina, ha realizzato il nostro sito pixel perfect su tre dispositivi.

La risposta alla domanda quanto tempo c'è voluto la lascio a voi ricordandovi che il tempo ha un costo, un costo elevato. 

Beh dai, il cliente sarà contento

Eh no, purtroppo nemmeno quello. Un psd non è una pagina web e quasi mai soddisfa al 100% le aspettative del committente. Non è colpa né del grafico né del cliente, ma state sicuri che nel momento in cui il disegno diventa realtà sopraggiungeranno un'infinità di nuove esigenze: i contenuti, le immagini, la SEO, le interazioni, i dispositivi fino a questo momento non considerati. E se l'utente stringe la finestra? che ne sarà di tutti quegli elementi incastrati tra di loro al pixel?

Insomma arrivati a questo punto ci vuole ancora altro tempo sia del grafico che dello sviluppatore, altro tempo significa altri soldi. Ehi! non avremo finito il budget vero?

Alternative?

Partiamo dal presupposto che la messa online della pagina stilata non è la fine del lavoro ma l'inizio, l'ideale sarebbe arrivare a pubblicare uno staging quando sia il grafico che lo sviluppatore hanno investito ancora poco tempo sul progetto. 

Un buon modo potrebbe essere iniziare la parte di sviluppo quando è stata disegnata solo una style guide fatta di poche pagine e tutti gli elementi della GUI. A questo punto si potrebbe portare in staging un prototipo realizzato velocemente ma completo, su cui si possa già fare data entry e che sia il punto di partenza per una nuova fase di progettazione che veda coinvolti non solo il grafico ma anche il cliente, il SEO e chi si occupa del marketing.

Se non si ragiona su un psd ma su un'applicazione reale con contenuti reali su dispositivi reali, verranno fuori tutte le esigenze più concrete del progetto: posizionamento, usabilità, esigenze di navigazione.. altro che misurare al pixel un elemento che magari nella versione finale non ci sarà più o sarà completamente stravolto.

C'è da dire che un approccio del genere pone dei problemi in fase di preventivo. Come si può quantificare un lavoro se non si hanno dall'inizio tutte le informazioni? Beh su questo non ho risposte certe. Probabilmente anche il preventivo dovrà essere diviso in porzioni più piccole, una per ciascuna fase del lavoro.

Ops! senza volerlo ho parlato un pò di agile. 

Ho pubblicato su Github dei veloci appunti sul menu di Magento2.

Come quello di Magento1, il menù di Magento2 non ha il markup all'interno del template, quindi anche solo per fare piccole modifiche è necessario estendere la classe. Nel repository c'è il codice per fare due operazioni:

• Estendere la classe \Magento\Theme\Block\Html\Topmenu Class (in questo esempio è stato aggiunto un blocco statico all'interno del menu dropdown, utile per chi vuole costruire un megamenu)
• Creare un Observer sull'evento che genera il menu per aggiungere una nuova voce (Ma su questo in rete ci sono altri esempi più autorevoli) e per ricavare dei dati sulle voci di menu. 

Sono passati sei mesi da quando abbiamo rilasciato Fast titles, l'applicazione gratuita per importare massivamente sottotitoli in Final Cut tramite xml. Abbiamo ricevuto diversi feedback, inizialmente segnalazioni di bug poi anche alcuni buoni suggerimenti. Questo ci ha fatto molto piacere e ci ha permesso di fare piccoli miglioramenti.

Tra le varie novità, la più sostanziosa è sicuramente l'aggiunta della funzione Add Gap per Final Cut Pro X. Pensata per i film di finzione, o comunque per i video con molte pause, questa opzione permette di includere un gap in ogni compound clip. In questo modo, quando rompiamo le compound clip ci ritroviamo tutte le clip separate da gap (come in figura) facilitandoci il lavoro di editing.

Se vi siete persi la prima parte di questa storia potete trovare qui una mia breve introduzione all'applicazione e il video tutorial su come usarla al meglio per risparmiare tempo.

In questo video tutorial è descritto un modo per realizzare una gif animata con l'effetto infinite zoom utilizzando Final Cut Pro X (Qui per saltare l'introduzione). 

La gif realizzata all'interno tutorial è quella che trovate in fondo a questo articolo.

Effetto Droste

Curiosità: L'effetto Droste prende il nome dalla cioccolata Droste, la cui confezione storica raffigura una donna che serve una scatola del prodotto su cui è stampata la stessa donna con la stessa scatola all'infinito (Vedi)

Come sicuramente avrete notato Facebook ci consente di postare gif animate negli status e nei commenti. Tra citazioni di film e giochi ottici il web si sta riempiendo sempre di più di video brevissimi che girano in loop. E' proprio questo il momento giusto per parlare di Droste effect e di Infinite zoom.

I presupposti principali per realizzare un video con Effetto Droste sono due:

1. La composizione comprende un totale e da un dettaglio, del tutto identico al totale stesso.

2. L'immagine deve essere visualizzata in loop. Ma da Final Cut noi esporteremo un video normale con un inizio e una fine, quindi è necessario che il primo fotogramma e l'ultimo fotogramma del video siano identici.

Esportare una Gif animata dal video con Photoshop

Importiamo il video appena prodotto con Final Cut. File -> Importa -> Fotogrammi video in livelli  selezioniamo il nostro video e facciamo clic su ok. L'operazione, che potrebbe durare alcuni secondi, ci permetterà di avere ciascun fotogramma del video in un livello diverso di photoshop.

A questo punto non ci resta che esportare tutti i livelli come unica Gif, quindi facciamo clic su File -> Esporta -> Salva per il web. Ci troveremo davanti la schermata di photoshop con le impostazioni di esportazione per il web e nel campo 'dimensione immagine' potremo scegliere la risoluzione e salvare la gif sulla scrivania. 

La gif così prodotta potrà essere aperta con anteprima come sequenza di immagini oppure con un browser come gif animata.

Condividere le gif animate su Facebook

Al momento Facebook non consente di caricare direttamente gif animate sulla piattaforma ma ne permette la condivisione tramite link. In pratica l'unico modo per condividere una gif è trovarla già pubblicata all'interno di un altro sito. Per ottenere il link, tasto destro sull'immagine 'Copia url immagine' . A questo punto è possibile incollare la gif all'interno del proprio profilo di facebook.

MA CON LE GIF PRODOTTE DA NOI SU FINAL CUT NON SEMPRE FUNZIONA. COME FARE?

Facebook, come molte altre piattaforme tra cui Tumblr, non supporta immagini molto pesanti. Quando noi andiamo a caricare un'immagine normale questa viene elaborata dal programma e pubblicata in versione ridotta. Questa operazione non è possibile con le gif, perché non le carichiamo direttamente, quindi se cerchiamo di postarne una troppo pesante, semplicemente Facebook non riuscirà a produrre l'anteprima e la vostra condivisione non sarà che un semplice link.

Sulla dimensione massima supportata Facebook ci fornisce notizie certe, abbiamo fatto alcune prove e abbiamo trovato che entro i 2,4MB l'anteprima è generata.

Per condividere la rosa del tutorial, copiate il link qua sotto:

http://www.ilgattohanuovecode.it/blog/images/rosa-infinite-zoom.gif

E' uscito Final Cut 10.2.1 Lasciatevi guidare attraverso le dieci innovazioni che realmente cambieranno il vostro modo di montare e lasciate perdere le feature inutili.

News ed eventi

Il 4 luglio saremo in diretta streaming dall'Hotel Melià di Milano per il Joomla! Festival, evento  gratuito di una giornata dedicato al mondo di Joomla! e a tutto ciò che vi ruota attorno. Joomla! è un CMS open source molto potente (è il software con cui è costruito anche questo sito web) tra i più diffusi in Italia e nel mondo e vanta una community molto attiva anche in lingua italiana.

L'evento offre un ventaglio molto ampio di contenuti e si rivolge a una platea altamente diversificata. Ci saranno talk tecnici sulla costruzione di temi e moduli per Joomla! o sulla sicurezza, si parlerà di SEO, web marketing, social ma anche argomenti di scottante attualità come la nuova legge sui cookies. Non mancheranno interventi di area business e commerciale (Vedi l'agenda). Io ho già scelto i miei speech preferiti ma non li dico :) 

Special guests della giornata Brian Teeman, co-fondatore di Joomla! and OpenSourceMatters, e Sarah Watz, presidente di Joomla!

Inoltre, dato che siamo a Milano e che questo è l'anno dell'EXPO, sarà dato spazio anche alle aziende di Food & beverage che hanno scelto di costruire con Joomla! i propri siti web. 

Per ulteriori informazioni www.joomlafestival.eu. I biglietti si possono prenotare già da subito gratuitamente su eventbrite. Se non siete a Milano o siete impossibilitati a partecipare per qualche motivo potete seguire la diretta streaming del gatto ha nuove code e far sentire la vostra voce su twitter. L'hashtag ufficiale è #joomlafestival

Incorporare i video di youtube nelle modali di bootstrap è molto semplice. L'unico problema è che le modali quando vengono chiuse rimangono in pagina con la proprietà display: none; quindi continueremo a sentire l'audio del video senza la possibilità di spegnerlo. Molto fastidioso. 

Senza andare a scomodare le API di youtube suggerisco un modo veloce in jquery per rimuovere il video alla chiusura della modale per poi ritrovarselo alla successive riapertura:

  $(function(){
        var player = $( "#productVideo" ); //id della modale
        var url = player.find('iframe').attr('src');
 
        player.on('hidden.bs.modal', function () {
            $('.modal-body iframe').attr('src', '');
        });
        player.on('shown.bs.modal', function () {
            $('.modal-body iframe').attr('src', url);
        })
 
    });

Il sistema è testato fino a ie8 compreso ed è utilizzabile con tutte le piattaforme che permettono di incorporare video tramite iframe (youtube, vimeo..)

RIFERIMENTI

Proprietà delle modali di bootsrap

La velocità di un e-commerce è un fattore importantissimo nella riuscita di un progetto. Ogni secondo che la pagina impiega a caricare fa perdere circa il 7% delle conversioni (Se ne parla in maniera approfondita sul blog di Inchoo).

I fattori che possono incidere negativamente sulle prestazioni di un sito Magento sono diversi e non tutti dipendono dal front end, ma il template ha spesso enormi responsabilità sui tempi di risposta sia del server che del client.

Ecco una lista degli accorgimenti più importanti da osservare durante lo sviluppo del tema Magento e un po' di risorse per facilitarvi il lavoro:

1. Ottimizza i javascript

Posiziona, ovunque possibile, i tuoi file javascript alla fine del documento (regola valida per qualsiasi sito web). Se uno script è presente solo in una parte del sito, ad esempio le schede prodotto, usa i layout xml per caricare il file solo lì

<action method="addItem">
     <type>skin_js</type>
     <name>js/myfile.js</name>
</action>

Ricorda che anche per le singole pagine e per le singole categorie è possibile creare degli appositi layout update.

Non ripetere trecento volte il tuo codice, fai dei modelli (come fanno i grandi framework). A tutti noi piacerebbe passare le giornate a creare fantastiche interfacce interattive ma purtroppo, nella maggior parte dei casi, ci tocca aprire e chiudere finestre. Non c'è alcun motivo ragionevole per scrivere una cosa così:

$(".pulsante-rosso-grande").click(function() {
      $(".finestra-con-tantooo-testo").show();
});
$(".pulsante-verde-chiaro").click(function() {
      $(".finestra-con-tantooo-testo").hide();
});
$(".link-con-sctitto-apri").click(function() {
      $(".dropdown").show();
});
$(".link-con-sctitto-chiudi").click(function() {
      $(".dropdown").hide();
});
//E via andare all'infinito..

Quando puoi scrivere solo tre righe e riutilizzarle ogni volta che servono. Es:

    $('.trigger').click(function() {         
       $(this).find('.dropdown').toggle();
    });

In produzione minimizza i file javascript in questo modo:

Sistema -> Configurazione -> Avanzate -> Sviluppatore -> Unisci file JavaScript -> SI

2. Ottimizza i css

Anche per i css la regola è non ripetersi. Creare dei moduli da riutilizzare in aree diverse del layout può essere molto utile per risparmiare qualche byte (e rendere il tuo codice scalabile e manutenibile, ma questo è un altro discorso). 

Con i preprocessori è molto semplice creare dei modelli da riutilizzare, i mixins sono uno strumento formidabile a questo scopo, ma occhio al numero di righe di css che state generando perché è molto facile ritrovarsi involontariamente con file lunghi 6km.

In produzione unisci e minifica i css in questo modo:

Sistema -> Configurazione -> Avanzate -> Sviluppatore -> Unisci file CSS -> SI

3. Carica quanto più possibile le tue risorse da CDN (forse)

Anche usare le CDN invece che caricare tutte le risorse dal server può rappresentare un risparmio. Questo perché, ad esempio, è molto probabile che l'utente che atterra sul sito abbia già nella cache del client diverse versioni di jquery e non sarebbe necessario fargliene scaricare un'altra. Se vuoi essere molto scrupoloso potresti prevedere una fallback nel caso in cui la risorsa esterna dovesse essere bloccata o indisponibile.

Siamo sicuri che questo velocizzerà il caricamento della tua pagina? NO.

Ogni volta che includi una risorsa via CDN stai facendo una richiesta http, anche questo influenza le prestazioni. Valuta caso per caso e fai dei test.

4. Non filtrare mai le collection nei file di template

Tieni fuori la logica dal tuo template. Sempre. Se devi realizzare una selezione di prodotti per categoria/e o per attributo/i non cercare di farlo tramite i file di template sovraccaricando il server di richieste che magari restano anche fuori dalla cache. Usa un modulo.

5. Usa quanto più possibile l'xml per inserire i blocchi statici

In Magento ci sono due modi per inserire blocchi statici nel template. Da .phtml:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('id-blocco')->toHtml(); ?>

 Oppure da .xml

<block type="cms/block" name="nome-blocco">
        <action method="setBlockId">
                 <block_id>id-blocco</block_id>
         </action>
</block>

Per sfruttare al massimo la cache di Magento usa il secondo sistema. Certo, alcune volte capita di dover mettere dei blocchi in angoli di Magento che sarebbe proibitivo raggiungere dall' .xml, allora usa pure la stringa di php (c'è di peggio nella vita) ma non farlo solo perché hai bisogno di markup che non vuoi mettere (giustamente) all'interno del blocco statico. Se hai un layout complesso e vuoi inserire il tuo markup crea una nuova reference con un suo .phtml e lì dentro inserisci i tuoi blocchi (E' un po' lunga da spiegare adesso, ne scriverò in futuro)

6. Ottimizza le immagini

Le immagini saranno il tuo tallone d'Achille, sono una delle cose più importanti per un sito e-commerce e la più pesante da caricare per il browser. 

Non ridimensionare le immagini tramite css, sfrutta il resize di Magento per dimensionare le foto dei prodotti dell'esatta dimensione in cui devono essere visualizzate.

Carica subito solo quello che è visibile subito. Usa il lazy load dove è possibile per scaricare le immagini solo quando servono. 

Usa sfondi diverse per diverse dimensioni del monitor (lapalissiano, direi)

Limita il numero delle richieste http per le icone e gli elementi grafici. Usa le sprite più che puoi. Anzi, meglio ancora, usa una sola sprite per tutto il template. Se ti secca farle a mano, ci sono ottimi plugin sia per gulp che per grunt.

7. Non imbarcare roba inutile

Centellina ogni riga di codice che inserisci nel tuo template, non caricare tutti i moduli di bootstrap se ti serve solo griglia, non includere jquery se devi solo nascondere un div. 

8. Ma sopratutto, non seguire alla lettera questa lista!

Secondo me ogni sforzo che viene fatto all'interno di un progetto deve essere proporzionato al vantaggio che ne deriva. Nessuno di questi accorgimenti, da solo, trasforma un template lento in una scheggia. Fai dei test, cura le performance nel complesso, inizia a curarle da quando imposti il lavoro, quando scegli le tecnologie a cui affidarti. Dopodiché permettiti pure di sgarrare un po'.   

Fast Titles è un'applicazione pensata per importare sottotitoli massivamente in Final Cut pro X e Final cut pro 7 tramite XML con un semplice copia e incolla. E' una web app, quindi non va installata sul computer ma è fruibile via browser, ed è completamente gratuita.

IL PROBLEMA

Inserire i sottotitoli in Final cut è un lavoro molto lungo e noioso in quanto il programma non permette di importare un testo intero e dividerlo in clip. Quindi l'unico modo per sottotitolare un video è quello di armarsi di pazienza e copiare un un titolo alla volta, ciascuno all'interno di una clip. Questa operazione può portare via molto tempo al montatore video, perciò ci siamo messi a sviluppare una soluzione automatica. Così è nato Fast Titles.

Come utilizzare Fast Titles

Il funzionamento dell' applicazione è davvero semplice. 

1. Incolla i sottotitoli nell'apposita area di testo.
2. Seleziona la versione di Final Cut che stai utilizzando.
3. Seleziona la modalità con cui vuoi vengano suddivisi i sottotitoli:
   
   Automatica - Il programma crea un nuovo sottotitolo ogni 50 caratteri. Per creare sottotitoli più brevi basta andare a capo nel punto in cui si vuole spezzare il sottotitolo:
   Manuale -  La suddivisione dei sottotitoli è completamente affidata all'utente. Per separare un sottotitolo dall'altro bisogna andare a capo da tastiera
   
   
4. Fai clic su Download e scarica il file.

Importare i sottotitoli in Final Cut

Il file appena scaricato è un file XML (Vedi come editare in XML) che può essere aperto in Final Cut facendo doppio clic. Il programma ti chiederà di scegliere una library in cui inserire i sottotitoli e poi farà partire l'importazione. A questo punto, all'interno della library che hai selezionato, troverai un nuovo evento che si chiama sottotitoli e che contiene tutti i sottotitoli già divisi e impaginati. Ad ogni sottotitolo corrisponde una compound clip.

Videotutorial: Automatic Subtitles Trick

Per approfondire come gestire i sottotitoli importati in final Cut, inserirli in timeline, variarne la durata e i parametri etc.. c'è il video tutorial di Andrea su Youtube, che spiega tutto nel dettaglio:

Contribuisci

Questo progetto è Open Source, significa che abbiamo rilasciato gratuitamente sia l'applicazione che il codice sorgente (potete trovarlo qui) per qualsiasi utilizzo, sia privato che commerciale. Ci piacerebbe estenderlo con nuove funzionalità, quindi se ti capita di utilizzarlo all'interno dei tuoi lavori, spendi cinque minuti per lasciarci un feedback qui tra i commenti del blog, su youtube, su facebook oppure via mail. In particolare ci interessano le esigenze che il programma non copre e che si potrebbero implementare in futuro, i suggerimenti per migliorarlo e le segnalazioni di eventuali bug.

Quando si vuole fare la color correction o lavorare sull'audio di un film con un software adeguato, ci sarebbe spesso l'esigenza di lavorare sulla stessa timeline che abbiamo creato durante l'editing. Nella maggior parte dei casi la risposta a questa esigenza si chiama XML, anche se purtroppo i problemi di compatibilità tra software differenti spesso limitano questa questa soluzione. Nel video incorporato qui sotto scopriremo vantaggi e limiti del roundtrip in FCPXML con Final Cut Pro X:

• Cosa si intende per "roundtrip" nel video editing
• Perché esportare in XML
• I software che sono in grado di importare ed esportare file FCPXML
• L'esempio di Logic Pro X
• I software non compatibili con FCPXML ma per i quali è possibile una conversione in un XML compatibile
• L'esempio di After Effects
• Il caso problematico di Motion 5

Come spieghiamo in questo video, l'esame di certificazione per Final Cut Pro X si basa su quiz a risposta multipla. 

In molti dei quiz vengono visualizzate parti dell'interfaccia del software, in alcuni è addirittura richiesto di individuare, cliccandoci sopra, i punti dell'interfaccia che corrispondono a determinate funzioni. 

Questo mi ha fatto venire in mente Purpose Games e la possibilità di creare quiz interattivi, così ne ho creati tre: uno sul browser, uno sull'inspector e uno su Final Cut X in generale. 

Se riuscissimo a crearne a sufficienza avremo una piattaforma gratuita per esercitarsi ai quiz dell'esame di certificazione.

QUIZ 1 (clicca sull'immagine per iniziare)

QUIZ 2 (clicca sull'immagine per iniziare)

QUIZ 3 (clicca sull'immagine per iniziare)

Vediamo come realizzare un semplice carousel di immagini per la home page di un template Magento. L'esigenza principale è far sì che il proprietario del sito possa caricare autonomamente (e cambiare) le slide dal backend e che non debba preoccuparsi di editare le immagini con un programma di grafica. L'idea più semplice è fargli caricare le immagini comodamente in dei blocchi statici.

IL PROBLEMA:

Il cliente è quella creatura mitologica che pensa di caricare un'immagine verticale in un carousel orizzontale, che vuole inserire una thumbnail in uno slideshow full screen e che nella migliore delle ipotesi non ha la più pallida idea di che tipo di slide vorrà nella home del suo sito. Quindi o gli diamo indicazioni tassative su come deve editare le sue immagini oppure troviamo noi una soluzione che vada bene a prescindere.

IL CODICE:

All'interno del vostro tema al percorso: app/design/frontend/tuo_pacchetto/tuo_tema/template/ create una cartella (nel mio esempio si chiama custom) e inserite il file .phtml scaricato da qui:

Richiamatelo nel vostro local.xml come sicuramente già sapete fare:

<cms_index_index>
    <reference name="header"> 
       <block type="core/template" name="adaptive.carousel" template="custom/adaptive-carousel.phtml"/> 
    </reference>
</cms_index_index>

Inizializzatelo tramite js (facoltativo)

   jQuery('#adaptive-carousel').carousel({
        interval: 3000
    })

E infine compilate il css (obbligatorio):

.bootstrap-slide .carousel-inner {width: 100%;}
.bootstrap-slide .carousel-inner img {max-width: 100%;}
.bootstrap-slide .carousel-inner > .item {height: 350px; overflow: hidden;} /*modificate l'altezza secondo le vostre esigenze*/ 
.bootstrap-slide .carousel-inner > .item .slide-image {height: 100%; background-size: cover !important;}

Personalizzate il tutto con la grafica del vostro tema e non dimenticate di modificare l'altezza per mobile e large screen con le media queries.

A questo punto non vi resta che caricare le vostre immagini in blocchi statici che abbiano come id slide_1/ slide_2/slide_3

Tutto qui, lo script si occupa semplicemente di estrapolare le immagini dal blocco statico, eliminare eventuali refusi html generati dall'editor (<p>, <span> ..) e utilizzarle come sfondo delle vostre slide. Va da sè che il carousel rimane perfetto a qualunque risoluzione e che le immagini altezza o larghezza eccessive rispetto alle proporzioni del div contenitore verranno croppate centralmente. 

A CHI SERVE:

• A chi sta lavorando su un template in Bootstrap.
• A chi non desidera installare componenti di terze parti.
• A chi va di fretta ;)
• A chi deve realizzare uno slideshow di sole immagini.
• A chi non gestisce personalmente lo store.

A CHI NON SERVE:

• A chi sta lavorando con framework diversi da Bootstrap (anche se è possibile fare un adattamento).
  
• A chi necessita di uno slide complesso, con diversi livelli di testo e immagini e con animazioni pirotecniche.
• A chi gestisce personalmente lo store (è sempre meglio editare le slide a mano con un programma di fotoritocco)

Naturalmente il web è strapieno di carousel e slideshow per Magento già pronti, magari basati su Bootstrap (mi permetto di segnalarne uno su tutti perché è free e perché merita: questo). Tuttavia, se non ci sono esigenze particolari, io sconsiglio sempre di installare plugin di terze parti per non appesantire eccessivamente il template, per evitare conflitti tra diverse estensioni e sopratutto per mantenere il controllo di quello che stiamo facendo.

 Credits photo: freedigitalphotos

Quella che voglio consigliare oggi è una validissima alternativa in jQuery ai vari servizi come AddThis o Sharethis comunemente usati per gestire i bottoni di condivisione sui social network all'interno di un sito web.
L'autore si chiama Artem Sapegin, ed è un talentuoso web developer di origine russa. Il pacchetto può essere scaricato da github e installato tramite Bower. Per i meno esperti c'è anche un editor visuale che genera il markup in tempo reale.

Pregi e difetti

Social likes è molto leggero, rallenta pochissimo il caricamento della pagina e non modifica in nessun modo l'URL. E' possibile scegliere fra tre diverse skin (orientabili in orizzontale o in verticale) o personalizzare interamente i bottoni tramite css. 

 Il più grosso difetto è rappresentato dal fatto che non supporta (ancora) molti social network. Permette infatti di condividere solo su facebook, twitter, google+, pinterest (e un social network russo che dubito vi servirà mai). E' tuttavia possibile aggiungere nuovi bottoni non presenti nativamente con jQuery

Istruzioni per l'uso

I parametri possono essere passati in modo semplice via data-attributes html5 oppure jQuery in questo modo:

DATA ATTRIBUTE:

class="social-likes" data-url="http://www.ilgattohanuovecode.it/blog/" data-title="titolo del post"

JQUERY:

$('.social-likes').socialLikes({
    url: 'http://www.ilgattohanuovecode.it/blog/',
    title: 'Titolo del post'
});

Lista dei parametri disponibili:

• url - indirizzo della pagina da condividere, di default è quella in cui si trova il bottone.
• title - il titolo della pagina, di default usa quello della pagina in cui si trova il bottone.
• counters - Abilita/disabilita il contatore dei like, che è abilitato di default.
• zeroes - Abilita il contatore anche se ci sono zero like.
• single title - E' la label del bottone.
• via - Solo per Twitter, tagga un account twitter al momento della condivisione.
• media - Solo per Pinterest, specifica l'url di un'immagine da condividere.

 Ovviamente tutti questi parametri possono essere passati anche dinamicamente.

Social Likes e Magento

Spesso a chi lavora con Magento viene richiesto permettere la condivisione sui social network della scheda prodotto direttamente dalla pagina di categoria. Per far fronte a questa esigenza Social Likes è particolarmente indicato in quanto ci permette di manipolare facilmente il markup tramite php e inserire dinamicamente i parametri che ci servono. Ecco, ad esempio, come integrare i nostri bottoni nella pagina di categoria di un tema Magento:

Di Final Cut Pro X si può dire quello che si vuole, alcuni lo amano alla follia, altri lo detestano. Su una cosa però dovrebbero essere d'accordo tutti: tra la lacunosissima versione 10.0.1 e i recenti upgrade c'è un abisso da tutti i punti di vista. Che il software sia in continuo aggiornamento, e che questi upgrade spesso incontrino le richieste degli utenti, fa ben sperare per il futuro.

Al contrario che nella versione 10.1.1, che in sostanza offriva solo alcune piccole correzioni al nuovo software appena uscito (dicembre 2013), nella versione 10.1.2 viene messa parecchia carne al fuoco, ed è forse il caso di andarsi a vedere punto per punto cosa è cambiato:

• Le Library Proprieties
• Cancellare i Generated Library Files
• Le novità nell'importazione: le Finder Tags diventano Keyword Collections
• Esportazione selettiva in XML

• Gli Unused Media
• Le innovazioni audio: Adjust Volume in modalità Relative e in nuovo Record Voiceover
• Le novità nell'esportazione: Apple Prores 4444 XQ e upload Vimeo in 4K
• Break Apart Clip Items anche per le Auditions
• Il nudging determina uno slide edit
• Corretto un bug con i keyframes in modalità smooth

Sempre più spesso la musica su youtube è accompagnata dai testi delle canzoni, che compaiono in perfetta sincronia con la voce cantante. Realizzare un effetto del genere sembra un'operazione scontata, ma quando ci apprestiamo a comporre un titolo su Final Cut Pro X, ci accorgiamo che non è possibile applicare effetti e transizioni ad una sola delle parole che lo compongono. Ecco un trucco per sincronizzare voce e testo in un video con l'uso (quasi esclusivo) di Final Cut Pro X e la breve ("una tantum") collaborazione di Motion 5. 

• Creare un Final Cut Title con Motion 5
• Usare il behaviour Fade Words In
• La cartella Motion Templates
• Usare i keyframes di Final Cut Pro X per sincronizzare il testo
• Rinfinire il lavoro nella finestra Video Animation

Sincronizzare più angolazioni di ripresa ci permette di montare le riprese di un evento in Final Cut Pro X come se fossimo seduti davanti alla regia mobile di un service video. In questo tutorial esploreremo tutto quello che di essenziale c'è da sapere sulle multicam clips:

• Creare una nuova Multicam Clip
• Show Angles nel Viewer e in Timeline

• Sincronizzazione manuale delle clip
• Dentro ad una Multicam Clip: l'Angle Editor e il Monitoring Angle
• Inserire gli effetti in una Multicam Clip
• Le innovazioni introdotte nella versione 10.1 di Final Cut

Purtroppo Final Cut Pro X utilizza una versione di XML diversa rispetto a quella usata da software come Premiere o come le vecchie versioni di Final Cut, la cui estensione non è appunto .xml, ma .fcpxml. Le due versioni di XML non sono compatibili: Final Cut Pro X può importare ed esportare solo file .fcpxml e Final Cut Pro 7 può importare ed esportare solo file .xml. Per permettere agli utenti di passare un progetto da un software all'altro, Apple ha quindi deciso di distribuire (a pagamento) un'applicazione che permette di convertire i file .xml in file .fcpxml. L'utilizzo è molto semplice ed è descritto approfonditamente in questo video:

• Perché è necessario usare 7toX
• Esportare in XML da Final Cut Pro 7
• La conversione con 7toX
• Aprire il progetto, sotto forma di Compound Clip, in Final Cut Pro X
• Da Final Cut 7 a Final Cut Pro X: cosa può essere "tradotto" e cosa no

Spesso mi capita di vedere siti di e-commerce in cui il form per l'accesso e la registrazione degli utenti si apre in una finestra modale. Un esempio illustre è Zalando.

Come possiamo ottenere questo risultato con Magento e Bootstrap?

Sappiamo che per realizzare una finestra modale con Bootstrap è necessario utilizzare i data attributes html5 [qui la documentazione], ma i link 'accedi' e 'registrati' sono gestiti in Magento dai toplinks. Le istruzioni per manipolare questo particolare blocco sono distribuite tra i vari fogli .xml del template, non troverete da nessuna parte un con file il codice html del menu quindi non è possibile inserire i data attributes nel template phtml come faremmo con qualsiasi altro link di qualsiasi altro menù.

Come risolvere? La prima idea che ci viene in mente è quella di sostiture l'intero blocco dei toplinks con un blocco nuovo realizzato ad hoc ma non è una soluzione tanto efficace perchè ci toccherebbe fare due blocchi diversi per l'utente registrato e per l'utente ospite (non avrebbe senso mostrare a un utente già loggato il link accedi, si farebbe solo confusione).

La soluzione che secondo me funziona meglio è andare ad editare direttamente le istruzioni xml.

E' buona norma non avere mai più di un file xml all'interno del template [approfondisci], quindi nel nostro local.xml scriviamo:

<customer_logged_out>
    <reference name="top.links"> 
       <action method="removeLinkByUrl"><url helper="customer/getLoginUrl"/></action> 
       <action method="removeLinkByUrl"><url helper="customer/getAccountUrl"/></action> 
       <action method="addLink" translate="label title" module="wishlist">
       <label>My account</label>
       <url>#</url>
       <title>My account</title>
       <prepare/><urlParams/>
       <position>1</position>
       <li/><a>data-toggle="modal" data-target="#modal-login"</a>
       </action>
    </reference>
</customer_logged_out>

E' questo è l'output (direttamente da firebug):

Non ci resta che duplicare i seguenti file:

customer/form/login.phtml
customer/form/register.phtml

customizzarli a piacere e farli diventare i target della nostra modale.

Avremo anche per i video quello che da sempre abbiamo avuto per i file di testo e i progetti di elaborazione immagini, ovvero un unico grande file progetto indipendente da tutto quello che gli è esterno? Pare proprio che il futuro sia questo e che le libraries di Final Cut Pro 10.1 siano un passo in questa direzione. 

Vediamo come funzionano in questa semplice ma esaustiva video guida:

• La differenza tra un file .psd e un progetto di Final Cut Pro 7
• Che cos'è una library?
• Original media e generated media
• Importare managed media o external media

• Libraries, events e projects
• Spostare o copiare elementi all'interno o all'esterno di una library
• Consolidate (projects, events o libraries) all'interno o all'esterno di una library