#ads.utilities Templates and support functions for Mobile ads/landing pages

#Documentation

##Mission

To create a HTML5/CSS3/JS template/scaffolding that can serve as a starting point for Ads and Landing Pages. Incorporate mobile optimized client-side services accessible to creatives.

Collect examples and demos in a git repository. Use shared assets where possible.

---

##Requirements

• Responsive design
• Feature detection
• Optimized for Mobile
• Optimized server/cache setup
• Cross-browser
• Cross-device support (See Target Platforms, below)
• If possible, generic access to a subset of native resources from JavaScript, such as accelerometer, camera, geolocation
• Make allowances for future additions, i.e.
• Easy to copy a template and start adapting it

##Target Platforms

• iOs >= 5.1
• Android >= 4.0 (WebKit browsers)
• WebKit + Firefox
• IE 10 (?) on Windows Phone 8

    Følgende enheter må være støttet fullt ut:
    Android v4.0 og nyere, i webkit-baserte browsers
    iOS v5.1 og nyere, i webkit-baserte browsers
    Info: Dette inkluderer ca. 75 % av våre brukere (jan. 2013).
    Øvrige operativsystemer og browsers vil motta
    fallback-annonse.

    Annonsevekter:
    Max kb. Mobil 125
    Max kb. Tablet 150

###Not supported

• Opera Mini

##Technologies

• HTML5 Mobile Boilerplate
• jQuery
• PhoneGap for native hardware access
• PHP

###Frameworks

• Intel Application Framework
• MinPubSub - 198 byte pubsub micro-framework
• PhoneGap / Cordova

####Client Libraries

• ImpactJS
• Impact++
• Raphaël - SVG library
• howler.js - Modern Web Audio Javascript Library
• Collie
• Introducing Collie: A high-performance animation library for JavaScript
• jQuery

###Server libraries

• ApnsPHP: Apple Push Notification & Feedback Provider

Plugins

• Push Notification Plugin for iOS and Android
• jScroll: An iScroll Plugin for jQuery
• blueimp jQuery File Uploader
• 10 Super useful jQuery plugins for responsive web design

##Implementation

A global JavaScript object VgAds will have basic, cross-browser event handling implementing a pubsub interface for adding event listeners.

We want to be able to extend this object for special functionality and custom handlers, without compromising any other components that are using the global object.

###For speed and memory optimization, keep in mind:

• Files larger than 32KB are not cached on older iPhones
• Avoid DOM manipulation as far as possible
• avoid jQuery's built-in PubSub for high-frequency events, as it relies on the DOM for callbacks (and see also this)

##Resources

• Game Content Resources
• ImpactJS Font Tool
• Open Game Art
• Volumetric Sprites

###HTML5 Game Engines, &c

• Clay.io/
• []

###Reading

• Android Push Notifications with PhoneGap
• Accelerometer & Gyro Tutorial
• iOS/Android Device orientation (pitch, yaw, roll). Is it better with accelerometer or gyroscope?
• melonJS: Anatomy of a Game Object
• blogwerx
• MDN - Orientation and motion data explained

###Tools

• Remote debugging with Chrome Developer Tools
• LiveReload - Chrome extension
• Google PageSpeed
• mod_pagespeed - Apache module for automatic mobile optimization
• mod_spdy - Apache SPDY module -> browser support
• HTML5 Boilerplate - Mobile
• Charles Web Debugging Proxy - Windows/Mac/Linux
• Google Developers - Web Performance Best Practices
• CanIuse.com - HTML5 browser support by feature
• git-flow - A collection of Git extensions to provide high-level repository operations for Vincent Driessen's branching model
• jsPerf — JavaScript performance playground
• Chocolatey - a package manager for Windows

###Reports & best practices

• Apache config for HTML5 Mobile Boilerplate
• jQuery vs Zepto vs jQMobi - which one is the fastest?
• More Bandwidth Doesn’t Matter (much)
• Make your mobile pages render in under one second
• GoogleTechTalks - Speed Up Your JavaScript
• Mastering HTML5 Prefetching

###Testing & debugging

• Using the Android Emulator
• Viewport resizer - Responsive design bookmarklet

###Docs

• iOS Dev Center
• PhoneGap API documentation
• DeviceMotion W3 Specification
• jQuery Mobile API Documentation
• Differences between Native Apps and Mobile Web Apps

###Examples

• Camera and Video Control with HTML5
• seismograph.js - WebKit DeviceMotion / MozDeviceOrientation example
• Accessing Accelerometer on Flash/Android 2.2 - example
• PhoneGap accelerometer example

###Videos

• Video: Google I/O 2012 - High Performance HTML5
• Video: Google I/O 2012 - Making Good Apps Great: More Advanced
• Video: Google I/O 2012 - Better Web App Development Through Tooling

###HTML5 Demos

• Sencha Touch demos
• Apple HTML5 demos
• Chrome Experiments

###Tricks & fixes

• Detect rotation of Android phone in the browser with javascript
• How to access accelerometer/gyroscope data from Javascript?
• How to use git-flow
• A fix for the iPhone ViewPort scale bug

###Snippets ####Detect mobile user agent with JS regex: var isMobile = /ip(hone|od|ad)|android|blackberry.*applewebkit|bb1\d.*mobile/i.test(navigator.userAgent);

####Speed up DOM manipulation with DocumentFragment: var div = document.getElementsByTagName("div");

var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
    fragment.appendChild( elems[e] );
}

for ( var i = 0; i < div.length; i++ ) {
    div[i].appendChild( fragment.cloneNode(true) );
}

###Browser/device feature support

• caniuse - DeviceOrientation API
• caniuse - GeoLocation API
• caniuse - CORS (Cross-Origin Resource Sharing)