TTW Tiled Layouts with Mosaic
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 66 | |
Author | ||
License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
Identifiers | 10.5446/55293 (DOI) | |
Publisher | ||
Release Date | ||
Language | ||
Production Year | 2016 |
Content Metadata
Subject Area | |
Genre |
Plone Conference 201666 / 66
4
5
6
7
8
9
10
11
12
13
15
17
18
19
22
23
24
25
26
28
30
31
32
36
43
44
46
47
48
49
50
52
53
55
56
57
60
62
63
64
65
66
00:00
Photographic mosaicDemo (music)Coma BerenicesTemplate (C++)Web pageHome pageEvent horizonTangentContent (media)View (database)Web browserGoodness of fitCloningWeb pageAutomatic differentiationHome pagePresentation of a groupPhotographic mosaicTangentSlide ruleTemplate (C++)Programmer (hardware)VideoconferencingPoint (geometry)MathematicsContext awarenessPhysical systemBitSoftware industryCodeElectronic mailing listLatent heatWeightRight angleFitness functionSoftware frameworkSocial classBootstrap aggregatingType theoryWeb browserContent (media)Projective planeWebsiteDampingPixelView (database)Multiplication signTouchscreenImage resolutionFrustrationComputer animation
07:47
MechatronicsInterface (computing)Price indexView (database)Web browserHome pageDifferent (Kate Ryan album)Pairwise comparisonSoftware developerDataflowPhotographic mosaicBoundary value problemRule of inferenceSlide ruleVideoconferencingText editorInformationContent (media)Digital photographyPresentation of a groupField (computer science)CodeCASE <Informatik>BitType theoryCuboidMultiplication signWebsiteWave packetTouchscreenDefault (computer science)Expert systemComputer configurationView (database)Insertion lossGraphics tabletWeb pageHome pageDemo (music)Template (C++)Programmer (hardware)Expected valueFacebookWeb browserRight angleElectronic visual displayGame controllerCloningComputer animation
15:28
Perspective (visual)Planar graphMusical ensembleComa BerenicesEmailPairwise comparisonWide area networkSoftware developerView (database)Image resolutionBeat (acoustics)TesselationGoodness of fitDifferent (Kate Ryan album)Multiplication signBitWebsiteMathematicsEmbedded systemRight anglePhotographic mosaicElectronic mailing listType theoryContext awarenessWeb pageHome pageContent (media)Insertion lossDefault (computer science)Cursor (computers)Structural loadView (database)Slide ruleSinc functionComputer animation
23:08
Programmable read-only memorySoftware developerPlanar graphSinguläres IntegralPairwise comparisonText editorContent (media)outputSlide ruleField (computer science)Menu (computing)TouchscreenFile formatTemplate (C++)VideoconferencingRight angleHome pageGreen's functionSystem administratorPoint (geometry)File systemMathematicsCodeComputer fileUniverse (mathematics)Content (media)Type theoryComputer configurationLine (geometry)Text editorDisk read-and-write headWebsiteLevel (video gaming)Context awarenessData managementPhotographic mosaicBitCore dumpProfil (magazine)Shared memoryMultiplication signPresentation of a groupPattern languageTesselationDrag (physics)Uniform resource locatorMusical ensembleComputer animation
30:49
Beer steinPlanar graphWechselseitige InformationSoftware developerBlock (periodic table)Bit rateProduct (business)TesselationInformationMereologyCodeWebsiteMultiplication signINTEGRALPhysical systemComputer fileMusical ensembleDefault (computer science)Web pageData conversionGUI widgetCloningCalculationBitInstallation artCausalityPoint (geometry)Functional (mathematics)Embedded systemFront and back endsInternet forumSoftware bugCASE <Informatik>Limit (category theory)ImplementationStructural loadSocial classRight anglePresentation of a groupPhotographic mosaicNumberStandard deviationComputer animation
Transcript: English(auto-generated)
00:04
Okay, good afternoon everyone. My name is David Bain. I am from Jamaica so that's the explanation for the accent. So far I've enjoyed the weather. It is, I have,
00:24
I brought three jackets and I haven't had to wear any of them, just extra weight in my suitcase. A little background about myself, I've been using Plone for definitely more than a decade. I run a software company that does Plone
00:42
work and more recently has started to build products, some of them around Plone and the company's name is Altarum. I'm here to talk about mosaic tiled layouts for Plone. So hopefully at the end of this you have a better
01:02
understanding of how mosaic fits into the picture of Plone. Just a quick question, how many people have used mosaic? Here, just a quick poll. One and a half? Two? Okay, I see some faces. I'm sure there are a couple of other people who
01:26
haven't put up their hands but I'm not going to pick on anybody, right Beth? Okay, so let's get into this. So just so that you understand what to expect from this presentation, I want to put into context why we need this. Then I'll talk
01:47
briefly, not exhaustively, but briefly about previous solutions and then I'll do a demo of mosaic and I might talk about the future but I'll probably replace that with just questions so that you can ask questions about mosaic. So that's
02:05
fine for everyone? Wonderful. Okay, so mosaic is Plone technology and let's tell a little story. So here is Caro and Valdek and they're running a
02:21
conference in, let's pretend it's 2017 and all the presenters for PyCon Jamaica happen to also be Plone people, right? Because they just want to get all the warm weather. There's a little problem though. Valdek wants a
02:42
really nice homepage and he's not interested in learning, not even interested in learning the as much less page templates and things like that. Cara has a slightly different thing. She wants to be able to have different layouts. So for example, your presentations after the conference
03:03
should have things like the slides and the videos and things like that but before the conference there they might be a little simpler and she doesn't really want to have to call a programmer to set that up for her. Shouldn't she be able to just make a few changes on the content and and do
03:21
that? As she heard she could do it with dexterity but then someone told her oh you can even do this with mosaic. So that's the pain point but let's let's take a slight tangent before we solve their pain by giving you a history of how we used to solve that pain. So this is a brief completely not
03:42
exhaustive history of layout solutions. Firstly I'll give you some context. Back in the day layouts were done by CSS gurus who for every new site project they would do it from scratch and you would tell them what they want
04:05
what you want you do it in Photoshop and then you'd wait a couple weeks and they'd come back with this site that looks like what you want and then if you wanted a particular page to look different you'd do it up in Photoshop to say that's going to look different and then they'd go back and you know
04:24
stitch and do what they need to do and you'd get a new page and repeat that rinse and repeat every time you need to get a new layout. Sounds like fun? Probably not. And then sometimes the pixels weren't exactly where you
04:41
wanted them and they'd say things like well it's not going to work that way because of XYZ or what's the resolution on your screen are you sure you're looking at it with the right browser and da da da da. So a couple people picked up on that frustration and they created these CSS frameworks
05:02
which basically allowed you to use grids to lay out your content but it still required some amount of knowledge and skill to manipulate the grids you needed to understand CSS classes but at least you didn't need necessarily to go deep into CSS as long as you knew the classes you could lay out things
05:21
and so maybe a layout would move from a week or two to maybe three days or something like that depending on the experience and so on. Some of these grid systems included blueprint CSS, bootstrap, foundation and of course even
05:45
one invented by Alexander Lemie one of the co-founders of Plone called Deco.js. So that's a little bit about what was happening and the why of all of this is that you want to get nice-looking layouts right and
06:05
the why of Mosaic is that you want to be able to lay out this type of stuff without having to push it off to some CSS geek right. I'm a CSS geek so
06:23
here these are examples of the type of layouts you want to be able to get right. You want your content to look as good as your theme and what tends to happen is you get your theme but then how do you get nice layouts from page to page to page to page. I mean it's like you hand somebody a
06:42
wonderful PowerPoint template and they're able to completely destroy it somehow and possibly if we have layout systems like Mosaic we can make it easier for people to get it right rather than having them have to dig into code and things like that. Let's continue talking a little bit about some of
07:07
the Plone specific solutions that exist and existed. So one that I've used is collective listing view which allows you to create something of a
07:20
layout but again you use a lot of code. There's the diazo you can actually use this system called diazo to move things around in your target layout just pull it from Plone and move it around in your target layout but it still requires a certain amount of savvy to be able to do that much less than before
07:42
and it's a wonderful improvement and that's what you use to give the general look for your theme but once you get into the content you want to do better layout. In fact here is what some of these things look like. This is for example a browser view. Obviously this is a snippet incomplete there are a lot
08:04
of things there but this is enough to send a designer screaming running and screaming and to me this is this is just a little bit of code this is great but this is going to scare away a lot of people and here is what some diazo rules look like. Again they can be quite intimidating I'm seeing someone
08:22
cringing in the audience so it's not necessarily the greatest of experiences to be staring at walls of text to do layout. So let's let's talk a little about what Mosaic can do for you. Here are the key concepts. What
08:48
Mosaic makes possible is the ability to create a layout and then to make that layout reusable and you can do a lot more customization than that but for
09:01
the sake of this talk we'll work with those as the boundaries of what Mosaic can do. So let's let's talk about the two targets that we're trying to go for. Remember Valdek wanted to get a cool homepage and he didn't want to learn page templates okay and Cara she wanted different layouts she wanted to
09:33
maybe a video or slides and she didn't want to have to call a programmer to create a new field for adding the video and then write the diazo rule so
09:44
that the video gets embedded properly and all that type of stuff. She just wanted to be able to just do it. That seems like a reasonable expectation nowadays when you can go to Facebook and just post things at will. So let's do
10:02
the demo before the questions. So let's get some of these things out of the way and so we have a couple of talks here. Here is our clone site that
10:26
they've built right. I decided not to theme it too much because we're focused on content layout. We put in a couple talks and we want to be able to
10:43
showcase these talks right because these are pretty good talks from some interesting persons who some of us might know. So we're going to start with Cara's problem. Cara's problem was that she wanted to get a little more
11:05
control over the layout without having to learn too many other new technologies. So let's see what Mosaic can do for someone like Cara okay.
11:21
She was told by the person introducing her to this technology that all you have to do is change your display to support what is called a Mosaic layout. So she goes in to one of the talks and she switches it to use Mosaic layout. Now that that is switched on she goes in and she clicks
11:43
edit and she gets a screen that looks like this. Now she had the benefit of you know about five minutes of training so she's an expert now in Mosaic. So she knows right away that this is the default layout and she
12:01
wants to customize it and she knows she has to go to the layout button and she clicks customize. What just happened? Well over here two new options showed up. One called formatting which allows you to add padding and some styles and
12:21
things like that and one called insert which gives you the ability to add fields from your content. So because this is a talk it's going to have fields like for example the presenter photo and she thinks the presenter photo would look wonderful kind of next to some of this talk
12:50
information. So she's setting it up to show up here. Then she wants to actually
13:01
have the name of the presenter that might be good. So we want to add the name of the presenter and let's add some details about the talk. So let's just add that down here and it turns out all of these talks are talks so
13:24
they did have a field called type of talk but it's not not useful for this so we leave it out. But you might want to say who the audience is in case it varies from talk to talk it will help people to select the talk they want. And once she's done that she's actually created her custom layout.
13:45
Okay now she could just click save but one of the things with this is because every talk is going to be using this layout why not store it as a reusable
14:02
layout. So let's see how you'd go about doing that. So we're going to go back to edit and this time to make it reusable we're going to say I like this layout let me save it and I'm going to call it something original like talk
14:20
layout. I had noticed I clicked a little a little checkbox underneath talk layout that's to make sure that it stays global that means that any other editor on the site can also access this layout. And now we have a custom
14:45
layout and we can click Save to save everything and it means that instead of repeating all of that arrangement on every talk we can now go to each talk
15:01
and after cringing for a while we can make sure that the talk is using a mosaic layout and if it is notice we now have something called the talk layout and if we just click it we don't have to do much more we can just click
15:21
save and magically this talk also has that layout isn't that useful and we can repeat we can rinse and repeat for the rest of them so we don't want we
15:40
certainly don't want people seeing this that's that's that makes no sense in the context of our thing that's just generated because it's there so just switch the mosaic layout and edit and you get the picture and after a
16:00
while this can become quite brainless you can even turn off notifications that are coming on your screen while without skipping a beat that was not planned that was actually my mother okay so we're going to do that again and now
16:34
there you go so all of the talks have this wonderful layout there are a couple other things we could do to to clean it up you know if if you had
16:43
another 30 minutes for this talk but let's solve Valdek's problem now now recall that Valdek what he wanted was to be able to have you know a nice cool home page so let's do that it turns out that his home page is currently a
17:02
document by default so but we can tell that document to use the mosaic layout it already is using the mosaic layout that I went ahead like on a good cooking show and change that and what we're going to do is we're going to
17:21
customize this page a little bit we should probably say something about a
17:41
little plug there but let's customize the layout right turns out there's this thing called a content listing if you were at the keynote you may have heard
18:00
it referred to as a collection tile right all of these things are referred to them as tiles unfortunately a collection tile might not help the average user so content listing might be an easier explanation so it is called a content listing in this context and let's actually list the talks wouldn't
18:27
that be great if we could just say by type I want anything that is a talk that would be really nice and maybe a tabular view of those talks that
18:43
would be super and let's maybe add a little heading that says upcoming talks now obviously we could really go a lot harder with this but this is just to
19:09
give you an idea of what's possible let's save this and call it something like home page layout might not even need to make it global save and so now
19:26
we have a nice front page maybe we want to feature a talk that would be nice and that way we might be able to get a nice picture there so let's do that let us feature a talk that would be great so I'm going to click
19:51
customize insert and I'm going to insert something called existing content okay and I know that my talks are located on the talks oops let's do that
20:07
again rewind okay my talks are located on the talks actually let's just find a talk I think there was a talk by Calvin well I know I have a talk
20:25
called okay we're going to win this there we go talks all right so let's choose choose this talk and notice how it loads it up into my cursor so I can
20:48
then choose where I want to put it I'm going to put it next to the summary all right and I'm going to move this up see if I can get that below here and
21:06
maybe make that a little bigger and let's add some rich text above the talk and we'll say featured talk we'll make that have a head in and save now
21:32
notice I didn't save it as a new layout I just customized my front page so sometimes you want to do a one-off customization and sometimes you want to
21:45
do something something more now one of the things that we need to get back to though we want to make sure that after the talk we can show maybe the slides from the top okay how am I doing for time and someone tell me when I
22:04
have about 10 minutes or so so let's let's head over to the talks and we'll choose one of these talks and let's embed slides for this talk I'm
22:20
actually going to embed not the real slides for the talk but just some slides so it turns out that there is something called an embed tile very very useful I can go to layout customize and I can insert what is called a raw
22:41
embed now personally I would probably rename this I probably called raw embed embed and then I would call the other embed or embed because it's or maybe it's auto embed and if time allows I'll show you the difference but I'm going to do a raw embed because it allows me to take snippets from any
23:04
site that allows you to share and I can put that snippet in my raw embed so I'm going to choose raw embed and I'll call this slide slides and let's share some slide stuff oops there we go and save so once the talk is done you
23:36
may want to actually have talk slides that that would be a good thing
23:41
to do for your conference and I'll add another rich text field that I find myself using rich text fields a lot just use it as a heading and I'm going to format it I'm going to make this a new layout so the save button under the
24:04
layout menu allows you to save whatever's on the screen as a new layout big green button is just to save right so I'm going to create a new layout and I'm going to call this one talk with slides and it basically it
24:22
uses this as my template for all my other stuff let me oops sorry okay so now after the conference when the slides are ready they can be embedded
24:43
right here and because I have it as a new layout it means that you can wait and five minutes after the presenter has finished if they've pushed it to slide share you get the URL you get the share embed and you just drop it there so as soon as Tom has done his presentation we could say edit and we
25:16
could say layout change because he's now finished his presentation and
25:22
unfortunately I don't have one for him is it safe to steal yours Rob okay so we print we pretend that Tom did this presentation although we know it's really Rob and we're going to go to the raw embed just click edit replace
25:44
it there and it's the same pattern for almost any tile that you're working with you can drag it around lay it out and and they're contextually the context really makes sense so a raw embed expects you to paste some embed
26:03
code what is called an embed it's it will try and embed it based on just a URL maybe it should be called a URL embed we can decide on that but here
26:20
we go and here are the slides and and they work as expected okay so that is the the experience of a typical site manager should we look at the
26:41
experience for a site administrator and anybody interested in that I see like one person shaking their hair okay a little more than one person sure all right so just bear with me we're going to just look a little bit in the to see what it's like for somebody who is site administrator for site
27:07
administrator there's something called the mosaic layout editor and all the powers of mosaic are wrapped up in a manifest file so if you want to
27:21
create a new one manually you just create a new line in your manifest file you give it a name cool dash layout you can even specify what content type that layout should be associated with or not so if you want it to be associated
27:42
with everything you just get rid of that little for option and of course a title is always useful this is a cool layout and then you can just create the cool create it so you just say cool layout HTML now I haven't gotten to the
28:08
level where I can just type this stuff out of my head so I'm just going to steal a layout here but just by doing that so someone might say to you
28:21
as a site administrator I want a cool layout I want it to have I don't know a video on top right where you could do that by just stealing some embed
28:41
code and then saying all right let's let's add that video on top let's see what happens if you use our if we use our cool layout I hope I was at a cool layout yeah let's see what happens if we change the home page to use this cool layout so this is slightly untested many things could go wrong at
29:08
this point but let's let's let's go so we're going to go to layout and we're
29:21
going to change our layout and it's going to warn you it's going to say changes will destroy existing custom layouts and the universe will implode and blah blah blah so you're going to choose this is a cool layout and magic I remember I embedded a video that was that was I just did it manually inside
29:44
of the manifest file and this cool layout HTML here it is right here so there are situations where you may want to do that you may want to have a special layout for somebody whose profile has a badge so no now they have
30:02
the I presented a talk at PloneCon sorry at PyCon Jamaica and they get a badge for that or or whatever yeah so the what I've demonstrated here are the key concepts behind the mosaic now if you dig deeper there's certainly a lot
30:25
more you can do their customizations that you can do on the file system so that you can redistribute those for other users but these are the core things and the core experiences that either a site editor or a site administrator would experience so thank you for your time
30:47
and I think we're done I don't think I had any other slides but hopefully at this point Caro will be happy and Vallec will be happy and hopefully
31:01
you can make some use of mosaic some of the things I haven't shown you because of time I didn't show you how to install mosaic because mosaic is an add-on and I didn't show you some of the warts but you know if you come across issues there's the Plone forum and you can go there and get help and
31:24
report bugs because this is still a release candidate it's used in production by some very big sites I just discovered recently like about five minutes ago well that's exaggeration but yeah so thank you for your time if
31:41
you have questions this is my contact information or if you want to ask me the questions now yes yes I should warn you it requires going into the ZMI
32:03
so if you can stomach that I can show you how to do that is that fine so for those who don't know the ZMI is this ugly part of it's not really Plone it's the stuff that Plone sits on top of it works yeah I don't need to show
32:28
yes it's possible it's possible it's possible I don't know if that's possible
32:51
yet I mean it may be possible I don't know how to do that but what you can do is as as Steve had asked you certainly can make it default to use in
33:05
mosaic yeah yeah yeah for simplicity I didn't use a custom theme but for
33:32
simplicity I didn't use a custom theme but you certainly can use a custom theme perhaps in a lightning talk I'll demonstrate that if I if I get to do
33:46
one of those lightning talks because one of the things that we use we use a system called gloss we built it in-house and it allows you to the
34:02
mark up this it allows to keep your CSS from conflicting with other stuff and then you can just use the as sire mosaic just like you would with an standard clone Barcelona Nita theme so short answer yes you can use other
34:36
themes not the theme the layout right so you could especially with this the
34:51
back end that I showed you you could just copy the HTML files and things from the manifest file move it to another mosaic enabled site that happens
35:00
to use a different theme it would still get the layout and then you could tell it would pick up the theme of the new site yeah yeah thanks Rob so
35:29
you've helped twice now you've allowed me to use your presentation as much as
35:44
I can tell from the grid system it seems to be slightly inspired by deco but it's not deco it uses something called all all the classes are called mosaic dash something right the truth right so it you it doesn't use yeah so
36:09
if so if you look at it right it you can't get much more than four columns because it uses it uses quarter one third it doesn't use numbering to get
36:22
down to smaller sizes so as last I checked it looks like four is the the most number of columns you can get you you might know Rob okay right I
36:53
certainly haven't I haven't tried to do that and I'm quite happy with what it's doing now and for me the value to me is not not always for me the value
37:05
for me is to be able to hand it to somebody who is just getting started and they're still able to deliver value to a customer because now the layout is about dragging it around so that's that's the value for me there
37:26
certainly there are certainly limitations to the current implementation but when you compare what used to be the case and what was required to do layout this is a leap yes yes yes yes definitely there are limitations but you're talking
37:46
about you know you're saying my new helicopter has limitations compared to my bicycle you know I'll take I'll take the helicopter certainly certainly
38:04
actually one of the things that's great about this system and it may take a little while for more developers to get comfortable with it I'm still learning myself custom tiles so you can start to create special tiles
38:21
for your use case you can imagine a weather tile for weather website where they could just pull in a weather widget as a tile you certainly can do those things or a currency conversion tile for a bank mortgage calculators for I guess a bank as well you could do you could do a lot with with with
38:44
just a little bit of customization now for that you're not going to tell your designer layout person to do that but it's not a lot of work for a developer yes I should I'm sorry I'm staying at the same house as Eric so
39:06
I really should mention this there's this really powerful system for creating customizing clones functionality called Rapido and Rapido already allows you to embed Rapido blocks as tiles into mosaic so it means
39:28
that if you create a block just think of anything that you might want like a ratings button which is the example that Eric uses now you could have a page for talk ratings as a tile and it's the the integration is not the
39:45
prettiest yet but it's good enough that if you know the path to the block you use the path almost like you use an embed code and you just put the path to the block and then it loads it up and you can put it anywhere on the page so yes you can use Rapido for your layouts but I don't have much
40:07
more to say so questions I've how much time do I have left I'm have did I go too fast all right so so I should be finished oh thank you for your time