SB Work Placement 2017

Week 11 Day 4 of Work Experience at LIT Yesterday, I applied media queries to the video page of the website. Today:  work on the header-reduce size; make logo image into transparent png, and make this and the title responsive. work on the footer-responsiveness of footer elements. apply media queries to home page-for pagination. add index.html pages linked to video page buttons and include an iframe at 70% width, in each of these pages to host the u-tube e-learning tutorial videos.

Week 11 Day 3 of Work Experience at LIT I have been working on media queries for responsive design and figured out how to use them. As a template for this and future websites, I set the body background colour to correspond with the CSS3 media query. This makes figuring out the items that need to be adjusted within the media queries more efficient. These breakpoints are where the pixel change starts with a highlighting corresponding colour to differentiate. These responsive pixel settings are for medium and smaller screens: 1. Screen-size: 1800px: 2. Screen-size: 1500px:  3. Screen-size: 1200px: 4. Screen-size: 960px: 5. Screen-size: 750px; 6. Screen-size: 540px: 7. Screen-size:  For larger screens: Note: the above screens were recorded on a laptop 1800px screen The next are from at 2700px screen. 8(a) 2100px: 8(b) 2400px:

Week 11 Day 2 of Work Experience at LIT Demonstration of work today. Feedback on website to proceed with the first prototype. I scaled for responsiveness the tutorial sidebar and buttons on this video page. I added categories and content that represents the actual videos which will be displayed on this screen. I set the video link code to the standard "#", where this will be replaced with the u-tube file.  This is video page at zoom of 85% from full screen. This is at zoom of 80% and smaller screen of 1090px width. The page adjusts responsively up to a quarter of its width.

Week 11: Day 1 of Work Experience at LIT Website: Working on website this morning and it looks like this so far. Figure 1: website video page I'm working on this morning. Report: I got report bound and handed up today. Website: Further work on website from this morning. Completed coding of updated website (prototype 2). Added demonstration video links, one per each of the above cards. The on-hover overlay contains: the video title, some descriptive information and button with on-click brings the student to the website. I have added modal code here, so that the video will open in its own screen. This I think is better than adding a series of index pages, one for each video and the code and the visual effect is more dynamic, cleaner and tidier.  Design problem: to fit approximately 25 videos on a touch-screen where there is no scrolling. Design Solution: I came up with was to add a Chevron arrow and link it to another same template page layout. In this way on the...

Week 10  Day 5 of Work Experience at LIT I've been working on backups for this blog this morning. Next is website work. I developed a home page into a direct access to video page with a link to contact details on another web-page. Each video has a card structure which consists of the card and on this a title and image. The images are in a circular format resembling the port-hole architectural window features of the main IT room in LIT.  On-hover, I have set an overlay screen for each card. This means that on hover this screen appears over the card, and on this I have set a title and area for brief video description as well as an animated button, which on click brings the student to the video page.  This keeps the initial view of the design clear and free of clutter. The information on first view of screen is minimal and if the student wishes to view a particular video, on-hover of the video card brings up as spoken of above, summary details in text and a button ...

Week 10 Day 4 of Work Experience at LIT Working on report due next Thursday. Working on Animated GIF I am making from skills and techniques I learned in Lynda.com about motion graphic animations. Got feedback on website and working on this. Completed report. These are some drawings I have included,  which are of LIT buildings, landscapes and features:  ________________________________________________________________

Week 10 Day 3 of Work Experience at LIT Holiday leave today. I came across a great infographic about the future of employment_Skills of the Future: Design principle graphic from the "Interaction Design Foundation":

Week 10 Day 2 of Work Experience at LIT Working on Adobe Photoshop tutorials today. Lynda.com Chapter Name: Motion_Graphics_Loops_PS This describes how to create an animation through layering, drawing with the brush tool and working with the timeline. Created animation using this tutorial. This is useful to animate your own drawings into an animated video-like format and for making a GIF. I signed up for the "Cloud Academy Blog" newsletters: Completed this above Lynda.com course, overall course title and author: "Motion Graphics Loops 01: Photoshop Techniques with Owen Lowery." Planning to make an LIT related GIF using these learned techniques...

Week 10 Day 1 of Work Experience at LIT Email from Supervisor this morning about new videos to assemble: How to use the plotter printer? How to request a training room booking? I have looked at some u-tube videos on "how to use the plotter printer?" in preparation for training on these video topics. Here are the links: https://www.youtube.com/watch?v=vrOf9AtRutw https://www.youtube.com/watch?v=GJFJEwKNqfY These next two videos relate to college use of the plotter printer: https://www.youtube.com/watch?v=V8l12yZrUQ4 https://www.youtube.com/watch?v=MiyLJS24PTY Using the Plotter Printer: The basic process is to save your file to a memory stick, where you will then upload your file in the computer corresponding to the plotter printer.  Make sure your settings for positioning the paper in the plotter are correct->landscape, portrait orientation; size e.g. A1, A3, A4. (There is a lever at the back of the printer: lever-down when adjusting paper ...

Week 9 Day 5 of Work Experience at LIT I have been working on the tutorials page of the kiosk website. Here my design thinking is for a classical look, with Call-To-Action options of button links or sidebar links->on-click brings user to the video tutorial. Videos can be organized into categories as per each section.  Figure 1: Video Tutorial screen at zoom of 75%. Reading up on CSS Media Queries at the present.

Week 9 Day 4 of Work Experience at LIT This Morning->organizing all videos made so far. Fixed a glitch on the OneDrive video and shared through OneDrive with Stephen. I think all the videos are fine from looking at them today. I uploaded the Kiosk Website to the web hosting site "Bitballoon," to check it was working on the "Internet Explorer."  All is working using the "Internet Explorer." Link address is:  kioskwebsite.bitballoon.com Feedback from Supervisor on website where I enlarged the buttons in a grid format. The current text and links can be replaced by what the final decided version is. This is a student website, however, since most of the videos I have been making are for Staff, I have added six Staff Moodle Videos I have made to Topic 1 of this Page for demonstration purposes. As above, these can easily be replaced with other student videos.  On week 1 and week 2 of this Work Experience, I made two student videos on how to ...

Week 9 Day 3 of Work Experience at LIT Work on poster from this morning: added square dark-dark background for printing, formatted footer layout, changed title of "Videos on how to:" stronger font-weight. GitHub: Working on using and learning more about GitHub website hosting platform. I have all the website files uploaded to GitHub by adding code to the Terminal and as in next screen it has been added to a branch called gh-pages. I have used the code to bring it up as a website, however, when I do a web search, I'm getting a 404 Page. Next step is therefore, to look up some more information on this last process step.

Week 9 Day 2 of Work Experience at LIT Inspiring image to start the day. As part of this Work Placement there is the preparation for full time employment. I have started updating my CV and added 3 projects to my LinkedIn profile to start with, which are: 1. FYP Project Report for "Design Your Day Your Way" website which shows a detailed description of design processes and website development and the final website product. The link for this is:  https://files.acrobat.com/a/preview/7ca11b9c-74a1-44b6-ba38-eeedc620f474 2. Interaction Interface Design Lo-Fi Prototype for:"Event Broadcaster and Registration Mobile App." Link for this is:  https://files.acrobat.com/a/preview/4df84ba3-52e7-41c6-bbfd-4a84a768dcd0 3. Evolving Web Technologies Report, Statistics and link to website , for this SEO website that had the objective of designing a website for optimal SEO ranking. Link for this is:  https://files.acrobat.com/a/preview/fa5a47ef-4289-4c91-9bf1-1e893...

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 th...