s23

lmccart · Mar 27, 2023 · a7e17f5 · a7e17f5
1 parent f8e3e67
commit a7e17f5
Show file tree

Hide file tree

Showing 69 changed files with 2,591 additions and 837 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,6 @@ _OLD/F16/docs/*
 _OLD/S17
 documentation/*
 docs/*
-_notes/*
+_notes/*
+*.mp4
+.vscode/*
diff --git a/README.md → _OLD/F19/README.md b/README.md → _OLD/F19/README.md
diff --git a/css/cargo.png → _OLD/F19/css/cargo.png b/css/cargo.png → _OLD/F19/css/cargo.png
diff --git a/css/normalize.min.css → _OLD/F19/css/normalize.min.css b/css/normalize.min.css → _OLD/F19/css/normalize.min.css
diff --git a/css/prism.css → _OLD/F19/css/prism.css b/css/prism.css → _OLD/F19/css/prism.css
diff --git a/css/style.css → _OLD/F19/css/style.css b/css/style.css → _OLD/F19/css/style.css
diff --git a/date.json → _OLD/F19/date.json b/date.json → _OLD/F19/date.json
diff --git a/discussions/lorde.pdf → _OLD/F19/discussions/lorde.pdf b/discussions/lorde.pdf → _OLD/F19/discussions/lorde.pdf
diff --git a/favicon.ico → _OLD/F19/favicon.ico b/favicon.ico → _OLD/F19/favicon.ico
diff --git a/gif.worker.js → _OLD/F19/gif.worker.js b/gif.worker.js → _OLD/F19/gif.worker.js
diff --git a/git-pull.php → _OLD/F19/git-pull.php b/git-pull.php → _OLD/F19/git-pull.php
diff --git a/_OLD/F19/index.html b/_OLD/F19/index.html
diff --git a/main.js → _OLD/F19/main.js b/main.js → _OLD/F19/main.js
diff --git a/_OLD/F19/notes/.gitkeep b/_OLD/F19/notes/.gitkeep
diff --git a/_OLD/F19/notes/01_hellonetwork.pdf b/_OLD/F19/notes/01_hellonetwork.pdf
diff --git a/_OLD/F19/notes/02_HTML.pdf b/_OLD/F19/notes/02_HTML.pdf
diff --git a/_OLD/F19/notes/02_HTML_code.zip b/_OLD/F19/notes/02_HTML_code.zip
diff --git a/_OLD/F19/notes/03_CSS.pdf b/_OLD/F19/notes/03_CSS.pdf
diff --git a/_OLD/F19/notes/03_CSS_code.zip b/_OLD/F19/notes/03_CSS_code.zip
diff --git a/_OLD/F19/notes/04_userexperience.pdf b/_OLD/F19/notes/04_userexperience.pdf
diff --git a/_OLD/F19/notes/05_layout.pdf b/_OLD/F19/notes/05_layout.pdf
diff --git a/_OLD/F19/notes/05_layout_code.zip b/_OLD/F19/notes/05_layout_code.zip
diff --git a/_OLD/F19/notes/06_jQuery_animate.zip b/_OLD/F19/notes/06_jQuery_animate.zip
diff --git a/_OLD/F19/notes/06_jQuery_code.zip b/_OLD/F19/notes/06_jQuery_code.zip
diff --git a/_OLD/F19/notes/06_jQuery_create_divs.zip b/_OLD/F19/notes/06_jQuery_create_divs.zip
diff --git a/_OLD/F19/notes/06_jQuery_cross_fade.zip b/_OLD/F19/notes/06_jQuery_cross_fade.zip
diff --git a/_OLD/F19/notes/06_jQuery_moveBox.zip b/_OLD/F19/notes/06_jQuery_moveBox.zip
diff --git a/_OLD/F19/notes/06_jQuery_setInterval.zip b/_OLD/F19/notes/06_jQuery_setInterval.zip
diff --git a/_OLD/F19/notes/07_crowdsourcing.key b/_OLD/F19/notes/07_crowdsourcing.key
diff --git a/_OLD/F19/notes/07_crowdsourcing.pdf b/_OLD/F19/notes/07_crowdsourcing.pdf
diff --git a/_OLD/F19/notes/08_data_code.zip b/_OLD/F19/notes/08_data_code.zip
diff --git a/_OLD/F19/notes/09_surveillance_identity.pdf b/_OLD/F19/notes/09_surveillance_identity.pdf
diff --git a/_OLD/F19/notes/10_wireframes_mockups.pdf b/_OLD/F19/notes/10_wireframes_mockups.pdf
diff --git a/_OLD/F19/notes/11_p5_code.zip b/_OLD/F19/notes/11_p5_code.zip
diff --git a/_OLD/F19/notes/laurenleemack-networkmedia-readinglist.pdf b/_OLD/F19/notes/laurenleemack-networkmedia-readinglist.pdf
diff --git a/_OLD/F19/resources/css/css_emptydivs_template.zip b/_OLD/F19/resources/css/css_emptydivs_template.zip
diff --git a/_OLD/F19/resources/css/css_emptydivs_template/index.html b/_OLD/F19/resources/css/css_emptydivs_template/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>EMPTY DIVS</title>
+    <link rel="stylesheet" href="style.css"></link>
+  </head>
+  <body>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </body>
+</html>
diff --git a/_OLD/F19/resources/css/css_emptydivs_template/style.css b/_OLD/F19/resources/css/css_emptydivs_template/style.css
diff --git a/_OLD/F19/resources/css/css_template.zip b/_OLD/F19/resources/css/css_template.zip
diff --git a/_OLD/F19/resources/css/css_template/index.html b/_OLD/F19/resources/css/css_template/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>STYLE ME</title>
+    <link rel="stylesheet" href="style.css"></link>
+  </head>
+  <body>
+
+    <header>
+      <h1>It was getting dark, and we weren't there yet.</h1>
+    </header>
+
+    <nav>
+    <ul>
+      <li><a href="#">salad</a></li>
+      <li><a href="#">dawn</a></li>
+      <li><a href="#">goal</a></li>
+      <li><a href="#">understanding</a></li>
+    </ul>
+    </nav>
+
+    <section>
+
+      <h2>If I don't like something, I'll stay away from it</h2>
+
+      <h3>I am so blue I'm greener than purple</h3>
+
+      <div>
+
+        <p>I have tried to warn you of this; now, have I not?" I said in a miserable manner, "Yes. He told us a very exciting adventure story. I love eating toasted cheese and tuna sandwiches. She advised him to come back at once. She folded her handkerchief neatly. The clock within this blog and the clock on my laptop are 1 hour different from each other.</p>
+
+        <p>He turned in the research paper on Friday; otherwise, he would have not passed the class. He didn't want to go to the dentist, yet he went anyway. The memory we used to share is no longer coherent. Two seats were vacant. If the Easter Bunny and the Tooth Fairy had babies would they take your teeth and leave chocolate for you?</p>
+
+      </div>
+
+      <h3>Look, a distraction!</h3>
+
+      <div>
+
+        <p>The last of the three now said his say, as he put down his empty drinking vessel and smacked his lips. The lake is a long way from here. A song can make or ruin a person's day if they let it get to them. She only paints with bold colors; she does not like pastels. When I was little I had a car door slammed shut on my hand. I still remember it quite vividly.</p>
+
+        <p>The possibility of his having endured such unkindness, was enough to interest all her tender feelings; and nothing remained therefore to be done, but to think well of them both, to defend the conduct of each, and throw into the account of accident or mistake whatever could not be otherwise explained.</p>
+
+      </div>
+
+    </section>
+
+    <footer>
+      This is the <a href="#">end</a>.
+    </footer>
+  </body>
+</html>
diff --git a/_OLD/F19/resources/css/css_template/style.css b/_OLD/F19/resources/css/css_template/style.css
diff --git a/_OLD/F19/resources/css/index.php b/_OLD/F19/resources/css/index.php
@@ -0,0 +1,64 @@
+<!doctype html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<html lang="en">
+<head>
+<?php include("../../head.php"); ?>
+</head>
+<body>
+  <div class="container">
+    <?php include("../../nav.php"); ?>
+
+    <div class="right">
+      <section>
+        <h2>GOT NO STYLE</h2>
+        <br>
+
+        <p>This workshop will focus on creating and modfiying HTML layouts with CSS. In part one, you will style an HTML page with CSS. In part two, you will try to reassemble a CSS stylesheet based on a rendered HTML page. In part three (time permitting), you will make a more abstract and experimental CSS composition.</p>
+
+        <h3>PART ONE</h3>
+
+        Working in partners, download this <a href="css_template.zip">HTML page template</a>. Fill in the style.css file to style the page in any way you like. <b>In the HTML file, do not change the content, but you may add ids or classes or &lt;span&gt;s to elements.</b> See the <a href="./resources/#html_css">resources page</a> for helpful links.</p>
+
+        <h3>PART TWO</h3>
+
+        <ol>
+          <li>Post your styled page to one of your DMA user spaces, and email the link to the other group.</li>
+          <li>Open the link they have emailed you.</li>
+          <li>Download a fresh copy of this <a href="css_template.zip">HTML page template</a>.</li>
+          <li>Try to recreate the other group's page as best you can by filling in the style.css file. You can use inspector to help, but don't cheat by looking at the full CSS page. If you get stuck, ask the other group for hints.</li>
+        </ol>
+
+        <h3>PART THREE</h3>
+
+        Create an original composition using exactly five HTML &lt;div&gt;s. In the HTML file, do not change the content, but you may add ids or classes to elements. The goal is to make something that feels coherent and interesting. Start with this <a href="css_emptydivs_template.zip">HTML page empty DIV template</a>. Try experimenting with the following ideas:<br><br>
+        <ul>
+          <li>Add a background image to a DIV (see the <a target="_blank" href="https://css-tricks.com/almanac/properties/b/background-image/">background-image property</a>).</li>
+          <li>Use a background color or gradient (see <a target="_blank" href="http://gradientgenerator.com/">CSS gradient generator</a>).</li>
+          <li>Apply a border.</li>
+          <li>Try making shapes (see <a target="_blank" href="https://css-tricks.com/examples/ShapesOfCSS/">Shapes of CSS</a>).</li>
+          <li>Try adding a clipping mask to a background (see <a target="_blank" href="http://bennettfeely.com/clippy/">CSS clip-path maker</a>). Here's some sample code:
+            <code><pre>
+#clippedDiv {
+  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
+  background-size: 500px 500px;
+  width: 500px;
+  height: 500px;
+  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+            </pre></code>
+          </li>
+          <li>Browse the rest of the <a href="http://htmldog.com/references/css/properties/">CSS reference</a>.</li>
+
+        </ul>
+      </section>
+
+
+    </div>
+  </div>
+</body>
+</html>
+
diff --git a/_OLD/F19/resources/ftp/cyberduck1.png b/_OLD/F19/resources/ftp/cyberduck1.png
diff --git a/_OLD/F19/resources/ftp/cyberduck2.png b/_OLD/F19/resources/ftp/cyberduck2.png
diff --git a/_OLD/F19/resources/ftp/cyberduck3.png b/_OLD/F19/resources/ftp/cyberduck3.png
diff --git a/_OLD/F19/resources/ftp/index.html b/_OLD/F19/resources/ftp/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='cache-control' content='max-age=0' />
+  <meta http-equiv='cache-control' content='no-cache' />
+  <meta http-equiv='expires' content='0' />
+  <meta http-equiv='expires' content='Tue, 01 Jan 1980 1:00:00 GMT' />
+  <meta http-equiv='pragma' content='no-cache' />
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <meta name='viewport' content='width=device-width'>
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
+  <link rel='stylesheet' href='../../css/normalize.min.css'>
+  <link rel='stylesheet' href='../../css/style.css?v=1.0'></link>
+  <link rel='stylesheet' href='../../css/prism.css'></link>
+  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'>
+  <script src='https://code.jquery.com/jquery-3.1.1.min.js' integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=' crossorigin='anonymous'></script>
+  <script src='../../main.js'></script>
+  <title>DESMA161: Network Media</title>
+</head>
+<body>
+  <div class='container'>
+    <div class='content'>
+
+      <!-- NAV -->
+      <nav>
+        <ul id='links'>
+          <li><a href="../../#syllabus">Syllabus</a></li>
+          <li><a href="../../#schedule">Schedule</a></li>
+          <li><a href="../../#discussions">Discussions</a></li>
+          <li><a href="../../#projects">Projects</a></li>
+          <li><a href="../../#resources">Resources</a></li>
+          <li><a target='_blank' href='https://docs.google.com/spreadsheets/d/1EWgywcX2UXznQcioXS0Sy0VbtaC8toW9EXIQCYwAXjc/edit?usp=sharing'>Attendance</a></li>
+        </ul>
+      </nav>
+
+
+      <!-- HEADING -->
+      <h1><a href=''>DESMA161: Network Media</a></h1>
+
+
+      <section>
+        <h2>HOW TO FTP</h2>
+        <br>
+
+        <h2>WHAT IS FTP AND SFTP?</h2>
+
+        <p>FTP stands for File Transfer Protocol. It is a standard network protocol used to transfer files between computers, generally between a client and server. An FTP client is a desktop application that lets you transfer files from your comuter to a remote server. It is most commonly used to upload files to a public web server for a website.</p>
+
+        <p>FTP pre-dates HTTP and was not developed to be a secure protocol and has many vulnerabilities. For this reason, we will be using SFTP. SFTP (SSH File Transfer Protocol, or Secure File Transfer Protocol) is a newer protocol designed by the Internet Engineering Task Force to provide secure file transferring between known clients and hosts.</p>
+      </section>
+      <section>
+        <h2>CONNECTING WITH CYBERDUCK</h2>
+
+        <p><img src="cyberduck1.png" alt=""></p>
+
+        <ol>
+        <li>Click the Open Connection icon near the top left.</li>
+        <li>In the dialogue box, choose SFTP (SSH File Transfer Protocol). DO NOT CHOOSE FTP.</li>
+        <li>For server name, enter <code><a href="http://ftp.dma.ucla.edu/" target="_blank">ftp.dma.ucla.edu</a></code> and default port <code>22</code>.</li>
+        <li>Enter your username and DMA support password.</li>
+        <li>The first time you do this, you can select to add to keychain (if you're on your personal computer).
+        </ol>
+        <img src="cyberduck2.png" alt=""></li>
+      </section>
+
+      <section>
+        <h2>TRANSFERRING FILES</h2>
+
+        <ol>
+        <li>Your files are located inside <code>public_html</code></li>
+        <li>You can drag and drop files inside here to upload to the server or click on the Action menu and choose Upload. You can also choose to rename files, duplicate, delete, etc.</li>
+        <li>Your files are located at <code><a href="http://users.dma.ucla.edu/~yourusername" target="_blank">http://users.dma.ucla.edu/~<wbr>yourusername</a></code>. </li>
+        </ol>
+
+        <img src="cyberduck3.png" alt="">
+      </section>
+
+      <section>
+        <h2>OTHER FTP APPLICATIONS</h2>
+
+        <ul>
+        <li><a href="https://filezilla-project.org/" target="_blank">FileZilla</a> - Mac, Windows, Linux</li>
+        <li>SFTP is also pre-installed on OS X's Terminal, accesible via <code>sftp <a href="mailto:[email protected]" target="_blank">[email protected]</a></code></li>
+        </ul>
+      </section>
+
+
+      <section>
+        <h2>BASIC INFO REQUIRED</h2>
+
+        <p>To connect via a FTP connection you need to know:</p>
+
+        <ul>
+        <li>Server name <code><a href="http://ftp.dma.ucla.edu/" target="_blank">ftp.dma.ucla.edu</a></code>  and the default port: <code>22</code><br></li>
+        <li>Username (your UCLA ID)</li>
+        <li>Password (your DMA_Support password)</li>
+        </ul>
+        <p></p>
+      </section>
+
+      <section>
+        <h2>YOUR PERSONAL WEBSPACE</h2>
+
+        <p>The <em>public_html</em> folder in your home directory is the root directory of your web space, and where you may create your personal website. It has been pre-configured with the correct permissions to allow file placed inside to be accessed online. A file called <em>foo.html</em> in that directory will be available online as: <a href="http://users.dma.ucla.edu/~yourusername/foo.html" target="_blank">http://users.dma.ucla.edu/~<wbr>yourusername/foo.html</a></p>
+
+        <p>The special file <em>index.html</em> or <em>index.php</em> is what is brought up automatically if you do not specify a filename at the end of your URL (eg: <a href="http://users.design.ucla.edu/~yourusername" target="_blank">http://users.design.ucla.edu/~<wbr>yourusername</a>). </p>
+
+        <p>PLEASE NOTE: if you do not have an index.html file and type the URL without a filename at the end, you will get an error message (access forbidden). This is for your own protection, as it prevents people from browsing through your directory when you are not ready for them to do so. </p>
+
+        <p>NOTE1: Permissions File permissions matter. All files in the public_html directory should be world-readable in order to ensure their availability online. Similarly, all directories should be world readable and executable. Most clients will deposit the files in the correct manner, but there have been some reports that moving whole folders from other parts of your home directory to your web area may mess up permissions depending on your client. </p>
+
+        <p>NOTE2: CAPITALIZATION MATTERS! That is to say, index.html and iNdex.html are NOT the same files. In order for your site to work properly, you must make sure that both the filenames and the HTML that refers to the filename use the same casing. Since many operating systems by default hide or pretty the actual cases of their filenames, I recommend either turning off those features (if you know how) or use an SFTP client that shows you how the files actually look when uploaded.</p>
+
+        <ul>
+        <li>Info in this section comes from <a href="https://support.dma.ucla.edu/help/?q=FrequentlyAskedQuestions" target="_blank">DMA Support</a></li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</body>
+</html>
+
diff --git a/_OLD/F19/resources/preview/index.html b/_OLD/F19/resources/preview/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='cache-control' content='max-age=0' />
+  <meta http-equiv='cache-control' content='no-cache' />
+  <meta http-equiv='expires' content='0' />
+  <meta http-equiv='expires' content='Tue, 01 Jan 1980 1:00:00 GMT' />
+  <meta http-equiv='pragma' content='no-cache' />
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <meta name='viewport' content='width=device-width'>
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
+  <link rel='stylesheet' href='../../css/normalize.min.css'>
+  <link rel='stylesheet' href='../../css/style.css?v=1.0'></link>
+  <link rel='stylesheet' href='../../css/prism.css'></link>
+  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'>
+  <script src='https://code.jquery.com/jquery-3.1.1.min.js' integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=' crossorigin='anonymous'></script>
+  <script src='../../main.js'></script>
+  <title>DESMA161: Network Media</title>
+</head>
+<body>
+  <div class='container'>
+    <div class='content'>
+
+      <!-- NAV -->
+      <nav>
+        <ul id='links'>
+          <li><a href="../../#syllabus">Syllabus</a></li>
+          <li><a href="../../#schedule">Schedule</a></li>
+          <li><a href="../../#discussions">Discussions</a></li>
+          <li><a href="../../#projects">Projects</a></li>
+          <li><a href="../../#resources">Resources</a></li>
+          <li><a target='_blank' href='https://docs.google.com/spreadsheets/d/1EWgywcX2UXznQcioXS0Sy0VbtaC8toW9EXIQCYwAXjc/edit?usp=sharing'>Attendance</a></li>
+        </ul>
+      </nav>
+
+      <!-- HEADING -->
+      <h1><a href=''>DESMA161: Network Media</a></h1>
+
+
+      <section>
+
+      <section>
+        <h2>PREVIEWING MOBILE SITES IN CHROME</h2>
+
+
+        <ol>
+        <li>Right click anywhere on your page and click "Select".
+          <img class="max640" src="inspect.jpg" alt="context menu and inspector being opened in chrome">
+        </li>
+        <li>You should see a panel open on the bottom or side of your window. Click the mobile icon.
+        <img class="max640" src="mobile.png" alt="mobile icon in chrome inspector">
+        </li>
+        <li>Click the dropdown next to the device name in the top of the window to select other sizes.
+        <img class="max640" src="size.png" alt="menu from dropdown next to iphone in top bar">
+        </li>
+
+      </section>
+
+    </div>
+  </div>
+</body>
+</html>
+
diff --git a/_OLD/F19/resources/preview/inspect.jpg b/_OLD/F19/resources/preview/inspect.jpg
diff --git a/_OLD/F19/resources/preview/mobile.png b/_OLD/F19/resources/preview/mobile.png
diff --git a/_OLD/F19/resources/preview/size.png b/_OLD/F19/resources/preview/size.png