Web Design S ESSION 1: WEB BASICS E M I R R A H A M A N WEB DESIGN SIDES 2017 EMIR RAHAMAN 1
The World Wide Web (WWW) An information system of interlinked hypertext documents accessible via the Internet Uses HTTP (HyperText Transfer Protocol) and HTTPS (HTTP Secure) Invented at CERN by Sir Tim Berners-Lee Proposed in 1989 Technologies developed in 1990 CERN: European Organization for Nuclear Research The WWW is one of the services available on the Internet History of the WWW https://webfoundation.org/about/vision/history-of-the-web/ TIM BERNERS-LEE WEB DESIGN SIDES 2017 EMIR RAHAMAN 2
THE FIRST WEB SERVER WEB DESIGN SIDES 2017 EMIR RAHAMAN 3
Internet Usage Statistics World population: ~ 7.5 billion Internet penetration: ~ 3.8 billion (~ 51%) Growth 2000-2017: ~ 962.5% Trinidad and Tobago: Local population: ~ 1.3 million Internet penetration: ~ 942,713 (~ 68.9%) Facebook users (2016): ~ 700,000 (~ 51.1%) Languages on the Internet: English: ~952 million Chinese: ~ 763 million Spanish: ~ 293 million Language growth 2000-2017: Chinese: over 2,000% Russian: over 3,000% Arabic: over 6,000% Source: internetworldstats.com 2017 statistics unless otherwise indicated WEB DESIGN SIDES 2017 EMIR RAHAMAN 4
Mobile vs. Desktop Browsing As of 2016, mobile devices have overtaken desktops for web browsing Implications: Smaller screens Touch-based navigation Cellular data Lack of plugin support Some notes on Adobe Flash Flash is not supported on mobile devices (and has not been for several years) Flash on the desktop requires frequent updates The product is being phased out, with 2020 announced as end of life WEB DESIGN SIDES 2017 EMIR RAHAMAN 5
http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide WEB DESIGN SIDES 2017 EMIR RAHAMAN 6
August 2017 Desktop 54.7% Mobile 36.3% Tablet 9% WEB DESIGN SIDES 2017 EMIR RAHAMAN 7
The Role of the Website Point of Contact Marketing & Sales ecommerce Entertainment Research & Education Information Dissemination Internet versus Intranet websites? WEB DESIGN SIDES 2017 EMIR RAHAMAN 8
WEB DESIGN SIDES 2017 EMIR RAHAMAN 9
Understand Your Audience What is the target demographic? What is the client s purpose? What is the client s image? What other considerations need to be made? WEB DESIGN SIDES 2017 EMIR RAHAMAN 10
Demographics SOCIOECONOMIC Age Gender Location Education Occupation/Interests Income Level TECHNICAL Screen Resolution Display Colours Connection Speed Device Type + OS Browser + Version Plugins (E.g. Flash) How might some of these demographics be determined? WEB DESIGN SIDES 2017 EMIR RAHAMAN 11
WEB DESIGN SIDES 2017 EMIR RAHAMAN 12
Design Considerations A website is visual Focal points White spaces Colour choices Typography WEB DESIGN SIDES 2017 EMIR RAHAMAN 13
Design Considerations Use intuitive layouts and navigation structures Where do users naturally expect to find navigation links? Where do users typically expect to find content? Three click rule guideline WEB DESIGN SIDES 2017 EMIR RAHAMAN 14
Use Effective Writing Do visitors really read every word? Use clear headings Make use of lists Write objectively Stay short and to the point WEB DESIGN SIDES 2017 EMIR RAHAMAN 15
WEB DESIGN SIDES 2017 EMIR RAHAMAN 16
Usability Guidelines Use familiar layouts Stick with mature, widely adopted technologies Avoid using images to display content What about mobile devices? WEB DESIGN SIDES 2017 EMIR RAHAMAN 17
Accessibility Considerations Descriptive links Table headers Alternate text Consider the blind and low vision experience: Limited vision Colour blindness Screen reader software WEB DESIGN SIDES 2017 EMIR RAHAMAN 18
World Wide Web Consortium (W3C) The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. www.w3.org September, 2014 WEB DESIGN SIDES 2017 EMIR RAHAMAN 19
WHATWG Web Hypertext Application Technology Working Group Free, open community for evolving HTML and HTML-related technologies Founded by individuals from Apple, Mozilla and Opera in response to W3C s direction with XHTML http://www.whatwg.org WEB DESIGN SIDES 2017 EMIR RAHAMAN 20
Domain Names Human friendly name corresponding to the IP address of a web server E.g. example.com 192.0.43.10 Resolved using Domain Name System (DNS) Internet Corporation for Assigned Names and Numbers (ICANN) Internet Assigned Numbers Authority (IANA) IANA delegates responsibility for top level domains (TLDs) WEB DESIGN SIDES 2017 EMIR RAHAMAN 21
Popular Top Level Domains (TLDs) Generic Domains (gtld).com (commercial).net (network).org (non-profit organization).edu (education).gov (government).mil (military).info (information) Country Specific Domains (cctld).tt.jm.us.uk.ca.au.jp WEB DESIGN SIDES 2017 EMIR RAHAMAN 22
Uniform Resource Locator (URL) Protocol Directory File name Server name or subdomain Second level domain Top level domain (TLD) File extension WEB DESIGN SIDES 2017 EMIR RAHAMAN 23
Web Servers Special purpose computers configured for hosting websites Web servers run specific web server software capable of delivering web content over a network Web content is delivered in a form the client s browser can interpret such as HyperText Markup Language (HTML) Sometimes HTML pages are generated by server-side application code before delivery to the client WEB DESIGN SIDES 2017 EMIR RAHAMAN 24
Most Popular Web Server Software Microsoft Internet Information Services (IIS) Windows servers only ~ 51% market share Apache HTTP Server Windows, Linux or Mac servers ~ 20% market share Nginx Windows, Linux or Mac servers ~ 16% market share news.netcraft.com August, 2017 WEB DESIGN SIDES 2017 EMIR RAHAMAN 25
Client-Side Languages HyperText HyperText Markup Language (HTML) extensible HyperText Markup Language (XHTML) The current standard is HTML5 Cascading Style Sheets (CSS) JavaScript (JS) WEB DESIGN SIDES 2017 EMIR RAHAMAN 26
Server-Side Languages PHP Recursive acronym (PHP Hypertext Preprocessor) Available for most major web servers ASP.NET Successor to Active Server Pages (ASP) Packaged with Microsoft IIS WEB DESIGN SIDES 2017 EMIR RAHAMAN 27
Types of Editors What You See Is What You Get (WYSIWYG) Adobe Dreamweaver Microsoft Expression Web HTML Editors (Source Code Editors) Notepad Notepad++ CoffeeCup HTML Editor WEB DESIGN SIDES 2017 EMIR RAHAMAN 28
Content Management System (CMS) Create and manage content without writing source code Delegate updates Empower clients Easily manage large numbers of pages Most popular: Joomla! Drupal WordPress WEB DESIGN SIDES 2017 EMIR RAHAMAN 29
Consider: Who are the stakeholders? Who are the visitors? What type of content will the site contain? How much content is expected? How frequently will it be updated? What is the prospective growth of the site? These questions help determine an appropriate design and whether or not a CMS should be considered. WEB DESIGN SIDES 2017 EMIR RAHAMAN 30
Web Design Resources Primary resources for this class Vodnik, HTML5 and CSS3: First Edition Illustrated Complete, Course Technology, 2012 ISBN-13: 978-1-111-52798-3 ISBN-10: 1-111-52798-9 W3Schools: www.w3schools.com Notepad++ Source Code Editor: http://notepad-plus-plus.org WEB DESIGN SIDES 2017 EMIR RAHAMAN 31