Tehnologii Web/2022-2023/Laborator 1

Introduction

In this laboratory, we propose to explore the concept of Dynamic Web Page.

Web browsing started in the beginning with static hypertext based on HTML/XHTML. For a certain request, we would have expected to receive the same answer. However, the dynamic web concept allows us to deliver personalized content to users, whether it's text, media content, or interactive content.

The dynamism of web applications is driven either by the server-side dynamic web page or by the client-side dynamic web page. During the labs, we will address both options.

Regarding the user experience, when we talk about web applications, we want to offer an identical experience compared to applications running in a native operating system.

In the beginning, the navigation presented static content, and later we adopted the dynamic model. But this evolution took place with ups and downs. Before we discuss the static or dynamic web, we distinguish the open web or the closed web. With the introduction of the HTTP protocol - we ask ourselves the question: how will browsers interpret the content?

There are rules established by a consortium called W3C and they represent a standard, regularly updated.

However, by the time, several dynamic web implementations have appeared, with their own rules, and in some cases, with additional software at the operating system level, running natively (example: ActiveX, Silverlight, Adobe Flash).

From the point of view of functionalities, closed systems brought more possibilities at the beginning (for example native APIs, working with files, advanced graphics libraries, etc.).

But the introduction of these functionalities also comes with a risk, namely that of application security.

So, the problem is actually put in the following way: how to have a web standard open to everyone, which integrates functionalities at the same level as the operating system, in a safe way?

Things have evolved again in a positive trend after the global adaptation of HTML5. When we talk about HTML5, we mean HTML (markup language), Javascript (programming / scripting language), CSS3 (styling language). Currently, applications that offer the same experience as native applications are called progressive web applications (PWA - Progressive Web Application).

Now, in addition to HTML, Javascript, and CSS, we can also add WebAssembly to the list as part of the standard. Progressive web applications are currently supported by Chrome and Safari browsers officially and fully, and in other browsers only partially, but with consistent coverage.

Instructions

In this laboratory, we are going to use a development server. For simple HTML, Javascript (standard), CSS3 we generally run the files directly in the browser.

However, if we want to support the latest version of ECMA Script, or even Typescript (recommended) we will need additional steps to transform our code in something that standard browsers would fully recognise. But this is not the only end goal, we want to use also a bundler, an external tool that would allow us to work with separate modules.

Step 1: Install an IDE

Install Visual Studio Code (recommended, but you can use others as well) from this link: https://code.visualstudio.com

If you want to work with standard HTML5 only, you can install also the Live Preview extension.

Step 2: Install a package manager

Install Yarn or NPM:

Yarn: https://classic.yarnpkg.com/lang/en/docs/install
NPM: https://www.npmjs.com

Step 3: Create a local HTML file called index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My Web App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Step 4: Install Parcel

yarn add --dev parcel
# OR 
npm install --save-dev parcel

Step 5: Run the development server in your local directory using Parcel

yarn parcel src/index.html

or

npx parcel src/index.html

Step 6: Add Javascript and CSS

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Create a style.css file.

h1 {
  color: hotpink;
  font-family: cursive;
}

Create a src/app.js file.

console.log('Hello world!');