Advanced Web Technologies Individual Project

Advanced Web Technologies / IT470

Written by Kristi Divin / 8-16-2021

Table of Contents

Week 1. 3

• Project Outline & Requirements
• Web 2.0 Strategies
• Web Portal Plan

Week 2. 6

• Collaboration Plan
• Social Networking Plan

Week 3. 10

• Search Engine Optimization Plan
• SEO Web Pages (In Zipped File)

Week 4. 12

• Data Aggregation Plan
• Mashup Plan

Week 5. 15

• Web Server Performance & Security
• Web 2.0 Implementation Plan Final Version

“Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform.”

-Tim O’ Reilly

“Technology is best when it brings people together.”

-Matt Mullenweg Founder, WordPress

WordPress is a social platform and blogging host that I have been passionate about for the last two years now, which is why I have chosen to utilize it for this research project. In addition to this, I am hoping that I will be able to learn the platform a bit more through finding out what it is capable of and where it is lacking.

          While WordPress may not have physical products or locations, that I am aware of, there are certain levels of services that this host offers to all users including the ability to choose a domain or subdomain name, upgrading possibilities, customization of your websites, templates to help you get started, color schemes, and more!

          After finally diving into the WordPress menu fully, I decided it would be the best to start investigating web 2.0 features and tools that it has yet to utilize and pick from the pool! If you look to the right side of this page you will see a quote that was stated by Tim O’Reilly; it was on the blog holding this quote that I found the features I later decided suitable for a host such as WordPress.

          Figure 1.1 is a chart credited to a blog article written by Lipika in 2016, and this article is important to my research because it lists the basic web 2.0 tools that a web 2.0 technology or platform should contain to be labeled as such. Oddly enough, even with everything WordPress is already capable of, the top row of tools is missing to some degree of which I will explain within the next few paragraphs.

Common Web 2.0 Features & Tools

1. Profiles—while the chances to upgrade, update, and customize your website are virtually endless, the option of building an individual profile is absent. To learn this is a bit discouraging for me, because blogging is all about a person’s passions in life.
2. Blogging—this is the one area out of this group I would leave alone because platform is based on, the ability to blog, comment on blogs, and create sites for blogging.
3. Groups—while you can view bloggers by the hundreds, I have not found an option to search for groups. So far the only thing that has come close this is the option to place blog entries under certain tags which then lets that entry appear in suggestion to similar bloggers.
4. Micro Blogs—when I hear this term I think of blogs that would only go to a certain length, number of words, or possibly only to a certain amount of detail. From what I can tell, there is no such option available on WordPress.
5. Wiki—There are a few different ways a company could go with this faction. I would like to see Wikipedia and WordPress collaborate a bit, whether that be when it comes to categorizing blogs or users or Wikipedia having a miniature glossary of related blog articles at the bottom of each new entry.

Benefits to the Additions

If nothing else, WordPress would gain many more capabilities from adding these few features or updating the ones already there that I may have not discovered yet! Just imagine a digital book club that gave users the option to go behind the scenes with every author who’s work they read at any given time; that scenario perfectly describes the benefits of adding each of the mentioned features.

WordPress Web Portal

Building an efficient web portal can be a tricky situation, no matter what the uses will be! Given this particular need and company, the web portal would have to be based on a blogger needs from upgrade capability to trendy website templates to useful and user-friendly plug-ins of all kinds! Keep reading for a specific list.

1. Login form accommodated with the originating website.
2. Desktop & mobile – friendly designs.
3. Website’s dashboard that shows all active and non-active websites.
4. Settings
5. Camera
6. New entry button that would lead to your entry dashboard.
7. Audio, if applicable, for broadcasting live.
8. Video, if applicable, for broadcasting live.
9. Customer support/service.
10. Help button for questions or bugs within the application.

COLLABORATION PLAN

Being that WordPress is basically a collaborator’s playground I had a bit of difficulty coming up with an efficient collaboration plan; that is until I started looking into the collaboration plugins that already exists, which is when I found two significant issues with WordPress collaboration. The first of which being the bloggers with a free WordPress plan have no access to collaboration tools at all! I do not find this fair because how does someone put a group of friends and family together for a family – centered blog if they have no collaboration tool to do so. Secondly, there are no Google collaboration tools in WordPress’s list of collaboration plugins. Google is one of the biggest platforms in the world from every angle and offers every type of tool a user can imagine, so it is silly that WordPress wouldn’t take advantage of that. With all this in mind, I decided it best to make a chart to show three common areas within WordPress in which free plans and Google Docs would benefit!

Being that Google does not charge to provide services, and WordPress would be working with free accounts and free trials, this whole idea would literally cost nothing but time to implement! WordPress has been very well established for years, and do not need updates very often, so they do not have much to lose with considering this for a future update, at least in my opinion!

Impact of social networking

Social networking can be extremely beneficial to almost any business if used appropriately, unfortunately though, too many people utilize social networks and platforms with malicious intent! Generally speaking, there are a few major areas that social networking tends to impact the strongest when it comes to a business setting: businesses in general, web users that interact with them, IT support staff, and IT management.

1. When dealing with an online – based businesses  like WordPress, Flickr, Facebook, or Pinterest each platform is going to rely heavily on social networking because it is the platform users that make sure the business stays up and running through use of upgrades to the account which bring traffic to the company. However, if the platforms are used maliciously and the attackers are not exposed, then the company could be looking at severe, long – term recovery!
2. The second most important factor in a business is the user that interacts with it, whether that be a customer or staff member. Social networking can impact either side of the screen positively or negatively. When staff members hack into a WordPress account from a company computer it makes the entire company look very suspicious, and they are usually investigated for a while after the incident. However, if social networks are used to advertise for the company in a positive light, more users are drawn in by word of mouth!
3. Another factor that would be heavily impacted by social networking, usually the front lines of the impact, is the IT support team. If there is ever a technical complaint or issues with another WordPress user, the support team is going to hear about it first. However, they are also the ones that deal with recommendations, praise, and compliments. I guess one could say then that they deal with the best and worst of both worlds.
4. Finally, there is the IT support management team, which is usually considered the backbone of the business. When the time comes that a support staff member can not deal with an irate customer, management steps in. When support staff does not know the answer to a given question, management steps in. On the lighter side of things though, they also grant promotional raises, raises in company positions, and transferal recommendations when needed!

Social Networking Benefits

Highlighted above, you see 3 terms that are well – known within the business world: recommendations, word – of – mouth, and traffic! These three terms are huge benefits that stem from social networking, because it is the word – of – mouth recommendations that bring traffic, in large part, to both online and physical – based businesses of any given type.

Potential issues

The biggest potential issue I can think of, especially for an online business, is a security breech. Usually this takes place when hackers find their way into company computers and steal the credentials of customers, staff members, or management! This is super dangerous because if the gathered information ends up in the wrong hands, the victim may end up in a world of trauma! Other potential issues may be theft of credit card information, social security numbers, bank information, company information, and much more!

SEARCH ENGINE OPTIMIZATION PLAN

When planning for SEO, it is important to really think about what type of company it is that you are working with, for example WordPress was designed for bloggers and marketing. You can create online stores and blogs of just about anything your heart desires, but you have to make the theme blend so that it is not off putting to anyone that visits your sight! With that said, there are three main SEO tactics that I love to use when it comes to blogging: support content, social media marketing, and entry tags for reaching out to similar bloggers. Out of the 3 SEO tools mentioned here, it’s nearly impossible to say which one works best since all three operate best when they are used together! All three of these tactics when used in a bundle make a very powerful marketing strategy and are guaranteed to bring more traffic, increase customer loyalty, and will likely have the customers stopping in regularly for purchases as well!

WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG)

WCAG is a legal requirement for each webpage or website designed, and one that I can see that would be easily overlooked. However, it’s a legal practice to follow and consists of four base factions: perceivable, operable, understandable, and robust. According to W3Schools, each of these factions have their own little checklists that websites must follow for everything to run smoothly, look at the chart below for further information.

DATA AGGREGATION PLAN

By definition, aggregate data refers to high – level data acquired by combining individual – level data. “For instance, the output of an industry is an aggregate of the firms’ individual outputs within that industry. Aggregate data are applied in statistics, data warehouses, and in economics.” (Wikipedia, 2021)

There are various types of aggregate data you may see within a business, and honestly it is a little overwhelming, so I decided to go with data types I am already familiar with.

• SQL – While it may not always be the easiest data type to work with, SQL is considered aggregate data because it is individual pieces of information, and it serves as its own database most of the time.

Aggregate SQL Sample

• Microsoft Excel – Although similar in appearance, SQL tends to be more numerical, while Excel often has non-numerical characters that come into play such as names, addresses, colors, shapes, and so on. Still, because of the individualized nature it is considered aggregate data.

Aggregate Excel Sample

• A common, aggregate variable used today is Sum which is generally found in spreadsheets and is usually seen to be numerical as well. The picture below shows a subtotal sum for different units in a spreadsheet.

Aggregate Sum Sample

• Dates are also types of aggregate data, and as with the others it is the simplistic nature that classifies it as such. Below is a visual that demonstrates how to sum values between two dates.

With investigating each data type I discovered one vital use for all of them when thinking on a website such as WordPress, which is tracking. These four types of aggregate data could be used to track just about anything a user would need, from site visitors to post clicks, and comment quantity to entry dates! Another common factor among the four data types is a spreadsheet being used to display the data. Displaying a spreadsheet is one of the easiest tasks in web development because there are so many ways to go about it, but the fastest and most efficient way I have found is creating a Microsoft Excel document, taking a screenshot, and displaying it as an image within the webpage!

MASHUP PLAN

The mashup plan I decided to go with is a script designed with Python. Python is an older scripting language still used today, and I find it a lot less overwhelming than Java or JavaScript. The sample you will see in the zip file, when ran, produces a sum of the x and y variables. What I love about python though, is you are able to stretch, customize, and expand it nearly anyway that fits your vision and there are hundreds of different variables, characters, and formulas you can use!

Security & Optimization

I have always kept two rules close when it comes to securing and optimizing anything digital! Rule number one is keeping security up to date by all means necessary! The second rule is to use a third party that you know well and trust to do so. Since 2018, there are two companies I have utilized more often than pretty much all others, and they are Microsoft and Google; both of which have tight security plugins if you feel it is needed.

The main component of security when considering Microsoft is top – of – the – line antiviral protection. The software is known as Microsoft Security Essentials and has been around and in use almost as long as Microsoft has. However, as far as optimization is concerned, there is a popular application among Microsoft users even though it isn’t directly led by Microsoft which is called SentryOne. SentryOne has capabilities to track and optimize the performance of multiple database applications, which is what makes it such an asset to users and business owners.

While Google may have the upper hand with security and optimization features, it is Microsoft I put more trust in, because it seems to suit my needs a little better and is updated a bit more frequently!

Written by Kristi Divin / Colorado Technical University – Online

Course – CS347 / Instructor Cheryl Frederick

Table of Contents

Cover – 1

Table of Contents – 2

Project Outline – 2

Phase 1 – 3

1. User Interface Functional & Technical Requirements

2. User Interface Human Interaction Requirements

Phase 2 – 5

1. User Interface Design Prototypes

Phase 3 – 8

1. Usability Test Questionnaire

2. Usability Test Instruction Guide

Phase 4 – 12

1. Usability Test Results

2. Itemization of Changes

Phase 5 – 12

1. Final User Interface Design

Project Introduction

Within the introduction of this research project, you will find a cover page with the student and course information, as well as a page that contains the table of contents in a simplified version, and finally a project outline that goes into more detail on what will take place with progression of the project!

Project Phases

Phase 1

This phase will contain the functional and technical requirements that must be met with the development of a web application such as processors, memory, and display capabilities. Requirements for human interaction will also be discussed!

Phase 2

Physical sketches, diagrams, and paper interfaces will be explored when deciding which prototype to utilize for the research project.

Phase 3

In this phase a questionnaire will be launched along with an instruction guide on which areas that need to be tested within the web application’s development and why.

Phase 4

Phase 4 will show the post – test results once the areas discussed in phase 3 have all made it past the testing phase successfully.

Final Design

The most important phase in this project is phase 5: the final user interface design. This phase will be the output of everything learned within this course’s progression. Phase 5 will also contain a references page that provides all sources that have been utilized.

Functional Requirements

            It was not hard to find list after list of hundreds of different functional requirements that should be met before the development of an application officially begins. However, there is one list that caught my attention quickly simply because it did more than just list the functional requirements, it put specification details under each one which made it easier for me to understand the purposes and benefits. This list was written on a programming engineer’s blog and published by Altexsoft.

            The first functional requirement listed is a document or documents that specify the software requirements needed by the application in question. This step is important because, “The SRS contains descriptions of functions and capabilities that the product must provide.” (Altexsoft, 2021) While it is not recommended that this be done for the entire application at once, it is important that it is done before the building process of the application has begun.

Use cases being applied is the second functional requirement that will need to be met before the application is finalized. There are three important elements that should be found in each use case utilized: actors, systems, and goals. Actors can be considered users or buyers of the finalized application. Systems are defined by the functional requirements. Finally, goals are the intended purposes of interaction between buyer and system or consumer and producer.

            User stories is the third functional requirement, and according to Altexsoft, “A user story is a documented description of a software feature seen from the end-user perspective. The user story describes what exactly the user wants the system to do.” (Altexsoft, 2021)

            Fourth on the list of functional requirements is decomposition or work breakdown structures, also known as WBS. WBS is a document, normally visual, that is designed to how the whole of an application breaks down into smaller pieces, in other words it is the same as looking at the blueprint to a house being built.

            Number five, and final, on the list are the design documents and prototypes. The three main design formats that often blur together are wireframes, mockups, and design prototypes. These formats usually contain visual aids and, “Allow for some interface interactions, like scrolling, clicking on links, or filling in forms.” (Altexsoft, 2021)

Technical Requirements

            When a developer is considering the technical requirements for an application there are certain questions they need to ask themselves prior to development. During my research, I came across a technical blog known as The App Solutions that does a very good job describing this process. The snippet of text below was pulled off the blog mentioned simply because I did not feel I could reword it better on my own!

            After you answer these questions for yourself, the next step is writing the technical requirements documentation which allows the developer to structure information and build a visual of the application, analyze competitors, brainstorm the ideal application, and reduce costs overall.

            A few decent reasons for the creation of technical specification include:

1. Inclusion of all technicalities.
2. Flexibility for future upgrades and updates.
3. Boosts the value of the application.
4. Helps with maintenance.
5. Allows for future reuse.

Human Interaction Requirements

            At first glance, it is easy to see how human interaction requirements for an application could be overwhelming. However, there is a lot less to it then I believed initially. When considering the requirements for an interactive application there are 3 basic factions to consider: effectiveness, efficiency, and satisfaction. All these factions fall under the usability category of any application or website, but to specify it further I dug my heels into a blog known as wisdomjobs.com, and here is what it had to say.

• For interaction to be effective, an application must be able to help a user achieve or maximize their goals.
• For interaction to be efficient, an application must be able to efficiently utilize its resources to help a user meet their goals.
• For a user to leave the application satisfied, they must be able to utilize the application with ease.

PHASE 2: PROTOTYPES

            While it may have taken a couple days’ worth of brainstorming to figure out exactly how I wanted this application to look, it is safe to say I am happy with the outcome! What you will see as you progress through phase 2 is a series of low – fidelity prototypes followed by a page explaining how they work and what they are for. Please keep in mind, however, that simplicity is key with anything I create, and this application is no different. In fact, it is being built for easy navigation which makes it user – friendly, technically capable, and functionally capable of getting a user where they need to go in a timely manner.

            While I do enjoy sketching, especially when it comes to blueprints or anything of the like, I am aware I am not the best at it which is why I decided to graphically design these prototypes using a favorite online editor. It is likely they have a bit more detail than your typical low – fidelity prototype, but it is hard to avoid that when you graphically design anything. With that in mind, look at page 5 for the first page to the location – based application for a fictional company known as Urban Enterprise, that is known for social media advertising and marketing.

            Just like a website, a web – based application will have a few different pages, usually a home page, about / transaction page, and a contact / support page. The home page of any application or website can be considered the mission statement or application purpose. In this case, there is a broadly – written message of, “Do not wait another moment! Search for your location and find out if your eligible for digital services by Urban Enterprise!” The home page of this application also contains and interactive banner, and two redirection buttons.

Next, we come to the location page of the application which enables the user to search for their home address, since this company only does business within a certain mileage. Once this search is complete, a message will appear in place of the map, stating whether the user is eligible for services or not.

            Normally, any type of application that requires a location search is powered or supported by good maps, android maps, or anything else of the like. In this case, I chose to portray Google Maps because it is an application I trust. To allow this application to work with google maps, there would be a hyperlink or a few lines of coding to allow this transfer of data.

            Finally, a minor change between the pages of the application is color theme. Some would wonder why, and the reason is so there is no question in the mind of the user that they have switched pages within the application.

The last of page of this application is both a contact page and a support page. This page allows a user to send in a form to the company, regardless of whether they have an issue with the application or not. Like most forms, this one requires name, email, and message validation. If any of these spaces are left empty, they application would provide an error message in place of the form, and the user would not be allowed to move forward.

Usability test questionnaire & Guide

Ideally, a usability test questionnaire will be your guide, or areas that you want to test depending on the application you are working with, or the company you are working for. When considering the design of a web application for my own business, my goal is to dissect each faction of the application that a designer would find important. Below is a series of different pages with different content including demographics, usability testing questions, function questions, and a comment / concerns page. The detailed guide for each page is directly below it.

The customized page above is a short, but specific questionnaire regarding the demographics needed for a digital design business. This questionnaire would be easy to complete, taking approximately 5- or 6-minutes total. Towards the bottom of the page, you will notice that the last few questions have a set of options below the answer box; these serve as examples in case there may be some confusion on proper words or numbers.

The usability part of this questionnaire is more extensive, but still generalized in hopes of making it easier to understand. Usability is a broad term that covers a large area of application aspects such as error prevention, navigation, appearance, launch times, accuracy, and more.

When considering error prevention for an application, error messages and recovery are two examples that could serve as answers for methods listed on this part of the questionnaire.

Navigation is the process of going from one page to the next, or one function to the next within the application. When answering this question, you will need to think on the ease or difficulty you have experienced when moving from place to place.

Legible fonts and eye – pleasing color themes both fall under the aesthetics of a web application. If these factors flow together smoothly and cannot be considered an eye sore, the user will likely be pleased with the application.

Launch times are exactly what they sound like but can also be called the start time for an application. If the application takes more than 60 seconds to start up, this part of the questionnaire is likely to have a bad rating.

Map accuracy is the piece of the application that utilizes Google GPS to connect the user to the company through the physical location of the user. If the GPS system is not accurate, the company would likely lose a lot of business or even go bankrupt.

Applications can pass or fail at performance for many reasons, but usually what can make or break them, is how user – friendly they are. Part of being user – friendly is being fully functional on a home computer as well as a mobile device. Still, a more important factor is the transition from one device to the next being a smooth one.

The very last line of the usability questionnaire is asking for a percentage on the overall usability of the application. If the result is less than 50%, the application needs a lot more work. If the result is greater than 50%, there may not be much more to work on depending on where the weaknesses are.

The ratings needed for the functionality of the web application are more specific, but easier to determine with the 5 – star rating system. The questions above each set of stars state what needs to be considered when deciding which rate to give each faction presented.

The easiest part of the questionnaire is the very last page, the comments, or concerns section. This page has no instructions that go with it to allow the development team to freelance their last thoughts on the web application before progressing to further development!

Itemization

Based on previous feedback and the results of the usability test, I do not feel as though there are many major changes that need to be made. However, the minor changes will not be over – looked just because they are minor! The following chart describes the planned changes from start to finish, followed by the usability test results.                                                                                                                                                              

Whiles this list of changes may seem very basic, there are a lot of steps involved here. While paraphrasing the direct quotes throughout the text, I hope to learn a little more about the sources I have utilized for the research end of the project. Through functional and prototype expansion, my goal is to embed new applications and features within my own. Finally, through some minor tweaking of appearance and text, there is the hope of making the project that much more visually pleasant.

Usability test results

Demographic Form

There do not seem to be any specific changes that need to be made on the demographic form according to the feedback I have received, however a change I am considering is a different font on the page for the sake of making the form a bit easier to read so there is no miscommunication.

Usability Form

While there are no outright yes or no type questions in this form, what may need to happen is lengthening the questions a bit so that yes or no is not an option for an answer.

Functionality Form

The big change I would like to see happen with the last form is an expansion in size! So, instead of just 5 stars it would be more realistic to have 10 stars, in hopes of the ratings being more diverse! Despite minority, I would also like to change the color of the stars to fit the theme a bit better!

The result / goal of my web – based application would be allowing the user to fill out the starting form with their demographics. Based on the information given, they would be approved or denied digital service. The determining factor would be location, and depending on services needed, probably age as well.

Current changes and Future Development

While the changes of this over-all project may have been more extensive than I predicted, I am happy with the final result. It all goes back to a saying I was told years ago, “No matter the size, a change is a change.” I kept my focus on the prototypes because I felt that was the area that needed the most work. When the initial prototypes were designed, I was thinking on a zoomed – in basis, however after I took some time to digest structured feedback and looked at various samples, I realized I was thinking about a user interface for this particular project the wrong way. So, I decided to remake the design using my phone’s home screen as a guide.

Trending technologies in media transformation

Each year media trends change, and the media trends that remain dominant within society have changes and updates within them. Throughout my research, I found a list of four trending changes that are common among almost all types of media including mobile media: VR/AR, device – specific content, voice / chat capabilities, and interactivity.

VR/AR

This function enhances a user’s experience, usually by making the content 3 – D. A few facilities that have embraced this technology include electronic departments / stores, movie theatres, and graphic design companies / individuals.

Device – Specific Content

There are several, solid examples that come to mind when I think of anything being device – specific. A few companies that carry the same content from one device to the next include Netflix, Hulu, Discovery +, Pandora, Disney +, and more!

Voice & Chat

Skype, Facetime, MSN, Zoom, and Remind are all examples of applications that have embraced voice and chat capabilities in recent years, and will only perform better in years to come!

Interactivity

Interaction within applications has been one of our main points of study throughout the progression of this course and is vital in everyday life. It has changed the way we look at and utilize media since I was a child from simple buttons to complex websites.

changing social media through technology

Social media is updated and changed on a regular basis by means of technology. The diverse ways combined with the speed of the changes have made social media remarkable to say the least, and while some would say it is a drain on society I can very much beg to differ! Below is a detailed list of technologies that have impacted and continue to impact social media every day!

Artificial Intelligence

AI has been used in the creation of automated marketing through social media.

VR/AR

Virtual and Augmented reality has been called the futuristic technology of today!

Bots & the Like

Bots are being used more and more to enhance communication between business and buyer!

References

1. Editor. (2019, October 18). Functional and nonfunctional requirements: Specification and types. Retrieved May 18, 2021, from https://www.altexsoft.com/blog/business/functional-and-non-functional-requirements-specification-and-types/
2. Interactive system design in human computer INTERFACE tutorial 18 May 2021 – Learn interactive system design in human computer INTERFACE Tutorial (25596): WISDOM Jobs India. (n.d.). Retrieved May 18, 2021, from https://www.wisdomjobs.com/e-university/human-computer-interface-tutorial-2374/interactive-system-design-25596.html
3. Isakova, T. (2020, September 23). What are technical specifications and why to have them for your project. Retrieved May 18, 2021, from https://theappsolutions.com/blog/development/reasons-to-have-technical-document/
4. Ghanem, E., & Sundararaju, M. (2020, March 26). Four technologies that are transforming media and events. Capgemini Worldwide. https://www.capgemini.com/2020/03/four-technologies-that-are-transforming-media-and-events/ .