Ajar Productions

DropBox as a Web Server in 3 Easy Steps

Important update: As of October 3, 2016, Dropbox is discontinuing the ability to render HTML content in-browser via shared links or Public Folder.

So you’ve got some web content, now what do you do with it? Typically, this is where you’d upload your content to a web server.

Maybe you’re new to creating web content and the idea of signing up with a web host is daunting. Perhaps you’re dipping your toe in the water, and you don’t yet need your own domain name. You just need a place to post your files so that others can view them.

Fortunately, there’s a cheap (in most cases free) and easy solution. You can use Dropbox to host web sites.

Step 1: Copy your site into the Public folder within your Dropbox Directory

You may want to create a subfolder, so that you can house multiple sites in your Public folder.

Important note: If your Dropbox account was created before Oct. 4, 2012, you will automatically have a Public folder. If your account is newer, you may have to request a public folder. (This may now require a paid account). See the Helpful Links section below for other options.

Step 2: Right-click and choose Copy Public Link

You can create a shareable link from any Dropbox file or folder, but if your file has dependencies (images, CSS files, JavaScript files, etc) the Public folder has an easier time linking to those files.

Step 3: Paste the link in your browser to test, or paste into an email to send

You now have a link to your site. Here’s a sample site I created using in5.

Optional: You can use a link shortener to create a more memorable URL.

Strengths of Using Dropbox as a Web Server

Cheap/Free
Fast
Easy
Built-in version control
Doesn’t require an File Transfer Protocol (FTP) application. Files can be managed from the desktop.

Weaknesses of Using Dropbox as a Web Server

No server-side scripts
URL is generic

Helpful links

Apparently, you can also services like DropPages or Pancake.io, you can create a small and simple website with minimal effort (even if you don’t have a Public folder in your acccount).

New to Dropbox? It’s a very useful service. Check out Keith Gilbert’s Up and Running with Dropbox course on Lynda.com to learn more about what you can do with Dropbox.

Need a Dropbox account? You can create one for free.

How to Create a Multi-Issue Standalone App with Baker Framework

Justin

The Baker Framework is pre-built, open source library for Xcode. The framework allows you to easily convert HTML and publish it to native iOS (iPad and iPhone) devices as a standalone app or as Apple Newsstand issues.

To build an app with Baker, you essentially drop your HTML into the books directory within the Baker project, update a few variables in Xcode, and you’re ready to publish.

It’s well-documented that you can create multi-issue app to work with Apple’s Newsstand app (i.e., publishing a new issue each month). What is less well known, however, is that you can publish a multi-issue standalone app.

To create this “catalog” page, all you have to do is drop multiple folders in the books directory.

You now have a multi-issue app!

How to Create Scrolling Chapters for the Baker Framework Using InDesign and in5

Justin

Several in5 (InDesign to HTML5) users have asked about creating long chapters within their Baker Framework ebooks, so I put together the following video to demonstrate how this can be accomplished using InDesign and in5.

The technique in the video is enhanced by some additional features that have been added to a recent update to in5.

Baker-specific enhancements for in5 v2.1.3

Vertically scrolling (tall) pages within Baker now return to the top automatically when leaving the page.
Added script to merge multiple pages into a vertically scrolling (tall) page.
Switched on zoomable by default in book.json file for HPUB.
Removed viewport meta tag from HPUB thumbnail page.

The Baker Framework is a free code library that allows you to publish beautiful, interactive books (or magazine issues) to the iPad and iPhone.

To start creating ebooks from InDesign today, you can

Download the framework and
Get a free copy of in5 >>

Background Image Sizing and Automatic Mobile Viewport Scaling Now Available with in5

Justin

We’re pleased to announce a few additional in5 (InDesign to HTML5) features to help create digital content.

Viewport Zoom is Now Automatic

A few months ago, I posted a tutorial on how to use one of the most powerful (but underutilized) features of in5: The Most Useful in5 Feature that You’re Not Using Yet – Scaling a Single Design to Multiple Devices – The Viewport Zoom Setting Explained.

Now that feature is automatically applied by in5. The new Let in5 Choose option is now the default Viewport Zoom setting in the in5 dialog. It automatically scales the viewport on a mobile device to match the document’s page size (except when the Liquid Page Format is used, then zoom is set to 100%).

New Background Image Size Options

There’s now a menu for the background image size for both the document and the page.

Cover

The Cover option will fill the entire space (document or page).

Contain

The Contain option will make the image as large as it can be and still completely fit in the available space.

Other updates in v2.1.0:

Added support for Object Export Settings within Scrolling Frames.
Added support for drop shadows around Scrolling Frames.
Added support for Buttons within Scrolling Frames.
Fixed animation with modified motion paths.
Fixed issue with horizontal/vertical lines thinner than 1 pixel not rendering with Liquid Page format.

Alternate Font Format Embedding Now Available with in5

Justin

One challenge with fonts on the web (aside from font licensing) is that different browsers support different formats for embedding. There are wonderful services like the FontSquirrel Web Font Generator that will generate all the different file formats from a single font file.

The latest version of in5 (InDesign to HTML5) now automatically searches for alternate font formats in the folder of the original font file as well as in the Document fonts folder (if available with the .indd file).

in5 now supports the following formats as alternates when rendering text as HTML with Local Embedding: eot, woff, svg, otf, and ttf. When any of the these alternates are found (with the same name as the primary font file, but a different extension), in5 grabs a copy of the file, includes it in the output, and automatically generates the @font-face CSS for every format that can be found. The primary font used with InDesign can be an otf or ttf file.

Here’s the complete change log for version 2.0.5:

Added capability to embed local fonts from the Document fonts folder.
Added support for alternate fonts (eot, woff, svg, otf, and ttf).
Added support for lightbox links in SVG text.
Added Image Quality control support for items within a Group that has Object Export Settings applied at the Group level.
Added Image Quality control support for Pan and Zoom Overlay.
Improved leading for single-line text frames.
Improved positioning of images with drop shadows applied.
Improved automatic keyword generation.
Removed the load indicator for multi-page export options (Baker and Liquid State Publishing System).
Fixed missing SVG text for textframes that only contained a hyperlink.
Fixed On Page Click animation event.
Fixed issue with images rendered inside of scrolling frames.
Fixed issue with missing content in MSO object states.
Fixed miscellaneous crashing bug related to certain text frames.
Fixed leading/line-height issue for subscript and superscript when rendering text as HTML.
Fixed issue with the Application Cache and file names with spaces.
Fixed issue with long lines of text related to noBreak set to passthrough with style.