Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
History of intermet ppt uls
History of intermet ppt uls
Wird geladen in …3
×

Hier ansehen

1 von 64 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (19)

Ähnlich wie Chapter 1 (20)

Anzeige

Aktuellste (20)

Anzeige

Chapter 1

  1. 1. HOW THE WEB WORKS BY: MA. ALIZA S. LOMUGDANG
  2. 2. OUTLINE  Basic Concepts and History of Internet  Internet vs the Web  Web Browser  Web Server  Web Page Addresses (URL’s)  Anatomy of Web Page  Website Storyboarding  Web Standards and standard bodies including the World Wide Web Consurtium.
  3. 3. OBJECTIVES  Identify the basic concepts about website development  Understand the fundamentals of how the web works  Differentiate between a web server, a website, a web page, and a home page. Plan and design a website.  Describe the structure of the World Wide Web as interconnected hypertext documents.  Discuss Web standards and standard bodies including the World Wide Web Consortium. (W3C).
  4. 4. CHAPTER 1 HOW THE WEB WORKS
  5. 5. Lesson 1 BASIC CONCEPTS AND HISTORY OF INTERNET
  6. 6. WHAT IS INTERNET? The internet is made up of millions of computers linked together around the world in such a way that information can be sent from any computer to any other 24 hours a day. These computers can be in homes, schools, universities, government departments, or businesses small and large. They can be any type of computer and be single personal computers or workstations on a school or a company network. The internet is often described as 'a network of networks' because all the smaller networks of organizations are linked together into the one giant network called the internet. All computers are pretty much equal once connected to the internet; the only difference will be the speed of the connection which is dependent on your Internet Service Provider and your own modem.
  7. 7. WHAT DO YOU USE FOR INTERNET? There are so many things you can do and participate in once connected to the internet. They include using a range of services to communicate and share information and things quickly and inexpensively with tens of millions of people, both young and old and from diverse cultures around the world. For example:  You'll be able to keep in touch and send things to colleagues and friends using electronic mail, internet telephone, keyboard chat and video conferencing.  You can also tap into thousands of databases, libraries and newsgroups around the world to gather information on any topics of interest for work or recreation. The information can be in the form of text, pictures or even video material.  This means you can stay up to date with news, sports, weather and any current affairs around the world with information updated daily, hourly or instantly.  You can also locate and download computer software and other products that are available in cyberspace  You can listen to sounds and music, and watch digital movies  There are also a growing number of interactive multimedia games and educational tools. And as well as using the Internet for receiving things you will be able to publish information about your development work experiences, community, school, hobbies or interests.
  8. 8. HISTORY OF INTERNET The Internet started in the 1960’s as a way for government researchers to share information. Computers in the '60s were large and immobile and in order to make use of information stored in any one computer, one had to either travel to the site of the computer or have magnetic computer tapes sent through the conventional postal system. Another catalyst in the formation of the Internet was the heating up of the Cold War. The Soviet Union's launch of the Sputnik satellite spurred the U.S. Defense Department to consider ways information could still be disseminated even after a nuclear attack. This eventually led to the formation of the ARPANET (Advanced Research Projects Agency Network), the network that ultimately evolved into what we now know as the Internet. ARPANET was a great success but membership was limited to certain academic and research organizations who had contracts with the Defense Department. In response to this, other networks were created to provide information sharing. January 1, 1983 is considered the official birthday of the Internet. Prior to this, the various computer networks did not have a standard way to communicate with each other. A new communications protocol was established called Transfer Control Protocol/Internetwork Protocol (TCP/IP). This allowed different kinds of computers on different networks to "talk" to each other. ARPANET and the Defense Data Network officially changed to the TCP/IP standard on January 1, 1983, hence the birth of the Internet. All networks could now be connected by a universal language.
  9. 9. The image from the left side is a scale model of the UNIVAC I (the name stood for Universal Automatic Computer) which was delivered to the Census Bureau in 1951. It weighed some 16,000 pounds, used 5,000 vacuum tubes, and could perform about 1,000 calculations per second. It was the first American commercial computer, as well as the first computer designed for business use. (Business computers like the UNIVAC processed data more slowly than the IAS-type machines, but were designed for fast input and output.) The first few sales were to government agencies, the A.C. Nielsen Company, and the Prudential Insurance Company. The first UNIVAC for business applications was installed at the General Electric Appliance Division, to do payroll, in 1954. By 1957 Remington-Rand (which had purchased the Eckert-Mauchly Computer Corporation in 1950) had sold forty-six machines.
  10. 10. Lesson 2 INTERNET VS THE WEB
  11. 11. WHAT IS INTERNET? The Internet — the name we often use interchangeably with World Wide Web — is a massive public network of networks, a labyrinth of hardwired and wireless connections between disparate drives on countless devices scattered around the world. In a sense, it is like a global computer, wherein each individual computer or server becomes just another node in one massive, distributed system.
  12. 12. WHAT IS WORLD WIDE WEB? The World Wide Web, or just “the Web” for short, is a standardized system for accessing and navigating the Internet. It isn’t the only one (email and mobile apps, for instance, do not make use of the Web to connect you to the Internet), but it is by far the most common.
  13. 13. Lesson 3 WEB BROWSER
  14. 14. WEB BROWSER A web browser, or browser for short, is a computer software application that enables a person to locate, retrieve and display content such as webpages, images, video, as well as other files on the World Wide Web.
  15. 15. EXAMPLE OF WEB BROWSER Chrome, created by internet giant Google, is the most popular browser in the USA, perceived by its computer and smartphone users as fast, secure, and reliable.  Google Chrome
  16. 16. Safari is the default on Apple computers and phones, as well as other Apple devices. It's generally considered to be an efficient browser, its slick design being in keeping with the ethos of Apple..  Apple safari
  17. 17.  Microsoft internet explorer and edge Although it has been discontinued, Internet Explorer is worthy of a mention as it was the go-to browser in the early days of the internet revolution with usage share rising to 95% in 2003. However, its relatively slow start-up speed meant that many users turned to Chrome and Firefox in the years that followed.
  18. 18.  Mozilla Firefox Unlike Chrome, Safari, Internet Explorer, and Microsoft Edge, Firefox is an open-source browser, created by community members of the Mozilla Foundation. It is perhaps the most customizable of the main browsers with many add-ons and extensions to choose from.
  19. 19.  Opera Another web browser worthy of mention is Opera, which is designed for Microsoft Windows, Android, iOS, macOS, and Linux operating systems. It has some interesting features and is generally considered to be a reliable option by many users.
  20. 20. Lesson 4 WEB SERVER
  21. 21. WEB SERVER A web server is a computer that runs websites. It's a computer program that distributes web pages as they are requisitioned. The basic objective of the web server is to store, process and deliver web pages to the users. This intercommunication is done using Hypertext Transfer Protocol (HTTP). These web pages are mostly static content that includes HTML documents, images, style sheets, test etc. Apart from HTTP, a web server also supports SMTP (Simple Mail transfer Protocol) and FTP (File Transfer Protocol) protocol for emailing and for file transfer and storage.
  22. 22. The main job of a web server is to display the website content. If a web server is not exposed to the public and is used internally, then it is called Intranet Server. When anyone requests for a website by adding the URL or web address on a web browsers (like Chrome or Firefox) address bar (like www.economictimes.com), the browser sends a request to the Internet for viewing the corresponding web page for that address. A Domain Name Server (DNS) converts this URL to an IP Address (For example 192.168.216.345), which in turn points to a Web Server.
  23. 23. The Web Server is requested to present the content website to the user’s browser. All websites on the Internet have a unique identifier in terms of an IP address. This Internet Protocol address is used to communicate between different servers across the Internet. These days, Apache server is the most common web server available in the market. Apache is an open source software that handles almost 70 percent of all websites available today. Most of the web-based applications use Apache as their default Web Server environment. Another web server that is generally available is Internet Information Service (IIS). IIS is owned by Microsoft.
  24. 24. EXAMPLE OF WEB BROWSER  Apache Web Server Apache is currently the most used web server in the world. Founded in 1996, it’s now maintained by the Apache Foundation. Its freeware, and compatible with Linux, Windows, FreeBSD, Mac and several other platforms.
  25. 25.  IIS Also one of the most popular web server examples. IIS belongs to Microsoft. IIS stands for Microsoft Internet Information Services. It comes with the Windows Server operating system. It’s configurable through a graphical interface.
  26. 26.  NGINX It’s one of the most popular web server software. NGINX was developed by Igor Sysoev in 2002. Also, it is not a standalone web server example. NGINX is a different example because it works as a proxy server, together with another web server application like Apache.
  27. 27.  APACHE TOMCAT Tomcat is a free web server, specialized in Java Servlets. In other words, it’s a Java container. Apache Tomcat was initially developed by Sun Microsystems, and then it was transferred to the Apache Software Foundation in 1999. By the way, Tomcat usually works under port 8080 and supports PHP, ASP.net, Perl, Python, etc.
  28. 28.  LIGHTHTTPD Lighthttpd was initially developed in 2003. Basically, it’s not a very common web server software example for public web sites on the internet. It has a big advantage: as the name says, it’s the lighter HTTP server available. It uses a very low memory, CPU and disk space.
  29. 29. Lesson 5 WEB PAGE ADDRESSES (URL’S)
  30. 30. WHAT IS WEB ADDRESSES?  The web address contains information about the location of the webpage.  It is also known as the URL (uniform resource locator).  Like the address for your home, a web address organizes information about a webpage's location in a predictable way.  This is how to break down the information using the following URL as an example: www.supremecourt.gov/opinions/12pdf/11-697_d1o2.pdf
  31. 31. Parts of Web Address or URL Structure
  32. 32. NETWORK This is a set of connected webpages. The address for the network is typically the same as the homepage of a website. Under that website will be a variety of webpages. The last part of the network address is the top level domain name. From the example: www.supremecourt.gov is the network section of the URL, and the top level domain is .gov.
  33. 33. TOP LEVEL DOMAIN This indicates the type of network, and can give you clues about the purpose/owners of a website. Websites based outside of the United States will often include a country code as part of the domain (e.g. .uk, .ca, .ng, etc.)
  34. 34. COMMON DOMAIN NAMES .com (business) .org (organization)
  35. 35. COMMON DOMAIN NAMES .edu (education) .gov (government)
  36. 36. FOLDERS & SUBFOLDERS Just like on your personal computer, a website may have a variety of folders and subfolders to organize all of the content on the website. The example on the left side has a folder called opinions that contains a subfolder of PDF documents from 2012 called 12pdf.
  37. 37. FILE NAME The last part of a web address gives the name of the individual file that displays when you go to that address. Web address often end with the file name .htm or .html, which indicates that you are looking at a regular webpage. The example address from the left side has the file name 11- 697_d1o2.pdf. Because the file name ends with .pdf, it will display a PDF document.
  38. 38. Lesson 6 ANATOMY OF A WEB PAGE
  39. 39. ANATOMY OF A WEB PAGE The Anatomy of a Web Page covers the individual elements on a page, what they're for and why you need them. To see what page formats are commonly used and to learn about responsive designs.
  40. 40. PAGE HEADER The area at the top of the page is usually referred to as the page header. On a typical page such as Microsoft or eBay, this area is between 50 and 100 pixels high. It features the company logo, perhaps a strap line and main navigation. It often includes key information or calls to action, such as a phone number, contact button or search box. This is the first thing that your visitors will see, and will be a common theme throughout your site.
  41. 41. SITE STRUCTURE You can think of a site structure as a tree diagram or a directory with nested sub folders. At the top of the structure is home, immediately below that the most important sections or topics and inside those, further sub- sections
  42. 42. MAIN NAVIGATION The main navigation is usually a horizontal row of 5-8 page links, which are either at the top of the site structure, or are the most important pages on the website. These are clearly visible and obvious, and are often highlighted when the visitor is in that section of the site. The first item is usually a link back to the Home page, although if you want to squeeze in more navigation tabs this can be removed as it's standard practice for the logo in the page header to also be a link back to the home page. With more than 8 main navigation links, a website can look cluttered.
  43. 43. SECONDARY NAVIGATION Secondary navigation refers to pages below the top level of the website, the second tier of the site structure. Unlike the main navigation, the secondary navigation changes depending on which area of the site the visitor is browsing. Secondary navigation is usually either placed directly under the main navigation, or on the left side of the screen (for larger screen sizes). When placed on the left side of the screen, secondary navigation allows the tertiary navigation to be displayed as well. Tertiary (third tier) navigation is a useful navigational aid for larger sites.
  44. 44. META TAGS Meta tags are fields which aren't displayed on the screen to visitors but are used by search engines. You can read more about meta tags and other behind-the-scenes features of websites in our blog about SEO (search engine optimisation).
  45. 45. PAGE TITLE The heading at the top your page is crucial to attract a visitor's interest. Studies have found that the vast majority of visitors will look at a web page for less than 30 seconds, so your page needs a snappy (and relevant) title to draw them in. The page title should use the HTML H1 tag because it has special significance to search engines indexing your page.
  46. 46. BREADCRUMB TRAIL A useful navigational aid, the breadcrumb trail is usually placed just below the page header and shows at a glance where the visitor is located in the site structure, e.g. Home > Blog > Anatomy of a web page. The breadcrumb trail begins at the home page and each link except the last should be clickable to take the visitor up to that section.
  47. 47. HERO IMAGES OR BANNER IMAGES These terms refer to the large images at the top of the page that grabs the visitor's attention. If you have a number of them that fade in and out automatically or that visitors can click through, this is often referred to as a carousel. Its use should be restricted to key pages such as the home page in order to maximise the effect.
  48. 48. FULL-SCREEN AND EMBEDDED VIDEOS If you have a video you want to include in a web page, the best way is to upload it to a platform like YouTube or Vimeo, then embed it in your content (YouTube and Vimeo give you the code to do this). Videos take up a lot of disk space (physical space on your website server) and bandwidth (download traffic), so you probably want to avoid hosting them on your own website. In addition, embedded videos come with players so visitors can play, pause, jump back and forward etc.
  49. 49. CONTENT WIDTH An important consideration for readability is the width of the main content of a page. Text that spans the whole page can be hard to follow, which is why newspapers use a series of narrow columns. On a web page, content wider than around 30 words can be hard for the visitor's eye to track, so we recommend breaking wide sites up into columns to make them easier to read.
  50. 50. SITE MAP A site map is a text-only list of all the pages on the website with links to each page. All our sites come with a sitemap that's automatically generated so that it's updated every time a page is added, edited or deleted through the Content Management System. Your navigation and site structure should be clear enough for visitors to easily find what they're looking for, but a site map is a good way to list everything on your website in case they're confused. You can create sitemaps in a variety of formats to submit to Google.
  51. 51. Lesson 7 WEBSITE STORYBOARDING
  52. 52. WEBSITE STORYBOARDING A storyboard is the blueprint for a web project. It is a simple, flexible tool which can be used to display the elements on a single Web page such as images, banners, navigation, graphic elements and text. It is also an excellent tool for presenting a project to clients
  53. 53. Lesson 8 WEB STANDARDS AND STANDARD BODIES INCLUDING THE WORLD WIDE WEB CONSORTIUM
  54. 54. WEB STANDARDS AND STANDARD BODIES INCLUDING THE WORLD WIDE WEB CONSORTIUM W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores that are available on any device. Although the boundaries of the platform continue to evolve, industry leaders speak nearly in unison about how HTML5 will be the cornerstone for this platform. But the full strength of the platform relies on many more technologies that W3C and its partners are creating, including CSS, SVG, WOFF, the Semantic Web stack, XML, and a variety of APIs.
  55. 55. EXAMPLE OF OPEN WEB PLATFORMS Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications (“WebApps”). This section also includes information on how to make pages accessible to people with disabilities (WCAG), to internationalize them, and make them work on mobile devices.  Web Design and Applications
  56. 56. W3C is focusing on technologies to enable Web access anywhere, anytime, using any device. This includes Web access from mobile phones and other mobile devices as well as use of Web technology in consumer electronics, printers, interactive television, and even automobiles.  Web of Devices
  57. 57.  Web Architecture Web Architecture focuses on the foundation technologies and principles which sustain the Web, including URIs and HTTP.
  58. 58.  Semantic Web In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data. Linked data are empowered by technologies such as RDF, SPARQL, OWL, and SKOS.
  59. 59.  XML Technology XML Technologies including XML, XML Namespaces, XML Schema, XSLT, Efficient XML Interchange (EXI), and other related standards.
  60. 60.  Web of Services Web of Services refers to message- based design frequently found on the Web and in enterprise software. The Web of Services is based on technologies such as HTTP, XML, SOAP, WSDL, SPARQL, and others.
  61. 61. BROWSERS AND AUTHORING TOOLS The web's usefulness and growth depends on its universality. We should be able to publish regardless of the software we use, the computer we have, the language we speak, whether we are wired or wireless, regardless of our sensory or interaction modes.
  62. 62. BROWSERS There are many types of tools that allow us to read the Web, including browsers, media players, publishing platforms, social networks, bots, aggregators, forums, and media- sharing sites.
  63. 63. AUTHORING TOOLS The Web is not a read-only medium. There are many types of tools for publishing content, including authoring tools and environments, content management systems (CMSs), social media profile pages and apps, blogging tools and sites, microblogging tools, social bookmarks, forums, and video and photo sharing and more.
  64. 64. REFERENCES  Harris, Andy (2011). HTML, XHTML, & CSS ALL-IN-ONE FOR DUMmIES 2nd Edition. Wiley Publishing, Inc.  Robins, Jennifer N.(2007). Learning Web Design 3rd Edition. O’Reilly Media, Inc.  http://www.w3schools.com  http://www.w3c.org

×