Edge toolsandservices mihai_corlan

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


Transylvania


No Vampires!


We <3 …


#Create!eWeb

@mcorlan


Who are you?




!ere are still things that can’t be done easily today!



Areas of Focus

Magazine-style Advanced

Layout

CSS Regions CSS Exclusions & Shapes

Cinematic Effects

CSS Custom Filters

Advanced Graphical

Effects

CSS Blending CSS Compositing


h"p://html.adobe.com/webstandards/


Tools


!e Modern Web Needs

Modern Tools


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



Adobe Edge Web Fonts Get started with free web fonts


Fonts on Web used to be:

Arial Verdana Times New Roman Comic Sans :D …



TypeKit High quality fonts for the web


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


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


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


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


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


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


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



Adobe Edge Re%ow Design the responsive web


Ethan Marco!e


Coining the term “Responsive Web Design”

May 2010 June 2011


Responsive Web Design building blocks

Fluid & Flexible Grid

Flexible Images

Media Queries




Adobe Edge Animate Animate the Web


Animations on web



Adobe Edge Inspect Preview the web



PhoneGap Build mobile apps with web technologies


Why would you use PhoneGap?

§  Write once, run everywhere §  Native Installers -> Application Stores §  Use standard web technologies

#Create!eWeb


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


PhoneGap supports 8 platforms

#Create!eWeb


What can you use to build your app?

#Create!eWeb


jQuery Mobile



PhoneGap Build Package Mobile Apps in the Cloud


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



Brackets !e open source code editor for web

Adobe Edge Code Code the web


Animate

FREE

Re#ow

FREE

Inspect

FREE

PhoneGap Build

FREE

Brackets/Code

FREE

Adobe Edge Tools & Services How much $$$?


How do you get them?

You sign up for Adobe Creative Cloud


Free Membership

30-Day Trial


19.99 Euro / month + VAT Membership


!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

Documents

Edge toolsandservices mihai_corlan