SlideShare a Scribd company logo
HTML5, CSS3 and jQuery with
SharePoint 2010 – what you
can (and need to) start doing
now
MSPUG - May 2012
~ Chris O’Connor (OBS
About Me
 Senior Consultant at OBS
 Blog : www.sharepointroot.com
 Twitter : @GrumpyWookie
 Dad of three boys – and keen cyclist
 Let’s talk MTB (!)
Agenda
 HTML5 – what & why
 CSS3
 SharePoint 2010
 jQuery
 REST + JSON
 jQuery Templates
 SharePoint vNext (15/2013?)
History of the Web (HTML)
 HTML 3.2 and CSS 1.0 (~1997)
 Browser wars : Netscape vs. Internet Explorer
 HTML 4.01 and CSS 2.0 (~1999)
 Exit Netscape – Enter FireFox, Opera, Safari, etc.
 XHTML 1.0 and CSS 2.1 (~2000)
 HTML content pages written as valid XML documents
 HTML 5 and CSS 3.0 (~2005)
 Rejects the constraints added by XHTML
 New HTML elements, CSS properties and JavaScript APIs
** SharePoint 2010

Recommended for you

The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5

HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.

html5
MWLUG - Universal Java
MWLUG  -  Universal JavaMWLUG  -  Universal Java
MWLUG - Universal Java

Universal Java allows developers to write code once and run it anywhere, including on servers, desktops, mobiles, and IoT devices. Java code is portable because it compiles to bytecode that runs on the Java Virtual Machine (JVM), which exists for most platforms. Some key aspects that enable portability include: 1. Separating platform-independent business logic from platform-specific UI code 2. Using common language features and libraries for cross-platform code 3. Transpiling Java to other languages like JavaScript for web apps 4. Ahead-of-time compilation to native code for better performance on devices The document discusses strategies for writing portable Java code and provides examples using shared business

iosmoejvm
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript DevelopereilleSpirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille

This document provides an overview of HTML5, JavaScript, and new JavaScript APIs. It introduces the presenter and their focus on JavaScript. It then discusses the history and standards of JavaScript and ECMAScript. It explains that while HTML5 provides semantics, most interactive functionality comes from JavaScript. It outlines some new JavaScript APIs like geolocation, files, web workers, and web sockets. It discusses how JavaScript is important for rich interactive applications and single page applications. It provides examples of these APIs and discusses challenges of developing complex single page applications. It concludes with an example of variable scoping in JavaScript.

developershtml5web development
Moving to HTML5
• Why ?
 HTML to work consistently across all modern
browsers
 Eliminate need for Flash, Silverlight, etc
 New JavaScript APIs
 Target mobile devices - CEO's iPad !!
• And, simply…
 New stuff that makes sense
 Evolution of the language of the web
A new simpler
DOCTYPE
A new semantic
element
A new functional
element
Example : HTML5
New HTML5 semantic tags
 Layout & structure
<header>
<nav>
<article>
<section>
<figure>
<dialog>
<aside>
<time>
<footer>
<header></header>
<nav></nav>
<footer></footer>
<article>
<section>
<h2></h2>
<p></p>
<p></p>
</section>
<section>
<h3></h3>
<p></p>
</section>
</article>
<aside>
<section>
</section>
</aside>
New HTML5 Functional Tags
 New Elements Provide Functional Behavior
<canvas>
<svg> [Scalable Vector Graphics – defined by XML]
<audio>
<video>
<source>
<command>
<datalist>
<embed>
<output>

Recommended for you

Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web

[Slides from my 'Edge of the Web' workshop] The web platform has evolved significantly over the last several years, giving developers more power than ever to create rich, interactive applications delivered via browsers. New capabilities in HTML, CSS and JavaScript paired with constantly updating browsers make it possible to do things on the web that used to be the exclusive domain of plugins and native apps. In this workshop, you’ll be introduced to some of the most powerful and useful techniques available to the modern web developer that will change the way you think about web app development. The future of web app development is exciting, and these are the technologies that will underpin and drive that change. Don’t get left behind with IE8-era knowledge. Get ahead of the curve and master the edge of the web.

javascriptweb developmenthtml5
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere

One of the great promises of HTML5 is that you can create software that runs everywhere. In many ways, HTML5 lives-up to this promise, but as with any evolving standard, support across different browsers and devices is inconsistent. To effectively adopt HTML5 today, developers must master the skills that fill-in the gaps and minimize the differences between HTML5 runtimes. In this session, you will learn the essential techniques needed to create HTML5 sites and apps that truly work everywhere. You will learn: • Learn four strategies for adopting HTML5 • Analyze the impact browsers have on HTML5 readiness & adoption • Explore new HTML5 features and techniques for using in older browsers

html5css3web design and development
Tips for Building your First XPages Java Application
Tips for Building your First XPages Java ApplicationTips for Building your First XPages Java Application
Tips for Building your First XPages Java Application

XPages and Java go together like bicycles and great exercise. But much like you wouldn't attempt a hundred mile bicycle ride on your first day, Java is best learned by starting small and building on your accomplishments. Planning, preparation, and realistic goals are keys to becoming proficient at using Java in your XPages applications. Come learn as two long-time developers, Mike and Graham, share their experiences on their Java treks and demonstrate some of what they learned as they build a Java-based shopping cart in an XPages application.

xpages applicationsxpagesjava
New HTML5 Functional Tags
<input type=‘TYPE’ id=‘myField’ />
 New Types :
tel week
search time
url datetime-local
email number
datetime range
date color
month placeholder
New HTML5 Functions (API)
 Additional methods & functions (JavaScript)
 Geolocation
 Determine current location
 2D drawing
 Canvas – draw lines & graphics using JavaScript
 Drag and drop
 Images & attachments within browser
 <img draggable="true" />
 Web storage
 Key-value pair framework - like cookies, but much richer
(tastier ?)
 …. plus more
http://html5demos.com
New for CSS3
 Rounded corners
#example1 {border-radius: 15px;}
 Text shadow
#title{text-shadow: 2px 2px 2px #000;}
 Gradient
background: -ms-linear-gradient(top,
#2F2727, #1a82f7);
BUT…!
 “Modern” browsers support portions of HTML5
specification
 IE 9
 Google Chrome
 Mozilla Firefox v4
 Apple Safari v5 (iOS)
 Full HTML5 support across browsers
anticipated in “2022” !
 Need failback / other way to show if not
supported
 Avoid “if browser-x, then {aaaa}”

Recommended for you

WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)

This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.

html5
HTML5 in IE9
HTML5 in IE9HTML5 in IE9
HTML5 in IE9

1. Buu Nguyen presented on HTML5 and its implementation in IE9. He provided an overview of HTML5 including its history and development process. 2. He demonstrated new HTML5 semantic elements like <header>, <nav>, <article>, and <footer>. He also showed HTML5 features in IE9 like drag and drop, web storage, and geolocation. 3. Buu discussed the pros and cons of HTML5, noting its portability but also inconsistent implementations across browsers currently. He concluded by taking questions from the audience.

html5web developmentcanvas
IBM Domino Modernizing apps with Angularjs
IBM Domino Modernizing apps with AngularjsIBM Domino Modernizing apps with Angularjs
IBM Domino Modernizing apps with Angularjs

Mark leusing presenta una sessione su come modernizzare le applicazioni Notes e Domino con Rest, AngularJS etc..

dominopointeventodomino
What about SharePoint 2010 ?
• HTML5 Master Page
• Include HTML5 tags
 ListView + XSLT to render HTML5
 Include in Content Editor WebPart (CEWP)
 Page Layout
• BUT – browser support always an issue
 Need to support IE8 and IE7
HTML5 + CSS3 + SharePoint
2010
DEMO
jQuery Fundamentals
• Designed to hide differences between browsers
 Eliminate browser-specific code
• Focuses on two primary tasks
 Retrieving sets of elements from HTML pages
 Performing operations on the elements within a set
• jQuery is a great alternative (safe bet)
 Compared to HTML5
 Browser support
jQuery and SharePoint 2010
• Load JavaScript to SharePoint
 Download jQuery (eg. jquery-1.7.1.min.js)
 STYLE LIBRARY
• Reference JavaScript file/s
 <SCRIPTLINK> tag – in feature
 <SCRIPT> tag reference – Master Page
• Or – directly within CEWP or XSLT

Recommended for you

WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016

This document discusses WordPress theme performance. It provides data from testing over 3,800 themes on metrics like speed score, number of resources, file sizes, and response bytes. The median theme in 2016 had a mobile speed score of 53, 432KB in total assets, and response bytes of 125KB for HTML, 101KB for CSS, and 155KB for JavaScript. Recommendations include optimizing assets by consolidating and minifying files, deferring non-essential scripts, and conditionally loading resources. The document emphasizes including performance in designs from the start and selecting themes that meet defined performance budgets.

wordpressthemesperformance
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!

What is web components, inner structure, how they are connected with each other, what is the current state of web components and what is their future

componentsgoogleshadow dom
Upgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and GotchasUpgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and Gotchas

Thinking of upgrading your website to Drupal 8 or using Drupal 8 for a new project? In this webinar, we'll talk about the benefits of Drupal 8 and the killer features that will make you want to upgrade. We'll also discuss challenges of upgrading, major changes from previous versions of Drupal, and the steps you'll have to go through during the upgrade process. This webinar covers: Knowledge of the benefits of Drupal 8 Overall understanding of the upgrade process An overview of which contributed moduels and themes are ready for Drupal 8 Some ideas for migrating your content and configuration Tools and resources to use during your upgrade

migratedrupal 8webinar
Feature to deploy jQuery
• Create a SharePoint project in Visual Studio
2010
 Create a site collection-scoped feature (i.e.
scope=site)
 Add a Module to deploy jQuery JavaScript files
 Eg. STYLE LIBRARY or SITE ASSETS
How to use jQuery
• JavaScript code
 CSS Selectors
 Action
<script>
$('#ContactName').html('Joe Smith');
</script>
 SELECT stuff…
 DO stuff…
 jQuery – should’ve been called jSelect (?)
jQuery Selectors
 jQuery leverages familiar CSS selector syntax
jQuery Actions
• Perform function/update to a piece of HTML
 html()
 addClass()
 attr()
 slideUp()
• Most jQuery object methods support
cascading calls

Recommended for you

Html 5 introduction
Html 5 introductionHtml 5 introduction
Html 5 introduction

HTML5 is the next generation of HTML that will be the new standard, as the previous version was released in 1999. HTML5 is still a work in progress but is supported by most modern browsers. HTML5 was a cooperation between the W3C and WHATWG to create a new version that reduces the need for plugins, has better error handling, and includes new elements and APIs. Some of HTML5's new features include canvas drawing, video and audio playback, offline storage, and new form controls.

HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)

A fast-paced overview of HTML5. Topics include: -What is HTML5? -History of HTML5 -WHATWG and W3C specifications -What is part of HTML5? -Using HTML5 Today -Using HTML5 in browsers that do not support it -Detecting native availability of HTML5 features

html5 communicationhtml5 web workershtml5
Everything XControls
Everything XControlsEverything XControls
Everything XControls

XControls have become a powerful tool for XPages developers. Join Matt White and Rich Sharpe to look at: -What's possible with the XControls -How to start using the XControls -A deep dive section on the "Global Search" control -An upcoming roadmap/new XControls

mobile application frameworkmobile application developmentxpages applications
jQuery Events
• Document ready event handler
 Executed when DOM document is ready for
access
 Can also dynamically add events to DOM
 click()
 hover()
 keypress()
jQuery UI Library
• Pre-coded UI components
 Based on built-in theming scheme
• jQuery UI Widgets
 Auto-complete
 Date Picker
 Slider
 Progress Bar
 Tabs
 Accordion
 Dialog
http://jqueryui.com/
Demo
jQuery + SharePoint 2010
jQuery+ SharePoint 2010
DEMO

Recommended for you

Get Involved with WordPress
Get Involved with WordPressGet Involved with WordPress
Get Involved with WordPress

1) WordPress is an open source content management system (CMS) that can be used to build websites and blogs. It exists in two versions - WordPress.org which is open source and customizable, and WordPress.com which is hosted for free but with limited customization options. 2) The presentation discusses how to get involved with WordPress by creating themes and plugins, and participating in the large WordPress community through forums, contributing code, and attending events. 3) Businesses can also make money through WordPress by creating and selling popular plugins and themes, hiring out WordPress development services, or hosting private WordPress sites.

wordpress
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)

The document discusses an HTML5 presentation given by Peter Lubbers at STC12. It provides an agenda for the presentation that includes discussing what HTML5 is, its features, tools for HTML5, and a Q&A. It also shares quotes about the growing adoption of HTML5 and discusses several HTML5 topics like new elements, forms, multimedia, and CSS3.

techcomtechnical writinghtml5 boilerplate
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

HTML5 and CSS3 have arrived and they are redefining rich, standards-based web development. Features previously the exclusive domain of browser plug-ins can now be added to web applications as easily as images. Understanding the new power that these standards define, as well as the rapidly increasing power and speed of JavaScript in modern browsers and devices is essential. These slides accompany a full-day workshop, where attendees are guided through the new features in HTML5 and CSS3, with special attention to how these technologies can be used today in new and old browsers.

html5css3javascript
REST
• Previously had ASMX Web Services
 Eg. GetLists, etc
 Returns as XML data
 Difficult to construct + call (XML packet)
 New WCF REST’ful Web Services
 URL based query
 JSON data format returned
 JavaScript Object Notation
REST : using ListData.svc
Get all items in list
http://server/_vti_bin/ListData.svc
Returns all items in MyList
http://server/_vti_bin/ListData.svc/MyList
Returns all items in MyList ordered ascending by Title
http://server/_vti_bin/ListData.svc/MyList?$orderby=Title
Returns all items in MyList that has a column that equal to
'Music'
http://server/_vti_bin/ListData.svc/MyList?$filter=MyColumn
eq 'Music'
jQuery + REST
• jQuery provides methods to call across
network
 Call to REST-based Web services (ListData.svc)
 Delegate for OnSuccess + OnError
 Returns results in JSON format
jQuery+ REST + SharePoint
2010
DEMO

Recommended for you

A Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with JavascriptA Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with Javascript

By now you may have heard that JavaScript is becoming a viable solution for SharePoint Development, but where do you get started? This session will start with some of the basics and introduce attendees to a few different Javascript libraries such as jQuery, Knockout, Bootstrap, etc. It will showcase SharePoint's REST API and provide some examples of how to conduct basic CRUD operations which you can repurpose for your own custom SharePoint Apps.

sharepoint 2013jqueryclient side devleopment
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5

This document provides an overview and history of HTML5, summarizing some of the key new features in 3 sentences or less: HTML5 aims to simplify HTML markup and make it more semantic with new elements like <section> and <nav>. It also introduces new JavaScript APIs, richer media like <audio> and <video>, and the <canvas> element for drawing. The development of HTML5 was a collaborative effort between browser vendors to create a common standard that is backwards compatible and supports modern web applications.

html5svgcss3
Push it to the Edge
Push it to the EdgePush it to the Edge
Push it to the Edge

Hey Microsoft, why did you build another Internet Explorer? This question and what this means for web developers get answered by these slides. It will also be covered, what else developers can do with the new Open Source Chakra JavaScript engine, that empowers not only the Edge browsers but also many other scenarios.

javascriptmicrosoft edgemicrosoft
jQuery Templates
• Layout for displaying data collections rendered as
HTML
 Create layout within JavaScript
 using literal HTML and tokens
 Just like XSLT – only easier (!)
 Render data + layout
 tmpl() method
 Process template once for each item in collection
Bring it all together
 jQuery
 Call to REST web service
 REST
 SharePoint List Data
 JSON data returned
 jQuery Template
 HTML template
jQuery Templates
jQuery Templates

Recommended for you

HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview

Slides from an HTML5 overview session I presented at work... This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground

htmlhtml5css
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations

No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them. This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.

web performancejavascript
TypeScript and SharePoint Framework
TypeScript and SharePoint FrameworkTypeScript and SharePoint Framework
TypeScript and SharePoint Framework

Bob German, a Principal Architect at BlueMetal, gave a presentation about developing SharePoint widgets using TypeScript. He discussed how Microsoft is modernizing SharePoint with the new SharePoint Framework. Widgets provide a way to build reusable components for different SharePoint development models using HTML and JavaScript. TypeScript adds benefits like catch errors earlier and use modern JavaScript features. German demonstrated how to set up TypeScript and build widgets today and in the future SharePoint Framework.

typescriptsharepoint
jQuery Templates
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
Demo
jQuery + REST + jQuery
Templates
SharePoint vNext
• Think more about dev. with client-side
 REST
 jQuery
 HTML5 ? Maybe – browser dependant
• Office 365
 Combined code-base w/ SharePoint 15
 SandBoxed Solutions – or Client Side
• Windows 8
 HTML+jQuery – apps

Recommended for you

Html5
Html5Html5
Html5

HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.

html5 new elements
Spsmi13 charts
Spsmi13 chartsSpsmi13 charts
Spsmi13 charts

This document summarizes a presentation about using HTML5 charts with JavaScript and SharePoint. It discusses using Scalable Vector Graphics (SVG) and Canvas elements to create charts, as well as several third-party charting libraries like Chart.js, RaphaelJS, and HighCharts. It also covers different methods for retrieving data from SharePoint like the REST interface, Client Object Model, and web services. As an example, it demonstrates creating a burndown chart and task breakdown chart to visualize project progress in SharePoint.

html5sharepointsharepoint saturday
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?

Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details. "What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5. You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.

html 5microdatahtml5
Confused ? Where to ?
• Long way before vNext is PROD everywhere
• Get started with jQuery
• Get started with REST
• HTML5
 Browser support – write-once, test-many
 Modernizr – JS library
 Sandboxed Solutions
 Next session – Elaine van Bergen
Summary
• HTML5 – what & why
• CSS3
• SharePoint 2010
• jQuery
• REST + JSON
• jQuery Templates
• SharePoint vNext (?)
• Question + Answer
References
 www.w3schools.com/html5
 html5demos.com
 jquery.com
 tutsplus.com/course/30-days-to-learn-jquery/
 Sends link to a video every day – learnt LOTS !
 SharePoint 2010 Developer Training Course
 msdn.microsoft.com/en-us/gg620703
Contact Details
 Chris O’Connor
 Senior Consultant, OBS
[email]
chris.oconnor@obs.com.au
[blog] www.sharepointroot.com
[twitter] @grumpywookie
 Come and say hello at the OBS booth – or UG
booth

Recommended for you

Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQueryBuilding intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery

This document provides an overview of building intranet applications using ASP.NET AJAX and jQuery. It discusses the technologies used, including ASP.NET AJAX, jQuery, and Rich Internet Applications. It covers development topics such as common patterns, tools, and debugging. The document also provides references and resources for further learning about ASP.NET AJAX, jQuery, and their integration.

asp.netjqueryajax
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5

Familiar HTML5 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5 HTML5 Conference Miyazaki 2013 2013/02/10 ひらい さだあき @sada_h

html5html5-miyazakihtml5j
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon

This document provides a summary of a presentation on using jQuery with SharePoint. It discusses: - Why use jQuery with SharePoint to improve visuals, usability and rapid deployment of modifications. - The basics of jQuery and how it can interact with SharePoint lists and forms through the client-side object model or SPServices. - Best practices for deploying jQuery files and debugging jQuery code in SharePoint. - Examples of using jQuery to read list items, interact with forms, and search the DOM. The presentation concluded with a demonstration of integrating Bing Maps with SharePoint using jQuery.

sptechcon
Gold Sponsors
Bronze Sponsors Media Sponsors
Silver Sponsors

More Related Content

What's hot

SPDY
SPDYSPDY
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
Ron Reiter
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
edm00se
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
MWLUG - Universal Java
MWLUG  -  Universal JavaMWLUG  -  Universal Java
MWLUG - Universal Java
Philippe Riand
 
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript DevelopereilleSpirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Tieturi Oy
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
Todd Anglin
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
Todd Anglin
 
Tips for Building your First XPages Java Application
Tips for Building your First XPages Java ApplicationTips for Building your First XPages Java Application
Tips for Building your First XPages Java Application
Teamstudio
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
HTML5 in IE9
HTML5 in IE9HTML5 in IE9
HTML5 in IE9
Buu Nguyen
 
IBM Domino Modernizing apps with Angularjs
IBM Domino Modernizing apps with AngularjsIBM Domino Modernizing apps with Angularjs
IBM Domino Modernizing apps with Angularjs
Dominopoint - Italian Lotus User Group
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
jancbeck
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!
Aleks Zinevych
 
Upgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and GotchasUpgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and Gotchas
Suzanne Dergacheva
 
Html 5 introduction
Html 5 introductionHtml 5 introduction
Html 5 introduction
Mahendra Kumar
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Peter Lubbers
 
Everything XControls
Everything XControlsEverything XControls
Everything XControls
Teamstudio
 
Get Involved with WordPress
Get Involved with WordPressGet Involved with WordPress
Get Involved with WordPress
Mario Peshev
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 

What's hot (20)

SPDY
SPDYSPDY
SPDY
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
MWLUG - Universal Java
MWLUG  -  Universal JavaMWLUG  -  Universal Java
MWLUG - Universal Java
 
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript DevelopereilleSpirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript Developereille
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
 
Tips for Building your First XPages Java Application
Tips for Building your First XPages Java ApplicationTips for Building your First XPages Java Application
Tips for Building your First XPages Java Application
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
HTML5 in IE9
HTML5 in IE9HTML5 in IE9
HTML5 in IE9
 
IBM Domino Modernizing apps with Angularjs
IBM Domino Modernizing apps with AngularjsIBM Domino Modernizing apps with Angularjs
IBM Domino Modernizing apps with Angularjs
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!
 
Upgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and GotchasUpgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and Gotchas
 
Html 5 introduction
Html 5 introductionHtml 5 introduction
Html 5 introduction
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Everything XControls
Everything XControlsEverything XControls
Everything XControls
 
Get Involved with WordPress
Get Involved with WordPressGet Involved with WordPress
Get Involved with WordPress
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 

Similar to 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Todd Anglin
 
A Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with JavascriptA Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with Javascript
SharePoint Saturday New Jersey
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
Sergejus Barinovas
 
Push it to the Edge
Push it to the EdgePush it to the Edge
Push it to the Edge
Robin-Manuel Thiel
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
TypeScript and SharePoint Framework
TypeScript and SharePoint FrameworkTypeScript and SharePoint Framework
TypeScript and SharePoint Framework
Bob German
 
Html5
Html5Html5
Html5
mikusuraj
 
Spsmi13 charts
Spsmi13 chartsSpsmi13 charts
Spsmi13 charts
Derek Gusoff
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters
 
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQueryBuilding intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Alek Davis
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
SPTechCon
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark Rackley
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
Chris O'Connor
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
Jon Galloway
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
Mark Rackley
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
Chris O'Connor
 
いま使われているHTML5と、これからのHTML5
いま使われているHTML5と、これからのHTML5いま使われているHTML5と、これからのHTML5
いま使われているHTML5と、これからのHTML5
Sadaaki HIRAI
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 

Similar to 2012 - HTML5, CSS3 and jQuery with SharePoint 2010 (20)

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
A Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with JavascriptA Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with Javascript
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
Push it to the Edge
Push it to the EdgePush it to the Edge
Push it to the Edge
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
TypeScript and SharePoint Framework
TypeScript and SharePoint FrameworkTypeScript and SharePoint Framework
TypeScript and SharePoint Framework
 
Html5
Html5Html5
Html5
 
Spsmi13 charts
Spsmi13 chartsSpsmi13 charts
Spsmi13 charts
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQueryBuilding intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
 
いま使われているHTML5と、これからのHTML5
いま使われているHTML5と、これからのHTML5いま使われているHTML5と、これからのHTML5
いま使われているHTML5と、これからのHTML5
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 

More from Chris O'Connor

Developing Mobile Apps with Office365
Developing Mobile Apps with Office365Developing Mobile Apps with Office365
Developing Mobile Apps with Office365
Chris O'Connor
 
2011 - From Zero to productivity (Tech Ed 2011)
2011 - From Zero to productivity (Tech Ed 2011)2011 - From Zero to productivity (Tech Ed 2011)
2011 - From Zero to productivity (Tech Ed 2011)
Chris O'Connor
 
2011 - jQuery + SharePoint (TechEd)
2011 - jQuery + SharePoint (TechEd)2011 - jQuery + SharePoint (TechEd)
2011 - jQuery + SharePoint (TechEd)
Chris O'Connor
 
2011 - Adding bells & whistles to the ribbon
2011 - Adding bells & whistles to the ribbon2011 - Adding bells & whistles to the ribbon
2011 - Adding bells & whistles to the ribbon
Chris O'Connor
 
2010 - Developer look at the Client Object Model
2010 - Developer look at the Client Object Model2010 - Developer look at the Client Object Model
2010 - Developer look at the Client Object Model
Chris O'Connor
 
2013 - Back to the Future with Client/Server Development
2013 - Back to the Future with Client/Server Development 2013 - Back to the Future with Client/Server Development
2013 - Back to the Future with Client/Server Development
Chris O'Connor
 
2015 - PowerShell, C# and JavaScript for Office 365
2015 - PowerShell, C# and JavaScript for Office 3652015 - PowerShell, C# and JavaScript for Office 365
2015 - PowerShell, C# and JavaScript for Office 365
Chris O'Connor
 
2014 - The Future Of Forms (InfoPath)
2014 - The Future Of Forms (InfoPath)2014 - The Future Of Forms (InfoPath)
2014 - The Future Of Forms (InfoPath)
Chris O'Connor
 
2014 - Integrating Yammer with SharePoint
2014 - Integrating Yammer with SharePoint2014 - Integrating Yammer with SharePoint
2014 - Integrating Yammer with SharePoint
Chris O'Connor
 

More from Chris O'Connor (9)

Developing Mobile Apps with Office365
Developing Mobile Apps with Office365Developing Mobile Apps with Office365
Developing Mobile Apps with Office365
 
2011 - From Zero to productivity (Tech Ed 2011)
2011 - From Zero to productivity (Tech Ed 2011)2011 - From Zero to productivity (Tech Ed 2011)
2011 - From Zero to productivity (Tech Ed 2011)
 
2011 - jQuery + SharePoint (TechEd)
2011 - jQuery + SharePoint (TechEd)2011 - jQuery + SharePoint (TechEd)
2011 - jQuery + SharePoint (TechEd)
 
2011 - Adding bells & whistles to the ribbon
2011 - Adding bells & whistles to the ribbon2011 - Adding bells & whistles to the ribbon
2011 - Adding bells & whistles to the ribbon
 
2010 - Developer look at the Client Object Model
2010 - Developer look at the Client Object Model2010 - Developer look at the Client Object Model
2010 - Developer look at the Client Object Model
 
2013 - Back to the Future with Client/Server Development
2013 - Back to the Future with Client/Server Development 2013 - Back to the Future with Client/Server Development
2013 - Back to the Future with Client/Server Development
 
2015 - PowerShell, C# and JavaScript for Office 365
2015 - PowerShell, C# and JavaScript for Office 3652015 - PowerShell, C# and JavaScript for Office 365
2015 - PowerShell, C# and JavaScript for Office 365
 
2014 - The Future Of Forms (InfoPath)
2014 - The Future Of Forms (InfoPath)2014 - The Future Of Forms (InfoPath)
2014 - The Future Of Forms (InfoPath)
 
2014 - Integrating Yammer with SharePoint
2014 - Integrating Yammer with SharePoint2014 - Integrating Yammer with SharePoint
2014 - Integrating Yammer with SharePoint
 

Recently uploaded

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 

Recently uploaded (20)

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 

2012 - HTML5, CSS3 and jQuery with SharePoint 2010

  • 1. HTML5, CSS3 and jQuery with SharePoint 2010 – what you can (and need to) start doing now MSPUG - May 2012 ~ Chris O’Connor (OBS
  • 2. About Me  Senior Consultant at OBS  Blog : www.sharepointroot.com  Twitter : @GrumpyWookie  Dad of three boys – and keen cyclist  Let’s talk MTB (!)
  • 3. Agenda  HTML5 – what & why  CSS3  SharePoint 2010  jQuery  REST + JSON  jQuery Templates  SharePoint vNext (15/2013?)
  • 4. History of the Web (HTML)  HTML 3.2 and CSS 1.0 (~1997)  Browser wars : Netscape vs. Internet Explorer  HTML 4.01 and CSS 2.0 (~1999)  Exit Netscape – Enter FireFox, Opera, Safari, etc.  XHTML 1.0 and CSS 2.1 (~2000)  HTML content pages written as valid XML documents  HTML 5 and CSS 3.0 (~2005)  Rejects the constraints added by XHTML  New HTML elements, CSS properties and JavaScript APIs ** SharePoint 2010
  • 5. Moving to HTML5 • Why ?  HTML to work consistently across all modern browsers  Eliminate need for Flash, Silverlight, etc  New JavaScript APIs  Target mobile devices - CEO's iPad !! • And, simply…  New stuff that makes sense  Evolution of the language of the web
  • 6. A new simpler DOCTYPE A new semantic element A new functional element Example : HTML5
  • 7. New HTML5 semantic tags  Layout & structure <header> <nav> <article> <section> <figure> <dialog> <aside> <time> <footer> <header></header> <nav></nav> <footer></footer> <article> <section> <h2></h2> <p></p> <p></p> </section> <section> <h3></h3> <p></p> </section> </article> <aside> <section> </section> </aside>
  • 8. New HTML5 Functional Tags  New Elements Provide Functional Behavior <canvas> <svg> [Scalable Vector Graphics – defined by XML] <audio> <video> <source> <command> <datalist> <embed> <output>
  • 9. New HTML5 Functional Tags <input type=‘TYPE’ id=‘myField’ />  New Types : tel week search time url datetime-local email number datetime range date color month placeholder
  • 10. New HTML5 Functions (API)  Additional methods & functions (JavaScript)  Geolocation  Determine current location  2D drawing  Canvas – draw lines & graphics using JavaScript  Drag and drop  Images & attachments within browser  <img draggable="true" />  Web storage  Key-value pair framework - like cookies, but much richer (tastier ?)  …. plus more http://html5demos.com
  • 11. New for CSS3  Rounded corners #example1 {border-radius: 15px;}  Text shadow #title{text-shadow: 2px 2px 2px #000;}  Gradient background: -ms-linear-gradient(top, #2F2727, #1a82f7);
  • 12. BUT…!  “Modern” browsers support portions of HTML5 specification  IE 9  Google Chrome  Mozilla Firefox v4  Apple Safari v5 (iOS)  Full HTML5 support across browsers anticipated in “2022” !  Need failback / other way to show if not supported  Avoid “if browser-x, then {aaaa}”
  • 13. What about SharePoint 2010 ? • HTML5 Master Page • Include HTML5 tags  ListView + XSLT to render HTML5  Include in Content Editor WebPart (CEWP)  Page Layout • BUT – browser support always an issue  Need to support IE8 and IE7
  • 14. HTML5 + CSS3 + SharePoint 2010 DEMO
  • 15. jQuery Fundamentals • Designed to hide differences between browsers  Eliminate browser-specific code • Focuses on two primary tasks  Retrieving sets of elements from HTML pages  Performing operations on the elements within a set • jQuery is a great alternative (safe bet)  Compared to HTML5  Browser support
  • 16. jQuery and SharePoint 2010 • Load JavaScript to SharePoint  Download jQuery (eg. jquery-1.7.1.min.js)  STYLE LIBRARY • Reference JavaScript file/s  <SCRIPTLINK> tag – in feature  <SCRIPT> tag reference – Master Page • Or – directly within CEWP or XSLT
  • 17. Feature to deploy jQuery • Create a SharePoint project in Visual Studio 2010  Create a site collection-scoped feature (i.e. scope=site)  Add a Module to deploy jQuery JavaScript files  Eg. STYLE LIBRARY or SITE ASSETS
  • 18. How to use jQuery • JavaScript code  CSS Selectors  Action <script> $('#ContactName').html('Joe Smith'); </script>  SELECT stuff…  DO stuff…  jQuery – should’ve been called jSelect (?)
  • 19. jQuery Selectors  jQuery leverages familiar CSS selector syntax
  • 20. jQuery Actions • Perform function/update to a piece of HTML  html()  addClass()  attr()  slideUp() • Most jQuery object methods support cascading calls
  • 21. jQuery Events • Document ready event handler  Executed when DOM document is ready for access  Can also dynamically add events to DOM  click()  hover()  keypress()
  • 22. jQuery UI Library • Pre-coded UI components  Based on built-in theming scheme • jQuery UI Widgets  Auto-complete  Date Picker  Slider  Progress Bar  Tabs  Accordion  Dialog http://jqueryui.com/
  • 25. REST • Previously had ASMX Web Services  Eg. GetLists, etc  Returns as XML data  Difficult to construct + call (XML packet)  New WCF REST’ful Web Services  URL based query  JSON data format returned  JavaScript Object Notation
  • 26. REST : using ListData.svc Get all items in list http://server/_vti_bin/ListData.svc Returns all items in MyList http://server/_vti_bin/ListData.svc/MyList Returns all items in MyList ordered ascending by Title http://server/_vti_bin/ListData.svc/MyList?$orderby=Title Returns all items in MyList that has a column that equal to 'Music' http://server/_vti_bin/ListData.svc/MyList?$filter=MyColumn eq 'Music'
  • 27. jQuery + REST • jQuery provides methods to call across network  Call to REST-based Web services (ListData.svc)  Delegate for OnSuccess + OnError  Returns results in JSON format
  • 28. jQuery+ REST + SharePoint 2010 DEMO
  • 29. jQuery Templates • Layout for displaying data collections rendered as HTML  Create layout within JavaScript  using literal HTML and tokens  Just like XSLT – only easier (!)  Render data + layout  tmpl() method  Process template once for each item in collection
  • 30. Bring it all together  jQuery  Call to REST web service  REST  SharePoint List Data  JSON data returned  jQuery Template  HTML template
  • 35. Demo jQuery + REST + jQuery Templates
  • 36. SharePoint vNext • Think more about dev. with client-side  REST  jQuery  HTML5 ? Maybe – browser dependant • Office 365  Combined code-base w/ SharePoint 15  SandBoxed Solutions – or Client Side • Windows 8  HTML+jQuery – apps
  • 37. Confused ? Where to ? • Long way before vNext is PROD everywhere • Get started with jQuery • Get started with REST • HTML5  Browser support – write-once, test-many  Modernizr – JS library  Sandboxed Solutions  Next session – Elaine van Bergen
  • 38. Summary • HTML5 – what & why • CSS3 • SharePoint 2010 • jQuery • REST + JSON • jQuery Templates • SharePoint vNext (?) • Question + Answer
  • 39. References  www.w3schools.com/html5  html5demos.com  jquery.com  tutsplus.com/course/30-days-to-learn-jquery/  Sends link to a video every day – learnt LOTS !  SharePoint 2010 Developer Training Course  msdn.microsoft.com/en-us/gg620703
  • 40. Contact Details  Chris O’Connor  Senior Consultant, OBS [email] chris.oconnor@obs.com.au [blog] www.sharepointroot.com [twitter] @grumpywookie  Come and say hello at the OBS booth – or UG booth
  • 41. Gold Sponsors Bronze Sponsors Media Sponsors Silver Sponsors

Editor's Notes

  1. Chris O’Connor (OBS) chris.oconnor@obs.com.au
  2. HTML5 example – sample ‘page’ – not necessarily ASP.NET or SharePoint – but just as an example
  3. Good description : http://www.ibm.com/developerworks/library/x-html5/
  4. EXAMPLES : <input list="browsers" name="browser" /> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>   <video width="320" height="240" controls="controls">   <source src="movie.mp4" type="video/mp4" />   <source src="movie.ogg" type="video/ogg" />   <source src="movie.webm" type="video/webm" /> <i>Your browser does not support the video tag.</i> </video> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
  5. Drag + drop to document library – in SharePoint vNext – wouldn’t that be cool ?!?
  6. Other links : http://www.css3.info/preview/multiple-backgrounds/ http://css-tricks.com/examples/CSS3Gradient/
  7. Master page – using Header, Nav, Content, Footer
  8. REST = Representational state transfer JSON = JavaScript Object Notation
  9. Turn off feed view http://www.walkernews.net/2007/03/25/ie-7-xml-feed-display-rss-feed-validation/ Comes back as RSS feed – need to view as XML