Giter Site home page Giter Site logo

jadebarclay / digitaltools Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 6.9 MB

'Digital tools for research life' 2022 workshop materials

Home Page: https://jadebarclay.github.io/digitaltools/

License: MIT License

HTML 85.47% SCSS 13.63% JavaScript 0.89%
workshop digital-skills research-toolbox workshop-materials workshop-website

digitaltools's Introduction

{% capture aboutworkshop %}

Digital tools for research life

This is the tutorial template for the workshop. The workshop site is here: https://jadebarclay.github.io/digitaltools/

Once you have completed this workshop you should be able to:

  • Use built-in accessibility, research, and qualtiy-of-life tools
  • Access open source, free, university provided and paid tools
  • Improve efficiency with literature, data, writing, outreach, and collaboration
  • Identify stuck spots and blind spots to tune up your workflows

Audience

This workshop is aimed at researchers and grad students in medicine and health.

Prerequisites

To successfully coplete this workshop you will need:

Assumed knowledge

It is assumed that you have the following level of understanding:

  • Ability to install software on your own device (but we can work around that)
  • Foundational data terminology such as tabular data, binary data, csv, tables, fields etc.

{% endcapture %}

{% include card.html header="About this workshop" text=aboutworkshop %}

About the Bootstrap Workshop Template

This template is derived from workshop-template-b by Evan Williamson. It is a Jekyll template for a simple workshop website, with a Bootstrap-based theme, designed for hosting on GitHub Pages.

Works best for about 5 pages of instructions, plus an index page, all written in Markdown. The navigation to the main pages is exposed at top and bottom of each page for easy stepping through the sections.

Please note: the template was updated in Nov 2021 to Bootstrap 5!

For a more minimal version, try the original workshop-template

Why?

Rather than making slides for a workshop, why not make a website? It's easier to write, access, share, and reuse. GitHub and GitHub Pages makes this pretty easy.

It is a better Open Educational Resource since anyone can make a copy and adapt!

How To Use Template

The workshop-template-b repository is a template project --> to get started quickly, make a copy and replace the demo with your own content and customizations. The demo site demonstrates the output on GitHub Pages. The content pages serve as documentation and examples to copy from.

Overview:

  1. Click the green "Use this template" button on the Library Workshop Template to make your own new copy of the code (make sure you are logged into GitHub!).
  2. Work on the GitHub web interface or clone to your local machine to edit files (tip: click . on any GitHub repository to open the web editor).
  3. Edit the _config.yml with your info.
  4. Edit/add the content pages in Markdown (found in the "content" folder).
  5. Add any images to the "images" folder.
  6. Push to GitHub or commit on the web interface.
  7. In your repository's settings, activate GitHub Pages, using main branch.

Basic Configuration

Edit the "_config.yml" to get your workshop website set up with the basics such as title and author. Check comments (denoted by # in YAML) in the file for all the options!

Once you have edited the "_config.yml", you are ready to start editing your content pages. All your content is written in Markdown in the "content" folder.

Creating content pages

Content pages are written in markdown and can be enhanced using Liquid includes that are packaged with the template (see "_includes/" folder). Start by editing the examples or creating new files in the "content" folder.

At the top of each page is "YAML front matter" used to configure the page. Use these options:

  • nav: add the text you want to appear in the the header and footer navigation.
    • Alternatively, use nav: true to use the page's title value for the nav text.
    • Do not include nav if you do not want the page to appear in the nav elements.
    • All pages with a nav value will appear in the header and footer navigation, sorted by order of filenames. For simplicity use leading numbers in the lesson page filenames to create correct order.
  • title: value will appear as h1 at the top of the page.
  • topics: will appear as a small feature below the title (optional).
  • description: will appear as an indented text block below the title (optional). This gives you a chance to summarize the section contents.
  • youtubeid: will add an YouTube video embed (optional). Find the id in the YouTube link. For example, in https://youtu.be/moJgWrD6dwg or https://www.youtube.com/watch?v=moJgWrD6dwg the youtubeid is moJgWrD6dwg.
  • Alternatively, if you don't want title or other options to appear on the page, you can over ride the section layout by adding layout: default

Components Includes

workshop-template-b contains a series of Liquid "includes" to simplify adding basic Bootstrap 5 components to your Markdown content. The includes can be found in the "_includes" folder. Check the comments at the top of each include file for details about options and how to use them.

Figures / Images

  • put any images you want to use in the "images" folder, or use a full URL to external images.
  • in a markdown file where you want the image to appear, use the "figure.html" include on its own line, following the pattern: {% include figure.html img="my-cat.jpg" alt="cat" caption="My cat" width="50%" %}
  • figures will be centered, and can optionally be given a caption and percentage width.

Additional includes are available in the "_includes" folder, check the comments for how to use them.

Style customization [optional]

The file "assets/css/custom.scss" exposes variables that can customize the basic style of website:

  • $top-border adds a tiny splash of color on the header and footer borders. Try tweaking the color using an HTML # value.
  • $text-color sets the body text color
  • $link-color sets link color
  • $base-font-size sets the body text size
  • $container-max sets a maximum width for the text body--keeping it narrow can make it easier to read, but gives less screen space!

To use the Bootstrap defaults for any of these values, comment out the variable in "custom.scss", using // in front of the option's line (e.g. // $text-color: #111 !default; ).

To add your own custom CSS, use the file "_sass/_custom.scss". Any CSS/SASS you add to this file will override the template and Bootstrap classes.

Google Analytics [optional]

Griffith's Google id has already been added to "_config.yml" in google-analytics-id:

To use an alternative analytics, paste the code snippet provided by the platform into the file "_includes/template/analytics.html".

The analytics code will only be added when using "production" environment. This happens automatically on GitHub Pages. To build manually you need to add "JEKYLL_ENV", like: JEKYLL_ENV=production jekyll build.

Demos

My workshop sites using an minimal version of this template (no bootstrap):

Repository does not include a Gemfile because it is a very simple project. Originally built using Ruby 2.5+ and Jekyll 3.7+; most recently used Ruby 3 and Jekyll 4.2.1. Designed for use with GitHub Pages automatic build versions.

digitaltools's People

Contributors

jadebarclay avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.