1 / 76

Web Design I

Web Design I. Technical Slides. Internet. Friend or Foe. What is the Internet?. A single computer A Network connects workstations to a Server Servers File and Print Application Web A Local Area Network (LAN) A Wide Area Network (WAN) A network of networks. How did the Internet start?.

cai
Download Presentation

Web Design I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design I Technical Slides

  2. Internet Friend or Foe

  3. What is the Internet? • A single computer • A Network connects workstations to a Server • Servers • File and Print • Application • Web • A Local Area Network (LAN) • A Wide Area Network (WAN) • A network of networks Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  4. How did the Internet start? • Advanced Research Projects Agency Network, was started in the 1960's by the U.S. Defense Department. ARPANet is the predecessor to the Internet. • De-centralized • No single network administrator • Runs on TCP/IP Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  5. Network Interface Layer Physical Datalink Network Layer Internet Protocol (IP) Transport Layer Transfer Control Protocol (TCP) Application Layer Presentation Session Application Network Models Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  6. HTTP • HTTPHypertext Transfer Protocol • Hyperlink • Hypertext Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  7. Internet Protocols • HTTP (Port 80) • HTTPS (Port 433) • E-mail (Port 25) • FTPFile Transfer Protocol (Port 21) • Gopher (Port 70) • RTSPReal Time Stream Control Protocol (Port 554) • Telnet (Port 23) Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  8. ASCII/HTML • ASCIIAmerican Standard Code for Information Interchange • HTMLHypertext Markup Language Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  9. XHTML and XML • XHTMLExtensible HTML • XMLExtensible Markup Language Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  10. Internet Explorer Firefox Netscape Safari Opera AOL Google?!??! Source:http://www.w3schools.com/browsers/browsers_stats.asp The Web Browser Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  11. Browser plug-ins • Adobe Flash • Adobe Acrobat • Adobe Shockwave • Apple QuickTime • Microsoft SilverLight • Real Player • Sun Java Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  12. Music • Ghetto Gospel, by Tupac Shakur, is inspired by which Elton John / Bernie Taupin song? Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  13. Music • Ghetto Gospel, by Tupac Shakur, is inspired by which Elton John / Bernie Taupin song? • Indian Sunset • From Mad Man Across the Water Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  14. XHTML Extensible Formatting Language of the Web

  15. What Happened to HTML • eXtensible Hypertext Markup Language • Combines of HTML and XML • XHTML is an adopted standard • Support is universal among current browsers • Allows support for mobile devices • More strict code formatting than HTML Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  16. Example Page • This is how a basic XHTML page is displayed in Internet Explorer • Looks like anyHTML page Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  17. Viewing Source • Click on View, Source Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  18. XHTML Source Code • This is the information that causes the page to be rendered Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  19. XHTML Structure All XHTML documents have two sections HeadThis information is not seen on the web page Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  20. XHTML Structure • BodyThis information is displayed on the web page Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  21. XHTML Tags Tags are denoted and surrounded by the less-than and greater-than signs < > Tags MUST be lowercase Tags may have attributes Attributes may have a value Attribute values MUST always be enclosed in double-quotation marks " " (not “”) Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  22. Attributes are separated by a single space Some tags have opening and closing tags Closing tags are denotes by the preceding forward slash / in the tagExample: </body> Tags that do not have a separate closing tag are closed with a forward slash before the closing greater-than signExample: <br /> XHTML Tags Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  23. XHTML Tags • Nested tags MUST be closed in the opposite order in which they were opened • Example:<td><div>Content</div></td> Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  24. Astronomy • How many planets are in our solar system? Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  25. Astronomy • How many planets are in our solar system? • Eight. Pluto was demoted in August 2006 by the International Astronomical Union. Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  26. Definitions Let’s Get on the Same Page

  27. Definitions Computer Stuff

  28. Client, Workstation • A single computer on the network • Web site visitor • Customer Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  29. Server • A computer provides services to a network • Common types of servers • Web • File and Print • Application • Authentication Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  30. Credentials • Username, I.D., Logon Name • Password Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  31. WebDAV • Web-based Distributed Authoring and Versioning • It is a set of extensions to the HTTP protocol which allows users to collaboratively edit and manage files on remote web servers • Using HTTPS, is more secure than FTP Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  32. FTP • File Transfer Protocol • Universal • Less secure than WebDAV • Comes in FTPS flavor which encrypts transmission Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  33. Definitions Browser Stuff

  34. Title Bar Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  35. Browser Window Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  36. Status Bar Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  37. URL • Uniform Resource Locator • Uniform Resource Indicator (URI) • Address • Web Address http://www.WebDesignSB.com/Information/MAT153/ Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  38. Domain • In the web address:http://www.WebDesignSB.com/information/MAT153/ • WebDesignSB.comis the Domain Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  39. Definitions Graphic Stuff

  40. Alias, Anti-Alias • Alias is an abrupt change between two colors in an image • Anti-Alias is a smooth change between two colors in an image Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  41. JPEG • Joint Photographic Experts Group • Millions of Colors • Lossy Compression • One of two Web-Ready image formats Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  42. GIF • Graphics Interchange Format • 256 Indexed Color • Loss-less Compression • Transparency • Animation • One of two Web-Ready image formats Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  43. PNG • Portable Network Graphics • Millions of colors • Loss-less compression • Rapidly gaining acceptance • Not universal enough yet to recommend Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  44. Flat Color • A single smooth expanse of a single color Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  45. Dither • The combining of several colors in an image to trick the eye into seeing a single color that is other than the colors in the image Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  46. Feather-Edged • A smooth or fuzzy transition between two composited images or an image and the background • Opposite of Hard-Edged Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  47. Hard-Edged • A sharp distinct transition between a composited image and the background or another image Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  48. Raster, Rasterize • Raster is a bit map image • Each pixel in the image is stored as a byte of information • The number of bits in the byte determines the color depth Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  49. Vector • Images that are represented by points and lines, rather than by individual pixel values • Vector image file size a generally very small as compared to Raster images • Flash uses vector images toanimate quickly with a relatively small file size Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

  50. Web-Safe Color • Also know as Browser-Safe colors • One of 216 colors that are a part of the color pallets of Mac/OS, Unix and Windows • Not really an issue any more! Scott Nelson, Instructor SANelson@Pipeline.SBCC.Edu

More Related