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

WL11 - Create an Image Slideshow Using Photobucket

Module 4 – Communicating and Collaborating Online

What I learned

Module 4 “Communication and Collaborating Online” was an “Introduction to Social Media.” In this module I learned how to describe the components of e-mail systems and email messages, what the various different online media tools were and how they are used, the different tools used for collaboration, how to use “social networking safely”, and I learned the differences between asynchronous and synchronous.

Email is widely used in the business world today because email has many advantages over postal mail or “snail mail.” The advantages of email are speedy delivery, low cost, accessibility, convenience, and easy management. In order to send an email, you must have an email address (an email address consists of a user ID and a host name) and some sort of email client. A few email clients that can be used are Microsoft Outlook, Microsoft Windows Mail, Windows Live, Opera Mail, Google Mail, Yahoo Mail, Apple Mail, and Mozilla Thunderbird. The steps to sending an email are (Discovering the Internet, Chapter 4, pg 166):

• The sender creates and sends the message.
• An outgoing mail SMPT (Single Mail Transfer Protocol) server connects to a DNS name serverto resolve the host domain name portion of the email address to an IP address, determines the best route to message destination, and the message sends.
• The message is typically routed through multiple internet routers until it reaches its final destination mail server (POP, IMAP, or HTTP).
• The mail server than receives the message and stores it into the recipient’s inbox.

Here are a few other ways to communicate online: Blogging, Microblogging, Social Networking sites, text and multimedia messaging, chat, and instant messaging. Blog sites have been around for awhile, but they did not gain popularity until the 2004 Presidential Election. News reporters, special interest groups, and candidate supporters began hosting blogs to get their message out there to general public. Now, blogs are a very useful tool for sharing thoughts and ideas to a World Wide Web audience. Microblogging is a combination of blogging and instant messaging, the message is usually 140 characters or less to a public website or to the cell phone or computers of private subscribers. An example of microblogging is Twiter.com.

Social Networking is individuals who maintain connections with their friends and family to keep them up-to-date on day to day activates, birthdays, special events, and you can usually post pictures and create different picture albums. A few social networking sites are Facebook.com, Myspace.com, and Friendster.com.

As mentioned above, you can also use text messaging, multimedia messaging, chat, and instant messaging to communicate. A text message (SMS – Short Message Service) or multimedia message (MSM) are sent via a cell phone. There are chat clients “that allow two or more people to exchange text or multimedia message in real-time, using either a special client or a Web interface” (Ch4, pg 218). You can also send an instant message, which is a private chat between buddies, with clients such as AOL Instant Messenger (AIM), ICQ, Windows Live Messenger, Yahoo! Messenger, or Facebook Chat.

Whenever you are using these kinds of media outlets, they should be used safely. According to the online article, “11 Tips for Social Networking Safety” there are precautions that should be taken such as: use caution when clicking on links, know what you have posted about yourself, do not trust that a message is from who it says it is from, do not allow social networking sites to scan your e-mail address book, type the social media URL directly into the browser yourself or use personal bookmarks, only accept friend request from people you actually know, assume that everything you put online is permanent and cannot be deleted, be careful about installing add-ons or toolbars, and do not use social networking at work.

Lastly, I learned the difference between asynchronous and synchronous communication. Asynchronous is a type of communication that does not require the user to be online at the same time (i.e. e-mail) and synchronous communication, or “real-time”, requires two or more users to be online (i.e. Instant Messaging).

Digital Learning Object

• Facebook.com
• Twitter.com 
• AOL Instant Messaging
• Wiki

New Terminology

• Asynchronous Communication – does not require users to be online at the same time and includes e-mail, mailing lists, and newsgroups.
• Synchronous Communication – is real-time communication, in which one or more users must ve online at the same time.
• Social Tagging  – allows users to post a Web page favorite or bookmark to a public Web site and then tag the bookmark with keywords.
• Signature file - A signature that can be automatically inserted into an e-mail message, containing standard content such as name, title, and connect information of the sender.

Module 3

Module 3 was about Searching the Web and Cyber-Lesson 5, “Information Fluency & 21^st Century Skills.”

 

In Chapter 3, I learned all about how to search the web. I learned about search engines, searching strategies, the searching process, searching with Boolean Logic and searching the Deep Web. When using a search engine, you aren’t actually searching “live” web, you are searching through web pages on the database of the search engine. There are certain strategies that should be followed when searching. They are: search, can, find, or keep revising. There is also a process that should be followed and questions you should ask yourself. What exactly are you looking for? When do you need this information? Where do you think you could find this information? How would you find this information? Why did you receive these search results?

Another type of searching is called Boolean Searching. Boolean searching used the words “and”, “or”, or “not”. Using “and” means both items must be present in the web page, “or” means either or both items will be present in the web page, and “not” will help find one but not the other.

Than there is the “Deep” or “Invisible” web. The deep web consists of web pages the “crawlers” could not see, they either missed it, the area may be password protected, or they may be non-html resources such as images, audio, animation, and pdf files. To find these web pages, you have to find an “Invisible Web Database”. To find these resources, you can use any search engine, you just have to add keywords like database, archive, or repository.

In Cyber Lesson 5 “Information Fluency & 21^st Century Skills” I learned about information fluency, digital citizenship, how to identify the proper and improper digital etiquette, how to search a web page, how to use a social bookmarking site and to cite web articles in MLA format. I also learned what the Life and Career, Learning and Innovation, and Information Media and Technology Skills required for the 21^st Century.

Information fluency includes information, technology literacy, and critical thinking. This is also known as “21^st Century Skills.” Information fluency follows a flow chart of ideas that include: What information am I looking for? Where will I find this information? How will I get there? How good is the information? And how will I ethically use the information? There are “nine elements” to digital citizenship and using technology appropriately. The nine elements are digital: etiquette, communication, literacy, access, commerce, law, rights and responsibilities, health and wellness and security.

My participation this module was better than the last. The web lab helped with that because our response was tied in with completing WL6 – Social Bookmarking. Social Bookmarking is a great tool to have and I am so glad we went over it in this module!

• Boolean Operator – is a conjunction used in logical expression.
• Web Crawler – browses the Web, automatically adding the URLs and other information about Web pages to a searchable index.
• open-ended search – seeks information on a broader scale, using a simple keyword.
• primary source – is any document, item, or other data that provides firsthand information about a particular topic.
  
  

Life and Career and Media and Technology Skills required for the 21st Century:

• Learning and Innovation Skills – 4C's: Critical thinking, Communication, Collaboration and Creativity.
• Information Literacy
• Media Literacy
• ICT (Information, Communications, and Technology) Literacy
• Flexibility and Adaptability
• Initiative and Self- Direction
• Social and Cross Cultural Skills
• Productivity and Accountability
• Leadership and Responsibility