MY DAY FURTHER EDUCATION
I designed together with my work colleagues My Day page for Further Education. As you can see from screen shots you can find here Moodle tab, Calendar, Facebook, Study Skills, Balance, Mall, Announcements, Twitter, You Tube, Google, Tasks, College Services, Pro-Portal, Attendance, Office 365. You can see the main tab Enrichment Guitar Lessons a free course running for four weeks beginning on Wednesday 24th February.
1. Creating structures and styles and using them to produce websites
1.1. Determining what website content and layout will be needed for each page and for the site.
1.2. Planning and creating web page templates to layout content.
1.3. Selecting and using website features and structures to enhance website navigation and functionality.
1.4. Creating, selecting and using styles to enhance website consistency and readability.
Modify the My Day site to achieve what was achieved, can do this by screencast or still images as long as it’s clear you are competent in using My Day admin group work
I used in My Day admin group work. I double clicked on each tile and I had access to settings. I was administrator of My Day. In my Settings you can customise tile, template, size, foreground colour and background colour.
Let me show you how administrative settings work in My Day for Further Education. When you click on Moodle tile settings, you can select size for example small, medium, wide, feed, wide feed, large feed. You can select foreground colour and background colour and this will display colours you can choose from. In each tile you can choose these settings. You can also select title position, title gradient, tile border, tile animations, scale tiles, theme and default layout.
Further Education determined the choice of the tiles. I would like to justify the range of tiles I suggested and the background theory behind these. I used
- Moodle because it is used for assignments, projects
- Calendar because it is good to check appointments
- Enrichment Guitar Lessons because there is a free course running for four weeks staring on 24th February
- Tasks because users can access apprentice test area for Level 3 Diploma in Digital Learning
- Announcements because users can check here updates about jobs, permits and other updates
- Twitter because users can access social media
- College Services because there is student information
- Pro-Portal because users can access pro-monitor
- Balance because users can check their library fines and print costs
- Twitter because users can access social media
- Facebook Attendance because users can access social media
- Mail because users can check their mail
- Youtube because users can access their videos on Youtube
- Google because users can perform search on google
- Office 365 because users can access their Newsfeed, OneDrive, SharePoint, Delve, Video, Word Online, Excel Online, PowerPoint Online, OneNote Online, Sway.
When you select personalise you can adjust settings. I included few screenshots here showing how to do it.
In first screenshot, I accessed administrative settings.
In second screenshot, I changed tile gradient and I selected radial.
In third screenshot, I customised tile in announcements and selected wide feed size, which caused that tile was larger in terms of size.
I feel very competent in using the My Day web system. This is very straightforward. All you have to do is to click on the specific icon and this will take you to your required information. For example if you want to find specific course, you click on My Day on Moodle and this takes you to Moodle directly. For example if you click on Facebook this takes you to Facebook. You select the category you need. If it is further education, you select further education, if this is higher education you select higher education and if you select sixth form, this will be sixth form. I included the screen cast to show you how you navigate around My Day.
https://estream.barnsley.ac.uk/view2.aspx?id=6457~4w~y0CqoKiA
I would like to show you competency in using the My Day web system. I would like to show you screenshots to show you this. It is really simple. As a user, you click on specific icon and this takes you to specific website. For example, if you click on Facebook tab, then you go to Facebook. If you click on Moodle, this takes you to Moodle page and you can search for a specific course. When you click on Attendance tab, this takes you on Attendance website. When you click on Announcement website, you can see various updates about announcements like student parking permits, awarding body timetables. You do not have to be trained to use My Day. Anybody can view relevant information by simple clicking on specific tab like Moodle or Announcements or Twitter. Administrators will have more authority to use My Day. This is used for more senior staff members. Administrators can simply view and administer the site and add new tasks. For example on Announcements website administrator can post and update new announcements. Administrators can also change the content of announcements and add new and amend existing posts.
1.5. Providing guidance on laws, guidelines and constraints that affect the content and use of websites
Web Sites must obey current legislation. Each website must meet legal requirements. Each business owner must ensure that they comply with regulations. Please find here six legislations I found that they should obey.
The Data Protection Act 1998
Business web sites must comply with the Data Protection Act 1998. If you have an online website you must apply for registration under the Data Protection Act 1998. This applies to companies who collect email addresses or personal information to supply goods or services. You can find registration form on Government Web Site.
The Privacy and Electronic Communications Regulations
Web Sites must adhere to this legislation introduced on 11th December 2003. You should include Privacy Policy and you collect or store information from clients. Your customers should know about cookie usage, who will be using the information and who it may be disclosed to and should be able to opt out of any disclosure.
Accessibility The Disability Discrimination Act 1995 DDA
Business Websites must adhere to this legislation. Your website must be accessible to disabled people. Partially sighted or blind people should be able to view the website. If you do not comply you may have to be legally liable.
E-Commerce Regulations 2002
The Electronic Commerce Directive and the Electronic Commerce Regulations 2000 Online selling and advertising is subject to the laws in UK if the trader is established in UK.
Recipients of online services must be given clearly defined information about the trader, the nature of commercial communications and how to complete an online transaction.
Online service providers are exempt from liability for the content that they convey or store in specified circumstances.
Changes to the powers of enforcement authorities such as Trading Standards Departments and the Office of Fair Trading.
W3C Validation World Wide Web Consortium
W3C accelerates efforts to build a more secure web with launch of Web Authentication Working Group. The W3C is trying to make the Web safer for daily use.
The Companies Act 2008
This Act main aim is to make provision about directors' disqualification, business names, auditors and actuaries, to reform company law and restate the greater part of the enactments relation to companies, to make other provision relation to companies and other forms of business organisation.
1.6. Explaining compatibility issues that may arise from presenting content on multiple platforms
My Day Further Education website you can use on any mobile device like your iPhone, iPad, laptop, or notebook any time during day or night. My Day Further Education website is accessible 24/7. You can also promote your website through marketing and website search optimisation. My Day Further Education website is user friendly website, available to be downloaded immediately on your ipad, mobile phone or iPhone and very quick and easy to use.
Let's look into compatibility issues and the meaning behind it.
I would like to explain first what cross-browser is.
Cross-browser is the ability of a website, web application,HTML construct or client-side script to perform where you have to give features and withdraw if there are no features.
Now after explaining what cross-browser is, I would like to discuss cross-browser compatibility and how I applied this into My Day Further Education.
Cross-browser compatibility is an issue faced by designers when they design websites. My Day Further education website should be used by many users and it should work in all browsers. I checked this and My Day Further Education is working in all browsers. Designer should ensure that May Day Further Education website can be used without improvement.
I would like to make a research the way in which a website adapts to a browser. My Day Further Education website can adapt to all browser versions and users can see clearly images
and text. My Day Website stretches to the width and height of any ipad, iPhone or any mobile device. This is really good because users can clearly click on any icon and this takes them to specific social network like Facebook or Twitter. It is very quick to use and navigate as you can go to specific social network like twitter, you tube, office 365, attendance, calendar, college services, balance.
I would like to show you understanding in compatibility issues that could potentially arise from presenting content on multiple platforms. It does not necessarily need to focus on My Day could be general issue. I would like to show you understanding of multiple device compatibility. I need to make sure that design matches with the subject and it is adequate and that I select appropriate images, content and colours and that website looks professional. If I create website of poor standard quality then client will not generate business and will not make good profit. It is important that images do not slow down the website speed or performance. Too large images or wrong formats can sometimes slow down website loading up time. It is important to choose correct size images and of adequate height and width. I noticed that on My Day you can clearly see that images are very clear and they do not slow down speed of the browser and can be loaded on any device like iPhone or ipad or any mobile phone. Size of images and height and width of them fits to any browser and can be loaded up anywhere. They do not slow down website and you can view them anywhere. That is why it is important that you choose correct size of images and good quality so that you can load them up easily.
1.7. Explaining when and why to use different file types for saving content
When you click on My Day Further Education, depends which button, for example you click on Moodle tab and this will take you to Moodle, you will click on Facebook tab and this will take you to Facebook etc. You can save it in Word doc , pdf document, plain text, web page htm, Word Macro-Enabled Document docm, Word Macro-Enabled Template dotm, Word XML Document xml, Single File Web Page mht, Speller Exclude Dictionary dic, Word 4.0 - 6.0/95 Compatible rtf, Office Theme thmx. We use different file types for saving content because we want to save images and different webpages.
My Day contain images and various other information that is saved. I would like to explain when to use different file types saving certain content. Images can be saved in different file formats. You can save them as jpg, gif, tif, png, bmp. My Day icons for Further Education are saved in jpg format and this is probably the most common format used now. My Day is a web application that holds and aggregates various information.
Let's see when to use different file types saving certain content. I would say most common is jpg and I would use it when you want to save and store digital images, especially for the web. I used jpg images for our My Day Further Education because jpg joint photographic group is used when I use more than 256 colours such as digital photographs. We used in the group jpg images because they have a good quality and you can experiment with the colours and they are easily visible and clearly seen by the users and you can easily adjust them to any browser. I would use gif graphics interchanged format images when you have larger blocks of a single colour and when I wanted to change colour of an image.. I would use tagged image file tiff if I wanted to reduce the file size because these images can be compressed. I would use bmp bit-mapped image when I would create posters, flyers or wallpapers.
I wanted to show you the content I used to develop the My Day websites and images on the tiles. I wanted to tell you what format I chose for the images and explain why.
I also made the research on image types and I will explain how they respond on the web. I used together in the team very simple content for the learners. I just pasted an evidence here. I used images for Moodle a graduate uniform, then calendar for calendar, guitar for guitar lessons, pen for study skills, bird for twitter, you tube symbol for you tube, chart with an arrow for attendance icon, square for office 365, Facebook logo for Facebook, Google symbol for Google, mechanism sign for college services, loudspeaker for pro-portal. The reason why I chose following images for the web is because they represent information users are looking for.
It is easy for them to recognise Moodle and courses through graduation uniform symbol and it is easy for them to recognise guitar symbol through guitar lessons. As you can see I used square format because it was easy to find the icons for the learners. Images on tiles respond quite easily as mentioned for users. For example users want to find the specific course, then they click on Moodle and they go to Moodle page. They need calendar information and they go to calendar page. They want to go to Facebook and they click on Facebook and they go to Facebook.
You can also save images and website pages in Photoshop, mainly a web based design program or Illustrator mainly used for logos. You can use CorelDraw CSD and provide with editable PDF. You can also save images as jpg or png or gif for web design.
Overall, it is down to client what format they want to save My Day Further Education website. They can also use snipping tool for saving files. I would suggest to save images in jpg or png files as they are more visible and clearer to display. Loading speed on webpage is also important when saving files because if website is slow then it is harder to save the website. I would also recommend to save My Day Further Education website in pdf format as it is easy, very clear and quick to save.
2. Selecting and using website software tools and features to develop multiple page websites with multimedia and interactive features
Planning and creating web page templates to layout content
2.1. Preparing content for web pages so that it is ready for editing and formatting
2.3.Selecting and using appropriate editing and formatting techniques
2.4. Selecting and using programming and development techniques to add features and enhance websites
2.5. Selecting and using file formats that make information easier to download
Wireframe templates and designs,
including why you choose certain tile sizes and images based on navigation,
functionality and readability
In first screenshot, I customised Attendance Tile and I selected pink background colour. As you can see you can select any colour from foreground colour and background colour. There are various colours you can select. When you right double click you will be able to see various colours.
Here is the dashboard for My Day for Further Education. When I selected personalise your dashboard, I have access for administrative settings where I can change settings, wireframe designs and templates. I attached screenshots of the tiles for My Day.
Here I attached a screenshot of the theme. Here I selected My Day theme.
Here I attached a screenshot of the scale tiles. I enabled them so users can see tiles clearly.
Here I attached a screenshot of tile animations. I enabled the scrolling animation for tile content. I selected speed of 8 seconds and duration of 3 seconds. This shows duration of tile animations and how long users can view them. 
 |
Here I attached a screenshot of tile border. I enabled adding a small border to each tile. This is only visible on dark backgrounds. As you can see each tile has a small border around it.
|
 |
Here I attached a screenshot of tile gradient. I selected none of the type of gradient in the tile because it looks better in the tile presentation.
|
 |
Here I attached a screenshot of title position. I selected the top position of tile title and icon so title comes from the top.
As you can see, I included physical evidence of wireframedesigns and templates with screenshots. In My Day Further Education in administrative settings on dashboard there is option to modify banner, live tiles, static tiles, content tiles and list tiles. All tiles can be changed due to labels, colours and sizes.
|
Let me discuss with you consistency within the page to explain how this improved user experience and think about how the choices you made and how this relates to the consideration for the user. I think we decided that my day page is very consistent. On my day page we chose very good icons which improved the user experience and users can easily and quick navigate on my day page. Let me give you few examples: User wants to go to you tube page and he can quickly find it on the bottom of the page. I think the reason why we inserted Moodle and tasks on top page is because users will use these pages the most for their coursework. Later we decided to insert calendar, announcements, twitter, college services, pro-portal in the middle because users will often use calendar and social networks. We decided to insert balance, twitter, Facebook, attendance, mail, you tube, google, office 365 at the bottom of the page because these are the least used icons. As you can see my day page is very consistent because this helps for users to find relevant information they are looking for and they can navigate very easily and quickly. Users can find very quickly and easily Moodle, Calendar, Tasks, College services, Facebook, Mail and you tube and when they click on the icon then they are taken quickly to that site. For example they click on Moodle and they are taken straight to Moodle. I pasted here evidence as a proof.
It is really good question why we used certain tile sizes and images. I think the main reason why we used Facebook, Moodle, Calendar, Study Skills, Balance, Mall, Twitter, Announcements, YouTube, Google, Tasks, College Services, Pro-Portal, Attendance, Office 365 because it is easy for users to find relevant information. Students or members of staff clicked on specific tile and went straight to specific website. When they click on facebook , they go straight to Facebook, when they click on Moodle, they go to Moodle. This is very functional, easy to navigate and easy to read. That was the main reason why we used these specific wireframe templates and designs. In terms of colours I think we were trying to match it specific social network or website like for Facebook we chose blue colour because this is colour Facebook uses and the same for Twitter etc..
I would like to show you more evidence of initial designs and ideas and show you a greater understanding of website readability and consistency. As you can see My Day icons are very consistent and very easy to read. Size of images is very clear and you can adjust images easily on the website. They are displayed evenly clearly. You can see images and load them up on any internet browser or any mobile device like iPad or iPhone. The images are very easy to upload and do not impact on speed of the internet. We decided to put announcements, Twitter and Facebook in the middle because users can clearly click on social networks. We decided to put Moodle, Calendar, Study Skills, Balance and Mail on the left because users can check their calendar, mail and their balance and courses in one column. We decided to put Tasks, College Services, Pro-Portal, Attendance, Office 365 on the right because users can check their attendance, tasks they need to do and college services in one column.
Let's look at selecting and using appropriate editing and formatting techniques, selecting and using programming and development techniques to add features and enhance websites, selecting and using file formats that make information easier to download, selecting and using a programme to upload and publish the website and making sure files can be retrieved effectively from remote hosts.
 |
I attached screenshot where I customised Pro-Portal tile. I changed colour of tile to green one in foreground colour and background colour. Here you can select any colour you want by double right clicking in right bottom corner.
|
 |
I customised Calendar tile and changed template to icon.
|
 |
I customised Facebook tile. I changed size to wide.
|
 |
Here you can see that I changed title position to top, tile gradient to none, enabled tile border, enabled tile animations, disabled tile border, disabled scale tiles.
|
 |
In this screenshot, I changed theme and you can also reset layout.
|
2.2. Organising and combining information needed for web pages in line with any copyright constraints
Copyright constraints and how you complied with these when preparing for development
I made sure that tiles I was using were not copyrighted. That means that I did not use any unauthorised images. If I was using images which were copyright I would be breaching legal rights and I may have to pay fine or get warning from the main author to remove these images. We used free copy right icons from Pixabay and Flaticon.
3.4. Responding to quality problems with websites to ensure outcomes are fit for purpose
3.4. Responding to quality problems with websites to ensure outcomes are fit for purpose
Testing the website links,
backgrounds, user targeting
I would like to consider testing more than links. Webpage works on multiple devices such as surfaces etc. It aggregates the required data such as Calendar, courses, google and attendance information, study skills, you tube, office 365, pro-portal, college services, tasks, mail, Moodle. You can upload My Day on multiple devices such as surfaces, mobile phones, apps. Users can clearly view calendar, courses, google, Facebook, Twitter and any other information they are looking for. Information is displayed very clearly and you can see images very clearly. You can also zoom images in and out on your app or mobile phone. When users click on app for specific course, they have to click on Moodle page and this takes them straight to Moodle and they can select the course they want. This is for Further Education My Day as we designed it. You can easily test the links by clicking on specific link you want. For example you want to go on Facebook, you click on Facebook and this takes you to Facebook app. You can easily test the link by clicking on it. As you can see website works on multiple devices. You should be able to see clear images. If image is too small, you can resize it or zoom it in and out on your mobile phone or apps. I heard that sometimes users may complain that images are too small. That is why they can make them bigger on their mobile phone or app. They can test link simply by clicking on it. For example they want to get to attendance link on My Day Further Education and they click on the link and they go to attendance link. If they want to get to twitter, you tube,
pro-portal, college services, tasks, office 365, they just click on icon and they straight go to twitter, you tube, pro-portal and other icon they need. My Day website should work on any device. If it does not work then that means you have problem with your Internet connection on your device.
After publishing My Day Further Education website, I tested it if it works. I clicked on Facebook, Moodle, Calendar, Study Skills, Balance, Mall, Twitter, Announcements, YouTube, Google, Tasks, College Services, Pro-Portal, Attendance, Office 365 and Enrichment Guitar Lessons and they all worked and this took me to each website. I also drew a small table showing the tests I made. This was my test plan to show and prove that My Day Further Education Website is working.
I would like to consider testing more than links. Webpage works on multiple devices such as surfaces etc. It aggregates the required data such as Calendar, courses, google and attendance information, study skills, you tube, office 365, pro-portal, college services, tasks, mail, Moodle. You can upload My Day on multiple devices such as surfaces, mobile phones, apps. Users can clearly view calendar, courses, google, Facebook, Twitter and any other information they are looking for. Information is displayed very clearly and you can see images very clearly. You can also zoom images in and out on your app or mobile phone. When users click on app for specific course, they have to click on Moodle page and this takes them straight to Moodle and they can select the course they want. This is for Further Education My Day as we designed it. You can easily test the links by clicking on specific link you want. For example you want to go on Facebook, you click on Facebook and this takes you to Facebook app. You can easily test the link by clicking on it. As you can see website works on multiple devices. You should be able to see clear images. If image is too small, you can resize it or zoom it in and out on your mobile phone or apps. I heard that sometimes users may complain that images are too small. That is why they can make them bigger on their mobile phone or app. They can test link simply by clicking on it. For example they want to get to attendance link on My Day Further Education and they click on the link and they go to attendance link. If they want to get to twitter, you tube,
pro-portal, college services, tasks, office 365, they just click on icon and they straight go to twitter, you tube, pro-portal and other icon they need. My Day website should work on any device. If it does not work then that means you have problem with your Internet connection on your device.
After publishing My Day Further Education website, I tested it if it works. I clicked on Facebook, Moodle, Calendar, Study Skills, Balance, Mall, Twitter, Announcements, YouTube, Google, Tasks, College Services, Pro-Portal, Attendance, Office 365 and Enrichment Guitar Lessons and they all worked and this took me to each website. I also drew a small table showing the tests I made. This was my test plan to show and prove that My Day Further Education Website is working.
Test Plan
The test details need a wider range. Let me show you how
I tested the whole web system and showed how each block aggregated all due to tasks from specific block and how I have responded to any failed tests. I created here a test plan in a table format.
I tested the whole web system and showed how each block aggregated all due to tasks from specific block and how I have responded to any failed tests. I created here a test plan in a table format.
Test No.
|
Test Details
|
Expected Outcome
|
Actual Outcome
|
Response
|
1.
|
does the
announcements block aggregate all due to tasks from latest entries
|
yes it should
|
Announcements block aggregates all due to tasks from latest entries
|
Announcement tile is working,
passed test |
2.
|
does the You Tube block aggregate all due to tasks from student videos
|
yes it should
|
You Tube block aggregates all due to tasks from student videos
|
You tube tile is working, passed test
|
3.
|
does the attendance block aggregate student attendances from MIS
|
yes it should
|
Attendance block aggregates all due to tasks from student attendances from MIS
|
Attendance tile is working, passed test
|
4.
|
does the tasks block aggregate all due to tasks from Moodle/ProMonitor
|
yes it should
|
Tasks block aggregates all due to tasks from Moodle/ProMonitor
|
Tasks tile is working, passed test
|
5.
|
does the college services block aggregate all due to tasks from student information
|
yes it should
|
College Services block aggregates all due to tasks from student information
|
College srvices tile is working, passed test
|
6.
|
does the pro-portal block aggregate all due to tasks from student portal
|
yes it should
|
Pro-portal block aggregates all due to tasks from student portal
|
Pro-portal tile is working, passed test
|
7.
|
does the office 365
aggregate all due to tasks from student office applications
|
yes it should
|
Office 365 aggregates all due to tasks from student office applications
|
Office 365 tile is working, passed test
|
Test No.
|
Test Details
|
Expected Outcome
|
Actual Outcome
|
Response
|
8. |
does the Facebook block aggregate all due to tasks from student social account
| yes it should |
Facebook block aggregates all due to tasks from student social account
| Facebook tile is working, passed test |
9. |
does the Moodle block aggregate all due to tasks from student assignments
|
yes it should
|
Moodle block aggregates all due to tasks from student assignments
|
Moodle tile is working, passed test
|
10.
|
does the calendar block aggregate all due to tasks from student appointments
|
yes it should
|
Calendar block aggregates all due to tasks from student appointments
|
Calendar tile is working, passed test
|
11.
|
does the study skills block aggregate all due to tasks from research skills
|
yes it should
|
Study skills block aggregates all due to tasks from research skills
|
Study skill is working, passed test
|
12.
|
does the balance block aggregate all due to tasks from print costs and library fines
|
yes it should
|
Balance block aggregates all due to tasks from print costs and library fines
|
Balance tile is working, passed test
|
13.
|
does the mail block aggregate all due to tasks from office 365
|
yes it should
|
Mail block aggregates all due to tasks from office 365
|
Mail tile is working, passed test
|
14.
|
does the twitter block aggregate all due to tasks from student social account
| yes it should | Twitter block aggregates all due to tasks from student social account | Twitter tile is working, passed test |
No comments:
Post a Comment