Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-33431

Resources/Drop Box: WebDAV Instructions verbose and difficult to edit - integrate into Sakai Help docs

    XMLWordPrintable

    Details

    • Test Plan:
      Hide

      Please add a Test Plan here.

      Show
      Please add a Test Plan here.

      Description

      At the request of an instructor at UVA, UVA's local WebDAV (Transfer Files) instructions in Resources and Drop Box were simplified to better describe what WebDAV connections are used for and include just the WebDAV URL and links to different operating systems (with a captioned image shown for each operating system).  The linked images point to documents in UVA's instance of ScreenSteps Help.

      Per discussion in Sakai docs meeting, I am suggesting that the Sakai community adopt a similar approach (include the instructions as Help docs and links to these on the Resources/Drop Box pages).  The HTML code snippets below are used in UVA's instance (image below Snippets A and B indicates where they go on the page - Code Snippet C is the static page content file that is loaded below these). Images used in the page are attached to this jira:

      Code Snippet A:

      <h3>Transfer Multiple Files using WebDAV</h3><p>
              WebDAV 
              creates a window from your computer into your Sakai site's <em>Resources</em> or <em>Drop Box</em> tool. With a WebDAV connection, you can easily:
              <ul>
                <li>Download multiple files and folders to your computer from a Sakai site's <em>Resources</em> or <em>Drop Box</em>,</li>
                <li>Upload multiple files and folders to your <em>Resources</em> or <em>Drop Box</em> folder,</li>
                <li>Upload  files that are bigger than <strong>250 MB</strong> to your Sakai site.</li>
              </ul></p>
              <p><strong>Note:</strong> A  WebDAV connection must be set up separately to each site's <em>Resources</em> and <em>Drop Box</em> tool, on each computer you are using.  </p>
      

       
      Code Snippet B: 

        <h4>Set up your WebDAV connection</h4>
              <ol>
                <li> Select the WebDAV URL below and copy it to your clipboard:<br />
                  [site WebDAV URL Javascript stuff here]<br />
                </li>
                <li>Select your computer operating system below to go to the instructions to set up a WebDAV connection to this site's tool.</li>
              </ol>

      Code Snippet C:

      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>WebDAV Instructions</title>
      <link href="/library/skin/tool_base.css" type="text/css" rel="stylesheet" media="all" />
      <link href="/library/skin/morpheus-default/tool.css" type="text/css" rel="stylesheet" media="all" />
      <style>
      
      body {
        width: 80%;
        margin: 30px auto;
        font-family: sans-serif;
      }
      
      h3 {
        text-align: center;
        font-size: 1.65em;
        margin: 0 0 30px;
      }
      
      div {
        display: flex;
        flex-wrap: wrap;
      }
      
      a {
        display: inline-block;
        margin-bottom: 8px;
        width: calc(50% - 4px);
        margin-right: 8px;
        text-decoration: none;
        color: black;
      }
      
      a:nth-of-type(2n) {
        margin-right: 0;
      }
      
      @media screen and (min-width: 50em) {
        a {
          width: calc(25% - 6px);
        }
        
        a:nth-of-type(2n) {
          margin-right: 8px;
        }
        
        a:nth-of-type(4n) {
          margin-right: 0;
        }
      }
      
      figure {
        margin: 0;
        overflow: hidden;
        text-align: center;
      }
      
      figcaption {
        margin-top: 15px;
        text-align: center;
        font-size:1.2em;
        font-weight:bold;
      }
      
      img {
        border: none;
        max-width: 100px;
        height: auto;
        display: inline-block;
        background: none;
      }
      
      .p a {
        display: inline;
        font-size: 13px;
        margin: 0;
        text-decoration: underline;
      }
      
      .p {
        text-align: center;
        font-size: 13px;
        padding-top: 100px;
      }
      
      </style>
      </head>
      
      <body>
      
      <div>
        <a href="https://uvacollab.screenstepslive.com/s/7291/m/52584/l/611578-how-do-i-set-up-webdav-for-windows-10-or-8" target="_blank">
          <figure>
            <img src="OSlogos/windows10logo.png" alt="Windows 10" />
            <figcaption>
              Windows 10 or 8
            </figcaption>
          </figure>
        </a>
        <a href="https://uvacollab.screenstepslive.com/s/7291/m/52584/l/611607-how-do-i-set-up-webdav-for-windows-7" target="_blank">
          <figure>
            <img src="OSlogos/windows7logo.png" alt="Windows 7" />
            <figcaption>
              Windows 7
            </figcaption>
          </figure>
        </a>
        <a href="https://uvacollab.screenstepslive.com/s/7291/m/52584/l/611760-how-do-i-set-up-webdav-for-mac-os-10-8-and-up" target="_blank">
          <figure>
            <img src="OSlogos/applelogo.png" alt="Mac OS" />
            <figcaption>
              Mac OS 10.8 and up
            </figcaption>
          </figure>
        </a>
        <a href="https://uvacollab.screenstepslive.com/s/7291/m/52584/l/611778-how-do-i-set-up-webdav-for-cyberduck-on-mac-or-windows" target="_blank">
          <figure>
            <img src="OSlogos/cyberducklogo.png" alt="Cyberduck">
            <figcaption>
              Cyberduck for Windows or Mac
            </figcaption>
          </figure>
        </a>
      </div>
      
      
      </body>
      </html>

        Gliffy Diagrams

          Zeplin

            Attachments

            1. windows7logo.png
              windows7logo.png
              128 kB
            2. windows10logo.png
              windows10logo.png
              74 kB
            3. WebDAVinstructions-old.png
              WebDAVinstructions-old.png
              47 kB
            4. cyberducklogo.png
              cyberducklogo.png
              124 kB
            5. applelogo.png
              applelogo.png
              109 kB

              Issue Links

                Activity

                  People

                  Assignee:
                  maintenanceteam Core Team
                  Reporter:
                  rainribbon Tiffany Stull
                  Votes:
                  1 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                    Dates

                    Created:
                    Updated:

                      Git Integration