Go back to: General discussion
[15:01] <woutercox> quick question: were you able to download the video?
[15:01] <AndreCR> yes
[15:01] <woutercox> Normally I'd have it up on Tuesday, but Youtube told me it was too big...
[15:01] <@absent_handed> I was, but I had to convert it to a smaller format
[15:01] <@absent_handed> It was too much video for my little computer :-)
[15:01] <woutercox> ah, okay... sorry!
[15:02] <woutercox> The document contained more or less the same information though
[15:02] <@absent_handed> Also, is there a slicing video with corrected audio?
[15:02] <woutercox> oops!
[15:02] <woutercox> I forgot it...
[15:02] <thorstenboeck> I just read the document
[15:02] <woutercox> I'll do it this week
[15:03] <@absent_handed> I was able to separate out the images I needed, but I used the rectangle select tool to do it. I was wondering if there is a "slice tool".
[15:03] <woutercox> absent_handed: yeah, there is
[15:03] <woutercox> Crop tool
[15:04] <woutercox> It's nothing like the Slice tools in Photoshop
[15:04] <woutercox> but it'll do the job
[15:04] <woutercox> or you can right-click on a layer, and choose 'Alpha to selection'
[15:04] <woutercox> what I believe that does, is select all non-transparent pixels
[15:04] <@absent_handed> Gotcha. Well, with all the guide lines you had us set up, the rectangle select took me 3 minutes to get it all done. Very quick.
[15:04] <woutercox> guides are an extremely useful tool for web design
[15:05] <woutercox> together with the 'snap to' options
[15:05] <@absent_handed> Yeah, they were a little gem of knowledge.
[15:05] <@absent_handed> I'm glad I saw you use them.
[15:05] <@absent_handed> :-)
[15:06] <woutercox> Okay, let's start this week's session
[15:06] <woutercox> Any problems or questions creating the html file?
[15:06] <@absent_handed> That was easy.
[15:06] <woutercox> it's not brain surgery, but maybe something isn't clear or... ?
[15:07] <@absent_handed> I think I'll be changing editors though. Mine supports Zen Coding, but only in a broken way.
[15:07] <woutercox> absent_handed: what editor are you using and which operating system?
[15:07] <@absent_handed> SlickEdit on OS X.
[15:08] <woutercox> ah, okay
[15:08] <@absent_handed> It's good for non-web stuff, but I think I'll try a free editor for html/css.
[15:08] <woutercox> well, on the zen coding page is a list of editors with support
[15:08] <@absent_handed> why do you use gedit?
[15:08] <woutercox> sorry, afk for a few secs
[15:09] <woutercox> back
[15:10] <woutercox> I chose use gedit for this course because it's free and available on different platforms
[15:10] <woutercox> and it supports zen coding and a lot of different plugins
[15:10] <woutercox> for example, I like it that you can install zoom plug-in and zoom each tab at different levels
[15:11] <@absent_handed> Is it vim-like, emacs-like, or something else?
[15:11] <woutercox> no, it's comparable to Wordpad, or Notepad++ if you know that
[15:12] <@absent_handed> Maybe this is a forum topic, I apologize. I'm just realizing I need to change editors, and I want to find a good one.
[15:12] <woutercox> usually I use Html-kit or Html-kit tools, but last one is paying
[15:12] <woutercox> Anyone, let's start with today's topic
[15:12] <woutercox> I'm going to run over styling the HTML
[15:13] <woutercox> that's this week's assignment: you can read and follow this document:
[15:14] <woutercox> I suppose you all know how you link a stylesheet file inside a HTML file?
[15:14] <Zilla-Mama> in the head?
[15:14] <woutercox> yeah,
[15:14] <AndreCR> yes
[15:14] <@absent_handed> with a link tag.
[15:14] <woutercox> <link rel="stylesheet" type="text/css" href="style.css" media="all" />
[15:15] <woutercox> that's the code you put in the head. And 'style.css' is the filename of your stylesheet
[15:15] <woutercox> of course, if it's in another folder, you would put for example 'assets/style.css'
[15:15] <woutercox> then it becomes <link rel="stylesheet" type="text/css" href="assets/style.css" media="all" />
[15:17] <Zilla-Mama> Just an FYI, I just read that making a basic iPad app from your website is easy however your .css file must be in the main folder.
[15:17] <ChrisM> just for grins, what are some of the other things you could put in the fields in that specific tag?
[15:17] <Zilla-Mama> I know it has very little to do with the discussion
[15:17] <woutercox> you mean in the root?
[15:17] <woutercox> ChrisM: the title tag
[15:17] <woutercox> and meta tags, for example keywords for search engines
[15:18] <@absent_handed> <script>
[15:18] <woutercox> also, scripts or links to scripts (javascript/jquery)
[15:18] <AndreCR> I think chris meant: what other attributes can you add to the link tag?
[15:18] <ChrisM> I mean in the tag you just showed us, like instead of putting: media="all" could you put: media=".."
[15:18] <Zilla-Mama> Does the style sheet always have to be called "style.css" like "index.html" or can you call it anything you want?
[15:18] <woutercox> you can call it what you want
[15:19] <ChrisM> yeah, attributes. That's the word
[15:19] <@absent_handed> You can actually link to several style sheets too.
[15:19] <@absent_handed> One for a site wide style sheet, one just for this page, for example.
[15:19] <woutercox> as for media types in CSS, for example you can use media="print"
[15:19] <@absent_handed> (by using two <link> tags)
[15:19] <Zilla-Mama> Thanks.
[15:20] <woutercox> and then you could add a stylesheet for printing, for example where you hide any graphics that do not make any sense for printing
[15:20] <ChrisM> and would that only affect the text then?
[15:20] <Zilla-Mama> Is that in the video (I didn't have a chance to watch it this week)?
[15:20] <ChrisM> cool
[15:20] <woutercox> Zilla-Mama: no, I didn't talk about media types in the video
[15:22] <woutercox> although only a few are commonly used
[15:22] <woutercox> now, let's go back to styling the HTML
[15:22] <woutercox> first thing to do is apply what people call a 'CSS Reset'
[15:23] <woutercox> If you take a look at HTML, you should notice that your text does not hug the edges of your browser window
[15:24] <woutercox> the reason for that is because all browsers apply some default styling... that's why there is whitespace at the edges and it is why the headings are big and bold
[15:24] <woutercox> but when you try to make your page look the same on different browsers, that gets in the way
[15:24] <woutercox> so most people use CSS to reset those default values to 0 (zero)
[15:25] <woutercox> a lot use Eric Meyer's CSS reset, but for sake of simplicity I'm using the star hack
[15:25] <woutercox> It's just this: * {margin: 0; padding: 0;}
[15:26] <woutercox> the star in CSS means 'everything'. So here we're saying: set ALL margins and paddings of the document to zero
[15:26] <woutercox> Then when you style your page, you will get a consistent look in different browsers
[15:27] <woutercox> if you want, you can try that, and you will see the text will start at the edges
[15:27] <Zilla-Mama> Can we override that in a section of a div tag for example if we want to change it in one area?
[15:27] <woutercox> yes, sure, and you shouldd
[15:28] <woutercox> this is just to create a common starting point
[15:28] <Zilla-Mama> Got it.
[15:28] <@absent_handed> Is it overridden in that case, because '*' is the most general thing ... or do you need to put * { margin: 0; padding: 0;} at the top of your css file?
[15:29] <woutercox> the start means 'anything', so you do not need to put it at the top. But it's cleaner that way
[15:29] <woutercox> sorry, 'star', not 'start'
[15:30] <@absent_handed> gotcha. Thanks.
[15:30] <woutercox> in CSS, which style gets chosen depends on specificity.
[15:31] <woutercox> those links should come in handy when you're running into problems
[15:31] <woutercox> for example you're trying to style something but for some reason is doesn't work...
[15:31] <woutercox> it might be because of specificity of the css rules
[15:31] <woutercox> Second thing:
[15:32] <woutercox> setting a base font size
[15:32] <woutercox> body { font-size: 62.5%; font-family: tahoma, verdana, sans-serif; }
[15:32] <woutercox> setting the font-size to 62.5% is a little trick
[15:33] <woutercox> you set it to that value and then when you're choosing your font size you can use em's instead of pixels
[15:33] <woutercox> those are relative units of size and are more flexible
[15:33] <woutercox> when you put font-size: 62.5% in your body, then 1em=10 pixels
[15:34] <AndreCR> oh ok
[15:34] <@absent_handed> Ah. Gotcha.
[15:34] <woutercox> so let's say you have a heading and want to make it 16px large
[15:34] <woutercox> then you would say: h2 { font-size: 1.6em; }
[15:35] <woutercox> and when the visitor increased the font size, all the text grows proportionally
[15:35] <woutercox> next thing: positioning the central column
[15:36] <woutercox> as you've seen in the example, all of the content is inside of a 960px-wide column (the centralCol div)
[15:36] <woutercox> that div is centered
[15:37] <woutercox> to center it, you use #centralCol { width: 960px; margin: 0 auto; background: whitesmoke; /* temporary background color */ }
[15:37] <woutercox> I explained that at the end of the video
[15:37] <woutercox> the key here is 'margin: 0 auto', which is the same as 'margin: 0 auto 0 auto'
[15:38] <@absent_handed> What does auto mean?
[15:38] <woutercox> when you're working with position values in CSS, you start from the top and read clockwise: TOP-RIGHT-BOTTOM-LEFT
[15:38] <woutercox> auto means the browser can decide for himself what the best value is
[15:39] <woutercox> In this case, the browser sees a DIV that is 960px wide, sees that he can decide for himself which values the left and right margin should be
[15:39] <@absent_handed> Thanks.
[15:39] <woutercox> The browser will then decide to use the same values for left and right margin... which centers the page
[15:40] <woutercox> that only works when you specify a width though
[15:41] <woutercox> one more question: does everyone know how selectors work in CSS?
[15:41] <ChrisM> could you give an example of a selector?
[15:41] <woutercox> for example, how you would say in CSS 'every h3 that is inside the DIV with id='bodycontent'
[15:42] <@absent_handed> div h3#bodyContent {
[15:42] <woutercox> almost
[15:42] <woutercox> #bodycontent h3
[15:42] <@absent_handed> oops, the div has the id ...
[15:42] <woutercox> yeah
[15:42] <woutercox> oh, sorry
[15:42] <@absent_handed> I mis-read that.
[15:43] <woutercox> for example, a list item inside of the navigation block:
[15:43] <woutercox> #navigation ul li { }
[15:43] <woutercox> or still something else: #nav ul#mainmenu li.first { }
[15:44] <woutercox> the last one means: every list item that has a class of first and is inside of an ul with an id of mainmenu, which itself is inside a div with an id of nav
[15:44] <woutercox> I hope you get the idea...
[15:45] <woutercox> oh, and while following the document, be careful, because I see the id's might not match 100%
[15:45] <@absent_handed> Are there any ways to specify the last or first item, without using classes?
[15:45] <woutercox> yeah: first-child and last-child
[15:46] <woutercox> sorry, not sure about last-child
[15:46] <@absent_handed> so: #nav ul#mainmenu first-child { } wouidl work as well?
[15:46] <@absent_handed> *would
[15:47] <woutercox> #nav ul#mainmenu li:first-child
[15:48] <woutercox> the first list item inside the ul with id of mainmenu
[15:48] <woutercox> yeah, I believe it should work as well
[15:48] <@absent_handed> Okay, first-child of the tag type specified.
[15:49] <woutercox> Okay, so assignment for next week is styling the html file
[15:49] <woutercox> but be wary of any id's that don't match...
[15:50] <woutercox> and if you get stuck, send me an e-mail
[15:50] <woutercox> I'd like to explain floating to you... but there's no time left
[15:51] <woutercox> I'll put up a video about this (probably Dropbox once more), and I'll also redo the video about slicing
[15:51] <woutercox> questions?
[15:52] <@absent_handed> None yet. Thanks again!
[15:52] <thorstenboeck> Is this the last week of the course, Wouter? Seems like there is still a lot to do.
[15:52] <Zilla-Mama> No, we have another 4 weeks, right?
[15:52] <woutercox> thorstenboeck: no, we're going until it's done
[15:52] <Zilla-Mama> It's a 10 week course.
[15:53] <thorstenboeck> ah ok, great, I just remembered reading that it was a 6 week course.
[15:53] <woutercox> and even if we don't get everything done: I'll create video tuts for the remainder of it
[15:53] <Zilla-Mama> Wouter, could you please post this chat? I got here late and lost the first 15 minutes. Thank you.
[15:53] <woutercox> Zilla-Mama: sure, I do that every week
[15:53] <Zilla-Mama> Wow, thanks.
[15:53] <woutercox> oh, and I must say, in this part: trial and error is the best way to learn!
[15:54] <woutercox> so don't be disappointed if something doesn't work: try something else and see what happens!
[15:54] <thorstenboeck> thanks, looks a bit overwhelming, but guess it is just about diving in
[15:55] <woutercox> well, I believe this is the meat of the course, yes.
[15:55] <woutercox> but I'm positive everyone will be able to do it!
[15:55] <@absent_handed> Thanks again for the chat this week Wouter!
[15:55] <woutercox> My pleasure
[15:55] <woutercox> So see you next week!
Chat log week 5