1. Advanced Technical Writing 2006 Session #2

2. About ATW Projects… Typical practices a content person uses  Know available technologies and know the issues likely to affect your organization and its information assets  Analyze an organization’s overall content strategy; implement this strategy via content modeling  Help those around you to better develop and manage content

3. Project 1: Web Technology & Issue Profiles For the first project, we’ll be building an online web-based magazine, of sorts, for which each of you will contribute content. Your job will be to develop a 1000 wd. article on a web content technology or issue that impacts the world of Technical Communication.

4. Project 1, Continued If you are taking this course for undergraduate credit If you are taking this course for graduate credit You should do a technology- based issue article: “how does PHP support dynamic content?” You should do a research- based issue article: “personalizing content: is it worth the threat to privacy?”

5. Project 1, continued In addition to learning about the topic of each article, we’ll learn other valuable things: ► We’ll explore the complexities of managing multiple content- providers, including managing format & content consistency ► You’ll learn to use Cascading Style Sheets to assist in this process

6. Project 1, Requirements ► 1000 words is the length we are shooting for; articles should be prepared for an audience of your peers ► You must submit a copyright free image to go along with your copy; ► You must submit in HTML, adhering to a template and linked style sheet that we will build, together, over the next few class sessions Review version due 1/26; Final version 2/2

7. Web Space? You have access to an account provided by MSU– your AFS Space. http://www.msu.edu/~your_msunet_id To put stuff there, FTP to ftp.msu.edu and store files in the directory called public_html; Or, in a networked lab, map the drive and navigate to your public_html directory ftp.msu.edu Did that last bit of jargon confuse you?

8. The ATW Way…think, do, reflect Today we will think more about the nature of web content and the complexities of working with web content by doing some information design. Because we think through our tools, we’ll discuss Cascading Style Sheets. But we do this not merely to learn CSS…we are also looking to discover some of the fundamental issues related to information design.

9. On Cascading Style Sheets

10. A brief profile of CSS Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. CSS lets you separate content from presentation.

11. What is CSS? ► Multiple styles can be defined and used in individual HTML documents and across multiple HTML documents (fonts, spacing/placement, colors) ► Browser follows an order of interpretation (aka, a cascade) of the style definitions ► 3 W3C CSS standards (CSS1 and CSS2 are current; CSS3 in development)

12. Styles in HTML In older versions of html, style attributes that describe how text or other elements should display are wrapped around text, thus: Hi! Hi! Problems arise when you need to change styles frequently!

13. Some problems with integrated style/content? each instance of a style must be hand coded, meaning that any document with lots of style changes becomes labor intensive mantaining a consistent look and feel across pages is tough on a large site making style changes to multiple pages is difficult and very time consuming

14. Styles in CSS In CSS, style attributes belong to the HTML element. They can be defined once – either in the head of a document or in a separate style sheet document – and referenced whenever needed. So if this represents my standard body text style: Hi! Hi! I can simply define the tag to display all text as sans-serif, in the point size I want…

15. Styles in CSS, 2 I can simply define the tag to display all text as sans-serif, in the point size I want… P{ font-family: Helvetica, Sans-Serif; font size: 9pt; }

16. The Logic of Styles in CSS CSS allows you to attach display information to most HTML elements. A CSS rule is the basic unit of a style sheet. A rule first names an HTML element (like a body text paragraph ) and then describes how that element should display. Thus, a rule contains a selector and a declaration.

17. Types of style sheets ► CSS defines 3 essential style sheets ► Inline ► Embedded ► Linked

18. Inline style ► Inline uses the style= attribute Here’s a paragraph with 28pt font size. </p> ► Controls style on an element basis

19. Embedded style 1 ► Embedded uses tags in the head of a document ► Controls style on a page basis ► Use to protect browsers that don’t recognize tags

20. Embedded style 2 <!-- <!-- h2 { font-type: Arial,sans serif; font- size: 40pt; font-weight: bold } h2 { font-type: Arial,sans serif; font- size: 40pt; font-weight: bold } --> -->

21. Linked style ► Linked style uses same syntax as embedded style but is in a separate.css file that you link to from the HTML file requesting the style ► Controls style more globally, spanning documents or an entire Web site

22. Linked style 2 ► HTML file using the linked style uses tag within tag to link to it <html><head>

23. Linked style 3 ► Here’s the style definition in the linked_style.css file h1 { font-family: Arial,sans-serif; font-size: 48pt; font-weight: bold }

24. Style hierarchy ► Style sheets work together in a cascading manner ► Inline trumps embedded and linked ► Embedded trumps linked ► So use linked for global, generic types of things and keep to a minimum ► Use other 2 types for fine tuning

25. CSS Syntax CSS rules have the following structure: selector {property1 : value; property2 : value} P {font-family : sans-serif; font size : 9} With this rule applied, everything enclosed by a tag will display in sans-serif, 9pt. Did he say enclosed ?

26. CSS will make your old HTML look uhhhhgly! CSS references objects – in most cases, chunks of text or images enclosed by tags – so you must define as an object any text that you want to reference in a style sheet. This means: You have to close those tags to form the boundaries of the object being styled!

27. CSS will make your old HTML look uhhhhgly, 2 It also means… You define object Classes, ID’s and learn their properties and value ranges You define object Classes, ID’s and learn their properties and value ranges You learn to use wildcard tags like and to define sub-sections of text within the body of a document You learn to use wildcard tags like and to define sub-sections of text within the body of a document You have to get good at designing documents…thinking ahead what will help both content developers and readers You have to get good at designing documents…thinking ahead what will help both content developers and readers

28. CSS Classes…naming objects In CSS, a class refers to a particular category of a more general tag. Let’ say you wanted odd and even table cells to be different colors for easier scanning… TD {font-face : sans-serif; font-size : 12pt}.even {bgcolor : #FFFFFF}.odd {bgcolor : #CCCCCC}

29. CSS Classes…cont. In your HTML code for the table, you simply reference the class to invoke the style: display this text with a white background display this text with a white background and this text with a grey background and this text with a grey background TD {font-face : sans-serif; font-size : 12pt}.even {background-color : #FFFFFF}.odd {background-color : #CCCCCC}

30. Getting more specific…ID’s You can set ID’s for specific kinds of objects too by giving them a unique ID name and set of display rules. Let’s say, for example, we want a table row that serves as a column header… it could be different than our odd or even classes of rows and even different from our default row look.

31. An ID rule Here, I have added a new ID to our TR rules Now, I can specify a row as a header: Red, sans-serif, 12pt type on a white background, por favor Red, sans-serif, 12pt type on a white background, por favor TR {font-face : sans-serif; font-size : 12pt}.even {background-color : #FFFFFF}.odd {background-color : #CCCCCC} #header {color : red}

32. & are your friends & are your friends and tags allow you to define exceptions to the general rules of your body text…and they are helpful tools for document designers and web developers and tags allow you to define exceptions to the general rules of your body text…and they are helpful tools for document designers and web developers is usually used to designate styles for block elements that should stand apart from the body text…like callout quotes. Everything inside a tag takes on the attributes…and you can specify classes and ids for too! is usually used to designate styles for block elements that should stand apart from the body text…like callout quotes. Everything inside a tag takes on the attributes…and you can specify classes and ids for too!

33. More on More on The tag is usually used to change the display attributes of a short run of text or objects within a block-level element (such as a paragraph or table cell). I might use, for example, to define a look for code examples (like the one below) that is different than the body text… TR {font-face : sans-serif; font size : 12pt} TR {font-face : sans-serif; font size : 12pt}

34. and dynamic html and dynamic html It is common to use tags to structure content for dynamic display. For example, you can have two chunks of information that occupy the space allocated for a section called, and switch these out depending on some user-initiated event (such as loading the page with IE vs. Netscape browser).

35. Seeing a document as a collection of objects… All of these tags, attributes, rules, selectors, declarations…what do they mean for information designers? They are all tools you use well ONLY if you can start to see a document as a collection of objects…so, let’s practice.

36. Workshop Time!

37. Take a look at a short but familiar genre…choose one you can see a few examples for easily such as a Job Ad. Break it up into the objects that would have to be defined in a style sheet…don’t worry about the right syntax too much at this point…concentrate on defining objects, attributes, etc…AND

38. Next Time… ► Editorial board for our ‘zine ► Read Carliner (pdf); Mazur (in optional text Albers & Mazur) ► Send me an e-mail with your p1 topic idea! (in the form of a question please, Alex)