30a93b60b63adec2bcc12b82694f9be164b87b03 mspeir Wed Nov 29 16:39:15 2023 -0800 adding new tutorial files, refs #30335 diff --git docs/gb101.html docs/gb101.html new file mode 100755 index 0000000..5496a4e --- /dev/null +++ docs/gb101.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> + +<!-- template.html: Example HTML for a Genome Browser static page --> + +<!-- Style recommendations +1. Capitalization: use only lowercase for HTML element names, attributes and values +2. Quotes: Use double quotes for attribute values +3. Whitespace: Use a new line for every block list or table element +4. Indentation: Indent every child element 2 spaces +5. Special characters: Don't use entity references (set editor to UTF-8), except < & +6. Limit lines to a maximum of 100 characters +NOTE: Be sure to make new pages executable +--> + +<!-- Page header --> +<!--#set var="TITLE" value="UCSC Genome Browser: Document Styles" --> +<!--#set var="ROOT" value="../.." --> + +<!-- Relative paths to support mirror sites with non-standard GB docs install --> +<!--#include virtual="$ROOT/inc/gbPageStart.html" --> + +<!-- Page content --> +<h1>UCSC Genome Browser 101</h1> +<p> +This page is intended to provide new users +</p> + +<h2>Sections</h2> +<!-- Sections --> +<!-- In this example, two of same size, so use 6 columns of 12 total in grid --> +<p> +Each panel is a section. Feel free to go through them in order or choose those most relevant to you + +<div class="row"> + <div class="col-md-4" style="padding-top: 15px"> + <div class="panel panel-default"> + <h3 class="panel-title" style="width: -webkit-fill-available;">Genome Browser Interface</h3> + <p> + Annotated screenshot of the Genome Browser interface. Explains what all the buttons do + </p> + + <p style="text-align: end"> + <a href="#annot-screenshot"><button>GO</button></a> + </p> + </div> + </div> + <div class="col-md-4" style="padding-top: 15px"> + <div class="panel panel-default"> + <h3 class="panel-title">Guided Workthrough</h3> + <p> + Explains the basis of using/navigating the Genome Browser interface. + Also explains a very basic Table Browser query and BLAT query. + </p> + + <p style="text-align: end"> + <a href="#guided-work"><button>GO</button></a> + </p> + </div> + </div> + <div class="col-md-4" style="padding-top: 15px"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h4 class="panel-title">Interactive Tutorial</h4> + </div> + <p> + Steps you through the basic functionality in the Genome Browser itself. + </p> + + <p style="text-align: end"> + <a href="/cgi-bin/hgTracks?#showTutorial"><button>GO</button></a> + </div> + </div> +</div> + +<h2>Templates</h2> +<h3 id="annot-screen">Annotated Screenshot</h3> +<div class="row"> + <div class="col-md-12"> + <div class="well"> + <p> + We'll put our annotated screenshot here, either in a well or panel + <p>(currently I'm a well) + </div> + </div> +</div> + +<h3 id="guided-work">Guided Workthorugh</h3> +<div class="row"> + <div class="col-md-12"> + <p> + Not sure what to put here just yet? + + <p>we can use different panel types to indicate things to the user: + + <div class="panel panel-success"> + <div class="panel-heading">Good things?</div> + <p> + A green panel to start off maybe? Introduce some high-level thing? + </div> + + <div class="panel panel-danger"> + <div class="panel-heading">Bad things!</div> + <p> + Or a red one to highlight something they shouldn't do something? + </div> + + <p> Well/image test + <p> + <img src="../../images/MultiRegionExonPadding.png"> + <div class="well"> + <p> + Explanatory text for the image here? Or should explanation be above the image? + </div> + </div> +</div> + +<!--#include virtual="$ROOT/inc/gbPageEnd.html" --> +