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).Wireframe mockup prototype.png

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.

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.



Step 3: The Sign In Button
In your HTML body, add the following button. In your stylesheet, create the .login-button CSS class.

Step 4: Adding the Login Form


Add the email and password input fields. 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
We will use flex layout once again.

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

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. 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. 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.