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


• Content customization


• Content customization• Testing and debugging techniques


• Content customization• Testing and debugging techniques• Performance optimization

Content Customization

CSS CustomizationStyling objects

CSS CustomizationUsing imported file


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

}

CSS CustomizationUsing code editor

JS CustomizationThe next level

JS CustomizationEvents and callbacks

XMLHTTPRequest

iAd.XHRLoader

JS CustomizationLoading remote content with iAd.XHRLoader

iAd.XHRLoader(url)


iAd.XHRLoader(url)

delegate


iAd.XHRLoader(url)

delegate

iAd.XHRLoaderDelegate


loaderDidComplete

iAd.XHRLoader(url)

delegate

iAd.XHRLoaderDelegate


delegate

loaderDidComplete

loaderDidFail

iAd.XHRLoaderDelegate iAd.XHRLoader(url)

JS CustomizationLoading dynamic content in multi-cell objects


Multi-Cell Object


dataSource

Multi-Cell Object

dataSource

iAd.CellContainerDataSource Multi-Cell Object


dataSource



numberOfCellsInContainer


dataSource

cellAtIndexInContainer


numberOfCellsInContainer

DemoCustomization


HTML CustomizationEmbedded objects

HTML CustomizationFormatted text

HTML CustomizationMathML

HTML CustomizationEmbedded objects

Content Customization

Performance

Great Widget Is Done

iOS Device

Testing and debuggingPerformance


• Remote Web Inspector


• Remote Web Inspector• Instruments

Web Inspector

Web InspectorSetup

Web InspectorCPU profiling

Web InspectorNetwork traffic

Instruments

InstrumentsSetup

InstrumentsSetup

ABCDEFGH123456

ABCDEFGH123456

ABCDEFGH1234567890

ABCDEFGH1234567890

InstrumentsSetup

DemoPerformance


Best practicesPerformance


• Test on device


• Test on device•Always test on device!


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


• Look for hotspots with Web Inspector


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


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


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

■ Identify unused assets


•Measure memory footprint with Instruments


•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


• Built with familiar web technologies


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


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


• 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 [email protected]

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

Building Advanced iBooks HTML 5 Widgets and iAd Rich Media Ads · 2016-07-10 · These are...

Documents

Transcript of Building Advanced iBooks HTML 5 Widgets and iAd Rich Media Ads · 2016-07-10 · These are...