Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
so I'm working at Adobe I'm a computer scientist and I'm working on the web engine team with Divya that's my Twitter okay I got it so that's my teacher handle if you want to follow me or something and at the Derby I've been working
on most of the features that we proposed features like cities regions exclusions or filters and most of the time you can find me on the web guitarist channel I'm usually hacking on wicked so today I'm going to talk about sis's filter lab but before
that how many of you have heard about this as filters all right cool so most probably already know that the filters are a way of applying visual effects on the web and if you wanted why would you need that in the browser and not I mean but that's been
possible before we using tools like Photoshop or other other tools that were available offline and what people did before was just embed the filters directly into their assets so they generate the Ganges or GJ bags using directly CPI or brightness or other
filters but now we have this option to do it in the browser and you can apply the filter effect on any element of the Dom meaning that you can take a form or some image or any other text or any other block elements and apply some filters and that's pretty
cool because you can customize your content exactly how you want it to be viewed by its and one thing that it's good to know that filters can be changed so you can't have a blur and apply a seat my my information is color my equations that may want
and because of this is hardware accelerated and most implementations you can animate this really nicely and get some nice effects on it and one thing that you need to know is that there are three types of filters that can be applied on elements the first one
is the most common there are the built-in filters there are ten filters that are available today in in some of the browsers like Safari 6 Iowa's six also has it and chromium and they include things like drop shadow blur or other column articulations like
brightness or sepia the the second type that we at the W are working on is the custom filters and it's actually about writing your own filter for the web your you can use the same programming language but WebGL uses so with custom filters you can target
directly the graphic unit the GPU so it's all about writing shaders and you can get some nice effects like page curling or warping you can deserve the elements in so many ways and the first part is actually bringing the the complex SVG filters that were
possible today in most browsers and with with the SVG filter reference you can now reference an SVG filter from CSS meaning that now you can apply the SVG filter on any other elements that's not an SVG element so we can take all this BG filter and just
put it on a block or a button or something else that may may have in your document so now I prepared the demo here where I have this this image in the middle and I have a demo away from with this filter blur in the middle this is the CSS for Corvis this filter
this is his property scope filter and all the filters are actually custom functions like this Buller is just blur and you can change them if you used the transform property before it's pretty similar to that you can put multiple of these effects and they
are gonna take the input from one effect and maybe put that in the input of the output of the first input this is gonna be in the the next one and by the way I'm using the presentation is all built in HTML and I'm using an iPad here so everything that
you see like the circles that you see on screen are actually my fingers so I'm gonna drag this here and you see that syntax changes it's it's changing the value of the blur parameter and you can see the the image is being updated in real time and
as I told you you can apply this on other elements like the form so in this case I have this element I can go on and type on it and come go back and we can still see the the content and there it's like it's like whenever we think about a new feature
we usually want to make sure that the API that we expose and the syntax is really useful in in practice so what you do we build demos and applications just to work with the the syntax in the new feature and in this case for filters we've built a couple
of demos but then we realized that we really want something like a tool where you can play around with the parameters and move filters around and we ended up with CSS filter lab it is initially just an experiment to see how it works but it ended up as a as
a tool that designers can use to create this effects and an animator and ver filters and it's available online you can download it it's on the github it's actually a web application so you don't need to download it to run it but you can it's
open source so you can look at the code and today I'm not gonna talk about that one but I'm going to talk about what we did to move filter lab on mobile so here I have on this side I have the screenshot of the Phil the lab for mobile so what I'm
gonna do right now is gonna switch I have the lab here it's an eye you know home screen app so it's it's using the offline cache so it's on my tablet and when it starts it just has this preset mode you have you have all the presets that I created
before and the preset is just a list of filters so whenever you're done with customizing your filters you can share it you can say that or do something else with it and or encoded in your app so I'm gonna go ahead and open the first preset run out
there's no filter in the list so I can bring up the filter list we have the built-in filters today and this is the stock iris 6 so you see all the filter or did the built-in ones are here so I'm gonna go ahead and select the CTR and right here I have
this control on the on the bottom that I can use to change the fact but that's not really useful if I'm changing this effect and I cannot see it so what we did was to use the UI so to expose the exact filter that you're editing so in the lower
left corner hopefully you can see that there it's this filter sepia 91% so I can still go ahead and play around with the filter and see the result in there and I was telling you that you can combine filters so you can change them so what I can do right
now is go ahead and add a set rate and what that does if you see here on the left corner the sepia and set rate can be combined and work together and I can go back and change this guy too and you know exactly what they want to do build my own filter and at
[ ... ]
Nota: se han omitido las otras 3.240 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.