The exhibition

​The Transmedia exhibition is Winchester university's end of year exhibition, it is put in place to showcase the students work. This includes every student in the Digital Media department. The responsibility of creating the exhibition is tasked to the whole cohort of the second year students - this is inclusive of myself. This year however was slightly different to previous years as I am the only student on the Digital Media and Development pathway. This meant whilst other students were tasked with other roles, mine was to create the website!

I was however lucky enough to receive support from an ex-student who is now perusing a career in as a fullstack developer.

*Something to note for this project is that unfortunately my computer got wiped and I lost nearly all of the screenshots I had planned to add for this project*.

The beginning stages

Due to the lack of developer’s on this project, it was collectively decided that we would use the rough structure from the 2021 website. From there edit the page layouts to suit our content and of course update the styling to match the brand. The first thing I did for this project was schedule a call with the ex-student and ask him to explain to me some of his processes and the software's he used to build it. I learned that he used both Laravel and SASS to create the website, both being something I have never worked with before, so I began my research. I looked at the main components used to build last year's Transmedia website and explained to the designers that it will have very similar functionality, meaning that they need to be conscious of this when creating the design. As well as this, I emphasized the importance of having the design produced as soon as possible as it is a large project but also to gain traction to the Transmedia Exhibition 2022 it is important to have both the landing page and website created and operational promptly.

The timings

I requested all the design details, however I only received a rough visual created in Adobe XD and an animation for the website, so I had to ask more specifically for a website mockup, even if only for the homepage. There were a few delays in receiving designs however and I had to wait for the hosting to be changed and the website from last year to be moved.

Using SASS

Whilst I was waiting, I learnt SASS to continue to style the website in the same was as before. SASS was installed through the CMD (command line) as it complies the ‘.scss’ file into a ‘.css’ file. To do this is found relevant articles on the internet, to see one of them click here. Something to be mindful of when using SASS is that you need to run the command 'npm run watch'. This effectively means that use are using Node's package manager to run the script from the package.json file everytime changes are made. Without running that command you will not see any live updates. Node is an open-source, cross platform JvaScript runtime environment and it allows for code to run outside of a browser.

The above process is very similar to the installation and use of SASS in my Tree Trail project, to see this click the button below.

The benefits of using SASS include:

• You can define variables that are likely to be used multiple times in its own ‘.scss’ file and this can then be referenced in your styles sheet. This is time efficient, and it means that if you are using it to define colours for example, you can stay consistent.
• It allows for better minification which is particularly useful when using JavaScript and CSS.
• When having a website live, Google prefers faster loading website and it is easier for the developer to work with less code.
• Similarly to PHP’s include statement, you can create modules and add them to different areas of the website.

Laravel framework

To follow on from the development from last year’s Transmedia website, I needed to have an understanding of Laravel. The framework allows for a full stack application and carries out works with both the frontend and the backend. Similarly to most frameworks, it supports and saves time for developers. On the CMD I checked that I had a version of GitHub installed, next I cloned the GitHub repository to my computer. The reason for which GitHub was used is because when used in a professional environment, it acts as a link to the server. It means that there is a ‘true source file’ on GitHub and everyone working collaboratively is working on a copy, this way if errors occur, you can debug by viewing the previous version. In the beginning, I used MAMP, it is ‘a free, local server environment’ for many programming languages, meaning that I can build projects from home whilst connecting to the server locally. However, I ended up using the command ‘npm run dev’ to connect locally to a port on my computer.

How Laravel works

• Instead of using ‘package.json’ like I would with other frameworks, I used ‘composer.json’ and it is the package manager file that holds all the PHP applications.
• The ‘vendor’ file contains the modules for the application and in order to find the PHP file which displays the functions, I located the ‘routes’ folder and then the web.php shows where to find the functions and ‘page controllers’.
• Every time it makes a new request and it reads the whole application from the server. The server then builds it out into HTML, CSS and JavaScript and sends it back.
• It has similar functions to PHP’s ‘include’ function called ‘@extend’. This allows you to pull in certain bits of code to your pages to avoid duplication writing the same code for common components.
• I created a ‘layout’ folder in the directory and created my own ‘app.blade.php’ file. This is the same as the 'head' section when building with HTML, it is where the links are stored.

Datebases

Before I began working collaboratively, I explored Heidi SQL. In the past I used programs like PHP My Admin to view databases but there are lots of similar programs. It was interesting to explore an alternative. I did actually create an environment file (.env) for the transmedia build. The ‘.env’ file is where the configuration details for the application is stored and is the file where you can see what database elements are being pulled across, however I scrapped this when it was decided that we will be using the structure from the previous year's website.

The rebuild

In the meantime, I started blocking out the elements that will be built with HTML so some pages had a basic structure that I could use as a template. With this project having all the second-year students being a part of it, it meant that it was difficult to receive the necessary assets in time. This was also the case for a web mockup with the correct branding, so it took longer than planned. In the end the designs were not provided by the designers and instead, were made collaboratively by others in the cohort. The plan changed slightly and it was decided that solely changing the colours and logo was not enough to highlight and differentiate that branding for Transmedia 2022. Instead, the outsourced developer and I used the same project folder so some of the backend requirements were already set up and the file directories were correct, but all the pages were rebuilt from scratch. The steps I took included recreating the ‘layout’ page, as well as creating an empty file for each page of the website to the existing ‘views’ folder. It was essential that the names correlated to the previous year. Next in the resources folder, I created new ‘.scss’ files for the new pages. From here I built out the pages adding, brand styling and content.

Personal Evaluation

It was a learning experience to work within a team of over 30 individuals whilst collectively putting together an exhibition for hundreds, including potential employers! Although waiting on digital assets took longer than planned for, it meant I had more time to get a clear understanding of these new programs. Furthermore, it improved my communication skills as I had to confer with lecturers and someone who is now an expert in their field! I am grateful to have been able to work on a 1 on 1 basis with the ex-student. It meant I could ask questions and take notes in a more personal environment. I have used GitHub before but working with someone I have never met and do not see (for example my lecturers) was more like a working environment and I have once again been reminded of the benefits of using it. I was able to undo code when errors occurred and we were both able to work on the project at this same time, whilst knowing what the other was doing.

Time management

I feel as though I am happy with the skills I have learnt from this project and that I managed my time well enough that I could focus on the Transmedia website. I scheduled out time during my first and the being of my second week of half term to complete the pages required of me. To see the start to end process and how I planned for it, see my time management chart. contact me