Planning and Designing Web Content

What I Learned

In Module 6, I learned content planning, how to name my files, elements of a good design, the language of the web, why HTML is the web language, the difference between HTML and XHTML.

Content planning is very important when building a website. All of the content needs to be organized in one folder so the website can easily find everything that is in the markup. You should also establish a target audience and what you want to accomplish. Also, you should be able to plan a storyboard with all of your content, so when you are building your site, you will easily be able to establish a navigation system.

Naming your files is also an important factor when creating a website. There are certain rules that need to be followed. The rules are:

• All file names should be in lowercase.
• All file names should only be letters and numbers - no apostrophes, colons, semicolons, bullets, slashes, etc.
• Aside from letters and numbers - you can use tilde(~), underscore(_), hyphen(-), or period(.).
• File extensions for web pages will be either .htm or .html – both .htm and .html are both “HTML files” but .htm is mostly used on PCs and .html is mostly used on Macs.
• Each bitmapped image will be optimized for the web and under 50k each.

There are also certain elements or guidelines that should be followed in order to make a good website design.

• A website should be a “shortcut” to information, which can be accomplished with good site navigation.
• Websites should be user friendly - homepage should load quickly, get the users attention, and clearly present what is on the website.
• Information should be clearly listed.
• A minimum amount of text should be used.
• The background should be clean and not busy.
• A consistent theme should be used.
• The download time should be quick and kept to a minimum.

Html is the language of the web. HTML stands for Hyper Text Markup Language and uses the http:// protocol. HTML is a code that tells your browser how to make the webpage look. With HTML, you can control the web page fonts, colors, images, the layout, etc. When you click on a link the server send the HTML document directly to your computers browser. Basic HTML does not described how the text looks, it just uses the code that describes the function the text has in the document. For example, text appearing in the document heading is marked with a heading code (h1, h2, h3).In order for browsers to be able to read HTML markup, a set of rules or syntax must be followed. If these rules are not followed, the browser may not be able to translate the markup in the document.

Why is HTML the language of the web? Because HTML coding can be done with any plain text files that can be created in word processor or text editor on any type of computer. There are also programs that allow you to make HTML files without knowing the codes; these are called HTML Authoring programs. Even these programs are available; you still should learn HTML code. The reason you should still learn to code are:

• Knowing the code gives you an understanding of the structure of a web page.
• Knowing the code makes it easier to use HTML Authoring programs.
• HTML Authoring programs are not perfect, and you will still need to fix or change a code.
• Learning the code allows you to understand how other people developed their web pages.

Now that you know all of that, you should also know that HTML has been “phased out” by the W3C. HTML can still be used, but web development is focusing more on XHTML and XML. XHTML stands for Extensible HyperText Markup Language. XHTML is aimed to replace HTML, almost identical to HTML 4.0, is a stricter and cleaner version of HTML, its HTML defined as an XML application, and W3C Recommendation XHTML is a markup language where everything has to be marked up correctly. XHTML is also case sensitive, meaning only lowercase letters can be used and HTML does not need to be in all lowercase letters.

New Terminology

• HTML - Hyper Text Markup Language
• Syntax - A set rules which HTML operates.
• HTML Authoring programs - A program that allows you to create HTML files without knowing the code.
• WYSIWYG - What you see is what you get. (Referring to HTML Authoring programs).

WL13 - Animoto - My Friends

Module 5 - Imaging for the Web, File Sharing, and Introduction to Web 2.0

What I Learned

 In module 5, “Imaging for the Web, Filing Sharing, and Introduction to Web 2.0”, I learned FTP, the difference between freeware and shareware,, what file formats are useable online, and what web 2.0 is.

FTP, or file transfer protocol, allows you to upload and download files to and from other computers connected to an online network. To access files on an FTP site, you need a username and password. You can either use your web browser or download an FTP client, such as CuteFTP or FileZila.

You can also share files over a network using P2P filing sharing (Peer to Peer). “A peer–to-peer filing sharing network allows files to be transferred between individual personal computers located on the same local area network or individual personal computers connected to the internet.” When using peer-to-peer, you have access to all different types of files like: movies, music, software, books, etc. Most of these types of files are copyrighted and it is illegal to download them without paying first. Being caught downloading copyrighted files can land you some major fines and possible jail time.

There are two different types of software you can download, freeware and shareware. Freeware is software that the author allows you to download with certain restrictions because the software is still copyrighted. Usually, the software is for personal use only and cannot be given to someone else, unless you have permission from the author. Shareware is software you pay for. Usually, there is an extended period of time you are allowed to try to the software for free, than you have to pay for it because once the trial period is over you will not be able to use the software anymore.

In addition to learning about FTP, peer-to-peer filing sharing networks, freeware and shareware, I learned the difference between a raster or bitmapped image and a vector image, optimizing images for the web, and which image format is best used for web. A bitmapped, or raster image, is composed of many different colored or gray dots, which as a whole create a picture. A vector image is composed of mathematically equations that draw lines and shapes to create an image.

There are different file formats you can use to save an image. You can save an image as a GIF (Graphically Interchange Format) or an animated GIF, JPEG (Joint Photographers Export Group), BMP (Bit-mapped files), TIFF (Tagged Image File Format), and PNG (Portable Network Graphics). 

• GIF image supports a transparent background, animation (special software is needed), and interlacing.
• JEPG is a file extension (.jpg) mostly used for photographs. They are more compressed than a GIF and are mostly used on the web for photographs.
• BMPs are older types of images that are produced by a paint program (Microsoft Paint). BMPs do not support high resolution, animation, compression or interlacing. TIFFS are used for desktop publishing applications.
• TIFF files are rather large and most browsers do not support them without a plug-in.
• PNGs use loss compression, interlacing, and one transparent background color. PNGs also support truecolor, which is 16 million colors.

The most commonly used on the web is GIF. GIFs are popularly used on the web because they most browser support them and they are easily read by other software. JPEGs and PNGs are used on the web as well, because they are supported by all browsers. TIFFs and BMP can be read by a browser, because it is a universal file format, but they are very large files, so most people do not use them on the web.

Lastly, I am going to touch on Web 2.0. Web 2.0 refers to web applications that center around information sharing and user custom designs. Web 2.0 site allow users to communicate with one other, have customizable profiles, share links, update information, delete information, etc. They can be social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies. Some examples of Web 2.0 sites are Facebook, Twitter, Photobucket, Myspace, YouTube, Blogger, and Wikipedia.

Learning Objects 

• Photobucket.com 
• Wikiepedia.com 
• Voki.com

New Terminology 

• Freeware – software that the author allows you to download and use without charge; however; the software is protected by copyright law, meaning you can use it only in the ways provided by the author. 
• Shareware – is software that you can download and try out, but you are expected to pay for the software if you decide to use it on a permanent basis.
• Peer-to-Peer File Sharing - allows files to be transferred between individual personal computers located on the same local area network (LAN) or between individual personal computers connected to the internet.
• Massively Multiplayer Online Games (MMOG) – thousands of players from around the world assume personas and play either on a turn by turn basis or in real time, are subscription based games.

 

WL12 - Create an Avatar using Voki