Depts

Now up on the site.

More layout and separation-of-concerns work.

Popup images are now working, and I fixed a bunch of minor CSS issues; I've also done a bunch of text tidy-up and linked a few of the poems to make sure all that is working.

Got the popup poem links working, using pure CSS, including a bit of animation bling. Then retrieved an OTA TEI file containing the complete poems and wrote a conversion to turn it into HTML; cleaned up the results to some degree (some manual editing will probably be needed too). This should enable linking to any poem we like, in any context.

I've migrated all the menu show/hide and the name highlighting to use the "hidden checkbox" trick, so it's all now pure CSS. However, losing the state of the name highlighting between pages is annoying and counter-intuitive, so I've set up a tiny JS lib that uses local storage to save and reload it; seems to be working nicely. Also fixed a bunch of typos and some bad tagging, and added a couple of Schematron rules to help with editing.

Column numbers moved to the right place in AB_SK documents with identity transform, and rendering of page and column numbers improved.

Converted all the 1820 content; write to KB to request that no more editing be done on the old material; fixed up the basic mobile menu (submenus still have to be handled); and added one of the gratuitous animations done with JS in the old site. Still using no JS (except one little inline thing for the name highlighting, which I can probably get rid of).

This information contained in a readme file on the site.

The site at hcmc.uvic.ca/media is intended for the use of hiring committees to play back audio or video files of candidate interviews and presentations.

Each competition has its own folder, so that you can configure the .htaccess file to restrict access to only the netlinks of the hiring committee. There is a CompetitionTemplate folder which you can copy and rename for the competition.

========================================
Set up a competition
========================================

1 Prepare Audio Files
2 Prepare Video Files
3 Create Competition Folder on server
4 Restrict Access to competition folder
5 Edit index.html file for this competition
6 Edit index.html file at root of site

====================
1 Create Competition Folder on server
====================

Log in to hcmc account on nfs and go to www/media folder.
Make a copy of CompetitionTemplate folder and rename it (likely to department four-letter code, or something more specific if department is holding more than one competition simultaneously).

====================
2 Restrict Access to [competition] folder
====================

Get netlinks of people on competition committee from whoever is running the competition.
Download and open the .htaccess file in a text editor.
On the line "Require user gregster mholmes sarneil pszpak " add each netlink separated by a space.
Upload modified .htaccess file into [competition] folder.
Browse to https://hcmc.uvic.ca/media/competition to ensure htaccess restriction is working.

====================
3 Prepare Audio Files
====================

You need to generate an mp3 file and ideally an ogg file. I use Audacity.
Optional: use effects to improve sound quality
- Noise Reduction effect to get rid of background hum
- Normalize effect to normalize wave
- Amplify effect to maximize signal (I don't allow clipping)
- Could reduce sampling to 22k and mono if decreasing file size is important.
File/Export mp3
- mp3
- quality 5
- filename is FirstnameLastname.mp3
File/Export Ogg
- ogg vorbis file
- quality 5
- filename FirstnameLastname.ogg
Upload audio files to audios folder in [competition] folder

Create image to go with audio player
- download and open images/AudioImageTemplate.jpg in graphics editor
- replace "Dr. 96-point-Arial centered" with "Dr. Firstname Lastname" 96-point arial centered
- replace "dd mm yyyy 48-point-arial centered" with date (date format not important) 48-point arial centered
- I put a 48 point blank line between the two lines of text
- save file as FirstnameLastname.jpg
Upload image file to images folder in [competition] folder

====================
4 Prepare Video Files
====================

You need to generate an mp4 file using 264 codec. All browsers should support that. I use handbrake.
Open source video file in Handbrake.
Configure output:
- destination file : FirstnameLastname.mp4 (rename source file so it doesn't conflict if needbe)
- format mp4 file
- web optimized
- encoder H.264
- I took default settings for everything else, though if decreasing filesize is important, you could reduce the picture height and width
Click start button to process file.
Upload video file to videos folder in [competition] folder

====================
5 Edit index.html file for your competition
====================

Download the index.html file from the [competition] folder and open it in an html editor.
Edit the text inside the h1 tag.
Use the provided examples of audio and video blocks to create what you need based on material provided by sponsor of competition.
Obviously the filenames for the images, audios and videos have to match your actual filenames.
Upload modified index.html file into [competition] folder.
Browse to https://hcmc.uvic.ca/media/competition and test to ensure html appears correctly and media players work properly.

====================
6 Edit index.html file in home page for site
====================

Blair has asked for there to be a landing page in the site that anyone can get to, and from there click on link for a specific competition.
Download the index.html file from the media folder.
Make a copy of the commented out div.
Edit the value of href attribute to the name of the your competition folder and the text inside the anchor to describe the position being competed for.
Upload modified index.html file into media folder.
Browse to https://hcmc.uvic.ca/media/ to ensure html appears correctly and link works.

========================================
At end of competition
========================================
If you've used the department name for your competition folder, you can:
- delete media files from audios and videos folder
- delete image files for candidates from images folder
- edit .htaccess file in competition folder so that only sarneil mholmes gregster and pszpak have access
- edit index.html file in competition folder so that it contains placeholder values for candidate names and file names
- edit index.html file in media folder to remove entry for this competition
Or you can:
- delete competition folder
- edit index.html file in media folder to remove entry for this competition

Due to some odd interaction between the flexbox display of the map + postalcode form when it was embedded in the home page, there was a substantial pixel offset between a click event on the map and the pixel location that was reported by the event, making it hard to select a feature. I tracked it down to some CSS in the html.css file, and simply deleting it solved the problem. I also worked on the display of the map-only page, and reconfigured that so that the map takes up the bulk of the viewport and no space is wasted.

Determined to manage a toggling mobile menu using pure CSS, I've got half-way there; there's some useful learning to be done here, with flexbox and other things. I think the best approach is the hidden-checkbox-visible-label approach, but I haven't implemented it yet.