Website

CA Lab Website

Reference

1. Original reference
2. Font Awesome

Maintenance

1. Rules of the home page

   • less than 5 news (news in home should be happened in previous year or this year)
   • less than 12 members
   • less than 5 publications
   • less than 6 courses

2. Add a new publication

   • Use the script/bib2html.py

3. Picture

   • File format: .webp would be best.
   • Sponser picture size: 200x50
   • Project picture size: 400x289 / 600x450
   • Member picture size: 225x225 (best), or a square img (size can be random)

4. Video

   • File format: .webm would be the best.

5. Add a new member

   • Image size
   • links
   • set the id and class

6. Minify the CSS

   • use the script/minifyCSS.py (not tested yet)

7. Common html part

   • the common html is placed under script/common/
   • use the script/replace_content.py to replace the content

Known bugs

1. background-attachment: fixed; does not work on any ios devices. See here. Current solution.

Tips

1. Add a special character in HTML.

   • Greek
   • German
   • Math
   • Bar over character
   • Power of character

2. Check if the CSS parameter is available across all devices

   • Can I Use

TODO

Warning

• clean the warning from the map

Before to go

• clean all the empty links
• link all the members to their section in member page
• Add the readme or instruction about the maintenance of website
• fill the words which need to be filled
• check the mobile version (include the css setting and different OS)
• re-layout the footer
• use the minimized .css and .js

Optimizations

• let the content change width to be a variable in css (complex!!!)
• Try to let the background of contact to be fixed
• check the figure of project and member => use github workflow?
• the publication filters initialized as hide but still show at start
• sort button of publucation?
• a fold navbar e.g. (member => prof, RA, PHD...)
• fill term of use and privacy policy at footer This and This
• optimize the load speed (https://pagespeed.web.dev/ or use the Edge insight)
• share the footer and the header