Nov 15, 2012

Adobe Edge -- Create the Web in Taipei Notes




I join the Adobe Edge -- Create the web in Taipei

Speaker is 

Ryan Stewart (https://twitter.com/ryanstewart)

And

Paul Burnett (https://twitter.com/pburnett)

Adobe create some opensource project, and make some awesome tools.

Here is my note:


Abstract:
  • Optimized different screen size (Responsive Web Design).
  • work with cloud service(Adobe Edge PhoneGap / Web Font).
  • Many free tools and open source tools and projects.

Support HTML 5 and CSS 3

Areas of Focus
  • Magazine-style Advance Layout
    • CSS Exclusions
    • CSS Regions
  • Cinematic Effects
    • CSS Custom Filters
  • Advanced Graphical Effects
    • CSS Blending
    • CSS Compositing

Focus on Webkit Browser
  • WebKit open source project
  • CSS FilterLab

Notes:
  • when execute the effect, above will show the code


Adobe Edge Tool and Service
  • Optimized for creating mobile-ready web content and apps
  • Focused on a specific task
  • Improve productivity without hiding the underlying web technologies

Adobe Edge Animate 1.0
  • Like Flash interface
  • Free (1.0 if free forever) via Adobe ID
  • Optimized the different screen size.
  • Can execute in application or browser, but it is HTML 5.
  • It can open with any normal html page, create some animate and output. (good point)

Adobe Edge Reflow
  • For optimized the different screen size (Responsive Web Design)

Adobe Typekit (Charge) (https://typekit.com/)
  • Use font on the web
  • 1253 font families, 53 foundries
  • Not support double byte font now.

Adobe Edge Web Font (Free)(http://html.adobe.com/edge/webfonts/)
  • Work with Google
  • Get started with Free Web Font
  • 500 + open source and free fonts
  • Open URLs fro each family
  • Not support double byte font now.

Source Sans Pro
  • A new font
  • Source Code Pro (for developer)
    • clear to identify ( l 1 0 O)

Brackets
  • open source tool ( MIT license)
  • Light weight editor
  • Not only text editor, and support CSS, HTML, JavaScript for developer
  • Quick edit (ctrl + e)
  • Live Preview (good point, show the result real time)
  • Brackets Extensions
    • InlineColorEditor


Adobe Edge Code
  • Code HTML, CSS, and JavaScript

Adobe Edge Inspect
  • Preview and Inspect on Mobile Devices
  • Install application on device and install a google chrome plugin to test.
  • Screen for every device look like.(And use text file to describe the device – screen resolution, and information)
  • Check remote device and modify real time.


PhoneGap
  • An SDK to build mobile apps with web technologies
  • PhoneGap provides acces to a number of core device APIs. (With a Java API)

Apache CORDOVA
  • PhoneGap is an Adobe distribution of the apache CORDOVA.

Adobe PhoneGap Build
  • Package Mobile Apps in the Cloud
  • And for different screen size and platform.(ios / Android / Windows … )
  • No need to test the device and download SDK.
  • Same code for different device. (one code to build 5 binary)
  • For update the program, you can only upload the html you wan to fix. Not all program.

Responsive Web Design
  • Fluid & Flexible Grid
  • Flexible Images
  • Media Queries (set min width, automatic move the content)
enjoy it ~