Blacklane Taxi – Website Design And Development Assignment

Organization

This report is a response to the request from the Chief Executive Officer Black Lane Taxi, Frank Wohltorf to improve the company’s website. The website was outdated and the CEO wanted a web developer to make the website responsive and put more appealing pictures to the website so that the company can be more accessible by its global customers. The report covers how the website was made responsive, how appealing photos were added, how GOOGLE fonts were used, how font awesome Cascading Style sheet toolkit was utilized to generate icons and how the pop up alert messages were implemented to make the website more appealing than it was before.

Organization of the group

Labor in the project was allocated according to the areas of specialization: one member handled Hypertext Markup Language, one handled Cascading Style sheet and another handled JavaScript used in the pop up windows. I handled Cascading Style sheet. The organization of the group to complete the project was effective and efficient. After every web page was implemented the team came together to check and correct the errors that arise and set the deadline and objectives of the next page implementation. The tests ensured little or no error propagation throughout the Black Lane Taxi website development process.  

Responsiveness of the website

Black taxi website is made to fit in the screen of any gadget phone, tablet, laptop and desktop. The <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Jin (2017) tag was added in the head tag of the web pages that are supposed to be responsive. The tag enables the responsive feature of web pages. However, other more detailed CSS codes need to be added to the external CSS file to administer complete responsiveness of the website. The following code was added to the external CSS file to ensure total responsiveness Halvorsen  (2016)  :

@media screen and (max-width: 1260px){

            body{width:1000px;}

            #container{width:500px;}

            #img{width:500px;}

}

@media screen and (max-width: 1060px){

            body{width:100%;}

            #container{width:300px; height:500px;}

            #img{width:300px; height:500px;}

}

@media screen and (max-width: 860px){

            body{width:100%;}

            #container{width:200px; height:600px;}

            #img{width:200px; height:600px;}

  Originally, when the maximum width is at 1260 pixels, the width of the website is at 1000 pixels, the container is at 500px and the image is at 500 pixels. When the maximum width of the website is at 1060 pixels, the width of the website is 100% meaning it occupies the entire screen, the container and image height and width vary proportionately. This is the same case when the maximum width is at 860 pixels.

Implementation of the Font Awesome CSS toolkit

The library enables the creation of icons in the web pages during web design. The icons get created using the following tag <i class=”fa fa-facebook”>. The Black Lane Taxi logo, which is found in every web page was created using the font awesome CSS toolkit. The social media icons in the footer division were created using the font awesome toolkit.

The output results of font awesome are as follows

 the Black Lane company logo

Responsiveness of the website

 Social media icons made by font awesome.

Implementation of GOOGLE fonts

The entire website used one GOOGLE font which is Abhaya Libre. GOOGLE fonts library was linked to the website through the link tag as followsthe font size is 18 pixels throughout the website.

All the web pages share one external cascading stylesheet which is linked inside the head tags of every web page. The external stylesheet was to ensure consistency in the color combination throughout the web pages in the Black Lane Taxi website. The following code illustrates how the external stylesheet was linked to the web pages and is with respect to Kuehner, Liu and Zhang (2013).

All the web pages were linked to style.css which styled the entire web site.

Internal stylesheet

Each web page except the index page contains its internal stylesheet which styles the web page that contains it Zakas  (2010).

JavaScript pop alert messages

In the web pages bookings and become a partner where data entry from the customer is required is where the alert messages are implemented. If the text boxes are left blank and the submit button is clicked an alert message pops saying enter value. The code for this is as follows Mengerink, Davis and Early (2013):

function required()

var empt = document.forms[“form1”][“name”].value;

if (empt == “”)

alert(“Please enter values”);

return false;

Images in the website

Images in the index page are made to slide show. This is implemented using JavaScript language. The images are named as img1 to img6 in the images folder which is in the project folder.

The code for this is as follows:

var imagecount = 1;

var total = 6;

window.setInterval(function slideA(){

            var Image = document.getElementById(‘img’);

            imagecount = imagecount + 1;

            if(imagecount > total){imagecount = 1;}

            if(imagecount < 1){imagecount = total;}

            Image.src = “images/img”+ imagecount +”.jpg”;

}, 1500);

</script>

The function slideA() is then added to the html design using onLoad=”slideA()”.

The rest of the pages contain one image which is related to the content the page depicts.

Lists

Implementation of the list starts with the index page where the menu is a list containing about us, our services, booking, contacts, become a partner and the taxi fare which are the list elements. According to Harik and Henzinger (2010), they are implemented as follows

<li><a href=”about.html”>About Us</a></li>

<li><a href=”services.html”>Our Services</a></li>

<li><a href=”booking.html”>Booking</a></li>

<li><a href=”contact.html”>Contact</a></li>

<li><a href=”partner.html”>Become Partner</a></li>

<li><a href=”fare.html”>Taxi Fare</a></li>

<li><a href=”references.html”>References</a></li>

The list is then styled using the external stylesheet to make them inline and not having the bullets they originally have. The code for this is as follows

#list > li{

display:inline-block;

list-style-type:none;

padding:25px;

list-style-type removes the bullets or the listing style and the display:inline-block; code aligns the list in a straight line.

Conclusion

With the responsive and interactive website, Black Lane Taxi company will be accessible by its global customers all over the globe. This is because customers will be able to comfortably book Black Lane Taxis for weddings, transport to and from airports, for corporate and delivery services using any gadget at the customer’s disposal. This will help improve the business and increase profits.  

Jin, K.H., 2017, September. Teaching Responsive Web Design to Novice Learners. In Proceedings of the 18th Annual Conference on Information Technology Education (pp. 115-120). ACM.

Awesome, F. and Verkkodokumentti, F.A., 2017. The iconic font and CSS toolkit.

Kuehner, R.S., Liu, J.Y.K. and Zhang, A.S., International Business Machines Corp, 2013. Framework for development and customization of web services deployment descriptors. U.S. Patent 8,572,494.

Halvorsen, H.P. (2016)  Web Programming. Responsive Website [online]. September.

Zakas, N.C., 2010. High Performance JavaScript: Build Faster Web Application Interfaces. ” O’Reilly Media, Inc.”.

Mengerink, M., Davis, J. and Early, J., eBay Inc, 2013. Method and system to display a pop-up window when a user leaves a website. U.S. Patent 8,418,078.

Harik, G.R. and Henzinger, M.H., Google Inc, 2010. Document ranking based on semantic distance between terms in a document. U.S. Patent 7,716,216.