WRT235: Writing in Electronic EnvironmentsSession 1 Getting Started

Agenda Introduce Course Syllabus Introduce Principles of Markup with an Activity Introduce required software Preview Module 1 and other modules

Course Websites http://ryan-omizo.com/wrt235

Wordpress course site sakai.uri.edu

Back-up course site Submission of work for final grades Required Readings

Course Goals Practice design and rhetorical skills Practice creating useful website Practice common workflows and technologies Start assembling your professional portfolio

Course Tools Your favorite text editor Internet Browser Internet Access Portable flash drive Pen and paper

Text editors Notepad++ (Windows) Textwrangler (Mac) Bbedit Adobe Brackets (Mac and pc) – requires use of

Chrome For most of the in-class markup demonstrations, I will be

using Brackets

Dreamweaver We will not be using HTML software such as

Dreamweaver in this class (that includes Word and Photoshop slices)

Costly Unnecessary Not a program used by people who design and

maintain websites in the professional world Adds too much junk to your markup

Short Activity: Mystery Genre Game, Part 1In groups, you will be assigned a mystery document located on Sakai. You will then do the following: Identify the genre Describe what clues gave this genre away Share your ideas

Short Activity: Mystery Genre Game, Part 2For the second part of this game, you will give the unstructured data a more readable structure of your choosing. Re-arrange the existing text into something that

makes sense to you. Save the new file as a .txt document (1 document per

group) Post the new file to the Sakai discussion board thread

titled Mystery Genre

What you just did . . .By giving unstructured text structure, rules, and a recognizable format, you essentially accomplished what we will be emphasizing in the first part of this course:

Markup

Specifically, Hypertext Markup Language or HTML.

Markup is for Browsers You write a text You identify major structural and semantic

components of the text The browser interprets the HTML document and

displays the text in the way that you design And if you don’t tell the browser explicitly what to do, it

will decided for you

Concrete Example What you would write:

<h4>This is a header</h4> A web browser reads it and displays:

This is a header The browser knows that the text is a header because

you have marked it out with the <h4> and </h4> tags

How it all works (Generally) Use HTML to structure texts Use CSS (Cascading Style Sheets) to control the

visual display (colors, fonts, layout) Use Javascript to control the performance of certain

elements Use a browser to interpret these different aspects of

web authoring

Diving to HTML Let’s get started with basic HTML by visiting Mozilla’s

Thimble: https://thimble.webmaker.org/. Thimble is a free HTML editor that displays both markup,

CSS, and browser results

Diving into HTMLUsing Thimble we are going to play around with some basic structural tags that many of you are doubtless familiar with: Headers Paragraphs Line Breaks Lists

At this point, we are just messing around with HTML. You don’t have to memorize or turn in any of this. Most of this will be formalized as we begin the HTML and CSS fundamental modules.

Rhetoric Definitions?

Basic Rhetorical Concepts for this class: 3 Appeals – Ethos, pathos, logo Audience Arrangement Affordances Constraints

3 Appeals Ethos – appeals to credibility, character, and/or expertise Pathos – appeals to emotions Logos – appeals to reason, commonsense, convention

Audience Messages must be received to count be messages Messages are received by audiences Universal/idealized audience Real audiences

Arrangement Organization of information Presentation of information Form and content collaborate to create meaning

Example: the progression of ideas in paragraphs; the use of evidence to prove claims and support conclusions

Example: use of ids and classes in HTML Example: use of container objects in CSS Example: use of DOM to control the browser displays

Affordances and Constraints Affordances – techniques and conditions that facilitate efforts

at persuasion Constraints – techniques and conditions that inhibit efforts at

persuasion

Example: Wordpress interface; the file size upload limits; wordpress.com vs. wordpress.org sites