Adobe Edge -- Create the Web in Taipei 小記

今天參加 Adobe 創新製作網頁之旅，深入探索現代化網頁工具及技術
講者為 
Ryan Stewart (https://twitter.com/ryanstewart)
以及
Paul Burnett (https://twitter.com/pburnett)

Adobe 參與了一些 open source 的專案, 也建立了一些很 cool 的工具

參加心得如下

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.
  • http://html.adobe.com/

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)
• https://github.com/adobe/brackets
• 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)

先記下來

^__^