A Complete Beginner’s Guide To Hacking: Website Design

This post is part of the series A Complete Beginner’s Guide To Hacking

So websites are not generally made of code written in single language but instead layers of interwoven code in a few different languages. If you want to develop web applications then you need to have a basic understanding of what all those different layers are.

HTML & XHTML

The code written in HTML (HyperText Markup Language) is the most basic, essential building block of websites. You can indeed write a valid, working website in nothing but HTML if you wanted – this was what it was doing in the early days of the internet – but you are severely limiting the functionality of it by doing so. HTML is basically how to write the content of the website – the actual texts and blocks.

The HTML describes the objects within the website paragraphs, headers, tables, images etc, but it generally gives no information about what to do with them once inside – what they look like or what to do other than sit there in the page. You can give each object a unique “id”, label them with “class” names, and change other values, or attributes, by defining them inside the object tag. This allows you to easily reference an object or collection of them later by referring to their id or class.

HTML example:

< p id=”paragraph_id” class=”example test” >This is a paragraph.</p>

This format of the objects and their labels that you use HTML to describe is actually an API (learn more about them later, don’t worry) called the Document Object Model (DOM).

CSS

Cascading Style Sheets (CSS) is the language that you write the aesthetics in. So this is how you actually edit what the website looks like. You reference the objects in the HTML and then describe its aesthetic properties and define their values inside curly brackets. It is called “cascading” because the order you write the code makes a huge difference to which descriptions are used when. For example you can reference all paragraphs and describe their width.

CSS example:

p {

width: 150;

}

Javascript

Javascript (NOT to be confused with Java – that is a different language) is the language that makes your website interactive – it makes things move and react to where your cursor is for example. Javascript is a language that has got lots of add-ons or frameworks (other languages or libraries of pre-written code that has been written to expand the capabilities of an existing language) . The most popular javascript library is jQuery which is actually so common that sometimes people mistakenly that it is part of basic JS but it isn’t – you will need to download or import the jQuery code separately to use it!

Like CSS you reference an object in the HTML code and then describe what it does, or what functions it has. You can describe what it does when the page of the website loads, or what “events” to react to – for example you can tell a paragraph to change its CSS background colour when someone clicks on it.

Javascript example:

document.getElementById(“paragraph_id”).addEventListener(“click”, function(event) {

event.style.background-color = “yellow”;

}

Browsers

So a web application could be made by writing some HTML with CSS and Javascript. To translate it from the text to the code the computer can understand and run you will need to open the files in a browser – a software package than interprets and translates web application languages.

If everyone describes websites in the same format, all browsers from Internet Explorer or Firefox, in theory can understand and interpret the code into a language for the computer to work with in the same way. However, people keep inventing new code to allow new features in the different web languages and not all browsers have the updated code to recognise and interpret these new features so you will often find that when writing web code certain things will work differently or not at all in some browsers or older versions of them.

Opening a HTML file in a browser does not mean it is ‘online’ though – if the file is saved on your computer then only your computer can read the file for the browser to interpret. If you want to share your website with other computers then you need to put your files somewhere where others can find them – the internet. If you run your code on a computer or server and then connect a port on that computer to a URL (see the page on running code for more info) then whenever someone whose computer is connected to the internet goes to that URL they will be redirected to the port on your computer and find your web code file and their browser can read and interpret it accordingly.

The internet is the name for the huge international network of computers and the connections between their different ports that is public – anyone with the physical connection to the channels that the information is transmitted along can exchange information with addresses. An intranet is a private network of computers with connected ports – you can only connect to these if you have permission, so even if you can physically send information to the port address it will be assessed by a piece of security code which will decide if it has permission to go through the computer port. The physical connection can be a solid cable one, like ethernet cable, or a wireless transmission of the information like WiFi.

HTML lets you add files written in certain other formats in its page such as images, fonts, and sound. It is often helpful to understand how these other files are coded when using them in your website.

Images

There are two main ways to define an image in code so a computer can interpret them – raster and vector images.

Vector images store the image by defining in the code the geometry or the maths of the shapes – for example by describing a triangle with certain proportions and its proportional distance from a circle. Describing an image this way means that whatever size you view the image the maths can be recalculated and the shape will always be the same. However it also means the code can get very large and complicated to interpret for complicated shapes.

Raster images on the other hand define images in code by listing it pixel by pixel. This means of course that the more pixels in the picture, or the larger the picture is, the bigger the code file is. Additionally, when the picture is scaled up then there is no information about what the extra pixels should look like and different image codes or file types can “guess” the missing pixels in different ways, often just repeating blocks of the neighbouring existing pixels – this is what is meant by pictures “pixelating” and often creates large blocky chunks of identical colour.

In order to take up less memory raster image files are often compressed – that is code tries to see the patterns in the pixels and store those instead of listing every pixel individually, or it adjusts the format that the pixels are listed in so that it takes up less space on the computers memory or gives it less code to interpret. Raster compression can be “lossless” or “lossy” depending on whether or not it preserves all the pixel information from the original when reducing the file size or whether it loses some of this information, often exchanging for patterns instead.

For example a JPEG image is a lossy raster image file and so loses information if it is made smaller – it will then pixelate if stretched back to its original size.

Whereas a GIF image is a lossless raster image file and so only pixelates if made larger than its original size.

An SVG image is a vector image file and so does not pixelate as each pixel is calculated precisely from the mathematics for each scale.

If you want to store multiple different file types into one image you can use a metafile or compound image file like a PDF for example. The code to store these varies hugely from type to type and are often larger and more complex to work with than simple image files.

Animations

There are two main types of animations, or moving images, and they are time-based or frame-based.

Frame based animations are defined by what image is present frame by frame and are generally the most common format of animation as this is the format that most animations are recorded in. The more frames there are then generally the smoother the animation but also the larger the file size and more processing done to interpret the code.

Shockwave Flash (SWF), Windows Media Video (WMV), MOV, MP4 are all types of frame based animations. Because frame based animation files are generally very large they often slow web pages down and are generally used minimally in their full format in web design. The files can be compressed like images to be delivered more efficiently to the clients using video codecs like H.264, HEVC, VP8 or VP9 – because the files are large they are often delivered in parts or in a stream and loaded into the web page through “streaming” rather than waiting for all the code to arrive before using in the website. There are different methods of streaming and interacting with the streams and it can be a complex process.

Like vector images are defined in terms of the mathematics of their shapes, so time based animations are defined in terms of the rules or mathematics of what should be where in the image when.

The GIF file format of code can be used to store animations and compress them in a similar way to single frame images and so is popular for displaying short animations or repeating ones as it takes up relatively little memory or processing power. It can be defined in terms of adjusting (often replacing) specific sections of pixels at certain time frames. Not all older browser versions can interpret GIF animation files in a web file and they will only show the raster image of the first frame.

Time based animations can also be coded within web languages using three popular web language based methods – Synchronized Multimedia Integration Language (SMIL), CSS, and Javascript (JS).

SMIL works by defining an animation within an SVG file, and with the paths and shapes to change defined in a similar way to the shapes themselves. This also means that like a GIF animation, the animation is defined within the image file itself. However, browser support for SMIL is more limited so less browsers understand how to interpret the code.

CSS animations work by defining the animation of an object in a similar way to defining any other feature of it in CSS. You add to the feature’s CSS an animation attribute and which animation to run and it’s duration. You will however then have to define the properties of that animation itself elsewhere in the CSS code – what values the attribute is changing from and to for example. CSS animations are getting increasing browser support.

JS animations work by generally using animation libraries like Paper.JS, Raphael.JS, or Fabric.JS to allow to write in JS code what the animation should do. Very popular with very wide browser support. However, like CSS animations means the animation is within the website code and so needs to be run within a browser with the image files to animate.

Text

Text should be the easiest file type to encode but of course nothing is ever simple. There are several stages to the way text is processed by a web application. If typing text into a website, in a form for example, firstly the computer sensors have to interpret the input they are given into the characters in the text that you want, then it has to encode this information in low level code or binary, which it then sends to the browser, which sends it then to your web application, which then does whatever you have told it to do with those characters. For text written into the website design your code has to tell the browser what characters to display which then tells the client computer what to display.

If you are always using the same standard keyboard as the settings on your computer and preferably in a standard latin alphabet such as in English then generally you won’t have to worry too much about text objects. However, if you deviate from this then certain things need to be considered.

Firstly, the conversion from sensors to characters is often known as the input method, and code to alter these interpretations are known as Input Method Editors (IMEs). If for example you wanted to type in Mandarin Chinese on a standard latin keyboard then you would not want your typing to be interpreted as the latin alphabet characters but rather certain combinations of them to produce the different Chinese characters, of which there are too many to make separate keys for. The most common format for Chinese IMEs is known as Pinyin, but it is not a standard – different people will use different IMEs for the same language. Often, but not always, this is set in the OS of the computer but generally can be changed around in the browser if IME code is used in the web application if you need to.

Secondly, the conversion and transmission in binary is generally standardised – the standard formats most commonly used now are those in Unicode, the most common of which is UTF-8. So most of the time the client computer and your application server will interpret the binary to mean the same characters. However, the standard is recent enough that there are still loads of situations where this can get changed around and the characters misinterpreted. Generally you can explicitly define in your code what “character set” you are using and so inform computers to interpret in UTF-8, even if that is not their default.

Thirdly, even if both computers understand what character the code is referring to then it still might not know what image to load to represent it graphically – this is of course decided by the font. Font packages are collections of image files, generally vectors, that correspond to different characters, and different fonts can represent different collections of characters. Therefore not all characters might be covered by the font you are using or not all browsers will be able to load the images of the fonts or match them to the correct characters if they use different character sets. Therefore it is often good practice to check the availability and support for any fonts you use.

Audio

 

 

Responsiveness and Accessibility

Responsiveness and accessibility are not objects or files but good practices you should use in web design.

Accessibility means making sure that as many people as possible can view your website as intended both in terms of technically being able to open and interpret the files, or close substitutions, but also making sure it is accessible in more general terms. Don’t use incomprehensible tiny awful fonts with colour combinations that making it impossible to distinguish the text.

Responsiveness is part of designing for this – websites can be opened in all manner of size and shaped devices and you need to account for how the website will behave with these changes. Will the images stretch and distort or move around each other? Will the font take up half the screen and make an annoying scroll bar? Will the Javascript still respond to touchscreen inputs like mouse inputs? Never assume things will work out because designing to respond to these changes is one of the hardest parts of modern web design – it will nearly always break horribly if you leave it to luck to work on a mobile screen.

NEXT: Data Design