Animated Interactive Tutorial On E Mail Protocol Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

For my final year project I am developing a website using both Adobe flash and Adobe Dreamweaver. The aim of the website will be to create distinctive web-based tutorial which can help future students understand and learn about Simple Mail Transfer Protocol (SMTP). This protocol is designed to help the user send emails. Post Office Protocol (POP3) and the Internet Message Access Protocol (IMAP4) are designed to retrieve e-mails for the user. Through the interactive website the user will be able to visually see how the above protocols function. Throughout this report I will discuss and layout my plans for my final year project. These will include my understanding and knowledge of the protocols I will be illustrating in the website.

A Gantt chart (timeline) will be thought-out and detailed; this will guarantee a specific amount of work will be completed at set dates. The software used in the making of the website, as said earlier, is Adobe Flash, which is used as an interactive illustration feature, and Adobe Dreamweaver, which will be used to develop and design the website and links. Throughout this report I will also gain more knowledge on my chosen software through research and practice. The website, as a learning tool, will also contain voice overs and a video designed in flash as a further example of how the protocols work. The user will have the ability to go through the tutorial at their own pace, through the control buttons on each page, allowing them to gain a greater understanding of the protocols. After each link on the website has been examined and studied the user will then have the opportunity to use the websites quiz as a self-assessment tool. This will help each user find out how much they have learnt on the subject. It will also give the user the opportunity to revise the material and retest if need's be.

In all, throughout this report I will illustrate that my final year project will be an animated, interactive display of the main functionalities of the above protocols aided by voice overs, control buttons and a self-assessment quiz. As a learning instrument the website will help the user comprehend the information easily and at their own pace, it will be a fun informative guide for students to learn about protocols in an online environment with helpful information and guides throughout.


Simple Mail Transfer Protocol (SMTP) is an Internet standard for electronic mail transmission across Internet Protocol (IP) networks. While e-mail servers and other mail transfer agents use SMTP to send and receive mail messages, user-level client mail applications typically use only SMTP for sending messages to a mail server. For receiving e-mail, client applications usually use the post office protocol (POP) or the Internet Message Access Protocol (IMAP). These protocols will be discussed later. To begin, an e-mail is created by a user using a mail user agent such as Microsoft Outlook. Each created message consists of a header that includes the recipient's e-mail address, sender's e-mail address and other information, and a body containing the message to be sent. These messages are then queued and provided as input to an SMTP sender program. William Stallings - Data and Computer Communications pg. 698

Now the sender's client machine sends the e-mail to its local mail server using SMTP which in turn sends it on to the recipient's local SMTP server. The sending SMTP server uses DNS to find the MX record of the domain to which the e-mail is addressed. This gives the sender the DNS name of the recipient's SMTP server. This is resolved to an IP address, and a connection can be made directly from the sender's SMTP server to the recipient's to deliver the e-mail. While SMTP still supports relaying, direct e-mail delivery using MX records is faster and more efficient.

However the SMTP sender may have to deal with errors such as a non-existent address, the destination host may be unreachable or taken down or the TCP connection may fail while mail is been transferred. Here the sender has the option to give up or can queue the message to be sent later.


The post office protocol is an internet standard protocol used by e-mail clients to retrieve e-mail from a server over a TCP/IP connection. POP3 uses the transmission control protocol (TCP) for reliable transfer of commands, responses and message data. POP3 listens on port 110 for incoming connections. POP supports simple download-and-delete requirements for access to remote mailboxes even though POP clients have the option to leave mail on the server without deleting it. However usually clients retrieve all messages and delete them from the server. A POP3 server has three states authorization state, transaction state and update state. To log onto the POP3 server the user must authenticate themselves usually by supplying a username and password. Once accepted the sever moves onto the transaction state. In the transaction state the user can perform mailbox access and message retrieval. Most of the commands in POP3 are only valid in the transaction state. Here the client normally begins by retrieving statistics about the mailbox such as number of messages and size of messages. The client then retrieves each message one at a time and marks each message for deletion on the server. Once finished with the retrieval of messages the client issues the quit command. The server now deletes the messages marked for deletion and terminates the POP3 session and the underlying TCP connection. The reason messages are not deleted until the update state is so that the server can verify the completion of previous commands and it also gives users a chance to undo the deletion of messages. Using the popular Post Office Protocol (POP3), a user can access his or her mailbox and retrieve messages so that they can be read on a local machine. This model has the advantage of simplicity, but does not provide many features that are increasingly in demand today, such as keeping track of the status of messages and allowing access from many client devices simultaneously.


IMAP stands for Internet Message Access Protocol. IMAP4 uses TCP for communication on the well-known port 143. Although IMAP is similar to POP, IMAP has many advantages such as remote folder manipulation, the ability to append messages to a remote folder and new mail notifications. IMAP also has a provision for determining message structure without downloading the entire message. Another key factor of IMAP is the ability to perform server side searches. When the client server does not include primitives to ask the server to do searching, then searching transfers all of the data over the net to the client. Being able to ask the server to find relevant messages by searching its local file is of huge benefit. Email stored on IMAP server can be manipulated from a desktop computer at home, a workstation at the office, and a notebook computer while traveling without the need to transfer messages or files back and forth between these computers. IMAP has four states, a not Authenticated state, an authenticated state, a selected state and a logout state. In the not authenticated state all the user can do is enter their authentication information so they can move to the authenticated state. In the authenticated state the client must select an individual mailbox to perform operations on. In the selected state the client can access and manipulate individual messages. When the user is finished in the current mailbox they can close it and return to the authenticated state to select a new mailbox or it can log out.

Gantt chart


Dreamweaver is the program that will be used in creating the website. It is probably the most adaptable and versatile program used today in the creation of web design.

1"Adobe Dreamweaver is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.

The visual editing features in Dreamweaver let you quickly create pages without writing a line of code. You can view all your site elements or assets and drag them from an easy-to-use panel directly into a document. You can streamline your development workflow by creating and editing images in Macromedia Fireworks, then importing them directly into Dreamweaver, or by adding Macromedia Flash objects you create directly in Dreamweaver.

Dreamweaver also includes many coding-related tools and features, including code editing tools in the Code view (such as code colouring and tag completion); reference material on HTML, CSS, JavaScript, CFML, ASP, and JSP; and a JavaScript Debugger. Macromedia Round-trip HTML technology imports your hand-coded HTML documents without reformatting the code; you can then choose to reformat code with your preferred formatting style.

Dreamweaver now incorporates and expands on all of the capabilities from Macromedia UltraDev, helping you to build dynamic database-backed web applications using server languages such as ASP, ASP.NET, ColdFusion Mark-up Language (CFML), JSP, and PHP.

Dreamweaver is fully customisable. You can create your own objects and commands, modify keyboard shortcuts, and even write JavaScript code to extend Dreamweaver capabilities with new behaviours, Property inspectors, and site reports."

In creating the emails protocol website Dreamweaver will be used. However, before any work begins with Dreamweaver one must first think about the structure and layout of the site. It will save time later if a plan is made. Firstly creating a folder that will hold the images and/or text you will need later, this will be known as the 'local root folder'. In this folder there will be sub folders containing information and images for different pages on the site i.e. the quiz. It is also wise to have several browsers installed on the computer,

I.e. Internet Explorer, Firefox, Opera, Safari as this allows the site to be checked before it is finally uploaded and the designer can be sure that it will work and look the same for wider browser compatibility. For this web page once Dreamweaver is set up and the local root folder has been established, split view will be used so that it can be deigned and coded at the same time. One must also think about the goals of the site, and for the purpose of the emails protocol site it is essential it is designed in a user friendly, easy to navigate way as it will be designed as a learning tool for future students. Before Dreamweaver is even turned on a flow chart and sketch up of how the site will work and look must be compiled, this can be done by hand or using software like Macromedia FreeHand, illustrator or Macromedia Fireworks. Depending on how complex the site will be, a template may be used in Dreamweaver or it can be created page to page from scratch. Using a template can save time and it always guarantees each page and layout will be similar and can often make it easier for the user to navigate; depending on how structured and detailed you want your site to be. Once the layout has been designed for each page, buttons can be created for easy navigation and the animation piece can be installed (that will have been created in Adobe Flash earlier). For the voice over an MP3 file will be used, and this can be played by the user at their own command. After all the relevant information has been added to the site, enough time must be left for tweaking and any changes or problems that may arise. Working with a plan, and gathering all the information before you start can almost guarantee that the web design process will be a smooth and easy experience, especially when using Adobe Dreamweaver.

Adobe Flash

Adobe Flash Professional CS5 software is the industry standard for interactive authoring and delivery of immersive experiences that present consistently across personal computers, mobile devices, and screens of virtually any size and resolution. Create interactive experiences--Express your creative vision and attention to detail and design pixel-perfect interactive content with exceptional typography, flexible layouts, and incredibly smooth animation. Build Web applications--Develop cross-platform web applications and content with an integrated development environment that offers intelligent ActionScript coding tools. Embed video--Wow your audience and produce engaging rich video content and interactivity that contain expressive, lifelike motion and animation. Flash will be used to create the animations for each of the e-mail protocols. Here the user will be able to watch the animations and listen to voice overs explaining each protocol. The user will be able to visual interpretation of the protocols in action. The user will be able to step through the animations at their own pace. A well thought out flash addition to a website can add interest, information and interactivity as well as this the website will also be able to add sound and motion to what might otherwise just be another page of text


After much research and practical work on the emails protocol website the findings for me would suggest that a larger amount of effort will need to be done on Adobe Flash, as although it seems an easy enough software to grasp there is other aspects such as voice overs and moving animation that may require more time for someone with little experience in Flash. On the other hand, Adobe Dreamweaver may prove easier than expected as it is easy to manipulate, allows first time users to follow a template and if the site requires greater detail and structure I will be able to use my previous knowledge of CSS and HTML. The website itself has already proven to be an interesting project, and although a certain challenge, it will be a teaching tool not only for me as I create it but hopefully for other students in the future.

The Adobe Software will be a challenge in itself, but what I have learnt thus fare will prove invaluable in designing the website. Another area that I have had to acquire a skill for is time keeping, creating the Gantt chart will be of great use to me in the coming months, as deadlines and time keeping have never been one of my strong point as a student. I intend to be rigorous and tough on myself when it comes to deadlines (even one's I have set myself) as this will assure the project can be completed with as little stress and more focus than previous years!.