This chapter aims to give you a few tips to complete your apprenticeship. So don't be sad, there are plenty of other things left to discover!
We'll use it most often to change CSS properties without having to reload the page. For example, you point to a picture and the background of your website changes color (you can't do this with a
:hoveras it involves two different tags. That's one limit of CSS).
It can also be used to edit the HTML source code without having to reload the page while the visitor is viewing the page.
It also allows you to display dialogue boxes on the visitor's screen...
... or change the window size.
One notable example: Google Docs, Google's office suite available on the Web (figure below).
HTML5 related technologies (Canvas, SVG, Web Sockets, etc.)
The W3C doesn't just work on the HTML and CSS languages. While these are certainly the best known, the W3C also seeks to identify other technologies supplementing HTML and CSS. There are a large number of these and they are also often confused with HTML5.
Here's a list of the new technologies introduced in parallel with HTML5 (note that some are not really "new" but they are back on the scene):
Canvas: allows you to draw in the web page, inside the HTML
<canvas>tag. You can draw shapes (triangles, circles, etc.) and also add and do things with images, apply graphic filters, etc. In the end, all this now allows us to develop real games and graphical applications directly in web pages!
SVG: allows you to create vector graphics in web pages. Unlike canvas, these graphics can be enlarged to infinity (the vector principle). The
Inkscapeprogram is known for being able to produce SVG drawings.
Drag & Drop: allows you to "drag and drop" objects into the web page, in the same way as you can drag and drop files onto your desktop. Gmail uses it to allow you to easily add attachments to an email.
File API: provides access to files stored on the visitor's computer (with their permission). In particular, you'll use it in combination with Drag & Drop.
Geolocalization: to locate the visitor and offer services related to the place where their located (e.g. scheduled times of nearby cinemas). Although the location is not always very accurate, it can identify a visitor to within a few kilometers (with their permission).
Web Storage: is used to store a lot of information on the visitor's computer. It's a more powerful alternative to the usual cookies. Information is organized on a hierarchical basis, like in a database.
Appcache: tells the browser to put into cache certain files, that it won't seek to systematically download any more. Very useful for creating web applications that can even work "offline" (disconnected).
Web Sockets: allows faster exchanges, in real time, between the visitor's browser and the server that manages the website (this is a kind of improved AJAX). It's may be the future of web applications, which will become as responsive as real programs.
WebGL: allows the introduction of 3D in web pages, using the OpenGL 3D standard (figure below). 3D scenes are directly managed by the graphics card.
Dynamic websites (PHP, JEE, ASP. NET, etc.)
What difference does it make whether the program runs on the visitor's computer or on the server?
Server languages generate the web page when the visitor arrives on your website (figure below). Each visitor can thus get a web page personalized according to their needs!
There are many "server-side" languages. Let's mention a few:
PHP: one of the most well known. This easy to use, powerful language is used in particular by Facebook. I'm also writing a PHP tutorial!
JEE (Java): this Java extension is widely used in the professional world to build dynamic, powerful and robust websites. It's a bit more complex than PHP to get started with.
ASP .NET (C#): this is the Microsoft's language and is quite similar to JEE. It's used in combination with other Microsoft technologies (Windows Server, etc.). It uses the powerful .NET framework, which is the developer's genuine Swiss Army knife, and which provides many features.
Django (Python): this is an extension of the Python language that allows you to build dynamic websites quickly and easily. It is known for generating ready to use administration interfaces.
Ruby on Rails (Ruby): an extension of the Ruby language, quite similar to Django, which allows you to build dynamic websites easily and with greater flexibility.
Ultimately, these languages allow you to make your wildest dreams come true on your website:
automated news system;
web games (strategy games, virtual animal breeding, etc.)