Conociendo el módulo Modernizr

Extracto de la transcripción automática del vídeo realizada por YouTube.

okay hi everyone I'm going to begin is that cool those technicians are gone all right well thanks for coming to the session I hope everyone is enjoying drown Portland so far get everyone hear me that's normally never a problem so the sessions called

me the modernizer module awesome and boom I I am Chris rupal I'm a front-end developer at four kitchens we are one of your lovely sponsors for Drupal com so thanks to my fabulous employer for putting up some dope paintless games in the middle of the trade

show floor and stop by our booth and say hi we've got a like a photo booth like mustaches on it's pretty cool anyway enough about that why should you pay attention to what I'm about to say that's always a good thing to answer right up front

I do a lot of open source stuff i am lee maintainer the modern answer drupal module I'm co maintainer I didn't start it I contribute to modernizer the library itself I am the creator and maintainer of respond j/s but don't use it I've worked

with some D aid stuff and I've also helped with the deed auto infrastructure so I'll get around I love Drupal and obviously you do too that's where here so before we start talking about web development I want to talk about a different type of media

that has had all the same problems that we're going to have except ours are going to be way worse in the future and they already are great bad so let's talk about TV a little bit when you have a TV channel you want to and when we have websites we want

to remember that we want to strive to deliver the best experience possible everywhere that does not mean deliver the same experience everywhere what deliver the best experience everywhere so all browsers are different browsers are you know even version to

version they're not the same a lot of times I tell people that like just like two people with the same name two browsers with the same name or going to have very different characteristics you know there could be another guy named Chris or a girl who goes

by Chris and these you know I'm going to be very different for the next person and so are you when someone has your name and so all browsers are different and so we have to kind of deal with this right even the same version of chrome is going to be different

whether you're loading it on a smartphone versus a desktop machine so we've got a very fragmented landscape here but TVs kind of the same deal because TVs have lots of manufacturers there are different shapes of TVs there are different color capabilities

on TVs and resolutions and so forth and I've got a couple links here these slides the Wi-Fi was killing me I couldn't push the slides but I'll get them up there today I promise there's a couple links in here pretty much all of the stuff that

I'm telling you is has prior art it's not my material but I'm kind of standing on the shoulders of giants here and delivering a message that I've heard at javascript conferences and stuff like that so there's all the material that I'm

kind of condensing down for you in three links and the idea here is that just like TVs we are going to deliver tiered adaptive front end experiences that's what your website should be it should be kind of you know it should change its shape and you can

remember this because tiered adapted front and experiences the the acronym is taffy alright so that's what your website should be like and the idea is that we're going to customize the experience to the capabilities of each web browser and like I said

not a consistent experience but a fast reliable experience is more important than consistency so just to take another comparison or take another look at tvs when we look at like really old TVs they've got black and white their lower definition and all

that that's just like an old web browser right and then we've got new tvs new tvs are very large crisp they've got more colors they've got more pixels they have internet connectivity they can literally do lots of things other than just a TV

picture of making and those are new browsers right they can do all sorts of stuff that when the when the invention of the TV aka web browser you know all those they weren't they didn't even know that we're going to be able to do this stuff when

they made a web browser at first which is awesome technology is great and so then this awesome Saved by the Bell is that's your content that's your website content right and it's going to show up on all these different channels or channels is a

bad word but I meant that like the marketing sense the it's going to show up on all these different devices right one channel TV channel and you've got to make the picture look consistent or you gotta make it look good on each one of those things and

it's not going to be consistent so we've got a picture of three TVs here and kind of just take a look at each one on ya on the left you've got a black-and-white TV showing a black and white picture in the middle you've got a color standard

def TV showing a caller standard def picture and then finally an HDTV showing a crisp beautiful HD TV image so TV already solved this problem they did it with standards just like we do in the web on the web however when we talk about building websites we do

it this way a lot of the time all three of them are black and white and standard def and the content is limited by the lowest common denominator and that's no good right this would be silly if you saw it on TV and yet this is what we do a lot of the times

because you know whoever like your client says well this has got to work on ie stupid you know you're like okay all right so you said you wanted a responsive site and I guess we just like won't give you one if you know if you if you want X or Y or

you want this feature so I'm going to go back to this picture here for a second and who here has heard of graceful degradation all right yeah everyone has and then progressive enhancement and everyone's like oh that's the same thing right that's

where all told so the only difference here is that when you're gracefully degrading your building that HD TV content first and then you're stripping stuff off of it backwards as capabilities fall off now you can see in this black and white TV that

those color the that those flowers are great visible because the image was a color image originally and so losing that color information makes it very difficult to see on black and white whereas if you started with a really high contrast image and then added

color or something to it then you would have the concept of progressive enhancement because all the information all the vital information is a present in the simplest format and that is the crux of mobile first even though we always say mobile first we really

just mean simple first basic first lowest technology first it should be there no matter what and if you're putting content on the web and you think it's important then it's probably important to everyone not just the rich people with smartphones

so that's kind of what we're going for here as we go through the rest of this all of the all the little code snippets and all the examples i'm going to give our ways of ensuring that your experience is really fast and reliable but also very rich

and interactive when the browser can handle it and when it's appropriate and when it's easy to do without making the whole website slower so what I'm going to basically show you is approaches that you can use to attempt to solve problems with device

diversity fragmentation in between versions of browsers fragmentation in between browsers running on two different devices backward compatibility and future friendliness all wonderful words that we've probably heard before so how can we solve this stuff

our go-to in the past what's user agent sniffing right and you know everyone's done it it's no big deal did it for years and you'd say okay you know I bones the new thing it's it's really easy to make a mobile site for so I'm going

to make a mobile site for the iphone so I'm going to grab that user agent string I'm going to find the word iphone and I'm going to serve up an iphone page awesome except not because I pads have the word iphone in them you know I could make my

user agent string say iphone even though I'm running firefox or something like that opera for a long time didn't bump up its version number because when it went from nine to ten things that a coat pieces of code that we're reading opera version

strings would find opera space one and not read the zero after it and say your browser is too old even though it's the newest version of opera so opera the user agent string i think is still at 9.8 one or something like that even though they're on

opera 12 so user agent stiffing is an outright lie and is it bad practice i I I think it's a bad practice the solution that I find more appealing is to detect individual features in each browser using javascript so this does a couple things right off the

bat number one if you can't run JavaScript you're going to fail these tests but if you've built the content to withstand failing every test well it's still going to be perfectly fine so you can still ship a website and be sure that your content

is getting to everyone regardless of the capability of the browser now when the other really strong advantage to this is when tests are actually passing and you've got JavaScript well you can do really cool things because what you've done is you've

[ ... ]

Nota: se han omitido las otras 4.851 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.