WO2017134487A1 - Method for dynamically displaying multimedia contents - Google Patents

Method for dynamically displaying multimedia contents Download PDF

Info

Publication number
WO2017134487A1
WO2017134487A1 PCT/IB2016/050611 IB2016050611W WO2017134487A1 WO 2017134487 A1 WO2017134487 A1 WO 2017134487A1 IB 2016050611 W IB2016050611 W IB 2016050611W WO 2017134487 A1 WO2017134487 A1 WO 2017134487A1
Authority
WO
WIPO (PCT)
Prior art keywords
webpage
interactive
computer
implemented method
content
Prior art date
Application number
PCT/IB2016/050611
Other languages
French (fr)
Inventor
Sérgio MIGUEL CACHUCHO PEREIRA
Guilherme FILIPE GAMITO MENDES LOPES
Original Assignee
Myclickbox Sa
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Myclickbox Sa filed Critical Myclickbox Sa
Priority to PCT/IB2016/050611 priority Critical patent/WO2017134487A1/en
Publication of WO2017134487A1 publication Critical patent/WO2017134487A1/en

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/955Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9558Details of hyperlinks; Management of linked annotations

Definitions

  • the present invention refers to methods for loading webpages with content .
  • the present invention refers to a method for associating multimedia contents to any display point or location of a given webpage, such as images, videos, words/sentences or even blank space within online webpages, through incorporating a given software code in a particular website, wherein said code requests to the designated or main server - herein described as "Clickly Server” - a list of interactive tags, preferably interactive bubbles, which were previously associated to said website. For each tag, a set of spatial coordinates (either x/y or contextual information) plus the bubble content data are received and processed by said code, being thereby converted in newly displayed webpage contents, dynamically.
  • the contents created are part of the webpage lying underneath, and not a 3 rd party resource provided by iframes or any other commonly known method.
  • the present method has, as its main advantage, the fact that the contents to be made available, can overlap any type of content that exists on said webpage, and maintains its contextual relevance and positioning by adapting to the screen size and device specifications where said webpage is loaded. Also, because the contents to be made available to said webpage are loaded right after the underlying webpage is loaded, they do not impact negatively the webpage loading time, for example, by delaying said loading time. And because all those contents are loaded at once on that same moment, they remain available within said webpage should there be any kind of interruption or speed impairing issue in the available network connection.
  • the present invention provides a method that allows enriching webpages with interactive content on top of the webpage' s original content, regardless of what type of content the webpage contains, or what type of device it is displayed on. This method also allows for a higher volume (about 5 times as much when compared to state of the art methods) of information to be retrieved and placed as interactive content to be provided on said webpage instantly, without the commonly experienced delays in accessing such contents.
  • a page update handler which may be loaded by a web browser with or as part of a web page, adds functionality for dynamically updating the web page with content supplied by a content server.
  • the page update handler displays a corresponding overlay display object within the web page.
  • the overlay display object displays supplemental content associated with the recognized item, and may provide functionality for the user to further interact with the content server.
  • the supplemental content may be retrieved from the content server in response to the mouse ⁇ over event, or may be retrieved pre-emptively and maintained hidden until the mouse-over event occurs.
  • the page update handler may, in some embodiments, display the supplemental content elsewhere on the page.
  • the supplemental content may be displayed in a designated area on the page, may be appended at the end of the page, or may be inserted between existing display components .
  • an operator of a web site that is separate from the content server can enable overlay display objects within its web pages by merely adding an update handler tag, which may be in the form of a JavaScript command or sequence, to one or more corresponding HTML (Hypertext Markup Language) documents.
  • an update handler tag which may be in the form of a JavaScript command or sequence
  • HTML Hypertext Markup Language
  • the web site operator need not have any experience with technologies commonly used to add dynamic content to web pages.
  • the same content server generates and serves the original web page, and thereafter supplements the web page in response to mouse-over events .
  • the present invention commercially disclosed as Clickly®, not only provides the possibility of retrieving pre-emptively and maintaining hidden supplemental content displayed in response to a mouse-over event, but also allows for associating said supplemental content to any point of the displayed webpage regardless of the type of content lying underneath, in the webpage, not only on top of keywords, and operation of a specifically developed software.
  • the present invention allows for continuous adjustment of the coordinate calculation, depending on the desired location for interactive tags and/or bubbles and display of supplemental contents, even when the webpage itself is changed, assuring - in the present invention - that the intended interactive tags and/or bubbles and corresponding supplemental contents are always loaded and placed in the same contextual place, unlike US7975020 provides .
  • the same interactive tag and/or bubble may be associated to different locations/sites, such as an advertisement displayed in several locations of a given webpage or in several different webpages.
  • the same location may display several interactive tags corresponding to several contents (for instance, commercials or other type of advertisement) being displayed only once at a time, depending on the time of the day, country, language or other kind of preferred settings.
  • US 2013/0013992 discloses a computer implemented method including: receiving a link to a webpage to be associated with a visual object in an overlay element, identifying the link as a transmutable link, transmuting the link into an application link, receiving a request for content for an overlay element for the visual object, and providing, in response to said request, the application link as a designated source of content of the overlay element for said visual object.
  • This overlay element is served over images as an iframe (a visual method that allows a webpage to set a certain rectangle to display contents from another webpage) .
  • the present invention Clickly, is different from the above disclosure in that it doesn't work as an iframe that loads content from a different webpage.
  • the present invention implements a method of loading content that is part of the webpage it lays on. Furthermore, this invention allows overlaying content to be placed on top of any position of a webpage, not only images.
  • EP 2651110 discloses a method and apparatus for receiving an image associated with an interactive service on at least one social media server, the image belonging to a group of images.
  • the image is stored and accessing of the image by a user is detected.
  • a request with an identification of the image is sent to a back-end server to access the interactive service.
  • Interaction messages are exchanged with the interactive service so that the interactive service associated with the image is made available to users by accessing the image .
  • the present invention Clickly, on the other hand discloses a method that allows overlaying content to be associated not only to images but to any position displayed on a website, regardless of the type of content underneath (text, image, video, etc) .
  • the method herein claimed is also substantially different from the one disclosed in EP 2651110, because in the method of the present invention, the interaction with the server does not ask for an image nor a group of images, but just for the content associated with a webpage .
  • Automatically refers to a method and/or it's stages and steps that run/are executed and achieve it's results/products/outcomes in a way that is independent of human inputs or interventions.
  • Browser is a software program running in the viewer' s computer, which accesses the internet and loads webpages.
  • Clickly database is a set of files stored in the Clickly server storage module.
  • Computer is any device (desktop, laptop, tablet, smartphone, etc) which contains, amongst other components, a CPU module
  • a storage module (hard disk or memory, responsible for storing data)
  • a network interface module (an electronic circuitry responsible for processing instructions), a storage module (hard disk or memory, responsible for storing data) , and a network interface module
  • Computer program within the context of the present application is is a collection of instructions that performs a specific task when executed by a computer and comprising the steps represented in detail in Figures 1 to 3.
  • Contextual information when mentioning the position of an interactive bubble, refers to the fact that in different devices, with different features such as screen sizes, internet browsers, software or hardware features, Clickly' s algorithms retrieve information regarding the spot, in a webpage, where the bubble appears.
  • Such information includes, but is not limited to, x/y coordinates, HTML (or XML or other markup language) element (s) that are relevant for the identification of the context, image URLs, texts, etc.
  • Coordinate mapping refers to the calculations made from the contextual information retrieved, that allow the positioning of the bubbles in the same contextual place in any webpage of any website.
  • Dynamically displayed contents refer to a webpagee that opens in a browser, or a view that opens in a mobile application or app, and has both static content and dynamic content. When it first loads the elements that compose it and are visible to the user, those remain as the static contents in the webpage. After those, the dynamic code (on a browser it's a scripting language, such as Javascript; but other languages can be used mainly on mobile devices, such as Java or Objective-C) is compiled and executed, whose execution leads to operations that may include introducing new elements in the content or altering existing elements, all those modifications are made visible by dynamic contents being displayed. These dynamic displayed contents are the result of the execution of dynamic code that may either comprise just local operations or also interactions with servers.
  • Identical piece of text in the context of retrieving contextual information, refers to words and expressions found in a webpage that are matched to make sure the bubbles are placed in the same contextual place.
  • Interaction with the server refers to a Client-Server model of computation where Client and Server communicate over a computer network to exchange data and do computational tasks.
  • the code that is executed on the browser is the Client, which communicates over the internet with Clickly' s Server. This communication is considered an interaction with the server.
  • Interactive Bubble is a set composed of Interactive Marker, Interactive Container, and position within the webpage.
  • Interactive Container is an overlay container with content inside. This content can have the following types of interactive content:
  • banner (such as a clickable image that redirects to another webpage when clicked) ;
  • third party integrations such as but not restricted to social media, maps, video, soundtracks, ad servers, etc.
  • data forms (such as but not restricted to email or other demographic data) ;
  • Interactive Container's size and shape means the height /width that the container has in a given screen/device, and the visual attributes it possesses, such as color, shape, shadows, etc .
  • Interactive content refers to content, within a webpage, which reacts to the user inputs. These user inputs can be mouse overs, clicks, scrolls or other mouse actions in mouse- oriented devices, and they can also be touches, swipes or other touch actions in touch-oriented devices. The content reactions to these inputs can be such as, but not limited to, elements in the webpage to appear, disappear, or changing colors, shapes, positions or other attributes that are noticeable to the viewer of said webpage.
  • Interactive Marker is a visual indicator that reacts to mouse over events (in desktop/laptop and any mouse pointed devices) and finger touch events (in mobile and any finger pointed devices) .
  • This visual indicator is either (style of interactive marker) :
  • An icon (either animated or static) positioned in any point in the website.
  • a text highlight such as an underline, a background or text colour change or a related animation.
  • Mobile application is a software program running in the viewer' s computer, which accesses the internet and loads webpages .
  • Mouse—over event means a graphical control element that is activated when the user moves or "hovers" the pointer over its trigger area, usually with a mouse, but also possible using a digital pen.
  • the graphical control element is particularly common in web browsers where the URL of a hyperlink can be viewed in the status bar.
  • Site designers can easily define their own mouse-over events using JavaScript and/or Cascading Style Sheets. In case of multiple layers the mouse-over event is triggered by the uppermost layer.
  • Mouse-over events are not limited to web design and are commonly used in modern GUI programming. Their existence might not even be known to the user as the events can be used to call any function and might affect only the internal workings of the program.
  • Multimedia refers to content that uses a combination of different content forms. This contrasts with media that use only rudimentary computer displays such as text-only or traditional forms of printed or hand-produced material.
  • Multimedia includes a combination of text, audio, still images, animation, video, or interactive content forms. Multimedia can be recorded and played, displayed, dynamic, interacted with or accessed by information content processing devices, such as computerized and electronic devices, but can also be part of a live performance.
  • Multimedia devices are electronic media devices used to store and experience multimedia content. Multimedia is distinguished from mixed media in fine art; by including audio, for example, it has a broader scope.
  • the term "rich media" is synonymous for interactive multimedia. Hypermedia scales up the amount of media content in multimedia application.
  • routine and subroutine are general and nearly synonymous terms for any sequence of code that is intended to be called and used repeatedly during the execution of a program. This makes the program shorter and easier to write (and also to read when necessary) .
  • the main sequence of logic in a program can branch off to a common routine when necessary. When finished, the routine branches back to the next sequential instruction following the instruction that branched to it.
  • a routine may also be useful in more than one program and save other programmers from having to write code than can be shared.
  • a routine that requires some variable input can be encoded into a macro definition with a specified interface called a macro instruction. The programmer can then use a macro instruction instead of having to include and manage the branching to a routine. Macro definitions and instructions also tend to be shared among programmers for use in multiple programs, especially in software development projects.
  • routines In higher-level computer languages, many commonly-needed routines are prepackaged as function , which are routines with specified programming interfaces. Some functions can be compiled in line with other code. Other functions are compiled in as stub, that make dynamic calls for system services during program execution. Functions are sometimes called library routines. The compiler and a set of library routines usually come as part of a related software development package.
  • Server or Clickly server is the set of physical computers (servers) which run the Clickly solution backend software.
  • Supplemental content refers to content that is not visible to the viewer when a webpage loads in a browser (or view on a mobile app) , although it is loaded as elements of the content (such as HTML DOM elements), and is made visible upon certain actions that happen in the webpage/view, either produced by interactions from the viewer or not.
  • Support device may be any general purpose device that can be programmed to carry out a set of arithmetic or logical operations automatically, such as a computer, a mobile phone, a tablet, a watch, or any other suitable device for displaying webpages and contents, within the scope of the present invention .
  • Stub is a small program routine that substitutes for a longer program, possibly to be loaded later or that is located remotely.
  • a program that uses Remote Procedure Calls (RPC) is compiled with stubs that substitute for the program that provides a requested procedure.
  • RPC Remote Procedure Calls
  • the stub accepts the request and then forwards it (through another program) to the remote procedure.
  • that procedure has completed its service, it returns the results or other status to the stub which passes it back to the program that made the request.
  • Tag refers to a piece of code, such as a DOM element in an HTML (Hypertext Markup Language) webpage, that in a webpage usually translates to some visible element, but can also be an hidden element only accessible through code that processes it dynamically, after the webpage is loaded.
  • HTML Hypertext Markup Language
  • the tag is preferably visualized in the shape of a bubble.
  • Third party content refers to contents that are served by other entities/companies (eg: Youtube, Google Maps) and that are loaded together with contents from the Clickly server. In these cases typically what is loaded from the Clickly server is a URL or other reference that allows to load the actual content from the third party server (or the server where the third party content is stored) .
  • Volume of information refers to the size in Bytes (or a multiplier, such as KiloBytes or MegaBytes) that a set of computational data contains. Usually this is referred in the context of a Client-Server interaction, where the volume of information is relevant to the time said interaction takes.
  • Webpage refers to a viewable area in a device that makes visible to a user any contents therein. It can be loaded in a browser (either on desktop/ laptop or mobile devices) or in a mobile application (on mobile devices) .
  • x/y proportion is the relation between the x/y coordinates that define the width/height of the location of a point inside a webpage/image/area and of the webpage/image/area itself, being the x coordinate the width and the y coordinate the length.
  • X coordinates are measured horizontally and y coordinates are measured vertically.
  • the present invention refers to a computer-implemented method for association of contents to programmable tags and/or bubbles through the software program developed within the present invention and said method provides for an additional advantageous effect, by solving an objective technical problem which is how to dynamically display contents as overlay contents in response to a mouse-over event or equivalent (touch, etc.) without having fixed pre-programmed position coordinates for a given display screen, overcoming commonly occurring problems in loading overlay contents, arising from a weak and/or slow internet connection, and also in a manner that allows this overlay content to be placed on top of any place in a webpage, regardless of the type of content lying underneath or the type and shape of the screen of the device used to visualise such contents and/or webpages.
  • the calculation and placement of the interactive marker in a certain position of the screen is such that, for each webpage, it is automatically adjusted to the support device and to the screen size it is loaded on, the corresponding contents being displayed in the same positions, relative to the contents of the webpage itself, in all support devices.
  • the present invention refers to a computer-implemented method for associating multimedia contents to programmable tags through a software function on a webpage wherein said contents are fully loaded into said webpage and are displayed, in response to a mouse-over and/or touch event, as an overlay to said webpage in previously determined positions within the screen of the support device, defined by coordinate mapping wherein the coordinates defining such positions of said tags are calculated by said software and according to at least one of the following: a) previous manual placement of tags by the webpage owner, wherein the webpage owner places an Interactive tag and/or bubble in a certain position of the screen by clicking and/or touching it, and the technology displays it in the same contextual location on every access to said webpage; b) automatic placement of tags by the Server, wherein the content of the webpage is analysed by the Clickly Server and matched with previously acquired knowledge, deciding if one or more Interactive tags are to be placed in said webpage and in what positions .
  • Previously acquired knowledge depends on the use case, and it includes, but is not limited to, previous analysis to said website pages and contents, previous analysis of advertising opportunities related to said webpage content, etc.
  • a webpage loads in a browser (on a laptop/desktop or mobile device) , or in a mobile application (on a mobile device) resulting from actions from the user, such as typing the address in a URL bar, following a link, or opening a mobile app .
  • the webpage connects to the backend server, to request information.
  • the server returns a set of data to enrich the webpage content with a number of Interactive Bubbles.
  • This data contains, for each Interactive Bubble : • Style and positioning data of Interactive Marker;
  • This data is interpreted by the webpage, which creates Interactive Markers according to the specifications loaded, which means that each of these Interactive Markers is placed in the respective position within the webpage and displayed with the adequate style (icon, shape, color, etc) .
  • Attached to each Interactive Marker is an Interactive Container, located above, bellow, to the right or to the left of the Marker according to the position of Market within the webpage .
  • the content, size and shape of the Interactive Container is generated according to the information received, and displayed to the user as such. All Interactive Containers are invisible when loaded, and showed according to interactions made upon the Interactive Markers. As both Markers and Containers are interactive, they react to the webpage user's actions (mouse or touch, according to the device) .
  • Automatic calculation and placement of the interactive marker in a certain position for each webpage is performed contextually, identically and independently of the device and screen size it is loaded on. This positioning can originate from : In an embodiment, said placement is manually performed by the webpage owner, wherein a webpage owner will place an Interactive Bubble in a certain location by clicking/touching it .
  • said placement is performed automatically Automatic placement by Clickly Server, wherein Clickly algorithms, running on Clicky servers, read and analyse the content of the webpage and decide automatically where to place one or more Interactive Bubbles.
  • Clickly algorithms running on Clicky servers, read and analyse the content of the webpage and decide automatically where to place one or more Interactive Bubbles.
  • This calculation can take into account different factors, such as, but not limited to, contextual analysis to match the webpage content with advertisements that are stored in Clickly server, a detected relationship between the webpage content and other webpage' s content, etc.
  • the Interactive Container When visible, the Interactive Container responds to interactions according to its content, in a manner such as: a button or clickable banner can be clicked, a video can be played, an input field can be filled, a 5star rating system can be starred, radio button or checkbox can be checked, and third party content respond to interactions according to the specification of the provider.
  • Interactive tags can be used for online content creators to enrich their content, such as images or text. This enrichment can either be used for editorial purposes or commercial purposes, such as sponsored content.
  • Interactive tags can also be used to programmatically distribute ads on top of content on said webpages, where the algorithms and calculations made by the Clickly Server are used to distribute ads on these websites according to prior targeting/configuration/programming that is stored on the Clickly Server.

Abstract

The present invention refers to a method for associating multimedia contents to online inventory, like texts or images within online websites, blogs or social media. This is achieved through incorporating a given software code in a particular online website, wherein said code requests to the designated or main server a list of interactive tags. For each interactive tag, content data are received and processed by said code, being thereby converted in newly displayed webpage contents, dynamically. The contents created are part of the webpage lying underneath, and not a 3rdparty resource provided by iframes or any other commonly known method. All these steps result from a single interaction with the server, triggered by a given user, upon loading the webpage.

Description

DESCRIPTION
METHOD FOR DYNAMICALLY DISPLAYING MULTIMEDIA CONTENTS
Technical Field of the Invention
The present invention refers to methods for loading webpages with content .
Summary of Invention
The present invention refers to a method for associating multimedia contents to any display point or location of a given webpage, such as images, videos, words/sentences or even blank space within online webpages, through incorporating a given software code in a particular website, wherein said code requests to the designated or main server - herein described as "Clickly Server" - a list of interactive tags, preferably interactive bubbles, which were previously associated to said website. For each tag, a set of spatial coordinates (either x/y or contextual information) plus the bubble content data are received and processed by said code, being thereby converted in newly displayed webpage contents, dynamically. The contents created are part of the webpage lying underneath, and not a 3rd party resource provided by iframes or any other commonly known method. All these steps result from a single interaction with the server, triggered by a given user, upon loading the webpage. After this loading stage, said code assures the interpretation and conversion of the server' s reply, translating such a reply in contents to become available on said webpage in a specific and pre-programmed location .
The present method has, as its main advantage, the fact that the contents to be made available, can overlap any type of content that exists on said webpage, and maintains its contextual relevance and positioning by adapting to the screen size and device specifications where said webpage is loaded. Also, because the contents to be made available to said webpage are loaded right after the underlying webpage is loaded, they do not impact negatively the webpage loading time, for example, by delaying said loading time. And because all those contents are loaded at once on that same moment, they remain available within said webpage should there be any kind of interruption or speed impairing issue in the available network connection.
Considering the state of the art in this respect, the present invention provides a method that allows enriching webpages with interactive content on top of the webpage' s original content, regardless of what type of content the webpage contains, or what type of device it is displayed on. This method also allows for a higher volume (about 5 times as much when compared to state of the art methods) of information to be retrieved and placed as interactive content to be provided on said webpage instantly, without the commonly experienced delays in accessing such contents.
Background of the Invention
Document US 7975020 discloses the closest prior art, a method of providing a dynamically updatable web page, the method comprising :
(i) causing a web browser running on a user computer to load update handler code over a network such that the update handler code becomes part of a web page loaded by the browser, said update handler code comprising browser-executable code that is capable of causing the web browser to update a display of the web page with content retrieved from a content server; (ii) detecting an occurrence of a pre-specified keyword or keyword phrase in visual content of the web page; retrieving an advertisement associated with the keyword or keyword phrase over a network from the content server to the user computer, said advertisement being a sponsored link advertisement that has a pre-specified association with the keyword or keyword phrase, wherein retrieving the advertisement comprises extracting content of the advertisement from a script file received from the content server, wherein extracting said content from the script file comprises extracting an HTML string that is surrounded by quotations and assigned to a script variable; and
(iii) responding to a mouse-over event in which a mouse pointer is positioned over the occurrence of the pre-specified keyword or keyword phrase on a visual display of the web page on the user computer by causing the advertisement to be displayed by said user computer in an overlay display object in association with the keyword or keyword phrase, said overlay display object being part of the web page; wherein the advertisement is retrieved from the content server and displayed in the overlay display object via execution of the update handler code by the web browser.
It provides a page update handler, which may be loaded by a web browser with or as part of a web page, adds functionality for dynamically updating the web page with content supplied by a content server. In one embodiment, when a mouse-over event occurs with respect to a recognized item on the web page, such as a hyperlink that matches a particular link signature, the page update handler displays a corresponding overlay display object within the web page. The overlay display object displays supplemental content associated with the recognized item, and may provide functionality for the user to further interact with the content server. The supplemental content may be retrieved from the content server in response to the mouse¬ over event, or may be retrieved pre-emptively and maintained hidden until the mouse-over event occurs.
As an alternative to displaying the supplemental content in an overlay display object, the page update handler may, in some embodiments, display the supplemental content elsewhere on the page. For example, the supplemental content may be displayed in a designated area on the page, may be appended at the end of the page, or may be inserted between existing display components .
In one embodiment, an operator of a web site that is separate from the content server can enable overlay display objects within its web pages by merely adding an update handler tag, which may be in the form of a JavaScript command or sequence, to one or more corresponding HTML (Hypertext Markup Language) documents. Thus, the web site operator need not have any experience with technologies commonly used to add dynamic content to web pages. In another embodiment, the same content server generates and serves the original web page, and thereafter supplements the web page in response to mouse-over events .
The present invention, commercially disclosed as Clickly®, not only provides the possibility of retrieving pre-emptively and maintaining hidden supplemental content displayed in response to a mouse-over event, but also allows for associating said supplemental content to any point of the displayed webpage regardless of the type of content lying underneath, in the webpage, not only on top of keywords, and operation of a specifically developed software. The present invention allows for continuous adjustment of the coordinate calculation, depending on the desired location for interactive tags and/or bubbles and display of supplemental contents, even when the webpage itself is changed, assuring - in the present invention - that the intended interactive tags and/or bubbles and corresponding supplemental contents are always loaded and placed in the same contextual place, unlike US7975020 provides .
This adjustment of coordinate calculation is automatic and performed by the algorithms herein described.
Furthermore, the fact that the present invention provides saving in Clickly Server the interactive tags and/or bubbles and their respective positioning, the same interactive tag and/or bubble may be associated to different locations/sites, such as an advertisement displayed in several locations of a given webpage or in several different webpages. Also, the same location may display several interactive tags corresponding to several contents (for instance, commercials or other type of advertisement) being displayed only once at a time, depending on the time of the day, country, language or other kind of preferred settings.
Other documents, such as US 2013/0013992 and EP 2651110 disclose computer-implemented methods for handling and interacting with image contents.
US 2013/0013992 discloses a computer implemented method including: receiving a link to a webpage to be associated with a visual object in an overlay element, identifying the link as a transmutable link, transmuting the link into an application link, receiving a request for content for an overlay element for the visual object, and providing, in response to said request, the application link as a designated source of content of the overlay element for said visual object. This overlay element is served over images as an iframe (a visual method that allows a webpage to set a certain rectangle to display contents from another webpage) .
The present invention, Clickly, is different from the above disclosure in that it doesn't work as an iframe that loads content from a different webpage. The present invention implements a method of loading content that is part of the webpage it lays on. Furthermore, this invention allows overlaying content to be placed on top of any position of a webpage, not only images.
EP 2651110 discloses a method and apparatus for receiving an image associated with an interactive service on at least one social media server, the image belonging to a group of images. The image is stored and accessing of the image by a user is detected. In response, a request with an identification of the image is sent to a back-end server to access the interactive service. Interaction messages are exchanged with the interactive service so that the interactive service associated with the image is made available to users by accessing the image .
The present invention, Clickly, on the other hand discloses a method that allows overlaying content to be associated not only to images but to any position displayed on a website, regardless of the type of content underneath (text, image, video, etc) . To achieve this, the method herein claimed is also substantially different from the one disclosed in EP 2651110, because in the method of the present invention, the interaction with the server does not ask for an image nor a group of images, but just for the content associated with a webpage . DEFINITIONS
Herein follows a set of definitions for the purpose and within the context of the present invention.
Automatically refers to a method and/or it's stages and steps that run/are executed and achieve it's results/products/outcomes in a way that is independent of human inputs or interventions.
Browser is a software program running in the viewer' s computer, which accesses the internet and loads webpages.
Clickly database is a set of files stored in the Clickly server storage module.
Computer is any device (desktop, laptop, tablet, smartphone, etc) which contains, amongst other components, a CPU module
(an electronic circuitry responsible for processing instructions), a storage module (hard disk or memory, responsible for storing data) , and a network interface module
(Ethernet, LAN, WLAN, etc, responsible for the communications between computers/servers) .
Computer program within the context of the present application is is a collection of instructions that performs a specific task when executed by a computer and comprising the steps represented in detail in Figures 1 to 3.
Contextual information, when mentioning the position of an interactive bubble, refers to the fact that in different devices, with different features such as screen sizes, internet browsers, software or hardware features, Clickly' s algorithms retrieve information regarding the spot, in a webpage, where the bubble appears. Such information includes, but is not limited to, x/y coordinates, HTML (or XML or other markup language) element (s) that are relevant for the identification of the context, image URLs, texts, etc.
Coordinate mapping refers to the calculations made from the contextual information retrieved, that allow the positioning of the bubbles in the same contextual place in any webpage of any website.
Dynamically displayed contents refer to a webpagee that opens in a browser, or a view that opens in a mobile application or app, and has both static content and dynamic content. When it first loads the elements that compose it and are visible to the user, those remain as the static contents in the webpage. After those, the dynamic code (on a browser it's a scripting language, such as Javascript; but other languages can be used mainly on mobile devices, such as Java or Objective-C) is compiled and executed, whose execution leads to operations that may include introducing new elements in the content or altering existing elements, all those modifications are made visible by dynamic contents being displayed. These dynamic displayed contents are the result of the execution of dynamic code that may either comprise just local operations or also interactions with servers.
Identical piece of text, in the context of retrieving contextual information, refers to words and expressions found in a webpage that are matched to make sure the bubbles are placed in the same contextual place.
Interaction with the server refers to a Client-Server model of computation where Client and Server communicate over a computer network to exchange data and do computational tasks. In the context of a browser opening a webpage, the code that is executed on the browser is the Client, which communicates over the internet with Clickly' s Server. This communication is considered an interaction with the server.
Interactive Bubble is a set composed of Interactive Marker, Interactive Container, and position within the webpage.
Interactive Container is an overlay container with content inside. This content can have the following types of interactive content:
banner (such as a clickable image that redirects to another webpage when clicked) ;
button;
image;
text;
video;
third party integrations (such as but not restricted to social media, maps, video, soundtracks, ad servers, etc);
surveys;
rating polls;
data forms (such as but not restricted to email or other demographic data) ;
open text forms;
a set of more than one of the above mentioned types of content aggregated together.
Interactive Container's size and shape means the height /width that the container has in a given screen/device, and the visual attributes it possesses, such as color, shape, shadows, etc . Interactive content refers to content, within a webpage, which reacts to the user inputs. These user inputs can be mouse overs, clicks, scrolls or other mouse actions in mouse- oriented devices, and they can also be touches, swipes or other touch actions in touch-oriented devices. The content reactions to these inputs can be such as, but not limited to, elements in the webpage to appear, disappear, or changing colors, shapes, positions or other attributes that are noticeable to the viewer of said webpage.
Interactive Marker is a visual indicator that reacts to mouse over events (in desktop/laptop and any mouse pointed devices) and finger touch events (in mobile and any finger pointed devices) . This visual indicator is either (style of interactive marker) :
An icon (either animated or static) positioned in any point in the website.
An area with different background colour or with a coloured border, defined by a set of points.
A text highlight, such as an underline, a background or text colour change or a related animation.
Mobile application (app) is a software program running in the viewer' s computer, which accesses the internet and loads webpages .
Mouse—over event means a graphical control element that is activated when the user moves or "hovers" the pointer over its trigger area, usually with a mouse, but also possible using a digital pen. The graphical control element is particularly common in web browsers where the URL of a hyperlink can be viewed in the status bar. Site designers can easily define their own mouse-over events using JavaScript and/or Cascading Style Sheets. In case of multiple layers the mouse-over event is triggered by the uppermost layer. Mouse-over events are not limited to web design and are commonly used in modern GUI programming. Their existence might not even be known to the user as the events can be used to call any function and might affect only the internal workings of the program.
Multimedia refers to content that uses a combination of different content forms. This contrasts with media that use only rudimentary computer displays such as text-only or traditional forms of printed or hand-produced material. Multimedia includes a combination of text, audio, still images, animation, video, or interactive content forms. Multimedia can be recorded and played, displayed, dynamic, interacted with or accessed by information content processing devices, such as computerized and electronic devices, but can also be part of a live performance. Multimedia devices are electronic media devices used to store and experience multimedia content. Multimedia is distinguished from mixed media in fine art; by including audio, for example, it has a broader scope. The term "rich media" is synonymous for interactive multimedia. Hypermedia scales up the amount of media content in multimedia application.
In computer programming, routine and subroutine are general and nearly synonymous terms for any sequence of code that is intended to be called and used repeatedly during the execution of a program. This makes the program shorter and easier to write (and also to read when necessary) . The main sequence of logic in a program can branch off to a common routine when necessary. When finished, the routine branches back to the next sequential instruction following the instruction that branched to it. A routine may also be useful in more than one program and save other programmers from having to write code than can be shared. Typically, in assembler languages, a routine that requires some variable input can be encoded into a macro definition with a specified interface called a macro instruction. The programmer can then use a macro instruction instead of having to include and manage the branching to a routine. Macro definitions and instructions also tend to be shared among programmers for use in multiple programs, especially in software development projects.
In higher-level computer languages, many commonly-needed routines are prepackaged as function , which are routines with specified programming interfaces. Some functions can be compiled in line with other code. Other functions are compiled in as stub, that make dynamic calls for system services during program execution. Functions are sometimes called library routines. The compiler and a set of library routines usually come as part of a related software development package.
Same contextual place, when mentioning the position of an interactive bubble, refers to the fact that in different devices, with different features such as screen sizes, internet browsers, software or hardware features, Clickly' s algorithms place the interactive bubble in the spot that is contextually identical to the one it was first placed by the owner of the website. In practical terms this means that over an image or video, the interactive tag will be placed always on top of the same x/y spot in proportion to the image size in a given screen. On top of a piece of text, it means the interactive bubble will appear on top of the same work or expression it was placed by the owner.
Server or Clickly server is the set of physical computers (servers) which run the Clickly solution backend software. Supplemental content refers to content that is not visible to the viewer when a webpage loads in a browser (or view on a mobile app) , although it is loaded as elements of the content (such as HTML DOM elements), and is made visible upon certain actions that happen in the webpage/view, either produced by interactions from the viewer or not.
Support device may be any general purpose device that can be programmed to carry out a set of arithmetic or logical operations automatically, such as a computer, a mobile phone, a tablet, a watch, or any other suitable device for displaying webpages and contents, within the scope of the present invention .
Stub is a small program routine that substitutes for a longer program, possibly to be loaded later or that is located remotely. For example, a program that uses Remote Procedure Calls (RPC) is compiled with stubs that substitute for the program that provides a requested procedure. The stub accepts the request and then forwards it (through another program) to the remote procedure. When that procedure has completed its service, it returns the results or other status to the stub which passes it back to the program that made the request.
Tag refers to a piece of code, such as a DOM element in an HTML (Hypertext Markup Language) webpage, that in a webpage usually translates to some visible element, but can also be an hidden element only accessible through code that processes it dynamically, after the webpage is loaded. Within the context of the present invention, the tag is preferably visualized in the shape of a bubble.
Third party content refers to contents that are served by other entities/companies (eg: Youtube, Google Maps) and that are loaded together with contents from the Clickly server. In these cases typically what is loaded from the Clickly server is a URL or other reference that allows to load the actual content from the third party server (or the server where the third party content is stored) .
Volume of information refers to the size in Bytes (or a multiplier, such as KiloBytes or MegaBytes) that a set of computational data contains. Usually this is referred in the context of a Client-Server interaction, where the volume of information is relevant to the time said interaction takes.
Webpage refers to a viewable area in a device that makes visible to a user any contents therein. It can be loaded in a browser (either on desktop/ laptop or mobile devices) or in a mobile application (on mobile devices) . x/y proportion is the relation between the x/y coordinates that define the width/height of the location of a point inside a webpage/image/area and of the webpage/image/area itself, being the x coordinate the width and the y coordinate the length. X coordinates are measured horizontally and y coordinates are measured vertically. When it is said that x/y proportions are maintained across screen sizes or different devices, it means that for example when a webpage has 50% less width, the x coordinate of all points referring to it will be shortened by 50%. The corresponding adjustments appliy for height and y coordinates.
DESCRIPTION
The present invention refers to a computer-implemented method for association of contents to programmable tags and/or bubbles through the software program developed within the present invention and said method provides for an additional advantageous effect, by solving an objective technical problem which is how to dynamically display contents as overlay contents in response to a mouse-over event or equivalent (touch, etc.) without having fixed pre-programmed position coordinates for a given display screen, overcoming commonly occurring problems in loading overlay contents, arising from a weak and/or slow internet connection, and also in a manner that allows this overlay content to be placed on top of any place in a webpage, regardless of the type of content lying underneath or the type and shape of the screen of the device used to visualise such contents and/or webpages.
The calculation and placement of the interactive marker in a certain position of the screen is such that, for each webpage, it is automatically adjusted to the support device and to the screen size it is loaded on, the corresponding contents being displayed in the same positions, relative to the contents of the webpage itself, in all support devices.
BRIEF DESCRIPTION OF DRAWINGS
Figure 1 - Clickly Diagram - Overview
Figure 2 - Clickly Diagram - Server' s side
Figure 3 - Clickly Diagram - User' s side
DETAILED DESCRIPTION
The present invention refers to a computer-implemented method for associating multimedia contents to programmable tags through a software function on a webpage wherein said contents are fully loaded into said webpage and are displayed, in response to a mouse-over and/or touch event, as an overlay to said webpage in previously determined positions within the screen of the support device, defined by coordinate mapping wherein the coordinates defining such positions of said tags are calculated by said software and according to at least one of the following: a) previous manual placement of tags by the webpage owner, wherein the webpage owner places an Interactive tag and/or bubble in a certain position of the screen by clicking and/or touching it, and the technology displays it in the same contextual location on every access to said webpage; b) automatic placement of tags by the Server, wherein the content of the webpage is analysed by the Clickly Server and matched with previously acquired knowledge, deciding if one or more Interactive tags are to be placed in said webpage and in what positions .
Previously acquired knowledge depends on the use case, and it includes, but is not limited to, previous analysis to said website pages and contents, previous analysis of advertising opportunities related to said webpage content, etc.
A webpage loads in a browser (on a laptop/desktop or mobile device) , or in a mobile application (on a mobile device) resulting from actions from the user, such as typing the address in a URL bar, following a link, or opening a mobile app .
On the page loading process, the webpage connects to the backend server, to request information.
In this webpage server interaction, the server returns a set of data to enrich the webpage content with a number of Interactive Bubbles. This data contains, for each Interactive Bubble : • Style and positioning data of Interactive Marker;
• Content to fill inside the Interactive Container.
This data is interpreted by the webpage, which creates Interactive Markers according to the specifications loaded, which means that each of these Interactive Markers is placed in the respective position within the webpage and displayed with the adequate style (icon, shape, color, etc) .
Attached to each Interactive Marker is an Interactive Container, located above, bellow, to the right or to the left of the Marker according to the position of Market within the webpage .
The content, size and shape of the Interactive Container is generated according to the information received, and displayed to the user as such. All Interactive Containers are invisible when loaded, and showed according to interactions made upon the Interactive Markers. As both Markers and Containers are interactive, they react to the webpage user's actions (mouse or touch, according to the device) .
The interactions interpreted by Markers are:
1) in a mobile or touch pointed device, when the user touches the Marker, the respective Interactive Container becomes visible and can be interacted to by the user;
2) in a desktop/laptop or any mouse pointed device, when the user moves the mouse over the Marker, the respective Interactive Container becomes visible and can be interacted to by the user.
Automatic calculation and placement of the interactive marker in a certain position for each webpage is performed contextually, identically and independently of the device and screen size it is loaded on. This positioning can originate from : In an embodiment, said placement is manually performed by the webpage owner, wherein a webpage owner will place an Interactive Bubble in a certain location by clicking/touching it .
In a preferred embodiment, said placement is performed automatically Automatic placement by Clickly Server, wherein Clickly algorithms, running on Clicky servers, read and analyse the content of the webpage and decide automatically where to place one or more Interactive Bubbles. This calculation can take into account different factors, such as, but not limited to, contextual analysis to match the webpage content with advertisements that are stored in Clickly server, a detected relationship between the webpage content and other webpage' s content, etc.
EXAMPLES
When visible, the Interactive Container responds to interactions according to its content, in a manner such as: a button or clickable banner can be clicked, a video can be played, an input field can be filled, a 5star rating system can be starred, radio button or checkbox can be checked, and third party content respond to interactions according to the specification of the provider.
Interactive tags can be used for online content creators to enrich their content, such as images or text. This enrichment can either be used for editorial purposes or commercial purposes, such as sponsored content.
Interactive tags can also be used to programmatically distribute ads on top of content on said webpages, where the algorithms and calculations made by the Clickly Server are used to distribute ads on these websites according to prior targeting/configuration/programming that is stored on the Clickly Server.

Claims

1. Computer-implemented method for associating multimedia contents to programmable tags through a software function on a webpage characterized in that said contents are fully loaded into said webpage and are displayed, in response to a mouse-over and/or touch event, as an overlay to said webpage in previously determined positions within the screen of the support device, defined by coordinate mapping wherein the coordinates defining such positions of said tags are calculated by said software and according to at least one of the following : a) manual placement of tags by the webpage owner, wherein the webpage owner places an Interactive tag and/or bubble in a certain position of the screen by clicking and/or touching it; b) automatic placement of tags by a Server, wherein the content of the webpage is analysed by said Server, which decides if one or more Interactive tags are to be placed in said webpage and in what positions.
2. Computer-implemented method according to claim 1, characterized in that calculation and placement of the interactive marker in a certain position of the screen is such that, for each webpage, it is automatically adjusted to the support device and to the screen size it is loaded on, the corresponding contents being displayed in the same positions, relative to the contents of the webpage itself, in all support devices.
3. Computer-implemented method according to claims 1 and 2, characterized in that coordinate mapping is automatically readjusted by placing at least one interactive tag and/or bubble in the same contextual place, by analysing the code patterns .
4. Computer-implemented method according to claims 1 to 3 characterized in that the x/y proportion is calculated within the element where the Interactive tag and/or Bubble is first placed.
5. Computer-implemented method according to claims 1 to 4 characterized in that the x/y proportion is calculated within an image, identified by the URL and/or source and/or pixel analysis, where the Interactive tag and/or Bubble is first placed.
6. Computer-implemented method according to claims 1 to 5 wherein x/y proportion is the relation between the x/y coordinates that define the width/height of the location of a point inside a webpage/image/area and of the webpage/image/area itself, being the x coordinate the width and the y coordinate the length.
7. Computer-implemented method according to claims 1 to 6 wherein x coordinates are measured horizontally and y coordinates are measured vertically.
8. Computer-implemented method according to claims 1 to 7 characterized in that the positioning of the identical piece of text takes place where the Interactive tag and/or Bubble is first placed.
9. Computer-implemented method according to claims 1 to 8, characterized in that a webpage loads in a browser (on a laptop and/or a desktop or mobile device), or in a mobile application on a mobile device, resulting from actions from the user, such as typing the address in the URL bar, or following a link, or opening a mobile app .
10. Computer-implemented method according to claims 1 to
9 characterized in that on the page loading process, the webpage connects to the backend server, to request information .
11. Computer-implemented method according to claims 1 to
10 characterized in that in said webpage server interaction, the server returns a set of data to enrich the webpage content with a number of Interactive tags and/or Bubbles.
12. Computer-implemented method according to claims 1 to
11 characterized in that said data contains, for each Interactive tag and/or Bubble: a) Style and positioning data of Interactive Marker;
b) Content to fill inside the Interactive Container. wherein said data is interpreted by the webpage, which creates Interactive Markers according to the specifications loaded and each of these Interactive Markers is placed in the respective position within the webpage and displayed with the programmed style.
13. Computer-implemented method according to claims 1 to
12 wherein attached to each Interactive Marker is an Interactive Container, located above, bellow, to the right or to the left of the Marker according to the position of Marker within the webpage.
14. Computer-implemented method according to claims 1 to 13 wherein interactions interpreted by Markers are:
a) in a mobile or touch pointed device, the user touches the Marker, the respective Interactive Container becomes visible and can be interacted to by the user;
b) in a mouse pointed device, such as a desktop/laptop, the user moves the mouse over the Marker, the respective Interactive Container becomes visible and can be interacted to by the user.
15. Computer-implemented method according to claims 1 to 14, wherein the content, size and shape of the Interactive Container is generated according to the information received, and displayed to the user as such.
16. Computer program executed on a computer readable medium or device wherein the computer-implemented method of claims 1 to 15 is thereby implemented.
17. System comprising a server, one or more display devices, a computer program according to claim 16, wherein the computer-implemented method of claims 1 to 15 is executed.
18. Use of the computer-implemented method of claims 1 to 15 and/or the computer program of claim 16 and/or the system of claim 17, wherein the interactive container responds to interactions according to its content, such that a button or clickable banner is clicked, a video is played, an input field is filled in, a rating system is assessed, a radio button or checkbox is checked, and third party content responds to interactions according to the specification of the provider.
PCT/IB2016/050611 2016-02-05 2016-02-05 Method for dynamically displaying multimedia contents WO2017134487A1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
PCT/IB2016/050611 WO2017134487A1 (en) 2016-02-05 2016-02-05 Method for dynamically displaying multimedia contents

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/IB2016/050611 WO2017134487A1 (en) 2016-02-05 2016-02-05 Method for dynamically displaying multimedia contents

Publications (1)

Publication Number Publication Date
WO2017134487A1 true WO2017134487A1 (en) 2017-08-10

Family

ID=55640782

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/IB2016/050611 WO2017134487A1 (en) 2016-02-05 2016-02-05 Method for dynamically displaying multimedia contents

Country Status (1)

Country Link
WO (1) WO2017134487A1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP4182871A4 (en) * 2020-07-15 2023-12-27 Referboard Marketing Pty Ltd Content selection platform

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090094105A1 (en) * 2007-10-08 2009-04-09 Microsoft Corporation Content embedded tooltip advertising
US20090125544A1 (en) * 2007-11-09 2009-05-14 Vibrant Media, Inc. Intelligent Augmentation Of Media Content
US20090182618A1 (en) * 2008-01-16 2009-07-16 Yahoo! Inc. System and Method for Word-of-Mouth Advertising
US7975020B1 (en) 2005-07-15 2011-07-05 Amazon Technologies, Inc. Dynamic updating of rendered web pages with supplemental content
US20130013992A1 (en) 2011-07-08 2013-01-10 Thinglink Oy Handling Content Related to Digital Images
EP2651110A2 (en) 2012-04-12 2013-10-16 Thinglink Oy Image based interaction
US20140344670A1 (en) * 2013-05-14 2014-11-20 Pandaworks Inc. Dba Contentpanda Method and system for on-demand delivery of predefined in-context web content

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7975020B1 (en) 2005-07-15 2011-07-05 Amazon Technologies, Inc. Dynamic updating of rendered web pages with supplemental content
US20090094105A1 (en) * 2007-10-08 2009-04-09 Microsoft Corporation Content embedded tooltip advertising
US20090125544A1 (en) * 2007-11-09 2009-05-14 Vibrant Media, Inc. Intelligent Augmentation Of Media Content
US20090182618A1 (en) * 2008-01-16 2009-07-16 Yahoo! Inc. System and Method for Word-of-Mouth Advertising
US20130013992A1 (en) 2011-07-08 2013-01-10 Thinglink Oy Handling Content Related to Digital Images
EP2651110A2 (en) 2012-04-12 2013-10-16 Thinglink Oy Image based interaction
US20140344670A1 (en) * 2013-05-14 2014-11-20 Pandaworks Inc. Dba Contentpanda Method and system for on-demand delivery of predefined in-context web content

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP4182871A4 (en) * 2020-07-15 2023-12-27 Referboard Marketing Pty Ltd Content selection platform

Similar Documents

Publication Publication Date Title
US9582154B2 (en) Integration of social media with card packages
US9773069B2 (en) Pre-fetching of network page content in a browser application
AU2009260643B2 (en) Presenting advertisements based on web-page interaction
US10620804B2 (en) Optimizing layout of interactive electronic content based on content type and subject matter
US9448972B2 (en) Wrap package of cards supporting transactional advertising
CN102629273B (en) Advertising information pushing method based on browser, device and browser system
US7770122B1 (en) Codeless dynamic websites including general facilities
US20120297324A1 (en) Navigation Control Availability
US20160104204A1 (en) Card based package for distributing electronic media and services
US7877702B2 (en) Tree widget data population
US20160357714A1 (en) System and method for authoring, distributing, viewing and saving wrap packages
CN104166656B (en) The webpage methods of exhibiting and device of traffic statistics
US11164221B2 (en) Native online ad creation
US20140344670A1 (en) Method and system for on-demand delivery of predefined in-context web content
US20160358218A1 (en) Wrapped package of cards including native advertising
US20160103586A1 (en) System and method for authoring, distributing, viewing and saving wrap packages
CN114357345A (en) Picture processing method and device, electronic equipment and computer readable storage medium
US9442906B2 (en) Wrap descriptor for defining a wrap package of cards including a global component
US20140258834A1 (en) Systems and Methods for Displaying Content with Inline Advertising Zones
JP5727684B1 (en) Browsing device, display control method, recording medium, and program
CN103559097A (en) Inter-process communication method and device in browser and browser
JP2015049694A (en) Distribution system, terminal device, distribution method, and distribution program
US20140258847A1 (en) Systems and methods for displaying content with discrete content zones
WO2017134487A1 (en) Method for dynamically displaying multimedia contents
US20180285940A1 (en) Web advertisement placement

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 16712480

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 16712480

Country of ref document: EP

Kind code of ref document: A1