Web Development

Web Development
  • Hybrid Web Application – MyQuest
    arrow_drop_down

    Module: Hybrid App Development (Module Grade: 96%)


    MyQuest Application Previews

    An interactive hybrid web application created with an aim to assist new students by providing information and advice to help guide them around the University Campus. The application was developed as a single page application using Adobe Phonegap (Cordova), it includes OpenStreetMap integration and used Google Firebase for user and data storage.


    Technologies used: Adobe Photoshop, Adobe Dreamweaver, Google Firebase, Adobe Phonegap (Cordova), OpenStreetMap, HTML5, CSS3, jQuery, JavaScript.

  • Web Application - ASP.NET MVC & API
    arrow_drop_down

    Module: Cloud and Web Services (Module Grade: 96%)


    A second-year project learning how to develop a ASP.NET MVC Web and API Applications with Entity Framework, requiring the creation of a multi-tiered web application including unit of work, repositories and dependency injection, plus connected services such Windows Communication Foundation (WCF) and application programming interface (API) consumers.


    Along side the prototype web application, documentation detailing how this might be deployed on the Microsoft Azure Cloud Computing Platform was written up. Please feel free to review the Microsoft Azure document and screen captures of the application, using the links below.


    Technologies used: ASP.NET MVC, C#, Razor, MSSQL, HTML5, CSS3, jQuery, WCF, API, XML, JSON, JavaScript, Bootstrap, Microsoft Visual Studio, Microsoft SQL Server Management Studio (MSSMS) and NetBrains ReSharper.

  • Web Application - Content Management System
    arrow_drop_down

    Module: Server-Side Development (Module Grade: 95%)


    This second-year module required the development of a web application in the form of a content management built using the Yii2 PHP and MySQL based framework. This application has specific aims to support the next iteration of LibQuest, an interactive augmented reality application, which helps introduce and guide students around the University’s Library.


    Before development could begin I was required to create a technical specifications document using eWurf or similar and database model using Vertabello, as well keep a diary throughout the project. Please feel free to review the working prototype, development diary and supporting documentation, using the links below.


    Technologies used: PHP5, MySQL HTML5, CSS3, jQuery, JSON, Ajax, Javascript, Bootstrap and Atom.

  • Web Application - Scripting Portfolio
    arrow_drop_down

    Module: Front End Development (Module Grade: 84%)


    As part of work for another second-year module, I was tasked to create a portfolio of work, which would encompass various scripting languages and frameworks, I learned about during this module. This would include core JavaScript, jQuery and their Model View Controller pattern alternatives as well the use of libraries and frameworks such as KnockoutJS, AngularJS, TypeScript and Angular CLI.


    You can view this portfolio of work via the link below.


    Technologies used: HTML5, CSS3, JavaScript, jQuery, TypeScript, KnockoutJS, JSON, Ajax, AngularJS, Angular CLI, Microsoft Visual Studio, Microsoft Visual Studio Code and Nucleophosmin (NPM).

  • Prototype Web Application – Web Accessibility
    arrow_drop_down

    Module: Web and Mobile Development (Module Grade: 88%)


    With this first-year project I learned how structure HTML5 and CSS3 in a mobile-first responsive design and incorporate WAI-ARIA roles to aid screen-reader software for users with visual disabilities. The task was to create a fictitious company and develop a working prototype web application, based on HTML5, CSS3 and jQuery with web compliancy and social media elements.


    Technical documents, wireframes and mock-ups were produced during the planning and development process. Feedback was sought from both peers and tutors to review and reflect on during key stages of the project. Please feel free to view the website, eWurf technical document and mock ups I created for this assignment, using the links below.


    Technologies used: Adobe Photoshop, Adobe Dreamweaver, eWurf, MockFlow, Microsoft Word, HTML5, CSS3, JavaScript and jQuery.

Group Projects

Group Projects
  • Web Application – NHS Break Glass
    arrow_drop_down

    Module: Technical Enterprise Solutions (Module Grade: 85%)


    Break Glass Application Previews

    A web application prototype with companion app, created for the North Tees and Hartlepool NHS Foundation Trust. The application provides an updated system for their in-house Break Glass protocol, which allows for safe-staffing on hospital wards.


    My role in this project was as the server-side and web application developer, I was responsible for creating application wireframes, prototypes and working prototype. User and shift management systems were created for the web application, providing the ability for staff to create and process requests for shift cover. A RESTful API was created to allow the companion app to communicate with the server and work along-side the web application.


    Laravel 5.7 along with authentication, API, notifications, broadcasting, queueing and task scheduling were used to create the server-side platform and web application. Laravel Echo and Pusher were used to provide real time notifications and MaterializeCSS was used for layout and user experience improvements.


    Adam Ruddock from the NHS Foundation recognised our work on this project as “one of the best they’ve seen, even compared to companies showing their work”. For more information on this project, please follow the link below to a news article on the Teesside University website.


    Technologies used: Adobe Photoshop, Microsoft Visual Studio Code, MySQL, PHP7, HTML5, CSS3, jQuery, JavaScript, Laravel 7.1, Laravel Blade, VueJS, Composer, PHP Artisan, Laravel-permission by Spatie, Laravel Collective Forms, toastr by yoeunes, Pusher, MaterializeCSS, Pencil Project, BitBucket, Git Bash, Postman, inVision App, Microsoft Word, Adobe Acrobat Pro.

  • Web Application – EPOQ / Upload Unplug
    arrow_drop_down

    Module: Web Group Project - Brief 2 (Module Grade: 77.30%)


    EPOQ / Upload Unplug Application Previews

    A prototype web application was created for the client as a follow up project as part of the same second-year group module. A performing arts troupe required an application that would work in tandem with their live show. Guests could be invited to provide feedback before and during the show and their responses would provide real-time data to staff, this would allow them to adjust the performance based on that feedback.


    My role in this project was that of the designer and front-end developer, I worked along with the back-end developer using Angular and Google. Application wireframes, user requirements documents, product artwork as well as scripting and stylesheets were created for this project.


    Technologies used: Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator, Adobe Acrobat Pro, HTML5, CSS3, JavaScript, jQuery, Angular CLI, Google Firebase, eWurf, Microsoft Word.

  • Web Application – LeasePad
    arrow_drop_down

    Module: Web Group Project - Brief 1 (Module Grade: 77.30%)


    LeasePad Application Previews

    A prototype web application created as a “bid for the contract” as part of the scenario designed for a second-year group module. We were not given a topic for the application, so came up with the idea of a communications platform for landlords and tenants.


    My role in this project was that of the designer and front-end developer, I worked along with the back-end developer using Angular and Google Firebase. Logo design, application wireframes, user requirements documents and product artwork plus scripting and stylesheets were created for this project.


    Technologies used: Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator, Adobe Acrobat Pro, HTML5, CSS3, JavaScript, jQuery, Angular CLI, Google Firebase, eWurf, Microsoft Word.

  • Web Application – Computing History Timeline
    arrow_drop_down

    Module: Web Industry Skills (Module Grade: 87%)


    As part of a first-year module, the first assignment was completed in groups with a focus on learning how to research, reference and work as a team. We were tasked with the creation of a HTML5 and CSS3 based web application, this would present our research findings looking at key dates and events which lead to the advancement of computers. In addition, we researched one future technology – Augmented Reality.


    We presented our work to peers, tutors, other students and staff where we displayed our website, posters we had created and provided a demonstration Augmented Reality which showed an animated version of our group logo which popped out from a piece of paper shown using a mobile device and a specific application. Please feel free to view the website and posters that were created for the group project, using the links below.


    Technologies used: Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator, Adobe Acrobat Pro, Aurasma, HTML, CSS, JavaScript and jQuery.

Prototyping

Prototyping
  • Application Prototypes - User Experience Design
    arrow_drop_down

    Module: Multiplatform UX Design (Module Grade: 90%)


    During this first-year module, I created application prototypes for smart watch, mobile and desktop devices. The project required the development of interactive prototypes for an identification app, including the research and planning stages, with the use of mood boards, basic and detailed wireframes, plus supporting documentation.


    The application prototypes were created using the InVision web application and I was asked to create a video about the journey throughout development process. Please feel free to view the three prototypes I created for this assignment, using the links below.


    Technologies used: Adobe Photoshop, Adobe Illustrator, Adobe Acrobat Pro, Microsoft Word and InVision App.

Data Gathering

Data Gathering
  • Research Methods
    arrow_drop_down

    Module: Multiple


    Every project starts with research, whether this be primary or secondary methods, getting the facts right enables us to make informed decisions. With primary research in the form of surveys, questionnaires and feedback forms, as well as secondary research by reviewing journal and news articles, product, technology and competitor research, as well as reading news articles and consumer reports.


    Included below is a video produced as part of an assignment for the Multiplatform UX Design module and the documentation to accompany it, these demonstrate primary and secondary researched examples. Also offered is a document which provides an example of quantitative and qualitative analysis, based on primary research completed during the planning of this portfolio.


    Technologies used: Adobe Audition, Adobe Premiere Pro, Adobe Photoshop, Adobe Acrobat Pro and Microsoft Word.

Audio & Video

Audio & Video
  • Podcast and Film Clip
    arrow_drop_down

    Module: Music, Sound and Video (Module Grade: 85%)


    During this first-year module, I learned about the history, technologies and methods for creating audio and video artefacts. I was first tasked with creating a podcast based on an iconic artist from the 1980s, who’s actions had created a defining moment for the music industry. I created the script, voice recording and included snippets from the artist’s music, you can listen to this clip below.



    The second assignment required a film clip or “mini-movie” based on Day of Triffids to be created, I was asked to remove all of the sound and replace this with my own, add a countdown timer and add titles and credits for a mock movie studio. Please feel free to watch the mini-movie that I created for this assignment below.



    Technologies used: Adobe Premiere Pro, Adobe Audition and Adobe Photoshop.

Animation

Animation
  • Adobe Air Application – Flash Game
    arrow_drop_down

    Module: Interactive Animation (Module Grade: 94%)


    During this first-year assignment I was given the task to create a game using Adobe Flash and ActionScript to be published as an Adobe Air application. Requirements specified that planning documents, mood-boards, wireframes and storyboards should be created before developing the game itself. You can watch a playthrough of the final game in the video below.



    The full documentation is viewable in the Report Writing section, however please feel free to view the individual parts included, via the links below.


    Technologies used: Adobe Photoshop, Adobe Illustrator, Adobe Flash, ActionScript 3.0, Adobe Acrobat Pro and Wacom CINTIQ Companion 2.

Oral Presentation

Oral Presentation
  • Presentational Skills
    arrow_drop_down

    Module: Multiple


    Whilst working and during my time at University, there have been various opportunities to improve my presentational skills. As part of a first-year module I was asked to do a formal presentation for tutors and peers, with a focus on upcoming trends and technologies in web development.


    The video below demonstrates my use of slideshows during presentations, the topic for this piece was Single Page Applications.



    Please feel free to view feedback review document, using the link below.


    Technologies used: Microsoft Word, Microsoft PowerPoint and Adobe Photoshop.

Report Writing

Report Writing
  • Academic Reports
    arrow_drop_down

    Module: Multiple


    Throughout my first and second year of studies, I have learned to write concise documents, following specific standards and guidelines, outlined by the University. One of the early tasks I received was to create a report template and this has been used repeatedly for different assignments.


    A first-year assignment required the create of a full report based around research, planning and development of an Adobe Air Application. Please feel free to read the included report, which was written for the assignment, using the link below.


    Technologies used: Adobe Acrobat Pro and Microsoft Word.

Referencing Skills

Referencing Skills
  • Academic Referencing
    arrow_drop_down

    Project: Multiple


    During my studies one of the fundamental skills I have had to learn is how to correctly reference my sources of information and media content. At University of Teesside, within the School of Computing, Media and the Arts (my school) the Harvard referencing style is used.


    Initially I found this to be rather difficult, though with practice and the assistance of the referencing guide, I have been able to master this. The guide I refer to is Cite Them Right (Pears and Shields, 2016). There is also an online resource, Cite Them Right Online (Macmillan Publishers Limited, 2016), which provides easier access to the same information.


    There are also various tools available to help make referencing easier, such as RefWorks (ProQuest LLC., 2016) or CiteThisForMe (Chegg Inc., 2016). You can see full examples of how I use referencing within many of the works included on my portfolio.


    Bibliography

    Chegg Inc. (2016) CiteThisForMe, the no. 1 citation tool. Available at: http://www.citethisforme.com/ (Accessed: 8 August 2016).

    Google Inc. (2016) Chrome. Available at: https://www.google.com/chrome/ (Accessed: 8 August 2016).

    Microsoft (2016) Microsoft Office. Available at: https://products.office.com/en-gb/home (Accessed: 8 August 2016).

    ProQuest LLC. (2016) RefWorks. Available at: https://www.refworks.com/refworks2 (Accessed: 8 August 2016).


    Technologies used: RefWorks, CiteThisForMe, Microsoft Word.