Archive for January, 2009

Free education anyone?

Wednesday, January 28th, 2009

The following article appeared in the NY Times, http://www.nytimes.com/2009/01/26/education/26university.html?_r=1. The web is certainly changing things. Learning objects are everywhere on the web. The educators of the future will be curriculum designers, advisers, learning object creators, learning object aggregaters, assessment specialists, and provide some sort of gateway or certification process to assure industry that employees are ready. Wait!! That’s what we’re doing now!! Son of a gun. The business model sure is changing though.

;-)

The history of the internet

Tuesday, January 27th, 2009

The following video, The History of the Internet, an animated documentary by Melih Bilgil, was featured by Youtube.com on 1/27/2009. It is a great illustration of the beginnings of the TCP/IP protocol which is the underlying communications protocol that connects computers to the internet. The HTTP protocol, a communications protocol, runs on top of the TCP/IP connections protocol and should be readily familiar to most web designers since it is the protocol used for web page transfer. This video is a well-crafted, entertaining, brief (8:10), learning object. Thanks for sharing Melih.

About WordPad vs NotePad

Thursday, January 22nd, 2009

A student writes the following question…

“When I write my code in Wordpad and save as an htm text document, it looks like one. But after I open it in the browser to see how it looks, the icon in the folder no longer says .htm and it appears to be a Firefox document.

Is that right? Or am I doing something I shouldn’t. I can reopen it by telling it to open in Wordpad, but the icon never looks like a text document again. “

That’s a great question. First, the Windows OS comes with two native programs for creating text files: Notepad, and Wordpad. NotePad allows us to create documents using simple ASCII characters, often referred to as “plain text.” You can see that by the default extension of .txt. WordPad in contrast saves its document using the .rtf extension (Rich Text Format). Rich text format includes codes that describe characters. For example, like with Word (.doc) or OpenOffice.org (.odt), the rtf format provides the ability to control the presentation of visible characters with invisible characters that control boldness, italics, underlines, margins, font-sizes, font-families, etc. Plain text does not include that type of information.

When we create HTML code by hand on a PC, we use NotePad. That’s because we do not want any characters entering our code that shouldn’t be there. HTML documents are created with ASCII or plain text and are OS and platform independent. A HTML document created on a PC can be edited and viewed on a Mac, Sun, Linux, or Unix installation.

In brief… edit in Notepad. Save with a .htm or .html extension instead of the default .txt extension. When you want to edit the file, open it in NotePad. When you want to view or “render” the file, open it in Firefox, Safari, Explorer, Chrome, Opera or any of the other web browsers.

About archiving files

Tuesday, January 20th, 2009

Definition

According to the Merriam-Webster online dictionary, an archive is a repository or collection especially of information 1. Using this definition we can say that to a web designer, an archive is the collection of all the files necessary for a web site to function properly. A web site is a collection of files. Those files, which can reside in one or more folders (directories), will often include the following types of information:

  1. HTML formatted content
  2. Graphics (image files like jpg, gif, and png formats)
  3. Videos
  4. Audio
  5. External CSS (Cascading Style Sheet)
  6. External Javascript
  7. Flash

Imagine taking your entire web site, with all of its html, images, CSS files, and media files and saving them all into one file that can easily be backed up or sent to another person over a network or through email. Next imagine compressing that one file so that it is smaller than the sum total of the entire web site. That is a web archive. When the file is decompressed, it returns to its previous size, each folder is recreated in the right hierarchy and each file is placed back into its original folder.

Archiving can be used in the following situations:

  1. You need to send a folder of files to another member of a design team
  2. You do not have direct access to a web server and need to send the web site archive to the webmaster. The web master will then decompress the file and place the files in the correct folder on the web server (this is more common than you might think).
  3. The project is completed and you want to back up the project without wasting a lot of space. For example, it it is a large project, you want it to be able to file on a single CD or thumb drive
  4. You are taking an online class and the instructor wants you to upload your project to a submissions folder for a grade
  5. You are backing up different versions of the design process and will name each archive with a date so that you can document the project timeline or simply be able to revert back to a previous design idea

Compression formats

There are many different types of archiving and compression formats. Some only archive, some only compress, some do both. Several of the most common are .zip, .sit, .tar, .rar, and .tgz. Wikipedia has a great article on the different formats and their purpose and platform2. For our purposes, we will only examine the process of creating a .zip archive because it is supported natively on both the PC and Mac platform. The term natively means that no additional software is required beyond the most current version of the operating system. There are software applications designed to create, and expand archives, however we will look at the ways to create the .zip archive using the built-in tools that come with Windows and OSX.

The process

While you can individually select specific files on a one by one basic to include in a compressed archive when it is better to do so, to archive an entire web project it is usually easier to select the root directory file that contains all the files you want to archive. For example, let’s say we have a folder named unitA. The unitA folder contains all of the files necessary to complete the unit A activities.

In Windows

  1. Select the unitA folder
  2. Click the right mouse button. You will get a context sensitive menu
  3. Select the Send to option. A submenu will appear
  4. Select the Compressed (zipped) folder from the options. A new file will be created and named unitA.zip

In OSX

  1. Select the unitA folder
  2. Press and hold down the Control key and then click the mouse. You will get a context sensitive menu
  3. Select Compress “unitA” from the options. A new file will be created and named unitA.zip

Extracting an archive

Extracting or expanding is the term used to describe taking an archive and returning it to its original set of files and folders. On both the PC and Mac platforms, the .zip format files are self-extracting. This means that double-clicking the .zip file will automatically create a new folder with the same name and create a copy of all of the files and subfolders in the correct order and hierarchy. No special software is needed.

Note: An assumption is being made that Windows XP and OSX are being used. If you are using an old version of the operating systems, then a third party software application may need to be used to create and extract the archives.

References

1.Definition of archive. Merriam-Webster online dictionary. http://www.merriam-webster.com/dictionary/archive
2.List of Archive Formats. Wikipedia. http://en.wikipedia.org/wiki/List_of_archive_formats

Coding HTML in TextEdit

Friday, January 16th, 2009

I received the following question from one of my online students…

“hi! I’m working on the html assignment for Unit A.  I’m trying to do the exercises on A-11, but I can’t seem to make it work. I’ve done it repeatedly, but when I try to open the document in my web browser it just keeps all of the tags, it’s not doing anything like Figure A-10.  It’s talking about a PC so I didn’t know if that had anything to do with it.  I’ve tried to open it on both Safari and Firefox and I can’t make it work.  Also, it says to save it under all file formats and manually put the .htm extension.  Textedit doesn’t allow me to do that.  It does, however, give me a choice to save it as the html format.   I feel like I’m having problems translating PC to Mac language. What am I doing wrong???”

This student is clearly working on the Mac platform. The native text editor on the Mac is TextEdit. Unlike its PC counterpart (Notepad), TextEdit has the capacity of interpreting, editing, and saving in several formats:

  • .txt (ASCII character set, or “plain text”)
  • .rtf (Rich Text Format. A platform independent wordprocessing format)
  • .htm (HTML format)

For the purposes of coding in HTML you want to work in plain text. This is why HTML documents are platform independent. ASCII characters are part of an open standard and are able to be written and read by all devices and platforms. An HTML document can be read by client programs regardless of whether you are on a PC or Mac, or are using any number of operating systems (proprietary or open source).

In TextEdit, you need to set some preferences to ensure you are opening, working, and saving a document in plain text mode. To do that follow the next few steps:

  1. Open TextEdit
  2. Go into preferences window [TextEdit > Preferences]
  3. At the top of the Preferences window > Select the New Document tab
  4. Under the Format Section > Select the Plain Text option
  5. Select the Open and Save tab at the top of the Preferences window
  6. In the “When Opening a File” Section > Select the “Ignore rich text commands in HTML files” option
  7. Close the Preferences window

Note: If you already have a document open, you will need to close that document and re-open it after having made the changes to the preferences settings. They will NOT apply to your open document

You should be set. Now you should be able to create your HTML code, save it with a .htm extension, and open it in TextEdit and see the code you previously entered with no problems. To see the HTML code rendered, open that same file in a web browser.

I hope this answered your question. If you have further question, send me an email and I’ll answer them. Let me know if you found this tutorial helpful