Week 7: Day 5 of Work Experience at LIT
Week 7
Day 5 of Work Experience at LIT
I looked at yesterdays work and made plans for today's tasks.
Formatting for Website: I applied all new formatting and content from this “Contact Page” to all other pages in this Local Route Folder file.
Website Video: Sourced a "Promotional Video of LIT," our team made as part of the Digital Video Module of this H. Dip in Computing course.
Link is: https://youtu.be/KCvYBA894VA
Embed Code is: <iframe width="854" height="480" src="https://www.youtube.com/embed/KCvYBA894VA" frameborder="0" allowfullscreen></iframe>
=>This I will use in the About LIT Page of this website.
College Kiosk Website:
FAQ Page - working on the structure and coding of this page.
Use-Case: wrote up a "Use-Case" scenario for the expected user interface, before, during and after use of this page. This was a tool of the "Interactive Interface Design" module I studied in Term 2 of this course. It provides an outlook on how a user might use this website, and from this the things to design for.
Modal Code: With one piece of "modal" code to start with, I studied this and figured out the HTML sequence and links and the CSS styling that had already been applied. I removed a lot of the features, while retaining the actual JavaScript code workings of any modal. Then, I added my own CSS styling to tailor the effect I'm aiming for. I used a lot of <div> classes in the HTML, to pick up as identifiers, in the corresponding CSS stylesheet.
Once this was complete, I worked at combining "modal" code with "drop-down menu" code and "show/hide toggle" code, as well as placement of these in the HTML and CSS structures, so that it all works together to enhance the UX/UI user experience.
I started this morning and by the end of the work day this page was complete in terms of all coding. In summary these features are:
HTML: normal HTML structures, wrappers, containers, div's, classes, id's, headings, scripts.
CSS styling: external CSS stylesheet mostly used, also wrote code in, internal style sheet and inline styling.
Buttons working: topic headings are stated in the button text area.
Modals working: buttons as modals, on-click of button opens the modal.
Drop-down menus working: these are within the modal. Once the modal opens there are three sections:
Section 1: The question heading e.g. "how to Log on?"
Section 2: The heading for the video section that relates to section 1.
Section 3: Contact/Help phone/ext, email, address, freshservice ticketing system.
How this works:
On-click of button->modal opens-> modal consists information which is in three headings/sections->within each section is particular information: section 3 is static as a contact section. Section 1 contains a list of FAQ questions for the topic in its heading->On-click of the question->a drop-down appears with the answer-> this occurs for each of the questions and answers-> This also has a toggle show/hide feature where-> clicking on either the question or the answer then toggles off the answer-> within this all questions and answers can be toggled to open at any one time. This provides the user with a view of many questions and answers related to that topic they are looking for information on.
Section 2 operates in a similar way to section 1, where, there are video titles related to the questions and answers above and on-click of any video title opens a drop-down of a link the user can click on to view that video.
Overall page:
The overall page itself I used the LIT colour scheme of red, gray, white and I added some dark-blue for balance with the first three. I added a light-gray background to the button area and the modal itself. The theme of this page is in line with the "CSD Contact Page" I designed yesterday, and all other pages that compose and will compose this website.
Any number of question topic buttons can be added to this page as questions and answers and videos are compiled. I am also thinking of furthering this page with a background image, adjusting the opacity of this so it is a less prominent feature than the buttons. This would be too keep the Call-To-Action (CTA) in the viewers perception, to be the Question Buttons. This would also fill the page which would be visually stronger than simply having buttons, while and after the volume of questions and answers and videos are being added.
Currently, I have two question buttons added. Any other number of buttons can be added by adjusting the "containers", "div's", "classes", "id's", "button code", "document.get element by code," and individual coding within these.
The following are screens with a brief description of their meaning. These screen-shots were taken on a large LIT, MAC screen, which would represent, the most expanded likely view.
Day 5 of Work Experience at LIT
I looked at yesterdays work and made plans for today's tasks.
Formatting for Website: I applied all new formatting and content from this “Contact Page” to all other pages in this Local Route Folder file.
Website Video: Sourced a "Promotional Video of LIT," our team made as part of the Digital Video Module of this H. Dip in Computing course.
Link is: https://youtu.be/KCvYBA894VA
Embed Code is: <iframe width="854" height="480" src="https://www.youtube.com/embed/KCvYBA894VA" frameborder="0" allowfullscreen></iframe>
=>This I will use in the About LIT Page of this website.
College Kiosk Website:
FAQ Page - working on the structure and coding of this page.
Use-Case: wrote up a "Use-Case" scenario for the expected user interface, before, during and after use of this page. This was a tool of the "Interactive Interface Design" module I studied in Term 2 of this course. It provides an outlook on how a user might use this website, and from this the things to design for.
Modal Code: With one piece of "modal" code to start with, I studied this and figured out the HTML sequence and links and the CSS styling that had already been applied. I removed a lot of the features, while retaining the actual JavaScript code workings of any modal. Then, I added my own CSS styling to tailor the effect I'm aiming for. I used a lot of <div> classes in the HTML, to pick up as identifiers, in the corresponding CSS stylesheet.
Once this was complete, I worked at combining "modal" code with "drop-down menu" code and "show/hide toggle" code, as well as placement of these in the HTML and CSS structures, so that it all works together to enhance the UX/UI user experience.
I started this morning and by the end of the work day this page was complete in terms of all coding. In summary these features are:
HTML: normal HTML structures, wrappers, containers, div's, classes, id's, headings, scripts.
CSS styling: external CSS stylesheet mostly used, also wrote code in, internal style sheet and inline styling.
Buttons working: topic headings are stated in the button text area.
Modals working: buttons as modals, on-click of button opens the modal.
Drop-down menus working: these are within the modal. Once the modal opens there are three sections:
Section 1: The question heading e.g. "how to Log on?"
Section 2: The heading for the video section that relates to section 1.
Section 3: Contact/Help phone/ext, email, address, freshservice ticketing system.
How this works:
On-click of button->modal opens-> modal consists information which is in three headings/sections->within each section is particular information: section 3 is static as a contact section. Section 1 contains a list of FAQ questions for the topic in its heading->On-click of the question->a drop-down appears with the answer-> this occurs for each of the questions and answers-> This also has a toggle show/hide feature where-> clicking on either the question or the answer then toggles off the answer-> within this all questions and answers can be toggled to open at any one time. This provides the user with a view of many questions and answers related to that topic they are looking for information on.
Section 2 operates in a similar way to section 1, where, there are video titles related to the questions and answers above and on-click of any video title opens a drop-down of a link the user can click on to view that video.
Overall page:
The overall page itself I used the LIT colour scheme of red, gray, white and I added some dark-blue for balance with the first three. I added a light-gray background to the button area and the modal itself. The theme of this page is in line with the "CSD Contact Page" I designed yesterday, and all other pages that compose and will compose this website.
Any number of question topic buttons can be added to this page as questions and answers and videos are compiled. I am also thinking of furthering this page with a background image, adjusting the opacity of this so it is a less prominent feature than the buttons. This would be too keep the Call-To-Action (CTA) in the viewers perception, to be the Question Buttons. This would also fill the page which would be visually stronger than simply having buttons, while and after the volume of questions and answers and videos are being added.
Currently, I have two question buttons added. Any other number of buttons can be added by adjusting the "containers", "div's", "classes", "id's", "button code", "document.get element by code," and individual coding within these.
The following are screens with a brief description of their meaning. These screen-shots were taken on a large LIT, MAC screen, which would represent, the most expanded likely view.
 |
| Screen 1: page as it is with the LIT colour scheme red modal buttons. Any number of buttons can be added to this page. |
 |
| Screen 2: On-click of a button, where here the first one has been selected brings up this modal screen. Within this you can see the three sections I discussed in the above text. Within these are questions with toggle answers and links to relevant videos. Also, helpdesk contact details in section 3. |
 |
| Screen 3: Here "Question 1 log on?"has been clicked and "Answer 1" is displayed in the first section. In the second section "Video 1" has been selected and "Video link 1" is displayed. |
 |
| Screen 4: In this screen, the question clicked on have been re-clicked to toggle off. There is an "x" close button to top right of screen. On-click of this returns the page view to that of Screen 1. |
Comments
Post a Comment