How to structure a large website as I convert it to Xara?

Hi

I have run an extensive website over the last 15 years or more called 'Songs of the Inland Waterways' which has the lyrics of approximately 300 songs related to the UK canal system. It contains hundreds of audio files and increasingly videos (some are just YouTube links but others are contained within the site so that I have a copy should they 'disappear').

Pages were created when the need arose using Dreamweaver 8 and basic HTML about which I know a bit but not too much.

So that I can achieve the desired page designs I've started re-doing pages using Xara Designer Pro X(v18). I've got a couple of pages done (the first two on the alphabetical A page) and have placed them in a sub-sub-folder of the main site /Xara/Songs_A/. This means my original HTML versions still exist in the main folder in case they have been linked to from elsewhere.

Eventually, here's the question : What would be the best way to structure the Xara subfolder? The options would seem to range from a Xara file containing every song (clearly unmanageable) to a separate Xara file for each separate song. At the moment I'm thinking of putting about 10 songs maximum in each Xara file and using sub-folders such as Xara/Songs_B1-10/ or Xara/Songs_M11-20/

Does this seem like a good idea or is there a much better way? Though each song page on the site is similar they are by no means identical and I don't want to have to learn any new programming language or use a database. I want the flexibilty of being able to create the pages with XDPX and am just seeking the best way to store them.

Thanks for all the help I've had previously.

Regards,
Ian

can't help with your query, but nice site...

way back I remember Gary & Vera Aspey singing the [old] rosemary in a folk club the name of which i can't for the life of me remember, in sheffield; a song with a lovely lilting lapping dreamy tune - Peter Dodds is a bit more 'gritty' than they were, but it is lovely to hear it again, looked on the off chance, and there it was :)

This is ancient but it still works. http://archive.xaraxone.com/webxealo...kbook%201.html

Ian, you have hundreds of audio files so the first thing I would do is create a design file, change the index filename to songs and save it as a XAR file named songs.xar. It should be saved in a unique folder, let's call that Inland Waterways.
Next, adjacent to the XAR file, create another folder and call it songs_xar_files.
In this, create sub-folders, 0-9, A, B, ..., Z. You name the first page away from index to the same name as the design filename, so 0-9.xar will have a first page filename of 0-9 and it is publishes to a HTML file called 0-9.htm with a folder 0-9_htm_files. See Gary's diagram; the main difference i you will be publishing everything into the same root folder.
Collate all your audio MP3s in these sub-folders.

You only need to publish this once and all the songs will be available for linking to from separate pages across your design.

The sole purpose of doing it this way is you only publish the songs once. You can quickly FTP new songs without republishing the whole thing every time.
All the other web design pages (XAR files) are trivial in size so you are not weighed down by lengthy upload times.
These design pages are published into the same folder as the songs.xar is published to.
You could end up with a collection of htm files, 0-9, A, B, ... Z, songs and associated folders *_htm_files.
Everything that is added into songs_xar_files is copied into songs_htm_files on publishing.

You would never drop a song onto a design page.
You would enter a link of form song_htm_files/0-9/0 Intro.mp3.
Such a simple link would open and play the song in a separate browser tab but @Initiostar and I have already developed a simple player to get round this.

Acorn

Quote:

---

Originally Posted by gwpriester

This is ancient but it still works. http://archive.xaraxone.com/webxealo...kbook%201.html

---

Thanks Gary. That's very useful and suggests I was on the right track. The significant difference between my site and the example site may be that one folder 'Songs' would be disproportionately large and would need many sub-folders. That was my plan. I wasn't planning on having an index.html page in each sub-folder and was going to link directly via the internal website folder structure. Is there any need to (or advantage in) having an index.html file in each sub-folder and linking via web addresses?

IanB

I think I cross posted with you Acorn as I replied to Gary.

Thanks for taking the time to provide such a detailed plan. I have read it twice and will, I think, now try to set up a test site which will help me understand it better.

IanB

Quote:

---

Originally Posted by IanB

I think I cross posted with you Acorn as I replied to Gary.
Thanks for taking the time to provide such a detailed plan. I have read it twice and will, I think, now try to set up a test site which will help me understand it better.
IanB

---

Ian, do note the MP3s will play in a separate Tab as i have not advised how to invoke a Player on the page.

Acorn

Quote:

---

Originally Posted by Acorn

Ian, do note the MP3s will play in a separate Tab as i have not advised how to invoke a Player on the page.

Acorn

---

I thought the Island Waterways website would be good test for extending Audio Plugin v3 to accommodate auto-display of information directly related to the songwriter, such as the words, chords, references and any related videos.

I've combined the ideas from the Audio Player with some of the ideas from the Video Player. The key task is to ensure that one has an effective toggle between audio and video and that one does not play over the other.

All the audio and video content is stored on a secure server, only the links are in the Xara design file. The supporting material for each song has a Class Name and each class has its own layer in the design file. There would be just 27 pages to cover all the songs structured in alphabetic groups, each letter with its own page plus a page for 0-9.

It has ultimate flexibility; the links can be a list as in the example, album covers or anything of the designer's choice : Audio Visual Plugin v1

Still very much Work-in-Progress; the code needs some rework, but it seems to work well. It's not an off-the-shelf plugin by any means, but the designer has a library of prebuilt audio and video functions, such as start (load), play and pause for audio and video.

Attachment 129511

Gary

BTW the latest video plugins:

Between you and Acorn you're doing great stuff Gary!

Hi

The following was written before I was aware of Initiostar's contribution above which I will no doubt be very interesting, helpful, challenging but informative. I'll be reading it carefully in a moment but in the meantime I thought I'd post what I'd already written.

Just thought I'd let you know how I've progressed with this and see if anyone can spot any glaring errors in my method.

I have to admit that I was straining to understand some parts of the Audio Player thread (and on-line description of the audio command) and at some point I copied and pasted from a posted Xara file on that thread and with slight changes to size and autoplay seem to have got a working audio. An example of the code is shown:


<audio id="sotiw" src="http://www.waterwaysongs.info/sounds/alice_white.mp3" controls controlsList="nodownload" style="width: 320px;" ></audio>

I'm not sure what the controlsList command does or if it is necessary? I'm also wondering if I should be aware of any code needed elsewhere that I may have introduced unknowingly with the Xara copy-and-paste I mentioned.

Rather than put all the audio files in a new file as was suggested, I've kept them in the 'sounds' folder in the root directory of this website and linked directly to them. This means they still remain available to the old Dreamweaver produced pages which also live in the root directory and avoided duplication.

The new Xara produced pages will live in a sub-directory Songs which will be further subdivided into directories, A,B,C etc. So far only the songs beginning with A have been re-done.

I'm hoping that I can keep the large video files out of the pages and just link to them in a similar way to the audio files.

The new Xara pages (songs beginning with A) can be linked to from :

http://www.waterwaysongs.info/songmenu.htm

This solution is based on the help given by Gary, Initiostar and Acorn so I thank them all - but I worry I'm missing something. Any comments?

IanB

Quote:

---

Originally Posted by Initiostar

I thought the Island Waterways website would be good test for extending Audio Plugin v3 to accommodate auto-display of information directly related to the songwriter, such as the words, chords, references and any related videos.

I've combined the ideas from the Audio Player with some of the ideas from the Video Player. The key task is to ensure that one has an effective toggle between audio and video and that one does not play over the other.

All the audio and video content is stored on a secure server, only the links are in the Xara design file. The supporting material for each song has a Class Name and each class has its own layer in the design file. There would be just 27 pages to cover all the songs structured in alphabetic groups, each letter with its own page plus a page for 0-9.

It has ultimate flexibility; the links can be a list as in the example, album covers or anything of the designer's choice : Audio Visual Plugin v1

Still very much Work-in-Progress; the code needs some rework, but it seems to work well. It's not an off-the-shelf plugin by any means, but the designer has a library of prebuilt audio and video functions, such as start (load), play and pause for audio and video.

Attachment 129511

Gary

BTW the latest video plugins:

---

Wow! This is certainly an impressive and user-friendly way of accessing the type of information I have on my site. It's a much more modern approach to that which exists now - but which was first devised 15 or more years ago when my understanding of HTML was limited (much like it is now). I look forward to seeing it develop and seeing if I can update my site more than I originally planned.

IanB

Ian,

Quote:

---

<audio id="sotiw" src="http://www.waterwaysongs.info/sounds/alice_white.mp3" controls controlsList="nodownload" style="width: 320px;" ></audio>

I'm not sure what the controlsList command does or if it is necessary?

---

The [ controlsList="nodownload" ] prevents the visitor downloading the song from a Chrome browser (the vertical 3 dots on the right of the player). Where songwriters are happy for their material to be downloaded, you can omit this command.

You are accessing the songs from your hosted 'sounds' directory - this is exactly what we did for the audio player demo to avoid loading any content into the design file. The audio id becomes relevant where you want multiple songs to use the SAME placeholder (as in the demo).

The same principles apply to videos. Create a directory (e.g. 'videos' ) same directory level as 'sounds' and FTP them all into this directory.

Where you want to access a video, create a placeholder proportionally sized to the (h) and (w) of the video. In most cases the start point for HD format is 1920px(w) x 1080px(h), therefore 960px(w) x 540px(h) is a convenient placeholder size to start. You can proportionately resize it thereafter.

You can now use a video tag - something like this:

<video id="vidplayer" width="100%" height="100%" playsinline controls autoplay disablepictureinpicture controlsList="nodownload"; >
<source src="https://domain-name/videos/filename.mp4" type="video/mp4"
</video>

As with the Audio tag, the Video id becomes relevant where you want multiple videos to be loaded into the SAME placeholder. 'autoplay' is optional and in your setup, I'd probably leave it out. 'disablepictureinpicture' prevents the video being displayed in the bottom right of the browser window (which unless you've factored the idea into your design is best disabled). As with the audio tag, 'controlsList="nodownload" prevents the video being downloaded - not required if your songwriters are OK with their material being downloaded.

'playsinline' is required for iOS devices where 'autoplay' is in use for touch-based devices (iPhone iPad). I include it all the time.

Personally, if you have access to the original videos this is the way to go. Where you need to access YouTube etc. they provide the code to embed in a placeholder. You still need to modify the code to add "playsinline" eg https://initiostar.co.uk/demo/Video/utube.htm.

Gary

Hi Gary

Thanks for taking the time to give your comprehensive explanation which has explained things thoroughly and has been very helpful. I will be making use of this info definitely.

Linking to YouTube videos has the advantage of ease of linking but gives those pesky suggestions at the end and, of course, someone might decide to remove their video. I'll probably link taking note of your demo but may download copies (for private use) as well so they are not lost to posterity - I'm aware of YouTube copyright restrictions and don't want to be taken to court for breaking them. Those videos which are not from YouTube and are already on the web-server will be linked following your suggestions.

Changing the whole website will take some time but, thanks to help from this forum, I feel I am at least heading in the right direction.

IanB

Quote:

---

Originally Posted by IanB

Hi Gary
Thanks for taking the time to give your comprehensive explanation which has explained things thoroughly and has been very helpful. I will be making use of this info definitely.
Linking to YouTube videos has the advantage of ease of linking but gives those pesky suggestions at the end and, of course, someone might decide to remove their video. I'll probably link taking note of your demo but may download copies (for private use) as well so they are not lost to posterity - I'm aware of YouTube copyright restrictions and don't want to be taken to court for breaking them. Those videos which are not from YouTube and are already on the web-server will be linked following your suggestions.
Changing the whole website will take some time but, thanks to help from this forum, I feel I am at least heading in the right direction.
IanB

---

A few years back including ?rel=0 or &rel=0 stopped these. Now the same only shows videos from the same YouTube Channel. This might be enough for you.

There is a shedload of code to block related videos but I am sure there are better approaches.
The heavy code approach is https://www.maxlaumeister.com/articles/hide-related-videos-in-youtube-embeds/.

Whatever you do not not drop the video onto your design as you end up with massive uploads.
Store as you are doing for the audios.

Acorn