Cartegraph Live HTML, CSS, JavaScript and jQuery Training


Published on

Technology training for Cartegraph on HTML, CSS, JavaScript, and jQuery delivered in Dubuque, IA on October 11th-13th, 2011

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Now don’t be afraid. By the time we’re done, you will be able to build this.
  • 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?
  • 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
  • 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.
  • Block level tags span the entire horizontal width of their container regardless of the width of their contentInline tags expand horizontally with their content
  • 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)
  • #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)
  • Best practices:Avoid inline styles in markup. Never use !IMPORTANT.
  • 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>.
  • 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.
  • 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
  • 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))
  • 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)
  • 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.
  • 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.
  • 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() {;}// 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 = {}; = { version: function { return 1.0; },getWorkOrder: function { return … }}Dangerous because user code could overwrite with a different value or function;Self-invoking function:varmyApp = {};(function(context) { var id = 0; = 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.
  • 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.
  • 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() { = '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() { = 'red'; }}
  • 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.
  • 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().
  • 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.
  • 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.
  • 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.
  • 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?
  • Discussed in the “Cutting Edge” column in the October 2011 MSDN Magazine
  • There is a large list of recommended links for additional information and tools on the provided flash drive.
  • Cartegraph Live HTML, CSS, JavaScript and jQuery Training

    1. 1. HTML/CSS, JavaScript, and jQuery<br />For Cartegraph Live<br />
    2. 2. Introductions<br />Shane Church | Technical Lead<br /><br />Website:<br /><br />
    3. 3. Session 1<br />HTML 5 and CSS 3<br />
    4. 4. Session 1 Agenda - HTML<br /><ul><li>Semantic Markup
    5. 5. HTML 5
    6. 6. Page Structure
    7. 7. Tag Display Types
    8. 8. Accessibility</li></li></ul><li>Session 1 Agenda - CSS<br /><ul><li>CSS
    9. 9. Box Model
    10. 10. CSS Selectors
    11. 11. Classes vs. IDs?
    12. 12. CSS Positioning
    13. 13. Using a Reset CSS
    14. 14. CSS 3
    15. 15. Cross Browser Pitfalls and CSS Optimization
    16. 16. How do I use HTML 5 and CSS 3 today?</li></li></ul><li>
    17. 17. Semantic Markup<br /><ul><li>What is it and why should I use it?
    18. 18. When should I use certain tags?
    19. 19. Example discussion
    20. 20.
    21. 21.
    22. 22.
    23. 23.</li></li></ul><li>Page Structure<br /><ul><li>Document Object Model (DOM)
    24. 24. Doctype – <!doctype html>
    25. 25. <html>
    26. 26. <head>
    27. 27. <body>
    28. 28. <header>
    29. 29. <nav>
    30. 30. <section>
    31. 31. <footer></li></li></ul><li>HTML5<br />
    32. 32. Tag Display Types<br /><ul><li>Block
    33. 33. Examples: <div>, <p>, <header>, <footer>, <ul>, <ol>, <li>
    34. 34. Inline
    35. 35. Examples: <a>, <span>, <input>, <label>
    36. 36. Discussion
    37. 37. Cartegraph Live EUI Wireframes</li></li></ul><li>Accessibility<br /><ul><li>Video
    38. 38. Section 508 Compliance
    39. 39. Guidelines
    40. 40.
    41. 41. Semantic markup is crucial in making your site accessible</li></li></ul><li>CSS (Cascading Style Sheets)<br /><ul><li>What are they used for?
    42. 42. Cascade, Inheritance, Specificity
    43. 43. What are best practices for using them?</li></li></ul><li>CSS Box Model<br />
    44. 44. CSS Selectors<br /><ul><li>Selector Structure
    45. 45. Point Weighting
    46. 46. Tag = 1 point
    47. 47. Class = 10 points
    48. 48. ID = 100 points
    49. 49. Inline Styles = 1000 points
    50. 50. !IMPORTANT = 10000 points</li></li></ul><li>Classes vs. IDs?<br /><ul><li>What are the rules for each?
    51. 51. When should I use them?</li></li></ul><li>Positioning<br /><ul><li>Quick Demo:
    52. 52. Static Positioning
    53. 53. Relative Positioning
    54. 54. Absolute Positioning
    55. 55. Floats</li></li></ul><li>Using a Reset CSS<br /><ul><li>What does a reset CSS do?
    56. 56. Why should I use one?
    57. 57.</li></li></ul><li>CSS 3<br /><ul><li>New styling tools where we would have previously needed images and more markup or JavaScript
    58. 58. Rounded Corners
    59. 59. Drop Shadows
    60. 60. Backgrounds (Multiple Images, Gradients)
    61. 61. Text Overflow and Wrapping
    62. 62. Fonts
    63. 63. 2D and 3D Transforms
    64. 64. Transitions
    65. 65. Browser Specific Extensions
    66. 66. -webkit- = Chrome and Safari
    67. 67. -moz- = Firefox
    68. 68. -ie- = IE</li></li></ul><li>Cross Browser Pitfalls and CSS Optimization<br /><ul><li>Box Model Variations
    69. 69. Uneven CSS implementations
    70. 70. How do I avoid them? Answer: Well structured, semantic markup
    71. 71. Why do we use image sprites?
    72. 72. CSS (and JavaScript) combination and minification</li></li></ul><li>Use HTML 5 and CSS 3 Today<br /><ul><li>Feature Detection
    73. 73. Modernizr –
    74. 74. Polyfills (JavaScript Shims)
    75. 75. CSS3 PIE –
    76. 76. Explorer Canvas -
    77. 77. Graceful Degradation/Progressive Enhancement
    78. 78. No Browser Left Behind: An HTML5 Adoption Strategy – MSDN Magazine, September 2011 -</li></li></ul><li>Questions?<br />
    79. 79. Workshop<br />Build a demo web site using only HTML and CSS<br />
    80. 80.
    81. 81. Workshop Review<br />Build a demo web site using only HTML and CSS<br />
    82. 82. Session 2<br />JavaScript Basics<br />
    83. 83. Session 2 Agenda<br /><ul><li>What kind of language is JavaScript?
    84. 84. Object Types
    85. 85. Variables
    86. 86. Prototype Inheritance and Namespacing
    87. 87. Closures
    88. 88. Events and Callbacks</li></li></ul><li>What kind of language is JavaScript?<br /><ul><li>Object Oriented Dynamic Language
    89. 89. No classes
    90. 90. Functions are objects</li></li></ul><li>Object Types<br /><ul><li>Built-in Types
    91. 91. Number
    92. 92. String
    93. 93. Boolean
    94. 94. Object
    95. 95. Function
    96. 96. Array
    97. 97. Date
    98. 98. RegExp
    99. 99. How do I figure out what type I have?</li></li></ul><li>Prototype Inheritance and Namespacing<br /><ul><li>Prototype inheritance
    100. 100. this keyword
    101. 101. Constructor functions
    102. 102. Inheritance
    103. 103. Polymorphism
    104. 104. Namespacing
    105. 105. Direct Assignment
    106. 106. Self –invoking function</li></li></ul><li>Variables<br /><ul><li>Always declare using the var keyword
    107. 107. Global by default
    108. 108. Scoping
    109. 109. Undefined vs. Null
    110. 110. Equality comparisons</li></li></ul><li>Closures<br /><ul><li>A closure is the combination of a function and the scope object in which it was created.
    111. 111. Used for containing scope of variables
    112. 112. Allow you to save state between calls
    113. 113. Potential problems </li></li></ul><li>Events and Callbacks<br /><ul><li>Events and Callbacks are similar
    114. 114. Events bubble through the DOM and are restricted to the JavaScript host environment’s supported events
    115. 115. Other ‘events’ are really callbacks
    116. 116. A callback function provides a way to message back to the calling code that a specific event has occurred
    117. 117. We will cover this in more detail in the jQuery session
    118. 118. A word about handling browser events without jQuery: Don’t!</li></li></ul><li>Questions?<br />
    119. 119. Session 3<br />jQuery and ASP.NET MVC 3– Putting it all together<br />
    120. 120. Session 3 Agenda<br /><ul><li>What is jQuery?
    121. 121. Getting Started with jQuery
    122. 122. jQuery Selectors
    123. 123. Event Handling
    124. 124. Animation
    125. 125. jQuery Plugin Pattern
    126. 126. AJAX with jQuery
    127. 127. jQuery UI
    128. 128. ASP.NET MVC 3 Architecture Patterns
    129. 129. Putting it all together: AJAX with jQuery and ASP.NET MVC 3</li></li></ul><li>What is jQuery?<br /><ul><li>jQuery is a fast, lightweight (32 KB) JavaScript library
    130. 130. jQuery simplifies document traversal and manipulation
    131. 131. jQuery simplifies event handling
    132. 132. jQuery provides many built-in animation effects
    133. 133. jQuery simplifies writing AJAX behaviors</li></li></ul><li>Getting Started with jQuery<br />$(document).ready(function () {<br /> //do stuff here…<br />});<br />
    134. 134. jQuery Selectors<br /><ul><li>All standard CSS selectors work – If you know CSS, you can work with jQuery
    135. 135. CSS 3 is fully supported
    136. 136. Additional CSS style selectors (not standard CSS selectors)
    137. 137. :contains()
    138. 138. :disabled
    139. 139. :first
    140. 140. :last
    141. 141. :odd
    142. 142. :even
    143. 143. And many more…</li></li></ul><li>Event Handling<br /><ul><li>.bind(“eventName”, function (event) { })
    144. 144. .unbind(“eventName”)
    145. 145. .live(“eventName”, function (event) { })
    146. 146. .die(“eventName”)
    147. 147. Named Events
    148. 148. Callbacks</li></li></ul><li>Animation<br /><ul><li>.hide() or .show()
    149. 149. .fadeIn() or .fadeOut()
    150. 150. .slideDown() or .slideUp()
    151. 151. .animate()
    152. 152. Callbacks</li></li></ul><li>jQuery Plugin Pattern<br /><ul><li>Walkthrough: Open the jquery.plugin.template.js file in the provided sample project
    153. 153. Uses the self-invoking function pattern
    154. 154. Use a method array to avoid polluting the jQuery.fn namespace
    155. 155. Context in jQuery Plugins
    156. 156. Using jQuery’s data method to keep track of variables
    157. 157. Calling methods on the plugin
    158. 158. Cautions with 3rd party plugins</li></li></ul><li>AJAX with jQuery<br /><ul><li>Basic pattern:</li></ul> $.ajax({<br /> url: url,<br /> type: “GET”,<br /> success: function (data, status, xhr) {<br /> //Do something here<br /> },<br /> error: function (request, status, error) {<br /> //Something bad happened here<br /> },<br />dataType: “json"<br /> });<br /><ul><li>Additional options</li></li></ul><li>jQuery UI<br /><ul><li>Contains a number of full featured widgets
    159. 159. Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, and Tabs
    160. 160. Also contains more complex interactions
    161. 161. Draggable, Droppable, Resizable, Selectable, Sortable
    162. 162. Completely stylable
    163. 163. When to use jQuery UI?</li></li></ul><li>ASP.NET MVC 3 Architecture Patterns<br />
    164. 164. Putting it all together: AJAX with jQuery and ASP.NET MVC 3<br /><ul><li>JsonResult
    165. 165. Using the same controller logic to return a ViewResult or a JsonResult
    166. 166. Using jQuery to dynamically load server generated html into a page</li></li></ul><li>Questions?<br />
    167. 167. Workshop<br />Build a simple ASP.NET MVC service that returns both HTML and JSON, invoke it using AJAX, and display the results in the markup of the calling page.<br />
    168. 168. Workshop Review<br />Build a simple ASP.NET MVC service that returns both HTML and JSON, invoke it using AJAX, and display the results in the markup of the calling page.<br />
    169. 169. Resources<br />
    170. 170. Thank You!<br />Shane Church | Technical Lead<br /><br />Website:<br /><br />