W3Conf 2013

La era del layout intencional

Eric Meyer  · 

Transcripción

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

hi there hey I can't see you at all so having Doug and Leah and Divya and everybody put on a great conference can we give them a round of applause it's been a great two days well thank you for having me I'd um I'd like to start actually with

a quick reading which is which is to say in the beginning Tim created the server and the browser and the web was without form and void and darkness was upon the face of the HTTP and the spirit of Tim moved upon the face of the web and Tim said let there be

markup and there was markup and Tim saw the markup that it was good and Tim divided the structure from the appearance which is a pretty amazing thing when you think about it right here's a here's a medium that's meant for visual devices and yet

the structure and the appearance are separate this is a screenshot I got courtesy of Grant Hutchison who maintains old computers specifically so that he can do things like answer questions on Twitter like hey does anyone have a copy of mosaic that I could

get a screenshot of the Preferences so thanks grant did this is a preference setting for mosaic where the user could say I want my heading for my header for as it was as it was written here I wanted to have this font family this font face this size this color

as the author that was not possible you could not do that the HTML specification itself while it had some typical rendering suggestions did not require that an h-1b 18-point times boldface in black or any of those right it simply said here's a typical

rendering often very big and bold and so on but was very explicit about not requiring that elements looks like that that's pretty amazing and it's a fundamental feature of this medium of the web right and it's something that I think we've forgotten

about over the years in part because as with all creations there was a fall and as usual a reptile was to blame known in the ancient tongue as mochila from motif or bringer and law of appearance you can see here that the first thing that they did at Netscape

when they extended HTML was extend it presentational e okay so maybe you can't see that if you're in the back I'm sorry but they're the first thing that they say in their extensions is we've extended is index with a prompt tag actually

they meant to attribute we've extended it so that instead of having the default text this is a searchable index into enter search keywords you could put your own text like search me which is I think what everyone did the first time and then right below

that here are all the cool things you can do with horizontal rules you can make them not be shaded you can make them be a size you can stick them to one side or the other right had nothing to do with the separation allure of an HR it had to do with what it

looked like and then as you go through this document I they have all kinds of fun stuff the you know ordered lists have hang ABC oh look the image is IMG is probably the most extended tag we're gonna align it to the right and the left and you can set all

size and a border and all kinds of fun stuff and then down here at the bottom they say things this is one of my favorites Netscape should now properly deal with the awful HTML comment sequence I don't know what's so awful about the comment sequence

but apparently they didn't like it maybe it wasn't presentational enough I don't know okay so this is what happened right off the bat right we started getting presentational hacks baked into the markup which is not where it was supposed to be in

the first place this did eventually get us to where we all end up there for a while which was with table layout lots and lots of tables pretty much like Turtles it was tables all the way down there for a while but we got better in part thanks to the web standards

project and and other people who were of like mind in the late 90s who in addition to saying that browsers really ought to be interoperable which was kind of a novel concept at the time kids asked your parents they the web standards project all and the people

who supported also made a big deal out of semantic markup the stuff that Nicolas was just talking about right the idea that we should not be using tables for layout because tables actually had a semantic meaning and you know they needed to be used for that

and we should be doing a layout some other way of course at the time the reaction was usually how else are we supposed to layout pages right that's why we were hacking tables and backgrounds and spatial gifts in the first place yes I say gifts with a hard

G deal with it hard you represent come on all right I understand for those of you who think that softkey is a right way and you're wrong by the way that the pronunciation was written into the specification to which I would say that would not be the first

or the last time a specification includes a bug so thank you anyway so there was this pushback saying we need to be using something else CSS came along that's its own story which I'm not actually going to hell today all the you know the implementation

problems we had there but it did lead to kind of a pendulum swinging the other way things got a little dogmatic there for a while right as often happens with with matters of religion where it got to the point where there was a kind of a common joke going around

for a while which was why did the web designer leave the restaurant because he couldn't stand the table layout these the jokes folks work of me thanks but anyway so we got past that period thanks to a you know a number of things including a e5 for the

Mac whoo the context still here a little shout out there it was a great browser but then so was IE 6 at the time that's a whole other story we moved into the era of CSS right which this is a real thing by the way I got this from picture from Kris Kuyper

thanks Kris wherever you are we'll work out payment later so we have CSS to to lay out our documents except there's kind of a problem with that CSS it's not a layout language CSS one certainly wasn't if you read CSS once these this one's

actually pretty short as Nicolas was talking about it's not that long of a document you could print it out and probably read it in an evening if you felt like it it's very simple and it doesn't have any layout it's an appearance system not

a layout system so at this point let's say we're at about you know 2001 still don't have a layout system for the web of course though I wasn't designed intent primarily for layout but lots of people using it now we want to kind of lay things

out and you know I'm not trying to dismiss CSS that had a lot of great stuff I mean the box model for example was a really great thing because it used to be that if you wanted to have your content separated from visible borders with a background you ended

up nesting all those tables right it was tables all the way down and with a box model you had content and padding and border and margin all of which you could address separately but the only thing that CSS one contained that even came close to a proximate

the idea of layout was floats and that's not what they were for they weren't supposed to be for layout they were just supposed to be so you could take an image well really any element but it was restricted the images at first and put it to one side

and flow other stuff around it okay and when I say it was restricted to images at first I mean by the implementations not by the specification right the whole idea of floats was just we want to put something to one side and flows stuff around it because Netscape

did that with the IMG tag when they said we're gonna add an align attribute and they can have left or right and then stuff will go around it okay and as we quickly learned floats can be dangerous you can have the float drop right remember float drop columns

when you're floating your columns nice to each other and one of them gets too wide and it drops below the other one seem like a really stupid thing for a layout system because it was because floats are not a layout system is kind of the point here also

a float containment just flat this past week like earlier in this week I had a conversation with somebody who has been doing web design for many years not quite ten who had no idea why floats wouldn't contain their children right and why an element wouldn't

grow to expand to contain a float within it okay remember this is someone who's been doing web design for almost ten years but that means that they probably started in about 2004 for those of you who don't know it's it's Google Bowl but what

it comes down to is again all flow was meant to do is put images the sign and put text around it right not a layout system you could do all kinds of amazing things with floats right this is the acid test created by Todd for honor I'll shout out to Todd

and you could sort of fake layout but that's all you were doing you were faking so okay so when working on CSS to the working group will tell what for doing and I so far as I can tell came to the conclusion that hey people want to lay stuff out too new

right people actually want to arrange things on the screen so we're gonna give them a system we're gonna give them positioning okay anyone tried to do layout with positioning I can sort of see you okay yeah I don't see that many hands the rest

of you are just suffering post-traumatic stress disorder I assume because positioning is great in very limited cases but as we all discovered very quickly if you're not careful with position you can run yourself into some trouble as happened apparently

in Madison Wisconsin to a Toys R Us why that's the only question I have about this poster is to the people who hung it realize what they done and do it anyway anyway creating passionate users so position was meant for layout but it wasn't really sufficient

[ ... ]

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