This repository has been archived by the owner on Jul 17, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
P3_coding_20.html
480 lines (442 loc) · 26.2 KB
/
P3_coding_20.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P3 Project Coding</title>
<link rel="stylesheet" href="style/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav-links">
<li><a href="#ourClient">Our Client</a></li>
<li><a href="#changes">Changes</a></li>
<li><a href="#orgScheme">Org scheme</a></li>
<li><a href="#workDivision">Work division</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<img src="img/LeftOverlay.png" alt="Left Overlay" id="overlayL">
<img src="img/RightOverlay.png" alt="Right Overlay" id="overlayR">
<div class="wrapper">
<header>
<div id="timetag">
<p>04.11.2019</p>
</div>
<h1>P3 Project Coding</h1>
<h2>Livia Valenti, Vemund Hassel, Andreas Haugli, Mats Finsås, David Lekve og Henrik Viken Lied</h2>
</header>
<main>
<section id="ourClient">
<h2><img src="img/client.png" alt="client icon" id="client-icon">Our Client</h2>
<div class="hrReplacement"></div>
<ul class="clientList">
<li><strong>Client Name:</strong> Hassel Software AS</li>
<li><strong>Contact person:</strong> Vigbjørn Hassel Vaage</li>
<li><strong>Position in company:</strong> CEO</li>
</ul>
<p>
Hassel Software is a Norwegian tech startup created by a company with more than a hundred years of
experience selling and distributing cars. Since 2015 they have developed software to digitize
traditional dealerships and dealership networks.
</p>
<p>
Link to our website: <a href="../www/index.html">click here</a><br>
Link to our GitHub Repository: <a href="https://github.com/Xtrah/webtek20">click here</a>
</p>
</section>
<section id="changes">
<h2><img src="img/purpgoals.png" alt="plan icon" id="purpgoals-icon">Changes</h2>
<div class="hrReplacement"></div>
<p>
There are multiple changes to our original plan after starting development. The overall design of
the
page will stay as planned in <a href="P2_design_20.html">P2 Project Design</a> but the
organizational scheme and list of files and folders has some changes which we will explain in detail
below.
</p>
<h3>Responsive design</h3>
<p>
Tackling the responsiveness needed to serve up a good website was a hard challenge at first. Some of us started designing mobile first, and some forgot. The result was quite interesting, and a wake up call for future projects. Designing for mobile first is essential in production of responsive websites. An example of this was the changes needed in the gallery section, where we first started designing for desktop, and were punished when we moved over to mobile.
</p>
<h3>New features</h3>
<p>
<b>Scroll to top:</b><br>
A standard is to give the users the possibility to go to the top of the page or the front page
by clicking the logo. In our case having a long linear navigation page this proves to be even
more important. Therefore we added a closing bracket, which is a part of the logo "Hassel software" logo to
the sticky navbar.
<br><br>
<b>Preload screen:</b><br>
We implemented a preload screen with the Hassel Software logo originally encountering some issues
with load-time. We attempted to compress images and video and explored how other companies resolved pageloading.
There are several solutions by using for example; Plugins, lazy loading and compressing. We explored the
solution of making a loading screen as this will give us learning experience in the following fields: Javascript
load attributes, css keyframe animations and handling how a page loads with injections. After the load
function we trigger the gallery injection and by doing this we insure that it loads correctly in the given
viewport size. By choosing to make a loading screen we risk loosing audience in the process, but the feel of a
well made loading screen can also radiate professionalism. For example done on <a href="https://www.miksmaster.no/">
this</a> website.
</p>
<h3>Navbar</h3><br>
<p>
Some of the section names changed. Form "About us" to "Our business". Further down in the Our Customers updated
section this will be adressed.
</p>
<h3>Front Page</h3>
<p>
<b>General features:</b><br>
We decided to use a video as a background on our front page. This video is filmed and edited by us.
There is not parallax implemented because we wanted a video instead of a background image. There is
also no JavaScript implemented because we solved pretty much all our tasks using HTML and CSS.
<br><br>
<b>For desktop and mobile:</b><br>
We did not display a navburger on this section, but rather just implemented the down-arrow function
using HTML and CSS. When the visitor clicks the down-arrow, it transitions down to the What We Offer
section, with navbar displayed at the top. The centered text on front page is one <code>h1</code> and one <code>h3</code>
element, instead of three bullet points. We did this to make our front page look cleaner.
<br><br>
We didn´t implement a Contact Us sticky logo, because we tested it, but it didn´t look as good as
expected. Then we removed it and continued on with just a link in the navbar for Contact Us.
<br><br>
We also added a dark overlay to the video. We did this to make our caption "pop", and make the front
page look cleaner.
</p>
<h3>What We Offer</h3>
<p>
The What We Offer section is mostly unchanged. The exceptions are font size, general scaling, text content and positioning of the
bullet points. The font size and weight was tweaked to be more readable. The custom bullet points were
positioned better and the general scaling of elements were tweaked to be more responsive and fill the page better.
<br><br>
We also filled in example text, instead of using placeholder. By doing this, the website got a professional
and real look. The checks in the bulletpoints were also changed from all black, to the iconic green to apply
the general style.
</p>
<h3>Our Customers</h3>
<p>
The Our Customers section remained mainly unchanged with the exception of the line that runs at the
top of each testionial box. We decided not to implement the line as it only had an esthetics purpose
and required more work than what we felt was worth it.
<br><br>
In the mockup linked in P2 can you that the navbar displays "Our Custom-" instead of "Our Customers".
This was a text-wrap mistake in Illustrator.
</p>
<h3>Gallery</h3>
<p>
In P2 we thought that we wanted a grid-gallery, but when entering P3 and starting to code,
we saw that it created a conflict with our initial goal. Our aim was to create a simple and informative site for our client.
A big grid would defeat this purpose both on desktop and mobile. Therefore we opted to only have one image
with buttons for the next and previous image. We feel that our P3 solution meets the demand of our customers
in a simple and informative way. We wanted the ability to let mobile users slide/swipe images left and right,
but this proved to be more time consuming then we expected, and to complete the project, we chose to not implement this feature.
We feel that we still reach our over all goal of the image gallery, by only offering the users with clickable buttons.
</p>
<h3>Our Business</h3>
<p>
We changed the title from "About Us" to a more professional title, "Our Business".
The font-size of the header was chosen to be similar to the rest of the titles.
The font-size and <code>text-align: justify</code>, on the p-element was also changed to look
more appealing to the visitors of the website. The size of the image was rescaled
to look more fitting besides the p-element.
<br><br>
We added a media query for scaling which activates when the size of our website reduces
to 768px. The media query does <code>display: none</code> to the image, and makes the p-element
centered to optimize the space of our website. The styling is responsive, and every
element scales to the size of the browser window.
</p>
<h3>Contact Us</h3>
<p>
There were not many changes to aply to the Contact Us section. It´s pretty much identical to the mockup, but
there is three things we changed.
<br><br>
We changed the size of the h1-element to make the header look cleaner and symmetric. The size of the pylon-form
were also scaled to look more centered in this section.
We have changed the design of the send button in the form. We did this to make the design more symmetric.
It also worked better with the hover animation, making the button expand in each direction instead of only
to the right.
<br> <br>
We also added some frontend validation to the form. This makes sure that the user writes a name, a (phone)number and an email (something including a "@").
</p>
<h3>Changes to CSS styling</h3>
<p>
<b>Navbar: </b>Added underline animation on hover.<br><br>
We chose to have separate stylesheets for every section and imported all css stylesheets to main.
</p>
<h3>Javascript additions</h3>
<p>
<b>Note about modules: </b>We chose to implement modules to learn about how these work and how you can import functions to
other modules with javaScript. We know this is not supported in most browsers yet, but we chose to implement it anyway because
we wanted to have different functions in several javaScript files instead of one entire. We do see that this might be a bit verbose.<br><br>
<b>loadingScreen.js: </b>Created loading function to resolve slight loading time issues. This is also to radiate professionalism. This also works as a module to call functions that need to be called after load so that responsiveness
of injected elements work better<br><br>
<b>navBurger.js: </b>The navBurger javaScript toggles and adds animation to the navigation bar elements. It also toggles the navBurger mobile resolution. This is also one of the modules called in loadingScreen.js<br><br>
<b>gallery.js: </b>The gallery is injected to fulfill the responsivity requirement. The javaScript function will listen
to viewport sizes and make the gallery slide work through that. This is also one of the modules called in loadingScreen.js<br><br>
<b>contactUs.js: </b>The form is not implemented with JavaScript. Though part of the validation is checked for experimental reasons in contacUs.js so that testers can get validation and an alert when the form is theoretically sent. Also the form clears by being reset wich also gives a professional feel.<br><br>
<b>footer.js: </b>To fulfill the modularity requirement we inject the footer element. Since we have a linear one-page website
this functionality cannot be seen as a whole. Though if the website had several pages this would be modular.
</p>
</section>
<section id="orgScheme">
<h2>Updated organizational scheme</h2>
<div class="hrReplacement"></div>
<p>This is our updated organizational scheme. Our original plan to fulfill the requirement for
modularity was to import sections using JavaScript. To our surprise however, without using the
JavaScript library jQuery, the only method to do this are frames which are obsolete in HTML5, and
iframes which are not optimal for our intent. This results in our change which consists of all
previous seperate <code>.html</code> files that we planned to import using scripts will be hard
coded directly into <code>index.html</code> using seperate branches in git, and merged together in
the end.</p>
<ul>
<li>index.html</li>
<li class="ulBastard">
<ul>
<li>Frontpage</li>
<li>- navbar -</li>
<li>What We Offer</li>
<li>Our Customers</li>
<li>Gallery</li>
<li>Our Business</li>
<li>Contact Us</li>
<li>Footer (injected using JS)</li>
</ul>
</li>
<li>img/</li>
<li class="ulBastard">
<ul>
<li>contactUs/</li>
<li class="ulBastard">
<ul>
<li>formBackground.jpg</li>
<li>pylon.png</li>
</ul>
</li>
<li>footer/</li>
<li class="ulBastard">
<ul>
<li>contactIcon.png</li>
</ul>
</li>
<li>frontPage/</li>
<li class="ulBastard">
<ul>
<li>arrow.png</li>
<li>bracketLogo.png</li>
<li>hasselTransparent.png</li>
<li>mobileFP.jpg</li>
</ul>
</li>
<li>gallery/</li>
<li class="ulBastard">
<ul>
<li>img1.jpg</li>
<li>...</li>
<li>img6.jpg</li>
<li>leftArrow.png</li>
<li>rightArrow.png</li>
</ul>
</li>
<li>loadingScreen/</li>
<li class="ulBastard">
<ul>
<li>leftBrack.png</li>
<li>midLine.png</li>
<li>rightBrack.png</li>
</ul>
</li>
<li>ourBusiness/</li>
<li class="ulBastard">
<ul>
<li>ourBusiness.png</li>
</ul>
</li>
<li>ourCustomers/</li>
<li class="ulBastard">
<ul>
<li>centralgaragenLogo.png</li>
<li>hyuindaiLogo.jpg</li>
<li>locationIcon.png</li>
<li>mobileLogo.svg</li>
<li>svenkviaLogo.svg</li>
</ul>
</li>
<li>whatWeOffer/</li>
<li class="ulBastard">
<ul>
<li>adminModuleIcon.png</li>
<li>checkBoxIcon.png</li>
<li>onlineModuleIcon.png</li>
<li>pylonModuleIcon.png</li>
<li>reservationModuleIcon.png</li>
<li>testdriveModuleIcon.png</li>
</ul>
</li>
<li>hsFavicon.png</li>
</ul>
</li>
<li>style/</li>
<li class="ulBastard">
<ul>
<li>contactUs.css</li>
<li>footer.css</li>
<li>frontPage.css</li>
<li>gallery.css</li>
<li>loadingScreen.css</li>
<li>main.css</li>
<li>nav.css</li>
<li>ourBusiness.css</li>
<li>ourCustomers.css</li>
<li>whatWeOffer.css</li>
</ul>
</li>
<li>video/</li>
<li class="ulBastard">
<ul>
<li>HS.mp4</li>
</ul>
</li>
<li>script/</li>
<li class="ulBastard">
<ul>
<li>contactUs.js</li>
<li>footer.js</li>
<li>gallery.js</li>
<li>loadingScreen.js</li>
<li>navBurger.js</li>
</ul>
</li>
</ul>
</section>
<section id="workDivision">
<h2>Updated work division table</h2>
<div class="hrReplacement"></div>
<p>Work load on each group member has been changed. Instead of working in seperate HTML documents
like originally planned, we have divided it into sections in <code>index.html</code>. That means our
work division table has a few changes to represent this. Additionally the deadline for the site to
be ready for testing was extended by 1 day to handle unexpected merge conflicts.</p>
<p>
Changes done to the work division table was a result of inexperience with working together as a
team. Our planned work division had to change as we realized our specialities, strengths and
weaknesses during the development process.
</p>
<p>
Lastly we want to emphasize that we put alot of effort into teamwork. Having both regular and
spntanious meetings, we made sure to update and guide eachother during the development proccess. In
addition we used GIT to create issues and requests for everyone to work on. Our git-repository
should be seen as a changelog and will document our work division table.
</p>
<p>
Also for every section there is a stylesheet that has been imported into the main stylesheet. The
same people working with the sections have made the corresponding stylesheets.
</p>
<table>
<tr id="first">
<th>File/section</th>
<th>Description</th>
<th>In charge</th>
<th>Deadline</th>
</tr>
<tr>
<th>index.html</th>
<th>index.html will contain all sections and content on our site, and will link to external
stylesheets and scripts. Also responsible for merging using git.</th>
<th>Mats</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>Frontpage</th>
<th>The front page of the site. Introduces the customer to the products and services.</th>
<th>Livia og Andreas</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>What we offer</th>
<th>This section of the page will present the modularity and scalability of the products our
customer is selling.</th>
<th>Livia</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>Gallery</th>
<th>Images of the product in use.</th>
<th>Vemund</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>Our Business</th>
<th>An introduction to the company.</th>
<th>Andreas</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>Our Customers</th>
<th>Testimonials from some of the customers using the products.</th>
<th>Henrik</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>Contact Us</th>
<th>A section where the user can contact the business through a form. The entire website is designed around getting the visitor interested in contacting Hassel Software. With the form we give them an easy and accommodating way for them to do so, potentially converting them into becoming customers.
</th>
<th>David</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>*loadingScreen.js</th>
<th>A JavaScript file that triggers animation on load of page and runs the gallery and footer function calls.</th>
<th>Livia</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>navBurger.js</th>
<th>A JavaScript file including code for a navBurger and other features.</th>
<th>Vemund</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>*gallery.js</th>
<th>A JavaScript file injecting the gallery with corresponding viewport sizes.</th>
<th>Vemund</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>contactUs.js</th>
<th>A JavaScript file checking validity of input to alert user and reset form.</th>
<th>Livia</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>*footer.js</th>
<th>A JavaScript file injecting the footer.</th>
<th>Vemund</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>main.css</th>
<th>General styling for the page</th>
<th>All</th>
<th>03.11.2019</th>
</tr>
<tr>
<th>Final controls</th>
<th>Checking for errors or improvements</th>
<th>All</th>
<th>04.11.2019</th>
</tr>
</table>
<p>
<i><b>*</b> Module</i><br><br>
<b>Note on images:</b><br><br>
All images of modules are supplied by the client including logo. Videoes are taken by everyone in the group and all illustrations are made by Livia.
</p>
</section>
</main>
</div>
<script src="app.js"></script>
</body>
</html>