PDX Web & Design Message Board › Meetup Notes 12-Dec-2012: Create the Web w/ Adobe
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!
from adobe —
Garth Braithwaite -
sr. experience designer (Ed in adobe)
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
magazine style advance layout, cinematic effects, advanced graphics
adobe safar/webkiti —> iOS 6, some of these functionalities are already in iOS API
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
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...
Garth Braithwaite -
sr. experience designer (Ed in adobe)
Edge Web Flow
Edge PhoneGap Build
forms a ...Voltron!
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!
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
http://github.com/ado... - can even fork it, or add to it
trello for issues & voting up features
native app - using chromium WebKit shell
made html/css/js - so web devs would write for it
listed off team of engineers
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."
Loved this meetup, will you be posting where we can dl the slides and demos he walked through?
cheers and happy holidays.