Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 22
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Lightbulb Leveraging the Conventional Website

    I can see the place for (A) Scrolling websites and for (B) Presentations.
    Where we have had no real debate is around the (C) Transitions website type.

    All three types roll up the pages into one HTML file.
    1. This makes the initial payload very large.
    2. You also lose control over achieving different Pasteboard backgrounds, without reverting to coding for them.
    3. The final killer for me is the crude Xara hash addition to the URL address (#xl_xr_page_<page-filename>) so that every page appears to be just index.htm(l).

    I can live with A3 & B3 but the other combinations have no real excuse.

    I am proposing an alternative for C1 by using a (D) Conventional website instead.
    My argument is that with good design and modest bandwidth speeds, there should be little difference in presentation for a D-site to a C-site.
    I could further argue that D1 << C1 as the download of images on other pages is deferred until that page is required.
    ASIDE: I will include the following code, without explanation just yet, that appears counter-intuitive as it fetches and preloads all the images of a D-site into cache in one go:
    <script>
    //Page code (head) ==>

    async function main() {
    xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
    afile = await fetch(xrfls);
    asite = await afile.text();
    images = asite.split('\r\n').filter(x => x.search(/\.jpg|\.png|\.webp/) > 0 );
    }
    main();
    function preloadImages(array) {
    if (!preloadImages.list) {
    preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
    var img = new Image();
    img.onload = function() {
    var index = list.indexOf(this);
    if (index !== -1) {
    // remove image from the array once it's loaded
    // for memory consumption reasons
    list.splice(index, 1);
    }
    }
    list.push(img);
    img.src = array[i];
    }
    }
    </script>

    <script>
    //Page code (head) ==>
    preloadImages(images);
    </script>

    It is fun running this in the browser dev tools > Application > Frames > Images and watch them all appear.

    As a first step, I will only be describing how a page access in the D-site can have a Transition Effect.
    Here is an example D-site of two pages: The Ultimate Conventional Website - Step 1.xar.


    • Check the simple CSS code in the Website Code (head) - all it does is when a page of the D-site is loaded an Transition is applied to the HTML body Tag.
    • On the second page, I have overridden this with a Page code (head) of similar CSS.
    • You can experiment with different effects for the entire D-site or specific pages.
    • To see what happens, Preview the D-site and click the Navigation Arrows.

    This is the very first Step and all it does is run an Effect on page load or paging in. Later, I will call this style pagein.

    As I am using Xara's predefined Effects, these require the jQuery Library and another JavaScript file to be loaded; you achieve this by simply having one shape somewhere on your site Sticky.
    I made the Navigation Arrows Sticky but you could Stick a Transparent shape if you wanted.

    A C-site has more than a pagein effect but we have already achieved an improvement for D1, D2 & D3.
    We need a page-out effect, which can be very messy with a D-site but I have a simpler workaround.
    The next Steps will involve asynchronous fetches, a page-out Effect mechanism and other triggering features that a C-site offers.

    Acorn
    Last edited by Acorn; 18 November 2021 at 06:11 PM.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Info Re: Leveraging the Conventional Website

    DESIGN CONSIDERATIONS

    A D-site (Conventional website) does not have a single HTML page (usually index.htm(l)).
    Rather each XDA design page is published to s separate HTML file based on the Page > Filename.

    Fortunately, Xara add a link to a file list that holds the filename and relative paths to the website assets.
    This HTML in the <head> detail looks like: <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
    This can be parsed with a line of JavaScript: document.querySelectorAll('[name*="XAR Files"]')[0].content;, returning "index_htm_files/xr_files.txt" to a variable.

    A bit more squirrely code:
    <script>
    async function main() {
    xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
    afile = await fetch(xrfls);
    asite = await afile.text();
    pages = asite.split('\r\n').filter(x => x.search(/\.htm/) > 0 );
    }
    main();
    </script>
    returns an array called pages, with contents like ['index.htm', 'index-a.htm', 'index-b.htm', 'index-c.htm', 'index-d.htm', 'index-e.htm'] (or *.html, if so created)
    These are the sequential filenames of the D-site.
    Knowing what page you are on allows you to work out the next or previous, remembering to join the ends in a ring.

    To get the page you are on requires a line of code: let page = location.href.split('/').pop();. This returns the filename of the current address, such as "index-d.htm".
    You use pages.indexOf(page) to return the index number of the array entry that is a match. Here index-d.htm is index 4 as JavaScript counts from zero.
    The next index would be 5 and the previous one is 3. (There is no 6, you return a 0; there is no -1 you return a 5).
    A simple pages[5] or pages[3] returns the page filenames you would jump to.

    The main() function is asynchronous and runs independent of the normal page load.
    Typically, the page load is quicker than a file fetch so you need to delay the later coding from firing up too soon.

    All in all about 15 lines of code just to do the same and <Next page> and <Previous page>; Xara hard-codes the links at compile time.
    Instead of intercepting these links, I decided to work around them so I could insert additional code to facilitate pagein and pageout Effects.

    This Step was about fetching pages asynchronously so you can navigate through a D-site.
    The next Post will implement more Linking and how a pageout Effect is achieved.

    Acorn
    Last edited by Acorn; 18 November 2021 at 06:12 PM.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Lightbulb Re: Leveraging the Conventional Website

    Here is the result of the changes suggested above: The Ultimate Conventional Website - Steps 2&3.xar.

    Improvements to Step 1:
    • CSS Effects moved to design page Placeholders.
    • CSS now applies to pagein and pageout ClassNames - the body CSS has been removed.
    • Website HTML Code (head) collects the current page and creates an array of all website pages.
    • Website HTML Code (body) JavaScript ensures the pagein effect fires up on page load.
    • Website HTML Code (body) JavaScript adds a simple function jump() that addresses the more difficult pageout effect.
      • There is a subtle difference between a jump button and Xara's Link to approach - the jump always goes to the Page Number; Xara goes to the Page Filename.


    You can now readily design and control the presentation in and out of any webpage of a Conventional website (D-site).

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Info Re: Leveraging the Conventional Website

    The final Step that allows the emulation of a C-site with a D-site is to allow for the Arrow Keys to trigger a page change.

    This is a fairly simple approach added to the <script> in Website HTML Code (body):

    document.body.setAttribute('onkeydown', 'paging(event)');
    function paging(event) {
    i = pages.indexOf(page), a = pages.length;
    var kd = event.key;
    if (kd.search('Arrow') >= 0) {
    switch(kd) {
    case 'ArrowLeft': jump((i + a - 1)%a + 1); break;
    case 'ArrowRight': jump((i + 1)%a + 1); break;
    case 'ArrowUp': if(window.scrollY === 0) jump((i + a - 1)%a + 1); break;
    default:
    }
    }
    }

    It should not be used if you have an <input> field (Search or <form>) as well.
    Code for covering this is possible but it is not a standard Xara requirement so I have omitted it for clarity.

    Also Xara does not detect ArrowDown for the case when the bottom of the page has been reached.
    This could be added to achieve a Scrolling website effect to emulate an A-site.

    The Ultimate Conventional Website - Step 4.xar

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Default Re: Leveraging the Conventional Website

    I have included an ArrowDown trigger.
    It was easiest using jQuery, which we have already loaded, so the final code for Arrow triggering is now:

    $(window).scroll(function() {
    bottom = false;
    if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
    bottom = true;
    }
    });


    document.body.setAttribute('onkeydown', 'paging(event)');
    function paging(event) {
    i = pages.indexOf(page), a = pages.length;
    var kd = event.key;
    if (kd.search('Arrow') >= 0) {
    switch(kd) {
    case 'ArrowLeft': jump((i + a - 1)%a + 1); break;
    case 'ArrowRight': jump((i + 1)%a + 1); break;
    case 'ArrowUp': if(window.pageYOffset === 0) jump((i + a - 1)%a + 1); break;
    case 'ArrowDown': if (bottom) jump((i + 1)%a + 1); break;
    default:
    }
    }
    }

    PageUp and PageDown do not force a page jump and the Down Arrow only does so when the page just reaches the bottom (I have set a slight offset of 10px but you can change this to any value). If put to zero then when there is no vertical scrollbar, ArrowDown does nothing; 10 seems a happy compromise.

    To achieve something nearing an A-site, I might use pageFadeI/pageFadeO with a 2s delivery. For a bit more drama - pageCubeHFI/pageCubeHFO.

    Do have a play with The Ultimate Conventional Website - Step 5.xar.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Lightbulb Re: Leveraging the Conventional Website

    Wrapping up Time
    You can effectively transform a Conventional website (D-site) into a Transitions website (C-site), taking control of:

    1. The payload.
    2. Different page Pasteboard backgrounds, without reverting to coding for them.
    3. Retention of a normal URL page address.

    This can be achieved with relatively little additions to the D-site design:

    1. CSS for the Effects
    2. JavaScript to discover the website details.
    3. JavaScript/jQuery to do the calculations.
    4. Page changes to apply the Effects.

    ONE
    Xara already uses animate.css for its Effects.
    We can call these directly by using the 'page' @keyframe names in the Stylesheets ani.css.
    I have listed these in the attached design file under pagein & pageout.
    There is nothing to stop you developing your own styles: short and subtle is best.
    I have provided off-page Text Areas for the CSS Placeholders; there should be one of each pagein & pageout on each design page.
    These can be kept in the Page > HTML code (head) instead.
    If you just want the same pagein & pageout through then put both in the Website > HTML Code (head).
    Xara has used jQuery to invoke the pagein & pageout Effects so I have ensured jQuery is loaded by making a shape on each design page Sticky. Most sites have a sticky NavBar so use that.

    TWO
    I run a script from the Website HTML Code (head) to discover all the D-site page filenames.
    Code:
    <script>
    async function main() {
      page = location.href.split('/').pop();
      xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
      afile = await fetch(xrfls);
      asite = await afile.text();
      pages = asite.split('\r\n').filter(x => x.search(/\.htm/) > 0 );
      i = pages.indexOf(page);
      a = pages.length;
      next = (i + 1)%a;
      prev = (i + a - 1)%a;
    }
    main();
    </script>
    A second collection of jQuery and JavaScript functions is loaded later by the Website > HTML Code (body). These functions:

    • Make the pagein Effect fire on page load.
    • Make the pageout effect fire on page unload.
    • Determine what to do on page control with the Arrow Keys.

    Code:
    <script>
    var effect = document.body.classList;
    effect.add('pagein');
    setTimeout(function(){ effect.remove('pagein'); }, 800);
    
    function jump(ndx) {
      effect.add('pageout');
      setTimeout(function(){ location.href = pages[ndx]; }, 640);
    }
    
    $(window).scroll(function() {
      bottom = false;
      if($(window).scrollTop() + $(window).height() > $(document).height() - 10) bottom = true;
    });
    
    document.body.setAttribute('onkeydown', 'paging(event)');
    function paging(event) {
      var kd = event.key;
      if (kd.search('Arrow') >= 0) {
        switch(kd) {
          case 'ArrowLeft': jump(prev); break;
          case 'ArrowRight': jump(next); break;
          case 'ArrowUp': if(window.pageYOffset === 0) jump(prev); break;
          case 'ArrowDown': if (bottom) jump(next); break;
          default:
        }
      }
    }
    </script>
    FOUR
    The last part is around page Links:
    • Link to: <Next page> becomes javascript: jump(next);
    • Link to: <Previous page> becomes javascript: jump(prev);
    • Link to: <page filename> becomes javascript: jump(pages.indexOf('<page filename>.htm'));


    DESIGN FILE
    The design file has a number of working examples: The Ultimate Conventional Website - Step 6.xar
    The code has been tidied up since the start of the Thread, through which I hope you have been able to follow the Steps of this journey.

    The rationale for this alternative approach is I see appalling overuse of Supersites and Variants combined where I feel there is an arrogance in forcing a large download (especially on metered mobile and slow connections) that do a disservice to the high quality designs that are delivered by us through our XDAs.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,891

    Default Re: Leveraging the Conventional Website

    Woooo.... slow down Acorn. I'm having a great deal of a problem following you here but I know it will be worthwhile to persist. I've d/l'ed each file and whilst I can't say I have any understanding of the code I see that it works bt unfortunately the large number of different transitions confuses the effect.

    I could see this effect being used in a calendar for example with a page flip transition on all the pages being the same.

    I'll try and find some time to experiment with this.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Info Re: Leveraging the Conventional Website

    Egg, thank you for taking the time.

    Yes, the various Effects are overkill. The point was to show how simple it would be to change a page effect, not destroy a viewer's eyeballs.
    A designer would know what will work for a given client.

    I have found that with a simple rotate, the nasty page jump, when Scale to fit width (STFW) is trying to fit to the screen, disappears.
    Again, a designer will adjust the Easing and Timing, both which are limited in Xara's presentation.
    I did include an 800ms limiter for the pagein effect. Setting the Timing in the CSS Placeholder above this just means the page is still fully presented within a sane time.

    We now have a framework where you can pare back and configure to your need.
    For instance, remove the Arrow Keys and the Body code becomes:
    Code:
    <script>
    var effect = document.body.classList;
    effect.add('pagein');
    setTimeout(function(){ effect.remove('pagein'); }, 800);
    
    function jump(ndx) {
      effect.add('pageout');
      setTimeout(function(){ location.href = pages[ndx]; }, 640);
    }
    </script>
    Leaving you to build the page triggers with only buttons or links (javascript: jump(...);).

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  9. #9
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,276

    Default Re: Leveraging the Conventional Website

    Well, I've made a real mess of this one. I can't get the page links to work correctly unless it's a simple 'Next' 'Previous'.

    Link to live site and a stripped down .xar project file at the bottom of the post.

    First problem: the javascript: jump(1); (2) etc. was always a page out on preview after the first jump.

    Second problem: once live, the pages returned a '404 Undefined'. Typing the name of the page in manually (.../tracks.htm) displays the page. Going back to index seems to list everything on the site in the address bar.

    Link to site >>> index (auzlink.net.au) <<<

    Stripped down project file >>> Luke Acorn Stripped.xar <<<

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,325

    Info Re: Leveraging the Conventional Website

    Quote Originally Posted by Chris M View Post
    Well, I've made a real mess of this one. I can't get the page links to work correctly unless it's a simple 'Next' 'Previous'.
    Link to live site and a stripped down .xar project file at the bottom of the post.
    First problem: the javascript: jump(1); (2) etc. was always a page out on preview after the first jump.
    Second problem: once live, the pages returned a '404 Undefined'. Typing the name of the page in manually (.../tracks.htm) displays the page. Going back to index seems to list everything on the site in the address bar.
    Link to site >>> index (auzlink.net.au) <<<
    Stripped down project file >>> Luke Acorn Stripped.xar <<<
    Chris, looking at the live site, you threw in a Variant so all the pages in the array are duplicated.
    You could try pages = [...new Set(pages)]; to remove duplicates.

    A thing I did not check for was your presentation of the xr_files.txt contents uses just \n and not \r\n as the line separator.
    The change for this last one would be simple: pages = asite.replaceAll('\r', '').split('\n').filter(x => x.search(/\.htm/) > 0 );, this should handle Unix and Windows servers as well as local rendering.

    Thank you for checking and advising.

    Acorn


    Code change for main():

    Code:
    <script>async function main() {
      page = location.href.split('/').pop();
      xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
      afile = await fetch(xrfls);
      asite = await afile.text();
      pages = asite.replaceAll('\r', '').split('\n').filter(x => x.search(/\.htm/) > 0 );
      pages = [...new Set(pages)];
      i = pages.indexOf(page);
      a = pages.length;
      next = (i + 1)%a;
      prev = (i + a - 1)%a;
    }
    main();
    </script>
    Last edited by Acorn; 21 November 2021 at 04:10 PM. Reason: Corrected JS typo
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •