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