SharePoint UX: Styling and Branding. Design implementation

Previous related posts:

SharePoint UX: Styling and Branding. Design strategy

SharePoint UX: Styling and Branding . Do it right

Other important course on general UX: Daily UX Crash course (free and simple) 31 days in a row

Last day Kyle Schaeffer in his Styling and Branding class dove deeper into jQuery and how to use it to enhance User Experience in SharePoint portal.

Kyle said it clearly and easy to remember:


CSS is all about presentation

HTML is all about structure

JavaScript is all about behavior. (Jquery should enhance the interface but your basic structure should be functional even without jQuery)

Remember this and you design will be easy to manage.

This post is all about sharing resources that will get you started with such customization:

What to learn:

Fun resource to learn javascript, web fundamentals, jQuery

A free and recommended by Kyle book on html5

Recommended by Kyle a book to buy if a free book is not enough for you

What to do:

Pure design:

Image generator lorempixel

Text generator lipsum

Design site palette easy

Google Web Fonts

Web coding:

SharePoint blank master page starter

An example of quick jQuery magic - WP Tabify: transform a SharePoint web part zone into tabs

jQueryui - animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library

SPservices - jQuery library which abstracts SharePoint's Web Services and makes them easier to use


Do you want implement slide Image Carousel into your page?
Refer to: jQuery Cycle Plugin

The quick signposts to implement it in SharePoint:
Picture Library -> Content Query WP -> Item Style -> jQuery Script with jQuery Cycle Plugin

P.S. Item style is to change the presentation of the data

P.S.S. Not from Kyle but worth to know: Top 10 Mistakes in SharePoint 2010 Branding and UI Design

HTML5/jQuery Webinar Week: Building a Real World HTML5&jQuery line of busines App with Infragistics &KnockoutJs

Infragistics organized HTML5/jQuery Webinar Week on 06/19-06/21.http://www.infragistics.com/resources/webinars.aspx

Here are quick notes on the June 21, 2012 - Building a Real World HTML5&jQuery line of busines App with Infragistics &KnockoutJs (Advanced  level)

All demo materials will be posted on  http://blogs.infragistics.com/blogs/jason_beres 
The webinar was totally focused on Infragistics product - netAdvantage for jQuery (based on jQuery, all-in-the-web , no plugin is needed).

In demo material you will see demonstration of CRUD, multiple controls and their interaction.


The whole set of the demonstrated controls aims one goal: Data Visualization

The demonstrated Grid and Chart are developed using:
 - ASP.Net MVC 3
- Infragistics jQuery Grid, Map and Loader
- KnockoutJS

The library also includes controls for line of business: Tree, Players, Upload.

For me the whole series of the Infragistics webinar were useful.
I have been out from web development for almost 2 years.
So, it was a good start for my web development self-education.

Here are the links can be useful in case I have decided to spice my web project up:

http://samples.infragistics.com/jquery
You can click through controls, the feature list is intergactive. So you can check possibilities of the Infragistics controls.

http://community.infragistics.com

http://blogs.infragistics.com
http://forums.infragistics.com

HTML5/jQuery Webinar Week: Getting Data into Your HTML5 & jQuery Apps with the igDataSource Control

Infragistics organized HTML5/jQuery Webinar Week on 06/19-06/21.
http://www.infragistics.com/resources/webinars.aspx


Here are quick notes on the June 20, 2012 - Getting Data into Your HTML5 & jQuery Apps with the igDataSource Control (Intermediate  level)
All demo materials are posted on Webinar Followup: Working with Data in jQuery & HTML with igDataSource. 


Today's webinar was totally focused on Infragistics controls:
 - igDataSource;

 - igGrid 

 - igChart;

 - igLoader

These controls,a jQuery component, a simplify data access and management.

igDataSouce can work with:

On the Server side : Data (web services), REST GET, WCF REST (JSON&XML), JSONP Service, any Rest Service


On the Client side : binding with:JSON, XML, JavaScrip Object Arrays,Strings of XML or JSON,
JavaScript functions returning data in any of the formats above
 - Existing HTML structures (such as a HTML table filled with data)
-  Mashup scenarios

igGrid:
Supported features:
Local and remote data Paging
Sorting
Filtering
Data schema support: translate data from many
sources into a consistent format
multitouch, can be used in the tablet development;



igLoader:

Minifies the amount of the jscript to load.
You can load only that you need.

If you are interested to try the product, go to http://www.infragistics.com/downloads/default.aspx
and download:
NetAdvantage Reporting 2012 Vol. 1 Product And Samples

HTML5/jQuery Webinar Week: HTML5&jQuery - the Fundamentals. HTML5 Cheat Sheet

Infragistics organized HTML5/jQuery Webinar Week on 06/19-06/21.
http://www.infragistics.com/resources/webinars.aspx

Here are quick notes on the June 19, 2012 - Getting Started with HTML5 / jQuery webinar.
It's been announced that all demo materials are posted on jQuery & HTML5 Fundamentals Webinar Followup

What's HTML5 anyway?


HTML5 is "to be standard-based" and plug-in free web experience:
- html tags;
- JavaScript API's
- CSS (CSS3)

HTML5 should be standardized , but still it's in a draft version in W3C


So that means, Not every HTML5 tag is supported by every browser.

The standardization of HTML5 is driven by Microsoft, Apple, Google, which is a really good sign to make it a widespread technology.

Competitors:
 - Adobe Flash;
 - Microsoft Silverlight

HTML4 vs HTML5

Generic tags replaced with semantic tags

<object> = <video>
<div> = <footer>
<span> = <nav>

HTML5 Cheat Sheet tags is a great info  to have when you are coding in HTML5.
You want to escape old tags of old HTML, since they are depreciated.

HTML5 Cheat Sheet By InMotion Hosting - A Dedicated Server Provider

HTML5 Canvas Cheat Sheet

It's claimed that HTML5 is SEO friendly.
Here is a good attitude toward this claim in Is HTML5 Good for SEO?

Syntax of HTML5 controls visual attribute of the elements, has a syntax of animation similar to Silverlight

A few Javascript enhancement in HTML5:
 - Geo location
 -  Local storage - like isolated storage in .Net

jQuery - an open source js library,
VS suppports jQuery intellisense. VS2010\2012 shipped jQuery by default.

jQuery libraries: UI, Core and Mobile

jQuery can :
-Get\Post;
-call WebServices;
- work with oData

UI jQuery library can be downloaded with specific theme via ThemeRoller on jqueryui.com

One of the basics in the jQuery - use of selectors ("$").
You can select element by:
 - controlid  - $("controlid");
-  element type and if necessary select the specific id in those preselected elements - $("element"#"id")

And as a last note on  new element <video> :
<video>
<source 1>
<source 2>
</video>
Since not all codecs are supported by every browser , you can specify multiple elements of <source> to cover major browsers. It will check the right encoded video for the specific browser.

HTML5, here I come!