Adobe Edge Tools – and the Death of Web Development – Animate

View Github Repository Open presentation in a new window

azanebrain

See all presentation from azanebrain

Adobe Edge Tools – and the Death of Web Development – Animate

0 0

slides-adobeedge

These slides explore how Adobe's Edge Tools can interact in the web development community. Do they provide a useful set of features that will be used religiously? Or do they replace the need for web developers?

On Github azanebrain / slides-adobeedge

Adobe Edge Tools

and the Death of Web Development

 

azanebrain.github.io /slides-adobeedge

This guy: AJ Zane

 

@azanebrain | github | g+

Background:

Interactive Multimedia, Digital Marketing, Big Data Analytics, East Asian Studies

I'm AJ Zane. I can be found @azanebrain on most things My background is in Interactive Multimedia, Digital Marketing, Big Data Analytics, and the so-relevant East Asian Studies

History:

Yes, it's still online ~bend to your will~ And this is my history CLICK ON SCREEN SAVERS Tables Frames Image maps Scrollbarception Horrible design You had to make things bend to your will *Yes, the spacejam site is still online from 96

Present:

Things have changed a lot in very good ways: git multi browser testing JS frameworks precompiling arguably still horrible design

Not easier

But it's not any easier You still need to make these things bend to your will. You still have to learn every day And you still want to break your computer -Mos from IT Crowd

ADOBE

For EZ wins

 
Adobe has been trying to make it easier for a long time. * Photoshop, Dreamweaver, flash, fire works They have been a trend setter and influencer in our community

Edge Tools Overview

Edge Tools * You need a CC monthly account * They are pushing learning * They just released an add-on library today What I want to talk to you about tonight is how these tools interact with our community. It’s a quick presentation so I’d like to open the room and just have an open chit-chat afterward

Animate

“...lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.

The quote: "lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease." - It basically just means flash.

Features

  • Include external JS libraries
  • Edge Commons Extension Libraries
  • Host assets through Adobe CDN
  • Import into other Adobe tools (Reflow, Muse, InDesign)
  • Interactivity
  • Showcase
Put a lot of work into keeping Animate projects modular and portable It has full integration with JS (not actionscript)

Demo

Two Birds of a Feather

Demo: -Like a mix between AFX and Flash -Selectable objects, tweens, and you can insert JS -It gets really deep fast. If anyone else wants to do a talk on this, let me know Two Birds: USPs: Responsive, interactive, portable ! Don't close the demo in case you dev inspect it

Longevity

Flash was great

The big question is should you spend time learning this? * Flash was really cool * Until it wasn't. If you haven't seen this image it's basically saying this is how the DC superheros look on android. But Flash is missing on iOS

✓ HTML5

✗ Hard to read

Easy integration into other Adobe Tools today... maybe not tomorrow

Right now the code is HTML5 compliant. It's packed with divs that have inline styles * but you're supposed to keep your Edge Animations modular . It's not an API, it's widgets your drop into other projects

Reflow

Demo

PSD to Reflow

grid Breakpoints pixel spacing CSS based Insertion caret -PSD 2 Reflow. A video showing the app that lets you easily import a PSD and start slicing it up

Trouble

  • ✗ No JPG preview
  • ✗ No complex shapes
* Only export to HTML (it gives you a warning that it should not be used for production sites) * It's much better to import your graphic elements from PhoSho and place them in Reflow

Target Audience

Designer/Dev teams

  • Common lexicon
  • Less back-and-forth
  • Basically a fancy wireframe
I think this is for designer/dev teams as an inbetween step from PSD to HTML * The fact that you can get all of that CSS and data interactive states, padding, margin, border size) means everyone knows exactly where to look You get to developing faster

Inspect

Setup

Demo

  • Screenshots from all devices
  • Remote inspect
  • Integration with Reflow
  • Live edits through Edge Code
! Show the setup infographic before the actual demo - chrome-extension://ijoeapleklopieoejahbpdnhkjjgddem/firstrun.html Sync your device to your browser. It follows along. * Screenshots = easy bug testing * remote insect * Extra features: Live testing with Reflow while you work on design * and live edits through edge code (the same as Live Reload)

Requirements

  • Only works in Chrome
  • Desktop app, chrome app, mobile app (iOS, android, Kindle Fire)

Muse

“ Allows designers to create HTML websites for desktop and mobile devices without writing code.

Dreamweaver is still in development

That description is really important. This is a tool that lets you build websites without knowing how to code. Sound familiar? (sounds like Dreamweaver) * Adobe is still working on Dreamweaver

Dreamweaver without the code box

Build sites like you're in PhoSho / InDesign

Free hosting on Adobe Business Catalyst

* Visually build sites ->Demo: Modes: Plan, design, preview, publish Master pages, like inDesign, are inherited by other pages Define where the header and footer start through guides Place interactive elements (Google Maps widget or import from Animate) Modules for parallax and scroll activated animation, dynamic loading, content swapping... Widgets: menus, can be styled * Free hosting

Quality?

Class and ID heavy

but comparable to a framework like Foundation or Bootstrap

Business Catalyst works as a CMS

Site of the Day

* As you would expect, there's tons of classes and IDs * but you could get that same unsemantic cruft if you're using a framework * BC as a CMS. Lets you update meta, track analytics - when you make a change online, before you push from Muse it will ask you to merge * -> Site of the day Target - clean design Hermen eicke cafe - interactive features

Let's discuss

& beer!

  • Is Adobe worth the $$ vs free tools (Gimp, Sketch, Acorn, Macaw)
  • Can these benefit your workflow
  • Will Adobe keep supporting Animate
  • Are drag-n-drop / Muse sites okay? Or should site makers know how to code - http://fencsd.businesscatalyst.com/index.html

 

azanebrain.github.io/slides-adobeedge