Week 3: Webrings

Week 3 - Webrings

Today:

  • Atom
  • warmup: creating our webring index collaboratively
  • linking our webring pages together
  • websites / directory structure
  • proto-social media and social software
  • blogging as social media
  • blogging with zonelets

Warmup: Webring Index page in about 10(?) minutes

Our webring will be called the Anti Software Social Club.

Collaborative editing of our class html page using Atom and Teletype.

Setting up collaborative code editing with Atom

Code Editor = Software designed for writing and editing of plaintext (no bolding, underlining, etc) of source code. Can be standalone or packaged into a IDE.

IDE = Integrated Development Environment. This is a software application combining code editor, debugger, and build tools.

Dozens of good free code editors and IDEs are available. You are welcome to use any one you are familiar with. In this class I will tend to use Atom, available for free download from Microsoft (after they purchased GitHub). Atom is an enhanced text editor, free and open source, available for Mac, Windows and Linux. It’s slogan is “a hackable text editor for the 21st century.” It works out of the box and it can be customized to match your preferred programming style. Atom is built on Electron, which we will cover later this semester.

Atom lets you add custom additional features, called Packages. Open up Atom’s Preferences, click on the Install tab. Search for atom-live-server. This will let you test out any website you create in a web browser as you work on it. Then do a search for Teletype and install it. This will let us collaborate on code together in realtime.

Build the index collaboratively using Atom’s Teletype

The Anti-Software Social Club webring has begun.

First, We will collaboratively edit the index landing page for our webring.

10 minutes timer egg timer

Extra challenge: No talking is allowed.

Add ourselves to the webring

Please add the onionring code to your now page that you previously uploaded. It’s probably best to place this before the closing </body> tag.

Do you have a good workflow? Set up a system for yourself to easily upload updated pages to your server space.

The code to embed for our webring is here. Add to your now page or whatever page you want people to be brought to via the webring. Note: I set this previously based on what page you linked to from Moodle for homework.

	  <!-- START Anti-Software Social Club Ring embed code -->
		<div id="social">
			<script
				type="text/javascript"
				src="/lee.tusman/assets/js/onionring-variables.js"
			></script>
			<script
				type="text/javascript"
				src="/lee.tusman/assets/js/onionring-widget.js"
			></script>
		</div>
	  <!-- END Anti-Software Social Club Ring embed code -->

Directories: How Do They Work?

Reminders:

  • a directory is another name for a folder
  • If you put an index.html file inside a folder, you don’t have to specify the index.html page in the URL address to get to it.

For example:

If you have a folder on your student server space called “projects” and you put an index.html inside there then your URL would be:

https://students.purchase.edu/firstname.lastname/projects

OLDSKOOL typical server directory structure:

domain/
 -index.html
 -style.css
 -main.js
 -about.html
 -me.jpg
 -background.jpg
 -projects.html
         projects/
         -project1.html
         -project2.html
         -project-style.css
         -project-image1.jpg

NU-SKOOL typical server directory structure:

domain/
  -index.html
   assets/
       css/
         -style.css
         -now.css
       js/
         -main.js
       img/
         me.jpg
         background.jpg
   about/
      - index.html
   now/
      - index.html
   projects/
       project1/
              - index.html
       project2/
              - index.html
       etc...

What are the upsides/downsides to this approach?

Discuss Homework Reading/Listening

Today’s Social Media ‘Field Trip’: Blogs!

Make a blog with Zonelets

There is a quickstart guide with some useful info. It shows you how to upload to neocities. We’ll instead host our blog on our Purchase webserver.

Quickstart Guide for reference.

Our method:

Download Zonelets and place it in your local (on your computer) directory for your Purchase website. Unzip it (Right click and uncompress). You should now have a folder holding your Purchase website and inside that is the unzipped folder called zonelet_starter_01_4/. Rename this folder to blog or writing or other name.

Important: Don’t have spaces in the name. Instead, use _ (underscores) or - (dashes).

Adding your blog to Atom for editing

Open Atom. File > Add Project folder > Navigate to the directory holding your blog.

Creating a new post

In the Project navigation open your posts/ folder. Right click on 2020-11-10-Post-Template.html and choose Duplicate. Give it a name like 2021-09-15-hello-world.html. It’s important to use that naming structure. You can change the name of this file later by right clicking and choose rename.

You can now edit the page in Atom’s text editor. Your writing / web content should begin starting on line 14. You can use any html tags like <p>, <h1>, etc. For a detailed example, you can open up

Updating your blog

(modified from Zonelets Quickstart method)

  1. Copy the name of your file you just edited, including the posts/ part. This should look something like posts/2020-11-12-Plover-Appreciation.html. You can copy this from the top of the HTML editor by right clicking on the name and choosing rename (cancel after you copy the filepath, you don’t actually want to rename it!).
  2. In the project navigation open script.js
  3. Paste the filename that you just copied into postsArray (line 23), following the format of the example posts. Now your post will appear in your Archive and the list of recent posts! example: 
     let postsArray = [
 [ "posts/2021-09-15-hello-world.html" ],
 [ "posts/2020-11-10-Post-Template.html" ] ];

    Notice that the last post has the ]; to close the array while previous posts are separated by a comma.

  4. Before you go, update the values for blogName, authorName, and authorLink in Section 1: Basic Info.
  5. In line 63 you will want to change where it says “and hosted by” Neocities to Purchase college, or just remove the hosting info.
  6. Save your work. (File > Save All)

Test and Deploy (Getting it online)

Go to Packages > Atom-live-server > Start Server. Your web browser should open automatically and point to: http://127.0.0.1:3000/.

How does it look? Go back to Atom and make any changes you need.

Further edits:

Customize your navigation headings

Open script.js.

At the top in a comment it explains the different sections of this file.

In line 57 I changed the title Home to Posts since that more accurately captures what that page is.

In line 59 I decided I didn’t want to link to an About page since my homepage/now-page already serves that purpose. So instead I changed that line to link to Home! Here’s what I put instead:

'<li><a href="' + 'https://faculty.purchase.edu/lee.tusman/">Home</a></li> </ul>';
Change posts index page

I wanted to make some changes to the posts page. Open posts > index.html. I didn’t want it to say I hope you enjoy your time here so I removed that line.

In line 4 I changed the title of my page to Blog.

Change themes

Uggh, the default theme. Yuck. You can change your theme. Which means CSS.

  • Instructions on downloading and using themes from the Theme Gallery or making your own theme.

What I did: I copied the nude css theme from the Theme gallery over the supplied default css stylesheet. Then I added a link to my own stylesheet that I made previously afterwards. So I’m applying the theme css (which has css that affects formatting) and then my own css on top.

Link to your blog from your main page.

Add a link or add your nav to be able to get to your blog.

Blog examples

Fujichia

worm.club: Zach

Resources

Notion wiki: CSS Resources that are mostly Comics and Games list

Alt.folklore.computers email list: Origins of the Finger Protocol

Zonelets Theme Gallery

Making Images Accessible

Zonelets Comparison to Other Blogging Methods

List of CB Slang

Onionring

Homework

Listen

Listen to Community Memory and the Computing Counterculture and be prepared to discuss.

Read:

The Washington Post: For Commerce unit hit by computer virus, hardship of being unplugged has upside

The New Yorker: Email is Making Us Miserable

Zonelets homepage and Frequently Asked Questions.

Watch Jaron Lanier’s interview on On How Social Media Ruins Your Life.

Write (and Watch)

Social media has a myriad number of ills. What are some of them? Can we fix social media and reform it? Analyze some of the social media (that we’ve covered in class or ones you are familiar with from outside of class).

Make an argument and use examples to back up your idea.

Do you find Jaron’s argument convincing? (why/not). How could these concerns be addressed, or are they being addressed somewhere already?

You should submit this assignment as a post on your new blog. Link to your blog post on Moodle.