← Revision 11 as of 2014-03-08 10:15:25
3841
Comment: moving next steps to the top
|
← Revision 12 as of 2014-03-19 18:45:09 →
3932
|
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