Michael T Ganschow Green: Continue Oh, why do you then look at that we are recording another round of JRC 175 today should be fun, this is actually a lecture that you that i'm putting together because.
Michael T Ganschow Green: Enough of you requested it, that I will be putting it together and we'll be talking about a topic that is usually reserved for GR C to 75.
Michael T Ganschow Green: And a couple of you've asked me about it and i've been kind of sending you links and things like that, but by the time, like the fifth person asked about this topic I figured.
Michael T Ganschow Green: This was something this crazy mega class was interested in so i'm bringing a little teeny bit of to 75 back out of that Semester and into this semester.
Michael T Ganschow Green: And we're going to go over how to really mess with your objects you in a very basic way we're going to cover we're going to cover the just a few pieces of it.
Michael T Ganschow Green: In the.
Michael T Ganschow Green: In the CSS it's a property called transform and it's mostly used for animations, but it can also be used for static modifications as well.
Michael T Ganschow Green: Apparently, enough of you rotating things that you're asking me how to rotate and flip and and distort things in CSS.
Michael T Ganschow Green: Then I figured it might be worth lecturing on that topic, but before I do that I want to do a quick review of ftp and how to put your websites online since.
Michael T Ganschow Green: By the nature of your questions and by the nature of the time you're all chewing on building your project tues i'm seeing also good participation.
Michael T Ganschow Green: On the project three preliminary critique as well, very good everybody's giving each other good feedback i'm liking that i've been.
Michael T Ganschow Green: dribbling and traveling in there, a couple of times a night, and I hope some of you are taking that way, rather than trying to answer all I think there's like.
Michael T Ganschow Green: I don't know 2324 of them in one night, because that will cause you to go insane but i'm getting good participation there if you've not gone and provided feedback, please feel free do so.
Michael T Ganschow Green: Your fellow students will appreciate, you your instructor will appreciate, you and also you get a better grade so let's talk a little ftp and how to put our stuff online.
Michael T Ganschow Green: Once we are ready to go with our website so.
Michael T Ganschow Green: let's go in and pretend that.
Michael T Ganschow Green: let's go here let's pretend that our little GR C 175 DEMO site here is a project to.
Michael T Ganschow Green: i'm going to go we're going to make a new tab here i'm going to go close final Zealand whenever you open it as a student because I had any teacher mode than done alright so.
Michael T Ganschow Green: In order to access your student folders you come over to the class website.
Michael T Ganschow Green: and go to home.
Michael T Ganschow Green: And there are your ftp info sheets, depending on what software, you are going to choose so we'll kick it off with file zilla this guy right here.
Michael T Ganschow Green: And input our student information jump in and put some files online okay.
Michael T Ganschow Green: So, for your.
Michael T Ganschow Green: To put files up online, of course, you need three pieces of information at least some servers require more, but you need the host address, ie where the server is.
Michael T Ganschow Green: Your username which is basically, whatever your account is on that server and your password now fortunately I have provided all three things to you here in the form of a nice little hostname copy and paste appear in the quick connect.
Michael T Ganschow Green: A lovely little username that we can also copy and paste up here into the quick connect group and, lastly, a spring 21 G RC 175 copy.
Michael T Ganschow Green: paste that match quick connect see the server likes it yeah it does, and there is a very nice pile of student folders awaiting the project tues.
Crysta Clark: I hate Michael.
Crysta Clark: No you're not sharing your screen.
Michael T Ganschow Green: Oh, thank you for the reminder, I thought I was looking at the screen sharing sitting behind my browser hang on one second.
Michael T Ganschow Green: Let me share my screen So yes, the recording will show a nice blank there that's good oh there it goes okay now it's sharing the screen, so let me back up.
Michael T Ganschow Green: We close this out by by and we're going to close this out Okay, so when you want to ftp your files you open up your site route, so I am going to use my glc 175 as a nice little site route here we're going to pretend that it's a project to or a project through your project for.
Michael T Ganschow Green: input files online um you need a couple of things to access a host first you need an ftp software files, it was a good free one dreamweaver also comes with an ftp software i'm.
Michael T Ganschow Green: too, you need account information to access it now on the class website, I have a set of ftp info sheets here, so if I come down here and I select files that love because that's what we're using we get a lovely little.
Michael T Ganschow Green: PDF that has all of the ftp info to set files up and get it ready to go, we have our host address, we have our username and we have a password.
Michael T Ganschow Green: So i'm going to fire open a file zilla.
Michael T Ganschow Green: Do and i'm going to copy my host.
doing it this way for my goal, my father, it is high files up.
Michael T Ganschow Green: front and we'll just dip and dive so there's my host and i'm going to copy in the username.
East.
Michael T Ganschow Green: And because i'm lazy copy in a password no I seriously i'm not bothered memorizing any of the passwords this year sorry guys I put them on cheat sheets for a reason.
Michael T Ganschow Green: Quick connect all right, let me, let me end so now that i'm in i'm in the student folder for this particular semester, and there are a nice little chunk of student names awaiting oh waiting awaiting.
Some fine.
Michael T Ganschow Green: So looks like we've got a couple of stray working graphics sitting out here so i'm going to break some people's hearts and delete those well we're here.
Michael T Ganschow Green: So we will grab you and you and I control click or command click in this case and we're going to delete them by by confirmation needed are you sure you want to delete them yep that's project one stuff I gave those people agreed already.
Michael T Ganschow Green: So now that's Nice and clear okay dockers so we've got our student folders all sitting waiting here so in order to make all this work, we want to Double Click on our existing folder.
Michael T Ganschow Green: And we are now ready to upload our website so just a couple of quick pieces of prep before you go and upload your website.
Michael T Ganschow Green: First things first.
Michael T Ganschow Green: Is you're going to have.
Michael T Ganschow Green: Some people find it easier to make a duplicate of their entire root folder when they before they do this and have a separate route that they're putting stuff online for some don't mind doing it in the main root folder up to you, but.
Michael T Ganschow Green: What I want you to do is, I wanted to to take your working graphics folder.
Michael T Ganschow Green: And I want you to zip zip it.
Michael T Ganschow Green: let's go compress loop.
Michael T Ganschow Green: And I want you to slightly rename your working graphics folder to work in graphics P to.
Michael T Ganschow Green: Why am I doing this because most of these folders over here the students folders should already have.
Michael T Ganschow Green: A working graphics folder in them from project one now i've already great in your project one So if you would like to delete your working graphics folder out of there and just put your new one up that's fine as well.
Michael T Ganschow Green: Either way, though, I would like to see it named P two, so I know what your project to working graphics folder when I go in and go through it so inside your working graphics folder when you put your stuff up is any and all preliminary work.
Michael T Ganschow Green: Basically, anything that you did to change the design of your project to a lot of you did, now that you're learning how to build things and how to.
Michael T Ganschow Green: enter giving a better grasp on what you want your pages to look like i've said you guys have asked me hey can I change my project to design, yes, yes, you can.
Michael T Ganschow Green: So anything that's involved in that changing of that project to which is any working graphics just package that thing up and now we're ready to put it on so one other little bit of.
Michael T Ganschow Green: housekeeping before we throw it online is you want to make sure that whatever page you want to load first of.
Michael T Ganschow Green: Either your homepage or if you've got a landing page or splash page or something like that you want to show first whichever page you want to show first is named index in either index dot html or index dot html.
Michael T Ganschow Green: If you don't have anything named index, then what will happen is people will navigate there, and nothing will show because browsers are programmed.
Michael T Ganschow Green: To look for a file name index, in order to display at first, regardless of the websites of static website using html or its dynamic and this php whatever it's looking for a file name index to display first when you go there time.
Michael T Ganschow Green: So you want to make sure your homepage is named index now if it is not named index do not, I repeat, do not change its name here outside of.
Michael T Ganschow Green: Our just on your desktop do not change its name, if you do that, it will break all of your links So where do you want to change it is you want to crack the thing open in dreamweaver.
Michael T Ganschow Green: And their dream dream Weaver.
Michael T Ganschow Green: Okay, so we're going to recite manage sites and we're going to go GR C class demos and other regrettable NUTS let's to 75 word what other this class demonstration number seven.
Michael T Ganschow Green: So you don't want to go in here open your file up and do a file save as to change the name to index dot html once you do that, you can delete the old page.
Michael T Ganschow Green: that's fine, but you want to make sure, whichever paid shows first whether it's your homepage or splash page, or whatever you want to make sure that is named index, one of the biggest trips, I see with this stuff is that people do not a name their homepage index and then they're like.
Michael T Ganschow Green: Why, why is it why why, why is it showing and then and I have to generally hold the hand, and I say it's because.
Michael T Ganschow Green: And so, now that that's all set up, we got our working graphics zipped up and we got all of our various files and folders ready for on aligning.
Michael T Ganschow Green: Well, in file zilla life is pretty easy you just come down to whichever student folder you want to load things in and you Double Click on it, so that you are in it and not in the file list down here and.
Michael T Ganschow Green: So, before I jump in and start putting stuff online do you have any questions relating to the housekeeping stuff here.
Michael T Ganschow Green: cool beans alright so, then what you do a lot of people a rookie mistake, they make is they dump their whole folder up here, I could just.
Michael T Ganschow Green: put their folder in and and then they scratch their heads about why their website is not working well, if you put all of your files up in your folder it changes the way the link is structured so right now on the student work page.
Michael T Ganschow Green: Come on, get out of the way zoom crew, I need to get my tabs Thank you so on the student work page.
Michael T Ganschow Green: These links, right here, if you click on any of them, they are looking for in fact here i'll click on my name, so what it's looking for is just my name.
Michael T Ganschow Green: And then everything in it when on everything, but the first uploaded website, which is project two will be loose leaf, the other two websites project three and project for will be contained in folders so.
Michael T Ganschow Green: So that's.
Michael T Ganschow Green: check something real quick speaking project for.
Michael T Ganschow Green: That is today cool we'll talk about that in a minute okay so um.
Michael T Ganschow Green: The thing I remember, so your other two projects project and project, for we contained in folders but you want your project to to be loose leaf, so that when you click on that button.
Michael T Ganschow Green: It will just go to your folder read the index and start rolling which we'll see in a second here.
Michael T Ganschow Green: So what i'm going to do here, well this thing is waiting a while this thing is sitting is i'm going to get this thing set up and start putting my files online.
Michael T Ganschow Green: Now this is take a hot minute because it's going to put up my work crafts folder also, which is good size but.
Michael T Ganschow Green: it'll put the whole thing up and you guys can kind of see how it's demonstrated so instead of dumping your home folder up here what you what you do is you crack your folder open.
Michael T Ganschow Green: And you grab all of your files, except for your unzipped working graphics folder you don't want that folder coming along for the ride, you only want the zipped one.
Michael T Ganschow Green: All of your html files your scripts folder your images folder and your CSS folder and so basically all your live files was a zip copy of your working graphics and then.
Michael T Ganschow Green: You drag and drop here into file zilla and finance elbow begin putting everything online, but basically you just wait and let it transfer it will tell you successful transfers that makes them, which is nice.
Michael T Ganschow Green: And it's going to put up all your images and your link files in your CSS in here all of that, assuming that it's all within the same root folder, of course, and then you are good to go for.
Michael T Ganschow Green: For previewing your website so there goes my up there goes my working graphics folder so while this is loading i'm going to ask one more time we have any other questions.
Michael T Ganschow Green: Taking a minute to load here so i'm going to change topics.
Michael T Ganschow Green: So today is also.
Michael T Ganschow Green: introduction to project for day project for is a real fun one.
Michael T Ganschow Green: Some of you have already been asking me questions about this one so basically, what I want you guys to do for project for is, you are going to redesign the graphic communications website.
Michael T Ganschow Green: Let me see here that they change the link on me again because I know that we're doing a bunch of updates on the TMC website, a little while ago.
Michael T Ganschow Green: To do to help there it is so the dnc website is very decent a good informational website.
Michael T Ganschow Green: it's not as bad as it used to be, which is nice so y'all can thank cow, who is the webmaster of the gic website i'm however it's built around information conveyance.
Michael T Ganschow Green: So it is on the legibility readability teeter totter it leads to the side of legibility.
Michael T Ganschow Green: What I want you guys to do is design me a kick ass graphic communications department website that advertises the graphic communications department, so it still has to inform about the program, but I wanted to be much more but advertisement, so this is sort of your opportunity to.
Michael T Ganschow Green: To to really take all of the crazy things that i've already taught you and then i'm going to teach you over the next month and a half and and really kick out the jams here.
Michael T Ganschow Green: let's see here I project for one upping Dan project for is your opportunity to show off your newly acquired creative and technical skills, I just instructors.
Michael T Ganschow Green: opinion that the graphic communications website will effective and conveying information about the program can be a little more visually exciting you.
Michael T Ganschow Green: All of you are going to fix that but this project, I want you to redesign the gic department website to market our department, as well as inform.
Michael T Ganschow Green: You of wide latitude and how to accomplish this task, the only design requirements are juniors that you must use the current TMC logo and it must appear in a similar location on each page.
Michael T Ganschow Green: So you're going to turn in all your preliminary work, including a site needs and goals analysis brainstorming site maps any of that any of the creatives note sketching things like that.
Michael T Ganschow Green: i'm looking for a minimum of 12 thumbnails.
Michael T Ganschow Green: And a minimum of eight rough so basically the same rough sent you just built for project three you're going to build it for project for as well.
Michael T Ganschow Green: So basically take you to best designs out of europe's you mean to homepages in mobile and computer size and to inner pages in mobile and computer science boom eight REPS and then, when you're done with it all you get to write up a nice little style guide.
Michael T Ganschow Green: So let's see your site must include the current the mcc logo truckee meadows Community college in graphic arts and media technologies.
Michael T Ganschow Green: it's got to be at least a minimum of five pages at least one program overview page talks about the program is all about.
Michael T Ganschow Green: At least one page about the classes this program offers at least one page about the certificates and degrees of this program is all offers.
Michael T Ganschow Green: And at least a one page one page of full time instructor bios note the information does not have to be factual.
Michael T Ganschow Green: If we're going to use photos of actual members of the Faculty and your design, please seek their permission first.
Michael T Ganschow Green: Since this project is my idea I fully grant you permission to use whatever photo you may find or take of me if you don't want to use real faculty use your imagination come up with the.
Michael T Ganschow Green: With the best fake faculty imaginable students have really run with this one, some of the fake faculty to come up with a wild.
Michael T Ganschow Green: Also, this project has completely destroyed Dan and ron's a Google search results, because so many students have written so much fake crop about them in.
Michael T Ganschow Green: there's like 11 years of this project out there used to be project three now it's project for.
Michael T Ganschow Green: That anytime you search their names you'll get like alone that they're real stuff you get like a half a dozen student bio is talking about how like RON is a sentience nano particle cloud.
Michael T Ganschow Green: In in that Dan is actually two dimensional if you turn sideways it goes in visible and there's all kinds of fun stuff and the the fictional instructors are wild there was.
Michael T Ganschow Green: One of the students had one of the instructors a drawing instructor who was just a series of words that would fade in on a whiteboard we had another one that had.
Michael T Ganschow Green: An instructor that was just obviously three kids in a trench coat so have fun writing instructor bios.
Michael T Ganschow Green: Everybody everybody has a good time with this one, but if you're going to use this real faculty got to get permission first i'm granting you blanket permission.
Michael T Ganschow Green: To go and hunt down off the various weird images that are of me online and write a fake bio for me if you want my search results are blown to because, and you know and it's fair i'm also a minimum of one page of student art gallery of student aren't.
Michael T Ganschow Green: There is actually in the on the forum, there is actually a sticky thread which, unfortunately, not the last couple of semesters students have not used so i'm going to recommend it to you guys and see if any of you use it then in project, for there is a.
Michael T Ganschow Green: There is a an art sharing thread that i've sticky and stuck up at the top of various student project arts I highly.
Michael T Ganschow Green: Encourage you guys to post your own artwork in the sticky thread, for your fellow classmates to use and use it to steal all sorts of crazy artwork so.
Michael T Ganschow Green: So just as a little resource for you guys so i'm pretty standard technical staff to make sure you make sure it's live and fully functional it's got all the proper tagging.
Michael T Ganschow Green: You solve the problem correctly and then basically on the Friday after the last day of class, you are going to upload your entire site.
Michael T Ganschow Green: html CSS files zip finally working graphics folder with your preliminary work in it to your student folder in the class server on the due date listed below.
Michael T Ganschow Green: Post your link and present your project, the final times critique on the forum, we would introduce yourself and explain how your design sounds this project and why you designed it the way you did.
Michael T Ganschow Green: So, this one is either this one or project three are typically my web students favorite web projects, out of 175 this one, a lot of students have a lot of fun with and I fully encourage you to to have all kinds of crazy fun with this one.
Michael T Ganschow Green: So do we have any questions relating to project for i'll toss the PDF on the chat here for you guys to download.
Michael T Ganschow Green: All right, let's see how I look at that all my files are now online there's my html files there's my folders everything is ready to go, so if I go back.
Michael T Ganschow Green: If i'm combined calculations are correct, is 403 forbidden Michael here should instead yield yes just holy terrors of ducks Batman look at this look at these terrible duck PICs.
Michael T Ganschow Green: heck yeah So there we go there is my ex.
Michael T Ganschow Green: That i've put up as my project to guys give me a full full rounded critique on it, I want to hear your opinions.
Michael T Ganschow Green: So.
Michael T Ganschow Green: That worked well now if you need to replace anything in here I you don't need to report up the entire site if you're changing out images see I might do to do to do cool um.
Michael T Ganschow Green: You don't need to.
Michael T Ganschow Green: To.
Michael T Ganschow Green: replace the whole site, if you fix something on an html or, if you have swapped in an image, or something like that.
Michael T Ganschow Green: All you have to do is replace the files you've changed so if i'm only made a change on my index and added some text or something like that.
Michael T Ganschow Green: All I have to do to replace it is simply grab that file and dump it in oops I think it dumped it in my it's all hidden by my zoom chrome yep I dumped it in my images folder great great one Michael sorry come down here and i'm fine syllable start crying.
Michael T Ganschow Green: I already exists, what do you want to do so, you say overwrite it please stop whining and then you click OK, and it will overwrite and drop your newer files in so that way you don't have to constantly put the whole thing.
Michael T Ganschow Green: If you're making changes just upload the files that you modified whether that's a new image probably a new CSS linking that thing to new html just upload what you modified you don't have to.
Michael T Ganschow Green: You don't have to upload your whole website again so, for example, if you just want to change out a single image, you can go into your images folder and you can say hey I need I need to change, new bad Homer image there we go it says hey and I.
Michael T Ganschow Green: I usually click OK, if you're tired of this thing you can apply to the current queue which has any files that are uploading love that I added to you, so that.
Michael T Ganschow Green: will have that this this menu that whatever you've say in this menu applied to all of them, so that you don't have to listen to its whining anymore.
Michael T Ganschow Green: So go boom, it is now gone it's in there it's a fresh image it's been updated so far as it was pretty straightforward drag and drop and go now.
Michael T Ganschow Green: I know that not all of you like to use files, some of you like to use dreamweaver so we're going to DEMO that one to just to make sure that everybody's on the same page and then we're going to.
Michael T Ganschow Green: Then we're gonna we're gonna blow up our web then we're gonna we're gonna we're gonna blow up some images on the website here.
Michael T Ganschow Green: Okay joker's so let's.
Michael T Ganschow Green: Go to dreamweaver and let's hook up this website to my server and then we're going to upload files to it so.
Michael T Ganschow Green: let's chat alright so.
Michael T Ganschow Green: i'm going to go to site managed sites Double Click on my site in my manage sites windows, but I can add things to it.
Michael T Ganschow Green: My site already set up it's pointed out by Jesse 175 folder there's the images thing and there's the scripts things are all set up there, but.
Michael T Ganschow Green: You only thing, it does not have our servers, and the reason why it says servers and plural is because you can send multiple servers to fling files to out of one single site root in dreamweaver pretty handy on occasion.
Michael T Ganschow Green: For us, though, mostly we're like one server people, so I am going to click the plus sign here.
Michael T Ganschow Green: And i'm gonna go get that student ftp information again, not because.
Michael T Ganschow Green: it's not because i'm demoing where it is constantly it's because I literally never bought a membership password so.
Michael T Ganschow Green: we're going to go grab the dream Weaver one, so the dream Weaver one is again pretty much the same information so now, I can go and highlight GR C 175 dot net firms.com and I can insert that in the ftp address right here GR C 175 dot net firms COM, then I can go a GR C student.
Michael T Ganschow Green: boop and then I can go.
Michael T Ganschow Green: spring a GR C 175.
Michael T Ganschow Green: And I can set this thing up and then I can go cool great that's my password match the test button you're like me yay connected to my server successful excellent so dream Weaver likes me beautiful so now go and click OK.
Michael T Ganschow Green: and mass save and we now have a server setup an unnamed server now, if you want to name them, of course, up here in the top, you can give this a server name we'll just call this.
Michael T Ganschow Green: And there's my server boom all set and ready to go so.
Michael T Ganschow Green: Once I get that set up in my site root in dreamweaver I can mash save like that no it's hard to put it in another room wham wham wham wham and I know cash will now be and when when when when I know, and then I clicked.
Michael T Ganschow Green: So now you'll see i've sprouted a over here in my files palette of sprouted a whole nother strip right here of server controls, so the easiest way to get this thing set up.
Michael T Ganschow Green: is to come over here to the very far right of this new row that's popped open to this sort of expanding and contracting box.
Michael T Ganschow Green: and go and click on that and suddenly a five palette comes out and turns into a proper files window.
Michael T Ganschow Green: So, of all the server information is set up so i'll have to do to plug this in and get ready and get this going is literally clicking the icon.
Michael T Ganschow Green: Of the plug coming together go plug me in baby there goes and through the magic of television, I am now plugged in now, this is a little harder to use, in my opinion, then.
Michael T Ganschow Green: Then file zilla because, unlike file zilla where you can just Double Click on a folder and it will open up that folder and all you do is drag and drop into it.
Michael T Ganschow Green: dreamweaver requires a little bit of dexterity here, so when we have to do in order to put things up is we highlight what we want to put up, which is all of this minus our uncompressed working graphics folder.
Michael T Ganschow Green: And then you have to drag and drop it over top of your folder and that can be a little tricky sometimes.
Michael T Ganschow Green: The easiest way to tell it's over the top of your folder is when you have a right over the top here like this and you get a little plus sign.
Michael T Ganschow Green: As you hover over the top of your folder once that's there you can let go and and and it's ready to drop it in dreamweaver prompt you with this.
Michael T Ganschow Green: Would you like to include dependent files window and you say yes, so what that does is, if you weren't putting up your entire site in a big lump.
Michael T Ganschow Green: That would go and reach out and grab files and folders that are linked to the files that you are putting up in dreamweaver and put those up as well.
Michael T Ganschow Green: it's sort of dream Weaver being really nice and saying oh yeah he's not pulling up as images folder.
Michael T Ganschow Green: But there's links to these handful of images, so what i'm gonna do is i'm gonna make an image folder over here I don't put those images in it's actually kind of handy.
Michael T Ganschow Green: But since we're dragging the whole thing up, then it doesn't particularly matter let's see our uploads going to crack the details.
Michael T Ganschow Green: We got to put operation successful and we're currently just transferring a few a few odds and ends here so that's good so up it goes.
Michael T Ganschow Green: So, putting up your your project tues is pretty straightforward just make sure not to put them up in a folder that's for project three and project for but it said to put them up loose leaf, so that you don't have a.
Michael T Ganschow Green: Any issues with your with your.
Michael T Ganschow Green: server.
Michael T Ganschow Green: or.
Michael T Ganschow Green: With your files so.
Michael T Ganschow Green: questions on any of this ftp stuff or questions on project for shadow.
Asking anything here any verbal questions either, but we'll see.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: Pretty straightforward then once you're finished with your project to you can toss it online and then for critique you put up a little link there for it.
Michael T Ganschow Green: And then you start putting and then you say hey I want all your opinions I want all your opinions on my website and then everybody comes and they have seven days from midnight on Friday to.
Michael T Ganschow Green: give their two cents to you guys to coat your brains in their thoughts so.
Michael T Ganschow Green: That is pretty much putting project to up you guys doing great with your project three critiques, by the way, i'm really liking, the feedback i'm seeing and i'm dropping some feedback of my own and they're so good times.
Michael T Ganschow Green: Alright, so that being said, I think we're ready to start playing around here so i'm going to unhook this from the server and pop this open Okay, so I get i've been getting.
Michael T Ganschow Green: lots and lots and lots of questions about rotating objects on the website I he can I rotate objects on a website, and the answer is yes, you can there is a property that CSS uses called the transform property is most commonly used in animations.
Michael T Ganschow Green: In CSS, but it is also a.
Michael T Ganschow Green: it's also really good for static stuff as well, so if you want to rotate things this is pretty much the one you use so in order to DEMO this property i'm going to make a.
Michael T Ganschow Green: quickie little web page with three boxes in it, and then we are going to modify them through through some just just just terrible transforms I mean just just.
Michael T Ganschow Green: arable transforms Okay, so let me build a quick web page and i'll narrate through that and then we're going to use this transform property to just start messing with things so let's do that.
Michael T Ganschow Green: In New.
Michael T Ganschow Green: html eight what Dare I call this thing, so this thing is going to be this thing is going to be.
Michael T Ganschow Green: let's call it.
Michael T Ganschow Green: too far guys call this thing transformational lunacy.
Michael T Ganschow Green: You can call your transformation emo page whatever you want.
Michael T Ganschow Green: Maybe with an exclamation point that always makes people think you're saying it's good evening here.
Michael T Ganschow Green: And we're going to do this and we're going to do this and then within my body tag i'm going to place three dibs i'm a place more later on we're going to place three for now so we're gonna go idea.
Michael T Ganschow Green: All right now we can save this thing files save.
Michael T Ganschow Green: The call this thing transform DEMO.
Michael T Ganschow Green: Bam.
Michael T Ganschow Green: Suddenly, now we are ready to start making transformations so pretty straightforward so far so we're gonna make a new CSS file hi her in a new CSS file, yes, I would like you to throw it in your CSS folder yes save as what do I want to call this i'm going to call this.
Michael T Ganschow Green: i'm going to call this you asked for it.
Michael T Ganschow Green: Go and we're gonna throw it in CSS folder poop there it is okay.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: there's you asked for it nicely modifying our documents all his tablet in and then and then file save all let's say it is Michael same, no, no, no bad Michael file save all thank you.
Michael T Ganschow Green: cool alright so time to make it a bunch of pretty colors and then we'll start playing with transforms in all the worst possible way.
Michael T Ganschow Green: So we're gonna go body.
Michael T Ganschow Green: The body style in here first body racket ology margin zero panning.
Michael T Ganschow Green: zero.
Michael T Ganschow Green: text alone.
Michael T Ganschow Green: Center and for a background color something we can stand to look at for a little while so background color was one of these word colors I like them let's go word color.
Michael T Ganschow Green: And we're gonna go Oh, maybe a nice, I still get weird CSS thinks this is chocolate, but whatever So there we go we're going to Nice chocolate background set our stuff in excellent whoops.
Michael T Ganschow Green: And we're going to do a quick DEMO style for all of our dims so we're going to go a deal bracket.
Michael T Ganschow Green: let's give these guys a.
Michael T Ganschow Green: let's go with.
Michael T Ganschow Green: boxes 300 pixels.
Michael T Ganschow Green: 300 pixel.
Michael T Ganschow Green: padding.
Michael T Ganschow Green: 25 pixels.
Michael T Ganschow Green: text align.
Michael T Ganschow Green: justify.
Michael T Ganschow Green: let's see here let's do let's do font family.
Michael T Ganschow Green: gotham.
Michael T Ganschow Green: Then i'm going to add in some background colors on my dims will go.
Michael T Ganschow Green: blue.
Michael T Ganschow Green: background.
Michael T Ganschow Green: color.
Michael T Ganschow Green: Do I don't think it's something more like one of those Huckleberry colors name cornflower blue blue let's go blue.
Michael T Ganschow Green: we're gonna go yellow.
Michael T Ganschow Green: Maybe for yellow do you want to go screaming yellow or do we want to go, maybe one of their weird kind of off brand yellows.
Michael T Ganschow Green: going off brand yellow.
Michael T Ganschow Green: The half too many off brand yellows do they.
Michael T Ganschow Green: are screaming yellow it is.
Michael T Ganschow Green: Lastly.
Michael T Ganschow Green: Technology.
Michael T Ganschow Green: background color and let's add some reading here.
Michael T Ganschow Green: crimson yeah let's do crimson.
Michael T Ganschow Green: Maybe because it's dark enough color we're going to do a text color on that one of like.
Michael T Ganschow Green: fav okey dokey so.
Michael T Ganschow Green: Time to add these two ideas and then we are ready to start applying terrible transforms to them i'm going to put live text in each of them as well, so you can see that they're not images and that they are being modified by CSS.
Michael T Ganschow Green: So we're gonna go let's let's put some class in this joint we're going to go class is blue so we're going to blue div high blue div so we're going to actually see them we're going to go class is yellow.
Michael T Ganschow Green: And class equals read here we go now they are kind of all playing with each other alright so we're going to go save you know, I think it kind of stack next to each other so we're going to go do the.
gym.
Michael T Ganschow Green: margin.
Michael T Ganschow Green: 20 pixels.
Michael T Ganschow Green: So it looks in the browser.
Michael T Ganschow Green: it's either vertical stack right now, I want to be horizontal so I can make them horizontal because this is my website and nobody can tell me otherwise so we're going to do another going to do a main around these Dudes, why not.
Michael T Ganschow Green: mean.
Michael T Ganschow Green: Okay cool so we're going to go to.
Michael T Ganschow Green: lunch just FLEX box it then.
Michael T Ganschow Green: All right, we're gonna go mean.
Michael T Ganschow Green: display.
Michael T Ganschow Green: That.
Michael T Ganschow Green: should get everybody on their side yep there we go alrighty then so they are now on their side and ready for our lovely transforming so i'm going to go to my notes here to make sure that everything is working correctly.
Michael T Ganschow Green: And then we're going to go and have so much fun alright cool So here we go.
Michael T Ganschow Green: okey dokey so this.
Michael T Ganschow Green: would go all right.
Michael T Ganschow Green: let's have some fun.
Michael T Ganschow Green: So.
Michael T Ganschow Green: First things first.
Michael T Ganschow Green: let's address the one that so many of you asked me about yeah.
Michael T Ganschow Green: So the property named a mess, with all of these guys here is transform okay and it's pretty much what it says on the tin you apply it to things and it transforms them so.
Michael T Ganschow Green: The it's literally transform and then there's a whole bunch of different things, you can do to it i'm only going to cover a few of them here.
Michael T Ganschow Green: We cover more of them when we get into animation into 75 CSS based the animation into 75, but I am going to cover a few of them, so that you can see kind of how it works it's actually a lot of fun.
Michael T Ganschow Green: So let's start off with the one you guys were all asking about which is rotate so in order to put one of these guys in we go rotate.
Michael T Ganschow Green: And then, right after rotate we put in a nice little set of parentheses and rotate is done by degree, so in here, we can say rotate this by 25 degrees that's D G in CSS terms are getting something to to turn in degrees is a number D G and.
Michael T Ganschow Green: Let me go save notice, of course, the where's, the way is not showing us anything, because it was a wig.
Michael T Ganschow Green: attorney a higher, but if I come here to my page notice it's now rotated and, indeed, you can rotate it as far as you want either direction so if I want to have this rotated by 55 degrees.
Michael T Ganschow Green: wow there's nothing stopping me and just to prove that it's all there we're going to go to beacon yep some and we're going to summon some bacon.
Michael T Ganschow Green: And eggs and bacon and we're going to put some bacon in here to contribute to that fact i'll put just put a few lines, so that, so that we can see.
Michael T Ganschow Green: whoo.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: You know where it is.
Michael T Ganschow Green: bacon and notice the type is live it's just being rotated very, very nice so.
Michael T Ganschow Green: We can rotate this in any direction we want, if we want to take it the other way we want so right now it's rotating clockwise right, if you want to rotate counterclockwise.
Michael T Ganschow Green: I got to do is come in front of the number in your rotate here and do a negative so negative 55 degrees and it will roll, the thing back over the other way sailing sailing.
Michael T Ganschow Green: Over the bounding main and, yes, you can apply these rotations to any object in in html basically anything that can take a class style or take a tag style or take an ID style can be styled to rotate like this, so For those of you that had.
Michael T Ganschow Green: rotating elements in your designs and you were all stressed about how you you're you're going to do this.
Michael T Ganschow Green: breathe breathe breathe look it's just this simple you go transform.
Michael T Ganschow Green: rotate.
Michael T Ganschow Green: know no spaces than a set of parentheses so rotate no space parentheses, then a number in there.
Michael T Ganschow Green: followed up by a D G, so a number D G within your parentheses, to tell it which way to rotate you rotate it all the way around, by the way.
Michael T Ganschow Green: i'm winking winking going on this matter, we can go, you know it would be really fun 105 degrees, I dare you I dare you I triple dog dare you look my text is almost upside down now.
Michael T Ganschow Green: whoa whoa you guys whoa What about even let's just invert it, why not because I feel like inverting text today look at this action 180 degrees, that is, that is inverted live type look at this madness, I mean just just just just what will the children say.
Michael T Ganschow Green: 217 degrees we're going further I think i'm gonna leave that there, because that is appropriately horrifying I think.
Michael T Ganschow Green: So questions on rotation, or on the transform property so far.
Michael T Ganschow Green: What am I going to do next to you people.
Michael T Ganschow Green: anybody has any questions here and then oh yeah I know what i'm going to do.
Michael T Ganschow Green: i'm going to do.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: I think that one is rotated over here, Mr yellow needs a skew so let's go grab some more type out of here to prove that there is light at the end of the tunnel and that these are.
Michael T Ganschow Green: There we go save and now we're going to throw on this yellow is a fun one Okay, so this one is is transformed skew.
Michael T Ganschow Green: It would transform skewed does is it twists everything around it okay so transform rotate is a there's one measurement in it transformed skew has two of them, so.
Michael T Ganschow Green: light on you know, things are starting to get a little dim in here, I can see again there we go and i'm probably blinded all you guys on my camera view we see what I look like now, you can still see me that's good okay so i'm going to add a transform skew on here so transform.
Michael T Ganschow Green: skew.
Michael T Ganschow Green: bracket now there are skews along one direction, so if I just want to skew it alone one direction, I can specify a skew of X.
Michael T Ganschow Green: see it would go a skew of X and toss in some parentheses after a skew of X now with this skew, it is also a degree, want to basically twisted along some degrees So what if we do a skew of X of.
Michael T Ganschow Green: let's do 15 degrees right let's see what this does how about a semi colon at the end there, Michael.
Michael T Ganschow Green: There we go look at that thing healed over so skews are basically ways to to to essentially take a shape and twist it like this, or like that so.
Michael T Ganschow Green: If I take this 20 that's 15 degrees and I had a negative to it, as we did with our rotation.
Michael T Ganschow Green: I come back here, and it is skewed over like it's blowing in a breeze but it's skewed so far over look at that action it's clipping yes, yes indeed, we could skew this way.
Michael T Ganschow Green: Now, if we want to skew in multiple drove on a skew the X axis that's fine, but we can also skew why.
Michael T Ganschow Green: And what the so X axis means that it is horizontally skewed a y axis means that it is vertically skewed means it should look freaky deep here, yes, there it is refresh please.
Michael T Ganschow Green: And look freaky geekier even yes, look at that and again notice, though, that the type is in fact live i'm able to highlight it and modify it.
Michael T Ganschow Green: All right, but ultimate power move and skewing.
Michael T Ganschow Green: is doing a skew X and skew why just for the word skew now what does this do this is a combo value so in the parentheses and skew there is room for two numbers.
Michael T Ganschow Green: So if I go zero degrees a two numbers separated by a comma, so if I do zero degrees and we see things spaces, they do, and then 31 degrees.
Michael T Ganschow Green: This thing was should be hinge make sure it's working correctly.
Michael T Ganschow Green: It yes, look at that so.
Michael T Ganschow Green: Each of these numbers here represents one of the cardinal directions, this first one is X and the second one is why so what i've written here with a zero degree and 31 degrees is just the same as if I came in here and I did a skew why.
Michael T Ganschow Green: Have 31 degrees.
Michael T Ganschow Green: And there it is again live text and all.
Michael T Ganschow Green: But I just like combo because it's fun so we're going to go skew and instead of a zero degrees skew.
Michael T Ganschow Green: i'm gonna do my 15 degrees skewed again now, this thing should be nicely illegible because it's being twisted this way, and this way so let's see what I have right here, you guys what have I done.
Michael T Ganschow Green: Oh yeah look at that huh look at that notice again text is still live looking a bit like a star wars opening crawl now, though, but nevertheless still live yeah.
Michael T Ganschow Green: let's see here, what else don't want to pop your brains.
Michael T Ganschow Green: Okay, so we got that.
let's see.
Michael T Ganschow Green: Alright, so let's go down rotate.
Michael T Ganschow Green: Okay.
Okay, so.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: So we've played around a little bit with.
Michael T Ganschow Green: With rotate tag just a little bit.
Michael T Ganschow Green: But there is a little more we can actually do with rotate.
Michael T Ganschow Green: You see, if I want to do yeah we'll do these guys alright so.
Michael T Ganschow Green: Okay, so you've seen just a regular rotation, as we have victimized our poor little blue over here with with just a regular rotation.
Michael T Ganschow Green: let's live text and Mr read over here because we're about to break him into about 30 pieces alright so Mr read.
Michael T Ganschow Green: give me your.
Michael T Ganschow Green: Live text for him and it's coming in white as for styling look at that all right so.
Michael T Ganschow Green: We just scratched the surface of rotation okay so right here, or just a regular rotate just a regular rotate basically just takes it in gently twisted.
Michael T Ganschow Green: Another term, for it is a rotate Z which basically puts a effectively and access right in the middle of it and rotates it along that, but that is not the only access we can rotate it on.
Michael T Ganschow Green: We can also come in here and, for example on read, I can say transform.
Michael T Ganschow Green: And I can specify other accesses of rotation, for example, transform rotate we want to do X or y first let's do experts, why not so we're going to rotate X give me some parentheses ology here and in here i'm going to say, maybe let's do 105 degrees again except along the X axis.
Michael T Ganschow Green: Which means.
Michael T Ganschow Green: Oh snap dog oh snap which means its flipped over so if I.
Michael T Ganschow Green: Come back here and I.
Michael T Ganschow Green: Do a rotate maybe something a little more sedate like a 75 degree rotation, you will see it's it's its flipped it's basically been pushed over pushed over like this, please do over pushed over.
Michael T Ganschow Green: So we do that.
Michael T Ganschow Green: We can also.
Michael T Ganschow Green: routine in another direction.
Michael T Ganschow Green: let's do a 45 degree rotation, except instead of the X axis, we can do a rotate why.
Michael T Ganschow Green: And look at that look at that look at that the type is being crunched because the whole thing is now swinging like a door.
Michael T Ganschow Green: And there we go now, these are what's commonly used in CSS animations, but they can also be used for things like if your website is the design of like a bunch of pictures thrown on a desk.
Michael T Ganschow Green: And you want to kind of have them all be sort of jumbled and everything like that some Z access plus some judiciously placed transform rotations will give you exactly what you're looking for.
Michael T Ganschow Green: let's push it a little further let's push that rotation 45 degrees and not enough, let us do 65 save 65 degrees look at that, yes, nicely crunched.
Michael T Ganschow Green: Now, you would think after i've shown you skew where you put in two degrees and it works that there should be a rotate a command that does the same thing they're kind of is it's called a.
Michael T Ganschow Green: Second, it is called a rotator 3D, the problem is it's not the best browser supported yet that's coming, but there is a rotate 3D where you can just start putting in X, Y and Z and it will work so, for example, I could come in here and I could go rotate 3D.
Michael T Ganschow Green: let's go 65 degrees and 45 degrees let's see what this thing looks like.
Michael T Ganschow Green: Save X and y yeah see it's not doing in the browser is not really responding terribly well to it, so the browser support is not great, yet for rotate 3D.
Michael T Ganschow Green: Maybe someday you guys maybe someday but in the meantime we have rotate and then rotate X and y and then, of course, a rotate of xena rotate of Z is just.
Michael T Ganschow Green: The previous rotate leaving playing.
Michael T Ganschow Green: So no need to add rotate of Z because I think it's redundant, so we know you can always do a rotate X and push your file around so it's like swung out or pushed over questions on transforms their NUTS you guys are completely believe in nets okay.
Michael T Ganschow Green: There are of course other transforms as well, but.
Michael T Ganschow Green: i'm not going to cover them here because I figure, these are the what these are the transforms you guys will use most, so I hope that.
Michael T Ganschow Green: I hope that.
Michael T Ganschow Green: helps alleviate a lot of the questions you guys have on how to rotate things and add some more knowledge to.
Michael T Ganschow Green: Alright, so before I get um before I go down to the next topic do we have any other questions questions on FT peeing questions on.
Michael T Ganschow Green: on any of the projects questions on anything we've been working on for I jump into the next topic.
Michael T Ganschow Green: Alright, so I think everybody's too scared or tired to move after that transformation DEMO so i'm going to save this transformation page and put it up tonight in the class files, so you guys can all go and see.
Michael T Ganschow Green: What, what are we done well, what we've done is we have.
Michael T Ganschow Green: We have transformed the entire landscape.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: time to speak on a major topic and I figured today would be a good day to introduce this topic because we've already played with media queries just a little bit last week.
Michael T Ganschow Green: Putting together our tremendously ugly website you guys remember this tremendously ugly website, we built them in photoshop and then, and then we.
Michael T Ganschow Green: We set them up with all kinds of custom fonts look at all this custom fonts we got like we got like terrible things happening, we just got you know just just just general award winning madness here some some gradients we got angry stitch so.
Michael T Ganschow Green: One thing you guys may remember is that, in order to insert all these fonts in here.
Michael T Ganschow Green: We had to use this new type of selector that I hadn't really talked about before that hasn't at sign in front of it, you guys are used to selectors with nothing in front of them, for your tags dots for your classes.
Michael T Ganschow Green: hashtags for your ids and colin's to modify their selectors but this selectors all new.
Michael T Ganschow Green: it's an APP sign and it's in and of itself is not really a selector or rather it's more of a Meta selector.
Michael T Ganschow Green: because, basically, what these media queries are doing is bypassing the usual selector language and directly querying a browser in this case, this at font face is feeding a font into a browser from our images folder.
Michael T Ganschow Green: So this is one of the most straightforward uses of at font face as you're basically just taking it and you just eating eating things into browsers on faces is one way to do that.
Michael T Ganschow Green: But.
Michael T Ganschow Green: There are other much more powerful uses of media queries which we are going to discuss today.
Michael T Ganschow Green: So I think it's time to bring around the concept of responsive design.
Michael T Ganschow Green: So what is responsive design exactly it's a term i'm sure you've heard in a million tutorials, but what is it exactly.
Michael T Ganschow Green: So what responsive design is.
Michael T Ganschow Green: is a way to.
Michael T Ganschow Green: Have a website that displays in multiple different browsers and revolution revolution resolutions, but only have one set of files.
Michael T Ganschow Green: So back in the day, in order to have a phone that displayed well on for phone a website that displayed well on phones.
Michael T Ganschow Green: A website that displayed well on tablets a website that displayed well on computers what you would have to do is have the index, be a javascript file.
Michael T Ganschow Green: That would read the screen resolution of the users screen and serve them to files that were close enough to their resolution and their screen, that it would display adequately okay.
Michael T Ganschow Green: So used to have to have every time you thought your website look bad in the browser you used to have to make a different version of it.
Michael T Ganschow Green: Keep it in another folder and then so you'd be maintaining like five and 10 and 15 and 20 home pages and about pages and contact pages and stuff pages and all kinds of things like that, and it was just a complete bloody nightmare okay.
Michael T Ganschow Green: It was terrible so as part of the CSS three spec they came up with this idea of using media queries to do this instead.
Michael T Ganschow Green: And it is so much more elegant so, as I said, back in the day, we used to have used to have to have a different version of every website for for most of the major screen resolutions oh my God I just I don't.
Michael T Ganschow Green: I just it's it's just I can't with i'm without words remember having to do all that crap so what responsive design does.
Michael T Ganschow Green: Is it uses one of these media queries go pop ugly opening show those.
Michael T Ganschow Green: use one of these media queries.
Michael T Ganschow Green: To ask the browser what its resolution is.
Michael T Ganschow Green: Now the media queries your Meta style sheets, there are many styles Meta Meta CSS rules they've got these brackets around Okay, so you basically asked the browser what resolution, it is.
Michael T Ganschow Green: And then within that style within that Meta selector you put in edited styles that change, based on the browser's result, so the upshot of this is, is that you only have to have one set of files and then you use your CSS to modify those files based on your screen resolution.
Michael T Ganschow Green: So let me show you this an action, this is really cool and.
Michael T Ganschow Green: Are.
Michael T Ganschow Green: We with no need to your I E s.
Michael T Ganschow Green: There it is alright so i'm going to copy paste this into the chat so people can join in, if they so choose so.
Michael T Ganschow Green: What is this media queries m ED I a Qu E R E s somebody being a smart ass is um is a collection of responsive design examples okay.
Michael T Ganschow Green: showing what a website looks like at different resolutions time, so what happens is with a website that's got media queries like this it will talk to a browser and it will display.
Michael T Ganschow Green: A version of the CSS based on whatever size feedback it gets now you guys are already using percentage width Okay, so you are already.
Michael T Ganschow Green: At least 50% of the way there to a responsive design because percentage with the technical term for using all percent which by the way, is liquid design, so these percentages which these liquid designs.
Michael T Ganschow Green: Are sort of a halfway there responsive waiting oh responsive design so essentially a liquid design will allow the web page to flex based on the browser window.
Michael T Ganschow Green: And then, basically, what happens is once it hits certain target sizes that it's targeting with its media queries.
Michael T Ganschow Green: Then the media queries will step in and alter the CSS based on that side, so, for example.
Michael T Ganschow Green: Here at the larger computer size this code, so the website is very nice and spread out it's basically a a nice big multi column stove pipe right everything sort of fades and, as you scroll down it's all Nice and cool right well.
Michael T Ganschow Green: As we pop in on it, as I slowly bring it in, you will notice it's kind of liquid it's just kind of chugging along here dude to do everything shrinking nicely and then at a certain point.
Michael T Ganschow Green: At a certain point bang so right here bang, that is where the media query kicks in so it's got me a query on it that, at a certain resolution.
Michael T Ganschow Green: bang it kicks in and it alters the page notice the structural alterations everything is near where the type is narrower there's more margin out here and.
Michael T Ganschow Green: Then we keep going up and our percentages kind of take back over again everything kind of sort of centered kind of sort of sitting here.
Michael T Ganschow Green: kind of sorta come along bang as soon as we hit another resolution point, this is my guess is this is it's tablet resolution than the website changes its layout again using CSS to do so, the html in this thing does not change what shifts are just some edited CSS bits okay.
Michael T Ganschow Green: To do to do to coming again coming again let's see if they had bang there's their phone version notice, by the way, well done, the tablet and phone version notices navigation up here, right here.
Michael T Ganschow Green: it's navigation up here bang as soon as we hit the tablet version turns into what is called a hamburger menu you click on it boom and there's all of your buttons and such to use.
Michael T Ganschow Green: bang there's the mobile version again hamburger menu okay.
Michael T Ganschow Green: Oh, I think it did it again so let's go here so bang.
Michael T Ganschow Green: One more thing, yes there's an even smaller phone phone version right there bang, and you can see, as the queries hit the website re flows itself.
Michael T Ganschow Green: Based on what those media queries tell it to do very, very cool and something you are going to be using if you build websites in your career, for the rest of your career.
Michael T Ganschow Green: So.
Michael T Ganschow Green: How does this work well.
Michael T Ganschow Green: As this come in here dude notice everything kind of shrinking we're kind of resizing our navigation is shrinking as we hit certain bits.
Michael T Ganschow Green: And then boom, we come in here and it resets so there's actually several little booms the first little boom boom is right there the navigation resizing.
Michael T Ganschow Green: at whatever resolution, this is but and then comes back a little further and the navigation resize this again.
Michael T Ganschow Green: And we're going to come back a little more in the navigation resize this again, but actually that boop is a bang because they completely re flow the page boom there we go now suddenly we are in mobile.
Michael T Ganschow Green: and
Michael T Ganschow Green: Doo Doo Doo Doo Doo let's see if we get the phone one because that's the tablet one to stay, it probably stamps to a column band we go and then, finally, we get to the phone size bang there's the phone size right there so again this style sheet is.
Michael T Ganschow Green: sniffing the browser to see what size, it is and adjusting on the fly how things display.
Michael T Ganschow Green: So, how does this work oh time to construct a quickie DEMO questions on media queries first, before I start demoing anybody got any thoughts or questions.
Michael T Ganschow Green: So this is how you make a website work with.
Michael T Ganschow Green: Many, many different screen sizes me one second.
Michael T Ganschow Green: Sorry for dropping away there, I did not want to blow my nose into the microphone, so I think you guys are probably appreciate that especially you pre recorded people were probably watching this at 3am i'm like a Thursday or something.
Michael T Ganschow Green: So so so so.
Michael T Ganschow Green: How do these things work well.
Michael T Ganschow Green: Let me show you.
Michael T Ganschow Green: we're gonna make another page.
Michael T Ganschow Green: know the call this thing create.
Michael T Ganschow Green: we're gonna make a quickie responsive design DEMO MySpace you know none none yet, yet no move like this, thank you.
And we're gonna go.
we're gonna go.
Michael T Ganschow Green: Oh, and G.
Michael T Ganschow Green: it's changing sighs.
cool.
Michael T Ganschow Green: And in my body i'm gonna throw in a couple of days.
Michael T Ganschow Green: And we go.
Michael T Ganschow Green: So we're gonna save this thing as responsive DEMO is really our first responsive DEMO and we playing with responsive design, often on all through.
say.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's do this.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So let's do a quick CSS here to establish some basic ground rules high plus sign and CSS create a new you got it browns.
Michael T Ganschow Green: There we go it's already pointed in the CSS folder so we're going to call this thing.
Michael T Ganschow Green: we're going to call this thing i'm responding.
Michael T Ganschow Green: dot CSS a cost that CSS Michael Michael do this correctly safe.
Michael T Ganschow Green: And we're gonna go okay.
Michael T Ganschow Green: Now they.
say.
Michael T Ganschow Green: All right, so just do some quick i'm responding things here.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: First things first we're going to go body style.
body.
bracket talent.
Michael T Ganschow Green: margin.
00.
Michael T Ganschow Green: text align.
Michael T Ganschow Green: Center.
Michael T Ganschow Green: To background color to why not.
Michael T Ganschow Green: pick a color pick a color any color.
Michael T Ganschow Green: background color responsive DEMO all right now, then we're gonna go.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: With.
Michael T Ganschow Green: The present.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: 200 pixels so they're obvious.
Michael T Ganschow Green: margin we're giving some top and bottom margin and some left and right margin so we'll do 20 pixels of top and bottom margin.
Michael T Ganschow Green: and
Michael T Ganschow Green: auto for our Left and Right, so that they Center.
Michael T Ganschow Green: And you know what.
Michael T Ganschow Green: Do 40 pixels of top margin 20 pixels a bottom margin and let's see see if it takes that should work, it should work nicely and a little box shadow box shadow.
Michael T Ganschow Green: And let's go five pixels five pixels five pixels black what the haze nice box shadow action and then and then we're going to do some colors so first colors first we're going to go white.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: will make it a slightly warm like an antique what is the case may be.
Michael T Ganschow Green: And then dark.
Michael T Ganschow Green: dark Gray.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: dark.
Oh.
Michael T Ganschow Green: Thank you alright so then we're going to add these class styles Doo Doo Doo Doo Doo Doo Doo Doo alrighty then so we're going to go clans equals hot.
Michael T Ganschow Green: And in class equals dark Gray.
Michael T Ganschow Green: well.
Michael T Ganschow Green: Thank you okay cool so now, if I preview this in a browser it may already be previewing I think i'm a.
Michael T Ganschow Green: preview yep there, they are look at that they've got a nice little drop shadows don't they look so lovely and Scandinavian everyone.
Michael T Ganschow Green: we're just about ready and they're 80% of the width 80% of the width of whatever their screen notice their liquid so that's full percentage wet so as I crunch it, they are liquidating nicely.
Michael T Ganschow Green: All right, so let's add some media queries to this thing let's um.
Michael T Ganschow Green: let's start blowing stuff up here, so all right so screen media queries are very interesting looking.
Michael T Ganschow Green: there's a lot to them, which we will discuss so.
Michael T Ganschow Green: I will spend my media queries after all of my main styles okay.
Michael T Ganschow Green: So i'm going to add in a media query here, here we go and they're relatively straightforward once you get the bits and pieces of them all right so here are the bits and pieces okay.
Michael T Ganschow Green: At media.
Michael T Ganschow Green: Only.
Michael T Ganschow Green: screen.
Michael T Ganschow Green: Max width.
Michael T Ganschow Green: There are other pieces, I will show you as well let's go 600 pixels I don't do.
Michael T Ganschow Green: And then space in a bracket.
Michael T Ganschow Green: That opens up a set of brackets, so let me go over this selector there's a lot going on here and I want to break the pieces down for you okay.
Michael T Ganschow Green: So, first of all, at media at media implies that this is a media query just like our at character set up here or our at font face here, so this is a media query okay.
Michael T Ganschow Green: Now, at media is a specific type of media query it means affect the media within the area that this particular query is applied to this case, our browser window okay.
Michael T Ganschow Green: Then we have only which means.
Michael T Ganschow Green: Whenever you're affecting with the media only affect whenever you specify next, which is screen okay.
Michael T Ganschow Green: So you can build media queries that will affect printed files, you can build media queries that will affect files when they're saved.
Michael T Ganschow Green: That will restyle it based on that that's how print that's how print friendly versions web pages are made they're actually immediate query um, but in this case, this media query is only going to affect how our CSS displays on screen so it's only going to affect our screen here.
Michael T Ganschow Green: At media only screen and the end basically says how is all this going to be affected, and then I have a Max width.
Michael T Ganschow Green: Of 600 pixels okay So what does this mean what does this Max with me this means that whatever I put inside this media query here.
Michael T Ganschow Green: will only affect my whatever I wanted to affect at 600 pixels or smaller in my browser window, so if my browser window is 600 pixels or smaller whatever I put in here for my.
Michael T Ganschow Green: styles will only be in effect at that point so, for example, if I wanted once once my browser drops below 600 pixels if I wanted these one of these deals to change color let's say let's say I wanted one of them to to change color below 600 pixels So what if I want my white div.
Michael T Ganschow Green: to become yellow.
Michael T Ganschow Green: smaller than 600 pixels okay cool we're all set now I gotta do.
Michael T Ganschow Green: Is crack open the browser window wherever he is areas and go fresh.
Michael T Ganschow Green: And then not shrink it down to below 600 pixels.
Michael T Ganschow Green: Well Eric goes i'm gonna make it bigger.
Michael T Ganschow Green: My media query little bigger nine oh you'll see it easier.
Michael T Ganschow Green: So take this and I go not to eat that he did he do.
Michael T Ganschow Green: Today, since it drops below 900 pixels turns bright yellow doesn't work, you know, make the sound.
Michael T Ganschow Green: When it comes in here So what is this media query doing it is only affecting, it is only affecting our web page and elements within it at 900 pixels and below changes 906 hundred so with DEMO easier there we go.
Michael T Ganschow Green: But Michael What if I wanted to have one that applies only when we're above a certain resolution oh that's pretty straightforward to you guys i'm coming here and I can say, instead of a Max width I can say a Min width so at media only screen and.
Michael T Ganschow Green: Men with.
Michael T Ganschow Green: Oh let's go 1100 pixels.
Michael T Ganschow Green: oops did you see me add that in there, did you see what I did Min width.
Michael T Ganschow Green: it's gonna be that time of night 1100 pixels.
Michael T Ganschow Green: and outside of this lack of technology and then we're going to have dark Gray.
Michael T Ganschow Green: Like a technology.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: screaming read.
Michael T Ganschow Green: Save so now, when I pop this open luck it's bright red and, as I shrink it as it gets below 1100 pixels.
Michael T Ganschow Green: It goes down it goes back to dark Gray, again, and then, as it keeps shrinking.
Michael T Ganschow Green: Being the other one comes on, so this is how media queries work you guys, you can set up all sorts of fun things at different media points in your documents, so I could set up another media query say, one that applies to.
Michael T Ganschow Green: let's go super narrow let's go like 500 pixels So if I could go at media only screen.
Michael T Ganschow Green: and
Michael T Ganschow Green: Max with.
Michael T Ganschow Green: 500 PICs.
Michael T Ganschow Green: let's say 500 pixels.
Michael T Ganschow Green: With change.
Michael T Ganschow Green: How about that.
Michael T Ganschow Green: Oh, what did I do oh that's right, then, like the semi colon alright so get a width change so.
Michael T Ganschow Green: As i'm shrinking this along.
Michael T Ganschow Green: refresh.
Michael T Ganschow Green: it's below 500 kaboom they stretch out to 100 pixels.
Michael T Ganschow Green: or 100% across.
Michael T Ganschow Green: The come out to change colors as they move changing colors on the move.
Michael T Ganschow Green: This is how media queries work.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: notice notice that I have my main styles up here right my main div styles up here my main colors up here and in my media queries I am only editing.
Michael T Ganschow Green: Those properties and values, I would like to shift at those resolutions, a lot of people when they start playing the media queries.
Michael T Ganschow Green: will basically duplicate their entire bloody style sheet into each and every set of media queries they have.
Michael T Ganschow Green: And that that way lies madness, because how will you know what's different you've got duplicate crap all over the place, and you don't know what's changed and what's not and things are getting things which is it huh.
Michael T Ganschow Green: yeah so so only put in those selectors that you want to modify and within those selectors only the properties and values, you want to modify if you want to preserve fragments of your sanity okay so only those bits and pieces, you would like to modify okay.
Michael T Ganschow Green: So questions on media queries.
Michael T Ganschow Green: This is the foundational element of responsive design we'll be covering this more on next week.
too scared or tired to move.
Heather Amistani: Nice Okay, so I have a question.
Michael T Ganschow Green: i'm hearing a question.
Heather Amistani: Okay, so for project to do we need to do the media's.
Michael T Ganschow Green: nope our words project.
Heather Amistani: And if maybe i'm misunderstanding, the APP medians is that the.
Heather Amistani: How you convert to a phone size.
Heather Amistani: Correct so.
Michael T Ganschow Green: Basically, what happens it and that's This is why I have you're designing and multiple sizes, because.
Michael T Ganschow Green: In websites out in the real world, what you do is you design for one first so you either designed for a computer and then simplified down or you design.
Michael T Ganschow Green: For a phone and then add complexity, depending on which direction you want to go and there's a huge battle, right now, about which is better.
Michael T Ganschow Green: In my opinion, it's whatever you're comfortable with but whenever nobody wants to listen to me i'm the intro basically what you do is then you stack media queries on that add that complexity into it or simplify it down from a computer website.
Michael T Ganschow Green: And so.
Michael T Ganschow Green: that's why i've got you guys designing multiple different designs because essentially you're going to use these media queries to reshuffle everything around to the phone size.
Michael T Ganschow Green: So that so that you won't have to use multiple file sets and and if the and given the fact that most of you are ready, building liquid designs.
Michael T Ganschow Green: you're like 50% of the way there, I mean because basically with with essentially how it works in the real world and everybody's always disappointed when I say this okay everybody thinks that there are.
Michael T Ganschow Green: Universal sizes, you know put your media query at 768 pixels and that'll be fine for a tablet and put your meeting aquarium 320 pixels and that'll be for a small screen horizontal or vertical fallen puts it, blah blah blah blah.
Michael T Ganschow Green: The dirt videos is that there is no universal sizing for this crap okay what I always recommend is build your website's liquid, that is, build them in percentages.
Michael T Ganschow Green: And then, wherever it starts looking like crap either to either stretch too wide or crunch to narrow that's when you bring in immediate query.
Michael T Ganschow Green: Now one quick question on that is how do I know what resolution, it is where it's breaking down, let me show you something.
Michael T Ganschow Green: So a lot of web browsers have downloadable extensions that will do this but firefox has the has it built in which is really handy so in firefox.
Michael T Ganschow Green: If you go to your toolbar in the upper right corner over here, and you click on the hamburger menu that's the three lines in the in the far right here.
Michael T Ganschow Green: You get a lot of different tools in here, you can use one of them is a full suite of web developer tools and chat over here, so I can actually click on it one of them is a full suite of web developer tools Okay, and there are quite a lot of tools in here.
Michael T Ganschow Green: One of these tools is called responsive design mode it's about two thirds of the way down the Web developer menu okay responsive design mode is really, really handy.
Michael T Ganschow Green: Because what this does is this gives you a width and the height to play with and a little browser window within your browser window that you can adjust your website to different sizes.
Michael T Ganschow Green: Yes, all the way down to the 144 pixels of an apple watch display so, in theory, if you ever need to you can send a media query so your website looks fine.
Michael T Ganschow Green: On an apple watch if apple ever develops a browser for it God help us all, when that happens, but you can stretch and fold and spindle and mutilate your webpage So you can see exactly at what point it starts looking like done Okay, so that that way.
Michael T Ganschow Green: You can then add in media queries at the precise moment that it starts looking like crap which is really handy so yeah I mean I mean there's.
Michael T Ganschow Green: You know these these guys are really, really handy they're basically the way we control responsive design and essentially how the web is able to.
Michael T Ganschow Green: function across so many different devices are basically because of this one little selector these media query selector very, very fascinating that's a good question other questions.
Michael T Ganschow Green: I figured you guys media queries as a.
Michael T Ganschow Green: New topic close my YouTube channel I did you see if I can find the.
Michael T Ganschow Green: I was going to show you guys a video to kind of finish things off when i'm and then i'm going to.
Michael T Ganschow Green: put up these class files online so let's go where was it responsive what got me here hang on a minute responsive.
Michael T Ganschow Green: Design basics, there was one here really good.
Michael T Ganschow Green: some really good tutorials on here.
Michael T Ganschow Green: I will, I will go and find that video and I may show it another day actually because I lost the tab that it was in I will go find that video and i'll show because there's a great basics of responsive design video.
Michael T Ganschow Green: So.
Michael T Ganschow Green: If you do we have any other questions.
Michael T Ganschow Green: Alright cool well that pretty much does it for today I didn't want to get too deep into responsive design because we're not going to recover it again until a week from today.
Michael T Ganschow Green: Our next class is an open lab so that you may ask me questions also the remainder of class today is also an open labs and.
Michael T Ganschow Green: We finished up a little earlier than I had expected i'm going to be writing comments on my CSS files here and prepping everything to be put live, so that you can download these files tonight.
Michael T Ganschow Green: And look over them and play around with them, but I want to comment in the CSS so that y'all understand what's going on and then we're good to go so um if you guys.
Michael T Ganschow Green: If you guys want to go ahead and take off early.
Michael T Ganschow Green: class is dismissed, if you have questions feel free to stick around and ask them or, if you want to watch me comment on the CSS and then throw the class files up again.
Michael T Ganschow Green: feel free to stick around but I classy is dismissed, if you want to get an early start on the evening, otherwise I will see all you guys Thursday at the open lab otherwise stick around and ask questions i've got an open lab running right now, you can pick my brain as it yours.
Michael T Ganschow Green: right here people running away later.
Michael T Ganschow Green: pause recording.
Heather Amistani: Okay.