1.www.bluegrassdigital.com

2. UmbracoProject Belle 3. Current UI (before)www.bluegrassdigital.com 4. Sneak peak New UIwww.bluegrassdigital.com 5. Whats new in V7 Overview01Brand new UI rewrite of the UI layer, using AngularJS02Container document types loads nodes in a table view instead03Members ported over to angular. Member trees use the new04Localization Serverside data is localized. Clientside API for05Search now supports direct access to the context menu for each06New Editors Content, Media and the Datatype editor views have07Browsers/Devices works in all major browsers, tablets & mobileof the treeformat. localizing angular views. result.been completely rewrittenwww.bluegrassdigital.com gesturing supported 6. Coming soon Umbraco v7.0.0 STATUS: In Progress 94% Complete | 3% In ProgressCore Update release schedule: Tues 4th November > release candidate Thurs 21st November > 7.0 final releaseAny new release scheduled for v6.2? YES but it will be post v7.DOWNLOAD v7 (beta) HERE www.bluegrassdigital.com 7. What do The People say?www.bluegrassdigital.com 8. AGlimpseInto a our dev 9. A glimpse into what we do 1. Customise your Login screen A nice touch to give to clients is to view a branded login page:2. Customise your icons Its not always about the dev, but the UI of the CMS is important as well. Customising icons is a great way to help clients to visualise different sections.www.bluegrassdigital.com 10. A glimpse into what we do (cont) 3. Global Settings Area We house all the site wide; configuration; social; form settings under one roof. This is a great way to keep yourCMS neat and tidy and helps with the usability too.4. URL / Nav Properties We add under the Properties tab for all nodes options for the CMS user tocontrol whether pages should show in the nav; sitemap; URL naming alias; Umbraco redirect option. www.bluegrassdigital.com 11. A glimpse into what we do (cont) 5. SEO Properties Allow CMS users to completely control the site SEO properties and OpenGraph tagswww.bluegrassdigital.com 12. A glimpse into what we do (cont) 6. Repositories We recommend you use repositories to house yourmodular / common content together, which can then be selected for display on different pages/nodes. When sites have intricate workflows between email groups, we use the repositories to setup all your email groups, which are then accessed from whatever form needs to. www.bluegrassdigital.com 13. A glimpse into what we do (cont) 7. Embedded Control & Notification Messages Our preferred repeatable control is the Embedded Control package. We use it a lot! We also try to ensure that CMS users can personalise messages i.e. [[FULLNAME]]www.bluegrassdigital.com 14. A glimpse into what we do (cont) 8. Image Map / Hotspots If you ever need to give clients the ability to create hot spots on an image or a map, we can recommend an ImageMap package weve customised for our own uses.www.bluegrassdigital.com 15. Bluegrass UmbracoLibraries 16. Before our Base Libraries & Umbraco This is what our code looked likewww.bluegrassdigital.com 17. The effect of Spaghettiwww.bluegrassdigital.com 18. General Overview01Common code02Code re-use03Quick setup process04Provides structurewww.bluegrassdigital.com 19. How did we change01Understanding of project specifications02A need for a common language, between Umbraco/our code03Ubiquitous Language Domain Driven Design04Carrying that language through code05Moving away from node this and node that06uDDD was born07uPattern our Umbraco waywww.bluegrassdigital.com 20. Example scenario eCommerce Scenario A client would like to sell products from their website.They have a list of products from which members of the site can orderStarting Point 1.ProductListing Doc Type, Product Doc Type, Order Doc Type2.Represent these doc types in a form of a strongly type object in C#www.bluegrassdigital.com 21. Example code Productwww.bluegrassdigital.com 22. Example code (NEW) Product Listingwww.bluegrassdigital.com 23. Example code (OLD) Product Listingwww.bluegrassdigital.com 24. Example code View Productswww.bluegrassdigital.com 25. Example code Memberwww.bluegrassdigital.com 26. Umbraco Installation VS Templatewww.bluegrassdigital.com 27. A bit ofFrontend 28. AngularJS HTML enhanced for web apps Umbraco User Experience written in AngularJSWhen:Developed in 2009Who:Google, Misko Hevery (his personal project). When working on Google Feedback he dropped 17,000 lines of code to 1,500Why:- HTML is great for static documents, but not dynamic views. - AngularJS lets you extend HTML vocabulary. - Takes AJAX to a new level!Power:- Two way Data Binding: Data-binding is an automatic way of updating the view whenever the model changes. Angular rocks at this!- Directives: Lets you invent new HTML syntax, specific to your www.bluegrassdigital.com application 29. Are there alternatives? Alternative to AngularJS backboneJS KnockoutJS EmberJS many moreResources Angular Website - http://angularjs.org/www.bluegrassdigital.com 30. Our Frontend Stack OVERVIEW 1. AngularJS 2. CSS Pre-processing (SASS)Why we chose our Tech Stack? 1. AngularJS we wanted a JavaScript framework for creating applications. A framework that was forward thinking with a growing & active community. 2. Pre-processing(SASS) - Adopting a modular architecture for writing CSS. - Uses Compass!!www.bluegrassdigital.com 31. Our Frontend Stack Advantages of our stack? 1. Large active developer communities2. Using SASS and adopting a modular approach, forces us to write CSS that is easily reusable within a CMS3. Using AngularJS, front end developers can write client side applications and client side applications are cool! We can push the programing logic into the front end. Easy using REST APIs4. SMACSS http://smacss.com/ 5. SASS http://sass-lang.com/6. SASS http://compass-style.org/ www.bluegrassdigital.com 32. What we Love on the Front End! SassCompassAngularJS010101Most powerful CSS extension language available.Cleaner Mark-upAwesome JavaScript for web apps0202 Contains the webs best reusable patterns02 Two Way Data BindingMature030303Sprites are a Breeze!Directives0404Compass mixins make CSS3 easyEasy to uses with RESTFeature Rich04 Large Community05 Industry Provenwww.bluegrassdigital.com 33. Create the Elements, Moduleswww.bluegrassdigital.com 34. Assemble the Layoutwww.bluegrassdigital.com 35. Thank you&Lets chat!