Electrate Fuego

Hello, maker! Welcome to the Electrate Fuego web design tutorial. I'm glad we crossed paths – for this might be an important intersection on your way to becoming. Through this exercise, you'll learn a little bit about code literacy, computer science, and something called "electracy." Just follow the code comments in the HTML file, and you'll make a really cool web document that will help you process how different discourse communities in your life have contributed to your arrival in this space, virtual and actual, and how they might also contribute to where you're going. By sharing this webtext, we'll meet other people at this intersection, each on their own path to becoming.

In this doc, you'll work through Gregory Ulmer's discourses of career, family, entertainment, community, and schooling (Internet Invention From Literacy to Electracy , 2002.) In Ulmer's text, he elides community and schooling into one category, but we'll separate them here. Ulmer's theory of electracy helps make sense of how we find/construct meaning and connect with others rhetorically in a media rich ecology. Ulmer uses analogy to define electracy, explaining that "electracy is to digital media what literacy is to print."

Before we get going, I want to give a shout-out to my research buddy Shauna Chung, who helped me develop the Ulmerian framework we'll follow in this webtext.

 

Go to Open Fuego to find more code-based tools and projects.

 

##Get started!

1. Scroll to the top of this repository and click the green "Code" button. Select "Download ZIP" to download project files to your local computer. These are all the project files you'll need to get started working with code.

2. Find this project folder in your downloads and move it to a secure place. You will return to this folder to manage your files and other assets like images, pdfs, etcetera.

3. Download and/or open a code editor. We recommend Phoenix Code which runs on a browser or download a desktop version.

4. Use the code editor to open your project folder. Open index.html document. Read through the code comments embedded in the index.html document. Here, you'll find all the information you need to work with code!

5. Once you have modified and added content to your project, you will want to publish your webtext to the internet. GitHub provides a good publishing solution. If you do not already have one, create a GitHub account. Go to GitHub

6. Create a new repository to house your project files. Click "uploading an existing file" and upload your project files to your repository and "Commit changes". You'll need ALL of your assets to make your webtext function properly.

7. Now go to your repository "settings." Scroll down to "GitHub Pages" in the left-hand menu. Change the source setting from "none" to "main" "/root" and then Click "Save"

8. GitHub will now provide you with a published URL. (This process may take several minutes.)

9. Test the URL in a browser. Magic, no? Actually, it's computer science.

Check out our other cool coding tools at Open Fuego.

 

 

Code editors

You have a range of code editor options depending on your operating system, but we recommend Phoenix Code because it works across all operating systems, it comes with HTML preview already installed, and it's free and open-source. You can download a version or use the online editor.

Phoenix Code (Free and Open-Source for Mac / Windows / Linux. Download or use Online)

1. Go to Phoenix Code.
2. Use the online version or download a desktop app for Mac, Windows, Linux.
3. Adjust text wrapping, select View>Word Wrap
4. Enjoy the live preview.

    

    

Pulsar (Free and Open-Source for Mac / Windows / Linux)

See Video Tutorial

1. Download "Pulsar" Pulsar comes with "Spell Check" already installed.
2. Add HTML Preview
   • from the dropdown menu, select Packages>Open Package Manager
   • select + Install
   • in the search bar type "Atom-HTML-preview."
   • select the package built by "HARMSK." Click "Install."
3. Adjust text wrapping
   • from the dropdown menu, select View>Toggle Soft Wrap (this will force lines of code to conform to your view tab.)

 

 

Visual Studio Code (Mac / Windows /Linux)

See Video Tutorial

1. Download "Visual Studio Code"
2. Add HTML Preview
   • from the dropdown menu, select View>Extension.
   • In the search bar type "Live Preview." Install.
   • Right click on the index.html tab and select "show preview." You should see a live version of your work.
3. Install Spell Check
   • from the dropdown menu, select View>Extension.
   • In the search bar type "Code Spell Check." Install.
4. Adjust text wrapping on index.html
   • from the dropdown menu, select View>Word Wrap (this will force lines of code to conform to your viewer tab.)