sea 2011 presentation
TRANSCRIPT
PLATINUM SPONSOR
GOLD SPONSORS
UI FRAMEWORK FOR SHAREPOINT 2010
BRANDING AND PUBLIC FACING SITES
Hasanga H Abeyaratnehttp://about.me/hasanga
ON YOUR MARKS! GET SET!
• You can live tweet the session with #SPUIKIT with #SEASPC
• QA session in the final 10 minutes• Send questions on my twitter handle
@hasanga
SharePoint is the experience layer through which people interact with your business
- Ryan Duguid
SHAREPOINT BRANDING
THERE ARE MANY WAYS TO SKIN A CAT
ALSO SHAREPOINT
WHEN YOUR WAY, IS THE WRONG WAY
SUCKER PUNCH!!!
WHY A FRAMEWORK FOR SHAREPOINT BRANDING• It’s a platform to get you started• It’s a collection of repeated elements• It improves uniformity and there by
improves manageability• It gets you faster and predictable
results
FRAMEWORK WALKTHROUGHDEMO
THAT’S ONE SET OF PROBLEMS THERE ARE MORE…• Well that was simple but it still doesn’t
explain why it must work this way
• It works on the HTML template but not when I moved to the SharePoint master page!
• Huh! We finally found that CSS is over-ridden by SharePoint core.css file
AND MORE…
• It took me a whole night to figure how to get that Jquery plugin working in there!
• Why won’t that footer stick to the page bottom when the page is short?
• Arrrrggg! It works in Firefox and IE 7 and 9!! But why not in IE 8? #$#%@^@
SO WHY IS IT PROBLEMATIC?• Because Devigners are rare
“We can do HTML and CSS in our sleep, read a C# or VB file and don't go running and screaming away from XML.“
- Heather Solomon
FOR INTRANETS
• SPUIKit includes customV4.master page
• Custom Page Layouts
• Reusable UI Elements
• A fluid width CSS Grid
• Solutions for common V4.master compatibility issues
LET’S CREATE A PAGE LAYOUTDEMO
FOR INTERNET - PUBLIC FACING SITES
• SPUIKit includes publishing.master page
• Reausable UI Library for common widgets
• Custom Item styles
• Solutions for common SharePoint cross browser compatibility issues
INCLUDING A JQUERY PLUGINDEMO
LET’S SEE IF I CAN ANSWERQuestions?
SPUIKIT IS FOR YOU…
• Less screaming and hair pulling when you get around to testing
• Complex designs / 3rd party widgets are made relatively simple to produce
• Improves visual assembly of page elements and there by UX
• Flexible and solves your branding problems
http://spuikit.codeplex.com
Go Grab it now!
Thank you to all of our SponsorsPLATINUM SPONSOR
SILVER SPONSORS
GOLD SPONSORS
BRONZE SPONSORS