Share
Una delle maggiori fonti di interesse della scorsa settimana è stata l'annuncio di Adobe dell'anteprima Edge. La gente ne ha parlato molto, ma pochi sembrano cogliere davvero alcune delle idee o della tecnologia alla base di questo.
Oggi vorrei parlarvi un po 'dell'anteprima di Edge e perché dovreste essere cautamente ottimisti in questo frangente.
Creare contenuti utilizzando un approccio basato su standard è difficile. È qui che entra Edge.
La nascita e la storia di Flash possono creare una lettura molto, molto confusa: è incredibilmente amata o odiata a seconda di chi si parla. Il fatto innegabile è che Flash è una delle ragioni principali della proliferazione di video e media interattivi sul web. Il rovescio della medaglia, è criticato per la sua natura chiusa e problemi di prestazioni.
Mentre la piattaforma stessa non sta andando da nessuna parte nel prossimo futuro, non puoi fare a meno di notare che la tenuta di Flash sul Web si è allentata ultimamente.
Ricalcola l'ascesa di HTML5 e un numero crescente di sviluppatori che abbracciano standard aperti o una certa azienda aromatizzata alla frutta che conduce una crociata contro Flash, la linea di fondo è che il web ha cercato un'alternativa aperta e basata su standard per Flash per qualche ora. Uno dei motivi principali per l'arrivo e l'aumento della popolarità di HTML5 insieme a librerie come jQuery può essere attribuito all'antagonismo e all'apatia nei confronti della piattaforma Flash.
La creazione di contenuti con le nuove tecnologie è stata tutt'altro che semplice. È qui che entra Edge.
Edge è il tentativo di Adobe di essere rilevante nel mondo post-Flash.
Edge è pubblicizzato come uno strumento di animazione ideale per i progettisti che desiderano creare contenuti Web pieni di animazioni ma basati sugli standard aperti che sostengono il web. Secondo il loro sito:
Adobe Edge è un nuovo strumento di web motion e interaction design che consente ai designer di portare contenuti animati ai siti Web, utilizzando standard Web come HTML5, JavaScript e CSS3.
Fondamentalmente, Edge è il tuo biglietto per aggiungere contenuti animati senza dover ricorrere a plugin esterni come Flash o Silverlight.
In questo caso, oh, sì, lo facciamo!
Sicuramente mi sento così. Prima di cercare i tuoi forconi, lasciami spiegare!
Gli sviluppatori Flash hanno accesso a strumenti di progettazione molto maturi e molto sofisticati. Vuoi creare una semplice animazione? Qualche clic qui, alcuni input e il gioco è fatto! Godono davvero l'uso di un ambiente completo quando si tratta di creare il proprio contenuto.
Cosa succede quando vuoi seguire il metodo basato sugli standard?
Non è così facile, posso dirti questo. Devi curiosare con il codice, imparare un po 'di JavaScript, annoiarti, imparare a usare una libreria come jQuery, eccitarti di nuovo e poi scoprire che hai ancora a portata di mano ogni singola animazione.
Mentre è ok per noi tipi di sviluppo, è molto più di un compito per i designer artistici. Lo sviluppo basato su standard non deve essere necessariamente difficile! Mi rendo conto che gli sviluppatori intraprendenti hanno escogitato soluzioni per questi, ma nessuno è apparso dai pezzi grossi di grande soddisfare.
Edge cerca di semplificare questo processo riutilizzando concetti comuni di creazione dei media come timeline e fasi per rendere la curva di apprendimento più dolce, più facile e quindi più accessibile.
L'anteprima è uno snello download da 65MB e si installa abbastanza rapidamente. L'accesso al download richiede però un account Adobe. È gratuito, certo, ma aggiunge un passaggio non necessario al processo. 1999 chiamato, vogliono indietro le loro iscrizioni frivole.
E, oh, se sei ancora perso da dove scaricare la tua copia, puoi ottenerla qui.
Le prime impressioni dell'anteprima sono abbastanza positive. Sembra pulito, composto e sgombro. Se hai già utilizzato GoLive in passato o anche Flash, l'interfaccia dovrebbe sembrare per lo più familiare.
Il palcoscenico o tela agisce come primo DIV e quando aggiungi elementi al tuo quadro, vengono aggiunti gerarchicamente con il tipo di elemento visualizzato sul lato.
Il riquadro della timeline è una delle parti chiave di qualsiasi suite di animazione e Edge non delude. L'intera parte inferiore dell'interfaccia è dominata dal riquadro della timeline.
Puoi visualizzare tutte le proprietà degli elementi che hai aggiunto fino all'area di disegno nella timeline. Creare un'animazione è semplice come aggiungere un fotogramma chiave, fornirlo con le informazioni per il fotogramma e Edge si occuperà del resto - l'interpolazione funziona come previsto, in modo eccellente.
Questa anteprima è ovviamente in modalità alfa - l'obiettivo principale della prima anteprima è l'aggiunta di forme e animazioni semplici. Questo è praticamente tutto ciò che è presente nell'interfaccia pure.
Gli utenti possono aggiungere testo, immagini e forme semplici con relativa facilità: basta puntare, fare clic e trascinare. È inoltre possibile personalizzare le caratteristiche assortite del contenuto, tra cui colore, inclinazione, opacità, rotazione e molto altro. Dai un'occhiata veloce all'immagine qui sotto per avere un'idea di cosa sto parlando. Se sei stato introdotto in passato nel software di animazione, dovresti sentirti a casa.
Puoi anche importare asset premaded, incluse le immagini, nel tuo attuale canvas.
Poiché questo non è davvero un tutorial su come usare Edge, ho intenzione di saltare avanti e scaricare una demo di premade che puoi ottenere da qui.
Diamo un'occhiata alla struttura delle directory di un progetto Edge di esempio:
Nessuna sorpresa qui. Le tue animazioni sono ora create dalla tua familiare familiarità con le tecnologie web: HTML, CSS e JavaScript.
Contrariamente all'opinione popolare, Edge usa un mix di jQuery e CSS3 per animare il contenuto della sua tela. Sì, hai sentito bene - jQuery fa molto lavoro da grugnito dietro Edge.
Scavando nel codice con Firebug, noterai che ci sono molti elementi DIV che vengono spostati con jQuery. Ad esempio, ecco il codice reale che viene iniettato nell'esempio che ho collegato sopra. Non del tutto carino.
Fondamentalmente, qualsiasi animazione che CSS3 può fare è lasciata a questo poiché tutti gli effetti CSS3 sono accelerati dall'hardware, e quindi funzioneranno bene. Il resto è lasciato a jQuery da gestire.
Scavando ulteriormente nel codice, vedrai che tutto il tuo elemento, le sue proprietà, le informazioni di interpolazione e il resto sono memorizzati come file JSON. Suppongo che il motore analizzi in pratica queste informazioni e costruisca il DOM e allega i gestori.
Come esperimento veloce, diamo un'occhiata a ciò che vede il browser:
Uh Oh. Non c'è letteralmente nulla che abbia senso semantico. Disabilita JavaScript e ti rimane una grande quantità di nulla. I fan di un degrado aggraziato, prendi i tuoi forconi.
Viene commercializzato come strumento HTML5 e bene? questo non è basato su HTML5. Ancora.
Sono andato in attesa di essere abbagliato dallo splendore della tela o SVG. Dopo uno sguardo al DOM, è abbastanza evidente che non c'è nemmeno un pezzettino di entrambi. Per sicurezza, ho fatto una rapida ricerca dei file JavaScript alla ricerca della parola chiave relativa al canvas, getContext . Inutile dire che non è successo nulla. Il più grande blob di HTML5 qui è il doctype. Certo, puoi importare i contenuti SVG ma non puoi toccare il markup quindi è un punto moo.
È un po 'strano perché Edge non usi nessuna delle tecnologie moderne. Se mai, è stato commercializzato come strumento HTML5 e bene? questo non è basato su HTML5. Marketing insensato o segni di caratteristiche a venire? Mi sto appoggiando a quest'ultimo mentre davvero, davvero sperando che il primo non sia vero.
no.
Dal punto di vista dello sviluppo, l'animazione dei DIV è l'equivalente dell'uso di tabelle per il layout, ma a costo di eleganza e semantica. Canvas e SVG sono progettati con precisione per fare esattamente ciò che Edge fa qui e hanno più senso nel lungo periodo.
Anche se le prestazioni della tela sono minacciose sugli attuali dispositivi mobili, non c'è modo che le prestazioni possano andare avanti, ma in realtà non dovrebbe ostacolare l'adozione della nuova tecnologia.
Mentre uno preferirebbe vedere le applicazioni all'avanguardia utilizzare effettivamente tecnologie analoghe all'avanguardia, tieni presente che questa è ancora un'anteprima, una versione alfa precoce.
Nelle parole di uno degli ingegneri di Edge riguardo all'animazione basata su DIV:
Abbiamo iniziato con i DIV perché volevamo ottenere qualcosa là fuori in fretta con cui la gente potesse giocare. Dico che abbiamo iniziato lì perché Edge si evolve rapidamente: il prodotto non è affatto completo.
È un po 'incoraggiante! Mentre sono deluso dalla loro iniziale, vedi che approccio si attacca, è bello sapere che questo è solo il modo in cui stanno dando il via alle cose, non come hanno in programma di fare le cose alla fine.
I pensieri sopra possono sembrare un po 'negativi, ma non è mia intenzione. Io e il resto della comunità nutriamo grandi speranze per questo strumento e quindi aspettative molto alte.
E Adobe da parte loro non sta oziando in giro. Stanno già lavorando al feedback fornito dalla comunità finora e hanno una road map in atto per le versioni future.
Con Adobe che abbraccia gli standard aperti e si concentra sulla produzione di strumenti creativi invece di piattaforme applicative inscatolate, non posso fare a meno di sentire che sono sulla strada per diventare rilevanti per il progresso del web come lo erano in passato durante il altezza del flash.
Facci sapere come ti senti sull'anteprima di Edge nei commenti e ti ringrazio tanto per la lettura!
Accentsconagua