diff --git a/index.html b/index.html index 3550b8b..8557a4f 100755 --- a/index.html +++ b/index.html @@ -757,8 +757,7 @@ $(document).ready(function(){ download magazine... Alternative layout: native scroll, - iscroll, - hand-written drag + hand-written drag

diff --git a/layout-iscroll.html b/layout-iscroll.html deleted file mode 100755 index e854f9e..0000000 --- a/layout-iscroll.html +++ /dev/null @@ -1,571 +0,0 @@ - - - - -PortableMag - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - - - - - PortableMag cover - - - - - - - Mag - Portable - - A suit for publishing portable periodic magazines on mobile platforms. - - - - - - -
-
- - - -
-
-
-

The Basics...

- -

Main features

-
    -
  • Magazines, Covers, Articles and Pages, fully navigable -
  • Three main views: Magazine (under development) Page and Ribbon -
  • Fully linkable structure -
  • Full intuitive Gesture, Mouse or Keyboard navigation -
  • Special #URLs enable full link-based navigation and control -
  • Bookmarks and bookmark navigation -
  • Intuitive navigator widget -
  • Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more. -
  • Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows -
  • Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics) - -
  • Usable from the web (support for engines other than WebKit not here yet) -
  • Integrated Editor (under development) -
  • Integrated publishing framework (under development) - -
- - - -
[PAGE NUMBER]
-
-
-
-
-

PortableMag Navigation and Linking

-
-

Finger controls

-
    -
  • Single finger swipe left/right – prev/next page. -
  • Two finger swipe left/right – prev/next article. -
  • Single finger swipe up/down – toggle thumbnail view. -
  • Pinch in/out – go in/out of thumbnail view. -
-

Navigation via #URLs

-

The basics

- Page #1
- Named page
-

- Anchor on page #3
- currently navigation via existing anchors - will break the layout, so use the name attribute - on any other tags (see example). - -

-
- -
-

Special anchors

-

These show up in the page URL

- Magazine cover
- Last page
- Thumbnail view
- Toggle a hidden layer
- - Toggle bookmark
- -

Relative special anchors

-

These will get replaced by corresponding page numbers in the URL

- Next page
- Previous page
- Next article
- Previous article
-

History support

- NOTE: this is still a bit flaky...
- Go back
- Go forward
-
- - - - - -
[PAGE NUMBER]
-
-
- - - -
-
- - - - - - - - - - - - PortableMag Anatomy - - Layer 1 - PortableMag Anatomy - - - - - - - Magazine cover - - Article Cover - - Page - - Page - - Next Article - Magazine - Article - - - - - - Page - - Page Content - (safe area) - - - - - - - - This area might get clipped - - - - - - - - - -
[PAGE NUMBER]
-
-
-
-
-

The Page content has a fixed size...

- -
[PAGE NUMBER]
-
-
-
-
- - -

Using the content block...

-

- The content block can contain any HTML. -

-

- The contents will allways fit the screen, the aspect ratio - of the content block is fixed regardless of the viewer. -

-

- Contents will not get clipped as long as they are within the block. -

-

- NOTE: by default the overflow is visible (see next page), so be carefull. -

- -
[PAGE NUMBER]
-
-
-
-
- -
-

You can still use the full page area...

-

- Though anything outside the content block can and will get clipped, - depending on viewer aspect ratio... -

-

- You can see this by resizing the page in browser or rotating the device. -

-
- -
[PAGE NUMBER]
-
-
-
-
-
-
-

Page Templates

- -

- This page contains several examples of template fields, - the first one is the simplest, the magazine name - ([MAGAZINE NAME]), - then we'll have the index (see next) and in the bottom-right - corner is the page number... -

- -
[ARTICLE INDEX]
- -
[PAGE NUMBER]
-
-
- -
-
-

Two column

-
- Column 1 -
-
- Column 2 -
- -
[PAGE NUMBER]
-
-
-
-
- Left-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Center-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
- -
- -
-
-
-

Page Set Example

- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
-
- -
- - - - diff --git a/layout-iscroll2.html b/layout-iscroll2.html deleted file mode 100755 index bb153ce..0000000 --- a/layout-iscroll2.html +++ /dev/null @@ -1,758 +0,0 @@ - - - - -PortableMag - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - - - - - PortableMag cover - - - - - - - Mag - Portable - - A suit for publishing portable periodic magazines on mobile platforms. - - - - - - -
-
- - - -
-
-
-

The Basics...

- -

Main features

-
    -
  • Magazines, Covers, Articles and Pages, fully navigable -
  • Three main views: Magazine (under development) Page and Ribbon -
  • Fully linkable structure -
  • Full intuitive Gesture, Mouse or Keyboard navigation -
  • Special #URLs enable full link-based navigation and control -
  • Bookmarks and bookmark navigation -
  • Intuitive navigator widget -
  • Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more. -
  • Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows -
  • Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics) - -
  • Usable from the web (support for engines other than WebKit not here yet) -
  • Integrated Editor (under development) -
  • Integrated publishing framework (under development) - -
- - - -
[PAGE NUMBER]
-
-
-
-
-

PortableMag Navigation and Linking

-
-

Finger controls

-
    -
  • Single finger swipe left/right – prev/next page. -
  • Two finger swipe left/right – prev/next article. -
  • Single finger swipe up/down – toggle thumbnail view. -
  • Pinch in/out – go in/out of thumbnail view. -
-

Navigation via #URLs

-

The basics

- Page #1
- Named page
-

- Anchor on page #3
- currently navigation via existing anchors - will break the layout, so use the name attribute - on any other tags (see example). - -

-
- -
-

Special anchors

-

These show up in the page URL

- Magazine cover
- Last page
- Thumbnail view
- Toggle a hidden layer
- - Toggle bookmark
- -

Relative special anchors

-

These will get replaced by corresponding page numbers in the URL

- Next page
- Previous page
- Next article
- Previous article
-

History support

- NOTE: this is still a bit flaky...
- Go back
- Go forward
-
- - - - - -
[PAGE NUMBER]
-
-
- - - -
-
- - - - - - - - - - - - PortableMag Anatomy - - Layer 1 - PortableMag Anatomy - - - - - - - Magazine cover - - Article Cover - - Page - - Page - - Next Article - Magazine - Article - - - - - - Page - - Page Content - (safe area) - - - - - - - - This area might get clipped - - - - - - - - - -
[PAGE NUMBER]
-
-
-
-
-

The Page content has a fixed size...

- -
[PAGE NUMBER]
-
-
-
-
- - -

Using the content block...

-

- The content block can contain any HTML. -

-

- The contents will allways fit the screen, the aspect ratio - of the content block is fixed regardless of the viewer. -

-

- Contents will not get clipped as long as they are within the block. -

-

- NOTE: by default the overflow is visible (see next page), so be carefull. -

- -
[PAGE NUMBER]
-
-
-
-
- -
-

You can still use the full page area...

-

- Though anything outside the content block can and will get clipped, - depending on viewer aspect ratio... -

-

- You can see this by resizing the page in browser or rotating the device. -

-
- -
[PAGE NUMBER]
-
-
-
-
-
-
-

Page Templates

- -

- This page contains several examples of template fields, - the first one is the simplest, the magazine name - ([MAGAZINE NAME]), - then we'll have the index (see next) and in the bottom-right - corner is the page number... -

- -
[ARTICLE INDEX]
- -
[PAGE NUMBER]
-
-
- -
-
-

Two column

-
- Column 1 -
-
- Column 2 -
- -
[PAGE NUMBER]
-
-
-
-
- Left-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Center-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
- -
- -
-
-
-

Page Set Example

- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
-
- -
- - - -