From GIMP to xHTML and CSS

Go back to: General discussion

Status #p2pu-webcraft/gimp-xhtml-and-cssX

(no topic set)

[13:50] == woutercox [54c36866@gateway/web/freenode/ip.84.195.104.102] has joined #p2pu-webcraft/gimp-xhtml-and-css

[13:52] <dgeorge_PC> hi all back in record time to my home...

[13:52] <dgeorge_PC> hi wouter

[13:53] <woutercox> Hello

[13:53] <woutercox> I hope everyone got the time right.

[13:55] <dgeorge_PC> woutercox just wondering how long the meeting will run today

[13:56] <woutercox> Well, not longer than 1 hour. Probably sooner, but I reserved an hour

[13:56] <dgeorge_PC> great perfect

[13:57] <woutercox> it'll be maximum 1 hour each week.

[13:58] <woutercox> some of you already started I believe?

[13:58] <lyle> Hi room!

[13:58] <woutercox> Hi there

[13:59] <absent_handed> I've watched the first 3 videos now.

[13:59] <dgeorge_PC> I started last night.. should we be finding our own header image to work from or use the one that you started with?

[13:59] <lyle> I got to 8-buildingthepage.

[13:59] <owenrossi> i wasn't sure if we should be making our own webpage or recreating yours

[13:59] <francy> Hi, I have watched 2 videos, but I haven't started yet, because I needed the GIMP software, I am downloading it now.

[14:00] <woutercox> dgeorge_PC: you can choose, the only problem is that I did not make that image, so I'm not sure about the license

[14:00] <woutercox> so if you're going to put a website live, don't use that image

[14:00] <dgeorge_PC> right... i found it through google images... and have been using that one

[14:00] <woutercox> but it should be okay for the tutorial

[14:00] <woutercox> sure

[14:00] <lyle> :also found it through google images.

[14:00] <woutercox> Okay people

[14:00] <woutercox> It's 14 P.M., let's start

[14:01] <woutercox> Could anyone save a log of the chat?

[14:01] <woutercox> If not, I'll just copy&paste

[14:01] <dgeorge_PC> I have my logs turned on just in case wouter

[14:01] <woutercox> thanks

[14:02] <woutercox> Let's start then

[14:02] <woutercox> Welcome everyone to the course: From GIMP to xHTML and CSS

[14:02] <chrisjackson84> Hello everyone!

[14:02] <woutercox> I'm very happy so many people signed up and also because I've seen you're all enthousiastic

[14:02] <dgeorge_PC> hello everyone...

[14:03] <absent_handed> Hey guys!

[14:03] <francy> Hi everyone

[14:03] <woutercox> First, let me explain everything again so it is clear what we are going to do

[14:04] <woutercox> The end goal, of course, is to create a nice-looking webpage. I just uploaded a jpeg of how it will look: http://p2pu.org/sites/p2pu.org/files/document/24998-final-design-jpeg-attachment/finaldesign.jpg

[14:04] <woutercox> That's the page we will be designing

[14:05] <woutercox> The first step is to actually design it, i.e. to create the images. For that, I am going to use the GIMP. I'm using version 2.6.10.

[14:05] <woutercox> You can use whatever program you want, but GIMP is free and is available for all platforms

[14:06] <woutercox> One of my goals was to create a course that anyone could follow, no matter if they are on Windows, Mac OSX, Linux or something else

[14:06] <woutercox> I'm using GIMP, Gedit and Firefox, nothing more

[14:06] <woutercox> So step 1: create the design and images using the GIMP

[14:06] <woutercox> That is what the Youtube videos are for

[14:07] <woutercox> Each week, I will give a brief explanation and tell you what to do

[14:07] <woutercox> Then the next week, I will answer any questions and explain the next steps

[14:08] <woutercox> Of course, you can contact me at any time with questions. I will try to reply before the next chat session

[14:08] <woutercox> Any questions regarding the first step (designing the page and creating the images)?

[14:09] <dgeorge_PC> So we can use our own header image to get started with a color scheme is this correct?

[14:09] <woutercox> Yeah

[14:09] <woutercox> in fact, I encourage you work with your own images and colors

[14:09] <woutercox> you'll learn the most this way

[14:10] <woutercox> But for some people it may be hard and they can use the images I created

[14:10] <woutercox> You can find these files under the course material as well: http://p2pu.org/webcraft/node/10783/document/24064

[14:10] <anika> If i wish to create my own images, should I place the elements in the same places like in your design? I'm no artist actually, just asking… :)

[14:10] <anika> I mean minor variations, like three columns of text instead of two.

[14:11] <woutercox> anika: yes, if possible use the same structure and positions as me

[14:11] <anika> ok

[14:11] <woutercox> It will also allow us to all use the same CSS values

[14:11] <dgeorge_PC> wouter is it important to start with in image that is 680 x 320 so that we can practice the methods used in the youtube videos?

[14:12] <woutercox> dgeorge_PC: which image are you talking about that is 680x320?

[14:12] <dgeorge_PC> that would be the header image..

[14:13] <woutercox> yes, I would prefer that

[14:14] <dgeorge_PC> ok great... thanks

[14:14] <woutercox> The problem is, if you have other dimensions it also means a lot of other values change, like the width of your central column, your margins, etc.

[14:14] <woutercox> If you feel very sure about your skills, I won't stop you however

[14:15] <woutercox> But preferrably yes, change it to the same dimensions: for example you can resize it or crop it

[14:15] <woutercox> Okay, that was step ONE

[14:16] <woutercox> In step TWO, we are going to create our HTML page and apply STRUCTURE to it

[14:16] <woutercox> This will probably look like the most boring step to a lot of you, but it is essential

[14:17] <woutercox> Basically, we create the HTML file with our content (text) in it and no styling at all (no images or colors or font sizes or ...)

[14:17] <woutercox> In step THREE, we are going to create our CSS file and style the page, but without any images yet

[14:18] <woutercox> We will be working with temporary background colors and try to get the everything into the right position

[14:19] <woutercox> then in step FOUR, we are going to add the images into our page

[14:19] <woutercox> And finally, if we still have the time for it, we are going to use webfonts make the text our page prettier.

[14:20] <woutercox> The end result will be a page that works and looks good in Internet Explorer, Firefox, Safari and Opera

[14:21] <mihneawalker> hello

[14:21] <woutercox> And at the end, you should be able to create similar webpages yourself

[14:21] <woutercox> Any more questions?

[14:22] <dgeorge_PC> well there be weekly assignments

[14:22] <woutercox> Well yes, every week

[14:22] <mihneawalker> I just entered the room... it was quite unclear to me when we have to do ...the asignments

[14:23] <woutercox> We do not have the time to walk through all the steps in the chat, so that's why I will tell you what to do and the next chat I will answer any questions and clarify where necessary

[14:24] <AndreCR> I was wondering. Can you make a short youtube video to explain what settings to use when saving an image. Like when saving an image with two layers or even saving an image with one layer.

[14:24] <AndreCR> How best to optimize, ect.

[14:25] <woutercox> You mean when saving an image as a GIF or JPEG?

[14:25] <woutercox> Okay, I will take a note of that

[14:25] <AndreCR> Yes. PNG too.

[14:25] <AndreCR> Thanks

[14:25] <woutercox> yeah

[14:25] <woutercox> Okay, I will

[14:26] <woutercox> Okay, so as assignment for next week I would like you to watch videos 1 up to 6 at http://p2pu.org/webcraft/node/10783/document/14631

[14:27] <woutercox> Since some of you already watched the videos, you can ask questions right now as well

[14:27] <lyle> My question is related to my unfamiliarity with layers; why did you use layers to add the brown border at the bottom of the header image instead of making the brown border in the same border?

[14:28] <lyle> s/same border/same layer/

[14:28] <woutercox> lyle: whether or not you want to use layers or not depends on what you want to do

[14:28] <woutercox> I must admit; sometimes I use too many layers

[14:28] <dgeorge_PC> One thing to point out on video 4 is that when I inverted the selection I was able to just hit the delete key to remove it.. instead i used cut... I was able to get the same result... is this ok?

[14:28] <woutercox> yeah dgeorge_PC , I don't think it should make a difference

[14:29] <woutercox> lyle: The advantage of working with layers is when you have to change the image

[14:29] <lyle> So it would be easier to change the brown border to the top, for example?

[14:29] <woutercox> yeah, for example

[14:30] <woutercox> or let's say I wanted to add a drop shadow to that border

[14:30] <woutercox> Then I could just apply that to the layer

[14:30] <lyle> Interesting, thanks!

[14:30] <woutercox> Also it makes it easier to select items later and move them around

[14:30] <chrisjackson84> Wouter: I have a question about the gradients you made. For the blue menu you created a 5px image and repeated it, then for the footer you just filled the large image with a gradient

[14:31] <woutercox> yeah chrisjackson84

[14:31] <chrisjackson84> Was that just to show there are two ways of doing the same thing?

[14:31] <lyle> Yeah, I noticed that too.

[14:31] <AndreCR> Me too.

[14:31] <woutercox> yes, I try to show several ways of doing the same thing

[14:31] <woutercox> but in this case it's confusing I guess

[14:31] <chrisjackson84> What would be the advantage of creating the 5px wide image?

[14:32] <chrisjackson84> If any :)

[14:32] <dgeorge_PC> on the topic of gradients would you discourage using any CSS3 code to create the gradient effect?

[14:32] <woutercox> dgeorge_PC: no I won't discourage it

[14:32] <woutercox> but support for that isn't perfect yet in the browsers

[14:33] <woutercox> so you'll have to use some tools in order to rectify that

[14:33] <dgeorge_PC> ok great thanks...

[14:34] <woutercox> I'm a big fan of CSS3 and its styles, but browser support isn't perfect yet. Also, this allows me to show several ways in which you could use background images

[14:35] <woutercox> chrisjackson84: the advantage is, that I could immediately save it for use in the CSS files when building the page ;-)

[14:35] <woutercox> later we are going to tile it using CSS

[14:35] <chrisjackson84> Ah okay! That makes sense :)

[14:35] <woutercox> so we will only need a portion of that gradient and not the whome image

[14:35] <chrisjackson84> Yeah :) thanks for that

[14:36] <woutercox> I could have made it 1px, but I like to make it a little wider so I can see what I'm looking at when I'm looking at the thumnail previeuws on my computer

[14:36] <woutercox> so that's whay

[14:37] <woutercox> sorry, *why

[14:37] <woutercox> oh yeah, and I want to apologize beforehand for the noise in the videos... i.e. dogs barking

[14:37] <woutercox> they are our dogs and they are never silent when they should ;-)

[14:38] <lyle> That's not a problem.

[14:38] <AndreCR> hehe :)

[14:38] <dgeorge_PC> no worries wouter thanks for putting them together for us

[14:38] <woutercox> Yeah, I hope my accent isn't too difficult to understand

[14:39] <lyle> I had no problem understanding.

[14:39] <woutercox> The advantage to these videos is, people can always consult them later. And you see what I do.

[14:39] <francy> funny, maybe when the web questions are done, you could share about yourself, i.e. how you got involved with p2pu?

[14:39] <woutercox> okay

[14:39] <woutercox> Any more questions then, or can we wrap it up?

[14:39] <AndreCR> Just one.

[14:39] <AndreCR> Where can I get the original 680 x 320 header image (if I want to follow your video tutorial exactly).

[14:40] <dgeorge_PC> I just did a google image search for it Andre

[14:40] <woutercox> Go to the course material or go to http://p2pu.org/webcraft/node/10783/document/24064

[14:40] <woutercox> There is an attachment there, download it and unzip it

[14:40] <woutercox> the images are in the 'assets' subfolder I believe

[14:40] <AndreCR> Ok. I did too. But I was only able to find a jpg version of it that was quite as big as the original.

[14:41] <woutercox> No, that was just to show what our final page would look like

[14:41] <AndreCR> I did, but it doesn't have the original.

[14:41] <AndreCR> oh ok

[14:41] <woutercox> no more questions?

[14:41] <chrisjackson84> I'm good :)

[14:42] <lyle> How far along should we be for the next meeting?

[14:42] <owenrossi> Thank you. could you please clarify the time and date of the next meeting.

[14:42] <dgeorge_PC> wouter should be be uploading our completed work to a web host if we have one?

[14:43] <woutercox> dgeorge_PC: you can, but it's not absolutely necessary

[14:43] <woutercox> you can always mail me a zipped

[14:43] <woutercox> zipped file

[14:44] <dgeorge_PC> woutercox: thanks sounds like a good idea

[14:44] <woutercox> owenrossi: next meeting is at Saturday 14 GMT

[14:44] <woutercox> that is, next week Saturday

[14:44] <chrisjackson84> Cool

[14:44] <owenrossi> Do you want to see intermediate stages or just the final version of the webpage?

[14:45] <thorstenboeck> same time?

[14:45] <woutercox> Actually, that is one hour later I believe

[14:45] <woutercox> That's when most people seemed able to attend

[14:45] <thorstenboeck> ok, thanks

[14:46] <woutercox> and then it'll always be at that day and time

[14:46] <absent_handed> So February 5th, at 14GMT?

[14:46] <thorstenboeck> so at 14.00GMT?

[14:46] <woutercox> exactly

[14:46] <chrisjackson84> Awesome, and you want us up to video 6?

[14:46] <woutercox> yeah

[14:46] <woutercox> I won't stop you from doing more, but I won't cover those topics in next weeks chat ;-)

[14:47] <AndreCR> So, shoulde we email you what we have completed after watching up to video 6?

[14:47] <woutercox> Yes, if you can

[14:47] <AndreCR> ok

[14:47] <woutercox> Okay, that concludes the questions.

[14:48] <absent_handed> Thanks Wouter!

[14:48] <woutercox> You're all very welcome

[14:48] <lyle> Yes, thank you Wouter!

[14:48] <woutercox> I'm always happy to see enthousiastic people

[14:48] <woutercox> :D

[14:48] <AndreCR> Thanks!

[14:48] <thorstenboeck> Yeah thanks, look forward to getting cracking on this!

[14:48] <sebastien_vignea> Thanks!

[14:48] <anika> thank you very much

[14:48] <woutercox> So now, some information about myself

[14:48] <dgeorge_PC> thanks so much woutercox

[14:49] <woutercox> I'm 32 years old, living in Belgium and I have been webmaster for a mid-size company for 7 years. Then I worked 1 year as a software tester and now I landed a new job as a webmaster for a city nearby

[14:50] <woutercox> I have always been interested in open source and open source software, I'm also a long-time Linux user.

[14:50] <woutercox> Also, if a piece of software has ever been available for download, I probably tried it out ;-)

[14:51] <dgeorge_PC> I'm a big fan of linux mint 10

[14:51] <woutercox> I live here with my girlfriend, our two dalmations (that's them if you spotted them in videos, I mean my wallpaper)

[14:51] <woutercox> dgeorge_PC: it's what I'm using right now

[14:52] <woutercox> well, I have a dual boot with Windows 7

[14:52] <woutercox> no offense to the Mac-people here

[14:52] <chrisjackson84> Hahaha, best way! There is some amazing software out there, even for free

[14:52] <woutercox> sorry, dalmations, not 'dalmations' (what would those be??)

[14:52] <dgeorge_PC> so do i .. its funny I have a dual boot windows 7 box / linux mint... and a macbook pro ...

[14:53] <woutercox> So how did I end up with school of webcraft?

[14:53] <woutercox> Actually, it's because I'm very interested in Firefox, meaning: Mozilla. I saw they held courses and that's when I applied to give one

[14:54] <woutercox> I mean, to teach one

[14:54] <woutercox> Okay, let's wrap this up

[14:55] <woutercox> ASSIGNMENT FOR NEXT WEEK: watch videos 1-6 at http://p2pu.org/webcraft/node/10783/document/14631 , create a color scheme (pick at least 3 colors aside from black and white) and try to create the images

[14:55] <woutercox> NEXT MEETING: February 5 at 14PM

[14:56] <woutercox> Thank you all for coming.

From GIMP to xHTML and CSS

My recent threads

Recently updated threads

Chat log for WEEK 1