Category: Uncategorized

Adaptive vs. Responsive vs. Multi-Platform

These misleading terms Adaptive and Responsive don’t matter much, but rather the result which is an experience of the user (and higher conversion rates) across various platforms (including operating systems, browsers and screen resolutions). For authors and publishers (both book and web formats), design is a rather important topic. Hardcover, paperback, ebook, web are physical/digital format issues (not to mention pricing/paywall discussions). But the real question is does the content (information) and how it is presented (design) change based on device, platform, or screen resolution.

Veiled Chameleon

What Matters in Adaptive and Responsive Design

We at Parliament Press have a slightly different take. First, we need to clearly understand what decisions need to be made, and what changes to implement, and finally, how to really think about device proliferation and ubiquity.

Design Complementary Experiences

Complementary experiences can indeed be identical. But they should at the least inform each other. Recall with experiences we want to reinforce and enhance a brand. Therefore do not contradict expectations which one platform has created. A big example of this is the fragmentary and contradictory experience for Bloomberg apps and website. It is obvious that entirely different teams created these various apps and they likely took as a goal the desire to not duplicate or even enhance what one platform provides in terms of navigation, interface, and information.

Start with a Single Design for All Platforms

The exercise of designing for all platforms makes it abundantly clear where the boundaries of usability and information consumption is. Tradeoffs should be made to provide a reasonable experience at the smaller mobile screen sizes, while having a reasonable experience at the most common desktop display sizes. Mobile should have the slight preference here, since it is the growth platform. This will also help make less is more decisions on removing clutter from the interface.

Learn from Actual Navigation on Different Platforms

Look at how the different platforms in terms of operating system, browser and screen resolution are consuming the content, then take that as the point of departure for special design, however implemented, for different platforms.

Client-side vs. Server-side Customization

Obviously everything comes from a server, but Client-side customization is use of CSS and Javascript only rather than a distinct template (with unique HTML) being served to unique platforms. It doesn’t really matter, per se, as long as there is a good amount of accuracy, that is specific platforms delivered specific content. This is an implementation detail that is best hashed out in the back room between developers and administrators. Ultimately unique content (inclusion or exclusion of content) based on a platform (operating system, browser type, screen resolution) should become not only possible but used in all cases where that makes sense, in terms of increasing conversions.

Multi-platform Design (MPD)

The words Responsive and Adaptive should in all cases be eschewed for a category that is descriptive to its end goal, that is multi-platform. And because three letter acronyms are all the rage, we can call this MPD.

In discussing MPD, we don’t actually focus on this, but rather use the language of mobile. Not mobile first but rather mobile friendly. If a site is mobile friendly, visitors can achieve their goals in the same way as on another platform (desktop/laptop). That is the first step toward multi-platform design. Second is having a feedback loop of mobile friendliness into the design in general. What happens in this process is that design elements and constraints shift from being one platform, then another platform, then a third platform, to that of multi-platform-ness.

via Jeff McNeill http://ift.tt/1xSwME4

Advertisements

Future Proofing Note Taking / To Do Lists

After the fiasco with Evernote (which I loved for a time) and now Wunderlist (again, a temporary sweetheart), I tried a few options, including ToDo.txt. Now, I have finally determined an excellent set of note-taking tools. There is the need to future-proof this, which as far as I can tell means keeping notes and to-do lists in text files (and not a single text file), and syncing them in the cloud. Plaintext (along with Bland Markdown) is indeed the future.

Note

Requirements for Note Taking and To Do Lists

  • Multiplatform: OSX, Web, iOS, Android
  • Ease of use: Fast to use/access, no advertising (willing to pay for this)
  • Future proof: Cloud syncing, plaintext files
  • Affordable: Under $60/year ($5/month) total (all apps and any subscriptions)

It took a while to get to this simple list. It was trying out the various options that led to these conclusions.

Apps and Services

Some people would have free as a requirement, but that is not as important as transparency, a plaintext format and file-based information storage. The massive problems of interface redesign (Evernote) and broken synchronization (Wunderlist) can be repaired much more easily with the file-based system that I am now using.

The Future is Git

The future is definitely Git, but it is also Dropbox, iCloud, and (heaven forfend) Skydrive. For individual lists, the systems above will be fine, when collaboration is needed, then Git will become the platform of choice. To that end, the following should be considered (as well as other, emerging nascent tools):

Also note Gistbox which focuses more on text snippets, so could be good for note taking and to do lists, rather than larger documents. There is also a Gistbox Chrome App.

Not the Future – Proprietary Apps

Indeed, if I wanted to try yet another proprietary app, then Todoist looks quite good. Also, so does Astrid, though that has been acquired by Yahoo, and we have no idea what its future will be.

via Jeff McNeill http://ift.tt/1mQb4bn

Private Video Streaming – Options

Public video can easily be hosted and streamed on YouTube at no cost. But for those who want some restrictions on the video, YouTube has only limited options. Currently YouTube only allows sharing private videos with up to 50 YouTube accounts, via including their email addresses in the video manager. There are several other options, however, each with various tradeoffs.

Storage, Players, Access Control

There are three main components to private video streaming (besides creating and editing the video). These are:

  • Video storage (where the videos are kept),
  • Video players (how they can be played by those with access), and
  • Access control (the method for allowing only a set group of individuals to have access).

Video Storage Options

There are several options for video storage, though those options also impinge upon what players may be available and what kind of access control is possible. A partial list includes:

Video Players

The best approach is always Open Source, and there are at least two options:

Access Control

The first part of access control has to do with accounts, which generally have email addresses (and passwords). There are two issues:

  • One has to do with the address on the internet and whether it is password-protected (either with a single password or an account-based password).
  • The second issue is whether the actual video file itself is somehow obscured by the player or is easy to download.

The suggestion is to use WordPress (or if you must, some other third-party login system such as Twitter, Facebook, Google) in order to secure the page on which the video can be viewed.

Then use one of the video players above

Public Video Streaming WordPress Embed Codes

Just a recap, there is the standard Embed codes for WordPress Video (and more) and there is also the Smart YouTube plugin (which works with more than just YouTube video).

Privacy and Access Control on WordPress

Pages (with embedded video) can be labelled as public, password protected, or private. Only those users with proper security level (Admins and Editors) can see private pages, and password protected pages require a password. Use various plugins for more control such as limiting parts of a site to logged-in users only.

Video Format for Web Streaming

Video should be appropriately encoded, both allowing for fast start and small file size to increase speed and save on bandwidth. The useful Open Source tool Handbrake can be used if needed, with the following settings:

Handbrake Settings for Web Video

via Jeff McNeill http://ift.tt/1pLrN3z

WP Fountain – Fountain Markup

This plugin modifies screenplay format text for inclusion in web pages. Based on the scrippet concept and original code by John August and Nima Yousefi.

Fountain

Description of WP Fountain

The Scrippet format is a text format designed by John August to allow writers to input screenplay text in easy-to-write plain text and have it converted to properly styled HTML. This plugin will automatically convert plain text Scrippet to HTML, and add John August’s Scrippets CSS file into your blog. For more information on Scrippets please see http://ift.tt/1lbUO4T

Installation of WP Fountain

  1. Download scrippets.zip.
  2. Unzip the archive.
  3. Upload the entire “wp-scrippets” folder into your “wp-content/plugins” directory.
  4. Activate the plugin through the Admin plugins panel.
  5. Enjoy!

Usage of WP Fountain

To include a Scrippet of Fountain in your WordPress blog simply include text in the following format:

[ scrippet ]
INT. HOUSE – DAY

MARY yells across the hall to FRANK.

MARY
Anything you want to tell me?

FRANK (O.S.)
I swear, honey, I don’t know how mayonnaise got in the piano.

CUT TO:

FRANK

running out of the bathroom.

FRANK
(terrified)
There are bees in the toilet!
[ /scrippet ]

This renders as:

INT. HOUSE – DAY

MARY yells across the hall to FRANK.

MARY

Anything you want to tell me?

FRANK (O.S.)

I swear, honey, I don’t know how mayonnaise got in the piano.

CUT TO:

FRANK

running out of the bathroom.

FRANK

(terrified)

There are bees in the toliet!

Note: Scrippet text must be wrapped in

blocks, and must have correct line spaces between screenplay elements.

You can make text bold or italic by in the following ways:

Bold

  • Wrap the text in double asterisks **bold**.

Italic

  • Wrap the text in single asterisks *italic*.

Please note: text styling does not work for transitions. Sorry.

Frequently Asked Questions

MEEP! It’s not formatting correctly. What do I do?

First, please make sure you are inputting the text in the right format. (Line spacing is important!)

However, if you’re doing it right and it’s still not looking right, please go to scrippets.org for troubleshooting help or to submit a bug report.

The Scrippets are formatted correctly, but the style of the box doesn’t fit in with my blog design. What can I do?

The Scrippets settings panel in your WordPress administrator’s page has several settings that you can change to better suit your blog’s design.

However, if those options are insufficient, you can modify the scrippets.css file in wp-scrippets plugin folder. Be advised that updates to the Scrippets plugin will overwrite your changes, so you should back them up and remember to add them back in whenever the plugin gets updated.

Release Notes

WP Fountain

  • 0.0.1 – Fork of WP Scrippets

WP Scrippets

  • 1.5 – Fixed screenshot.
  • 1.4 – Various bug fixes.
  • 1.35 – Fixed bug resulting from having a character name end in INT (ie, VINCINT, QUINT).
  • 1.3 – Compatibility fix for WordPress 2.8+
  • 1.2 – Fixed FOREST bug, added version number to scrippetize.php
  • 1.1 – Added support for bold, italic, and underlined text.
  • 1.0.2 – Fixed bug in wp-scrippets.php that prevented CSS to be added properly for blogs with different WordPress and Blog addresses.
  • 1.0.1 – Fixed scrippetize to work with bbPress.
  • 1.0 – Release!

via Jeff McNeill http://ift.tt/1qBbY2K

Spicy Markdown – Web Shortcode

Spicy Markdown is a significant departure from Bland Markdown as well as many/most other Markdown implementations. Most such implementations try and limit themselves to the spirit of original markdown in terms of parsimony, and extend it only in terms of some additional incremental (but important) extensions. Pandoc tries to do a bit more.

Spicy Markdown

Note: This post is under occasional update.

Difference in Spicy Markdown from other Markdown

Spicy Markdown is different because it is an attempt not so much to extend Markdown but to create a superset of website tools. It might be better called Spicy Shortcode instead of Spicy Markdown but indeed Markdown is the core markup.

Spicy Markdown aims to produce a static html page that is fast, and includes ways of optimizing images for effective display.

Spicy Markdown also supports various other kinds of features of wordress (such as <!--more-->), image and video codes, slideshows/image sliders, and includes css enhancements (such as image alignment).

Essentially, Spicy Markdown is meant to be the best tool for plain-text editing of web pages, as elegant and parsimonious as possible, but with full ability to do basic page composition (layout).

Spicy Markdown is meant to work with SquidCache, and therefore will provide pre-fetched queries and include as little as possible realtime database access.

New Functionality of Spicy Markdown

  • Images will include captions and figure numbering, as well as dimensions and alignment support.
  • YouTube videos will be supported
  • Footnotes and endnotes will be supported
  • Alternative fonts will be supported (specifically useful in the case of different fonts for different languages).
  • Image sliders will be supported (which will have JS/CSS elements)

Related Projects to Include or be Inspired by

via Jeff McNeill http://ift.tt/RJu3MD

Bland Markdown – Syntax Recommendation

The Need for Bland Markdown

There are various flavors of markdown (see also whatismarkdown.com), including original markdown, as well as Github Flavored, Reddit flavored, StackOverflow flavored, SourceForge flavored, Tumblr markdown (possibly PHP Markdown Extra), PHP Markdown Extra, MultiMarkdown, and Pandoc flavored. This is not to mention supersets such as Maruku and Kramdown.

So, due to this proliferation, we introduce a non-implementation recommendation. The need for this is felt most by editors and writers (and publishers), for whom implementation details are not important, but a single style guide syntax to follow is a necessity. In order for one’s Markdown code to be as portable as possible, a single subset that is most widely used is seen as the best approach for an organization as well as individuals who produce and edit Markdown markup now and in the future. Hence, Bland Markdown aka Markdown bland aka Mb.

Bland Markdown

Markdown

Bland Markdown Syntax Rationale

The main features animating the decision regarding the particular syntax of Bland Markdown is to define a set of syntax that is easy to use and edit. This means that in some cases where there are several options for particular Markdown markup, a single markup is chosen for memorability and ease of use, along with the widest Markdown flavor implementation support. We use a modified icon based on the Markdown icon, with the down arrow replaced with a lower case b for bland.

Note that a recommended bland syntax is preferable over testing tools such as Babelmark 2 (which doesn’t fully work properly as the PHP Markdown is not parsing, as of this posting). (See also the PHP Markdown dingus for markdown reformatting.)

Note also that Jeff Atwood tried to do a call for large site users of Markdown to get together and create a standard, which unfortunately has not gotten much mileage, another reason for a bland syntax.

Some other goodies include http://ift.tt/1j5nrxH and http://ift.tt/1j5nrxH.

Bland Markdown Syntax

License: Bland Markdown is released under a Creative Commons Attribution license.

Headers

Hash/Pound sign is used to denote H1, H2, etc., as in:

# Header
## Subhead

Ordered and Unordered Lists

Ordered lists are numbered lists, and unordered lists are bulleted lists. Bulleted lists are to be created using the minus sign.

- We suggest the minus sign, as it is easier to type than a plus sign

- And will not be confused with the asterisks used for bold and italics

Whereas ordered lists have actual numbers and periods in them (though in fact ordered lists ignore the actual number and create a new numbered order starting at 1).

1. The first item
2. The second item

Bold and Italics (aka Strong and Emphasis)

*Italics*
**Bold**
***Bolded Italics***

Images

![Optional Alt](URL to image)

Note that optionally we suggest the use of embedded Flickr Gallery shortcodes to Flickr images, but that is outside of the scope of Bland Markdown (see Salt and Pepper below).

Note also that we do not recommend any kind of Figure markup, as this is not straightforward and can best be handled manually (in a separate paragraph, say with manually numbered and italicized text) or with external scripts.

URLs

URLs are either plain (where the link text is nearly identical to the URL) or with custom link text. In the case of plain URLs, simply enclose in angle brackets (less than and greater than signs), as such:

<mailto:info@parliamentpress>
<http://ift.tt/1fX7kI2;

If URLs have link text, then use the image markup, minus the exclamation mark, as such:

[Parliament Press](http://ift.tt/1j5nrxI)

Code Blocks

Paragraph-level code blocks simply have four spaces to begin each line, whereas inline code is marked up with backticks, as in:

This is marked up `code`

Escaping backticks is performed by using double backticks to enclose the code block and inside single backticks will be exposed as literals.

Fenced Code Blocks

Fenced code blocks come in many flavors: Github, PHP Markdown Extra, Pandoc (a superset) and MultiMarkdown just adopted the Github style of fenced code blocks (following Github). Four spaces or three backticks and a newline provide Github style, as well as some syntax highlighting by naming the code being fenced. PHP Markdown Extra uses three tildes, and also supports class naming (as does Pandoc).

Line Breaks

Handily, line breaks can be instituted by typing two spaces at the end of a line. For visuals, simply add a single hard return after the two spaces, and not two hard returns as normally to institute a paragraph break.

Note: This alone (the use of two spaces to create a <br >) should be a caution to people who have the unfortunate two spaces after each period habit.

Horizontal Rule

Five asterisks separated by two hard returns above and below is the most compatible format, as such:

*****

Quoted Text

Taken from email correspondence, quoted text simply has four lines, a greater-than symbol < and a space for each line, as such:

> Quoted text

Tables

Tables are trouble for several reasons. While Markdown is an improvement over basic HTML, are difficult to edit in terms of viewing the data. Also, not all Markdown flavors support Markdown inside of the tables, and there is also a variety of formatting that would need to be done in raw HTML. Finally, there are many viewers, i.e., early ebook readers, which do not deal with tables well if at all. Therefore, most tables are best rendered as images and then used and shared as such. That said, sometimes an HTML table is something to have. Therefore we suggest the following syntax:

Right | Left | Default | Center
-----:|:-----|---------|:-----:
12 | 12 | 12 | 12
123 | 123 | 123 | 123
1 | 1 | 1 | 1

Renders as follows:

Right Left Default Center
12 12 12 12
123 123 123 123
1 1 1 1

Bland Markdown Extended (aka Spicy Markdown)

There are two kinds of extensions to Bland Markdown, one for the web, and another for print/epub (sometimes for both). In the future, this may be dispensed with, but each has some requirements that can both be met. A full implementation of Spicy Markdown (SM) will be developed in 2014.

Superscript and Subscript

MultiMarkdown recently adopted a similar syntax for superscript and subscript to that of Pandoc. For syntax, use carets or tildes, as in:

x^2 or x^2^
y~z or y~z~

The single delimiter terminates at first whitespace or punctuation. Dual delimiter allows for punctuation to be scripted, but not white space.

Footnotes

Footnotes are supported similarly (though not identically) in PHP Markdown Extra, MultiMarkdown and Pandoc. The markdown consists of a named footnote marker (rendered as a superscripted number), and the footnote itself.

[^footnote-name]

[^footnote-name]: Footnote text

Math Formulas

We recommend the use of LaTeX (XeLaTeX) and for the web some kind of plugin to parse the native LaTeX markup, such as Enable LaTeX or LaTeX for WordPress.

Document metadata

This part is left to be done, including Pandoc, MultiMarkdown and LaTeX document metadata styles.

CriticMarkup

As more applications integrate CriticMarkup this somewhat unwieldy markup, it can be used (or perhaps a more streamlined version).

Image Markup

Using social media images from Flickr is straightforward with the Flickr Gallery plugin on WordPress. (Yes, we know it has not been updated in two plus years, however with only a little core hacking it works fine.) The code used is “ where 1234567890 is the Flickr image ID.

Another key factor of image markup has to do with captioning as well as figure numbering. This can be done in CSS (for x/html/ebook implementations) as well as LaTeX, but there should be something that works well in Markdown. Unfortunately, the MMD syntax doesn’t work for Pandoc, or something is screwy. I’ve got to work this out further. See a fork of the Php Markdown extra

Better would be to also include layout information such float:left;margins 0 10px 0 0. People make a big deal about partitioning this information, but that becomes harder to maintaim. When one is inserting an image, they are thinking about layout and presentation, which is why having that facility is important.

Video Markup

There is a handy Smart YouTube plugin which allows for appending a v at the end of http of a YouTube video url, and will embed it (along with HTML5 support). Other video sources are also supported. In addition, there are many controls for default site-wide YouTube video settings in the plugin.

A better approach would be simply embedding a YouTube video URL within something like [ embed ] . . . [ /embed ]

Embedded Slideshows

Slideshare slideshows can be embedded in WordPress with a plugin. That supports the embedding of the Slideshare share code for wordpress.com

Note also that I’ve yet to work out Markdown markup for slideshows that could then be converted into X/HTML/ePub/PDF slideshows and then uploaded to Slideshare (to be embedded as such). There are various syntax options out there for this, such as found in Pandoc. TBD…

via Jeff McNeill http://ift.tt/1fX7kYD