parlez vous code?

the language of coding

Today, September 26th 2014, is European Day of Languages, so we thought it was a good opportunity to talk about a different type of language. Here at Team Uprise we have a few multi-lingual members of staff, but the languages that I work with every day on my website design and website development projects are a bit different. Let’s talk coding!

You can probably break down the general levels of people’s understanding when it comes to code into three groups; those with none at all, those with a vague awareness of its existence, and those who are exceptionally passionate about it. I’m in a slightly less nerdy sub-section of the last group. However, the majority of people are probably in the first group! My intention is not to bamboozle you with technicalities, here at Uprise we like to keep things simple, so I wanted to give a brief introduction to a couple of languages that we use to develop the websites that we create, and possibly give you a few simple skills that you could use to practice a bit of code for yourself. We call these ‘Markup Languages’, they allow you to adapt the structure of a document that won’t change the actual content. It came from the way that paper manuscripts would have been ‘marked up’ with revisions by editors. In a digital sense these revisions are replaced by tags.

HTML

HTML or ‘HyperText Markup Language’ is one of the most popular Markup Languages worldwide. If you’ve ever had a go at making your own website or blog, chances are you’ve probably used it or at least come across it in your technical travels. Although some developers still use standard HTML, further revisions have since been released, the most recent revision being HTML5. HTML5 contains syntax (the rules that define what It can do and how it can do it) created specifically to handle graphical and multimedia content without the use of external frameworks (meaning that both the user and the developer have an easier time!). HTML5 has since been deemed best practice and has received a CR (candidate recommendation) by W3C. Without getting into too much detail, W3C is The World Wide Web Consortium. As the main international standards organization for the World Wide Web, it’s made up of organizations which work together to develop standards for the World Wide Web. Any credible developer will work to their standards whenever they are coding. Using HTML will take the content that you want on your site and put it into a specific structure on the page. Here’s an example of a basic HTML document that displays a heading, a paragraph and an image:

CSS

Now that you’ve got what you want on the page, let’s make it look pretty. CSS, or ‘Cascading Style Sheets’ is a Style Sheet Language used for formatting the display of a document written in a markup language. It’s important to differentiate between the content and the presentation, which is why they have been split into two distinct languages. HTML gives you the basic structure of the content, while CSS allows you to present it in a way that’s pleasing to the eye. The formatting or designing of the ‘front end’ of a website generally consists of layout, colours and fonts; all elements of which are achievable using either CSS or ‘inline styles’. Our above example is not at all formatted, so let’s make it look a bit more structured and pretty. Firstly, we’ll want to add our CSS styles to the top of our original html document:

Next, we’ll want to reference our elements in the form of ‘div’ tags. These are used to specifically define what is presentation rather than content:

MEDIA QUERIES

If the above was a generic document that we were going to ‘release into the wild’, we would want to make sure that all of our elements were responsive and scalable to be viewed properly on different devices. This can be achieved in a number of different ways (you can read more about responsive design in our previous article here), the recommended way of doing this, approved by W3C, is through ‘Media Queries’. Media Queries limit the scope of the stylesheet depending on the dimension given. So basically, you give it a dimension and tell it how it needs to behave when the web application is being viewed in that specific screen size. So, first off we need to tell it to change to something when the screen size is below 600 pixels, and then we need to tell it what elements to change. Let’s put one of the div elements we added earlier inside of the media query tag and change the background colour:

RECAP, FULL CODE & EXAMPLE

… and there you have it! A styled and somewhat responsive HTML template:

Hopefully you haven’t been blinded by the science of coding. There are any number of different languages that can be used in website design and website development. Ultimately though, coding is just a process of cause and effect. You code a page or document to do something within it and you get the satisfying feeling of seeing it happen. Thankfully, you don’t have to be fluent in code because there are plenty of people like me out there who can speak it for you. Written, coded and translated by Cheralyn Nadal, Web Developer.

Used to remember if a visitor has closed the cookie selection facility.

2 weeks

Name

Domain

Purpose

Expiry

__utma

.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 weeks

__utmb

.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 weeks

__utmc

.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 weeks

__utmt

.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 weeks

__utmz

.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 weeks

APISID

.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

2 years

OTZ

apis.google.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 weeks

datr

facebook.com

Identify web browser used to connect to Facebook

2 years

locale

facebook.com

Stores the display locale of the last logged in user on this browser

2 years

reg_fb_gate

facebook.com

The first Facebook page visited in that browser

2 years

reg_fb_ref

facebook.com

The first Facebook page visited in that browser

2 years

__hstc

leadforensics.com

Hubspot analytics used to provide feedback on website usage.

2 years

__lotl

leadforensics.com

Used to provide feedback on website usage, and does not store any personal information about you.

6 months

__lotr

leadforensics.com

Used to provide feedback on website usage, and does not store any personal information about you.

6 months

_ga

leadforensics.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

2 years

_hubspotuk

leadforensics.com

Hubspot analytics used to provide feedback on website usage.

10 years

_lo_u

leadforensics.com

Used to provide feedback on website usage, and does not store any personal information about you.

2 years

_lo_uid

leadforensics.com

Used to provide feedback on website usage, and does not store any personal information about you.

2 years

_lo_v

leadforensics.com

Used to provide feedback on website usage, and does not store any personal information about you.

1 year

_vwo_uuid_v2

leadforensics.com

Wingify cookie for performance monitoring

1 year

_ga

twitter.com

Google Analytics to distinguish unique users by assigning a randomly generated number as a client identifier. Included in each page request in a site and used to calculate visitor, session and campaign data for the sites analytics reports.

2.5 years

external_referer

twitter.com

Cookie tracking the immediate referrer to Twitter.

7 days

__utma

typekit.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

2 years

__utmz

typekit.com

Google analytics used to provide feedback on website usage, and does not store any personal information about you.

6 months

s_pers

typekit.com

Site Catalyst cookie for performance monitoring

1 year

Name

Domain

Purpose

Expiry

CONSENT

.google.com

Used to remember your preference for cookies on this website

20 years

HSID

.google.com

This cookie is set due to Google+ integration and sharing capabilities for the social media.

2 years

NID

.google.com

Google Map Related

6 months

SAPISID

.google.com

Google Map Related

6 months

SID

.google.com

This cookie is set due to Google+ integration and sharing capabilities for the social media.

2 years

SIDCC

.google.com

Security cookie to protect users data from unauthorised access

2 years

SSID

.google.com

This cookie is set due to Google+ integration and sharing capabilities for the social media.

6 months

__cfduid

.npmcdn.com

Used to help identify individual clients behind a shared IP address and apply security settings on a per-client basis. It does not correspond to any user ID in your web application, and does not store any personally identifiable information.

2 years

_js_reg_ext_ref

facebook.com

Used for Facecbook comments

2 years

_js_reg_fb_ref

facebook.com

Used for Facecbook comments

2 years

fr

facebook.com

Used for Facecbook comments

3 months

sb

facebook.com

Used for Facecbook comments

2 years

__zlcmid

leadforensics.com

Zopim Chat Module Integration

1 year

__zlcprivacy

leadforensics.com

Zopim Chat Module Integration

1 year

eu_cn

twitter.com

This cookie is set due to Twitter integration and sharing capabilities for the social media.

1 year

guest_id

twitter.com

This cookie is set due to Twitter integration and sharing capabilities for the social media.

2 years

personalization_id

twitter.com

This cookie is set due to Twitter integration and sharing capabilities for the social media.

2 years

syndication_guest_id

twitter.com

This cookie is set due to Twitter integration and sharing capabilities for the social media.

2 years

tfw_exp

twitter.com

This cookie is set due to Twitter integration and sharing capabilities for the social media.

6 months

_ga

uprisevsi.co.uk

This cookie is set due to Twitter integration and sharing capabilities for the social media.

2.5 years

_gat

uprisevsi.co.uk

This cookie is set due to Twitter integration and sharing capabilities for the social media.

2 days

_gid

uprisevsi.co.uk

This cookie is set due to Twitter integration and sharing capabilities for the social media.

2 days

Name

Domain

Purpose

Expiry

1P_JAR

.google.com

These cookies are used to gather website statistics, and track conversion rates.

1 month

__gads

doubleclick.com

Used for re-targeting, optimisation, reporting and attribution of online adverts.

2 years

DSID

doubleclick.com

Used for re-targeting, optimisation, reporting and attribution of online adverts.

2 weeks

IDE

doubleclick.com

Used for re-targeting, optimisation, reporting and attribution of online adverts.