Web Development Assignment Using HTML5, CSS3 and JavaScript

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.

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 < div > 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 < label >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 < ul > list at the top right-hand side of the page called recent posts. Both the < ul > and < div > containing the articles are inside a container box < div > 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 < footer > and everything inside the wrapper2.  Following there is a < div > 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 < nav > 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 < div > and h1 within. The < div > 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: 300px; float: right; margin-top: 200px;  The < div > is being floated right to occupy a top left position on the page leaving space to the main box-blog < div > height and width are given values of 350px and 300px which is enough for the content within font-sizes are in em and padding is 0 since there is no need for any space between < div > elements margin top is set to 200px from the top of the page making the posts appear on the same level as box-blog on its left side. Descendants posts li, posts li a and posts li p style the content within the elements.  Posts li has a styling of list-style-type: none; to make the bullet points of each < li > disappear. Posts li a styles the link within the

with font-size: 1.200em; font-family: ‘Montserrat’, sans-serif; text-decoration: none; color: black; margin: 0; padding: 0; The font size is self-explanatory while the font family is given a special font from google fonts library which is being linked into the HTML inside the < header > element. text decoration none is given to the a links so it will not appear as an underlined link instead the special font given to differentiate its purpose from the rest of the page. Color and margin and padding settings are also, self-explanatory. Furthermore, posts li p is given a font-size: 1.000em; font-family: monospace; as to all text on the page and margin: 0; padding: 0; so, we only have the < p > without any margin or paddings around it. The < div > inside posts containing the text recent posts is being styled with the class called .listp containing the following code: padding-left: 50px; font-family: monospace; font-size: 1.600em; padding-bottom: 0;   margin: 0; A puffing left is given for positioning reasons font-family: monospace; as to all text on the page and margin: 0; padding: 0; so, we only have the < div > without any margin or paddings around it. The following < div > is the flex-container2 which in turn host several other < div > inside the < div > is styled in the following way padding-top: 100px; margin: 0; display: flex; flex-flow: column. The padding is necessary to create some white space between the top part of the page and the items in flex-container2, margin is set to 0 so there are no margins between wrapper2 and flex-container2 and the items with flex-container2 are mode into flex items using display: flex and flex-flow: column giving the page in our case a column layout.

Moving forwards to the < div > styled with the class box-blog which hosts the main content of the page. The class box-blog contains the following code: padding-left:30px; padding-top: 20px; width: 700px; height: 850px; font-family: monospace; font-size: 1.100em; text-align: left; margin-bottom: 40px; margin: 0 auto; The size of the box is given using width and height in pixels the column of boxes is given a margin bottom of 40px which represents the white space between each box. Padding top and left is given to position the box-blog div right next to and on the same level as the post < div > and its content. Text is aligned left for accessibility reasons and text size and fonts are in em and monospace. The descendants of box-blog are box-blog h2, box-blog h2 a, box-blog h2 a:hover, box-blog h3 and box-blog p. These descendant style each element within the < div > The h2 descendant consists of the following code: padding-top: 10px; text-align: center;  margin: 0 auto; font-family: ‘Montserrat’, sans-serif; A special font family is given to the h2 since it also, serves as a link to the article just like the links in the .posts < div > padding top is used to create some white space above the element and the element is being centered with text-align: center.  The second descendant the h2 a uses text-decoration: none; color: black; to change the default underlining decoration of the link and it’s color. H2 a:hover is given a background-color: yellow; which means every time the cursor points at the link the background around it becomes yellow for the time being pointed on. Descendant h3 uses margin: 0 auto; text-align: center; padding-bottom: 10px; padding-top: 5px; to position the h3 within the < div > element. Descendent p dose the same with the help of padding-top: 0; padding-bottom: 0.

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.

Article Blog page

The Article pages of the website currently 4 as mentioned above on the top of the chapter use the same styling and HTML with the content being the only variable that is changing. The page consists of a two-column layout a main column and a side one. The main column hosts the article with an image on the top of each followed by the text content a Facebook plugin consisting of a like and share button and a comments section. Also, at the end of the article there is a link button sending the user back to the main blog page. Following the first column the second column hosts content in form of social media plug-ins which were generated by the social media developer platforms ex: Facebook developers website where only the link to a certain page is needed and the width and height of the plug-in we wish to embed.  The sidebar hosts 5 elements the recent post < div > containing the < ul > list presented in the main blog page above, a < div > used as a title with the text social media inside, two plug-ins one from Facebook and one from Twitter and a Gif used to promote the module.

Staring on the top of the page all content is place within a container styled with the class named .full with the following code: width: 100%; max-width: 1500px; padding-top: 50px; background-color: white; height: 2000px. Giving the characteristics of the container all other elements will be placed in on both columns. The side column styled with the class .blogside using the following CSS: margin-top:300px; width:300px; height:1900px; padding: 0; margin:0; float: right;  margin-right: 180px; The column is styled in a way to fit next to the main column between the margin of the page and the main column. Measurements of height and width are given accordingly, to make the positioning possible. The < div > is floated to right side of the page the main column being on the left side. All element widths will be set to 300px to fit inside the < div > creating a neat column look. The first element do be documented inside the column is the social media < div > styled with the class of sidesocial using margin-top: 520px; width:300px;  height:80px;  text-transform: uppercase; font-family: monospace;  font-size: 0.999em; letter-spacing: 2px; text-align: center; padding-bottom: 0. The content is set to all uppercase letters also, the letter-spacing is set 2px font family is concisely the same as in all < div > containing text and height and width is set to fit the < div > inside the column.

The first social media plug-in is generated by Facebook developer website Facebook the tabs is selected to be a page. The code generated is emended inside the HTML of the page inside of a < div > with the instructions to embed the code inside that page where we would like it to be displayed. The code consists of the link to our page some inline styling and a < blockqoute > element. The inline styling is done through data-tabs=”page” data-width=”300px” data-height=”200px” data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”true”.  The data-tabs page refers to the style of the plugin which is a page, data-width refers to width which according to the developer website can be given a min of 180px and a max 500px by default the plug-in is generated to 340px.  Data-height refers to the height of the plug-in minimum height is of 50px and the default setting is of 500px. Header preference data-small-header=”false” meaning that we use a medium sized header. Data-adapt-container-width=”true” fits data inside the given width and height of a container. Data-show-facepile=”true is used to show the picture of people who liked your page on the plug-in. The last two attributes can be added to the plug-in as optional with ticking the option on the developer page. The plug-in uses short code which can be edited however, the inline styling cannot be replaced with a class moreover, the < blockqoute > cannot be deleted or altered if let’s say we change the element with a < div > the plug-in will still work but the html validator will see it as an error even with the cite code changed to href code. Because of these reasons I did not try to make any modifications what would cause errors in the HTML code. The twitter plug-in works similarly with the use of shortcode for the width and height and color containing the link to our twitter page and a < script> element linking the plug-in to twitters own JavaScript. The procedure of creating the plug-in is the same as for the Facebook plug-in with selecting the options on the company’s developer page. (Twitter, 2018)

The last plug-in was created by myself on Photoshop CC and uploaded to GIPHY which is a website what host GIF content. The emended link was generated by the website with an inline styling however, the inline code was deleted and a class was successfully added to the code. The class is called .giphy-embed containing the code  width:300px;  height:600px;  position: absolute; border: 0; styling originally generated as inline styling by the GIPHY website. The purpose of the GIF is to demonstrate how a commercial would look like included to on the page.

Moving ton to the main column of the blog article page the part where the articles are actually fitted. A < div > contains all elements Every element inside the < div > is being styled by the class .box-blogfull and its descendants. The class contains the following code   padding-left:30px; padding-top: 20px; width: 700px; height: 1750px; font-family: monospace; font-size: 1.000em; text-align: left; margin-bottom: 40px; float: left; The box size is set using height and width font family is monospace as in the whole website concisely, padding top is added to create a white space between the top of the page and the box finally, the whole box is floated left. The descendent of the box are h1, h2, h3, p, a, a:hover  and article.  Each descendant refers to one element inside the < div >. First the < article > element acts like a container of all other descendants the article background is set to beige.

The < h1 > element is give a styling of text-align: left; font-size: 3.000em; background-color: yellow, h1 is the header of the article and of the page as well. The < h2 > is given a styling of text-align: center; margin: 0 auto; padding-bottom: 10px; padding-top: 5px. H3 is given a styling of padding-left: 70px; the < p > is styled with padding: 80px; padding-top: 0; padding-bottom: 0, < h3 > is given a margin: 0 auto; to align center. The a link at the end of the article is given a styling to look like a button with the following code padding: 50px; padding-top: 0; margin-left: 360px; padding-bottom:10px; border: 1px solid; text-transform: uppercase; font-size: 0.699em; letter-spacing: 2px; text-align: center;   padding-top: 10px;   padding-left: 10px;   padding-right: 10px;   color: black;   margin: 0 auto;

Padding and border are being used to create a button like look with the link color black and uppercase styling of the a link text. Margins are used to place the a inside the article. Furthermore the a is given a a:hover of yellow color when the pointer of the mouse is on the element. Finally, the styling of the last element of the

another two Facebook plug-ins this time the comments and like and share buttons. Both provided by the Facebook developers website the plug-ins use shortcode and JavaScript. (Facebook, 2018) The like and share buttons are also, styled with a class called .fb-like with the following code: margin-top: 50px. The same applies for the comments plug-in which uses the same kind of shortcode and link and CSS class applied by myself the class .fb-comments features the styling of text-align: left; and padding-top:50px. At the end of the page just before the end of the < body > element the JavaScript part of the Facebook plugins is being placed which consists of a function calling for the plug-ins to work the function host variables var, if else statements and a link to the Facebook developers site where the script is generated from.
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.
Webpage responsiveness
Flex and @media
Responsiveness is an approach which makes webpage content render well on all screen sizes and devices. The point of the approach is to make your website look good on by hiding, resizing and shrinking or enlarging web page elements so they look good on all screens. To achieve this, I had used a number of tools to make the page responsive first of all, I had used < meta name=”viewport” content=”width=device-width, initial-scale=1.0″> as a < meta > element which gives indications through the viewport to the browser on how to control the page dimensions and scaling. Secondly, all < img > elements are set to width:100% height: auto; which makes the pictures scale up and down as the browser size changes. Furthermore, the webpage uses display: flex or flex-container as a tool to create responsive elements within the website that behave in an expected manner. Flex-container or flexbox makes it easy to create responsive layouts and it works well with @media queries.  Flex-box has many options elements can be displayed vertically or horizontally using the row or column options. Other usefully styling options are justify-content where we have four options to chooses from flex-start, flex-end placing the content to the top left corner of the page or top right. You also, have the options: center, space between and space around. (Flex-box, 2018)
Internal elements can be adjusted using one of these three properties flex-grow, flex-shrink and flex-basis, the first two define the growth, shrink ratio of internal items. The syntax does not use any units so flex:2 is correct this would define each box of having a ratio of 2 but for example if we have 3 boxes we can adjust their ratio separately. Also, global values can be applied as well such as inherit, initial and unset. The only flex that uses units is flex-basis which declares the internal box default size in height and width where one can use px or ems as well.
Furthermore, you can use floats and flex-box together in the assignment I had used these declarations together moreover, the assignment uses flex-flow: wrap which wraps elements together is the screen size changes. Moreover, one of the advantages of flex is that you do not need to apply it on across the whole webpage only to certain elements or pages.
As the last tool to make the webpage responsive I had used the @media quarry to optimize the website for all screen sizes. Usually, if not optimised the webpage would appear on an ex: phone screen with the same layout just smaller however, it can make content hard to read element too small to observe. Using @media elements can be optimised to screen size of course not all elements need to be optimised but with @media we can choose which pages and which elements we want to optimise for this assignment I had used @media only screen and (min-width:600px) for small screen devices and @media only screen and (min-width:1824px) for large screens. The @media uses pixels as units since depending on size a screen is composed of more or less pixels. For this assignment all pages featuring written text content had been optimised for mobile use and large screen use as well for example on all blog pages the side column is hidden moreover, the < nav > element had been optimised as well for mobile use. The challenge in using the @media technique is that the developer basically needs to retrofit the responsive design to the already existing code however, most of the time adjustment in ex height and width is enough. The positive of the tool is that we can design a different layout to a webpage while on an 1824-pixel screen and a different one for a 600-pixel screen. Furthermore, using flex-box and @media do not exclude each other as well as using in fact it makes @media easy to use. (CSS @media rule, 2018)
Accessibility criteria
The first accessibility guideline came out in 1999 published by W3C with the goal of helping by giving access to people with some forms of disabilities. Including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Moreover, current regulations make certain accessibility regulations mandatory by law when building a website for commercial use. The website produced for this assignment follows the guidelines of accessibility which are relevant to the content featured on the website. Before completion the pages produced where checked with the help of automated online checkers than manually using the sources included in our modules slideshows. Relevant regulations where implemented in non-text contents across pages a text description had been assigned to all non-text content such as images all < img > elements contain an < alt=”” > element which are used for the purpose of giving a description to images within the page except to controls located within the navigation bar. Furthermore, distinguishability of content is made possible by giving the background and the foreground contrasting colours in our case back and white colours. Also, contrast ratio between text and image content reaches the norms provided in regulations, text can be resized up to 200% and information is contained within text instead of images as regulation suggest it.
The navigation bar makes it possible for user find content easily and to helps users find their way within the webpage, link purpose can be determined by just reading the link text and headings and labels describe topic or purpose consecutively within each page. The content of the page can be presented in different ways indifferent of presentation since all information is being presented in text as well as image. As for the text language following regulation the text language is easy to understand the navigation bar is consistent with pages not linking to themselves and always marking the currently loaded page. (WDUX Assignment, 2018) Also, on all page’s components with the same function are identified consistently which add to the overall predictability of the webpages. Furthermore, all pages where checked with Checkmycolour to assure all colours used passes contrast ratio, brightness difference and colour difference criteria’s. The online checker did not report any errors and all colour related regulations passed with AAA meaning all of the above mentioned three aspects where fulfilled 100%. Moreover, pages such as the contact page use the < label > element which make the contact page accessible, < label > elements need to be provided to identify all form controls, including text fields, checkboxes, radio buttons and drop-down menus. Labels can be associated with form controls explicitly or implicitly when associated explicitly the for element of the label must match the id element of the input.  When making the association implicitly, associations should be clear from the context of the page moreover label can be hidden but they still need to be provided within the code to support screen readers and speech input forms. The finished contact page had been checked with  Wave web accessibility tool to make sure all regulations are being meet. The online checker did not report any errors giving the green mark to all page features. To tick another accessibility criteria all abbreviations within the text use the < abbr > element for example < abbr title=”United States of America” >US< /abbr > for webpage readers to identify then and where an abbreviation is being used with the text.  Finally, throughout the whole website text is being aligned left in order to make the text easily readable with any concertation problems or dyslexia. Justified text is being avoided thorough the website following the indications of w3.org all text is being aligned on one side in our case to the left to avoid river of white between words this makes it easier to read for people using text resize or zoom on their browsers. Align center is also not recommended for the same reasons.
(Accessibility Regulations, 2018)
References
1. Net Ninja Tutorials Flex-box [online]
<https://www.youtube.com/watch?v=ux4h6pejCSM&index=2&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG> [Accessed October 1 2017]
1. Net Ninja Text Columns tutorial [online]
<https://www.youtube.com/watch?v=W77geg_3B5o&index=7&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh> [Accessed October 1 2017]
1. HTML and CSS tutorials [online] < https://www.w3schools.com>
2. [Accessed October 1 2017]
1. Accessibility Regulations [online] <https://www.w3.org/TR/WCAG20/ > [Accessed April 1 2018]
1. JavaScript module 2017-2018 Birkbeck, University of London – John Coumbe presentation [online] <https://moodle.bbk.ac.uk/course/view.php?id=22899> [Accessed April 15 2018]
1. A complete guide to Flex-Box [online] <https://css-tricks.com/snippets/css/a-guide-to-flexbox/> [Accessed April 21 2018]
1. CSS @media rule [online] <https://www.w3schools.com/cssref/css3_pr_mediaquery.asp > [Accessed April 20 2018]
1. Web Development and User Experience Assignment [online]
< https://drive.google.com/open?id=12kejRS8FZ39nrHHL3zvsLeVcOATX2_5T> [Accessed April 10 2018]
1. Form Mail [online] < https://www.tectite.com/ > [Accessed January 2018]
1. Share This Plug-in [online] < Sharethis.com> [Accessed March 25 2018]
1.  Light Slider [online]< http://sachinchoolur.github.io/lightslider/index.html > [Accessed April 10 2018]
1. SSIs [online]< https://en.wikipedia.org/wiki/SQL_Server_Integration_Services > [Accessed April 20 2018]
1. Facebook Developer [online]<https://developers.facebook.com/docs/plugins/page-plugin> [Accessed April 15 2018]
1. Twitter [online]<https://dev.twitter.com/web/javascript/loading> [Accessed April 10 2018]
 
Share this: Facebook Twitter Reddit LinkedIn WhatsApp