HTML
Factory
Overview
The Technology
UI Scheme
Model
View
Controller
Ad Creation
Ad Serving
HTML5Factory
MDX2/NEXT
DataBase/AdConfig/
Workspace
Client Serving
AdKit.js
The Workspace
Assets
Scripts
Index.html
Config.JS
Interactions.js
runAd.js
Index.html
<html xmlns="http://www.w3.org/1999/xhtml"
style="overflow: hidden; background-color: white; width: 100%; height: 100%;'"><head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" adkit-mode="preview" adkit-config=""
src="https://secure-ds.serving-sys-dev4.com/BurstingScript/adkit.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://secure-ds.serving-sys-dev4.com/BurstingScript/AdBuilderScripts/jquery.mobile-events.min.js"></script>
<script type="text/javascript"
src="https://secure-ds.serving-sys-dev4.com/BurstingScript/AdBuilderScripts/CSSPlugin.min.js"></script>
<script type="text/javascript"
src="https://secure-ds.serving-sys-dev4.com/BurstingScript/AdBuilderScripts/EasePack.min.js"></script>
<script type="text/javascript"
src="https://secure-ds.serving-sys-dev4.com/BurstingScript/AdBuilderScripts/TweenLite.min.js"></script>
<body style="margin:0; padding:0 width: 100%; height: 100%;" bgcolor="#FFFFFF">
<div id="adkit-container" style="width: 100%; height: 100%; position: relative; ">
<div id="image1"
style="position: absolute;
width: 225px; height: 225px;
top: 0px; left: 0px; z-index: 1;
font-family: Arial, Helvetica, sans-serif;
visibility: visible; opacity: 100; overflow: hidden; word-break: normal;">
<img style="width: 100%; height: 100%" src="http://secure-ds.serving-sys-dev4.com/BurstingRes/Site-23011/Type-0/28f18dc1-1089-4964-9fe0-31b2f86b1e22.jpg">
</div>
</div>
</body>
</html>
Config.js
define({
"type": "standard",
// defualt banner instance id
"defaultBanner": "banner1",
// default image
"defaultImage": "200X200.jpg",
// default background color
"bgColor": "#e1e1e1",
// optional - define clicktrough
"clickThrough": { "url": "www.google.com" },
// array of banner instances
"banners": [
{
// banner instance id
"id": "banner1",
// html file this instance
"asset": "banner2.html",
// optional - default image
"defaultImage": "300X200.jpg",
// optional - background color
"bgColor": "#e1e1e1",
// optional - supported orientations for this instance - portrait | landscape | both
"orientation": "portrait",
// instance width
"width": 200,
// instance height
"height": 200,
// items configuration
"items": [
{
"id": "html1",
"type": "adkit-html",
"width": 100,
"height": 200,
"x": 50,
"y": 50
"html": "<div>div1</div>"
},
{
"id": "image1",
"type": "adkit-image",
"width": 100,
"height": 200,
"x": 100,
"y": 100
"image": "assets/myImage.jpg"
},
{
"id": "html2",
"type": "adkit-html",
"width": 100,
"height": 200,
"x": 150,
"y": 150,
"html": "<div>div2</div>"
}
]
}
]
});
Features
Components
Formats
-
Standard
-
Polite
-
Expandable
-
Single Expandable
SV/MV
-
Text
-
HTML
-
Image
-
Video
Actions
&Animations
Common& Shared Templates
Extending HTML5Factory Ads
RunJs
HTML
Some Examples
THANK YOU
deck
By Maor Frankel
deck
- 417