Web Development: Building a Job website

I was tasked with creating the back-end for a typical job recruitment website, that caters to the needs of both recruiters & job seekers. Since I didn’t have to create the front end designs, I kept the UI work minimal, only building simple frameworks for tables.

Planning

I started by planning out how my website would work, by creating multiple design documents such as flowcharts of system operations, Use-case & Entity-Relationship diagrams. I looked carefully at how different types of users would expect the platform to behave and how to best cater to that, whilst maximising efficiency and security. I also considered the operation of the system, in terms of not allowing users who are not logged in to post applications .etc

Building & Operation (in brief) 

I created my job recruitment website using a mix of PHP, MySQL, Javascript, HTML & CSS. Below is a brief look at some of the functionalities of the website:

Firstly, users can create a login with a name, email and password. This is checked against the database, and if an account doesn’t already exist, it is then stored within the database.

Then users can login, opening a session that will last either until the browser is closed or the logout button is pressed. When a session is started, a user can upload a job listing or application (provided there are jobs already posted) and this will be linked to their account using the current session data. Sessions also work when it comes to applying for a job – once a user has selected a job from the job search, the primary key of that job is temporarily stored, meaning that the application is automatically linked to that listing for ease of viewing by a recruiter.

 

Files such as CV uploads are typically too large to be stored in a database – instead, I programmed it so that the location of the file is saved in the SQL database, allowing a recruiter to simply hit a download button to view it later.

Some information, such as which users posted which jobs or applications, is cross-referenced between tables. In these cases, primary keys are also used (for example to link applications to the appropriate job listings).

Security

When it comes to website security, there is a lot more to consider than just passwords. When building a website of this nature, there is often extra risks, such as stored user information & file uploads.

I used PDO (Php Data Objects) instead of MySQLi, as it uses prepared statements; making it more secure against SQL injection attacks. Unlike mySQLi, which only works on SQL databases, PDO works on many, meaning that switching to another database later on requires minimal effort.

File uploads, in this case CV uploads, create potential for attacks. This can be combated by conducting multiple checks before a file is allowed to be uploaded to the server. This includes file size limits & checking for file types. Since this is still not perfectly secure, extra steps can be taken, such as renaming a file and using a new extension — ensuring that uploaded files are non-executable.

All user data is stored hashed, so in the event of a data breach, user information is kept safe and secure. A separate username & password is used for database operations only (as opposed to full root access), which is hidden from viewing by site visitors.

 

Advertisements

Developing for Android: Sol.AR

Solar winds are storms of charged particles, ejected by our sun, that travel across the solar system and bombard the earth. The energy contained in these storms can cause significant interference to electronic communication systems, as well as being one of the causes of the Northern Lights.

I created a simple app for android devices to view information about this solar wind data in real time. The app features a clean minimal design with basic menu animations and functions, and scales according to screen size.

Screenshot_2017-10-25-20-15-48 Screenshot_2017-10-25-20-15-32 Screenshot_2017-10-25-20-39-43.png

I used regex to split up data from the input (json) file, and sort it into multidimensional arrays to be translated into graph plots. I made sure all data was checked when it was sorted, so that ‘bad data’ was left out without leaving gaps in the graph.

received_10213441190974523.png

Using regex to sort data

There are individual graphs for Proton Density, Bulk Speed & Ion Temperature data. The different types of data can be viewed by clicking the buttons below the graph.

Digital Cities: The future of urban life

In the modern age, everything is becoming smart. From phones, televisions and even home appliances. But the ‘Smart movement’ is also taking place on a much bigger scale; whole cities are becoming smart.

But what is a smart city? Whilst there is no complete definition as to what a smart city is, they are based around using technology to create solutions to modern life problems. For example, Barcelona has introduced ‘smart traffic lights‘ that provide “Green light corridors” to emergency service vehicles, as well as introducing new bus services that use technology to ‘ensure the system is managed effectively’.

I created this short video to give a basic explanation of smart cities and their aims:

Creating my Digital City Visualizations

Because of the lack of local data available, I had to use mock data & data from other cities to test my app – In this case Bristol.

I made 2 visualizations using PHP – one takes percentages of residents happy with their local green areas and represents it with the number of living and dead flowers in a field, the other takes the number of shopping trolleys found in rivers and represents that as dead fish in a river.

Building the Automated Home

received_10212720818685666

Raspberry Pi checking weather

Next I made a miniature model of a house fitted with a Raspberry pi & Arduino. The Arduino was wired up to a selection of sensors and servo motors, with a small screen on top. I programmed the Raspberry Pi to read in live online data, such as weather, sunset, and temperature. If the weather was bad, the servo motors would spin and the windows would shut, and if the weather was dry and sufficiently warm, the windows would open.

The Raspberry Pi was connected to a Unicorn Hat, which I setup to scroll text across according to the weather data, for example, if it was rainy, it would scroll the word “Rain” in blue.

received_10212729703547782.jpeg

Rain Sensor allowing for viewer interaction

 

The house was also wired up with sensors that would override the online data inputs, such as in the case of unexpected rain showers. This also allowed for viewer interaction during exhibition.


Related Links

News Report: Bristol UK’s leading Digital City outside London

Bristol Open Data

Urban API: Uni Voice

Uni voice is an interactive feedback system built for Plymouth University. Its aim is to make it easier for student’s voices to be heard in a fresh and exciting manner, by creating a connection between the virtual and physical world.

It is built using Unity and Vuforia to create an augmented reality app. It uses the QR codes as an AR target. Live Twitter data is given a sentiment score using Node-Red and used to dynamically change the size of buildings on the map.

Our Inspirations were:

Peronio: an AR pop-up book built with Unity and Vuforia; much like our own project.Read More…

Monsters Multiplayer AR board game – uses Vuforia smart terrian to build a game board that includes physical objects as part of the game board. Read More…

Central Park – Listen To The Light: an interactive location-aware album that changes based on where you walk. Read More

Design Process

Planning and low-fidelity prototypes

IMG_20160322_125819

First map that uses images with Vuforia to play sounds.

To start with, we used images that Vuforia would recognise and use to replay sounds. We later replaced these with QR codes.

3d map

concept of map with building sizes influenced by Twitter data.

 

Final Designs/High-fidelity prototypes

QRcodesmap.jpg

QR codes on the map.

 

AR still.png

Concept of 3D building on the physical map.

Using Blender camera tracking, I was able to quickly create a concept of how the 3D AR buildings would look on the physical map.

tablet2.PNG

Uni Voice in action

 

tablet.jpg

Jack demonstrating the AR app in action.

uni voice logo black

I created the logo in Illustrator as an identity for our project.

Future Improvements

  • Potential for further expansion such as having more ‘points’ on the map.
  • live Twitter updates with Text-To-Speech technology (which we simulated with pre-recorded Text-to-speech software).
  • Switch out QR codes for alternatives, possibly using NFC tags under the map or the numbers on the map.

Evaluation & Feedback

We used an online feedback system to both gather first-hand research on students views of how the University handles feedback, and another on feedback from our project to help us measure our influence and impact on the university.

See it here: University Voice Survey


 

Resources

Unity • Vuforia • CrazyBump • Node-Red • Stellarsurvey

 

Music from the Mundane: Field Sound Recording

Field sound recording is the art of taking recordings of everday noise – Cars, People, and Trains to name a few – and using it to create music.

Inspirations

Marc De Pape – ‘Chime – Scoring the City’

Chime is a wind-chime inspired instrument that captures motion data from various points around the city.

“The Chime is a collection of 18 sensors measuring 27 parameters assembled to poetically translate the impulses and flows of the everyday city into sound. “

Listen/Read more | Video

Yuri Suzuki – ‘Sound Taxi’

Sound taxi features a black London cab decked out with 67 speakers and one measurement microphone. As it drives around, it picks up sounds using the microphone on the roof, then uses software to analyse the frequencies and convert it to music

Listen | Read more

Giorgio Sancristoforo – Project AudioScan

006lorenza daverio pg

“Audioscan embodies the confluence of three stages of modern music technology: tape recording, electronic synthesis and processing, and personal-computer-based digital audio. It starts with recordings of street sounds, turns those into electronic instruments processed by electronic effects, and then creates the final composition in a digital audio workstation.”

Read More

My Sound Recording

My recording features sounds of Plymouth: Featuring shoppers in drake circus, train announcements, devonport siren, cars and buses, buskers, seagulls and of course the ocean. I recorded these on my camera and used Audacity to put it all together.

My idea was to recreate and reflect the city atmosphere in sound format.

 


 

Resources:

Chime by Marc de Pape

Yuri Suzuki sound taxi:Article | Artist Website

Giorgio Sancristoforo – Audioscan

The Art of the Journey: GPS Drawing

GPS drawing is a combination of art, technology and travel. The aim is to draw using a GPS co ordinates – such as using tracking app on a mobile phone – turning travelling into an art form.

My Drawing

I wanted my drawing to reflect the local area; so as Plymouth is known as the “ocean city” i decided to try and create a simple boat on campus.

BoatGPSdrawing

My  boat drawn on campus by using GPS co ordinates. Mapped using Single points during the walk and later connected with straight lines in GPS visualizer.

Some of the difficulties with GPS drawings are obstacles such as buildings and walls that could potentially block paths you are trying to create; and if you are using a mobile phone app, they tend to drain battery quite quickly!


 

Inspirations

World’s biggest if – Hugh Pryor

if_biiiiiig2

 

‘If’ features 70 mile tall letters spanning London, Oxford and the surrounding areas. It is created only by travelling through places with names that begin with ‘if’, such as ifield road and ifold, as seen above.

World’s biggest if

Hugh Pryor – ‘The Wallingford Fish’

wallingford-fish2

The Wallingford Fish, created by Hugh Pryor, is regarded as one of the first GPS drawings. It covers 13  miles, is 67 miles long, and made using felt tip pens and a map!

Wallingford fish

My Ghost

my-ghost

 

A complex example; ‘My Ghost’, uses GPS data collected from all his daily travels to create a ‘Personal Cartography’ map of London. It reflects the daily travels that we take, but often do not realise how much we cover.

My Ghost

 

Plymouth Whale

gps-drawing

Read More

A Road less Travelled: Psychogeography

“The science of anthropogeography, or more properly speaking, psychogeography, deals with the influence of geographical environment on the human mind.”

– J. Walter Fewkes, Bureau of American Ethnology, (1905)

Psychogeography is based around identifying the ambiance and general feelings associated with a place. The aim is to divide city zones into ‘distinct psychic atmospheres’; Creating an illustration of a city not based upon topography, but instead based around the feelings created in certain areas, and how they link together.

Our inspiration today is based around the work of Guy Debord, an example of which is below. The arrows represent unity; a connection between areas based on psychological aspects; these are known as ‘Slopes’. The size of the arrow corresponds to the strength or length of a slope.

debord-guide1

Guy Debord’s Psychogeographical guide to Paris

Our work was also inspired by Mark Shepherd’s ‘Serendipitor’; an app that leads you from point A to point B using roads not yet walked (Similar: Drift), as well as Susan Philipsz’ installation ‘Surround Me’, which uses sound as a medium to reflect the atmosphere of areas of London.


My Psychogeography Journey

To start our journey, we placed a cup on a map to mark out a general area for exploration. This is not a limitation; it is merely a guideline for our path.

Our journey starts on the outskirts of the university, near Drake’s reservoir, a place where work and rest collides. There is a sense of calm; a juxtaposition between the busy streets and the university campus.

drake resevoir

The train station and surrounding main roads have an overall sense of restlessness; it is an area of transportation that never sleeps.

station

In stark contrast to the city centre, these cramped flats almost give a sense of suffocation. The atmosphere is quiet, almost depressing in nature.

flats

An area of transition; watched over by CCTV. An Archway leading you away from residential to commercial, a gradual transition dusted with grassy banks.

residential.png

As the residential area melds back into the commercial area of the city, the mood changes. The silence is broken by the sounds of cars overhead and the soft strumming of a guitar as the quiet of the residential areas give way to the commercial and work areas. This is a place of transition.

UnderpassB.png

Another transition; this time from the city centre near the hoe toward a quieter area. Although the churches may represent a sense of community to some, the dark cobbled alleyways may represent a feeling of nothingness, possibly even unease in others.

to churches.jpg

Lastly, we return to the University’s Roland Levinsky building; a modern, angular building with a strong presence. The shape of the stairway and surrounding walls naturally leads you toward the entrance, not dissimilar to a funnel. Although fitting with the architecture of the nearby shopping centre; the feeling is overall different.

RLBb.png

This is a rough map of our actual journey, and a psychogeographical map based on our own experiences.

psychogeography routepsychogeography plymouth map


 

Sources:

 

 

 

3D Modelling for the Immersive Vision Theatre

We were tasked with creating a 10 second animation in Blender for the Immersive Vision Theatre. We had roughly 2 weeks to create it, so we had to keep it simple yet still demonstrate our knowledge of Blender and 3D modelling.

We all decided to create a different game each. Meg (View her website Here!) created Space Chess, Jack made Space invaders, Rachel made Pac-Man, Harry made Tetris, James made Monopoly, and I made first-person Sonic, as I felt this would work well in the IVT.

I decided to go for a low-poly aesthetic as we had limited time, so I needed to keep it simple whilst still making it look good. Having previous experience of Blender, I was able to easily create assets for my animation such as springs, rocks and spikes.

wip

Work in progress

To render for the dome,we had to use Blender’s fish eye camera. We also had to take into account the angle of the screen, which means we have to angle the camera roughly 25º down.

sonic test0205.png

One of the frames from my animation, rendered in Fisheye.

Because the Dome is truncated, we had to edit it to fit in After Effects to crop 20% off the top. We also took this as an opportunity to add transitions and audio to make our work flow better.


My part of the animation, ready to be put together with the rest in After Effects ready for our presentation.

Combining Art & Technology: The Painting Robot

Our Latest project, dubbed ‘Pip3tt3’, involved creating a robot that takes virtual data and represents it in the physical world, using a Raspberry Pi and/or Arduino

In this instance, three of us came together to create three different methods – and a different colour for each; Blue for tweets to #pipblue on Twitter (Meg’s part), Green for social media notification noises (Jack’s part), and purple for live webpage hits (My part).

IMG_20160225_181250

My part of the ‘robot’ used live web hits on my server web page to tell the robot to paint. To do this, I used a Raspberry Pi with Apache and PHP installed. I used a backwards SSH tunnel from my server that activated when a script was run on my Pi.

IMG_20160224_191344

The first prototype using a relay switch and small solenoid – which turned out to be too small!

To get the messages from point A to point B I used Beanstalk – which has the capabilities to take on multiple ‘jobs’, so it could deliver messages to multiple different Arduinos, however, in this case, it only needs to tell one to switch on!

pi gotjob

Using Beanstalk to send jobs via the Raspberry Pi.

The Arduino part, however, uses the same code as the other 3 parts of the robot. It takes an input, in this case ‘on’, which tells it to use the attached solenoid to release some paint.

IMG_20160225_180834

The wiring of the robot is actually quite simple – as seen above – it uses one 9v battery, a relay switch, and a 12v 1kg force solenoid (smaller ones were too weak to squeeze the pipette!). It is housed neatly inside a wooden box with a 3D printed holder for the pipettes.

 

pi cam

The Pi Camera, which we used to record the painting process.

IMG_20160226_115548

First Tester painting created by the robot

IMG_20160226_181224

Final painting created by the robot during presentation