building a site - harvard universitycscie12.dce.harvard.edu/lecture_notes/2006-07/20070306.pdf ·...

Building a Site http://localhost:8080/cocoon/projects/cscie12/slides/20070306/handout.html

1 of 108 3/7/2007 9:17 AM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Building a SiteMarch 6, 2007

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2007 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 108 3/7/2007 9:17 AM

Upcoming Schedule

6-March: CSS Wrap-up; Building a Site; Accessibility13-March: Images; Forms20-March: AJAX, JavaScript & Mashups27-March: Spring Break, March 25 to April 13-April: Video and Multimedia, guest lecture by Larry Bouthillier (http://www.learningapi.com/blog/)


3 of 108 3/7/2007 9:17 AM

CSS Resources

Dan Cederholm

Westciv: CSS and web standards tutorialsPublications from Dan Cederholm from SimpleBits

Eric Meyer

meyerweb.comEric Meyer CSS Workcss / edge

Books

CSS Cookbook by Christopher SchmittCascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert BosCascading Style Sheets: The Definitive Guide, 3rd Edition by Eric Meyer Eric Meyer on CSS and More Eric Meyer on CSSWeb Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Specifications / Resources

W3C Cascading Style SheetsCascading Style Sheets, Level 1Cascading Style Sheets, Level 2Cascading Style Sheets 2.1W3C CSS Validation ServiceW3C Core Styles


4 of 108 3/7/2007 9:17 AM

media selector

CSS2 defines a media selector for different media types.

Incorporate as part of the "link" element:

Or, use "@media" selector in style rule:

allSuitable for all devices.

brailleIntended for braille tactile feedback devices.

embossedIntended for paged braille printers.

handheldIntended for handheld devices (typically small screen, limited bandwidth).

printIntended for paged material and for documents viewed on screen in print preview mode.

projectionIntended for projected presentations, for example projectors.

screenIntended primarily for color computer screens.

speechIntended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for thispurpose.

ttyIntended for media using a fixed-pitch character grid (such as teletypes, terminals, orportable devices with limited display capabilities).

tvIntended for television-type devices (low resolution, color, limited-scrollability screens, soundavailable).

Print CSS

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> 1.<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 2.

@media print { 1. body { 2. font-size: 10pt; 3. } 4.} 5.@media screen { 6. body { 7. font-size: 12pt; 8. } 9.} 10.@media print { 11. div.navigation { 12. display: none; 13. } 14. hr { 15. page-break-after: always; 16. } 17.} 18.


5 of 108 3/7/2007 9:17 AM

CSS Print Profile deals with paged media.

The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos was printed using CSS.

See A List Apart: Articles: Printing a Book with CSS: Boom!


6 of 108 3/7/2007 9:17 AM

Harvard College Funding Database

Screen display (screen.css):

Print display (print.css):

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> 1.<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 2.

7 of 108 3/7/2007 9:17 AM


8 of 108 3/7/2007 9:17 AM

Yahoo! UI Library

Yahoo! User Interface LibraryYUI Grids CSS

Examples

GridsNested grid: 3/4, 1/4

reset-fonts-grids-min.css

provides gridsremoves "all" formatting

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd1.<html> 2.<head> 3. <title>Grids CSS Example - YUI Grids</title> 4. <link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fon5.</head> 6. 7.<body id="yahoo-com"> 8.<div id="doc" class="yui-t1"> 9. <div id="hd"> 10. <p>MASTHEAD: ... 11. </div> 12. <div id="bd"> 13. <div id="yui-main"> 14. <div class="yui-b"> 15. <div class="yui-ge"> 16. <div class="yui-u first"> 17. <p>Lorem ipsum dolor sit amet...</p> 18. </div> 19. 20. <div class="yui-u"> 21. <p>Lorem ipsum dolor sit amet...</p> 22. </div> 23. </div> 24. </div> 25. </div> 26. <div class="yui-b"> 27. <p>SECONDARY: Lorem ipsum dolor sit amet...</p> 28. </div> 29. </div> 30. <div id="ft"> 31. <p>FOOTER: Lorem ipsum dolor sit amet...</p> 32. </div> 33.</div> 34.</body> 35.</html> 36. 37.


9 of 108 3/7/2007 9:17 AM

CSS Applied to Harvard Homepage

Harvard Home Page Tables exposed:


10 of 108 3/7/2007 9:17 AM

The Transformation

Beginnings of Harvard Homepage with CSS

Current After MarkupSepa

Screenshot

Markup Type HTML 4.01 Transitional 53 validation errors

XHTML 1.0 Strict

Markup Size 26.1 k 6.9 k

Markup (after 'tidy')

380 lines 134 lines

Document dependencies 1 HTML

48 images1 XHTML11 images2 CSS

Total document

weight

226 k 83 k

Elementselements: 314 a 60 b 15 body 1 br 9 center 2

elements: 148 a 50 body 1 br 1 div 21 h1 1


11 of 108 3/7/2007 9:17 AM

div 1 font 10 head 1 hr 6 html 1 img 61 meta 3 p 9 script 1 table 16 td 85 title 1 tr 32attributes: 588

h2 2 h3 1 head 1 html 1 img 4 li 43 link 1 meta 1 p 9 title 1 ul 10attributes: 106

Assets

XHTMLharvardhomepage/harvard_css.html

Imagesharvardhomepage/images/memorial_hall.pngharvardhomepage/images/crimson_background2.pngharvardhomepage/images/stiller.jpgharvardhomepage/images/painrelievers.jpgharvardhomepage/images/veritas.pngharvardhomepage/images/faust.pngharvardhomepage/images/research.pngharvardhomepage/images/bullet-whiteoncrimson.pngharvardhomepage/images/bullet.pngharvardhomepage/images/multimedia.pngharvardhomepage/images/events.png

CSSharvardhomepage/custom.cssharvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css


12 of 108 3/7/2007 9:17 AM

Homepage Sections

Homepage

As Markup


13 of 108 3/7/2007 9:17 AM


14 of 108 3/7/2007 9:17 AM


15 of 108 3/7/2007 9:17 AM

Stages

YUI Grid TemplateXHTMLCSSYUI CSS

Styles for #doc, #ht, and #ftXHTMLCSS


16 of 108 3/7/2007 9:17 AM

Styles for Navigation ListsXHTMLCSS

Styles for contentXHTMLCSS


17 of 108 3/7/2007 9:17 AM


18 of 108 3/7/2007 9:17 AM

Building a Web Site

The SiteInformation gathering and organizationSite and Page DesignImplementationMaintenance


19 of 108 3/7/2007 9:17 AM

Design and Usability Resources

Online

Web Style Guide, 2nd EditionJakob Nielsen's Useit.com

Jakob Nielsen's Alertbox ColumnUser Interface Engineering (UIE)

Jakob Nielsen's Useit.com and Alertbox

Useit.com: Alertbox

Usability 101: Introduction to UsabilityTop Ten Mistakes of Web DesignTop Ten Web Design Mistakes of 2005The Need for Web Design StandardsTop Ten Web Design Mistakes of 2003Ten Most Violated Homepage Design Guidelines, November 2003Top Ten Web Design Mistakes of 2002Top Ten Guidelines for Homepage Usability, May 2002Ten Good Deeds in Web Design, October 1999The Top Ten New Mistakes of Web Design, May 1999


20 of 108 3/7/2007 9:17 AM

Building a Web Site

Audience and GoalsContent and OrganizationSite and Page Design


21 of 108 3/7/2007 9:17 AM

Audience and Goals

Why are you building the site? Who are you buliding the site for?

Most sites get a variety of usersSome audiences will be "primary", others "secondary"What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.


22 of 108 3/7/2007 9:17 AM

Michigan State University

What audiences can be identified?


23 of 108 3/7/2007 9:17 AM

Audience

Who are they?language, vocabularytechnology profileWeb experience

What are their goals?What are their information needs?What are they trying to do?

Know Your Audience

User testing, market research, focus groups. Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 UsersBe clear on who you are building for. Anticipate their needs.Feedback from users - chew before you swallow!Alertbox: First Rule of Usability? Don't Listen to UsersAs target audiences increase, difficulty of Web design increases.


24 of 108 3/7/2007 9:17 AM

Typical Audiences for an Academic Department

Undergraduate StudentsConcentratorsPotential concentratorsNon-concentrators

Graduate StudentsPotential Graduate StudentsFaculty

CurrentPotential

ResearchersPublic


25 of 108 3/7/2007 9:17 AM

Content and Organization

What information is on the site?How will it be organized?

Content

What content already exists in other media types (brochures, pamphlets, statements, etc.).What content would be good to develop for the site?

Does it fit purpose of site?Does it suit the audience?Why would people come to see this item?

Define incremental goalsWhat should be published first?What can come later stages?

Organization of Content

From Information Architecture for the World Wide Web:

information architecture defined:

The combination of organization, labeling, and navigation schemes within an information system.

1.

The structural design of an information space to facilitate task completion and intuitive access to content.

2.

The art and science of structuring and classifying web sites and intranets to help people find and manage information.

3.

An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

4.

Organize/CategorizeLabelNavigate


26 of 108 3/7/2007 9:17 AM

Organize and Label

Organize

Hi-tech tools are a mustSticky-notes or Index cardsWhiteboard

Categories, sub-categories, etc.Don't be too deep or too shallowAim for 3 to 7 (could go higher) categories per level

Plan for future growth

Label

Know your audienceTest your labels (ask your audience)

Where can I get a driver for my HP8500N?What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?What IT degree programs are available?


27 of 108 3/7/2007 9:17 AM

Too deep or too shallow?


28 of 108 3/7/2007 9:17 AM

The "Miscellaneous" category

Categories have Failed. Try again.Content can be in multiple categories or linked to from multiple categories


29 of 108 3/7/2007 9:17 AM

Categories and Labels from News Sites

CBS

CNN

Fox News

ABC News MSNBC NPR CNN


30 of 108 3/7/2007 9:17 AM


31 of 108 3/7/2007 9:17 AM

The Web Site

The Web site is not just like a brochure or book, it is also like a piece of software.Visitors must learn the interface of your site.

See Jakob Nielsen's End of Web Design.Keep in mind Jakob's Law of the Internet User Experience:Users spend most of their time on other sites.


32 of 108 3/7/2007 9:17 AM

Organization

HierarchicalSequential"Webs"

Reading Suggestion: Ontology is Overrated: Categories, Links, and Tags by Clay Shirkey


33 of 108 3/7/2007 9:17 AM

Hierarchical

Library of Congress Classification Outline

"Q" - Science

Open Directory Project


34 of 108 3/7/2007 9:17 AM


35 of 108 3/7/2007 9:17 AM

Sequential

When order is important or part of presentation.Useful when "workflow" is important in web applications.


36 of 108 3/7/2007 9:17 AM

Webs

Wikipedia.com


37 of 108 3/7/2007 9:17 AM

Site Architecture

Topics

Audience

Task-oriented


38 of 108 3/7/2007 9:17 AM

Internal Organization Structure

Search


39 of 108 3/7/2007 9:17 AM

Multiple Architectures

Often a site may need to have multiple architectures.


40 of 108 3/7/2007 9:17 AM

Michigan State


41 of 108 3/7/2007 9:17 AM

IBM


42 of 108 3/7/2007 9:17 AM

Hewlett Packard


43 of 108 3/7/2007 9:17 AM

Site Architecture

Critical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites


44 of 108 3/7/2007 9:17 AM

Navigation Systems

Where am I?Where can I go?

What is close by?What is further away?

Where have I been?


45 of 108 3/7/2007 9:17 AM

Harvard College

Main Sections

Current Page and Section


46 of 108 3/7/2007 9:17 AM


47 of 108 3/7/2007 9:17 AM

More within Current Section


48 of 108 3/7/2007 9:17 AM

Global Navigation

Appears on every inner page.

Quicklinks


49 of 108 3/7/2007 9:17 AM

Bread Crumb navigation

"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

DMOZ

Construction Projects at FAS, Harvard University


50 of 108 3/7/2007 9:17 AM

Clamshell navigation

O'Reilly Safari Harvard College


51 of 108 3/7/2007 9:17 AM

Links

Pay attention to the scent of the site's links.

Links within navigation and content must be:

Predictable Am I getting 'closer' to my goal?Differentiable What is the difference between clicking here or clicking there?

When creating links:

Be descriptiveDon't lie

Your links should have scent, and on a related note, your site should suck.


52 of 108 3/7/2007 9:17 AM

Please don't "Click Here"

Click here to go to the course home page.Click here to go to the course syllabus page.Click here to go to the course schedule page.Click here to go to the course assignment page.

To go to the course home page click here.To go to the course syllabus page click here.To go to the course schedule page click here.To go to the course assignment page click here.

Better...

The CSCI E-12 web site contains the syllabus, schedule, and assignments.

The CSCI E-12 web site contains:

syllabusscheduleassignments


53 of 108 3/7/2007 9:17 AM

Use "title" attribute

Title attribute can add information so that the link is more predictable and able to be differentiated from others.

Example 6.1

Example 6.1 Source:

Example 6.1 Rendered:

Dean Harry Lewis spoke at morning prayers at Harvard College in February 2003.

<p><a href="http://www.college.harvard.edu/deans_office/dean_lewis/morningprayer_2_2003.1. at <a href="http://www.memorialchurch.harvard.edu/services/morningprayers.shtml" titl2. at <a href="http://www.college.harvard.edu" title="Harvard College Home Page" >Harvar3. in February 2003.</p> 4.


54 of 108 3/7/2007 9:17 AM

Deep Linking

Link directly to content within a site.Support deep linking to your site.

Alertbox: Deep Linking is Good Linking

Example 6.2

Example 6.2 Source:


Regster for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".

Example 6.3

Example 6.3 Source:


Register for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".

<a href="http://www.summer.harvard.edu/2006/register/default.jsp" >Regster for Harvard S1.CSCI S-L, "Advanced Web Development Using XML"</a>. 2.

<a href="http://www.summer.harvard.edu/" >Register for Harvard Summer School</a> so you 1.CSCI S-L, "Advanced Web Development Using XML"</a>. 2.


55 of 108 3/7/2007 9:17 AM

Every Page Needs

TitleCreator (person or institution)Creation or Revision dateLink to home pageURL of page (or at least home page)


56 of 108 3/7/2007 9:17 AM

Importance of a Good Title

BrowserBookmarksHistoryWindow Title

Search Engine results

Search for "Untitled" in "title" element:


57 of 108 3/7/2007 9:17 AM

Search Engines

titlemeta descriptionmeta keywords

<head> <title>Harvard College Admissions Office</title> <meta name="keywords" content="harvard admissions, harvard college admissions, harvard admissions office, harvard college admissions office, harvard undergraduate admissions, harvard undergrad admissions, harvard undergraduate admissions office, visiting harvard, visiting harvard university, harvard university admissions, harvard university undergraduate admissions, harvard college, travel to harvard" /> <meta name="description" content="The main website for the Harvard College Admissions Office which oversees undergraduate admissions for Harvard University." /></head>


58 of 108 3/7/2007 9:17 AM

Visual Design

LogoTitleNavigationContent


59 of 108 3/7/2007 9:17 AM

Creating Content

People scanWeb content. Content designed for print publications will need to be made Web-friendly:

Information needs to be "chunked"For existing print content, reduce word count by 50%Use bullet lists, subheadingsAdd appropriate hyperlinksProvide print-friendly (either PDF or HTML) versions for certain documents


60 of 108 3/7/2007 9:17 AM

Technology Constraints

monitorbrowserinternet connection speedplugins


61 of 108 3/7/2007 9:17 AM

Design "Above the Fold"

Check your pages for several window sizes:

640 x 480800 x 6001024 x 7681280 x 1024


62 of 108 3/7/2007 9:17 AM

Below the Fold

Above the fold:

Below the fold:


63 of 108 3/7/2007 9:17 AM

and below...


64 of 108 3/7/2007 9:17 AM


65 of 108 3/7/2007 9:17 AM

Below the Fold, Part 2

Above the fold:

Below the fold:


66 of 108 3/7/2007 9:17 AM


67 of 108 3/7/2007 9:17 AM

Page Design: Fixed or Variable Width?

Printing: 560 pixels maximum for fixed widthReading: about the sameAvoid horizontal scrollingVariable width does not waste space, but may make text lines too long.

CNN - fixed table width


68 of 108 3/7/2007 9:17 AM

W3C - flexible table width


69 of 108 3/7/2007 9:17 AM


70 of 108 3/7/2007 9:17 AM

Page Weight

Take advantage of client-side caching: re-use URLs for CSS, images, javascript throughout theside.

Decide on per page kilobyte budget (30kb, 40kb, 50kb, etc.) which reflects your audience.


71 of 108 3/7/2007 9:17 AM

URLs as UI

File structure should resemble site organization.For some users, your URL can also function as a user-interface. (Alertbox: URL as UI)

http://www.adobe.com/software/dreamweaver/http://www.adobe.com/software/fireworks/http://www.adobe.com/software/flash/http://www.adobe.com/software/homesite/

Keep to less than 72 characters so that it doesn't "wrap" in an email or when printed.Often "advertised" or "published" URLs will be short and easy to remember. TheseURLs can be redirected to the true resource via Apache Redirect or Rewrite directivesOr use something like TinyURL.com


72 of 108 3/7/2007 9:17 AM

Homepage is often a different beast

Boeing


73 of 108 3/7/2007 9:17 AM

Harvard College


74 of 108 3/7/2007 9:17 AM


75 of 108 3/7/2007 9:17 AM


76 of 108 3/7/2007 9:17 AM

An Aside: The Wayback Machine

Internet Archive Wayback Machine


77 of 108 3/7/2007 9:17 AM

Southwest Airlines

Southwest Airlines, 1998




78 of 108 3/7/2007 9:17 AM



79 of 108 3/7/2007 9:17 AM

Commonwealth of Massachusetts

1998

1999


80 of 108 3/7/2007 9:17 AM

2002


81 of 108 3/7/2007 9:17 AM

2003


82 of 108 3/7/2007 9:17 AM

2004


83 of 108 3/7/2007 9:17 AM

2005


84 of 108 3/7/2007 9:17 AM


85 of 108 3/7/2007 9:17 AM

Internal Revenue Service

2001

2003


86 of 108 3/7/2007 9:17 AM

2005


87 of 108 3/7/2007 9:17 AM


88 of 108 3/7/2007 9:17 AM

Boston.com

1997

1999


89 of 108 3/7/2007 9:17 AM

2001


90 of 108 3/7/2007 9:17 AM

2002


91 of 108 3/7/2007 9:17 AM

2003


92 of 108 3/7/2007 9:17 AM

2004


93 of 108 3/7/2007 9:17 AM

2005


94 of 108 3/7/2007 9:17 AM


95 of 108 3/7/2007 9:17 AM

Accessibility

"The power of the Web is in its universality. Access by everyone regardless ofdisability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Two initiatives to be aware of:

W3C Web Accessibility Initiative (WAI)United States Government Section 508


96 of 108 3/7/2007 9:17 AM

W3C Web Accessibility Initiative (WAI)

W3C's Web Accessibility Initiative (WAI)http://www.w3.org/WAI/

WAI Resources on Introducing Web AccessibilityQuick Tips to Make Accessible Web Sites

The Details

Web Content Accessibility Guidelines 2.0 (WCAG 2.0), in progressWeb Content Acccessibility Guidelines 1.0 (WCAG 1.0)http://www.w3.org/TR/WAI-WEBCONTENTTechniques for Web Content Accessibility 1.0http://www.w3.org/TR/WAI-WEBCONTENT-TECHSList of Checkpoints for Web Content Accessibillity Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/checkpoint-listChecklist of Checkpoints for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/full-checklist


97 of 108 3/7/2007 9:17 AM

W3C WAI Guidelines: Themes

Ensuring Graceful Transformation Guidelines 1 to 11Making Content Understandable and Navigable Guidelines 12 to 14


98 of 108 3/7/2007 9:17 AM

W3C WAI Guidelines

14 Guidelines

Three levels of conformance:

Priority 1: must 16 checkpoints

Priority 2: should 30 checkpoints

Priority 3: may 19 checkpoints


99 of 108 3/7/2007 9:17 AM

10 Quick Tips to Make Accessible Web Sites from the W3C

This content taken from WAI, Quick Tips to Make Accessible Web Sites, http://www.w3.org/WAI/References/QuickTips/Overview.php

The links in the Quick Tips below mostly go to the techniques documents that provideimplementation guidance - including explanations, strategies, and detailed markup examples.

Images & animations: Use the alt attribute to describe the function of each visual.1.Image maps. Use the client-side map and text for hotspots.2.Multimedia. Provide captioning and transcripts of audio, and descriptions of video.3.Hypertext links.Use text that makes sense when read out of context. For example, avoid "click here."

4.

Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

5.

Graphs & charts. Summarize or use the longdesc attribute.6.Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.

7.

Frames. Use the noframes element and meaningful titles.8.Tables. Make line-by-line reading sensible. Summarize.9.Check your work. Validate. Use tools, checklist, and guidelines athttp://www.w3.org/TR/WCAG

10.

© W3C (MIT, INRIA, Keio) 2001/01


100 of 108 3/7/2007 9:17 AM

Section 508

United States Federal Government Section 508: "The Road to Accessibility"http://www.section508.gov/


101 of 108 3/7/2007 9:17 AM

Accessibility Implementation

OrganizationsW3C WAICenter for Applied Special Technology (CAST)Web Accessibility in Mind (WebAIM)

Tools and ResourcesResource List: WAI ResourcesOpera Browser: Using Opera to Check for AccessibilityTool: WAVE 3.0 from WebAIMTool: WebXACT from Watchfire


102 of 108 3/7/2007 9:17 AM

Example: ready.gov

Ready.gov: From the U.S. Department of Homeland Security

Another Technique

Use CSS to move text "off" the screen (a negative position).


103 of 108 3/7/2007 9:17 AM

Text View

Opera User Style Sheet, "Text" view:

<body><a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a><a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a>



104 of 108 3/7/2007 9:17 AM

High Contrast View

Opera User Style Sheet, "High Contrast (W/B)" view:



105 of 108 3/7/2007 9:17 AM

Images Off

Images disabled (Opera or Firefox Web Developer Extension)



106 of 108 3/7/2007 9:17 AM

Small Screen

Opera "small screen" view


107 of 108 3/7/2007 9:17 AM


108 of 108 3/7/2007 9:17 AM


Table of Contents | All Slides | Link List | Examples | CSCI E-12

building a site - harvard universitycscie12.dce.harvard.edu/lecture_notes/2006-07/20070306.pdf ·...

Documents