This is an overview of the technical stuff behind Amy's website. I'll try and keep it as basic as possible but might throw in some slightly more advanced details for any developers out there.

First and foremost I'll go over a few basic design elements that allow the webpage to scale correctly on all screen sizes.

You may have noticed that the website looks slightly different on mobile devices compared to on a computer / laptop screen, or even in comparison to a tablet such as an iPad.

This is because I have used a specific sizing method that scales to each screen, as well as something called Bootstrap which is the most popular design framework for HTML, CSS and Javascript. The methods of sizing that I have used to accomplish this are called "em" and "vw" which are units of measurement used with the CSS design language, as an alternative to "px" which refers to "pixels".

"em" refers to the default element size and doesn't actually stand for anything. Usually 1em refers to the size in "pts" (points, the same as "font size" in something like Microsoft Word where the usual default is 12pts) of the capital M in the given font. If you are using size 12pts text in Microsoft Word, then the capital M should be 12pts wide. In this case, 1em would be 12pts. This scales on the default movile device text, which means it looks just as readable on a mobile device than it does on a computer screen.

"vw" refers to the "viewport" whereby 1vw is 1% of the viewport (the size of the area used to hold the webpage). This is excellent for sizing images but not particularly useful when it comes to sizing text. As you can imagine, 1% of a mobile screen is very very small whereas 1% of a large computer screen isn't that small. Due to this measurement working the way it does, however, it means you can size an image to 50% of the screen size regardless of what screen type it is on. You can simply tell something to be "50%" in size, however the percentage is often in comparison to another element on the webpage, and not 50% of the "viewport".




Next, I'll explain how I made everything happen on 1 page, without needing to load new ones.

First though, why did I do this? It's fairly simple really. Whilst it's harder to create a website that has everything on 1 page, it's better for mobile users. As long as the webpage doesn't have ridiculous amounts of information or pictures trying to load at the same time, that is.

Now to the how. In website development there's a language called Javascript. As a sort of "sub-language" to this, there is something called jQuery which is, basically, a Javscript script that makes many design goals a lot easier.

I have used jQuery a bit on this webpage, and what it allows me to do is update elements on the page, live in your hands, without having to redirect you to a new page. An example of this is when you select a section of images to view and it updates the 10 images below, or when you pick a page and it presents you with more images. Another thing that has used jQuery is when you click on a section and it scrolls you down to the images. Without Javascript this is not possible in the same way. The feedback form is also taking advantage of jQuery / Javascript in order to pop up on the screen, confirm that you're not a robot with Google (also prevents people from spamming a submission form over and over again) and process the data you enter, save it and e-mail it to me so that I can see it.




Now, enough about design and on to my favourite part of developing a website.

There is a lot of stuff happening behind the scenes on this website, that the user cannot see. The code for this is written in PHP. With HTML, CSS and Javascript / jQuery, you can right click on the page and click on "View Source" or "Inspect" in order to view all of the code. With PHP however, nobody can see the code unless I decide to share it somewhere (which I might do at some point when the website is totally finalised) thus making it "Open Source".

One of the things on this website that I'm rather proud of, and that took a long time (and a fair amount of frustration) to get working properly, is the Thumbnail generation. What you don't know about the website is that when you view the thumbnails (the small images in the gallery that you click on to open the full-sized version), they are not simply put on the page as a small image, as the section ones above are. I'll explain.

These images refer to a URL that looks something like this:
http://starfps.com/index.php?page=thumbnail&image=gallery/1484486608.jpg&minimum=300

This sends the following information to the server, which is then dealt with by my PHP code:
page = thumbnail, image = gallery/1484486606.jpg, and minimum = 300.

My PHP code takes this information and does the following:



The final thing that took a while to code (not too long though) was the feedback form, which is quite simple, but it's also a mixture of jQuery and PHP so I'll explain that too.

When you open the submission form, it presents you with 3 fields. Name, Feedback and Email. It also has a reCaptcha element and a submit button at the bottom.

When you click the "I am not a Robot" reCaptcha element, Google's code is at work in order to check that you are a human clicking the button, and then it returns a result which is saved by jQuery at this point.

When you click Submit, jQuery "serializes" the form in to a Javascript array, which is then saved, as the jQuery code sends the response from Google's reCaptcha to my PHP code. The PHP code creates a request and sends it, from the server, to Google in order to verify that the user is in fact a human and not a bot.

If my PHP code returns a success message, the form data is also submitted to my PHP code on the server.

This PHP code will check that reCaptcha did in fact approve of you (to avoid people from modifying the jQuery code and bypassing it) and send your data to a database, so I can view it at a later date if I need to. This also allows me to display Feedback on a webpage from the Database, which in the future might be a thing (with your permission of course) .

My code also sends me an email after everything is successful, so I can see that some feedback has been submitted and what said feedback is.

Finally, it shows you a success / failure message, and if successful, just for fun, it changes your text box to green. This is a more affirmative confirmation.




How the PHP code actually works. (More advanced "lingo")



To recap: Browser -> Servlet -> Facade -> Model -> Facade -> Servlet -> Browser.




I will be adding to this, as I add to the website, so check back if you want to see more!