Umbraco Cape Town Meetup Presentation

778 views

Published on

The Cape Town Umbraco Meetup is a networking group aimed at spreading the Umbraco love to all in Cape Town and beyond. This was the launch event, the first of its kind in Africa. Here is the presentation from the event that you can view online or download to watch with the animations.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
778
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Umbraco Cape Town Meetup Presentation

  1. 1. www.bluegrassdigital.com
  2. 2. Umbraco Project Belle
  3. 3. Current UI (before) www.bluegrassdigital.com
  4. 4. Sneak peak… New UI www.bluegrassdigital.com
  5. 5. What’s new in V7 Overview 01 Brand new UI – rewrite of the UI layer, using AngularJS 02 Container document types – loads nodes in a table view instead 03 Members – ported over to angular. Member trees use the new 04 Localization – Serverside data is localized. Clientside API for 05 Search – now supports direct access to the context menu for each 06 New Editors – Content, Media and the Datatype editor views have 07 Browsers/Devices – works in all major browsers, tablets & mobile of the tree format. localizing angular views. result. been completely rewritten www.bluegrassdigital.com gesturing supported
  6. 6. Coming soon… Umbraco v7.0.0 STATUS: In Progress 94% Complete | 3% In Progress Core Update release schedule: Tues 4th November > release candidate Thurs 21st November > 7.0 final release Any new release scheduled for v6.2? YES – but it will be post v7. DOWNLOAD v7 (beta) HERE www.bluegrassdigital.com
  7. 7. What do ‘The People’ say? www.bluegrassdigital.com
  8. 8. A Glimpse Into a our dev
  9. 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 It’s 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. 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 your CMS 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 to control whether pages should show in the nav; sitemap; URL naming alias; Umbraco redirect option. www.bluegrassdigital.com
  11. 11. A glimpse into what we do… (cont) 5. SEO Properties Allow CMS users to completely control the site SEO properties and OpenGraph tags www.bluegrassdigital.com
  12. 12. A glimpse into what we do… (cont) 6. Repositories We recommend you use repositories to house your modular / 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. 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. 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 we’ve customised for our own uses. www.bluegrassdigital.com
  15. 15. Bluegrass Umbraco Libraries
  16. 16. Before our Base Libraries & Umbraco This is what our code looked like… www.bluegrassdigital.com
  17. 17. The effect of Spaghetti www.bluegrassdigital.com
  18. 18. General Overview 01 Common code 02 Code re-use 03 Quick setup process 04 Provides structure www.bluegrassdigital.com
  19. 19. How did we change 01 Understanding of project specifications 02 A need for a common language, between Umbraco/our code 03 „Ubiquitous Language‟ – Domain Driven Design 04 Carrying that language through code 05 Moving away from ‘node this and node that’ 06 uDDD was born 07 uPattern – our ‘Umbraco way’ www.bluegrassdigital.com
  20. 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 order Starting Point 1. ProductListing Doc Type, Product Doc Type, Order Doc Type 2. Represent these doc types in a form of a strongly type object in C# www.bluegrassdigital.com
  21. 21. Example code – Product www.bluegrassdigital.com
  22. 22. Example code (NEW) – Product Listing www.bluegrassdigital.com
  23. 23. Example code (OLD) – Product Listing www.bluegrassdigital.com
  24. 24. Example code – View Products www.bluegrassdigital.com
  25. 25. Example code – Member www.bluegrassdigital.com
  26. 26. Umbraco Installation VS Template www.bluegrassdigital.com
  27. 27. A bit of Frontend
  28. 28. AngularJS HTML enhanced for web apps Umbraco User Experience written in AngularJS When: Developed in 2009 Who: Google, Misko Hevery (his personal project). When working on “Google Feedback” he dropped 17,000 lines of code to 1,500 Why: - 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. 29. Are there alternatives? Alternative to AngularJS • backboneJS • KnockoutJS • EmberJS • … many more Resources Angular Website - http://angularjs.org/ www.bluegrassdigital.com
  30. 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. 31. Our Frontend Stack Advantages of our stack? 1. Large active developer communities 2. Using SASS and adopting a modular approach, forces us to write CSS that is easily reusable within a CMS 3. 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 APIs 4. SMACSS http://smacss.com/ 5. SASS http://sass-lang.com/ 6. SASS http://compass-style.org/ www.bluegrassdigital.com
  32. 32. What we Love on the Front End! Sass Compass AngularJS 01 01 01 Most powerful CSS extension language available. Cleaner Mark-up Awesome JavaScript for web apps 02 02 Contains the webs best reusable patterns 02 Two Way Data Binding Mature 03 03 03 Sprites are a Breeze! Directives 04 04 Compass mixins make CSS3 easy Easy to uses with REST Feature Rich 04 Large Community 05 Industry Proven www.bluegrassdigital.com
  33. 33. Create the Elements, Modules www.bluegrassdigital.com
  34. 34. Assemble the Layout www.bluegrassdigital.com
  35. 35. Thank you & Let’s chat!

×