User Tools

Site Tools


creatives:html-en

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
creatives:html-en [2015/09/30 16:32]
avarga [Mobil combo display]
creatives:html-en [2018/06/12 11:34] (current)
zkocsis
Line 12: Line 12:
 ==== HTML or Markup banner? What is it all about, and what's the difference in Adverticum'​s AdServer? ==== ==== HTML or Markup banner? What is it all about, and what's the difference in Adverticum'​s AdServer? ====
  
-Markup ​banneres ​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. +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 
-==== HTML ====+]]
  
-HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation,​ making it a markup language, rather than a programming language. 
-==== XML ==== 
- 
-Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable. It is defined by the W3C's XML 1.0 Specification and by several other related specifications,​ all of which are free open standards. 
-==== XHTML ==== 
- 
-Extensible Hypertext Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used Hypertext Markup Language (HTML), the language in which Web pages are formulated. 
- 
-While HTML, prior to HTML5, was defined as an application of Standard Generalized Markup Language (SGML), a flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. XHTML documents are well-formed and may therefore be parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser. 
- 
-==== HTML5 ==== 
- 
-HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It was finalized, and published, on 28 October 2014 by the World Wide Web Consortium (W3C). This is the fifth revision of the HTML standard since the inception of the World Wide Web. The previous version, HTML 4, was standardized in 1997. 
- 
-Its core aims are to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. 
- 
----- 
- 
-===== About banners developed for easyHTML template ===== 
- 
-**The use of this method is recommended and detailed here: [[http://​dev.adverticum.com/​creatives:​ehtml-en]]** 
- 
-The purpose of this new method of serving HTML banners is to ease the management of the of the more and more widely used HTML creatives - superseding Flash banners - for both the developers and campaign managers. This is achieved in the form of an Markup template which is provided free of charge. 
- 
-In the perspect of development,​ the necessary modifications are less, so less to do after the creative is finished. Some notes on the advantages versus regular HTML baneners. 
- 
-  * No need to restructure the banner, if it already works by opening the creative in a browser, so no need to strip ''<​head>''​ or ''<​body>''​ tags. 
- 
-  * No more encodeing issues sometimes faced with regular ''​HTML''​ banners, rooted in some technical specifics. 
- 
-  * Simplified interface for display usage available, mainly in regards of Sidekick and Slider displays. 
- 
-  * Handling open start requests are possible unlike with ''​HTML''​ banners. 
- 
-  * Usage of relative ''​URL''​s is made possible, no need to replace resource links with AdServer variables. 
- 
-  * All necessary data and functions are provided through a single object, no need for AdServer variables. 
- 
-  * Rich media creatives and multi CT banners are also supported. 
- 
----- 
  
 ===== Restrictions regarding HTML banners (HTML/​XHTML/​HTML5 codes) ===== ===== Restrictions regarding HTML banners (HTML/​XHTML/​HTML5 codes) =====
Line 72: Line 31:
  
 <code html> <code html>
-<link type=”text/​css” href=”[fájlnév.kiterjesztés]” />+<link type=”text/​css” href=”[file:file.name]” />
 </​code>​ </​code>​
  
Line 78: Line 37:
  
 <code html> <code html>
-<div style=”background:​[fáljnév.kiterjesztés]”></​div>​+<div style=”background:​[file:file.name]”></​div>​
 </​code>​ </​code>​
  
Line 115: Line 74:
  
 <code html> <code html>
-<a id="​clickTAG"​ target=_blank” href="​[cthref]"​ onclick="​(function () document.getElementById('​clickTAG'​).href=HttpGetVars.cthref})();"></​a>​+<a id="​clickTAG"​ target="_blank" ​href="​[cthref]"​ onclick="​(function(){document.getElementById('​clickTAG'​).href=HttpGetVars.cthref})();"></​a>​
 </​code>​ </​code>​
  
Line 181: Line 140:
  
 <code html> <code html>
-<img alt=”” src=”[fáljnév.kiterjesztés]”></​img>​+<img alt=”” src=”[file:file.name]”></​img>​
 </​code>​ </​code>​
  
Line 440: Line 399:
 goAdverticum3.getZone([zone]).measure.play.fire();​ goAdverticum3.getZone([zone]).measure.play.fire();​
 </​code>​ </​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>​
 +
  
 ---- ----
creatives/html-en.1443623568.txt.gz · Last modified: 2015/09/30 16:32 by avarga