{"id":3349,"date":"2011-07-05T01:42:00","date_gmt":"2011-07-05T01:42:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/windows-8-inspired-website\/"},"modified":"2016-07-28T10:50:29","modified_gmt":"2016-07-28T10:50:29","slug":"windows-8-inspired-website","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/blogs\/windows-8-inspired-website\/","title":{"rendered":"Windows 8 inspired website"},"content":{"rendered":"

Download the zip here<\/a><\/p>\n

Working in New Biz<\/h5>\n

As I work in Red Gate’s new business division much of what we do isn’t very visible. So along with Marine Barbaroux<\/a> I decided to try to create an engaging website to capture what we’re doing in an easy to digest way.<\/p>\n

The idea is to create a website that can be used by everybody in Red Gate to get a picture of what we’re doing on a day-to-day basis. It isn’t quite there yet but I thought I’d share the work so far so that anybody can play with it.<\/p>\n

How it works<\/h5>\n

The website is run entirely in javascript and makes use of jquery<\/a> so should be hostable on whatever web server you have lying around. The main index.htm page reads a data page html and uses the <\/p>\n

data inside to construct the pages and segments on the fly. The reader can then browse around the various pages reading all the updates. <\/p>\n

\"image_thumb.png\"<\/a><\/p>\n

A sample “empty” page<\/p>\n

<\/h5>\n

The segments are arranged in 3 columns and 3 rows, each being a known size. Each segment can span half to 3 columns and 1 to 3 rows. The smallest segment being a perfect square of 175px which looks really nice with just a simple image on it. <\/p>\n

Have a play<\/h5>\n

Please feel free to download the source code for the update pages and have a play with it. I’ve tried to go through and comment the code so hopefully it should make sense.<\/p>\n

Things to do<\/h5>\n

There are still quite a few refinements I’d like to make which I will probably do over time if it takes off. These are (in no particular order)<\/p>\n

    \n
  1. Back from sub-page goes to referring page <\/li>\n
  2. Clean up carousel – probably re-implement. <\/li>\n
  3. Allow swipe to work on iPad etc (did try it but couldn’t get it to work) <\/li>\n
  4. Similarly allow mouse drag to shift pages <\/li>\n
  5. Also allow keyboard to work left + right <\/li>\n
  6. Back button via pushing history on stack or clever stuff? <\/li>\n
  7. Neaten sources – probably provide some sort of data source server <\/li>\n<\/ol>\n
    <\/h5>\n

    Download the zip here<\/a><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

    Download the zip here Working in New Biz As I work in Red Gate’s new business division much of what we do isn’t very visible. So along with Marine Barbaroux I decided to try to create an engaging website to capture what we’re doing in an easy to digest way. The idea is to create……<\/p>\n","protected":false},"author":167198,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"coauthors":[],"class_list":["post-3349","post","type-post","status-publish","format-standard","hentry","category-blogs"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/3349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/167198"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=3349"}],"version-history":[{"count":1,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/3349\/revisions"}],"predecessor-version":[{"id":25314,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/3349\/revisions\/25314"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=3349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=3349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=3349"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=3349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}