Introduction to Internet concepts and web publishing

Terms and Topics

• URL - Uniform Resource Locator. Represents the named location of an asset on the web. The URL contains location information ONLY; it does not indicate any other attributes of the media, such as size and type.
• HTTP - Hyper Text Transport Protocol. The main transport method for HTML/XHTML content from server to client and visa versa.
• Server - Location with a defined internet address which stores files for client consumption.
• Client - A software application that requests and displays content requested from a server. The most common form of client is a web browser.
• HTTP Headers - Hidden information sent back and forth between client and server with each piece of data sent between the two. HTTP headers provide information about what type of content the client is requesting from the server and aids the client in determining how to properly render the requested content.
• MIME Type - A piece of information commonly found in an HTTP header which identifies a specific content type. A common mime type is TEXT/HTML.
• IP Address- A unique number identifier for each computer on the internet. Always in the form xxx.xxx.xxx.xxx where xxx is a positive number between 0 and 255.
• Domain - A human readable, logical name identifying an internet location. May resolve back to one server or a group of servers that host content for client consumption.
• DNS - Domain Name System. A global internet service which maintains a database that binds IP addresses to human legible domain names.
• User Agent - A string that identifies the type of client, usually a web browser version. Detectable in a web browser client via Javascript and as part of HTTP header transactions from client to server.
• FTP - File Transfer Protocol. A simple method to add, modify, and delete files on a remote server.
• Text Editor - A software application that allows for editing of simple ASCII text files. Does not include advanced features found in specialized editors such as Adobe Dreamweaver.
• Render -  The process of taking raw scene description data and through a computer process creating a visual scene. In the case of a web browser, HTML scene data is rendered into a visual page.
• Implementation - A way of programmatically solving a problem. The solution to a problem, in the form of markup or code.
• Chrome  - The area of a web browser that does not include the rendering window. The chrome includes the navigation bar, the status bar, the window menu, and the window title.
• W3C - The World Wide Web Consortium. A standards body that ratifies and documents open web standards.
• Cloud Computing  - Refers to an application in which all or part of the application exists as a hosted web presence. Web applications such as Google Docs and desktop applications such as iTunes or Google Earth are examples of cloud computing applications.

Tools

• Chrome developer tools

Reading

• HTML & XHTML: The Definitive Guide, 6th Edition : Chapter 1. HTML, XHTML, and the World Wide Web

Notes

How content is delivered on the web

• The internet is a mix of clients and servers. Servers host information, clients retrieve and display information. Anyone can publish information when they have access to a server that can house their content.
• Every computer on the internet has an IP address. This address makes perfect sense as an efficient way to identify computers, but it is not very memorable for humans. Thus, IP addressed can be bound to a specific Domain name via a DNS server.
  • Note :Binding a domain name to an IP address can take multiple days as it has to propagate to the many DNS servers across the globe.
  • Only one person can own a domain at one particular time.
• For the most part, client applications such as web browsers do not know what kind of content they are attempting to load. Browsers must rely on clues, such as HTTP headers and file extensions, to determine what kind of content they are loading and therefore how to render it.

URLs

• URLs point to content on the web. They do not contain any information about what type of content they point to, only it's location.
  • The rest of the information is provided by the server or the document itself after it is downloaded.
• URLs are of the format : protocol://domain/path_to_resource/resource_document_name
• 9 times out of  10, the protocol will be http
  • Other protocols exists, such as mailto:, which launches the user's default email client. The structure for a mailto: URL is mailto:<address>?subject=something

Chrome developer tools

• Chrome developer tools provide insight into the internal workings of the web browser rendering engine. The developer tools allow content creators the ability to see what assets chrome is loading, how it is interpreting HTML, and how is it applying CSS.

Browsers and Web Rendering

• Web browsers transform HTML content into visual pages. Not all web browsers render HTML content the same way, however.
• Some browsers are deviants, and a web developer may choose to create different implementations for different browsers.
• For the most part, most modern browsers are capable of rendering content which adheres to W3C standards.
  • The W3C is a way that the computer industry polices itself. Since no one company, no matter how hard they try, can own the internet, there is not one central corporate authority that dictates how web content should be developed. The W3C acts as a point of agreement between parties in the computer industry.
  • In theory, if you build a browser that renders content in accordance to the W3C standards, then your browser should be able to render any page on the internet.
    • This is not the case, however, as many pages are not standards compliant.
    • If a page is not standards compliant, the browser will still attempt to render the page in a quirks mode that attempts to render regardless of any errors. This mode takes longer to render, however,  due to extensive error checking, and the display may not be what you intended.
  • Also in theory, if you develop a page that abides by W3C standards, then any browser on the planet should be able to render your content.
    • This also is not always the case. Browser developers choose to embrace standards, they are not forced to do it. Therefore, many browsers remain noncompliant with W3C standards, and will remain that way until market pressure forces them to be otherwise.

Browser Layout Engines

• Web browsers may be broken down into groupings based upon the layout engine they use. The layout engine is the rendering mechanism which a browser uses to convert HTML and CSS into a visual representation. There are four common rendering engines:
  • Trident - The engine used by Internet Explorer.
  • Gecko - The engine used for Firefox.
  • WebKit - Used by Chrome, Safari, and most mobile smart phones (iPhone, Android). WebKit is a common embedded web view option.
  • Presto - Used by the Opera browser. Licensed as an embedded browser for the Wii, for example.
• Browsers, in many cases, use different engines for JavaScript interpretation. This is why there may be differences in rendering within browsers that use the same layout engine. For example, there are differences in JavaScript interpretation between Chrome and Safari

Why use modern web standards

• Modern web standards allow more companies to act as players in the internet. Therefore, there is more competition for the ways that people access and view web content.
  • More competition generally results in more and faster innovations.
• Modern web standards allow or browser makers to build browser toward specifications, but also allows other vendors to create software that can consume web content for other purposes.
  • For example, screen readers render web content to an audible format for blind users.
• Modern standards are client, and therefore device, independent.
  • The compliant content you create can be consumed by clients on your desktop PC, and also your mobile device.
• Using standards opens the door for multiple rendering clients, and therefore helps web content expand beyond the web browser and into desktop applications.

What HTML content is

• HTML content is a form of markup that is conducive to information dissemination.
  • HTML is not a graphical descriptor, therefore it is not a replacement for PDF or other layout heavy formats.
    • This is not to say that HTML content cannot display graphics and look visually pleasing. It simply means that HTML is rendered by a browser client at the client's discretion. HTML does not dictate layout, it merely suggests it. Finer design techniques such as font kerning and even font size are mostly out of the web develop/designers absolute dictation
• It is best to first develop your content and then develop the HTML to present the content.
  • Use a content editor, such as Word, to develop the content as you would content for a book. Then, decide on the best HTML markup to display the content.
  • Use advanced word processing tools for document content editing. Most text editors and WYSIWYG editors aren't good document editors. For instance, they may lack spell check.

Modern Web Sites

• Modern web sites are generally comprised of three aspects:
  • HTML - Provides page structure and content.
  • CSS - Provides design and "look and feel" for a site.
  • JavaScript - Provides advanced interactivity.

• Most non-application sites are made up of HTML and CSS.
  • A common example is most news sites on the web.
• Some sites use all three aspects, but weight heavily on the JavaScript functionality in order to provide an application-like experience.
  • Examples are Google Mail, Google Docs, and Apple iCloud
• Other sites use an even blend of all three to present information with subtle advanced interactivity
  • Examples are Netflix and YouTube
• It is important to understand that the web browser will pull all three of these aspects together to render the view of your web page. Each aspect individually will likely hold little resemblance to the product of their combination.