Pe marginea de tăiere cu marginea Adobe

Una dintre cele mai mari surse de buzz din ultima săptămână a fost anunțul Adobe despre previzualizarea Edge. Oamenii au vorbit despre asta foarte mult, dar puțini par să înțeleagă cu adevărat unele dintre ideile sau tehnologia din spatele acestui fapt.

Astăzi, aș vrea să vorbesc puțin despre previzualizarea Edge și de ce ar trebui să fii optimist cu prudență în această situație.


O mică istorie

Crearea de conținut utilizând o abordare bazată pe standarde este dificilă. Aici intră Edge.

Nasterea si istoria fulgerului pot face o citire foarte confuza: este incredibil de iubita sau de ura in functie de cine vorbesti. Faptul incontestabil este că Flash este unul dintre motivele principale care stau la baza proliferării conținutului video și interactiv pe web. Pe de altă parte, este criticat pentru natura sa închisă și problemele de performanță.

În timp ce platforma în sine nu merge nicăieri în viitorul apropiat, nu puteți să nu observați că reținerea Flash pe web a fost slăbită în ultima vreme.

Calculează creșterea HTML5 și un număr din ce în ce mai mare de dezvoltatori care adoptă standarde deschise sau o anumită companie cu aromă de fructe care conduce o cruciadă împotriva Flash, linia de jos este că web-ul a căutat o alternativă deschisă, bazată pe standarde la Flash, pentru ceva acum. Unul dintre motivele majore pentru sosirea și creșterea popularității HTML5 împreună cu bibliotecile precum jQuery poate fi atribuită antagonismului și apatiei față de platforma Flash.

Crearea de conținut cu noile tehnologii a fost departe de a fi netedă. Aici intră Edge.


Ce este Edge?

Edge este încercarea Adobe de a fi relevantă în lumea post-Flash.

Edge este prezentat ca un instrument de animație ideal pentru designerii care doresc să creeze conținut web plin de animații, dar pe baza standardelor deschise care susțin web-ul. Potrivit site-ului lor:

Adobe Edge este un nou instrument web de mișcare și interacțiune care permite proiectanților să aducă conținut animat pe site-uri web, folosind standarde web precum HTML5, JavaScript și CSS3.

Practic, Edge este biletul tău pentru a adăuga conținut animat fără a fi nevoie să recurgi la pluginuri externe precum Flash sau Silverlight.


Chiar avem nevoie de un alt instrument?

În acest caz, da, da!

Mă simt cu siguranță. Înainte de a vă căuta furculițele, permiteți-mi să vă explic!

Dezvoltatorii Flash au acces la instrumente de proiectare foarte mature și foarte sofisticate. Doriți să creați o animație simplă? Câteva clicuri aici, câteva intrări acolo și ați terminat! Ei chiar se bucură de utilizarea unui mediu complet atunci când vine vorba de a crea conținutul lor.

Ce se întâmplă atunci când doriți să mergeți pe baza standardelor?

Nu e așa ușor, pot să-ți spun foarte mult. Trebuie sa te intorci cu codul, sa inveti putin JavaScript, sa te plictisesti, sa inveti sa folosesti o biblioteca ca jQuery, sa te excitati din nou si apoi sa afli ca tot trebuie sa codizi fiecare animatie.

În timp ce este ok pentru noi tipuri de dev, este mult mai mult o sarcină pentru designerii artistii. Dezvoltarea bazată pe standarde nu trebuie să fie greu! Îmi dau seama că dezvoltatorii întreprinzători au venit cu soluții pentru acestea, dar nici unul nu a apărut de la marile companii mare conţinut.

Edge încearcă să eficientizeze acest proces prin reutilizarea conceptelor comune ale creației media, cum ar fi termenele și etapele, pentru a face curba de învățare mai ușoară, mai ușoară și, astfel, mai accesibilă.


Afișări inițiale

Previzualizarea este o descărcare de 65MB și se instalează destul de repede. Obținerea accesului la descărcare necesită însă un cont Adobe. Este gratuit, sigur, dar adaugă un pas inutil în acest proces. 1999 numiți, își doresc înregistrarea frivolă înapoi.

Și, dacă încă mai pierdeți unde să descărcați copia dvs., o puteți obține aici.


Interfața

Primele impresii ale previzualizării sunt destul de pozitive. Arată curată, compusă și curată. Dacă ați folosit GoLive în trecut sau chiar Flash, interfața ar trebui să pară mai degrabă familiară.

etapă sau pânză acționează ca primul DIV și când adăugați elemente în pânză, acestea sunt adăugate ierarhic, cu tipul de element afișat pe lateral.

Panoul temporal este una din porțiunile cheie ale oricărei suite de animație, iar Edge nu dezamăgește. Întreaga porțiune inferioară a interfeței este dominată de panoul temporal.

Puteți vedea toate proprietățile elementelor pe care le-ați adăugat până acum pe panza din linia de timp. Crearea unei animații este la fel de simplă ca adăugarea unui cadru cheie, furnizarea acestuia cu informațiile pentru cadru și Edge va completa lucrările de odihnă după cum era de așteptat, excelent.


Funcționalitatea versiunii curente de examinare

Această previzualizare este în mod evident în modul alfa - prima preocupare a previzualizării se concentrează pe adăugarea unor forme și animații simple. Asta e aproape tot ceea ce există și în interfață.

Utilizatorii pot adăuga text, imagini și forme simple cu relativ ușurință - doar punct, faceți clic și trageți. De asemenea, puteți personaliza caracteristicile asortate ale conținutului, inclusiv culoarea, curbarea, opacitatea, rotația și multe altele. Uitați-vă imediat la imaginea de mai jos pentru a obține o idee despre ceea ce vorbesc. Dacă ați fost deja prezentat în software-ul de animație în trecut, ar trebui să vă simțiți ca acasă.

De asemenea, puteți importa materiale preimagine, inclusiv imagini, în panza actuală.


Sub capotă

Deoarece acest lucru nu este cu adevărat un tutorial cu privire la modul de utilizare Edge, am de gând să săriți înainte și să descărcați o demonstrație premade pe care o puteți obține de aici.

Să aruncăm o privire asupra structurii de directoare a unui proiect Proiect Edge:

Nu sunt surprize aici. Animațiile dvs. sunt acum create din trifecta dvs. familiară de tehnologii web - HTML, CSS și JavaScript.

Spre deosebire de opinia populară, Edge folosește o combinație de jQuery și CSS3 pentru a anima conținutul pânzei sale. Da, ați auzit acest drept - jQuery face o grămadă de muncă în spatele Edge.

Săpând codul cu Firebug, veți observa că există multe elemente DIV care se deplasează cu jQuery. De exemplu, aici este codul real care este injectat în exemplul pe care l-am legat mai sus. Nu este destul de drăguț.

Practic, orice animație pe care CSS3 o poate face este lăsată la iveală, deoarece toate efectele CSS3 sunt accelerate hardware și, astfel, vor funcționa bine. Restul este lăsat să se ocupe de jQuery.

Săriți mai mult în cod, veți vedea că toate elementele dvs., proprietățile, informațiile de îmbunătățire și restul sunt stocate ca fișier JSON. Presupun că motorul analizează în mod esențial această informație și construiește DOM-ul și îi atașează pe cei care manipulează.

Ca un experiment rapid, să vedem ce vede browserul:

Uh, oh. Nu există literalmente nimic care să facă simțul semantic acolo. Dezactivați JavaScript și veți rămâne cu o pată mare de nimic. Ventilatoare de degradare grațioasă, ia-ți furcă.


În cazul în care Heck este HTML5?

Este comercializat ca un instrument HTML5 și bine? acest lucru nu este alimentat de HTML5. Inca.

M-am dus în așteptarea de a fi orbit de splendoarea pânzei sau SVG. După o privire la DOM, este destul de evident că nu există nici măcar un pic de acolo. Doar pentru a vă asigura că am făcut o căutare rapidă a fișierelor JavaScript care caută cuvântul cheie asociat canvasului, getContext . Inutil să spun, nimic nu sa întâmplat. Cea mai mare pată de HTML5 aici este doctype. Sigur, puteți importa conținut SVG, dar nu puteți atinge marcajul, deci este un punct moo.

Este puțin cam încurcat de ce Edge nu folosește nicio tehnologie modernă. În caz contrar, este comercializat ca un instrument HTML5 și bine? acest lucru nu este alimentat de HTML5. Marketing necinstit sau semne de caracteristici care vor veni? Mă înclinăm spre acesta din urmă în timp ce într-adevăr, sperând cu adevărat că primul nu este adevărat.


Este această abordare cea mai bună opțiune de mișcare înainte?

nope.

Din perspectiva dezvoltării, animarea DIV-urilor este echivalentul folosirii tabelelor pentru aspect - funcționează dar cu prețul eleganței și semanticii. Canvas și SVG sunt proiectate cu precizie pentru a face exact ceea ce face Edge aici și au mai mult sens pe termen lung.

Chiar dacă performanța canvasului se află pe dispozitivele mobile curente, nu există nicio modalitate pentru performanță să meargă decât în ​​sus și nu ar trebui să împiedice adoptarea de noi tehnologii.

În timp ce v-ar plăcea în mod ideal să vedeți aplicații de ultimă oră care utilizează tehnologii de ultimă generație similare, rețineți că aceasta este încă o previzualizare, o versiune timpurie alfa.

În cuvintele unuia dintre inginerii din spatele Edge privind animația bazată pe DIV:

Am început cu DIV-urile pentru că am vrut să obținem rapid ceva cu care oamenii s-ar putea juca. Spun că am început "pentru că Edge va evolua rapid - produsul nu este în nici un caz o caracteristică completă.

E un pic încurajator! În timp ce sunt dezamăgit de inițiativa lor, vedeți ce se apropie de bastoane, este bine să știți că acesta este felul în care acestea pun în pericol lucrurile, nu modul în care intenționează să facă lucrurile în cele din urmă.


Amintiți-vă, aceasta este încă o previzualizare

Gandurile de mai sus pot sa dispara ca un pic negativ, dar asta nu este intentia mea. Eu și restul comunității, am speranțe mari pentru acest instrument și, prin urmare, așteptări foarte mari.

Și Adobe din partea lor nu se înghesuie în jur. Ele lucrează deja la feedback-ul oferit de comunitate până în prezent și au o foaie de parcurs pentru viitoarele versiuni.

Având în vedere că Adobe adoptă standarde deschise și că se concentrează pe producerea de instrumente creative în locul platformelor de aplicație în cutie, nu pot să simt că se află pe calea de a deveni la fel de relevant pentru progresul pe Internet așa cum au fost în trecut în timpul înălțime de bliț.

Spuneți-ne cum vă simțiți despre previzualizarea Edge în comentariile și vă mulțumesc foarte mult pentru citire!

Cod