World Wide Web Workshop

World Wide Web Workshop Mary Ann Jawili

Roadmap • Examine WWW’s history • Understand how it works
• Clarify critical web terms • Demonstrate how a basic web page is made Takeaway: A greater understanding of the Web

About Me • Web Dev at Hotwire • CS BS,
USC, 2008 • Worked for Microsoft, Expedia, Hotwire • Runs and teaches at CodeEd SF

Early Computers

A Prediction? A network of such [computers], connected to one
another by wide-band communication lines [which provided] the functions of present-day libraries together with anticipated advances in information storage and retrieval and [other] symbiotic functions. —J.C.R. Licklider (1960)

Internet vs. WWW Other protocols, e.g. SMTP, FTP, SSH, etc.
HTTP (WWW)

Why the WWW? • Needed fast way to share information
• Software hard to write • HTML is easy to understand and accessible

History of WWW 1989: Tim Berners-Lee created first HTML version
1993: IETF published working draft of first “official” HTML 2004: World Wide Web Consortium created and Web 2.0 started 2007: Mobile web became popular 2012: W3C is working on HTML5

First Web Page (1991)

HOW THE WEB WORKS

Servers & Clients The Web consists of interconnected servers and
clients. Mobile phones must connect to cell phone towers and satellites, too.

Clients

Servers Computer programs that serve content. Anything can be a
server, even your computer.

Caching • Caching reduces the load time of a page.
• Browsers usually cache requested files for later reference. • When the same files are requested, browsers get them from the cache.

Browsers Browsers are programs that render content on the Web,
usually HTML. HTML or “hypertext markup language” describes the page.

Browsers

Browser Parts Browsers are made of multiple parts. Browser Rendering
Engine Javascript Engine Internet Explorer Trident Chakra Firefox Gecko *Monkey Chrome Webkit V8 Safari Webkit JavascriptCore

Browser Popularity

Mobile Web • Use of browser-based web services from handheld
mobile devices. • Increased use since 2007 thanks to phones and tablets.

Flash & HTML5 • Flash is Adobe’s propriety platform. •
Requires browser plugin • Not supported on iOS • Can only be created with Adobe software • Runs on CPU • HTML is public • Runs on all browsers, no need a plugin • Can be written with any text editor • Can offset work to GPU

Native & Web Apps • Native apps came first. •
Proprietary platforms • From App Store • Have access to other phone programs • Usually device-specific • Written in HTML • Accessible through phone’s browser • No need to download updates • Catching up to native apps

Which Is The Native App?

Responsive Design The fluid design of web pages so that
they adapt their layouts to the client’s resolution size.

LAB: CREATE A BASIC WEBSITE!

Webpage Parts Web page Content HTML CSS JavaScript

HTML • Hypertext Markup Language • HTML files contain small
markup tags. • Markup tells browser how to render the page. You can create an HTML file with a text editor!

HTML Tag Parts Tag pairs consist of “start” and “end”
tags, have content in between, and optional attributes. <tagname attribute=“value”> content </tagname> <a href=“http://www.vscpr.com”> VSCpr website </a>

HTML Basics The doctype isn't an actual tag, but it
needs to be at start at every HTML page to tell browser which version of HTML you're using (HTML5, in example below). The html tag is always the first tag in the page.

Head & Body The head contains "meta" information about the
page, information that the browser needs before rendering it. The body contains the actual content of the page.

HTML Skeleton <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title of
your page goes here</title> </head> <body> Bulk of your content here. </body> </html>

Headlines <h1>Header 1</h1> <h2>Header 2</h2> ... <h6>Header 6</h6>

Paragraphs <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>

Line Breaks <p> First line<br/> Second line<br/> Third line! </p>
Note that <br/> is closed.

Lists <ul> <li>Item 1</li> <li>Item 2</li> ... </ul>

How To Inspect Elements

Semantic Web Semantic web is use of HTML tags to
convey the meaning of the information on the page. Some semantic web practices: • Use <strong> instead of <b> • Organize navigations links into a list.

Formatted Text <em>Emphasized Info</em> <strong>Important Info!</strong> <p> <em>Emphasized</em> and <strong>important</strong>
info can be in the same paragraph. </p>

Comments, Whitespace, & Nesting  <h1>Cities I’ve visited</h1>
<ul> <li>Boise, <em>ID</em></li> <li>Miami, <em>FL</em></li> <li>Seattle, <em>WA</em></li> </ul>

Images <img src="http://vscpr.com/wp- content/themes/vscpr/images/logo.gif" alt=”VSCpr logo”> <img src="http://vscpr.com/wp- content/themes/vscpr/images/logo.gif" alt=”VSCpr
logo” height=“300px”>

Accessibility Accessibility is how available a web page is to
as many people as possible. Methods to increase accessibility: • Semantic markup • Alternative media for any multimedia • Device independence

Links <a href="http://vscpr.com">VSCpr.com</a> <a href="http://vscpr.com"><img src="http://vscpr.com/wp- content/themes/vscpr/images/logo.gif" alt=”VSCpr”></a>

Divs <div> Part 1 goes here. </div> <div> Part 2
goes there. </div>

Spans <p>This is the first paragraph in my web page.
<span>It is the introduction.</span> It doesn’t go into much detail about anything.</p>

Form Elements <form> <label>Name: <input type=“text” name=“firstName”/> </label><br/> <label>Comment:<br/> <textarea
name="delivery"></textarea> </label><br/> <button type=“submit”>Click me!</button> </form>

How To Inspect Elements

Iframes You can use HTML to embed other webpages in
your own page using an iframe element pointing at a URL: <iframe src="http://www.vscpr.com" width="500" height="300"></iframe>

Iframes: Google Calendar

Iframes: YouTube

Webpage Parts Web page Content HTML CSS JavaScript

CSS • Cascading Style Sheets • “Style sheet ”language that
styles a page • Embedded in HTML but is not HTML CSS decorates text, adds color, sets sizes, and positions elements!

CSS Parts Consists of “style rules”. Rules are made up
of “selectors” and “declarations”. selector { property: value; property: value; } body { color: yellow; background-color: black; }

CSS in HTML CSS can be embedded in HTML in
various ways. One way is to have it in a style tag inside the head tag. <html> <head> <style> body { color: yellow; background-color: black; } </style> </head>

Selectors Selectors determine which elements in the will be given
the styles inside the curly brace. Selector types: • Element • ID • Class

Selector Type: Element p { } Selects all p elements
in the page.

Selector Type: ID #header{ } Selects any element with the
id “header", e.g. <p id="header"></p> The "#" is how you tell CSS "this is an id."

Selector Type: Class An element can have only 1 id
but multiple classes. .intro { background-color: blue; } .desc { color: red; } <p class="desc intro">hi</p> <p class="desc">hi</p> <p class="intro">hi</p>

color color: red; color: #ff0000; color: rgb(255, 0, 0); body
{ color: red; }

background-color background-color: black; background-color: #000000; background-color: rgb(0,0,0); body { background-color:
yellow; } div { background-color: #FFCC00; }

font-* font-family: "Arial", sans-serif; font-size: 12px; font-style: italic; font-weight: bold;

height & width height: 300px; width: 400px;

float float: left; float: right; When you want to stop
having elements be affected by floating elements, add clear: left; or clear: right; to the first element.

border-radius -webkit-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px
20px; -webkit-border-radius: 10px; border-radius: 10px; Generated by http://css3generator.com.

text-shadow text-shadow: 2px 1px 3px #000000; filter: dropshadow(color=#000000, offx=2, offy=1);
Generated by http://css3generator.com.

background (gradient) Just go to: http://www.colorzilla.com/gradient-editor.

How To Tweak CSS

Graceful Degradation The ability of a web page to maintain
some functionality even when the browser does not fully support everything on the page. IE does not support text-shadows. IE8 does not support gradients or border-radius.

Progressive Enhancement The belief that web sites should create a
basic level of user experience for all browsers, and then add advanced functionality for browsers that can use it. IE does not support text-shadows. IE8 does not support gradients or border-radius.

CSS in HTML Can put CSS in its own file
and link to it in the head section of the HTML. <head> <link rel="stylesheet" type="text/css" href="main.css"> </head>

Webpage Parts Web page Content HTML CSS Javascript

JavaScript • A scripting language that adds interactivity to web
pages. • Embedded in HTML but is not HTML JavaScript makes your page more engaging by reacting to events from the user.

JavaScript in HTML JavaScript can be embedded in HTML in
various ways. One way is to assign it to individual elements. <button onclick=“alert(‘Hello!’)”/>

onclick & alert <tagname onclick=“…”>…</tagname> alert(‘…’); <button onclick=“alert(‘Thanks!);”>Click me!</button>

[element].innerHTML <p id="greeting"></p> <input type="text" id="firstNameField"/> <button onclick="document.getElementById('greeting').in nerHTML =
'Hi ' + document.getElementById('firstNameField').value + '!';">Click me!</button>

document.write <button onclick="document.write('Clear!')">Click me!</button>

Progressive Enhancement The belief that web sites should create a
basic level of user experience for all browsers, and then add advanced functionality for browsers that can use it. Gmail has a separate view for browsers with JavaScript turned off.

LEARN MORE

Resources Reference • CSS Mastery – by Andy Budd •
DOM Scripting – by Jeremy Keith • W3C (www.w3c.org) Tutorials • Code Academy (www.codeacademy.com)

Q & A Mary Ann Jawili [email protected]

World Wide Web Workshop

World Wide Web Workshop

Other Decks in Technology

Featured

Transcript