Tehnologii Web/2022-2023/Laborator 2

Introduction

When we have a theoretical situation, the statement of a problem comes concisely, and the solution usually comes without any sort of ambiguity.

In practice, the development of an application leaves room for interpretation. Formalizing a complex application is often a more difficult task than developing the application itself. So, we look at the implementation of a web application in the form of an open statement, where along the way, we expect to receive new information, and possibly even receive contradictory information compared to what we initially expected.

The team factor also comes into play. For a single developer, an intermediate representation is not always necessary, but in a team, intermediate representations are essential.

In this way, there is the need to break this expensive cycle of planning - implementation into smaller cycles of planning - wireframe - mockup - prototype - implementation.

Wireframe: represents a sketch, usually it can be done on paper using a sheet and a pencil. Depending on the type and complexity targeted, we distinguish the term "low-fidelity-wireframe" and "high-fidelity-wireframe".

Mockup: represents a faithful rendering of a page or a component in the application.

Prototype: represents an interactive rendering, usually on a real device (or a simulation).

From left to right: low fidelity wireframe, higher fidelity wireframe, mockup, prototype

Terminology

When we talk about the visual representation of the application, we call the concept UI Design (User Interface).

When it comes to the behavioural representation of the application, we call the concept UX Design (User Experience).

Instructions

In this laboratory, we will implement a login/register web page, using HTML and CSS.

Feel free to adapt it for your own project branding:

You can change the title.
You can add your own logo and motto/description.
You can change the color palette and fonts.
You can change even the layout if you maintain aesthetics.

Step 1: Setting the Background

In your .CSS file, add the following code snippet.

body {
    background-color: #2A363F;
}

Step 2: Adding Custom Fonts

There are multiple ways to include custom fonts. You can store them locally and serve via web server or use a CDN (content delivery network).

In this example, we will be using Google Fonts.

We include thee following link tags. As an alternative, we can also import them in CSS via font-faces.

<html lang="en">
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>My Web App</title>     
        <link rel="preconnect" href="https://fonts.googleapis.com">      
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@1,400,500,600,700&display=swap" rel="stylesheet">  
    </head>   
    <body>
    
    </body> 
</html>

Sign in Button

Step 3: The Sign In Button

In your HTML body, add the following button.

<button class="login-button">Sign In</button>

In your stylesheet, create the .login-button CSS class.

.login-button {
  background-color: #6ED9A0;
  /* Makes the text white. */
  color: #FFFFFF;
  text-align: center;
  /* Add round borders. */
  border-radius: 8px;
  /* Padding works life an internal-margin. */
  padding-left: 70px;
  padding-right: 70px;
  padding-top:  10px;
  padding-bottom:  10px;
  font-size: 16px;
  /* Apply our custom font. */
  font-family: "Source Sans Pro", sans-serif;
  /* <button> tag will add default styling, we want to discard it. */
  border:  none;
}

Step 4: Adding the Login Form

Login Form

Add the email and password input fields.

<form class="login-form">
  <input class="email-input" value="email"/>
  <input class="password-input" value="password" type="password"/>
  <button class="login-button">Login</button>
</form>

.email-input {
  border:  1px solid #64C292;
  background:  transparent;
  padding:  10px 30px 10px 30px;
  border-radius:  10px;
  color:  white;
}

.login-form {
  /*  Use flexbox. */
  display:  flex;
  /* By default, it will be in a single horizontal row. */
  flex-direction: column;
  /* Align vertically and horizontally. */
  justify-content: center;
  align-items: center;
}

Exercise: complete the CSS style for password-input. It is similar to email-input.

Hint: consider adding margin-top: 20px; CSS property.

Step 5: Branding Component

Tags and hierarchy

We will use flex layout once again.

Our component with our branding will be split between our image and a sub-component.

  <div class="branding-container">
    <img
    class="logo"
    src="https://upload.wikimedia.org/wikipedia/commons/3/37/Logo-UVT-2017-02.png"         width="50px"
    heigh="50px" />
    <div class="title-container">
      <span class="title">Your Web App</span>
      <span class="subtitle">Designed in UVT Lab</span>
    </div>
  </div>

.branding-container {
  display: flex;
  flex-direction: row;
}

.title-container {
  display:  flex;
  flex-direction: column;
  /* Vertical alignment. */
  justify-content: center;
  /* This time, we don't want horizontal alignment. */
  /* Flex-start would mean left-alignment. */
  align-items: flex-start;
}

Step 6: Main Layout for the Components

Finally, you should embed the branding-container and the login-form in a new div, page-container.

Your HTML body should look like this.

<body>
  <div class="page-container">
      <div class="branding-container">
        <img
        class="logo"
        src="https://upload.wikimedia.org/wikipedia/commons/3/37/Logo-UVT-2017-02.png"
        width="50px"
        heigh="50px" />
        <div class="title-container">
          <span class="title">Your Web App</span>
          <span class="subtitle">Designed in UVT Lab</span>
        </div>
      </div>
  

      <form class="login-form">
        <input class="email-input" value="email"/>
        <input class="password-input" value="password" type="password"/>
        <button class="login-button">Sign In</button>
      </form>
    
    </div>

</body>

We can use multiple techniques for this layout, but we will stick to flex layout once again. But this time we introduced flex-wrap property, since it will be useful for responsiveness.

.page-container {
  display:  flex;
  justify-content: center;
  align-items:  center;
  flex-wrap:  wrap;
}

Exercise: try to match 1-1 the mockup image.

Hint: for responsiveness, try to set min-width, max-width, max-height or min-height.

You might use breakpoints, but it's not absolutely necessary in this case if you use flex-box.

Summary

Wireframes are useful for working in a team.
Mockups are useful to minimise changes during the implementation phase.

Try to use flex-box or grid layout (next lab) as often as possible.