Differences between revisions 11 and 12
Revision 11 as of 2014-03-08 10:15:25
Size: 3841
Comment: moving next steps to the top
Revision 12 as of 2014-03-19 18:45:09
Size: 3932
Comment:
Deletions are marked like this. Additions are marked like this.
Line 8: Line 8:
 * russell: setup ptp-api and ptp-splash-server (see github) reverse proxied through ptp's Apache SSL server
 * integrate htdocs output of ptp-splash-spage into ptp-openwrt-files
 * setup Lucky Lab Overlook as first public node hosting the splash page by March 24th
Line 12: Line 9:
 * debug font serving issues (nocat auth)
 * plan to push to other nodes
Line 65: Line 64:
Line 75: Line 73:

== completed tasks ==

 * setup ptp-api and ptp-splash-server (see github) reverse proxied through ptp's Apache SSL server
 * integrate htdocs output of ptp-splash-spage into ptp-openwrt-files
 * setup Lucky Lab Overlook as first public node hosting the splash page by March 24th

We're getting close to implementing the SplashPage redesign efforts.

Splash Page 2014 Update

An effort to modernize our woefully dated splash page.

Next Steps as of Wed Mar 5th 2014

  • contact node hosts describing the change that is coming to the splash page
  • debug font serving issues (nocat auth)
  • plan to push to other nodes

The Code

The redesign uses a modern Single Page App approach to provide a rich HTML page which is augmented by logic, design and data from a ptp central server.

There are three code repositories used, each with a separate concern...

ptp-splash-page

https://github.com/personaltelco/ptp-splash-page

Containing the HTML, images, javascript, css and fonts which live on the router. It makes calls to...

ptp-splash-server

https://github.com/personaltelco/ptp-splash-server

Containing the javascript, css and images which are served from a central server. It in turn gets data from...

ptp-api

https://github.com/personaltelco/ptp-api

A Nodejs server which gathers data from various sources and offers them up via a RESTFUL api.

Technologies Used

  • nodejs - in addition to it's role as the server for ptp-api, node is used to support the development and build environments for ptp-splash-page and ptp-splash-server

  • npm - node's little buddy the Node Packaged Modules tool downloads the modules for each code base and places them in node_modules

  • bootstrap - an HTML and css design framework that helps to build single page apps targeting multiple devices and screen sizes

  • jquery - a javascript DOM manipulation swiss army knife

  • fontawesome - an iconography library to add nice icons to bootstrap designs

  • dustjs - a handlebars style templating tool

  • async - js asynchronous workflow library

  • grunt - a javascript 'task runner' to automate development chores including

    • compiling templates
    • combining and minifying javascript
    • combining and minifying css

The Lifecycle of a Page Load from the Browser Perspective

  • The typical user experience as documented in SplashPage applies (captured by captive portal)

  • The HTML page loads from the router
  • ptp-splash-page.min.js loads from the router
  • ptp-splash-server.min.js loads from a central ptp server (on donk at this time)
  • the Document.load event is issued
  • json is loaded from ptp-api and combined with dust templates
  • these combined elements are then added dynamically to the DOM
  • upon successful load, the 'news' navigation element is added to the page

If the browser can't load ptp-splash-server.min.js, then it will fail well and serve a respectable splash page which provides the basics of terms of service, node information and a click through to the internet.

How this happened

In late 2012 and early 2013 BenjaminFoote (bfoote) had the idea of trying to improve the splash page. He wasn't the first and he won't be the last.

We started gathering some requirements in NewCaptivePortalFeatures and there was a review of other efforts including SplashPageRedesign NodeSplashPages MobileSplash.

Then bfoote went off and traveled for a while.

In late 2013 after returning to Portland bfoote went and started in on the redesign in earnest. It became a labor of love.

completed tasks

  • setup ptp-api and ptp-splash-server (see github) reverse proxied through ptp's Apache SSL server
  • integrate htdocs output of ptp-splash-spage into ptp-openwrt-files
  • setup Lucky Lab Overlook as first public node hosting the splash page by March 24th

SplashPage2014 (last edited 2014-11-10 02:02:02 by RussellSenior)