Website Development Project 1508
Visual Design and Web Project Assignment
Web Project Supporting Documentation
Table of Content
Introduction 1
Cross site common elements 3
Main Section 8
About section 10
The Portfolio sections 12
The Contact sections 16
The Blog sections 18
Webpage responsiveness 26
Accessibility criteria 28
References 30
Introduction
The documentation serves the purpose of elaborating the decisions made during the process of writing code. In other words, the description serves the purpose of explaining why a certain kind of code was used in my assignment to create the website. As the goal of the digital project I had chosen to continue and to complete my earlier work for the web development project due for last semester. The current hand-in contains the finished website made for Joel Harrison graphic designer. The website is made of twelve separate pages all made for the current project on the basis of the earlier one. Furthermore, the website contains code written in HTML5, CSS3 and JavaScript all which had been validated through the following online platforms: HTML Validator, HTML5 Outliner, Wave web accessibility tool, Checkmycolour and CSS Validator. Validation was necessary to spot out potential errors both in the written code and in fulfilling accessibility and outline related criteria.
Get Help With Your Assignment
If you need assistance with writing your assignment, our professional assignment writing service is here to help!
Assignment Writing Service
The documentation will go through the project using the following outline: cross site common elements: and items and SSIs server-side solutions, about section, portfolio section, contact section, blog section, webpage responsiveness, accessibility criteria. Each section had been documented describing the code used in the specific section, however, solutions such as responsiveness, accessibility will be detailed as separate chapters of the documentations since they are sets of criteria applied concisely through the whole website. Moreover, the responsiveness and accessibility chapters will present why these aspects are important and how each page conforms to these regulations and best practice solutions giving a concise look to the website as a whole.
Cross site common elements
Navigation, footer, SSIs and plug-ins
Starting with the common elements of the website deliverable pages the title and navigation bar. The title element of page number 1 which is the home page of the website. The title of the home page is also, the title of the website “Joel Harrison Graphic design”. To indicate the role of the title it is the only text appearing in the same way and same place in the through the whole website. Which is best practice when it comes to search engine optimization. Furthermore, the title works as a link to the home page from the other pages of the website. In all pages indifferent of function, the title is styled to look the same way. On the home page the tile text is used as a simple element styled with a h1 selector with declarations margin:0; and padding: 0; with the goal of eliminating any unseen spaces around the text itself which made it easier for myself to style the page since the padding and margin areas being 0 do not interfere with any other element on the page. On the about page the text is used as a link and written inside a element and styled in CSS with the help of a class called “ligthfront”. The link inside the element is styled with a different class called “alinkdecor”. The two classes inside the element have different functions. The “lightfront” class is used to style the text inside the to look as a element. Do to this the “lightfront” class uses the following declarations: font-family: sans-serif; font-size:2.800em; padding-bottom: 20px; padding-top: 20px; margin: 0 auto; width:800px; text-align: center; font-weight: bold;.
The font-family is used to determine the style of the text in our case sans-serif which is the font-family used through the entire navigation bar. Moreover, font sizes as well are all declared using em size unit. Padding-bottom is used to help with the positioning of the leaving 20px; of white space between the top end of the page and the with the title text inside. Padding-top is used for the same purpose with the exception that the declaration applies to the bottom of the element. Margin 0 auto and text-align: center are used to center the horizontally within the page. The is given an 800px width which is the size the title covers. Finally, the font-weight is set to bold to imitate the style of the title in on the first page. The role of the class “alinkdecor” is to style the link inside the element using text-decoration: none; color: black; declarations. The purpose of the decoration: none is to eliminate the underlining of the link and using color: black makes the link color and text associate with the link look black.
Footer
Moving forwards to the elements inside the footer, staring with the logo image. The footer logo is inserted into the HTML using an element containing the image link and the alt= “” value with a description to comply with accessibility regulations. In the CSS file the class assigned to style the logo is called “footerimg” containing the following declarations: width: 90px; height: 110px; float: right; padding: 0 margin-right: 100px; margin-bottom: 150px; margin-left: 10px. Values such as width and height are used to size the image in our case in pixels the also, padding is set at 0 to minimize the space the logo cover within the footer. The positioning is done with the help of float’s in our case float: right; after adjusted with the help of margin-right so the logo moves in towards the center of the page. Margin-bottom to adjust the space between the page bottom and the logo and margin-left to adjust the space between the copyright and the logo. The px sizes used were really hard to adjust it took many attempts to get the units right. Left to the logo is the copyright text placed in a element with the styled with the class “footerpar” the copyright sign is written with the © value because it is an entity name. Within the footerpar the following declarations are placed float: right; margin-left: 30px; margin-top: 40px; Here as well as in the case of the logo the is floated right within the then positioned with the help of margin-left and margin-top declarations to get the desired space between page bottom and right end of the page in px units. The last set to elements placed in the footer on the left-hand side are the social media links using a list containing three items for each social media link and content styled with the following CSS footer a descendant of the footer using the following code: margin-top: 20px, width: 30px; height:30px; margin-right:5px; padding: 0; display: inline; float: left. The is displayed inline meaning all element are on the same level inline vertically. Then floated to the left inside the footer styled 20px from the top of the footer and given a height and width of 30px. Finally, the footer is added to a SSIs file and uploaded to the server where modifications made to the SSIs file apply to all pages.
SSIs
Server Side Includes in short SSIs is a part of Microsoft’s SQL Server Integration Services the primary use of the tool is data warehousing, data transaction and data extraction. The SSIs can be utilized for merging data from heterogeneous data stores populating data, warehouses and data marts cleaning and standardizing data building, business intelligence into a data transformation process and automating administrative functions and data loading. Basically, the tool is an import, export wizard for data which allows in our case the storing of common element of webpages on a single file with the ending of ssi which is very practical from a point of view of website building and maintenance since the written code needs only to be edited in the particular ssi file which then will apply the changes to all other pages the file is being linked too. Presentation and content being separated the web server combines SSi and page code together. The SSIs work in the following way in my case the fragment or element of the page is being written in a SSIs file which means that the HTML code is written inside the ssi file then the file is placed into a separate directory ex named SSI at this time the HTML inside the ssi file does not have to be a valid HTML than another file with the named .htaccess is placed into the directory in which the file the user wants to maintain are located in. The .htaccess file contains the following code:
AddHandler server-parsed .html
AddHandler server-parsed .html
AddHandler server-parsed. ssi,
which is the basic syntax of the code many elements can be parsed in our case the footer for which the is being used. Directory names and elements can vary but usually the file ending is in SSI however it can be text or HTML as well. As a last step all pages we want to run the SSI file must include the following code anywhere in their HTML . The only downside of the tool being when offline the SSI element will not appear on the particular webpage. SSI can be useful then maintaining or creating large websites where the tool can spare us considerable amount of time when modifications are needed. For my project I had only used the tool for my element since this element is the only one that is common on all page’s other element such as the header are somewhat different on most of the pages of the website. (SSIs, 2018)
Share This Plug-in
The last element that is common throughout the pages is the plug-in of sharethis.com a side bar of social media share buttons generated through on the Sharethis website embed to the HTML with the help of a link containing a item. The Share bar is consistently, present on all of the pages of the website contributing to the consistent minimalist overall look of the website. Furthermore, the version of the share button bar is called a sticky button one of the two button types available on the providers website the website allows you to customize your bar by selecting your social services from a wide range of options by just dragging the into the bar moreover, a wide range of customization option are available from alignment options to only reveal the number of likes after reaching a certain number or to not be displayed at all. Button sizes and label can be added or changed finally, the user only needs to register and past the code inside the website at the end of the element or inside the (Share This Plug-in, 2018)
Main Section
The main page of the website host as a first content element below the navigation bar a picture element which presents one of the works of the graphic designer’s portfolio the goal is to showcase the work of the designer at first glance. The element is styled with a class called “workimg”. The class styles the size of the and the position it takes within the page, declarations used are the following: display: block; padding-top: 50px; margin-bottom: 10px; width:1100px; height:620px; margin: 0 auto. Display: block is used to keep the image in a particular position without the interference of other elements. Margin: 0 auto is set to position the to the center of the page, the width and height of the picture is set to look appealing to the viewer using px size units finally, paddings and margins are set to adjust the space between the other elements above and below the .
Continuing to the lower part of the page you can see there are text three columns made with the help of CSS3 flex-box container declarations. The way the flex-box works is that first of all, we have the whole of the content wrapped in elements in HTML5 in total five elements are used. Starting from inside to outside the first 3 elements contain one and one element each. These then are wrapped with a “flex container” which is in turn wrapped with one last element containing all of the above-mentioned elements. Its is styled with a class of “wrap” laying out the main characteristics of the wrap in which all of the rest of the element will take place. The class “wrap” has the following declarations width: 100%; max-width: 1200px; margin: 0 auto; fixing the width to the whole page and centring the content with the element. Going one element inside the next element is styled with the class “flex-container” hosting the following declarations display: flex; flex-wrap: wrap; these are the declarations creating the flexible responsive layout structure. Using display: flex the parent element becomes flexible. Flex-wrap: wrap; orders flex items to wrap if necessary. (Net Ninja Tutorials Flex-box, 2017 ) Finally, the last three elements are given a class of “box” with the following declarations height: 400px; flex-basis: 300px; padding: 20px; width: 70%; font-family: monospace; margin: 0 auto. Essentially, the class is responsible to give shape to the three columns a height a width a padding and a flex-basis. The flex-basis specifies the initial length of a flexible item, meaning that the initial length is 300px however, if we shrink the browser this length can change according to what size does the browser window has. Columns can adjust according to window size to for example display one on top of each other is the window is too small to display inline. Moreover, the class “box” has two descendants “box p” with the following code: text-align: left; and “box h2” with the code: text-align: center; each styling the and elements in the respective element. “box p” declares text-align: justify; to organize paragraphs to display justified, “box h2” declares text-align: center; which as the declaration says centres are elements.
(WDUX Assignment, 2018)
About Section
The section which host information regarding the designer also, works like a cv listing previous qualifications and works. The whole of the section is placed within a container called .about-container with the attributes of display: flex; flex-flow: wrap; giving it the characteristics of a flex item with a flow of wrap meaning if the screen is to small items will wrap around each other making the section responsive. Moreover, advantages of the flex-box model area for example what one can avoid using positioning or floats in its code furthermore, it helps create a responsive layout and it is widely supported on all types of browsers. Starting with the of the page which is styled through the class called .me containing the following code: width: 100%; height:100%; padding-top:100px; padding-bottom: 100px; margin: 0 auto; text-align: center; font-family: monospace; font-size: 5.000em; color: black; is given a colour of black which according to Checkmycolour passes contrast ratio, brightness difference and colour difference criteria’s. Padding top and bottom is given to create white space bellow and above the element width and height are given 100% and the element is being centred using margin: 0 auto.
The CSS used to style the img element is done by class called .about containing the following code: display: block; margin: 0 auto; width:85% ; height:40%; margin-top: 20px; The display: block styling is given so that the img element starts on a new row taking over the whole width of the row. The img is being centered and given a top padding for white space below the element. All, text elements are place in a styled with the .inbrief class directly or through its descendants. The is centered using a margin:0 auto; all text is set to use a. font-family of monospace this is consistent through all the pages with minor exceptions. The width: 90%; font-size: 1.200em; font sizes padding-top: 15px; line-height: 2.5; text-align: left; The text alignment to the left side is important because of accessibility reasons since the website must adapt to accessibility criteria’s. The descendants of .inbrief style the elements within the .inbrief h2 is given a larger font size of 3.000em, .inbrief article is given a padding:40px; .inbrief article h3 is also, given a larger font size of 1.500em and text-align center. Two of the three articles on the page are given a background color and different text color by using classes the choice for using classes was made because I wasn’t able to style only certain articles with descendent. The two classes are called .decor and decor3 one styling the top article and one the last one below. Class decor giving a background-color: yellow; and decor3 a background-color: black; color: white; to its article.
At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.
(WDUX Assignment, 2018)
Portfolio Section
The portfolio section is made of four pages with the same layout and styling the pages feature a jQuery image carousel with images and text as content. Each page can be accessed through the links above the carousel which are styled as a local navigation bar. As throughout the website pages do not link to themselves avoiding any confusion within the users. The links are styled with the class .tabsstyle and its descendants .tabsstyle a, a:hover and .tabsstyle h2. The class .tabsstyle uses the following code: margin-bottom: 20px; margin-left: 110px; positioning the links, tabsstyle a uses the following code: padding: 8px; border: 1px solid; text-transform: uppercase; letter-spacing: 2px; text-align: center; color: black; margin-left: 10px; margin-top: 10px; cursor: pointer; font-size: 0.700em; text-decoration: none; background-color: black; color: white; font-family: monospace; styling the a link as buttons or tabs finally a red hover is added with the descendant a:hover and the h2 is styled with font-size: 2.000em; padding-left: 10px; padding-bottom: 10px; font-family: monospace.
The image carousel itself is a jQuery plugin which uses HTML, CSS and JavaScript elements. Furthermore, the portfolio page linked to Googles jQuery library with which is place in the element this is needed in order for the jQuery to work. The plug in implemented contains the CSS styling of the carousel the HTML syntax the jQuery code. Both the CSS and the jQuery files are linked to the HTML . All jQuery had been placed to the end of the page just before the
tag is closed. All three languages the HTML the CSS and jQuery had been edited by myself to make the carousel appear in a neat way within the page. Starting with the HTML a , , and elements containing the description of images had been added to the of the below the image links. The carousel works in a way in which the jQuery makes the carousel rotate the elements within the unordered list. The default CSS styling of the carousel uses webkit- a html/css rendering engine used by Safari and Chrome with decoration is part of CSS3.This is a good way of writing CSS since most major browsers use WebKit as part of their browser engine. For both the carousel itself and the above pager which is a list of pictures what are displayed in big inside the carousel. The plugin uses the following classes and its descendant to style the carousel and its pager: lSSlideOuter, lightSlider, .lSSlideWrapper .lSAction. The type of CSS used is called Also, @-webkit-keyframes are used which is used for CSS3 animation. That is used to move the images within the pager left and right. Some of the modifications made in the CSS are for example in the .lSSlideOuter .lSPager .lSGallery that is the class the pager is being styled the pager got a border: 5px solid black; also, weight and width properties had been modified for the carousel .lSSlideWrapper width:90%; The , , and within the had been styled with the class .clearfix and its descendants ul giving it a list-style: none outside none; padding-left: 0; margin: 0; width:100%; .clearfix section article h3 giving it a styling of float: left; margin-right: 300px; the element had been styled with the descendant li section using color: white; background-color: black; padding: 50px; margin-top: 40px; margin-bottom: 20px; font-family: monospace;li section article descendant with padding-bottom: 10px. The third coding language used in the creation of the carousel is jQuery the HTML contains a link to the jQuery file containing the code used however, the HTML file hosts a part of the as well. The within the HTML host a function() which influences both the slider and the image bar bellow. Using the list of setting from the webpage the slider had been downloaded from the carousels speed or auto transition had been adjusted by giving the pause declaration a higher unit number in milliseconds ms. (Light Slider, 2018)
JavaScript
The JavaScript file contains the JavaScript syntax which is a client-side script what allows us to create dynamic content in our case the image carousel. The script uses functions to make the content dynamic. A function is being activated or executed when something invokes it or calls it. As in the file /digitalproject/lightslider.js functions can contain other functions as well. A function is composed of variables is short var which is a kind of container for the data that we use, the data can be of three types strings text characters delimited with single or double quotes. Numbers which are not wrapped in quotes and Booleans data types with two possible values true or false they do not use quotes. Once a JavaScript variable is created you can store any kind of data type in it. A JavaScript interpreter will understand what type of data the variable holds by looking at the actual data assigned to the variable by the coder. Moreover, variables should use camel case, variable must begin with a letter a_ or $, variables are case sensitive and should not use JavaScript reserved keywords. Furthermore, variable values are updated or calculated with the help of operators and array provides a simple, organized way of tracking and working with a list of related items of data.
Find Out How UKEssays.com Can Help You!
Our academic experts are ready and waiting to assist with any writing project you may have. From simple essay plans, through to full dissertations, you can guarantee we have a service perfectly matched to your needs.
View our services
An array is declared in the same way as any other variable in JavaScript using the [] square brackets. Arrays are written vertically but if we have longer data we can write it horizontally as well. Moreover, arrays can store Booleans numbers and strings as well, to access an item inside an array we simply need to call it by its name ex: alert(lastName); To add to an array we need to uses an index notation to manipulate an array we can use array methods push () to add one more item to the end of an array. Unshift () to add one more item to its beginning, Pop() to remove the last item from the array and shift to remove the first item from an array. Strings, dates, numbers, arrays, documents, for example, are all JavaScript objects ex getDate(), getMonth() and indexOf(). Other important elements are the conditional statements if and if else and complex conditional statements (JavaScript Module 2017-2018)
Contact Section
The contact page of the website uses a form mail plugin from tactile.com the form consists of two files a HTML file and a PHP file. Moreover, the contact form uses a server-side solution to make the contact page work the PHP file communicates between the server and the HTML page and the browser. The form makes it possible for user to communicate with the website owner sending a message on the webpage contact form which with the help of server-side solution gets sent to our e-mail. Since the form is a pre-made form its essay to install first we need to fill in the PHP file with the correct data the downloaded PHP contains a three-step description on how to make the form work. First, we need to set a target email where we would like our messages to be sent. Than we need to upload the PHP file to our server using any file name as long as it ends with .php in my case the form is uploaded to the digital project directory “ /htdocs/digitalproject/formmail.php”. After we can create a form in HTML or use the one provided by tactile.com the form must have a hidden called “recipients” with the email address of the person to receive the form’s results. As a last step set the action attribute to the formmail.php uploaded to the web server. By only doing these few simple steps we can have a functioning online form, if we wish to make any advanced changes the form provides instructions upon that as well. Furthermore, the form uses the element of the tag for accessibility reasons detailed in the accessibility part of the documentation.
After completing the setup of the PHP and HTML of the contact page the page had been styed using CSS first of all, the form element is placed within a styled with the class .contact-container giving it a width:80%; and a margin-left:100px. Than form elements inside the container are style through the declaration form and its descendants. Form is given the following styling width: 80%; height:70% float: left; font-family: monospace padding:100px, font-size: 1.800em; color: black; The h1 is styled with form h1 margin-bottom: 20px; giving it some white space above the form input area. The text area is styled with form textarea giving it a width: 80%; height: auto; for responsiveness, background-color: beige; order: 5px solid lightblue; resize: vertical; border-radius: 25px. Resize for responsiveness and some color like a border of light blue and a text area color of beige. Furthermore, input text areas had been styled using form input[type=”text”] width: 50%;
height: auto; padding-left:250px; padding-top: 25px; padding-bottom: 25px; background-color: beige; border: 5px solid lightblue; resize: vertical; border-radius: 25px; the same color and resize options are given for consistency. As the next element the submit input had been styled with form input[type=”submit”] with the following code: padding: 10px; border: 1px solid; text-transform: uppercase; font-size: 0.699em; letter-spacing: 2px; text-align: center; color: black; margin-left: 200px; margin-top: 10px; cursor: pointer; border-radius: 25px;
The submit input is styled with uppercase letters and a pointer when the mouse finally, giving it a input[type=”submit”]:hover with the color red. As a last element s had been given a padding-bottom: 20px; font-size: 1.050em; using the form label declaration.
At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.
(Tactile, 2018)
Blog Section
Main Blog Page
The blog section of the website contains 5 pages, one that we can consider the main page of the section and 4 pages of subsections containing the articles. The 4 article subsections consist of the same CSS styling and same HTML structure with the content being the only aspect of the pages being different. From a point of view of CSS styling and HTML we can say there is only two different page types the main and subsection styles.
The main page of the blog section works as an access page to all articles listing them one after another in a chronological style. Each article can be accessed by clicking on the article title or read more link alternatively from the side list at the top right-hand side of the page called recent posts. Both the and containing the articles are inside a container box styled with the class wrapper2 containing: width: 100%; max-width: 1200px; margin-bottom: 180px; The width is given 100% so the whole width of a page can be used to place items a max width is used to make sure content is not larger than 1200px; if yes the height of the item will change to fit the element within the max width requirement. If the element is smaller the code has no effect. Finally, a margin bottom of 180px is given to create a white space between the and everything inside the wrapper2. Following there is a containing a h1 element, all pages must have a h1 element. Concisely, all h1 elements on all pages will be styled the same way using the CSS class called .foliohead with the following styling applied: width:75%; height: 30%; padding: 50px; margin: 0 auto; font-family: monospace; font-size: 2.500em; text-align: center; The goal of the styling is to place the h1 on the top of the page under the the class .foliohead is used on several other places as well to style the h1 where layout and content allows it. The Styling follows the concise approach to style all font in monospace and all sizes are given in em units. Width, height and padding such as the margin:0 auto and the text align serve the purpose to position the and h1 within. The used as a side column or side content styled with the class posts is serves the purpose of a side list next to the main content area of the page the function of which is to enable the user to view full articles without scrolling down the page this option can be useful if articles are many. Posts contains the following code: height:350px; font-size: 0.900em; padding: 0; width: 300