Embed Size (px)
Citation preview
Overview of Web Technology
Intro & Purpose
• Not an engineering class
• Provide guidance that can save you time, money and needless effort
• Show how all the pieces fit together
• Describe opportunities you may not have been aware of
• Provide clarity on the implications of various options
Types of Web Accounts
• Blog account
• Pre-packaged design• Pre-configured business account
• Shared hosting
• VPS hosting (Virtual Private Server)
• Dedicated hosting• Colocation
Methods for Constructing Web Sites
• Hand coding with a text editor
• Hand coding with a code editor• Hand coding with Server Side Includes
• Dedicated web development application
• Scripting language (using either text editor, code editor or web dev app)
Domains and sub-domains
• Your domain points to your ISP's internal DNS (Domain Name Server)
• Sub-domains are directories within a domain, i.e. directories on the server
• Function like standalone web sites
• Can share central style sheet, graphics
• Can help with email routing• Implications for use of cookies
HTML & XHTML
• HTML at version 4.01, but HTML 5 on the horizon
• XHTML (Extensible Hypertext Markup Language) based on XML (Extensible Markup Language)
• Main difference is in conformity to XML
• W3C Validation Service: http://validator.w3c.org
HTML & XHTML
Use "view source" to check sites.
• Craigslist: HTML 4.01
• Facebook: XHTML 1.0 - strict
• Google: deliberately undeclared
• Amazon: deliberately undeclared
CSS - Cascading Style Sheets
• Truly useful, important and accessible, because you can practice simply within the browser, with no web account
• The difference between ugly or elegant, barely readable or a true visual pleasure
• Carefully applied, can add beauty, usability and functionality with no increase in file size or load time
CSS - Cascading Style Sheets
• Means for controlling the appearance of elements of a web site
• "Cascading" because rules may be modified along a "stream" of instances
• Separate file, within the <head> tag, or within elements as "inline" styles
• Now completely inseparable from HTML• Combined with JavaScript for DHTML
Essentials of Search Engine Optimization
• Must contain text, not just text embedded in graphics
• Text must be relevant to how you want your site to be found
• HTML title is crucial
• Description and keyword meta-tag on each page you want indexed
Adobe Flash
• Wonderful tool, often misused and overused
• Powerful interactivity
• Vector-based: possibility of small file sizes, even with complex graphics and interactivity
Adobe Flash
• Text within Flash indexed by some search engines, notably Google
• Text embedded within graphics in Flash not indexed by search engines
• Pages internal to Flash cannot be bookmarked
• Steep learning curve• May tie you to a designer, and make it
difficult to modify your site yourself
HTML versus Flash
• Flash can do things HTML cannot, and vice versa.
• HTML may seem plain, but HTML is easier to work with.
• To use Flash, you must have the program, or hire a designer.
• To use HTML, you just need a text editor, and some knowledge.
Graphics Formats
Basics - Summary
• JPEG: Good for photos, not so good for crisp graphics or text
• GIF: Good for crisp graphics or text, not so good for photos
• PNG: Good for photos or crisp graphics and text, with discretion
Graphics Formats
Lossless versus Lossy
• JPEG: Variably lossy
• GIF: Lossless
• PNG: Lossless
Graphics Formats
Number of colors
• JPEG: unlimited
• GIF: 256 maximum
• PNG: unlimited
Graphics Formats
Transparency
• JPEG: no
• GIF: yes, but only one level, for only one color
• PNG: yes, 254 levels
Graphics Formats
Animation
• JPEG: no
• GIF: yes
• PNG: no
JavaScript
• Now a crucial part of web sites
• Used on its own, or in combination with CSS for DHTML, XML for AJAX
• Contained in the page itself, or loaded from a separate file
• Functions within the browser, so you don't need a web account to practice
JavaScript
• Many free scripts available, which you can immediately use as is or modify
• Debugging available in Firefox Error Console
• Cross-browser and cross-platform testing still essential
DHTML
• Despite the acronym, not actually a language
• Large set of techniques combining HTML, JavaScript and CSS
• Trend toward consistency of function within browsers, but still requires careful cross-browser testing
• Easy to form crushes on cute little functions, often hard to justify them
Scripting Languages
• Major leap in capabilities
• Easy to get started, but lots to learn• Unlike HTML, CSS and JavaScript,
typically function on the server, so you need a web account
Scripting Languages
• PHP: Most widespread use
• ASP - Active Server Pages: Microsoft product, some additional capabilities specific to Microsoft
• Perl: Long history, exceptional with processing text, partly superseded by newer languages
Scripting Languages
• JSP - Java Server Pages: Based on underlying Java technology, pages compiled into "servlets" by JSP compiler
• Python: High level language, can be used as scripting language via mod_python on Apache server
Scripting Languages
• All major scripting languages have vast capabilities.
• Conversion to a different language later may be prohibitively demanding.
• Some combinations of scripting language and database are easier to work with than others.
• The combination of PHP and MySQL is in increasingly common use.
Web Databases
• Major leap in capabilities, major advantages
• Included with nearly all shared hosting accounts
• Relatively easy to learn the basics
• Must know a scripting language
• Virtually any scripting language can be used with virtually any database
Web Databases
• Data integrity
• Sorting, filtering and selectively displaying large amounts of structured information
• Modifying web content from any web browser, from anywhere in the world
• Storing user input in structured form• Exporting information in structured form
Web Databases
• Adding an unlimited number of new "pages" easily, through use of query strings:
http://mydomain.com/intro.php?p=faq
Web Databases
• MySQL most common
• PHP/MySQL combination most common
• Web-based administration using PHPMyAdmin included with most shared hosting accounts
• PHPMyAdmin readily available through cPanel, also included with most shared hosting accounts
AJAX
• Asynchronous JavaScript and XML
• Like DHTML, a set of techniques combining technologies
• Best known example: Google maps
• Increasingly common functions, such as text entry "guess-ahead"
• Can increase usability and decrease load time
AJAX
• You must know JavaScript and XML at a minimum, and most applications require a database
• Development can be demanding
• Growing libraries of free AJAX apps available
Most Common Fundamental Mistakes
• Using a pre-packaged design because it's "easier"
• Using Flash exclusively, especially on the home page
• Using too many graphics, and in the wrong format for the nature of the image
Most Common Fundamental Mistakes
• Choosing technologies that, for your purposes, are too difficult to manage
• Using an approach that makes it difficult to expand, and locks you in to that approach
• Choosing technologies or approaches that bind you to a particular vendor
Overview of Web Technology
