603a734862321da4d9bde067c47a4a13175acc02 mspeir Thu Jul 23 09:24:22 2026 -0700 Changes to slide decks based on CR; Adding reveal.js to source tree, rather than using CDN, refs #37874 #37904 diff --git docs/slideDecks/tutorial5-teaching/presentation/index.html docs/slideDecks/tutorial5-teaching/presentation/index.html index e2aa16ded49..7369a86f0ef 100644 --- docs/slideDecks/tutorial5-teaching/presentation/index.html +++ docs/slideDecks/tutorial5-teaching/presentation/index.html @@ -1,346 +1,346 @@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UCSC Genome Browser · Tutorial 5: Teaching with the Browser</title> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css" id="theme"> +<link rel="stylesheet" href="../../reveal.js/dist/reveal.css"> +<link rel="stylesheet" href="../../reveal.js/dist/theme/white.css" id="theme"> <style> :root{ --ucsc-blue:#1f3a5f; --ucsc-accent:#0b5394; --ucsc-gold:#e6a817; } .reveal { font-size: 32px; } .reveal h1,.reveal h2,.reveal h3 { color: var(--ucsc-blue); text-transform:none; letter-spacing:normal; } .reveal h1 { font-size: 1.9em; } .reveal h2 { font-size: 1.32em; } .reveal section img { border:none; box-shadow:none; } .reveal a { color: var(--ucsc-accent); } .reveal ul { width: 100%; box-sizing: border-box; } .reveal li { margin: 0.16em 0; } .divider { background: var(--ucsc-blue); } .divider h1,.divider h2,.divider p { color:#fff !important; } .divider .kicker { color: var(--ucsc-gold) !important; letter-spacing:2px; font-size:0.55em; text-transform:uppercase;} .divider .timing { color:#cdd9e8 !important; font-size:0.62em; margin-top:0.6em; } .callout { border-radius:10px; padding:0.55em 0.9em; margin:0.35em 0; font-size:0.8em; text-align:left; } .exercise { background:#eaf6ec; border-left:6px solid #2e8b57; } .demo { background:#e9f1fb; border-left:6px solid var(--ucsc-accent); } .caution { background:#fdf3e3; border-left:6px solid var(--ucsc-gold); } .callout .lbl { font-weight:700; display:block; margin-bottom:0.12em; } .exercise .lbl{ color:#2e8b57; } .demo .lbl { color:var(--ucsc-accent); } .caution .lbl { color:#b8860b; } /* standalone callouts (direct children of a slide) shouldn't span the full width; keep them aligned with the centered content above them */ .reveal section > .callout { display:block; box-sizing:border-box; max-width:92%; margin-left:auto; margin-right:auto; } .chip { display:inline-block; background:#f0f2f5; border:1px solid #d0d7de; border-radius:6px; padding:0.05em 0.45em; font-family:monospace; font-size:0.78em; color:#24292f; white-space:nowrap; } .grp { display:inline-block; background:var(--ucsc-blue); color:#fff; border-radius:6px; padding:0.05em 0.45em; font-size:0.72em; } .small { font-size:0.8em; color:#555; } .reveal .footer { position:fixed; bottom:8px; left:14px; font-size:13px; color:#9aa4b1; z-index:30; } .twocol { display:flex; gap:1.2em; } .twocol > div { flex:1; min-width:0; overflow-wrap:anywhere; } .tag { font-size:0.6em; background:var(--ucsc-gold); color:#3a2c00; border-radius:5px; padding:0.05em 0.4em; vertical-align:middle;} /* screenshot layouts */ .split { display:flex; gap:1.1em; align-items:center; } .split > .txt { flex:1 1 44%; min-width:0; text-align:left; } .split > .figwrap { flex:1 1 56%; min-width:0; } .split img.shot { max-width:100%; height:auto; } /* reveal makes lists inline-block (sizes to content), force block so they wrap to the column */ .reveal .split .txt ul, .reveal .split .txt ol, .reveal .twocol ul, .reveal .twocol ol { display:block !important; width:auto !important; box-sizing:border-box; text-align:left; margin:0 0 0.3em 0; padding-left:1.1em; } .reveal .split .txt li, .reveal .twocol li { overflow-wrap:anywhere; } .split .txt p { text-align:left; } /* stacked mini-examples (e.g. display modes) */ .stack figure.fig { margin:0 0 0.45em 0; } .stack .modelabel { display:inline-block; background:var(--ucsc-blue); color:#fff; font-size:0.6em; border-radius:5px; padding:0.04em 0.45em; margin-bottom:0.15em; } figure.fig { margin:0; } img.shot { width:100%; border:1px solid #c9d1d9; border-radius:8px; box-shadow:0 5px 16px rgba(0,0,0,.18); display:block; } figure.fig figcaption { font-size:0.56em; color:#5b6673; margin-top:0.3em; text-align:left; line-height:1.3; } .shotbig { display:block; margin:0.15em auto 0; max-width:84%; max-height:60vh; border:1px solid #c9d1d9; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.2); } figcaption.capbig { font-size:0.58em; color:#5b6673; margin-top:0.35em; text-align:center; } /* annotated control-bar (Navigation & viewing controls) */ .navctrls { margin:1.3em 0 0.6em; } .navstrip { position:relative; margin:1.4em auto; max-width:96%; } .navstrip img.shot { width:100%; } .navbadge { position:absolute; bottom:100%; margin-bottom:3px; transform:translateX(-50%); width:1.35em; height:1.35em; line-height:1.3em; text-align:center; box-sizing:border-box; background:var(--ucsc-gold); color:#3a2c00; border:2px solid #fff; border-radius:50%; font-size:0.62em; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.4); } .navkey { font-size:0.64em; text-align:left; gap:1.6em; } .navkey p { margin:0.22em 0; } .navkey .keybadge { display:inline-block; width:1.5em; height:1.5em; line-height:1.5em; text-align:center; background:var(--ucsc-blue); color:#fff; border-radius:50%; font-weight:700; margin-right:0.35em; } </style> </head> <body> <div class="reveal"> <div class="footer">UCSC Genome Browser · Tutorial 5: Teaching with the Browser</div> <div class="slides"> <section class="divider" data-background-color="#1f3a5f"> <p class="kicker">UCSC Genome Browser · Tutorial 5</p> <h1>Teaching with the Browser</h1> <h2 style="color:#fff;font-weight:400;">Ready-made, interactive modules for the classroom</h2> <p class="timing">~20 free modules on the Education portal · genome.ucsc.edu</p> </section> <section> <h2>The Education portal</h2> <div class="split"> <div class="txt"> <ul class="small"> <li><a href="https://genome.ucsc.edu/training/education/">genome.ucsc.edu/training/education</a>: ~20 interactive modules + videos.</li> <li>Self-contained, undergraduate-level, each built on clickable Browser sessions.</li> - <li>Topics: codons & reading frames, the <strong>Variants curriculum</strong>, splicing, CpG/methylation, CRISPR, Huntington’s, lactase, FOXP2…</li> + <li>Topics: codons & reading frames, variant effects, splicing, CpG/methylation, CRISPR, Huntington’s disease, lactase, FOXP2…</li> </ul> <p class="small">Can be used as part of a lecture or assignments.</p> </div> <div class="figwrap"><figure class="fig"><img class="shot" src="/images/slideDecks/tutorial5-teaching/education.png" alt="UCSC education portal"> <figcaption>“Educating with the Genome Browser”: a free library of classroom-ready modules and tutorial videos.</figcaption></figure></div> </div> <aside class="notes"> Open the portal and scroll the list so they see the breadth. Each module is classroom-ready: built around clickable sessions, no install for students. Many here teach undergrad genetics/cancer: these are free, vetted teaching assets. </aside> </section> <section class="divider" data-background-color="#0b5394"> <h1>Reading the gene</h1> <p class="timing">the central dogma, made visible</p> </section> <section> <h2>Reading the gene, base by base</h2> <ul class="small" style="max-width:92%;margin:0 auto;"> - <li><strong>5′ → 3′ direction</strong> — which way a gene is transcribed <a href="https://genome.ucsc.edu/training/education/fivePrime.html">open</a></li> - <li><strong>Start & stop codons</strong> — the signals that begin and end translation <a href="https://genome.ucsc.edu/training/education/startStop.html">open</a></li> - <li><strong>Three reading frames</strong> — how one sequence can be read three ways <a href="https://genome.ucsc.edu/training/education/threeFrames.html">open</a></li> + <li><strong>5′ → 3′ direction</strong>: which way a gene is transcribed <a href="https://genome.ucsc.edu/training/education/fivePrime.html">open</a></li> + <li><strong>Start & stop codons</strong>: the signals that begin and end translation <a href="https://genome.ucsc.edu/training/education/startStop.html">open</a></li> + <li><strong>Three reading frames</strong>: how one sequence can be read three ways <a href="https://genome.ucsc.edu/training/education/threeFrames.html">open</a></li> </ul> - <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is a <strong>clickable session + a short page</strong>, ready to drop into a lecture or assignment.</div> + <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is really just a <strong>saved session</strong> you can reuse, ready to drop into a lecture or assignment.</div> </section> <section> <h2>Another module: the “Wobble Base” module</h2> <div class="split"> <div class="txt"> <ul class="small"> <li>Teaches <strong>codon degeneracy</strong>: the <strong>3rd base</strong> of a codon can change without changing the amino acid (“wobble”).</li> <li>Example: the <strong>GRK4</strong> kinase domain (hg19), codons & amino acids drawn over the sequence.</li> <li>Read it down the <strong>100-vertebrate alignment</strong>: the amino acid (V, K, A…) is identical across species even where the wobble base differs, and <strong>PhyloP</strong> shows those residues are conserved.</li> </ul> <div class="callout exercise"><span class="lbl">Try it, <a href="https://genome.ucsc.edu/s/education/hg19_wobble2">▶ open s/education/hg19_wobble2</a></span> Find a column where a base varies between species but the amino acid stays the same.</div> <div class="callout demo"><span class="lbl">Same recipe</span> - Another <strong>session + a page</strong>: the portal has ~20 like this.</div> + Another saved session; the portal has ~20 like this.</div> </div> <div class="figwrap"><figure class="fig"><img class="shot" src="/images/slideDecks/tutorial5-teaching/wobble.png" alt="Wobble-base module session at GRK4"> <figcaption>The <em>GRK4</em> kinase domain (hg19): codons + amino acids, PhyloP conservation, and a 100-vertebrate alignment, the protein is conserved while the wobble (3rd) base varies.</figcaption></figure></div> </div> <aside class="notes"> A second education-portal module, paired with the missense one. It makes the synonymous / silent-mutation point concrete: open the GRK4 kinase-domain session, read the amino-acid row, then scan down the Multiz 100-vertebrate alignment, the amino acid (e.g. valine, lysine, alanine) is the same across species even though the third codon base differs. PhyloP conservation (high = functionally critical) reinforces that these residues matter while the wobble position tolerates change. Reinforces codons/reading-frame and conservation from the basics. Source: genome.ucsc.edu/training/education/wobble.html. </aside> </section> <section class="divider" data-background-color="#0b5394"> <h1>Variants and their effects</h1> <p class="timing">what a change does to the protein</p> </section> <section> <h2>Variants and their effects</h2> <ul class="small" style="max-width:92%;margin:0 auto;"> - <li><strong>Synonymous</strong> — a base change that leaves the amino acid unchanged <a href="https://genome.ucsc.edu/training/education/variantSynon.html">open</a></li> - <li><strong>Nonsense</strong> — a change that creates a premature stop codon <a href="https://genome.ucsc.edu/training/education/variantNonsense.html">open</a></li> - <li><strong>Frameshift</strong> — an insertion or deletion that shifts the reading frame <a href="https://genome.ucsc.edu/training/education/variantFrameshift.html">open</a></li> + <li><strong>Synonymous</strong>: a base change that leaves the amino acid unchanged <a href="https://genome.ucsc.edu/training/education/variantSynon.html">open</a></li> + <li><strong>Nonsense</strong>: a change that creates a premature stop codon <a href="https://genome.ucsc.edu/training/education/variantNonsense.html">open</a></li> + <li><strong>Frameshift</strong>: an insertion or deletion that shifts the reading frame <a href="https://genome.ucsc.edu/training/education/variantFrameshift.html">open</a></li> </ul> - <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is a <strong>clickable session + a short page</strong>, ready to drop into a lecture or assignment.</div> + <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is really just a <strong>saved session</strong> you can reuse, ready to drop into a lecture or assignment.</div> </section> <section> <h2>Spotlight: the “Missense Variants” module</h2> <div class="split"> <div class="txt"> <ul class="small"> <li>The <a href="https://genome.ucsc.edu/training/education/variantMissense.html">Missense Variants module</a> teaches a missense variant on the cancer gene <strong>BRCA2</strong> (<span class="chip">rs135936718</span>, His→Gln).</li> - <li>Students click a <strong>shared link</strong>; dbSNP colours green = synonymous, red = missense.</li> + <li>Open the <strong>shared link</strong>; dbSNP colors green = synonymous, red = missense.</li> <li>A nice <strong>sum-up of the basics</strong>: it reuses the gene model, codons & amino acids, and clicking a variant.</li> </ul> <div class="callout exercise"><span class="lbl">Try it</span> Open <a href="https://genome.ucsc.edu/s/education/hg19_BRCA2missense">s/education/hg19_BRCA2missense</a>; find the red variant.</div> <div class="callout demo"><span class="lbl">The takeaway</span> - A module is just a <strong>saved view + a web page</strong>. You’ll learn to build your own in the <strong>Sessions</strong> section of Tutorial 1.</div> + A module is just a <strong>session</strong>. You’ll learn to build your own in the <strong>Sessions</strong> section of Tutorial 1.</div> </div> <div class="figwrap"><figure class="fig"><img class="shot" src="/images/slideDecks/tutorial5-teaching/missense.png" alt="Missense module session at BRCA2"> - <figcaption>The module’s session at <em>BRCA2</em>: codons & amino acids over the sequence, with dbSNP variants coloured <span style="color:#c00">red = missense</span> / <span style="color:#080">green = synonymous</span>.</figcaption></figure></div> + <figcaption>The module’s session at <em>BRCA2</em>: codons & amino acids over the sequence, with dbSNP variants colored <span style="color:#c00">red = missense</span> / <span style="color:#080">green = synonymous</span>.</figcaption></figure></div> </div> <aside class="notes"> - Walk the module live: open the BRCA2 missense session, point out the dbSNP colour key (green synonymous / red missense), the codon change His→Gln, and the ClinVar call. - Use this to wrap up the navigation/tracks basics; it reuses the gene model, codons and clicking-a-variant they just practised. Forward pointers (don't dwell): BRAF V600E, coming up in the oncology section, is itself a missense variant; and a module is just a session + a page, so they'll be able to author their own once you save a session in Tutorial 1. + Walk the module live: open the BRCA2 missense session, point out the dbSNP color key (green synonymous / red missense), the codon change His→Gln, and the ClinVar call. + Use this to wrap up the navigation/tracks basics; it reuses the gene model, codons and clicking-a-variant they just practised. Forward pointers (don't dwell): BRAF V600E, coming up in the oncology section, is itself a missense variant; and a module is really just a saved session, so they'll be able to author their own once you save a session in Tutorial 1. </aside> </section> <section class="divider" data-background-color="#0b5394"> <h1>Splicing & isoforms</h1> <p class="timing">one gene, many mRNAs</p> </section> <section> <h2>Bonus module: the “Splicing” module <span class="tag">if time</span></h2> <div class="split"> <div class="txt"> <ul class="small"> <li>The <a href="https://genome.ucsc.edu/training/education/splicing.html">Splicing module</a> teaches <strong>alternative splicing</strong>: different exon combinations make distinct mRNA isoforms.</li> <li>Example: <strong>FGFR2</strong> (hg19), with exons included or skipped across its GENCODE isoforms.</li> <li>The <strong>Spliced ESTs</strong> (expressed sequence tags) and <strong>alternative splicing</strong> tracks show which exons each transcript version includes or skips.</li> </ul> <div class="callout exercise"><span class="lbl">Try it, <a href="https://genome.ucsc.edu/s/education/fgfr2_highlights">▶ open the FGFR2 session</a></span> Compare isoforms across the two highlighted exons.</div> <div class="callout demo"><span class="lbl">Same recipe</span> - Another session + a page, one of ~20 ready-made modules.</div> + Another saved session, one of ~20 ready-made modules.</div> </div> <div class="figwrap"><figure class="fig"><img class="shot" src="/images/slideDecks/tutorial5-teaching/splicing.png" alt="FGFR2 alternative splicing (hg19)"> <figcaption><em>FGFR2</em> (hg19): GENCODE isoforms include or skip the highlighted exons, the essence of alternative splicing.</figcaption></figure></div> </div> <aside class="notes"> Optional third education module on alternative splicing (FGFR2, hg19). Cover it only if running ahead; otherwise skip. Open s/education/fgfr2_highlights: the two highlighted exons are alternatively included or skipped across FGFR2's GENCODE isoforms, and the Spliced ESTs / SIB alt-splicing tracks show real transcripts with different exon combinations. Ties back to the gene-model and exon/intron basics. Source: genome.ucsc.edu/training/education/splicing.html. </aside> </section> <section> <h2>Isoforms and tissues</h2> <ul class="small" style="max-width:92%;margin:0 auto;"> - <li><strong>Isoforms across tissues</strong> — tissue-dependent alternative splicing <a href="https://genome.ucsc.edu/training/education/isoforms.html">open</a></li> - <li><strong>Tissue-specific expression</strong> — where a gene is switched on (the PLP gene) <a href="https://genome.ucsc.edu/training/education/plp.html">open</a></li> + <li><strong>Isoforms across tissues</strong>: tissue-dependent alternative splicing <a href="https://genome.ucsc.edu/training/education/isoforms.html">open</a></li> + <li><strong>Tissue-specific expression</strong>: where a gene is switched on (the PLP gene) <a href="https://genome.ucsc.edu/training/education/plp.html">open</a></li> </ul> - <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is a <strong>clickable session + a short page</strong>, ready to drop into a lecture or assignment.</div> + <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is really just a <strong>saved session</strong> you can reuse, ready to drop into a lecture or assignment.</div> </section> <section> <h2>Spotlight: tissue-specific expression</h2> <div class="split"> <div class="txt"> <ul class="small"> - <li>The <strong>GTEx</strong> track shows how strongly a gene is expressed across <strong>54 human tissues</strong> — one coloured bar per tissue.</li> + <li>The <strong>GTEx</strong> track shows how strongly a gene is expressed across <strong>54 human tissues</strong>: one colored bar per tissue.</li> <li>Example: <strong>PLP1</strong>, a myelin gene, is switched on almost only in the <strong>brain</strong> (the tall yellow bars).</li> <li>A quick, visual way to ask <strong>“where is this gene active?”</strong></li> </ul> <div class="callout exercise"><span class="lbl">Try it, <a href="https://genome.ucsc.edu/cgi-bin/hgTracks?db=hg38&position=PLP1&gtexGene=pack">▶ open PLP1 with GTEx</a></span> Read which tissues light up for this gene.</div> <div class="callout demo"><span class="lbl">Same recipe</span> - Another session + a page, one of ~20 ready-made modules.</div> + Another saved session, one of ~20 ready-made modules.</div> </div> <div class="figwrap"><figure class="fig"><img class="shot" src="/images/slideDecks/tutorial5-teaching/gtex_tissue.png" alt="GTEx tissue-expression barchart for PLP1"> <figcaption><em>PLP1</em> GTEx expression: each bar is a tissue; the tall yellow bars are brain, where this myelin gene is active.</figcaption></figure></div> </div> <aside class="notes"> - A tissue-expression spotlight to pair with the isoforms menu. Open PLP1 with the GTEx track: the colour-coded bars show expression per tissue, and PLP1 (a myelin protein) lights up almost only in brain. Makes "tissue-specific expression" concrete and visual. Same module recipe as the others: a saved view plus a short page. + A tissue-expression spotlight to pair with the isoforms menu. Open PLP1 with the GTEx track: the color-coded bars show expression per tissue, and PLP1 (a myelin protein) lights up almost only in brain. Makes "tissue-specific expression" concrete and visual. Same module recipe as the others: a saved session. </aside> </section> <section class="divider" data-background-color="#0b5394"> <h1>Regulation & epigenetics</h1> <p class="timing">beyond the coding sequence</p> </section> <section> <h2>Regulation & epigenetics</h2> <ul class="small" style="max-width:92%;margin:0 auto;"> - <li><strong>CpG islands & methylation</strong> — DNA methylation and epigenetic regulation <a href="https://genome.ucsc.edu/training/education/methylation.html">open</a></li> - <li><strong>CRISPR</strong> — gene editing, explored in the Browser <a href="https://genome.ucsc.edu/training/education/crispr.html">open</a></li> + <li><strong>CpG islands & methylation</strong>: DNA methylation and epigenetic regulation <a href="https://genome.ucsc.edu/training/education/methylation.html">open</a></li> + <li><strong>CRISPR</strong>: gene editing, explored in the Browser <a href="https://genome.ucsc.edu/training/education/crispr.html">open</a></li> </ul> - <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is a <strong>clickable session + a short page</strong>, ready to drop into a lecture or assignment.</div> + <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is really just a <strong>saved session</strong> you can reuse, ready to drop into a lecture or assignment.</div> </section> <section class="divider" data-background-color="#0b5394"> <h1>Disease & evolution case studies</h1> <p class="timing">genetics with a story</p> </section> <section> <h2>Case studies: disease</h2> <ul class="small" style="max-width:92%;margin:0 auto;"> - <li><strong>Huntington’s & CAG repeats</strong> — a trinucleotide-repeat expansion in HTT <a href="https://genome.ucsc.edu/training/education/cag.html">open</a></li> - <li><strong>Lactase persistence (LCT)</strong> — the genetics of digesting milk <a href="https://genome.ucsc.edu/training/education/lactase.html">open</a></li> - <li><strong>Alcohol intolerance</strong> — variation in alcohol metabolism in East Asians <a href="https://genome.ucsc.edu/training/education/ethanol.html">open</a></li> + <li><strong>Huntington’s & CAG repeats</strong>: a trinucleotide-repeat expansion in HTT <a href="https://genome.ucsc.edu/training/education/cag.html">open</a></li> + <li><strong>Lactase persistence (LCT)</strong>: the genetics of digesting milk <a href="https://genome.ucsc.edu/training/education/lactase.html">open</a></li> + <li><strong>Alcohol intolerance</strong>: variation in alcohol metabolism in East Asians <a href="https://genome.ucsc.edu/training/education/ethanol.html">open</a></li> </ul> - <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is a <strong>clickable session + a short page</strong>, ready to drop into a lecture or assignment.</div> + <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is really just a <strong>saved session</strong> you can reuse, ready to drop into a lecture or assignment.</div> </section> <section> <h2>Case studies: evolution</h2> <ul class="small" style="max-width:92%;margin:0 auto;"> - <li><strong>FOXP2 & the evolution of speech</strong> — comparing a speech gene across species <a href="https://genome.ucsc.edu/training/education/speech.html">open</a></li> - <li><strong>Why apes have no tails</strong> — an evolutionary loss, seen in the genome <a href="https://genome.ucsc.edu/training/education/apes.html">open</a></li> - <li><strong>Ebola & Marburg conservation</strong> — conserved regions of viral genomes <a href="https://genome.ucsc.edu/training/education/ebola.html">open</a></li> + <li><strong>FOXP2 & the evolution of speech</strong>: comparing a speech gene across species <a href="https://genome.ucsc.edu/training/education/speech.html">open</a></li> + <li><strong>Why apes have no tails</strong>: an evolutionary loss, seen in the genome <a href="https://genome.ucsc.edu/training/education/apes.html">open</a></li> + <li><strong>Ebola & Marburg conservation</strong>: conserved regions of viral genomes <a href="https://genome.ucsc.edu/training/education/ebola.html">open</a></li> </ul> - <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is a <strong>clickable session + a short page</strong>, ready to drop into a lecture or assignment.</div> + <div class="callout demo" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Same recipe</span> Each module is really just a <strong>saved session</strong> you can reuse, ready to drop into a lecture or assignment.</div> </section> <section> <h2>Spotlight: why apes have no tails</h2> <div class="split"> <div class="txt"> <ul class="small"> <li>An <strong>Alu insertion</strong> (a “jumping-gene” element) landed inside the tail-development gene <strong>TBXT</strong> in the common ancestor of apes.</li> - <li>It makes an <strong>exon get skipped</strong>, altering the protein — linked to the loss of the tail.</li> + <li>It makes an <strong>exon get skipped</strong>, altering the protein, and this is linked to the loss of the tail.</li> <li>The <strong>RepeatMasker</strong> track marks the Alu (highlighted); the GENCODE isoforms show the affected exon.</li> </ul> <div class="callout exercise"><span class="lbl">Try it, <a href="https://genome.ucsc.edu/s/education/hg19_TBXTalus">▶ open s/education/hg19_TBXTalus</a></span> Find the highlighted Alu element inside the <strong>TBXT</strong> gene.</div> <div class="callout demo"><span class="lbl">Same recipe</span> - Another session + a page, one of ~20 ready-made modules.</div> + Another saved session, one of ~20 ready-made modules.</div> </div> <div class="figwrap"><figure class="fig"><img class="shot" src="/images/slideDecks/tutorial5-teaching/tbxt_apes.png" alt="TBXT gene with a highlighted Alu element (hg19)"> - <figcaption><em>TBXT</em> (hg19): the highlighted <strong>Alu</strong> element (a RepeatMasker SINE) sits inside the gene — tied to tail loss in apes.</figcaption></figure></div> + <figcaption><em>TBXT</em> (hg19): the highlighted <strong>Alu</strong> element (a RepeatMasker SINE) sits inside the gene, tied to tail loss in apes.</figcaption></figure></div> </div> <aside class="notes"> An evolution spotlight to pair with the case-studies menu. Based on the 2021 finding that an AluY insertion in TBXT causes exon skipping and is associated with tail loss in apes/humans. Open the session: the highlight marks the Alu (RepeatMasker SINE) within TBXT, and the GENCODE isoforms show the exon it affects. Ties conservation, repeats and gene models together. </aside> </section> <section> <h2>Bringing it into the classroom</h2> <ul class="small"> <li>Around <strong>20 self-contained modules</strong>, each built on a clickable Browser session.</li> <li>They span the <strong>central dogma</strong> (reading frames, codons, splicing), <strong>variant effects</strong>, and real <strong>disease & evolution</strong> case studies.</li> - <li>Use them as lecture demos or student assignments — no install required.</li> + <li>Use them as lecture demos or student assignments, with no install required.</li> <li>Build your own the same way: save a <strong>session</strong> (see Tutorial 1) and wrap it in a page.</li> </ul> <div class="callout exercise" style="max-width:92%;margin:0.4em auto 0;"><span class="lbl">Try it</span> Browse the full library at <a href="https://genome.ucsc.edu/training/education/">genome.ucsc.edu/training/education</a>.</div> </section> <section class="divider" data-background-color="#1f3a5f"> <h1 style="color:#fff;margin-bottom:0.12em;">Thank you!</h1> <p style="color:#fff;font-size:0.72em;margin:0.05em 0;">Questions? · genome@soe.ucsc.edu</p> <p style="color:#cdd9e8;font-size:0.55em;margin:0.05em 0 0.45em;">UCSC Genome Browser · genome.ucsc.edu</p> <figure class="fig" style="margin:0 auto;"><img src="/images/slideDecks/tutorial5-teaching/gb_team.jpg" alt="UCSC Genome Browser team" style="max-height:360px;width:auto;border-radius:8px;"></figure> </section> </div> </div> -<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script> -<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script> +<script src="../../reveal.js/dist/reveal.js"></script> +<script src="../../reveal.js/plugin/notes/notes.js"></script> <script> Reveal.initialize({ hash: true, slideNumber: 'c/t', transition: 'fade', width: 1280, height: 800, margin: 0.06, plugins: [ RevealNotes ] }); </script> </body> </html>