#SP24 : SP2013 New methodology on Branding by Khoa Quach

@niftykhoa in #SP24S007 "Branding in SharePoint 2013" demoed New way to brand the SP Sites.

Tools and libraries:

• Visual Studio 2012/2013
• SPD 2013
• Web Development Editor/Tool and mapped drive to asset library in SP2013.

Optional libraries:

• jQuery
• Boostrap.js
• Angular.js, Backbone.js, Ember.js
• Knockout.js
• CoffeScript.js

Rendering page in SP = Master page + Page Layout + page (content)

New branding methodology in SP2013:
Device channel + master page => the design for mobile
Device channel has User agent string to identity the mobile (to get agent string - http://useragentstring.com/)
After identifying the device channel, create a custom master page  and link that page to a channel

Design manager
Allows web designer do the web design in html and upload that into the design manager, which converts the html into master page
In case you need to modify markup stick either with master page or html. Preferably, modify only html to keep automotive conversion going smoothly.

Add additional elements into the markup via snippet gallery.

Utilize JSlink

#SP24 : SPOnline public site branding issues

@gusfrases presented #SP24S067 Office 365 Public Websites The Good The Bad 

the Ugly #SP24 Online conference. The ugliest part was the most attractive one.

In that part he showed the challenges and issues around branding of a SPOnline public facing site.

Here are the most prominent challenges and issues:

Mobile

No customizable device channels

Anonymous users issues

• Can't use search refiners
• No REST API (What Every Developer Needs to Know About SharePoint Apps, CSOM, and Anonymous Publishing Sites)

Workaround:

Sandbox solution

JSlink (and yes, you can do a multiple JSLinks ListView Web Part issues with JSLink and Display Templates – A solution?)

• No cache

Not a real workaround for cache issue:

 CDN for jQuery
 Client -side options for caching
 Lazy load;
 Content optimization

>> Takeaway>> NO for a Search-driven application on SPOnline public anonymous sites

Site management issue

No UI for Site columns, content types, search schema and creation of the subsite

Some default site templates are not available

Workaround:

Some features are accessible through direct links, some via SPD.

User Code Service not reliable in O365

Instead of Sandbox solution, consider JSLink when possible

>>Takeaway>> Why and why not to use SPonline for public facing sites?

*Search = OOTB Search

Resources:

Variation of the slide deck on Public Site on SPOnline limitations by @gusfraser 

Blog by Gus Frases
SPOnline Public Site with search which is possible built by Gus Frases

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

SharePoint UX: Styling and Branding . Do it right

Several weeks ago I have realized that I have been working with SharePoint last 3 years and it never occurred to me that I did nothing regarding User Experience and Design in SharePoint.

I have just accepted the things as they are in SharePoint... and I know for clients sometimes it really hurts to learn where to click to get some work done.

So, I have decided to improve life of business users who work with SharePoint via learning how to make SharePoint experience more user friendly. and I knew only one person who can help me with that - Kyle Schaeffer

This week I have got an opportunity to be in his (Dulles, VA) class SharePoint Designer 2010 Styling and Branding Week. The class is 4 days long, I have decided to take the last part - Level II:

Day 3: Working with Layouts, Styling SharePoint Components (Blogs, Wikis, MySites,Discussion Boards)

Day 4: Enhancing the User Experience with JQuery and other Advanced Techniques

Overall, the class worked for me. I have been confirmed that there are people who can do design SharePoint 2010 in the way that doesn't brake SharePoint. And also it was reaffirming to know that there is an example of successful SharePoint integration company who knows what are the strengths and weaknesses of SharePoint and willing to work with it.

I am fully aware of reservations that clients might have when they hear the word "SharePoint". They heard it's hard to customize and hard to work with.

And I can see why these opinions exist. I believe if SharePoint isn't used right it will do more harm than good not only for clients, but for company who is trying to integrate it.

So, let's do it right! Let's educate ourselves when SharePoint is appropriate and when it's not. And if it's a appropriate for SharePoint, let's integrate it in the right way... and finally let's design the sites in the way it's comfortable to users to use.

 The topic - when SharePoint is appropriate is still an open topic for me... I hope to get more insights in this area. Your suggestions are warmly welcome.

How to integrate in the right way? - I have got some experience in this sphere:
http://sharing-the-experience.blogspot.com/search/label/Best%20Practices

And lastly, how to design SharePoint - this is what next several posts are all about:

SharePoint UX: Styling and Branding. Design strategy

SharePoint UX: Styling and Branding. Design implementation

Other good links to have (for SharePoint html work):
startermasterpage.codeplex.com
http://responsivesharepoint.codeplex.com/

MVC: Htmlhelper. Make the markup clean

This is a quick post, mostly for myself, to remember a great concept of HtmlHelper in MVC.

Since, I have never worked before with MVC, I am really pleased to see how web pages look much cleaner in MVC than in ASP.Net Web forms.

One way to achieve cleanness in the asp.net page is to use HtmlHelper class from System.Web.Mvc

instead of standard HTML markup.

Here is a quick example:

You want to show the picture in your page. The old way to do it:

@foreach (var item in Model)
{
     @: Review
     <div class ="review">
     <h4>@item.Restaurant.Name</h4>
     <img src=" item.Restaurant.ImageUrl" alt="item.Restaurant.Nam " />    
     </div>
}

This approach will add more markups in you page + you will need to get rid of the automated encoding of the string inside that code block.

Here is a nicer way to go:

@foreach (var item in Model)
{
     @: Review
     <div class ="review">
     <h4>@item.Restaurant.Name</h4>
     @Html.Image(item.Restaurant.ImageUrl, item.Restaurant.Name)
     </div>
}

     

Wait a minute, there is no method HtmlHelper.Image.... 

Here is a perk, do your own extension for HtmlHelper:

 public static class MyHelpers
    {
        public static MvcHtmlString Image (this HtmlHelper helper,string src, string AltText)
        {
           
            var builder = new TagBuilder("img");
            builder.MergeAttribute("src", src);
            builder.MergeAttribute("alt", AltText);
            return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
        }
    }

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!