diff options
Diffstat (limited to 'tutorials/www')
| -rw-r--r-- | tutorials/www/how-to-use-the-internet.html | 155 | ||||
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 88 |
2 files changed, 199 insertions, 44 deletions
diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html new file mode 100644 index 0000000..daabfe7 --- /dev/null +++ b/tutorials/www/how-to-use-the-internet.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> +<head> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-use-the-internet</title> +<style> + code{white-space: pre-wrap;} + span.smallcaps{font-variant: small-caps;} + div.columns{display: flex; gap: min(4vw, 1.5em);} + div.column{flex: auto; overflow-x: auto;} + div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} + /* The extra [class] is a hack that increases specificity enough to + override a similar rule in reveal.js */ + ul.task-list[class]{list-style: none;} + ul.task-list li input[type="checkbox"] { + font-size: inherit; + width: 0.8em; + margin: 0 0.8em 0.2em -1.6em; + vertical-align: middle; + } + .display.math{display: block; text-align: center; margin: 0.5rem auto;} + </style> +<link href="../../static/main.css" rel="stylesheet"/> +</head> +<body> +<nav id="TOC" role="doc-toc"> +<h2 id="toc-title">Contents</h2> +<ul> +<li><a href="#why" id="toc-why" target="_self">Why?</a></li> +<li><a href="#how-to-use-a-web-browser" id="toc-how-to-use-a-web-browser" target="_self">How to use a web browser</a></li> +<li><a href="#how-to-use-a-search-engine" id="toc-how-to-use-a-search-engine" target="_self">How to use a search engine</a> +<ul> +<li><a href="#basic-search-syntax" id="toc-basic-search-syntax" target="_self">Basic +search syntax</a></li> +</ul></li> +<li><a href="#how-to-read-and-find-scholarly-articles" id="toc-how-to-read-and-find-scholarly-articles" target="_self">How to read and find +scholarly articles</a> +<ul> +<li><a href="#how-to-use-wikipedia" id="toc-how-to-use-wikipedia" target="_self">How to +use Wikipedia</a></li> +<li><a href="#how-to-find-articles-with-google-scholar" id="toc-how-to-find-articles-with-google-scholar" target="_self">How to find articles +with Google Scholar</a></li> +</ul></li> +<li><a href="#advanced-topics" id="toc-advanced-topics" target="_self">Advanced +Topics</a> +<ul> +<li><a href="#how-to-use-tor-to-browse-anonymously" id="toc-how-to-use-tor-to-browse-anonymously" target="_self">How to use tor to browse +anonymously</a></li> +</ul></li> +</ul> +</nav> +<h2 id="why">Why?</h2> +<p>Why <em>would</em> anyone want to use the Internet, really?</p> +<p>There is actually purpose to connecting all the computers in the +world with near-instant speed beyond just streaming television, phishing +scams, pornography, punditry, and Fortnight competitions.</p> +<p>Unfortunately, almost none of us use the Internet for it's intended +purpose: finding infomation.</p> +<p>Writing an angry tweet to a celebrity or posting a picture of your +cat seems to be second nature for most people, but converting a picture +from a PDF or looking up a study (or even a word!) you saw in an article +is something else entirely.</p> +<p>While that's in part the fault of our laziness, it's equally the +fault of what the Internet has become.</p> +<p>For one: there's just so much more <em>stuff</em> now; it's hard to +know exactly where to start and who to trust. And so much of that stuff +is now <em>garbage</em>, either in the way it's presented, with +disruptive ads that don't close correctly, or in the way it's written: +vague, misleading, or straight incorrect.</p> +<p>For two: no one really teaches you how to use this thing do they? +There are no courses on "How to use a search engine" or "How to find +good posts on a forum," and definitely not on "How to <em>write</em> +good posts on a forum." But these are exactly the kinds of skills you +really need if you want to navigate the modern world without getting +constantly distracted, misled, or totally lost.</p> +<p>There are of course, countless guides on "netiquette" geared towards +every possible internet subculture you can find. While many of them have +influenced this document and give many helpful tips on writing good +informative posts, none of them really go over what I think is most +important: what to do with the information you're reading.</p> +<p>This will probably be an evolving document as new services and +websites become available (or go down), but much of this material in the +beginning should be pretty generally applicable no matter what services +are available.</p> +<h2 id="how-to-use-a-web-browser">How to use a web browser</h2> +<p>This is your main vehicle to the information super highway (remember +when they used to call it that?)</p> +<p>Almost everyone knows how to use a web browser to click links and get +to where they need to go, but use only a fraction of the software's +power. Web browsers at this point are as complicated as operating +systems. Aside from basic HTML and javascript rendering, most web +browsers are expected to provide:</p> +<ul> +<li>A PDF reader</li> +<li>An image display</li> +<li>A history database with tunable settings</li> +<li>Support for hundreds of languages and emojis</li> +<li>A password manager</li> +<li>A video and audio player</li> +<li>A scripting language for extending functionality</li> +</ul> +<p>And that's only what I can think of...</p> +<h2 id="how-to-use-a-search-engine">How to use a search engine</h2> +<p>As for which search engine to use: you should use all of them, until +you get the results you need.</p> +<p>In my experience, none of the major search engines are particularly +good and I get inconsistent searches on all of them depending on what +I'm searching. There is a lot of preaching these days about privacy +concerns, but I don't really believe any service is more "private" than +another. These are all privacy nightmares, arguably by design. Your best +bet is just to search often and as many platforms as you can.</p> +<h3 id="basic-search-syntax">Basic search syntax</h3> +<p>Searching for specific pieces of information is rather simple.</p> +<p>"Who is the prime minister of England?"</p> +<p>"When did World War 2 start?"</p> +<p>"How many roads must a man walk down?"</p> +<p>"Funky Kong talks you through your divorce"</p> +<p>All of these queries entered as is will get you the result you're +looking for. But how about something we can't boil down to a single +question? Like how to do calculus? Or how to learn Python?</p> +<p>You could try those phrases as a start. But you're not likely to get +a specific answer out of this.</p> +<p>...</p> +<p>What if we wanted to bring up a funny cat meme we saw on a forum +three weeks ago? Searching for "funny cat meme" is not going to get you +very far.</p> +<h2 id="how-to-read-and-find-scholarly-articles">How to read and find +scholarly articles</h2> +<h3 id="how-to-use-wikipedia">How to use Wikipedia</h3> +<p>A common complaint lodged at me whenever I recommend Wikipedia is +that it's not a source of truth since they found X mistake somewhere, or +made Y edit when they were a teenager that's still there. No one has +ever (or should ever) claim Wikipedia is a source of truth on it's own. +But you can use it to find more sources and maybe get a little +closer.</p> +<h3 id="how-to-find-articles-with-google-scholar">How to find articles +with Google Scholar</h3> +<h2 id="advanced-topics">Advanced Topics</h2> +<h3 id="how-to-use-tor-to-browse-anonymously">How to use tor to browse +anonymously</h3> +<p>Many in the advertising world will boast about using a VPN for +anonymity, or using a VPN in conjuction with Tor to "increase privacy." +This is simply a misunderstanding of terms. A VPN provides +<em>privacy</em> of the user's connection since it provides +encryption--only the VPN provider can "see" what is searched. The goal +of Tor is <em>anonymity</em> not privacy. Anonymity means "no one knows +who you are" not "no one knows what you're doing." Technically, traffic +is encrypted between nodes of the Tor service, so some level of privacy +is provided as well, but this is most effective when using hidden +services, not using Tor in general.</p> +</body> +</html> + diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 05302d8..1ea2fbf 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -465,18 +465,18 @@ using a CSS file.</p> <p>For any HTML tag, you can set an attribute that applies everytime it appears in an HTML document that links to the CSS file. A common formatting I use for paragraphs is:</p> -<pre class="htmlcss"><code>p { - margin-top: 1.5%; - margin-bottom: 1.5%; -}</code></pre> +<div class="sourceCode" id="cb12"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb12-1"><a aria-hidden="true" href="#cb12-1" tabindex="-1"></a>p {</span> +<span id="cb12-2"><a aria-hidden="true" href="#cb12-2" tabindex="-1"></a> <span class="kw">margin-top</span>: <span class="dv">1.5</span><span class="dt">%</span><span class="op">;</span></span> +<span id="cb12-3"><a aria-hidden="true" href="#cb12-3" tabindex="-1"></a> <span class="kw">margin-bottom</span>: <span class="dv">1.5</span><span class="dt">%</span><span class="op">;</span></span> +<span id="cb12-4"><a aria-hidden="true" href="#cb12-4" tabindex="-1"></a>}</span></code></pre></div> <p>And to highlight code, like you've been seeing, I use:</p> -<pre class="htmlcss"><code>code { - display: inline-block; - font-size: 125%; - background-color: #d8d8d8; - white-space: pre-wrap; - word-wrap: break-all; -}</code></pre> +<div class="sourceCode" id="cb13"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb13-1"><a aria-hidden="true" href="#cb13-1" tabindex="-1"></a>code {</span> +<span id="cb13-2"><a aria-hidden="true" href="#cb13-2" tabindex="-1"></a> <span class="kw">display</span>: <span class="dv">inline-block</span><span class="op">;</span></span> +<span id="cb13-3"><a aria-hidden="true" href="#cb13-3" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">125</span><span class="dt">%</span><span class="op">;</span></span> +<span id="cb13-4"><a aria-hidden="true" href="#cb13-4" tabindex="-1"></a> <span class="kw">background-color</span>: <span class="cn">#d8d8d8</span><span class="op">;</span></span> +<span id="cb13-5"><a aria-hidden="true" href="#cb13-5" tabindex="-1"></a> <span class="kw">white-space</span>: <span class="dv">pre-wrap</span><span class="op">;</span></span> +<span id="cb13-6"><a aria-hidden="true" href="#cb13-6" tabindex="-1"></a> <span class="kw">word-wrap</span>: break-all<span class="op">;</span></span> +<span id="cb13-7"><a aria-hidden="true" href="#cb13-7" tabindex="-1"></a>}</span></code></pre></div> <p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in order these lines:</p> <ul> @@ -492,11 +492,11 @@ picker</a></li> <p>Images get more styles in CSS than I can document in detail, but one important bit you'll want to probably add to all images is the following.</p> -<pre class="htmlcss"><code>img { - max-width: 100%; - height: auto; - width: auto; -}</code></pre> +<div class="sourceCode" id="cb14"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb14-1"><a aria-hidden="true" href="#cb14-1" tabindex="-1"></a>img {</span> +<span id="cb14-2"><a aria-hidden="true" href="#cb14-2" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">100</span><span class="dt">%</span><span class="op">;</span></span> +<span id="cb14-3"><a aria-hidden="true" href="#cb14-3" tabindex="-1"></a> <span class="kw">height</span>: <span class="bu">auto</span><span class="op">;</span></span> +<span id="cb14-4"><a aria-hidden="true" href="#cb14-4" tabindex="-1"></a> <span class="kw">width</span>: <span class="bu">auto</span><span class="op">;</span></span> +<span id="cb14-5"><a aria-hidden="true" href="#cb14-5" tabindex="-1"></a>}</span></code></pre></div> <p>This does the following:</p> <ul> <li>constrains the image so it doesn't stretch the page</li> @@ -508,9 +508,9 @@ view on mobile, the image scales to fit the screen; it never gets cutoff or distorted.</p> <p>In addition to this basic stuff, you can style your images heavily using the filter option like so:</p> -<pre class="htmlcss"><code>img.gray { - filter: grayscale(100%) -}</code></pre> +<div class="sourceCode" id="cb15"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb15-1"><a aria-hidden="true" href="#cb15-1" tabindex="-1"></a>img<span class="fu">.gray</span> {</span> +<span id="cb15-2"><a aria-hidden="true" href="#cb15-2" tabindex="-1"></a> <span class="kw">filter</span>: <span class="fu">grayscale(</span><span class="dv">100</span><span class="dt">%</span><span class="fu">)</span></span> +<span id="cb15-3"><a aria-hidden="true" href="#cb15-3" tabindex="-1"></a>}</span></code></pre></div> <p>Applied:</p> <p><img src="/static/media/jazzcat.jpg" style="filter:grayscale(100%)"/></p> <p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about @@ -520,19 +520,19 @@ the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp others. An example on this site, I dim the icons a bit so they can appear nice on dark theme browsers just as well. But I don't want to dim <em>all</em> images like in the following example:</p> -<pre class="htmlcss"><code>img { - filter: invert(50%); -}</code></pre> +<div class="sourceCode" id="cb16"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb16-1"><a aria-hidden="true" href="#cb16-1" tabindex="-1"></a>img {</span> +<span id="cb16-2"><a aria-hidden="true" href="#cb16-2" tabindex="-1"></a> <span class="kw">filter</span>: <span class="fu">invert(</span><span class="dv">50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span> +<span id="cb16-3"><a aria-hidden="true" href="#cb16-3" tabindex="-1"></a>}</span></code></pre></div> <p>For one, that will only dim black-and-white images; anything else will just turn to mush like this:</p> <p><img class="icon" src="/static/media/jazzcat.jpg"/></p> <p>Instead, I'd like it to just apply to select elements; I can do so by extending the tag with a class. On the CSS side:</p> -<pre class="htmlcss"><code>img.icon { - filter: invert(50%); -}</code></pre> +<div class="sourceCode" id="cb17"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb17-1"><a aria-hidden="true" href="#cb17-1" tabindex="-1"></a>img<span class="fu">.icon</span> {</span> +<span id="cb17-2"><a aria-hidden="true" href="#cb17-2" tabindex="-1"></a> <span class="kw">filter</span>: <span class="fu">invert(</span><span class="dv">50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span> +<span id="cb17-3"><a aria-hidden="true" href="#cb17-3" tabindex="-1"></a>}</span></code></pre></div> <p>And to implement it in HTML:</p> -<pre class="htmlcss"><code><img class="icon" src="/static/media/rss.svg" /></code></pre> +<div class="sourceCode" id="cb18"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb18-1"><a aria-hidden="true" href="#cb18-1" tabindex="-1"></a><img class="icon" src="/static/media/rss<span class="fu">.svg</span>" /<span class="op">></span></span></code></pre></div> <p><img class="icon" src="/static/media/rss.svg"/></p> <h4 id="use-the-div-tag-to-make-sections">Use the div tag to make sections</h4> @@ -542,19 +542,19 @@ Let's say you wanted to center a heading, a paragraph, and a picture, and constrain them to only part of the page, so that there's some margins on the left and right. We can put them all in one content section like this:</p> -<pre class="htmlcss"><code>.content { - text-align: center; - max-width: 85%; -}</code></pre> +<div class="sourceCode" id="cb19"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb19-1"><a aria-hidden="true" href="#cb19-1" tabindex="-1"></a><span class="fu">.content</span> {</span> +<span id="cb19-2"><a aria-hidden="true" href="#cb19-2" tabindex="-1"></a> <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span> +<span id="cb19-3"><a aria-hidden="true" href="#cb19-3" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">85</span><span class="dt">%</span><span class="op">;</span></span> +<span id="cb19-4"><a aria-hidden="true" href="#cb19-4" tabindex="-1"></a>}</span></code></pre></div> <p>Notice, no leading tag. This can be applied to <em>any</em> element, but usually we use a placeholder tag called "div." You can think of "div" like a divider for content of similar style. In the present example, we can use the class we made with a div tag:</p> -<pre class="htmlcss"><code><div class="content"> -<h1>My cat</h1> -<p>He's a cool cat</p> -<img src="/cat.jpg" /> -</div></code></pre> +<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="dt">></span></span> +<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My cat<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> +<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span><span class="dt">></span>He's a cool cat<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> +<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="dt">/></span></span> +<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="dt"></</span><span class="kw">div</span><span class="dt">></span></span></code></pre></div> <h3 id="mobile-optimization">Mobile Optimization</h3> <p>In early development, reading this site on my phone was a painful experience. Fortunately, in addition to some tricks above like the @@ -563,12 +563,12 @@ allow you to directly manipulate your website based on properties of the user's device or web browser.</p> <p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>, but for your basic smartphone, you can copy and paste this block:</p> -<pre class="htmlcss"><code>@media screen and (max-device-width: 480px) { - // override your tags here - body { - font-size: 125%; - } -}</code></pre> +<div class="sourceCode" id="cb21"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb21-1"><a aria-hidden="true" href="#cb21-1" tabindex="-1"></a><span class="im">@media</span> <span class="dv">screen</span> <span class="kw">and</span> (<span class="kw">max-device-width</span>: <span class="dv">480</span><span class="dt">px</span>) {</span> +<span id="cb21-2"><a aria-hidden="true" href="#cb21-2" tabindex="-1"></a> <span class="er">// override your tags here</span></span> +<span id="cb21-3"><a aria-hidden="true" href="#cb21-3" tabindex="-1"></a> body {</span> +<span id="cb21-4"><a aria-hidden="true" href="#cb21-4" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">125</span><span class="dt">%</span><span class="op">;</span></span> +<span id="cb21-5"><a aria-hidden="true" href="#cb21-5" tabindex="-1"></a> }</span> +<span id="cb21-6"><a aria-hidden="true" href="#cb21-6" tabindex="-1"></a>}</span></code></pre></div> <p>This basic example makes the text slightly bigger on smartphone screens, but you can change everything you need to. I typically find I need to adjust the padding or the margins since it seems mobile browsers @@ -577,9 +577,9 @@ add a little more style than a typical desktop web browser.</p> your CSS attributes, so that size is always defined relative to all the other elements. This makes functions like zoom work a lot better. You can for example put a pixel value like this:</p> -<pre class="htmlcss"><code>body { - font-size: 14px; -}</code></pre> +<div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a aria-hidden="true" href="#cb22-1" tabindex="-1"></a>body {</span> +<span id="cb22-2"><a aria-hidden="true" href="#cb22-2" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">14</span><span class="dt">px</span><span class="op">;</span></span> +<span id="cb22-3"><a aria-hidden="true" href="#cb22-3" tabindex="-1"></a>}</span></code></pre></div> <p>But this binds the size to 14 pixels which may look great on desktop, but small on a smart phone.</p> <h2 id="how-to-look-things-up">How to look things up</h2> |