Class 3 – Acquiring and managing resources
Exercise overview
Last week we explored information seeking behavior models and began thinking about the
relationship between users, information and digital environments. We looked at Information
Architecture briefly and explored the role that information organization plays in constructing
information systems. We began a process that we will continue for a large part of the semester pairing a technology with a concept, theory or business practice related to information infrastructures.
This week we will do this by exploring the world of resource acquisitions alongside an expansion of
our understanding of HTML. In doing so we will use our foundational understanding of digital
documents and begin working with information system design with a focus on leveraging digital
document and metadata to create useable documents. We will work with metadata schema and
JavaScript to create a simple web-based service and will use digital documents using HTML and CSS
as the building blocks for understanding the relationships between information architecture and
information design.
Instructions:
Work individually or in groups to complete the worksheet. When you get to a section that requires
you to select a resource to explore – pick one resource (please don’t always choose the first one!).
When asked to ‘discuss as a group’, consider your response and continue completing the worksheet.
We’re going to work with computer coding today and here’s an important note as you follow
the exercises. Computer code is shown on numbered lines and are enclosed in boxes. The
numbered lines are simply to help as a reference during instruction and should not be copied into
your program. For example a line that reads 56. p { visibility:hidden; } should simply be typed in as
p { visibility:hidden; }
Metadata Standards and Web Services
Erik Mitchell
Page 1
Suggested Readings
1. Mitchell, E. (2015). Chapter 3 in Metadata Standards and Web Services in Libraries, Archives, and Museums.
Libraries Unlimited. Santa Barbara, CA.
2. Read: Kernighan, B. (2011). D is for Digital. , Chapter 7: Learning to Program
3. Read: Sheila Corral, The Concept of Collection Development in the Digital World, Chapter 1, in Maggie Fieldhouse
and Audrey Marshall, eds. Collection Development in the Digital Age. Great Britain: Facet Publishing, 2012 pp. 3-26.
4. Read Introduction, Literature review, Skim remainder of the article. Cynthia K. Sauer, Doing the Best We Can? The
Use of Collection Development Policies and Cooperative Collecting Activities at Manuscript Repositories, American
Archivist 64(2)308-349, 2001. Available at: http://archivists.metapress.com/content/gj6771215231xm37/fulltext.pdf
Optional readings
5. C. M. Sperberg-McQueen and David Dubin, Data Representation, DH Curation Guide.
http://guide.dhcuration.org/representation/
Discussion of readings
Exploration of Collection management processes, issues, and trends
Libraries, Archives, Schools and Museums each focus on the acquisition and management of
different categories of resources. Generally speaking this difference may not be as much in the type
(e.g. book, journal, magazine, e-resource, media) but rather in the policies that drive the development
of the collection and the overall mission of the institution. School libraries for example serve a
different mission and clientele than do academic libraries and Archives tend to collect unique
resources with an eye on long-term preservation while public libraries often focus on acquiring
resources to serve the immediate needs of their community.
If you have not already, read the Corral and Sauer readings and come back to the worksheet. These
articles mention a wide range of issues, trends and collection management activities.
Select a single activity and answer the following questions
Key Questions
Question 1. What issue/trend/activity did you select?
Metadata Standards and Web Services
Erik Mitchell
Page 2
Question 2. Which type of institution (e.g. Library, Archive, School, Museum) does the
issue/trend/activity mostly apply to? Why?
Question 3. Write down a 1 sentence description of the issue/trend/activity
The relationship between collections and information systems
In this class we consider two parallel themes, information about collection management, including
document management, and information about the design of digital documents themselves. In
learning about collection management in LASM institutions we will get a more holistic understanding
of the factors that influence how and why we manage our collections. In becoming familiar with this
process we discover that our information systems and documents are tightly woven together and that
creating information infrastructures that help us manage our resources throughout the information
lifecycle and collection management process is a detailed process. Reflect for a moment on the
following collection management process and answer the questions related to the issue/trend/activity
you studied above
Metadata Standards and Web Services
Erik Mitchell
Page 3
Figure 1 Collection management process
Metadata Standards and Web Services
Erik Mitchell
Page 4
Figure 2 LASM information systems
Question 4. What processes are most impacted by your issue/trend/activity? Why?
Question 5. What information systems are most important in your issue/trend/activity?
Question 6. How has your issue/trend/activity changed over the last 5 years. How will it change
these processes/systems the next 5 years?
Spend a few minutes connecting steps in the collection management process with the information
systems commonly used with these processes using Table 1. If this looks needlessly complex you
are on the right track. There is a trend towards system interoperability simplification in LASM
information system design. At the moment the profession is in a gap between these new systems
that streamline interoperability and information sharing either through unified deployment on a cloudbased platform or through the use of new design techniques that facilitate implementation of
information systems using business process modeling. Ultimately however, this work is made
Metadata Standards and Web Services
Erik Mitchell
Page 5
complex by the fact that LASM institutions are charged with information management in a way that is
fundamentally different from other institutions. LASM institutions are called on to be customers of
information producers, managers of a diverse set of resources, public service agents to our
communities, appraisers of value for our collections and, of course, preservers of information
resources. Ensuring that we have good processes and systems to support this work is definitely a
non-trivial process!
Table 1 Table of CM processes and related information systems
CM Process
Information system types
Appraise
See data gathering - appraisal systems may include reports that focus on patron use, resource
value, content fit or other measure of alignment with institutional mission or operational goals
Select
Miscellaneous systems including book reviews, approval plans, collection development policies.
May use an Electronic Resource Management System (ERMS)
Acquire, License
ERMS, Vendor websites, often the Integrated Library System (ILS) for 'traditional' purchasing.
Receive, Process
ILS, external vendor databases for metadata records, ERMS for electronic records, Binding platform
for print journals that need to be gathered into volumes
Store
Institutional Repository (IR) for locally created documents/scholarship, Digital and print archives for
storage of master objects, High Density Storage Systems (HDSS) both physical and virtual
resources, book shelves for print
Provide Access
Discovery platforms, may include locally hosted or cloud-based services, OpenURL resolvers,
Interlibrary Loan and other resource sharing systems
Preserve/Conserve
Print preservation usually involves a preservation/conservation lab, preservation in digital arena
includes use of automated digital object verification tools including backup, version control, bitchecking software (e.g. Jhove)
Gather Data
Materials use databases often located within other systems including ILS (print) e-stats systems
(electronci COUNTER/SUSHI) or web analytics systems (e.g. Google Analytics).
Metadata Standards and Web Services
Erik Mitchell
Page 6
Collection management wrap-up
At the end of the day, collection management involves similar issues for libraries, archives, schools
and museums (LASM). Given constrained resources LASM institutions need to scope their collection
development and acquisition processes to an institutional mission, needs of patrons and patron
groups or in support of academic programs. At times LASM institutions have their collection
management practices shaped by donors either through funding of through direct gift of collections.
While donor support can be a good thing it can also create difficulties in ongoing collection
management and organizational missions for the LASM institution.
Another key factor impacting collection management practice is the shift from print to electronic
formats. This shift has required the development of licensing and copyright expertise in LASM
professionals, has shaped the strategic planning of LASM institutions at every level (e.g. planning for
space, services, financial sustainability, community outreach) and has required new professional
literacies to make it possible for librarians and archivists to acquire, process, provide access to,
preserve and evaluate these resources.
At its core, these literacies require that LASM professionals have an in depth understanding of how
digital documents are created and what information systems are required throughout the document's
lifecycle.
Exploring the connection between document structure and use
Documents can be divided into discrete subcomponents according to its intellectual content.
Encoding systems then allow you to control the content representation, content layout and formatting,
interactivity.
A few important details on HTML
HTML documents, jpg images, audio files, and other text and medial documents, when made
available via a special application known as a web server, will form a website. In essence, a website
Metadata Standards and Web Services
Erik Mitchell
Page 7
is nothing more than a collection of documents that are linked together using the <a> or anchor
element. These documents commonly live together on a single file system but as you know from
your own use of the web it is very common for links to point to other servers and websites. In fact,
this widespread inter-linking of pages is what makes the web work. Much like Bate's Berrypicking
model users and computers traverse the web by clicking on links embedded in documents
Let's resume our tour of HTML this week by creating two webpages that link to one another. Open a
text or code editor and create the two documents.
Figure 3 Save this document as myfirstpage.html
1. <html>
2. <body>
3. <h1>This is page 1</h1>
4. <p>This webpage is my first page. It links to my <a href="mysecondpage.html">second
page</a></p>
5. </body>
6. </html>
Figure 4 Save this document as mysecondpage.html
7. <html>
8. <body>
9. <h1>This is page 2</h1>
10. <p>This webpage is my second page. It links to my <a href="myfirstpage.html">first page</a></p>
11. </body>
12. </html>
Save the two documents in the same folder (e.g. on your desktop create a folder called mywebsite).
Be sure to follow the file naming convention indicated in the caption above each box. In doing so you
will name your two documents the same name that you use in your <a> element (e.g. <a
href="myfirstpage.html">).
Metadata Standards and Web Services
Erik Mitchell
Page 8
Let's see how these two pages work together. Open a web browser and open the file called
"myfirstpage.html." You should see a link that you can click. Follow that link to your
second page.
Key Questions
Question 7. What HTML element did we use to create the link?
Using the W3Schools website (http://www.w3schools.com/html/default.asp) look up the role of each
of the elements used in your document "myfirstpage.html"
Element
Element type
Role in HTML standard
<html>
<body>
<h1>
Heading
<a>
Anchor
<p>
Paragraph
The two documents that you have created are the foundation of every website. While many websites
are created dynamically (e.g. computer programs generate web pages 'on-the-fly') when the page
reaches your web browser it is usually a simple document with HTML elements, CSS stylesheets and
JavaScript scripts.
As you can see, a website is simply a set of documents made available through a special program
(e.g. a web browser) that interprets the page text and shows it using pre-defined formatting rules. As
we observed earlier though, often we point to pages that exist at other locations or at least need to
reference documents that may live somewhere else than the same folder as all of your other
documents.
Metadata Standards and Web Services
Erik Mitchell
Page 9
Figure 5 Nested pages
Let's explore this in more detail by creating a folder
structure for our web pages. Using Figure 3, create the folders "website," "folder1," and
"folder2" on your computer (make sure folder1 and folder2 are within your website folder)
and place your two web pages in their respective folders.
In your web browser open the file firstpage.html and follow the link to your second page.
Question 8. What happens when you follow the link to your second page?
Because the secondpage file now is located in another folder we need to update our link path in the
file myfirstpage.html. These file system locations follow a few simple rules that may not seem
intuitive at first. This location is called a "Path" in HTML and refers to the contents of the href attribute
which is, in this case, a child of the anchor element (e.g. "href="/sample/test.html" contains the path
/sample/test.html). For now we will just focus on something known as "relative paths" or path
statements that provide a location from whatever the current folder is. In contrast to a relative path
which does not state what the root folder is, an absolute path specifies the entire location of a
document. Study the following example relative and absolute paths in the table and answer the
questions below.
Path in HTML <a> element
Path type
Location on your computer
<a href="page1.html">
relative
The page1.html document is located in
the current folder that your web-browser
is working from.
<a href="./folder1/page1.html">
relative
Page1 is located in a sub-folder called
folder1
<a href="http://me.com/page2.html">
absolute
Page2 is located at the website me.com
in the root folder. This is actually an
example of an absolute path in that it
specifies the server and the root folder
on the server
<a href="../folder1/page1.html">
Metadata Standards and Web Services
Erik Mitchell
relative
Page1 is located within the folder1 folder
Page 10
which is one level up from the current
folder
<a href="./folder2/page2.html">
relative
Page2 is located within the folder folder2
which is a subfolder of the current folder
<a href="/folder2/page2.html">
absolute
Page2 is located within the folder folder2
which is a subfolder of the current folder
Question 9. In a path statement what does a "../" mean at the beginning of a path statement?
Question 10.
What does "./" mean at the beginning of a path statement?
Question 11.
What does "/" mean at the beginning of a path statement?
Question 12.
Explain the following path: "../../folder3/file.html"
Question 13.
What is the main difference between a relative and an absolute path?
Question 14.
If your website home is a folder "website" which contains two folders, folder1
and folder2, each of which has a document named page.html in it, what would the two href path
statements read to allow you to access from one document to the other?
Exploring HTML and how it helps us model the structure of a document
Documents can be divided into discrete subcomponents according to its intellectual content.
Encoding systems then allow you to control the content representation, content layout and formatting,
interactivity.
Metadata Standards and Web Services
Erik Mitchell
Page 11
Open http://www.ibiblio.org/pioneers/bush.html. View the source (Hint – look under view in your web
browser or Google "view source in safari, chrome, internet explorer...").
Key Questions
Question 15.
On what line number does the content about Vannevar Bush start?
Question 16.
Where is formatting information (e.g. font size and color) located?
Question 17.
What technology controls the menu system on the left hand side of the page?
Question 18.
Based on your initial thoughts about this page, how tightly integrated is the
content and the presentation layer in this document? Is this a good or bad design decision?
Why?
Model – View – Controller (MVC)
Our experiment with HTML and CSS have taken us into the world of computer programming and
have demonstrated the elements of document
structure (HTML) and presentation (CSS). These are
Figure 2: MVC Model
two important aspects of an approach (i.e.
framework) for programming called MVC. MVC
stands for Model, View, Controller and describes an
approach to separating the data (model) from the
program logic (controller) and the view (rendered
web page).
Figure 1 shows us a simple architecture of MVC and
from the perspective of data-flow. In this figure a
Metadata Standards and Web Services
Erik Mitchell
Page 12
client requests data from the server via the controller. The controller decides which data to return to
the client and returns a customized data model to the view rendering engine to be returned to the
client. The MVC approach has a number of advantages over other approaches to programming
including:

Separation of model, program logic and interface allows upgrading of elements individually without
breaking other components

Removal of logic from the elements that the client can interact with leads to greater security

The abstraction of the data model means that it is easier to customize the application and add
new elements/functions as needed.
While MVC systems are often implemented using a development framework (e.g., Django) our
interest in this approach is in helping us understand the differences between the technologies that we
are working with this semester. So far we have worked with HTML primarily as a data storage
system (a Model). We have chosen to work with CSS as a View platform. So far we have not
needed a controller since we were simply displaying all of the content in our web-page. As we will
see with each of the information organization standards that we explore this semester, being able to
understand how the standards approach these three components (MVC) will help us understand
more about the standard itself.
Is HTML a Model, a View or a Controller?
The HTML standard allows us to create document models in which we can insert different types of
information. You may have already seen the idea of data modeling in use in HTML documents if you
noticed a consistent layout and organizational structure on a website. Underneath this layout is an
approach to designing the HTML documents to resources are made available in the same way.
HTML is an interesting standard because it often serves a "view" role in providing access to
information. At the same time however, HTML helps us model and store data and for this week at
least, we will consider the role HTML plays in supporting data modeling.
In order to better understand the relationship between this modeling process and how it is made
visible to our users we will work with a re-typed version of the above webpage that separates out
these elements. Lets start by getting the base HTML file to work from.
Metadata Standards and Web Services
Erik Mitchell
Page 13
Get an HTML file to work with for the remainder of the exercise
a. Go to ELMS, find the folder for class 3 (look under modules for class 3 resources) and
download the file csslayout_nostyle.html.
b. Open the file in both a web browser and text editor. (have a mac? – visit
http://support.apple.com/kb/ta20406 if you cannot see the html codes).
Key Questions
Question 19.
What HTML element is used to represent the title that the webpage displays?
Question 20.
What HTML element is used to denote paragraphs?
Question 21.
What elements have attributes associated with them? For each attribute, what
is the expected function?
a. Element __________
attribute __________
function ___________
b. Element __________
attribute __________
function ___________
c. Element __________
attribute __________
function ___________
Applying style to web pages (The view)
Today we are going to explore how content (metadata schema) and structure (XHTML encoding)
impact our use of digital documents. We will do this using a technology called Cascading Style
Sheets (CSS). In our first attempt we will do this by adding formatting instructions first to the
document and later by extracting these formatting instructions and putting them into a separate
document with a different metadata schema and encoding system.
Add formatting instructions into the HTML file
Metadata Standards and Web Services
Erik Mitchell
Page 14
c. Open the HTML page in a text editor and find the line with the code “<p class="firstp">”.
d. Inside of this p element add a new element named font with the attribute red (e.g. <p
class=”firstp”><font color=”red”>.
e. Just before the closing of this p element add a closing font element (e.g. </font>
f. Load the page in a web-browser. What happens?
g. Return to the text editor and lets modify the p element that we found. This time, add the
attribute align with the value right (<p class=”firstp” align=”right”>
Save the file and reload it in a web-browser. What happens?
Using information organization to create sustainable information systems
We just found that the HTML encoding system includes content definition and layout standards. We
also found out that this is one of the worst features of HTML because it allows the creation of
documents that are difficult to maintain or re-use for other purposes (e.g., if you want to change the
color of text, you would have to change the attributes of all your html documents manually). We will
now turn to a standard called Cascading Style Sheets to see how “complementary” metadata
schemas can work together
What are Cascading Style Sheets?
Let’s begin by reviewing the structure of a CSS document. Recall that unlike HTML documents, CSS
documents are not encoded using XML. Instead they use their own syntax. Review the sample CSS
document below.
13. body { text-align: center; }
14. div {
15.
width: 600px;
16.
text-align:left;
17. }
Metadata Standards and Web Services
Erik Mitchell
Page 15
In the above example you can see common HTML elements (e.g. body, div) listed. After each
element name the page contains { } to indicate that “all the instructions between these braces
belong to the element listed. It is worth noting that CSS documents use their own encoding
scheme that is nothing like HTML or XHTML.
You can also see that at the end of each instruction there is a semi-colon (;). This tells the CSS
interpreter that this is the end of the direction. You can also see that a colon (:) separates a
directive and a value (e.g. width: 600px). This allows the CSS interpreter to parse apart the
commands properly.
In our work with this exercise we will be creating our own CSS file to structure the sample HTML
page. Lets get started!
Understanding the structure of our HTML document
Look for the two classes firstp and secondp in the document (e.g. p class=”firstp”). Classes are
special attributes that you can apply to HTML elements which can be used by our CSS file to
apply special behaviors to the HTML page. CSS allows you to both set directives for an element
(<p>) and classes for that element (class=”firstp”). This is part of what makes CSS “Cascading”
and should ring a bell in regards to the property of inheritance that comes with hierarchical
documents. Today we will use these classes to modify the look and feel of these p elements
differently from our other elements. While we are here, lets also locate the last <p> element in the
page. Notice how this <p> element contains an extra entry class=”footer".
Create our CSS file and link it to our HTML page
1. Create a new text file and name it with a .css file extension (hint – if you are using a Mac, visit
http://support.apple.com/kb/ta20406 to enable you to do this in textedit).
a. Open a text editor
b. Save the file (it can be empty) with a name (any name you want) ending with .css.
Note, your HTML file and your .css file need to be in the same folder on your computer.
c. We will be adding to this document in step 3
Metadata Standards and Web Services
Erik Mitchell
Page 16
2. Create a link to this file in the header of the html page that you downloaded in step 1 using the
following syntax.
a. Edit the HTML file you downloaded in a text editor,
b. First – remove the font element and align class that you added in the first part of this
exercise.
c. Enter the following line in the HEAD portion of your document, replacing the text “the
name of your css file” with the actual name of your file. Remember – leave the quotes,
all HTML attributes must be quoted.
18. <link rel="stylesheet" type="text/css" href="the name of your css file”/>
d. You can Save the HTML document now.
Lets take a minute to review what we just did. By adding the <link> element with the attributes rel,
type, and href, we added metadata to our HTML file that allows the HTML interpreter (e.g. Chrome,
Safari, Firefox, IE) to import and use our CSS commands. The link element accomplishes a few
things. First, it allows us to separate the unique purposes of the HTML and CSS documents for
content and style respectively. Second, it provides metadata that connects our files and allows the
processor to take actions based on this relationship. This is an important foundation of the web and
is something that we will build on throughout this semester.
Working with CSS
3. Now it is time to begin adding content to our CSS file. As you add content you should save the
CSS file and reload the HTML page in your web browser (e.g. go to View >> Reload in
Chrome or Safari). If your changes do not show up you should debug by looking at your CSS
file. To begin, lets add entries for the h1 and h2 elements to the css file.
19. h1 {
20.
font-size: 2em;
21.
color: red;
22. }
Metadata Standards and Web Services
Erik Mitchell
Page 17
23.
h2 {
24.
font-size: 1em;
25. }
Save your CSS file and your HTML file and reload the HTML page. You should have seen your font
sizes change and font in the h1 element turn red. In the next step we will explore some of the
capabilities of CSS. In the following step you will see some comments. Comments in CSS are
denoted with /* and */ markers. In coding it is always good practice to comment your code so feel
free to put in notes here to help you remember what each element does. Remember, if you are
curious about CSS elements you can use the reference guide located at
http://erikmitchell.info/lbsc670/class_03_resources
4. Let’s hide all of our content and just play with floating two elements (the two p elements with
classes). Note, all of the following code includes comments following the /*…*/ you do not
need to enter the comments into your CSS file for it to work.
26. p {
27. visibility:hidden; /* This hides all p elements */
28. }
29. img {
30. visibility:hidden; /* This hides all img elements */
31. }
a. Save your CSS file and reload your webpage. What happened?
5. Now lets get to understand the ideas of inheritance and cascading by adding commands for
the p classes that we mentioned earlier. Keep the previous p and img directives in your CSS
file and add the following code.
32. .firstp {
33.
visibility:visible;
/*Show all elements with .firstp class*/
34.
position:relative;
/*position the element relatively*/
Metadata Standards and Web Services
Erik Mitchell
Page 18
35.
float:left;
/*position the element on the left*/
36.
width: 50%;
/* Take up half of the screen */
37. }
38. .secondp {
39.
visibility:visible;
/*Show all elements with .firstp class*/
40.
position:relative;
/*position the element relatively*/
41.
float:right;
/*position the element on the right*/
42.
width: 50%;
/* Take up half of the screen */
43. }
Technical note: Notice that the .firstp text is not aligned at the top of the screen. This is because
there is an image element that is being positioned within that p. To remove the image element from
document flow add “position:absolute;” to the img directive. Try taking out the visibility directive to
see where the image appears. Notice that it appears right on top of the .firstp classed element. This
is because it is “absolutely” positioned and is out of the document flow for that p (but still exists within
the context of that p). This works because CSS understands the structure of the document
(according to the DOM) but is also capable of re-sorting the display of those elements in a browser.
Key questions:
Question 22.
From your observation the behavior of the HTML page after working with CSS,
can you come up with some benefits be of using CSS instead of adding formatting directly to
the HTML page?
Question 23.
Today we explored multiple metadata schemas and encoding models and saw
the relationship between complementary systems. We also explored some key concepts in
information organization. For each of the concepts identify an example from our exercises
Metadata Standards and Web Services
Erik Mitchell
Page 19
today and identify one impact that the concept has on our implementation of information
organization in digital documents:
a. Inheritance (e.g. taking the formatting of a parent element)
b. The difference between adding information by-value (e.g. adding “font color=red”)
versus by-reference (e.g. linking to a CSS document).
c. Element refinement (e.g. adding more specificity to an element through attributes)
A bit more CSS (optional)
Our goal in this exercise is to better understand the role between HTML and CSS documents. If you
would like spend more time working with CSS, refer to appendix A which contains a CSS stylesheet
designed to provide a centered layout for our HTML page. Take a step-by-step approach in adding
the CSS instructions to your own CSS document and refer to the CSS reference at w3schools when
you have questions about functionality
Creating a web service (or how a web-browser works)
When we transformed our HTML page using CSS and extracted data from our Window object we
used the Web browser as our interpreter. The process of loading the document into a web browser
triggered the interpreter to run our code (e.g. the JavaScript or CSS) and display a new document in
our web browser. Figure 1 demonstrates the transformation process for HTML, CSS and JavaScript
documents
Metadata Standards and Web Services
Erik Mitchell
Page 20
Figure 6: Anatomy of a web browser transformation
Input Documents
Interpreter
Output
• HTML
• CSS
• JavaScript
• Web browser
• Formatted HTML
• Redirected webpage
Key Questions
Question 24.
MVC is an acronym for what three words?
Question 25.
So far in this class we have worked with XHTML and CSS. Based on our use
of HTML would you consider it to be a model, a view, or a controller?
Question 26.
How about CSS? Which element of MVC does it most closely resemble?
Question 27.
True or False: Including css and formatting elements within an HTML page
itself is a good example of MVC design. (hint – remember the first Vannevar Bush page)
Question 28.
The Controller is primarily responsible for interacting with what elements?
The Document Object Model - a generic document design for the web
Metadata Standards and Web Services
Erik Mitchell
Page 21
As we recall, the Document Object Model (DOM) is a model for
Figure 7 DOM Model
representing documents in web-browsers. The DOM applies to
a suite of web-based technologies including HTML, XML,
JavaScript and CSS. Figure 1 shows the DOM model. Notice
that the parent element is the “Window” object. That window
has the children history and document. The document object in
turn has multiple children. The DOM and MVC can be viewed as
complementary models in that they help us create web
applications using MVC design. This is possible in part because
MVC defines an approach to software design that separates
data from logic and display and the DOM allows us to write
abstracted programs that can be applied to multiple documents
(or even document types). Without these two concepts we
would be limited to integrating our data model (e.g. HTML
elements), our design model (e.g. styles, layout and formatting using HTML) and our web service
behaviors (e.g. JavaScript commands) into a single document, making it much harder to both create
and maintain.
Review the DOM model below and answer the associated questions
Key Questions
Question 29.
What is the top element of the DOM?
Question 30.
The document element (or object) in this model has what siblings?
Review
In this exercise we explored the relationship between collection management and LASM operations.
We learned more about HTML and got a quick introduction to CSS. More importantly, we learned
Metadata Standards and Web Services
Erik Mitchell
Page 22
about the Document Object Model and had an opportunity to explore JavaScript to create a
metadata-rich information service.
Key Questions
Question 31.
In our work this week we explored three different technologies (HTML, CSS,
JavaScript). Using what you know about the MVC model, how would you categorize each of
these technologies (e.g. which one is a Model, which one contributes to the view, which one
contributes to the controller)?
Question 32.
What does the acronym DOM stand for?
Question 33.
What standards have we looked at in weeks 2 and 3 that make use of the
DOM?
Appendix A Complete CSS stylesheet
44. h1 {
45. margin-bottom: 10px;
/*keep some padding between the h1 and other elements*/
46. padding-bottom: 20px;
47. font-size: 2em;
/*make the font big*/
48. border-bottom: #333333 thick solid; /*use border-bottom to give a nice horizontal line*/
49. background-image:url(http://ischool.umd.edu/sites/all/themes/ischool/images/um_logo.jpg); /*set
background image*/
50. background-repeat:no-repeat;
Metadata Standards and Web Services
Erik Mitchell
/*show the image only once */
Page 23
51. background-position:left top;
52. text-align:right;
/*Align the text right in the h1 element*/
53. }
54.
55. h2 {
56. margin: 10px 10px 10px 10px; /* the four values are for top, right, bottom, and left */
57. }
58.
59. p {
60. position:relative;
/*set our p positioning to relative*/
61. margin: 0px 0px 40px 30px;
/*set some margins for spacing*/
62. }
63. img {
64. position:relative;
/*also position our images relatively*/
65. float:right;
/*always position our images to the right*/
66. margin: 0 10px 10px 10px;
/*set some margins*/
67. padding: 5px 5px 5px 5px;
/*set some padding*/
68. border:#333333 thin solid;
/*add a nice border to the image*/
69. }
70.
71. .footer {
72. float: left;
/*position our footer to the left*/
73. margin: 20px;
/*add some padding*/
74. width: 100%;
/*make sure it spans the page*/
75. border-bottom: #333 medium solid; /*use our same horizontal line trick*/
76. }
77. p.footer:before {
Metadata Standards and Web Services
Erik Mitchell
/*add some content above our footer*/
Page 24
78. content: "University of Maryland College of Information Studies";
79. }
80. body {
81. text-align: center;
/*tells the document to center everything*/
82. }
83. div {
84. margin: 0 auto;
/*set a 0 top margin and automatic left and right margins*/
85. width: 600px;
/*set a width*/
86. text-align:left;
/*align all text within div to left*/
87. }
Metadata Standards and Web Services
Erik Mitchell
Page 25