Creating [Dynamic] Web Pages: Languages & Technologies

CREATING [DYNAMIC] WEB PAGES: LANGUAGES & TECHNOLOGIES — an Overview

N.B. Click the [+/-] to reveal [+] or hide [-] the first level of details of that item. OR

LANGUAGES
- HTML
 - Derived from SGML (Standard Generalize Markup Language)
 - Does not require a server to view a [static] HTML web page
 - Use HTML to create web pages for virtually anything of interest: text (raw text / paragraphs), images/drawings, audio, etc. - almost anything that is on the page
 - ALL [major] browsers understand HTML (no installation of anything)
 - HTML consists of 'tags' used to surround the page content; and are in accord with the World Wide Web Consortium (a.k.a. W3C)
 - W3C is a STANDARD, not a requirement
 - Tags - (fixed set)
 - un-paired
 - [Line] Break ( )
 - Horizontal Rule (<hr />)
 - paired Examples:
 - Paragraph ( ... ) - block element; with predetermined styles
 - Division (<div> ... </div>)- block element; with fewer predetermined styles
 - Span ( ... )- inline; with few predetermined styles
 - Italic, Bold, Underline ( ... , - , - )- styling - font modifiers
 - anchor (<a> ... </a>) - for linking to another [site] page
 - audio/video (<audio> ... </audio> — <video>...</video>) - for media playing/streaming
 - lists (ordered/unordered) (<ol>...</ol> — <ul>...</ul> - for creating enumerated / bulleted lists (respectively)
 - Paired tags can be nested - as in a hierarchy - but not overlapping
 - Example (source code):
 - Web page does not show the tags (obviously), just the text between them
 - HTML tags can be nested, but not overlapping
 - N.B. You can ALWAYS view the source code (tags AND text) of web pages from within the browser !!
 (Specific command depends on the browser. Firefox: Tools | Web Developer | Page Source)
- CASCADING STYLE SHEETS (CSS)
 - ALL [major] browsers have an implementation of CSS, based on W3C standards
 - Does NOT need to be installed
 - Used for general / specific layout and styles:
 - text (e.g. font size, style/family, bold, italic, underline, etc.)
 - Similar to the italic, bold, underline tags ( - , - , - ) above, but more versatile / powerful / robust in CSS
 - objects (divs, paragraphs, images, etc) - e.g. placement, margins - generally the way the page LOOKS
 - N.B. You can create general style rules file(s) to import in each site page to apply the same styles for all pages AND simplify maintenance.
 - Called ‘Cascading’ because of the order of precedence (i.e. ‘Cascading’)
 - Separate (imported) file
 - Within the page
 - Local at the element
- JAVASCRIPT (JS) / jQUERY - Scripting for Dynamic pages at CLIENT (Local) level
 - Use it to manipulate page content that has been already served
 - Some type of dynamic activity on the active page
 - Examples:
 
 Control panel
 
 Slide show
 
 Media Players
 
 Instrumentation
 
 [Configurable] Tool-tips
 
 :
 - Exception: CSS layout rules
 - Like CSS, you can create an external script file and import to any page to duplicate the activity AND simplify maintenance
 - ALL [major] browsers have an implementation of JavaScript based on W3C standards
 - Does NOT usually need to be installed
 - Can be enabled / disabled
 - Must be enabled to use (obviously!)
 - N.B. jQuery is simply a set of library functions written in JavaScript, that uses its own notation
 - Used to handle much of the JavaScript functionality, but makes it much simpler — at the JS level
 - To keep it simple, it must be imported
 - Slogan/Catch phrase: "write less, do more"
- Server-Side Scripting (e.g PHP / ASP) - Scripting for Dynamic pages at SERVER level
 - Use it to serve varying [static] content to the web page in general
 - Excluding dynamic images
 - In the sense of sequential flow, it precedes the JavaScript aspect
 - MUST be installed on the server
 - Advertisers (e.g. eBay / Amazon) use this extensively to serve different content (i.e. ads) based on search history
 - Ex. If you're looking at widgets, perhaps you would be interested in cases, or attachments, etc. so they show 'ads' for any/all of those related items
- Database (e.g. MySQL / Microsoft SQL Server)
 - Used with server-side scripting language (e.g. PHP)
 - MUST be installed on the server
 - Store whatever is relevant to the page / website
 - stock numbers
 - pricing
 - images (e.g. paintings)...
 - database fields could include...
 
 path-to-images
 
 image names
 
 image descriptions
 
 :
 - URLs to alternate / corresponding pages
 - Interfacing
 - Interfacing with server-side scripting is mature / robust
 - Interfacing with PHP is relatively easy
 - Interfacing with server-side scripting has its own language/notation
- XML - Extensible Mark-up Language
 - Also derived from SGML (Standard Generalize Markup Language)
 - Encryption and Portability of data
 - Uses Tags which, like HTML, surround the data to be viewed
 - Like HTML, tags are not viewed, only the 'data' between opening/closing tags
 - Tags are Paired
 - Can have tags named whatever you want
 - Requirements:
 
 MUST HAVE MATCHING PAIRS !! — opening | closing
 - Tags can be nested - as in a hierarchy - but NOT overlapping
 - Example:

TECHNOLOGIES
- AJAX - Asynchronous Javascript And XML
  - Use it to update specific portions of the page after loaded
    - Google Maps
    - Gmail
    - Search — auto-complete
  - Not really a ‘NEW’ technology as such, rather innovative use of [pre]existing technologies
  - Opens communication with server, then closes after request is complete
- COMET (Get it?! ... AJAX / COMET)
  - Opens communication with server and leaves it open, as for streaming
- JSON (JavaScript Object Notation)
  - Lightweight data interchange format - between browser / server
  - Language independent - uses conventions familiar to programmers of C, C++, C#, Java, JavaScript, Perl, Python, and many others
  - Just text - keeps it simple
  - Notation - {key : value} OR {key, value} - e.g. {"name":"John", "age":31, "city":"New York"}