WRT235: Writing in Electronic Environments Session 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   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 1 In 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 2 For 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: This is a header  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 and 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:  Thimble is a free HTML editor that displays both markup, CSS, and browser results

Diving into HTML Using 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