Your SlideShare is downloading. ×
jQuery Firestarter
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Firestarter

1,143
views

Published on

With all of the new options for developing client-centric applications it can be hard to get your feet wet. Let’s jump in head first and build a app in JavaScript. We will be using ASP.NET for data …

With all of the new options for developing client-centric applications it can be hard to get your feet wet. Let’s jump in head first and build a app in JavaScript. We will be using ASP.NET for data access and web services accompanied by jQuery and for client-side coding. We will also touch base with the cool new AJAX 4.0 features and how easy they make AJAX development. The bottom line is we want to walk away from this session ready to test the waters in client-side development. Everyone is talking about it, Microsoft has embraced it, now we just need to do it!

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,143
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Here is the CSS that will accompany the JS#toaster{    width:200px;    position:fixed;    bottom:0;    right:0;}.toast{    display:none;    position:relative;    clear:both;    padding:20px;    margin:4px;    background:rgba(0,0,0,0.75);    border:1px solid #000;    color:#fff;    font-weight:600;    border-radius: 6px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    text-shadow: 2px 2px 5px rgba(255,255,255,1);    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
  • Transcript

    • 1. jQueryFirestarter
      Chris Bannon
      http://twitter.com/b4nn0n
      chrisb@componentone.com
    • 2. Product Manager @ComponentOne
      ASP.NET AJAX Controls
      ASP.NET iPhone/Mobile Controls
      Mobile Web Advocate
      iPhone Dev Con Speaker
      jQuery Advocate
      jQuery Conference Speaker
      About Me
      Hi!
    • 3. HTML/XHTML
      Semantic markup
      Valid markup
      Microformats
      JavaScript
      jQuery
      Document Object Model (DOM)
      Event Model
      CSS
      Back to basics… !Important
    • 4. ASP.NET AJAX
      Mimics server-side code
      Object Model Driven
      C# like syntax
      Namespace driven
      AJAX Control Toolkit
      No JavaScript experience needed
      Built-in server-side callbacks
      Client-side in ASP.NET 2.0-3.5
    • 5.
    • 6. jQuery
      CSS Selectors
      Lightweight model
      Common utilities/functions
      Abstracts browser-specific JavaScript
      jQueryTemplating/DataBinding
      Formerly AJAX 4 Templating/DataBinding
      Uses HTML Templates with Binding syntax
      Supports DataBinding in JavaScript
      Client-side in ASP.NET 4.0
    • 7. ComponentOne
      Studio for ASP.NET AJAX
      }
      {
      +
    • 8. $(“code”).show();
    • 9. A Great One-liner Sample
      Popping Up the Toast
              function showToast(msg) {            if ($("#toaster").length == 0) {                $("<div id='toaster'></div>").appendTo("body");            }            $("<div class='toast'><span></span></div>")                    .find("span")                    .html(msg)                    .end()                .appendTo("#toaster")                .show("slide", { direction: "down", easing: "easeOutQuad" })                .delay(4000)                .hide("slide", { direction: "down", easing: "easeOutQuad" });        }
    • 10. Any
      Questions?
    • 11. jQueryhttp://jquery.com/
      jQuery UIhttp://jqueryui.com/
      Studio for ASP.NET AJAXhttp://www.componentone.com/SuperProducts/StudioASPNET/
      Chinook (iTunes) Sample Databasehttp://chinookdatabase.codeplex.com/
      MS AJAX Announcementhttp://stephenwalther.com/blog/archive/2010/03/16/microsoft-jquery-and-templating.aspx
      Code from this session http://helpcentral.componentone.com/CS/blogs/webdev/archive/2010/03/23/popular-ui-volume-2-itunes.aspx
      Resources
    • 12. $(this).end();
      Chris Bannon
      http://twitter.com/b4nn0n
      chrisb@componentone.com