Project Report

Introduction

Title: Jeremy Nally's Mathematics Tutorials

Purpose: The purpose of this website is to publish some of the client's favorite tutorials on the World Wide Web for everyone to enjoy and use. The client has a backlog of scans, photos, and tutorials written in LaTeX to publish online. We will be creating a venue for him to share these. The client wants to promote math education and show interesting things that are not necessarily taught in the classroom anymore. If there is enough interest in this website, he may expand it in some way.

Goals: This website will work as a vehicle for publication and distribution of the clients math notes and math tutorials. The main audience of this website will consist of anyone studying math. The client plans on having math materials at a variety of levels. Eventually, he would like to have interactive math tools and demonstrations available for users.

Problem Exploration

Question: What kind of color scheme are you interested in?

Answer: Something based on shades of blue.

Question: How do you want your materials organized? What kind of categories are we using?

Answer: I want them organized according to the ones I have written in LaTeX, my scans and photos, and videos. I also have some miscellaneous stuff.

Question: Do you want videos to be hosted on your site?

Answer: I would prefer to host them on YouTube to save on bandwidth.

Question: How many pages of content are you wanting to start with?

Answer: I think I have about fifteen things we could get started with. I will email the content to you.

Question: How would you like navigation to work?

Answer: I would like the tutorials listed along the side, and the normal navigation links listed along the bottom. For the mobile version, I would like a menu at the top that pops open.

Question: What kind accessibility needs do you forsee?

Answer: At some point, I would like to have detailed descriptions of all the scans and photos for people that are vision impaired. I plan to use those as a basis for some of my written tutorials. Some of them require a lot of graphic design. I would also like to have subtitles for all of my videos eventually. I want to try and make sure that this website works for people using text based web browsers from CLI's. I want to make this website into something as useful as possible. I also plan on referencing this website when I'm working with students, so I want it to be easy for me to find the things I need as quickly as possible.

Question: What would make you feel that this website is successful? What are your benchmarks for success?

Answer: If I see people that people are getting use out of it, then I will consider it a success. I'm not trying to sell anything. I just want to put my stuff out there for people to use. Some of the content I plan on tailoring to specific courses at Ivy Tech Community College. So if I hear about other people recommending my website, then I would consider it to be successful.

Question: What are some more of your future plans for this website?

Answer: I would like to have interactive math applications making use of the canvas element in HTML5.

Question: What do you think might be need to be changed later? What are your assumptions?

Answer: The menus will definitely need to be changed later. I want a starter website that has room for about fifteen tutorial links. As I create more content, I will need more in-depth menus. The most important thing is getting the content to the user. For now, I am assuming the typical user will be a student at Ivy Tech Community College in Fort Wayne. We are also assuming they will be accessing the website using a desktop computer, laptop, tablet, or phone.

Requirements Analysis and Specification

Browser Support: This website was designed with modern web browsers in mind. The targeted browsers are Firefox and Chrome. Internet Explorer 9 also works very well with the website.

Features and Designs: The use of LaTeX markup language will be an important of the design of the website. With MathJax, math symbols and text can be generated dynamically. In the past, prerendered pictures of equations and symbols had to be used on web pages. One can still see this by visiting some older websites or parts of websites that include math equations. For the scans and photos, the client also wants them to conform to the layout of the web page and open in a separate tab when clicked on.

Other Features or Niceties: The client wants to include some extra content for fun like a funny picture of his daughter and a Javascript 2D gravity simulation.

Physical Environment: The website will be hosted and maintained by us. The client will be provided content.

Software Infrastructure: Currently, the website only contains static web pages with math content and one page that has a Javascript animation.

Server Software/Hardware Considerations: The website will be hosted on a System76 server running Ubuntu Linux.

Client Software/Hardware Considerations: It is assumed that users will be accessing mostly from PC's running Windows with Firefox or Chrome as the web browser and from Android mobile devices using Chrome. Other browsers include Internet Explore on Windows, Safari on Mac and iOS, and Opera on various devices.

Information Architecture, Organization, and Design

Genre: Education

The main focus of this website will be on math education. Starting out, it will mostly be the client's favorite little tutorials that he has saved through scans and photos or that he wants to take the time to write out. He also has some Javascript that he wants to adapt to the website from a while back. The main problem will be how best to organize the content and present it to the user. As the amount of content grows, better menus will be needed to keep everything organized and easy to find. Once the number of tutorials goes past maybe sixteen pages, a new organization scheme and menus may be in order. For right now, the problem of organizing is solved by a simple side menu on the desktop version and a basic Javascript menu for the mobile version.

For the most part, almost all pages will be accessible from every other page, except for some of the miscellaneous things the client has included. He said he didn't want all of the stuff listed in the "fun" section to take away too much real estate from the tutorials. So those pages will be on a third level.

Here is the mockup. A typical tutorial page will have tutorial navigation on the left side, the title of the website at the top, the title of the tutorial below that, the tutorial content below that, and the main navigation links at the very bottom of the page. The tutorial and main navigation will be fixed so that the user will always have them handy when they're scrolling through the content. The mobile version will have menu at the top that expands to show links to the content. It will then show the website title, tutorial title, and tutorial content below the top menu.

Originally, all of the tutorial links were going to be listed on the front page, but that was changed to be a brief description of the website. Also, all of the tutorials were only going to be listed along the side when in a tutorial, but it was changed to be all pages.

Testing, Maintenance, and Promotion Plan

Most the reaction to the desktop version has been positive. Some people have liked the color scheme. The client's students have already gotten some usage out of the test version. Some people thought the desktop layout seemed outdated.

For the mobile version, people have thought it was pretty easy to use. The menu could use some more work. When collapses from five items down to one, some people missed seeing some of the content right away.

The client will be updating the website with content using our template created for him. We will maintain all of the links and the addition of new features like newer menus or new sections. The website will be updated with new content as the client has time to prepare it. We will continue refining the interface and visual presentation of the website.

As far as advertising goes, the client plans on just telling his students about the website and posting it on his Facebook page.

We are going to implement metadata on more pages for search engine optimization eventually.

Implementation and Reflection

The LaTeX on the website rendered by an external MathJax script. The textbook was used for reference along with a handful random forum posts and W3Schools. Information about LaTeX can be found at http://www.latex-project.org/.

This current implementation is just the beginning. More topics are planned which will necessitate a more robust and flexible user interface.

For the current deadline of making an introductory website to post materials that the client had handy, we have met the client's requirements. The client wishes to develop the website further with more topics, more interactivity, and possibly branching out into more subjects. To meet the deadline, certain components like flashier menus in the desktop version had to be abandoned. These will be addressed in the future.

The progress on the website was incremental. As I learned more from the text, I was able to do more. I had a lot of issues getting everything to do exactly what I wanted. The use of online resources was essential to completing the website. The biggest challenges were getting the fixed menus and fixed content box to do exactly what I wanted without looking terrible. I also had some difficulty with the mobile menu. I wanted it to be fixed at the top of the screen. When I tried, I ran into a lot of issues. Apparently, these issues were due to a bug in Chrome on Android.

The changes and improvements will include: menus based on math topic, a modern and polished look, better mobile menus, more content, more interactivity, and better performance.