PDX Web & Design Message Board › Meetup Notes 12-Dec-2012: Create the Web w/ Adobe

Meetup Notes 12-Dec-2012: Create the Web w/ Adobe

Eric R.
eredmond
Group Organizer
Portland, OR
Post #: 49
Faddah Steve Yuetsu Wolf wrote these very valuable stream-of-consciousness notes about this week's meetup. There's a lot of information here, so strap yourself in!




My take away: interesting tools presented from the new Adobe Creative Cloud / Adobe Edge Tools, and th fact that it's rendering, allegedly, true html5, css & javascript on the fly and not flash. however, the most interesting tools and effects serge presented, the animations using live text around objects, or objects around text, all part of the Adobe proposed CSS Regions Prototype to w3c, is still in draft stage and only being considered, and currently most of this stuff only works in a chrome WebKit edge tools browser, and the most complex animations with text and the CSS Regions Prototype only currently work on chrome with then canary experimental/testing plug-in. also, they say they are "working" with other browsers to incorporate what they want (mozilla, safari, opera, i.e.), but remains to be seen if what they want will be implemented. Garth's tools were real good too, particularly brackets, their open source code editor. it's good to see adobe with so much stuff up on github now. however, he was cut short on time. never got to demoing PhoneGap or PhoneGap Build, which i was most interested in, so i guess i won't see how they build phone apps with their tools. also, he did not quite explain what the main difference was between the free open source brackets and Adobe Edge Code. Adobe Edge Inspect looks like a good idea, but it still kind of looks like you have to have a lot of extra devices around to test. and Web flow also looks good for doing media calls to have different browser and screen sizes, for "the responsive web" (lord, save me from the too generalist jargon and catch phrases), but it is still in beta, is not currently able to save code anywhere but to a clipboard. so all and all, nice they have some open source, but the more impressive tools, like the stuff with CSS Regions Prototype or the still not out of beta Webflow, are either not supported in all browsers or the w3c (yet), or not fully functional and available. interesting, but not all ready for prime time. also, they claim a lot of this is free, but it's free for the first year only - after that, what happens to your code on their cloud service? and no mention of what the cost is after the first year. as every pusher says: the first one is free...


from adobe —

Garth Braithwaite -
sr. experience designer (Ed in adobe)
@garthdb

serge jespers
sr. evangelist
@sjespers

Serge —

http://html.adobe.com...­
twitter #createtheweb
Eric R.
eredmond
Group Organizer
Portland, OR
Post #: 50
Part 2:

html5 world - ADOBE IS IN YOU!!

web used to be easy - one or two screen resolutions - two browsers, netscape, ie

now, many screen resolutions, especially mobile/tablets & many browsers

now adobe creative cloud writes to all of it

creative cloud is their cloud version (like ms-office cloud) of creative suite. sync files across multiple devices

claims to be doing open source on w3c & WebKit

3 areas

magazine style advance layout, cinematic effects, advanced graphics

adobe safar/webkiti —> iOS 6, some of these functionalities are already in iOS API

tools -

Ps, Ai, Fw, Dw

but... the modern web needs modern tools!

Adobe Edge Tools & Services

An Rf Co Bd In Co T Wf

Laser focused on optimizing for creating mobile ready web content and apps
focused on specific tasks
improve productivity

An -Adobe Edge Animate - animate w/ web standards

In -Adobe Edge Inspect - preview the web as if using different devices & resolutions

Phone Gap - build apps for mobile devices dsk

zynga & bbc used it for apps

Bd - Phone Gap Build - builds for you without bothering with sdk in the cloud

Brackets - code editor for web, open source, in github - github.com/adobe/brackets

Co - Edge Code - brackets + phonegap + adobe sauce, for coding (their

T - TypeKit - high quality web fonts

Wf - web font cloud service

Rf - Adobe Edge Reflow

all except reflow available through adobe creative cloud

all are free (???)

seth has flash background - targeting devices became a problem (cough! apple cough!)

edit some code <—> preview, process plug-in free, time consuming.

also, css3 prefixes (-mozilla, -webkit) for different browsers just to make something like a button

so - An, edge animate

all tools laser focused on one specific task, therefore they're very fast

demo - new screen offers seven tutorials

create new project (looks a bit like flash create screens), projects panel, elements stage (a div, outputs html), canvas, timeline

drops starburst transparent background on app canvas

shows in browser! (chrome)

stage size - pixels or percentage - roll over and see css style, a rotation would use style=transform..., etc.

drops leonard from big bang theory on pic, but in expanded browser, doesn't stay in same place (responsive)

set in staging to automatic for his layer, stays in place no matter how you resize browser

in timeline to animate, right click to add new keyframe.

go to beginning, leonard out of frame,

can choose easings at end of animate - yes, they are from jQuery!

he saves his work!

adding code to leonard pic - lots of ways to add code, in timeline, etc., or easy to right click on pic and "add code"

can code yourself or import text to use js to grow him 50 pixels on mouse-over

opens source for page - source shows div for STAGE, but no divs for Leonard pic

have to go to publish settings, publish as cdn (fast), publish as static html

after that you now have divs for stage-bkgd & stage_leonard

for new users - down-level stage w/ poster image - capture image where you're at

can add pre-loader - immediate (show it!), polite (on window is loaded)

will show pre-loaded sizes of html, js libs, etc.

everytime you click on characters they're in the timeline - you can label timeline for the different elements

can transform an element, leonard's pic, to symbolic link, so if you change one, changes all copies

sizing in pixels & percent only, not "ems"

edge animate supports current browser versions minus one (so to last version, only)

is flash going away on web, then? NO! but not going there tonight

does this replace Catalyst? didn't know how to answer this - this exports html5, css & js, catalyst, no

CSS Regions Prototype by Adobe - ach! new spec!

magazine style layouts - shows three containers on page, wants text to flow to 3 containers - and yes, on window re-size, “responsive.”

containers in circle or heart shapes, or animate text around a container shape in browser, or around shapes in pics - text against mountain peak. also had text animate around car sliding into pic

regions available just in chrome today

need chrome canary plug in to see the following.

css compositing blending - can blend two pics w/ css rule, multiple pics, overlays, darken - you can build your own instagram!

can animate text so whole container waves and moves, but it's all divs moving within it, or also animated so when you mouse over, container splits into a hundred pieces, but all text within the pic still selectable - can use it on iOS 6

html.adobe.com, go to menu options for web standards

also there, css filter lab - experiment with same div over several different animations, can play with all settings to see how it works

TypeKit - born from downloadable fonts site

ny times has specific fonts, so uses T to make them available to them all the time.

TypeKit now on 8 billion sites

1253 font families

all google web fonts are available in typekit - yes, still free, using Wf web fonts served by TypeKit. has some adobe originals also.

github.com/adobe - see their other open source projects

Source Code Pro - open source up there - font where 1, l, I all look different

TypeKit & Edge Wf all part of creative cloud

slides up on github.com/adobe...
Eric R.
eredmond
Group Organizer
Portland, OR
Post #: 51
Part 3:

Garth Braithwaite -
sr. experience designer (Ed in adobe)
@garthdb

Edge Tools

Edge Animate

Edge Code

Edge Reflow

Edge Inspect

Edge Web Flow

Edge PhoneGap Build


forms a ...Voltron!

Inspect —

guy had 10 devices on table to be able to see what web app looks in each screen res.

both on desktop and as a mobile app

shows on phone whatever is on desktop browser - but not as a vm!

can go full screen to GE rid of browser window edge, and can take screen shots

uses weinre for debugging (open source). debug - like a boss!

available now.

Edge Code -

(only w/ chrome, Firefox has enabled remote debugging, but utterly different so it first needs a re-write)

can write html, css & js, and it is made with html, css & js

made with brackets (not much difference)

brackets is open source
also open community - on github, want community involved
uses agile method
html/css/js
team

http://github.com/ado...­ - can even fork it, or add to it

trello for issues & voting up features

google group

irc channel

bracket shell
native app - using chromium WebKit shell
brackets
made html/css/js - so web devs would write for it

listed off team of engineers

its extensible

features -

in-line editor - click on element or div, opens up corresponding css next to it

is there a support Less / SaaS ? not yet, but working on it, along with coffee script

live development - connection previews in browser, and auto shows your changes on fly without refresh

favorite part of open source - want that feature (work in safari), why don't you do that? ;)

live highlight feature

in-line color editor changes colors in live preview in browser on the fly, no refresh, built it himself in coffeescript

edge web fonts - open source, can use them anytime, anywhere, free

can you search multiple files? not yet, only open document

there is code completion & code hinting available

is there in-line navigation for js?

live preview for js? yes, but forces refresh. working on it by having node.js serve brackets code so see changes w/o refresh, in the future

can kinda edit web server file, but not much

Web flow - device min, device flow, responsive design, ach!

mobile has overtaken desktop views. lines between them blurring, they're all just

responsive web design book ;)


flexible design grid, flexible images,

NOT just responsibility of designer

need all three working on this - developers, designers, writers

but so many files - three sizes in Ps - mobile, tablet, Desktop

multi browsers too!

so — Edge Reflow. WebKit rendered designs

has html design surface, flexible grid, intelligent design system, & typography

if adjust canvas in canvas of Reflow, adjusts and is responsive

it's all about doing flexible grid layout & media queries

1st build was forced starting with desktop going down, next build will allow you to choose (maybe).

right now, in this build, saves as json objects

flexible grid in open source github, called "topcoat."
chris h.
chrishough
Portland, OR
Post #: 22
Loved this meetup, will you be posting where we can dl the slides and demos he walked through?

cheers and happy holidays.
Powered by mvnForum

Our Sponsors

  • 24seven

    Delicious free food and snacks

  • AppNexus

    Thank you for the event space

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy