Week 8: Day 2 of Work Experience at LIT
Week 8
Day 2 of Work Experience at LIT
Continuing the work on the website from yesterday for today. I have been working at making interactive an "FAQ Page" for the website. This consists of buttons that on-click link to modals and within these modals there is both static and dynamic content. The static are the headings and other, and the dynamic is the use of modals and within these drop-down/pop-up code I nested in the modals.
The page will consist of a series of these buttons->modals with FAQ content.
I found a glitch in the code yesterday, where the first button->modal on the HTML page would work perfectly with static and dynamic content I had added. However, the buttons after this even though programmed for to be separate was displaying on-click of the first button->modal.
Here, the HTML, CSS and JavaScript would work in the first modal on the page, but not with subsequent modals.
I worked with adding div's, with classes and id's which often work when separating out content. With this I could then add different content to the modals, while retaining its same container structure. I fixed the glitches in the display of the dynamic content using, also div's, classes, and id's, and CSS.
In working for a remedy to this I have learned quite an amount about blending codes: what work's, what doesn't; and furthered my knowledge on HTML, CSS, JavaScript; the use of codes for div's, classes, id's span, columns; various features modals, drop-downs, collapsible menus, toggle hide/show features;and programming code linking this code to events, such as on-click, which then leads to the playing out of code such as e.g." ........onclick=document.getElementById('menu').......," which on click of the button with this code, opens the modal with the "id" of "menu."
At this point, the user can click on a FAQ topic button, modal opens that contains content, modal is divided into 3 sections: FAQ questions; related e-learning videos; contact helpdesk details (phone, email, address, freshservice ticketing system).
The third section is static, while the first two have interactive content. The second section on the videos I have set up where these videos can be added to the page and on-click of link to view. The first section consists of: questions. On-hover there is a drop-down/pop-up box with the answer. Here I added a "copy" button, where the user can easily click the "copy" button in the answer box and the answer is copied to the clipboard, from which they can paste into their own documents.
The following are two screens of this page. Here the items are placeholders and all the code is in place for these to work and that multiple versions of these buttons can be added to this page as topics. There are currently 3 buttons in red here where each button can represent a different topic, where the first screen is the system at rest.
The second screen is where on-click of the "How to Login?" button brings up this modal page with the three sections described as above. All of the text here are for demonstration purposes with thought of the type of content that would be added. Only the headings and paragraph content need to be changed for the adding of different topics, as all the programming code is in place and working.
When the user clicks on the red topic button->modal opens as in the second screen below. For the first section, on-hover of a question, for example, "Question 1: About Login," the answer shows in a box. Here I have added a "Copy," button, for the user to have the option of copying the answer. The answer can be copied to their clipboard and pasted to their own documents. (I will add a screen image of this today.)
The same sequence happens with the questions 2 and 3, and further questions can be added with different "id" codes.
In the second section, there are the CSD e-learning videos currently in the making. There is a video title and a video link that can be clicked to see the video. The same sequence happens with the other videos in this section as as above further videos can be added to this section.
The third section is a Helpdesk Contact Details static information section.
All topic buttons open the same design and format of modal boxes seen here in screen 2.
Next video work:
Stephen sent an email about next video work which is as follows:
1. "How to install the VPN for Staff." This has to be done from the laptop using a mobile hot-spot or any other web connection that is not eduroam.
2. Starting on the "Core Portal," namely, "Booking Annual Leave."
Article read today:
In following the train of thought of the next video, I read up about VPN. Main points I found are:
Next part of website:
I am now looking at the "About LIT Page" for design and content for the website.
A. Looking at work I already have done relevant to this new website page:
1. I have a website online made in the "Evolving Web Technologies Course", from term 2, for ideas for the website page:
website address: https://k00121609.github.io/SEOEWT/.
2. There is also a video we made as a team from the "Digital Video" course, where the theme
was to advertise LIT:
website address: https://youtu.be/KCvYBA894VA
& its embed code : <iframe width="854" height="480" src="https://www.youtube.com/embed/KCvYBA894VA" frameborder="0" allowfullscreen></iframe>
B. LIT Website: I have spent some time browsing the LIT website for ideas and information.
C. Sketches for Page Layouts: I am now putting together sketches of ideas for layouts and how the information will work together as a unit and links between them with other aspects of the website pages.
D. Design: for design, I will continue with the current dimensions and page proportions from the external CSS stylesheet and the LIT colour palette already used in the "Contact Details Page", and the "FAQ Page."
Day 2 of Work Experience at LIT
Continuing the work on the website from yesterday for today. I have been working at making interactive an "FAQ Page" for the website. This consists of buttons that on-click link to modals and within these modals there is both static and dynamic content. The static are the headings and other, and the dynamic is the use of modals and within these drop-down/pop-up code I nested in the modals.
The page will consist of a series of these buttons->modals with FAQ content.
I found a glitch in the code yesterday, where the first button->modal on the HTML page would work perfectly with static and dynamic content I had added. However, the buttons after this even though programmed for to be separate was displaying on-click of the first button->modal.
Here, the HTML, CSS and JavaScript would work in the first modal on the page, but not with subsequent modals.
I worked with adding div's, with classes and id's which often work when separating out content. With this I could then add different content to the modals, while retaining its same container structure. I fixed the glitches in the display of the dynamic content using, also div's, classes, and id's, and CSS.
In working for a remedy to this I have learned quite an amount about blending codes: what work's, what doesn't; and furthered my knowledge on HTML, CSS, JavaScript; the use of codes for div's, classes, id's span, columns; various features modals, drop-downs, collapsible menus, toggle hide/show features;and programming code linking this code to events, such as on-click, which then leads to the playing out of code such as e.g." ........onclick=document.getElementById('menu').......," which on click of the button with this code, opens the modal with the "id" of "menu."
At this point, the user can click on a FAQ topic button, modal opens that contains content, modal is divided into 3 sections: FAQ questions; related e-learning videos; contact helpdesk details (phone, email, address, freshservice ticketing system).
The third section is static, while the first two have interactive content. The second section on the videos I have set up where these videos can be added to the page and on-click of link to view. The first section consists of: questions. On-hover there is a drop-down/pop-up box with the answer. Here I added a "copy" button, where the user can easily click the "copy" button in the answer box and the answer is copied to the clipboard, from which they can paste into their own documents.
The following are two screens of this page. Here the items are placeholders and all the code is in place for these to work and that multiple versions of these buttons can be added to this page as topics. There are currently 3 buttons in red here where each button can represent a different topic, where the first screen is the system at rest.
The second screen is where on-click of the "How to Login?" button brings up this modal page with the three sections described as above. All of the text here are for demonstration purposes with thought of the type of content that would be added. Only the headings and paragraph content need to be changed for the adding of different topics, as all the programming code is in place and working.
When the user clicks on the red topic button->modal opens as in the second screen below. For the first section, on-hover of a question, for example, "Question 1: About Login," the answer shows in a box. Here I have added a "Copy," button, for the user to have the option of copying the answer. The answer can be copied to their clipboard and pasted to their own documents. (I will add a screen image of this today.)
The same sequence happens with the questions 2 and 3, and further questions can be added with different "id" codes.
In the second section, there are the CSD e-learning videos currently in the making. There is a video title and a video link that can be clicked to see the video. The same sequence happens with the other videos in this section as as above further videos can be added to this section.
The third section is a Helpdesk Contact Details static information section.
All topic buttons open the same design and format of modal boxes seen here in screen 2.
These next images, are a closer view of the answer boxes:
- The first 3 photos are of the "Log In" question section.
- The next 2 photos are of the "Moodle" question section.
- I included these to show the capacity of the answer box for minimal text as in the first 3 photos and for large amounts of text in the following 2 photos.
- All of the images have the "copy" button function.
- It is also possible to add clickable links within these answer boxes by adding programming code for an anchor link.
 |
| Distance view of screen with modal box opened and with the cursor on hover of the first question, there is the answer box with a copy button to copy and paste the answer. |
 |
| Close up view of answer box and copy button function for the first question. |
 |
| Close up view of answer box and copy button function for the second question. |
 |
| Distance view of Moodle modal, questions and answer box. |
 |
| Close up view of question 2 and answer 2 as well as the copy button, for copy and paste of the answer, an option for the user. |
Next video work:
Stephen sent an email about next video work which is as follows:
1. "How to install the VPN for Staff." This has to be done from the laptop using a mobile hot-spot or any other web connection that is not eduroam.
2. Starting on the "Core Portal," namely, "Booking Annual Leave."
Article read today:
In following the train of thought of the next video, I read up about VPN. Main points I found are:
- An objective of VPN, is to protect your information while online.
- This is a service that can be purchased.
- This works where your IP address does not know about your online connections and these records.
- Some VPN companies claim not to keep logs, and this is a matter of trust whether or not they do and whether they will share your information.
- Some VPN companies keep logs of your online records for reasons such as technical support and others.
- Many VPN provides are legally bound to hand-over or share a persons VPN information as in e.g. legal cases.
- The disadvantage with this added security and encryption is that page loads speeds can be slow.
- The "Tor Anonymity Network," is advised as more secure than most. Here, your VPN provider cannot see your true IP address.
Next part of website:
I am now looking at the "About LIT Page" for design and content for the website.
A. Looking at work I already have done relevant to this new website page:
1. I have a website online made in the "Evolving Web Technologies Course", from term 2, for ideas for the website page:
website address: https://k00121609.github.io/SEOEWT/.
2. There is also a video we made as a team from the "Digital Video" course, where the theme
was to advertise LIT:
website address: https://youtu.be/KCvYBA894VA
& its embed code : <iframe width="854" height="480" src="https://www.youtube.com/embed/KCvYBA894VA" frameborder="0" allowfullscreen></iframe>
B. LIT Website: I have spent some time browsing the LIT website for ideas and information.
C. Sketches for Page Layouts: I am now putting together sketches of ideas for layouts and how the information will work together as a unit and links between them with other aspects of the website pages.
D. Design: for design, I will continue with the current dimensions and page proportions from the external CSS stylesheet and the LIT colour palette already used in the "Contact Details Page", and the "FAQ Page."
Comments
Post a Comment