WEB&UI Lab 1

**NB: All blogging must be your own work. There should be no copying and pasting from websites, colleagues or anywhere else.

Part I – Beginning Web Development

Create a blog to document your Web & User Interface lab work.

Use Blogger - http://blogger.com to set up your own blog. Follow their instructions to establish your blog. Send the link of your blog to andrea.f.curley@tudublin.ie (eg. yourname.blogspot.com)

Your blog will be the place where you record information from your labs (not your html code, though snippets of html maybe required).

Create a Twitter account (if you don’t have one) on http://www.twitter.com and follow dt265. To message me, put @dt265 before your message.

Read the following two articles and discuss two interesting observations from each article. (~50 words/observation – record in blog) All you need to know about mockups, wireframes, and prototypes - Wireframing vs. prototyping: What’s the difference?

https://www.invisionapp.com/inside-design/wireframe-prototype-difference/

Discuss TWO observations from this article. Wireframe is a structure of the desgin. It has no UI and displays no function. It is only lines of structures. Prototype can feature some UI and functions such as desgined Icons and buttons. It is very close to the product by the look, although it doesn’t have real functions.

The 10 Most Common Web Design Mistakes https://youtu.be/VGxze7xMYJs

Discuss TWO observations from this video. Overlays are annoying. Huge pictures are bad for landing page. Better using Icons with labels, or it will be confusing. A lot of mistakes keep coming back in decades.

Pick one term/technology from each of the article and video in 3 (one from 3a and one from 3b):

Wireframe: Tweeted By Ali Rıza Reisoğlu@Codereis1

What is wireframe? It is a design layout to represent the skeleton of a website or an application’s user interface (UI) and core functionality. What is the easiest way of doing it ? Pen and paper

Cloud Service:

Tweeted By SDxCentral News@sdxcentral

Definition: What Is a Public Cloud? The public cloud is a cloud hosted by third-party cloud service providers on hardware shared by customers or clients. Read on here.

Using Twitter: Do a search on each term, documenting information you found and where you found it from. (~50 words/technology – record in blog).

Follow three people that could provide you with information during this module. Who are they? Why did you choose them

CSS Frameworks@cssframeworks CSS-Tricks@css SitePoint JavaScript@SitePointJS

Javascript and css are harder than html and have many skills we may not be familiar with and needs daily study. CSS frameworks can speed up development.

Part II – Starting Coding

Have a read of the following website: http://www.w3schools.com/html/html_basic.asp

Use the html tool http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic to do the following exercises:

Display “Hello World” using HTML.

Use header tags (<h1>-<h6>) in this web page.

Illustrate the use of <a> (hyperlinks) in your web page.

Introduce anchors (using <a>) into this web page. In doing this use the paragraph tag <p> and the line-break tag <br/> to format your text.

If you are coding in a text editor, the starting point for your html file should be the htmltemplate file in Brightspace.

Part III – Analysing the UI (record in blog)

Analyse the following websites with regard to usability in general (from your point of view)

https://www.tudublin.ie

https://www.w3schools.com/

https://www.khanacademy.org/

Definitely khanacademy!!! Fewer buttons but all main functions.

Analyse all websites using this validator http://ready.mobi/

What did they look like?
Texts all squeezed together.

How did they score?
2/5

What are the main problems with each of the three websites?
Page weight all too large. Tu Dublin and Khan Found JavaScript inside head. W3c school DOM count is at 797, which is too high.

Analyse the all websites using this tool http://wave.webaim.org/

How accessible are each of the three websites?
Khan > TU Dublin > W3c school

What are the problems in each of the three websites?

Khan:

• Missing or uninformative page title
• Language missing or invalid

W3c:

• Missing alternative text
• Very low contrast
• Redundant link

TU Dublin:

• Empty heading
• Very low contrast
• Long alternative text
• Skipped heading level

Are there similar problems in all three?
Very low contrast.Missing or uninformative page title

2