Make Online yours
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 |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 490 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: 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/47325 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Multiplication signGraphic design
00:43
CodeType theoryComputer animation
01:09
Computer animation
01:30
Cross-site scriptingForm (programming)GUI widgetCellular automatonInstance (computer science)Integrated development environmentPresentation of a groupInterface (computing)TorusInterface (computing)Connectivity (graph theory)Integrated development environmentInstance (computer science)BitSoftware frameworkMultiplication signExtension (kinesiology)GUI widgetGame controllerPerfect groupComplete metric spaceImplementationSet (mathematics)Graph coloringComputer animation
04:42
Element (mathematics)Decision tree learningEntire functionSource codeConnectivity (graph theory)State of matterSet (mathematics)Latent heatComputer fileMereologyComputer fontGame controllerGraph (mathematics)Default (computer science)Type theoryCore dumpGraph coloringDirectory serviceNumberComputer animation
07:28
Source codeElement (mathematics)Decision tree learningRadiusComputer-generated imageryResultantCodecVideoconferencingCircleComputer animation
08:23
Default (computer science)State of matterState of matterImage resolutionGraph (mathematics)Computer animation
08:51
Source codeElement (mathematics)Decision tree learningComputer-generated imageryData structureComplex (psychology)Parallel portComputer fileSource codeComputer animation
09:15
Default (computer science)State of matterGUI widgetTorusComputer-generated imageryDialectHacker (term)Computer fileRule of inferenceLine (geometry)Identity managementWordMedical imagingGUI widgetComputer animation
10:38
Fiber bundleCodeComputer-generated imageryFormal verificationDirectory serviceDialectHacker (term)Software developerRevision controlBitComputer animation
11:51
Hacker (term)Symbol tableComputer fileFile formatComputer animation
12:50
Decision theoryFiber bundleComputer-generated imageryHacker (term)Convex hullComputer iconDirectory serviceWordElement (mathematics)Component-based software engineeringCodeCross-site scriptingDirectory serviceMultiplicationComputer fileSocial classMedical imagingData structureComputer animation
14:43
CoprocessorCross-site scriptingFormal languageCascading Style SheetsData structureSource codeVariable (mathematics)Function (mathematics)Scripting languageAutomationProcess (computing)CodeWeb browserFormal languageSoftware as a serviceComputer animation
15:05
Source codeCross-site scriptingFunction (mathematics)Formal languageVariable (mathematics)Scripting languageAutomationProcess (computing)CodeWeb browserLatent heatArithmetic meanElement (mathematics)Web browserDatabase normalizationComputer animation
15:41
Cloud computingCross-site scriptingGraphical user interfaceCodeSource codeWeb browserFunction (mathematics)Variable (mathematics)Formal languageProcess (computing)Scripting languageAutomationMappingSource codeWeb browserLink (knot theory)Computer fileDirection (geometry)Software as a serviceComputer animation
16:22
Computer configurationInstallation artCloud computingImplementationDirectory serviceImplementationLevel (video gaming)Computer animation
17:28
Data typeExecution unitCross-site scriptingComputer fileCloud computingDivision (mathematics)Component-based software engineeringVariable (mathematics)Data structureVariable (mathematics)Computer fileGraph coloringRule of inferenceConnectivity (graph theory)Data structureDivisorFlagDirectory serviceComputer animation
18:42
Cloud computingFlagSource codeDefault (computer science)Cross-site scriptingDirectory serviceComputer fileFlagData structureText editorLine (geometry)Computer animation
19:39
E-learningOnline helpFile formatTable (information)Cloud computingScaling (geometry)Torus2 (number)Set (mathematics)Graph coloringMultiplication signComputer fileRule of inferenceMobile appDifferent (Kate Ryan album)BitImplementationComputer animation
21:24
Cross-site scriptingCloud computingComputer fileDivision (mathematics)Component-based software engineeringMobile WebVariable (mathematics)Data structureMaß <Mathematik>FlagSource codeDefault (computer science)Table (information)File formatScaling (geometry)Level (video gaming)Computer fileComputer animation
21:47
Cellular automatonConvex hullVariety (linguistics)Computer iconFile formatComputer animation
22:18
Logic gateBit
23:04
Computer configurationInstallation artCloud computingImplementationComputer-generated imageryCross-site scriptingHacker (term)Fiber bundleOrdinary differential equationWordDirectory serviceComputer iconCurvatureCodeComputing platformDefault (computer science)State of matterGUI widgetCellular automatonSource codeElement (mathematics)Entire functionDecision tree learningRadiusIntegrated development environmentInstance (computer science)Presentation of a groupInterface (computing)SineMultiplication signComputer animationSource code
23:49
Source codeComputer-generated imageryElement (mathematics)Decision tree learningRadiusRaster graphicsType theorySource code
24:16
GUI widgetInstance (computer science)Integrated development environmentPresentation of a groupInterface (computing)TorusProgrammable read-only memoryClique-widthElement (mathematics)Entire functionDecision tree learningConvex hullFile formatCellular automatonDifferent (Kate Ryan album)Real-time operating systemMathematicsGUI widgetWeb 2.0Computer animationSource code
26:52
Point cloudFacebookOpen sourceProcess (computing)Computer animation
Transcript: English(auto-generated)
00:05
Okay, so hi, my name is Pedro. I'm a designer. During my free time I enjoy to travel, to meet folks like you, but also regarding design, art.
00:25
I also, when I do have a little time, I conduct some kind of workshops regarding UX design, but as well graphic design at the beautiful city of Prague, Czech Republic.
00:42
I'm also a happy camper at Collabra. And today I intend to show you how easy it can be to customize Collabra online. You know, without tricks and without coding and this type of thing.
01:01
So any designer should be able to do it or even any business owner, right? So talking about customization, there are great advantages regarding customizations. Not only because it allows you to customize it according to your needs or even your personal taste.
01:27
It can be just that and that's fine. So for that we will be probably working with XML, CSS and SVG.
01:40
Nothing too complex. So we can divide the theme into two pieces, if you will. The widgets, that includes dialog, sidebar, etc. and all the controls.
02:03
And the overall theme, so basically the rest, right? Tollbars, icons, drop-down menus. Going through widgets. So widgets are customizable. That's why I'm talking and starting with them.
02:21
They actually use this new extended instance of native widget framework. And I really recommend you to either after or when you have time to watch the talk from Tomáš where he talks a little bit about these intricacies of how this was implemented.
02:42
But for now, let's just say that it draws the interface depending on a definition. Or to be honest, a set of definitions that are included in one file and we'll see that later on. It allows multiple customizations, right?
03:02
So multiple definitions. Which in turn means multiple themes. This is really cool. We can now have a theme depending on an environment. And big thanks for Athenis for this, yes.
03:23
Now it's really cool that we open Collabra on an iPad and without doing nothing, it just knows that it's an iOS device and it just serves you with the right theme with the iOS-like components. And we'll see this later on.
03:41
Sorry for the bullets. I also don't like it that much, but we'll see more pictures. Let's let him take a picture. Perfect. And this in return gives you the opportunity to, for instance, going from a purplish theme
04:08
where you see not only colors, but even components are from this theme to something, for instance, more bright, where the accent color is actually blue
04:22
and even the controls, per se, completely change, you see? Here. This is great. And especially when you can serve it depending on the theme as we discussed earlier. So you see the components change completely.
04:42
Now, I'm going to show you an example of how you do that, right? Step by step. So imagine you want to tweak a particular dialogue, a particular component of a dialogue. It couldn't be easier, right?
05:00
So you go to your Inst directory inside of your core and here you will find in this subfolder online this XML file. It couldn't be more semantic, right? A file that has definition is called definition. And inside you will see a bunch of sub-tags.
05:22
Now let's discuss one by one. The style tag, in a simple way, it deals with colors, right? Highlight, font colors. So even without messing too much around, too many SVGs, et cetera, you can just tweak the overall aesthetic just by changing those values.
05:53
Next, we have settings. In settings, you can set values of things that are not particularly from a specific control, per se,
06:07
but generally, for instance, margins, tabs alignment, right? And we know that there is some dialogues with quite the number of tabs, so you can control that, the default font size, et cetera.
06:26
And now we reach to our first control. Let's simplify this. So we can evaluate this in three parts. So first we need to say which type of control we are talking about, right?
06:42
Here, let's talk about our little radio button. Then you will say, okay, this control will have this size using the part tag, and inside of this part tag, you will have a bunch of states.
07:01
Now, each of these states is actually not an individual state, but a combination of states, right? So as you see here, I'm saying, hey, please define that when the radio button is enabled,
07:21
not pressed and checked, use this SVG, right? And you see that all the other states are actually a combination of states, you see? This allows you to have many intermediary states, right? Not just the on, off, disable, enable, which is really awesome,
07:44
because if you play your SVGs right, you can achieve some interesting aesthetic results. So for instance, here, when it goes, basically you are talking about when the radio button is on and it's pressed,
08:02
and we kind of, I'm not sure if you see it with a video project, but we are already dimming out our little inner circle. So it almost gives this, even though there is no animation, it gives the essence and gives this visual cue to the user, and that's cool.
08:24
Now, here we have, yes, it shouldn't be like this, yeah? Sorry for the rendering issue. Maybe it's the resolution. And exactly, we have many states, as we say. Like, of course, more than one state can be catch, right?
08:42
More than one state can be active. But just the first one will be understood and rendered. Yeah, that's why it's important for this order, the order you set your states. But of course, you can always play with it, right? You set some definitions, you play, you change some SVGs.
09:04
It's quite easy. The SVGs, it would be located in parallel with your XML file. So there is actually no structure folder complexity here.
09:20
Now, that being said, it doesn't make much sense to customize your widgets and then forget the rest, right? Everything should be one identity, one visual identity. And I'm happy to say that it should be still easy to set up and easy to hack,
09:41
even if you are just playing with it. So in here, inside of your own line directory, inside of this subfolder, you will find many CSS, many JavaScript files. So a word of advice would be don't try to change or hack every single file
10:06
because then you will have many loose pieces, right? And harder for you, even if it's just personally, even if you are just playing with it, it will be harder for you to maintain. And then you fix some CSS rule in one file and then you find out that in the other file is...
10:22
And that's why you can just use this file, branding.css. And, of course, if any images are referenced there or you want to add any extra image, you can just drop them here, right? Before all these, you need to get Collab or development version of it, right?
10:46
And be sure, this is quite important, that the code, brand, package, it's on your machine, right? Just to check. And then, hopefully, you will see what we see here, right?
11:01
Now, this has a couple of advantages, right? You have just one place where all these customizations go, one file, one folder, that's it. But where if, and we sometimes receive these emails, where if you went really happy with your customizations
11:23
and suddenly you want to have many variants of your own customizations? Suddenly, you want to have your own personal set of customizations, your little themes, if you will. It will be a little bit troublesome to just, you know,
11:40
have it like branding underscore copy one and then, you know, and then if you want to change, you need to rename. So, for it, you should just, we have a potato. And for this case, you should either, you know,
12:03
refrain to have these multiple files and just have this CSS file and everything is there. So, for instance, if you want to change the currency symbol, imagine you have a specific requirement from your customers or even at your home, someone really likes potatoes, right?
12:23
And for them, potatoes means currency and that's how they see it. So, you should be as easy as a potato to just replace the SVG with your SVG and making sure that this is over this folder. And then, it should be, you know, easy peasy, right?
12:43
You will just redraw and you will have a potato as your format currency symbol. So, at the end, this gives you a great flexibility because it's really up to you. Like, it doesn't matter your method. It doesn't matter how you do it locally.
13:01
At the end, you just need to be sure that you update that CSS. You drop it there, right? The images are located here and that's it, right? Now, could you improve this workflow? And again, I reiterate, you are free to choose whatever method you want.
13:24
What you might start to think is that, okay, wait. What if I divide the CSS file in multiple CSS files that have my own customizations and I can play with it? Like, I would, again, recommend to don't do that
13:44
because then it means that you will alter your lowly-flat directory so it will not be this pristine directory anymore. Suddenly, you will have many things happening there. So, for instance, if there is an update or something, you will have, again, these loose pieces. And then you might think, okay, but I will,
14:02
maybe I can change the classes in the HTML. No, don't do that. It will be really messy. So maybe if you really want to have a more organized structure of your own locally, I mean, apart from Collabra, so you have your own things and then wherever you want,
14:21
you just want to, okay, now I want to have it from my own customizations and I want to drop it to Collabra and everything works. If you want that, maybe we can talk about preprocessor, right? And this CSS preprocessor, it allows you to compile,
14:42
I think, yes, it allows you to compile from a scripting language to CSS. And this, yes, adds a layer of complexity, but it also, and we will, for this example, we'll take SaaS, and there is many, as you see,
15:03
but for this example, we'll take SaaS. This suddenly allows you to work with variables, functions, what they call mixings. This translated means that you can avoid repetition because you can have variables. And you can have, for instance, even in this example
15:21
where we are talking about vendor specific proprieties, for instance, when you want to transform an element in CSS or other example, and you need to use more these vendor specific either for that browser or that browser, you can have these in one place and reuse the code, right? So you don't need to have this redundancy all over the place.
15:43
Yes, plus it will still allow you to debug directly on a browser as you have been doing with CSS. You just need to be sure that you have the source maps on. And source maps are nothing more than little files
16:00
that tell the browser, hey, this CSS came from this scripting file that happens to be a SaaS file. And this even allows you to edit the SaaS file directly. And you can then use these links just to be sure if they are enabled or set up correctly in your preferred browser.
16:24
How you go about to install it? There is many ways and using many different technologies. So it's, again, great level of flexibility. It's really up to you. And even all these we are discussing now, it's even not needed.
16:40
If you are happy with your CSS, just, you know, do your own customizations. Just drop it in that directory we spoke about it. And that's it. No more work. But if you want more level of, granular level of organization, you might want to install it
17:03
over your preferred implementation. Again, a word of advice. This is the primary implementation, which means that performance fixes and even new features always appear first on Dart. And then it's up to the communities
17:21
on the other implementations if they appear or not, or even with some small tweaks, different tweaks. Now, this is how you could structure it locally. So again, the big advantage is that it doesn't affect your lowly flag directory. So your online folder structure is still pristine.
17:45
You know, no probability of problems there. And here is how you could structure, right? So you could, for instance, divide it in components. Your own, of course, here I went crazy. Just to give an example that you can really go granular
18:02
and you can really have a lot of customizations as much as you want. And then you have, for instance, a base file where all your theme-specific variables will be, right? And then this little guy, actually our main guy,
18:21
would do the breach of all these files and say, if there is a rule that comes from one of these files and uses a specific theme, then I say, OK, give me this color from this specific theme, and we'll probably read from this variables file. And we'll see this in a minute.
18:40
So you don't need to worry. And finally to run will be, for instance, just one line. And there is quite interesting flags here. But the advantage here is that you can automate this process, right? You can run this on a terminal, and actually many editors even have some plugins
19:04
that if you really don't want to even, can avoid the terminal and run this on the background. And it will be watching always your file. And you see even your own custom structure is in your local folder.
19:22
It can automatically deploy to the directory we spoke about it. So at the end it's doing the same, right? It's just rewriting that file. And then these cool things like you can choose a compressed file for a smaller file, et cetera. But enough of bullets.
19:42
Let's see an example, or second example actually. So you see here, and I try to be a little bit brief and talk just a small detail because I think then it's clear to follow through. So you see we have here, we are talking a bit about drop-down menus,
20:01
different accent colors. For instance, even here we have normal font height. Certainly here we have bold. How you'd go about if you want to have, for instance, different set of customizations? Easy. So following that structure, we'll just go to our toolbar app file.
20:23
We'd set normally as we would do, for instance, in CSS, but instead of keeping, hammering down all the rules here, and probably if we have like two, three sets of customization, we'll have these times two times three, who knows?
20:40
So instead of these, we say, okay, no, no, just go and ask this little fellow, our base file, where we have all these theme-specific variables and get the values from there. On that side, this could be an implementation
21:02
where we have just two sets of rules. We'll say, okay, so if this variable is set to this, use this. If it's set to our your-theme-2, which is an extremely semantic variable value, you would use this and suddenly have these two different set of customizations. And this is just one way to go about it.
21:22
Of course, if you read the previous slide, there is many methods you can go about it. You can even have many themes for each specific file. It's up to you. Again, a greater level of flexibility.
21:42
But just to make it simple, I use like this. I think it's easy to follow. And at the end, the goal here is to make it yours, right? Either for your own personal taste or if you have a specific need, as we saw previously, if you want to have a currency format icon
22:02
that is not a coin but it's a potato, no problem. You can just switch it and have it there. So it's really up to you. And these are just a couple of examples of the variety you can get from these simple steps. Yes, thank you. I hope it was not too fast and not too slow.
22:30
Yes, sir. And sorry for, I know that you were waiting here a long time, but I was waiting for everyone to calm down before starting. Yeah, no worries.
22:40
Tell me, Tom.
23:01
Wait, it depends because I go back a little bit. Yes, like if we are talking about widgets, it's different, right?
23:24
Because as you notice, we are actually not using CSS inside when we are defining these objects, right? So, and I hope we have time. I skipped that because I thought we wouldn't have time for that.
23:42
But for instance, many of these components, they are SVGs, right? So for instance, when we go here to our definitions, you see, they are SVGs, right? Now we have two types of SVGs. On one side, we have the SVGs regarding the controls, right?
24:01
And they end up to be rendered as a bitmap. Then we have other SVGs, the SVGs that are mutable. They are changing, right? For instance, an SVG, for instance, for our, I don't know, they change width.
24:23
So they are actually rendered via draw comments, right? So there is a difference there. But if you are talking about the overall theme, so not the widgets per se, but the overall theme,
24:40
then the coolness of this is that you can have online running. You can even use the web tools on a browser. Go to that branding.css, change it, or even, I don't know, delete the whole thing and paste whatever you want,
25:00
and you will see in real time the changes appearing. So depending on what you are talking about, it's slightly...
26:11
It's awesome to have candy in the room. What?
26:35
Basically, when you are creating the slides, it's the same way. So again, the difference is...
26:44
It's you next. It's you next? I didn't know, sorry. I'll show you. I'll show you something, unless you want to show me something else. No, no. I'm okay. Cool, well done.
27:00
Nice job. Thanks. Oh, it's okay. I don't need applause. No, no. Thank you.