Skip to content
Snippets Groups Projects
README.md 3.03 KiB
Newer Older
  • Learn to ignore specific revisions
  • vand's avatar
    vand committed
    # QIM data repository - web
    
    vand's avatar
    vand committed
    
    
    vand's avatar
    vand committed
    Web pages for the QIM 3D data repository. The data is placed elsewhere.
    
    
    vand's avatar
    vand committed
    Live version is here: [http://qim.compute.dtu.dk/data-repository/](http://qim.compute.dtu.dk/data-repository/)! 
    
    
    vand's avatar
    vand committed
    Pages use [templates](https://www.w3schools.com/w3css/w3css_templates.asp) from w3schools, in particular the 
    
    vand's avatar
    vand committed
    [portfolio](https://www.w3schools.com/w3css/tryw3css_templates_portfolio.htm) template.
    
    vand's avatar
    vand committed
    
    
    vand's avatar
    vand committed
    ## Content
    
    vand's avatar
    vand committed
    Some of the helping files are:
    
    vand's avatar
    vand committed
    * `w3_nature_portfolio_template.html` - This is the original template, placed here for just for reference, so you will probably not need it. 
    
    vand's avatar
    vand committed
    * `qim_repository_template_all.html` - This is the original w3 template with a modified sidebar, header and footer. Also colors. This can be used when making changes to sidebar, header and footer. Can also be used for checking other possibilities given by the template. But probably not updated, so be careful when using.  
    
    vand's avatar
    vand committed
    * `sidebar.js`, `header.js`, `footer.js` - JavaScript files for including the sidebar, header and footer. These js files now contain html code, which makes it difficult to modify the content here. So not totally satisfactory. In search of better solutionm, I tried the approach from  [w3-html-include](https://www.w3schools.com/howto/howto_html_include.asp), but sidebar did not open and close on andriod phone.
    
    vand's avatar
    vand committed
    * `qim_repository_template.html` - This is the template where sidebar, header and footer are included from JavaScript files. I'm not guaranteeing that it's updated.
    
    vand's avatar
    vand committed
    
    
    vand's avatar
    vand committed
    The main files are:
    * `index.html` - Obvious.
    
    vand's avatar
    vand committed
    * `about.html` - Also pretty obvious. Images are placed in about folder.
    
    vand's avatar
    vand committed
    * `example1.html` - Rather elaborate example, you probably don't want to use this.
    
    vand's avatar
    vand committed
    * `example2.html` - Simpler, preferred.
    
    vand's avatar
    vand committed
    * `example3.html` - More images.
    
    
    vand's avatar
    vand committed
    ## Modifying
    You need basic html, I like to use [w3schools/html](https://www.w3schools.com/html/default.asp). And basic css, also covered by [w3schools/css](https://www.w3schools.com/css/default.asp). Get familiar with [w3.css](https://www.w3schools.com/w3css/default.asp). Make sure you check your changes in different browsers, and (when live) from different platforms.
    
    ## Publishing
    To change the live version, update and add files at `/www/sites/qim.compute.dtu.dk/data-repository`. For example, in command line, you can use ssh or sftp to connect to server `thinlinc.compute.dtu.dk` then navigate to `/www/sites/qim.compute.dtu.dk/data-repository` and transfer files.
    
    
    vand's avatar
    vand committed
    ## Viewing issues
    When viewing pages on your machine, your browser might probably prevent loading JavaScript code (which is used to inserts sidebar, header and footer). 
    Instead of changing your security policy, you can run a local server, e.g. Python’s built-in http server.
    1. From the command line, run `python -m http.server` (this is for Python 3.x).
    1. In a browser, open [http://localhost:8000/](http://localhost:8000/) and navigate to the pages.
    
    You might also need to force the browser to load fresh content (instead of showing a cached version of the pages). In Crome (on mac), hold down Shift
    while reloading. Check for your browser.