Week 9: Day 1 of Work Experience at LIT

Week 9
Day 1 of Work Experience at LIT

Website update:
Completed CSD Helpdesk Kiosk Website: programming and styling. There are 5 index pages:

• index.html: Home Page
• index1.html: About LIT Page
• index2.html: Video Tutorials Page
• index3.html: Q &A Page
• index4.html: Contact Page.

Today: working on the CORE: Booking Holiday Leave, e-learning video tutorial using Camtasia Software. Approach: scripting, draft audio and video, feedback, final audio and video.

The following website pictures are at the full-screen view of MAC computer in this Lab, which I would expect to be the widest screen view that users would see.

All pages have the same: header (& different title), navigation bars, and footer.

1. Index.html->Home Page:

This is the home page. I was originally going to use icons here, but I have decided to use images for more visual strength and the Heuristic Principal of being recognizable as an LIT Website. This I have worked on further down on this page. The icons are attached to an anchor link, so that, on-click of any three sections will bring the user to that page. 

Above the three central sections is a button for "IT Kiosk Tutorial Videos," which on-click brings the user to the Video Tutorial Page. I added this in this significant position as visibly the main, call-to-action, as being the main function of the website.

2. Index1.html->About LIT Page:

In the section of LIT Learning Philosophy the image seen here is a promotional video about LIT.

This above is the "About LIT Page." There is a marquee that floats across the page in a loo[ with text: "Hello and Welcome to LIT...". On this page, there is an introduction to the college with the College President's Welcome, and photograph, and a link in blue for more information. The next top right section is about LIT Learning Philosophy, again with a link to more information. The image beside this is a "Promotional Video of LIT." This is a video I made as part of a team in our course on "Digital Video," where I worked on the recording and the script we used was based on that from Professor Cunnane for this project.

The next 3 cards I have organised information. All are clickable links to each of these topics on the LIT Website.

Next is the large red button which is "Click here for Main LIT Website."

Then, Google Maps where I have set the red locator to LIT. Here, the user clicks on the yellow person and drop on the red locator to open an image of LIT scene.

3. Index2.html->Video Tutorial Page->

This is the Video Tutorial Page. Here, as in the other pages there is the top black bar navigation and the base of screen pagination navigation also. For demonstration purposes I have set these sections out as: Staff Videos and Student Videos. Again I have provided options for navigation. Each of the red buttons is attached to a link. Each menu item in side-bar to left of screen is also a clickable link. I have mostly been working on Staff Videos. I have added these to the menu and to the buttons: onclick brings the user to that video.

4. Index3.html->Q & A Page-> 

This is a Questions and Answers Page. The topics are accessible by clicking on the red buttons. On-click opens this central black and gray screen where there are options in 3 categories of: questions about the topic, videos about the topic and thirdly, Helpdesk details.

The third section is static. The first two sections are dynamic. On-click of a link in the central section will show that video. In the first section, on-click of a question brings a pop-up box that shows the answer. In this same answer box, I have also added a copy button. Clicking the copy button copies the answer to the clipboard, where the used can paste it into another document. 

5. Index4.html->IT Contact Details Page->

Index4.html is the IT Contact Details Page. The image of the "freshservice" screen on-click brings the user directly to the LIT freshservice page. There are contact details of: email, address and phone, which are static. 

The image as above of the person with headphones is part of an animated GIF. Here, there are rotating images, set to milliseconds that run in a continuous loop. The idea is to add dynamic creative multimedia content to the page, while not being distracting. The idea is also to visually tell a story starting with the IT Service, then a student looking for IT help, getting guidance and then a thumbs up result from the CSD Helpdesk team image.

At base of screen is timetable I coded in HTML and CSS for the opening hours of the CSD Helpdesk. There  is an on-hover on each row as a light-gray highlight.

Next Plans for Website:

Tweak placement of Title in the header using margins.

In the first index Home Page, instead of the icons->add oval frames containing images of LIT.

______________________________________________________________________

Technical and conceptual for index.html Home Page: 

Idea to add circular frames for the images on index.html Home Page. This would visually and in conceptual design terms tie in with the "circular port-hole window feature" in the Main IT Lab, which is where the Kiosk is planned to be located. 

Examples of this window feature from photos I took a few weeks ago are the following which are located in the main IT room.

Images for index.html Home Page:

Step 1: Experimenting with options for Home Page images. I have set the dimensions and placement using three photos as in this screen:

Step 2: In this next screen is where I have placed code to convert square image frames to circular, and added a border to these also. 

Step 3: Now, to decide on which images of LIT:

I have sent an email to Supervisors for ideas and preferences for this above.

_________________________________________________________________________

Statistics I have put together on the projects so far:

______________________________________________________________________________

ATOMI:

I will be using ATOMI Active Presenter Software to make an interactive quiz using "Moodle" information as a case study. 

Approach: Look at the Moodle Videos I have made, make out a list of questions and answers with the theme "What you know about Moodle?", Record using Active Presenter.

______________________________________________________________________

REPORT:

Working on the Report which is due for this Work Experience on August 31st 2017.

I wrote up based on the policy guidelines some information on the Website project for my main report as follows:

Project: LIT CSD Kiosk Website Design:

The titles specified to write about in the “Work Placement Report Guidelines,” and corresponding information is as follows:

1. Whether it is an individual or a team project: I received a brief and worked from these requirements for this individual project.

2. Software used: Brackets and Google Chrome, M.S. Paint, GIFMaker.

3. Tasks involved in the project:

To design a kiosk website where e-learning video tutorials can be inputted. These are for students and particularly 1^st year students, as a website the CSD Helpdesk Staff can direct students with queries to for answers. The objective is for this resource to reduce long-queues at the CSD Helpdesk.

With this brief in hand, I brainstormed content and design ideas based on an analysis of user-type and user-requirements. Using the Heuristic Design Principles like the website being recognizable as an LIT website, I stayed with the current LIT colour scheme for the entire website. To further this I used the online colour-picker resources: a) Adobe Colour CC, and b) Pictaculous; to generate colour swatches with hex codes I could apply in the design. 

My objective tasks for the project was to design a modern, clean, clear website, with no clutter and clear Call to Action (CTA) functioning and that all would combine for good visibility and achieve an objective of minimalism, for a positive user UI/UX Experience.

The task to maintain consistency so that the five pages of the website are identifiable as linked and part of the same website. I used colour, style, font and layout as well as a related sequential flow of information.

I have provided many navigation options to suit different user approaches. There is a top navigation bar, and in the footer there is pagination navigation. Throughout, the website there are options provided for both on-click links from: images and from text. This gives freedom to the user with many options supplied. It also assists in error prevention by this clear and concise navigation from within the website.

There is a Contact Page, which satisfies the heuristic principle of supplying help in the website. Here there is clear information and instructions and a link directly to the Freshservice Helpdesk ticketing system, and a table of opening times, so no time wasted, all information in one place.

Next, is the content generation: where possible, I have summarised information accessible via a one sentence clickable link. Here, I generated the content from the LIT website and from the e-learning video tutorials which I made as other projects that compose this Work Placement. For the video tutorials, the task was to create a page to host these videos in the website.

I created based on feedback from my Supervisor, as part of the overall website, a single page in the website for videos and where the website is organised around this page. I considered the maintenance factor here in different people adding videos over time, where the code I have set up and all the developer has to do is to add the online links to anchor tags. I designed the page so that the user can either click on a: topic button link or a sidebar menu link, whichever they prefer, to bring them to the video.

4. Duration and outcome of project:

24/07/2017 to currently. Also, running concurrent with video-making projects, using Camtasia.

5. What I learned from the experience: this was a very exciting project for me as there is nothing I like more than developing new websites and the opportunity it provides to learn new code and expand my design thinking. Initially, I intended learning Adobe Dreamweaver for this website. I had a look at this product and found that while useful, it is close to a short-cut when compared to the process of developing longhand code. This longhand style I studied in this course using Brackets and Google Chrome. From the brief and speaking with my Supervisor, using a method like Brackets is acceptable.

My decision, based on these outcomes, was to develop the website using Brackets and build on the existing knowledge I have using this application.

I have learned a lot from this experience, linking in with Supervisors, interpreting the brief, learning new code, with each page and iterations that are characteristic of the evolving nature of website development; I found I have developed an increased fluency for the languages HTML5, CSS3 and JavaScript. This new knowledge has improved my output and efficiency in website design. The ideas I have on paper, I can now implement more closely the ever-learning process of bringing an idea on paper to life in a website.

As regards future career prospects my ideal career would be a “eLearning & Multimedia Developer,” where I could as in this Work Placement, work at both my interests eLearning and Web Development.

_______________________________________________________________________