Introduction The new VisitKolding events website consists of four pages. The site is responsive. EthanMarcotte defines Responsivedesign as a way ofachieving flexible layouts of a website which are accessible in all kind of screen sizes (EthanMarcotte, 2011, 107). Thewebsite has been designed using the w3.css framework. W3.
CSS isa modern CSS framework with built-in responsiveness: Smaller and faster than any other CSS framework.The website has four events and allare factual. Upon click, the user is directed to a new page with detailedinformation about the event.The website is optimised for searchengines to crawl inside and fetch data for easy accessibility. This has beendone by the use of microdata and Meta tags.
Besides the website has an externalXML file which has also been hand coded for the purposes of a user to be ableto subscribe to events as they get posted by an administrator. The code forthis project will be available in the appendix. Therefore, full functionalityof the product is limited.
In addition, I will avail all screenshots of theproduct plus the validation of each page.In addition, the website has also anidentifiable favicon on the browser for easy recognition.Lastly all the code is available inthe appendix section.By: 451015 Question 1: I have created this website usingthe w3.
css framework. I chose to use the framework because of its easyimplementation and workflow. The finalproduct is a 5-page responsive website: The index page and four factual eventshappening in Kolding. The front page gives an overview ofthe upcoming events and the basic information at first glance for the user todecide which one is appealing. Upon a click, the user is directed to a pagewhere detailed information is available. On scrolling down, a user will also see recommended events within theregion of Kolding.The responsiveness of the websiteis happening with the aid of “Media Queries” in the CSS.
Media queries are CSS features whichenable webpages to adapt to different screen sizesand resolutions. They are vital elements in responsive web design and they are used to customize the appearanceof websites for multiple devices.I have customized the website witha font library powered by Google. “GoogleFonts”. I have chosen a font referred to as ‘TitilliumWeb’ for its easy readability and simplicity design. Besides I have also used”Font Awesome”, a library of web iconsthat can be customized with CSS. Font awesome is a good alternativecompared to creating jpeg icons which might end up slowing the loading timewhen a website is accessed. I have also implemented a “Favicon”and a favicon code right after the title.
The Favicon is a very tiny image 16X16 pixelswith a transparent background. They are mostly used for identification purposesof a website on the browser. The following are screenshots ofthe proposed Visit Kolding Events website. Question 2 This website has been optimised so that Google search enginescan understand what is contained in this webpage. That said, Ihave a few factors Ihave considered to demonstrate how this website can be found online.1. Linkbuilding – This is the process of acquiring hyperlinks from otherwebsites to your own.
(Paddy Moogan, 2014, 3). Once search engines have crawled into pages on the web, they canextract the content of those pages and add it to their indexes. In this way,they can decide if they feel a page is of sufficient quality to be ranked wellfor relevant keywords. I have linked several links in the Visit KoldingEvents webpage and that increases the chances of the website to be seen andappear in search engines because of the internal link structure.
2. METAtags – Meta tags provide detailedinformation about a webpage thus helping search engines to crawl intowebsites and fetch information to help providing search engines withinformation about this site. I have 3 main META tags in thearea namely: ·
In this case its Visit Kolding.These three main tags give Google a basicinformation of what your product is and further helps users and Google robotsto crawl in and see what your website is all about.3. Schema.org – Structured Data – Fromthe definition of the word itself, structure is defined as anything that hasbeen put together in an organized manner. Therefore, structured data is asystem that pairs up a name with a value that helps search engines categorizeand index content.
Schema.org onthe other hand, is a project that provides a particular set of agreed-upondefinitions for microdata tags. It cameinto being after Google, Bing and Yahoo teamed up to help users provide vitalinformation for search engines to understand content and provide optimalresults. The drivingfactor in the design of Schema.org was to make it easy for webmasters topublish their data. (R.
V Guha, Dan Brickley and SteveMacbeth, 2015, 11)4. Microdata – These are set of tags introduced by HTML5 and they helpin specifically identifying an event, place, person or even a video. Some ofthe tags used in the proposed VisitKolding Events webpage include “event-title”,”event-date”, “event-title”, “streetAddress”,”addressLocality”, “addressRegion”, “postalCode” and so on. All these canhelp google narrow down the search and give users specific results because ofinformation specification. Note Fig 04 below. Fig04: This shows how the proposed Visit Kolding website has been marked byMicrodataBut isn’t Meta Data the same as Microdata? Welllet’s take an example of a local supermarket. Metadata will tell the customerswhere you are located and the name of your shop where as microdata will be noworganising cluttered products with labels to help customers move around andidentify their products quick and fast when they come to the shop. UserScenario Camillais 27 years old.
She lives in Kolding and she is a very outgoing person. She isan avid smartphone user and always on social media when she is free from workand friends. While on a bus headed home she overlooks a poster of an event thatteases her curiosity. Since the bus was moving, Camilla was not in a positionto read all the details but all she could remember was the cost and type of theevent. She quickly reaches to her pocket and removes her smartphone and searchesfor the event. She remembers to add extra parameters in her search and in ashort while she bumps into the event website under google search.Thewebsite being responsive, makes it easier for Camilla to read further and sheends up purchasing the exhibition tickets.
Thisscenario shows us how this microdata information is important towardsavailability of information online, besides the adaptability of the webpage ondevices. Question3: There are several ways in whichcontent can be accessed by users with all forms of disabilities on the proposedVisit Kolding Events website. The firstplace to begin would be to gather data from the municipality and understand thedifferent ailments that are available within the said area. Then the sameinformation would be used by the developers and implement diverse solutions tocater for the masses. The website can be customized in manydifferent ways to cater for the needs of a diverse group of people withdisabilities.
Blindness, hearing problems, no limbs, chronic pain in the limbs,colour blindness, deaf and even the most common one poor eye sight. I shalldiscuss a few of the disabilities below and also show how I can overcome suchchallenges with code towards implementing them in the system. The code will be available in the appendixsection.
1. Colour blindness – Content in this website can bepresented in a manner where there is a button changing to a differentbackground colour that the user is comfortable using. 2. Eyesight issues or slight blindness – This challenge can be solved by having twobuttons. One button for reducing the font size and the other one forincreasing. 3. Deafness – This challenge can be solvedby making sure that all videos in the website have subtitles so that the personcan also feel accommodated.4.
Blindness – This could be solved fromour end by having a screen reader that would read all text while the user isaccessing the webpage. The user on the other hand would need a specifichardware (in braille) to be able to interact with our product. With the two inplace then the blind user would conduct all.
Question 4 Really SimpleSyndication best known as RSS. It is a way a user can stay up to date witheverything on the internet. Users are updated regularly with updates on theirsubscribed topics via computer, apps. I havecreated and validated an XML (eXtensibleMarkup Language) I tested it in an online server and it passed as a validfeed. In this project, the XML file will be delivered as code therefore fullfunctionality is limited.In thewebsite, I have linked the XML file to a RSS icon on the footer and upon clickit opens up the file on a new browser.
Since this is a small website, I will beupdating the feed manually and should there arise the need of frequent updatesthen I might consider using third parties which publish updates within minutes. Fig 06: Note the name on fig 05 and the name of the title in fig 06 Fig05: I furtherregistered to an RSS aggregation service so as to test whether my feed workswell and since I don’t have any updated event, I got a notification “Found no items” I could see that it’sworking because it’s showing me name of my XML
Validation Furtherwork I overcame a challenge and Ihope to get to the bottom of it soon. Upon testing structured code, I kept ongetting warnings to rectify my code. The figure below illustrates the warningin orange colour.