Frontend Development of Cardiofilo
3.1 Front-End development tools
To create web pages, a Front-End developer essentially uses three programming lan-guages:
• HTML: to create the structure and content.
In computer science, HyperText Markup Language (HTML) is a markup language.
It was born for the formatting and pagination of hypertext documents available on the web and is a public domain language, whose syntax is established by the World Wide Web Consortium (W3C). It derives from SGML, a metalanguage aimed at defining languages that can be used for drafting documents intended for transmis-sion in electronic format.
An HTML element in a document is distinguished from the rest of the text by "tags", which consists of the element name surrounded by "<" and ">". The name of an element within a tag is case insensitive.
HTML uses "markup" to annotate text, images, and other content for display in a web browser. HTML markup includes special "elements" such as <head>,
<title>, <body>, <header>, <section>, <p>, <div>, and many more.[7]
Example for creating a simple web page in HTML:
Code written with a text editor (the file has an HTML extension ’.html’):
<!doctype html>
<html lang="it">
<head><title>Cardiofilo Web App</title></head>
<body>
<h1>Cardiofilo Web App</h1>
<img src=’logo.svg’>
<p>This is the first HTML page!</p>
</body>
</html>
Clicking from the file manager on a file with an HTML extension will automatically open the system default browser,which shows a screen similar to that in Figure 3.1:
Figure 3.1: Example of a simple HTML page
From this HTML file it is possible to extrapolate a classic example of a DOM (Doc-ument Object Model) tree, generated by the interpretation of the file by the web browser(see Figure 3.2).
The DOM, as the word itself says (Document Object Model) is a model, or a way of representing a document or an interface, or rather an API (Application Program-ming Interface) designed by the W3C (World Wide Web Consortium) consortium, which allows you to access the elements of a page.
It should be noted that in this example also the so-called blank characters (spaces, tabs, etc.) are considered elements of the tree, although these are not displayed by the browser.
Figure 3.2: Example of DOM tree generated by the web browser in the interpretation of the HTML file
• CSS: to equip the page with colors, style, fonts and background images.
CSS (abbreviation of Cascading Style Sheets), in computer science, is a language used to define the formatting of HTML and XML documents. The introduction of CSS has become necessary to separate the contents of HTML pages from their layout or style. [8]
Example for creating a simple web page in HTML with CSS style:
Code written with a text editor (the file has an HTML extension ’.html’):
<!doctype html>
<html lang="it">
<head><title>Cardiofilo Web App</title>
<style type="text/css">
body
color: #48ccbf;
background-color: #ffffff ; text-align: center;
font-family: Arial, Helvetica, sans-serif
</style>
</head>
<body>
<h1>Cardiofilo Web App</h1>
<img src=’logo.svg’>
<p>This is the first HTML page!</p>
</body>
</html>
Clicking on a file with an HTML extension will automatically open the system de-fault browser shows a screen similar to that in Figure 3.3:
Figure 3.3: Example of a simple HTML page with CSS style
• JAVASCRIPT: to give the page greater dynamism and interaction possibilities.
JavaScript was first standardized in 1997 by ECMA under the name ECMAScript.
The latest standard, as of June 2017, is ECMA-262 Edition.
In computing, JavaScript is an object and event-oriented programming language, commonly used in client-side Web programming for the creation, in websites and web applications, of interactive dynamic effects through invoked script functions by events triggered in turn in various ways by the user on the web page in use (mouse, keyboard, page load). These script functions, therefore used in the presentation logic, can be suitably inserted in HTML files or in special separate files with the
”.js” extension.
The files however may have both ’.js’ and ’.jsx’ extension, the difference between the two is the transpiler / bundler, which may not be configured to work with JSX files, but with JS! So very often you are forced to use JS files instead of JSX. In particular, it is already possible to anticipate that for the React framework it makes no difference to choose between JSX or JS. They are completely interchangeable.
In some cases, users / developers might also choose JSX over JS, due to code high-lighting, but most newer editors also correctly display reaction syntax in JS files.
JavaScript is a simple programming language, particularly suitable for use by the browsers.
Complications arise when using an interface for the site, namely the DOM (Docu-ment Object Model) which relies on the frameworks and JavaScript libraries, aimed at facilitating the task of the developers. JavaScript libraries are reusable codes.
Specific properties and functions are designed for the website. The most famous JavaScript libraries are jQuery, React, Zepto etc. [9]
Example for creating a simple web page in HTML with CSS style and Javascript sintax:
In this example, the page contains a text type input field (which is generally used by the user to write data).
To know the length of the text contained in the input form, the object model and the properties used by JavaScript are used.
Code written with a text editor (the file has an HTML extension ’.html’):
<!doctype html>
<html lang="it">
<head><title>Cardiofilo Web App</title>
<style type="text/css">
body
color: #48ccbf;
background-color: #ffffff ; text-align: center;
font-family: Arial, Helvetica, sans-serif
</style>
</head>
<h1>Cardiofilo Web App</h1>
<img src=’logo.svg’>
<p>This is the first HTML page!</p>
<body onLoad="alert(document.Form.test.value.length)">
<form name="Form">
<input type="text" name="test" value="Cardiofilo">
</form>
</body>
</html>
Clicking on a file with an HTML extension will automatically open the system de-fault browser and show a screen similar to in that figures 3.4-3.5:
Figure 3.5: Example of a simple HTML page with CSS style and Javascript syntax