Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Upcoming SlideShare
Loading in...5

Cartegraph Live HTML, CSS, JavaScript and jQuery Training



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

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



Total Views
Views on SlideShare
Embed Views



7 Embeds 561 351 159
http://localhost:15030 34
http://localhost 14 1 1 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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! to in order of importance ( should never be underneath a )Lists (ordered or unordered)ParagraphsTables should only be used for tabular data and 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: 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 tagAppropriate use of and 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 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 ()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 and .
  • 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 Cartegraph Live HTML, CSS, JavaScript and jQuery Training Presentation Transcript

  • HTML/CSS, JavaScript, and jQuery
    For Cartegraph Live
  • Introductions
    Shane Church | Technical Lead
  • Session 1
    HTML 5 and CSS 3
  • Session 1 Agenda - HTML
    • Semantic Markup
    • HTML 5
    • Page Structure
    • Tag Display Types
    • Accessibility
  • Session 1 Agenda - CSS
    • CSS
    • Box Model
    • CSS Selectors
    • Classes vs. IDs?
    • CSS Positioning
    • Using a Reset CSS
    • CSS 3
    • Cross Browser Pitfalls and CSS Optimization
    • How do I use HTML 5 and CSS 3 today?
  • Semantic Markup
    • What is it and why should I use it?
    • When should I use certain tags?
    • Example discussion
  • Page Structure
    • Document Object Model (DOM)
    • Doctype – <!doctype html>
    • <html>
    • <head>
    • <body>
    • <header>
    • <nav>
    • <section>
    • <footer>
  • HTML5
  • Tag Display Types
    • Block
    • Examples: <div>, <p>, <header>, <footer>, <ul>, <ol>, <li>
    • Inline
    • Examples: <a>, <span>, <input>, <label>
    • Discussion
    • Cartegraph Live EUI Wireframes
  • Accessibility
    • Video
    • Section 508 Compliance
    • Guidelines
    • Semantic markup is crucial in making your site accessible
  • CSS (Cascading Style Sheets)
    • What are they used for?
    • Cascade, Inheritance, Specificity
    • What are best practices for using them?
  • CSS Box Model
  • CSS Selectors
    • Selector Structure
    • Point Weighting
    • Tag = 1 point
    • Class = 10 points
    • ID = 100 points
    • Inline Styles = 1000 points
    • !IMPORTANT = 10000 points
  • Classes vs. IDs?
    • What are the rules for each?
    • When should I use them?
  • Positioning
    • Quick Demo:
    • Static Positioning
    • Relative Positioning
    • Absolute Positioning
    • Floats
  • Using a Reset CSS
    • What does a reset CSS do?
    • Why should I use one?
  • CSS 3
    • New styling tools where we would have previously needed images and more markup or JavaScript
    • Rounded Corners
    • Drop Shadows
    • Backgrounds (Multiple Images, Gradients)
    • Text Overflow and Wrapping
    • Fonts
    • 2D and 3D Transforms
    • Transitions
    • Browser Specific Extensions
    • -webkit- = Chrome and Safari
    • -moz- = Firefox
    • -ie- = IE
  • Cross Browser Pitfalls and CSS Optimization
    • Box Model Variations
    • Uneven CSS implementations
    • How do I avoid them? Answer: Well structured, semantic markup
    • Why do we use image sprites?
    • CSS (and JavaScript) combination and minification
  • Use HTML 5 and CSS 3 Today
    • Feature Detection
    • Modernizr –
    • Polyfills (JavaScript Shims)
    • CSS3 PIE –
    • Explorer Canvas -
    • Graceful Degradation/Progressive Enhancement
    • No Browser Left Behind: An HTML5 Adoption Strategy – MSDN Magazine, September 2011 -
  • Questions?
  • Workshop
    Build a demo web site using only HTML and CSS
  • Workshop Review
    Build a demo web site using only HTML and CSS
  • Session 2
    JavaScript Basics
  • Session 2 Agenda
    • What kind of language is JavaScript?
    • Object Types
    • Variables
    • Prototype Inheritance and Namespacing
    • Closures
    • Events and Callbacks
  • What kind of language is JavaScript?
    • Object Oriented Dynamic Language
    • No classes
    • Functions are objects
  • Object Types
    • Built-in Types
    • Number
    • String
    • Boolean
    • Object
    • Function
    • Array
    • Date
    • RegExp
    • How do I figure out what type I have?
  • Prototype Inheritance and Namespacing
    • Prototype inheritance
    • this keyword
    • Constructor functions
    • Inheritance
    • Polymorphism
    • Namespacing
    • Direct Assignment
    • Self –invoking function
  • Variables
    • Always declare using the var keyword
    • Global by default
    • Scoping
    • Undefined vs. Null
    • Equality comparisons
  • Closures
    • A closure is the combination of a function and the scope object in which it was created.
    • Used for containing scope of variables
    • Allow you to save state between calls
    • Potential problems
  • Events and Callbacks
    • Events and Callbacks are similar
    • Events bubble through the DOM and are restricted to the JavaScript host environment’s supported events
    • Other ‘events’ are really callbacks
    • A callback function provides a way to message back to the calling code that a specific event has occurred
    • We will cover this in more detail in the jQuery session
    • A word about handling browser events without jQuery: Don’t!
  • Questions?
  • Session 3
    jQuery and ASP.NET MVC 3– Putting it all together
  • Session 3 Agenda
    • What is jQuery?
    • Getting Started with jQuery
    • jQuery Selectors
    • Event Handling
    • Animation
    • jQuery Plugin Pattern
    • AJAX with jQuery
    • jQuery UI
    • ASP.NET MVC 3 Architecture Patterns
    • Putting it all together: AJAX with jQuery and ASP.NET MVC 3
  • What is jQuery?
    • jQuery is a fast, lightweight (32 KB) JavaScript library
    • jQuery simplifies document traversal and manipulation
    • jQuery simplifies event handling
    • jQuery provides many built-in animation effects
    • jQuery simplifies writing AJAX behaviors
  • Getting Started with jQuery
    $(document).ready(function () {
    //do stuff here…
  • jQuery Selectors
    • All standard CSS selectors work – If you know CSS, you can work with jQuery
    • CSS 3 is fully supported
    • Additional CSS style selectors (not standard CSS selectors)
    • :contains()
    • :disabled
    • :first
    • :last
    • :odd
    • :even
    • And many more…
  • Event Handling
    • .bind(“eventName”, function (event) { })
    • .unbind(“eventName”)
    • .live(“eventName”, function (event) { })
    • .die(“eventName”)
    • Named Events
    • Callbacks
  • Animation
    • .hide() or .show()
    • .fadeIn() or .fadeOut()
    • .slideDown() or .slideUp()
    • .animate()
    • Callbacks
  • jQuery Plugin Pattern
    • Walkthrough: Open the jquery.plugin.template.js file in the provided sample project
    • Uses the self-invoking function pattern
    • Use a method array to avoid polluting the jQuery.fn namespace
    • Context in jQuery Plugins
    • Using jQuery’s data method to keep track of variables
    • Calling methods on the plugin
    • Cautions with 3rd party plugins
  • AJAX with jQuery
    • Basic pattern:
    url: url,
    type: “GET”,
    success: function (data, status, xhr) {
    //Do something here
    error: function (request, status, error) {
    //Something bad happened here
    dataType: “json"
    • Additional options
  • jQuery UI
    • Contains a number of full featured widgets
    • Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, and Tabs
    • Also contains more complex interactions
    • Draggable, Droppable, Resizable, Selectable, Sortable
    • Completely stylable
    • When to use jQuery UI?
  • ASP.NET MVC 3 Architecture Patterns
  • Putting it all together: AJAX with jQuery and ASP.NET MVC 3
    • JsonResult
    • Using the same controller logic to return a ViewResult or a JsonResult
    • Using jQuery to dynamically load server generated html into a page
  • Questions?
  • Workshop
    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.
  • Workshop Review
    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.
  • Resources
  • Thank You!
    Shane Church | Technical Lead