Sometimes I need to write a small program just to represent some data in a chart, or similar stuff. I have been wanting to do this kind of things through the browser, with HTML5. I think it would be nice to use its canvas to create a nice UI for simple apps.
I have read some articles related to offline applications with HTML5, but they focus on downloading all the data you need and save it to the cache to use it offline later. You even need to set up an Apache server (or similar) to create your app.
I don't need my app to be online, just in my computer. I just want to create a simple application, nothing to do with internet at all.
How can I do this? Is it even possible or worthy? Is there any "Hello world!" tutorial about this around there?
Something like Mozilla Prism would be good for displaying the content as an application.
There's no need to have a web server like Apache for just displaying HTML5/Javascript in a browser. You can just have it all in a folder on your desktop and then load it in the browser with the file:// protocol.
For example file://C:/Documents and Settings/YourUser/Desktop/YourApp/index.html would open an HTML file in a folder called YourApp on your user's desktop.
If you ever find you need to read static HTML+Javascript files locally then I'd recommend using this python command in the console:
python -m SimpleHTTPServer
It launches a simple HTTP server (who'd of guessed) that serves files from the current working directory. Effectively, it's the same as launching an apache webserver, putting some static assets in /var/www/... etc. etc.
You could also just browse to the assets at file:///some/folder; however, most browsers will prevent javascript from using AJAX when files are loaded in that way, which will manifest as a bunch of bugs when you go to load it.
Related
So when I type npm run generate Nuxt generates my project into the dist folder. In that folder I can find a folder called _nuxt where I have .js files and the index.html file but when I open it in a browser it doesn't show anything.
So, my question is: Aren't those static files?
When you work with the CDN served vue.js you have the html file and you click and everything is showed on the browser because those .html files are static, they don't need an internal localhost server. Why npm run generate doesn't do the same? Or how can I see those generated files?
As #aljazerzen explained, Vue,js doesn't do SSR out of the box, one of the aims of Nuxt.js is to provide SSR for you, as a benefit you can also generate a static version of your website. If I get what you want correctly, what you want to do is that when you open your index.html (the one that Nuxt.js generates for you) you can see your functional webpage. When you're accessing your website as a file:/// url, your browser (at least I've seen it happen with Chrome) doesn't load your .js files.
I don't have any Nuxt generated websites at hand so I can't tell you exactly why this happen. But this is my guess: when Nuxt generate those files it gives them a src that can't be accessed as file:///, maybe something as /your_js.js, that when it tries to load it, thinks it's the / of the root folder instead of relative to your website's root (/).
The solution to this problem is to serve your assets using any web server. According to Nuxt.js's documentation:
nuxt generate :Build the application and generate every route as a HTML file (used for static hosting).
You could do a quick test and use a simple web server by typing:
python -m http.server
In the folder that contains your generated assets.
Hope this helps!
Nuxt uses server side rendering.
You can read more here.
To generate static HTML files, run:
nuxt generate
Explanation: Vanilla Vue.js application is rendered only when the page loads and JavaScript can start running. This means that some clients that do not have JavaScript enabled (web crawlers) won't see the page. Also for a brief second before Vue.js can render the page, there is blank screen, when plain HTML files could already be visible.
Now, server-side rendering (SSR) is a technique for rendering a single page app (SPA) on the server and then sending a fully rendered page to the client. The client’s JavaScript bundle can then take over and the SPA can operate as normal.
This can also help with SEO and with providing meta data to social media channels.
But on the downside (as you mentioned), such application cannot be hosted at a CDN, since you have to have a Node.js process running to render the page.
In my opinion, SSR is redundant with SPAs if what you are building is actually an application and not a website. A website should mostly display information and should not be interactive. It should leverage web-based mechanisms such as links, cookies and plain HTML with CSS. In the contrast, web application (eg. Vue.js application) should be more like a mobile application: it is larger to download, but performs better and offers much more interactive experience. Such application does not need server-side rendering, since we can wait for it to load a bit more and because it shouldn't be indexed by search engines (it is not a website).
Basically, I'm creating a webpage filled with images of movie posters that link to video files, as a means of making a more visually-appealing form of my local video library.
I'm using
<a href="C:\blah\movie.mkv"><img src="poster.jpg">
It works exactly how I want, HOWEVER, it opens the file in the browser rather than opening it in its default program, as I would like. I would like each link to open the file in the program titled "VLC Media Player", as specified in Windows for each of their filetypes.
Let me know how I can do this (in the simplest form--I'm not too smart :P)
Thanks!
If you are creating web pages on your local system for you own use then you may want to consider looking in to a WAMP server setup. This uses php and should allow you to call VLC using the exec command. Would take some learning however.
There is very little you can do to control how a client will handle a resource.
You can use the Content-Disposition HTTP response header to state that the resource is an attachment (and thus recommend that it be downloaded instead of opened).
Content-Disposition: attachment;filename="movie.mkv"
You can't, however, stop browser native support or a plug-in from handling something instead of having it open in a separate application (let alone cause it to be opened in a specific application).
If the browser is configured to open video files internally, then nothing the author of a website can do will make it switch to using a application instead.
I am currently beginning a project where we want to build an Interactive Whiteboard (educational activities) and deploy via CD-ROM. I want to build the project in HTML5 for it's interactivity and then somehow compile it to both .exe. and .dmg so when the CD-ROM is inserted it autoplays the 'Game'.
How is this possible? Any help/advice would be greatly appreciated. Thank you.
I already made a project using pure C (WinAPI) on github that can pack HTML files into single EXE using resources.
http://github.com/dns/WinAPI-Embed-Browser/releases
Use: res://programname.exe/test.html as path to access html files from your EXE file.
From here you also can hide the window border & just showing the content of your HTML app, or even running on fullscreen. This is very useful if you want to make interactive CD-ROM.
On Mac, you can use Delphi/Lazarus TWebBrowser control to load html files. However I don't know if mac program can access files from resource or not.
HTML 5 is a browser technology, so I think as long as the pc you are installing on has the latest browsers, installing your app should work fine.
Can you tell us why you want it as a CD-ROM based installation, where as you can easily host it online?
You may not need any .exe wrapping. Here is an approach.
Important: your autorun will be often disabled, [not so] quietly. Provide some instructions for running your application manually.
So:
Google for running a portable version of Firefox or Chrome from a CD. Have the browser prepared. Put it in a [sub]directory representing your CD.
Put your content there.
Create a .cmd file to invoke the browser with a command like,
FirefoxPortable.exe index.html
Create autorun.inf (details googlable) to call the above batch file.
Make a CD image from that directory. There are lots of CD burning applications that can do that.
Test.
We are trying to distribute a basic HTML file with some links to a PDF document in a USB drive for advertising purposes. The idea is that an autorun opens up this HTML in the default browser. However, this might not be a good idea since it would look very amateur-ish and we will have to rely on the default browser's technology (which unfortunately has a good chance on being IE6/7!)
We've explored a few alternatives, but we can't find one that really fits what we are trying to achieve:
Mozilla Prism
Altough it seems like it's designed with offline web apps in mind, the executable creates files in the user's AppData directory and it's hard to configure the default paths. Also, Firefox doesn't have a default PDF viewer, so we will have to depend on the user's default PDF viewer (which might be Adobe Reader)
Mozilla Chromeless
Since Prism is inactive, the idea is still developing with Chromeless, which allows the developer to create the browser interface with basic HTML/JS/CSS. The main issue here is that somehow the build isn't loading HTML, all that's showing is a gray iframe. I'm not sure if it's just me, because there's nothing on the issues page.
Portable App
We could throw in the portable version of Firefox or Chrome and customize the XUL for Firefox or open Chrome in app mode.
Firefox's advantage is that it kind of supports relative paths (resource://), but it doesn't have a built-in PDF viewer. Chrome has a very good and lightweight PDF viewer and the built-in app mode is a very useful feature for us, but I can't find how to open a local path without the usual absolute path (file:///C:/) since we don't know what's the drive's letter.
Has anyone figure out how to handle this kind of issues? Thanks.
This has been asked three years ago, but it's unanswered, listed high in Google, and I stumbled over the exact same problem and can imagine that many others that seek to ship portable web apps that can be run locally and with a minimum of dependencies will encounter this issue, too.
The solution I am now going with is the node-webkit.
You can treat it like a portable version of chrome, however it excepts a relative path to your app's entry point, is about 40 MB smaller, and much more customizable than the --app mode of chrome (which isn't customizable at all if I remember correctly).
Github & Download:
https://github.com/rogerwang/node-webkit#downloads
An extensive guide:
http://thejackalofjavascript.com/getting-started-with-node-webkit-apps/
My usage suggestion for Windows:
First create an app package as explained in the guide linked above
For the node-wekit to load with your app, you need to start it like this:
nw.exe app.package
Where nw.exe is in the root of the zipped folder you downloaded and app.package is a zip file (can have any name) that contains your app data and package.json.
To do this silently, you can use a BAT file containing the (amended) call above and a VBS file containing something like this:
CreateObject("Wscript.Shell").Run "cmd /c launchNW.bat", 0, true
launchNW.bat being the name of your BAT file. Now run the VBS file; a window containing your web app should pop up without the command window appearing with it.
Finish reading the linked guide to learn more about customization options to do things like hiding the browser UI etc.
I'm trying to load images from a relative folder /media/one.jpg but it never loads, I use the same script to load from my local folder and it does.
The absolute path e.g c:/mydir/one.jpg does not work either. Earlier I used to throw things at my server and get jpegs from there. But for testing purposes I need these images locally available.
Any Idea?
Just solved it Use loadImage("media\ears.jpg"); double slash instead to single and it works :)
For security reasons flash files can access only web or only local files, with can be set in the project properties. If you want to build a web application like a webpage or just a part of a webpage, than you should choose network only, but this way you can test your work only on a webserver (that can be localhost too ). If you want to build a desktop application, witch has no relation to web, then select the "local only" option in your project properties.