-
Notifications
You must be signed in to change notification settings - Fork 0
/
software-web-dev-project.html
321 lines (287 loc) · 27 KB
/
software-web-dev-project.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
<!--
Web Development Project - software.html
Author: Adrian Thomas Capacite
Date:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P236LWH');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development Project | Adrian Capacite</title>
<link rel="icon" type="image/x-icon" href="assets/images/favicon/favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/content-style.css">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P236LWH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav id="primary-nav">
<ul class="constrain-width">
<li id="nav-logo"><a href="index.html"><img src="assets/images/logo/AC-White-x64.png" alt="Logo"></a></li>
<li class="nav-link"><a href="software.html">Software</a></li>
<li class="nav-link"><a href="photography.html">Photography</a></li>
<li class="nav-link"><a href="software-web-dev-project.html">Web Project</a></li>
<li class="nav-link"><a href="about.html">About</a></li>
<li class="nav-link"><a href="#" onclick="openContactModal()">Contact</a></li>
</ul>
<div class="nav-toggle" onclick="toggleNav()">
<div></div>
</div>
</nav>
<div class="header-background viewport-height">
<img src="assets/images/background/html-web-development.jpg" alt="HTML code and website">
<div class="background-gradient"></div>
</div>
<header class="viewport-height-1-3 flex-center-top">
<div id="header-logo">
<img src="assets/images/logo/Adrian-white-x256.png" alt="logo">
<img src="assets/images/logo/Capacite-white-x256.png" alt="logo">
</div>
</header>
<div class="breadcrumbs constrain-width">
<a href="software.html">Software</a> > <span>Software Web Development Project Report</span>
</div>
<!-- Main Content -->
<main class="constrain-width light-colors">
<article>
<h1 class="accent-line">Web Development Project Report</h1>
<section>
<h2>Problem Description</h2>
<p>The website will serve as an interactive hub for learning, research and career information about the present writer. The website will provide content such as a portfolio for work such as software development and photography, blog articles, links to social media profiles such as GitHub, Twitter, Instagram etc…, a means to quickly contact the present writer and an online Curriculum Vitae.</p>
<p>The archetypical users of the site will be students or any individual who wants to learn and employers who are looking for more details on the present writer.</p>
<p>The site aims to solve the problem of gathering all the present writer’s portfolio, resume and social media profiles and link them all to one place, the site will act as a one-stop destination to the previously listed medias.</p>
</section>
<section>
<h2>Research</h2>
<p>In this section of the report, 3 websites which were picked under the same problem description that was stated in the previous section will be analysed. For each of the website, the site layout and site content will be analysed. The analysis will then be used to advise the layout of the website that will be built.</p>
<h3>First website</h3>
<img src="assets/images/article-images/Screenshots/Riccardo-Zanutta-Home-Header.png" alt="Riccardo Zanutta Home Header" class="image-50 image-right">
<p>The first website that will be analysed is http://riccardozanutta.com/ which is a portfolio website for Riccardo Zanutta who is a freelance front-end developer. The website layout has a single column layout where the content is laid out one after another vertically, the user is greeted with a full-page header section and the navigation is located at the top. </p>
<p>Content wise, the three main topics on the website which are “Case Studies” where it contains his recent works, “Experiments”, “Contacts” and “About me” are all kept on the homepage and clicking on the navigation either scrolls the page down to the content or pops up content. In the “Case Studies” section, the user is greeted with several cards which can be clicked on. Clicking on these cards direct the user to a new page which contain details of one of his works.</p>
<h3>Second website</h3>
<img src="assets/images/article-images/Screenshots/Prashant-Sani-Home-Header.png" alt="Prashant Sani Home Header" class="image-50 image-right">
<p>The second website is https://prashantsani.com/ which is a portfolio website for Prashant Sani who is a front-end web developer. The website uses a mobile first with a single column layout. The site navigation is opened by a button and a full-page navigation appears. </p>
<p>The website contains all its content on the homepage, the site has topics such as “Projects” where all their work is listed and clicking on them directs the user to a page describing the details of one of their work, “About” where they give a brief description of themselves and they include a link to their CV, “Training” where they describe their service in training individuals, “Experiments” where they showcase their CodePens and “Contact” which allow the user to send Prashant an email.</p>
<h3>Third website</h3>
<img src="assets/images/article-images/Screenshots/Henry-Tieu-Home-Header.jpg" alt="Henry Tieu Home Header" class="image-50 image-right">
<p>The third website is https://www.henry-tieu.com which is a portfolio website for Henry Tieu who is an Adventure Elopement and Intimate Wedding photographer. The layout of the website on large screens consists of many layout types, the user is first greeted with a hero image, then the rest of the website consists of split layout where there is text content on one side and an image on the other side, a single column layout or grid layout for their articles.</p>
<p>The website contains content over several pages, a navigation bar at the top of the page allows the users to access the different pages. The homepage contains a link to the contacts page, a taster on what an elopement is, an introduction to the photographers, links to different blogs and pictures showing their work throughout the page. The website contains categories of pages such as “Elopement Experience”, “Info” such as “About us”, “FAQs”, etc…, “Blogs”, “Pricing”, “For Photographers” which has pages of resources which help educate and enable other photographers to get a start in elopement photography, and the “Contacts” page where users can send in enquiries or bookings.</p>
</section>
<section>
<h2>Technology Selection and Site Architecture</h2>
<p>The website will be developed using HTML 5 to implement the site structure and content with semantic tags, CSS 3 to set a layout and style the HTML document and JavaScript to implement site functionality.</p>
<p>The site will have a homepage which the user will first see, from there the user can access the other pages. When the user visits the website on a large screen, for example on a 1920x1080 pixel resolution screen, the content will be mainly restricted to a width such as 1200px. Text content will be displayed left aligned, images can be either be incorporated within text content or within a gallery grid. Links to articles will be displayed in the form of a card in a scrolling grid. When the user visits the website on a small screen, for example on a 411x731 pixel resolutions screen, text content and images will be displayed on a single column. Images in a gallery will be displayed in a single column and same for article cards.</p>
<p>When developing for Cross Browser Compatibility, the website will be tested against the 4 common browsers like Chrome, Safari, Firefox and Edge between different devices. Any unintended behaviours that appear will be fixed before any further changes are made.</p>
<h2>JavaScript Functionality</h2>
<p>On the website there will be several JavaScript (JS) functionalities. The first JS functionality controls a lightbox which allows the user to open an image from a gallery and display it separately from other content, the use will also be able to click to the next or previous image. The second JS functionality control the opening and closing of the navigation bar on a small screen e.g., a mobile phone. The third functionality will animate reveals to elements as they load in such as text or images. The fourth JS functionality will be to transition between HTML pages. The fifth JS functionality will be to hide the navigation bar when the user scrolls down on a large screen e.g., on a desktop screen.</p>
<p>There will be several JavaScript (JS) functionalities included on the website. This will make for a more user interactable website.</p>
<h3>First function</h3>
<p>The first JS functionality controls the primary navigation bar. Both desktop and mobile navigation will have different functions controlling it. When viewing the site on desktop, as you scroll down the page, the navigation bar hides itself, then when you scroll back up it reappears.</p>
<h3>Second Function</h3>
<p>The second JS functionality controls any gallery carousels that have been implemented on the website. The user can click the previous or next buttons to cycle through the gallery. Alternatively, the user can click on any of the images in the row displayed below the carousel which will be displayed on the carousel image.</p>
<h3>Third Function</h3>
<p>The third JS functionality allows for the validation of any form fields such as the contacts form. When the user submits the form, the script will pull the contents of the field and the classes from the fields. The fields are then validated depending on the conditions of each field. If the field is required, then the script will check if the user has entered their input. If the field needs a certain format, then the script will test the contents of the field against a Regular Expression. If either of these returns false, then the form is not valid and will not be sent and feedback to the user is given of which field is invalid and why it is invalid. When the form passes validation, then the details are allowed to be sent and feedback to the user is given for the successful submission.</p>
<h3>Fourth function</h3>
<p>The fourth JS functionality controls elements which can expand and collapse. The script toggle a class tag on the element which tell the element whether to be expanded or collapsed.</p>
<h2>Low Fidelity Prototype</h2>
<div class="carousel">
<div class="carousel-display">
<a class="carousel-prev" onclick="carouselPrev(this)">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-next" onclick="carouselNext(this)">
<i class="fas fa-chevron-right"></i>
</a>
<div class="carousel-pos-data">0</div>
<div class="carousel-pos">1 / 7</div>
<img class="carousel-image" src="assets/images/article-images/Wireframes/Home-Header.png" alt="Homepage header" loading="lazy">
</div>
<div class="carousel-images-thumbs">
<img src="assets/images/article-images/Wireframes/Home-Header.png" alt="Homepage header" loading="lazy" onclick="carouselSetTo(this, 0)">
<img src="assets/images/article-images/Wireframes/Home.png" alt="Homepage content" loading="lazy" onclick="carouselSetTo(this, 1)">
<img src="assets/images/article-images/Wireframes/Home-Footer.png" alt="Homepage footer" loading="lazy" onclick="carouselSetTo(this, 2)">
<img src="assets/images/article-images/Wireframes/Software-Header.png" alt="Software page" loading="lazy" onclick="carouselSetTo(this, 3)">
<img src="assets/images/article-images/Wireframes/Article.png" alt="Article page" loading="lazy" onclick="carouselSetTo(this, 4)">
<img src="assets/images/article-images/Wireframes/Photography-Header.png" alt="Photography page" loading="lazy" onclick="carouselSetTo(this, 5)">
<img src="assets/images/article-images/Wireframes/About-Header.png" alt="About page" loading="lazy" onclick="carouselSetTo(this, 6)">
</div>
</div>
<p>A wireframe illustration made in Adobe Illustrator. This wireframe illustration will aid in the layout of the content on each page of the website.</p>
<p>The website layout and content will be created using Nielsen’s 10 Heuristics for User Interface Design which is shown below, however, we wont be able to demonstrate some of these within some wireframe illustrations.</p>
<ol>
<li>Visibility of System Status</li>
<li>Match between systems and the real world</li>
<li>User control and freedom</li>
<li>Consistency and standards </li>
<li>Error prevention</li>
<li>Recognition rather than recall</li>
<li>Flexibility and efficiency of use</li>
<li>Aesthetic and minimalist design</li>
<li>Help users recognize, diagnose, and recover from errors</li>
<li>Help and documentation</li>
</ol>
</section>
<section>
<h2>Development Plan</h2>
<p>The website will be developed using a code editor called Visual Studio Code. The website will be placed in a folder called “Adrian Capacite”, within the folder the website will be structured as shown in Figure1</p>
<p>The website pages will be developed using a code editor called Visual Studio Code (VSC). VSC is a very powerful code editor as it includes syntax highlighting, IntelliSense (smart autocomplete) and other helpful tools. VSC will help with developing the website from the website root folder. </p>
<p>The website will be contained in the folder “Adrian-Capacite”, here the files will be structured as follows:</p>
<img src="assets/images/article-images/graphs/site-hierarchy.png" alt="Website hierarchy">
<p class="subtitle">Figure: File hierarchy, “[folder] > [file type]” means the folder contains the file type</p>
<p>A CSS file called style.css will be used to contain the main styles such as the main element styles, utility styles, grid and flexbox utility styles, text utility styles, other simple styles and more. Another file is called content-styles.css for more special styles for containers such as card grid containers, image carousels and more. </p>
<p>Both style.css and content-style.css are stored in the directory “/assets/css”, these .css files are then linked in the <head> tag in a <link rel=”stylesheet” href=””> tag in every .html document. Linking the .css files in a .html document allows elements to be styled.</p>
<p>Styles in both of these .css files are reused all throughout the website, for example, .accent-line which places a line underneath any element with the class, this is used as an accent for elements such as h1 in articles or the h2 in the about page. Another example is the .card style, this is used to style elements into a card which typically get placed into a card scrolling wrapper or card grid wrapper and is used in different pages of the website.</p>
</section>
<section>
<h2>Testing Plan</h2>
<p>To ensure that the website is cross-browser compatible, a testing plan will need to be followed through. To test the website, we will be using tools like a HTML and CSS validator and different browsers in different screen form factors.</p>
<h3>Validation</h3>
<p>To ensure the .html and .css files are valid, these files put through a validator site. The site https://validator.w3.org/ will be used to validate HTML and https://jigsaw.w3.org/css-validator/ will be used to validated CSS.</p>
<h3>Responsive design</h3>
<p>Responsive design is used on this website, to test for good responsive design, we will use a suite of browsers at different sizes by resizing the browser window or using the responsive design tool. The browsers that will test the responsive design of the website are Google Chrome, Firefox and Microsoft Edge, on a laptop screen of 1920x1080p will test all browsers with their responsive layout tool, whereas on a phone screen of 1080x1920p will test Google Chrome and Firefox.</p>
<h4>Google Chrome</h4>
<div>
<h5>Large Screen</h5>
<img src="assets/images/article-images/Screenshots/chrome1.png" alt="Chrome Responsive Design">
<h5>Small Screen</h5>
<img src="assets/images/article-images/Screenshots/chrome2.png" alt="Chrome Responsive Design">
<h5>Mobile Screen</h5>
<img src="assets/images/article-images/Screenshots/chrome3.png" alt="Chrome Responsive Design">
<h5>Mobile Screen Nav Open</h5>
<img src="assets/images/article-images/Screenshots/chrome4.png" alt="Chrome Responsive Design">
</div>
<h4>Firefox</h4>
<div>
<h5>Large Screen</h5>
<img src="assets/images/article-images/Screenshots/firefox1.png" alt="Firefox Responsive Design">
<h5>Small Screen</h5>
<img src="assets/images/article-images/Screenshots/firefox2.png" alt="Firefox Responsive Design">
<h5>Mobile Screen</h5>
<img src="assets/images/article-images/Screenshots/firefox3.png" alt="Firefox Responsive Design">
<h5>Mobile Screen Nav Open</h5>
<img src="assets/images/article-images/Screenshots/firefox4.png" alt="Firefox Responsive Design">
</div>
<h4>Edge</h4>
<div>
<h5>Large Screen</h5>
<img src="assets/images/article-images/Screenshots/edge1.png" alt="Chrome Responsive Design">
<h5>Small Screen</h5>
<img src="assets/images/article-images/Screenshots/edge2.png" alt="Chrome Responsive Design">
<h5>Mobile Screen</h5>
<img src="assets/images/article-images/Screenshots/edge3.png" alt="Chrome Responsive Design">
<h5>Mobile Screen Nav Open</h5>
<img src="assets/images/article-images/Screenshots/edge4.png" alt="Chrome Responsive Design">
</div>
</section>
<h2>Site Evaluation</h2>
<p>After the website has been developed, website the Nielsen’s 10 Heuristics for User Interface Design which was mention in the Low Fidelity Prototype</p>
<ol>
<li>Visibility of System Status</li>
<li>Match between systems and the real world</li>
<li>User control and freedom</li>
<li>Consistency and standards </li>
<li>Error prevention</li>
<li>Recognition rather than recall</li>
<li>Flexibility and efficiency of use</li>
<li>Aesthetic and minimalist design</li>
<li>Help users recognize, diagnose, and recover from errors</li>
<li>Help and documentation</li>
</ol>
<h2>Appendix</h2>
<h3>Weekly Logs</h3>
<h4>Week 1 - 11 / 11 / 21</h4>
<p>This week is the first week on developing my project website. Potential ideas I have for the website is:</p>
<ol>
<li>Completely improve and remake my personal website with a new design and cleaner code.</li>
<li>A help website for computer science.</li>
<li>A website about SpaceX, a space rocket company.</li>
</ol>
<p>I will be going for the last option, a website about SpaceX, a space rocket company, the achievements, their aspirations and services</p>
<h4>Week 2 - 18 / 11 / 21</h4>
<p>This is the second week developing my project website. I have decided to change my ideas for my website to be my personal website. </p>
<p>Here in my website, it will contain an introduction of myself, a blog page, a portfolio of my work and hobbies such as photography and software development and an online CV with a means to reach me.</p>
<p>I will be developing my website using HTML 5, CSS 3 and JavaScript. I will be developing my website in Visual Studio Code.</p>
<p>My website layout will be created primarily using the CSS grids display property.</p>
<h4>Week 3 - 25 / 11 / 21</h4>
<p>This is the third week of developing my project website. I have begun brainstorming and planning the content that will be included on the website. At the same time, I have also made some research on sites like my website which were software development and photography portfolio websites.</p>
<p>I have also begun to write up the report for the website.</p>
<h4>Week 4 - 2/ 12 / 21</h4>
<p>This is the fourth week of developing my website. I have finalised research on sites like my website. Using a combination of inspiration and my own ideas I have written what web development tools I will use, how I will make my website responsive and how I will test my websites across different browsers, devices and screens. I have planned out the JavaScript functionality I will use on the website for example opening a mobile navigation menu. I have finished drawing up the wireframe of the website.</p>
<h4>Week 5 - 9/ 12 / 21</h4>
<p>This is the fifth week of developing the website. I have begun implementing the website in HTML and CSS, the main structure of the homepage were implement and so as the styling.</p>
<h4>Week 6 - 18 / 12 / 21</h4>
<p>This is the sixth and final week of developing the website. I have finished implementing the website, afterwards I performed testing on the site to see if the code is valid and the responsive design is working as intended. I have also finalised the report for the web development assignment and checked if all the tasks have been done according to the assignment brief.</p>
</article>
</main>
<!-- Main Content End -->
<footer class="constrain-width">
<p>Adrian Capacite © 2021</p>
</footer>
<!-- Contact modal -->
<section id="contact-modal" class="modal-container">
<div class="modal-content contact-form">
<div class="modal-close div-icon icon-x" onclick="closeContactModal()">
<div></div>
</div>
<h2 class="font-size-2">Contact me</h2>
<P>
Contacts not available at the moment.
</P>
<!-- <form action="#" name="contact-form" id="contact-form" onsubmit="validateForm(this)">
<div class="input text required">
<label for="name" class="input-label">Name</label><input type="text" id="name" name="name">
</div>
<div class="input text required">
<label for="email" class="input-label">Email</label><input type="text" name="email" id="email">
</div>
<div class="input input-group radio required">
<span class="input-label">Reason of contact</span>
<div class="input-options">
<input type="radio" name="reason" id="enquiry"><label for="enquiry">Enquiry</label>
<input type="radio" name="reason" id="suggestion"><label for="suggestion">Suggestion</label>
<input type="radio" name="reason" id="issue"><label for="issue">Issue</label>
</div>
</div>
<div class="input input-group check required">
<span class="input-label">Subject</span>
<div class="input-options">
<input type="checkbox" name="subject" id="photography"><label for="photography">Photography</label>
<input type="checkbox" name="subject" id="software"><label for="software">Software</label>
<input type="checkbox" name="subject" id="correspondence"><label for="correspondence">Correspondence</label>
</div>
</div>
<div class="input select">
<label for="visitor-origin" class="input-label">How did you hear about me?</label>
<select name="visitor-origin" id="visitor-origin">
<option value="">N/A</option>
<option value="friend">A friend</option>
<option value="search">On google</option>
<option value="social-media">Social media</option>
</select>
</div>
<div class="input textarea required ">
<label for="message" class="input-label">Message</label><textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<div class="submit">
<p class="submit-output">Form submitted</p>
<button type="submit" value="submit">Submit</button>
</div>
</form> -->
</div>
</section>
<!-- End contact modal -->
<script src="assets/scripts/scripts.js"></script>
<script src="https://kit.fontawesome.com/87e2e714ed.js" crossorigin="anonymous"></script>
</body>
</html>