building advanced ibooks html 5 widgets and iad rich media ads · 2016-07-10 · these are...

These are confidential sessions—please refrain from streaming, blogging, or taking pictures

Building Advanced iBooks HTML 5 Widgets and iAd Rich Media AdsiAd Producer

Session 611Chi Wai LauSoftware Engineer

Mark MaloneiAd Technology Evangelist

Advanced development techniquesWhat You’ll Learn

Advanced development techniquesWhat You’ll Learn

• Content customization

Advanced development techniquesWhat You’ll Learn

• Content customization• Testing and debugging techniques

Advanced development techniquesWhat You’ll Learn

• Content customization• Testing and debugging techniques• Performance optimization

Content Customization

CSS CustomizationStyling objects

CSS CustomizationStyling objects

CSS CustomizationStyling objects

CSS CustomizationStyling objects

CSS CustomizationStyling objects

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

.custom-transform {-webkit-transform: skew(-10deg);

}

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

CSS CustomizationUsing imported file

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

CSS CustomizationUsing code editor

-

CSS CustomizationUsing code editor

JS CustomizationThe next level

JS CustomizationEvents and callbacks

JS CustomizationEvents and callbacks

JS CustomizationEvents and callbacks

JS CustomizationEvents and callbacks

JS CustomizationEvents and callbacks

XMLHTTPRequest

iAd.XHRLoader

JS CustomizationLoading remote content with iAd.XHRLoader

iAd.XHRLoader(url)

JS CustomizationLoading remote content with iAd.XHRLoader

iAd.XHRLoader(url)

delegate

JS CustomizationLoading remote content with iAd.XHRLoader

iAd.XHRLoader(url)

delegate

iAd.XHRLoaderDelegate

JS CustomizationLoading remote content with iAd.XHRLoader

loaderDidComplete

iAd.XHRLoader(url)

delegate

iAd.XHRLoaderDelegate

JS CustomizationLoading remote content with iAd.XHRLoader

delegate

loaderDidComplete

loaderDidFail

iAd.XHRLoaderDelegate iAd.XHRLoader(url)

JS CustomizationLoading remote content with iAd.XHRLoader

JS CustomizationLoading dynamic content in multi-cell objects

JS CustomizationLoading dynamic content in multi-cell objects

Multi-Cell Object

JS CustomizationLoading dynamic content in multi-cell objects

dataSource

Multi-Cell Object

dataSource

iAd.CellContainerDataSource Multi-Cell Object

JS CustomizationLoading dynamic content in multi-cell objects

dataSource

iAd.CellContainerDataSource Multi-Cell Object

JS CustomizationLoading dynamic content in multi-cell objects

numberOfCellsInContainer

JS CustomizationLoading dynamic content in multi-cell objects

dataSource

cellAtIndexInContainer

iAd.CellContainerDataSource Multi-Cell Object

numberOfCellsInContainer

JS CustomizationLoading dynamic content in multi-cell objects

DemoCustomization

Mark MaloneiAd Technology Evangelist

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationFormatted text

HTML CustomizationFormatted text

HTML CustomizationMathML

HTML CustomizationMathML

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

HTML CustomizationEmbedded objects

Content Customization

Performance

Great Widget Is Done

Mac

iOS Device

Testing and debuggingPerformance

Testing and debuggingPerformance

• Remote Web Inspector

Testing and debuggingPerformance

• Remote Web Inspector• Instruments

Web Inspector

Web InspectorSetup

Web InspectorSetup

Web InspectorSetup

Web InspectorSetup

Web InspectorCPU profiling

Web InspectorCPU profiling

Web InspectorCPU profiling

Web InspectorCPU profiling

Web InspectorNetwork traffic

Web InspectorNetwork traffic

Instruments

InstrumentsSetup

InstrumentsSetup

InstrumentsSetup

ABCDEFGH123456

ABCDEFGH123456

ABCDEFGH1234567890

ABCDEFGH1234567890

InstrumentsSetup

ABCDEFGH123456

ABCDEFGH123456

ABCDEFGH1234567890

ABCDEFGH1234567890

InstrumentsSetup

InstrumentsSetup

InstrumentsSetup

InstrumentsSetup

DemoPerformance

Mark MaloneiAd Technology Evangelist

Best practicesPerformance

Best practicesPerformance

• Test on device

Best practicesPerformance

• Test on device•Always test on device!

Best practicesPerformance

• Test on device•Always test on device!•Always test on device!!

Best practicesPerformance

Best practicesPerformance

• Look for hotspots with Web Inspector

Best practicesPerformance

• Look for hotspots with Web Inspector•Monitor network traffic with Web Inspector

Best practicesPerformance

• Look for hotspots with Web Inspector•Monitor network traffic with Web Inspector■ Reduce network fetches by image spriting

Best practicesPerformance

• Look for hotspots with Web Inspector•Monitor network traffic with Web Inspector■ Reduce network fetches by image spriting

■ Identify unused assets

Best practicesPerformance

Best practicesPerformance

•Measure memory footprint with Instruments

Best practicesPerformance

•Measure memory footprint with Instruments• Save memory by removing hidden elements using display: none

iBook HTML 5 widgets and iAd rich media adsWhat You’ve Learned

iBook HTML 5 widgets and iAd rich media adsWhat You’ve Learned

• Built with familiar web technologies

iBook HTML 5 widgets and iAd rich media adsWhat You’ve Learned

• Built with familiar web technologies• Support customization via HTML/CSS/JS

iBook HTML 5 widgets and iAd rich media adsWhat You’ve Learned

• Built with familiar web technologies• Support customization via HTML/CSS/JS• Can pull in remote content

iBook HTML 5 widgets and iAd rich media adsWhat You’ve Learned

• Built with familiar web technologies• Support customization via HTML/CSS/JS• Can pull in remote content• Backed by a powerful toolset

http://developer.apple.com/iad/iadproducer

More Information

Mark MaloneiAd Technology Evangelistmgm@apple.com

DocumentationiAd Producer Helphttp://help.apple.com/iadproducer

iAd JS Developer Libraryhttp://developer.apple.com/library/iad

Apple Developer Forumshttp://devforums.apple.com/community/safari/iad

iAd Integration and Best Practices Russian HillThursday 2:00PM

Related Sessions

Introduction to iBooks Author Widget and iAd Rich Media Ad Development with iAd Producer 4

Russian HillWednesday 11:30AM

Getting the Most Out of Web Inspector Russian HillTuesday 11:30AM

Getting to Know Web Inspector Russian HillTuesday 10:15AM

Improving Performance and Energy Usage with Instruments Nob HillThursday 11:30PM

Lab

iAd Technologies Lab Media Lab AThursday 3:15PM