CS312 - Spring 2012 - Class 7

  • administrative
       - summer research at Middlebury
       - assignment 4
          - will contain multiple parts
          - I may not be able to post all of the parts today, but will by Wednesday
          - I will post the first parts today, though, so that you can get started early if you want

  • test-driven development
       - test-driven development is a style of developing code that has been growing in popularity
       - it follows these basic steps
          1. Understand the requirements for a new feature. If the feature is large, it should be broken down into as small a piece as possible, and the steps below worked on a step at a time.
          2. Write one ore more tests to test only the specified requirements for the new feature
          3. Run the tests and make sure they all fail
          4. Write the code for the new feature. the code should only be written to make the test pass.
          5. Run the tests. If they all pass, great! If they fail, understand why they failed and fix the test or the code.
          6. Refactor the code to improve solution, remove duplication, etc. Rerun tests.
          7. Repeat!

       - benefits of test-driven development
          - forces programmer to write tests. In practice, programmers who use TDD tend to write more tests.
          - unit tests are programmatic documentation
          - forces programmer to understand the problem/feature requirements
          - tends to be create more incremental programming
          - tends to reduce debugging time

       - drawbacks
          - more code and more coding
          - still have to maintain the test cases
          - not clear how to separate the benefits of testing first vs. good unit testing practices

  • a few last comments about unit testing
       - setup and teardown (read the book!)
       - write unit tests!
          - whether you do it before, after or at the same time as development, writing tests will save you time
          - forces you to think about what the specifications are
       - unit tests should be...
          - comprehensive
          - should be simple enough that they don't require a lot of analysis to understand what the test is doing
       - there is a trade-off between these two and it takes practice and using them to figure out where the line should be drawn
          - some of my examples may be a bit too far on the complex side...

  • html
       - What is html?
          - HTML: HyperText Markup Language
          - a system for tagging text (web pages) to describe
             - the structure of the text (i.e. how things are related)
             - the meaning of the text (i.e. how it should be interpreted)
          - for example: http://www.cs.middlebury.edu/~dkauchak/classes/cs312/examples/HTML/food_blog.html
             - you can view the html source of a web page from your browser
                - in Safari: View->View Source
                - in Firefox: View->Page Source
                - in Chrome: View->Developer->View Source
          - tags
             - are denoted by <...>
             - can, and often do, contain multiple words
             - often contain a closing tag indicated by a / at the beginning of the tag
          - it's what most web pages are annotated with
       - what html is not... (or should not be...)
          - explicitly stating how the text should be visualized. Why not?
             - traditionally (and by many people still), this is how html was/is viewed
             - allows the text and tags to be used in many situations
                - computer browser
                - mobile device browser
                - "audio" web browser for the visually impaired
                - summarized view (only show the high-level concepts)
                - ...
             - if you want explicit control over a document, use pdf or some other format

  • html basics
       - An "element" in html consists of
          - an opening tag
          - some content
          - a closing tag
       - Elements may have attributes which describe additional information about the element
          - attributes are of the form:
             attribute_name="attribute information"

          - some attributes are required and others are option
          - the order of attributes is not important
       - Occasionally, we may have tags without a closing tag
          - these are provide additional information about the document or the elements in the document
       - For example in http://www.cs.middlebury.edu/~dkauchak/classes/cs312/examples/HTML/food_blog.html
          - <html ...> tag opens the html document
             - it has some attributes (xmlns and xml:lang)
             - it has a closing tag at the end of the document
             - the html tag generally wraps the whole page
          - <head> tag
             - describes header information
             - header information isn't generally displayed on the page
             - though does contain the title tag, which can affect the title of the web browser for this page
          - many other tags...
             - <p> paragraph
             - <body> the body of the page
             - <h1>, <h2> ... headers of varying importance
             - <ol> ordinal list (i.e. numbered list)
             - <li> list item
             - <pre> preformated text
             - <img ...> insert an image
             - <a ...> a hyperlink
             - see the references section on the course web page for a full listing
       - Elements generally fall into two categories: inline vs. block
          - block elements surround identify a stand-alone entity
             - block elements can be thought of as breaking up the text
             - commonly, block opening and closing tags are put on a line by themselves and indented
             - for example:
                - <p>
                - <h1>
                - <div>
                - ...
          - inline elements simply denote some additional information about the enclosed content
             - they are just inserted within the flow of the text
             - they can occur inside a block
             - block elements cannot occur inside them
       - special characters are denoted by &...
          - why do we need special characters?
             - avoids confusion
                - e.g. < in the text vs. a beginning of a tag
             - &nbsp;
                - allows for spaces, which are normally ignored

  • html history
       - HTML 1.0 (1989) - 2.0 (1991) - initial markup
       - HTML 3.0 (1995) - Netscape vs. IE, proprietary extensions
       - HTML 4.0 (1998) - Separated the structure (HTML) and the presentation (CSS)
       - HTML 4.01 (1999) - A few modifications, currently the recommended standard
       - HTML 5.0 (????) - Still under development
       - XML: Extensible markup language
          - user defined tags
          - strict syntax
             - must have open and close tags
             - strict hierarchy
       - XHTML 1.0 (2000)
          - combination of XML and HTML
          - benefits of XML
             - easier to parse (since syntax is more strictly structured)
             - can be extended with new markup

  • XHTML requirements
       - Strictly meeting XHTML standards make your content easier to parse and interpret
       - Specifications (see the course reading: http://www.w3schools.com/html/html_xhtml.asp)
          - All tags must have an opening and a closing tag
             - singleton tags must terminate the tag with /> to indicate that it is a singleton tag
          - Documents must have one root element
             - generally this is <html>
          - elements must be properly nested to form a tree structure
          - elements must be lowercased
          - attributes must also be lowercased
          - attributes values must be quoted
          - the document must also have:
             - a <!DOCTYPE ... tag
                - specifies the rules of the markup language
                - an example:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\

                   - <! not an html element
                   - html: html is the root element
                   - PUBLIC: the standard is publicly available
                   - "-//...": specifies XHTML 1.0
                   - "http...": files that contains the standard
             - xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" attributes in the html tag
          - cannot use old (i.e. deprecated) tags that contain "presentation" attributes
             - bgcolor
             - <font ...>
             - align
             - <center>

       - You can check that your page is compliant with a validator
          - http://validator.w3.org/ (also found in the references section)
          - For example:
             - http://www.cs.middlebury.edu/~dkauchak/classes/cs312/examples/HTML/food_blog.html is compliant
             - http://www.cs.middlebury.edu/~dkauchak/classes/cs312/ is not :(
                - 81 errors
                - 6 warnings

  • CSS (Cascading Style Sheets)
       - HTML/XHTML is supposed to describe the structure and attributes of the content
       - CSS can then be used to describe how the page should be visualized
       - What are the advantages of this decoupling?
          - can have a single style sheet for multiple pages
             - consistency across pages
             - VERY easy to then change the style across all pages
          - style is in it's own separate file
             - don't have to weed through the html to make changes
             - or to look at the attributes
          - make the overall file size more compact
          - more cache friendly (only have to download the style sheet once if it's shared across pages)
       - Other benefits of HTML with CSS
          - allows a much broader range of attributes and effects to change/configure
          - allow different group elements into categories and then vary the visualization based on these attribute groupings
             - improves consistency
             - allows for quick changes to multiple attributes
                - for example, contrast this to the <font> tag...
          - very easy to change style of multiple things
          - allows for cascading (i.e. nested) style sheets

  • Style sheet basics
       - style sheets consist of an element or label followed by properties for that label
          h3 {
             color:red;
             text-align:left;
             font-size:8pt;
          }

          - each property consists of
             - a property name
             - followed by a colon
             - followed the value for the property
             - followed by a semi-colon
          - these can be on one line or multiple lines
       - lots of attributes
          - color
             - 17 named colors (red, yellow, silver, black, green, etc.)
             - #ffe4b5 (RGB values)
          - text-align
             - center
             - right
             - left
             - justify
          - background-color
          - margin
          - text-decoration
             - overline
             - line-through
             - blink
             - ...

       - look at example style sheet (http://www.cs.middlebury.edu/~dkauchak/classes/cs312/examples/HTML/eats.css)
          - can specify the attributes for each of the elements
          - e.g. I can add a background-color to h1


  • adding attributes: div and span
       - sometimes we may want to interject and element, even if we don't have text (or one of the existing elements doesn't fit what we need)
       - in these cases, you can use div or span
          - div is a block element
          - span is an inline element
       - only use div and span if no other element category applies

  • grouping elements
       - very frequently, we will have categories of things that behave similarly
          - they may be of the same type of element
             - e.g. div/span representing the same category
             - table entries with similar characteristics
          - or they may be of a different type
       - you can use the class property to signify that they are in the same class
       - in your style sheet, you can then specify properties for these classes
          - you can change the attributes of ALL of the items with that class with just one command
       - for example, we've introduced the foreign and entry categories
          - .entry and .foreign is short for *.entry and *.foreign
          - in these cases, they're all the same element, however, we could distinguish by element
             - p.entry (all the <p> elements with class tag entry)

  • id
       - sometimes we just want to uniquely identify one element
       - the id property is useful for this
       - should only label one thing with an given id
       - use #id in your CSS file
          - look at the header id

  • incorporating style sheets
       - External style sheet: <link type="text/css" rel="stylesheet" href="eats.css" />
          - most common approach
          - can put this in any file to share the .css file
           - nicely separates the .css and the .html
       - Internal style sheet:
          - put inside <head> tags
          - put inside style tags, e.g.

          <style type="text/css">
          hr {color:sienna;}
          p {margin-left:20px;}
          body {background-image:url("images/back40.gif");}
          </style>
       - Inline
          - use inside an element tag
          - style="..."
             - style="color:red"
          - avoid this unless completely necessary
          - doesn't decouple html and style

  • look at zen garden page (http://www.csszengarden.com/)
       - same html
       - different CSS
       - can drastically change the look and feel of the page
    •