Wed Oct 20th

Our last class :(, but please use the forums to continue to work on your projects :)

Topics for Week 6:

• @font-face
• Static and Relative positioning
• Absolute and fixed positioning
• Design for Mobile First - must see video.

Wed Oct 13th

07:00] == ozten [181325bf@gateway/web/freenode/ip.24.19.37.191] has joined #p2pu-webcraft/designers-tackling-web
[07:00] <ozten> Howdy gonediscin!
[07:02] <gobi_> hi guys
[07:02] <@gonediscin> Hi
[07:04] <ozten> Howdy gobi
[07:05] <ozten> It's 5 after, let's get started
[07:06] <ozten> Did you have a chance to check out the assignments that were posted to the forum?
[07:06] <@gonediscin> cool!
[07:06] <@gonediscin> Yes, but didn't do everything
[07:06] <@gonediscin> http://kylerowden.com/week_four/week_four.html
[07:07] <ozten> I did see that link, I like the amout of space left in the footer
[07:07] <ozten> with the disc golf course
[07:09] <ozten> What were your thoughts on the other's work?
============= DISCONNECTED ======================
[07:14] == ozten [181325bf@gateway/web/freenode/ip.24.19.37.191] has joined #p2pu-webcraft/designers-tackling-web
[07:14] == mode/#p2pu-webcraft/designers-tackling-web [+ns] by bear.freenode.net
[07:16] <gonediscin> sorry got kicked off the network
[07:17] <@ozten> ya, gobi disappeared at the same time
[07:17] <gonediscin> Im on my phone's data now, the school I am at is always having network problems
[07:17] <@ozten> I think the p2pu.org servers are overloaded
[07:17] <@ozten> ah, could be that too
[07:17] <@ozten> but the site is very slow for forums, wiki
[07:18] <gonediscin> so how was your week?
[07:19] <Diedie> Hi there!
[07:19] <@ozten> what did you think of the two assignments?
[07:19] <Diedie> Sorry I was having problems getting oneline
[07:19] <@ozten> welcome Diedie
[07:19] <Diedie> i mean into the chat
[07:19] <@ozten> yes, I think the site is slow today
[07:20] <Diedie> oh
[07:20] <@ozten> Let's press foward and gobi will hopefully join us soon
[07:21] <gonediscin> sounds good
[07:21] <@ozten> gonediscin and Diedie, have you tried to use Firebug to explore how a page is built?
[07:21] <gonediscin> i did a little
[07:22] <gonediscin> firebug seems like it can do a whole lot more than just view code, which is what I did
[07:22] <gonediscin> with it
[07:22] <@ozten> yes, you can do a lot
[07:22] <@ozten> you can find out which of your assets aren't loading
[07:22] <gonediscin> It seemed as if I can change the format, and my adobe labs hooked up to it
[07:22] <@ozten> say if you have an image path in your CSS that is wrong
[07:23] <@ozten> that will "fail silently", but with Firebug you just:
[07:23] <@ozten> Right click on your page and select "Inspect Element"
[07:23] <@ozten> this activates Firebug
[07:23] <@ozten> Switch to the Net tab
[07:23] <@ozten> enable it if it is disabled
[07:23] <@ozten> then refresh your page
[07:24] <@ozten> the Net default mode is "All"
[07:24] <@ozten> and it will show how the browser goes out and gets each piece of your webpage
[07:24] <@ozten> urls in red are ones that had trouble loading
[07:25] <@ozten> Another very useful tool is seeing how CSS rules were applied
[07:25] <@ozten> When you right click in the page and inspect element
[07:25] <@ozten> The HTML tab is activated in Firebug
[07:25] <@ozten> and that HTML tag is shown on the left with it's CSS on the right
[07:26] <@ozten> Let's go to http://csszengarden.com/ and right click on the "A demonstration of what can be"
[07:26] <@ozten> inspect element
[07:27] <@ozten> You can see the paragraph text-align: justify
[07:27] <@ozten> has a strike through it
[07:27] <@ozten> this is because the more specific rule #quickSummary p was applied
[07:27] <@ozten> instead
[07:28] <@ozten> This will help you "debug" your page
[07:28] <gonediscin> i have to restart firefox for firebug. Im using my netbook for class, and havn't put it on yet
[07:28] <@ozten> Diedie have you tried installing Firebug?
[07:28] <Diedie>  yes i did
[07:28] <@ozten> gonediscin: it's okay, you can try it later
[07:29] <Diedie> ....but have not explored much with it...
[07:29] <Diedie> will try after class
[07:29] <@ozten> how has finding CSS properties been?
[07:29] <@ozten> (search)
[07:30] <@ozten> An important skill to develop is being able to find out how to use a CSS property
[07:30] <Diedie> it's OK so far since I have not tried to done fancy stuff yet. But the web person from my organization gave me some organization web pages with PHD code mixed with CSS
[07:30] <Diedie> so i am a bit confused and still trying to figure out
[07:30] <@ozten> PHP code, yikes
[07:31] <@ozten> Except for exterme cases, that should not be needed
[07:31] <@ozten> one of the great things about Web Standards
[07:31] <Diedie> he insisted using PHD for nav bar to keep the page styles seperate or something. i have no clue yet, so just hear what he says.
[07:31] <@ozten> is you can seperate HTML from JavaScript from CSS
[07:32] <@ozten> interesting
[07:32] <@ozten> As a designer you can focus on the look
[07:32] <@ozten> and any CSS/HTML you know is a bonus
[07:32] <@ozten> I wouldn't stress to much on the implementation details
[07:33] <@ozten> When you search, be sure to use some technical terms to narrow down what your looking for
[07:33] <Diedie> for example?
[07:34] <@ozten> If you know your looking for font and weight
[07:34] <@ozten> try searching for CSS property font weight
[07:34] <@ozten> once you figure out the property name
[07:34] <@ozten> you can search for tutorials
[07:34] <@ozten> documentation
[07:34] <@ozten> etc
[07:35] <@ozten> There are some annoying sites with poor content and big ads
[07:35] <@ozten> Just skip over them, once you start to recognize their domain names
[07:35] <@ozten> They are really good at SEO and show up at the top of search results ;/
[07:36] <@ozten> We learned View Source in the first week
[07:36] <@ozten> have you both been using that technique on everyone's assignments
[07:36] <@ozten> ?
[07:36] <Diedie> yeah
[07:36] <@ozten> cool
[07:36] <gonediscin> yes
[07:36] <@ozten> Another technique that is really helpful
[07:36] <gonediscin> ctrl-u is my friend
[07:37] <@ozten> is "save complete webpage"
[07:37] <Diedie> great
[07:37] <@ozten> I know Firefox best, but this should work in other browsers
[07:37] <@ozten> Diedie: at work, when they ask you to work on a page and it has a bunch of PHP and junk
[07:37] <Diedie> exactly
[07:37] <@ozten> that doesn't really matter, because you can visit the page in your browser
[07:37] <@ozten> and then save as complete
[07:38] <Diedie> our site is not that great, so i am trying to help improve with content and form  suggestion
[07:38] <@ozten> This will create a mirror of the webpage on your harddrive
[07:38] <@ozten> With Firefox, it's not perfect and might get confused on background images, etc
[07:39] <@ozten> There are a couple of ways around this
[07:39] <@ozten> http://mozillalinks.org/wp/2007/04/save-a-complete-web-page-really/
[07:39] <@ozten> is about a Firefox Addon that will do a better job
[07:39] <@ozten> Also, you can just use the Firebug trick
[07:39] <@ozten> to find out which assets did't load
[07:39] <@ozten> edit the source locally, and fix any broken links
[07:40] <@ozten> At this point you can edit the CSS and HTML and send your work back to the people your collaborating with
[07:40] <@ozten> or ftp it up to your site and give them a link to it
[07:40] <@ozten> This saving a webpage
[07:40] <@ozten> is a great way to start
[07:41] <@ozten> if you want to theme an existing webapp
[07:41] <@ozten> like creating a Wordpress theme
[07:41] <@ozten> or for your lifestream assignment
[07:42] <@ozten> Those techniques are really basic and useful. It's what web designers and web developers do everyday
[07:42] <@ozten> to get work done and to learn new techniques
[07:42] <@ozten> This field is constantly changing and you never "know everything"
[07:43] <@ozten> which keeps it fresh and fun!
[07:43] <Diedie> thanks! i will definitely try that out.
[07:43] <@ozten> Let's talk about backgrounds today
[07:43] <@ozten> http://dev.opera.com/articles/view/31-css-background-images/
[07:43] <gonediscin> Im already downloading it
[07:43] <@ozten> :)
[07:43] <@ozten> We've already done basic background styling
[07:44] <@ozten> There are two additional ways to paint the background of tags
[07:44] <@ozten> 1) background-image and 2) gradient
[07:44] <@ozten> If we scroll down that article to 'Building an Alert message'
[07:45] <@ozten> we can see how they build up a clever little alert box
[07:45] <@ozten> by setting background-color
[07:45] <@ozten> background-image
[07:45] <@ozten> background-repeat: no-repeat;
[07:46] <@ozten> background-image can be trick
[07:46] <@ozten> but it's just like putting urls in the img src attribute
[07:46] <@ozten> the url path should be relative to the location of the css document
[07:47] <@ozten> You can control the position of the image
[07:47] <@ozten> you can let it tile
[07:47] <@ozten> (repeat)
[07:48] <@ozten> We won't delve into CSS Spriting, but it's a technique for high performance webpages
[07:48] <@ozten> where you put many small images onto the same graphic
[07:48] <@ozten> It's stolen from 8-bit video games, which had difficult memory requirements
[07:49] <@ozten> now to make webpages load quickly, you want to reduce the number of files that load
[07:49] <@ozten> The second technique is much newer! It's CSS 3 (html5) goodness
[07:49] <@ozten> http://www.colorzilla.com/gradient-editor/
[07:50] <@ozten> You can create linear gradients, just like in Inkscape
[07:50] <@ozten> and apply them to the background of tags
[07:50] <@ozten> This tool is fun
[07:50] <Diedie> nice
[07:50] <@ozten> Note the CSS is geneated on the right
[07:50] <@ozten> there is a lot of CSS!
[07:51] <@ozten> gradients are an emerging standard
[07:51] <gonediscin> css 3 sounds fun
[07:51] <Diedie> sorry what is CSS3?
[07:51] <@ozten> Firefox, Chrome, Safari have support
[07:52] <@ozten> IE support can be faked
[07:52] <Diedie> i will google it no worry
[07:52] <@ozten> So the CSS properties and values are a bit wacky on some cutting edge stuff
[07:52] <gonediscin> it is just the new css, we are working with css 2
[07:53] <@ozten> but this tool automagically creates all the relevant styles
[07:53] <@ozten> Diedie: CSS3 is a major revision to the CSS standard
[07:54] <@ozten> When you use CSS, your writing rules accourding to the CSS specificaiton
[07:54] <@ozten> which web browser vendors implemented
[07:54] <@ozten> the specification keeps everyone on track
[07:54] <@ozten> as to what 'background-image' means
[07:54] <@ozten> html5 is the latest changes to the HTML spec
[07:55] <@ozten> CSS 3 is the latest changes to CSS,etc
[07:55] <@ozten> These things don't get changed very often, it's an exciting time for web designers
[07:55] <@ozten> So you use all for pieces of CSS
[07:55] <@ozten> and your browser will use the one it understands
[07:56] <@ozten> with background images and gradients, you can begin to approach the sophisticated designs your used to imagining
[07:57] <@ozten> I believe we only have 1 class left
[07:57] <Diedie> wah so soon
[07:57] <Diedie> i feel like i just started
[07:57] <@ozten> It's a huge topic
[07:57] <gonediscin> no kidding
[07:57] <@ozten> But hopefully you be armed witht he tools to continue exploring
[07:57] <Diedie> :) thanks a lot
[07:57] <gonediscin> what about the lifestream page. How do you get facebook's comments into your page?
[07:58] <@ozten> Did you guys look into Lifestreaming and understand the general design challange?
[07:58] <Diedie> i will work harder this week to have a proper page
[07:58] <Diedie> not yet
[07:58] <gonediscin> Yeah I see it's benefits, but have yet to see it's challenges
[07:58] <@ozten> Facebook is a closed platform, I'd start with more Webish sites
[07:58] <@ozten> like Twitter, Delicious, Last.fm, Flickr, etc
[07:59] <@ozten> Create a mockup of a really cool profile page
[07:59] <@ozten> that has one or more streams of content
[07:59] <@ozten> lists of entries
[07:59] <@ozten> from across the web
[07:59] <@ozten> showing what you've been up too
[07:59] <@ozten> Gowalla location check-ins
[07:59] <@ozten> etc
[08:00] <@ozten> You'll upload a jpg of your mockup
[08:00] <@ozten> and then post-class we can all work together on implementing your mock-up
[08:00] <@ozten> ify ou want too
[08:00] <@ozten> any questions?
[08:00] <gonediscin> sounds good to me
[08:01] <@ozten> I'll post to the Assignments page with more details
[08:01] <@ozten> Thanks you guys and have a great week

Wed Oct 6th

[07:00] == ozten [181325bf@gateway/web/freenode/ip.24.19.37.191] has joined #p2pu-webcraft/designers-tackling-web
[07:00] <ozten> Howdy tapesofwrath
[07:01] <ozten> Howdy gonediscin
[07:01] <gonediscin> hi!
[07:02] <gobi_> hi guys
[07:02] <gonediscin> hi gobi
[07:03] <ozten> Howdy gobi
[07:04] <gobi_> seems like we gotta wait for some time
[07:05] <ozten> gobi: good call, you're on time, so let's get started :)
[07:05] <ozten> Did everyone have enough time to finish the assignment this week?
[07:05] <ozten> I just sent out a Week 3 Assignments topic thread, please post your urls there
[07:06] <gonediscin> yes, but not all the way. i wanna do sooo much more
[07:06] <ozten> It's addicitve, no?
[07:06] <gonediscin> definately, my wife hasnt seen me since started lol
[07:06] <gobi_> experimenting with it was fun
[07:06] <ozten> Welcome Diedie
[07:06] <@tapesofwrath> i didn't make anyting new because I'm apparently locked out of my hosting account
[07:07] <ozten> heh
[07:07] <Diedie> morning!
[07:07] <ozten> tapesofwrath: Do you have some next steps for getting access?
[07:07] <gonediscin> good morning diedie
[07:07] <ozten> Otherwise, I'd create a new "free hosting" account
[07:07] <@tapesofwrath> i think i had covered most of the tasks last week though.  i did take the time to validate though.
[07:08] <Diedie> i only used very limited coding with inline style because i want to know how different style works. i will work harder to learn more in the next coming week.  
[07:08] <ozten> Yes, what did you all learn using the validation tools?
[07:08] <gonediscin> can u validate processing.js
[07:08] <@tapesofwrath> yeah, i just realized it.  i'll either contact the host or get something else working for next week
[07:08] <Diedie> morning gonediscin!
[07:08] <@tapesofwrath> good question :p
[07:09] <ozten> The error messages can be tough to decypher sometimes
[07:09] <gonediscin> i learned that understanding the validator can be tough. for instance i dont know why i get errors on kylerowden.com
[07:10] <ozten> let's all load that up on the w3c validator
[07:10] <@tapesofwrath> i think that was the first i tried validating an html5 page.  i noticed it throws an automatic warning just for being html5
[07:10] <@tapesofwrath> ...experimental validation or something
[07:10] <gonediscin> i got the validagtor to say no errors but the lists looked wrong
[07:10] <ozten> gonediscin: so the homepage has 1 error
[07:11] <ozten> tapesofwrath: good point, html5 is a new internet standard (set of standards really)
[07:11] <ozten> so it takes a while for the tools to catch up
[07:11] <gonediscin> im sorry kylerowden.com/study_notes/study_guide.html it is the week 3
[07:12] <ozten> I like to use the option "show source"
[07:13] <ozten> Does everyone have that page loaded into the validator?
[07:13] <@tapesofwrath> yep
[07:13] <ozten> what does the first error say tapesofwrath?
[07:14] <Diedie>  yeah
[07:15] <ozten> or anyone else
[07:15] <Diedie> @tapesofwrath's web page passed
[07:16] <gobi_> Error  Line 29, Column 52: document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
[07:16] <@tapesofwrath> sorry "document type does not allow element "A" here"
[07:16] <Diedie> mine, it says i don't have space between two atrributes
[07:16] <ozten> ah, perfect
[07:16] <ozten> so the issue has something to do with where the anchor tag is
[07:16] <ozten> HTML has to be well formed to be valid
[07:17] <ozten> there are a bunch of rules about where things can live
[07:17] <Diedie> it's like spelling check in word
[07:17] <ozten> I don't memorize them all
[07:17] <ozten> and most just make sense
[07:17] <ozten> and this tool is what I use to find issues
[07:17] <Diedie> great
[07:17] <ozten> So an anchor tag *must* be in a p, heading tag, pre, div, or address
[07:17] <gonediscin> i am on my phone and cant look, but i know what tapes is talking bout. i got that error on thebunglebus.com
[07:17] <ozten> it currently is in the body tag
[07:18] <ozten> the "parent" of this anchor tag is the "body" tag
[07:18] <ozten> I'd wrap this tag in a <p></p>, since the content is a paragraph about passing an exam.
[07:18] <ozten> So you just work through you errors one by one and re-validate the page
[07:19] <ozten> Any questions on the w3 validatior?
[07:20] <ozten> alright, let's jump into Week 4
[07:21] <ozten> So far we've learned how to markup a document and it's a long scroll of text
[07:21] <ozten> then we learned how to add color
[07:22] <ozten> but design is about proportion, composition also
[07:22] <ozten> negative space is important
[07:23] <ozten> let's talk about padding, margins, and borders
[07:23] <ozten> Any element can be styled to give it more space
[07:24] <ozten> p { padding: 20em; }
[07:24] <ozten> This will put 20 units of space around the text of the paragraph
[07:24] <ozten> if you look at the diagram on http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
[07:25] <ozten> you'll see where padding lives
[07:25] <ozten> The color used to paint the padding is the background-color of the <p> tag
[07:26] <ozten> So we can use padding to give a giant block of color
[07:26] <ozten> and breathing room to an element
[07:27] <ozten> Here is an example http://jsfiddle.net/GegKJ/
[07:28] <ozten> This jsfiddle.net page is like an HTML labratory
[07:28] <ozten> you can tweak that eample and test out different CSS syntax
[07:28] <ozten> You can see I've added a class='breath' HTML attribute
[07:28] <ozten> to the paragraph in the middle
[07:29] <ozten> then I've use the CSS selector .breath
[07:29] <ozten> to pick this element out
[07:29] <ozten> finally I've styled it with a background-color and padding
[07:31] <ozten> Okay, what about margin? http://jsfiddle.net/GegKJ/1/
[07:31] <ozten> You can see I've created a general CSS selector 'p'
[07:31] <ozten> this targets all three paragraph tags
[07:32] <ozten> the last CSS property is border
[07:32] <ozten> it has the form border: solid 1px #000;
[07:32] <ozten> this is the shortest way to type it
[07:33] <ozten> you can also do longer properties
[07:33] <ozten> like border-top-width
[07:34] <ozten> http://jsfiddle.net/GegKJ/2/ - This has two border properties
[07:34] <ozten> a general one for all paragraphs
[07:34] <ozten> and a specific one for the breath class
[07:35] <ozten> does everyone see how that works?
[07:35] <Diedie> yeah
[07:35] <ozten> It's best with design to figure out the general patterns for your mockup
[07:35] <ozten> and write those styles first
[07:35] <ozten> "well most of this page is light grey with 14pt font and about 8px gutter"
[07:36] <ozten> so you can steup your body tag
[07:36] <gonediscin> yeah
[07:37] <ozten> body { background-color: #CCC; color: #333; font-size: 14pt; margin-left: 8px; margin-right: 8px; }
[07:37] <ozten> and then selectively override this general rule
[07:37] <ozten> on an element by element basis
[07:37] <ozten> you should use the HTML class attribute
[07:37] <ozten> to create styles
[07:38] <ozten> like "gaudi" for some crazy curvy style you use on links
[07:38] <ozten> and "callout", "starburst", "more-info", etc
[07:38] <ozten> for these design elements you use that differ from the basic style
[07:39] <ozten> With html5 your borders can have rounded corners
[07:39] <Diedie> so  how do we decide when to code it within html and when to code it within CSS?
[07:39] <ozten> Diedie: great question
[07:39] <ozten> HTML is the structure
[07:40] <ozten> saying <p>And you can <a class="gaudi">Buy Now</a></p>
[07:40] <Diedie> and CSS is the style
[07:40] <ozten> is capturing the content of the page
[07:40] <ozten> It's a little bit of a grey area with gaudi
[07:40] <ozten> it's the bridge into style
[07:40] <ozten> but, you must be marking it with the gaudi class attribute for a reason
[07:41] <ozten> say all the ecommerce links in the page
[07:41] <ozten> are more important to the website
[07:41] <ozten> this captures that piece of information
[07:41] <ozten> so it's still content and structure
[07:41] <ozten> yes, then the visual design
[07:41] <ozten> goes into CSS
[07:41] <ozten> A screen reader won't know what to do with class="gaudi", unless you attach some accessability hooks
[07:42] <ozten> but it will know how to read the paragraph and say that there is a link
[07:43] <ozten> Another set of properties we can play with is width and height
[07:43] <ozten> height is buggy across browsers and not as useful as width, sadly
[07:44] <ozten> Once we've set the width, this gives us a chance to tell the browser how to draw the contents of an element
[07:44] <ozten> what if an element wants to be 500px wide
[07:44] <ozten> and we set it's width to 200px?
[07:44] <ozten> It will want to over flow the area
[07:45] <ozten> so another CSS property to play with is
[07:45] <ozten> p { overflow: scroll }
[07:45] <ozten> this can also have the value hidden
[07:46] <ozten> These aspects are what the creators of CSS call "the CSS box model"
[07:46] <ozten> This is a very technical view of design
[07:46] <ozten> but if you get your head into it, it can be helpful for understanding why the browser paints your page the way it does
[07:47] <ozten> CSS treats HTML tags in 2 ways
[07:47] <ozten> It sees block elements and inline elements
[07:47] <ozten> Remember our first assignment and how the page was a long scroll?
[07:48] <ozten> Some elements were put onto a new line each time you used them
[07:48] <ozten> The <p> tag for example
[07:48] <ozten> other elements were used inplace from left to right
[07:48] <ozten> like the <a> tag
[07:48] <ozten> and the <img> tag
[07:49] <ozten> So block elements are layed out top to bottom one after another
[07:49] <ozten> and inline elements are layed out left to right one after another
[07:49] <ozten> You can think of it like the old woodblock printing presses
[07:49] <Diedie> what are block elements and inline elements? block means text? and the inline means the codes?
[07:49] <Diedie> oh
[07:49] <Diedie> sorry
[07:49] <Diedie> slow typer
[07:50] <ozten> The bottom of http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/ has a table that shows
[07:50] <ozten> which elements are block and which are inline
[07:50] <ozten> *you do not* have to memorize this
[07:50] <ozten> to make beutiful designs
[07:50] <ozten> but check it out for trying to understand this very technical view of design elements
[07:51] <ozten> Diedie a <p> and a <a> tag are both text
[07:51] <ozten> but one is block and the other is inline
[07:51] <ozten> this is one of the most difficult topics in CSS to grok
[07:52] <ozten> and it is the basis for the next 3 weeks
[07:52] <ozten> don't stress if you don't completely understand it
[07:52] <Diedie> as long as we know how to write <p> and <a>, why do we have to tell the difference?
[07:52] <ozten> it takes a lot of practise
[07:52] <ozten> you will get an intuitive feel for it
[07:52] <gonediscin> what is grok
[07:52] <ozten> grok is understand
[07:52] <ozten> hacker talk
[07:52] <ozten> sorry
[07:52] <@tapesofwrath> css affects block and inline elements differently, diedie
[07:53] <ozten> these are your paints and brushes, so you'll want to predict how they'll work
[07:53] <Diedie> what are the difference?
[07:53] <ozten> If you use two paragraph tags
[07:53] <gonediscin> ok cool now i grok
[07:53] <ozten> like in our earlier example yellow, blue, yellow
[07:53] <ozten> and you want them all to line up horizontally
[07:54] <ozten> if you don't remember that they are block
[07:54] <ozten> you'll be frustrated to see that they are lined up vertically
[07:54] <ozten> because block elements are top to bottom
[07:54] <ozten> it's like adding blue to orange
[07:54] <ozten> and getting frustrated that it's brown
[07:54] <ozten> WTF?
[07:55] <ozten> once you memorize the color wheel or get an intuitive sense for color theory
[07:55] <ozten> you'll be much faster at using the tools
[07:55] <ozten> 5 minutes left, let's cover float
[07:55] <ozten> so how do we line up these paragraphs?
[07:56] <ozten> http://jsfiddle.net/GegKJ/3/
[07:56] <ozten> Move the slider to give the three paragrpahs lots of space
[07:56] <ozten> in the lower right window pane
[07:56] <ozten> does everyone see 3 paragraphs layed out horizontally?
[07:57] <ozten> I added p {  float: left; }
[07:57] <ozten> When we float a block element
[07:57] <ozten> we tell the browser, don't paint this top to bottom
[07:57] <ozten> paint it like an inline element
[07:58] <ozten> Another tool you'll need is the css property clear
[07:58] <ozten> http://jsfiddle.net/GegKJ/4/ - this uses .breath { clear; left; }
[07:59] <ozten> clear means - reset after anything that is floated to the left
[07:59] <ozten> so our "breath" paragraph gets floated on a new line after the first <p>
[08:00] <ozten> float and clear are the fundamental buliding blocks of composition
[08:00] <ozten> aka layout
[08:00] <ozten> You should play with them a lot this week
[08:00] <ozten> it's frustrating, but worth while to understand the capabilities and limitations of float and clear
[08:01] <ozten> any questions on this week's new CSS properties?
[08:01] <gonediscin_> no
[08:01] <@tapesofwrath> nope
[08:01] <gonediscin_> I can't wait to get on it!
[08:02] <Diedie> i will need to digest more
[08:02] <gonediscin_> Ozten you rock, and thank you for another great class!
[08:02] <ozten> gonediscin: thanks
[08:02] <Diedie> shall we start a document to gather all the readings and tools for the class? so we don't have to go to each chat records to look for links, and we can also add to it after class if we find someting interesting
[08:02] <ozten> Diedie: of course, lots to take in
[08:03] <gonediscin_> I like that idea diedie
[08:03] <gobi_> guys we used a video call two days back on another course
[08:03] <Diedie> :) thank you for your patience! :)
[08:03] <ozten> great idea, why don't you create a new wiki page
[08:03] <gobi_> is it possible we also follow te
[08:03] <Diedie> sure. and we can also draw key notes from the class and sum up what we learn
[08:03] <ozten> gobi: How many people and what different countries?
[08:04] <ozten> I haven't been on a successful call yet
[08:04] <gobi_> atmost 10 -11
[08:04] <ozten> We've tried Skype and a couple other technologies
[08:04] <gonediscin_> I have had bad experiences with video calls with P2PU. I like this class the most because of the chat records
[08:04] <ozten> and they mostly where a time sync
[08:04] <@tapesofwrath> yeah i agree
[08:04] <ozten> sink
[08:04] <Diedie> it seems video chats create lots of problems because people keep getting kicked out, and also it will be hard to just say the codes without typing them
[08:04] <Diedie> but then it will be great to meet you  guys sort of
[08:05] <ozten> gobi: maybe for the last class, we can all record some video before hand to say hello/goodbye to the clas
[08:05] <ozten> class
[08:05] <gonediscin_> I would show up for the video meeting, and think I would like it. I got ample bandwidth and good hardware to do it successfully from my end
[08:06] <ozten> upload beforehand
[08:06] <gobi_> yep
[08:06] <ozten> (dailymotion, youtube, or gasp... your own website with WebM and the <video> tag)
[08:06] <Diedie> or we can create a 5 min video break for social purposes
[08:06] <gonediscin_> sounds great ozten, maybe we can use that video and learn about HTML5s video tag and how to use it
[08:06] <ozten> Ya, it's much easier that I thought it would be
[08:07] <ozten> especially with the Miro video converter
[08:07] <Diedie> er...it will be kind of sad that i only get to see your face until the last class
[08:07] <gonediscin_> is miro GNU?
[08:07] <ozten> Might be a good thing ;/
[08:07] <gonediscin_> lol
[08:07] <Diedie> :)
[08:08] <ozten> Miro is licensed under the GPL
[08:08] <ozten> they are their own project
[08:08] <gonediscin_> cool! I will try that out today. Moving away from Adobe more and more everyday!
[08:08] <ozten> It's based on Mozilla technologies
[08:09] <ozten> If you've never tried the Miro video player, you should
[08:09] <ozten> Okay, thanks everybody. Great class and a challanging topic
[08:09] <Diedie> what open software would you suggest for making web pages?
[08:09] <ozten> work hard this week playing with margin, padding, border, float, width
[08:09] <gonediscin_> coffeecup?
[08:09] <Diedie> Thanks! will ask in forum later
[08:10] <gonediscin_> Thank you Ozten!
[08:10] <gobi_> bye guys
[08:10] <ozten> There will be a Week 5 assignment, and also a long term assignment due at the end of class
[08:10] <ozten> bye
[08:10] <Diedie> thanks gonediscin!
[08:10] <Diedie> bye
[08:10] <gonediscin_> diedie, I don't think coffeecup is open sourced, but you can get it free. It is a WYSIWYG what you see is what you get
[08:10] <ozten> details will be in the Assignment page later today

Wed Sept 29th

(06:57:57 AM) ozten: Hi Bodong
(06:57:57 AM) ozten: Hi donediscin
(06:58:36 AM) tapesofwrath [ae8c5a05@gateway/web/freenode/ip.174.140.90.5] entered the room.
(06:59:01 AM) Bodong: Hi ozten!
(06:59:25 AM) Bodong: hi everyone~
(06:59:54 AM) gonediscin: Hi all
(07:01:01 AM) gonediscin: Nice sites Bodong and tapesofwrath
(07:01:20 AM) ozten: Hi tapesofwrath, I got a good chuckle out of your writing
(07:02:27 AM) ozten: gonediscin: great domain name, good idea of a learning space
(07:02:30 AM) tapesofwrath: haha, good.
(07:03:00 AM) Bodong: thanks gonediscin
(07:03:48 AM) ozten: Bodong: I'm sad you didn't get drunk a lot in college ;/
(07:04:26 AM) Bodong: haha
(07:04:48 AM) Diedie [ade6a16a@gateway/web/freenode/ip.173.230.161.106] entered the room.
(07:05:40 AM) Diedie: Good morning!
(07:06:01 AM) ozten: Hi Diedie
(07:07:05 AM) ozten: Okay, let's get started today
(07:07:14 AM) ozten: You all did very well on the assignment for week 2
(07:07:31 AM) ozten: Was it hard? What did you think about while you were working with HTML?
(07:08:21 AM) gonediscin: I thought I wish that I knew CSS better
(07:08:55 AM) ozten: Being designers, I know you want to get to he good part first :)
(07:09:22 AM) ozten: We will start in on CSS this week
(07:09:41 AM) gonediscin: cool!
(07:09:45 AM) Diedie: :) it was a fun start. i am making it very simple and looking forward to building it up.
(07:09:54 AM) ozten: It's interesting how a web page without style is just a long scroll of boring text, right?
(07:10:02 AM) gonediscin: right
(07:10:07 AM) ozten: This is what the web looked like for many years
(07:11:07 AM) ozten: It started out as a way for scientists to share data and ideas at CERN http://public.web.cern.ch/public/en/about/web-en.html
(07:11:26 AM) ozten: So design wasn't a priority
(07:11:42 AM) ozten: Diedie: that is a great approach
(07:11:52 AM) ozten: So html is a bit like taking vitamins
(07:12:05 AM) ozten: there is a lot of foundation that is actually really, really important
(07:12:12 AM) ozten: which we can then layer design onto
(07:12:47 AM) ozten: For visually impaired readers, the time you take to make good standards compliant HTML
(07:12:56 AM) ozten: will be huge for them
(07:13:13 AM) ozten: and all your rounded corners and great color schemes are irrelevant.
(07:13:24 AM) gobi [7ab7820a@gateway/web/freenode/ip.122.183.130.10] entered the room.
(07:13:33 AM) ozten: welcome gobi
(07:13:39 AM) ozten: In practice, you'll probably work with web developers
(07:13:58 AM) ozten: whom will be making sure you have tight, semantic HTML markup
(07:14:12 AM) gobi: hi everyone
(07:14:27 AM) ozten: Diedie: I noticed you had some layout aspects to your design
(07:14:31 AM) ozten: did anyone else notice?
(07:14:40 AM) ozten: Did anyone else check to see how they were made?
(07:14:46 AM) ozten: http://www.reganmian.net/shanxi-event.html
(07:15:36 AM) Diedie: i used table to lay out the pictures?
(07:15:54 AM) ozten: right
(07:16:22 AM) ozten: this is very creative, and a common technique before CSS layouts became widely available
(07:16:41 AM) gonediscin left the room (quit: Ping timeout: 252 seconds).
(07:17:00 AM) ozten: Bodong also has layout in his footer
(07:17:04 AM) ozten: did anyone notice that?
(07:17:11 AM) ozten: anyone try to see how it was made?
(07:17:59 AM) ozten: bueller.... bueller...
(07:18:23 AM) tapesofwrath: didn't.  but i now see that it's an unorder list.  which would be the preferred way
(07:18:37 AM) tapesofwrath: *unordered
(07:19:03 AM) ozten: But why isn't "I'm reading" down below the Contact Info area?
(07:19:13 AM) ozten: crazy pants!
(07:19:23 AM) gonediscin [614ee9af@gateway/web/freenode/ip.97.78.233.175] entered the room.
(07:19:33 AM) Diedie: true
(07:19:49 AM) gonediscin: sorry for leaving got kicked off the internet at school
(07:19:56 AM) ozten: http://individual.utoronto.ca/bodongchen/about.html
(07:20:00 AM) Bodong: they're in different divs?
(07:20:26 AM) ozten: I think there is some CSS crazy business, because divs would just show up one after another in a big long scroll
(07:20:47 AM) ozten: And lastly did anyone notice anything about tapesofwrath's design?
(07:20:48 AM) ozten: http://tapes.dev3.webenabled.net/
(07:21:16 AM) ozten: How about "Hi, Im tapesofwrath."
(07:21:19 AM) gonediscin: I noticed it used js
(07:21:31 AM) ozten: You can select it, it's not an image
(07:21:36 AM) ozten: but it's a unique font
(07:21:45 AM) ozten: not a standard one that comes with the web browser
(07:22:29 AM) ozten: gonediscin: interesting, which parts made you think js?
(07:23:09 AM) gonediscin: because of what he wrote and when i went to the source code,
(07:23:19 AM) ozten: was it the links off of http://tapes.dev3.webenabled.net/canvas.html ?
(07:23:32 AM) Bodong: i think the definition of this style is in its css.
(07:23:49 AM) ozten: Bodong: yes, there is quite a bit of CSS in this page
(07:24:04 AM) ozten: so it's able to have an interesting visual layout
(07:24:15 AM) ozten: even though the content is very similar to the other pages
(07:24:38 AM) ozten: The big arrow and speakers...WTF? How does that work!
(07:24:53 AM) ozten: We'll learn during this course
(07:25:05 AM) ozten: there is lots of advance techniques here, really cool stuff
(07:25:37 AM) ozten: One thing that will be really helpful for everyone is if we discuss and evaluate each others work using the forums
(07:25:44 AM) ozten: Did you guys have enough time to do that?
(07:26:03 AM) ozten: Should we make the homework due sooner, to give everyone time to review everyone else's work?
(07:26:52 AM) ozten: We can talk in a forum thread after class too
(07:27:07 AM) ozten: okay did anyone run into any issues with their HTML not acting right?
(07:27:15 AM) ozten: http://ozten.com/designers_tackling_the_web/danger_mouse.html
(07:27:18 AM) ozten: http://ozten.com/designers_tackling_the_web/danger_mouse_broke.html
(07:27:19 AM) gonediscin: I think the due dates are good.
(07:27:34 AM) ozten: These two pages are identical, except for 3 characters
(07:27:48 AM) ozten: It can be frustrating to track down errors and issues
(07:27:51 AM) ozten: bugs
(07:28:02 AM) ozten: It can be one missing "
(07:28:10 AM) ozten: or forgetting to close a tag
(07:28:41 AM) ozten: This article has several links to "validation services"
(07:28:41 AM) ozten: http://dev.opera.com/articles/view/24-validating-your-html
(07:29:11 AM) ozten: bad link http://dev.opera.com/articles/view/24-validating-your-html/
(07:29:54 AM) Diedie: what is the difference between "<a href="/wiki/Parody">" and "<a href="http://en.wiktionary.org/wiki/rakish>"
(07:30:08 AM) ozten: So tools like http://validator.w3.org/ will show you errors in your markup
(07:30:15 AM) ozten: Diedie: good question
(07:30:20 AM) ozten: the first one is a relative link
(07:30:27 AM) ozten: and the second one is an absolute link
(07:30:44 AM) ozten: When you use relative links, the content has to be on the same website
(07:31:06 AM) Diedie: some of your urls are not working.
(07:31:21 AM) Diedie: i see
(07:31:24 AM) ozten: "/wiki/Parody" means, start at the root of the website and then go into wiki and show us Parody
(07:31:35 AM) ozten: That is just a snippet of HTML I grabbed from wikipedia
(07:31:48 AM) ozten: to show how missing closing tags can break the whole page
(07:32:00 AM) ozten: sorry the links don't work
(07:32:30 AM) ozten: So this week we'll start delving into CSS
(07:33:00 AM) ozten: This weeks reading is http://dev.opera.com/articles/view/27-css-basics/
(07:33:19 AM) ozten: What are some of the basic aspects of design?
(07:33:55 AM) gonediscin left the room (quit: Ping timeout: 252 seconds).
(07:35:02 AM) ozten: color perhaps?
(07:35:12 AM) Diedie: structure, colors, graphics, navigation
(07:35:27 AM) ozten: ya
(07:35:35 AM) ozten: shape, balance
(07:35:45 AM) tapesofwrath: ...typography, spacing (white space)
(07:35:48 AM) gobi: appeal
(07:35:57 AM) ozten: navigation isn't a core element of design
(07:36:05 AM) tapesofwrath: cats?
(07:36:10 AM) ozten: Oil Paintings and Frescos had crappy navigation
(07:36:24 AM) ozten: yep
(07:36:34 AM) ozten: direction, composition
(07:36:48 AM) ozten: value / contrast
(07:36:50 AM) tapesofwrath: contrast
(07:36:56 AM) tapesofwrath: too slow
(07:36:59 AM) Diedie: (tapesofwrath: what are cats? thanks!)
(07:37:12 AM) ozten: right so pretty much everything you don't have with basic HTML :)
(07:37:30 AM) ozten: CSS is another language we'll use on top of HTML
(07:37:36 AM) ozten: to add visual style to the page
(07:38:08 AM) ozten: Inside of the head element, we'll add a link to our css file
(07:38:09 AM) ozten: <head>
(07:38:09 AM) ozten:       <link rel="stylesheet" type="text/css" href="theme.css" />
(07:38:09 AM) ozten:     </head>
(07:38:19 AM) ozten: you can call this theme.css
(07:38:19 AM) gonediscin [d0365533@gateway/web/freenode/ip.208.54.85.51] entered the room.
(07:38:21 AM) ozten: or screen.css
(07:38:25 AM) ozten: or stylo.css
(07:38:29 AM) ozten: it doesn't matter
(07:38:49 AM) ozten: and keep in mind that "theme.css" is a relative url
(07:38:59 AM) gobi left the room (quit: Quit: Page closed).
(07:39:03 AM) ozten: so it would have to be in the same folder as your html page
(07:39:06 AM) gonediscin: sorry keep getting kicked off the network on my phone now
(07:39:24 AM) gob [7ab7820a@gateway/web/freenode/ip.122.183.130.10] entered the room.
(07:39:30 AM) ozten: gonediscin: no worries, and you can get the transcript after class for any missing bits
(07:39:43 AM) ozten: So let's tackle color
(07:39:49 AM) ozten: which has a huge impact on a page
(07:39:53 AM) gonediscin: cool thanks!
(07:40:22 AM) ozten: The CSS "property" to control color is called "color"
(07:40:45 AM) ozten: the most basic way to set it is with a color hex code
(07:40:53 AM) ozten: #000 is black
(07:40:56 AM) ozten: #FFF is white
(07:41:05 AM) ozten: these can also be 6 digit hex codes
(07:41:13 AM) ozten: #000000 is also black
(07:41:32 AM) ozten: okay, so where do we put these properties and value?
(07:41:40 AM) ozten: in a new text file named theme.css
(07:42:15 AM) ozten: You use CSS "selectors" to tell the web browser which HTML elements you want to change the color of
(07:42:24 AM) ozten: body {
(07:42:28 AM) ozten:   color: #000;
(07:42:29 AM) ozten: }
(07:42:49 AM) ozten: This would make all the foreground color of a webpage black
(07:43:09 AM) ozten: You can get these hexcodes from an image editing program (Gimp)
(07:43:14 AM) ozten: or off the web
(07:43:52 AM) ozten: http://html-color-codes.com/ - Old school VisiBone has been around forever
(07:44:08 AM) ozten: So that is the foreground, what about the background color
(07:44:30 AM) ozten: It might shock you to learn that the css property is ... "background-color"
(07:44:34 AM) tapesofwrath: http://colorschemedesigner.com/
(07:44:37 AM) ozten: body {
(07:44:57 AM) ozten:     color: #0F0;
(07:45:07 AM) ozten:     background-color: #000;
(07:45:07 AM) ozten: }
(07:45:26 AM) ozten: This will make you page look like the matrix.
(07:46:17 AM) tapesofwrath: font-family: monospace; ?
(07:46:42 AM) ozten: heh
(07:47:02 AM) ozten: To see how these are put together, let's view source on tapesofwrath's homework
(07:47:03 AM) ozten: http://tapes.dev3.webenabled.net/
(07:47:25 AM) ozten: What is his css file named?
(07:48:04 AM) Diedie:  "style.css"
(07:48:21 AM) ozten: Diedie: right
(07:48:31 AM) ozten: since we were on http://tapes.dev3.webenabled.net/ and it's a relative filename
(07:48:36 AM) ozten: we can go to http://tapes.dev3.webenabled.net/style.css
(07:48:46 AM) ozten: Skip the first few lines
(07:48:56 AM) ozten: and go down to body {
(07:49:39 AM) ozten: Does anyone have any questions on how to link a CSS file to their document
(07:49:42 AM) ozten: ?
(07:50:28 AM) Diedie: <link rel="stylesheet" href="style.css" />
(07:50:30 AM) Diedie: ?
(07:50:39 AM) ozten: right, okay
(07:50:58 AM) ozten: so another really useful thing to be able to control is how text looks on the page
(07:51:07 AM) Diedie: so if we design a few different sites at the same time, we need to have different css file names then?/
(07:51:29 AM) ozten: Diedie: You can use 1 CSS file across multiple sites (or pages)
(07:51:48 AM) ozten: You would use an absolute url in the href attribute
(07:52:10 AM) ozten: <link rel="stylesheet" href="http://example.com/style.css" />
(07:52:29 AM) ozten: font-weight is a fun CSS property
(07:52:48 AM) ozten: You can set the value to bold
(07:52:57 AM) ozten: font-weight: bold
(07:53:11 AM) ozten: font-family controls the typeface
(07:53:52 AM) ozten: font-family: "Arial", sans-serif
(07:54:01 AM) ozten: Don't throw tomatoes for Arial
(07:54:27 AM) ozten: notice that this value can have multiple values, that is where there is a ", " and two values
(07:54:57 AM) ozten: Some CSS properties expect different kinds of values
(07:55:41 AM) ozten: font-style allows you to change to italic, etc
(07:55:59 AM) ozten: Going back to how we selected the HTML element
(07:56:16 AM) ozten: by doing these styles to "body", we've setup the whole page with the same style
(07:56:32 AM) ozten: you can actually add more "CSS selectors" after the first one
(07:56:49 AM) ozten: if you wanted all links to be bold, you could do
(07:56:53 AM) ozten: a {
(07:56:58 AM) ozten:     font-weight: bold;
(07:56:59 AM) ozten: }
(07:57:16 AM) ozten: In tapesofwrath we see lots of selectors
(07:57:36 AM) ozten: h1 to pick the h1 elements in the document
(07:57:54 AM) ozten: p.postscript {font-size:1.5em;}
(07:58:01 AM) ozten: is an interesting CSS Rule
(07:58:34 AM) ozten: it says "any paragraph HTML tag with a class attribute of postscript should have a font size of 1.5em"
(07:58:45 AM) ozten: The postscript is the juicy part
(07:59:11 AM) ozten: Jumping back to the structure of the HTML we see
(07:59:13 AM) tapesofwrath: haha, i was having trouble thinking of a semantic name for that
(07:59:13 AM) ozten: <p class="postscript">And, p.s., don't tell her but I'm still hoping to see her friend on the side.</p>
(07:59:29 AM) ozten: So a class attribute works with CSS, but lives in the HTML
(07:59:45 AM) ozten: it's a way to apply styles to specific groups of elements
(08:00:18 AM) ozten: Do you see in the page how that message is smaller?
(08:01:22 AM) ozten: padding is another CSS property
(08:01:43 AM) ozten: One value you can use is pixels
(08:01:50 AM) ozten: so
(08:01:59 AM) ozten: a { padding: 25px }
(08:02:10 AM) ozten: oops forgot the semi-colon
(08:02:23 AM) ozten: will give all your links a big area around them
(08:02:28 AM) ozten: There are lots of CSS properties you can discover, but lets start with these basics this week
(08:02:49 AM) ozten: We are out of time, does anyone have any questions about basic CSS?
(08:04:01 AM) ozten: Bodong, Diedie, gob, gonediscin, tapesofwrath: Thanks for a great week! I'll post the assignment soon.

Wed Sept 22nd

(06:58:24 AM) gonediscin: Hey all! nice to see everyone again
(06:58:39 AM) ozten: hi gonediscin
(06:58:45 AM) ozten: hi gobi
(06:58:49 AM) gobi: hi
(06:58:52 AM) ozten: welcome tapesofwrath
(06:59:17 AM) tapesofwrath: hey, we were starting to think that everybody forgot :p
(06:59:32 AM) gonediscin: :( hopefully not
(06:59:36 AM) gobi: a mail to everyone would have been good
(07:00:04 AM) gobi: i was expecting a mail for the past few days
(07:00:09 AM) ozten: gonediscin, gobi: okay I'll send a reminder email
(07:00:31 AM) ozten: feel free to send out a forum post or email when your concerned
(07:01:02 AM) Bodong [~chatzilla@142.150.102.254] entered the room.
(07:01:09 AM) gobi: yeah
(07:01:12 AM) gobi: sure
(07:01:12 AM) ozten: welcome bodong
(07:01:26 AM) Diedie [ade6a16a@gateway/web/freenode/ip.173.230.161.106] entered the room.
(07:01:34 AM) Bodong: thanks ozten!
(07:01:44 AM) ozten: welcome diedie
(07:02:07 AM) Diedie: morning Ozten!
(07:02:22 AM) Diedie: morning everyone!
(07:02:27 AM) Bodong: I am trying Chatzilla. it looks pretty well.
(07:02:32 AM) Bodong: morning!
(07:02:55 AM) ozten: bodong: good to hear
(07:03:02 AM) ozten: I'm trying pidgin today
(07:03:28 AM) gonediscin: Is there a good place people found to learn how to use all of bugzilla's features
(07:04:48 AM) ozten: gonediscin: http://blog.johnath.com/2010/02/04/bugzilla-for-humans/ is a great intro
(07:05:00 AM) gonediscin: cool thanks ozten
(07:06:06 AM) ozten: I think we should get started, and let others join as they come
(07:06:09 AM) tapesofwrath: bugzilla or firebug?
(07:06:10 AM) ozten: what do you all think?
(07:06:49 AM) gonediscin: sounds great to me ozten
(07:06:50 AM) gobi: i think firebug is better
(07:06:59 AM) Bodong: sounds great.
(07:07:10 AM) ozten: okay, so how was setting up hosting for everyone?
(07:07:20 AM) ozten: It can be a bit confusing
(07:07:28 AM) gonediscin: thanks gobi I will have to check firebug also
(07:08:07 AM) gonediscin: Setting up the host was easy for me.
(07:08:20 AM) ozten: Diedie which hosting provider did you choose?
(07:08:30 AM) Diedie: i used my old one in 1and1
(07:08:32 AM) ozten: gonediscin: good to hear
(07:08:35 AM) ozten: ah
(07:08:37 AM) ozten: cool
(07:08:54 AM) gobi: agree with ozten...had to subscribe with free providers and waiting for the approval...but finally got one
(07:09:07 AM) ozten: gobi: excellent
(07:10:08 AM) Bodong: i'm using a free one my university provides. but can only support static pages. will think about getting another one.
(07:10:23 AM) ozten: Bodong: that is perfect for this class
(07:10:25 AM) tapesofwrath: no real problems here.  generally familiar with setting up on a shared host.  i tried out that webenabled host that people recommended
(07:10:33 AM) ozten: we'll only do static pages 
(07:10:49 AM) tapesofwrath: it was actually sort of confusing compared to a standard hosting panel, but i made out fine
(07:11:00 AM) Bodong: ozten: good to know :)
(07:11:11 AM) ozten: How about an FTP client
(07:11:18 AM) ozten: did everyone install one? Which one?
(07:11:26 AM) gobi: filezilla ...
(07:11:31 AM) tapesofwrath: already using filezilla
(07:11:46 AM) Bodong: me too
(07:12:13 AM) Diedie: i use cyberduck 
(07:12:25 AM) Diedie: but i should catch up with you guys and use filezilla
(07:12:37 AM) gobi: i found filezilla very easy...i uploaded a file without any reading on how to do it.....the whole interface itself is like self explanatory
(07:12:39 AM) ozten: cyberduck is fine
(07:13:01 AM) gonediscin: filezilla
(07:13:30 AM) gonediscin: My hosting provider came in handy with a tutorial on how to use filezilla
(07:13:32 AM) ozten: like gobi, did anyone else try connecting with their FTP username/password to their FTP hostname?
(07:13:47 AM) Diedie: but i have an old mac with 10.4 and filezilla said it was too old 
(07:13:51 AM) gonediscin: yes I used the IP, username/pw
(07:14:03 AM) ozten: great
(07:15:10 AM) ozten: For the first time, your homework this week will be "turned in" by "ftping" it to your personal website
(07:15:21 AM) Diedie: sure
(07:15:26 AM) Diedie: can i do it to my work site also? 
(07:15:43 AM) Diedie: so that i can conbine my learning with work? 
(07:15:54 AM) ozten: Diedie: sure, you can use any host
(07:16:04 AM) Diedie: thanks Ozten!
(07:16:16 AM) ozten: But I get a 20% commission 
(07:16:39 AM) ozten: so a confusing aspect of FTP is understanding file system paths
(07:16:46 AM) ozten: you are using your local computer
(07:16:53 AM) ozten: it has a hard drive that has files
(07:17:06 AM) ozten: when you use Windows File Explorer or Mac's Finder
(07:17:15 AM) ozten: you are navigating around folders and files
(07:17:33 AM) ozten: If you go from Documents to P2PU to homework
(07:17:54 AM) ozten: you are actually in the directory Documents/P2PU/homework
(07:18:18 AM) ozten: the slashes are an Internet conversion (from the unix tradition)
(07:18:33 AM) ozten: Documents/P2PU/homework is a "relative path"
(07:18:46 AM) ozten: /Users/ozten/Documents/P2PU/homework is an "absolute path"
(07:18:56 AM) ozten: does that make sense?
(07:19:26 AM) tapesofwrath: yep
(07:19:29 AM) gonediscin: yeah
(07:19:33 AM) gobi:  yes
(07:19:37 AM) Diedie: en hm
(07:19:44 AM) Bodong: yes
(07:19:59 AM) ozten: so your FTP host is a remote computer
(07:20:08 AM) ozten: it's the same computer that your web server uses
(07:20:15 AM) gonediscin: absolute path is exactly where it is, a relative path is part of the path, but depends on things such as who the user is?
(07:20:41 AM) ozten: gonediscin: ya
(07:20:47 AM) ozten: or if we are in /home/ozten
(07:21:04 AM) ozten: then our location changes what a relative path means
(07:21:21 AM) gonediscin: cool thanks
(07:21:26 AM) ozten: or http://example.com/ plus the relative path 'home/index.html'
(07:21:46 AM) ozten: so when you connect with FTP
(07:21:59 AM) ozten: most clients show you your local computer and the remote computer
(07:22:19 AM) ozten: they are both file systems, but probably fuglier than Windows File Explorer or Mac Finder
(07:22:52 AM) ozten: just like your local computer, you can create folders on the remote computer
(07:23:02 AM) ozten: and you can "change directories" or folders
(07:23:06 AM) ozten: to navigate around
(07:23:15 AM) ozten: it's just a little slower, since it's a remote computer
(07:23:24 AM) ozten: when you upload files
(07:23:33 AM) ozten: you want to think about what remote folder your in
(07:23:44 AM) ozten: so if i connect with FTP
(07:23:50 AM) ozten: and change to class
(07:23:56 AM) ozten: and then make a folder week2
(07:24:05 AM) ozten: and then upload an image
(07:24:12 AM) ozten: howdy.jpg
(07:24:35 AM) ozten: I've just created the relative path class/week2/howdy.jpg
(07:25:03 AM) ozten: this probably maps to http://mysite/class/week2/howdy.jpg
(07:25:34 AM) ozten: for the url http://mysite.net/ the last '/' is called the root
(07:26:00 AM) ozten: the root is often the same directory that your FTP client starts you in
(07:26:15 AM) gobi left the room (quit: Quit: Page closed).
(07:26:17 AM) ozten: It's easy to test this by uploading an image or a text file
(07:26:23 AM) ozten: and then going to your website
(07:26:33 AM) ozten: if you see 'public_html' or something like that 
(07:26:38 AM) ozten: in your FTP root
(07:26:47 AM) gobi [7ab7820a@gateway/web/freenode/ip.122.183.130.10] entered the room.
(07:26:49 AM) tapesofwrath: or 'www' sometimes
(07:27:00 AM) ozten: it means that the web hosting provider has setup the webroot in a different folder
(07:27:12 AM) ozten: so you'll have to ftp into public_html/howdy.jpg
(07:27:26 AM) ozten: for the web root to be http://mysite.com/howdy.jpg
(07:27:48 AM) ozten: tapesofwrath: good call, the hostname of websites often have a www
(07:28:10 AM) ozten: Does the idea of mapping your local file system to a remote FTP and web file system make sense?
(07:28:32 AM) tapesofwrath: just for clarity, i meant the public_html folder.  not a www subdomain
(07:28:46 AM) gonediscin: yes it does. I had a little problem the other day, because I uploaded to the root and no to "public html"
(07:29:05 AM) ozten: heh, my bad
(07:29:22 AM) ozten: tapesofwrath is correct, a hosting provider can make any folder the Web root
(07:29:33 AM) ozten: common ones are 'www', 'public', 'public_html'
(07:29:49 AM) gonediscin: but got it figured out quickly. Also bluehost only allows my primary domain to be in the root of public html also. I had to make another folder within public for my other domain to work right
(07:30:16 AM) ozten: This is one of those thing that is technical and boring, but once you learn it, it makes life much less painful
(07:30:23 AM) ozten: other tips:
(07:30:37 AM) ozten: keep weird characters and spaces out of your filenames
(07:30:47 AM) ozten: use '_' when you want to use a space
(07:31:09 AM) ozten: images/lol catz.jpg will be a frustrating filename
(07:31:17 AM) ozten: images/lol_catz.jpg will be much funner
(07:31:41 AM) ozten: make a directory on your hard drive that "mirrors" the structure of your remote website
(07:31:48 AM) ozten: then you can ftp all the files in one go
(07:31:51 AM) Diedie: why not use "-"
(07:32:04 AM) Bodong: i have a question: does it matter whether the filename and its extension of a webpage is capital or not?
(07:32:08 AM) ozten: Diedie images/lol-catz.jpg is a file way to go
(07:32:29 AM) Diedie: what is "a file way to go"?
(07:32:38 AM) ozten: a fine way to go :)
(07:32:49 AM) ozten: Bodong: great question, for all popular web servers, urls are case sensitive
(07:32:53 AM) ozten: so lolCatz.jpg
(07:33:02 AM) ozten: is a different file than lolcatz.jpg
(07:33:18 AM) Diedie: good to know
(07:33:30 AM) gonediscin: that is just a linux servers right?
(07:33:37 AM) ozten: you will get a file not found (404 error) if you spell the file name wrong
(07:33:48 AM) ozten: gonediscin: are there any other kinds ;/
(07:34:02 AM) ozten: P2PU is all about free software
(07:34:03 AM) Bodong: I see. that's why it did not work when I firstly upload a file named "index.HTML." thanks ozten!
(07:34:13 AM) gobi: should the characters that can be used in a file name should be same ones as that allowed in a URL
(07:34:15 AM) ozten: So i'm ignoring Microsoft's IIS server
(07:34:19 AM) ozten: LOL
(07:34:22 AM) gonediscin: lol
(07:34:37 AM) ozten: gobi: yes
(07:34:47 AM) ozten: does anyone else have any pro-tips?
(07:35:11 AM) tapesofwrath: ...remember that image links in external css files are relative to the css file, not the html file
(07:35:21 AM) ozten: Due to work emergencies and a bad Internet connection, I didn't see anyone during my office hours
(07:35:29 AM) gonediscin: so for URL, the only thing should be letters, numbers, and _?
(07:35:31 AM) ozten: but this week I will be around to help with any FTP issues
(07:35:39 AM) tapesofwrath: that wasted about an hour of my life once, and a few hairs from my head
(07:35:58 AM) ozten: tapesofwrath: great tip, that will make more sense next week when we get to CSS
(07:36:37 AM) ozten: So let's move onto HTML
(07:36:56 AM) ozten: we took a sneak peak last week during our View Source Has A Posse portion of the class
(07:37:05 AM) ozten: What is HTML? http://dev.opera.com/articles/view/12-the-basics-of-html/
(07:37:17 AM) ozten: Html is the meat of the web
(07:37:39 AM) ozten: It's the "document" you see when you view a page
(07:37:56 AM) ozten: Go to https://blog.mozilla.com/webdev/ and view source
(07:38:16 AM) Diedie: the http://devfiles.myopera.com/articles/378/ link is not working
(07:38:18 AM) tapesofwrath: the opera link redirects to a 404 for me
(07:38:51 AM) ozten: yay web!
(07:38:54 AM) ozten: http://webcache.googleusercontent.com/search?q=cache:FVvQAx9Jl5QJ:dev.op...
(07:39:10 AM) ozten: while that site is down, we can read from the Google Cache
(07:39:25 AM) Diedie: awesome
(07:39:37 AM) Bodong: thanks google :D
(07:39:49 AM) ozten: Scroll down to "The structure of an HTML document"
(07:40:07 AM) ozten: you should read this whole page after class, but don't stress on reading it now
(07:40:42 AM) ozten: So we can see their html document is much like the one we see by viewing source on the Mozilla webdev blog
(07:41:00 AM) ozten: You can create HTML with any text editor
(07:41:12 AM) ozten: you save the files to your website folder on your local computer
(07:41:17 AM) ozten: with an extension of .html
(07:41:36 AM) ozten: .htm will work, if your using a computer from the 1980's or something
(07:41:58 AM) ozten: I'm guessing no one here is using an Atari 2600 to edit HTML
(07:42:13 AM) tapesofwrath: if you are, kudos!
(07:42:22 AM) ozten: There is a very simple language and and rythmn to HTML
(07:42:38 AM) ozten: You take your content and wrap it in "tags"
(07:42:45 AM) ozten: There are many HTML tags
(07:42:58 AM) ozten: Some examples '<p></p>'
(07:43:03 AM) ozten: p is a paragraph tag
(07:43:14 AM) ozten: '<p>Hello, World</p>'
(07:43:27 AM) ozten: Notice that a tag opens and closes
(07:43:35 AM) ozten: '<p>' is the opening
(07:43:40 AM) ozten: '</p>' is the closing
(07:43:50 AM) ozten: Almost all tags have this form
(07:44:04 AM) ozten: because you can put content inside them
(07:44:23 AM) ozten: A tag is an HTML element
(07:44:40 AM) ozten: A tag can have attributes
(07:44:53 AM) ozten: attributes are metadata about the tag
(07:45:27 AM) ozten: <p class='warning'>By using this website, you agree to give me your first born child</p>
(07:45:32 AM) ozten: this paragraph tag
(07:45:40 AM) ozten: has an attribute 'class'
(07:45:50 AM) ozten: we will learn next week that this is part of CSS
(07:45:58 AM) ozten: but we are saying that this paragraph is a warning
(07:46:13 AM) ozten: Some tags don't have nested content
(07:46:15 AM) Diedie: what does warning mean here?
(07:46:45 AM) ozten: warning is a way to mark this tag as being a warning message for the reader
(07:46:57 AM) ozten: and maybe we use CSS to add a visual style with caution tape
(07:47:02 AM) ozten: to the background of this paragraph
(07:47:16 AM) Diedie: is it a title for the paragraph? 
(07:47:19 AM) ozten: the attribute name 'class' is part of the HTML standard
(07:47:25 AM) tapesofwrath: a class can be anything that you want to name it (besides starting with numbers i think?)
(07:47:34 AM) ozten: the attribute value 'warning' is something you can make up
(07:48:04 AM) Bodong: http://www.w3schools.com/tags/att_standard_class.asp this might be useful.
(07:48:07 AM) ozten: so far we have tag which are an HTML element and zero or more attributes
(07:48:15 AM) ozten: Bodong: thanks
(07:48:30 AM) Diedie: Thanks bodong
(07:48:32 AM) tapesofwrath: but it makes sense to name it something that's meaningful to the content (semantics)
(07:49:06 AM) ozten: the most basic HTML page has a doctype, an html section, a head section, and a body section
(07:49:13 AM) ozten: the head has some tags in it
(07:49:17 AM) ozten: and the body has some tags in it
(07:49:26 AM) ozten: Don't worry about the doctype
(07:49:38 AM) ozten: for this class, always use '<!DOCTYPE html> '
(07:49:54 AM) ozten: behold, this is the html5 doctype
(07:50:01 AM) ozten: html5 is the new hotness
(07:50:05 AM) tapesofwrath: sooo much easier to remember
(07:50:21 AM) ozten: that Firefox, chrome, Opera, and even IE 9 support
(07:50:45 AM) gonediscin: So W3c won't change that when HTML5 is "officially released"?
(07:50:58 AM) ozten: gonediscin: great question
(07:51:21 AM) ozten: I don't think this aspect of the W3C specification will change
(07:51:32 AM) ozten: does everyone know what the W3C is?
(07:51:45 AM) Diedie: not really 
(07:51:46 AM) ozten: they control the HTML standards
(07:51:49 AM) tapesofwrath: yep
(07:51:54 AM) gonediscin: cool, was wondering if I would eventually have to go back to all my pages and change it. Thanks
(07:51:55 AM) Bodong: an organization makes a bunch of standards.
(07:52:01 AM) ozten: It's a group of people from different communities like web browser vendors
(07:52:20 AM) ozten: that try to coordinate the evolution of web technologies
(07:52:58 AM) ozten: We've got 8 minutes left, so let's tackle some interesting tags
(07:53:05 AM) ozten: then your going to experiment this week
(07:53:24 AM) ozten: The "anchor" tag is basically a linking tag
(07:53:34 AM) ozten: <a href="http://google.com">Search</a>
(07:53:44 AM) ozten: The 'a' is the tag
(07:53:55 AM) ozten: href is an attribute, which is the destination of a link
(07:54:03 AM) ozten: and 'Search' is the blue underlined text 
(07:54:39 AM) ozten: <img src="http://example.com/lol_catz.jpg" width="300" height="300" alt="LOL Catz" />
(07:54:39 AM) Diedie: what makes it blue underlined?
(07:55:00 AM) ozten: Diedie: it's a standard style built into the web browser for links
(07:55:12 AM) ozten: This img tag puts images into your document
(07:55:16 AM) ozten: it has many attributes
(07:55:34 AM) gonediscin: diedie: I think that on the webpage you see search underlined in blue, but when you click on it, it will take you to google.com
(07:55:39 AM) ozten: you can use jpegs, pngs, and a few other types of images
(07:55:46 AM) ozten: for this class lets only use jpegs or pngs
(07:55:59 AM) Diedie: i see. thanks! sorry i need to refresh myself with all the web basics. i am amazed how much i forgot or i completely forgot. 
(07:56:17 AM) ozten: the alt attribute is an alternative description
(07:56:18 AM) gonediscin: I hate jargon, so don't feel bad diedie
(07:56:39 AM) ozten: So that a blind person will also get value out of your image
(07:56:56 AM) ozten: they're screen reader will say "LOL Catz"
(07:57:01 AM) Diedie: gonediscin: when i clicked the link, it went to an error actually. 
(07:57:21 AM) gonediscin: because it is a fake link ozten just made up
(07:57:30 AM) ozten: Diedie: this will make more sense as you play with HTML yourself this week
(07:57:32 AM) gonediscin: or as I learned last week "foo" link
(07:57:42 AM) Diedie: ha ha
(07:57:43 AM) tapesofwrath: Diedie, it's blue only because there is some javascript that auto-parses the link
(07:57:43 AM) ozten: gonediscin: yes! lol
(07:57:58 AM) ozten: So a browser has default styles
(07:58:10 AM) ozten: and then next week we'll learn how to override those style with CSS
(07:58:17 AM) ozten: a link doesn't have to be blue and underlined
(07:58:29 AM) ozten: but it is the default behavior for most web browsers
(07:58:49 AM) ozten: So when you work with HTML there is a very simple flow
(07:58:58 AM) ozten: create a text file in a text editor 
(07:59:06 AM) ozten: (not a Word document or any rich text)
(07:59:15 AM) ozten: save the file with a .html file extension
(07:59:25 AM) ozten: paste in the basic structure
(07:59:41 AM) ozten: (I'll give this too you in the assignment)
(07:59:48 AM) ozten: <!DOCTYPE html>
(07:59:51 AM) Diedie:  thanks!
(07:59:52 AM) ozten: <html>
(07:59:56 AM) ozten: <head>
(07:59:58 AM) ozten: </head>
(08:00:00 AM) ozten: <body>
(08:00:09 AM) ozten: <p>This is my playground</p>
(08:00:11 AM) ozten: </body>
(08:00:13 AM) ozten: </html>
(08:00:26 AM) ozten: then you'll take your web browser and go
(08:00:29 AM) ozten: File > Open
(08:00:38 AM) ozten: and pick your new file
(08:00:50 AM) ozten: this will open it, just like it opens other web pages on the internet
(08:01:00 AM) ozten: You can look at your work
(08:01:06 AM) ozten: then switch to the Text editor
(08:01:08 AM) ozten: add a link
(08:01:11 AM) ozten: save the file
(08:01:21 AM) ozten: switch to your web browser
(08:01:24 AM) ozten: click "Refresh"
(08:01:28 AM) ozten: this reloads the page
(08:01:32 AM) ozten: and you'll see your change
(08:01:50 AM) ozten: this edit > Save > refresh is something to get comfortable with
(08:02:04 AM) ozten: it is the rhythm of web development
(08:02:25 AM) ozten: Play around with different tags you find on the intenet
(08:02:32 AM) ozten: try "breaking" the page on purpose
(08:02:47 AM) ozten: <p I am a broken paragraph</p>
(08:02:54 AM) ozten: What does that do?
(08:02:57 AM) ozten: break it in other ways
(08:03:01 AM) ozten: what did that do?
(08:03:14 AM) ozten: some times the browser is smart enough to "repair" your mistake
(08:03:23 AM) ozten: other times it will mess up other parts of the page
(08:03:53 AM) ozten: Once you are finished, you then upload by FTPing your files up to your website
(08:03:53 AM) gonediscin: Organizing your source code is helpful too
(08:04:06 AM) ozten: This is how you'll turn in your homework
(08:04:15 AM) ozten: or collaborate and help each other
(08:04:18 AM) tapesofwrath: syntax highlighting also.
(08:04:22 AM) ozten: is to FTP and then post a link in the Forums
(08:04:26 AM) ozten: for others to review your work
(08:04:48 AM) gobi: w3schools.com is a great place for learning
(08:04:49 AM) ozten: I'll write up the details of the assignment
(08:04:51 AM) Bodong: remember the extension is not .HTML but .html, because some hosting service don't recognize the capital one :) I am using UltraEdit and it always ask me to use the capital one.
(08:04:52 AM) gonediscin: organize= keep it neat 
(08:05:15 AM) ozten: but basically I want you all to create a web page that tells us a story about yourself
(08:05:24 AM) ozten: include atleast 2 pictures
(08:05:33 AM) ozten: and atleast 1 link
(08:05:46 AM) ozten: You can using headings such as 
(08:05:53 AM) ozten: <h1>My Story</h1>
(08:06:09 AM) ozten: Does anyone have any questions?
(08:06:27 AM) Diedie: Thanks! Ozten, could you give some before class reading or explaination what you will cover next class, so i can be a bit more prepared for it. i am quite new in this subject.
(08:06:43 AM) gobi: ozten : as most of them dint turn up we can save the chat in a forum and send the links to everyone
(08:07:00 AM) ozten: gobi: Yes, I will add this to the Chat Record
(08:07:00 AM) Diedie: good call
(08:07:17 AM) ozten: Diedie: yes, I can give you links before class
(08:07:24 AM) Diedie: thanks!
(08:07:28 AM) ozten: for this week, read the Opera HTML tutorial
(08:07:54 AM) ozten: A good book is http://www.zeldman.com/dwws/
(08:08:01 AM) ozten: Designing with Web Standards
(08:08:07 AM) gonediscin: thank you!
(08:08:14 AM) Diedie: Thanks! 
(08:08:15 AM) ozten: but there is plenty of online content for learning
(08:08:23 AM) gobi: diedie: i suggest www.w3schools.com...u will learn by practise
(08:08:30 AM) ozten: When I was getting started, I learned everything from online tutorials
(08:08:31 AM) gobi: w3schools.com
(08:08:38 AM) gonediscin: that opera.dev.com was a great place to learn as well as w3schools.com comes in handy with the "try it yourself"
(08:08:41 AM) ozten: that was back when the web had like 4 pages total :|
(08:08:53 AM) Diedie: :) Ozten, we are suppsed all copyright free materials here. but good to have the book. will order it. 
(08:09:07 AM) Diedie: Thanks a lot!
(08:09:22 AM) ozten: Diedie: Agreed, there is more than enough free content
(08:09:23 AM) Diedie: Gobi: thanks for the link!
(08:10:10 AM) ozten: Thanks for your time guys and have fun in your html5 laboratories!

Wed Sept 15th

[07:02] == ozten [ad96c744@gateway/web/freenode/ip.173.150.199.68] has joined #p2pu-webcraft/designers-tackling-web
[07:02] <gonediscin> both, but discgolf all the time.
[07:02] <bodong> Hi Diedie, great to meet you here in the class!! :D
[07:02] <Diedie> Hi Ninamaria!
[07:02] <ninamaria> hello!!!!!
[07:03] <Diedie> Yeah and we can meet to discuss what we learn. yay
[07:03] <ozten> hi everyone
[07:03] <gonediscin> I am the webmaster for tampabaydiscsportsclub.com and I want to make that site better. That is another reason why I signed up for P2PU
[07:03] <Diedie> where are you guys geographically?
[07:03] <bodong> for sure.
[07:03] <ninamaria> hey austin!
[07:03] <gonediscin> nina you play?
[07:03] <ozten> Hi Diedie: great question!
[07:03] <ninamaria> i play ultimate, but have never discgolfed
[07:04] <ozten> hi gonediscin!
[07:04] <gonediscin> I am in Clearwater, FL, USA.
[07:04] <ninamaria> NYC
[07:04] <gonediscin> Hi ozten!
[07:04] <Diedie> Hi Ozten! Thank you for getting up early! You are a hardcore teacher.
[07:04] <tapesofwrath> Pennsylvania
[07:04] <@mantissa> Cardiff, UK
[07:04] <gobi__> coimbatore , india
[07:04] <ozten> heh, oh ya
[07:05] <ozten> Seattle, WA (traveling in Mountain View CA)
[07:05] <gonediscin> How is mountain view? that is where google is right?
[07:06] <euge> hi ozten
[07:06] <ozten> Cardiff and coimbatore, very cool
[07:06] <ozten> hi euge
[07:07] <euge> Argentina here :)
[07:07] <gobi__> sure
[07:07] <ozten> that is great
[07:08] <ozten> We're spread around the planet pretty well... Another reason chat is a good first tool over anything high-tech
[07:08] <tapesofwrath> i agree
[07:09] <ozten> hi gobi thanks for being so active on the forum already
[07:09] <tapesofwrath> another class is using skype, but I don't have an ordinary computer mic so it's going to be a hassle to hook a real mic up to use with it
[07:09] <ozten> hi ninamaria
[07:09] <euge> agree, also my english sucks sometimes, so...sorry for that hehe
[07:09] <ozten> hi tapesofwrath, if that is your real name"
[07:09]  * ozten loves making that joke
[07:09] <euge> ^^
[07:09] <gonediscin> lol
[07:10] <ozten> euge: todo esta bueno
[07:10] <ozten> my Spanish is worse, I gaurentee it
[07:10] <euge> wow! es muy bueno ;)
[07:10] <ninamaria> hi ozten!
[07:11] <ninamaria> hablo espanol tambien euge...tengo familia alli
[07:11] <ozten> I'm checking my email to see if anyone has trouble getting into chat
[07:11] <bodong> lol. i have a question: will our conversation be saved somewhere so we can access again in case we need to?
[07:11] <euge> cool nina! :)
[07:11] <gonediscin> yo tam, pero aun un gringo frielero.
[07:11] <tapesofwrath> you can always copy/paste when we're done :)
[07:12] <ozten> bodong: Good question!
[07:12] <tapesofwrath> or use a dedicated IRC client and turn on logging
[07:12] <bodong> that's a good option :D thanks tapesofwrath!
[07:12] <ozten> This chat is actually "IRC" Internet Relay Chat
[07:12] <ozten> If you use an IRC client, it has more features
[07:12] <gonediscin> good question bodong
[07:12] <ozten> they usually have a "log" features
[07:12] <gonediscin> what IRC client is recommended
[07:13] <ozten> I've been using chatzilla, which works well on a stable internet connection
[07:13] <gobi__> can we use the same client to do this chat
[07:13] <ozten> If your on a Mac Colloquoy is awesome
[07:13] <ozten> I've heard good thinkgs about pidgin on linux
[07:13] <tapesofwrath> mIRC is good.  it's a paid app, but you can use the demo indefinitely until you decide to buy
[07:13] <tapesofwrath> I tend to use pidgin though
[07:14] <gonediscin> I have pidgin on my phone, never knew what it was, thanks ozten!
[07:14] <tapesofwrath> the IRC features are lacking a bit in pidgin, but it's nice having all clients rolled into one
[07:14] <ozten> Hard core web developers might use irssi - this is a command line program
[07:14] <ozten> We have to be careful with all of you awesome designers
[07:14] <ozten> to revel the mysteries of the web
[07:14] <ozten> but without turing you into hard core web developers... addicted to the command line
[07:15] <euge> haha
[07:15] <tapesofwrath> please do :p
[07:15] <ozten> irssi is a sign of addiction
[07:15] <ozten> I'm using the web chat today to make sure it works well
[07:15] <tapesofwrath> i'll have to look into it then
[07:15] <@mantissa> no..command line is a bit scary for some of us mortals :P
[07:16] <euge> It will last 1 hour right?
[07:16] <gonediscin> lol @mantissa
[07:16] <Diedie> so are most of you designers here?
[07:16] <ninamaria> i guess im not sure what a command line even is...am i revealing my ignorance?
[07:17] <gonediscin> unemployed, but yes. You diedie?
[07:17] <@mantissa> no, welcome to ignorance club..i feel so much better now
[07:17] <euge> Diedie, I'm trying to be one :)
[07:17] <@mantissa> amateur designer
[07:17] <gobi__> mee too
[07:17] <ninamaria> i am a designer but clueless about web
[07:18] <ozten> ninamaria: that is fine
[07:18] <ozten> a command line is a terminal program
[07:18] <bodong> i've done some programming before and want to learn more about design.
[07:18] <ozten> which lets you use the computer at a very low level
[07:18] <gonediscin> no command line is that black screen with white text that is a user interface for your computer. Windows is a graphic user interface where DOS is a command line interface
[07:18] <Diedie> i am trained in documentary produciton, and I only took a basic web design course before and know basic photoshop.
[07:18] <tapesofwrath> yeah same here.  designer, but not professionally yet.  hopefully soon now that i'm getting more comfortable.  beginning developer
[07:18] <ozten> I've created a Social Contract in the course materials http://p2pu.org/node/5588/document/9101
[07:18] <ozten> Please read this now
[07:19] <ozten> These are some basic rules
[07:19] <ozten> We're all here on our own time to share and learn
[07:19] <euge> cool
[07:19] <ozten> We should respect each other and invest in each other
[07:20] <ozten> It's all of our responsibilities to make sure we have fun, learn, and make some cool webpages
[07:20] <gobi__> i agree to it
[07:20] <gonediscin> contract accepted! Thank you for this class Ozten and P2PU!
[07:21] <ozten> bodong: You might learn design from everyone in the class, but this course is *not* about teaching design
[07:21] <@mantissa> I agree!
[07:21] <ninamaria> i agree, and thank you very much ozten.  i'm very excited for the course
[07:21] <bodong> definitely. we are building knowledge together, with each of us contributing to the community.
[07:22] <bodong> thanks ozten!
[07:22] <ozten> For people how are in Web Dev 101, there will  be some overlap with this course
[07:22] <ozten> Web Dev 101 will go much deeper, sooner
[07:22] <ozten> We will go slower and also cover issues that designers are more interested in
[07:23] <Diedie> souds good. and I  guess all the web dev 101 course materials would be online for us to read if we need to as an addtion.
[07:23] <ozten> Does anyone have any questions or concerns about the Social Contract?
[07:24] <ozten> Diedie: yes, that is true
[07:24] <@mantissa> all clear :)
[07:24] <euge> nop
[07:24] <gonediscin> good to go!
[07:24] <ozten> Review several other students work - this one is important
[07:24] <gonediscin> where are we going to post our work?
[07:25] <Diedie> Will do.
[07:25] <ozten> p2pu is "graded" by you
[07:25] <ozten> to the others in the class
[07:25] <ozten> so we should make sure everyone is getting kudos and critical feedback from several people
[07:25] <ninamaria> great
[07:25] <tapesofwrath> not a problem :)
[07:25] <bodong> sure!
[07:25] <ozten> cool
[07:26] <ozten> In todays class we are going to learn the basic pieces of web technology
[07:26] <ozten> But what makes one webpage better than another?
[07:26] <ozten> Can a webpage be more webby than another?
[07:27] <gobi__> design and usability
[07:27] <gonediscin> Agree with gobi
[07:27] <ozten> gobi: Good points, can you give some specific examples?
[07:27] <tapesofwrath> just curious, what's your definition of "webby" ozten?
[07:27] <gonediscin> I like how Facebook is simple, and uniformed accross the site
[07:27] <bodong> i need to understand what does the word webby mean.
[07:28] <ozten> In the Sign-Up tasks, many of you submitted screenshots for design elements of the TED website http://www.ted.com/
[07:28] <tapesofwrath> good site
[07:28] <euge> a nice looking web doesn't guarantee a good usability (easy to use)
[07:28] <ozten> tapesofwrath - webby - 1) of and by the web 2) working well with the Open Web
[07:28] <@mantissa> that's true
[07:28] <gobi__> but both flavours should be there for a great website
[07:28] <ozten> 3) I just made this up
[07:29] <@mantissa> the content of the website has to be tidy
[07:29] <Diedie> yeah i like it because it consider various interests and cultural backgrounds of the viewers and provide certain guidance to hook the viewers within a shot time.
[07:29] <ozten> What aspects of TED's homepage design do you like and why?
[07:29] <Diedie> the design is also quite interesting. it moves.
[07:29] <ozten> euge: great point
[07:30] <ozten> Diedie: yes, very modern web. Web 1.0 had lots of static "documents".
[07:30] <euge> I always look  a video in TED by the tags (organization),( unless I know a specific video)
[07:31] <ozten> But what happends when you "right mouse click" over those moving images?
[07:31] <euge> *look for a video
[07:31] <gonediscin> First time I have seen ted.com I find it nice that I had a general understanding of what the site is about before clicking on any link within it
[07:31] <@mantissa> yeah, the top and side menus are good
[07:31] <euge> FLASH
[07:31] <euge> :S
[07:31] <tapesofwrath> flash rears it's ugly head
[07:31] <bodong> flash..
[07:31] <ozten> yep, bummer
[07:31] <ozten> Flash is part of the web, but not the Open Web
[07:32] <ozten> Does anyone know what that means?
[07:32] <euge> it is propietary
[07:32] <ninamaria> no, not sure what the difference is
[07:32] <euge> it belongs to adobe
[07:32] <euge> to a company
[07:32] <ozten> ya
[07:32] <bodong> content in flash is not searchable?
[07:32] <ozten> yep
[07:32] <Diedie> also, viewers do have to wait to get into the next page to learn about the brief ideas of the featured videos, they only need to move their mouse over to the images of the video thumbnails
[07:33] <ozten> ninamaria: if you "right mouse click" on TED's logo
[07:33] <Diedie> i mean, viewers do not...
[07:33] <ozten> on that page  you can save it to your desktop
[07:33] <ozten> you can open it in the gimp or another image editor
[07:33] <ozten> but can you download the videos on TED?
[07:33] <@mantissa> nope
[07:33] <ozten> No we get this weird Adobe Flash menu
[07:33] <euge> a flash objetc (in this case the showcase) you can't edit it
[07:34] <@mantissa> and you can't view them unless you have the flashplayer installed
[07:34] <euge> yep
[07:34] <ozten> in this class we will learn about the technologies of the Open Web
[07:34] <gonediscin> I have keeptube plugin for firefox and it didn't give me the option to download from ted.com
[07:34] <ozten> which includes an HTML5 tag "video"
[07:34] <@mantissa> I love the open web!
[07:35] <Diedie> great.
[07:35] <bodong> i love this topic.
[07:35] <ozten> If you wanted to share your video and you use this technology, then it's trivial for others to remix your work
[07:35] <ozten> and keep the party going
[07:35] <euge> well, the same issue with youtube.com, but they are testing new HTML5 videos (open web technology)
[07:36] <ozten> gonediscin: Cool Add-on tip
[07:36] <ozten> euge: Youtube is an early adopter of HTML5 video tag, good pooint
[07:36] <ozten> Okay what else about the page
[07:37] <ozten> How is it different than print?
[07:37] <ozten> How is it different than film?
[07:37] <bodong> those images are resizable.
[07:37] <gonediscin> it is interactive, like leaving comments and stuff
[07:37] <ozten> Which elements beside the video previews are especially georgeous or typical of websites?
[07:37] <euge> it's 2.0
[07:37] <bodong> they are linked to other webpages.
[07:37] <ozten> euge: Interesting - What do you mean by 2.0?
[07:38] <euge> that the users can participate with comments, share, subtitles, etc
[07:38] <ozten> bodong - great point this homepage links to other "landing pages"
[07:39] <tapesofwrath> it's a very minimalist design (besides the flashing, bouncing vid thumbs)
[07:39] <ozten> ya Web 1.0 is about documents and Web 2.0 is about participation
[07:39] <euge> there is a lot of activities related to every video
[07:39] <Diedie> Also it considers viewers from other languages: http://www.ted.com/OpenTranslationProject
[07:39] <ozten> tapesofwrath: it is clean, isn't it
[07:40] <ozten> Diedie: very important
[07:40] <ozten> With the web, we can reach the world for free
[07:40] <ozten> cool
[07:40] <ozten> so how the heck does all this stuff work?
[07:41] <euge> TEDTalks are distributed under a Creative Commons (CC) license.
[07:41] <ozten> Thanks to our friends at Opera we can learn :) http://dev.opera.com/articles/view/3-how-does-the-internet-work/
[07:41] <ozten> I'm going to talk through this stuff, you don't have to read that link now
[07:41] <ozten> please ask me questions as I type
[07:42] <ozten> if you don't understand anything
[07:42] <Diedie> after you watch the videos, they recommend videos related to it. i mean TED is not the only doing it but it's a nice accessible funtion.
[07:42] <ozten> So we are all using computers, with screens a mouse, and a keyboard
[07:42] <ozten> And we can access this beutiful TED website
[07:42] <ozten> In the old days you would need a "multi-media CDROM"
[07:43] <ozten> but the internet provides a network
[07:43] <ozten> where your computer can talk to other computers
[07:43] <ozten> when you go to TED you use a URL
[07:44] <ozten> This is the URL http://www.ted.com/
[07:44] <ozten> A URL is like a name
[07:44] <ozten> We can break this name apart
[07:45] <ozten> http - This is the networking language
[07:45] <ozten> HyperText Transfer Protocol
[07:45] <ozten> www.ted.com - This is the domain name
[07:46] <ozten> Does everyone know what a browser is?
[07:47] <ozten> A browser like Firefox, Opera, Chrome, etc knows how to use a URL
[07:47] <gonediscin> what we have open now
[07:47] <ozten> it can speak in HTTP
[07:47] <ozten> It's all just text
[07:47] <Diedie> what makes firefox a unique browser?
[07:47] <euge> it's a program that allows you to see the information in a webpage
[07:47] <euge> website
[07:48] <ozten> right
[07:48] <gobi__> well in that if i try to open a text file it shows the contents of the text file
[07:48] <ozten> So the browser takes the hostname and turns that into a location of a computer on the public internet
[07:48] <ozten> and it starts talking to it
[07:49] <ozten> By hostname, I mean domain name
[07:49] <ozten> sorry
[07:49] <bodong> it is an application that can communicate in several web protocols and "decode" web documents into what we are browsing now.
[07:49] <ozten> there is a service called DNS (domain name service)
[07:49] <ozten> this is an internet standard for naming domains and computers so they can talk to each other
[07:49] <ozten> your browser is a client
[07:49] <ozten> and ted.com is a server
[07:50] <ozten> it has a web server
[07:50] <ozten> it serves up documents
[07:50] <ozten> these can be webpages
[07:50] <ozten> Everyone should switch to their TED tab or window
[07:51] <ozten> and then do Menu > View > Source
[07:51] <ozten> Wow, your browser just vommited the web on your screen!
[07:51] <@mantissa> :))
[07:52] <ozten> All kinds of weird stuff in there
[07:52] <ozten> this first document is HTML
[07:52] <ozten> You can even see "<html"
[07:52] <ozten> An html document can be made of other pieces
[07:53] <ozten> images, styles, videos, audio clips, fonts, etc
[07:53] <ozten> if you search into the Source you'll see
[07:53] <ozten> <img src="/images/ted_logo.gif"/>
[07:53] <Diedie> content
[07:54] <ozten> This is why the TED logo appears in the screen
[07:54] <ozten> your browser reads HTML and displays the page
[07:54] <ozten> So the crazy thing is that you can copy/paste HTML to create new webpages
[07:54] <ozten> View Source has a posse!
[07:55] <ozten> You can learn from each other and websites that you admire, by viewing the source
[07:55] <gonediscin> will HTML5 look similar to this?
[07:55] <ozten> HTML5 is simpler and cleaner
[07:56] <tapesofwrath> http://www.getfirebug.com/
[07:56] <tapesofwrath> for anybody that doesn't use it or something like it yet
[07:56] <gonediscin> thanks, will install the plugin after class!
[07:56] <ozten> lots of the tapesofwrath: great suggestion!
[07:57] <ozten> Let's make that part of this weeks assignment
[07:57] <bodong> great tool!
[07:57] <ozten> if you use Firefox to install Firebug
[07:57] <gobi__> you can play with the html page using firebug
[07:57] <ozten> if you don't use Firefox then to learn about the "web development" tools of your browser
[07:57] <euge> chrome has a feature like firebug too
[07:57] <@mantissa> i'm gonna try it too. cheers
[07:57] <tapesofwrath> yep and opera. IE even though.... blah
[07:58] <bodong> euge: really? what is it?
[07:58] <ozten> so how do these documents get put up on these servers?
[07:58] <ozten> I make a web page, I have to put it on a web server
[07:58] <gonediscin> as web developers should we have all the different browsers anyways?
[07:58] <tapesofwrath> yep
[07:58] <ozten> there is an old internet technology called FTP
[07:58] <ozten> We will use this throughout the class
[07:59] <ozten> You assignment this week has parts 2 and 3
[07:59] <ozten> 1) install firebug
[07:59] <ozten> 2) get a web hosting space
[07:59] <ozten> 3) get an FTP client
[07:59] <ozten> in general Foo client
[07:59] <ozten> means a Foo program
[07:59] <ozten> Firefox is a web client
[08:00] <ozten> Filezilla is a FTP client
[08:00] <@mantissa> filezilla is good :)
[08:00] <ozten> For #2 - There is free web hosting
[08:00] <tapesofwrath> foo?  as in a variable? that part lost me
[08:00] <ozten> and there is cheap web hosting
[08:00] <@mantissa> what does Foo mean?
[08:00] <ozten> tapesofwrath - Sorry, foo is a fake thing
[08:00] <ozten> like X
[08:00] <ozten> yes like a variable
[08:01] <tapesofwrath> ok
[08:01] <ozten> Class by the way - I am an engineer, not a designer
[08:01] <tapesofwrath> ok, so get any ftp client
[08:01] <ozten> so I use lots of crazy talk
[08:01] <Diedie> do we have to use Foo or it is just an option?
[08:01] <ozten> like foo, bar, hostname
[08:01] <gonediscin> if anyone is going to signup for bluehost.com let me know, I will set up the referal and make 65$ my email kylecrowden@gmail.com
[08:01] <ozten> I'm trying very hard to use plain english :)
[08:02] <@mantissa> :)
[08:02] <ozten> gonediscin - Do you want to start a new Forum discussion on hosting optins
[08:02] <bodong> we will get used to it :D
[08:02] <ozten> I will create a new document called Assignements
[08:02] <ozten> which the first class assignment details
[08:02] <ozten> You don't have to register a domain name for this class
[08:02] <gonediscin> Okay, but i have only used 1&1 and bluehost
[08:03] <ozten> if you do, then we will all envy you
[08:03] <@mantissa> use free webhosting
[08:03] <ozten> and you will be cool
[08:03] <ozten> but you could use free hosting and your url will not be personalized
[08:03] <ozten> that is fine
[08:03] <ozten> usually the will put ads in your pages, etc
[08:04] <ozten> By next week at this time you should have signed up for a web account
[08:04] <ozten> and installed a FTP program
[08:04] <ozten> as well as Firebug
[08:04] <ninamaria> any suggestion for free hosting?
[08:04] <euge> ok
[08:04] <bodong> sounds great.
[08:04] <ninamaria> is cyberduck an ftp program?
[08:05] <ozten> ninamaria: yes
[08:05] <euge> ninamaria I would recommend Filezilla
[08:05] <ozten> free hosting - anyone ?
[08:05] <ninamaria> oh, ok
[08:05] <bodong> for ftp client, i also recommend FileZilla
[08:05] <euge> 000webhosting
[08:05] <ozten> I use Dreamhost for my personal website and it's very cheap
[08:05] <Diedie> i have a program somewhere, but will try Filezilla
[08:05] <euge> I have my own domain with a free webhosting and it works very well
[08:05] <ozten> I also like Rackspace, I think they have some cheaper hosting options
[08:05] <ozten> euge: Who is the service provider?
[08:06] <gonediscin> I use dreamweaver with it's built in FTP, but am excited to learn filezilla!
[08:06] <@mantissa> i use siteground, I paid £10 for the domain name for a year and the hosting is for free. they offer cPanel and loads of tuff
[08:06] <ninamaria> i already use 1 and 1 for my website, but to experiment should i just start fresh with free hosting??
[08:06] <ozten> ninamaria: no
[08:06] <euge> it's really good! And the customer service too
[08:06] <ozten> if you can FTP to it, then your all set
[08:06] <ozten> read their support pages to make sure FTP is an option
[08:06] <gonediscin> I use bluehost.com which is like 100$ a year
[08:06] <euge> 000webhosting is for free
[08:07] <ozten> I think that does it for the official part of Week 1's class
[08:07] <gonediscin> you get one or two domain names, but go daddy sells them for like $0.99
[08:07] <euge> http://www.000webhost.com/
[08:07] <ozten> thank you all so much!
[08:07] <ozten> and keep chatting here
[08:07] <tapesofwrath> thank you!
[08:07] <Diedie> nina, i also use 1 and 1, but i may switch. we can chat later if we run into problems.
[08:07] <gonediscin> Thank you Ozten, have a great day!
[08:07] <@mantissa> ozten: thank you!
[08:07] <ozten> we can take the discussion to the forums
[08:07] <Diedie> thank you all
[08:07] <ozten> once we start logging off
[08:07] <ozten> gonediscin: you too
[08:07] <euge> cool
[08:07] <Diedie> en hm
[08:08] <ozten> my office hours are in the Syllabus
[08:08] <ozten> Thursday and Friday
[08:08] <ninamaria> thank you!
[08:09] <bodong> thank you ozten. thank you everybody!