jQuery Workshop – Interactive functions

Today we were introduced to jQuery, a multi-platform code library built in JavaScript. jQuery is used primarily to make the scripting of clients in HTML less complex. The first thing we were taught to do was how to make interactive buttons that changed colour on interaction from the user. The way in which I did this way felt somewhat similar to HTML, but I felt that the addition of jQuery helped produce some more visually appealing results during this test.

Screen Shot 2015-03-18 at 09.45.30

Only two folders are required: css and script

As seen below, we had to go to code.jquery.com and obtain the code ourselves and then put it all into a separate file called “jquery.js”. This JavaScript file is used to enable jQuery to work on our HTML and CSS files. The following screenshots show the step-by-step development of my test webpage. Screen Shot 2015-03-18 at 09.48.57 Screen Shot 2015-03-18 at 09.49.10 Screen Shot 2015-03-18 at 09.53.32 Screen Shot 2015-03-18 at 09.53.51 Screen Shot 2015-03-18 at 09.54.42 Screen Shot 2015-03-18 at 10.07.29 Screen Shot 2015-03-18 at 10.24.15 Screen Shot 2015-03-18 at 10.24.19 Screen Shot 2015-03-18 at 10.24.20 Screen Shot 2015-03-18 at 10.27.41 Screen Shot 2015-03-18 at 10.29.59 Screen Shot 2015-03-18 at 10.31.43 Screen Shot 2015-03-18 at 10.32.23 Screen Shot 2015-03-18 at 10.33.49 Screen Shot 2015-03-18 at 10.34.33 Screen Shot 2015-03-18 at 10.36.41 Screen Shot 2015-03-18 at 10.36.51 Screen Shot 2015-03-18 at 10.36.55

Workshop Coding Notes – Creating a Login Form

During one of our recent workshop sessions, Kyle helped our group revise the PHP code required to make a functional login form for our website. Naturally, a system for creating user accounts and signing in is of huge importance to our group project, as the website will depend on registered users to post and provide their own content. My team will also need to make admin accounts in order to sign in and manage the website.

Pictured below are examples of a blank login form (top), as well as a login form that has just been interacted with by a user. Displayed underneath this image are screenshots of the code needed to create these forms.


c dAs the above screenshots show, the following three PHP files needed modifying before the login and account registry systems on our website could be properly organised:

  • register.php
  • index.php
  • logout.php

Two of the new functions that I needed to work on were “session_destroy” and “require_once”. Learning this PHP code and how to properly use it in any online group project will prove to be very useful for not only our project but also future career prospects.

Coding Workshop – Styles in Codes

In today’s workshop session, we were given a practical exercise to work on. We were given the task of observing an html page presented on the projector and then recreating it using Brackets. One of the main objectives of this exercise was also to help us understand and master the use of styles in our css codes. As pictured below, a combination of html and css code was used to recreate the webpage we saw on the screen.

Screen Shot 2015-02-19 at 10.13.49

My finished webpage, as close to the original as possible.

Screen Shot 2015-02-19 at 09.35.54

The basic design of my webpage, alongside the css code used to create it.

Screen Shot 2015-02-19 at 09.49.58 "Screen

We were also introduced to Paletton, an online service that can be used to help web designers come up with colour schemes for their websites. This could definitely be a website that I will look into when I’ll be designing my webpages in the future. As seen in the following screenshots, the colours are determined by an adjustable colour wheel on the main page.Screen Shot 2015-02-19 at 09.36.53 Screen Shot 2015-02-19 at 09.36.56 Screen Shot 2015-02-19 at 09.37.19

Adobe Illustrator Practice – Practising 3D effects 2

During this week’s workshop, we went over Adobe Illustrator one more time before we broke off to carry on with our work in the Christmas holidays. We were trying out the same 3D effects as before, but this time we were advised to experiment with them over the holidays and post what we’ve done onto our blogs.

We were tasked to work in a separate document and try out the three different 3D effects (Revolve, Rotate and Extrude & Bevel). As seen below, I split the document into three sections, one for each effect.

Click to view in full-size

3d trials

I found that the 3D effect I enjoyed experimenting with the most was Revolve, as it was quicker, easier and more efficient when it came to making recognisable objects (e.g. the Christmas tree, water drop and wine glass).

Screen Shot 2014-12-10 at 20.05.02

This particular effect was easy to use as the software can take a single drawn line (as seen above on the right side of the glass) and convert it into a complex 3d shape.

Below are images that show my finished work during the production stage, and how I managed to create the 3D objects and text.

Screen Shot 2014-12-10 at 20.03.25 Screen Shot 2014-12-10 at 20.03.43  Screen Shot 2014-12-10 at 20.05.09 Screen Shot 2014-12-10 at 21.24.38 Screen Shot 2014-12-10 at 21.24.44 Screen Shot 2014-12-10 at 21.46.33 Screen Shot 2014-12-13 at 20.13.44 Screen Shot 2014-12-13 at 20.23.12 Screen Shot 2014-12-13 at 21.43.15 Screen Shot 2014-12-13 at 21.45.11 Screen Shot 2014-12-13 at 21.46.34 Screen Shot 2014-12-13 at 21.46.57 Screen Shot 2014-12-13 at 21.46.57 1 Screen Shot 2014-12-13 at 21.52.46 Screen Shot 2014-12-13 at 22.25.15 Screen Shot 2014-12-13 at 23.22.33 Screen Shot 2014-12-13 at 23.22.54 Screen Shot 2014-12-13 at 23.25.53 Screen Shot 2014-12-13 at 23.49.26 Screen Shot 2014-12-13 at 23.59.20 Screen Shot 2014-12-14 at 00.36.45

Development and Realisation – Understanding the basics of Adobe Illustrator

Adobe Illustrator was the second graphic design program that we used in our most recent workshop sessions. We were advised to learn the ropes of Illustrator, as well as Inkscape to decide which would be best to design our posters for the Development and Realisation assignment.

In my experience, Illustrator is more useful in creating a visually informative poster, due to the huge range of features it provides. Pictured below is a vector graphic of the world that I traced from an image from the internet; this was done fully with Illustrator, and I’m very proud of the result.

Screen Shot 2014-12-03 at 13.02.42 copy

In today’s workshop session, we were given the chance to create vector graphic images and shapes, with the help of the drawing tools that the software provided. To begin with, we made smaller pictures, as seen in the examples below:

Screen Shot 2014-12-03 at 11.33.36 Screen Shot 2014-12-03 at 11.35.46 Screen Shot 2014-12-03 at 11.43.43 Screen Shot 2014-12-03 at 12.00.11Screen Shot 2014-12-03 at 12.19.06 Screen Shot 2014-12-03 at 12.26.21 Screen Shot 2014-12-03 at 12.26.25

One major difference between Inkscape and Illustrator is that Illustrator allows you to manually change the shape and style of a letter, as if it’s a vector graphic image. This makes it easier for letters to be edited so that extra details can be manually added to or removed from them. The final result also looks better, in my opinion, and Illustrator is used a lot more by people who work in the industry.

Our next task was to trace and draw an image from the internet, using the tools and features of Illustrator. These images had to be relevant to our projects. Since my topic was “Who lives the longest?”, I decided to trace an image of the globe from the internet. This was the most fun and interesting part of the workshop, as it helped me produce something that I’m proud of.

Screen Shot 2014-12-03 at 12.29.27 Screen Shot 2014-12-03 at 12.29.31 Screen Shot 2014-12-03 at 12.31.36 Screen Shot 2014-12-03 at 12.31.58 Screen Shot 2014-12-03 at 12.35.03 Screen Shot 2014-12-03 at 12.37.08 Screen Shot 2014-12-03 at 12.41.42 Screen Shot 2014-12-03 at 12.42.17 Screen Shot 2014-12-03 at 12.46.42 Screen Shot 2014-12-03 at 12.47.08 Screen Shot 2014-12-03 at 12.47.11 Screen Shot 2014-12-03 at 12.54.10 Screen Shot 2014-12-03 at 13.01.17 Screen Shot 2014-12-03 at 13.02.42

Development and Realisation – Inkscape Practice

Inkscape is one of the two graphic design programs that we can use throughout this assignment, the other being Adobe Illustrator, which will be discussed in our next workshops. Overall, I find both these programs easy to use and learn, although I prefer Illustrator. Illustrator and Inkscape offer different features and benefits that I will find very useful in our Development and Realisation assignment.

Last week we were assigned a task to help us improve our skills with Inkscape, an example of digital drawing software. The task was to select any image from the internet and trace it using the different drawing tools that Inkscape provided. I decided to trace the following image of the tiger but, instead, replacing the black ink with different shades of red, in order to give it a more striking appearance.

Original Image

Original Image

Image source: http://becuo.com/simple-white-tiger-face-drawing

The following images show the traced head of the tiger, as well as two different versions of the final result. I used the ink tool, as well as the shape tool to go over all of the tiger’s stripes. The most difficult parts of the tiger’s head to draw was the whiskers and the hair, as they required the most precision and care to draw.

rect575s3 rect5753

The following are images showing how I applied my changes to the drawing as I was tracing it, up until the final result:

1 2 3 4 5 6 7 8 9

Workshops – Adobe Illustrator and Inkscape

During our recent workshops, we have been introduced to image manipulation software that allowed us to create vector graphic images. In particular, we have been using Adobe Illustrator and Inkscape (pictured respectively below) in order to create bitmap and PNG images that keep their image quality after being re-sized.

So far, I’ve found these programs very useful and I think they could easily help me out when I’ll be designing my poster for the Development and Realisation assignment.

Screen Shot 2014-11-24 at 19.36.00Screen Shot 2014-11-24 at 19.16.54

One of the first tasks we were set with this software was to use everything we learnt from the software and create a vector graphic image of a Kokeshi doll. A kokeshi is a (typically wooden) Japanese doll that is made with a simple style and enlarged head.

Since I had previous experience with other image manipulation software such as Photoshop and Fireworks, I found it quite easy and quick to produce a vector graphic image with the features that were available in Inkscape. Pictured below is my finished image and some screenshots showing part of the process of making it.


Click to see full-size

Screen Shot 2014-11-23 at 16.50.05Screen Shot 2014-11-23 at 19.47.02

Coding workshop – CSS and HTML

This week, we had a workshop that put all of our coding skills we learnt up till this point to the test. We were shown a webpage on the big screen in our computer lab and we were then tasked to re-create it with the use of HTML and CSS.

We used the coding software Brackets to create the code and make the final webpage. I found this session particularly useful, because it helped me revise and improve my skills. It also reminded me on how to use and implement certain features like the “margin” and “float” functions. The following pictures show the finished lookalike webpage and the HTML and CSS code (respectively) used to produce it.



Screen Shot 2014-11-17 at 16.49.55


In order to help me revise how some of the above functions worked, I needed to access websites that offered tutorials on coding. I found the following websites most useful:



For a first attempt at re-creating a webpage, I felt that it went surprisingly well, and the result is almost identical to the page we saw on the board. After doing this exercise, I certainly felt more confident about coding and the results I can produce with it.

Workshops – Adobe After Effects 2

In today’s workshop session, we looked at and discussed the features of Adobe After Effects. More specifically, we worked on creating particle effects and animations with imported graphics from Photoshop. This would be the last workshop we’re having on After Effects, as we’re moving on to other types of software and coding. Overall I’ve found After Effects very useful and fun to create animations with, especially during the kinetic typography task.

In the first part of the workshop, we all produced short animations that made use of a winter background and particle animations, similar to falling snowflakes. As we were creating these animations, we learned how to change different elements like camera angles and particle effects.

In the second part of the workshop, we produced simple drawings on Photoshop, created patterns out of them and then imported them into After Effects as image files. I wanted to use the effects available in After Effects to make a short and bizarre animation that looked similar to an optical illusion.