Adobe Edge

Animáció • Bannerek • Mobil weboldalak • Mobilalkalmazások

Az Edge az Adobe Systems új szerzői rendszere, korszerű webfejlesztő eszközök csomagja.

Az első alkalmazást 2011 augusztusában adták ki, mint a Flash platformot helyettesítő új multimédiás szerzői rendszert. 2012 szeptemberében az Adobe ezt az alkalmazást Edge Animate-re nevezte át, és közzétette az Edge Reflow-t, az Edge Code-ot és az Edge Inspectet. A szoftvercsomag tartalmazza a Phone Gap Build alkalmazást, és hozzáférést biztosít az Edge Web Fonts és a Typekit szolgáltatáshoz.

A Flash-felhasználók szempontjából az Adobe korábbi szerzői rendszere szétvált

Vektorgrafikák rajzolásához (és a Shape Tween helyettesítésére) pedig ott az Illustrator.

Ez az (Edge-dzsel készült) infografika a fentieket (még) élvezetesebben magyarázza el: The right tools for the modern web

Edge Animate

Böngésző által közvetített multimédiás tartalmak szerzői rendszere, amelyet az Adobe Systems a Flash platform-független alternatívájaként fejlesztett ki. Az Edge Animate HTML5-ön, JavaScripten, jQueryn és CSS3-on alapuló alkalmazásokat gyárt, amelyek kompatibilisek az iOS-szel, a Windows Phone 7-tel és más HTML-kompatibilis böngészőkkel.

  • Workflow
  • Animáció
  • Motion path
  • Az Edge-projekt anatómiája
  • A Welcome Screen
  • A Színpad és az Időszalag
  • A Könyvtár és az Elements paletta
  • Transzformációk
  • Eszközpaletta
  • Vonalzók, (intelligens) segédvonalak
  • Photoshop-import: assetek dinamikus mentése (CC)
  • Illustrator-import
  • Szimbólumok exportja
  • Typekit-integráció
  • HTML5-Audio beillesztése
  • HTML5-Video beillesztése
  • Animáció kulcskocka-elven és a Pin eszközzel
  • Animáció vektorösvény mentén
  • Csillapítások
  • Szűrők és animációjuk
  • Animáció másolása
  • Hurok
  • Kódfecnik (Snippets): utasítások az időszalagon és az elemeken
  • Nyomógombok
  • Hanglejátszás vezérlése
  • Ingyenes bővítmények telepítése
  • Responsiveness
    • Elemek automatikus skálázása a színpad szélessége vagy / és magassága alapján
    • Elemek horgonypontja (anchor point)
    • Színpad maximális és minimális szélessége
    • Képek skálázása
  • Akadálymentesség (title & tab index)
  • Töltőrutin beillesztése (preloader)
  • Helyettesítő régi böngészőkre (fallback)
  • Közzétételi beállítások (Publish settings)
  • Workshop: mozgóképes banner (fuvarozó cég)

Edge Reflow

Responsive (adaptív) weblapok szerkesztésére alkalmas WYSIWYG-elvű prototyping eszköze. Hasonlóan az Adobe Muse-hoz, az Edge Reflow interface-e a weboldal vizuális oldalán alapul; az azt felépítő kód háttérbe szorul. A 2013 februárjában napvilágot látott eszköz teljesen új, nem egy korábbi vagy egy Adobe által vásárolt alkalmazás frissítése. A szoftver különlegessége a grip, amellyel az ablakszélességeket a lehető leggyorsabban lehet változtatni, szimulálva ezzel a kisebb kézi eszközöket - ugye untuk már a böngésző cibálását?

Az Edge Reflow elsősorban a nagyobb webprojektekben lesz hasznos, ahol hamar mutatni kell az ügyfélnek egy clicktrough-dummyt. Design-hangsúlyos és responsive weboldalak prototípusának elkészítésére való a Photoshopos tervezőmunka után. A kibocsájtott - viszonylag slank - HTML- és CSS-kód más, összetettebb szerkesztőkben teljes funkcionalitású kóddá fejleszthető.

  • A felhasználói felület
  • Photoshop kompozíció felcimkézése
  • Konvertálás Reflow-projektté
  • Alap layout nulláról: háttérkép, főkonténer, fejléc, navigáció, kép- és szövegkonténerek
  • Százalékos és pixeles szélességadatok, külső-belső margók, háttérszínek, lekerekítés
  • Szövegdobozok, formázásuk, pozícionálás
  • Hierarchia a DOM-palettán
  • "Tartalom-koreográfia"
  • Űrlapelemek konfigurálása

Brackets

Korszerű, open-source, pehelysúlyú kódszerkesztő web design célokra, amely vizuális eszközöket jelenít meg, amikor arra szükség van. Maga a Brackets is JavaScriptben, HTML-ben és CSS-ben íródott alkalmazás. Így sokan azok közül, akik használják, képesek bővíteni és megváltoztatni a szerkesztőt. A Brackets az aktuálisan megnyitott mappát projektként kezeli, és támogatást nyújt kódszínezés, kódsegítség, élő előnézet és gyorsszerkesztés formájában. Rengeteg más szerkesztővel szemben (mint a Dreamweaver, Visual Studio Express, PSpad, Notepad, stb.) a böngésző előnézete azonnal frissül, ahogy a szerkesztőnézetben gépelünk. 2012 és 2014 között az Adobe Edge Code néven IS kiadta a szoftvert olyan funkciókkal, amelyek jobb Creative Cloud-integrációval kecsegtettek; az Edge Code fejlesztését a Brackets javára leállították.

  • A felhasználói felület paneljei
  • Színes kódjelölés (Code Coloring)
  • Kódsegítség (Code Hinting) - HTML5, CSS3 és JavaScript nyelvekhez
  • Gyors Szerkesztés (Quick Edit)
  • Keresés és navigáció dokumentumok között
  • Keresés és navigáció dokumentumokban: Gyors Megyitás (Quick Open), Gyors definíció Keresés (Quick Find Definition), Ugrás sorhoz (Go to Line)
  • HTML-CSS-Súgó: Quick Docs
  • Élő előnézet Chrome-ban (Live Preview)
  • Bővítmények
    • A CanIUse-bővítmény telepítése és használata
  • Typekit- és Google WebFonts-integráció

Edge Inspect

Az Edge Inspect – a korábbi Adobe Shadow – eredetileg arra lett tervezve, hogy weblapok mobil kinézetét tesztelje anélkül, hogy azokat fel kellene tölteni egy szerverre. Lehetővé teszi iOS és Android eszközök csatlakoztatását a számítógéphez, és mindegyik eszköz a maga natív prezentációs környezetében jeleníti meg a weboldalt. A kód élőben szerkeszthető, a változtatások a társított eszközökön megjelennek, és minden eszközről screenshotok menthetők a desktop számítógépre.

PhoneGap Build

A PhoneGap mobil fejlesztő platform, ami lehetővé teszi az alkalmazások mobil eszközökre történő fejlesztését HTML5-tel, JavaScripttel és CSS-sel. Az olyan eszköz-specifikus nyelvek, mint az Objective-C helyett az alkalmazások a célzott platformtól függetlenül fejleszthetők, majd népszerű operációs rendszerek sokaságára kompilálhatók, ideértve az iOS-t, az Androidot és a Windows Phone-t.

Edge Web Fonts

Online betűtípusokhoz nyújt hozzáférést, lehetővé téve felhasználásukat dokumentumokban. Ezeket a betűtípusokat az Adobe, a Google és további, független közzétevők szállítják. A szolgáltatás hozzásegít, hogy a weboldalak fejlesztésekor bármelyik Edge alkalmazásban nagyobb betűkészlet álljon rendelkezésre úgy, hogy kompatibilis marad az összes eszközzel. A szolgáltatás az Edge Web Fonts weboldalon keresztül is elérhető, ami kódot generál a betűtípusok más weboldalakba történő beágyazáshoz. A szolgáltatás ingyenes.

Typekit

A Typekit előfizetői számára betűtípusok online dokumentumokba történő beágyazását teszi lehetővé.

Google Web Designer

A Google Web Designer a Google válasza az Adobe kihívására. A szoftvert 2013 őszén indították útjára, és még jelenleg is (2015 tavasz) ingyenes béta-stádiumban van (Win, Mac, Linux). Neve megtévesztő; a Web Designer weblapok szerkesztésére vagy webalkalmazások programozására kevéssé alkalmas, sokkal inkább bannerek, popup reklámok, animált gombok eszköze ez, ahol is a fókusz a Doublecklick és AdWords kampányokon van. A program meg sem nyitja a nem maga által létrehozott HTML-dokumentumokat.

Különlegességei a 3D-transzformációs eszközök és a toll (amik az Edge Animate-ből egyelőre hiányoznak).

A Google eszköze csak egy bannerkere kihegyezett szerzői rendszer. Ezen a területen azonban sikeressé válhat, főleg mivel az AdWordsben - idézzük - "Csak a Google Web Designer használatával elkészített HTML5-hirdetések támogatottak."

  • Parallax Effect készítése
    • Új dokumentum létrehozása
    • Nyersanyagok importja
    • Pozícionálás és formázás: grafikai elemek, div-konténerek és szövegdobozok
    • Animáció
    • Interakció (Actions)
    • Előnézet
    • Közzététel
  • A GWD és a Flash CC összehasonlítása
  • A GWD és az Animate összehasonlítása

Kapcsolódó modul: Flash