edge tools and services
TRANSCRIPT
CREATE THE WEB Educational Tour 2013
html.adobe.com #Create!eWeb
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Who I am
Mihai Corlan / Adobe Educational Evangelist / @mcorlan
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Transylvania
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
No Vampires!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
We <3 …
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#Create!eWeb
@mcorlan
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Who are you?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
!ere are still things that can’t be done easily today!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Areas of Focus
Magazine-style Advanced
Layout
CSS Regions CSS Exclusions & Shapes
Cinematic Effects
CSS Custom Filters
Advanced Graphical
Effects
CSS Blending CSS Compositing
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
h"p://html.adobe.com/webstandards/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Tools
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
!e Modern Web Needs
Modern Tools
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
• Optimized for creating mobile-ready web content and apps • Focused on a speci#c task • Improve productivity without hiding the underlying web technologies
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
Adobe Edge Web Fonts Get started with free web fonts
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Fonts on Web used to be:
Arial Verdana Times New Roman Comic Sans :D …
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
TypeKit High quality fonts for the web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Open Source Fonts from Adobe
Source Sans Pro – great font for UI Source Code Pro – great font for code h$ps://github.com/adobe/Source-Code-Pro
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Source Sans Pro
21
a b c d e f
g h i j k l
m n o p q r
s t u v w x
y z
1 2 3
4 5 6 0
7 8 9
A B C D E F
G H I J K L
M N O P Q R
S T U V W X
Y Z
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Source Code Pro
22 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
a b c d e f
g h i j k l
m n o p q r
s t u v w x
y z
1 2 3
4 5 6 0
7 8 9
A B C D E F
G H I J K L
M N O P Q R
S T U V W X
Y Z
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Source Code Pro
23
a b c d e f
g h i j k l
m n o p q r
s t u v w x
y z
1 2 3
4 5 6 0
7 8 9
A B C D E F
G H I J K L
M N O P Q R
S T U V W X
Y Z
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Source Code Pro
24
a b c d e f
g h i j k l
m n o p q r
s t u v w x
y z
1 2 3
4 5 6 0
7 8 9
A B C D E F
G H I J K L
M N O P Q R
S T U V W X
Y Z
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Source Code Pro
25
a b c d e f
g h i j k l
m n o p q r
s t u v w x
y z
1 2 3
4 5 6 0
7 8 9
A B C D E F
G H I J K L
M N O P Q R
S T U V W X
Y Z
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Source Code Pro
26
a b c d e f
g h i j k l
m n o p q r
s t u v w x
y z
1 2 3
4 5 6 0
7 8 9
A B C D E F
G H I J K L
M N O P Q R
S T U V W X
Y Z
h"ps://github.com/adobe/Source-Code-Pro
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
Adobe Edge Re%ow Design the responsive web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Ethan Marco!e
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Coining the term “Responsive Web Design”
May 2010 June 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Responsive Web Design building blocks
Fluid & Flexible Grid
Flexible Images
Media Queries
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
Adobe Edge Animate Animate the Web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Animations on web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
Adobe Edge Inspect Preview the web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
PhoneGap Build mobile apps with web technologies
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Why would you use PhoneGap?
§ Write once, run everywhere § Native Installers -> Application Stores § Use standard web technologies
#Create!eWeb
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
PhoneGap could be your best friend if
§ You want to target multiple mobile platforms § You know HTML/JavaScript/CSS § Extend existing in-browser apps with native features § Data-centric apps, social networking, simple games
#Create!eWeb
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
PhoneGap supports 8 platforms
#Create!eWeb
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
What can you use to build your app?
#Create!eWeb
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
jQuery Mobile
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
PhoneGap Build Package Mobile Apps in the Cloud
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Using the PhoneGap Build
§ h$p://build.phonegap.com § Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, and Symbian § It is in beta and it is free; it will always be free for Open Source projects § You upload your #les (index.html, CSS, JS, images) § Or you provide a Git / SVN link
#Create!eWeb
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Edge Tools & Services
Brackets !e open source code editor for web
Adobe Edge Code Code the web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Animate
FREE
Re#ow
FREE
Inspect
FREE
PhoneGap Build
FREE
Brackets/Code
FREE
Adobe Edge Tools & Services How much $$$?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
How do you get them?
You sign up for Adobe Creative Cloud
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Free Membership
30-Day Trial
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
19.99 Euro / month + VAT Membership
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
!ank you!
@mcorlan [email protected]
corlan.org #Create!eWeb
A$ribution: thanks to dishab and Arcturus
Want to have me speaking at you university? Just send me an email and we’ll work on it J