Advanced Content Development for the WWW

observancecookieΑσφάλεια

5 Νοε 2013 (πριν από 4 χρόνια και 1 μήνα)

153 εμφανίσεις

Advanced
Technical
Writing


2006

Session #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

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.

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?”

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

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

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

Did that last bit of jargon confuse you?

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.

On Cascading Style Sheets

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.

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)

Styles in HTML

In older versions of html, style attributes that
describe how text or other elements should
display are wrapped around text, thus:


<font face=“sans
-
serif” size=“
-
2”>Hi!</font>


Problems arise when you need to change
styles frequently!

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

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:

<font face=“sans
-
serif” size=“
-
2”>Hi!</font>


I can simply define the <P> tag to display all text
as sans
-
serif, in the point size I want…

Styles in CSS, 2

I can simply define the <P> tag to display
all text as sans
-
serif, in the point size I
want…

P

{

font
-
family: Helvetica, Sans
-
Serif;

font size: 9pt;

}

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 <p>) and then describes how that element
should display.


Thus, a rule contains a
selector

and a
declaration
.

Types of style sheets



CSS defines 3 essential style sheets


Inline


Embedded


Linked

Inline style


Inline uses the style= attribute

<p style="font
-
family: Arial,sans
-
serif; font
size: 28pt;">

Here’s a paragraph with 28pt font size.

</p>


Controls style on an element basis

Embedded style 1


Embedded uses <style></style> tags in the
head of a document


Controls style on a page basis


Use <!
--

--
> to protect browsers that don’t
recognize <style> tags

Embedded style 2


<html><head>


<style>


<!
--


h2 { font
-
type: Arial,sans serif; font
-
size: 40pt; font
-
weight: bold }


--
>


</style>



</head><body></body></html>

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

Linked style 2


HTML file using the linked style uses <link>
tag within <head> tag to link to it



<html><head>


<link rel="stylesheet" type="text/css"
href="linked_style.css">

</head>

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 }

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


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
<p></p> tag will display in sans
-
serif, 9pt.

Did he
say
enclosed
?

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 <p> tags to
form the boundaries of the object being
styled!

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 learn to use wildcard tags like <div> and <span>
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

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}



CSS Classes…cont.

In your HTML code for the table, you simply
reference the class to invoke the style:

<td class=“even”>display this text with a white
background</td>

<td class=“odd”>and this text with a grey
background</td>


TD {font
-
face : sans
-
serif; font
-
size : 12pt}

.even {background
-
color : #FFFFFF}

.odd {background
-
color : #CCCCCC}

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.


An ID rule

Here, I have added a new ID to our TR rules






Now, I can specify a row as a header:

<tr id=“header”>Red, sans
-
serif, 12pt type on a white
background, por favor</tr>



TR {font
-
face : sans
-
serif; font
-
size : 12pt}

.even {background
-
color : #FFFFFF}

.odd {background
-
color : #CCCCCC}

#header {color : red}

<DIV> & <SPAN> are your
friends

<div> and <span> 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


<div> is usually used to designate styles for block
elements that should stand apart from the body
text…like callout quotes. Everything inside a <div>
tag takes on the <div> attributes…and you can
specify classes and ids for <div> too!


More on <SPAN>

The <span> 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 <span>, for example, to define a look for
code examples (like the one below) that is different
than the body text…

<span class=“example”>TR {font
-
face : sans
-
serif; font size :
12pt}</span>



<DIV> and dynamic html

It is common to use <div> 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
<DIV class=“introduction”>, and switch these out
depending on some user
-
initiated event (such as
loading the page with IE vs. Netscape browser).


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.



Workshop Time!

Workshop Time!

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


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)