Web languages
In a nutshell
HTML, javascript and CSS are the languages in which the website is rendered. This is what you can see from your browser console. Let’s have a closer look at their function, and how they combine altogether.
Practice:
- CSS : ‘look and feel’ management
Go to a website of your choice. From the console of your browser, delete all CSS files calls. Once this is done, take a look at the look and feel of the page.
Should you wish to do this exercice at your own pace, go and follow the instructions of this video .
- Javascript : interactions’ management Opposite to a ‘static’ website, it allows to change what the visitor is displayed according to the interactions that have been undertaken. In other words, without JavaScript, sites would be much more boring. See for yourself : From this page, open your browser console, then go to the ‘console’ module, on which you’ll copy and paste the code bellow. What do you observe ? .
Should you wish to do this exercice at your own pace, go and follow the instructions of this video .
alert('By clicking on this button, you\'ll modify the page');
$('main').remove();
alert('Would you like to display a zen picture on this page?');
$('<div></div>').insertAfter('div#primary');
$('div#primary').next('div').addClass('demo');
$('.demo').prepend(('<img id="theDemoImg" src="https://formation.dibenn.com/wp-content/uploads/2020/12/Zen_Picture.jpeg" />'));
$('<button id="backToNormal" style="background-color:#ffa600">click here to go back to normal</button>').insertAfter('div.demo');
$('#backToNormal').click(function(){
location.reload(true);
});To go further :
- Similar to every spoken languages, programming languages like javascript are constantly evolving, to integrate new features. These evolutions are not taken into account simultaneously by all browsers. Those compatibilities -or not – with various browsers are usually reported along with the syntax explanation. See an example for a javascript syntax, and another for an html tag. This is why, as you develop a website, you might find it renders differently depending on the browser you are using. As you may have guessed, knowing the main browsers used by your audience is essential to ensure the best user experience.
- Also, each language encompasses sub-divisions. For example, javascript has several ‘libraries’, just as a spoken language has several registers : formal, slang, etc.., jQuery – in which the script (piece of code) bellow is composed – is a javascript library.
Rules and technical constraints
In a nutshell
Online activities are ever-evolving, and so do the languages and techniques in use. At some point, just as for languages, there is a need to establish standards, so that everyone knows exactly what a specific syntax means. We can compare this activity to academicians allowing a new word to be present in a dictionary, because of its widespread adoption by everyone. The Word Wide Web Consortium (aka W3C) acts as the ‘web academicians’.Practice :
Audit a web site with W3C tools:
- for html mark-up: https://validator.w3.org/
- for CSS : http://www.css-validator.org/validator.html.fr
Building a web page
In a nutshell
Key components of a web pages are : the head and the body, both defined by a tag. Informations contained in the head are mostly to the attention of ‘machines’, like search engine web crawlers, and not visible to ‘humans’, whereas what is in the body is supposed to be displayed on the screen of users.
Practice :
From your now-beloved browser console, go in the ‘elements’ module, and look at the components of this page. What happens when one deletes the <head> tag ? The <body> one ? What can you infer from this ?
Should you wish to do this exercice at your own pace, go and follow the instructions of this video .
Please bear in mind the importance of html tags for Search Engine Optimization strategy.
Mobile strategy
In a nutshell
Depending on your objective and budget, there are many different ways to offer content on a mobile device. It can be :
- on a dedicated website (m.website.com)
- on an app (available for android, iOS or both)
- on a PWA (Progressive Web App).
To go further :
Progressive Web Apps allow to :
- Develop only one version (vs one for android and one for Ios)
- Get rid of stores (and their approval)
- Benefit from web indexing
I recommend the reading of the article, that explains further the main advantages of PWA : https://www.educative.io/blog/build-modern-apps-progressive-web-apps
Content management systems
In a nutshell
One can decide to build up his own website from scratch, just by coding everything. Alternatively, there are blueprints that can help site builders save a lot of time, because they offer a structure that handles the ‘hard work’ for them, so that they just have to focus on content creation.
These blueprints are called CMS (standing for content management systems). WordPress is very famous and wildely used, as well as joomla, wix, ect…
Practice :
- Detect what CMS (if any) is being used by a website
According to you, with which CMS is formation.dibenn.com built ? One way to answer this question is to sneak around in the browser console again from this page. Look carefully at the ‘source’ module. If you can spot a ‘wp-content’ file, it means that wordpress is being used for this site. Try and see if you can find other sites using wordpress (you should, because it is said that around 30% of sites are using wordpress).
Although it works well, this method is a bit fastidious. You’ll probably want to use this site in the future https://whatcms.org/Content-Management-Systems. The principle remains the same (detection of ‘hints’ in the source code that indicate what CMS is being used), but you’ll let a machine handle the hard job for you :).
