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.
6. 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
7. 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
8. What do ‘The People’ say?
www.bluegrassdigital.com
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
20. 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
21. 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
29. 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
30. Are there alternatives?
Alternative to AngularJS
• backboneJS
• KnockoutJS
• EmberJS
• … many more
Resources
Angular Website - http://angularjs.org/
www.bluegrassdigital.com
31. 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
32. 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
33. 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