ENGCMP0600/index.html at main · Charl-X/ENGCMP0600 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>

<!--Hello, maker! Welcome to my Electrate Fuego web design tutorial. I'm glad you found it – for this might be a real intersection on your way to becoming. Just follow along with comments like this one, and you'll make a really cool web document that not only introduces you to the other people in our classes, but will help you process how different discourse communities in your life have contributed to your arrival in this space, virtual and actual, and also contribute to where you might be going.

In this doc, you will 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 for our purposes I have separated them. Ulmer's theory of electracy helps makes 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."

You could make this document the easy way by posting on Google Site, an Adobe Spark, a Weebly, or a Wix, or you can do a little more work to unconceal, opening up these tools that you use every day, but might not know how they function, yet prove so necessary to how you (re)present yourself and connect with others in virtual spaces. And this last bit is an important point! If we really want to be makers, if we really want to be creative, then we need to understand what our digital tools do, how they work, and consider the implications of their use. Through this process you will also learn a little bit about computer literacy and computer science...enough to allow you to build web texts and understand file management.

So let's cut this thing open – using "tmesis" as the Ancient Greeks would call it – lets "cut" and arrange, tweak, take away and augment...that's how we create! I hope you're excited to use this tool to create a document that will simultaneously help you process your journey and help orient you along the path on which you are headed in your becoming. Before we get going I would like to give a shout-out to my research buddy Shauna Chung, who helped me develop the original Ulmerian framework we will be following in this document. Are you ready to get started?-->

 <!--To get started, you will need to fork my repository from GitHub if you haven't already. If you want to easily publish it on GitHub, I'll give you more information at the end of this document. But for right now, fork, and then download the website to a zip file (or clone it, if you know what that means). Go ahead and put these files in a secure place (folder) where you will be able to find them and organize your other assets like images, pdfs, etcetera. You will also need a text editor like "brackets.io" or "atom.io" or "notepad-plus-plus.org." Open the index.html and style.css files in the text editor and we can get started building our own electrate experience.-->

<!--BTW. You can leave these hidden HTML text fields be, or delete them. They are but road signs, absent from the larger design-->

<!--First we will need to do some work in the head of the document. The head organizes important information needed to explain to browsers how the website will work. Go ahead and change the title of this HTML document below, from "Electrate Fuego" to whatever you want it to be called. Your new text will appear in your browser tab-->
<title>Charlie's Bio</title>
<!--this next section of code does important work to help different browsers understand what this page should look like on the different kinds of screens.-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Next is a link to the cascading style sheet or CSS file. Web designers use a cascading stylesheet CSS to add styling to a website. Designers do this by "calling" a <div class> in HTML and defining the class attributes on the style sheet. Doing so saves time and results in less code. On the style.css page you'll find attributes relating to font, text size, image size, among other details.-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<!--The <body> of the document houses the content that a user usually sees on a website. We'll be spending most of our time in this section.-->
<body>

<!-- We'll need to do some more work in this section, but to do so, we'll need to make some changes on your style.css file. Developers refer to this division as a "Hero Block," but we will refer to it as a "Wide Image."  Think carefully about the image you select and how it might serve a symbolic function in your life. Ulmer refers to these kinds of symbolic images as "wide images" in that they often repeat over and over in our lifetime. We will similarly repeat this image at the end of your Electrate Fuego composition to establish a motif in this web document.-->

<!--Designers refer to this next section as a "Hero Image." The hero image is styled on the style.css page by calling a "class." To replace the hero image, simply place a .jpg file in the same file folder (directory) as this project and name it "hero.jpg." Alternatively, if you are working with a .png, you will need to open the style.css file using your text editor, find the "hero-image" class and change the file type from ".jpg" to ".png."" Browsers will only work with .jpg, .jpeg, or .png images. Since hero images need to stretch across the screen, typically you will want to select an image 1200px in width to allow quick load time yet avoid pixilation.-->

<div class="hero-image">
  <div class="hero-text">
<!--Next, change the other relevant information in this section, especially if you're not "John en Fuego" or not majoring in "electracy"-->
      <h1>Charlie Shafer</h1>
      <h2>IT Technician Studying Computer Science</h2>
  </div>
</div>

<!--In our first exploration of discourse, we're going to think about the wider characteristics or themes of our field or future career. In academia, we do a lot of work narrowing our interest to arrive at a career or profession, often reducing our field to a level of operation or an act. Instead, I would like you to think more broadly about the "wider themes" you associate with your field or future career and its larger significance in improving our world. Yes...improving the world. Thinking back, where do you see exposure to those same "wider themes" in your own life? Those ah-ha moments, lessons, examples, tools, passions, or qualities that suggested this career path to you? Replace the content between <h2> and </h2> that begins with "Lorem ipsum."-->

<div class="textblock">
  <h2>Field or Career</h2>

  <h3>I work at the University of Pittsburgh full-time as a Linux Support Technician, and I'm finishing my Computer Science degree with my job's support. During my first few years in college, I studied Neuroscience and worked at a lab analyzing brain scan images. We worked on Linux systems that often required deep dives into documentation to get our software working. My favorite part of my job was troubleshooting and writing Matlab code on these computers, so I pivoted to taking more coding classes, and I took a break from school to work for a while before returning to finish my CS degree.</h3>
</div>

<!--Replace the image here. You can also control image width and height %. This is the second way we can control the size of images on our website.-->

<div>
<img src="orange-pastel-computer-desktop-screen-digital-device-with-design-space.jpg" alt="drawing of a computer monitor and mouse" class="center-img"  style="width:50%;">
  </div>

<!--in this next section you will explain a little more about your family (what does family means to you? Who are the people that influenced you on this path along which you now stand).-->

<div class="textblock">
  <h2>Family and Home</h2>
    </div>

<!--Show us. Find those beautiful, meaningful "family" photos and pictures of your place (only you can define family). If you are concerned about issues of privacy, you can always use stock images, or get creative. Add these photos to your project folder, making sure the files end in .jpg or .png and replace the names in the grid code below. You can add more images if you wish, or subtract...you might also need to move content around to achieve balance. See what happens – sometimes you have to be playful to find the purpose of things. Since these images are smaller, you will want to resize your images to less than 600px in width. This will improve load time and thus general accessibility. Don't forget to add alt="text"-->

<!--A photo grid uses rows and column classes to create some divisions on the page that will scale with mobile devices. The style.css page provides other attributes that will adjust the image depending on the size of screens.-->


<div class="row">
  <div class="column">
    <img src="wall.jpg" alt="four people standing in front of a graffiti wall smiling">
    <img src="park.jpeg" alt="four people in an outdoor park gazebo smiling at the camera">
  </div>
  <div class="column">
    <img src="wedding.jpeg" alt="a couple in dress clothes">
    <img src="fountain.jpeg" alt="a couple standing by a fountain">
  </div>
  <div class="column">
    <img src="cats.jpg" alt="two cats sitting next to each other staring out a window">
    <img src="paco.jpg" alt="black kitten sleeping on a bed">
  </div>
</div>

<!--Time to write. Flesh it out! Define family, qualify it, explicate it telling us why these people are important, and how they contributed to how you got here and where you are going. What about "home." What  does that mean to you? In what ways is it significant in determining where your are going? Replace the content between <h2> and </h2> that says "Lorem ipsum."-->

<div class="textblock">
  <h3>My three partners, Babs, Kitt, and Taylor, are my chosen family. They're the people I live, share resources, and plan for the future with. Our home is a place where we get to arrange the environment around our needs. It's where we get to be ourselves, relax and unwind. And it's where our cats are.
  </h3>
</div>


<!--Now we are moving into the kinds of media that contributes to your everyday discourse. This might sound weird, but Ulmer argues that media has actually contributed a great deal to who you are as a person, how you language yourself, and even how you move through the world and interact with others. So, let's take some time to explore this discourse area. You have the opportunity to add video content or other significant media content. You might also add images to this section (see the bottom of this sheet for directions on how to add elements) perhaps adding a photo grid like the one you did for the "Family" section. Experiment. You can't break this thing, right? Control Z. Control Z. Control Z... -->

<div class="textblock">
  <h2>Entertainment</h2>

<!--find a YouTube video that has some significance in your life. Click "share," and copy and paste the embed link and paste it below-->

  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/D5xX6nRWDko?si=PW5SKjvwngG9wPi6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
    <p>YouTube video by CodeBullet, who teaches an AI to play a flight simulator game</p>


<!--Time to process. How do you use media? What role do certain kinds of media play in your life? How does media serve a social function? In what way might you be "recreating" or "remaking" media in your everyday life?

FUN FACT: "Lorem ipsum", "Lorem ipsum" was hacked out of Cicero's "De finibus bonorum et malorum," developers made it non-sensical. So while you will probably never write as well as Cicero, you can always improve upon "Lorem ipsum." -->

  <h3>I use media to learn and unwind, often at the same time. Watching other people create interesting things helps me get excited to learn more and build more projects myself.</h3>
</div>

<!--Between these divisions, you may want to add a new div element like an image (see the bottom of this html page for instructions) -->

<!--We will use this next section to process your community(-ies)-->

<div class="textblock">
  <h2>Community</h2>

<!--So what exactly is your community: is it actual? virtual? Where do find your ground, or at least, where do you drop anchor, you drifter, you? While we often think of communities as neighborhoods and clubs and a group of colleagues or friends, you might find community across the frontiers of the dead, and perhaps even with those who have never lived. I'll let you explain. -->
<div>
<img src="realistic-non-binary-pride-flag.jpg" alt="my feet in water-describe the image HERE for accessibility purposes" class="center-img" style="width:100%;">
</div>

  <h3>I feel connected to communities that share different aspects of my identity - LGBTQ communities, neurodiverse communities, non-monogamous communities. I also have a community of people who go to the same festival every year during the summer, people I play DnD with, and people I work with. </h3>
  </div>


<!-- In our final discourse section, we will process the role schooling has played in our lives. -->

    <!--To change the image for this wide screen parallax scroll, you will need change the file name in your style.css to match an image in your project folder. Look for ".paralax1" on your style.css sheet-->

<div class="parallax"></div>

<!--Like it or not, your schooling, formal and informal, for better or for worse, has been another factor that has brought you here and prepared you for this moment. Let's think through these systems, expectations, and outcomes. And let's also think a little about futurity... where is this learning, formal and informal – this unconcealing – taking you? -->
<div class="textblock">
  <h2>School</h2>
  <h3>I was home schooled from kindergarten through high school. I learned how to learn and solve problems on my own. I took community college classes in high school, and then came to Pitt for a bachelor's degree. I was studying Neuroscience at first, but I learned coding on the job and on my own, and took computer science classes on the side. I got a software engineering internship, and then left college to work for a while before returning to finish a Computer Science degree. I hope to understand the Linux systems I work with better, and advance my IT career.</h3>
  </div>

<!--The final step in our process will be to ensure that a smaller version of our "hero image," what Ulmer would refer to as our "wide image," repeats at the bottom of our document to better reinforce this motif.  -->

  <div id="logo">
            <img src="kimi.jpg" alt="my cat kimiko" style="width:25%;">
            <p><b>generated by <a href="https://pitt-fuego.github.io/Pitt-Fuego-Coding-Tools/">Pitt Fuego</a></b></p>
            <p><em>Why make a spark when you can light a fire?</em></p>
  </div>


  </body>
     </html>


     <!--Looking to add components? You've come to the right place. Copy and paste Code Snippets and add to the body section. Adjust class properties on style.css.


     ***Add Text Block***

    (Format textblock using inline styling: text-align: left, center, justify, right; Format text: Italics: <em>italics</em>; Bold: <b>bold</b>; Link Website: <a href="link">LinkName</a>; Link Asset: <a href=filename.pdf>FileName</a>; Line Breaks: <br></br>; Tip for composing longer content: use <h3> and <p> instead of <h2> and <h3>)

     <div class="textblock" style="text-align: left">
         <h2>Header</h2>
         <h3>We recommend using our mobile-ready text sizing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
     </div>


     ***Add Block Quote***

     (Format text: Italics: <em>italics</em>; Bold: <b>bold</b>. For more stylings, find blockquote class on style.css)

     <div class="blockquote" style="text-align: center">
         <h2>Excepteur sint occaecat cupidatat non proident!</h2>
     </div>


     ***Add Bulleted Points to Textblock***

     (Change <ul></ul> to <ol></ol> to change from unordered list to ordered list. For more stylings, find the ul/li classes on style.css)

     <div class= "ul">
             <li>first</li>
             <li>second</li>
             <li>third</li>
     </div>

     -or- (try a nested list)

     <div class="ul">
         <li>Coffee</li>
         <li>Tea
           <ul>
             <li>Black tea</li>
             <li>Green tea</li>
           </ul>
          </li>
         <li>Milk</li>
      </div>


      ***Add a Button***

      (Clearly label button for accessibility purposes. If this is not possible, include: aria-label=”label for accessibility purposes.” For more stylings, find button class on style.css)

      <div class="buttonbox">
         <a href="https://pitt-fuego.github.io/Pitt-Fuego-Coding-Tools/" class="button" aria-label="">Button</a>
      </div>


     ***Embed YouTube Video***

     <div class="video">
      <div class="video-container">
        <<iframe width="560" height="315" src="https://www.youtube.com/embed/PhPLTpqG0pU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>>
      </div>
        <p>Add a caption.</p>
     </div>


     ***Add a Standard Image***

     (Control image properties with inline width value.)

     <img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:30%;" class="center-img">
     <p style="text-align: center"><em>Add a caption.</em></p>


     ***Add Image Block with Padding and Caption*** (Control image properties with inline width value.)

     <div class="imgageblock">
         <img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:100%;">
          <p style="text-align: center"><em>Add a caption.</em></p>
     </div>


     ***Add a Photo Grid***

     <div class="photogrid">
     <div class="row">
         <div class="column">
             <img src="pgrid1.jpg" alt="describe the image HERE for accessibility purposes">
             <img src="pgrid2.jpg" alt="describe the image HERE for accessibility purposes">
         </div>
         <div class="column">
             <img src="pgrid3.jpg" alt="describe the image HERE for accessibility purposes">
             <img src="pgrid4.jpg" alt="describe the image HERE for accessibility purposes">
         </div>
         <div class="column">
             <img src="pgrid5.jpg" alt="describe the image HERE for accessibility purposes">
             <img src="pgrid6.jpg" alt="describe the image HERE for accessibility purposes">
         </div>
     </div>
         <p><em>Add a caption.</em></p>
     </div>


     ***Add a Parallax Window***

     (To adjust window, find parallax class on style.css)

     <div class="parallax"></div>


     ***Add a Copyright Footer***

     <div id="footer">
       <p>Copyright Your Name, Year.</p>
     </div>


     ***Need something that's not here? Then you probably don't need it. But okay...go to w3 Schools***

     Looking to use GitHub to publish this webtext to the internet? Follow the directions on the repository READ.ME.
     Peace and love only, Stephen Quigley, University of Pittsburgh, 2021.-->