Course Content

First of all, we really should be calling this module ‘”what is the future of ubiquitous computing?” You may also see the term “The Internet of Things’ (IoT). The Web is just one way to access information. Wi-fi is becoming almost as prominent way to deliver information as the Web once was. In fact, SOME consider both the Web and Wi-Fi to be considered (independent but inter-connected) sub-sets of the overall Internet.

Next, let me say that no one can predict with 100% accuracy about the future but we do have a pretty good idea. To begin our discussion, recall this video from the movie The 6th Day (We saw this when we talked about Web standards. Now look at the clip with a focus towards pervasive computing and the Internet of Things). Will this football helmet soon become a standard in the NFL?

For some other ideas, here are some places to go to get some ideas of what other think

• Six Predictions
• Six Pioneers Take on it
• How the Experts See it (Pew Research)

So, maybe it is more inclusive to explore the future of media in general. The Internet, after all, is really only a small piece in what is becoming the overall "Digital Media Revolution"

Robin Sloan's insightful predictions made first in 2004 the followed up with two updated versions). It is interesting to see what he predicted and what has happened since. It is hard to tell 'truth from fiction" See if you can tell.

Click Here to Watch the Video

If you are interested in seeing the entire project, you can go here.

Here is a review of the project:

Click Here to Open in a New Window

This is a podcast that came out about 18 months ago in which some podcasters were discussing the future of the Internet from a business perspective. It also will help you put together your own ideas about the future... a good way to end the semester.

So, with the users in mind, let’s take a look at some quick and easy guidelines:

When building websites, it is common to get so excited about ‘being published” that one fails to look at the final design through the eyes of a new user/visitor. This is a case where we must ‘get outside of one’s self’ and not view things from o=your own eyes but that of others. This is harder to do than one might think. For example, when you enter a store, do you tend to go to the left or the right (or straight ahead)? Did you know the product placement on store shelves is an art (and one that product producers pay extra for)? Did you know that companies pay a grocers premium to have their products at ‘eye level’ or for ‘end cap’ space?

All of this is a part of visual arts and design. Retailers know this.. and good Web designers also pay a lot of attention. The rule of thumb is:

YOU ONLY HAVE 10 SECONDS TO MAKE A FIRST IMPRESSION.

Meaning that if you do not grab a visitor’s attention in this time frame, they tend to move on…

So with this in mind, let’s take a look at some very common bloopers.. these come from The book called

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Some Common Bloopers

Some of the images shown here are a bit dated. But the concepts are universal and they are very representative of common mistakes still being made.

Click the images to increase their size to make easier viewing

Mixing Radio Buttons and Check Boxes

Folks tend to try to be efficient by co-mingling check boxes (inferring that more than one choice can be made at a time) and radio buttons (only one at a time can be selected)..

Here’s another example:

In this case a check box was offer for what the designer really intended a radio button.

This one is silly as it is, often shows up

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Diabolical dialog boxes

Can you figure this one out????

(a hint…. how do you know what choices to make and how???)

So I am not accused of simply bashing… here is an example of a pretty good set of choices:

Here’s another one:

Misuse of Text Fields

Text fields are often necessary .. but in order to manage efficiency AND consistency of data use drop downs when possible (note that is what we are doing with the easy Uploader function):

Seems like phone numbers and birth dates would be a ‘no brainer’, but how many times have you seen this?:

What about times and standard entries (like states)?:

Wouldn’t this be a better way to handle?:

Quirky Controls: A Review

• Check boxes that work like radio buttons
• Command buttons that function as check boxes
• Cancel buttons that do not cancel

 

Incorrect order of entries (Presenting Information Poorly)

Even when you do use text fields be sure to provide commonality on entry fields and their layouts:

This one isn’t much better:

So, let’s review:

• Text fields should only be used for data that is really unstructured.
• Use alternatives (like drop downs) for specifying highly structured data values (for consistency.. recall that you may eventually want to make queries against this data)

So, maybe this one is better:

Design Rules for Layout Order

• Dominant Reading Order
• Frequency of Use
• Relationship to other Controls
• User Expectations

What about Error Messages?

I wonder if you can easily figure what the message is here:

Or this:

Miscellaneous Common Errors

• Sites that are slow downloading.
• Sites that are distracting by their use of gratuitous animations.
• Sites that can only be viewed with the most recent browsers and/or esoteric plug-ins (recall lesson on Web Standards).
• Sites that require users to scroll down or across to see important content (most important information needs to shown on opening screen).
• Sites that format text in fixed-width or proportional width block rather than letting the width of user’s browser windows determine the width of the text.
• Text that is too tiny.
• Back button abuse (I mean yahoo mail is the worst!!!.. you hit the back button and it takes you completely out of mail).

FINAL NOTE

Content management systems generally do a great job in helping you make better design decisions. In some cases you can’t make a bad decision. Things like polls and voting booths for example, allow you to co-mingle check boxes and radio buttons but it can be difficult to do this, even on an open-ended plug-in like these. You still can choose wrong types of boxes. We have gone through several steps to get you to this point with the hope that you have a better appreciation as to why we use CMS systems (for both design and content), and how you need to have some knowledge about html, php, css, scripting, etc. You need to have a basic knowledge at least as to what role they all play so you can become a better site manager.

 

We begin by outlining some basic design principles. Most of what we do in education with regards to media and technology can be based on the basic premises laid down in the ASSURE Model

In short, the Assure Model is:

• A procedural guide for planning and delivering instruction that integrates technology and media into the teaching process.
• A systematic approach to writing lesson plans.
• A plan used to help teachers organize instructional procedures.
• A plan used to help teachers and instructors perform an authentic assessment of student learning.
• A model that can be used for most media development.

ASSURE is a acronym:
Analyze your Users/learners
State your objectives
Select methods & media
Utilize that material
Require participation
Evaluate and revise as necessary

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #1: Focus on the users and their tasks, NOT the technology

The bottom line is that you need to analyze your users. (You should note this common theme among all the principles)

• for whom is the product being designed?
• what is the product or service for?
• what problems do the intended users have now? (what do they like and dislike about the way things work now?)
• what are the skills and knowledge of the intended users? what is their motivation?
• how do users conceptualize and work with data now?
• what are the users’ preferred ways of working?

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #2: Consider function FIRST, presentation later.

Most of us get hung up in ‘cute’ design… but function over format should be a mantra you follow:

• if you were given the task to design a site, what is the first thing you would do?
• this does not mean that you should tack user interface on at the end.
• if done correctly, functionality is built into GUI.
• developers should consider the functionality of the GUI and the overall site.
• function does not mean implementation – not how does it work but what does it do?
• develop a conceptual model (this is really what Project #1 is all about). What is different is that we will also pre-produce a scale of the user interface also.
• perform an objects/actions analysis.
• write task scenarios.

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #3: Conform to the USER’S VIEW of the task.

Again.. don’t let the tail (technology) wag the dog (the usefulness):

• strive for naturalness. (don’t require them to perform ‘unnatural’ acts (how many alt-tab-delete-insert-shift-buttons can you press at once?))
• “bad” vs “good” menu designs (we will discuss).
• utilize your user’s vocabulary, not yours (avid acronyms/lingo).
• differentiating between “newbies” and veterans (give them a choice).
• advantages and disadvantages of task-specific design (Adobe Photoshop is great for seasoned artists, but what if you are a newbie?)

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #4: Don’t complicate the user’s task.

Sometimes the viewing experience ruins the value being added by content being made available:

• Analogy to the regular coming into his favorite restaurant and ordering the “usual”
• Support customization
• Provide wizards
• Minimize the need for problem-solving the computer domain and its issues.

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #5: Promote learning.

Learning in this sense is learning the navigation of the site.. but it also could apply to learning content

• how difficult is the domain to learn?
• think outside in not inside out (you are close to it, you KNOW how it works.. will the user?)
• avoid ambiguity (textual and graphical (how hard are the icons to figure out?)
• Think of three words: consistency, consistency, and consistency
• evaluate your environment for risks

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #6: Deliver information, not just data.

Take a look at Shedroff’s concept of Experience Design to dig deeper on this… he differentiates among data, information, and knowledge. Dig as deep as you care to, this site will keep you thinking deeper and deeper into the concepts of design thinking…

• Successful presentations don’t simply present, they direct users towards
  important information.
• The screen belongs to the user . (i.e., it ain’t your site.. it’s theirs!)
• Preserve display inertia.

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Design Principle #7: Design for Responsiveness

• Actual speed and perceived speed may not be the same thing (you only have 10 seconds to make a first impression… average time on site before users make decisions about the design/usefulness of your site).
• The easiest way to do this is to scale your images to the size you wish to display them.  In general, images should not be larger than 1200 pixels wide.
• If you are using a theme, look for a theme that works with phones, tablets, and desktops.  Designers have to think of users working on all of these devices

So, with the users in mind, let’s take a look at some quick and easy guidelines:

Mozilla defines web literacy as the skills and competencies needed for reading, writing and participating on the web. To chart these skills and competencies, Mozilla worked alongside a community of stakeholders to create the Web Literacy Map (below):

You can read all about the project, how it got started and why on the Mozilla site. Spend some time on it and come back here for your assignment

• Web Literacy Defined

• Web Maker White Paper

The content below are notes that you can refer back to from the video introduction. I tried to keep it short but there is so much going on here it does take a long time to develop what I am trying to convey to you. In order to make it easier on you, I broke this up into three parts. Part one takes you up to a movie clip that demonstrates a point I am trying to make (about 1/2 way through the one half hour lesson). Then I continue with the clip and then into part two (which runs about another 14 minutes.).

Bear with me as you watch the videos and try to keep in mind the evolution of Web 2.0 and possibly how that might not have happened without the changes that came about first with standardization. Finally, pardon the technical issues with these videos.. I recorded on Keynote and getting it to synch with Flash was a real struggle…but I had invested close to an hour recording it and wanted to get it to you in time for this cycle. I will probably have to re-record it down the road but for now I think it will help you understand the gist of what I am trying to say about Web Standards.

Web Standards – Part 1 (approx 15 minutes)

Video Clip: 6th Day (This movie came out in 2000, more than 13 years ago!)

Web Standards – Part 2 (Approx 15 minutes)

After viewing the video, read over these notes… They are in outline form for easier reading and to get to the point faster. You will begin to see some trends.. and (hopefully) begin to realize that WEB 2.0 WAS NO ACCIDENT…it came about as a consequence of a standards movement that was aimed at separating form from content… without which no semantic Web could be possible… it led to social networking and more recently ‘big brother’ knowing everything about you… What you will see is that the book ‘1984’ really happened in about 2002-2004…. In order to truly understand all of this you need to progress through the other lessons in their suggested order (i.e., php xml, etc.)

Why standards?

Considerations:

1. Reduces overhead (bandwidth)
2. Saves time and money during re-design
3. Provides greater access
4. Forward compatibility

1) Reduces Overhead

• A 60K page doesn’t sound like much but…

 

Take a look at this seemingly harmless small page:

[one_third]..[/one_third][one_third]
[/one_third][one_third_last]..[/one_third_last]

How big is it really? (lots of coding!)

[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

What about Word-converted files?

[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

How big are they really? (Lots of hidden code)

[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

• How many hits will your site receive?
• How much are you paying per megabyte of file transfers?

 

How about line costs?

• If a site that is receiving a several hundred hits at a given moment can reduce overhead 50% (page weight reduced from 60K to 30K).. It is conceivable that they could save $1,500/month in line costs…

• How much wasted code?

2) Saves time & money during re-design

• Think what would happen if you simply made a typo with the ‘font’ tag and named it ‘ont’ instead and then replicated that tag throughout your site??..

• With a style sheet, the following tag lines can be reduced..

“Write once, publish  everywhere”
 

Evaluation criteria

• Who is the audience? Is the site audience centered?
• Communication
• Navigation
• Visual Appeal
• Utilitarian Design

 

The three I’s of the digital world

1. Intelligence

   Example: Your personal pvr

2. Interactivity

   Example: Your personal profile, eliminate unwanted content, match people who want to buy things with sellers, feedback

3. Interoperability

   Example: forward & backward compatibility with all platforms & operating systems

   Provides greater access

Backwards compatibility

 

• Not all browsers act alike:

For example, Internet Explorer is different than
[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]
Most versions of Opera:
[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

• What appears fine in one browser may not work in another.. this includes Chrome, Mozilla, and Netscape (no one is immune)
• Not even all versions of browsers are compatible…

3) Provides greater access

• Struggling to cope with ever-widening incompatibilities, designers came up with the practice of authoring customized versions of mark-up..

 

So what do we do?

• Do we design different versions for each site?
• Proprietary ActiveX and Java Script
• What about accessibility issues?
• SMS services

 
Even WYSIWYG editors added to confusion..

Dreamweaver, GO Live and FrontPage all have their own proprietary scripts and non-semantic mark-up structures (not optimized for all browsers.) (Dreamweaver IS getting better at this btw)

While newer versions are more compliant, they still require some developer knowledge to do so

Originally FLASH was abused and misused.

MX versions of Flash became the breakthrough… far less proprietary and more accessibility oriented (Support CSS)

But, they all do require plug-ins,

Some sites are set up to require Internet Explorer

News sites, portals, shopping sites, institutional sites, community sites, magazines, directories and others that emphasize text or involve practical interactivity may still be best served with XHTML, CSS and/or other standards
 

In 2002 – WYSIWYG came of age

Deamweaver/Flash MX (Macromedia’s Last version prior to be purchased by Adobe)

• Produced valid markup
• Helped with accessibility
• Rendered CSS₂ reasonably well (although positioning was somewhat problematic)
• No longer corrupted CSS layouts
• Encouraged use of XHTML and CSS standards validation

 

Except for FrontPage

• FrontPage is/was essentially
  • An Internet Explorer editor
  • Spewed proprietary code and mark-up
  • Created need for much hand-written mark-up corrections

 

Accessibility issues

THE question you’ve all been waiting to ask…

• Is it better to study server-side technologies like PHP,ASP or ColdFusion, rather than piddle hours away re-thinking client side mark-up rudiments?

• The answer is yes and no…

• They, too, need to be utilitarian

• Load times are an issue
• Need standards of their own
• Still require plug-ins

 

4) Transitional Forward compatibility

•  XHTML is used for mark-up (HTML 4.01 can also be used)
• CSS (version 2) is used for control of typography, color, margins, etc
  • Light use of XHTML tables for layouts, letting CSS do some of the work
  • Transition to CSS table-less layout
  • DOM-based JavaScript/ECMAScript, w/ code forking to accommodate 4.0 versions of IE and Navigator (i.e., NY Public Library)
• Accessibility attributes and testing

 

Benefits

• Backward compatibility (reasonably so)
• Forward compatibility
• Paves way for eventual transition to XML-based mark-up and pure CSS layout
• Fewer maintenance problems (remove proprietary code)
• Increased accessibility
• Partially restores document structure to documents
• Begins restoring elegance, clarity, and simplicity

So if Microsoft has over 100 million Customers, is it not a really the ‘de-facto’ Standard?

Well, that is the 800 pound gorilla in the room and certainly a question Microsoft would love to have you all to answer it unanimously with a resounding YES!
But the truth is that much of this standards thing has evolved as a direct counter-reaction to Microsoft, and a resistance to allowing them to take total control of our destiny.

If the basic tenet of Internet is to provide democratic access, then it follows that most folks do not want one company or person to control the whole thing. Microsoft would love to have you consider them to be all you need. After all, they were the ones who broke the backs of Netscape’s business plan by providing free access to Internet Explorer… and became the focus of all the anti-trust suits because, as it was the omnipotent operating system in which IE was (the only) packaged browser.

We have seen what non-standard html coding can do to the innards of websites. But that is not the extent of it… the thing you need to know is that Microsoft are not the only folks who haven’t quite figured this standards thing out.

Case in point.. take a look at this chart ( Click on the image to expand it ):
[one_third]..[/one_third][one_third]
[/one_third][one_third_last]..[/one_third_last]

What this says that each browser supports at it own level the differing media standards. The hope is that, once HTML5 becomes more fully supported (right now it is at approximately 40%.. with the hope that it reaches maximum majority by the end of next year), things will come around. Microsoft has even given it up by stating it will support standards (although I bet you dollars to donuts that it will be its own “version” of support)… Adobe recently announced it has given up on trying to support Flash for mobile devices (giving in also the the standards concept, thanks in part to Apple’s refusal to support Flash… and many other Adobe products a story that needs to be told but to do so here would be a diversion… so, all I can say is “more to follow”…

The Standards Umbrella (The so-called “Holy Trinity” of Standardization)

The “TRINITY” Model enables designers to do the following…

• Attain more precise control over layout, placement, and typography
• Develop sophisticated behaviors across multiple browsers.
• Comply with accessibility laws w/o sacrificing beauty
• Cut down redesign time
• Support multiple browsers w/o multiple versions
• Support non-traditional devises
• Deliver sophisticated printed versions of any web page w/o having to create “printer friendly” page versions
• Separate style from structure
• Transition from HTML to XHTML
• Forward and backward compatibility

 

Importance of Tags

• 1^st came about universally with Internet Explorer₅/MAC
• 1^st teasing of web standards
• Support for XHTML and ECMAScript, and nearly all CSS₁ standards, and DOM
• Varied display and performance according to listed at the top of a web page’s mark-up (DOCTYPE switching)
• Offered text zoom for accessibility
• Caused Netscape 6 to do same

 

XML and HTML Compared

• Same parent technology
• HTML is basic language for mark-up with fixed number of tags and rules
• HTML is merely a formatting language with no information about content
• XML is a “super” mark-up language from which programmers can develop other custom mark-up languages (such as XHTML)
• XML (Extensible Mark-up Language) is bound by consistent rules and can be used beyond the web…
• OSX uses it to store files and for preferences
• Flash & Dreamweaver use it under the covers
• Quark & Adobe use it to store preferences
• Carries info about content (use in database exchanges)
• Customizable
• Ability to transform data from one format to another
• Universal in nature (interoperable), making all XML applications compatible

 

What is XHTML?

• A reformulation of HTML (replaces HTML 4.0)
• A bridge between HTML and XML
• An XML-based mark-up language that works and looks like HTML with a few differences:
  • Tighter “house” rules (if you open a tag, you must close it)
  • An outcome of XML.. Can’t serve raw XML on most browsers
  • Able to transform data, including Scalable vector graphics, and other objects.
  • Works in most new Internet devices (like Palm Pilots)
• Works consistently with CSS
• Will progress to the point where it won’t be backward compatible w/ HTML
• Will include new tags (LINE vs BR, HLINK vs A HRef)
• If use in conjunction with CSS, will be consistent in all browsers

 

CSS Progression

• CSS₁ was initiated (1996) to change fonts, colors, etc, but…
• Initially IE and Navigator performed differently
• Also used as an attempt to overcome compatibility issues..
• Can change what means, for example
• Some used CSS to impose standards, others to override them
• Some abandoned CSS with structural mark-up
• instead of
• Main feature of CSS is inheritance… streamlining production and reduces bandwidth by enabling general rules to percolate down the document tree
• CSS₂ came along (2001) to impose some structure
• Use XHTML for structure; CSS for layout; scriptg for interactivity, and eventually, php, xml for context

 

CSS Redesign

• Goals:

• Equally usable in graphical and non-graphical environments
• Permit mark-up to be free of all layout tagging
• Be compact and valid
• Contribute to accessibility designs in all browsers
• Deliver branded look w/o bloated bandwidth and other resources
• Visual interactivity and color matching (no longer required to be ‘web safe’)
• User customization (THE beginnings of the Semantic WEB
• Thoughtful handling of text
• Clearer navigation rules

 

Scripting

• Some Scripts are more equal than others…
• Netscape’s JS vs ActiveX vs Jscript
• Led to some sites becoming valid with Internet Explorer-only…
• Free mark-up validation service

 

What is DOM?

• Browser independent, platform neutral language neutral interface that allows“programs and scripts to dynamically access and update the content, structure, and style of documents…. The document can be further processed and the results of that processing can be incorporated back into the presented page.”
• In plain English, DOM makes other standard components of your page (style sheets, mark-up elements, and scripts) accessible to manipulation.
• DOM is a standard way to make web pages behave like applications
• Allows the page to act independently of the server… for example – to permit a page to be sorted or translated into another language without a server connection.
• Dynamic menus
• Style switching

To summarize: Using a movie metaphor:

 

• XHTML is the screenwriter
• CSS is the Art Director
• Scripting languages are the special effects and interactivity
• DOM is the director who oversees the entire production

Lesson #1:

Part A: Check out this review of copyright/fair use on Wikipedia. It is pretty accurate!

Part B: Watch this video:

Lesson #2: What is all the fuss about Remixing?

Now that we have covered copyrights to a certain degree, it is time to look at the concept of remixing. Some of you alluded to the fact that copyright laws need to be changed based on changes in technology. The remix movement is certainly one of those considerations. Wikipedia actually has a very good description of all this.

There is a movement afoot to change the copyright laws to allow remix. The thought is that remixing is really a recreation of content into a new form and should be allowed.

This discussion has ranged from the very serious to satire.

Colbert followed this up with his now famous Green Screen Challenge

In fact, this whole idea started a revolution in thinking as seen by these videos

Lesson #3: What is the Open Source Movement?

Aligned with (and adding confusion to) the remix movement is the idea of “open source”.

Links:

There are lots of questions out there about copyright, downloading and sharing files and maintaining a balance between sharing information and protecting your identity. Since it does not serve us well to ignore new technologies, we, as educators, must learn how to handle the issues that arise so we might enable students the opportunities for learning. In previous modules we looked at copyright and fair use, and how we can avoid problems. Now we will look at other ethical issues surrounding data collection (FERPA in particular), and discuss your rights and responsibilities in this area.

Ethics n. Date: 14th century: the discipline dealing with what is good and bad and with moral duty and obligation; a set of moral principles or values; the principles of conduct governing an individual or a group; a guiding philosophy. Source: Webster Dictionary

Ethics are the moral guidelines that govern behavior. Ethics describe how we determine what is good and right, from what is bad and wrong. Teachers and students need to be aware of appropriate and acceptable behaviors in relation to computer practices and Internet usage. In this module, we will discuss ethics as it relates to computer usage. Computer ethics focus on unauthorized use of computer systems, software theft (piracy), information privacy, unauthorized collection and use of information, and copyright. Computers make the collection of data easier. They also impose great ethical challenges to us.

Risk Management

Computer Viruses

Several of the Ten Commandments of Computer Ethics deal with using a computer in ways that hurt others. People who create and spread computer viruses are acting in unethical, harmful ways. Often, computer viruses steal information from your computer, read and destroy personal files, and always interfere with a person’s work on the computer. When downloading software from the Internet it is imperative you have virus protection software in place on your computer. Some viruses are harmless and may simply freeze your computer system. Other viruses can cause extensive damage. The majority of viruses only infect Windows computers, however, the problem is increasing for Macintosh computer users as well.

It is believed that there are currently over one million known viruses in existence. It makes sense to protect your personal computer, classroom computer, or computer network by installing virus detection software. Most major companies that offer virus detection software allow updates to be downloaded from the Internet at no cost. Check with your school Technology Coordinator to find out how often your virus protection software is updated. For more information on computer viruses visit the following Web sites.

• Symantec AntiVirus Research Center. Symantec offers a great deal of valuable advice on products and virus protection.
• McAfee – Recent virus threats and information
• Virus Encyclopedia – LOTS of information here about viruses, trojan horses and how they work.

CREATIVE COMMONS

A Solution For Copyright and Fair Use?

Copyright and the web bring interesting challenges for educators, and the wealth of images available on photo sharing sites, video sharing sites and web pages compounds the problem. Learn more (and teach) about Creative Commons licensing, which allows authors, photographers, artists, illustrators, musicians, etc. to decide the amount of control they have over their own works.

“The Creative Commons (CC) is a non-profit organization devoted to expanding the range of creative works available for others to legally build upon and share. The organization has released several copyright licenses known as Creative Commons licenses. These licenses, depending on the one chosen, restrict only certain rights (or none) of the work instead of traditional copyright, which is more restrictive.” (Wikipedia)

Anyone who creates and publishes work can choose how they are willing to share their work.

Learn more with this short comic strip about how Creative Commons licensing works.

See (and share) the great videos about Creative Commons here. Also, see

• Understanding Creative Commons, Part 1
• Understanding Creative Commons, Part 2

See “A Creative Commons license provides clear guidance to students and educators as to how they may legally use the intellectual properties of others and how they may protect their own.”

When it comes to photos, Flickr lets you establish the rights you have to each image as you load them on the website. You can also search by CC license. If you’re looking for images to use in a website or slideshow, you can search only for photos with Attribution licensing, meaning others will let you copy, distribute, display and perform your work and derivative works if you give them credit. See flickrCC, where you can search for Creative Commons licensed images and link back to the source.

From Doug Johnson’s Blue Skunk Blog: “There are two main ways to find Creative Commons licensed materials. CC has a specialized search tool at and there is a list of directories by format. Both can both be effective. Google Advanced Search also allows searching by ‘usage rights.'” The Creative Commons search tool will help you find photos, music, text, books, educational material, and more that is free to share or build upon utilizing Creative Commons enabled search services at Google, Yahoo!, and Flickr.

A great model resource for students: See these Guidelines for Multimedia and Web Communications.

Here’s a wiki with links to TONS of copyright free and creative commons licensed images, sounds, music, and more!! You’ll find what you need here for sure!

“Most of the media in these collections are attached to generous copyright licensing. Though you may not need to ask permission to use them when publishing on the Web for educational purposes, you should cite or attribute these images to their creators unless otherwise notified! If you see any copyright notices on these pages, read them for further instructions. (Things change.) Note: always check individual licensing notices before publishing on the Web or broadcasting!”

Open Source Software

According to Wikipedia:

Open-source software (OSS) is computer software that is available in source code form: the source code and certain other rights normally reserved for copyright holders are provided under a software license that permits users to study, change, improve and at times also to distribute the software.

Open source software is very often free and developed in a public, collaborative manner. Open-source software is the most prominent example of open-source development and often compared to (technically defined) user-generated content or (legally defined) open content movements.

Here is one of the best places to find Open Source Software

If for example, you are a great fan of Google Sites (or wiki Spaces, for that matter), know that if you plan on investing considerable amount of time and energy developing tools or sharing data on them, what their copyright licenses are (some sites actually require you give up your rights to data you have created, as we shall see later on), and bet on them being around in the future. You Tube, for example, may seem very stable but no where are there any guarantees that they will continue sharing their site, or not begin charging for its services in the future. A good rule of thumb is that do not put anything on these sites that you could not live without past the current semester. Even links to videos are at the mercy of their creators, who may decide to take their videos down after a while… or contain copyright violation that forces them to remove the video.

In this course, we are going to attempt at least help you become as independent of these freebie sites as possible. We do not wish to alarm you, we simply want you to be intelligent consumers and be smart about how much effort you put into creating products/artifacts that you want some assurances will be around for the long haul.

FERPA

From the ed.gov Web site:

Family Educational Rights and Privacy Act (FERPA)

Family Policy Compliance Office (FPCO) Home

The Family Educational Rights and Privacy Act (FERPA) (20 U.S.C. § 1232g; 34 CFR Part 99) is a Federal law that protects the privacy of student education records. The law applies to all schools that receive funds under an applicable program of the U.S. Department of Education.

FERPA gives parents certain rights with respect to their children’s education records. These rights transfer to the student when he or she reaches the age of 18 or attends a school beyond the high school level. Students to whom the rights have transferred are “eligible students.”

Parents or eligible students have the right to inspect and review the student’s education records maintained by the school. Schools are not required to provide copies of records unless, for reasons such as great distance, it is impossible for parents or eligible students to review the records. Schools may charge a fee for copies.

Parents or eligible students have the right to request that a school correct records which they believe to be inaccurate or misleading. If the school decides not to amend the record, the parent or eligible student then has the right to a formal hearing. After the hearing, if the school still decides not to amend the record, the parent or eligible student has the right to place a statement with the record setting forth his or her view about the contested information.

Generally, schools must have written permission from the parent or eligible student in order to release any information from a student’s education record. However, FERPA allows schools to disclose those records, without consent, to the following parties or under the following conditions (34 CFR § 99.31):

• School officials with legitimate educational interest;
• Other schools to which a student is transferring;
• Specified officials for audit or evaluation purposes;
• Appropriate parties in connection with financial aid to a student;
• Organizations conducting certain studies for or on behalf of the school;
• Accrediting organizations;
• To comply with a judicial order or lawfully issued subpoena;
• Appropriate officials in cases of health and safety emergencies; and
• State and local authorities, within a juvenile justice system, pursuant to specific State law.

Schools may disclose, without consent, “directory” information such as a student’s name, address, telephone number, date and place of birth, honors and awards, and dates of attendance. However, schools must tell parents and eligible students about directory information and allow parents and eligible students a reasonable amount of time to request that the school not disclose directory information about them. Schools must notify parents and eligible students annually of their rights under FERPA. The actual means of notification (special letter, inclusion in a PTA bulletin, student handbook, or newspaper article) is left to the discretion of each school.

As a school teacher, you will be required to know the basic tenets of FERPA. Dealing with technology may cause you more concerns, especially as it relates to disclosing potentially private information.

In this lesson, first We will look at Web browsers and browser plug-ins. Then we will investigate some ways that you can create Web pages of your own.By far the most important piece of software for utilizing the World Wide Web is a Web browser. This is the program that “runs the show” for you. It navigate the Web pages that you select, and it converts the HTML programming code (recall we have already looked at this) for those pages into screens of text, pictures, and sounds. Without a good Web browser, the WWW would be useless. It is like a “window” to the Internet.

The video below comes from a PBS series on the history of the Internet hosted by Robert Cringely. The whole series was quite entertaining but long to watch. So I have extracted for you the segment that describes how the browser came to be and how Netscape got into the business.

Anatomy of a URL

What does Uniform Resource Locator Really (URL) Mean?

Fortunately, just that.. it is a uniform way to locate your resource (in this case web site). Take a look at the picture below. Each part of the URL is spelled out for you:

In order to understand why we are being very specific as to the name of the files and the location/folders that you post your assignments, you need to know the make-up of URLs and how browsers are able to find things.

In short, there are three things that can go wrong:

1. wrong folder name… browsing tends to be unforgiving. files using capital letters need to be specified in the URL address box (meaning you probably should avoid them when possible), spaces can sometimes be misinterpreted (therefore use underscores, dashes or some other kind of separator). So, when you are asked to name your file, be sure you follow it exactly. When your instructor specifies a variable (like your last name), the following is standard generally used: [yourlastname]-newsletter where [yourlastname] is your actual last name (no spaces and the brackets are omitted). They are there only to let you know that we are asking for a variable. for example:  lenz-newsletter.html
2. wrong extension… .htm and .html CAN MEAN the same thing but some servers do not recognize them as being equal. The name of your main page file names must be called index.html. Please be EXACT…. do not call it ANYTHING ELSE!!!!! not index.htm, not INDEX.HTM, not index1.htm but index.html. Please do not get cute here.. you do not have to name your site, your project, your team etc., in the file name. This is explained in more detail below.
3. speaking of folders, the other thing that will cause your project not to be found is that you place your project inside the wrong folder set up on the site to receive it. As noted in the anatomy of a URL shown above, the URL is only ‘uniform’ if the folder designations are followed exactly. To repeat, we are asking for a very specific folder name. Your files MUST be loaded into a folder with the EXACT folder name!!!

What the index.html page does

There is one other ‘special’ page type in this. Under normal situations the hosting server company will specify to you how your main page needs to be named. This could be index.html, index.htm, main.html, etc…. If you are using one of those, follow their instructions.  The default is almost always index.html.  What this gets you is removing the need to actually name your main page in the URL (saving your user few key-strokes). We are not using this but it still works the same. If you name your main page is called index.html, then you would not need to specify anything in the URL.. the browser will automatically see it and open it.

To recap, notice four things here:

1. You need the http:// designation… this is what specifies that it is Web page to be located by the browser.
2. The file type html may be saved as htm by some editors. Go ahead and save it in the program and then rename the file to .html before you send it to me. In the old days MACS used to use the four letters and Windows three.. We ask you to a standardize and only use index.html for your main pages.
3. Notice no spaces are used between words in the folder name. This is not required but recommended in order to maintain integrity of the designation (typos etc).
4. Lastly, spell out the file names exactly, capital letters included. Some servers ARE CASE SENSITIVE and will not locate your page if you use capitals but do not specify in the Browser. It is your choice to use capitals letters or not but be aware of the consequences.

Sorry it has to be so long, but we set up a system for us to use where all the projects are kept separate. If you lease a Web site server provider, yours would not be as long and could be called whatever you wanted it to be. For a site called edtecher.org the edtecher part is referred to as the domain name. These are managed by ICANN, an international non-profit organization. To get one of your choosing, you have to pay a renewable license fee.. usually $9-10 per year.

The “.org” part is called the Top Level Domain or TLD. This is something you should study a bit so you know its history and future evolution.  There are now at least a hundred top level domain types that define location or content type.

What the web pages do, then, is create a GUI to manage access to the folders and files located on the server. So, in the case of our sample project , if there was no main page when you specify the location (without index.html front age), this is what you would see (example is based on the file naming conventions used for another course):

In our example there are no sub-folders or files. But if there were, these would simply be listed. You could actually click on them to see them, but this is kind of messy. So, the first thing that a Web page does is to create a clean user interface to the file structure (GUI).  If there was a file named index.html the browser would render the html on that page

The Big Six

There are dozens and dozens of browsers out there (as you will see below). But based on usage, there appear to be Six that have garnered the most attention:

IT IS LIKELY THAT YOU HAVE YOUR FAVORITE AMONG THE ABOVE. THIS COURSE PROVIDES YOU AN OPPORTUNITY TO EXPLORE ONE OR TWO OF THEM TO SEE IF YOU LIKE ANY OF THEM BETTER. EACH HAS ITS ADVANTAGES AND DISADVANTAGES. AND SOME COMPANIES ONLY BUILD TO ONE OF THEM.. MEANING THAT THEIR WEB SITE MAY NOT WORK AT ALL OR WITH LIMITED CAPABILITIES. FOR THAT REASON IT IS LIKELY THAT YOU WILL HAVE MORE THAN ONE ON YOUR TASK BAR AND REFER TO EACH ONE FOR SPECIFIC PURPOSES.

Net-Net (Sorry for the Pun)

Internet browsers are your gateway to the Internet. In looking for a browser be certain to look for good security. You want a browser which will guard against pop-up windows, viruses, and phishing frauds. Most all browsers offer the same features, but it’s the little differences which will help you decide.

The order of popularity has evolved over time. Their differences are a study in technology innovation.

Browser Plug-Ins

Adding to the utility of these different browsers is the add-ons/plug-ins offered by each. Ever notice how some files you can open up to watch, listen to, or look at right off your browser (like an audio, movie or image)? While others you have to download to your computer first (like a pdf file or Word document)? Most Web browsers incorporate multimedia features so you can read them right off the the Internet. Most likely, your Web browser will figure out whether it cannot read the file the problem and tell you that you will have to download it. In some cases, you will have to determine what’s missing on your own. These additional programs have been given a very sensible name – plug-ins. They ‘plug into’ your Web browser to give it additional multimedia powers. As technology advances, so does the ability to do things right on the Internet.

The latest revision to the Web, HTML 5.0 will contain more and more of these built-in capabilities. That means you will not have to download them to run them, and this includes Word docs spreadsheets, video, audio and even Flash and Shockwave files.

Here are a few plug-ins that you might already have. When you look at these sites you will notice that there are free “basic” plug-ins. For now, some of them carry a price tag but chances are in the next three years or so these cost based items will become freebies also.

• Adobe Acrobat Reader: As mentioned, this program allows your Web browser to display documents in their original form. It is very widely used.
• RealPlayer: Allows your computer to play all kinds of audio and video programs. It can turn your computer into an online radio or television.
• Shockwave and Flash: These are popular plug-ins from Adobe that animate e-cards, banners and screens on Web pages. They are very common, and most versions of Web Browsers include them. However, if your Web browser is older, you may need to update these plug-ins.
• Quicktime: This video player from Apple is one of the most common video player for Web pages. It works on both Mac and PC computers, and it allows you to play video clips that you download.
• Firefox Add-ons – Firefox has released a complete Website showing you all the available plug-ins
• Windows Explorer Plug-Ins – Not to be outdone, there are also hundreds of plug ins for Windows Explorer.
• Check your favorite browser (such as Safari, Chrome etc) to see what plug ins are available for these.

---

 

While it is telecommunications hardware that provides the path for using the World Wide Web, all the hardware would be worthless without programs that actually do the work for you. In this lesson we will begin with a review of the current state of the Internet (see below, then spend some time reviewing how we got to this point. There is so much content that we need to break it up into several lessons. This cycle we will look at the Internet beginnings, the formation of the World Wide Web, and the basics of how browsers work. In the next cycle we will look at the evolution of HTML and how WEB 2.0 came about (that which provided the kernel for social networking and file and data management on the Web) and standardization — plus a peek into the future (HTML5). So, sit back and enjoy, it is indeed an interesting history lesson.

So What IS the Internet?

This five minute video provides a basic overview:

Current State of the Internet

Now, let’s take a look at the evolution of the Internet and how we go to this point:

This video provides you some idea of the volume of traffic on the Internet:

Go to top

So, How did we get here… really?

 

This entry clip from Robert Cringley’s show produced for NPR back in the late 1990s is a good way to start:

Ok ok in 1996 they predicted that the Web would take over the world. And they were close. But for sure they had no idea how entrenched it would become in our society (or did they?)

As a point of reference, the best Known Internet History Timeline comes in the form of Hobbes’ Internet Timeline

How it all got started… really

1945: Vanevar Bush publishes paper on memex machine.. A machine intended to change the way people store and retrieve books, records, and notes… to augment “human memory”… people did not take him seriously. Meanwhile from another side of the world, another visionary had his own ideas about Xanadu:

OK so Ted Nelson has thin skin about his ‘discovery’. And yes there seems to be some bitterness about Tim Berners-Lee’s ‘invention’ So just who was this Berners-Lee guy anyway?

How it all Got Started

I guess we can all thank the Russians. Back in the 1950s right after the War, folks in the USA were getting back to normal, resting on their laurels, thinking the USA was the king of the world. Education (especially higher ed) was suffering.. kids went to school to party. Math and science education/focus fell to the wayside. The along came Sputnik to change our lives for ever:

The Architecture Behind it All

Actually there were two parts:

Part #1 – The Software:

The initial design was based on two visionaries:
a) J.C. Licklider from MIT:

“Lick” then moved to DARPA to develop it..
Leonard Kleinrock (at UCLA) developed the theory of packet switching. “Information Flow in Large Computer Nets” as a doctoral thesis..

Lawrence Roberts of MIT in 1965, connected their computers with a California computer, showing the value of packet switching but also the inadequacies of conventional telephone line switches.

Roberts also moved over to DARPA

Part #2: The Interface Message Processor (IMP)

As DARPA was funding several universities’ research budgets, it asked that they join the ARPA NETWORK. Most were reluctant to join, due to confidentiality issues… but DARPA PREVAILED. The ARPANET was brought online in 1969, connecting UCLA, Stanford, UCSB, and the University of Utah:

To build the network, ARPA called upon an emerging company out of Cambridge, MA (also the home of MIT):

Transforming DARPA into a commercial venture

So the rest, as the say is history. But to transform this basically military operation into a commercial venture took some new players,
As DARPA was non-commercial, it took literally ‘an act of Congress” to begin the transformation:

 

It also took some new technology… namely, the browser… enter “Mosaic”… One of two original “killer apps” on the Internet. We explore how that all came about in our lesson on How Browsers Work.

So just what is the definition of the Internet?

“A global information system that:

• is logically linked together by a globally unique address space on IP or its subs. Follow-ons.
• is able to support communications using TCP/IP or its follow-ons, and/or other IP compatible protocols.
• provides, uses or makes accessible, either publicly or privately, high level services layered on communications and related infrastructure described herein.”

And What is the WORLD-WIDE WEB?

It is an assortment of computer systems connected by the Internet employing a common protocol (standard) HTTP sending and receiving hypermedia documents…
well not exactly.. it has evolved into a second iteration (Web 2.0) that we will discuss later on (and eventually Web 3.0)…. but for now, here is the picture of what is known as the ‘backbone’:

all based on Web Browsers and hyperlinks:

• electronic documents containing multimedia information
• hyperlinks (text-based “links”) to cross-reference pages and resources
• these links provide automatic access

 

On the server side:

Web servers that provide:

• remote systems that store Web documents
• process client requests and send resources
• access to databases
• hypermedia documents are “navigated” using these links

---

 

Internet ‘apps”

 

• electronic mail (2nd “killer app” for the Internet)
• telnet (computer-to-computer)
• file transfers (FTP)
• World Wide Web (WWW)
• asp & php

 So, the World Wide Web is actually a bundle of huge ‘apps’ (applications) found on the Internet… 

---

 

Basic Protocols

 

• TCP – for networks
• IP – for packets
• TCP/IP – Internet
• HTTP – for web pages (w/in TCP/IP)
• FTP – to transfer files (w/in TCP/IP)

 

What is TCP/IP?

(transmission control protocol/Internet protocol)

 

• It was developed by a Department of Defense (DOD) research project (ARPA) to connect a number different networks designed by different vendors into a network of networks.
• It was initially successful because it delivered a few basic services that everyone needed (file transfer, electronic mail, remote logon) across a very large number of client and server systems.

Features

• Several computers in a small department can use TCP/IP (along with other protocols) on a single LAN.
• It is composed of layers:
  

  IP – is responsible for moving packet of data from node to node. IP forwards each packet based on a four byte destination address (the IP number). The Internet authorities assign ranges of numbers to different organizations. The organizations assign groups of numbers to their departments. IP operates on gateway machines that move data from department to organization to region and then around the world.

  TCP – is responsible for verifying the correct delivery of data from client to server. Data can be lost in the intermediate network. It adds support to detect errors or lost data and to trigger retransmission until the data is correctly and completely received.

  Sockets – is a name given to the package of subroutines that provide access to TCP/IP on most systems.

• The IP component provides routing from the department to the enterprise network, then to regional networks, and finally to the global Internet.
• This network design allows the construction of very large networks with less central management.
• The downside is that, because of its ability to automatically recover, network problems can go undiagnosed and uncorrected for long periods of time.

What About multimedia Streaming.. what are it needs and why does it require a different protocol?

The truth is,TCP/IP (using HTTP protocol) is well suited for transfer of static Web pages. TCP enforces reliability without regard to timelines. Therefore, it is not suited for use in time based multimedia programs that require timely delivery and more rigorous error detection. Another protocol needed to be invented. The standard became RTP/RTSP (first invented by Real Networks), which became the precursor to the current video streaming standards. More about that later.

When you are done, click here to go to the next Lesson/Activity