Mconf14 aperto vanity url-app
-
Upload
aperto-ag -
Category
Technology
-
view
389 -
download
2
description
Transcript of Mconf14 aperto vanity url-app
![Page 1: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/1.jpg)
There Is an App for…Vanity URLs!Magnolia Conference 2014 Technical Track, June 26th, Basel
![Page 2: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/2.jpg)
2
About me
Jörg von FrantziusSystems Architect
Software-engineering background
Joined Aperto in 2010
Technical supervision for exciting and demanding Magnolia projects since then
E.g. Middle East Broadcasting Company
Dubai http://www.mbc.net/ Kanton Basel-Stadt http://www.bs.ch/
![Page 3: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/3.jpg)
Some facts about Aperto
![Page 4: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/4.jpg)
4
Who We Are TodayFacts and Figures
40Million US$Turnover (Gross income) 2013
400Heads at presentGrowing steadily and soundly
International branchesEurope (Germany, Switzerland)Middle East (Dubai) China (Beijing, Shanghai)
10of the largest owner-managed advertising agencies in Germany
Top 3
400Heads at present
![Page 5: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/5.jpg)
5
We Connect Brands and People
![Page 6: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/6.jpg)
Aperto And MagnoliaA Strong Partnership Since 2006
6
More than 40 successfully implemented Magnolia projects
High competence in the execution and implementation of large and technologically sophisticated projects, e.g. business integration, high performance and security
Joint product development with Magnolia (STK – Standard Templating Kit)
Over 50 Magnolia-experienced and trained employees in our departments technology, UX Design, Design and Project Management
Experienced with international projects in Germany, China, Dubai, Switzerland and UK
![Page 7: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/7.jpg)
What are Vanity-URLsanyway?
![Page 8: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/8.jpg)
Vanity URLs – What Is It?
Antti Hietala‘s great blog post on vanity URLs with Magnolia:
“Vanity URLs are short, easy to remember Web addresses used for campaigns, microsites and landing pages. They are a key Internet marketing tool.”
Mostly used to drive user from some other medium to a web page
E.g. URLs shown on TV, poster campaigns, print advertisement
Just in case you wonder…
![Page 9: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/9.jpg)
Not Just Short URLs
Vanity URLs: not to be confused with short URLs, e.g.
http://goo.gl/2Yl2J4
• No one can remember that
• No one wants to type it in
Let alone typing this in on a mobile phone!
Must be easy to remember and spell
![Page 10: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/10.jpg)
An Example
Imagine you are waiting for your train (or in your train)
And you can’t help staring at that poster in front of you.
Imagine now, that poster would really incite your interest in, say, Aperto’s work for the Kanton Basel Stadt ;).
Which URL would you more likely try to type in on your mobile?
(or: shameless plug)
![Page 11: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/11.jpg)
?http://www.aperto.de/en/press/press-releases-2012/Aperto-rebuilds-Web-portals-of-the-canton-of-Basel-Stadt.html
![Page 12: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/12.jpg)
?www.aperto.de/basel
![Page 13: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/13.jpg)
No Need for Typing in on a Mobile Phone
“Drive user from other medium to a web page” …
There is a more fun way of opening a URL from another medium on a mobile phone
QR Codes!
(Alas, only if you have an app for that on your mobile phone…)
![Page 14: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/14.jpg)
?QR Codes?!?
![Page 15: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/15.jpg)
QR Codes – a Dispute
Image source and great article:
http://techcrunch.com/2013/05/29/people-actually-use-qr-codes-in-china/
(image originally found via Adriaan Bloem)
![Page 16: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/16.jpg)
Well, Yes, QR Codes.
Obviously, there is a need for creating QR Codes
Wasn’t supported yet directly in Magnolia
(And also we were in need of a nice visual feature to show in our app at the conference!)
![Page 17: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/17.jpg)
In Summary: A Common Use Case
How often do you remember having seen simple catchy URLs (or QR Codes) outside of the web?
Obviously, creating Vanity URLs is a very common use case
Aperto’s customer projects required it often enough to create a dedicated app
![Page 18: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/18.jpg)
Why an App?
But why an app for Vanity URLs
If Magnolia supports it anyway?(except for QR Codes)
Let’s see what the caveat is …
![Page 19: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/19.jpg)
Magnolia and Vanity URLs
Magnolia does support Vanity URLs out of the box(see e.g. again Antti Hietala‘s blog post on how to do it)
We’re going to focus on path-based Vanity URLs
i.e. not involving custom domain names
It‘s supported
![Page 20: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/20.jpg)
Vanity URL Technically
Usually that’s a permanent 301 redirect to the real page URL, i.e.
• browser will show real URL after redirect
• search engines preserve ranking for real URL
(For SEO reasons that’s usually what you want!)
Just a redirect
![Page 21: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/21.jpg)
Configuring a Path-Based Vanity URL
1. Go to config app
2. Locate your module
3. Add node “virtualURIMapping”
4. Add configuration like this:
(and use “redirect:” insteadof “forward:”)
i.e. without the app
![Page 22: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/22.jpg)
?Easy?
![Page 23: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/23.jpg)
Easy for Techies
Maybe for you
(This is the technical conference track, after all!)
![Page 24: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/24.jpg)
!But not for page editorswithout technical background!
![Page 25: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/25.jpg)
Without App: Access to Config Workspace Required
Hard and dangerous to do for page editors without technical knowledge
(Ever locked yourself out of Magnolia with a virtual URL mapping?)
Experienced web admins must do it
Not for average page editor
![Page 26: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/26.jpg)
?No problem?
![Page 27: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/27.jpg)
Let‘s Empower Page Editors
Some large companies have large page editor workforce who should be able to create vanity URLs easily
Without the app, editors have to ask web adminsOr they might simply avoid the hassle
Disentangle page editors and web admins for this task
Web admins have better things to do anyway
![Page 28: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/28.jpg)
!OK, got it.
Now show me the app!
![Page 29: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/29.jpg)
The app
![Page 30: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/30.jpg)
Overview of Vanity URLs
![Page 31: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/31.jpg)
Vanity URL Attributes
(click on top-right“?” to get all help texts at once)
![Page 32: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/32.jpg)
Actions on Selection
![Page 33: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/33.jpg)
Actions on Selection II
![Page 34: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/34.jpg)
View QR Code
Intended for export (right-click „Save image as…“)
Contains URL of the redirect target,not the Vanity URL itself!(avoids redirect on slow mobile)
![Page 35: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/35.jpg)
?That appdoesn‘t look very special?
![Page 36: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/36.jpg)
!Yes, and that‘s great!
![Page 37: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/37.jpg)
Magnolia‘s New Content App Framework Works!
It turns out: Magnolia‘s content app framework is flexible and powerful
Positive for user: they will immediately:
• feel at home
• know how to use it
Positive for Developers: need to customize only details + few custom classes
![Page 38: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/38.jpg)
The code
![Page 39: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/39.jpg)
Some Implementation Details
Time to give credits:
All programming + configuration done by Frank Sommer @Aperto
I‘m only doing the talking
![Page 40: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/40.jpg)
SubappsUsing standard Magnolia classes
Browser: provides list overview
Details: provides editor
Preview: both for link target and QR Code(essentially an iframe)
![Page 41: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/41.jpg)
Browser SubApp Content ViewsList and search only
Just cut away what we don‘t need
(tree and thumbnail don‘t make sense for this app)
![Page 42: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/42.jpg)
QR Code Image Generation Happens on form save
![Page 43: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/43.jpg)
QR Code PreviewStandard app image provider
VanityUrlSaveFormAction saves image to binary node „qrCode“
That‘s where the configured standard image provider picks it up:
![Page 44: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/44.jpg)
Custom Field for Site Selection
![Page 45: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/45.jpg)
Custom VirtualURIMapping for Link Evaluation
Incoming requests for Vanity URLs:
evaluated in custom VirtualURIMapping
(looks up Vanity URL + site in vanityUrlworkspace)
![Page 46: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/46.jpg)
?Can I use it?Where can I get it?
![Page 47: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/47.jpg)
It‘s Open Source!Free to use
Vanity URL app is released as GPLv3
Find the sourcecode on Github: https://github.com/aperto/magnolia-vanity-url
If you modify the source, please fork us on Github!
![Page 48: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/48.jpg)
Find it in the Magnolia Forge
Magnolia Jenkins will deploy artifacts to Magnolia Nexus
(even though code is on Github)
Please enter bug reports, enhancement or feature requests:
https://jira.magnolia-cms.com/browse/VANITY
![Page 49: Mconf14 aperto vanity url-app](https://reader031.fdocuments.us/reader031/viewer/2022013011/54b57cf74a7959747a8b4598/html5/thumbnails/49.jpg)
!Thank you!Jörg von Frantzius Systems Architect
E-Mail [email protected]
Phone +49 (0) 30 – 283 921 – 0
Aperto AG – In der Pianofabrik
Chausseestr. 5
10115 Berlin