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 [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