7 Pages of notes here, so this may be somewhat disjointed as well…
Editing Master Pages/Page Templates
For the Master Pages / Page Templates library, the default has been changed such that it is no longer set to require check-in/check-out. This was done to facilitate using 3rd party editors, after mapping a drive to the library.
Now, you still have versioning, and you still need to log into SPD or SP in order to publish things live, so that’s good.
Device Channel
New info, and the first time I didn’t immediately hear “don’t use this” (though one presenter was still leaning towards responsive design).
It’s not just targeting Master Pages at something specific like an iPhone 5 … you could do iPhones, All Phones, or just things with a specific browser size.
This is looking like a possibility again if we’re using “One Mobile Design to rule them all”
Should we go this route, we could use a version of my news sync program in order to update the Master Pages if needed across all sites.
Though you can deploy this data as a solution, apparently it won’t simply replace files that are already there!
That being said, we may well just do some responsive design.
Image Renditions
This is one of the first things I heard about SP2013 months ago that got me excited for it.
You can set up rules that you want specific thumbnails created inside an Image Library.
Want every image to have a 320×240 thumbnail? Can do.
What if the original is portrait? You can set up rules telling it how to crop!
No More Activex!!!
No longer is Design View, export to excel, etc restricted to IE! Activex controls have been ditched in favor of HTML5 and the like. And thank god.
Speaking of that, there’s some new HTML5 drag & drop functionality added to libraries! Now you can just drag a Word Doc (Image, etc) right onto the Library and it’ll upload! Works in all modern browsers.
Heck, you can even open up two sharepoint libraries and drag stuff between them.
Oh, and speaking of DataSheet view, there is an undo; it’s hidden in a little bar on the far right of the ribbon that you can drag out.
Following Content
Users can ‘follow’ content so that they can track it on their ‘My Site’. Some self selecting Dashboards could be made this way.
Web Parts on Master Pages
Alternative to my current method (which isn’t pretty), we can use some CSOM, or the spservices js library to build our Power Footer and our ‘What Can You do with X Degree” rotators.
Note: Check out Balsamic for making wireframes
Resources for Learning CSS/HTML
www.codeacademy.com
w3schools.com
simplebits.com/publications/bulletproof (ebook)
C# Project Idea
I could roll my own Custom Navigation Menu in Visual Studio if the SP nav gets troublesome.
Alternative Styling Methods
In 2013, when you spin up a new site, the right column has a bunch of resources for the “Visual Designer” person.
Composed Looks are pre-made themes, and you can roll your own (called Design Packages).
Within SP, you go to ‘Design Manager’ to do a lot of this stuff.
We could, in lieu of a Template site, roll our own Design Package.
Existing Design Packages use CSS3 styles that are widely supported and which fail gracefully on older browsers that do not support them.
Master Pages can be chosen as a Layout in Designer if they have a .preview file attached to them. To make a .preview file, just copy the one from oslo or seattle and rename it.
If you go to the Composed Looks List shows everything you have access to.
Home > Theme Gallery > 15 in SP Designer has a bunch of resources including Color Palletts and Web Fonts used by Designer.
Note on Color Pallets, they use an 8 bit Hex code …. first two bits are opacity, last 6 are color.
This stuff can mix well with direct editing of CSS and Master Pages after this gets you 80% of the way there.
Note: Presenter was editing his files in “Adobe Edge Code” which looked to have some advantages.
It’s interesting how the HTML and master files linked together.
Whether you create a master file from an HTML file or just work with oslo or seattle, you change the Master only by editing the HTML file. You never touch the Master File directly.
Note: You’ll need to publish these to use them, which may slip your mind if you’re editing in an external editor for the first time.
Whilst you’re making/editing your HTML file, how do you get SP to put it’s stuff in the right place? You do this by using the “Snippits” section in SP’s Design Manager, and copying & Pasting the snippits into the HTML file.
Note: You can insert Web Parts directly into the Master Page here where you’re adding the Snippits!
So, the reason the HTML > Master Page concept is attractive to folks is that you can, to a degree, let the Designer ignore that they’re designing for SP, and then you Build SP into their design.
However, the closer the designer gets to SP’s HTML, the easier it is for the SP person to adapt it … If the designer uses SP’s HTML structure and CSS classes to begin with, it saves work.
To that end, Heather Solomon (SP2010) and Benjamin Niaulin (SP2013) have ‘cheat sheets’ of a sort for knowing how SP builds certain things.
Note: bootstrap is apparently a cool site
Now, everything you can do with Master Pages in Design Manager, you can also do with Page Layouts; it even has it’s own snippits section.
JS Linking Note
When linking JS, it’s best not to use “http://” or “https://” but instead simply “//” … your browser will use the right one to match the page it’s called from.
HTML5 and CSS3
It may be worth investigating these, support seems to be much stronger for these lately, and they may not have the same problems they had 1-2 years ago when I looked last.
Developing in Chrome??
Chrome may be the best browser for testing JS in, as it’s easiest to see how events are bound there.
jQuery jQuery jQuery
I need to beef up on selectors, there’s some stuff they showed that was new to me …
$(“a:eq(1)”) means select the 2nd anchor tag.
$(“a:not(:eq(0)) means select every anchor tag except the first.
The Slide Deck will have a big list of selector tag logic, but here’s some for now
- != is ‘not equal’ (duh)
- ^= is ‘starts with’
- $= is ‘ends with’
- *= is ‘contains’
- |= is ‘containsprefix (not sure what they meant here)
jQuery has plenty of it’s own transitions like
- slideup
- fadeout
- animate
So, we may really be able to toss jQueryUI … and I should use these to pretty up My Accordion a bit.
Note: There also may be HTML5 and CSS3 ways to do these things, and it would be wise to know them and to know how well they’re supported.
spServices
This library was mentioned a lot, and I need to look into it.
Though, to be fair, it was mentioned most by the guy who wrote it. 🙂
Still, it looks like it has some really cool stuff in it. Must investigate.
I may also want to take a look at spxslt … written by the same guy.
More CSOM
REST is apparently all the rage now
MS is using OData, an open standard, and is doing it by the book … mostly
JSOM is an alternative to REST, though it looked clunkier
Other JS Stuff
JS Loading on demand note: labjs is one way to do JS on demand well.
Also, SP has a Script on Demand feature that I may need to look at again.
JSLint is one way to check your JS for crappyness
JSHint is a less psychotic checker that’s also more jQuery aware
Also JS CompressorRater is a site that you can go to that will show you what will happen if you minify your code a bunch of different ways so you can pick the best method for you.
