Embed Size (px)
Citation preview
Starting From the Top:Implementing SharePoint 2013
Master Pages using Dreamweaver and Design Manager
Troy LanphierSenior SharePoint Solutions Developer –
GUIO,LLC
Special Thanks to our Platinum Sponsor
…and our Gold Sponsor
WHO’S THIS GUY, AND WHY IS HE TALKING ABOUT SHAREPOINT?
WHO’S THIS GUY, AND WHY IS HE TALKING ABOUT SHAREPOINT?
TROY LANPHIER, MCT, MCSE
• BACKGROUND IN SERVER INFRASTRUCTURE, STORAGE DESIGN, AND DISASTER RECOVERY
• STRICTLY FOCUSED ON THE SHAREPOINT PLATFORM SINCE SHAREPOINT 2003 BETA
WHO’S THIS GUY, AND WHY IS HE TALKING ABOUT SHAREPOINT?
TROY LANPHIER, MCT, MCSE
• BACKGROUND IN SERVER INFRASTRUCTURE, STORAGE DESIGN, AND DISASTER RECOVERY
• STRICTLY FOCUSED ON THE SHAREPOINT PLATFORM SINCE SHAREPOINT 2003 BETA
TECHNICAL EDITOR AND AUTHOR FOR O’REILLY/MICROSOFT PRESS• CO-AUTHOR/TECH EDITOR OF MICROSOFT SHAREPOINT FOUNDATION 2010 INSIDE OUT
• AUTHOR OF EXAM REF 70-331, CORE SOLUTIONS OF MICROSOFT SHAREPOINT SERVER 2013
WHO’S THIS GUY, AND WHY IS HE TALKING ABOUT SHAREPOINT?
TROY LANPHIER, MCT, MCSE
• BACKGROUND IN SERVER INFRASTRUCTURE, STORAGE DESIGN, AND DISASTER RECOVERY
• STRICTLY FOCUSED ON THE SHAREPOINT PLATFORM SINCE SHAREPOINT 2003 BETA
TECHNICAL EDITOR AND AUTHOR FOR O’REILLY/MICROSOFT PRESS• CO-AUTHOR/TECH EDITOR OF MICROSOFT SHAREPOINT FOUNDATION 2010 INSIDE OUT
• AUTHOR OF EXAM REF 70-331, CORE SOLUTIONS OF MICROSOFT SHAREPOINT SERVER 2013
WHAT WE’RE FOCUSED ON TODAY
WE HAVE ABOUT 55 MINUTES LEFT – IN THAT TIME, WE HAVE FIVE THINGS TO DO :
• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER
WHAT WE’RE FOCUSED ON TODAY
WE HAVE ABOUT 55 MINUTES LEFT – IN THAT TIME, WE HAVE FIVE THINGS TO DO:
• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE
WHAT WE’RE FOCUSED ON TODAY
WE HAVE ABOUT 55 MINUTES LEFT – IN THAT TIME, WE HAVE FIVE THINGS TO DO:
• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE• NO, THAT’S NOT A TYPO, I REALLY DID MEAN HTML - NOT ASPX
WHAT WE’RE FOCUSED ON TODAY
WE HAVE ABOUT 55 MINUTES LEFT – IN THAT TIME, WE HAVE FIVE THINGS TO DO:
• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE• NO, THAT’S NOT A TYPO, I REALLY DID MEAN HTML - NOT ASPX
• TAKE A FIRST LOOK AT DESIGN MANAGER, FOCUSING ON ITS INTERACTION WITH MASTER PAGE DESIGN
WHAT WE’RE FOCUSED ON TODAY
WE HAVE ABOUT 55 MINUTES LEFT – IN THAT TIME, WE HAVE FIVE THINGS TO DO:
• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE• NO, THAT’S NOT A TYPO, I REALLY DID MEAN HTML - NOT ASPX
• TAKE A FIRST LOOK AT DESIGN MANAGER, FOCUSING ON ITS INTERACTION WITH MASTER PAGE DESIGN
• DISCUSS WHAT IS (AND ISN’T) READILY AVAILABLE WITHIN DESIGN MANAGER
WHAT WE’RE FOCUSED ON TODAY
WE HAVE ABOUT 55 MINUTES LEFT – IN THAT TIME, WE HAVE FIVE THINGS TO DO:
• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE• NO, THAT’S NOT A TYPO, I REALLY DID MEAN HTML - NOT ASPX
• TAKE A FIRST LOOK AT DESIGN MANAGER, FOCUSING ON ITS INTERACTION WITH MASTER PAGE DESIGN
• DISCUSS WHAT IS (AND ISN’T) READILY AVAILABLE WITHIN DESIGN MANAGER
• CONVERT AND APPLY OUR MASTER PAGE
THE PROBLEMWE BUILD A LOT MORE INTRANET (COLLABORATIVE) SITE COLLECTIONS THAN INTERNET (PUBLISHING ONLY) SITE COLLECTIONS• DESIGN MANAGER ISN’T AVAILABLE IN COLLABORATIVE SITE TEMPLATES
THE PROBLEMWE BUILD A LOT MORE INTRANET (COLLABORATIVE) SITE COLLECTIONS THAN INTERNET (PUBLISHING ONLY) SITE COLLECTIONS• DESIGN MANAGER ISN’T AVAILABLE IN COLLABORATIVE SITE TEMPLATES
THE SOLUTIONFIND A WAY TO ENABLE DESIGN MANAGER
THE PROBLEMWE BUILD A LOT MORE INTRANET (COLLABORATIVE) SITE COLLECTIONS THAN INTERNET (PUBLISHING ONLY) SITE COLLECTIONS• DESIGN MANAGER ISN’T AVAILABLE IN COLLABORATIVE SITE TEMPLATES
THE SOLUTIONFIND A WAY TO ENABLE DESIGN MANAGER
WHY CAN’T WE JUST USE PUBLISHING SITE TEMPLATES ALL THE TIME, THEN? – HERE’S WHY…
SETTING UP YOUR SHAREPOINT SITE FOR DESIGN MANAGERPUBLISHING SITES ARE ALREADY SETUP FOR DESIGN MANAGER, BUT THEY’RE NOT TERRIBLY USEFUL AS INTRANET SITES• OUT OF THE BOX, SEVERAL INTRANET FEATURES ARE NOT ENABLED
AT THE SITE COLLECTION LEVEL- LIBRARY AND FOLDER BASED RETENTION
- SHAREPOINT SERVER ENTERPRISE SITE COLLECTION FEATURES (!!!)- NO INFOPATH FORMS SERVICES, VISIO SERVICES, ACCESS SERVICES, OR EXCEL
CALCULATION SERVICES
- SHAREPOINT SERVER STANDARD SITE COLLECTION FEATURES- USER PROFILE SERVICES AND SEARCH (FROM THE SHAREPOINT SERVER STANDARD LICENSE)
- SITE POLICY (RETENTION SCHEDULES)
- THREE STATE WORKFLOWS
SETTING UP YOUR SHAREPOINT SITE FOR DESIGN MANAGERPUBLISHING SITES ARE ALREADY SETUP FOR DESIGN MANAGER, BUT THEY’RE NOT TERRIBLY USEFUL AS INTRANET SITES• EVEN WORSE, MORE CRITICAL INTRANET FEATURES ARE NOT ENABLED
AT THE SITE LEVEL- MINIMAL DOWNLOAD STRATEGY
- ONLY DOWNLOADS THE PORTIONS OF A PAGE THAT CHANGE
- MOBILE BROWSER VIEW (FOR DOCUMENT LIBRARIES AND LISTS)
- SHAREPOINT SERVER STANDARD AND ENTERPRISE FEATURES (IFS, AS, VS, AND ECS – AGAIN)
- TEAM COLLABORATION LISTS
- NO DOCUMENT LIBRARIES, ISSUES LIST, ETC.
- NO WIKI HOME PAGE
- WAIT, WHAT – NO, I DON’T USE WIKI PAGES! (WE’LL COME BACK TO THIS SHORTLY – READ ON)
SETTING UP YOUR SHAREPOINT SITE FOR DESIGN MANAGER
INSTEAD OF BUILDING A PUBLISHING SITE, WE CHOOSE TO ENABLE PUBLISHING ON A COLLABORATIVE SITE• HERE’S WHAT WE NEED
- ENABLE SHAREPOINT SERVER PUBLISHING INFRASTRUCTURE AT THE SITE COLLECTION LEVEL
- ENABLE SHAREPOINT SERVER PUBLISHING AT THE SITE LEVEL
- SWITCH FROM A WIKI WELCOME PAGE TO A PUBLISHING WELCOME PAGE
- THIS IS OPTIONAL, BUT RECOMMENDED.
DEMO 1
ENABLING PUBLISHING FEATURES IN A COLLABORATIVE SHAREPOINT
SITE
WHAT WE’RE FOCUSED ON TODAY
HOW ARE WE DOING FOR TIME?• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER -
CHECK
MAPPING A DRIVE TO THE DESIGN FILES
NOT REALLY A WHOLE LOT DIFFERENT FROM MAPPING A STANDARD NETWORK DRIVE• WORKS THE SAME WHETHER YOU ARE IN AN ON-PREMISE
SHAREPOINT 2013 INSTALLATION OR IN A CLOUD BASED, OFFICE 365 INSTALLATION
MAPPING A DRIVE TO THE DESIGN FILESSELECT THE DESIRED DRIVE LETTER AND THEN PASTE IN THE URL FROM DESIGN MANAGER
OPTIONALLY, YOU CAN CHOOSE TO CONNECT USING DIFFERENT CREDENTIALS
MAPPING A DRIVE TO THE DESIGN FILESENTER YOUR CREDENTIALS
IMPORTANT – SELECT “REMEMBER MY CREDENTIALS”
MAPPING ERROR
OCCURS MOST OFTEN WHEN MAPPING THE DESIGN FILES IN OFFICE 365
IMPORTANT – SELECT “REMEMBER MY CREDENTIALS”, AS SHOWN IN THE PREVIOUS STEP.
DEMO 2
MAPPING A DRIVE TO THE SHAREPOINT DESIGN FILES
WHAT WE’RE FOCUSED ON TODAY
TWO DOWN, THREE TO GO• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER –
CHECK
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE – CHECK
DESIGN MANAGER OVERVIEW
DESIGN MANAGER IS A NEW FUNCTIONALITY IN SHAREPOINT 2013• ADDRESSES MAJOR BRANDING AND DESIGN REQUIREMENTS FOR
SHAREPOINT, INCLUDING:- DESIGN CHANNELS
- PLACING DESIGN FILES WITHIN SHAREPOINT FOR USE
- EDITING MASTER PAGES
- EDITING DISPLAY TEMPLATES (SEARCH AND SEARCH-RELATED ITEMS)
- EDITING PAGE LAYOUTS
- PUBLISHING AND ASSIGNING YOUR DESIGN
- PACKAGING UP YOUR DESIGN AS A SOLUTION
• WORKS THE SAME WHETHER YOU ARE IN AN ON-PREMISE SHAREPOINT 2013 INSTALLATION OR IN A CLOUD BASED, OFFICE 365 INSTALLATION
DESIGN MANAGER OVERVIEW
MASTER PAGES WITHIN SHAREPOINT 2013• START AS AN HTML DESIGN WITH NO CONTROLS SPECIFIED
(THE CORE HTML DESIGN YOU CREATE IN ADOBE DREAMWEAVER)
• HAVE “SNIPPETS” COPIED IN FROM THE SNIPPET GALLERY TO PROVIDE SHAREPOINT-SPECIFIC FUNCTIONALITY
- TOP AND VERTICAL NAVIGATION
- SEARCH BOX
- SITE TITLE AND LOGO
- SIGN IN CONTROL
• ALL DESIGN MANAGER SNIPPETS ARE CONTAINED WITHIN A <DIV> TAG AND BEGIN WITH A TAG THAT LOOKS LIKE “<!--CS:”>
DEMO 3
REVIEWING THE OUT-OF-THE-BOX SHAREPOINT MASTER PAGES
WITH DREAMWEAVER
WHAT WE’RE FOCUSED ON TODAY
THREE DOWN, ALMOST HOME• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER –
CHECK
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE – CHECK
• TAKE A FIRST LOOK AT DESIGN MANAGER, FOCUSING ON ITS INTERACTION WITH MASTER PAGE DESIGN – CHECK
BUILDING A BASIC SITE WITH DESIGN MANAGER• UPLOAD THE HTML FILE – MAKE SURE YOU SAVE A
COPY FIRST- NOTICE THAT THE HTML FILE IS FUNDAMENTALLY
REWRITTEN TO SUIT SHAREPOINT
- WE’RE CHEATING – I BUILT A REALLY CRUMMY HTML PAGE WITH MINOR BRANDING IN IT
BUILDING A BASIC SITE WITH DESIGN MANAGER• UPLOAD THE HTML FILE – MAKE SURE YOU SAVE A
COPY FIRST- NOTICE THAT THE HTML FILE IS FUNDAMENTALLY
REWRITTEN TO SUIT SHAREPOINT
- WE’RE CHEATING – I BUILT A REALLY CRUMMY HTML PAGE WITH MINOR BRANDING IN IT
• INSERT THE APPROPRIATE SNIPPETS AND PREVIEW THE CHANGES- SNIPPETS ARE INSERTED IN DREAMWEAVER
- CHANGES ARE PREVIEWED IN THE BROWSER
BUILDING A BASIC SITE WITH DESIGN MANAGER• UPLOAD THE HTML FILE – MAKE SURE YOU SAVE A COPY
FIRST- NOTICE THAT THE HTML FILE IS FUNDAMENTALLY
REWRITTEN TO SUIT SHAREPOINT
- WE’RE CHEATING – I BUILT A REALLY CRUMMY HTML PAGE WITH MINOR BRANDING IN IT
• INSERT THE APPROPRIATE SNIPPETS AND PREVIEW THE CHANGES- SNIPPETS ARE INSERTED IN DREAMWEAVER
- CHANGES ARE PREVIEWED IN THE BROWSER
• SAVE AND PUBLISH THE FILE
• APPLY TO SITE COLLECTION
DEMO 4
WHAT WE’RE FOCUSED ON TODAY
WHEW – WE MADE IT! ANY QUESTIONS?• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER –
CHECK
• TIE ADOBE DREAMWEAVER (INSERT HTML EDITOR OF YOUR CHOOSING) TO SHAREPOINT SO WE CAN EDIT MASTER PAGE HTML STRUCTURE – CHECK
• TAKE A FIRST LOOK AT DESIGN MANAGER, FOCUSING ON ITS INTERACTION WITH MASTER PAGE DESIGN – CHECK
• DISCUSS WHAT IS (AND ISN’T) READILY AVAILABLE WITHIN DESIGN MANAGER – CHECK
• CONVERT AND APPLY OUR MASTER PAGE – CHECK
CONTACT INFORMATION
TROY LANPHIER
EMAIL: [email protected]
BLOG: HTTP://WWW.GUIO.COM/TROY
TWITTER: @TROYLANPHIER
