dWeb tutorial: Showing demo Ads, and creating & showing your own ad

1. Introduction

We did create a demo version of our dWeb program which shows 3 different ads. These ads have 1 , 3 and 5 pages each respectively.

Before continuing with this tutorial please check - Advertising basics - format and costs

The demo program is available for 2 platforms - Windows and Linux. We plan to add Mac OS X platform as well.



The utility for 64bit Windows was created and tested on Windows 7 and Windows 10. It is available for download on this link as a setup executable file - dweb-adv1-setup.exe

The setup program goes through installation and places files in the - 'c:\dweb' directory.
The program can be started though:
- Start -> Programs -> dweb ->
- or, in 'file manager', in the 'c:\dweb' directory double click on - dweb-adv1.exe
- or, open 'command prompt' and run - > c:\dweb\dweb-adv1.exe



The utility for 64bit Linux was created and tested on Ubuntu 18.04 and Ubuntu 20.04. It is available for download on this link as a self-extracting file - dweb-adv1-linux64.run

After downloading and saving the file to an appropriate folder please open a 'terminal' window, go to the folder and type -
$ chmod +x dweb-adv1-linux64.run
$ ./dweb-adv1-linux64.run

This will create a sub-folder in the '/home//' folder - ~/dweb .
To run the demo ads and create ads open 'terminal' and do -
$ ~/dweb/dweb-adv1
or, in 'file manager', in the '/home//dweb' folder double click on - dweb-adv1



2. Showing the demo ads

When started the dWeb program shows this default screen. A left mouse single click brings the initial menu.

default screen

Click on 'show ads' - this will bring the image of the first ad, which is a singe page ad.

Wait for 10-15s without doing anything. This will cause a timeout in the ads viewing and bring back the default screen. Do a left mouse single click to bring the initial menu and click again on 'show ads'.

1 page ad

Go over to the bottom/action area and click over '-->' . This will bring the next ad which is a 3 pages ad.

Go over to the bottom/action area and click over 'skip' . This will bring the next ad which is a 5 pages ad. Then go over and click '-->' and '<--'. This will bring next or previous page of the 5 pages ad.

Go over to the left side of the bottom/action area and click over the action text. For the 5 pages ad the action text is - "Platform details".

This will result in bringing up of a new tab in Google Chrome web browser and loading the "action-url" page which is: "https://decentralized-web.tech/ad5.htm".



3. Structure of an ad

Ads consist of 1 to 5 image files and a JSON format text file named - ad.txt .

The 1 page ad was created using these files - ad1.ppm, ad.txt .
The content of ad.txt is as follows -
{ "page1":"ad1.ppm", "action-txt":"ContactUs", "action-url":"https://decentralized-web.tech/ad1.htm" }

The 3 pages ad was created using these files - ad3a.ppm, ad3b.ppm, ad3c.ppm, ad.txt .
The content of ad.txt is as follows -
{ "page1":"ad3a.ppm", "page2":"ad3b.ppm", "page3":"ad3c.ppm", "action-txt":"Tell me more", "action-url":"https://decentralized-web.tech/ad3.htm" }

The 5 pages ad was created using these files - ad5a.ppm, ad5b.ppm, ad5c.ppm, ad5d.ppm, ad5e.ppm, ad.txt .
The content of ad.txt is as follows -
{ "page1":"ad5a.ppm", "page2":"ad5b.ppm", "page3":"ad5c.ppm", "page4":"ad5d.ppm", "page5":"ad5e.ppm", "action-txt":"Platform details", "action-url":"https://decentralized-web.tech/ad5.htm" }

The dWeb program is reading all of the files of an ad then packs them in a single file, compresses it and writes the result to a file with a name - ad.img .



4. Creating an image for your first ad

Use any graphics/image editor to create an image with size of 640 x 600 pixels. The image can contain text and graphics. Make sure the bottom/action area is prepared to be compatible with the the color and text of the action items. Then do an export of the image to save it in a raw '.ppm' format.

To create 1 , 3 and 5 pages ads we did use LibreOffice-Draw free image editor program on Linux OS. Since it did not have export to .ppm format we did save the image created in a .gif format.

LibreOffice-Draw

We did use another free image editor program - Gimp to open the .gif image and then do an export to the .ppm format. When exporting, there is a dialog box asking to choose to save in ascii or a raw format. Please save images in a raw .ppm format.

Gimp - export to .ppm

Some of the .gif images we did create with LibreOffice-Draw were not exactly the 640 x 600 pixels. After loading the .gif in Gimp we did use 'scale image' tool to make it exactly 640 x 600 pixels and then we did export it to a .ppm file.



5. Creating and showing of your first ad

After installing the files of the dWeb program are placed in this folder -
c:\dweb (Windows), /home//dweb (Linux,Mac OS X)

Place from 1 to 5 '.ppm' image files of your ad in the 'ad-import' sub-folder-
c:\dweb\ad-import (Windows), /home//dweb/ad-import (Linux,Mac OS X).

As an example we did place the actual .ppm image of the 1 page ad and the 'ad.txt' file for the ad in the 'ad-import' sub-folder. Please use as am initial template and then remove and place your own files.

Create or modify the existing 'ad.txt' file - putting the names of the image files, the action text and and the action URL. Then place it in the same 'ad-import' sub-folder.

If not started please start the dWeb program and on the default screen do a left mouse single click to bring the initial menu. Go over 'ad import' and click it. This will generate a single 'ad.img' file.

If this file is not created please check the sizes of the image files to be exactly 640 x 600 pixels, and the proper format of the 'ad.txt' JSON file.

The location of all of the ad .img files to be displayed is in this folder-
c:\dweb\ad-show (Windows), /home//dweb/ad-show (Linux,Mac OS X).

The folder contains the 1,3,5 pages demo ads - ad1.img, ad3.img, ad5.img .

Place your just generated 'ad.img' file into the 'ad-show' sub-folder and rename it to 'myad1.img'.

When doing again demo running of ads, after showing the default 3 demo ads the dWeb program will show also the newly added 'myad1.img' ad.

You can create, place and show more ads as long as they are named sequentially - 'myad2.img', 'myad3.img', up to 'myad6.img'.

   Support our project - become our patron on Patreon:   Patreon - Decentralized Web

Back

Software release:
User software - tutorial on download, install and use |||||| Downloads -       User software - Windows release       User software - Mac OS release       User software - Linux release
Bridge software - install and use |||||| Downloads -   User software - Android release       User software - Raspberry Pi 3 release       User software - ESP01 release      

           Email:   Send us an email            Twitter:   Twitter - Decentralized Web            LinkedIn:   LinkedIn - Decentralized Web            Instagram:   Instagram - Decentralized Web