Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Digital Media Week 08, 2010 SM1001 Digital Media, Semester A School of Creative Media © A Brief Review: Design For Web Plethora of Factors Many Variables Mix display platforms, e.g., CRT, LCD, projector, iphone, Android, etc. Content must be transformed by a software at the viewing time (e.g., Using a Web browser to display a Website). These factors cause differences in the final product and challenges in design. Design for the Web Variables include: • • • • • • User’s display’s screen resolution (e.g., 800x600); Display device’s color gamut (color range); Display device’s actual size (e.g., 15”, 17”); Available fonts (discussed in details later); Available plug-ins (discussed later); Internet bandwidth (how fast the user can download content, discussed later); • Browser version and compatibility (discussed later). SM1001: Week 8, 2010 Designing for the Web Part II A basic introduction to the Web design Variable: Connection Speed This variable affects every single user on the Internet! No matter if you make sure you use common fonts, or don’t require uncommon plug-ins, this factor still affects your site. Everyone must connect to the Internet. Different technologies provide different bandwidths (like the lanes on a highway). Bit or Byte? Filesize (how big a file is on your computer) is usually measured in units of byte (B), e.g "kilobytes," "megabytes," and "gigabytes." • 1 KB (one KiloByte) = 1,024 Bytes (approximately 1 thousand Bytes) • 1 MB (one MegaByte) = 1,024 KB (approximately 1 million Bytes) • 1 GB (one GigaByte) = 1,024 MB (approximately 1 billion Bytes) Bit or Byte? Data transfer speed on the other hand is expressed in bits (b). Exampls: 1 kbps = 1,024 bit per second 1 Mbps = 1,024 Kb per second. 1 Gbps = 1,024 Mb per second. Example: Download speed Download speed in KB = 124KB/sec Download speed in Kb = 124K * 8 b/sec = 992 Kb/sec or 992 Kbps Download speed in Kb = 992Kb/sec What is your internet speed? http://www.speedtest.net Website for Mobile Device (save bandwidth) • http://m.facebook.com • http://hk.m.yahoo.com • http://www.openrice.com/mobile What is your internet speed? Speeds of mobile technologies GSM Modem 9.6 – 14kb/s but typically 9.6kb/s too slow for web browsing GPRS 56 – 114kb/s but typically about 33kb/s similar to dial-up modem speeds for PCs, suitable for web browsing EDGE 2.5G 236 Kb/s 3G 384kb/s but typically about 144kb/s less than typical ADSL broadband speeds for PCs but adequate for streaming music and video (under ideal conditions) 3.5G HSDPA 1.8Mb.s ~ 7.2 Mb/s 802.11b (WiFi) 11 Mb/s (11000kb/s) – typically 4 Mb/s connection between base station and handset/laptop 802.11g (WiFi) 56 Mb/s (56000kb/s) – typically closer to the same speeds as 802.11b 802.11n (WiFi) or 802.16 (WiMax) 70 Mb/s (70000kb/s) – over much wider distances than WiFi iPad: Wifi + 3G SmarTone: 3G vs Wifi PCCW: 3G vs Wifi Connection Speed A lot of the Internet users are still using 56K modems. 56K = 56 kilobits = 56, 000 bits. Remember, • 1 byte = 8 bits • 56000bits/8 = 7000 bytes = 7 KB • At the most, it downloads at 7KB per second. Connection Speed Most users will not wait any more than 10 seconds for a site to load. On a 56K modem, a site that is only 70KB will take over 10 seconds to load completely. Unlike print, the web requires a minimalist design strategy where less is more. Loading…. Optimizing download Speed Use repetition to reduce file size (Download one file, use many times) • Use the same graphics on different pages when possible. Include graphics only when necessary. Try surfing the Internet on slower modems or mobile devices such as 28.8KBps, 33.6KBps, etc. to get a good feeling of the typical modem user, mobile/3G user, wifi user. Variables – Internet Browsers An Internet/Web Browser is like a window into the World Wide Web (WWW). Most users today use Microsoft’s Internet Explorer (IE). In fact, there are many other browsers available that are much better (personal preference) and more safe to use than IE. Internet Browsers Mozilla ---------------Mozilla Firefox -----------Opera ------------------------------Netscape -----------------------------------Safari (Mac only) --------------------Google Chrome And many more! Internet Browsers Similar to plug-ins, other than the different available Internet Browsers, each browser has different version numbers. Sometimes when you look at a site using IE 8, IE7, Firefox 3.6, or Firefox 3.5, they will look different. This means that you have to not only test out on different browsers, but also different versions of the same browser Versions of Internet Browsers Internet Explorer 7 Versions of Internet Browsers Internet Explorer 8 Versions of Internet Browsers Internet Explorer 7 Internet Explorer 8 Different Internet Browsers IE 8 Firefox 3.6 Safari 5.0 OSX Essential tools for optimizing the website appearance http://cross-browser.appspot.com/ is a site that enables you to test your web-pages in commonly available and popular Browser-environments. Result Quality Web design Design for Internet Browsers The hardest part of Web design is trying to make a website compatible with every browser and user. Due to all the different variables, Web design should be fluid and optimized. We review the key concepts for quality Web design. Quality Web Design Fluid interfaces grow with the user. Some designers, however, prefer fixed interfaces. 17”, 800 x 600 17”, 1024 x 768 Quality Web Design Using common fonts means the user sees what you want them to see: Most users don’t have this font so they won’t be able to see it This is a common font so a user should have no problem seeing it Quality Web Design Understand the plug-ins required so users are not left out. Users who have the correct version of the plug-in required can see the site Users who have the wrong version or don’t have the plug-in see nothing Quality Web Design Understand that different browsers may render the same site differently. Firefox 3.6 Safari 5.0 OSX SM1001: Week 8, 2010 Designing for the Web Part III A basic introduction to the Web design The World Wide Web Accessing cross-referenced documents, known as hypertext linking, is probably the most important aspect of the Web because it allows you to quickly open other Web pages A document on the Web is called a Web page, identified by a unique address called the Uniform Resource Locator, or URL URL commonly referred to as a Web address The World Wide Web A Web site refers to the location on the Internet of the Web pages and related files (such as graphic files) that belong to a company, organization, or individual Website Example Sitemap The World Wide Web A hyperlink, contains a reference to a specific Web page that you can click to quickly open that Web page http://www.abc.com http://www.xyz.com What do you need to make a web? 1. 2. 3. 4. Apply a Domain Name (e.g http://www.abc.com) Find a web server (e.g sweb.cityu.edu.hk) Make website on your computer - Local Site Upload or FTP you website to the web server Remote Site Domain Name/Web Hosting Company: • • http://www.godaddy.com/ http://www.icdsoft.com/ What is a Web Server? Computer that host the web site Software that lets the computer server the site to another computer What is HTML? HTML Documents Hypertext Markup Language (HTML) is a simple language used to create the Web pages that appear on the World Wide Web A markup language is a set of characters or symbols that define a document’s logical structure or how a document should be printed or displayed Basic HTML Syntax HTML documents are text documents that contain: • formatting instructions, called tags • the text that is to be displayed on a Web page Basic HTML Syntax All HTML documents begin with <html> and end with </html> Two other important HTML tags are the <head> tag and the <body> tag Common Structure and Formatting HTML Tags Basic HTML Syntax Web Page Design Web page design refers to the visual design and creation of the documents that appear on the World Wide Web Web designer need a web development tool to develop the Website. Web Page Design Web development tools, such as • Adobe Dreamweaver, Adobe Flash…etc These are called WYSIWYG tools WYSIWYG = What You See Is What You Get. Web development tools • will do the dirty work for you, • but are unable to ensure the quality of the work. Standard: W3C In order to help set a standard for Web designers to try to follow and support, there is an organization called the World Wide Web Consortium (W3C) By following standards, Internet Browsers can be built so that the variables are minimized Learn from W3C In order to help new and inexperienced web designers learn and follow the latest Internet standards, the W3C has an online school of its own: http://www.w3schools.com/ It features tutorials for beginners as well as advanced web developers. It’s free! The Internet The Internet’s lies in the fact that no one owns it but everyone and anyone can be a part of it. It has become a necessary part of life as a vital and up-to-date knowledge base. Virtually all information is available on the Internet, it’s just a matter of whether or not you can find it. The Internet Summary When you design anything for the Web (e.g., A Website), remember that you are designing for the Web. Take into consideration all the variables that the Web involves and then think of a proper plan to tackle these issues. Your target may not be an identicallooking Web product, but an identical (intended) user experience of your Web product. Summary What is WWW, Website ? How to make a web? What is HTML document?