Reading-notes

wire framing :

sketch of how the project will be shown to the user the first step of building a website examples : sketch a house layout,car body.

framing can be done using 2 ways :

1-draw by hand

2- using apps and tools you can choose the best approch based on emphasis and visul design

best tools for wire framing :

1- pen and paper ( cheap easy and fast)

2- uxpin ( widerange of functionality

3- wirefram.cc ( quick online version of pen and paper )

How to make your wireframe in six steps:

1. Do your research
2. Prepare your research for quick reference
3. Make sure you have your user flow mapped out
4. Draft, don’t draw. Sketch, don’t illustrate
5. Add some detail and get testing
6. Start turning your wireframes into prototypes

How to make your Wireframe Good: 3 Key Principles

1. Clarity
2. Confidence
3. Simplicity is key

remember this is the most important part for website users.

HTML

HTML is a markup language that defines the structure of your content.

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way. The main parts of our element are as follows:

The opening tag:

This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.

The closing tag:

This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.

The content:

This is the content of the element, which in this case, is just text.

The element: The opening tag, the closing tag, and the content together comprise the element.

elements can also have attributes.

An attribute should always have the following:

• A space between it and the element name (or the previous attribute, if the element already has one or more attributes).

• The attribute name followed by an equal sign.

• The attribute value wrapped by opening and closing quotation marks.

Empty elements elements with no content self closing tags.

semantics

in html semantics means the meaning or effect of the tags the attributes (even if they have the same effect ) they have no semantic meaning.

benefits from writing semantic markup are as follows:

• Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)

• Screen readers can use it as a signpost to help visually impaired users navigate a page.
• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or name spaced classes. Suggests to the developer the type of data that will be populated Semantic naming mirrors proper custom element/component naming.