Share
Een van de grootste bronnen van buzz van afgelopen week was de aankondiging door Adobe van de Edge-preview. Mensen hebben er vaak over gesproken, maar weinigen lijken echt een paar van de ideeën of technologie achter dit te bevatten.
Vandaag wil ik met je praten over de Edge-preview en waarom je voorzichtig optimistisch moet zijn op dit moment.
Het maken van content met behulp van een op standaarden gebaseerde aanpak is moeilijk. Dit is waar Edge binnenkomt.
De geboorte en de geschiedenis van Flash kunnen een heel, heel verwarrende lees geven: het is ongelooflijk geliefd of gehaat afhankelijk van met wie je spreekt. Het onmiskenbare feit is dat Flash een van de belangrijkste redenen is voor de verspreiding van video- en interactieve media op internet. Aan de andere kant wordt het bekritiseerd vanwege de gesloten aard en prestatieproblemen.
Hoewel het platform zelf in de nabije toekomst nergens heen gaat, kan het niet anders dan vaststellen dat de greep van Flash op internet de laatste tijd losser is geworden..
Neem het op tegen de opkomst van HTML5 en een groeiend aantal ontwikkelaars die open standaarden omarmen of een bepaald bedrijf met fruitsmaak leiden een kruistocht tegen Flash, de bottomline is dat het web al een tijdje op zoek is naar een open, op standaarden gebaseerd alternatief voor Flash. Een van de belangrijkste redenen voor de komst en toename van populariteit van HTML5, samen met bibliotheken zoals jQuery, kan worden toegeschreven aan antagonisme en apathie ten opzichte van het Flash-platform.
Het creëren van content met de nieuwe technologieën is echter verre van soepel verlopen. Dit is waar Edge binnenkomt.
Edge is de poging van Adobe om relevant te zijn in de post-Flash wereld.
Edge wordt aangeprezen als een animatietool dat ideaal is voor ontwerpers die webinhoud willen maken met animaties, maar die gebaseerd zijn op de open standaarden die het web ondersteunen. Volgens hun site:
Adobe Edge is een nieuwe ontwerptool voor webbewegingen en interactie waarmee ontwerpers geanimeerde inhoud naar websites kunnen brengen, met behulp van webstandaarden zoals HTML5, JavaScript en CSS3.
Kort gezegd is Edge uw ticket voor het toevoegen van geanimeerde inhoud zonder toevlucht te nemen tot externe plug-ins zoals Flash of Silverlight.
In dit geval, o ja, dat doen we!
Ik voel het zeker. Voordat je naar je hooivorkjes op zoek gaat, laat ik het je uitleggen!
Flash-ontwikkelaars hebben toegang tot zeer volwassen en zeer geavanceerde ontwerptools. Wil je een eenvoudige animatie maken? Een paar klikken hier, wat invoer daar en je bent klaar! Ze genieten echt van het gebruik van een complete omgeving als het gaat om het schrijven van hun inhoud.
Wat gebeurt er als je op een standaard gebaseerde manier wilt gaan?
Het is niet zo eenvoudig, dat kan ik je wel vertellen. Je moet rondneuzen met code, een beetje JavaScript leren, je verveelt, leren om een bibliotheek te gebruiken zoals jQuery, weer enthousiast worden en dan ontdekken dat je nog steeds elke animatie moet overhandigen aan de hand.
Hoewel het goed is voor ons, is het veel meer een taak voor de artistieke ontwerpers. Op standaarden gebaseerde ontwikkeling hoeft echt niet moeilijk te zijn! Ik realiseer me dat ondernemende ontwikkelaars hiervoor oplossingen hebben aangedragen, maar geen daarvan is verschenen bij de hoge pieten van groot inhoud.
Edge probeert dit proces te stroomlijnen door veelgebruikte concepten voor het maken van media te gebruiken, zoals tijdlijnen en stadia, om de leercurve zachter, gemakkelijker en dus toegankelijker te maken.
De preview is een slanke download van 65 MB en kan vrij snel worden geïnstalleerd. Voor toegang tot de download is echter een Adobe-account vereist. Het is gratis, zeker, maar voegt een onnodige stap toe aan het proces. 1999 genaamd, ze willen hun frivole aanmeldingen terug.
En oh, als je nog steeds niet weet waar je je exemplaar kunt downloaden, kun je het hier downloaden.
De eerste indrukken van de preview zijn vrij positief. Het ziet er schoon, samengesteld en overzichtelijk uit. Als u in het verleden of zelfs Flash GoLive hebt gebruikt, moet de interface er vooral bekend uitzien.
De stadium of canvas fungeert als de eerste DIV en wanneer u elementen aan uw canvas toevoegt, worden deze hiërarchisch toegevoegd met het type element dat aan de zijkant wordt weergegeven.
Het tijdlijnvenster is een van de belangrijkste delen van elke animatiesuite en Edge stelt niet teleur. Het gehele onderste gedeelte van de interface wordt gedomineerd door het tijdlijndeelvenster.
U kunt alle eigenschappen van de elementen die u tot nu toe aan het canvas hebt toegevoegd, in de tijdlijn bekijken. Het maken van een animatie is net zo eenvoudig als het toevoegen van een keyframe, het voorzien van de info voor het frame en Edge zal de rest invullen - tweening werkt zoals verwacht, uitstekend.
Deze preview bevindt zich duidelijk in de alpha-modus - de eerste focus van de eerste preview is gericht op het toevoegen van eenvoudige vormen en animaties. Dat is vrijwel alles wat er ook in de interface aanwezig is.
Gebruikers kunnen met gemak relatief eenvoudig tekst, afbeeldingen en eenvoudige vormen toevoegen - gewoon aanwijzen, klikken en slepen. U kunt ook verschillende kenmerken van de inhoud aanpassen, zoals kleur, schuintrekken, dekking, rotatie en nog veel meer. Bekijk snel de afbeelding hieronder om een idee te krijgen van waar ik het over heb. Als u ooit in het verleden kennismaakte met animatiesoftware, zou u zich meteen thuis moeten voelen.
U kunt ook premade-elementen, inclusief afbeeldingen, importeren in uw huidige canvas.
Omdat dit niet echt een tutorial is over het gebruik van Edge, ga ik verder en download een premade-demo die je hier kunt downloaden.
Laten we eens kijken naar de directorystructuur van een voorbeeld Edge-project:
Geen verrassingen hier. Je animaties zijn nu gemaakt op basis van je vertrouwde trifecta van webtechnologieën: HTML, CSS en JavaScript.
In tegenstelling tot populaire opinie gebruikt Edge een mix van jQuery en CSS3 om de inhoud van het canvas te animeren. Ja, je hoorde dat goed - jQuery doet veel van het gromwerk achter Edge.
Als je in de code kruipt met Firebug, zul je merken dat er veel DIV-elementen worden verplaatst met jQuery. Hier is bijvoorbeeld de code die wordt geïnjecteerd in het voorbeeld dat ik hierboven heb gekoppeld. Niet helemaal mooi.
Kort gezegd, elke animatie die CSS3 kan doen, wordt aan hem overgelaten, omdat alle CSS3-effecten hardwareversneld zijn en dus goed presteren. De rest wordt overgelaten aan jQuery om te verwerken.
Als je dieper in de code graaft, zie je dat al je elementen, hun eigenschappen, tweening-informatie en de rest worden opgeslagen als een JSON-bestand. Ik veronderstel dat de engine in feite deze informatie parseert en de DOM construeert en de handlers vastzet.
Laten we als snel experiment eens kijken naar wat de browser te zien krijgt:
Oh Oh. Er is letterlijk niets dat daar semantisch zinvol is. Schakel JavaScript uit en je blijft achter met een grote klodder niets. Fans van sierlijke degradatie, haal je hooivorken.
Het wordt op de markt gebracht als een HTML5-tool en goed? dit is geen HTML5-voeding. Nog.
Ik ging naar binnen en verwachtte verblind te zijn door de pracht van canvas of SVG. Na een blik op de DOM is het vrij duidelijk dat er niet eens een klein beetje van daarbinnen zit. Om het zeker te weten, deed ik een snel onderzoek naar de JavaScript-bestanden die op zoek waren naar het aan canvas gerelateerde zoekwoord, getContext . Onnodig te zeggen dat er niets opdook. De grootste klodder van HTML5 hier is het doctype. Natuurlijk kun je SVG-content importeren, maar je kunt de opmaak niet aanraken, dus het is een moo punt.
Het is een beetje verwarrend waarom Edge in plaats daarvan geen van de moderne technologieën gebruikt. Als het al iets is, wordt het op de markt gebracht als een HTML5-tool en goed? dit is geen HTML5-voeding. Oneerlijke marketing of tekenen van toekomstige functies? Ik leun naar de laatste, terwijl ik echt hoop dat de eerste niet waar is.
Nee.
Vanuit ontwikkelperspectief is het animeren van DIV's het equivalent van het gebruik van tabellen voor lay-out - het werkt maar ten koste van elegantie en semantiek. Canvas en SVG zijn nauwkeurig ontworpen om precies datgene te doen wat Edge hier doet en op de lange termijn zinvoller te maken.
Zelfs als de canvasprestaties pluisend zijn op de huidige mobiele apparaten, is er geen manier om de prestaties te laten stijgen, maar dit mag de acceptatie van nieuwe technologie echt niet belemmeren.
Hoewel je idealiter zou willen dat geavanceerde apps daadwerkelijk gebruik maken van vergelijkbare geavanceerde technologieën, moet je er rekening mee houden dat dit nog steeds een voorbeeld is, een vroege alpha-versie.
In de woorden van een van de ingenieurs achter Edge met betrekking tot op DIV gebaseerde animatie:
We zijn begonnen met DIV's omdat we snel iets wilden hebben waar mensen mee konden spelen. Ik zeg dat we daar zijn 'begonnen' omdat Edge snel zal evolueren - het product is in geen geval volledig.
Dat is een beetje bemoedigend! Hoewel ik teleurgesteld ben over hun initiaal, kijk dan wat stokken benaderen, het is goed om te weten dat dit gewoon is hoe ze dingen beginnen af te schoppen, niet hoe ze van plan zijn om dingen uiteindelijk te doen.
De bovenstaande gedachten kunnen een beetje negatief uitpakken, maar dat is niet mijn bedoeling. Ik, en de rest van de gemeenschap, hebben hoge verwachtingen van deze tool en dus van zeer hoge verwachtingen.
En Adobe is niet aan het luieren. Ze werken al aan de feedback die de community tot nu toe heeft gegeven en hebben een routekaart opgesteld voor toekomstige versies.
Nu Adobe open standaarden omarmt en zich richt op het produceren van creatieve tools in plaats van ingesloten toepassingsplatforms, kan ik niet anders dan het gevoel hebben dat ze op weg zijn om net zo relevant te worden voor de voortgang van het web als in het verleden tijdens de hoogte van Flash.
Laat ons weten hoe je je voelt voor de Edge-preview in de reacties en bedankt voor het lezen!
Accentsconagua