Difference between revisions of "Updatable Website"

From Publication Station
(Created page with " =Updatable Website= How to integrating changing content & website creation? Our problem: like in inDesign '''we want to work on the identity and navigation of our website,...")
 
 
Line 1: Line 1:
* Download [https://github.com/wdka-publicationSt/book-website/archive/master.zip book-website structure]
* unzip master.zip
* place `book-website-master/` in the folder dedicated to the publication




=Updatable Website=
How to integrating changing content & website creation?
How to integrating changing content & website creation?


Line 12: Line 15:
[[File:website-inner_outer.svg]]
[[File:website-inner_outer.svg]]


https://github.com/wdka-publicationSt/book-website/archive/master.zip
 
== book-website ==
The ''book-website'' try address this issue, with a quick'n'dirty JS+HTML system for '''loading html content from content.html into index.html''', without a webserver.
 
NOTE: '''it will only work in Firefox'''; Chrome will refuse to so, due to same origin policies
 
The motivation to do so, is to allow content (in content.html) to be easily updatable, and decoupled from the rest of the webpage files.
 
Folder structure:
 
<pre>book-website/
├── content.html    ----> CONTENT
├── index.html      ----> LANDING PAGE
├── jquery-3.1.1.min.js
├── load.js        ----> JS where content is loaded, sections and TOC are created
├── README.md
└── style.css      ----> CSS style info
</pre>
 
 
 
* <code>content.html</code> will store updatable content
* <code>style.css</code> stores the CSS Making changes to CSS can be done in
* <code>index.html</code> receives the content from content.html allows HTML (such as menus) to be added
* <code>load.js</code> besides loading content, also includes a function which generates a Table-of-contents <code>generate_toc</code>, using the h1 elements to create entries:
 
<pre>    &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#id_of_firsth1&quot;&gt;First h1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#id_ofsecond_h1&quot;&gt;Second h2&lt;/a&gt;&lt;/li&gt;
    &lt;ul&gt;</pre>

Latest revision as of 16:10, 18 February 2018

  • Download book-website structure
  • unzip master.zip
  • place `book-website-master/` in the folder dedicated to the publication


How to integrating changing content & website creation?

Our problem: like in inDesign we want to work on the identity and navigation of our website, while keeping the content updatable.

inDesign addresses this issue with the use of chapter styles.

How can it work for the website creation?

Website-inner outer.svg


book-website

The book-website try address this issue, with a quick'n'dirty JS+HTML system for loading html content from content.html into index.html, without a webserver.

NOTE: it will only work in Firefox; Chrome will refuse to so, due to same origin policies

The motivation to do so, is to allow content (in content.html) to be easily updatable, and decoupled from the rest of the webpage files.

Folder structure:

book-website/
├── content.html    ----> CONTENT
├── index.html      ----> LANDING PAGE 
├── jquery-3.1.1.min.js 
├── load.js         ----> JS where content is loaded, sections and TOC are created
├── README.md
└── style.css       ----> CSS style info


  • content.html will store updatable content
  • style.css stores the CSS Making changes to CSS can be done in
  • index.html receives the content from content.html allows HTML (such as menus) to be added
  • load.js besides loading content, also includes a function which generates a Table-of-contents generate_toc, using the h1 elements to create entries:
    <ul>
    <li><a href="#id_of_firsth1">First h1</a></li>
    <li><a href="#id_ofsecond_h1">Second h2</a></li>
    <ul>