Meeting 4

Meeting 4: September 19, 2007

Menu

Concerns | Assignments |Tonight’s quiz | Flowcharts | Dreamweaver

Don't forget! Bring print copy of design document AND flowchart to class next week!

Concerns

menu

  • When will we get feedback on our design document/flowchart? Answer: next week in class we Dr. M. will evaluate, and class members will write on feedback sheets for each project.
  • How do you breathe life into a dull text-based web-based unit? Some ideas included keeping it simple; using clipart and/or photographs; being consistent; using gifs for numbers instead of ordered lists. Dr. M. offered to share his encyclopedia of clipart.
  • Design process for this project does not appear as intense as the process modeled in the two semester course. Dr. M. concurred, noting that this course is focused on learning instructional use of the tools.
  • What browser should we “optimize” our assignments for? We made a pact: we will optimize our web pages for FIREFOX. Dr. M. will use Firefox when viewing and grading our assignments.

Assignments

menu

  1. Project Topic: Be sure to list the topic on the class wiki home page. Add a sentence describing what you plan to do with your topic.
  2. Design Document
    • On Monday, 9/17/07, Dr. Martindale emailed class members announcing that the due date for “Design Document” was postponed from 9/19 to next week (9/26).
    • Design document is to be an HTML document (a web page) posted on the web. (No need to hunt for a web server; simply use your UMdrive.)
    • Use the 8 headings outlined in the assignment. Work for a combination of John & Jennifer’s examples. The design document will be very plain; may want to use a navigation bar at the top to link to the various sections.
    • Bring a printed copy of the Design Document (and the flowchart, see below) with you to class on 9/26, as we will be doing a gallery walk and providing anonymous peer feedback to each other, as well as receiving feedback from Dr. M.
  3. Launch Pad Create a simple web page that lists each of the assignments required for the class. For each, create a hyperlink to the actual assignment. This launch page is a one-stop location for accessing all your class products. (This could also be a part of your portfolio.)
  4. Flow Chart Also due on 9/26. Be sure to upload to the web (e.g., UMdrive) and create a link to it on your Launch Pad. Be sure the labels in the boxes on the flowchart say what is occurring at that particular step. When you present the flowchart to the client, you use it as a talking point to explain each step further. So shorthand labels are acceptable.
  5. Aggregator set up an aggregator for yourself (BlogLines (http://www.bloglines.com/), Google Reader (http://www.google.com/reader)). If you have a gmail (google) account, Google Reader will use your same user account. Subscribe at least to the following RSS feeds:
  6. TEXT READINGS
    • Read ch. 5 in the Dreamweaver book. Pay attention to info about tables and how DW helps you maintain your site. There will be 2 questions in next week’s quiz about that. E.g., what can DW do to help you maintain your site? (synchronize with webserver, check broken links, create site map, check html syntax, etc.)
    • Read Flash chapters 1-2; Alessi chapters 7-8 and Dick/Carey/Carey chapter 5.
  7. Additional Readings Tutorial that describes the purposes of the standard symbols used in flowcharting (http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/flow.html)

Tonight’s quiz

menu

  1. Describe one instructional use of social bookmarking. Collaboration via the web; a simple information manager (not very social, but gives access to your bookmarks irrespective of the computer you are using); easily access noteworthy sites that someone whose judgment and site selection standards you trust (like your professor); promote “communities of practice” (See http://www.ewenger.com/theory/); teach critical thinking and categorization skills.
    • What IS social bookmarking? Setting up web bookmarks which you categorize (tag/label) and make accessible (that’s the social part) to others who use the same social bookmarking site to search for tags that interest them. The societal aspect is reciprocal because you can look in on the collections others have made, finding kindred spirits with whom you can share the search and discovery mission!
  2. What are the downsides to social bookmarking? Tags may be inaccurate; no censoring; completely open to anybody anywhere; you don’t “own” the tags you create, so others may have a different meaning for the tags you use; broken links possible; may miss important resources simply because you haven’t intuited the classifications others have come to use (their “folksonomies”); cannot be considered an exhaustive resource; can suffer from information overload; taggers may have given only limited descriptions so it’s hard to tell what the link is for; privacy issue (the stalker factor).
    • You can tag something and NOT share it.
    • There are server-based programs you can download and install on a school server that permit social bookmarking only within your school (Scuttle might be one; see http://sourceforge.net/projects/scuttle/)
  3. What is an aggregator? An aggregator (http://en.wikipedia.org/wiki/News_aggregator) is software (either web- or client-based) that collects updated postings from websites that provide “RSS feeds.” As a user, you first sign up for a (free) aggregator account (Google Reader, Blog Lines). Then, when you visit a site that offers to notify you of site updates using an “RSS feed” (really simple syndication), you simply click on the site’s RSS button, which then prompts you to identify your aggregator service. Later, when you want to know what’s new on that site, you do not have to hunt for the web address (or check your bookmarks). Just go to your aggregator account instead. There, you’ll see the whole collection (the aggregate) of all the feeds you’ve subscribed to… together with markers indicating which sites have been updated since you last visited them. To see the update, just click and go.
    • Dave Winer (http://en.wikipedia.org/wiki/Dave_Winer) is a key name in the RSS development story.
    • Another name in the field is Adam Curry (http://en.wikipedia.org/wiki/Adam_curry#Podcasting) who asked what if you could attach something to the RSS feed? Send an enclosure, an audio file? According to Dr. M., this is where podcasts came from: sending an audio file as an enclosure with an RSS feed.
    • Some search engines (like Google) will let you subscribe to your search result screen…so you could google your name, then subscribe to a feed. Your aggregator will let you know whenever your name has popped up on a website!
    • There are both web-based and client-based aggregators. Client-based are more customizable.
    • Some websites that offer RSS feeds may have just one feeder button on the homepage; others may have feeds at different pages within the site. (Think of different sections of the newspaper; you might want updates from sports and fashion, but not the whole paper. The Commercial Appeal has a good feed system.)
    • Curiosity asks: does an aggregator limit the number of RSS feeds you can subscribe to? Will using Google Reader impact my gmail? Does the Commercial Appeal charge 2.95 for day old stories delivered via an RSS feed?

Flowcharts

menu

  • Purpose of flowchart assignment is to show the client (Dr. M) where the project is going. In project development cycle, flowchart is a major sign-off point by the client.
  • Use dedicated flowcharting software. See assignment page for recommendations (OmniGraffle, SmartDraw, Inspiration, Bubbl.us (http://www.bubbl.us/), Visio).
  • See tutorial to familiarize yourself with the flowchart symbols you will need to use.(http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/flow.html)
  • Look at new samples Dr. M will post
  • Flowchart will reflect the branching in the logic of your instructional steps (remember, should NOT be a straight page-turner).
  • IF your project will have a navigation bar on the web pages, your flowchart does NOT need to show the connections from each page back to the navigation bar. Instead, simply show the connections once and then add a note indicating there will be a navigation feature on each page. (Remember, the flowchart is where you show the client how you plan to develop the material, step by step.)
  • Note what the connector symbol is...when flowchart overflows a single page

Dreamweaver

menu

Note: the notes on Dreamweaver are actually based on the powerpoint used in class, which Dr. M. indicated he would make available for us to view.

CSS

  • Eric Meyer’s CSS Book is a valuable resource. If you are going to do any web design, you definitely need to use style sheets to control the way the pages look. http://meyerweb.com/eric/books/
  • Some dedicated software programs help you make the CSS files and learn while you are doing it. CSSedit is one such for the Mac (http://macrabbit.com/cssedit/)
  • Why use CSS? Saves you time (once you’ve created them); ensures consistency; allows you to apply format attributes to whole segments.
  • Can have an external style sheet that is not embedded in a particular page.
  • If the style sheet is internal, it overrides the external style sheet.
  • Even if you use style sheets, you can still individually tag segments of the page.
  • The hierarchical influence of external-internal-tags formatting is why the style sheets are called “cascading.” Interestingly, the tags override internal styles; and internal styles override external styles.
  • Adobe’s website has useful information about CSS.

Lists

  • Unordered lists are bulleted lists
  • Ordered lists are numbered lists, but DW properties will let you choose a variety of numbering (and lettering) styles
  • Definition lists are being “deprecated”, or falling into disuse
  • Code: <ol> starts the ordered list and </ol> signals the end of the ordered list. Inside these 2 tags, there are tags surrounding each list item (<li>…./li>
  • For unordered lists, the overall list tags are <ul>…</ul>, with the tags for the individual list items the same as for ordered lists.

Images

  • (also see the ppt for notes on gifs and jpegs)
  • When you insert images into the page, it doesn’t matter if you stretch them. However, if you DO, this actually bloats the size of the html file, since the html must now include code to re-render the image. Thus, it is better the modify the image size (dimensions) using an image editor. One such is Fireworks, which is made specifically for web graphics.
  • You can use DW to set the alignment of the image with respect to the text.
  • GIFs: download fast; have a limited color palette; can have transparent areas (so you don’t see a block of white around the perimeter of the image portion).
  • JPEGs: can display many colors; are best for photographs because photos have lots of colors. Changing the colors in a photo is less acceptable than in a graphic since people expect real-life color in photos.
  • PNG: (portable network graphics): vector-based, scalable, but not yet widely used. Can be compressed without losing quality. Combine the best of gifs and jpegs. Firework’s default file output type is PNG.

“Reading” the DW work space

  • The status bar provides cues for the tags that affect the content at the current cursor position. So you can “read” the status bar to see what’s going on. When you click on the tag on the status bar, the content that the tag refers to is highlighted in the work space. This is helpful when you want to grab all of a piece and move it or delete it.
  • When you see a series of tags on the status bar, the one at the right side is the most immediate tag for the content at the cursor position. Then as you back up to the left through the tags, you are grabbing more and more of the content. (Try it to see what happens; this is hard to put into words!)
  • When you are working on a page based on a template, the code view greys out the code that belongs to the template. This suggests (rightly) that although you can see the code, you cannot change it in this document. (To edit the template code, you need to open the template….duh).
    • Dr. M indicated he would upload the templates he uses for the class wiki to the UMdrive and provide us links so we can download them and modify them for our own purposes.
  • The bottom right of the status bar shows the screen dimension (how large the web page will be when maximized in the user’s browser). This is in pixels. It also shows the file size and how long it takes to download, given the download speed you’ve specified in the properties of the page. (Note, this doesn’t actually change how long it takes to download…. It just tells you how long a reader with that particular download speed will have to wait for the page to appear. Remember, time is money, so you don’t want LONG download times!)
  • Trivia: DW is written in XML, that’s why it’s so extendable. That is, it is easy to change the features.

menu