1. WRT235: Writing in Electronic Environments Session 1 Getting Started

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

3. Course Websites  http://ryan-omizo.com/wrt235 http://ryan-omizo.com/wrt235  Wordpress course site  sakai.uri.edu  Back-up course site  Submission of work for final grades  Required Readings

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

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

6. 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

7. 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

8. 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

9. 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

10. 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.

11. 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

12. 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

13. 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

14. Diving to HTML  Let’s get started with basic HTML by visiting Mozilla’s Thimble: https://thimble.webmaker.org/.https://thimble.webmaker.org/  Thimble is a free HTML editor that displays both markup, CSS, and browser results

15. 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.

16. Rhetoric  Definitions?

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

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

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

20. 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

21. 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