1. CREATE THE WEB
Educational Tour 2013
html.adobe.com
#CreateTheWeb

2. Who I am
Mihai Corlan / Adobe Educational Evangelist / @mcorlan
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

3. Transylvania
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

4. No Vampires!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

5. We <3 …
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

6. #CreateTheWeb
@mcorlan
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

7. Who are you?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

10. There are still things that can’t be done easily today!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

12. Areas of Focus
Magazine-style Cinematic Advanced
Advanced Effects Graphical
Layout Effects
CSS Regions CSS Custom Filters CSS Blending
CSS Exclusions & Shapes CSS Compositing
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

13. http://html.adobe.com/webstandards/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

14. Tools
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

15. The Modern Web
Needs
Modern Tools
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

16. Adobe Edge Tools & Services
• Optimized for creating mobile-ready web content and apps
• Focused on a specific task
• Improve productivity without hiding the underlying web technologies
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

17. Adobe Edge Tools & Services
Adobe Edge Web Fonts
Get started with free web fonts
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

18. Fonts on Web used to be:
Arial
Verdana
Times New Roman
Comic Sans :D
…
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

19. Adobe Edge Tools & Services
TypeKit
High quality fonts for the web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

20. Open Source Fonts from Adobe
Source Sans Pro – great font for UI
Source Code Pro – great font for code
https://github.com/adobe/Source-Code-Pro
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

21. Source Sans Pro
A G M S Y a g m s y 1 4 7
B H N T Z b h n t z 2 5 8
C I O U c i o u 3 6 9
D J P V d j p v 0
E K Q W e k q w
F L R X f l r x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21

22. Source Code Pro
A G M SY a g m sy 147
B H N TZ b h n tz 258
C I O U c i o u 369
D J P V d j p v 0
E K Q W e k q w
F L R X f l r x
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22

23. Source Code Pro
A G M SY a g m sy 147
B H N TZ b h n tz 258
C I O U c i o u 369
D J P V d j p v 0
E K Q W e k q w
F L R X f l r x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23

24. Source Code Pro
A G M SY a g m sy 147
B H N TZ b h n tz 258
C I O U c i o u 369
D J P V d j p v 0
E K Q W e k q w
F L R X f l r x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24

25. Source Code Pro
A G M SY a g m sy 147
B H N TZ b h n tz 258
C I O U c i o u 369
D J P V d j p v 0
E K Q W e k q w
F L R X f l r x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25

26. Source Code Pro
A G M SY a g m sy 1 4 7
B H N TZ b h n tz 2 5 8
C I O U c i o u 369
D J P V d j p v
https://github.com/adobe/Source-Code-Pro
0
E K Q W e k q w
F L R X f l r x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26

27. Adobe Edge Tools & Services
Adobe Edge Reflow
Design the responsive web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

28. Ethan Marcotte
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

29. Coining the term “Responsive Web Design”
May 2010 June 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

30. Responsive Web Design building blocks
Fluid & Flexible Media
Flexible Grid Images Queries
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

31. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

32. Adobe Edge Tools & Services
Adobe Edge Animate
Animate the Web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

33. Animations on web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

34. Adobe Edge Tools & Services
Adobe Edge Inspect
Preview the web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

35. Adobe Edge Tools & Services
PhoneGap
Build mobile apps with web technologies
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

36. Why would you use PhoneGap?
§ Write once, run everywhere
§ Native Installers -> Application Stores
§ Use standard web technologies
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#CreateTheWeb

37. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#CreateTheWeb

38. PhoneGap supports 8 platforms
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#CreateTheWeb

39. What can you use to build your app?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#CreateTheWeb

40. jQuery Mobile
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

41. Adobe Edge Tools & Services
PhoneGap Build
Package Mobile Apps in the Cloud
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

42. Using the PhoneGap Build
§ http://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 files (index.html, CSS, JS, images)
§ Or you provide a Git / SVN link
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#CreateTheWeb

43. Adobe Edge Tools & Services
Brackets Adobe Edge Code
The open source code editor for web Code the web
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

44. Adobe Edge Tools & Services
How much $$$?
Animate Reflow Inspect PhoneGap Build Brackets/Code
FREE FREE FREE FREE FREE
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

45. How do you get them?
You sign up for Adobe Creative Cloud
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

46. 30-Day
Trial
Free
Membership
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

47. 19.99 Euro / month + VAT
Membership
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

48. Thank you!
@mcorlan
mcorlan@adobe.com
corlan.org
#CreateTheWeb
Want to have me speaking at you university?
Just send me an email and we’ll work on it J
Attribution: thanks to dishab and Arcturus
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.