Share
En av de største kildene til buzz denne uken har vært Adobes kunngjøring av Edge forhåndsvisning. Folk har snakket mye om det, men få synes å virkelig forstå noen av ideene eller teknologien bak dette.
I dag vil jeg gjerne snakke litt om Edge forhåndsvisning og hvorfor du bør være forsiktig optimistisk på dette tidspunktet.
Å lage innhold ved hjelp av en standardbasert tilnærming er vanskelig. Dette er hvor Edge kommer inn.
Flashs fødsel og historie kan gjøre for en veldig, veldig forvirrende lese: det er utrolig elsket eller hatet avhengig av hvem du snakker med. Det ubestridelige faktum er at Flash er en av hovedgrunnene til spredning av video og interaktive medier på nettet. På baksiden er det kritisert for sine lukkede natur- og ytelsesproblemer.
Selv om plattformen selv ikke går overalt i nær fremtid, kan du ikke unngå å legge merke til at Flashs hold på nettet har gått løs på det siste.
Kalk det opp med økningen av HTML5 og et økende antall utviklere som omfatter åpne standarder eller et bestemt fruktsmakket selskap som fører en korstog mot Flash, nederst på siden er at nettet har latt etter et åpent, standardbasert alternativ til Flash for en gang nå. En av de store grunnene til ankomst og økning i HTML5-popularitet, sammen med biblioteker som jQuery, kan tilskrives antagonisme og apati mot Flash-plattformen.
Å skape innhold med den nye teknologien har imidlertid vært langt fra jevn. Dette er hvor Edge kommer inn.
Edge er Adobes forsøk på å være relevant i post-Flash-verdenen.
Edge er spioneringen som et animasjonsverktøy som er ideelt for designere som ønsker å lage webinnhold fylt med animasjoner, men basert på åpne standarder som støtter opp på nettet. Ifølge deres nettsted:
Adobe Edge er et nytt verktøy for webbevegelse og interaksjonsdesign som gjør at designere kan bringe animert innhold til nettsteder, ved hjelp av webstandarder som HTML5, JavaScript og CSS3.
I utgangspunktet er Edge din billett for å legge til animert innhold uten å måtte ty til eksterne plugins som Flash eller Silverlight.
I dette tilfellet, å, ja, det gjør vi!
Jeg føler meg så sikkert. Før du ser etter dine pitchforks, la meg forklare!
Flash-utviklere har tilgang til svært modne og svært sofistikerte designverktøy. Vil du lage en enkel animasjon? Noen få klikk her, noen innspill der og du er ferdig! De liker virkelig bruk av et komplett miljø når det gjelder å forfatter innholdet.
Hva skjer når du ønsker å gå standard basert måte?
Det er ikke så lett, jeg kan fortelle deg så mye. Du må poke rundt med kode, lære litt JavaScript, kjede deg, lære å bruke et bibliotek som jQuery, bli begeistret igjen og finn ut at du fortsatt må legge til koden hver eneste animasjon.
Mens det er greit for oss dev-typer, er det mye mer en rolle for artsy-designerne. Standardsbasert utvikling trenger egentlig ikke å være vanskelig! Jeg skjønner at initiativrike utviklere har kommet opp løsninger for disse, men ingen har dukket opp fra bigwigs av stor innhold.
Edge forsøker å strømlinjeforme denne prosessen ved å gjenbruke vanlige begreper for medieopprettelse som tidslinjer og faser for å gjøre lærekurven mer mykere, enklere og dermed mer tilgjengelig.
Forhåndsvisning er en svelte 65MB nedlasting og installerer ganske raskt. Å få tilgang til nedlastingen krever imidlertid en Adobe-konto. Det er gratis, sikkert, men legger et unødvendig skritt i prosessen. 1999 ringte, de vil ha sine frivoløse registreringer tilbake.
Og oh, hvis du fortsatt er tapt når du skal laste ned din kopi, kan du få det her.
Førstehåndsinntrykket av forhåndsvisningen er ganske positivt. Det ser rent, sammensatt og ryddig ut. Hvis du har brukt GoLive i fortiden, eller til og med Flash, bør grensesnittet se mest kjent ut.
De scene eller lerret fungerer som den første DIV, og når du legger til elementer i lerretet ditt, blir de lagt hierarkisk sammen med typen element som vises på siden.
Tidslinjepanelet er en av nøkkeldelene til en animasjonspakke, og Edge skuffer ikke. Hele den nedre delen av grensesnittet domineres av tidslinjepanelet.
Du kan se alle egenskapene til elementene du har lagt til så langt til lerretet på tidslinjen. Å lage en animasjon er like enkelt som å legge til en keyframe, forsyne den med info for rammen, og Edge vil fylle ut resten - tweening fungerer som forventet, utmerket.
Denne forhåndsvisningen er åpenbart i alfa-modus - den første forhåndsvisningens hovedfokus er å legge til enkle former og animasjoner. Det er ganske mye alt det er tilstede i grensesnittet også.
Brukere kan legge til tekst, bilder og enkle former med relativt enkelhet - bare pek, klikk og dra. Du kan også tilpasse ulike karakteristika av innholdet, inkludert farge, skjevhet, opasitet, rotasjon og mye mer. Ta en rask titt på bildet nedenfor for å få en ide om hva jeg snakker om. Hvis du i det hele tatt har blitt introdusert til animasjonsprogramvare, burde du føle deg hjemme.
Du kan også importere premade eiendeler, inkludert bilder, til ditt nåværende lerret.
Siden dette ikke egentlig er en veiledning om hvordan du bruker Edge, kommer jeg til å hoppe videre og laste ned en premade demo som du kan komme herfra.
La oss ta en titt på katalogstrukturen til et utvalg Edge-prosjekt:
Ingen overraskelser her. Animasjonene dine er nå opprettet fra din velkjente trifekta av webteknologier - HTML, CSS og JavaScript.
I motsetning til populær mening bruker Edge en blanding av jQuery og CSS3 for å animere innholdet i lerretet. Ja, du hørte det riktig - jQuery gjør mye av det grunne arbeidet bak Edge.
Ved å grave inn koden med Firebug, vil du legge merke til at det er mange DIV-elementer som flyttes rundt med jQuery. For eksempel, her er den faktiske koden som injiseres i eksemplet jeg koblet over. Ikke helt pen.
I utgangspunktet er det noen animasjoner som CSS3 kan gjøre, siden alle CSS3-effekter er maskinvare akselerert, og dermed vil fungere bra. Resten er igjen for jQuery å håndtere.
Grave videre inn i koden, vil du se at alt elementet, egenskapene, tweening-informasjonen og resten er lagret som en JSON-fil. Jeg antar at motoren i utgangspunktet analyserer denne informasjonen og konstruerer DOM og legger til håndteringsenhetene.
Som et raskt eksperiment, la oss se på hva nettleseren ser:
UH oh. Det er bokstavelig talt ingenting som gjør semantisk følelse der inne. Deaktiver JavaScript, og du er igjen med en stor blob av ingenting. Fans av grasiøs nedbrytning, få dine pitchforks.
Det blir markedsført som et HTML5-verktøy og bra? Dette er ikke HTML5 drevet. Ennå.
Jeg gikk inn og ventet å bli blendet av prakten av lerret eller SVG. Etter en titt på DOM, er det ganske tydelig at det ikke engang er en liten bit av enten der inne. Bare for å være sikker gjorde jeg et raskt søk på JavaScript-filene som søkte etter lerretrelatert søkeord, getContext . Unødvendig å si, ingenting kom opp. Den største blob av HTML5 her er doktypen. Visst, du kan importere SVG-innhold, men du kan ikke røre oppmerkningen, så det er et moo-punkt.
Det er litt uklart hvorfor Edge ikke bruker noen av de moderne teknologiene i stedet. Hvis noe, blir det markedsført som et HTML5-verktøy og bra? Dette er ikke HTML5 drevet. Disingenuous markedsføring eller tegn på funksjoner som kommer? Jeg lener meg mot sistnevnte mens jeg virkelig håper at den tidligere ikke er sant.
Nei.
Fra et utviklingsperspektiv er animasjonsdivisjoner tilsvarende å bruke tabeller for layout - det virker, men på bekostning av eleganse og semantikk. Lerret og SVG er presis konstruert for å gjøre akkurat hva Edge gjør her og gjøre mer fornuftig i det lange løp.
Selv om lerret ytelse er piddling på dagens mobile enheter, er det ingen måte for forestillingen å gå, men det burde ikke hindre vedtaket av ny teknologi.
Mens man ideelt sett vil se at banebrytende apps faktisk bruker lignende banebrytende teknologier, husk at dette fortsatt er en forhåndsvisning, en tidlig alfa-versjon.
I ordene til en av ingeniører bak Edge angående DIV-basert animasjon:
Vi startet med DIV fordi vi ønsket å få noe der ute raskt som folk kunne leke med. Jeg sier at vi startet det fordi Edge vil utvikle seg raskt - produktet er på ingen måte komplett.
Det er litt oppmuntrende! Mens jeg er skuffet over deres opprinnelige, se hvilke pinner tilnærming, er det godt å vite at dette er bare hvordan de sparker av ting, ikke hvordan de planlegger å gjøre ting til syvende og sist.
Tankene ovenfor kan komme som et lite negativt, men det er ikke min hensikt. Jeg, og resten av samfunnet, har høye forventninger til dette verktøyet og dermed svært høye forventninger.
Og Adobe fra deres side snakker ikke rundt. De jobber allerede med tilbakemeldingene fra samfunnet så langt og har et veikart på plass for fremtidige versjoner.
Med Adobe omfavner åpne standarder og fokuserer på å produsere kreative verktøy i stedet for innrammede applikasjonsplattformer, kan jeg ikke hjelpe, men føler at de er på vei mot å bli like relevante for fremdriften av nettet som de var tidligere i løpet av høyde på Flash.
Gi oss beskjed om hvordan du føler om Edge forhåndsvisning i kommentarene og takk så mye for å lese!
Accentsconagua