cartegraph live html, css, javascript and jquery training

50
HTML/CSS, JavaScript, and jQuery For Cartegraph Live

Upload: shane-church

Post on 17-May-2015

2.322 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

HTML/CSS, JavaScript, and jQueryFor Cartegraph Live

Page 2: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

IntroductionsShane Church | Technical [email protected]

Website: http://www.s-church.net

http://www.effectiveui.com

Page 3: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Session 1HTML 5 and CSS 3

Page 4: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Session 1 Agenda - HTML• Semantic Markup• HTML 5• Page Structure• Tag Display Types• Accessibility

Page 5: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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?

Page 6: Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Page 7: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Semantic Markup• What is it and why should I use it?• When should I use certain tags?• Example discussion

• http://www.effectiveui.com/who-we-are/• http://www.cartegraph.com/index.php/solutions• http://www.blueangels.navy.mil/• http://www.s-church.net

Page 8: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Page Structure• Document Object Model (DOM)

• Doctype – <!doctype html>• <html>• <head>• <body>• <header>• <nav>• <section>• <footer>

Page 9: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

HTML5

Page 10: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Tag Display Types• Block

• Examples: <div>, <p>, <header>, <footer>, <ul>, <ol>, <li>• Inline

• Examples: <a>, <span>, <input>, <label>

• Discussion• Cartegraph Live EUI Wireframes

Page 11: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Accessibility• Video• Section 508 Compliance• Guidelines• http://webaim.org/standards/508/checklist

• Semantic markup is crucial in making your site accessible

Page 12: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

CSS (Cascading Style Sheets)• What are they used for?• Cascade, Inheritance, Specificity• What are best practices for using them?

Page 13: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

CSS Box Model

Page 14: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

CSS Selectors• Selector Structure• Point Weighting

• Tag = 1 point• Class = 10 points• ID = 100 points• Inline Styles = 1000 points• !IMPORTANT = 10000 points

Page 15: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Classes vs. IDs?• What are the rules for each?• When should I use them?

Page 16: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Positioning• Quick Demo:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

• Static Positioning• Relative Positioning• Absolute Positioning• Floats

Page 17: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Using a Reset CSS• What does a reset CSS do?• Why should I use one?• http://meyerweb.com/eric/tools/css/reset/index.html

Page 18: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 19: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 20: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Use HTML 5 and CSS 3 Today• Feature Detection

• Modernizr – http://www.modernizr.com• Polyfills (JavaScript Shims)

• CSS3 PIE – http://css3pie.com/• Explorer Canvas - http://code.google.com/p/explorercanvas/

• Graceful Degradation/Progressive Enhancement• No Browser Left Behind: An HTML5 Adoption Strategy – MSDN

Magazine, September 2011 - http://msdn.microsoft.com/en-us/magazine/hh394148.aspx

Page 21: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Questions?

Page 22: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

WorkshopBuild a demo web site using only HTML and CSS

Page 23: Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Page 24: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Workshop ReviewBuild a demo web site using only HTML and CSS

Page 25: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Session 2JavaScript Basics

Page 26: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Session 2 Agenda• What kind of language is JavaScript?• Object Types• Variables• Prototype Inheritance and Namespacing• Closures• Events and Callbacks

Page 27: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

What kind of language is JavaScript?

• Object Oriented Dynamic Language• No classes• Functions are objects

Page 28: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Object Types• Built-in Types

• Number• String• Boolean• Object

• Function• Array• Date• RegExp

• How do I figure out what type I have?

Page 29: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Prototype Inheritance and Namespacing

• Prototype inheritance• this keyword• Constructor functions• Inheritance• Polymorphism

• Namespacing• Direct Assignment• Self –invoking function

Page 30: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Variables• Always declare using the var keyword• Global by default• Scoping• Undefined vs. Null• Equality comparisons

Page 31: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 32: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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!

Page 33: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Questions?

Page 34: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Session 3jQuery and ASP.NET MVC 3– Putting it all together

Page 35: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 36: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 37: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Getting Started with jQuery

$(document).ready(function () {//do stuff here…

});

Page 38: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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…

Page 39: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Event Handling• .bind(“eventName”, function (event) { })• .unbind(“eventName”)• .live(“eventName”, function (event) { })• .die(“eventName”)• Named Events• Callbacks

Page 40: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Animation• .hide() or .show()• .fadeIn() or .fadeOut()• .slideDown() or .slideUp()• .animate()• Callbacks

Page 41: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 42: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

AJAX with jQuery• Basic pattern:

$.ajax({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

Page 43: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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?

Page 44: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

ASP.NET MVC 3 Architecture Patterns

Services Project ASP.NET MVC Project

ASP.NET MVC Views ASP.NET MVC Controllers Service Controller

ASP.NET MVC Models (View Models)

Data Persistence Layer

Business Domain Model

Database

Page 45: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

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

Page 46: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Questions?

Page 47: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

WorkshopBuild 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.

Page 48: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Workshop ReviewBuild 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.

Page 49: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Resources

Page 50: Cartegraph Live HTML, CSS, JavaScript and jQuery Training

Thank You!Shane Church | Technical [email protected]

Website: http://www.s-church.net

http://www.effectiveui.com