Objective 106.01 Explain concepts used to create...
Transcript of Objective 106.01 Explain concepts used to create...
![Page 1: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/1.jpg)
Objective 106.01 Explain concepts used to create websites.
![Page 2: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/2.jpg)
WEB DESIGNo The different areas of web design include: • Web graphic design • User interface design • Authoring (including standardized code and
proprietary software) • User experience design (web accessibility
guidelines) • Search engine optimization
2
![Page 3: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/3.jpg)
EFFECTIVE WEB DESIGNo Web design encompasses many different skills
and disciplines in the production and maintenance of websites.
o Can be relatively simple using text-based coding or complex using professional software.
o Use GUI (graphical user interface) such as buttons and image maps to allow users to interact with the site and access information quickly.
o Use web accessibility guidelines to allow users with disabilities to interact with the site.
3
![Page 4: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/4.jpg)
WEB DESIGN PRINCIPLESo Purpose – Focus is on the needs of the users. o Communication – Users want to locate
content quickly. Use headings, bullets and concise text.
o Typography – Choose readable, web-friendly fonts and apply typography guidelines regarding spacing and size.
o Colors – Choose web-safe colors appropriate for the page. Contrasting text and background color makes reading easier. Use white space effectively.
4
![Page 5: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/5.jpg)
WEB DESIGN PRINCIPLESo Images – Use high quality photos,
infographics, videos and illustrations. o Navigation – Follow three-click rule. Use
consistent and logical navigation bar, buttons, and links.
o Page Layout – Use grid based content in columns, sections, or tables consistent across all pages. Keep aligned and balanced.
o Reading Pattern – Keep content at top and to left of page.
5
![Page 6: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/6.jpg)
WEB DESIGN PRINCIPLESo Load Time – Don’t lose the user by forcing
them to wait for content. Be careful of background images and optimize images and video for web use.
o Mobile Friendly – Make sure to consider mobile devices with smaller screen sizes when designing the site.
6
![Page 7: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/7.jpg)
QUESTIONS TO CONSIDERo What makes a website hard to see on your
phone? o Why do some websites look different if you
open them on your phone vs. a computer? o Why is it increasingly important to develop
websites that can be viewed on a phone?
7
![Page 8: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/8.jpg)
BASIC COMPONENTS OF A WEBSITEPage Layout o A way of organizing
information on a web page; ensures the information on a page can be easily located.
Navigation
o The method by which a user accesses all the pages and information on a website; should be easy to understand and use effectively.
8
![Page 9: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/9.jpg)
BASIC COMPONENTS OF A WEBSITEHyperlinks (Links) o Clickable connections
that link text or images to other pages of the website, out to external websites, or to files posted on a website.
Content
o All of the information (text), images, and other multimedia that are contained within the pages of a website.
9
![Page 10: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/10.jpg)
BROWSER VS SEARCH ENGINEGoogle Chrome Google Search
10
![Page 11: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/11.jpg)
INTERNET BROWSERSo Computer programs that read & interpret
code to display a web page to the user. o Examples of browsers include: • Chrome • Safari • Internet Explorer • Mozilla Firefox
11
![Page 12: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/12.jpg)
QUESTIONS TO CONSIDERo Where do you normally see/use these web
browsers? o If you have a choice, should you use one over
the other?
12
![Page 13: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/13.jpg)
INTERNET TERMSUniform Resource Locator (URL) o The specific address of
a page on the Internet.
File Transfer Protocol (FTP)
o Method by which data and files are transferred over the Internet.
13
![Page 14: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/14.jpg)
SEARCH ENGINESo Websites that organize and retrieve
information located on the Internet. o Examples of search engines include: • Google • MSN • Bing • Yahoo
14
![Page 15: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/15.jpg)
SEARCH ENGINESo The process of maximizing the number of
visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.
o Involves designing websites with the intention of helping search engines best discover, organize, and retrieve information.
15
![Page 16: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/16.jpg)
QUESTIONS TO CONSIDERo What is your favorite search engine? o Why do you like it? Where do you use it?
16
![Page 17: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/17.jpg)
STEPS TO SEOo Create page titles. Keyword-based titles help
establish page theme. o Create meta tags. Meta description tags can
influence click-throughs. o Place strategic search phrases on pages.
Integrate selected keywords into your website source code and existing content on designated pages.
o Develop new sitemaps for Google and Bing. Make it easier for search engines to index your website.
17
![Page 18: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/18.jpg)
ADVANCED SEO TERMSWeb Crawlers (Spiders) o Computer programs
that “crawl” through the pages of a website to find tags, keywords, and other information.
Page Ranking
o A determination of how easy it is to find a website through search engines; the higher the ranking, the more traffic the website will have.
18
![Page 19: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/19.jpg)
ADVANCED SEO TERMSTags o Could be page titles,
paragraph titles, image tags, or even meta tags that are hidden in the code of a website; help search engines find and organize the information on a website.
Keywords
o User-defined words or phrases that help a search engine’s algorithms select a group of words that can be searched to find your website.
19
![Page 20: Objective 106.01 Explain concepts used to create websites.wpetty.weebly.com/uploads/1/1/3/2/11327658/dm10601sm18.pdf · 2018-08-04 · WEB DESIGN PRINCIPLES o Images – Use high](https://reader034.fdocuments.in/reader034/viewer/2022043022/5f3e65f4d95d1715a76d8abc/html5/thumbnails/20.jpg)
QUESTIONS TO CONSIDERo What are some internal tags (keywords) that
would help make these websites easier for search engines to find? (raise their SEO) • Fancy Dog Treat Bakery • Vintage Grape Soda Company • Environmentally-Minded Clothing Store • Digital Media Student Portfolio
20