Week 1: Website Project

The First task for this new module was to make a website to document the module and our projects at the university. The first things that we were instructed to add was a new homepage, a menu and a theme. I decided to use an edublogs site because I was new to the world of website creation and I want to learn the basics before I move to a more capable, but harder, way of making the site. I first picked a theme using the theme editor on edublogs.Themes

I chose a theme I like the look of and applied it. Next I had to add new pages for the Home, about me and website projects. I kept adding pages as we completed new projects and made sure to update the menu as I went. I decide to make the menu as clear as possible, I would sort the projects into categories. My top level of categorisation is University vs Extracurricular Projects. From there, the pages are split into groups and then have the  individual  project  pages.Menu system1

From there I just added content as I did each weeks worth of projects. During the electronics week, I first decided I wanted to embed a video in my site. However,  the embed tool automatically made the video aligned to the left, not the centre like all of my pictures. After doing some research into how to change this I discovered that I was able to add some HTML coide into the Text View of the website that would centre the video. left aligned video

I had to use 4 lines of code that I saw on a coding for beginners site. I pasted the embed code of the video into the middle of this code and that modified the video so it was then in the centre of the page. However, the video was still the wrong size and there was no resize tool for this. text form of website

To resize the video, I noticed that there were inputs for height and width of the video in the code, I measured the width of the picture above which was 1004 pixels. The width of the video was originally 845. I divided the desired width by the original width to give me a scale factor (of about 1.2). Finally I used this number to get a value for the height of the video whilst maintaining the aspect ratio. This let me know the dimensions to input into the fields  (1004 x 754.5) and enabled me to resize the video. Calculating the Ratio

During the embedded programming week I had a video of me testing a program with two microbits. It wasn’t clear in this video however that the microbits were outputting any voltage to the pins. I used imovie and an ipad app called sketchbook pro to annotate on the video and show that the pins were outputting. This involved me importing the video into imovie, then I split the video where I wanted the annotations to appear. Finally, I annotated a screenshot of the video with where each pin was outputting and brought those drawings back into imovie.imovie screencapdrawing on video

During week 11 (the Arduino LCD Project), I had written some code that I wanted to show on my website. I was going to use screen captures  by them self but then I realised that there was a lot of code and it would be much better if I could embed the code editor on my site and then the code would be available to copy as well. I remembered that with the micro bit it was easy to export an embed code from the editor (which was web based). However, I couldn’t find any share function in the Arduino desktop program. It was only when I imported my code to the web editor that I was then able to get an embed code in the exact same way as I had with the micro bit program (through clicking share and then embed). embed code for pacman

Organisation

Throughout this project, I have used to do lists to keep on top of what I have left to do.  I have kept these as live documents: adding and annotating things that need doing and crossing off things I have done. I have also recently created a time management document shown below. This shows the number of days until the deadline along the top and each weeks project. The cells are then colour coded depending on how complete they are on each day. I will continue to update this until its all complete by the deadline.

time planTime management

timeplan done

To do list

 

Print Friendly, PDF & Email