Date post: | 15-Jul-2015 |
Category: |
Design |
Upload: | mcampolongo |
View: | 121 times |
Download: | 3 times |
USUS
SHOLASHOLADEVELOPERDEVELOPER
MATTMATTDESIGNERDESIGNER
REINGOLD, INC.REINGOLD, INC.ALEXANDRIA, VAALEXANDRIA, VA
OUR COMPANYOUR COMPANY
OverviewOverviewOverviewOverview
Intro to Project
Design Challenges
Under the Hood: Tips & TricksArchetype
UaaS Deployment
External Data
and more!
OUR CLIENTOUR CLIENT
"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECEOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITING
FANS, PLAYERS ANDFANS, PLAYERS ANDFANS, PLAYERS ANDFANS, PLAYERS ANDCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YET
POWERFUL BOND."POWERFUL BOND."POWERFUL BOND."POWERFUL BOND."
What we aren't. (nfl.com)
Honor the game’s history.
Showcase innovation.
Troy's 3 C's - Clarity, Consistency, Credibility.
Umbraco!
Website ObjectivesWebsite ObjectivesWebsite ObjectivesWebsite Objectives
Look & FeelLook & FeelLook & FeelLook & Feel
NavigationNavigationNavigationNavigation
Other NFL Web PropertiesOther NFL Web PropertiesOther NFL Web PropertiesOther NFL Web Properties
NFL.com Primary news and communications branch for the NFL
NFLShop.com eCommerce site
NFLPlayerEngagement.com Player Engagement
NFLEvolution.com Player Health & Safety
UX Testing OptionsUX Testing OptionsUX Testing OptionsUX Testing Options
Responsive DesignResponsive DesignResponsive DesignResponsive Design
DesktopsDesktopsDesktopsDesktops
LaptopsLaptopsLaptopsLaptops
TabletsTabletsTabletsTablets
SmartphonesSmartphonesSmartphonesSmartphones
Template StructureTemplate StructureTemplate StructureTemplate Structure
Content BlocksContent BlocksContent BlocksContent Blocks
ArchetypeArchetypeArchetypeArchetype
ArchetypeArchetypeArchetypeArchetype
An alternative to the Grid for creatingcontent blocks
Newer sites should try both methods tosee what’s comfortable
Archetype NestingArchetype NestingArchetype NestingArchetype Nesting
Great for complex layouts
Place repeatable, modular structuresanywhere in a page
Archetype: Add arbitrary JSArchetype: Add arbitrary JSArchetype: Add arbitrary JSArchetype: Add arbitrary JS+ CSS+ CSS+ CSS+ CSS
Allows you to add scripts that change theway the backoffice works
Knowledge of Angular or packages notneeded
// toggle 'wide mode' $(document).on('click', '.nfl-toggle-wide', function () { $('.form-horizontal, .form-vertical').toggleClass('form-horizontal form-vertical'); });
Archetype RequirementsArchetype RequirementsArchetype RequirementsArchetype Requirements
Works best with Umbraco 7.2+
If using Courier/Umbraco as a Service,ensure it’s using the correct version ofnHibernate
UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment
UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment
Special considerations if you're porting an existingsite, vs. starting with UaaS from the beginning
Courier files must be created for not only content, butalso media, content types, custom datatypes, etc.
However, only content has a UI for quickly creatingthese courier files
UaaS: Creating Courier FilesUaaS: Creating Courier FilesUaaS: Creating Courier FilesUaaS: Creating Courier Filesfor a Pre-Existing Sitefor a Pre-Existing Sitefor a Pre-Existing Sitefor a Pre-Existing Site
// Example: Saving all content types to trigger Courier var svc = ApplicationContext.Current.Services.ContentTypeService; var allcontenttypes = svc.GetAllContentTypes(); foreach (var ct in allcontenttypes) { svc.Save(ct); }
Courier: Global SettingsCourier: Global SettingsCourier: Global SettingsCourier: Global Settings
Don't Store Media in.../mediaDon't Store Media in.../mediaDon't Store Media in.../mediaDon't Store Media in.../media
Especially important for image-rich designs
Use blob storage or CDN
avoids size quota issues
Azure Blob Storage Provider plugin
Media tree will likely be faster
Speed Up EditingSpeed Up EditingSpeed Up EditingSpeed Up Editing
Speed Up Editing: Front-Speed Up Editing: Front-Speed Up Editing: Front-Speed Up Editing: Front-end Edit Buttonend Edit Buttonend Edit Buttonend Edit Button
@{ var auth = new HttpContextWrapper(HttpContext.Current).GetUmbracoAuthTicket(); if (auth != null) { var curruser = ApplicationContext.Services.UserService.GetByUsername(auth.Name); if (curruser != null && curruser.CanEdit()) { <a target="_blank" href="/umbraco#/content/content/edit/@Model.Content.Id" class="editpage">Edit ▶</a> } }}
Speed Up Editing: DeleteSpeed Up Editing: DeleteSpeed Up Editing: DeleteSpeed Up Editing: DeleteOld RevisionsOld RevisionsOld RevisionsOld Revisions
-- BACKUP FIRST!!! DELETE FROM cmsPropertyData WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND contentNodeId IN (SELECT DISTINCT nodeID FROM cmsDocument) DELETE FROM cmsPreviewXml WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND nodeId IN (SELECT DISTINCT nodeID FROM cmsDocument) DELETE FROM cmsContentVersion WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND ContentId IN (SELECT DISTINCT nodeID FROM cmsDocument) DELETE FROM cmsDocument WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND nodeId IN (SELECT DISTINCT nodeID FROM cmsDocument)
API ControllersAPI ControllersAPI ControllersAPI Controllersand Infinite Scrolland Infinite Scrolland Infinite Scrolland Infinite Scroll
FakeControllerFakeControllerFakeControllerFakeController
using (var writer = new StringWriter()){ var routeData = new System.Web.Routing.RouteData(); routeData.Values.Add("controller", "UpdatesApi"); var fakeControllerContext = new ControllerContext( new HttpContextWrapper(new HttpContext( new HttpRequest(null, "http://google.com", null), new HttpResponse(null))), routeData, new Umbraco.Forms.Web.Helpers.FakeController());
var razorViewEngine = new RazorViewEngine(); var razorViewResult = razorViewEngine.FindPartialView(fakeControllerContext, "~/Views/Partials/UpdateList.cshtml", false
var viewContext = new ViewContext( fakeControllerContext, razorViewResult.View, viewData, new TempDataDictionary(), writer); razorViewResult.View.Render(viewContext, writer); result = writer.ToString();}return this.Request.CreateResponse(HttpStatusCode.OK, new { result });
External DataExternal DataExternal DataExternal Data
When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should KeepSome Data Outside UmbracoSome Data Outside UmbracoSome Data Outside UmbracoSome Data Outside Umbraco
When there’s content related to a nodethat must change very frequently
Publishing is computationally expensive
Invalidates the node’s cache
When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should KeepSome Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Case 1Case 1Case 1Case 1
When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should KeepSome Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Case 2Case 2Case 2Case 2
You Make The Call - Interactive Instant Replay Simulation
Questions?Questions?Questions?Questions?