====== Creating HTML/XHTML/HTML5 banners ======

In this guide we collected all the AdServer specific restricions and possibilities of HTML/XHTML creatives, often just refered as HTML5 - although not always really HTML5, to help developers.

This guide contains informations that is important for upload process of the HTML creatives to the AdServer, which is relevant to the person managing the campaign, but if the creatives are done per specification, it can largely ease the management of the campaign.

This documentation is true for banners invoked through Adverticum AdServer tags - called GoAdverticum3, refered as goa3 - and that the tags are embedded along the goa3 documentation into the publisher's site, where the ad should display.

:!: **Attention! Creatives converted with Swiffy, or created with Adobe Edge or Google Web Developer, this documentation is recommended: [[http://dev.adverticum.com/conversion-eng:start]] **
===== Definitions =====

==== HTML or Markup banner? What is it all about, and what's the difference in Adverticum's AdServer? ====

Markup banners are almost like normal HTML banners, but as being XHTML, XML also, it has more restrictions, but provide wider possibilities. From a technical perspective the relevant distinction is that Markup banners are displayed as part of the suite, and not in an iFrame like regular HTML banners do. Markup banners can utilize the site's own CSS, and also provide the option for various custom animation, and transition effects, witout the use of display modules. **The AdServer checks the XHTML, XML and HTML5 codes** and indicates if there is an error. You can read more infomation about validators here: [[http://dev.adverticum.com/creatives:validators
]]


===== Restrictions regarding HTML banners (HTML/XHTML/HTML5 codes) =====

:!: **Only the body's content needs to be inserted, everything else is generated by the server. The banners that contains head could not be uploaded on AdServer, the things in head need to be solved with script.**

It happens often, that a HTML banner's code contains relative reference or references to external files (usually image files or CSS). When creating a HTML banner it is important that in the file belonging to the banner (generally in .css) should not be any other relative references for files (usually image files). Instead these (image) files should be inserted into the HTML code. So the banner should be created this way: every reference should be in the HTML code itself, not in CSS or javascript.

Instead of using a separate .css file, it is recommended to put the necessary parts straight into the HTML code:

<code html>
<style type=”text/css”> !… </style>
</code>

If you would like to upload CSS as a separate file on AdServer by all means, then it should be referred this way: (in that .css file there couldn't be an access path to an image): 

<code html>
<link type=”text/css” href=”[file:file.name]” />
</code>

Using an image as e.g. background image is possible this way:

<code html>
<div style=”background:[file:file.name]”></div>
</code>

If you upload separately the script has the file references, then you could not use relative paths because they would be changed by the server after uploading. In this case those parts containing these references should be removed from the script and be inserted into the HTML code between the usual tags:

<code html>
<script type=”text/javascript”>…</script>
</code>

However this should be reconsidered when using because usually when the whole code is inserted the HTML code's size exceeds the 60kB limit, and the AdServer doesn't allow to save a longer code than that. So you should refrain from inserting whole libraries and should limit to the necessary objects and functions.

**For campaign managers more detailed documentation on creatives using relative links can be found here:\\
[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/74/2/relatv-hivatkozst-tartalmaz-html-banner-felvitele]]**

===== Handling clicks =====

==== Handling clicks in case of one link ====

To handle clicks that takes the visitor to the landing page you need an area that could be clicked on. This could be an ''<a>'' tag, where the ''[cthref]'' string should be inserted to the link's place, and this string will be replaced with the right URL address by the AdServer when the ad is served. That URL address will count one click and then redirect to the landing page set in AdServer.

<code html>
<a href=”[cthref]” target=”_blank” class=”classname”></a>
</code>

Of course this could be solved with javascript, in that case the ''[cthref]'' string should also be inserted to the link's place. If encoded links are needed for example to pass as ''GET'' parameter, use ''[cthref.e]'' expression.

:!: **What has to be taken in account in case of Adverticum AdServer internal chaining?**

If we are using <a> tags in our code instead of the code beneath:

<code html>
<a href="[cthref]" target=”_blank”></a>
</code>

Use the following form:

<code html>
<a id="clickTAG" target="_blank" href="[cthref]" onclick="(function(){document.getElementById('clickTAG').href=HttpGetVars.cthref})();"></a>
</code>

There is also an option to retrieve out the CT link using javascript the following way. After which the script can utilize while managing clicks.

<code html>
<script>
    var clickTAG = HttpGetVars.cthref;
</script>
</code>
==== Handling clicks in case of multiple links ====

:!: **In case cratives with multiple CT links, do not use ''[cthref]''.**

In the code to the instead of ''[cthref]'' this should be ''[url:xxxxxxx]'', where the ''xxxxxxx'' is replaced with the URL's ID in AdServer. When uploading the banner the campaign manager creates the URLs in the system by clicking on the ''Add new url'' button, then by clicking on the wanted URL in the list of URLs the administration interface automatically inserts the ''[url:xxxxxxx]'' string into the code where the cursor is. This is why it is recommended to mark in the code to where and which URL should be inserted for the campaign manager.

The banner creator should always follow the information above in case of more links, but it is a different case for the campaign manager, that the clicks on different links is measured altogether or separately. More information is available in the documentation for campaign managers.

==== Passing parameters with the help of <form> ====

The AdServer is able to pass parameters (''HTTP GET'') dynamicaly to the landing page. To forward these, a special parameter has to be set while calling the AdServer.

The value of ''[cthref]'' is always has to be set the admin interface, in the CT URL field.

<code html>

<form method="get" action="[cthref]" target="_blank"> 

    <input type="hidden" name="fwdparams" value="1"> 
    <input type="text" name="parameter1">
    <!-- ... -->
    <input type="submit" value="Mehet">
</form>

</code>

----
===== Requirements for creatives running as markup banners or running on mobile devices =====

The code of markup banners and banners created for mobile devices has to be a valid XHTML code. Since the traditional goa3 code responsible for inserting banners runs on DOM ready, some functions (like document.write) could not be used in the XHTML code of markup banners.

This should be only done on sites, which use the new medthod of invocation, based on document.write, in which case both document.write and initializing on DOMReady event are available.

  * All tags always need to be closed, e.g. .: <br />
  * Every "&" character should be replaced with "&amp;", which is not wrapped in ''CDATA''.
  * Scripts and styles content has to be wrapped in ''CDATA'', to avoid the detection and replacement of special characters, like: ''<'', ''>'', ''&''.

<code html>
<script type=”text/javascript”>
//<![CDATA[
    /*...*/
//]]>
</script>
</code>

<code html>
<style type=”text/css”>
!<![CDATA[
    !...
!]]>
</style>
</code>

  * Also, all image tags must have an ''alt'' attribute, even if the value is only an empty string: 

<code html>
<img alt=”” src=”[file:file.name]”></img>
</code>

:!: **It is necessary to apply that is written here if the traditional Goa3 insertion is used to display ads! But it is not needed to apply if the document.write supporting insertion is used.**


The creative should be prepared for that the during the insertion the Goa3 script builds the DOM elements with JavaScript, so for example if loading of the external code is done by inserting a script tag, the script tag will arrive later because the invocation is initiated only after the element's creation. This may cause a problem like a smaller script that initiates for example the animations will be ready sooner than a js library or jQuery for example.

The solution for this problem is using a script that checks periodically the existence of needed elements and the creative will start running only after everything is ready. This code should be put in the end of the banner code.

<code javascript>
(function () {
    var started = false,
        timer,
        neededElement = undefined,

        adStarter = function() {
        
            if (started) return;

            neededElement = window.$;
            if (neededElement) {

                banner.init();

                started = true;
                clearTimeout(timer);
                return;
            }

            timer = setTimeout(adStarter, 100);
        };

    adStarter();
})();
</code>

We can check the presence of multiple objects:

<code javascript>
neededElement = window.$ && $('myDiv')[0];
</code>

----
===== Variables available =====

^ Name ^ Value ^
| [statichost]   | actual static file server |
| [location]   | banner’s location with full URL |
| [target]   | target window |
| [timestamp]   | actual time |
| [referer]   | title of the referrer page |
| [cthref]   | CT URL |
| [zone]   | zone identifier |
| [goal]   | goal identifier |
| [banner]   | banner identifier |
| [ord]   | page impression ID |
| [uniqueID]   | page impression ID |
| [imgpre]   | banner’s location with full URL |
| [zona] / [zone]   | zone identifier |
| [kampany_id]   | campaign identifier |


----

===== Using Display module functions =====

Different displays are implemented in the goa3 invocation script, as separate javascript classes. These modules which manage displayment are called Displays.

Public displays examples and their parameters can be observed on this location, and different sets of prameters can be tested.

There is the option of developing private custom display modules, the documentation on that is available here:

Several displays need interaction between the module and the creative. Theser are such as (sidekick, multi-expand, slider, etc.). In these cases we have to call the open and close functions. 

=== Important notes! ===

  * In case of HTML banners to ensure that Sidekick and Slider secondary banners are able to close the secondary banner via built in close button, the exact zoneID has to be set, where the primary banner runs. This means that the expression ''[zone]'', has to be replaced with the actual ID hardcoded!
  * HTML banner do not provide a way to check if the banner should start open - for example once a day, so this has to be managed by the banner.
==== Available functions for Displays ====

^ Display name on admin        ^ Display code name in response    ^   open    ^   hide    ^   close    ^
| Billboard                    | billboard                        | x         |           | x          |
| Layer (only Goa3)            | customLayer                      |           |           | x          |
| Embedded                     | embedded                         |           |           |            |
| Filmstrip                    | filmstrip                        |           |           |            |
| Interstitial                 | interstitial                     |           |           | x          |
| Preroll/postroll             | movieClip                        |           |           | x          |
| Multi expand                 | multiExpand                      | x         |           | x          |
| Peel-off                     | peel                             | x         |           | x          |
| Scroll                       | scroll                           |           |           | x          |
| Sidekick                     | sidekick                         | x         | x         | x          |
| Skyscraper                   | skyscraper                       |           |           | x          |
| Slider                       | slider                           | x         | x         | x          |
| Sticky                       | sticky                           |           |           | x          |
| Swimmer                      | swimmer                          |           |           | x          |
| Full page flex               | fullPage                         |           |           | x          |
| Mobil combo                  | mobileCombo                      | x         | x         | x          |

==== HTML banner ====

=== Example using onclick attribute ===

<code html>
<div onclick="(function(){window.top.postMessage('[zone].open', '*');})();">X</div>
</code>

=== Example using jQuery ===

<code javascript>
  $('exampleCloseButton').click(function () {
    window.top.postMessage('[zone].open', '*');
  });
</code>

=== Open ===

<code javascript>
window.top.postMessage('[zone].open', '*');
</code>

=== Close ===

<code javascript>
window.top.postMessage('[zone].close', '*');
</code>

=== Hide ===

<code javascript>
window.top.postMessage('[zone].hide', '*');
</code>
==== Markup banner ====

=== Example using onclick attribute ===

<code html>
<div onclick="(function(){goAdverticum3.getZone([zone]).open();})();">X</div>
</code>

=== Example using jQuery ===

<code javascript>
  $('exampleCloseButton').click(function () {
    goAdverticum3.getZone([zone]).open();
  });
</code>

=== Open ===

<code javascript>
goAdverticum3.getZone([zone]).open();
</code>

=== Close ===

<code javascript>
goAdverticum3.getZone([zone]).close();
</code>

=== Hide ===

<code javascript>
goAdverticum3.getZone([zone]).hide();
</code>

=== Checking open start request ===

<code javascript>
if (goAdverticum3.getZone([zone]).openNow) {
    /*...*/
}
</code>

----

===== Measuring events inside the banner with tracking links =====

:!: **Attention! The AdServer serves the HTML banner in an iframe, so the instructions here are not applicable for Markup banners. The links given here should be used in iframes in order to be able to measure events in Markup banners.**
  
In HTML banners it could be solved to track some events (like clicks that don't take the visitor to the landing page or the use of tabs) with the help of special tracking URLs. The tracking URLs and the information about which tracking URL should measure which event is sent by the banner creator to the campaign manager. (It is favourable for the campaign manager to upload these in a separate measuring campaign.)

:!: **Attention! The uploaded URLs on the admin interface could be referred to the way seen below but those belong to the banner's CT data so they are not good for tracking! For tracking purposes we recommend the direct insertion of tracking links!**

By using tracking URLs practically every event could be measured that sends a signal when the event occurs. Most common event is the click event, but mouse over event is also possible to be tracked. The mouse move event is a counter-example, since the mouse's moving sends signals constantly, so the mouse's residence time could not be measured above a field.

Measuring events with javascript:
<code javascript>

window.goAdverticum3.onReady(function( goa3 ) {

    var $ = goa3jQuery;

    $('#button').click(function ( goa3 ) {
        $.get('http://ad.adverticum.net/t/?z=2084028&g=2084026&b=208402400&h=[LOCATION]&p=[PAGEIID]');
    });
});
</code>

----

===== Measuring events inside the banner with the new statistics system =====

In the new ststistics system, there is the option to measure other user interactions on top of the usual suspects (impression, clicks). With teh help of these measeures, develpers can implement hese features into the banners.

The supported displays automaticly measure user actions like open, and close.

:!: **Attention! The start open request is not measured, only user interactions are.**

The collected data is stashed for a while, and the cyclic data sender sends them to our servers. This happens in every 3 sec, if there is data submit, and the window is in focus. This minimizes network traffic, in contrast if we would send every measure data solo.

Different banner types (HTML, etc.) have different methods of utilyzing these measures. For each of these, we provide an example below. To retrieve all the measures available for the banner, we have to use ''.getZone()'' function.

The boundries for a measure - eg.: how many times can be called per one ad view - can be limited, for example a measure can be called only five times per ad loadm to minimize overcollection of data, and to ensure information reliablility.

The measures can have minimum and maximum boundries, which are detailed below. It is up to configuration how to handle boundy crossing. For example crossing maximum boundry can result in the drop of the measurement if set, or it can be caped to the maximum value allowed. The same's teh case with minimum boundry, where measurement under teh allowed trashold will be ignored, or rounded up for the minimum value.

If the page or zone is reloaded, the measure boundries are reseted, and the reloaded banner will have different instances of the measure classes.
==== Simple event ====

The simple event measure logs each call.

==Boundries:==
  * Maximum number of fires

=== In case of HTML banner ===

Our example we measure the plays of a video ad, for which we use a measure called ''play''.

<code javascript>
window.top.postMessage('[zone].measure.play.fire', '*');
</code>

=== In case of Markup banner ===

The structure of measure ''play'' in our example, which is returned after retrieving the zone data.

<code javascript>
{
    0000000: {
 
        displayed: {Boolean},
        ...
        node: {Object},

        measures: {
            play: {
                fire: function () {...}
            }
        }
    }
}
</code>

Our example we measure the plays of a video ad, for which we use a measure called ''play''.

<code javascript>
goAdverticum3.getZone([zone]).measure.play.fire();
</code>

==== Time measure ====

With the time measurement we can measure the time between a start and a stop event. This works similar to a stopwatch. If a measurement is in progress and the system gets a ’start’ command, it stops and sends the previous measurement and starts a new one. Basically it happens as we would have called the ’stop’ function and then immediately the ’start’.

==Limits:==
  * Maximum number of fire
  * Minimum measurable time
  * Maximum measurable time

=== In case of HTML banner===
In the example we measure the time when the banner is opened. We use the ’Time’ measure for this.
Start of the time measure:
<code javascript>
// We send a message to the top window running Goa3, then indicate 
// the calling measure
window.top.postMessage('[zone].measure.Time.start', '*');
</code>

Finish of the time measure:

<code javascript>
// We send a message to the top window running Goa3, then indicate 
// the calling measure
window.top.postMessage('[zone].measure.Time.stop', '*');
</code>

=== In case of markup banner ===

In our example the structure of the time measure called ’Time’ is available in the following form after requesting the zone data.

<code javascript>

{
    0000000: { // The zone ID is the key and the zone has a content.
 
        displayed: {Boolean},
        ...
        node: {Object},
 
        measures: {
            Time: {
                start: function () {...},
                stop: function () {...},
            }
        }
    }
}
</code>

In the example we measure the time when the banner is opened. We use the ’Time’ measure for this.
Start of the time measure:
<code javascript>
// Starting the time measure.
goAdverticum3.getZone([zone]).measure.Time.start();
</code>

Finish of the time measure:

<code javascript>
// Stopping the time measure.
goAdverticum3.getZone([zone]).measure.Time.stop();
</code>
==== Volume measure ====

Using the volume measure allows us to send aggregated results to the system. In contrast to the simple measure we can send a number as the parameter of the function which will be transformed into a positiv integer (int) by the system.

==Limits:==
  * Maximum number of fire
  * Minimum measurable time
  * Maximum measurable time

=== In case of HTML banner===
In the example we measure the result of a bubble fire game. We use the measure called ’bubbles’ for this. 
<code javascript>
// We send a message to the top window running Goa3, then indicate
// the firing event and the value in the brackets.
window.top.postMessage('[zone].measure.bubbles.fire(5)', '*');
</code>


=== In case of markup banner ===

In our example the structure of the volume measure called ’bubbles’ is available in the following form after requesting the zone data.

<code javascript>

{
    0000000: { // The zone ID is the key and the zone has a content.
 
        displayed: {Boolean},
        ...
        node: {Object},
 
        measures: {
            bubbles: {
                fire: function ( value ) {...} 
            }
        }
    }
}
</code>

In the example we measure the result of a bubble fire game. We use the measuring called ’bubbles’ for this. 

<code javascript>
// We simply fire the event.
goAdverticum3.getZone([zone]).measure.bubbles.fire(5);
</code>


----

===== Goa3 event listeners =====

The applicable events:

  * open - When display is opened
  * close - When display is closed
  * remove - For some display types when the banner is removed (the user makes it disappear)
  * viewable -When the zone gets to be in the screen, it counts as viewable ad if at least 50% of the banner can be seen for at least 1 second (independent from if it is covered or not)
  * invoke - This event happens at the time of the zone's appearance, basically it is similar to the onGoa3Invocation, but the forwarded data is different.

====The useage of Goa3 events====

There are 3 ways to subscribe to the events.

**1. The first case if when the Goa3 reference is used as a base**, so you will be notified about every forthcoming event. This way you can set to be notified about the viewable event:

<code javascript>
window.goAdverticum3.onReady(function( goa3 ) {

	goa3.on('viewable', function ( jQueryEvent, goa3Event ) {
		window.console.log(goa3Event);
	});
});
</code>

In the parameters first the jQuery Event's object arrives then the data package put together by the Goa3. After running the function above you would see the following object in the console:

<code javascript>
{
    type: "viewable",
    zone: {

        id: 1785138,

        displayName: "embedded",
        displayParams: {...},
        
        displayed: true,
        
        width: 250
        height: 250,

        node: jQuery.fn.jQuery.init[1],

        on: function(ev, func) {...},
    }
}
</code>

**2. There is a way to only subscribe to an invidual zone**, which makes the creative developer's job easier. With the help of this solution a creative can be made that will only start its animation if the banner is viewable on the screen. This can be used with Markup.

<code javascript>
goAdverticum3.getZone([zone]).on('viewable', function ( jQueryEvent, goa3Event ) {
  goa3Event.zone.open();
});
</code>
====The available events for the different display types====

In the table below you can see which events are available for the different display types along with the 'viewable' and 'invoke' events but these two are executed by Goa3 clobally so they are independent from the banner and the display.

The marked cases mean the following:


*: Where there are a ''close'' and ''remove'' event available the banner can be opened and closed, and there is a base creative that be closed too, and the latter means the ''remove'' event, when the user makes the base creative disappear. In other cases ''close'' means ''remove''.

^ Display's name in AdServer ^ Display's code name in the response  ^ open  ^ close  ^ remove  ^ viewable  ^ invoke  ^
| Billboard                 | billboard                    | x     | x      |         | x         | x       |
| Layer (only Goa3)         | customLayer                  |     | x      |         | x         | x       |
| Embedded                | embedded                     |       |        |         | x         | x       |
| Filmstrip                 | filmstrip                    |       |        |         | x         | x       |
| Interstitial              | interstitial                 |       | x      |         | x         | x       |
| Preroll/postroll          | movieClip                    |     | x      |         | x         | x       |
| Multi expand        | multiExpand                  | x     | x      |         | x         | x       |
| Corner/peel                 | peel                         | x     | x      |         | x         | x       |
| Scroll                    | scroll                       |       | x      |         | x         | x       |
| Sidekick                  | sidekick                     | x     | x      |         | x         | x       |
| Floating skyscraper       | skyscraper                   |       | x      |         | x         | x       |
| Slider                    | slider                       | x     | x      | x*     | x         | x       |
| Sticky  | sticky                       |       | x      |         | x         | x       |
| Swimmer                   | swimmer                      |       | x      |         | x         | x       |
| Video Overlay             | videoOverlay                 | x     | x      |         | x         | x       |
| Full page flex            | fullPage                     |       | x      |         | x         | x       |
| Mobile combo           | mobileCombo                  | x     | x      | x*     | x         | x       |

----

==== Implemented functions ====

=== .getZones( [zoneID] )===

The .getZones() function is responsible for querying the zone details. If the zoneID is not defined, the function returnes the whole zone list. In this object zone id’s are the keys, with the zone’s details as their values. If we set the zoneID as number or string, then the given zone will be seen in the returning data, but if we ask for a non existing zone, the response will be null. As Array we could ask for data about more zones where the elements are zoneIDs (in number or string form), and in this case only the requested zones will be seen in the response.

:!: **Pay attention! The function .getZones() must be in a separate script tag than the .loadZones() function, because otherwise itt will be evaluated before the response could arrive, hence the system will mark the zones as empty!** :!:

<code javascript>
var zones = goAdverticum3.getZones();
console.log(zones);
</code>

==Parameters==

**zoneID** {Number|String|Array}: Not  mandatory.

The zone’s ID(s) to be queried.

==Visszatérő adatok==

The whole list of zones if the zoneID is not defined.

<code javascript>
{
    0000000: { // The key is the zoneID, and the zone has content.
 
        displayed: {Boolean}, // It shows if the zone was inserted in any way.
        width: {Number}, // The banner’s width that was given on the admin
                           //interface.
        height: {Number}, // The banner’s height that was given there too.
        node: {Object} // The jQuery object where the invocation was.
                       // If there is a preloaded, but not inserted zone, 
                       // then it points to a parentless div.
    },
    0000001: { // The zone’s ID is the key, but it is empty.
 
        empty: true, // True, if it about an empty zone. If it isn’t empty, then
                     // this attribute will not be here.
        node: {Object} // The jQuery object where the invocation was.
                       // If there is a preloaded, but not inserted zone,
                       // thein it points to a parentless div.
    }
}
</code>

Optional data present only in some display types.

<code javascript>

{
    openNow: {Boolean}, // Boolean value, that is true if the banner starts 
                        // in open state, otherwise it is not here.
    open: {Function},  // If there is a registered opening function, it could be
                       // called from here.
    close: {Function}, // If there is a registered closing function, it could be 
                      // called from here.
    hide: {Function}, // If there is a registered hiding function, it could be
                      // called from here.
}
</code>

If a zoneID was defined, but it is not existing.

<code javascript>
null
</code>

===.getZone( zoneID )===

This function provides an easier calling method for a given zone in favour of creatives and their developers. As it is with the getZones method here we can get back optional data too depending on the displays, like openNow, hide etc.

:!: **Pay attention! The function .getZone() must be in a separate script tag than the .loadZones() function, because otherwise itt will be evaluated before the response could arrive, hence the system will mark the zone as empty!** :!:

<code javascript>
var zone = goAdverticum3.getZone(1234567);
console.log(zone);
</code>

==Parameters==

zoneID {Number|String} 

The zone’s ID to be queried.

==Return value==

Data of the zone we asked for.

<code javascript>
{
    id: {Number} // The zone’s ID.
    displayed: {Boolean}, // It shows if the zone was inserted in any way.
    width: {Number}, // The banner’s width that was given on the admin interface.
    height: {Number}, // The banner’s height that was given there too
    node: {Object} // The jQuery object where the invocation was.
}
</code>

----

===== Examples for banner with CSS3 animation and responsive behaviour =====
==== The size of banners running on mobile devices ====

Since the screen sizes are different from device to device, it is favourable to prepare our banner to this. We recommend the use of ''@media'' tag in CSS.

<code css>
@media screen and (max-width: 479px) {

  #[bannerID] {
    width: 320px;
    height: 50px;
  } 
}

@media all and (min-width: 480px){

  #[bannerID] {
    width: 480px;
    height: 120px;
  } 
}
</code>

This would affect that the on those devices or in that state of the screen when the screen is smaller than ''480px'', there the ''320x50'' banner will be displayed. On those screens/in that state when the screen is ''480'' px or its width is more than ''480''px, there the ''480x120'' ad would be seen.

The code above is responsible for changing the styles considering the state of the device. Portrait is for the "standing" position, landscape is for the "lying" position. It is important that the features depending on the device's state should be written in these ''@media'' tags, because if they are defined outside these, the ones outside would overwrite the ones inside in every case! This code is worth using, if the ad is targeted to the screen size.

<code css>
@media all and (orientation: portrait) {

  #[bannerID] {
    width: 320px;
    height: 50px;
  } 
}

@media all and (orientation: landscape){

  #[bannerID] {
    width: 480px;
    height: 120px;
  } 
}

</code>

==== The resizing of banners in case of different screen dimensions ====

The script below is a solving recommendation, if you would like to create a banner that resizes itself, when the devices's state  - standing or lying position - is changed and the banner adapts to that by resizing the elements and/or run the given animations.

In this example we prepare our banner to run the animation designed for standing position if the screen's resolution is smaller than ''480px'' (that is a common width when the device is turned - lying position). If the screen is larger than ''480'' pixels, then we conclude the device's state according to the width and height values of the screen.

The names of ''bigAnimation()'' és ''smallAnimation()'' functions speak for itself, but it is recommended to change the styles because of the dimensions of elements and to place the creative's elements into the starting position.

<code javascript>

var currentOrientation,
    previousOrientation,
    checkOrientation = function () {

        if (window.innerWidth < 480) {
            currentOrientation = 'portrait';
        } else if (window.innerWidth > window.innerHeight) {
            currentOrientation = 'landscape';
        } else {
            currentOrientation = 'portrait';
        }

        if (previousOrientation === currentOrientation) return;
        else {

            if (currentOrientation === 'portrait') smallAnimation();
            else {
                bigAnimation();
            }
        }
        previousOrientation = currentOrientation;
    };

window.addEventListener('resize', function () {
    checkOrientation();
}, false);
checkOrientation();

</code>

==== The animation of banners running on mobile devices ====

When ads is planned to run on Android and iPhone operating systems the ''@webkit-keyframes'' provide tools that are easy to implement and customize for different sizes. It is important, that the ''@webkit-keyframes'' works in Safari, Chrome and other webkit-based browsers. Other options are e.g.: ''@ms-keyframes'' - for Internet Explorer, ''@moz-keyframes'' - for Mozilla Firefox. This way if the webkit is changed in the codes below to the right tag, then our banner would be prepared for other browsers as well. It is important to know, that the different browsers handle animations differently, this is worth looking after then testing the banner in different browsers.

<code css>
@webkit - keyframes[animtionID] {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
</code>

Values in percents are the animation's percent, and the changed attribute-value pair are inside.

<code css>
#[bannerID] {

    -webkit-animation-name: [animationID];
    -webkit-duration: [mp];
    -webkit-iteration-count: [int, infinite];
}
</code>

The listed options are only the tip of the iceberg. Without the purpose of collecting every option, we have listed only the most important tips for animations. Further tips and tricks could be found here: [[http://css-tricks.com]]

Since the IEMobile doesn't work together easy with CSS3, the next example could help, if you would like to display some content only on IEMobile. This code could be used in HTML (it is not guaranteed that it works on older versions of devices than Windows Phone 7)

<code html>

<!--[ifIEMobile]>

…IE specific content here…

<![endif]-->

<!--[if!IEMobile]>

...The content that should left out of consideration by IE...

<![endif]-->
</code>
==== Uploading banners on AdServer ====

The guide to upload banners on AdServer is available on these links for the users with AdServer access. They can login on this site with their e-mail address and password used in AdServer. 

[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/270/17/how-to-create-html-banner-containing-relative-references]]

[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/269/17/creating-markup-banner-xhtmlxml]]
==== Examples ====

We created a simple example banner and on these links we are demonstarting how they work through AdServer

[[https://support.adverticum.net/examples/html5markup/ | View it here on your computer]]

In desktop browser you can view it on this link, how a banner appears on a standing and a lying device's screen

[[https://support.adverticum.net/examples/html5markup/ip.html]]

Use this short version of URL or read the QR code to view the operation of the example banner on your device

[[http://bit.ly/Pjf5Ik]]

{{ :creatives:qr_ko_d.png?nolink&300 |}}

The banner's source code is available on this link:

[[https://support.adverticum.net/examples/html5markup/source.html]]

----
===== Mobil combo display =====

{{ :creatives:mobil_kombi_uj.png?nolink&600 |}}

==== The base creative ====

The ad size should be ''320x50''px on a device with resolution ''320x480'', or ''480x50''px in case of landscape view. The window size can change dynamicaly, so we have to expect this and implement necessary features, which is not rocket science with CSS3.

The base creative has two parts. One for opening and one for closing the display. Simple examples below.

:!: Attention, while choosing the class names, we have to consider to avoid possible conflicts with the publisher site. ** In these examples we use pritty generic names, not recommended for real banners.** The two areas are right next to each other - for the display to show the adequate part. So along the above mentioned expamle device dimensions, tha base creative has to be ''640x50''px, which in landscape would be ''960''px wide. The left half is always the opener area, the roght half is always the closer.

=== Example using dynamic sizes ===

For HTML5 banners, that contains animation, and is responsive, the following is recommended.

<code html>

<div class="wrapper">

    <div class="banner">
        ... Opener content ... 
    </div>

    <div class="banner">
        ... Closeer content ...
    </div>
</div>

</code>

For this the CSS below will be along the one beneath. We refer the rigth and left half with ''.banner:nth-child(odd)'' and ''.banner:nth-child(even)'' pseudo selectors.

<code css>

.wrapper {

    position: absolute;

    width: 200%;
    height: 50px;
}

.banner {

    position: relative;
    overflow: hidden;
    float: left;

    width: 50%;
    height: 50px;
}

.banner:nth-child(odd) {
    background-color: #f00;
}

.banner:nth-child(even) {
    background-color: #0f0;
}
</code>

=== Example using exact dimensions ===

For banners where the open and close area is coverd by an image for example the code below will help. The right picture is shown in the right state (port/land).

<code html>

<div class="wrapper">

    <div class="portrait">
        ... Portrait content ...
    </div>
    <div class="landscape">
        ... Landscape content ...
    </div>
</div>

</code>

For the HTML above, this CSS will manage the displayment of the right content.

<code css>

.banner {

    position: relative;
    float: left;
    overflow: hidden;

    width: 50%;
    height: 50px;
}

.portrait {

    width: 320px;
    height: 50px;
}

.landscape {

    width: 480px;
    height: 50px;
}

@media only screen and (orientation: portrait) {

    .portrait {
        display: block;
    }

    .landscape {
        display: none;
    }
}

@media only screen and (orientation: landscape) {

    .portrait {
        display: none;
    }

    .landscape {
        display: block;
    }
}

</code>

==== Full page creative ====

This creative will cover the rest of the viewport. With the example from above, the portrait deimensions will be around ''320x430''px, while the landscape will be ''480x290''px if the whiole screen is available.

Ezen kód egy halvány piros háttér előtt jeleníti meg a fektetett vagy állított tartalmat. Jelenleg csak egy szöveg van benne, de ez lehet szinte akármilyen bonyolultságú HTML5 vagy akár csak két kép, egy az állított állapothoz, egy pedig a fektetetthez.

<code html>

<div id="fullPage">

    <div class="title port">
        ... Portrait content ...
    </div>

    <div class="title land">
        ... Landscape content ...
    </div>

</div>

</code>

And the accompanying CSS.

<code css>

#fullPage {

    position: absolute;

    height: 100%;
    width: 100%;
    background-color: #faa;
}

.title {

    width: 100px;
    margin: 20px auto;

    text-align: center;
    color: #000;
}

@media only screen and (orientation: portrait) {

    .port {
        display: block;
    }

    .land {
        display: none;
    }
}

@media only screen and (orientation: landscape) {

    .port {
        display: none;
    }

    .land {
        display: block;
    }
}

</code>