Edge Tools & Services

html.adobe.com/edge/

Chris Griffith



Adobe Community Professional

Staff Engineer @ Qualcomm Technology Inc.

Instructor @ UCSD Extension

@chrisgriffith


Who are you?



Web professionals
need better tools.

Adobe Edge Tools & Services





  • Optimized for creating mobile-ready web content & apps
  • Focused on a specific task
  • Work well individually, or together
  • Productive without hiding the underlying web code

Adobe Edge Tools & Services

Adobe Edge Animate

Animate the Web








Plug-in free, but ...

Hand coded

Time consuming

Adobe Edge Animate

Adobe Edge Animate 2.0

  • Works seamlessly across modern browsers and devices
  • Create accessible content
  • Keyframe based intuitive tooling
  • Help bridge the gap between creativity and code

New Features

  • Motion Paths
  • Responsive
  • Edge Web Fonts
  • CSS Filter Support
  • Improved Gradients
  • New Color Tools

Demo

Adobe Edge Animate

Animate in Action

Adobe Edge Tools & Services

Adobe Edge Reflow

Design the Responsive Web

Source: ComScore survey 2012

3.5 Billion

Screens with web content


Ignore the issue?


Website + Mobile?


Mobile App?


Responsive Web Design

Responsive Design

Where are the tools to do this?

Adobe Edge Reflow

Design Responsive
 Websites


Demo

Adobe Edge Reflow

Adobe Edge Reflow

Design the Responsive
 Web

Brackets

Open Source Coding tool for HTML/JS/CSS

Brackets

  • Lightweight
  • Web-centric editor
  • Written in HTML/JS/CSS
  • Open Source

Demo

Brackets

Brackets

Get involved

Adobe Edge Code

Code HTML, CSS
 and JavaScript


What's the difference?

Edge Web Fonts Extension for Adobe Edge Code

PhoneGap Extension for Adobe Edge Code


Demo

Adobe Edge Code

Adobe Edge Code

Code the Web

Adobe Edge Tools & Services

Adobe Edge Inspect

Preview the Web



If you haven't tested
on the device,
you haven't tested.



Testing on devices is hard.

Adobe Edge Inspect

Preview and Inspect
 on Mobile Devices

Adobe Edge Inspect

Preview the Web

Adobe Edge Tools & Services

Typekit

High Quality Fonts for the Web

Arial
Helvetica
Times New Roman
Times
Courier New
Verdana
Georgia
Trebuchet MS
Impact
Gill Sans


The web needs fonts


Webfonts to the rescue



http://lostworldsfairs.com/moon/



http://lostworldsfairs.com/eldorado/



http://hiutdenim.co.uk/



http://www.newyorker.com/



http://welcometotakeout.com/

Adobe Edge Tools & Services

Typekit

High Quality Fonts for the Web

Adobe Edge Tools & Services

Adobe Edge Web Fonts

Get Started with Free Web Fonts

Source Sans Pro

The primary need for type in Adobe’s open source applications has thus far been for usage within user interfaces. A second environment of perennial interest to Adobe is the realm of text typography. Thus the immediate constraints on the design were to create a set of fonts that would be both legible in short UI labels, as well as being comfortable to read in longer passages of text on screen and in print. In thinking of typeface models that accomplish these tasks well, I was drawn to

Source Sans Pro

Open Source Font from Adobe

Source Code Pro

The primary need for type in Adobe’s open source applications has thus far been for usage within user interfaces. A second environment of perennial interest to Adobe is the realm of text typography. Thus the immediate constraints on the design were to create a set of fonts that would be both legible in short UI labels, as well as being comfortable to read in longer passages of text on screen and in print. In thinking of typeface models that accomplish these tasks well, I was drawn to

Source Code Pro

Open Source Monospace Coding Font from Adobe

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890

Adobe Edge Tools & Services

PhoneGap

Objective C

Android Flavored Java

BlackBerry Flavored Java

C# XAML

HTML5/CSS3/JS

PhoneGap

PhoneGap SDK

An SDK to build mobile apps with web technologies


Still not great.

Adobe Edge Tools & Services

PhoneGap Build

Package Mobile Apps in the Cloud

PhoneGap Build


Demo

PhoneGap Build

build.phonegap.com

PhoneGap Build

Package Mobile Apps in the Cloud

Adobe Edge Tools & Services

The best creative tools

  • Integrated online services
  • Collaboration and publishing
  • Access to the latest updates


You already have them.


All have a free version.

Questions, Comments, Feedback?

Preso will be up at:
http://aj-software.com/presentations/edgetools/

Feel free to contact me: