cartegraph live html, css, javascript and jquery training
DESCRIPTION
Technology training for Cartegraph on HTML, CSS, JavaScript, and jQuery delivered in Dubuque, IA on October 11th-13th, 2011TRANSCRIPT
![Page 1: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/1.jpg)
HTML/CSS, JavaScript, and jQueryFor Cartegraph Live
![Page 2: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/3.jpg)
Session 1HTML 5 and CSS 3
![Page 4: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/4.jpg)
Session 1 Agenda - HTML• Semantic Markup• HTML 5• Page Structure• Tag Display Types• Accessibility
![Page 5: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/6.jpg)
![Page 7: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/9.jpg)
HTML5
![Page 10: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/13.jpg)
CSS Box Model
![Page 14: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/15.jpg)
Classes vs. IDs?• What are the rules for each?• When should I use them?
![Page 16: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/21.jpg)
Questions?
![Page 22: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/22.jpg)
WorkshopBuild a demo web site using only HTML and CSS
![Page 23: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/23.jpg)
![Page 24: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/24.jpg)
Workshop ReviewBuild a demo web site using only HTML and CSS
![Page 25: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/25.jpg)
Session 2JavaScript Basics
![Page 26: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/26.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/28.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/29.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/30.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/31.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/32.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/33.jpg)
Questions?
![Page 34: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/34.jpg)
Session 3jQuery and ASP.NET MVC 3– Putting it all together
![Page 35: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/35.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/36.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/37.jpg)
Getting Started with jQuery
$(document).ready(function () {//do stuff here…
});
![Page 38: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/38.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/39.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/40.jpg)
Animation• .hide() or .show()• .fadeIn() or .fadeOut()• .slideDown() or .slideUp()• .animate()• Callbacks
![Page 41: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/41.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/42.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/43.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/44.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/45.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/46.jpg)
Questions?
![Page 47: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/47.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/48.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/49.jpg)
Resources
![Page 50: Cartegraph Live HTML, CSS, JavaScript and jQuery Training](https://reader035.vdocuments.site/reader035/viewer/2022062319/5558be74d8b42a7e298b5259/html5/thumbnails/50.jpg)
Thank You!Shane Church | Technical [email protected]
Website: http://www.s-church.net
http://www.effectiveui.com