Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Editor's Notes

• #7: Now don’t be afraid. By the time we’re done, you will be able to build this.
• #8: HTML is a descriptive markup language where the tags describe the content.The underlying markup should be structured as if you were going to read it.Markup should not convey presentation!<h1> to <h6> in order of importance (<h2> should never be underneath a <h3>)Lists (ordered or unordered)ParagraphsTables should only be used for tabular data<span> and <div> are semantically neutralImages always need alternate description textHow would you want the page to look and read if you turned off all of the styling? What about all of the images?
• #9: All tags must be properly closedThe page should validate to its selected doctype. Visual Studio helps here, especially with the Web Standards Update for Visual Studio 2010
• #10: HTML 5 is used to enhance the semantics of the markup and adds new media capabilities.HTML 5 is not CSS 3. While they are often referred to as “HTML5,” they are two distinct standards.New tags include: <header><footer><section><article><details><summary><nav><audio><video><canvas>Also adds:Local StorageSockets (real-time communication)New input types (email, url, number, range, date pickers, search, color)EUI standard is the HTML 5 doctype at this point.
• #11: Block level tags span the entire horizontal width of their container regardless of the width of their contentInline tags expand horizontally with their content
• #12: Load appleselectorjaws.wmv from Videos librarySection 508:Text equivalent for every non-text object (images, videos)Use alt tags on all imagesThe alt tag should sufficiently describe the image and should not be redundant to the text content around it. Decorative graphics should have empty alt textTranscripts are provided for audio contentEquivalent alternatives for any multimedia presentation need to be synced with presentationVideo has synchronized captionsColorColor is not used solely to convey information (i.e. error messages and status indicators)Sufficient contrast between colorsColor blindness awareness (Red/Green – Affects 7-10% of all men, Blue/Yellow, Total)Document OrganizationDocuments need to be readable without the associated stylesheetTabular DataRow and column headers need to be identified with the <th> tagAppropriate use of <thead> and <tbody> tagsScreen FlickerPages need to avoid elements that flicker > 2 Hz and < 55 Hz to avoid optically induced seizuresShouldn’t be an issue in Cartegraph LiveText Only EquivalentsIf the requirements cannot be met in the same page, a text-only equivalent page should be providedThe text only page has to be kept up to date with the main versionShouldn’t be an issue in Cartegraph LiveAccessible ScriptingPages that use scripts to load content or display interface elements need to ensure that the scripted content is accessible to assistive technologies and the keyboard<noscript> is not an acceptable alternative to inaccessible scriptingThis section is still in the 508 standard, though its relevance is changing as screen readers evolve. The key here is to makesure that event handlers like a drag-and-drop interaction have a keyboard shortcut equivalent as well.FormsEach field should have an associated label (<label for=“…”>)Skip Navigation LinksTimersWhen a timer is used, the user must be given an option to ask for more time before the content changes (i.e. pause button on rotating content like at the Sports Illustrated site)
• #13: #1: Styles define how to display HTML elementsCSS is a language, separate from HTML, used to define the presentation of HTML elements. This allows the presentation to be separated from the markup, allowing the markup to be display agnostic (desktop, mobile, screen reader, print, etc.)History:The W3C considered 9 different style sheet languages before settling on Cascading Style SheetsCascade is the concept where the order in which CSS files and CSS classes on objects matters when determining which style to apply. The last file or last class wins if the specificity is equal.Cascade Order:Browser defaultExternal style sheetInternal style sheet (in the head section)Inline style (inside an HTML element)Inheritance is the concept that an element inherits all attributes from matching elements above it in the DOM and CSS until that attribute is specified again.Specificity is the concept that each element in a selector carries a weight (specificity), and the highest weighted style is applied.Best Practices:CSS styles should always be stored in external filesThis allows the same styles to be shared across multiple pagesWithin a given rule, put each attribute on its own lineNever, ever use !IMPORTANTThis can always Don’t use CSS hacks (IE, Conditional Comments)
• #15: Best practices:Avoid inline styles in markup. Never use !IMPORTANT.
• #16: An ID can only appear once on a page.An element can have one and only one ID.In CSS, an ID is indicated with a “#”Do not start an ID with a number because it will not work in Firefox.An element can have multiple classes.A class name can appear multiple times on a page.In CSS, a class is indicated with a “.”The class selector is used to specify a style for a group of elements.The id selector is used to specify a style for a single, unique element.Be aware that the weighting of IDs vs. classes will make it very hard to override styles using IDs.Best practice at EUI is to never use IDs for styling, especially with the addition of new HTML 5 tags like <header> and <footer>.
• #18: A reset CSS is used to reset all styles to a known starting point.All browsers have a default styling for every HTML element. Unfortunately, no two browsers use the same default styling.Using a reset CSS like Eric Meyer’s allows you to reset all browsers to display each element the same way to provide a base point for styling. This helps avoid a number of cross browser issues by setting each browser to the same starting point.
• #19: Browser implementation of CSS 3 is unevenCSS 3 adds a lot of power, but does require a lot more cross platform browser knowledge at this point through browser specific tags
• #20: IE 7 and below have a skewed box model when calculating the content widthDiffering implementations of CSS 3.CSS positioning issues (Firefox inline-block bug)Most of the significant cross browser issues are well documented online. First thing to check in any cross browser issue is the semantics of your markup and the structure of your markup.Second, check the weighting of your CSS selectors (use IE 9 Developer Tools (F12), Firebug, Chrome Developer Tools (F12), Safari Developer Tools (Develop Menu))
• #24: Are you ready?Produce markup, and styling with the provided graphic assets necessary to produce this design in the versions of IE, Chrome, and Firefox installed on the workshop machines.(Show my completed version)Specifications:The image panel width should expand and contract with the page.The Image cells should wrap as the image panel width grows and shrinks.Info panel (right side) should float above the image panel, be a static width and retain a fixed position with respect to the right edge of the image panel.The info panel should not obscure any image cells.Images should be centered in their respective image cells.All image cells should have the same width and height.There should be no JavaScript in this pageExtra Credit: Build this using pure CSS 3 instead of images for the borders and gradients (hint: only the pictures should be images in this solution)
• #28: An object oriented dynamic language? What does that mean?First big difference is that there is no such thing as a class. Class-like functionality is accomplished through object prototypes. Namespacing is accomplished through layered variables. (Give example)Functions are objects and can be passed around as variables as such.
• #29: Built in types are as listed.Number is a double precision 64-bit decimal. There is no such thing as an integer, so be careful for precision errors during math operations.What does 0.1 + 0.2 in JavaScript equal? Not 0.3. It actually equals 0.30000000000000004 due to the binary nature of the addition and the precisions involved in storing the two values.parseInt gotchas – Always provide the optional second argument for the base of the conversion.parseInt(“010”) = 8 because the leading 0 is interpreted as meaning that the number is an octal base.parseInt(“010”, 10) = 10 as you would likely expect.NaN is a special value returned if the value is not a number. NaN will always be the result if NaN is included in any mathematical operationInfinity and –Infinity are special values result from divide by zero errors.Strings are always Unicode.
• #30: This keyword means different things depending on the context in which it is used. Constructor functions are designed to be called by the new keyword and instantiate a new object.Best practice is to capitalize the names of these functions as a reminder to call them with new.Whiteboard exercise:function Person(first, last) {this.first=first;this.last=last;};Person.prototype.fullName = function () { return this.first + ‘ ‘ + this.last;};Person.prototype.fullNameReversed = function () { return this.last + ‘, ‘ + this.first;}Function Student() {Person.call(this);}// inherit PersonStudent.prototype = new Person();// correct the constructor pointer because it points to PersonStudent.prototype.constructor = Student;Student.prototype.sayHello = function () { return “I am a student”;}Var student1 = new Student();student1.fullName();student1.sayHello();alert(student1 instanceof Person); //truealert(student1 instanceof Student); //trueNamespacing:Direct assignment:Varcartegraph = {};caregraph.live = { version: function { return 1.0; },getWorkOrder: function { return … }}Dangerous because user code could overwrite cartegraph.live.getWorkOrder with a different value or function;Self-invoking function:varmyApp = {};(function(context) { var id = 0; context.next = function() { return id++; }; context.reset = function() { id = 0; }})(myApp); jQuery plugin pattern uses this pattern because this protects the internal code from being overwritten by a calling context.
• #31: Always declare using varIf a variable is not declared before it is used, this will still work and will create a variable with global scope which could have significant unintended consequences.Only functions have scope. Logical blocks (loops, if, etc.) do not have scope.Variables declared inside logical blocks are visible to the entire function.Be careful with this because unintended consequences could result.Null is a type of object and is used to indicate a deliberate non-value.Undefined is an object of type “undefined” which indicates that it hasn’t been assigned to yet.Example:varmyVariable;alert(typeof(myVariable)); //Returns undefinedmyVariable = null;alert(typeof(myVariable)); //Returns nullEquality comparisons:== and != coerce types to match“dog” == “dog” returns true;1 == true returns true;=== and !== avoid type coercion1===true returns false because the types don’t match.
• #32: A closure is the combination of a function and the scope object in which it was created. This is very important.This method of containing scope is very important in jQuery and the jQuery plugin pattern.Any variables within the closure construct are not garbage collected until all references to the functions returned in the closure are out of scope.Possibility of memory leaks if a reference to a DOM element is caught in the closure due to some browsers not necessarily managing JavaScript referencesand DOM objects in the same memory pool. This can create the possibility of a circular reference between the native object (el in the example below) andthe JavaScript object (function () in the example below) which then doesn’t get garbage collected until the browser is completely restarted.function addHandler() { var el = document.getElementById('el'); el.onclick = function() { this.style.backgroundColor = 'red'; }}Memory leaks are rarely as obvious as in this example and are generally not a big deal unless the application is very long running or leaking large amounts of memory due to otherpoorly constructed loops and closures.Possible workaround for leak in example below: Don’t use the el variable.function addHandler() { document.getElementById('el').onclick = function() { this.style.backgroundColor = 'red'; }}
• #33: Because this was in the list of questions from Kim, I wanted to mention it. Simply put, the best practice here is to not try to do browser event handling on your own.jQuery handles all of the cross browser compatibility issues with a much simpler interface.
• #38: The first thing to know is $(document).ready();This function is automatically called by jQuery when the DOM has been loaded and is ready for traversal and manipulation.There can be multiple $(document).ready() functions in a given page (i.e. master pages and specific page functionality)jQuery handles all of the different cross browser implementations to determine when the document is ready.All of your initialization code occurs in $(document).ready().
• #40: Bind is the command to attach an event handler to a given named event (“click”, “mouseover”, etc.)Unbind removes the attached event handlersLive is very powerful and is used to attach events to all items that match the specified selector now or in the future.Beware that this can cause unintended side effects, so use with caution and be prepared to defend the decision to use live.Die is the analog to unbind for events created with live.Often times a jQuery plugin or method will give you the opportunity to provide a callback function as a parameter.For example, after an animation is complete, you might want to execute some further code. This is also very important for AJAX calls.
• #41: Hide or show are instantaneous.Fade in and fade out take an optional parameter to set the duration of the fade effect.Slide down shows the item by animating the height.Slide up hides the item by animating the height upAnimate can be used to animate a transition to any numeric CSS values.All of the animation functions take an optional callback function as a parameter to be executed after the animation is complete.
• #43: IfdataType is not specified, jQuery will attempt to infer the dataType from the request.Options:cache (true or false)data – A JavaScript object literal to send containing the data parameters in the body of a POST requestheaders – A JavaScript object literal containing any additional http headersThere are also named functions for post() and get(), though they just alias the main ajax() function with the appropriate parameters.
• #44: How to choose when to use jQuery UI:Does the included functionality meet your full needs?Is the content stylable to your needs or do you need to compromise your design to accommodate jQuery UI?
• #45: Discussed in the “Cutting Edge” column in the October 2011 MSDN Magazine
• #50: There is a large list of recommended links for additional information and tools on the provided flash drive.