Session #4 -- Creating Web Pages (HTML, etc.)   Previously we looked closely at site design and navigation. Now, to appreciate the difficulty of actually making a page, we'll look "under the hood."   What is HTML? - Originally, the Web was only html. (Now it is much more, which we'll get into.) - Stands for HyperText Markup Language - HTML was developed at CERN in conjunction with the Web browsers - Now it is maintained by the W3W (World Wide Web Consortium) W3C's HTML page -- http://www.w3.org/MarkUp/ - Despite what you've heard, it is NOT a programming language.   Purpose of today's session To show what HTML is and how it works. We're not going to go over every tag here, just an overview ----- Your time will be better spent learning HTML in a real-world situation--if you really want to learn it at all.   What is a markup language? - A way of "marking" or "tagging" a document - It can easily be "rendered" in a browser, which reads (but does not display) tags - Uses plain ascii text, so it is cross-platform   Original purpose - Designed for use by scientists, specifically the physicists at CERN - Intended to facilitate sharing of documents - Tagging facilitates an automated way of indexing and browsing - Originally, HTML focused more on marking the STRUCTURE of a document -- not LAYOUT or APPEARANCE   HTML becomes subverted - The Web became popular, used more for non-scientific purposes - HTML wasn't well suited for interesting layouts - Browser makers began to extend HTML with new tags, and promote them - Microsoft and Netscape became locked in a competitive cycle of upgrades, and introduced many non-compatible, non-standard tags.     HTML today - HTML, as currently implemented on the Web, is a mess. - Most sites are currently using HTML 3.2, which is a standard that tried to reconcile the new tags added by Microsoft and Netscape.   Difficulties faced by publishers - Who uses what browser? (Mac/PC, MS/NS, 3/4, Web TV, AOL, etc) - Sites have to face some tough choices * Use a "lowest comon demoninator" of tags which render in all browsers * Choose one or the other, and put a "best viewed with" sign * Program two separate versions, forcing a "click here" or browser detect   HTML tomorrow - Recently ratified by the W3C, the "next generation" of HTML is version 4.0 - Initial versions of HTML were simple--you could easily teach yourself markup in a couple hours- But the newest version of the standard, HTML 4.0 -- changes everything. - Still not unversally adopted * browsers and authoring tools will take a long time to catch up anyway * some sites are using parts of it already, some aspects are supported   HTML 4.0 -- or -- Dynamic HTML - Builds on 3.2, but adds two big components: CSS and Scripting - Three parts * HTML (refocuses on defining the structure or content of a document) * CSS (defines the layout and appearance of a site) * Scripting (adds intereractivity and functionality) - Note that HTML 4.0 actually rescinds some tags found in 3.2, although browsers will likely still support them, they won't officially be part of the standard. - We will take a closer look CSS & Scripting when we look at new technologies.   Teach yourself HTML--if you want - View Sources - Sites on the Webs - Numerous books and tutorials - Web editors have built-in help     IMAGES (Gifs vs. Jpegs)   GIFs - can only have 256 different colors. - are not compressed - can be animated (like a flip show) - can have 'transparency' - are best used for buttons, logos, line art, and illustration (where fewer colors are used)   JPEGs - can have millions of colors - can be compressed to varying degrees - can't have transparency or animation - are best used for photographic images   Graphics on the Web http://www.w3.org/Graphics/Overview.html     COLORS   Use the Browser Safe Palette - Netscape and Internet Explorer use these colors - Contain 216 colors out of a possible 256 system colors - Optimized for cross-platform (PC / Mac) use. - Used for backgrounds, fonts, buttons, line drawings or illustrations - The Browser Safe Palette should not be used to remap color photographs. (Use an adaptive palette (with no dithering,if possible)     HTML 3.2   (build a page from scratch using the images & sample text)     HTML 4.0 (CSS + JavaScript)     Dynamic HTML What it is: Combines new HTML with CSS and Scripting. Web pages gain interactivity and movement, becoming more "dynamic." Additional tags to manipulate elements on a page. (movement, fades, etc.) Pros: Better than multimedia through plug-ins / helpers All effects are hard coded into the page, not in a separate file. They are "run" on the client, without additional downloads. Cons: Pages are hugely difficult to create. Netscape and Microsoft implementations differ, making it even harder to develop pages. Examples: (Netscape examples)   Presentation: DHTML Zone http://www.dhtmlzone.com/index.html From Macromedia, maker of DreamWeaver, a great site devoted to DHMTL.   Dynamic Menus http://developer.netscape.com/library/examples/dynhtml/tree/treeDemo.html Shows how dynamic HTML can make menus work---note how advanced this is compared with the JavaScript example.   Dynamic Fonts http://www.bitstream.com/world/dynamic.htm Works similar to cascading style sheets, but the font faces themselves are downloaded.   Newsbox example http://developer.netscape.com/library/examples/dynhtml/newsbox/example.html Another example of DHTML treating page elements as objects. Compare this with the Java-based ticker.   (internet explorer examples) http://www.microsoft.com/gallery/files/html/   Resources: http://www.zdnet.com/products/htmluser/dhtmlintro.html Dynamic HTML 101 (InternetUser) Introduction   http://www.dhtmlzone.com/articles/dhtmloverview.html DHTML Zone: Creating Multimedia with Dynamic HTML: An Overview   http://www.microsoft.com/workshop/author/dhtml/dhtmlovw-f.htm Microsoft Dynamic HTML   http://developer.netscape.com/library/documentation/dynhtml.html Netscape Dynamic HTML Cascading Style Sheets (CSS) What it is: Style Sheets are a World-Wide Web consortium (W3C) standard, adopted by both major browsers in their 4.0 incarnations. Style sheets work primarily by separating style from structure. You have a single page defining all the "style" attributes of the text, and numerous pages on your site point to that style sheet. Or, style sheet information can be added to the page itself. Sample attributes include: font face, size, color, spacing, They are "cascading" because more than one style sheet can be used on the same document, with different levels of importance. Pros: They give more precise control over how documents look. In addition to simple font control, you can control positioning. Consistency: you don't have to remember that all your article titles must be 12Pt Courier Bold Brown, you just define those attributes once in a style called "ArticleTitle", and mark all article titles with that style. Global changes are more easily made. Cons: Not as easy as HTML Supported only in IE3, IE4, NS4. Difficulty in porting legacy pages over.   Examples: W3C: What Are Style Sheets http://www.w3.org/Style/#press Text and other objects can be positioned in layers.   C|Net Style-O-Matic http://www.cnet.com/Content/Builder/Authoring/CSS/ss12.html Show what font styles look like Resources: World-Wide Web Consortium (W3C): What Are Style Sheets http://www.w3.org/Style/#press   http://www.dhtmlzone.com/articles/dhtmlcss.html Dynamic HTML and Cascading Style Sheets   http://www.zdnet.com/devhead/filters/css/ DevHead: Cascading Style Sheets   http://www.cnet.com/Content/Builder/Authoring/CSS/index.html Builder.Com: Get Started with Style Sheets     JavaScript What it is: Nothing to do with Java, the programming language. A set of instructions for controlling the Web browser. Somewhat like a programming language, but far less robust. Does require programming, although not quite as simple as HTML. Tied closely with HTML. Where HTML controls text and layout, JavaScript lets users interact more. Scripts are embedded right in the page HTML, and executed on the fly. Useful for things like browser-detect, enhancing the interface. Jscript: Microsoft's version of JavaScript. (Although IE also supports some JavaScript) Also: VBScript is another Microsoft scripting (Visual Basic) that works in browsers as well as the OS. Cons: Not so easy to program. Very buggy--browsers crash a lot. Lots of bad JavaScript out there, users don't like it. Users often turn it off. Pros: Lots of examples out there--easy to cut-and-paste. Cheap/Simple way to add interactivity. Examples:   Scientific American: Rollovers http://www.sciam.com/ A popular JavaScript Trick. Works by overlaying images on top of another--really an illusion.   IBM: Menus http://www.ibm.com Similar to rollovers, but far more complicated.   I/US: Menus http://www.i-us.com/comments.htm Another menu trick…but not as well thought out   ABCNews: Quick Quiz http://www.abcnews.com/sections/science/index.html Interesting use, demonstrates how JavaScript interacts with HTML   Resources: JavaScript 101 http://www.zdnet.com/products/javascriptuser/intro.html   JavaScript User http://www.zdnet.com/products/javascriptuser.html   JavaWorld -- Beginners http://www.javaworld.com/javaworld/jw-03-1996/jw-03-javascript.intro.html   JavaScripts.Com -- Lots of sample scripts http://www.javascripts.com/index.cfm XML (Extensible Markup Language) What it is: Stands for eXtensible Markup Language. Like HTML, it is another specialized version (subset) of SGML, but more far powerful than HTML Lets the designer/author create a new markup language, extending HTML itself. Has built-in *data handling* functions. Data is downloaded with the page. New possibilities for linking (links can be multidimensional) Won't appear for quite some time, and perhaps then only in specialized industries or communities. Example: Say you wanted to publish a catalog of garden furniture.   The HTML way: create a different page for each of your dozens of products… or create a database on the server, so that each time a user chose to get a new product, there was another request and a new page downloaded.   The XML way: A single page contains all the data about all the products, but hidden from the user. As the user chose different products to view, different "data" would come into view, others would be hidden. Pages would be created on-the-fly, on the client side. Examples: See Microsoft's site below for IE4 demos. Resources: http://www.pcmag.com/pctech/content/16/19/it1619.001.html XML: A Second Chance for Web Markup (PC Magazine)   http://www.microsoft.com/xml/ Microsoft XML   http://www.w3.org/XML/ World-Wide Web Consortium XML page       Technology: Java What it is: An object-oriented programming language, currently the "lingua franca" of the Internet. It can be used to program almost everything. Java applications are sometimes called "applets" because they do one thing. Java programs are downloaded, and run on the client computer. Applications can range from simple blinking buttons, to full-fledged programs. Indeed, there are even full-blown office suites (wp,ss) written in Java, which can be "run" off a web site. Fortunately, almost all browsers and operating systems have a Java environment. Java doesn't have to live in the browser! Once a browser is installed, the computer has a "Java Virtual Machine" so applets can be downloaded and run outside the browser. Pros: No plug in Required Applications created in Java run in any Java-enable environments. Programmers don't have to worry if it is for Mac or PC. There are many "canned" applications you can buy There are numerous easy-to-use / no-programming tools for creating your Java applications Security is built-in to the language: Java applets cannot write data to your hard disk. Cons: Questionable performance--some people say that Java is slow. Download time--poorly written Java can be large Many users turn it off Programming expertise required for custom applications. Security features may limit what Java can do. Examples: The Internet Voice http://www.virtua.com/voice/ An example of using Java to gather information. The applet checks information before submitting… more robust and flexible than using forms.   American Committee for… http://www.channell.com/clients/acwis/acwis/indexc.htm Example of using Java to create a multimedia package.   Magic Buttons http://www.imint.com/magic/mb.htm Buttons can be made using other technologies, but Java adds special effects.   ABC News Ticker http://www.abcnews.com/ Scrolling text or "tickers" are favorite Java applets. ABC News has the best ticker online.   Stig's Sky Calendar http://www.geocities.com/CapeCanaveral/Hangar/7042/skycal.html This is a robust application, showing how Java can enhance the delivery of data/information.   Visual Thesaurus http://www.plumbdesign.com/thesaurus/ Shows possibilities for "fuzzy" interfaces.   Resources: Java 101 (For beginners) http://www.zdnet.com/products/javauser/intro.html   JavaUser (For everyone from beginner to advanced) http://www.zdnet.com/products/javauser.html   Gamelan http://www.gamelan.com This site is the host of numerous applets and other resources.     ActiveX   What it is: Microsoft's answer to Java--can do everything Java can do, and more. More part of Windows OS than browser. Not tied to browser Cons: Slower than Java Works only in Explorer (Or, through Netscape with a plug-in) Looser security provisions…easier for malicious programmers to wreak havoc. Pros: More part of Windows OS than browser. Applets or "ActiveX Controls" are downloaded and installed automatically. Next time you visit, no additional downloads Examples: ActiveX.com http://www.activex.com/ See the "Control Library" for numerous examples Resources: ActiveX User http://www.zdnet.com/products/activexuser.html   ActiveX.com http://www.activex.com/       CGI: Common Gateway Interface What it is: A way to add interactivity to Web pages. Not a scripting language (as many think) but a way for scripting languages to interact with a Web server. Scripts can be written in Perl, C++, etc. even server-side JavaScript. The scripts are server-side. They live on the server and are executed in server memory. (as opposed to JavaScripts run on the client side) All Web pages with Forms require a script to do something with the data. Some use client-side (JavaScript) but most use some CGI script. Pros: Lots of examples out there Fairly easy to program Cons: Server side… requires more resources, more round-trips Not as dynamic and responsive as client side options Examples: Scripts can be simple or complicated.   Example 1: simple text mailer Reader fills out a form, clicks on "submit" and the script parses the data and forwards it to a mailbox. http://www.zdnet.com/pcmag/insites/wgabout.htm   Example 2: guestbook http://www.state.wy.us/state/guest_book/guest_book.html Readers sign in   Example 3: discussion / graffiti board http://www8.zdnet.com/pcmag/insites/dvorak/jd.htm Discussion: basically, Web pages are built by reader input, and dynamically updated.     Resources: http://www.zdnet.com/products/perluser.html Perl User   http://www.cgi-resources.com/ CGI Resource Index   http://worldwidemart.com/scripts/ Matt's Script Archives   VRML: Virtual Reality Modeling Language What it is:   A three-dimensional environment, sometimes called 3-D Worlds. They can be standalone or shared. They can incorporate sound and animation. Sometimes are used as a simple interface, used as a way to navigate a site. In this scenario "real world" objects represent menu items or areas. Browsers can be "synched" so that when people click on an object a particular page loads It can also be used for entertainment, chatting, games, etc.   Example: PC Mag Technical Excellence Awards Ambitious, live simulcast of an awards ceremony. Avatar of our editor presented awards, while the text scrolled. Each award category had its own room.   Example: Alphaworld A fun shared world, where users could log in, set up a "virtual homestead" and build stuff, interact with other users, etc.   The business model was advertising and selling "space." For example, once you entered the world, you first had to "walk" through the town square, cluttered with billboards, etc. Alphaworld was selling the space. Also, there were stores, newsstands etc.   Although technologically advanced, it died from lack of interest from advertisers and potential partners.   Pros: Interesting 'real-world' way to portray information. Interacting with other users this way can be fun. Good for things like walkthroughs of houses, streets, etc. Game-like presentation can make browsing a site fun. Cons: Worlds can be difficult to develop Plug-ins required, although both browsers come w/rudimentary players. Even though VRML is vector based, downloads can be large. Downloads aside, VRML worlds can take a lot of processor power. Not easily integrated with Web content. Sometimes the 3d navigation is difficult. The "world" metaphor can get tiresome or confusing. Examples: Proteinman's Top Ten Gallery http://www.virtpark.com/theme/proteinman/ Cybertown http://www.cybertown.com/live3d/vrml20/space/space.html Resources: Yahoo! (VRML) --http://www.yahoo.com/Computers_and_Internet/ Internet/World_Wide_Web/Virtual_Reality_Modeling_Language__VRML_/   Video What it is: Video + Sound delivered to the browser (inline) or a stand-alone player (helper app) Canned (User downloads the whole thing, then it plays) Streamed (User can start viewing as it is downloaded) Live (Similar to streamed, but technologically expensive) Pros: Give reader a TV-like experience. More "passive" viewing than rest of Web. Good for demonstrations, when seeing is better than reading. Good for showing real-world things. Although it requires a player download, the player is near universal. Cons: Requires player/plug-in download. Bandwidth intensive. 15 Frames per second is muddy. Readers used to TV won't like it. Postage stamp-sized viewer. Not all platforms can play it. Examples: ABCNews.com: Human or technology? http://www.abcnews.com/sections/tech/DailyNews/rk0316_machines.html An entire TV news story packaged as vide over the Web. Shows strengths and weaknesses.   ABCNews.com: New Device Reads Closed Captions Looking For Profanity http://www.abcnews.com/sections/tech/DailyNews/tvg0312.html A review of a device that you can buy for your TV which automatically bleeps out words you don't like. Use of video is cool because you can see with/without demonstration.   Timecast: Gallery of many sources http://www.timecast.com/video/ Resources: RealNetworks (Formerly Progressive Networks) http://www.realaudio.com/ Get the best inline and helper here… also plays audio… some development and server hints.   Audio What it is: Just like video, only without the picture. Since it comes out of the speakers, the inline/helper question doesn't matter. (Except for the controls) Delivery options the same: Canned / Streamed / Live Less Bandwidth-intensive than video, but there are a variety of options--CD-Quality stereo takes up a lot of bandwidth, mono "telephone" quality much less. Used for: Radio-like broadcasts Music delivery Sports events Pros/Cons: Same pros/cons as video. Not all platforms can play it, not all readers are sound-enabled. Give reader a radio-like experience. Same player as video, although there are numerous other players for audio-only Examples: Chicago Sun-Times Music Previews http://www.mpmusic.com/suntimes/ Resources: RealNetworks (Formerly Progressive Networks) http://www.realaudio.com/ Get the best inline and helper here… also plays audio… some development and server hints.