Building A Universal Program Without Programming Skills

Share This:

The other day someone had asked if it was possible to build a computer program for Windows 8 using just HTML5, CSS3 and Javascript 2. Many people will respond with things like only if you have certain browsers with plugins. And then you need to make sure the user has the same browser and plugins.

Question:Is there any way to create applications for Windows 7 and XP using Web Development languages such as HTML5, CSS3 etc. without the use of .NET or something like http://pokki.com without having the whole appstore installed.

Answer 1:I dont have a complete answer to you but since i am new here i cant add comments yet. so i have to add this as an “answer”

please take a look at “Adobe AIR“, it might be what you are searching for. its not html5/js but merely a mix of flex(a flash framework) and a few additions to access desktop stuff(systray icons, notifications etc.)

you can create the UI using xml and/or actionsscript. which is easy to learn if you already know html and js(or any other ecma dialect like csharp).

afterwards you can create a exe out of everything.

Answer 2:Try http://awesomium.com/, its based on chrome. You can write your own api for javascript etc

Answer 3:There are currently three options that I’m aware of, all of them require a client install of some kind:

  • Adobe Air – probably the most reliable as the installer is Flash based (ie. from a web page)
  • Opera Widgets – requires Opera to be installed
  • Mozilla Chromeless – used to be Mozilla Prism, basically a browser engine where you can write your own UI with HTML, CSS and JavaScript

As you can see all of the answers required some sort of extra software to be running in order for it to work properly. All of the above answers are okay and will work. However their is a solution that requires no extra software that user needs to install on his or her machine. Not to mention the method I will discuss here I was using way back in the days of Windows 98. And guess what it works even today on Windows 8 and every version of Windows in between. Not to mention with minor tweaks it will even work with Mac OS, Linux, BSD, Solaris, Android, iOS, Windows Phone, BlackBerry, WebOS, Symbian and any other Operating System. The only thing you need is basic website development skills.

Building The Program

Here we will build a basic Hello World program. Lets fire up our prefered text editor. If your running Windows then you may be using Notepad or Notepad++.





<html>
<head>
<title>Hello World</title>
</head>

<body>
<h1>I'm A Program<h1>
</body>
</html>

Now lets save it. Normally when we save this type of file we will save it as a .htm or a .html. However we wont save it as either this time. Instead we will save it as a .hta. Once we have saved it we will navigate to the location that we saved the file. And we will click on it. We will notice that it didn’t open up inside of a web browser and looks more like a native computer program.




Now obviously we will most likely make the program more advanced with more features and a lot more files included in it. So we will more likely want to make an installer for it. In this case their are several things we can do. We can make a self extracting zip file or make very basic NSIS script. Both of which a fairly easy but making a self extracting zip file is easier so I will mention that first.

Making a self extracting Zip File

Their are many tools out their that will assist you in doing just this.

  • 7-Zip
  • WinZip
  • WinRar
  • IExpress

Since IExpress ships with Windows, we will be using this one. Even though using 7-Zip is much easier and pretty self explanatory.

First we will go to Start -> Run and type iExpress then click Ok. This will start IExpress. Now we will start making our installer.

  • Check the box that says (Create new Self Extraction Directive file)
  • Click Next
  • Check the box that says (Create Package Only)
  • Click Next
  • Type the Package Title
  • Click Next
  • Make Sure the option that says No Prompt is selected
  • Click Next
  • Choose the option that says Do Not Display a License
  • Click Next
  • Now we add all of the files we want to include
  • Click Next then Next Again
  • Select No Message
  • Click Next
  • Choose where you want the files to go when the user install the program
  • Click Next
  • Click Next twice more and your done

You can do a lot with IExpress. So feel free to experiment around with it. But keep in mind that it does have problems with older versions of Windows.




Making an Installer with NSIS

If you want an installer that will work on all versions of Windows from Windows 9.x to Windows 8 then you will most likely want to use NSIS. Below is a very basic example of an NSIS Script that we can use for our program.


Name "My HTML Program"
OutFile "htmlprogram.exe"
InstallDir $PROMGRAMFILES\HTMLProgram

Page directory
Page instfiles

Section "main"

SetOutPath $INSTDIR
File htmlfile.hta
File style.css
File somefeatures.js
File image1.png
File image2.png
CreateShortCut "$SMPROGRAMS\My Program\My Program.lnk" "$INSTDIR\htmlfile.hta"
SectionEnd

Now we will save the script we just wrote up above as myprogram.nsi. If we have installed the NSIS developer tools, then when we right click on our NSI file we will get an option to build the installer. So we will do that. Once it is done building we can start distributing it to pretty much all Windows users.




Of course if we are targeting say Mac users or Linux users we may want to just throw everything into zip file and write a shell script to extract the files and place them somewhere on the computer. If we are targeting mobile users such as iPhone users or Android users then we can checkout phonegap. After all our program is now made and we can simply use Phone Gap to package it for other devices.