cartegraph live html, css, javascript and jquery training
Post on 17-May-2015
2.319 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML/CSS, JavaScript, and jQueryFor Cartegraph Live
IntroductionsShane Church | Technical Leadshane.church@effectiveui.com
Website: http://www.s-church.net
http://www.effectiveui.com
Session 1HTML 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
• 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 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• http://webaim.org/standards/508/checklist
• 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:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
• Static Positioning• Relative Positioning• Absolute Positioning• Floats
Using a Reset CSS• What does a reset CSS do?• Why should I use one?• http://meyerweb.com/eric/tools/css/reset/index.html
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 – 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
Questions?
WorkshopBuild a demo web site using only HTML and CSS
Workshop ReviewBuild a demo web site using only HTML and CSS
Session 2JavaScript 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 3jQuery 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:
$.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
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
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
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?
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.
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.
Resources
Thank You!Shane Church | Technical Leadshane.church@effectiveui.com
Website: http://www.s-church.net
http://www.effectiveui.com
top related