Presentación
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
day 2 of top Center news PHP really really excited to introduce to you right now a person who I admire ball Jim Cramer is she's just amazingly intelligent full tastic at what she does Oh even more than that but she can explain it so well so that no matter
where you're starting by the end you come away you understand exactly what she's been talking about in video com if you never get to hear her speak again and you can always just go download one of the videos and watch for teaching things at your leisure
it's amazing and she's just wonderful thank you thank you wow man i feel like a rock star well welcome everybody huh how's everybody doing how's the conference going good good okay so so at this point you know we're at two o'clock on
sunday afternoon and you all are ready to go sleep right ok i will do my best to keep you all awake so we're going to talk about twitter bootstrap and ZURB foundation okay so how many of you have heard of bootstrap okay how many of you have heard a foundation
more than I thought excellent okay so here's what I'm going to do today we are going to do the following first of all I'm going to ground you a little bit in mobile techniques i did a bootstrap workshop on friday from nine to twelve and I was kind
of surprised by some people needed a little bit backfilling on some of the stuff so I'm going to start at a very basic level two you'll just a little bit about some mobile techniques I'm going to tell you a little bit about responsive design as
well sort of ground you where we are and then I'm going to go into what is bootstrap and what is foundation and then finally we'll compare them and of course will take Claire a winner because if there can only be one right there could only be one all
right so this is what we're going to be talking about first of all it is all about mobile and I think this is the best picture ever that explains it all this is st. Peter's Square in Rome when the first when the Pope's were announced in 2005 and
2013 do you see a difference between the pictures okay now granted they are all taking photos but what are they going to do with those photos they're immediately going to go post them somewhere so as all of the responsive design mobile first speakers have
told you Mobile is here to stay if you don't believe them yet please just look at this picture internalize this this is it is truly here to stay okay the two big approaches to mobile that we've heard about first of all you can build a separate mobile
compatible website or a mobile app or both okay jQuery Mobile is one of the approaches to this there was a great talk on jQuery Mobile yesterday or you can go with this concept of responsive design okay and tell you a little bit more about responsive design
in just a second as always which is better the answer is it depends this is your million-dollar consulting phrase if you are ever in a gig and a client asks you a question and you don't know the answer if you simply say it depends you are always right
okay so it depends as to which is the better approach here there is an article here that you can go and read that will compare these methods and you can decide which is right for your particular approach we could probably do a whole talk about the differences
between a mobile applications and in responsive design and so forth all right so a little bit about responsive design this was described by Ethan Marcotte in his article here at a list apart back in May of 2010 so the techniques only been out for three years
nobody knows anything because we're still working on what exactly this is but responsive design is defined by three characteristics and that's it those three characteristics are a flexible grid based layout images that resize and media queries that's
all that responsive design is now we have a tendency in the field to like to take terms and make them mean more than one thing for example if i say to you the word server server might mean a piece of hardware or i might mean it's a piece of software right
and it depends on the context i use it in the sentence responsive design is another one of these terms people tend to think of responsive design as my website responds to the piece of hardware where I'm viewing it right but technically speaking responsive
design refers to these three techniques okay and I've actually advocated the use of the word reactive technology to encompass all of the various techniques that are used respond to design a separate mobile website or mobile app as a way of developing websites
for the mobile environment okay so what are these things here is a grid-based layout this is actually bootstrap version to a grid-based layout means that you have planned your website in 12 in this case 12 columns you can use more columns than that but 12
is a nice number because it manages math pretty easily and those would be the pink columns and then you can group these columns together as units so you can use 12 individual columns going across just because you can doesn't mean you should okay you can
group them together so the second row there shows you three groups of four columns all right or you could just say I want three on one side and nine on the other and this gives you the shape of your web page the wonderful thing about using a grid system that's
written out of the box is that somebody else has gone through the process of writing all the CSS to make this happen and they do bugged it isn't that a wonderful thing especially where positioning is concerned all right so that's what the grid base
layout is you'll also need images in resize if you were just up here for Jonathan's talk he talked a lot about images that resize and very specific techniques for how these images can resize I'm going to talk very broadly and generally here to
summarize okay what is images that resize what this means is that images should change size based on your screen resolution if you have a big screen ya got a honking big image if you got a tiny little mirror screen you get a little image and ideally you're
not downloading the honking big image on the tiny little screen with all the associated with bandwidth and potentially a slow download so there's a couple of approaches for that you can load that big image and then let it scale right just because you can
doesn't mean you should this is probably a not a really good technique for all the obvious reasons you can do something server-side so let the server decide how big that particular screen is and then serve up an image you can write a PHP interface so i
can upload one big image and it will resize it into a bunch of different formats for me it would be a beautiful thing that is a pretty good technique okay whoops whoa what just happened oh look at that yay grid base layout images that resize there we go client-side
you can load several images and then display the one that's right for this resolution this is the infamous quote display none approach so what I'll do is I'll have three image tags in a row one that calls the big image one that calls the medium
image one that calls the small image I'll associate classes with those that will only show it at certain dimensions anyone see a problem in this day who went to Jonathan's talk and knows the answer right a performance thing right now you have three
images that download instead of one and only one is displaying so this is really not a good technique either okay or you can actually have some Java scripts that will decide for you so it will say JavaScript will decide that your screen is so big and then
load that particular image and that is a reasonable approach as well it's a client site approached okay and that actually comes with foundation whoa out of the box with foundation you can manage your images using that technique letting JavaScript aside
hey how cool is that that is not in bootstrap all right media queries okay so media queries the browser is reporting the screen resolution the browser always knows how big it is and then what happens is based on that with a certain style sheet or piece of
[ ... ]
Nota: se han omitido las otras 4.023 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.