I need to build a simple presentation in HTML and JS, but it needs to run locally as a standalone and portable app in both Windows and Mac.
There are any ways to do this?
Adobe Air allows you to make native apps that run on both platforms out of HTML, CSS and JavaScript.
In addition, there are already libraries out there to help you create slideshow functionality out of HTML. Erik Meyer's S5 is a popular one: http://meyerweb.com/eric/tools/s5/
There's the MHTML format which is supported by Internet Explorer and Opera out-of-the-box and Firefox via add-on. It let's you save a whole page including images, scripts and so on in a single file.
To create one, you could just open your web page in one of those browsers and choose "save as".
Just save it as bunch of htmls, pictures and JSs and open in your favorite browser!
This is way to create a simple presentation:
http://code.google.com/p/html5slides/
Example:
http://html5slides.googlecode.com/svn/trunk/template/index.html#1
Code of example:
http://code.google.com/p/html5slides/source/browse/trunk/template/index.html
To run it standalone, you need just to save it.
Or, you can use Adobe AIR.
Bit late, but what if you take a Portable Browser? Chrome and Firefox both have a Portable App version. Another option would be to use PDF instead of HTML.
Related
Trying to embed a pdf on my website like so:
<iframe src="filename.pdf" type='application/pdf' frameborder="0"></iframe>
The website is a rails site, and currently I'm only running it on a local server.
The problem is that the pdfs render with a toolbar on top and a sidebar with my adobe creative cloud account information, as seen in the picture below (the actual content of the pdf displays in the white box under the toolbar and to the left of the sidebar)
How can I get the pdf to render alone, without the menu and sidebar?
If you allow the browser to choose how the PDF gets rendered, you're never going to be able to create a consistent experience for your users unless you are in a controlled desktop environment.
If you are looking for a consistent experience, use pdf.js to render the PDF in the browser.
If you are in a controlled environment and all of your users have a browser/viewer combination that will let the browser show PDF using the Adobe Reader plugin (as your screen shot shows) then you can use the "open parameters" at the end of the URL to control what gets shown. See the documentation at the link below.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
That said, don't count on that solution to work for very long. Most modern browsers are not allowing the viewer plugins to function anymore and the rest are moving in that direction.
Searching more into stack, try that:
https://stackoverflow.com/a/2105095/7741129
For more detailed informations:
http://blogs.adobe.com/pdfdevjunkie/web_designers_guide
I think it's better use some kind of JS stuff just in case of cross-browser issues, like related into first link. Solutions like https://pdfobject.com/ it's helpful to get the job done. Look:
PDFObject 2.0 detects browser support for inline/embedded PDFs. (In
case you were wondering, your browser supports embedded PDFs. You
lucky dog, you!)
If you're working with dynamic HTML, such as a single-page web app,
you may need to insert PDFs on-the-fly. However, PDF embedding is not
supported by certain browsers. If you insert markup without first
checking for PDF support, you could wind up with missing content or a
broken UI.
The PDFObject utility helps you avoid these situations by detecting
support for PDF embedding in the browser; if embedding is supported,
the PDF is embedded. If embedding is NOT supported by the browser, the
PDF will NOT be embedded.
By default, PDFObject 2.0 inserts a fallback link to the PDF when the
browser does not support inline PDFs. This ensures your users always
have access to your PDF, and is designed to help you write less code.
The fallback link can be customized, or the option can be disabled if
you prefer.
PDFObject 2.0 is npm-ready. Modern web apps use npm to manage packages
and dependencies. PDFObject 2.0 is registered with Node Package
Manager (npm) and can be loaded dynamically.
PDFObject also makes it easy to specify Adobe's proprietary "PDF Open
Parameters". (Be warned these parameters are only supported by Adobe
Reader, most PDF readers will ignore the parameters, including the
built-in PDF readers in Chrome, Internet Explorer, and Safari. Read
more below.)
Is there a compiler that opens a live preview version of my HTML and CSS in firefox? Programs like Brackets, cannot do this feature unless it is google chrome.
If you are on Mac, this is a great tool: http://incident57.com/codekit/
If not, or want something else, this works: https://prepros.io
And if you want to be really hardcore try http://livereload.com or http://www.browsersync.io with a build tool of your choice
I wonder if there is a way to view .ps files without downloading/saving them while one using the Google chrome?
There is currently no way to view .ps (PostScript) files in Google Chrome.
I can imagine two ways to get the desired result though:
Convert the postscript file to PDF with some third-party utility and use Chrome's built-in PDF Viewer (or the PDF.js PDF Viewer Chrome extension) to display the PDF file. (this is relatively easy and can be implemented as a Chrome extension)
Implement a PostScript parser, and integrate it in PDF.js.
Specification: http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/postscript/pdfs/PLRM.pdf
Limited proof of concept: http://logand.com/sw/wps/
Feature request on PDF.js issue tracker: https://github.com/mozilla/pdf.js/issues/1594 (this is closed, but if you deliver a high-quality patch, the patch may be accepted).
I compiled GhostScript 9.26 in Web Assembly and wrote a small wrapper to allow direct display of PostScript files in Chrome. You can find it here:
https://chrome.google.com/webstore/detail/ps-wasm/ebpiondkhkldijolgmhfenknngkkjola
You may try to use another open source browser. For example, the 2018_12 up-to-date openSUSE package collection version of the
http://www.seamonkey-project.org/
opens the .ps file in an external program in 2 clicks:
click displays the ps-file as "source code"
the "source code" view has a button titled "Open in External Program..." and after clicking that button the default .ps viewer application is launched.
At the time of the writing of this comment, the SeaMonkey web browser also supports the various old-school Java applets. A page with a Java applet:
http://math.hws.edu/TMCM/java/xSortLab/
The SeaMonkey also has a WYSIWYG-HTML-Editor, which unfortunately generates the pre-HTML5 HTML, but for users with non-IT-background it can still be very helpful as a static web site based document creation tool.
Thank You for reading my comment.
I am coaching my son's flag football team this winter and I'd like to make a little one pager app with jquery which will display and animate for the team some plays during huddles. I have been researching this quite a bit and it seems there is no way for safari to load local files. Some have suggested using goodreader, the app, but according to their manual they use a simplified browser rather than safari.
Not sure what else to try. The iPad is wifi only using ios5.
Safari is not capable of loading local files.
You have a few different options. You can:
Upload the file to Dropbox, and use it's offline mode to view it.
Use a native / hybrid container (like Appcelerator, PhoneGap, etc)
to bundle your HTML/Javascript into a "native" app.
No Safari can not load local files. You can't run local applications from there. What you can do is develop an actual app for your iphone using dreamweaver/jQuery. You could make pre-recorded videos and play them on your iPad as well. Goodreader, from what I can tell, is for reading local PDFs, which has nothing to do with apps... (but I don't really know)
This page should give you a general idea of using JQuery (mobile) to develop and actual app:
http://jquerymobile.com/
Edit: I just thought of a simpler approach that should work. Open a drop-box account at dropbox.com and put the website/Jquery in the public folder. Get the URL for the public folder and use that. Open the website on your iPad and then don't close the window. Even when the network connections stops it should still work.
I ended up using HTML5 built in APPCACHE: http://www.html5rocks.com/en/tutorials/appcache/beginner/
We went undefeated BTW :)
Can HTML and javascript run offline like an application? I'm looking to running the webpage offline like silverlight OOB applications. But if the browser closes, I want some way to run the webpage again without going online. Is this possible?
The HTML 5 draft introduces mechanisms for a webpage to be used as an offline application although, obviously, as a recent draft spec this isn't supported by all browsers.
You can also File > Save As and just save an HTML file and its associated JS locally.
Google Gears provides the kind of functionality that you're looking for. Google themselves are planning on phasing it out in favour of HTML5's draft (see David's response) but I think you will find Gears more mature [for the time being, at least], and (perhaps importantly, if you're considering redistribution) more consistent across different browsers.
[Further edit:] The Adobe AIR runtime allows you to run HTML and JavaScript applications on the desktop.